:root {
	--blue: #204a82;
	--lblue: #7f91b2;
	--lbluetrans: #7f91b200;
	--text: black;
	--itext: white;
	--bg: white;
	--transbg: #ffffffe0;
	--basefont: 16px;
	--bigfont: 18px;
	--hdrfont: 28px;
	--hdr2font: 20px;
	--placefont: 14px;
}

/* roboto-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/roboto-v30-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-v30-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/roboto-v30-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-v30-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

.fcaptcha-field { margin-top:1rem; }
.fcaptcha-mark { background-color:white; width:1.5rem;
	height:1.5rem; margin-right:0.8rem; }
.fcaptcha-square { display:none; }
.fcaptcha-circle { margin:0.1rem; width:1.3rem; height:1.3rem; }
.fcaptcha-check::after { width:0.4rem; height:0.8rem;
	border-right:2px solid black; border-bottom:2px solid black; }

html { font-family: Roboto, sans-serif }
body { font-size: var(--basefont); background: var(--bg); color: var(--text);
	margin: 0; padding: 0; min-width: 320px }
section[id] { scroll-margin-top: 240px }

* { box-sizing: border-box }
img { max-width: 100%; height: auto }
a { color: inherit; font-weight: 700 }

p { margin: .8em 0; line-height: 1.4 }

h1, h2, h3, h4, h5, h6 { font-weight: 700; font-size: var(--hdrfont) }
h1, h2, h3, h4 { text-transform: uppercase; color: var(--lblue);
	letter-spacing: .07em; margin: .4em 0 1.5em 0 }
h1 strong, h2 strong, h3 strong, h4 strong { color: var(--blue) }
h1:first-child, h2:first-child, h3:first-child { margin-top: 0 }
h3, h4 { font-size: var(--hdr2font) }

.align_right { text-align: right }

ul.bigcheck { font-size: var(--bigfont); text-transform: uppercase;
	color: var(--blue); font-weight: 700; margin-left: 0;
	padding-left: 0; list-style: none }
.bgblue ul.bigcheck { color: var(--itext) }
ul.bigcheck li { margin: .7em 0; min-height: 35px; padding-left: 5em;
	background: transparent url(../images/check.png) no-repeat 0 0;
	max-width: 17em }
ul.bigcheck.wide li { max-width: 100% }

.row { display: flex; gap: 20px; flex-direction: row;
	flex-wrap: wrap }
.c50, .col, .c25 { flex: 1 0 90% }

.content50,
.content { max-width: 1200px; margin: 0 auto; padding-left: 10px; padding-right: 10px;
	width: 100% }
.vcenter { display: flex; flex-direction: column; justify-content: center }

.alert { display:block; padding:1rem; border:1px solid black;
	border-radius:0.375rem; box-sizing:border-box; }
.alert.success { border-color:#a3cfbb; color:#0a3622;
	background-color:#d1e7dd; }
.alert.error { border-color:#f1aeb5; color:#58151c;
	background-color:#f8d7da; }

#logo { max-width: 200px; margin: 10px auto }

#header { text-align: center; background: var(--transbg); padding: 10px;
	font-size: var(--bigfont); box-shadow: 0 10px 10px #0003;
	position: absolute; top: 0; left: 0; width: 100%;
	z-index: 10 }
#header a { color: var(--blue); text-decoration: none }
#header a:hover { text-decoration: underline }
#header a.cur { font-weight: 700; text-decoration: underline }
#header nav { display: flex; justify-content: center; gap: 24px; }
#header nav a { display: inline-block; margin: 5px 0; font-weight: 400 }
#header + main > section:first-child { padding-top: 300px }

#search { position:relative; margin-block:10px; max-width:300px;
	margin-inline:auto; }
#search input { padding-right:40px; margin:0; opacity:0; }
#search button { position:absolute; top:50%; right:5px; width:20px;
	height:20px; margin-top:-10px; padding:0; background-color:transparent; }
#search button:hover { transform:scale3d(1, 1, 1); }
#search button svg { width:20px; height:20px; fill:var(--blue); }

#searchresults ol li { margin-block:24px; }

#kontakt { padding-top: 40px; padding-bottom: 40px; position: relative;
	overflow: hidden }
#kontakt .bgicon { position: absolute; top: 140px }
#kontakt .bgicon.email { left: 0; left: max(-150px, calc(50% - 800px)) }
#kontakt .bgicon.phone { right: 0; right: max(-150px, calc(50% - 800px));
	top: 650px }
#kontakt .content { position: relative }
#kontakt .c50:nth-child(2) h3 { text-align: right }
#kontakt p { margin-top: 0 }
#kontakt form.loading::after { dislpay: block; content: '';
	position: absolute; top: 0; left: 0; width: 100%;
	height: 100%; background: #fff8 }
input[type=text], input[type=email],
input[type=tel], select { display: inline-block;
	vertical-align: middle; width: 100%; border: 1px solid var(--lblue);
	/* box-shadow: inset 3px 3px 5px #0003; */
	padding: .3em .7em; margin: 0 0 1.2em 0;
	font-size: var(--basefont); font-family: Roboto, sans-serif;
	background: transparent }
