/* ============================================================
   MARVIN.WEB Fassung B "Voreinander" (05.10.2026)
   Herkunft: die Wortmarke. Jeder Buchstabe steht vor seinem linken Nachbarn, getrennt durch eine
   Freistellkante in der Grundfarbe. Auf die Seite uebertragen: Neues schiebt sich vor das Alte.

   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/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" als CSS linear(), aus demselben Pfad wie CustomEase in site.js
     (_pruef/kurve.mjs): 6 % der Zeit im Block, Spitzentempo bei 20 %, 99 % des Wegs bei 58 %, ab 64 % steht es. */
  --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; sichtbar ist die halbe Kontur = .045em, gut 6 % der Versalhoehe (Wortmarke gross) */
  --vs-ls:-.05em;     /* Grundlaufweite im Voreinander-Satz: 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 wie M, A, R in der Wortmarke */
  --fuge-b:.8rem;     /* Freistellkante der Tafeln, Vorhaenge, Karten */
  --kopf-h:6.4rem;
}
@media (min-width:1080px){:root{--kopf-h:7.2rem}}

html{scroll-padding-top:var(--kopf-h)}
body{background:var(--teer)}

/* ---------- 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)}
: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:2rem}
.lead{font-size:2rem;line-height:1.45;max-width:52ch}
a{text-underline-offset:.18em;text-decoration-thickness:2px}

/* ---------- Ueberschriften: Schriftgrad je Ueberschrift, laengstes Wort passt immer in die Spalte ----------
   --lw = Breite des laengsten Worts in em (ungesetzt gemessen, also auch ohne JS richtig, _pruef/woerter.mjs).
   100cqi = Breite der umgebenden Spalte (.wrap und Karten sind Container). */
.fit{font-size:min(var(--fs,8rem),calc(100cqi / var(--lw,8) - .5px))}
/* h1 als Typo-Plakat (Fassung B). Ohne JS: normal gesetzt, Zeilenabstand .86, ohne Treppe und ohne Ueberlappung.
   Mit Voreinander-Satz (data-vs): die laengste Zeile fuellt die Satzbreite, die Zeilen ruecken senkrecht zusammen,
   jede untere steht VOR der oberen und ist treppenartig nach rechts versetzt.
   Zeilenabstand gerechnet (_pruef/metrik.mjs): Versalhoehe .688 + Ueberhang runder Buchstaben .012 + Kante .045 = .745
   ist das Minimum, darunter wuerde eine untere Zeile die Versalhoehe der oberen verdecken. Die Kante der unteren Zeile
   frisst sich nur in die Unterlaenge: das Komma von WEBSITES, (Unterlaenge .2) steht mittig ueber dem oberen Balken des E
   von ANFRAGEN (Versatz 1,04 em) und wird dort waagerecht angeschnitten. Bei .80 bleibt der gebogene Kommaschwanz
   sichtbar (bei .76 lag das Komma in der Fuge G/E und las sich wie ein Apostroph, bei .78 blieb nur ein Stummel;
   _pruef/shots/komma-nah.png). Ohne JS .90, damit sich die Kommaspitze nicht beruehrt. Pruefung: _pruef/plakat-geometrie.mjs. */
.h1{--lw:7.4;--fs:min(16rem,24vh);line-height:.9}
.h1 .h1-z3,.h1 .h1-z4{display:block}
@media (min-width:900px){.h1{--lw:9.7}}                                  /* ohne JS: WEBSITES, DIE = 9,64 em */
.h1[data-vs="an"]{line-height:.78}
.h1[data-vs="an"] .vs-zeile{display:inline-block}
.h1[data-vs="an"] .vs-w{display:inline;white-space:nowrap}   /* Woerter inline: LCP-Kandidat ist die ganze Zeile */
.h1[data-vs="an"] .h1-z3,.h1[data-vs="an"] .h1-z4{display:block;width:fit-content}
@media (min-width:900px){
  .h1[data-vs="an"]{--lw:9.18;--fs:min(20rem,26vh);line-height:.8}     /* WEBSITES, DIE = 9,12 em: volle Satzbreite */
  .h1[data-vs="an"] .h1-z3{margin-left:1.04em}                           /* Komma ueber dem E, gleichmaessige Treppe */
  .h1[data-vs="an"] .h1-z4{margin-left:2.08em}                           /* BRINGEN. endet bei 8,15 em, unter 9,18 */
}
/* Handy: Zeilen als reine Inline-Elemente mit Zeilenumbruch, damit die ganze h1 EIN LCP-Kandidat ist (52.160 px2 bei
   390px). Je Zeile fahrbar (inline-block) zaehlte Chrome jede Zeile einzeln (rund 17.000 px2), dann gewann der Absatz
   (35.310 px2). Deshalb faehrt die h1 am Handy als Ganzes ein (_pruef/lcp-handy.mjs, lcp-handy2.mjs). */
