/* ============================================================
   MARVIN.WEB Mix M1 "Fuge traegt" (05.10.2026)
   Liegt ueber basis.css. Grundzustand ist das Handy (390 x 844); groesser wird es nur per min-width.
   Vorlage: A2 "Die Fuge, mobil" (projekte/marvin-web-mf-a-fuge/site.css), dazu die Pflichtteile aus B2 und C2.

   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, ueber die ganze Seite.
   Alles Tippbare steht unter der Linie. Extra-Mittel: Beschnitt an der Fuge.

   Pflichtteile, leiser als die Linie:
   - Stapel (B2): Karten mit dem Schnitt aus dem Logo, hier an der Fuge geteilt. Ueber der Linie die obere
     Haelfte (Problem, Name und Preis), darunter die untere (Bei mir, was drin ist). Gewischt wird unten,
     oben laeuft dieselbe Spur mit. Jede Karte ist damit selbst ein Zeichen: zwei Haelften, eine Fuge.
   - Pixel (C2): der Punkt der h1 ist ein Signal-Quadrat und reist beim ersten Wischen auf seinen Platz
     in der Leiste; dort ist er der Check-Knopf. Am Seitenende kehrt er in den Punkt der Wortmarke heim.
   - Wortmarke waechst mit: im Streifen der Daumenleiste (Handy), im Kopf (Desktop).

   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. Karten sind ganz. Nichts klebt.
   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.

   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
     Signal-Grund: Teer 4,60 (Pixel-Knopf, Marke "Beliebt")
     Knopf:        Kreide auf #b53507 5,36 (auch die Karte "Du gehst kein Risiko ein")
   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 (am Handy scrollt sie mit dem Start weg) */
  --kante:env(safe-area-inset-top, 0px); /* Oberkante des Beschnitts oben: am Handy der Bildschirmrand */
  --streifen-l:2rem;             /* Streifen der Leiste, in dem die Wortmarke mitwaechst */
  --zeile-l:5.6rem;              /* Zeile der Leiste mit den Zielen */
  --knopf-px:5.6rem;             /* der Pixel als Knopf */
  --leiste:calc(var(--streifen-l) + var(--zeile-l) + 2px + env(safe-area-inset-bottom, 0px));
  --fuge:58svh;                  /* Lage der Linie, von oben */
  --spalt:3rem;                  /* Abstand Linie -> angedockter Beleg */
  --anflug:22svh;                /* Weg, auf dem Zusage und Beleg an die Linie kommen */
  --halt:16svh;                  /* Weg, auf dem ein Paar eingerastet stehen bleibt */
  --biss:2rem;                   /* so weit greift der Fuss der naechsten Karte unter die vorige */
  --fuge-b:.6rem;                /* Freistellkante an den Karten */
}
@media (min-width:1024px){ :root{ --leiste:0px; --kopf:8rem; --kante:calc(var(--kopf) + env(safe-area-inset-top, 0px)); --anflug:20svh; --halt:20svh; --knopf-px:7.2rem } }

.strich{color:var(--signal-text)}
.klein{font-size:1.6rem;line-height:1.55;color:var(--muted);max-width:68ch}
.nw{white-space:nowrap}
main:focus{outline:none}

/* Ueberschrift passt sich an: das breiteste Wort fuellt hoechstens die Spalte.
   --w = Breite des breitesten Worts in em plus Luft (Werte aus A2, dort gemessen). */
.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}
#pakete-h{--w:9.8}
#ablauf-h{--w:6.9}
#kontakt-h{--w:8.45}
#faq-h{--w:5.4}
#problem-h{--w:8.8}
.check__h{--w:8.3;--max:min(5.6rem, 5.4svh)}
#paar-termine .fit{--w:7.75}
#paar-preis .fit{--w:7.9}
#paar-tempo .fit{--w:6.4}
.station--bogen .fit{--w:9.05}

