/* Overrides */
header {
	padding-top: 0px !important;
}
nav.main {
	position: absolute !important;
}
nav.main .container-bar > div:first-child,
nav.main .full-h-svg {
	height: calc(var(--nav-height) - var(--padding-xs)) !important;
}
nav.main .full-h-svg svg {
	height: 100% !important;
	width: auto !important;
}
@media only screen and (max-width: 992px) and (orientation: portrait) {
	nav.main button[overlay-target="language"]:not(:hover):not(:focus) {
		color: var(--color-main) !important;
	}
}


/* ----------------------------------------------------------------
	Content
-----------------------------------------------------------------*/
#countdown-clock.gap {
	gap: 0.75rem 3rem !important;
}
@media only screen and (max-width: 688px) {
	#countdown {
		padding-bottom: 2.5rem !important;
		gap: 1.25rem !important;
	}
	#countdown-clock.gap {
		gap: 0.75rem 0px !important;
	}
	#countdown-clock.gap > * {
		width: 50%;
	}
}

@media only screen and (max-width: 992px) and (orientation: portrait) {
	footer .flex-h.arrange-cc, footer .flex-h.arrange-cr {
		justify-content: flex-start !important;
	}
}

.container-icons svg {
	height: 1.25rem;
}
.container-buttons .stroke {
	stroke-width: 2px !important;
}
section > .container-text > h2 + p {
	width: min(calc(6 * var(--grid-column) + 5 * var(--grid-gutter)), 100%);
}
@media only screen and (max-width: 992px) {
	section .container-text h1 + p,
	section .container-text h2 + p,
	section .container-text h3 + p {
		width: 100% !important;
		max-width: none !important;
	}
}
/* Header & CTA */
section[name=header] {
	padding-top: 0px !important;
	padding-bottom: 0px !important;
}
section[name=header] .container-text.main {
	align-self: center;
}
section[name=header] .wrapper-bg, section[name=header] .container-bg {
	mask-image: url('./header-mask.svg');
	-webkit-mask-image: url('./header-mask.svg');
	mask-size: cover;
	-webkit-mask-size: cover;
	mask-position: 50% 100%;
	-webkit-mask-position: 50% 100%;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
}
section[name=header] .container-bg {
	mask-image: url('./header-mask-2.svg');
	-webkit-mask-image: url('./header-mask-2.svg');
}
section[name=header] .container-pin {
	mask-image: linear-gradient(to bottom, black 0%, transparent 0%);
	-webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 0%);
	width: 100% !important;
	height: 100%;
}
section[name=header] .container-pin picture,
section[name=header] .container-pin img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
section[name=header] > picture.header-foreground {
	left: calc(var(--grid-padding) + 3 * var(--grid-column) + 3 * var(--grid-gutter)) !important;
	opacity: 0;
}
section[name=header] .container-cta {
	bottom: 1.25rem;
}
section[name=header] .container-text {
	opacity: 0;
}
section[name=header] .ai-notice {
	bottom: 1.25rem;
	right: 1.25rem;
	width: auto !important;
	color: var(--shade-grey-light) !important;
	opacity: 0;
}
@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=header] {
		height: 100svh !important;
		max-height: 100svh !important;
		min-height: 0 !important;
		overflow: hidden;
	}
	section[name=header] .container-text.main {
		align-self: flex-start;
		margin-bottom: 0 !important;
		margin-top: 0;
		padding-top: 10rem !important;
		width: 66.666% !important;
	}
	section[name=header] nav.main .full-h-svg svg {
		height: 3.5rem !important;
		width: auto !important;
	}
}
@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=header] > picture.header-foreground {
		left: 0px !important;
	}
	section[name=header] .container-buttons {
		flex-direction: column;
		align-items: flex-start;
	}
}
@media only screen and (max-width: 688px) and (orientation: portrait) {
	section[name=header] .container-text.main {
		padding-top: 7.5rem !important;
		width: 100% !important;
	}
}

/* USP */
section[name=usp] .accordion-item .stroke {
	stroke-width: 2px !important;
}
section[name=usp] .accordion-item > button .container-text {
	max-width: 522px;
	padding-right: var(--gap-xs);
}
section[name=usp] .accordion-item .item-content .container-text {
	max-width: 522px;
}
section[name=usp] .accordion-item > button .accordion-toggle {
	flex: 0 0 auto;
}
section[name=usp] .ai-notice {
	right: var(--grid-padding);
	top: 0.5rem;
	width: auto !important;
}
@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=usp] {
		padding-right: var(--grid-padding) !important;
	}
	section[name=usp] .container-content {
		flex-direction: column-reverse !important;
		gap: 0px !important;
	}
	section[name=usp] .accordion-item.padding-xs-tb {
		padding-top: var(--gap-xs) !important;
		padding-bottom: var(--gap-xs) !important;
	}
	section[name=usp] .accordion-item .container-text {
		width: calc(11 * var(--grid-column) + 10 * var(--grid-gutter));
	}
	section[name=usp] .accordion-images {
		min-height: calc(8 * var(--grid-column) + 7 * var(--grid-gutter));
	}
}

