/* =================================================================
   Kolewa Jens Baumaschinen und Nutzfahrzeuge — stil.css
   Dunkel, Stahl + ein Amber-Akzent. Zwei Schriften: Archivo (Display),
   Public Sans (Text). Datenwerte ueber tabular-nums, keine dritte Familie.
   Radius 0 (alles scharf, wie Stahlblech).
   ================================================================= */

/* ---------- Schriften, selbst gehostet ---------- */
@font-face{font-family:"Archivo";src:url("schrift/archivo-600-x.woff2") format("woff2");font-weight:600;font-stretch:125%;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("schrift/archivo-700-x.woff2") format("woff2");font-weight:700;font-stretch:125%;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-System ---------- */
:root{
  --grund:#15171b;        /* kaltes Stahl-Schwarz, nicht rein schwarz */
  --grund-2:#1a1d22;      /* leicht abgesetzter Abschnitt */
  --grund-tief:#0f1013;   /* Fussbereich */
  --flaeche:#21252c;      /* Karten, Panels */
  --flaeche-2:#282d35;    /* Hover, Eingaben */
  --linie:#333944;        /* Haarlinien, Stahlnaht */
  --linie-stark:#464e5b;
  --tinte:#e9ebee;        /* Text */
  --tinte-leise:#a8afb9;  /* gedaempft, >4.5:1 auf Grund */
  --tinte-still:#8c949e;  /* nur grosse/deko Schrift, >=3:1 */
  --akzent:#e8912e;       /* Maschinen-Amber, FLAECHEN */
  --akzent-text:#f4ac53;  /* Amber fuer SCHRIFT auf Dunkel */
  --akzent-tief:#5a3a12;  /* dunkles Amber fuer Raender/Schatten */
  --hebung:var(--akzent-text);   /* kippt am Untergrund, s.u. */

  --schrift-display:"Archivo","Public Sans",system-ui,sans-serif;
  --schrift-text:"Public Sans",system-ui,-apple-system,sans-serif;

  --breit:1200px;
  --luft:clamp(3.5rem,7vw,6rem);   /* Abstand zwischen Abschnitten */
  --pad-x:clamp(1.15rem,4vw,2.5rem);
}

/* helle Kaesten in dunklem Abschnitt setzen die Hebung zurueck.
   (Hier bleiben Flaechen dunkel; die Regel steht bereit fuer den Fall.) */
.hell{--hebung:var(--akzent)}

/* ---------- Reset / Basis ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-padding-top:88px;      /* fester Kopf, damit Anker nicht verdeckt */
  hyphens:auto;
}
body{
  background:var(--grund);
  color:var(--tinte);
  font-family:var(--schrift-text);
  font-size:clamp(1rem,.96rem + .3vw,1.1rem);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--hebung);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}
:focus-visible{outline:2px solid var(--akzent-text);outline-offset:3px}
::selection{background:var(--akzent);color:#15171b}

/* ---------- Layout ---------- */
.huelle{width:100%;max-width:var(--breit);margin-inline:auto;padding-inline:var(--pad-x)}
section{padding-block:var(--luft)}
.trenn{border-top:1px solid var(--linie)}      /* Stahlnaht zwischen Abschnitten */

/* min-width:0 gegen Ueberlauf in Grid/Flex-Kindern */
.raster>*,.flex>*{min-width:0}

/* ---------- Typografie: vier Auszeichnungsstufen ---------- */
h1,h2,h3{
  font-family:var(--schrift-display);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.01em;
  text-wrap:balance;
  hyphens:manual;
  color:var(--tinte);
}
h2{font-size:clamp(1.7rem,1.2rem + 2.3vw,2.9rem)}
h3{font-size:clamp(1.2rem,1.05rem + .8vw,1.55rem);font-weight:600;letter-spacing:0}
p{text-wrap:pretty;max-width:64ch;overflow-wrap:anywhere}

/* Stufe 1 — Rubrik (Kicker). "Mono-Gefuehl" ueber Sperrung + tnum. */
.rubrik{
  display:inline-block;
  font-family:var(--schrift-text);
  font-weight:600;
  font-size:.8125rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--hebung);
  hyphens:manual;
  margin-bottom:.9rem;
}
/* Stufe 2 — Datenwert (Nummern, Mengen, Kennnummern) */
.wert{
  font-variant-numeric:tabular-nums;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--hebung);
  hyphens:manual;
}
/* Stufe 3 — Betonung im Fliesstext: gleiche Schrift, 600, Akzent */
.stark,strong,b{font-weight:600;color:var(--hebung);hyphens:manual}
/* Stufe 4 — Kennzahl: Display gross, TEXTFARBE — die Groesse traegt */
.kennzahl{
  font-family:var(--schrift-display);
  font-weight:700;
  font-size:clamp(2.2rem,1.4rem + 3.4vw,3.4rem);
  line-height:.95;
  letter-spacing:-.02em;
  color:var(--tinte);
  font-variant-numeric:tabular-nums;
  hyphens:manual;
}