/* ---------- 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--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: am Handy nur die gestapelte Wortmarke (scrollt mit), ab 1024 px fest mit 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--kopf{height:3.2rem;width:auto}
.kopf__fortschritt{display:none}
.wm-blitz{fill:var(--signal)}
.kopf__nav{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 */
.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. Teilung 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(--s6))}
.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, FAQ, 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}
/* Fluss (ohne JS, Ruhefassung): der Start fuellt den ersten Bildschirm wie auf der Buehne, die h1 steht unten an ihrer Fuge */
html:not(.js-motion) .station--start{min-height:100svh;display:flex;flex-direction:column}
html:not(.js-motion) .station--start .station__oben{flex:1;display:flex;flex-direction:column;justify-content:flex-end}

/* Der Punkt der h1 ist ein Signal-Quadrat (das echte Satzzeichen steht fuer Screenreader daneben).
   Sobald der Pixel reist, bleibt an seinem Platz ein Loch, bis die Seite zu Ende ist. */
.slot--h1{display:inline-block;width:.2465em;height:.2465em}
.slot--h1{margin-left:.07em;vertical-align:baseline;background:var(--signal)}
html.pixel-aktiv .slot--h1{background:transparent;box-shadow:inset 0 0 0 2px var(--muted)}

/* ---------- 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--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-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}
.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)}

/* ============================================================
   STAPEL (Pflichtteil aus B2): Karten zum seitlichen Wischen (scroll-snap x), jede neue steht VOR der vorigen
   und greift mit dem Schnitt aus dem Logo unter sie (das A schneidet dem M die rechte untere Ecke ab,
   Steigung 2:1, gemessen in B2 an logo/wortmarke-einzeilig-klein.svg), getrennt durch eine Freistellkante.
   FLUSS: die Karte ist ganz, oben das Problem, ihre eigene Fuge, darunter der Beleg.
   BUEHNE: site.js teilt die Karten an der Fuge (.ist-geteilt). Die obere Haelfte steht als Kopie (aria-hidden)
   in .deck-oben ueber der Linie, die untere bleibt in der wischbaren Spur darunter. Rastziel ist der Slot,
   bewegt werden nur die Karten darin (Zurueckbleiben Tempo -0,6 und Einfahrt).
   ============================================================ */
.deck,.deck-oben{container-type:inline-size;
  --dr:max(var(--gutter), calc((100cqi - var(--wrap)) / 2), env(safe-area-inset-left, 0px));
  --innen:calc(100cqi - 2 * var(--dr));--karte-b:calc(var(--innen) * .88)}
.beleg > .deck{justify-self:stretch;max-width:none;margin-inline:calc(-1 * max(var(--rand), env(safe-area-inset-left, 0px))) calc(-1 * max(var(--rand), env(safe-area-inset-right, 0px)))}
.deck{position:relative;overflow-x:clip}   /* die Steuerung faehrt mit dem Stapel von rechts ein: nichts ragt ueber den Rand */
.deck-spur{position:relative;display:flex;align-items:stretch;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--dr);padding:.2rem var(--dr);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.deck-spur::-webkit-scrollbar{display:none}
.deck-spur::after,.deck-oben__spur::after{content:"";flex:0 0 calc(var(--innen) - var(--karte-b));min-width:1px} /* Auslauf: auch die letzte Karte rastet links ein */
.slot,.slot-o{position:relative;flex:0 0 var(--karte-b);display:flex}
.slot{scroll-snap-align:start;scroll-snap-stop:always;outline:none}
.slot+.slot,.slot-o+.slot-o{margin-left:calc(-1 * var(--biss))}
.slot:nth-child(1),.slot-o:nth-child(1){z-index:1}.slot:nth-child(2),.slot-o:nth-child(2){z-index:2}
.slot:nth-child(3),.slot-o:nth-child(3){z-index:3}.slot:nth-child(4),.slot-o:nth-child(4){z-index:4}
.slot:focus-visible{outline:3px solid var(--signal);outline-offset:-3px}
.karte,.karte-o{position:relative;isolation:isolate;flex:1;display:flex;flex-direction:column;color:var(--kreide);container-type:inline-size;--flaeche:var(--teer)}
/* Form der Karte: Flaeche und Freistellkante als zwei Ebenen mit derselben Form; die Kante ist eine Kante nach links
   versetzt, in der Farbe der Station, und schneidet der vorigen Karte die Ecke ab. --form am Element selbst. */