/* Video */
section[name=video] .container-video {
	mask-image: linear-gradient(to right, transparent 0%, black 0%, black 100%, transparent 100%);
}

/* Component */
@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=component] > div:not(.container-text) {
		gap: 0px !important;
	}
}

/* Fact */
section[name=fact] .container-bg {
	height: 200%;
	left: calc(3 * var(--grid-column) + 3 * var(--grid-gutter) + var(--grid-padding));
	mask-image: linear-gradient(127.5deg, transparent 0%, transparent 50%, black 50%);
	-webkit-mask-image: linear-gradient(127.5deg, transparent 0%, transparent 50%, black 50%);
}
section[name=fact] .container-bg picture{
	transform: translateY(-100%);
}
section[name=fact] table th:first-child, section[name=fact] table td:first-child {
	position: sticky !important;
	left: 0px;
}
@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=fact] div.section-l-b {
		padding-bottom: 0px !important;
	}
	section[name=fact] #data {
		padding-top: 0px !important;
	}
	section[name=fact] .container-bg + picture {
		position: initial !important;
		bottom: initial !important;
		left: initial !important;
		transform: initial !important;
		margin-top: -2.5rem;
	}
	section[name=fact] .container-bg {
		display: none !important;
	}
}
@media only screen and (max-width: 688px) and (orientation: portrait) {
	section[name=fact] table.padding-xs th, section[name=fact] table.padding-xs td {
		padding: 0.75rem !important;
	}	
}

/* Fair */
section[name=fair] .primary > svg {
	height: var(--button-icon-size) !important;
}
@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=fair] picture {
		min-height: calc(3 * var(--grid-column) + 3 * var(--grid-gutter)) !important;
	}
}
@media only screen and (max-width: 688px) and (orientation: portrait) {
	section[name=fair] picture {
		min-height: calc(6 * var(--grid-column) + 5 * var(--grid-gutter)) !important;
	}	
}

/* Newsletter */
section[name=newsletter] .form svg {
	display: none;
}

/* ----------------------------------------------------------------
	Cleango-550 specific sections
-----------------------------------------------------------------*/

/* CTA bar (mid-page) */
section[name=cta-bar] {
	background: var(--color-main);
}
section[name=cta-bar] .container-bar {
	border: none;
	padding: var(--padding-l) var(--grid-padding);
	max-width: 1488px;
	margin: 0 auto;
	gap: var(--button-container-margin-top);
}
section[name=cta-bar] .cta-bar-headline {
	font-size: var(--font-size-h2);
	line-height: 1.1;
	font-weight: 300;
	color: var(--shade-white);
	margin: 0;
	white-space: nowrap;
}
@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=cta-bar] .container-bar {
		padding: var(--padding-l) var(--grid-padding);
		flex-direction: column !important;
		gap: var(--gap-s) !important;
		align-items: center !important;
	}
	section[name=cta-bar] .cta-bar-headline {
		white-space: normal;
		text-align: center;
	}
	section[name=cta-bar] .container-text {
		align-items: center;
	}
}

/* Bin (Kehrgutbehälter) */
section[name=bin] {
	padding-inline: var(--grid-padding);
}
section[name=bin] .container-bin-intro {
	gap: var(--text-gap-h2);
}
section[name=bin] .container-features svg {
	color: var(--color-main);
	flex-shrink: 0;
}
section[name=bin] .container-features > div:first-child .bin-feature-icon {
	display: none;
}
section[name=bin] .container-features > div.bin-feature-row-start .bin-feature-icon {
	display: none !important;
}
section[name=bin] .container-features .stroke {
	stroke: var(--color-main) !important;
}
section[name=bin] .container-features {
	justify-content: center;
}
section[name=bin] .container-features > div {
	justify-content: center;
}
section[name=bin] .container-cards .container-card {
	background: transparent;
}
section[name=bin] .container-cards {
	gap: var(--gap-default);
	margin: 0 !important;
	margin-right: 0 !important;
	padding: 0 !important;
	padding-right: 0 !important;
}
section[name=bin] .container-cards picture,
section[name=bin] .container-cards img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center center;
	margin: 0 auto;
}
section[name=bin] .container-cards .container-text {
	width: 100%;
	align-items: center;
	text-align: center;
}
section[name=bin] .container-cards .container-text p {
	text-align: center;
}
@media only screen and (max-width: 688px) and (orientation: portrait) {
	section[name=bin] .container-features > div:first-child .bin-feature-icon {
		display: inline-flex;
	}
	section[name=bin] .container-features > div.bin-feature-row-start .bin-feature-icon {
		display: inline-flex !important;
	}
	section[name=bin] .container-features {
		justify-content: flex-start;
	}
	section[name=bin] .container-features > div {
		justify-content: flex-start;
	}
	section[name=bin] .container-features > div > span:last-child {
		text-align: left;
	}
}

