/* ==========================================================================
   Geosym – Gestaltung
   Übernommen aus dem bisherigen Theme (themes/geosym/css/layout.css),
   unverändertes Erscheinungsbild. Bereinigt: veraltete Browser-Hacks,
   ungültige Angaben, Cookie-Banner (Klaro) und Matomo entfernt.
   Ergänzungen (Barrierefreiheit, Bildbetrachter, Formular) stehen am Ende.
   ========================================================================== */

@font-face{font-family:"Roboto";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/roboto-300.woff") format("woff")}
@font-face{font-family:"Roboto";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/roboto-400.woff") format("woff")}
@font-face{font-family:"Roboto";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/roboto-500.woff") format("woff")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/montserrat-300.woff") format("woff")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/montserrat-400.woff") format("woff")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/montserrat-700.woff") format("woff")}
@font-face{font-family:"iconfont";font-weight:normal;font-style:normal;font-display:block;src:url("../fonts/iconfont.woff2") format("woff2")}

[class^=icon-]:before,[class*=" icon-"]:before{font-family:"iconfont";font-style:normal;font-weight:normal;speak:never;display:inline-block;text-decoration:inherit;width:1em;margin-right:.2em;text-align:center;font-variant:normal;text-transform:none;line-height:1em;margin-left:.2em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.icon-clock:before{content:"\e800"}
.icon-down-open:before{content:"\e801"}
.icon-up-open:before{content:"\e802"}
.icon-down-open-big:before{content:"\e803"}
.icon-up-open-big:before{content:"\e804"}
.icon-phone:before{content:"\e805"}
.icon-mail:before{content:"\e806"}
.icon-facebook:before{content:"\f09a"}
.icon-menu:before{content:"\f0c9"}
.icon-linkedin:before{content:"\f0e1"}
.icon-youtube-play:before{content:"\f16a"}
.icon-instagram:before{content:"\f16d"}
.icon-file-pdf:before{content:"\f1c1"}
.icon-facebook-official:before{content:"\f230"}
.icon-linkedin-squared:before{content:"\f30c"}
.iconfont{font-family:"iconfont";font-style:normal;font-weight:normal;speak:none}

/* Grundlagen */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,main{display:block}
[hidden]{display:none !important}
html{font-size:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,button,input,select,textarea{font-family:sans-serif;color:#222}
body{margin:0;font-size:1em;line-height:1.4}
::selection{background:#666;color:#fff;text-shadow:none}
a{color:#000}
a:visited{color:#000}
a:hover{color:#000}
a:hover,a:active{outline:0}
b,strong{font-weight:bold}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
small{font-size:85%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-0.5em}
sub{bottom:-0.25em}
ul,ol{margin:1em 0;padding:0 0 0 40px}
nav ul,nav ol{list-style:none;margin:0;padding:0}
img{border:0;vertical-align:middle}
svg:not(:root){overflow:hidden}
figure{margin:0}
form{margin:0}
label{cursor:pointer}
button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline}
button,input{line-height:normal}
button,input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button;appearance:button}
input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}
textarea{overflow:auto;vertical-align:top;resize:vertical}
table{border-collapse:collapse;border-spacing:0}
td{vertical-align:top}

body{background:#fff;font-family:"Roboto";color:#000;font-size:1em;line-height:1.8em;letter-spacing:.02em;font-weight:300;position:relative}
@media(max-width: 950px){body{font-size:.95em}}
body.HomePage{margin-top:0}
*{box-sizing:border-box}

/* Typografie */
.typography{font-size:1em}
@media(max-width: 950px){.typography{font-size:.95em}}
.typography h1,.typography h2,.typography h3,.typography h4,.typography h5,.typography h6{font-family:"Montserrat";font-weight:600}
.typography h1{font-size:1.3rem;line-height:1.4em;letter-spacing:.04em;text-transform:uppercase}
@media(max-width: 950px){.typography h1{font-size:1.2rem}}
.typography h2{font-size:1.2em;line-height:1.4em;letter-spacing:.04em}
@media(max-width: 950px){.typography h2{font-size:1.1em}}
.typography .pageTitle{font-size:2.2em;line-height:1.4em;letter-spacing:.04em;margin-top:0}
@media(max-width: 950px){.typography .pageTitle{font-size:1.8em}}
.typography img{max-width:100%;height:auto}
.typography p,.typography ul,.typography ol{line-height:1.8em;margin-bottom:.6em}
.typography li{margin-bottom:.3em}
.typography .nobr{white-space:nowrap}

.responsiveBlock{width:900px;max-width:100%;margin:0 auto}
@media(max-width: 1250px){.responsiveBlock{padding-left:10px;padding-right:10px}}

#Wrapper{min-height:90vh}
#FirstContent{padding:2em 0}
#FirstContent.darkContent{background:#000;color:#fff}
#FirstContent.darkContent h1,#FirstContent.darkContent h2{color:#81bdee}
#FirstContent.darkContent *{color:#fff}
.weisserVerlauf #FirstContent.darkContent{background:#fff;color:#000}
.weisserVerlauf #FirstContent.darkContent h1,.weisserVerlauf #FirstContent.darkContent h2{color:#81bdee}
.weisserVerlauf #FirstContent.darkContent *{color:#000}
.content{padding-bottom:1em}
#Content2{padding-top:20px}

/* Tabellen (Technische Daten, Projektdaten) */
.tabelle{padding-top:2em;background:#ece9df}
.tabelle .tr{width:100%;padding:.3em 1em;background:#e0dbca;overflow:hidden}
.tabelle .tr:nth-of-type(2n+1){background:#ece9df}
.tabelle .tr .td{width:65%;float:left}
@media(max-width: 950px){.tabelle .tr .td{width:55%}}
.tabelle .tr .td:first-child{width:35%;font-weight:500}
@media(max-width: 950px){.tabelle .tr .td:first-child{width:45%}}
.tabelle .tr a{text-decoration:none}
.tabelle .tr a:hover{text-decoration:underline}

/* Startseite: Kacheln, Partner */
#KachelBlock{min-height:50vh}
#PartnerBlock{position:relative;width:100%;min-height:70vh}
@media(max-width: 750px){#PartnerBlock{min-height:0}}
#PartnerBlock{padding-bottom:200px}
#PartnerBlock #PartnerLogos{text-align:center}
#PartnerBlock #PartnerLogos .partner{display:inline-block;margin:1em 1em;position:relative}
#PartnerBlock .bgImage{background:rgba(0,0,0,0) no-repeat center center scroll;background-size:cover;position:absolute;width:100%;top:200px;bottom:0}
@media(max-width: 750px){#PartnerBlock .bgImage{background-image:none !important}}

/* Projektliste */
#ProjektListe{width:1200px;margin-bottom:2em}
#ProjektListe .projektTeaser{width:100%;height:450px;overflow:hidden;border-bottom:1px solid #e0dbca;margin-bottom:10px;display:flex;flex-flow:row;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;align-content:stretch}
#ProjektListe .projektTeaser .bild{width:50%;height:100%;order:1}
#ProjektListe .projektTeaser .bild img{object-fit:cover;width:100%;height:100%}
#ProjektListe .projektTeaser .text{width:50%;height:100%;background:#ece9df;padding:2.7em;line-height:1.8em;display:flex;align-content:center;justify-content:center;align-items:center}
@media(max-width: 950px){#ProjektListe .projektTeaser .text{justify-content:left}}
#ProjektListe .projektTeaser .text>*{max-width:300px}
#ProjektListe .projektTeaser .text .title{text-transform:uppercase;font-weight:600}
#ProjektListe .projektTeaser .text .more:before{content:"»";padding-right:.3em}
#ProjektListe .projektTeaser .text .more a{text-transform:uppercase;text-decoration:none}
#ProjektListe .projektTeaser .text .more a:hover{text-decoration:underline}
#ProjektListe .projektTeaser:nth-child(2n+1) .text{background:#e0dbca}
#ProjektListe .projektTeaser:nth-child(2n+1) .bild{order:0}
@media(max-width: 950px){
  #ProjektListe .projektTeaser{display:block;height:auto}
  #ProjektListe .projektTeaser .teaserBlock{width:100%}
}
#ProjektListe .projektHolderTeaser{background:#e0dbca;text-align:center;margin-bottom:10px;padding:1em}
#ProjektListe .projektHolderTeaser:before{content:"»";padding-right:.3em}
#ProjektListe .projektHolderTeaser a{font-size:1.2em;line-height:1.4em;font-weight:bold;text-transform:uppercase;text-decoration:none;letter-spacing:.04em}

/* Projektseite */
#ProjektInfos{margin:50px auto;columns:2;column-gap:10px}
@media(max-width: 950px){#ProjektInfos{columns:1}}
#ProjektInfos.imgcount-0{columns:1}
#ProjektInfos .galThumb{cursor:pointer;position:relative;break-inside:avoid}
#ProjektInfos .imgTitle{padding:.6em 1em;background:#000;color:#fff;text-align:center}
#ProjektInfos .block{margin-bottom:10px}
#ProjektInfos .block .einsatzTitle{margin:0;padding:1.5em 1em 1.2em;font-size:1rem;text-transform:uppercase;background:#000;color:#fff}
#ProjektInfos .block .tabelle{padding-top:0}

/* Inhaltsblöcke (Service, Methodik, Startseite) */
.contentBlock{padding-bottom:1em}
.contentBlock .headline{text-transform:uppercase;text-align:center;padding:1em 0;margin:0}
.contentBlock .headline.dark{background:#000;color:#fff}
.contentBlock .headline.blue{background:#81bdee;color:#fff}
.MethodikPage .contentBlock:nth-child(odd),.Page .contentBlock:nth-child(odd){background-color:rgb(245.5,244,239)}
.MethodikPage .contentBlock .cbContent,.Page .contentBlock .cbContent{width:900px;position:relative;min-height:340px}
.MethodikPage .contentBlock .cbContent .img,.Page .contentBlock .cbContent .img{margin-top:0;position:absolute;left:0;width:340px;height:340px;background:rgba(0,0,0,0) no-repeat center center scroll;background-size:cover;max-width:100%}
@media(max-width: 950px){.MethodikPage .contentBlock .cbContent .img,.Page .contentBlock .cbContent .img{position:static;width:100%}}
.MethodikPage .contentBlock .cbContent .hl,.Page .contentBlock .cbContent .hl{margin-bottom:1em}
.MethodikPage .contentBlock .cbContent .text,.Page .contentBlock .cbContent .text{padding-top:2em;margin-left:380px;margin-bottom:1em}
@media(max-width: 950px){.MethodikPage .contentBlock .cbContent .text,.Page .contentBlock .cbContent .text{margin-left:0}}
.HomePage .contentBlock{padding-bottom:0}
.HomePage .contentBlock .cbContent{position:relative;min-height:340px;display:flex;flex-flow:row wrap;justify-content:space-between;align-items:stretch}
.HomePage .contentBlock .cbContent .half{width:50%;position:relative}
@media(max-width: 950px){.HomePage .contentBlock .cbContent .half{width:100%}}
.HomePage .contentBlock .cbContent .img{position:static;background:#e0dbca no-repeat center center scroll;background-size:cover}
@media(max-width: 950px){.HomePage .contentBlock .cbContent .img{height:40vh}}
.HomePage .contentBlock .cbContent .text .c{padding:1.2em 1.8em;margin-bottom:1em}
.HomePage .contentBlock .cbContent .text h2{padding:0 1.2em 0 1.8em;color:#81bdee}
.HomePage .contentBlock .cbContent.home-1 .text .flexWrap{margin-right:40%}
@media(max-width: 950px){.HomePage .contentBlock .cbContent.home-1 .text .flexWrap{margin-right:0}}
.HomePage .contentBlock .cbContent.home-1 .text .flexWrap .headline{text-align:left}
.HomePage .contentBlock .cbContent.home-2{flex-direction:row-reverse}
.HomePage .contentBlock .cbContent.home-2 .headline{margin:0;padding-top:0}
.HomePage .contentBlock .cbContent.home-2 h2{margin:0;padding:1em 0;font-size:1.1em;color:#fff;background:#000}
.HomePage .contentBlock .cbContent.home-2 .text{display:flex;justify-content:flex-end}
.HomePage .contentBlock .cbContent.home-2 .text .flexWrap{width:600px;background:#81bdee;height:100%}
@media(max-width: 950px){.HomePage .contentBlock .cbContent.home-2 .text .flexWrap{width:100%}}

/* Systeme */
#Systeme .blueTitle{width:100%;background:#81bdee;color:#fff;text-align:center;padding:.6em 1em;margin:0 0 1em;text-transform:uppercase;font-size:1.8em;font-weight:400}
#Systeme .system .systemKachelBlock{width:100%;overflow:hidden;margin-bottom:9em}
#Systeme .system .systemKachelBlock .block{float:left;width:25%;min-height:35vw;border:5px solid #fff}
#Systeme .system .systemKachelBlock .block.half{width:50%}
@media(max-width: 1250px){#Systeme .system .systemKachelBlock .block{width:50%}}
@media(max-width: 750px){#Systeme .system .systemKachelBlock .block{width:100%}}
#Systeme .system .systemKachelBlock .block.mainImage{background:#90ee90 no-repeat center center scroll;background-size:cover}
#Systeme .system .systemKachelBlock .block.img,#Systeme .system .systemKachelBlock .block.whiteBlock{background:#add8e6 no-repeat center center scroll;background-size:cover;height:0;min-height:0;padding-top:20%}
@media(max-width: 950px){#Systeme .system .systemKachelBlock .block.img,#Systeme .system .systemKachelBlock .block.whiteBlock{padding-top:40%}}
@media(max-width: 750px){#Systeme .system .systemKachelBlock .block.img,#Systeme .system .systemKachelBlock .block.whiteBlock{padding-top:60%}}
#Systeme .system .systemKachelBlock .block.whiteBlock{background:#fff}
#Systeme .system .systemKachelBlock .block.technischeDaten{background:#ece9df;margin-right:25%}
@media(max-width: 1950px){#Systeme .system .systemKachelBlock .block.technischeDaten{width:50%;margin-right:0}}
@media(max-width: 950px){#Systeme .system .systemKachelBlock .block.technischeDaten{width:100%}}
#Systeme .system .systemKachelBlock .block.technischeDaten .head{width:100%;padding:30px 1em;background:#000;text-transform:uppercase;font-weight:bold}
#Systeme .system .systemKachelBlock .block.technischeDaten .head .title{color:#81bdee;text-transform:none}
#Systeme .system .systemKachelBlock .block.technischeDaten .head .technd{color:#fff}
#Systeme .system .systemKachelBlock .block.fatTitle{font-family:"Montserrat";font-size:3em;text-transform:uppercase;font-weight:bold;color:#ddd;letter-spacing:.09em;text-align:center;display:flex;align-items:center;align-content:center;justify-content:center}

/* Kopfbereich */
#Header{position:fixed;width:100%;z-index:10}
#Header #WhiteHeader{background:hsla(0,0%,100%,.8);overflow:hidden;height:90px;width:100%;position:relative}
#Header #WhiteHeader #Logo{position:absolute;left:0;top:0;display:inline-block;margin-left:30px;z-index:5000;max-width:100%}
@media(max-width: 1200px){#Header #WhiteHeader #Logo{z-index:5}}
@media(max-width: 950px){#Header #WhiteHeader #Logo{margin-left:10px;margin-right:20px}}
#Header #WhiteHeader #Logo img{object-fit:contain;max-width:100%}

/* Video */
.videoBlock{width:100%;padding-bottom:3em;border-bottom:1px solid #ddd;margin-bottom:2em}
.video{position:relative}
.video .videoFrame.lazy{cursor:pointer}
.video .videoFrame.lazy .play{position:absolute;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,0) url("../img/play.svg") no-repeat center center scroll;background-size:60px 60px;transition:.16s;opacity:1;background-color:rgba(0,0,0,.25)}
.video .videoFrame.lazy .play:hover{background-color:rgba(0,0,0,.1)}
.video .videoFrame iframe{border:none;position:absolute;top:0;left:0;width:100%;height:100%}

/* Kopfbild */
#HeaderImageBlock{position:relative;width:100%;height:100vh}
#HeaderImageBlock .headerImage{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0) no-repeat center center scroll;background-size:cover}
#HeaderImageBlock .verlauf{position:absolute;top:0;left:0;right:0;bottom:0}
#HeaderImageBlock .headerimageText{position:absolute;bottom:50%;left:10px;right:10px;text-align:center;font-family:"Montserrat";font-size:1em;margin:0;font-weight:bold;line-height:1.4em}
#HeaderImageBlock .headerimageText .title{display:block;text-transform:uppercase;font-size:3.6em;margin:0;text-shadow:1px 1px 4px hsla(0,0%,100%,.5);line-height:1.4em}
@media(max-width: 950px){#HeaderImageBlock .headerimageText .title{font-size:2.3em}}
#HeaderImageBlock .headerimageText .subtitle{display:block;color:#fff;font-size:1.5em;line-height:1.4em;font-weight:normal;margin:.2em 0 0;text-shadow:1px 1px 3px rgba(0,0,0,.3)}
@media(max-width: 950px){#HeaderImageBlock .headerimageText .subtitle{font-size:1.1em}}
#HeaderImageBlock .headerimageText .color-weiss{color:#fff;text-shadow:1px 1px 3px rgba(0,0,0,.3)}
#HeaderImageBlock .headerimageText .color-schwarz{color:#000;text-shadow:1px 1px 3px hsla(0,0%,100%,.5)}
#HeaderImageBlock .headerimageText .color-blau{color:#81bdee;text-shadow:1px 1px 3px rgba(0,0,0,.3)}
#HeaderImageBlock .arrowdown{position:absolute;color:#fff;bottom:18px;left:0;right:0;font-size:2.6em;text-align:center;z-index:2}
.HomePage #HeaderImageBlock .arrowdown{display:block;cursor:pointer}
#NoHeaderImage{width:100%;height:90px;background:#ccc}

/* Menü */
#Menu{position:absolute;z-index:300;transition:.12s;width:100%}
@media(max-width: 1200px){#Menu{width:auto}}
#Menu{top:0;bottom:0}
#Menu #MenuButton{display:none;cursor:pointer;position:fixed;right:25px;top:0;color:#81bdee;z-index:999;transition:.2ms;font-size:2em;line-height:1.8em;padding:0 .3em .1em .5em;background:none;border:0;font-family:inherit}
@media(max-width: 1200px){#Menu #MenuButton{display:block}}
@media(max-width: 950px){#Menu #MenuButton{right:10px}}
@media(max-width: 750px){#Menu #MenuButton{font-size:1.7em;line-height:65px}}
@media(max-width: 1200px){#Menu.show #nav{right:0;box-shadow:1px 1px 3px 0 rgba(0,0,0,.3)}}
#Menu #nav{position:absolute;left:400px;right:0;bottom:15px}
@media(max-width: 1200px){#Menu #nav{position:fixed;transition:.12s;top:0;height:100vh;left:auto;right:-100vw;width:100vw;bottom:auto;background:hsla(0,0%,100%,.9);padding:90px 1.3em 1.5em;overflow-y:auto;visibility:hidden}#Menu.show #nav{visibility:visible}}
#Menu #nav ul,#Menu #nav ol{list-style:none;margin:0;padding:0}
#Menu .submenuBlock{position:relative}
@media(max-width: 1200px){#Menu .submenuBlock .submenuTitle:after{position:static;content:"▼";margin-left:.5em}}
@media(min-width: 1201px){#Menu .submenuBlock.open:after{position:absolute;content:"▼";left:0;right:0;text-align:center;bottom:-1.2em;color:#81bdee}}
#Menu .submenuTitle{cursor:pointer;padding:.4em .5em;letter-spacing:.06em;border-radius:5px;background:none;border:0;font:inherit;color:inherit;text-transform:inherit}
#Menu .submenuTitle:hover{background:#81bdee;color:#fff !important}
#Menu .submenu{display:none;position:fixed;top:90px;width:100vw;left:0;right:0;background:hsla(0,0%,100%,.86);text-align:center;padding:1.3em 1em 1.5em}
#Menu .submenuBlock.open .submenu{display:block}
@media(max-width: 1200px){#Menu .submenu{position:static;width:auto;background:rgba(0,0,0,0)}}
#Menu .submenu .submenu_item{margin-bottom:.6em}
.menu_item{list-style:none;padding:0 .2em 0 .2em;display:inline-block;line-height:1.3em;font-family:"Montserrat";text-transform:uppercase;font-weight:normal}
@media(max-width: 1200px){.menu_item{display:block;margin:0 0 1em 0;text-align:center}}
.menu_item.current>a{color:#81bdee;font-weight:bold}
.menu_item.current.submenuBlock,.menu_item.section.submenuBlock{color:#81bdee;font-weight:bold}
.menu_item a{padding:.4em .5em;width:100%;text-decoration:none;letter-spacing:.06em;border-radius:5px;transition:.15s}
.menu_item a:hover{background:#81bdee;color:#fff !important}

/* Fuß */
#Footer{color:#fff;min-height:100px;margin:0;padding-top:1.2em;background:#1b1c1e;padding-bottom:1em}
#Footer a{text-decoration:none;color:#fff}
#Footer #FooterWrapper{width:900px;max-width:100%;margin:0 auto;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}
@media(max-width: 1250px){#Footer #FooterWrapper{padding-left:10px;padding-right:10px}}
@media(max-width: 950px){#Footer #FooterWrapper{display:block;text-align:center}}
#Footer #FooterWrapper .footerContent{display:inline-block;margin-bottom:.8em}
@media(max-width: 950px){#Footer #FooterWrapper .footerContent{display:block;text-align:center;margin:1em 0}}
#Footer #FooterWrapper .footerContent .footerEl{display:inline-block;margin-right:1em}
#Footer ul{list-style:none;margin:0;padding:0}
#Footer ul li{display:inline-block;margin-left:.8em;list-style:none}
#Footer ul a{text-decoration:none;color:#fff}
#Footer #FooterMenu{display:inline-block;margin-right:1em}
#Footer #FooterMenu .menu_item{margin:0 .2em}

/* Formular */
form{width:700px;max-width:100%;margin:10px 0 .7em;overflow:hidden}
form .field{clear:both;overflow:hidden}
form.userform{margin-top:50px;width:700px;max-width:100%}
form input,form textarea,form select{background:#f8f8f8;line-height:1.8em;font-family:"Roboto",Helvetica,Arial,sans-serif;font-weight:300;width:100%;box-sizing:border-box;border:1px solid #999;padding:.5em 1em;margin:.2em 0 1em}
form input:focus,form textarea:focus,form select:focus{border-color:#999}
form input:hover,form textarea:hover,form select:hover{border-color:#999}
form input[type=submit]{margin-top:1.5em;padding:.5em 1em;font-size:.9em;width:auto}
form input[type=submit]:hover{background:#c8ffd2}
form input[type=checkbox]{width:20px !important;margin-right:10px;float:left}
form label{font-weight:300}
form .requiredField label:after{content:" *"}

.typography p,.typography ul,.typography ol{margin-top:0;margin-bottom:.7em}
.typography ul{margin-left:.5em;padding-left:1em}
.typography ul li{list-style-type:disc}
.typography ul li ul{font-size:.9em;margin-bottom:.2em}
.typography sup,.typography sub{line-height:0}

/* ==========================================================================
   Ergänzungen (neu)
   ========================================================================== */

/* Sichtbarer Tastaturfokus – bisher komplett ausgeblendet */
:focus-visible{outline:2px solid #81bdee;outline-offset:2px}
.skip-link{position:absolute;left:10px;top:-60px;z-index:10000;background:#000;color:#fff !important;padding:.6em 1em;text-decoration:none}
.skip-link:focus{top:10px}
.screen-reader-text{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
main:focus{outline:none}

/* Hinweis in Rot (bisher als eingefügter Word-Text formatiert) */
.achtung{color:#e00000 !important;font-weight:bold;text-decoration:underline}

/* Galerie „Über uns“ (Blocksatz-Reihen wie bisher, ohne jQuery) */
#Galerie{display:flex;flex-wrap:wrap;gap:10px;padding:10px}
#Galerie::after{content:"";flex-grow:999999}
#Galerie a{display:block;flex-grow:var(--r,1.5);flex-basis:calc(var(--r,1.5) * 280px);max-height:550px;overflow:hidden}
#Galerie a img{display:block;width:100%;height:100%;object-fit:cover}

/* Bildbetrachter (ersetzt Magnific Popup) */
.lb{border:0;padding:0;margin:0;width:100vw;height:100vh;max-width:none;max-height:none;background:rgba(11,11,11,.8);color:#fff}
.lb[open]{display:flex;align-items:center;justify-content:center}
.lb::backdrop{background:transparent}
.lb figure{margin:0;text-align:center;position:relative}
.lb img{display:block;max-width:calc(100vw - 180px);max-height:calc(100vh - 80px);width:auto;height:auto;box-shadow:0 0 8px rgba(0,0,0,.6);background:#444}
.lb figcaption{display:flex;justify-content:space-between;gap:1em;color:#f3f3f3;font-size:12px;line-height:18px;padding-top:6px;text-align:left}
.lb figcaption .lb__count{color:#ccc;white-space:nowrap}
.lb button{position:absolute;background:none;border:0;color:#fff;cursor:pointer;opacity:.65;font-family:Arial,sans-serif}
.lb button:hover,.lb button:focus-visible{opacity:1}
.lb__close{top:0;right:0;width:44px;height:44px;font-size:28px;line-height:44px}
.lb__prev,.lb__next{top:50%;margin-top:-55px;width:90px;height:110px;font-size:60px;line-height:110px}
.lb__prev{left:0}
.lb__next{right:0}
@media(max-width: 900px){.lb img{max-width:100vw}.lb__prev,.lb__next{transform:scale(.75)}}

/* Kontaktformular */
form .field.check{display:flex;gap:.6em;align-items:flex-start;margin:.5em 0 0}
form .field.check input{flex:none;margin:.45em 0 0;float:none}
form .field.check label{line-height:1.6em}
form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formNotice{padding:.8em 1em;margin:1em 0;border:1px solid}
.formNotice.ok{background:#e9f6ec;border-color:#7cc08b}
.formNotice.error{background:#ffe0e0;border-color:#ffa0a0}

/* YouTube erst nach Klick laden (Datenschutz) */
.video .videoFrame{position:absolute;inset:0;background-size:cover;background-position:center}
.videoNote{position:absolute;left:0;right:0;bottom:0;padding:.4em .8em;background:rgba(0,0,0,.6);color:#fff;font-size:.75em;line-height:1.4em}

/* Pfeil im Kopfbild ist jetzt ein Link (Tastatur) */
#HeaderImageBlock a.arrowdown{text-decoration:none;color:#fff}
/* Projektdaten-Überschrift: jetzt h2 statt h3 (Gliederung), gleiche Größe */
#ProjektInfos .block h2.einsatzTitle{font-size:1rem;line-height:1.4em}
#ProjektInfos a.galThumb{display:block;color:inherit;text-decoration:none}
#ProjektInfos a.galThumb img{display:block;width:100%;height:auto}
#ProjektInfos .imgTitle{display:block}

/* ==========================================================================
   Modernisierung für Tablet und Smartphone (Desktop bleibt unverändert)
   ========================================================================== */
html{scroll-padding-top:100px}
#HeaderImageBlock .headerimageText .title{overflow-wrap:break-word;hyphens:auto}
@media(max-width: 950px){
  #HeaderImageBlock{height:75vh;height:75svh;min-height:420px}
  #HeaderImageBlock .headerimageText{bottom:auto;top:50%;transform:translateY(-35%)}
  #HeaderImageBlock .headerimageText .title{font-size:clamp(1.7rem,7vw,2.6rem);line-height:1.2em}
  #ProjektListe{width:auto;padding:0 10px}
  #ProjektListe .projektTeaser .bild{height:auto}
  #ProjektListe .projektTeaser .bild img{height:auto;aspect-ratio:16/10}
  #ProjektListe .projektTeaser .text{padding:1.6em 1.4em;height:auto}
  #ProjektListe .projektTeaser .text>*{max-width:none}
  .MethodikPage .contentBlock .cbContent,.Page .contentBlock .cbContent{width:auto;min-height:0}
  .MethodikPage .contentBlock .cbContent .img,.Page .contentBlock .cbContent .img{height:auto;aspect-ratio:16/10}
  .MethodikPage .contentBlock .cbContent .text,.Page .contentBlock .cbContent .text{padding-top:1.2em}
  #Systeme .system .systemKachelBlock{margin-bottom:4em}
  #Systeme .system .systemKachelBlock .block.whiteBlock{display:none}
  #Galerie a{flex-basis:calc(var(--r,1.5) * 180px)}
}
@media(max-width: 750px){
  html{scroll-padding-top:75px}
  #Header #WhiteHeader{height:64px}
  #Header #WhiteHeader #Logo{margin-left:12px;top:7px}
  #Header #WhiteHeader #Logo img{width:auto;height:50px}
  #Menu #MenuButton{line-height:64px;font-size:1.7em}
  #Menu .submenu{top:64px}
  @media(max-width: 1200px){#Menu #nav{padding-top:80px}}
  #HeaderImageBlock{height:62vh;height:62svh;min-height:360px}
  #HeaderImageBlock .headerimageText .subtitle{font-size:1em}
  #HeaderImageBlock .arrowdown{font-size:2em;bottom:10px}
  #FirstContent{padding:1.5em 0}
  .responsiveBlock{padding-left:16px;padding-right:16px}
  #Systeme .blueTitle{font-size:1.35em;padding:.7em 16px}
  #Systeme .system .systemKachelBlock .block{border-width:3px}
  #Systeme .system .systemKachelBlock .block.mainImage{width:100%;min-height:0;height:auto;aspect-ratio:4/3}
  #Systeme .system .systemKachelBlock .block.img{width:50%;padding-top:50%}
  #Systeme .system .systemKachelBlock .block.video{width:100%;padding-top:60%}
  #Systeme .system .systemKachelBlock .block.technischeDaten .head{padding:18px 1em}
  .tabelle .tr .td,.tabelle .tr .td:first-child{width:100%;float:none}
  .tabelle{padding-top:.5em}
  .tabelle .tr .td:first-child{font-size:.85em;letter-spacing:.04em;text-transform:uppercase;opacity:.75}
  .HomePage .contentBlock .cbContent .img{height:auto;aspect-ratio:4/3}
  .HomePage .contentBlock .cbContent .text .c{padding:1em 16px}
  .HomePage .contentBlock .cbContent .text h2{padding:0 16px}
  #PartnerBlock{padding-bottom:2em}
  #PartnerBlock #PartnerLogos{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 16px}
  #PartnerBlock #PartnerLogos .partner{margin:0}
  #PartnerBlock #PartnerLogos .partner img{width:100%;height:auto}
  #ProjektInfos{margin:30px auto}
  #Galerie{gap:6px;padding:6px}
  #Galerie a{flex-basis:calc(var(--r,1.5) * 130px)}
  form.userform{margin-top:20px}
  #Footer #FooterWrapper .footerContent .footerEl{margin:0 .5em}
  #Footer ul li{margin:0 .4em}
  .lb__prev,.lb__next{width:60px}
}
@media(prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none !important}}

/* Partnerlogos immer in einer Reihe (ab Tablet), oberhalb der Wellengrafik */
@media(min-width: 751px){
  #PartnerBlock #PartnerLogos{display:flex;flex-wrap:nowrap;justify-content:center;gap:2em;padding:1em 20px}
  #PartnerBlock #PartnerLogos .partner{margin:0;flex:0 1 220px;min-width:0}
  #PartnerBlock #PartnerLogos .partner img{display:block;width:100%;height:auto}
}

/* Über uns: Galerie in Textbreite, 3 Spalten (Wunsch Okt. 2026) */
#Galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:900px;max-width:100%;margin:0 auto;padding:30px 0 10px}
#Galerie::after{content:none}
#Galerie a{max-height:none;aspect-ratio:1/1}
#Galerie a img{transition:transform .25s}
#Galerie a:hover img{transform:scale(1.03)}
@media(max-width: 1250px){#Galerie{padding-left:10px;padding-right:10px}}
@media(max-width: 750px){#Galerie{grid-template-columns:repeat(2,1fr);gap:6px;padding:20px 16px 0}}

/* Projektseiten: zwei Spalten, oben bündig (statt CSS-Spalten, die Safari versetzt) */
#ProjektInfos{columns:auto;display:flex;align-items:flex-start;gap:10px}
#ProjektInfos .pcol{flex:1 1 0;min-width:0}
#ProjektInfos .pcol>.block:last-child{margin-bottom:0}
@media(max-width: 950px){#ProjektInfos{display:block}#ProjektInfos .pcol+.pcol{margin-top:10px}}
/* Projekte: Unternavigation im Projektbereich dauerhaft sichtbar, „Projektübersicht“ hervorgehoben */
#Menu .submenu .navall>a{color:#000;font-weight:bold}
#Menu .submenu .navall.current>a{color:#81bdee}
#Menu .submenu .navall>a:hover{color:#fff}
@media(min-width:1201px){#Menu .submenuBlock.pinned .submenu{box-shadow:0 2px 4px rgba(0,0,0,.12);z-index:5}}