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

/* -------------------------------------------------------------------------
   1. Variablen & Grundlagen
   ------------------------------------------------------------------------- */
:root {
  --color-bg: #ffffff;
  --color-surface: #f7f7f8;
  --color-surface-alt: #ececee;
  --color-border: #e2e2e6;
  --color-text: #1c1c1e;
  --color-text-muted: #6b6b70;

  --color-nav-bg: #0a0a0a;
  --color-nav-text: #ffffff;
  --color-nav-text-muted: #a3a3a8;
  --color-nav-active: #ffffff;

  --color-primary: #1c1c1e;
  --color-primary-hover: #333336;
  --color-success: #2e7d32;
  --color-success-hover: #256428;
  --color-danger: #c0392b;
  --color-danger-hover: #a5311f;
  --color-muted-btn: #e2e2e6;
  --color-muted-btn-text: #3a3a3c;

  --color-input-disabled-bg: #eceeef;
  --color-input-disabled-text: #55565a;
  --color-input-enabled-bg: #ffffff;
  --color-input-enabled-border: #1c1c1e;

  --radius-lg: 16px;
  --radius-md: 10px;
  --radius-sm: 6px;

  --nav-height: 72px;

  --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.04);

  --font-base: "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding-top: var(--nav-height);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--color-text);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-text);
}

/* -------------------------------------------------------------------------
   2. Layout-Grundgerüst (Contao Standard-IDs)
   ------------------------------------------------------------------------- */
#wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#container,
#main {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
}

#footer {
  margin-top: auto;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: 2rem 1.5rem;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  text-align: center;
  /* Full-Bleed: Hintergrund über die gesamte Bildschirmbreite ziehen,
     auch wenn #footer innerhalb eines breitenbegrenzten Containers liegt */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Allgemeine "Karten"-Boxen für Content-Elemente */
.ce_text,
.ce_hyperlink,
.content-box {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-card);
}

/* -------------------------------------------------------------------------
   3. Navigation – fixiert & schwarz
   ------------------------------------------------------------------------- */
#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-height);
  background: var(--color-nav-bg);
  display: flex;
  align-items: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

#header .inside {
  width: 100%;
  max-width: 1100px;
  height: 100%;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  /* Navigation immer rechtsbündig mit der 1100px-Inhaltsspalte,
     unabhängig davon, ob noch ein Logo/Titel-Element davor steht */
  justify-content: flex-end;
}

.mod_navigation {
  display: flex;
  align-items: center;
  height: 100%;
}

/* Logo / Site-Titel im Header (falls später ergänzt) */
#header .site-title,
#header a.logo {
  color: var(--color-nav-text);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}

/* Navigationsmodul */
.mod_navigation ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
}

.mod_navigation li {
  position: relative;
}

.mod_navigation a,
.mod_navigation strong.active,
.mod_navigation strong.trail {
  display: inline-block;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  color: var(--color-nav-text-muted);
  font-weight: 500;
  font-size: 0.95rem;
  transition: background 0.15s ease, color 0.15s ease;
  text-decoration: none;
}

.mod_navigation a:hover {
  color: var(--color-nav-text);
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none;
}

.mod_navigation strong.active,
.mod_navigation strong.trail,
.mod_navigation a.active,
.mod_navigation a.trail {
  color: var(--color-nav-active);
  background: rgba(255, 255, 255, 0.12);
}

