/* ============================================================
   MARVIN.WEB Mix M2 "Voreinander traegt" (05.10.2026)
   Tragende Idee aus B2: die Wortmarke. Jeder Buchstabe steht vor seinem linken Nachbarn, getrennt durch eine
   Freistellkante in der Grundfarbe; das A schneidet dem M die rechte untere Ecke ab. Daraus: Typo-Plakat und
   Wischstapel voreinander (Signature), Teer und Kreide im Wechsel je Station, der Beleg auf Signal.
   Extra-Mittel: Neigung nach Wischtempo (hoechstens 2 Grad, nur auf der fahrenden Karte).
   Pflichtteile: Messlinie auf Daumenhoehe (EINE Station: der Pruefstand), Pixel wird Check-Knopf
   (js/pixel-reise.js), Wortmarke waechst mit (js/wortmarke-fortschritt.js).

   MOBILE FIRST: Grundzustand ist das Handy (390 x 844). Groesser nur per @media (min-width ...), dazu eine
   Querformat-Abfrage. Der Pruefstand haelt nur mit Bewegung und ab 560 px Hoehe (Klasse html.pf-halt aus site.js).

   Kontraste NUR aus basis.css (gerechnet). Verwendete Paare:
     Teer auf Kreide 16,30 · #b53507 auf Kreide 5,36 · Muted auf Kreide 4,98
     Kreide auf Teer 16,30 · Papier auf Teer 14,37 · Signal auf Teer 4,60 · Muted-dunkel auf Teer 6,02
     Teer auf Signal 4,60 · Kreide auf #b53507 5,36 · Signal auf Kreide 3,54 nur Grafik und Schrift ab 24px fett
   Fokus: Signal-Umriss auf Teer (4,60) und Kreide (3,54, Nicht-Text ab 3:1), auf Signal ein Teer-Umriss.
   ============================================================ */

:root{
  /* Hauskurve "startblock" (aus Fassung B): 6 % der Zeit im Block, Spitzentempo bei 20 %, 99 % des Wegs bei 58 %,
     ab 64 % steht es, kein Ueberschwingen. Dieselbe Kurve als CustomEase in site.js. */
  --startblock:linear(0 0%, 0.0035 2%, 0.0147 4%, 0.0345 6%, 0.0631 8%, 0.1 10%, 0.144 12%, 0.1934 14%, 0.2462 16%, 0.3009 18%, 0.3562 20%, 0.4113 22%, 0.4654 24%, 0.5184 26%, 0.5699 28%, 0.62 30%, 0.6694 32%, 0.7167 34%, 0.7602 36%, 0.7991 38%, 0.8334 40%, 0.8769 43%, 0.9118 46%, 0.9473 50%, 0.9771 55%, 0.994 60%, 1 64%, 1 100%);
  --kante:.09em;       /* Konturbreite im Voreinander-Satz; sichtbar ist die halbe Kontur = .045em */
  --vs-ls:-.05em;      /* Grundlaufweite: zwei Senkrechte stehen eine Kante auseinander */
  --vs-unter:-.07em;   /* zusaetzlich bei Schraegen (A K R V W X Y): sie schieben sich unter den Nachbarn */
  --fuge-b:.8rem;      /* Freistellkante an Karten, Kacheln, Flaechen, Leiste, Blatt */
  --biss:2.4rem;       /* so weit greift der Fuss der naechsten Karte unter die vorige */
  /* Die Form der Wortmarke: das A steht vor dem M, sein schraeges Bein schneidet dem M die rechte untere Ecke ab
     (Steigung 2:1, gemessen an logo/wortmarke-einzeilig-klein.svg). Karten, Kacheln und die Check-Flaeche mit
     linkem Nachbarn tragen diesen Fuss. */
  --leiste-h:5.6rem;   /* Daumenleiste, Zeile mit den Knoepfen (Tippziele 4,4 rem und mehr) */
  --streifen-h:2.2rem; /* Streifen mit der Wortmarke, oben IN der Leiste, volle Breite */
  --knopf-px:4.8rem;   /* der Pixel als Check-Knopf */
  --safe-u:env(safe-area-inset-bottom, 0px);
  --unten:calc(var(--streifen-h) + var(--leiste-h) + var(--safe-u));
  --kopf-h:5.6rem;
  --linie:58svh;       /* die Messlinie auf Daumenhoehe */
  --gutter:max(clamp(1.6rem,4vw,4.8rem),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
}

html{scroll-padding-bottom:calc(var(--unten) + 1.6rem);background:var(--teer)}
body{background:var(--teer);padding-bottom:var(--unten)}

/* ---------- Tonarten: Teer und Kreide im Rollentausch, einmal Signal ---------- */
.ton-teer{--grund:var(--teer);--text:var(--kreide);--text-2:var(--muted-d);--akzent:var(--signal);--akzent-gross:var(--signal);--knopf:var(--signal);--knopf-text:var(--teer);--fokus:var(--signal);--hell:var(--papier)}
.ton-kreide{--grund:var(--kreide);--text:var(--teer);--text-2:var(--muted);--akzent:var(--signal-text);--akzent-gross:var(--signal);--knopf:var(--signal-text);--knopf-text:var(--kreide);--fokus:var(--signal);--hell:var(--teer)}
.ton-signal{--grund:var(--signal);--text:var(--teer);--text-2:var(--teer);--akzent:var(--teer);--akzent-gross:var(--teer);--knopf:var(--teer);--knopf-text:var(--kreide);--fokus:var(--teer);--hell:var(--teer)}
.ton-teer,.ton-kreide,.ton-signal{background:var(--grund);color:var(--text)}
.station.ton-teer{--sektion:var(--teer)}.station.ton-kreide{--sektion:var(--kreide)}
:focus-visible{outline-color:var(--fokus,var(--signal))}
::selection{background:var(--knopf);color:var(--knopf-text)}

/* ---------- Raster ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);container-type:inline-size}
.eyebrow{color:var(--akzent);margin-bottom:1.6rem}
.lead{font-size:1.7rem;line-height:1.5;max-width:52ch}
a{text-underline-offset:.18em;text-decoration-thickness:2px}
.nw{white-space:nowrap}

/* ---------- Ueberschriften: das laengste Wort passt immer in die Spalte ----------
   --lw = Breite des laengsten Worts in em (aus B2 gemessen), 100cqi = Breite der Spalte. */
.fit{font-size:min(var(--fs,8rem),calc(100cqi / var(--lw,8) - .5px))}
.h2{--fs:7.2rem;line-height:.9}

/* ---------- Der Voreinander-Satz (Signature) ----------
   Erst nach der Zerlegung (data-vs) rueckt der Satz zusammen. Ohne JS steht die Ueberschrift normal gesetzt.
   Jedes Zeichen ist ein eigener Textlauf: Kontur in der Grundfarbe, dann Fuellung, in Baumreihenfolge gemalt. */
[data-vs="an"]{letter-spacing:var(--vs-ls);word-spacing:.06em}
[data-vs="an"] .vs-w{display:inline-block}
[data-vs="an"] .vs-c{-webkit-text-stroke:var(--kante) var(--grund);paint-order:stroke fill}
[data-vs="an"] .vs-u{margin-left:var(--vs-unter)}

/* ---------- Knoepfe: Hover und Fokus holen den Knopf nach vorn (harter Versatzschatten) ---------- */
.knoepfe{display:flex;flex-wrap:wrap;gap:1.2rem}
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:5.2rem;padding:1.1rem 2.2rem;font-weight:700;font-size:1.7rem;line-height:1.2;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:translate .45s var(--startblock),box-shadow .45s var(--startblock)}
.knopf-haupt{background:var(--knopf);color:var(--knopf-text);border-color:var(--knopf)}
.knopf-neben{background:var(--grund);color:var(--text);border-color:currentColor}
.knopf-breit{width:100%;min-height:5.6rem}
.knopf:hover,.knopf:focus-visible{translate:-.4rem -.4rem;box-shadow:.4rem .4rem 0 var(--text)}
.knopf:active{translate:0 0;box-shadow:none;transition-duration:.08s}
.knopf[disabled]{cursor:progress;translate:none;box-shadow:none}

.link-pfeil{display:inline-flex;align-items:center;gap:1rem;font-weight:700;color:var(--text);text-decoration:none;border-bottom:2px solid currentColor;padding-block:1rem .2rem;min-height:4.4rem}
.link-pfeil::after{content:"";flex:none;width:1.4rem;height:1.4rem;background:currentColor;clip-path:polygon(0 42%,60% 42%,60% 12%,100% 50%,60% 88%,60% 58%,0 58%);transition:translate .45s var(--startblock)}
.link-pfeil:hover::after,.link-pfeil:focus-visible::after{translate:.4rem 0}

