/* ============================================================
   CDF Crimmitschauer Dach- und Fassadenbau GmbH
   Dunkle, materialehrliche Handwerkerseite.
   Palette: Terracotta (Ziegelton) auf Schiefergrau.
   Schriften: Archivo Expanded (Display), Public Sans (Text).
   ============================================================ */

/* ---- Schriften, selbst gehostet ---- */
@font-face{font-family:"Archivo X";src:url("schrift/archivo-700-x.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo X";src:url("schrift/archivo-600-x.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("schrift/public-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("schrift/public-sans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("schrift/public-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("schrift/public-sans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---- Token ---- */
:root{
  --grund:#15181c;      /* tiefes Schiefergrau, nicht reinschwarz */
  --grund-2:#1b1f25;    /* leicht gehoben */
  --grund-3:#232830;    /* Karte, Feld */
  --tinte:#e9ebee;      /* Fließtext hell */
  --tinte-2:#a4abb3;    /* gedämpft */
  --linie:#333a43;
  --akzent:#b84a30;         /* Ziegelrot, für Flächen */
  --akzent-text:#e58a6c;    /* heller Ziegelton, für Schrift auf Dunkel (~7:1) */
  --akzent-fest:#fff;       /* Text auf Akzentfläche */
  --hebung:var(--akzent-text);
  --radius:14px;
  --schrift-display:"Archivo X",system-ui,sans-serif;
  --schrift-text:"Public Sans",system-ui,sans-serif;
  --breite:min(1200px,calc(100% - 2.4rem));
  --luft:clamp(3.5rem,7vw,6rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--grund);color:var(--tinte);
  font-family:var(--schrift-text);font-weight:400;font-size:clamp(1rem,.96rem + .3vw,1.12rem);
  line-height:1.65;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  hyphens:auto;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--akzent-text);outline-offset:3px}

.mitte{width:var(--breite);margin-inline:auto}
.verdeckt{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{position:fixed;left:1rem;top:-4rem;z-index:60;background:var(--akzent);color:var(--akzent-fest);
  padding:.7rem 1.1rem;border-radius:999px;font-weight:600;transition:top .2s}
.skip:focus{top:1rem}

/* ---- Auszeichnung: eine Ebene ---- */
h1,h2,h3{font-family:var(--schrift-display);font-weight:700;line-height:1.06;
  letter-spacing:-.01em;text-wrap:balance;hyphens:manual;margin:0}
h1{font-size:clamp(2.35rem,1.6rem + 3.4vw,4.4rem)}
h2{font-size:clamp(1.85rem,1.3rem + 2.2vw,3rem)}
h3{font-size:clamp(1.2rem,1.05rem + .7vw,1.55rem);letter-spacing:-.005em}
p{margin:0;text-wrap:pretty;overflow-wrap:anywhere}

/* Rubrik (Kicker): getrackte Versalie, EINE Ausprägung. Max 3 auf der Seite. */
.rubrik{font-family:var(--schrift-text);font-weight:600;font-size:.8125rem;
  text-transform:uppercase;letter-spacing:.16em;color:var(--hebung);margin:0 0 1rem}

/* ---- Knöpfe (Pille = ein Radius, plus 14px sonst) ---- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.5ch;
  font-family:var(--schrift-text);font-weight:600;font-size:1rem;line-height:1.1;
  text-decoration:none;border:0;border-radius:999px;cursor:pointer;
  padding:.85rem 1.5rem;min-height:44px;
  transition:transform .12s ease,background-color .2s ease,box-shadow .2s ease}
.knopf--fest{background:var(--akzent);color:var(--akzent-fest)}
.knopf--fest:hover{background:#a23f28}
.knopf--gross{background:var(--akzent);color:var(--akzent-fest);font-size:1.08rem;padding:1rem 1.9rem}
.knopf--gross:hover{background:#a23f28}
.knopf--linie{background:transparent;color:var(--tinte);border:1.5px solid var(--linie)}
.knopf--linie:hover{border-color:var(--akzent-text);color:var(--akzent-text)}
.knopf--voll{width:100%}
.knopf:active{transform:translateY(1px) scale(.99)}

/* ---- Fortschrittslinie ---- */
.fortschritt{position:fixed;inset:0 0 auto 0;height:3px;z-index:55;background:transparent;pointer-events:none}
.fortschritt span{display:block;height:100%;width:100%;background:var(--akzent);
  transform:scaleX(0);transform-origin:0 50%}

/* ---- Kopf ---- */
.kopf{position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--grund) 86%,transparent);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--linie)}
.kopf__reihe{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:64px;height:72px}
.marke{display:inline-flex;align-items:baseline;gap:.55rem;text-decoration:none;color:var(--tinte);
  font-family:var(--schrift-display);min-width:0}
.marke__kurz{font-weight:700;font-size:1.35rem;letter-spacing:.02em;color:var(--tinte)}
.marke__lang{font-family:var(--schrift-text);font-weight:500;font-size:.9rem;color:var(--tinte-2);white-space:nowrap}
.kopf__ruf{padding:.55rem 1.15rem;min-height:44px}
.knopf__nr{font-variant-numeric:tabular-nums;font-weight:700}
.knopf__label{display:none}

/* ---- Abschnittsraster ---- */
.abschnitt{padding-block:var(--luft)}
.kopfblock{max-width:60ch;margin-bottom:clamp(2rem,4vw,3rem)}
.kopfblock h2{margin-bottom:.9rem}
.kopfblock__text{color:var(--tinte-2);font-size:1.05rem}

/* ============================================================
   1 · HERO
   ============================================================ */
.hero{position:relative;min-height:min(88vh,760px);display:flex;align-items:flex-end;
  padding-block:clamp(3rem,8vh,7rem);overflow:hidden;isolation:isolate}
.hero__bild{position:absolute;inset:0;z-index:-2}
.hero__bild img{width:100%;height:100%;object-fit:cover;object-position:60% 28%}
.hero__schleier{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(10,12,14,.30) 0%,rgba(10,12,14,0) 34%,rgba(10,12,14,.55) 74%,rgba(12,14,17,.9) 100%),
    linear-gradient(75deg,rgba(12,14,17,.86) 6%,rgba(12,14,17,.5) 44%,rgba(12,14,17,.08) 78%)}
.hero__inhalt{position:relative;max-width:44rem}
.hero h1{font-size:clamp(2.3rem,1.55rem + 3vw,3.9rem)}
.hero__inhalt .rubrik{color:#f0a488}
.hero__lead{font-size:clamp(1.08rem,1rem + .5vw,1.35rem);color:#e7e9ec;
  margin:1.2rem 0 0;max-width:34rem;text-shadow:0 1px 18px rgba(0,0,0,.5)}
.hero h1{margin-top:.4rem;text-shadow:0 2px 26px rgba(0,0,0,.55)}
.hero .knopf--gross{margin-top:1.9rem}

/* ============================================================
   2 · LEISTUNGEN (Bento)
   ============================================================ */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:1.4rem}
.zelle{position:relative;border-radius:var(--radius);overflow:hidden;min-width:0;
  border:1px solid var(--linie);background:var(--grund-2);display:flex;min-height:230px}
.zelle--gross{grid-column:span 4;min-height:340px}
.zelle--foto{grid-column:span 2}
.zelle--gross.zelle--foto{grid-column:span 4}
.zelle--tinte{grid-column:span 2;background:var(--grund-2)}
.zelle--foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transition:transform .6s ease,filter .5s ease;filter:saturate(.86) brightness(.82)}
.zelle--foto:hover img{transform:scale(1.04);filter:saturate(.95) brightness(.98)}
.zelle--foto::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(12,14,17,.05) 40%,rgba(12,14,17,.88) 100%)}
.zelle__text{position:relative;z-index:2;margin-top:auto;padding:1.4rem}
.zelle--tinte .zelle__text{margin-top:0;align-self:center}
.zelle__text h3{margin-bottom:.55rem}
.zelle--tinte .zelle__text h3{color:var(--hebung)}
.zelle__text p{color:#d7dade;font-size:.98rem}
.zelle--tinte .zelle__text p{color:var(--tinte-2)}

/* ============================================================
   3 · STATION A / D (Selbstcheck)
   ============================================================ */
.station{background:var(--grund-2);border-block:1px solid var(--linie)}
.station__raster{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:start}
.station__hilfe{color:var(--tinte-2);margin:.9rem 0 1.8rem}
.wahl{border:0;padding:0;margin:0;min-width:0}
.wahl__legende{font-family:var(--schrift-display);font-weight:600;font-size:1.15rem;padding:0;
  display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}
.nr{display:inline-grid;place-items:center;width:1.8rem;height:1.8rem;flex:0 0 auto;
  border-radius:999px;background:var(--akzent);color:var(--akzent-fest);
  font-family:var(--schrift-text);font-weight:700;font-size:.95rem;font-variant-numeric:tabular-nums}
.wahl__gruppe{display:flex;flex-direction:column;gap:.7rem}
.wahl__gruppe button{text-align:left;font-family:var(--schrift-text);font-size:1rem;font-weight:500;
  color:var(--tinte);background:var(--grund-3);border:1.5px solid var(--linie);border-radius:var(--radius);
  padding:.95rem 1.15rem;min-height:44px;cursor:pointer;line-height:1.35;
  transition:border-color .18s,background-color .18s,color .18s}
.wahl__gruppe button:hover{border-color:var(--akzent-text)}
.wahl__gruppe button[aria-pressed="true"]{border-color:var(--akzent);
  background:color-mix(in srgb,var(--akzent) 20%,var(--grund-3));color:#fff}

.station__ergebnis{background:var(--grund-3);border:1px solid var(--linie);border-radius:var(--radius);
  padding:clamp(1.4rem,3vw,2rem);position:sticky;top:92px;align-self:start;min-width:0}
.ergebnis__marke{font-weight:600;font-size:.9rem;color:var(--tinte-2);margin:0 0 .8rem}
.ergebnis__text{font-size:1.12rem;line-height:1.5;margin:0 0 1.6rem;min-height:4.5rem}
.ergebnis__text b{color:var(--hebung);font-weight:600}

/* ============================================================
   4 · ABLAUF
   ============================================================ */
.ablauf__liste{list-style:none;margin:0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.ablauf__liste::before{content:"";position:absolute;left:0;top:1.1rem;height:2px;width:100%;
  background:var(--linie);z-index:0}
.ablauf__liste[data-ablauf]::after{content:"";position:absolute;left:0;top:1.1rem;height:2px;
  width:100%;background:var(--akzent);transform:scaleX(var(--wachs,0));transform-origin:0 50%;z-index:1}
.schritt{position:relative;z-index:2;min-width:0}
.schritt__nr{display:inline-grid;place-items:center;width:2.2rem;height:2.2rem;
  border-radius:999px;background:var(--grund-3);border:2px solid var(--linie);
  font-weight:700;font-variant-numeric:tabular-nums;color:var(--tinte);margin-bottom:1rem}
.schritt.wach .schritt__nr{background:var(--akzent);border-color:var(--akzent);color:var(--akzent-fest)}
.schritt h3{margin-bottom:.4rem}
.schritt p{color:var(--tinte-2);font-size:.96rem}

/* ============================================================
   5 · ENERGIE (Informations-Interaktion)
   ============================================================ */
.energie{background:var(--grund);text-align:center}
.energie__inhalt{max-width:44rem;margin-inline:auto}
.energie__lead{color:var(--tinte-2);font-size:1.08rem;margin:1rem auto 2rem;max-width:38rem}
.wahl--band{display:inline-flex;flex-direction:row;gap:.6rem;border:0;padding:0;margin:0 auto;flex-wrap:wrap;justify-content:center}
.wahl--band button{text-align:center;font-family:var(--schrift-text);font-size:1rem;font-weight:600;
  color:var(--tinte);background:var(--grund-3);border:1.5px solid var(--linie);border-radius:999px;
  padding:.75rem 1.4rem;min-height:44px;cursor:pointer;transition:border-color .18s,background-color .18s,color .18s}
.wahl--band button:hover{border-color:var(--akzent-text)}
.wahl--band button[aria-pressed="true"]{border-color:var(--akzent);
  background:color-mix(in srgb,var(--akzent) 22%,var(--grund-3));color:#fff}
.kennzahl{margin:2.4rem auto 0;max-width:34rem}
.kennzahl__wert{font-family:var(--schrift-display);font-weight:700;
  font-size:clamp(4rem,2.5rem + 9vw,8rem);line-height:.95;color:var(--tinte);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin:0}
.kennzahl__einheit{color:var(--hebung)}
.kennzahl__satz{color:var(--tinte-2);font-size:1.08rem;margin:.8rem auto 0;max-width:30rem}
.fussnote{color:var(--tinte-2);font-size:.85rem;margin:2rem auto 0;max-width:40rem;opacity:.85}

/* ============================================================
   6 · ZAHLEN + HALTUNG
   ============================================================ */
.zahlen{background:var(--grund-2);border-block:1px solid var(--linie)}
.zahlen__reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin:0 0 clamp(2.4rem,5vw,3.6rem)}
.zahl{min-width:0;padding-top:1.3rem;border-top:2px solid var(--akzent)}
.zahl__wert{font-family:var(--schrift-display);font-weight:700;font-size:clamp(2.6rem,1.8rem + 3vw,4rem);
  line-height:1;color:var(--tinte);font-variant-numeric:tabular-nums;letter-spacing:-.01em;margin:0 0 .6rem;hyphens:manual}
.zahl__label{color:var(--tinte-2);font-size:1rem;margin:0}
.haltung{margin:0;max-width:30ch}
.haltung p{font-family:var(--schrift-display);font-weight:600;font-size:clamp(1.5rem,1.1rem + 1.8vw,2.3rem);
  line-height:1.2;letter-spacing:-.01em;margin:0 0 1.1rem}
.haltung cite{font-style:normal;font-weight:600;font-size:.9rem;color:var(--hebung);
  text-transform:uppercase;letter-spacing:.08em}

/* ============================================================
   7 · SIGNATUR (Alt/Neu-Schieber)
   ============================================================ */
.signatur{padding-bottom:0}
.signatur__kopf{max-width:52ch;margin-bottom:clamp(1.8rem,4vw,2.6rem)}
.signatur__kopf p{color:var(--tinte-2);margin-top:.8rem;font-size:1.05rem}
.schieber{position:relative;width:100%;aspect-ratio:16/10;max-height:78vh;overflow:hidden;
  background:var(--grund-3);isolation:isolate;touch-action:pan-y}
@media (max-width:640px){.schieber{aspect-ratio:4/5}}
.schieber__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.schieber__foto--neu{z-index:0;filter:saturate(.95)}
.schieber__alt{position:absolute;inset:0;z-index:1;overflow:hidden;
  clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.schieber__alt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.7) brightness(.72)}
.schieber__marke{position:absolute;bottom:1rem;z-index:3;font-weight:600;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.12em;padding:.4rem .8rem;border-radius:999px;
  background:rgba(12,14,17,.72);color:#fff;pointer-events:none}
.schieber__marke--alt{left:1rem}
.schieber__marke--neu{right:1rem}
.schieber__griff{position:absolute;top:0;bottom:0;z-index:4;left:var(--pos);width:2px;
  background:#fff;transform:translateX(-1px);pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.schieber__griff span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:999px;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.4)}
.schieber__griff span::before,.schieber__griff span::after{content:"";position:absolute;top:50%;
  width:8px;height:8px;border-top:2px solid var(--akzent);border-right:2px solid var(--akzent)}
.schieber__griff span::before{left:13px;transform:translateY(-50%) rotate(-135deg)}
.schieber__griff span::after{right:13px;transform:translateY(-50%) rotate(45deg)}
.schieber__regler{position:absolute;inset:0;z-index:5;width:100%;height:100%;margin:0;
  opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent}
.schieber__regler::-webkit-slider-thumb{-webkit-appearance:none;width:52px;height:100%;cursor:ew-resize}
.schieber__regler::-moz-range-thumb{width:52px;height:100%;border:0;background:transparent;cursor:ew-resize}
.schieber:focus-within{outline:3px solid var(--akzent-text);outline-offset:-3px}

/* ============================================================
   8 · ÜBER (Zug: Text neben Bild)
   ============================================================ */
.zug{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
.zug__text h2{margin-bottom:1.1rem}
.zug__text p{color:var(--tinte-2);margin-bottom:1rem;max-width:42ch}
.zug__bild{margin:0}
.zug__bild img{width:100%;border-radius:var(--radius);border:1px solid var(--linie);
  aspect-ratio:4/3;object-fit:cover;filter:saturate(.85) brightness(.82)}
.zug__bild figcaption{color:var(--tinte-2);font-size:.9rem;margin-top:.8rem}

/* ============================================================
   9 · KONTAKT
   ============================================================ */
.kontakt{background:var(--grund-2);border-top:1px solid var(--linie)}
.kontakt__raster{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.8rem,4vw,3.4rem);align-items:start}
.gebiet{background:var(--grund-3);border:1px solid var(--linie);border-radius:var(--radius);
  padding:clamp(1.3rem,3vw,1.8rem);margin-bottom:1.6rem;--hebung:var(--akzent-text)}
.gebiet__frage{font-family:var(--schrift-display);font-weight:600;font-size:1.1rem;
  display:flex;align-items:center;gap:.7rem;margin:0 0 1.1rem}
.gebiet .wahl__gruppe{flex-direction:row;flex-wrap:wrap}
.gebiet .wahl__gruppe button{flex:1 1 auto}
.gebiet__ergebnis{color:var(--tinte-2);margin:1.1rem 0 0;font-size:1rem;min-height:3rem}
.gebiet__ergebnis b{color:var(--hebung);font-weight:600}
.direkt{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.direkt li{display:flex;gap:1rem;align-items:baseline;border-top:1px solid var(--linie);padding-top:.9rem}
.direkt__label{flex:0 0 5.5rem;color:var(--tinte-2);font-size:.9rem;font-weight:600}
.direkt a{color:var(--tinte);text-decoration:none;font-weight:600;word-break:break-word}
.direkt a:hover{color:var(--hebung)}

.formular{display:grid;gap:1.1rem;background:var(--grund-3);border:1px solid var(--linie);
  border-radius:var(--radius);padding:clamp(1.4rem,3.5vw,2.2rem);min-width:0}
.feld{display:grid;gap:.45rem}
.feld label{font-weight:600;font-size:.95rem}
.feld input,.feld textarea{font-family:inherit;font-size:1rem;color:var(--tinte);
  background:var(--grund);border:1.5px solid var(--linie);border-radius:var(--radius);
  padding:.8rem .9rem;width:100%;min-width:0;resize:vertical}
.feld input::placeholder,.feld textarea::placeholder{color:var(--tinte-2)}
.feld input:focus-visible,.feld textarea:focus-visible{border-color:var(--akzent-text);outline-offset:0}
.formular__hinweis{color:var(--tinte-2);font-size:.85rem;margin:0}

/* ============================================================
   10 · KARTE
   ============================================================ */
.karte{position:relative;width:100%;height:clamp(280px,38vw,460px);margin-top:var(--luft);
  background:var(--grund-3);overflow:hidden}
.karte__rahmen{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.karte__sperre{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:1.2rem;
  padding:1.5rem;background:var(--grund-3)}
.karte[data-frei] .karte__sperre{display:none}
.karte__sperre p{max-width:44ch;color:var(--tinte);margin:0}
.karte__aktionen{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}

/* ============================================================
   FUSS
   ============================================================ */
.fuss{background:#101317;border-top:1px solid var(--linie);padding-block:clamp(2.8rem,6vw,4rem) 2rem;
  --hebung:var(--akzent-text);color:var(--tinte-2)}
.fuss__raster{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.fuss__spalte p{margin:0 0 .8rem;font-size:.95rem;line-height:1.6}
.marke--fuss{display:flex;align-items:baseline;gap:.5rem;color:var(--tinte);font-family:var(--schrift-display);margin-bottom:1.1rem}
.marke--fuss span:last-child{font-family:var(--schrift-text);font-weight:500;font-size:.9rem;color:var(--tinte-2)}
.fuss__titel{font-family:var(--schrift-display);font-size:1.05rem;font-weight:600;color:var(--tinte);margin:0 0 .9rem}
.fuss a{color:var(--tinte);text-decoration:none}
.fuss a:hover{color:var(--hebung)}
.ks-cookie-oeffnen{margin-top:.4rem;font-size:.92rem;padding:.6rem 1.1rem;min-height:40px}
.fuss__stand{font-size:.82rem;margin:.7rem 0 0;color:var(--tinte-2);min-height:1.2em}
.fuss__unten{border-top:1px solid var(--linie);margin-top:2.4rem;padding-top:1.6rem;font-size:.85rem}

/* ============================================================
   BEWEGUNG: Startzustaende NICHT im CSS (editor-fest).
   GSAP setzt sie zur Laufzeit mit immediateRender:false.
   ============================================================ */

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .station__raster{grid-template-columns:1fr}
  .station__ergebnis{position:static}
  .zug{grid-template-columns:1fr}
  .zug__bild{order:-1}
  .kontakt__raster{grid-template-columns:1fr}
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento .zelle{grid-column:auto}
  .bento .zelle--gross{grid-column:1 / -1}
}
@media (max-width:720px){
  .marke__lang{display:none}
  .knopf__nr{display:none}
  .knopf__label{display:inline}
  .kopf__ruf .knopf__nr{display:none}
  .ablauf__liste{grid-template-columns:1fr;gap:1rem}
  .ablauf__liste::before,.ablauf__liste[data-ablauf]::after{left:1.05rem;top:0;height:100%;width:2px}
  .ablauf__liste[data-ablauf]::after{transform:scaleY(var(--wachs,0));transform-origin:50% 0}
  .schritt{padding-left:3.4rem}
  .schritt__nr{position:absolute;left:0;top:0;margin:0}
  .zahlen__reihe{grid-template-columns:1fr;gap:1.6rem}
  .fuss__raster{grid-template-columns:1fr;gap:2.2rem}
}
@media (max-width:560px){
  .bento{grid-template-columns:1fr}
  .zelle--gross{grid-column:span 1}
  .gebiet .wahl__gruppe button{flex:1 1 100%}
}

/* ============================================================
   REDUZIERTE BEWEGUNG
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .fortschritt{display:none}
  .ablauf__liste[data-ablauf]::after{transform:none}
  .schritt .schritt__nr{background:var(--akzent);border-color:var(--akzent);color:var(--akzent-fest)}
}

/* ---- Nachbesserung 31.07.2026 (von Hand, nach der Messung) -------------- */
/* Die Schrittzahl stand mit Fliesstextfarbe auf der Akzentflaeche: 4,33:1,
   gefordert sind 4,5. Weiss traegt auf BEIDEN Untergruenden — auf der Karte
   (#232830) 14,8:1, auf dem Ziegelrot (#b84a30) 5,2:1. Damit ist der Wert
   unabhaengig davon richtig, ob der Fortschrittsbalken schon durchgelaufen
   ist. */
.schritt__nr{color:#fff}

/* Telefon- und Mail-Zeilen waren 17 Pixel hoch, WCAG 2.5.8 verlangt 24.
   Ueber die Innenabstaende geloest, nicht ueber groessere Schrift. */
.direkt a[href^="tel:"],
.direkt a[href^="mailto:"],
.fuss a[href^="tel:"],
.fuss a[href^="mailto:"]{
  display:inline-block;padding-block:.3rem;min-height:24px;
}

/* Fuss- und Rechtslinks: WCAG 2.5.8 verlangt 24 Pixel Tipphoehe. Die Zeilen
   waren 17 Pixel hoch. Ueber die Innenabstaende geloest. */
.fuss a,.rechts a{display:inline-block;padding-block:.3rem;min-height:24px}
/* Lange Rechtsbegriffe und Adressen laufen auf schmalen Geraeten aus dem
   Satzspiegel — Umbruch erlauben statt die Seite breiter werden zu lassen. */
.rechts{min-width:0;overflow-wrap:anywhere}
.rechts ul{padding-left:0;margin-left:1.1rem}

/* Einwilligungsbanner: Es erbt den Akzent der Seite, und ein satter Farbton
   wie das Ziegelrot #b84a30 traegt auf dunklem Grund nur 3,2:1 — gefordert
   sind 4,5. Fuer Text im Banner deshalb ein aufgehellter Akzent, auf der
   Akzentflaeche Weiss (5,2:1). Die Flaechenfarbe selbst bleibt.
   Fester Wert statt color-mix: das Banner haengt ausserhalb des Bereichs, in
   dem `--akzent` aufloest, und color-mix fiel dort auf Schwarz zurueck.
   #d89b8d ist 55 % Ziegelrot auf Weiss und traegt 7,1:1 auf #1b1f25. */
.ks-cookie-eyebrow,
.ks-cookie-link,
.ks-cookie-btn:hover{color:#d89b8d}
.ks-cookie-btn-prima,
.ks-cookie-btn-primary{color:#fff}

/* ---- Karte auf dem Handy (03.08.2026 auf Ansage) --------------------------
   `clamp(280px,38vw,460px)` ergab bei 390 px Breite nur 148 px, also den
   280-px-Boden. Zu flach: Google legt unten eine Attributionsleiste und
   rechts die Bedienknöpfe darüber, der Marker rutschte an den oberen Rand
   und die Umgebung war kaum zu lesen. Auf schmalen Geräten deshalb ein
   Hochformat, das die Lage wirklich zeigt. */
@media (max-width:640px){
  .karte{height:min(68vh,430px)}
  /* Der Sperrbildschirm bekommt dieselbe Höhe und bleibt mittig lesbar. */
  .karte__sperre{padding:1.4rem 1.1rem;gap:1rem}
  .karte__sperre p{font-size:.94rem;line-height:1.55}
}