@font-face {
	font-family: 'Chillax';
	src: url('../fonts/Chillax-Semibold.woff2') format('woff2'),url('../fonts/Chillax-Semibold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Open Sans';
	src: url('../fonts/OpenSans.woff2') format('woff2'),url('../fonts/OpenSans.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Open Sans';
	src: url('../fonts/OpenSans-Italic.woff2') format('woff2'),url('../fonts/OpenSans-Italic.woff') format('woff');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Open Sans';
	src: url('../fonts/OpenSans-Bold.woff2') format('woff2'),url('../fonts/OpenSans-Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Open Sans';
	src: url('../fonts/OpenSansSemiCondensed-LightItalic.woff2') format('woff2'),url('../fonts/OpenSansSemiCondensed-LightItalic.woff') format('woff');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

* {
	box-sizing: border-box;
	interpolate-size: allow-keywords;
}



.faq{
	padding-block: 5em;  
	
	& h2{
		text-align: center;
	}
	
	&>div{
		grid-column: inner;  
		
		& .details{
			padding-block: 2em 0;
			display: flex; 
			flex-direction: column; 
			gap: 0; 
			
			& details{
				overflow: clip;
	
				& summary{
					border-bottom: 1px solid var(--c-blue); 
					padding-block: 1em; 
					display: grid;
					grid-template-columns: auto 1em; 
					cursor: pointer; 
					
					& h3{
						margin: 0 0.5em 0 0; 
						transition: var(--t-std); 
						color: var(--c-blue); 
						font-weight: 400; 
						
						
						@media(max-width: 39rem){
							text-wrap: pretty; 
						}
					}
					&::-webkit-details-marker {
						display: none;
					}
				}
				
				& .content{
					padding-block: 2em 2em; 
					
					&>:last-child{
						margin-bottom: 0; 
					}
					
				}
				&::details-content {
					block-size: 0;
					transition: var(--t-std);
				}

				&:open::details-content {
					block-size: auto;
				}
				&[open],
				&:open{
					& summary{
						border-color: var(--c-orange)!important; 					
						
						& h3{
							color: var(--c-orange); 
						}
					}
				}
			}
	
		}
	}
}


@supports (-webkit-hyphens: none) {
	details::details-content {
		height:auto!important;
	}
}

.faq details summary:after {
	content: ""; 
	height: 3px; 
	background: var(--c-blue); 
	width: 100%;
	align-self: center;
	grid-column: 2; 
	grid-row: 1; 
	transition: var(--t-std); 
}
.faq details:open summary:after {
	background: var(--c-orange); 
}
.faq details summary:before {
	content: ""; 
	width: 3px; 
	background: var(--c-blue); 
	height: 1em;
	align-self: center;
	grid-column: 2; 
	grid-row: 1; 
	justify-self: center;
	transition: var(--t-std); 
}
.faq details:open summary:before,
.faq details[open] summary:before {
	transform: scaleY(0);
}


:root {
	--c-orange: #ff6c2b;
	--c-blue: #00aaff;
	--c-darkblue: #001322;
	
	@media(prefers-reduced-motion:no-preference) {
		--t-std: all 0.3s ease allow-discrete;
		--t-slow: all 1.5s ease allow-discrete;
	}
}



html {
	font-size: 1.5rem;
	
	@media(max-width: 90rem) {
		font-size: 1.35rem;
	}
	@media(max-width: 62rem) {
		font-size: 1.2rem;
	}
	@media(max-width: 39rem) {
		font-size: 1rem;
	}
}

body {
	margin: 0;
	font-family: "Open Sans",sans-serif;
	color: white;
	background-color: var(--c-darkblue);
	line-height: 1.2; 
	
	@media(max-width: 39rem) {
		hyphens:auto;
	}
}

p {
	margin: 0 0 1em;
}

p:empty {
	display: none;
}

a {
	transition: var(--t-std);
	color: var(--c-red);
}

a:hover {
	color: var(--c-blue);
}

video,img {
	max-width: 100%;
	display: block;
}


h1,h2 {
	font-family: 'Chillax', Arial, sans-serif;
}
h1,h2,h3,h4,h5,h6 {
	font-weight: 600;
	line-height: 1.111;
	text-wrap: balance;
	margin-block: 1em 0.5em; 
}

h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child {
	margin-top: 0em;
}

h1 {
	font-size: 3rem;
}

h2 {
	font-size: 2.5rem;
}

h3 {
	font-size: 1.5rem;
}

h4 {
	font-size: 1.25rem;
}

h5 {
	font-size: 1.125rem;
}

h6 {
	font-size: 1em;
}


.highlight-big{
	font-size: 1.5rem;
	color: var(--c-blue); 
	
}
.highlight{
	color: var(--c-blue);
	font-weight: bold; 
}
ul.highlight{
	color: var(--c-blue);
	font-weight: 700; 
	margin-top: 0; 
	list-style-type: square;
	
	& li::marker{
		font-size: 0.5em; 
	}
}
p:has(+ul.highlight){
	margin-bottom: 0; 
	color: var(--c-blue);
	font-weight: 700; 
}



header{
	display: grid; 
	justify-content: center; 
	grid-template-rows: auto auto 4em;
	min-height: 100vh;
	
	& .text{
		max-width: 50vw; 
		grid-row: 2; 
		grid-column: content; 
		z-index: 1;
		
		& h1{
			@media(max-width: 105rem){
				hyphens: auto; 
			}
		}
		@media(max-width: 75rem){
			max-width: 50%; 
		}
		@media(max-width: 62rem){
			max-width: 100%; 
			width: 100% 
		}
	}
	
	& .logo{
		width: 275px; 
		grid-row: 1; 
		grid-column: content; 
		z-index: 1;
		margin-block: 2em; 
		max-width: 100%; 
	}
	
	& .img{
		grid-column: 1/-1;
		grid-row: 1/4;
		
		& img{
			width: 100%;
			height: 100%;
			object-position: center right;
			object-fit: cover;
			
			@media(max-width: 90rem){
				object-position: 85% 50%;
			}
			
			@media(max-width: 75rem){
				object-position: 75% 50%;
			}
		}

	}
	
}

@media(max-width: 62rem){
	header .img:after{
		content: "";
		background: linear-gradient(90deg, transparent, var(--c-darkblue) 100%);
		position: absolute;
		z-index: 0;
		inset: 0;
		width: 100%;
		height: 100%;
		opacity: 0.33;
	}
}
@media(max-width: 39rem){
	header .img:after{
		opacity: 0.6;
	}
}
@media(max-width: 30rem){
	header .img:after{
		opacity: 0.8;
	}
}

header:after{
	
	content: "";
	grid-row: 2 / 4;
	grid-column: full;
	background: radial-gradient(73.18% 21.19% at 50% 110.37%, var(--c-blue) 0%, color-mix(in srgb, var(--c-darkblue) 0%, transparent) 100%);
	background-size: 100% 100%;	
	
}

.btn{
	font-size: 1.5rem; 
	border-radius: 100vw; 
	display: inline-block; 
	text-decoration: none; 
	transition: var(--t-std); 
	
	&.btn-transp{
		border: 1px solid white;
		padding: 0.25em 1.75em;
		margin-top: 1em;
		text-align: center;
		width: fit-content; 
		
		&:hover{
			background-color: var(--c-orange); 
			color: white; 
		}
	}
	&.btn-white{
		display: flex; 
		gap: 0.5em; 
		border: 1px solid white;
		padding: 0.25em 1em;
		text-align: center;
		background-color: white; 
		color: var(--c-orange); 
		width: fit-content; 
		align-items:center;
		
		& img{
			transition: var(--t-std); 
		}
		
		&:hover{
			color: white;
			background-color: var(--c-orange); 
			
			& img{
				filter: brightness(0) invert(1); 
			}
		}
	}
	&.btn-orange{
		display: flex; 
		padding: 0.25em 1em;
		background-color: var(--c-orange); 
		border: 1px solid var(--c-orange);
		width: fit-content; 
		gap: 0.5em; 
		align-items:center;
		color: white; 
		cursor: pointer; 
		
		&:hover{
			background-color: var(--c-blue);
			border-color: white; 
			color: white;
		}
		
		& img{
			filter: brightness(0) invert(1); 
		}
	}
	
	&.btn-small{
		font-size: 1rem; 
		
		& img{
			width: 1.125em;
		}
	}
}

.btn-row{
	display: flex; 
	flex-wrap: wrap; 
	gap: 1em; 
	margin-top: 2em; 
	
}

.centertext{
	text-align: center; 
	padding-block: 6em 2em; 
	
	&>div{
		display: flex; 
		flex-direction: column; 
		align-items: center; 
	
		& h2{
			max-width: 20ch;
		}
		
		& p{
			max-width: 60ch;
			
			& strong{
				color: var(--c-blue);
			}
		}
	}
}

.quote{
	padding-block: 2em 4em; 
	
	&>div{
		grid-column: inner; 
		border: 1px solid white; 
		border-radius: 1em; 
		display: grid; 
		grid-template-columns: 6fr 9fr;
		gap: 1em;
		padding: 2em 1em 0 2em;
		position: relative; 
				
		& .img{
			align-self: end; 
			
			& img{
				width: 100%; 
				aspect-ratio: 479 / 585;
			}
			
			@media(max-width: 39rem){
				align-self: center; 
				& img{
					max-width: 275px; 
				}
			}
		}
		
		& .text{
			display: flex; 
			flex-direction: column; 
			justify-content: center; 
			
			& blockquote{
				font-size: 1.5em; 
				margin: 1em 0.5em; 
				
				& p{
					font-weight: 400;
					font-style: italic;
				}
				
				& footer{
					/*
					display: grid;
					grid-template-columns: auto 1fr; */
					display: flex; 
					flex-direction: column; 
					gap: 0 0.25em; 
					font-weight: 700;
					
					& cite{
						font-style: normal; 
					}
					
					& .function{
						grid-column: 2; 
						font-size: 0.66em; 
					}
				}
				
				@media(max-width: 39rem){
					margin: 1em 0; 
				}
			}
		}
		
		@media(max-width: 90rem){
			grid-column: content; 
		}
		@media(max-width: 39rem){
			display: flex; 
			flex-direction: column-reverse; 
			padding: 1em 1em 0 1em;
		}
	}
}
.quote>div:before{
	content: ""; 
	position: absolute; 
	width: 100%; 
	height: 75%; 
	bottom: 0; 
	left: 0; 
	z-index: -1; 
	background: radial-gradient(closest-side, color-mix(in srgb, var(--c-blue) 75%, transparent), transparent 100%);
	background-size: 100% 200%; 
}

.iconteaser{
	text-align: center;
	margin-block: 4em 0; 
	position: relative; 
	
	background: url('../images/ecosz/raute.png');

	background-repeat:no-repeat;
	background-size: 100% 100%;
	
	overflow: hidden;
  
	& .teasers{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-rows: repeat(99, auto);
		gap: 0em 1em;
		margin-block: 1em;
		
		& .item{
			align-items: center;
			grid-column: span 2;
			margin-block: 2em;
			display: grid;
			grid-row: span 3;
			grid-template-rows: subgrid;
			
			&:nth-child(4){
				grid-column: 2/4; 
			}
			
			& img{
				width: 7.5em; 
				justify-self: center;
			}
			
			& p{
				max-width: 37ch; 
				justify-self: center;
				align-self: start; 
				
				&:last-child{
					margin-bottom: 0; 
				}
				
				@media(max-width: 105rem){
					hyphens: auto; 
				}
			}
			
			& h3{
				hyphens: auto; 
				align-self: start; 
			}
		}
		
		@media(max-width: 62rem){
			& .item{
				&:nth-child(4) {
					grid-column: span 3; 
				}
				&:nth-child(5){
					grid-column: span 3; 
				}
			}
		}
		@media(max-width: 48rem){
			grid-template-columns: 1fr 1fr 1fr 1fr;
			
			& .item{
				margin-block: 1em;
				
				&:nth-child(4){
					grid-column: 3 / 5; 
				}
				&:nth-child(5){
					grid-column: 2/4; 
				}
			}
		}
		@media(max-width: 39rem){
			grid-template-columns: 1fr 1fr;
			& .item{
				&:nth-child(4){
					grid-column: span 2; 
				}
				&:nth-child(5){
					grid-column: span 2; 
				}
			}
		}
	}
	
	& .btn-orange{
		justify-self: center;
	}
}

.col2bg{
	display: grid; 
	justify-content: center; 
	grid-template-rows: auto;
	margin-block: 0 4em;

	& .text{
		max-width: 62ch;
		grid-row: 1;
		grid-column: content;
		z-index: 1;
		align-self: end;
		padding-bottom: 4em;
		padding-top: 6em; 
	}
	
	& .img{
		grid-column: full;
		grid-row: 1;
		position: relative; 
		
		& img{
			width: 100%; 
			height: 100%;
			object-position: 50% 50%;
			object-fit: cover;
		}
		
	}
	
}

@media(max-width: 105rem){
	.col2bg .img:before{
		content: "";
		background: linear-gradient(90deg, transparent, var(--c-darkblue) 100%);
		position: absolute;
		z-index: 0;
		inset: 0;
		width: 100%;
		height: 100%;
		opacity: 0.33;
	}
}
@media(max-width: 90rem){
	.col2bg .img:before{
		opacity: 0.8; 
	}
	
	.col2bg .img img{
		object-position: 66% 50%;
	}			
}
@media(max-width: 48rem){
	.col2bg .img:before{
		opacity: 0.75; 
		background: var(--c-darkblue); 
	}
	.col2bg .img img{
		object-position: 85% 50%;
	}			
}

.col2bg .img:after{
	content: "";
	background: linear-gradient(var(--c-darkblue), transparent 16%, transparent 90%, var(--c-darkblue) 99%);
	position: absolute;
	width: 100%;
	height: 100%;
	inset: 0;
	z-index: 0;
}

.col2img{
	margin-block: 4em 6em;
	
	&>div{
		display: grid; 
		grid-template-columns: 2fr 2.5fr 0.5fr; 
		gap: 4em; 
		
		& .img{
			& img{
				border-radius: 1em; 
				width: 100%; 
				aspect-ratio: 1; 
			}
		}
		
		@media(max-width: 105rem){
			grid-template-columns: 2fr 2.5fr; 
		}
		@media(max-width: 62rem){
			display: flex; 
			flex-direction: column; 
		}
	}
}

.videofull{
	display: grid; 
	
	& .video{
		grid-column: 1; 
		grid-row: 1; 
		width: 100%; 
		aspect-ratio: 16 / 9; 
		z-index: 2; 
		position: relative; 
		
		& img{
			position: absolute; 
			width: 100%; 
			height: 100%; 
			inset: 0; 
			z-index: 50; 
			transition: var(--t-std); 
			display: none; 
		}
		& iframe{
			position: absolute; 
			width: 100%; 
			height: 100%; 
			inset: 0; 
			z-index: 1; 
		}
		& div{
			position: absolute; 
			width: 100%; 
			height: 100%; 
			inset: 0; 
			z-index: 1; 
			border: 2px solid red; 
		}
	}
	& video{
		grid-column: 1; 
		grid-row: 1; 
		width: 100%; 
		aspect-ratio: 16 / 9; 
		z-index: 2; 
		position: relative; 
	}
	& .text{
		grid-column: 1; 
		grid-row: 1; 
		text-align: center; 
		display: flex; 
		flex-direction: column; 
		justify-content: center; 
		align-items: center; 
		position: relative; 
		transition: var(--t-std);
		z-index:100; 
		
		& h2{
			font-size: 5em; 
			
			@media(max-width: 90rem){
				font-size: 4.5em; 
			}
			@media(max-width: 62rem){
				font-size: 3.75em; 
			}
			@media(max-width: 48rem){
				font-size: 2.5em; 
			}
			@media(max-width: 30rem){
				font-size: 2em; 
			}
		}
		
		& button{
			width: 6rem; 
			aspect-ratio: 1; 
			border-radius: 100%; 
			background-color: white; 
			border: none; 
			transition: var(--t-std);
			cursor: pointer; 
			font-size: 1rem; 
			
			&:hover{
				scale: 1.1; 
			}

			span {
				position: relative;
				background-color: var(--c-darkblue);
				text-align: left;
				transform: translateX(25%) translateY(5%) rotate(30deg) skewX(-30deg) scale(1,.866);
				display: inline-block; 
			}
			
			@media(max-width: 30rem){
				font-size: 0.66rem; 
				width: 6em; 
			}
		}
	}
	
	&.playing{
		& .video img,
		& .text{
			opacity: 0; 
			z-index: 1;
			display: none; 
		}
	}
}
.videofull .text button span:before,
.videofull .text button span:after {
	content: '';
	position: absolute;
	background-color: inherit;
	transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}
.videofull .text button span:after {
	transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}

.videofull .text button span,
.videofull .text button span:before,
.videofull .text button span:after {
	width:  1.25em;
	aspect-ratio: 1; 
	border-top-right-radius: 30%;
}


.imgafter{
	padding-block: 4em 4em;	
	overflow: clip; 
	
	& .img{
		grid-column: full;
		align-self: start;
		justify-self: end;
		width: 66vw;
		max-width: calc(100vw - 40ch);
		margin-top: -10vw; 
		transform-origin: top right;
		z-index: 1;
		position: relative;
		grid-row: 2; 
		
		& img{
			width: 100%; 
			aspect-ratio: 1267 / 947;
		}
		
		@media(max-width: 75rem){
			margin-top: -5vw; 
		}
		@media(max-width: 48rem){
			grid-row: 2; 
			max-width: 100%;
			width: 100%; 
			margin-top: 0; 
			margin-bottom: -5vw; 
		}
	}
	
	& .text{
		z-index: 2;
		position: relative;
		
		& p{
			max-width: 65ch; 
		}
	}


	& .dlform{
		grid-row: 2; 
		position: relative;
		width: fit-content;
		align-self: start;
		
		@media(max-width: 48rem){
			grid-row: 3; 
		}
		&.sending:after {
			content: "Bitte warten,\00a0ihre Daten werden verarbeitet.";
			inset: 0;
			width: 100%;
			height: 100%;
			padding: 2em;
			padding-bottom: 4em;
			display: flex;
			text-align: center;
			align-items: flex-end;
			justify-content: center;
			box-sizing: border-box;
			position: absolute;
			z-index: 2;
		}


		& .success,& .failure {
			display: none;			
			padding-block: 2em 1em;
			position: relative;
			z-index: 2;
				
			&.show {
				display: block;
			}
		}
		
		& .error{
			color: var(--c-orange); 
			max-width: 35ch; 
			display: none; 
			margin-bottom:-1em; 
			
			&.act{
				display: block; 
			}
		}
		&.sending form{
			filter: blur(8px);
			opacity: 0.33;
		}
		& form{
			padding-block: 2em 1em; 
			display: flex; 
			flex-direction: column; 
			gap: 1em; 
			width: fit-content;
			
			& input[type="password"]{
				display: none; 
			}
			
			& label.textfeld{
				display: grid; 
				
				& span{
					grid-column: 1; 
					grid-row: 1; 
					padding: 0.5em; 
					z-index: 1; 
					position: relative; 
					transition: var(--t-std); 
					width: fit-content; 
					
				}
				
				& input{
					grid-column: 1; 
					grid-row: 1; 
					max-width: 35ch; 
					width: 100%; 
					background: transparent; 
					border: none; 
					border-bottom: 1px solid white;
					padding: 0.5em; 
					font-size: 1rem; 
					color: white; 
					z-index: 2; 
					position: relative; 
					border-radius: 0; 
					
					&.filled + span,
					&:focus-visible + span{
						opacity: 0; 
					}
				}
			}
			
			& label.checkboxfeld{
				width: 35ch; 
				max-width: 100%; 
				display: flex; 
				align-items: start; 
				gap: 0.33em; 
				cursor: pointer; 
				
				& input{
					width: 1.33em;
					border: 1px solid white;
					background-color: transparent;
					appearance: none;
					aspect-ratio: 1;
					position: relative;
					border-radius: 0;
					flex-shrink: 0;
					
					&:checked:after{
						position: absolute; 
						content: ""; 
						background: white; 
						inset: 2px; 
					}
				}
				
				& span{
					font-size: 0.8em; 
				}
			}
			
			& .btn{
				margin-top: 1em; 
			}
		}
	}	
	
}

.products{
	padding-block: 5em 5em; 
	&>div{
		& h2{
			text-align: center; 
		}
		
		& .items{
			padding-inline: 3em; 
			margin-block: 2em 0 ; 
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr; 
			gap: 1em; 
			
			& article{
				border: 1px solid white; 
				border-radius: 1em; 
				overflow: clip; 
				display: flex; 
				flex-direction: column; 
				transition: var(--t-std); 
				hyphens: auto; 
				
				&:hover{
					border-color: var(--c-orange); 
				}
				
				& img{
					width: 100%; 
					aspect-ratio: 1; 
					object-fit: contain; 
					object-position: center center; 
					background-color: white;
				}
				
				& .text{
					margin: 1em; 
					display: flex; 
					flex-direction: column; 
					gap: 0.66em; 
					flex-grow: 1; 
					justify-content: space-between; 
					
					& h3{
						margin: 0; 
						font-size: 1rem; 
						color: var(--c-blue); 
						font-weight: 400; 
					}
					
					& a{
						text-transform: uppercase; 
						color: var(--c-orange);
						display: grid; 
						grid-template-columns: auto 0.5em auto auto; 
						text-decoration: none;
						width: fit-content; 
						align-items: center; 
						border-bottom: 2px solid transparent;
						padding-block-end: 0.15em; 
						
						&>span{
							grid-column: 1; 
							grid-row:1; 
						}
						
						&:hover{
							border-color: #F36F42;
						}
					}
				}
			}
			
			@media(max-width: 75rem){
				grid-template-columns: 1fr 1fr; 
			}
			@media(max-width: 39rem){
				padding-inline: 0; 
			}
		}
	}
}
.products article .text a:after{
	content: ""; 
	background: var(--c-orange); 
	border-radius: 100%; 
	width: 5px; 
	aspect-ratio: 1;
	grid-column: 4; 
	grid-row:1; 
}
.products article .text a:before{
	content: ""; 
	background: var(--c-orange); 
	grid-column: 3; 
	width: 1em; 
	height: 1px; 
	grid-row:1; 
}


.cta{
	padding-block: 5em 4em; 

	&>div{
		border: 1px solid white; 
		border-radius: 1em; 
		position: relative; 
		text-align: center; 
		margin-inline: 3em; 
		padding: 5em 1em;
		
		& .text{
			display: flex; 
			flex-direction: column; 
			justify-content: center; 
		}
		
		& .imgrow{
			display: flex;
			align-items: center; 
			justify-content: center; 
			margin-bottom: 3em; 
			
			&>img{
				width: 6.25em; 
				aspect-ratio: 1; 
				
				&:not(:first-child){
					margin-left: -0.75em; 
				}
				@media(max-width: 30rem){
					width: 20vw;
					margin-left: -1vw; 
				}
			}
		}
		
		@media(max-width: 39rem){
			margin: 0; 
			grid-column: inner;
			padding-block: 5em;
		}
	}
	

	& .contactform{
		position: relative;
		width: fit-content;
		align-self: center;
		
		& .inputrow{
			display: flex; 
			gap: 2em; 
			
			@media(max-width: 75rem){
				flex-direction: column; 
				gap: 1em; 
			}
		}
		
		&.sending:after {
			content: "Bitte warten,\00a0ihre Daten werden verarbeitet.";
			inset: 0;
			width: 100%;
			height: 100%;
			padding: 2em;
			padding-bottom: 4em;
			display: flex;
			text-align: center;
			align-items: flex-end;
			justify-content: center;
			box-sizing: border-box;
			position: absolute;
			z-index: 2;
		}


		& .success,& .failure {
			display: none;			
			padding-block: 2em 1em;
			&.show {
				display: block;
			}
		}
		
		& .error{
			color: var(--c-orange); 
			display: none; 
			margin-bottom:-1em; 
			
			&.act{
				display: block; 
			}
		}
		&.sending form{
			filter: blur(8px);
			opacity: 0.33;
		}
		& form{
			padding-block: 2em 1em; 
			display: flex; 
			flex-direction: column; 
			gap: 1em; 
			width: fit-content;
			
			& input[type="password"]{
				display: none; 
			}
			
			& label.textfeld{
				display: grid; 
				
				& span{
					grid-column: 1; 
					grid-row: 1; 
					padding: 0.5em; 
					z-index: 1; 
					position: relative; 
					transition: var(--t-std); 
					width: fit-content; 
					
				}
				
				& input{
					grid-column: 1; 
					grid-row: 1; 
					max-width: 100%;
					width: 35ch;
					background: transparent; 
					border: none; 
					border-bottom: 1px solid white;
					padding: 0.5em; 
					font-size: 1rem; 
					color: white; 
					z-index: 2; 
					position: relative; 
					border-radius: 0; 
					
					&.filled + span,
					&:focus-visible + span{
						opacity: 0; 
					}
					
					@media(max-width: 75rem){
						width: 28ch; 
					}
					@media(max-width: 62rem){
						width: 100%; 
					}
				}
			}
			
			& label.textarea{
				display: grid; 
				
				& span{
					grid-column: 1; 
					grid-row: 1; 
					padding: 0.5em; 
					z-index: 1; 
					position: relative; 
					transition: var(--t-std); 
					width: fit-content; 
					
				}
				
				& textarea{
					resize: vertical; 
					grid-column: 1; 
					grid-row: 1; 
					max-width: 100%;
					width: 100%;
					height: 6lh; 
					background: transparent; 
					border: none; 
					border-bottom: 1px solid white;
					padding: 0.5em; 
					font-size: 1rem; 
					color: white; 
					z-index: 2; 
					position: relative; 
					border-radius: 0; 
					font-family: inherit; 
					
					&.filled + span,
					&:focus-visible + span{
						opacity: 0; 
					}
				}
			}
			
			& label.checkboxfeld{
				width: 100%; 
				display: flex; 
				align-items: start; 
				gap: 0.33em; 
				cursor: pointer; 
				
				& input{
					width: 1.33em;
					border: 1px solid white;
					background-color: transparent;
					appearance: none;
					aspect-ratio: 1;
					position: relative;
					border-radius: 0;
					flex-shrink: 0;
					
					&:checked:after{
						position: absolute; 
						content: ""; 
						background: white; 
						inset: 2px; 
					}
				}
				
				& span{
					font-size: 0.8em; 
					text-align: left; 
				}
			}
			
			& .btn{
				margin-top: 1em; 
				align-self: center;
			}
		}
	}		
	
	
}
.cta>div:before{
	content: ""; 
	position: absolute; 
	width: 100%; 
	height: 75%; 
	bottom: 0; 
	left: 0; 
	z-index: -1; 
	background: radial-gradient(closest-side, color-mix(in srgb, var(--c-blue) 75%, transparent),  color-mix(in srgb, var(--c-darkblue) 0%, transparent) 100%);
	background-size: 100% 200%; 
}


.footer{
	padding-block: 2em; 
	
	&>div{
		display: grid;
		grid-template-columns: 1fr auto; 
		justify-content: space-between; 
		align-items: center; 
		gap: 2em; 
		
		& img{
			width: 10em; 
		}
		
		.copyright{
			text-align: right; 
		}
		
		@media(max-width: 39rem){
			gap: 1em; 
		}
	}
	
}