@font-face {
	font-family: "Brut-Regular";
	src: url("../fonts/Brut_Grotesque_WEBL-Book.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: "Brut-Regular";
	src: url("../fonts/Brut_Grotesque_WEBL-Book_Italic.woff2") format("woff2");
	font-weight: normal;
	font-style: italic;
	font-display: swap
}

:root:has(body.frontend) {
	
	--maxWidth: 1720px;
	
	--colorBrownDark: #24211E;
	--colorBrownMedium: #988E85;
	--colorBrownLight: #F5F3F1;
	
	--colorWhite: #FFFFFF;
	
	--colorBlueDark: #0076F5;
	--colorBlueMedium: #60ABFB;
	--colorRed: red;
	
	--transparent: transparent;
	
	--laikaGradient: linear-gradient(to bottom,#36322D,#615950);
	
	--fontFamily: "Brut-Regular";
	
	--fontSize12: 0.6rem;
	--fontSize14: 0.7rem;
	--fontSize16: 0.8rem;
	--fontSize18: 0.9rem;
	--fontSize20: 1rem;
	--fontSize21: 1.05rem;
	--fontSize24: 1.2rem;
	--fontSize26: 1.3rem;
	--fontSize28: 1.4rem;
	--fontSize32: 1.6rem;
	--fontSize34: 1.7rem;
	--fontSize36: 1.8rem;
	--fontSize40: 2rem;
	--fontSize42: 2.1rem;
	--fontSize44: 2.2rem;
	--fontSize46: 2.3rem;
	--fontSize48: 2.4rem;
	--fontSize64: 3.2rem;
	--fontSize96: 4.8rem;
	--fontSize128: 6.4rem;
	--fontSize220: 11rem;
	
	/* Typography Presets */
	--text-xs: 400 var(--fontSize12) / 1.333 var(--fontFamily);   /* 12 / 16 */
	--text-sm: 400 var(--fontSize14) / 1.429 var(--fontFamily);   /* 14 / 20 */
	--text-md: 400 var(--fontSize16) / 1.5 var(--fontFamily);     /* 16 / 24 */
	
	--text-lg: 400 var(--fontSize20) / 1.4 var(--fontFamily);     /* 20 / 28 */
	--text-xl: 400 var(--fontSize24) / 1.333 var(--fontFamily);   /* 24 / 32 */
	--text-2xl: 400 var(--fontSize32) / 1.25 var(--fontFamily);   /* 32 / 40 */
	
	--text-3xl: 400 var(--fontSize40) / 1.2 var(--fontFamily);    /* 40 / 48 */
	--text-4xl: 400 var(--fontSize48) / 1.167 var(--fontFamily);  /* 48 / 56 */
	--text-5xl: 400 var(--fontSize64) / 1.125 var(--fontFamily);  /* 64 / 72 */
	--text-6xl: 400 var(--fontSize96) / 1.063 var(--fontFamily);  /* 96 / 102 */
	--text-7xl: 400 var(--fontSize128) / 1.063 var(--fontFamily); /* 128 / 136 */
	--text-8xl: 400 var(--fontSize220) / 1 var(--fontFamily);     /* 220 / 220 */
	
	--text-sm-mobile: 400 var(--fontSize28) / 1.333 var(--fontFamily);
	--text-lg-mobile: 400 var(--fontSize36) / 1.277 var(--fontFamily); 
	--text-xl-mobile: 400 var(--fontSize42) / 1.333 var(--fontFamily);
	--text-xs-mobile: 400 var(--fontSize24) / 1.333 var(--fontFamily); 
	
	
	
	--sideSpacing: 1.2rem;
	--headerHeight: 4.6rem;
	--borderRadius: 0.4rem;
	--outerSpacing: calc( calc(100vw - var(--maxWidth)) / 2);
	--sectionSpacing: 6rem;
	--topHeaderBannerHeight: 3rem;
	
	--borderWidth: 0.1rem; /* 2px */
	--megamenuItemWidth: 15.8rem;
	
	

	@media only screen and (max-width: 1720px) {
		--outerSpacing: 0rem;
		
		--sectionSpacing: 4rem;
	}
	
	@media only screen and (max-width: 767px) {
		--topHeaderBannerHeight: 4rem;
	}
	
	
}


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

html:has(body.frontend) {
	font-size: 17.8px;
	
	@media only screen and (max-width: 1720px) {
		font-size: 1.04vw;
	}
	
	@media only screen and (max-width: 767px) {
		font-size: 2.55vw;
	}
}

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.275;
	-webkit-text-size-adjust: 100%;
	font-family: "Brut-Regular";
	color: var(--colorBrownDark);
	
	input[type=text],
	input[type=email],
	input[type=tel],
	input[type=url],
	input[type=search],
	input[type=submit],
	input[type=date],
	button:not(.cta__button) {
	  appearance: none;
	  -moz-appearance: none;
	  -webkit-appearance: none;
	  border-radius: 0;
	  -moz-border-radius: 0;
	  -webkit-border-radius: 0;
	}
	
	/*
	input:-webkit-autofill,
	input:-webkit-autofill:hover,
	input:-webkit-autofill:focus,
	input:-webkit-autofill:active,
	select:-webkit-autofill,
	select:-webkit-autofill:hover,
	select:-webkit-autofill:focus,
	select:-webkit-autofill:active {
		transition: background-color 5000000s ease-in-out 0s;
	}
	*/
	
	input:-webkit-autofill,
	input:-webkit-autofill:hover,
	input:-webkit-autofill:focus,
	textarea:-webkit-autofill,
	select:-webkit-autofill {
	  -webkit-text-fill-color: #222;
	  -webkit-box-shadow: 0 0 0 1000px #fff inset;
	  box-shadow: 0 0 0 1000px #fff inset;
	  caret-color: #222;
	}
	
	*, *:before, *:after {
		-moz-box-sizing: border-box; 
		-webkit-box-sizing: border-box; 
		box-sizing: border-box;
	}
	
	input:focus,
	textarea:focus,
	button:focus {
		outline: none;
	}
	
	input:focus-visible,
	textarea:focus-visible,
	button:focus-visible {
		outline: 2px solid var(--colorBlueDark);
		outline-offset: 2px;
	}
	
	img {
		border: 0;
	}

	&.overlay-is-open,
	&:has(header.is-open) {
	
		overflow: hidden;
	
	}
	
	::selection {
	
		background: var(--colorBrownMedium);
		color: var(--colorBrownLight);
	
	}
}



body.frontend .innerwrapper,
.acfe-flexible-placeholder .innerwrapper {
	margin: 0 auto;
	width: calc(100% - var(--sideSpacing) - var(--sideSpacing));
	max-width: calc(var(--maxWidth) - var(--sideSpacing) - var(--sideSpacing));
	padding-inline: var(--sideSpacing);
	
	&.small {
		padding-inline: calc(var(--sideSpacing) * 7.5);
		
		@media only screen and (max-width: 767px) {
			padding-inline: var(--sideSpacing);
		}
	}

}

body.frontend p {
	&:first-child {
		margin-top: 0;
	}
	
	&:last-child {
		margin-bottom: 0;
	}
}

body.frontend .top-header-banner {
	background-color: var(--colorBrownDark);
	position: fixed;
	left: 0;
	width: 100%;
	z-index: 1001;
	box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.34);
	
	.innerwrapper {
		height:var(--topHeaderBannerHeight);
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		
		gap: 0 2rem;
		
		.top-header-banner-content {
			color: var(--colorBrownLight);
			font: var(--text-lg);
			text-align: center;
			
			.cta__link {
				font: inherit;
			}
			
			@media only screen and (max-width: 767px) {
				font: var(--text-lg);	
				text-align: left;
			}
		}
		
		.close_top-header-banner {
			font-size: 0;
			line-height: 0;
		
			background: transparent;
			border: 0;
			padding: 0;
			margin: 0;
		
			cursor: pointer;
		
			width: 1.2rem;
			
			@media only screen and (max-width: 767px) {
				width: 1.6rem;
			}
		
			svg {
				width: 100%;
				height: auto;
		
				rect {
					fill: var(--colorBrownLight);
				}
			}
		}
	}
}

body.frontend:has(.top-header-banner){
	header {
		top: calc(var(--sideSpacing) + var(--topHeaderBannerHeight));
	}
	.section__hero-image {
		.innerwrapper {
			@media only screen and (max-width: 767px) {
				padding-top: calc(9.8rem + var(--topHeaderBannerHeight));
			}
		}
	}
}

body.frontend header {
	--headerColor: var(--colorWhite);
	--headerBackgroundColor: transparent;
	position: fixed;
	top: var(--sideSpacing);
	width: calc(100% - var(--sideSpacing) - var(--sideSpacing));
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--headerBackgroundColor);
	border-radius: var(--borderRadius);
	max-width: calc(var(--maxWidth) - var(--sideSpacing) - var(--sideSpacing));
	z-index: 1001;


	isolation: isolate;
	overflow: clip;
	
	transition:
		background-color 0.3s ease,
		color 0.3s ease,
		box-shadow 0.3s ease;
		
	overflow: clip;

	&::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		pointer-events: none;
	
		background: linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.38) 0%,
			rgba(0, 0, 0, 0.32) 45%,
			rgba(0, 0, 0, 0.30) 100%
		);
	
		backdrop-filter: blur(1rem) saturate(180%);
		-webkit-backdrop-filter: blur(1rem) saturate(180%);
	
		opacity: 0;
		transition: opacity 0.3s ease;
	}
	
	@media only screen and (max-width: 767px) {
		top: calc(var(--sideSpacing) * 1.6);
		max-height: calc(100svh - calc(var(--sideSpacing) * 1.6) - calc(var(--sideSpacing) * 1.6));
		display: flex;
		flex-direction: column;
	}
	
	&.dark {
		--headerColor: var(--colorBrownDark);
		--headerBackgroundColor: transparent;
	}
	
	&.light {
		--headerColor: var(--colorWhite);
		--headerBackgroundColor: transparent;
	}
	
	&.is-open {
		--headerColor: var(--colorWhite);
		--headerBackgroundColor: var(--colorBrownDark);
		box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.34), 0 1.2rem 3.2rem rgba(0, 0, 0, 0.36);
		
		
		&::before {
			opacity: 0;
		}
		
		.main__header {
			
			
			.innerwrapper {
				.logo {
					@media only screen and (max-width: 767px) {
						/*width: 5rem;*/
						transform: scale(1);
					}
				}
				
				.open_close_nav {
					> svg {
						@media only screen and (max-width: 767px) {
							/*width: 2.9rem;*/
							transform: scale(1);
						}
					}
				}
			}
		}
	}
	
	&.is-fixed {
		--headerColor: var(--colorWhite);
		/*--headerBackgroundColor: var(--colorBrownDark);*/
		
		
		&:not(.is-open)::before {
			opacity: 1;
		}
		
		.main__header {
			
			
			.innerwrapper {
				.logo {
					@media only screen and (max-width: 767px) {
						/*width: 5rem;*/
						transform: scale(1);
					}
				}
				
				.open_close_nav {
					> svg {
						@media only screen and (max-width: 767px) {
							/*width: 2.9rem;*/
							transform: scale(1);
						}
					}
				}
			}
		}
	}
	
	
	.main__header {
		.innerwrapper {
			height: var(--headerHeight);
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-inline: 0;
			
			.logo {
				display: block;
				font-size: 0;
				line-height: 0;
				width: 6.65rem;
				
				@media only screen and (max-width: 767px) {
					width: 5rem;
					/*transition: width 200ms ease-out;*/
					transform: scale(1.5);
					transition: transform 200ms ease-out;
					transform-origin: left 50%;
				}
				
				svg {
					width: 100%;
					height: auto;
					
					path {
						fill: var(--headerColor);
					}
				}
			}
			
			.open_close_nav {
				border: 0;
				padding: 0;
				margin: 0;
				background-color: transparent;
				font-size: 0;
				line-height: 0;
				display: flex;
				align-items: center;
				gap: 0 0.9rem;
				cursor: pointer;
				
				> span {
					font: var(--text-2xl);
					color: var(--headerColor);
					
					@media only screen and (max-width: 767px) {
						display: none;	
					}
				}
				
				> svg {
					width: 2.9rem;
					height: auto;
					
					@media only screen and (max-width: 767px) {
						width: 2.9rem;
						/*transition: width 200ms ease-out;*/
						transform: scale(1.5);
						transition: transform 200ms ease-out;
						transform-origin: right 50%;
					}
					
					path {
						fill: var(--headerColor);
						transform-origin: center;
						transform-box: fill-box;
						transition: transform 0.3s ease, opacity 0.3s ease;
					}
				}

				&.is-open > svg path:first-child {
					transform: translateY(7px) rotate(45deg);
				}
				
				/* Bottom Line */
				&.is-open > svg path:last-child {
					transform: translateY(-7px) rotate(-45deg);
				}
			}
		}
	}
	
	.navigation__overlay {
		opacity: 0;
		pointer-events: none;
		--columnWidth: 13.8rem;
		
		@media only screen and (max-width: 767px) {
			--columnWidth: 100%;	
			/*height: calc(100svh - var(--headerHeight) - calc(var(--sideSpacing) * 1.6) - calc(var(--sideSpacing) * 1.6));
			overflow-y: scroll;*/
			flex: 1;
			
		}
		
		> .innerwrapper {
			padding-top: 3rem;
			padding-bottom: 2.4rem;
			
			@media only screen and (max-width: 767px) {
				width: 100%;
				padding-inline: 0;	
				padding-top: 0;
			}
			
			nav {
				position: relative;
				
				
				
				> ul {
					list-style-type: none;
					margin: 0;
					padding: 0;
					display: flex;
					flex-direction: column;
					
					@media only screen and (max-width: 767px) {
						transition: transform 200ms ease-out;
						padding-top: 3.3rem;
						
						&:has(>.nav-item.has-megamenu.is-active){
							transform: translateX(calc(var(--columnWidth) * -1));
							
						}
					}
					
					> .nav-item {
						list-style-type: none;
						margin: 0;
						padding: 0;
						font: var(--text-2xl);
						
						&:first-child {
							> a,
							> button {
								padding-top: 0;
							}
							
						}
						
						&:last-child {
							> a,
							> button {
								padding-bottom: 0;
							}
						}
						
						> a,
						> button {
							padding: 0.55em 0;
							margin: 0;
							background: transparent;
							font: var(--text-2xl);
							border: 0;
							color: var(--colorWhite);
							display: flex;
							justify-content: space-between;
							width: var(--columnWidth);
							text-decoration: none;
							transition: color 0.25s ease;
							cursor: pointer;
							
							@media only screen and (max-width: 767px) {
								font: var(--text-4xl);
								width: 100%;
								padding-inline: calc(var(--sideSpacing) * 2);
							}
							
							> svg {
								width: 0.7em;
								height: auto;
								
								path {
									transition: fill 0.25s ease;
								}
							}
						}
						
						> a {
							&:hover {
								color: var(--colorBrownMedium);
							}
						}
						
						&.has-megamenu {
						
							> .megamenu {
								left: var(--columnWidth);
								width: calc(100% - var(--columnWidth));
								position: absolute;
								top: 0;
								//background-color: red;
								padding-left: 3.1rem;
								opacity: 0;
								visibility: hidden;
								pointer-events: none;
								transition:
									opacity 0.25s ease,
									visibility 0s linear 0.25s;
								color: var(--colorWhite);
								
								@media only screen and (max-width: 767px) {
									width: var(--columnWidth);
									padding-inline: calc(var(--sideSpacing) * 2);
									max-height: calc(100svh - var(--headerHeight) - calc(var(--sideSpacing) * 1.6) - calc(var(--sideSpacing) * 1.6));
									overflow-y: scroll;
									padding-block: 3.3rem;
								}
								
								.megamenue__mobile-back-link {
									display: none;
									
									@media only screen and (max-width: 767px) {
										display: grid;
										grid-template-columns: 0.7em 1fr 0.7em;
										width: 100%;
										justify-content: center;
										color: var(--colorBrownMedium);
										padding: 0;
										background: transparent;
										font: var(--text-4xl);
										height: auto;
										border: 0;
										margin-bottom: 4rem;
										align-items: center;
										
										svg {
											width: 100%;
											height: auto;
										}
									}
								}
							}
							
							&.is-active {
								
								> button {
									color: var(--colorBrownMedium);
									
									> svg {
										path {
											fill: var(--colorBrownMedium);
										}
									}
								}
								> .megamenu {
									opacity: 1;
									visibility: visible;
									pointer-events: auto;
									transition:
										opacity 0.25s ease,
										visibility 0s linear 0s;
								}
							}
						}

					}
				}

			}
		}
	}
	
	
}

.pre-footer-footnotes {
	border-top: 1px solid var(--colorBrownLight);
	
	.innerwrapper {
		font: var(--text-md);
		padding-bottom: 3rem;
		padding-top: 3rem;
		color: var(--colorBrownDark);
		display: flex;
		flex-direction: column;
		gap: 1lh;
		
		a {
			color: inherit;
		}
		
		.laika-pim-footnote {
			opacity: 0.5;
		}
	}
}