input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=tel]::placeholder,
textarea::placeholder { text-transform: uppercase;
	letter-spacing: .2em; font-weight: 400; color: var(--blue);
	font-size: var(--placefont) }
textarea { width: 100%; height: 7em; vertical-align: top;
	border: 1px solid var(--lblue); 
	/* box-shadow: inset 3px 3px 5px #0003; */
	padding: .3em .7em; margin: 0 0 1.2em 0;
	font-size: var(--basefont); font-family: Roboto, sans-serif;
	background: white }
label.check { cursor: pointer }
label.check.error { outline: 1px solid red }

.bgblue input[type=text], .bgblue input[type=email],
.bgblue input[type=tel], .bgblue select { background: var(--bg) }
div.checkbox { display: flex; gap: 1rem; align-items: start }
div.checkbox > input { flex: 0 0 auto; appearance:none;
	width:1.5rem; height:1.5rem; background-color:white; margin:0;
	padding:0; position:relative; }
div.checkbox > input:checked::before { display:block;
	position:absolute; content:""; width:0.4rem; height:0.8rem;
	border-right:2px solid black; border-bottom:2px solid black;
	rotate:45deg; top:0.2rem; left:0.5rem; }
div.checkbox > label { fiex: 1 0 auto }
div.radioboxes { margin-bottom: 1.2em; display: flex;
	justify-content: space-between }

#footer { background: var(--blue); color: var(--itext); padding: 30px 0 }
#footer nav a { display: block; line-height: 1.7; font-weight: 400;
	text-decoration: none }
#footer .c50 { align-self: end; text-align: right }
#footer nav > p:first-child { margin-top: 0 }
#footer .c25 > p:first-child { margin-top: 0 }
#footer p { line-height: 1.5 }
#footer a { font-weight: 400 }
.button, button, input[type=button], input[type=submit],
#footer .button, #footer h3 { font-weight: 600; letter-spacing: .15em;
	text-align: center; text-transform: uppercase;
	padding: .6em 1.5em; line-height: 1.1;
	/* box-shadow: .5em .5em .5em #0003; */
	text-decoration: none; display: inline-block;
	background: var(--lblue); color: var(--itext);
	border: 0 }
.button, button, input[type=button], input[type=submit] {
	cursor: pointer; transform: scale3d(1, 1, 1);
	transition: transform 0.2s; }
.button:hover, button:hover, input[type=button]:hover,
input[type=submit]:hover { transform: scale3d(1.05, 1.05, 1.05); }
.button:active, button:active, input[type=button]:active,
input[type=submit]:active { transform: scale3d(1, 1, 1); }
.bgblue .button, .bgblue button,
.bgblue input[type=button], .bgblue input[type=submit],
#footer h3 { background: var(--lblue); color: var(--itext) }
.over-ltblue .button,
.bglblue .button, .bglblue button,
.bglblue input[type=button], .bglblue input[type=submit] {
	background: var(--blue); color: var(--bg) }
#footer h3 { font-size: var(--basefont); display: inline-block; padding-left: 1.5em;
	padding-right: 1.5em }
#footer .button { background: var(--bg); color: var(--blue) }

#totop { position: fixed; bottom: 20px; right: 20px; padding:4px;
	background: var(--blue); color: var(--itext);
	z-index: 9; opacity: 0; transition: opacity 400ms ease-in;
	pointer-events: none; cursor: pointer }
#totop.show { opacity: 1; pointer-events: auto }
#totop svg { width: 50px; height: 50px; fill: white; display: block }

#overlay { display: none }
#overlay.show { display: block; position: fixed; top: 0; left: 0;
	width: 100%; height: 100%; z-index: 11 }
.overlay-bg { position: absolute; top: 0; left: 0; width: 100%;
	height: 100%; background: #fffc }
.overlay-over { position: absolute; top: 0 ; left: 0; width: 100%;
	height: 100%; display: flex; flex-direction: column;
	justify-content: center }
.overlay-window { background: var(--bg); box-shadow: 10px 10px 10px #0003;
	color: var(--text); padding: 20px; max-width: 90%;
	margin: 0 auto; position: relative; width: 1000px }
.overlay-close { position: absolute; top: 0; right: -10px;
	box-shadow: 10px 10px 10px #0003; width: 20px; height: 20px;
	text-align: center; font-size: 15px; line-height: 20px;
	cursor: pointer; border-radius: 10px; background: var(--bg) }

#content { min-height: 200px }

p.mtop { margin-top: 3em }

#intro { background: white no-repeat 50% 50%; background-size: cover;
	min-height: 100vh; padding-top: 1px; position: relative }
#intro-bar { background: var(--transbg); text-align: center;
	padding-top: 20px; padding-bottom: 20px;
	box-shadow: 0 10px 10px #0003;
	margin-top: max(10px, calc(60vh - 240px));
	position: relative; opacity: 1 }