.karte{padding:1.6rem 1.6rem 1.6rem 1.6rem;--form:polygon(var(--kerbe,0px) 0, 100% 0, 100% 100%, 0 100%, var(--kerbe,0px) calc(100% - 2 * var(--kerbe,0px)))}
.karte::after,.karte-o::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--flaeche);clip-path:var(--form)}
.slot+.slot .karte,.slot-o+.slot-o .karte-o{--kerbe:calc(var(--biss) + var(--fuge-b));padding-left:calc(var(--kerbe) + 1.4rem)}
.slot+.slot .karte::before,.slot-o+.slot-o .karte-o::before{content:"";position:absolute;top:0;bottom:0;left:calc(-1 * var(--fuge-b));right:var(--fuge-b);z-index:-2;background:var(--kreide);clip-path:var(--form)}
/* obere Haelfte: ein Rechteck ab der Kerbe, die Luecke davor ist die Freistellkante */
.karte-o{padding:1.6rem 1.6rem 1.4rem;--form:polygon(var(--kerbe,0px) 0, 100% 0, 100% 100%, var(--kerbe,0px) 100%)}
.karte__oben,.karte__unten{display:grid;gap:.6rem;align-content:start}
.karte__unten{margin-top:var(--s3);padding-top:var(--s3);border-top:var(--linie) solid var(--signal)}
.karte__unten:last-child{flex:1}
.karte__titel{font-size:2.2rem;font-weight:800;line-height:1.1;letter-spacing:-.01em;color:var(--kreide);max-width:16ch}
.karte__text{font-size:1.6rem;line-height:1.45;color:var(--papier);max-width:34ch}
.karte__label{color:var(--signal)}
.karte--sicher,.karte-o.karte--sicher{--flaeche:var(--signal-text)}
.karte--sicher .paket__name,.karte--sicher .haken li{color:var(--kreide)}
.karte--sicher .karte__unten{border-top-color:var(--kreide)}
.karte--sicher .haken li::before{border-color:var(--kreide)}
.sicher__titel{font-size:min(3.2rem, calc(100cqi / 7.6));line-height:.95;color:var(--kreide)}

/* Steuerung unter dem Stapel, im Daumenbereich: Zaehlung in Mono, Vor/Zurueck je 4,4 rem */
.deck-steuer{display:flex;align-items:center;justify-content:flex-end;gap:var(--s3);margin-top:var(--s1);padding-inline:var(--dr)}
.deck-zahl{color:var(--muted);font-size:1.3rem}
.deck-ist{font-weight:500;color:var(--teer)}
.deck-knoepfe{display:flex;gap:var(--s1)}
.deck-knopf{display:grid;place-items:center;width:4.4rem;height:4.4rem;padding:0;background:var(--teer);color:var(--kreide);border:0;cursor:pointer;transition:transform .2s var(--raste),box-shadow .2s var(--raste)}
.deck-knopf svg{width:1.8rem;height:1.8rem;fill:currentColor}
.deck-zurueck svg{transform:scaleX(-1)}
.deck-knopf:hover,.deck-knopf:focus-visible{transform:translate(-.2rem,-.2rem);box-shadow:.2rem .2rem 0 var(--signal)}
.deck-knopf[aria-disabled="true"]{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 2px currentColor;transform:none;cursor:default}
.deck-zieht .deck-spur{scroll-snap-type:none;cursor:grabbing}
.deck-zieht .slot{user-select:none}