@media (max-width:899px){
  .h1[data-vs="an"]{--lw:7.62}
  .h1[data-vs="an"] .vs-zeile,.h1[data-vs="an"] .h1-z3,.h1[data-vs="an"] .h1-z4{display:inline;width:auto}
  .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}
}
.h2{--fs:8rem;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. */
[data-vs="an"]{letter-spacing:var(--vs-ls);word-spacing:.06em}
[data-vs="an"] .vs-w{display:inline-block}
/* Jedes Zeichen ist ein eigener Textlauf: Kontur, dann Fuellung, in Baumreihenfolge (CSS 2.1 Anhang E). Ohne position,
   denn positionierte Inline-Spans zaehlt Chrome nicht fuer den LCP; Bild mit und ohne position pixelgleich
   (_pruef/kante-vergleich.mjs, 05.10.2026, Chromium). */
[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: auf Hover und Fokus faehrt der Knopf nach vorn (harter Versatzschatten) ---------- */
.knoepfe{display:flex;flex-wrap:wrap;gap:1.2rem}
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:4.8rem;padding:1.1rem 2.2rem;font-weight:700;font-size:1.6rem;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:hover,.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-bottom:.2rem}
.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 */
.kopf{position:fixed;inset:0 0 auto;z-index:50;height:var(--kopf-h);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);--wm-punkt:var(--teer)}
.kopf-grund{position:absolute;inset:0;background:var(--k-grund)}
.kopf-innen{position:relative;height:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);display:flex;align-items:center;gap:2.4rem}
.kopf-logo{display:block;color:var(--k-text);flex:none}
.kopf-logo .wm{width:auto;height:3.6rem}
@media (min-width:1080px){.kopf-logo .wm{height:4.2rem}}
.kopf .wm{--wm-punkt:var(--signal)}
.kopf[data-ton="signal"] .wm{--wm-punkt:var(--teer)}
.kopf-nav{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:.6rem}
.kopf-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;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{min-height:4.2rem;padding:.8rem 1.6rem;font-size:1.5rem}
.burger,.burger-ohnejs{display:none}
@media (max-width:1079px){
  .kopf-nav{display:none}
  .kopf-cta{margin-left:auto}
  .burger-ohnejs{display:inline-flex;align-items:center;min-height:4.4rem;padding-inline:1.2rem;font-weight:700;color:var(--k-text)}
  .js .burger-ohnejs{display:none}
  .js .burger{display:inline-flex}
}
@media (max-width:420px){.kopf-cta{display:none}.js .burger,.burger-ohnejs{margin-left:auto}}
.burger{align-items:center;justify-content:center;width:4.8rem;height:4.8rem;margin-right:-1rem;background:none;border:0;color:var(--k-text);cursor:pointer}
.burger-striche{position:relative;display:block;width:2.6rem;height:1.4rem}
.burger-striche span{position:absolute;left:0;width:100%;height:.3rem;background:currentColor;transition:translate .4s var(--startblock),width .4s var(--startblock)}
.burger-striche span:first-child{top:0}
.burger-striche span:last-child{bottom:0;width:70%;left:auto;right:0}
.burger[aria-expanded="true"] .burger-striche span:first-child{translate:0 .55rem}
.burger[aria-expanded="true"] .burger-striche span:last-child{translate:0 -.55rem;width:100%}

/* Vollbildmenue: schiebt sich von rechts VOR die Seite, Vorderkante mit Freistellkante */
.menue{position:fixed;inset:0;z-index:45;background:var(--teer);color:var(--kreide);--grund:var(--teer);--text:var(--kreide);--knopf:var(--signal);--knopf-text:var(--teer);--fokus:var(--signal);padding:calc(var(--kopf-h) + 3.2rem) var(--gutter) 3.2rem;overflow-y:auto;overscroll-behavior:contain}
.menue::before{content:"";position:absolute;top:0;bottom:0;left:calc(-1 * var(--fuge-b));width:var(--fuge-b);background:var(--menue-fuge,var(--kreide))}
.menue-liste a{position:relative;display:inline-block;font-size:min(6.4rem,calc((100vw - 2 * var(--gutter)) / 8.7));line-height:1;text-decoration:none;letter-spacing:-.03em;-webkit-text-stroke:var(--kante) var(--teer);paint-order:stroke fill;padding-block:.06em}
.menue-liste li+li{margin-top:-.1em}
.menue-liste a:hover,.menue-liste a:focus-visible{color:var(--signal)}
.menue-fuss{margin-top:4rem;display:grid;gap:1.2rem;justify-items:start}
.menue-fuss .mono{color:var(--muted-d)}
.menue-direkt a{font-weight:700}
.menue-offen,.menue-offen body{overflow:hidden}

