/* ============================================================
   MARVIN.WEB Synthese (06.10.2026): die eine Fassung aus M1, M2, M3 und dem Ruhe-Prinzip von burton V6.
   Konzept: projekte/marvin-web/_konzept-synthese.md (sieben Regeln). Kurz: Text steht, Gegenstand lebt.
   Lesetext bewegt sich nach seinem Auftritt nie wieder; bewegt werden Linien, Zahlen, Kacheln, Kanten, Flaechen,
   Karten beim Eintritt (einmal, hoechstens 0,7 s) und der Pixel. Wichtiges steht vollstaendig im Fluss.

   MOBILE FIRST: Grundzustand ist das Handy (390 x 844), groesser nur per min-width.
   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
   Glas-Kopf (gerechnet 06.10.2026, Deckung 0,88 ueber dem unguenstigsten Grund): hell = Kreide 88 % mit Teer-Schrift,
     ueber Teer darunter 12,68, ueber Signal 13,94; dunkel = Teer 88 % mit Kreide-Schrift, ueber Kreide 11,84,
     ueber Signal 14,59; der Signal-Pixel im Kopf ist Grafik (3,34 ueber dunklem Glas auf Kreide, Mindestmass 3).
   ============================================================ */

:root{
  /* Hauskurve "startblock" (B): Spitzentempo bei 20 %, 99 % des Wegs bei 58 %, kein Ueberschwingen */
  --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;        /* Kontur im Voreinander-Satz; sichtbar ist die halbe Kontur */
  --vs-ls:-.05em;
  --vs-unter:-.07em;
  --fuge-b:.8rem;       /* Freistellkante an Karten, Kacheln, Leiste */
  --biss:2.4rem;        /* so weit greift der Fuss der naechsten Karte unter die vorige */
  --kopf-h:5.2rem;
  --leiste-h:5.6rem;
  --streifen-h:2rem;
  --knopf-px:4.8rem;
  --safe-u:env(safe-area-inset-bottom, 0px);
  --unten:calc(var(--streifen-h) + var(--leiste-h) + var(--safe-u));
  --gutter:max(clamp(1.6rem,4vw,4.8rem),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
  interpolate-size:allow-keywords;
}

html{scroll-padding-top:calc(var(--kopf-h) + 1.6rem);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);--linie-f: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);--linie-f: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);--linie-f:var(--teer)}
.ton-teer,.ton-kreide,.ton-signal{background:var(--grund);color:var(--text)}
:focus-visible{outline-color:var(--fokus,var(--signal))}
::selection{background:var(--knopf);color:var(--knopf-text)}

/* ---------- Raster und Text ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.station{position:relative;isolation:isolate;padding-block:4rem 4.8rem;overflow-x:clip}
.eyebrow{color:var(--akzent);margin-bottom:1.4rem}
.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}
.einheit{font-size:.5em;font-stretch:125%;letter-spacing:0}
.kopfzeilen{container-type:inline-size}
.kopfzeilen .lead{margin-top:1.6rem}

/* Ueberschriften: das laengste Wort passt immer in die Spalte (--lw = laengstes Wort in em, aus B2 gemessen) */
.fit{font-size:min(var(--fs,8rem),calc(100cqi / var(--lw,8) - .5px))}
.h2{--fs:3.8rem;line-height:.92}
@media (min-width:768px){.h2{--fs:5.6rem}}
@media (min-width:1024px){.h2{--fs:6.4rem}}

/* ---------- Der Voreinander-Satz (Signature): erst nach der Zerlegung rueckt der Satz zusammen ---------- */
[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 ---------- */
.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:focus-visible{translate:-.4rem -.4rem;box-shadow:.4rem .4rem 0 var(--text)}
.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)}
/* Hover nur mit echter Maus: Knopf und Karte treten vor (harter Versatzschatten) */
@media (hover:hover) and (pointer:fine){
  .knopf:hover{translate:-.4rem -.4rem;box-shadow:.4rem .4rem 0 var(--text)}
  .knopf:active{translate:0 0;box-shadow:none;transition-duration:.08s}
  .link-pfeil:hover::after{translate:.4rem 0}
}

/* ============================================================ KOPF
   Fest, weicht nie aus. Ganz oben durchsichtig auf dem Teer des Hero; ab 40 px Glas. data-ton: hell (Kreide-Glas,
   Teer-Schrift) ueber Kreide, dunkel (Teer-Glas, Kreide-Schrift) ueber Teer und Signal. */
.kopf{position:fixed;inset:0 0 auto;z-index:50;height:var(--kopf-h);color:var(--k-text);--k-text:var(--kreide);--k-glas:rgb(22 20 18 / .88);--grund:var(--teer);--text:var(--kreide);--fokus:var(--signal)}
.kopf[data-ton="hell"]{--k-text:var(--teer);--k-glas:rgb(245 241 232 / .88);--grund:var(--kreide);--text:var(--teer)}
.kopf::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--k-glas);opacity:0;-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);transition:opacity .3s ease,background-color .3s ease}
.kopf.glas::before{opacity:1}
html:not(.js) .kopf::before{opacity:1}
.kopf-innen{height:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);display:flex;align-items:center;gap:1.6rem}
.kopf-logo{display:flex;align-items:center;min-height:4.4rem;min-width:4.4rem;color:inherit;flex:none}
.kopf-zeichen{width:2.6rem;height:auto}
.kopf-wm{display:none;height:1.6rem;width:auto}
.kopf-nav{display:none}
.kopf-status{margin-left:auto;display:grid;grid-template-columns:auto auto;column-gap:.8rem;align-items:center;font-size:1.2rem;line-height:1.35;letter-spacing:.03em}
.status-pixel{grid-row:1 / span 2;width:1rem;height:1rem;background:var(--signal)}
.status-zeiten{white-space:nowrap}
.status-jetzt{white-space:nowrap}
.status-jetzt:empty{display:none}
[data-erreichbar="nein"] .status-pixel{background:transparent;box-shadow:inset 0 0 0 2px var(--signal)}
/* Puls im Stillstand: der Pixel atmet langsam, solange Marvin erreichbar ist (kein Blinken; Ruhefassung still) */
@keyframes atmen{0%,100%{scale:1}50%{scale:.62}}
.js-motion [data-erreichbar="ja"] .status-pixel{animation:atmen 4.8s ease-in-out infinite}
.kopf-check{display:none}

/* Massband an der Kopfunterkante: Teilstriche, Fuellung = Lesefortschritt (scaleX aus site.js) */
.massband{position:absolute;left:0;right:0;bottom:0;height:.7rem;pointer-events:none;color:var(--k-text);transition:opacity .3s ease}
.massband::before{content:"";position:absolute;inset:0;opacity:.5;
  background:
    linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat,
    repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 4rem) 0 100%/100% .5rem no-repeat,
    repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 1rem) 0 100%/100% .25rem no-repeat}
