/* ============================================================
   MARVIN.WEB Fassung A2 "Die Fuge, mobil"
   Liegt ueber basis.css. Grundzustand ist das Handy (390 x 844); groesser wird es nur per min-width.

   Idee: das hochkant gehaltene Handy IST das Zeichen. Oben die Zusage (das M), unten der Beleg
   (das gespiegelte M), dazwischen die Fuge: ein Massband, fest bei 58svh.

   Zwei Fassungen desselben Inhalts:
   1. FLUSS (Grundzustand: ohne JS, Ruhefassung, Querformat mit wenig Hoehe). Jede Station steht
      als zwei Stockwerke untereinander, dazwischen ihre eigene Fuge. Nichts klebt, nichts ist versteckt.
   2. BUEHNE (html.js-motion und mindestens 561px hoch). Das obere Stockwerk ist eine feste Anzeige:
      .deckel deckt alles ab, was ueber die Linie gewandert ist; je Station klebt ein durchsichtiges
      .station__oben darueber, darin kommt die Zusage von oben an die Linie. Unten laeuft die Seite
      nativ mit dem Daumen; Belege docken per sticky unter der Linie an und verschwinden danach IN ihr.
      Stationen ueberlappen sich um 58svh, damit die Anzeige nahtlos von einer an die naechste geht.

   Kontrast: NUR die gerechneten Paare aus dem Kopf von basis.css.
     Kreide-Grund: Teer 16,30 | Signal-Text #b53507 5,36 | Muted 4,98 | Signal #e8440a nur Grafik und Schrift ab 24px
     Teer-Grund:   Kreide 16,30 | Papier 14,37 | Signal 4,60 | Muted-dunkel 6,02
     Knopf:        Kreide auf #b53507 5,36
   Kreide-2 und Teer-2 sind Flaechen fuer Grafik, nie Grund unter Schrift.
   ============================================================ */

:root{
  --s1:.8rem; --s2:1.2rem; --s3:1.6rem; --s4:2.4rem; --s5:3.2rem; --s6:4.8rem; --s7:6.4rem; --s8:9.6rem;
  --rand:max(var(--gutter), calc((100% - var(--wrap)) / 2));
  --linie:.3rem;                 /* Staerke der Messlinie */
  --strich:1.3rem;               /* Laenge der grossen Teilstriche */
  --streifen:1.8rem;             /* fester Streifen des Bands: Linie + Teilstriche + Luft */
  --raste:cubic-bezier(.35,0,.15,1); /* CSS-Naeherung der Hauskurve "raste" */
  --kopf:5.6rem;                 /* Hoehe der Kopfzeile (nur Wortmarke) */
  --leiste:calc(5.6rem + env(safe-area-inset-bottom, 0px));
  --fuge:58svh;                  /* Lage der Linie, von oben */
  --spalt:3rem;                  /* Abstand Linie -> angedockter Beleg */
  --anflug:24svh;                /* Weg, auf dem Zusage und Beleg an die Linie kommen */
  --halt:20svh;                  /* Weg, auf dem ein Paar eingerastet stehen bleibt */
}
@media (min-width:1024px){ :root{ --leiste:0px; --kopf:8rem; --anflug:22svh; --halt:24svh } }

.defs{position:absolute;width:0;height:0;overflow:hidden}
.strich{color:var(--signal-text)}
.klein{font-size:1.5rem;line-height:1.55;color:var(--muted);max-width:68ch}
main:focus{outline:none}

/* Ueberschrift passt sich an: das breiteste Wort fuellt hoechstens die Spalte.
   --w = gemessene Breite des breitesten Worts in em (_pruef/fit-messen.mjs) plus Luft. */
.oben__inhalt,.beleg{container-type:inline-size}
.fit{font-size:min(var(--max,7.2rem), calc(100cqi / var(--w,8)))}
.h2{--max:6.4rem;line-height:.92}
.hero__h1{--w:7.7;--max:9.6rem;line-height:.9}
#problem-h{--w:8.8}
#pakete-h{--w:9.8}
#ablauf-h{--w:6.9}
#sicher-h{--w:4.75}
#kontakt-h{--w:8.45}
#faq-h{--w:5.4}
.check__h{--w:8.3;--max:min(5.6rem, 5.4svh)}
#paar-termine .fit{--w:7.75}
#paar-preis .fit{--w:7.9}
#paar-texte .fit{--w:7.75}
#paar-klartext .fit{--w:12.55}
#paar-tempo .fit{--w:6.4}
.station--bogen .fit{--w:9.05}
#sicher-preis .fit{--w:5.8}
#sicher-freigabe .fit{--w:6.9}
#sicher-korrektur .fit{--w:13.45}

/* ---------- Knoepfe und Links ---------- */
.knoepfe{display:flex;flex-wrap:wrap;gap:var(--s3)}
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:4.8rem;padding:1.2rem 2rem;
  font-family:var(--body);font-weight:700;font-size:1.6rem;line-height:1.15;text-decoration:none;text-align:center;
  color:var(--teer);background:var(--kreide);border:2px solid var(--teer);box-shadow:.4rem .4rem 0 var(--teer);
  cursor:pointer;transition:transform .14s var(--raste),box-shadow .14s var(--raste);-webkit-tap-highlight-color:transparent}