/* ============================================================ RAUM: Vorhaenge und Stapel
   Grundzustand (ohne JS, reduzierte Bewegung): normaler Fluss, nichts klebt, nichts ist versteckt.
   .vorhang-an (JS, volle Bewegung): jede Sektion klebt, sobald ihr Ende unten ankommt (--klebe = min(0, vh - Hoehe)),
   die naechste faehrt von unten VOR sie. Die Oberkante traegt die Freistellkante in der Farbe dahinter. */
.raum{display:block}
.abschnitt,.tafel,.fuss{position:relative}
.abschnitt,.tafel,.fuss{overflow-x:clip}
.abschnitt::before,.tafel::before,.fuss::before{content:"";position:absolute;inset:0 0 auto;height:var(--fuge-b);background:var(--fuge,transparent);z-index:4;pointer-events:none}

.vorhang-an .raum{position:sticky;top:var(--klebe,0px)}
.vorhang-an .abschnitt{position:sticky;top:var(--klebe,0px)}
.vorhang-an:not(.stapel-an) .stapel,.vorhang-an:not(.stapel-an) .stapel-buehne{display:contents}
.vorhang-an:not(.stapel-an) .tafel{position:sticky;top:var(--klebe,0px)}


/* Stapel (Desktop, gepinnt): Tafeln liegen uebereinander in einer klebenden Buehne */
.stapel-an .stapel{position:sticky;top:var(--klebe,0px);height:var(--stapel-h,600vh)}
.stapel-an .stapel-buehne{position:sticky;top:0;height:100vh;overflow:clip} /* clip, nicht hidden: sonst verschiebt der Browser die Buehne beim Fokussieren seitlich */
.stapel-an .tafel{position:absolute;inset:0;will-change:transform;display:flex;flex-direction:column;overflow:visible} /* die Buehne beschneidet; die Freistellkante liegt ausserhalb der Tafel */
.stapel-an .tafel::before{inset:0 auto 0 calc(-1 * var(--fuge-b));width:var(--fuge-b);height:auto}
.stapel-an .tafel:first-child::before{inset:0 0 auto;width:auto;height:var(--fuge-b)}
/* Messen: natuerliche Lage ohne Kleben (Kleben verschiebt nur das Bild, nicht den Fluss) */
.messen .raum,.messen .abschnitt,.messen .stapel,.messen .stapel-buehne,.messen:not(.stapel-an) .tafel{position:relative !important;top:auto !important}

/* ============================================================ 1 HERO */
.hero{min-height:100vh;min-height:100svh;padding-block:calc(var(--kopf-h) + 2.4rem) 4.8rem;display:flex;align-items:flex-start}
.hero-raster{display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-content:center}
.hero-kopfzeile{display:flex;justify-content:space-between;align-items:baseline;gap:2rem;flex-wrap:wrap}
.hero-kopfzeile .eyebrow{margin-bottom:0}
.hero-meta{color:var(--text-2)}
/* Unterstrichen, nicht nur andere Farbe (Lighthouse link-in-text-block, WCAG 1.4.1) */
.hero-meta a{color:var(--text);text-decoration:underline;text-decoration-thickness:1px}
.hero-meta a:hover{text-decoration-thickness:2px}
.h1{margin-top:2rem;color:var(--kreide)}
.hero-unten{margin-top:3.2rem;display:grid;gap:2rem;justify-items:start;align-content:start;align-self:start}
.hero-zeile{--fs:3.4rem;color:var(--signal);line-height:1;text-wrap:balance}
.hero-text{font-size:1.9rem;line-height:1.5;max-width:46ch;color:var(--kreide)}
.belegzeile{color:var(--text-2)}

/* Auftragszettel: steht VOR der Ueberschrift, Freistellkante in Teer, harter Versatzschatten in Signal (die Zusage) */
.zettel{position:relative;z-index:2;margin-top:4rem;width:100%;max-width:42rem;padding:2rem 2.2rem 2.2rem;container-type:inline-size;box-shadow:0 0 0 var(--fuge-b) var(--teer),1.6rem 1.6rem 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-pixel{width:1.2rem;height:1.2rem;background:var(--signal);flex:none}
.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}

