/* ==========================================================================
   DIE INNERE BIBLIOTHEK — Gestaltung „Bibliothek 2026"
   Die Welt darf alt sein. Die Benutzeroberfläche nicht.

   Farben: nur Bordeaux, Terrakotta, Licht (+ Transparenz / Helligkeit davon).
   Gold gibt es nur als Material der Bücher (Prägung, Messingtafel), nie in der Oberfläche.
   Schriften: Cormorant Garamond Italic (Gefühl, Buchtitel, Überschriften) ·
              Jost (Oberfläche, Etiketten, Experimente, Knöpfe). Lokal, ohne Google.

   Aufbau
    1  Schriften          9  Schritte: Zentrum, Frage, Auswahl
    2  Tokens            10  Regal und Buchrücken
    3  Grundlagen        11  Titel-Enthüllung, neue Bücher
    4  Szene (Fotos)     12  Übergang
    5  Intro-Film, Ton   13  Tresen und Formulare
    6  Layout            14  Ausweis, Speichern, Eintragung
    7  Knöpfe            15  Julia, Footer
    8  Start, Einordnung 16  Entwicklung · Weniger Bewegung · Druck
   ========================================================================== */

/* ---------- 1  Schriften (lokal, DSGVO-freundlich) ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("assets/fonts/jost-400.woff2") format("woff2");
}

/* ---------- 2  Tokens: Markenfarben HIER ändern ---------- */
:root {
  --bordeaux: #3D1219;
  --terrakotta: #C95E46;
  --licht: #FAF8F5;

  /* abgeleitete Nuancen — nur aus den drei Markenfarben */
  --bordeaux-tief: color-mix(in srgb, var(--bordeaux) 72%, #000);
  --bordeaux-80: color-mix(in srgb, var(--bordeaux) 80%, var(--licht));
  --bordeaux-60: color-mix(in srgb, var(--bordeaux) 60%, var(--licht));
  --bordeaux-25: color-mix(in srgb, var(--bordeaux) 25%, var(--licht));
  --bordeaux-12: color-mix(in srgb, var(--bordeaux) 12%, transparent);
  --terrakotta-70: color-mix(in srgb, var(--terrakotta) 70%, var(--licht));
  --terrakotta-hell: color-mix(in srgb, var(--terrakotta) 55%, var(--licht));
  --terrakotta-dunkel: color-mix(in srgb, var(--terrakotta) 70%, var(--bordeaux));
  --terrakotta-15: color-mix(in srgb, var(--terrakotta) 15%, var(--licht));
  --terrakotta-09: color-mix(in srgb, var(--terrakotta) 9%, var(--licht));

  /* Schrift auf dem Foto */
  --ink: var(--licht);
  --ink-soft: color-mix(in srgb, var(--licht) 80%, transparent);
  --ink-faint: color-mix(in srgb, var(--licht) 62%, transparent);
  --line: color-mix(in srgb, var(--licht) 14%, transparent);
  --line-strong: color-mix(in srgb, var(--licht) 30%, transparent);
  --accent-text: var(--terrakotta-hell);

  /* Material der Bücher (nicht Oberfläche) */
  --gold: #B8964F;
  --gold-hell: #DCC27E;
  --gold-neu: #D9B762;

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-text: "Jost", "Segoe UI", system-ui, sans-serif;

  /* Abstände: 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 */
  --s-1: 8px; --s-15: 12px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 48px; --s-6: 64px; --s-7: 96px;
  --gutter: 20px;

  /* Rundungen */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;

  /* Schatten */
  --shadow-1: 0 10px 30px -14px rgba(0, 0, 0, .7);
  --shadow-2: 0 40px 90px -30px rgba(0, 0, 0, .85);
  --shadow-text: 0 1px 18px rgba(0, 0, 0, .55);

  /* Bewegung */
  --ease: cubic-bezier(.4, .1, .2, 1);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --t-fast: .2s;
  --t-med: .45s;
  --t-slow: .9s;

  /* Breiten */
  --w-text: 34rem;
  --w-col: 44rem;
  --w-wide: 72rem;

  /* Ebenen */
  --z-scene: 0; --z-app: 1; --z-film: 50; --z-sound: 55; --z-tip: 60; --z-dev: 60;

  /* Bibliotheks-Zustand (pro Stufe überschrieben) */
  --veil: .72; --blur: 4px; --bright: .72; --tint: .5; --light: .2; --dust: 1;
}
@media (min-width: 640px) { :root { --gutter: 32px; } }

/* Die Entwicklung der Bibliothek: nicht „dunkel = schlecht", sondern mehr Orientierung, mehr Klarheit */
body[data-stage="0"] { --veil: .26; --blur: 0px;   --bright: 1.05;--tint: .14; --light: .45; --dust: 1; }
body[data-stage="1"] { --veil: .44; --blur: 2px;   --bright: .92; --tint: .22; --light: .32; --dust: .9; }
body[data-stage="2"] { --veil: .4;  --blur: 1.6px; --bright: .96; --tint: .2;  --light: .36; --dust: .75; }
body[data-stage="3"] { --veil: .36; --blur: 1.2px; --bright: 1;   --tint: .18; --light: .42; --dust: .55; }
body[data-stage="4"] { --veil: .32; --blur: .8px;  --bright: 1.04;--tint: .16; --light: .48; --dust: .4; }
body[data-stage="5"] { --veil: .28; --blur: .4px;  --bright: 1.08;--tint: .14; --light: .54; --dust: .25; }
body[data-stage="6"] { --veil: .22; --blur: 0px;   --bright: 1.1; --tint: .12; --light: .58; --dust: .15; }
body[data-stage="7"] { --veil: .16; --blur: 0px;   --bright: 1.12;--tint: .1;  --light: .6;  --dust: .08; }

/* ---------- 3  Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }   /* Lichtstrahlen und Vollbild-Bänder dürfen die Seite nie seitlich verbreitern */
body {
  margin: 0;
  min-height: 100vh; min-height: 100dvh;
  background: var(--bordeaux-tief);
  color: var(--ink);
  font-family: var(--font-text); font-weight: 400;
  font-size: 1.0625rem; line-height: 1.6;
  display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
/* body.film-open sperrt das Scrollen nicht: das Freigeben beim Filmende löste ein Neuberechnen aus (Ruckeln) */
p { margin: 0 0 .9em; white-space: pre-line; }
a { color: inherit; }
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--terrakotta); outline-offset: 3px; border-radius: 4px; }
[tabindex="-1"]:focus { outline: none; }   /* Überschriften bekommen beim Wechsel den Fokus (Screenreader) */
.display {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  line-height: 1.08; letter-spacing: -.01em;
  margin: 0 0 .5em; white-space: pre-line;
  text-wrap: balance;
}
/* Etikett: kleine Jost-Versalien (eine Form für alle Labels) */
.step-kicker, .zentrum-name, .option-label, .rec-label, .archive-label,
.card-headline, .card-fields dt, .card-question-kicker, .card-stamp, .consent-draft {
  font-family: var(--font-text); font-style: normal; font-weight: 500;
  font-size: .7rem; line-height: 1.4; letter-spacing: .22em; text-transform: uppercase;
}

/* ---------- 4  Die Szene: Fotos der Bibliothek ---------- */
.scene { position: fixed; inset: 0; z-index: var(--z-scene); overflow: hidden; background: var(--bordeaux-tief); }
.scene-photo {
  position: absolute; inset: -4%;
  background-size: cover; background-position: center;
  opacity: 0;
  filter: blur(var(--blur)) brightness(var(--bright)) saturate(.95) contrast(1.03);
  transform: scale(1.04);
  transition: opacity 1.6s var(--ease), filter 1.6s var(--ease);
  animation: drift 38s ease-in-out infinite alternate;
  will-change: transform, opacity; backface-visibility: hidden;
}
/* Bilder: hochkant fürs Handy, quer für breite Bildschirme */
.scene-photo[data-photo="tuer"]   { background-image: image-set(url("assets/img/tuer-hoch-klein.jpg") 1x, url("assets/img/tuer-hoch.jpg") 2x); }
.scene-photo[data-photo="saal"]   { background-image: image-set(url("assets/img/saal-hoch-klein.jpg") 1x, url("assets/img/saal-hoch.jpg") 2x); }
.scene-photo[data-photo="gang"]   { background-image: image-set(url("assets/img/gang-hoch-klein.jpg") 1x, url("assets/img/gang-hoch.jpg") 2x); }
.scene-photo[data-photo="morgen"] { background-image: image-set(url("assets/img/morgen-hoch-klein.jpg") 1x, url("assets/img/morgen-hoch.jpg") 2x); }
@media (min-aspect-ratio: 4/5) {
  .scene-photo[data-photo="tuer"]   { background-image: image-set(url("assets/img/tuer-quer-klein.jpg") 1x, url("assets/img/tuer-quer.jpg") 2x); }
  .scene-photo[data-photo="saal"]   { background-image: image-set(url("assets/img/saal-quer-klein.jpg") 1x, url("assets/img/saal-quer.jpg") 2x); }
  .scene-photo[data-photo="gang"]   { background-image: image-set(url("assets/img/gang-quer-klein.jpg") 1x, url("assets/img/gang-quer.jpg") 2x); }
  .scene-photo[data-photo="morgen"] { background-image: image-set(url("assets/img/morgen-quer-klein.jpg") 1x, url("assets/img/morgen-quer.jpg") 2x); }
}
body[data-photo="tuer"] .scene-photo[data-photo="tuer"],
body[data-photo="saal"] .scene-photo[data-photo="saal"],
body[data-photo="gang"] .scene-photo[data-photo="gang"],
body[data-photo="morgen"] .scene-photo[data-photo="morgen"] { opacity: 1; }
@keyframes drift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.1) translate3d(-1.2%, -1%, 0); }
}
.scene-tint { position: absolute; inset: 0; background: var(--bordeaux); mix-blend-mode: multiply; opacity: var(--tint); transition: opacity 1.6s var(--ease); }
.scene-light {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 22%, color-mix(in srgb, var(--terrakotta) 40%, transparent) 0%, transparent 70%);
  opacity: var(--light); mix-blend-mode: screen;
  transition: opacity 1.6s var(--ease);
}
.scene-dust { position: absolute; inset: 0; width: 100%; height: 100%; opacity: var(--dust); transition: opacity 1.6s var(--ease); }
.scene-veil {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 120% 90% at 50% 40%, transparent 30%, var(--bordeaux-tief) 100%), var(--bordeaux-tief);
  opacity: var(--veil);
  transition: opacity 1.6s var(--ease);
}
.scene-rays, .film-rays {
  position: absolute; inset: -30%; pointer-events: none;
  background: repeating-linear-gradient(112deg,
    transparent 0 70px,
    color-mix(in srgb, var(--licht) 9%, transparent) 70px 110px,
    transparent 110px 190px,
    color-mix(in srgb, var(--terrakotta) 10%, transparent) 190px 215px,
    transparent 215px 300px);
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 38% 20%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse 60% 55% at 38% 20%, #000 0%, transparent 70%);
  mix-blend-mode: screen;
  animation: rays 14s ease-in-out infinite alternate;
}
.scene-rays { opacity: calc(var(--light) * 1.4); transition: opacity 1.6s var(--ease); }
.film-rays { opacity: .8; }
@keyframes rays {
  from { transform: translate3d(-2%, 0, 0) rotate(0deg); opacity: .55; }
  to   { transform: translate3d(3%, 1%, 0) rotate(2deg); opacity: 1; }
}
/* Lesefläche ohne Kasten: eine weiche Abdunklung hinter der Textspalte statt Glastafel.
   Auf der Startseite (Stufe 0) bleibt der Saal frei. */