body.frontend footer {
	background-color: var(--colorBrownDark);
	color: var(--colorWhite);
	
	@media only screen and (max-width: 767px) {
		
	}
	
	.innerwrapper {
		display: grid;
		grid-template-columns: 20fr 21.7fr 19.3fr 18.3fr 20.7fr;
		grid-template-rows: auto auto 1fr auto;
		padding-top: 2.6rem;
		gap: 2rem 0;
		padding-bottom: 2.6rem;
		
		@media only screen and (max-width: 767px) {
			display: flex;
			flex-direction: column;	
			padding-top: 3.4rem;
			gap: 4rem 0;
			padding-bottom: 12rem;
		}
		
		.icon__holder {
			grid-column: 1/3;
			grid-row: 1/2;
			margin-bottom: auto;
			
			@media only screen and (max-width: 767px) {
				grid-column: unset;
				grid-row: unset;	
				order: 1;
			}
			
			> span {
				color: var(--colorWhite);
			}
		}
		
		.newsletter__sign-up {
			width: 100%;
			grid-column: 3/6;
			grid-row: 1/2;
			display: flex;
			flex-wrap: wrap;
			gap: 0.5rem;
			position: relative;
			
			@media only screen and (max-width: 767px) {
				grid-column: unset;
				grid-row: unset;	
				order: 2;
			}
			
			.newsletter-title {
				display: block;
				width: 100%;
				font: var(--text-md);
				color: var(--colorWhite);
				
				@media only screen and (max-width: 767px) {
					font: var(--text-xl);	
				}
			}
			
			.newsletter__sign-up-wrapper {
				/*background-color: var(--colorWhite);*/
				/*height: 7.5rem;*/
				width: 100%;
				/*border-radius: var(--borderRadius);
				opacity: 0.2;*/
				
				
				.wpcf7 {
					.wpcf7-form {
						display: grid;
						grid-template-columns: repeat(2, 1fr) 9rem;
						grid-template-rows: 1fr 1fr auto;
						gap: 0.5rem 0.5rem;
						
						@media only screen and (max-width: 767px) {
							grid-template-rows: 1fr 1fr auto;
							grid-template-rows: auto auto auto 1fr;
							gap: 1rem 1rem;
						}
						
						.single-field {
							position: relative;
							
							@media only screen and (max-width: 767px) {
								&:has([data-name="your-email"]){
									grid-column: span 2;
								}
							}
							
							
							p {
								margin: 0 !important;
								position: relative;
							}
							
							&:not(.acceptance) label {
								position: absolute;
								width: 1px;
								height: 1px;
								padding: 0;
								margin: -1px;
								overflow: hidden;
								clip: rect(0, 0, 0, 0);
								white-space: nowrap;
								border: 0;
							}
							
							input[type="text"],
							input[type="email"],
							input[type="date"],
							textarea,
							button.wpcf7-submit{
								margin: 0;
								border: 0;
								padding: 0;
								background-color: var(--colorWhite);
								display: block;
								width: 100%;
								height: auto;
								border-radius: var(--borderRadius);
								font: var(--text-xl);
								color: var(--colorBrownDark);
								resize: none;
								padding: 0.94rem 1.5rem;
								
								@media only screen and (max-width: 767px) {
									
									font: var(--text-sm-mobile);
								}
								
								&.wpcf7-not-valid {
									outline: 1px solid var(--colorRed);
								}
							}
							
							&:has(#first-name){
								grid-column: 2/3;
								grid-row: 1/2;
								
								@media only screen and (max-width: 767px) {
									grid-column: 1/2;
									grid-row: 2/3;
								}
							}
							
							&:has(#last-name){
								grid-column: 2/3;
								grid-row: 2/3;
								
								@media only screen and (max-width: 767px) {
									grid-column: 2/3;
									grid-row: 2/3;
								}
							}
							
							&:has(#your-email){
								grid-column: 1/2;
								grid-row: 1/3;
								
								@media only screen and (max-width: 767px) {
									grid-column: 1/3;
									grid-row: 1/2;
								}
							}
							
							&:has(button.wpcf7-submit){
								grid-column: 3/4;
								grid-row: 1/3;
								
								@media only screen and (max-width: 767px) {
									grid-column: 3/4;
									grid-row: 1/3;
								}
							}

							
							#your-email,
							button.wpcf7-submit {
								height: 7.5rem;
							}
							
							button.wpcf7-submit {
								@media only screen and (max-width: 767px) {
									height: 8.5rem;	
								}
							}
							
							#your-email {
								@media only screen and (max-width: 767px) {
									height: auto;	
								}
								
							}
							
							button.wpcf7-submit {
								cursor: pointer;
								background-color: var(--colorBlueDark);
								color: var(--colorWhite);
								display: flex;
								
								&[disabled]{
									opacity: 0.5;
								}
								
							}
							
							&.acceptance {
								grid-column: 1/4;
								grid-row: 3/4;
								margin-top: 0.1rem;
								
								.wpcf7-acceptance {
									.wpcf7-list-item {
										margin: 0;
										display: block;
										
										label {
											color: var(--colorWhite);
											position: relative;
											
											
											> input {
												position: absolute;
												width: 0;
												height: 0;
												left: -9999999px;
												opacity: 0;
											}
											
											.wpcf7-list-item-label {
												font: var(--text-md);
												display: block;
												position: relative;
												padding-left: 2.5em;
												padding-right: 2em;
												text-wrap: balance;
												
												@media only screen and (max-width: 767px) {
													font: var(--text-xl);
													padding-right: 0;
													text-wrap: unset;
												}
												
												&:before {
													content: '';
													display: block;
													width: 1.8em;
													height: auto;
													aspect-ratio: 1/1;
													background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none' viewBox='0 0 28 28'><rect width='28' height='28' fill='%23fff' rx='14'/></svg>");	
													background-repeat: no-repeat;
													background-size: 98% auto;
													background-position: center;
													position: absolute;
													left: 0;
													top: -0.1em;
												}
												
												
												
											}
											
											>input:checked + .wpcf7-list-item-label {
												&:before {
													background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none' viewBox='0 0 28 28'><rect width='28' height='28' fill='%23fff' rx='14'/><path fill='%2324211e' d='m17.1 8-4.008 9.287-2.192-5.238-1.9.89L11.967 20h2.25L19 8.864z'/></svg>");
												}
											}
										}
									}
								}
							}
							
							&.submit {
								grid-column: 4/5;
								grid-row: 1/3;
								
								.wpcf7-spinner {
									position: absolute;
									right: 0.5rem;
									bottom: 0.5rem;
									margin: 0;
								}
							}
							
							.wpcf7-form-control-wrap {
								position: relative;
								
								.wpcf7-not-valid-tip {
									display: none;
									
								}
							}
						}
						
						.wpcf7-response-output {
							position: absolute;
							margin: 0;
							padding: 0;
							border: 0;
							right: 0;
							top: 0;
							font: var(--text-md);
							color: var(--colorBlueDark);
							
							@media only screen and (max-width: 767px) {
								grid-column: span 3;
								position: relative;
								
								font: var(--text-xl);	
							}
						}
					}
				}
				
			}
		}
		
		.footer__nav {
			list-style-type: none;
			margin: 0;
			padding: 0;
			display: grid;
			grid-template-columns: subgrid;
			font: var(--text-3xl);
			grid-column: 1 / 7;
			grid-row: 2 / 3;
			margin-bottom: 15.1rem;
			margin-top: 4rem;
		
			@media only screen and (max-width: 767px) {
				grid-column: unset;
				grid-row: unset;
				grid-template-columns: 1fr;
				margin-top: 0;
				font: var(--text-4xl);
				margin-top: -0.9rem;
				order: 3;
				margin-bottom: 3.9rem;
			}
		
			> li {
				list-style-type: none;
				margin: 0;
				padding: 0;
		
				@media only screen and (max-width: 767px) {
					border-bottom: var(--borderWidth) solid var(--colorBrownMedium);
				}
				
				&.only__mobile {
					display: none;
					
					@media only screen and (max-width: 767px) {
						display: block;	
					}
				}
		
				> ul {
					list-style-type: none;
					margin: 0;
					padding: 0;
					display: flex;
					flex-direction: column;
					gap: 0.4rem 0;
		
					@media only screen and (max-width: 767px) {
						gap: 0;
					}
		
					> li {
						list-style-type: none;
						margin: 0;
						padding: 0;
		
						> span,
						> .footer__nav-toggle {
							color: var(--colorBrownMedium);
						}
		
						> a {
							color: var(--colorWhite);
							text-decoration: none;
						}
		
						@media only screen and (max-width: 767px) {
							&:not(:first-child) {
								display: none;
							}
						}
					}
				}
		
				&.is-open {
					> ul {
						> li:not(:first-child) {
							@media only screen and (max-width: 767px) {
								display: block;
				
								> a {
									display: block;
									padding-bottom: 0.4rem;
								}
				
				
								&:last-child > a {
									padding-bottom: 1rem;
								}
							}
						}
					}
				}
			}
		}
		
		.footer__nav-toggle {
			display: block;
			width: 100%;
			margin: 0;
			padding: 0;
			border: 0;
			border-radius: 0;
			background: transparent;
			font: inherit;
			line-height: inherit;
			text-align: left;
			cursor: default;
		
			@media only screen and (max-width: 767px) {
				position: relative;
				padding: 0.75rem 2.5rem 0.75rem 0;
				cursor: pointer;
		
				&::after {
					content: "";
					position: absolute;
					top: 50%;
					right: 0;
					width: 0.7em;
					transform: translateY(-50%);
					height: auto;
					aspect-ratio: 17/18;
					background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='17' height='18' fill='none' viewBox='0 0 17 18'><path fill='%23988e85' d='M7.295 0h1.968v10.896c0 .984 0 1.8-.072 3.168a37 37 0 0 1 2.4-2.52l4.968-4.968v2.52l-8.28 8.28L0 9.096v-2.52l4.968 4.968a37 37 0 0 1 2.4 2.52c-.072-1.368-.072-2.184-.072-3.168z'/></svg>");	
					background-repeat: no-repeat;
					background-size: 98% auto;
					
					transition: transform 0.3s ease;
				}

		
				&[aria-expanded="true"]::after {
					transform: translateY(-50%) rotate(180deg);
				}
			}
		

		}
		
		.footer__logo {
			font-size: 0;
			line-height: 0;
			display: block;
			grid-column: 1/3;
			grid-row: 3/5;
			width: 25.7rem;
			
			@media only screen and (max-width: 767px) {
				grid-column: unset;
				grid-row: unset;	
				order: 5;
				width: 100%;
				margin-top: 4rem;
			}
			
			svg {
				width: 100%;
				height: auto;
			}
		}
		
		.footer__additional-nav {
			display: flex;
			justify-content: space-between;
			list-style-type: none;
			margin: 0;
			padding: 0;
			grid-column: 3 / 7;
			grid-row: 3 / 4;
			margin-bottom: auto;
			
			@media only screen and (max-width: 767px) {
				grid-column: unset;
				grid-row: unset;	
				order: 4;
				flex-wrap: wrap;
				justify-content: flex-start;
				gap: 1rem 2rem;
			}
			
			li {
				list-style-type: none;
				margin: 0;
				padding: 0;
				
				a,
				button {
					display: flex;
					color: inherit;
					font: var(--text-xl);
					background: transparent;
					padding: 0;
					border: 0;
					align-items: center;
					gap: 0 0.5em;
					text-decoration: none;
					cursor: pointer;
					
					@media only screen and (max-width: 767px) {
						font: var(--text-sm-mobile);	
					}
					
					> svg {
						width: 0.9em;
						height: auto;
					}
					
					.angle-arrow {
						line-height: 0;
						display: block;
						width: 0.65em;
						
						> svg {
							width: 100%;
							height: auto;
						}
					}
				}
			}
		}
		
		.generic {
			display: flex;
			justify-content: space-between;
			list-style-type: none;
			margin: 0;
			padding: 0;
			font: var(--text-md);
			grid-column: 3 / 7;
			grid-row: 4 / 5;
			color: var(--colorBrownMedium);
			
			@media only screen and (max-width: 767px) {
				grid-column: unset;
				grid-row: unset;	
				order: 6;
				display: none;
			}
			
			li {
				list-style-type: none;
				margin: 0;
				padding: 0;
				
				a {
					color: inherit;
					text-decoration: none;
				}
			}
		}
	}
}

body.frontend .wpcf7-not-valid-tip {
	font: var(--text-md);
	color: var(--colorRed);
}

.megamenu__vehicle-grid {
	display: flex;
	gap: 0 6.7rem;
	flex-wrap: wrap;
	
	@media only screen and (max-width: 767px) {
		gap: 4rem 0;
	}
	
	.button__holder {
		width: 100%;
		margin-top: 4rem;
		display: grid;
		grid-template-columns: var(--megamenuItemWidth) 1fr;
		gap: 0 2.2rem;
		align-items: center;
		color: var(--colorWhite);
		
		@media only screen and (max-width: 767px) {
			margin-top: 0;
			display: flex;
			flex-direction: column;	
			gap: 1.5rem;
		}
		
		.cta__button {
			padding-block: 0.6em;
		}
		
	}
	
	.vehicle-wrapper {
		display: flex;
		flex-direction: column;
		gap: 1rem 0;
		
		@media only screen and (max-width: 767px) {
			width: 100%;	
		}
		
		.vehicle-wrapper-title {
			width: 100%;
			font: var(--text-md);
			margin: 0;
			display: block;
			
			@media only screen and (max-width: 767px) {
				font: var(--text-xl);
			}
			
			a {
				color: inherit;
				text-decoration: none;
			}
		}
		
		.vehicle-group {
			display: flex;
			gap: 1rem 1rem;
			
			@media only screen and (max-width: 767px) {
				flex-direction: column;	
			}

			.single__vehicle-card {
				border: var(--borderWidth) solid rgba(152, 142, 133, 0.1);
				background: var(--laikaGradient);
				width: var(--megamenuItemWidth);
				border-radius: var(--borderRadius);
				aspect-ratio: 1/1;
				height: auto;
				display: grid;
				grid-template-rows: 1fr 7rem 1fr;
				grid-template-columns: auto 1fr; 
				padding: 1rem 1.1rem 1.2rem 1.2rem;
				color: var(--colorWhite);
				text-decoration: none;
				background-clip: padding-box;
				transition: border-color 200ms ease-out;
				
				@media only screen and (max-width: 767px) {
					width: 100%;	
					aspect-ratio: 313 / 204;
					padding: 2rem 2.4rem 2rem 2.4rem;
					grid-template-rows: auto 1fr auto;
				}
				
				
				&:hover {
					border-color: var(--colorBrownMedium);
				}
				
				.vehicle-title {
					font: var(--text-xl);
					text-transform: uppercase;
					grid-column: span 2;
					line-height: 1;
					
					@media only screen and (max-width: 767px) {
						font: var(--text-3xl);	
					}
				}
				
				.image {
					grid-column: span 2;
					width: 100%;
					margin: auto;
					height: auto;
					aspect-ratio: 190 / 107;
					font-size: 0;
					line-height: 0;
					
					@media only screen and (max-width: 767px) {
						aspect-ratio: 230 / 100;
					}
					
					img {
						width: 100%;
						aspect-ratio: 190 / 107;
						object-fit: contain;
						height: auto;
						transform: scale(1.15) translateX(4%);
						
						
						@media only screen and (max-width: 767px) {
							aspect-ratio: 230 / 100;
							object-position: center center;
							
						}
					}
				}
				
				
				.price {
					font: var(--text-md);
					margin-top: auto;
					
					@media only screen and (max-width: 767px) {
						font: var(--text-2xl);	
					}
				}
				
				.laika__arrow {
					font-size: 0;
					line-height: 0;
					display: block;
					width: 1.2rem;
					margin-left: auto;
					margin-top: auto;
					position: relative;
					z-index: 5;
					grid-column: 2 / 3;
					grid-row: 3 / 4;
					
					@media only screen and (max-width: 767px) {
						width: 2.4rem;
					}
					
					svg {
						width: 100%;
						height: auto;
					}
				}
			}
		
		}
	}
	

}

.megamenu__default-grid {
	display: grid;
	grid-template-columns: repeat(4,var(--megamenuItemWidth));
	gap: 1rem 1rem;
	
	@media only screen and (max-width: 767px) {
		grid-template-columns: 100%;	
	}
	
	.single__default-card {
		border: var(--borderWidth) solid rgba(152, 142, 133, 0.1);
		background: var(--laikaGradient);
		width: 100%;
		border-radius: var(--borderRadius);
		aspect-ratio: 1/1;
		background-clip: padding-box;
		text-decoration: none;
		padding: 1rem 1.1rem 1.2rem 1.2rem;
		color: var(--colorWhite);
		position: relative;
		display: grid;
		grid-template-columns: 100%;
		grid-template-rows: 1fr auto;
		overflow: clip;
		transition: border-color 200ms ease-out;
		
		@media only screen and (max-width: 767px) {
			aspect-ratio: 313/208;
			padding: 2rem 2.4rem 2rem 2.4rem;
		}
		
		&:hover {
			border-color: var(--colorBrownMedium);
		}
		
		.card-title {
			font: var(--text-xl);
			position: relative;
			z-index: 5;
			
			@media only screen and (max-width: 767px) {
				font: var(--text-lg-mobile);	
			}
		}
		
		.laika__arrow {
			font-size: 0;
			line-height: 0;
			display: block;
			width: 1.2rem;
			margin-left: auto;
			margin-top: auto;
			position: relative;
			z-index: 5;
			
			@media only screen and (max-width: 767px) {
				width: 2.4rem;	
			}
			
			svg {
				width: 100%;
				height: auto;
			}
		}
		
		.image {
			font-size: 0;
			line-height: 0;
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			
			&:before {
				content: '';
				position: absolute;
				inset: 0;
				z-index: 3;
				pointer-events: none;
				background: rgba(36, 33, 30, 0.2)
			}
			
			img {
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		
	}
}

.megamenu__dealer-search {
	.dealer__search {
		.dealer__search-form {
			.dealer-search-form {
				display: grid;
				grid-template-columns: 1.2fr 1fr;
				width: 30rem;
				gap: 0 0.5rem;
				
				@media only screen and (max-width: 767px) {
					width: 100%;
					grid-template-columns: 100%;
					gap: 0.5rem 0;	
				}
			}
		}
	}
	.dealer__results {
		min-height: 11rem;
		margin-top: 2rem;
		display: flex;
		gap: 0 0.5rem;
		
		@media only screen and (max-width: 767px) {
			flex-direction: column;	
			gap: 2.5rem 0;
			min-height: 0;
		}
		
		.no-dealers-found {
			font: var(--text-lg);
			
			@media only screen and (max-width: 767px) {
				font: var(--text-2xl);
				
			}
		}
		
	}
	.button__holder {
		width: 15rem;
		margin-top: 2rem;
		align-items: center;
		color: var(--colorWhite);
		
		@media only screen and (max-width: 767px) {
			width: 100%;
			display: flex;
			justify-content: center;	
		}
		
		.cta__button {
			padding-block: 0.6em;
		}
		
	}
}

.single__dealer-compact {
	display: grid;
	grid-template-columns: 1rem 1fr;
	width: 15rem;
	font: var(--text-md);
	color: var(--colorWhite);
	gap: 0 0.7rem;
	
	@media only screen and (max-width: 767px) {
		font: var(--text-sm-mobile);	
		width: 100%;
		grid-template-columns: 1.7rem 1fr;
		gap: 0 1.2rem;
	}
	
	a {
		color: var(--colorBlueDark);
		text-decoration: none;
	}
	
	.dealer-number {
		margin-bottom: auto;
		font-size: 0.6rem;
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		border: 1px solid var(--colorWhite);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		
		@media only screen and (max-width: 767px) {
			font-size: 1rem;	
		}
	}
}

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

.cta__button {
	font: var(--text-xl);
	background-color: var(--colorBlueDark);
	color: var(--colorWhite);
	border-radius: var(--borderRadius);
	text-decoration: none;
	padding: 0.9em 1.1em;
	display: inline-flex;
	justify-content: space-between;
	border: 0;
	
	@media only screen and (max-width: 767px) {
		font: var(--text-sm-mobile);	
		padding-block: 1em;
	}
	
	&.blue {
		background-color: var(--colorBlueDark);
		color: var(--colorWhite);
		
		> svg {
			path[fill] {
				fill: var(--colorWhite);
			}
			path[stroke] {
				stroke: var(--colorWhite);
			}
		}
	}
	
	&.white {
		background-color: var(--colorWhite);
		color: var(--colorBrownDark);
		
		> svg {
			path[fill] {
				fill: var(--colorBrownDark);
			}
			path[stroke] {
				stroke: var(--colorBrownDark);
			}
		}
	}
	
	&:has(> svg){
		gap: 0 1.8em;
		
		@media only screen and (max-width: 767px) {
			padding-right: 1.1em;	
		}
		
		> svg {
			width: 0.7em;
			height: auto;
		}
	}
	
	&.with-subline {
		> svg {
			margin-bottom: auto;
			margin-top: 0.3em;
		}
		> span {
			display: flex;
			flex-direction: column;
			
			em {
				font-style: normal;
				opacity: 0.5;
			}
		}
		
		&.high {
			height: 4.5lh;
		}
	}
}

.cta__button-image {
	display: flex;
	font: var(--text-xl);
	background-color: var(--colorWhite);
	color: var(--colorBrownDark);
	border-radius: var(--borderRadius);
	text-decoration: none;
	padding: 0.4em 2.1em 0.4em 0.4em;
	gap: 0 1em;
	align-items: center;
	
	@media only screen and (max-width: 767px) {
		font: var(--text-sm-mobile);	
		justify-content: center;
		padding-right: 3.1em;
	}
	
	> svg {
		width: 0.8em;
		height: auto;
	}
	
	> img {
		width: 6.55rem;
		height: auto;
		aspect-ratio: 1/1;
		object-fit: cover;
		border-radius: var(--borderRadius);
		margin-right: 1.1em;
		
		@media only screen and (max-width: 767px) {
			width: 8.85rem;	
			margin-right: auto;
		}
	}
}

.cta__button-image-down {
	display: flex;
	font: var(--text-xl);
	background-color: var(--colorBrownLight);
	color: var(--colorBrownDark);
	border-radius: var(--borderRadius);
	text-decoration: none;
	padding: 0.4em 2.1em 0.4em 0.4em;
	gap: 0 1em;
	align-items: center;
	
	> span {
		display: flex;
		flex-direction: column;
		text-transform: uppercase;
		
		em {
			font: var(--text-md);
			font-style: normal;
			text-transform: none;
		}
	}
	
	> svg {
		width: 0.8em;
		height: auto;
		margin-left: 1em;
	}
	
	> img {
		width: 6.55rem;
		height: auto;
		aspect-ratio: 1/1;
		object-fit: cover;
		border-radius: var(--borderRadius);
		margin-right: 1.1em;
	}
}

.cta__link {
	font: var(--text-xl);
	text-decoration: none;
	display: inline-flex;
	color: var(--colorBlueDark);
	align-items: center;
	gap: 0 0.3em;
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	cursor: pointer;
	
	@media only screen and (max-width: 767px) {
		font: var(--text-sm-mobile);	
	}
	
	svg {
		width: 0.8em;
		height: auto;
		
		path {
			fill: var(--colorBlueDark);
		}
	}
	
	&.blue-medium {
		color: var(--colorBlueMedium);
		
		svg {
			
			path {
				fill: var(--colorBlueMedium);
			}
		}
	}
}

.cta__text-link {
	font: var(--text-md);
	text-decoration: none;
	color: inherit;
	
	@media only screen and (max-width: 767px) {
		font: var(--text-sm-mobile);	
	}
}

body.frontend section,
.acfe-flexible-placeholder section {
	--backgroundColor: transparent;
	--color: var(--colorBrownDark);
	background-color: var(--backgroundColor);
	color: var(--color);
	scroll-margin-top: calc(var(--headerHeight) + calc(var(--sideSpacing) * 2));
	overflow-x: clip;
	--multiplicatorTop: 1;
	--multiplicatorBottom: 1;
	--sectionSpacingSectionTop: calc(var(--sectionSpacing) * var(--multiplicatorTop));
	--sectionSpacingSectionBottom: calc(var(--sectionSpacing) * var(--multiplicatorBottom));
	
	&[data-top-spacing="xsmall"] {
		padding-top: calc(var(--sectionSpacingSectionTop) * 0.4);
	}
	
	&[data-top-spacing="small"] {
		padding-top: calc(var(--sectionSpacingSectionTop) * 0.7);
	}
	
	&[data-top-spacing="medium"] {
		padding-top: var(--sectionSpacingSectionTop);
		

	}
	
	&[data-top-spacing="large"] {
		padding-top: calc(var(--sectionSpacingSectionTop) * 1.5);
	}
	
	&[data-top-spacing="xlarge"] {
		padding-top: calc(var(--sectionSpacingSectionTop) * 2);
		
		@media only screen and (max-width: 767px) {
			padding-top: calc(var(--sectionSpacingSectionTop) * 1.67);
		}
	}
	
	&[data-bottom-spacing="xsmall"] {
		padding-bottom: calc(var(--sectionSpacingSectionBottom) * 0.4);
	}
	
	&[data-bottom-spacing="small"] {
		padding-bottom: calc(var(--sectionSpacingSectionBottom) * 0.7);
	}
	
	&[data-bottom-spacing="medium"] {
		padding-bottom: var(--sectionSpacingSectionBottom);
		

	}
	
	&[data-bottom-spacing="large"] {
		padding-bottom: calc(var(--sectionSpacingSectionBottom) * 1.5);
	}
	
	&[data-bottom-spacing="xlarge"] {
		padding-bottom: calc(var(--sectionSpacingSectionBottom) * 2);
		
		@media only screen and (max-width: 767px) {
			padding-bottom: calc(var(--sectionSpacingSectionBottom) * 1.67);
		}
	}
	

	
}

body.frontend section {
	&:not(.section__hero-image):not(.section__hero-image-landingpage):first-child {
		/*padding-top: calc(var(--headerHeight) + 12rem) !important;*/
		padding-top: calc(var(--headerHeight) + 7rem) !important;
		
		@media only screen and (max-width: 767px) {
			padding-top: calc(var(--headerHeight) + 7rem) !important;	
		}
	}
}


.section__hero-image {
	position: relative;
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 100%;
	--color: var(--colorWhite) !important;
	
	.innerwrapper {
		position: relative;
		z-index: 1;
		grid-column: 1/2;
		grid-row: 1/2;
		height: 100svh;
		padding: 14.4rem var(--sideSpacing) calc(var(--sideSpacing) * 2) var(--sideSpacing);
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-rows: 1fr auto;
		max-height: 51.3rem;
		
		@media only screen and (max-width: 767px) {
			padding-top: 9.8rem;	
			max-height: unset;
			/*height: calc(100svh - 4rem);*/
			height: calc(100svh - 13rem);
			max-height: 67rem;
			min-height: 44rem;
			display: flex;
			flex-direction: column;
		}
		
		.hero__title {
			grid-column: 1/3;
			grid-row: 1/2;
			font: var(--text-5xl);
			
			@media only screen and (max-width: 767px) {
				grid-column: unset;
				grid-row: unset;	
			}
		}
		
		.laika__typo {
			grid-column: 1/2;
			grid-row: 2/3;
			width: 25.65rem;
			height: auto;
			
			@media only screen and (max-width: 767px) {
				grid-column: unset;
				grid-row: unset;	
				margin-top: auto;
				width: 100%;
			}
		}
		
		> h1 {
			grid-column: 1/2;
			grid-row: 2/3;
			margin: 0;
			font: var(--text-7xl);
			margin-bottom: -0.2em;
			
			@media only screen and (max-width: 767px) {
				grid-column: unset;
				grid-row: unset;
				
				
				&:not(.hero__title){
					font: var(--text-6xl);	
					margin-top: auto;
				}
			}
			
			&:has(.top__title){
				display: flex;
				flex-direction: column;
				gap: 0.2em 0;
				
				@media only screen and (max-width: 767px) {
					gap: 0.1em 0;	
				}
			}
			
			.top__title {
				display: block;
				font-size: var(--fontSize36) !important;
				
				@media only screen and (max-width: 767px) {
					font-size: var(--fontSize36) !important;	
				}
			}
		}
		
		.title__ehg {
			font: var(--text-md);
			margin-top: auto;
			grid-column: 2/3;
			grid-row: 2/3;
			margin-bottom: -0.4em;
			
			@media only screen and (max-width: 767px) {
				grid-column: unset;
				grid-row: unset;	
				margin-top: 0;
				font: var(--text-xl);
				margin-top: 1em;
			}
		}
	}
	
	.image {
		position: absolute;
		inset: 0;
		z-index: 0;
		grid-column: 1/2;
		grid-row: 1/2;
		
		&:before {
			content: '';
			display: block;
			position: absolute;
			inset: 0;
			background-color: var(--colorBrownDark);
			opacity: 0.2;
		}
		
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			
			@media only screen and (max-width: 767px) {
				object-position: 57% center;
			}
		}
	}
}

.section__hero-image-landingpage {
	position: relative;
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 100%;
	--color: var(--colorWhite) !important;
	
	.innerwrapper {
		position: relative;
		z-index: 1;
		grid-column: 1/2;
		grid-row: 1/2;
		height: 100svh;
		padding: 7.4rem var(--sideSpacing) calc(var(--sideSpacing) * 2) var(--sideSpacing);
		display: grid;
		max-height: 51.3rem;
		
		
		@media only screen and (max-width: 767px) {
			padding-top: 9.8rem;	
			max-height: unset;
			/*height: calc(100svh - 4rem);*/
			height: calc(100svh - 13rem);
			max-height: 67rem;
			min-height: 44rem;
			display: flex;
			flex-direction: column;
			
		}

		
		> h1 {
			grid-column: 1/2;
			grid-row: 1/2;
			margin: 0;
			font: var(--text-5xl);
			max-width: 15em;
			
			@media only screen and (max-width: 767px) {
				grid-column: unset;
				grid-row: unset;

			}

		}

	}
	
	.image {
		position: absolute;
		inset: 0;
		z-index: 0;
		grid-column: 1/2;
		grid-row: 1/2;
		
		&:before {
			content: '';
			display: block;
			position: absolute;
			inset: 0;
			background-color: var(--colorBrownDark);
			opacity: 0.2;
		}
		
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			
			@media only screen and (max-width: 767px) {
				object-position: 57% center;
			}
		}
	}
}

