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 Tanzgruppen & Der Verein
        6.2 Goldstückchen
        6.3 Vorstand
        6.4 Sponsoren
        6.5 Galerien
    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
    09. FORMULARE
    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;
}


/*==============================================================================
    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;
}


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


/*------------------------------------------------------------------------------
    6.1 Tanzgruppen & Der Verein (identische Link-Buttons)
------------------------------------------------------------------------------*/

.site-tanzgruppen #main {
    font-size: 20px;

    text-align: center;
}

#tanzgruppen li,
#der-verein li {
    margin: 14px;

    list-style: none;
}

#tanzgruppen li a,
#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 */
#tanzgruppen li a:hover,
#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;
}


/*==============================================================================
    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
==============================================================================*/

.calendar {
    position: static;

    margin: 20px auto 0 auto;
    padding: 20px;

    background-color: rgb(196, 196, 196);

    border-collapse: separate;
    border-spacing: 2px 4px;
    border-color: #000000;

    table-layout: fixed;
}

.calendar thead a:link,
.calendar thead a:visited {
    color: #000000;

    text-decoration: none;
}

/* Monatsnavigation (vorher ohne Wirkung wegen fehlender Punkte im Selektor) */
.calendar .head.previous,
.calendar .head.current,
.calendar .head.next {
    font-size: 24px;
    font-weight: bold;
}

.calendar td {
    width: 150px;
    height: 60px;

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

    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

.calendar .empty {
    background-color: #ffffff;

    border: #000000;
}


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

.form_send {
    border-radius: 4px;
}


/*==============================================================================
    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;
    }


    /*--------------------------------------------------------------------------
        Kalender (vorher feste 150px pro Zelle = 1050px Breite)
    --------------------------------------------------------------------------*/

    .calendar {
        padding: 8px;
    }

    .calendar td {
        width: auto;
        height: 44px;

        font-size: 14px;
    }
}