.scene::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--bordeaux-tief) 35%, transparent), transparent 18%, transparent 78%, color-mix(in srgb, var(--bordeaux-tief) 55%, transparent)),
    color-mix(in srgb, var(--bordeaux-tief) 48%, transparent);
  opacity: 1; transition: opacity 1.6s var(--ease);
}
body[data-stage="0"] .scene::after { opacity: 0; }
body:has(#screen-thanks:not([hidden])) .scene::after { opacity: 1; }
@media (min-width: 980px) {
  .scene::after {
    background:
      linear-gradient(90deg,
        color-mix(in srgb, var(--bordeaux-tief) 18%, transparent) 0,
        color-mix(in srgb, var(--bordeaux-tief) 74%, transparent) calc(50% - 30rem),
        color-mix(in srgb, var(--bordeaux-tief) 74%, transparent) calc(50% + 30rem),
        color-mix(in srgb, var(--bordeaux-tief) 18%, transparent) 100%);
  }
}

/* ---------- 5  Intro-Film und Ton ---------- */
.film {
  position: fixed; inset: 0; z-index: var(--z-film);
  background: #000; overflow: hidden;
  transition: opacity 1.4s var(--ease);
  will-change: opacity;
}
.film.is-ending { opacity: 0; pointer-events: none; }
.film video, .film .shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film .shot { background-size: cover; background-position: center; opacity: 0; filter: brightness(1.08) saturate(1.02); }
.film .shot-tuer { background-image: image-set(url("assets/img/tuer-hoch-klein.jpg") 1x, url("assets/img/tuer-hoch.jpg") 2x); transform-origin: 45% 55%; }
.film .shot-saal { background-image: image-set(url("assets/img/saal-hoch-klein.jpg") 1x, url("assets/img/saal-hoch.jpg") 2x); }
@media (min-aspect-ratio: 4/5) {
  .film .shot-tuer { background-image: image-set(url("assets/img/tuer-quer-klein.jpg") 1x, url("assets/img/tuer-quer.jpg") 2x); transform-origin: 48% 50%; }
  .film .shot-saal { background-image: image-set(url("assets/img/saal-quer-klein.jpg") 1x, url("assets/img/saal-quer.jpg") 2x); }
}
.film.play .shot-tuer { animation: shotIn 1.6s var(--ease) forwards, dolly 6.5s cubic-bezier(.3,.1,.4,1) forwards; }
.film.play .shot-saal { animation: shotIn 1.8s var(--ease) 4.6s forwards, arrive 5s cubic-bezier(.2,.2,.3,1) 4.6s forwards; }
@keyframes shotIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dolly { from { transform: scale(1); } to { transform: scale(1.55); } }
@keyframes arrive { from { transform: scale(1.06); } to { transform: scale(1.22); } }   /* vorwärts in den Saal, nie zurück */
.film-tint { position: absolute; inset: 0; background: var(--bordeaux); mix-blend-mode: multiply; opacity: .12; pointer-events: none; }
.film-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 90% 80% at 50% 45%, transparent 35%, color-mix(in srgb, #000 75%, transparent) 100%);
}
.film-dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Knöpfe über dem Film und der Ton-Knopf: kleine, ruhige Schwebeknöpfe */
.film-skip, .sound-toggle {
  min-height: 44px;
  font: 500 .8rem var(--font-text); letter-spacing: .08em;
  color: var(--licht);
  background: color-mix(in srgb, #000 38%, transparent);
  border: 1px solid var(--line-strong);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  cursor: pointer;
}
.film-skip {
  position: absolute; right: var(--s-2); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 2;
  padding: 10px 18px; border-radius: var(--r-md);
}
.film-skip:hover, .sound-toggle:hover { background: color-mix(in srgb, var(--bordeaux) 70%, transparent); }
/* Startbild: Posterbild (auch als Hintergrund, falls das Video noch nichts zeigt) + zwei klare Aktionen.
   Kein Foto-Zoom als Ersatz mehr – die alten Kamerafahrt-Ebenen bleiben aus. */
.film { background: #000 var(--poster, none) center / cover no-repeat; }
.film .shot { display: none; }
.film.at-start .film-rays { opacity: .5; }
.film-start {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-15);
  padding: var(--s-6) var(--gutter) calc(max(28px, env(safe-area-inset-bottom)) + 64px);
  background: linear-gradient(to top, color-mix(in srgb, #000 78%, transparent), transparent);
  animation: fadeUp .8s var(--ease-out) .3s both;
}
.film-start .btn { min-width: 15rem; }
.film-without {
  min-height: 44px; padding: 8px 16px; border: 0; background: none; cursor: pointer;
  font: 500 .92rem var(--font-text); letter-spacing: .03em;
  color: color-mix(in srgb, var(--licht) 82%, transparent);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, var(--licht) 35%, transparent);
}
.film-without:hover { color: var(--licht); }
@media (min-width: 980px) { .film-start { padding-bottom: calc(max(28px, env(safe-area-inset-bottom)) + 40px); } }
.sound-toggle {
  /* oben rechts, mit iPhone-Rändern; scrollt mit der Seite (liegt nie über Navigation, Titeln oder Knöpfen) */
  position: absolute; right: max(12px, env(safe-area-inset-right)); top: max(12px, env(safe-area-inset-top)); z-index: var(--z-sound);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px 10px 12px; border-radius: 999px;   /* Symbolknopf: rund */
  transition: background .3s ease, opacity .3s ease, padding .8s var(--ease), gap .8s var(--ease);
}
.sound-icon { width: 20px; height: 20px; flex: none; }
.sound-toggle .sound-waves { display: none; }
.sound-toggle[aria-pressed="true"] .sound-waves { display: inline; }
.sound-toggle[aria-pressed="true"] .sound-mute { display: none; }
/* nach dem Film nur das Symbol: Beschriftung weich einklappen statt schlagartig */
.sound-label { display: inline-block; max-width: 9em; overflow: hidden; white-space: nowrap; transition: max-width .8s var(--ease), opacity .5s var(--ease); }
body:not(.film-open) .sound-toggle { padding: 10px 12px; gap: 0; }
/* Vorschau-Banner oben: Ton-Knopf darunter */
body:has(.dev-banner:not([hidden])) .sound-toggle { top: calc(max(12px, env(safe-area-inset-top)) + 34px); }
body:not(.film-open) .sound-label { max-width: 0; opacity: 0; }

/* ---------- 6  Layout: Inhalt direkt in der Szene, keine Tafeln ---------- */
.app {
  position: relative; z-index: var(--z-app);
  flex: 1; width: 100%;
  max-width: calc(var(--w-col) + 2 * var(--gutter));
  margin: 0 auto;
  --app-top: calc(var(--s-6) + env(safe-area-inset-top));   /* oben Platz für den Ton-Knopf und die iPhone-Kante */
  padding: var(--app-top) max(var(--gutter), env(safe-area-inset-right)) calc(var(--s-5) + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
}
.screen { animation: fadeIn .6s var(--ease); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* .panel bleibt als Klammer (app.js nutzt sie), hat aber keinen Kasten mehr */
.panel { position: relative; }
.panel h2.display { font-size: clamp(2.1rem, 8vw, 3.2rem); }
.panel-quiet { text-align: center; padding: var(--s-6) 0 var(--s-5); }
@media (min-width: 640px) { .app { --app-top: calc(var(--s-6) + 8px + env(safe-area-inset-top)); } }
@media (min-width: 980px) { body { font-size: 1.125rem; } }
/* Text auf dem Foto: ein leiser Schatten für Lesbarkeit */
.app { text-shadow: 0 1px 14px rgba(0, 0, 0, .35); }
.card, .julia, .field input, .btn, .copy-status { text-shadow: none; }

/* ---------- 7  Knöpfe: eine Form, klare Hierarchie ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 12px 26px;
  font-family: var(--font-text); font-size: 1rem; font-weight: 500; line-height: 1.25;
  letter-spacing: .02em; text-decoration: none; text-align: center;
  border-radius: var(--r-md); border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform .15s, box-shadow var(--t-fast);
}
.btn:active { transform: translateY(1px); }
/* Hauptaktion: Licht auf Bordeaux */
.btn-primary, .btn-light {
  background: var(--licht); color: var(--bordeaux); border-color: var(--licht);
  box-shadow: var(--shadow-1);
}
.btn-primary:hover, .btn-light:hover { background: var(--terrakotta-15); border-color: var(--terrakotta-15); }
.btn-primary:disabled {
  background: color-mix(in srgb, var(--licht) 14%, transparent); border-color: transparent;
  color: var(--ink-faint); box-shadow: none; cursor: not-allowed;
}
/* Nebenaktion: feine Kontur */
.btn-ghost { background: transparent; color: var(--licht); border-color: var(--line-strong); }
.btn-ghost:hover { background: color-mix(in srgb, var(--licht) 8%, transparent); border-color: color-mix(in srgb, var(--licht) 60%, transparent); }
/* Zurück / Neu anfangen: leise Textaktion, konkurriert nicht mit der Hauptaktion */
.nav .btn-ghost, #btn-restart, #btn-more-enough {
  border-color: transparent; color: var(--ink-soft); padding-left: 14px; padding-right: 14px;
  box-shadow: none;
}
.nav .btn-ghost:hover, #btn-restart:hover, #btn-more-enough:hover { color: var(--licht); background: color-mix(in srgb, var(--licht) 7%, transparent); border-color: transparent; }
.btn-block { width: 100%; }

.nav { display: flex; justify-content: space-between; align-items: center; gap: var(--s-15); margin-top: var(--s-3); }
.nav .btn-primary { flex: 1 1 auto; max-width: 20rem; margin-left: auto; }
.nav .btn-ghost { flex: 0 0 auto; }
.nav-center { justify-content: center; }
.nav-center .btn-primary { flex: 0 1 auto; margin-left: 0; min-width: 14rem; }
.nav-start { justify-content: flex-start; margin-top: var(--s-2); }
.nav.nav-hold { opacity: 0; pointer-events: none; }
.pick-hint { font-size: .85rem; color: var(--ink-faint); text-align: right; margin: var(--s-1) 0 0; min-height: 1.3em; }
.pick-hint:empty { min-height: 0; margin: 0; }

/* ---------- 8  Startseite ---------- */
.screen-hero { min-height: calc(100dvh - 150px); display: flex; align-items: center; }
.app:has(#screen-hero:not([hidden])) { max-width: calc(var(--w-wide) + 2 * var(--gutter)); }
.hero-inner {
  position: relative; color: var(--licht);
  max-width: 42rem; padding: var(--s-3) 0;
  text-shadow: 0 2px 24px color-mix(in srgb, #000 70%, transparent);
}
.hero-inner::before { /* weicher Schatten nur hinter dem Text, damit der Saal sichtbar bleibt */
  content: ""; position: absolute; inset: -14% -34% -14% -40%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 40% 50%, color-mix(in srgb, var(--bordeaux-tief) 80%, transparent), transparent 75%);
}
.hero-inner.awaiting { opacity: 0; }   /* während des Films: kein Durchscheinen, kein Flackern */
.hero-inner h1 { font-size: clamp(2.2rem, 8vw, 3.5rem); line-height: 1.06; margin-bottom: .5em; max-width: 15em; }
.hero-inner h1 .w { display: inline-block; color: var(--licht); text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
.hero-second {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.45rem, 5vw, 2.1rem); line-height: 1.25;
  color: var(--terrakotta-hell); margin-bottom: 1em;
}
.hero-second:empty, .hero-note:empty { display: none; }
.hero-sub { font-size: 1.0625rem; max-width: var(--w-text); color: color-mix(in srgb, var(--licht) 90%, transparent); }
.hero-sub p { margin: 0 0 .8em; }
/* Eckdaten als Metazeile statt Pillen */
.hero-facts {
  list-style: none; margin: var(--s-3) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft);
}
.hero-facts li { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.hero-facts li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--terrakotta-hell); }
.hero-note { font-size: .92rem; line-height: 1.55; color: var(--ink-soft); margin: var(--s-3) 0 0; max-width: 32em; }
/* der starke Gedanke, genau einmal */
.hero-closing {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.3rem, 4.6vw, 1.55rem); line-height: 1.28;
  color: var(--terrakotta-hell); margin: var(--s-3) 0 0; max-width: 24em;
}
.hero-closing:empty { display: none; }
.hero-inner.reveal .hero-closing { opacity: 0; animation: fadeUp 1s var(--ease) forwards; animation-delay: 1.8s; }
#hero-cta { position: relative; display: flex; margin: var(--s-5) auto var(--s-1); min-width: 15rem; }
#hero-cta::after {   /* der Einladungsknopf atmet, leise */
  content: ""; position: absolute; inset: -5px; border-radius: calc(var(--r-md) + 5px); pointer-events: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--terrakotta) 55%, transparent), 0 0 28px color-mix(in srgb, var(--terrakotta) 45%, transparent);
  animation: breathe 3.2s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { opacity: .25; transform: scale(1); } 50% { opacity: .9; transform: scale(1.03); } }
