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%}
#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}}
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)}
.cc-head>*:first-child{margin-top:0}.cc-head>*:last-child{margin-bottom:15px}.contao-cookiebar{--ccb-backdrop: rgba(0, 0, 0, .75);--ccb-anim-duration: .5s;--ccb-checked-clr: #399d32;--ccb-checked-bg: #dcf3db;--ccb-unchecked-clr: #9c9b99;--ccb-unchecked-bg: #fff;--ccb-disabled-clr: #c8c7c5;--ccb-disabled-bg: #f4f4f4;--ccb-focus-clr: #00a4f4;position:fixed;inset:0;z-index:9999;display:flex;align-items:var(--ccb-align, center);justify-content:var(--ccb-justify, center);letter-spacing:0;padding:15px;max-height:100dvh;box-sizing:border-box;pointer-events:none;overflow:hidden;color:var(--ccb-clr, #444)}.contao-cookiebar *{box-sizing:border-box}.contao-cookiebar p{color:var(--ccb-text, #868686);line-height:1.4}.contao-cookiebar label{position:relative;display:block;padding:8px 13px 8px 0;line-height:1.2rem}.contao-cookiebar label.group{font-weight:600}.contao-cookiebar input{position:absolute;width:1px;height:1px;outline:0 none;opacity:0}.contao-cookiebar input+label{padding:8px 13px 8px 45px;cursor:pointer}.contao-cookiebar input+label:before,.contao-cookiebar input+label:after{content:"";position:absolute;border-radius:10px}.contao-cookiebar input+label:before{top:7px;left:0;width:35px;height:18px;margin:0;box-sizing:content-box;background:var(--ccb-unchecked-bg);border:1px solid var(--ccb-unchecked-clr);transition:border-color .2s}.contao-cookiebar input+label:after{display:block;top:11px;left:4px;width:12px;height:12px;background:var(--ccb-unchecked-clr);transition:background .2s,margin-left .2s,padding .2s}.contao-cookiebar input+label:active:after{padding-left:5px}.contao-cookiebar input.cc-group-half+label:after{background:linear-gradient(to right, var(--ccb-unchecked-clr) 0%, var(--ccb-unchecked-clr) 50%, var(--ccb-checked-clr) 50%, var(--ccb-checked-clr) 100%)}.contao-cookiebar input:checked+label:after{background:var(--ccb-checked-clr);margin-left:17px}.contao-cookiebar input:checked+label:active:after{margin-left:12px}.contao-cookiebar input:checked+label:before{background:var(--ccb-checked-bg);border-color:var(--ccb-checked-clr)}.contao-cookiebar input:disabled+label{pointer-events:none}.contao-cookiebar input:disabled+label:after{background:var(--ccb-disabled-clr)}.contao-cookiebar input:disabled+label:before{background:var(--ccb-disabled-bg);border-color:var(--ccb-disabled-clr)}.contao-cookiebar input:focus-visible:not(.cc-hide-focus)+label:before{outline:3px dashed var(--ccb-focus-clr);outline-offset:2px}.contao-cookiebar .cc-btn{display:inline-block;cursor:pointer;width:100%;padding:8px 14px;margin-bottom:8px;font-size:15px;outline:0 none;border:1px solid var(--ccb-btn-bdr, #cfcfcf);border-radius:4px;color:var(--ccb-btn-clr, #444);background:var(--ccb-btn-bg, #f5f5f5)}.contao-cookiebar .cc-btn:hover,.contao-cookiebar .cc-btn:focus{background:var(--ccb-btn-bg-hvr, #ececec)}.contao-cookiebar .cc-btn:last-child{margin-bottom:0}.contao-cookiebar .grayscale{--ccb-btn-bg: #f1efef;--ccb-btn-bg-hvr: #ececec}.contao-cookiebar .grayscale .success{--ccb-btn-bg: #fbfbfb;--ccb-btn-bg-hvr: #f7f7f7}.contao-cookiebar .highlight .success{--ccb-btn-bg: #4e9e3e;--ccb-btn-bg-hvr: #4c933f;--ccb-btn-bdr: #3e7830;--ccb-btn-clr: #fff}.cc-focus:not(.cc-hide-focus):focus-visible{outline:3px dashed var(--ccb-focus-clr);outline-offset:-3px}.cc-invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;float:left}.cc-inner{display:inline-block;overflow-y:auto;max-height:100%;max-width:100%;padding:23px;border-radius:3px;opacity:0;pointer-events:none;visibility:hidden;font-size:1rem;text-align:left;background:var(--ccb-bg, #fff);box-shadow:var(--ccb-box-shadow, rgba(99, 99, 99, 0.2)) 0 2px 8px 0;animation:var(--ccb-anim, cookiebar-middle-in) var(--ccb-anim-duration) ease-in-out forwards}.cc-group{position:relative;border:1px solid var(--ccb-bdr, #d0d0d0);border-radius:5px;margin-bottom:10px}.cc-cookie-info{font-size:.875rem;background:var(--ccb-info-bg, #fff);border:1px solid var(--ccb-info-bdr, #efefef);padding:10px;border-radius:5px}.cc-cookie-info>div>span{font-weight:600}.cc-cookie-info>div+div{margin-top:5px;word-wrap:break-word}.cc-cookie-info+button.cc-detail-btn-details{margin-top:15px}.cc-cookies{background:var(--ccb-cookies-bg, #fbfbfb);border-radius:0 0 5px 5px}.cc-cookies>p{font-size:.875rem}.cc-cookies>p,.cc-cookies>.cc-cookie{margin:0;padding:15px;border-top:1px solid var(--ccb-cookies-bdr, #fbfbfb)}.cc-cookie label.cookie+*{margin-top:10px}.cc-cookie p{margin:0 0 15px;font-size:.875rem}.cc-cookie-desc p{margin-bottom:0}.cc-footer,.cc-info{text-align:center}.cc-info{margin-top:15px}.cc-info>p{font-size:.875rem}.cc-info>a{display:inline-block;font-size:.813rem;color:var(--ccb-detail-clr, #a2a2a2);text-decoration:none}.cc-info>a:hover{color:var(--ccb-detail-clr-hvr, #717171)}.cc-info>a+a:before{display:inline-block;content:"·";margin-right:5px}.cc-active .cc-inner{opacity:1;pointer-events:auto;visibility:visible}.cc-active.cc-blocked{pointer-events:auto;animation:cookiebar-overlay-in var(--ccb-anim-duration) ease-in-out forwards}.cc-saved.cc-inner{opacity:0;pointer-events:none;visibility:hidden}.cc-saved.cc-blocked{pointer-events:none;animation:cookiebar-overlay-out var(--ccb-anim-duration) ease-in-out forwards}.cc-left{--ccb-justify: flex-start}.cc-right{--ccb-justify: flex-end}.cc-top{--ccb-align: flex-start}.cc-top.cc-active{--ccb-anim: cookiebar-top-in}.cc-top.cc-saved{--ccb-anim: cookiebar-top-out}.cc-middle.cc-active{--ccb-anim: cookiebar-middle-in}.cc-middle.cc-saved{--ccb-anim: cookiebar-middle-out}.cc-bottom{--ccb-align: flex-end}.cc-bottom.cc-active{--ccb-anim: cookiebar-bottom-in}.cc-bottom.cc-saved{--ccb-anim: cookiebar-bottom-out}@media(min-width: 768px){.contao-cookiebar .cc-btn{width:auto;margin-bottom:0}.cc-inner{max-width:var(--ccb-max-width, 750px)}}@media(forced-colors){.contao-cookiebar input+label:after{border:1px solid currentColor}.cc-inner{border:1px solid currentColor}input.cc-group-half+label:after{margin-left:9px}}@media(prefers-reduced-motion){.contao-cookiebar{--ccb-anim-duration: 2s}}@media print{.contao-cookiebar{opacity:0}}@keyframes cookiebar-overlay-in{0%{background:rgba(0,0,0,0)}to{background:var(--ccb-backdrop)}}@keyframes cookiebar-overlay-out{0%{background:var(--ccb-backdrop)}to{background:rgba(0,0,0,0);visibility:hidden}}@keyframes cookiebar-top-in{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}@keyframes cookiebar-top-out{0%{opacity:1;visibility:visible;transform:translateY(0)}to{opacity:0;visibility:hidden;transform:translateY(-100%)}}@keyframes cookiebar-middle-in{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes cookiebar-middle-out{0%{opacity:1;visibility:visible;transform:scale(1)}to{opacity:0;visibility:hidden;transform:scale(0)}}@keyframes cookiebar-bottom-in{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes cookiebar-bottom-out{0%{opacity:1;visibility:visible;transform:translateY(0)}to{opacity:0;visibility:hidden;transform:translateY(100%)}}.cc-groups{display:none;padding-top:15px}.cc-group{text-align:left}.cc-group>label{margin:5px 130px 5px 10px}.cc-detail-btn-details{text-decoration:underline;padding:0;margin:0 0 10px;color:var(--ccb-detail-clr, #a2a2a2);border:0 none;outline:0 none;background:rgba(0,0,0,0);font-size:13px;letter-spacing:0;text-transform:initial;cursor:pointer}.cc-detail-btn-details span:nth-child(2){display:none}.cc-detail-btn-details.cc-active span:nth-child(1){display:none}.cc-detail-btn-details.cc-active span:nth-child(2){display:inline}.cc-detail-btn-details:hover{color:var(--ccb-detail-clr-hvr, #717171)}
/*==============================================================================
    KARNEVALSCLUB WILSDRUFF – CSS STYLESHEET
    Contao 4.13 · aufgeräumte Version
==============================================================================

    INHALTSVERZEICHNIS

    01. GRUNDLAGEN (Variablen)
    02. ALLGEMEINES LAYOUT
    03. HEADER & LOGO
    04. NAVIGATION
        4.1 Desktop-Navigation
        4.2 Untermenüs (ausgeblendet)
        4.3 Mobile Navigation (Grundzustand)
    05. STARTSEITE
        5.1 Allgemein
        5.2 Hero
        5.3 Aktuelles
        5.4 Termine
    06. UNTERSEITEN
        6.1 Der Verein
        6.2 Goldstückchen
        6.3 Vorstand
        6.4 Sponsoren
        6.5 Galerien
        6.6 Galerie-Übersicht mit Vollbild-Fenster
        6.7 Prinzenpaare (Zeitleiste)
        6.8 Vergangene Saisons (Karten nach Jahrzehnten)
        6.9 Tanzgruppen (Abschnitte mit Bildleiste)
        6.10 Über Uns (Geschichte und Präsidenten)
    07. VERANSTALTUNGEN
        7.1 Alte Veranstaltungsliste
        7.2 Event-Hero
        7.3 Intro
        7.4 Highlights
        7.5 Informationen
        7.6 Ticketbereich
        7.7 Umbruch auf eine Spalte
    08. KALENDER
        8.1 Termin-Fenster (Termin speichern)
    09. FORMULARE
        9.1 Kontaktseite: Einleitung und Ticket-Hinweis
        9.2 Formular (Felder, Knopf)
    10. AKKORDEONS
    11. FOOTER
    12. RESPONSIVE
        12.1 max-width: 1000px (Tablet, mobiles Menü)
        12.2 max-width: 800px
        12.3 max-width: 600px (Smartphone)

==============================================================================*/


/*==============================================================================
    01. GRUNDLAGEN
==============================================================================*/

:root {

    /* Farben */
    --bg-color: #ffffff;
    --nav-color: #DA251C;
    --accent-color: #00923F;

    --text-color: #222222;
    --heading-color: #DA251C;

    --light-bg: #f7f7f7;
    --card-bg: #ffffff;
    --va-color: #ffffff;

    /* Layout */
    --content-width: 1400px;

    /* Abgerundete Ecken */
    --radius-small: 6px;
    --radius-medium: 12px;
    --radius-large: 20px;

    /* Schatten */
    --shadow-small: 0 4px 18px rgba(0, 0, 0, 0.10);
    --shadow-medium: 0 8px 25px rgba(0, 0, 0, 0.14);
    --shadow-large: 0 8px 30px rgba(0, 0, 0, 0.18);

    /* Roter Verlauf für Hero-Bereiche (Startseite + Veranstaltungen) */
    --hero-gradient: linear-gradient(
        to bottom,
        rgba(218, 37, 28, 0.20) 0%,
        rgba(218, 37, 28, 0.30) 30%,
        rgba(218, 37, 28, 0.55) 60%,
        rgba(218, 37, 28, 0.90) 100%
    );

    /* Schrift */
    --font-family: Arial, Helvetica, sans-serif;
}


/*==============================================================================
    02. ALLGEMEINES LAYOUT
==============================================================================*/

html {
    scroll-behavior: smooth;
    scroll-padding-top: 70px;
}

body {
    width: 100%;
    margin: 0;
    padding: 0;

    box-sizing: border-box;

    background-color: var(--bg-color);
    color: var(--text-color);

    font-family: var(--font-family);
    font-size: 18px;
    line-height: 1.5;

    /* verhindert seitliches Scrollen durch die 100vw-Navigationsleiste */
    overflow-x: clip;
}

/* Hauptinhalt */
#main,
#startseite {
    position: relative;

    width: 100%;
    max-width: var(--content-width);

    margin-left: auto;
    margin-right: auto;

    box-sizing: border-box;

    background-color: var(--bg-color);

    z-index: 0;
}