#intro.anim0 #intro-bar,
#intro.anim1 #intro-bar { opacity: 0 }
#intro.anim2 #intro-bar { background: var(--itext);
	animation: opacity-in 1s both }
#intro1, #intro2 { position: absolute; top: 0; left: 0;
	width: 100%; height: 100%; display: none; overflow: hidden }
#intro.anim0 #intro1,
#intro.anim1 #intro1,
#intro.anim2 #intro1 { background: white; display: block }
#intro.anim0 #intro1 > * { opacity: 0 }
#intro.anum1 #intro1 > *,
#intro.anim2 #intro1 > * { opacity: 1 }
/* #intro.anim1 #intro1 > * { animation: opacity-in 1s both } */
#intro.anim1 #intro-part1 { animation: part1-in 1s both }
#intro.anim1 #intro-part2 { animation: part2-in 1s both }
#intro.anim1 #intro-logo { animation: logo-in 1s both }
#intro-part1 { width: 40vw; position: absolute;
	top: 2vh; left: -10vw }
#intro-part2 { width: 40vw; position: absolute;
	bottom: -5vh; right: -10vw }
#intro-logo, #intro-logom { max-width: 940px; position: relative;
	margin: 20vh auto 0 auto; text-align: center; padding: 0 20px }
#intro2 { background: var(--blue) }
#intro.anim2 #intro2 { display: block; background: var(--blue);
	animation: opacity-in 1s both }
#intro.anim3 #intro2 { display: block; animation: blend-out 1s both }
#intro.anim3 #intro-logom { opacity: 0 }
#intro-logom2 { display: block; position: absolute; z-index: 11 }
@keyframes point-down {
	0%   { transform:translateY(0); }
	80%  { transform:translateY(0); }
	90%  { transform:translateY(20%); }
	100% { transform:translateY(0); }
}
#intro-scrolldown { position: absolute; bottom: 20px; left: 50%;
	display:block; width: 80px; margin-left:-40px;
	background-color: transparent /* #ffffff88 */; }
#intro-scrolldown svg { display: block; fill: var(--lblue); width: 80px;
	height: auto; animation: 4s infinite point-down; }
#header.anim0 #logo,
#header.anim1 #logo { opacity: 0 }
#header.anim2 #logo { opacity: 0; transition: opacity 1s ease }
#header.anim3 #logo { opacity: 1; transition: opacity 1s ease }
body.home #logo { opacity: 0 }
@keyframes opacity-in {
	from { opacity: 0 }
	to { opacity: 1 }
}
@keyframes opacity-out {
	from { opacity: 1 }
	to { opacity: 0 }
}
@keyframes blend-out {
	from { height: 100vh; top: 0 }
	to { height: 0; top: 100vh }
}
@keyframes part1-in {
	from { opacity: 0; transform: translate3d(-50%, 0, 0) }
	to { opacity: 1; transform: translate3d(0, 0, 0) }
}
@keyframes part2-in {
	from { opacity: 0; transform: translate3d(50%, 0, 0) }
	to { opacity: 1; transform: translate3d(0, 0, 0) }
}
@keyframes logo-in {
	from { opacity: 0; transform: translate3d(0, -50%, 0) }
	to { opacity: 1; transform: translate3d(0, 0, 0) }
}

section.imgbar { min-height: 100vh; position: relative;
	padding-bottom: 80px; padding-top: 200px; clip-path: inset(0) }
section.imgbar > .bgimg { position: fixed; top: 0; left: 0;
	width: 100%; height: 100% }
section.imgbar > .bgimg > video,
section.imgbar > .bgimg > img { width: 100%; height: 100%;
	object-fit: cover }
div.imgbar { background: var(--transbg);
	padding-top: 40px; padding-bottom: 40px;
	box-shadow: 0 10px 10px #0003;
	margin-top: max(10px, calc(60vh - 240px));
	position: relative; opacity: 1 }
div.imgbar .content > .row { min-height: 182px }
div.imgbar p { text-align: justify }
div.imgbar p.align_right { text-align: right }
div.imgbar h1:first-child,
div.imgbar h2:first-child,
div.imgbar h3:first-child,
div.imgbar p:first-child { margin-top: 0 }
div.imgbar h1:last-child,
div.imgbar h2:last-child,
div.imgbar h3:last-child,
div.imgbar p:last-child { margin-bottom: 0 }
.imgbar-scrolldown { position: absolute; bottom: 20px; left: 50%;
	display:block; width: 80px; margin-left:-40px;
	background-color: transparent /* #ffffff88 */; }
.imgbar-scrolldown svg { display: block; fill: var(--blue); width: 80px;
	height: auto; animation: 4s infinite point-down; }
section.imgbar:first-child .imgbar {
	animation: opacity-in 800ms both }
section.imgbar:first-child .imgbar .c50 {
	animation: opacity-in 800ms 500ms both }
section.imgbar:first-child .imgbar .c50 + .c50 {
	animation: opacity-in 800ms 500ms both }
@keyframes opacity-in {
	from { opacity: 0 }
	to { opacity: 1 }
}