/* Cabin specs banner */
section[name=cabin-specs] .container-stats .container-stat {
	min-width: 7rem;
	text-align: center;
	align-items: center;
}
section[name=cabin-specs] .container-stat .h2 {
	color: var(--color-main);
}
section[name=cabin-specs] .container-stat .h4,
section[name=cabin-specs] .container-stat .h2 {
	text-align: center;
}
section[name=cabin-specs] .container-image {
	height: clamp(18rem, 34vw, 36rem);
	overflow: hidden;
}
@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=cabin-specs] {
		gap: 0 !important;
	}
	section[name=cabin-specs] .container-stats {
		width: 100% !important;
	}
	section[name=cabin-specs] .container-stats .container-stat {
		width: 50% !important;
		flex: 0 0 50%;
		padding-bottom: var(--padding-l);
	}
	section[name=cabin-specs] .container-stats .container-stat:nth-last-child(-n + 2) {
		padding-bottom: 0 !important;
	}
	section[name=cabin-specs] .container-image {
		height: clamp(22rem, 78vw, 32rem);
		margin-top: 0 !important;
		padding-top: 0 !important;
	}
	section[name=cabin-specs] .container-image picture,
	section[name=cabin-specs] .container-image img {
		width: 105%;
		height: 105%;
		margin-top: 10%;
	}
}

/* Cabin (interactive placeholder) */
section[name=cabin] .container-cabin {
	position: relative;
	aspect-ratio: 16 / 7;
	overflow: hidden;
}
section[name=cabin] .container-cabin picture,
section[name=cabin] .container-cabin img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
section[name=cabin] .hotspot {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.85);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform var(--transition-default), background var(--transition-default);
}
section[name=cabin] .hotspot:hover,
section[name=cabin] .hotspot:focus {
	background: var(--color-main);
	transform: translate(-50%, -50%) scale(1.15);
}
section[name=cabin] .hotspot .hotspot-dot {
	display: block;
	width: 0.625rem;
	height: 0.625rem;
	background: var(--color-main);
	border-radius: 50%;
	transition: background var(--transition-default);
}
section[name=cabin] .hotspot:hover .hotspot-dot,
section[name=cabin] .hotspot:focus .hotspot-dot {
	background: var(--shade-white);
}

