/* Entrümpelung Sofort — Blue-Collar Authority.
   Palette und Kontraste werden in _build/pruefungen.py nachgerechnet. */
@font-face{font-family:Inter;src:url(/fonts/inter-subset.woff2) format('woff2');
 font-weight:400 800;font-style:normal;font-display:swap;
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}

:root{
 /* Aus dem Logo abgeleitet: Gold als Akzent, dazu ein warmes Espresso-Dunkel.
    Bewusst warm und nicht grünstichig — kaltes Dunkelgrün wirkt gedrückt,
    warmes Braun wirkt wertig. Helle Flächen sind warme Cremetöne, kein reines Grau. */
 --marke:#C9A961; --marke-hell:#E7D6A8; --marke-dunkel:#B4924A; --marke-tief:#7A5F22;
 --dunkel:#26211B; --dunkel-2:#322B23; --dunkel-3:#453C31; --band:#1C1813;
 --auf-1:#FFFFFF; --auf-2:#D6CCBC; --auf-3:#BDB2A0; --auf-rahmen:#7A705F;
 --grund:#fff; --grund-2:#FBF7EF; --grund-3:#F4EBDA;
 --ink:#2A2622; --ink-2:#5C5449; --linie:#E8DFCC; --linie-stark:#928668;
 --h:1.15; --r:10px; --huelle:1200px;
 --f-x:clamp(1.68rem,0.98rem + 3.05vw,3.5rem);
 --f-h2:clamp(1.72rem,1.15rem + 2.1vw,2.85rem);
 --f-h3:1.09rem;
}
*,*::before,*::after{box-sizing:border-box}
/* muss vor allen display-Regeln stehen: sonst gewinnt z.B. .knopf{display:inline-flex}
   gegen das hidden-Attribut und der Dialogteil ist sofort offen. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
 color:var(--ink);background:var(--grund);font-size:17px;line-height:1.62;
 -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{line-height:var(--h);margin:0;font-weight:800;letter-spacing:-.021em}
p{margin:0 0 1rem}
a{color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--marke);outline-offset:2px;border-radius:4px}
.huelle{max-width:var(--huelle);margin:0 auto;padding:0 22px;width:100%}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--marke);color:var(--dunkel);
 padding:.7rem 1.1rem;font-weight:700}
.skip:focus{left:0}
.nurSR{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
 clip:rect(0 0 0 0);white-space:nowrap;border:0}
.alsLink{background:0;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline}

/* ---------- Knöpfe. Bernstein ist Fläche mit dunkler Schrift, nie heller Text auf Bernstein. */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
 padding:.86rem 1.5rem;border-radius:var(--r);font-weight:700;font-size:.97rem;
 text-decoration:none;border:2px solid transparent;cursor:pointer;transition:.16s;text-align:center;
 font-family:inherit;line-height:1.25}
