/* minily.app · Warteliste B2. Werte aus Paper „04 · App-Entwürfe“ (BAB-84 · Warteliste B2, Handy 390, Laptop 1440, Bewegung). */

@font-face { font-family: "Fraunces"; src: url("schriften/fraunces-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; src: url("schriften/fraunces-latin-ext.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; src: url("schriften/fraunces-italic-latin.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; src: url("schriften/fraunces-italic-latin-ext.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito"; src: url("schriften/nunito-latin.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; src: url("schriften/nunito-latin-ext.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --creme: #F7F2EA;
  --papier: #FFFDF9;
  --leinen: #F3EEE6;
  --pip: #EFE6D6;
  --kohle: #33353A;
  --grau: #6B6D72;
  --icon-grau: #8A8C90;
  --salbei: #9CAF94;
  --salbei-dunkel: #64795D;
  --salbei-text: #4F6249;
  --salbei-weich: #DCE5D6;
  --salbei-chip: #EEF2EA;
  --sand: #D9C4A8;
  --linie: #E2DACD;
  --linie-stark: #C9C0B2;
  --gefahr: #A4483C;
  --warm: 110 85 50;
  /* Bewegung: ein Kurvenpaar für die ganze Seite (auch im Skript gelesen) */
  --weich: cubic-bezier(0.23, 1, 0.32, 1);
  --schieben: cubic-bezier(0.77, 0, 0.175, 1);
  --serif: "Fraunces", Georgia, serif;
  --sans: "Nunito", system-ui, sans-serif;
  /* Seitenrand: Handy 20 px, auf Tablets mittig mit höchstens 560 px Text */
  --rand: max(20px, calc((100% - 560px) / 2));
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--creme);
  color: var(--kohle);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}
h1, h2, h3, p, ul, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }
img, svg { display: block; }
img { max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
main { overflow-x: clip; }
:focus-visible { outline: 3px solid var(--kohle); outline-offset: 3px; border-radius: 4px; }
.titel:focus { outline: none; }
.unsichtbar, .ansage {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.nur-laptop { display: none; }

/* ---------- 404-Seite (Paper „Zustände Nachtrag“ L): Inhalt senkrecht mittig unter der Kopfzeile, oben 24, unten 64 ---------- */
.fehlerseite { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100svh - 52px); padding: 24px var(--rand) 64px; text-align: center; }
.fehlerseite img { width: 160px; height: auto; }
.fehlerseite-kennzeile { margin-top: 20px; color: var(--salbei-text); font-weight: 800; font-size: 13px; line-height: 16px; letter-spacing: .12em; }
.fehlerseite-titel { max-width: 240px; margin-top: 10px; font: 700 36px/38px var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 96; letter-spacing: -0.01em; text-wrap: balance; }
.fehlerseite-text { max-width: 330px; margin-top: 12px; font-weight: 600; font-size: 16px; line-height: 23px; }
.fehlerseite .knopf { width: auto; margin-top: 24px; padding: 0 32px; text-decoration: none; }
.fehlerseite .fuss-sprachen { width: 100%; max-width: 350px; margin-top: 20px; }
.fehlerseite .fuss-sprachen ul { justify-content: center; color: var(--salbei-text); font-weight: 600; }
.fehlerseite .fuss-sprachen a { text-decoration: none; }


/* ---------- Kopfzeile ---------- */
.kopf { display: flex; align-items: center; justify-content: center; height: 52px; padding-top: 8px; }
.kopf .logo { width: 96px; height: 30px; }
.leiste-oben { display: none; }

/* ---------- Kopfbild „Pip hält Milas Buch“ (Paper B4 „Bild randlos“, 390 × 300) ----------
   Randlos, oben 28 px und unten 56 px weicher Übergang in Creme. Fester Rahmen in der Grundfarbe des Bilds
   als ruhiger Platzhalter, bis das Bild geladen ist (nichts springt). */
.kopf-bild { position: relative; overflow: hidden; aspect-ratio: 390 / 300; background: #D4BDA7; }
.kopf-bild picture, .kopf-bild img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.kopf-bild::before, .kopf-bild::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.kopf-bild::before { top: 0; height: 28px; background: linear-gradient(180deg, var(--creme), rgb(247 242 234 / 0)); background: linear-gradient(in oklab 180deg, var(--creme), rgb(247 242 234 / 0)); }
.kopf-bild::after { bottom: 0; height: 56px; background: linear-gradient(180deg, rgb(247 242 234 / 0), var(--creme)); background: linear-gradient(in oklab 180deg, rgb(247 242 234 / 0), var(--creme)); }
.sb-bild img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Pip: Standbild, darüber der Clip (deckungsgleich) ---------- */
.pip { position: absolute; }
.pip picture, .pip-bild, .pip-clip { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.pip-bild { object-fit: contain; }
.pip-clip { object-fit: contain; opacity: 0; pointer-events: none; }
.pip.spielt .pip-clip { opacity: 1; }
/* Das Standbild geht erst weg, wenn der Clip sein erstes Bild gemalt hat (seite.js: gemalt); bis dahin liegt der Clip darüber. */
.pip.bild-weg .pip-bild { opacity: 0; }
.blaetter { position: absolute; left: 50%; top: 10%; width: 0; height: 0; }
.blatt { position: absolute; left: -8px; top: -5px; width: 16px; height: 10px; opacity: 0; }

/* ---------- Store-Abzeichen (oben in der Geräte-Zeile, unten unter dem Knopf) ----------
   Offizielle Dateien von Apple und Google, unverändert, beide genau 40 px hoch (Apples Mindesthöhe),
   App Store zuerst, zwischen und um die Abzeichen mindestens ein Viertel der Höhe (10 px) frei. */
.abzeichen-reihe { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 6px; }
.abzeichen-zeile { color: #5C5E63; font-weight: 700; font-size: 14px; line-height: 18px; }
.abzeichen-paar { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.abzeichen { display: block; flex-shrink: 0; padding: 0; border: 0; border-radius: 7px; background: none; cursor: pointer; }
.abzeichen img { display: block; width: auto; height: 40px; }
.abzeichen-unten { padding-top: 10px; }

/* ---------- Eintragen (oben und unten) ---------- */
.block .zustand { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; transition: opacity .2s; }
.block.wartet .zustand { opacity: 0; }
.block-oben { position: relative; padding: 4px var(--rand) 36px; }
/* Zustände nach dem Eintragen und aus der Mail (ohne „Bald für das iPhone“): Überschrift 10 px unter der Bühne */
.block-oben[data-zustand] { padding-top: 10px; }
.block-oben[data-zustand="eingetragen"] .titel { line-height: 39px; }
/* K · Link aus der Mail wird geprüft: Inhalt unsichtbar, Platz bleibt; nach 1 s „Einen Moment …“ (seite.js: lange) */
.moment { position: absolute; left: var(--rand); right: var(--rand); top: 56px; color: var(--grau); font-weight: 600; font-size: 16px; line-height: 22px; text-align: center; opacity: 0; visibility: hidden; }
.block-oben.wartet.lange .moment { opacity: 1; visibility: visible; transition: opacity .2s ease; }
/* Hinweis über der Überschrift (Paper „Hinweis oben“), nur im Zustand Eintragen */
.kopf-hinweis { margin-bottom: -4px; color: var(--salbei-text); font-weight: 800; font-size: 15px; line-height: 20px; }
.block-oben .titel {
  font: 700 36px/38px var(--serif);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 96;
  letter-spacing: -0.01em;
}
.einleitung { max-width: 330px; font-weight: 600; font-size: 16px; line-height: 23px; }
.block-oben .einleitung { line-height: 22px; }
/* B4: Pips Vorstellung steht am Handy unter den Store-Abzeichen (20 px mehr Abstand), das Feld 4 px tiefer unter der Überschrift */
.block-oben:not([data-zustand]) .zustand > .einleitung { margin-top: 20px; }
.block-oben:not([data-zustand]) .formular { margin-top: 4px; }
.klein { padding-top: 4px; color: var(--grau); font-weight: 600; font-size: 13px; line-height: 19px; }

.formular {
  display: grid;
  grid-template-areas: "feld" "fehler" "vorschlag" "knopf";
  /* Abstände als Rand statt Spaltenabstand: die leere Fehlerzeile soll keinen Platz kosten */
  width: 100%;
  margin-top: 4px;
  text-align: left;
}
.formular.hat-fehler + .klein { margin-top: -4px; }
.feld-rahmen {
  grid-area: feld;
  display: flex; align-items: center; gap: 8px;
  height: 56px; padding: 0 16px;
  border-radius: 16px;
  background: var(--papier);
  box-shadow: inset 0 0 0 2px var(--linie);
  transition: box-shadow .2s;
}
.feld-rahmen:focus-within { box-shadow: inset 0 0 0 2px var(--salbei-dunkel); }
.hat-fehler .feld-rahmen { box-shadow: inset 0 0 0 2px var(--gefahr); }
.feld {
  flex: 1; min-width: 0; height: 100%;
  padding: 0; border: 0; outline: none;
  background: transparent; color: var(--kohle);
  font: 600 17px/22px var(--sans);
}
.feld::placeholder { color: var(--grau); opacity: 1; }
.feld:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--papier) inset; -webkit-text-fill-color: var(--kohle); }
.feld-warnung { display: none; width: 22px; height: 22px; flex-shrink: 0; }
.hat-fehler .feld-warnung { display: block; }
.fehler { grid-area: fehler; display: none; margin-top: 4px; padding-left: 16px; color: var(--gefahr); font-weight: 700; font-size: 15px; line-height: 20px; }
.hat-fehler .fehler { display: block; }
/* H · „Meinst du …?“ 4 px unter dem Feld, Handy: „Ja, übernehmen“ in eigener Zeile, Laptop: in derselben Zeile */
.vorschlag { grid-area: vorschlag; margin-top: 4px; padding-left: 16px; color: var(--grau); font-weight: 600; font-size: 15px; line-height: 20px; }
.vorschlag[hidden] { display: none; }
.vorschlag-adresse { color: var(--kohle); font-weight: 800; overflow-wrap: anywhere; }
.vorschlag-knopf { display: block; padding: 0; border: 0; background: none; color: var(--salbei-text); font: inherit; font-weight: 800; text-decoration: underline 1px; text-underline-offset: 3px; white-space: nowrap; cursor: pointer; position: relative; }
/* Tippfläche mindestens 44 px hoch, die Schrift bleibt gleich */
.vorschlag-knopf::after { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; translate: 0 -50%; }
.formular .knopf { margin-top: 12px; }
/* Oben enger, damit der Knopf auf dem Handy im ersten Bild liegt (Paper: Feld direkt unter dem Text, Knopf 10 darunter) */
.block-oben .formular { margin-top: 0; }
.block-oben .formular .knopf { margin-top: 10px; }
.falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.knopf {
  grid-area: knopf;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 56px; padding: 0 30px;
  border: 0; border-radius: 999px;
  background: var(--salbei-dunkel); color: #FFFFFF;
  font: 700 17px/22px var(--sans);
  box-shadow: 2px 10px 24px rgb(100 121 93 / .26);
  transition: background-color .2s ease, opacity .2s ease, scale .16s var(--weich);
}
.knopf:active:not([aria-disabled="true"]) { scale: .97; }
.knopf:focus-visible { outline-offset: 3px; border-radius: 999px; }
.knopf[aria-disabled="true"] { opacity: .45; cursor: progress; }
.knopf-haken { display: none; width: 18px; height: 18px; flex-shrink: 0; }
.kopiert .knopf-haken { display: block; }

/* Zustand D: Postfach prüfen */
.adresse-text { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; max-width: 330px; }
.adresse-text p { font-weight: 600; font-size: 16px; line-height: 23px; }
.adresse-text .adresse { font-weight: 800; overflow-wrap: anywhere; }
.textknoepfe { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 28px; }
.textknopf {
  min-height: 44px; padding: 0; border: 0; background: none;
  color: var(--salbei-text); font: 700 16px/21px var(--sans);
}
.textknopf-leise { color: var(--grau); font-weight: 600; font-size: 15px; }

.textknopf[aria-disabled="true"] { opacity: .45; cursor: progress; }
.textknopf[data-pause] { cursor: default; }
/* D2 · D3 · Rückmeldung nach „Mail nochmal schicken“ 12 px unter den Textknöpfen, das Kleingedruckte 12 px darunter */
.nochmal-meldung { max-width: 330px; color: var(--salbei-text); font-weight: 700; font-size: 14px; line-height: 19px; }
.nochmal-meldung:empty { display: none; }
.nochmal-meldung:not(:empty) + .klein { padding-top: 0; }
.klein-vor-formular { padding-top: 0; }

/* Unten eintragen */
.unten {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 40px var(--rand) 36px;
  border-radius: 40px 40px 0 0;
  background: var(--salbei-weich);
}
.unten-pip { width: 150px; height: 180px; object-fit: contain; }
.block-unten { width: 100%; }
.block-unten .titel {
  font: 700 28px/32px var(--serif);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
}
.block-unten .formular { margin-top: 6px; }


/* ---------- Kapitel und Szenen ---------- */
.kapitel { display: flex; flex-direction: column; gap: 14px; }
.kapitel-text { display: contents; }
.marke {
  order: -1;
  display: flex; align-items: center; gap: 10px;
  color: var(--salbei-text);
  font-weight: 800; font-size: 13px; line-height: 16px; letter-spacing: .1em; text-transform: uppercase;
}
.marke-zahl {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--salbei-dunkel); color: #FFFFFF;
  font-weight: 900; font-size: 16px; line-height: 20px; letter-spacing: 0;
}
.kapitel-titel {
  font: 700 28px/32px var(--serif);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
}
.kapitel-absatz { font-weight: 600; font-size: 17px; line-height: 26px; }
.pfad-verbinder { display: none; }

/* Szenen: Koordinaten wie in Paper (350 breit), --u = ein Paper-Pixel, wächst mit der Breite */
.szene-rahmen { container-type: inline-size; width: 100%; max-width: 400px; }
.szene { --u: calc(100cqw / 350); position: relative; width: 100%; }
.szene > * { position: absolute; }
.szene-pip { object-fit: contain; max-width: none; }
.szene p { margin: 0; }

.szene-problem { height: calc(230 * var(--u)); }
.buch-offen {
  left: calc(118 * var(--u)); top: calc(28 * var(--u));
  width: calc(226 * var(--u)); height: calc(172 * var(--u));
  display: flex; rotate: 3deg; transform-origin: 0 0;
  border-radius: calc(6 * var(--u));
  box-shadow: 0 calc(14 * var(--u)) calc(28 * var(--u)) rgb(var(--warm) / .18);
}
.buch-seite {
  display: flex; flex-direction: column; flex-shrink: 0;
  width: calc(113 * var(--u)); height: calc(172 * var(--u));
  padding: calc(14 * var(--u)) calc(12 * var(--u));
  background: var(--papier);
}
.buch-links { gap: calc(8 * var(--u)); border-right: calc(1 * var(--u)) solid var(--linie); border-radius: calc(6 * var(--u)) 0 0 calc(6 * var(--u)); }
.buch-rechts { gap: calc(12 * var(--u)); border-radius: 0 calc(6 * var(--u)) calc(6 * var(--u)) 0; }
.buch-foto { width: calc(89 * var(--u)); height: calc(70 * var(--u)); object-fit: cover; border-radius: calc(2 * var(--u)); flex-shrink: 0; }
.buch-unterschrift { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: calc(11 * var(--u)); line-height: calc(14 * var(--u)); white-space: nowrap; }
.buch-linie { display: block; flex-shrink: 0; width: calc(89 * var(--u)); height: calc(1 * var(--u)); background: var(--linie-stark); }
.buch-linie.kurz { width: calc(70 * var(--u)); }
.buch-rechts .buch-linie { background: var(--linie); }
.buch-platz { display: block; flex-shrink: 0; width: calc(89 * var(--u)); height: calc(70 * var(--u)); border: calc(1.5 * var(--u)) dashed var(--linie-stark); border-radius: calc(3 * var(--u)); }
.szene-striche { left: calc(250 * var(--u)); top: calc(4 * var(--u)); width: calc(34 * var(--u)); height: calc(30 * var(--u)); }

/* ---------- Geschichte: Problem und Rundgang durch die App ---------- */
.geschichte {
  display: flex; flex-direction: column; gap: 56px;
  padding: 44px var(--rand);
  border-radius: 40px 40px 0 0;
  background: var(--leinen);
}
.pfad-verbinder { display: none; }
.pip-zeigen { left: calc(-4.4 * var(--u)); top: calc(52.5 * var(--u)); width: calc(154.8 * var(--u)); height: calc(177 * var(--u)); }

.tour { display: flex; flex-direction: column; gap: 56px; }
.schritt { display: flex; flex-direction: column; gap: 14px; }
.schritt-text { display: contents; }
/* Handy: Marke, dann die Bühne, dann Überschrift und Text */
.schritt .marke { order: -2; }
.schritt-buehne { order: -1; }

/* Bühne je Schritt (Paper „Bühne“ 350 × 440) */
.schritt-buehne { container-type: inline-size; width: 100%; max-width: 400px; }
.sb-innen { --u: calc(100cqw / 350); position: relative; height: calc(440 * var(--u)); }
.sb-innen > * { position: absolute; }
.sb-kreis { left: calc(30 * var(--u)); top: calc(80 * var(--u)); width: calc(300 * var(--u)); height: calc(300 * var(--u)); border-radius: 50%; background: var(--salbei-weich); }
.sb-handy {
  left: calc(144 * var(--u)); top: calc(6 * var(--u)); width: calc(196 * var(--u)); height: calc(425 * var(--u));
  overflow: hidden; border-radius: calc(32 * var(--u));
  background: var(--papier);
  box-shadow: 0 calc(20 * var(--u)) calc(40 * var(--u)) rgb(var(--warm) / .2), 0 0 0 calc(5 * var(--u)) var(--papier);
}
.sb-bild { position: absolute; inset: 0; }
.sb-schatten { left: calc(24 * var(--u)); top: calc(418 * var(--u)); width: calc(116 * var(--u)); height: calc(14 * var(--u)); border-radius: 999px; background: rgb(var(--warm) / .18); filter: blur(calc(5 * var(--u))); }
.pip-fangen    { left: calc(8.9 * var(--u));  top: calc(243.8 * var(--u)); width: calc(141.3 * var(--u)); height: calc(185.9 * var(--u)); }
.pip-schreiben { left: calc(14 * var(--u));   top: calc(256.5 * var(--u)); width: calc(130.3 * var(--u)); height: calc(173.1 * var(--u)); }
.pip-zuhoeren  { left: calc(13.4 * var(--u)); top: calc(256.5 * var(--u)); width: calc(133.2 * var(--u)); height: calc(172.9 * var(--u)); }
.pip-fotografieren { left: calc(23.1 * var(--u)); top: calc(256.5 * var(--u)); width: calc(111.6 * var(--u)); height: calc(172.9 * var(--u)); }
.pip-filmen    { left: calc(25.8 * var(--u)); top: calc(256.5 * var(--u)); width: calc(106.7 * var(--u)); height: calc(172.9 * var(--u)); }
.pip-buch      { left: calc(19.9 * var(--u)); top: calc(256.5 * var(--u)); width: calc(115.5 * var(--u)); height: calc(172.9 * var(--u)); }

/* Monatsfilm: echter Film im Bildschirm „5 Film ansehen“ (Paper 393 × 852), ohne Pause- und Abspielknopf */
.film { container-type: inline-size; overflow: hidden; background: #1F2023; color: #FFFFFF; }
.film > * { --f: calc(100cqw / 393); position: absolute; }
/* Schalter in seite.html: data-film="aus" zeigt das Paper-Standbild, data-film="an" den echten Film mit nachgebauter Oberfläche */
.film[data-film="aus"] > :not(.film-standbild), .film[data-film="an"] > .film-standbild { display: none; }
.film-standbild { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film-video { inset: 0; width: 100%; height: 100%; object-fit: cover; scale: 1.15; transform-origin: 50% 100%; }
.film-verlauf-oben { left: 0; top: 0; width: 100%; height: calc(140 * var(--f)); background: linear-gradient(180deg, rgb(31 32 35 / .4), rgb(31 32 35 / 0)); }
.film-verlauf-unten { left: 0; bottom: 0; width: 100%; height: calc(380 * var(--f)); background: linear-gradient(180deg, rgb(31 32 35 / 0) 0%, rgb(31 32 35 / .8) 55%, rgb(31 32 35 / .95) 100%); }
.film-uhr { left: calc(54 * var(--f)); top: calc(21 * var(--f)); font: 600 calc(17 * var(--f)) / calc(22 * var(--f)) system-ui, sans-serif; }
.film-status { right: calc(32 * var(--f)); top: calc(21 * var(--f)); width: calc(82 * var(--f)); height: calc(22 * var(--f)); }
.film-zu, .film-ton { display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.film-zu { left: calc(24 * var(--f)); top: calc(64 * var(--f)); width: calc(44 * var(--f)); height: calc(44 * var(--f)); background: var(--papier); box-shadow: 0 calc(4 * var(--f)) calc(12 * var(--f)) rgb(51 53 58 / .2); }
.film-zu svg { width: calc(18 * var(--f)); height: calc(18 * var(--f)); }
/* „Ton aus“: kleines Zeichen oben rechts, nur solange der Film läuft */
.film-ton { right: calc(24 * var(--f)); top: calc(68 * var(--f)); width: calc(36 * var(--f)); height: calc(36 * var(--f)); background: rgb(31 32 35 / .45); opacity: 0; }
.film-ton svg { width: calc(18 * var(--f)); height: calc(18 * var(--f)); }
.film.laeuft .film-ton { opacity: 1; }
.film-info { left: calc(24 * var(--f)); bottom: calc(40 * var(--f)); width: calc(345 * var(--f)); display: flex; flex-direction: column; }
.film-art { color: rgb(255 255 255 / .8); font-weight: 800; font-size: calc(13 * var(--f)); line-height: calc(16 * var(--f)); letter-spacing: .1em; }
.film-name { margin-top: calc(6 * var(--f)); font-family: var(--serif); font-weight: 400; font-size: calc(34 * var(--f)); line-height: calc(40 * var(--f)); font-variation-settings: "SOFT" 100; white-space: nowrap; }
.film-leiste { position: relative; margin-top: calc(20 * var(--f)); height: calc(4 * var(--f)); border-radius: calc(2 * var(--f)); background: rgb(255 255 255 / .3); }
.film-fuellung { position: absolute; left: 0; top: 0; width: calc(140 * var(--f)); height: 100%; border-radius: inherit; background: #FFFFFF; }
.film-knauf { position: absolute; left: calc(134 * var(--f)); top: calc(-4 * var(--f)); width: calc(12 * var(--f)); height: calc(12 * var(--f)); border-radius: 50%; background: #FFFFFF; }
.film-zeiten { display: flex; justify-content: space-between; margin-top: calc(8 * var(--f)); color: rgb(255 255 255 / .8); font-weight: 600; font-size: calc(13 * var(--f)); line-height: calc(17 * var(--f)); }
.film-knoepfe { display: flex; gap: calc(12 * var(--f)); margin-top: calc(20 * var(--f)); font-weight: 700; font-size: calc(17 * var(--f)); line-height: calc(22 * var(--f)); white-space: nowrap; }
.film-teilen, .film-aendern { display: flex; align-items: center; justify-content: center; height: calc(56 * var(--f)); border-radius: calc(28 * var(--f)); }
.film-teilen { flex-grow: 1; gap: calc(8 * var(--f)); background: var(--papier); color: var(--kohle); }
.film-teilen svg { width: calc(20 * var(--f)); height: calc(20 * var(--f)); }
.film-aendern { padding: 0 calc(20 * var(--f)); box-shadow: inset 0 0 0 calc(1.5 * var(--f)) rgb(255 255 255 / .4); }
@media (prefers-reduced-motion: reduce) {
  /* Mit „Bewegung reduzieren“ läuft der Film erst nach Antippen */
  .film.wartet-auf-tippen { cursor: pointer; }
}

/* ---------- Später anfangen ---------- */
.szene-monate { height: calc(120 * var(--u)); }
.monate-pfad { left: calc(10 * var(--u)); top: calc(20 * var(--u)); width: calc(330 * var(--u)); height: calc(80 * var(--u)); }
.monat {
  display: flex; align-items: center; justify-content: center;
  width: calc(44 * var(--u)); height: calc(44 * var(--u));
  border: calc(2 * var(--u)) solid var(--linie-stark); border-radius: 50%;
  background: var(--papier);
  color: var(--kohle); font-weight: 900; font-size: calc(16 * var(--u)); line-height: calc(20 * var(--u));
}
.monat.erledigt { border-color: var(--salbei-dunkel); background: var(--salbei-dunkel); }
.monat svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.monat-1 { left: 0; top: calc(58 * var(--u)); }
.monat-2 { left: calc(66 * var(--u)); top: calc(26 * var(--u)); }
.monat-3 { left: calc(132 * var(--u)); top: calc(62 * var(--u)); }
.monat-4 { left: calc(198 * var(--u)); top: calc(30 * var(--u)); }
.pip-wartet { left: calc(262 * var(--u)); top: 0; width: calc(84 * var(--u)); height: calc(101 * var(--u)); }

.bereich-text { display: flex; flex-direction: column; gap: 14px; }
.spaeter-bereich { display: flex; flex-direction: column; gap: 14px; padding: 48px var(--rand) 44px; }

/* ---------- Privat ---------- */
.privat-bereich { display: flex; flex-direction: column; gap: 18px; padding: 36px max(24px, calc((100% - 560px) / 2)) 32px; border-radius: 40px 40px 0 0; background: var(--salbei-dunkel); }
.privat-titel { color: var(--creme); font: 700 34px/38px var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 96; }
.privat-liste { display: flex; flex-direction: column; gap: 12px; }
.privat-liste li { padding: 14px 18px; border-radius: 20px; background: var(--papier); font-weight: 700; font-size: 15px; line-height: 21px; }

/* ---------- Fragen ---------- */
.fragen-bereich { padding: 48px var(--rand) 40px; }
.fragen-titel { padding-bottom: 12px; font: 600 30px/34px var(--serif); font-variation-settings: "opsz" 72, "SOFT" 50; }
.frage { display: flex; flex-direction: column; gap: 6px; padding: 18px 0; border-bottom: 1px solid var(--linie); }
.frage:last-child { border-bottom: 0; }
.frage dt { font-weight: 800; font-size: 17px; line-height: 24px; }
.frage dd { font-weight: 500; font-size: 16px; line-height: 24px; }

/* ---------- Fußzeile ---------- */
.fuss { display: flex; flex-direction: column; gap: 6px; padding: 24px var(--rand) 32px; background: var(--salbei-weich); color: var(--salbei-text); font-weight: 600; font-size: 14px; line-height: 24px; }
.fuss a { text-decoration: none; }
/* Hover nur mit Maus, sonst bleibt der Zustand nach dem Antippen hängen */
@media (hover: hover) and (pointer: fine) {
  .knopf:hover:not([aria-disabled="true"]) { background: #586C52; }
  .textknopf:hover, .fuss a:hover { text-decoration: underline; text-underline-offset: 3px; }
}
/* Sprachwahl (Paper „Sprachwahl“): linksbündig wie die anderen Zeilen, Umbruch nur zwischen ganzen Namen */
.fuss-sprachen ul { display: flex; flex-wrap: wrap; gap: 0 14px; font-size: 14px; line-height: 24px; }
.fuss-sprachen a[aria-current] { color: #2E3033; font-weight: 800; }
.fuss-sprachen li { white-space: nowrap; }

/* ---------- Leisten und Hinweis ---------- */
.leiste-unten {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; justify-content: center;
  padding: 14px var(--rand) max(26px, calc(env(safe-area-inset-bottom) + 12px));
  border-top: 1px solid var(--linie);
  background: var(--papier);
  translate: 0 100%; visibility: hidden;
  transition: translate .2s var(--weich), visibility 0s .2s;
}
.leiste-unten.zeigen { translate: 0 0; visibility: visible; transition: translate .2s var(--weich), visibility 0s; }

.hinweis-verbindung {
  position: fixed; left: 50%; top: 60px; z-index: 30;
  display: flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 8px 0 16px;
  translate: -50% 0;
  border-radius: 999px;
  background: var(--papier);
  box-shadow: 0 1px 2px rgb(var(--warm) / .06), 2px 8px 24px rgb(var(--warm) / .12);
  color: var(--kohle); font-weight: 600; font-size: 15px; line-height: 21px; white-space: nowrap;
}
.hinweis-verbindung[hidden] { display: none; }
.hinweis-verbindung svg { width: 18px; height: 18px; flex-shrink: 0; }
.hinweis-nochmal { height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--salbei-chip); color: var(--salbei-text); font-weight: 700; font-size: 15px; line-height: 20px; }
.hinweis-nochmal:focus-visible { border-radius: 999px; }

/* ================= Laptop ab 1024 px ================= */
@media (min-width: 1024px) {
  :root { --rand: clamp(40px, 8.333vw, 120px); }
  .nur-laptop { display: inline; }
  .nur-handy { display: none; }

  .kopf { justify-content: flex-start; height: 88px; padding: 0 var(--rand); }

  .fehlerseite { min-height: calc(100svh - 88px); }
  .fehlerseite-kennzeile { font-size: 14px; line-height: 18px; }
  .fehlerseite-titel { max-width: 640px; font-size: 56px; line-height: 60px; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; }
  .fehlerseite-text { max-width: 480px; font-size: 18px; line-height: 26px; }
  .fehlerseite .fuss-sprachen { max-width: none; }
  .fehlerseite .fuss-sprachen ul { gap: 0 24px; color: var(--grau); font-size: 16px; line-height: 24px; }
  .fehlerseite .fuss-sprachen a[aria-current] { color: var(--kohle); }
  .kopf .logo, .leiste-oben .logo { width: 128px; height: 40px; }

  .leiste-oben {
    display: block; position: fixed; left: 0; right: 0; top: 0; z-index: 20;
    background: var(--papier);
    opacity: 0; visibility: hidden;
    transition: opacity .2s, visibility 0s .2s;
  }
  .leiste-oben.zeigen { opacity: 1; visibility: visible; transition: opacity .2s, visibility 0s; }
  .leiste-oben-innen { position: relative; display: flex; align-items: center; justify-content: space-between; height: 88px; padding: 0 var(--rand); }
  .leiste-oben-innen::after { content: ""; position: absolute; left: var(--rand); right: var(--rand); bottom: 0; height: 1px; background: var(--linie); }
  .knopf-klein { width: auto; height: 44px; padding: 0 22px; font-size: 15px; line-height: 20px; box-shadow: none; }
  .leiste-unten { display: none; }

  /* Kopf B4 (1440 × 860 mit Kopfzeile): Bild rechts randlos ab x 700 bis zum Rand, ganze Höhe, Ecke unten links 56.
     Textspalte 520 breit ab 120 / 180. Unten bleiben mindestens 64 px frei; reicht die Spalte tiefer
     (dreizeilige Überschrift in langen Sprachen), wächst der Kopf mit, das Bild bleibt ganz hoch. */
  .oben {
    position: relative; display: grid;
    grid-template-columns: min(520px, calc(100vw * 700 / 1440 - var(--rand) - 60px)); grid-template-rows: 1fr;
    min-height: 772px; padding: 92px var(--rand) 64px;
  }
  .kopf-bild { position: absolute; top: -88px; right: 0; bottom: 0; left: calc(100% * 700 / 1440); aspect-ratio: auto; border-bottom-left-radius: 56px; background: #CCB39C; }
  .kopf-bild::before, .kopf-bild::after { display: none; }

  .block-oben, .block-oben[data-zustand] { grid-column: 1; grid-row: 1; align-self: start; padding: 0; }
  /* Zustände nach dem Eintragen und aus der Mail: senkrecht mittig zum Bild (Mitte bei 430, wie bisher zur Bühne) */
  .block-oben[data-zustand] { align-self: center; translate: 0 -58px; }
  /* Reihenfolge am Laptop wie bisher: Pips Vorstellung gleich unter der Überschrift */
  .block-oben:not([data-zustand]) .zustand > * { order: 2; }
  .block-oben:not([data-zustand]) .zustand > .kopf-hinweis { order: 0; }
  .block-oben:not([data-zustand]) .zustand > .titel { order: 1; }
  .block-oben:not([data-zustand]) .zustand > .einleitung { order: 1; margin-top: 0; }
  .block-oben:not([data-zustand]) .formular { margin-top: 8px; }
  /* K am Laptop: „Einen Moment …“ links in der Spalte, senkrecht in ihrer Mitte */
  .moment { left: 0; right: 0; top: 50%; translate: 0 -50%; font-size: 18px; line-height: 26px; text-align: left; }
  .vorschlag-knopf { display: inline; }
  .block-oben .nochmal-meldung { max-width: 560px; font-size: 15px; line-height: 22px; }
  .block.block-oben .zustand { align-items: flex-start; gap: 20px; text-align: left; }
  .block-oben .titel { max-width: 520px; font-size: 64px; line-height: 68px; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; }
  /* „Fast geschafft.“ hat am Handy 39 px Zeilenhöhe; am Laptop wie alle Überschriften 64/68 */
  .block-oben[data-zustand="eingetragen"] .titel { line-height: 68px; }
  .kopf-hinweis { margin-bottom: -8px; font-size: 16px; line-height: 20px; }
  .block-oben .einleitung { max-width: 580px; line-height: 30px; }
  .block-oben:not([data-zustand]) .einleitung { max-width: 520px; font-size: 19px; line-height: 28px; }
  .block-oben .formular { margin-top: 8px; }
  .block-oben .formular .knopf { margin-top: 0; }
  .block-oben .formular + .klein { margin-top: -8px; }
  .block-oben .klein { max-width: 520px; }
  .abzeichen-oben { align-items: flex-start; padding-top: 4px; }
  .abzeichen-oben .abzeichen-paar { justify-content: flex-start; }

  .block .zustand { gap: 16px; }
  .einleitung { max-width: 700px; font-size: 20px; line-height: 30px; }
  .zustandstext { max-width: 640px; }
  .klein { max-width: 560px; padding-top: 0; font-size: 14px; line-height: 21px; }
  .formular {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "feld knopf" "fehler fehler" "vorschlag vorschlag";
    column-gap: 12px;
    width: 600px; max-width: 100%;
    margin-top: 8px;
  }
  .formular .knopf { width: auto; margin-top: 0; }
  .formular.hat-fehler + .klein { margin-top: 0; }
  /* Nur zum Messen (seite.js obenAusgleich): so hoch wäre die Spalte ohne Fehlersatz und Vorschlag */
  .block-oben.ohne-zusatz .fehler, .block-oben.ohne-zusatz .vorschlag { display: none; }
  .block-oben.ohne-zusatz .formular.hat-fehler + .klein { margin-top: -8px; }
  .adresse-text { max-width: 640px; }
  .block-oben .adresse-text { align-items: flex-start; }
  .block-oben .textknoepfe { justify-content: flex-start; }
  .adresse-text p { font-size: 20px; line-height: 30px; }
  .textknoepfe { column-gap: 32px; }
  .textknopf { font-size: 17px; line-height: 22px; }
  .textknopf-leise { font-size: 16px; }
  .knopf-teilen { width: auto; margin-top: 8px; }

  .unten { gap: 16px; padding: 72px var(--rand) 64px; border-radius: 64px 64px 0 0; }
  .unten-pip { width: 200px; height: 240px; }
  .block-unten .titel { max-width: 760px; font-size: 52px; line-height: 56px; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 120; }
  .block-unten .formular { margin-top: 8px; }

  /* Geschichte: Problem als Zeile, dann der Rundgang mit festem Handy rechts */
  .geschichte {
    /* Bühne 560 × 700 wie in Paper, kleiner auf schmalen oder niedrigen Bildschirmen */
    --bw: min(560px, calc((100vw - 2 * var(--rand) - 120px) * 0.5185), calc((100vh - 120px) * 0.8));
    --bh: calc(var(--bw) * 1.25);
    gap: 24px; padding: 96px var(--rand); border-radius: 64px 64px 0 0;
  }
  .kapitel {
    display: grid; align-items: center;
    grid-template-columns: minmax(0, 520fr) minmax(0, 480fr);
    column-gap: clamp(48px, 6.667vw, 96px);
    max-width: 1096px; width: 100%;
  }
  .kapitel-text, .schritt-text { display: flex; flex-direction: column; gap: 16px; }
  .szene-rahmen { max-width: 520px; }
  .marke { font-size: 14px; line-height: 18px; }
  .marke-zahl { width: 36px; height: 36px; font-size: 17px; line-height: 22px; }
  .kapitel-titel { font-size: 48px; line-height: 52px; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 120; }
  .kapitel-absatz { font-size: 20px; line-height: 30px; }
  .pfad-verbinder { display: block; align-self: center; width: 200px; height: 80px; flex-shrink: 0; }

  .tour {
    display: grid; align-items: center;
    grid-template-columns: minmax(0, 1fr) var(--bw); column-gap: clamp(40px, 5vw, 72px); row-gap: 24px;
    max-width: 1152px; width: 100%;
  }
  .schritt { display: contents; }
  .schritt-text { grid-column: 1; justify-content: center; min-height: var(--bh); padding-left: clamp(0px, 4.444vw, 64px); }
  .schritt-buehne { grid-column: 2; width: var(--bw); max-width: none; }
  .sb-innen { --u: calc(100cqw / 560); height: calc(700 * var(--u)); }
  .sb-kreis { left: calc(70 * var(--u)); top: calc(130 * var(--u)); width: calc(440 * var(--u)); height: calc(440 * var(--u)); }
  .sb-handy {
    left: calc(220 * var(--u)); top: calc(24 * var(--u)); width: calc(300 * var(--u)); height: calc(650 * var(--u));
    border-radius: calc(46 * var(--u));
    box-shadow: 0 calc(30 * var(--u)) calc(60 * var(--u)) rgb(var(--warm) / .2), 0 0 0 calc(7 * var(--u)) var(--papier);
  }
  .sb-schatten { left: calc(44 * var(--u)); top: calc(640 * var(--u)); width: calc(170 * var(--u)); height: calc(20 * var(--u)); filter: blur(calc(6 * var(--u))); }
  .pip-fangen    { left: calc(21 * var(--u));   top: calc(370.1 * var(--u)); width: calc(217.8 * var(--u)); height: calc(286.5 * var(--u)); }
  .pip-schreiben { left: calc(28.8 * var(--u)); top: calc(389.6 * var(--u)); width: calc(200.8 * var(--u)); height: calc(266.8 * var(--u)); }
  .pip-zuhoeren  { left: calc(27.9 * var(--u)); top: calc(389.6 * var(--u)); width: calc(205.3 * var(--u)); height: calc(266.4 * var(--u)); }
  .pip-fotografieren { left: calc(42.9 * var(--u)); top: calc(389.6 * var(--u)); width: calc(171.9 * var(--u)); height: calc(266.4 * var(--u)); }
  .pip-filmen    { left: calc(46.9 * var(--u)); top: calc(389.6 * var(--u)); width: calc(164.5 * var(--u)); height: calc(266.4 * var(--u)); }
  .pip-buch      { left: calc(37.9 * var(--u)); top: calc(389.6 * var(--u)); width: calc(178.1 * var(--u)); height: calc(266.4 * var(--u)); }
  /* Ohne Skript: jeder Schritt mit eigener Bühne in seiner Zeile */
  .schritt[data-schritt="2"] > * { grid-row: 1; }
  .schritt[data-schritt="3"] > * { grid-row: 2; }
  .schritt[data-schritt="4"] > * { grid-row: 3; }
  .schritt[data-schritt="5"] > * { grid-row: 4; }
  .schritt[data-schritt="6"] > * { grid-row: 5; }
  .schritt[data-schritt="7"] > * { grid-row: 6; }
  /* Mit Skript: alle Bühnen liegen übereinander und bleiben rechts stehen, die Texte laufen links vorbei */
  .js .tour { grid-template-rows: repeat(6, minmax(var(--bh), auto)); align-items: stretch; }
  .js .schritt-buehne { grid-row: 1 / 7; align-self: start; position: sticky; top: calc(50vh + 44px - var(--bh) / 2); }
  .js .schritt:not(:first-child) .sb-kreis, .js .schritt:not(:first-child) .sb-schatten { display: none; }
  .js .schritt:not(:first-child) .sb-handy { background: none; box-shadow: none; }
  .js .schritt.aktiv .schritt-buehne { z-index: 2; }
  .js .schritt:not(.aktiv) .sb-bild, .js .schritt:not(.aktiv) .pip { opacity: 0; }
  /* Nicht aktive Schritte bleiben voll lesbar: Marke und Überschrift grau, der Text darunter bleibt (Paper „Bewegung“, 3 · B Mitte) */
  .js .schritt:not(.aktiv) .kapitel-titel { color: var(--grau); }
  /* Die kleine Marke braucht auf Leinen mehr Kontrast als #6B6D72 (4,48 : 1); #5C5E63 wie die Store-Zeile (5,6 : 1) */
  .js .schritt:not(.aktiv) .marke { color: #5C5E63; }

  .spaeter-bereich { flex-direction: row; align-items: center; gap: clamp(48px, 6.667vw, 96px); padding: 96px var(--rand) 64px; }
  .spaeter-bereich .szene-rahmen { flex: 0 1 520px; }
  .bereich-text { flex: 0 1 520px; gap: 16px; }

  .privat-bereich { align-items: center; gap: 36px; padding: 96px var(--rand); border-radius: 64px 64px 0 0; }
  .privat-titel { text-align: center; font-size: 64px; line-height: 68px; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; }
  .privat-liste { flex-direction: row; gap: 16px; }
  .privat-liste li { flex: 0 1 376px; padding: 22px 26px; border-radius: 28px; font-size: 18px; line-height: 26px; }

  .fragen-bereich { display: grid; grid-template-columns: minmax(0, 360fr) minmax(0, 760fr); column-gap: 80px; align-items: start; padding: 112px var(--rand); }
  .fragen-titel { padding-bottom: 0; font-size: 52px; line-height: 56px; font-variation-settings: "SOFT" 50, "opsz" 120; }
  .fragen-liste { border-top: 1px solid var(--linie); }
  .frage { padding: 24px 0; }

  .fuss-sprachen ul { gap: 0 16px; line-height: 24px; }
  /* Impressum links, Sprachwahl in der Mitte der Zeile (Paper: Mitte bei 720 von 1440) */
  .fuss { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; padding: 32px var(--rand) 40px; line-height: 24px; }
  .fuss-links { grid-column: 1; justify-self: start; }
  .fuss-sprachen { grid-column: 2; }

  .hinweis-verbindung { top: 100px; }
}

.unten-pip { position: relative; flex-shrink: 0; }

/* ================= Bewegung (B2), nur wenn erlaubt ================= */
@media (prefers-reduced-motion: no-preference) {
  /* 1 · Ankommen: das Kopfbild blendet ein, sobald es geladen ist (400 ms, Deckkraft 0 → 1, Größe 1,02 → 1; seite.js setzt „da“) */
  .js .kopf-bild img { transition: opacity .4s var(--weich), scale .4s var(--weich); }
  .js .kopf-bild img:not(.da) { opacity: 0; scale: 1.02; animation: kopf-notfall 0s 3s forwards; }
  /* Lädt seite.js nicht, steht das Bild nach 3 s trotzdem da. */
  @keyframes kopf-notfall { to { opacity: 1; scale: 1; } }

  /* 3 · Laptop: neuer Bildschirm blendet 12 px von unten ein (320 ms), der alte bleibt darunter stehen, bis er bedeckt ist.
     Nur am Laptop: am Handy hat jeder Schritt sein eigenes Bild, dort sitzt der Bildschirm immer bündig im Rahmen. */
  @media (min-width: 1024px) {
    .js .tour .sb-bild { transition: opacity .32s var(--weich), translate .32s var(--weich); }
    .js .tour .pip { transition: opacity .2s ease; }
    .js .tour .marke, .js .tour .kapitel-titel { transition: color .32s var(--weich); }
    .js .tour .schritt:not(.aktiv) .sb-bild { translate: 0 12px; transition: opacity 0s .32s, translate 0s .32s; }
    .js .tour .schritt:not(.aktiv) .pip { transition: opacity 0s .2s; }
  }

  /* 4 · Monatspfad füllt sich: je Haken 320 ms, 120 ms versetzt */
  .js .szene-monate .monat.erledigt { border-color: var(--linie-stark); background: var(--papier); transition: background-color .32s var(--weich), border-color .32s var(--weich); }
  .js .szene-monate .monat.erledigt svg { opacity: 0; scale: .5; transition: opacity .32s var(--weich), scale .32s var(--weich); }
  .js .szene-monate .monat-2, .js .szene-monate .monat-2 svg { transition-delay: .12s; }
  .js .szene-monate .monat-3, .js .szene-monate .monat-3 svg { transition-delay: .24s; }
  .js .szene-monate.sichtbar .monat.erledigt { border-color: var(--salbei-dunkel); background: var(--salbei-dunkel); }
  .js .szene-monate.sichtbar .monat.erledigt svg { opacity: 1; scale: 1; }

  /* 8 · Pip freut sich mit: einmal 24 px hüpfen (600 ms), fünf Blätter fliegen und verblassen (800 ms), der Satz blendet ein (200 ms) */
  .pip.freut { animation: huepfen .6s both; }
  .pip.freut .blatt { animation: blatt-flug .8s var(--weich) both; }
  .pip.freut .blatt:nth-child(1) { --x: -64px; --y: -34px; --r: -50deg; }
  .pip.freut .blatt:nth-child(2) { --x: -34px; --y: -66px; --r: -20deg; animation-delay: .04s; }
  .pip.freut .blatt:nth-child(3) { --x: 6px; --y: -78px; --r: 30deg; animation-delay: .02s; }
  .pip.freut .blatt:nth-child(4) { --x: 42px; --y: -60px; --r: 60deg; animation-delay: .06s; }
  .pip.freut .blatt:nth-child(5) { --x: 68px; --y: -26px; --r: 90deg; animation-delay: .03s; }
  .block.freut .zustand { animation: einblenden .2s ease both; }

  /* Hinweis „Keine Verbindung“ kommt weich von oben */
  .hinweis-verbindung { animation: hinweis .2s var(--weich); }
}

/* 2 · Satz färbt sich beim Scrollen Wort für Wort (nur wo der Browser es kann) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .woerter { view-timeline-name: --satz; }
    .js .woerter .wort { animation: dunkel linear both; animation-timeline: --satz; }
    .js .woerter .wort:nth-child(1) { animation-range: cover 12% cover 22%; }
    .js .woerter .wort:nth-child(2) { animation-range: cover 16% cover 26%; }
    .js .woerter .wort:nth-child(3) { animation-range: cover 20% cover 30%; }
    .js .woerter .wort:nth-child(4) { animation-range: cover 24% cover 34%; }
    .js .woerter .wort:nth-child(5) { animation-range: cover 28% cover 38%; }
    .js .woerter .wort:nth-child(6) { animation-range: cover 32% cover 42%; }
    .js .woerter .wort:nth-child(7) { animation-range: cover 36% cover 46%; }
    .js .woerter .wort:nth-child(8) { animation-range: cover 38% cover 48%; }
    .js .woerter .wort:nth-child(n+9) { animation-range: cover 40% cover 50%; }
    .js .woerter.fertig .wort { animation: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .leiste-unten { translate: 0 0; opacity: 0; transition: opacity .2s, visibility 0s .2s; }
  .leiste-unten.zeigen { opacity: 1; transition: opacity .2s, visibility 0s; }
  .leiste-oben, .leiste-oben.zeigen { transition: none; }
  .block .zustand, .block-oben.wartet.lange .moment { transition: none; }
  /* Mit „Bewegung reduzieren“: kein Clip, Pip steht im Endbild; der Bildschirm wechselt ohne Gleiten */
  .pip-clip { display: none; }
}

@keyframes huepfen {
  0% { translate: 0 0; animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
  45% { translate: 0 -24px; animation-timing-function: cubic-bezier(0.55, 0, 0.45, 1); }
  100% { translate: 0 0; }
}
@keyframes blatt-flug {
  0% { opacity: 0; translate: 0 0; rotate: 0deg; }
  15% { opacity: 1; }
  100% { opacity: 0; translate: var(--x) var(--y); rotate: var(--r); }
}
@keyframes einblenden { from { opacity: 0; } }
@keyframes dunkel { from { color: var(--linie-stark); } to { color: var(--kohle); } }
@keyframes hinweis { from { opacity: 0; translate: -50% -8px; } }