.knopf:hover{transform:translate(.2rem,.2rem);box-shadow:.2rem .2rem 0 var(--teer)}
.knopf:active,.knopf:disabled{transform:translate(.4rem,.4rem);box-shadow:0 0 0 var(--teer)}
.knopf:disabled{cursor:progress}
.knopf--primaer{background:var(--signal-text);color:var(--kreide)}
.knopf--klein{min-height:4.4rem;padding:.8rem 1.6rem;font-size:1.5rem}
.knopf--gross{min-height:5.6rem;font-size:1.8rem;width:100%}
.pfeillink{display:inline-flex;align-items:center;min-height:4.4rem;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.32em;text-decoration-color:var(--signal);transition:color .15s}
.pfeillink::after{content:" \2192"}
.pfeillink:hover{color:var(--signal-text)}

/* ---------- Kopf: nur die Wortmarke (Desktop: dazu die Navigation) ---------- */
.kopf{position:absolute;top:0;left:0;right:0;z-index:6;height:calc(var(--kopf) + env(safe-area-inset-top, 0px));
  padding:env(safe-area-inset-top, 0px) max(var(--rand), env(safe-area-inset-right, 0px)) 0 max(var(--rand), env(safe-area-inset-left, 0px));display:flex;align-items:center;gap:var(--s5);color:var(--teer);pointer-events:none}
.kopf > *{pointer-events:auto}
.kopf__marke{display:flex;align-items:center;flex:none;height:4.4rem;color:inherit;transition:color .2s}
.kopf__marke .wm{height:3.2rem;width:auto}
.wm-blitz{fill:var(--signal)}
.kopf__nav,.kopf__check{display:none}
html.kopf-teer .kopf{color:var(--papier)}

/* ---------- Die Fuge: das Massband (nur mit Bewegung, siehe unten) ---------- */
.deckel,.massband{display:none}
.massband{position:fixed;left:0;right:0;top:var(--fuge);height:var(--streifen);z-index:5;pointer-events:none;
  --band-grund:var(--kreide);--band-strich:var(--teer);--band-text:var(--muted);
  background:var(--band-grund);transition:height .3s var(--raste)}
html.band-teer .massband{--band-grund:var(--teer);--band-strich:var(--papier);--band-text:var(--muted-d)}
/* Teilstriche: kleine alle 1,2rem, grosse alle 9,6rem. Harte Kanten, kein Verlauf im Sinn von Weichheit. */
.massband::after{content:"";position:absolute;left:0;right:0;top:var(--linie);height:var(--strich);
  background:
    repeating-linear-gradient(90deg,var(--band-strich) 0 2px,transparent 2px 9.6rem) 0 0/100% 100% no-repeat,
    repeating-linear-gradient(90deg,var(--band-strich) 0 1px,transparent 1px 1.2rem) 0 0/100% 50% no-repeat}
.massband__spur{position:absolute;left:0;right:0;top:0;height:var(--linie);background:var(--band-strich)}
.massband__weg,.massband__mess{position:absolute;left:0;top:-.1rem;width:100%;height:calc(var(--linie) + .2rem);background:var(--signal);transform-origin:0 50%;transform:scaleX(0)}
.massband__mess{display:none}
.massband__blitz{position:absolute;left:0;right:0;top:-.6rem;height:1.5rem;background:var(--signal);transform:scaleY(0)}
.massband__skala{display:none;position:absolute;left:0;right:0;top:calc(var(--linie) + var(--strich) + .3rem);height:3rem}
.massband__skala li{position:absolute;left:calc(var(--x) * 1%);transform:translateX(-50%);font-family:var(--mono);font-weight:500;font-size:1.2rem;line-height:1.2;letter-spacing:.04em;text-transform:none;color:var(--band-text);white-space:nowrap;text-align:center}
.massband__skala li:first-child{transform:none;left:.6rem;text-align:left}
.massband__skala li:last-child{transform:none;left:auto;right:.6rem;text-align:right}
.massband__skala b{display:block;font-weight:500;color:var(--band-strich)}
/* Pruefstand: das Band misst Sekunden. Die Teilung springt auf 1 s (gross) und 0,2 s (klein), 0 bis 8 s. */
html.messmodus .massband{height:calc(var(--streifen) + 3.4rem)}
html.messmodus .massband::after{background:
    repeating-linear-gradient(90deg,var(--band-strich) 0 2px,transparent 2px 12.5%) 0 0/100% 100% no-repeat,
    repeating-linear-gradient(90deg,var(--band-strich) 0 1px,transparent 1px 2.5%) 0 0/100% 50% no-repeat}
html.messmodus .massband__weg{display:none}
html.messmodus .massband__mess{display:block}
html.messmodus .massband__skala{display:block}

