/* ============================================================================
   Sprint-Schule — Booklet als Web-Präsentation
   ----------------------------------------------------------------------------
   Zutaten aus dem POC `poc-illoca` (render-live-showcase), unverändert
   übernommen: Passepartout-Rahmen, Fluid-Root-Scale, Papier-Palette, die vier
   Schriften, Lenis-Wrapper-Regeln, .reveal, .paper-card, .btn--paper,
   Skip-Link, Grain.
   Alles ab „SEKTIONEN" ist für dieses Booklet gebaut.
   ========================================================================== */

/* ---------------------------------------------------------------- 0 · FONTS */
/* Nur latin + latin-ext — der POC lieferte zusätzlich Kyrillisch, Griechisch
   und Vietnamesisch für eine englische Site; ein deutsches Booklet braucht
   sie nicht (10 statt 20 Dateien). */

@font-face {
  font-family: "Schibsted Grotesk Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url(./fonts/schibsted-grotesk-latin-wght-normal-Bb8VGrTG.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url(./fonts/schibsted-grotesk-latin-ext-wght-normal-hsMS0n0O.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./fonts/inter-latin-wght-normal-Dx4kXJAl.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./fonts/inter-latin-ext-wght-normal-DO1Apj_S.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Onest Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./fonts/onest-latin-wght-normal-CUIqqgP9.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Onest Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./fonts/onest-latin-ext-wght-normal-CnNj8hVb.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./fonts/dm-mono-latin-400-normal-4GdczIuU.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./fonts/dm-mono-latin-ext-400-normal-C2zvOubV.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(./fonts/dm-mono-latin-500-normal-DRMDZjhP.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(./fonts/dm-mono-latin-ext-500-normal-BtRyHRi6.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* --------------------------------------------------------------- 1 · TOKENS */

:root {
  /* Papier-Palette — 1:1 aus dem POC */
  --color-desk: #eadfc9;
  --color-paper: #fdf8f0;
  --color-paper-bright: #fffbf3;
  --color-beige-deep: #e5d6bc;
  --color-sand: #decfb2;
  --color-sand-deep: #c2b192;
  --color-ink: #373737;
  --color-body: #636363;
  --color-mono-ink: #414141;
  --color-muted: #8b8b8b;
  --color-inverse: #eadfc9;
  --color-primary: #283f7d; /* Navy — Struktur: Footer, Gründerbrief */
  --color-accent-blue: #3b60c5; /* Klein-Blau — nur Interaktion: Links, Fokus */
  --color-blue-hover: #365abd;

  /* Grafikflächen: Indigo aus der eigenen Logo-Palette (Entscheidung Florian,
     22.08.). Der Grund ist gerechnet, nicht Geschmack: Auf Klein-Blau #3B60C5
     hebt sich die Zellfarbe #5A64A8 praktisch nicht ab (1,04:1) und reißt die
     3:1-Schwelle für grafische Elemente; auf Indigo sind es 3,15:1,
     Papier-Text 16,37:1.
     Stufen-Rampe (Audit 22.08., alle Werte gerechnet): Mindest = SCHRAFFUR aus
     Hatch-Linien (6,97:1), Regel = Vollton #5a64a8 (3,15:1), Experten = Vollton
     #8891c9 (5,72:1) + Papier-Keyline. Textur + Farbe zusammen codieren die
     Stufen — Farbe allein trennte sie nicht (Alt-Rampe 1,9/2,5/3,15). Auf
     #8891c9 darf KEIN Papier-Text stehen (nur 2,86:1). */
  --color-mark: #0f1545; /* Indigo — Grafikflächen + Akzente auf hellem Grund */
  --color-cell: #5a64a8; /* Regelstandard-Vollton (3,15:1 auf Indigo) */
  --color-cell-top: #8891c9; /* Expertenstandard-Vollton (5,72:1) — nie mit Papier-Text */
  --color-cell-hatch: #9aa3c9; /* Mindeststandard-Schraffurlinien (6,97:1) */
  --color-blueprint-ink: #9aa3c9; /* Beschriftung auf Indigo (6,9:1) */

  --grid-v: #d3c9b5;
  --grid-h: #e3d9c3;

  --font-display: "Schibsted Grotesk Variable", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-marker: "Onest Variable", "Trebuchet MS", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --frame-side: 2rem;
  --gutter: calc(var(--frame-side) + 1.2rem);
  --header-h: 48px;
  /* Die echte Header-Höhe misst booklet.js und schreibt sie hierher — auf
     schmalen Viewports bricht die Leiste um und wird deutlich höher als 48px.
     Eigene Property, weil --header-h auch die Buttonhöhe steuert; sonst
     entstünde eine Rückkopplung Header → Button → Header. */
  --header-measured: 48px;
  --header-safe: calc(var(--frame-side) + var(--header-measured) + 1.8rem);
  --hole-top: 12vh;
  --hole-bottom: 12vh;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* Enter/Exit-Kurve nach motion-rules §3 — das bestehende --ease ist ein
     ease-in-out und verzögert genau den Moment, den man ansieht. */
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
  --dur: 0.15s;
  --radius-2: 2px;
  --radius-4: 4px;
  --hairline: 1px solid rgba(66, 66, 66, 0.3);
  --shadow-card: 4px 4px 0 0 rgba(0, 0, 0, 0.1);
  --shadow-sheet: 4px -2px 0 0 rgba(0, 0, 0, 0.1);
}

/* Fluid-Root-Scale: alles in rem, keine Typo-Breakpoints. */
html {
  font-size: clamp(11px, calc(100vw / 120), 16px);
}
@media (max-width: 600px) {
  html {
    font-size: clamp(11px, calc(100vw / 27), 14px);
  }
}

/* ----------------------------------------------------------------- 2 · BASE */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden; /* der echte Scroll läuft im Lenis-Wrapper */
  height: 100%;
  background: transparent;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-ink);
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
p {
  margin: 0;
}
h1,
h2,
h3 {
  margin: 0;
  font-weight: 500;
}
a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 3px;
  border-radius: var(--radius-2);
}
.site-footer :focus-visible,
.gruender :focus-visible {
  outline-color: var(--color-paper-bright);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 200;
  transform: translateY(-200%);
  padding: 0.75rem 1.25rem;
  background: var(--color-paper);
  color: var(--color-ink);
  border: var(--hairline);
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-card);
  font-family: var(--font-mono);
  font-size: 13px;
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus-visible {
  transform: translateY(0);
}

/* ------------------------------------------------------- 3 · PASSEPARTOUT */
/* Vier fixed Layer mit Millimeterpapier-Raster, jeder per clip-path auf
   seinen Randstreifen beschnitten. --hole-top/--hole-bottom animiert das JS. */

.frame {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}
.frame__layer {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  pointer-events: none;
  background-color: var(--color-desk);
  background-image: linear-gradient(90deg, var(--grid-v) 1px, transparent 0),
    linear-gradient(var(--grid-h) 1px, transparent 0);
  background-size: 1rem 1rem;
}
.frame__layer--left {
  clip-path: inset(0 calc(100% - var(--frame-side)) 0 0);
}
.frame__layer--right {
  clip-path: inset(0 0 0 calc(100% - var(--frame-side)));
}
.frame__layer--top {
  clip-path: inset(0 0 calc(100% - var(--hole-top)) 0);
}
.frame__layer--bottom {
  clip-path: inset(calc(100% - var(--hole-bottom)) 0 0 0);
}

/* Tischfläche hinter allem — im POC lag hier das Canvas. */
.desk {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--color-desk);
  pointer-events: none;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 100;
  opacity: 0.2;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

.progress {
  position: fixed;
  z-index: 45;
  top: 22vh;
  bottom: 22vh;
  right: calc(var(--frame-side) / 2 - 1px);
  width: 2px;
  background: rgba(66, 66, 66, 0.16);
  pointer-events: none;
}
.progress__bar {
  position: absolute;
  inset: 0 0 auto 0;
  height: 100%;
  background: var(--color-primary);
  transform: scaleY(0);
  transform-origin: top center;
}

/* --------------------------------------------------------- 4 · SCROLL-HÜLLE */