/* Überschrift Wort für Wort aus dem Dunkel (nur Deckkraft und Bewegung, läuft flüssig) */
.hero-inner.reveal h1 .w {
  opacity: 0; transform: translate3d(0, 14px, 0);
  animation: wordIn 1.1s var(--ease) forwards; animation-delay: var(--d);
  will-change: opacity, transform;
}
@keyframes wordIn { to { opacity: 1; transform: none; } }
.hero-inner.reveal .hero-second, .hero-inner.reveal .hero-sub,
.hero-inner.reveal .hero-note, .hero-inner.reveal .hero-facts, .hero-inner.reveal .btn { opacity: 0; animation: fadeUp 1s var(--ease) forwards; }
.hero-inner.reveal .hero-second { animation-delay: 1.3s; }
.hero-inner.reveal .hero-sub { animation-delay: 1.7s; }
.hero-inner.reveal .hero-facts { animation-delay: 1.85s; }
.hero-inner.reveal .hero-note { animation-delay: 2s; }
.hero-inner.reveal .btn { animation-delay: 2.3s; }

/* ---------- 8b  Einordnung: redaktionell, keine Randlinien ---------- */
#screen-intro .panel { max-width: 38rem; }
#intro-headline { margin-bottom: .7em; }
.prose p { margin-bottom: .8em; color: var(--ink-soft); }
#intro-text p { white-space: pre-line; }
/* die drei Szenen: groß und ruhig, wie Sätze in einem Buch */
#intro-text p:nth-child(-n+3) {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.3rem, 4.8vw, 1.6rem); line-height: 1.3;
  color: var(--licht); margin: 0 0 .75em;
}
/* Zielgruppensatz: abgesetzt durch einen kurzen Terrakotta-Strich */
#intro-text p:nth-child(4) { margin-top: var(--s-4); }
#intro-text p:nth-child(4)::before {
  content: ""; display: block; width: 32px; height: 2px; margin-bottom: var(--s-3);
  background: var(--terrakotta);
}
.closing, #intro-closing {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.45rem, 5vw, 1.9rem); line-height: 1.22;
  margin: var(--s-4) 0 0; color: var(--terrakotta-hell); white-space: pre-line;
}
#intro-cta { display: flex; margin: var(--s-5) auto var(--s-1); min-width: 14rem; }

/* ---------- 8c  Zentrum + Ablauf: einmal vor dem ersten Regal ---------- */
.guide-figure { position: relative; margin: calc(-1 * var(--app-top)) calc(-1 * var(--gutter)) var(--s-15); }
.guide-figure img {
  display: block; width: 100%; height: min(32vh, 280px);
  object-fit: cover; object-position: center 42%;    /* Gesicht und das Buch vor der Brust */
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, #000 82%, transparent);
}
#screen-guide .step-kicker { margin-bottom: var(--s-15); }
#guide-text { font-size: clamp(1.8rem, 7vw, 2.8rem); margin-bottom: var(--s-15); }
.guide-intro { margin: 0 0 var(--s-3); }
.guide-intro p { margin: 0 0 .35em; font-size: 1.08rem; line-height: 1.45; color: color-mix(in srgb, var(--licht) 88%, transparent); }
.guide-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.guide-step { display: grid; grid-template-columns: 2.6rem 1fr; align-items: baseline; }
.guide-num {
  font-family: var(--font-display); font-style: italic; font-size: 1.7rem; line-height: 1;
  color: var(--terrakotta-hell); font-variant-numeric: lining-nums;
}
.guide-label { display: block; font-size: .78rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--licht); }
.guide-line { display: block; margin-top: 2px; font-size: .98rem; line-height: 1.45; color: var(--ink-soft); }
.guide-closing:empty { display: none; }
.guide-closing {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.3rem, 4.6vw, 1.6rem); line-height: 1.3; color: var(--terrakotta-hell);
  margin: var(--s-3) 0 0;
}
#guide-cta { display: flex; margin: var(--s-3) auto var(--s-1); min-width: 14rem; }
@media (min-width: 640px) {
  #guide-text { margin-bottom: var(--s-3); }
  .guide-steps { gap: var(--s-2); }
  .guide-closing, #guide-cta { margin-top: var(--s-4); }
}
/* Auftritt: Bild, dann die drei Schritte nacheinander */
#screen-guide:not([hidden]) .guide-step { animation: fadeUp .7s var(--ease-out) both; }
#screen-guide:not([hidden]) .guide-step:nth-child(1) { animation-delay: .25s; }
#screen-guide:not([hidden]) .guide-step:nth-child(2) { animation-delay: .45s; }
#screen-guide:not([hidden]) .guide-step:nth-child(3) { animation-delay: .65s; }
@media (min-width: 640px) and (max-width: 979px) {
  .guide-figure { margin: 0 0 var(--s-3); }
  .guide-figure img { height: 380px; border-radius: var(--r-lg); -webkit-mask-image: none; mask-image: none; }
}
@media (min-width: 980px) {
  .app:has(#screen-guide:not([hidden])) { max-width: calc(64rem + 2 * var(--gutter)); }
  .guide { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--s-6); align-items: center; }
  .guide-figure { margin: 0; }
  .guide-figure img {
    width: min(34vw, 520px); height: auto; aspect-ratio: 1 / 1;
    object-position: center; border-radius: var(--r-lg); box-shadow: var(--shadow-2);
    -webkit-mask-image: none; mask-image: none;
  }
  #guide-cta { margin-left: 0; }
}

/* ---------- 9  Schritte: Zentrum spricht, dann Frage und Auswahl ---------- */
.progress, .book-counter { display: none; }   /* keine Fragebogen-Zähler (app.js blendet sie ohnehin aus) */
.step-kicker {
  display: flex; align-items: center; gap: 12px;
  color: var(--accent-text); margin: 0 0 var(--s-3);
}
.step-kicker::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.step-kicker:empty { display: none; }
.step-lead {
  white-space: pre-line; margin: 0 0 .5em;
  font-family: var(--font-display); font-style: italic; font-size: 1.25rem; line-height: 1.35;
  color: var(--accent-text);
}
#step-headline { font-size: clamp(2rem, 7.4vw, 3rem); white-space: pre-line; }
.step-sub { color: var(--ink-soft); font-size: .95rem; line-height: 1.45; margin: -.1em 0 var(--s-4); max-width: var(--w-text); }
/* Absätze der Einleitung: kurzer Abstand statt voller Leerzeile – Einleitung und Auswahl bleiben klar getrennt */
.step-sub .sub-line { display: block; }
.step-sub .sub-gap { display: block; height: .3em; overflow: hidden; }

/* Zentrum: Porträt und Bildunterschrift – keine Sprechblase */
.zentrum { display: flex; gap: var(--s-2); align-items: flex-start; margin: 0 0 var(--s-4); }
.zentrum-figure { flex: 0 0 56px; width: 56px; height: 56px; }
.zentrum-figure img, .zentrum-figure svg {
  width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--licht) 35%, transparent), 0 10px 26px rgba(0, 0, 0, .5);
}
.zentrum-bubble { flex: 1; min-width: 0; padding-top: 2px; cursor: pointer; }
.zentrum-name { display: block; color: var(--accent-text); }
.zentrum-intro { font-size: .88rem; color: var(--ink-soft); margin: 4px 0 0; }
.zentrum-intro:empty { display: none; }
.zentrum-text, .counter-quote p {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.4rem, 5.2vw, 1.8rem); line-height: 1.28;
  color: var(--licht); margin: 6px 0 0;
  text-wrap: pretty;
}
/* wörtliche Rede: Anführungszeichen hängend; das schließende erst, wenn fertig getippt */
.zentrum-text:not(:empty)::before, .counter-quote p:not(:empty)::before { content: "„"; margin-left: -.42em; color: var(--terrakotta-hell); }
.zentrum-text:not(:empty)::after, .counter-quote p:not(:empty)::after { content: "“"; color: var(--terrakotta-hell); transition: opacity .25s ease; }
.zentrum-text.typing::after, .counter-quote p.typing::after { opacity: 0; }
/* hervorgehoben: warme Terrakotta-Fläche mit Kante links – Zentrum spricht, keine Sprechblase */
.zentrum, .counter-quote {
  padding: var(--s-2) var(--s-2) var(--s-2) 18px;
  border-left: 2px solid var(--terrakotta);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--terrakotta) 24%, transparent), color-mix(in srgb, var(--terrakotta) 6%, transparent) 85%);
}
.zentrum-figure img, .zentrum-figure svg {
  box-shadow: 0 0 0 2px var(--terrakotta), 0 0 22px color-mix(in srgb, var(--terrakotta) 45%, transparent);
}
@media (min-width: 640px) {
  .zentrum, .counter-quote { padding: var(--s-3) var(--s-3) var(--s-3) var(--s-3); }
  .zentrum { gap: var(--s-3); }
  .zentrum-figure { flex-basis: 72px; width: 72px; height: 72px; }
}
/* Frage und Auswahl erscheinen erst, wenn Zentrum ausgeredet hat */
#screen-step .panel .step-headline, #screen-step .panel .step-sub, #screen-step .panel .options,
#screen-step .panel .book-stage, #screen-step .panel .more-actions, #screen-step .panel .nav, #screen-step .panel .pick-hint {
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
#screen-step .panel.beats-pending .step-headline, #screen-step .panel.beats-pending .step-sub,
#screen-step .panel.beats-pending .options, #screen-step .panel.beats-pending .book-stage,
#screen-step .panel.beats-pending .more-actions, #screen-step .panel.beats-pending .nav,
#screen-step .panel.beats-pending .pick-hint {
  opacity: 0; transform: translateY(8px); pointer-events: none;
}
/* Schreibmaschine: Zeichen stehen schon (Platz reserviert), werden nacheinander sichtbar */
.tw { opacity: 0; }
.tw.on { opacity: 1; transition: opacity .12s; }
/* Leerzeile zwischen Zentrums Sätzen: fester, kleiner Absatzabstand statt einer ganzen leeren Zeile */
.tw-gap { display: block; height: .5em; overflow: hidden; }
.tw-skip { display: none; }