/* Cabin — WebGL (Babylon): viewport + connected slider (Figma 4376:859) */
section[name=cabin].cabin-webgl {
	gap: var(--gap-l);
}
section[name=cabin].cabin-webgl .cabin-webgl__stack {
	width: 100%;
	border-radius: 0;
	overflow: hidden;
	box-shadow: none;
	background-color: var(--shade-grey-medium);
	display: flex;
	flex-direction: column;
	align-items: stretch;
}
section[name=cabin].cabin-webgl .cabin-webgl__viewport {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 25rem;
}
section[name=cabin].cabin-webgl .cabin-webgl__interact-guard {
	position: absolute;
	inset: 0;
	z-index: 15;
	cursor: default;
	background: transparent;
}
section[name=cabin].cabin-webgl .cabin-webgl__interact-guard.is-dismissed {
	pointer-events: none;
}
section[name=cabin].cabin-webgl .cabin-webgl__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.55);
	z-index: 20;
	pointer-events: none;
}
section[name=cabin].cabin-webgl .cabin-webgl__overlay svg {
	width: 12.5rem;
	height: 12.5rem;
}
section[name=cabin].cabin-webgl .cabin-webgl__overlay svg .stroke {
	fill: none;
	stroke: var(--shade-white);
	stroke-width: 0.5;
}
section[name=cabin].cabin-webgl .cabin-webgl__overlay svg .fill {
	fill: var(--shade-white);
	stroke: none;
}
section[name=cabin].cabin-webgl .cabin-webgl__canvas {
	position: relative;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	cursor: grab;
}
section[name=cabin].cabin-webgl .cabin-webgl__canvas:active {
	cursor: grabbing;
}
section[name=cabin].cabin-webgl .cabin-webgl__slider {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	width: 100%;
	height: 20rem;
	background: var(--shade-white);
	border-top: var(--border-default);
}
section[name=cabin].cabin-webgl .cabin-webgl__slider-visual {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 0 0 50%;
	max-width: 50%;
	background: var(--shade-grey-dark);
}
section[name=cabin].cabin-webgl .cabin-webgl__slider-images {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	overflow: hidden;
	touch-action: none;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
}
section[name=cabin].cabin-webgl .cabin-webgl__slider-images.is-dragging,
section[name=cabin].cabin-webgl .cabin-webgl__slider-images:active {
	cursor: grabbing;
}
section[name=cabin].cabin-webgl .cabin-webgl__slider-progress {
	display: flex;
	flex: 0 0 0.625rem;
	width: 100%;
	height: 0.625rem;
	background: var(--shade-grey-medium);
	cursor: pointer;
}
section[name=cabin].cabin-webgl .cabin-webgl__slider-progress-seg {
	flex: 1 1 0;
	min-width: 0;
	height: 100%;
	background: var(--shade-grey-light);
	border-right: var(--border-default-width) solid var(--shade-grey-medium);
	box-sizing: border-box;
	transition: background-color var(--transition-default);
}
section[name=cabin].cabin-webgl .cabin-webgl__slider-progress-seg:last-child {
	border-right: none;
}
section[name=cabin].cabin-webgl .cabin-webgl__slider-progress-seg.is-active {
	background: var(--color-main);
}
section[name=cabin].cabin-webgl .cabin-webgl__slider-images > .cabin-webgl__slide-visual {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
section[name=cabin].cabin-webgl .cabin-webgl__slide-visual picture.cabin-webgl__slide-img {
	position: absolute;
	inset: 0;
	height: 100%;
	display: block;
	border-radius: 0;
}
section[name=cabin].cabin-webgl .cabin-webgl__slide-visual picture.cabin-webgl__slide-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-user-drag: none;
	user-select: none;
	-webkit-user-select: none;
	pointer-events: none;
}
section[name=cabin].cabin-webgl .cabin-webgl__slider-images > .cabin-webgl__slide-visual:not(:first-child),
section[name=cabin].cabin-webgl .cabin-webgl__slider-texts .cabin-webgl__slide-text:not(:first-child) {
	transform: translateX(100%);
}
section[name=cabin].cabin-webgl .cabin-webgl__slide-visual picture.cabin-webgl__slide-img:not(:first-child) {
	transform: translateX(100%);
}
section[name=cabin].cabin-webgl .cabin-webgl__slider-nav {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: var(--padding-xs);
	flex: 0 0 auto;
	padding: var(--padding-s) var(--padding-s) var(--padding-s) var(--padding-default);
}
section[name=cabin].cabin-webgl .cabin-webgl__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: none;
	border-radius: 0;
	background: var(--color-main);
	color: var(--shade-white);
	cursor: pointer;
	transition: background-color var(--transition-default), opacity var(--transition-default);
}
section[name=cabin].cabin-webgl .cabin-webgl__arrow:disabled {
	background: var(--shade-grey-medium);
	color: var(--shade-white);
	cursor: default;
	opacity: 1;
}
section[name=cabin].cabin-webgl .cabin-webgl__arrow:not(:disabled):hover,
section[name=cabin].cabin-webgl .cabin-webgl__arrow:not(:disabled):focus {
	opacity: 0.92;
}
section[name=cabin].cabin-webgl .cabin-webgl__arrow:not(:disabled):focus-visible {
	outline: 2px solid var(--shade-white);
	outline-offset: 2px;
}
section[name=cabin].cabin-webgl .cabin-webgl__arrow-ico {
	display: flex;
	align-items: center;
	justify-content: center;
}
section[name=cabin].cabin-webgl .cabin-webgl__arrow-ico--flip {
	transform: scaleX(-1);
}
section[name=cabin].cabin-webgl .cabin-webgl__slider-copy {
	flex: 1 1 50%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
section[name=cabin].cabin-webgl .cabin-webgl__slider-texts {
	position: relative;
	flex: 1 1 auto;
	min-height: 12rem;
	overflow: hidden;
}
section[name=cabin].cabin-webgl .cabin-webgl__slide-text {
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	padding: var(--padding-s) var(--padding-s) var(--padding-s) var(--padding-default);
	overflow-x: hidden;
	overflow-y: auto;
}
section[name=cabin].cabin-webgl .cabin-webgl__slide-text h3 {
	color: var(--color-main);
}
@media only screen and (max-width: 992px) {
	section[name=cabin].cabin-webgl .cabin-webgl__slider {
		height: 35rem;
		flex-shrink: 0;
		flex-direction: column;
	}
	section[name=cabin].cabin-webgl .cabin-webgl__slider-nav {
		justify-content: center;
		padding: var(--padding-xs);
	}
	section[name=cabin].cabin-webgl .cabin-webgl__slider-visual {
		flex: 0 0 auto;
		max-width: 100%;
	}
	section[name=cabin].cabin-webgl .cabin-webgl__slide-text {
		padding: var(--padding-xs) var(--padding-xs) var(--padding-xs) var(--padding-s);
	}
}
@media only screen and (max-width: 688px) {
	section[name=cabin].cabin-webgl .cabin-webgl__viewport {
		height: 40vw;
		min-height: 14rem;
		max-height: 50vh;
	}
	section[name=cabin].cabin-webgl .cabin-webgl__slider {
		flex-direction: column;
	}
	section[name=cabin].cabin-webgl .cabin-webgl__slider-visual {
		min-height: 12rem;
	}
	section[name=cabin].cabin-webgl .cabin-webgl__slider-copy {
		flex: 0 0 auto;
		border-top: var(--border-default);
	}
	section[name=cabin].cabin-webgl .cabin-webgl__slider-texts {
		min-height: 10rem;
	}
	section[name=cabin].cabin-webgl .cabin-webgl__slide-text {
		padding: var(--padding-xs);
	}
}

/* Drive (Antriebsvarianten) */
section[name=drive] .drive-vector {
	position: absolute;
	right: calc(var(--grid-padding) * -0.6);
	top: 35%;
	width: calc(var(--grid-width) * 0.29);
	max-width: none;
	min-width: 16rem;
	pointer-events: none;
	transform: translate(-4rem, -7rem);
	z-index: 0;
}
section[name=drive] .drive-vector svg {
	display: block;
	width: 100%;
	height: auto;
}
section[name=drive] .container-buttons .link-self {
	gap: var(--button-icon-gap);
}
section[name=drive] .container-buttons.margin-h4 {
	margin-top: var(--text-gap-h2) !important;
}
section[name=drive] .drive-button-text {
	color: var(--color-main);
	font-weight: var(--font-weight-bold);
}
section[name=drive] .drive-button-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--icon-size-xs);
	height: var(--icon-size-xs);
	flex: 0 0 auto;
}
section[name=drive] .drive-button-icon svg {
	width: 100%;
	height: 100%;
	color: currentColor;
}
section[name=drive] .drive-button-icon .stroke {
	stroke: currentColor !important;
}
section[name=drive] .container-cards {
	column-gap: calc(2 * var(--grid-column) + 1 * var(--grid-gutter)) !important;
}
@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=drive] .container-cards {
		gap: var(--gap-xxl) !important;
	}
	section[name=drive] .container-cards .container-card {
		gap: var(--gap-default) !important;
	}
	section[name=drive] .container-cards .container-card + .container-card {
		margin-top: var(--gap-xxl);
	}
	section[name=drive] .drive-vector {
		top: 60%;
		width: calc(var(--grid-width)*0.6);
		transform: translate(-2rem, -3rem);
	}
}
@media only screen and (max-width: 688px) {
	section[name=drive] .drive-vector {
		top: 58%;
		transform: translate(-1rem, -3.5rem);
	}
}
@media only screen and (max-width: 992px) {
	section[name=drive] .container-cards .container-card + .container-card {
		margin-top: var(--gap-xxl);
	}
}
section[name=drive] .container-cards .container-card {
	background: transparent;
	padding: 0;
}
section[name=drive] .container-cards picture,
section[name=drive] .container-cards img {
	aspect-ratio: 16 / 9;
	object-fit: contain;
	object-position: center center;
}
section[name=drive] table th,
section[name=drive] table td {
	background: transparent !important;
	padding: var(--gap-xs) 0;
	font-size: var(--font-size-default);
}
section[name=drive] table th:first-child {
	color: var(--font-color-default);
	font-weight: var(--font-weight-default);
}
section[name=drive] table td {
	color: var(--font-color-h1);
	font-weight: var(--font-weight-bold);
	text-align: right;
}
.drive-video-overlay {
	padding-top: var(--grid-padding);
	padding-bottom: var(--grid-padding);
}
.drive-video-overlay .container-drive-video {
	max-height: calc(100dvh - 2 * var(--grid-padding));
}
.drive-video-overlay .container-video,
.drive-video-overlay video {
	width: 100%;
	max-height: calc(100dvh - 2 * var(--grid-padding));
}
.drive-video-overlay video {
	object-fit: contain;
}
.drive-video-overlay > div:first-child button {
	color: var(--shade-white);
}

