@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;
}

: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);
	background-color: #000;
	line-height: 1.2; 
	scrollbar-gutter: stable;

	@media(max-width: 39rem) {
		hyphens:auto;
	}

	&:has(:popover-open){
		overflow: hidden; 
	}
	
	&.fullh{
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
		background: linear-gradient(166.3deg, #113148 6.51%, #000000 21.8%);

	}
}

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{
	
	.switchlang{
		grid-column: 5;
		grid-row: 1;
		z-index: 2;
		text-decoration: none;  
		justify-self: end;
		padding-block: 1.5em;		

		.flag-de, 
		.flag-en {
			height: 1em;
			aspect-ratio: 5 / 3;
			position: relative;
			display: flex;
			opacity: 0.8;
			transition: all 0.3s ease;			
			box-shadow: 0 0 10px #fff8;
			
			&:hover {
				scale: 1.3;
				opacity: 1;
			}
		}

		.flag-en {
			background-color: #012169;
		}

		.flag-de {
			background: linear-gradient(black 33.3%,red 33.3%,red 66.6%,gold 66.6%);
		}


		.flag-en:after, 
		.flag-en:before {
			content: "";
			position: absolute;
			inset: 0;
			height: 50%;
			background: linear-gradient(transparent 40%,#c00 40%,#c00 60%,transparent 60%),linear-gradient(90deg,transparent 45%,#c00 45%,#c00 55%,transparent 55%),linear-gradient(transparent 33.33%,#fff 33.33%,#fff 66.66%,transparent 66.66%),linear-gradient(90deg,transparent 41.66%,#fff 41.66%,#fff 58.33%,transparent 58.33%),linear-gradient(26.565deg,transparent 46.666%,#c00 46.666%,#c00 50%,transparent 50%),linear-gradient(-26.565deg,transparent 50%,#c00 50%,#c00 53.333%,transparent 53.333%),linear-gradient(26.565deg,transparent 45%,#fff 45%,#fff 55%,transparent 55%),linear-gradient(-26.565deg,transparent 45%,#fff 45%,#fff 55%,transparent 55%);
			background-size: 100% 200%;
		}

		.flag-en:before {
			transform: rotateZ(180deg);
			transform-origin: bottom;
		}
	}
	.logo{
		width: 275px; 
		grid-row: 1; 
		grid-column: content; 
		z-index: 1;
		margin-block: 2em; 
		max-width: calc(100% - 50px);  
	}
}


header.smallheader{
	display: grid; 
	justify-content: center; 
	grid-template-rows: auto;	
}

header.tallheader{
	display: grid; 
	justify-content: center; 
	grid-template-rows: auto 1fr 4em;
	min-height: 100vh;
	background: linear-gradient(150deg, rgb(17, 49, 72) 0%, rgb(0, 0, 0) 110%);
	
	.texttiles{
		display: grid; 
		grid-template-columns: 6fr 4fr; 
		grid-row: 2; 
		
		@media(max-width: 75rem){
			grid-template-columns: 1fr; 
			gap: 2em; 
		}
		
		.tiles{
			display: grid;
			gap: 1em; 
			grid-template-columns: 1fr 1fr; 
			grid-template-rows: auto auto auto auto; 
            align-self: center;
			
			div{
				text-align: center; 
				padding: 2em 1em; 
				justify-content: center;  
				display: grid; 
				grid-template-rows: subgrid; 
				border-radius: 1em; 
				grid-row: span 2; 
                gap: 0.5em;
				
				span{
					font-size: 3rem; 
					font-weight: 600; 
					font-family: 'Chillax', Arial, sans-serif;
					justify-self: end; 
                    align-self: end;
					
					@media(max-width: 39rem){
						font-size: 2rem; 
					}
				}
				
				&:after{
					content: ""; 
					width: 90%; 
					height: 0.425rem; 
					background-color: var(--c-orange);
					border-radius: 100vw; 
					justify-self: center; 
				}
				@media(max-width: 39rem){
					padding: 1em 0.5em;  
				}
			}
			
			&>:nth-child(1){
				background-color: #00AAFF80; 
			}
			&>:nth-child(2){
				background-color: white; 
				span{
					color: var(--c-darkblue); 
				}
			}
			&>:nth-child(3){
				background-color: white; 
				span{
					color: var(--c-darkblue); 
				}
			}
			&>:nth-child(4){
				background-color: #00AAFF80; 
				span{
					font-size: 1.7rem; 
					min-height: 2.35rem; 
					@media(max-width: 39rem){
						font-size: 1.35rem; 
					}
				}
			}
		}
	}
	
	.text{
        align-self: center;
		z-index: 1;
		
		ul{
			font-size: 1.5rem; 
		}
		
		& h1{
			@media(max-width: 105rem){
				hyphens: auto; 
			}
		}
	}
	
	
	.img{
		grid-column: 1/-1;
		grid-row: 1/4;
		position: relative;
		
		& 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%;
			}
		}
	}
	
	
	&: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%;	
	}
	&:before{
		content: "";
		grid-row: 1 / 4;
		grid-column-start: centerline;
		grid-column-end: full-end;
		background: url(/images/mittelspannung/blitz2.svg);
		background-position: left top;
		background-size: 92% 128%;
		background-repeat: no-repeat;
	}

}