.bgblue { background: var(--blue); color: var(--itext) }
.bgblue h1 strong, .bgblue h2 strong, .bgblue h3 strong,
.bgblue h4 strong { color: var(--itext) }
.bglblue { background: var(--lblue); color: var(--itext) }
.bglblue h1, .bglblue h2, .bglblue h3 { color: var(--itext) }
.pad-top { padding-top: 40px }
.pad-bottom { padding-bottom: 40px }
.pad-medium { padding-top: 40px; padding-bottom: 40px }
/* section.bgblue { box-shadow: 0 10px 10px #0003 } */
section.screenh { min-height: 100vh }
section.icons { padding-top: 20px; padding-bottom: 20px; display: flex;
	justify-content: space-around; flex-direction: column }
div.icons img { display: block; margin: 0 auto; max-width: min(100%, 100px) }
div.icons h3 { text-align: center; font-size: var(--hdr2font) }
div.icons p { text-align: justify; hyphens: auto }
div.icons .link p { text-align:center; hyphens: none; }

section.twocol-colimg img.nonvis,
div.three-cols img.nonvis,
div.icontext img.nonvis,
div.icons img.nonvis { opacity: 0 }
section.twocol-colimg img.anim,
div.three-cols img.anim,
div.icontext img.anim,
div.icons img.anim { animation: icon-in 800ms both }
@media (min-width: 1100px) {
	div.icons.links img.anim:nth-child(5),
	div.icons img.anim:nth-child(4) { animation-delay: 200ms }
	div.icons.links img.anim:nth-child(9),
	div.icons img.anim:nth-child(7) { animation-delay: 400ms }
	div.icons.links img.anim:nth-child(13),
	div.icons img.anim:nth-child(10) { animation-delay: 600ms }
	div.icons.links img.anim:nth-child(17),
	div.icons img.anim:nth-child(14) { animation-delay: 800ms }
}
@keyframes icon-in {
	0% { opacity: 0; transform: scale3d(.3, .3, 1) }
	100% { opacity: 1; transform: scale3d(1, 1, 1) }
}

section.textimg { display: flex; flex-wrap: wrap; position: relative }
section.textimg > * { flex: 1 1 90%; /* min-height: 50vw; */
	min-height: calc(100vh - 155px) }
/* .textimg > .imgleft, .textimg > .imgright {
	box-shadow: 10px 10px 10px #0003 } */
.textimg > div.img { z-index: 1; position: relative; overflow: hidden;
	/* clip-path: xywh(0 0 100% 100%) */ clip-path: inset(0) }
.textimg > div.img > video,
.textimg > div.img > img { display: block; position: absolute;
	width: 100%; height: 100%; top: 0; left: 0;
	object-fit: cover; object-position: 50% 50% }
.textimg.img-fix > .img > video,
.textimg.img-fix > .img > img { position: fixed }
.textimg .content50 { padding-top: 40px; max-width: 100% }
.textimg.imgleft .bgouter { width: 80%; object-fit: cover; display: block;
	margin-left: 20% }
.textimg.imgright .bgouter { width: 80%; object-fit: cover; display: block;
	margin-right: 20% }
.textimg .textleft, .textimg .textright { overflow: hidden; position: relative }
.textimg .textleft .bgicon { position: absolute; max-height: 80%; width: auto;
	top: 10%; right: 400px }
.textimg .textright .bgicon { position: absolute; max-height: 80%; width: auto;
	top: 10%; left: 400px }
.textimg .content50 { position: relative; padding-bottom: 40px }
#technical .bgouter { object-position: 0 0; transform: translate3d(20%, 20%, 0);
	margin-top: -30px }
#planung .bgouter { transform: translate3d(-10%, 0, 0) }

@keyframes kf-textimg-1 {
	from { translate: 100% 20%; opacity: 0 }
	to { translate: -10% 0; opacity: 1 }
}
@keyframes kf-textimg-2 {
	from { translate: -100% 0; opacity: 0 }
	to { translate: 10% 0; opacity: 1 }
}
@keyframes kf-textimg-2b {
	from { translate: -100% 0; opacity: 0 }
	to { translate: 0 0; opacity: 1 }
}
@keyframes kf-textimg-3 {
	from { translate: 100% 0; opacity: 0 }
	to { translate: 0 0; opacity: 1 }
}
@keyframes kf-textimg-4 {
	from { transform: scale(.7) translate3d(-100%, 10%, 0); opacity: 0 }
	to { transform: scale(1) translate3d(0, 20%, 0); opacity: 1 }
}

section.two-cols { padding-top: 20px; padding-bottom: 20px }
section.pad-medium { padding-top: 40px; padding-bottom: 40px }
section.textimg p, .three-cols p,
.two-cols p { text-align: justify; hyphens: auto; }

section.half-bglblue { position: relative }
section.half-bglblue::before { content: ''; display: block;
	position: absolute; width: 100%; height: 50%;
	background: var(--lblue); box-shadow: 0 10px 10px #0003;
	top: 0; left: 0 }
