/* ============================================================
   MARVIN.WEB Fassung B2 "Voreinander, mobil" (05.10.2026)
   Herkunft: die Wortmarke. Jeder Buchstabe steht vor seinem linken Nachbarn, getrennt durch eine
   Freistellkante in der Grundfarbe. Am Handy: seitlich wischen, und jede neue Karte schiebt sich vor die alte.

   MOBILE FIRST: der Grundzustand dieser Datei ist das Handy (390 x 844). Groesser wird es nur per
   @media (min-width ...) und einmal per Querformat-Abfrage (niedrige Handys quer).

   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, _pruef/kurve.mjs dort): 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, 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: M-Fase 117 breit, 242 hoch). Karten und Kacheln
     mit linkem Nachbarn tragen denselben Fuss: oben eine Kante Abstand, unten greift der Fuss VOR die vorige. */
  --leiste-h:5.6rem;   /* Daumenleiste, Zeile mit den vier Knoepfen (Tippziele 4,4 rem) */
  --streifen-h:2.2rem; /* Streifen mit der Wortmarke, oben IN der Leiste, volle Breite */
  --safe-u:env(safe-area-inset-bottom, 0px);
  --unten:calc(var(--streifen-h) + var(--leiste-h) + var(--safe-u)); /* die ganze Leiste: so viel bleibt unten frei */
  --kopf-h:5.6rem;
  /* quer liegt die Kamera-Insel links oder rechts: der Rand weicht ihr aus */
  --gutter:max(clamp(1.6rem,4vw,4.8rem),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
}

/* Anker, Fokus und Seitenende landen nie unter der Leiste: Scroll-Polster und Innenabstand in ihrer ganzen Hoehe */
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)}.station.ton-signal{--sektion:var(--signal)}
: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, ungesetzt gemessen (_pruef/woerter.mjs), damit auch ohne JS nichts uebersteht.
   100cqi = Breite der umgebenden Spalte (.wrap und Karten sind Container). */
.fit{font-size:min(var(--fs,8rem),calc(100cqi / var(--lw,8) - .5px))}
.h2{--fs:7.2rem;line-height:.9}
h1,h2,h3{text-wrap:balance}

/* ---------- 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.
   Ohne position, denn positionierte Inline-Spans zaehlt Chrome nicht fuer den LCP. */
[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, keine Weichzeichnung) ---------- */
.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 klein, liegt ueber dem Hero und scrollt mit. Ab 1024 px: feste Navigation. */
.kopf{position:absolute;inset:0 0 auto;z-index:30;height:var(--kopf-h);color:var(--kreide);--grund:var(--teer);--text:var(--kreide);--knopf:var(--signal);--knopf-text:var(--teer);--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}
/* Am Handy steht die Ortszeile des Plakats oben rechts auf der Hoehe der Wortmarke (spart eine Zeile im ersten
   Bildschirm), gehoert aber zum Hero, nicht zum Kopf: oben steht nur die Wortmarke. */