.scroll-wrapper {
  position: relative;
  z-index: 3;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.scroll-wrapper::-webkit-scrollbar {
  display: none;
}
.scroll-content {
  overflow-x: clip;
  overflow-y: visible;
}
main {
  display: block;
}
main:focus,
section:focus {
  outline: none;
}

/* ------------------------------------------------------------ 5 · TYPOGRAFIE */

.display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: normal;
}
.body {
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--color-body);
}
.body-sm {
  font-size: 1.334rem;
  line-height: 1.5;
  color: var(--color-body);
}
.h3 {
  font-size: 2rem;
  line-height: 1.28;
  font-weight: 500;
}
.marker {
  font-family: var(--font-marker);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.95;
}
.eyebrow {
  font-size: max(18px, 1.5rem);
  color: var(--color-body);
  margin-bottom: 1.6rem;
}
.paper-card .eyebrow {
  color: var(--color-muted);
}
.eyebrow__no {
  color: var(--color-mark);
  margin-right: 0.5rem;
}
.eyebrow--inverse {
  color: var(--color-sand);
}
.mono-note {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--color-mono-ink);
  margin-top: 1.6rem;
}
.link {
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
  transition: color var(--dur) var(--ease);
}
.link:hover {
  color: var(--color-accent-blue);
}
.link--inverse:hover {
  color: var(--color-sand);
}

/* --------------------------------------------------------- 6 · ANIMATIONEN */

.split__visual {
  display: block;
}
.split .word {
  display: inline-block;
  white-space: nowrap;
}
.split .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: calc(var(--i) * 14ms);
}
.split.is-revealed .char {
  opacity: 1;
  transform: none;
}
.reveal {
  opacity: 0;
  transform: translateY(1.4rem);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------- 7 · KARTE & BUTTON */

.paper-card {
  background: var(--color-paper);
  border: var(--hairline);
  border-radius: 0;
  box-shadow: var(--shadow-card);
  padding: 3.125rem 3.5rem 3.5rem;
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--header-h);
  padding: 6px 16px 6px 6px;
  border-radius: var(--radius-4);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.02em;
  overflow: clip;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease);
}
.btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: var(--radius-2);
  background: rgba(255, 255, 255, 0.14);
}
.btn__label {
  position: relative;
}
.btn--primary {
  background: var(--color-primary);
  color: var(--color-paper-bright);
}
.btn--primary:hover {
  background: var(--color-blue-hover);
}
.btn--paper {
  background: var(--color-paper);
  color: var(--color-ink);
  border: var(--hairline);
}
.btn--paper .btn__icon {
  background: var(--color-beige-deep);
}
.btn--paper:hover {
  background: var(--color-paper-bright);
}
.btn--block {
  width: 100%;
  justify-content: center;
  padding-inline: 12px;
  margin-top: 1.8rem;
}

.roll {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-mono-ink);
  line-height: 1.3;
}
.roll__inner {
  position: relative;
  display: block;
  overflow: clip;
}
.roll__a,
.roll__b {
  display: block;
  transition: transform 0.34s var(--ease);
}
.roll__b {
  position: absolute;
  inset: 0;
  color: var(--color-accent-blue);
  transform: translateY(100%);
}
.roll:hover .roll__a,
.roll:focus-visible .roll__a {
  transform: translateY(-100%);
}
.roll:hover .roll__b,
.roll:focus-visible .roll__b {
  transform: translateY(0);
}
@media (hover: none), (pointer: coarse) {
  .roll__a,
  .roll__b {
    transition: none;
  }
  .roll:hover .roll__a {
    transform: none;
  }
  .roll:hover .roll__b {
    transform: translateY(100%);
  }
}

/* ---------------------------------------------------------------- 8 · HEADER */

.site-header {
  position: fixed;
  z-index: 60;
  top: var(--frame-side);
  left: var(--gutter);
  right: var(--gutter);
}
.site-header__bar {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 0 0.5rem 0 1rem;
  background: var(--color-paper);
  border: var(--hairline);
  border-radius: 0;
  box-shadow: var(--shadow-card);
  min-height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.brand__mark {
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--color-primary);
  background: linear-gradient(135deg, var(--color-mark) 50%, transparent 50%);
}
.site-nav {
  margin-left: auto;
}
.site-nav__list {
  display: flex;
  gap: 1.6rem;
}
/* Menü-CTA existiert nur im mobilen Panel, der Leisten-CTA nur auf Desktop. */
.site-nav__cta {
  display: none;
}

/* Burger — erst ≤760px sichtbar. 44×44 Touch-Target, drei Linien morphen
   per transform zum X (nur transform/opacity, 200ms ease-out). */
.menu-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-2);
}
.menu-toggle__line {
  position: absolute;
  left: 11px;
  right: 11px;
  top: 50%;
  height: 2px;
  background: var(--color-ink);
  transition: transform 0.2s var(--ease-out-strong), opacity 0.2s var(--ease-out-strong);
}
.menu-toggle__line:nth-child(1) {
  transform: translateY(-7px);
}
.menu-toggle__line:nth-child(3) {
  transform: translateY(7px);
}
.site-header.menu-open .menu-toggle__line:nth-child(1) {
  transform: rotate(45deg);
}
.site-header.menu-open .menu-toggle__line:nth-child(2) {
  opacity: 0;
}
.site-header.menu-open .menu-toggle__line:nth-child(3) {
  transform: rotate(-45deg);
}

/* ============================================================================
   SEKTIONEN — ab hier selbst gebaut
   ========================================================================== */

.spacer {
  pointer-events: none;
}
/* Scroll-Strecke bewusst kurz: der POC fuhr 170svh je Feature-Stack, das trägt
   eine Marketing-Site, nicht ein Booklet mit gut 900 Wörtern. Die Ablauf-Stage
   fährt 180svh je Segment (Definition bei .ablauf-stage). */
.spacer--hero {
  /* Scroll-Strecke der Hero-Blatt-Choreografie (6 Blätter kommen dazu). */
  height: 70svh;
}
.spacer--gruender {
  height: 45svh;
}

.section {
  padding: 8rem var(--gutter);
  background: var(--color-desk);
}
.section__head {
  margin-bottom: 4rem;
  max-width: 60rem;
}
.section__lead {
  font-size: 2rem;
  line-height: 1.35;
  max-width: 34ch;
}

/* ------ 9 · HERO ---------------------------------------------------------- */

.hero {
  position: relative;
}
.hero__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  padding: var(--header-safe) var(--gutter) 4.5rem;
  /* Das Passepartout-Band startet bei 14% Viewporthöhe (choreo.compute) und
     würde die erste Headline-Zeile überdecken, wenn nur --header-safe zählt —
     der Inhalt beginnt deshalb immer unterhalb der offenen Bandkante. */
  padding-top: max(var(--header-safe), calc(14svh + 0.5rem));
}
.hero__stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* Platz für die absolut sitzende Flankenzeile darüber */
  margin-top: 5rem;
}
.hero__title {
  /* „Schulentwicklung," ist das längste Wort der Headline (~10,8em) — die
     vw-Schranke verhindert, dass es auf schmalen Viewports über den Rand
     läuft; die .word-Spans der Split-Animation brechen nie um. */
  font-size: min(7.6rem, 8vw);
}
.hero__sub {
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--color-body);
  max-width: 52ch;
  margin-top: 1.8rem;
}
/* Auf Desktop nimmt der Wrapper nicht am Layout teil — die Flanken sitzen
   absolut im Pin. Auf Mobil (≤700px) wird er zur gemeinsamen Zeile. */
.hero__flanks {
  display: contents;
}
.hero__flank {
  position: absolute;
  top: max(calc(var(--header-safe) + 1.2rem), calc(var(--hole-top) + 1.2rem));
  font-size: max(18px, 1.5rem);
  color: var(--color-body);
  border-bottom: 1px solid var(--color-body);
  padding-bottom: 0.3rem;
}
.hero__flank--left {
  left: var(--gutter);
}
.hero__flank--right {
  right: var(--gutter);
}

/* ------ 9b · HERO-SPLIT — Tag/Nacht -------------------------------------- */
/* Zweigeteilte Fläche unter dem Text: links Papier (das Kollegium bei Tag),
   rechts Indigo (das System bei Nacht). */