.js .kopf:not(.glas) .massband{opacity:0}
.massband-fuell{position:absolute;left:0;right:0;bottom:0;height:.3rem;background:var(--signal);transform-origin:0 50%;transform:scaleX(var(--fortschritt,0))}

/* ============================================================ DAUMENLEISTE (bis 1023 px)
   Fest unten ueber der Safe-Area, Tonart immer die Gegenrolle der Station dahinter. Oben IN der Leiste der Streifen
   mit der wachsenden Wortmarke. 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);background:var(--l-grund);box-shadow:0 calc(-1 * var(--fuge-b)) 0 0 var(--l-fuge,var(--kreide));transition:translate .42s var(--startblock),background-color .3s ease,color .3s ease;
  --l-grund:var(--teer);--l-text:var(--kreide);--fokus:var(--signal)}
.leiste[data-ton="hell"]{--l-grund:var(--kreide);--l-text:var(--teer);--fokus:var(--signal-text)}
.leiste[data-fuge="teer"]{--l-fuge:var(--teer)}.leiste[data-fuge="signal"]{--l-fuge:var(--signal)}
.fortschritt{position:relative;display:flex;align-items:flex-end;height:var(--streifen-h);padding-inline:var(--gutter);pointer-events:none}
.leiste-wm{display:block;height:1.1rem;width:auto}
.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 Pixel-Knopf: der Platz ist ein leeres Kaestchen in Signal, der Knopf liegt darauf (ohne JS steht er dort).
   Mit Bewegung startet der Knopf als Punkt der h1 und gleitet in 14-px-Stufen an seinen Platz (js/pixel-reise.js). */
.leiste-platz-zelle{position:relative;justify-content:flex-end}
.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;transition:scale .32s var(--startblock)}
.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}
.js-motion:not(.pixel-aktiv):not(.pixel-ruht) .pixelknopf{visibility:hidden}
.pixelknopf:focus-visible{transform:none !important;scale:1 !important;pointer-events:auto}
.pixelknopf:focus-visible .pixelknopf-text{visibility:visible !important}
/* tritt zurueck, solange der Check selbst im Bild ist (zwei gleichwertige Knoepfe auf einem Bildschirm, V6) */
.pixelknopf.zurueck{scale:0;pointer-events:none}

/* ============================================================ 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(--teer);color:var(--kreide);box-shadow:0 calc(-1 * var(--fuge-b)) 0 0 var(--kreide);--grund:var(--teer);--text:var(--kreide);--knopf:var(--signal);--knopf-text:var(--teer);--fokus:var(--signal)}
.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(--teer);paint-order:stroke fill;padding-block:.08em;color:var(--kreide)}
.menue-liste a:hover,.menue-liste a:focus-visible{color:var(--signal)}
.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{color:var(--muted-d)}
.menue-zu{display:flex;align-items:center;justify-content:center;gap:1rem;min-height:var(--leiste-h);padding-bottom:var(--safe-u);background:var(--kreide);color:var(--teer);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(--teer)}
.menue-offen,.menue-offen body{overflow:hidden}

/* ============================================================ 1 HERO (Teer): Typo-Plakat
   Der erste Bildschirm gehoert dem Plakat und dem Knopf; der Auftragszettel folgt darunter (am Desktop daneben). */
.station.hero{padding:0}
.hero-erst{display:flex;flex-direction:column;min-height:calc(100svh - var(--unten));padding-top:calc(var(--kopf-h) + 2rem);padding-bottom:3.2rem}
.hero-plakat{margin-top:auto;container-type:inline-size}
.hero-unten{margin-top:auto;padding-top:2.8rem;display:grid;gap:1.4rem}
/* h1 ohne JS: Zeilen untereinander. Mit Voreinander-Satz: ein Textblock, Zeilenabstand .78, 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; reist er los, bleibt sein Platz als leeres Kaestchen */
.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)}
/* Die Fuge: die Messlinie unter der h1, Massband mit Teilstrichen (zieht sich einmal von links) */
.fuge{position:relative;height:1.4rem;margin-top:1.6rem;color:var(--papier);pointer-events:none}
.fuge-band{position:absolute;inset:0;
  background:
    linear-gradient(currentColor,currentColor) 0 0/100% .3rem no-repeat,
    linear-gradient(var(--signal),var(--signal)) 0 0/3.2rem .3rem no-repeat,
    repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 5rem) 0 0/100% 1.2rem no-repeat,
    repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 1rem) 0 0/100% .7rem no-repeat}
.hero-zeile{margin-top:1.6rem;font-size:min(2.2rem,calc(100cqi / 15.2));line-height:1;color:var(--signal);text-wrap:balance}
.hero-text{font-size:1.7rem;line-height:1.5;max-width:44ch}
.hero-knoepfe{display:grid;gap:.4rem;justify-items:start}
.hero-knoepfe .knopf{width:100%}
.hero-pakete{color:var(--kreide)}
.belegzeile{color:var(--muted-d);font-size:1.2rem}

/* Einfahrt beim Laden (CSS, damit nichts auf das Skript wartet): das Plakat faehrt voreinander von rechts ein,
   jede Lage VOR die vorige, je 0,7 s Startblock; danach steht der Text. Die Fuge zieht sich, wenn die h1 steht. */
@keyframes rechts-ein{from{transform:translateX(var(--von,24vw))}}
@keyframes fuge-ziehen{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.js-motion .h1[data-vs="an"]{animation:rechts-ein .7s var(--startblock) both;animation-delay:40ms;--von:22vw}
.js-motion .hero-zeile{animation:rechts-ein .7s var(--startblock) both;animation-delay:200ms;--von:60vw}
.js-motion .hero-unten>*{animation:rechts-ein .7s 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}
.js-motion .fuge-band{animation:fuge-ziehen .7s var(--startblock) both;animation-delay:620ms}

/* Auftragszettel: Kreide-Karte VOR dem Teer, harter Versatzschatten in Signal; am Handy unter dem ersten Bildschirm */
.zettel{position:relative;width:calc(100% - 1rem);max-width:46rem;margin-bottom:4.8rem;padding:1.8rem 1.8rem 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);font-size:1.2rem}
.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;grid-template-columns:7.4rem minmax(0,1fr);column-gap:1rem;align-items:baseline;padding-block:.9rem}
.zettel-zeilen>div+div{border-top:2px dotted var(--teer)}
.zettel-zeilen dt{color:var(--muted);font-size:1.2rem}
.zettel-zeilen dd{margin:0;font-weight:900;font-stretch:125%;text-transform:uppercase;letter-spacing:-.01em;line-height:1.05;font-size:min(1.9rem,calc((100cqi - 8.4rem) / 14.8))}
.zettel-fuss{margin-top:.8rem;padding-top:1.2rem;border-top:2px solid var(--teer);font-weight:700;font-size:1.6rem}