.breadcrumbs {
	margin-top: -0.4rem;
	margin-bottom: 6rem;
	
	@media only screen and (max-width: 767px) {
		margin-top: 0.9rem;
		margin-bottom: 4rem;
	}
	
	ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		display: flex;
		text-transform: uppercase;
		color: var(--color);
		font: var(--text-xl);
		letter-spacing: 0.05em;
		
		@media only screen and (max-width: 767px) {
			font: var(--text-lg);
		}
		
		li {
			list-style-type: none;
			margin: 0;
			padding: 0;
			opacity: 0.5;
			
			&[aria-current="page"]{
				opacity: 1;
			}
			
			a {
				color: inherit;
				text-decoration: none;
			}
			
			&:not(:last-child){
				&:after {
					content: '/';
					margin-inline: 0.84em;
				}
			}
			
		}
	}
}

.section__big-text {
	
	.innerwrapper {
		
		.content {
			font: var(--text-5xl);
		}
		
		.button__wrapper {
			display: flex;
			gap: 0 0.8rem;
			margin-top: 3rem;
		}
	}
}

.section__text-block {
	
	.innerwrapper {
		
		.content {
			
			p {
				font: var(--text-4xl) !important;
				
				@media only screen and (max-width: 767px) {
					font: var(--text-4xl) !important;
				}
			}
			
			h2 {
				font: var(--text-6xl) !important;
				margin: 0;
				
				@media only screen and (max-width: 767px) {
					font: var(--text-5xl) !important;
				}
				
				+ p {
					margin-top: 1.3em;
					
					@media only screen and (max-width: 767px) {
						margin-top: 0.9em;	
					}
				}
			}
		}
		
		.button__wrapper {
			display: flex;
			gap: 0 0.8rem;
			margin-top: 3rem;
		}
	}
}

.section__text-with-button {
	
	.innerwrapper {
		display: flex;
		gap: 0 5rem;
		
		.content {
			font: var(--text-5xl);
		}
		
		.cta__button {
			max-height: 4.5lh;
		}
		
	}
}

.section__text-with-links-button {
	
	.innerwrapper {
		display: grid;
		gap: 0 5rem;
		grid-template-columns: 1fr auto;
		
		@media only screen and (max-width: 767px) {
			grid-template-columns: 100%;	
		}
		
		.content {
			font: var(--text-2xl) !important;
			grid-column: 1/2;
			grid-row: 1/2;
			
			@media only screen and (max-width: 767px) {
				grid-column: unset;
				grid-row: unset;
				font: var(--text-sm-mobile) !important;
				order: 1;
			}	
			
			.topline {
				margin-top: -0.4em;
				
				+ h2 {
					margin-top: 0.4em;
				}
			}
			
			h2 {
				font: var(--text-6xl) !important;
				margin: 0;
				
				@media only screen and (max-width: 767px) {
					font: var(--text-5xl) !important;	
				}
				
				+ p {
					margin-top: 1.8em;
				}
			}
			
			p {
				max-width: 27em;
			}
		}
		
		.links__wrapper {
			grid-column: 1/2;
			grid-row: 2/3;
			margin-top: 6.5rem;
			display: flex;
			gap: 0 3rem;
			
			@media only screen and (max-width: 767px) {
				grid-column: unset;
				grid-row: unset;
				order: 3;
				flex-direction: column;
				margin-top: 3.5rem;
				gap: 1rem;
			}	
		}
		
		.cta__button {
			max-height: 4.5lh;
			grid-column: 2/3;
			grid-row: 1/3;
			margin-top: auto;
			margin-bottom: 0.7rem;
			
			@media only screen and (max-width: 767px) {
				grid-column: unset;
				grid-row: unset;
				order: 2;
				margin-top: 4rem;
				height: auto;
				
				> span {
					flex-direction: row;
					gap: 0 1ch;
				}
			}	
		}
		
	}
}

.section__vehicle-grid {
	.innerwrapper {
		
		.headline__wrapper {
			margin-bottom: 6rem;
		}
		
		.vehicle-grid {
			display: grid;
			grid-template-columns: repeat(2,1fr);
			gap: 4rem 1rem;
			
			@media only screen and (max-width: 767px) {
				grid-template-columns: 100%;	
				margin-top: 1.3rem;
				gap: 4.1rem 0;
			}
			
		}
		
		.button__container {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 2rem 0;
			
			@media only screen and (max-width: 767px) {
				padding-bottom: 1.5rem;
			}
		}
		
		.button__holder {
			margin-top: 4rem;
			display: flex;
			flex-direction: column;
			width: 100%;
			
			@media only screen and (max-width: 767px) {
				margin-top: 4.2rem;	
			}
			
			.fixed__button-container {
				width: 100%;
				background:
				linear-gradient(
					180deg,
					rgba(255,255,255,1) 0%,
					rgba(255,255,255,1) 45%,
					rgba(255,255,255,1) 100%
				);
				display: flex;
				max-width: 30.8rem;
				margin-inline: auto;
				font: var(--text-xl);
				color: var(--colorBrownDark);
				justify-content: space-between;
				align-items: center;
				padding: 1.8rem 2.3rem;
				border-radius: var(--borderRadius);
				z-index: 99;
				gap: 0 1.5em;
				transition: background 200ms ease-out,backdrop-filter 200ms ease-out,box-shadow 200ms ease-out;
				
				@media only screen and (max-width: 767px) {
					font: var(--text-sm-mobile);
					max-width: none;
					padding: 2.5rem 2rem;
				}
			
			}
			
			.fixed__button-container.is-sticky {
				position: fixed;
				z-index: 999;
				
				background:
				linear-gradient(
					180deg,
					rgba(255,255,255,.28) 0%,
					rgba(255,255,255,.12) 45%,
					rgba(255,255,255,.08) 100%
				);
				backdrop-filter: blur(1rem) saturate(200%);
				-webkit-backdrop-filter: blur(1rem) saturate(200%);
				box-shadow:
					0 0.4rem 1.6rem rgba(0,0,0,.12),
					inset 0 0.05rem 0 rgba(255,255,255,.05);
				color: var(--colorWhite);
			
			}
		}
	}
}