/* Auswahl: Zeilen mit Haarlinien statt Quizkarten */
.options { border: 0; margin: 0 0 var(--s-3); padding: 0; min-width: 0; display: grid; gap: 0; }
.option { position: relative; display: block; cursor: pointer; }
.option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.option-body {
  position: relative; display: block;
  padding: 18px 44px 18px 18px;
  border-top: 1px solid var(--line);
  color: var(--licht); line-height: 1.5; font-size: 1.04rem;
  background: color-mix(in srgb, var(--licht) 4%, transparent);   /* leichte Fläche: Auswahl klar von der Einleitung getrennt */
  transition: color var(--t-fast), background-color var(--t-fast);
}
.option:last-of-type .option-body { border-bottom: 1px solid var(--line); }
.option-body::before {   /* Terrakotta-Kante links: zeigt die Wahl */
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px;
  background: var(--terrakotta); transform: scaleY(0); transform-origin: center;
  transition: transform var(--t-med) var(--ease-out);
}
.option-body::after {    /* Markierung rechts: leer = offen, gefüllt = gewählt */
  content: ""; position: absolute; right: 14px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  border-radius: 50%; border: 1px solid var(--ink-faint);
  transition: background-color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.option:hover .option-body { color: var(--licht); background: linear-gradient(90deg, color-mix(in srgb, var(--licht) 6%, transparent), transparent 80%); }
.option input:checked + .option-body {
  color: var(--licht);
  background: linear-gradient(90deg, color-mix(in srgb, var(--terrakotta) 20%, transparent), transparent 85%);
}
.option input:checked + .option-body::before { transform: scaleY(1); }
.option input:checked + .option-body::after { border-color: var(--terrakotta); background: var(--terrakotta); box-shadow: inset 0 0 0 3px var(--bordeaux-tief); }
.options:has(input:checked) .option input:not(:checked) + .option-body { color: var(--ink-faint); }
.option input:focus-visible + .option-body { outline: 2px solid var(--terrakotta); outline-offset: -2px; border-radius: 4px; }
.option-text { display: block; white-space: pre-line; }
/* Etikett einer Wahl (Schritt 3): Auswahl = Jost, klar lesbar (Typografie-Regel: Funktionales in Sans) */
.option-label {
  display: block; margin-bottom: 4px;
  font-family: var(--font-text); font-style: normal; font-weight: 500;
  font-size: 1.12rem; line-height: 1.25; letter-spacing: .01em; text-transform: none;
  color: var(--licht);
}
.option-label + .option-text { font-size: .98rem; }
/* Schritt 3: drei verschiedene Bewegungen – jede mit eigenem ruhigen Zeichen, kein Game-Effekt */
.option[data-decision] .option-body { padding-left: 64px; }
.decision-mark { position: absolute; left: 20px; top: 22px; width: 26px; height: 22px; color: var(--terrakotta-hell); transition: color var(--t-fast), transform var(--t-med) var(--ease-out); }
.decision-mark::before, .decision-mark::after { content: ""; position: absolute; }
/* Ins Archiv: eine Ablagebox */
.option[data-decision="archiv"] .decision-mark::before { left: 2px; right: 2px; top: 7px; bottom: 1px; border: 1.5px solid currentColor; border-radius: 2px; }
.option[data-decision="archiv"] .decision-mark::after { left: 0; right: 0; top: 2px; height: 5px; border: 1.5px solid currentColor; border-radius: 2px; }
/* Neu schreiben: eine Linie mit Federspitze */
.option[data-decision="neu-schreiben"] .decision-mark::before { left: 1px; right: 5px; bottom: 5px; height: 0; border-bottom: 1.5px solid currentColor; }
.option[data-decision="neu-schreiben"] .decision-mark::after { right: 3px; top: 1px; width: 5px; height: 16px; border: 1.5px solid currentColor; border-radius: 1px 1px 3px 3px; transform: rotate(35deg); transform-origin: bottom center; }
/* Weg damit: durchgestrichen */
.option[data-decision="weg-damit"] .decision-mark::before { left: 3px; right: 3px; top: 1px; bottom: 1px; border: 1.5px solid currentColor; border-radius: 50%; }
.option[data-decision="weg-damit"] .decision-mark::after { left: 50%; top: -1px; height: 24px; margin-left: -1px; border-left: 1.5px solid currentColor; transform: rotate(45deg); }
/* Bleibt stehen (nur Buch 15): ein aufrechtes Buch auf dem Regalbrett – nichts bewegt sich */
.option[data-decision="bleibt"] .decision-mark::before { left: 9px; width: 8px; top: 1px; bottom: 4px; border: 1.5px solid currentColor; border-radius: 1px; }
.option[data-decision="bleibt"] .decision-mark::after { left: 1px; right: 1px; bottom: 1px; height: 0; border-bottom: 1.5px solid currentColor; }
.option input:checked + .option-body .decision-mark { color: var(--licht); transform: translateY(-2px); }
/* Schritt 2: drei alte Sätze – als Auswahl gut lesbar in Jost, eine Spalte, nicht zu breit */
.options.pages { grid-template-columns: 1fr; max-width: var(--w-text); }
.options.pages .option-text { font-family: var(--font-text); font-style: normal; font-size: 1.05rem; line-height: 1.45; }

/* Das aufgeschlagene Buch (Schritt 2) */
.book-stage { position: relative; height: 176px; margin: 4px 0 var(--s-3); }
.book {
  position: absolute; left: 50%; top: 6px;
  width: min(270px, 80%); min-height: 156px;
  transform: translateX(-50%) rotate(-2deg);
  background:
    linear-gradient(100deg, color-mix(in srgb, #000 30%, transparent) 0 6%, transparent 12%),
    linear-gradient(160deg, color-mix(in srgb, var(--licht) 10%, transparent), transparent 60%),
    var(--bordeaux);
  color: var(--licht);
  border-radius: 3px 8px 8px 3px;
  padding: 20px 20px 20px 30px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .55), 0 0 0 1px color-mix(in srgb, var(--terrakotta) 35%, transparent);
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  text-shadow: none;
}
.book::after {
  content: ""; position: absolute; inset: 9px 9px 9px 20px; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--terrakotta) 55%, transparent); border-radius: 2px 5px 5px 2px;
}
.book-title { font-size: .7rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--terrakotta-hell); line-height: 1.35; }
.book-entry { font-family: var(--font-display); font-style: italic; font-size: 1.35rem; line-height: 1.2; }
.book-entry:empty::before { content: "…"; opacity: .6; }
@media (min-width: 640px) { .book-stage { height: 190px; } }

/* „Noch ein Buch?" */
.more-actions { display: grid; justify-items: stretch; gap: var(--s-15); margin: var(--s-2) auto var(--s-3); max-width: 24rem; text-align: center; }
.more-note { margin: var(--s-1) 0 0; font-size: .88rem; color: var(--ink-soft); text-align: center; }
#screen-step .panel[data-screen="more"] .nav { justify-content: center; }