/* ============================================================ AB 600 PX */
@media (min-width:600px){
  .hero-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 2.4rem}
  .hero-knoepfe .knopf{width:auto}
  .hero-zeile{font-size:min(2.6rem,calc(100cqi / 13.1))}
}

/* ============================================================ AB 768 PX */
@media (min-width:768px){
  .station{padding-block:7.2rem 8rem}
  .lead{font-size:1.9rem}
}

/* ============================================================ AB 1024 PX: Desktop, eigens komponiert
   Kopf: wachsende Wortmarke, Abschnittsnavigation, Live-Zustand, Pixel-Knopf (dort dockt der Punkt der h1 an).
   Die Daumenleiste entfaellt. */
@media (min-width:1024px){
  :root{--kopf-h:7.2rem;--unten:0px;--knopf-px:4.8rem}
  html{scroll-padding-bottom:1.6rem}
  .leiste,.menue{display:none !important}
  .kopf-innen{gap:2.4rem}
  .kopf-zeichen{display:none}
  .kopf-wm{display:block;height:1.8rem}
  .kopf-nav{display:block;margin-left:auto}
  .kopf-nav ul{display:flex;gap:clamp(1.4rem,1.6vw,2.6rem)}
  .kopf-nav a{position:relative;display:flex;align-items:center;min-height:4.4rem;font-weight:600;font-size:1.5rem;text-decoration:none;color:var(--k-text)}
  .kopf-nav a::after{content:"";position:absolute;left:0;right:0;bottom:.6rem;height:2px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--startblock)}
  .kopf-nav a:focus-visible::after,.kopf-nav a[aria-current]::after{transform:scaleX(1);transform-origin:0 50%}
  .kopf-nav a[aria-current]::before{content:"";position:absolute;left:-1.2rem;top:50%;width:.6rem;height:.6rem;margin-top:-.3rem;background:var(--signal)}
  .kopf-status{margin-left:0;padding-left:2.4rem;border-left:1px solid color-mix(in srgb,var(--k-text) 30%,transparent)}
  .kopf-check{display:block;position:relative;flex:none;width:var(--knopf-px);height:var(--knopf-px)}
  .kopf-check .pixelknopf{top:0;right:0;padding:.6rem;font-size:1.2rem}
  .station{padding-block:8rem 8.8rem}

  /* Hero: Plakat ueber die volle Breite, darunter links Text und Knoepfe, rechts der Auftragszettel */
  .hero-innen{display:grid;grid-template-columns:minmax(0,1fr) 44rem;column-gap:6.4rem;align-content:start;padding-top:calc(var(--kopf-h) + 2.4rem);padding-bottom:5.6rem}
  .hero-erst{display:contents}
  .hero-plakat{grid-column:1 / -1;margin-top:0}
  .hero-unten{grid-column:1;margin-top:0;padding-top:2.8rem;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.4rem,calc(100cqi / 27))}
  .hero-text{font-size:1.9rem}
  .zettel{grid-column:2;grid-row:2;margin:3.2rem 1.6rem 0 0;width:auto;padding:1.6rem 1.8rem;box-shadow:0 0 0 var(--fuge-b) var(--teer),1.6rem 1.6rem 0 var(--fuge-b) var(--signal)}
  .zettel-zeilen>div{padding-block:.7rem}
  .js-motion .zettel{animation:rechts-ein .7s var(--startblock) both;animation-delay:520ms;--von:50vw}
}
@media (min-width:1024px) and (max-height:760px){.hero-text{font-size:1.7rem}.hero-unten{padding-top:2rem;gap:1.4rem}}


/* ============================================================ 2 PROBLEME: der eine Wischstapel (aus B2/M2)
   Handy: CSS scroll-snap, Karte 86 % breit, die naechste lugt herein und steht VOR der vorigen (um --biss
   ueberlappend, Freistellkante in Kreide, Fuss der Wortmarke: das A schneidet dem M die rechte untere Ecke ab).
   Die Ueberlappung liegt nur im Rand der Karten, nie ueber Text. Ohne JS: seitlich scrollbare Liste.
   Desktop (Block am Ende): vier Karten nebeneinander, nichts ausser Sicht. */
.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) * .86)}
.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.2rem var(--rand) 1.6rem;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}
.slot:focus-visible{outline:3px solid var(--signal);outline-offset:-3px}
.karte{--kerbe:0px;--form:polygon(var(--kerbe) 0,100% 0,100% 100%,0 100%,var(--kerbe) calc(100% - 2 * var(--kerbe)))}
.deck .karte{position:relative;isolation:isolate;flex:1;display:flex;flex-direction:column;padding:2.2rem calc(var(--biss) + 1.6rem) 2.4rem 2rem;background:transparent;container-type:inline-size;transform-origin:50% 100%}
.deck .karte::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--teer);clip-path:var(--form);pointer-events:none}
.slot+.slot .karte{--kerbe:calc(var(--biss) + var(--fuge-b));padding-left:calc(var(--kerbe) + 1.6rem)}
.slot+.slot .karte::before{content:"";position:absolute;top:0;bottom:0;left:calc(-1 * var(--fuge-b));right:var(--fuge-b);z-index:-2;background:var(--kreide);clip-path:var(--form);pointer-events:none}
.slot:last-child .karte{padding-right:2rem}
.karte-inhalt{flex:1;display:flex;flex-direction:column;gap:1.4rem}
.karte-titel{--fs:3rem;line-height:.92;color:var(--kreide)}
.karte-text{font-size:1.6rem;line-height:1.5;color:var(--kreide);max-width:36ch}
.bei-mir{margin-top:auto;padding-top:1.4rem;border-top:2px solid var(--signal);display:grid;gap:.4rem}
.bei-mir .mono{color:var(--signal);font-size:1.2rem}
.bei-mir p:last-child{font-size:1.6rem;line-height:1.45;font-weight:700;color:var(--papier);max-width:34ch}
/* Steuerung unter dem Stapel, im Daumenbereich */
.deck-steuer{display:flex;align-items:center;justify-content:flex-end;gap:1.6rem}
.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:focus-visible{translate:-.3rem -.3rem;box-shadow:.3rem .3rem 0 var(--signal)}
.deck-knopf[aria-disabled="true"]{background:transparent;color:var(--text-2);box-shadow:inset 0 0 0 2px currentColor;translate:none;cursor:default}
@media (min-width:600px){.deck{--karte-b:calc(var(--innen) * .56)}.deck-spur::after{flex-basis:0}}
@media (min-width:1024px){
  .deck{margin-top:4rem}
  .deck-spur{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;scroll-snap-type:none;padding-block:1.2rem 0}
  .deck-spur::after{display:none}
  .slot{min-width:0}
  .deck-steuer{display:none}
  .deck .karte{padding:2.8rem calc(var(--biss) + 2rem) 2.8rem 2.8rem;min-height:40rem}
  .slot+.slot .karte{padding-left:calc(var(--kerbe) + 2rem)}
  .slot:last-child .karte{padding-right:2.8rem}
  .karte-titel{--fs:3.6rem}
}

