/* =========================================================
   WORTWELTEN — Buchseite
   Die Website als aufgeschlagenes Buch:
   linke Seite = Inhalt, rechte Seite = Inhaltsverzeichnis (Menü).
   Keine externen Schriften/CDNs (DSGVO) – nur System-Schriftstapel.
   ========================================================= */

:root {
  --tisch:        #1f3d2d;   /* Schreibtisch: grünes Leder */
  --tisch-dunkel: #10241a;
  --tisch-hell:   #2f5a43;
  --beige:        #e6e1d9;   /* Schrift/Links auf dem Leder (ehem. Hintergrund) */
  --beige-soft:   rgba(230,225,217,.62);
  --einband:      #5a1824;   /* Bordeauxrot */
  --einband-hell: #7a2433;
  --papier:       #fdfcf9;
  --papier-2:     #f5f3ee;
  --papier-falz:  #c9c5bc;
  --schnitt-1:    #ebe8e2;   /* Seitenschnitt (Papierkanten) */
  --schnitt-2:    #d3cfc7;

  --tinte:        #161a23;
  --text:         #2a2b31;
  --text-soft:    #686a74;
  --gold:         #a5824a;
  --gold-hell:    #c9a96a;
  --wein:         #7c2d3a;
  --linie:        #e0dbcf;

  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-body:    "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-ui:      -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --seiten-pad:   calc(clamp(28px, 4.4vw, 88px) * var(--skala, 1));
  --buch-breite:  1640px;   /* maximale Breite des aufgeschlagenen Buchs */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
/* Schriftgröße wächst mit dem Fenster → das ganze Buch skaliert mit */
/* --skala (buch.js) verkleinert das ganze Buch, wenn das Fenster zu niedrig ist */
html { -webkit-text-size-adjust: 100%; font-size: calc(clamp(15px, 0.5vw + 9.6px, 20px) * var(--skala, 1)); }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.06rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  background-color: var(--tisch);
  background-image:                   /* Licht von links oben, dunkle Ränder */
    radial-gradient(ellipse 80% 70% at 35% 25%, rgba(120,170,130,.22), transparent 70%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,.45) 100%),
    linear-gradient(160deg, var(--tisch-hell), var(--tisch) 45%, var(--tisch-dunkel));
  background-attachment: fixed;
}
body::before {                       /* Ledernarbung */
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--noise), var(--noise);
  background-size: 220px 220px, 90px 90px;
  opacity: .22; mix-blend-mode: overlay;
}
body::after {                        /* eingeprägte Goldlinie am Rand der Lederfläche */
  content: ""; position: fixed; inset: clamp(8px, 1.2vw, 18px); z-index: -1; pointer-events: none;
  border: 1px solid rgba(201,169,106,.28);
  box-shadow: 0 0 0 3px rgba(0,0,0,.12), inset 0 0 0 3px rgba(0,0,0,.12), inset 0 0 0 4px rgba(201,169,106,.12);
}