/* Drive CTA */
section[name=drive-cta] {
	background: var(--color-main);
	padding-top: var(--padding-l);
	padding-bottom: var(--padding-l);
	overflow: hidden;
}
section[name=drive-cta] .container-text {
	gap: var(--button-container-margin-top);
}
section[name=drive-cta] h2 {
	color: var(--shade-white);
	font-weight: var(--font-weight-h2);
	margin: 0;
	max-width: 48rem;
}
section[name=drive-cta] .container-image {
	left: 60%;
	width: 40%;
}
section[name=drive-cta] .container-image picture,
section[name=drive-cta] .container-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top left;
	max-width: none;
}
@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=drive-cta] {
		flex-direction: column !important;
		gap: var(--gap-l);
		align-items: center !important;
	}
	section[name=drive-cta] .container-text {
		width: 100% !important;
		align-items: center;
		text-align: center;
	}
	section[name=drive-cta] h2 {
		text-align: center;
	}
	section[name=drive-cta] .container-image {
		display: none !important;
	}
	.drive-video-overlay .container-drive-video {
		width: 100% !important;
	}
}

/* Water intro */
section[name=water-intro] .container-image picture,
section[name=water-intro] .container-image img {
	aspect-ratio: 21 / 9;
	object-fit: cover;
	width: 100%;
}