/* ============================================================ 3 ZUSAGEN (Kreide): Kachelziffern
   Die Kachel ist das MW-Zeichen der CI-Tafel; ruhend in Kreide-2, als Ziffer ein volles Signal-Quadrat (Grafik,
   3,54 auf Kreide). Die echte Zahl steht als Text daneben. Zwischen Probleme und Zusagen (beide Kreide) zieht das
   Massband als Kapitelzeichen durch. */
.zusagen{padding-top:4rem}
.zusagen::before{content:"";position:absolute;left:var(--gutter);right:var(--gutter);top:0;height:1.2rem;color:var(--teer);pointer-events:none;
  background:linear-gradient(currentColor,currentColor) 0 0/100% .3rem no-repeat,repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 5rem) 0 0/100% 1.2rem no-repeat,repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 1rem) 0 0/100% .7rem no-repeat}
.zusagen-liste{display:grid;gap:2.8rem;margin-top:2.8rem}
.zusage{display:grid;gap:1.2rem;align-content:start}
.zusage-zahl{display:flex;align-items:flex-end;gap:1.6rem;flex-wrap:wrap}
.kz{display:block;width:calc(var(--sp) * var(--kz-k,1.2rem));height:auto;flex:none;--k-zeichen:var(--kreide-2)}
.kz use.an{--k-grund:var(--signal);--k-zeichen:var(--signal-text)}
.zusage-wert{font-family:var(--mono);font-weight:500;font-size:1.3rem;letter-spacing:.04em;text-transform:uppercase;line-height:1.3;color:var(--text-2);padding-bottom:.2rem}
.zusage-wert b{display:block;font-family:var(--disp);font-weight:900;font-stretch:125%;font-size:2.6rem;line-height:1;letter-spacing:-.02em;color:var(--teer);text-transform:none}
.zusage-titel{font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:2.4rem;line-height:1;letter-spacing:-.01em}
.zusage p:not(.zusage-wert){max-width:40ch}
@media (min-width:768px){.zusagen-liste{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:3.2rem}.kz{--kz-k:1.4rem}}
@media (min-width:1024px){.zusagen{padding-top:6.4rem}.zusagen-liste{column-gap:4.8rem;margin-top:4.8rem}.kz{--kz-k:1.5rem}.zusage-titel{font-size:2.8rem}}

/* ============================================================ 4 BELEG (Signal): Messkarte und Sekundenskala */
.beleg-raster{display:grid;gap:2.8rem}
.beleg .lead,.beleg .mk-kopf{color:var(--teer)}
.mk-kopf{font-size:1.2rem;margin-bottom:1.2rem}
/* Kacheln: Teer auf Signal, die rechte steht VOR der linken mit dem Fuss der Wortmarke */
.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:1rem;min-height:7.6rem;padding:1.2rem 1.2rem 1.2rem calc(var(--kerbe,0px) + 1.2rem);color:var(--kreide);--kerbe:0px;--form:polygon(var(--kerbe) 0,100% 0,100% 100%,0 100%,var(--kerbe) calc(100% - 2 * var(--kerbe)));--ring:var(--grund)}
.mk-kachel::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--kachel,var(--teer));clip-path:var(--form);pointer-events:none}
.mk-kachel:nth-child(even){--kerbe:2rem;margin-left:-1.2rem;z-index:1}
.mk-kachel:nth-child(even)::before{content:"";position:absolute;top:0;bottom:0;left:calc(-1 * var(--fuge-b));right:var(--fuge-b);z-index:-2;background:var(--ring);clip-path:var(--form);pointer-events:none}
.mk-n{display:block;font-size:min(4.4rem,calc(100cqi / 6.4));line-height:1;margin-block:-.12em -.08em;letter-spacing:-.04em;color:var(--signal);white-space:nowrap;font-variant-numeric:tabular-nums}
.mk-name{font-size:1.2rem;letter-spacing:.02em}
.messkarte{container-type:inline-size}
/* Ladezeit und Sekundenskala 0 bis 8 s: Teilstriche je Sekunde und Viertelsekunde, Fuellung in Echtzeit */
.lz{margin-top:2.4rem}
.lz-zeile{display:flex;align-items:baseline;justify-content:space-between;gap:1.6rem}
.lz-zeile .mono{font-size:1.2rem}
.lz-wert{font-size:4.4rem;line-height:.85;letter-spacing:-.03em;text-transform:none;font-variant-numeric:tabular-nums}
.lz-zahl{display:inline-block;min-width:2.15em;text-align:right}
.skala{position:relative;height:3.4rem;margin-top:1.6rem;--deine:0;--f-meine:1;--f-deine:1;color:var(--teer)}
.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:-1.1rem;height:1.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;top:-2.4rem}
.skala-lauf{display:none;position:absolute;left:0;top:-2.4rem;height:1.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-marken{position:absolute;left:0;right:0;top:1.7rem;font-size:1.2rem;letter-spacing:.02em;text-transform:none;line-height:1.2}
.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}
.lz-text{margin-top:1.6rem;font-size:1.6rem;line-height:1.45;max-width:44ch}
.beleg-fuss{display:grid;gap:1.2rem;align-content:start}
.mk-klein{font-size:1.6rem;line-height:1.5;max-width:62ch}
.beleg .link-pfeil{justify-self:start;color:var(--teer)}
@media (min-width:600px){
  .mk-werte{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mk-kachel+.mk-kachel{--kerbe:2rem;margin-left:-1.2rem}
  .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(--ring);clip-path:var(--form);pointer-events:none}
  .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 / 10.4))}
}
@media (min-width:1024px){
  .beleg-raster{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:6.4rem;row-gap:4rem}
  .beleg-kopf{grid-row:1 / span 2}
  .beleg #h-beleg{--fs:5.2rem}
  .beleg-kopf{align-self:start}
  .beleg-fuss{grid-column:2}
}

