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%}
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)}
/* ============================================================
   Hausmeister Wörth – Baukasten-Layout 2026
   ============================================================ */

/* --- CSS-Variablen --------------------------------------- */
:root {
    --green-dark:  #1a5c1a;
    --green-main:  #2d7a2d;
    --green-mid:   #4a9e4a;
    --green-light: #d4e8c8;
    --green-pale:  #f3f8f0;
    --text-main:   #222;
    --text-muted:  #555;
    --white:       #fff;
    --line:        #e4ebe1;
    --orange:      #ff8f1f;
    --shadow:      0 2px 8px rgba(0,0,0,.12);
    --radius:      8px;
    --font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Verdana, sans-serif;
    --max-w:       1100px;
    --header-h:    76px;
    /* Innenabstände des weißen Inhaltsbereichs – werden für
       randlose Bausteine (Hero, Vorteile) wieder herausgerechnet */
    --inside-x:    1.5rem;
    --inside-top:  2rem;
    --inside-bottom: 3rem;
}

/* --- Reset & Base ---------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.65;
    color: var(--text-main);
    background: var(--green-pale);
    -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
p { text-wrap: pretty; margin-bottom: .85rem; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.25; }

/* --- Contao-Overrides ------------------------------------ */
#wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    background: none !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
}
#container { padding-left: 0 !important; flex: 1; }

/* Artikel dürfen randlose Bausteine nicht abschneiden.
   Float-Einschluss übernimmt der Clearfix darunter. */
.mod_article { overflow: visible !important; }
.mod_article::after { content: ''; display: block; clear: both; }

/* --- Site-Header (hell, einzeilig) ------------------------ */
#header {
    background: var(--white) !important;
    padding: 0 !important;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 0 var(--line), 0 2px 10px rgba(26,60,26,.07);
}
#header .inside {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    height: var(--header-h);
}
.site-header-inner {
    display: flex;
    align-items: center;
    gap: .8rem;
    flex: 1;
    min-width: 0;
}
.site-logo { text-decoration: none !important; flex-shrink: 0; }
.site-logo:hover { opacity: .9; }
.site-logo img { height: 52px; width: auto; display: block; }
.site-header-brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .05rem;
    line-height: 1.15;
}
.site-brand-name {
    display: block;
    color: var(--text-muted);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.site-brand-person {
    display: block;
    color: var(--green-dark);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: .2px;
}
.site-tel-btn {
    flex-shrink: 0;
    background: var(--green-main);
    color: var(--white) !important;
    font-weight: 800;
    font-size: .88rem;
    padding: .5rem .95rem;
    border-radius: var(--radius);
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .2s;
}
.site-tel-btn:hover { background: var(--green-dark); }
.nav-toggle {
    display: none;
    background: none;
    border: 2px solid var(--green-light);
    color: var(--green-dark);
    font-size: 1.25rem;
    width: 42px;
    height: 42px;
    border-radius: var(--radius);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    transition: background .2s;
}
.nav-toggle:hover { background: var(--green-pale); }

/* --- Navigation (im Header) ------------------------------- */
.mod_navigation {
    overflow: visible !important; /* Contao setzt .block{overflow:hidden} */
}
.mod_navigation ul.level_1 {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .1rem;
    list-style: none !important;
}
.mod_navigation ul.level_1 > li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mod_navigation ul.level_1 > li > a,
.mod_navigation ul.level_1 > li > strong {
    display: block;
    padding: .45rem .7rem;
    color: var(--text-main);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 600;
    border-radius: 6px;
    border-bottom: 2px solid transparent;
    transition: color .15s, background .15s;
}
.mod_navigation ul.level_1 > li > a:hover { background: var(--green-pale); color: var(--green-dark); }
.mod_navigation ul.level_1 > li.active > a,
.mod_navigation ul.level_1 > li.active > strong {
    color: var(--green-main);
    border-bottom-color: var(--green-main);
    border-radius: 6px 6px 0 0;
}

/* --- Dropdown (level_2) ---------------------------------- */
.mod_navigation ul.level_1 > li.submenu { position: relative; }
.mod_navigation ul.level_2 {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--white);
    border: 1px solid var(--line);
    border-top: 3px solid var(--green-main);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 10px 24px rgba(26,60,26,.16);
    z-index: 200;
    padding: .3rem 0;
    list-style: none !important;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .18s ease, transform .18s ease;
}
.mod_navigation ul.level_1 > li.submenu:hover > ul.level_2,
.mod_navigation ul.level_1 > li.submenu:focus-within > ul.level_2,
.mod_navigation ul.level_1 > li.submenu.open > ul.level_2 {
    display: block !important;
    opacity: 1;
    transform: translateY(0);
}
.mod_navigation ul.level_2 > li { list-style: none; padding: 0; margin: 0; }
.mod_navigation ul.level_2 > li > a,
.mod_navigation ul.level_2 > li > strong {
    display: block;
    padding: .55rem 1.1rem;
    color: var(--text-main);
    text-decoration: none;
    font-size: .86rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: background .15s, border-color .15s, color .15s;
}
.mod_navigation ul.level_2 > li > a:hover,
.mod_navigation ul.level_2 > li.active > a,
.mod_navigation ul.level_2 > li.active > strong {
    background: var(--green-pale);
    border-left-color: var(--green-main);
    color: var(--green-dark);
}

