/* ============================================================================
   Web11Group — Bauakte
   Die Sprache steht in DESIGN.md. Diese Datei setzt sie um, nichts weiter.
   Nichts hier restyled ein [data-sc-*]-Selektor oder .sc-stage: das ist
   Mechanik, nicht Gestaltung.
   ========================================================================== */

/* ------------------------------------------------------------- schriften -- */
/* Figtree statt Archivo: auf hellem Grund braucht die Seite eine offene,
   humanistische Grotesk. Archivos enge, technische Formen kamen aus dem
   Dunkeln, wo Buchstaben optisch zulaufen. Auf Weiß wirken sie hart.
   Beide Schriften liegen lokal, es geht nichts an fremde Server. */
@font-face {
  font-family: "Figtree";
  src: url("assets/fonts/figtree-var-latin.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("assets/fonts/jetbrainsmono-var-latin.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* Die sechs Rollen, die scrollcraft.css erwartet, aus unserer Palette. */
  --sc-canvas:     #FFFFFF;
  --sc-surface:    #F5F5F7;
  --sc-ink:        #1D1D1F;
  --sc-ink-soft:   #515154;
  --sc-accent:     #0B62D6;
  --sc-accent-ink: #FFFFFF;

  --sc-font-display: "Figtree", system-ui, -apple-system, sans-serif;
  --sc-font-text:    "Figtree", system-ui, -apple-system, sans-serif;
  --sc-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Unsere eigenen. Vier Grautöne, und jeder hat einen gemessenen Zweck. */
  --w-paper:       #F4F4F7;   /* der zweite Grund. Rund 3,6 L* unter Weiß: der Abstand,
                                 ab dem ein Flächenwechsel als Trennung gelesen wird. */
  --w-surface-2:   #FFFFFF;   /* Karten und Felder: heller als ihr Grund, nicht dunkler */
  --w-line:        #E8E8ED;   /* Haarlinie */
  --w-line-strong: #D2D2D7;   /* tragende Kante */
  --w-control:     #949499;   /* Rand von Bedienelementen, 3,0:1 gegen Weiß */
  --w-ink-mute:    #6E6E73;   /* Labels und Maße, 4,9:1 */
  --w-ink-faint:   #86868B;   /* nur ab 24px: Riesenwörter, Umrisse, 3,5:1 */
  --w-warn:        #B3300C;   /* Fehler. Der einzige zweite Farbwert der Seite */

  --t-hero:    clamp(2.7rem, 7.4vw, 7.2rem);
  --t-display: clamp(2.4rem, 5.6vw, 5rem);
  --t-title:   clamp(1.6rem, 2.8vw, 2.5rem);
  --t-lede:    clamp(1.15rem, 1.5vw, 1.4rem);
  --t-body:    1.0625rem;
  --t-small:   0.9375rem;
  --t-label:   0.75rem;
  --t-micro:   0.6875rem;

  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px; --s-11: 192px;

  --sc-maxw:   1360px;
  --sc-gutter: 32px;

  /* Zwei Radien, und die Trennung ist eine Regel, keine Laune: alles, was
     man anfasst, ist rund; alles, was etwas hält, hat eine Kante mit 18px. */
  --sc-r-sm: 12px; --sc-r-md: 18px; --sc-r-lg: 18px; --sc-r-pill: 999px;

  /* Tiefe auf hellem Grund. Gestapelte weiche Schatten mit kleinem Versatz,
     nie ein einzelner harter Abwurf. Ohne Schatten sieht eine helle Seite
     flach aus, mit einem zu starken sieht sie nach Baukasten aus. */
  --w-e1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px -2px rgba(0, 0, 0, 0.05);
  --w-e2: 0 2px 4px rgba(0, 0, 0, 0.04), 0 12px 28px -8px rgba(0, 0, 0, 0.09);
  --w-e3: 0 4px 8px rgba(0, 0, 0, 0.03), 0 24px 56px -14px rgba(0, 0, 0, 0.13);

  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Die Achse liegt auf der zweiten Rasterspalte. Ein Wert, überall gelesen. */
  --block-h: 64px;

  /* Das Punktraster. Abstand und Randblende als Token, damit Telefon und
     reduzierte Bewegung sie einzeln nachziehen koennen. */
  --dot-gap:  32px;
  --dot-fade: clamp(72px, 9vh, 140px);
}

@media (max-width: 1080px) { :root { --sc-gutter: 24px; --block-h: 60px; } }
@media (max-width: 700px)  { :root { --sc-gutter: 18px; --block-h: 56px; } }


/* ----------------------------------------------------------------- basis -- */
body {
  font-family: var(--sc-font-text);
  font-size: var(--t-body);
  background: var(--sc-canvas);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; top: -100px; left: var(--s-4); z-index: 200;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  padding: var(--s-3) var(--s-5); border-radius: var(--sc-r-sm);
  font-size: var(--t-small); font-weight: 500; text-decoration: none;
  transition: top 180ms var(--ease);
}
.skip:focus { top: var(--s-4); }

::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: var(--sc-r-sm); }

.mono {
  font-family: var(--sc-font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
.dim { color: var(--w-ink-mute); }

/* ------------------------------------------------------- feste hintergründe -- */
/* Das sichtbare Raster. Sechs Spalten, sehr leise. Struktur, kein Schmuck. */
/* Kein Gitter mehr. Was die Blätter trennt, ist der Wechsel der Fläche:
   Weiß, dann Papier, dann wieder Weiß. Eine Linie dazwischen wäre eine
   zweite Auskunft über dieselbe Grenze. */

/* Das Bauwerk. Eine Ebene, die die ganze Seite trägt. */
.build {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0;
  transition: opacity 700ms var(--ease);
}
.build canvas { width: 100%; height: 100%; display: block; }


/* ---------------------------------------------------------------- blätter -- */
.sheet { position: relative; z-index: 3; }

/* Der Flächenwechsel IST der Trenner. Jedes zweite Blatt liegt auf Papier
   statt auf Weiß, und dazwischen steht keine Linie. */
.sheet--01, .sheet--03, .sheet--05 { background: var(--w-paper); }
.sheet--02 { background: var(--sc-canvas); }

/* ------------------------------------------------------------ punktraster --
   Das Raster liegt IN den Abschnitten, nicht auf einer eigenen festen Ebene.
   Grund: .sheet--01/03/05 tragen eine deckende Papierfläche und .sheet--02
   ein deckendes Weiß, beide bei z-index 3. Eine feste Ebene darunter wäre
   auf vier von sieben Abschnitten unsichtbar.

   Es scrollt mit dem Abschnitt, während das Bauwerk auf Blatt 02 vier
   Bildschirmhöhen lang stehen bleibt. Diese Parallaxe zwischen Grund und
   Modell ist der eigentliche Gewinn dieser Bauform, und sie kostet keine
   Zeile JavaScript. */
.sheet::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px,
                    var(--w-line) 1px, transparent 1.6px);
  background-size: var(--dot-gap) var(--dot-gap);
  /* Zwei Blenden, geschnitten: quer bis zum Fensterrand, längs bis zur Naht.
     Längs in absoluten Längen, damit ein 1080px hoher und ein 5220px hoher
     Abschnitt gleich aussehen. */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 18%, #000 82%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--dot-fade),
                    #000 calc(100% - var(--dot-fade)), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,  transparent 0, #000 18%, #000 82%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--dot-fade),
                    #000 calc(100% - var(--dot-fade)), transparent 100%);
  mask-composite: intersect;
}
.wrap {
  width: 100%; max-width: var(--sc-maxw); margin-inline: auto;
  padding-inline: var(--sc-gutter);
}
.stage {
  padding-inline: var(--sc-gutter);
  padding-top: var(--block-h);
}