/* ---------- 10  Das Regal: ohne Rahmen, der Raum ist die Bibliothek ---------- */
.shelf-case {
  --lx: 50%; --ly: 30%;
  position: relative; overflow: hidden;
  margin: 0 calc(-1 * var(--gutter)) var(--s-2); padding: var(--s-3) 8px 12px;
  background: radial-gradient(ellipse 80% 60% at 50% 100%, color-mix(in srgb, #000 45%, transparent), transparent 75%);
}
@media (min-width: 640px) { .shelf-case { margin-left: 0; margin-right: 0; } }
.shelf-case::before {   /* Licht folgt dem Finger / der Maus */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: radial-gradient(circle 120px at var(--lx) var(--ly), color-mix(in srgb, var(--terrakotta) 30%, transparent), transparent 75%);
  mix-blend-mode: screen;
}
.case-row {
  position: relative;
  display: flex; align-items: flex-end; justify-content: center; gap: 2px;
  min-height: 214px; padding: 0 4px; margin-bottom: 16px;
}
.case-row::after { /* Regalbrett */
  content: ""; position: absolute; left: -10px; right: -10px; bottom: -9px; height: 9px;
  background: linear-gradient(color-mix(in srgb, var(--bordeaux-60) 80%, var(--terrakotta)), var(--bordeaux));
  box-shadow: 0 6px 12px color-mix(in srgb, #000 60%, transparent);
}
.slot { position: relative; display: flex; align-items: flex-end; gap: 3px; }
.slot.pick { cursor: pointer; }
.slot.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.slot.pick input:focus-visible ~ .book-spine { outline: 2px solid var(--terrakotta); outline-offset: 3px; }
.slot.pick:not(.is-done):hover .book-spine.old { transform: translateY(-6px); }
.slot.is-done { cursor: default; }
/* schon gezogen: der alte Rücken tritt zurück, das neue Buch daneben bleibt hell */
.slot.pick.is-done .book-spine.old { opacity: .38; filter: saturate(.45) brightness(.75); }
.archive-row { min-height: 0; justify-content: flex-start; gap: 4px; align-items: flex-end; margin-bottom: 8px; padding: 8px 6px 0; }
.archive-label { color: var(--ink-faint); margin-right: 8px; align-self: center; font-size: .62rem; }
@media (min-width: 640px) {
  .case-row { min-height: 236px; gap: 3px; }
  .archive-row { min-height: 0; }
}

/* Buchrücken: fotografiert (assets/img/buch-*.jpg), Titel liegt als Prägung darauf */
.book-spine {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 47px; height: calc(var(--bh, 170px) * .92);
  border-radius: 3px 3px 2px 2px;
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), opacity .5s, filter .5s;
  text-shadow: none;
}
@media (min-width: 640px) { .book-spine { width: 60px; height: var(--bh, 170px); } }
.plate { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; border-radius: 2px; }
.spine-label {
  position: relative; z-index: 1;
  writing-mode: vertical-rl; transform: rotate(180deg);
  text-orientation: sideways;   /* Apostroph & Co. nicht aufrecht setzen */
  max-height: calc(100% - 8px); max-width: 100%; padding: 4px 2px;   /* Rand, damit kursive Buchstaben nicht abgeschnitten werden */
  -webkit-hyphens: none; hyphens: none; overflow-wrap: normal; word-break: keep-all;   /* keine Silbentrennung; zu lange Titel werden kleiner (fitSpineLabels) */
  font-family: var(--font-display); font-style: italic; font-size: 1.02rem; font-weight: 600;   /* Cormorant kursiv, kräftig */
  letter-spacing: .01em; line-height: 1.02; text-align: center;
  white-space: normal; overflow: hidden;
  color: #F7E7BC;   /* helles Blattgold: klarer Kontrast auf dunklem Leder */
  text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 6px rgba(0,0,0,.45);
}
@media (min-width: 640px) { .spine-label { font-size: 1.12rem; } }

/* alte Bücher: Leder */
.book-spine.old { --c: var(--bordeaux); background: var(--c); box-shadow: 0 10px 14px -4px rgba(0,0,0,.7); }
.book-spine.old.v0 { background: url("assets/img/buch-alt-1.jpg") center / 100% 100% no-repeat, var(--c); }
.book-spine.old.v1 { --c: color-mix(in srgb, var(--terrakotta-dunkel) 85%, #2a120a); background: url("assets/img/buch-alt-2.jpg") center / 100% 100% no-repeat, var(--c); }
.book-spine.old.v2 { --c: color-mix(in srgb, var(--bordeaux) 60%, #140507); background: url("assets/img/buch-alt-3.jpg") center / 100% 100% no-repeat, var(--c); }
.book-spine.old.v3 { --c: color-mix(in srgb, var(--bordeaux-80) 75%, #3a2a24); background: url("assets/img/buch-alt-4.jpg") center / 100% 100% no-repeat, var(--c); }
.book-spine.old .plate { left: 11%; right: 11%; top: 13%; bottom: 28%; }   /* Titel bleibt auf dem Schild */
.book-spine.old::after {   /* Schatten vom Brett darüber, abgestoßene Kanten */
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 3;
  background:
    linear-gradient(to bottom, rgba(255,235,210,.14) 0, transparent 1.6%, rgba(0,0,0,.32) 2%, transparent 22%),
    linear-gradient(to top, rgba(255,235,210,.08) 0, transparent 1.4%, rgba(0,0,0,.25) 1.8%, transparent 8%);
  opacity: .85; transition: opacity .8s;
}
/* Füllbücher: Streifen aus demselben Leder */
.book-spine.filler {
  width: var(--fw); height: calc(var(--fh) * 1.7px); opacity: .85;
  background: url("assets/img/buch-alt-2.jpg") 50% 92% / 500% auto no-repeat, color-mix(in srgb, var(--bordeaux) 70%, #1a0a08);
  box-shadow: 0 8px 12px -4px rgba(0,0,0,.7), inset 0 0 0 1px rgba(0,0,0,.35);
}
.book-spine.filler:nth-child(3n) { background-image: url("assets/img/buch-alt-1.jpg"); }
.book-spine.filler:nth-child(4n) { background-image: url("assets/img/buch-alt-3.jpg"); }
.book-spine.filler:nth-child(5n) { background-image: url("assets/img/buch-alt-4.jpg"); }

/* neue Bücher: hell, frisch gebunden */
.book-spine.new {
  height: 184px; overflow: hidden;
  background: url("assets/img/buch-neu-1.jpg") center / 100% 100% no-repeat, #E9DCC3;
  box-shadow: 0 10px 14px -4px rgba(0,0,0,.6), 0 0 22px color-mix(in srgb, var(--terrakotta) 22%, transparent), inset 0 0 0 1px rgba(90,50,30,.25);
}
.book-spine.new.n2 { background-image: url("assets/img/buch-neu-2.jpg"); }
@media (min-width: 640px) { .book-spine.new { height: 204px; } }
.book-spine.new .plate { left: 9%; right: 9%; top: 20%; bottom: 27.5%; }
.book-spine.new .spine-label { font-size: 1.02rem; color: #FFF1CC; text-shadow: 0 1px 2px rgba(60,15,8,.85), 0 0 5px rgba(60,15,8,.4); }
.book-spine.new.long .spine-label { font-size: .86rem; letter-spacing: 0; }
@media (min-width: 640px) {
  .book-spine.new .spine-label { font-size: 1.12rem; }
  .book-spine.new.long .spine-label { font-size: .95rem; }
}
.book-spine.new::after {   /* ein langsamer Lichtstreif, wie eine Kerze im Gold */
  content: ""; position: absolute; top: -40%; bottom: -40%; left: -120%; width: 55%; pointer-events: none; z-index: 3;
  background: linear-gradient(100deg, transparent, rgba(255,244,220,.22), transparent);
  transform: rotate(8deg);
  animation: treasure 9s ease-in-out infinite; animation-delay: var(--sd, 0s);
}
@keyframes treasure { 0%, 78% { left: -120%; } 100% { left: 180%; } }
.book-spine.beside { width: 32px; }

/* Zustände */
.book-spine.pulled { transform: translateY(-20px); z-index: 2; }
.book-spine.old.pulled {
  box-shadow: 0 18px 22px -6px rgba(0,0,0,.75), 0 0 26px color-mix(in srgb, var(--terrakotta) 30%, transparent);
  filter: brightness(1.12);
}
.book-spine.clean::after, .book-spine.rewriting::after { opacity: 0; }
.book-spine.settle { animation: settle .8s var(--ease); }
@keyframes settle { 0% { transform: translateY(-20px) rotate(-4deg); } 60% { transform: translateY(2px) rotate(1deg); } 100% { transform: none; } }
.book-spine.rewrite-anim .spine-label { animation: rewrite .9s var(--ease); }
@keyframes rewrite { 0% { opacity: 1; } 45% { opacity: 0; } 100% { opacity: 1; } }
.book-spine.vanish { animation: vanish .9s var(--ease) forwards; }
@keyframes vanish {
  0% { opacity: 1; transform: translateY(-20px); filter: none; }
  100% { opacity: 0; transform: translateY(-44px) scale(.85); filter: blur(5px); }
}
.book-spine.new.arrive { animation: arriveBook .9s var(--ease-out); }
@keyframes arriveBook { 0% { opacity: 0; transform: translateY(-60px); } 70% { opacity: 1; transform: translateY(4px); } 100% { transform: none; } }
.book-spine.to-archive { animation: toArchive .8s var(--ease); }
@keyframes toArchive { 0% { opacity: 0; transform: translateY(-80px) scale(1.4); } 100% { opacity: 1; transform: none; } }
.book-gap {
  display: block; width: 46px; height: 150px; border-radius: 3px;
  border: 1px dashed color-mix(in srgb, var(--licht) 40%, transparent);
  background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--terrakotta) 18%, transparent), transparent 70%);
}
@media (min-width: 640px) { .book-gap { width: 54px; height: 166px; } }
.archive-row .book-spine { width: 26px; height: 84px; }
.archive-row .book-spine .spine-label { font-size: .58rem; max-height: calc(100% - 6px); }
.mote {
  position: absolute; width: 4px; height: 4px; border-radius: 50%; z-index: 4; pointer-events: none;
  background: var(--licht); opacity: .9; box-shadow: 0 0 6px var(--licht);
  animation: mote 1s var(--ease) forwards;
}
@keyframes mote { to { transform: translate(var(--tx), var(--ty)); opacity: 0; } }

/* Finale Regal-Szene: die neuen Bücher leuchten, die alten treten zurück */
.shelf-case.highlight-new .book-spine.old { opacity: .45; filter: saturate(.6) brightness(.8); transition: opacity .8s, filter .8s; }
.shelf-case.highlight-new .book-spine.new {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--licht) 70%, transparent), 0 0 26px color-mix(in srgb, var(--terrakotta) 50%, transparent);
  animation: newGlow 2.4s ease-in-out 1s 2 alternate;
}
@keyframes newGlow { to { box-shadow: 0 0 0 1px var(--licht), 0 0 44px color-mix(in srgb, var(--terrakotta) 75%, transparent); } }

/* Titelschild beim Drüberfahren / Antippen (auf Touch-Geräten siehe bindTips) */
.spine-tip {
  position: fixed; z-index: var(--z-tip); left: 0; top: 0;
  max-width: min(300px, calc(100vw - 16px));
  padding: 10px 16px 11px; border-radius: var(--r-md);
  text-align: center; pointer-events: none;
  background: color-mix(in srgb, var(--bordeaux-tief) 94%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px var(--line-strong), 0 14px 34px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(6px) scale(.97);
  transition: opacity .18s ease, transform .18s ease;
}
.spine-tip.show { opacity: 1; transform: none; }
.spine-tip::after {   /* kleine Spitze zum Buch */
  content: ""; position: absolute; bottom: -5px; left: var(--ax, 50%); width: 10px; height: 10px; margin-left: -5px;
  background: color-mix(in srgb, var(--bordeaux-tief) 94%, transparent);
  box-shadow: 1px 1px 0 var(--line-strong);
  transform: rotate(45deg);
}
.spine-tip.below::after { bottom: auto; top: -5px; box-shadow: -1px -1px 0 var(--line-strong); }
.spine-tip-title { display: block; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.25rem; line-height: 1.15; color: var(--licht); }
.spine-tip-sub { display: none; margin-top: 6px; font-family: var(--font-text); font-style: normal; font-size: .95rem; line-height: 1.4; color: color-mix(in srgb, var(--licht) 86%, transparent); }
.spine-tip.has-sub .spine-tip-sub { display: block; }
.spine-tip.is-new { box-shadow: 0 0 0 1px var(--terrakotta), 0 14px 34px rgba(0,0,0,.55); }
/* Handy: Titelschild groß und gut lesbar (kein Mikrotitel) */
@media (hover: none) {
  .spine-tip { padding: 12px 18px 13px; max-width: min(320px, calc(100vw - 24px)); }
  .spine-tip-title { font-size: 1.55rem; }
  .spine-tip-sub { font-size: 1.05rem; }
}

/* „Ganz schön anderes Regal.": das Buch für heute direkt im Regal antippen.
   Die Radiogruppe darunter bleibt für Tastatur und Screenreader, ist aber unsichtbar. */
.options.focus-shelf {
  position: absolute !important; width: 1px; height: 1px; padding: 0 !important; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.shelf-case.focus-pick .book-spine.new[data-q] { cursor: pointer; }
.shelf-case.focus-pick .book-spine.new[data-q]:hover { transform: translateY(-6px); }
.shelf-case.focus-pick.has-choice .book-spine.new:not(.is-picked) { opacity: .45; filter: saturate(.55) brightness(.8); animation: none; }
.shelf-case.focus-pick .book-spine.new.is-picked {
  transform: translateY(-16px); animation: none; z-index: 2;
  box-shadow: 0 18px 22px -6px rgba(0,0,0,.65), 0 0 0 1px var(--licht), 0 0 34px color-mix(in srgb, var(--terrakotta) 55%, transparent);
  filter: brightness(1.06);
}
.shelf-case.focus-pick .book-spine.new.kbd-focus { outline: 2px solid var(--terrakotta); outline-offset: 3px; }
.shelf-case.focus-pick .slot.slot-picked::after {
  content: attr(data-chip);
  position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); z-index: 4;
  white-space: nowrap; padding: 4px 10px; border-radius: var(--r-sm);
  font-family: var(--font-text); font-size: .62rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--bordeaux); background: var(--licht);
  box-shadow: 0 6px 16px rgba(0,0,0,.45);
  animation: fadeUp .35s var(--ease-out);
}
.shelf-case.focus-pick .case-row { margin-bottom: 26px; }

/* ---------- 11  Titel-Enthüllung: wie ein Kapitelanfang ---------- */
.shelf-caption {
  text-align: center; min-height: 1.3em; margin: 0 0 var(--s-2);
  font-size: .88rem; letter-spacing: .04em; color: var(--ink-faint);
  white-space: pre-line;
}
.shelf-caption.has-pick {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin: var(--s-3) auto var(--s-4); max-width: var(--w-text);
  white-space: normal; color: var(--ink);
}
.shelf-caption.has-pick::before { content: ""; width: 28px; height: 2px; margin-bottom: var(--s-15); background: var(--terrakotta); }
.shelf-caption .cap-title {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(2.2rem, 9vw, 3.3rem); line-height: 1.02; letter-spacing: -.01em;
  color: var(--licht); text-wrap: balance;
}
.shelf-caption .cap-sub {
  font-family: var(--font-text); font-style: normal;   /* Satz unter dem Titel: Jost, gut lesbar */
  font-size: clamp(1rem, 3.8vw, 1.12rem); line-height: 1.4; color: color-mix(in srgb, var(--licht) 86%, transparent);
  text-wrap: balance;
}
.shelf-caption .cap-line {
  display: block; margin-top: var(--s-15); white-space: pre-line;
  font-size: .95rem; line-height: 1.5; letter-spacing: .01em; color: var(--accent-text);
}
.shelf-caption.cap-in::before { animation: ruleIn .7s var(--ease-out) both; }
.shelf-caption.cap-in .cap-title { animation: capIn .8s var(--ease-out) both; animation-delay: .1s; }
.shelf-caption.cap-in .cap-sub { animation: capIn .7s var(--ease-out) both; animation-delay: .45s; }
.shelf-caption.cap-in .cap-line { animation: capIn .7s var(--ease-out) both; animation-delay: .95s; }
@keyframes capIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ruleIn { from { transform: scaleX(0); } to { transform: none; } }

/* Auswahl-Screens (erstes Regal, neue Bücher, „Für heute"): Titel groß und waagerecht in einer
   mitlaufenden Leiste unten im Bild, direkt über „Weiter“. So ist auf dem Handy immer klar,
   welches Buch gemeint ist – egal, wo im Regal getippt wurde. */
#screen-step .panel:is([data-screen="step-1"], [data-screen="step-4"], [data-screen="focus"]) {
  --bar-nav: calc(76px + env(safe-area-inset-bottom));
}
#screen-step .panel:is([data-screen="step-1"], [data-screen="step-4"], [data-screen="focus"]) .nav {
  position: sticky; bottom: 0; z-index: 6;
  margin: var(--s-2) calc(-1 * var(--gutter)) 0;
  padding: 12px var(--gutter) calc(14px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bordeaux-tief) 94%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
#screen-step .panel:is([data-screen="step-1"], [data-screen="step-4"], [data-screen="focus"]) .shelf-caption.has-pick {
  position: sticky; bottom: var(--bar-nav); z-index: 6;
  max-width: none; margin: 0 calc(-1 * var(--gutter)); padding: var(--s-2) var(--gutter) 6px;
  gap: 4px;
  background: linear-gradient(to top, color-mix(in srgb, var(--bordeaux-tief) 94%, transparent) 78%, transparent);
}
#screen-step .panel:is([data-screen="step-1"], [data-screen="step-4"], [data-screen="focus"]) .shelf-caption.has-pick::before { display: none; }
#screen-step .panel:is([data-screen="step-1"], [data-screen="step-4"], [data-screen="focus"]) .shelf-caption .cap-title { font-size: clamp(1.8rem, 7.4vw, 2.6rem); }
#screen-step .panel:is([data-screen="step-1"], [data-screen="step-4"], [data-screen="focus"]) .shelf-caption .cap-sub { font-size: clamp(.98rem, 3.6vw, 1.08rem); }
#screen-step .panel:is([data-screen="step-1"], [data-screen="step-4"], [data-screen="focus"]) .shelf-caption .cap-line { margin-top: 4px; font-size: .88rem; }
#screen-step .panel:is([data-screen="step-1"], [data-screen="step-4"], [data-screen="focus"]) .pick-hint:empty { display: none; }
/* Handlungs-Knöpfe („Das stelle ich mir griffbereit.“) bleiben in der Leiste einzeilig – sonst wächst die Leiste über den Titel */
#screen-step .panel:is([data-screen="step-1"], [data-screen="step-4"], [data-screen="focus"]) .nav .btn { white-space: nowrap; padding-left: 16px; padding-right: 16px; }
#screen-step .panel:is([data-screen="step-1"], [data-screen="step-4"], [data-screen="focus"]) .nav .btn-primary { font-size: .95rem; }
@media (min-width: 640px) {
  #screen-step .panel:is([data-screen="step-1"], [data-screen="step-4"], [data-screen="focus"]) .nav,
  #screen-step .panel:is([data-screen="step-1"], [data-screen="step-4"], [data-screen="focus"]) .shelf-caption.has-pick { margin-left: 0; margin-right: 0; border-radius: 0; }
}

/* Neuzugänge (Schritt 4) und „Für heute": frei im Raum, ohne Kasten */
.options.new-shelf {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 12px 6px;
  padding: var(--s-1) 0 var(--s-2);
}
.options.new-shelf .rec-label { flex-basis: 100%; margin: 0 0 var(--s-1); text-align: center; color: var(--accent-text); }
.options.new-shelf .rec-sep { flex-basis: 100%; height: 1px; margin: var(--s-15) 20% var(--s-1); background: var(--line); }
.new-pick { position: relative; cursor: pointer; }
.new-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.new-pick:hover .book-spine { transform: translateY(-6px); }
/* schon eingeräumt (frühere Runde): sichtbar, aber nicht noch einmal wählbar */
.new-pick.is-used { cursor: not-allowed; }
.new-pick.is-used .book-spine { opacity: .3; filter: saturate(.35) brightness(.7); box-shadow: none; }
.new-pick.is-used .book-spine::after { animation: none; opacity: 0; }
.new-pick.is-used:hover .book-spine { transform: none; }
.new-pick input:checked + .book-spine {
  transform: translateY(-14px);
  box-shadow: 0 18px 22px -6px rgba(0,0,0,.65), 0 0 0 1px var(--licht), 0 0 34px color-mix(in srgb, var(--terrakotta) 45%, transparent);
  filter: brightness(1.06);
}
.new-pick input:focus-visible + .book-spine { outline: 2px solid var(--terrakotta); outline-offset: 3px; }
/* „Ganz schön anderes Regal.": genau EIN Buch – das gewählte hebt sich, die anderen treten zurück */
.options.focus-shelf { padding-bottom: 34px; }
.options.focus-shelf .new-pick { transition: transform .35s var(--ease); }
.options.focus-shelf .new-pick .book-spine { transition: opacity .35s, filter .35s, transform .35s var(--ease); }
.options.focus-shelf.has-choice .new-pick:not(:has(input:checked)) .book-spine { opacity: .42; filter: saturate(.55) brightness(.8); }
.options.focus-shelf .new-pick:has(input:checked) .book-spine { transform: translateY(-16px); }
.options.focus-shelf .new-pick:has(input:checked)::after {
  content: attr(data-chip);
  position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
  white-space: nowrap; padding: 4px 10px; border-radius: var(--r-sm);
  font-family: var(--font-text); font-size: .62rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--bordeaux); background: var(--licht);
  box-shadow: 0 6px 16px rgba(0,0,0,.45);
  animation: fadeUp .35s var(--ease-out);
}

/* ---------- 12  Übergang nach dem Experiment ---------- */
.transition-lines { max-width: var(--w-text); margin: 0 auto; }
.transition-lines p, .t-line { margin: 0 0 var(--s-2); }
.t-first { font-family: var(--font-display); font-style: italic; font-size: 1.6rem; color: var(--accent-text); }
.t-first:empty { display: none; }
.t-exp {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.7rem, 6.4vw, 2.5rem); line-height: 1.2; color: var(--licht);
  text-wrap: balance;
}
.t-exp::before { content: ""; display: block; width: 28px; height: 2px; margin: 0 auto var(--s-3); background: var(--terrakotta); }
.t-after { font-size: 1rem; color: var(--ink-soft); margin-top: var(--s-3); }
.t-beat { font-family: var(--font-display); font-style: italic; font-size: clamp(1.35rem, 4.8vw, 1.6rem); color: var(--accent-text); margin-top: var(--s-4); }
#step-headline, .option-text, .card-fields dd, .card-line, .action-hint, .t-line { white-space: pre-line; }
#screen-transition .nav { margin-top: var(--s-5); }
#screen-transition.t-play .t-line { opacity: 0; animation: fadeUp .8s var(--ease) forwards; animation-delay: var(--td, 0s); }
#screen-transition.t-play .nav { opacity: 0; animation: fadeUp .8s var(--ease) forwards; animation-delay: 2.4s; }

/* ---------- 13  Tresen und Formulare ---------- */
.gate-figure { position: relative; margin: calc(-1 * var(--app-top)) calc(-1 * var(--gutter)) var(--s-3); }
.gate-figure img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 941 / 1450; object-fit: cover; object-position: center bottom;   /* Messingtafel mit dem Namen im Bild */
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, #000 88%, transparent);
}
@media (min-width: 640px) and (max-width: 979px) {
  .gate-figure { max-width: 560px; margin: 0 auto var(--s-3); }
  .gate-figure img { border-radius: var(--r-lg); }
}
@media (min-width: 980px) {
  .app:has(#screen-gate:not([hidden])) { max-width: calc(64rem + 2 * var(--gutter)); }
  #screen-gate .panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--s-5); align-items: center; }
  .gate-figure { grid-row: 1 / span 5; margin: 0; align-self: start; justify-self: end; max-width: 100%; }
  /* ganzes Bild (Türschriften oben, Messingtafel unten), Höhe passt ins Fenster */
  .gate-figure img {
    aspect-ratio: 941 / 1672; width: auto; max-width: 100%; height: min(calc(100dvh - 140px), 1100px);
    object-position: center; border-radius: var(--r-lg);
    -webkit-mask-image: none; mask-image: none; box-shadow: var(--shadow-2);
  }
}
/* Die Lampe geht an: dunkel, bis das Bild geladen ist, dann zweimal Flackern */
.gate-figure.lamp-wait img { filter: brightness(.1) saturate(.5); }
.gate-figure.lamp-on img { animation: roomWake 3s cubic-bezier(.3,.1,.3,1) both; }
.gate-figure.lamp-lit img { filter: none; }
@keyframes roomWake {
  0%, 12% { filter: brightness(.1) saturate(.5); }
  15%  { filter: brightness(.3) saturate(.7); }
  18%  { filter: brightness(.12) saturate(.5); }
  24%  { filter: brightness(.36) saturate(.75); }
  27%  { filter: brightness(.2) saturate(.6); }
  34%  { filter: brightness(.45) saturate(.8); }
  100% { filter: brightness(1) saturate(1); }
}
.gate-figure::after {   /* warmer Lichtkegel der grünen Lampe (rechts im Bild) */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; border-radius: inherit;
  background:
    radial-gradient(circle at 93% 52%, rgba(255, 226, 170, .85) 0, rgba(255, 200, 130, .4) 6%, transparent 22%),
    radial-gradient(ellipse 70% 55% at 72% 55%, rgba(255, 190, 120, .26), transparent 70%);
  mix-blend-mode: screen;
}
@media (min-width: 980px) {
  .gate-figure::after {
    background:
      radial-gradient(circle at 93% 42%, rgba(255, 226, 170, .85) 0, rgba(255, 200, 130, .4) 6%, transparent 22%),
      radial-gradient(ellipse 70% 55% at 72% 48%, rgba(255, 190, 120, .26), transparent 70%);
  }
}
.gate-figure.lamp-on::after { animation: lampGlow 3.4s ease-out both; }
.gate-figure.lamp-lit::after { opacity: .35; }
@keyframes lampGlow { 0%, 12% { opacity: 0; } 15% { opacity: .9; } 18% { opacity: .1; } 24% { opacity: 1; } 27% { opacity: .35; } 34% { opacity: 1; } 100% { opacity: .35; } }
/* Messingschild: oben klein das Lot, darunter leise die Herkunft, groß der Name – alles als Gravur
   im Metall (Material, nicht Oberfläche). Maße relativ zur Schildhöhe --ph (app.js → fitPlate). */
.gate-plate {
  --ph: 120px;
  position: absolute; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--ph) * .12) 0 calc(var(--ph) * .08);
  overflow: hidden; border-radius: 3px; cursor: text; pointer-events: auto;
  /* minimale Lichtkante oben + ein schmaler, schräger Metallschimmer */
  background: linear-gradient(104deg, transparent 34%, rgba(255, 236, 196, .045) 47%, transparent 60%);
  box-shadow: inset 0 1px 0 rgba(255, 232, 186, .07);
  transition: opacity .6s, box-shadow .35s;
}
.gate-plate.off { opacity: 0; }
.gate-figure.lamp-wait .gate-plate { opacity: 0; }
.gate-figure.lamp-on .gate-plate { opacity: 0; animation: plateIn 1s 2.2s ease-out forwards; }
@keyframes plateIn { to { opacity: 1; } }
/* Gravur: dunkle Kante oben, helle Kante unten – eingeschnitten, nicht aufgeklebt */
.plate-lot, .plate-brand, #gate-plate-name { flex: 0 0 auto; }
.plate-lot {
  width: calc(var(--ph) * .2); height: auto; display: block; overflow: visible;
  color: color-mix(in srgb, var(--gold-neu) 88%, transparent);
  filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, .65)) drop-shadow(0 1px 0 rgba(255, 228, 170, .16));
}
.plate-brand {
  margin-top: calc(var(--ph) * .055);
  padding-left: .32em;   /* gleicht die Laufweite aus, damit das Wort mittig sitzt */
  font-family: var(--font-text); font-weight: 500; text-transform: uppercase; line-height: 1;
  font-size: max(8px, calc(var(--ph) * .06)); letter-spacing: .32em; white-space: nowrap;
  color: color-mix(in srgb, var(--gold-neu) 58%, transparent);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 228, 170, .1);
}
.plate-name { position: relative; flex: 1 1 auto; align-self: stretch; display: flex; align-items: center; justify-content: center; }
#gate-plate-name {
  white-space: nowrap; line-height: 1;
  font-family: var(--font-display); font-style: italic; font-weight: 600; letter-spacing: .03em;
  color: var(--gold-neu);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .78), 0 1px 0 rgba(255, 230, 170, .24), 0 0 5px rgba(217, 183, 98, .14);
}
/* Fokus: die Gravur wird aktiv – feine Lichtkante innen, etwas mehr Kontrast; kein Leuchten nach außen */
.gate-plate:focus-within { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-neu) 42%, transparent), inset 0 1px 0 rgba(255, 232, 186, .16); }
.gate-plate:focus-within #gate-plate-name { color: var(--gold-hell); }
.gate-plate:focus-within .plate-brand { color: color-mix(in srgb, var(--gold-neu) 70%, transparent); }
/* Das Schild ist das Namensfeld: unsichtbare Eingabe genau über der Gravur, der Cursor sitzt am Namen */
#f-holder {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0 7%; border: 0; border-radius: 3px; outline: none;
  background: transparent; -webkit-appearance: none; appearance: none;
  text-align: center; line-height: 1; transform-origin: 0 0;
  font-family: var(--font-display); font-style: italic; font-weight: 600; letter-spacing: .03em;
  color: transparent; caret-color: var(--gold-hell);
}
#f-holder::placeholder { color: color-mix(in srgb, var(--gold-neu) 60%, transparent); opacity: 1; font-weight: 500; }
#f-holder::selection { color: transparent; background: color-mix(in srgb, var(--gold-neu) 30%, transparent); }
#gate-headline { white-space: pre-line; font-size: clamp(2rem, 7.4vw, 3rem); }
/* Zentrum am Tresen: dieselbe ruhige Bildunterschrift wie in den Schritten */
.counter-quote { margin: 0 0 var(--s-4); }
#counter-text { white-space: pre-line; }