/* --- Main-Inhalt ----------------------------------------- */
#main { flex: 1; background: transparent; }
#main .inside {
    max-width: var(--max-w) !important;
    margin: 0 auto !important;
    padding: var(--inside-top) var(--inside-x) var(--inside-bottom) !important;
    background: var(--white) !important;
    min-height: 50vh;
    box-shadow: var(--shadow);
}

/* --- Typografie ------------------------------------------ */
h1 {
    background: var(--green-main);
    color: var(--white);
    font-size: 1.65rem;
    font-weight: 700;
    padding: .55em 1.5rem;
    margin: 0 0 1.75rem;
}
h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--green-dark);
    margin: 1.5rem 0 .5rem;
    padding-bottom: .3rem;
    border-bottom: 2px solid var(--green-light);
}
h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin: 1rem 0 .25rem;
}
a { color: var(--green-main); font-weight: 600; text-decoration: none; }
a:hover { text-decoration: underline; color: var(--green-dark); }

/* --- Listen im Fliesstext -------------------------------- */
.rte ul { padding-left: 1.5rem; margin-bottom: 1rem; }
.rte ul li { margin-bottom: .35rem; }
.rte { line-height: 1.75; }

/* --- Formulare ------------------------------------------- */
form { max-width: 560px; }
.widget { margin-bottom: 1.1rem; }
.widget label {
    display: block;
    font-weight: 600;
    margin-bottom: .3rem;
    font-size: .9rem;
}
.widget input,
.widget textarea,
.widget select {
    width: 100%;
    padding: .55rem .75rem;
    border: 1px solid #ccc;
    border-radius: var(--radius);
    font: inherit;
    transition: border-color .2s;
}
.widget input:focus,
.widget textarea:focus {
    outline: none;
    border-color: var(--green-main);
    box-shadow: 0 0 0 3px rgba(45,122,45,.18);
}
.widget textarea { min-height: 130px; resize: vertical; }
.submit {
    background: var(--green-main);
    color: var(--white);
    border: none;
    padding: .65rem 2.2rem;
    border-radius: var(--radius);
    font: 600 1rem/1 inherit;
    cursor: pointer;
    transition: background .2s;
}
.submit:hover { background: var(--green-dark); }

/* --- Bilder ---------------------------------------------- */
.image_container { margin: 1rem 0; }
.image_container.float_right { float: right; margin: 0 0 1rem 1.5rem; }
.image_container.float_left  { float: left;  margin: 0 1.5rem 1rem 0; }
.image_container figcaption {
    font-size: .8rem;
    color: var(--text-muted);
    text-align: center;
    padding-top: .25rem;
}
.content-gallery ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}
.content-gallery ul li { margin: 0; text-align: center; }

/* ==========================================================
   BAUSTEIN 1: Kopfbild mit Botschaft (rsce_hero)
   ========================================================== */