/* ============================================================ KOPF
   Handy: nur die Wortmarke, liegt ueber dem Hero und scrollt mit. Ab 1024 px: feste Navigation, die Wortmarke
   darin waechst Station fuer Station. */
.kopf{position:absolute;inset:0 0 auto;z-index:30;height:var(--kopf-h);color:var(--kreide);--grund:var(--teer);--text:var(--kreide);--fokus:var(--signal)}
.kopf-innen{height:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);display:flex;align-items:center;gap:2.4rem}
.kopf-logo{display:flex;align-items:center;min-height:4.4rem;color:inherit;flex:none}
.kopf-wm{width:auto;height:1.3rem}
.hero-ort{position:absolute;right:var(--gutter);top:0;height:var(--kopf-h);display:flex;align-items:center;justify-content:flex-end;max-width:calc(100% - 16.4rem);margin:0;font-size:1.2rem;text-align:right;color:var(--signal)}
.kopf-nav{display:none}

/* Logo-Auftritt im Kopf (Handy, einmal je Sitzung): Glyphen fahren von rechts ein, jede haelt VOR ihrem linken
   Nachbarn, zuletzt schiebt sich der Pixel hinter dem W hervor. Am Desktop uebernimmt das der Fortschritt. */
@keyframes wm-ein{from{transform:translateX(var(--dx))}}
@media (max-width:1023px){
  .logo-auftritt .kopf-logo .wm-g{animation:wm-ein .62s var(--startblock) both}
  .logo-auftritt .kopf-logo .wm-M{--dx:8150px;animation-delay:0ms}
  .logo-auftritt .kopf-logo .wm-A{--dx:7140px;animation-delay:60ms}
  .logo-auftritt .kopf-logo .wm-R{--dx:6220px;animation-delay:120ms}
  .logo-auftritt .kopf-logo .wm-V{--dx:5450px;animation-delay:180ms}
  .logo-auftritt .kopf-logo .wm-I{--dx:4540px;animation-delay:240ms}
  .logo-auftritt .kopf-logo .wm-N{--dx:4210px;animation-delay:300ms}
  .logo-auftritt .kopf-logo .wm-W{--dx:3050px;animation-delay:380ms}
  .logo-auftritt .kopf-logo .wm-E{--dx:1850px;animation-delay:440ms}
  .logo-auftritt .kopf-logo .wm-B{--dx:1020px;animation-delay:500ms}
  .logo-auftritt .kopf-logo .wm-punkt{--dx:430px;animation-delay:640ms}
}

/* ============================================================ STATIONEN
   Grundzustand (ohne JS, Ruhefassung): normaler Fluss. Mit Bewegung faehrt jede Station von unten VOR die alte,
   die alte bleibt zurueck (Tempo -0,6, nur translate). Jede Station ist ihr eigener Stapelkontext. */
.station{position:relative;isolation:isolate;padding-block:4.8rem 5.6rem;overflow-x:clip}
.kopfzeilen{container-type:inline-size}
.kopfzeilen .lead{margin-top:1.6rem}

/* ============================================================ 1 HERO: Typo-Plakat fuer 390 px gesetzt */
.station.hero{padding:0}
/* Der Hero gehoert dem ersten Bildschirm allein (sonst wird die naechste Ueberschrift LCP); freie Hoehe teilt sich
   ueber dem Plakat und zwischen Plakat und Knopf auf, der Knopf bleibt im Daumenbereich */
.hero-innen{position:relative;display:flex;flex-direction:column;min-height:calc(100svh - var(--unten));padding-top:calc(var(--kopf-h) + 1.2rem);padding-bottom:3.2rem}
.hero-oben{margin-top:auto}
.hero-oben{container-type:inline-size}
.hero-unten{padding-top:2.8rem;margin-top:auto;display:grid;gap:1.6rem;justify-items:stretch}
/* h1 ohne JS: Zeilen untereinander. Mit Voreinander-Satz: ein Textblock (ein LCP-Kandidat), Zeilenabstand .78,
   jede untere Zeile steht VOR der oberen. Treppe .3/.6/.9 em. */
.h1{--lw:7.45;--fs:15rem;font-size:min(var(--fs),calc(100cqi / var(--lw) - .5px));line-height:.9;color:var(--kreide);--px:.2465em}
.h1 .h1-z1,.h1 .h1-z2,.h1 .h1-z3,.h1 .h1-z4{display:block}
.h1 .h1-z4 .vs-zeile{display:inline}
.h1[data-vs="an"]{--lw:7.55;line-height:.78}
.h1[data-vs="an"] .h1-z1,.h1[data-vs="an"] .h1-z2,.h1[data-vs="an"] .h1-z3,.h1[data-vs="an"] .h1-z4{display:inline}
.h1[data-vs="an"] .h1-z1::after,.h1[data-vs="an"] .h1-z2::after,.h1[data-vs="an"] .h1-z3::after{content:"\A";white-space:pre}
.h1[data-vs="an"] .h1-z2{margin-left:.3em}
.h1[data-vs="an"] .h1-z3{margin-left:.6em}
.h1[data-vs="an"] .h1-z4{margin-left:.9em;white-space:nowrap}
.h1[data-vs="an"] .vs-w{display:inline;white-space:nowrap}
/* Der Punkt der h1 ist der Pixel: ein Signal-Quadrat auf der Grundlinie (das Satzzeichen steht sr-only daneben).
   Reist er los, bleibt sein Platz als leeres Kaestchen zurueck. */
.h1-pixel{display:inline-block;width:var(--px);height:var(--px);margin-left:.05em;vertical-align:baseline;background:var(--signal)}
.pixel-aktiv .h1-pixel{background:transparent;box-shadow:inset 0 0 0 2px var(--muted-d)}
.hero-zeile{margin-top:2rem;font-size:min(2.6rem,calc(100cqi / 13.1));line-height:1;color:var(--signal);text-wrap:balance}
.hero-text{font-size:1.7rem;line-height:1.5;color:var(--kreide);max-width:44ch}
.hero-knoepfe{display:grid}
.hero-neben{display:none}
.belegzeile{color:var(--text-2);font-size:1.2rem}
.zettel-platz{display:none}

/* Einfahrt beim Laden: CSS, damit nichts auf das Skript wartet. Die h1 faehrt als Ganzes von rechts ein (Startblock). */
@keyframes rechts-ein{from{transform:translateX(var(--von,24vw))}}
.js-motion .h1[data-vs="an"]{animation:rechts-ein .8s var(--startblock) both;animation-delay:40ms;--von:22vw}
.js-motion .hero-zeile{animation:rechts-ein .8s var(--startblock) both;animation-delay:200ms;--von:60vw}
.js-motion .hero-unten>*{animation:rechts-ein .8s var(--startblock) both;--von:70vw}
.js-motion .hero-unten>:nth-child(1){animation-delay:300ms}
.js-motion .hero-unten>:nth-child(2){animation-delay:380ms}
.js-motion .hero-unten>:nth-child(3){animation-delay:460ms}

/* Auftragszettel (nur Desktop): Kreide-Karte VOR dem Teer, harter Versatzschatten in Signal */
.zettel{position:relative;width:calc(100% - 1rem);max-width:42rem;padding:2rem 2rem 2.2rem;container-type:inline-size;box-shadow:0 0 0 var(--fuge-b) var(--teer),1rem 1rem 0 var(--fuge-b) var(--signal)}
.zettel-kopf{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-bottom:1.2rem;margin-bottom:.4rem;border-bottom:2px solid var(--teer)}
.zettel-ecke{width:1.2rem;height:1.2rem;background:var(--teer);flex:none;clip-path:polygon(0 0,100% 0,100% 100%)}
.zettel-zeilen>div{display:grid;gap:.3rem;padding-block:.9rem}
.zettel-zeilen>div+div{border-top:2px dotted var(--teer)}
.zettel-zeilen dt{color:var(--muted)}
.zettel-zeilen dd{font-weight:900;font-stretch:125%;text-transform:uppercase;letter-spacing:-.01em;line-height:1.05;font-size:min(2.4rem,calc(100cqi / 14.9))}
.zettel-fuss{margin-top:1.2rem;padding-top:1.2rem;border-top:2px solid var(--teer);font-weight:700;font-size:1.6rem}

/* ============================================================ DER STAPEL (Signature)
   Seitlich wischen: CSS scroll-snap, Karte etwa 88 % breit, die naechste lugt herein. Die naechste Karte steht VOR der
   vorigen, um --biss ueberlappend, mit der Freistellkante an ihrer Vorderkante in der Farbe der Station. Ohne JS und
   in der Ruhefassung: eine normale, seitlich scrollbare Liste. Rastziel ist der Slot, bewegt wird nur die Karte. */