/* ---------- Grundzustand FLUSS: Stationen untereinander, jede mit eigener Fuge ---------- */
.station__oben,.station__unten{padding-left:max(var(--rand), env(safe-area-inset-left, 0px));padding-right:max(var(--rand), env(safe-area-inset-right, 0px))}
.station__oben{position:relative;padding-top:var(--s7);padding-bottom:var(--s3)}
.station--start .station__oben{padding-top:calc(var(--kopf) + var(--s7))}
.station__unten{position:relative;padding-top:calc(var(--linie) + var(--strich) + var(--s3));padding-bottom:var(--s4)}
/* die Fuge der Station: Signal-Linie mit Teilstrichen, auf Satzbreite */
.station__unten::before{content:"";position:absolute;left:var(--rand);right:var(--rand);top:0;height:calc(var(--linie) + var(--strich));
  background:
    linear-gradient(var(--signal),var(--signal)) 0 0/100% var(--linie) no-repeat,
    repeating-linear-gradient(90deg,var(--signal) 0 2px,transparent 2px 9.6rem) 0 var(--linie)/100% var(--strich) no-repeat,
    repeating-linear-gradient(90deg,var(--signal) 0 1px,transparent 1px 1.2rem) 0 var(--linie)/100% .65rem no-repeat}
.station--teer .station__unten::before{background:
    linear-gradient(var(--signal),var(--signal)) 0 0/100% var(--linie) no-repeat,
    repeating-linear-gradient(90deg,var(--papier) 0 2px,transparent 2px 9.6rem) 0 var(--linie)/100% var(--strich) no-repeat,
    repeating-linear-gradient(90deg,var(--papier) 0 1px,transparent 1px 1.2rem) 0 var(--linie)/100% .65rem no-repeat}
.raste{position:absolute;left:0;top:0;width:1px;height:1px;pointer-events:none}
.oben__inhalt{position:relative}
.beleg{display:grid;gap:var(--s3);align-content:start;justify-items:start}
.beleg > *{max-width:100%}

/* ---------- Teer-Stationen (Check, Fuss) ---------- */
.station--teer{background:var(--teer);color:var(--kreide)}
.station--teer .strich{color:var(--signal)}
.station--teer :focus-visible{outline-color:var(--signal)}

/* ---------- 1 Start ---------- */
.ort{margin-bottom:var(--s3)}
.hero__zeichen{position:absolute;z-index:0;left:0;width:100%;max-width:none;height:auto;fill:var(--kreide-2);pointer-events:none}
.hero__zeichen--o{bottom:var(--s3)}
.hero__zeichen--u{top:calc(var(--linie) + var(--strich) + .6rem)}
.station--start .station__oben,.station--start .station__unten{overflow-x:clip}
.station--start .oben__maske,.station--start .beleg{position:relative;z-index:1}
.belegzeile{display:flex;flex-wrap:wrap;gap:.4rem 0;color:var(--teer)}
.belegzeile li+li::before{content:"·";padding-inline:.8rem;color:var(--signal-text)}
.hero__knopf{width:100%;max-width:44rem}
.hero__text{font-size:1.7rem;line-height:1.5;max-width:40ch}

/* ---------- Ansage und Gruppen-Titel ---------- */
.ansage__zeile{color:var(--teer)}
.gruppe__titel{margin-bottom:var(--s3)}

/* ---------- Zusagen und Belege ---------- */
.zusage{--max:8rem;line-height:.9}
.zusage--mittel{--max:8rem}
.zusage--klein{--max:5.6rem}
.beleg__zahl{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:.4rem var(--s3)}
.beleg__zahl .zahl{--zmax:min(9.6rem, 11svh);font-size:min(var(--zmax), calc((100cqi - 10.5rem) / var(--zw,1)));line-height:.8;color:var(--signal);padding-top:.06em}
#paar-termine .zahl{--zw:.83}#paar-preis .zahl{--zw:3.5}#paar-texte .zahl{--zw:2.66}#paar-klartext .zahl{--zw:.8}#paar-tempo .zahl{--zw:2.3}
.beleg__zahl .einheit{padding-bottom:.4rem;color:var(--teer);max-width:16ch}
.einheit-klein{font-stretch:100%;font-weight:800;font-size:.42em;letter-spacing:0;text-transform:none}
.beleg__text{font-size:1.7rem;line-height:1.5;max-width:44ch}
.beleg__label{color:var(--signal-text);margin-bottom:-.6rem}
.quelle{color:var(--muted)}
.agentisch{color:var(--teer)}
.werte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3) var(--s4);width:100%;max-width:44rem;margin:0}
.werte div{display:flex;flex-direction:column-reverse;gap:.4rem;padding-top:var(--s1);border-top:2px solid var(--teer)}
.werte dd{margin:0;font-size:4.4rem;line-height:.86}
.werte dt{color:var(--teer)}

/* ---------- Probleme ---------- */
.problem__titel{font-size:clamp(2.6rem,7.4vw,3.2rem);font-weight:800;line-height:1.08;letter-spacing:-.01em;max-width:16ch}
.problem__text{margin-top:var(--s2);font-size:1.7rem;line-height:1.5;color:var(--muted);max-width:40ch}