.blei{color:var(--tinte-leise);font-size:1.06em}
.klein{color:var(--tinte-leise);font-size:.9rem}
.quelle{color:var(--tinte-still);font-size:.8rem;line-height:1.5;margin-top:1rem;max-width:60ch}
.kopf-block{max-width:56ch}
.kopf-block h2{margin-top:.2rem}
.kopf-block p{margin-top:.9rem;color:var(--tinte-leise)}

/* ---------- Kopf / Navigation ---------- */
.kopf{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--grund) 88%,transparent);
  backdrop-filter:blur(9px);
  border-bottom:1px solid var(--linie);
}
.kopf__reihe{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  height:64px;
}
.marke{display:flex;align-items:baseline;gap:.5rem;font-family:var(--schrift-display);font-weight:700;font-size:1.02rem;letter-spacing:-.01em;color:var(--tinte);text-decoration:none;hyphens:manual}
.marke b{color:var(--akzent-text)}
.marke span{font-family:var(--schrift-text);font-weight:500;font-size:.78rem;letter-spacing:.04em;color:var(--tinte-leise)}
.nav{display:flex;align-items:center;gap:1.6rem}
.nav-liste{display:flex;align-items:center;gap:1.5rem;list-style:none}
.nav-liste a{color:var(--tinte-leise);text-decoration:none;font-weight:500;font-size:.95rem;padding:.3rem 0}
.nav-liste a:hover,.nav-liste a[aria-current="page"]{color:var(--tinte)}
.nav-liste a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--akzent)}
.kopf-cta{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--akzent);color:#15171b;font-weight:700;
  padding:.55rem .95rem;text-decoration:none;font-size:.92rem;
  white-space:nowrap;
}
.kopf-cta:hover{background:var(--akzent-text)}
.nav-schalter{display:none}

@media (max-width:820px){
  .nav-schalter{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;border:1px solid var(--linie-stark);color:var(--tinte);
  }
  .nav{position:fixed;inset:64px 0 auto 0;background:var(--grund-2);border-bottom:1px solid var(--linie);
    flex-direction:column;align-items:stretch;gap:0;padding:.5rem var(--pad-x) 1.2rem;
    transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s}
  .nav[data-offen="true"]{opacity:1;visibility:visible;transform:none}
  .nav-liste{flex-direction:column;align-items:stretch;gap:0}
  .nav-liste a{padding:.85rem 0;border-bottom:1px solid var(--linie);font-size:1.05rem}
  .kopf-cta{margin-top:1rem;justify-content:center;padding:.8rem}
}

/* ---------- Knoepfe ---------- */
.knopf{
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--akzent);color:#15171b;font-weight:700;
  padding:.85rem 1.4rem;text-decoration:none;font-size:1.02rem;
  border:1px solid var(--akzent);white-space:nowrap;
  transition:transform .12s,background .15s;
}
.knopf:hover{background:var(--akzent-text);border-color:var(--akzent-text)}
.knopf:active{transform:translateY(1px)}
.knopf .num{font-variant-numeric:tabular-nums}
.knopf-geist{
  display:inline-flex;align-items:center;gap:.55rem;
  background:transparent;color:var(--tinte);font-weight:600;
  padding:.8rem 1.3rem;text-decoration:none;
  border:1px solid var(--linie-stark);
  transition:border-color .15s,background .15s;
}
.knopf-geist:hover{border-color:var(--akzent-text);background:var(--flaeche)}