/* Water comparison */
section[name=water] .container-columns {
	align-items: stretch !important;
}
section[name=water] .container-columns .container-column {
	align-self: stretch;
}
section[name=water] .water-divider {
	align-self: stretch;
	width: 1px;
	background: var(--border-default-color);
	flex: 0 0 1px;
}
section[name=water] .container-bar {
	gap: var(--gap-xxs);
	margin-top: auto !important;
	padding: var(--gap-default) 0 0 0 !important;
}
section[name=water] .bar-track {
	width: 100%;
	height: 0.625rem;
	background: var(--shade-grey-light);
	border-radius: var(--border-radius-full);
	overflow: hidden;
}
section[name=water] .bar-fill {
	height: 100%;
	background: var(--color-main);
	border-radius: var(--border-radius-full);
}
@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=water] > .container-text.main {
		align-items: flex-start;
		text-align: left;
	}
	section[name=water] > .container-text.main h2,
	section[name=water] > .container-text.main .kicker {
		text-align: left;
	}
	section[name=water] .water-divider {
		width: 100%;
		height: 1px;
		flex-basis: 100%;
	}
}
/* Chassis (Fahrwerk) */
section[name=chassis] {
	align-items: center;
}
section[name=chassis] .container-image {
	height: 100%;
}
section[name=chassis] .container-image picture,
section[name=chassis] .container-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	height: 100%;
}
section[name=chassis] .container-panel {
	align-self: center;
	background: var(--shade-white);
	text-align: left;
	align-items: flex-start;
}
section[name=chassis] .container-panel h2,
section[name=chassis] .container-panel p,
section[name=chassis] .container-panel span {
	text-align: left;
}
section[name=chassis] .container-items {
	margin-top: var(--gap-default);
}
section[name=chassis] .container-items svg {
	color: var(--color-main);
	width: var(--icon-size-xs);
	height: var(--icon-size-xs);
	flex-shrink: 0;
}
section[name=chassis] .container-items .stroke {
	stroke: var(--color-main) !important;
}
@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=chassis] {
		flex-direction: column !important;
	}
	section[name=chassis] .container-panel {
		padding: 0 !important;
	}
	section[name=chassis] .container-image,
	section[name=chassis] .container-panel {
		width: 100% !important;
	}
}