.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid rgba(66, 66, 66, 0.22);
  margin-top: 2.6rem;
  /* Begrenzte Höhe statt flex: 1 — die Fläche soll unter dem Text sitzen,
     nicht den restlichen Viewport fluten. */
  flex: 0 0 auto;
  height: min(30rem, 36svh);
  min-height: 18rem;
  width: 100%;
}
.hero-split__half {
  padding: 1.6rem 2rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hero-split__half--tag {
  background: var(--color-paper);
}
.hero-split__half--nacht {
  background-color: var(--color-mark);
  background-image: linear-gradient(90deg, rgba(253, 248, 240, 0.1) 1px, transparent 0),
    linear-gradient(rgba(253, 248, 240, 0.1) 1px, transparent 0);
  background-size: 1.7rem 1.7rem;
}
.hero-split__label {
  font-size: max(11px, 0.95rem);
  letter-spacing: 0.06em;
  /* Echter Text (nicht aria-hidden) — Body-Grau statt Muted, sonst fällt die
     kleine Zeile auf Papier unter 4,5:1. */
  color: var(--color-body);
  margin-bottom: 1.2rem;
}
.hero-split__half--nacht .hero-split__label {
  color: var(--color-blueprint-ink);
}
.hero-split__raster {
  display: grid;
  grid-template-columns: repeat(4, 3.7rem);
  grid-auto-rows: 2.7rem;
  gap: 4px;
}
.hero-split__zelle {
  border: 1px solid rgba(66, 66, 66, 0.32);
}
.hero-split__zelle--voll {
  background: var(--color-cell);
  border-color: transparent;
}
.hero-split__marke {
  display: flex;
  gap: 5px;
  align-items: center;
  margin-top: 1.1rem;
}
.hero-split__marke i {
  display: block;
  width: 2.2rem;
  height: 3px;
  background: rgba(66, 66, 66, 0.22);
}
.hero-split__marke i.an {
  background: var(--color-ink);
}
.hero-split__blaetter {
  position: relative;
  flex: 1;
  min-height: 10rem;
}
/* Neun Blätter in Kaskade — nur .is-da liegt auf dem Tisch. Enter mit
   scale(0.94) + kleinem Drop, wie ein abgelegtes Blatt (ease-out).
   motion-ausnahme: erklärende Scroll-Choreografie des Hero-Pins (§4). */
.hero-split__blatt {
  position: absolute;
  width: 6.2rem;
  height: 8.2rem;
  background: var(--color-paper);
  border: 1px solid rgba(66, 66, 66, 0.28);
  box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(-0.5rem) scale(0.94) rotate(var(--rot, 0deg));
  transition: opacity 0.35s var(--ease-out-strong), transform 0.35s var(--ease-out-strong);
}
.hero-split__blatt.is-da {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(var(--rot, 0deg));
}
.hero-split__blatt::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  top: 1.2rem;
  height: 2.8rem;
  background: repeating-linear-gradient(
    to bottom,
    rgba(66, 66, 66, 0.18) 0 1px,
    transparent 1px 0.9rem
  );
}
.hero-split__blatt:nth-child(1) { left: 0; top: 0.2rem; }
.hero-split__blatt:nth-child(2) { left: 3.6rem; top: 1.8rem; }
.hero-split__blatt:nth-child(3) { left: 7.2rem; top: 3.4rem; }
.hero-split__blatt:nth-child(4) { left: 26%; top: 0.5rem; --rot: 2deg; }
.hero-split__blatt:nth-child(5) { left: 33%; top: 2.4rem; --rot: -2deg; }
.hero-split__blatt:nth-child(6) { left: 47%; top: 0.9rem; --rot: 1.5deg; }
.hero-split__blatt:nth-child(7) { left: 54%; top: 3rem; --rot: -3deg; }
.hero-split__blatt:nth-child(8) { left: 68%; top: 0.6rem; --rot: 2.5deg; }
.hero-split__blatt:nth-child(9) { left: 76%; top: 2.6rem; --rot: -1.5deg; }
.hero-split__foot {
  margin-top: auto;
  padding-top: 1rem;
  font-family: var(--font-mono);
  font-size: max(10px, 0.9rem);
  letter-spacing: -0.02em;
  color: var(--color-body);
}
.hero-split__half--nacht .hero-split__foot {
  color: var(--color-blueprint-ink);
}

/* ------ 10 · LEGENDEN-BAUSTEINE ------------------------------------------ */
/* Key/Swatch-Paare der Stufen-Legende (im Plan-Blatt wiederverwendet).
   Swatches tragen dieselbe Textur+Farb-Codierung wie die Zellen: Schraffur =
   Mindest, Vollton = Regel, heller Vollton + Keyline = Experten. */

.raster__key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.raster__swatch {
  width: 12px;
  height: 12px;
  border: 1px solid rgba(253, 248, 240, 0.45);
}
.raster__swatch--1 {
  background-image: repeating-linear-gradient(
    45deg,
    var(--color-cell-hatch) 0 1.5px,
    transparent 1.5px 5px
  );
}
.raster__swatch--2 {
  background: var(--color-cell);
}
.raster__swatch--3 {
  background: var(--color-cell-top);
  box-shadow: inset 0 0 0 1px var(--color-paper);
}

/* ------ 11 · TEXTSEKTIONEN (problem, idee, beweis) ----------------------- */

.sheet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
  max-width: 96rem;
}
/* Im vollen Blatt nutzt das Innen-Grid die ganze Breite und atmet mehr. */
.blatt .sheet {
  max-width: none;
  gap: 3rem 7rem;
}
.sheet__title {
  font-size: 5.4rem;
  margin-bottom: 2.25rem;
}
.sheet__body p + p {
  margin-top: 1.2rem;
}
.claim {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.6rem;
  line-height: 1.2;
  color: var(--color-ink);
  border-left: 3px solid var(--color-mark);
  padding-left: 1.4rem;
  margin-top: 2rem;
}

/* Fakten-Liste im Beweis-Abschnitt */
.facts {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}
.facts__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.2rem;
  align-items: baseline;
  border-top: var(--hairline);
  padding-top: 0.9rem;
}
.facts__no {
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--color-mark);
  font-weight: 500;
}
.facts__text {
  font-size: 1.334rem;
  line-height: 1.5;
  color: var(--color-body);
}

/* ------ 11b · BEWEIS-BLATT — Spalten, die durchziehen -------------------- */

.beweis__kopf {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 3rem 7rem;
  align-items: end;
  margin-bottom: 3rem;
}
.beweis__kopf .sheet__title {
  margin-bottom: 0;
}
.facts--band {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem 3.5rem;
  margin-top: 0;
  border-top: var(--hairline);
  border-bottom: var(--hairline);
  padding-block: 1.8rem;
}
.facts--band .facts__item {
  border-top: 0;
  padding-top: 0;
}
.beweis__spalten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3.5rem;
  align-items: start;
  margin-top: 3rem;
}
.beweis__kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: -0.02em;
  color: var(--color-mono-ink);
  border-bottom: var(--hairline);
  padding-bottom: 0.6rem;
  margin-bottom: 1.2rem;
}
/* Die Rhythmus-Infografik im Idee-Blatt — illustriert den Tag/Nacht-Takt
   direkt unter dem Text, der ihn beschreibt. */
.idee__render {
  margin-top: 3rem;
}
.idee__render img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(66, 66, 66, 0.25);
  box-shadow: var(--shadow-card);
}

/* Das gerenderte Arbeitsblatt — echter System-Output als Belegstück. Weißes
   Druckblatt auf Booklet-Papier: bewusst NICHT in der Papier-Palette, damit
   es als Fremdkörper aus der Nacht lesbar bleibt. */
.beweis__render {
  margin-top: 3.5rem;
}
.beweis__render-link {
  display: block;
  max-width: 92rem;
}
.beweis__render img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid rgba(66, 66, 66, 0.25);
  box-shadow: var(--shadow-card);
}
.beweis__render-caption {
  margin-top: 1.4rem;
  max-width: 74rem;
  font-size: 1.4rem;
}

.beweis__prinzip {
  margin-top: 3.5rem;
  border-top: var(--hairline);
  padding-top: 2.4rem;
  max-width: 74rem;
}
.beweis__prinzip .claim {
  font-size: 3rem;
  margin-top: 1.2rem;
  margin-bottom: 1.6rem;
}

/* ------ 12 · ABLAUF-STAGE — ein Blatt, fünf Zustände --------------------- */
/* EIN gepinntes Plan-Blatt durchläuft scroll-getrieben fünf Zustände, links
   wechseln die Schritt-Karten. Zustandswahl über [data-schritt] am Container,
   Zell-Rollen über data-s1/data-s3 an den Zellen — booklet.js schaltet nur
   den Index, alle Morphs macht CSS.
   motion-ausnahme: Zustandsmorphs 450–600 ms — erklärende Scroll-Choreografie
   einer Story-Sektion, kein UI-Feedback (motion-rules §4-Ausnahme).
   motion-ausnahme: background-color auf 12 Zellen — paint-only, GPU-neutral. */

.ablauf__intro {
  padding: 6rem var(--gutter) 2rem;
  background: var(--color-desk);
}
.ablauf__vorab {
  max-width: 62ch;
  margin-top: 0.5rem;
}