@media (min-width:900px){
  .hero-raster{grid-template-columns:minmax(0,1fr) minmax(0,40rem);column-gap:4rem}
  .hero-kopfzeile,.h1{grid-column:1 / -1}
  .hero-unten{grid-column:1}
  .zettel{grid-column:2;grid-row:3;align-self:start;margin-top:3.2rem}
}
/* Der Zettel rueckt unter das Plakat (rechte Spalte). Abstand oben 5,6rem: der Inhaltsbereich der letzten Zeile ragt
   .165 em unter die h1-Box, dazu Kante und Luft. Geprueft mit _pruef/plakat-geometrie.mjs. */
@media (min-width:900px){.zettel{margin-top:5.6rem}}
@media (min-width:900px) and (max-height:760px){.hero-text{font-size:1.7rem}.hero-unten{margin-top:2.4rem;gap:1.6rem}}

/* Einfahrt der h1 beim Laden: CSS, damit nichts auf das Skript wartet. Jede Zeile faehrt von rechts ein und haelt
   VOR der vorigen (Startblock). Start nur 26 bis 50 vw rechts: das Plakat steht schon beim ersten Bild im Fenster,
   deshalb bleibt die h1 das LCP-Element. */
@keyframes vs-ein{from{transform:translateX(100vw)}}
@keyframes zeile-ein{from{transform:translateX(var(--von,30vw))}}
.h1-z1,.h1-z2{--z:0;--von:26vw}.h1-z3{--z:1;--von:34vw}.h1-z4{--z:2;--von:42vw}
@media (max-width:899px){.h1-z2{--z:1;--von:34vw}.h1-z3{--z:2;--von:42vw}.h1-z4{--z:3;--von:50vw}}
.js-motion .h1[data-vs="an"] .vs-zeile{animation:zeile-ein .95s var(--startblock) both;animation-delay:calc(var(--z) * 150ms + 60ms)}
@media (max-width:899px){
  .js-motion .h1[data-vs="an"] .vs-zeile{animation:none}
  .js-motion .h1[data-vs="an"]{--von:18vw;animation:zeile-ein .95s var(--startblock) both;animation-delay:60ms}
}
.js-motion .hero .zettel{animation:vs-ein 1.05s var(--startblock) both;animation-delay:560ms}

/* Logo-Auftritt im Kopf: Glyphen von rechts, M A R V I N, dann W E B, zuletzt der Pixel (1,24 s).
   --dx in Einheiten der viewBox (5140 breit): jede Glyphe startet knapp hinter dem rechten Rand der Marke. */
@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:5340px;animation-delay:0ms}
.logo-auftritt .kopf-logo .wm-A{--dx:4328px;animation-delay:60ms}
.logo-auftritt .kopf-logo .wm-R{--dx:3408px;animation-delay:120ms}
.logo-auftritt .kopf-logo .wm-V{--dx:2636px;animation-delay:180ms}
.logo-auftritt .kopf-logo .wm-I{--dx:1732px;animation-delay:240ms}
.logo-auftritt .kopf-logo .wm-N{--dx:1396px;animation-delay:300ms}
.logo-auftritt .kopf-logo .wm-W{--dx:5340px;animation-delay:380ms}
.logo-auftritt .kopf-logo .wm-E{--dx:4141px;animation-delay:440ms}
.logo-auftritt .kopf-logo .wm-B{--dx:3309px;animation-delay:500ms}
.logo-auftritt .kopf-logo .wm-punkt{--dx:447px;animation-delay:620ms}

/* ============================================================ 2 TAFELN */
.tafel{padding-block:calc(var(--kopf-h) + 4.8rem) 6.4rem}
.tafel-innen{display:flex;flex-direction:column}
.tafel .h2{max-width:14em}
.stapel-an .tafel{padding-block:calc(var(--kopf-h) + 3.5vh) 5vh}
.stapel-an .tafel-innen{flex:1;min-height:0}
.stapel-an .tafel .h2{--fs:min(11rem,11.5vh,100cqi / 13);max-width:none}
.stapel-an #ablauf .h2{--fs:min(7.6rem,8vh,100cqi / 13)}