.deck{position:relative;margin-top:2.8rem;container-type:inline-size;--rand:max(var(--gutter),calc((100cqi - var(--wrap)) / 2 + var(--gutter)));--innen:calc(100cqi - 2 * var(--rand));--karte-b:calc(var(--innen) * .88)}
.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(--rand);padding:1.6rem var(--rand) 2rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.deck-spur::-webkit-scrollbar{display:none}
.deck-spur::after{content:"";flex:0 0 calc(100cqi - var(--rand) - var(--karte-b) - var(--rand));min-width:1px}
.slot{position:relative;flex:0 0 var(--karte-b);display:flex;scroll-snap-align:start;scroll-snap-stop:always;outline:none}
.slot+.slot{margin-left:calc(-1 * var(--biss))}
.slot:nth-child(1){z-index:1}.slot:nth-child(2){z-index:2}.slot:nth-child(3){z-index:3}.slot:nth-child(4){z-index:4}
.deck .karte{position:relative;isolation:isolate;flex:1;display:flex;flex-direction:column;min-height:min(32rem,38svh);padding:2.4rem 2.8rem 2.4rem 2rem;background:transparent;container-type:inline-size;transform-origin:50% 50%;--flaeche:var(--grund)}
.karte,.mk-kachel{--kerbe:0px;--ecke:0px;--form:polygon(var(--kerbe,0px) 0, calc(100% - var(--ecke,0px)) 0, 100% var(--ecke,0px), 100% 100%, 0 100%, var(--kerbe,0px) calc(100% - 2 * var(--kerbe,0px)))}
.karte::after,.mk-kachel::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--flaeche);clip-path:var(--form)}
.slot+.slot .karte{--kerbe:calc(var(--biss) + var(--fuge-b));padding-left:calc(var(--kerbe) + 2rem)}
.slot+.slot .karte::before,.mk-kachel+.mk-kachel::before{content:"";position:absolute;top:0;bottom:0;left:calc(-1 * var(--fuge-b));right:var(--fuge-b);z-index:-2;background:var(--sektion);clip-path:var(--form)}
.slot:last-child .karte{padding-right:2rem}
.slot:focus-visible{outline:3px solid var(--fokus);outline-offset:-3px}
.karte-inhalt{flex:1;display:flex;flex-direction:column;gap:1.6rem;position:relative}
.deck .karte{clip-path:polygon(calc(var(--kerbe,0px) - var(--fuge-b)) -4rem, calc(100% + 4rem) -4rem, calc(100% + 4rem) calc(100% + 4rem), calc(-1 * var(--fuge-b)) calc(100% + 4rem), calc(-1 * var(--fuge-b)) 100%, calc(var(--kerbe,0px) - var(--fuge-b)) calc(100% - 2 * var(--kerbe,0px)))}
.karte-titel{--fs:3.6rem;line-height:.92;color:var(--text)}
.karte-inhalt>p:last-child{color:var(--text-2);font-size:1.6rem;line-height:1.5;margin-top:auto;max-width:34ch}
.ton-teer.karte .karte-inhalt>p:last-child{color:var(--kreide)}

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

/* ============================================================ 3 PRUEFSTAND
   Grundzustand (ohne JS, Ruhefassung, quer, schmaler als 360 px): zwei Flaechen untereinander, Beleg auf Signal mit
   eigener Skala, Check auf Kreide mit dem Blatt im Fluss. Mit Buehne (html.pf-halt): siehe unten. */
.station.pruefstand{padding:0;background:var(--kreide)}
.pf-linie{display:none}
.pf-flaeche{position:relative}
.pf-inhalt{max-width:var(--wrap);margin-inline:auto;padding:4.8rem var(--gutter) 4.8rem}
.pf-oben{container-type:inline-size}
.pf-zeile{display:grid;gap:1.6rem}
.pf-h2{--fs:7.2rem}
.pf-lead{margin:0}
.pf-neben{display:grid;gap:1.2rem}
.pf-quelle{color:var(--teer);font-size:1.2rem}
.pf-beleg .pf-lead{color:var(--teer)}
.pf-unten{margin-top:2.4rem}
.pf-check-unten{display:none}
.pf-nachsatz{display:none}

/* Die Skala: Messlinie mit Massband-Teilstrichen (Sekunde gross, Viertelsekunde klein), 0 bis 8 s.
   Ueber der Linie stehen die Fuellungen (meine in der Schriftfarbe, deine in Signal), darunter die Marken. */
.skala{position:relative;height:3rem;margin-top:4.4rem;--deine:0;--f-meine:1;--f-deine:1;color:var(--text)}
.skala-band{position:absolute;left:0;right:0;top:0;height:1.3rem;
  background:
    linear-gradient(currentColor,currentColor) 0 0/100% .3rem no-repeat,
    linear-gradient(currentColor,currentColor) 100% 0/2px 100% no-repeat,
    repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 12.5%) 0 0/100% 100% no-repeat,
    repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 3.125%) 0 0/100% 55% no-repeat}
.skala-fuell{position:absolute;left:0;top:-1rem;height:1rem;transform-origin:0 50%}
.skala-meine{width:calc(var(--meine) * 100%);background:currentColor;scale:var(--f-meine) 1}
.skala-deine{width:calc(var(--deine) * 100%);background:var(--signal);scale:var(--f-deine) 1}
.skala-lauf{display:none;position:absolute;left:0;top:-1rem;height:1rem;width:12%;background:var(--signal)}
.misst .skala-lauf{display:block;animation:skala-lauf 1.4s linear infinite}
@keyframes skala-lauf{from{translate:0 0}to{translate:733% 0}}
.skala-wert{position:absolute;bottom:calc(100% + 1.2rem);font-size:2.8rem;line-height:.8;letter-spacing:-.03em;white-space:nowrap;text-transform:none}
.skala-wert-meine{left:calc(var(--meine) * 100% * var(--f-meine) + .8rem)}
.skala-wert[data-leer]{visibility:hidden}
.skala-wert-deine{left:calc(var(--deine) * 100% * var(--f-deine));translate:calc(-100% * var(--f-deine)) 0;color:var(--signal-text)}
.einheit{font-size:.55em;font-stretch:125%}
.skala-marken{position:absolute;left:0;right:0;top:1.5rem;height:1.5rem;font-size:1.2rem;letter-spacing:.02em;text-transform:none;line-height:1.25}
.skala-marken li{position:absolute;left:calc(var(--x) * 1%);translate:-50% 0;white-space:nowrap}
.skala-marken li:first-child{translate:none}
.skala-marken li:last-child{left:auto;right:0;translate:none}

/* Kacheln: rechte steht VOR der linken, mit dem Fuss der Wortmarke */
.messkarte{container-type:inline-size}
.mk-kopf{margin-top:1.6rem;color:var(--text-2)}
.mk-werte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--fuge-b)}
.mk-kachel{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;gap:.6rem;min-height:9.6rem;padding:1.2rem 1.2rem 1.2rem calc(var(--kerbe,0px) + 1.2rem);color:var(--kachel-text);--flaeche:var(--kachel);--sektion:var(--ring);clip-path:polygon(calc(-1 * var(--fuge-b)) 0, 100% 0, 100% 100%, calc(-1 * var(--fuge-b)) 100%)}
.mk-kachel:nth-child(even){--kerbe:2rem;margin-left:-1.2rem;z-index:1}
.mk-name{font-size:1.2rem;letter-spacing:.02em}
.mk-n{display:block;font-size:min(6.4rem,calc(100cqi / 6.4));line-height:.8;letter-spacing:-.04em;color:var(--kachel-zahl);white-space:nowrap}
.mk-lz{display:grid;gap:.6rem;margin-top:2rem}
.mk-lz-text{font-size:1.6rem;line-height:1.45;max-width:44ch}
.mk-agent{margin-top:2.4rem}
.mk-klein{margin-top:1.2rem;font-size:1.6rem;line-height:1.5;max-width:66ch}
.pf-mehr .link-pfeil{margin-top:1.2rem}
.mk-beleg{--kachel:var(--teer);--kachel-text:var(--kreide);--kachel-zahl:var(--signal);--ring:var(--signal)}
.pf-beleg .mk-kopf{color:var(--teer)}
.pf-beleg .mk-lz-name{color:var(--teer)}

/* Check auf Kreide */
.pf-check .lead{color:var(--teer)}
.pf-hinweis{font-size:1.6rem;color:var(--text-2);max-width:40ch}
.pf-deine{color:var(--signal-text);font-size:1.3rem;order:-1}
.pf-check-unten:has(.pf-deine:not([hidden])) .pf-hinweis{display:none}