/* ============================================================ 5 CHECK (Teer): inline, Werte oben, Eingabe unten */
.check-raster{display:grid;gap:2.8rem}
.check .lead{color:var(--kreide)}
.mk-check{--kachel:var(--teer-2);--ring:var(--teer)}
.mk-check .mk-kopf{color:var(--muted-d)}
.mk-check .mk-kopf span{color:var(--kreide)}
.mk-buehne{position:relative;overflow:clip}
.mk-maske{display:block;overflow:clip;padding-block:.12em .08em;margin-block:-.12em -.08em}
.mk-maske .mk-n{margin:0}
.mk-check .mk-kachel{--wert:0}
.mk-check .mk-kachel:not([data-stufe]) .mk-n{color:var(--muted-d)}
.mk-check .mk-kachel::after{background: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, kritisch kippt die Kachel auf Signal (Teer-Schrift 4,60) */
.mk-check .mk-kachel[data-stufe="warn"],.mk-check .mk-kachel[data-stufe="kritisch"]{--balken-h:1rem;--form:polygon(var(--kerbe) 0,calc(100% - 2.4rem) 0,100% 2.4rem,100% 100%,0 100%,var(--kerbe) calc(100% - 2 * var(--kerbe)))}
.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)}
/* Messstreifen: schiebt sich VOR die Kacheln und laeuft, solange gemessen wird (Puls der Messung) */
.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;pointer-events:none;
  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}}
/* Ladezeit mit Pixelfeld: das Tempo als Pixelziffer (Gegenstand) neben der echten Zahl */
.check-lz{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2rem;align-items:start;margin-top:2.4rem}
.check-pz{display:grid;gap:.6rem;justify-items:start}
.check-pz .mono{font-size:1.2rem;color:var(--muted-d)}
.pz{display:block;width:calc(11 * 1.2rem);height:auto;--k-zeichen:var(--teer-2)}
.pz use.an{--k-grund:var(--signal);--k-zeichen:var(--signal-text)}
.check-lz .lz{margin-top:0}
.skala-check{color:var(--kreide)}
.skala-legende{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;font-size:1.2rem;margin-top:.8rem;color:var(--muted-d)}
.skala-legende span{display:inline-flex;align-items:center;gap:.6rem}
.skala-legende span::before{content:"";width:1.1rem;height:1.1rem;flex:none}
.lg-deine::before{background:var(--signal)}
.lg-meine::before{background:var(--kreide)}
.mk-check .lz-text{color:var(--muted-d)}
.check-form{display:grid;gap:1rem}
.check-form label{color:var(--kreide)}
.check-zeile{display:grid;gap:1rem}
.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(--muted-d);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{display:grid;gap:1.2rem;align-content:start}
.check-fazit-kopf{font-size:2.2rem;line-height:1.05;font-weight:900;font-stretch:125%;text-transform:uppercase;letter-spacing:-.01em;color:var(--papier);text-wrap:balance}
.check-fazit p{max-width:52ch}
.check-fazit .knoepfe{margin-top:.8rem}
@media (min-width:600px){.check-zeile{grid-template-columns:minmax(0,1fr) auto}.pz{width:calc(11 * 1.4rem)}}
@media (min-width:1024px){
  .check-raster{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"kopf karte" "form karte" "fazit karte";column-gap:6.4rem;row-gap:3.2rem;align-items:start}
  .check-kopf{grid-area:kopf}.mk-check{grid-area:karte}.check-form{grid-area:form}.check-fazit{grid-area:fazit}
}
#h-check{--fs:4.8rem}
@media (min-width:1024px){#h-check{--fs:7.2rem}}

/* ============================================================ 6 PAKETE (Kreide)
   Handy: drei Teer-Karten untereinander; jede folgende greift mit dem Fuss der Wortmarke (oben links, Steigung 2:1)
   ueber die Unterkante der vorigen, Freistellkante in Kreide. Die Ueberlappung liegt nur im Innenrand.
   Desktop: drei Spalten, seitlich voreinander wie die Probleme. Tabelle: dieselben Karten, Zeilen ueber alle drei
   gleich (subgrid), ohne Schnitt. */
.pakete-zeile{display:grid;gap:1.6rem;margin-top:1.6rem}
.pakete-zeile .lead{margin:0}
.ansicht{display:inline-flex;justify-self:start;box-shadow:inset 0 0 0 2px var(--teer)}
.ansicht-knopf{min-height:4.4rem;padding:0 1.8rem;background:transparent;border:0;font-family:var(--mono);font-weight:500;font-size:1.3rem;letter-spacing:.04em;text-transform:uppercase;color:var(--teer);cursor:pointer}
.ansicht-knopf[aria-pressed="true"]{background:var(--teer);color:var(--kreide)}
.ansicht-knopf:focus-visible{outline-offset:2px}
.pakete-liste{display:grid;margin-top:2.4rem;--k:1.4rem}
.tab-kopf{display:none}
.paket{position:relative;isolation:isolate;display:flex;flex-direction:column;padding:2.4rem 2rem 2.8rem;color:var(--kreide);--grund:var(--teer);--text:var(--kreide);--knopf:var(--signal);--knopf-text:var(--teer);--form:none}
.paket::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--teer);clip-path:var(--form);pointer-events:none}
.paket+.paket{margin-top:calc(-1 * var(--k));--form:polygon(0 0,calc(2 * var(--k)) var(--k),100% var(--k),100% 100%,0 100%);padding-top:calc(2.4rem + var(--k))}
.paket+.paket::before{content:"";position:absolute;inset:calc(-1 * var(--fuge-b)) 0 auto 0;height:calc(3 * var(--k));z-index:-2;background:var(--kreide);clip-path:polygon(0 0,calc(2 * var(--k)) var(--k),100% var(--k),100% 100%,0 100%);pointer-events:none}
.paket:nth-child(2){z-index:1}.paket:nth-child(3){z-index:2}.paket:nth-child(4){z-index:3}
.paket-name{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem 1.2rem;font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:2.6rem;line-height:1;letter-spacing:-.01em}
.paket-marke{background:var(--signal);color:var(--teer);padding:.4rem .9rem;font-size:1.2rem;letter-spacing:.04em}
.paket-preis{margin-top:1.2rem;display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.paket-preis .disp{font-size:3.6rem;line-height:.9;letter-spacing:-.03em;color:var(--signal)}
.paket-preis .mono{color:var(--muted-d)}
.paket-preis-text .disp{font-size:3.2rem}
.paket-fuer{margin-top:1.2rem;font-weight:700;color:var(--papier)}
.haken{margin-top:1.4rem;display:grid;gap:.6rem;margin-bottom:2rem;font-size:1.6rem}
.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,var(--signal));border-bottom:.3rem solid var(--akzent-gross,var(--signal));rotate:-45deg;translate:0 -.1em}
.paket .knopf{margin-top:auto;align-self:stretch}
.paket-beliebt::after{background:linear-gradient(var(--signal),var(--signal)) 0 var(--k) / 100% .6rem no-repeat,var(--teer)}
.paket .knopf:focus-visible{box-shadow:.4rem .4rem 0 var(--signal)}
.pakete-unten{display:grid;gap:2.8rem;margin-top:3.2rem}
.pakete-fuss{display:grid;gap:1rem;max-width:72ch;align-content:start}
.pakete-fuss a{font-weight:700;color:var(--signal-text)}
.pangv{color:var(--text-2);font-size:1.6rem}
.sicher-titel{font-size:2.6rem;line-height:1}
.sicher{display:grid;gap:1.2rem;margin-top:1.4rem}
.sicher h4{font-size:1.7rem;line-height:1.25;font-weight:800;margin-bottom:.2rem}
.sicher p{color:var(--text-2);font-size:1.6rem;line-height:1.45}
.sicher li::before{border-color:var(--signal-text)}
.bogen{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:1.2rem 2.4rem;padding:1.8rem;margin-right:1rem;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}
.bogen-titel,.bogen-satz{grid-column:1 / -1}
.bogen-titel{display:block;font-size:min(2.6rem,calc(100cqi / 10.4));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:4rem;line-height:.85;color:var(--signal);letter-spacing:-.04em}
.bogen-zahlen .mono{color:var(--kreide);margin-top:.6rem;font-size:1.2rem}
.bogen-link{justify-self:end;color:var(--kreide)}
.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)}