h1 {
    color: var(--heading-color);
    text-align: center;
}

img {
    max-width: 100%;
    height: auto;
}

/* Contao-Hilfstexte nur für Screenreader (z. B. "Navigation überspringen")
   dürfen nicht sichtbar sein */
.invisible,
.navmain a.invisible {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    margin: -1px !important;
    padding: 0 !important;

    overflow: hidden !important;

    border: 0 !important;

    clip: rect(0 0 0 0) !important;

    white-space: nowrap !important;
}


/*==============================================================================
    03. HEADER & LOGO
==============================================================================*/

.logo_kcw {
    margin: 20px auto 15px auto;

    text-align: center;
}

.logo_kcw img {
    display: block;

    width: 260px;
    max-width: 70%;
    height: auto;

    margin: 0 auto;

    border-radius: 0;
}

.logo_kcw figcaption {
    text-align: left;
}


/*==============================================================================
    04. NAVIGATION
==============================================================================*/


/*------------------------------------------------------------------------------
    4.1 Desktop-Navigation (ab 1001px sichtbar, siehe 12.1)
------------------------------------------------------------------------------*/

.navmain {
    /* Bleibt beim Scrollen oben stehen */
    position: sticky;
    top: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    /* Über die komplette Bildschirmbreite (bricht aus dem Inhaltsbereich aus) */
    width: 100vw;
    margin-left: calc(50% - 50vw);

    /* Höhe der Leiste */
    padding: 10px 20px;

    box-sizing: border-box;

    background-color: var(--nav-color);

    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);

    z-index: 1000;
}

/* Alle Menüpunkte in einer Zeile */
.navmain ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

    width: 100%;

    margin: 0;
    padding: 0;

    list-style: none;
}

.navmain li {
    flex: 0 0 auto;

    margin: 0;
    padding: 0;
}

/* Links und der aktive Punkt (Contao gibt ihn als <strong> aus) */
.navmain a,
.navmain strong {
    position: relative;

    display: block;

    margin: 0;
    padding: 14px clamp(7px, 0.9vw, 14px);

    background: transparent;
    color: #ffffff;

    font-size: clamp(14px, 1.25vw, 17px);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;

    border: none;
    border-radius: var(--radius-small);
    box-shadow: none;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.navmain a:hover {
    background-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

/* Aktiver Menüpunkt und Elternpunkt: weiße Unterlinie */
.navmain li.active > a::after,
.navmain li.active > strong::after,
.navmain li.trail > a::after {
    content: "";

    position: absolute;

    left: 8px;
    right: 8px;
    bottom: 1px;

    height: 3px;

    background-color: #ffffff;

    border-radius: 3px;
}


/*------------------------------------------------------------------------------
    4.2 Untermenüs (ausgeblendet)
------------------------------------------------------------------------------*/

/* Untermenüs (z. B. Trachtengaudi, Sommerbeat unter "Veranstaltungen/Termine")
   werden bewusst NICHT angezeigt. Diese Seiten sind über Termine, Startseite
   und die Veranstaltungsübersicht erreichbar. */
.navmain ul.level_2 {
    display: none;
}


/*------------------------------------------------------------------------------
    4.3 Mobile Navigation – Grundzustand
    Auf dem Desktop komplett ausgeblendet. Alle Teile (Hamburger, Overlay,
    Drawer) liegen im Container .mobile-nav und verschwinden mit ihm.
    Das Aussehen steht in 12.1.
------------------------------------------------------------------------------*/

.mobile-nav {
    display: none;
}

/* Alte Schnellnavigation (Dropdown + "Los") komplett ausblenden */
.navmain-resp,
.mod_quicknav {
    display: none !important;
}

/* Damit die Leiste beim Scrollen wirklich oben bleibt, darf der Header-
   Container sie nicht "einsperren" (sticky wirkt nur innerhalb des Elternelements) */
@media only screen and (min-width: 1001px) {
    #header,
    #header .inside {
        display: contents;
    }
}


/*==============================================================================
    05. STARTSEITE
==============================================================================*/


/*------------------------------------------------------------------------------
    5.1 Allgemein
------------------------------------------------------------------------------*/

#startseite {
    padding-bottom: 60px;

    text-align: center;

    font-size: 30px;
}

#startseite .last {
    text-align: left;

    font-size: 20px;
}

#startseite h1,
#startseite h2 {
    margin-top: 55px;
    margin-bottom: 25px;

    color: var(--heading-color);

    font-weight: 700;
    text-align: center;
}

#startseite h1 {
    font-size: clamp(30px, 4vw, 52px);
    line-height: 1.15;
}

#startseite h2 {
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.2;
}

#startseite p {
    max-width: 1200px;

    margin-left: auto;
    margin-right: auto;

    line-height: 1.6;
}

#startseite a {
    transition:
        color 0.2s ease,
        opacity 0.2s ease;
}

#startseite a:hover {
    opacity: 0.8;
}


/*------------------------------------------------------------------------------
    5.2 Hero
------------------------------------------------------------------------------*/

.hero {
    position: relative;

    width: 100%;
    height: 650px;

    overflow: hidden;
}

/* Hero-Bild: füllt den kompletten Hero-Bereich und wird beschnitten (cover).
   Der Selektor ".hero img" funktioniert unabhängig davon, ob das Bild in
   Contao in <figure>/<div> verpackt ist oder eine Klasse trägt.
   Dadurch ist der Verlauf (.hero-overlay) immer genau so groß wie das Bild. */
.hero img {
    position: absolute;

    top: 0;
    left: 0;

    width: 110%;
    height: 100%;
    max-width: none;

    object-fit: cover;

    z-index: 1;
}

/* Roter Verlauf (gemeinsam mit Event-Hero, siehe 7.2) */
.hero-overlay,
.event-hero-overlay {
    position: absolute;

    inset: 0;

    display: flex;
    align-items: flex-end;

    background: var(--hero-gradient);
}

.hero-overlay {
    z-index: 2;
}

.hero-content {
    position: relative;

    max-width: 700px;

    margin-left: 8%;
    margin-bottom: 60px;

    color: #ffffff;

    text-align: left;

    z-index: 3;
}

.hero-kicker {
    margin-bottom: 15px;

    color: #ffffff;

    font-size: 24px;
    font-weight: bold;

    letter-spacing: 3px;
}

.hero h1 {
    margin: 0 0 30px 0;

    color: #ffffff;

    font-size: clamp(2.2rem, 4vw, 4.2rem);
    line-height: 1.1;
    text-align: left;
}

.hero-button {
    display: inline-block;

    padding: 14px 24px;

    background-color: var(--nav-color);
    color: #ffffff;

    border-radius: 5px;

    font-size: 17px;
    font-weight: bold;
    text-decoration: none;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease;
}

.hero-button:hover {
    transform: translateY(-2px);

    background-color: rgb(180, 30, 24);
}

.hero-button span {
    margin-left: 8px;
}


/*------------------------------------------------------------------------------
    5.3 Aktuelles
------------------------------------------------------------------------------*/

.aktuelles {
    width: 100%;
    max-width: 1400px;

    margin: 80px auto;
    padding: 0 30px;

    box-sizing: border-box;
}

.section-heading {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 20px;

    margin-bottom: 45px;
}

.section-heading span {
    width: 70px;
    height: 4px;

    background-color: var(--accent-color);

    border-radius: 2px;
}

.section-heading h2 {
    margin: 0;

    color: var(--heading-color);

    font-size: 38px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.aktuelles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 30px;
}

.aktuell-card {
    overflow: hidden;

    background-color: var(--card-bg);

    border-radius: 10px;
    box-shadow: var(--shadow-small);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.aktuell-card:hover {
    transform: translateY(-6px);

    box-shadow: var(--shadow-medium);
}

.aktuell-card-image {
    width: 100%;
    height: 220px;

    overflow: hidden;
}

.aktuell-card-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.3s ease;
}

.aktuell-card:hover .aktuell-card-image img {
    transform: scale(1.04);
}

.aktuell-card-content {
    padding: 25px;

    text-align: left;
}

.aktuell-label {
    color: var(--accent-color);

    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1.5px;
}

.aktuell-card h3 {
    margin: 10px 0 12px;

    color: #222222;

    font-size: 23px;
    line-height: 1.2;
}

.aktuell-card p {
    margin: 0 0 20px;

    color: #555555;

    font-size: 16px;
    line-height: 1.5;
}

.aktuell-link {
    color: var(--heading-color);

    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
}

.aktuell-link span {
    margin-left: 6px;

    transition: margin-left 0.2s ease;
}

.aktuell-link:hover span {
    margin-left: 12px;
}


/*------------------------------------------------------------------------------
    5.4 Termine
------------------------------------------------------------------------------*/

.terminliste {
    width: 100%;
    max-width: 1100px;

    margin: 80px auto;
    padding: 0 30px;

    box-sizing: border-box;
}

.terminliste > h2 {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 20px;

    margin: 0 0 45px 0;

    color: var(--heading-color);

    font-size: 38px;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
}

.terminliste .event {
    position: relative;

    display: block;

    margin: 0 0 18px 0;
    padding: 20px 25px;

    background-color: #ffffff;

    border-left: 5px solid var(--accent-color);
    border-radius: 10px;
    box-shadow: var(--shadow-small);

    font-size: 18px;
    text-align: left;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.terminliste .event:hover {
    transform: translateX(5px);

    box-shadow: var(--shadow-medium);
}

.terminliste .event h2 {
    margin: 0 0 5px 0;

    color: #222222;

    font-size: 24px;
    line-height: 1.2;
}

.terminliste .event p {
    margin: 3px 0;

    color: #555555;

    font-size: 16px;
    line-height: 1.4;
}

.terminliste .event a {
    color: var(--nav-color);

    font-weight: bold;
    text-decoration: none;
}

/* Termine mit Link zur Landingpage: ganze Karte ist klickbar */
.terminliste .event a::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.terminliste .event h2 a {
    color: inherit;
}

.terminliste .event:has(a) {
    cursor: pointer;
}

/* Contao-Verweis "Weiterlesen ..." wird durch "Mehr erfahren" ersetzt.
   Der Link bleibt bestehen (die ganze Karte ist darüber klickbar), nur der Text ist unsichtbar. */
.terminliste .event .more {
    height: 0;

    margin: 0;
    padding: 0;

    font-size: 0;
    line-height: 0;
}

/* Hinweis unter dem Termin (nur wenn ein Link vorhanden ist) */
.terminliste .event:has(a)::after {
    content: "Mehr erfahren \2192";

    display: block;

    margin-top: 12px;

    color: var(--nav-color);

    font-size: 15px;
    font-weight: 700;

    transition: padding-left 0.2s ease;
}

.terminliste .event:has(a):hover::after {
    padding-left: 6px;
}


/*==============================================================================
    06. UNTERSEITEN
==============================================================================*/


/*------------------------------------------------------------------------------
    6.1 Der Verein (Link-Buttons)
------------------------------------------------------------------------------*/

#der-verein li {
    margin: 14px;

    list-style: none;
}