.form { display: grid; gap: var(--s-2); }
.field label { display: block; font-size: .85rem; font-weight: 500; letter-spacing: .02em; margin-bottom: 6px; color: var(--ink-soft); }
.field input[type="text"], .field input[type="email"] {
  width: 100%; min-height: 52px; padding: 12px 16px;
  font: inherit; color: var(--bordeaux);
  background: var(--licht);
  border: 1px solid transparent; border-radius: var(--r-md);
  transition: box-shadow var(--t-fast), border-color var(--t-fast);
}
.field input[type="text"]:focus-visible, .field input[type="email"]:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--terrakotta) 70%, transparent); }
.field input[aria-invalid="true"] { border-color: var(--terrakotta); box-shadow: 0 0 0 2px color-mix(in srgb, var(--terrakotta) 40%, transparent); }
.field-check { display: grid; grid-template-columns: 28px 1fr; align-items: start; gap: 4px 10px; }
.field-check input { width: 22px; height: 22px; margin: 3px 0 0; accent-color: var(--terrakotta); }
.field-check label { font-weight: 400; font-size: .88rem; line-height: 1.5; margin: 0; letter-spacing: 0; }
.field-check .field-error { grid-column: 2; }
.field-error { color: var(--terrakotta-hell); font-size: .875rem; font-weight: 500; margin: 4px 0 0; }
.field-error:empty { display: none; }
.privacy-link { font-size: .85rem; margin: -4px 0 0 38px; color: var(--ink-soft); }
.privacy-link a { color: inherit; }
/* zwei unabhängige Einwilligungen */
.consents { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 14px; }
.field-check label strong { display: block; font-weight: 500; font-size: .95rem; margin-bottom: 2px; }
.consents > .consent-draft, .consents > .field-error { margin-left: 38px; grid-column: 1 / -1; }
.form-error { color: var(--licht); font-weight: 500; font-size: .9rem; border-left: 2px solid var(--terrakotta); padding-left: 10px; margin: 0; }
.form-error:empty { display: none; }
#signup-error { white-space: pre-line; }
/* Einwilligung ist noch Entwurf: sichtbar markiert, bis der Rechtstext geprüft ist */
.consent-todo { outline: 1px dashed var(--terrakotta); outline-offset: 4px; border-radius: 2px; }
.consent-draft { grid-column: 2; margin: 8px 0 0; letter-spacing: .12em; color: var(--terrakotta-hell); }
.micro { text-align: center; font-size: .88rem; margin: 4px 0 0; color: var(--ink-soft); }
.micro-small { font-size: .82rem; color: var(--ink-faint); }
.pending-text { font-size: 1.1rem; margin: 0 0 1.2em; }