/* Problem */
.probleme{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));gap:3.2rem 4rem;margin-top:4.8rem}
.probleme h3,.sicher h3{font-size:2rem;line-height:1.2;font-weight:800;margin-bottom:.8rem}
.probleme p{color:var(--text-2);font-size:1.6rem;line-height:1.5}
.stapel-an .probleme{margin-top:auto;padding-top:4vh}
@media (min-width:900px){.probleme{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Zusagen */
.zusagen{display:grid;grid-template-columns:minmax(0,1fr);gap:4rem;margin-top:4.8rem}
.zusagen h3{--fs:3.6rem;line-height:.95;color:var(--hell);margin-bottom:1.6rem}
.zusagen li{container-type:inline-size}
.zusagen p{color:var(--text-2);max-width:36ch}
.stapel-an .zusagen{margin-top:auto;padding-top:4vh}
@media (min-width:900px){.zusagen{grid-template-columns:repeat(3,minmax(0,1fr));gap:4.8rem}}

/* Beleg (Signal) */
.beleg-raster{display:grid;grid-template-columns:minmax(0,1fr);gap:3.2rem 6.4rem;align-items:end}
.beleg-kopf{container-type:inline-size}
.beleg-kopf .h2{--fs:6.4rem;max-width:16em}
.beleg-lead{font-size:1.8rem;max-width:40ch}
.beleg-seite .link-pfeil{margin-top:2rem}
.mk-beleg{margin-top:1.6rem}
@media (min-width:900px){
  .beleg-raster{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
  .mk-beleg{grid-column:1 / -1}
}
.stapel-an .beleg-raster{flex:1;min-height:0;align-content:center}
.stapel-an .beleg-kopf .h2{--fs:min(6rem,6.4vh,100cqi / 14)}

/* Messkarte (Beleg und Check im selben Raster): Kacheln stehen voreinander, jede vor ihrer linken Nachbarin */
.messkarte{--ring:var(--grund);container-type:inline-size}
.mk-kopf{margin-bottom:1.6rem}
.mk-werte{display:flex}
.mk-kachel{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:flex-start;gap:1.4rem;padding:1.4rem 1.4rem 1.6rem;background:var(--kachel);color:var(--kachel-text);box-shadow:0 0 0 var(--fuge-b) var(--ring);overflow:clip;overflow-clip-margin:0}
.mk-kachel+.mk-kachel{margin-left:-.6rem}
.mk-name{font-size:1.2rem;letter-spacing:.02em;overflow-wrap:anywhere}
.mk-n{display:block;font-size:min(12rem,13vh,calc(100cqi / 11.2));line-height:.8;letter-spacing:-.04em;color:var(--kachel-zahl);white-space:nowrap}
.mk-unten{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem 6.4rem;margin-top:2.8rem;align-items:end}
@media (min-width:900px){.mk-unten{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.mk-lz{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:2.4rem;align-items:end}
.mk-check .mk-lz{margin-top:2.8rem}
.mk-lz-name{grid-column:1 / -1;margin-bottom:.6rem}
.mk-lz-wert{font-size:min(6.4rem,calc(100cqi / 4.4));line-height:.85;letter-spacing:-.03em;text-transform:none}
.mk-lz-text{font-size:1.6rem;line-height:1.45;max-width:40ch}
.mk-agent{margin-top:0}
.mk-klein{margin-top:1.2rem;font-size:1.4rem;line-height:1.5;max-width:66ch}
.mk-beleg{--kachel:var(--teer);--kachel-text:var(--kreide);--kachel-zahl:var(--signal)}
.mk-beleg .mk-name{color:var(--kreide)}
@media (max-width:599px){
  .mk-werte{flex-wrap:wrap;gap:var(--fuge-b) 0}
  .mk-kachel{flex:1 1 50%}
  .mk-kachel:nth-child(odd){margin-left:0}
  .mk-n{font-size:min(9.6rem,calc(100cqi / 5.4))}
  .mk-lz{grid-template-columns:minmax(0,1fr);row-gap:1rem}
}
.stapel-an .mk-klein{font-size:1.3rem}
.stapel-an .mk-unten{margin-top:2.6vh}
.stapel-an .mk-n{font-size:min(12rem,12vh,calc(100cqi / 11.2))}

/* Ablauf */
.ablauf-kopf{container-type:inline-size;max-width:110rem}
.ablauf-kopf .link-pfeil{margin-top:2rem}
.ablauf-spur{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr));gap:4.8rem 4rem;margin-top:5.6rem;counter-reset:none}
.schritt{container-type:inline-size;display:flex;flex-direction:column}
.schritt-nr{font-size:min(16rem,calc(100cqi / 1.6));line-height:.78;letter-spacing:-.06em;color:var(--akzent-gross)}
.schritt-titel{position:relative;--fs:4rem;line-height:.92;margin-top:-.5em;margin-bottom:1.6rem;max-width:9em}
.schritt p:last-child{color:var(--text-2);max-width:34ch}
.stapel-an .ablauf-raster{flex:1;min-height:0;display:flex;flex-direction:column}
.stapel-an .ablauf-rahmen{margin-top:auto}
.stapel-an .ablauf-spur{display:flex;flex-wrap:nowrap;width:max-content;gap:7.2rem;margin-top:0;padding-top:3vh}
.stapel-an .schritt{width:min(54rem,40vw)}
.stapel-an .schritt-nr{font-size:min(20rem,21vh)}
.stapel-an .schritt-titel{--fs:min(5.2rem,5.4vh)}

/* ============================================================ 4 CHECK */
.abschnitt:not(.hero){padding-block:calc(var(--kopf-h) + 6.4rem) 9.6rem}
.check-raster{display:grid;grid-template-columns:minmax(0,1fr);gap:5.6rem}
.check-links{container-type:inline-size}
#check .h2{--fs:9.6rem}
#check .lead{margin-top:2.4rem;color:var(--kreide)}
.check-form{margin-top:3.2rem;display:grid;gap:1rem;max-width:60rem}
.check-form label{color:var(--kreide)}
.check-zeile{display:flex;flex-wrap:wrap;gap:1rem}
.check-zeile input{flex:1 1 24rem;min-width:0;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-zeile input::placeholder{color:var(--muted)}
.check-zeile .knopf{min-height:5.6rem;flex:none}
.check-hinweis{color:var(--text-2);font-size:1.5rem;max-width:52ch}
.check-hinweis a{color:var(--kreide)}
.check-status{min-height:1.4em;color:var(--signal)}
.check-rechts{display:grid;gap:4rem;align-content:start}
.mk-check{--kachel:var(--kreide);--kachel-text:var(--teer);--kachel-zahl:var(--teer)}
.mk-check .mk-kopf{color:var(--text-2)}
.mk-check .mk-kopf span{color:var(--kreide)}
.mk-buehne{position:relative;padding:var(--fuge-b);margin:calc(-1 * var(--fuge-b));overflow:clip}
.mk-check .mk-kachel{min-height:15rem;--wert:0}
.mk-check .mk-kachel:not([data-stufe]) .mk-n{color:var(--muted)}
.mk-check .mk-kachel::after{content:"";position:absolute;left:0;bottom:0;height:.6rem;width:calc(var(--wert) * 1%);background:var(--teer)}
.vgl{font-size:1.2rem;color:var(--signal-text)}
.mk-check .mk-lz-text{color:var(--text-2)}
/* Befund-Zustand 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"]{clip-path:polygon(0 0,calc(100% - 2.6rem) 0,100% 2.6rem,100% 100%,0 100%)}
.mk-check .mk-kachel[data-stufe="warn"] .mk-n{color:var(--signal-text)}
.mk-check .mk-kachel[data-stufe="warn"]::after{background:var(--signal);height:1rem}
.mk-check .mk-kachel[data-stufe="kritisch"]{background:var(--signal);color:var(--teer)}
.mk-check .mk-kachel[data-stufe="kritisch"] .vgl{color:var(--teer)}
.mk-check .mk-kachel[data-stufe="kritisch"]::after{background:var(--teer);height:1rem}
/* Messstreifen: schiebt sich vor die leere Karte und laeuft, solange gemessen wird (die Welt hat einen Puls) */
.mk-streifen{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;background-color:var(--signal);color:var(--teer);visibility:hidden;
  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.4rem}
.misst .mk-streifen{visibility:visible;animation:schraffur .9s linear infinite}
@keyframes schraffur{to{background-position:2.8rem 0}}
.check-fazit h3{font-size:3.2rem;line-height:1;margin-bottom:1.4rem;color:var(--papier)}
.check-fazit p{color:var(--kreide);max-width:52ch;margin-bottom:2.4rem}
@media (min-width:1000px){.check-raster{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:8rem}}

/* ============================================================ 5 PAKETE */
.pakete-kopf{container-type:inline-size;max-width:120rem}
.pakete-kopf .lead{margin-top:2.4rem}
.pakete{display:flex;flex-direction:column;margin-top:6.4rem;padding:var(--fuge-b)}
.paket{position:relative;display:flex;flex-direction:column;padding:2.8rem 2.8rem 3.2rem;border:2px solid var(--teer);box-shadow:0 0 0 var(--fuge-b) var(--kreide);container-type:inline-size;transition:translate .5s var(--startblock),box-shadow .5s var(--startblock)}
.paket+.paket{margin-top:-1.6rem}
.paket:nth-child(1){z-index:1}.paket:nth-child(3){z-index:2}.paket-beliebt{z-index:3}
.paket-beliebt{border-color:var(--teer)}
.paket-marke{position:absolute;top:-1.4rem;left:2.6rem;background:var(--signal);color:var(--teer);padding:.4rem 1rem}
.paket-name{font-size:min(3.6rem,calc(100cqi / 7.4));line-height:1}
.paket-preis{margin-top:1.6rem;display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.paket-preis .disp{font-size:min(5.6rem,calc(100cqi / 5.2));line-height:.9;letter-spacing:-.03em;color:var(--akzent-gross)}
.paket-preis .mono{color:var(--text-2)}
.paket-preis-text .disp{font-size:min(4rem,calc(100cqi / 9.4))}
.paket-fuer{margin-top:1.6rem;font-weight:600}
.haken{margin-top:2rem;display:grid;gap:1rem;margin-bottom:2.8rem}
.haken li{position:relative;padding-left:3rem}
.haken li::before{content:"";position:absolute;left:0;top:.35em;width:1.7rem;height:1rem;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:flex-start}
/* Zustand: Hover und Fokus holen die Karte nach vorn, Startblock-Kurve, harter Versatzschatten */
.paket:hover,.paket:focus-within{z-index:5;translate:-.8rem -.8rem;box-shadow:0 0 0 var(--fuge-b) var(--kreide),1.6rem 1.6rem 0 var(--fuge-b) var(--teer)}
@media (min-width:900px){
  .pakete{flex-direction:row;align-items:stretch}
  .paket{flex:1 1 0;min-width:0}
  .paket+.paket{margin-top:0;margin-left:-2.4rem}
  .paket-beliebt{margin-block:-2.4rem}
  .paket-beliebt{padding-top:5.2rem}
}
.pakete-fuss{margin-top:4.8rem;display:grid;gap:1rem;max-width:80ch}
.pakete-fuss a{font-weight:700}
.pangv{color:var(--text-2);font-size:1.5rem}
.bogen{margin-top:4.8rem;display:grid;grid-template-columns:minmax(0,1fr);gap:2.4rem;align-items:center;padding:3.2rem;background:var(--teer);color:var(--kreide);text-decoration:none;--text:var(--kreide);--grund:var(--teer);box-shadow:0 0 0 var(--fuge-b) var(--kreide);transition:translate .5s var(--startblock),box-shadow .5s var(--startblock);container-type:inline-size}
.bogen-titel{display:block;font-size:min(4rem,calc(100cqi / 10));line-height:.95}
.bogen-satz{display:block;margin-top:1.2rem;color:var(--muted-d);max-width:48ch}
.bogen-zahlen{display:flex;gap:3.2rem}
.bogen-zahlen>span{display:grid}
.bogen-zahlen b{font-size:7.2rem;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:-.8rem -.8rem;box-shadow:0 0 0 var(--fuge-b) var(--kreide),1.6rem 1.6rem 0 var(--fuge-b) var(--signal)}
@media (min-width:1000px){.bogen{grid-template-columns:minmax(0,1.4fr) auto auto;gap:4.8rem}}

/* ============================================================ 6 UEBER MICH: die Ueberschrift steht VOR dem Foto */
.ueber-raster{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.ueber-foto{position:relative;max-width:52rem}
.ueber-foto img{width:100%;height:auto;aspect-ratio:900 / 1349;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.ueber-foto figcaption{position:absolute;left:0;top:0;padding:.6rem .9rem;background:var(--teer);color:var(--muted-d)}
.ueber-text{position:relative;container-type:inline-size;margin-top:-6rem}
.ueber-text .eyebrow{display:inline-block;background:var(--teer);padding:.4rem .8rem .4rem 0;margin-bottom:1.2rem}
#ueber .h2{--fs:12rem;color:var(--kreide)}
.ueber-text .lead{margin-top:3.2rem;color:var(--kreide)}
.zitat{margin-top:3.2rem;padding-left:2.4rem;border-left:.8rem solid var(--signal);max-width:30em}
.zitat p{font-size:2.8rem;line-height:1.25;font-weight:700;font-stretch:112%;color:var(--papier)}
.ueber-text .link-pfeil{margin-top:3.2rem}
@media (min-width:900px){
  .ueber-raster{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center}
  .ueber-text{margin-top:0;padding-left:4.8rem}
  .ueber-text .eyebrow,#ueber .h2{margin-left:-18.8rem}
  .ueber-text .eyebrow{padding-left:.8rem}
}

/* ============================================================ 6b SICHERHEIT */
/* Die drei Zusagen ohne Nummer; die Marke davor ist der Pixel der Wortmarke (Signal markiert, was zugesagt ist) */
.sicher-raster{display:grid;grid-template-columns:minmax(0,1fr);gap:5.6rem}
.sicher-kopf{container-type:inline-size}
#sicherheit .h2{--fs:12rem}
.sicher{display:grid;gap:4rem;align-content:start}
.sicher li{position:relative;container-type:inline-size;padding-left:4rem}
.sicher li::before{content:"";position:absolute;left:0;top:.6rem;width:1.8rem;height:1.8rem;background:var(--signal)}
.sicher h3{font-size:min(4.4rem,calc(100cqi / 13.3));line-height:.95;margin-bottom:1.2rem}
.sicher p{color:var(--text-2);max-width:40ch}
@media (min-width:1000px){.sicher-raster{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:8rem;align-items:end}}

/* ============================================================ 6c KONTAKT */
.kontakt-raster{display:grid;grid-template-columns:minmax(0,1fr);gap:5.6rem}
.kontakt-kopf{container-type:inline-size}
#kontakt .h2{--fs:9.6rem;max-width:12em}
#kontakt .lead{margin-top:2.4rem;color:var(--kreide)}
.anfrage{display:grid;gap:2rem;padding:3.2rem;box-shadow:0 0 0 var(--fuge-b) var(--teer),1.6rem 1.6rem 0 var(--fuge-b) var(--signal-text)}
.anfrage-kopf{color:var(--muted)}
.feld-paar{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem}
.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 .knopf{justify-self:start}
.anfrage-recht{font-size:1.4rem;color:var(--muted)}
.anfrage-recht a{color:var(--teer)}
.direkt h3{font-size:3.6rem;line-height:1;margin-bottom:1.6rem;color:var(--papier)}
.direkt p{color:var(--kreide);max-width:40ch}
.knoepfe-stapel{margin-top:2.4rem;display:grid;gap:1.2rem;justify-items:stretch;max-width:32rem}
.direkt-mail{margin-top:2.4rem}
.direkt-mail a{color:var(--kreide);font-weight:700}
@media (min-width:640px){.feld-paar{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){
  .kontakt-raster{grid-template-columns:minmax(0,7fr) minmax(0,4fr);column-gap:8rem}
  .kontakt-kopf{grid-column:1 / -1}
}

/* ============================================================ 6d FAQ */
.faq-raster{display:grid;grid-template-columns:minmax(0,1fr);gap:4.8rem}
.faq-kopf{container-type:inline-size}
#faq .h2{--fs:8.8rem}
.faq-liste details{border-top:2px solid var(--teer)}
.faq-liste details:last-child{border-bottom:2px solid var(--teer)}
.faq-liste summary{position:relative;list-style:none;cursor:pointer;padding:2.2rem 6rem 2.2rem 0;font-size:2rem;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:1.2rem;top:50%;width:2rem;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.4rem;max-width:64ch;color:var(--teer)}
@media (min-width:1000px){.faq-raster{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:8rem}}

/* ============================================================ 7 FUSS: die Wortmarke baut sich voreinander auf */
.fuss{z-index:2;padding-block:8rem 4rem}
.fuss-wm{display:block;width:100%;height:auto;color:var(--papier);--wm-punkt:var(--signal)}
.fuss-raster{margin-top:6.4rem;display:grid;grid-template-columns:minmax(0,1fr);gap:3.2rem}
.fuss-zeile{font-size:2rem;line-height:1.4;max-width:30ch;color:var(--kreide)}
.fuss-nav{display:flex;gap:4.8rem}
.fuss-nav ul{display:grid;gap:.8rem;align-content:start}
.fuss-nav a,.fuss-kontakt a{text-decoration:none;color:var(--kreide)}
.fuss-nav a:hover,.fuss-kontakt a:hover{text-decoration:underline}
.fuss-kontakt{font-style:normal;color:var(--muted-d);line-height:1.8}
.fuss-copy{margin-top:6.4rem;color:var(--muted-d)}
@media (min-width:900px){.fuss-raster{grid-template-columns:minmax(0,1.3fr) auto auto;gap:8rem}}

/* ============================================================ Mobil-Feinschliff */
@media (max-width:599px){
  .abschnitt:not(.hero){padding-block:calc(var(--kopf-h) + 4.8rem) 7.2rem}
  .tafel{padding-block:calc(var(--kopf-h) + 4rem) 5.6rem}
  .lead{font-size:1.8rem}
  .zettel{max-width:none;box-shadow:0 0 0 var(--fuge-b) var(--teer),1rem 1rem 0 var(--fuge-b) var(--signal)}
  .anfrage{padding:2.4rem 2rem;box-shadow:0 0 0 var(--fuge-b) var(--teer),1rem 1rem 0 var(--fuge-b) var(--signal-text)}
  .paket{padding:2.4rem 2rem 2.8rem}
  .bogen{padding:2.4rem 2rem}
  .bogen-zahlen b{font-size:5.6rem}
  .zitat p{font-size:2.2rem}
}