/* Der Blattkopf als Schriftfeld: links die Blattkennung, rechts die
   Projektangaben. Kein Kleinlabel ueber der Schlagzeile. */
.sheet__head {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-5); margin-bottom: var(--s-8);
}
.specs { display: flex; gap: var(--s-7); margin: 0; flex-wrap: wrap; justify-content: center; }
.specs > div { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.specs dt {
  font-family: var(--sc-font-mono); font-size: var(--t-micro);
  letter-spacing: 0.12em; color: var(--w-ink-mute);
}
.specs dd { margin: 0; font-size: var(--t-small); color: var(--sc-ink); }

/* ═══════════════════════════════════ HERO ═══════════════ */
.stage--hero {
  display: flex; flex-direction: column; justify-content: center;
  align-items: center; text-align: center;
  padding-block: calc(var(--block-h) + max(var(--s-8), 8vh)) var(--s-9);
}
.hero { max-width: 78rem; }
.hero__h {
  margin: 0;
  font-family: var(--sc-font-display);
  font-size: var(--t-hero); font-weight: 600;
  line-height: 0.92; letter-spacing: -0.035em;
  /* balance gleicht die Zeilenlängen aus. Ohne das bricht die Zeile nach
     "die" statt nach "Plattformen," — 25 Zeichen gegen 8. */
  text-wrap: balance;
  max-width: 24ch;
}
.hero__lede {
  margin: var(--s-6) 0 0;
  font-size: var(--t-lede); line-height: 1.5; letter-spacing: -0.012em;
  color: var(--sc-ink-soft); max-width: 44ch; text-wrap: pretty;
}
.hero__do { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin: var(--s-7) 0 0; }
.hero__foot-sep { width: 1px; height: 11px; background: var(--w-line-strong); }
.claim-line {
  font-family: var(--sc-font-mono); font-size: var(--t-label);
  letter-spacing: 0.02em; color: var(--w-ink-mute);
}
.hero__foot {
  position: absolute; inset-inline: var(--sc-gutter); bottom: var(--s-7);
  display: flex; gap: var(--s-5); flex-wrap: wrap; justify-content: center;
  margin: 0; padding-top: var(--s-4);
}

/* ═══════════════════════════════════ DIE GRUPPE ════════════════ */
.sheet--01 { padding-block: calc(var(--block-h) + clamp(56px, 6vw, 96px)) clamp(80px, 9vw, 144px); }
.claims { list-style: none; margin: 0; padding: 0; }
.claims { max-width: 62rem; margin-inline: auto; }
.claims li {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  padding: clamp(14px, 1.8vw, 22px) 0;
}
.claims__n {
  font-family: var(--sc-font-mono); font-size: var(--t-micro);
  letter-spacing: 0.14em; color: var(--w-ink-mute);
}
.claims__t {
  font-family: var(--sc-font-display);
  font-size: clamp(1.25rem, 1.9vw, 1.75rem); font-weight: 600;
  line-height: 1.12; letter-spacing: -0.025em;
  text-wrap: balance;
}
.claims__line {
  margin: var(--s-8) auto 0; text-align: center; max-width: 30ch;
  font-family: var(--sc-font-display);
  font-size: clamp(1.15rem, 1.6vw, 1.5rem); font-weight: 500;
  letter-spacing: -0.02em; line-height: 1.38;
  color: var(--sc-ink);
}
@media (max-width: 860px) {
    .claims__line { text-align: left; }
}

/* ═══════════════════════════════════ DIE PLATTFORM ════════════ */
/* Zwei Tiefen. .stage--back liegt UNTER dem Bauwerk (z-index 1),
   .stage--front DARÜBER (z-index 4). Das Bauwerk selbst hat z-index 2. */
.sheet--02 { z-index: auto; }
.stage--back {
  position: sticky; top: 0; z-index: 1;
  height: 100vh; height: 100svh; overflow: clip;
}
.stage--front {
  position: sticky; top: 0; z-index: 4; text-align: center;
  height: 100vh; height: 100svh; margin-top: -100vh; margin-top: -100svh;
  overflow: clip; pointer-events: none;
  /* flex-end statt space-between, und der Abstand hängt am Inhalt selbst:
     space-between verteilte den Raum zwischen genau zwei Fluss-Elementen.
     Nimmt man eines davon weg, springt das andere an den oberen Rand. */
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: max(var(--s-8), 9vh) calc(var(--s-8) + var(--block-h));
}
.stage--front a, .stage--front button { pointer-events: auto; }

/* Die Phasenwörter. Riesig, hinter dem Bauwerk. */
/* Das Phasenwort liegt HINTER dem Bauwerk. Es muss trotzdem lesbar sein:
   ein Wort bei 16 % Deckkraft ist kein Tiefeneffekt, sondern Geisterschrift.
   Also eine echte, gemessene Farbe (4,4:1 gegen den Grund) und die Tiefe
   entsteht dadurch, dass das Bauwerk davor es teilweise verdeckt. */
.phase {
  position: absolute; inset-inline: 0; top: 47%;
  transform: translateY(-50%);
  margin: 0; text-align: center;
  font-family: var(--sc-font-display);
  font-size: clamp(3.6rem, 14vw, 14rem);
  font-weight: 600; line-height: 0.86; letter-spacing: -0.045em;
  color: var(--w-ink-faint);
}
.phase span { display: inline-block; }

/* Dichte genau dort, wo die Notizen sitzen. Kein ganzflaechiger Schleier:
   der wuerde das Bauwerk ueberall flachdruecken, um unten links Kontrast zu
   gewinnen. */
.band {
  position: absolute; inset: auto 0 0 0; height: 46%;
  pointer-events: none; z-index: -1;
  background: linear-gradient(to top,
    var(--sc-canvas) 0%,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 46%,
    color-mix(in oklab, var(--sc-canvas) 52%, transparent) 76%,
    transparent 100%);
}
.notes { list-style: none; margin: auto 0 var(--s-6); padding: 0; position: relative; height: 7.5em; }
.notes li {
  position: absolute; inset-inline: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
  text-align: center;
}
.notes b {
  font-family: var(--sc-font-mono); font-size: var(--t-label);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--w-ink-mute); font-weight: 500;
}
.notes span {
  max-width: 52ch; color: var(--sc-ink); font-size: clamp(1.15rem, 1.7vw, 1.6rem);
  line-height: 1.4; letter-spacing: -0.018em; text-wrap: pretty;
}