/* ---------- 14  Ergebnis: der Bibliotheksausweis ---------- */
#screen-result .card, .card-actions, .copy-status, .signup { max-width: 36rem; margin-left: auto; margin-right: auto; }
.card {
  --cp-x: var(--s-3); --cp-t: var(--s-4); --cp-b: var(--s-3);
  position: relative; overflow: hidden;
  margin-top: var(--s-1); margin-bottom: var(--s-4);
  padding: var(--cp-t) var(--cp-x) var(--cp-b);
  /* Dokumentpapier: warmes Licht, zarte Faser, feiner Innenrahmen */
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .24  0 0 0 0 .07  0 0 0 0 .10  0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>"),
    radial-gradient(ellipse 120% 70% at 50% 0%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(ellipse 90% 60% at 100% 100%, color-mix(in srgb, var(--terrakotta) 7%, transparent), transparent 70%),
    var(--licht);
  color: var(--bordeaux);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2), 0 0 0 1px var(--bordeaux-12);
}
.card::before {   /* Sammelkarte: eine Terrakotta-Kante oben */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--terrakotta);
}
.card :focus-visible { outline-color: var(--terrakotta-dunkel); }
.lot { display: block; height: auto; overflow: visible; }
/* Kopf als Signatur: Lot · BEWUSSTSEINSARCHITEKTUR (leise) · BIBLIOTHEKSAUSWEIS */
.card-head { text-align: center; margin: 0 0 var(--s-3); }
.lot-card { width: 34px; margin: 0 auto 10px; color: var(--bordeaux); }
.card-origin {
  margin: 0 0 var(--s-15); padding-left: .3em;
  font-family: var(--font-text); font-size: .64rem; font-weight: 500; line-height: 1.2;
  letter-spacing: .3em; text-transform: uppercase; color: var(--bordeaux-60);
}
.card-headline { text-align: center; letter-spacing: .32em; color: var(--terrakotta-dunkel); margin: 0; padding-top: var(--s-15); border-top: 1px solid var(--bordeaux-12); display: inline-block; min-width: 60%; }
.card-fields { margin: 0 0 var(--s-3); display: grid; gap: var(--s-3); }
.card-group { display: grid; gap: var(--s-2); }
.card-fields dt { color: var(--bordeaux-60); }
.card-fields dd { margin: 4px 0 0; font-family: var(--font-display); font-style: italic; font-size: 1.3rem; line-height: 1.25; }
.card-group + .card-group { padding-top: var(--s-3); border-top: 1px solid var(--bordeaux-12); }
/* Name: kein Formularfeld, sondern eine Unterschrift – groß auf der Linie, das Etikett klein darunter */
.card-group-name > div { display: flex; flex-direction: column-reverse; }
.card-group-name dt { margin-top: 7px; }
.card-group-name dd {
  margin: 0; font-size: clamp(1.75rem, 6.6vw, 2.2rem); line-height: 1.1; color: var(--bordeaux);
  padding-bottom: 8px; border-bottom: 1px solid color-mix(in srgb, var(--bordeaux) 30%, transparent);
  overflow-wrap: anywhere; hyphens: auto;
}
/* Herzstück: HEUTE GRIFFBEREIT und MEIN EXPERIMENT */
.card-group-today { background: var(--terrakotta-09); border-radius: var(--r-md); padding: var(--s-3) 20px; }
/* keine Trennlinie zum getönten Feld – sein eigener Innenabstand bleibt (oben wie unten gleich) */
.card-group + .card-group-today { border-top: 0; padding-top: var(--s-3); }
.card-group-today + .card-group { border-top: 0; padding-top: 0; }
.card-group-today + .card-group-shelf { padding-top: 4px; }
.card-group-shelf dd { font-size: 1.15rem; color: var(--bordeaux-80); }
.card-group-today dt { color: var(--terrakotta-dunkel); }
.card-group-today > div:first-child dd { font-size: clamp(2.6rem, 10.5vw, 3.1rem); line-height: 1.02; color: var(--bordeaux); overflow-wrap: normal; }   /* app.js → fitCardTitle: lange Wörter werden kleiner statt getrennt */
/* Untertitel des Buchs: die konkrete Übersetzung, direkt unter dem Wort */
.card-group-today > div:first-child dd.card-sub {
  margin-top: 10px; font-size: 1.1rem; line-height: 1.38; color: var(--bordeaux-80);
}
.card-group-today > div + div dd {
  font-family: var(--font-text); font-style: normal;
  font-size: 1.1rem; line-height: 1.5; color: var(--bordeaux);
}
.card-line { margin: 0 0 var(--s-3); font-family: var(--font-display); font-style: italic; font-size: 1.22rem; line-height: 1.35; color: var(--terrakotta-dunkel); }
.card-question { font-size: clamp(1.7rem, 6.2vw, 2.2rem); margin: var(--s-4) 0 0; white-space: pre-line; }
.card-question-kicker { display: block; margin-bottom: 6px; color: var(--terrakotta-dunkel); }
.card-foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-2);
  margin-top: var(--s-4); padding-top: var(--s-2);
  border-top: 1px solid var(--bordeaux-12);
}
.card-signature { margin: 0; white-space: pre-line; font-family: var(--font-display); font-style: italic; font-size: 1.02rem; line-height: 1.3; color: var(--bordeaux-80); }
/* Datumsstempel: rund, doppelter Rand, leicht schief aufgedrückt, Tinte nicht ganz gleichmäßig */
.card-stamp {
  flex: 0 0 auto; margin: 0 4px 0 0;
  width: 114px; height: 114px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  text-align: center; white-space: nowrap;
  color: var(--terrakotta-dunkel);
  border: 2.5px solid currentColor;
  box-shadow: inset 0 0 0 4px var(--licht), inset 0 0 0 5.5px currentColor;
  transform: rotate(-11deg);
  opacity: .88;
  -webkit-mask-image: radial-gradient(circle at 30% 35%, #000 55%, rgba(0,0,0,.72) 75%, #000 100%);
  mask-image: radial-gradient(circle at 30% 35%, #000 55%, rgba(0,0,0,.72) 75%, #000 100%);
}
.card-stamp .stamp-top { font-size: .66rem; letter-spacing: .12em; line-height: 1.2; }
.card-stamp .stamp-date { font-family: var(--font-text); font-size: .8rem; font-weight: 600; letter-spacing: .06em; line-height: 1.1; padding: 3px 0; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
#screen-result:not([hidden]) .card-stamp { animation: stampIn .5s .9s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes stampIn { from { opacity: 0; transform: rotate(-11deg) scale(1.6); } to { opacity: .88; transform: rotate(-11deg) scale(1); } }
/* Herkunft: Band am Fuß des Ausweises */
.card-brand {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px;
  margin: var(--s-3) calc(-1 * var(--cp-x)) calc(-1 * var(--cp-b)); padding: 12px var(--cp-x) 13px;
  background: var(--bordeaux); color: var(--licht);
  font-family: var(--font-text); font-size: .74rem; font-weight: 500; letter-spacing: .06em;
}
.card-brand #card-url { color: color-mix(in srgb, var(--licht) 72%, transparent); font-weight: 400; }
#screen-result:not([hidden]) .card { animation: cardIn 1s var(--ease-out); }
@keyframes cardIn { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
@media (min-width: 640px) { .card { --cp-x: var(--s-5); --cp-t: var(--s-5); --cp-b: var(--s-4); } .card-group-today { padding: var(--s-3); } .card-brand { font-size: .8rem; } }
/* Tablet (640–979): eigene Stufe – etwas breiter, großzügiger, Buch und Experiment bleiben untereinander */
@media (min-width: 640px) and (max-width: 979px) {
  #screen-result .card { max-width: 38rem; }
  .card-group-today > div:first-child dd { font-size: 3.3rem; }
  .card-group-today > div + div dd { font-size: 1.14rem; }
  .card-group-today > div:first-child dd.card-sub { font-size: 1.18rem; }
}
/* Desktop: größeres, ruhiges Dokument – Buch und Experiment nebeneinander, klar getrennt; kein Plakat */
@media (min-width: 980px) {
  .app:has(#screen-result:not([hidden])) { max-width: calc(48rem + 2 * var(--gutter)); }
  #screen-result .card { max-width: 46rem; }
  .card { --cp-x: 64px; --cp-t: 56px; --cp-b: 40px; }
  .card-head { margin-bottom: var(--s-4); }
  .card-origin { font-size: .7rem; }
  .card-group-name dd { font-size: 2.4rem; }
  .card-group-today { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0 var(--s-4); align-items: start; padding: var(--s-4); }
  .card-group + .card-group-today { padding-top: var(--s-4); }
  .card-group-today > div + div { border-left: 1px solid color-mix(in srgb, var(--terrakotta) 30%, transparent); padding-left: var(--s-4); }
  .card-group-today > div:first-child dd { font-size: 3.6rem; }
  .card-group-today > div + div dd { font-size: 1.2rem; margin-top: 8px; }
  .card-group-today > div:first-child dd.card-sub { font-size: 1.2rem; }
  .card-question { font-size: 2.3rem; }
  .card-stamp { width: 124px; height: 124px; }
  .card-stamp .stamp-date { font-size: .9rem; }
  .card-brand { font-size: .84rem; padding-top: 14px; padding-bottom: 15px; }
}

/* Speichern: eine Hauptaktion (Bild für die Story), der Rest leiser */
.card-actions { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.card-actions .action { display: flex; flex-direction: column; gap: 6px; }
.card-actions .action .btn { width: 100%; }
#btn-story { background: var(--licht); color: var(--bordeaux); border-color: var(--licht); box-shadow: var(--shadow-1); }
#btn-story:hover { background: var(--terrakotta-15); border-color: var(--terrakotta-15); }
#btn-restart { justify-self: center; }
.action-hint { margin: 0; font-size: .8rem; line-height: 1.4; color: var(--ink-soft); text-align: center; }
@media (min-width: 640px) {
  .card-actions { grid-template-columns: 1fr 1fr; align-items: start; }
  #btn-restart { grid-column: 1 / -1; }
}
.copy-status { display: block; width: fit-content; max-width: 100%; text-align: center; font-size: .9rem; margin-top: var(--s-15); color: var(--bordeaux); background: var(--licht); border-radius: var(--r-sm); padding: 6px 14px; }
.copy-status:empty { display: none; }
/* Geführte nächste Schritte nach dem Ausweis: Satz, darunter ein leiser Pfeil nach unten */
.next-step {
  max-width: 30rem; margin: var(--s-6) auto var(--s-4); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-15);
}
.next-step p {
  margin: 0; font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.35rem, 5vw, 1.7rem); line-height: 1.3; color: var(--licht);
}
.next-step::before { content: ""; width: 1px; height: 40px; background: linear-gradient(transparent, color-mix(in srgb, var(--licht) 55%, transparent)); }
.next-arrow {
  width: 14px; height: 14px; margin-top: 2px;
  border-right: 1.5px solid var(--terrakotta-hell); border-bottom: 1.5px solid var(--terrakotta-hell);
  transform: rotate(45deg);
  animation: nudge 2.2s ease-in-out infinite;
}
@keyframes nudge { 0%, 100% { transform: translateY(0) rotate(45deg); opacity: .6; } 50% { transform: translateY(5px) rotate(45deg); opacity: 1; } }
.next-step-julia { margin-top: var(--s-6); margin-bottom: 0; }
.next-step-julia + .julia { margin-top: var(--s-3); }
/* Die Pointe nach dem Ausweis: bekommt Raum, kein Infokasten */
.next-step-meta { max-width: 34rem; margin: var(--s-5) auto var(--s-5); gap: var(--s-2); }
#next-step-text { display: grid; gap: var(--s-2); }
#next-step-text p:first-child:not(:last-child) {
  font-family: var(--font-text); font-style: normal; font-size: .82rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent-text);
}
#next-step-text p:last-child { font-size: clamp(1.9rem, 7.4vw, 2.9rem); line-height: 1.12; text-wrap: balance; }

/* Story-Bild groß (Handy ohne Teilen-Menü): gedrückt halten und sichern */
.story-view {
  position: fixed; inset: 0; z-index: 70;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2);
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  background: color-mix(in srgb, #000 88%, transparent);
  text-shadow: none;
}
.story-view img { max-width: 100%; max-height: calc(100dvh - 170px); width: auto; height: auto; border-radius: var(--r-md); box-shadow: var(--shadow-2); -webkit-touch-callout: default; user-select: auto; }
.story-hint { margin: 0; font-size: 1rem; font-weight: 500; color: var(--licht); text-align: center; }
body.story-open { overflow: hidden; }

/* Freiwillige Eintragung: kein Kasten, nur Typografie und Formular */
.signup { margin-top: 0; }
.signup.panel h2.display { font-size: clamp(1.55rem, 5.4vw, 1.95rem); line-height: 1.15; margin-bottom: .5em; }   /* ordnet sich der Frage darüber unter */
.next-step-meta + .signup { margin-top: var(--s-5); }
#signup-text { white-space: pre-line; color: var(--ink-soft); margin-bottom: var(--s-3); }
.signup-done-headline { font-family: var(--font-display); font-style: italic; font-size: 1.6rem; margin: 0 0 .4em; }
.signup-done p { white-space: pre-line; }
.signup-done-note { font-size: .88rem; color: var(--ink-soft); }
/* sichtbare Platzhalter: bis Julia den Text schreibt */
.is-todo {
  outline: 1px dashed var(--terrakotta); outline-offset: 4px;
  font-family: var(--font-text) !important; font-style: normal !important; font-size: .95rem !important;
  color: var(--terrakotta-hell) !important;
}
.btn.is-todo { outline-offset: 2px; }
.todo-note { margin: 8px 0 0; font-size: .8rem; color: var(--terrakotta-hell); }

/* ---------- 15  Julia: helles, redaktionelles Band ---------- */
.julia {
  position: relative;
  margin: var(--s-6) calc(50% - 50vw) 0;
  padding: var(--s-6) var(--gutter);
  background: var(--licht); color: var(--bordeaux);
  display: grid; gap: var(--s-4);
}
.julia-photo { margin: 0; }
.julia-photo img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1 / 1; max-height: 380px;          /* Handy: Kopf bis Brust, keine riesige Bildhöhe */
  object-fit: cover; object-position: center 12%;
  border-radius: var(--r-lg);
}
.julia-content > :first-child { margin-top: 0; }
.lot-julia { width: 48px; margin: 0 0 var(--s-2); color: var(--bordeaux); }
.julia h2 { font-size: clamp(2.2rem, 8vw, 3rem); color: var(--bordeaux); }
.julia-second { font-family: var(--font-display); font-style: italic; font-size: clamp(1.35rem, 4.6vw, 1.6rem); line-height: 1.3; color: var(--terrakotta-dunkel); margin-bottom: 1em; }
.julia-second:empty { display: none; }
.julia .prose p { color: var(--bordeaux-80); }
.julia-bridge { white-space: pre-line; margin: var(--s-3) 0 var(--s-2); font-family: var(--font-display); font-style: italic; font-size: 1.3rem; line-height: 1.4; color: var(--terrakotta-dunkel); }
.julia-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-15); margin-top: var(--s-2); }
.julia .btn-primary { background: var(--bordeaux); color: var(--licht); border-color: var(--bordeaux); min-width: 15rem; box-shadow: none; }
.julia .btn-primary:hover { background: var(--terrakotta-dunkel); border-color: var(--terrakotta-dunkel); }
.julia .todo-note { color: var(--terrakotta-dunkel); }
.julia-links { margin: var(--s-3) 0 0; display: flex; flex-wrap: wrap; gap: 10px; font-size: .92rem; color: var(--bordeaux-80); }
.julia-links a { color: var(--bordeaux-80); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--bordeaux-25); }
.julia-links a:hover { color: var(--bordeaux); text-decoration-color: currentColor; }
.julia :focus-visible { outline-color: var(--bordeaux); }
@media (min-width: 640px) {
  .julia {
    grid-template-columns: minmax(220px, 36%) 1fr; align-items: center; gap: var(--s-5);
    padding: var(--s-7) max(var(--gutter), calc(50vw - 30rem));
  }
  .julia-photo img { aspect-ratio: 4 / 5; max-height: none; }
}