/* obere Spur (nur geteilt): dieselbe Geometrie wie die untere, faehrt per transform mit */
.deck-oben{display:none}
.ist-geteilt .deck-oben{display:block;-webkit-user-select:none;user-select:none;margin-top:var(--s4);margin-inline:calc(-1 * max(var(--rand), env(safe-area-inset-left, 0px))) calc(-1 * max(var(--rand), env(safe-area-inset-right, 0px)));pointer-events:auto;touch-action:pan-y;cursor:grab}
.deck-oben__spur{display:flex;align-items:stretch;padding:0 var(--dr);will-change:transform}
.ist-geteilt .karte .karte__oben{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ist-geteilt .karte__unten{margin-top:0;padding-top:0;border-top:0}
.ist-geteilt .karte{padding-block:1.2rem 1.4rem}

/* Pakete */
.paket__name{display:flex;align-items:center;gap:var(--s2);font-size:1.3rem;color:var(--papier)}
.paket__marke{background:var(--signal);color:var(--teer);padding:.3rem .8rem;font-size:1.2rem}
.paket__preis{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem 1rem}
.paket__preis .disp{font-size:min(4.8rem, calc(100cqi / 5.2));line-height:.9;color:var(--signal);letter-spacing:-.02em}
.paket__preis--anfrage .disp{font-size:min(3.4rem, calc(100cqi / 7.4))}
.paket__preis .mono{color:var(--muted-d)}
.paket__zweck{font-weight:700;font-size:1.6rem;line-height:1.35;color:var(--kreide);max-width:30ch}
.haken{display:grid;gap:.2rem}
.haken li{position:relative;padding:.1rem 0 .1rem 2.6rem;font-size:1.6rem;line-height:1.4;color:var(--kreide)}
.haken li::before{content:"";position:absolute;left:.2rem;top:.6rem;width:1.3rem;height:.7rem;border-left:3px solid var(--signal);border-bottom:3px solid var(--signal);transform:rotate(-45deg)}
.bogen__zahlen{display:flex;gap:var(--s6)}
.bogen__zahl{display:grid;gap:.4rem}
.bogen__zahl .disp{font-size:6.4rem;line-height:.84;color:var(--signal)}
.bogen__zahl .mono{color:var(--teer)}

/* ---------- 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:10rem;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:5.6rem;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(--s1)}

/* ---------- 6 Ablauf: Zaehlwerk (nur auf der Buehne) und Schritte ---------- */
.schritte{display:grid;gap:var(--s4);margin:0;padding:0}
.schritt{display:grid;gap:var(--s1)}
.schritt__kopf{display:flex;align-items:baseline;gap:var(--s2);font-size:2.4rem;font-weight:800;line-height:1.15}
.schritt__nr{font-size:1.4rem;color:var(--signal-text)}
.ablauf__link{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 1.2rem}
.zaehlwerk{display:none}
.zaehlwerk__fenster{display:grid;overflow:clip}
.zaehlwerk__stand{grid-area:1 / 1;display:flex;align-items:flex-end;gap:var(--s3);margin:0}
.zaehlwerk__nr{font-size:min(12rem, calc(100cqi / 2.4));line-height:.8;letter-spacing:-.03em;color:var(--teer)}
.zaehlwerk__titel{padding-bottom:.4rem;font-size:2.2rem;font-weight:800;line-height:1.1;max-width:12ch}

/* ---------- 7 Ueber mich ---------- */
.station--ich .oben__inhalt{display:grid;grid-template-columns:minmax(0,15rem) 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(--kante) - 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 - 16.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)}

/* ---------- 8 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)}

/* ---------- 9 FAQ (Teer) ---------- */
:root{interpolate-size:allow-keywords}
.fragen{width:100%;border-top:var(--linie) solid var(--papier)}
.frage{position:relative;border-bottom:2px solid var(--muted-d)}
.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(--papier)}
.fz-o,.fz-u{position:absolute;left:50%;width:var(--linie);margin-left:calc(var(--linie) / -2);height:50%;background:var(--papier);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;color:var(--papier)}
.frage__antwort a{font-weight:700;color:var(--kreide);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}

/* ---------- 10 Fuss (Teer): Wortmarke und Zeichen; das Zeichen schliesst sich an der Linie ---------- */
.station--schluss{--spalt:calc(var(--streifen) + .4rem);color:var(--papier);padding-bottom:var(--leiste)}
.fuss__oben{display:grid;gap:var(--s5);justify-items:start}
.fuss__wm{width:min(100%, 34rem);height:auto;color:var(--papier)}
.fuss__haelfte{display:block;width:min(62%, 26rem);height:auto;fill:var(--papier)}
html.pixel-aktiv .fuss__punkt{fill:transparent;stroke:var(--muted-d);stroke-width:2px;vector-effect:non-scaling-stroke}
html.pixel-aktiv.pixel-daheim .fuss__punkt{fill:var(--signal);stroke:none}
.fuss__inhalt{display:grid;gap:var(--s5)}
.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: Streifen mit der Wortmarke, darunter die Ziele, rechts der Platz des Pixels ---------- */
.leiste{position:fixed;left:0;right:0;bottom:0;z-index:9;
  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);
  --platz:var(--muted);transition:transform .26s var(--raste),visibility 0s linear 0s,background-color .2s}