.single__vehicle-item {
	display: flex;
	flex-direction: column;
	gap: 1.2rem 0;
	
	> h2 {
		font: var(--text-2xl);
		margin: 0;
		color: var(--colorBrownMedium);
		
		@media only screen and (max-width: 767px) {
			font: var(--text-lg-mobile);
		}
		
		a {
			color: inherit;
			text-decoration: none;
		}
	}
	
	.single__vehicle-card {
		--color: var(--colorWhite);
		aspect-ratio: 902/1128;
		border-radius: var(--borderRadius);
		width: 100%;
		display: grid;
		overflow: clip;
		position: relative;
		padding: 2.5rem 2.5rem 2.4rem 2.5rem;
		grid-template-columns: 1fr auto;
		grid-template-rows: 1fr auto;
		color: var(--color);
		text-decoration: none;
		
		@media only screen and (max-width: 767px) {
			padding: 2rem 2rem 2rem 2rem;
		}
		
		.info {
			font: var(--text-xl);
			position: relative;
			z-index: 5;
			
			@media only screen and (max-width: 767px) {
				font: var(--text-sm-mobile);	
			}
			
			h3 {
				margin: 0;
				font: var(--text-5xl);
				text-transform: uppercase;
				margin-bottom: 0.2em;
				text-wrap: balance;
				max-width: 10em;
				
				+ p {
					margin-top: 0;
				}
			}
		}
		
		.manufacturer {
			font-size: 0;
			line-height: 0;
			display: block;
			width: auto;
			position: relative;
			z-index: 5;
			margin-left: auto;
			margin-bottom: auto;
			margin-top: 0.2rem;	
			
			@media only screen and (max-width: 767px) {
				margin-top: 0.2rem;	
			}
			
			svg {
				height: auto;
				width: 2.5rem;
				aspect-ratio: 1/1;
				object-fit: contain;
				
				@media only screen and (max-width: 767px) {
					width: 2.8rem;
				}
			}
		}
		
		.laika__arrow {
			font-size: 0;
			line-height: 0;
			display: block;
			width: 3.2rem;
			grid-column: 2/3;
			grid-row: 2/3;
			margin-left: auto;
			margin-top: auto;
			position: relative;
			z-index: 5;
			
			
			svg {
				width: 100%;
				height: auto;
			}
		}
		
		
		&:before {
			content: '';
			position: absolute;
			inset: 0;
			z-index: 3;
			pointer-events: none;
			background: rgba(0, 0, 0, 0.1);
		}
		
		.image,
		.video {
			font-size: 0;
			line-height: 0;
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			
			img,
			video {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		
		.video {
			z-index: 2;
			opacity: 0;
			pointer-events: none;
		}
		
	}
}

.topline {
	display: block;
	font: var(--text-xl);
	text-transform: uppercase;
	
	@media only screen and (max-width: 767px) {
		font: var(--text-sm-mobile);	
	}
}

.headline__wrapper {
	display: grid;
	grid-template-columns: 100%;
	gap: 0 1rem;
	
	@media only screen and (max-width: 767px) {
		gap: 1.2rem 0;
	}
	
	
	&:has(.content){
		grid-template-columns: 1fr 1fr;
		
		@media only screen and (max-width: 767px) {
			grid-template-columns: 100%;
		}
	}
	
	h1 {
		font: var(--text-7xl) !important;
		margin: 0;
		
		@media only screen and (max-width: 767px) {
			font: var(--text-6xl) !important;
		}
	}
	
	h2 {
		font: var(--text-6xl) !important;
		margin: 0;
		
		@media only screen and (max-width: 767px) {
			font: var(--text-5xl) !important;
		}
	}
	
	.content {
		font: var(--text-2xl);
		
		@media only screen and (max-width: 767px) {
			font: var(--text-lg-mobile);	
		}
	}
}

.section__accordion_horizontal {
	.innerwrapper {
		
		.accordion__slider-wrapper {
			margin-top: 4rem;

			@media only screen and (max-width: 767px) {
				overflow-x: auto;
				overflow-y: hidden;
				-webkit-overflow-scrolling: touch;
				scrollbar-width: none;
				width: calc(100% + calc(var(--sideSpacing) * 2) + calc(var(--sideSpacing) * 2));
				margin-inline: calc(var(--sideSpacing) * -2);
				padding-inline: calc(var(--sideSpacing) * 2);

				&::-webkit-scrollbar {
					display: none;
				}
			}
			
			.accordion__slider {
				--closedColumn: 0.5fr;
				--openColumn: 4.5fr;
				display: grid;
				grid-template-columns: var(--openColumn) var(--closedColumn) var(--closedColumn) var(--closedColumn) var(--closedColumn);
				gap: 1rem;
				
				@media only screen and (max-width: 767px) {
					display: flex;
					width: max-content;
					grid-template-columns: unset;	
					gap: 1.2rem;
				}
				
			}
			
			.single__slide {
				border-radius: var(--borderRadius);
				height: 45rem;
				width: 100%;
				position: relative;
				overflow: clip;
				cursor: pointer;
				
				@media only screen and (max-width: 767px) {
					width: 28.5rem;
					height: 35.6rem;
					flex-shrink: 0;
					flex-grow: 0;
				}	
				
				&:before {
				
					content: '';
					position: absolute;
					inset: 0;
					z-index: 2;
					pointer-events: none;
					background: linear-gradient(
						180deg,
						rgba(255, 255, 255, 0) 0%,
						rgba(0, 0, 0, 0) 45%,
						rgba(0, 0, 0, 0.45) 75%,
						rgba(0, 0, 0, 0.85) 100%
					);
				
				}
				
				&.is-active {
					.slide__number {
						left: 2.5rem;
					}
					
					.content {
						opacity: 1;
						transition: opacity 300ms 300ms ease-out;
					}
				}
				
				.slide__number {
					font-size: var(--fontSize40);
					color: var(--colorWhite);
					border: 0.1em solid var(--colorWhite);
					width: 1.65em;
					aspect-ratio: 1 / 1;
					line-height: 1;
					height: auto;
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					left: 1.7rem;
					z-index: 5;
					border-radius: 50%;
					top: 2.5rem;
					transition: left 300ms ease-out;
					
					@media only screen and (max-width: 767px) {
						left: 2.1rem;
						top: 2.1rem;	
					}
				}
				
				.content {
					position: absolute;
					left: 0;
					bottom: 0;
					width: 100%;
					padding: 2.5rem;
					display: grid;
					grid-template-columns: 1fr auto;
					z-index: 5;
					color: var(--colorWhite);
					opacity: 0;
					
					@media only screen and (max-width: 767px) {
						opacity: 1;	
						padding: 2rem 2rem 2.7rem 2rem;
					}
					
					.content-inner {
						font: var(--text-xl);
						
						@media only screen and (max-width: 767px) {
							font: var(--text-sm-mobile);	
						}
						
						h3 {
							font: var(--text-5xl);
							margin: 0;
							margin-bottom: 0.1em;
							
							+ p {
								margin-top: 0;
							}
						}
						
						> p {
							max-width: 35em;
							text-wrap: balance;
						}
						
					}
					
					
					.plus {
						padding: 0;
						margin: 0;
						width: 3.2rem;
						height: auto;
						background: transparent;
						border: 0;
						margin-top: auto;
						margin-bottom: -0.4rem;
						margin-right: -0.2rem;
						cursor: pointer;
						
						svg {
							width: 100%;
							height: auto;
							overflow: visible;
						}
					}
				}
				
				.image {
					font-size: 0;
					line-height: 0;
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					top: 0;
					height: 100%;
					object-fit: cover;
					width: auto;
					aspect-ratio: 922/660;
					z-index: 1;
					
					@media only screen and (max-width: 767px) {
						aspect-ratio: unset;
						transform: none;
						left: 0;
						width: 100%;
						height: 100%;	
					}
					
					> img {
						position: absolute;
						inset: 0;
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}

			}
		}
		
	}
}

.section__control {
	@media only screen and (max-width: 767px) {
		--multiplicatorTop: 1.5 !important; 
		--multiplicatorBottom: 1.2 !important; 	
	}
	
	.innerwrapper {
		.headline__wrapper {
			h2 {
				@media only screen and (max-width: 767px) {
					font: var(--text-6xl) !important;
				}
			}
		}
		.control__grid {
			display: grid;
			grid-template-columns: 1.02fr 1fr;
			gap: 1rem;
			margin-top: 4rem;
			margin-bottom: 4rem;
			
			@media only screen and (max-width: 767px) {
				grid-template-columns: 100%;	
			}
			
			
			.control__big__box {
				width: 100%;
				aspect-ratio: 902/1130;
				position: relative;
				border-radius: var(--borderRadius);
				overflow: clip;
				display: flex;
				flex-direction: column;
				color: var(--colorWhite);
				padding: 2.5rem 2.5rem 1.5rem 2.5rem;
				
				> h3 {
					font: var(--text-4xl);
					margin: 0;
					position: relative;
					z-index: 3;
					
					+ p {
						margin-top: 0;
					}
				}
				
				.teaser__wrapper {
					margin-top: auto;
					display: grid;
					grid-template-columns: repeat(2,1fr);
					position: relative;
					z-index: 3;
					gap: 0 0.8rem;
					
					.glass__teaser {
						display: flex;
						width: 100%;
						border-radius: var(--borderRadius);
						overflow: clip;
						/*background-color: rgba(255, 255, 255, 0.04);*/
						padding: 0.35rem;
						font: var(--text-2xl);
						align-items: center;
						position: relative;
						
						@media only screen and (max-width: 767px) {
							font: var(--text-xs-mobile);	
						}
						
						/*
						&:before {
							content: '';
							position: absolute;
							inset: 0;
							pointer-events: none;
							border-radius: inherit;
							background: linear-gradient(
								180deg,
								rgba(255, 255, 255, 0.52) 0%,
								rgba(255, 255, 255, 0.04) 50%,
								rgba(0, 0, 0, 0.08) 100%
							);
							opacity: 0.5;
							z-index: 1;
						}
						*/
						
						.icon {
							display: flex;
							width: 6.6rem;
							aspect-ratio: 1/1;
							border-radius: var(--borderRadius);
							background-color: var(--colorBrownDark);
							align-items: center;
							justify-content: center;
							position: relative;
							z-index: 3;
							
							@media only screen and (max-width: 767px) {
								width: 4.5rem;	
							}
							
							> svg {
								width: 2.4rem;
								height: auto;
								
								@media only screen and (max-width: 767px) {
									width: 1.9rem;	
								}
								
								path[fill="#24211E"]{
									fill: var(--color);
								}
								
								path[stroke="#24211E"]{
									stroke: var(--color);
								}
							}
						}
						
						> span:not(.icon){
							display: block;
							flex: 1;
							text-align: center;
							position: relative;
							z-index: 3;
						}
					}
				}
				
				.background {
					position: absolute;
					font-size: 0;
					line-height: 0;
					inset: 0;
					z-index: 1;
					width: 100%;
					height: 100%;
					
					.media {
						position: absolute;
						inset: 0;
						width: 100%;
						height: 100%;
						
						img,
						video {
							position: absolute;
							inset: 0;
							width: 100%;
							height: 100%;
							object-fit: cover;
						}

					}
					
					
				}
			}
			
			.control__box-container {
				display: grid;
				grid-template-columns: repeat(2,1fr);
				gap: 1rem;
				
				@media only screen and (max-width: 767px) {
					display: flex;	
					margin-top: 3rem;
					overflow-x: scroll;
					width: calc(100% + calc(var(--sideSpacing) * 2) + calc(var(--sideSpacing) * 2));
					margin-inline: calc(var(--sideSpacing) * -2);
					padding-inline: calc(var(--sideSpacing) * 2);
					
					scrollbar-width: none; /* Firefox */
					-ms-overflow-style: none;  /* IE 10+ */
					
					&::-webkit-scrollbar { 
						display: none;  /* Chrome Safari */
					}
				}
			}
			
			.control__box {
				border: var(--borderWidth) solid var(--colorBrownMedium);
				border-radius: var(--borderRadius);
				display: flex;
				flex-direction: column;
				padding: 2.2rem 2.5rem;
				
				@media only screen and (max-width: 767px) {
					flex-shrink: 0;
					flex-grow: 0;	
					width: 28.5rem;
					aspect-ratio: 286 / 356;
					padding: 2rem 2rem;
				}
				
				.icon {
					display: block;
					width: 2.5rem;
					
					height: auto;
					margin-bottom: auto;
					margin-left: -0.2rem;
					
					svg {
						width: 100%;
						height: auto;
						aspect-ratio: 1 / 0.9;
						object-fit: contain;
						
						path[fill="#24211E"]{
							fill: var(--colorBrownMedium);
						}
						
						path[stroke="#24211E"]{
							stroke: var(--colorBrownMedium);
						}
					}
				}
				
				.content {
					margin-top: auto;
					color: var(--colorWhite);
					font: var(--text-xl);
					
					@media only screen and (max-width: 767px) {
						font: var(--text-sm-mobile);	
					}
					
					
					h3 {
						font: var(--text-3xl);
						margin: 0;
						margin-bottom: 0.3em;
						
						@media only screen and (max-width: 767px) {
							font: var(--text-5xl);
						}
						
						+ p {
							margin-top: 0;
						}
					}
				}
			}
		}
		
		.bottom__grid {
			display: flex;
			justify-content: space-between;
			
			@media only screen and (max-width: 767px) {
				flex-direction: column;	
				gap: 4rem;
			}
			
			.icon__holder {
				margin-top: auto;	
				
				@media only screen and (max-width: 767px) {
					order: 2;	
				}
			}
		}
	}
}

.glass-bg {
	background:
	linear-gradient(
		180deg,
		rgba(255,255,255,.28) 0%,
		rgba(255,255,255,.12) 45%,
		rgba(255,255,255,.08) 100%
	);
	backdrop-filter: blur(1rem) saturate(180%);
	-webkit-backdrop-filter: blur(1rem) saturate(180%);
	box-shadow:
		0 0.4rem 1.6rem rgba(0,0,0,.12),
		inset 0 0.05rem 0 rgba(255,255,255,.05);
}

.icon__holder {
	display: flex;
	flex-wrap: wrap;
	color: var(--colorBrownMedium);
	gap: 0.5rem;

	@media only screen and (max-width: 767px) {
		gap: 1rem 0.8rem;
	}
	
	> span {
		
		display: block;
		width: 100%;
		font: var(--text-md);
		
		@media only screen and (max-width: 767px) {
			font: var(--text-xs-mobile);
		}
	}
	
	.icon__link {
		width: 3.8rem;
		height: auto;
		aspect-ratio: 1/1;
		border-radius: var(--borderRadius);
		background-color: var(--colorBrownMedium);
		display: flex;
		align-items: center;
		justify-content: center;
		
		@media only screen and (max-width: 767px) {
			width: 4.8rem;	
		}
		
		svg {
			width: 45%;
			height: auto;
			
			path {
				fill: var(--colorBrownDark);
			}
		}
	}
}

.section__experience-live {
	
	@media only screen and (max-width: 767px) {
		--multiplicatorTop: 1.5 !important; 
		--multiplicatorBottom: 1.2 !important; 	
	}
	
	.innerwrapper {
		
		.experience__grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-rows: 1fr 1fr;
			margin-top: 4rem;
			gap: 1rem;
			
			@media only screen and (max-width: 767px) {
				grid-template-columns: 100%;	
				margin-top: 5rem;
			}
			
			.experience__box {
				position: relative;
				width: 100%;
				border-radius: var(--borderRadius);
				overflow: clip;
				color: var(--colorWhite);
				
				&.find-dealer {
					grid-row: span 2;
					aspect-ratio: 902/1128;
					padding: 2.5rem;
					
					h3 {
						position: relative;
						z-index: 5;
						font: var(--text-5xl);
						margin: 0;
						color: var(--colorWhite) !important;
					}
					
					.image {
						font-size: 0;
						line-height: 0;
						position: absolute;
						inset: 0;
						width: 100%;
						height: 100%;
						z-index: 1;
						
						img {
							position: absolute;
							inset: 0;
							width: 100%;
							height: 100%;
							object-fit: cover;
						}
					}
					
					.dealer-overlay {
						position: absolute;
						z-index: 9;
						left: 2.5rem;
						bottom: 2.5rem;
						
						display: flex;
						flex-direction: column;
						width: 20rem;
						
						gap: 0.5rem 0;
						
						.dealer-search-form {
							display: flex;
							flex-direction: column;
							gap: 0.5rem 0;
							
							input[type="text"]{
								width: 100%;
							}
						}
					}
				}
				
				&.book-appointment {
					background-color: var(--colorBlueDark);
					
					&:has(.image){
						display: grid;
						grid-template-columns: 1fr 30%;
						
						.image {
							font-size: 0;
							line-height: 0;
							width: 100%;
							margin-bottom: auto;
							
							img {
								width: 100%;
								height: auto;
								aspect-ratio: 1/1;
								overflow: clip;
								border-radius: var(--borderRadius);
								
							}
						}
					}
				}
				
				&.local-events {
					background-color: var(--colorBrownDark);
				}
				
				&:not(.find-dealer){
					display: grid;
					grid-template-columns: 100%;
					padding: 2.5rem;
					
					@media only screen and (max-width: 767px) {
						padding: 2rem;	
						aspect-ratio: 345/215;
					}
					
					&:has(>.image){
						grid-template-columns: 1fr 10rem;
					}
					
					.content {
						display: grid;
						grid-template-columns: 100%;
						grid-template-rows: auto 1fr auto;
						position: relative;
						z-index: 5;
						
						h3 {
							
							font: var(--text-xl);
							margin: 0;
							color: var(--colorWhite) !important;
							
							@media only screen and (max-width: 767px) {
								font: var(--text-sm-mobile);	
							}
						}
						
						h4 {
							margin: auto 0;
							font: var(--text-5xl);
							color: var(--colorWhite) !important;
							
							@media only screen and (max-width: 767px) {
								font: var(--text-4xl);	
							}
							
							strong {
								font-weight: 400;
								display: block;
								color: var(--colorBrownMedium) !important;
							}
						}
						
						.cta__button {
							margin-right: auto;
						}
					}
				}
				
			}
			
		}
	}
}

@keyframes arrowMove {

	0% {
		transform: translateY(0);
		opacity: 1;
	}
	45% {
		transform: translateY(-100%);
		opacity: 1;
	}
	46% {
		transform: translateY(100%);
		opacity: 0;
	}
	47% {
		transform: translateY(100%);
		opacity: 1;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}

}

a:has(.laika__arrow){
	
	.laika__arrow {
		overflow: clip;
	}
	
	@media (hover: hover) {
		
		&:hover {
			.laika__arrow {
				svg {
					path {
						animation: arrowMove 0.6s ease-in-out;
					}
				}
			}
		}
		
	}
}

.section__wide-teaser {
	@media only screen and (max-width: 767px) {
		--multiplicatorTop: 0.85 !important; 
		--multiplicatorBottom: 0.85 !important; 	
	}
	
	.innerwrapper {
		display: flex;
		flex-direction: column;
		gap: 1rem 0;
		
		.single__wide-teaser {
			background-color: var(--backgroundColor);
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: center;
			color: var(--color);
			text-decoration: none;
			border-radius: var(--borderRadius);
			overflow: clip;
			aspect-ratio: 1516/288;
			
			@media only screen and (max-width: 767px) {
				aspect-ratio: 345/108;	
			}
			
			&.indented {
				.content {
					margin-left: auto;
					width: 32rem;
					
					@media only screen and (max-width: 767px) {
						width: 15.8rem;
						
						.teaser-topline {
							font: var(--text-xs-mobile);
						}	
						
						.teaser-title {
							font: var(--text-lg-mobile);	
						}
					}
				}
				
				@media only screen and (max-width: 767px) {
					background-color: #f5f3f2;
					
					.image {
						img {
							aspect-ratio: 345 / 72;
							object-position: -18% center;
							width: 70%;
						}
					}	
				}
			}
			
			.content {
				grid-column: 1/2;
				grid-row: 1/2;
				position: relative;
				z-index: 5;
				margin-left: 2.3rem;
				display: flex;
				flex-direction: column;
				gap: 0.5em 0;
				
				@media only screen and (max-width: 767px) {
					margin-left: 2rem;	
				}
				
				.teaser-topline {
					font: var(--text-xl);
					
					@media only screen and (max-width: 767px) {
						font: var(--text-sm-mobile);
					}
				}
				
				.teaser-title {
					font: var(--text-5xl);
					
					@media only screen and (max-width: 767px) {
						font: var(--text-4xl);
					}
				}
			}
			
			.laika__arrow {
				grid-column: 2/3;
				grid-row: 1/2;
				font-size: 0;
				line-height: 0;
				width: 3.2rem;
				position: relative;
				z-index: 5;
				margin-right: 2.3rem;
				
				@media only screen and (max-width: 767px) {
					margin-right: 2rem;
					width: 2.8rem;	
				}
				
				svg {
					width: 100%;
					height: auto;
					
					path {
						fill: var(--color);
					}
					
					rect {
						stroke: var(--color);
					}
				}
				
			}
			
			.image {
				font-size: 0;
				line-height: 0;
				width: 100%;
				grid-column: 1/3;
				grid-row: 1/2;
				position: relative;
				
				/*
				&:before {
					content: '';
					position: absolute;
					inset: 0;
					z-index: 3;
					pointer-events: none;
					background: rgba(0, 0, 0, 0.3);
				}
				*/
				
				img {
					width: 100%;
					height: auto;
					aspect-ratio: 1516/288;
					object-fit: cover;
					
					@media only screen and (max-width: 767px) {
						aspect-ratio: 345/108;	
					}
				}
			}
		}
	}
}

.section__two-column-text-list {
	.innerwrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1rem 1rem;
		
		.content {
			font: var(--text-2xl);
			
			p {
				max-width: 18em;
			}
			
			ul {
				font: var(--text-3xl);
				list-style-type: none;
				margin: 0;
				padding: 0;
				display: flex;
				flex-direction: column;
				gap: 0.7em 0;
				
				
				li {
					list-style-type: none;
					margin: 0;
					padding: 0;
					background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='43' height='39' fill='none' viewBox='0 0 43 39'><path fill='%2324211e' d='M43 39H0V0h43zm-3.097-2.693V2.69H3.097v33.617zm-20.554-18.21c2.492 0 4.386.08 6.449.155-1.632-1.249-2.882-2.419-4.773-4.134l-2.923-2.614h4.344L31.26 19.5l-8.814 7.994h-4.344l2.923-2.614c1.89-1.715 3.137-2.885 4.773-4.134-2.062.079-3.957.155-6.45.155h-7.48v-2.81h7.48z'/></svg>");
					background-repeat: no-repeat;
					background-size: 1em auto;
					background-position: left 0.15em;
					padding-left: 2em;
						
				}
				
			}
		}
	}
}

.section__text-media {
	.innerwrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 6rem;
		align-items: center;
		
		.content {
			font: var(--text-xl);
			
			p {
				max-width: 24em;
			}
		}
		
		.media {
			font-size: 0;
			line-height: 0;
			overflow: clip;
		
			border-radius: calc(var(--borderRadius) * var(--multiplicator));
			width: calc(100% + 4rem);
		
			img,
			video {
				width: 100%;
				height: auto;
			}
		}
	}
}

.section__two-column-title-text {
	.innerwrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1rem 1rem;
		
		> h2 {
			grid-column: 1/2;
			grid-row: 1/2;
			margin: 0;
			font: var(--text-8xl);
			text-transform: uppercase;
		}
		
		.content {
			grid-column: 2/3;
			grid-row: 2/3;
			font: var(--text-2xl);
		}
	}
}

.overlay_bg {
	position: fixed;
	inset: 0;
	z-index: 1009;
	background: rgba(36, 33, 30, 0.5);
	visibility: hidden;
	opacity: 0;
	backdrop-filter: blur(0.3rem);
	
	&.bg--light {
		background: rgba(245, 243, 241, 0.5);
	}
	
	&.bg--dark {
		background: rgba(36, 33, 30, 0.5);
	}
}

.overlay {
	--backgroundColor: transparent;
	--color: var(--colorBrownDark);

	/*
	 * 1   = ursprüngliche Größe
	 * 0.8 = 80 %
	 * 0.5 = 50 %
	 */
	--multiplicator: 0.8;

	/*
	 * Skalierte Schriftgrößen nur für das Overlay.
	 * Die globalen Typography-Variablen bleiben unverändert.
	 */
	--overlayFontSize12: calc(var(--fontSize12) * var(--multiplicator));
	--overlayFontSize14: calc(var(--fontSize14) * var(--multiplicator));
	--overlayFontSize16: calc(var(--fontSize16) * var(--multiplicator));
	--overlayFontSize20: calc(var(--fontSize20) * var(--multiplicator));
	--overlayFontSize24: calc(var(--fontSize24) * var(--multiplicator));
	--overlayFontSize32: calc(var(--fontSize32) * var(--multiplicator));
	--overlayFontSize40: calc(var(--fontSize40) * var(--multiplicator));
	--overlayFontSize48: calc(var(--fontSize48) * var(--multiplicator));
	--overlayFontSize64: calc(var(--fontSize64) * var(--multiplicator));
	--overlayFontSize96: calc(var(--fontSize96) * var(--multiplicator));
	--overlayFontSize128: calc(var(--fontSize128) * var(--multiplicator));
	--overlayFontSize220: calc(var(--fontSize220) * var(--multiplicator));

	--overlayText-xs: 400 var(--overlayFontSize12) / 1.333 var(--fontFamily);
	--overlayText-sm: 400 var(--overlayFontSize14) / 1.429 var(--fontFamily);
	--overlayText-md: 400 var(--overlayFontSize16) / 1.5 var(--fontFamily);

	--overlayText-lg: 400 var(--overlayFontSize20) / 1.4 var(--fontFamily);
	--overlayText-xl: 400 var(--overlayFontSize24) / 1.333 var(--fontFamily);
	--overlayText-2xl: 400 var(--overlayFontSize32) / 1.25 var(--fontFamily);

	--overlayText-3xl: 400 var(--overlayFontSize40) / 1.2 var(--fontFamily);
	--overlayText-4xl: 400 var(--overlayFontSize48) / 1.167 var(--fontFamily);
	--overlayText-5xl: 400 var(--overlayFontSize64) / 1.125 var(--fontFamily);
	--overlayText-6xl: 400 var(--overlayFontSize96) / 1.063 var(--fontFamily);
	--overlayText-7xl: 400 var(--overlayFontSize128) / 1.063 var(--fontFamily);
	--overlayText-8xl: 400 var(--overlayFontSize220) / 1 var(--fontFamily);

	background-color: var(--backgroundColor);
	color: var(--color);

	border-radius: calc(var(--borderRadius) * var(--multiplicator));

	position: fixed;
	z-index: 1010;
	top: 50%;
	left: 50%;

	visibility: hidden;
	opacity: 0;


	width: calc((100% - var(--sideSpacing) * 8.5 * 2) * var(--multiplicator));

	max-width: calc((var(--maxWidth) - var(--sideSpacing) * 8.5 * 2) * var(--multiplicator));

	min-height: calc(10rem * var(--multiplicator));
	max-height: 90vh;

	overflow-y: auto;
	overscroll-behavior: none;

	scrollbar-width: none;
	-ms-overflow-style: none;

	&::-webkit-scrollbar {
		display: none;
	}
	
	@media only screen and (max-width: 767px) {
		width: calc((100% - var(--sideSpacing) * 2));
		max-width: none;
	}


	&.small {
		width: calc((100% - var(--sideSpacing) * 14.75 * 2) * var(--multiplicator));

		max-width: calc((var(--maxWidth) - var(--sideSpacing) * 14.75 * 2) * var(--multiplicator));

		.close_overlay {
			right: calc(1.5rem * var(--multiplicator));
			top: calc(1.5rem * var(--multiplicator));
		}
		
		@media only screen and (max-width: 767px) {
			width: calc((100% - var(--sideSpacing) * 2));
			max-width: none;
		}
	}

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

		position: absolute;
		right: calc(2.5rem * var(--multiplicator));
		top: calc(2.5rem * var(--multiplicator));

		background: transparent;
		border: 0;
		padding: 0;
		margin: 0;

		cursor: pointer;

		width: calc(1.85rem * var(--multiplicator));

		svg {
			width: 100%;
			height: auto;

			rect {
				fill: var(--color);
			}
		}
	}

	&[data-overlay="language_selector"] {
		--multiplicator: 1;

		.overlay__inner {
			padding: calc(4.8rem * var(--multiplicator));
			
			@media only screen and (max-width: 767px) {
				padding: calc(4.8rem * var(--multiplicator)) calc(1.8rem * var(--multiplicator));	
			}

			ul {
				list-style-type: none;
				margin: 0;
				padding: 0;

				display: grid;
				grid-auto-flow: column;
				grid-template-rows: repeat(6, auto);
				grid-template-columns: repeat(2, 1fr);

				gap: calc(0.5rem * var(--multiplicator)) calc(1rem * var(--multiplicator));
				
				@media only screen and (max-width: 767px) {
					display: flex;
					flex-direction: column;	
				}

				li {
					list-style-type: none;
					margin: 0;
					padding: 0;

					&.current-lang {
						a {
							border-color: var(--colorBrownDark);
							background-color: var(--colorBrownDark);
							color: var(--colorWhite);
						}
					}

					a {
						display: grid;

						grid-template-columns:
							calc(3.3em * var(--multiplicator)) 1fr;

						font: var(--overlayText-xl);

						padding:
							calc(0.3em * var(--multiplicator)) calc(0.3em * var(--multiplicator));

						color: var(--colorBrownDark);
						text-decoration: none;
						align-items: center;

						border-radius: calc(var(--borderRadius) * var(--multiplicator));

						background-color: var(--colorWhite);
						border: 1.5px solid var(--colorWhite);

						gap: 0 calc(1em * var(--multiplicator));
						
						@media only screen and (max-width: 767px) {
							font: var(--text-2xl);
						}

						>span {
							margin: 0 !important;

							>img,
							>svg {
								width: 100% !important;
								height: auto !important;
								aspect-ratio: 80 / 60;
								object-fit: cover;

								border-radius: calc(var(--borderRadius) * var(--multiplicator));

								overflow: clip;
							}

							&.lang-flag {
								font-size: 0;
								line-height: 0;
							}
						}

						@media (hover: hover) {
							&:hover {
								border-color: var(--colorBrownDark);
							}
						}
					}
				}
			}
		}
	}
	
	&.tour-overlay {
		--multiplicator: 1;
		
		.overlay__content {
			padding: 0;
			font-size: 0;
			line-height: 0;
			
			iframe {
				width: 100%;
				height: auto;
				aspect-ratio: 16/9;
				border: 0;
				margin: 0;
			}
		}
	}
}

