body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}.aspect--9\:16,.responsive.ratio-916{padding-bottom:177.7777%}.aspect--1\:1,.responsive.ratio-11{padding-bottom:100%}
#wrapper{width:960px;margin:0 auto}.grid1,.grid2,.grid3,.grid4,.grid5,.grid6,.grid7,.grid8,.grid9,.grid10,.grid11,.grid12{float:left;margin-left:10px;margin-right:10px;display:inline}.mod_article [class^=ce_],.mod_article [class*=" ce_"],.mod_article [class^=content-],.mod_article [class*=" content-"],.mod_article [class^=mod_],.mod_article [class*=" mod_"],.mod_article [class^=module-],.mod_article [class*=" module-"]{margin-left:10px;margin-right:10px}.ce_sliderStart>.content-slider{margin-left:0;margin-right:0}.mod_article .mod_newsreader,.mod_article .mod_eventreader{margin-left:0;margin-right:0}.mod_article [class^=layout_]>*,.mod_article [class*=" layout_"]>*,.mod_article [class^=event_]>*,.mod_article [class*=" event_"]>*{margin-left:10px;margin-right:10px}.mod_article.grid1,.mod_article.grid2,.mod_article.grid3,.mod_article.grid4,.mod_article.grid5,.mod_article.grid6,.mod_article.grid7,.mod_article.grid8,.mod_article.grid9,.mod_article.grid10,.mod_article.grid11,.mod_article.grid12{margin-left:0;margin-right:0}#main .inside{overflow:hidden}.grid1{width:60px}.grid2{width:140px}.grid3{width:220px}.grid4{width:300px}.grid5{width:380px}.grid6{width:460px}.grid7{width:540px}.grid8{width:620px}.grid9{width:700px}.grid10{width:780px}.grid11{width:860px}.grid12{width:940px}.mod_article.grid1{width:80px}.mod_article.grid2{width:160px}.mod_article.grid3{width:240px}.mod_article.grid4{width:320px}.mod_article.grid5{width:400px}.mod_article.grid6{width:480px}.mod_article.grid7{width:560px}.mod_article.grid8{width:640px}.mod_article.grid9{width:720px}.mod_article.grid10{width:800px}.mod_article.grid11{width:880px}.mod_article.grid12{width:960px}.offset1{margin-left:90px!important}.offset2{margin-left:170px!important}.offset3{margin-left:250px!important}.offset4{margin-left:330px!important}.offset5{margin-left:410px!important}.offset6{margin-left:490px!important}.offset7{margin-left:570px!important}.offset8{margin-left:650px!important}.offset9{margin-left:730px!important}.offset10{margin-left:810px!important}.offset11{margin-left:890px!important}.offset12{margin-left:970px!important}.mod_article.offset1{margin-left:80px!important}.mod_article.offset2{margin-left:160px!important}.mod_article.offset3{margin-left:240px!important}.mod_article.offset4{margin-left:320px!important}.mod_article.offset5{margin-left:400px!important}.mod_article.offset6{margin-left:480px!important}.mod_article.offset7{margin-left:560px!important}.mod_article.offset8{margin-left:640px!important}.mod_article.offset9{margin-left:720px!important}.mod_article.offset10{margin-left:800px!important}.mod_article.offset11{margin-left:880px!important}.mod_article.offset12{margin-left:960px!important}@media (min-width:768px) and (max-width:979px){#wrapper{width:744px}.grid1{width:42px}.grid2{width:104px}.grid3{width:166px}.grid4{width:228px}.grid5{width:290px}.grid6{width:352px}.grid7{width:414px}.grid8{width:476px}.grid9{width:538px}.grid10{width:600px}.grid11{width:662px}.grid12{width:724px}.mod_article.grid1{width:62px}.mod_article.grid2{width:124px}.mod_article.grid3{width:186px}.mod_article.grid4{width:248px}.mod_article.grid5{width:310px}.mod_article.grid6{width:372px}.mod_article.grid7{width:434px}.mod_article.grid8{width:496px}.mod_article.grid9{width:558px}.mod_article.grid10{width:620px}.mod_article.grid11{width:682px}.mod_article.grid12{width:744px}.offset1{margin-left:72px!important}.offset2{margin-left:134px!important}.offset3{margin-left:196px!important}.offset4{margin-left:258px!important}.offset5{margin-left:320px!important}.offset6{margin-left:382px!important}.offset7{margin-left:444px!important}.offset8{margin-left:506px!important}.offset9{margin-left:568px!important}.offset10{margin-left:630px!important}.offset11{margin-left:692px!important}.offset12{margin-left:754px!important}.mod_article.offset1{margin-left:62px!important}.mod_article.offset2{margin-left:124px!important}.mod_article.offset3{margin-left:186px!important}.mod_article.offset4{margin-left:248px!important}.mod_article.offset5{margin-left:310px!important}.mod_article.offset6{margin-left:372px!important}.mod_article.offset7{margin-left:434px!important}.mod_article.offset8{margin-left:496px!important}.mod_article.offset9{margin-left:558px!important}.mod_article.offset10{margin-left:620px!important}.mod_article.offset11{margin-left:682px!important}.mod_article.offset12{margin-left:744px!important}}@media (max-width:767px){#wrapper{width:auto}.grid1,.grid2,.grid3,.grid4,.grid5,.grid6,.grid7,.grid8,.grid9,.grid10,.grid11,.grid12{float:none!important;display:block!important;width:auto!important}.offset1,.offset2,.offset3,.offset4,.offset5,.offset6,.offset7,.offset8,.offset9,.offset10,.offset11,.offset12{margin-left:10px!important}}
header,footer,nav,section,aside,main,article,figure,figcaption{display:block}body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,ol,ul,li,dl,dt,dd,figure,table,th,td,form,fieldset,legend,input,textarea{margin:0;padding:0}table{border-spacing:0;border-collapse:collapse}caption,th,td{text-align:left;text-align:start;vertical-align:top}abbr,acronym{font-variant:normal;border-bottom:1px dotted #666;cursor:help}blockquote,q{quotes:none}fieldset,img,iframe{border:0}ul{list-style-type:none}sup{vertical-align:text-top}sub{vertical-align:text-bottom}del{text-decoration:line-through}ins{text-decoration:none}body{font:12px/1 "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;color:#000}input,button,textarea,select{font-family:inherit;font-size:99%;font-weight:inherit}pre,code{font-family:Monaco,monospace}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}h1{font-size:1.8333em}h2{font-size:1.6667em}h3{font-size:1.5em}h4{font-size:1.3333em}table{font-size:inherit}caption,th{font-weight:700}a{color:#00f}h1,h2,h3,h4,h5,h6{margin-top:1em}h1,h2,h3,h4,h5,h6,p,pre,blockquote,table,ol,ul,form{margin-bottom:12px}
legend{width:100%;display:block;font-weight:700;border:0}input[type=text],input[type=password],input[type=date],input[type=datetime],input[type=email],input[type=number],input[type=search],input[type=tel],input[type=time],input[type=url],input:not([type]),textarea{width:100%;display:inline-block;padding:3px 6px;background:#fff;border:1px solid #ccc;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-box-shadow:inset 0 1px 1px #eee;-webkit-box-shadow:inset 0 1px 1px #eee;box-shadow:inset 0 1px 1px #eee;-moz-transition:all .15s linear;-webkit-transition:all .15s linear;-o-transition:all .15s linear;transition:all .15s linear;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}input[type=text]:focus,input[type=password]:focus,input[type=date]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=number]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=time]:focus,input[type=url]:focus,input:not([type]):focus,textarea:focus{outline:0;background:#fcfcfc;border-color:#bbb}input[type=file]{cursor:pointer}select,input[type=file]{display:block}form button,input[type=file],input[type=image],input[type=submit],input[type=reset],input[type=button],input[type=radio],input[type=checkbox]{width:auto}textarea,select[multiple],select[size]{height:auto}input[type=radio],input[type=checkbox]{margin:0 3px 0 0}input[type=radio],input[type=checkbox],label{vertical-align:middle}input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{cursor:not-allowed;background:#eee}input[type=radio][disabled],input[type=checkbox][disabled],input[type=radio][readonly],input[type=checkbox][readonly]{background:0 0}form button,input[type=submit],.button{display:inline-block;padding:4px 15px 4px 14px;margin-bottom:0;text-align:center;vertical-align:middle;line-height:16px;font-size:11px;color:#000;cursor:pointer;border:1px solid #ccc;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#ececec;background-image:-moz-linear-gradient(top,#fff,#ececec);background-image:-webkit-linear-gradient(top,#fff,#ececec);background-image:-ms-linear-gradient(top,#fff,#ececec);background-image:-o-linear-gradient(top,#fff,#ececec);background-image:linear-gradient(to bottom,#fff,#ececec);background-repeat:repeat-x;-moz-transition:background .15s linear;-webkit-transition:background .15s linear;-o-transition:background .15s linear;transition:background .15s linear}form button:hover,input[type=submit]:hover,.button:hover{text-decoration:none;background-position:0 -15px!important}form button:active,input[type=submit]:active,.button:active{background-color:#e6e6e6;background-position:0 -30px!important}form button.blue,input[type=submit].blue,.button.blue{background-color:#2f96b4;background-image:-moz-linear-gradient(top,#5bc0de,#2f96b4);background-image:-webkit-linear-gradient(top,#5bc0de,#2f96b4);background-image:-ms-linear-gradient(top,#5bc0de,#2f96b4);background-image:-o-linear-gradient(top,#5bc0de,#2f96b4);background-image:linear-gradient(to bottom,#5bc0de,#2f96b4);border-color:#2f96b4;color:#fff}form button.blue:active,input[type=submit].blue:active,.button.blue:active{background-color:#2e95b3}form button.green,input[type=submit].green,.button.green{background-color:#51a351;background-image:-moz-linear-gradient(top,#62c462,#51a351);background-image:-webkit-linear-gradient(top,#62c462,#51a351);background-image:-ms-linear-gradient(top,#62c462,#51a351);background-image:-o-linear-gradient(top,#62c462,#51a351);background-image:linear-gradient(to bottom,#62c462,#51a351);border-color:#51a351;color:#fff}form button.green:active,input[type=submit].green:active,.button.green:active{background-color:#4f9f4f}form button.orange,input[type=submit].orange,.button.orange{background-color:#f89406;background-image:-moz-linear-gradient(top,#fbb450,#f89406);background-image:-webkit-linear-gradient(top,#fbb450,#f89406);background-image:-ms-linear-gradient(top,#fbb450,#f89406);background-image:-o-linear-gradient(top,#fbb450,#f89406);background-image:linear-gradient(to bottom,#fbb450,#f89406);border-color:#f89406;color:#fff}form button.orange:active,input[type=submit].orange:active,.button.orange:active{background-color:#f28f04}form button.red,input[type=submit].red,.button.red{background-color:#bd362f;background-image:-moz-linear-gradient(top,#ee5f5b,#bd362f);background-image:-webkit-linear-gradient(top,#ee5f5b,#bd362f);background-image:-ms-linear-gradient(top,#ee5f5b,#bd362f);background-image:-o-linear-gradient(top,#ee5f5b,#bd362f);background-image:linear-gradient(to bottom,#ee5f5b,#bd362f);border-color:#bd362f;color:#fff}form button.red:active,input[type=submit].red:active,.button.red:active{background-color:#be322b}.widget{margin-bottom:12px}.widget>label{display:block;margin-bottom:6px;font-weight:700}.inline-form .widget{display:inline-block;margin-bottom:0;vertical-align:middle}.horizontal-form .widget:after{content:"";display:table;clear:both}.horizontal-form .widget>label{width:20%;float:left;padding:3px 2% 0 0;text-align:right}.horizontal-form .widget>input,.horizontal-form .widget>textarea{width:78%;float:left}.horizontal-form .widget>fieldset{margin-left:20%}
.download-element a{padding:3px 6px 3px 22px;background:url(../../assets/contao/images/iconPLAIN.svg) left center no-repeat}ul.enclosure{padding-left:0}li.download-element{list-style-type:none}.ext-xl a{background-image:url(../../assets/contao/images/iconXL.svg)}.ext-xls a{background-image:url(../../assets/contao/images/iconXLS.svg)}.ext-xlsx a{background-image:url(../../assets/contao/images/iconXLSX.svg)}.ext-hqx a{background-image:url(../../assets/contao/images/iconHQX.svg)}.ext-cpt a{background-image:url(../../assets/contao/images/iconCPT.svg)}.ext-bin a{background-image:url(../../assets/contao/images/iconBIN.svg)}.ext-doc a{background-image:url(../../assets/contao/images/iconDOC.svg)}.ext-docx a{background-image:url(../../assets/contao/images/iconDOCX.svg)}.ext-word a{background-image:url(../../assets/contao/images/iconWORD.svg)}.ext-cto a{background-image:url(../../assets/contao/images/iconCTO.svg)}.ext-dms a{background-image:url(../../assets/contao/images/iconDMS.svg)}.ext-lha a{background-image:url(../../assets/contao/images/iconLHA.svg)}.ext-lzh a{background-image:url(../../assets/contao/images/iconLZH.svg)}.ext-exe a{background-image:url(../../assets/contao/images/iconEXE.svg)}.ext-class a{background-image:url(../../assets/contao/images/iconCLASS.svg)}.ext-so a{background-image:url(../../assets/contao/images/iconSO.svg)}.ext-sea a{background-image:url(../../assets/contao/images/iconSEA.svg)}.ext-dll a{background-image:url(../../assets/contao/images/iconDLL.svg)}.ext-oda a{background-image:url(../../assets/contao/images/iconODA.svg)}.ext-pdf a{background-image:url(../../assets/contao/images/iconPDF.svg)}.ext-ai a{background-image:url(../../assets/contao/images/iconAI.svg)}.ext-eps a{background-image:url(../../assets/contao/images/iconEPS.svg)}.ext-ps a{background-image:url(../../assets/contao/images/iconPS.svg)}.ext-pps a{background-image:url(../../assets/contao/images/iconPPS.svg)}.ext-ppt a{background-image:url(../../assets/contao/images/iconPPT.svg)}.ext-pptx a{background-image:url(../../assets/contao/images/iconPPTX.svg)}.ext-smi a{background-image:url(../../assets/contao/images/iconSMI.svg)}.ext-smil a{background-image:url(../../assets/contao/images/iconSMIL.svg)}.ext-mif a{background-image:url(../../assets/contao/images/iconMIF.svg)}.ext-odc a{background-image:url(../../assets/contao/images/iconODC.svg)}.ext-odf a{background-image:url(../../assets/contao/images/iconODF.svg)}.ext-odg a{background-image:url(../../assets/contao/images/iconODG.svg)}.ext-odi a{background-image:url(../../assets/contao/images/iconODI.svg)}.ext-odp a{background-image:url(../../assets/contao/images/iconODP.svg)}.ext-ods a{background-image:url(../../assets/contao/images/iconODS.svg)}.ext-odt a{background-image:url(../../assets/contao/images/iconODT.svg)}.ext-wbxml a{background-image:url(../../assets/contao/images/iconWBXML.svg)}.ext-wmlc a{background-image:url(../../assets/contao/images/iconWMLC.svg)}.ext-dmg a{background-image:url(../../assets/contao/images/iconDMG.svg)}.ext-dcr a{background-image:url(../../assets/contao/images/iconDCR.svg)}.ext-dir a{background-image:url(../../assets/contao/images/iconDIR.svg)}.ext-dxr a{background-image:url(../../assets/contao/images/iconDXR.svg)}.ext-dvi a{background-image:url(../../assets/contao/images/iconDVI.svg)}.ext-gtar a{background-image:url(../../assets/contao/images/iconGTAR.svg)}.ext-inc a{background-image:url(../../assets/contao/images/iconINC.svg)}.ext-php a{background-image:url(../../assets/contao/images/iconPHP.svg)}.ext-php3 a{background-image:url(../../assets/contao/images/iconPHP3.svg)}.ext-php4 a{background-image:url(../../assets/contao/images/iconPHP4.svg)}.ext-php5 a{background-image:url(../../assets/contao/images/iconPHP5.svg)}.ext-phtml a{background-image:url(../../assets/contao/images/iconPHTML.svg)}.ext-phps a{background-image:url(../../assets/contao/images/iconPHPS.svg)}.ext-js a{background-image:url(../../assets/contao/images/iconJS.svg)}.ext-psd a{background-image:url(../../assets/contao/images/iconPSD.svg)}.ext-rar a{background-image:url(../../assets/contao/images/iconRAR.svg)}.ext-fla a{background-image:url(../../assets/contao/images/iconFLA.svg)}.ext-swf a{background-image:url(../../assets/contao/images/iconSWF.svg)}.ext-sit a{background-image:url(../../assets/contao/images/iconSIT.svg)}.ext-tar a{background-image:url(../../assets/contao/images/iconTAR.svg)}.ext-tgz a{background-image:url(../../assets/contao/images/iconTGZ.svg)}.ext-xhtml a{background-image:url(../../assets/contao/images/iconXHTML.svg)}.ext-xht a{background-image:url(../../assets/contao/images/iconXHT.svg)}.ext-zip a{background-image:url(../../assets/contao/images/iconZIP.svg)}.ext-m4a a{background-image:url(../../assets/contao/images/iconM4A.svg)}.ext-mp3 a{background-image:url(../../assets/contao/images/iconMP3.svg)}.ext-wma a{background-image:url(../../assets/contao/images/iconWMA.svg)}.ext-mpeg a{background-image:url(../../assets/contao/images/iconMPEG.svg)}.ext-wav a{background-image:url(../../assets/contao/images/iconWAV.svg)}.ext-ogg a{background-image:url(../../assets/contao/images/iconOGG.svg)}.ext-mid a{background-image:url(../../assets/contao/images/iconMID.svg)}.ext-midi a{background-image:url(../../assets/contao/images/iconMIDI.svg)}.ext-aif a{background-image:url(../../assets/contao/images/iconAIF.svg)}.ext-aiff a{background-image:url(../../assets/contao/images/iconAIFF.svg)}.ext-aifc a{background-image:url(../../assets/contao/images/iconAIFC.svg)}.ext-ram a{background-image:url(../../assets/contao/images/iconRAM.svg)}.ext-rm a{background-image:url(../../assets/contao/images/iconRM.svg)}.ext-rpm a{background-image:url(../../assets/contao/images/iconRPM.svg)}.ext-ra a{background-image:url(../../assets/contao/images/iconRA.svg)}.ext-bmp a{background-image:url(../../assets/contao/images/iconBMP.svg)}.ext-gif a{background-image:url(../../assets/contao/images/iconGIF.svg)}.ext-jpeg a{background-image:url(../../assets/contao/images/iconJPEG.svg)}.ext-jpg a{background-image:url(../../assets/contao/images/iconJPG.svg)}.ext-jpe a{background-image:url(../../assets/contao/images/iconJPE.svg)}.ext-png a{background-image:url(../../assets/contao/images/iconPNG.svg)}.ext-tiff a{background-image:url(../../assets/contao/images/iconTIFF.svg)}.ext-tif a{background-image:url(../../assets/contao/images/iconTIF.svg)}.ext-svg a{background-image:url(../../assets/contao/images/iconSVG.svg)}.ext-svgz a{background-image:url(../../assets/contao/images/iconSVGZ.svg)}.ext-webp a{background-image:url(../../assets/contao/images/iconWEBP.svg)}.ext-avif a{background-image:url(../../assets/contao/images/iconAVIF.svg)}.ext-heic a{background-image:url(../../assets/contao/images/iconHEIC.svg)}.ext-jxl a{background-image:url(../../assets/contao/images/iconJXL.svg)}.ext-eml a{background-image:url(../../assets/contao/images/iconEML.svg)}.ext-asp a{background-image:url(../../assets/contao/images/iconASP.svg)}.ext-css a{background-image:url(../../assets/contao/images/iconCSS.svg)}.ext-scss a{background-image:url(../../assets/contao/images/iconSCSS.svg)}.ext-less a{background-image:url(../../assets/contao/images/iconLESS.svg)}.ext-html a{background-image:url(../../assets/contao/images/iconHTML.svg)}.ext-htm a{background-image:url(../../assets/contao/images/iconHTM.svg)}.ext-md a{background-image:url(../../assets/contao/images/iconMD.svg)}.ext-shtml a{background-image:url(../../assets/contao/images/iconSHTML.svg)}.ext-txt a{background-image:url(../../assets/contao/images/iconTXT.svg)}.ext-text a{background-image:url(../../assets/contao/images/iconTEXT.svg)}.ext-log a{background-image:url(../../assets/contao/images/iconLOG.svg)}.ext-rtx a{background-image:url(../../assets/contao/images/iconRTX.svg)}.ext-rtf a{background-image:url(../../assets/contao/images/iconRTF.svg)}.ext-xml a{background-image:url(../../assets/contao/images/iconXML.svg)}.ext-xsl a{background-image:url(../../assets/contao/images/iconXSL.svg)}.ext-mp4 a{background-image:url(../../assets/contao/images/iconMP4.svg)}.ext-m4v a{background-image:url(../../assets/contao/images/iconM4V.svg)}.ext-mov a{background-image:url(../../assets/contao/images/iconMOV.svg)}.ext-wmv a{background-image:url(../../assets/contao/images/iconWMV.svg)}.ext-webm a{background-image:url(../../assets/contao/images/iconWEBM.svg)}.ext-qt a{background-image:url(../../assets/contao/images/iconQT.svg)}.ext-rv a{background-image:url(../../assets/contao/images/iconRV.svg)}.ext-avi a{background-image:url(../../assets/contao/images/iconAVI.svg)}.ext-ogv a{background-image:url(../../assets/contao/images/iconOGV.svg)}.ext-movie a{background-image:url(../../assets/contao/images/iconMOVIE.svg)}
/* ============================================================
   Reissler – complete stylesheet (replace the whole file each time)
   Fonts are self-hosted (GDPR: no live Google Fonts requests).
   Place these files in a /fonts/ folder next to this stylesheet:
     fonts/raleway-latin-700-normal.woff2
     fonts/raleway-latin-600-normal.woff2
     fonts/open-sans-latin-400-normal.woff2
     fonts/open-sans-latin-600-normal.woff2
   ============================================================ */

@font-face{font-family:"Raleway";src:url("../../files/new_website/fonts/raleway-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Raleway";src:url("../../files/new_website/fonts/raleway-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url("../../files/new_website/fonts/open-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url("../../files/new_website/fonts/open-sans-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --black:#000000;
  --white:#FFFFFF;
  --blue-light:#AEC6E0;
  --blue-dark:#3B86C4;
  --highlight:#D53228;
  --font-head:"Raleway","Segoe UI","Open Sans",sans-serif;
  --font-body:"Open Sans","Segoe UI",sans-serif;
  --edge-body:clamp(20px,4vw,60px);     /* side padding of normal page content */
  --edge-bar:clamp(12px,2.7vw,56px);    /* side padding inside header/footer bars (smaller) */
  --max:1200px;                         /* width of normal page content */
  --max-footer:var(--max);              /* footer content box = same width as the page content */
  --edge-hero:clamp(20px,5vw,96px);     /* left/right inset of the text on the slider */
  --tint:#E8EFF6;                       /* very light tint of the light blue (card backgrounds) */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-body);font-weight:400;
  color:var(--black);background:var(--white);
  line-height:1.65;font-size:17px;
  overflow-x:hidden; /* prevents a sideways scrollbar from the full-width bars */
}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;line-height:1.2;color:var(--black);margin:0 0 .5em}
a{color:var(--blue-dark);text-decoration:none}
a:hover{color:var(--highlight)}
img{max-width:100%;display:block}

/* ---- Full-width bars -------------------------------------------------
   .full-bleed makes a bar as wide as the browser window, even when
   Contao places it inside a narrower wrapper. Only the inner .in box
   gets side padding. */
.full-bleed{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.full-bleed > .in{
  padding-left:var(--edge-bar);
  padding-right:var(--edge-bar);
}

/* ---- Contao's own page containers ------------------------------------
   Contao wraps the page content in #wrapper > #container > #main > .inside.
   Depending on the layout settings these boxes are narrow and clip (overflow)
   anything that sticks out, which cut off our full-width sections. They now use
   the whole window width; readable side margins come from our own .w boxes. */
#wrapper,#container,#main,#main > .inside,#main .mod_article,#main .mod_article > .inside{
  float:none !important;
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  overflow:visible !important;
}
#left,#right{display:none !important}

/* Normal page content keeps the wider margins */
.w{max-width:var(--max);margin:0 auto;padding-left:var(--edge-body);padding-right:var(--edge-body)}

/* ================= HEADER ================= */

/* Bar 1: contact strip */
.topbar{background:var(--blue-dark);color:var(--white);font-size:13px}
.topbar .in{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:space-between}
.topbar a{color:var(--white)}
.topbar a:hover{color:var(--blue-light)}

.topbar-contact,.topbar-social{display:flex;align-items:stretch;list-style:none;margin:0;padding:0}
.topbar-contact li,.topbar-social li{
  display:flex;align-items:center;gap:8px;
  padding:10px 18px;white-space:nowrap;list-style:none;
  border-left:1px solid rgba(255,255,255,.35);
}
.topbar-contact li:last-child,.topbar-social li:last-child{border-right:1px solid rgba(255,255,255,.35)}
.topbar-social li{padding:10px 14px}
.topbar-social a:hover{opacity:.75}

/* icon images in the topbar and footer (size is set here, not in the file) */
.topbar img,.ticon{width:16px;height:16px;max-width:none;flex:none;display:block}

/* Bar 2: logo + navigation */
.mainbar{background:var(--white);border-bottom:1px solid var(--blue-light)}
.mainbar .in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding-top:12px;padding-bottom:12px}

.logo{display:flex;align-items:center;gap:10px;color:var(--blue-dark)}
.logo img{height:clamp(38px,5vw,54px);width:auto;display:block}
.logo span{font-family:var(--font-head);font-weight:700;font-size:24px;letter-spacing:.02em}
.logo:hover,.logo:hover span{color:var(--highlight)}

.mainnav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 28px;margin-left:auto}
.mainnav a{display:block;padding:8px 2px;font-weight:600;color:var(--blue-dark);border-bottom:3px solid transparent}
.mainnav a:hover,.mainnav a[aria-current]{color:var(--blue-dark);border-color:var(--highlight)}

/* Hamburger (pure CSS, no JavaScript). In the header HTML the checkbox and
   label must come right before <nav class="mainnav"> in this order. */
.nav-toggle{position:absolute;opacity:0;pointer-events:none}
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;cursor:pointer}
.hamburger span{display:block;height:3px;width:100%;background:var(--blue-dark);border-radius:2px;transition:transform .25s ease,opacity .25s ease}
.nav-toggle:checked ~ .hamburger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle:checked ~ .hamburger span:nth-child(2){opacity:0}
.nav-toggle:checked ~ .hamburger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ================= FOOTER ================= */

/* Upper bar: dark blue, three columns, content in a centered box */
.footer-top{background:var(--blue-dark);color:var(--white);padding:28px 0;line-height:1.5}
.footer-top .in{
  max-width:var(--max-footer);margin:0 auto;
  padding-left:var(--edge-body);padding-right:var(--edge-body);
  display:grid;gap:24px;grid-template-columns:repeat(3,1fr);
}
.footer-top h3{color:var(--white);font-size:18px;margin:0 0 10px}
.footer-top p{margin:0}
.footer-top a{color:var(--white)}
.footer-top a:hover{color:var(--blue-light)}

/* address block with small icons */
.footer-contact{list-style:none;margin:0;padding:0}
.footer-contact li{display:flex;gap:12px;align-items:flex-start;margin-bottom:8px}
.footer-contact img{width:18px;height:18px;max-width:none;flex:none;margin-top:5px}

/* services list: bullets, grow slightly on hover (desktop mouse only) */
.footer-services ul{list-style:disc;margin:0;padding-left:20px}
.footer-services li{margin-bottom:4px;transition:transform .2s ease}
@media (hover:hover) and (pointer:fine){
  .footer-services li:hover{transform:scale(1.08);transform-origin:left center}
}

/* Lower bar: white, dark blue text */
.footer-bottom{background:var(--white);border-top:1px solid var(--blue-light)}
.footer-bottom .in{
  max-width:var(--max-footer);margin:0 auto;
  padding-left:var(--edge-body);padding-right:var(--edge-body);
  padding-top:10px;padding-bottom:10px;
  display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:space-between;
  font-size:14px;color:var(--blue-dark);
}
.footer-bottom a{color:var(--blue-dark);font-weight:600}
.footer-bottom a:hover{color:var(--highlight)}

/* ================= GENERIC BLOCKS ================= */
.btn{display:inline-block;background:var(--highlight);color:var(--white);font-family:var(--font-head);font-weight:700;padding:13px 26px;border-radius:4px;margin:0 10px 10px 0}
.btn:hover{background:var(--blue-dark);color:var(--white)}
.btn.outline{background:transparent;border:2px solid var(--white);color:var(--white)}

.hero{background:var(--blue-dark);color:var(--white);padding:64px 0 48px}
.hero h1{color:var(--white);font-size:clamp(30px,5.5vw,50px);max-width:16em}
.hero p{max-width:34em;font-size:19px}

.hinweis{background:var(--blue-light);border-left:5px solid var(--blue-dark);padding:18px 22px;margin:24px 0}

/* ================= PAGE CONTENT BLOCKS ================= */
.zahlen{display:flex;flex-wrap:wrap;gap:16px 56px;margin:0;padding:26px 0;border-bottom:1px solid var(--blue-light)}
.zahlen div{max-width:14em}
.zahlen b{display:block;font-family:var(--font-head);font-weight:700;font-size:34px;color:var(--highlight)}

.rows a.r{display:block;padding:18px 0 18px 20px;border-left:5px solid var(--highlight);margin:0 0 14px;background:var(--white);color:var(--black)}
.rows a.r:hover{border-color:var(--blue-dark)}
.rows b{display:block;font-family:var(--font-head);font-weight:700;font-size:21px;color:var(--blue-dark)}

.zwei{display:grid;gap:36px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

ul.l{padding-left:20px}
ul.l li{margin-bottom:8px}

.cta{background:var(--black);color:var(--white);padding:36px 0}
.cta .w{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;justify-content:space-between}
.cta h2{color:var(--white);margin:0}
.cta .btn{margin:0}

/* ================= STARTSEITE (homepage sections) ================= */

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.label{margin:0 0 12px;color:var(--highlight);font-family:var(--font-head);font-weight:700;font-size:15px;line-height:1;text-transform:uppercase;letter-spacing:.06em}

.btn-weiss,.btn-blau{display:inline-block;font-family:var(--font-head);font-weight:600;padding:14px 28px;border:2px solid transparent;transition:background-color .2s,color .2s,border-color .2s}
.btn-weiss{background:var(--white);border-color:var(--white);color:var(--black);font-size:clamp(15px,1.4vw,19px)}
.btn-weiss:hover{background:var(--blue-dark);border-color:var(--blue-dark);color:var(--white)}
.btn-blau{background:var(--blue-dark);border-color:var(--blue-dark);color:var(--white);font-weight:700}
.btn-blau:hover{background:var(--white);color:var(--blue-dark)}

/* arrow drawn with CSS (changes colour with "color", scales with font-size) */
.pf{position:relative;display:inline-block;flex:none;width:1.4em;height:1em}
.pf::before{content:"";position:absolute;left:0;top:50%;width:100%;height:2px;background:currentColor;transform:translateY(-50%)}
.pf::after{content:"";position:absolute;right:.06em;top:50%;width:.5em;height:.5em;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:translateY(-50%) rotate(45deg)}

/* ---- 1. Picture slider under the header ---- */
.hero-slider{overflow:hidden;height:clamp(320px,44vw,640px);background:var(--black)}
.hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility .9s}
.hero-slide.is-active{opacity:1;visibility:visible}
.hero-slide > img{width:100%;height:100%;object-fit:cover}
.hero-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55) 0%,rgba(0,0,0,.18) 45%,rgba(0,0,0,0) 70%)}
.hero-text{position:absolute;z-index:2;left:var(--edge-hero);right:var(--edge-hero);bottom:clamp(64px,8vw,116px);display:flex;flex-direction:column;align-items:flex-start;gap:clamp(16px,2vw,26px)}
.hero-satz{margin:0;padding-bottom:10px;border-bottom:3px solid var(--highlight);color:var(--white);font-family:var(--font-head);font-weight:700;font-size:clamp(24px,4vw,54px);line-height:1.15;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.hero-dots{position:absolute;z-index:2;left:var(--edge-hero);bottom:clamp(14px,2.4vw,32px);display:flex;gap:12px}
.hero-dot{width:clamp(34px,5vw,80px);height:26px;padding:10px 0;border:0;background:rgba(255,255,255,.8);background-clip:content-box;cursor:pointer;transition:background-color .3s}
.hero-dot.is-active{background-color:var(--blue-light)}
.hero-dot:focus-visible,.btn-weiss:focus-visible,.btn-blau:focus-visible{outline:3px solid var(--blue-light);outline-offset:2px}
/* slider arrows, bottom right */
.hero-pfeile{position:absolute;z-index:3;right:var(--edge-hero);bottom:clamp(14px,2.4vw,32px);display:flex;gap:10px}
.hero-pfeil{display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:2px solid var(--white);background:rgba(0,0,0,.25);color:var(--white);font-size:20px;cursor:pointer;transition:background-color .2s,color .2s}
.hero-pfeil:hover{background:var(--white);color:var(--blue-dark)}
.hero-pfeil:focus-visible{outline:3px solid var(--blue-light);outline-offset:2px}
.hero-zurueck .pf{transform:rotate(180deg)}

/* ---- 2. Three picture cards ---- */
.leistungen{padding:72px 0}
.karten{display:grid;gap:36px;grid-template-columns:repeat(3,1fr)}
.karte{background:var(--tint)}
.karte-bild{display:block;overflow:hidden;aspect-ratio:3/2;background:var(--blue-light)}
.karte-bild img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.karte-bild:hover img{transform:scale(1.1)}
.karte-fuss{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:26px 28px;color:var(--black)}
.karte-titel{font-family:var(--font-head);font-weight:700;font-size:clamp(20px,2vw,24px)}
.pfeil{display:flex;align-items:center;justify-content:center;flex:none;width:46px;height:46px;border:2px solid var(--white);color:var(--blue-dark);font-size:20px;transition:background-color .2s,color .2s,border-color .2s}
.pfeil:hover,.karte-fuss:focus-visible .pfeil{background:var(--blue-dark);border-color:var(--blue-dark);color:var(--white)}

/* ---- 3. About us ---- */
.ueber{padding:24px 0 80px}
.ueber-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,6vw,88px);align-items:center}
.ueber-text h2{font-size:clamp(28px,3.4vw,42px)}
.ueber-text p{margin:0 0 20px}
.haken{list-style:none;margin:0 0 30px;padding:0}
.haken li{position:relative;padding-left:38px;margin-bottom:14px;font-weight:600;color:var(--blue-dark)}
.haken li::before{content:"";position:absolute;left:6px;top:.28em;width:7px;height:14px;border:solid var(--blue-dark);border-width:0 3px 3px 0;transform:rotate(45deg)}
.ueber-bilder{position:relative;padding-bottom:18%}
.ueber-bilder img{object-fit:cover}
.ueber-bilder .gross{width:78%;margin-left:auto;aspect-ratio:4/5;height:auto}
.ueber-bilder .klein{position:absolute;left:0;bottom:0;width:56%;aspect-ratio:4/3;height:auto;border:10px solid var(--white)}