.hero-oben{position:relative}
.hero-ort{position:absolute;right:0;top:calc(-1 * var(--kopf-h) - 1.2rem);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,.kopf-cta{display:none}

/* Logo-Auftritt im Kopf (einmal je Sitzung): Glyphen fahren von rechts ein, jede haelt VOR ihrem linken Nachbarn,
   M A R V I N, dann W E B, zuletzt schiebt sich der Pixel hinter dem W hervor. --dx in Einheiten der viewBox (7950). */
@keyframes wm-ein{from{transform:translateX(var(--dx))}}
.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 setzt site.js je Station ein Tempo: waehrend die
   naechste Station von unten VOR sie faehrt, bleibt die alte zurueck (Tempo -0,6, nur transform, kein Kleben). */
.station{position:relative;padding-block:6.4rem 7.2rem;overflow-x:clip}
.kopfzeilen{container-type:inline-size}
.kopfzeilen .lead{margin-top:2rem}

/* ============================================================ 1 HERO: Typo-Plakat fuer 390 px gesetzt */
.station.hero{padding:0}
.hero-innen{display:flex;flex-direction:column;padding-top:calc(var(--kopf-h) + 1.2rem);padding-bottom:4rem}
.hero-oben{container-type:inline-size}
.hero-unten{padding-top:2.8rem;display:grid;gap:1.6rem;justify-items:stretch}
/* h1. Ohne JS: normal gesetzt, Zeilen untereinander, Zeilenabstand .9.
   Mit Voreinander-Satz: vier Zeilen als EIN Textblock (Zeilen inline mit Umbruch, damit die ganze h1 ein einziger
   LCP-Kandidat ist; je Zeile als inline-block zaehlte Chrome jede Zeile einzeln, Bericht Fassung B). Zeilenabstand .78:
   jede untere Zeile steht VOR der oberen, ihre Kante frisst sich in die Unterlaenge (Komma von WEBSITES,).
   Treppe .3/.6/.9 em. Laengste Zeile: ANFRAGEN plus .6 em = 7,49 em gesetzt (_pruef/woerter.mjs). */
.h1{--lw:7.45;--fs:15rem;font-size:min(var(--fs),calc(100cqi / var(--lw) - .5px));line-height:.9;color:var(--kreide)}
.h1 .vs-zeile{display:block}
.h1[data-vs="an"]{--lw:7.55;line-height:.78}
.h1[data-vs="an"] .vs-zeile{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}
.h1[data-vs="an"] .vs-w{display:inline;white-space:nowrap}
.hero-zeile{margin-top:2.4rem;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}

/* Einfahrt beim Laden: CSS, damit nichts auf das Skript wartet. Die h1 faehrt als Ganzes von rechts ein und steht
   nach 0,8 s (Startblock); sie steht schon im ersten Bild im Fenster, bleibt also LCP. Danach Unterzeile und Knopf. */
@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: folgt unter dem ersten Bildschirm, Kreide-Karte VOR dem Teer, harter Versatzschatten in Signal */
.zettel-platz{margin-top:4rem;padding-bottom:3.2rem}
.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:1rem}
.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 am Handy)
   Eine Spur zum seitlichen Wischen: CSS scroll-snap, jede Karte etwa 88 % breit, die naechste lugt herein.
   Die naechste Karte steht VOR der vorigen (z-Reihenfolge), 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 (.slot, nie verschoben); bewegt wird nur die Karte darin (.karte), sonst wandern die Rastpunkte
   mit. site.js laesst die vorige Karte zurueckbleiben (Tempo -0,6) und neigt die fahrende nach Wischtempo. */
.deck{position:relative;margin-top:3.2rem;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) 2.4rem;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} /* Auslauf: auch die letzte Karte rastet links ein */
.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(34rem,40svh);padding:2.4rem 2.8rem 2.4rem 2rem;background:transparent;container-type:inline-size;transform-origin:50% 50%;--flaeche:var(--grund)}
/* Flaeche und Freistellkante als zwei Ebenen mit derselben Form; die Kante ist dieselbe Form, eine Kante nach links
   versetzt, in der Farbe der Station. Sie wird VOR der vorigen Karte gemalt und schneidet ihr die Ecke ab. */
/* --form steht am Element selbst, nicht an :root: dort wuerde var(--kerbe) schon als 0 aufgeloest */
.karte,.mk-kachel{--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}
/* Inhalt der Karte: liegt in einer eigenen Ebene. Bleibt die Karte zurueck, faehrt ihr Text im Seitentempo weiter und
   verschwindet an ihrer Vorderkante; zurueck bleibt nur die leere Flaeche, ueber die sich die neue Karte schiebt.
   Beschnitt: links entlang der Form (eine Kante Luft fuer die Freistellkante), oben, rechts, unten frei. */
.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 */
/* rechts im Daumenbereich; links unten steht der Reiter mit der Wortmarke */
.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}

/* ============================================================ 2 PROBLEME und 3 ZUSAGEN: Inhalte der Karten */
#zusagen .karte-titel{color:var(--teer)}