.rsce-hero {
    position: relative;
    margin: calc(-1 * var(--inside-top)) calc(-1 * var(--inside-x)) 0;
    min-height: 380px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.rsce-hero-bild { position: absolute; inset: 0; }
.rsce-hero-bild figure { margin: 0; height: 100%; }
.rsce-hero-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 62%;
}
.rsce-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(16,44,16,.86) 0%, rgba(16,44,16,.62) 46%, rgba(16,44,16,.18) 100%);
    z-index: 1;
}
.rsce-hero-inhalt {
    position: relative;
    z-index: 2;
    padding: 3rem 2.2rem;
    max-width: 580px;
}
h1.rsce-hero-titel, .rsce-hero-titel {
    background: none;
    color: var(--white);
    font-size: clamp(1.5rem, 3.4vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.18;
    padding: 0;
    margin: 0 0 .7rem;
    text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.rsce-hero-untertitel {
    color: rgba(255,255,255,.88);
    margin: 0 0 1.3rem;
    font-size: 1.05rem;
}
.rsce-hero-aktionen { display: flex; align-items: center; flex-wrap: wrap; gap: .9rem 1.1rem; }
.rsce-hero-button {
    display: inline-block;
    background: var(--white);
    color: var(--green-dark) !important;
    font-weight: 800;
    font-size: .95rem;
    padding: .7rem 1.35rem;
    border-radius: var(--radius);
    text-decoration: none !important;
    transition: transform .15s, box-shadow .15s;
}
.rsce-hero-button:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.rsce-hero-telefon {
    color: var(--white) !important;
    font-weight: 700;
    font-size: .95rem;
    border-bottom: 2px solid rgba(255,255,255,.55);
    padding-bottom: 2px;
    text-decoration: none !important;
}
.rsce-hero-telefon:hover { border-bottom-color: var(--white); }

/* ==========================================================
   BAUSTEIN 2: Vorteils-Leiste (rsce_vorteile)
   ========================================================== */
.rsce-vorteile {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border-bottom: 1px solid var(--line);
    margin: 0 calc(-1 * var(--inside-x)) 2.4rem;
}
.rsce-vorteil {
    background: var(--green-pale);
    padding: 1.15rem 1.4rem;
    display: flex;
    gap: .8rem;
    align-items: flex-start;
}
.rsce-vorteil svg {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    stroke: var(--green-main);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-top: .1rem;
}
.rsce-vorteil b { display: block; font-size: .95rem; color: var(--green-dark); }
.rsce-vorteil span { font-size: .84rem; color: var(--text-muted); line-height: 1.45; }

/* ==========================================================
   BAUSTEIN 3: Leistungs-Kacheln (rsce_service_teaser)
   ========================================================== */
.rsce-kacheln { margin: 0 0 2.4rem; }
.rsce-kacheln-titel {
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--text-main);
    margin: 0 0 .3rem;
    padding: 0;
    border: none;
    text-align: center;
}
.rsce-kacheln-einleitung {
    text-align: center;
    color: var(--text-muted);
    font-size: .95rem;
    margin: 0 0 1.8rem;
}
.rsce-kacheln-raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1.1rem;
}
.rsce-kachel {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--white);
    box-shadow: 0 2px 10px rgba(26,60,26,.07);
    display: flex;
    flex-direction: column;
    transition: transform .2s, box-shadow .2s;
}
.rsce-kachel:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(26,60,26,.14); }
.rsce-kachel-bild { position: relative; }
.rsce-kachel-bild figure { margin: 0; }
.rsce-kachel-bild img { width: 100%; height: 150px; object-fit: cover; }
.rsce-kachel-neu {
    position: absolute;
    top: .55rem;
    right: .55rem;
    background: var(--orange);
    color: var(--text-main); /* Weiß auf Orange wäre nur 2,3:1 Kontrast */
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .06em;
    padding: .2rem .5rem;
    border-radius: 4px;
}
.rsce-kachel-inhalt {
    padding: .85rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    flex: 1;
}
h3.rsce-kachel-titel {
    font-size: .98rem;
    font-weight: 700;
    color: var(--green-dark);
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
}
.rsce-kachel-titel a { color: var(--green-dark); text-decoration: none; }
.rsce-kachel-titel a:hover { color: var(--green-main); }
.rsce-kachel-text {
    font-size: .84rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
    flex: 1;
}
.rsce-kachel-link {
    font-size: .84rem;
    font-weight: 700;
    color: var(--green-main) !important;
    text-decoration: none !important;
    margin-top: .35rem;
}
.rsce-kachel-link:hover { color: var(--green-dark) !important; }
.rsce-kacheln-mehr { text-align: center; margin-top: 1.6rem; }
.rsce-kacheln-mehr a {
    display: inline-block;
    border: 2px solid var(--green-main);
    color: var(--green-main) !important;
    font-weight: 800;
    font-size: .9rem;
    padding: .55rem 1.5rem;
    border-radius: var(--radius);
    text-decoration: none !important;
    transition: background .15s, color .15s;
}
.rsce-kacheln-mehr a:hover { background: var(--green-main); color: var(--white) !important; }

/* ==========================================================
   BAUSTEIN 4: Vorher / Nachher (rsce_vorher_nachher)
   ========================================================== */