/* ---------- 4 Check (Teer) ---------- */
.messkarte{margin-top:var(--s4)}
.messkarte__kopf{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.2rem var(--s3);padding-bottom:var(--s2);color:var(--muted-d)}
.messkarte__kopf b{font-weight:500;color:var(--kreide)}
.messkarte__werte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3) var(--s4)}
.messwert{display:grid;gap:.6rem;align-content:start}
.messwert__maske{display:block;overflow:clip;padding-top:.06em}
.messwert .n{display:block;font-size:min(13vw, 6.2svh, 6.4rem);line-height:.86}
@media (max-height:759px){ .messwert .vgl{display:none!important} .messkarte{margin-top:var(--s2)} }
.messwert__balken{position:relative;display:block;height:var(--linie);background:var(--teer-2)}
.messwert__balken::after{content:"";position:absolute;inset:0;background:var(--papier);transform:scaleX(calc(var(--wert,0) / 100));transform-origin:0 50%}
.messwert .l{color:var(--kreide)}
.messwert .vgl{color:var(--muted-d)}
.messwert[data-stufe="warn"] .messwert__balken::after,.messwert[data-stufe="kritisch"] .messwert__balken::after{background:var(--signal)}
.messwert[data-stufe="kritisch"] .n{color:var(--signal)}
.messwert:not([data-stufe]) .n{color:var(--muted-d)}
.feld__label{display:block;margin-bottom:.8rem}
.check__form{width:100%}
.check__zeile{display:grid;gap:var(--s2)}
input,textarea{width:100%;min-height:5.2rem;padding:1.2rem 1.4rem;font-size:1.7rem;background:var(--kreide);color:var(--teer);border:2px solid var(--teer);border-radius:0;-webkit-appearance:none;appearance:none}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
textarea{min-height:12rem;resize:vertical;line-height:1.5}
.station--teer input{border-color:var(--papier)}
.station--teer .knopf{border-color:var(--papier);box-shadow:.4rem .4rem 0 var(--papier)}
.station--teer .knopf:hover{box-shadow:.2rem .2rem 0 var(--papier)}
.station--teer .knopf:active,.station--teer .knopf:disabled{box-shadow:0 0 0 var(--papier)}
.knopf--hell{background:var(--teer);color:var(--papier)}
.check__zeile .knopf{width:100%;min-height:5.2rem}
.check__status{margin-top:var(--s2);font-size:1.6rem;line-height:1.5;color:var(--papier);max-width:52ch}
.check__status a{color:var(--kreide)}
.check__lede{font-size:1.7rem;line-height:1.5;color:var(--papier);max-width:44ch}
.ladezeit{display:grid;gap:var(--s1);width:100%}
.ladezeit__zeile{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);padding-top:var(--s2);border-top:2px solid var(--teer-2)}
.ladezeit__zeile .l{color:var(--kreide)}
.lz{display:block;font-size:6.4rem;line-height:.86;color:var(--muted-d);text-transform:none}
.station--check:has(#check-form[data-zustand="fertig"]) .lz{color:var(--signal)}
.station--check:has(#check-form[data-zustand="misst"]) .lz{font-family:var(--mono);font-weight:500;font-stretch:100%;font-size:1.6rem;letter-spacing:.06em;line-height:1.4;color:var(--papier);text-transform:uppercase}
.messwert__maske--unten{padding-top:0;padding-bottom:.04em}
.ladezeit__text{font-size:1.6rem;line-height:1.5;color:var(--papier);max-width:46ch}
.check__fusszeile{color:var(--muted-d)}
.check__hand{display:grid;gap:var(--s2);width:100%}
.check__hand h3{font-size:2.4rem;font-weight:800;line-height:1.15;max-width:22ch}
.check__hand p{color:var(--papier);max-width:46ch}
.check__hand .knoepfe{margin-top:var(--s2)}
.check__ort{color:var(--muted-d)!important}

/* ---------- 5 Pakete ---------- */
.paket__name{display:flex;align-items:center;gap:var(--s2);font-size:1.4rem;color:var(--teer)}
.paket__marke{background:var(--signal);color:var(--teer);padding:.3rem .8rem;font-size:1.2rem}
.paket__preis{margin-top:var(--s2);display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.2rem}
.paket__preis .disp{font-size:min(9.6rem, calc(100cqi / 4.9));line-height:.86}
.paket__preis--anfrage .disp{font-size:min(6.4rem, calc(100cqi / 9.9))}
.paket__preis .mono{color:var(--muted)}
.paket__zweck{font-weight:700;font-size:1.8rem;line-height:1.35;max-width:30ch}
.haken li{position:relative;padding:.4rem 0 .4rem 2.8rem;font-size:1.7rem;line-height:1.4}
.haken li::before{content:"";position:absolute;left:.3rem;top:1rem;width:1.3rem;height:.7rem;border-left:3px solid var(--signal-text);border-bottom:3px solid var(--signal-text);transform:rotate(-45deg)}
.bogen__zahlen{display:flex;gap:var(--s6)}
.bogen__zahl{display:grid;gap:.4rem}
.bogen__zahl .disp{font-size:7.2rem;line-height:.84;color:var(--signal)}
.bogen__zahl .mono{color:var(--teer)}

/* ---------- 6 Ablauf ---------- */
.schritte{margin:0;padding:0}
.schritt__nr{display:block;font-size:min(14rem, calc(100cqi / 1.62));line-height:.8;color:var(--teer);letter-spacing:-.03em}
.schritt__titel{margin-top:var(--s2);font-size:2.6rem;font-weight:800;line-height:1.1}
.ablauf__link{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 1.2rem}

/* ---------- 7 Ueber mich ---------- */
.station--ich .oben__inhalt{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr);gap:var(--s3);align-items:end}
.ich__bild{margin:0;aspect-ratio:2/3;overflow:clip;background:var(--kreide-2);max-height:calc(var(--fuge) - var(--kopf) - 6rem)}
.ich__bild img{width:100%;height:100%;object-fit:cover;object-position:62% 30%}
.ich__h{--w:5.9;--max:4.8rem;line-height:.92;font-size:min(var(--max), calc((100cqi - 18.6rem) / var(--w)))}
.ich__zitat{margin:0}
.ich__zitat p{font-size:min(3.2rem, calc(100cqi / 14.5));line-height:1.02}
.ich__name{color:var(--muted)}

/* ---------- 9 Kontakt ---------- */
.formular{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3);width:100%;max-width:64rem}
.formular__senden .knopf{width:100%;min-height:5.6rem;font-size:1.8rem}
.formular__hinweis a{color:var(--teer)}
.direkt{display:grid;gap:var(--s2);width:100%;padding-top:var(--s4);border-top:2px solid var(--teer)}
.direkt__h{font-size:2.6rem;font-weight:800;line-height:1.1}
.direkt .knoepfe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s2)}
.direkt .knoepfe .knopf:first-child{grid-column:1 / -1}
.direkt__zeit{color:var(--teer)}
.direkt__mail a{font-weight:700;text-underline-offset:.25em}
.erreichbar{color:var(--signal-text)}