/* ============================================================ 4 BELEG (Signal): Messkarte, Kacheln voreinander */
.beleg-raster{display:grid;gap:3.2rem}
.beleg-lead{color:var(--teer)}
.messkarte{container-type:inline-size}
.mk-kopf{margin-bottom:1.6rem}
.mk-werte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--fuge-b)}
/* Kacheln: rechte steht VOR der linken, mit dem Fuss der Wortmarke. Beschnitt nach rechts (Werte fahren von rechts in
   ihre Kachel), nach links eine Kante Luft fuer die Freistellkante. */
.mk-kachel{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;gap:1.2rem;min-height:12.8rem;padding:1.4rem 1.4rem 1.6rem calc(var(--kerbe,0px) + 1.4rem);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;overflow-wrap:anywhere}
.mk-n{display:block;font-size:min(8rem,calc(100cqi / 5.6));line-height:.8;letter-spacing:-.04em;color:var(--kachel-zahl);white-space:nowrap}
.mk-lz{display:grid;grid-template-columns:minmax(0,1fr);gap:.6rem;margin-top:2.4rem}
.mk-lz-wert{font-weight:900;font-stretch:125%;line-height:.85;letter-spacing:-.03em;text-transform:none}
.mk-lz-wert .disp{font-size:min(7.2rem,calc(100cqi / 4.4))}
.mk-einheit{font-size:2.8rem;font-stretch:125%;font-weight:900;text-transform:lowercase}
.mk-lz-text{font-size:1.6rem;line-height:1.45;max-width:40ch}
.mk-agent{margin-top:2.4rem}
.mk-klein{margin-top:1.2rem;font-size:1.6rem;line-height:1.5;max-width:66ch}
.mk-beleg .link-pfeil{margin-top:1.6rem}
.mk-beleg{--kachel:var(--teer);--kachel-text:var(--kreide);--kachel-zahl:var(--signal);--ring:var(--signal)}
.mk-beleg .mk-kachel{--fokus:var(--signal)}

/* ============================================================ 5 CHECK (Teer): Karte oben, Eingabe im Daumenbereich */
.check-raster{display:grid;gap:3.2rem}
#check .lead{color:var(--kreide)}
.mk-check{--kachel:var(--kreide);--kachel-text:var(--teer);--kachel-zahl:var(--teer);--ring:var(--teer)}
.mk-check .mk-kopf{color:var(--text-2)}
.mk-check .mk-kopf span{color:var(--kreide)}
.mk-buehne{position:relative;overflow:clip}
.mk-check .mk-kachel{min-height:11.2rem;--wert:0}
.mk-check .mk-kachel:not([data-stufe]) .mk-n{color:var(--muted)}
.mk-check .mk-kachel{--flaeche:linear-gradient(var(--balken,var(--teer)),var(--balken,var(--teer))) 0 100% / calc(var(--wert) * 1%) var(--balken-h,.6rem) no-repeat,var(--kachel)}
.mk-check .mk-lz-wert{font-size:min(5.6rem,calc(100cqi / 5))}
.vgl{font-size:1.2rem;color:var(--signal-text)}
.mk-check .mk-lz-text{color:var(--text-2)}
/* Befund ohne neue Farbe: warn bekommt die Signal-Wertleiste und eine abgeschnittene Ecke, kritisch kippt die Kachel
   auf Signal-Grund (Teer-Schrift 4,60). Die Form sagt es, nicht nur die Farbe. */