.rsce-vergleich {
    background: var(--green-pale);
    border-top: 1px solid var(--line);
    margin: 0 calc(-1 * var(--inside-x)) calc(-1 * var(--inside-bottom));
    padding: 2.4rem var(--inside-x) 2.6rem;
}
.rsce-vergleich-titel {
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--text-main);
    margin: 0 0 .3rem;
    padding: 0;
    border: none;
    text-align: center;
}
.rsce-vergleich-einleitung {
    text-align: center;
    color: var(--text-muted);
    font-size: .95rem;
    margin: 0 0 1.8rem;
}
.rsce-vergleich-bilder {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    max-width: 780px;
    margin: 0 auto;
}
.rsce-vergleich-vorher,
.rsce-vergleich-nachher {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(26,60,26,.12);
}
.rsce-vergleich-bilder figure { margin: 0; }
.rsce-vergleich-bilder img { width: 100%; height: 220px; object-fit: cover; }
.rsce-vergleich-etikett {
    position: absolute;
    top: .6rem;
    left: .6rem;
    background: rgba(20,40,20,.82);
    color: var(--white);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    padding: .22rem .6rem;
    border-radius: 4px;
}
.rsce-vergleich-nachher .rsce-vergleich-etikett { background: var(--green-main); }
.rsce-vergleich-unterschrift {
    text-align: center;
    font-size: .85rem;
    color: var(--text-muted);
    margin: .9rem 0 0;
}

/* --- Leistungsliste (rsce_leistungsliste) ------------------ */
.leistungsliste { margin-bottom: 1.5rem; }
.leistungsliste-intro {
    margin-bottom: .75rem;
    color: var(--text-muted);
    font-style: italic;
}
.leistungsliste-liste {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid var(--green-light);
    border-radius: var(--radius);
    overflow: hidden;
}
.leistungsliste-liste li {
    padding: .6rem .75rem .6rem 2.4rem;
    border-bottom: 1px solid var(--green-light);
    position: relative;
    font-size: .97rem;
}
.leistungsliste-liste li:last-child { border-bottom: none; }
.leistungsliste-liste li::before {
    content: "✓";
    position: absolute;
    left: .75rem;
    color: var(--green-main);
    font-weight: 700;
}
.leistungsliste-liste li:nth-child(even) { background: var(--green-pale); }
.leistungsliste-liste li.hat-icon::before { content: none; }
.leistungsliste-liste li svg {
    position: absolute;
    left: .55rem;
    top: 50%;
    transform: translateY(-50%);
    width: 21px;
    height: 21px;
    fill: none;
    stroke: var(--green-main);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ==========================================================
   BAUSTEIN 5: Kontakt-Band (fest im Layout)
   ========================================================== */
#footer {
    background: none !important;
    height: auto !important;
    padding: 0 !important;
}
#footer .inside {
    max-width: none;
    margin: 0;
    padding: 0;
    display: block;
}
.kontakt-band {
    background: linear-gradient(120deg, var(--green-dark), var(--green-main));
    color: var(--white);
    padding: 2.2rem 1.5rem;
}
.kb-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem 2.4rem;
    text-align: center;
}
.kb-text b { display: block; font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; }
.kb-text span { font-size: .9rem; opacity: .85; }
.kb-tel {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--white) !important;
    text-decoration: none !important;
    white-space: nowrap;
}
.kb-tel:hover { opacity: .85; }
.kb-btn {
    background: var(--white);
    color: var(--green-dark) !important;
    font-weight: 800;
    font-size: .92rem;
    padding: .65rem 1.3rem;
    border-radius: var(--radius);
    text-decoration: none !important;
    transition: transform .15s;
}
.kb-btn:hover { transform: translateY(-2px); }

/* --- Footer-Zeile ----------------------------------------- */
.footer-bottom {
    background: #143914;
    color: rgba(255,255,255,.72);
    font-size: .8rem;
    padding: 1rem 1.5rem;
}
.fb-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    justify-content: space-between;
}
.footer-bottom p { margin: 0; }
.footer-bottom a {
    color: rgba(255,255,255,.72) !important;
    font-weight: 400;
    text-decoration: none;
}
.footer-bottom a:hover { color: var(--white) !important; }

/* --- Utilities ------------------------------------------- */
.clearfix::after { content: ''; display: table; clear: both; }
/* Screenreader-Texte & Skip-Link: aus dem Sichtbereich geschoben,
   aber fokussierbar (kein display:none, sonst überspringt sie die Tastatur) */