/* Tabelle: dieselben drei Karten als Spalten mit gleichen Zeilen (Name, Preis, Fuer wen, Was drin ist, Knopf) */
.pakete-liste[data-ansicht="tabelle"]{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(5,auto);column-gap:.8rem;border-top:2px solid var(--teer)}
.pakete-liste[data-ansicht="tabelle"] .paket{grid-row:1 / span 5;display:grid;grid-template-rows:subgrid;row-gap:1.2rem;margin:0;padding:1.6rem 0 0;color:var(--teer);--form:none;--knopf:var(--signal-text);--knopf-text:var(--kreide);--grund:var(--kreide);--text:var(--teer)}
.pakete-liste[data-ansicht="tabelle"] .paket::after,.pakete-liste[data-ansicht="tabelle"] .paket::before{display:none}
.pakete-liste[data-ansicht="tabelle"] .paket>*{margin:0}
.pakete-liste[data-ansicht="tabelle"] .paket-name{font-size:1.6rem;align-self:start}
.pakete-liste[data-ansicht="tabelle"] .paket-preis{display:grid;gap:.2rem;align-self:start}
.pakete-liste[data-ansicht="tabelle"] .paket-preis .disp{font-size:2.2rem;color:var(--signal-text)}
.pakete-liste[data-ansicht="tabelle"] .paket-preis .mono{color:var(--muted)}
.pakete-liste[data-ansicht="tabelle"] .paket-fuer{color:var(--teer);padding-top:1.2rem;border-top:2px dotted var(--teer)}
.pakete-liste[data-ansicht="tabelle"] .haken{gap:.6rem;padding-top:1.2rem;border-top:2px dotted var(--teer)}
.pakete-liste[data-ansicht="tabelle"] .haken li{padding-left:0}
.pakete-liste[data-ansicht="tabelle"] .haken li::before{display:none}
.pakete-liste[data-ansicht="tabelle"] .paket-knopf{align-self:end;padding-inline:.8rem;font-size:1.6rem}
.pakete-liste[data-ansicht="tabelle"] .paket-beliebt .paket-name{color:var(--signal-text)}

@media (hover:hover) and (pointer:fine){
  .pakete-liste[data-ansicht="karten"] .paket{top:0;transition:top .45s var(--startblock)}
  .pakete-liste[data-ansicht="karten"] .paket:hover{top:-.8rem;z-index:9}
  .bogen:hover{translate:-.6rem -.6rem;box-shadow:0 0 0 var(--fuge-b) var(--kreide),1.6rem 1.6rem 0 var(--fuge-b) var(--signal)}
}
@media (min-width:768px){
  .pakete-zeile{grid-template-columns:minmax(0,1fr) auto;align-items:end}
  .pakete-unten{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:6.4rem}
  .sicherheit{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:4.8rem}
  .sicher{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:3.2rem;margin-top:0}
  .bogen{align-self:start}
}
@media (min-width:1024px){
  .pakete-liste[data-ansicht="karten"]{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:4rem}
  .pakete-liste[data-ansicht="karten"] .paket{padding:3.2rem calc(var(--biss) + 2.4rem) 3.2rem 2.8rem;--form:none}
  .pakete-liste[data-ansicht="karten"] .paket+.paket{margin:0 0 0 calc(-1 * var(--biss));--kerbe:calc(var(--biss) + var(--fuge-b));--form:polygon(var(--kerbe) 0,100% 0,100% 100%,0 100%,var(--kerbe) calc(100% - 2 * var(--kerbe)));padding-left:calc(var(--kerbe) + 2.4rem)}
  .pakete-liste[data-ansicht="karten"] .paket+.paket::before{inset:0 var(--fuge-b) 0 calc(-1 * var(--fuge-b));height:auto;clip-path:var(--form)}
  .pakete-liste[data-ansicht="karten"] .paket:last-child{padding-right:2.8rem}
  .paket-beliebt::after{background:linear-gradient(var(--signal),var(--signal)) 0 0 / 100% .6rem no-repeat,var(--teer)}
  .pakete-liste[data-ansicht="tabelle"]{grid-template-columns:18rem repeat(3,minmax(0,1fr));column-gap:3.2rem;margin-top:4rem}
  .pakete-liste[data-ansicht="tabelle"] .tab-kopf{display:grid;grid-row:1 / span 5;grid-template-rows:subgrid;row-gap:1.2rem;padding-top:1.6rem;margin:0;color:var(--muted);font-size:1.2rem}
  .pakete-liste[data-ansicht="tabelle"] .tab-kopf span:nth-child(3),.pakete-liste[data-ansicht="tabelle"] .tab-kopf span:nth-child(4){padding-top:1.2rem}
  .pakete-liste[data-ansicht="tabelle"] .paket-name{font-size:2.2rem}
  .pakete-liste[data-ansicht="tabelle"] .paket-preis .disp{font-size:3.2rem}
  .pakete-unten{grid-template-columns:minmax(0,7fr) minmax(0,5fr);margin-top:5.6rem;row-gap:4.8rem}
  .sicherheit{order:-1}
}