/* Der Kasten sitzt in einer Zeile ueber die volle Breite und zentriert sich
   darin. Nicht per transform: das Element traegt eine data-sc-cue, und die
   Engine schreibt dort jeden Frame ihr eigenes transform hinein. */
.datum {
  position: absolute; inset-inline: 0; bottom: var(--s-7);
  display: flex; justify-content: center; margin: 0;
}
.datum__box {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--w-line); border-radius: var(--sc-r-pill);
  background: var(--sc-canvas);
}
/* Der Kasten liegt über dem Bauwerk. Ein halbdurchsichtiger Grund lässt die
   Linien durchscheinen und drückt den Kontrast unter die Schwelle; er deckt
   deshalb ganz und trägt stattdessen eine Kante. */
.datum, .datum .dim { color: var(--sc-ink-soft); }
/* Die Ebene des Bauwerks stand bisher in der Kopfleiste. Sie gehört dorthin,
   wo die Zahl etwas bedeutet: über das Modell selbst. Auf allen anderen
   Abschnitten läuft es bei 6 bis 16 Prozent Deckkraft, dort war die Anzeige
   ohnehin nur Rauschen. */
.datum__sep { width: 1px; height: 11px; background: var(--w-line-strong); }
.datum b { font-size: var(--t-label); letter-spacing: 0.1em; color: var(--sc-ink); }

/* ═══════════════════════════════════ LEISTUNGEN ══════════════ */
.stage--rail { display: flex; align-items: center; padding-inline: 0; }
.rail {
  display: flex; align-items: stretch; gap: clamp(24px, 3vw, 56px);
  padding-inline: var(--sc-gutter);
}
.rail__head {
  flex: 0 0 clamp(22rem, 36vw, 34rem); align-self: center; text-align: center;
}
.title {
  margin: 0;
  font-family: var(--sc-font-display);
  font-size: var(--t-display); font-weight: 600;
  line-height: 0.98; letter-spacing: -0.03em;
  text-wrap: balance;
}
.title--wide { max-width: 20ch; }
.title--hero { font-size: var(--t-display); max-width: 24ch; text-wrap: balance; }
@media (max-width: 700px) {
  /* Auf dem Telefon bricht diese Zeile ohnehin mehrfach. Dann soll sie
     wenigstens eine Stufe leiser sein, statt vier Zeilen in Herogroesse. */
  .title--hero { font-size: clamp(1.75rem, 7.6vw, 2.4rem); max-width: 18ch; }
}
.lede--wide { max-width: 58ch; margin-top: var(--s-6); }
.lede {
  margin: var(--s-5) 0 0;
  font-size: var(--t-lede); line-height: 1.5; letter-spacing: -0.012em;
  color: var(--sc-ink-soft); max-width: 46ch; text-wrap: pretty;
}

/* Signature C: drei Spuren, drei Geschwindigkeiten, eine Ausrichtung
   genau in der Blattmitte. */
.way {
  flex: 0 0 clamp(19rem, 25vw, 24rem);
  align-self: center; text-align: left;
  display: flex; flex-direction: column;
  padding: var(--s-6);
  background: var(--sc-canvas);
  border: 1px solid var(--w-line);
  border-radius: var(--sc-r-md);
  will-change: transform;
}
.way[data-lane="a"] { transform: translate3d(calc((0.5 - var(--sc-p, 0)) * 150px), 0, 0); }
.way[data-lane="b"] { transform: none; }
.way[data-lane="c"] { transform: translate3d(calc((var(--sc-p, 0) - 0.5) * 150px), 0, 0); }
.way--lead { border-color: var(--sc-accent); }

.way__no {
  margin: 0 0 var(--s-6);
  font-family: var(--sc-font-mono); font-size: var(--t-label);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--w-ink-mute); font-weight: 500;
}
.way--lead .way__no { color: var(--sc-accent); }
.way--lead .way__list li::before { background: var(--sc-accent); }
.way__h {
  margin: 0;
  font-family: var(--sc-font-display);
  font-size: var(--t-title); font-weight: 600;
  line-height: 1.22; letter-spacing: -0.025em;
}
.way__price {
  display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap;
  margin: var(--s-4) 0 0; padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--w-line);
}
.way__price b {
  font-family: var(--sc-font-display); font-size: 1.75rem; font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.way__price span { font-size: var(--t-small); color: var(--w-ink-mute); }
.way__body {
  margin: var(--s-5) 0 0; font-size: var(--t-small);
  line-height: 1.6; color: var(--sc-ink-soft); text-wrap: pretty;
}
.way__list { list-style: none; margin: var(--s-5) 0 0; padding: 0; }
.way__list li {
  position: relative; padding: var(--s-3) 0 var(--s-3) var(--s-5);
  font-size: var(--t-small); color: var(--sc-ink);
  border-top: 1px solid var(--w-line);
}
.way__list li::before {
  content: ""; position: absolute; left: 0; top: 1.3em;
  width: 8px; height: 1px; background: var(--w-line-strong);
}
.way__cta {
  margin-top: auto; padding-top: var(--s-6);
  align-self: flex-start;
  display: inline-flex; align-items: flex-end; min-height: 44px;
  font-size: var(--t-small); font-weight: 500; color: var(--sc-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--w-line-strong);
  padding-bottom: 2px;
  transition: color 140ms var(--ease), border-color 140ms var(--ease);
}
.way__cta:hover { color: var(--sc-accent); border-color: var(--sc-accent); }

.rail__tail {
  flex: 0 0 clamp(18rem, 24vw, 23rem); align-self: center; text-align: center;
}
.rail__note {
  margin: var(--s-5) 0 var(--s-6);
  font-size: var(--t-small); line-height: 1.6; color: var(--sc-ink-soft);
}

/* ═══════════════════════════════════ VORGEHEN ══════════════ */
.stage--proc { display: flex; align-items: center; }
.proc {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--s-8); align-items: center; text-align: center;
  width: 100%; max-width: var(--sc-maxw); margin-inline: auto;
  padding-bottom: var(--block-h);
}
.proc__side { position: relative; text-align: center; }
.proc__bar {
  margin: var(--s-6) auto 0; max-width: 20rem; height: 1px; background: var(--w-line);
  position: relative; overflow: hidden;
}
.proc__bar i {
  position: absolute; inset: 0 auto 0 0; display: block;
  width: 100%; background: var(--sc-accent);
  transform-origin: 0 50%;
  transform: scaleX(var(--sc-p, 0));
}
.proc__list { list-style: none; margin: 0; padding: 0; }
/* Alle vier Phasen stehen. Was wandert, ist die Markierung links. Ein Blatt,
   das "vier Phasen" verspricht und drei davon auf Deckkraft 0 hält, hat drei
   Phasen weggeworfen und behauptet weiter vier. */
