/* ==========================================================================
   Notizbuch · digital bohemian · Mathias Ziehengraser
   Papier, Karo, Klebeband, Filzstift. Bewegung liegt als Schicht darüber.
   Runde 3: Mathias ist die Bühne, der Stift ist die Figur, jede Station hat ihren eigenen Moment.
   ========================================================================== */

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url(../fonts/caveat-latin-ext-wght-normal.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: 'Caveat';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url(../fonts/caveat-latin-wght-normal.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;
}

:root {
  /* Grundwerte kommen aus dem Designsystem (designsystem/tokens.css, vom Build nach /assets/css/tokens.css kopiert
     und vor dieser Datei geladen). Hier stehen nur noch die kurzen Namen, die die Startseite benutzt. */
  --papier: var(--db-papier);
  --papier-hell: var(--db-papier-hell);
  --tinte: var(--db-tinte);
  --blei: var(--db-blei);
  --kuli: var(--db-kuli);
  --filz: var(--db-filz);
  --filz-hell: var(--db-filz-hell);
  --filz-text: var(--db-filz-text);
  --gelb: var(--db-gelb);
  --rosa: var(--db-rosa);
  --gruen: var(--db-gruen);
  --tisch: var(--db-tisch);
  --nacht: var(--db-nacht);
  --nacht-text: var(--db-nacht-text);
  --nacht-kuli: var(--db-nacht-kuli);
  --karo: var(--db-karo);                  /* Karo laut, Bühnen */
  --rand-farbe: var(--db-rand);

  --hand: var(--db-schrift-hand);
  --serif: var(--db-schrift-serif);
  --text: var(--db-schrift-text);

  /* Heftrand der Bühnen: 26/64/112 px, Stufen bei 760 und 1100 px schaltet tokens.css */
  --rand-x: var(--db-rand-x-buehne);
  --inhalt-l: var(--db-innen-l-buehne);
  --inhalt-r: var(--db-innen-r-buehne);
  --karo-groesse: var(--db-karo-groesse);
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--tisch);
  background-image: url(../img/papierkorn.webp);
  background-size: 256px 256px;
  color: var(--tinte);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.58;
  font-optical-sizing: auto;
  overflow-x: clip;
}
@media (min-width: 760px) { body { font-size: 18px; } }
img, svg { max-width: 100%; }
img { height: auto; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; }
a { color: var(--kuli); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2.5px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--kuli); outline-offset: 4px; border-radius: 3px; }
.fuss :focus-visible, .station--nacht :focus-visible { outline-color: var(--gelb); }

.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprung {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--gelb); color: var(--tinte); padding: 10px 14px; font-weight: 700;
}
.sprung:focus { top: 12px; }
.hand { font-family: var(--hand); font-weight: 500; letter-spacing: 0.005em; }
.nur-ruhig { display: none; }
.bewegung-aus .nur-ruhig { display: inline; }
.halo { position: relative; z-index: 2; text-shadow: 0 0 2px var(--papier), 0 0 3px var(--papier), 0 0 5px var(--papier), 0 0 8px var(--papier); }

/* ---------- Tisch und Papier ---------- */
.tisch { position: relative; max-width: 1320px; margin: 0 auto; padding-top: 16px; overflow-x: clip; }
@media (min-width: 1100px) { .tisch { padding-top: 26px; } }

.seite, .block {
  position: relative;
  background-color: var(--papier);
  background-image:
    url(../img/papierkorn.webp),
    linear-gradient(var(--karo) 1px, transparent 1px),
    linear-gradient(90deg, var(--karo) 1px, transparent 1px);
  background-size: 256px 256px, var(--karo-groesse) var(--karo-groesse), var(--karo-groesse) var(--karo-groesse);
  background-position: 0 0, -1px -1px, -1px -1px;
}
@media (min-width: 1100px) {
  .seite, .block { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 30px 60px -20px rgba(0, 0, 0, 0.6); }
}
.papier-rand::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: var(--rand-x); width: 2px;
  background: var(--rand-farbe); pointer-events: none;
}
.spirale {
  position: absolute; left: 0; right: 0; top: -14px; height: 40px; z-index: 25; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='40' viewBox='0 0 30 40'%3E%3Cellipse cx='15' cy='30' rx='4.6' ry='4.2' fill='%231C1A17'/%3E%3Cpath d='M11.5 30 C 10 10, 20 4, 19.5 30' fill='none' stroke='%237d7871' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M12.6 24 C 12.4 12, 17 8, 18 14' fill='none' stroke='%23d9d4cb' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-position: 6px 0;
}
@media (min-width: 760px) { .spirale { background-size: 34px 44px; height: 44px; top: -18px; } }

/* ---------- Der Filzstift (feste Figur über allem Papier) ---------- */
.stift {
  position: fixed; left: 0; top: 0; z-index: 70;
  width: 26px; height: 100px;
  pointer-events: none; opacity: 0;
  transform-origin: 13px 99px;
  will-change: transform;
}
.stift__svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(3px 4px 0 rgba(21, 23, 31, 0.18)); }
@media (min-width: 760px) { .stift { width: 32px; height: 124px; transform-origin: 16px 123px; } }
.stift.stift--unter { z-index: 2; }
.bewegung-aus .stift { display: none; }
.stift-ruhig { display: none; }

/* ---------- Kopf ---------- */
.kopf {
  position: absolute; top: 34px; left: 0; right: 0; z-index: 30;
  /* Container: Die Logobreite rechnet mit der Breite des Kopfs (cqw), nicht mit 100vw samt Scrollleiste.
     Mit 100vw war das Logo in schmalen Desktop-Fenstern um die Scrollleiste zu breit und der Kopf brach um. */
  container-type: inline-size;
  display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 12px;
  --kopf-pl: 20px; padding: 0 var(--inhalt-r) 0 var(--kopf-pl);
}
@media (min-width: 760px) { .kopf { top: 50px; --kopf-pl: 48px; } }
/* Kopf kommt ab dem zweiten Bildschirm beim Hochscrollen zurueck, wie auf den Unterseiten (kopf.js) */
.js .kopf.ist-fix {
  position: fixed; top: 0; z-index: var(--db-ebene-kopf-fix); max-width: 1320px; margin: 0 auto;
  padding-top: 12px; padding-bottom: 10px; align-items: center;
  background-color: var(--papier);
  background-image: url(../img/papierkorn.webp), linear-gradient(var(--karo) 1px, transparent 1px), linear-gradient(90deg, var(--karo) 1px, transparent 1px);
  background-size: 256px 256px, var(--karo-groesse) var(--karo-groesse), var(--karo-groesse) var(--karo-groesse);
  border-bottom: 2px dashed var(--db-linie); box-shadow: 0 10px 22px -14px rgba(0, 0, 0, 0.55);
  translate: 0 -115%; opacity: 0;
}
/* Kommen und Gehen gleiten weich (Werkzeug, keine Zeichnung): Ausnahme von steps(), siehe designsystem/BEWEGUNG.md */
.js .kopf.ist-fix.ist-bereit { transition: translate var(--db-dauer-gleiten) var(--db-kurve-gleiten), opacity var(--db-dauer-blenden) ease; }
.js .kopf.ist-fix.ist-sichtbar { translate: 0 0; opacity: 1; }
/* zurück ganz oben: der Kopf blendet an seinem eigenen Platz wieder ein, statt zu springen (kopf.js) */
.js .kopf.ist-landend { animation: kopf-landen var(--db-dauer-gleiten) var(--db-kurve-gleiten) both; }
@keyframes kopf-landen { from { opacity: 0; translate: 0 -10px; } }
.js .kopf.ist-fix .kopf__logo { margin-block: 0; }
.js .kopf.ist-fix .kopf__notiz { display: none; }
@media (prefers-reduced-motion: reduce) { .js .kopf.ist-fix.ist-bereit { transition: none; } .js .kopf.ist-landend { animation: none; } }
.bewegung-aus .kopf.ist-landend { animation: none; }
/* Bewegung pausiert: Kopf und Leiste blenden nur noch, ohne zu gleiten */
.bewegung-aus .kopf.ist-fix.ist-bereit { transition: opacity var(--db-dauer-blenden) ease; }
.bewegung-aus .kopf.ist-fix:not(.ist-sichtbar) { visibility: hidden; transition: opacity var(--db-dauer-blenden) ease, visibility 0s var(--db-dauer-blenden); }
/* Logo: Grafik --lw breit (Höhe 0,193 × Breite), Tippfläche per Innenabstand mindestens 44 px hoch.
   Der Logo-Punkt sitzt dann um --lp tiefer (Lage im viewBox: 28,82 % der Grafikhöhe = 0,0557 × Breite). */
.kopf__logo {
  /* wie --db-logo-breite-schmal, aber cqw misst hier ohne Innenabstand des Kopfs: den rechnen wir dazu, damit Kopf und Fuß gleich groß sind */
  --lw: clamp(140px, calc(100cqw + var(--kopf-pl) + var(--inhalt-r) - 180px), 230px); --lp: max(0px, calc((44px - var(--lw) * 0.19316) / 2)); --lo: 12px;
  display: block; width: var(--lw); padding-block: var(--lp); margin-block: calc(var(--lo) - var(--lp)) calc(-1 * var(--lp));
  line-height: 0; border-radius: 4px; flex: none;
}
.kopf__logo .logo-punkt { top: calc(var(--lp) + var(--lw) * 0.05567); }
/* Logo in Kopf und Fuß immer gleich groß: unter 760 px --db-logo-breite-schmal, darüber 191 px (Punkt bleibt 9 px) */
@media (min-width: 760px) { .kopf__logo { --lw: var(--logo-breite); --lo: 8px; } }
/* Pause und Menü auf die Mitte des Schriftzugs (das Logo sitzt um --lo tiefer), im festen Kopf ist alles mittig */
.kopf { --ko: 10px; }
@media (min-width: 760px) { .kopf { --ko: 4px; } }
.kopf:not(.ist-fix) .kopf__pause, .kopf:not(.ist-fix) > .menue-knopf { margin-top: var(--ko); }
.logo { width: 100%; height: auto; overflow: visible; }
/* Navigation in einer Zeile erst ab 1280 px (Startseite und Unterseiten gleich), darunter der Menü-Knopf.
   Menüpunkte brechen nie um: Lieber früher einklappen als zweizeilige Einträge oder einen abgeschnittenen Pausenknopf. */
.kopf__nav { display: none; align-items: center; gap: 16px; margin-left: auto; }
@media (min-width: 1280px) { .kopf__nav { display: flex; } .kopf { gap: 10px; } }
@media (min-width: 1440px) { .kopf__nav { gap: 20px; } }
/* Menü (nur mit JavaScript, unter 1280 px): klappt die Navigation als Zettel unter dem Kopf auf */
.menue-knopf { display: none; }
@media (max-width: 1279px) {
  .js .menue-knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; min-width: 44px; padding: 6px 8px; margin-left: 4px;
    font: 600 23px/1 var(--hand); color: var(--tinte); background: none; border: 0; cursor: pointer; border-radius: 8px; flex: none;
  }
  .menue-knopf__icon { width: 26px; height: 20px; overflow: visible; }
  .menue-knopf__icon path { fill: none; stroke: var(--tinte); stroke-width: 2.6; stroke-linecap: round; }
  .menue-knopf[aria-expanded='true'] .menue-knopf__icon path:nth-child(1) { d: path('M4 3 C 10 8, 16 13, 23 19'); }
  .menue-knopf[aria-expanded='true'] .menue-knopf__icon path:nth-child(2) { opacity: 0; }
  .menue-knopf[aria-expanded='true'] .menue-knopf__icon path:nth-child(3) { d: path('M4 19 C 10 13, 17 8, 24 3'); }
  .kopf__nav.ist-offen {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0;
    position: absolute; right: var(--inhalt-r); top: 58px; z-index: 40; min-width: 230px; padding: 14px 20px 18px;
    background: var(--papier-hell); border: 2.5px solid var(--tinte); border-radius: 12px 9px 13px 8px; box-shadow: 4px 5px 0 var(--tinte); rotate: 0.6deg;
  }
  .kopf__nav.ist-offen .kopf__link { font-size: 30px; padding: 4px 2px; }
  .kopf__nav.ist-offen .kopf__cta { margin-top: 12px; }
}
@media (min-width: 760px) and (max-width: 1279px) { .kopf__nav.ist-offen { top: 66px; } }
/* schmal: Menü nur als Zeichen (der Name „Menü“ bleibt für Screenreader), damit das Logo groß sein kann */
@media (max-width: 599px) {
  .kopf { gap: 6px; --kopf-pl: 16px; }
}
/* „Menü“ steht auf jeder Breite neben dem Zeichen (Wunsch Mathias, auch für Barrierefreiheit). Schmal enger. */
@media (max-width: 459px) { .js .kopf .menue-knopf { padding: 6px 4px 6px 6px; gap: 5px; font-size: 21px; } }
.kopf__link {
  font-family: var(--hand); font-size: 25px; font-weight: 600; color: var(--tinte); text-decoration: none; padding: 6px 2px; white-space: nowrap;
}
.kopf__link:hover { text-decoration: underline; text-decoration-color: var(--filz); text-decoration-thickness: 2.5px; }
.kopf__cta { white-space: nowrap; }
.kopf__pause { position: relative; margin-left: auto; flex: none; }
@media (min-width: 1280px) { .kopf__pause { margin-left: 4px; } }
/* Notiz zum Pausenknopf: erst ab 1280 px, wo die Navigation in einer Zeile steht und der Pausenknopf ganz rechts sitzt.
   Darunter steht der Menü-Knopf rechts daneben, der Pausenknopf rückt nach links und die Notiz läge auf dem Porträt.
   Die Papier-Unterlage (wie .halo) hält den Text lesbar, falls das Porträt doch heranreicht. */