.mk-check .mk-kachel[data-stufe="warn"],.mk-check .mk-kachel[data-stufe="kritisch"]{--ecke:2.4rem;--balken-h:1rem}
.mk-check .mk-kachel[data-stufe="warn"] .mk-n{color:var(--signal-text)}
.mk-check .mk-kachel[data-stufe="warn"]{--balken:var(--signal)}
.mk-check .mk-kachel[data-stufe="kritisch"]{--kachel:var(--signal);color:var(--teer)}
.mk-check .mk-kachel[data-stufe="kritisch"] .vgl{color:var(--teer)}
/* 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(--teer);
  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 label{color:var(--kreide)}
.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(--kreide);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(--kreide)}
.check-status{min-height:1.4em;color:var(--signal)}
.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(--papier);text-wrap:balance}
.check-fazit p{color:var(--kreide);max-width:52ch;margin-bottom:2rem}

/* ============================================================ 6 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{position:relative;padding-left:2.8rem}
.haken 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)}
.pakete-unten{margin-top:2.4rem;display:grid;gap:4.8rem}
.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}
.sicher-block{container-type:inline-size;display:grid;gap:2.4rem}
.sicher-titel{--fs:6.4rem;line-height:.9}
.sicher{display:grid;gap:2.4rem}
.sicher li{position:relative;padding-left:3.6rem}
.sicher li::before{content:"";position:absolute;left:0;top:.35em;width:1.7rem;height:1rem;border-left:.35rem solid var(--signal-text);border-bottom:.35rem solid var(--signal-text);rotate:-45deg}
.sicher h4{font-size:1.9rem;line-height:1.2;font-weight:800;margin-bottom:.4rem}
.sicher p{color:var(--text-2);max-width:40ch}
.bogen{display:grid;gap:2rem;padding:2.4rem 2rem;text-decoration:none;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(3.6rem,calc(100cqi / 10.2));line-height:.95}
.bogen-satz{display:block;color:var(--muted-d);max-width:48ch}
.bogen-zahlen{display:flex;gap:3.2rem}
.bogen-zahlen>span{display:grid}
.bogen-zahlen b{font-size:5.6rem;line-height:.85;color:var(--signal);letter-spacing:-.04em}
.bogen-zahlen .mono{color:var(--kreide);margin-top:.6rem}
.bogen-link{justify-self:start}
.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)}

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

/* ============================================================ 8 UEBER MICH (Kreide): die Ueberschrift steht VOR dem Foto */
.ueber-raster{display:grid}
.ueber-foto{position:relative;width:78%;margin-left:auto;box-shadow:0 0 0 var(--fuge-b) var(--kreide)}
.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.2em;font-size:1rem}
#ueber .h2{--fs:9rem;color:var(--teer);max-width:6em}
.ueber-text .lead{margin-top:2.4rem}
.zitat{margin-top:2.8rem;padding-left:2rem;border-left:.6rem solid var(--signal)}
.zitat p{font-size:2.2rem;line-height:1.25;font-weight:700;font-stretch:112%;color:var(--teer)}
.ueber-text .link-pfeil{margin-top:2.4rem}

/* ============================================================ 9 KONTAKT (Teer) */
.kontakt-raster{display:grid;gap:4rem}
#kontakt .lead{color:var(--kreide)}
.anfrage{display:grid;gap:1.8rem;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:12rem;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;gap:1.2rem}
.direkt-mail{margin-top:2rem}
.direkt-mail a{color:var(--kreide);font-weight:700;display:inline-block;padding-block:1rem}

/* ============================================================ 10 FAQ (Kreide) */
.faq-raster{display:grid;gap:3.2rem}
.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.8rem 5.2rem 1.8rem 0;min-height:4.4rem;font-size:1.8rem;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:2.2rem;max-width:64ch}
.faq-liste details a{color:var(--signal-text);font-weight:700}

/* ============================================================ FUSS (Teer): die Wortmarke baut sich voreinander auf */
.fuss{padding-block:6.4rem 3.2rem} /* der Rest unten ist der Innenabstand der Seite in Leistenhoehe (body) */
.fuss-wm{display:block;width:100%;height:auto;color:var(--papier);--wm-punkt:var(--signal)}
.fuss-raster{margin-top:4.8rem;display:grid;gap:3.2rem}
.fuss-zeile{font-size:1.9rem;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:4.8rem;color:var(--muted-d)}