/* ============================================================ 7 ABLAUF (Teer): Linie mit Querstrichen (V6)
   Handy senkrecht links neben den Schritten; Desktop waagerecht ueber den vier Spalten. --strich (0 bis 1) und
   .gesetzt kommen aus site.js, nur mit Bewegung. Ohne JS und in Ruhe: Linie voll, alle Querstriche gesetzt. */
.schritte-weg{position:relative;margin-top:2.8rem;padding-left:3.6rem;--strich:1}
.zug-linie{position:absolute;left:.8rem;top:.6rem;bottom:.6rem;width:.3rem;background:var(--teer-2);pointer-events:none}
.zug-fuell{position:absolute;inset:0;background:var(--signal);transform-origin:50% 0;transform:scaleY(var(--strich))}
.schritte{display:grid;gap:2.2rem}
.schritt{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1.4rem;row-gap:.6rem;align-items:baseline}
.schritt::before{content:"";position:absolute;left:-3.6rem;top:1.6rem;width:2.4rem;height:.3rem;background:var(--signal);transform-origin:0 50%;rotate:-26.565deg;transition:scale .5s var(--startblock)}
.zug .schritt::before{scale:0 1}
.zug .schritt.gesetzt::before{scale:1 1}
.schritt-nr{font-size:3.2rem;line-height:.8;color:var(--signal);letter-spacing:-.04em}
.schritt-titel{font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:2rem;line-height:1.05;letter-spacing:-.01em}
.schritt p:not(.schritt-nr){grid-column:2;max-width:42ch}
.ablauf-link{margin-top:2.8rem;color:var(--kreide)}
@media (min-width:1024px){
  .schritte-weg{padding:4rem 0 0;margin-top:4.8rem}
  .zug-linie{left:0;right:0;top:0;bottom:auto;width:auto;height:.3rem}
  .zug-fuell{transform-origin:0 50%;transform:scaleX(var(--strich))}
  .schritte{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:4rem}
  .schritt{grid-template-columns:minmax(0,1fr);row-gap:1.2rem;align-content:start}
  .schritt::before{left:0;top:-4.6rem;width:.3rem;height:2.4rem;transform-origin:50% 0;rotate:26.565deg}
  .zug .schritt::before{scale:1 0}
  .schritt p:not(.schritt-nr){grid-column:1}
  .schritt-nr{font-size:6.4rem}
  .schritt-titel{font-size:2.4rem}
}

/* ============================================================ 8 UEBER MICH (Kreide)
   Handy: Foto rechts, die h2 greift mit Freistellkante (Kontur in Kreide) ueber den unteren linken Rand des Fotos,
   dort liegt der helle Weg im Bild. Desktop: Text links, Foto rechts, die h2 ragt in den Himmel des Fotos. */
.ueber-raster{display:grid}
.ueber-foto{position:relative;width:62%;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% 30%;filter:grayscale(1) contrast(1.04)}
.ueber-foto figcaption{position:absolute;right:0;top:0;padding:.6rem .9rem;background:var(--kreide);color:var(--teer);font-size:1.2rem}
.ueber-text{position:relative;z-index:1;container-type:inline-size}
#h-ueber{margin-top:-.62em}
#h-ueber{--fs:6rem;color:var(--teer);max-width:6.2em}
#h-ueber[data-vs="an"] .vs-c{-webkit-text-stroke:.14em var(--kreide)}
.ueber-text .lead{margin-top:2rem}
.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%}
.ueber-text .link-pfeil{margin-top:2rem}
@media (min-width:768px){
  .ueber-raster{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:center;column-gap:0}
  .ueber-foto{grid-column:2;grid-row:1;width:100%}
  .ueber-text{grid-column:1;grid-row:1;padding-right:4rem}
  #h-ueber{margin:0 -40rem 0 0;max-width:none;font-size:min(10.4rem,7.2vw);white-space:nowrap}
  #h-ueber .h-z{display:block}
}
@media (min-width:1024px){
  .ueber-foto figcaption{top:auto;bottom:0}
  .zitat p{font-size:2.6rem}
  .ueber-foto img{aspect-ratio:4 / 3.7}
}

/* ============================================================ 9 KONTAKT (Teer): ruhig */
.kontakt-raster{display:grid;gap:2.8rem}
.kontakt .lead{color:var(--kreide)}
.anfrage{display:grid;gap:1.2rem;padding:2rem 1.8rem;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);font-size:1.2rem}
.feld{display:grid;gap:.6rem}
.feld label{font-weight:700}
.feld input,.feld textarea{width:100%;min-height:4.8rem;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:8.4rem;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:2.4rem;line-height:1;margin-bottom:1rem;color:var(--papier)}
.direkt p{max-width:42ch}
.direkt-knoepfe{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:1rem}
.direkt-knoepfe .knopf{flex:1 1 auto;padding-inline:1.6rem}
.direkt-mail{margin-top:1.4rem}
.direkt-mail a{color:var(--kreide);font-weight:700;display:inline-block;padding-block:1rem}
@media (min-width:768px){
  .kontakt-raster{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:6.4rem;align-items:start}
  .kontakt-kopf{grid-column:1;grid-row:1}
  .direkt{grid-column:1;grid-row:2}
  .anfrage{grid-column:2;grid-row:1 / span 2}
  .direkt-knoepfe{grid-template-columns:repeat(auto-fit,minmax(16rem,max-content))}
}

/* ============================================================ 10 FAQ (Kreide): natives Akkordeon */
.faq-raster{display:grid;gap:2.8rem}
.fragen{border-top:2px solid var(--teer)}
.frage{border-bottom:2px solid var(--teer)}
.frage summary{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1.6rem;min-height:5.6rem;padding:1.4rem 0;cursor:pointer;list-style:none;font-weight:800;font-size:1.7rem;line-height:1.3}
.frage summary::-webkit-details-marker{display:none}
.frage summary:focus-visible{outline-offset:2px}
.fz{position:relative;flex:none;width:1.8rem;height:1.8rem;margin-right:.6rem}
.fz i{position:absolute;background:var(--teer)}
.fz i:nth-child(1){left:0;right:0;top:50%;height:.3rem;margin-top:-.15rem}
.fz i:nth-child(2),.fz i:nth-child(3){left:50%;width:.3rem;margin-left:-.15rem;height:50%;transition:scale .32s var(--startblock)}
.fz i:nth-child(2){top:0;transform-origin:50% 100%}
.fz i:nth-child(3){bottom:0;transform-origin:50% 0}
.frage[open] .fz i:nth-child(2),.frage[open] .fz i:nth-child(3){scale:1 0}
.frage[open] .fz i:nth-child(1){background:var(--signal-text)}
.antwort{padding-bottom:2rem;max-width:62ch}
.antwort a{color:var(--signal-text);font-weight:700}
.frage::details-content{block-size:0;overflow:clip;transition:block-size .36s var(--startblock),content-visibility .36s allow-discrete}
.frage[open]::details-content{block-size:auto}
/* geschlossene Antworten sind auch fuer Messung und Vorlesen weg; beim Zuklappen erst nach der Hoehe */
.frage:not([open]) .antwort{visibility:hidden;transition:visibility 0s .36s}
@media (hover:hover) and (pointer:fine){.frage summary:hover{color:var(--signal-text)}}
@media (prefers-reduced-motion:reduce){.frage::details-content{transition:none}}
@media (min-width:1024px){.faq-raster{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:8rem}.frage summary{font-size:1.8rem}}