/* ---------- 10 FAQ ---------- */
:root{interpolate-size:allow-keywords}
.fragen{width:100%;border-top:var(--linie) solid var(--teer)}
.frage{position:relative;border-bottom:2px solid var(--teer)}
.frage summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:5.6rem;padding:var(--s2) 0;cursor:pointer;list-style:none;font-weight:700;font-size:1.8rem;line-height:1.3;-webkit-tap-highlight-color:transparent}
.frage summary::-webkit-details-marker{display:none}
.frage__zeichen{position:relative;flex:none;width:2rem;height:2rem}
.fz-h{position:absolute;left:0;right:0;top:50%;height:var(--linie);margin-top:calc(var(--linie) / -2);background:var(--teer)}
.fz-o,.fz-u{position:absolute;left:50%;width:var(--linie);margin-left:calc(var(--linie) / -2);height:50%;background:var(--teer);transition:transform .28s var(--raste)}
.fz-o{top:0;transform-origin:50% 100%}
.fz-u{bottom:0;transform-origin:50% 0}
/* offen: die senkrechten Haelften fahren von aussen in die Linie und verschwinden dort */
.frage[open] .fz-o,.frage[open] .fz-u{transform:scaleY(0)}
.frage[open] .fz-h{background:var(--signal)}
.frage__antwort{padding:0 0 var(--s4);max-width:62ch}
.frage__antwort a{font-weight:700;text-underline-offset:.25em}
.frage::details-content{block-size:0;overflow:clip;transition:block-size .36s var(--raste),content-visibility .36s allow-discrete}
.frage[open]::details-content{block-size:auto}

/* ---------- 11 Fuss (Teer): das Zeichen schliesst sich an der Linie ---------- */
.station--schluss{--spalt:calc(var(--streifen) + .4rem);color:var(--papier);padding-bottom:var(--leiste)}
.fuss__haelfte{display:block;width:min(100%, 32.4rem);height:auto;fill:var(--papier)}
.fuss__wm{width:min(100%, 26rem);height:auto;color:var(--papier)}
.fuss__raster{display:grid;gap:var(--s4);width:100%}
.fuss__raster ul{display:grid}
.fuss__raster a{display:inline-flex;align-items:center;min-height:4.4rem;color:var(--kreide);text-decoration:none;font-weight:600}
.fuss__raster a:hover{text-decoration:underline;text-decoration-color:var(--signal);text-underline-offset:.3em}
.fuss__adresse{font-style:normal;line-height:1.7;color:var(--papier)}
.fuss__adresse a{min-height:0;display:inline;font-weight:400;text-decoration:underline;text-underline-offset:.25em}
.fuss__schluss{display:grid;gap:var(--s3);align-content:start;width:100%}
.fuss__copy{color:var(--muted-d)}

/* ---------- Daumenleiste ---------- */
.leiste{position:fixed;left:0;right:0;bottom:0;z-index:9;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  padding:0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);background:var(--kreide);border-top:2px solid var(--teer);color:var(--teer);
  transition:transform .26s var(--raste),visibility 0s linear 0s,background-color .2s}
