@layer base {
	/**
	 * MARK: - Document
	 */
	html {
		--color-accent: var(--palette-green);
		--color-headline: var(--palette-gray);

		scroll-behavior: smooth;
		color: var(--color-canvastext);
		accent-color: var(--color-accent);
		color-scheme: light only;
		caret-color: var(--color-accent);
		font-family: var(--font-main);
	}

	/**
	 * MARK: - Body
	 */

	body {
		font-size: var(--font-size-xs);
	}

	* {
		scroll-margin-block-start: calc(var(--logo-size) + 1lh);
	}

	/**
	 * MARK: - Typography
	 */
	:where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
		color: var(--color-headline, var(--palette-gray));
		font-weight: normal;
		line-height: 1.325;
		font-family: var(--font-alt);

		&:not(.sub)::before {
			content: "// " / "";
		}
	}

	:where(h1, .h1, h2, .h2, h3, .h3, h4, .h4):not(:first-child) {
		margin-block-start: 1.25em;
	}

	:where(h1, .h1, h2, .h2, h3, .h3, h4, .h4):not(:last-child) {
		margin-block-end: 0.5em;

		& + :where(h1, .h1, h2, .h2, h3, .h3) {
			margin-block-start: 0;
		}
	}

	:where(h1, .h1) {
		font-size: var(--font-size-xxl);
	}

	:where(h2, .h2) {
		font-size: var(--font-size-xl);
	}

	:where(h3, .h3) {
		font-size: var(--font-size-lg);
	}

	:where(h4, .h4) {
		color: var(--color-canvastext);
		font-size: calc(var(--font-size-md) * 0.9);
	}

	:where(h5, .h5) {
		font-size: var(--font-size-sm);
	}

	:where(h6, .h6) {
		opacity: var(--opacity-subtle);
		font-size: var(--font-size-sm);
	}

	.sub {
		font-size: var(--font-size-sm);

		&:not(:last-child) {
			margin-block-end: 1.5em;
		}
	}

	/**
	 * MARK: - Interactive
	 */
	.btn {
		display: block;
		transition:
			background-color var(--transition),
			color var(--transition);
		border: 0.1rem solid var(--palette-green);
		background-color: var(--palette-white);
		padding: 0.9em 1em;
		inline-size: fit-content;
		color: var(--palette-green);
		font-weight: bolder;
		-webkit-user-select: none;
		user-select: none;
		text-decoration: none;

		&:where(:hover, :focus-visible) {
			background-color: var(--palette-green);
			color: var(--palette-white);
		}

		&::after {
			transform: scale(1.125);
			margin-inline: 0.875ch 0 !important;
		}
	}

	a {
		display: inline;
		transition: text-decoration-color var(--transition);
		color: var(--palette-green);
		font-weight: bolder;

		@supports (content: "" / "") {
			&::after {
				display: inline-block;
				transform: scale(1.125);
				transition: margin-inline var(--transition);
				margin-inline: 0.875ch 0.375ch;
				content: "\f061" / "";
				font-weight: normal;
				font-family: var(--font-fa);
				text-decoration: none;
			}

			&:where(:hover, :focus-visible)::after {
				margin-inline: 1.25ch 0;
			}
		}

		&[aria-current="page"] {
			text-decoration-color: currentColor;
		}

		&[data-current-ancestor="true"] {
			text-decoration-color: currentColor;

			&:where(:hover, :focus-visible) {
				text-decoration-color: transparent;
			}
		}

		&:where(.image > a, :has(> :where(img, [role="img"]))) {
			&::after {
				content: none;
			}
		}
	}

	.icon-link {
		display: block;
		font-size: var(--font-size-sm);
	}

	/**
	 * MARK: - Layout
	 */
	#content > [data-content]:nth-child(2n-1) {
		background-color: var(--palette-white);
	}

	#content > [data-content]:nth-child(2n) {
		background-color: var(--palette-beige-alt);
	}

	#content > [data-content] {
		padding-block: calc(var(--gap) * 1);

		@media (min-width: 540px) {
			padding-block: calc(var(--gap) * 2);
		}

		@media (min-width: 744px) {
			padding-block: calc(var(--gap) * 3);
		}

		&[data-content="div"] {
			padding: 0;
		}
	}

	.container > [data-content] {
		&:not(:first-child) {
			margin-block-start: calc(var(--gap) * 1);
		}

		&:not(:last-child) {
			margin-block-end: calc(var(--gap) * 1);
		}
	}

	#nav-skip {
		position: fixed;
		z-index: 15;
		margin: 2em 1em;
		inset-block-start: 0;
		inset-inline-start: 0;

		& a {
			background-color: var(--palette-green-alt);
			padding: 1em;
			color: var(--palette-green);

			&::after {
				content: none;
			}
		}
	}

	/**
	 * MARK: - Header
	 */
	#header {
		display: grid;
		position: fixed;
		grid-template-rows: var(--logo-size);
		grid-template-columns: auto 1fr;
		grid-template-areas: "logo wrap";
		justify-content: end;
		z-index: 10;
		inset-block-start: 0;
		inset-inline-end: 0;
		inline-size: calc(100% - (100% - var(--container-width) + var(--gap)) / 2);
		max-block-size: 15rem;

		& .logo {
			grid-area: logo;
			block-size: 100%;

			& img {
				inline-size: auto;
				block-size: var(--logo-size);
				object-fit: contain;
			}
		}

		& .header-wrap {
			display: grid;
			grid-template-rows: 1fr 1fr;
			grid-template-areas: "top" "bottom";
			grid-area: wrap;

			@media (min-width: 1260px) {
				grid-template-rows: 3fr 2fr;
			}

			& > * {
				padding-inline: calc(var(--gap) / 2) calc((100svi - var(--container-width) + var(--gap)) / 2);

				@media (min-width: 744px) {
					padding-inline: var(--gap) calc((100svi - var(--container-width) + var(--gap)) / 2);
				}
			}

			& .header-top {
				display: flex;
				grid-area: top;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				background-color: var(--palette-beige);
				min-block-size: calc(var(--logo-size) / 2);
			}

			& .header-title {
				padding: 0.325em 0;
				font-size: calc(var(--font-size-sm) * 0.9);
				font-family: var(--font-alt);

				@media (min-width: 540px) {
					font-size: var(--font-size-md);
				}

				@media (min-width: 744px) {
					padding: 0.4em 0;
					font-size: var(--font-size-lg);
				}
			}

			& .header-bottom {
				display: flex;
				position: relative;
				grid-area: bottom;
				justify-content: space-between;
				align-items: center;
				background-color: var(--palette-beige-alt);
			}

			& .header-bottom-contact {
				display: flex;
				position: absolute;
				flex-direction: row;
				align-items: center;
				gap: 1rem;
				inset-block-start: 0;
				padding: 0.5em 0;
				block-size: calc(var(--logo-size) / 2);

				@media (min-width: 1260px) {
					display: none;
				}
			}

			& .header-contact {
				display: none;
				flex-direction: row;
				align-items: center;
				gap: 1.5rem;

				@media (min-width: 1260px) {
					display: flex;
				}
			}

			& .nav-separator {
				border-inline-start: 0.1rem solid var(--palette-gray);
				block-size: 2em;
			}

			& ul {
				display: flex;
				flex-direction: row;
				gap: 1rem;
				margin: 0;

				& li {
					margin: 0;
				}
			}
		}

		& #header-nav {
			display: flex;
			align-items: end;
			inline-size: 100%;
			block-size: 100%;

			& details {
				inline-size: 100%;
				block-size: 100%;

				& > summary {
					display: flex;
					align-items: center;
					margin-inline-start: auto;
					margin-block: 0.5em;
					inline-size: fit-content;
					block-size: calc(var(--logo-size) / 2 - 0.5em * 2);
					min-block-size: 0;

					@media (min-width: 744px) {
						margin-block: 0.75em;
						block-size: calc(var(--logo-size) / 2 - 0.75em * 2);
					}

					@media (min-width: 1260px) {
						display: none;
					}

					&::marker {
						content: none;
					}
				}

				@media (min-width: 1260px) {
					&::details-content {
						content-visibility: visible !important;
						transition: none !important;
						block-size: auto !important;
						overflow: visible !important;
					}
				}
			}

			& .menu-content {
				margin-block-end: 1lh;
				padding-block: 0.5rem;
				inline-size: 100%;
				max-block-size: calc(95svb - var(--logo-size));
				overflow: auto;

				@media (min-width: 1260px) {
					position: relative;
					margin: 0;
					padding: 0;
					overflow: visible;
				}

				& > ul {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					gap: 0;
					padding-inline: 0.5rem;
					block-size: 100%;

					@media (min-width: 1260px) {
						flex-direction: row;
						padding-inline: 0;
					}

					& > li {
						&:has(:hover, :focus-visible, :focus-within) {
							& ul:not(.nav-dismissed) {
								visibility: visible;
								opacity: 1;
							}
						}

						& ul.nav-dismissed {
							transition: none;
						}
					}

					& li {
						display: flex;
						position: relative;
						flex-direction: column;

						& > a {
							padding: 0.5em 0;
							inline-size: fit-content;

							@media (min-width: 744px) {
								padding: 0.75em 0;
							}
						}
					}

					& ul {
						display: flex;
						flex-direction: column;
						gap: 0;
						padding-inline-start: calc(var(--gap) / 2);

						@media (min-width: 1260px) {
							position: absolute;
							visibility: hidden;
							opacity: 0;
							z-index: -1;
							transition:
								visibility var(--transition) allow-discrete,
								opacity var(--transition);
							inset-block-start: 100%;
							inset-inline-start: calc(var(--gap) / -2);
							background-color: var(--palette-beige-alt);
							padding-inline-end: calc(var(--gap) / 2);
							padding-block: 0.5rem;
							inline-size: max-content;
							max-block-size: calc(95svb - var(--logo-size));
							overflow: auto;
						}
					}
				}
			}
		}

		& .toggler {
			display: flex;
			position: relative;
			justify-content: center;
			align-items: center;
			border: none;
			background-color: unset;
			block-size: 1em;
			color: var(--palette-green);
			font-size: calc(var(--font-size-md) * 1);
			line-height: 1;

			& .button-icon {
				--bar-size: 0.125rem;

				display: inline-flex;
				position: relative;
				flex-flow: column nowrap;
				justify-content: space-between;
				vertical-align: 0.75em;
				inline-size: 1.125em;
				block-size: 0.85em;
				line-height: 1;

				@media (min-width: 960px) {
					--bar-size: 0.25rem;
				}

				& > span {
					display: block;
					position: absolute;
					transform-origin: center;
					transition:
						transform var(--transition),
						opacity var(--transition);
					border-radius: 0.05rem;
					background-color: var(--palette-green);
					inline-size: 100%;
					block-size: var(--bar-size);

					&:nth-child(1) {
						top: 0;
					}

					&:nth-child(2),
					&:nth-child(3) {
						bottom: calc(50% - var(--bar-size) / 2);
						opacity: 0.667;
					}

					&:nth-child(4) {
						bottom: 0;
					}
				}
			}

			&:where([open] *) > .button-icon > span {
				&:nth-child(1) {
					transform: translateY(0.75em) scaleX(0);
					opacity: 0;
				}

				&:nth-child(2) {
					transform: rotate(-45deg) scaleX(1.2);
					opacity: 1;
				}

				&:nth-child(3) {
					transform: rotate(45deg) scaleX(1.2);
					opacity: 1;
				}

				&:nth-child(4) {
					transform: translateY(-0.75em) scaleX(0);
					opacity: 0;
				}
			}
		}
	}

	/**
	 * MARK: - Hero
	 */
	@keyframes fill-progress {
		from {
			inline-size: 0;
		}
		to {
			inline-size: 100%;
		}
	}

	#hero {
		display: grid;
		grid-template-columns: 100%;
		grid-template-areas: "hero";
		justify-content: center;
		align-items: center;
		contain: paint;
		inline-size: 100%;
		min-block-size: 100svb;

		&:where([data-layout="subpage"] > #hero) {
			min-block-size: 50svb;
		}

		& .hero-content {
			grid-area: hero;
			z-index: 1;
			margin-block: calc(var(--logo-size) + 5rem) 5rem;

			& header {
				background-color: color-mix(in oklch, var(--palette-green) 90%, transparent);
				padding-inline: calc((100svi - var(--container-width) + var(--gap)) / 2) var(--gap);
				padding-block: calc(var(--gap) / 2);
				inline-size: fit-content;

				@media (min-width: 744px) {
					padding-block: calc(var(--gap) * 1.5);
				}

				& h1 {
					color: var(--palette-white);
				}

				& ::selection {
					--color-highlight: var(--palette-white);
				}
			}
		}

		& .hero-media {
			position: absolute;
			grid-area: hero;
			inline-size: 100%;
			block-size: 100%;

			& img {
				block-size: 100%;
			}
		}

		& .swiper-wrap {
			inline-size: 100%;
			block-size: 100%;

			& .swiper {
				inline-size: 100%;
				block-size: 100%;
			}

			& .swiper-wrapper {
				display: grid;
				grid-template-rows: 100%;
				grid-template-areas: "slide";
				inline-size: 100%;
				block-size: 100%;
			}

			& .swiper-slide {
				display: grid;
				grid-template-rows: 100%;
				grid-template-columns: 100%;
				grid-template-areas: "slide-content";
				grid-area: slide;
				justify-content: center;
				align-items: center;
				transition:
					content-visibility var(--transition) allow-discrete,
					opacity var(--transition) !important;
				inline-size: 100%;
				block-size: 100%;

				& .swiper-slide-media {
					grid-area: slide-content;
					z-index: -1;
					inline-size: 100%;
					block-size: 100%;

					& :where(video, img) {
						inline-size: 100%;
						block-size: 100%;
						object-fit: cover;
					}
				}

				& .swiper-slide-content {
					grid-area: slide-content;
					margin-block: calc(var(--logo-size) + 5rem) 5rem;

					& .hero-title {
						--color-accent: var(--palette-white);
						background-color: color-mix(in oklch, var(--palette-green) 90%, transparent);
						padding-inline: calc((100svi - var(--container-width) + var(--gap)) / 2) var(--gap);
						padding-block: calc(var(--gap) / 2);
						inline-size: fit-content;

						@media (min-width: 744px) {
							padding-block: calc(var(--gap) * 1.5);
						}

						& h2 {
							color: var(--palette-white);
						}

						& a {
							color: var(--palette-white);
						}
					}

					& ::selection {
						--color-highlight: var(--palette-white);
					}
				}

				&.swiper-slide-active {
					content-visibility: auto !important;
					opacity: 1 !important;
				}
				&:not(.swiper-slide-active) {
					content-visibility: hidden !important;
					opacity: 0 !important;
					z-index: -1 !important;
				}
			}

			& .swiper-progress {
				display: flex;
				position: absolute;
				gap: 1.125rem;
				z-index: 1;
				inset-block-end: 0;
				inline-size: 100%;
				block-size: 1.125rem;

				& .swiper-pagination-bullet {
					display: block !important;
					position: relative;
					opacity: 0.7 !important;
					cursor: pointer;
					margin: 0 !important;
					border-radius: 0 !important;
					background: var(--palette-white) !important;
					inline-size: 100% !important;
					block-size: 100% !important;
					min-block-size: unset !important;

					&:has(~ .swiper-pagination-bullet-active) {
						background: var(--palette-green) !important;
					}

					&::before {
						position: absolute;
						z-index: 1;
						inset: 0;
						background-color: var(--palette-green);
						inline-size: 0;
						block-size: 100%;
						content: "";
					}

					&.swiper-pagination-bullet-active {
						&::before {
							animation: fill-progress 6000ms linear forwards;
							inline-size: 100%;
						}
					}
				}
			}
		}
	}

	/**
	 * MARK: - Breadcrumb
	 */
	#breadcrumb {
		background-color: var(--palette-green-alt);
		padding-block: 1.325rem;
		font-size: calc(var(--font-size-xs) * 0.8);

		& a {
			&::after {
				content: none;
			}

			&[aria-current="page"] {
				color: var(--color-canvastext);
				font-weight: normal;

				text-decoration: none !important;
			}

			&[data-current-ancestor="true"] {
				text-decoration-color: transparent;
			}
		}
	}

	/**
	 * MARK: - Footer
	 */
	#footer {
		& .footer-top {
			background-color: var(--palette-beige);
			max-block-size: var(--logo-size);

			& .container {
				display: grid;
				grid-template-rows: var(--logo-size);
				grid-template-columns: auto 1fr;
				grid-template-areas: "logo social";

				& .logo {
					grid-area: logo;
					block-size: 100%;

					& img {
						inline-size: auto;
						block-size: var(--logo-size);
						object-fit: contain;
					}
				}

				& .footer-social {
					grid-area: social;
					align-self: center;
					justify-self: end;

					& ul {
						display: flex;
						flex-direction: row;
						gap: 1ch;
					}

					& a {
						color: var(--palette-green);
					}
				}
			}
		}
		& .footer-bottom {
			background-color: var(--palette-beige-alt);

			padding-block: calc(var(--gap) * 0.75);

			@media (min-width: 960px) {
				padding-block: calc(var(--gap) * 1.75);
			}

			& ul li:not(:last-child) {
				margin-block-end: 0.325lh;
			}

			& :where(h3, .h3) {
				margin-block-end: 1.125lh;
				font-size: var(--font-size-sm);
			}

			& .copyright p {
				max-inline-size: unset;
				text-align: right;
			}
		}
	}

	/**
	 * MARK: - Miscellaneous
	 */
	.cf-cookie-openconsent {
		right: 1rem !important;
		bottom: 6rem !important;
		left: unset !important;
		z-index: 8 !important;
		background-color: transparent !important;
		padding: 0 !important;
		inline-size: fit-content;

		@media (min-width: 960px) {
			bottom: 8rem !important;
		}

		& [role="button"] {
			display: block;
			transition:
				background-color var(--transition),
				color var(--transition),
				transform var(--transition);
			border: 0.1rem solid var(--palette-green) !important;
			border-radius: 100vmax;
			background-color: var(--palette-green);
			padding: 0.5em;
			aspect-ratio: 1;
			inline-size: fit-content;
			color: var(--palette-white);
			font-size: calc(var(--font-size-sm) * 1.325);
			text-align: center;

			& img {
				display: none;
			}

			&::after {
				content: none;
			}
			&::before {
				display: block;
				aspect-ratio: 1;
				inline-size: 1em;
				content: "\f563" / "";
				font-family: var(--font-fa);
			}

			&:where(:hover, :focus-visible) {
				transform: scale(1.05);
			}
		}
	}

	.asw-menu-btn {
		display: block;
		position: fixed;
		right: 1rem !important;
		bottom: 12rem !important;
		z-index: 8;
		transition:
			background-color var(--transition),
			color var(--transition),
			transform var(--transition);
		border: 0.1rem solid var(--palette-green) !important;
		border-radius: 100vmax;
		background-color: var(--palette-green);
		padding: 0.5em;
		aspect-ratio: 1;
		inline-size: fit-content;
		color: var(--palette-white);
		font-size: calc(var(--font-size-sm) * 1.325);
		text-align: center;

		@media (min-width: 960px) {
			bottom: 16rem !important;
		}

		& svg {
			display: none;
		}

		&::after {
			content: none;
		}
		&::before {
			display: block;
			aspect-ratio: 1;
			inline-size: 1em;
			content: "\e787" / "";
			font-family: var(--font-fa);
		}

		&:where(:hover, :focus-visible) {
			transform: scale(1.05);
		}
	}

	figcaption {
		margin-block-start: 0;
		background-color: var(--palette-gray);
		color: var(--palette-white);
	}

	/**
	 * MARK: - Address Map
	 */
	.address-map {
		display: grid;
		position: relative;
		anchor-name: --map;
		grid-template-areas: "map";

		& .address-map-locations {
			grid-area: map;
			z-index: 1;

			& .address-element {
				position: absolute;
				transform: translate(-50%, -75%);
				text-align: center;

				& > a {
					&::after {
						content: none;
					}
				}

				& .address-code {
					display: grid;
					grid-template-rows: auto auto;
					row-gap: calc(1 / 10 * var(--gap));
					z-index: -1;
					pointer-events: auto;

					&:where(:focus-visible, :hover) + .address-tag {
						visibility: visible;
						opacity: 0.9;
					}
				}
				& .address-code-name {
					font-size: var(--text-md);
					line-height: 1;
				}
				& .address-code-pin {
					border-radius: 50%;
					background-color: var(--palette-green);
					inline-size: 1em;
					block-size: 1em;
				}
				& .address-tag {
					position: absolute;
					transform: translateX(-50%) translateY(1em);
					visibility: hidden;
					opacity: 0;
					z-index: -1;
					transition:
						visibility var(--transition) allow-discrete,
						opacity var(--transition);
					inset-block-start: 100%;
					inset-inline-start: 50%;
					box-shadow: 0 0.5rem 0.5rem color-mix(in oklch, var(--palette-dark) 25%, transparent);
					background-color: var(--palette-light);
					padding: 1em;
					width: calc(8 * var(--gap));

					&::after {
						position: absolute;
						top: 0;
						transform: translateX(-50%) translateY(-50%) rotate(45deg);
						background-color: inherit;
						width: 1em;
						height: 1em;
						content: "";
					}
				}
			}
		}

		& .address-map-media {
			grid-area: map;
			inline-size: 100%;
			block-size: 100%;
		}

		& .map-marker {
			--color-highlight: var(--palette-green);

			position: absolute;
			top: var(--pos-y);
			left: var(--pos-x);
			transform: translate(-50%, -50%);
			content-visibility: hidden;
			opacity: 0;
			transition:
				content-visibility var(--transition) allow-discrete,
				opacity var(--transition) !important;
			margin-inline: 0;
			background-color: var(--palette-green) !important;
			color: var(--palette-white) !important;
			font-size: var(--font-size-xs);

			&:where(:hover, :focus-visible, .map-btn-visible) {
				content-visibility: visible;
				opacity: 1;
			}

			@supports (content: "" / "") {
				&::after {
					display: inline-block;
					transform: scale(1.125);
					transform: scale(1.125);
					transition: margin-inline var(--transition);
					margin-inline: 0.875ch 0;
					content: "\f061" / "";
					font-weight: normal;
					font-family: var(--font-fa);
					text-decoration: none;
				}
			}
		}

		& [data-id="address-map"] > g {
			transition: fill var(--transition);

			&.map-fill:where(:hover, :focus-visible, .map-highlight) {
				fill: var(--palette-green-alt);
			}
		}

		& .map-none {
			fill: var(--palette-white);
		}

		& .map-fill {
			fill: var(--palette-beige);
		}

		& .map-popup {
			--color-headline: var(--palette-green);
			opacity: 0;
			transition:
				opacity var(--transition),
				overlay var(--transition) allow-discrete,
				display var(--transition) allow-discrete;
			margin: calc(var(--gap) / 2);
			box-shadow: 0 0.5rem 1rem color-mix(var(--palette-black) 25%, transparent);
			border: none;
			padding: var(--gap);

			& ::selection {
				--color-highlight: var(--palette-green) !important;
			}

			&:popover-open {
				opacity: 0.9;
			}

			@starting-style {
				&:popover-open {
					opacity: 0;
				}
			}

			@supports (position-anchor: --map) {
				position-anchor: --map;
				top: max(anchor(top), calc(var(--logo-size) + var(--gap) / 2));
				left: anchor(left);
			}

			@supports not (position-anchor: --map) {
				margin-block-start: calc(var(--logo-size) + var(--gap) / 2);
			}

			& header > * {
				font-weight: bolder;
				font-size: var(--font-size-sm);

				&::before {
					content: none;
				}
			}
		}
	}

	/**
	 * MARK: - News
	 */
	.news {
		& .news-list-view {
			display: flex;
			flex-direction: column;

			& .news-list-item {
				display: grid;
				position: relative;
				grid-template-rows: 1fr auto;
				grid-template-areas: "media" "content";
				gap: calc(var(--gap) / 2);
				border-block-end: 0.1rem solid var(--palette-green-alt);
				padding-block: var(--gap);

				@media (min-width: 744px) {
					grid-template-rows: 1fr;
					grid-template-columns: 1fr 3fr;
					grid-template-areas: "media content";
					gap: var(--gap);
				}

				&:first-child {
					border-block-start: 0.1rem solid var(--palette-green-alt);
				}

				&:has(a:focus-visible, :hover) .news-list-header > * {
					color: var(--palette-green);
				}

				& .news-list-media {
					grid-area: media;

					& .news-img-wrap {
						display: flex;
						position: relative;
						justify-content: center;
						align-items: center;
						block-size: 100%;
						overflow: hidden;
						overflow: clip;

						& img {
							position: relative;
							z-index: 1;
							margin: 0 !important;
							inline-size: 100%;
							block-size: 100%;
							object-fit: contain;
							pointer-events: none;
						}
						& img:first-child {
							object-fit: contain;
						}
						img:last-child {
							position: absolute;
							top: 0;
							left: 0;
							transform: scale(1.075);
							z-index: 0;
							filter: blur(0.625rem) brightness(0.625);
							object-fit: cover;
						}
					}
				}

				& .news-list-content {
					display: flex;
					grid-area: content;
					flex-direction: column;
					gap: calc(var(--gap) / 2);

					& .news-list-date {
						font-weight: bolder;
					}

					& .news-list-title {
						margin: 0;
						font-size: calc(var(--font-size-sm) * 1.125);

						&::before {
							content: none;
						}
					}

					& .news-list-more {
						position: absolute;
						inset: 0;
						inline-size: 100%;
						block-size: 100%;

						& > a {
							position: absolute;
							z-index: 1;
							inset: 0;
							inline-size: 100%;
							block-size: 100%;

							&::after {
								content: none;
							}
						}
					}
				}
			}
		}

		& .news-single-view {
			display: flex;
			flex-direction: column;
			gap: calc(var(--gap) / 2);

			@media (min-width: 744px) {
				gap: var(--gap);
			}

			& .news-single-wrap {
				display: grid;
				position: relative;
				grid-template-rows: 1fr auto;
				grid-template-areas: "media" "content";
				gap: calc(var(--gap) / 2);

				@media (min-width: 744px) {
					grid-template-rows: 1fr;
					grid-template-columns: 2fr 5fr;
					grid-template-areas: "media content";
					gap: var(--gap);
				}

				& .news-single-content {
					display: flex;
					flex-direction: column;
					gap: calc(var(--gap) / 4);

					@media (min-width: 744px) {
						gap: calc(var(--gap) / 2);
					}

					& .news-single-meta {
						display: flex;
						flex-direction: column;
						gap: calc(var(--gap) / 4);
						font-weight: bolder;
					}
				}
			}
		}
	}

	/**
	 * MARK: - Form
	 */
	form {
		display: flex;
		flex-direction: column;
		max-inline-size: 72rem;

		& > :not(:last-child) {
			margin-block-end: calc(var(--gap) / 2);
		}

		& label,
		& .input > * {
			inline-size: 100%;
		}

		& legend {
			margin-inline-start: calc(var(--gap) / 4);
			padding-inline: calc(var(--gap) / 4);
		}

		& table td {
			border-inline: solid transparent calc(var(--gap) / 2);
			border-block: solid transparent calc(var(--gap) / 6);
		}

		&
			:is(
				textarea,
				select,
				input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"])
			) {
			-webkit-appearance: none;
			appearance: none;
			border: 0.1rem solid var(--palette-green);
			border-radius: 0;
			padding: 1rem 1.5rem;
			inline-size: 100%;
			font-size: var(--font-size-sm);

			&::placeholder {
				opacity: 1;
				opacity: 0.5;
				font-weight: lighter;
				line-height: calc(var(--line-height-md) * 1.375);
			}

			:is(&, &:is(.powermail_field_error, :where(:hover, :focus-visible))) {
				box-shadow: none;
				color: var(--color-canvastext);
			}
		}

		& select {
			background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIKICAgIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIyIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIHZpZXdCb3g9IjAgMCAxODUgMTYxIj48cGF0aCBmaWxsPSIjZTczODM4IiBkPSJNMTg1IDF2NzNsLTkyIDg3TDAgNzNWMGw5MyA4OXoiLz48L3N2Zz4=");

			background-position: right 0.5em center;
			background-size: min(max(0.425em, 100%), 0.675em) auto !important;
			background-repeat: no-repeat;
			padding-inline-end: calc(2ch + 0.425em) !important;
			font-weight: bolder;
		}

		textarea {
			min-block-size: 4lh;
		}

		& .input.checkbox {
			display: flex;
			flex-direction: column;
			gap: 0.5rem;

			& .form-check {
				inline-size: fit-content;
			}
		}

		& .form-check-wrapping-label {
			display: flex;
			justify-content: start;
			align-items: start;
		}

		& input:is([type="checkbox"], [type="radio"]) {
			vertical-align: middle;
			-webkit-appearance: auto;
			appearance: auto;
			margin-inline-end: 0.375em;
			margin-block-start: 0.25em;
			border: revert;
			inline-size: 0.925em;
			block-size: 0.925em;
			accent-color: var(--palette-green);

			&:checked {
				border: revert;
				background-color: var(--palette-green);
			}

			&:focus {
				box-shadow: none;
				border-color: revert;
			}

			&::before {
				content: none;
			}

			@supports not (color: color-mix(in srgb, black, white)) {
				accent-color: var(--palette-green);
			}
		}

		& :is(.radio, .checkbox) {
			display: flex;
			margin-block: 0.225em;
			inline-size: fit-content;
		}

		& label:has(> input:is([type="checkbox"], [type="radio"])) {
			inline-size: fit-content;
		}

		& [type="checkbox"] + span {
			font-weight: bolder;
		}

		& :where(.label, .control-label) {
			font-weight: bolder;
		}

		&,
		& fieldset {
			& > :not(:last-child) {
				margin-block-end: calc(var(--gap) * 0.375);
			}

			& > :not(:first-child) {
				margin-block-start: calc(var(--gap) * 0.375);
			}
		}

		& .invalid-feedback:not(input) {
			opacity: 0.875;
			padding: 0;
			color: rgb(200 50 25 / 90.5%);
			font-size: var(--font-size-xs);
			text-wrap: balance;

			&::before {
				padding-inline-end: 0.325em;
				content: "Fehler:";

				@supports (content: "" / "") {
					content: "!" / "Fehler:";
					font-weight: 900;
					font-family: "Font Awesome 7 Pro";
				}
			}
		}

		& :where([aria-invalid="true"], :has(+ .invalid-feedback)) {
			border: 0.1rem solid red !important;
		}

		& .form-navigation {
			display: flex;
			gap: calc(var(--gap) / 2);
		}

		& .summary-list {
			legend:has(+ &) {
				margin: 0;
				padding: 0;
				font-size: var(--font-size-md);
			}

			& dt {
				font-weight: bolder;
			}

			& dl.row:last-child {
				& dt {
					flex: auto;
				}

				& dd {
					display: none;
				}
			}
		}
	}

	/**
	 * MARK: - Legal Pages Content Container IDs
	 */
	#c250,
	#c251 {
		& h4.sub {
			margin-block: 1.5em 0.3em;
			font-size: calc(var(--font-size-md) * 0.9);
		}
		& h5.sub {
			margin-block: 0.3em;
			font-size: var(--font-size-sm);
		}
		& ul {
			margin-block: 0 0.5em;

			& li {
				margin-block-end: 0;
			}
		}
	}

	/**
	 * MARK: - TYPO3
	 */

	.space-before-extra-small {
		margin-block-start: calc(var(--gap) * 0.5);
	}

	.space-before-small {
		margin-block-start: calc(var(--gap) * 1);
	}

	.space-before-medium {
		margin-block-start: calc(var(--gap) * 2);
	}

	.space-before-large {
		margin-block-start: calc(var(--gap) * 3);
	}

	.space-before-extra-large {
		margin-block-start: calc(var(--gap) * 4);
	}

	.space-after-extra-small {
		margin-block-end: calc(var(--gap) * 0.5);
	}

	.space-after-small {
		margin-block-end: calc(var(--gap) * 1);
	}

	.space-after-medium {
		margin-block-end: calc(var(--gap) * 2);
	}

	.space-after-large {
		margin-block-end: calc(var(--gap) * 3);
	}

	.space-after-extra-large {
		margin-block-end: calc(var(--gap) * 4);
	}

	[class*="space-before-"] > hr {
		margin-block-start: unset;
	}

	[class*="space-after-"] > hr {
		margin-block-end: unset;
	}
}

@layer components {
	/**
	 * MARK: - Frame classes
	 */
	.frame-bg-blue {
		--color-headline: var(--palette-white);
		--color-canvastext: var(--palette-white);
		--color-accent: var(--palette-white);
		background-color: var(--palette-blue);

		& ::selection {
			--color-highlight: var(--palette-white);
		}
	}
}