.proc__list { max-width: 60rem; margin-inline: auto; text-align: left; }
.proc__list li {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-2) var(--s-5);
  align-items: baseline;
  padding: clamp(14px, 1.8vw, 22px) 0 clamp(14px, 1.8vw, 22px) var(--s-6);
  border-top: 1px solid var(--w-line);
}
.proc__list li:last-child { border-bottom: 1px solid var(--w-line); }
.proc__on {
  position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px;
  background: var(--sc-accent);
}
.proc__n {
  grid-row: 1 / span 2;
  font-family: var(--sc-font-display); font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  font-weight: 600; line-height: 0.9; letter-spacing: -0.03em;
  color: transparent; -webkit-text-stroke: 1px var(--w-ink-faint);
  font-variant-numeric: tabular-nums;
}
.proc__list b {
  font-family: var(--sc-font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 600; letter-spacing: -0.03em; line-height: 1.15;
}
.proc__t {
  grid-column: 2; font-size: var(--t-small); line-height: 1.55;
  color: var(--sc-ink-soft); max-width: 54ch; text-wrap: pretty;
}

/* ═══════════════════════════════════ REFERENZEN ════════════════ */
.sheet--05 { padding-block: calc(var(--block-h) + clamp(56px, 6vw, 96px)) clamp(80px, 9vw, 144px); }
.figures {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: var(--s-9) auto 0; padding: 0; max-width: 68rem;
}
.figures--wide { max-width: 74rem; }
.figures__i { padding: var(--s-5) var(--s-4); }
.figures dt {
  display: flex; align-items: baseline; justify-content: center; gap: 2px;
  font-family: var(--sc-font-display);
  font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 600;
  line-height: 1; letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.figures dt i { font-style: normal; font-size: 0.5em; color: var(--sc-accent); }
.figures dd {
  margin: var(--s-3) 0 0; text-align: center;
  font-family: var(--sc-font-mono); font-size: var(--t-label);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--w-ink-mute);
}

.proof {
  margin: var(--s-9) auto 0; max-width: 68rem;
  padding-top: var(--s-7); border-top: 1px solid var(--w-line);
}
.proof__label { margin: 0; color: var(--w-ink-mute); }
/* Drei Launches nebeneinander. Kein Rand, kein Schatten, keine Karte: die
   Spalten stehen auf derselben Fläche wie alles andere auf diesem Blatt. */
.proof__list {
  list-style: none; margin: var(--s-7) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
}
.proof__name {
  margin: 0;
  font-family: var(--sc-font-display);
  /* Eine Stufe unter --t-title: drei Namen nebeneinander tragen nicht
     dieselbe Groesse wie ein einzelner in der Blattmitte. */
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.2;
}
/* Der Name führt auf die Plattform. Die Unterstreichung steht dauerhaft, nicht
   erst beim Überfahren: ein Link, den nur die Maus verrät, ist für alle anderen
   kein Link. Sie bleibt in der Linienfarbe, damit drei Akzentnamen nebeneinander
   den einen Akzentknopf dieses Blattes nicht überstimmen. Der Akzent kommt
   beim Hinzeigen. */
.proof__name a {
  /* Das Antippziel muss 44px hoch sein, der Name ist aber nur 25px. Die
     Hoehe kommt deshalb aus dem Innenabstand -- und die Unterstreichung aus
     text-decoration statt aus einem Rahmen, sonst rutschte sie mit dem
     Innenabstand zehn Pixel vom Wort weg. */
  display: inline-block; padding-block: 11px 12px;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--w-line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 140ms var(--ease), text-decoration-color 140ms var(--ease);
}
.proof__name a:hover { color: var(--sc-accent); text-decoration-color: var(--sc-accent); }
.proof__body {
  margin: var(--s-2) auto 0; max-width: 34ch;
  font-size: var(--t-small); line-height: 1.6; color: var(--sc-ink-soft);
}

/* ═══════════════════════════════════ KONTAKT ═══════════════ */
.stage--close {
  display: flex; flex-direction: column; justify-content: space-between;
  padding-bottom: var(--block-h);
}
.close {
  flex: 1 1 auto; display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center; text-align: center;
  gap: var(--s-8); align-items: center;
  width: 100%; max-width: var(--sc-maxw); margin-inline: auto;
  padding-block: max(var(--s-8), 8vh) var(--s-7);
}
.close__h {
  margin: 0;
  font-family: var(--sc-font-display);
  font-size: var(--t-display); font-weight: 600;
  line-height: 0.98; letter-spacing: -0.03em;
  max-width: 12ch; text-wrap: balance;
}
.close__say .lede { margin-top: var(--s-5); margin-inline: auto; }
.close__mail {
  display: flex; align-items: baseline; justify-content: center;
  gap: var(--s-4); margin: var(--s-6) 0 0;
}
.close__mail a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--sc-ink); text-decoration: none;
  border-bottom: 1px solid var(--w-line-strong); padding-bottom: 2px;
  transition: color 140ms var(--ease), border-color 140ms var(--ease);
}
.close__mail a:hover { color: var(--sc-accent); border-color: var(--sc-accent); }

/* formular */
/* Der Schluss traegt Ueberschrift, Absatz, Formular und Fusszeile in einer
   Bildschirmhoehe. Ohne diese engere Rhythmik lief die Fusszeile unter den
   Titelblock und das Logo wurde abgeschnitten. */
.form {
  width: 100%; max-width: 34rem; text-align: left;
  background: var(--sc-surface);
  border: 1px solid var(--w-line);
  border-radius: var(--sc-r-md);
  padding: var(--s-6);
}
.close__say .lede { margin-top: var(--s-4); }
.close__mail { margin-top: var(--s-6); }
.form .field { margin-bottom: var(--s-3); }
.form__head { margin-bottom: var(--s-5); padding-bottom: var(--s-3); }
.form__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  margin: 0 0 var(--s-6); padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--w-line);
}
.form__head b { font-size: var(--t-small); font-weight: 500; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.field { display: block; margin-bottom: var(--s-4); }
.field__l {
  display: block; margin-bottom: var(--s-2);
  font-family: var(--sc-font-mono); font-size: var(--t-micro);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--w-ink-mute);
}
.field__i {
  display: block; width: 100%; height: 48px; min-height: 44px;
  padding: 0 var(--s-4);
  background: var(--w-surface-2);
  border: 1px solid var(--w-control);
  border-radius: var(--sc-r-sm);
  color: var(--sc-ink); font-size: var(--t-small);
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.field__i--area { height: auto; padding: var(--s-3) var(--s-4); resize: vertical; line-height: 1.55; }
.field__i::placeholder { color: var(--w-ink-mute); }
.field__i:focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 2px;
  border-color: var(--sc-accent);
}
/* Der Fehlerzustand darf nicht aussehen wie der Fokus, und er darf nicht nur
   Farbe sein: ein Zeichen im Label sagt es auch ohne Farbwahrnehmung. */