section.half-bglblue > * { position: relative }

section.two-imgtext { padding-top: 20px; padding-bottom: 20px }
section.two-imgtext.half-bglblue::before { height: 25% }
.imgtext-2cols .img > img { display: block; width: 100%; height: auto;
	box-shadow: 10px 10px 10px #0003; margin-bottom: 20px }
.imgtext-2cols .icon > img { display: block; width: auto; height: auto;
	margin-bottom: 20px; margin-left: auto; margin-right: auto }
.imgtext-2cols .icon + h2,
.imgtext-2cols .icon + h3 { text-align: center }
.two-imgtext p { text-align: justify; hyphens: auto; }

.imgtext-2cols.nonvis > * { opacity: 0 }
.imgtext-2cols.anim > * { animation: twocols-in 800ms 200ms both }
@keyframes twocols-in {
	0% { opacity: 0; transform: translate3d(0, 100px, 0) }
	100% { opacity: 1; transform: translate3d(0, 0, 0) }
}

section.text .content h2, section.text .content h3 { margin: 1em 0 .5em 0 }
section.text:last-child { padding-bottom: 40px }

section.bar { padding-top: 10vh; padding-bottom: 55vh }
section.bar.barbottom { padding-top: 55vh; padding-bottom: 10vh }
section.bar .bar { background: var(--transbg);
	box-shadow: 0 10px 10px #0003; position: relative;
	padding: 40px 0; text-align: right }
section.bar.barbottom .bar { text-align: left }
section.bar .bar h2 { margin: 0; font-size: 40px }
section.bgimg { position: relative; /* box-shadow: 0 10px 10px #0003 */ }
section.bgimg .bgimg { width: 100%; height: 100%;
	object-fit: cover; position: absolute; top: 0; left: 0 }
section.bgimg.fixbg { clip-path:inset(0); }
section.bgimg.fixbg img.bgimg { position:fixed; top:0; left:0; }

section.resources { padding-bottom: 40px; position: relative }
section.resources > .bg { position: relative; width: 100%;
	min-height: 400px; box-shadow: 0 10px 10px #0003; }
section.resources.screenh { height: 80vh }
section.resources img.bgimg { position: relative; width: 100%;
	height: 100%; object-fit: cover; }
section.resources.fixbg .bg { clip-path:inset(0); }
section.resources.fixbg img.bgimg { position:fixed; top:0; left:0; }
section.resources .box-holder { padding: 0 20px }
section.resources .textbox { max-width: 1280px; padding: 20px 30px;
	margin: -12em auto 80px auto; position: relative;
	box-shadow: 10px 10px 10px #0003; background: var(--lblue) }
section.resources .col { max-width: 100%; margin-left: auto;
	margin-right: 0 }
section.resources .col p { text-align: justify }
section.resources .floatimg { width: 45%; height: auto;
	position: absolute; bottom: 0; left: 0;
	display: none }
section.resources.bglblue .textbox { background: var(--blue) }
section.resources.bglblue h2 strong { color: var(--lblue) }

section.img-textbox { padding-bottom: 40px; position: relative }
body #header + main > section.img-textbox:first-child {
	padding-top: 0 }
section.img-textbox > img.bgimg { position: relative; width: 100%;
	height: 80vh; object-fit: cover;
	/* box-shadow: 0 10px 10px #0003 */ }
section.img-textbox.screenh > img.bgimg { height: 100vh }
section.img-textbox.screenh.asintro > img.bgimg { height: 66.6vh }
section.img-textbox .box-holder { padding: 0 20px }
section.img-textbox .textbox { max-width: 1280px; padding: 20px 30px;
	margin: -12em auto 0 auto; position: relative;
	box-shadow: 10px 10px 10px #0003 }
section.img-textbox.imgfloat { margin-bottom: 80px }
section.img-textbox .col { max-width: 100%; margin-left: auto;
	margin-right: 0 }
section.img-textbox .textbox p { text-align: justify }

section.textbox-img { padding-top: 40px; position: relative }
section.textbox-img > img.bgimg { position: relative; width: 100%;
	height: 60vh; object-fit: cover; display: block;
	box-shadow: 0 10px 10px #0003 }
section.textbox-img.screenh > img.bgimg { height: 100vh }
section.textbox-img .box-holder { padding: 0 20px }
section.textbox-img .textbox { max-width: 1280px; padding: 20px 30px;
	margin: 0 auto -12em auto; position: relative;
	box-shadow: 10px 10px 10px #0003; z-index: 1 }
section.textbox-img .col { max-width: 100%; margin-right: auto;
	margin-left: 0 }
section.textbox-img .textbox p { text-align: justify; hyphens: auto; }

section.twocol-floatimg { position: relative; display: flex;
	flex-direction: row; flex-wrap: wrap }
section.twocol-floatimg > * { flex: 1 0 90% }
section.twocol-floatimg p { text-align: justify }

section.twocol-icon { position: relative; display: flex;
	flex-direction: row; flex-wrap: wrap }
section.twocol-icon > * { flex: 1 0 90% }

section.counters .num { font-weight: 100; font-size: 72px;
	text-align: center; margin-bottom: 20px }
section.counters .text { text-align: center }
section.counters .text p,
section.counters .text h3 { color: var(--itext);
	text-transform: uppercase; font-size: var(--hdr2font) }

section.counters .content { display:grid;
	grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
	grid-tempalte-rows:repeat(3, auto); row-gap:8px; }
section.counters p { margin:0; }
.countercol { display:grid; grid-template-rows:subgrid;
	grid-row:span 3; color:var(--itext); padding:24px; }
.countercol--headline,
.countercol--count,
.countercol--subline { text-align:center; }
.countercol--headline,
.countercol--subline { text-transform:uppercase;
	font-size:var(--hdr2font); }
.countercol--count { font-weight:100; font-size:72px; }

section.resources2 { overflow: hidden }
section.resources2 .row img { box-shadow: 10px 10px 10px #0003;
	width: 100% }
section.resources2 .bgicon { position: absolute; left: 50%;
	height: 500px; width: auto; transform: translate3d(-50%, 0, 0) }
section.resources2 .row { position: relative }
section.resources2 .heading { position: relative; margin-top: 40px }
section.resources2 .c50 p { text-align: justify }

section.partner { overflow: hidden }
section.partner h3 { text-align: center }
section.partner .partner { display: flex; gap: 40px; flex-wrap: wrap;
	position: relative; max-width: 1200px; padding: 0 40px;
	margin: 0 auto; align-items:center; }
section.partner .partner > * { flex: 1 1 220px; text-align: center }
section.partner .partner img { display:block; aspect-ratio:220 / 150;
	object-fit:contain; width:100%; }
section.partner div.partner.js { position: relative;
	max-width: min(calc(100% - 80px), 1400px) }
div.partner.js > * { position: absolute }
section.partner .partner .arrow { display: block;
	position: absolute; top: calc(50% - 40px); width: 40px;
	height: 80px }
section.partner .partner .arrow::before { content: ''; display: block;
	position: absolute; top: 50%; width: 40px; height: 40px;
	border-left-width: 4px;
	border-bottom-width: 4px; border-color: var(--blue);
	border-left-style: solid; border-bottom-style: solid;
	cursor: pointer }
section.partner.bgblue .partner .arrow::before {
	border-color: var(--lblue) }
section.partner .partner .arrow.left { left: 0 }
section.partner .partner .arrow.left::before { left: 10px;
	transform: translate3d(0, -50%, 0) rotate3d(0, 0, 1, 45deg) }
section.partner .partner .arrow.right { right: 0 }
section.partner .partner .arrow.right::before { right: 10px;
	transform: translate3d(0, -50%, 0) rotate3d(0, 0, 1, 225deg) }

section.fadeover { position: relative }
section.fadeover.screenh { min-height: calc(100vh - 155px) }
section.fadeover > img { position: absolute; top: 0; right: 0;
	width: 66%; height: 100%; object-fit: cover }
section.fadeover > .over { position: relative; top: 0; left: 0;
	width: 100%; height: 100%; display: flex; flex-direction: column;
	justify-content: space-around;
	background: transparent
		linear-gradient(90deg, var(--lblue), var(--lblue) 50%,
			var(--lbluetrans) 70%, #ffffff00)
		no-repeat 0 0 }
section.fadeover > .over-white {
	background-image: linear-gradient(90deg, #ffff, #ffff 40%,
			#fff0 60%, #fff0) }
section.fadeover.screenh > .over { min-height: calc(100vh - 155px) }
section.fadeover .content { max-width: min(70vw, 700px); margin: 0;
	margin-left: max(0px, calc(50% - 600px)) }
section.fadeover .over-ltblue h2 { color: white }
section.fadeover.fixbg { clip-path: inset(0) }
section.fadeover.fixbg img.bgimg { position: fixed; top: 0; right: 0 }

div.icontext { display: grid;
	grid-template: auto / repeat(2, auto);
	grid-auto-flow: row; gap: 40px 20px;
	hyphens: auto }
div.icontext h3 { margin-bottom: 0 }
div.icontext .icon { min-width: 40px }
div.icontext .text p { text-align: justify }
div.icontext .text a { font-weight: inherit; color: inherit;
	text-decoration: inherit }
div.icontext .text a:hover { text-decoration: underline }

div.three-cols { display: grid;
	grid-template: auto / auto;
	grid-auto-flow: row; gap: 40px 20px }
div.three-cols h3 { margin-bottom: 0 }

.examples h4 { text-align: center; margin: 1em 0 0 0 }
.examples img { display: block; margin: 0 auto }
.examples img.nonvis { opacity: 0 }
.examples img.anim { animation: icon-in 800ms both }
.examples .c33 + .c33 img.anim { animation-delay: 200ms }
.examples .c33 + .c33 + .c33 img.anim { animation-delay: 400ms }

section.bgvideo { padding: 0 }
section.bgvideo { position: relative; overflow: hidden }
section.bgvideo .bgvideo { position: absolute; width: 50%; height: 100%;
	right: 0; top: 0; display: none }
section.bgvideo video { width: 100%; height: 100%; object-fit: cover }
section.bgvideo .over { position: relative; width: 100%;
	color: white }
section.bgvideo .slope { display: none;
	position: absolute; width: 18%;
	left: 49%; left: calc(50% - 10px);
	height: 100%; top: 0;
	background: transparent url(../images/slope-lblue.png) no-repeat 0 0;
	background-size: 100% 100% }
section.bgvideo .c50 { max-width: 580px }

section.products { overflow: hidden }
section.products .row p { text-align: justify }
div.products:not(.js) .product:not(:first-child) { display: none }
div.products .product img { max-width: 400px; height: auto;
	display: block; margin: 0 auto; width: 100%; }
div.products.js { position: relative; margin: 0 auto; padding: 0 60px;
	max-width: min(calc(100% - 20px), 1400px) }
div.products.js .strip { position: relative; max-width: 1120px;
	margin: 0 auto }
div.products.js .product { position: absolute; top: 0; left: 0;
	opacity: 1; padding: 0 }
div.products.js .product.trans { transition: 800ms }
div.products.js .product.hidden { opacity: 0; pointer-events: none }
div.products.js .product.is-right {
	transform: translate3d(+120%, 0, 0); opacity: 0 }
div.products.js .product.is-left {
	transform: translate3d(-120%, 0, 0); opacity: 0 }
div.products.js .product.in {
	transform: translate3d(0, 0, 0); opacity: 1 }
div.products.js > .arrow { display: block;
	position: absolute; top: calc(50% - 40px); width: 40px;
	height: 80px; cursor: pointer }
div.products.js > .arrow::before{ content: ''; position: absolute;
	display: block; top: 50%; width: 40px; height: 40px;
	border-left-width: 4px;
	border-bottom-width: 4px; border-color: var(--blue);
	border-left-style: solid; border-bottom-style: solid }
section.products.bgblue div.products::before > .arrow {
	border-color: var(--lblue) }
div.products > .arrow.left { left: 0 }
div.products > .arrow.left::before { left: 10px;
	transform: translate3d(0, -50%, 0) rotate3d(0, 0, 1, 45deg) }
div.products > .arrow.right { right: 0 }
div.products > .arrow.right::before { right: 10px;
	transform: translate3d(0, -50%, 0) rotate3d(0, 0, 1, 225deg) }

.consultingform .c50 img { max-width: 70%; display: block }

section.twocol-colimg .c50 p { text-align: justify }

.icontextimg .c50.text { display: flex; gap: 40px }
.icontextimg .icon { flex: 0 0 90px }
.icontextimg p { text-align: justify }
.icontextimg .icon img.nonvis { opacity: 0 }
.icontextimg .icon img.anim { animation: icon-in 800ms both }

/* must come last to override default section padding for specific sections */
section.pad-top { padding-top: 40px }
section.pad-bottom { padding-bottom: 40px }

@media (min-width: 768px) {
	.c25 { flex: 1 0 45% }
	html { scroll-margin-top: 220px }
	#header + main > section:first-child { padding-top: 300px }
	.content { padding-left: 20px; padding-right: 20px }
	.content50 { max-width: 100% }
	.content50.left { padding-left: max(20px, calc(100% - 560px)) }
	.content50.right { padding-right: max(20px, calc(100% - 560px)) }
	#footer .c25.logo { display: flex; flex-direction: column;
		justify-content: end; padding-bottom: 1.2em }
	div.icons { display: grid;
		grid-template: repeat(6, auto) / repeat(2, 1fr);
		grid-auto-flow: column; gap: 5px 20px }
	div.icons.links { grid-template: repeat(8, auto) / repeat(2, 1fr) }
	section.textimg { flex-wrap: nowrap }
	section.textimg.imgright { flex-direction: row-reverse }
	section.textimg > * { flex: 1 1 45% }
	section.textimg > .img { width: 50% }
	section.textimg.img-fix > .img > img { width: 50% }

	section.two-imgtext.half-bglblue::before { height: 50% }
	div.imgtext-2cols { display: grid;
		grid-template: repeat(3, auto) / repeat(2, 1fr);
		grid-auto-flow: column; gap: 5px 40px }
	section.resources { padding-bottom: 15vw }
	section.resources .textbox { padding: 40px 80px }
	section.resources .col { max-width: 50% }
	section.resources .floatimg { display: block }
	/* Hand kleiner: */
	section.resources { padding-bottom: 5vw }
	section.resources .floatimg { width: 38% }
	/* Ende Hand kleiner */
	section.img-textbox .textbox { padding: 40px 80px }
	section.img-textbox .col { max-width: 50% }
	section.img-textbox .floatimg { width: 70%; height: auto;
		position: absolute; top: 20px; bottom: auto; left: -20% }
	section.img-textbox .inlineimg { position: absolute;
		top: 10px; right: 75%; transform: translate3d(50%, 0, 0);
		max-height: 100%; width: auto }
	section.img-textbox .col.imgright { margin-left: 0; margin-right: auto }
	section.img-textbox .inlineimg.imgright { right: 0; left: 75%;
		transform: translate3d(-50%, 0, 0) }
	section.textbox-img { overflow: hidden }
	section.textbox-img .textbox { padding: 40px 80px }
	section.textbox-img .col { max-width: 50% }
	section.textbox-img .floatimg { width: 47vw; height: auto;
		position: absolute; top: -80px; right: -20px;
		right: min(-20px, calc(-50vw + 600px)) }
	section.twocol-floatimg.imgright { flex-direction: row-reverse }
	section.twocol-floatimg > * { flex: 1 0 45% }
	section.twocol-floatimg .floatimg { margin: -20px 0 }
	section.twocol-floatimg .img.left { text-align: right }
	section.twocol-icon.imgright { flex-direction: row-reverse }
	section.twocol-icon > * { flex: 1 0 45% }
	section.twocol-icon .img { text-align: center }
	div.icontext { gap: 40px 40px;
		grid-template: auto / 90px 1fr 90px 1fr }
}

@media (max-width:1099px) {
	#search input { opacity:1; }
}

@media (min-width: 1100px) {
	.c50 { flex: 1 0 45% }
	.c33 { flex: 1 0 29% }
	.c25 { flex: 1 0 21% }
	.content { padding-left: 40px; padding-right: 40px }
	.pad-top { padding-top: 80px }
	.pad-bottom { padding-bottom: 80px }
	section.text:last-child { padding-bottom: 80px }
	section.pad-top { padding-top: 80px }
	section.pad-bottom { padding-bottom: 80px }
	#header { position: fixed; top: 0; width: 100% }
	#header > .content { display: grid; grid-template-columns: 1fr auto 1fr;
		align-items: center; gap: 48px; position:relative; }
	#header > .content > * { grid-row: 1 }
	#header > .content > *:first-child { grid-column: 2 }
	#header > .content > *:nth-child(2) { text-align: right; grid-column: 1 }
	#header > .content > *:last-child { text-align: left; grid-column: 3 }
	html { scroll-margin-top: 155px }
	#header + main > section:first-child { padding-top: 180px }
	#header nav { display: flex; justify-content: space-between; }
	#header #logo { width: 0; height: 115px; display:flex;
		justify-content: center; align-items: center; }
	html.scrolled #header #logo,
	#header.anim3 #logo { width:200px; transition: width 1s ease, opacity 1s ease; }
	#search { position:absolute; top:0; right:40px; width:30px;
		transition:width 0.4s; }
	#search input { opacity:0; overflow:hidden; padding-right:0;
		transition:opacity 0.4s, padding-right 0.4s; }
	#search:hover,
	#search:has(input:focus) { width:300px; }
	#search:hover input,
	#search input:focus { opacity:1; padding-right:40px; }
	#kontakt { padding-top: 80px; padding-bottom: 80px }
	#kontakt .bgicon.phone { top: 140px }
	div.icons { display: grid; grid-template: repeat(3, auto) / repeat(5, 1fr);
		grid-auto-flow: column; gap: 5px 40px }
	div.icons.links { grid-template: repeat(4, auto) / repeat(5, 1fr) }
	div.icons.three { grid-template: repeat(3, auto) / repeat(3, 1fr) }
	.textimg.imgleft .content50 { padding-left: 40px }
	.textimg.imgright .content50 { padding-right: 40px }
	section.img-textbox.screenh.asintro { height: 100vh }
	section.img-textbox.screenh.asintro .box-holder { position: absolute;
		left: 0; bottom: 77px; width: 100% }
	section.img-textbox.screenh.asintro .textbox { margin-top: 0 }
	section.img-textbox.imgfloat { padding-bottom: min(15vh, 100px) }
	section.textbox-img { padding-top: 120px }
	section.textbox-img .floatimg { top: -110px }
	section.twocol-floatimg.screenh { min-height: calc(100vh - 155px) }
	div.three-cols { gap: 20px 40px; grid-auto-flow: column;
		grid-template: auto auto auto / 1fr 1fr 1fr }
	div.three-cols .image img { box-shadow: 10px 10px 10px #0003 }
	section.bgvideo.sreenh { min-height: calc(100vh - 155px) }
	section.bgvideo .bgvideo, section.bgvideo .slope { display: block }
	section.bgvideo .content > img { max-width: 60% }
}

@media (min-width: 1600px) {
	.row { gap: 40px }
	.pad-top { padding-top: 120px }
	.pad-bottom { padding-bottom: 120px }
	section.pad-top { padding-top: 120px }
	section.pad-bottom { padding-bottom: 120px }
	section.textimg .content50 { padding-top: 100px }
	section.textimg.imgleft .content50 { padding-left: 80px }
	section.textimg.imgright .content50 { padding-right: 80px }
	#planung .bgouter { margin-top: -40px }
	section.twocol-floatimg .floatimg { margin: -40px 0 }

	section.counters .num { font-size: 120px }
}