a { color: var(--wein); text-underline-offset: 3px; }
a:hover { color: var(--tinte); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

.skip-link {
  position: absolute; left: -9999px; top: 8px;
  background: var(--tinte); color: #fff; padding: 8px 14px; z-index: 100; font-family: var(--font-ui);
}
.skip-link:focus { left: 8px; }

/* ---------- Bühne & Buch ---------- */

.buehne {
  padding: calc(clamp(24px, 4vw, 64px) * var(--skala, 1)) clamp(16px, 2.5vw, 48px) calc(40px * var(--skala, 1));
  display: flex; flex-direction: column; align-items: center;
}

.buch {
  position: relative;
  width: calc(min(100%, var(--buch-breite)) * var(--skala, 1));
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: calc(clamp(12px, 1.2vw, 22px) * var(--skala, 1)) calc(clamp(14px, 1.4vw, 26px) * var(--skala, 1)) calc(clamp(18px, 1.8vw, 32px) * var(--skala, 1));   /* sichtbarer Einband */
  perspective: 2400px;
  isolation: isolate;
}

/* Einband (Buchdeckel) mit Schlagschatten wie im Foto: Licht von links oben */
.buch__einband {
  position: absolute; inset: 0; z-index: -2;
  border-radius: 6px 6px 8px 8px;
  background:
    linear-gradient(90deg, transparent 49.2%, rgba(0,0,0,.55) 50%, transparent 50.8%),
    linear-gradient(180deg, var(--einband-hell), var(--einband) 30%);
  box-shadow:
    0 2px 0 rgba(255,255,255,.04) inset,
    2px 6px 10px rgba(0,0,0,.18),
    38px 42px 60px -18px rgba(0,0,0,.45),
    70px 60px 90px -30px rgba(0,0,0,.25);
}
.buch__einband::after {             /* Leinenstruktur */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background-image: var(--noise); opacity: .35; mix-blend-mode: overlay;
}

/* ---------- Buchseiten ---------- */

.seite {
  position: relative;
  min-height: calc(min(78vh, 760px) * var(--skala, 1));
  display: flex; flex-direction: column;
  background-color: var(--papier);
}
.seite::before {                     /* feine Papierstruktur */
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background-image: var(--noise); opacity: .045;
}

.seite__inhalt {
  position: relative; flex: 1;
  padding: var(--seiten-pad);
}

.seite--links {
  border-radius: 18px 3px 3px 6px / 26px 3px 3px 6px;
  background-image: linear-gradient(90deg,
      #efede8 0%, var(--papier) 6%, var(--papier) 70%,
      var(--papier-2) 86%, #e4e1da 94%, var(--papier-falz) 99%, #aaa59b 100%);
  /* Seitenschnitt unten links: gestapelte Papierkanten */
  box-shadow:
    -1px 1px 0 var(--schnitt-1), -2px 2px 0 var(--schnitt-2),
    -3px 3px 0 var(--schnitt-1), -4px 4px 0 var(--schnitt-2),
    -5px 5px 0 var(--schnitt-1), -6px 6px 0 var(--schnitt-2),
    -7px 7px 0 var(--schnitt-1), -8px 8px 1px rgba(0,0,0,.25);
}
.seite--links .seite__inhalt { padding-right: calc(var(--seiten-pad) + 18px); }

.seite--rechts {
  border-radius: 3px 18px 6px 3px / 3px 26px 6px 3px;
  background-image: linear-gradient(90deg,
      #a39e94 0%, var(--papier-falz) 1.5%, #e2dfd8 5%, var(--papier-2) 13%,
      var(--papier) 30%, var(--papier) 93%, #efede8 100%);
  box-shadow:
    1px 1px 0 var(--schnitt-1), 2px 2px 0 var(--schnitt-2),
    3px 3px 0 var(--schnitt-1), 4px 4px 0 var(--schnitt-2),
    5px 5px 0 var(--schnitt-1), 6px 6px 0 var(--schnitt-2),
    7px 7px 0 var(--schnitt-1), 8px 8px 1px rgba(0,0,0,.25);
}
.seite--rechts .seite__inhalt { padding-left: calc(var(--seiten-pad) + 18px); padding-right: calc(var(--seiten-pad) + 22px); }

/* Wölbung zur Buchmitte hin */
.seite--links::after, .seite--rechts::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 60px; pointer-events: none;
}
.seite--links::after  { right: 0; background: linear-gradient(90deg, transparent, rgba(0,0,0,.06)); }
.seite--rechts::after { left: 0;  background: linear-gradient(270deg, transparent, rgba(0,0,0,.07)); }

.seite__zahl {
  text-align: center; color: var(--text-soft);
  font-size: .82rem; letter-spacing: .12em; padding: 0 0 22px;
  font-variant-numeric: oldstyle-nums;
}

/* Lesebändchen */
.lesebaendchen {
  position: absolute; top: -4px; right: 34px; z-index: 2;
  width: calc(clamp(22px, 1.55vw, 30px) * var(--skala, 1)); height: calc(clamp(120px, 11vw, 200px) * var(--skala, 1));
  background: linear-gradient(90deg, #5e1f2a, var(--wein) 45%, #93414f 60%, #5e1f2a);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 0.9em), 0 100%);
  font-size: calc(clamp(11px, .8vw, 15px) * var(--skala, 1));
  filter: drop-shadow(1px 2px 1px rgba(0,0,0,.2));
}
/* Lesebändchen als Link zur Startseite (alle Seiten außer der Startseite) */
.lesebaendchen--link {
  display: flex; justify-content: center;
  height: auto;
  padding: 1.3em 0 2.2em;
  text-decoration: none;
  transition: filter .2s, transform .25s;
  transform-origin: top center;
}
.lesebaendchen__text {
  writing-mode: vertical-rl;            /* liest sich von oben nach unten */
  font-family: var(--font-ui);
  font-size: 1em; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase;
  color: #f3dfc0;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
  white-space: nowrap;
}
.lesebaendchen--link:hover,
.lesebaendchen--link.is-hover { filter: drop-shadow(1px 3px 2px rgba(0,0,0,.3)) brightness(1.12); transform: scaleY(1.04); }
.lesebaendchen--link:hover .lesebaendchen__text,
.lesebaendchen--link.is-hover .lesebaendchen__text { color: #fff; }
.lesebaendchen--link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- Typografie auf den Seiten ---------- */

.kicker {
  margin: 0 0 .4rem;
  font-family: var(--font-ui);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
}

.titel {
  margin: 0 0 .6rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.3rem, calc(4.4vw * var(--skala, 1)), 3.6rem);
  line-height: 1.05;
  color: var(--tinte);
  letter-spacing: -.01em;
}
.titel--klein { font-size: clamp(1.9rem, calc(3.2vw * var(--skala, 1)), 2.6rem); }

.lead {
  margin: 0 0 1.4rem;
  font-size: 1.14rem; font-style: italic;
  color: #3e4049;
  max-width: 34em;
}

.ornament {
  text-align: center; color: var(--gold); font-size: 1.3rem; margin: 1.6rem 0 1.2rem; opacity: .85;
}

/* Über mich */
.bio::after { content: ""; display: block; clear: both; }
.bio p { margin: 0 0 .9rem; hyphens: auto; }
.bio .kicker { text-align: left; }
.initial::first-letter {
  float: left; font-family: var(--font-display);
  font-size: 3.4em; line-height: .82; padding: 6px 8px 0 0; color: var(--wein);
}

/* eingeklebtes Foto */
.foto {
  float: right; width: 34%; max-width: 15rem;
  margin: 4px 0 12px 20px;
  padding: 7px 7px 22px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.15), 0 8px 18px -6px rgba(0,0,0,.25);
  transform: rotate(2.2deg);
}
.foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; }

/* Aktuelles als Notizzettel */
.notiz {
  position: relative;
  margin: 1.4rem 0 1.2rem;
  padding: 14px 18px 12px;
  background: #fbf3d9;
  border-left: 3px solid var(--gold);
  font-family: var(--font-ui); font-size: .9rem; line-height: 1.5;
  box-shadow: 0 6px 12px -8px rgba(0,0,0,.3);
  transform: rotate(-.6deg);
}
.notiz strong { display: block; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--wein); margin-bottom: 2px; }
.notiz p { margin: 0; }