.leiste__streifen{display:flex;align-items:center;height:var(--streifen-l);padding-inline:max(var(--gutter), env(safe-area-inset-left, 0px));pointer-events:none}
.leiste__wm{display:block;height:1.1rem;width:auto}
.leiste__zeile{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) var(--knopf-px);align-items:center;height:var(--zeile-l)}
.leiste__ziel{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;min-height:var(--zeile-l);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__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)}
.leiste__platz{display:block;width:var(--knopf-px);height:var(--knopf-px);box-shadow:inset 0 0 0 2px var(--platz)}
html.leiste-teer .leiste{background:var(--teer);border-top-color:var(--muted-d);color:var(--papier);--platz:var(--muted-d)}
/* Der Pixel als Knopf: liegt auf seinem Platz; mit Bewegung faehrt er vom Punkt der h1 dorthin */
.pixelknopf{position:absolute;right:env(safe-area-inset-right, 0px);top:var(--streifen-l);width:var(--knopf-px);height:var(--knopf-px);display:flex;align-items:flex-end;padding:.6rem;
  background:var(--signal);color:var(--teer);font-family:var(--mono);font-weight:500;font-size:1.2rem;letter-spacing:.04em;text-transform:uppercase;line-height:1;text-decoration:none;transform-origin:50% 50%;-webkit-tap-highlight-color:transparent}
.pixelknopf:focus-visible{outline-color:var(--teer);outline-offset:-5px}
.pixelknopf.unterwegs .pixelknopf__text{visibility:hidden}
.pixelknopf.unterwegs{pointer-events:none}
/* Tastatur: wer den Knopf fokussiert, bekommt ihn sofort an seinem Platz */
.pixelknopf:focus-visible{transform:none !important;pointer-events:auto}
.pixelknopf:focus-visible .pixelknopf__text{visibility:visible !important}
/* 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}

/* Messpunkte der Pixel-Reise (site.js setzt Lage und Groesse) */
.reise-mass{position:absolute;left:0;top:0;width:1px;height:1px;visibility:hidden;pointer-events:none}

/* ---------- 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.6rem}
.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 .deckel{display:block;position:fixed;left:0;right:0;top:0;height:var(--fuge);z-index:3;background:var(--kreide)}
  html.js-motion.deckel-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.
     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):not(.station--flaeche) .station__oben{visibility:hidden}

  /* Stationen ueberlappen sich um die Hoehe des oberen Stockwerks: die Anzeige geht nahtlos weiter.
     Die Flaechen (Check, FAQ) steigen als ganze Teer-Flaeche auf und ueberlappen nicht. */
  .js-motion .station{margin-top:calc(-1 * var(--fuge))}
  .js-motion .station--start,.js-motion .station--flaeche{margin-top:0}
  /* Beschnitt oben an der Kante (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(var(--kante) 0 0 0);
    display:flex;flex-direction:column;justify-content:flex-end;padding-top:calc(var(--kante) + var(--s3));padding-bottom:0}
  .js-motion .station--start .station__oben{padding-top:calc(var(--kopf) + var(--s3))}
  .js-motion .oben__maske{padding-bottom:var(--s4)}
  .js-motion .station--flaeche .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--flaeche .station__unten{padding-top:var(--spalt)}
  .js-motion .station--fluss .station__unten{padding-bottom:var(--s5)}
  /* Mindestweg: die Zusage steht voll da, waehrend der Beleg vorbeilaeuft (sonst laufen Ankunft und Abgang ineinander) */
  .js-motion .station--fluss:not(.station--flaeche) .station__unten{min-height:calc(var(--anflug) + 38svh)}

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

  /* Stapel: die Karte ist an der Fuge geteilt. Die obere Haelfte endet 1 rem ueber der Linie, die untere beginnt
     unter den Teilstrichen. Am Stapel haelt die Station laenger, denn hier wird seitlich gewischt. */
  .js-motion .station--deck{--spalt:2.6rem;--halt:30svh}
  .js-motion .station--deck .oben__maske{padding-bottom:1rem}
  .js-motion .station--deck .h2{font-size:min(4.2rem, calc(100cqi / 11.8));line-height:.92}
  .js-motion .station--deck .beleg{display:block}
  .js-motion .station--deck .deck-steuer{margin-top:var(--s1)}
  /* Nach dem Check: der Stapel dockt erst an, wenn die abziehende Teer-Flaeche fast oben raus ist (bis dahin legt
     sie die Ansage frei, siehe enthuellen() in site.js) */
  .js-motion .station--enthuellt .station__unten{padding-top:calc(var(--fuge) - 8svh + var(--spalt))}

  /* 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)}

  /* Ablauf: das Zaehlwerk steht direkt auf der Linie, die Titel der Schritte stehen dort statt unten */
  .js-motion .station--ablauf .oben__maske{padding-bottom:.6rem}
  .js-motion .station--ablauf .h2{font-size:min(4.2rem, calc(100cqi / 9.6))}
  .js-motion .zaehlwerk{display:block;margin-top:var(--s4)}
  .js-motion .station--ablauf .schritt__titel{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .js-motion .station--ablauf .schritt__kopf{font-size:1.4rem}
  .js-motion .station--ablauf .schritte{gap:var(--s5)}

  /* Fuss: Wortmarke oben, obere Haelfte des Zeichens auf der Linie; die untere kommt als Letztes von unten */
  .js-motion .station--schluss .oben__maske{flex:1;display:flex;flex-direction:column;padding-bottom:.4rem}
  .js-motion .fuss__oben{flex:1;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start}
  .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)}
}
/* 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: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--flaeche .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{top:calc(var(--anflug) - var(--spalt) + var(--halt) / 2 + 3rem);scroll-snap-align:start}
  .js-motion .station--enthuellt .raste{top:calc(var(--fuge) - 8svh + var(--halt) / 2 + 3rem)}   /* folgt dem laengeren Anflug */
}

