@font-face {
	font-family: 'Restart Soft';
	src: url('../fonts/RestartSoft-Regular.woff2') format('woff2');
	font-style: normal;
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: 'Restart Soft';
	src: url('../fonts/RestartSoft-RegularItalic.woff2') format('woff2');
	font-style: italic;
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: 'Restart Soft';
	src: url('../fonts/RestartSoft-SemiBold.woff2') format('woff2');
	font-style: normal;
	font-weight: 600;
	font-display: swap;
}

@font-face {
	font-family: 'Restart Soft';
	src: url('../fonts/RestartSoft-SemiBoldItalic.woff2') format('woff2');
	font-style: italic;
	font-weight: 600;
	font-display: swap;
}

@font-face {
	font-family: 'Restart Ginger';
	src: url('../fonts/RestartGinger-Regular.woff2') format('woff2');
	font-style: normal;
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: 'Restart Ginger';
	src: url('../fonts/RestartGinger-RegularItalic.woff2') format('woff2');
	font-style: italic;
	font-weight: 400;
	font-display: swap;
}

:root:has(body.frontend) {
	
	--maxWidth: 1570px;

	--fontFamily: 'Restart Soft', sans-serif;
	--fontFamilyHeadline: 'Restart Ginger', sans-serif;
	--typographyScale: 0.9;
	--motionEaseOut: cubic-bezier(0.22, 1, 0.36, 1);
	--buttonArrowDuration: 1200ms;
	
	--fontSize11: calc(0.55rem * var(--typographyScale));
	--fontSize12: calc(0.6rem * var(--typographyScale));
	--fontSize13: calc(0.65rem * var(--typographyScale));
	--fontSize14: calc(0.7rem * var(--typographyScale));
	--fontSize15: calc(0.75rem * var(--typographyScale));
	--fontSize16: calc(0.8rem * var(--typographyScale));
	--fontSize17: calc(0.85rem * var(--typographyScale));
	--fontSize18: calc(0.9rem * var(--typographyScale));
	--fontSize19: calc(0.95rem * var(--typographyScale));
	--fontSize20: calc(1rem * var(--typographyScale));
	--fontSize22: calc(1.1rem * var(--typographyScale));
	--fontSize24: calc(1.2rem * var(--typographyScale));
	--fontSize26: calc(1.3rem * var(--typographyScale));
	--fontSize30: calc(1.5rem * var(--typographyScale));
	--fontSize36: calc(1.8rem * var(--typographyScale));
	--fontSize38: calc(1.9rem * var(--typographyScale));
	--fontSize40: calc(2rem * var(--typographyScale));
	--fontSize48: calc(2.4rem * var(--typographyScale));
	--fontSize64: calc(3.2rem * var(--typographyScale));
	--fontSize70: calc(3.5rem * var(--typographyScale));
	--fontSize100: calc(5rem * var(--typographyScale));
	--fontSize120: calc(6rem * var(--typographyScale));
	--fontSize145: calc(7.25rem * var(--typographyScale));
	
	/* Typography Presets */
	--text-h1: 400 var(--fontSize120) / 1.083 var(--fontFamilyHeadline);
	--text-h2: 400 var(--fontSize100) / 1.15 var(--fontFamilyHeadline);
	--text-h3: 400 var(--fontSize64) / 1.125 var(--fontFamilyHeadline);
	--text-h4: 400 var(--fontSize48) / 1.15 var(--fontFamily);
	--text-h5: 400 var(--fontSize40) / 1.525 var(--fontFamily);
	--text-h6: 400 var(--fontSize30) / normal var(--fontFamily);
	--text-label-caps: 400 var(--fontSize24) / normal var(--fontFamily);
	--text-label-caps-letter-spacing: 0.13em;
	--text-label-caps-transform: uppercase;

	--text-body-xs: 400 var(--fontSize14) / normal var(--fontFamily);
	--text-body-s: 400 var(--fontSize24) / normal var(--fontFamily);
	--text-body-s-semibold: 600 var(--fontSize24) / normal var(--fontFamily);
	--text-body-m: 400 var(--fontSize30) / 1.233 var(--fontFamily);
	--text-body-m-semibold: 600 var(--fontSize30) / 1.2 var(--fontFamily);
	--text-body-m-link: 400 var(--fontSize30) / 1.2 var(--fontFamily);
	--text-body-m-link-decoration: underline;

	--text-button-xs: 400 var(--fontSize19) / 1.333 var(--fontFamily);
	--text-button-s: 400 var(--fontSize26) / normal var(--fontFamily);
	--text-button-l: 400 var(--fontSize36) / 1.647 var(--fontFamily);

	--text-menu-headline: 400 var(--fontSize22) / 1.045 var(--fontFamily);
	--text-menu-body: 400 var(--fontSize17) / 1.265 var(--fontFamily);
	--text-menu-letter-spacing: 0.01em;

	/* Colors */
	--colorNeon: #e1ff00;
	--colorElectricBlue: #bed8ff;
	/*--colorPetrol: #154047;*/
	/*--colorPetrol: #164047;*/
	--colorPetrol: #164147;
	--colorLightPetrol: #195761;
	--colorRed: #ff5059;
	--colorWarmGrey: #f0eeea;
	--colorOrange: #ffbc00;
	--colorGreen: #00d96b;
	--colorBlack: #000000;
	--colorWhite: #ffffff;
	
	--sideSpacing: 2.3rem;
	--outerSpacing: calc( calc(100vw - var(--maxWidth)) / 2);
	--innerPadding: 7.8rem;
	
	--headerHeight: calc(6.35rem * var(--typographyScale));


	--sectionSpacingNone: 0;
	--sectionSpacingSmall: calc(2rem * var(--typographyScale));
	--sectionSpacingMedium: calc(4.8rem * var(--typographyScale));
	--sectionSpacingLarge: calc(6rem * var(--typographyScale));
	--sectionSpacingXlarge: calc(8.8rem * var(--typographyScale));
	--logoBaseHeight: 4rem;
	--logoSpacing: 6rem;
	--logoFadeWidth: 8rem;
	--threeColumnGap: 1rem;
	
	--borderRadius-S: 0.5rem;
	--borderRadius-M: 0.75rem;
	--borderRadius-L: 1.25rem;
	
	--metaCurveWidth: 0.75rem;
	--folderTabWidth: 2.8rem;
	--sliderStepWidth: 15.2rem;

	@media only screen and (max-width: 1570px) {
		--outerSpacing: 0rem;
	}
	
	
	@media only screen and (max-width: 768px) {
		--typographyScale: 1;
		--headerHeight: calc(4.45rem * var(--typographyScale));
		--sideSpacing: 0.8rem;
		
		--sectionSpacingSmall: calc(0.8rem * var(--typographyScale));
		--sectionSpacingMedium: calc(1.5rem * var(--typographyScale));
		--sectionSpacingLarge: calc(2.3rem * var(--typographyScale));
		--sectionSpacingXlarge: calc(3.2rem * var(--typographyScale));
		
		--threeColumnGap: 0.8rem;
		
		--borderRadius-S: 0.2rem;
		--borderRadius-M: 0.5rem;
		--borderRadius-L: 1.25rem;
		--borderRadius-Mobile: 0.75rem;
		
		--text-body-s: 400 var(--fontSize17) / normal var(--fontFamily);
		--text-body-s-semibold: 600 var(--fontSize17) / normal var(--fontFamily);
		
		--text-h1: 400 var(--fontSize30) / 1.1 var(--fontFamilyHeadline);
		--text-h2: 400 var(--fontSize30) / 1.1 var(--fontFamilyHeadline);
		--text-h3: 400 var(--fontSize26) / 1.1538 var(--fontFamilyHeadline);
		--text-h4: 400 var(--fontSize22) / 1.2273 var(--fontFamily);
		--text-h5: 400 var(--fontSize17) / 1.29 var(--fontFamily);
		--text-h6: 400 var(--fontSize30) / normal var(--fontFamily);
		
		--text-button-xs: 400 var(--fontSize19) / 1.333 var(--fontFamily);
		--text-button-s: 400 var(--fontSize16) / normal var(--fontFamily);
		--text-button-l: 400 var(--fontSize18) / 1.33 var(--fontFamily);
		
		--text-label-caps: 400 var(--fontSize12) / normal var(--fontFamily);
		--text-label-caps-letter-spacing: 0.2em;
		--text-label-caps-transform: uppercase;
		
		--logoBaseHeight: 2rem;
		--logoSpacing: 2rem;
		--logoFadeWidth: 2rem;
	}
	
	@supports (color: color(display-p3 1 0 0)) {
		--colorNeon: color(display-p3 0.9059 0.9961 0.2157);
		--colorElectricBlue: color(display-p3 0.7647 0.8431 0.9961);
		/*--colorPetrol: color(display-p3 0.1297 0.2473 0.2744);*/
		--colorLightPetrol: color(display-p3 0.171 0.3369 0.3732);
		--colorRed: color(display-p3 0.9608 0.3725 0.3725);
		--colorWarmGrey: color(display-p3 0.9412 0.9333 0.9176);
		--colorOrange: color(display-p3 0.9979 0.7505 0.2168);
		--colorGreen: color(display-p3 0.217 0.8374 0.4652);
		--colorBlack: color(display-p3 0 0 0);
		--colorWhite: color(display-p3 1 0.99999 0.9999);
	}
	
}




html:has(body.frontend), body.frontend {
	scrollbar-gutter: stable;
}

html:has(body.frontend) {
	font-size: 16.328px;
	
	@media only screen and (max-width: 1570px) {
		font-size: 1.04vw;
	}
	
	@media only screen and (max-width: 768px) {
		font-size: 5.13vw;
	}

}

body.frontend {
	margin: 0;
	padding: 0;
	text-align: left;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: var(--fontSize20);
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	font-family: var(--fontFamily);
	
	input[type=text],
	input[type=email],
	input[type=tel],
	input[type=url],
	input[type=search],
	input[type=submit],
	button {
	  appearance: none;
	  -moz-appearance: none;
	  -webkit-appearance: none;
	  border-radius: 0;
	  -moz-border-radius: 0;
	  -webkit-border-radius: 0;
	}
	
	*, *:before, *:after {
		-moz-box-sizing: border-box; 
		-webkit-box-sizing: border-box; 
		box-sizing: border-box;
	}
	
	*:focus:not(:focus-visible) {
	  outline: 0;
	}
	
	img {
		border: 0;
	}


}


.preview_check {
	position: fixed;
	left: 10px;
	top: 10px;
	z-index: 999999;
	/*display: none;*/
}

body:not(.wp-admin) .preview {
	width: 100%;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: -7.9rem;
	height: auto;
	z-index: 999999;
	pointer-events: none;
	opacity: 0.4;
	display: block;
	max-width: var(--maxWidth);
}

.preview_check:checked + .preview {
	display: none;
}



section .innerwrapper,
header .innerwrapper,
footer .innerwrapper {
	margin: 0 auto;
	width: calc(100% - var(--sideSpacing) - var(--sideSpacing));
	max-width: calc(var(--maxWidth) - var(--sideSpacing) - var(--sideSpacing));
	
	&.small {
		padding-inline: var(--innerPadding);

		@media only screen and (max-width: 768px) {
			padding-inline: 0;
		}
	}
}

.cta__button {
	--button-highlight: linear-gradient(var(--colorNeon), var(--colorNeon));
	--button-textcolor: var(--colorPetrol);
	--button-border-width: 0.15rem;
	--button-icon-width: 1.9rem;

	position: relative;
	height: calc(6.5rem * var(--typographyScale));
	padding: 0 3.1rem;
	border: 0;
	border-radius: var(--borderRadius-M);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 1.8rem;
	background: var(--button-highlight);
	color: var(--button-textcolor);
	font: var(--text-button-l);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	isolation: isolate;
	transition: filter 280ms var(--motionEaseOut), transform 140ms var(--motionEaseOut);

	&:active {
		transform: scale(0.97);
	}
	
	@media only screen and (max-width: 768px) {
		--button-icon-width: 1rem;
		--button-border-width: 0.08rem;
		
		height: calc(3.15rem * var(--typographyScale));	
		padding: 0 1rem;
		gap: 0.6rem;
	}

	&[data-size="small"] {
		--button-icon-width: 1rem;
		--button-border-width: 1.5px;

		height: calc(2.8rem * var(--typographyScale));
		padding: 0 1rem;
		border-radius: var(--borderRadius-S);
		gap: 0.6rem;
		font: var(--text-button-xs);
	}

	&[data-size="medium"] {
		--button-icon-width: 1.25rem;
		--button-border-width: 1px;

		height: calc(3.9rem * var(--typographyScale));
		padding: 0 1.1rem;
		border-radius: var(--borderRadius-M);
		gap: 2.75rem;
		font: var(--text-button-s);
		
		@media only screen and (max-width: 768px) {
			--button-icon-width: 1rem;
			height: calc(2.5rem * var(--typographyScale));	
			gap: 0.5rem;
		}
	}

	&[data-style="outline"] {
		background: transparent;

		&::before {
			content: '';
			position: absolute;
			inset: 0;
			border-radius: inherit;
			padding: var(--button-border-width);
			background: var(--button-highlight);
			pointer-events: none;
			-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
			-webkit-mask-composite: xor;
			mask-composite: exclude;
		}
	}

	&[data-icon="arrow"]::after {
		content: '';
		width: var(--button-icon-width);
		height: auto;
		aspect-ratio: 41/29;
		flex: 0 0 auto;
		background-color: currentColor;
		-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='41' height='29' fill='none' viewBox='0 0 41 29'><path stroke='%23000' stroke-miterlimit='10' stroke-width='2.925' d='m.005 14.165 38.643.134M26.234 1.066l11.893 11.168a2.704 2.704 0 0 1 0 3.989L26.234 27.391'/></svg>") center / contain no-repeat;
		mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='41' height='29' fill='none' viewBox='0 0 41 29'><path stroke='%23000' stroke-miterlimit='10' stroke-width='2.925' d='m.005 14.165 38.643.134M26.234 1.066l11.893 11.168a2.704 2.704 0 0 1 0 3.989L26.234 27.391'/></svg>") center / contain no-repeat;
	}

	@media (hover: hover) and (pointer: fine) {
		&:not([data-style="outline"]):not([data-highlight="gradient"]):hover {
			filter: brightness(0.94);
		}

		&[data-highlight="gradient"]:not([data-style="outline"]) {
			--buttonPointerX: 50%;
			--buttonPointerY: 50%;
			overflow: clip;

			&::before {
				content: '';
				position: absolute;
				inset: -35%;
				z-index: -1;
				pointer-events: none;
				opacity: 0;
				background:
					radial-gradient(42% 78% at var(--buttonPointerX) var(--buttonPointerY), var(--colorNeon) 0%, transparent 72%),
					radial-gradient(52% 92% at calc(100% - var(--buttonPointerX)) calc(100% - var(--buttonPointerY)), var(--colorElectricBlue) 0%, transparent 74%);
				transition: opacity 320ms var(--motionEaseOut);
			}

			&:hover {
				filter: brightness(0.965);

				&::before {
					opacity: 1;
				}
			}
		}

		&[data-icon="arrow"].is-arrow-hovering::after {
			--buttonArrowTravel: calc(var(--button-icon-width) * 1.35);
			animation: button-arrow-sweep var(--buttonArrowDuration) both;
		}

		&[data-style="outline"].is-outline-hovering::before {
			background:
				conic-gradient(from var(--buttonRingAngle),
					transparent 0deg,
					transparent 140deg,
					color-mix(in srgb, var(--colorNeon) calc(var(--buttonRingFade) * 100%), transparent) 250deg,
					color-mix(in srgb, var(--colorElectricBlue) calc(var(--buttonRingFade) * 100%), transparent) 310deg,
					transparent 360deg),
				var(--button-highlight);
			animation: button-ring-lap 1500ms cubic-bezier(0.4, 0.18, 0.6, 0.82), button-ring-fade 1500ms linear;
		}
	}

	&[data-highlight="electric-blue"] {
		--button-highlight: linear-gradient(var(--colorElectricBlue), var(--colorElectricBlue));
	}

	&[data-highlight="petrol"] {
		--button-highlight: linear-gradient(var(--colorPetrol), var(--colorPetrol));
	}

	&[data-highlight="red"] {
		--button-highlight: linear-gradient(var(--colorRed), var(--colorRed));
	}

	&[data-highlight="warm-grey"] {
		--button-highlight: linear-gradient(var(--colorWarmGrey), var(--colorWarmGrey));
	}

	&[data-highlight="orange"] {
		--button-highlight: linear-gradient(var(--colorOrange), var(--colorOrange));
	}

	&[data-highlight="green"] {
		--button-highlight: linear-gradient(var(--colorGreen), var(--colorGreen));
	}

	&[data-highlight="black"] {
		--button-highlight: linear-gradient(var(--colorBlack), var(--colorBlack));
	}

	&[data-highlight="white"] {
		--button-highlight: linear-gradient(var(--colorWhite), var(--colorWhite));
	}

	&[data-highlight="gradient"] {
		--button-highlight: linear-gradient(90deg, var(--colorNeon), var(--colorElectricBlue));
	}

	&[data-textcolor="neon"] {
		--button-textcolor: var(--colorNeon);
	}

	&[data-textcolor="electric-blue"] {
		--button-textcolor: var(--colorElectricBlue);
	}

	&[data-textcolor="petrol"] {
		--button-textcolor: var(--colorPetrol);
	}

	&[data-textcolor="red"] {
		--button-textcolor: var(--colorRed);
	}

	&[data-textcolor="warm-grey"] {
		--button-textcolor: var(--colorWarmGrey);
	}

	&[data-textcolor="orange"] {
		--button-textcolor: var(--colorOrange);
	}

	&[data-textcolor="green"] {
		--button-textcolor: var(--colorGreen);
	}

	&[data-textcolor="black"] {
		--button-textcolor: var(--colorBlack);
	}

	&[data-textcolor="white"] {
		--button-textcolor: var(--colorWhite);
	}

	/*
	&:hover {
		filter: brightness(1.05);
		transform: translateY(-0.075rem);
	}
	*/

	&:focus-visible {
		outline: 0.15rem solid var(--colorElectricBlue);
		outline-offset: 0.15rem;
	}
}

.cta__link {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	color: inherit;
	font: var(--text-button-l);
	text-decoration: none;

	&::after {
		content: '';
		width: 1.9rem;
		aspect-ratio: 41 / 29;
		background-color: currentColor;
		-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='41' height='29' fill='none' viewBox='0 0 41 29'><path stroke='%23000' stroke-miterlimit='10' stroke-width='2.925' d='m.005 14.165 38.643.134M26.234 1.066l11.893 11.168a2.704 2.704 0 0 1 0 3.989L26.234 27.391'/></svg>") center / contain no-repeat;
		mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='41' height='29' fill='none' viewBox='0 0 41 29'><path stroke='%23000' stroke-miterlimit='10' stroke-width='2.925' d='m.005 14.165 38.643.134M26.234 1.066l11.893 11.168a2.704 2.704 0 0 1 0 3.989L26.234 27.391'/></svg>") center / contain no-repeat;
	}

	@media (hover: hover) and (pointer: fine) {
		&.is-arrow-hovering::after {
			--buttonArrowTravel: 2.6rem;
			animation: button-arrow-sweep var(--buttonArrowDuration) both;
		}
	}
}

@property --buttonRingAngle {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

@property --buttonRingFade {
	syntax: '<number>';
	inherits: false;
	initial-value: 0;
}

@keyframes button-arrow-sweep {
	0% {
		-webkit-mask-position: 0 center;
		mask-position: 0 center;
		animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0.2);
	}

	40%, 49% {
		-webkit-mask-position: var(--buttonArrowTravel) center;
		mask-position: var(--buttonArrowTravel) center;
	}

	49% {
		animation-timing-function: step-end;
	}

	50% {
		-webkit-mask-position: calc(var(--buttonArrowTravel) * -1) center;
		mask-position: calc(var(--buttonArrowTravel) * -1) center;
		animation-timing-function: var(--motionEaseOut);
	}

	100% {
		-webkit-mask-position: 0 center;
		mask-position: 0 center;
	}
}

@keyframes button-ring-lap {
	from { --buttonRingAngle: 0deg; }
	to { --buttonRingAngle: 360deg; }
}

@keyframes button-ring-fade {
	0% { --buttonRingFade: 0; }
	18%, 70% { --buttonRingFade: 1; }
	100% { --buttonRingFade: 0; }
}