/* ============================================================ DAUMENLEISTE
   Fest unten, ueber der Safe-Area. Ihre Tonart ist immer die Gegenrolle der Station dahinter (auf Kreide Teer, auf
   Teer Kreide, auf Signal Teer). Beim Wechsel schiebt sich die neue Farbe von rechts VOR die alte. Ihre Freistellkante
   oben hat die Farbe der Station: unsichtbar auf dem Grund, sichtbar als Luecke vor einer Karte in Leistenfarbe. */
.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);--knopf:var(--signal);--knopf-text:var(--teer);--fokus:var(--signal)}
[data-ton="kreide"].leiste,[data-ton="kreide"].menue{--l-grund:var(--kreide);--l-text:var(--teer);--knopf:var(--signal-text);--knopf-text:var(--kreide);--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.3fr 1.1fr 1fr;align-items:center;height:var(--leiste-h);padding-inline:max(.4rem,env(safe-area-inset-left,0px)) max(.4rem,env(safe-area-inset-right,0px))}
.leiste-zeile li{display:flex;height:100%}
.leiste-knopf{flex:1;display:flex;align-items:center;justify-content:center;gap:.6rem;min-height:4.4rem;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}
.leiste-haupt{flex:1;align-self:center;height:4.4rem;margin-inline:.4rem;background:var(--knopf);color:var(--knopf-text);font-weight:500;transition:translate .4s var(--startblock),box-shadow .4s var(--startblock)}
.leiste-haupt:active{translate:0 .2rem}
.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}
.leiste-weg .leiste{translate:0 calc(100% + 2rem)}

/* Streifen mit der Wortmarke: der Fortschritt, oben in der Leiste ueber die volle Breite. Mit jeder Station schiebt sich
   der naechste Buchstabe von rechts VOR seinen linken Nachbarn (site.js). Ohne JS und in der Ruhefassung steht die
   ganze Marke. 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
   Faengt den Fokus, Esc schliesst, der Rest ist inert. Tonart wie die Leiste, aus der es aufsteigt. */
.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)}
.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-zeit{opacity:1;color:inherit}
.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)}
.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}
.menue-offen,.menue-offen body{overflow:hidden}

/* ============================================================ QUERFORMAT (Handy quer, 844 x 390)
   Karten niedriger und breiter, zwei sichtbar. Nichts wird abgeschnitten: Hoehen aus dem Inhalt. */
@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:4rem}
  .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(6.4rem,calc(100cqi / 11))}
  .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(8rem,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}
  .zettel{max-width:44rem}
  .direkt-knoepfe{grid-template-columns:repeat(3,auto);justify-content:start}
  .ueber-foto{width:62%}
}

/* ============================================================ AB 768 PX (Tablet) */
@media (min-width:768px){
  :root{--kopf-h:6.4rem}
  .station{padding-block:8.8rem 9.6rem}
  .hero{padding:0}
  .lead{font-size:1.9rem}
  .deck .karte{min-height:min(40rem,40svh)}
  .ueber-raster{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:end;column-gap:0}
  .ueber-eyebrow{grid-column:1 / -1}
  .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}
}

/* ============================================================ AB 1024 PX (Desktop, abgeleitet)
   Oben steht wieder eine Navigation, die Daumenleiste entfaellt, der Reiter mit der Wortmarke bleibt als kleines
   Fortschrittsschild unten links. Stapel werden breite Decks: drei Karten sichtbar, Ziehen mit der Maus plus Pfeile. */