/* ---- 4. "Erfahrung" bar + sliding service carousel ---- */
.erfahrung{display:grid;grid-template-columns:clamp(150px,22vw,380px) 1fr;min-height:480px}
.erf-balken{display:flex;align-items:center;justify-content:center;background:var(--blue-light);padding:32px 12px}
.erf-balken p{margin:0;writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--font-head);font-weight:700;font-size:clamp(30px,4.2vw,64px);line-height:1.15;color:var(--white)}
.erf-inhalt{min-width:0;padding:64px var(--edge-body) 64px clamp(24px,5vw,80px)}
.erf-inhalt h2{font-size:clamp(28px,3.4vw,42px);margin-bottom:32px}

.kar{container-type:inline-size}
.kar-fenster{overflow:hidden;margin:0 -12px}
.kar-spur{display:flex;align-items:stretch;transition:transform .6s ease}
.kar-karte{flex:0 0 100%;display:flex;padding:0 12px}
@container (min-width:560px){.kar-karte{flex-basis:50%}}
@container (min-width:900px){.kar-karte{flex-basis:33.3333%}}
.kar-innen{flex:1;display:flex;flex-direction:column;background:var(--tint);padding:30px 28px 28px}
.kar-icon{display:flex;align-items:center;justify-content:center;width:64px;height:64px;margin-bottom:22px;background:var(--white)}
.kar-icon img{width:32px;height:32px}
.kar-innen h3{margin:0 0 10px;font-size:22px}
.kar-innen p{flex:1;margin:0 0 22px}
.kar-link{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;background:var(--white);color:var(--blue-dark);font-family:var(--font-head);font-weight:700;transition:background-color .2s,color .2s}
.kar-link .pf{color:var(--highlight);font-size:16px}
.kar-link:hover{background:var(--blue-dark);color:var(--white)}
.kar-link:hover .pf{color:var(--white)}
.kar-pfeile{display:flex;justify-content:center;gap:12px;margin-top:30px}
.kar-btn{display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:0;border:2px solid var(--blue-dark);background:transparent;color:var(--blue-dark);font-size:20px;cursor:pointer;transition:background-color .2s,color .2s}
.kar-btn:hover{background:var(--blue-dark);color:var(--white)}
.kar-btn:focus-visible{outline:3px solid var(--highlight);outline-offset:2px}
.kar-zurueck .pf{transform:rotate(180deg)}