/* Configuration (interactive placeholder) */
section[name=config] .container-config {
	width: 100%;
}
section[name=config] .container-config-options-pair {
	gap: var(--grid-gutter);
	position: relative;
	z-index: 3;
}
section[name=config] .container-config-options-pair > .container-options {
	flex: 1 1 0;
	min-width: 0;
	flex-direction: column;
	width: 100%;
	gap: var(--padding-s);
}
section[name=config] .container-config-options-pair .container-options .container-option {
	width: 100%;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer !important;
}
section[name=config] .container-config-image-wrap {
	position: relative;
	z-index: 1;
	pointer-events: none;
}
section[name=config] .container-options {
	gap: var(--padding-s) var(--grid-gutter);
}
section[name=config] .container-options .container-option {
	width: calc(50% - var(--grid-gutter) / 2);
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer !important;
}
.section[name=config] .container-options .container-option .item-content {
	display: grid;
  	grid-template-rows: 0fr;
  	transition: grid-template-rows var(--transition-l);
}
.section[name=config] .container-options .container-option.active .item-content {grid-template-rows: 1fr;}
.section[name=config] .container-options .container-option .item-content > * {overflow: hidden; transition: margin var(--transition-l) !important;}
.section[name=config] .container-options .container-option:not(.active) .item-content > * {margin: 0px !important;}
section[name=config] .container-options .container-option * {
	pointer-events: none;
	cursor: pointer;
}
section[name=config] .container-options .config-option-icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--icon-size-s);
	height: var(--icon-size-s);
	flex: 0 0 auto;
}
section[name=config] .container-options .config-option-icon-active {
	display: none;
}
section[name=config] .container-options .container-option.active .config-option-icon-default {
	display: none;
}
section[name=config] .container-options .container-option.active .config-option-icon-active {
	display: flex;
}
section[name=config] .container-options svg {
	color: var(--color-main);
	width: var(--icon-size-s);
	height: var(--icon-size-s);
	flex-shrink: 0;
}
section[name=config] .container-options .stroke {
	stroke: var(--color-main) !important;
}
section[name=config] .container-options span {
	color: var(--font-color-disabled);
	text-align: left;
}
section[name=config] .container-options .container-option.active > .accordion-item > span:first-child {
	color: var(--color-main);
}
section[name=config] .container-image picture,
section[name=config] .container-image img,
section[name=config] .container-image .config-option-image {
	aspect-ratio: 16 / 12;
	object-fit: cover;
	width: 100%;
	height: 100%;
}
section[name=config] .container-image {
	overflow: hidden;
	aspect-ratio: 16 / 12;
	min-height: 1px;
	width: 100%;
}
section[name=config] .container-image .config-option-image {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: none;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--transition-default);
}
section[name=config] .container-image .config-option-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
section[name=config] .container-image .config-option-image.active {
	z-index: 2;
	display: block;
	opacity: 1;
}
section[name=config] .config-transition-overlay {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
}
section[name=config] .config-transition-frame-stack {
	position: relative;
	width: 100%;
	height: 100%;
	flex: 1;
	min-height: 0;
}
section[name=config] .config-transition-overlay .config-transition-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	pointer-events: none;
}
section[name=config] .config-transition-overlay .config-transition-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
}
@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=config] .container-config {
		flex-direction: column !important;
		gap: var(--gap-l) !important;
	}
	section[name=config] .container-options {
		gap: 0.75rem !important;
	}
	section[name=config] .container-options .container-option {
		width: 100% !important;
		justify-content: flex-start;
		padding: 0.25rem 0;
		background: transparent;
		border: none;
	}
	section[name=config] .container-options .container-option.active {
		background: transparent;
	}
	section[name=config] .container-options .container-option .config-option-icon,
	section[name=config] .container-options .container-option svg {
		width: 1.35em;
		height: 1.35em;
	}
	section[name=config] .container-options .container-option > span:last-child {
		word-break: normal;
		overflow-wrap: break-word;
	}
	section[name=config] .container-options,
	section[name=config] .container-config-options-pair,
	section[name=config] .container-config-image-wrap,
	section[name=config] .container-image {
		width: 100% !important;
	}
}
@media only screen and (max-width: 688px) {
	section[name=config] .container-config-options-pair {
		flex-direction: column !important;
		gap: var(--padding-s) !important;
	}
	section[name=config] .container-options {
		gap: 0.65rem !important;
	}
}