/* Das Blatt: ohne JS im Fluss unter der Check-Ueberschrift; mit Buehne ein <dialog> von unten (Desktop von rechts) */
.blatt{max-width:var(--wrap);margin-inline:auto;padding:0 var(--gutter) 5.6rem;display:grid;gap:2.4rem;container-type:inline-size;--grund:var(--kreide);--text:var(--teer);--text-2:var(--muted);--knopf:var(--signal-text);--knopf-text:var(--kreide);--fokus:var(--signal);color:var(--teer)}
.blatt-kopf{display:none;align-items:center;justify-content:space-between;gap:1.6rem}
.blatt-titel{color:var(--muted);font-size:1.2rem}
.blatt-zu{flex:none;display:inline-flex;align-items:center;gap:1rem;white-space:nowrap;min-height:4.4rem;padding:0 1.2rem;margin-right:-1.2rem;background:none;border:0;font-family:var(--mono);font-weight:500;font-size:1.3rem;letter-spacing:.05em;text-transform:uppercase;color:var(--teer);cursor:pointer}
.blatt .skala{margin-top:4.4rem}
.skala-legende{display:flex;flex-wrap:wrap;gap:.6rem 2rem;font-size:1.2rem;margin-top:.4rem}
.skala-legende span{display:inline-flex;align-items:center;gap:.8rem}
.skala-legende span::before{content:"";width:1.2rem;height:1.2rem;flex:none}
.lg-deine::before{background:var(--signal)}
.lg-meine::before{background:var(--teer)}
.mk-check{--kachel:var(--teer);--kachel-text:var(--kreide);--kachel-zahl:var(--kreide);--ring:var(--kreide)}
.mk-check .mk-kopf{margin-top:0;margin-bottom:1.2rem}
.mk-check .mk-kopf span{color:var(--teer)}
.mk-buehne{position:relative;overflow:clip}
.mk-check .mk-kachel{--wert:0;min-height:8rem}
.blatt-dialog .mk-check .mk-n{font-size:min(4.8rem,calc(100cqi / 6.4))}
.mk-check .mk-kachel:not([data-stufe]) .mk-n{color:var(--muted-d)}
.mk-check .mk-kachel{--flaeche:linear-gradient(var(--balken,var(--signal)),var(--balken,var(--signal))) 0 100% / calc(var(--wert) * 1%) var(--balken-h,.6rem) no-repeat,var(--kachel)}
.vgl{font-size:1.2rem;color:var(--signal)}
/* Befund ohne neue Farbe: warn bekommt eine abgeschnittene Ecke und die Zahl in Signal, kritisch kippt die Kachel
   auf Signal-Grund (Teer-Schrift 4,60). Die Form sagt es, nicht nur die Farbe. */