.overlay__content {
	padding:
		calc(6rem * var(--multiplicator)) calc(2.4rem * var(--multiplicator));

	.overlay-headline {
		font: var(--overlayText-6xl);
		display: block;
	}

	.overlay-second-headline {
		font: var(--overlayText-6xl);
		display: block;
		color: var(--colorBrownMedium);
	}

	.overlay-subline {
		font: var(--overlayText-4xl);
		display: block;
		text-transform: uppercase;
		margin-top: calc(0.4em * var(--multiplicator));
	}

	.overlay-headline+p,
	.overlay-second-headline+p {
		margin-top: calc(0.5em * var(--multiplicator));
	}

	.laika-pim-technical-data,
	.laika-pim-standard-equipment {
		width: 100%;
		padding: 0;
		border-spacing: 0;
		border-collapse: separate;

		margin-top: calc(3.9rem * var(--multiplicator));

		border-top:
			calc(var(--borderWidth) * var(--multiplicator)) solid var(--colorBrownMedium);

		tr {

			th,
			td {
				font: var(--overlayText-2xl);

				border-bottom:
					calc(var(--borderWidth) * var(--multiplicator)) solid var(--colorBrownMedium);

				padding:
					calc(0.61em * var(--multiplicator)) 0;

				vertical-align: top;
				padding-right: 2em;

				sup {
					position: absolute;
				}
			}

			th {
				width: calc(29.5em * var(--multiplicator));
				
				@media only screen and (max-width: 767px) {
					width: calc(17.5em * var(--multiplicator));
				}
			}
			
			@media (hover: hover) {
				&:hover {
					th,
					td {
						background-color: var(--colorWhite);
					}
				}	
			}
		}
	}

	.image__wrapper {
		display: flex;
		font-size: 0;
		line-height: 0;

		gap: 0 calc(2rem * var(--multiplicator));

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

			img {
				width: 100%;
				height: auto;
			}
		}
	}
	
	.footnotes {
		font: var(--text-md);
		margin-top: 4em;
		display: flex;
		flex-direction: column;
		gap: 1lh;
		
		a {
			color: inherit;
		}
	}
}

.technical-data-consent {
	display: flex;
	flex-direction: column;
	height: 90vh;
	max-height: 90vh;
	padding-top: calc(4rem * var(--multiplicator));
	background-color: var(--colorWhite);

	&[hidden] {
		display: none;
	}
}