.ablauf-stage {
  position: relative;
  /* 100svh Pin + 5×130svh Strecke = 750svh.
     Historie des Werts — beide Richtungen sind belegt, deshalb steht sie hier:
       100svh  Ausgangswert (Redesign 23.08.)
       →140→180  nach Florians Feedback „Maus-Scroll überspringt Schritte" (23.08.)
       →130      nach Felix' Review (24.08.): „ungefähr drei komplette Seiten
                 scrollen, bevor der nächste Schritt gezeigt wird … muss auf
                 jeden Fall reduziert werden."
     Die beiden Rückmeldungen widersprechen sich: Florian scrollt schnell und
     übersprang Schritte, Felix scrollt langsam und empfand die Strecke als
     endlos. 130svh liegt dazwischen, näher an Felix. Abgefedert wird die
     Verkürzung durch den Fortschrittsbalken (fünf Segmente im Blatt-Kopf), der
     den Restweg sichtbar macht — das war Felix' eigentliches Problem („ich
     dachte, die Seite ist zu Ende").
     Zweiter Hebel gegen das Überspringen bleibt: wheelMultiplier 0.85 in
     booklet.js:442. NICHT gleichzeitig mit diesem Wert ändern, sonst ist bei
     der nächsten Runde nicht zuordenbar, was gewirkt hat.
     Bei Änderung die Marker-Positionen unten nachziehen (Δ = Segmentlänge). */
  height: 750vh;
  height: 750svh;
}
.ablauf-stage__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: stretch;
  gap: 3rem;
  padding: var(--header-safe) var(--gutter) 3.2rem;
}

/* Karten-Stack: alle Karten in derselben Grid-Zelle — der Slot ist so hoch
   wie die höchste Karte, beim Wechsel springt nichts. Ausblenden NUR über
   opacity: alle fünf Schritte bleiben so im Accessibility-Tree lesbar
   (Code-Review-Befund 1 — reduced-motion ist eine Vestibular-, keine
   Screenreader-Präferenz). pointer-events verhindert, dass die oberste
   unsichtbare Karte die aktive überdeckt; Fokus-Ziele enthalten sie keine. */
.ablauf-stage__karten {
  align-self: center;
  display: grid;
  min-width: 0;
}
/* Exit schnappt kürzer (0.3s) als der Enter (0.45s) — halbiert das
   Doppelbild-Fenster im Stack (Motion-Review-Befund 4). */
.stage-karte {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(1.6rem);
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out-strong), transform 0.3s var(--ease-out-strong);
}
.stage-karte.is-above {
  transform: translateY(-1.6rem);
}
.stage-karte.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition-duration: 0.45s, 0.45s;
  transition-delay: 0s, 0s;
}
.stage-karte__title {
  font-size: 5rem;
  margin-bottom: 2rem;
  /* Einzige blaue Headline-Ebene der Seite: verklammert den Karten-Titel mit
     dem Indigo-Plan-Blatt daneben (16:1 auf Papier). H1/H2 bleiben Tinte —
     die Primärfarbe wird gehortet, nicht verteilt. */
  color: var(--color-mark);
}

/* Das Plan-Blatt: Indigo-Grafikfläche mit Blueprint-Grid, füllt den Pin. */
.ablauf-stage__blatt {
  min-width: 0;
  min-height: 0;
  display: grid;
}
.plan-blatt {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  background-color: var(--color-mark);
  background-image: linear-gradient(90deg, rgba(253, 248, 240, 0.08) 1px, transparent 0),
    linear-gradient(rgba(253, 248, 240, 0.08) 1px, transparent 0);
  background-size: 1.7rem 1.7rem;
  border: var(--hairline);
  box-shadow: var(--shadow-card);
  padding: 1.8rem 2rem 1.6rem;
}
/* Blatt-Entrance als Scale statt TranslateY (Reveal-Observer liefert die
   Klasse). motion-ausnahme: scale(0.96), nie scale(0) — motion-rules §5.
   Eigene Kurve: die .reveal-Basis fährt ease-in-out, Entrances gehören auf
   ease-out (Motion-Review-Befund 1). */
.plan-blatt.reveal {
  transform: scale(0.96);
  transition: opacity 0.55s var(--ease-out-strong), transform 0.55s var(--ease-out-strong);
}
.plan-blatt.reveal.is-revealed {
  transform: none;
}

.plan-blatt__head {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-blueprint-ink);
  border-bottom: 1px solid rgba(253, 248, 240, 0.22);
  padding-bottom: 0.7rem;
}
.plan-blatt__schritt {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  white-space: nowrap;
}
.plan-blatt__schritt b {
  font-weight: 500;
  color: var(--color-paper-bright);
}

/* Fortschrittsbalken der Ablauf-Stage — fünf Segmente, gefüllt bis zum
   aktuellen Schritt. Grund: Die Zahl „3 / 5" beantwortet „wo bin ich",
   aber nicht „kommt da noch was". Felix las die Seite am 24.08. und hielt
   sie beim dritten Schritt für zu Ende, obwohl der Zähler sichtbar war.
   Restweg muss man SEHEN, nicht lesen.

   Zustand kommt aus [data-schritt] am .ablauf-stage — derselbe Schalter wie
   für alle anderen Morphs, KEIN zweiter Zustandsspeicher. */
.plan-blatt__fortschritt {
  display: inline-flex;
  gap: 3px;
}
.plan-blatt__fortschritt i {
  width: 16px;
  height: 3px;
  background: rgba(154, 163, 201, 0.32); /* ungefüllt: Beschriftungston, gedämpft */
  transition: background 0.45s ease;
}
.ablauf-stage[data-schritt="1"] .plan-blatt__fortschritt i:nth-child(-n + 1),
.ablauf-stage[data-schritt="2"] .plan-blatt__fortschritt i:nth-child(-n + 2),
.ablauf-stage[data-schritt="3"] .plan-blatt__fortschritt i:nth-child(-n + 3),
.ablauf-stage[data-schritt="4"] .plan-blatt__fortschritt i:nth-child(-n + 4),
.ablauf-stage[data-schritt="5"] .plan-blatt__fortschritt i:nth-child(-n + 5) {
  background: var(--color-paper-bright);
}
@media (prefers-reduced-motion: reduce) {
  .plan-blatt__fortschritt i {
    transition: none;
  }
}
/* Systemlauf-Linie: zieht in Schritt 2 einmal durch (die Nacht-Produktion). */
.plan-blatt__head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--color-cell-hatch);
  transform: scaleX(0);
  transform-origin: left center;
}
.ablauf-stage[data-schritt="2"] .plan-blatt__head::after {
  transform: scaleX(1);
  /* motion-ausnahme: 900 ms — erzählt den Nachtlauf, kein UI-Feedback (§4) */
  transition: transform 0.9s cubic-bezier(0.77, 0, 0.175, 1);
}
.plan-blatt__labels {
  display: grid;
  text-align: right;
}
/* Label-Wechsel: Exit (0.15s) schneller als Enter (0.3s) — entflechtet das
   Doppelbild der überlagerten Spans (Motion-Review-Befund 6). */
.plan-blatt__labels span {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 0.15s var(--ease);
}
.ablauf-stage[data-schritt="1"] .plan-blatt__labels span:nth-child(1),
.ablauf-stage[data-schritt="2"] .plan-blatt__labels span:nth-child(2),
.ablauf-stage[data-schritt="3"] .plan-blatt__labels span:nth-child(3),
.ablauf-stage[data-schritt="4"] .plan-blatt__labels span:nth-child(4),
.ablauf-stage[data-schritt="5"] .plan-blatt__labels span:nth-child(5) {
  opacity: 1;
  transition-duration: 0.3s;
  transition-delay: 0.08s;
}

/* Zellen: 4×3, füllen die Blatt-Höhe. Entrance gestaffelt über --i (nur
   opacity/transform — border-Wechsel laufen ohne Stagger, dritter Delay-Slot). */
.plan-blatt__grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 1.4rem;
}
.plan-zelle {
  position: relative;
  border: 1px dashed rgba(253, 248, 240, 0.28);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.5s var(--ease-out-strong), transform 0.5s var(--ease-out-strong),
    border-color 0.35s var(--ease);
}
.plan-blatt.is-revealed .plan-zelle {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i) * 45ms), calc(var(--i) * 45ms), 0s;
}

/* Füll-Layer (::before): wächst von unten, trägt in S3 die Review-Marks. */
.plan-zelle::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 0.55s var(--ease-out-strong), background-color 0.45s var(--ease),
    opacity 0.45s var(--ease);
}

/* S1 — Raster: drei Felder werden ausgewählt. */
.ablauf-stage[data-schritt="1"] .plan-zelle[data-s1="pick"] {
  border-style: solid;
  border-color: var(--color-cell-hatch);
  box-shadow: inset 0 0 0 1px var(--color-cell-hatch);
}

/* S2 — Entwurf: Nacht-Füllwelle, alle Zellen im Punktraster (vorläufig, im
   Entstehen — bewusst NICHT die Mindest-Schraffur, die ist Stufen-Codierung),
   zeilenweise von unten. Delay nur hier — die Basisregel trägt keinen.
   motion-ausnahme: Zeilenwelle 120 ms über der 30–80ms-Stagger-Norm — die
   Welle über drei Zeilen IST die Nacht-Erzählung, kein UI-Stagger (§9/§10). */