.kopf__notiz { display: none; }
@media (min-width: 1280px) {
  .kopf__notiz {
    display: block; position: absolute; right: 4px; top: 56px; width: 236px; margin: 0;
    font-size: 19px; line-height: 1.1; font-weight: 600; color: var(--kuli); text-align: right; rotate: -2deg;
    text-shadow: 0 0 2px var(--papier), 0 0 3px var(--papier), 0 0 5px var(--papier), 0 0 8px var(--papier);
  }
  .kopf:has(.kopf__nav.ist-offen) .kopf__notiz { display: none; }
  .kopf__notiz::before {
    content: ''; position: absolute; right: 18px; top: -14px; width: 2px; height: 12px; background: var(--kuli); rotate: 20deg;
  }
}

/* ---------- Knöpfe ---------- */
.knopf {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 12px 24px 13px;
  background: var(--filz); color: var(--tinte);
  font-family: var(--text); font-weight: 800; font-size: 17px; line-height: 1.2; text-decoration: none;
  border: 2.5px solid var(--tinte);
  border-radius: 14px 10px 16px 9px / 10px 15px 9px 14px;
  box-shadow: 4px 5px 0 var(--tinte); rotate: -1deg;
  transition: translate var(--db-dauer-druck) var(--db-stufen-2), box-shadow var(--db-dauer-druck) var(--db-stufen-2), rotate var(--db-dauer-drehung) var(--db-stufen-3);
}
.knopf:hover { translate: -2px -2px; box-shadow: 6px 7px 0 var(--tinte); rotate: 0.5deg; text-decoration: none; }
.knopf:active { translate: 3px 4px; box-shadow: 1px 1px 0 var(--tinte); }
.knopf--klein { min-height: 44px; padding: 8px 16px 9px; font-size: 15px; box-shadow: 3px 4px 0 var(--tinte); }
.knopf--gross { min-height: 62px; padding: 16px 32px; font-size: 19px; }
.link-hand {
  font-family: var(--hand); font-size: 25px; font-weight: 600; color: var(--kuli);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
  display: inline-block; padding: 6px 0; min-height: 44px;
}

/* ---------- Schalter Bewegung ----------
   Zeichen und Text zeigen, was ein Tipp tut: Pause-Zeichen und „Bewegung pausieren“, solange sich etwas bewegt,
   Play-Zeichen und „Bewegung abspielen“, wenn die Bewegung aus ist (gelb). Den Zustand trägt html.bewegung-aus,
   gesetzt vor dem ersten Bild (vorab.js). Der jeweils andere Text ist ausgeblendet und damit auch nicht Teil des Namens. */
.bewegung-knopf {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 8px 14px 8px 11px;
  font: 700 15px/1.1 var(--text); color: var(--tinte);
  background: var(--papier-hell);
  border: 2.5px solid var(--tinte); border-radius: 12px 9px 13px 8px;
  box-shadow: 3px 3px 0 var(--tinte);
  cursor: pointer; white-space: nowrap;
}
.bewegung-knopf:hover { background: var(--gelb); }
.bewegung-aus .bewegung-knopf { background: var(--gelb); box-shadow: 1px 1px 0 var(--tinte); translate: 2px 2px; }
.bewegung-aus .bewegung-knopf__an, html:not(.bewegung-aus) .bewegung-knopf__aus { display: none; }
.bewegung-knopf__icon { position: relative; width: 14px; height: 16px; flex: none; }
.bewegung-knopf__icon::before, .bewegung-knopf__icon::after { content: ''; position: absolute; top: 0; width: 4.5px; height: 16px; background: var(--tinte); border-radius: 1px; }
.bewegung-knopf__icon::before { left: 1px; }
.bewegung-knopf__icon::after { right: 1px; }
.bewegung-aus .bewegung-knopf__icon::before { left: 2px; width: 0; height: 0; background: none; border-left: 13px solid var(--tinte); border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-radius: 0; }
.bewegung-aus .bewegung-knopf__icon::after { display: none; }
@media (forced-colors: active) { .bewegung-knopf__icon::before, .bewegung-knopf__icon::after { forced-color-adjust: none; background: ButtonText; } .bewegung-aus .bewegung-knopf__icon::before { background: none; border-left-color: ButtonText; } }
/* Im Kopf nur das Zeichen (Pause oder Play), quadratisch 44 px. Der Text bleibt der Name für Screenreader,
   mit Maus oder Tastatur steht er als Zettel darunter (alt-Text der Pseudo-Inhalte leer, damit er nicht doppelt vorgelesen wird). */
.bewegung-knopf--kopf { position: relative; justify-content: center; width: 44px; height: 44px; min-width: 44px; padding: 0; gap: 0; }
.bewegung-knopf--kopf .bewegung-knopf__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bewegung-knopf--kopf::after {
  content: 'Bewegung pausieren' / ''; position: absolute; top: calc(100% + 8px); right: -6px; z-index: 2;
  padding: 5px 9px; font: 700 13px/1.1 var(--text); white-space: nowrap; color: var(--tinte);
  background: var(--papier-hell); border: 2px solid var(--tinte); border-radius: 8px 6px 9px 6px; box-shadow: 2px 2px 0 var(--tinte);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--db-dauer-reiter) ease, visibility 0s var(--db-dauer-reiter);
}
.bewegung-aus .bewegung-knopf--kopf::after { content: 'Bewegung abspielen' / ''; }
@media (hover: hover) { .bewegung-knopf--kopf:hover::after { opacity: 1; visibility: visible; transition-delay: 0.3s, 0.3s; } }
.bewegung-knopf--kopf:focus-visible::after { opacity: 1; visibility: visible; transition-delay: 0s; }
/* Zettel nicht über der Notiz zum Pausenknopf */
.kopf:not(.ist-fix) .bewegung-knopf--kopf::after { right: auto; left: -6px; }
@media (min-width: 1280px) { .kopf:not(.ist-fix) .bewegung-knopf--kopf::after { display: none; } }

/* ---------- Register ----------
   Desktop: Reiter am rechten Heftrand (fest, mittig).
   Mobil und Tablet (bis 1099 px): feste Leiste am unteren Bildschirmrand, im Daumenbereich und nie im Weg
   der Kopfzeile oben. Sie zeigt die aktuelle Station („7/10 zäh“), ein Tipp klappt die Liste aller Stationen
   als Zettel über der Leiste auf (notizbuch.js, registerMobil). Rechts daneben die Abkürzung zum Erstgespräch. */
.leiste__punkt { width: var(--punkt-groesse); height: var(--punkt-groesse); border-radius: 50%; background: var(--filz); flex: none; }
.laune-stempel {
  display: inline-block; font: 800 12px/1 var(--text); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--filz-text); border: 2px solid currentColor; border-radius: 4px; padding: 4px 6px 3px; rotate: -4deg;
  background: rgba(255, 253, 247, 0.9);
}
.register { display: none; }
.register__knopf, .register__cta, .register__titel { display: none; }