.leiste__ziel{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;min-height:5.6rem;padding:.6rem .2rem;
  background:none;border:0;color:inherit;font-family:var(--mono);font-weight:500;font-size:1.2rem;letter-spacing:.04em;text-transform:uppercase;line-height:1;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.leiste__ziel:focus-visible{outline-offset:-4px}
.leiste__zeichen{display:block;width:2rem;height:2rem;fill:currentColor}
.leiste__ziel--check{background:var(--signal-text);color:var(--kreide)}
.leiste__burger{position:relative;display:block;width:2.2rem;height:1.4rem}
.leiste__burger span{position:absolute;left:0;right:0;height:.3rem;background:currentColor;transition:transform .3s var(--raste),background-color .3s}
.leiste__burger span:first-child{top:0}
.leiste__burger span:last-child{bottom:0}
/* offen: beide Haelften kommen von aussen an die Fuge und werden eine Linie */
.leiste__menue[aria-expanded="true"] .leiste__burger span:first-child{transform:translateY(.55rem);background:var(--signal)}
.leiste__menue[aria-expanded="true"] .leiste__burger span:last-child{transform:translateY(-.55rem);background:var(--signal)}
html.leiste-teer .leiste{background:var(--teer);border-top-color:var(--muted-d);color:var(--papier)}
html.leiste-teer .leiste__ziel--check{color:var(--kreide)}
/* Tippen: die Leiste geht aus dem Weg, sonst verdeckt sie das Feld ueber der Tastatur */
html.tippt .leiste{transform:translateY(110%);visibility:hidden;transition:transform .2s var(--raste),visibility 0s linear .2s}

/* ---------- Menue: Blatt von unten, aus der Leiste in den Daumenbereich ---------- */
.menue{position:fixed;inset:0;z-index:8}
.menue__schleier{position:absolute;inset:0;background:rgb(22 20 18 / .5)}
.menue__blatt{position:absolute;left:0;right:0;bottom:var(--leiste);max-height:calc(100dvh - var(--leiste) - var(--s5));overflow:auto;overscroll-behavior:contain;
  display:grid;gap:var(--s3);padding:var(--s4) var(--rand) var(--s4);background:var(--kreide);border-top:2px solid var(--teer)}
.menue__titel{color:var(--teer)}
.menue__liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s3)}
.menue__liste a{display:flex;align-items:center;min-height:5.2rem;font-family:var(--disp);font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:clamp(1.8rem,5.2vw,2.6rem);line-height:1;text-decoration:none;color:var(--teer)}
.menue__liste a:hover,.menue__liste a:focus-visible{color:var(--signal-text)}
.menue__fuge{height:var(--linie);background:var(--signal)}
.menue__direkt{display:grid;gap:var(--s2)}
.menue__knoepfe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s2)}
.menue__zeit{color:var(--teer)}
.menue__recht{font-size:1.5rem}
.menue__recht a{display:inline-block;padding-block:.8rem;color:var(--teer)}

/* ============================================================
   BUEHNE: mit Bewegung und genug Hoehe. Die Linie steht fest, oben die Anzeige, unten der Daumen.
   ============================================================ */
@media (min-height:561px){
  html.js-motion{scroll-padding-top:calc(var(--fuge) + 3rem);scroll-padding-bottom:calc(var(--leiste) + 1.6rem)}
  .js-motion .kopf{position:fixed}
  .js-motion .deckel{display:block;position:fixed;left:0;right:0;top:0;height:var(--fuge);z-index:3;background:var(--kreide)}
  html.js-motion.kopf-teer .deckel{background:var(--teer)}
  .js-motion .massband{display:block}

  /* Bis site.js die Zusagen ueber die Kante gesetzt hat, sind nur die der ersten Seite zu sehen
     (sonst schaut das naechste Feld vor dem Start unten ins Bild). Faellt JS aus, nimmt der Kopf
     nach 4 s .js-motion weg und alles steht im Fluss. */
  html.js-motion:not(.buehne-bereit) .station:not(.station--start) .oben__inhalt{visibility:hidden}

  /* Stationen ueberlappen sich um die Hoehe des oberen Stockwerks: die Anzeige geht nahtlos weiter */
  .js-motion .station{margin-top:calc(-1 * var(--fuge))}
  .js-motion .station--start,.js-motion .station--teer{margin-top:0}
  /* Beschnitt oben an der Kopfzeile (dort tritt die Zusage von aussen ein), unten an der Linie */
  .js-motion .station__oben{position:sticky;top:0;z-index:4;height:var(--fuge);overflow:clip;pointer-events:none;
    clip-path:inset(calc(var(--kopf) + env(safe-area-inset-top, 0px)) 0 0 0);
    display:flex;flex-direction:column;justify-content:flex-end;padding-top:calc(var(--kopf) + var(--s3));padding-bottom:0}
  .js-motion .oben__maske{padding-bottom:var(--s4)}
  .js-motion .station--teer .station__oben{background:var(--teer)}
  .js-motion .station__unten{padding-top:var(--anflug);padding-bottom:0}
  .js-motion .station__unten::before{display:none}
  .js-motion .station--start .station__unten{padding-top:var(--spalt);padding-bottom:var(--s4)}
  .js-motion .station--fluss .station__unten{padding-bottom:var(--s5)}

  /* Paare: der Beleg kommt von unten an die Linie, dockt an und haelt, dann geht er IN die Linie */
  .js-motion .station--paar .beleg,.js-motion .station--ansage .beleg{position:sticky;top:calc(var(--fuge) + var(--spalt))}
  .js-motion .station--paar .station__unten::after,.js-motion .station--ansage .station__unten::after{content:"";display:block;height:var(--halt)}
  .js-motion .station--ansage{--halt:14svh}

  /* Pruefstand: unter der Linie haengt die Sekundenskala, der Inhalt beginnt darunter */
  .js-motion .station[data-messung]{--spalt:6rem}

  /* Start: das Zeichen liegt hinter der ersten Seite, seine Fuge ist die Linie */
  .js-motion .hero__zeichen--o{bottom:var(--s4)}
  .js-motion .hero__zeichen--u{top:var(--streifen)}

  /* Fuss: die obere Haelfte endet knapp ueber der Linie, die untere kommt als Letztes von unten an */
  .js-motion .station--schluss .oben__maske{padding-bottom:.4rem}
  .js-motion .station--schluss .station__unten{padding-bottom:0}
  .js-motion .fuss__schluss{min-height:calc(100dvh - var(--fuge) - var(--leiste));padding-top:var(--spalt);margin-top:var(--s6)}
  .js-motion .station--schluss .fuss__inhalt{gap:var(--s5)}
}
/* Tippen am Handy: die Tastatur nimmt die untere Haelfte. Anzeige, Deckel und Linie gehen aus dem Weg,
   damit das Feld ueber der Tastatur frei steht; die Leiste ist oben schon ausgeblendet. */