.ablauf-stage[data-schritt="2"] .plan-zelle::before {
  transform: scaleY(1);
  background-image: radial-gradient(rgba(154, 163, 201, 0.55) 1px, transparent 1.5px);
  background-size: 9px 9px;
  background-position: center;
  background-repeat: repeat; /* die Basisregel steht für die S3-Icons auf no-repeat */
  transition-delay: calc((2 - var(--row)) * 120ms);
}

/* S3–S5 — beschlossene Felder: Regel-Vollton, Rahmen wird fest (die
   Entwurfslinie hätte sonst einen Zackenrand um die Füllung gelegt). */
.ablauf-stage[data-schritt="3"] .plan-zelle:not([data-s3="drop"]),
.ablauf-stage[data-schritt="4"] .plan-zelle:not([data-s3="drop"]),
.ablauf-stage[data-schritt="5"] .plan-zelle:not([data-s3="drop"]) {
  border-style: solid;
  border-color: rgba(253, 248, 240, 0.38);
}
.ablauf-stage[data-schritt="3"] .plan-zelle:not([data-s3="drop"])::before,
.ablauf-stage[data-schritt="4"] .plan-zelle:not([data-s3="drop"])::before,
.ablauf-stage[data-schritt="5"] .plan-zelle:not([data-s3="drop"])::before {
  transform: scaleY(1);
  background-color: var(--color-cell);
}

/* S3 — Beschluss: Review-Marks. Haken = übernommen, Stift = geändert,
   Kreuz = verworfen. Icons als Data-URI in Papierfarbe, nur in S3 sichtbar. */
.ablauf-stage[data-schritt="3"] .plan-zelle::before {
  background-size: 1.4rem 1.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5 10 18.5 20 6' fill='none' stroke='%23fdf8f0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ablauf-stage[data-schritt="3"] .plan-zelle[data-s3="swap"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20l1.2-4.2L16.4 4.6a2 2 0 0 1 2.8 0l0.2 0.2a2 2 0 0 1 0 2.8L8.2 18.8 4 20z' fill='none' stroke='%23fdf8f0' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ablauf-stage[data-schritt="3"] .plan-zelle[data-s3="drop"]::before {
  transform: scaleY(1);
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='%23fdf8f0' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  opacity: 0.6;
}
.ablauf-stage[data-schritt="3"] .plan-zelle[data-s3="drop"],
.ablauf-stage[data-schritt="4"] .plan-zelle[data-s3="drop"],
.ablauf-stage[data-schritt="5"] .plan-zelle[data-s3="drop"] {
  border-style: dashed;
  border-color: rgba(253, 248, 240, 0.18);
}

/* S4/S5 — Drei Stufen: Bänder wachsen VON UNTEN (clip-path statt scaleY,
   damit die 45°-Schraffur nicht staucht) — Mindest-Schraffur auf Indigo,
   1px-Papier-Stops als Band-Keyline (Audit-Auflage), Regel, Experten.
   motion-ausnahme: clip-path-Reveal — konsistente Von-unten-Physik der Blatt-
   Story (Motion-Review-Befund 2), Fläche paint-only. */
.plan-zelle::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.5s var(--ease-out-strong);
  background-image: repeating-linear-gradient(
      45deg,
      var(--color-cell-hatch) 0 1.5px,
      transparent 1.5px 7px
    ),
    linear-gradient(
      to top,
      var(--color-mark) 0 calc(33.3% - 1px),
      var(--color-paper) calc(33.3% - 1px) 33.3%,
      var(--color-cell) 33.3% calc(66.6% - 1px),
      var(--color-paper) calc(66.6% - 1px) 66.6%,
      var(--color-cell-top) 66.6% 100%
    );
  background-size: 100% 33.3%, 100% 100%;
  background-position: left bottom, center;
  background-repeat: no-repeat;
}
.ablauf-stage[data-schritt="4"] .plan-zelle:not([data-s3="drop"])::after,
.ablauf-stage[data-schritt="5"] .plan-zelle:not([data-s3="drop"])::after {
  clip-path: inset(0);
}

/* Legende (ab S4), Follow-up-Fußzeile (S5), Stempel (S5). Beide reservieren
   ihren Platz dauerhaft — beim Zustandswechsel springt die Blatt-Höhe nicht. */
.plan-blatt__legende {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 1.2rem;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-blueprint-ink);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out-strong);
}
.ablauf-stage[data-schritt="4"] .plan-blatt__legende,
.ablauf-stage[data-schritt="5"] .plan-blatt__legende {
  opacity: 1;
}
.plan-blatt__foot {
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-blueprint-ink);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out-strong);
}
.ablauf-stage[data-schritt="5"] .plan-blatt__foot {
  opacity: 1;
}
.plan-blatt__stamp {
  position: absolute;
  top: 4.2rem;
  right: 2rem;
  padding: 0.5rem 1rem;
  border: 1.5px solid var(--color-paper-bright);
  outline: 1px solid var(--color-paper-bright);
  outline-offset: 3px;
  color: var(--color-paper-bright);
  font-size: max(13px, 1.1rem);
  letter-spacing: 0.06em;
  opacity: 0;
  /* Ein Stempel LANDET von oben auf dem Blatt (1.12 → 1), er wächst nicht
     heraus — Motion-Review-Befund 3. */
  transform: rotate(-4deg) scale(1.12);
  transition: opacity 0.3s var(--ease-out-strong), transform 0.45s var(--ease-out-strong);
}
.ablauf-stage[data-schritt="5"] .plan-blatt__stamp {
  opacity: 1;
  transform: rotate(-4deg) scale(1);
}

/* Unsichtbare Anker an den Segmentstarts (+14svh: der Sprung landet sicher IM
   Zielsegment, hinter der 4%-Hysterese-Schwelle — booklet.js zieht beim
   Scrollen den Band-Offset ab). 0×0 groß → Fokus-Autoscroll greift nicht. */
.ablauf-stage__marker-bahn {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.stage-marker {
  position: absolute;
  left: 0;
  width: 0;
  height: 0;
  outline: none;
}
.stage-marker:nth-child(1) { top: 20svh; }
.stage-marker:nth-child(2) { top: 150svh; }
.stage-marker:nth-child(3) { top: 280svh; }
.stage-marker:nth-child(4) { top: 410svh; }
.stage-marker:nth-child(5) { top: 540svh; }

/* ------ 12b · BLATT-REGEL — Papier dockt an den Rahmen ------------------- */

.section--bleed {
  padding-inline: var(--frame-side);
}
.blatt {
  background: var(--color-paper);
  border: var(--hairline);
  box-shadow: var(--shadow-card);
  padding: 4rem 4.5rem 4.5rem;
  width: 100%;
}
.outro {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 4rem;
  align-items: start;
}
.outro__plus {
  position: relative;
  background: var(--color-paper-bright);
  border: var(--hairline);
  box-shadow: var(--shadow-sheet);
  padding: 2.6rem 2.6rem 2.8rem;
}
.outro__plus-tab {
  position: absolute;
  top: -1.4rem;
  left: 2rem;
  background: var(--color-mark);
  color: var(--color-paper-bright);
  font-size: max(11px, 0.95rem);
  letter-spacing: 0.06em;
  padding: 0.4rem 0.9rem;
}
/* Volle Blattbreite in Sektionen, die sonst im Gutter laufen (Kontakt). */
.blatt--bleed {
  margin-inline: calc(var(--frame-side) - var(--gutter));
  width: auto;
}

/* ------ 13 · LEISTUNG — drei Karten in der Mappe ------------------------- */

.folder {
  position: relative;
  background: var(--color-beige-deep);
  border: var(--hairline);
  padding: 4rem 3rem 3.4rem;
  box-shadow: var(--shadow-card);
}
.folder__tab {
  position: absolute;
  top: -1.85rem;
  left: 2.4rem;
  font-size: max(12px, 0.95rem);
  color: var(--color-mono-ink);
  background: var(--color-beige-deep);
  border: var(--hairline);
  border-bottom: 0;
  padding: 0.5rem 1.2rem;
}
.deck {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
  align-items: start;
}
.card {
  position: relative;
  padding: 3.125rem 3rem 3.5rem;
  transition: transform 0.35s var(--ease);
}
.card--a {
  transform: rotate(-1.4deg);
}
.card--b {
  transform: rotate(0.6deg) translateY(-0.8rem);
}
.card--c {
  transform: rotate(1.6deg);
}
.card:hover,
.card:focus-within {
  transform: rotate(0) translateY(-0.4rem);
}
.card__flag {
  position: absolute;
  top: 0;
  right: 2.2rem;
  width: 1.6rem;
  height: 3.2rem;
  background: var(--color-mark);
}
.card__name {
  font-family: var(--font-display);
  font-size: 2.2rem;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.card__note {
  font-size: 1.334rem;
  line-height: 1.55;
  color: var(--color-body);
  margin-bottom: 1.6rem;
}
.card__list {
  display: grid;
  gap: 0.6rem;
  font-size: 1.334rem;
  color: var(--color-body);
}
.card__list li::before {
  content: "—";
  margin-right: 0.6rem;
  color: var(--color-sand-deep);
}

/* „Und behaltet": drei Argumente als drei Spalten über die volle Breite. */
.behalten {
  margin-top: 3.5rem;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem 3.5rem;
}
.behalten .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

/* Einwandbehandlung als Akkordeon */
.fragen {
  margin-top: 3.5rem;
  border-top: 1px solid rgba(66, 66, 66, 0.25);
  max-width: 78rem;
}
.fragen__item {
  border-bottom: 1px solid rgba(66, 66, 66, 0.25);
}
.fragen__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.375rem 0;
  font-size: max(16px, 1.5rem);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur) var(--ease);
}
.fragen__q::-webkit-details-marker {
  display: none;
}
.fragen__q:hover {
  color: var(--color-accent-blue);
}
.fragen__sign {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}
.fragen__sign::before,
.fragen__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: currentColor;
}
.fragen__sign::after {
  transform: rotate(90deg);
  transition: transform 0.25s var(--ease);
}
.fragen__item[open] .fragen__sign::after {
  transform: rotate(0);
}
.fragen__a {
  padding: 0 0 1.6rem;
  max-width: 62ch;
}