/* Footer: Hinweis unten, ohne Block – nur ein weicher Schatten hinter dem Text */
.footer {
  position: relative; z-index: var(--z-app);
  max-width: 600px; margin: var(--s-4) auto var(--s-4); padding: 20px var(--gutter) 18px;
  text-align: center; font-size: .85rem; line-height: 1.55; color: var(--ink-soft);
  background: radial-gradient(ellipse 70% 60% at 50% 55%, color-mix(in srgb, var(--bordeaux-tief) 55%, transparent), transparent 75%);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .75);
}
.footer p { margin: 0; }
.footer #footer-text { white-space: pre-line; }
.lot-footer { width: 40px; margin: 0 auto var(--s-2); color: var(--licht); }
.footer-links { margin-top: var(--s-15) !important; display: flex; gap: 10px; justify-content: center; }
.footer-links a { color: var(--licht); text-decoration: underline; text-underline-offset: 3px; }
.footer-links a:hover { color: var(--terrakotta-hell); }

/* ---------- 16  Entwicklungsmodus (deutlich sichtbar) ---------- */
.dev-banner {
  position: sticky; top: 0; z-index: var(--z-dev);
  background: var(--terrakotta); color: var(--licht);
  font-size: .8rem; font-weight: 500; letter-spacing: .08em; text-align: center;
  padding: 6px 12px;
}
.dev-box { margin: 18px 0 4px; padding: 12px; border: 2px dashed var(--terrakotta); border-radius: var(--r-md); }
.btn-dev { background: transparent; color: var(--licht); border-color: var(--terrakotta); width: 100%; }
.btn-dev:hover { background: color-mix(in srgb, var(--terrakotta) 25%, transparent); }
.dev-music {   /* nur lokal: Stil-Umschalter */
  position: fixed; left: 16px; bottom: calc(max(20px, env(safe-area-inset-bottom)) + 56px); z-index: 56;
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 10px; border-radius: 10px;
  background: color-mix(in srgb, #000 55%, transparent); backdrop-filter: blur(6px);
  border: 2px dashed var(--terrakotta);
  font: 500 .72rem var(--font-text); letter-spacing: .08em; color: var(--licht);
}
.dev-music select { font: 500 .85rem var(--font-text); color: var(--bordeaux); background: var(--licht); border: 0; border-radius: 6px; padding: 6px 8px; min-height: 36px; }

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .scene-dust, .film { display: none; }
  .gate-figure.lamp-wait img { filter: none; }
  #screen-transition.t-play .t-line, #screen-transition.t-play .nav { opacity: 1; }
}

/* ---------- PDF / Drucken: nur der Ausweis ---------- */
@media print {
  @page { size: A4 portrait; margin: 18mm; }
  html, body { background: #fff !important; }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .scene, .film, .dev-banner, .dev-music, .sound-toggle, .spine-tip, .footer,
  .card-actions, .copy-status, .next-step, .story-view, .signup, .julia, .screen:not(#screen-result) { display: none !important; }
  .card-stamp { animation: none !important; opacity: .9; }
  .app, #screen-result { padding: 0 !important; margin: 0 !important; max-width: none !important; min-height: 0 !important; animation: none !important; text-shadow: none; }
  .card {
    --cp-x: 11mm; --cp-t: 9mm; --cp-b: 8mm;
    margin: 0 auto !important; max-width: 150mm;
    animation: none !important; box-shadow: 0 0 0 1px var(--bordeaux-25) !important;
    padding: var(--cp-t) var(--cp-x) var(--cp-b);
  }
  .card-head { margin-bottom: 10px; }
  .lot-card { width: 26px; margin-bottom: 4px; }
  .card-origin { font-size: .55rem; margin-bottom: 6px; }
  .card-headline { padding-top: 6px; }
  .card-fields { gap: 10px; margin-bottom: 12px; }
  .card-group { grid-template-columns: 1fr 1fr; gap: 6px 18px; }
  .card-group + .card-group { padding-top: 10px; }
  .card-group-today, .card-group + .card-group-today { padding: 10px 12px; }
  .card-fields dt { font-size: .6rem; }
  .card-fields dd { font-size: 1.05rem; }
  /* gleiche Hierarchie wie auf der Seite: Name → Buch → Experiment */
  .card-group-name, .card-group-shelf { grid-template-columns: 1fr; }
  .card-group-name dd { font-size: 1.9rem; }
  .card-group-today > div:first-child dd { font-size: 2.1rem; }
  .card-group-today > div + div dd { font-size: .98rem; }
  .card-group-today > div:first-child dd.card-sub { font-size: .95rem; margin-top: 5px; }
  .card-group-name dt { margin-top: 3px; }
  .card-line { font-size: 1.05rem; margin-bottom: 10px; }
  .card-question { font-size: 1.55rem; margin: 12px 0 8px; }
  .card-group, .card-question { break-inside: avoid; }
}