.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; 
	
}


& .kihinweis{
	position: absolute;
	right: 2vw;
	bottom: calc(5vh);
	border-radius: 100vw;
	color: white;
	padding: 0.33em 2.5em;
	font-size: 0.9em;
	background-color: #113148;
	z-index: 5;
	user-select: none; 
}



.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%; 
}

.main{

}

.footer{
	padding-block: 2em; 
	position: relative; 
	
	&>div{
		display: grid;
		grid-template-columns: 1fr auto; 
		justify-content: space-between; 
		align-items: center; 
		gap: 2em; 
        z-index: 3;
		
		& img{
			width: 10em; 
		}
		
		.copyright{
			text-align: right; 
		}
		
		@media(max-width: 39rem){
			gap: 1em; 
		}
	}
	
	&:after{
		content: ""; 
		position: absolute;
		width: 100%; 
		bottom: 0; 
		left: 0; 
		aspect-ratio: 1; 
		background: radial-gradient(40% 20% at 50% 100%, #00AAFF 0%, rgba(0, 19, 34, 0) 100%);
		z-index: 0; 
	}
	
	&:before{
		content: ""; 
		position: absolute;
		width: 100%; 
		height: 100%; 
		inset: 0; 
		z-index: -1; 
		background-color: #113148; 
	}
	
	&.footerblack:before{
		display: none; 
	}
	&.footerblack:after{
		z-index: -1; 
	}
}

.infopaket{
	background: radial-gradient(71.07% 112.94% at 51.17% 48.16%, rgba(0, 170, 255, 0.44) 0%, rgba(0, 19, 34, 0) 83.82%);
	padding-block: 7em 5em; 
	position: relative; 

	h2 {
		span{
			color: var(--c-orange); 
		}
	}
	
	.text-holder{
		grid-column-end: centerline; 
		position: relative; 
		z-index: 10; 
		
		@media(max-width: 48rem){
			grid-column-end: content-end; 
		}
	}
	
	.img-holder{
		grid-column-start: centerline; 
		grid-column-end: full-end;
		margin-top: 2em; 
		margin-left: 1em; 
		position: relative; 
        display: flex;
        justify-content: center;
        align-items: center;
				
		&:after{
			content: ""; 
			background: radial-gradient(50% 50% at 50% 50%, rgba(0, 170, 255, 0.62) 0%, rgba(0, 170, 255, 0) 100%);
			position: absolute; 
			top: 50%; 
			left: 0;
			width: 100%; 
			aspect-ratio: 3; 
			z-index: -1;
			transform: translateY(-50%);
		}
		@media(max-width: 48rem){
			grid-column-start: full-start; 
			grid-column-end: full-end;
		}
	}
	
	.deko{
		position: absolute; 
		left: 56%; 
		height: 90%; 
		top: 5%; 
		width: 44%; 
		background: url('/images/mittelspannung/blitz.svg');
		background-size: contain; 
		background-repeat: no-repeat; 
		z-index: -1;
        background-position: center center;
		
		@media(max-width: 48rem){
            left: 0;
            top: 45%;
            width: 100%;
            height: 60%; 
		}
	}
	
	ul{
		font-size: 1.5rem; 
		display: grid;
		gap: 1em; 
		padding: 0; 
		margin-bottom: 1.5em; 
	}


	li{
		border-radius: 0.66em; 
		color: white; 
		background-color: #00AAFF26;
		padding: 0.66em; 
		list-style-position: inside;
		display: flex; 
		gap: 0.5em; 
		align-items: center; 
		box-shadow: 0px 4px 4px 0px #00000040;
		border: 1px solid var(--c-blue); 
		margin-left: -0.5em; 
			
		&:before {
			content: "";
			background-image: url('/images/mittelspannung/circlecheck.svg');
			width: 1.25em;
			aspect-ratio: 1; 
			background-size: contain; 
		}
		
		@media(max-width: 75rem){
			hyphens: auto; 
		}
		@media(max-width: 48rem){
			margin-left: 0; 
		}
	}
}

.infopaketform{
	border: none; 
	border-radius: 1em; 
	transition: var(--t-std); 
	width: 1752px;
	max-width: 90vw; 
	max-width: 90dvw; 
	background-image: radial-gradient(52.68% 105.37% at 50% 105.37%, #00AAFF 0%, rgba(0, 19, 34, 0) 100%),linear-gradient(black, black);
	overflow: visible; 
	opacity: 0;
	scale: 0;

	&:popover-open {
		opacity: 1;
		scale: 1;

		@starting-style {
			opacity: 0;
			scale: 0;
		}
	}

	&::backdrop {
		background-color: #fff0;
		transition: var(--t-std); 
	
	}


	&:popover-open::backdrop {
		background-color: #fff8;
		backdrop-filter: blur(4px);
		
		@starting-style {
			background-color: #fff0;
			backdrop-filter: blur(0px);
		}
	}
	
	.btn-close{
        position: absolute;
        width: 4em;
        aspect-ratio: 1;
        right: -1.66em;
        top: -1.66em;
        border-radius: 100%;
        background-color: black;
        border: none;
		display: grid; 
		cursor: pointer; 
		transition: var(--t-std); 
		
		&:hover{
			scale: 1.1; 
		}
		
		&:after, &:before{
			content: ""; 
			width: 2.5em; 
			height: 0.33em; 
			border-radius: 100vw;
			grid-row: 1; 
			grid-column: 1; 
			justify-self: center; 
			align-self: center; 
			transform: rotateZ(45deg);
			background: var(--c-blue)			
		}
		&:before{
			transform: rotateZ(-45deg);
		}
	}
	
	.content{
		color: white; 
		max-height: 90vh; 
		max-height: 90dvh;
		overflow: auto; 
		
		&>div{
			padding: 3em 1em; 
			max-width: 1000px; 
			justify-self: center;
			align-self: center; 
			
		}
		
		img{
			justify-self: center; 
			padding-top: 1em; 
		}
		
		h2{
			text-align: center;
			
			span{
				color: var(--c-orange); 
			}
		}
		p{
			text-align: center; 
		}
	

		& .dlform{
			position: relative;
			width: 100%;
			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: 100%;
				
				& input[type="password"]{
					display: none; 
				}
				
				.row2{
					display: grid; 
					grid-template-columns: 1fr 1fr; 
					gap: 2em; 
				}
				
				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;
						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{
					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; 
                    align-self: center;
					padding-inline: 5em; 
				}
			}
			.success .btn{
				justify-self: center;
			}
			
		}		
	}
}



.feature{
	background: linear-gradient(90deg, var(--c-darkblue), #000); 
	padding-block: 4em; 
		
	.text-holder{
        grid-column-start: centerline;
		grid-column-end: content-end; 
		align-self: center; 
		grid-row:1; 
		
		@media(max-width: 62rem){
			grid-row: 2; 
			grid-column-end: content-end; 
			grid-column-start: content-start;
			margin-top: 2em; 
		}
	}
	
	.img-holder{
        grid-column-start: full-start;
        grid-column-end: centerline;
		position: relative; 
		grid-row:1; 
		margin-right: 10%; 
        min-height: 33vw;
		
		img{
            position: absolute;
            inset: 0;
            object-fit: cover;
            object-position: center right;
            width: 100%;
            height: 100%;
			
			border-top-right-radius: 2em; 
			border-bottom-right-radius: 2em; 
		}
		@media(max-width: 62rem){
			grid-row: 1; 
			grid-column-end: content-end;
			aspect-ratio: 4 / 3; 
			margin-inline: 0; 
		}		
	}

	ul{
		font-size: 1.5rem; 
	}
	li{
		max-width: 36ch; 
	}
	p{
		max-width: 50ch;
		color: var(--c-blue); 
	}
	
	&.white{
		background: linear-gradient(90deg, white, white); 
		
		h2{
			color: var(--c-darkblue); 
		}
		ul{
			font-size: 1.5rem; 
			color: var(--c-darkblue); 
		}
		li{
			max-width: 36ch; 
		}
		.text-holder{
			grid-column-start: content-start;
			grid-column-end: centerline; 
			
			@media(max-width: 62rem){
				grid-row: 2; 
				grid-column-end: content-end; 
				margin-top: 2em; 
			}
		}
		.img-holder{
			grid-column-start: centerline;
			grid-column-end: full-end;
			padding-left: 2em; 
			box-sizing: border-box; 
			margin-left: 10%; 
			margin-right: 0; 
			
			img{
				border-top-left-radius: 2em;
				border-bottom-left-radius: 2em;
				border-top-right-radius: 0; 
				border-bottom-right-radius: 0; 
			}
			@media(max-width: 62rem){
				grid-row: 1; 
				grid-column-start: content-start; 
				aspect-ratio: 3 / 2; 
				margin-inline: 0; 
			}	
		}
	}
}

.erfahrung{
	padding-block: 4em; 
	text-align: center; 
	background-position: center center; 
	background-size: cover; 
	
	h2{
		font-size: 3.5rem; 
		
		span{
			color: var(--c-orange); 
		}
	}
	
	ul{
		text-align: left; 
		margin-inline: auto; 
		font-size: 1.5rem; 
	}
	
	.btn {
		margin-inline: auto; 
		margin-top: 1em; 
	}
	
	p{
		max-width: 67ch; 
		margin-inline: auto; 
		font-size: 1.5rem; 
	}
}


.sortiment{
	background: linear-gradient(180deg, #113148 0%, #000 66%);
	padding-block: 6em 4em; 
	
	h2{
		text-align: center; 
	}
	
	&>p{
		text-align: center; 
		font-size: 1.5rem; 
        text-wrap: balance;
	}
	
	.articles{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr; 
		gap: 2.5em; 
		margin-top: 1em; 
		flex-direction: row;
		margin-bottom: 2.5em; 
		
		@media(max-width: 75rem){
			grid-template-columns: 1fr 1fr; 
		}
		@media(max-width: 48rem){
			grid-template-columns: 1fr; 
		}
	}
	
	.btn{ 
        justify-self: center;
	} 
	
	article{
		border-radius: 0.8em; 
		overflow: hidden; 
		display: flex; 
		flex-direction: column; 
		background-color: #00AAFF26;
		
		.img-holder{
			width: 100%; 
			aspect-ratio: 522 / 335; 
			background-color: white; 
			
			position: relative;
			
			img{
				position: absolute; 
                inset: 10%;
                width: 80%;
                height: 80%;
				object-position: center center; 
				object-fit: contain; 
			}
			@media(max-width: 62rem){
				width: 100%; 
				aspect-ratio: 2 / 1; 
			}
		}
		
		.text-holder{
			padding: 2em; 
			
			h3{
				margin-top: 0; 
			}
			
			p:last-child{
				margin-bottom: 0; 
			}
		}
		
	}
}


.wissen{
	background: linear-gradient(180deg, #113148 0%, #000 66%);
	padding-block: 6em 4em; 
	
	h2{
		text-align: center; 
	}
	
	.articles{
		display: flex; 
		flex-direction: column; 
		gap: 2.9em; 
		margin-top: 1em; 
	}
	
	article{
		border-radius: 0.8em; 
		overflow: hidden; 
		display: grid; 
		grid-template-columns: 1fr 2fr;
		gap: 1.25em; 
		background-color: #00AAFF26;
		
		.img-holder{
			position: relative;
			
			img{
				position: absolute; 
				inset: 0; 
				width: 100%; 
				height: 100%; 
				object-position: center center; 
				object-fit: cover; 
			}
			@media(max-width: 62rem){
				width: 100%; 
				aspect-ratio: 2 / 1; 
			}
		}
		
		.text-holder{
			padding: 2.25em 1.5em;
			
			p:last-child{
				margin-bottom: 0; 
			}
		}
		
		@media(max-width: 62rem){
			grid-template-columns: 1fr; 
			gap:0; 
		}
	}
}

.faq{
	position: relative;
	padding-block: 8em 5em;

	& h2{
		text-align: center;
	}
	

	&:after{
		content: "";
		position: absolute; 
		background: linear-gradient(180deg, #000000 0%, #113148 100%);
		inset: 0; 
		height: 100%; 
		width: 100%; 
		z-index: -1; 
	}
	

	
	&>div{
		grid-column: inner;  
		z-index: 10; 
		
		& .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);
}

.msfeatures{
	background: linear-gradient(121deg, #113148 40.85%, #000000 88.78%);
	padding-block: 4em 5em; 

	h2{
		text-align: center; 
	}

	.articles{
		padding-top: 2em; 
		display: grid; 
		grid-template-columns: 1fr 1fr 1fr 1fr; 
		gap: 1em; 
		grid-template-rows: auto auto auto; 
		
		article{
			padding: 1.75em; 
			border-radius: 1em;
			box-shadow: 0px 4px 4px 0px #00000040;
			background-color: #00AAFF26; 
			display: grid; 
			grid-row: span 3; 
			grid-template-rows: subgrid; 
			gap: 1em;
			border: 1px solid #FFFFFF88;
			
			h3{
				font-size: 1.25rem;
			}
			
			.icon{
				width: 50%; 
				justify-self: center; 
			}
			p{
				margin-bottom: 0; 
				align-self: center; 
				@media(max-width: 90rem){
					hyphens: auto; 
				}
			}
		}
		
		@media(max-width: 90rem){
			grid-template-columns: 1fr 1fr; 
		}
		@media(max-width: 30rem){
			grid-template-columns: 1fr; 
		}
	}
}

.einsatzbereiche{
	padding-block: 4em 5em; 
    background: linear-gradient(150deg, #113148 0%, #000000 110%);
	h2{
		text-align: center; 
		margin-bottom: 0.75em; 
		span{
			color: var(--c-orange); 
		}
	}
	&>p{
		text-align: center; 
		font-size: 1.5rem; 
	}

	.articles{
		padding-top: 2em; 
		display: grid; 
		grid-template-columns: 1fr 1fr; 
		grid-template-rows: auto auto auto; 
		gap: 1em; 
		
		article{
			border-radius: 1em;
			box-shadow: 0px 4px 4px 0px #00000040;
			background-color: #00AAFF26; 
			display: grid; 
			border: 1px solid #FFFFFF88;
			display: grid; 
			grid-template-columns: 4fr 7fr; 
			overflow:hidden; 
			min-height: 490px;
			
			@media(max-width: 62rem){
				min-height: unset;
			}
			
			.text-holder{
                padding: 3em 2.5em;
                display: flex;
                flex-direction: column;
                justify-content: center;				
				
				@media(max-width: 90rem){
					padding: 2em 1.5em;
				}
			}
			
			.img-holder{
				position: relative; 
				justify-self: stretch;
				align-self: stretch;
				img{
					position: absolute; 
					width: 100%; 
					height: 100%; 
					inset: 0; 
					object-fit: cover;
					object-position: center center;
				}
				
			}
			
			h3{
				font-size: 1.25rem;
				margin-bottom: 1em; 
                text-wrap: pretty;
				
			}
			
			.icon{
				width: 50%; 
				justify-self: center; 
			}
			
			p{
				margin-bottom: 0; 
				align-self: center; 
				@media(max-width: 90rem){
					hyphens: auto; 
				}
			}
			
			&.white{
				color: var(--c-darkblue);
				padding: 3em 3em; 
				display: flex; 
				flex-direction: column; 
				align-items: start; 
                justify-content: center;
				gap: 1em; 
				position: relative; 
                background-color: transparent;
				
				.btn{
					font-size: 1.25rem; 
				}
				
				p{
					max-width: 35ch; 
					align-self: start; 
				}
				&>*{
					z-index: 1; 
				}
				
				h3{
					margin-bottom: 0; 
				}
				
				&:after{
					content: "";
                    position: absolute;
                    width: calc(100% - 1.5em);
                    height: 75%;
                    background-position: bottom right;
                    background-image: url(/images/mittelspannung/blitz.svg);
                    z-index: 0;
                    background-repeat: no-repeat;
                    background-size: contain;
                    right: 1.5em;
                    bottom: 1em;
					filter: invert(46%) sepia(74%) saturate(558%) hue-rotate(332deg) brightness(101%) contrast(106%);
				}
				&:before{
					content: ""; 
					position: absolute; 
					inset: 0; 
					width: 100%; 
					height: 100%; 
					background-color: white;
					z-index: 0;
				}
			}
		}
		
		@media(max-width: 62rem){
			grid-template-columns: 1fr; 
		}
	}
	
}

.infos {
	text-align: center; 
	
	.articles{
		display: grid; 
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
		gap: 2em; 
		margin-block: 2em; 
		
		a{
			border-radius: 1.25em; 
			display: flex; 
			flex-direction: column;
			transition: var(--t-std); 
			grid-column: span 2; 
			overflow: hidden; 
			text-decoration: none; 

			&:hover{
				scale: 1.05; 
			}
			
			img{
				aspect-ratio: 7 / 4; 
				width: 100%;
				background-color: white; 
				object-fit: contain; 
				object-position: center center; 
			}
			
			span{
				color: white; 
				background-color: var(--c-blue); 
				font-size: 1.25em; 
				padding: 0.66em 1em; 
                flex-grow: 1;
			}
			&:nth-child(4){
				grid-column: 2/4; 
			}
		}
		
		@media(max-width: 48rem){
			grid-template-columns: 1fr 1fr 1fr 1fr;
			gap: 1em; 
		
			a{
				border-radius: 1em; 
				&:nth-child(4){
					grid-column: span 2; 
				}
				&:nth-child(5){
					grid-column: 2/4; 
				}
			}
		
		}
		
	}
}