/* ------ 14 · GRÜNDER — Navy-Feld mit Papierbogen ------------------------ */

.gruender {
  position: relative;
}
.gruender__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
}
.gruender__field {
  height: 100%;
  width: 100%;
  background: var(--color-primary);
  display: grid;
  place-items: center;
  padding: var(--header-safe) var(--gutter) 4rem;
  overflow: hidden;
}
.gruender__inner {
  width: min(84rem, 100%);
}
.gruender__title {
  font-size: 5.4rem;
  color: var(--color-paper-bright);
  margin-bottom: 2.4rem;
}
/* Zwei Personen-Cards mit Porträt-Slot (Platzhalter: Blueprint-Fläche). */
.gruender__duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}
.person-card {
  padding: 1.4rem 1.4rem 2rem;
  box-shadow: var(--shadow-sheet);
}
.person-card__foto {
  position: relative;
  /* 25.08.: von clamp(11rem, 24svh, 19rem) erhöht — der Slot war so flach, dass
     `cover` bei quadratischer Quelle nur rund die halbe Bildhöhe zeigte und den
     Haaransatz kappte. Obergrenze bleibt bewusst gedeckelt: .gruender__pin ist
     100svh hoch mit overflow:hidden, ein quadratischer Slot (~38rem bei voller
     Kartenbreite) würde die Karte unten abschneiden. */
  height: clamp(14rem, 31svh, 25rem);
  background-color: var(--color-mark);
  border: var(--hairline);
  margin-bottom: 1.4rem;
  overflow: hidden;
}
.person-card__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Quadratische Avatare im querformatigen Slot: Anschnitt weit oben, damit
     Haaransatz und Stirn stehen bleiben. Bei 400x400-Quellen sitzt der Kopf
     zwischen ~5 % und ~55 % der Bildhöhe. */
  object-position: 50% 12%;
  filter: grayscale(1); /* Sicherheitsnetz: auch spätere High-Res bleiben Tinte-s/w */
}
.person-card__name {
  font-family: var(--font-display);
  font-size: 2rem;
  margin-bottom: 0.3rem;
}
.person-card__role {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-muted);
  margin-bottom: 0.9rem;
}
.person-card__bio {
  font-size: 1.334rem;
  line-height: 1.5;
  color: var(--color-body);
}
/* Vita/LinkedIn unter der Bio — Felix' Wunsch aus der Freigabe-Mail 25.08.
   Mono wie die Rollenzeile, damit die Karte nicht dritte Schrift bekommt. */
.person-card__links {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-accent-blue);
}
.gruender__claim {
  margin-top: 2.4rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.2rem;
  line-height: 1.25;
  color: var(--color-paper-bright);
  max-width: 58rem;
}
.gruender__sign {
  margin-top: 1.2rem;
  font-size: max(13px, 1.1rem);
  color: var(--color-sand);
}
/* Wird der Viewport zu flach für den Pin (2 Cards + Claim), löst er sich. */
@media (max-height: 800px) {
  .gruender__pin {
    position: static;
    height: auto;
  }
  .gruender__field {
    height: auto;
    padding-block: 6rem;
  }
  .spacer--gruender {
    display: none;
  }
}

/* ------ 15 · FORTBILDNER — Aktenvermerk mit Reiter ----------------------- */

.vermerk {
  position: relative;
  padding-top: 4.6rem;
}
.vermerk__tab {
  position: absolute;
  top: -1.55rem;
  left: 2.4rem;
  margin-bottom: 0;
  background: var(--color-beige-deep);
  border: var(--hairline);
  padding: 0.55rem 1.2rem;
  font-size: max(12px, 1.1rem);
  color: var(--color-mono-ink);
}
.vermerk__body {
  max-width: 72rem;
}

/* ------ 16 · KONTAKT ----------------------------------------------------- */

.kontakt {
  background: var(--color-desk);
  padding: 8rem var(--gutter) 6rem;
}
.kontakt__title {
  font-size: 5.4rem;
  margin-bottom: 2rem;
}
.kontakt__body {
  max-width: 62ch;
}
/* Pilot-Blatt: Text links, Indigo-Vermerk rechts. */
.pilot {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 3rem 5rem;
  align-items: stretch;
}
.pilot__text .body {
  max-width: 62ch;
}
.pilot__vermerk {
  display: flex;
  flex-direction: column;
  background-color: var(--color-mark);
  background-image: linear-gradient(90deg, rgba(253, 248, 240, 0.08) 1px, transparent 0),
    linear-gradient(rgba(253, 248, 240, 0.08) 1px, transparent 0);
  background-size: 1.7rem 1.7rem;
  border: var(--hairline);
  box-shadow: var(--shadow-card);
  padding: 1.6rem 1.8rem;
  min-height: 20rem;
}
.pilot__vermerk-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-blueprint-ink);
  border-bottom: 1px solid rgba(253, 248, 240, 0.22);
  padding-bottom: 0.6rem;
  margin-bottom: 1rem;
}
.pilot__vermerk-list {
  display: grid;
  align-content: start;
  gap: 0.9rem;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: -0.02em;
  color: var(--color-paper-bright);
}
.pilot__vermerk-list li {
  border-bottom: 1px dashed rgba(253, 248, 240, 0.22);
  padding-bottom: 0.9rem;
}
.pilot__vermerk-list li::before {
  content: "→";
  margin-right: 0.8rem;
  color: var(--color-blueprint-ink);
}
.kontakt__schluss {
  margin-top: 6.5rem;
}
.kontakt__next {
  margin-top: 0;
}
.kontakt__cta {
  margin-top: 2.4rem;
}
.kontakt__people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem;
  margin-top: 3rem;
  max-width: 72rem;
}
.person {
  padding: 2.4rem 2.6rem 2.6rem;
}
.person__name {
  font-family: var(--font-display);
  font-size: 2rem;
  margin-bottom: 0.4rem;
}
.person__role {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-muted);
  margin-bottom: 1rem;
}
.person__mail {
  font-size: 1.334rem;
}

/* ------ 17 · FOOTER ------------------------------------------------------ */

.site-footer {
  background: var(--color-primary);
  color: var(--color-inverse);
  padding: 7rem var(--gutter) 2rem;
}
.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
  justify-content: space-between;
  align-items: flex-start;
}
.site-footer__claim {
  font-size: 2rem;
  line-height: 1.2;
  max-width: 26ch;
  color: var(--color-paper-bright);
}
.site-footer__cols {
  display: flex;
  gap: 5rem;
}
.site-footer__coltitle {
  color: var(--color-sand);
  font-family: var(--font-marker);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: max(15px, 1.334rem);
  margin-bottom: 1.2rem;
}
.site-footer__col li + li {
  margin-top: 0.6rem;
}
.site-footer__col a {
  font-size: max(14px, 1.25rem);
  color: var(--color-inverse);
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 0.78;
  letter-spacing: -0.03em;
  font-size: min(15vw, 16rem);
  color: var(--color-inverse);
  margin: 5rem 0 1.5rem;
}
.site-footer__legal {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-sand);
  border-top: 1px solid rgba(234, 223, 201, 0.25);
  padding-top: 1.5rem;
}