#der-verein li a {
    display: inline-block;

    padding: 2px;

    color: #000000;

    border: 1px solid #000000;
    border-radius: 6px;
    box-shadow: 1px 1px 0 0 #000000;

    text-align: center;
    text-decoration: none;

    transition: transform 0.2s ease;
}

/* Statt Padding-Änderung (Layout springt): leichte Vergrößerung */
#der-verein li a:hover {
    transform: scale(1.06);
}



/*------------------------------------------------------------------------------
    6.2 Goldstückchen
------------------------------------------------------------------------------*/

#die-goldstueckchen img {
    width: min(30em, 100%);
}


/*------------------------------------------------------------------------------
    6.3 Vorstand
------------------------------------------------------------------------------*/

#der-vorstand .ce_gallery {
    max-width: 100%;
    height: auto;
}


/*------------------------------------------------------------------------------
    6.4 Sponsoren
------------------------------------------------------------------------------*/

/* (aktuell keine Sonderregeln) */


/*------------------------------------------------------------------------------
    6.5 Galerien
------------------------------------------------------------------------------*/

.ce_gallery h2 {
    margin-bottom: 0;
}

.ce_gallery .image_container {
    margin: 0.05em;

    border-radius: 3px;
}

.ce_gallery .pagination {
    display: inline;
}

.ce_gallery .pagination ul {
    margin-top: 0;
    margin-bottom: 0;

    padding-left: 0;
}

.ce_gallery .pagination li {
    display: inline;

    list-style-type: none;
}

.ce_gallery .pagination p {
    margin: 0;
}


/*------------------------------------------------------------------------------
    6.6 Galerie-Übersicht (Saison-Karten) mit Vollbild-Fenster

    Aufbau in Contao:
    - Direkt VOR der ersten Galerie ein HTML-Element mit  <div class="galerie-grid">
    - Direkt NACH der letzten Galerie ein HTML-Element mit  </div>
    - Das Skript steht im Seitenlayout (Feld für eigenen JavaScript-Code)
    Der Einleitungstext davor bleibt unverändert über die ganze Breite.

    Jede Galerie wird zu einer Karte: 3 Fotos liegen wie ein Stapel
    übereinander und fächern beim Darüberfahren auf. Ein Klick öffnet ein
    Fenster mit dem ersten Bild groß, einer Bilderleiste darunter und Pfeilen
    zum Blättern (Skript: galerie.js).
------------------------------------------------------------------------------*/

/* Karten ordnen sich selbst an: so viele nebeneinander, wie Platz ist */
.galerie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));

    gap: 30px;

    max-width: var(--content-width);

    margin: 40px auto;
    padding: 0 30px;

    box-sizing: border-box;
}

.galerie-grid .ce_gallery {
    margin: 0;
    padding: 22px 22px 20px 22px;

    background-color: var(--card-bg);

    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-small);

    cursor: pointer;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.galerie-grid .ce_gallery:hover,
.galerie-grid .ce_gallery:focus-visible {
    transform: translateY(-5px);

    box-shadow: var(--shadow-medium);
}

.galerie-grid .ce_gallery h2 {
    margin: 0 0 12px 0;

    color: var(--heading-color);

    font-size: 24px;
    line-height: 1.2;
    text-align: left;
}


/* Bilderstapel: Die ersten 3 Bilder liegen leicht versetzt übereinander */
.galerie-grid .ce_gallery ul {
    position: relative;

    display: block;

    aspect-ratio: 16 / 9;

    margin: 0;
    padding: 0;

    list-style: none;
}

.galerie-grid .ce_gallery ul li {
    position: absolute !important;

    top: 14%;

    float: none !important;

    width: 52% !important;

    aspect-ratio: 4 / 3;

    margin: 0 !important;
    padding: 0 !important;

    transform-origin: 50% 90%;

    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.galerie-grid .ce_gallery ul li:nth-child(1) {
    left: 6%;

    transform: rotate(-7deg);

    z-index: 1;
}

.galerie-grid .ce_gallery ul li:nth-child(2) {
    top: 6%;
    left: 24%;

    z-index: 3;
}

.galerie-grid .ce_gallery ul li:nth-child(3) {
    left: 42%;

    transform: rotate(7deg);

    z-index: 2;
}

/* Alle weiteren Bilder erscheinen erst im Vollbild-Fenster */
.galerie-grid .ce_gallery ul li:nth-child(n+4) {
    display: none !important;
}

/* Fotorahmen */
.galerie-grid .ce_gallery .image_container {
    width: 100%;
    height: 100%;

    margin: 0;

    overflow: hidden;

    box-sizing: border-box;

    background-color: #ffffff;

    border: 4px solid #ffffff;
    border-radius: var(--radius-small);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

.galerie-grid .ce_gallery .image_container a {
    display: block;

    height: 100%;
}

.galerie-grid .ce_gallery .image_container img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

/* Auffächern, wenn man mit der Maus darüberfährt (nur bei Geräten mit Maus) */
@media (hover: hover) {

    .galerie-grid .ce_gallery:hover ul li:nth-child(1),
    .galerie-grid .ce_gallery:focus-visible ul li:nth-child(1) {
        transform: translateX(-14%) rotate(-13deg);
    }

    .galerie-grid .ce_gallery:hover ul li:nth-child(2),
    .galerie-grid .ce_gallery:focus-visible ul li:nth-child(2) {
        transform: translateY(-5%) scale(1.05);
    }

    .galerie-grid .ce_gallery:hover ul li:nth-child(3),
    .galerie-grid .ce_gallery:focus-visible ul li:nth-child(3) {
        transform: translateX(14%) rotate(13deg);
    }
}

/* Blätter-Navigation wird nicht gebraucht */
.galerie-grid .ce_gallery .pagination {
    display: none;
}

/* Hinweis unter dem Stapel */
.galerie-grid .ce_gallery::after {
    content: "Alle Bilder ansehen \2192";

    display: block;

    margin-top: 14px;

    color: var(--accent-color);

    font-size: 16px;
    font-weight: bold;
}


/*------------------------------------------------------------------------------
    Galerie-Fenster (wird von galerie.js erzeugt):
    Kopfzeile · großes Bild mit Pfeilen · Bilderleiste
------------------------------------------------------------------------------*/

html.galerie-offen {
    overflow: hidden;
}

.galerie-overlay {
    position: fixed;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    display: flex;
    flex-direction: column;

    background-color: rgba(10, 10, 10, 0.96);
    color: #ffffff;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;

    z-index: 5000;
}

.galerie-overlay.is-open {
    opacity: 1;
    visibility: visible;
}


/* Kreuz oben rechts */
.galerie-overlay-close {
    position: absolute;

    top: calc(12px + env(safe-area-inset-top, 0px));
    right: max(14px, env(safe-area-inset-right, 0px));

    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    margin: 0;
    padding: 0 0 4px 0;

    background-color: rgba(0, 0, 0, 0.65);
    color: #ffffff;

    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;

    font-size: 34px;
    line-height: 1;

    cursor: pointer;

    transition: background-color 0.2s ease;

    z-index: 3;
}

.galerie-overlay-close:hover,
.galerie-overlay-close:focus-visible {
    background-color: var(--nav-color);
}


/* Kopfzeile: Titel und Zähler */
.galerie-overlay-kopf {
    display: flex;
    align-items: center;

    flex: 0 0 auto;

    gap: 14px;

    min-height: calc(72px + env(safe-area-inset-top, 0px));

    padding: env(safe-area-inset-top, 0px) 80px 0 20px;

    box-sizing: border-box;
}

.galerie-overlay-title {
    margin: 0;

    color: #ffffff;

    font-size: 24px;
    line-height: 1.2;
    text-align: left;
}

.galerie-overlay-count {
    color: rgba(255, 255, 255, 0.7);

    font-size: 16px;
    white-space: nowrap;
}


/* Bühne: Platz für das große Bild und die Pfeile */
.galerie-buehne {
    position: relative;

    flex: 1 1 auto;

    min-height: 0;
}

.galerie-rahmen {
    position: absolute;

    top: 4px;
    right: 90px;
    bottom: 12px;
    left: 90px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.galerie-gross {
    display: block;

    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    border-radius: 4px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);

    transition: opacity 0.25s ease;
}

/* Pfeile links und rechts vom Bild */
.galerie-pfeil {
    position: absolute;

    top: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    margin: -27px 0 0 0;
    padding: 0;

    background-color: rgba(0, 0, 0, 0.6);
    color: #ffffff;

    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;

    cursor: pointer;

    transition: background-color 0.2s ease;

    z-index: 2;
}

.galerie-pfeil svg {
    width: 26px;
    height: 26px;
}

.galerie-pfeil:hover,
.galerie-pfeil:focus-visible {
    background-color: var(--nav-color);
}

.galerie-pfeil-zurueck {
    left: 18px;
}

.galerie-pfeil-weiter {
    right: 18px;
}


/* Bilderleiste unten */
.galerie-leiste {
    position: relative;

    display: flex;
    gap: 8px;

    flex: 0 0 auto;

    padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)) 14px;

    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    box-sizing: border-box;

    background-color: rgba(0, 0, 0, 0.45);

    scrollbar-width: thin;
}

/* zentriert, solange alle Bilder in die Leiste passen */
.galerie-leiste .galerie-mini:first-child {
    margin-left: auto;
}

.galerie-leiste .galerie-mini:last-child {
    margin-right: auto;
}

.galerie-mini {
    flex: 0 0 auto;

    width: 96px;
    height: 68px;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background-color: #222222;

    border: 3px solid transparent;
    border-radius: 5px;

    opacity: 0.6;

    cursor: pointer;

    transition:
        opacity 0.2s ease,
        border-color 0.2s ease;
}

.galerie-mini:hover,
.galerie-mini:focus-visible {
    opacity: 1;
}

.galerie-mini.is-aktiv {
    border-color: #ffffff;

    opacity: 1;
}

.galerie-mini img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

/* Bei nur einem Bild: keine Pfeile und keine Leiste */
.galerie-overlay.galerie-einzeln .galerie-pfeil,
.galerie-overlay.galerie-einzeln .galerie-leiste {
    display: none;
}

.galerie-overlay.galerie-einzeln .galerie-rahmen {
    right: 20px;
    left: 20px;
}