/* ============================================================
   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.
   Stapel bleiben einspaltig (sie brauchen die Breite).
   ============================================================ */
@media (max-height:560px) and (min-width:600px) and (orientation:landscape){
  .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}
  .station--deck{display:block}
  .station--deck .station__oben{padding-bottom:var(--s3)}
  .station--deck .station__unten{padding-left:max(var(--rand), env(safe-area-inset-left, 0px));padding-top:calc(var(--linie) + var(--strich) + var(--s3))}
  .station--deck .station__unten::before{left:var(--rand);right:var(--rand);top:0;bottom:auto;width:auto;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}
  .deck,.deck-oben{--karte-b:calc(var(--innen) * .47)}
  .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 */
  .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}
  .js-motion .station--deck .station__unten::before{display:block}
  :root{--zeile-l:5.2rem;--knopf-px:5.2rem;--streifen-l:1.8rem}
}

/* ============================================================
   ab 600px: mehr Luft, Formular zweispaltig, zwei Karten im Stapel
   ============================================================ */
@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))}
  .deck,.deck-oben{--karte-b:calc(var(--innen) * .56)}
}

/* ============================================================
   DESKTOP (eigens komponiert): die Linie bleibt bei 58 %, Stockwerke werden breit und zweispaltig, grosse
   Expanded-Schrift. Oben steht die Navigation, die Wortmarke im Kopf waechst mit, der Pixel-Knopf steht
   unten rechts. Stapel werden breite Decks (3,25 Karten), ziehbar mit der Maus plus Pfeile.
   ============================================================ */