.teaser__folder {
	--folderBackground: var(--colorWarmGrey);
	position: relative;
	min-width: 0;
	border-radius: var(--borderRadius-M);
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: auto 1fr;
	color: var(--colorPetrol);
	background: var(--folderBackground);
	text-decoration: none;
	overflow: clip;
	isolation: isolate;
	--paddingSide: 1.9rem;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='595' height='1517' viewBox='0 0 595 1517'%3E%3Cpath fill='%23000' d='M0 15v1487c0 8.28 6.716 15 15 15h565c8.284 0 15-6.72 15-15V72.402c0-8.284-6.716-15-15-15H327.564a15 15 0 0 1-13.754-9.015L296.677 9.015A15 15 0 0 0 282.922 0H15C6.716 0 0 6.716 0 15'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% auto;
	-webkit-mask-position: center top;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='595' height='1517' viewBox='0 0 595 1517'%3E%3Cpath fill='%23000' d='M0 15v1487c0 8.28 6.716 15 15 15h565c8.284 0 15-6.72 15-15V72.402c0-8.284-6.716-15-15-15H327.564a15 15 0 0 1-13.754-9.015L296.677 9.015A15 15 0 0 0 282.922 0H15C6.716 0 0 6.716 0 15'/%3E%3C/svg%3E");
	mask-repeat: no-repeat;
	mask-size: 100% auto;
	mask-position: center top;
	
	@media only screen and (max-width: 768px) {
		--paddingSide: 0.9rem;
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='359' height='1495' fill='none' viewBox='0 0 359 1495'><path fill='%23090909' d='M0 8v1479c0 4.42 3.582 8 8 8h343a8 8 0 0 0 8-8V56.5a8 8 0 0 0-8-8h-45.076a8 8 0 0 1-7.811-6.273l-7.95-35.954A8 8 0 0 0 282.351 0H8.001a8 8 0 0 0-8 8'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='359' height='1495' fill='none' viewBox='0 0 359 1495'><path fill='%23090909' d='M0 8v1479c0 4.42 3.582 8 8 8h343a8 8 0 0 0 8-8V56.5a8 8 0 0 0-8-8h-45.076a8 8 0 0 1-7.811-6.273l-7.95-35.954A8 8 0 0 0 282.351 0H8.001a8 8 0 0 0-8 8'/%3E%3C/svg%3E");
	}
	
	&.summary-link {
		.folder-content {
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.background {
		position: absolute;
		inset: 0;
		z-index: -1;
		pointer-events: none;

		video,
		img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.label {
		position: relative;
		display: inline-flex;
		height: 3rem;
		align-items: end;
		margin-right: auto;
		padding-left: var(--paddingSide);
		padding-right: 3rem;
		min-width: 16.6rem;
		
		@media only screen and (max-width: 768px) {
			height: 2.6rem;
			align-items: center;
		}
	}

	.label,
	.date {
		font: var(--text-label-caps);
		letter-spacing: var(--text-label-caps-letter-spacing);
		text-transform: var(--text-label-caps-transform);
		
		@media only screen and (max-width: 768px) {
			letter-spacing: 0.05em;	
		}
	}

	
	.folder-content {
		position: relative;
		padding-inline: var(--paddingSide);
		padding-top: 1.4rem;
		display: flex;
		flex-direction: column;
		padding-bottom: 1.5rem;
		
		@media only screen and (max-width: 768px) {
			padding-top: 0;	
			padding-bottom: 1rem;
		}
		
		h3,
		h2 {
			text-wrap: balance;
			margin: 0;
			font: var(--text-h4);
			color: var(--colorPetrol) !important;
			
			@media only screen and (max-width: 768px) {
				max-width: 13em;
			}
		}
		
		.media {
			display: block;
			width: 100%;
			aspect-ratio: 525 / 307;
			border-radius: var(--borderRadius-S);
			overflow: hidden;
			margin-top: 1.9rem;
			
			@media only screen and (max-width: 768px) {
				margin-top: 1.1rem;	
				aspect-ratio: 525 / 298;
			}
		
			img,
			video {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
				transition: transform 0.35s ease;
			}
		}
		
		.date {
			margin-top: 1.4rem;
			
			@media only screen and (max-width: 768px) {
				margin-top: 0.6rem;
			}
		}
		
		.content {
			display: block;
			margin-top: 0.8rem;
			
			@media only screen and (max-width: 768px) {
				margin-top: 0.5rem;	
			}
			
			
			p {
				font: var(--text-body-m);
				
				@media only screen and (max-width: 768px) {
					font: var(--text-body-s);
				}	
			}
		
			p:first-child { margin-top: 0; }
			p:last-child { margin-bottom: 0; }
		}
		
		.read-more {
			position: relative;
			width: fit-content;
			margin-top: auto;
			padding-top: 3.7rem;
			font: var(--text-button-s);
			
			@media only screen and (max-width: 768px) {
				font: var(--text-body-s);
				padding-top: 2.3rem;
			}	

			&::before {
				content: '';
				position: absolute;
				bottom: -0.2rem;
				left: 0;
				width: 0;
				height: 1.5px;
				background-color: currentColor;
				transition: width 300ms ease-out;
			}
		}
	}


	@media (hover: hover) {
		&:hover .media img {
			transform: scale(1.025);
		}

		&:hover .read-more::before {
			width: 100%;
		}
	}

	&:focus-visible {
		outline: 0.15rem solid var(--colorElectricBlue);
		outline-offset: 0.15rem;
	}
}


body.frontend header {
	background-color: var(--colorPetrol);
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	z-index: 995;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;

	@media only screen and (max-width: 768px) {
		transition-duration: 0.65s;
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	}

	&.is-menu-open {
		@media only screen and (max-width: 768px) {
			transform: none;
		}
	}

	.mobile-menu-toggle {
		display: none;
		@media only screen and (max-width: 768px) {
			display: block;
			width: 2.7rem;
			height: 2.7rem;
			margin-left: auto;
			padding: 0;
			border: 0;
			background: transparent;
			cursor: pointer;
		}
		svg { display: block; width: 100%; height: 100%; }
		.menu-line {
			transform-origin: 27px 29.5px;
			transition: transform 0.25s ease;
		}
		&[aria-expanded="true"] {
			.menu-line--first { transform: rotate(15deg) translateY(5.5px); }
			.menu-line--second { transform: rotate(-15deg) translateY(-5.5px); }
		}
	}

	.mobile-menu {
		display: none;
		@media only screen and (max-width: 768px) {
			display: flex;
			position: absolute;
			top: var(--headerHeight);
			left: 0;
			width: 100%;
			height: calc(100dvh - var(--headerHeight));
			padding: 2rem 1rem max(2rem, env(safe-area-inset-bottom));
			flex-direction: column;
			gap: 2rem;
			background: var(--colorPetrol);
			color: var(--colorWhite);
			overflow-y: auto;
			overscroll-behavior: contain;
			scrollbar-width: none;
			visibility: hidden;
			opacity: 0;
			transform: translateY(-0.5rem);
			transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;

			&::-webkit-scrollbar {
				display: none;
			}
		}
	}

	&.is-menu-open .mobile-menu {
		@media only screen and (max-width: 768px) {
			visibility: visible;
			opacity: 1;
			transform: none;
		}
	}

	.mobile-navigation {
		ul { list-style: none; padding: 0; margin: 0; }
		> ul {
			border-top: 0.075rem solid rgb(255 255 255 / 20%);
			> li {
				border-bottom: 0.075rem solid rgb(255 255 255 / 20%);
				> a,
				> button,
				> span,
				> .mobile-navigation__top-level > a {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					padding: 0.8rem 0;
					border: 0;
					background: transparent;
					color: inherit;
					text-align: left;
					text-decoration: none;
					font: 400 var(--fontSize22) / 1.227 var(--fontFamily);
				}
				.mobile-navigation__top-level {
					display: flex;
					align-items: stretch;

					> a {
						flex: 1 1 auto;
						min-width: 0;
					}
				}
				.mobile-navigation__subnav-toggle {
					cursor: pointer;

					&::after {
						content: '';
						width: 1.06rem;
						height: 1.06rem;
						flex: 0 0 auto;
						background: var(--colorWhite);
						mask: url("data:image/svg+xml;utf8,<svg width='21.18' height='21.18' viewBox='0 0 21.18 21.18' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 10.59L21.18 10.59M10.59 0L10.59 21.18' stroke='white' stroke-width='1.5'/></svg>") center / contain no-repeat;
						transition: transform 0.2s ease;
					}

					&:empty {
						display: flex;
						align-items: center;
						justify-content: flex-end;
						width: 2.8rem;
						padding: 0;
						border: 0;
						background: transparent;
						color: inherit;
					}

					&[aria-expanded="true"]::after { transform: rotate(45deg); }
				}
				> ul {
					padding: 0 0 1rem;
					li + li { margin-top: 0.3rem; }
					a, span {
						color: inherit;
						opacity: 0.7;
						text-decoration: none;
						font: 400 var(--fontSize17) / 1.353 var(--fontFamily);
						letter-spacing: 0.01rem;
					}
				}
			}
		}
	}

	.mobile-menu__actions {
		display: flex;
		flex-direction: column;
		gap: 0.6rem;
		margin-top: auto;
		.cta__button {
			width: 100%;
			flex-shrink: 0;
			height: calc(3.15rem * var(--typographyScale));
			border-radius: 0.45rem;
			font: 400 var(--fontSize18) / 1.333 var(--fontFamily);

			&[data-style="filled"] { order: -1; }
		}
	}

	&.is-hidden {
		transform: translateY(-100%);
	}
	
	.innerwrapper {
		height: var(--headerHeight);
		display: flex;
		align-items: center;
		
		.logo {
			font-size: 0;
			line-height: 0;
			display: block;
			width: calc(19.5rem * var(--typographyScale));
			transform: translateY(0.15rem);
			
			@media only screen and (max-width: 768px) {
				width: calc(11.45rem * var(--typographyScale));	
				transform: translateY(-0.1rem);
			}
			
			svg {
				width: 100%;
				height: auto;
			}
		}

		.menu {
			margin-left: auto;
			display: flex;
			align-items: center;
			gap: 1.7rem;
			transform: translateY(0.17rem);
			
			@media only screen and (max-width: 768px) {
				display: none;	
			}
		}

		nav {
			> ul {
				margin: 0;
				padding: 0;
				list-style: none;
				display: flex;
				align-items: center;
				gap: 3.05rem;
				
				> li {
					margin: 0;
					padding: 0;
					list-style: none;
					position: relative;
					
					> a,
					> button {
						background: transparent;
						border: 0;
						padding: 0;
						color: var(--colorWhite);
						font: var(--text-body-s);
						text-decoration: none;
						white-space: nowrap;
						position: relative;
						cursor: pointer;
						
						&:before {
							content: '';
							display: block;
							position: absolute;
							bottom: -0.2rem;
							left: 0;
							width: 0%;
							background-color: var(--colorWhite);
							height: 1.5px;
							transition: width 300ms ease-out;
						}
					}
					
					&.current {
						> a,
						> button {
							&:before {
								width: 100%;
							}
						}
					}
					
					@media (hover: hover) {
						&:hover {
							> a,
							> button {
								&:before {
									width: 100%;
								}
							}
							> ul {
								opacity: 1;
								pointer-events: auto;
								transform: translateX(-50%) translateY(0);
							}
						}	
					}
					
					
					
					> ul {
						--topSpacing: 3.2rem;
						margin: 0;
						padding: 0;
						list-style: none;
						position: absolute;
						padding-top: var(--topSpacing);
						left: 50%;
						color: var(--colorPetrol);
						
						/*transform: translateX(-50%) translateY(0);*/
						
						
						transform: translateX(-50%) translateY(1rem);
						pointer-events: none;
						opacity: 0;
						transition: opacity 300ms ease-out, transform 300ms ease-out;
						
						
						
						&:before {
							content: '';
							display: block;
							position: absolute;
							height: calc(100% - var(--topSpacing));
							top: var(--topSpacing);
							width: 100%;
							background-color: var(--colorWhite);
							border-radius: var(--borderRadius-M);
							box-shadow: 0rem 0.25rem 0.75rem 0rem rgba(00,00,00,0.2);
						}
						
						> li {
							position: relative;
							z-index: 2;
							
							> a {
								color: inherit;
								text-decoration: none;
							}
							
							&:not(.subnav-title){
								font-size: var(--fontSize22);
								
								> a {
									display: flex;
									position: relative;
									padding-block: 0.4em;
									
									&:before {
										content: '';
										display: block;
										position: absolute;
										width: calc(100% + 1.4rem);
										height: 100%;
										background-color: transparent;
										border-radius: var(--borderRadius-S);
										z-index: -1;
										left: -0.7rem;
										top: 0;
										transition: background-color 200ms ease-out;
									}
									
									@media (hover: hover) {
										&:hover {
											&:before {
												background-color: var(--colorNeon);
											}
										}
									}	
								}
							}

							&.subnav-title {
								padding-top: 1.2rem !important;
								padding-bottom: 0.7rem !important;

								> a,
								> span {
									display: grid;
									grid-template-columns: 1fr auto;
									font-family: var(--fontFamilyHeadline);
									font-size: var(--fontSize38);
									align-items: center;
									line-height: 1;

									> svg {
										width: 1.1em;
										height: auto;
									}
								}
							}
						}

						&[data-navi-style="1"]{
							width: max-content;
							padding-bottom: 0.7rem;
							--subnavTeaserWidth: calc(16.7rem * var(--typographyScale));
							left: 55%;

							> .subnav-title {
								padding-inline: 1.2rem;
							}

							> .subnav-teasers {
								padding-inline: 0.7rem;
								margin-top: 0.85rem;
							}

							.teaser-list {
								margin: 0;
								padding: 0;
								list-style: none;
								display: grid;
								grid-auto-flow: column;
								grid-auto-columns: var(--subnavTeaserWidth);
								gap: 0.5rem;
							}

							.teaser {
								min-width: 0;

								> a {
									display: grid;
									grid-template-rows: auto 1fr;
									gap: 1rem;
									height: 100%;
									padding: 0.5rem 0.5rem 0.75rem 0.5rem;
									color: inherit;
									text-decoration: none;
									border-radius: var(--borderRadius-S);
									transition: background-color 200ms ease-out;

									@media (hover: hover) {
										&:hover {
											background-color: var(--colorNeon);
										}
									}
								}

								.image {
									aspect-ratio: 340 / 181;
									font-size: 0;
									line-height: 0;

									img,
									video {
										width: 100%;
										height: 100%;
										object-fit: cover;
										border-radius: var(--borderRadius-S);
									}
								}

								.content {
									display: grid;
									grid-template-columns: auto 1fr;
									align-items: start;
									gap: 0.7rem;

									.icon {
										font-size: 0;
										line-height: 0;

										svg {
											width: 1.2rem;
											height: auto;
										}
									}

									.text {
										display: flex;
										flex-direction: column;
										gap: 1rem;
									}

									.title {
										font-size: var(--fontSize22);
										line-height: 1.05;
										text-wrap: balance;
										max-width: 10em;
									}

									p {
										font-size: var(--fontSize17);
										line-height: 1.3;
										margin: 0;
										text-wrap: balance;

										&:first-child {
											margin-top: 0;
										}

										&:last-child {
											margin-bottom: 0;
										}
									}
								}
							}
						}
						
						&[data-navi-style="2"]{
							min-width: calc(19rem * var(--typographyScale));
							display: flex;
							flex-direction: column;
							gap: 0.2rem 0;
							padding-bottom: 0.5rem;
							
							> li {
								padding: 0 1.2rem;
							}
						}
						
						&[data-navi-style="3"]{
							--subnavImageWidth: calc(15.7rem * var(--typographyScale));
							min-width: calc(29.8rem * var(--typographyScale));
							min-height: calc(20rem * var(--typographyScale));
							display: grid;
							grid-template-columns: var(--subnavImageWidth) 1fr;
							grid-template-rows: auto 1fr;
							
							> li {
								&:not(.subnav-image){
									grid-column: 2;
									padding: 0 1.4rem 0 1.2rem;
								}
								
								&.subnav-image {
									font-size: 0;
									line-height: 0;
									position: absolute;
									inset: var(--topSpacing) auto 0 0;
									width: var(--subnavImageWidth);
									padding: 0.7rem 0.4rem 0.7rem 0.7rem;
									
									img {
										width: 100%;
										height: auto;
										aspect-ratio: 288/295;
										object-fit: cover;
										border-radius: var(--borderRadius-S);
									}
								}
								
								&.subnav-title {
									grid-column: 2;
									grid-row: 1;
									
									+ li {
										align-self: end;
									}
									
									
								}
								
								&:last-child {
									margin-bottom: 0.7rem;
								}
							}
						}
					}
				}
			}
		}

		.actions {
			display: flex;
			align-items: center;
			gap: 0.75rem;
			
			.cta__button {
				min-width: 6.15rem;
			}
		}

	}
}

body.frontend main {
	padding-top: var(--headerHeight);
	position: relative;
}

.media:has(> .media__ai-badge),
.image:has(> .media__ai-badge),
.contact-media:has(> .media__ai-badge) {
	position: relative;
}

.media__ai-badge {
	position: absolute;
	right: 0.65rem;
	bottom: 0.65rem;
	z-index: 3;
	display: block;
	width: 1.25rem;
	height: auto;
	font-size: 0;
	line-height: 0;
	pointer-events: none;
	backdrop-filter: blur(0.3rem);
	
	@media only screen and (max-width: 768px) {
		width: 0.8rem;
	}	

	svg {
		display: block;
		width: 100%;
		height: 100%;
	}
}

.back-to-top {
	display: block;
	position: fixed;
	right: var(--sideSpacing);
	bottom: var(--sideSpacing);
	font-size: 0;
	line-height: 0;
	width: 5rem;
	border: 0;
	padding: 0;
	margin: 0;
	background: transparent;
	z-index: 994;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(0.75rem);
	transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
	
	@media only screen and (max-width: 768px) {
		display: none;
	}

	&.is-visible {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
	}

	&.is-docked {
		position: absolute;
	}

	&:focus-visible {
		outline: 0.15rem solid var(--colorElectricBlue);
		outline-offset: 0.15rem;
	}
	
	svg {
		display: block;
		width: 100%;
		height: auto;
	}
}

section {
	background-color: var(--backgroundColor, transparent);
	color: var(--color, inherit);
	position: relative;
	scroll-margin-top: var(--headerHeight);
	

	&[data-top-spacing="none"] .innerwrapper {
		padding-top: var(--sectionSpacingNone);
	}

	&[data-top-spacing="small"] .innerwrapper {
		padding-top: var(--sectionSpacingSmall);
	}

	&[data-top-spacing="medium"] .innerwrapper {
		padding-top: var(--sectionSpacingMedium);
	}

	&[data-top-spacing="large"] .innerwrapper {
		padding-top: var(--sectionSpacingLarge);
	}

	&[data-top-spacing="xlarge"] .innerwrapper {
		padding-top: var(--sectionSpacingXlarge);
	}

	&[data-bottom-spacing="none"] .innerwrapper {
		padding-bottom: var(--sectionSpacingNone);
	}

	&[data-bottom-spacing="small"] .innerwrapper {
		padding-bottom: var(--sectionSpacingSmall);
	}

	&[data-bottom-spacing="medium"] .innerwrapper {
		padding-bottom: var(--sectionSpacingMedium);
	}

	&[data-bottom-spacing="large"] .innerwrapper {
		padding-bottom: var(--sectionSpacingLarge);
	}

	&[data-bottom-spacing="xlarge"] .innerwrapper {
		padding-bottom: var(--sectionSpacingXlarge);
	}

	p {
		&:first-child {
			margin-top: 0;
		}
		
		&:last-child {
			margin-bottom: 0;
		}
	}
	
	h1 {
		font: var(--text-h1);
		margin: 0;
	}
	
	h2 {
		font: var(--text-h2);
		margin: 0;
	}
	
	.topline {
		display: inline-block;
		font: var(--text-h6);
		
		@media only screen and (max-width: 768px) {
			font: var(--text-h5);
		}
	}
	
	.headlines {
		display: flex;
		flex-direction: column;
		gap: 1.1rem 0;
		
		@media only screen and (max-width: 768px) {
			gap: 0.4rem 0;
		}
		
		h1,
		h2 {
			max-width: 17em;
		}
	}
	
	
}

body.frontend section:not(.section__hero):last-of-type {
	.innerwrapper {
		padding-bottom: 22rem !important;
		
		@media only screen and (max-width: 768px) {
			padding-bottom: 5rem !important;
		}
	}
}

section,
footer {
	.background__gradient {
		position: absolute;
		inset: 0;
		z-index: 1;
		font-size: 0;
		line-height: 0;
		width: 100%;
		height: 100%;
		
		video {
			width: 100%;
			height: 100%;
			object-fit: cover;
			position: absolute;
			inset: 0;
		}
	}
	
	&:has(.background__gradient){
		.innerwrapper {
			position: relative;
			z-index: 2;
		}
	}
}

.section__text-intro {
	.headlines {
		@media only screen and (max-width: 768px) {
			gap: 0.2rem;
		}

		.topline {
			@media only screen and (max-width: 768px) {
				letter-spacing: 0.01rem;
				opacity: 0.7;
			}
		}

		h1 {
			@media only screen and (max-width: 768px) {
				letter-spacing: -0.01rem;
			}
		}
	}

}

.section__media {
	.media {
		width: 45.1rem;
		max-width: 100%;
		margin: 0 auto;

		&[data-width="wide"] {
			width: 100%;
		}
	}
}

.section__media-slider {
	.frame {
		position: relative;
		
	}

	.viewport {
		overflow: clip;
		border-radius: var(--borderRadius-S);
		touch-action: pan-y pinch-zoom;

		@media only screen and (max-width: 768px) {
			border-radius: 0.4rem;
		}
	}

	.container {
		display: flex;
	}

	.slide {
		min-width: 0;
		flex: 0 0 100%;
		margin: 0;

		.image {
			font-size: 0;
			line-height: 0;

			img,
			video {
				display: block;
				width: 100%;
				height: auto;
			}
		}
	}

	.captions {
		display: grid;
		margin-top: 0.8rem;
		font: var(--text-body-s);

		@media only screen and (max-width: 768px) {
			margin-top: 0.4rem;
			font: 400 var(--fontSize13) / 1.308 var(--fontFamily);
			letter-spacing: 0.015rem;
		}
	}

	.caption {
		grid-area: 1 / 1;
		margin: 0;
		opacity: 0;
		visibility: hidden;
		transition: opacity 250ms ease, visibility 250ms ease;

		&.is-active {
			opacity: 1;
			visibility: visible;
		}
	}

	.arrow {
		position: absolute;
		top: 50%;
		z-index: 2;
		width: 5rem;
		padding: 0;
		border: 0;
		background: transparent;
		font-size: 0;
		line-height: 0;
		cursor: pointer;
		transform: translateY(-50%);
		transition: opacity 300ms ease-out;

		@media only screen and (max-width: 768px) {
			width: 2rem;
		}

		svg {
			display: block;
			width: 100%;
			height: auto;
		}

		&.prev {
			left: 0;
			transform: translateX(-50%) translateY(-50%);
			
			@media only screen and (max-width: 768px) {
				left: calc(var(--sideSpacing) * -0.5);
				transform: translateX(0%) translateY(-50%);	
			}

			svg {
				transform: scaleX(-1);
			}
		}

		&.next {
			right: 0;
			transform: translateX(50%) translateY(-50%);
			
			@media only screen and (max-width: 768px) {
				right: calc(var(--sideSpacing) * -0.5);
				transform: translateX(0%) translateY(-50%);	
			}
		}

		&:focus-visible {
			outline: 0.15rem solid currentColor;
			outline-offset: 0.25rem;
		}

		&:disabled {
			opacity: 0;
			cursor: default;
		}
	}
}

.media-link {
	display: block;
	width: 100%;
	height: 100%;
	color: inherit;
}

.media-image {
	display: block;
	width: 100%;
}

.media-image--desktop {
	@media only screen and (max-width: 768px) {
		display: none !important;
	}
}

.media-image--mobile {
	display: none !important;

	@media only screen and (max-width: 768px) {
		display: block !important;
	}
}

.section__media,
.section__media-with-text {
	.media {
		.image {
			font-size: 0;
			line-height: 0;

			img,
			video {
				display: block;
				width: 100%;
				height: auto;
				border-radius: var(--borderRadius-S);

				@media only screen and (max-width: 768px) {
					border-radius: 0.4rem;
				}
			}
		}

		figcaption {
			margin-top: 0.8rem;
			font: var(--text-body-s);

			@media only screen and (max-width: 768px) {
				margin-top: 0.4rem;
				font: 400 var(--fontSize13) / 1.308 var(--fontFamily);
				letter-spacing: 0.015rem;
			}
		}
	}
}

.section__not-found {
	background: var(--colorWarmGrey);
	color: var(--colorPetrol);

	.innerwrapper {
		min-height: 80svh;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 2rem;
		padding-block: calc(var(--headerHeight) + var(--sectionSpacingLarge)) var(--sectionSpacingLarge);

		@media only screen and (max-width: 768px) {
			min-height: 70svh;
			gap: 1.5rem;
		}
	}
	.headlines { margin: 0; }
	.topline { color: var(--colorPetrol); }
	p {
		max-width: 32em;
		margin: 0;
		font: var(--text-body-m);
		@media only screen and (max-width: 768px) {
			font: var(--text-body-s);
		}
	}
}

.section__text-block {
	.content {
		font: var(--text-body-m);

		@media only screen and (max-width: 768px) {
			font: 400 var(--fontSize17) / 1.353 var(--fontFamily);
			letter-spacing: 0.01rem;
		}
		
		a:not(.cta__button) {
			color: inherit;
		}
		
		p {
			margin: 1.3em 0;
			font: var(--text-body-m) !important;

			@media only screen and (max-width: 768px) {
				font: inherit !important;
			}
			
			&:first-child {
				margin-top: 0;
			}
			
			&:last-child {
				margin-bottom: 0;
			}
		}

		h2 {
			font: var(--text-h4) !important;
			margin-top: 3.2rem;
			margin-bottom: 1.4rem;

			@media only screen and (max-width: 768px) {
				margin-top: 1.2rem;
				margin-bottom: 0.4rem;
				font: 400 var(--fontSize22) / 1.227 var(--fontFamily) !important;
				letter-spacing: 0;
			}
		}

		ul {
			margin-block: 1.3em;
			font: var(--text-body-m) !important;
			padding-left: 1.5em;
			list-style: disc;

			@media only screen and (max-width: 768px) {
				margin-block: 0.4rem;
				padding-left: 1.3em;
				font: inherit !important;
			}
		}
	}

	.buttons {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 1rem;
		margin-top: 2rem;

		@media only screen and (max-width: 768px) {
			gap: 0.6rem;
		}
	}

}

.section__table {
	.table-block {
		color: var(--color);
	}

	.table-block__headline,
	summary {
		margin: 0;
		font: var(--text-h5);
	}

	.table-block__headline {
		padding-bottom: 1.25rem;
		border-bottom: 0.075rem solid currentColor;
	}

	summary {
		position: relative;
		padding: 0 3rem 1.25rem 0;
		border-bottom: 0.075rem solid currentColor;
		list-style: none;
		cursor: pointer;

		&::-webkit-details-marker {
			display: none;
		}

		&::before,
		&::after {
			content: '';
			position: absolute;
			top: 0.15rem;
			right: 0;
			width: 2rem;
			height: 2rem;
			transition: opacity 240ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
		}

		&::after {
			background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='41' height='41' fill='none' viewBox='0 0 41 41'><path d='M0 20.3945h40.789M20.3945 0v40.789' stroke='%23154047' stroke-width='2.5'/></svg>") center / contain no-repeat;
		}

		&::before {
			opacity: 0;
			transform: rotate(-45deg) scale(0.8);
			background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='39' height='39' fill='none' viewBox='0 0 39 39'><path stroke='%23154047' stroke-width='2.5' d='m.884.884 37.21 37.21M38.095.884.884 38.094'/></svg>") center / contain no-repeat;
		}

		&:focus-visible {
			outline: 0.15rem solid var(--colorElectricBlue);
			outline-offset: 0.2rem;
		}
	}

	details[open] {
		summary {
			&::after {
				opacity: 0;
				transform: rotate(45deg) scale(0.8);
			}

			&::before {
				opacity: 1;
				transform: rotate(0) scale(1);
			}
		}
	}

	.table-block__content {
		padding-top: 1.5rem;
	}

	.table-block__intro,
	.table-block__outro {
		font: var(--text-body-m);

		> :first-child { margin-top: 0; }
		> :last-child { margin-bottom: 0; }
	}

	.table-block__intro {
		margin-bottom: 1.5rem;
	}

	.table-block__outro {
		margin-top: 1.5rem;
	}

	.table-block__scroll {
		width: 100%;
		overflow-x: auto;
		overscroll-behavior-x: contain;
	}

	table {
		width: 100%;
		border-collapse: collapse;
		font: var(--text-body-s);
		text-align: left;

		@media only screen and (max-width: 768px) {
			min-width: 50rem;
		}
	}

	th,
	td {
		position: relative;
		padding: 0.8rem 1rem 0.8rem 0;
		vertical-align: top;
		font-weight: 400;

		&::after {
			position: absolute;
			right: 0.65rem;
			bottom: 0;
			left: 0;
			height: 0.075rem;
			background: color-mix(in srgb, currentColor 30%, transparent);
			content: "";
		}

		&:last-child {
			padding-right: 0;

			&::after {
				right: 0;
			}
		}

		p {
			margin: 0;
		}
	}

	th {
		font: var(--text-h6);
	}

	@media (prefers-reduced-motion: reduce) {
		summary::before,
		summary::after {
			transition: none;
		}
	}
}

.section__text-block-small {
	.content {
		max-width: 52.8rem;
		
		
		h1,h2,h3,h4,h5,h6 {
			font: var(--text-body-s) !important;
			margin: 0;
			font-weight: 700 !important;

			@media only screen and (max-width: 768px) {
				font: 600 var(--fontSize17) / 1.353 var(--fontFamily) !important;
				letter-spacing: 0.01rem;
			}
			
			+ p {
				margin-top: 0;
			}
		}

		p {
			margin: 1.3em 0;
			font: var(--text-body-s) !important;

			@media only screen and (max-width: 768px) {
				font: 400 var(--fontSize17) / 1.353 var(--fontFamily) !important;
				letter-spacing: 0.01rem;
			}

			&:first-child {
				margin-top: 0;
			}

			&:last-child {
				margin-bottom: 0;
			}
		}
	}
}

.section__media-with-text {
	--imageWidth: 29.8rem;
	
	.innerwrapper {
		display: grid;
		grid-template-columns: 1fr var(--imageWidth);
		align-items: center;
		gap: 8.7rem;

		@media only screen and (max-width: 768px) {
			grid-template-columns: minmax(0, 1fr);
			gap: 0.8rem;
		}
	}
	
	&.reversed {
		.innerwrapper {
			grid-template-columns: var(--imageWidth) 1fr;

			@media only screen and (max-width: 768px) {
				grid-template-columns: minmax(0, 1fr);
			}
		}
		
	}
	
	

	.content {
		@media only screen and (max-width: 768px) {
			order: 2;
		}

		h2 {
			font: var(--text-h4) !important;
			margin-bottom: 2.2rem;

			@media only screen and (max-width: 768px) {
				margin-top: 0;
				margin-bottom: 0.4rem;
				font: 400 var(--fontSize22) / 1.227 var(--fontFamily) !important;
			}
		}

		p {
			font: var(--text-body-m) !important;

			@media only screen and (max-width: 768px) {
				font: 400 var(--fontSize17) / 1.353 var(--fontFamily) !important;
				letter-spacing: 0.01rem;
			}
		}

		h2 + p {
			@media only screen and (max-width: 768px) {
				margin-top: 0;
			}
		}
	}
	
	&:has(.media figcaption){
		.content {
			margin-top: -2rem;

			@media only screen and (max-width: 768px) {
				margin-top: 0;
			}
		}
	}

	.media {
		width: 100%;
		margin: 0;

		@media only screen and (max-width: 768px) {
			order: 1;
		}

		.image {

			img {
				width: 100%;
				height: auto;
			}
		}
	}

	&.reversed {
		.content {
			order: 2;
		}

		.media {
			order: 1;
		}
	}
}

.section__quote {
	blockquote {
		--quoteBarProgress: 1;
		position: relative;
		margin: 0;
		padding-left: 3.4rem;
		padding-block: 2.4rem;

		@media only screen and (max-width: 768px) {
			padding-block: 0.2rem;
			padding-left: 1.2rem;
		}

		&::before {
			content: '';
			position: absolute;
			inset: 0 auto 0 0;
			width: 0.25rem;
			border-radius: 999px;
			background: linear-gradient(180deg, #BED8FF 0%, #E1FF00 50%, #BED8FF 100%);
			background: linear-gradient(180deg, color(display-p3 0.7647 0.8431 0.9961) 0%, color(display-p3 0.9059 0.9961 0.2157) 50%, color(display-p3 0.7647 0.8431 0.9961) 100%);
			transform: scaleY(var(--quoteBarProgress));
			transform-origin: top center;

			@media only screen and (max-width: 768px) {
				width: 0.25rem;
			}
		}

		p {
			font: var(--text-h4) !important;

			@media only screen and (max-width: 768px) {
				margin: 0;
				font: 400 var(--fontSize22) / 1.227 var(--fontFamily) !important;
			}
		}

		.quote-footer {
			margin-top: 4.4rem;
			display: block;
			font: var(--text-body-m);

			@media only screen and (max-width: 768px) {
				margin-top: 1.6rem;
				font: 400 var(--fontSize13) / 1.308 var(--fontFamily);
				letter-spacing: 0.015rem;
				opacity: 0.7;
			}
		}
	}
}


.section__hero {
	position: relative;
	overflow: hidden;

	@media only screen and (min-width: 769px) {
		position: sticky;
		top: 0;
		z-index: 0;
		margin-top: calc(var(--headerHeight) * -1);
		padding-top: var(--headerHeight);
	}

	.media {
		position: absolute;
		inset: 0;
		
		@media only screen and (max-width: 768px) {
			position: relative;
			height: 25.3rem;
		}
		
		&:before {
			content: '';
			display: block;
			position: absolute;
			inset: 0;
			z-index: 1;
			background: linear-gradient(180deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%);
		}

		video,
		img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		
		img {
			object-position: center top;
		}
	}

	.innerwrapper {
		position: relative;
		z-index: 2;
		height: 47.7rem;
		display: flex;
		align-items: flex-end;

		@media only screen and (min-width: 769px) {
			height: calc(100svh - var(--headerHeight));
		}

		@media only screen and (max-width: 768px) {
			height: auto;
			padding-top: 2.2rem !important;
		}
	}

	.content {
		max-width: 75rem;
		margin-bottom: 2.6rem;

		h1 {
			opacity: 0;

			&.is-word-reveal-ready {
				opacity: 1;
			}

			@media (scripting: none) {
				opacity: 1;
			}
		}
		
		@media only screen and (max-width: 768px) {
			margin-bottom: 0;
			
			h1 {
				color: var(--colorPetrol);
			}
		}

	}

	.hero-headline__word {
		display: inline-block;
		will-change: opacity, transform;
		opacity: 0;
	}
	
	
}

@media only screen and (min-width: 769px) {
	body.frontend main:has(> .section__hero:first-child) > section:not(.section__hero) {
		position: relative;
		z-index: 1;
	}
}

@media only screen and (max-width: 768px) {
	main:has(> .section__hero:first-child + .section__big-text + .section__buttons) {
		display: flex;
		flex-direction: column;

		> * {
			order: 3;
		}

		> .section__hero:first-child {
			order: 0;
		}

		> .section__hero:first-child + .section__big-text {
			order: 2;
		}

		> .section__hero:first-child + .section__big-text + .section__buttons {
			order: 1;
		}
	}
}

.section__big-text {
	&[data-text-alignment="left"] {
		.content {
			text-align: left;
		}
	}

	&[data-text-alignment="center"] {
		.content {
			text-align: center;
		}
	}

	&[data-text-alignment="right"] {
		.content {
			text-align: right;
		}
	}

	.content {

		h2 {
			margin: 0;
			font: var(--text-h3);
			/*max-width: 26em;*/
			
			@media only screen and (max-width: 768px) {
				font: var(--text-h4);
			}
		}

		.big-text__word {
			will-change: opacity;
		}
	}
}

.section__three-column-cards-alternative {
	.innerwrapper {
		display: flex;
		flex-direction: column;
		gap: 3.7rem;

		@media only screen and (max-width: 768px) {
			gap: 1.6rem;
		}
	}

	.principles {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1rem;

		@media only screen and (max-width: 768px) {
			grid-template-columns: minmax(0, 1fr);
			gap: 0.8rem;
		}
	}

	.principle {
		display: grid;
		grid-template-rows: auto 1fr;
		background: var(--colorLightPetrol);
		border-radius: var(--borderRadius-M);
		overflow: clip;

		@media only screen and (max-width: 768px) {
			border-radius: 0.4rem;
		}

		.media {
			margin: 0.75rem;
			border-radius: var(--borderRadius-S);
			overflow: clip;
			background: var(--colorPetrol);
			font-size: 0;
			line-height: 0;

			@media only screen and (max-width: 768px) {
				margin: 0.4rem;
				border-radius: 0.3rem;
			}

			img,
			video {
				display: block;
				width: 100%;
				height: auto;
				object-fit: cover;
				aspect-ratio: 566/339;

				@media only screen and (max-width: 768px) {
					aspect-ratio: 566/339;
					object-fit: cover;
				}
			}
		}

		.content {
			padding: 1.1rem 1rem 2.5rem 2rem;

			@media only screen and (max-width: 768px) {
				padding: 0.8rem 0.8rem 1.2rem;
			}

			h3 {
				margin: 0 0;
				font: var(--text-h4);

				@media only screen and (max-width: 768px) {
					font: 400 var(--fontSize22) / 1.227 var(--fontFamily);
				}
				
				+ p {
					margin-top: 0.6em;
				}
			}

			p {
				font: var(--text-body-m) !important;

				@media only screen and (max-width: 768px) {
					font: 400 var(--fontSize17) / 1.353 var(--fontFamily) !important;
					letter-spacing: 0.01rem;
					opacity: 0.7;
				}
			}
		}
	}
}

.section__text-with-animation {
	&.has-click-accordion {
		.text-animation-item__body[hidden],
		.animation[hidden] {
			display: none;
		}
		.text-animation-item > .text {
			@media only screen and (max-width: 768px) {
				order: 0;
				width: 100%;
			}
		}
	}

	.text-animation-item__toggle {
		display: block;
		width: 100%;
		padding: 0;
		border: 0;
		background: none;
		color: inherit;
		font: inherit;
		text-align: left;
		cursor: pointer;
	}

	&.has-scroll-accordion {
		/* Cover subpixel seams when ScrollTrigger releases the section. */
		box-shadow: 0 2px 0 var(--backgroundColor, transparent);

		.text-animation-item {
			box-sizing: border-box;
			overflow: hidden;
			grid-template-rows: minmax(0, 1fr);
			padding-top: 1.1rem;
			padding-bottom: 1.1rem;
		}
		.text-animation-item__body p {
			margin-bottom: 0;
		}
		.animation {
			align-self: start;
		}
	}

	.text-animation-item__body {
		min-height: 0;
	}
	.innerwrapper {
		display: flex;
		flex-direction: column;
		gap: 5.4rem;

		@media only screen and (max-width: 768px) {
			gap: 2.8rem;
		}
	}

	.headlines {
		max-width: 79rem;
	}

	.text-animation-items {
		border-top: 0.075rem solid currentColor;

		@media only screen and (max-width: 768px) {
			display: flex;
			flex-direction: column;
			gap: 1rem;
			border-top: 0;
		}
	}

	.text-animation-item {
		position: relative;
		display: grid;
		grid-template-columns: 1fr 17.4rem;
		gap: 5rem;
		align-items: start;
		padding: 2.06rem 4.4rem 2.06rem 5rem;
		border-bottom: 0.075rem solid currentColor;

		@media only screen and (max-width: 768px) {
			display: flex;
			flex-direction: column;
			gap: 1.2rem;
			padding: 0 0 1.1rem;
			border-bottom: 1.5px solid rgba(255,255,255,0.2);
		}

		.text {
			@media only screen and (max-width: 768px) {
				order: 2;
			}

			h3 {
				position: relative;
				margin: 0;
				font: var(--text-h4);

				@media only screen and (max-width: 768px) {
					min-height: 2lh;
					padding-left: 2.6rem;
					font: var(--text-button-xs);
					display: flex;
					align-items: center;
					line-height: 1.2;
				}

				&::before {
					content: '';
					position: absolute;
					left: -5rem;
					top: 0;
					width: 3rem;
					aspect-ratio: 1;
					background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' fill='none' viewBox='0 0 60 60'%3E%3Cpath fill='%23e7fe37' d='M0 10C0 4.477 4.477 0 10 0h39.756c5.523 0 10 4.477 10 10v39.756c0 5.523-4.477 10-10 10H10c-5.523 0-10-4.477-10-10z'/%3E%3Cpath fill='%23154047' d='M20 55h10.921l5.36-3.294V40.592h-5.36l12.26-7.245V22.273h-5.44L50 15.153V4H39.121L20 15.196V26.31h5.48L20 29.52v11.074h5.48L20 43.804z'/%3E%3C/svg%3E") center / contain no-repeat;

					@media only screen and (max-width: 768px) {
						left: 0;
						width: 2rem;
						top: 0.15rem;
					}
				}
				
				+ p {
					margin-top: 1.3em;
					
					@media only screen and (max-width: 768px) {
						margin-top: 0.6em;
					}
				}
			}

			p {
				margin-top: 1em;
				max-width: 37em;
				font: var(--text-body-m) !important;

				@media only screen and (max-width: 768px) {
					margin-top: 0.6rem;
					opacity: 0.7;
					font: var(--text-body-s) !important;
					padding-left: 0;
					line-height: 1.3 !important;
				}
			}
		}

		.animation {
			width: 100%;
			font-size: 0;
			line-height: 0;

			@media only screen and (max-width: 768px) {
				order: 1;
				width: 73%;
				margin-inline: auto;
			}

			img,
			video {
				display: block;
				width: 100%;
				height: auto;
				object-fit: cover;
				aspect-ratio: 800/600;

				@media only screen and (max-width: 768px) {
					aspect-ratio: 800/600;
					border-radius: var(--borderRadius-M);
				}
			}
		}
	}
}

.section__use-cases-folder-teaser {
	.innerwrapper {
		display: flex;
		flex-direction: column;
		gap: 4.1rem;
		
		@media only screen and (max-width: 768px) {
			gap: 1.7rem;	
		}
		
	}

	.folder-teaser-grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-rows: repeat(5, auto);
		column-gap: var(--threeColumnGap);
		row-gap: 0;

		@media only screen and (max-width: 768px) {
			box-sizing: border-box;
			width: calc(100% + (var(--sideSpacing) * 2));
			margin-left: calc(var(--sideSpacing) * -1);
			padding-inline: var(--sideSpacing);
			grid-template-columns: none;
			grid-auto-flow: column;
			grid-auto-columns: 14.4rem;
			column-gap: 0.6rem;
			overflow-x: auto;
			scrollbar-width: none;

			&::-webkit-scrollbar {
				display: none;
			}
		}
	}

	.folder-teaser-card {
		--folderBackground: var(--colorWarmGrey);
		--teaserTextLines: 3;
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='595' height='1906' viewBox='0 0 595 1906'%3E%3Cpath fill='%23000' d='M0 15v1876c0 8.28 6.716 15 15 15h565c8.284 0 15-6.72 15-15V72.402c0-8.284-6.716-15-15-15H429.311a15 15 0 0 1-13.755-9.015L398.423 9.015A15 15 0 0 0 384.669 0H15C6.716 0 0 6.716 0 15'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='595' height='1906' viewBox='0 0 595 1906'%3E%3Cpath fill='%23000' d='M0 15v1876c0 8.28 6.716 15 15 15h565c8.284 0 15-6.72 15-15V72.402c0-8.284-6.716-15-15-15H429.311a15 15 0 0 1-13.755-9.015L398.423 9.015A15 15 0 0 0 384.669 0H15C6.716 0 0 6.716 0 15'/%3E%3C/svg%3E");
		grid-row: span 5;
		grid-template-rows: subgrid;

		@media only screen and (max-width: 768px) {
			--teaserTextLines: 4;
			-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='288' height='1043' fill='none' viewBox='0 0 288 1043'><path fill='%23090909' d='M0 8v1026.5c0 4.42 3.582 8 8 8h272a8 8 0 0 0 8-8v-978a8 8 0 0 0-8-8h-39.086a8 8 0 0 1-7.808-6.262l-8.012-35.977A8 8 0 0 0 217.286 0H8a8 8 0 0 0-8 8'/></svg>");
			mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='288' height='1043' fill='none' viewBox='0 0 288 1043'><path fill='%23090909' d='M0 8v1026.5c0 4.42 3.582 8 8 8h272a8 8 0 0 0 8-8v-978a8 8 0 0 0-8-8h-39.086a8 8 0 0 1-7.808-6.262l-8.012-35.977A8 8 0 0 0 217.286 0H8a8 8 0 0 0-8 8'/></svg>");
		}

		> .label {
			grid-row: 1;
		}

		.folder-content {
			height: 100%;
			box-sizing: border-box;
			grid-row: 2 / span 4;
			display: grid;
			grid-template-rows: subgrid;

			h3 {
				grid-row: 1;
			}

			.media {
				grid-row: 2;
			}

			.content {
				grid-row: 3;
			}

			.read-more {
				grid-row: 4;
			}
		}

		.media {
			margin-top: 1.8rem;
			
			@media only screen and (max-width: 768px) {
				margin-top: 1rem;
				aspect-ratio: 525 / 377;
			}
		}

		.content {
			margin-top: 2.1rem;
			
			@media only screen and (max-width: 768px) {
				margin-top: 0.9rem;
			}

			p {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: var(--teaserTextLines);
				line-clamp: var(--teaserTextLines);
				overflow: hidden;
			}
		}
	}
}

.section__common-use-cases {
	.innerwrapper {
		display: flex;
		flex-direction: column;
		gap: 3.6rem;
		
		@media only screen and (max-width: 768px) {
			gap: 2.2rem;	
		}
	}

	.common-use-cases-grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--threeColumnGap);

		@media only screen and (max-width: 768px) {
			box-sizing: border-box;
			width: calc(100% + (var(--sideSpacing) * 2));
			margin-left: calc(var(--sideSpacing) * -1);
			padding-inline: var(--sideSpacing);
			grid-template-columns: none;
			grid-auto-flow: column;
			grid-auto-columns: 14.4rem;
			gap: 0.6rem;
			overflow-x: auto;
			scrollbar-width: none;

			&::-webkit-scrollbar {
				display: none;
			}
		}
	}

	.common-use-case {
		--folderBackground: var(--colorWarmGrey);
		min-height: 23.2rem;

		@media only screen and (max-width: 768px) {
			min-height: 14.6rem;
			-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='288' height='933' fill='none' viewBox='0 0 288 933'><path fill='%23090909' d='M0 8.849V923.65a8.85 8.85 0 0 0 8.849 8.848H279.13a8.85 8.85 0 0 0 8.849-8.868l-1.96-865.803A8.85 8.85 0 0 0 277.171 49h-84.892a8.85 8.85 0 0 1-8.565-6.622l-9.292-35.754A8.85 8.85 0 0 0 165.857 0H8.849A8.85 8.85 0 0 0 0 8.849'/></svg>");
			mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='288' height='933' fill='none' viewBox='0 0 288 933'><path fill='%23090909' d='M0 8.849V923.65a8.85 8.85 0 0 0 8.849 8.848H279.13a8.85 8.85 0 0 0 8.849-8.868l-1.96-865.803A8.85 8.85 0 0 0 277.171 49h-84.892a8.85 8.85 0 0 1-8.565-6.622l-9.292-35.754A8.85 8.85 0 0 0 165.857 0H8.849A8.85 8.85 0 0 0 0 8.849'/></svg>");
		}

		.label {
			height: 3.5rem;
			align-items: end;
			font: var(--text-h5);
			letter-spacing: 0.13em;
			text-transform: uppercase;
			line-height: 1;
			
			@media only screen and (max-width: 768px) {
				align-items: center;
				font: var(--text-h4);	
				height: 3rem;
			}
		}

		.folder-content {
			padding-top: 2rem;
			padding-bottom: 2.2rem;
			justify-content: flex-start;

			h3 {
			}

			.content {
				margin-top: 1.2rem;
			}
		}
	}
}

.section__data-in-insights-out {
	.innerwrapper {
		display: flex;
		flex-direction: column;
		gap: 7.7rem 0;
		
		@media only screen and (max-width: 768px) {
			gap: 0.8rem;	
		}
		
	}
	.data-flow {
		color: var(--colorWhite);
	}

	.data-flow__body {
		display: grid;
		grid-template-columns: 23.5rem minmax(8rem, 1fr) 45.8rem;
		gap: 0;
		align-items: start;

		@media only screen and (max-width: 768px) {
			display: flex;
			flex-direction: column;
			gap: 0;
		}
	}

	.data-flow__inputs,
	.data-flow__outputs {
		position: relative;
		z-index: 2;
		display: flex;
		flex-direction: column;
		gap: 0.8rem;

		@media only screen and (max-width: 768px) {
			width: 100%;
		}
	}

	.data-flow__inputs {
		margin-block: auto;
	}

	.data-flow__title {
		display: flex;
		align-items: center;
		gap: 1rem;
		margin: 0;
		color: var(--colorNeon);
		font: var(--text-h4);

		@media only screen and (max-width: 768px) {
			gap: 0.7rem;
			font: 400 var(--fontSize22) / normal var(--fontFamily);
		}
	}

	.data-flow__direction-icon {
		display: block;
		flex: 0 0 3rem;
		width: 3rem;
		aspect-ratio: 1;

		@media only screen and (max-width: 768px) {
			flex-basis: 2.1rem;
			width: 2.1rem;
		}

		svg {
			display: block;
			width: 100%;
			height: 100%;
		}
	}

	.data-flow__input-list {
		display: flex;
		flex-direction: column;
		gap: 1.4rem;
		position: relative;
		z-index: 5;
		padding: 1.6rem 1.4rem;
		border-radius: var(--borderRadius-S);
		background: var(--colorPetrolLight, #2c565f);

		@media only screen and (max-width: 768px) {
			gap: 0.6rem;
			padding: 1rem;
			border-radius: 0.4rem;
		}
	}

	.data-flow__input {
		position: relative;
		padding-left: 1.5rem;
		font: var(--text-h6);

		@media only screen and (max-width: 768px) {
			padding-left: 1.2rem;
			font: 400 var(--fontSize17) / normal var(--fontFamily);
		}

		&::before {
			position: absolute;
			top: 0.45em;
			left: 0;
			width: 0.6rem;
			aspect-ratio: 1;
			border-radius: 50%;
			background: var(--colorNeon);
			content: '';
		}
	}

	.data-flow__connections {
		display: block;
		align-self: stretch;
		width: 100%;
		height: 100%;
		min-height: 22rem;
		overflow: visible;
		pointer-events: none;

		@media only screen and (max-width: 768px) {
			display: block;
			align-self: center;
			width: 100%;
			height: 5.8rem;
			min-height: 0;
			margin-bottom: -3rem;
		}

		path {
			fill: none;
			stroke-width: 7;
			vector-effect: non-scaling-stroke;

			@media only screen and (max-width: 768px) {
				stroke-width: 6;
			}
		}
	}

	.data-flow__outputs {
		ul {
			display: flex;
			flex-direction: column;
			gap: 0.8rem;
			margin: 0;
			padding: 0;
			list-style: none;
			font: var(--text-h6);

			@media only screen and (max-width: 768px) {
				gap: 0.5rem;
				font: 400 var(--fontSize17) / normal var(--fontFamily);
			}
		}

		li {
			position: relative;
			padding: 1.1rem 1.2rem 1.1rem 2.9rem;
			border-radius: var(--borderRadius-S);
			background: var(--colorPetrolLight, #2c565f);

			@media only screen and (max-width: 768px) {
				padding: 0.8rem 1rem 0.8rem 2.2rem;
				border-radius: 0.4rem;
			}

			&::before {
				content: '';
				position: absolute;
				left: 1.2rem;
				top: 50%;
				width: 0.7rem;
				aspect-ratio: 1;
				border-radius: 50%;
				background: var(--colorNeon);
				transform: translateY(-50%);

				@media only screen and (max-width: 768px) {
					left: 1rem;
					width: 0.5rem;
					transform: translateY(0);
					top: 1.1rem;
				}
			}
		}
	}
}

.section__team {
	.icon-definitions {
		position: absolute;
		width: 0;
		height: 0;
		overflow: hidden;
	}

	.innerwrapper {
		display: flex;
		flex-direction: column;
		gap: 14.9rem;

		@media only screen and (max-width: 768px) {
			gap: 1.6rem;
		}
	}

	.team-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 2.1rem 1.2rem;

		@media only screen and (max-width: 768px) {
			grid-template-columns: minmax(0, 1fr);
			gap: 1.6rem;
		}

		&:has(.person:nth-child(3)) {
			@media only screen and (max-width: 768px) {
				grid-template-columns: minmax(0, 1fr);
				gap: 0;
				width: calc(100% - 0.4rem);
			}

			.person {
				@media only screen and (max-width: 768px) {
					position: relative;
					display: grid;
					grid-template-columns: 5.5rem minmax(0, 1fr);
					gap: 0.4rem;
					height: 6.15rem;
					margin-bottom: 1.6rem;

					&::after {
						position: absolute;
						right: 0;
						bottom: -0.8rem;
						left: 0;
						height: 0.075rem;
						background: color-mix(in srgb, var(--color) 20%, transparent);
						content: '';
					}

					&:last-child {
						margin-bottom: 0;

						&::after {
							display: none;
						}
					}
				}
			}

			.image {
				@media only screen and (max-width: 768px) {
					width: 5.5rem;
					height: 6.15rem;
					aspect-ratio: auto;
					flex: 0 0 auto;
					border-radius: 0.2rem;
				}
			}

			.content {
				@media only screen and (max-width: 768px) {
					height: 6.15rem;
					justify-content: flex-start;
				}
			}

			h3 {
				@media only screen and (max-width: 768px) {
					margin-bottom: 0.2rem;
					font: 400 var(--fontSize17) / 1.353 var(--fontFamily);
					
				
				}
			}

			.role {
				@media only screen and (max-width: 768px) {
					font: 400 var(--fontSize17) / 1.353 var(--fontFamily);
				}
			}

			.role p + p {
				@media only screen and (max-width: 768px) {
					display: none;
				}
			}

			.socials {
				@media only screen and (max-width: 768px) {
					margin-top: auto;
				}
			}
		}
	}

	.person {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.2rem;
		min-width: 0;

		@media only screen and (max-width: 768px) {
			display: flex;
			flex-direction: column;
			gap: 0.6rem;
		}

		.image {
			aspect-ratio: 441 / 414;
			border-radius: var(--borderRadius-S);
			overflow: clip;
			font-size: 0;
			line-height: 0;

			@media only screen and (max-width: 768px) {
				width: 100%;
				height: 15rem;
				aspect-ratio: auto;
				flex: 0 0 auto;
				border-radius: 0.5rem;
			}

			img {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		.content {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			min-width: 0;
		}

		h3 {
			margin: 0 0 0.7rem;
			font: var(--text-body-m);

			@media only screen and (max-width: 768px) {
				margin-bottom: 0.2rem;
				font: 400 var(--fontSize19) / 1.21 var(--fontFamily);
				letter-spacing: 0.01rem;
				
				br {
					display: none;
				}
			}
		}

		.role {
			font: var(--text-body-m);
			opacity: 0.6;

			@media only screen and (max-width: 768px) {
				font: 400 var(--fontSize17) / 1.353 var(--fontFamily);
				letter-spacing: 0.01rem;
			}

			p {
				margin: 0;
				max-width: 14em;
				
				@media only screen and (max-width: 768px) {
					max-width: none;	
				}
			}
		}

		.socials {
			display: flex;
			gap: 0.3rem;
			margin-top: 0.8rem;

			@media only screen and (max-width: 768px) {
				gap: 0.2rem;
				margin-top: 0.4rem;
			}

			a {
				display: block;
				width: 3rem;
				aspect-ratio: 1;
				font-size: 0;
				line-height: 0;

				@media only screen and (max-width: 768px) {
					width: 1.55rem;
				}

				svg {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
		}

		.actions {
			display: grid;
			grid-template-columns: auto 1fr;
			gap: 0.6rem;
			margin-top: auto;
			width: 100%;

			@media only screen and (max-width: 768px) {
				grid-template-columns: repeat(2, minmax(0, 1fr));
				gap: 0.4rem;
				margin-top: 0.8rem;
			}

			.cta__button {
				padding-inline: 1.9rem;
				gap: 0.5rem;

				@media only screen and (max-width: 768px) {
					width: 100%;
					min-width: 0;
					padding-inline: 0.6rem;
				}
			}
		}
	}


}

body.team-overlay-open {
	overflow: hidden;
}

.team-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s linear 0.55s;

	&[hidden] {
		display: none;
	}

	&.is-open {
		visibility: visible;
		pointer-events: auto;
		transition-delay: 0s;

		.team-overlay__backdrop {
			opacity: 1;
		}

		.team-overlay__panel {
			transform: translateY(0);
		}
	}
}

.team-overlay__backdrop {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--colorWhite) 72%, transparent);
	opacity: 0;
	transition: opacity 0.35s ease;

	@media only screen and (max-width: 768px) {
		background: color-mix(in srgb, var(--colorPetrol) 42%, transparent);
		backdrop-filter: blur(1rem);
		-webkit-backdrop-filter: blur(1rem);
	}
}

.team-overlay__panel {
	position: relative;
	width: calc(100% - var(--sideSpacing) - var(--sideSpacing));
	max-width: calc(var(--maxWidth) - var(--sideSpacing) - var(--sideSpacing));
	max-height: calc(100svh - var(--headerHeight) - 3rem);
	padding: 8.6rem var(--innerPadding) 4rem;
	border-radius: var(--borderRadius-M) var(--borderRadius-M) 0 0;
	background: var(--colorWarmGrey);
	color: var(--colorPetrol);
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateY(calc(100% + 3rem));
	transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
	box-sizing: border-box;
	box-shadow: 0 -0.35rem 1.5rem color-mix(in srgb, var(--colorPetrol) 10%, transparent);

	@media only screen and (max-width: 768px) {
		width: 100%;
		max-width: none;
		max-height: calc(100svh - 2rem);
		padding: 2.95rem var(--sideSpacing) 2.2rem;
		border-radius: 0.7rem 0.7rem 0 0;
		box-shadow: 0 -0.2rem 0.8rem color-mix(in srgb, var(--colorPetrol) 12%, transparent);

		&::before {
			position: absolute;
			top: 0.35rem;
			left: 50%;
			width: 2.9rem;
			height: 0.15rem;
			border-radius: 999px;
			background: var(--colorPetrol);
			opacity: 0.7;
			transform: translateX(-50%);
			content: '';
		}
	}

	&:focus {
		outline: none;
	}
}

.team-overlay__close {
	position: absolute;
	top: 2.7rem;
	right: 2.7rem;
	width: 5.3rem;
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	border-radius: var(--borderRadius-S);
	background: transparent;
	cursor: pointer;

	svg {
		display: block;
		width: 100%;
		height: 100%;
	}

	&:focus-visible {
		outline: 0.15rem solid var(--colorPetrol);
		outline-offset: 0.15rem;
	}

	@media only screen and (max-width: 768px) {
		top: 0;
		right: 0;
		width: 100%;
		height: 1.2rem;
		border-radius: 0;
		z-index: 1;
		cursor: grab;
		touch-action: none;

		&:active {
			cursor: grabbing;
		}

		svg {
			display: none;
		}
	}
}

.team-overlay__header {
	display: grid;
	grid-template-columns: 19.4rem minmax(0, 1fr);
	align-items: end;
	gap: 3.7rem;
	padding-right: 7rem;
	margin-bottom: 2.6rem;

	@media only screen and (max-width: 768px) {
		display: flex;
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 1.2rem;
		padding-right: 0;
		margin-bottom: 1.2rem;
	}
}

.team-overlay__image {
	aspect-ratio: 387 / 364;
	border-radius: var(--borderRadius-S);
	overflow: clip;
	font-size: 0;

	@media only screen and (max-width: 768px) {
		width: 100%;
		height: 12rem;
		aspect-ratio: auto;
		border-radius: 0.3rem;
	}

	img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.team-overlay__profile {
	h2 {
		margin: 0;
		font: var(--text-h2);

		@media only screen and (max-width: 768px) {
			font: 400 var(--fontSize30) / 1.1 var(--fontFamilyHeadline);
			letter-spacing: -0.01rem;
			
			br {
				display: none;
			}
		}
	}

	.role {
		margin: 0.35rem 0 1.2rem;
		font: var(--text-body-m);
		opacity: 0.6;

		@media only screen and (max-width: 768px) {
			margin: 0.1rem 0 0.4rem;
			font: 400 var(--fontSize17) / 1.294 var(--fontFamily);
			letter-spacing: 0.01rem;
		}
	}

	.linkedin {
		display: block;
		width: 2rem;
		aspect-ratio: 1;
		font-size: 0;

		@media only screen and (max-width: 768px) {
			width: 1.55rem;
		}

		svg {
			display: block;
			width: 100%;
			height: 100%;
		}
	}
}

.team-overlay__content {
	font: var(--text-body-m);

	@media only screen and (max-width: 768px) {
		font: 400 var(--fontSize17) / 1.353 var(--fontFamily);
		letter-spacing: 0.01rem;
	}

	h2,
	h3,
	h4 {
		margin: 0 0 0.5em;
		font: var(--text-h4);

		@media only screen and (max-width: 768px) {
			margin-bottom: 0.55rem;
			font: 400 var(--fontSize22) / 1.227 var(--fontFamily);
		}
		
		&:not(:first-child){
			margin-top: 0.8em;
		}
	}
	
	ul,
	ol {
		padding-left: 1.5em;
	}

	p,
	ul,
	ol {
		max-width: 51em;
		margin: 1.2em 0;

		@media only screen and (max-width: 768px) {
			margin: 0 0 1.4rem;
		}
	}

	a {
		color: inherit;
	}
}

.team-overlay__cta {
	margin-top: 2.2rem;

	@media only screen and (max-width: 768px) {
		width: 100%;
		min-height: 3.2rem;
		margin-top: 0.8rem;
		justify-content: center;
	}
}

.team-overlay__cta--mobile {
	display: none;

	@media only screen and (max-width: 768px) {
		display: flex;
		margin: 0 0 1.6rem;
	}
}



.section__careers,
.section__open-positions {
	.innerwrapper {
		display: flex;
		flex-direction: column;
		gap: 1.4rem;

		@media only screen and (max-width: 768px) {
			gap: 0;
			padding-bottom: 2.2rem !important;
		}
	}

	.intro {
		max-width: 86rem;
		margin-bottom: 5rem;

		@media only screen and (max-width: 768px) {
			margin-top: 0.8rem;
			margin-bottom: 0;
		}

		p {
			font: var(--text-h4);

			@media only screen and (max-width: 768px) {
				font: 400 var(--fontSize19) / 1.353 var(--fontFamily);
				letter-spacing: 0.01rem;
			}
		}
	}

	.jobs {
		display: grid;
		gap: 1.5rem;
		padding-inline: var(--innerPadding);

		@media only screen and (max-width: 768px) {
			display: flex;
			flex-direction: column;
			gap: 0.8rem;
			width: 100%;
			margin-top: 2.2rem;
			padding-inline: 0;
			overflow: visible;
		}
	}

	.job-card {
		--folderBackground: var(--colorWhite);
		aspect-ratio: auto;
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1515' height='1075' fill='none' viewBox='0 0 1515 1075'><path fill='%23000' d='M0 15v1045c0 8.28 6.716 15 15 15h1485c8.28 0 15-6.72 15-15V72c0-8.284-6.72-15-15-15H679.297a15 15 0 0 1-13.735-8.97L648.417 8.97A15 15 0 0 0 634.682 0H15C6.716 0 0 6.716 0 15'/%3E%3C/svg%3E");
		-webkit-mask-size: 100% auto;
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1515' height='1075' fill='none' viewBox='0 0 1515 1075'><path fill='%23000' d='M0 15v1045c0 8.28 6.716 15 15 15h1485c8.28 0 15-6.72 15-15V72c0-8.284-6.72-15-15-15H679.297a15 15 0 0 1-13.735-8.97L648.417 8.97A15 15 0 0 0 634.682 0H15C6.716 0 0 6.716 0 15'/%3E%3C/svg%3E");
		mask-size: 100% auto;
		border-radius: var(--borderRadius-M);
		overflow: clip;
		isolation: isolate;

		@media only screen and (max-width: 768px) {
			display: flex;
			flex-direction: column;
			min-height: 0;
			padding: 0.95rem 0.9rem 1rem;
			border-radius: 0.7rem;
			box-sizing: border-box;
			-webkit-mask-image: none;
			mask-image: none;
		}

		.label {
			display: flex;
			gap: 2.4rem;
			font: var(--text-label-caps);
			letter-spacing: var(--text-label-caps-letter-spacing);
			text-transform: var(--text-label-caps-transform);

			@media only screen and (max-width: 768px) {
				height: auto;
				min-width: 0;
				margin: 0 0 0.8rem;
				padding: 0;
				align-items: center;
				gap: 0.6rem;
				font: 400 var(--fontSize12) / 1.5 var(--fontFamily);
				letter-spacing: 0.125rem;
			}
			
			span {
				display: inline-flex;
				align-items: center;
				gap: 0.4rem;
				white-space: nowrap;
			}
			
			svg {
				display: block;
				width: 1.25rem;
				height: auto;
				aspect-ratio: 1/1;
				flex: 0 0 auto;

				@media only screen and (max-width: 768px) {
					width: 0.85rem;
				}
			}
		}

		.folder-content {
			gap: 0.9rem 0;
			padding-bottom: 2rem;

			@media only screen and (max-width: 768px) {
				flex: 1;
				gap: 0.4rem 0;
				padding: 0;
			}
		}


		h3 {
			max-width: none;
			margin-top: 0;

			@media only screen and (max-width: 768px) {
				font: 400 var(--fontSize22) / 1.227 var(--fontFamily);
			}
		}

		.content {
			margin-top: 0;
			
			p {
				font: var(--text-body-m);

				@media only screen and (max-width: 768px) {
					font: 400 var(--fontSize17) / 1.353 var(--fontFamily);
					letter-spacing: 0.01rem;
				}
			}
		}

		.read-more {
			margin-top: 0.8rem;
			padding-top: 0;
			white-space: nowrap;

			@media only screen and (max-width: 768px) {
				margin-top: 0.8rem;
				font: 400 var(--fontSize16) / 1.5 var(--fontFamily);
			}
		}
	}
}

.section__contact {
	position: relative;
	overflow: clip;

	.innerwrapper {
		display: flex;
		flex-direction: column;
		gap: 4rem;

		@media only screen and (max-width: 768px) {
			gap: 1.2rem;
		}
	}

	.contact-columns {
		display: grid;
		grid-template-columns: 40.3rem 1fr;
		gap: 5.9rem;
		align-items: start;

		@media only screen and (max-width: 768px) {
			grid-template-columns: minmax(0, 1fr);
			gap: 2.1rem;
		}
	}

	.contact-media {
		aspect-ratio: 804 / 1074;
		border-radius: var(--borderRadius-S);
		overflow: clip;
		font-size: 0;
		line-height: 0;

		@media only screen and (max-width: 768px) {
			aspect-ratio: 350 / 190;
			border-radius: var(--borderRadius-M);
		}

		> img,
		> video {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.contact-content {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		min-width: 0;
		min-height: 100%;
	}

	.contact-profiles {
		display: flex;
		align-items: center;
		margin-bottom: 2.3rem;

		@media only screen and (max-width: 768px) {
			margin-bottom: 1rem;
		}

		.profile {
			position: relative;
			width: 7.7rem;
			aspect-ratio: 1;
			border-radius: 50%;
			overflow: clip;
			background: var(--colorWarmGrey);
			border: 0.2rem solid white;
			z-index: 2;

			@media only screen and (max-width: 768px) {
				width: 3rem;
				border: 0.1rem solid white;
			}

			+ .profile {
				margin-left: -1.6rem;
				z-index: 1;
				
				@media only screen and (max-width: 768px) {
					margin-left: -0.6rem;
				}
			}

			img {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}

	.contact-intro {
		width: 100%;

		h3,
		h2 {
			margin: 0 0 2.8rem;
			font: var(--text-h4) !important;
			max-width: 16em;

			@media only screen and (max-width: 768px) {
				margin-bottom: 0.8rem;
				font: var(--text-h3) !important;
				max-width: 19em;
			}
		}

		ul {
			display: grid;
			gap: 1rem;
			margin: 0;
			padding: 0;
			list-style: none;

			@media only screen and (max-width: 768px) {
				gap: 0.4rem;
			}
		}

		li {
			position: relative;
			min-height: 3rem;
			padding-left: 4.2rem;
			display: flex;
			align-items: center;
			font: var(--text-body-m);

			@media only screen and (max-width: 768px) {
				min-height: 1.5rem;
				padding-left: 2rem;
				font: var(--text-body-s);
			}

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				width: 3rem;
				aspect-ratio: 1;
				transform: translateY(-50%);
				background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' fill='none' viewBox='0 0 60 60'%3E%3Cpath fill='%23e7fe37' d='M0 45c0 8.284 6.716 15 15 15h30c8.284 0 15-6.716 15-15V15c0-8.284-6.716-15-15-15H15C6.716 0 0 6.716 0 15z'/%3E%3Cpath fill='%23154047' d='M25.67 45.8c-1.6 0-3.11-.62-4.24-1.76L8.39 31l4.24-4.24L25.67 39.8l21.71-21.71 4.24 4.24-21.71 21.71a5.97 5.97 0 0 1-4.24 1.76'/%3E%3C/svg%3E") center / contain no-repeat;

				@media only screen and (max-width: 768px) {
					width: 1.5rem;
					top: 0rem;
					transform: translateY(0);
				}
			}
		}
	}

	.actions {
		display: flex;
		flex-wrap: wrap;
		gap: 0.6rem;
		margin-top: 2.7rem;

		@media only screen and (max-width: 768px) {
			margin-top: 1.5rem;
		}

		.cta__button {
			@media only screen and (max-width: 768px) {
				font: var(--text-button-l);
			}
		}
	}

	.general-enquiries {
		margin-top: auto;

		@media only screen and (max-width: 768px) {
			margin-top: 1.5rem;
		}
		

		p {
			margin: 0.5em 0;
			font: var(--text-h4) !important;
			max-width: 12em;

			@media only screen and (max-width: 768px) {
				font: var(--text-h4) !important;
				max-width: 11em;
			}
			
			&:first-child {
				margin-top: 0;
			}
			
			&:last-child {
				margin-bottom: 0;
			}
		}

		a {
			color: inherit;
			text-underline-offset: 0.12em;
		}
	}
}

.section__video-scroll-text-fading {
	position: relative;
	overflow: clip;

	.innerwrapper {
		height: 100svh;
		display: grid;
		grid-template-rows: auto minmax(0, 1fr);
		gap: 3rem;
		box-sizing: border-box;

		@media only screen and (max-width: 768px) {
			gap: 1.5rem;
		}
	}

	.scroll-visual {
		position: relative;
		width: 100%;
		height: 100%;
		min-height: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: visible;
	}

	.media {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: clip;
		filter: grayscale(1);
		will-change: width, opacity;

		.media__ai-badge {
			top: 0.65rem;
			bottom: auto;
		}

		> img,
		> video {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.scroll-texts {
		position: absolute;
		inset: 0;
		pointer-events: none;
	}

	.scroll-text {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 2rem;
		box-sizing: border-box;
		text-align: center;
		color: var(--colorWhite);
		will-change: opacity, transform;

		p {
			width: min(100%, 54.5rem);
			margin: 0;
			font: 400 var(--fontSize40) / 1.175 var(--fontFamily);

			@media only screen and (max-width: 768px) {
				width: min(100%, 23.7rem);
				font: var(--text-body-l);
			}
		}
	}
}

body.frontend .section__video-scroll-text-fading .scroll-text {
	opacity: 0;
}

.section__career-intro {
	.innerwrapper {
		display: flex;
		flex-direction: column;
		gap: 2.8rem;

		@media only screen and (max-width: 768px) {
			gap: 0.8rem;
			padding-top: 2rem !important;
			padding-bottom: 1.2rem;
		}
	}

	.headlines {
		gap: 1rem;

		@media only screen and (max-width: 768px) {
			order: 2;
			gap: 0.2rem;
		}

		.topline {
			@media only screen and (max-width: 768px) {
				font: 400 var(--fontSize17) / 1.294 var(--fontFamily);
				letter-spacing: 0.01rem;
				opacity: 0.7;
			}
		}
	}

	.facts {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;

		@media only screen and (max-width: 768px) {
			order: 1;
			display: flex;
			flex-wrap: wrap;
			gap: 0.6rem;
		}
	}

	.fact {
		padding: 1.5rem;
		border-radius: var(--borderRadius-M);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0rem;
		background: var(--colorWarmGrey);
		text-align: center;

		@media only screen and (max-width: 768px) {
			display: block;
			padding: 0;
			border-radius: 0;
			background: transparent;
			text-align: left;
		}

		&:nth-child(2) {
			@media only screen and (max-width: 768px) {
				order: -1;
			}
		}

		.label {
			font: var(--text-body-m);

			@media only screen and (max-width: 768px) {
				display: none;
			}
		}

		.value {
			font: var(--text-h4);

			@media only screen and (max-width: 768px) {
				display: inline-flex;
				align-items: center;
				gap: 0.2rem;
				font: 400 var(--fontSize12) / 1.5 var(--fontFamily);
				letter-spacing: 0.125rem;
				text-transform: uppercase;
			}

			svg {
				display: none;

				@media only screen and (max-width: 768px) {
					display: block;
					width: 0.85rem;
					height: 0.85rem;
					flex: 0 0 auto;
				}
			}
		}
	}
}

.section__career-content {
	.innerwrapper {
		@media only screen and (max-width: 768px) {
			padding-top: 0.8rem;
			padding-bottom: 2rem;
		}

		ul {
			margin-block: 1.3rem;
			padding-left: 2rem;
			font: var(--text-body-m);

			@media only screen and (max-width: 768px) {
				margin-block: 0.6rem 1.6rem;
				padding-left: 1.25rem;
				font: 400 var(--fontSize17) / 1.353 var(--fontFamily);
				letter-spacing: 0.01rem;
			}
			
			&:last-child {
				margin-bottom: 0;
			}
		}

		p {
			margin-block: 1.3rem;
			font: var(--text-body-m);

			@media only screen and (max-width: 768px) {
				margin-block: 0.6rem 1.6rem;
				font: 400 var(--fontSize17) / 1.353 var(--fontFamily);
				letter-spacing: 0.01rem;
			}
			
			&:last-child {
				margin-bottom: 0;
			}
		}

		a {
			color: inherit;
			text-decoration: underline;
			text-underline-offset: 0.12em;
		}
	}

	h1,
	h2,
	h3,
	h4,
	h5 {
		font: var(--text-h4);

		@media only screen and (max-width: 768px) {
			font: 400 var(--fontSize22) / 1.227 var(--fontFamily);
		}

		&:not(:first-child) {
			margin-top: 3.3rem;

			@media only screen and (max-width: 768px) {
				margin-top: 1.6rem;
			}
		}
		
		+ p {
			margin-top: 0;
		}
		
		+ ul {
			margin-top: 0.6rem !important;
		}
	}
}

.section__open-positions {
	.innerwrapper {
		gap: 3rem;

		@media only screen and (max-width: 768px) {
			gap: 0;
			padding-top: 1.6rem;
		}
	}

	h2 {
		font: var(--text-h4);

		@media only screen and (max-width: 768px) {
			font: var(--text-h2);
		}
	}

	.jobs {
		padding-inline: 0;
	}
}

.section__buttons {
	&[data-horizontal-alignment="left"] {
		.innerwrapper {
			justify-content: start;
		}
	}

	&[data-horizontal-alignment="centered"] {
		.innerwrapper {
			justify-content: center;
		}
	}

	&[data-horizontal-alignment="right"] {
		.innerwrapper {
			justify-content: end;
		}
	}

	.innerwrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 1rem;
		
		@media only screen and (max-width: 768px) {
			gap: 0.4rem;
			flex-wrap: wrap;

			&:has(> .cta__button:only-child) {
				justify-content: start;
			}
			
			.cta__button {
				flex: 1;
				max-width: 11rem;
			}
		}
		
		/*
		@media only screen and (min-width: 769px) {
			&:has(.cta__button:nth-child(2)){
				display: grid;
				grid-template-columns: repeat(2,1fr);
				
				.cta__button {
					&:first-child {
						margin-left: auto;
					}
					
					&:nth-child(2) {
						margin-right: auto;
					}
				}
			}
		}
		*/
	}
	

	.cta__button {
		/*
		&:first-child {
			width: 22.1rem;
		}

		&:last-child {
			width: 18.55rem;
		}
		*/
	}
}

.section__logo-line {
	.innerwrapper {
		display: flex;
		flex-direction: column;
		gap: 4.8rem 0;
		
		@media only screen and (max-width: 768px) {
			gap: 1rem 0;	
		}
	}
	
	.topline {
		margin-inline: auto;
	}


	.line {
		width: 100%;
	}

	.track {
		width: 100%;
		display: flex;
	}

	.group {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 2rem;
		flex: 0 0 auto;
	}

	&[data-marquee] {
		.line {
			overflow: clip;
			width: calc(100% + var(--sideSpacing) + var(--sideSpacing));
			margin-inline: calc(var(--sideSpacing) * -1);
			position: relative;

			&::before,
			&::after {
				content: '';
				position: absolute;
				z-index: 1;
				top: 0;
				bottom: 0;
				width: var(--logoFadeWidth);
				pointer-events: none;
			}

			&::before {
				left: 0;
				background: linear-gradient(to right, var(--backgroundColor), transparent);
			}

			&::after {
				right: 0;
				background: linear-gradient(to left, var(--backgroundColor), transparent);
			}

			&:hover .track {
				animation-play-state: paused;
			}
		}

		.track {
			width: max-content;
			animation: logo-marquee 30s linear infinite;
		}

		.group {
			width: max-content;
			padding-right: var(--logoSpacing);
			justify-content: flex-start;
			gap: var(--logoSpacing);
		}
	}
	
	&:not([data-marquee]) {
		.line {
			padding-inline: 1rem;

			@media only screen and (max-width: 768px) {
				overflow: clip;
				width: calc(100% + 2 * var(--sideSpacing));
				margin-inline: calc(-1 * var(--sideSpacing));
				padding-inline: 0;
				position: relative;
			}

			&::before,
			&::after {
				@media only screen and (max-width: 768px) {
					content: '';
					position: absolute;
					z-index: 1;
					top: 0;
					bottom: 0;
					width: var(--logoFadeWidth);
					pointer-events: none;
				}
			}

			&::before {
				@media only screen and (max-width: 768px) {
					left: 0;
					background: linear-gradient(to right, var(--backgroundColor), transparent);
				}
			}

			&::after {
				@media only screen and (max-width: 768px) {
					right: 0;
					background: linear-gradient(to left, var(--backgroundColor), transparent);
				}
			}
		}

		.track {
			@media only screen and (max-width: 768px) {
				width: max-content;
				animation: logo-marquee 30s linear infinite;
			}
		}

		.group {
			@media only screen and (max-width: 768px) {
				width: max-content;
				padding-right: var(--logoSpacing);
				justify-content: flex-start;
				gap: var(--logoSpacing);
			}

			&[aria-hidden="true"] {
				display: none;

				@media only screen and (max-width: 768px) {
					display: flex;
				}
			}
		}
	}

	.logo {
		--base-ratio: calc(var(--width) / var(--height));
		--factor-horizontal: min(calc(var(--base-ratio) * -0.1 + 1.1), 1);

		display: block;
		flex: 0 0 auto;
		height: max(calc(var(--logoBaseHeight) / 2), calc(var(--logoBaseHeight) * var(--factor-horizontal)));
		aspect-ratio: var(--base-ratio);

		img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
	}
}

@keyframes logo-marquee {
	to {
		transform: translateX(-50%);
	}
}

.section__three-column-cards {
	.card {
		@media (hover: hover) and (pointer: fine) {
			.animation img,
			.animation video {
				transition: transform 240ms var(--motionEaseOut);
			}

			&:hover .animation img,
			&:hover .animation video {
				transform: scale(1.05);
			}
		}

		.label.is-motion-outlined {
			position: relative;
			border-color: transparent;

			.motion-card-outline {
				position: absolute;
				inset: 0;
				display: block;
				width: 100%;
				height: 100%;
				overflow: visible;
				pointer-events: none;

				rect {
					fill: none;
					stroke: currentColor;
					stroke-width: 1;
				}
			}
		}
	}

	.innerwrapper {
		display: flex;
		flex-direction: column;
		gap: 5rem;
		
		@media only screen and (max-width: 768px) {
			gap: 1.5rem;
		}
		
	}


	.cards {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--threeColumnGap);
		
		@media only screen and (max-width: 768px) {
			display: flex;
			flex-direction: column;
			gap: var(--threeColumnGap);	
		}
	}

	.card {
		aspect-ratio: 595/862;
		padding: 2.3rem 2.6rem 2.9rem 2.6rem;
		border-radius: var(--borderRadius-M);
		background-color: var(--colorPetrol);
		color: var(--colorWarmGrey);
		display: grid;
		grid-template-rows: auto auto 1fr auto;
		align-items: start;
		overflow: hidden;
		
		@media only screen and (max-width: 768px) {
			padding: 1.2rem 1.2rem 1.3rem 1.2rem;
			aspect-ratio: unset;
			border-radius: var(--borderRadius-Mobile);
			width: calc(100% + 0.8rem);
			margin-inline: -0.4rem;
		}

		.label {
			border: 1px solid currentColor;
			border-radius: var(--borderRadius-S);
			display: flex;
			align-items: center;
			justify-content: center;
			font: var(--text-label-caps);
			letter-spacing: var(--text-label-caps-letter-spacing);
			text-transform: var(--text-label-caps-transform);
			margin-inline: auto;
			padding: 0.45em 3em;
			margin-bottom: 1rem;
			
			@media only screen and (max-width: 768px) {
				padding: 0.7em 1em;
				margin-bottom: 0.8rem;
			}
		}

		h3 {
			margin: 0 auto 0;
			font: var(--text-h4) !important;
			text-align: center;
			color: var(--colorWarmGrey) !important;
			
			@media only screen and (max-width: 768px) {
				font: var(--text-h3) !important;
			}
		}

		.animation {
			width: 100%;
			align-self: center;
			
			@media only screen and (max-width: 768px) {
				margin: 1.8rem 0;
			}

			svg,
			img,
			video {
				display: block;
				width: 100%;
				height: auto;
			}
			
			video {
				width: 82%;
				margin: auto;
				
				@media only screen and (max-width: 768px) {
					width: 100%;	
				}
			}

			.grid {
				fill: none;
				stroke: var(--colorWarmGrey);
				stroke-width: 1;
				opacity: 0.17;
			}
		}

		.content {
			margin-top: auto;

			p {
				font: var(--text-body-s) !important;
				
				@media only screen and (max-width: 768px) {
					line-height: 1.3 !important;
				}
			}
		}
	}


}

.section__solution-scroll-animation {
	.innerwrapper {
		display: flex;
		flex-direction: column;
		gap: 2.7rem 0;
		@media only screen and (max-width: 768px) {
			gap: 1.5rem;
		}
		
		.content {
			font: var(--text-h4);
		}
	}

	.solution-player {
		display: grid;
		grid-template-columns: 1.5fr 1fr;
		gap: 2.5rem;
		align-items: start;
		@media only screen and (max-width: 768px) {
			grid-template-columns: minmax(0, 1fr);
			gap: 1rem;
			margin-top: 1.5rem;
		}
	}

	.solution-player__media {
		display: grid;
		aspect-ratio: 1200 / 1080;
		min-width: 0;
		background: white;
		transition: opacity 0.45s ease;
		&:is(.is-initialized:not(.has-started) *) { opacity: 0; transition: none; }
		@media (prefers-reduced-motion: reduce) { transition: none; }
		@media only screen and (max-width: 768px) { grid-row: 2; }
	}

	.solution-player__sequence {
		grid-area: 1 / 1;
		width: 100%;
		height: 100%;
		object-fit: contain;
		opacity: 0;
		pointer-events: none;
		&.is-active { opacity: 1; }
	}

	&.is-sequence-player {
		.solution-player {
			align-items: center;
			min-height: 90svh;
			@media only screen and (max-width: 768px) {
				min-height: 0;
				height: 94svh;
				grid-template-rows: auto minmax(0, 1fr);
			}
		}
		.solution-player__media {
			width: 100%;
			max-height: 85svh;
			@media only screen and (max-width: 768px) {
				height: 100%;
				min-height: 0;
				aspect-ratio: auto;
			}
		}
		.solution-player__sequence {
			min-height: 0;
			max-height: 85svh;
		}
		.solution-player__step {
			transition: none;
			transform: none;
		}
		.solution-player__copy {
			padding-top: 0;
		}
	}

	.solution-player__copy {
		display: grid;
		padding-top: 3rem;
		@media only screen and (max-width: 768px) {
			padding-top: 0;
			grid-row: 1;
		}
	}

	.solution-player__step {
		grid-area: 1 / 1;
		opacity: 0;
		visibility: hidden;
		transform: translateY(0.5rem);
		transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s;
		&.is-active { opacity: 1; visibility: visible; transform: none; }
		&:is(.is-initialized:not(.has-started) *) { opacity: 0; transition: none; }
		@media (prefers-reduced-motion: reduce) { transition: none; transform: none; }
		h3 {
			margin: 0 0 1.2rem;
			font: var(--text-h3);
			@media only screen and (max-width: 768px) {
				font: var(--text-h4);
				line-height: 1.1;
				margin-bottom: 0.8rem;
			}
			span {
				display: block;
				@media only screen and (max-width: 768px) { display: inline; }
			}
			br {
				@media only screen and (max-width: 768px) { display: none; }
			}
		}
		p {
			margin: 0; font: var(--text-body-m); max-width: 22em;
			@media only screen and (max-width: 768px) {
				font: 400 var(--fontSize17) / 1.353 var(--fontFamily);
				max-width: none;
			}
		}
	}

	.solution-player__controls {
		&[hidden] { display: none; }
		display: flex;
		align-items: center;
		gap: 1rem;
		font: var(--text-body-s);
	}
	.solution-player__buttons {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 0.75rem;
		&:empty { display: none; }
	}
	.solution-player__control {
		border: 1px solid currentColor;
		border-radius: var(--borderRadius-S);
		padding: 0.4rem 0.8rem;
		background: transparent;
		color: inherit;
		font: inherit;
		cursor: pointer;
	}
}

.section__use-cases-teaser {
	.use-case {
		@media (hover: hover) and (pointer: fine) {
			.media img,
			.media video {
				transition: transform 240ms var(--motionEaseOut);
			}

			&:hover .media img,
			&:hover .media video {
				transform: scale(1.05);
			}
		}
	}

	.use-case__toggle {
		display: none;

		@media only screen and (max-width: 768px) {
			&:is(.is-accordion *) {
				display: block;
				position: absolute;
				z-index: 2;
				pointer-events: auto;
				inset: 0;
				width: 100%;
				height: 100%;
				padding: 0;
				border: 0;
				background: none;
				color: inherit;
				cursor: pointer;

				&:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

				&::before, &::after {
					content: '';
					position: absolute;
					right: 0;
					top: 50%;
					width: 1.06rem;
					height: 1.06rem;
					background: currentColor;
					transform: translateY(-50%);
					transition: opacity 240ms ease;
					pointer-events: none;
					mask: url("data:image/svg+xml;utf8,<svg preserveAspectRatio='none' overflow='visible' style='display: block;' width='21.18' height='21.18' viewBox='0 0 21.18 21.18' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 10.59L21.18 10.59' stroke='white' stroke-width='1.5'/><path d='M10.59 3.34727e-08L10.59 21.18' stroke='white' stroke-width='1.5'/></svg>") center / contain no-repeat;

					@media (prefers-reduced-motion: reduce) { transition: none; }
				}

				&::after {
					mask: url("data:image/svg+xml;utf8,<svg preserveAspectRatio='none' overflow='visible' style='display: block;' width='21.18' height='21.18' viewBox='0 0 21.18 21.18' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M3.10185 3.10163L18.0784 18.0782' stroke='white' stroke-width='1.5'/><path d='M18.0781 3.10163L3.10163 18.0782' stroke='white' stroke-width='1.5'/></svg>") center / contain no-repeat;
					opacity: 0;
				}
				&[aria-expanded='true']::before { opacity: 0; }
				&[aria-expanded='true']::after { opacity: 1; }
			}
		}
	}

	.use-case__panel {
		display: contents;

		@media only screen and (max-width: 768px) {
			display: grid;
			grid-template-rows: 1fr;
			transition: grid-template-rows 360ms ease, visibility 360ms;

			&:is(.is-accordion .use-case:not(.is-open) *) {
				grid-template-rows: 0fr;
				visibility: hidden;
			}

			@media (prefers-reduced-motion: reduce) { transition: none; }
		}
	}

	.use-case__body {
		display: contents;

		@media only screen and (max-width: 768px) {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			min-height: 0;
			overflow: hidden;
			gap: 0.4rem;
		}
	}

	.innerwrapper {
		display: flex;
		flex-direction: column;
		gap: 5.2rem 0;
		
		@media only screen and (max-width: 768px) {
			gap: 3.8rem;	
		}
	}

	.headlines {
		gap: 0.75rem;
		
		@media only screen and (max-width: 768px) {
			gap: 0.4rem;	
		}
	}

	.use-cases {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: auto auto auto 1fr auto;
		column-gap: var(--threeColumnGap);
		row-gap: 1.2rem;

		@media only screen and (max-width: 768px) {
			display: flex;
			flex-direction: column;
			gap: 0;
		}
	}

	.use-case {
		display: grid;
		grid-row: 1 / -1;
		grid-template-rows: subgrid;
		align-items: start;

		@media only screen and (max-width: 768px) {
			display: block;
			min-width: 0;

			&:has(+ .use-case.is-open) .meta {
				border-bottom-color: transparent;
			}
		}

		.meta {
		  --metaStartProgress: 0%;
		  --metaTopProgress: 0%;
		  --metaBottomProgress: 0%;
		  padding: 0;
		  display: flex;
		  width: calc(100% - 1rem);

		  @media only screen and (max-width: 768px) {
			position: relative;
			width: 100%;
			min-height: 2.4rem;
			align-items: center;
			gap: 0.5rem;
			padding-right: 1.6rem;
			border-bottom: 1px solid color-mix(in srgb, var(--color) 30%, transparent);

			&:is(.is-accordion .use-case.is-open *) {
				border-color: transparent;

				&::before {
					content: '';
					position: absolute;
					inset: 0;
					background: var(--color);
					mask: url("data:image/svg+xml;utf8,<svg preserveAspectRatio='none' overflow='visible' style='display: block;' width='356.5' height='49.4019' viewBox='0 0 356.5 49.4019' fill='none' xmlns='http://www.w3.org/2000/svg'><path id='Vector 115' opacity='0.3' d='M0 0.75H290.204C295.015 0.75 299.144 4.17544 300.032 8.90347L305.968 40.4985C306.856 45.2265 310.985 48.6519 315.796 48.6519H356.5' stroke='white' style='stroke:white;stroke-opacity:1;' stroke-width='1.5'/></svg>") center / 100% 100% no-repeat;
					pointer-events: none;
				}
			}
		  }
		
		  > span {
			padding-block: 0.85em 0.65em;
			font: var(--text-label-caps);
			line-height: 1;
			letter-spacing: var(--text-label-caps-letter-spacing);
			text-transform: var(--text-label-caps-transform);

			@media only screen and (max-width: 768px) {
				padding: 0;
				background: none;
				line-height: 1.5;

				&::before, &::after { display: none; }
			}
		
			&:first-child {
			  position: relative;
			  padding-inline: 1.6em 2.2em;
			  background-color: transparent;

			  @media only screen and (max-width: 768px) {
				order: 1;
				padding: 0;
				background: none;
			  }

			  &::after {
				content: "";
				position: absolute;
				inset: 0 0 0 var(--metaCurveWidth);
				background-color: var(--color);
				-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='985' height='59' fill='none' viewBox='0 0 985 59'><path stroke='white' stroke-width='1.5' d='M0 .75h952c8.284 0 15 6.716 15 15v27c0 8.284 6.716 15 15 15h43'/></svg>") right top / auto 100% no-repeat;
				mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='985' height='59' fill='none' viewBox='0 0 985 59'><path stroke='white' stroke-width='1.5' d='M0 .75h952c8.284 0 15 6.716 15 15v27c0 8.284 6.716 15 15 15h43'/></svg>") right top / auto 100% no-repeat;
				pointer-events: none;
				clip-path: inset(0 var(--metaTopProgress) 0 0);

				@media only screen and (max-width: 768px) { display: none; }
			  }
		
			  &::before {
				content: "";
				position: absolute;
				left: 0;
				top: 0;
				display: block;
				width: auto;
				height: 100%;
				aspect-ratio: 18 / 59;
				background-color: var(--color);
				-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='18' height='59' fill='none' viewBox='0 0 18 59'><path stroke='white' stroke-width='1.5' d='M.75 57.75v-42c0-8.284 6.716-15 15-15h1.5'/></svg>") left top / auto 100% no-repeat;
				mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='18' height='59' fill='none' viewBox='0 0 18 59'><path stroke='white' stroke-width='1.5' d='M.75 57.75v-42c0-8.284 6.716-15 15-15h1.5'/></svg>") left top / auto 100% no-repeat;
				pointer-events: none;
				clip-path: inset(var(--metaStartProgress) 0 0 0);

				@media only screen and (max-width: 768px) { display: none; }
			  }
			}
		
			&:last-of-type {
			  position: relative;
			  flex: 1;
			  text-align: right;

			  @media only screen and (max-width: 768px) {
				order: 0;
				flex: none;
				text-align: left;
				min-width: 3ch;
			  }

			  &::before {
				content: "";
				position: absolute;
				inset: 0;
				background-color: var(--color);
				-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='195' height='59' fill='none' viewBox='0 0 195 59'><path stroke='white' stroke-width='1.5' d='M0 57.75h195'/></svg>") left top / auto 100% repeat-x;
				mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='195' height='59' fill='none' viewBox='0 0 195 59'><path stroke='white' stroke-width='1.5' d='M0 57.75h195'/></svg>") left top / auto 100% repeat-x;
				pointer-events: none;
				clip-path: inset(0 var(--metaBottomProgress) 0 0);

				@media only screen and (max-width: 768px) { display: none; }
			  }
			}
		  }
		}

		h3 {
			margin: 0;
			font: var(--text-h4);
			max-width: 11em;

			@media only screen and (max-width: 768px) {
				order: 1;
				max-width: none;
				text-wrap: balance;
			}
		}

		.media {
			width: 100%;
			
			border-radius: var(--borderRadius-M);
			overflow: clip;
			margin-top: 1.5rem;
			margin-bottom: 0.7rem;
			font-size: 0;
			line-height: 0;

			@media only screen and (max-width: 768px) {
				order: 0;
				margin: 0.8rem 0 0.6rem;
			}

			img,
			video {
				display: block;
				width: 100%;
				height: auto;
				aspect-ratio: 595 / 625;
				object-fit: cover;

				@media only screen and (max-width: 768px) {
					aspect-ratio: 357 / 446;
					object-fit: cover;
				}
			}
		}

		.content {
			@media only screen and (max-width: 768px) {
				order: 2;
				opacity: 0.7;
			}

			p {
				font: var(--text-body-m) !important;

				@media only screen and (max-width: 768px) {
					font: var(--text-body-s) !important;
				}
			}
		}

		.cta__button {
			width: max-content;
			margin-top: 0.5rem;
			--button-textcolor: var(--color) !important;
			--button-highlight: var(--color) !important;

			@media only screen and (max-width: 768px) {
				order: 3;
				margin: 0.4rem 0 1.9rem 0;
			}
		}
	}
}

.section__video-counting-numbers {

	.innerwrapper {
		display: flex;
		flex-direction: column;
		gap: 4rem 0;

		@media only screen and (max-width: 768px) { 
			gap: 0.8rem; 
		}

		.headlines {
			@media only screen and (max-width: 768px) { gap: 0.2rem; }
		}
		
		.media__wrapper {
			font-size: 0;
			line-height: 0;
			position: relative;

			@media only screen and (max-width: 768px) {
				width: calc(100% + 2 * var(--sideSpacing));
				margin-inline: calc(-1 * var(--sideSpacing));
				min-height: 22.3rem;
				display: flex;
				flex-direction: column;
			}
			
			.numbers {
				position: absolute;
				bottom: 4rem;
				left: 0;
				width: 100%;
				display: grid;
				grid-template-columns: repeat(3,1fr);
				color: var(--colorWhite);
				padding-inline: 4rem;
				gap: 0 5rem;
				z-index: 5;

				@media only screen and (max-width: 768px) {
					position: relative;
					bottom: auto;
					grid-template-columns: minmax(0, 1fr);
					gap: 2.5rem;
					padding: 1rem 1.15rem 1rem;
					margin-block: auto;
				}
				
				.single__number {
					display: flex;
					flex-direction: column;
					align-items: center;

					@media only screen and (max-width: 768px) {
						display: grid;
						grid-template-columns: minmax(0, 5.4rem) minmax(0, 1fr);
						grid-template-rows: auto auto;
						gap: 0.2rem 1.2rem;
						align-items: start;
					}
					
					.arrow {
						font-size: 0;
						line-height: 0;
						display: block;
						width: 2rem;
						margin-bottom: 0.5rem;

						@media only screen and (max-width: 768px) {
							grid-column: 2;
							grid-row: 1;
							width: 0.6rem;
							margin-bottom: 0;
						}
						
						svg {
							width: 100%;
							height: auto;
						}
					}
					
					.label {
						font: var(--text-h6);
						display: block;
						text-align: center;

						@media only screen and (max-width: 768px) {
							grid-column: 2;
							grid-row: 2;
							font: 400 var(--fontSize19) / 1.21 var(--fontFamily);
							letter-spacing: 0.01rem;
							text-align: left;
							overflow-wrap: anywhere;
						}
					}
					
					.number {
						font-size: var(--fontSize145);
						display: block;
						text-align: center;
						line-height: 1.2;
						font-family: 'Restart Ginger';

						@media only screen and (max-width: 768px) {
							grid-column: 1;
							grid-row: 1 / span 2;
							font: 400 var(--fontSize48) / 1.15 var(--fontFamily);
							text-align: left;
							white-space: nowrap;
						}
					}
				}
			}
			
			.media {
				width: 100%;
				border-radius: var(--borderRadius-M);
				overflow: clip;
				font-size: 0;
				line-height: 0;
				position: relative;

				.media__ai-badge {
					top: 0.65rem;
					bottom: auto;
				}

				@media only screen and (max-width: 768px) {
					position: absolute;
					inset: 0;
					height: 100%;
					border-radius: 0;
				}
				
				&:before {
					content: '';
					display: block;
					position: absolute;
					inset: 0;
					z-index: 1;
					background-color: rgba(00,00,00,0.2);
					/*background-color: rgba(23,64,71,0.6);*/
				}
			
				img,
				video {
					display: block;
					width: 100%;
					height: auto;
					aspect-ratio: 1824 / 779;
					object-fit: cover;

					@media only screen and (max-width: 768px) {
						height: 100%;
						aspect-ratio: auto;
					}
				}
			}
		}
		
		
		
	}
	
	&.video-height-small {
		.media__wrapper {
			@media only screen and (max-width: 768px) {
					
			}
		}
		.media__wrapper .media {
			&::before {
				background-color: rgba(23,64,71,0.6);
			}
	
			video {
				aspect-ratio: 1824 / 605;

				@media only screen and (max-width: 768px) { aspect-ratio: auto; }
			}
		}
	}
}

.section__experiences {
	.innerwrapper {
		display: flex;
		flex-direction: column;
		gap: 3.6rem 0;

		@media only screen and (max-width: 768px) { gap: 1.6rem; }
	}

	.headlines {
		@media only screen and (max-width: 768px) { gap: 0.2rem; }
	}

	.experiences {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--threeColumnGap);

		@media only screen and (max-width: 768px) {
			grid-template-columns: none;
			grid-auto-flow: column;
			grid-auto-columns: min(14.35rem, calc(100% - 1rem));
			gap: 0.6rem;
			width: calc(100% + 2 * var(--sideSpacing));
			margin-inline: calc(-1 * var(--sideSpacing));
			padding-inline: var(--sideSpacing);
			overflow-x: auto;
			scroll-snap-type: none;
			overscroll-behavior-x: contain;
			scrollbar-width: none;

			&::-webkit-scrollbar { display: none; }
		}
	}

	.experience {
		min-width: 0;
		padding: 0.9rem 0.9rem 1.6rem 0.9rem;
		background-color: var(--colorWarmGrey);
		border-radius: var(--borderRadius-M);
		overflow: clip;
		display: grid;
		grid-template-columns: 6.7rem 1fr;
		gap: 0 1.1rem;
		grid-template-rows: 4.2rem 1fr auto;

		@media only screen and (max-width: 768px) {
			padding: 0.9rem 1rem;
			min-height: 18.75rem;
			grid-template-columns: 2.6rem minmax(0, 1fr);
			grid-template-rows: 2.85rem 1fr auto;
			column-gap: 0.7rem;
			border-radius: 0.4rem;
		}

		.logo {
			--logoBaseHeight: 2.7rem;
			--base-ratio: calc(var(--width) / var(--height));
			--factor-horizontal: min(calc(var(--base-ratio) * -0.1 + 1.1), 1);

			grid-column: 1 / -1;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			border-bottom: 1.5px solid var(--colorPetrol);

			&.has-motion-divider {
				--dividerProgress: 1;
				position: relative;
				border-bottom-color: transparent;

				&::after {
					content: '';
					position: absolute;
					inset: auto 0 -1.5px;
					height: 1.5px;
					background: var(--colorPetrol);
					transform: scaleX(var(--dividerProgress));
					transform-origin: left center;
					pointer-events: none;
				}
			}

			@media only screen and (max-width: 768px) {
				--logoBaseHeight: 2rem;
				justify-content: flex-start;
				border-bottom-color: color-mix(in srgb, var(--colorPetrol) 20%, transparent);

				&.has-motion-divider {
					border-bottom-color: transparent;

					&::after {
						background: color-mix(in srgb, var(--colorPetrol) 20%, transparent);
					}
				}
			}

			img {
				display: block;
				height: max(calc(var(--logoBaseHeight) / 2), calc(var(--logoBaseHeight) * var(--factor-horizontal)));
				aspect-ratio: var(--base-ratio);
				object-fit: contain;
				transform: scale(var(--logoScale, 1));
				transform-origin: right center;
				filter: grayscale(1) saturate(0) opacity(0.55);
				width: auto;
			}

			&[data-logo="drees-sommer"] {
				overflow: clip;

				img {
					object-fit: cover;
				}
			}

		}

		.portrait {
			grid-column: 1;
			grid-row: 2;
			width: calc(100% - 0.8rem);
			aspect-ratio: 1;
			margin-top: 1rem;
			border-radius: var(--borderRadius-M);
			overflow: clip;
			margin-left: 0.8rem;

			@media only screen and (max-width: 768px) {
				grid-row: 3;
				width: 2.6rem;
				margin: 0;
				align-self: start;
				border-radius: 0.4rem;
			}

			img {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		.quote {
			min-width: 0;
			grid-column: 2;
			grid-row: 2;
			padding: 0;
			margin-top: 1rem;
			margin-bottom: 2rem;

			@media only screen and (max-width: 768px) {
				grid-column: 1 / -1;
				margin: 0.8rem 0 1.3rem;
				padding-bottom: 1.15rem;
				border-bottom: 1.5px solid var(--colorWhite);
			}

			p {
				font: var(--text-body-m) !important;
				max-width: 13em;

				@media only screen and (max-width: 768px) {
					font: 400 var(--fontSize17) / 1.353 var(--fontFamily) !important;
					letter-spacing: 0.01rem;
					max-width: none;
				}
			}
		}

		.person {
			grid-column: 2;
			grid-row: 3;
			padding: 0;
			border-top: 1.5px solid var(--colorWhite);
			padding-top: 0.6rem;
			display: flex;
			flex-direction: column;
			gap: 0.2rem;

			@media only screen and (max-width: 768px) {
				border-top: 0;
				padding-top: 0;
			}

			p {
				font: var(--text-body-s) !important;
				margin-block: 0;

				@media only screen and (max-width: 768px) {
					font: 400 var(--fontSize15) / 1.4 var(--fontFamily) !important;
				}

				&:last-child {
					opacity: 0.6;

					@media only screen and (max-width: 768px) {
						font: 400 var(--fontSize13) / 1.5 var(--fontFamily) !important;
						opacity: 0.7;
					}
				}
			}
		}
	}
}

.section__headline-buttons {
	position: relative;
	overflow: clip;

	.innerwrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 4rem;

		@media only screen and (max-width: 768px) {
			flex-direction: column;
			align-items: stretch;
			gap: 1.2rem;
		}
	}

	&.reversed {
		.innerwrapper {
			flex-direction: row-reverse;

			@media only screen and (max-width: 768px) {
				flex-direction: column;
			}
		}
	}

	h3 {
		max-width: 15.5em;
		margin: 0.4em 0;
		font: var(--text-h3);

		@media only screen and (max-width: 768px) {
			max-width: none;
			margin: 0;
			font: var(--text-h2);
			letter-spacing: -0.01rem;
		}
	}

	.buttons {
		display: flex;
		align-items: center;
		gap: var(--threeColumnGap);
		flex: 0 0 auto;

		@media only screen and (max-width: 768px) {
			width: 100%;
			flex-direction: column;
			align-items: stretch;
			gap: 0.6rem;
		}

		.cta__button {
			@media only screen and (max-width: 768px) {
				width: 100%;
			}
		}
	}
}

.section__newsletter {
	overflow: clip;

	.innerwrapper {
		display: grid;
		grid-template-columns: 37rem 1fr;
		align-items: start;
		gap: 3.5rem 8.2rem;

		@media only screen and (max-width: 768px) {
			grid-template-columns: minmax(0, 1fr);
			gap: 1rem;
		}
		
		.headlines {
			gap: 1.6rem 0;

			@media only screen and (max-width: 768px) {
				gap: 0.15rem;
			}
			
			h1,
			h2 {
				font: var(--text-h3);

				@media only screen and (max-width: 768px) {
					font: var(--text-h2);
				}
			}
		}
	}
	.newsletter-form {
	}

	.newsletter-form,
	.wpcf7,
	.wpcf7-form {
		min-width: 0;
	}

	.newsletter-form__fields {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-rows: auto auto;
		column-gap: 0.6rem;
		row-gap: 2.3rem;

		@media only screen and (max-width: 768px) {
			column-gap: 0.4rem;
			row-gap: 0.65rem;
		}
	}

	.newsletter-form__email-field {
		grid-column: 1;
		grid-row: 1;
		min-width: 0;

		.wpcf7-form-control-wrap {
			display: block;
			min-width: 0;
		}
	}

	.newsletter-form__email,
	.newsletter-form__submit {
		box-sizing: border-box;
		height: 6.5rem;
		border-radius: var(--borderRadius-M);
		font: var(--text-button-l);

		@media only screen and (max-width: 768px) {
			height: 3.5rem;
		}
	}

	.newsletter-form__email {
		width: 100%;
		padding: 0 2rem;
		border: 0.15rem solid currentColor;
		outline: 0;
		background: transparent;
		color: inherit;
		border-radius: var(--borderRadius-M) !important;

		@media only screen and (max-width: 768px) {
			padding-inline: 0.8rem;
			font: var(--text-body-s);
			border: 0.1rem solid currentColor;
		}

		&::placeholder {
			color: color-mix(in srgb, currentColor 45%, transparent);
			opacity: 1;
		}

		&:focus-visible {
			
		}

		&.wpcf7-not-valid {
			/*border-color: #e32636;*/
		}
	}

	.newsletter-form__submit-field {
		grid-column: 2;
		grid-row: 1;
	}

	.newsletter-form__submit {
		min-width: 15.8rem;
		padding: 0 6rem 0 3rem;
		border: 0;
		background-color: var(--colorNeon);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='39' height='33' fill='none' viewBox='0 0 39 33'%3E%3Cpath stroke='%23154047' stroke-width='2.5' d='M0 16.5h36M22 1l15 15.5L22 32'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 2.5rem center;
		background-size: 2rem auto;
		color: var(--colorPetrol);
		cursor: pointer;

		@media only screen and (max-width: 768px) {
			min-width: 6.5rem;
			padding: 0 2.3rem 0 0.8rem;
			background-position: right 0.8rem center;
			background-size: 1rem auto;
		}
		transition: filter 0.2s ease, transform 0.2s ease;
		border-radius: var(--borderRadius-M) !important;
		cursor: pointer;

		&:focus-visible {
			outline: 0.15rem solid currentColor;
			outline-offset: 0.15rem;
		}
	}

	.newsletter-form__consent {
		grid-column: 1 / -1;
		grid-row: 2;
		font: var(--text-body-m);

		@media only screen and (max-width: 768px) {
			font: 400 var(--fontSize13) / 1.3 var(--fontFamily);
			margin-top: 0.4rem;
		}

		.wpcf7-list-item {
			margin: 0;
		}

		label {
			display: grid;
			grid-template-columns: 2rem minmax(0, 1fr);
			align-items: start;
			gap: 1rem;
			cursor: pointer;

			@media only screen and (max-width: 768px) {
				grid-template-columns: 1.3rem minmax(0, 1fr);
				gap: 0.5rem;
			}
			
			> span {
				max-width: 25em;
			}
		}

		input[type="checkbox"] {
			appearance: none;
			width: 2rem;
			height: 2rem;
			margin: 0.15rem 0 0;
			border: 0.15rem solid var(--colorWhite);
			border-radius: var(--borderRadius-S);
			background-color: var(--colorWhite);
			cursor: pointer;

			@media only screen and (max-width: 768px) {
				width: 1.3rem;
				height: 1.3rem;
				margin-top: 0.1rem;
				border-width: 0.075rem;
			}

			&:checked {
				background-color: var(--colorPetrol);
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' fill='none' viewBox='0 0 16 12'%3E%3Cpath stroke='%23fff' stroke-width='2' d='m1 5.5 4.5 4.5L15 1'/%3E%3C/svg%3E");
				background-repeat: no-repeat;
				background-position: center;
				background-size: 1rem auto;
				border-color: var(--colorPetrol);
			}

			&:focus-visible {

			}
		}

		a {
			color: inherit;
		}
	}

	.wpcf7-spinner {
		position: absolute;
	}

	.wpcf7-not-valid-tip {
		display: none;
	}

	.wpcf7-response-output {
		font: var(--text-button-xs);
		display: inline-block;
		padding: 0.3em 1em !important;
		border-radius: var(--borderRadius-M);
		margin: 2rem 0 0 0 !important;
		/* padding: 0 !important; */
		border: 0 !important;
		background-color: var(--colorNeon);
	}
}

.section__faq {
	.innerwrapper {
		display: flex;
		flex-direction: column;
		gap: 4.2rem;

		@media only screen and (max-width: 768px) {
			gap: 1.6rem;
		}
	}

	.faqs {
		display: flex;
		flex-direction: column;
		gap: 2.07rem;
		padding-inline: var(--innerPadding);

		@media only screen and (max-width: 768px) {
			gap: 0.6rem;
			padding-inline: 0;
		}
	}

	details {
		--faqBackground: var(--colorWhite);
		--faqBorder: color-mix(in srgb, var(--colorPetrol) 30%, transparent);
		position: relative;
		isolation: isolate;

		@media only screen and (max-width: 768px) {
			border-bottom: 0;
		}

		&::before,
		&::after {
			content: '';
			position: absolute;
			inset: 0;
			z-index: -2;
			border-radius: var(--borderRadius-M);
			background: var(--faqBorder);
			pointer-events: none;
			-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1515' height='1782' fill='none' viewBox='0 0 1515 1782'%3E%3Cpath fill='%23000' d='M0 15v1752c0 8.29 6.716 15 15 15h1485c8.28 0 15-6.72 15-15V72.4c0-8.284-6.72-15-15-15l-58.17.002c-5.97 0-11.37-3.54-13.75-9.015l-17.14-39.372A14.99 14.99 0 0 0 1397.19 0H15C6.716 0 0 6.718 0 15'/%3E%3C/svg%3E");
			-webkit-mask-repeat: no-repeat;
			-webkit-mask-size: 100% auto;
			-webkit-mask-position: center top;
			mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1515' height='1782' fill='none' viewBox='0 0 1515 1782'%3E%3Cpath fill='%23000' d='M0 15v1752c0 8.29 6.716 15 15 15h1485c8.28 0 15-6.72 15-15V72.4c0-8.284-6.72-15-15-15l-58.17.002c-5.97 0-11.37-3.54-13.75-9.015l-17.14-39.372A14.99 14.99 0 0 0 1397.19 0H15C6.716 0 0 6.718 0 15'/%3E%3C/svg%3E");
			mask-repeat: no-repeat;
			mask-size: 100% auto;
			mask-position: center top;

			@media only screen and (max-width: 768px) {
				display: block;
				-webkit-mask-image: url("data:image/svg+xml;utf8,<svg width='352' height='1324' viewBox='0 0 352 1324' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0.00238843 9.999L0.00000635949 29.4746L0.00349514 1314C0.00352517 1319.52 4.4807 1324 10.0035 1324L342 1324C347.523 1324 352 1319.52 352 1314L351.997 59C351.997 53.4772 347.52 49 341.997 49L294.956 49.0004C290.185 49.0004 286.079 45.6306 285.148 40.9518L278.601 8.04859C277.67 3.36975 273.564 0.000000772317 268.794 0.000000355263L10.0024 0.000221872C4.48002 0.000221389 0.0030603 4.47666 0.00238843 9.999Z' fill='%23090909'/></svg>");
				mask-image: url("data:image/svg+xml;utf8,<svg width='352' height='1324' viewBox='0 0 352 1324' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0.00238843 9.999L0.00000635949 29.4746L0.00349514 1314C0.00352517 1319.52 4.4807 1324 10.0035 1324L342 1324C347.523 1324 352 1319.52 352 1314L351.997 59C351.997 53.4772 347.52 49 341.997 49L294.956 49.0004C290.185 49.0004 286.079 45.6306 285.148 40.9518L278.601 8.04859C277.67 3.36975 273.564 0.000000772317 268.794 0.000000355263L10.0024 0.000221872C4.48002 0.000221389 0.0030603 4.47666 0.00238843 9.999Z' fill='%23090909'/></svg>");
				mask-size: 100% auto;
				-webkit-mask-size: 100% auto;
			}
		}

		&::after {
			inset: 1px;
			z-index: -1;
			background: var(--faqBackground);
		}

		&[open] {
			--faqBackground: var(--colorWarmGrey);
			--faqBorder: var(--colorWarmGrey);

			@media only screen and (max-width: 768px) {
				margin-bottom: 0;
				border-bottom: 0;
				background: transparent;
			}
		}
	}

	summary {
		position: relative;
		padding: 2.4rem 3rem 2.4rem 3rem;
		font: var(--text-h4);
		list-style: none;
		cursor: pointer;

		@media only screen and (max-width: 768px) {
			min-height: 4rem;
			padding: 1rem 4.8rem 1rem 1rem;
			font: var(--text-h4);
		}

		&::-webkit-details-marker {
			display: none;
		}

		&::before,
		&::after {
			content: '';
			position: absolute;
			top: 0;
			right: 1rem;
			width: 2rem;
			height: 2rem;
			transition: opacity 240ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
		}

		@media only screen and (max-width: 768px) {
			&::before,
			&::after {
				top: 0.4rem;
				right: 1rem;
				width: 1.3rem;
				height: 1.3rem;
			}
		}

		&::after {
			background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='41' height='41' fill='none' viewBox='0 0 41 41'%3E%3Cpath d='M0 20.3945h40.789M20.3945 0v40.789' stroke='%23154047' stroke-width='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
		}

		&::before {
			opacity: 0;
			transform: rotate(-45deg) scale(0.8);
			background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='39' height='39' fill='none' viewBox='0 0 39 39'%3E%3Cpath stroke='%23154047' stroke-width='2.5' d='m.884.884 37.21 37.21M38.095.884.884 38.094'/%3E%3C/svg%3E") center / contain no-repeat;
		}

		&:focus-visible {
			outline: 0.15rem solid var(--colorElectricBlue);
			outline-offset: -0.3rem;
		}
	}

	details[open] summary {
		padding-bottom: 0.9rem;

		@media only screen and (max-width: 768px) {
			min-height: 0;
			padding: 1rem 4.8rem 1rem 1rem;

			&::before,
			&::after {
				right: 1rem;
			}
		}
	}

	details[data-faq-open] summary {
		&::after {
			opacity: 0;
			transform: rotate(45deg) scale(0.8);
		}

		&::before {
			opacity: 1;
			transform: rotate(0) scale(1);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		summary::before,
		summary::after {
			transition: none;
		}
	}

	.content {
		padding: 1.6rem 3rem 3.2rem 3rem;

		@media only screen and (max-width: 768px) {
			padding: 0 1rem 1rem;
			
		}

		p {
			font: var(--text-body-m);
			max-width: 42em;

			@media only screen and (max-width: 768px) {
				font: var(--text-body-s);
				opacity: 0.7;
			}
		}
	}
}

.section__folder-slider {
	.teaser__folder {
		@media (hover: hover) and (pointer: fine) {
			.media img,
			.media video {
				transition: transform 240ms var(--motionEaseOut);
			}

			&:hover .media img,
			&:hover .media video {
				transform: scale(1.05);
			}

			.folder-content {
				transition: transform 140ms var(--motionEaseOut);
			}

			.read-more {
				transition: transform 240ms var(--motionEaseOut);
			}


			&:active .folder-content {
				transform: scale(0.99);
			}
		}
	}

	.innerwrapper {
		display: flex;
		flex-direction: column;
		gap: 5.4rem 0;

		@media only screen and (max-width: 768px) {
			gap: 1.6rem;
		}
	}

	.head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 4rem;

		@media only screen and (max-width: 768px) {
			align-items: flex-end;
			gap: 0.6rem;
		}

		h2 {
			margin: 0;
			font: var(--text-h2);
		}

		.cta__link {
			@media only screen and (max-width: 768px) {
				flex: 0 0 auto;
				gap: 0.6rem;
				font: 400 var(--fontSize18) / 1.333 var(--fontFamily);
			}

			&::after {
				@media only screen and (max-width: 768px) {
					width: 1.2rem;
				}
			}
		}
	}

	.viewport {
		overflow: hidden;
		width: 100%;

		@media only screen and (max-width: 768px) {
			width: calc(100% + 2 * var(--sideSpacing));
			margin-inline: calc(-1 * var(--sideSpacing));
			padding-inline: 0.6rem;
			overflow-x: auto;
			scroll-snap-type: none;
			scrollbar-width: none;
		}

		&::-webkit-scrollbar {
			@media only screen and (max-width: 768px) {
				display: none;
			}
		}
		
		/*
		width: calc(100% + var(--sideSpacing) + var(--sideSpacing));
		margin-inline: calc(var(--sideSpacing) * -1);
		padding-inline: var(--sideSpacing);
		position: relative;
		*/
		
		/*
		&::before {
			content: '';
			display: block;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1;
			height: 100%;
			width: var(--sideSpacing);
			background: linear-gradient(90deg, var(--backgroundColor) 50%, transparent 100%);
			pointer-events: none;
		}
		
		&::after {
			content: '';
			display: block;
			position: absolute;
			right: 0;
			top: 0;
			z-index: 1;
			height: 100%;
			width: var(--sideSpacing);
			background: linear-gradient(90deg, transparent 0%, var(--backgroundColor) 50%);
			pointer-events: none;
		}
		*/
	}

	.container {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: calc((100% - (2 * var(--threeColumnGap))) / 3);
		grid-template-rows: repeat(6, auto);
		column-gap: var(--threeColumnGap);
		row-gap: 0;

		@media only screen and (max-width: 768px) {
			grid-auto-columns: min(14.4rem, calc(100vw - 2.4rem));
			column-gap: 0.6rem;
		}
	}

	.teaser__folder {
		min-width: 0;
		grid-row: 1 / span 6;
		grid-template-rows: subgrid;

		@media only screen and (max-width: 768px) {
			--paddingSide: 0.9rem;
			border-radius: 0.3rem;
		}

		> .label {
			grid-row: 1;

			@media only screen and (max-width: 768px) {
				min-width: 0;
				height: auto;
				padding-top: 0.8rem;
				font: 400 var(--fontSize12) / 1.5 var(--fontFamily);
				letter-spacing: 0.125rem;
				opacity: 0.7;
			}
		}

		> .folder-content {
			grid-row: 2 / span 5;
			display: grid;
			grid-template-rows: subgrid;

			@media only screen and (max-width: 768px) {
				padding-top: 0.8rem;
				padding-bottom: 0.6rem;
			}

			h3,
			h2 {
				grid-row: 1;

				@media only screen and (max-width: 768px) {
					font: 400 var(--fontSize22) / 1.227 var(--fontFamily);
					text-wrap: initial;
				}
			}

			.media {
				grid-row: 2;

				@media only screen and (max-width: 768px) {
					margin-top: 1.2rem;
					aspect-ratio: 252 / 181;
					border-radius: 0.3rem;
				}
			}

			.date {
				grid-row: 3;

				@media only screen and (max-width: 768px) {
					margin-top: 0.8rem;
					font: 400 var(--fontSize13) / 1.308 var(--fontFamily);
					letter-spacing: 0.015rem;
					text-transform: none;
					opacity: 0.7;
				}
			}

			.content {
				grid-row: 4;

				@media only screen and (max-width: 768px) {
					margin-top: 0.5rem;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 4;
					overflow: hidden;
					max-height: 4.6rem;
					font: 400 var(--fontSize17) / 1.353 var(--fontFamily);
					letter-spacing: 0.01rem;
				}

				p {
					@media only screen and (max-width: 768px) {
						font: inherit;
					}
				}
			}

			.read-more {
				grid-row: 5;

				@media only screen and (max-width: 768px) {
					padding-top: 1.5rem;
					font: 400 var(--fontSize17) / 1.353 var(--fontFamily);
				}
			}
		}

		&.summary-link > .folder-content {
			display: flex;

			.cta__link {
				@media only screen and (max-width: 768px) {
					gap: 0.6rem;
					font: 400 var(--fontSize22) / 1.227 var(--fontFamily);
				}

				&::after {
					@media only screen and (max-width: 768px) {
						flex: 0 0 1.2rem;
						width: 1.2rem;
					}
				}
			}
		}
	}

	.steps {
		margin-top: 4rem;
		display: flex;
		justify-content: center;
		gap: 2.2rem;

		@media only screen and (max-width: 768px) {
			display: none;
		}

		button {
			width: var(--sliderStepWidth);
			height: 0.3rem;
			padding: 0;
			border: 0;
			border-radius: 999px;
			background: var(--colorWarmGrey);
			cursor: pointer;

			&.is-active {
				background: linear-gradient(90deg, var(--colorElectricBlue), var(--colorNeon), var(--colorElectricBlue));
			}

			&:focus-visible {
				outline: 0.15rem solid var(--colorPetrol);
				outline-offset: 0.25rem;
			}
		}
	}
}

.section__resources-detail {
	.innerwrapper {
		display: flex;
		flex-direction: column;
		gap: 4.7rem;
		
		@media only screen and (max-width: 768px) {
			gap: 1.9rem;	
		}
	}


	.resources-grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: var(--threeColumnGap);
		row-gap: 0;
		
		@media only screen and (max-width: 768px) {
			display: flex;
			gap: 1rem;
			flex-direction: column;	
		}

		.teaser__folder {
			grid-row: span 6;
			grid-template-rows: subgrid;
			margin-bottom: 2.9rem;
			
			@media only screen and (max-width: 768px) {
				grid-row: unset;
				grid-template-rows: unset;	
				margin-bottom: 0;
			}
		}

		.label {
			grid-row: 1;
			
			@media only screen and (max-width: 768px) {
				grid-row: unset;
				font: 400 var(--fontSize12) / 1.5 var(--fontFamily);
				letter-spacing: 0.125rem;
				opacity: 0.7;
			}
		}

		.folder-content {
			grid-row: 2 / span 5;
			display: grid;
			grid-template-rows: subgrid;
			
			@media only screen and (max-width: 768px) {
				grid-row: unset;
				grid-template-rows: unset;	
				display: flex;
				flex-direction: column;
			}

			h3,
			h2 {
				grid-row: 1;
				
				@media only screen and (max-width: 768px) {
					grid-row: unset;
					font: 400 var(--fontSize22) / 1.227 var(--fontFamily);
					text-wrap: initial;
				}
			}

			.media {
				grid-row: 2;
				
				@media only screen and (max-width: 768px) {
					grid-row: unset;
				}
			}

			.date {
				grid-row: 3;
				
				@media only screen and (max-width: 768px) {
					grid-row: unset;
					font: 400 var(--fontSize13) / 1.308 var(--fontFamily);
					letter-spacing: 0.015rem;
					text-transform: none;
					opacity: 0.7;
				}
			}

			.content {
				grid-row: 4;
				
				@media only screen and (max-width: 768px) {
					grid-row: unset;
					font: 400 var(--fontSize17) / 1.353 var(--fontFamily);
					letter-spacing: 0.01rem;
				}

				p {
					@media only screen and (max-width: 768px) {
						font: inherit;
					}
				}
			}

			.read-more {
				grid-row: 5;
				
				@media only screen and (max-width: 768px) {
					grid-row: unset;
					font: 400 var(--fontSize17) / 1.353 var(--fontFamily);
				}
			}
		}
	}

	/*
	.teaser__folder {
		min-height: 42.85rem;

		.folder-content {
			h2 {
				max-width: 6em;
				margin: 0;
				font: var(--text-h4);
			}

			.media {
				position: relative;

				&.branded .brand {
					position: absolute;
					inset: 0;
					width: 54%;
					height: auto;
					margin: auto;
					object-fit: contain;
				}
			}
		}
	}
	*/

	.pagination {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.6rem;
		padding-top: 3.9rem;
		
		@media only screen and (max-width: 768px) {
			gap: 0.6rem;
			padding-top: 0.3rem;
		}

		a,
		span {
			width: 3.8rem;
			height: auto;
			aspect-ratio: 1/1;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			border-radius: var(--borderRadius-S);
			color: inherit;
			font: var(--text-h4);
			text-decoration: none;

			@media only screen and (max-width: 768px) {
				width: 1.5rem;
				height: auto;
				aspect-ratio: 1/1;;
				font: 400 var(--fontSize19) / 1.21 var(--fontFamily);
			}
		}

		:where(a:not(.previous):not(.next), span) + :where(a:not(.previous):not(.next), span) {
			@media only screen and (max-width: 768px) {
				/*margin-left: 1.85rem;*/
			}
		}
		
		a {
			
			@media (hover: hover) {
				&:not(.next):not(.previous):not(.is-active):hover {
					background-color: var(--colorWarmGrey);
				}	
			}
		}

		.is-active {
			background: var(--colorNeon);

		}

		.previous,
		.next {
			width: 3rem;

			@media only screen and (max-width: 768px) {
				width: 1.088rem;
			}

			&::before {
				content: '';
				width: 1.95rem;
				aspect-ratio: 41 / 29;
				background-color: currentColor;
				mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='41' height='29' fill='none' viewBox='0 0 41 29'%3E%3Cpath stroke='%23000' stroke-miterlimit='10' stroke-width='2.925' d='m.005 14.165 38.643.134M26.234 1.066l11.893 11.168a2.704 2.704 0 0 1 0 3.989L26.234 27.391'/%3E%3C/svg%3E") center / contain no-repeat;

				@media only screen and (max-width: 768px) {
					width: 1.088rem;
				}
			}
		}

		.previous {
			@media only screen and (max-width: 768px) {
				margin-right: 0.8rem;
			}
		}

		.next {
			@media only screen and (max-width: 768px) {
				margin-left: 0.8rem;
			}
		}

		.previous::before {
			transform: rotate(180deg);
		}
	}
}

.section__keep-reading {
	.innerwrapper {
		display: flex;
		flex-direction: column;
		gap: 5.4rem;

		@media only screen and (max-width: 768px) {
			gap: 1.6rem;
		}
	}

	h2 {
		margin: 0;
	}

	.keep-reading-viewport {
		width: 100%;

		@media only screen and (max-width: 768px) {
			width: calc(100% + 2 * var(--sideSpacing));
			margin-inline: calc(-1 * var(--sideSpacing));
			padding-inline: 0.6rem;
			overflow-x: auto;
			overflow-y: hidden;
			scroll-snap-type: none;
			scrollbar-width: none;
		}

		&::-webkit-scrollbar {
			@media only screen and (max-width: 768px) {
				display: none;
			}
		}
	}

	.keep-reading-grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-rows: repeat(6, auto);
		column-gap: var(--threeColumnGap);
		row-gap: 0;

		@media only screen and (max-width: 768px) {
			grid-template-columns: none;
			grid-auto-flow: column;
			grid-auto-columns: min(14.4rem, calc(100vw - 2.4rem));
			column-gap: 0.6rem;
		}
	}

	.teaser__folder {
		--folderBackground: var(--colorWhite);
		grid-row: span 6;
		grid-template-rows: subgrid;

		@media only screen and (max-width: 768px) {
			--paddingSide: 0.9rem;
			grid-row: 1 / span 6;
			border-radius: 0.3rem;
		}
	}

	.label {
		grid-row: 1;

		@media only screen and (max-width: 768px) {
			min-width: 0;
			height: auto;
			padding-top: 0.8rem;
			font: 400 var(--fontSize12) / 1.5 var(--fontFamily);
			letter-spacing: 0.125rem;
			opacity: 0.7;
		}
	}

	.folder-content {
		grid-row: 2 / span 5;
		display: grid;
		grid-template-rows: subgrid;

		@media only screen and (max-width: 768px) {
			padding-top: 0.8rem;
			padding-bottom: 0.6rem;
		}

		h3,
		h2 {
			grid-row: 1;

			@media only screen and (max-width: 768px) {
				font: 400 var(--fontSize22) / 1.227 var(--fontFamily);
				text-wrap: initial;
			}
		}

		.media {
			grid-row: 2;

			@media only screen and (max-width: 768px) {
				margin-top: 1.2rem;
				aspect-ratio: 252 / 181;
				border-radius: 0.3rem;
			}
		}

		.date {
			grid-row: 3;

			@media only screen and (max-width: 768px) {
				margin-top: 0.8rem;
				font: 400 var(--fontSize13) / 1.308 var(--fontFamily);
				letter-spacing: 0.015rem;
				text-transform: none;
				opacity: 0.7;
			}
		}

		.content {
			grid-row: 4;

			@media only screen and (max-width: 768px) {
				margin-top: 0.5rem;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 4;
				overflow: hidden;
				max-height: 4.6rem;
				font: 400 var(--fontSize17) / 1.353 var(--fontFamily);
				letter-spacing: 0.01rem;
			}

			p {
				@media only screen and (max-width: 768px) {
					font: inherit;
				}
			}
		}

		.read-more {
			grid-row: 5;

			@media only screen and (max-width: 768px) {
				padding-top: 1.5rem;
				font: 400 var(--fontSize17) / 1.353 var(--fontFamily);
			}
		}
	}
}

.section__share {
	.innerwrapper {
		display: flex;
		align-items: center;

	}

	.share-label {
		width: 7.65rem;
		height: 2.8rem;
		border-radius: var(--borderRadius-S);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: var(--colorWarmGrey);
		font: var(--text-button-s);
		text-transform: uppercase;

		@media only screen and (max-width: 768px) {
			width: 5.2rem;
			height: 2rem;
			border-radius: 0.3rem;
			font: 500 var(--fontSize13) / 1 var(--fontFamily);
			letter-spacing: 0.03em;
		}
	}

	.share-links {
		display: flex;
		align-items: center;
		gap: 0.25rem;
		margin-left: 1.3rem;

		@media only screen and (max-width: 768px) {
			gap: 0.15rem;
			margin-left: 0.4rem;
		}

		a {
			display: block;
			width: 3rem;
			height: 3rem;
			border-radius: var(--borderRadius-M);
			transition: transform 200ms ease, filter 200ms ease;

			@media only screen and (max-width: 768px) {
				width: 2rem;
				height: 2rem;
				border-radius: 0.3rem;
			}

			&:hover {
				filter: brightness(0.97);
				transform: translateY(-0.08rem);
			}

			&:focus-visible {
				outline: 0.15rem solid var(--colorPetrol);
				outline-offset: 0.15rem;
			}

			svg {
				display: block;
				width: 100%;
				height: 100%;
			}
		}
	}
}

.section__workflows-scroll-animation {
	position: relative;
	overflow: clip;
	
	@media only screen and (max-width: 768px) {
		z-index: 994;
	}
	
	.innerwrapper {
		display: grid;
		min-height: 100svh;
		place-items: center;

		@media only screen and (max-width: 768px) {
			display: grid;
			min-height: 100svh;
			padding-block: 1rem;
			place-items: center;
		}
	}

	.workflow-comparison {
		position: relative;
		width: 100%;
		height: min(58rem, calc(100svh - 5rem));
		min-height: 38rem;
		color: var(--colorPetrol);

		@media only screen and (max-width: 768px) {
			height: calc(100svh - 2rem);
			min-height: 30rem;
		}
	}

	.workflow-comparison__steps {
		position: relative;
		width: 100%;
		height: 100%;

		@media only screen and (max-width: 768px) {
			display: block;
			height: 100%;
		}
	}

	.workflow-comparison__step {
		position: absolute;
		inset: 0;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(20rem, 30rem) minmax(0, 1fr);
		gap: 5.5rem;
		opacity: 0;
		visibility: hidden;

		&:first-child,
		&.is-active {
			opacity: 1;
			visibility: visible;
		}

		@media only screen and (max-width: 768px) {
			position: absolute;
			inset: 0;
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: 13rem auto minmax(0, 1fr);
			gap: 1rem;
			padding: 0 0 1rem;
			align-items: center;
			
			> .workflow-comparison__content {
				margin-bottom: auto;
			}

			> .workflow-comparison__content,
			> .workflow-comparison__animation,
			> .workflow-comparison__animation-background {
				grid-column: 1 !important;
			}

			&:not(:first-child) {
				padding-top: 0;
				border-top: 0;
			}
		}
	}

	.workflow-comparison__content {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		padding: 15rem 0 4rem;
		-webkit-mask-image: linear-gradient(to bottom, transparent 30%, rgba(0, 0, 0, 0.12) 32%, #000 38%, #000 calc(100% - 3rem), rgba(0, 0, 0, 0.12) calc(100% - 1rem), transparent 100%);
		mask-image: linear-gradient(to bottom, transparent 30%, rgba(0, 0, 0, 0.12) 32%, #000 38%, #000 calc(100% - 3rem), rgba(0, 0, 0, 0.12) calc(100% - 1rem), transparent 100%);

		&.workflow-comparison__content--traditional {
			grid-column: 1;
		}

		&.workflow-comparison__content--factorymaker {
			grid-column: 3;
		}

		@media only screen and (max-width: 768px) {
			grid-column: 1;
			grid-row: 1;
			align-self: end;
			padding: 0;
			-webkit-mask-image: none;
			mask-image: none;

			&.workflow-comparison__content--factorymaker {
				opacity: 0;
				visibility: hidden;
			}
		}
	}

	.workflow-comparison__labels {
		position: absolute;
		top: 2rem;
		left: 0;
		right: 0;
		z-index: 3;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(20rem, 30rem) minmax(0, 1fr);
		gap: 5.5rem;
		pointer-events: none;
		@media only screen and (max-width: 768px) {
			display: none;
		}
	}

	.workflow-comparison__label {
		justify-self: start;
		align-self: start;
		display: inline-block;
		padding: 0.3em 0.6em;
		border-radius: var(--borderRadius-M);
		background: color-mix(in srgb, var(--colorWhite) 58%, transparent);
		font-size: var(--fontSize70);
		line-height: 1;
		font-family: var(--fontFamily);

		&.workflow-comparison__label--traditional {
			grid-column: 1;
		}

		&.workflow-comparison__label--factorymaker {
			grid-column: 3;
		}

		@media only screen and (max-width: 768px) {
			display: none;
		}
	}

	.workflow-comparison__mobile-label {
		display: none;

		@media only screen and (max-width: 768px) {
			display: block;
			width: 100%;
			margin-bottom: 1rem;
			padding: 0.55rem 0.8rem;
			border-radius: var(--borderRadius-M);
			background: color-mix(in srgb, var(--colorWhite) 30%, transparent);
			font: var(--text-h2);
			text-align: center;
			line-height: 1.05;
			
			br {
				display: none;
			}
		}
	}

	.workflow-comparison__copy {
		h2 {
			margin: 0 0 1.5rem;
			font-size: calc(2.75rem * var(--typographyScale));
		}

		p {
			margin: 0;
			font: 400 var(--fontSize36) / 1.3 var(--fontFamily);

			@media only screen and (max-width: 768px) {
				font: var(--text-body-s);
			}
		}

		@media only screen and (max-width: 768px) {
			margin-top: 1rem;
			padding-inline: 0.5rem;

			h2 {
				margin-bottom: 0.75rem;
				font: var(--text-h4);
				
				br {
					display: none;
				}
			}
		}
	}

	.workflow-comparison__animation {
		position: absolute;
		top: calc(50% - 15rem);
		left: 50%;
		z-index: 1;
		width: min(100%, 30rem);
		aspect-ratio: 1;
		overflow: hidden;
		border-radius: 2.5rem;
		background: transparent;
		translate: -50% 0;

		img,
		video,
		svg,
		canvas {
			display: block;
			width: 100%;
			height: 100%;
			margin: 0 auto auto auto;
			object-fit: contain;
		}

		&.workflow-comparison__animation--factorymaker {
			opacity: 0;
			visibility: hidden;
		}

		@media only screen and (max-width: 768px) {
			position: relative;
			top: auto;
			left: auto;
			grid-column: 1;
			grid-row: 2;
			width: 100%;
			max-width: min(16rem, 38svh);
			margin: 0 auto;
			border-radius: 1.5rem;
			background: transparent;
			translate: none;

			&.workflow-comparison__animation--factorymaker {
				opacity: 0;
				visibility: hidden;
			}
		}
	}

	.workflow-comparison__animation-background {
		position: absolute;
		top: calc(50% - 15rem);
		left: 50%;
		width: min(100%, 30rem);
		aspect-ratio: 1;
		border-radius: 2.5rem;
		background: var(--colorPetrol);
		translate: -50% 0;

		@media only screen and (max-width: 768px) {
			position: relative;
			top: auto;
			left: auto;
			display: block;
			grid-column: 1;
			grid-row: 2;
			width: 100%;
			max-width: min(16rem, 38svh);
			margin: 0 auto;
			border-radius: 1.5rem;
			translate: none;
		}
	}

	.workflow-comparison__animation-title {
		position: absolute;
		right: 1.5rem;
		bottom: 1.5rem;
		left: 1.5rem;
		z-index: 2;
		color: var(--colorWhite);
		font: var(--text-h4);
		line-height: 1;
		text-align: center;

		@media only screen and (max-width: 768px) {
			right: 1rem;
			bottom: 1rem;
			left: 1rem;
			font: var(--text-h5);
		}
	}

}

.section__inside-factorymaker {
	.innerwrapper {
		display: flex;
		flex-direction: column;
		gap: 7rem;

		@media only screen and (max-width: 768px) {
			width: 100%;
			padding-inline: 0 !important;
			gap: 2rem;

			> .headlines {
				padding-inline: var(--sideSpacing);
			}
		}
		
		.teaser__wrapper {
			display: flex;
			flex-direction: column;
			gap: 16.35rem;

			@media only screen and (max-width: 768px) {
				gap: 1.5rem;
			}
		}
		
		.teaser {
			--mediaColumnWidth: 49rem;
			display: grid;
			grid-template-columns: var(--mediaColumnWidth) 1fr;
			gap: 12.7rem;
			align-items: center;
			

			@media only screen and (max-width: 768px) {
				display: flex;
				flex-direction: column;
				align-items: stretch;
				gap: 0;
				padding: 1rem;
			}
			
			.media__container {
				position: relative;
				width: 100%;
				aspect-ratio: 1105/625;

				@media only screen and (max-width: 768px) {
					order: 2;
					aspect-ratio: auto;
					margin-top: 2rem;
					overflow: hidden;
					border-radius: var(--borderRadius-M);
				}
				
				.media {
					position: absolute;
					top: 50%;
					transform: translateY(-50%);	

					@media only screen and (max-width: 768px) {
						position: relative;
						inset: auto;
						width: 100%;
						height: auto;
						transform: none;
					}
				}
				
			}
			
			.media {
				width: 100%;
				
				video {
					display: block;
					width: 100%;
					height: auto;

					@media only screen and (max-width: 768px) {
						height: auto;
						object-fit: contain;
					}
				}
				
				&.bigger {
					--offset: 8rem;
					width: calc(100% + var(--offset));

					@media only screen and (max-width: 768px) {
						--offset: 0rem;
						width: 100%;
					}
				}
			}
			
			.text {
				width: 100%;

				@media only screen and (max-width: 768px) {
					order: 1;
				}
				
				.icon {
					display: block;
					width: 3rem;
					height: 3rem;
					margin-bottom: 2rem;

					@media only screen and (max-width: 768px) {
						width: 2.6rem;
						height: 2.6rem;
						margin-bottom: 0.75rem;
					}
				}
				
				h3 {
					margin: 0 0 1.5rem;
					font: var(--text-h4);

					@media only screen and (max-width: 768px) {
						margin-bottom: 0.5rem;
						font: var(--text-h3);
					}
				}
				
				.content {
					font: var(--text-body-m);

					@media only screen and (max-width: 768px) {
						font: var(--text-body-s);
						
						p {
							opacity: 0.7;
						}
					}
					
					p:first-child {
						margin-top: 0;
					}
					
					p:last-child {
						margin-bottom: 0;
					}
				}
			}
			
			&:nth-child(odd) .text {
				margin-left: auto;
			}
			
			&:nth-child(even) {
				grid-template-columns: 1fr var(--mediaColumnWidth);
				
				.media {
					grid-column: 2;
					
					&.bigger {
						margin-left: calc(var(--offset) * -1);
					}
				}
				
				.text {
					grid-column: 1;
					grid-row: 1;
				}

				@media only screen and (max-width: 768px) {
					display: flex;
					grid-template-columns: none;

					.media,
					.media.bigger {
						grid-column: auto;
						margin-left: 0;
					}

					.text {
						grid-column: auto;
						grid-row: auto;
					}
				}
			}
		}
	}

}

body.frontend footer {
	position: relative;
	color: var(--colorPetrol);
	overflow: clip;
	
	.background__gradient {
		
		video {
			width: 100% !important;
			height: 100% !important;
			left: 0;
			transform: none;
			object-fit: cover;

			@media only screen and (max-width: 768px) {
				width: 106% !important;
				height: auto !important;
				max-width: none;
				top: 0;
				left: 50%;
				transform: translateX(-50%);
				object-fit: contain;
			}
		}
	}
	
	.innerwrapper {
		min-height: 55.5rem;
		padding-top: 4rem;
		padding-bottom: 2rem;
		display: flex;
		flex-direction: column;

		@media only screen and (max-width: 768px) {
			min-height: 0;
			padding-block: 1.8rem 3.6rem;
		}
	}

	a {
		color: inherit;
		text-decoration: none;
	}

	.content-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"actions statement"
			"socials statement"
			"address footer-nav";
		grid-template-rows: auto auto auto;

		@media only screen and (max-width: 768px) {
			grid-template-columns: minmax(0, 1fr);
			grid-template-areas: "statement" "actions" "footer-nav" "address" "socials";
			grid-template-rows: auto;
		}
	}

	.actions {
		grid-area: actions;
		display: flex;
		gap: var(--threeColumnGap);

		@media only screen and (max-width: 768px) {
			margin-top: 1.6rem;
			gap: 0.5rem;
			flex-wrap: wrap;
		}

		.cta__button {
			@media only screen and (max-width: 768px) {
				flex: 1 1 0;
				height: calc(2.5rem * var(--typographyScale));
				padding-inline: 0.75rem;
				gap: 0.6rem;
				font: 400 var(--fontSize16) / 1.5 var(--fontFamily);
			}
		}

		.cta__button:first-child {
			width: 17.2rem;
			@media only screen and (max-width: 768px) {
				width: auto;
			}
		}

		.cta__button:last-child {
			width: 9.7rem;
			@media only screen and (max-width: 768px) {
				width: auto;
			}
		}
	}

	.socials {
		grid-area: socials;
		display: flex;
		align-items: center;
		gap: 1.2rem;
		font: var(--text-body-s);
		margin-top: 2.7rem;

		@media only screen and (max-width: 768px) {
			margin-top: 0.6rem;
		}

		> span {
			@media only screen and (max-width: 768px) {
				display: none;
			}
		}

		a {
			display: block;
			width: 2rem;
			height: auto;
			aspect-ratio: 1/1;

			@media only screen and (max-width: 768px) {
				width: 1.55rem;
			}

			img,
			svg {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
		}
	}

	.statement {
		grid-area: statement;

		@media only screen and (max-width: 768px) {
			font: 400 var(--fontSize22) / 1.227 var(--fontFamily);
		}

		p {
			margin-top: 0;
			margin-bottom: 0;
			font: var(--text-h4);

			@media only screen and (max-width: 768px) {
				text-wrap: balance;
			}
		}
	}

	.address {
		grid-area: address;
		margin-top: 6.6rem;
		font: var(--text-body-s);

		@media only screen and (max-width: 768px) {
			margin-top: 1.4rem;
			font: 400 var(--fontSize15) / 1.4 var(--fontFamily);
		}

		p {
			margin-block: 0;
		}
	}

	.footer-nav {
		grid-area: footer-nav;
		margin-top: 6.6rem;

		@media only screen and (max-width: 768px) {
			margin-top: 1.3rem;
		}

		.footer-nav__toggle {
			display: none;

			@media only screen and (max-width: 768px) {
				display: block;
				position: absolute;
				right: 0;
				top: 0;
				width: 100%;
				height: calc(1.353em + 1.1rem);
				font: inherit;
				padding: 0;
				border: 0;
				background: transparent;
				cursor: pointer;
			}

			&::before,
			&::after {
				content: '';
				position: absolute;
				top: 50%;
				right: 0;
				width: 1.06rem;
				height: 1.06rem;
				transition: opacity 240ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
			}

			&::after {
				background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='41' height='41' fill='none' viewBox='0 0 41 41'><path d='M0 20.3945h40.789M20.3945 0v40.789' stroke='%23154047' stroke-width='2.5'/></svg>") center / contain no-repeat;
				transform: translateY(-50%);
			}

			&::before {
				opacity: 0;
				background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='39' height='39' fill='none' viewBox='0 0 39 39'><path stroke='%23154047' stroke-width='2.5' d='m.884.884 37.21 37.21M38.095.884.884 38.094'/></svg>") center / contain no-repeat;
				transform: translateY(-50%) rotate(-45deg) scale(0.8);
			}

			&[aria-expanded="true"] {
				&::after {
					opacity: 0;
					transform: translateY(-50%) rotate(45deg) scale(0.8);
				}

				&::before {
					opacity: 1;
					transform: translateY(-50%) rotate(0) scale(1);
				}
			}
		}

		ul {
			margin: 0;
			padding: 0;
			list-style: none;
		}

		& > ul {
			display: grid;
			grid-template-columns: 0.62fr 1.75fr 0.75fr 0.65fr;
			gap: 2rem;
			font: var(--text-body-s);

			@media only screen and (max-width: 768px) {
				grid-template-columns: minmax(0, 1fr);
				gap: 0;
				font: 400 var(--fontSize17) / 1.353 var(--fontFamily);
			}

			> li {
				@media only screen and (max-width: 768px) {
					position: relative;
					padding-block: 0.55rem;
					border-bottom: 0.075rem solid rgb(21 64 71 / 20%);
				}

				> a,
				> span {
					@media only screen and (max-width: 768px) {
						display: inline-block;
						padding-right: 0;
					}
				}

				> a {
					@media only screen and (max-width: 768px) {
						position: relative;
						z-index: 1;
					}
				}
			}

			& > li > ul {
				margin-top: 1.2rem;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				gap: 1.1rem;

				@media only screen and (max-width: 768px) {
					margin-top: 0.5rem;
					gap: 0.2rem;
					font: 400 var(--fontSize15) / 1.4 var(--fontFamily);
				}

				a,
				span {
					opacity: 0.5;
					text-wrap: balance;
					display: inline-block;

					&:hover,
					&:focus-visible {
						opacity: 1;
					}
				}
			}
		}

		&.is-initialized > ul > li:not(.is-open) > ul {
			@media only screen and (max-width: 768px) {
				display: none;
			}
		}
	}

	.footer-wordmark {
		display: none;

		@media only screen and (max-width: 768px) {
			display: block;
			width: 100%;
			height: auto;
			margin: 1.6rem 0 1.2rem;
		}

		svg {
			display: block;
			width: 100%;
			height: auto;
		}
	}

	.legal {
		margin-top: auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font: var(--text-body-s);

		@media only screen and (max-width: 768px) {
			margin-top: 0;
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 0.35rem 0.4rem;
			font: 400 var(--fontSize13) / 1.5 var(--fontFamily);
		}

		.settings,
		.policies {
			margin: 0;
			padding: 0;
			list-style: none;
			display: flex;
			align-items: center;
			gap: 4.9rem;

			@media only screen and (max-width: 768px) {
				display: contents;
			}

			li {
				@media only screen and (max-width: 768px) {
					text-align: center;
				}
			}
		}

		.settings > li:not(.footer-language),
		.policies > li {
			@media only screen and (max-width: 768px) {
				opacity: 0.5;
			}
		}

		.settings > li:first-child,
		.policies > li:nth-child(3n + 2) {
			@media only screen and (max-width: 768px) {
				text-align: left;
			}
		}

		.policies > li:nth-child(3n + 1) {
			@media only screen and (max-width: 768px) {
				text-align: right;
			}
		}

		.settings > li > a,
		.policies > li > a,
		.footer-language__toggle {
			position: relative;
			display: inline-block;

			&::after {
				position: absolute;
				left: 0;
				bottom: -0.12em;
				width: 100%;
				height: 1px;
				background: currentColor;
				content: '';
				transform: scaleX(0);
				transform-origin: right center;
				transition: transform 0.35s ease;
			}

			&:hover::after,
			&:focus-visible::after,
			&[aria-expanded="true"]::after {
				transform: scaleX(1);
				transform-origin: left center;
			}
		}

		.footer-language {
			position: relative;
			text-align: left;

			.footer-language__toggle {
				margin: 0;
				padding: 0;
				border: 0;
				background: transparent;
				color: inherit;
				font: inherit;
				cursor: pointer;

				@media only screen and (max-width: 768px) {
					opacity: 0.5;
				}
			}

			.footer-language__popover {
				position: absolute;
				left: 0;
				bottom: calc(100% + 0.6rem);
				z-index: 5;
				box-sizing: border-box;
				width: 13.75rem;
				padding: 0.4rem;
				border-radius: var(--borderRadius-S);
				background: var(--colorWhite);
				box-shadow: 0 -0.15rem 0.74rem rgb(0 0 0 / 19%);
				color: var(--colorPetrol);
				font: 400 var(--fontSize20) / normal var(--fontFamily);

				@media only screen and (max-width: 768px) {
					bottom: calc(100% + 0.45rem);
					width: 10rem;
					padding: 0.25rem;
					font: 400 var(--fontSize15) / normal var(--fontFamily);
				}

				&[hidden] {
					display: none;
				}

				/* Keep the gap to the trigger inside the hover area. */
				&::before {
					content: '';
					position: absolute;
					left: 0;
					right: 0;
					top: 100%;
					height: 0.6rem;

					@media only screen and (max-width: 768px) {
						display: none;
					}
				}

				ul {
					display: flex;
					flex-direction: column;
					gap: 0.3rem;
					margin: 0;
					padding: 0;
					list-style: none;

					@media only screen and (max-width: 768px) {
						gap: 0.15rem;
					}
				}

				li {
					border-radius: 0.2rem;
					transition: background-color 0.2s ease;

					&:hover,
					&:focus-within {
						background: var(--colorNeon);
					}
				}

				a {
					display: flex;
					align-items: center;
					gap: 0.7rem;
					min-height: 1.75rem;
					padding: 0.4rem 0.4rem 0.4rem 0.4rem;
					box-sizing: border-box;
					white-space: nowrap;

					@media only screen and (max-width: 768px) {
						gap: 0.45rem;
						padding: 0.3rem;
					}
				}

				.footer-language__flag {
					display: block;
					flex: 0 0 auto;
					width: 1.8rem;
					height: 1.35rem;
					border-radius: 0.12rem;
					overflow: hidden;

					@media only screen and (max-width: 768px) {
						width: 1.4rem;
						height: 1.05rem;
					}

					svg {
						display: block;
						width: 100%;
						height: 100%;
					}
				}
			}
		}

	}
}

body.frontend {
	> main {
		@media only screen and (min-width: 769px) {
			position: relative;
			z-index: 1;
			background-color: var(--colorWhite);
		}
	}

	> footer {
		@media only screen and (min-width: 769px) {
			position: sticky;
			bottom: 0;
			z-index: 0;
			opacity: 0;

			&.is-reveal-visible {
				opacity: 1;
			}
		}
	}

	&::after {
		@media only screen and (min-width: 769px) {
			content: '';
			display: block;
			height: var(--footerRevealOverflow, 0px);
			pointer-events: none;
		}
	}
}

body.frontend .cmplz-cookiebanner {
	--cmplz_text_font_size: var(--fontSize20);
	--cmplz_banner_width: 27rem;
	--cmplz_banner_border_radius: var(--borderRadius-M);
	--cmplz_category_header_active_font_size: var(--fontSize20);
	--cmplz_category_header_title_font_size: var(--fontSize24);
	--cmplz_category_header_always_active_color: var(--colorNeon);
	
	padding: 1.5rem;
	right: var(--sideSpacing);
	bottom: var(--sideSpacing);
	
	@media only screen and (max-width: 768px) {
		right: 0;
		bottom: 0;
		--cmplz_banner_border_radius: var(--borderRadius-M) var(--borderRadius-M) 0 0;
		--cmplz_text_font_size: var(--fontSize13);
	}
	
	.cmplz-buttons {
		@media only screen and (max-width: 768px) {
			flex-direction: row;	
		}
	}
	
	.cmplz-close,
	.cmplz-documents.cmplz-links {
		display: none;
	}
	
	.cmplz-title {
		font: var(--text-h6);
		justify-self: start;
		grid-column: 1 / 3;
		display: block !important;
		
		@media only screen and (max-width: 768px) {
			font-size: var(--fontSize19);
		}
	}
	
	.cmplz-message {
		> p {
			margin: 0;
		}
	}
	
	.cmplz-categories {
		margin-top: 1rem;
		
		.cmplz-category {
			background-color: transparent;
			border: 1px solid var(--colorWhite);
			border-radius: var(--borderRadius-S);
			
			.cmplz-category-header {
				.cmplz-icon {
					svg {
						path {
							fill: var(--colorWhite);
						}
					}
				}
			}
		}
	}

}