.field__i[aria-invalid="true"] {
  border-color: var(--w-warn);
  outline: 1px solid var(--w-warn);
  outline-offset: -3px;
}
.field:has([aria-invalid="true"]) .field__l::after {
  content: " / bitte pruefen"; color: var(--w-warn); letter-spacing: 0.04em;
}
select.field__i { appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--sc-ink-soft) 50%),
                    linear-gradient(135deg, var(--sc-ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.hp { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
      clip-path: inset(50%); white-space: nowrap; }
.form__note {
  margin: var(--s-5) 0 var(--s-4); font-size: var(--t-small);
  line-height: 1.6; color: var(--w-ink-mute); max-width: 46ch;
}
.form__note a { color: var(--sc-ink-soft); text-underline-offset: 0.2em; }
.form__msg { margin: var(--s-4) 0 0; font-size: var(--t-small); color: var(--sc-ink-soft); min-height: 1.5em; }
.form__msg[data-state="ok"] { color: var(--sc-accent); }
.form__msg[data-state="error"] { color: var(--w-warn); }
.form.is-sent { border-color: var(--sc-accent); }
.form.is-sent .form__head { border-bottom-color: var(--sc-accent); }
.form.is-sent .form__head b { color: var(--sc-accent); }

/* fusszeile, innerhalb der schluss-bühne */
.foot { flex: 0 0 auto; border-top: 1px solid var(--w-line); }
.foot__in {
  display: flex; align-items: center; gap: var(--s-5) var(--s-7); flex-wrap: wrap;
  width: 100%; max-width: var(--sc-maxw); margin-inline: auto;
  padding-block: var(--s-4);
}
.foot__brand { display: flex; align-items: center; gap: var(--s-4); margin: 0; }
.foot__brand img { width: 108px; height: auto; opacity: 0.9; }
.foot__tag { font-size: var(--t-small); color: var(--sc-ink-soft); }
.foot__nav { display: flex; gap: var(--s-2) var(--s-5); flex-wrap: wrap; margin-block: calc(var(--s-2) * -1); }
.foot__nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--t-small); color: var(--sc-ink-soft); text-decoration: none;
  transition: color 140ms var(--ease);
}
.foot__nav a:hover { color: var(--sc-ink); }
.foot__nav--fine a { color: var(--w-ink-mute); }
.foot__c {
  margin: 0 0 0 auto; text-align: right; line-height: 1.8;
  font-family: var(--sc-font-mono); font-size: var(--t-micro);
  letter-spacing: 0.02em; color: var(--w-ink-mute);
}
/* Die Unterstreichung steht dauerhaft: in diesem Kleingedruckten wuerde ein
   Link, den nur die Maus verraet, ueberhaupt nicht als Link gelesen. */
.foot__c a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--w-line-strong);
  text-underline-offset: 3px;
  transition: color 140ms var(--ease), text-decoration-color 140ms var(--ease);
}
.foot__c a:hover { color: var(--sc-accent); text-decoration-color: var(--sc-accent); }

/* ---------------------------------------------------------------- knöpfe -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 var(--s-6);
  border-radius: var(--sc-r-pill); border: 1px solid transparent;
  font-size: var(--t-small); font-weight: 500; letter-spacing: -0.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 140ms var(--ease), border-color 140ms var(--ease),
              color 140ms var(--ease), transform 100ms var(--ease),
              box-shadow 140ms var(--ease);
}
.btn--primary {
  background: var(--sc-accent); color: var(--sc-accent-ink);
}
.btn--primary:hover { background: #0A56BE; }
/* Druckgefühl statt Schatten: der Knopf sinkt ein, er schwebt nicht. */
.btn:active { transform: scale(0.97); }
.btn--ghost { border-color: var(--w-line-strong); color: var(--sc-ink); background: var(--sc-canvas); }
.btn--ghost:hover { border-color: var(--w-control); background: var(--w-paper); }

.btn--sm { height: 44px; padding: 0 var(--s-4); font-size: var(--t-label); letter-spacing: 0.04em; }
.btn--full { width: 100%; margin-top: var(--s-2); }

/* ------------------------------------------------------------ titelblock -- */
/* Die Chrome dieser Grammatik. Kein Marketingbalken oben, ein Titelblock
   unten, wie auf einer technischen Zeichnung. */
/* Die Leiste sitzt oben. Milchglas über dem, was darunter durchläuft: das ist
   die einzige Erhebung, die diese Seite kennt, und sie kommt nicht aus einem
   Schatten, sondern daraus, dass der Grund durchscheint und dabei unscharf
   wird. */
.block {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: var(--block-h);
  background: color-mix(in oklab, var(--sc-canvas) 82%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--w-line);
}
/* Drei Spalten statt Flex: die Wortmarke ist 86px breit, der Knopf 131px.
   Im Flexlayout mit margin-inline:auto sitzt die Navigation dadurch 22px
   links der Mitte. Auf einer Seite, deren ganze Doktrin "alles steht mittig"
   heißt, ist das sichtbar. */
.block__in {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: var(--s-5); height: 100%;
  max-width: var(--sc-maxw); margin-inline: auto;
  padding-inline: var(--sc-gutter);
}
.block__end {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--s-3);
}
.block__mark {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 44px; min-width: 44px; padding-right: var(--s-2);
  text-decoration: none; color: var(--sc-ink);
  flex: 0 1 auto; overflow: hidden;
}
/* Die Wortmarke. Höhe fest, Breite folgt: beide Maße zu setzen würde das
   Logo verzerren, nur eines zu setzen ließe das andere auf dem HTML-Attribut
   stehen und das Bild viermal zu hoch werden. */
.block__logo { height: 40px; width: auto; }

.block__toggle {
  display: none; align-items: center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-3);
  flex: 0 0 auto;
  background: none; border: 0; cursor: pointer;
  font-size: var(--t-small); font-weight: 450; letter-spacing: -0.01em;
  color: var(--sc-ink-soft);
}
.block__toggle svg { flex: 0 0 auto; transition: transform 180ms var(--ease); }
.block__toggle-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.block__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.block__toggle[aria-expanded="true"] { color: var(--sc-accent); }