/* ============================================================ 11 FUSS (Teer): das Finale
   Zeichen und Wortmarke (gestapelt) haben ihre Fuge bei 50 % der Hoehe, gleich hoch gesetzt liegt sie auf einer
   Linie; die Messlinie zieht als Massband hindurch. */
.fuss{padding-block:4.8rem 2.4rem;color:var(--kreide);overflow:clip}
.fuss-raster{display:grid;gap:2rem}
.fuss-zeile{font-size:1.8rem;line-height:1.4;max-width:30ch}
.fuss-nav{display:grid;grid-template-columns:repeat(2,max-content);column-gap:4.8rem}
.fuss-nav ul{display:grid;align-content:start}
.fuss-nav a,.fuss-kontakt a{text-decoration:none;color:var(--kreide);display:inline-block;padding-block:.8rem;min-height:4.4rem}
.fuss-kontakt{font-style:normal;color:var(--muted-d);line-height:1.6}
.fuss-kontakt a{padding-block:.6rem}
.schluss{position:relative;display:flex;align-items:center;gap:calc(var(--sh) * .16);margin-top:4rem;--sh:clamp(6rem,19vw,22rem)}
.schluss-linie{position:absolute;left:calc(-1 * var(--gutter));right:calc(-1 * var(--gutter));top:50%;height:1.2rem;margin-top:-.15rem;color:var(--papier);pointer-events:none;
  background:linear-gradient(currentColor,currentColor) 0 0/100% .3rem no-repeat,repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 1rem) 0 0/100% .7rem no-repeat,repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 5rem) 0 0/100% 1.2rem no-repeat;opacity:.6}
.fuss-zeichen{position:relative;height:var(--sh);width:auto;flex:none;color:var(--papier)}
.fuss-wm{position:relative;height:var(--sh);width:auto;flex:none;color:var(--papier);--wm-punkt:var(--signal)}
.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-copy{margin-top:2.4rem;color:var(--muted-d);font-size:1.2rem}
@media (hover:hover) and (pointer:fine){.fuss-nav a:hover,.fuss-kontakt a:hover{text-decoration:underline}}
@media (min-width:768px){.fuss-raster{grid-template-columns:minmax(0,1.3fr) auto auto;gap:6.4rem}.fuss{padding-block:7.2rem 3.2rem}}
@media (min-width:1024px){.schluss{--sh:min(20rem,15vw);margin-top:6.4rem}}
#h-pakete{--fs:3.2rem}
@media (min-width:768px){#h-pakete{--fs:5.6rem}}
@media (min-width:1024px){#h-pakete{--fs:6.4rem}}
/* Check: Ladezeit kleiner (dort steht auch "misst"), Platz fuer die zweite Fuellung (deine) zwischen Zeile und Skala */
.mk-check .lz-wert{font-size:3.2rem}
.skala-check{margin-top:3.2rem}
.skala,.skala *{pointer-events:none}
@media (min-width:1024px){.mk-check .lz-wert{font-size:4rem}}
/* Tabelle am Handy: drei schmale Spalten. Woerter trennen (de), nichts ragt in die Nachbarspalte. */
.pakete-liste[data-ansicht="tabelle"] .paket{min-width:0;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.pakete-liste[data-ansicht="tabelle"] .paket-name{hyphens:manual;font-size:1.4rem}
.pakete-liste[data-ansicht="tabelle"] .paket-marke{font-size:1.1rem;padding:.3rem .6rem}
.pakete-liste[data-ansicht="tabelle"] .paket-preis .disp{font-size:min(2.2rem,5.6vw)}
.pakete-liste[data-ansicht="tabelle"] .paket-preis-text .disp{font-size:min(1.8rem,4.4vw)}
.pakete-liste[data-ansicht="tabelle"] .paket-fuer,.pakete-liste[data-ansicht="tabelle"] .haken{font-size:1.5rem;line-height:1.4}
.pakete-liste[data-ansicht="tabelle"] .paket-knopf{font-size:1.4rem;min-height:4.4rem;padding:.6rem .4rem;text-align:center}
@media (max-width:1023px){.pakete-liste[data-ansicht="tabelle"]{column-gap:1.4rem}}
@media (min-width:1024px){
  .pakete-liste[data-ansicht="tabelle"] .paket-name{font-size:2.2rem}
  .pakete-liste[data-ansicht="tabelle"] .paket-marke{font-size:1.2rem;padding:.4rem .9rem}
  .pakete-liste[data-ansicht="tabelle"] .paket-preis .disp{font-size:3.2rem}
  .pakete-liste[data-ansicht="tabelle"] .paket-preis-text .disp{font-size:3.2rem}
  .pakete-liste[data-ansicht="tabelle"] .paket-fuer,.pakete-liste[data-ansicht="tabelle"] .haken{font-size:1.7rem}
  .pakete-liste[data-ansicht="tabelle"] .paket-knopf{font-size:1.7rem;padding:1.1rem 1.6rem}
}
.pakete-liste[data-ansicht="tabelle"] .paket-preis,.pakete-liste[data-ansicht="tabelle"] .paket-knopf{hyphens:manual;-webkit-hyphens:manual}
@media (max-width:1023px){.pakete-liste[data-ansicht="tabelle"] .paket-preis-text .disp{font-size:min(1.6rem,4vw)}}
/* Handy quer (bis 520 px hoch): Kopf und Leiste flacher, damit der Lesebereich mehr als die Haelfte behaelt */
@media (orientation:landscape) and (max-height:520px) and (max-width:1023px){
  :root{--kopf-h:4.4rem;--leiste-h:4.6rem;--streifen-h:1.6rem;--knopf-px:4.4rem}
  .kopf-status{font-size:1.1rem;line-height:1.25}
  .leiste-wm{height:.9rem}
  .hero-erst{min-height:0}
  .menue{inset:1.2rem 0 0}
  .h1{--fs:17svh}
  .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}
}