.technical-data-consent__content {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: calc(2rem * var(--multiplicator)) calc(2.4rem * var(--multiplicator));
	scrollbar-width: none;
	padding-top: 0;

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

.technical-data-consent__headline {
	font: var(--overlayText-5xl);
	margin: 0;

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

.technical-data-consent__images {
	display: grid;
	gap: calc(1.5rem * var(--multiplicator));
	margin-top: calc(3rem * var(--multiplicator));
	width: 80%;
	margin-inline: auto;

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

.technical-data-consent__button {
	flex: 0 0 auto;
	margin: calc(1.5rem * var(--multiplicator)) calc(2.4rem * var(--multiplicator)) calc(2.4rem * var(--multiplicator));
	margin-left: auto;
	cursor: pointer;

	&:disabled {
		cursor: not-allowed;
		opacity: 0.4;
	}
}

.technical-data-overlay:not(.is-consented) {
	overflow: hidden;
}

.technical-data-content[hidden] {
	display: none;
}

.overlay__only-text {
	font: var(--overlayText-4xl);

	.overlay-list-headline {
		font: var(--overlayText-4xl);
		color: var(--colorBrownMedium);
		display: block;

		margin-top: calc(1.6em * var(--multiplicator));
	}

	p,
	ul {
		font: var(--overlayText-4xl) !important;
	}

	ul {
		list-style-type: none;
		margin: 0;
		padding: 0;

		display: flex;
		flex-direction: column;

		margin-top: calc(0.3em * var(--multiplicator));
		gap: calc(0.39em * var(--multiplicator));

		li {
			list-style-type: none;
			margin: 0;
			padding: 0;

			display: grid;

			grid-template-columns:
				calc(0.85em * var(--multiplicator)) 1fr;

			gap: 0 calc(0.4em * var(--multiplicator));

			svg {
				width: 100%;
				height: auto;

				margin-top: calc(0.25em * var(--multiplicator));
			}
		}

		+.image__wrapper {
			margin-top: calc(3rem * var(--multiplicator));
		}
	}
}

.overlay__text-with-media {
	font: var(--overlayText-4xl);

	ul {
		list-style-type: none;
		margin: 0;
		padding: 0;

		display: flex;
		flex-direction: column;

		margin-top: calc(2.4em * var(--multiplicator));
		gap: 0;

		li {
			list-style-type: none;
			margin: 0;

			padding:
				calc(0.4em * var(--multiplicator)) 0;

			display: grid;
			grid-template-columns: 1fr 49.5%;

			border-top:
				calc(var(--borderWidth) * var(--multiplicator)) solid var(--colorBrownMedium);

			gap: 0 calc(2em * var(--multiplicator));

			.content {
				font: var(--overlayText-5xl);

				display: flex;
				flex-direction: column;

				gap: calc(0.4em * var(--multiplicator)) 0;

				.list__number {
					font-size: var(--overlayFontSize40);
					color: var(--colorBrownMedium);

					border:
						calc(0.1em * var(--multiplicator)) solid var(--colorBrownMedium);

					width: calc(1.65em * var(--multiplicator));
					aspect-ratio: 1 / 1;
					line-height: 1;
					height: auto;

					display: flex;
					align-items: center;
					justify-content: center;

					z-index: 5;
					border-radius: 50%;
				}
			}

			.media {
				font-size: 0;
				line-height: 0;
				overflow: clip;

				border-radius: calc(var(--borderRadius) * var(--multiplicator));

				img,
				video {
					width: 100%;
					height: auto;
					aspect-ratio: 697 / 465;
					object-fit: cover;
				}
			}
		}
	}
}
.section__find-dealer {
	.innerwrapper {
		.find-dealer__wrapper {
			display: grid;
			grid-template-columns: repeat(2,1fr);
			grid-template-rows: auto 1fr;
			margin-top: 3.9rem;
			gap: 0 1rem;
			
			@media only screen and (max-width: 767px) {
				margin-top: 2.4rem;
				grid-template-columns: 100%;	
				gap: 0.8rem 0;
				grid-template-rows: unset;
			}
			

			
			.dealer__search-form-wrapper {
				background-color: var(--colorBrownLight);
				color: var(--colorBrownDark);
				border-radius: var(--borderRadius) var(--borderRadius) 0 0;
				display: flex;
				flex-direction: column;
				padding: 2.4rem;
				grid-column: 1/2;
				grid-row: 1/2;
				
				@media only screen and (max-width: 767px) {
					padding: 2rem;
					grid-column: unset;
					grid-row: unset;
					order: 1;
					border-radius: var(--borderRadius);
				}
				
				.dealer__search-form {
					width: 100%;
					height: auto;
					//background-color: var(--colorBrownMedium);
					
					
					.dealer-search-form {
						display: grid;
						grid-template-columns: 37% 1fr 1fr;
						gap: 1rem 1rem;
						
						#dealer-search-input {
							grid-column: 1/4;
							grid-row: 2/3;
						}
						
						.select-wrapper {
							&:first-child {
								grid-column: span 2;
							}
						}
					}
				}
			}
			
			
			.dealer__search-results-wrapper {
				background-color: var(--colorBrownLight);
				color: var(--colorBrownDark);
				border-radius: 0 0 var(--borderRadius) var(--borderRadius);
				display: flex;
				flex-direction: column;
				padding: 2.4rem;
				grid-column: 1/2;
				grid-row: 2/3;
				padding-top: 0;
				
				@media only screen and (max-width: 767px) {
					padding: 2rem;
					grid-column: unset;
					grid-row: unset;
					order: 3;
					border-radius: var(--borderRadius);
				}
				
				.dealer__results {
					display: flex;
					flex-direction: column;
					margin-top: 0.1rem;
					height: 32rem;
					overflow-y: scroll;
					position: relative;
					--fade-size: 2.5rem;
					--fade-color: #F5F3F1;
					
					scrollbar-width: none; /* Firefox */
					-ms-overflow-style: none;  /* IE 10+ */
					
					&::-webkit-scrollbar { 
						display: none;  /* Chrome Safari */
					}
					
					
					
					&::before,
					&::after {
						content: "";
						position: sticky;
						left: 0;
						z-index: 5;
						height: var(--fade-size);
						pointer-events: none;
						flex: 0 0 var(--fade-size);
						opacity: 0;
						
						transition: opacity .2s ease;
					}
					&::before {
						top: 0;
						margin-bottom: calc(var(--fade-size) * -1);
						background: linear-gradient(
							to bottom,
							var(--fade-color),
							transparent
						);
					}
					&::after {
						bottom: 0;
						margin-top: calc(var(--fade-size) * -1);
						background: linear-gradient(
							to top,
							var(--fade-color),
							transparent
						);
					}
					
					.no-dealers-found {
						text-align: center;
						font: var(--text-2xl);
					}
					
					&.is-scrolled-top::before,
					&.is-scrolled-bottom::after {
						opacity: 1;
					}
					
					.single__dealer {
						border-bottom: 1px solid var(--colorBrownDark);
						
						&.is-open {
							.single__dealer-head {
								.dealer-arrow {
									transform: rotate(180deg);	
								}
							}
							.single__dealer-body {
								display: block;	
							}
						}
						
						.single__dealer-head {
							display: grid;
							grid-template-columns: 1fr auto;
							padding-block: 0.5rem;
							cursor: pointer;
							
							
							
							h2 {
								margin: 0;
								font: var(--text-2xl);
								
								@media only screen and (max-width: 767px) {
									font: var(--text-4xl);	
								}
							}
							
							.dealer-arrow {
								font-size: 0;
								line-height: 0;
								width: 1.2rem;
								margin-bottom: auto;
								margin-top: 0.4rem;
								transition: transform 300ms ease-out;
								
								@media only screen and (max-width: 767px) {
									width: 1.9rem;
								}
								
								svg {
									width: 100%;
									height: auto;
								}
							}
						}
						
						.single__dealer-body {
							font: var(--text-xl);
							padding-top: 0.5rem;
							
							display: none;
							
							@media only screen and (max-width: 767px) {
								font: var(--text-sm-mobile);
								padding-top: 1rem;
							}
							
							p,
							ul {
								margin: 1.4em 0;
								
								&:first-child {
									margin-top: 0;
								}
								
								&:last-child {
									margin-bottom: 0;
								}
							}
							
							a:not(.cta__button) {
								color: inherit;
								text-decoration: none;
							}
							
							.dealer-columns {
								display: grid;
								grid-template-columns: 1fr 8em;
								gap: 0 1rem;
								padding-bottom: 1em;
							}
							
							.dealer-categories {
								ul {
									list-style-type: none;
									margin: 0;
									padding: 0;
									display: flex;
									flex-direction: column;
									gap: 1em 0;
									
									li {
										list-style-type: none;
										margin: 0;
										padding: 0;
										display: grid;
										grid-template-columns: 1.1em 1fr;
										gap: 0 0.6em;
										align-items: center;
										
										svg {
											width: 100%;
											height: auto;
										}
									}
								}
							}
							
							.button__holder {
								padding-bottom: 2rem;
							}
							
						}
						
						&.is-opened {
							.single__dealer-body {
								display: block;	
							}
						}
					}
				}
			}
			
			
			.dealer__map {
				aspect-ratio: 746/945;
				width: 100%;
				height: auto;
				overflow: clip;
				border-radius: var(--borderRadius);
				margin-bottom: auto;
				grid-column: 2/3;
				grid-row: 1/3;
				
				@media only screen and (max-width: 767px) {
					grid-column: unset;
					grid-row: unset;
					order: 2;
					aspect-ratio: 345/200;
				}
				
				#laika-dealer-map {
					width: 100%;
					height: 100%;
				}
			}
			
		}
	}
}

.section__events {
	.innerwrapper {
		.events__wrapper {
			display: flex;
			flex-direction: column;
			margin-top: 4rem;
			gap: 1rem 0;
			
			@media only screen and (max-width: 767px) {
				margin-top: 2rem;	
			}
			
			.single__event {
				display: grid;
				grid-template-columns: 15rem 1fr;
				background-color: var(--colorWhite);
				border-radius: var(--borderRadius);
				padding: 2rem 1.2rem 1.8rem 3rem;
				gap: 0 8.2rem;
				
				@media only screen and (max-width: 767px) {
					grid-template-columns: 100%;	
					padding: 4rem 2.2rem 2rem 2.2rem;
				}
				
				.event__logo {
					width: 100%;
					margin-block: auto;
					transform: translateY(-0.1rem);
					
					@media only screen and (max-width: 767px) {
						width: 63%;
						margin-inline: auto;
					}
					
					img {
						width: 100%;
						aspect-ratio: 300 / 150;
						height: auto;
						object-fit: contain;
						object-position: center center;
					}
				}
				
				.event__content {
					display: grid;
					grid-template-columns: 1fr auto;
					
					@media only screen and (max-width: 767px) {
						margin-top: 2rem;
						grid-template-columns: 100%;
					}
					
					.event-date {
						grid-column: span 2;
						font: var(--text-4xl);
						color: var(--colorBrownMedium);
						
						@media only screen and (max-width: 767px) {
							grid-column: unset;	
							
						}
					}
					
					.event-title {
						grid-column: span 2;
						font: var(--text-4xl);
						color: var(--colorBrownDark);
						margin-bottom: 1.4rem;
						
						@media only screen and (max-width: 767px) {
							grid-column: unset;	
						}
					}
					
					.event-address {
						font: var(--text-xl);
						
						@media only screen and (max-width: 767px) {
							font: var(--text-sm-mobile);
						}
					}
				}
			}
		}
		
		.no-events {
			font: var(--text-5xl);
			margin-top: 2em;
			margin-bottom: 2em;
			
			@media only screen and (max-width: 767px) {
				font: var(--text-4xl);
			}
		}
	}
}

.action__buttons {
	display: flex;
	gap: 0 0.6rem;
	margin-top: 0.2rem;
	margin-bottom: -0.6rem;
	
	@media only screen and (max-width: 767px) {
		margin-top: 2.2rem;
		margin-bottom: 0;
	}
	
	.action-button {
		display: flex;
		font-size: 0;
		line-height: 0;
		width: 3.5rem;
		aspect-ratio: 1/1;
		height: auto;
		background-color: var(--colorBlueDark);
		justify-content: center;
		align-items: center;
		border-radius: var(--borderRadius);
		
		@media only screen and (max-width: 767px) {
			width: 4.8rem;
		}
		
		svg {
			width: 50%;
			height: auto;
		}
	}
}

body.frontend select,
body.frontend input[type="text"],
body.frontend input[type="email"],
body.frontend input[type="tel"],
body.frontend input[type="date"],
body.frontend textarea {
	height: 3.6rem;
	border-radius: var(--borderRadius);
	border: 0;
	background-color: var(--colorWhite);
	font: var(--text-xl);
	padding: 0 1em;
	color: var(--colorBrownDark);
	
	&:disabled {
		opacity: 0.5;
	}
	
	@media only screen and (max-width: 767px) {
		font: var(--text-sm-mobile);
		height: 4.6rem;
	}
}

body.frontend select {
	cursor: pointer;
}

@supports (appearance: base-select) {

	body.frontend select {

		/* Closed Select */
		--select-bg: var(--colorWhite);
		--select-text: var(--colorBrownDark);
		--select-icon: var(--colorBrownDark);

		/* Dropdown */
		--select-dropdown-bg: var(--colorWhite);
		--select-dropdown-shadow: 0 0.5rem 1.5rem rgba(0,0,0,.15);

		/* Options */
		--select-option-text: var(--colorBrownMedium);
		--select-option-bg: transparent;

		/* Hover / Focus */
		--select-option-hover-bg: var(--colorBrownLight);
		--select-option-hover-text: var(--colorBrownDark);

		/* Selected */
		--select-option-selected-bg: var(--colorBrownDark);
		--select-option-selected-text: var(--colorBrownLight);
		
		&.blue {
			/* Closed Select */
			--select-bg: var(--colorBlueDark);
			--select-text: var(--colorWhite);
			--select-icon: var(--colorWhite);
			
			/* Dropdown */
			--select-dropdown-bg: var(--colorWhite);
			--select-dropdown-shadow: 0 0.5rem 1.5rem rgba(0,0,0,.15);
			
			/* Options */
			--select-option-text: var(--colorBrownMedium);
			--select-option-bg: transparent;
			
			/* Hover / Focus */
			--select-option-hover-bg: var(--colorBrownLight);
			--select-option-hover-text: var(--colorBrownDark);
			
			/* Selected */
			--select-option-selected-bg: var(--colorBlueDark);
			--select-option-selected-text: var(--colorWhite);
		}

		background: var(--select-bg);
		color: var(--select-text);

		appearance: base-select;
		display: flex;
		align-items: center;

		&::picker(select) {
			appearance: base-select;
			border: 0;
			border-radius: var(--borderRadius);
			padding: .5rem 0;
			margin-top: .5rem;
			max-height: 20rem;

			background: var(--select-dropdown-bg);
			box-shadow: var(--select-dropdown-shadow);
		}

		option {
			padding: .25em 1em;

			background: var(--select-option-bg);
			color: var(--select-option-text);

			&::checkmark {
				display: none;
				content: none;
			}

			&:hover,
			&:focus {
				background: var(--select-option-hover-bg);
				color: var(--select-option-hover-text);
			}

			&:checked {
				background: var(--select-option-selected-bg);
				color: var(--select-option-selected-text);
			}
		}

		&::picker-icon {
			content: "";
			width: .7em;
			aspect-ratio: 17 / 18;
			background-color: var(--select-icon);
			mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='18' viewBox='0 0 17 18'%3E%3Cpath d='M7.295 0h1.968v10.896c0 .984 0 1.8-.072 3.168a37 37 0 0 1 2.4-2.52l4.968-4.968v2.52l-8.28 8.28L0 9.096v-2.52l4.968 4.968a37 37 0 0 1 2.4 2.52c-.072-1.368-.072-2.184-.072-3.168z'/%3E%3C/svg%3E");
			mask-repeat: no-repeat;
			mask-position: center;
			mask-size: contain;
			-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='18' viewBox='0 0 17 18'%3E%3Cpath d='M7.295 0h1.968v10.896c0 .984 0 1.8-.072 3.168a37 37 0 0 1 2.4-2.52l4.968-4.968v2.52l-8.28 8.28L0 9.096v-2.52l4.968 4.968a37 37 0 0 1 2.4 2.52c-.072-1.368-.072-2.184-.072-3.168z'/%3E%3C/svg%3E");
			-webkit-mask-repeat: no-repeat;
			-webkit-mask-position: center;
			-webkit-mask-size: contain;
			transition: rotate .2s ease;
		}

		&:open::picker-icon {
			rotate: 180deg;
		}
	}
}

@supports not (appearance: base-select) {

	body.frontend .select-wrapper {
		
		position: relative;
		/* Closed Select */
		--select-bg: var(--colorWhite);
		--select-text: var(--colorBrownDark);
		--select-icon: var(--colorBrownDark);
		
		&.blue {
			--select-bg: var(--colorBlueDark);
			--select-text: var(--colorWhite);
			--select-icon: var(--colorWhite);	
		}


		&::after {
			content: "";
			position: absolute;
			right: 1rem;
			top: 50%;
			width: .7rem;
			aspect-ratio: 17 / 18;
			transform: translateY(-50%);

			background-color: var(--select-icon);

			mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='18' viewBox='0 0 17 18'%3E%3Cpath d='M7.295 0h1.968v10.896c0 .984 0 1.8-.072 3.168a37 37 0 0 1 2.4-2.52l4.968-4.968v2.52l-8.28 8.28L0 9.096v-2.52l4.968 4.968a37 37 0 0 1 2.4 2.52c-.072-1.368-.072-2.184-.072-3.168z'/%3E%3C/svg%3E") center / contain no-repeat;
			-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='18' viewBox='0 0 17 18'%3E%3Cpath d='M7.295 0h1.968v10.896c0 .984 0 1.8-.072 3.168a37 37 0 0 1 2.4-2.52l4.968-4.968v2.52l-8.28 8.28L0 9.096v-2.52l4.968 4.968a37 37 0 0 1 2.4 2.52c-.072-1.368-.072-2.184-.072-3.168z'/%3E%3C/svg%3E") center / contain no-repeat;

			pointer-events: none;
		}
	}

	body.frontend select {

		

		appearance: none;
		-webkit-appearance: none;

		width: 100%;
		padding-right: 3rem;

		background: var(--select-bg);
		color: var(--select-text);

		border: 0;
		border-radius: var(--borderRadius);
	}
}

.section__feature-slider {
	.innerwrapper {
		display: flex;
		flex-direction: column;
		
		h3 {
			margin: 0;
			
			&.small {
				color: var(--color);
				font: var(--text-2xl);
			}
			
			&.big {
				color: var(--color);
				font: var(--text-6xl);
				margin-bottom: 0.3em;
				
				@media only screen and (max-width: 767px) {
					font: var(--text-5xl);	
				}
			}
		}
		
		.feature-slider__wrapper {
			margin-top: 2.3rem;
			
			@media only screen and (max-width: 767px) {
				margin-top: 0.5rem;
			}
			
			.feature-slider__viewport {
				overflow: visible;
			}
			
			.feature-slider {
				--spacing: 0.5rem;
				display: flex;
				gap: 0;
				margin-left: calc(var(--spacing) * -1);
			}
			
			.single__slide--wrapper {
				flex: 0 0 calc(29.6rem + var(--spacing) + var(--spacing));
				padding-inline: var(--spacing);
				min-width: 0;
				
				@media only screen and (max-width: 767px) {
					flex: 0 0 calc(28.6rem + var(--spacing) + var(--spacing));
				}
				
				
				.single__slide {
					width: 100%;
					border-radius: var(--borderRadius);
					overflow: clip;
					position: relative;
					display: grid;
					grid-template-columns: 100%;
					grid-template-rows: 1fr auto;
					
					.content {
						grid-column: 1 / 2;
						grid-row: 2 / 3;
						margin-top: 0;
						position: relative;
						z-index: 5;
						width: 100%;
						padding: 1rem 2.5rem 2.3rem 2.5rem;
						display: flex;
						flex-direction: column;
						justify-content: flex-start;
						min-height: var(--feature-content-height);
						font: var(--text-xl);
						color: var(--colorWhite);
						
						&:not(:has(.slide__number)){
							min-height: unset;
						}
						
						@media only screen and (max-width: 767px) {
							padding: 1rem 2rem 2rem 2rem;
							font: var(--text-sm-mobile);
						}
						
						.slide__title {
							font: var(--text-3xl);
							color: var(--colorWhite);
							
							@media only screen and (max-width: 767px) {
								font: var(--text-xl-mobile);	
							}
							
							+ p {
								margin-top: 0.5em;
							}
						}
						
						.slide__number {
							font-size: var(--fontSize24);
							color: var(--colorWhite);
							border: 0.1em solid var(--colorWhite);
							width: 1.65em;
							aspect-ratio: 1 / 1;
							line-height: 1;
							height: auto;
							display: flex;
							align-items: center;
							justify-content: center;
							z-index: 5;
							border-radius: 50%;
							margin-bottom: 0.25em;
						}
					}
					
					.media {
						font-size: 0;
						line-height: 0;
						grid-column: 1 / 2;
						grid-row: 1 / 3;
						position: relative;
						
						&:before {
							content: '';
							display: block;
							position: absolute;
							left: 0;
							bottom: 0;
							height: 50%;
							width: 100%;
							z-index: 2;
							background: linear-gradient(
								180deg,
								rgba(255, 255, 255, 0) 0%,
								rgba(36, 33, 30, 0) 45%,
								rgba(36, 33, 30, 0.45) 75%,
								rgba(36, 33, 30, 0.85) 100%
							);
						}
						
						img,
						video {
							width: 100%;
							aspect-ratio: 592/792;
							object-fit: cover;
							height: auto;
							
							@media only screen and (max-width: 767px) {
								aspect-ratio: 592 / 736;
							}
						}
					}
				}
			}
			


		}
	}
}

.section__feature-teaser {
	
	@media only screen and (max-width: 767px) {
		--multiplicatorTop: 0.9 !important;
		--multiplicatorBottom: 0.9 !important;
	}
	
	.innerwrapper {
		.feature-teaser__wrapper {
			display: flex;
			justify-content: center;
			gap: 0 1rem;
			
			@media only screen and (max-width: 767px) {
				justify-content: start;	
				scrollbar-width: none; /* Firefox */
				-ms-overflow-style: none;  /* IE 10+ */
				overflow-x:scroll;
				width: calc(100% + calc(var(--sideSpacing) * 4));
				margin-left: calc(var(--sideSpacing) * -2);
				padding-inline: calc(var(--sideSpacing) * 2);
				
				&::-webkit-scrollbar { 
					display: none;  /* Chrome Safari */
				}
			}
			
			.single__teaser {
				width: calc(33.33% - 0.65rem);
				border-radius: var(--borderRadius);
				overflow: clip;
				position: relative;
				display: grid;
				grid-template-columns: 100%;
				grid-template-rows: 1fr auto;
				
				@media only screen and (max-width: 767px) {
					width: 28.5rem;
					flex-grow: 0;
					flex-shrink: 0;
				}
				
				.content {
					grid-column: 1 / 2;
					grid-row: 1 / 2;
					margin-top: 0;
					position: relative;
					z-index: 5;
					width: 100%;
					padding: 2.5rem 2.5rem 2.3rem 2.5rem;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					font: var(--text-xl);
					color: var(--colorWhite);
					
					@media only screen and (max-width: 767px) {
						padding: 2rem 2rem 2rem 2rem;
						font: var(--text-sm-mobile);
					}
					
					.teaser__title {
						font: var(--text-4xl);
						color: var(--colorWhite);
						
						+ p {
							margin-top: 0.5em;
						}
					}
					
					.plus {
						padding: 0;
						margin: 0;
						width: 2.4rem;
						height: auto;
						background: transparent;
						border: 0;
						margin-top: auto;
						margin-bottom: -0.1rem;
						margin-right: -0.1rem;
						margin-left: auto;
						cursor: pointer;
						
						@media only screen and (max-width: 767px) {
							width: 3rem;
							margin-bottom: -0.5rem;	
						}
						
						svg {
							width: 100%;
							height: auto;
							overflow: visible;
						}
					}
				}
				
				.media {
					font-size: 0;
					line-height: 0;
					grid-column: 1 / 2;
					grid-row: 1 / 3;
					position: relative;
					
					&:before {
						content: '';
						display: block;
						position: absolute;
						left: 0;
						bottom: 0;
						height: 100%;
						width: 100%;
						z-index: 2;
						background: linear-gradient(
							180deg,
							rgba(36, 33, 30, 0.85) 0%,
							rgba(36, 33, 30, 0.1) 30%,
							rgba(36, 33, 30, 0.1) 100%
						);
					}
					
					img,
					video {
						width: 100%;
						//aspect-ratio: 592/800;
						aspect-ratio: 592/816;
						object-fit: cover;
						height: auto;
						
						@media only screen and (max-width: 767px) {
							aspect-ratio: 286/356;
						}
					}
				}
			}
		}
	}
}

.embla__controls {
	font-size: 0;
	line-height: 0;
	display: grid;
	grid-template-columns: repeat(2, 3.3rem);
	gap: 0 0.7rem;
	margin-top: 4rem;
	pointer-events: none;
	
	@media only screen and (max-width: 767px) {
		grid-template-columns: repeat(2, 2.8rem);	
		margin-top: 2rem;
	}
	
	.embla__prev,
	.embla__next {
		font-size: 0;
		line-height: 0;
		width: 100%;
		background: transparent;
		border: 0;
		padding: 0;
		margin: 0;
		cursor: pointer;
		pointer-events: auto;
		
		svg {
			width: 100%;
			height: auto;
		
			path {
				fill: var(--color);
			}
			
			rect {
				stroke: var(--color);
			}
		}
		
		&:disabled {
			pointer-events: none;
			
			svg {
				opacity: 0.5;
				/*
				path {
					fill: var(--colorBrownMedium);
				}
				
				rect {
					stroke: var(--colorBrownMedium);
				}
				*/
			}
		}
	}
	
	.embla__prev {
		svg {
			transform: scaleX(-1);
		}
	}
}

.section__aligned-block-with-image {
	.innerwrapper {
		display: flex;
		flex-direction: column;
		align-items: start;
		
		&.align_left {
			align-items: start;
		}
		
		&.align_center {
			align-items: center;
		}
		
		&.align_right {
			align-items: end;
		}
		
		.aligned__block {
			width: 66.5%;
			display: flex;
			flex-direction: column;
			gap: 2.5rem 0;
			
			.headline__wrapper {
				h2,
				h3 {
					margin: 0;
					font: var(--text-5xl) !important;
				}
				.content {
					font: var(--text-xl);
					margin-top: 0.3em;
				}
			}
			
			.images__wrapper {
				display: flex;
				gap: 0 1rem;
				
				.single__image {
					flex: 1;
					
					.image {
						img {
							width: 100%;
							height: auto;
							border-radius: var(--borderRadius);
						}
					}
					
					.content {
						margin-top: 2.6rem;
						
						.icon {
							display: block;
							width: 2.8rem;
							height: auto;
							font-size: 0;
							line-height: 0;
							margin-bottom: 2rem;
							
							svg {
								width: 100%;
								height: auto;
								aspect-ratio: 1 / 0.9;
								object-fit: contain;
							}
						}
						
						.content-inner {
							
							h2,
							h3,
							h4 {
								margin: 0;
								font: var(--text-2xl);
								
								+ p {
									margin-top: 0.5em;
								}
							}
							
							font: var(--text-xl);
						}
					}
				}
			}
		}
	}
}

.section__bg-image-with-glass-teaser {
	--backgroundColor: transparent !important;
	--color: var(--colorWhite) !important;
	position: relative;
	
	.innerwrapper {
		position: relative;
		z-index: 5;
		padding-top: 2.3rem;
		display: flex;
		flex-direction: column;
		gap: 13.4rem 0;
		
		.headline__wrapper {
			h2 {
				font: var(--text-5xl) !important;
			}
		}
		
		.teaser__wrapper {
			display: flex;
			gap: 0 1rem;
			
			.single__teaser {
				flex: 1;
				aspect-ratio: 440/586;
				display: flex;
				flex-direction: column;
				overflow: clip;
				border-radius: var(--borderRadius);
				padding: 2.7rem 2.5rem 2.5rem 2.5rem;
				
				.icon {
					display: block;
					width: 2rem;
					font-size: 0;
					line-height: 0;
					position: relative;
					z-index: 3;
					
					> svg {
						width: 100%;
						height: auto;
						
						path[fill="#24211E"]{
							fill: var(--color);
						}
						
						path[stroke="#24211E"]{
							stroke: var(--color);
						}
					}
				}
				
				.content {
					font: var(--text-xl);
					margin-top: auto;
					
					h3 {
						margin: 0;
						font: var(--text-3xl);
						
						+ p {
							margin-top: 0.5em;
						}
					}
				}
			}
		}
	}
	
	.background__image {
		font-size: 0;
		line-height: 0;
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
		
		&:before {
			content: '';
			display: block;
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			opacity: 0.3;
			background-color: var(--colorBrownDark);
			z-index: 2;
		}
		
		img {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	
}

.section__faq {
	.innerwrapper {
		display: flex;
		flex-direction: column;
		gap: 2.9rem 0;
		
		@media only screen and (max-width: 767px) {
			gap: 2.6rem 0;	
		}
	}
}

.accordion__wrapper {
	display: flex;
	flex-direction: column;
	
	&.white_boxed {
		margin-top: 0.9rem;
		gap: 1rem 0;
		
		details.faq__item {
			border-top: 0 !important;
			border-bottom: 0 !important;
			background-color: var(--colorWhite);
			border-radius: var(--borderRadius);
			padding-bottom: 1.5em;
			
			summary {
				font: var(--text-3xl);
				padding-inline: 1.25em;
				gap: 0 1.05em;
				padding-top: 1.25em;
				padding-bottom: 0.3em;
				text-wrap: balance;
				
				
				
				.faq__number {
					width: 1.8em;	
				}
			}
			
			.faq__answer {
				padding-left: 6.7rem;
				max-width: 51em;
				
				
			}
		}
	}
	
	details.faq__item {
		border-bottom: var(--borderWidth) solid var(--colorBrownMedium);
		
		&:first-child {
			border-top: var(--borderWidth) solid var(--colorBrownMedium);
		}
		
		&[open]{
			summary {
				> svg {
					transform: rotate(180deg);
					
				}
			}
		}
		
		summary {
			list-style: none;
			cursor: pointer;
			font: var(--text-2xl);
			display: grid;
			grid-template-columns: auto 1fr auto;
			padding-top: 0.8em;
			padding-left: 0.2em;
			gap: 0 1.4em;
			padding-bottom: 0.66em;
			
			@media only screen and (max-width: 767px) {
				font: var(--text-lg-mobile);
				padding-left: 0;	
				gap: 0 1.2em;
				padding-top: 0.5em;
				padding-bottom: 0.5em;
			}
			
			.faq__number {
				font-size: var(--fontSize24);
				color: var(--color);
				border: calc(var(--borderWidth) * 1.5) solid var(--color);
				width: 1.4em;
				aspect-ratio: 1 / 1;
				line-height: 1;
				height: auto;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 5;
				border-radius: 50%;
				margin-top: 0.15em;
				
				@media only screen and (max-width: 767px) {
					width: 1.6em;
					border: calc(var(--borderWidth) * 1.8) solid var(--color);
				}
			}
			
			> svg {
				width: 0.7em;
				height: auto;
				margin-top: 0.2em;
				transition: transform 300ms ease-out;
				
				path {
					fill: var(--color);
				}
			}
			
			&::-webkit-details-marker {
				display: none;
			}
			
			&::marker {
				display: none;
				content: "";
			}
		}
		
		.faq__answer {
			font: var(--text-xl);
			padding-bottom: 1em;
			padding-left: 4.3rem;
			
			@media only screen and (max-width: 767px) {
				font: var(--text-sm-mobile);
				padding-left: 4.1rem;
			}
			
			a:not(.cta__button){
				color: inherit;
			}
			
			p:has(.cta__button){
				margin-top: 1.6em;
			}
		}
	}
}

.section__variant-slider {
	--backgroundColor: var(--colorBrownDark) !important;

	/*height: 51.2rem;*/
	
	.innerwrapper {
		
		@media only screen and (max-width: 767px) {
			padding-bottom: 4.2rem;
		}
		
		.variant-slider__wrapper {
			position: relative;
			
			@media only screen and (max-width: 767px) {
				display: flex;
				flex-direction: column;
					
			}
			
			.variant__navigation-color__wrapper {
				position: absolute;
				left: 0;
				top: 2.5rem;
				z-index: 20;
				display: flex;
				gap: 0 2rem;
				align-items: center;
				
				@media only screen and (max-width: 767px) {
					order: 1;	
				}
			}
			
			.variant__color-name {
				font: var(--text-3xl);
				color: var(--colorWhite);
			}
			
			.variant__navigation {
				display: flex;
				
				gap: 0 1rem;
				
				
				
				.variant__navigation-item {
					background: var(--colorWhite);
					border: 0;
					padding: 0;
					margin: 0;
					width: 4.1rem;
					aspect-ratio: 1/1;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 50%;
					border: calc(var(--borderWidth) * 2) solid transparent;
					cursor: pointer;
					
					@media only screen and (max-width: 767px) {
						width: 3.1rem;	
					}
					
					&.is-active {
						border-color: var(--colorBlueDark);
					}
					
					
					img {
						width: 50%;
						aspect-ratio: 1/1;
						height: auto;
						border-radius: 50%;
					}
				}
			}
			
			.variant-data {
				position: absolute;
				z-index: 20;
				color: var(--colorWhite);
				bottom: 2.5rem;
				left: 0;
				display: grid;
				gap: 0 4rem;
				grid-template-columns: repeat(4, auto) 1fr;
				align-items: end;
				width: 100%;
				
				@media only screen and (max-width: 767px) {
					position: relative;
					bottom: auto;
					left: auto;
					order: 5;	
					grid-template-columns: auto 1fr;
					margin-top: 2rem;
					gap: 1.5rem 3rem;
					align-items: start;
				}
				
				.variant-single-data {
					display: flex;
					flex-direction: column;
					max-width: 13em;
					
					@media only screen and (max-width: 767px) {
						gap: 0.6rem 0;
					}
					
					label {
						font: var(--text-xl);
						
						@media only screen and (max-width: 767px) {
							font: var(--text-xs-mobile);	
							color: var(--colorBrownMedium);
						}	
					}
					
					strong {
						font: var(--text-3xl);
						
						@media only screen and (max-width: 767px) {
							font: var(--text-2xl);	
						}	
					}
				}
				
				.cta__button {
					margin-left: auto;
					
					@media only screen and (max-width: 767px) {
						grid-column: span 2;
						width: 100%;	
						margin-top: 0.6rem;
						height: auto;
						
						> span {
							flex-direction: row;
							gap: 0 1ch;
						}
					}
				}
			}
			
			.variant-slider__container {
				
				@media only screen and (max-width: 767px) {
					order: 2;	
				}
				
				.variant-slider__single-variant {
					
					display: none;
					
					&:first-child {
						display: block;
					}
					
					.variant-slider__single-variant__slider {
						position: relative;
						
						
						.embla__viewport {
							
							width: calc(100% + calc(var(--outerSpacing) * 2) + calc(var(--sideSpacing) * 4));
							margin-inline: calc(calc(var(--outerSpacing) + calc(var(--sideSpacing) * 2)) * -1);
							/*width: calc(100% + calc(var(--sideSpacing) * 4));
							margin-inline: calc(calc(var(--sideSpacing) * 2) * -1);*/
							overflow: hidden;
							
							.embla__container {
								display: flex;
								
								.embla__slide {
									font-size: 0;
									line-height: 0;
									width: 100%;
									flex-shrink: 0;
									flex-grow: 0;
									
									img {
										width: 100%;
										height: auto;
										aspect-ratio: 1920/1024;
										object-fit: cover;
										
										@media only screen and (max-width: 767px) {
											aspect-ratio: 393/294;	
										}
									}
								}
							}
						}
						
						.embla__controls {
							position: absolute;
							z-index: 9;
							margin-top: 0;
							top: 50%;
							transform: translateY(-50%);
							width: 100%;
							justify-content: space-between;
							--color: var(--colorWhite);
							
							@media only screen and (max-width: 767px) {
								justify-content: end;
								top: auto;
								transform: translateY(0%);	
								right: 0rem;
								bottom: 2.2rem;
							}
							
						}
					}
				}
			}
		
		}
	}
}

.section__floorplan-slider {
	--multiplicatorBottom: 1.5 !important;	

	@media only screen and (max-width: 767px) {
		--multiplicatorTop: 2.5 !important;	
		--multiplicatorBottom: 2.4 !important;	
	}
	
	.innerwrapper {
		
		.floorplan-slider__wrapper {
			position: relative;
			
			.floorplan-slider__container {
				display: grid;
				grid-template-columns: 1fr auto;
				
				@media only screen and (max-width: 767px) {
					grid-template-columns: auto 1fr;	
					gap: 0 1rem;
				}
				
				.floorplan-title {
					font: var(--text-7xl);
					display: block;
					grid-column: 1/2;
					grid-row: 1/2;
					
					@media only screen and (max-width: 767px) {
						font: var(--text-6xl);	
						grid-column: span 2;
						grid-row: 1/2;
					}
				}
			
				.floorplan-slider__single-floorplan__slider {
					position: relative;
					grid-column: 1/3;
					grid-row: 2/3;
					/*padding-top: 6.4rem;
					padding-bottom: 6.4rem;*/
					padding-top: 2.4rem;
					padding-bottom: 2.4rem;
					
					@media only screen and (max-width: 767px) {
						grid-column: span 2;
						grid-row: 2/3;
						padding-top: 0;
						padding-bottom: 0;
					}
					
					&:not(:has(.embla__viewport .embla__container .embla__slide:nth-child(2))){
						.embla__controls {
							display: none;
						}
					}
			
					.embla__viewport {
						width: calc(100% + calc(var(--sideSpacing) * 4));
						margin-inline: calc(calc(var(--sideSpacing) * 2) * -1);
						overflow: visible;
						
						
			
						.embla__container {
							display: flex;
							
							
							&:not(:has(.embla__slide:nth-child(2))){
								justify-content: center;
							}
			
							.embla__slide {
								flex: 0 0 85%;
								min-width: 0;
								display: flex;
								flex-direction: column;
								justify-content: center;
								opacity: 0.5;
								
								transition: opacity 0.4s ease;
								
								@media only screen and (max-width: 767px) {
									aspect-ratio: 1 / 2;
									flex: 0 0 60%;
								}
								
								&.is-selected {
									opacity: 1;
								}
			
								.floorplan-image {
									font-size: 0;
									line-height: 0;
									width: 100%;
									padding-inline: 2rem;
									position: relative;
									
									@media only screen and (max-width: 767px) {
										transform: rotate(-90deg);	
										width: 200%;
										margin-left: -50%;
									}
									
									.floorplan-dot-wrapper {
										position: absolute;
										left: var(--left);
										top: var(--top);
									}
									
									.floorplan-tooltipp {
										width: 29.55rem;
										min-height: 3rem;
										background-color: var(--colorWhite);
										position: absolute;
										left: 50%;
										top: 50%;
										transform: translate(-50%,-50%);
										opacity: 0;
										pointer-events: none;
										border-radius: var(--borderRadius);
										overflow: clip;
										z-index: 9;
										
										@media only screen and (max-width: 767px) {
											transform-origin: 0% 0%;
											transform: rotate(90deg) translate(-50%,-50%);
										}
										
										.floorplan-tooltipp-close {
											padding: 0;
											border: 0;
											background: transparent;
											margin: 0;
											width: 2.5rem;
											position: absolute;
											right: 1rem;
											top: 1rem;
											z-index: 9;
											cursor: pointer;
											
											svg {
												width: 100%;
												height: auto;
											}
										}
										
										.media {
											width: 100%;
											border-radius: 0 0 var(--borderRadius) var(--borderRadius);
											overflow: clip;
											
											img,
											video {
												width: 100%;
												height: auto;
												aspect-ratio: 591/292;
												object-fit: cover;
											}
										}
										
										.floorplan-tooltipp-content {
											font: var(--text-xl);
											color: var(--colorBrownDark);
											padding: 2em;
										}
									}
									
									.floorplan-dot {
										
										width: 5rem;
										height: auto;
										aspect-ratio: 1/1;
										display: flex;
										justify-content: center;
										align-items: center;
										border-radius: 50%;
										
										border: 0;
										padding: 0;
										background: transparent;
										font-size: 0;
										line-height: 0;
										cursor: pointer;
										
										svg {
											width: 25%;
											height: auto;
										}
									}
									
			
									img {
										width: 100%;
										height: auto;
										aspect-ratio: 1920 / 762;
										object-fit: contain;
									}
								}
							}
						}
					}
			
					.embla__controls {
						position: absolute;
						z-index: 9;
						margin-top: 0;
						top: 50%;
						transform: translateY(-50%);
						width: 100%;
						justify-content: space-between;
						
						@media only screen and (max-width: 767px) {
							top: -4rem;
							right: 0;
							transform: translateX(0);
							justify-content: end;
						}
					}
				}
				

				
				.variant-data {
					grid-column: 1/2;
					grid-row: 3/4;
					z-index: 20;
					color: var(--colorWhite);
					display: grid;
					gap: 1.7rem 2rem;
					/*grid-template-columns: 15rem 10.5rem 13rem;*/
					grid-template-columns: 15rem 10.5rem 1fr;
					align-items: end;
					width: 100%;
					margin-top: 0.3rem;
					
					@media only screen and (max-width: 767px) {
						grid-template-columns: 0.65fr 0.76fr 1fr;
						grid-column: span 2;
						grid-row: 4/5;
						margin-top: 3.5rem;
						align-items: start;
						gap: 2.3rem 2rem;
					}
					
					.variant-single-data {
						display: flex;
						flex-direction: column;
						/*max-width: 13em;*/
						
						@media only screen and (max-width: 767px) {
							gap: 0.4em 0;
						}	
						
						
						label {
							font: var(--text-xl);
							color: var(--colorBrownMedium);
						}
						
						strong {
							font: var(--text-3xl);
							
							@media only screen and (max-width: 767px) {
								font: var(--text-2xl);	
							}
						}
						
						@media only screen and (max-width: 767px) {
							&.length {
								order: 1;
							}	
							&.width {
								order: 2;
							}	
							&.height {
								order: 3;
							}	
							&.price {
								order: 4;
							}	
							&.sleeping {
								order: 5;
							}	
							&.weight {
								order: 6;
							}	
						}
						
					}
					
					&:not(:has(.variant-single-data.price)){
						.variant-single-data.length {
							grid-column: span 2;
							
							@media only screen and (max-width: 767px) {
								grid-column: span 1;	
							}
						}
						
						.variant-single-data.weight {
							@media only screen and (max-width: 767px) {
								grid-column: span 2;	
							}
						}
					}
					
					.button__wrapper {
						grid-column: span 3;
						margin-top: 1.9em;
						display: flex;
						gap: 0 3.2em;
						
						@media only screen and (max-width: 767px) {
							order: 15;	
							margin-top: 1.5em;
							flex-direction: column;
							gap: 1em;
						}
						
						.cta__link {
							
							
							
						}
					}
					

				}
				
				.cta__button.with-subline {
					grid-column: 2/3;
					grid-row: 3/4;
					margin-left: auto;
					margin-top: auto;
					
					@media only screen and (max-width: 767px) {
						grid-column: span 1;
						grid-row: 3/4;
						height: auto;
						width: 100%;
						gap: unset;
						
						> span {
							flex-direction: row;
							gap: 0 1ch;
						}
					}
					
				}
				
				.cta__button.button-360 {
					grid-column: 2 / 3;
					grid-row: 1 / 2;
					margin-left: auto;
					margin-bottom: auto;
					cursor: pointer;
					
					&[hidden]{
						visibility: hidden;
					}
					
					@media only screen and (max-width: 767px) {
						grid-column: span 1;
						grid-row: 3/4;
						gap: 0 0.6em;
					}
				}
				
				&:not(:has(.cta__button.with-subline)){
					.cta__button.button-360 {
						@media only screen and (max-width: 767px) {
							grid-column: span 2;
							margin-inline: auto;	
						}
					}
				}
				
				
			}
		
		}
	}
}

.section__image-grid {
	.innerwrapper {
		
		.headline__wrapper {
			h2 {
				@media only screen and (max-width: 767px) {
					font: var(--text-6xl) !important;	
				}
			}
		}
		
		.media__grid {
			display: flex;
			flex-direction: column;
			margin-top: 4.1rem;
			gap: 1rem 0;
			
			.single__media-item {
				display: grid;
				grid-template-columns: 100%;
				grid-template-rows: 1fr auto;
				overflow: clip;
				border-radius: var(--borderRadius);
				
				.content {
					grid-column: 1 / 2;
					grid-row: 1 / 2;
					margin-top: 0;
					position: relative;
					z-index: 5;
					width: 100%;
					padding: 2.5rem 2.5rem 2.3rem 2.5rem;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					font: var(--text-xl);
					color: var(--colorWhite);
					
					@media only screen and (max-width: 767px) {
						padding: 2rem;	
					}
					
					.teaser__title {
						font: var(--text-4xl);
						color: var(--colorWhite);
						
						+ p {
							margin-top: 0.5em;
						}
					}
					
					.plus {
						padding: 0;
						margin: 0;
						width: 2.4rem;
						height: auto;
						background: transparent;
						border: 0;
						margin-top: auto;
						margin-bottom: -0.1rem;
						margin-right: -0.1rem;
						margin-left: auto;
						cursor: pointer;
						
						svg {
							width: 100%;
							height: auto;
							overflow: visible;
						}
					}
				}
				
				.media {
					font-size: 0;
					line-height: 0;
					grid-column: 1 / 2;
					grid-row: 1 / 2;
					position: relative;
					
					&:before {
						content: '';
						display: block;
						position: absolute;
						left: 0;
						top: 0;
						height: 100%;
						width: 100%;
						z-index: 2;
						background: linear-gradient(
							0deg,
							rgba(255, 255, 255, 0) 0%,
							rgba(36, 33, 30, 0) 45%,
							rgba(36, 33, 30, 0.45) 75%,
							rgba(36, 33, 30, 0.85) 100%
						);
					}
					
					img,
					video {
						width: 100%;
						aspect-ratio: 1514/1009;
						object-fit: cover;
						height: auto;
						
						@media only screen and (max-width: 767px) {
							aspect-ratio: 345/459;	
						}
					}
					
					video {
						aspect-ratio: unset;
					}
				}
				
				&:not(:has(.teaser__title)){
					.media {
						&:before {
							display: none;
						}
					}
				}
			}
			
			
			
			.media-row-2 {
				display: grid;
				grid-template-columns: repeat(2,1fr);
				gap: 0 1rem;
				
				@media only screen and (max-width: 767px) {
					grid-template-columns: 100%;	
					gap: 1rem;	
				}
				
				.single__media-item {
					.media {
						img,
						video {
							aspect-ratio: 747/498;
							
							@media only screen and (max-width: 767px) {
								aspect-ratio: 345/259;	
							}
						}
					}
				}
			}
			
			.media-row-3 {
				display: grid;
				grid-template-columns: repeat(3,1fr);
				gap: 0 1rem;
				
				@media only screen and (max-width: 767px) {
					grid-template-columns: 100%;
					gap: 1rem;	
				}
				
				.single__media-item {
					.media {
						img,
						video {
							aspect-ratio: 491/491;
							
							@media only screen and (max-width: 767px) {
								aspect-ratio: 345/129;	
							}
						}
					}
				}
			}
		}
	}
}

.section__material {
	.innerwrapper {
		
		.headline__wrapper {
			h2 {
				@media only screen and (max-width: 767px) {
					font: var(--text-6xl) !important;	
				}
			}
		}
		
		.material__grid {
			display: grid;
			grid-template-columns: repeat(5,1fr);
			gap: 1rem;
			margin-top: 4.2rem;
			
			@media only screen and (max-width: 767px) {
				grid-template-columns: 100%;
			}
			
			.single__material {
				width: 100%;
				border-radius: var(--borderRadius);
				overflow: clip;
				position: relative;
				background-color: #B6B6B6;
				
				.material-title-holder {
					position: absolute;
					left: 2.5rem;
					top: 2.5rem;
					z-index: 9;
					display: flex;
					flex-direction: column;
					gap: 0.5rem 0;
					
					@media only screen and (max-width: 767px) {
						left: 2rem;
						top: 2rem;
					}
					
					.material-title {
						font: var(--text-4xl);
						display: inline-block;
						
						color: var(--colorWhite);
						
					}
					
					.material-name {
						font: var(--text-xl);
						display: inline-block;
						
						color: var(--colorWhite);
						
					}
				}
				
				
				
				&.small {
					grid-column: span 2;
					
					@media only screen and (max-width: 767px) {
						grid-column: unset;	
					}
				}
				
				&.medium {
					grid-column: span 3;
					
					@media only screen and (max-width: 767px) {
						grid-column: unset;	
					}
					
					.material__detail {
						.single__material-image {
							img {
								aspect-ratio: unset;
								height: 70% !important;
								width: auto !important;
								right: auto !important;
								left: 50% !important;
								transform: translateX(-50%);
								bottom: auto !important;
								top: 5rem !important;
								
								@media only screen and (max-width: 767px) {
									height: 64% !important;
									top: 8rem !important;	
								}
							}
						}
					}
				}
				
				&.small,
				&.medium {
					height: 45rem;
					
					@media only screen and (max-width: 767px) {
						height: 45.7rem;
					}
				}
				
				&.fullwidth {
					grid-column: span 5;
					height: 22.6rem;
					
					@media only screen and (max-width: 767px) {
						grid-column: unset;
						height: 45.7rem;
					}
					
					.material__wrapper {
						.material__nav {
							bottom: 3.4rem;
							max-width: 28rem;
							
							@media only screen and (max-width: 767px) {
								bottom: 2rem;
								gap: 0.5rem;
							}
							
							.single__material-thumb {
								border-radius: 50%;
								width: 3rem;	
								
								@media only screen and (max-width: 767px) {
									width: 4.85rem;
								}
							}	
						}	
					}
					
					.material__detail {
						.single__material-image {
							img {
								aspect-ratio: 930 / 768;
								height: auto !important;
								width: 41% !important;
								right: 2rem !important;
								left: auto !important;
								bottom: auto !important;
								top: -4rem !important;
								
								@media only screen and (max-width: 767px) {
									aspect-ratio: 930 / 768;
									height: auto !important;
									width: 60% !important;
									right: auto !important;
									left: 50% !important;
									bottom: auto !important;
									top: 10rem !important;
									transform: translateX(-50%);
								}
							}
						}
					}
				}
				
				.material__wrapper {
					width: 100%;
					height: 100%;
					
					.material__nav {
						display: flex;
						z-index: 9;
						position: absolute;
						left: 2.4rem;
						bottom: 2.4rem;
						gap: 0.5rem;
						flex-wrap: wrap;
						
						@media only screen and (max-width: 767px) {
							left: 2rem;
							bottom: 2rem;
						}
						
						.single__material-thumb {
							border: 0;
							padding: 0;
							background: transparent;
							overflow: clip;
							border-radius: var(--borderRadius);
							width: 5rem;
							border: calc(var(--borderWidth) * 1.5) solid transparent;
							font-size: 0;
							line-height: 0;
							cursor: pointer;
							
							
							&.is-active {
								border-color: var(--colorBlueDark);
							}
							
							img {
								width: 100%;
								height: auto;
								aspect-ratio: 1/1;
								object-fit: cover;
							}
						
						}

					}
					
					.material__detail {
						width: 100%;
						height: 100%;
						position: relative;
						
						.single__material-image {
							position: absolute;
							inset: 0;
							width: 100%;
							height: 100%;
							
							img {
								position: absolute;
								inset: 0;
								width: 100%;
								height: 100%;
								object-fit: cover;
							}
						}
					}
				}
			}
		}
	}
}

.section__combined-material {
	.innerwrapper {
		

		
		.headline__wrapper {
			h2 {
				@media only screen and (max-width: 767px) {
					font: var(--text-6xl) !important;	
				}
			}
		}
		
		.material__wrapper {
			
			@media only screen and (max-width: 767px) {
				margin-top: 3rem;	
			}
			.material__nav {
				display: flex;
				gap: 0 0.5rem;
				
				.single__material-thumb {
					background: transparent;
					border: 0;
					padding: 0;
					margin: 0;
					border-radius: var(--borderRadius);
					overflow: clip;
					width: 6rem;
					border: calc(var(--borderWidth) * 1.5) solid transparent;
					font-size: 0;
					line-height: 0;
					cursor: pointer;
					
					
					&.is-active {
						border-color: var(--colorBlueDark);
					}
					
					img {
						width: 100%;
						height: auto;
						aspect-ratio: 1/1;
					}
				}
			}
			
			.material__grid {
				display: grid;
				grid-template-columns: repeat(3,1fr);
				grid-template-rows: repeat(2,1fr);
				gap: 1rem;
				margin-top: 1rem;
				
				@media only screen and (max-width: 767px) {
					grid-template-columns: repeat(2,1fr);
					grid-template-rows: unset;	
				}
				
				.single__material {
					width: 100%;
					aspect-ratio: 491/900;
					height: 100%;
					background-color: #B6B6B6;
					position: relative;
					border-radius: var(--borderRadius);
					overflow: clip;
					
					.material-title-holder {
						position: absolute;
						left: 2rem;
						top: 2rem;
						z-index: 9;
						display: flex;
						flex-direction: column;
						gap: 0.5rem 0;
						
						@media only screen and (max-width: 767px) {
							left: 1.5rem;
							top: 1.5rem;
						}
						
						.material-title {
							font: var(--text-4xl);
							display: inline-block;
							
							color: var(--colorWhite);
							
						}
						
						.material-name {
							font: var(--text-xl);
							display: inline-block;
							
							color: var(--colorWhite);
							
						}
					}
					
					.material__detail {
						height: 100%;
						
						.single__material-image {
							position: relative;
							width: 100%;
							height: 100%;
							overflow: clip;
							
							img {
								width: 100%;
								height: 100%;
								object-fit: contain;
								position: absolute;
								z-index: 9;
								pointer-events: none;
							}
							
						}
					}
					
					&.exterior {
						grid-column: 1/2;
						grid-row: 1/3;
						
						@media only screen and (max-width: 767px) {
							grid-column: unset;
							grid-row: unset;	
							aspect-ratio: 491/900;
						}
						
						.single__material-image {
							img {
								left: -87%;
								bottom: -20%;
								width: 227%;
								height: auto;
							}	
						}
					}
					&.seats {
						grid-column: 2/3;
						grid-row: 1/3;
						
						@media only screen and (max-width: 767px) {
							grid-column: unset;
							grid-row: unset;	
							aspect-ratio: 491/900;
						}
						
						.single__material-image {
							img {
								height: 86%;
								bottom: 0;
							}	
						}
					}
					&.furniture {
						grid-column: 3/4;
						grid-row: 1/2;
						aspect-ratio: unset;
						
						
						@media only screen and (max-width: 767px) {
							grid-column: unset;
							grid-row: unset;	
							aspect-ratio: 1/1;
							
							
						}
						
						.single__material-image {
							img {
								object-fit: cover;
							}	
						}
					}
					&.rims {
						grid-column: 3/4;
						grid-row: 2/3;
						aspect-ratio: unset;
						
						@media only screen and (max-width: 767px) {
							grid-column: unset;
							grid-row: unset;	
							aspect-ratio: 1/1;
						}
						
						.single__material-image {
							img {
								width: 80%;
								height: 80%;
								right: 0;
								bottom: 0;
							}	
						}
					}
				}
				
			}
		}
		
		/*
		.material__grid {
			display: grid;
			grid-template-columns: repeat(5,1fr);
			gap: 1rem;
			margin-top: 4.2rem;
			
			@media only screen and (max-width: 767px) {
				grid-template-columns: 100%;
			}
			
			.single__material {
				width: 100%;
				border-radius: var(--borderRadius);
				overflow: clip;
				position: relative;
				background-color: #B6B6B6;
				
				.material-title-holder {
					position: absolute;
					left: 2.5rem;
					top: 2.5rem;
					z-index: 9;
					display: flex;
					flex-direction: column;
					gap: 0.5rem 0;
					
					@media only screen and (max-width: 767px) {
						left: 2rem;
						top: 2rem;
					}
					
					.material-title {
						font: var(--text-4xl);
						display: inline-block;
						
						color: var(--colorWhite);
						
					}
					
					.material-name {
						font: var(--text-xl);
						display: inline-block;
						
						color: var(--colorWhite);
						
					}
				}
				
				
				
				&.small {
					grid-column: span 2;
					
					@media only screen and (max-width: 767px) {
						grid-column: unset;	
					}
				}
				
				&.medium {
					grid-column: span 3;
					
					@media only screen and (max-width: 767px) {
						grid-column: unset;	
					}
					
					.material__detail {
						.single__material {
							img {
								aspect-ratio: unset;
								height: 70% !important;
								width: auto !important;
								right: auto !important;
								left: 50% !important;
								transform: translateX(-50%);
								bottom: auto !important;
								top: 5rem !important;
								
								@media only screen and (max-width: 767px) {
									height: 64% !important;
									top: 8rem !important;	
								}
							}
						}
					}
				}
				
				&.small,
				&.medium {
					height: 45rem;
					
					@media only screen and (max-width: 767px) {
						height: 45.7rem;
					}
				}
				
				&.fullwidth {
					grid-column: span 5;
					height: 22.6rem;
					
					@media only screen and (max-width: 767px) {
						grid-column: unset;
						height: 45.7rem;
					}
					
					.material__wrapper {
						.material__nav {
							bottom: 3.4rem;
							max-width: 28rem;
							
							@media only screen and (max-width: 767px) {
								bottom: 2rem;
								gap: 0.5rem;
							}
							
							.single__material-thumb {
								border-radius: 50%;
								width: 3rem;	
								
								@media only screen and (max-width: 767px) {
									width: 4.85rem;
								}
							}	
						}	
					}
					
					.material__detail {
						.single__material {
							img {
								aspect-ratio: 930 / 768;
								height: auto !important;
								width: 41% !important;
								right: 2rem !important;
								left: auto !important;
								bottom: auto !important;
								top: -4rem !important;
								
								@media only screen and (max-width: 767px) {
									aspect-ratio: 930 / 768;
									height: auto !important;
									width: 60% !important;
									right: auto !important;
									left: 50% !important;
									bottom: auto !important;
									top: 10rem !important;
									transform: translateX(-50%);
								}
							}
						}
					}
				}
				
				.material__wrapper {
					width: 100%;
					height: 100%;
					
					.material__nav {
						display: flex;
						z-index: 9;
						position: absolute;
						left: 2.4rem;
						bottom: 2.4rem;
						gap: 0.5rem;
						flex-wrap: wrap;
						
						@media only screen and (max-width: 767px) {
							left: 2rem;
							bottom: 2rem;
						}
						
						.single__material-thumb {
							border: 0;
							padding: 0;
							background: transparent;
							overflow: clip;
							border-radius: var(--borderRadius);
							width: 5rem;
							border: calc(var(--borderWidth) * 1.5) solid transparent;
							font-size: 0;
							line-height: 0;
							cursor: pointer;
							
							
							&.is-active {
								border-color: var(--colorBlueDark);
							}
							
							img {
								width: 100%;
								height: auto;
								aspect-ratio: 1/1;
								object-fit: cover;
							}
						
						}

					}
					
					.material__detail {
						width: 100%;
						height: 100%;
						position: relative;
						
						.single__material {
							position: absolute;
							inset: 0;
							width: 100%;
							height: 100%;
							
							img {
								position: absolute;
								inset: 0;
								width: 100%;
								height: 100%;
								object-fit: cover;
							}
						}
					}
				}
			}
		}
		*/
	}
}

.section__legal-page {
	padding-bottom: 12rem;
	
	.innerwrapper {
		.content {
			font: var(--text-xl);
			
			@media only screen and (max-width: 767px) {
				font: var(--text-sm-mobile);	
			}
			
			h1 {
				margin: 0 0 0.6em 0;
				font: var(--text-7xl);
				
				@media only screen and (max-width: 767px) {
					font: var(--text-6xl);	
				}
			}
			
			h2 {
				margin: 0;
				font: var(--text-5xl);
				
				&:not(:first-child){
					margin-top: 1.9em;
					
					@media only screen and (max-width: 767px) {
						margin-top: 2.5em;
					}
				}
				
				+ h3 {
					margin-top: 1.4em !important;
					
					@media only screen and (max-width: 767px) {
						margin-top: 1.7em !important;
					}
				}
			}
			
			h3 {
				margin: 0;
				font: var(--text-3xl);
				
				@media only screen and (max-width: 767px) {
					font: var(--text-4xl);	
				}
				
				&:not(:first-child){
					margin-top: 1.9em;
				}
			}
			
			h4 {
				margin: 0;
				font: var(--text-2xl);
			}
		}
	}
}

.section__downloads {
	.innerwrapper {
		
		.downloads__wrapper {
			display: flex;
			flex-direction: column;
			margin-top: 3.5rem;
			gap: 1rem;
			
			.single-download-box {
				display: grid;
				grid-template-columns: 19rem 1fr auto;
				gap: 0 3.1rem;
				background-color: var(--colorWhite);
				border-radius: var(--borderRadius);
				padding: 1rem 2.4rem 1rem 1rem;
				align-items: center;
				
				.image {
					img {
						width: 100%;
						height: auto;
						aspect-ratio: 380/240;
						object-fit: cover;
						border-radius: var(--borderRadius);
					}
				}
				
				.content {
					h2,
					h3 {
						margin: 0;
						font: var(--text-4xl);
						color: var(--colorBrownDark);
					}
					
					h3 {
						color: var(--colorBrownMedium);
					}
				}
				
				.download-select {
					select { 
						min-width: 11em;
					}
				}
				
			}
		}
	}
}

.section__leadforms {
	.innerwrapper {
		.form__wrapper {
			background-color: var(--colorBrownLight);
			border-radius: var(--borderRadius);
			padding: 2.5rem;
			margin-top: 4rem;
			
			@media only screen and (max-width: 767px) {
				margin-top: 2rem;	
				padding: 2rem;
			}
			
			&.steps-activated {
				display: grid;
				grid-template-columns: 32rem 1fr;
				gap: 0 4rem;
				min-height: 26rem;
				
				@media only screen and (max-width: 767px) {
					grid-template-columns: 100%;
					gap: 3rem 0;
				}
				
				.steps__container {
					ul {
						list-style-type: none;
						margin: 0;
						padding: 0;
						display: flex;
						flex-direction: column;
						counter-reset: steps;
						gap: 1rem 0;
						
						li {
							list-style-type: none;
							margin: 0;
							padding: 0;
							position: relative;
							
							button {
								padding: 0;
								background-color: transparent;
								color: var(--colorBrownDark);
								border-radius: 0;
								min-height: 0;
								display: block;
								font: var(--text-3xl);
								text-align: left;
								position: relative;
								padding-left: 1.6em;
								cursor: pointer;
								
								&:before {
									counter-increment: steps;
									content: counter(steps);
									position: absolute;
									left: 0;
									top: 0.1em;
									width: 1.75em;
									font-size: 0.6em;
									font-weight: 700;
									height: auto;
									aspect-ratio: 1/1;
									border: calc(var(--borderWidth) * 1.6) solid var(--colorBrownDark);
									border-radius: 50%;
									display: flex;
									justify-content: center;
									align-items: center;
								}
							}
							
							&:not(.is-active){
								opacity: 0.3;
							}
						}
					}
				}
				
				fieldset {
					
					
					&.is-active {
						display: flex;
						flex-direction: column;
					}
					
					legend {
						display: none;
					}
					
					.ehg-pim-leadform__next-step {
						margin-left: auto;
						margin-top: 2rem;
					}
				}
			}
			
			&:not(.steps-activated){
				fieldset {
					&:has(legend){
						&:not(:first-of-type){
							margin-top: 5rem;
						}
					}
				}
			}
			
			&:has(.ehg-pim-leadform__field.ehg-pim-leadform__field--copy) form{
				display: grid;
				grid-template-columns: 32rem 1fr;
				gap: 0 4rem;
				min-height: 26rem;
				
				@media only screen and (max-width: 767px) {
					grid-template-columns: 100%;
					gap: 3rem 0;
				}
				
				.ehg-pim-leadform__field.ehg-pim-leadform__field--copy {
					grid-row: span 6;
					
					.ehg-pim-leadform__copy {
						font: var(--text-xl);
						
						p {
							strong {
								font-weight: 400;
								font: var(--text-3xl);
								margin-bottom: 0.5em;
							}
						}
					}
					
					
				}
			}
			
			fieldset {
				
				
				
				legend {
					font: var(--text-3xl);
					margin-bottom: 0.5em;
				}
			}
			
			.ehg-pim-leadform__field.ehg-pim-leadform__field--brick {
				&:has([type="submit"]){
					display: flex;
					justify-content: end;
					
					.ehg-pim-leadform__brick--submitButton {
						margin-top: 2rem;
					}
				}
			}
			
			input[type="submit"],
			button {
				font: var(--text-xl);
				background-color: var(--colorBlueDark);
				color: var(--colorWhite);
				border-radius: var(--borderRadius);
				text-decoration: none;
				padding: 0.5em 1.1em;
				display: inline-flex;
				justify-content: space-between;
				border: 0;
				min-height: 3.6rem;
				align-items: center;
				cursor: pointer;
				
				@media only screen and (max-width: 767px) {
					font: var(--text-sm-mobile);	
					padding-block: 1em;
				}
			}
			
			.ehg-pim-leadform__brick-label {
				min-height: 1.4lh;
			}
			
			@media only screen and (max-width: 767px) {
				.ehg-pim-leadform__brick-label:not([aria-hidden="true"]) {
					min-height: 1.4lh;
				}
				.ehg-pim-leadform__brick-label[aria-hidden="true"]{
					font-size: 0;
					line-height: 0;
				}
			}
			
			
			
			.ehg-pim-leadform__field label, 
			.ehg-pim-leadform__field small {
				font: var(--text-xl);
				margin-bottom: 0.2em;
				opacity: 0.5;
			}
			
			.ehg-pim-leadform__grid {
				row-gap: 1.5rem;
			}
			
			.ehg-pim-leadform__field--checkbox {
				label {
					font: var(--text-xl);
					position: relative;
					padding-left: 2em;
					color: var(--colorBrownDark);
					opacity: 1;
					
					a {
						color: inherit;
					}
					
					
					&:before {
						content: '';
						display: block;
						width: 1.3em;
						height: auto;
						aspect-ratio: 1 / 1;
						background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none' viewBox='0 0 28 28'><rect x='.75' y='.75' width='26.5' height='26.5' rx='13.25' fill='%23fff' stroke='%23988E85' stroke-width='1.5'/></svg>");
						background-repeat: no-repeat;
						background-size: 98% auto;
						background-position: center;
						position: absolute;
						left: 0;
						top: 0;
					}
					
					&:has(> input:checked) {
						&:before {
							background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none' viewBox='0 0 28 28'><rect x='.75' y='.75' width='26.5' height='26.5' rx='13.25' fill='%23fff' stroke='%23988E85' stroke-width='1.5'/><path fill='%2324211e' d='m17.1 8-4.008 9.287-2.192-5.238-1.9.89L11.967 20h2.25L19 8.864z'/></svg>");
						}
					}
					
					> input {
						position: absolute;
						width: 0;
						height: 0;
						left: -9999999px;
						opacity: 0;
					}
				}
			}
			
			.ehg-pim-leadform__dealer-results,
			.ehg-pim-leadform__dealer-selection {
				background-color: var(--colorWhite);
				border-radius: var(--borderRadius);
				padding: 1.2rem;
				
				h2 {
					margin: 0;
					font: var(--text-xl);
				}
				
				.ehg-pim-leadform__dealer-selection-content {
					.ehg-pim-leadform__dealer-name {
						font: var(--text-xl);
						margin: 0 0 0.5em 0;
					}
					.ehg-pim-leadform__dealer-route {
						display: none;
					}
				}
				
				.ehg-pim-leadform__dealer-reset {
					font: var(--text-lg);
					padding: 0.75em 1em;
					min-height: 0;
					margin-block: 0 auto;
					background-color: var(--colorBrownDark);
				}
				
				.ehg-pim-leadform__dealer-status {
					color: var(--colorRed);
					margin-top: 0.5em;
				}
				
				.ehg-pim-leadform__dealer-list {
					display: flex;
					flex-direction: column;
					margin-top: 1rem;
					
					.ehg-pim-leadform__dealer {
						display: grid;
						grid-template-columns: 1fr auto;
						padding: 1rem;
						border-radius: var(--borderRadius);
						border-color: var(--colorBrownMedium);
						
						@media (hover: hover) {
							&:hover {
								background-color: var(--colorBrownLight);
							}	
						}
						
						.ehg-pim-leadform__dealer-name {
							grid-column: 1/3;
							grid-row: 1/2;
							font: var(--text-xl);
							margin: 0 0 0.5em 0;
						}
						
						.ehg-pim-leadform__dealer-address {
							grid-column: 1/2;
							grid-row: 2/3;
							margin: 0;
						}
						
						.ehg-pim-leadform__dealer-distance {
							grid-column:1/2;
							grid-row: 3/4;
							margin: 0;
							
						}
						
						.ehg-pim-leadform__dealer-select {
							grid-column: 2/3;
							grid-row: 2/4;
							grid-column: 2 / 3;
							grid-row: 2 / 4;
							font: var(--text-lg);
							padding: 0.75em 1em;
							min-height: 0;
							margin-block: 0 auto;
							background-color: var(--colorBrownDark);
						}
						
						.ehg-pim-leadform__dealer-route {
							display: none;
						}
						
						
					}
				}
			}
		}
	}
}

.section__contact-form {
	.innerwrapper {
		.form__wrapper {
			background-color: var(--colorBrownLight);
			border-radius: var(--borderRadius);
			padding: 2.5rem;
			margin-top: 4rem;
			
			@media only screen and (max-width: 767px) {
				margin-top: 2rem;	
				padding: 2rem;
			}
			
			&.with-content {
				display: grid;
				grid-template-columns: 34rem 1fr;
				gap: 0 2rem;
				min-height: 26rem;
				
				@media only screen and (max-width: 767px) {
					grid-template-columns: 100%;
					gap: 3rem 0;
				}
				
				.content {
					font: var(--text-xl);
					
					h2 {
						font: var(--text-5xl);
						margin: 0;
					}
					
					p {
						max-width: 20em;
					}
				}
			}
			

			input[type="submit"],
			button {
				font: var(--text-xl);
				background-color: var(--colorBlueDark);
				color: var(--colorWhite);
				border-radius: var(--borderRadius);
				text-decoration: none;
				padding: 0.5em 1.1em;
				display: inline-flex;
				justify-content: space-between;
				border: 0;
				min-height: 3.6rem;
				align-items: center;
				cursor: pointer;
				
				@media only screen and (max-width: 767px) {
					font: var(--text-sm-mobile);	
					padding-block: 1em;
				}
			}
			
			select,
			input[type="text"],
			input[type="email"],
			input[type="tel"],
			input[type="date"],
			textarea {
				width: 100%;
				
				&.wpcf7-not-valid {
					outline: 1px solid var(--colorRed);
				}
			}
			
			textarea {
				resize: none;
				padding-block: 0.8em;
				height: 10lh;
			}
			
			.wpcf7-not-valid-tip {
				display: none;
			}
			
			.wpcf7 {
				width: 100%;
			}

			.wpcf7-form {
				display: grid;
				grid-template-columns: repeat(2,1fr);
				gap: 1.5rem 1rem;
				
				.column-1,
				[data-class="wpcf7cf_group"] {
					grid-column: span 2;
				}
				
				.wpcf7-response-output {
					margin: 0;
					border: 0 !important;
					padding: 0;
					width: 100%;
					grid-column: span 2;
					font: var(--text-xl);
				}
				
				.submit-column {
					> p {
						display: flex;
						justify-content: flex-end;
						position: relative;
						
						input[type="submit"] {
							background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'><path stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3 8 7.89 5.26a2 2 0 0 0 2.22 0L21 8M5 19h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2'/></svg>");	
							background-repeat: no-repeat;
							background-size: 1.2em auto;
							background-position: calc(100% - 1em) center;
							padding-right: 3.5em;
						}
						
						.wpcf7-spinner {
							margin: 0;
							position: absolute;
							background-color: var(--colorBlueMedium);
							opacity: 1;
							right: 1rem;
							top: 50%;
							width: 2rem;
							height: 2rem;
							transform: translateY(-50%);
						
							&::before {
								content: '';
								position: absolute;
								top: 0.5rem;
								left: 0.5rem;
								width: 0.5rem;
								height: 0.5rem;
								background-color: #fbfbfc;
								border: 0;
								border-radius: 50%;
								transform-origin: 0.5rem 0.5rem;
								animation: spin 1000ms linear infinite;
							}
						}
					}
				}
				
				.column-1,
				.column-2 {
					> p {
						margin: 0;
						
						label {
							display: block;
							font: var(--text-xl);
							margin-bottom: 0.2em;
							opacity: 0.5;
							
							.screen-reader-text {
								display: none;
							}
						}
						
						br {
							display: none;
						}
					}
				}
			}
			
			.wpcf7-form-control.wpcf7-acceptance {
				.wpcf7-list-item {
					margin: 0;
					
					> label {
						
						.wpcf7-list-item-label {
							font: var(--text-xl);
							position: relative;
							padding-left: 2em;
							color: var(--colorBrownDark);
							opacity: 1;
							display: block;
							
							a {
								color: inherit;
							}
							
							
							&:before {
								content: '';
								display: block;
								width: 1.3em;
								height: auto;
								aspect-ratio: 1 / 1;
								background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none' viewBox='0 0 28 28'><rect x='.75' y='.75' width='26.5' height='26.5' rx='13.25' fill='%23fff' stroke='%23988E85' stroke-width='1.5'/></svg>");
								background-repeat: no-repeat;
								background-size: 98% auto;
								background-position: center;
								position: absolute;
								left: 0;
								top: 0;
							}

							
							
						}
						
						> input {
							position: absolute;
							width: 0;
							height: 0;
							left: -9999999px;
							opacity: 0;
						}
						
						input:checked + .wpcf7-list-item-label {
							&:before {
								background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none' viewBox='0 0 28 28'><rect x='.75' y='.75' width='26.5' height='26.5' rx='13.25' fill='%23fff' stroke='%23988E85' stroke-width='1.5'/><path fill='%2324211e' d='m17.1 8-4.008 9.287-2.192-5.238-1.9.89L11.967 20h2.25L19 8.864z'/></svg>");
							}
						}
						
					}
				}
			}


		}
	}
}

.section__press {
	.innerwrapper {
		display: flex;
		flex-direction: column;
		gap: 3.4rem 0;
		
		@media only screen and (max-width: 767px) {
			gap: 2.6rem 0;	
		}
		
		.press-articles__wrapper {
			display: flex;
			flex-direction: column;
			margin-top: 0;
			gap: 1rem;
			
			.single__press-article {
				background-color: var(--colorWhite);
				border-radius: var(--borderRadius);
				padding: 3.2rem 2.4rem 3.2rem 2.8rem;
				display: grid;
				grid-template-columns: 1fr auto;
				align-items: center;
				
				@media only screen and (max-width: 767px) {
					display: flex;
					flex-direction: column;	
					gap: 1rem 0;
					padding: 2rem;
				}
				
				.content {
					display: flex;
					flex-direction: column;
					
					.title-headline {
						font: var(--text-4xl);
						color: var(--colorBrownDark);
					}
					.title-subheadline {
						font: var(--text-4xl);
						color: var(--colorBrownMedium);
					}
				}
				
				.button__wrapper {
					display: flex;
					flex-direction: column;
					gap: 0.3rem 0;
					
					@media only screen and (max-width: 767px) {
						flex-direction: column;
						width: 100%;
					}
					
					p {
						margin: 0 !important;
						width: 100%;
						
						.cta__button {
							width: 100%;
						}
					}
				}
			}
			
		}
	}
}

.section__404 {
	--backgroundColor: var(--colorBrownLight);
	
	.innerwrapper {
		font: var(--text-3xl);
		
		h1 {
			font: var(--text-7xl);
			margin: 0;
			margin-bottom: 0.2em;
		}
		
		h2 {
			font: var(--text-5xl);
			margin: 0;
			margin-bottom: 1.2em;
		}
		
		p {
			margin: 2em 0;
		}
	}
}