.block__nav { display: flex; align-items: center; gap: var(--s-2); }
/* Fließschrift, keine Versalien, keine Quadrate. Der aktive Punkt trägt
   Tinte und Gewicht, nicht den Akzent: der gehört dem einen Knopf. */
.block__nav a {
  display: flex; align-items: center;
  min-height: 44px; padding: var(--s-2) var(--s-3); border-radius: var(--sc-r-pill);
  text-decoration: none; white-space: nowrap;
  font-size: var(--t-small); font-weight: 450; letter-spacing: -0.01em;
  color: var(--sc-ink-soft);
  transition: color 140ms var(--ease), background-color 140ms var(--ease);
}
.block__nav a:hover { color: var(--sc-ink); background: var(--sc-surface); }
.block__nav a[aria-current="true"] { color: var(--sc-ink); font-weight: 500; }

.block__cta { flex: 0 0 auto; }

/* ------------------------------------------------------------ responsiv -- */

@media (max-width: 980px) {
  .close { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-content: center; }
  .close__h { max-width: 16ch; }
  .proc { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figures__i:nth-child(2) { border-right: 0; }
  .figures__i:nth-child(-n+2) { border-bottom: 1px solid var(--w-line); }
  .proof__list { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
}
@media (max-width: 860px) {
  .block__nav { gap: 0; }
  .notes li { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .notes { height: 10em; }
}
/* ------------------------------------------------ mobile neubau der bühnen --
   Passt zur Umschaltung in site.js. Ohne diese Regeln bliebe der Schluss eine
   100svh-Bühne mit clip und würde die Fußzeile abschneiden. */
/* Der Schluss fliesst auf jeder Breite. */
.sheet--06.is-flow { height: auto !important; }
.is-flow .stage--close {
  position: static; height: auto; overflow: visible;
  padding-block: calc(var(--block-h) + clamp(56px, 6vw, 96px)) 0;
}
.is-flow .close { padding-block: 0 var(--s-8); }
.is-flow .foot__in { padding-bottom: calc(var(--s-5) + var(--block-h)); }

@media (max-width: 860px) {
  /* Wo gestapelt wird, gibt es keine Spuren mehr, die sich versetzen
     koennten. Diese Regel stand frueher erst ab 700 px und liess die Seite
     dazwischen 51 px waagerecht ueberlaufen. */
  .way[data-lane] { transform: none !important; }
  /* Blatt 03 gestapelt. Die drei Wege stehen untereinander, jeder am Stück
     lesbar, mit der Nummer als Anschluss links. */
  .sheet--03.is-flow { height: auto !important; }
  .is-flow .stage--rail {
    position: static; height: auto; overflow: visible; display: block;
    padding-block: clamp(64px, 8vw, 112px);
  }
  .is-flow .rail {
    display: block; padding: 0 var(--sc-gutter); transform: none !important;
  }
  .is-flow .rail__head { margin-bottom: var(--s-8); }
  .is-flow .way {
    display: block; margin-bottom: var(--s-8);
    border-top-width: 1px; padding-top: var(--s-5);
  }
  .is-flow .way__cta { display: inline-block; margin-top: var(--s-5); padding-top: 0; }
  .is-flow .rail__tail { margin-top: var(--s-6); }
  /* Der Titelblock trägt auf dem Telefon den Blattnamen. Ohne ihn weiß dort
     niemand mehr, wo er ist, weil das Blattverzeichnis nicht hineinpasst. */
  .block__cta { margin-left: 0; }
}

@media (max-width: 700px) {
  /* 18 % Blende links und rechts lassen auf 390px nur 250px Raster übrig.
     Blende schmaler, Abstand enger: zwölf Punktspalten lesen sich als
     Zufall, achtzehn als Raster. */
  :root { --dot-gap: 24px; --dot-fade: 56px; }
  .sheet::before {
    -webkit-mask-image:
      linear-gradient(to right,  transparent 0, #000 7%, #000 93%, transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 var(--dot-fade),
                      #000 calc(100% - var(--dot-fade)), transparent 100%);
    mask-image:
      linear-gradient(to right,  transparent 0, #000 7%, #000 93%, transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 var(--dot-fade),
                      #000 calc(100% - var(--dot-fade)), transparent 100%);
  }

  /* Die Hero-Stufe fällt eine Sprosse tiefer, sonst bricht die Zeile sechsfach. */
  .hero__h { font-size: clamp(2.6rem, 12vw, 3.6rem); max-width: 14ch; }
  .hero { max-width: none; }
  .hero__foot { position: static; margin-top: var(--s-7); }
  .stage--hero { justify-content: center; padding-block: var(--s-9) calc(var(--s-7) + var(--block-h)); }
  .wrap, .stage { padding-left: var(--sc-gutter); }
  .rail { padding-left: var(--sc-gutter); }
  .btn { width: 100%; }
  .btn--sm, .block__cta { width: auto; flex: 0 0 auto; }
  .hero__do { flex-direction: column; align-items: stretch; }
  .form__row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .form { padding: var(--s-5); }
  .figures { grid-template-columns: minmax(0, 1fr); }
  .figures__i { border-right: 0; border-bottom: 1px solid var(--w-line); }
  .figures__i:last-child { border-bottom: 0; }
  .foot__in { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
  .foot__c { margin-left: 0; text-align: left; }
  .phase { font-size: clamp(3rem, 19vw, 6rem); }
  .notes span { font-size: var(--t-body); }
  /* Statt das Verzeichnis wegzulassen, klappt es über der Leiste auf. Der
     Knopf rechts bleibt dabei immer erreichbar: er ist der einzige Weg zum
     Ziel und darf nie hinter einem Menü verschwinden. */
  .block__toggle { display: inline-flex; }
  /* Auf einem Telefon ist die Spurversetzung Unruhe, nicht Tiefe. */
  .way[data-lane] { transform: none; }
  .way { flex-basis: min(78vw, 20rem); }
  /* Der Titelblock war breiter als der Schirm, der Knopf rechts angeschnitten. */
  .block__in { gap: var(--s-3); }
  .block__logo { height: 30px; }
  .block__cta { margin-left: 0; }
}

@media (max-width: 440px) {
  /* Ganz schmal bleibt nur, was der Leser wirklich braucht: das Zeichen,
     wo er ist, und der eine Knopf. */
}

/* ------------------------------------------------ kopfleiste auf schmal --
   Fünf Menüpunkte in Fließschrift messen zusammen rund 470 px; mit
   Wortmarke, Knopf und Rändern passt die Leiste bis etwa 800 px in eine
   Zeile. Darunter klappt das Menü unter der Leiste auf, statt zu
   verschwinden. 860 px ist derselbe Umschaltpunkt, den site.js für den
   mobilen Neubau benutzt: einer für die ganze Seite statt zwei. */
@media (max-width: 860px) {
  .block__toggle { display: inline-flex; }
  .block__in { grid-template-columns: auto 1fr; }
  .block__end { grid-column: 2; }
  .block__nav {
    position: absolute; inset: 100% 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: var(--s-2) var(--sc-gutter) var(--s-4);
    background: var(--sc-canvas);
    border-bottom: 1px solid var(--w-line);
    box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.12);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 180ms var(--ease), transform 180ms var(--ease),
                visibility 0s linear 180ms;
  }
  .is-nav-open .block__nav {
    opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
  }
  .block__nav a {
    justify-content: flex-start; gap: var(--s-4); min-width: 0;
    padding: var(--s-3) 0; border-bottom: 1px solid var(--w-line);
    /* Keine Pille hier. Der Radius stammt aus der Desktop-Leiste, wo er eine
       kleine Hover-Fläche rundet. Auf einer vollbreiten Zeile mit Unterlinie
       biegt er dieselbe Linie an beiden Enden über zweiundzwanzig Pixel nach
       oben, und das sieht aus wie ein Zeichenfehler. */
    border-radius: 0;
    /* Zwölf Pixel war die Größe, als die Punkte Monospace-Versalien waren.
       In Fließschrift ist das für ein Hauptmenü auf dem Telefon zu klein und
       kleiner als dieselben fünf Punkte auf dem Desktop. */
    font-size: var(--t-body);
  }
  .block__nav a:last-child { border-bottom: 0; }
  .block__nav a span { display: inline; }
  .block__cta { margin-left: 0; }
}

/* -------------------------------------------------------- reduzierte bewegung --
   Weniger und sanfter, nicht null. Jedes Blatt wird ein gewöhnlicher
   Abschnitt, jeder Inhalt steht gleichzeitig da. Nichts ist bloß stillgelegt
   und dadurch unerreichbar: das ist der Fehler, den eine stillgestellte
   Seitwärtsfahrt sonst macht, und er sieht wie korrektes Verhalten aus. */
@media (prefers-reduced-motion: reduce) {
  .way[data-lane] { transform: none !important; }
  .build { transition: none; }

  /* keine Bühne klebt mehr. relative statt static, weil das Punktraster ein
     positioniertes ::before ist: eine statische Bühne läge darunter und die
     Punkte stünden mitten in der Schrift. Ohne top/left ist relative optisch
     dasselbe wie static und klebt genauso wenig. */
  .is-still .sheet { height: auto !important; }
  .is-still .stage {
    position: relative !important; z-index: 1; height: auto !important; min-height: 0;
    overflow: visible; margin-top: 0;
    padding-block: clamp(72px, 8vw, 128px);
  }
  .is-still [data-sc-cue] { opacity: 1 !important; transform: none !important; }
  /* Die Abschnitte sind hier deutlich kürzer; eine 140px-Blende frisst sonst
     zu viel vom Raster. */
  .is-still { --dot-fade: 56px; }

  /* Blatt 00: der Hero bleibt ein voller Bildschirm, aber ohne Klebestrecke. */
  .is-still .stage--hero { min-height: 82svh; justify-content: center; }
  .is-still .hero__foot { position: static; margin-top: var(--s-8); }

  /* Blatt 02: die Phasenwörter werden Zwischentitel statt Hintergrundriesen. */
  /* Nur die Riesenwoerter gehen, nicht ihr Container: darin steht die
     einzige Ueberschrift dieses Blattes. */
  .is-still .stage--back { position: static; height: auto; overflow: visible; }
  .is-still .phase { display: none; }
  .is-still .band { display: none; }
  .notes { height: auto; }
  .notes li { position: static; margin-bottom: var(--s-6); }
  .notes li { grid-template-columns: minmax(0, 12ch) minmax(0, 58ch); }

  /* Blatt 03: aus der Fahrt wird ein Raster. Eine stillgestellte Fahrt zeigt
     sonst nur die ersten zwei von drei Leistungen. */
  .is-still .stage--rail { display: block; }
  .is-still .rail {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-7); transform: none !important;
    padding-bottom: 0;
  }
  .is-still .rail__head, .is-still .rail__tail { grid-column: 1 / -1; }
  .is-still .rail__tail { display: flex; align-items: baseline; gap: var(--s-6); flex-wrap: wrap; }
  .is-still .rail__note { margin: 0; flex: 1 1 24rem; }
  .is-still .way { flex: none; }

  /* Blatt 04 und 06: normale Abschnitte. */
  .is-still .proc, .is-still .close { padding-bottom: 0; }
  .is-still .foot__in { padding-bottom: calc(var(--s-6) + var(--block-h)); }
}
@media (prefers-reduced-motion: reduce) and (max-width: 980px) {
  .is-still .rail { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------------- mittig --
   Jede Aussage steht zentriert über einer ruhigen Fläche. Das trägt nur,
   solange die Zeilen kurz bleiben: eine zentrierte Zeile über 60 Zeichen
   liest sich schlechter als jede linksbündige. Deshalb sind die Maße hier
   enger als in der linksbündigen Fassung.

   Diese Regeln stehen bewusst am Ende: die Kurzschreibweise `margin: x 0 0`
   in den Basisregeln setzt den seitlichen Rand auf 0 und würde ein früher
   notiertes `margin-inline: auto` wieder aufheben. */
.wrap { text-align: center; }
.title, .close__h, .hero__h,
.lede, .claims__body, .hero__lede, .proc__t {
  margin-inline: auto;
}
.lede--wide { margin-inline: auto; }
.hero__lede { text-align: center; }
.way__body, .way__list, .rail__note { margin-inline: 0; }

/* ------------------------------------------------------ auf hellem grund --
   Zwei Regeln aus der Maschine setzen einen dunklen Grund voraus. */

/* Ein Lichtschein unter dem Zeiger funktioniert nur im Dunkeln. Auf Weiß wird
   daraus ein blauer Schleier. Stattdessen hebt sich die Fläche leicht an. */
[data-sc-spotlight]::after { display: none; }

/* Ein aufgeräumter Bildlaufbalken gehört zur hellen Fläche wie die Haarlinie. */
@supports (scrollbar-color: auto) {
  html { scrollbar-color: var(--w-line-strong) transparent; }
}

/* --------------------------------------------------- zwei gemessene lücken --
   Beide Regeln stehen hier hinten, weil sie Werte aus den Basisregeln
   überschreiben und die Datei diese Reihenfolge schon zweimal gebraucht hat. */

/* 1 · Der Kopf des Leistungsbandes fährt mit dem Band nach links. Gemessen
   klebte er über 71 % der Fahrt halb angeschnitten am Bildrand ("ei Wege auf
   / re eigene / lattform."). Sobald er gelesen sein kann, geht er weg statt
   sich zerschneiden zu lassen. Nur wenn wirklich gefahren wird: schmal und
   bei reduzierter Bewegung nimmt site.js data-sc-pan ab. */
.rail[data-sc-pan] .rail__head {
  opacity: clamp(0, calc((0.2 - var(--sc-p, 0)) / 0.15), 1);
}

/* 2 · Blatt 04 ist gepinnt, also steht sein Inhalt die ganze Fahrt lang an
   derselben Stelle. Passt er nicht in einen Bildschirm, ist er die ganze
   Fahrt lang abgeschnitten. Gemessen lagen bei 1440×900 einundvierzig der
   achtundsiebzig Pixel der Überschrift hinter der Kopfleiste, bei 1366×768
   fünfundsiebzig, und die vierte Phase fiel unten heraus. Auf Telefonen
   dasselbe: zehn Pixel bei 390×844, achtunddreißig bei 360×780. Das Blatt
   zieht sich deshalb nach der Fenster*höhe* zusammen, auf jeder Breite. */
@media (max-height: 1000px) {
  .stage--proc .proc { gap: var(--s-6); padding-bottom: var(--s-5); }
  .stage--proc .proc__bar { margin-top: var(--s-5); }
  .stage--proc .proc__list li { padding-block: 14px; }
}
@media (max-height: 850px) {
  .stage--proc .proc { gap: var(--s-5); padding-bottom: 0; }
  .stage--proc .proc__bar { margin-top: var(--s-4); }
  .stage--proc .proc__list li { padding-block: 9px; }
  .stage--proc .proc__t { font-size: var(--t-small); }
}

/* ------------------------------------------------- raster hinter die schrift --
   Das Punktraster ist ein ::before mit z-index 0 und damit ein *positioniertes*
   Element. Nicht positionierter Inhalt wird davor gezeichnet, nicht dahinter:
   in "Was im Betrieb zählt." standen helle Punkte mitten in den schwarzen
   Buchstaben. Gemessen betraf das Blatt 01, 05 und 06 im Normalbetrieb und
   bei reduzierter Bewegung jedes Blatt, weil dort nichts mehr gepinnt wird.

   Die gepinnten Bühnen tragen von der Maschine die Klasse .sc-stage mit
   position sticky und lagen nie darunter. Sie werden hier bewusst NICHT
   angefasst: eine Regel auf .stage wäre spezifischer als die der Maschine
   und würde das Pinning aushebeln. */
.sheet > .wrap { position: relative; z-index: 1; }
.sheet.is-flow > .stage { position: relative; z-index: 1; }

/* Der Ersatz für das Formular, wenn JavaScript nicht läuft. Er steht in einem
   <noscript> und ist im Normalbetrieb gar nicht im Dokument. */
.form__ohne {
  max-width: 34rem; margin-inline: auto;
  padding: var(--s-6); border: 1px solid var(--w-line-strong);
  border-radius: var(--sc-r-md); background: var(--w-surface-2);
  font-size: var(--t-body); color: var(--sc-ink-soft);
}
.form__ohne a { color: var(--sc-accent); }


/* ══════════════════════════════════════════════ das einwilligungsfenster ══
   Unten mittig, als Karte in derselben Sprache wie das Formular: eine
   Haarlinie, kein Schatten, achtzehn Pixel Radius. Es sperrt die Seite nicht
   -- es muss nicht, weil ohne Entscheidung ohnehin nichts geladen wird.

   Die beiden Knoepfe sind gleich breit und stehen nebeneinander. Ablehnen
   liegt links, wo der Blick zuerst hinfaellt. Ein grauer Verzichtslink neben
   einem bunten Ja waere keine freie Wahl, sondern eine Lenkung. */
.cc {
  position: fixed; z-index: 60;
  left: 50%; bottom: var(--s-5);
  width: min(46rem, calc(100vw - var(--s-5) * 2));
  transform: translate(-50%, calc(100% + var(--s-6)));
  opacity: 0; visibility: hidden;
  transition: opacity 220ms var(--ease), transform 260ms var(--ease),
              visibility 0s linear 260ms;
}
.cc.is-da {
  opacity: 1; visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}
.cc__in {
  background: var(--sc-canvas);
  border: 1px solid var(--w-line-strong);
  border-radius: var(--sc-r-md);
  padding: var(--s-6);
}
.cc__h {
  margin: 0; font-family: var(--sc-font-display);
  font-size: var(--t-title); font-weight: 600; letter-spacing: -0.025em;
  line-height: 1.2;
}
.cc__t {
  margin: var(--s-4) 0 0; max-width: 58ch;
  font-size: var(--t-small); line-height: 1.6; color: var(--sc-ink-soft);
}
.cc__do {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3);
  margin-top: var(--s-6);
}
.cc__do .btn { width: 100%; }
.cc__fine {
  margin: var(--s-4) 0 0;
  font-size: var(--t-micro); line-height: 1.6; color: var(--w-ink-mute);
}
.cc__fine a { color: inherit; text-underline-offset: 3px; }
.cc__fine a:hover { color: var(--sc-accent); }

@media (max-width: 560px) {
  .cc { bottom: var(--s-3); width: calc(100vw - var(--s-3) * 2); }
  .cc__in { padding: var(--s-5); }
  .cc__do { grid-template-columns: minmax(0, 1fr); }
}

/* Bei reduzierter Bewegung faehrt nichts herein, es ist einfach da. */
@media (prefers-reduced-motion: reduce) {
  .cc { transition: opacity 1ms linear, visibility 0s linear 1ms; transform: translate(-50%, 0); }
  .cc.is-da { transform: translate(-50%, 0); }
}

/* Die Rechtsseiten hatten keine Fussleiste. Der Widerruf muss aber von jeder
   Seite aus erreichbar sein, sonst ist er kein Widerruf. */
.legal__foot {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6);
  margin-top: var(--s-9); padding-top: var(--s-5);
  border-top: 1px solid var(--w-line);
}
.legal__foot a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--t-small); color: var(--sc-ink-soft); text-decoration: none;
  transition: color 140ms var(--ease);
}
.legal__foot a:hover { color: var(--sc-ink); }

/* Der Widerrufsknopf steht zwischen Links und muss aussehen wie sie. Ein
   Knopf ist er trotzdem: er oeffnet ein Fenster, er fuehrt nirgendwohin. */
.foot__btn, .legal__foot .foot__btn {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--t-small);
  color: var(--w-ink-mute);
  transition: color 140ms var(--ease);
}
.foot__btn:hover { color: var(--sc-ink); }

/* Der Pflichthinweis unter der Preiszeile. Klein, aber er muss dort stehen:
   § 3 PAngV verlangt gegenüber Verbrauchern den Gesamtpreis einschließlich
   Umsatzsteuer UND die Angabe, dass sie enthalten ist. */
.way__vat {
  margin: var(--s-2) 0 0;
  font-size: var(--t-micro); line-height: 1.5; color: var(--w-ink-mute);
}