/* Contact form */
section[name=config] {
	position: relative;
	z-index: 0;
}
@media only screen and (min-width: 993px) {
	section[name=config] {
		--config-triangle-width: calc(5 * var(--grid-column) + 4 * var(--grid-gutter) + var(--grid-padding));
	}
	section[name=config]::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: 0;
		width: var(--config-triangle-width);
		height: calc(var(--config-triangle-width) * 1.7320508);
		background: var(--shade-white);
		clip-path: polygon(0 100%, 100% 0, 100% 100%);
		pointer-events: none;
		z-index: 0;
	}
	section[name=config] .container-config,
	section[name=config] .container-config-image-wrap,
	section[name=config] .container-image {
		position: relative;
		z-index: 1;
	}
}
section[name=contact] {
	position: relative;
	z-index: 2;
	isolation: isolate;
	overflow: visible !important;
}
@media only screen and (min-width: 993px) {
	section[name=contact] {
		--contact-shape-base-width: calc(5 * var(--grid-column) + 4 * var(--grid-gutter) + var(--grid-padding));
		--contact-shape-start-x: calc(100% - var(--contact-shape-base-width));
		--contact-shape-diagonal-offset: var(--contact-shape-base-width);
	}
	section[name=contact]::before {
		content: "";
		position: absolute;
		inset: 0;
		background: var(--bg-light);
		clip-path: polygon(
			var(--contact-shape-start-x) 0,
			100% 0,
			100% 100%,
			calc(var(--contact-shape-start-x) - var(--contact-shape-diagonal-offset)) 100%
		);
		pointer-events: none;
		z-index: 3;
	}
}
section[name=contact] .container-bg {
	z-index: 1;
	height: 100%;
}
section[name=contact] .container-bg > div {
	height: 100% !important;
}
section[name=contact] .container-bg picture{
	transform: none;
}
section[name=contact] .container-form-wrap {
	position: relative;
	z-index: 20 !important;
	color: var(--font-color-default);
	padding: 0;
	background: transparent;
	border: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
section[name=contact] .container-form-wrap > * {
	position: relative;
	z-index: 1;
}
section[name=contact] .container-form-wrap .kicker,
section[name=contact] .container-form-wrap h2,
section[name=contact] .container-form-wrap p,
section[name=contact] .container-form-wrap label {
	color: var(--font-color-default);
	text-align: left;
}
section[name=contact] .container-form-wrap .kicker {
	color: var(--color-main);
}
section[name=contact] .container-heading {
	gap: 16px !important;
}
section[name=contact] .container-copy {
	gap: var(--text-gap-h2) !important;
}
section[name=contact] .container-buttons {
	gap: 0 !important;
	margin: 0 !important;
}
section[name=contact] .container-buttons input[type="radio"]:not(:checked) + label {
	background: transparent;
	border: var(--border-default-width) solid var(--color-main);
	color: var(--color-main);
}
section[name=contact] .container-buttons label + label {
	margin-left: calc(-1 * var(--border-default-width));
}
section[name=contact] .container-buttons .primary, section[name=contact] .container-buttons .secondary {
	padding: var(--form-input-padding);
}
section[name=contact] .container-buttons .primary {
	background: var(--color-main);
	border: var(--border-default-width) solid var(--color-main);
	color: var(--shade-white);
}
section[name=contact] .container-buttons .secondary {
	background: transparent;
	border: var(--border-default-width) solid var(--color-main);
	color: var(--color-main);
}
section[name=contact] .form {
	margin-top: 0;
}
section[name=contact] .form > .flex-h {
	gap: var(--gap-xs);
}
section[name=contact] .form .field {
	display: flex;
	flex-direction: column;
	gap: var(--button-icon-gap);
}
section[name=contact] .form .field.width-5 {
	width: calc(50% - var(--gap-xs) / 2);
}
section[name=contact] .form .field.full-w {
	width: 100%;
}
section[name=contact] .form input[type="text"],
section[name=contact] .form input[type="email"],
section[name=contact] .form input[type="tel"],
section[name=contact] .form textarea {
	width: 100%;
	padding: var(--form-input-padding);
	background: var(--shade-white);
	border: none;
	color: var(--font-color-default);
	border-radius: var(--border-radius-input);
	font-family: inherit;
	font-size: var(--font-size-default);
	font-weight: var(--font-weight-default);
}
section[name=contact] .form textarea {
	min-height: 120px;
	resize: vertical;
}
section[name=contact] .form input::placeholder,
section[name=contact] .form textarea::placeholder {
	color: var(--shade-grey-medium);
}
section[name=contact] .form input:focus,
section[name=contact] .form textarea:focus {
	outline: none;
	background: var(--shade-white);
	box-shadow: 0 0 0 var(--border-default-width) var(--color-main);
}
section[name=contact] .form input[type="submit"] {
	background: var(--color-main);
	color: var(--shade-white);
	border: none;
	cursor: pointer;
	padding: var(--button-padding);
	font-weight: var(--font-weight-button);
	font-size: var(--font-size-button);
	text-align: center;
	transition: background var(--button-transition);
}
section[name=contact] .form input[type="submit"]:hover {
	background: var(--color-second);
}
@media only screen and (max-width: 992px) and (orientation: portrait) {
	section[name=contact] {
		background: var(--shade-white) !important;
	}
	section[name=contact] .container-bg {
		display: block !important;
		background: var(--shade-white);
	}
	section[name=contact] .container-bg > div {
		display: none !important;
	}
	section[name=contact] .container-bg + picture {
		position: initial !important;
		bottom: initial !important;
		left: initial !important;
		width: 100% !important;
	}
	section[name=contact] .container-form-wrap {
		width: 100% !important;
	}
	section[name=contact] .container-buttons {
		flex-wrap: nowrap !important;
	}
	section[name=contact] .container-buttons button {
		flex: 1 1 50%;
		white-space: nowrap;
		padding: 0.625rem 0.75rem;
		font-size: 0.875rem;
		line-height: 1.1;
	}
	section[name=contact] .form input:not([type="submit"]),
	section[name=contact] .form textarea {
		background: var(--bg-light) !important;
	}
	section[name=contact] .form input:not([type="submit"]):focus,
	section[name=contact] .form textarea:focus {
		background: var(--bg-light) !important;
	}
	section[name=contact] .form .width-5 {
		width: 100%;
	}
}