/* Handy: Bild fast randlos, Pfeile kleiner über dem Bild, kleinere Leiste */
@media only screen and (max-width: 700px) {

    .galerie-overlay-kopf {
        min-height: calc(66px + env(safe-area-inset-top, 0px));

        padding-left: 14px;
    }

    .galerie-overlay-title {
        font-size: 20px;
    }

    .galerie-rahmen {
        right: 0;
        left: 0;
    }

    .galerie-gross {
        border-radius: 0;
    }

    .galerie-pfeil {
        width: 44px;
        height: 44px;

        margin-top: -22px;
    }

    .galerie-pfeil svg {
        width: 22px;
        height: 22px;
    }

    .galerie-pfeil-zurueck {
        left: 8px;
    }

    .galerie-pfeil-weiter {
        right: 8px;
    }

    .galerie-mini {
        width: 74px;
        height: 54px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .galerie-grid .ce_gallery,
    .galerie-grid .ce_gallery ul li,
    .galerie-overlay {
        transition: none;
    }
}


/*------------------------------------------------------------------------------
    6.7 Prinzenpaare (Zeitleiste mit Linie in der Mitte)

    Aufbau in Contao (Seite "Prinzenpaar"), von oben nach unten:
    1. Einleitungstext (bleibt wie er ist)
    2. HTML-Element mit   <div class="zeitleiste">
    3. pro neuer Saison ein Text-Element, die NEUESTE Saison ZUERST:
         Überschrift:  46. Saison 2025/26
         Bild:         über dem Text
         Text:         1. Absatz = Namen, 2. Absatz = Text des Prinzenpaares
    4. HTML-Element mit den älteren Saisons, das mit  </div>  endet

    Alle Einträge (Text-Elemente und die Saisons aus dem HTML-Element) sehen
    gleich aus. Mit Bild wird der Eintrag eine große Karte, ohne Bild eine
    kleine. Der oberste Eintrag trägt automatisch die Markierung "Aktuell".
------------------------------------------------------------------------------*/

.zeitleiste {
    --luecke: 64px;
    --linie: 4px;

    position: relative;

    display: grid;
    grid-template-columns: 1fr 1fr;

    column-gap: var(--luecke);
    row-gap: 24px;

    max-width: 1100px;

    margin: 50px auto 70px auto;
    padding: 0 30px;

    box-sizing: border-box;
}

/* Die Linie in der Mitte */
.zeitleiste::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 50%;

    width: var(--linie);

    margin-left: calc(var(--linie) / -2);

    background: linear-gradient(to bottom, var(--nav-color), var(--accent-color));

    border-radius: 2px;
}

/* Einträge wechseln zwischen links und rechts */
.zeitleiste > * {
    --punkt: 16px;

    position: relative;

    align-self: start;

    min-width: 0;

    box-sizing: border-box;
}

.zeitleiste > *:has(figure) {
    --punkt: 22px;
}

.zeitleiste > :nth-child(odd) {
    grid-column: 1;
}

.zeitleiste > :nth-child(even) {
    grid-column: 2;

    margin-top: 70px;
}

/* Kleine Einträge (ohne Bild) sitzen enger beieinander */
.zeitleiste > :nth-child(even):not(:has(figure)) {
    margin-top: 40px;
}


/* Karte */
.zeitleiste > .ce_text {
    display: flex;
    flex-direction: column;

    /* Contao setzt bei Elementen mit der Klasse "block" overflow:hidden. Das würde
       Punkt und Verbindungslinie am Kartenrand abschneiden. */
    overflow: visible !important;

    padding-bottom: 20px;

    background-color: var(--card-bg);

    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-small);

    text-align: left;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.zeitleiste > .ce_text:hover {
    transform: translateY(-4px);

    box-shadow: var(--shadow-medium);
}

/* Bild steht oben, auch wenn es in Contao nach der Überschrift kommt */
.zeitleiste > .ce_text figure,
.zeitleiste > .ce_text .image_container {
    order: -1;

    float: none;

    width: 100%;

    margin: 0 0 6px 0;
}

.zeitleiste > .ce_text img {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 4 / 3;

    object-fit: cover;
    object-position: 50% 25%;

    border-radius: var(--radius-medium) var(--radius-medium) 0 0;
}

/* Saison */
.zeitleiste > .ce_text h2 {
    margin: 18px 22px 4px 22px;

    color: var(--accent-color);

    font-size: 14px;
    line-height: 1.3;
    letter-spacing: 2px;
    text-align: left;
    text-transform: uppercase;
}

/* Texte */
.zeitleiste > .ce_text p {
    margin: 0 22px 12px 22px;

    color: #444444;

    font-size: 16px;
    line-height: 1.7;
    text-align: left;
}

/* Der erste Absatz sind die Namen */
.zeitleiste > .ce_text p:first-of-type {
    margin-bottom: 10px;

    color: var(--heading-color);

    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
}

.zeitleiste > .ce_text:not(:has(figure)) p:first-of-type {
    margin-bottom: 0;

    font-size: 19px;
}

.zeitleiste > .ce_text p:last-child {
    margin-bottom: 0;
}


/* Markierung für das neueste Prinzenpaar */
.zeitleiste > :first-child h2::before {
    content: "Aktuell";

    position: absolute;

    top: 14px;
    left: 14px;

    padding: 5px 12px;

    background-color: var(--nav-color);
    color: #ffffff;

    border-radius: 999px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;

    z-index: 2;
}


/* Verbindungslinie von der Karte zum Punkt */
.zeitleiste > *::before {
    content: "";

    position: absolute;

    top: calc(24px + var(--punkt) / 2 - 1.5px);

    width: calc(var(--luecke) / 2);
    height: 3px;

    background-color: var(--nav-color);
}

.zeitleiste > :nth-child(odd)::before {
    left: 100%;
}

.zeitleiste > :nth-child(even)::before {
    right: 100%;
}


/* Punkte auf der Linie */
.zeitleiste > *::after {
    content: "";

    position: absolute;

    top: 24px;

    width: var(--punkt);
    height: var(--punkt);

    box-sizing: border-box;

    background-color: #ffffff;

    border: 4px solid var(--nav-color);
    border-radius: 50%;
}

.zeitleiste > *:has(figure)::after {
    background-color: var(--nav-color);

    border-color: #ffffff;

    box-shadow: 0 0 0 3px var(--nav-color);
}

.zeitleiste > :nth-child(odd)::after {
    right: calc(var(--luecke) / -2 - var(--punkt) / 2);
}

.zeitleiste > :nth-child(even)::after {
    left: calc(var(--luecke) / -2 - var(--punkt) / 2);
}


/* Tablet und Handy: Linie links, alle Einträge rechts davon */
@media only screen and (max-width: 800px) {

    .zeitleiste {
        grid-template-columns: 1fr;

        row-gap: 24px;

        padding: 0 16px 0 46px;
    }

    .zeitleiste::before {
        left: 20px;

        margin-left: 0;
    }

    .zeitleiste > :nth-child(odd),
    .zeitleiste > :nth-child(even),
    .zeitleiste > :nth-child(even):not(:has(figure)) {
        grid-column: 1;

        margin-top: 0;
    }

    .zeitleiste > :nth-child(odd)::after,
    .zeitleiste > :nth-child(even)::after {
        right: auto;
        left: calc(-24px - var(--punkt) / 2);
    }

    .zeitleiste > :nth-child(odd)::before,
    .zeitleiste > :nth-child(even)::before {
        right: 100%;
        left: auto;

        width: 24px;
    }
}


/*------------------------------------------------------------------------------
    6.8 Vergangene Saisons (Karten nach Jahrzehnten)

    Aufbau in Contao (Seite "Vergangene Saisons"), von oben nach unten:
    1. Überschrift der Seite (bleibt)
    2. HTML-Element mit  <div class="saisonliste">  samt Sprungmarken und der
       Überschrift "2020er"
    3. Neue Saisons: je ein Text-Element, die NEUESTE ZUERST
         Überschrift (h3):  47. Saison 2026/27
         Absatz:            das Motto
    (Die Prinzenpaare stehen auf der eigenen Seite "Prinzenpaar".)
    4. HTML-Element mit den bisherigen Saisons, das mit  </div>  endet
------------------------------------------------------------------------------*/

.saisonliste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));

    gap: 24px;

    max-width: 1200px;

    margin: 40px auto 70px auto;
    padding: 0 30px;

    box-sizing: border-box;
}

/* Sprungmarken zu den Jahrzehnten */
.saisonliste > .dekaden {
    grid-column: 1 / -1;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: 10px;

    margin-bottom: 6px;
}

.saisonliste > .dekaden a {
    display: inline-block;

    padding: 9px 20px;

    color: var(--nav-color);

    border: 2px solid var(--nav-color);
    border-radius: 999px;

    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.saisonliste > .dekaden a:hover {
    background-color: var(--nav-color);
    color: #ffffff;
}

/* Überschrift eines Jahrzehnts mit Linien links und rechts */
.saisonliste > .dekade {
    grid-column: 1 / -1;

    display: flex;
    align-items: center;

    gap: 20px;

    margin: 30px 0 0 0;

    color: var(--heading-color);

    font-size: 34px;
    line-height: 1.2;
    text-align: center;

    scroll-margin-top: 16px;
}

.saisonliste > .dekade::before,
.saisonliste > .dekade::after {
    content: "";

    flex: 1;

    height: 4px;

    background-color: var(--accent-color);

    border-radius: 2px;
}

/* Karte einer Saison */
.saisonliste > .ce_text {
    display: flex;
    flex-direction: column;

    padding: 22px 22px 20px 22px;

    background-color: var(--card-bg);

    border-top: 4px solid var(--accent-color);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-small);

    text-align: left;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.saisonliste > .ce_text:hover {
    transform: translateY(-4px);

    border-top-color: var(--nav-color);

    box-shadow: var(--shadow-medium);
}

/* Saison und Jahr */
.saisonliste > .ce_text h3 {
    margin: 0 0 10px 0;

    color: var(--accent-color);

    font-size: 14px;
    line-height: 1.3;
    letter-spacing: 2px;
    text-align: left;
    text-transform: uppercase;
}

.saisonliste > .ce_text p {
    margin: 0;

    text-align: left;
}

/* Motto */
.saisonliste > .ce_text p:first-of-type {
    margin-bottom: 0;

    color: #222222;

    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
}

@media only screen and (max-width: 800px) {

    .saisonliste {
        gap: 18px;

        padding: 0 16px;
    }

    .saisonliste > .dekade {
        gap: 14px;

        font-size: 28px;
    }
}


/*------------------------------------------------------------------------------
    6.9 Tanzgruppen (Abschnitte mit Bild, Text und optionalen Zusatzbildern)

    Aufbau in Contao (Seite "Tanzgruppen"), von oben nach unten:
    1. Überschrift der Seite und kurzer Einleitungstext (bleiben)
    2. HTML-Element mit   <div class="gruppen">
    3. pro Gruppe ein Text-Element
         Überschrift (h2):  Name der Gruppe
         Bild:              links oder rechts vom Text (oder oberhalb)
         Text:              wie bisher
    4. OPTIONAL direkt unter einem Text-Element ein Galerie-Element mit
       weiteren Bildern der Gruppe. Es erscheint als Bildleiste unter dem
       Abschnitt; ein Klick öffnet das Bildfenster (galerie.js).
    5. zuletzt ein HTML-Element mit   </div>
------------------------------------------------------------------------------*/

.gruppen {
    max-width: 1100px;

    margin: 40px auto 70px auto;
    padding: 0 30px;

    box-sizing: border-box;
}

/* Abschnitt einer Gruppe */
.gruppen > .ce_text {
    position: relative;

    display: flow-root;

    margin: 0 0 40px 0;
    padding: 32px;

    overflow: hidden;

    box-sizing: border-box;

    background-color: var(--card-bg);
    color: #333333;

    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-small);

    font-size: 17px;
    line-height: 1.7;
    text-align: left;

    z-index: 1;
}

/* Name der Gruppe mit grünem Strich */
.gruppen > .ce_text h2 {
    position: relative;

    margin: 0 0 22px 0;
    padding-bottom: 14px;

    color: var(--heading-color);

    font-size: 34px;
    line-height: 1.15;
    text-align: left;
}

.gruppen > .ce_text h2::after {
    content: "";

    position: absolute;

    bottom: 0;
    left: 0;

    width: 64px;
    height: 4px;

    background-color: var(--accent-color);

    border-radius: 2px;
}

/* Bild links (Standard); "rechts" in Contao stellt es nach rechts */
.gruppen > .ce_text figure,
.gruppen > .ce_text .image_container {
    float: left;

    width: 42%;

    /* !important: überstimmt einen in Contao eingestellten "Bildabstand" */
    margin: 4px 32px 16px 0 !important;
}