.invisible {
    position: absolute;
    left: -9999px;
    top: auto;
}
/* Skip-Link („Navigation überspringen“): erscheint bei Tastaturfokus
   oben links als deutlich sichtbare Schaltfläche.
   Wichtig: Contaos layout.css versteckt .invisible per clip + 1×1px —
   das muss hier alles zurückgesetzt werden. */
a.invisible:focus-visible {
    clip: auto;
    clip-path: none;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    white-space: nowrap;
    left: 12px;
    top: 12px;
    z-index: 10000;
    background: var(--green-dark);
    color: var(--white);
    padding: .75rem 1.25rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    font-weight: 700;
    text-decoration: none;
}

/* --- Responsive: Desktop --------------------------------- */
@media (min-width: 900px) {
    :root { --inside-x: 2.5rem; --inside-top: 2.5rem; --inside-bottom: 4rem; }
    h1 { font-size: 2rem; padding: .55em 2.5rem; }
    .rsce-hero { min-height: 440px; }
}

/* --- Responsive: Tablet ---------------------------------- */
@media (min-width: 640px) {
    h1 { font-size: 1.8rem; }
    .content-gallery ul {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

/* --- Responsive: Mobile ---------------------------------- */
@media (max-width: 760px) {
    .mod_navigation ul.level_1 { display: none; }
    .nav-toggle { display: flex; }
    .site-brand-name { display: none; }
    .site-brand-person { font-size: 1rem; }
    .site-tel-btn { font-size: .8rem; padding: .45rem .7rem; }

    .mod_navigation.is-open ul.level_1 {
        display: flex;
        flex-direction: column;
        gap: 0;
        position: absolute;
        top: var(--header-h);
        left: 0;
        right: 0;
        z-index: 99;
        background: var(--green-dark);
        box-shadow: 0 6px 16px rgba(0,0,0,.3);
        padding: 0;
    }
    .mod_navigation.is-open ul.level_1 > li > a,
    .mod_navigation.is-open ul.level_1 > li > strong {
        padding: .95rem 1.5rem;
        color: rgba(255,255,255,.9);
        border-bottom: 1px solid rgba(255,255,255,.1);
        border-radius: 0;
        font-size: 1rem;
    }
    .mod_navigation.is-open ul.level_1 > li.active > a,
    .mod_navigation.is-open ul.level_1 > li.active > strong {
        color: var(--white);
        background: rgba(255,255,255,.08);
    }

    /* Dropdown auf Mobile: immer sichtbar, eingerückt */
    .mod_navigation.is-open ul.level_2 {
        display: block !important;
        position: static;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: rgba(0,0,0,.2);
        padding: 0;
        min-width: 0;
        opacity: 1;
        transform: none;
    }
    .mod_navigation.is-open ul.level_2 > li > a,
    .mod_navigation.is-open ul.level_2 > li > strong {
        padding: .6rem 1.5rem .6rem 2.5rem;
        color: rgba(255,255,255,.8);
        font-size: .9rem;
        border-left: none;
        border-bottom: 1px solid rgba(255,255,255,.06);
    }
}

@media (max-width: 640px) {
    :root { --header-h: 64px; --inside-x: 1rem; --inside-top: 1.2rem; --inside-bottom: 2rem; }
    .site-logo img { height: 42px; }

    .image_container.float_right,
    .image_container.float_left {
        float: none;
        margin: .75rem 0;
    }
    h1 {
        font-size: 1.3rem;
        width: calc(100% + 2rem);
        margin-left: -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
        margin-bottom: 1.2rem;
    }
    .rsce-hero { min-height: 320px; }
    .rsce-hero-inhalt { padding: 2.2rem 1.2rem; }
    .rsce-vorteile { grid-template-columns: 1fr; }
    .rsce-vergleich-bilder { grid-template-columns: 1fr; }
    .kb-inner { flex-direction: column; gap: .8rem; }
}

/* ==========================================================
   Barrierefreiheit: Fokus-Ringe (nur bei Tastaturfokus)
   ========================================================== */
:focus-visible {
    outline: 3px solid var(--green-main);
    outline-offset: 2px;
}
/* Auf grünen/dunklen Flächen braucht der Ring Weiß */
.site-tel-btn:focus-visible,
.submit:focus-visible,
.kontakt-band a:focus-visible,
a.invisible:focus-visible {
    outline-color: var(--white);
    outline-offset: 3px;
}