@media (prefers-reduced-motion:reduce){
  .hero-slide,.kar-spur,.karte-bild img{transition:none}
}

/* ================= KONTAKTSEITE ================= */

/* page banner with title + breadcrumb (also usable on other sub pages) */
.seitenkopf{position:relative;display:flex;align-items:center;justify-content:center;height:clamp(170px,20vw,280px);overflow:hidden;background:var(--black);text-align:center}
.seitenkopf > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.seitenkopf::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.55)}
.seitenkopf-text{position:relative;z-index:2;padding:0 var(--edge-body)}
.seitenkopf h1{margin:0 0 12px;color:var(--white);font-size:clamp(32px,5vw,56px)}
.brotkrumen{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;color:var(--white);font-size:16px}
.brotkrumen a{color:var(--white)}
.brotkrumen a:hover{color:var(--blue-light)}
.brotkrumen [aria-current]{color:var(--blue-light)}

.kontakt{padding:64px 0 80px}
.kontakt-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.kontakt h2{font-size:clamp(26px,3vw,38px);margin-bottom:28px}

/* form */
.formular{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.formular .voll{grid-column:1 / -1}
.formular input[type="text"],.formular input[type="email"],.formular input[type="tel"],.formular textarea{width:100%;padding:16px 18px;border:1px solid var(--blue-light);border-radius:0;background:var(--white);color:var(--black);font:inherit;line-height:1.4}
.formular textarea{min-height:170px;resize:vertical}
.formular ::placeholder{color:#5a6672;opacity:1}
.formular input:focus,.formular textarea:focus{outline:2px solid var(--blue-dark);outline-offset:0;border-color:var(--blue-dark)}
.formular .is-invalid{border-color:var(--highlight);outline-color:var(--highlight)}
.zustimmung{display:flex;gap:12px;align-items:flex-start;font-size:15px}
.zustimmung input{flex:none;width:20px;height:20px;margin-top:3px;accent-color:var(--blue-dark)}
.zustimmung input.is-invalid{outline:2px solid var(--highlight)}
.hinweis-klein{margin:0;font-size:14px;color:#5a6672}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formular-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.btn-senden{padding:15px 32px;border:2px solid var(--highlight);background:var(--highlight);color:var(--white);font-family:var(--font-head);font-weight:700;font-size:17px;cursor:pointer;transition:background-color .2s,border-color .2s}
.btn-senden:hover{background:var(--blue-dark);border-color:var(--blue-dark)}
.btn-senden:disabled{opacity:.6;cursor:wait}
.btn-senden:focus-visible{outline:3px solid var(--blue-dark);outline-offset:2px}
.form-status{display:flex;align-items:center;gap:8px;margin:0;font-weight:600}
.form-status img{width:22px;height:22px;flex:none}
.form-status.fehler{color:var(--highlight)}
.form-status.ok{color:var(--black)}

/* map (loaded only after a click) */
.karte-box{position:relative;min-height:420px;display:flex;align-items:center;justify-content:center;padding:28px;background:var(--tint);text-align:center}
.karte-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.karte-hinweis{max-width:380px}
.karte-hinweis p{margin:0 0 14px}

/* ================= CONTAO-FORMULAR (insert_form) ================= */
/* The form itself comes from Contao's form generator. Everything is scoped to
   the wrapper <div class="form-container"> so nothing else is affected. */
.form-container .formbody{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-container .widget{grid-column:1 / -1;min-width:0;margin:0}
.form-container .widget-text,.form-container .widget-select{grid-column:auto}   /* Anrede, Name, E-Mail, Telefon = 2 x 2 */
.form-container .invisible{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

.form-container label,.form-container legend{display:block;margin:0 0 6px;padding:0;font-weight:600;font-size:15px;color:var(--black)}
.form-container .mandatory > .mandatory,.form-container label .mandatory,.form-container legend .mandatory{color:var(--highlight)}

.form-container input.text,
.form-container input[type="text"],
.form-container input[type="email"],
.form-container input[type="tel"],
.form-container select,
.form-container textarea{width:100%;padding:14px 16px;border:1px solid var(--blue-light);border-radius:0;background:var(--white);color:var(--black);font:inherit;line-height:1.4;box-shadow:none}
.form-container select{min-height:52px}
.form-container textarea{min-height:170px;resize:vertical}
.form-container input:focus,.form-container select:focus,.form-container textarea:focus{outline:2px solid var(--blue-dark);outline-offset:0;border-color:var(--blue-dark)}

/* checkbox (privacy) */
.form-container fieldset{min-width:0;margin:0;padding:0;border:0}
.form-container .checkbox_container > span,.form-container .radio_container > span{display:flex;gap:12px;align-items:flex-start;margin-bottom:6px}
.form-container input[type="checkbox"],.form-container input[type="radio"]{flex:none;width:20px;height:20px;margin:3px 0 0;accent-color:var(--blue-dark)}
.form-container .checkbox_container label,.form-container .radio_container label{margin:0;font-weight:400;font-size:15px}
.form-container .checkbox_container a{text-decoration:underline}

/* ALTCHA spam protection */
.form-container altcha-widget{display:block;max-width:360px;--altcha-border-radius:0;--altcha-color-border:var(--blue-light);--altcha-color-border-focus:var(--blue-dark);--altcha-color-active:var(--blue-dark)}

/* send button */
.form-container .widget-submit button,
.form-container button[type="submit"],
.form-container input[type="submit"]{display:inline-block;padding:15px 32px;border:2px solid var(--highlight);border-radius:0;background:var(--highlight);color:var(--white);font-family:var(--font-head);font-weight:700;font-size:17px;line-height:1.2;cursor:pointer;transition:background-color .2s,border-color .2s}
.form-container .widget-submit button:hover,
.form-container button[type="submit"]:hover,
.form-container input[type="submit"]:hover{background:var(--blue-dark);border-color:var(--blue-dark)}
.form-container button[type="submit"]:focus-visible,.form-container input[type="submit"]:focus-visible{outline:3px solid var(--blue-dark);outline-offset:2px}

/* messages: error = red, success = mail icon + text */
.form-container p.error,.form-container .error{margin:6px 0 0;color:var(--highlight);font-weight:600;font-size:15px}
.form-container .widget:has(.error) :is(input.text,input[type="text"],input[type="email"],input[type="tel"],select,textarea){border-color:var(--highlight)}
.form-container .confirmation,.form-container .confirm{display:flex;align-items:center;gap:10px;grid-column:1 / -1;margin:0;font-weight:600;color:var(--black)}
.form-container .confirmation::before,.form-container .confirm::before{content:"";flex:none;width:24px;height:24px;background:url("../../files/new_website/icons/mail-blau.svg") center / contain no-repeat}

/* ================= RECHTSTEXTE (Impressum, Datenschutz) ================= */
.seitenkopf.schlicht{background:var(--blue-dark)}
.seitenkopf.schlicht::after{display:none}
.rechtstext{padding:48px 0 80px}
.rechtstext-inhalt{max-width:860px}
.rechtstext h2{margin:2em 0 .5em;font-size:clamp(22px,2.4vw,28px)}
.rechtstext-inhalt > h2:first-child{margin-top:0}
.rechtstext h3{margin:1.5em 0 .4em;font-size:19px}
.rechtstext p,.rechtstext ul{margin:0 0 1em}
.rechtstext ul{padding-left:22px}
.rechtstext li{margin-bottom:.4em}
.rechtstext address{margin:0 0 1em;font-style:normal}
.rechtstext a{text-decoration:underline}
.rechtstext .inhalt{margin:0 0 2.2em;padding:20px 26px;background:var(--tint)}
.rechtstext .inhalt p{margin:0 0 .5em}
.rechtstext .inhalt ol{margin:0;padding-left:22px}
.rechtstext .stand{margin-top:2.5em;font-size:14px;color:#5a6672}

/* ================= TABLET / MOBILE (up to 820px) ================= */
@media (max-width:820px){
  :root{--edge-bar:16px;--edge-body:18px}
  body{font-size:16px}
  h1{font-size:28px}
  h2{font-size:23px}

  /* contact strip: stacked, no vertical dividers */
  .topbar .in{flex-direction:column;align-items:stretch}
  .topbar-contact{flex-direction:column}
  .topbar-contact li,.topbar-social li{border-left:none;border-right:none;padding:9px 0;white-space:normal}
  .topbar-contact li{border-bottom:1px solid rgba(255,255,255,.25)}
  .topbar-contact li:last-child{border-right:none}
  .topbar-social{padding:6px 0;gap:16px}

  /* logo + hamburger on one line, menu opens below it */
  .mainbar .in{flex-wrap:wrap}
  .hamburger{display:flex}
  .mainnav{display:none;width:100%}
  .nav-toggle:checked ~ .mainnav{display:block}
  .mainnav ul{flex-direction:column;gap:0;margin-left:0;width:100%;border-top:1px solid var(--blue-light)}
  .mainnav a{padding:14px 4px;border-bottom:1px solid var(--blue-light)}
  .mainnav a:hover,.mainnav a[aria-current]{background:var(--blue-light)}

  .footer-top{padding:24px 0}
  .footer-top .in{grid-template-columns:1fr;gap:20px}
  .footer-bottom .in{flex-direction:column}

  .hero{padding:44px 0 34px}

  /* homepage */
  :root{--edge-hero:18px}
  .hero-text{bottom:58px}
  .hero-pfeil{width:40px;height:40px;font-size:16px}
  .leistungen{padding:48px 0}
  .karten{grid-template-columns:1fr;gap:28px}
  .ueber{padding:8px 0 56px}
  .ueber-grid{grid-template-columns:1fr}
  .erfahrung{grid-template-columns:1fr;min-height:0}
  .erf-balken{justify-content:flex-start;padding:26px var(--edge-body)}
  .erf-balken p{writing-mode:horizontal-tb;transform:none;font-size:30px}
  .erf-inhalt{padding:44px var(--edge-body) 52px}

  /* Contao form */
  .form-container .formbody{grid-template-columns:1fr}
  .form-container .widget-submit button,.form-container button[type="submit"]{width:100%}

  /* legal pages */
  .rechtstext{padding:36px 0 56px}

  /* contact page */
  .kontakt{padding:40px 0 56px}
  .kontakt-grid{grid-template-columns:1fr}
  .formular{grid-template-columns:1fr}
  .formular-fuss{flex-direction:column;align-items:stretch}
  .btn-senden{width:100%}
  .karte-box{min-height:320px}
}

/* ================= SMALL PHONES (up to 420px) ================= */
@media (max-width:420px){
  .btn{width:100%;text-align:center;margin-right:0}
  .topbar{font-size:12px}
}

/* ================= DROPDOWN MENU (header) =================
   A <li class="hat-unter"> holds a second <ul class="unter">.
   Desktop: opens on mouse hover and on keyboard focus (no JavaScript).
   Mobile (up to 820px): the sub links are always listed, indented. */
.mainnav li{position:relative}
.mainnav .hat-unter > a{display:flex;align-items:center;gap:7px}
.mainnav .hat-unter > a::after{content:"";width:6px;height:6px;margin-top:-3px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.mainnav ul.unter{
  position:absolute;left:-18px;top:100%;z-index:50;
  display:flex;flex-direction:column;gap:0;min-width:250px;margin:0;padding:8px 0;
  background:var(--white);border-top:3px solid var(--highlight);box-shadow:0 12px 28px rgba(0,0,0,.14);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s,visibility .2s;
}
.mainnav .hat-unter:hover > ul.unter,.mainnav .hat-unter:focus-within > ul.unter{opacity:1;visibility:visible;transform:none}
.mainnav ul.unter a{padding:9px 20px;border:0;font-weight:600;color:var(--black);white-space:nowrap}
.mainnav ul.unter a:hover,.mainnav ul.unter a[aria-current]{background:var(--tint);color:var(--blue-dark)}

/* ================= UNTERSEITEN (Bäder, Wärme, Lüftung, Unternehmen, Karriere) ================= */

.abschnitt{padding:72px 0}
.abschnitt.getoent{background:var(--tint)}
.abschnitt-kopf{max-width:720px;margin:0 0 40px}
.abschnitt-kopf h2{font-size:clamp(28px,3.4vw,42px)}
.abschnitt-kopf p{margin:0}
.abschnitt-fuss{margin:28px 0 0}

/* intro: text left, picture right */
.intro{padding:72px 0 56px}
.intro-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,6vw,88px);align-items:center}
.intro h2{font-size:clamp(28px,3.4vw,42px)}
.intro p{margin:0 0 18px}
.intro .lead{font-size:clamp(18px,1.6vw,21px);font-weight:600;color:var(--blue-dark)}
.intro-bild{position:relative;isolation:isolate}
.intro-bild img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.intro-bild::before{content:"";position:absolute;right:-16px;bottom:-16px;width:45%;height:45%;background:var(--blue-light);z-index:-1}
.intro-grid.umgekehrt{grid-template-columns:1fr 1.1fr}
.intro-grid.umgekehrt .intro-bild{order:-1}
.intro-grid.umgekehrt .intro-bild::before{right:auto;left:-16px}
/* desktop: picture box stretches to the height of the text column, image fills it (cropped, not distorted) */
@media (min-width:821px){
  .intro-grid > .intro-bild{align-self:stretch;min-height:320px}
  .intro-grid > .intro-bild img{position:absolute;top:0;left:0;width:100%;height:100%;aspect-ratio:auto}
}

/* sub page / topic cards (same look as the homepage cards, 4 per row possible) */
.karten.vier{grid-template-columns:repeat(4,1fr);gap:24px}
.karte-text{margin:0;padding:0 28px 26px;font-size:15px;color:#3a4550}
.karte .karte-fuss{padding-bottom:14px}

/* numbered process steps */
.schritte{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:0;padding:0;list-style:none;counter-reset:schritt}
.schritte li{position:relative;padding:28px 24px 26px;background:var(--white);border-top:4px solid var(--blue-dark);counter-increment:schritt}
.schritte li::before{content:counter(schritt,decimal-leading-zero);display:block;margin-bottom:12px;font-family:var(--font-head);font-weight:700;font-size:38px;line-height:1;color:var(--highlight)}
.schritte.drei{grid-template-columns:repeat(3,1fr)}
.schritte h3{font-size:20px;margin:0 0 8px}
.schritte p{margin:0;font-size:15px}

/* before / after pairs */
.projekte{display:grid;gap:40px}
.projekt{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(24px,4vw,56px);align-items:center}
.projekt h3{font-size:clamp(21px,2vw,26px)}
.projekt p{margin:0 0 14px}
.projekt .tags{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.projekt .tags li{padding:4px 12px;background:var(--white);border:1px solid var(--blue-light);font-size:14px;font-weight:600;color:var(--blue-dark)}
.vn{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vn figure{position:relative;margin:0}
.vn img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.vn figcaption{position:absolute;left:0;top:0;padding:5px 12px;background:var(--black);color:var(--white);font-family:var(--font-head);font-weight:700;font-size:14px}
.vn figure:last-child figcaption{background:var(--highlight)}

/* list of features in two columns with check marks (re-uses .haken) */
.haken.zweispaltig{display:grid;grid-template-columns:1fr 1fr;gap:4px 32px}

/* highlighted offer (N-ERGIE) */
.angebot{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,4vw,48px);align-items:center;padding:clamp(28px,4vw,44px);background:var(--blue-dark);color:var(--white)}
.angebot h2{color:var(--white);font-size:clamp(24px,2.8vw,34px);margin:0 0 8px}
.angebot p{margin:0}
.angebot-betrag{font-family:var(--font-head);font-weight:700;font-size:clamp(40px,6vw,72px);line-height:1;color:var(--white)}
.angebot-betrag small{display:block;margin-top:6px;font-size:15px;font-weight:600;color:var(--blue-light)}
.angebot-code{display:inline-block;margin-top:12px;padding:6px 14px;border:2px dashed var(--blue-light);font-family:var(--font-head);font-weight:700;letter-spacing:.08em}
.angebot .btn-weiss{white-space:nowrap}

/* text + info box side by side */
.text-box{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.text-box p{margin:0 0 18px}
.infobox{padding:30px 28px;background:var(--tint);border-left:5px solid var(--highlight)}
.infobox h3{font-size:20px;margin:0 0 12px}
.infobox p{margin:0 0 12px;font-size:15px}
.infobox ul{margin:0;padding-left:20px;font-size:15px}
.infobox li{margin-bottom:6px}

/* call to action bar (light version of .cta) */
.cta-hell{background:var(--blue-light);padding:44px 0}
.cta-hell .w{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center;justify-content:space-between}
.cta-hell h2{margin:0 0 4px;font-size:clamp(24px,2.8vw,34px)}
.cta-hell p{margin:0}
.cta-hell .knoepfe{display:flex;flex-wrap:wrap;gap:12px}
.btn-rot{display:inline-block;padding:14px 28px;border:2px solid var(--highlight);background:var(--highlight);color:var(--white);font-family:var(--font-head);font-weight:700;transition:background-color .2s,border-color .2s}
.btn-rot:hover{background:var(--blue-dark);border-color:var(--blue-dark);color:var(--white)}
.btn-linie{display:inline-block;padding:14px 28px;border:2px solid var(--black);color:var(--black);font-family:var(--font-head);font-weight:700;transition:background-color .2s,color .2s}
.btn-linie:hover{background:var(--black);color:var(--white)}
.btn-rot:focus-visible,.btn-linie:focus-visible{outline:3px solid var(--blue-dark);outline-offset:2px}

/* in-page jump links (sticky under the header on long pages) */
.sprungmarken{position:sticky;top:0;z-index:20;background:var(--white);border-bottom:1px solid var(--blue-light)}
.sprungmarken ul{display:flex;gap:4px 28px;margin:0 auto;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none}
.sprungmarken ul::-webkit-scrollbar{display:none}
.sprungmarken a{display:block;padding:16px 0;border-bottom:3px solid transparent;font-weight:600;white-space:nowrap}
.sprungmarken a:hover{border-color:var(--highlight);color:var(--blue-dark)}
[id^="s-"]{scroll-margin-top:70px}

/* timeline (company history) */
.zeitleiste{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:24px;margin:0;padding:34px 0 0;list-style:none}
.zeitleiste::before{content:"";position:absolute;left:0;right:0;top:9px;height:3px;background:var(--blue-light)}
.zeitleiste li{position:relative}
.zeitleiste li::before{content:"";position:absolute;left:0;top:-34px;width:18px;height:18px;background:var(--highlight);border:4px solid var(--white);box-shadow:0 0 0 2px var(--highlight)}
.zeitleiste b{display:block;font-family:var(--font-head);font-weight:700;font-size:30px;color:var(--blue-dark);line-height:1.1;margin-bottom:6px}
.zeitleiste p{margin:0;font-size:15px}

/* quote */
.zitat{margin:0;padding:28px 0 0;max-width:900px}
.intro .zitat p{margin:0 0 10px}
.zitat p{margin:0 0 14px;font-family:var(--font-head);font-weight:600;font-size:clamp(21px,2.4vw,28px);line-height:1.35}
.zitat p::before{content:"„";color:var(--highlight)}
.zitat p::after{content:"“";color:var(--highlight)}
.zitat cite{font-style:normal;font-weight:600;color:var(--blue-dark)}

/* benefit tiles (Karriere, Vorteile) */
.kacheln{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.kachel{padding:30px 28px;background:var(--white);border-bottom:4px solid var(--blue-dark)}
.getoent .kachel{background:var(--white)}
.abschnitt:not(.getoent) .kachel{background:var(--tint)}
.kachel-zahl{display:block;margin-bottom:10px;font-family:var(--font-head);font-weight:700;font-size:34px;line-height:1;color:var(--highlight)}
.kachel h3{font-size:20px;margin:0 0 8px}
.kachel p{margin:0;font-size:15px}

/* job posting */
.stelle{display:grid;grid-template-columns:1.5fr 1fr;gap:0;background:var(--white);border:1px solid var(--blue-light)}
.stelle-text{padding:clamp(26px,4vw,44px)}
.stelle-text h3{font-size:clamp(22px,2.4vw,30px);margin:0 0 6px}
.stelle-meta{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:0;list-style:none}
.stelle-meta li{padding:4px 12px;background:var(--tint);font-size:14px;font-weight:600;color:var(--blue-dark)}
.stelle-text h4{font-size:17px;margin:22px 0 8px}
.stelle-text ul.l{margin:0}
.stelle-seite{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:clamp(26px,4vw,44px);background:var(--blue-dark);color:var(--white)}
.stelle-seite h4{color:var(--white);font-size:20px;margin:0}
.stelle-seite p{margin:0}
.stelle-seite a:not(.btn-weiss){color:var(--white);text-decoration:underline}

/* reference projects (Heizung, Neubau)
   All pictures of one project sit in ONE row and get the same height; each keeps
   its own format (nothing is cropped). Set the format per picture on the <figure>:
   style="--ar:0.75" = portrait 3:4, "--ar:1.333" = landscape 4:3, "--ar:1.778" = 16:9.
   .referenz.seitlich = one picture next to the text. */
.referenzen{display:grid;gap:72px}
.referenz{display:grid;gap:24px}
.referenz-kopf{display:grid;grid-template-columns:1fr 1.3fr;gap:12px clamp(24px,4vw,56px);align-items:start}
.referenz-kopf h3{font-size:clamp(22px,2.4vw,30px);margin:0}
.referenz-kopf .ort{display:block;margin-top:6px;font-size:15px;font-weight:600;color:var(--blue-dark)}
.referenz-kopf p{margin:0 0 12px}
.referenz-kopf .tags{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.referenz-kopf .tags li{padding:4px 12px;background:var(--tint);font-size:14px;font-weight:600;color:var(--blue-dark)}
.getoent .referenz-kopf .tags li{background:var(--white)}
.referenz-bilder{display:flex;gap:12px;align-items:flex-start}
.referenz-bilder figure{position:relative;flex:var(--ar,1.333) 1 0;min-width:0;margin:0}
.referenz-bilder a{display:block;overflow:hidden}
.referenz-bilder img{display:block;width:100%;height:auto;aspect-ratio:var(--ar,1.333);object-fit:cover;transition:transform .4s ease}
.referenz-bilder a:hover img{transform:scale(1.04)}
.referenz-bilder a:focus-visible{outline:3px solid var(--blue-dark);outline-offset:2px}
.referenz-bilder figcaption{position:absolute;left:0;top:0;padding:5px 12px;background:var(--black);color:var(--white);font-family:var(--font-head);font-weight:700;font-size:14px;line-height:1.4;pointer-events:none}
.referenz-bilder figcaption.hervor{background:var(--highlight)}
.referenz-bilder figure:only-child{flex:1 1 auto}
/* one picture: text left, picture right */
.referenz.seitlich{grid-template-columns:1fr minmax(0,400px);gap:clamp(24px,4vw,56px);align-items:center}
.referenz.seitlich .referenz-kopf{grid-template-columns:1fr}

/* before/after slider (Bad-Sanierung). Before = left, after = right.
   Frame format per slider: style="--ar:1.333" (landscape), "0.75" (portrait), "1" (square).
   Sliders in one .vergleich-reihe get the same height. */
.vergleich-reihe{display:flex;gap:16px;align-items:flex-start}
.vergleich{--pos:50%;position:relative;flex:var(--ar,1.333) 1 0;min-width:0;aspect-ratio:var(--ar,1.333);overflow:hidden;background:var(--tint);user-select:none;-webkit-user-select:none}
.vergleich img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;pointer-events:none}
.vergleich-vorher{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.vergleich-griff{position:absolute;top:0;bottom:0;left:var(--pos);width:4px;margin-left:-2px;background:var(--white);box-shadow:0 0 8px rgba(0,0,0,.35);pointer-events:none}
.vergleich-griff::after{content:"\2039\00a0\203A";position:absolute;top:50%;left:50%;display:flex;align-items:center;justify-content:center;width:48px;height:48px;transform:translate(-50%,-50%);border-radius:50%;background:var(--white);box-shadow:0 2px 10px rgba(0,0,0,.3);color:var(--blue-dark);font-family:var(--font-head);font-weight:700;font-size:24px;line-height:1}
.vergleich-label{position:absolute;top:12px;padding:5px 12px;background:var(--black);color:var(--white);font-family:var(--font-head);font-weight:700;font-size:14px;line-height:1.4;pointer-events:none}
.vergleich-label.vorher{left:12px}
.vergleich-label.nachher{right:12px;background:var(--highlight)}
.vergleich input[type="range"]{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent}
.vergleich input[type="range"]::-webkit-slider-runnable-track{height:100%;background:transparent}
.vergleich input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:48px;height:100%;background:transparent;border:0;cursor:ew-resize}
.vergleich input[type="range"]::-moz-range-track{height:100%;background:transparent;border:0}
.vergleich input[type="range"]::-moz-range-thumb{width:48px;height:100%;background:transparent;border:0;border-radius:0;cursor:ew-resize}
.vergleich:focus-within .vergleich-griff::after{outline:3px solid var(--blue-dark);outline-offset:2px}

/* ================= UNTERSEITEN – TABLET / MOBILE ================= */
@media (max-width:1000px){
  .karten.vier{grid-template-columns:repeat(2,1fr)}
  .schritte,.schritte.drei{grid-template-columns:repeat(2,1fr)}
  .angebot{grid-template-columns:1fr auto}
  .angebot-betrag{grid-column:1 / -1}
}
@media (max-width:820px){
  /* dropdown: sub links always listed under their parent */
  .mainnav ul.unter{position:static;min-width:0;padding:0;opacity:1;visibility:visible;transform:none;box-shadow:none;border-top:0;background:var(--white)}
  .mainnav ul.unter a{padding:11px 4px 11px 22px;font-weight:400;border-bottom:1px solid var(--tint);white-space:normal}
  .mainnav .hat-unter > a::after{display:none}

  .abschnitt{padding:48px 0}
  .intro{padding:44px 0 36px}
  .intro-grid,.intro-grid.umgekehrt{grid-template-columns:1fr}
  .intro-grid.umgekehrt .intro-bild{order:0}
  .intro-bild::before{display:none}
  .projekt{grid-template-columns:1fr}
  .haken.zweispaltig{grid-template-columns:1fr}
  .text-box{grid-template-columns:1fr}
  .kacheln{grid-template-columns:1fr}
  .zeitleiste{grid-template-columns:1fr;gap:22px;padding:0 0 0 34px}
  .zeitleiste::before{left:7px;right:auto;top:0;bottom:0;width:3px;height:auto}
  .zeitleiste li::before{left:-34px;top:4px}
  .stelle{grid-template-columns:1fr}
  .referenz-kopf{grid-template-columns:1fr}
  .referenz.seitlich{grid-template-columns:1fr}
  .referenz.seitlich .referenz-bilder{max-width:420px}
  .vergleich-reihe{flex-direction:column}
  .vergleich{flex:none;width:100%}
  .angebot{grid-template-columns:1fr}
  .cta-hell .knoepfe{width:100%}
  .cta-hell .knoepfe a{flex:1;text-align:center}
}
@media (max-width:520px){
  .karten.vier,.schritte,.schritte.drei{grid-template-columns:1fr}
  .vn{grid-template-columns:1fr}
  /* phones: pictures stay large, swipe sideways */
  .referenz-bilder{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:thin}
  .referenz-bilder figure{flex:0 0 auto;width:calc(360px * var(--ar,1.333));max-width:86%;scroll-snap-align:start}
  .referenz-bilder figure:only-child{width:100%;max-width:100%}
}

/* ================= ZENTRIERTE SEITEN ohne Bilder im Inhalt (Wartung) ================= */
.zentriert{text-align:center}
.zentriert .abschnitt-kopf{margin-left:auto;margin-right:auto}
.mitte{max-width:780px;margin:0 auto}
.intro.zentriert{padding-bottom:64px}
.intro.zentriert .lead{max-width:640px;margin-left:auto;margin-right:auto}
.zentriert .haken{display:inline-block;margin:6px 0 30px;text-align:left}
.zentriert .hinweis{max-width:780px;margin:28px auto 0;border-left:0;border-top:5px solid var(--blue-dark);text-align:center}
.zentriert .knoepfe{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.cta-hell.zentriert .w{flex-direction:column;justify-content:center}
.preis-box{max-width:780px;margin:0 auto;padding:clamp(28px,4vw,48px);background:var(--blue-dark);color:var(--white)}
.preis-box .label{color:var(--white);opacity:.8}
.preis-box h2{color:var(--white);font-size:clamp(26px,3vw,38px)}
.preis-box p{margin:0 0 24px}
.preis-box .orte{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 28px;padding:0;list-style:none}
.preis-box .orte li{padding:5px 14px;border:1px solid rgba(255,255,255,.4);font-size:15px;font-weight:600}