/* Aktuell besuchte Seite zusätzlich unterstreichen */
.mod_navigation strong.active,
.mod_navigation a.active {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Untermenüs */
.mod_navigation ul.level_2 {
  position: absolute;
  top: 100%;
  left: 0;
  flex-direction: column;
  align-items: stretch;
  min-width: 200px;
  background: var(--color-nav-bg);
  border-radius: var(--radius-md);
  padding: 0.5rem;
  box-shadow: var(--shadow-soft);
  display: none;
}

.mod_navigation li:hover > ul.level_2 {
  display: flex;
}

/* -------------------------------------------------------------------------
   4. Formulare & Buttons – global
   ------------------------------------------------------------------------- */
.widget {
  margin-bottom: 1.25rem;
}

.widget label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.widget input[type="text"],
.widget input[type="email"],
.widget textarea,
.widget select {
  width: 100%;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  font-family: var(--font-base);
  font-size: 0.95rem;
  color: var(--color-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.widget input[type="text"]:focus,
.widget input[type="email"]:focus,
.widget textarea:focus,
.widget select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(28, 28, 30, 0.08);
}
.widget input[type="tel"] { height: auto; padding: 0.65rem 0.9rem; }
.widget input[type="password"] { height: auto; padding: 0.65rem 0.9rem; }
button,
.widget-submit button {
  cursor: pointer;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.65rem 1.25rem;
  font-family: var(--font-base);
  font-size: 0.9rem;
  font-weight: 600;
  background: var(--color-primary);
  color: #fff;
  transition: background 0.15s ease, transform 0.05s ease;
}

button:hover {
  background: var(--color-primary-hover);
}

button:active {
  transform: scale(0.98);
}

/* -------------------------------------------------------------------------
   4a. Profil-Aktionen (Logout / Passwort ändern / Konto schließen)
   ------------------------------------------------------------------------- */
.profile-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 1.5rem 0;
  /* Keine eigene max-width - Breite folgt #main, genauso wie das
     "Persönliche Daten"-Modul darunter */
}

/* Jede der drei Karten: Überschrift oben, Rest wächst dazwischen,
   Button/Formular-Abschluss unten in der Box */
.profile-actions > div {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 1.25rem;
}

.profile-actions h1,
.profile-actions h2,
.profile-actions h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.05rem;
}

.profile-actions form {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.profile-actions .widget {
  margin-bottom: 1rem;
}

/* Button/Submit immer ganz unten in der Box */
.profile-actions .widget-submit,
.profile-actions form > button {
  margin-top: auto;
}

/* Persönliche Daten: gleicher Karten-Look, liegt als eigener,
   breiterer Block unterhalb der Aktions-Zeile */
.mod_personalData,
.mod_personaldata {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  margin-top: 1.5rem;
}

/* -------------------------------------------------------------------------
   4b. Footer-Navigation (Impressum / Datenschutz)
   ------------------------------------------------------------------------- */
#footer nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 0.75rem 0 0;
  padding: 0;
}

#footer nav a {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

#footer nav a:hover {
  color: var(--color-text);
}

/* -------------------------------------------------------------------------
   4c. Akkordion (Hinweise zur Artikel-Benennung) - Handorgel-Bibliothek
   ------------------------------------------------------------------------- */

/* Umgebendes Element neutralisieren, damit nur der Button selbst
   gestylt/sichtbar ist */
.handorgel {
  margin-top: 2rem;
}

.handorgel__header {
  border: none;
  margin: 0;
}

/* Der Button selbst - Look eines Info-Dropdowns, füllt seinen
   Header-Wrapper vollständig aus (kein "zu großer Rahmen" mehr) */