.gruppen > .ce_text figure.float_right,
.gruppen > .ce_text .image_container.float_right {
    float: right;

    margin: 4px 0 16px 32px !important;
}

.gruppen > .ce_text img {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 4 / 3;

    object-fit: cover;
    object-position: 50% 30%;

    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

/* Der Text bleibt als Spalte neben dem Bild */
.gruppen > .ce_text p,
.gruppen > .ce_text ul,
.gruppen > .ce_text ol {
    display: flow-root;

    margin: 0 0 16px 0;
}

.gruppen > .ce_text > :last-child {
    margin-bottom: 0;
}

.gruppen > .ce_text ul,
.gruppen > .ce_text ol {
    padding: 0 0 0 24px;

    list-style-position: outside;
}

.gruppen > .ce_text ul {
    list-style-type: disc;
}

.gruppen > .ce_text li {
    margin: 0 0 8px 0;
    padding: 0;
}

.gruppen > .ce_text li::marker {
    color: var(--accent-color);
}

.gruppen > .ce_text a {
    color: var(--nav-color);

    font-weight: 700;
}


/* Zusatzbilder: Bildleiste, die unter dem Abschnitt hervorschaut */
.gruppen > .ce_text:has(+ .ce_gallery) {
    margin-bottom: 0;
}

.gruppen > .ce_gallery {
    margin: -16px 0 40px 0;
    padding: 34px 32px 22px 32px;

    box-sizing: border-box;

    background-color: var(--light-bg);

    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-small);
}

.gruppen > .ce_gallery h2 {
    margin: 0 0 14px 0;

    color: var(--accent-color);

    font-size: 14px;
    line-height: 1.3;
    letter-spacing: 2px;
    text-align: left;
    text-transform: uppercase;
}

.gruppen > .ce_gallery ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));

    gap: 10px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.gruppen > .ce_gallery li {
    float: none !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    cursor: pointer;
}

.gruppen > .ce_gallery .image_container {
    margin: 0;

    overflow: hidden;

    aspect-ratio: 4 / 3;

    border-radius: 8px;
}

.gruppen > .ce_gallery .image_container img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.3s ease;
}

.gruppen > .ce_gallery li:hover img {
    transform: scale(1.07);
}

.gruppen > .ce_gallery .pagination {
    display: none;
}

@media only screen and (max-width: 800px) {

    .gruppen {
        padding: 0 16px;
    }

    .gruppen > .ce_text {
        margin-bottom: 28px;
        padding: 22px;

        font-size: 16px;
    }

    .gruppen > .ce_text h2 {
        margin-bottom: 18px;

        font-size: 28px;
    }

    .gruppen > .ce_text figure,
    .gruppen > .ce_text .image_container,
    .gruppen > .ce_text figure.float_right,
    .gruppen > .ce_text .image_container.float_right {
        float: none;

        width: 100%;
        max-width: 100%;

        margin: 0 0 20px 0 !important;
        padding: 0;
    }

    .gruppen > .ce_text img {
        margin: 0;

        max-width: 100%;
    }

    .gruppen > .ce_gallery {
        margin-bottom: 28px;
        padding: 30px 22px 18px 22px;
    }
}


/*------------------------------------------------------------------------------
    6.10 Über Uns (Vereinsgeschichte und Präsidenten)

    Aufbau in Contao (Seite "Über Uns"):
    1. Überschrift der Seite (bleibt)
    2. ein HTML-Element mit dem kompletten Inhalt (ueber-uns.txt)

    Chronik:      <div class="chronik"> mit Karten (h3 = Jahr, danach Absätze)
    Präsidenten:  <div class="praesidenten"> mit Karten, der AKTUELLE zuerst
                  (data-nr = Nummer im Kreis, h3 = Nummer als Text,
                  1. Absatz = Name, 2. Absatz = Amtszeit)
    Foto später:  direkt nach der h3 einer Karte einfügen:
                  <figure class="image_container"><img src="..." alt="Name"></figure>
                  Dann ersetzt es automatisch die Nummer im Kreis.
------------------------------------------------------------------------------*/

.ueberuns {
    max-width: 1100px;

    margin: 40px auto 70px auto;
    padding: 0 30px;

    box-sizing: border-box;
}

/* Abschnittsüberschrift mit Linien links und rechts */
.ueberuns > h2.abschnitt {
    display: flex;
    align-items: center;

    gap: 20px;

    margin: 50px 0 28px 0;

    color: var(--heading-color);

    font-size: 34px;
    line-height: 1.2;
    text-align: center;
}

.ueberuns > h2.abschnitt:first-child {
    margin-top: 10px;
}

.ueberuns > h2.abschnitt::before,
.ueberuns > h2.abschnitt::after {
    content: "";

    flex: 1;

    height: 4px;

    background-color: var(--accent-color);

    border-radius: 2px;
}

.ueberuns > .abschnitt-text {
    max-width: 760px;

    margin: 0 auto 10px auto;

    color: #444444;

    font-size: 18px;
    line-height: 1.7;
    text-align: center;
}


/*------------------------------------------------------------------------------
    Chronik: Karten an einer Linie
------------------------------------------------------------------------------*/

.chronik {
    position: relative;

    max-width: 820px;

    margin: 0 auto;
    padding-left: 46px;
}

.chronik::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 14px;

    width: 4px;

    background: linear-gradient(to bottom, var(--nav-color), var(--accent-color));

    border-radius: 2px;
}

.chronik > .ce_text {
    position: relative;

    margin: 0 0 28px 0;
    padding: 24px 28px 26px 28px;

    /* Contao setzt bei "block" overflow:hidden; der Punkt und die Linie
       außerhalb der Karte würden sonst abgeschnitten */
    overflow: visible !important;

    box-sizing: border-box;

    background-color: var(--card-bg);
    color: #333333;

    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-small);

    font-size: 18px;
    line-height: 1.7;
    text-align: left;
}

.chronik > .ce_text:last-child {
    margin-bottom: 0;
}

/* Jahreszahl */
.chronik > .ce_text h3 {
    margin: 0 0 10px 0;

    color: var(--heading-color);

    font-size: 36px;
    font-weight: 800;
    line-height: 1.1;
    text-align: left;
}

.chronik > .ce_text p {
    margin: 0 0 14px 0;
}

.chronik > .ce_text p:last-child {
    margin-bottom: 0;
}

/* Punkt auf der Linie und Verbindung zur Karte */
.chronik > .ce_text::before {
    content: "";

    position: absolute;

    top: 31px;
    left: -46px;

    width: 18px;
    height: 18px;

    box-sizing: border-box;

    background-color: var(--nav-color);

    border: 4px solid #ffffff;
    border-radius: 50%;

    box-shadow: 0 0 0 3px var(--nav-color);
}

.chronik > .ce_text::after {
    content: "";

    position: absolute;

    top: 38px;
    left: -29px;

    width: 29px;
    height: 3px;

    background-color: var(--nav-color);
}


/*------------------------------------------------------------------------------
    Präsidenten: Karten mit rundem Bild (ohne Foto zeigt der Kreis die Nummer)
------------------------------------------------------------------------------*/

.praesidenten {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));

    gap: 22px;

    margin-top: 30px;
}

.praesidenten > .ce_text {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 28px 18px 24px 18px;

    box-sizing: border-box;

    background-color: var(--card-bg);

    border-top: 4px solid var(--accent-color);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-small);

    text-align: center;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.praesidenten > .ce_text:hover {
    transform: translateY(-4px);

    box-shadow: var(--shadow-medium);
}

/* Platzhalter: Kreis mit der Nummer (steht als data-nr an der Karte) */
.praesidenten > .ce_text::before {
    content: attr(data-nr);

    display: flex;
    align-items: center;
    justify-content: center;

    width: 112px;
    height: 112px;

    margin-bottom: 16px;

    background: linear-gradient(135deg, var(--nav-color), #e8742a);
    color: #ffffff;

    border-radius: 50%;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);

    font-size: 46px;
    font-weight: 800;
    line-height: 1;
}

/* Mit Foto: das Foto ersetzt den Kreis */
.praesidenten > .ce_text:has(figure)::before {
    display: none;
}