@media (min-height:561px){
  html.js-motion.tippt{scroll-padding-top:calc(var(--kopf) + 1.6rem)}
  html.js-motion.tippt .deckel,html.js-motion.tippt .massband,html.js-motion.tippt .station__oben > *{visibility:hidden}
  html.js-motion.tippt .station--teer .station__oben{background:none}
}
/* Einrasten am Daumen: nur auf Touch, nur nah am Haltepunkt (proximity), nie am Mausrad */
@media (min-height:561px) and (pointer:coarse){
  html.js-motion{scroll-snap-type:y proximity}
  html.js-motion.springt,html.js-motion.tippt{scroll-snap-type:none}
  .js-motion .station--paar .raste,.js-motion .station--ansage .raste{top:calc(var(--anflug) - var(--spalt) + var(--halt) / 2 + 3rem);scroll-snap-align:start}
}

/* ============================================================
   QUER mit wenig Hoehe: die Stockwerke stehen nebeneinander, die Fuge steht senkrecht dazwischen
   (das Handy ist gedreht, das Zeichen dreht mit). Nichts klebt, nichts wird abgeschnitten.
   ============================================================ */
@media (max-height:560px) and (min-width:600px) and (orientation:landscape){
  :root{--quer:58%}
  .station{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);align-items:start}
  .station__oben{padding-right:var(--s5);padding-top:var(--s6);padding-bottom:var(--s5)}
  .station--start .station__oben{padding-top:calc(var(--kopf) + var(--s4))}
  .station__unten{padding-left:calc(var(--s4) + var(--linie) + var(--strich));padding-top:var(--s6);padding-bottom:var(--s5)}
  .station--start .station__unten{padding-top:calc(var(--kopf) + var(--s4))}
  .station__unten::before{left:0;right:auto;top:var(--s6);bottom:var(--s5);width:calc(var(--linie) + var(--strich));height:auto;
    background:
      linear-gradient(var(--signal),var(--signal)) 0 0/var(--linie) 100% no-repeat,
      repeating-linear-gradient(180deg,var(--signal) 0 2px,transparent 2px 9.6rem) var(--linie) 0/var(--strich) 100% no-repeat,
      repeating-linear-gradient(180deg,var(--signal) 0 1px,transparent 1px 1.2rem) var(--linie) 0/.65rem 100% no-repeat}
  .station--teer .station__unten::before{background:
      linear-gradient(var(--signal),var(--signal)) 0 0/var(--linie) 100% no-repeat,
      repeating-linear-gradient(180deg,var(--papier) 0 2px,transparent 2px 9.6rem) var(--linie) 0/var(--strich) 100% no-repeat,
      repeating-linear-gradient(180deg,var(--papier) 0 1px,transparent 1px 1.2rem) var(--linie) 0/.65rem 100% no-repeat}
  .hero__zeichen{display:none}
  .station--ich .oben__inhalt{grid-template-columns:minmax(0,13rem) minmax(0,1fr)}
  .station--schluss .station__oben{align-self:end}
  /* Mit Bewegung: EIN Massband steht senkrecht in der Fuge zwischen den Spalten und fuellt sich mit dem Weg */
  /* Teilung und Spur in Muted: lesbar auf Kreide und auf Teer, die Fuellung bleibt Signal */
  .js-motion .massband{display:block;top:0;bottom:0;left:calc(58% - .2rem);right:auto;width:calc(var(--linie) + var(--strich));height:auto;background:none;--band-strich:var(--muted)}
  .js-motion .massband::after{left:var(--linie);right:auto;top:0;bottom:0;width:var(--strich);height:auto;
    background:
      repeating-linear-gradient(180deg,var(--band-strich) 0 2px,transparent 2px 9.6rem) 0 0/100% 100% no-repeat,
      repeating-linear-gradient(180deg,var(--band-strich) 0 1px,transparent 1px 1.2rem) 0 0/50% 100% no-repeat}
  .js-motion .massband__spur{right:auto;bottom:0;width:var(--linie);height:auto}
  .js-motion .massband__weg{top:0;left:-.1rem;width:calc(var(--linie) + .2rem);height:100%;transform-origin:50% 0;transform:scaleY(0)}
  .js-motion .massband__mess,.js-motion .massband__skala,.js-motion .massband__blitz{display:none}
  .js-motion .station__unten::before{display:none}
}

/* ============================================================
   ab 600px: mehr Luft, Formular zweispaltig
   ============================================================ */