.mk-check .mk-kachel.mk-kachel[data-stufe="warn"],.mk-check .mk-kachel.mk-kachel[data-stufe="kritisch"]{--ecke:2.4rem;--balken-h:1rem}
.mk-check .mk-kachel[data-stufe="warn"] .mk-n{color:var(--signal)}
.mk-check .mk-kachel[data-stufe="kritisch"]{--kachel:var(--signal);--balken:var(--teer);color:var(--teer)}
.mk-check .mk-kachel[data-stufe="kritisch"] .mk-n,.mk-check .mk-kachel[data-stufe="kritisch"] .vgl{color:var(--teer)}
.mk-lz-wert{font-size:min(5.6rem,calc(100cqi / 5));line-height:.85;letter-spacing:-.03em;text-transform:none}
.mk-check .mk-lz-text{color:var(--muted)}
/* Messstreifen: schiebt sich VOR die Kacheln und laeuft, solange gemessen wird (die Welt hat einen Puls) */
.mk-streifen{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background-color:var(--signal);color:var(--teer);visibility:hidden;box-shadow:calc(-1 * var(--fuge-b)) 0 0 0 var(--kreide);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M-7 7l14-14M0 28L28 0M21 35l14-14' stroke='%23161412' stroke-width='5' stroke-opacity='.22'/%3E%3C/svg%3E");background-size:2.8rem 2.8rem}
.mk-streifen span{background:var(--signal);padding:.6rem 1.2rem;font-size:1.3rem}
.misst .mk-streifen{visibility:visible;animation:schraffur .9s linear infinite}
@keyframes schraffur{to{background-position:2.8rem 0}}
.check-form{display:grid;gap:1.2rem}
.check-form input[type="text"]{width:100%;min-height:5.6rem;padding:1.2rem 1.6rem;background:var(--kreide);color:var(--teer);border:2px solid var(--teer);font-size:1.8rem;border-radius:0}
.check-form input::placeholder{color:var(--muted)}
.check-hinweis{color:var(--text-2);font-size:1.6rem;max-width:52ch}
.check-hinweis a{color:var(--teer)}
.check-status{min-height:1.4em;color:var(--signal-text)}
.check-status:empty{display:none}
.check-fazit-kopf{font-size:2.4rem;line-height:1.05;font-weight:900;font-stretch:125%;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:1.2rem;color:var(--teer);text-wrap:balance}
.check-fazit p{max-width:52ch;margin-bottom:2rem}

/* ---------- PRUEFSTAND MIT BUEHNE (html.pf-halt, gesetzt von site.js: Bewegung, Hoehe ab 560 px, Breite ab 360 px)
   .pf-fahrt  = Buehne plus ein Bildschirm Halt
   .pf-linie  = die Messlinie, haengt an der Oberkante und bleibt bei 58svh stehen (sticky, also im Takt des Daumens);
                ihre Box reicht bis zur Unterkante der Buehne, damit sie zusammen mit ihr loslaesst
   .pf-buehne = klebt oben, so hoch wie das Fenster ueber der Leiste
   Darin zwei Flaechen: Beleg (Signal) und Check (Kreide), die sich mit dem Fuss der Wortmarke von rechts davorschiebt. */
.pf-halt .pruefstand{--buehne-h:calc(100svh - var(--unten));--halt:85svh}
.pf-halt .pf-fahrt{position:relative;height:calc(var(--buehne-h) + var(--halt))}
.pf-halt .pf-linie{display:block;position:sticky;top:var(--linie);z-index:3;height:calc(var(--buehne-h) - var(--linie));margin-bottom:calc(var(--linie) - var(--buehne-h));pointer-events:none;color:var(--teer)}
.pf-halt .pf-linie .skala{max-width:calc(var(--wrap) - 2 * var(--gutter));margin:0 auto;width:calc(100% - 2 * var(--gutter))}
/* die Linie laeuft ueber die ganze Breite, die Skala steht im Satzspiegel */
.pf-halt .pf-linie::before{content:"";position:absolute;left:0;right:0;top:0;height:.3rem;background:var(--teer)}
.pf-halt .pf-buehne{position:sticky;top:0;z-index:1;height:var(--buehne-h);overflow:clip}
.pf-halt .pf-flaeche{position:absolute;inset:0}
.pf-halt .pf-inhalt{height:100%;display:grid;grid-template-rows:var(--linie) minmax(0,1fr);padding-block:0}
.pf-halt .pf-oben{display:flex;flex-direction:column;justify-content:flex-end;padding:1.6rem 0 4.6rem;min-height:0}
.pf-halt .pf-unten{margin-top:0;padding-top:3.6rem;min-height:0}
.pf-halt .skala-fluss,.pf-halt .pf-mehr,.pf-halt .pf-beleg .mk-lz{display:none}
.pf-halt .pf-h2{font-size:min(var(--fs),calc(100cqi / var(--lw) - .5px),4.4svh)}
.pf-halt .pf-check .pf-h2{font-size:min(var(--fs),calc(100cqi / var(--lw) - .5px),8svh)}
.pf-halt .pf-zeile{gap:1.2rem}
.pf-halt .pf-oben .eyebrow{margin-bottom:1.2rem}
/* Kacheln im Halt: kompakt, Zahl ueber Name, Hoehe aus dem Fenster */
.pf-halt .pf-beleg .mk-kachel{min-height:0;padding-block:.8rem}
.pf-halt .pf-beleg .mk-n{font-size:min(5.6rem,4.2svh,calc(100cqi / 6.4))}
/* Check-Flaeche: Fuss der Wortmarke links unten, Freistellkante in Teer, kommt von rechts */
.pf-halt .pf-check{z-index:2;background:transparent;--kerbe:4.8rem;--form:polygon(var(--kerbe) 0,100% 0,100% 100%,0 100%,var(--kerbe) calc(100% - 2 * var(--kerbe)))}
.pf-halt .pf-check::before{content:"";position:absolute;top:0;bottom:0;left:calc(-1 * var(--fuge-b));right:var(--fuge-b);background:var(--teer);clip-path:var(--form)}
.pf-halt .pf-check::after{content:"";position:absolute;inset:0;background:var(--kreide);clip-path:var(--form)}
.pf-halt .pf-check .pf-inhalt{position:relative;z-index:1;padding-left:calc(var(--kerbe) + var(--gutter))}
.pf-halt .pf-check-unten{display:grid;gap:1.2rem;justify-items:start;align-content:start}
.pf-halt .pf-check-auf{min-width:22rem}
.pf-halt .pf-nachsatz{display:block;background:var(--kreide);color:var(--teer);padding-block:4.8rem 5.6rem;position:relative;z-index:2}
.pf-halt .pf-nachsatz .pf-mehr{display:block}
.pf-halt .pf-nachsatz .mk-agent{margin-top:0}
/* Anfangslage mit Bewegung (vor dem Halt): Check rechts draussen */
.pf-halt .pf-check{translate:calc(100% + var(--fuge-b) + 2px) 0}

/* Das Blatt als Dialog */
.blatt-dialog{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:none;height:auto;max-height:calc(100svh - 4.8rem);padding:0;border:0;background:var(--kreide);color:var(--teer);overflow-y:auto;overscroll-behavior:contain;box-shadow:0 calc(-1 * var(--fuge-b)) 0 0 var(--teer)}
.blatt-dialog::backdrop{background:rgba(22,20,18,.62)}
.blatt-dialog:not([open]){display:none}
.blatt-dialog .blatt{padding:1.2rem var(--gutter) calc(3.2rem + var(--safe-u));gap:2rem}
.blatt-dialog .blatt-kopf{display:flex;position:sticky;top:0;z-index:6;background:var(--kreide);margin-inline:calc(-1 * var(--gutter));padding:.4rem var(--gutter)}
.blatt-dialog .skala{margin-top:3.6rem}
.blatt-offen,.blatt-offen body{overflow:hidden}

/* ============================================================ 4 ZUSAGEN (Teer): Typo-Plakat
   Drei Zusagen als grosse Zeilen im Voreinander-Satz; mit Bewegung fahren ihre Woerter am Scrollwert von rechts vor
   ihre linken Nachbarn und stehen, wenn die Zeile 55 % der Hoehe erreicht. Der Fliesstext steht immer. */
.zusagen-raster{display:grid;gap:2.8rem}
.zusagen-h2{font-size:2.2rem;line-height:1.15;font-weight:800;font-stretch:112%;color:var(--papier);max-width:22ch}
.zusagen-liste{display:grid;gap:3.2rem}
.zusage{container-type:inline-size;display:grid;gap:1.4rem}
.zusage-titel{--fs:8.8rem;line-height:.84;color:var(--kreide)}
.zusage:nth-child(2) .zusage-titel{margin-left:.3em}
.zusage:nth-child(3) .zusage-titel{margin-left:.6em}
.zusage p{max-width:40ch;color:var(--kreide)}
.zusage:nth-child(2) p{margin-left:calc(.3 * min(8.8rem, 100cqi / 9))}
.zusage:nth-child(3) p{margin-left:calc(.6 * min(8.8rem, 100cqi / 9))}

/* ============================================================ 5 PAKETE (Kreide) */
.deck-pakete .karte{min-height:0}
.deck-pakete .karte-inhalt{gap:0}
.paket-marke{position:absolute;top:0;left:calc(var(--kerbe,0px) + 2rem);translate:0 -50%;background:var(--signal);color:var(--teer);padding:.4rem 1rem;z-index:2}
.paket-name{font-size:min(3.2rem,calc(100cqi / 7.4));line-height:1}
.paket-preis{margin-top:1.4rem;display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.paket-preis .disp{font-size:min(5.2rem,calc(100cqi / 5.4));line-height:.9;letter-spacing:-.03em;color:var(--akzent-gross)}
.paket-preis .mono{color:var(--text-2)}
.paket-preis-text .disp{font-size:min(3.6rem,calc(100cqi / 7.6))}
.paket-fuer{margin-top:1.4rem;font-weight:600;color:var(--kreide)}
.haken{margin-top:1.8rem;display:grid;gap:.9rem;margin-bottom:2.4rem;font-size:1.6rem;color:var(--kreide)}
.haken li,.sicher li{position:relative;padding-left:2.8rem}
.haken li::before,.sicher li::before{content:"";position:absolute;left:0;top:.35em;width:1.5rem;height:.9rem;border-left:.3rem solid var(--akzent-gross);border-bottom:.3rem solid var(--akzent-gross);rotate:-45deg;translate:0 -.1em}
.paket .knopf{margin-top:auto;align-self:stretch}
.deck .paket-beliebt{--flaeche:linear-gradient(var(--signal),var(--signal)) 0 0 / 100% .6rem no-repeat,var(--grund)}
.sicher-karte .karte-titel{--fs:3.4rem}
.sicher{display:grid;gap:1.6rem;margin-top:.4rem}
.sicher h4{font-size:1.7rem;line-height:1.2;font-weight:800;margin-bottom:.2rem;color:var(--kreide)}
.sicher p{color:var(--muted-d);font-size:1.6rem;line-height:1.45}
.karte-inhalt>.sicher:last-child{margin-top:auto}
.pakete-unten{margin-top:2rem;display:grid;gap:3.2rem}
.pakete-fuss{display:grid;gap:1rem;max-width:80ch}
.pakete-fuss a{font-weight:700;color:var(--signal-text)}
.pangv{color:var(--text-2);font-size:1.6rem}
.bogen{display:grid;gap:1.4rem;padding:2rem;text-decoration:none;color:var(--kreide);background:var(--teer);box-shadow:0 0 0 var(--fuge-b) var(--kreide),1rem 1rem 0 var(--fuge-b) var(--signal);transition:translate .5s var(--startblock),box-shadow .5s var(--startblock);container-type:inline-size;margin-right:1rem}
.bogen-titel{display:block;font-size:min(2.8rem,calc(100cqi / 10.2));line-height:.95}
.bogen-satz{display:block;color:var(--muted-d);max-width:48ch;font-size:1.6rem}
.bogen-zahlen{display:flex;gap:3.2rem}
.bogen-zahlen>span{display:grid}
.bogen-zahlen b{font-size:4.4rem;line-height:.85;color:var(--signal);letter-spacing:-.04em}
.bogen-zahlen .mono{color:var(--kreide);margin-top:.6rem}
.bogen-link{justify-self:start;color:var(--kreide)}
.bogen:hover,.bogen:focus-visible{translate:-.6rem -.6rem;box-shadow:0 0 0 var(--fuge-b) var(--kreide),1.6rem 1.6rem 0 var(--fuge-b) var(--signal)}

/* ============================================================ 6 UEBER MICH (Teer), knapp */
.ueber-raster{display:grid}
.ueber-foto{position:relative;width:54%;margin-left:auto;overflow:clip;box-shadow:0 0 0 var(--fuge-b) var(--teer)}
.ueber-foto img{width:100%;height:auto;aspect-ratio:4 / 5;object-fit:cover;object-position:50% 18%;filter:grayscale(1) contrast(1.05)}
.ueber-foto figcaption{position:absolute;right:0;bottom:0;padding:.6rem .9rem;background:var(--teer);color:var(--muted-d)}
.ueber-text{position:relative;z-index:1;container-type:inline-size;margin-top:-1.1em;font-size:1rem}
#ueber .h2{--fs:9rem;color:var(--kreide);max-width:6em}
.ueber-text .lead{margin-top:2rem;color:var(--kreide)}
.zitat{margin-top:2.4rem;padding-left:2rem;border-left:.6rem solid var(--signal)}
.zitat p{font-size:2rem;line-height:1.25;font-weight:700;font-stretch:112%;color:var(--papier)}
.ueber-text .link-pfeil{margin-top:2rem}

/* ============================================================ 7 ABLAUF (Kreide, Teer-Karten): Nummer und Titel voreinander */
.schritt .karte-inhalt{gap:1.2rem}
.karte-inhalt>.schritt-nr{font-size:min(12rem,calc(100cqi / 1.85));line-height:.78;letter-spacing:-.06em;color:var(--signal);margin-top:0}
.schritt-titel{--fs:3.4rem;margin-top:-.62em}
.ablauf-link{margin-top:1.6rem;font-size:1.6rem}

/* ============================================================ 8 KONTAKT (Teer) */
.kontakt-raster{display:grid;gap:3.6rem}
#kontakt .lead{color:var(--kreide)}
.anfrage{display:grid;gap:1.6rem;padding:2.4rem 2rem;margin-right:1rem;box-shadow:0 0 0 var(--fuge-b) var(--teer),1rem 1rem 0 var(--fuge-b) var(--signal-text)}
.anfrage-kopf{color:var(--muted)}
.feld{display:grid;gap:.6rem}
.feld label{font-weight:700}
.feld input,.feld textarea{width:100%;min-height:5.2rem;padding:1.2rem 1.4rem;background:var(--kreide);color:var(--teer);border:2px solid var(--teer);font-size:1.7rem;border-radius:0}
.feld textarea{min-height:9.6rem;resize:vertical}
.feld input::placeholder,.feld textarea::placeholder{color:var(--muted)}
.anfrage-recht{font-size:1.6rem;color:var(--muted)}
.anfrage-recht a{color:var(--teer)}
.direkt-titel{font-size:3.2rem;line-height:1;margin-bottom:1.4rem;color:var(--papier)}
.direkt p{color:var(--kreide);max-width:40ch}
.direkt-knoepfe{margin-top:2rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1.2rem}
.direkt-mail{margin-top:1.6rem}
.direkt-mail a{color:var(--kreide);font-weight:700;display:inline-block;padding-block:1rem}

/* ============================================================ 9 FAQ (Kreide) */
.faq-raster{display:grid;gap:2.8rem}
.faq-liste details{border-top:2px solid var(--teer)}
.faq-liste details:last-child{border-bottom:2px solid var(--teer)}
.faq-liste summary{position:relative;list-style:none;cursor:pointer;padding:1.5rem 5.2rem 1.5rem 0;min-height:4.4rem;font-size:1.7rem;font-weight:800;line-height:1.3}
.faq-liste summary::-webkit-details-marker{display:none}
.faq-liste summary::before,.faq-liste summary::after{content:"";position:absolute;right:1rem;top:50%;width:1.8rem;height:.3rem;margin-top:-.15rem;background:var(--teer);transition:scale .4s var(--startblock)}
.faq-liste summary::after{rotate:90deg}
.faq-liste details[open] summary::after{scale:0 1}
.faq-liste summary:hover{color:var(--signal-text)}
.faq-liste details p{padding-bottom:2rem;max-width:64ch}
.faq-liste details a{color:var(--signal-text);font-weight:700}
.js-motion .faq-liste details[open] p{animation:rechts-ein .6s var(--startblock) both;--von:12vw}

/* ============================================================ FUSS (Teer): die Wortmarke baut sich voreinander auf */
.fuss{padding-block:4.8rem 2.4rem}
.fuss-wm{display:block;width:100%;height:auto;margin-top:4.8rem;color:var(--papier);--wm-punkt:var(--signal)}
/* mit Bewegung kommt der Pixel zuletzt: er kehrt aus der Leiste heim, bis dahin wartet sein Platz leer */
.pixel-aktiv .fuss-wm .wm-punkt{fill:transparent;stroke:var(--muted-d);stroke-width:2px;vector-effect:non-scaling-stroke}
.pixel-aktiv.pixel-daheim .fuss-wm .wm-punkt{fill:var(--signal);stroke:none}
.fuss-raster{display:grid;gap:2.4rem}
.fuss-zeile{font-size:1.8rem;line-height:1.4;max-width:30ch;color:var(--kreide)}
.fuss-nav{display:flex;gap:4.8rem}
.fuss-nav ul{display:grid;gap:0;align-content:start}
.fuss-nav a,.fuss-kontakt a{text-decoration:none;color:var(--kreide);display:inline-block;padding-block:1rem}
.fuss-nav a:hover,.fuss-kontakt a:hover{text-decoration:underline}
.fuss-kontakt{font-style:normal;color:var(--muted-d);line-height:1.6}
.fuss-kontakt a{padding-block:.6rem}
.fuss-copy{margin-top:2rem;color:var(--muted-d)}

/* ============================================================ DAUMENLEISTE
   Fest unten, ueber der Safe-Area. Tonart: immer die Gegenrolle der Station dahinter. Beim Wechsel schiebt sich die
   neue Farbe von rechts VOR die alte. Rechts der Platz des Pixels: dort dockt der Punkt der h1 als Check-Knopf an. */
.leiste{position:fixed;left:0;right:0;bottom:0;z-index:60;padding-bottom:var(--safe-u);color:var(--l-text);transition:translate .42s var(--startblock)}
.leiste,.menue{--l-grund:var(--teer);--l-text:var(--kreide);--l-alt:var(--teer);--l-fuge:var(--kreide);--fokus:var(--signal)}
[data-ton="kreide"].leiste,[data-ton="kreide"].menue{--l-grund:var(--kreide);--l-text:var(--teer);--fokus:var(--signal-text)}
[data-fuge="teer"]{--l-fuge:var(--teer)}[data-fuge="kreide"]{--l-fuge:var(--kreide)}[data-fuge="signal"]{--l-fuge:var(--signal)}
.leiste-grund{position:absolute;inset:0;background:var(--l-alt);box-shadow:0 calc(-1 * var(--fuge-b)) 0 0 var(--l-fuge)}
.leiste-grund::after{content:"";position:absolute;inset:0;background:var(--l-grund);transform-origin:100% 50%;transform:scaleX(var(--l-wisch,1))}
.wischt .leiste-grund::after{transition:transform .5s var(--startblock)}
.leiste-zeile{position:relative;display:grid;grid-template-columns:1fr 1.2fr 1fr calc(var(--knopf-px) + 1.6rem);align-items:center;height:var(--leiste-h);padding-left:max(.4rem,env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.leiste-zeile li{display:flex;height:100%;align-items:center}
.leiste-knopf{flex:1;display:flex;align-items:center;justify-content:center;gap:.6rem;min-height:4.4rem;height:100%;padding:0 .4rem;background:none;border:0;font-family:var(--mono);font-weight:500;font-size:1.2rem;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;color:var(--l-text);cursor:pointer;white-space:nowrap}
.leiste-knopf:focus-visible{outline-offset:-4px}
.js .leiste-menue-ohnejs{display:none}
.striche{position:relative;display:block;width:1.6rem;height:1rem}
.striche span{position:absolute;left:0;width:100%;height:.2rem;background:currentColor}
.striche span:first-child{top:0}
.striche span:last-child{bottom:0;width:70%;left:auto;right:0}
.striche-zu span{top:50% !important;bottom:auto !important;width:100% !important;margin-top:-.1rem}
.striche-zu span:first-child{rotate:45deg}.striche-zu span:last-child{rotate:-45deg}
.leiste-weg .leiste{translate:0 calc(100% + 2rem)}
/* Platz und Knopf: der Platz ist ein leeres Kaestchen in Signal, der Knopf liegt darauf (ohne JS steht er dort) */
.leiste-platz-zelle{position:relative;justify-content:flex-end}
.leiste-platz{display:block;width:var(--knopf-px);height:var(--knopf-px);box-shadow:inset 0 0 0 2px var(--signal)}
.pixelknopf{position:absolute;right:0;top:calc(50% - var(--knopf-px) / 2);width:var(--knopf-px);height:var(--knopf-px);display:flex;align-items:flex-end;padding:.5rem .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%;z-index:2}
.pixelknopf:focus-visible{outline-color:var(--teer);outline-offset:2px;box-shadow:0 0 0 5px var(--signal)}
.pixelknopf.unterwegs .pixelknopf-text{visibility:hidden}
.pixelknopf.unterwegs{pointer-events:none}
/* bis die h1 steht, wartet der Knopf unsichtbar (der Punkt der h1 faehrt mit ihr ein) */
.js-motion:not(.pixel-aktiv):not(.pixel-ruht) .pixelknopf{visibility:hidden}
/* 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}
@media (hover:hover){.pixelknopf:not(.unterwegs):hover{box-shadow:.3rem .3rem 0 var(--l-text,var(--teer));translate:-.3rem -.3rem}}

/* Streifen mit der Wortmarke: der Fortschritt, oben in der Leiste ueber die volle Breite (Dekoration, aria-hidden) */
.fortschritt{position:relative;display:flex;align-items:flex-end;height:var(--streifen-h);padding-inline:var(--gutter);pointer-events:none}
.fortschritt .wm{display:block;height:1.1rem;width:auto;--wm-punkt:var(--signal)}

/* ============================================================ MENUE: Blatt von unten, VOR der Seite */
.menue{position:fixed;inset:6.4rem 0 0;z-index:70;display:flex;flex-direction:column;background:var(--l-grund);color:var(--l-text);box-shadow:0 calc(-1 * var(--fuge-b)) 0 0 var(--l-fuge);--grund:var(--l-grund);--text:var(--l-text);--knopf:var(--signal-text);--knopf-text:var(--kreide)}
[data-ton="teer"].menue{--knopf:var(--signal);--knopf-text:var(--teer)}
.menue-nav{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:2.8rem var(--gutter) 1.6rem}
.menue-liste li+li{margin-top:-.08em}
.menue-liste a{display:inline-block;font-size:min(5.6rem,calc((100vw - 2 * var(--gutter)) / 8.7));line-height:1.02;text-decoration:none;letter-spacing:-.03em;-webkit-text-stroke:var(--kante) var(--l-grund);paint-order:stroke fill;padding-block:.08em;color:var(--l-text)}
.menue-liste a:hover,.menue-liste a:focus-visible{color:var(--akzent-menue,var(--signal))}
[data-ton="kreide"].menue{--akzent-menue:var(--signal-text)}
.menue-fuss{display:grid;gap:1.2rem;padding:1.6rem var(--gutter) 2rem;justify-items:start}
.menue-direkt a{font-weight:700;color:inherit;display:inline-block;padding-block:1rem}
.menue-zu{display:flex;align-items:center;justify-content:center;gap:1rem;min-height:var(--leiste-h);padding-bottom:var(--safe-u);background:var(--l-text);color:var(--l-grund);border:0;font-family:var(--mono);font-weight:500;font-size:1.3rem;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;box-sizing:content-box}
.menue-zu:focus-visible{outline-offset:-6px;outline-color:var(--l-grund)}
.menue-offen,.menue-offen body{overflow:hidden}

/* ============================================================ QUERFORMAT (Handy quer, 844 x 390)
   Karten niedriger und breiter, zwei sichtbar. Der Pruefstand steht im Fluss (keine Buehne unter 560 px Hoehe). */
@media (orientation:landscape) and (max-height:520px){
  :root{--leiste-h:5.2rem;--streifen-h:2rem}
  .deck{--karte-b:calc(var(--innen) * .47)}
  .deck-spur::after{flex-basis:0}
  .deck .karte{min-height:0;padding-block:2rem}
  .karte-inhalt{gap:1.2rem}
  .karte-titel{--fs:3rem}
  .karte-inhalt>.schritt-nr{font-size:min(9rem,calc(100cqi / 2.6))}
  .hero-innen{min-height:0;padding-bottom:3.2rem}
  .h1[data-vs="an"]{--lw:9.18;--fs:17svh;line-height:.8}
  .h1[data-vs="an"] .h1-z1::after{content:none}
  .h1[data-vs="an"] .h1-z2{margin-left:0}
  .h1[data-vs="an"] .h1-z3{margin-left:1.04em}
  .h1[data-vs="an"] .h1-z4{margin-left:2.08em}
  .hero-unten{margin-top:0}
  .hero-knoepfe{grid-template-columns:auto auto;justify-content:start}
  .knopf-breit{width:auto}
  .mk-werte{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mk-kachel+.mk-kachel{--kerbe:2rem;margin-left:-1.2rem}
  .mk-kachel:nth-child(2){z-index:1}.mk-kachel:nth-child(3){z-index:2}.mk-kachel:nth-child(4){z-index:3}
  .mk-n{font-size:min(5.6rem,calc(100cqi / 11))}
  .zusage-titel{--fs:6.4rem}
  .menue{inset:1.6rem 0 0}
}

/* ============================================================ AB 600 PX (grosse Handys quer, kleine Tablets) */
@media (min-width:600px){
  .deck{--karte-b:calc(var(--innen) * .56)}
  .deck-spur::after{flex-basis:0}
  .mk-werte{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mk-kachel+.mk-kachel{--kerbe:2rem;margin-left:-1.2rem}
  .mk-kachel:nth-child(2){z-index:1}.mk-kachel:nth-child(3){z-index:2}.mk-kachel:nth-child(4){z-index:3}
  .mk-n{font-size:min(6.4rem,calc(100cqi / 10.4))}
  .hero-knoepfe{grid-template-columns:auto auto;justify-content:start}
  .hero-neben{display:inline-flex}
  .knopf-breit{width:auto}
  .check-form .knopf-breit,.anfrage .knopf-breit{justify-self:start}
  .ueber-foto{width:52%}
  .pf-halt .pf-check{--kerbe:7.2rem}
}

/* ============================================================ AB 768 PX (Tablet) */
@media (min-width:768px){
  :root{--kopf-h:6.4rem}
  .station{padding-block:7.2rem 8rem}
  .station.hero,.station.pruefstand{padding:0}
  .lead{font-size:1.9rem}
  .deck .karte{min-height:min(38rem,38svh)}
  .ueber-raster{grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:end;column-gap:0}
  .ueber-foto{width:100%;margin-left:0}
  .ueber-text{margin-top:0;padding:0 0 2.4rem 4rem}
  #ueber .h2{margin-left:-12rem}
  .faq-raster{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:6.4rem}
  .kontakt-raster{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:6.4rem}
  .kontakt-kopf{grid-column:1 / -1}
  .direkt-knoepfe{grid-template-columns:minmax(0,1fr)}
  .fuss-raster{grid-template-columns:minmax(0,1.3fr) auto auto;gap:6.4rem}
  .pakete-unten{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:6.4rem;align-items:start}
  .zusage{grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:4rem;align-items:end}
  .zusage p,.zusage:nth-child(2) p,.zusage:nth-child(3) p{margin-left:0;padding-bottom:.4rem}
  .zusage-titel{--fs:9.6rem;font-size:min(var(--fs),calc(100cqi * 8 / 12 / var(--lw) - .5px))}
  .pf-halt .pf-zeile{grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:4rem;align-items:end}
  .pf-halt .pf-h2{font-size:min(var(--fs),calc(100cqi * 8 / 12 / var(--lw) - .5px),7svh)}
  .pf-halt .pf-check .pf-h2{font-size:min(var(--fs),calc(100cqi * 8 / 12 / var(--lw) - .5px),10svh)}
  .pf-halt .pf-beleg .mk-werte{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pf-halt .pf-check{--kerbe:9.6rem}
}

/* ============================================================ AB 1024 PX (Desktop, eigens komponiert)
   Oben die Navigation, darin waechst die Wortmarke. Von der Daumenleiste bleibt nur der Pixel-Knopf unten rechts.
   Stapel werden Decks: Ziehen mit der Maus plus Pfeile. */
@media (min-width:1024px){
  :root{--kopf-h:7.2rem;--unten:0px;--knopf-px:7.2rem}
  html{scroll-padding-top:calc(var(--kopf-h) + 1.6rem)}
  .leiste{left:auto;right:3.2rem;bottom:3.2rem;padding:0;color:var(--teer)}
  .leiste-grund,.fortschritt{display:none}
  .leiste-zeile{display:block;height:auto;padding:0}
  .leiste-zeile>li:not(.leiste-platz-zelle){display:none}
  .leiste-platz-zelle{display:block}
  .pixelknopf{top:0;padding:.8rem;font-size:1.3rem;box-shadow:0 0 0 2px var(--teer)} /* Kante, damit er auch vor Signal steht */
  .menue{display:none !important}
  .kopf{position:fixed;color:var(--k-text)}
  .kopf[data-ton="teer"]{--k-grund:var(--teer);--k-text:var(--kreide);--fokus:var(--signal);--grund:var(--teer);--text:var(--kreide)}
  .kopf[data-ton="kreide"]{--k-grund:var(--kreide);--k-text:var(--teer);--fokus:var(--signal);--grund:var(--kreide);--text:var(--teer)}
  .kopf[data-ton="signal"]{--k-grund:var(--signal);--k-text:var(--teer);--fokus:var(--teer);--grund:var(--signal);--text:var(--teer)}
  .kopf::before{content:"";position:absolute;inset:0;background:var(--k-grund)}
  .kopf-innen{position:relative}
  .kopf-wm{height:2.2rem}
  .kopf[data-ton="signal"] .wm{--wm-punkt:var(--teer)}
  .hero-ort{position:static;height:auto;max-width:none;justify-content:flex-start;text-align:left;margin-bottom:2.4rem;font-size:1.3rem}
  .kopf-nav{display:block;margin-left:auto}
  .kopf-nav ul{display:flex;gap:2.6rem}
  .kopf-nav a{position:relative;display:block;font-weight:600;font-size:1.5rem;text-decoration:none;padding-block:1rem}
  .kopf-nav a::after{content:"";position:absolute;left:0;right:0;bottom:.4rem;height:2px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--startblock)}
  .kopf-nav a:hover::after,.kopf-nav a:focus-visible::after{transform:scaleX(1);transform-origin:0 50%}

  .station{padding-block:calc(var(--kopf-h) + 3.2rem) 6.4rem}
  .hero-innen{min-height:100vh;min-height:100svh;padding-top:calc(var(--kopf-h) + 4rem);padding-bottom:5.6rem;display:grid;grid-template-columns:minmax(0,1fr) 48rem;column-gap:4.8rem;align-content:start}
  .hero-oben{grid-column:1 / -1;margin-top:0}
  .hero-unten{grid-column:1;margin-top:3.2rem;padding-top:0;gap:2rem;align-content:start}
  .h1[data-vs="an"]{--lw:9.18;--fs:min(19rem,21.5vh);line-height:.8}
  .h1[data-vs="an"] .h1-z1::after{content:none}
  .h1[data-vs="an"] .h1-z2{margin-left:0}
  .h1[data-vs="an"] .h1-z3{margin-left:1.04em}
  .h1[data-vs="an"] .h1-z4{margin-left:2.08em}
  .h1{--lw:9.7}
  .h1 .h1-z1,.h1 .h1-z2{display:inline}
  .hero-zeile{font-size:min(3.6rem,calc(100cqi / 26))}
  .hero-text{font-size:1.9rem}
  .zettel-platz{display:block;grid-column:2;grid-row:2;margin-top:3.2rem;margin-right:calc(var(--knopf-px) + 1.6rem)}
  .zettel{padding:1.6rem 1.8rem 1.6rem}
  .zettel-zeilen>div{padding-block:.6rem}
  .zettel-zeilen dd{font-size:min(2.2rem,calc(100cqi / 14.9))}
  .zettel-fuss{margin-top:.8rem;padding-top:1rem}
  .zettel{width:100%;box-shadow:0 0 0 var(--fuge-b) var(--teer),1.6rem 1.6rem 0 var(--fuge-b) var(--signal)}
  .js-motion .zettel{animation:rechts-ein 1s var(--startblock) both;animation-delay:560ms;--von:50vw}

  .h2{--fs:8rem}
  .deck{margin-top:3.2rem;--karte-b:calc(var(--innen) * .325)}
  .deck-spur{cursor:grab}
  .deck .karte{min-height:34rem;padding:3.2rem 3.6rem 3.2rem 3.2rem}
  .slot+.slot .karte{padding-left:calc(var(--kerbe) + 3.2rem)}
  .slot:last-child .karte{padding-right:3.2rem}
  .karte-titel{--fs:4.4rem}
  .slot:hover{z-index:9}
  /* Hover holt die Karte nach vorn. top statt translate: translate gehoert dem Zurueckbleiben am Scrollwert */
  .slot:hover .karte,.slot:focus-within .karte{top:-.8rem}
  .deck .karte{top:0;transition:top .45s var(--startblock)}
  .deck-steuer{gap:2.4rem}
  .karte-inhalt>.schritt-nr{font-size:min(15rem,calc(100cqi / 2))}

  /* Pruefstand am Desktop: der Kopf liegt oben drauf, Zusage links, Lead rechts, die Werte in einer Reihe */
  .pf-halt .pf-oben{padding-top:calc(var(--kopf-h) + 2.4rem)}
  .pf-halt .pf-unten{padding-top:4.4rem}
  .pf-halt .pf-check-unten{grid-template-columns:auto minmax(0,1fr);column-gap:3.2rem;align-items:center}
  .pf-halt .pf-check-unten .pf-deine{grid-column:1 / -1}
  .pf-halt .pf-check{--kerbe:12rem}
  .pf-halt .pf-nachsatz{padding-block:4rem 4.8rem}
  .pf-halt .pf-nachsatz .pf-mehr{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:6.4rem;align-items:start}
  .pf-halt .pf-nachsatz .mk-klein{margin-top:0;grid-column:1;grid-row:1 / span 2}
  .pf-halt .pf-nachsatz .mk-agent{grid-column:2}
  .pf-halt .pf-nachsatz .link-pfeil{grid-column:2;justify-self:start}
  .pf-halt .pf-beleg .mk-n{font-size:min(7.2rem,7svh)}
  .pf-halt .pf-beleg .mk-kachel{padding-block:1.4rem}
  .skala-wert{font-size:3.6rem}
  .pf-inhalt{padding-block:calc(var(--kopf-h) + 3.2rem) 5.6rem}
  .pf-zeile{grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:4.8rem;align-items:end}
  .blatt{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:6.4rem;align-items:start}
  .blatt>.skala,.blatt>.skala-legende,.blatt>.blatt-kopf{grid-column:1 / -1}
  .blatt-dialog{inset:0 0 0 auto;width:min(60rem,100%);height:100svh;max-height:100svh;box-shadow:calc(-1 * var(--fuge-b)) 0 0 0 var(--teer)}
  .blatt-dialog .blatt{display:grid;grid-template-columns:minmax(0,1fr);padding:2.4rem 4rem 4.8rem}
  .blatt-dialog .blatt-kopf{margin-inline:-4rem;padding-inline:4rem}

  .zusagen-raster{grid-template-columns:minmax(0,1fr);gap:3.6rem}
  .zusagen-liste{gap:3.2rem}
  .zusage-titel{--fs:6.4rem}
  .pakete-unten{margin-top:4rem;column-gap:8rem}
  .bogen{align-self:start;padding:2.8rem}
  .zitat p{font-size:2.6rem}
  .faq-raster{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:8rem}
  .fuss{padding-block:8rem 5.6rem}
  .fuss-wm{max-width:100rem}
  .direkt-knoepfe{grid-template-columns:repeat(3,auto);justify-content:start}
  .kontakt-raster{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
}
@media (min-width:1024px) and (max-height:760px){.hero-text{font-size:1.7rem}.hero-unten{margin-top:2.4rem;gap:1.6rem}}

/* Ruhefassung: nichts faehrt, alles steht im Endzustand */
@media (prefers-reduced-motion:reduce){
  .knopf,.karte,.leiste{transition:none}
}

/* ============================================================ BEWEGUNG AM SCROLLWERT (nur mit JS und ohne Ruhewunsch)
   Wo der Browser scroll-getriebene Animationen kann (Chrome, Safari 26), laufen sie in CSS, also im selben Bild wie
   der Daumen. Sonst setzt site.js dieselben Werte (Tempo -0,6) bzw. ScrollTrigger mit scrub. */
@keyframes zurueck-y{to{translate:0 40svh}}
@keyframes zurueck-x{to{translate:40% 0}}
@keyframes inhalt-x{to{translate:-40% 0}}
@keyframes foto-zurueck{from{translate:0 -7%}to{translate:0 7%}}
@keyframes pf-wachsen{from{clip-path:polygon(0 -14rem,0 -14rem,0 calc(100% + 2rem),0 calc(100% + 2rem))}to{clip-path:polygon(0 -14rem,100% -14rem,100% calc(100% + 2rem),0 calc(100% + 2rem))}}
@keyframes pf-steigen{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes pf-vor{to{translate:0 0}}
@keyframes pf-weg{to{translate:-100vw 0}}
@supports (animation-timeline:view()){
  .js-motion main>.station{animation:zurueck-y linear both;animation-timeline:view(block 0px);animation-range:entry-crossing 100% cover 100%}
  /* der Hero ist kuerzer als das Fenster: er bleibt erst ab dem ersten Wischen zurueck, nicht schon bei Scroll 0 */
  .js-motion main>.station.hero{animation-range:contain 100% cover 100%}
  .js-motion .slot{view-timeline:--slot x;view-timeline-inset:var(--rand) 0px}
  .js-motion .karte{animation:zurueck-x linear both;animation-timeline:--slot;animation-range:exit-crossing 0% exit-crossing 100%}
  .js-motion .karte-inhalt{animation:inhalt-x linear both;animation-timeline:--slot;animation-range:exit-crossing 0% exit-crossing 100%}
  .js-motion .ueber-foto{view-timeline:--foto block;view-timeline-inset:0px}
  .js-motion .ueber-foto img{scale:1.16;animation:foto-zurueck linear both;animation-timeline:--foto;animation-range:cover 0% cover 100%}
  /* Pruefstand: Linie waechst, bis die Oberkante 58svh erreicht; dann steigt die Zusage aus der Linie; im Halt
     schiebt sich der Check vor den Beleg, der Text des Belegs faehrt an der Vorderkante hinaus */
  .js-motion.pf-halt .pf-fahrt{view-timeline:--pf block;view-timeline-inset:0px}
  .js-motion.pf-halt .pf-linie{animation:pf-wachsen linear both;animation-timeline:--pf;animation-range:entry 0% entry calc(100% - 58svh)}
  .js-motion.pf-halt .pf-beleg .pf-oben{animation:pf-steigen linear both;animation-timeline:--pf;animation-range:entry calc(100% - 58svh) entry 100%}
  .js-motion.pf-halt .pf-check{animation:pf-vor linear both;animation-timeline:--pf;animation-range:contain 18% contain 68%}
  .js-motion.pf-halt .pf-beleg .pf-inhalt{animation:pf-weg linear both;animation-timeline:--pf;animation-range:contain 18% contain 68%}
}
html.messen main>.station{animation:none !important;translate:none !important}