@media (max-width: 1099px) {
  :root { --leiste-h: 64px; }
  .js .register {
    display: flex; align-items: center; gap: 10px;
    position: fixed; z-index: 85; left: 0; right: 0; bottom: 0;
    padding: 7px max(12px, env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    background-color: var(--papier);
    background-image: url(../img/papierkorn.webp), linear-gradient(var(--karo) 1px, transparent 1px), linear-gradient(90deg, var(--karo) 1px, transparent 1px);
    background-size: 256px 256px, var(--karo-groesse) var(--karo-groesse), var(--karo-groesse) var(--karo-groesse);
    border-top: 2px dashed var(--db-linie); box-shadow: 0 -10px 22px -14px rgba(0, 0, 0, 0.55);
    translate: 0 calc(100% + 16px); opacity: 0; visibility: hidden;
    transition: translate var(--db-dauer-gleiten) var(--db-kurve-gleiten), opacity var(--db-dauer-blenden) ease, visibility 0s var(--db-dauer-gleiten);
  }
  .js .register.da { translate: 0 0; opacity: 1; visibility: visible; transition: translate var(--db-dauer-gleiten) var(--db-kurve-gleiten), opacity var(--db-dauer-blenden) ease, visibility 0s; }
  .register__knopf {
    display: inline-flex; align-items: center; gap: 8px; min-height: 48px; min-width: 48px; padding: 4px 12px 4px 10px;
    font: inherit; color: var(--tinte); cursor: pointer;
    background: var(--papier-hell); border: 2.5px solid var(--tinte); border-radius: 12px 9px 13px 8px;
    box-shadow: 3px 3px 0 var(--tinte);
  }
  .register__knopf:hover, .register__knopf[aria-expanded='true'] { background: var(--gelb); }
  .register__knopf[aria-expanded='true'] { box-shadow: 1px 1px 0 var(--tinte); translate: 2px 2px; }
  .register__stand { font-size: 24px; font-weight: 700; line-height: 1; white-space: nowrap; }
  .register__pfeil { width: 18px; height: 13px; flex: none; overflow: visible; }
  .register__pfeil path { fill: none; stroke: var(--tinte); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  .register__knopf[aria-expanded='true'] .register__pfeil { rotate: 180deg; }
  .register__cta {
    display: inline-flex; align-items: center; min-height: 48px; padding: 6px 14px; margin-left: auto;
    font: 800 15px/1.1 var(--text); color: var(--tinte); text-decoration: none; white-space: nowrap;
    background: var(--filz); border: 2.5px solid var(--tinte); border-radius: 10px 8px 11px 7px; box-shadow: 3px 3px 0 var(--tinte);
  }
  .register__cta:hover { background: var(--filz-hell); }

  /* aufgeklappt: Zettel über der Leiste */
  .register__inhalt {
    display: none; position: absolute; left: max(10px, env(safe-area-inset-left)); bottom: calc(100% + 10px);
    width: min(calc(100vw - 20px), 520px); max-height: calc(100svh - var(--leiste-h) - 96px); overflow-y: auto; overscroll-behavior: contain;
    padding: 14px 14px 16px;
    background: var(--papier-hell); border: 2.5px solid var(--tinte); border-radius: 12px 9px 13px 8px; box-shadow: 4px 5px 0 var(--tinte);
  }
  .register.ist-offen .register__inhalt { display: grid; grid-template-columns: auto auto; justify-content: space-between; align-items: center; column-gap: 12px; }
  .register__inhalt > * { grid-column: 1 / -1; }
  .register__laune { display: none; }
  .register__titel { display: block; margin: 0 0 8px 4px; font-size: 24px; font-weight: 700; line-height: 1.05; color: var(--kuli); rotate: -1.5deg; }
  .register__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; gap: 4px 10px; }
  .register__reiter {
    display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 4px 8px 4px 4px;
    font: 600 15px/1.15 var(--text); color: var(--tinte); text-decoration: none; border-radius: 8px;
  }
  .register__reiter:hover { background: var(--gelb); }
  .register__nr {
    flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px;
    font: 700 23px/1 var(--hand); border: 2px solid var(--tinte); border-radius: 50% 46% 52% 48%; background: var(--papier);
  }
  .register__reiter.erledigt { color: var(--blei); }
  .register__reiter.erledigt .register__nr { background: var(--db-station-erledigt); border-color: var(--db-metall); }
  .register__reiter[aria-current='step'] { background: rgba(244, 132, 24, 0.16); font-weight: 800; }
  .register__reiter[aria-current='step'] .register__nr { background: var(--filz); border-color: var(--tinte); }
  .register__liste:not(.register__liste--wort) { padding-bottom: 10px; border-bottom: 2px dashed var(--db-linie); }
  .register__liste--wort { grid-column: 1; display: block; margin-top: 12px; }
  .register__liste--wort li:has(.register__reiter--cta) { display: none; }
  .register__reiter--wort { justify-content: flex-start; font: 700 26px/1 var(--hand); color: var(--kuli); padding: 4px 10px; }
  .register__reiter--cta { font: 800 15px/1.1 var(--text); color: var(--tinte); background: var(--filz); border: 2.5px solid var(--tinte); box-shadow: 2px 3px 0 var(--tinte); }
  .register__reiter--cta:hover { background: var(--filz-hell); }
  .bewegung-knopf--register { grid-column: 2; margin-top: 12px; white-space: normal; text-align: left; } /* schmal bricht die Beschriftung, Fälle bleibt ganz */
  /* Inhalt läuft unter der Leiste durch, Fokus und Sprungziele landen nie darunter */
  html { scroll-padding-top: 76px; scroll-padding-bottom: calc(var(--leiste-h) + env(safe-area-inset-bottom) + 12px); }
}
@media (max-width: 429px) { .register__knopf .laune-stempel { font-size: 11px; letter-spacing: 0.08em; } .register__cta { padding: 6px 12px; font-size: 14px; } }
@media (max-width: 359px) { .register__knopf .laune-stempel { display: none; } .register__liste { gap: 4px 6px; } .register__reiter:not(.register__reiter--wort) { font-size: 14px; gap: 7px; } }

/* Desktop: Register am rechten Heftrand */
@media (min-width: 1100px) {
  .register {
    display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
    position: fixed; z-index: 80; top: 50%; translate: 0 -50%;
    right: max(0px, calc((100vw - 1320px) / 2 - 42px));
    opacity: 0; visibility: hidden;
    transition: opacity var(--db-dauer-drehung) var(--db-stufen-3), visibility 0s var(--db-dauer-drehung);
  }
  .register.da { opacity: 1; visibility: visible; transition: opacity var(--db-dauer-drehung) var(--db-stufen-3), visibility 0s; }
  .register__inhalt { display: contents; }
  .register__name { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .register__laune { margin: 0 0 4px; }
  .register__laune .laune-stempel { writing-mode: vertical-rl; rotate: 180deg; padding: 8px 4px; font-size: 12px; translate: 6px 0; }
  .register__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
  .register__reiter {
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 32px;
    font: 800 14px/1 var(--text); color: var(--tinte); text-decoration: none;
    background: var(--papier-hell);
    border: 2px solid var(--tinte); border-left-width: 0; border-radius: 0 10px 10px 0;
    box-shadow: 2px 2px 0 rgba(21, 23, 31, 0.6);
    transition: translate var(--db-dauer-reiter) var(--db-stufen-2), background-color var(--db-dauer-reiter) var(--db-stufen-2), width var(--db-dauer-reiter) var(--db-stufen-2);
  }
  .register__reiter:hover { background: var(--gelb); }
  .register__reiter[aria-current='step'] { background: var(--filz); width: 52px; }
  .register__reiter.erledigt { background: var(--db-station-erledigt); color: var(--blei); }
  .register__reiter[aria-current='step'].erledigt { background: var(--filz); color: var(--tinte); }
  /* Wort-Reiter unter Station 10: Abkürzung zu den Fällen und zum Erstgespräch */
  .register__liste--wort { margin-top: 6px; }
  .register__reiter--wort { writing-mode: vertical-rl; rotate: 180deg; height: auto; padding: 9px 0; font-size: 12.5px; letter-spacing: 0.02em;
    border-left-width: 2px; border-right-width: 0; border-radius: 10px 0 0 10px; box-shadow: -2px -2px 0 rgba(21, 23, 31, 0.6); }
  .register__reiter--cta { background: var(--filz); }
  .register__reiter--cta:hover { background: var(--filz-hell); }
  .bewegung-knopf--register {
    writing-mode: vertical-rl; rotate: 180deg;
    min-height: 0; padding: 12px 8px; gap: 10px;
    border-radius: 10px 0 0 10px; border-right-width: 2.5px; border-left-width: 0;
    box-shadow: -2px -2px 0 rgba(21, 23, 31, 0.6);
    font-size: 14px;
  }
  .bewegung-knopf--register .bewegung-knopf__icon { width: 16px; height: 14px; rotate: 90deg; }
}
/* niedrige Bildschirme: Register kompakter, damit Reiter, Abkürzungen und Pausenknopf ganz ins Bild passen */
@media (min-width: 1100px) and (max-height: 900px) {
  .register { gap: 8px; }
  .register__laune { display: none; }
  .register__reiter { height: 28px; }
  .register__reiter--wort { height: auto; padding: 7px 0; font-size: 12px; }
  .bewegung-knopf--register { padding: 9px 7px; gap: 8px; font-size: 12.5px; }
}
@media (min-width: 1100px) and (max-height: 760px) {
  .register__liste { gap: 2px; }
  .register__reiter { height: 25px; font-size: 13px; }
}

/* ---------- Bausteine: Marker, Klebeband, Polaroid, Zettel ---------- */
.marker {
  --m: var(--gelb);
  position: relative;
  background-image: linear-gradient(100deg, transparent 0.5%, var(--m) 2%, var(--m) 96%, transparent 99.5%);
  background-repeat: no-repeat; background-size: 100% 64%; background-position: 0 88%;
  padding: 0 0.1em; margin: 0 -0.05em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.marker--gelb { --m: var(--gelb); }
.marker--rosa { --m: var(--rosa); }
.marker--gruen { --m: var(--gruen); }
.marker--nacht { --m: var(--db-marker-nacht); }

.klebeband {
  position: absolute; z-index: 3; width: 96px; height: 28px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 6px, rgba(255, 255, 255, 0) 6px 12px), rgba(232, 214, 170, 0.8);
  clip-path: polygon(0 10%, 3% 0, 6% 12%, 9% 2%, 12% 10%, 88% 4%, 91% 14%, 94% 0, 97% 10%, 100% 4%, 100% 90%, 97% 100%, 94% 88%, 91% 98%, 88% 90%, 12% 96%, 9% 86%, 6% 100%, 3% 90%, 0 98%);
  pointer-events: none;
}
.klebeband--lo { top: -12px; left: -30px; rotate: -36deg; }
.klebeband--ro { top: -10px; right: -30px; rotate: 32deg; transform-origin: 8% 50%; }
.klebeband--mitte { top: -15px; left: calc(50% - 48px); rotate: -4deg; }
.polaroid--hero .klebeband { background: repeating-linear-gradient(90deg, rgba(255,255,255,0.18) 0 7px, rgba(255,255,255,0) 7px 14px), rgba(244, 132, 24, 0.78); }

.polaroid {
  position: relative; margin: 0; background: var(--db-karton); padding: 10px 10px 0;
  rotate: var(--dreh, 0deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 16px 30px -14px rgba(40, 25, 5, 0.5);
}
.polaroid img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--db-foto-platzhalter); }
.polaroid figcaption {
  font-family: var(--hand); font-weight: 500; color: var(--kuli);
  font-size: 21px; line-height: 1.1; padding: 9px 4px 12px; min-height: 52px;
}
.bueroklammer {
  position: absolute; right: 36%; top: -16px; width: 22px; height: 54px;
  border: 3px solid var(--db-metall); border-radius: 12px; z-index: 4;
}
.bueroklammer::after { content: ''; position: absolute; left: 3px; top: 8px; width: 10px; height: 34px; border: 3px solid var(--db-metall); border-bottom: 0; border-radius: 8px 8px 0 0; }
.bueroklammer--foto { right: auto; left: 22%; top: -26px; rotate: 8deg; }
.reisszwecke {
  position: absolute; left: calc(50% - 13px); top: -9px; width: 26px; height: 26px; z-index: 4; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, var(--db-requisit-zwecke-hell) 0 18%, var(--db-requisit-zwecke) 19% 62%, var(--db-requisit-zwecke-dunkel) 63%);
  box-shadow: 2px 4px 3px rgba(0, 0, 0, 0.3);
}

.beweis {
  position: relative; max-width: 460px; margin: 30px 0 8px; padding: 24px 22px 16px;
  background-color: var(--papier-hell);
  background-image: linear-gradient(rgba(30, 58, 138, 0.1) 1px, transparent 1px);
  background-size: 100% 26px; background-position: 0 14px;
  rotate: var(--dreh, 0deg);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08), 0 14px 26px -14px rgba(40, 25, 5, 0.45);
  color: var(--tinte);
}
.klebeband--beweis { top: -14px; left: 28px; width: 84px; rotate: -6deg; }
.beweis__stempel {
  position: absolute; top: -14px; right: 16px; margin: 0;
  font: 800 13px/1 var(--text); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--filz-text); border: 2.5px solid currentColor; border-radius: 5px;
  padding: 6px 9px 5px; background: rgba(255, 253, 247, 0.94); rotate: -7deg;
}
.beweis__zahl {
  margin: 0 0 6px; font-family: var(--hand); font-weight: 700;
  font-size: clamp(42px, 9vw, 62px); line-height: 0.95; color: var(--filz-text);
  font-variant-numeric: tabular-nums;
}
.beweis__satz { margin: 0; font-size: 16px; line-height: 1.5; color: var(--blei); }

.zitat { margin: 22px 0 6px; padding: 0 0 0 18px; border-left: 3px solid var(--filz); }
.zitat p { margin: 0; font-size: clamp(25px, 5.6vw, 31px); line-height: 1.15; font-weight: 600; color: var(--kuli); }
.zitat--gross p { font-size: clamp(28px, 6.4vw, 40px); }
.randbemerkung { font-size: 23px; line-height: 1.15; color: var(--kuli); max-width: 30ch; rotate: -1.5deg; margin: 18px 0 0; font-weight: 600; }
.pointe {
  font-family: var(--serif); font-variation-settings: 'opsz' 36, 'SOFT' 80, 'WONK' 1;
  font-style: italic; font-weight: 560; font-size: 21px; line-height: 1.3; max-width: 30em;
}
.kicker { font-size: clamp(25px, 5.4vw, 30px); line-height: 1.1; color: var(--kuli); margin: 0 0 8px; font-weight: 600; rotate: -1.5deg; transform-origin: 0 50%; }
.ueberschrift {
  font-family: var(--serif); font-variation-settings: 'opsz' 96, 'SOFT' 80, 'WONK' 1;
  font-weight: 640; font-size: clamp(36px, 8.4vw, 64px); line-height: 1.02; letter-spacing: -0.012em;
  max-width: 18ch; margin-bottom: 22px; text-wrap: balance;
}
.ueberschrift--gross { font-size: clamp(42px, 10vw, 88px); }
.rand-notiz {
  position: absolute; left: var(--rand-x); translate: -50% 0; top: 64px; margin: 0;
  font-size: 22px; font-weight: 700; color: var(--blei); white-space: nowrap;
  background: var(--papier); padding: 0 2px; z-index: 2;
}
@media (max-width: 759px) { .rand-notiz { font-size: 17px; } }
.seitenzahl { font-size: 22px; font-weight: 700; color: var(--blei); margin: 0 0 18px; }