@media (min-width:600px){
  .formular{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feld--breit,.formular__senden,.formular__hinweis{grid-column:1 / -1}
  .formular__senden .knopf{width:auto}
  .check__zeile{grid-template-columns:minmax(0,1fr) auto}
  .check__zeile .knopf{width:auto}
  .hero__knopf{width:auto}
  .knopf--gross{width:auto;padding-inline:3.2rem}
  .menue__liste{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fuss__raster{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ============================================================
   DESKTOP (abgeleitet): Linie bleibt bei 58 %, Stockwerke werden breit und zweispaltig,
   grosse Expanded-Schrift. Die Daumenleiste weicht einer oberen Navigation.
   ============================================================ */
@media (min-width:1024px){
  .kopf__marke .wm{height:4rem}
  .kopf__nav{display:block;margin-left:auto}
  .kopf__nav ul{display:flex;gap:var(--s4)}
  .kopf__nav a{position:relative;display:block;padding:1rem 0;font-weight:600;font-size:1.5rem;text-decoration:none}
  .kopf__nav a::after{content:"";position:absolute;left:0;right:0;bottom:.5rem;height:2px;background:var(--signal);transform:scaleX(0);transform-origin:0 50%;transition:transform .22s var(--raste)}
  .kopf__nav a:hover::after,.kopf__nav a:focus-visible::after{transform:scaleX(1)}
  .kopf__check{display:inline-flex}
  html.kopf-teer .kopf__check{box-shadow:.4rem .4rem 0 var(--papier);border-color:var(--papier)}
  .leiste,.menue{display:none!important}

  .h2{--max:9.6rem}
  .hero__h1{--max:min(15rem, 13svh)}
  .zusage{--max:12rem}
  .zusage--mittel{--max:9.6rem}
  .zusage--klein{--max:7.2rem}
  .h2,.zusage{max-width:14em}
  .check__h{--max:8rem}
  .problem__titel{font-size:5.2rem;max-width:18ch}
  .problem__text{font-size:2rem;max-width:44ch}

  /* Belege zweispaltig: links die Zahl, rechts Text und Quelle */
  .station--paar .beleg,.station--fluss .beleg--lang{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--s7);align-items:start}
  .station--paar .beleg > *,.station--fluss .beleg--lang > *{grid-column:2}
  .station--paar .beleg > .beleg__zahl,.station--fluss .beleg--lang > .beleg__zahl,.station--paar .beleg > .beleg__label{grid-column:1}
  .station--paar .beleg > .beleg__zahl{grid-row:1 / span 3}
  .beleg__zahl{grid-template-columns:minmax(0,1fr);gap:var(--s2)}
  .beleg__zahl .zahl{--zmax:16rem;font-size:min(var(--zmax), calc(100cqi * 5 / 12 / var(--zw,1)))}
  .beleg__label{margin-bottom:0;padding-top:.6rem}
  .beleg__text{font-size:1.9rem}
  .station--problem .beleg > .beleg__text{grid-row:1}
  .station--ansage .beleg{grid-template-columns:1fr}
  .station--ansage .beleg > *{grid-column:1}
  .station--schritt .beleg > *,.station--sicher .beleg > *{grid-column:2}

  .station--paket .beleg{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .station--paket .beleg > .paket__zweck{grid-column:1;grid-row:1 / span 2}
  .paket__zweck{font-size:2.4rem}
  .paket__name{font-size:1.6rem}

  .messkarte__werte{grid-template-columns:repeat(4,minmax(0,1fr))}
  .messwert .n{font-size:min(9.6rem, 11svh)}
  .station--check .beleg--lang > .check__form{grid-column:1;grid-row:1 / span 3}
  .station--check .beleg--lang{row-gap:var(--s4)}

  .werte{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none}

  .schritt__nr{font-size:min(20rem, 22svh)}
  .schritt__titel{font-size:4rem}

  .station--ich .oben__inhalt{grid-template-columns:minmax(0,24rem) minmax(0,1fr);gap:var(--s5)}
  .ich__h{--max:8rem;font-size:min(var(--max), calc((100cqi - 27.2rem) / var(--w)))}
  .ich__zitat p{font-size:min(4.8rem, calc(100cqi / 16))}

  .station--kontakt .beleg--lang > .formular{grid-column:1 / -1}
  .station--kontakt .beleg--lang{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .station--kontakt .beleg--lang > *{grid-column:1}
  .station--kontakt .beleg--lang > .direkt{grid-column:2;grid-row:1 / span 2;border-top:0;padding-top:0}

  .station--faq .beleg--lang{grid-template-columns:1fr}
  .station--faq .beleg--lang > *{grid-column:1}
  .fragen{max-width:96rem}
  .frage summary{font-size:2.2rem}

  .station--schluss .beleg--lang{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .station--schluss .beleg--lang > .fuss__wm{grid-column:1}
  .station--schluss .beleg--lang > .fuss__raster{grid-column:2;grid-row:1}
  .station--schluss .beleg--lang > .fuss__schluss{grid-column:1 / -1}
  .fuss__haelfte{width:min(100%, 56rem)}
  .station--schluss{--spalt:calc(var(--streifen) + 1.8rem)}
  .js-motion .station--schluss .oben__maske{padding-bottom:.8rem}
}

/* ---------- Ruhefassung: nichts steht im Weg ---------- */
@media (prefers-reduced-motion: reduce){
  .frage::details-content{transition:none}
}