.knopf--marke{background:var(--marke);color:var(--dunkel);border-color:var(--marke)}
.knopf--marke:hover{background:var(--marke-dunkel);border-color:var(--marke-dunkel)}
.knopf--linie{background:0;color:var(--ink);border-color:var(--ink)}
.knopf--linie:hover{background:var(--ink);color:#fff}
.knopf--linie-auf{background:0;color:var(--auf-1);border-color:var(--auf-rahmen)}   /* auf dunklem Grund */
.knopf--linie-auf:hover{background:#fff;color:var(--dunkel);border-color:#fff}
.knopf--linie-dunkel{background:0;color:var(--ink);border-color:var(--ink)}
.knopf--linie-dunkel:hover{background:var(--ink);color:#fff}
.knopf--schlicht{background:0;color:var(--ink-2);border-color:transparent;text-decoration:underline}
.knopf--gross{padding:1.02rem 1.85rem;font-size:1.03rem}
.knopf--voll{width:100%}

/* ---------- Kopf */
.kopf{position:sticky;top:0;z-index:90;background:var(--dunkel)}
.kopf-band{background:var(--band);color:var(--auf-3);font-size:.795rem;border-bottom:1px solid var(--dunkel-3)}
.kopf-band .huelle{display:flex;justify-content:space-between;gap:1rem;padding-top:.42rem;padding-bottom:.42rem}
.kopf-band strong{color:var(--marke)}
.kopf-band-o{color:var(--auf-3);white-space:nowrap}
.kopf-band-tel{display:none;color:var(--marke);font-weight:800;text-decoration:none;white-space:nowrap}
.kopf-reihe{display:flex;align-items:center;gap:1.4rem;padding-top:.6rem;padding-bottom:.6rem}
/* feste Breite: mit flex:0 1 auto schrumpft der Kasten unter die Textbreite
   und die Wortmarke laeuft sichtbar in die Navigation hinein. */
.marke{display:flex;align-items:center;gap:.62rem;text-decoration:none;color:var(--auf-1);flex:0 0 auto}
/* Gold auf Dunkel — genau so, wie das Logo entworfen ist. Keine Plakette nötig. */
.marke-bild{width:46px;height:46px;flex:0 0 46px;display:block}
.fuss .marke-bild{width:48px;height:48px;flex:0 0 48px}
.marke-text{display:flex;flex-direction:column;line-height:1.14}
.marke-text strong{font-size:1.1rem;color:var(--marke-hell);letter-spacing:.005em;white-space:nowrap;font-weight:700}
.marke-claim{font-size:.555rem;letter-spacing:.125em;text-transform:uppercase;color:var(--auf-3);margin-top:3px;white-space:nowrap}
.nav{margin-left:auto}
.nav-liste{display:flex;align-items:center;gap:.15rem}
.nav-liste>li{position:relative}
.nav-liste a,.nav-knopf{display:flex;align-items:center;gap:.32rem;padding:.72rem .62rem;color:var(--auf-1);white-space:nowrap;
 text-decoration:none;font-weight:700;font-size:.945rem;background:0;border:0;font-family:inherit;cursor:pointer}
.nav-liste a:hover,.nav-knopf:hover,.nav-knopf[aria-expanded=true]{color:var(--marke)}
.pfeil{width:0;height:0;border:4px solid transparent;border-top-color:currentColor;margin-top:3px}
.mega{position:absolute;top:100%;left:0;background:#fff;border-radius:12px;
 box-shadow:0 20px 48px rgba(42,38,34,.2);border:1px solid var(--linie);
 padding:1.05rem;min-width:270px;z-index:95}
.mega--breit{left:auto;right:0;width:min(860px,88vw);max-height:min(70vh,560px);overflow:auto}
.mega-innen{display:flex;flex-direction:column;gap:.5rem}
.mega--breit .mega-innen{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
.mega-liste{display:grid;gap:1px}
.mega-liste--l{grid-template-columns:1fr 1fr}
.mega--breit .mega-liste{grid-template-columns:1fr 1fr;gap:0}
.mega a{color:var(--ink);padding:.42rem .55rem;border-radius:6px;font-size:.89rem;font-weight:600}
.mega a:hover{background:var(--grund-2);color:var(--marke-tief)}
.mega-titel{font-size:.72rem;text-transform:uppercase;letter-spacing:.11em;color:var(--ink-2);
 padding:0 .55rem .42rem;font-weight:800;display:flex;gap:.4rem;align-items:baseline}
.mega-titel span{font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink-2);opacity:.8}
.mega-fuss{margin:.55rem 0 0;padding-top:.6rem;border-top:1px solid var(--linie);
 display:flex;gap:1.1rem;grid-column:1/-1}
.mega-fuss a{color:var(--marke-tief);font-weight:800;font-size:.87rem;padding:.2rem 0}
.kopf-tat{display:flex;align-items:center;gap:.8rem;flex:0 0 auto;min-width:0}
.tel{display:flex;flex-direction:column;text-decoration:none;color:var(--auf-1);line-height:1.12}
.tel-l{font-size:.63rem;text-transform:uppercase;letter-spacing:.1em;color:var(--auf-3)}
.tel strong{font-size:1.06rem;color:var(--marke)}
.burger{display:none;background:0;border:0;padding:.55rem;cursor:pointer;margin-left:auto}
.burger span{display:block;width:25px;height:2.5px;background:var(--auf-1);border-radius:2px;margin:5px 0;transition:.2s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ---------- Hero */
.hero{position:relative;background:var(--dunkel);color:var(--auf-1);overflow:hidden}
.hero-bild{position:absolute;inset:0;
 background:linear-gradient(150deg,var(--dunkel-2),#1A1611)}
@media (min-width:801px){
 .hero-bild{background:linear-gradient(100deg,var(--dunkel) 0%,rgba(38,33,27,.96) 31%,rgba(38,33,27,.76) 54%,rgba(38,33,27,.46) 100%),
  url(/bilder/hero.webp) center/cover no-repeat}}
.hero-gitter{position:relative;display:grid;grid-template-columns:1fr minmax(360px,412px);
 gap:2.6rem;align-items:center;padding-top:3.3rem;padding-bottom:3.3rem}
.brauen{font-size:.735rem;font-weight:800;letter-spacing:.155em;text-transform:uppercase;
 color:var(--marke-tief);margin:0 0 .85rem}
.brauen--auf{color:var(--marke)}
.pille{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--auf-rahmen);border-radius:999px;
 padding:.42rem 1rem;font-size:.855rem;font-weight:700;color:var(--auf-1);margin:0 0 1.15rem}
.pille span{color:var(--marke);font-weight:800}
.hero-h1{font-size:var(--f-x);letter-spacing:-.032em;margin:0 0 1.15rem}
.hero-h1 span{display:block}
.hero-h1 .ton{color:var(--marke)}
.hero-vor{font-size:1.055rem;color:var(--auf-2);max-width:39rem;margin-bottom:1.6rem}
.hero-tat{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.5rem}
.hero-punkte{display:flex;flex-wrap:wrap;gap:.55rem 1.5rem;font-size:.885rem;color:var(--auf-2)}
.hero-punkte li{position:relative;padding-left:1.32rem}
.hero-punkte li::before{content:"";position:absolute;left:0;top:.52em;width:9px;height:9px;
 border-radius:50%;background:var(--marke)}

/* ---------- Formular */
.form{background:#fff;border-radius:14px;padding:1.5rem;
 box-shadow:0 22px 54px rgba(20,16,12,.34);color:var(--ink)}
.form--dunkel{background:#fff}
.form-titel{font-size:1.32rem;margin:0 0 .35rem}
.form-vor{font-size:.845rem;color:var(--ink-2);margin:0 0 1.05rem}
.form-reihe{display:grid;grid-template-columns:1fr 1fr;gap:.72rem}
.feld{margin:0 0 .72rem}
.feld label{display:block;font-size:.795rem;font-weight:800;margin-bottom:.28rem;color:var(--ink)}
.feld label span{color:#A03A12;margin-left:2px}
.feld input,.feld select,.feld textarea{width:100%;padding:.66rem .78rem;border:1.5px solid var(--linie-stark);
 border-radius:8px;font:inherit;font-size:.925rem;background:#fff;color:var(--ink)}
.feld textarea{resize:vertical;min-height:74px}
.feld input:focus,.feld select:focus,.feld textarea:focus{border-color:var(--marke-tief);outline:2px solid rgba(201,169,97,.55);outline-offset:0}
.feld input[aria-invalid=true],.feld textarea[aria-invalid=true]{border-color:#A03A12}
.feld--haken{display:flex;gap:.6rem;align-items:flex-start;margin-bottom:1rem}
.feld--haken input{width:19px;height:19px;flex:0 0 19px;margin-top:.16rem;accent-color:var(--marke-tief)}
.feld--haken label{font-size:.775rem;font-weight:500;color:var(--ink-2);line-height:1.48;margin:0}
.feld--haken a{color:var(--marke-tief);font-weight:700}
.honig{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-nach{font-size:.755rem;color:var(--ink-2);text-align:center;margin:.72rem 0 0}
.form button[disabled]{opacity:.6;cursor:progress}

/* ---------- Trust-Streifen */
.trust{background:var(--dunkel-2);color:var(--auf-1);border-top:1px solid var(--dunkel-3)}
.tz{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--dunkel-3)}
.tz li{background:var(--dunkel-2);padding:1.32rem .6rem;text-align:center}
.tz strong{display:block;font-size:1.42rem;color:var(--marke);letter-spacing:-.02em}
.tz-k{display:block;font-size:.895rem;font-weight:700;margin-top:.1rem}
.tz-u{display:block;font-size:.775rem;color:var(--auf-3);margin-top:.16rem}

/* ---------- Abschnitte */
.abs{padding:4.4rem 0}
.abs--grund2{background:var(--grund-2)}
.abs--hell{background:var(--grund)}
.abs--dunkel{background:var(--dunkel);color:var(--auf-1)}
.abs-t{font-size:var(--f-h2);margin:0 0 .9rem;max-width:22ch}
.abs-t--auf{color:var(--auf-1)}
.abs-t-2{display:block;color:var(--ink-2);font-weight:700}
.abs-t--auf .abs-t-2{color:var(--marke)}
.abs-vor{font-size:1.02rem;color:var(--ink-2);max-width:56ch;margin-bottom:2.1rem}
.abs-vor--auf{color:var(--auf-2)}
.abs>.huelle>.brauen,.abs>.huelle>.abs-t,.abs>.huelle>.abs-vor{text-align:center;margin-left:auto;margin-right:auto}
.abs>.huelle>.abs-t{max-width:26ch}

/* ---------- Leistungs-Grid */
.lgitter{display:grid;grid-template-columns:repeat(4,1fr);gap:1.15rem;margin-top:2.4rem}
.lk{display:flex}
.lk-a{display:flex;flex-direction:column;background:#fff;border:1px solid var(--linie);border-radius:12px;
 overflow:hidden;text-decoration:none;color:inherit;transition:.17s;width:100%}
.lk-a:hover{transform:translateY(-3px);box-shadow:0 15px 34px rgba(28,36,32,.14);border-color:#D8CFB6}
.lk-bild{width:100%;height:auto;aspect-ratio:10/7;object-fit:cover}
.lk-text{padding:1.05rem 1.1rem 1.2rem;display:flex;flex-direction:column;flex:1}
.lk-t{font-size:var(--f-h3);margin:0 0 .42rem}
.lk-p{font-size:.858rem;color:var(--ink-2);line-height:1.56;margin:0 0 .85rem;flex:1}
.lk-mehr{font-size:.83rem;font-weight:800;color:var(--marke-tief)}
.lk-a--cta{background:var(--dunkel);border-color:var(--dunkel);justify-content:center}
.lk-text--cta{justify-content:center;padding:1.7rem 1.3rem}
.lk-a--cta .lk-t{color:#fff}
.lk-a--cta .lk-p{color:var(--auf-2);flex:0}
.lk-a--cta .lk-mehr{color:var(--marke)}
.lk-a:hover .lk-mehr{text-decoration:underline}


/* ---------- Über uns */
.ueber-gitter{display:grid;grid-template-columns:.86fr 1.14fr;gap:3rem;align-items:center}
.ueber-bild{margin:0}
.ueber-bild img{border-radius:13px;width:100%}
.ueber-bild figcaption{font-size:.735rem;color:var(--auf-3);margin-top:.62rem}
.haken{display:grid;gap:1.15rem;margin:0 0 1.9rem}
.haken li{padding-left:2.15rem;position:relative}
.haken li::before{content:"✓";position:absolute;left:0;top:-1px;width:1.5rem;height:1.5rem;
 display:grid;place-items:center;border-radius:50%;background:var(--marke);color:var(--dunkel);
 font-weight:800;font-size:.83rem}
.haken h3{font-size:1.03rem;margin:0 0 .22rem;color:var(--auf-1)}
.haken p{font-size:.895rem;color:var(--auf-2);margin:0;line-height:1.58}
.haken--kurz{gap:.9rem}

/* ---------- Ablauf */
.schritte{display:grid;grid-template-columns:repeat(4,1fr);gap:1.15rem;margin-top:2.4rem;counter-reset:s}
.sh{background:var(--grund-2);border:1px solid var(--linie);border-radius:12px;padding:1.5rem 1.3rem;position:relative}
.sh-n{position:absolute;top:-15px;left:1.3rem;width:34px;height:34px;display:grid;place-items:center;
 background:var(--marke);color:var(--dunkel);border-radius:9px;font-weight:800;font-size:1rem}
.sh-t{font-size:1.04rem;margin:.85rem 0 .42rem}
.sh-p{font-size:.868rem;color:var(--ink-2);margin:0;line-height:1.57}

/* ---------- Bewertungen */
.bw-huelle{margin-top:2.2rem;overflow:hidden}
.bw-spur{display:flex;gap:1.15rem;transition:transform .42s ease;will-change:transform}
.bw{flex:0 0 calc((100% - 2.3rem)/3);background:var(--grund-2);border:1px solid var(--linie);
 border-radius:12px;padding:1.6rem 1.45rem;display:flex;flex-direction:column}
.bw-sterne{color:var(--marke-tief);font-size:1.06rem;letter-spacing:.11em;margin:0 0 .8rem}
.bw-text{margin:0 0 1.15rem;flex:1}
.bw-text p{font-size:.905rem;line-height:1.66;margin:0;color:var(--ink)}
.bw-wer{margin:0;padding-top:.9rem;border-top:1px solid var(--linie)}
.bw-wer strong{display:block;font-size:.905rem}
.bw-wer span{font-size:.795rem;color:var(--ink-2)}
.bw-steuer{display:flex;align-items:center;justify-content:center;gap:1.15rem;margin-top:1.7rem}
.bw-pfeil{width:41px;height:41px;border-radius:50%;border:1.5px solid var(--linie);background:#fff;
 cursor:pointer;font-size:1.02rem;color:var(--ink);display:grid;place-items:center}
.bw-pfeil:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.bw-punkte{display:flex;gap:.15rem}
/* Klickflaeche 24x24 (WCAG 2.2 Zielgroesse), der sichtbare Punkt bleibt klein. */
.bw-punkt{width:24px;height:24px;border:0;background:0;cursor:pointer;padding:0;position:relative}
.bw-punkt::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
 width:9px;height:9px;border-radius:50%;background:#D8CFB6;transition:.15s}
.bw-punkt[aria-current=true]::before{background:var(--marke-tief);width:22px;border-radius:5px}
.bw-cta{text-align:center;margin:2rem 0 0}

/* ---------- Galerie */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:.85rem;margin-top:2.3rem}
.gal-z{border-radius:10px;overflow:hidden;background:var(--linie)}
.gal-z img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .35s}
.gal-z:hover img{transform:scale(1.045)}
.gal-hinweis{font-size:.775rem;color:var(--ink-2);text-align:center;margin:1.15rem auto 0;max-width:56ch}
.gal-cta{text-align:center;margin:1.6rem 0 0}

/* ---------- Einsatzgebiete */
.geb-oben{display:grid;grid-template-columns:1.08fr .92fr;gap:2.4rem;margin-top:2.3rem;align-items:start}
.geb-stadt{display:grid;gap:1.3rem}
.geb-foto{border-radius:13px;width:100%;aspect-ratio:3/2;object-fit:cover}
.geb-stadt-text h3{font-size:1.2rem;margin:0 0 .55rem;color:var(--auf-1)}
.geb-stadt-text p{font-size:.912rem;color:var(--auf-2);line-height:1.62}
.geb-teile{font-size:.845rem!important;color:var(--auf-3)!important}
.geb-teile strong{color:var(--auf-1)}
.geb-karte{display:grid;gap:1rem}
.geb-karte-n{font-size:.83rem;color:var(--auf-3);margin:0;line-height:1.6}
.geb-karte-n strong{color:var(--auf-1)}
.geb-listen{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2.6rem;
 padding-top:2.2rem;border-top:1px solid var(--dunkel-3)}
.geb-t{font-size:.79rem;text-transform:uppercase;letter-spacing:.11em;color:var(--marke);margin:0 0 .95rem}
.geb-t span{color:var(--auf-3);font-weight:600;text-transform:none;letter-spacing:0}
.chips{display:flex;flex-wrap:wrap;gap:.38rem}
.chip{display:inline-block;padding:.35rem .72rem;border:1px solid var(--dunkel-3);border-radius:6px;
 font-size:.795rem;color:var(--auf-2);text-decoration:none;background:var(--dunkel-2)}
.chip:hover{border-color:var(--marke);background:var(--dunkel-3);color:var(--marke-hell)}
.geb-cta{margin:2.4rem 0 0;display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}

/* ---------- Embed-Sperre */
.embed{position:relative;border-radius:12px;overflow:hidden;background:var(--dunkel-2);
 border:1px solid var(--dunkel-3);display:flex}
.embed iframe{width:100%;height:100%;min-height:330px;border:0;display:block}
.embed-sperre{padding:1.7rem;display:flex;flex-direction:column;justify-content:center;
 align-items:flex-start;gap:.62rem;width:100%}
.embed-sperre h3{font-size:1.03rem;margin:0;color:var(--auf-1)}
.embed-sperre p{font-size:.868rem;color:var(--auf-2);margin:0;max-width:40ch}
.embed-klein{font-size:.735rem!important;color:var(--auf-3)!important}

/* ---------- Warum wir */
.wgitter{display:grid;grid-template-columns:repeat(4,1fr);gap:1.15rem;margin-top:2.4rem}
.wk{background:#fff;border:1px solid var(--linie);border-radius:12px;padding:1.6rem 1.35rem;
 border-top:4px solid var(--marke)}
.wk-t{font-size:1.04rem;margin:0 0 .48rem}
.wk-p{font-size:.868rem;color:var(--ink-2);margin:0;line-height:1.6}

/* ---------- Abschluss-CTA */
.cta-gitter{display:grid;grid-template-columns:1fr minmax(360px,412px);gap:3rem;align-items:center}
.cta-direkt{font-size:.945rem;color:var(--auf-2);margin:0}
.cta-direkt a{color:var(--marke);text-decoration:none}
.cta-direkt a:hover{text-decoration:underline}

/* ---------- Footer */
.fuss{background:var(--band);color:var(--auf-3);font-size:.878rem}
.fuss-gitter{display:grid;grid-template-columns:1.35fr 1fr 1fr 1.1fr;gap:2.4rem;padding-top:3.5rem;padding-bottom:2.6rem}
.fuss .marke{margin-bottom:1.15rem}
.fuss-nap{line-height:1.72;margin:0 0 .95rem}
.fuss-nap strong{color:#fff}
.fuss-nap--2{font-size:.83rem;color:var(--auf-3)}
.fuss-kontakt{line-height:1.85;margin:0}
.fuss-kontakt a{color:var(--marke);text-decoration:none;font-weight:700}
.fuss-kontakt a:hover{text-decoration:underline}
.fuss-t{font-size:.755rem;text-transform:uppercase;letter-spacing:.12em;color:#fff;margin:0 0 .95rem}
.fuss-sp ul{display:grid;gap:.48rem}
.fuss-sp a{color:var(--auf-2);text-decoration:none}
.fuss-sp a:hover{color:var(--marke)}
.fuss-mehr{margin:.95rem 0 0}
.fuss-mehr a{color:var(--marke);font-weight:700;text-decoration:none}
.fuss-band{border-top:1px solid var(--dunkel-2);font-size:.79rem;color:var(--auf-3)}
.fuss-band-reihe{display:flex;justify-content:space-between;gap:1.15rem;flex-wrap:wrap;
 padding-top:1.15rem;padding-bottom:1.15rem}
.fuss-band p{margin:0}
.fuss-recht{display:flex;gap:1.3rem;flex-wrap:wrap}
.fuss-recht a,.fuss-recht button{color:var(--auf-3);text-decoration:none}
.fuss-recht a:hover,.fuss-recht button:hover{color:var(--marke)}

/* ---------- Sticky-Bar (nur mobil) */
.sticky{display:none;position:fixed;left:0;right:0;bottom:0;z-index:88;
 background:var(--dunkel);border-top:1px solid var(--dunkel-3);padding:.55rem;gap:.55rem}
.sticky-a{flex:1;display:flex;align-items:center;justify-content:center;gap:.42rem;padding:.85rem .5rem;
 border-radius:9px;font-weight:800;font-size:.912rem;text-decoration:none;color:var(--auf-1);border:1.5px solid var(--auf-rahmen)}
.sticky-a--marke{background:var(--marke);color:var(--dunkel);border-color:var(--marke)}

/* ---------- Cookie */
.cc{position:fixed;inset:0;z-index:180;background:rgba(42,38,34,.45);
 display:flex;align-items:flex-end;justify-content:center;padding:1rem}
.cc-kasten{background:#fff;border-radius:14px;padding:1.7rem;max-width:640px;width:100%;
 box-shadow:0 26px 66px rgba(0,0,0,.4);max-height:90vh;overflow:auto}
.cc-kasten h2{font-size:1.2rem;margin:0 0 .62rem}
.cc-kasten>p{font-size:.895rem;color:var(--ink-2);margin:0 0 1.15rem}
.cc-wahl{display:grid;gap:.72rem;margin:0 0 1.3rem;padding:1.05rem;background:var(--grund-2);border-radius:10px}
.cc-z{display:flex;gap:.72rem;align-items:flex-start;font-size:.855rem;color:var(--ink-2);cursor:pointer}
.cc-z input{width:18px;height:18px;flex:0 0 18px;margin-top:.16rem;accent-color:var(--marke-tief)}
.cc-z strong{display:block;color:var(--ink);font-size:.895rem}
.cc-knoepfe{display:flex;gap:.62rem;flex-wrap:wrap}
.cc-knoepfe .knopf{flex:1;min-width:145px}
.cc-fuss{font-size:.775rem;color:var(--ink-2);margin:1.05rem 0 0;text-align:center}
.cc-fuss a{color:var(--marke-tief);font-weight:700}
body.cc-offen{overflow:hidden}

/* ---------- Umbrüche */
@media (max-width:1180px){
 /* Zwischen 960 und 1180 blieb der Textspalte zu wenig Breite: die H1 brach
    innerhalb ihrer semantischen Zeilen noch einmal um. Darum hier schon stapeln. */
 .hero-gitter,.cta-gitter{grid-template-columns:1fr;gap:2.2rem}
 .hero-form,.cta-form{max-width:520px}
 /* Kopf: Wortmarke, Navigation, Nummer und Knopf passen hier nicht mehr
    nebeneinander — der Knopf entfaellt, die Nummer bleibt (Click-to-Call). */
 .marke-claim{display:none}
 .marke{flex:0 0 auto}
 .marke-text strong{font-size:1.02rem}
 .kopf-tat .knopf{display:none}
 .nav-liste a,.nav-knopf{padding:.72rem .5rem;font-size:.885rem}
}
@media (max-width:1080px){
 .lgitter,.wgitter,.schritte{grid-template-columns:repeat(2,1fr)}
 .gal{grid-template-columns:repeat(3,1fr)}
 .bw{flex:0 0 calc((100% - 1.15rem)/2)}
 .fuss-gitter{grid-template-columns:1.3fr 1fr 1fr;row-gap:2.2rem}
 .fuss-sp--marke{grid-column:1/-1}
}
@media (max-width:960px){
 .kopf-tat .knopf,.tel-l{display:none}
 .nav-liste{gap:0}
 .nav-liste a,.nav-knopf{padding:.72rem .5rem;font-size:.895rem}
 .ueber-gitter,.geb-oben{grid-template-columns:1fr;gap:2.1rem}
 .geb-listen{grid-template-columns:1fr;gap:1.7rem}
 .abs-t{max-width:none}
}
@media (max-width:800px){
 body{font-size:16px}
 .sticky{display:flex}
 body{padding-bottom:68px}
 .kopf-band .huelle{font-size:.735rem}
 .kopf-band-o{display:none}
 .marke-text strong{font-size:1.02rem}
 .tel strong{font-size:.97rem}
 .burger{display:block}
 .kopf-tat{margin-left:auto;order:2}
 .nav{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--dunkel);z-index:99;
  transform:translateX(100%);transition:transform .24s;overflow-y:auto;padding:5.4rem 1.15rem 2.4rem;margin:0}
 .nav.auf{transform:none}
 .nav-liste{flex-direction:column;align-items:stretch;gap:0}
 .nav-liste>li{border-bottom:1px solid var(--linie)}
 .nav-liste a,.nav-knopf{padding:.95rem .2rem;font-size:1.02rem;width:100%;justify-content:space-between}
 .burger{position:relative;z-index:101}
 /* Mega-Menüs in der Mobil-Navigation aufgeklappt */
 .mega{position:static;box-shadow:none;background:0;padding:0 0 .95rem;min-width:0;width:auto;max-height:none}
  .mega--breit{width:auto}
 .mega--breit .mega-innen{grid-template-columns:1fr;gap:1.15rem}
 .mega a{color:var(--ink-2);padding:.42rem .2rem;font-size:.92rem;hyphens:auto}
 .mega a:hover{background:0;color:var(--marke)}
 .mega-liste,.mega-liste--l,.mega--breit .mega-liste{grid-template-columns:1fr 1fr}
 .mega-titel{color:var(--ink-2);padding-left:.2rem}
 .mega-fuss{border-color:var(--linie)}
 .lgitter,.wgitter,.schritte,.gal{grid-template-columns:1fr 1fr}
 .tz{grid-template-columns:1fr 1fr}
 .bw{flex:0 0 100%}
 .abs{padding:3.2rem 0}
 .hero-gitter{padding-top:2.4rem;padding-bottom:2.6rem}
 .form{padding:1.25rem}
 .fuss-gitter{grid-template-columns:1fr 1fr}
 .fuss-sp--marke{grid-column:1/-1}
}
@media (max-width:560px){
 /* Kopfzeile wuerde sonst breiter als der Schirm: Nummer wandert ins Band. */
 .kopf-tat{display:none}
 .kopf-band-tel{display:inline-flex;gap:.3rem;align-items:center}
 .kopf-band-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (max-width:520px){
 .huelle{padding:0 16px}
 .lgitter,.wgitter,.schritte,.form-reihe,.fuss-gitter{grid-template-columns:1fr}
 /* Galerie bleibt zweispaltig: einspaltig waere die Seite rund 2.500 px laenger,
    ohne dass die Bilder dadurch mehr aussagen. */
 .gal{grid-template-columns:1fr 1fr;gap:.55rem}
 .tz{grid-template-columns:1fr}
 .tz li{display:flex;align-items:baseline;gap:.62rem;text-align:left;padding:.85rem 1.05rem}
 .tz strong{font-size:1.12rem}
 .tz-u{margin-left:auto}
 .hero-tat .knopf{width:100%}
 .cc-knoepfe .knopf{flex:1 1 100%}
 .marke-claim{display:none}
 .geb-cta{flex-direction:column}
 .geb-cta .knopf{width:100%}
}

/* ==================================================== Unterseiten */
.huelle--schmal{max-width:880px}
.abs-t--links{text-align:left!important;margin-left:0!important;margin-right:0!important;max-width:24ch}

/* Brotkrumen */
.krumen{background:var(--dunkel-2);color:var(--auf-2);font-size:.79rem;border-bottom:1px solid var(--dunkel-3)}
.krumen ol{display:flex;flex-wrap:wrap;gap:.42rem;padding-top:.62rem;padding-bottom:.62rem}
.krumen li{display:flex;align-items:center;gap:.42rem}
.krumen li+li::before{content:"›";color:var(--auf-3)}
.krumen a{color:var(--auf-2);text-decoration:none}
.krumen a:hover{color:var(--marke);text-decoration:underline}
.krumen span[aria-current]{color:var(--auf-1);font-weight:700}

/* Hero der Unterseiten etwas flacher als auf der Startseite */
.hero--unter .hero-gitter{padding-top:2.7rem;padding-bottom:2.7rem}
.hero--unter .hero-h1{font-size:clamp(1.62rem,.92rem + 2.75vw,3.05rem)}
.hero-haken{display:grid;gap:.48rem;margin:0 0 1.5rem}
.hero-haken li{position:relative;padding-left:1.75rem;font-size:.925rem;color:var(--auf-2)}
.hero-haken li::before{content:"✓";position:absolute;left:0;top:0;color:var(--marke);font-weight:800}

/* Fließtext */
.fliess{max-width:68ch}
.fliess p{margin:0 0 1.05rem;font-size:1.005rem;line-height:1.72;color:var(--ink-2)}
.fliess p:first-child{color:var(--ink)}
.abs--dunkel .fliess p{color:var(--auf-2)}

/* Hilfe-Kasten */
.hilfe{margin-top:2rem;border:1px solid var(--linie);border-left:4px solid var(--marke);
 border-radius:10px;padding:1.5rem 1.6rem;background:#fff}
.abs--grund2 .hilfe{background:#fff}
.hilfe-t{font-size:1.06rem;margin:0 0 .95rem}
.hilfe-l{display:grid;grid-template-columns:1fr 1fr;gap:.62rem 1.4rem}
.hilfe-l li{position:relative;padding-left:1.6rem;font-size:.905rem;color:var(--ink-2);line-height:1.55}
.hilfe-l li::before{content:"✓";position:absolute;left:0;top:0;color:var(--marke-tief);font-weight:800}

/* Textkarten */
.tkgitter{display:grid;grid-template-columns:repeat(3,1fr);gap:1.05rem;margin-top:2.2rem}
.tk{background:#fff;border:1px solid var(--linie);border-radius:11px;padding:1.35rem 1.3rem}
.abs--grund2 .tk{background:#fff}
.tk-t{font-size:1rem;margin:0 0 .42rem}
.tk-p{font-size:.858rem;color:var(--ink-2);margin:0;line-height:1.58}
.tk-cta{text-align:center;margin:1.9rem 0 0}

/* Kostenfaktoren */
.kfgitter{display:grid;grid-template-columns:repeat(4,1fr);gap:1.05rem;margin-top:2.2rem}
.kf{background:#fff;border:1px solid var(--linie);border-radius:11px;padding:1.35rem 1.25rem;
 border-top:4px solid var(--marke)}
.kf-t{font-size:.985rem;margin:0 0 .42rem}
.kf-p{font-size:.845rem;color:var(--ink-2);margin:0;line-height:1.56}
.kf-hinweis{margin:1.9rem auto 0;max-width:62ch;text-align:center;font-size:.895rem;
 color:var(--ink-2);background:#fff;border:1px dashed var(--linie);border-radius:10px;padding:1.1rem 1.3rem}

/* FAQ */
.fqliste{display:grid;gap:.62rem;margin-top:2rem}
.fq{border:1px solid var(--linie);border-radius:10px;background:#fff;overflow:hidden}
.fq-k{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;width:100%;
 padding:1.05rem 1.25rem;background:0;border:0;font:inherit;font-weight:700;font-size:.975rem;
 text-align:left;cursor:pointer;color:var(--ink);line-height:1.45}
.fq-k:hover{background:var(--grund-2)}
.fq-z{position:relative;flex:0 0 18px;width:18px;height:18px;margin-top:.18rem}
.fq-z::before,.fq-z::after{content:"";position:absolute;background:var(--marke-tief);
 border-radius:2px;transition:transform .2s}
.fq-z::before{top:8px;left:0;width:18px;height:2.5px}
.fq-z::after{top:0;left:8px;width:2.5px;height:18px}
.fq-k[aria-expanded=true] .fq-z::after{transform:rotate(90deg)}
.fq-a{padding:0 1.25rem 1.15rem}
.fq-a p{margin:0;font-size:.925rem;color:var(--ink-2);line-height:1.68}

/* Verteiler: Ortskarten */
.okgitter{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.2rem}
.ok{background:#fff;border:1px solid var(--linie);border-radius:11px;padding:1.15rem 1.2rem}
.ok-t{font-size:1rem;margin:0 0 .18rem;display:flex;align-items:center;gap:.42rem}
.ok-pin{color:var(--marke);font-size:.72rem}
.ok-kreis{font-size:.735rem;color:var(--ink-2);margin:0 0 .78rem}
.ok-l{display:grid;gap:.16rem;margin:0 0 .72rem}
.ok-l a{font-size:.812rem;color:var(--ink-2);text-decoration:none;display:block;padding:.06rem 0}
.ok-l a:hover{color:var(--marke-tief);text-decoration:underline}
.ok-alle{margin:0;padding-top:.62rem;border-top:1px solid var(--linie)}
.ok-alle a{font-size:.83rem;font-weight:800;color:var(--marke-tief);text-decoration:none}
.ok-alle a:hover{text-decoration:underline}

@media (max-width:1080px){
 .tkgitter,.kfgitter{grid-template-columns:repeat(2,1fr)}
 .okgitter{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:800px){
 .okgitter{grid-template-columns:repeat(2,1fr)}
 .hilfe-l{grid-template-columns:1fr}
 .abs-t--links{max-width:none}
}
@media (max-width:520px){
 .tkgitter,.kfgitter,.okgitter{grid-template-columns:1fr}
 .hilfe{padding:1.15rem 1.2rem}
 .fq-k{padding:.9rem 1rem;font-size:.925rem}
 .fq-a{padding:0 1rem 1rem}
}

/* ==================================================== Phase 3: Kern-, Funnel-, Rechtsseiten */
.warnung{border:2px solid var(--marke);border-radius:11px;background:#FBF6EA;
 padding:1.25rem 1.4rem;margin:0 0 2.2rem}
.warnung-t{font-size:1rem;margin:0 0 .48rem;color:var(--ink)}
.warnung p{margin:0;font-size:.905rem;color:var(--ink-2);line-height:1.65}
.offen{background:#F6EDD8;border-bottom:2px dotted var(--marke-tief);padding:0 .18rem;
 color:var(--marke-tief);font-weight:600}
.platzhalter{border:2px dashed var(--linie);border-radius:11px;padding:1.7rem 1.5rem;
 background:var(--grund-2);margin-top:1.3rem}
.platzhalter p{margin:0 0 .62rem;font-size:.905rem;color:var(--ink-2);line-height:1.65}
.platzhalter p:last-child{margin:0}
.platzhalter code{background:#fff;border:1px solid var(--linie);border-radius:4px;
 padding:.08rem .32rem;font-size:.85em}

/* Kontakt */
.kontakt-gitter{display:grid;grid-template-columns:1fr 1.05fr;gap:2.6rem;margin-top:2.2rem;align-items:start}
.kontakt-t{font-size:.78rem;text-transform:uppercase;letter-spacing:.11em;color:var(--marke-tief);
 margin:1.6rem 0 .48rem}
.kontakt-sp>.kontakt-t:first-child{margin-top:0}
.kontakt-nap{font-size:.955rem;line-height:1.72;margin:0;color:var(--ink-2)}
.kontakt-nap strong{color:var(--ink)}
.kontakt-nap a{color:var(--marke-tief);font-weight:700}
.kontakt-tel{font-size:1.2rem}
.kontakt-klein{font-size:.83rem;color:var(--ink-2);line-height:1.6;margin:.85rem 0 0}
.kontakt-sp .knopf{margin-top:1.4rem}

/* Danke / 404 */
.hero--danke .hero-gitter{display:block}
.danke{max-width:44rem;padding:3.4rem 0 3.6rem;position:relative}
.danke .hero-h1{font-size:clamp(1.62rem,.92rem + 2.75vw,3.05rem)}
.danke .hero-h1 span{display:block}

/* Rechtstexte */
.recht .rt-h1{font-size:clamp(1.9rem,1.2rem + 2vw,2.6rem);margin:0 0 1.7rem}
.rt{margin:0 0 2.1rem}
.rt-t{font-size:1.12rem;margin:0 0 .72rem;padding-top:1.3rem;border-top:1px solid var(--linie)}
.rt p{font-size:.945rem;line-height:1.74;color:var(--ink-2);margin:0 0 .95rem}
.rt p strong{color:var(--ink)}
.rt a{color:var(--marke-tief);font-weight:700}
.rt code{background:var(--grund-2);border:1px solid var(--linie);border-radius:4px;
 padding:.08rem .32rem;font-size:.88em}
.rt-l{margin:0 0 .95rem;display:grid;gap:.55rem}
.rt-l li{position:relative;padding-left:1.35rem;font-size:.945rem;line-height:1.7;color:var(--ink-2)}
.rt-l li::before{content:"—";position:absolute;left:0;color:var(--marke-tief)}
.rt-quelle{font-size:.845rem!important;background:var(--grund-2);border-left:3px solid var(--marke);
 padding:.72rem .95rem;border-radius:0 6px 6px 0}
.rt-hinweis{font-size:.858rem!important;color:var(--ink-2)!important;background:#FBF6EA;
 border-radius:6px;padding:.72rem .95rem}
.rt-stand{font-size:.83rem;color:var(--ink-2);margin-top:2.2rem;padding-top:1.2rem;
 border-top:1px solid var(--linie)}

@media (max-width:960px){ .kontakt-gitter{grid-template-columns:1fr;gap:2rem} }
@media (max-width:520px){ .warnung{padding:1.05rem 1.1rem} .danke{padding:2.4rem 0 2.6rem} }

/* Vollständige Bewertungsliste auf /bewertungen/ */
.bwsliste{display:grid;grid-template-columns:repeat(2,1fr);gap:1.15rem;margin-top:2.2rem}
.bws{background:#fff;border:1px solid var(--linie);border-radius:12px;padding:1.5rem 1.4rem;
 display:flex;flex-direction:column}
.bws-sterne{color:var(--marke-tief);font-size:1.02rem;letter-spacing:.11em;margin:0 0 .72rem}
.bws-text{margin:0 0 1.05rem;flex:1}
.bws-text p{font-size:.905rem;line-height:1.68;margin:0;color:var(--ink)}
.bws-wer{margin:0;padding-top:.85rem;border-top:1px solid var(--linie)}
.bws-wer strong{display:block;font-size:.905rem}
.bws-wer span{font-size:.795rem;color:var(--ink-2)}
@media (max-width:800px){ .bwsliste{grid-template-columns:1fr} }

/* Zwei Standorte auf der Startseite */
.standorte{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2.3rem}
.standort{display:flex;flex-direction:column;gap:.85rem}
.standort-foto{border-radius:13px;width:100%;aspect-ratio:3/2;object-fit:cover}
.standort-t{font-size:1.16rem;margin:0;color:var(--auf-1)}
.standort-adr{margin:0;font-size:.855rem;color:var(--marke);font-weight:700}
.standort-p{margin:0;font-size:.912rem;color:var(--auf-2);line-height:1.62}
.standort-teile{margin:0;font-size:.845rem;color:var(--auf-3);line-height:1.6}
.standort-teile strong{color:var(--auf-1)}
.standort-cta{margin:.35rem 0 0}
@media (max-width:860px){ .standorte{grid-template-columns:1fr;gap:2.4rem} }