button[aria-controls^="handorgel"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

button[aria-controls^="handorgel"]:hover {
  background: var(--color-surface-alt);
}

/* Eventuellen Standard-Pfeil der Bibliothek ausblenden, falls vorhanden */
button[aria-controls^="handorgel"]::before {
  display: none !important;
}

/* Eigener Pfeil: geschlossen = zeigt nach unten (Standard) */
button[aria-controls^="handorgel"]::after {
  content: "\25BE";
  font-size: 0.8rem;
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
  margin-left: 0.75rem;
  transform: rotate(0deg);
}

/* Geöffnet = Pfeil zeigt nach oben */
button[aria-controls^="handorgel"][aria-expanded="true"]::after {
  transform: rotate(180deg);
}
/* -------------------------------------------------------------------------
   5. Modul: Meine Artikel (member-articles)
   ------------------------------------------------------------------------- */
.member-articles {
  max-width: 900px;
  margin: 0 auto;
}

.member-articles h2 {
  margin-bottom: 0.25rem;
}

.member-articles__count {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.member-articles__guest,
.member-articles__readonly-hint,
.member-articles__limit-reached {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  color: var(--color-text-muted);
}

.member-articles__errors {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.member-articles__errors li {
  background: #fdecea;
  color: var(--color-danger);
  border: 1px solid #f5c6c0;
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

/* Tabelle als "Karten-Liste" darstellen, analog zum Wireframe */
.member-articles__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 1rem;
}

.member-articles__table thead {
  display: none; /* Spaltenüberschriften ausblenden, Karten sprechen für sich */
}

.member-articles__table tbody tr[data-article-row] {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
  padding: 1rem;
  box-shadow: var(--shadow-card);
}

.member-articles__table td {
  padding: 0;
  border: none;
}

/* Beschreibung- und Preis-Zelle: Label über dem Feld statt daneben */
.member-articles__table td:first-child,
.member-articles__table td:nth-child(2) {
  display: flex;
  flex-direction: column;
}

.member-articles__table td:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.member-articles__table td:nth-child(2) {
  flex: 0 0 140px;
}

.member-articles__table td:last-child {
  flex: 0 0 auto;
  display: flex;
  gap: 0.5rem;
}

/* Eingabefelder innerhalb der Artikel-Zeilen */
.marticle-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  font-family: var(--font-base);
  font-size: 0.95rem;
  border: 2px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Zustand: NICHT bearbeitbar (disabled) – klar als "gesperrt" erkennbar */
.marticle-input:disabled {
  background: var(--color-input-disabled-bg);
  color: var(--color-input-disabled-text);
  border-color: transparent;
  cursor: not-allowed;
  -webkit-text-fill-color: var(--color-input-disabled-text);
  opacity: 1;
}

/* Zustand: bearbeitbar (enabled) – deutlich hervorgehoben */
.marticle-input:not(:disabled) {
  background: var(--color-input-enabled-bg);
  color: var(--color-text);
  border-color: var(--color-input-enabled-border);
  box-shadow: 0 0 0 3px rgba(28, 28, 30, 0.06);
}

.marticle-input:not(:disabled):focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(28, 28, 30, 0.12);
}

/* Formulare innerhalb der Zeile nebeneinander anordnen */
.marticle-row-form,
.marticle-delete-form {
  display: inline-flex;
  gap: 0.5rem;
  margin: 0;
}

/* Buttons im Artikel-Modul */
.marticle-edit-btn,
.marticle-save-btn,
.marticle-cancel-btn,
.marticle-delete-btn {
  padding: 0.55rem 0.9rem;
  font-size: 0.85rem;
  white-space: nowrap;
}

.marticle-edit-btn {
  background: var(--color-primary);
  color: #fff;
}

.marticle-edit-btn:hover {
  background: var(--color-primary-hover);
}

.marticle-save-btn {
  background: var(--color-success);
  color: #fff;
}

.marticle-save-btn:hover {
  background: var(--color-success-hover);
}

.marticle-cancel-btn {
  background: var(--color-muted-btn);
  color: var(--color-muted-btn-text);
}

.marticle-cancel-btn:hover {
  background: #d5d5da;
}

.marticle-delete-btn {
  background: var(--color-danger);
  color: #fff;
}

.marticle-delete-btn:hover {
  background: var(--color-danger-hover);
}

/* "Neuen Artikel anlegen"-Bereich */
.member-articles__create-details {
  margin-top: 1.5rem;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-card);
}

.member-articles__create-details summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  outline: none;
}

.member-articles__create-details summary::-webkit-details-marker {
  display: none;
}

.member-articles__create-form {
  margin-top: 1.25rem;
}

.member-articles__create-form .widget-submit button {
  background: var(--color-primary);
}

.member-articles__create-form .widget-submit button:hover {
  background: var(--color-primary-hover);
}

/* -------------------------------------------------------------------------
   6. Responsive Anpassungen
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .member-articles__table tbody tr[data-article-row] {
    flex-wrap: wrap;
  }

  .member-articles__table td:nth-child(2) {
    flex: 1 1 100px;
  }

  .member-articles__table td:last-child {
    flex: 1 1 100%;
    justify-content: flex-end;
  }

  .mod_navigation ul {
    gap: 0;
    overflow-x: auto;
  }

  .profile-actions {
    grid-template-columns: 1fr;
  }
}