@media (min-width:1024px){
  :root{--kopf-h:7.2rem;--streifen-h:3.2rem;--unten:var(--streifen-h)}
  html{scroll-padding-top:calc(var(--kopf-h) + 1.6rem)}
  /* am Desktop bleibt von der Leiste nur der Streifen mit der Wortmarke; er ruht, solange das Plakat steht */
  .leiste-nav{display:none}
  .fortschritt{align-items:center}
  .oben .leiste{translate:0 calc(100% + 2rem)}
  .kopf{position:fixed;color:var(--k-text)}
  .kopf[data-ton="teer"]{--k-grund:var(--teer);--k-text:var(--kreide);--knopf:var(--signal);--knopf-text:var(--teer);--fokus:var(--signal);--grund:var(--teer);--text:var(--kreide)}
  .kopf[data-ton="kreide"]{--k-grund:var(--kreide);--k-text:var(--teer);--knopf:var(--signal-text);--knopf-text:var(--kreide);--fokus:var(--signal);--grund:var(--kreide);--text:var(--teer)}
  .kopf[data-ton="signal"]{--k-grund:var(--signal);--k-text:var(--teer);--knopf:var(--teer);--knopf-text:var(--kreide);--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: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%}
  .kopf-cta{display:inline-flex;min-height:4.4rem;padding:.8rem 1.6rem;font-size:1.5rem}

  .station{padding-block:calc(var(--kopf-h) + 6.4rem) 10.4rem}
  .hero-innen{min-height:100vh;min-height:100svh;padding-top:calc(var(--kopf-h) + 4rem);padding-bottom:6.4rem;display:grid;grid-template-columns:minmax(0,1fr) 40rem;column-gap:6.4rem;align-content:start}
  .hero-oben{grid-column:1 / -1}
  .hero-unten{grid-column:1}
  /* Desktop-Plakat wie in Fassung B: WEBSITES, DIE fuellt die Satzbreite, ANFRAGEN und BRINGEN. als Treppe */
  .h1[data-vs="an"]{--lw:9.18;--fs:min(20rem,26vh);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-unten{margin-top:3.2rem;padding-top:0;gap:2rem;align-content:start}
  .hero-text{font-size:1.9rem}
  /* der Zettel rueckt unter das Plakat; 5,6 rem Abstand: die letzte Zeile ragt .165 em unter die h1-Box (Fassung B) */
  .zettel-platz{grid-column:2;grid-row:2;margin-top:5.6rem;padding-bottom:0}
  .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:9.6rem}
  .deck{margin-top:4.8rem;--karte-b:calc(var(--innen) * .325)}
  .deck[data-n="3"]{--karte-b:calc((var(--innen) + 2 * var(--biss)) / 3)}
  .deck-spur{cursor:grab}
  .deck .karte{min-height:42rem;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/left 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}
  .deck[data-n="3"] .deck-steuer{display:none}
  .beleg-raster{grid-template-columns:minmax(0,7fr) minmax(0,6fr);column-gap:6.4rem;align-items:end}
  .mk-beleg{grid-column:1 / -1}
  .mk-kachel{min-height:18rem}
  .check-raster{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:8rem;row-gap:3.2rem;align-items:start}
  .check-kopf{grid-column:1;grid-row:1}
  .check-form{grid-column:1;grid-row:2}
  .mk-check{grid-column:2;grid-row:1 / span 2;align-self:center}
  .check-fazit{grid-column:2}
  .pakete-unten{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:8rem;margin-top:4.8rem}
  .pakete-fuss{grid-column:1 / -1}
  .bogen{align-self:start;padding:3.2rem}
  .karte-inhalt>.schritt-nr{font-size:min(16rem,calc(100cqi / 2))}
  .zitat p{font-size:2.8rem}
  .faq-raster{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:8rem}
  .fuss{padding-block:9.6rem 6.4rem}
}
@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 beide Zurueckbleiben-Bewegungen in CSS,
   also im selben Bild wie der Daumen. Sonst setzt site.js dieselben Werte (Tempo -0,6). */
@keyframes zurueck-y{to{translate:0 40svh}}
@keyframes zurueck-x{to{translate:40% 0}}
@keyframes inhalt-x{to{translate:-40% 0}}
@supports (animation-timeline:view()){
  /* Station: von "Unterkante unten" bis "Unterkante oben" faehrt die naechste Station VOR sie; sie selbst bleibt zurueck */
  .js-motion main>.station{animation:zurueck-y linear both;animation-timeline:view();animation-range:entry-crossing 100% cover 100%}
  /* Karte: ab ihrem Rastpunkt bleibt sie zurueck, bis die naechste sie ganz verdeckt (Weg = eine Kartenbreite) */
  .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%}
}
html.messen main>.station{animation:none !important;translate:none !important}