.praesidenten > .ce_text figure,
.praesidenten > .ce_text .image_container {
    order: -1;

    float: none;

    width: 112px;
    height: 112px;

    margin: 0 0 16px 0 !important;

    overflow: hidden;

    border-radius: 50%;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.praesidenten > .ce_text img {
    display: block;

    width: 100%;
    height: 100%;
    max-width: none;

    object-fit: cover;
    object-position: 50% 25%;
}

.praesidenten > .ce_text h3 {
    margin: 0 0 6px 0;

    color: var(--accent-color);

    font-size: 13px;
    line-height: 1.3;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
}

.praesidenten > .ce_text p {
    margin: 0;

    text-align: center;
}

.praesidenten > .ce_text p:first-of-type {
    color: var(--heading-color);

    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
}

.praesidenten > .ce_text p:nth-of-type(2) {
    margin-top: 8px;

    color: #666666;

    font-size: 16px;
}

/* Der erste Eintrag ist der aktuelle Präsident */
.praesidenten > .ce_text:first-child::after {
    content: "Aktuell";

    position: absolute;

    top: 12px;
    right: 12px;

    padding: 4px 11px;

    background-color: var(--nav-color);
    color: #ffffff;

    border-radius: 999px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

@media only screen and (max-width: 800px) {

    .ueberuns {
        padding: 0 16px;
    }

    .ueberuns > h2.abschnitt {
        gap: 14px;

        font-size: 28px;
    }

    .chronik {
        padding-left: 38px;
    }

    .chronik::before {
        left: 10px;
    }

    .chronik > .ce_text {
        padding: 20px 20px 22px 20px;

        font-size: 17px;
    }

    .chronik > .ce_text h3 {
        font-size: 30px;
    }

    .chronik > .ce_text::before {
        top: 27px;
        left: -37px;
    }

    .chronik > .ce_text::after {
        top: 34px;
        left: -20px;

        width: 20px;
    }

    .praesidenten {
        grid-template-columns: repeat(2, 1fr);

        gap: 14px;
    }

    .praesidenten > .ce_text {
        padding: 22px 10px 20px 10px;
    }

    .praesidenten > .ce_text::before,
    .praesidenten > .ce_text figure,
    .praesidenten > .ce_text .image_container {
        width: 88px;
        height: 88px;
    }

    .praesidenten > .ce_text::before {
        font-size: 36px;
    }

    .praesidenten > .ce_text p:first-of-type {
        font-size: 18px;
    }
}


/*==============================================================================
    07. VERANSTALTUNGEN
    Die .event-* Klassen gelten für ALLE Veranstaltungsseiten gleich
    (Sommerbeat, Trachtengaudi, ...). Eine neue Veranstaltung braucht
    kein neues CSS: einfach das gleiche HTML mit den gleichen Klassen
    verwenden und nur Texte, Bild und Zahlen austauschen.
    Nur wenn eine Veranstaltung bewusst anders aussehen soll, kommt eine
    Sonderregel hinter 7.7, z. B. ".event-trachtengaudi { ... }".
==============================================================================*/


/*------------------------------------------------------------------------------
    7.1 Alte Veranstaltungsliste (prüfen, ob noch im Einsatz)
------------------------------------------------------------------------------*/

.event_list_item p {
    margin: 1px;

    font-size: 1em;
}

.event_list_item h2 {
    margin: 1px;
}

.va-liste {
    margin: 0.5em;
    padding: 0.1em;

    text-align: center;
}

.va-liste .more {
    visibility: hidden;

    margin-top: 0;
}

.va-liste [class*="layout_latest arc_2 block"] {
    margin: 5px;

    background-color: var(--va-color);

    box-shadow:
        0 0 5px 4px var(--va-color),
        0 0 5px 10px var(--bg-color);

    text-align: left;
}


/*------------------------------------------------------------------------------
    7.2 Event-Hero

    HINWEIS ZU clamp(): clamp(kleinster Wert, fließender Wert, größter Wert)
    Der kleinste Wert gilt auf dem Handy, der größte am Desktop, dazwischen
    wächst der Wert mit der Bildschirmbreite. Deshalb brauchen die
    Veranstaltungsseiten (fast) keine eigenen Mobil-Regeln mehr.
------------------------------------------------------------------------------*/

.event-hero {
    position: relative;

    width: 100%;
    height: clamp(450px, 45vw + 50px, 600px);

    overflow: hidden;
}

.event-hero-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.event-hero-image figure,
.event-hero-image .image_container {
    height: 100%;

    margin: 0;
}

.event-hero-image img {
    display: block;

    width: 100%;
    height: 100%;
    max-width: none;

    object-fit: cover;
    object-position: center;
}

/* .event-hero-overlay: siehe 5.2 (gemeinsam mit .hero-overlay) */

.event-hero-content {
    position: relative;

    max-width: 750px;

    /* oben | rechts | unten | links */
    margin: 0 clamp(20px, 2.5vw + 5px, 30px) clamp(30px, 5vw - 10px, 60px) clamp(20px, 20.5vw - 175px, 8%);

    color: #ffffff;

    text-align: left;

    z-index: 2;
}

.event-hero-kicker {
    margin-bottom: 12px;

    color: #ffffff;

    font-size: clamp(11px, 0.8vw + 5px, 15px);
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.event-hero h1 {
    margin: 0 0 15px 0;

    color: #ffffff;

    font-size: clamp(2.4rem, 6vw, 4.5rem);
    font-weight: 800;
    line-height: 1;
    text-align: left;
}

.event-hero-date {
    margin: 0 0 5px 0;

    color: #ffffff;

    font-size: clamp(20px, 2vw + 3px, 28px);
    font-weight: 700;
}

.event-hero-location {
    margin: 0;

    color: #ffffff;

    font-size: clamp(16px, 0.5vw + 12px, 19px);
}


/*------------------------------------------------------------------------------
    7.3 Intro
------------------------------------------------------------------------------*/

.event-intro {
    max-width: 1000px;

    margin: clamp(50px, 5vw + 20px, 70px) auto clamp(60px, 5vw + 30px, 80px) auto;
    padding: 0 clamp(20px, 2.5vw + 5px, 30px);

    text-align: center;
}

.event-intro h2 {
    margin: 0 0 clamp(35px, 3.75vw + 12.5px, 50px) 0;

    color: var(--nav-color);

    font-size: clamp(28px, 3vw + 8px, 38px);
    font-weight: 800;
    line-height: 1.2;
}

.event-intro p {
    max-width: 850px;

    margin: 0 auto 18px auto;

    color: #444444;

    font-size: clamp(16px, 0.9vw + 10px, 19px);
    line-height: 1.7;
}


/*------------------------------------------------------------------------------
    7.4 Highlights
------------------------------------------------------------------------------*/

.event-highlights {
    max-width: 1200px;

    margin: clamp(50px, 7.5vw - 15px, 90px) auto;
    padding: 0 clamp(20px, 2.5vw - 5px, 30px);
}

/* Überschrift mit Linien links und rechts.
   Wird auch für den Informationsbereich (7.5) verwendet, dort in Weiß. */
.event-section-heading,
.event-info-heading {
    --heading-line: var(--accent-color);
    --heading-text: var(--nav-color);

    display: flex;
    align-items: center;

    gap: clamp(8px, 3.25vw - 20.5px, 25px);
}

.event-section-heading {
    margin-bottom: 20px;
}

.event-section-heading span,
.event-info-heading span {
    flex: 1;

    height: clamp(3px, 0.25vw + 0.5px, 4px);

    background-color: var(--heading-line);
}

.event-section-heading h2,
.event-info-heading h2 {
    margin: 0;

    color: var(--heading-text);

    font-size: clamp(24px, 2vw + 8px, 36px);
    line-height: 1.2;
    text-align: center;
}

/* Einleitung und Abschlusstext */
.event-highlights-intro,
.event-highlights-footer {
    color: #444444;

    font-size: clamp(16px, 0.5vw + 11px, 18px);
    line-height: 1.7;
    text-align: center;
}

.event-highlights-intro {
    max-width: 800px;

    margin: 0 auto 45px auto;
}

.event-highlights-footer {
    max-width: 850px;

    margin: 45px auto 0 auto;
}

.event-highlights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: clamp(18px, 1.75vw + 0.5px, 25px);
}

.event-highlight {
    padding: clamp(28px, 1.75vw + 10.5px, 35px) clamp(22px, 0.75vw + 14.5px, 25px);

    background-color: #ffffff;

    border-radius: 12px;
    box-shadow: var(--shadow-small);

    text-align: center;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.event-highlight:hover {
    transform: translateY(-5px);

    box-shadow: var(--shadow-medium);
}

.event-highlight-icon {
    margin-bottom: 15px;

    font-size: 42px;
    line-height: 1;
}

.event-highlight h3 {
    margin: 0 0 12px 0;

    color: #222222;

    font-size: 23px;
}

.event-highlight p {
    margin: 0;

    color: #555555;

    font-size: 16px;
    line-height: 1.6;
}


/*------------------------------------------------------------------------------
    7.5 Informationen (roter Bereich)
    Die Überschrift nutzt die gemeinsame Regel aus 7.4, hier nur in Weiß.
------------------------------------------------------------------------------*/

.event-info {
    margin: clamp(50px, 7.5vw - 5px, 100px) 0 0 0;
    padding: clamp(40px, 5vw, 70px) clamp(15px, 2.5vw - 5px, 30px) clamp(50px, 5vw + 10px, 80px);

    background-color: var(--nav-color);
}

.event-info-heading {
    --heading-line: #ffffff;
    --heading-text: #ffffff;

    max-width: 1200px;

    margin: 0 auto clamp(25px, 2.5vw + 5px, 40px) auto;
}

.event-info-box {
    display: grid;
    grid-template-columns: 1.5fr 1fr;

    max-width: 1100px;

    margin: 0 auto;

    overflow: hidden;

    background-color: #ffffff;

    border-radius: 14px;
    box-shadow: var(--shadow-large);
}

.event-info-main {
    padding: clamp(25px, 3.75vw - 7.5px, 45px) clamp(20px, 5vw - 25px, 45px);
}

.event-info-main h3 {
    margin: 0 0 clamp(25px, 1.25vw + 12.5px, 30px) 0;

    color: #222222;

    font-size: clamp(22px, 1.25vw + 12.5px, 30px);
}

.event-info-item {
    display: flex;
    align-items: flex-start;

    gap: clamp(10px, 1.5vw - 3px, 18px);

    margin-bottom: clamp(20px, 1vw + 10px, 24px);
}

.event-info-icon {
    flex-shrink: 0;

    width: 1.35em;

    font-size: clamp(22px, 1vw + 14px, 28px);
    text-align: center;
}

.event-info-item strong {
    display: block;

    color: #222222;

    font-size: clamp(15px, 0.5vw + 11px, 18px);
}

.event-info-item p {
    margin: 4px 0 0 0;

    color: #555555;

    font-size: clamp(14px, 0.3vw + 12px, 16px);
    line-height: 1.5;
}


/*------------------------------------------------------------------------------
    7.6 Ticketbereich
------------------------------------------------------------------------------*/

.event-ticket {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: clamp(30px, 2.5vw + 10px, 45px) clamp(20px, 5vw - 25px, 45px);

    background-color: var(--accent-color);
    color: #ffffff;

    text-align: center;
}

.event-ticket-label {
    margin-bottom: 25px;

    color: #ffffff;

    font-size: 17px;
    font-weight: 700;
    letter-spacing: 2px;
}

.event-ticket-price {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.event-ticket-price strong {
    color: #ffffff;

    font-size: clamp(38px, 1.2vw + 30px, 48px);
    line-height: 1;
}

.event-ticket-price span {
    margin-top: 8px;

    color: #ffffff;

    font-size: 18px;
    font-weight: 700;
}

.event-ticket p {
    margin: 8px 0 20px 0;

    color: #ffffff;

    font-size: 15px;
}

.event-ticket-divider {
    width: 70%;
    height: 1px;

    margin: 5px 0 25px 0;

    background-color: rgba(255, 255, 255, 0.5);
}


/*------------------------------------------------------------------------------
    7.7 Umbruch auf eine Spalte (Tablet und Handy)
    Das ist die einzige Mobil-Regel, die die Veranstaltungsseiten noch brauchen.
------------------------------------------------------------------------------*/

@media only screen and (max-width: 1000px) {

    .event-highlights-grid,
    .event-info-box {
        grid-template-columns: 1fr;
    }
}


/*==============================================================================
    08. KALENDER

    Monatsansicht der Veranstaltungen (Contao-Kalendermodul).
    Tage mit Veranstaltung sind hervorgehoben, ein Klick führt zur
    Veranstaltung. Am Computer steht der Titel in der Zelle, am Handy nur
    ein roter Punkt.
==============================================================================*/

.calendar {
    width: calc(100% - 60px);
    max-width: 960px;

    margin: 40px auto 20px auto;
    padding: 22px 22px 26px 22px;

    box-sizing: border-box;

    background-color: var(--card-bg);

    border-collapse: separate;
    border-spacing: 6px;

    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-small);

    table-layout: fixed;
}


/*------------------------------------------------------------------------------
    Kopfzeile: vorheriger Monat · aktueller Monat · nächster Monat
------------------------------------------------------------------------------*/

.calendar th {
    padding: 0;

    font-weight: 700;
    text-align: center;
}

.calendar .head {
    padding: 0 0 14px 0;

    vertical-align: middle;
}

.calendar .head.current {
    color: var(--heading-color);

    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
}

.calendar .head.previous {
    text-align: left;
}

.calendar .head.next {
    text-align: right;
}

.calendar .head a {
    display: inline-block;

    padding: 9px 16px;

    color: var(--nav-color);

    border: 2px solid var(--nav-color);
    border-radius: 999px;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.calendar .head a:hover,
.calendar .head a:focus-visible {
    background-color: var(--nav-color);
    color: #ffffff;
}


/*------------------------------------------------------------------------------
    Wochentage (auf schmalen Bildschirmen als Kürzel: Mo, Di, ...)
------------------------------------------------------------------------------*/

.calendar thead tr + tr th {
    padding: 4px 0 8px 0;

    color: var(--accent-color);

    font-size: 0;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.calendar thead tr + tr th::before {
    font-size: 13px;
    font-weight: 700;
}

.calendar thead tr + tr th:nth-child(1)::before { content: "Mo"; }
.calendar thead tr + tr th:nth-child(2)::before { content: "Di"; }
.calendar thead tr + tr th:nth-child(3)::before { content: "Mi"; }
.calendar thead tr + tr th:nth-child(4)::before { content: "Do"; }
.calendar thead tr + tr th:nth-child(5)::before { content: "Fr"; }
.calendar thead tr + tr th:nth-child(6)::before { content: "Sa"; }
.calendar thead tr + tr th:nth-child(7)::before { content: "So"; }

/* Große Bildschirme: ausgeschriebene Wochentage */
@media only screen and (min-width: 861px) {

    .calendar thead tr + tr th {
        font-size: 13px;
    }

    .calendar thead tr + tr th:nth-child(n)::before {
        content: none;
    }
}


/*------------------------------------------------------------------------------
    Tage
------------------------------------------------------------------------------*/

.calendar td {
    position: relative;

    height: 92px;

    padding: 9px 10px;

    background-color: var(--light-bg);
    color: #333333;

    border-radius: 10px;

    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    vertical-align: top;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

/* Samstag und Sonntag */
.calendar td:nth-child(n+6) {
    background-color: #efefef;
    color: #777777;
}

/* Tage außerhalb des Monats */
.calendar td.empty {
    background-color: transparent;
}

/* Heute */
.calendar td.today {
    color: var(--accent-color);

    box-shadow: inset 0 0 0 2px var(--accent-color);
}

/* Tage mit Veranstaltung */
.calendar td:has(.event) {
    background-color: #fdeceb;
    color: var(--nav-color);
}

.calendar td:has(.event):hover {
    background-color: var(--nav-color);
    color: #ffffff;
}

.calendar .event {
    margin: 8px 0 0 0;
}

.calendar .event a {
    display: block;

    padding: 4px 8px;

    overflow: hidden;

    background-color: var(--nav-color);
    color: #ffffff;

    border-radius: 6px;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;

    /* bis zu zwei Zeilen, lange Wörter werden getrennt */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow-wrap: anywhere;
    hyphens: auto;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.calendar td:has(.event):hover .event a {
    background-color: #ffffff;
    color: var(--nav-color);
}

/* Bei nur einer Veranstaltung ist die ganze Zelle klickbar */
.calendar .event:only-of-type a::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}


/*------------------------------------------------------------------------------
    Handy: kompakter Kalender, Veranstaltungen als Punkt
------------------------------------------------------------------------------*/

@media only screen and (max-width: 700px) {

    .calendar {
        width: calc(100% - 24px);

        padding: 14px 10px 16px 10px;

        border-spacing: 3px;
    }

    .calendar .head.current {
        font-size: 19px;
    }

    /* Nur Pfeile statt Monatsnamen */
    .calendar .head a {
        position: relative;

        width: 40px;
        height: 40px;

        padding: 0;

        font-size: 0;
    }

    .calendar .head a::before {
        position: absolute;

        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        padding-bottom: 3px;

        font-size: 28px;
        line-height: 1;
    }

    .calendar .head.previous a::before {
        content: "\2039";
    }

    .calendar .head.next a::before {
        content: "\203A";
    }

    .calendar td {
        height: 50px;

        padding: 7px 2px;

        border-radius: 8px;

        font-size: 15px;
        text-align: center;
    }

    .calendar .event {
        width: 7px;
        height: 7px;

        margin: 4px auto 0 auto;

        background-color: var(--nav-color);

        border-radius: 50%;

        font-size: 0;
    }

    .calendar .event a {
        display: block;

        width: 100%;
        height: 100%;

        padding: 0;

        background-color: transparent;

        font-size: 0;
    }

    .calendar td:has(.event):hover .event {
        background-color: #ffffff;
    }

    .calendar td:has(.event):hover .event a {
        background-color: transparent;
    }
}


/*------------------------------------------------------------------------------
    8.1 Termin-Fenster (Termin in den eigenen Kalender speichern)
    Wird von termine.js erzeugt, wenn man im Kalender auf einen Termin klickt.
------------------------------------------------------------------------------*/

html.termin-offen {
    overflow: hidden;
}

.termin-overlay {
    position: fixed;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px;

    box-sizing: border-box;

    background-color: rgba(10, 10, 10, 0.6);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;

    z-index: 5000;
}

.termin-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.termin-karte {
    position: relative;

    width: 100%;
    max-width: 480px;
    max-height: 100%;

    padding: 30px 28px 26px 28px;

    overflow-y: auto;
    overscroll-behavior: contain;

    box-sizing: border-box;

    background-color: #ffffff;
    color: #333333;

    border-radius: 16px;
    box-shadow: var(--shadow-large);

    text-align: left;

    transform: translateY(14px);

    transition: transform 0.3s ease;
}

.termin-overlay.is-open .termin-karte {
    transform: none;
}

.termin-schliessen {
    position: absolute;

    top: 12px;
    right: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    margin: 0;
    padding: 0 0 3px 0;

    background-color: #f1f1f1;
    color: #333333;

    border: none;
    border-radius: 50%;

    font-size: 26px;
    line-height: 1;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.termin-schliessen:hover,
.termin-schliessen:focus-visible {
    background-color: var(--nav-color);
    color: #ffffff;
}

.termin-label {
    margin: 0 0 6px 0;

    color: var(--accent-color);

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.termin-titel {
    margin: 0 44px 12px 0;

    color: var(--heading-color);

    font-size: 26px;
    line-height: 1.2;
    text-align: left;
}

.termin-wann {
    margin: 0 0 4px 0;

    color: #222222;

    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
}

.termin-ort {
    margin: 0 0 10px 0;

    font-size: 16px;
    line-height: 1.4;
}

.termin-info {
    margin: 0 0 4px 0;

    color: #666666;

    font-size: 15px;
    line-height: 1.5;
    white-space: pre-line;
}

.termin-speichern {
    margin: 22px 0 4px 0;
    padding-top: 18px;

    color: var(--accent-color);

    border-top: 1px solid #e6e6e6;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.termin-knopf {
    display: flex;
    flex-direction: column;

    gap: 2px;

    margin: 10px 0 0 0;
    padding: 12px 16px;

    box-sizing: border-box;

    background-color: #ffffff;
    color: var(--nav-color);

    border: 2px solid var(--nav-color);
    border-radius: 10px;

    font-size: 16px;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.termin-knopf small {
    color: #666666;

    font-size: 13px;
    font-weight: 400;

    transition: color 0.2s ease;
}

.termin-knopf.empfohlen,
.termin-knopf:hover,
.termin-knopf:focus-visible {
    background-color: var(--nav-color);
    color: #ffffff;
}

.termin-knopf.empfohlen small,
.termin-knopf:hover small,
.termin-knopf:focus-visible small {
    color: rgba(255, 255, 255, 0.85);
}

.termin-mehr {
    display: block;

    margin: 18px 0 0 0;

    color: var(--nav-color);

    font-size: 16px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.termin-mehr:hover {
    text-decoration: underline;
}

/* Handy: Fenster fährt von unten herein */
@media only screen and (max-width: 600px) {

    .termin-overlay {
        align-items: flex-end;

        padding: 0;
    }

    .termin-karte {
        max-width: none;
        max-height: 92%;

        padding: 26px 22px calc(22px + env(safe-area-inset-bottom, 0px)) 22px;

        border-radius: 18px 18px 0 0;

        transform: translateY(40px);
    }

    .termin-titel {
        font-size: 23px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .termin-overlay,
    .termin-karte {
        transition: none;
    }
}


/*==============================================================================
    09. FORMULARE
==============================================================================*/

.form_send {
    border-radius: 4px;
}


/*------------------------------------------------------------------------------
    9.1 Kontaktseite: Einleitung und Hinweis zu Tickets

    Aufbau in Contao (Seite "Kontakt"):
    1. Überschrift (bleibt)
    2. HTML-Element mit dem Inhalt von kontakt-intro.txt
    3. das Formular (bleibt)
------------------------------------------------------------------------------*/

.kontakt-intro {
    max-width: 780px;

    margin: 30px auto 28px auto;
    padding: 0 30px;

    box-sizing: border-box;
}

.kontakt-intro > p {
    margin: 0 0 24px 0;

    color: #444444;

    font-size: 18px;
    line-height: 1.7;
    text-align: center;
}

/* Auffälliger Hinweis */
.hinweis {
    display: flex;
    align-items: flex-start;

    gap: 16px;

    padding: 18px 22px;

    box-sizing: border-box;

    background-color: #fff4f3;

    border: 2px solid var(--nav-color);
    border-radius: var(--radius-medium);

    text-align: left;
}

.hinweis::before {
    content: "!";

    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    background-color: var(--nav-color);
    color: #ffffff;

    border-radius: 50%;

    font-size: 24px;
    font-weight: 800;
    line-height: 1;
}

.hinweis strong {
    display: block;

    margin-bottom: 2px;

    color: var(--nav-color);

    font-size: 18px;
    line-height: 1.3;
}

.hinweis p {
    margin: 0;

    color: #333333;

    font-size: 17px;
    line-height: 1.5;
}


/*------------------------------------------------------------------------------
    9.2 Formular (Karte, Felder, Absenden-Knopf)
------------------------------------------------------------------------------*/

/* Contao setzt bei "block" overflow:hidden; das würde den Schatten abschneiden */
:is(.ce_form, .mod_form) {
    overflow: visible !important;
}

:is(.ce_form, .mod_form) form,
form.contact-form {
    max-width: 720px;

    margin: 0 auto 70px auto;
    padding: 30px;

    box-sizing: border-box;

    background-color: var(--card-bg);

    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-small);

    text-align: left;
}

:is(.ce_form, .mod_form) .widget,
.contact-form .widget {
    margin: 0 0 20px 0;
}

:is(.ce_form, .mod_form) label,
.contact-form label {
    display: block;

    margin: 0 0 8px 0;

    color: #222222;

    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

/* Sternchen bei Pflichtfeldern */
:is(.ce_form, .mod_form) label span.mandatory,
.contact-form label span.mandatory {
    margin-left: 2px;

    color: var(--nav-color);
}

:is(.ce_form, .mod_form) input:not([type="hidden"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
:is(.ce_form, .mod_form) textarea,
:is(.ce_form, .mod_form) select,
.contact-form input:not([type="hidden"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.contact-form textarea,
.contact-form select {
    display: block;

    width: 100%;

    padding: 13px 16px;

    box-sizing: border-box;

    background-color: var(--light-bg);
    color: #222222;

    border: 2px solid #dcdcdc;
    border-radius: 10px;

    font-family: inherit;
    font-size: 17px;
    line-height: 1.4;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

:is(.ce_form, .mod_form) textarea,
.contact-form textarea {
    min-height: 170px;

    resize: vertical;
}

:is(.ce_form, .mod_form) input:focus,
:is(.ce_form, .mod_form) textarea:focus,
:is(.ce_form, .mod_form) select:focus,
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    outline: none;

    background-color: #ffffff;

    border-color: var(--nav-color);
    box-shadow: 0 0 0 4px rgba(218, 37, 28, 0.15);
}

/* Sicherheitsfrage: Frage steht über dem Eingabefeld */
:is(.ce_form, .mod_form) .widget-captcha,
.contact-form .widget-captcha {
    display: flex;
    flex-direction: column;
}

:is(.ce_form, .mod_form) .widget-captcha > label,
.contact-form .widget-captcha > label {
    order: 0;
}

:is(.ce_form, .mod_form) .widget-captcha .captcha_text,
.contact-form .widget-captcha .captcha_text {
    order: 1;

    margin: 0 0 8px 0;

    color: #555555;

    font-size: 15px;
}

:is(.ce_form, .mod_form) .widget-captcha > input,
.contact-form .widget-captcha > input {
    order: 2;
}

/* Erklärungstext innerhalb des Formulars (Formularfeld "Erklärung") */
:is(.ce_form, .mod_form) .explanation,
.contact-form .explanation {
    margin: 0 0 22px 0;

    color: #444444;

    font-size: 17px;
    line-height: 1.6;
}

/* Fehlermeldungen */
:is(.ce_form, .mod_form) p.error,
.contact-form p.error {
    margin: 0 0 6px 0;

    color: #b3140d;

    font-size: 15px;
    font-weight: 700;
}

:is(.ce_form, .mod_form) input.error,
:is(.ce_form, .mod_form) textarea.error,
.contact-form input.error,
.contact-form textarea.error {
    border-color: var(--nav-color);
}

/* Absenden */
:is(.ce_form, .mod_form) .widget-submit,
.contact-form .widget-submit {
    margin: 26px 0 0 0;
}

/* Erinnerung direkt über dem Knopf */
:is(.ce_form, .mod_form) .widget-submit::before,
.contact-form .widget-submit::before {
    content: "Keine Ticketkäufe oder Reservierungen möglich.";

    display: block;

    margin-bottom: 12px;

    color: #666666;

    font-size: 14px;
    text-align: center;
}

:is(.ce_form, .mod_form) button.submit,
:is(.ce_form, .mod_form) input.submit,
.contact-form button.submit,
.contact-form input.submit {
    display: block;

    width: 100%;

    padding: 15px 24px;

    background-color: var(--nav-color);
    color: #ffffff;

    border: none;
    border-radius: 10px;

    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease;
}

:is(.ce_form, .mod_form) button.submit:hover,
:is(.ce_form, .mod_form) input.submit:hover,
.contact-form button.submit:hover,
.contact-form input.submit:hover {
    transform: translateY(-2px);

    background-color: rgb(180, 30, 24);
}

@media only screen and (max-width: 600px) {

    .kontakt-intro {
        padding: 0 12px;
    }

    .hinweis {
        gap: 12px;

        padding: 16px;
    }

    :is(.ce_form, .mod_form) form,
    form.contact-form {
        margin: 0 12px 50px 12px;
        padding: 22px 18px;
    }
}


/*==============================================================================
    10. AKKORDEONS
==============================================================================*/

.ce_accordionStart .toggler {
    margin: 20px;

    color: #000000;

    font-size: 30px;
    text-align: center;

    cursor: pointer;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

/* Statt Schriftgröße 40px (Inhalt sprang): Farbe + leichte Vergrößerung */
.ce_accordionStart .toggler:hover {
    color: var(--nav-color);

    transform: scale(1.08);
}

.saisons .toggler {
    width: 200px;

    border: none;

    font-size: 18px;
}

/* Trennlinie */
.ce_accordionStop {
    width: 80%;
    height: 4px;

    margin: 2rem auto;

    background-color: var(--accent-color);

    border: none;
    border-radius: 2px;
}


/*==============================================================================
    11. FOOTER
==============================================================================*/

footer ul {
    display: flex;
    flex-direction: row;
}

footer li {
    margin: 10px;
}

footer nav li {
    text-align: right;
}

footer nav a,
footer [class*="active"] .active {
    color: #000000;

    border: none;

    text-align: right;
    text-decoration: none;
}


/*==============================================================================
    12. RESPONSIVE
==============================================================================*/


/******************************************************************************
    12.1 TABLET / MOBILES MENÜ
    max-width: 1000px
******************************************************************************/

@media only screen and (max-width: 1000px) {

    body {
        font-size: 16px;
    }


    /*--------------------------------------------------------------------------
        Desktop-Navigation aus, mobile Navigation an
    --------------------------------------------------------------------------*/

    .navmain {
        display: none;
    }

    .mobile-nav {
        display: block;
    }


    /*--------------------------------------------------------------------------
        Mobiler Header (Hamburger + Logo)
    --------------------------------------------------------------------------*/

    /* Kopfzeile bleibt beim Scrollen fest oben stehen (wie am Desktop) */
    #header {
        position: fixed;

        top: 0;
        left: 0;

        width: 100%;
        height: 70px !important;
        min-height: 70px !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box;

        background-color: #ffffff;

        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

        z-index: 2000;
    }

    /* Platz für die feste Kopfzeile, damit nichts darunter verschwindet */
    body {
        padding-top: 70px;
    }

    .mobile-nav {
        position: absolute;

        top: 0;
        left: 0;

        width: 100%;
        height: 70px;

        margin: 0;
        padding: 0;

        background-color: #ffffff;

        box-sizing: border-box;

        z-index: 2000;
    }

    /* Hamburger */
    .mobile-nav-toggle {
        position: absolute;

        top: 13px;
        left: 15px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 5px;

        width: 44px;
        height: 44px;

        margin: 0;
        padding: 8px;

        background: transparent;

        border: none;

        cursor: pointer;

        z-index: 2003;
    }

    .mobile-nav-toggle span {
        display: block;

        width: 27px;
        height: 3px;

        background-color: #222222;

        border-radius: 2px;

        transition:
            transform 0.25s ease,
            opacity 0.25s ease,
            background-color 0.25s ease;
    }

    /* Logo im mobilen Header */
    #header .logo_kcw {
        position: absolute !important;

        top: 10px !important;
        left: 72px !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        transition: left 0.3s ease;

        z-index: 2001;
    }

    #header .logo_kcw img {
        display: block !important;

        width: 170px !important;
        max-width: 170px !important;
        height: auto;

        margin: 0 !important;
        padding: 0 !important;

        transition: width 0.3s ease;
    }


    /*--------------------------------------------------------------------------
        Abdunklung
    --------------------------------------------------------------------------*/

    .mobile-nav-overlay {
        position: fixed;

        top: 0;
        left: 0;

        display: block;

        width: 100%;
        height: 100vh;

        background: rgba(0, 0, 0, 0.45);

        opacity: 0;
        visibility: hidden;

        transition:
            opacity 0.3s ease,
            visibility 0.3s ease;

        z-index: 1998;
    }


    /*--------------------------------------------------------------------------
        Off-Canvas-Menü
    --------------------------------------------------------------------------*/

    .mobile-nav-drawer {
        position: fixed;

        top: 0;
        left: 0;

        display: block;

        width: 75vw;
        max-width: 380px;
        height: 100vh;

        margin: 0;
        padding: 0;

        background-color: #222222;

        box-sizing: border-box;

        transform: translateX(-100%);
        transition: transform 0.3s ease;

        overflow-y: auto;

        z-index: 2002;
    }

    .mobile-nav-header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        height: 70px;

        padding: 0 18px 0 66px;

        box-sizing: border-box;

        background-color: var(--nav-color);
    }

    .mobile-nav-header span {
        color: #ffffff;

        font-size: 18px;
        font-weight: 700;
        letter-spacing: 2px;
    }

    .mobile-nav-close {
        width: 42px;
        height: 42px;

        padding: 0;

        background: transparent;

        border: none;

        color: #ffffff;

        font-size: 38px;
        font-weight: 300;
        line-height: 1;

        cursor: pointer;
    }

    .mobile-nav-list {
        margin: 0;
        padding: 20px 25px;

        list-style: none;
    }

    .mobile-nav-list li {
        margin: 0;
        padding: 0;
    }

    .mobile-nav-list a {
        position: relative;

        display: block;

        padding: 17px 0;

        border-bottom: 1px solid rgba(255, 255, 255, 0.18);

        color: #ffffff;

        font-size: 18px;
        font-weight: 500;
        text-decoration: none;

        transition:
            padding-left 0.2s ease,
            color 0.2s ease;
    }

    .mobile-nav-list a:hover {
        padding-left: 8px;

        color: #ffffff;
    }


    /*--------------------------------------------------------------------------
        Menü geöffnet (Klassen werden per JavaScript gesetzt)
    --------------------------------------------------------------------------*/

    .mobile-nav.is-open .mobile-nav-drawer {
        transform: translateX(0);
    }

    .mobile-nav.is-open .mobile-nav-overlay {
        opacity: 1;
        visibility: visible;
    }

    /* Hamburger → X */
    .mobile-nav.is-open .mobile-nav-toggle span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .mobile-nav.is-open .mobile-nav-toggle span:nth-child(2) {
        opacity: 0;
    }

    .mobile-nav.is-open .mobile-nav-toggle span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Menü offen: Kreuz weiß, Logo rutscht neben "MENÜ" nach rechts */
    .mobile-nav.is-open .mobile-nav-toggle span {
        background-color: #ffffff;
    }

    #header:has(.mobile-nav.is-open) .logo_kcw {
        left: 136px !important;
    }

    #header:has(.mobile-nav.is-open) .logo_kcw img {
        width: clamp(100px, calc(75vw - 150px), 150px) !important;
        max-width: 150px !important;
    }

    /* Seite hinter dem offenen Menü nicht scrollen (auch auf iPhone/Safari) */
    body.mobile-menu-open {
        overflow: hidden;
    }

    html:has(.mobile-nav.is-open) {
        overflow: hidden;
    }

    .mobile-nav-overlay {
        touch-action: none;
    }

    .mobile-nav-drawer {
        overscroll-behavior: contain;
    }


    /*--------------------------------------------------------------------------
        Startseite
    --------------------------------------------------------------------------*/

    #startseite {
        padding: 0 15px 40px 15px;
    }

    #startseite h1 {
        margin-top: 35px;

        font-size: 32px;
    }

    #startseite h2 {
        margin-top: 40px;

        font-size: 28px;
    }

    #startseite .ce_image:first-of-type {
        margin-top: 20px;
        margin-bottom: 45px;

        border-radius: 12px;
    }

    #startseite .ce_image:first-of-type img {
        border-radius: 12px;
    }

    .hero {
        height: 500px;
    }

    .hero img {
        width: 115%;
    }

    .hero-content {
        max-width: 600px;

        margin-left: 30px;
        margin-right: 30px;
        margin-bottom: 40px;
    }

    .hero-kicker {
        margin-bottom: 10px;

        font-size: 14px;
        letter-spacing: 2px;
    }

    .hero h1 {
        margin-bottom: 22px;

        font-size: 2.2rem;
        line-height: 1.1;
    }

    .hero-button {
        padding: 12px 20px;

        font-size: 15px;
    }
}


/******************************************************************************
    12.2 TABLET
    max-width: 800px
******************************************************************************/

@media only screen and (max-width: 800px) {

    .aktuelles {
        padding: 0 20px;
    }

    .aktuelles-grid {
        grid-template-columns: 1fr;
    }

    .terminliste {
        padding: 0 20px;
    }
}


/******************************************************************************
    12.3 SMARTPHONE
    max-width: 600px
******************************************************************************/

@media only screen and (max-width: 600px) {


    /*--------------------------------------------------------------------------
        Mobile Navigation
    --------------------------------------------------------------------------*/

    #header {
        height: 65px !important;
        min-height: 65px !important;
    }

    body {
        padding-top: 65px;
    }

    .mobile-nav {
        height: 65px;
    }

    .mobile-nav-toggle {
        top: 10px;
        left: 15px;
    }

    #header .logo_kcw {
        top: 8px !important;
        left: 68px !important;
    }

    #header .logo_kcw img {
        width: 160px !important;
        max-width: 160px !important;
    }

    .mobile-nav-header {
        height: 65px;
    }

    .mobile-nav-list {
        padding: 15px 20px;
    }

    .mobile-nav-list a {
        padding: 15px 0;

        font-size: 17px;
    }


    /*--------------------------------------------------------------------------
        Startseite
    --------------------------------------------------------------------------*/

    #startseite {
        padding: 0 10px 40px 10px;
    }

    #startseite h1 {
        font-size: 28px;
    }

    #startseite h2 {
        font-size: 24px;
    }

    .hero {
        height: 450px;
    }

    .hero img {
        width: 125%;
    }

    .hero-content {
        margin-left: 20px;
        margin-right: 20px;
        margin-bottom: 30px;
    }

    .hero-kicker {
        margin-bottom: 8px;

        font-size: 12px;
        letter-spacing: 1.5px;
    }

    .hero h1 {
        margin-bottom: 18px;

        font-size: 1.4rem;
        line-height: 1.15;
    }

    .hero-button {
        padding: 11px 18px;

        font-size: 14px;
    }

    /* Aktuelles */
    .aktuelles {
        margin: 60px auto;
    }

    .aktuelles-grid {
        gap: 25px;
    }

    .section-heading {
        gap: 10px;
    }

    .section-heading h2 {
        font-size: 30px;
    }

    /* Termine */
    .terminliste {
        margin: 60px auto;
    }

    .terminliste > h2 {
        margin-bottom: 30px;

        font-size: 30px;
    }

    .terminliste .event {
        margin-bottom: 15px;
        padding: 18px;
    }

    .terminliste .event h2 {
        font-size: 21px;
    }

    .terminliste .event p {
        font-size: 15px;
        line-height: 1.4;
    }
}