/* ---------- Hero (volle Breite, Foto + Abdunklung) ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--grund-tief);border-bottom:1px solid var(--linie)}
.hero__bild{position:absolute;inset:0;z-index:-2}
.hero__bild img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.hero::after{                     /* Abdunklung hinter der Schrift */
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(12,13,16,.94) 0%,rgba(12,13,16,.8) 42%,rgba(12,13,16,.4) 100%),
    linear-gradient(0deg,rgba(12,13,16,.9) 0%,rgba(12,13,16,.25) 55%);
}
.hero__inhalt{max-width:44rem;padding-block:clamp(4rem,9vh,7rem)}
.hero h1{font-size:clamp(2.3rem,1.5rem + 3.8vw,4.2rem);margin-top:.4rem}
.hero__lead{margin-top:1.2rem;color:#dfe3e8;font-size:clamp(1.05rem,1rem + .5vw,1.28rem);max-width:40ch}
.hero__tat{margin-top:1.9rem;display:flex;flex-wrap:wrap;gap:.9rem}
.hero__fuss{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;color:var(--tinte-leise);font-size:.9rem}
.hero__fuss span{display:inline-flex;align-items:center;gap:.5rem}
.hero__fuss span::before{content:"";width:6px;height:6px;background:var(--akzent);flex:none}

/* ---------- Stationen (frage / wahl / ergebnis) ---------- */
.station{background:var(--grund-2)}
.frage{border:0;padding:0;margin:0;min-width:0}
.frage legend{display:flex;align-items:baseline;gap:.7rem;padding:0;font-family:var(--schrift-display);font-weight:700;font-size:clamp(1.25rem,1.05rem + 1vw,1.7rem);line-height:1.1;color:var(--tinte);text-wrap:balance}
.frage legend .nr{
  flex:none;font-family:var(--schrift-text);font-size:.8rem;font-weight:700;
  font-variant-numeric:tabular-nums;color:#15171b;background:var(--akzent);
  width:1.7rem;height:1.7rem;display:inline-flex;align-items:center;justify-content:center;translate:0 -.15rem;
}
.hilfe{color:var(--tinte-leise);margin:.7rem 0 1.3rem;max-width:56ch}
.wahl{display:flex;flex-wrap:wrap;gap:.7rem}
.wahl button{
  min-height:44px;padding:.7rem 1.1rem;
  background:var(--flaeche);color:var(--tinte);font-weight:600;font-size:.98rem;
  border:1px solid var(--linie-stark);
  transition:border-color .14s;
}
.wahl button:hover{border-color:var(--linie-stark);background:var(--flaeche-2)}
.wahl button[aria-pressed="true"]{
  background:var(--akzent);color:#15171b;border-color:var(--akzent);
}
.ergebnis{
  margin-top:1.4rem;min-height:1px;
  border-left:2px solid var(--akzent);
  background:var(--flaeche);
  padding:1.2rem 1.3rem;
  max-width:60ch;
}
.ergebnis:empty{display:none}
.ergebnis p{margin:0;color:var(--tinte)}
.ergebnis .titel{font-weight:700;color:var(--tinte);display:block;margin-bottom:.35rem;font-family:var(--schrift-display)}

/* Raster fuer Station mit Foto (Einsatz-Waehler) */
.einsatz-raster{display:grid;grid-template-columns:1fr;gap:clamp(1.4rem,3vw,2.4rem);align-items:start}
@media (min-width:860px){.einsatz-raster{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}

/* Signaturmoment: echtes Maschinenfoto wechselt bei Auswahl */
.einsatz__buehne{position:relative;overflow:hidden;background:var(--flaeche);aspect-ratio:16/11;border:1px solid var(--linie)}
.einsatz__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:78% 62%}
.einsatz--aushub  .einsatz__foto{object-position:78% 62%}
.einsatz--umschlag .einsatz__foto{object-position:12% 46%}
.einsatz--erdbau  .einsatz__foto{object-position:84% 56%}
.einsatz__buehne::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(12,13,16,.55),rgba(12,13,16,0) 45%);pointer-events:none}
.einsatz__marke{position:absolute;left:0;bottom:0;z-index:1;margin:0;padding:.6rem .9rem;background:rgba(12,13,16,.72);font-size:.82rem;color:#e9ebee;max-width:100%}
.einsatz__marke b{color:var(--akzent-text)}
.frisch{animation:frisch .5s cubic-bezier(.16,1,.3,1)}
@keyframes frisch{from{opacity:.25;transform:scale(1.03)}to{opacity:1;transform:none}}

/* die Zuordnungsliste (ohne JS voll lesbar) */
.einsatz-liste{list-style:none;display:grid;gap:.2rem}
.einsatz-liste li{padding:.9rem 0;border-top:1px solid var(--linie)}
.einsatz-liste li:first-child{border-top:0;padding-top:0}
.einsatz-liste .e-titel{font-weight:700;color:var(--tinte)}
.einsatz-liste .e-txt{color:var(--tinte-leise);font-size:.95rem;margin-top:.15rem}
.einsatz-liste li[data-hervor="true"] .e-titel{color:var(--akzent-text)}

/* ---------- Karten / Bento mit Rhythmus ---------- */
.bento{display:grid;gap:1.3rem;grid-template-columns:1fr}
@media (min-width:760px){.bento{grid-template-columns:repeat(3,1fr)}}
.karte{background:var(--flaeche);border:1px solid var(--linie);padding:clamp(1.3rem,2.2vw,1.7rem);min-width:0}
.karte h3{margin-bottom:.55rem}
.karte p{color:var(--tinte-leise);font-size:.98rem}
.karte .marke-num{font-family:var(--schrift-text);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.14em;font-size:.78rem;color:var(--tinte-still);text-transform:uppercase;display:block;margin-bottom:.9rem}

/* ---------- Zug: Text + Bild im Wechsel ---------- */
.zug{display:grid;gap:clamp(1.4rem,3vw,2.6rem);align-items:center;grid-template-columns:1fr}
@media (min-width:820px){
  .zug{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zug--kehr .zug__bild{order:-1}
}
.zug__text>*+*{margin-top:1rem}
.zug__text p a{min-height:24px;display:inline-flex;align-items:center}
.zug__bild{margin:0;position:relative;overflow:hidden;border:1px solid var(--linie);background:var(--flaeche);aspect-ratio:4/3}
.zug__bild img{width:100%;height:100%;object-fit:cover}
.zug__bild figcaption{position:absolute;left:0;bottom:0;margin:0;padding:.55rem .8rem;background:rgba(12,13,16,.72);color:#d6dae0;font-size:.82rem;max-width:100%}
/* Ausschnitte, die Balken + Silhouette der Altfotos wegrahmen */
.obj-orange img,img.obj-orange{object-position:76% 62%}
.obj-gruen img,img.obj-gruen{object-position:12% 46%}
.obj-rot img,img.obj-rot{object-position:84% 55%}

/* ---------- Zahlenstreifen: eine gemeinsame Spalte ---------- */
.zahlen{display:grid;grid-template-columns:max-content 1fr;column-gap:clamp(1.1rem,2.4vw,2rem);row-gap:1.3rem;align-items:baseline}
.zahl{display:contents}
.zahl .z-wert{grid-column:1;text-align:right}
.zahl .z-text{grid-column:2;color:var(--tinte-leise);align-self:center}
.zahl .z-text b{color:var(--tinte)}
.zahlen-band{background:var(--grund-2)}

/* ---------- Zitat ---------- */
.zitat{max-width:34ch}
.zitat blockquote{font-family:var(--schrift-display);font-weight:600;font-size:clamp(1.4rem,1.1rem + 1.6vw,2.1rem);line-height:1.18;color:var(--tinte);text-wrap:balance;hyphens:manual}
.zitat blockquote::before{content:"";display:block;width:2.4rem;height:3px;background:var(--akzent);margin-bottom:1.2rem}
.zitat cite{display:block;margin-top:1.1rem;font-style:normal;color:var(--tinte-leise);font-size:.95rem}
.pull{margin-top:1.5rem;border-left:2px solid var(--akzent);padding-left:1.1rem;font-family:var(--schrift-display);font-weight:600;font-size:1.15rem;line-height:1.3;color:var(--tinte);text-wrap:pretty;hyphens:manual}

/* ---------- Kontakt / Formular ---------- */
.kontakt-raster{display:grid;gap:clamp(1.6rem,3.5vw,3rem);grid-template-columns:1fr}
@media (min-width:860px){.kontakt-raster{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}
.ruf{font-family:var(--schrift-display);font-weight:700;font-size:clamp(1.9rem,1.3rem + 3vw,3rem);line-height:1;letter-spacing:-.01em;color:var(--tinte);text-decoration:none;font-variant-numeric:tabular-nums;display:inline-block}
.ruf:hover{color:var(--akzent-text)}
.kontakt-zeile{margin-top:.9rem;color:var(--tinte-leise)}
.kontakt-zeile a{color:var(--akzent-text);text-decoration:none;min-height:24px;display:inline-flex;align-items:center}
.adressen{display:grid;gap:1.2rem;margin-top:1.8rem}
.adresse{border-top:1px solid var(--linie);padding-top:1.1rem}
.adresse:first-child{border-top:0;padding-top:0}
.adresse .art{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tinte-still);display:block;margin-bottom:.4rem}
.adresse p{color:var(--tinte-leise)}

.formular{background:var(--flaeche);border:1px solid var(--linie);padding:clamp(1.3rem,3vw,2rem)}
.feld{display:grid;gap:.4rem;margin-bottom:1.1rem}
.feld label{font-weight:600;font-size:.92rem;color:var(--tinte)}
.feld label .opt{font-weight:400;color:var(--tinte-still)}
.feld input,.feld textarea{
  width:100%;background:var(--grund);color:var(--tinte);
  border:1px solid var(--linie-stark);padding:.75rem .85rem;font:inherit;
}
.feld input::placeholder,.feld textarea::placeholder{color:#8a919c}
.feld input:focus-visible,.feld textarea:focus-visible{border-color:var(--akzent-text);outline-offset:0}
.feld textarea{min-height:130px;resize:vertical}
.formular .hinweis{color:var(--tinte-still);font-size:.82rem;margin-top:.4rem}

/* ---------- Google-Karte ueber Einwilligung ---------- */
.karte-band{position:relative;padding-block:var(--luft) 0}   /* oben Abstand, unten flush zum Fuss */
.karte-rahmen{position:relative;width:100%;height:clamp(280px,38vw,460px);background:var(--flaeche);border-top:1px solid var(--linie)}
.karte-rahmen iframe{width:100%;height:100%;border:0;display:block}
.karte-sperre{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:.9rem;padding:2rem 1.2rem;background:var(--grund-2)}
.karte-sperre p{color:var(--tinte-leise);max-width:44ch;margin-inline:auto}
.karte-sperre .knopf-reihe{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.karte-band[data-frei="true"] .karte-sperre{display:none}

/* ---------- Fuss ---------- */
.fuss{background:var(--grund-tief);color:var(--tinte-leise);border-top:1px solid var(--linie);--hebung:var(--akzent-text)}
.fuss .huelle{padding-block:clamp(2.6rem,5vw,3.6rem)}
.fuss-raster{display:grid;gap:1.6rem;grid-template-columns:1fr}
@media (min-width:720px){.fuss-raster{grid-template-columns:2fr 1fr 1fr}}
.fuss h4{font-family:var(--schrift-display);font-weight:600;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinte-still);margin-bottom:.9rem}
.fuss a{color:var(--tinte-leise);text-decoration:none}
.fuss a:hover{color:var(--tinte)}
.fuss p a{min-height:24px;display:inline-flex;align-items:center}
.fuss-liste{list-style:none;display:grid;gap:.55rem}
.fuss-liste a{min-height:24px;display:inline-flex;align-items:center}
.fuss-mark{font-family:var(--schrift-display);font-weight:700;color:var(--tinte);font-size:1.05rem}
.fuss-mark b{color:var(--akzent-text)}
.fuss-unten{margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid var(--linie);display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;font-size:.85rem;color:var(--tinte-still)}
.fuss-unten a{min-height:24px;display:inline-flex;align-items:center}

/* ---------- Brotkrumen (Unterseiten) ---------- */
.krumen{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;list-style:none;font-size:.85rem;color:var(--tinte-still);padding-block:1.1rem}
.krumen a{color:var(--tinte-leise);text-decoration:none;min-height:24px;display:inline-flex;align-items:center}
.krumen a:hover{color:var(--tinte)}
.krumen .sep{color:var(--linie-stark);letter-spacing:0}
.krumen [aria-current="page"]{color:var(--tinte-leise)}

/* ---------- Fortschrittslinie ---------- */
.fortschritt{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--akzent);z-index:60;pointer-events:none}

/* ---------- Detailseiten-Hero (flacher) ---------- */
.hero--flach{min-height:auto}
.hero--flach .hero__inhalt{padding-block:clamp(2.8rem,7vh,4.6rem)}
.hero--flach h1{font-size:clamp(2rem,1.5rem + 2.6vw,3.2rem)}

/* ---------- Recht-Seiten (schlicht, eine Spalte) ---------- */
.recht{max-width:70ch}
.recht h2{font-size:clamp(1.3rem,1.1rem + 1vw,1.7rem);margin-top:2.4rem}
.recht h2:first-of-type{margin-top:0}
.recht p,.recht li{color:var(--tinte-leise);margin-top:.8rem}
.recht ul{padding-left:1.2rem}
.recht p a{min-height:24px;display:inline-flex;align-items:center}
.hinweis-kasten{background:var(--flaeche);border-left:2px solid var(--akzent);padding:1.1rem 1.3rem;margin-top:1.6rem}
.hinweis-kasten p{color:var(--tinte);margin-top:0}

/* ---------- Abstaende Utility ---------- */
.mt-s{margin-top:1.6rem}.mt-m{margin-top:2.2rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Bewegung aus bei reduzierter Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .fortschritt{display:none}
  .frisch{animation:none}
}


/* ---- Hero-Band mit Bild, 02.08.2026 ---------------------------------------
   Auf Ansage: Kopfbild ueber die volle Breite, auf ALLEN Seiten (vorher hatte
   keine eines, auch die Startseite nicht — die Container waren leer).

   Warum unscharf: Die einzigen Fotos des Betriebs sind vier Collagen der
   alten Website, 387x401 Pixel, mit eingebranntem Schriftzug und einer weiss
   ausgestanzten Figur. Scharf ueber 1920 Pixel gezogen waeren das fuenffach
   hochskalierte Matschbilder mit Fremdkoerpern darin. Als weich gezeichneter
   Grund geben sie dem Band Farbe und Tiefe, wirken absichtsvoll statt
   verpixelt, und Schriftzug wie Figur verschwinden.
   Sobald der Betrieb echte Fotos liefert: `filter` entfernen, fertig. */
.hero__bild img{
  width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  /* 02.08.2026, Rueckmeldung „nicht ueber die volle Breite": Bei blur(22px)
     las sich das Band als Farbwolke, nicht als Foto. Mit 7 Pixeln erkennt
     man die Baustelle ueber die ganze Breite, und die Weichzeichnung deckt
     zugleich zu, dass die Vorlage nur 387 Pixel breit ist. Mehr geben die
     vier Aufnahmen des Betriebs nicht her. */
  filter:blur(7px) saturate(1.12) brightness(.62);
  transform:scale(1.06);          /* deckt die weichen Raender ab */
}
.hero--flach{min-height:clamp(15rem,26vh,20rem);display:flex;align-items:center}
.hero--flach .hero__bild img{filter:blur(8px) saturate(1.1) brightness(.58)}
@media (prefers-reduced-motion:reduce){.hero__bild img{transform:scale(1.18)}}

/* Das scharfe Einsatzbild im Band ist auf Ansage wieder entfernt
   (02.08.2026): Es bleibt allein der Hintergrund ueber die volle Breite. */
   /* schmal: nur der Grund */


/* ---- Uebergabe-Feinschliff 02.08.2026 ------------------------------------- */
/* Hero-Ueberschrift lief auf drei Zeilen — die Schrift wuchs schneller als
   der Platz. Obergrenze gesenkt, Mass an die Ueberschrift selbst. */
.hero h1{font-size:clamp(2rem,1.4rem + 2.2vw,2.9rem);max-width:22ch}

/* Gedrueckte Wahl: dunkler Text auf dunklem Grund ergab 1,17:1. Die
   gedrueckte Flaeche traegt jetzt den Akzent, der Text den dunklen Grund
   (durchgerechnet 5,4:1). */
.wahl button[aria-pressed="true"],[data-frage] button[aria-pressed="true"]{
  background:var(--akzent);color:#14171c;border-color:var(--akzent);
}

/* Rechtsseiten liefen schmal ueber den Rand: lange Begriffe umbrechen. */
.recht,.rechtstext{overflow-wrap:anywhere;min-width:0}