.zitat, .motto { margin: 1.4rem 0 0; text-align: center; }
.seite--rechts .seite__inhalt { display: flex; flex-direction: column; }
.motto { margin-top: auto; padding-top: 1.6rem; }
.seite--rechts .notiz { margin-top: .4rem; }
.zitat p, .motto p { margin: 0 0 .3rem; font-style: italic; color: #3e4049; }
.zitat cite, .motto cite { font-style: normal; font-family: var(--font-ui); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-soft); }
.zitat cite::before, .motto cite::before { content: "— "; }

.platzhalter { color: var(--text-soft); font-style: italic; text-align: center; }
.fliesstext p { hyphens: auto; }

/* ---------- Inhaltsverzeichnis (Hauptmenü) ---------- */

.toc__titel {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.9rem, calc(3vw * var(--skala, 1)), 2.5rem); color: var(--tinte); line-height: 1.1;
}
.toc__untertitel { margin: .3rem 0 2rem; color: var(--text-soft); font-style: italic; }

.toc { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.toc__eintrag { border-bottom: 1px solid transparent; }
.toc__eintrag a {
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 0;
  color: var(--text); text-decoration: none;
  font-size: 1.16rem;
  transition: color .2s, transform .25s;
}
.toc__nr { width: 2.6em; flex: none; color: var(--gold); font-size: .92rem; font-variant: small-caps; }
.toc__text { flex: none; }
.toc__punkte {
  flex: 1; min-width: 20px; height: 1px; align-self: flex-end; margin-bottom: .42em;
  background-image: radial-gradient(circle, rgba(42,43,49,.45) 1px, transparent 1.3px);
  background-size: 7px 3px; background-repeat: repeat-x;
}
.toc__seite { flex: none; min-width: 2ch; text-align: right; font-variant-numeric: oldstyle-nums; color: var(--text-soft); }

.toc__eintrag a:hover { color: var(--wein); transform: translateX(4px); }
.toc__eintrag a:hover .toc__seite { color: var(--wein); }
.toc__eintrag.is-active a { color: var(--wein); }
.toc__eintrag.is-active .toc__text { font-style: italic; }
.toc__eintrag.is-active .toc__nr::before { content: "›"; position: absolute; margin-left: -1em; color: var(--wein); }

/* ---------- Unterhalb des Buchs ---------- */

.unter-buch {
  width: calc(min(100%, var(--buch-breite)) * var(--skala, 1));
  margin-top: 44px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px;
  font-family: var(--font-ui); font-size: .86rem; color: var(--beige);
}
.unter-buch ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.unter-buch a { color: var(--beige); text-decoration: none; }
.unter-buch a:hover { color: #fff; text-decoration: underline; }
.unter-buch__social a {
  display: inline-block; padding: 5px 13px; border: 1px solid rgba(230,225,217,.4); border-radius: 999px;
}
.unter-buch__social a:hover { border-color: var(--beige); background: rgba(230,225,217,.08); text-decoration: none; }
.unter-buch__copy { margin: 0; width: 100%; text-align: center; font-size: .78rem; color: var(--beige-soft); }

/* ---------- Umblättern (buch.js) ---------- */

.blatt {
  position: absolute; z-index: 5; pointer-events: none;
  transform-style: preserve-3d;
  transition: transform .75s cubic-bezier(.45,.05,.3,1);
}
.blatt__seite {
  position: absolute; inset: 0; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.blatt__seite--rueck { transform: rotateY(180deg); }
.blatt__seite > .seite { min-height: 100%; height: 100%; box-shadow: none; }
.blatt::after {                      /* Schatten auf dem umschlagenden Blatt */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.18), transparent 40%);
  opacity: 0; transition: opacity .75s;
}
.blatt.is-dreht::after { opacity: 1; }





/* Zwischenüberschriften und Listen im Fließtext der Buchseiten
   (:where = keine Spezifität, damit gezielte Klassen wie .toc gewinnen) */
:where(.seite__inhalt) :where(h2, h3) {
  font-family: var(--font-display); font-weight: 400; color: var(--tinte);
  line-height: 1.2; margin: 1.4em 0 .5em;
}
:where(.seite__inhalt) :where(h2) { font-size: 1.6rem; }
:where(.seite__inhalt) :where(h3) { font-size: 1.25rem; font-style: italic; }
:where(.seite__inhalt) :where(h2:first-child, h3:first-child) { margin-top: 0; }
:where(.seite__inhalt) :where(ul, ol) { padding-left: 1.4em; }



/* ---------- Inhalte aus der Datenbank ---------- */
.zurueck { margin: 0 0 .8rem; font-family: var(--font-ui); font-size: .8rem; }
.zurueck a { text-decoration: none; }
.fliesstext-absatz { hyphens: auto; }
.genre {
  margin: 1.6rem 0 .6rem !important; padding-top: .9rem; border-top: 1px solid var(--linie);
  font-size: 1.35rem !important; color: var(--wein) !important;
}
.abschnitt { font-size: 1.6rem; }

/* Hörspielreihe in der Übersicht */
.reihe {
  display: grid; grid-template-columns: 4.2rem 1fr; column-gap: 1rem;
  align-items: start;
  padding: .55rem .5rem; margin: 0 -.5rem;
  color: var(--text); text-decoration: none;
  border-radius: 6px;
  transition: background .2s;
}
.reihe:hover, .reihe.is-hover { background: rgba(165,130,74,.1); color: var(--text); }
.reihe__bild {
  grid-row: 1 / span 3; width: 4.2rem; height: 4.2rem; object-fit: cover;
  border: 3px solid #fff; box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 4px 10px -4px rgba(0,0,0,.3);
}
.reihe__meta { font-family: var(--font-ui); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.reihe__titel { font-family: var(--font-display); font-size: 1.12rem; line-height: 1.25; color: var(--tinte); }
.reihe__text { font-size: .86rem; line-height: 1.45; color: var(--text-soft); }

/* Folgen & Lesungen */
.objekt--folge .objekt__bild { width: 30%; max-width: 10rem; }
.objekt--folge .objekt__bild img { aspect-ratio: 1 / 1; }
.objekt--folge .objekt__titel { font-size: 1.45rem !important; }
.objekt--folge + .objekt--folge { padding-top: 1.2rem; border-top: 1px dashed var(--linie); }
.objekt--lesung + .objekt--lesung { padding-top: 1.2rem; border-top: 1px dashed var(--linie); }
.prosa p { margin: 0 0 .7rem; hyphens: auto; }
.prosa img {
  display: inline-block; max-width: 100%; max-height: 15rem; width: auto; height: auto;
  margin: .3rem .4rem .4rem 0; padding: 5px; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.15), 0 6px 14px -6px rgba(0,0,0,.28);
}
.prosa blockquote { margin: 1rem 0; padding-left: 1rem; border-left: 3px solid var(--gold); font-style: italic; color: #3e4049; }
.fliesstext img { max-height: 1.4em; vertical-align: middle; }

/* Partner / Label */
.partner__titel { margin-top: 1.6rem !important; font-size: 1.15rem !important; }
.partner { list-style: none; padding: 0 !important; margin: .4rem 0 1rem; display: flex; flex-wrap: wrap; gap: 8px; }
.partner a {
  display: inline-block; padding: 4px 12px; border: 1px solid rgba(22,26,35,.22); border-radius: 999px;
  font-family: var(--font-ui); font-size: .8rem; color: #3d3f48; text-decoration: none;
}
.partner a:hover, .partner a.is-hover { border-color: var(--wein); color: var(--wein); }

/* ---------- Objekte (Romane, Hörspiele, Lesungen …) ---------- */
.objekt { margin: 1.4rem 0 0; }
.objekt:first-child { margin-top: 0; }
.objekt::after { content: ""; display: block; clear: both; }
.objekt__bild {
  float: left; width: 36%; max-width: 14rem;
  margin: .3rem 1.3rem .8rem 0; padding: 6px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.15), 0 8px 18px -6px rgba(0,0,0,.28);
  transform: rotate(-1.4deg);
}
.objekt__bild img { display: block; width: 100%; height: auto; aspect-ratio: 520 / 694; object-fit: cover; }
.objekt__status {
  display: inline-block; margin: 0 0 .4rem; padding: 2px 10px;
  font-family: var(--font-ui); font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  border-radius: 999px; background: rgba(165,130,74,.14); color: var(--gold);
}
.objekt__status--in_arbeit, .objekt__status--angekuendigt { background: rgba(124,45,58,.1); color: var(--wein); }
.objekt__titel { margin: 0 0 .35rem !important; font-size: 1.9rem !important; }
.objekt__meta { margin: 0 0 .5rem; font-family: var(--font-ui); font-size: .8rem; color: var(--text-soft); }
.objekt__text { margin: 0 0 .7rem; hyphens: auto; }
.objekt__hinweis { margin: 0 0 .6rem; font-style: italic; color: #3e4049; }
.objekt__credits { margin: .4rem 0 0; font-size: .95rem; color: #3e4049; }

/* ---------- Eselsohren (Blättern innerhalb eines Kapitels, buch.js) ---------- */
.eselsohr {
  position: absolute; bottom: 0; z-index: 3;
  width: 3.8rem; height: 3.8rem;
  margin: 0; padding: 0; border: 0; background: none;
  cursor: pointer;
  transition: width .22s ease, height .22s ease;
}
.eselsohr[hidden] { display: none; }
.eselsohr::before, .eselsohr::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
/* unten rechts: weiterblättern */
.eselsohr--vor { right: 0; }
.eselsohr--vor::before {            /* darunterliegende Seite + Schatten des Umschlags */
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  background: linear-gradient(315deg, #e9e5dc 0%, #ddd8cd 38%, #b9b3a6 50%);
}
.eselsohr--vor::after {             /* umgeknickte Ecke (Papierrückseite) */
  clip-path: polygon(0 0, 100% 0, 0 100%);
  background: linear-gradient(135deg, #fffefb 0%, #f3f0e9 45%, #dcd6ca 50%);
}
/* unten links: zurückblättern */
.eselsohr--zurueck { left: 0; }
.eselsohr--zurueck::before {
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  background: linear-gradient(45deg, #e9e5dc 0%, #ddd8cd 38%, #b9b3a6 50%);
}
.eselsohr--zurueck::after {
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  background: linear-gradient(225deg, #fffefb 0%, #f3f0e9 45%, #dcd6ca 50%);
}
.eselsohr:hover, .eselsohr.is-hover { width: 4.8rem; height: 4.8rem; }
.eselsohr:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }
.buch3d .eselsohr.is-fokus { outline: 2px solid var(--gold); outline-offset: -4px; }

/* Fortsetzungen geteilter Absätze/Listen auf der nächsten Seite */
.fortsetzung { margin-top: 0; }
p.fortsetzung { text-indent: 0; }
li.fortsetzung { list-style: none; }

/* ---------- Einheitliche Buchhöhe (Maßvorlage = Startseite, buch.js) ---------- */
.massvorlage {
  position: absolute; left: 0; top: 0; width: 100%;
  padding: inherit;
  display: grid; grid-template-columns: 1fr 1fr;
  visibility: hidden; pointer-events: none;
}
.massvorlage img { display: none; }            /* Höhe über aspect-ratio, kein Laden nötig */
.massvorlage .foto::before { content: ""; display: block; aspect-ratio: 4 / 5; }
@media (min-width: 901px) {
  .buch[style*="--seite-h"] > .seite { min-height: var(--seite-h); }
}
.buch.ist-3d .massvorlage { display: block; }
.buch.ist-3d .massvorlage > .seite { position: absolute; top: var(--pad-top); width: var(--papier-b); }
.buch.ist-3d .massvorlage > .seite--rechts { right: 0; }

/* =========================================================
   3D-BUCH (wird von buch.js ab 1100 px aufgebaut)
   Perspektive: Unterkante vorn, Buch verjüngt sich nach oben.
   Jede Seite besteht aus senkrechten Streifen entlang der Wölbung.
   ========================================================= */

.buch.ist-3d {
  display: block;
  height: var(--buch-h);
  perspective: calc(2300px * var(--skala, 1));
  perspective-origin: 50% 80%;
  margin-top: calc(var(--buch-h) * -0.12);
  margin-bottom: 1.5vw;
}
.buch.ist-3d > .buch__einband { display: none; }
/* Die echten Seiten bleiben für Screenreader/Tastatur im DOM, sind aber unsichtbar */
.buch.ist-3d > .seite {
  position: absolute; top: var(--pad-top);
  width: var(--papier-b);
  opacity: 0; pointer-events: none;
}
.buch.ist-3d > .seite--links  { left: 0; }
.buch.ist-3d > .seite--rechts { right: 0; }

.buch3d {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--neigung, 24deg));
  transform-origin: 50% 94%;
}
.b3-seite { position: absolute; inset: 0; transform-style: preserve-3d; }

.b3-einband {
  position: absolute; pointer-events: none;
  border-radius: 6px 6px 9px 9px;
  background:
    linear-gradient(90deg, transparent 49.3%, rgba(0,0,0,.6) 50%, transparent 50.7%),
    linear-gradient(180deg, var(--einband-hell), var(--einband) 35%);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.35),
    3px 6px 8px rgba(0,0,0,.25),
    34px 40px 50px -10px rgba(0,0,0,.42),
    80px 70px 90px -20px rgba(0,0,0,.22);
}
.b3-einband::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background-image: var(--noise); opacity: .35; mix-blend-mode: overlay;
}

.b3-block {
  position: absolute; pointer-events: none;
  background: linear-gradient(90deg, #e4dfd5, #efebe3 45%, #cfc9bd 50%, #efebe3 55%, #e4dfd5);
}
.b3-streifen {
  position: absolute;
  overflow: hidden;
  transform-origin: 0 50%;
}
.b3-streifen > .seite {
  position: absolute; top: 0;
  min-height: 0;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
  background-color: var(--papier);
}
.b3-streifen > .seite::after { display: none; }
.b3-licht { position: absolute; inset: 0; pointer-events: none; }

/* Papierschnitt an der Unterkante */
.b3-schnitt {
  position: absolute; pointer-events: none;
  transform-origin: 0 0;
  transform: rotateX(90deg);
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.05) 35%, rgba(0,0,0,0) 70%, rgba(0,0,0,.08)),
    repeating-linear-gradient(180deg, #f1eee8 0 1px, #cfc9be 1px 2px, #e6e2da 2px 3px, #d9d4ca 3px 4px);
}

/* gespiegelte Hover-/Fokus-Zustände (ein Link liegt in mehreren Streifen) */
.buch3d a.is-hover { color: var(--wein); }
.buch3d .toc__eintrag a.is-hover { transform: translateX(4px); }
.buch3d .toc__eintrag a.is-hover .toc__seite { color: var(--wein); }
.buch3d a.is-fokus { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Umblättern im 3D-Buch */
.b3-blatt {
  position: absolute; pointer-events: none;
  transform-style: preserve-3d;
  transition: transform .85s cubic-bezier(.45,.05,.3,1);
}
.b3-blatt__seite {
  position: absolute; inset: 0; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 0 18px rgba(0,0,0,.12);
}
.b3-blatt__seite--rueck { transform: rotateY(180deg); }
.b3-blatt__seite > .seite { position: absolute; top: 0; left: 0; min-height: 0; box-shadow: none !important; border-radius: 0 !important; }
.b3-blatt__seite--rueck > .seite { width: 100%; height: 100%; }
/* Das Lesebändchen bleibt beim Umblättern liegen (dreht nicht mit) */
.b3-blatt .lesebaendchen, .blatt .lesebaendchen { visibility: hidden; }

/* Messbereich für die Vorschau der Nachbarkapitel (buch.js) */
.vorschau-mass {
  position: absolute; left: 0; top: 0; width: 100%; height: 0;
  overflow: hidden; visibility: hidden; pointer-events: none;
}

/* Bis buch.js das Buch aufgebaut hat, bleibt es unsichtbar (kein Aufblitzen des flachen
   Layouts, v. a. in Safari). Ohne JavaScript wird es nach 1,5 s trotzdem gezeigt. */
@media (min-width: 901px) {
  html:not(.buch-bereit) .buehne { visibility: hidden; animation: buch-notfall 0s 1.5s forwards; }
}
@keyframes buch-notfall { to { visibility: visible; } }

/* Weicher Übergang beim Laden des nächsten Kapitels (View Transitions) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }
}

/* ---------- Mobil ---------- */

.mobil-kopf { display: none; }

@media (max-width: 900px) {
  body { font-size: 1.1rem; }
  .mobil-kopf {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 16px 0;
    font-family: var(--font-ui); font-size: .9rem;
  }
  .mobil-kopf__marke { font-family: var(--font-display); font-size: 1.25rem; color: var(--beige); text-decoration: none; }
  .mobil-kopf__menue {
    color: var(--beige); text-decoration: none;
    padding: 5px 14px; border: 1px solid rgba(230,225,217,.4); border-radius: 999px;
  }

  .buehne { padding-top: 16px; }
  .buch { grid-template-columns: 1fr; padding: 10px 10px 16px; gap: 0; }
  .buch__einband { background: linear-gradient(180deg, var(--einband-hell), var(--einband) 30%); box-shadow: 0 20px 40px -18px rgba(0,0,0,.45); }
  .seite { min-height: 0; }
  .seite--links, .seite--rechts {
    border-radius: 4px;
    background-image: linear-gradient(90deg, #efede8, var(--papier) 8%, var(--papier) 92%, #efede8);
    box-shadow: 0 1px 0 var(--schnitt-1), 0 2px 0 var(--schnitt-2), 0 3px 0 var(--schnitt-1), 0 4px 1px rgba(0,0,0,.2);
  }
  .seite--links { margin-bottom: 14px; }
  .seite--links::after, .seite--rechts::after { display: none; }
  .seite--links .seite__inhalt, .seite--rechts .seite__inhalt { padding: 28px 22px; }
  .seite--rechts .seite__inhalt { padding-right: 56px; }
  .lesebaendchen { right: 20px; height: 90px; }
  .lesebaendchen--link { height: auto; }
  .seite--rechts:not(.seite--menue) { min-height: 15rem; }   /* Platz für das Lesebändchen */
  .seite__zahl { padding-bottom: 14px; }

  .unter-buch { flex-direction: column; justify-content: center; margin-top: 30px; }
  .unter-buch ul { justify-content: center; }
}

@media (max-width: 420px) {
  .foto { width: 42%; margin-left: 14px; }
  .toc__eintrag a { font-size: 1.05rem; }
  .toc__nr { width: 2.2em; }
}

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

.druck-inhalt { display: none; }

@media print {
  body { background: #fff; }
  /* buch.js legt beim Drucken .druck-inhalt (ganzer Kapiteltext) vor das Buch */
  .druck-inhalt { display: block; }
  .druck-inhalt + .buch { display: none !important; }
  .druck-inhalt > .seite { position: static; width: auto; min-height: 0; padding: 0; }
  .buch3d { display: none; }
  .buch.ist-3d { height: auto; }
  .buch.ist-3d > .seite { position: static; opacity: 1; width: auto; }
  .buch__einband, .lesebaendchen, .mobil-kopf, .seite--menue, .eselsohr { display: none !important; }
  .buch { display: block; padding: 0; }
  .seite { box-shadow: none !important; background: #fff !important; }
}