/* ============================================================ 18 · RESPONSIV */

@media (max-width: 1100px) {
  .hero__title {
    font-size: min(6rem, 8vw);
  }
  /* Auch hier: „Curriculum-Workshop" (~10,6em) darf nicht über den Rand —
     die vw-Schranke greift nur auf schmalen Viewports. */
  .stage-karte__title,
  .sheet__title,
  .gruender__title,
  .kontakt__title {
    font-size: min(4.6rem, 8vw);
  }
}

/* Stage-Auflösung: die Stage löst sich statisch auf, wenn der Pin nicht
   trägt — SCHMAL (≤900px: längste Karte 749px @375×667, interner Scroll wäre
   eine Touch-Falle) ODER FLACH (gemessen: Karte 4 überläuft bei 1920×560;
   Code-Review-Befund 2). Das Blatt steht dann EINMAL im Endzustand vor den
   Karten, die fünf Karten fließen normal. Zustands-Layer werden neutralisiert,
   damit das live wechselnde data-schritt (JS läuft weiter) nichts umschaltet. */
@media (max-width: 900px), (max-height: 620px), (min-width: 1700px) and (max-height: 800px) {
  .ablauf-stage {
    height: auto;
  }
  .ablauf-stage__pin {
    position: static;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-top: 2rem;
    padding-bottom: 2.5rem;
  }
  .ablauf-stage__blatt {
    order: -1;
    height: 24rem;
  }
  .ablauf-stage__karten {
    display: block;
  }
  .stage-karte {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  .stage-karte + .stage-karte {
    margin-top: 1.6rem;
  }
  .ablauf-stage__marker-bahn {
    position: static;
    height: 0;
  }
  .stage-marker {
    position: static;
    display: block;
    height: 0;
  }
  .plan-blatt {
    padding: 1.2rem 1.4rem 1.1rem;
  }
  .plan-blatt__grid {
    margin-top: 1rem;
    gap: 4px;
  }
  /* Blatt-Endzustand fest verdrahten (unabhängig vom Live-data-schritt).
     !important gegen die spezifischeren [data-schritt]-Zustandsregeln. */
  .ablauf-stage .plan-zelle {
    opacity: 1;
    transform: none;
    border-style: solid !important;
    border-color: rgba(253, 248, 240, 0.38) !important;
    box-shadow: none !important;
    transition: none;
  }
  .ablauf-stage .plan-zelle[data-s3="drop"] {
    border-style: dashed !important;
    border-color: rgba(253, 248, 240, 0.18) !important;
  }
  .ablauf-stage .plan-zelle::before {
    display: none;
  }
  .ablauf-stage .plan-zelle::after {
    opacity: 1;
    clip-path: inset(0) !important;
  }
  .ablauf-stage .plan-zelle[data-s3="drop"]::after {
    opacity: 0;
  }
  .ablauf-stage .plan-blatt__legende {
    opacity: 1;
    font-size: 10px;
    gap: 0.8rem;
    margin-top: 0.8rem;
  }
  .ablauf-stage .plan-blatt__foot {
    display: none; /* Info steht wörtlich in Karte 5 — mobil zählt die Fläche */
  }
  .ablauf-stage .plan-blatt__stamp {
    opacity: 1;
    transform: rotate(-4deg);
    top: 3.2rem;
    right: 1.4rem;
  }
  .ablauf-stage .plan-blatt__schritt {
    display: none; /* die Zählung gehört zur Scroll-Choreografie */
  }
  .ablauf-stage .plan-blatt__labels span {
    opacity: 0 !important;
  }
  .ablauf-stage .plan-blatt__labels span:nth-child(5) {
    opacity: 1 !important;
  }
  .ablauf-stage .plan-blatt__head::after {
    display: none;
  }
}

@media (max-width: 900px) {
  .hero__pin {
    padding-top: calc(var(--header-safe) + 0.5rem);
    height: auto;
    min-height: 100svh;
  }
  .sheet {
    grid-template-columns: minmax(0, 1fr);
  }
  .outro {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }
  .blatt {
    padding: 2.6rem 2rem 2.8rem;
  }
  .beweis__kopf,
  .beweis__spalten,
  .facts--band,
  .behalten,
  .gruender__duo,
  .pilot {
    grid-template-columns: minmax(0, 1fr);
  }
  .beweis__kopf {
    gap: 2rem;
    align-items: start;
  }
  .facts--band {
    gap: 1.4rem;
  }
  .facts--band .facts__item + .facts__item {
    border-top: var(--hairline);
    padding-top: 1.2rem;
  }
  .vermerk__tab {
    left: 1.2rem;
    right: 1.2rem;
    white-space: normal;
  }
  .gruender__pin {
    position: static;
    height: auto;
  }
  .gruender__field {
    height: auto;
    padding-block: 6rem;
  }
  .spacer--gruender {
    display: none;
  }
  .deck,
  .kontakt__people {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
  .card--a,
  .card--b,
  .card--c {
    transform: none;
  }
  .site-footer__cols {
    gap: 3rem;
  }
}

@media (max-width: 760px) {
  /* Eine schmale Zeile: Brand + Burger. Nav + CTA klappen als Papier-Panel
     ABSOLUT unter der Leiste auf — absolut, damit booklet.js weiterhin nur
     die schmale Leistenhöhe nach --header-measured misst (kein Springen von
     --header-safe beim Öffnen). */
  .site-header__bar {
    padding: 0.2rem 0.3rem 0.2rem 1rem;
    gap: 0.8rem;
    min-height: 0;
  }
  .site-header__cta {
    display: none;
  }
  .menu-toggle {
    display: block;
    margin-left: auto;
  }
  .site-nav {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    margin-left: 0;
    background: var(--color-paper);
    border: var(--hairline);
    box-shadow: var(--shadow-card);
    padding: 0.4rem 0.4rem 1rem;
    opacity: 0;
    transform: translateY(-0.5rem);
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s var(--ease-out-strong), transform 0.2s var(--ease-out-strong),
      visibility 0s linear 0.2s;
  }
  .site-header.menu-open .site-nav {
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s, 0s, 0s;
  }
  .site-nav__list {
    display: block;
  }
  .site-nav__list li + li {
    border-top: var(--hairline);
  }
  .site-nav__list .roll {
    display: block;
    font-size: 14px;
    padding: 0.9rem 0.8rem;
    min-height: 44px;
  }
  .site-nav__cta {
    display: inline-flex;
    margin: 0.8rem 0.4rem 0;
    width: calc(100% - 0.8rem);
    min-height: 44px;
  }
}

@media (max-width: 700px) {
  /* Die Flanken verlassen die absolute Position — sonst liegen sie unter dem
     mehrzeilig gewordenen Header. Der Wrapper wird zur gemeinsamen Zeile. */
  .hero__flanks {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.6rem 1.6rem;
    margin-bottom: 1.6rem;
  }
  .hero__flank {
    position: static;
    font-size: max(14px, 1.2rem);
  }
  .hero__stage {
    margin-top: 0; /* die Flanken stehen hier im Fluss darüber */
  }
  /* Zwei Headline-Zeilen brechen hier zu vieren — der Tag/Nacht-Split läuft
     deshalb untereinander: Tag oben, Nacht unten, die Chronologie bleibt. */
  .hero-split {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }
  .hero-split__blatt {
    width: 5.2rem;
    height: 6.8rem;
  }
  .hero-split__blatt:nth-child(2) {
    left: 3rem;
    top: 1.4rem;
  }
  .hero-split__blatt:nth-child(3) {
    left: 6rem;
    top: 2.8rem;
  }
}

@media (max-width: 600px) {
  :root {
    --frame-side: 1.2rem;
  }
  /* Beide Flanken bleiben — sie bilden zusammen einen Satz („pädagogische
     tage / enden als to-do-liste"). Bei Platzmangel bricht die Zeile um. */
  .hero__title {
    font-size: min(3.8rem, 7.4vw);
  }
  .hero__sub,
  .body {
    font-size: 1.5rem;
  }
  .stage-karte__title,
  .sheet__title,
  .gruender__title,
  .kontakt__title {
    font-size: min(3.2rem, 7.7vw);
  }
  .section,
  .kontakt {
    padding-block: 5rem;
  }
  .paper-card,
  .folder,
  .blatt {
    padding: 2rem 1.6rem 2.2rem;
  }
  .card,
  .person {
    padding: 2rem 1.6rem 2.4rem;
  }
  .gruender__field {
    padding-block: 5rem;
  }
  .site-footer {
    padding-top: 5rem;
  }
  .site-footer__cols {
    gap: 2.4rem;
  }
  .wordmark {
    margin-top: 4rem;
  }
}

/* ================================================ 19 · REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .split .char,
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Reduced Motion: die Stage löst sich auf — Karten stehen untereinander, das
   Blatt zeigt statisch den Endzustand (booklet.js setzt data-schritt="5").
   Inhalte bleiben vollständig, nur die Choreografie entfällt. */
@media (prefers-reduced-motion: reduce) {
  .ablauf-stage {
    height: auto;
  }
  .ablauf-stage__pin {
    position: static;
    height: auto;
    display: block;
  }
  .ablauf-stage__karten {
    display: block;
  }
  .stage-karte {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  .stage-karte + .stage-karte {
    margin-top: 2.4rem;
  }
  .ablauf-stage__blatt {
    margin-top: 2.4rem;
    height: 32rem;
  }
  .plan-zelle {
    opacity: 1 !important;
    transform: none !important;
  }
  .ablauf-stage__marker-bahn {
    position: static;
    height: 0;
  }
  .stage-marker {
    position: static;
    display: block;
    height: 0;
  }
}

html.reduced-motion .split .char,
html.reduced-motion .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
html.reduced-motion .ablauf-stage {
  height: auto;
}
html.reduced-motion .ablauf-stage__pin {
  position: static;
  height: auto;
  display: block;
}
html.reduced-motion .ablauf-stage__karten {
  display: block;
}
html.reduced-motion .stage-karte {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  transition: none !important;
}
html.reduced-motion .stage-karte + .stage-karte {
  margin-top: 2.4rem;
}
html.reduced-motion .ablauf-stage__blatt {
  margin-top: 2.4rem;
  height: 32rem;
}
html.reduced-motion .plan-zelle,
html.reduced-motion .plan-zelle::before,
html.reduced-motion .plan-zelle::after {
  transition: none !important;
}
html.reduced-motion .plan-zelle {
  opacity: 1 !important;
  transform: none !important;
}
html.reduced-motion .hero-split__blatt {
  opacity: 1 !important;
  transform: rotate(var(--rot, 0deg)) !important;
  transition: none !important;
}
html.reduced-motion .ablauf-stage__marker-bahn {
  position: static;
  height: 0;
}
html.reduced-motion .stage-marker {
  position: static;
  display: block;
  height: 0;
}
html.reduced-motion .roll__a,
html.reduced-motion .roll__b,
html.reduced-motion .card {
  transition: none !important;
}
html.reduced-motion .roll:hover .roll__a {
  transform: none;
}
html.reduced-motion .roll:hover .roll__b {
  transform: translateY(100%);
}

/* ===================================================== 20 · DRUCK (PDF) */
/* Felix reicht das vermutlich als PDF weiter — der Lenis-Wrapper und die
   fixed Layer müssen dafür aufgelöst werden, sonst druckt nur ein Viewport. */

@media print {
  html,
  body {
    overflow: visible !important;
    height: auto !important;
    background: #fff !important;
  }
  .frame,
  .desk,
  .grain,
  .progress,
  .site-header,
  .skip-link,
  .hero__flank {
    display: none !important;
  }
  .scroll-wrapper {
    height: auto !important;
    overflow: visible !important;
  }
  .hero__pin,
  .ablauf-stage__pin,
  .gruender__pin {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: block !important;
  }
  .spacer {
    display: none !important;
  }
  /* Stage druckt als Sequenz: fünf Karten, danach EIN Blatt im Endzustand —
     unabhängig vom Live-data-schritt (Bänder hängen an den Zellen selbst). */
  .ablauf-stage {
    height: auto !important;
  }
  .ablauf-stage__karten {
    display: block !important;
  }
  .stage-karte {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    break-inside: avoid;
  }
  .stage-karte + .stage-karte {
    margin-top: 1rem;
  }
  .ablauf-stage__blatt {
    margin-top: 1.5rem;
    max-width: 70%;
    height: 30rem;
    break-inside: avoid;
  }
  .ablauf-stage__marker-bahn {
    display: none !important;
  }
  .split .char,
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  /* Indigo-Flächen drucken viele Browser nicht — heller Rückfall, damit die
     Beschriftung lesbar bleibt. */
  .plan-blatt,
  .hero-split__half--nacht {
    background: #fff !important;
  }
  .plan-blatt__head,
  .plan-blatt__schritt b,
  .plan-blatt__legende,
  .plan-blatt__foot,
  .hero-split__half--nacht .hero-split__label,
  .hero-split__half--nacht .hero-split__foot {
    color: #414141 !important;
    opacity: 1 !important;
  }
  .plan-blatt__head {
    border-bottom-color: rgba(66, 66, 66, 0.3) !important;
  }
  .plan-blatt__head::after {
    display: none !important;
  }
  /* Der Live-Zählerstand („Schritt N / 5") gehört zur Scroll-Choreografie —
     im Druck stünde er sonst neben dem fest verdrahteten Endzustand
     (Code-Review-Befund 3). */
  .plan-blatt__schritt {
    display: none !important;
  }
  .plan-blatt__labels span {
    opacity: 0 !important;
  }
  .plan-blatt__labels span:nth-child(5) {
    opacity: 1 !important;
  }
  .plan-blatt__stamp {
    opacity: 1 !important;
    transform: rotate(-4deg) !important;
    color: #414141 !important;
    border-color: #414141 !important;
    outline-color: #414141 !important;
  }
  .plan-zelle {
    opacity: 1 !important;
    transform: none !important;
    border: 1px solid rgba(66, 66, 66, 0.35) !important;
  }
  .plan-zelle::before {
    display: none !important;
  }
  /* Print-Stufen-Rampe auf Weiß (kippt hell→dunkel, Audit-Auflage: die
     Regel-Fläche allein läge bei 2,48:1 — der Ink-Zellrahmen + die Nachbar-
     Texturen tragen die Unterscheidung mit): Mindest = Schraffur #5a64a8,
     Regel = #9aa3c9, Experten = #5a64a8-Vollton, Stops in Ink. */
  .plan-zelle::after {
    opacity: 1 !important;
    clip-path: inset(0) !important;
    background-image: repeating-linear-gradient(
        45deg,
        #5a64a8 0 1.5px,
        transparent 1.5px 7px
      ),
      linear-gradient(
        to top,
        #fff 0 calc(33.3% - 1px),
        #414141 calc(33.3% - 1px) 33.3%,
        #9aa3c9 33.3% calc(66.6% - 1px),
        #414141 calc(66.6% - 1px) 66.6%,
        #5a64a8 66.6% 100%
      ) !important;
    background-size: 100% 33.3%, 100% 100% !important;
    background-position: left bottom, center !important;
    background-repeat: no-repeat !important;
  }
  .plan-zelle[data-s3="drop"]::after {
    opacity: 0 !important;
  }
  .raster__swatch {
    border-color: rgba(66, 66, 66, 0.35) !important;
  }
  .raster__swatch--1 {
    background-image: repeating-linear-gradient(
      45deg,
      #5a64a8 0 1.5px,
      transparent 1.5px 5px
    ) !important;
  }
  .raster__swatch--2 {
    background: #9aa3c9 !important;
  }
  .raster__swatch--3 {
    background: #5a64a8 !important;
    box-shadow: inset 0 0 0 1px #414141 !important;
  }
  .hero-split {
    max-width: 80%;
    margin-top: 1.5rem;
  }
  .hero-split__blatt {
    opacity: 1 !important;
    transform: rotate(var(--rot, 0deg)) !important;
  }
  .beweis__render,
  .idee__render {
    break-inside: avoid;
  }
  .beweis__render img,
  .idee__render img {
    box-shadow: none !important;
  }
  .paper-card,
  .blatt,
  .folder,
  .card {
    box-shadow: none !important;
    break-inside: avoid;
  }
  .person-card__foto,
  .pilot__vermerk {
    background: #fff !important;
    border-color: rgba(66, 66, 66, 0.35) !important;
  }
  .pilot__vermerk-head,
  .pilot__vermerk-list {
    color: #414141 !important;
  }
  .card--a,
  .card--b,
  .card--c {
    transform: none !important;
  }
  section,
  .section,
  .kontakt {
    break-inside: avoid;
    padding: 1.5cm 0 !important;
    background: #fff !important;
  }
  .gruender__field,
  .site-footer {
    background: #fff !important;
    color: #000 !important;
  }
  .gruender__title,
  .site-footer__claim,
  .site-footer__col a,
  .wordmark {
    color: #000 !important;
  }
  .fragen__item {
    display: block;
  }
  .fragen__a {
    display: block !important;
  }
}