@media (min-width:1024px){
  .js-motion .kopf{position:fixed}
  .kopf__marke .wm--kopf{display:none}
  .kopf__fortschritt{display:block;height:2.6rem;width:auto}
  .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)}
  .station--start .station__oben{padding-top:calc(var(--kopf) + var(--s6))}

  /* die Leiste schrumpft auf den Platz des Pixels unten rechts */
  .menue{display:none!important}
  .leiste{left:auto;right:max(var(--rand), env(safe-area-inset-right, 0px));bottom:3.2rem;width:var(--knopf-px);height:var(--knopf-px);padding:0;background:none;border:0;--platz:var(--muted)}
  html.leiste-teer .leiste{background:none;--platz:var(--muted-d)}
  .leiste__streifen,.leiste__ziel{display:none!important}
  .leiste__zeile{display:block;height:auto}
  .pixelknopf{top:0;right:0;padding:.9rem;font-size:1.3rem}
  .pixelknopf:hover{box-shadow:.3rem .3rem 0 var(--teer);transform:translate(-.3rem,-.3rem)}
  html.leiste-teer .pixelknopf:hover{box-shadow:.3rem .3rem 0 var(--papier)}

  .h2{--max:9.6rem}
  .hero__h1{--max:min(15rem, 13svh)}
  .zusage{--max:12rem}
  .zusage--klein{--max:7.2rem}
  .h2,.zusage{max-width:14em}
  .check__h{--max:8rem}

  /* Belege zweispaltig: links die Zahl, rechts Text und Quelle */
  .station--paar:not(.station--deck) .beleg,.station--fluss .beleg--lang{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--s7);align-items:start}
  .station--paar:not(.station--deck) .beleg > *,.station--fluss .beleg--lang > *{grid-column:2}
  .station--paar .beleg > .beleg__zahl,.station--fluss .beleg--lang > .beleg__zahl{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__text{font-size:1.9rem}

  /* Decks: 3,25 Karten sichtbar, ziehen mit der Maus */
  .deck,.deck-oben{--karte-b:calc(var(--innen) * .325)}
  .deck-spur{cursor:grab}
  .karte,.karte-o{padding:2.4rem 2.8rem 2.4rem 2.4rem}
  .slot+.slot .karte,.slot-o+.slot-o .karte-o{padding-left:calc(var(--kerbe) + 2.4rem)}
  .ist-geteilt .karte{padding-block:1.8rem 2.4rem}
  .karte__titel{font-size:3rem;max-width:14ch}
  .karte__text{font-size:1.7rem}
  .paket__name{font-size:1.4rem}
  .paket__zweck{font-size:1.8rem}
  .haken li{font-size:1.7rem}
  .js-motion .station--deck .h2{font-size:min(7.2rem, 8svh, calc(100cqi / 11.8))}
  /* Steuerung links unter den Karten: unten rechts steht der Pixel-Knopf */
  .deck-steuer{gap:var(--s4);justify-content:flex-end;flex-direction:row-reverse}
  html{scroll-padding-bottom:calc(var(--knopf-px) + 4.8rem)}
  html.js-motion{scroll-padding-bottom:calc(var(--knopf-px) + 4.8rem)}

  .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)}
  .lz{font-size:6.4rem}

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

  .zaehlwerk__nr{font-size:min(20rem, 22svh)}
  .zaehlwerk__titel{font-size:4rem;max-width:14ch;padding-bottom:1.2rem}
  .js-motion .station--ablauf .h2{font-size:min(6.4rem, 7svh, calc(100cqi / 9.6))}

  .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--ich .beleg--lang > .ich__zitat{grid-column:1;grid-row:1 / span 3}

  .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:min(96rem, calc(100% - var(--knopf-px) - 3.2rem))}
  .frage summary{font-size:2.2rem}

  .station--bogen .beleg--lang > .bogen__zahlen{grid-column:1;grid-row:1 / span 3}

  /* Fuss: links das Zeichen, das sich an der Linie schliesst, rechts die Wortmarke ueber den Seiten. Rechts, damit der
     Pixel aus der Ecke unten rechts fast senkrecht in ihren Punkt heimkehrt (kurzer Weg, kleine Schritte). */
  .fuss__wm{width:min(52%, 60rem)}
  .fuss__haelfte{width:min(100%, 44rem)}
  .fuss__oben .fuss__haelfte{width:min(36%, 44rem)}
  .js-motion .fuss__oben{flex-direction:row-reverse;align-items:flex-end;justify-content:space-between}
  .station--schluss .beleg--lang.fuss__inhalt{grid-template-columns:minmax(0,36fr) minmax(0,64fr);column-gap:0;align-items:start}
  .station--schluss .beleg--lang > .fuss__raster{grid-column:2;grid-row:1;padding-left:var(--s7)}
  .station--schluss .beleg--lang > .fuss__schluss{grid-column:1;grid-row:1;justify-items:start}
  .fuss__schluss .fuss__haelfte{width:min(100%, 44rem)}
  .station--schluss{--spalt:calc(var(--streifen) + 1.2rem)}
}

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