.svg-hand { font-family: var(--hand); font-weight: 600; font-size: 30px; fill: var(--kuli); }
.svg-hand--klein { font-size: 23px; }
.svg-hand--mini { font-size: 17px; fill: var(--tinte); }
.svg-hand--gross { font-size: 44px; font-weight: 700; fill: var(--filz-text); }
.svg-hand--mond { font-size: 22px; fill: var(--nacht-kuli); }
.svg-stempel { font-family: var(--text); font-weight: 800; font-size: 28px; letter-spacing: 0.06em; fill: #C2410C; }
.svg-platzhalter { font-family: var(--text); font-weight: 700; font-size: 12px; letter-spacing: 0.04em; fill: var(--blei); }

.doodle { overflow: visible; display: block; }
.strich-tinte { fill: none; stroke: var(--tinte); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.strich-blei { fill: none; stroke: var(--db-bleistift); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.strich-filz { fill: none; stroke: var(--filz); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.strich-kuli { fill: none; stroke: var(--kuli); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.strich-papier { fill: none; stroke: rgba(255, 253, 247, 0.75); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dick { stroke-width: 3.6; }
.dicker { stroke-width: 5.5; }
.fuell-tinte { fill: var(--tinte); stroke: none; }
.fuell-filz { fill: var(--filz); stroke: none; }
.fuell-hellfilz { fill: var(--filz-hell); stroke: none; }
.fuell-gelb { fill: var(--gelb); stroke: none; }
.fuell-rosa { fill: var(--rosa); stroke: none; }
.fuell-gruen { fill: var(--gruen); stroke: none; }
.fuell-kuli { fill: var(--kuli); }
.fuell-blei { fill: rgba(74, 72, 69, 0.28); stroke: none; }
.fuell-blei-voll { fill: var(--db-bleistift); }
.fuell-papier { fill: var(--papier-hell); }
.strich-tinte.fuell-papier { fill: var(--papier-hell); }
.strich-tinte.fuell-gelb, .fuell-gelb.strich-tinte { fill: var(--gelb); stroke: var(--tinte); }
.strich-tinte.fuell-filz, .fuell-filz.strich-tinte { fill: var(--filz); stroke: var(--tinte); }
.strich-tinte.fuell-kuli { fill: var(--kuli); stroke: var(--tinte); }

/* Der rote Faden */
.faden-strich { fill: none; stroke: var(--filz); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.faden-strich--gross { stroke-width: 3.4; }
.faden-strich--rand { stroke-width: 3.6; }
.faden-strich--kordel { stroke-width: 3.2; }
.faden-strich--geist { stroke: var(--db-metall); stroke-width: 1.6; opacity: 0.45; }
.faden-notiz { font-family: var(--hand); font-weight: 700; font-size: 24px; fill: var(--filz-text); }

/* ---------- Auftakt: Titelseite ---------- */
.auftakt { position: relative; }
.seite--hero { z-index: 2; }
.hero__inhalt {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px;
  padding: 90px var(--inhalt-r) 64px 20px; min-height: 100svh;
}
.hero__text { position: relative; z-index: 3; pointer-events: none; }
.hero__text > * { pointer-events: auto; }
.hero__bild { position: relative; order: -1; min-height: 540px; z-index: 2; }

.titel { font-weight: normal; margin: 0 0 22px; }
.titel > span { display: block; }
.titel > .titel__hallo, .titel > .titel__reihenfolge { display: inline-block; }
.titel__hallo { font-size: clamp(32px, 8vw, 50px); line-height: 1; color: var(--kuli); font-weight: 600; margin-bottom: 6px; rotate: -2deg; transform-origin: 0 50%; }
.titel__rolle {
  font-family: var(--serif); font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
  font-weight: 680; font-size: clamp(42px, 11vw, 84px); line-height: 0.96; letter-spacing: -0.02em;
}
.schlag { display: inline-block; transform-origin: 50% 70%; }
.titel__anheuern { position: relative; white-space: nowrap; rotate: -1.5deg; }
.titel__strich { position: absolute; left: -2%; bottom: -0.2em; width: 104%; height: 0.32em; overflow: visible; pointer-events: none; }
.titel__strich path { stroke-width: 5; }
.titel__fuer {
  font-family: var(--serif); font-variation-settings: 'opsz' 48, 'SOFT' 60, 'WONK' 0;
  font-weight: 520; font-size: clamp(23px, 5.6vw, 36px); line-height: 1.5; margin-top: 18px;
}
.titel__reihenfolge { font-size: clamp(27px, 6.6vw, 40px); color: var(--kuli); font-weight: 600; line-height: 1.05; margin-top: 2px; padding-left: 1.2em; rotate: -2.5deg; transform-origin: 0 50%; }
/* Nummern über die Wortmitte, nicht an den Zeilenanfang */
.marker[data-nr]::before {
  content: attr(data-nr); content: attr(data-nr) / '';
  position: absolute; left: 50%; top: -0.78em; translate: -50% 0;
  font-family: var(--hand); font-size: 0.66em; line-height: 1; font-weight: 700; color: var(--kuli);
  rotate: -8deg; pointer-events: none;
}
.titel.nummern-warten .marker[data-nr]::before { opacity: 0; }
.titel.nummern-warten .marker[data-nr].nr-da::before { opacity: 1; }

.steckbrief {
  position: relative; max-width: 38em; margin: 0 0 26px; padding: 30px 22px 14px;
  background-color: var(--db-karton);
  background-image: linear-gradient(rgba(214, 72, 62, 0.5), rgba(214, 72, 62, 0.5)), linear-gradient(rgba(30, 58, 138, 0.11) 1px, transparent 1px);
  background-size: 100% 2px, 100% 27px; background-position: 0 22px, 0 22px; background-repeat: no-repeat, repeat-y;
  rotate: -0.8deg;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 18px 30px -18px rgba(40, 25, 5, 0.5);
}
.steckbrief__etikett {
  position: absolute; top: -17px; left: 14px; margin: 0; padding: 3px 12px 4px;
  font-size: 21px; font-weight: 700; line-height: 1.1; color: var(--tinte); white-space: nowrap;
  background: var(--gelb); rotate: -2.5deg; box-shadow: 1px 2px 0 rgba(21, 23, 31, 0.25);
}
/* schmal: Schrift wächst mit der Breite, das Etikett bleibt einzeilig und liegt nie über dem Text (320 px: 15,7 px) */
@media (max-width: 439px) { .steckbrief__etikett { font-size: 4.9vw; } }
.hero__lead { margin: 0; font-size: 16.5px; line-height: 1.62; }
@media (min-width: 760px) { .hero__lead { font-size: 18px; line-height: 1.5; } }
.hero__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }

/* Hero-Polaroid mit Pop-out: Foto und Freisteller skalieren gemeinsam, der Kopf steigt über den Rand */
.polaroid--hero {
  position: absolute; z-index: 2;
  width: min(70vw, 340px); right: 2px; top: 58px;
  padding: 10px 10px 0;
}
.polaroid__fenster { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--db-foto-platzhalter); }
.polaroid--hero .polaroid__foto { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; transform-origin: 50% 100%; }
.polaroid--hero .polaroid__frei {
  position: absolute; left: 10px; top: 10px; width: calc(100% - 20px); height: auto; aspect-ratio: 4 / 5; background: none;
  transform-origin: 50% 100%; pointer-events: none; z-index: 2;
  /* Pop-out mit Faktor 1,26: unten an den Fensterkanten geschnitten, oben frei */
  clip-path: polygon(-40% -80%, 140% -80%, 140% 20.6%, 89.7% 20.6%, 89.7% 100%, 10.3% 100%, 10.3% 20.6%, -40% 20.6%);
  filter: drop-shadow(0 -2px 0 rgba(255, 255, 255, 0.9)) drop-shadow(0 10px 10px rgba(30, 20, 5, 0.25));
  opacity: 0;
}
.polaroid--hero.ist-raus .polaroid__frei { opacity: 1; }
.polaroid--hero.ist-raus [data-popout] { transform: scale(1.26); }
.polaroid--hero figcaption { position: relative; z-index: 3; font-size: 19px; min-height: 48px; padding-top: 8px; background: var(--db-karton); }

/* gezeichnetes Glücksrad: gezinkt.
   Liegt über Polaroid, Freisteller und Klebeband (z-index 3 in .hero__bild) und steht so, dass es bei
   390 bis 1920 px ganz im Bild ist. Der ganze Knopf samt "dreh mal" ist Klickfläche, die Blockboxen
   der H1 fangen keine Klicks ab (.titel ohne pointer-events, dort gibt es nichts zu klicken). */
.rad {
  position: absolute; z-index: 3; left: -16px; top: 100px;
  width: 150px; height: 150px; padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: 50%;
}
.rad * { cursor: pointer; }
.hero__text > .titel { pointer-events: none; }
.rad__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rad__scheibe { transform-box: view-box; }
.rad__wort { font-family: var(--hand); font-weight: 700; font-size: 21px; fill: var(--tinte); }
.rad__hinweis { position: absolute; left: 10px; top: 148px; font-size: 22px; font-weight: 700; color: var(--kuli); white-space: nowrap; rotate: -6deg; }
.rad:hover .rad__hinweis { text-decoration: underline; text-decoration-color: var(--filz); }
.rad__ergebnis { position: absolute; left: 0; top: 296px; z-index: 3; margin: 0; max-width: 4.6em; font-size: 23px; line-height: 1.05; font-weight: 700; color: var(--filz-text); rotate: -5deg; }

/* Faden am Hero: Knäuel, Schwanz, Griff */
.faden-hero { position: absolute; z-index: 4; left: 0; top: 376px; width: 150px; height: 140px; }
.knaeuel-klein { position: absolute; left: 0; top: 0; width: 80px; height: 128px; overflow: visible; pointer-events: none; }
.faden-griff {
  position: absolute; left: 40px; top: 96px; min-height: 48px; padding: 8px 6px 4px 30px;
  border: 0; background: none; cursor: grab; touch-action: none;
  font-size: 25px; font-weight: 700; line-height: 1; color: var(--kuli); white-space: nowrap; rotate: -6deg;
}
.faden-griff:active { cursor: grabbing; }
.faden-griff__text { text-decoration: underline; text-decoration-color: rgba(244, 132, 24, 0.7); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.faden-griff__pfeil { position: absolute; left: -6px; top: -6px; width: 36px; height: 24px; overflow: visible; rotate: 200deg; }

@media (min-width: 760px) {
  .hero__inhalt { padding: 140px var(--inhalt-r) 56px 48px; }
  .hero__bild { min-height: 700px; }
  .polaroid--hero { width: min(52vw, 440px); right: 10%; top: 96px; }
  .rad { width: 190px; height: 190px; left: 0; top: 110px; }
  .rad__hinweis { left: 60px; top: 190px; }
  .rad__ergebnis { left: 30px; top: 320px; max-width: 9em; }
  .faden-hero { left: 6%; top: 600px; }
  .hero__bild { min-height: 780px; }
}

@media (min-width: 1100px) {
  .hero__inhalt {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 32px; align-items: start;
    padding: 128px var(--inhalt-r) 48px 72px; min-height: max(100svh, 820px);
  }
  .hero__bild { order: 0; min-height: 0; height: 100%; }
  .titel__rolle { font-size: clamp(42px, 6vw, 80px); }
  .titel__fuer { font-size: 32px; line-height: 1.38; margin-top: 16px; }
  .steckbrief { max-width: 27em; }
  .hero__lead { font-size: 17px; }
  .polaroid--hero {
    width: clamp(340px, min(36vw, calc((100svh - 290px) * 0.8 + 20px)), 540px);
    right: 2%; top: 62px;
  }
  .polaroid--hero figcaption { font-size: 23px; min-height: 60px; }
  .rad { width: 168px; height: 168px; left: -150px; top: 40px; }
  .rad__hinweis { left: 70px; top: 160px; }
  .rad__ergebnis { left: -150px; top: -38px; max-width: 12em; }
  .faden-hero { left: calc(472px - (min(100vw, 1320px) - 176px) * 0.54); top: 300px; width: 120px; height: 220px; }
  .knaeuel-klein { left: 4px; width: 100px; height: 160px; }
  .faden-griff { left: 0; top: 150px; font-size: 27px; padding: 4px 4px 4px 6px; white-space: normal; width: 4.4em; text-align: left; line-height: 0.95; }
  .faden-griff__pfeil { display: none; }
}

/* Glücksrad ab 1280 px: größer als im Prototyp und frei zwischen Titelzeilen und Klebeband */
@media (min-width: 1280px) {
  .rad { width: 180px; height: 180px; left: -205px; top: 18px; }
  .rad__hinweis { left: 96px; top: 172px; }
}

/* ---------- Auftakt: Knäuel ---------- */
.seite--knaeuel {
  z-index: 1; min-height: 100svh;
  padding: 56px var(--inhalt-r) 48px var(--inhalt-l);
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 12px;
  overflow: hidden;
}
.knaeuel-gross { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; }
.knaeuel__text { position: relative; z-index: 3; }
.knaeuel__buehne { position: relative; z-index: 1; }
.bewegung-aus .knaeuel-gross { z-index: 0; }
.knaeuel__lead { max-width: 34em; }
.knaeuel__fazit { font-size: clamp(26px, 6vw, 34px); color: var(--filz-text); font-weight: 700; rotate: -2deg; transform-origin: 0 50%; margin: 6px 0 0; }
.wuensche { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.wunsch {
  position: relative; rotate: var(--d, 0deg); background: var(--papier-hell); padding: 9px 11px 10px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08), 0 10px 18px -12px rgba(40, 25, 5, 0.45);
}
.wunsch::before { content: ''; position: absolute; top: -9px; left: calc(50% - 26px); width: 52px; height: 16px; background: rgba(232, 214, 170, 0.85); rotate: -4deg; }
.wunsch__text { position: relative; display: inline-block; font-family: var(--hand); font-weight: 500; font-size: 22px; line-height: 1.05; color: var(--tinte); }
.wunsch__antwort { display: block; font-size: 20px; line-height: 1.05; color: var(--kuli); font-weight: 700; margin-top: 3px; }
.wunsch__marke { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.wunsch__marke path { fill: none; stroke: var(--filz); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }

.ausschnitt { margin: 0; position: relative; }
.ausschnitt img { display: block; width: 100%; height: auto; }
.ausschnitt figcaption { font-family: var(--hand); font-size: 22px; font-weight: 600; color: var(--kuli); }
.ausschnitt--knaeuel { position: absolute; right: -8px; bottom: -20px; width: 150px; z-index: 3; rotate: -4deg; }
.ausschnitt--knaeuel figcaption { position: absolute; bottom: 30%; right: 96%; rotate: -8deg; white-space: nowrap; font-size: 22px; }

@media (max-width: 759px) {
  .seite--knaeuel { padding-top: 34px; padding-bottom: 28px; gap: 8px; }
  .seite--knaeuel .seitenzahl { display: none; }
  .seite--knaeuel .ueberschrift { font-size: 32px; margin-bottom: 12px; }
  .knaeuel__lead { font-size: 16px; line-height: 1.5; margin-bottom: 6px; }
  .knaeuel__fazit { font-size: 25px; }
  .wuensche { gap: 18px 12px; margin-top: 8px; }
  .wunsch { padding: 7px 9px 8px; }
  .wunsch__text { font-size: 20px; }
  .wunsch__antwort { font-size: 18.5px; }
  .ausschnitt--knaeuel { display: none; }
}
/* kleine Telefone (wenig Höhe): Die Knäuel-Seite passt ganz in den Bildschirm, damit sie im Pin nicht geschoben wird.
   Maßstab ist die kleine Bildschirmhöhe (100svh, Toolbar sichtbar), einmal beim Laden gemessen (vorab.js setzt .kurz
   und .sehr-kurz). Eine Media Query auf die Fensterhöhe würde auf dem iPhone beim Ein- und Ausklappen der Toolbar
   umschalten, Schriftgrößen ändern und damit Pin und roten Faden verschieben. */
@media (max-width: 759px) {
  .kurz .seite--knaeuel { padding-top: 22px; padding-bottom: 14px; gap: 6px; }
  .kurz .seite--knaeuel .ueberschrift { font-size: 27px; margin-bottom: 8px; }
  .kurz .knaeuel__lead { font-size: 15px; line-height: 1.4; margin-bottom: 4px; }
  .kurz .knaeuel__fazit { font-size: 23px; margin-top: 2px; }
  .kurz .wuensche { gap: 12px 10px; margin-top: 4px; }
  .kurz .wunsch { padding: 6px 8px 7px; }
  .kurz .wunsch__text { font-size: 18px; }
  .kurz .wunsch__antwort { font-size: 17px; line-height: 1; }
  .sehr-kurz .knaeuel__lead { font-size: 14px; line-height: 1.35; }
  .sehr-kurz .wunsch__text { font-size: 17px; }
  .sehr-kurz .wunsch__antwort { font-size: 16px; }
}
@media (min-width: 760px) {
  .wunsch__text { font-size: 26px; }
  .wunsch__antwort { font-size: 23px; }
  .ausschnitt--knaeuel { width: 200px; }
}
@media (min-width: 1100px) {
  .seite--knaeuel {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 40px; align-content: center;
    padding: 72px var(--inhalt-r) 72px var(--inhalt-l); min-height: max(100svh, 700px);
  }
  .knaeuel__buehne { height: min(64svh, 560px); align-self: center; }
  .wuensche { display: block; position: relative; height: 100%; }
  .wunsch { position: absolute; left: var(--x); top: var(--y); max-width: 250px; }
  .wunsch__text { font-size: 30px; }
  .wunsch__antwort { font-size: 26px; }
  .ausschnitt--knaeuel { width: 200px; right: 20px; bottom: -14px; }
}

/* Stapel: Titelseite liegt auf dem Knäuel und blättert nach oben weg (auf jedem Gerät) */
.auftakt--stapel { display: grid; perspective: 2400px; perspective-origin: 50% 0%; }
/* schmal: weitere Perspektive, sonst wird der untere Teil der Titelseite beim Umblättern so stark vergrößert, dass
   Text und Knöpfe seitlich aus dem Bild ragen (bei 2.400 px bis 47 px, bei 9.000 px nichts mehr). Das Umblättern bleibt deutlich zu sehen. */
@media (max-width: 1099px) { .auftakt--stapel { perspective: 9000px; } }
.auftakt--stapel > .seite { grid-area: 1 / 1; }
.auftakt--stapel > .seite--knaeuel { align-self: start; min-height: 100vh; min-height: 100lvh; }
@media (min-width: 1100px) { .auftakt--stapel > .seite--knaeuel { min-height: max(100lvh, 700px); } }
.auftakt--stapel > .seite--hero { align-self: start; }
/* Hinter dem gepinnten Auftakt nie der dunkle Tisch: Fehlt nach einer Toolbar-Änderung unten ein Streifen, ist dort Papier */
/* Auch hinter der umblätternden Titelseite (oberhalb des Knäuels) liegt echtes Papier mit Karo und Korn, nicht nur seine Farbe */
.pin-spacer:has(> .auftakt--stapel), .auftakt--stapel {
  background-color: var(--papier);
  background-image: url(../img/papierkorn.webp), linear-gradient(var(--karo) 1px, transparent 1px), linear-gradient(90deg, var(--karo) 1px, transparent 1px);
  background-size: 256px 256px, var(--karo-groesse) var(--karo-groesse), var(--karo-groesse) var(--karo-groesse);
  background-position: 0 0, -1px -1px, -1px -1px;
}
/* Sonde für die große Bildschirmhöhe (notizbuch.js, auftaktSzene) */
.vh-sonde { position: fixed; left: 0; top: 0; width: 0; height: 100vh; height: 100lvh; visibility: hidden; pointer-events: none; }
.auftakt--stapel .seite--hero { transform-origin: 50% 0%; backface-visibility: hidden; }
.blatt-schatten { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28, 26, 23, 0.55), rgba(28, 26, 23, 0) 70%); pointer-events: none; z-index: 4; opacity: 0; }
.blatt-licht { position: absolute; inset: 0; background: rgba(28, 26, 23, 1); pointer-events: none; z-index: 40; opacity: 0; }

/* ---------- Durchgehender Block ---------- */
.faden-ebene { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
/* Abschnitte liegen über dem Stift, sobald er am Rand zieht (.stift--unter, z-index 2): Nummern, Randnotizen und
   Zettel verdecken ihn, nie umgekehrt. Faden und Papier (z-index 0) bleiben unter dem Stift. */
.abschnitt { position: relative; z-index: 3; padding: 96px var(--inhalt-r) 72px var(--inhalt-l); }
@media (min-width: 1100px) { .abschnitt { padding-top: 128px; padding-bottom: 96px; } }

/* ---------- Stärken ---------- */
.karten { list-style: none; padding: 0; margin: 34px 0 0; display: grid; gap: 34px; }
.karte {
  position: relative; padding: 26px 22px 18px;
  background-color: var(--db-karton);
  background-image: linear-gradient(rgba(214, 72, 62, 0.5), rgba(214, 72, 62, 0.5)), linear-gradient(rgba(30, 58, 138, 0.12) 1px, transparent 1px);
  background-size: 100% 2px, 100% 28px; background-position: 0 58px, 0 58px; background-repeat: no-repeat, repeat-y;
  rotate: var(--dreh, 0deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 18px 30px -18px rgba(40, 25, 5, 0.5);
}
.karte__icon { position: absolute; right: 12px; top: -34px; width: 132px; height: 92px; }
.karte__titel { font-family: var(--hand); font-weight: 700; font-size: 40px; line-height: 1; margin: 0 0 18px; }
.karte__satz { font-family: var(--serif); font-variation-settings: 'opsz' 36, 'SOFT' 60; font-weight: var(--db-gewicht-serif); font-size: 22px; line-height: 1.22; margin-bottom: 10px; }
.karte__beweis { font-size: 15.5px; color: var(--blei); border-top: 2px dashed rgba(74, 72, 69, 0.35); padding-top: 10px; margin: 6px 0 0; }
.karte__beweis .hand { font-size: 21px; color: var(--filz-text); font-weight: 700; }
.karte__weiter { margin: 12px 0 0; font-size: 15.5px; font-weight: 600; }
.karte__weiter a { display: inline-block; padding: 4px 0; }
@media (min-width: 900px) { .karten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }

/* ---------- Story-Kopf und Spannungsbogen ---------- */
.story__kopf { position: relative; max-width: 800px; }
.story__lead { max-width: 36em; }
.bogen { margin: 6px 0 26px; padding: 0; }
.bogen p { margin: 0; font-family: var(--hand); font-weight: 600; font-size: clamp(27px, 6.2vw, 38px); line-height: 1.15; color: var(--kuli); max-width: 24ch; }
.bogen__wort { position: relative; transition: color 0.2s steps(2); }
.bogen__wort.ist-jetzt { color: var(--filz-text); }
.kaffee { position: absolute; right: -10px; top: -40px; width: 170px; height: 170px; pointer-events: none; }
.kaffeering { position: absolute; pointer-events: none; }
.kaffeering--story { inset: 0; width: 100%; height: 100%; opacity: 0.85; }
.kaffee__tasse { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.bewegung-aus .kaffee__tasse { display: none; }
@media (min-width: 900px) { .kaffee { right: -300px; top: 20px; width: 220px; height: 220px; } }
/* schmal: Tasse und Ring über dem Kicker, nicht auf ihm (der Kicker beginnt oben im Kopf) */
@media (max-width: 759px) { .kaffee { right: -34px; top: -124px; width: 126px; height: 126px; } }

/* ---------- Stationen: Grundgerüst ----------
   Jede Station ist eine Bühne mit Lesephase (nur in der bewegten Fassung):
   Desktop: Die ganze Bühne (Text und Bild) bleibt stehen. Beim Hereinscrollen erscheinen Zeichnungen und
   Zettel nacheinander, dann läuft der Moment der Station (--moment), danach ist Ruhe zum Lesen (--lese).
   Mobil und Tablet: Erst kommt das Bild mit seinem Moment, dann bleibt der Text (.station__lesung) stehen.
   Stationen mit Gast bekommen zusätzlich --gast: Er landet direkt nach dem Moment, erst danach läuft --lese.
   Die Strecken stehen unten als Variablen, die Zahlen kommen aus der Messung (700 px/s, mindestens 3 s ruhig). */
.stationen { list-style: none; margin: 40px 0 0; padding: 0; }
.station { position: relative; padding: 64px 0 56px; --lese: 2400px; --moment: 0px; --gast: 0px; --gast-pause: 1150px; --beleg-pause: 2150px; --nachlese: 0px; }
.station__nr {
  position: absolute; left: calc(var(--rand-x) - var(--inhalt-l)); top: 58px; translate: -50% 0;
  font-size: 40px; font-weight: 700; line-height: 1; color: var(--tinte);
  background: var(--papier); padding: 2px 4px; z-index: 3; min-width: 1.2em; text-align: center;
  /* rund statt eckig: Der Faden zieht seinen Kreis um die Ziffer (Radius = halbe Breite + Luft, notizbuch.js),
     die Ecken eines Quadrats ragten über den Kreis und schnitten ihn ab */
  display: grid; place-items: center; width: 1.2em; height: 1.2em; min-width: 0; padding: 0; border-radius: 50%; box-sizing: border-box;
}
@media (max-width: 759px) { .station__nr { font-size: 34px; } }
@media (min-width: 760px) { .station__nr { font-size: 58px; top: 70px; } }
.station__buehne { position: relative; z-index: 2; }
.station__lesung { position: relative; }
.reiter {
  display: inline-block; width: max-content;
  font-family: var(--text); font-size: 12.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.2;
  color: var(--tinte); padding: 5px 12px 4px; margin: 0 0 12px; background: var(--m, var(--gelb)); rotate: -3deg;
  clip-path: polygon(0 6%, 4% 0, 8% 8%, 92% 0, 96% 8%, 100% 2%, 100% 94%, 96% 100%, 92% 92%, 8% 100%, 4% 92%, 0 100%);
}
.reiter--gelb { --m: var(--gelb); }
.reiter--rosa { --m: var(--rosa); }
.reiter--gruen { --m: var(--gruen); }
.station__kicker { display: block; font-size: clamp(24px, 5.2vw, 28px); color: var(--kuli); font-weight: 600; margin: 0 0 8px; line-height: 1.12; rotate: -1deg; transform-origin: 0 50%; }
.station__titel {
  font-family: var(--serif); font-variation-settings: 'opsz' 72, 'SOFT' 80, 'WONK' 1;
  font-weight: 640; font-size: clamp(32px, 7.4vw, 50px); line-height: 1.04; letter-spacing: -0.01em;
  margin: 0 0 16px; max-width: 17ch;
}
.station__lesung p:not([class]) { max-width: 34em; }
.station__lesung .weiter { margin: 14px 0 0; }
.station__lesung .weiter .link-hand { font-size: 24px; line-height: 1.1; padding: 8px 0 6px; }
.station--nacht .link-hand { color: var(--nacht-kuli); }
.station__bild { position: relative; }

/* Mobil und Tablet: Bild mit Moment zuerst, dann der Text, der zum Lesen stehen bleibt, dann der Beleg */
@media (max-width: 1099px) {
  .station__buehne { display: flex; flex-direction: column; gap: 18px; }
  .station:not(.station--balken) .station__text { display: contents; }
  .station__bild { order: 1; }
  .station__spur { order: 2; }
  .station__buehne .beweis, .station__buehne .fotostreifen { order: 3; }
  /* Am Handy bleibt man ohnehin stehen, wenn man liest: keine Lese-, Beleg- oder Gastpausen per Sticky oder Pin.
     Jede Station ist nur so lang wie ihr Inhalt, Zeichnung und Moment laufen beim Durchscrollen. */
  .station { --lese: 0px; --gast: 0px; --gast-pause: 0px; --beleg-pause: 0px; }
  .station .beweis { margin-top: 10px; }
  .station__lesung > .beweis { margin: 30px 0 4px; padding: 20px 18px 12px; }
  .station__lesung > .beweis .beweis__zahl { font-size: 40px; }
  .station__lesung > .beweis .beweis__satz { font-size: 15px; line-height: 1.45; }
  .station__lesung .weiter { margin-top: 10px; }
  .station__lesung .weiter .link-hand { font-size: 22px; padding: 6px 0 4px; }
}

/* Desktop: zwei Spalten, abwechselnd gespiegelt. Die Bühne bleibt stehen, solange die Station läuft. */
@media (min-width: 1100px) {
  .station { padding: 96px 0 72px; }
  .station__nr { top: 100px; }
  .station__buehne { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); column-gap: 64px; align-items: start; }
  .station--gespiegelt .station__bild { order: -1; }
  .station__buehne > .station__bild { padding-top: 34px; }
  .bewegung .station:not(.station--balken) .station__buehne { position: sticky; top: var(--buehne-oben, 9vh); }
  .bewegung .station:not(.station--balken)::after { content: ''; display: block; height: calc(var(--moment) + var(--gast) + var(--lese) + var(--nachlese)); }
  .station--gast { --gast: 560px; }
  /* Bühne höher als der Bildschirm (niedrige Laptops): zweiter Halt, bei dem unten der Beleg ganz zu sehen ist */
  .station.station--hoch { --nachlese: 2150px; }  /* rund 3 s bei 700 px/s für den Beleg unten */

}
/* Strecken für den Moment (Desktop, Bühne steht still, nur die Zeichnung bewegt sich) */
@media (min-width: 1100px) {
  #station-2 { --moment: 640px; }
  #station-3 { --moment: 860px; }
  #station-5 { --moment: 560px; }
  #station-6 { --moment: 860px; }
  #station-7 { --moment: 760px; }
  #station-9 { --moment: 640px; }
  #station-10 { --moment: 560px; }
}

/* Gastgeber: Mathias lehnt sich nach der Station vom rechten Heftrand ins Heft */
.station--gast { padding-bottom: 186px; }
.gast {
  position: absolute; z-index: 4; margin: 0;
  right: calc(-1 * var(--inhalt-r) - 22px); bottom: 22px;
  display: flex; flex-direction: row-reverse; align-items: flex-end; gap: 4px;
  pointer-events: none;
}
.gast img { display: block; width: 128px; height: auto; flex: none; filter: drop-shadow(0 8px 10px rgba(30, 20, 5, 0.3)); transform-origin: 80% 100%; }
.gast__notiz {
  max-width: 13em; margin: 0 0 54px; text-align: right;
  font-size: 22px; line-height: 1.08; font-weight: 700; color: var(--kuli); rotate: -3deg;
}
@media (min-width: 760px) {
  .gast img { width: 172px; }
  .gast__notiz { font-size: 25px; max-width: 14em; margin-bottom: 70px; }
}
@media (min-width: 1100px) {
  .station--gast { padding-bottom: 230px; }
  .gast { right: calc(-1 * var(--inhalt-r) - 26px); }
}
/* Gast in der stehenden Bühne: notizbuch.js sucht eine freie Stelle und setzt left/top */
.gast.gast--buehne { right: auto; bottom: auto; left: 0; top: 0; z-index: 3; }
.gast--buehne img { width: 140px; }
.gast--buehne .gast__notiz { font-size: 23px; max-width: 10em; margin-bottom: 40px; }
.gast--buehne.gast--spalte { flex-direction: column-reverse; align-items: flex-end; gap: 2px; }
.gast--spalte .gast__notiz { margin: 0 8px 0 0; }
/* Gast unter dem stehenden Text (mobil) oder im Fuß von Station 4 */
.gast.gast--fluss { position: relative; right: auto; bottom: auto; justify-content: flex-start; margin: 16px calc(-1 * var(--inhalt-r) + 2px) 0 0; }
.gast--fluss img { width: 104px; }
.gast--fluss .gast__notiz { font-size: 21px; max-width: 12em; margin-bottom: 30px; }
.balken__fuss > .gast--fluss { grid-column: 1 / -1; grid-row: 3; margin-right: 0; }
@media (min-width: 1100px) {
  .gast.gast--fluss { margin-right: 0; }
  .gast--fluss img { width: 128px; }
  .gast--fluss .gast__notiz { font-size: 23px; margin-bottom: 40px; }
}
/* Station 9 mobil (wenn der Gast nicht mitstehen kann): Notiz nicht am linken Rand */
@media (max-width: 759px) {
  .station.station--nacht > .gast:not(.gast--fluss):not(.gast--buehne) { right: -12px; }
  .station--nacht .gast__notiz { max-width: 11em; }
}
/* Desktop, wenn in der stehenden Bühne kein Platz für den Gast ist (niedrige Laptops): Pause nach der Station.
   Unten bekommt die Station die Strecke --gast-pause, notizbuch.js hält den Gast dort per Gegenbewegung still. */
@media (min-width: 1100px) {
  .station.station--gastpause { --gast: 0px; }
  .bewegung .station--gastpause { padding-bottom: calc(230px + var(--gast-pause)); }
  .bewegung .station--gastpause > .gast--pause { bottom: calc(22px + var(--gast-pause)); }
}

/* Station 1: der Hörer, die Kordel läuft in den Rand */
.doodle--anruf { width: min(100%, 400px); height: auto; }

/* Station 2: Lupe, Polaroid an der Büroklammer */
.doodle--vorher { width: min(100%, 440px); height: auto; }
.code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 11.5px; fill: #D8DCEA; }
.code__tag { fill: #9FB4FF; }
.code__attr { fill: #F7C77A; }
.code__wert { fill: #B8F0D0; }
.code__alarm { fill: #FF8A80; font-weight: 700; }
.polaroid--station { width: min(70vw, 300px); }
.station .polaroid--klammer { margin: 26px 0 0 auto; }
@media (min-width: 1100px) {
  .station .polaroid--station { width: min(100%, 290px); }
  .station .polaroid--klammer { margin: -40px 0 0 46%; }
}

/* Station 3: Uhr, Fotoautomat-Streifen */
.uhr-buehne { position: relative; }
.doodle--uhr { width: min(100%, 470px); height: auto; }
.doodle--uhr .zeiger { stroke: var(--tinte); stroke-linecap: round; }
.doodle--uhr .zeiger--std { stroke-width: 8; }
.doodle--uhr .zeiger--min { stroke-width: 5; stroke: var(--filz); }
.zeiger-klein { stroke: var(--db-bleistift); stroke-width: 3; stroke-linecap: round; }
.zeiger-klein--min { stroke-width: 2; }
.haken-box { fill: var(--papier-hell); stroke: var(--tinte); stroke-width: 2; }
.haken { fill: none; stroke: var(--kuli); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.haken--todo { stroke: var(--filz-text); }
.fotostreifen { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: end; max-width: 440px; margin: 22px 0 0; rotate: var(--dreh, 0deg); }
.fotostreifen img { display: block; width: 100%; height: auto; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 14px 22px -12px rgba(30, 20, 5, 0.5); }
.fotostreifen figcaption { font-family: var(--hand); font-size: 21px; line-height: 1.08; font-weight: 600; color: var(--kuli); margin: 0 0 26px; rotate: -4deg; }
@media (min-width: 1100px) {
  /* Desktop: der Fotostreifen hängt neben der Uhr statt unter dem Text, damit die Bühne in den Bildschirm passt */
  #station-3 .station__text { display: contents; }
  #station-3 .station__spur { grid-column: 1; grid-row: 1 / span 2; }
  #station-3 .station__text .beweis { grid-column: 1; grid-row: 3; }
  #station-3 .station__bild { grid-column: 2; grid-row: 1; }
  #station-3 .fotostreifen { grid-column: 2; grid-row: 2 / span 2; margin: 0 0 0 30px; grid-template-columns: 104px minmax(0, 1fr); }
}

/* Station 4: der Balken, maßstabsgetreu (der kleine Balken ist 1/540 des großen).
   Desktop: 5.400 = 2.400 px, der Text bleibt neben dem langen Balken stehen (Lesephase).
   Mobil und Tablet: kein Lese-Pin. Der Balken ist so hoch wie der Text plus ein Stück, mindestens 112 % der kleinen
   Bildschirmhöhe: Er passt nie ganz ins Bild (der Witz bleibt), die Station ist aber nur noch rund 2 bis 3 Bildschirme lang
   statt 4,5 bis 7. Skala und kleiner Balken rechnen in Prozent der Balkenhöhe. */
.station--balken .station__buehne { --balken-h: 2880px; --balken-b: 40px; display: grid; grid-template-columns: minmax(0, 1fr) var(--balken-b); column-gap: 14px; align-items: stretch; }
.station--balken .station__text { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; }
.station--balken .station__spur { flex: 1 1 auto; }
/* steht auch in der ruhigen Fassung neben dem Balken: Kleben ist keine Bewegung */
.station--balken .station__lesung { position: sticky; top: var(--lesung-oben, 72px); }
@media (max-width: 1099px) {
  .station--balken .station__text { display: contents; }
  .station--balken .station__spur { grid-column: 1; grid-row: 1; padding-bottom: 18vh; padding-bottom: 18svh; }
  .station--balken .station__lesung { position: static; }
  .station--balken .balken__spur { height: auto; min-height: 112vh; min-height: 112svh; align-self: stretch; }
  .station--balken .balken__gross { height: 100%; }
  .station--balken .balken__skala li { bottom: calc(var(--h) * 100% / 5.4); }
  .station--balken .balken__klein { height: calc(100% / 540); min-height: 1px; }
}
.balken { display: contents; }
.balken__kopf { display: none; }
.balken__spur { grid-column: 2; grid-row: 1; position: relative; height: var(--balken-h); align-self: end; margin-right: calc(-1 * var(--inhalt-r) + 6px); }
.balken__gross {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--balken-h);
  background:
    repeating-linear-gradient(-58deg, rgba(255, 255, 255, 0) 0 7px, rgba(255, 255, 255, 0.22) 7px 9px, rgba(255, 255, 255, 0) 9px 16px),
    var(--filz);
  border-radius: 3px 5px 0 0;
}
.balken__skala { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.balken__skala li {
  position: absolute; right: calc(100% + 4px); bottom: calc(var(--h) * var(--balken-h) / 5.4);
  font-family: var(--hand); font-weight: 700; font-size: 18px; line-height: 1; color: var(--filz-text);
  translate: 0 50%; white-space: nowrap; padding-right: 10px;
}
.balken__skala li::after { content: ''; position: absolute; right: 0; top: 50%; width: 8px; height: 2px; background: var(--filz-text); }
.balken__klein { position: absolute; bottom: 0; right: calc(100% + 18px); width: 34px; height: calc(var(--balken-h) / 540); background: var(--db-bleistift); }
/* Fuß des Balkens: Werte, Notiz und Foto nebeneinander, darunter der Beleg (beide stehen danach gemeinsam still) */
.balken__fuss {
  grid-column: 1 / -1; grid-row: 2; position: relative; border-top: 3px solid var(--tinte); padding-top: 76px; margin-right: calc(-1 * var(--inhalt-r) + 6px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); column-gap: 16px; align-items: start;
}
.balken__fuss .balken__notiz { grid-column: 1; grid-row: 1; }
.station--balken .balken__fuss .beweis { grid-column: 1 / -1; grid-row: 2; margin: 34px 0 4px; }
.balken__label { position: absolute; top: 6px; margin: 0; font-size: 21px; font-weight: 600; line-height: 1; color: var(--kuli); text-align: center; }
.balken__wert { display: block; font-size: 28px; font-weight: 700; color: var(--filz-text); }
.balken__label--gross { right: 0; }
.balken__label--klein { right: 66px; }
.balken__notiz { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.05; color: var(--filz-text); rotate: -2deg; max-width: 14em; }
.polaroid--klapp { grid-column: 2; grid-row: 1; justify-self: end; width: min(100%, 250px); margin: -6px 0 0; transform-origin: 50% 100%; }
.station .polaroid--klapp figcaption { font-size: 19px; min-height: 0; }
/* mobil: Skala nicht in die Textspalte laufen lassen (die Beschriftungen stehen links neben dem Balken) */
@media (max-width: 1099px) {
  .station--balken .station__spur { padding-right: 34px; }
}
/* sehr schmal: Fuß einspaltig, Notiz über dem Foto, damit das Polaroid die Notiz nicht verdeckt */
@media (max-width: 399px) {
  /* Titel neben dem Balken: lange Wörter („unbequeme“) sonst breiter als die Spalte, sie liefen in die Skala */
  .station--balken .station__titel { font-size: 27px; hyphens: auto; }
  .balken__fuss { grid-template-columns: minmax(0, 1fr); }
  .polaroid--klapp { grid-column: 1; grid-row: 2; justify-self: end; width: min(78%, 250px); margin: 18px 0 0; }
  .station--balken .balken__fuss .beweis { grid-row: 3; }
  .balken__fuss > .gast--fluss { grid-row: 4; }
}
@media (min-width: 1100px) {
  .station--balken .station__buehne { --balken-h: 2400px; --balken-b: 76px; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); column-gap: 64px; }
  .station--balken .station__lesung { top: var(--lesung-oben, 104px); }
  .balken { display: grid; grid-template-columns: var(--balken-b) minmax(0, 1fr); grid-column: 2; grid-row: 1; column-gap: 0; align-self: stretch; }
  .balken__kopf { display: block; grid-column: 1 / -1; margin: 0 0 22px 50px; font-size: 26px; font-weight: 700; line-height: 1.05; color: var(--kuli); rotate: -2deg; max-width: 16em; }
  .balken__spur { grid-column: 1; grid-row: 2; margin: 0; }
  .balken__klein { right: auto; left: calc(100% + 40px); width: 56px; }
  .balken__skala li { right: auto; left: calc(100% + 4px); padding: 0 0 0 12px; font-size: 21px; }
  .balken__skala li::after { right: auto; left: 0; }
  .balken__fuss { grid-column: 1 / -1; grid-row: 3; margin-right: 0; padding-top: 86px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; }
  .bewegung .station--balken .balken::after { content: ''; grid-column: 1 / -1; grid-row: 4; height: calc(var(--lese) + var(--gast)); }
  .balken__label--gross { right: auto; left: 0; width: var(--balken-b); }
  .balken__label--klein { right: auto; left: calc(var(--balken-b) + 40px); width: 56px; }
  .polaroid--klapp { margin: -40px 0 0; width: min(100%, 300px); }
  .station .polaroid--klapp figcaption { font-size: 21px; }
  .station--balken .balken__fuss .beweis { margin-top: 30px; }
}

/* Station 5 und 6 */
.doodle--treppe { width: min(100%, 460px); height: auto; }
.treppe-tinte { opacity: 1; }
.randbemerkung--treppe { margin: 4px 0 0 auto; text-align: right; }
.nein { margin: 18px 0 0; }
.nein__titel { font-size: 24px; color: var(--kuli); font-weight: 600; margin: 0 0 6px; }
.nein__liste { list-style: none; margin: 0; padding: 0; }
.nein__liste li { position: relative; margin: 0 0 6px; }
.nein__punkt { position: relative; display: inline; font-size: 17px; font-weight: 700; }
.nein__statt { display: block; color: var(--kuli); font-size: 21px; font-weight: 600; margin-top: -2px; }
.nein__strich { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.nein__strich path { fill: none; stroke: var(--filz); stroke-width: 2.6; stroke-linecap: round; opacity: 0.9; }

.daumenkino { position: relative; width: min(100%, 270px); margin: 10px auto 0; padding-bottom: 70px; perspective: 900px; }
@media (min-width: 1100px) {
  /* Desktop: der Beleg steht unter dem Daumenkino statt unter dem langen Text, damit die Bühne in den Bildschirm passt */
  #station-6 .station__text { display: contents; }
  #station-6 .station__spur { grid-column: 1; grid-row: 1 / span 2; }
  #station-6 .station__bild { grid-column: 2; grid-row: 1; }
  #station-6 .station__text .beweis { grid-column: 2; grid-row: 2; align-self: start; margin: 18px 0 0 24px; }
}
.daumenkino__blatt { position: relative; background: var(--db-karton); box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 10px 18px -12px rgba(0,0,0,0.4); }
.daumenkino__blatt--1 { z-index: 3; transform-origin: 50% 0%; }
.daumenkino__blatt--1 svg { display: block; width: 100%; height: auto; }
.daumenkino__blatt--2, .daumenkino__blatt--3 { position: absolute; inset: 0 0 70px 0; }
.daumenkino__blatt--2 { rotate: 3deg; translate: 6px 6px; z-index: 2; }
.daumenkino__blatt--3 { rotate: -4deg; translate: -6px 10px; z-index: 1; }
.daumenkino .variante { opacity: 0; }
.daumenkino .variante--1 { opacity: 1; }
.daumenkino__kommentar {
  position: absolute; left: 52%; top: 40%; margin: 0; min-width: 7em; max-width: 9em;
  font-size: 24px; font-weight: 700; line-height: 1; color: #C2410C; rotate: -9deg; text-align: center;
  background: rgba(255, 253, 247, 0.86); padding: 2px 4px;
}
.daumenkino__kommentar:empty { display: none; }
/* schmal: Kommentar bleibt im Daumenkino (rechts bündig, darf umbrechen), damit am Rand nichts abgeschnitten wird */
@media (max-width: 759px) {
  .daumenkino__kommentar { left: auto; right: -8px; min-width: 0; max-width: min(7.2em, 80%); font-size: 23px; }
}
.daumenkino__zaehler { position: absolute; left: 0; bottom: 14px; margin: 0; font-size: 26px; font-weight: 700; color: var(--kuli); }
.daumenkino__runde { position: absolute; right: -18px; top: -22px; z-index: 4; margin: 0; font-size: 26px; font-weight: 700; color: var(--filz-text); border: 2.5px solid var(--filz); border-radius: 50%; padding: 6px 14px; rotate: -8deg; background: rgba(255, 253, 247, 0.9); }

/* Station 7: Crew */
.crew { position: relative; padding: 10px 0 0; }
.crew__linien { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.crew__linien path { fill: none; stroke: var(--filz); stroke-width: 2.6; stroke-linecap: round; }
.ausschnitt--crew { position: relative; width: min(62%, 250px); margin: 0 auto 6px; z-index: 1; aspect-ratio: 1; }
.crew__ich { position: absolute; inset: auto 0 0 0; width: 100%; height: auto; }
.crew__ich--vorn { opacity: 0; }
.ausschnitt--crew.blick-vorn .crew__ich--seite { opacity: 0; }
.ausschnitt--crew.blick-vorn .crew__ich--vorn { opacity: 1; }
.ausschnitt--crew.blick-rechts .crew__ich--seite { scale: -1 1; }
.crew__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; position: relative; z-index: 1; }
.crew__karte {
  position: relative; background: var(--papier-hell); padding: 14px 14px 10px; rotate: var(--dreh, 0deg);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 10px 20px -12px rgba(40, 25, 5, 0.5);
  border-top: 5px solid var(--gruen);
  transition: scale var(--db-dauer-reiter) var(--db-stufen-2), box-shadow var(--db-dauer-reiter) var(--db-stufen-2);
}
.crew__karte.ist-dran { scale: 1.05; box-shadow: 0 0 0 3px var(--filz), 0 14px 24px -12px rgba(40, 25, 5, 0.55); z-index: 2; }
.crew__karte::before { content: ''; position: absolute; top: -12px; left: calc(50% - 30px); width: 60px; height: 20px; background: rgba(232, 214, 170, 0.82); rotate: -3deg; }
.crew__karte--ich { border-top-color: var(--filz); }
.crew__karte--netz { border-top-color: var(--gelb); }
.crew__karte--ki { border-top-color: var(--rosa); }
.crew__name { font-family: var(--serif); font-variation-settings: 'opsz' 36, 'SOFT' 60; font-weight: var(--db-gewicht-serif); font-size: 19px; line-height: 1.15; margin: 0 0 6px; }
.crew__rolle { font-size: 14.5px; line-height: 1.42; color: var(--blei); margin: 0; }
.crew__notiz { position: absolute; right: 8px; top: -34px; z-index: 3; margin: 0; font-size: 22px; font-weight: 700; color: var(--kuli); rotate: 6deg;
  text-shadow: 0 0 2px var(--papier), 0 0 3px var(--papier), 0 0 5px var(--papier); }
.crew__punkte { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 0; max-width: 260px; }
.crew__punkte span { width: var(--punkt-groesse); height: var(--punkt-groesse); border-radius: 50%; background: var(--filz); display: block; }
@media (min-width: 760px) { .crew__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Mobil steht das Foto über den Karten. Die Notiz „das bin ich“ sitzt über der ersten Karte: Das Foto bekommt unten
   so viel Abstand, dass sie frei neben dem Papier steht und nicht auf dem Hemd (Runde 3: 36 % verdeckt). */
@media (max-width: 1099px) {
  .ausschnitt--crew { margin-bottom: 32px; }
  .crew__notiz { top: -32px; }
}
@media (min-width: 1100px) {
  /* Text links, Crew-Plan rechts, damit alles in einen Bildschirm passt */
  .station--crew .station__buehne { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); column-gap: 48px; }
  .crew { height: 640px; padding: 0; }
  .ausschnitt--crew { position: absolute; left: 50%; top: 47%; translate: -50% -50%; width: 210px; margin: 0; }
  .crew__liste { display: block; position: absolute; inset: 0; }
  .crew__karte { position: absolute; width: 214px; padding: 12px 12px 8px; }
  .crew__name { font-size: 17.5px; }
  .crew__rolle { font-size: 13.5px; line-height: 1.38; }
  .crew__karte:nth-child(1) { left: 0; top: 2%; }
  .crew__karte:nth-child(2) { right: 0; top: 0; }
  .crew__karte:nth-child(3) { right: 0; top: 37%; }
  .crew__karte:nth-child(4) { right: 2%; top: 74%; }
  .crew__karte:nth-child(5) { left: 0; top: 70%; }
  .crew__karte:nth-child(6) { left: 0; top: 36%; }
  .crew__punkte { position: absolute; left: 36%; top: 90%; max-width: 200px; margin: 0; }
}

/* Station 8: Kurswechsel, der Faden reißt am Rand */
.polaroid--pin { margin: 8px 0 0 auto; }
.station--kurs { padding-bottom: 196px; }  /* mobil: Platz für „neuer Kurs“ unter der Kurve (notizbuch.js) */
@media (min-width: 1100px) {
  .station--kurs { padding-top: 120px; padding-bottom: 190px; }
  .station--kurs .polaroid--pin { margin: 0 auto 0 18%; }
  .station--kurs .station__bild .randbemerkung { margin: 30px 0 0 10%; }
}

/* Station 9: die einzige Nachtseite */
.station--nacht {
  margin-inline: calc(-1 * var(--inhalt-l)) calc(-1 * var(--inhalt-r));
  padding-inline: var(--inhalt-l) var(--inhalt-r);
  background-color: var(--nacht);
  color: var(--nacht-text);
  z-index: 2;
}
.nacht__himmel {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
  background:
    radial-gradient(circle at calc(100% - 70px) 74px, #FFF6D8 0 24px, rgba(255, 246, 216, 0) 25px),
    radial-gradient(circle at calc(100% - 58px) 66px, var(--nacht) 0 22px, rgba(18, 21, 42, 0) 23px),
    radial-gradient(1.6px 1.6px at 12% 18%, #FFFFFF 99%, transparent),
    radial-gradient(1.4px 1.4px at 28% 7%, #FFFFFF 99%, transparent),
    radial-gradient(1.2px 1.2px at 47% 14%, #E8E3FF 99%, transparent),
    radial-gradient(1.8px 1.8px at 63% 4%, #FFFFFF 99%, transparent),
    radial-gradient(1.3px 1.3px at 71% 26%, #FFFFFF 99%, transparent),
    radial-gradient(1.5px 1.5px at 92% 31%, #FFF2C2 99%, transparent),
    radial-gradient(1.2px 1.2px at 38% 33%, #FFFFFF 99%, transparent),
    radial-gradient(1.6px 1.6px at 6% 47%, #FFFFFF 99%, transparent),
    radial-gradient(1.2px 1.2px at 55% 52%, #FFFFFF 99%, transparent),
    radial-gradient(1.4px 1.4px at 86% 61%, #FFFFFF 99%, transparent),
    radial-gradient(1.2px 1.2px at 19% 72%, #E8E3FF 99%, transparent),
    radial-gradient(1.7px 1.7px at 44% 81%, #FFFFFF 99%, transparent),
    radial-gradient(1.2px 1.2px at 77% 88%, #FFFFFF 99%, transparent);
  background-repeat: no-repeat;
}
.station--nacht::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 18px; background: var(--papier);
  clip-path: polygon(0 0, 100% 0, 100% 30%, 95% 70%, 90% 35%, 84% 80%, 77% 30%, 70% 65%, 62% 25%, 55% 75%, 47% 35%, 40% 70%, 33% 25%, 26% 60%, 18% 30%, 11% 75%, 5% 35%, 0 60%);
  z-index: 1;
}
.station--nacht > .station__nr { left: calc(var(--rand-x)); background: transparent; color: var(--nacht-text); }
.station--nacht > .gast { right: -26px; }
.station--nacht .station__kicker, .station--nacht .randbemerkung { color: var(--nacht-kuli); }
.station--nacht .station__titel .marker { color: var(--nacht-text); }
.station--nacht .pointe { color: var(--nacht-text); }
.station--nacht .gast__notiz { color: var(--nacht-kuli); }
/* Sterne nie im Fließtext: Text und Notizen liegen auf einer Fläche in Nachtfarbe (unsichtbar, sie deckt nur die
   Sterne dahinter ab). Vorher sah ein Stern hinter „bereit.“ aus wie ein doppelter Punkt. */
.station--nacht .station__lesung, .station--nacht .gast__notiz, .station--nacht .startknopf__text, .station--nacht .strichliste__notiz {
  background-color: var(--nacht); box-shadow: 0 0 0 8px var(--nacht);
}
/* das untere Zackenband: als eigenes Element am Ende der Station (::after ist die Lesestrecke) */
.station--nacht .nacht__himmel::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 18px; background: var(--papier);
  clip-path: polygon(0 100%, 100% 100%, 100% 60%, 94% 25%, 88% 70%, 81% 30%, 74% 75%, 66% 35%, 58% 70%, 50% 25%, 43% 65%, 35% 30%, 28% 75%, 20% 35%, 13% 65%, 6% 25%, 0 50%);
}
.strichliste-tafel { position: relative; padding: 16px 16px 12px; border: 2px dashed rgba(242, 238, 228, 0.35); border-radius: 8px; max-width: 520px; }
.strichliste { display: block; width: 100%; height: auto; overflow: visible; }
.strichliste path { fill: none; stroke: #DDEBD6; stroke-width: 1.9; stroke-linecap: round; }
.strichliste__notiz { margin: 8px 0 0; font-size: 21px; font-weight: 600; line-height: 1.1; color: var(--nacht-kuli); }
.polaroid--blitz { margin: 30px 0 0 auto; }
.startrampe { position: relative; width: 210px; margin: 10px 0 0 auto; }
.startrampe__svg { display: block; width: 100%; height: auto; overflow: visible; }
.rauchspur circle { fill: rgba(226, 222, 214, 0.42); }
.flamme { opacity: 0; }
.rakete { transform-box: view-box; }
.startknopf {
  position: absolute; left: 6px; bottom: -58px; display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 4px 8px 4px 4px; border: 0; background: none; cursor: pointer; color: var(--nacht-kuli);
}
.startknopf__knopf { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #FF8E8E 0 20%, #E5484D 22% 64%, #8C1D22 66%); border: 3px solid #F2EEE4; box-shadow: 0 4px 0 #5D1418; }
.startknopf:active .startknopf__knopf { translate: 0 3px; box-shadow: 0 1px 0 #5D1418; }
.startknopf__text { font-size: 22px; font-weight: 700; white-space: normal; line-height: 1; rotate: -4deg; }
@media (min-width: 1100px) {
  .station--nacht { padding-top: 120px; padding-bottom: 320px; }
  .station--nacht .station__bild { display: grid; grid-template-columns: minmax(0, 1fr) 200px; grid-template-rows: auto auto; column-gap: 26px; }
  .strichliste-tafel { grid-column: 1 / -1; }
  .polaroid--blitz { grid-column: 1; margin: 30px 0 0 12px; width: min(100%, 250px); }
  .station .polaroid--blitz { width: min(100%, 250px); }
  .startrampe { grid-column: 2; grid-row: 2; align-self: end; width: 200px; margin: 0; }
}
@media (max-width: 1099px) {
  .station--nacht { padding-top: 84px; padding-bottom: 250px; }
  .station--nacht .station__bild { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr); column-gap: 14px; align-items: end; }
  .strichliste-tafel { grid-column: 1 / -1; }
  .polaroid--blitz { width: 100%; margin: 26px 0 0; }
  .polaroid--blitz figcaption { font-size: 18px; min-height: 40px; }
  .startrampe { width: 100%; max-width: 170px; margin: 0 0 0 auto; }
  .startknopf { position: relative; left: auto; bottom: auto; margin: 4px 0 0 auto; }
}

/* Station 10: Schlüssel und ehrliche Ampel */
.doodle--schluessel { width: min(100%, 420px); height: auto; }
#station-10 .polaroid--station { margin-top: 26px; }
.ampelpunkt { stroke: var(--tinte); stroke-width: 1.8; }
.ampelpunkt--g { fill: #40C057; }
.ampelpunkt--y { fill: #FFD43B; }
.ampelpunkt--r { fill: #E5484D; }
.schluessel { transform-box: view-box; }
@media (min-width: 1100px) {
  #station-10 .station__bild { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; }
  #station-10 .doodle--schluessel { grid-column: 1 / -1; }
  #station-10 .polaroid--station { width: 250px; margin-top: 10px; }
}

/* ---------- Fälle ---------- */
.faelle__lead { max-width: 36em; }
.akten { display: grid; gap: 40px; margin-top: 36px; grid-template-columns: minmax(0, 1fr); }
.akte {
  position: relative; background: var(--db-papier-hell); padding: 30px 22px 22px; rotate: var(--dreh, 0deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 22px 36px -20px rgba(40, 25, 5, 0.55);
  border-left: 6px solid var(--db-aktendeckel);
}
.akte__icon { position: absolute; right: 12px; top: -30px; width: 116px; height: 80px; }
.akte__titel { font-family: var(--serif); font-variation-settings: 'opsz' 48, 'SOFT' 70, 'WONK' 1; font-weight: 640; font-size: clamp(24px, 5.4vw, 28px); line-height: 1.1; margin: 22px 0 16px; padding-right: 30px; text-wrap: balance; hyphens: auto; overflow-wrap: break-word; }
.akte__titel a { color: inherit; text-decoration-color: var(--filz); text-decoration-thickness: 2.5px; text-underline-offset: 4px; }
.akte__verlauf { margin: 0; }
.akte__verlauf dt { font-size: 24px; font-weight: 700; color: var(--kuli); line-height: 1; margin: 12px 0 2px; }
.akte__verlauf dd { margin: 0; font-size: 16px; line-height: 1.5; }
.akte__zahlen { list-style: none; padding: 0; margin: 18px 0 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.akte__zahlen li { font-family: var(--hand); font-weight: 700; font-size: 21px; line-height: 1.05; color: var(--filz-text); background: var(--papier); border: 2px solid rgba(163, 74, 0, 0.45); border-radius: 12px 8px 14px 9px; padding: 5px 10px 6px; }
.akte__rollen { font-size: 14.5px; color: var(--blei); margin: 6px 0 0; }
.akte__stempel {
  position: absolute; left: 18px; top: -18px; margin: 0;
  font: 800 16px/1 var(--text); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--db-stempel-gruen); border: 3px solid var(--db-stempel-gruen); border-radius: 6px; padding: 7px 10px 6px 12px;
  background: rgba(255, 253, 247, 0.92); rotate: -9deg;
}
.akte .bueroklammer { right: 36%; }
@media (min-width: 1100px) {
  .akten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: start; }
  .akte:nth-child(2) { margin-top: 46px; }
  .akte:nth-child(3) { margin-top: 14px; }
}
.postit {
  position: relative; width: min(100%, 300px); margin: 46px 0 0 auto; padding: 18px 18px 16px;
  background: var(--db-postit); rotate: var(--dreh, 0deg);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.08), 0 16px 22px -14px rgba(60, 40, 0, 0.5);
}
.postit p { margin: 0; }
.postit .hand { font-size: 23px; line-height: 1.15; color: var(--tinte); font-weight: 600; }
.postit blockquote { margin: 0; }
.postit__von { margin-top: 10px !important; font: 600 13px/1.3 var(--text); color: var(--tinte); }
.postit__marke { font: 800 13px/1 var(--text); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px !important; color: var(--tinte); }

/* ---------- Kontakt ---------- */
.kontakt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding-bottom: 72px; }
.kontakt__lead { max-width: 34em; font-size: 18px; }
.kontakt__aktion { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 28px; padding: 18px 0; }
.kontakt__mail { margin: 0; }
.cta-kreis { position: absolute; left: -26px; top: -14px; width: 360px; height: 110px; overflow: visible; pointer-events: none; }
.ausschnitt--kontakt { width: min(70%, 300px); justify-self: end; rotate: 3deg; margin-top: 10px; }
.ausschnitt--kontakt figcaption { margin-top: 8px; text-align: center; font-size: 23px; line-height: 1.1; rotate: -3deg; }
.kontaktzeile { font-style: normal; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 16px; color: var(--blei); border-top: 2px dashed rgba(74, 72, 69, 0.35); padding-top: 16px; }
.kontaktzeile a { color: var(--kuli); }
.finale { margin: 30px 0 0; padding-bottom: 10px; }
.finale__satz { display: block; font-size: clamp(28px, 6.6vw, 42px); font-weight: 700; color: var(--tinte); line-height: 1.1; }
.finale__zeile { display: inline-block; }
.finale__punkt { display: inline-block; width: var(--punkt-groesse); height: var(--punkt-groesse); border-radius: 50%; background: var(--filz); margin-left: 0.12em; vertical-align: baseline; }
@media (min-width: 1100px) {
  .kontakt { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); column-gap: 40px; align-items: end; }
  .kontakt__text { grid-column: 1; }
  .ausschnitt--kontakt { grid-column: 2; grid-row: 1; width: 320px; align-self: center; }
  .kontaktzeile, .finale { grid-column: 1 / -1; }
  .cta-kreis { width: 420px; height: 120px; left: -30px; top: -16px; }
}

/* fliegender Punkt (Finale) und fliegende Rakete (Easter-Egg) */
.flieger { position: fixed; left: 0; top: 0; z-index: 75; pointer-events: none; }
.flieger--punkt { width: var(--punkt-groesse); height: var(--punkt-groesse); border-radius: 50%; background: var(--filz); }
.flieger--rakete { width: 46px; height: 76px; }

/* Wer per Tastatur in eine Karte oder Akte kommt, bevor sie gelandet ist, sieht sie sofort */
.bewegung :is(.karte, .akte, .postit):focus-within { opacity: 1 !important; }

/* Messen: Bühnen kurz nicht stehen lassen, damit Positionen stimmen (notizbuch.js, bauen) */
.messen .station__buehne, .messen .station__lesung { position: static !important; }

/* sehr schmal (320 px, entspricht 1280 px Fenster mit 400 % Zoom): Bedienelemente und Karten bleiben ganz im Bild */
@media (max-width: 359px) {
  .crew__liste { grid-template-columns: minmax(0, 1fr); }
}

/* Ohne JavaScript: Navigation offen statt Menü-Knopf, Spielzeug ohne Funktion ausblenden */
html:not(.js) [data-bewegung-knopf], html:not(.js) .rad, html:not(.js) .faden-griff, html:not(.js) [data-startknopf], html:not(.js) .kopf__notiz { display: none; }
@media (max-width: 1279px) {
  html:not(.js) .kopf { flex-wrap: wrap; row-gap: 6px; }
  html:not(.js) .kopf__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; flex-basis: 100%; margin-left: 0; }
  html:not(.js) .kopf__link { font-size: 22px; }
  html:not(.js) .hero__inhalt { padding-top: 230px; }
}
@media (min-width: 760px) and (max-width: 1279px) {
  html:not(.js) .hero__inhalt { padding-top: 220px; }
}

/* Fuß: siehe fuss.css (gemeinsam mit den Unterseiten) */

/* ---------- Stop-Motion: Zittern in Stufen (nur sichtbar, nur im Bewegungsmodus) ---------- */
@keyframes zittern {
  0% { translate: 0 0; rotate: var(--dreh, 0deg); }
  25% { translate: 0.7px -0.5px; rotate: calc(var(--dreh, 0deg) + 0.35deg); }
  50% { translate: -0.6px 0.4px; rotate: calc(var(--dreh, 0deg) - 0.3deg); }
  75% { translate: 0.4px 0.7px; rotate: calc(var(--dreh, 0deg) + 0.15deg); }
  100% { translate: 0 0; rotate: var(--dreh, 0deg); }
}
@keyframes hopsen { 0% { translate: 0 0; } 50% { translate: 0 5px; } 100% { translate: 0 0; } }
@keyframes wippen { 0% { rotate: -6deg; } 50% { rotate: -2deg; } 100% { rotate: -6deg; } }
/* Zittern nur kurz beim Erscheinen (notizbuch.js setzt .zittert für 0,6 s), nie als Dauerschleife */
.bewegung .zittert { animation: zittern var(--db-dauer-zittern) var(--db-stufen-1) 1; }
/* Spielzeug im Hero darf auf sich aufmerksam machen, aber nur ein paar Mal */
.bewegung .faden-griff.im-bild { animation: wippen 0.9s steps(2, end) 4; }
.bewegung .rad__hinweis { animation: hopsen 1.1s steps(2, end) 3; }
.bewegung-aus *, .bewegung-aus *::before, .bewegung-aus *::after { animation: none !important; transition: none !important; }

/* ---------- Ruhige Fassung: gleiche Inhalte, Endzustände, Schnitte statt Wege ---------- */
.bewegung-aus .polaroid--hero .polaroid__frei { opacity: 1; }
.bewegung-aus .polaroid--hero [data-popout] { transform: scale(1.26); }
.bewegung-aus .polaroid--hero .klebeband--ro { rotate: 104deg; scale: 1 -1; }
.bewegung-aus .stift-ruhig {
  display: block; position: absolute; z-index: 5; width: 26px; height: 100px; pointer-events: none;
  left: 2px; top: 34px; rotate: -20deg;
}
@media (min-width: 1100px) { .bewegung-aus .stift-ruhig { left: 108px; top: 20px; width: 30px; height: 116px; } }
.bewegung-aus .uhr-vorher { display: inline; }

/* Intro: verhindert ein Aufblitzen des Endzustands, bevor das Skript läuft */
.intro [data-intro='polaroid'], .intro [data-intro='steckbrief'], .intro .schlag, .intro .rad, .intro [data-intro='pausennotiz'], .intro .titel__fuer { opacity: 0; }
.intro [data-intro='hallo'], .intro [data-intro='reihenfolge'], .intro [data-intro='caption'] { clip-path: inset(-30% 100% -30% 0); }
.intro [data-intro='marker'] { background-size: 0% 64%; }
.intro [data-intro='unterstrich'] { stroke-dasharray: 0 9999; }
.intro .knaeuel-klein, .intro .faden-griff, .intro .marker[data-nr]::before { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html:not(.bewegung) *, html:not(.bewegung) *::before, html:not(.bewegung) *::after { animation: none !important; transition: none !important; }
}