/* ═══════════════════════════════════════════════════════════════════════
   NARRENBIBEL · v2.02 · Gestalt
   Drei Farben: Schwarz (Nacht), Weiss (Bein, Papier) und Blutrot (Rubrik).
   Gold gibt es nur am Zeichen – dem gegossenen Dreieck – und am Goldschnitt.
   Schriften (alle selbst gehostet, SIL OFL):
     Cinzel / Cinzel Decorative  Inschrift: Wortmarke, Vorzeilen, Knöpfe, Ziffern
     Cormorant Garamond          Auszeichnung: Titel, Preise
     IM Fell English             alte Druckschrift: Zitate, die zwei Stimmen
     EB Garamond                 Text
   Aufbau dieser Datei: Grund · Knöpfe · Kopfleiste · Pfad · Kapitel ·
   Auftakt (Altar) · Buch · Schwelle · Werk · Zwiesprache · Leseprobe ·
   Verfasser · Exemplar · Fragen · Briefe · Fuss · Unterseiten · Bewegung.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300; font-display: block; src: url(../fonts/cormorant-garamond-latin-300-normal.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300; font-display: block; src: url(../fonts/cormorant-garamond-latin-300-italic.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: block; src: url(../fonts/cormorant-garamond-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: block; src: url(../fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: block; src: url(../fonts/eb-garamond-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400; font-display: block; src: url(../fonts/eb-garamond-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 500; font-display: block; src: url(../fonts/eb-garamond-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 400; font-display: block; src: url(../fonts/cinzel-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 500; font-display: block; src: url(../fonts/cinzel-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 600; font-display: block; src: url(../fonts/cinzel-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Cinzel Decorative"; font-style: normal; font-weight: 400; font-display: block; src: url(../fonts/cinzel-decorative-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Cinzel Decorative"; font-style: normal; font-weight: 700; font-display: block; src: url(../fonts/cinzel-decorative-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "IM Fell English"; font-style: normal; font-weight: 400; font-display: block; src: url(../fonts/im-fell-english-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IM Fell English"; font-style: italic; font-weight: 400; font-display: block; src: url(../fonts/im-fell-english-latin-400-italic.woff2) format("woff2"); }

@view-transition { navigation: auto; }
/* v2.48 · Seitenwechsel: ein ruhiges Überblenden statt eines Zuckens */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .5s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

:root {
  /* Nacht */
  --nacht:       #070505;
  --nacht-2:     #0d0908;
  /* Blut */
  --blut:        #9d0f12;
  --blut-hell:   #c81a1c;
  --blut-glut:   #ff4a35;
  --blut-tief:   #4b0506;
  --blut-text:   #e2473d;     /* Rot für Schrift auf Schwarz (Kontrast ≥ 4.5) */
  --blut-papier: #a3120f;     /* Rot für Schrift auf Weiss */
  /* Weiss */
  --bein:        #f3eee6;
  --bein-sanft:  rgba(243, 238, 230, .68);
  --bein-leise:  rgba(243, 238, 230, .54);   /* v2.49 · .44 → .54: Kontrast 5:1 statt 3.9:1 (WCAG AA) */
  --bein-hauch:  rgba(243, 238, 230, .12);
  --papier:      #f1ebe1;
  --tinte:       #17110e;
  --tinte-sanft: #5a4f46;
  /* Gold – nur Zeichen und Goldschnitt */
  /* v2.21 · Weiss statt Gold: die Namen bleiben, die Töne sind Weiss und Chrom */
  --zeichen:     #f6f4f0;
  --fehler:      #ff9384;

  --f-zier:   "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --f-text:   "EB Garamond", Georgia, "Times New Roman", serif;
  --f-inschr: "Cinzel", "Trajan Pro", Georgia, serif;
  --f-deko:   "Cinzel Decorative", "Cinzel", Georgia, serif;
  --f-alt:    "IM Fell English", "EB Garamond", Georgia, serif;

  --rand: clamp(1.25rem, 4.5vw, 3.5rem);
  --leiste-h: 4.75rem;
  --sanft: cubic-bezier(.2, .7, .2, 1);
  --weich: cubic-bezier(.65, 0, .35, 1);
  --korn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
  --papierkorn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .05' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}

/* ── Grund ──────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--nacht); color-scheme: dark; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--leiste-h) + 1rem); }
body {
  margin: 0; min-height: 100vh;
  font-family: var(--f-text); font-size: 1.1875rem; line-height: 1.65;
  font-variant-numeric: oldstyle-nums proportional-nums; font-kerning: normal; font-feature-settings: "liga", "kern";
  color: var(--bein); background: var(--nacht);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip;
}
/* Korn: Nacht und Papier sind nie glatt. Eine feste Schicht, nie neu gezeichnet. */
body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; background: var(--korn); opacity: .045; }
::selection { background: var(--blut); color: #fff; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }   /* v2.26 · nie verzerren: die Höhe folgt der Breite (width/height-Attribute bleiben für den Platz) */
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: #fff; }
:focus-visible { outline: 1px solid var(--blut-hell); outline-offset: 4px; }
p { margin: 0 0 1em; }
h1, h2, h3 { font-weight: 300; margin: 0; }
.vh, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: fixed; left: 1rem; top: -4rem; z-index: 200; padding: .7rem 1.1rem; background: var(--bein); color: var(--tinte); font-family: var(--f-inschr); font-size: .8rem; letter-spacing: .12em; transition: top .25s; }
.skip:focus { top: 1rem; }
.sigil { aspect-ratio: 100 / 88; height: auto; overflow: visible; }

/* Die Laterne: ein schwacher roter Schein folgt dem Zeiger (nur Maus, site.js). */
.laterne { position: fixed; left: 0; top: 0; z-index: 80; width: 64vmax; height: 64vmax; margin: -32vmax 0 0 -32vmax; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(200, 26, 28, .085), rgba(200, 26, 28, .03) 45%, transparent 70%); opacity: 0; transition: opacity .9s var(--sanft); will-change: transform; }
.laterne.ist-an { opacity: 1; transition-duration: 1.4s; }

/* ── Knöpfe ─────────────────────────────────────────────────────────── */

.knopf {
  --pad-y: 1.1rem; --pad-x: 2rem;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 1rem; isolation: isolate; overflow: hidden;
  padding: var(--pad-y) var(--pad-x); border: 1px solid transparent; border-radius: 1px; cursor: pointer;
  font-family: var(--f-inschr); font-weight: 500; font-size: .8rem; line-height: 1.2; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; text-align: center;
  color: var(--bein); background: transparent;
  transition: background-color .5s var(--sanft), border-color .5s var(--sanft), box-shadow .6s var(--sanft), color .4s, transform .5s var(--sanft);
}
.knopf::after { /* ein Lichtstreif fährt beim Zeigen über den Knopf */
  content: ""; position: absolute; inset: -1px; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 236, 220, .3) 48%, transparent 64%); background-size: 260% 100%; background-position: 130% 0;
  transition: background-position 1.1s var(--sanft);
}
.knopf:hover::after { background-position: -40% 0; }
.knopf--blut {
  color: #fff7f1; border-color: rgba(255, 150, 130, .32);
  background: linear-gradient(180deg, #b5171b 0%, #8d0d10 55%, #6c080b 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 200, 185, .28), inset 0 -10px 18px -10px rgba(0, 0, 0, .55), 0 18px 40px -18px rgba(210, 22, 24, .7);
}
.knopf--blut:hover { color: #fff; border-color: rgba(255, 180, 160, .6);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 210, 195, .4), inset 0 -10px 18px -10px rgba(0, 0, 0, .4), 0 22px 60px -14px rgba(230, 30, 30, .85), 0 0 40px -6px rgba(255, 60, 40, .35); }
.knopf--linie { border-color: rgba(243, 238, 230, .34); background: rgba(7, 5, 5, .35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.knopf--linie:hover { border-color: var(--bein); background: rgba(243, 238, 230, .06); color: #fff; }
.knopf__preis { white-space: nowrap; font-family: var(--f-text); font-size: 1.02rem; letter-spacing: .02em; text-transform: none; font-variant-numeric: lining-nums; padding-left: 1rem; border-left: 1px solid currentColor; border-left-color: rgba(243, 238, 230, .3); }
.knopf--gross { --pad-y: 1.35rem; --pad-x: 2.7rem; font-size: .86rem; }
.knopf--klein { --pad-y: .72rem; --pad-x: 1.15rem; font-size: .7rem; letter-spacing: .16em; }
.knopf:disabled { opacity: .55; cursor: progress; }
.knopf:active { transform: translateY(1px); }

/* ── Kopfleiste ─────────────────────────────────────────────────────── */

.leiste {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--leiste-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 0 var(--rand);
  transition: background-color .6s, border-color .6s, -webkit-backdrop-filter .6s, backdrop-filter .6s;
  border-bottom: 1px solid transparent;
}
.leiste--start::before { content: ""; position: absolute; inset: 0 0 -60%; z-index: -1; pointer-events: none; background: linear-gradient(rgba(7, 5, 5, .92), rgba(7, 5, 5, .6) 55%, transparent); transition: opacity .6s; }
.leiste--start.ist-fest::before { opacity: 0; }
.leiste.ist-fest { background: rgba(7, 5, 5, .86); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); border-bottom-color: rgba(243, 238, 230, .07); }
.leiste__weg { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none; overflow: hidden; }
.leiste__weg span { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--blut-tief), var(--blut-hell) 70%, var(--blut-glut)); box-shadow: 0 0 8px var(--blut-hell); }
.leiste__links { display: flex; gap: clamp(1.2rem, 2.4vw, 2.4rem); list-style: none; margin: 0; padding: 0; }
.leiste__links a, .leiste__sprache { font-family: var(--f-inschr); font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; text-decoration: none; color: var(--bein-sanft); transition: color .3s; position: relative; padding: .4rem 0; }
.leiste__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--blut-hell); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--sanft); }
.leiste__links a:hover, .leiste__sprache:hover { color: #fff; }
.leiste__links a:hover::after { transform: scaleX(1); }
.leiste__nur-menu { display: none; }
.leiste__marke { display: inline-flex; align-items: center; gap: .85rem; text-decoration: none; justify-self: center; }
.sigil { color: var(--zeichen); }
.leiste__zeichen { width: 1.55rem; filter: drop-shadow(0 0 10px rgba(255, 255, 255, .25)); }
.leiste__wort { font-family: var(--f-inschr); font-weight: 500; font-size: .98rem; letter-spacing: .48em; padding-left: .48em; text-transform: uppercase; color: var(--bein); }
.leiste__rechts { justify-self: end; display: flex; align-items: center; gap: 1.6rem; }
.leiste__kauf { font-family: var(--f-inschr); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; padding: .72rem 1.2rem; color: #fff;
  border: 1px solid rgba(255, 150, 130, .35); background: linear-gradient(180deg, #a51418, #730a0d); transition: box-shadow .4s, border-color .4s; }
.leiste__kauf:hover { border-color: rgba(255, 190, 170, .7); box-shadow: 0 8px 30px -8px rgba(230, 30, 30, .7); }
.leiste__menu { display: none; width: 2.75rem; height: 2.75rem; margin-left: -.6rem; background: none; border: 0; cursor: pointer; color: var(--bein); }
.leiste__striche, .leiste__striche::before, .leiste__striche::after { display: block; width: 1.35rem; height: 1px; background: currentColor; transition: transform .45s var(--sanft), opacity .3s; }
.leiste__striche { position: relative; margin: 0 auto; }
.leiste__striche::before, .leiste__striche::after { content: ""; position: absolute; left: 0; }
.leiste__striche::before { top: -6px; } .leiste__striche::after { top: 6px; width: .9rem; }
.menu-offen .leiste__striche { background: transparent; }
.menu-offen .leiste__striche::before { transform: translateY(6px) rotate(45deg); }
.menu-offen .leiste__striche::after { width: 1.35rem; transform: translateY(-6px) rotate(-45deg); }

/* ── Der Pfad: Wegmarken am linken Rand (breite Bildschirme) ─────────── */

.pfad { position: fixed; left: clamp(1rem, 2.2vw, 2.2rem); top: 50%; z-index: 40; transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity .8s; }
.pfad ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.15rem; position: relative; }
.pfad ol::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: linear-gradient(transparent, var(--bein-hauch) 12%, var(--bein-hauch) 88%, transparent); }
.pfad a { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: var(--bein-leise); }
.pfad a::before { content: ""; width: 11px; height: 10px; flex: none; background: var(--nacht); clip-path: polygon(50% 0, 100% 100%, 0 100%); box-shadow: inset 0 0 0 10px rgba(243, 238, 230, .28); transition: box-shadow .5s, transform .5s var(--sanft); }
.pfad__name { padding: .32rem .6rem .3rem .66rem; margin-left: -.35rem; background: rgba(9, 6, 6, .82); border: 1px solid rgba(243, 238, 230, .08); backdrop-filter: blur(6px); font-family: var(--f-inschr); font-size: max(.62rem, 11px); letter-spacing: .26em; text-transform: uppercase; opacity: 0; transform: translateX(-6px); transition: opacity .4s, transform .5s var(--sanft); white-space: nowrap; }
.pfad a:hover .pfad__name, .pfad a[aria-current] .pfad__name { opacity: 1; transform: none; }
.pfad a[aria-current] { color: var(--bein); }
.pfad a[aria-current]::before { box-shadow: inset 0 0 0 10px var(--blut-hell); transform: scale(1.25); }
.pfad.ist-da { opacity: 1; pointer-events: auto; }
@media (max-width: 1180px) { .pfad { display: none; } }

/* ── Kapitel ────────────────────────────────────────────────────────── */

.kapitel { position: relative; padding: clamp(6rem, 15vh, 10.5rem) var(--rand); }
.kapitel__kopf { max-width: 46rem; }
.kapitel__kopf--mitte { margin: 0 auto; text-align: center; }
.kapitel__titel { font-family: var(--f-zier); font-weight: 300; font-size: clamp(2.5rem, 1.5rem + 3.4vw, 4.6rem); line-height: 1.02; letter-spacing: -.012em; color: #fff; text-wrap: balance; }
.kapitel__intro { margin: 1.6rem 0 0; color: var(--bein-sanft); font-size: 1.22rem; text-wrap: pretty; }
.kapitel__kopf--mitte .kapitel__intro { margin-left: auto; margin-right: auto; max-width: 36rem; }
.vorzeile { display: inline-flex; align-items: center; gap: .9rem; margin: 0 0 1.5rem; font-family: var(--f-inschr); font-weight: 500; font-size: .74rem; letter-spacing: .36em; text-transform: uppercase; color: var(--blut-text); }
.vorzeile::before { content: ""; width: 2.4rem; height: 1px; background: linear-gradient(90deg, transparent, currentColor); }
.kapitel__kopf--mitte .vorzeile::after { content: ""; width: 2.4rem; height: 1px; background: linear-gradient(90deg, currentColor, transparent); }
.vorzeile--tinte { color: var(--blut-papier); }

/* ═══ AUFTAKT · der Altar ═══════════════════════════════════════════
   Das Buch steht auf der Grundlinie eines grossen gegossenen Dreiecks.
   --b Buchbreite, --h Buchhöhe, --s Grösse der Glorie (3,1 × Buchhöhe:
   dann liegt die Grundlinie des Dreiecks genau unter dem Buch). */

.auftakt { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; display: flex; flex-direction: column; isolation: isolate;
  background: radial-gradient(120% 70% at 50% 34%, #1b0a09 0%, #0c0606 45%, var(--nacht) 75%); }
.auftakt__dunst { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(34% 30% at 50% 36%, rgba(200, 22, 24, .34), transparent 70%),
    radial-gradient(60% 46% at 50% 40%, rgba(120, 8, 10, .32), transparent 72%),
    radial-gradient(90% 40% at 50% 104%, rgba(80, 4, 6, .5), transparent 70%); }
.auftakt__dunst::after { content: ""; position: absolute; left: 50%; top: 36%; width: 70vmin; height: 70vmin; margin: -35vmin 0 0 -35vmin; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 70, 50, .16), transparent); animation: atmen 9s ease-in-out infinite; }
.auftakt__glut { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.auftakt__buehne { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: calc(var(--leiste-h) + 1rem) var(--rand) clamp(4.5rem, 9vh, 6rem); }
.auftakt__buehne { --b: clamp(128px, min(26vw, (100vh - 27.5rem) / 2.5), 248px); --h: calc(var(--b) * 1.42); --s: calc(var(--h) * 3.1); }
@supports (height: 100svh) { .auftakt__buehne { --b: clamp(128px, min(26vw, (100svh - 27.5rem) / 2.5), 248px); } }
.auftakt__altar { position: relative; width: var(--b); height: var(--h); margin-top: calc(var(--h) * .76 + .25rem); flex: none; }
.auftakt__text { position: relative; margin-top: calc(var(--b) * .26 + .9rem); max-width: 46rem; text-align: center; display: flex; flex-direction: column; align-items: center; }
.auftakt__text::before { /* ein dunkler Grund hinter der Schrift, damit die Strahlen sie nie stören */
  content: ""; position: absolute; inset: -18% -16%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(7, 5, 5, .82), rgba(7, 5, 5, .5) 60%, transparent); }
.auftakt__titel { font-family: var(--f-zier); font-weight: 300; font-size: clamp(2.45rem, 1.4rem + 3.7vw, 4.9rem); line-height: 1; letter-spacing: -.015em; color: #fff; text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .9); }
.auftakt__unter { margin: 1.1rem auto 0; max-width: 34rem; font-size: clamp(1.06rem, 1rem + .3vw, 1.24rem); color: var(--bein-sanft); text-wrap: balance; }
.auftakt__wege { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 1.9rem; }
.auftakt__hinab { position: absolute; left: 50%; bottom: .9rem; z-index: 2; width: 2rem; height: 3.6rem; margin-left: -1rem; display: block; }
.auftakt__faden { position: absolute; left: 50%; top: 0; bottom: .6rem; width: 1px; background: linear-gradient(transparent, rgba(243, 238, 230, .4)); }
.auftakt__tropfen { position: absolute; left: 50%; top: 0; width: 5px; height: 7px; margin-left: -2.5px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 40% 35%, #ff6b55, var(--blut-hell) 45%, var(--blut-tief)); box-shadow: 0 0 10px rgba(255, 50, 40, .7); animation: tropfen 3.4s cubic-bezier(.55, 0, .75, .2) infinite 2.6s; opacity: 0; }

/* Die Glorie (vier Ebenen aus app/views/zeichen.php) */
.glorie { position: absolute; left: 50%; top: 50%; width: var(--s); height: var(--s); transform: translate(-50%, -50%); pointer-events: none; z-index: -1; }
.glorie__ebene { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.glorie__linien line { stroke-width: 1; }
.glorie__linien line.lang { stroke-width: 1.6; }
.glorie__strahlen { animation: atmen-leise 11s ease-in-out infinite; }
.glorie__kreis { fill: none; stroke: rgba(236, 233, 227, .38); stroke-width: 1.2; }
.glorie__kreis--fein { stroke: rgba(236, 233, 227, .2); stroke-width: 1; }
.glorie__ring { animation: drehen 260s linear infinite; will-change: transform; }
.glorie__rand { fill: none; stroke: rgba(236, 233, 227, .34); stroke-width: 1.2; }
.glorie__rand--fein { stroke: rgba(236, 233, 227, .16); stroke-dasharray: 2 7; }
.glorie__teilung { fill: none; stroke: rgba(236, 233, 227, .36); stroke-width: 1.2; }
.glorie__umschrift { font-family: var(--f-inschr); font-weight: 500; font-size: 21px; letter-spacing: 7px; fill: rgba(240, 237, 231, .62); }
.glorie__haar { fill: none; stroke: rgba(236, 233, 227, .5); stroke-width: 1.1; }
.glorie__guss { filter: drop-shadow(0 0 18px rgba(255, 255, 255, .16)); }
.glorie__knoten { fill: #f6f4f0; stroke: rgba(7, 5, 5, .9); stroke-width: 3; }
.glorie__ziffernkreis { fill: rgba(7, 5, 5, .7); stroke: rgba(236, 233, 227, .45); stroke-width: 1.1; }
.glorie__ziffer { font-family: var(--f-inschr); font-weight: 600; font-size: 21px; letter-spacing: 1px; text-anchor: middle; fill: #ff5a48; }
.glorie__glanz { position: absolute; inset: 0; overflow: hidden; mix-blend-mode: screen;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23000%22%20d%3D%22M500%20178L778.86%20661L221.14%20661ZM500%20200.54L240.66%20649.73L759.34%20649.73Z%22%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%201000%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23000%22%20d%3D%22M500%20178L778.86%20661L221.14%20661ZM500%20200.54L240.66%20649.73L759.34%20649.73Z%22%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat; }
.glorie__streif { position: absolute; top: 0; bottom: 0; left: 0; width: 34%; transform: translateX(-110%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .0) 20%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, 0) 80%, transparent);
  animation: streif 11s var(--weich) infinite 2.2s; }
.glorie__fackel { position: absolute; left: 0; top: 0; width: 34%; height: 34%; margin: -17% 0 0 -17%; border-radius: 50%; opacity: 0; transition: opacity .7s;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, .35) 45%, transparent); will-change: transform; }
.glorie__glanz.ist-nah .glorie__fackel { opacity: 1; }

/* ── Das Buch als Gegenstand (CSS 3D) ── */
.buch { --b: clamp(150px, min(33vw, 30vh), 280px); --h: calc(var(--b) * 1.42); --d: calc(var(--b) * .16);
  position: relative; width: var(--b); height: var(--h); perspective: 1900px; }
.auftakt__altar .buch { --b: inherit; }
.buch__koerper { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 3deg)) rotateY(var(--ry, -22deg)); transition: transform 1.2s var(--sanft); }
.buch.ist-nah .buch__koerper { transition-duration: .6s; }
/* Roter Schnitt (v2.21: ohne Gold). */
/* Das Lesebändchen hängt unten heraus. */
.buch__glanz { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 240, 220, .15) 47%, rgba(255, 255, 255, .05) 52%, transparent 66%);
  background-size: 260% 100%; background-position: var(--gx, 70%) 0; }

/* ═══ SCHWELLE ═══════════════════════════════════════════════════════ */

.schwelle { position: relative; padding: clamp(8rem, 22vh, 13rem) var(--rand); text-align: center; overflow: hidden;
  background: radial-gradient(50% 60% at 50% 50%, rgba(157, 15, 18, .12), transparent 70%); }
.schwelle__zeichen { width: 2.6rem; margin: 0 auto 2.6rem; filter: drop-shadow(0 0 18px rgba(255, 255, 255, .25)); }
.schwelle__zitat { margin: 0 auto; max-width: 62rem; }
.schwelle__zitat p { margin: 0; font-family: var(--f-alt); font-style: italic; font-size: clamp(2.3rem, 1.2rem + 4.6vw, 5.4rem); line-height: 1.08; color: #fff; text-wrap: balance; }
.schwelle__zitat footer { margin-top: 2.4rem; font-family: var(--f-inschr); font-size: .72rem; letter-spacing: .36em; text-transform: uppercase; color: var(--bein-leise); }
.schwelle__zitat footer::before { content: "— "; }
.wort { transition: color .9s var(--sanft), opacity .9s var(--sanft), text-shadow .9s; }
.js .schwelle__zitat.ist-geteilt .wort { color: rgba(243, 238, 230, .14); }
.js .schwelle__zitat.ist-geteilt .wort.ist-hell { color: #fff; text-shadow: 0 0 24px rgba(255, 90, 60, .25); }

/* ═══ DAS WERK: drei Phasen ══════════════════════════════════════════ */

.werk { background: linear-gradient(var(--nacht), var(--nacht-2) 50%, var(--nacht)); }
.werk .kapitel__kopf { margin: 0 auto; text-align: center; }
.werk .vorzeile::after { content: ""; width: 2.4rem; height: 1px; background: linear-gradient(90deg, currentColor, transparent); }
.werk .kapitel__intro { margin-left: auto; margin-right: auto; max-width: 36rem; }
.phasen { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: clamp(1.4rem, 3.4vw, 3.6rem); max-width: 74rem; margin: clamp(6rem, 12vh, 8.5rem) auto 3rem; }
.phasen__linie { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.phasen__linie path { fill: none; stroke: rgba(236, 233, 227, .42); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s var(--weich) .4s; }
.phasen.ist-sichtbar .phasen__linie path { stroke-dashoffset: 0; }
.phase { position: relative; z-index: 1; text-align: center; padding: 3.4rem clamp(1.2rem, 2.2vw, 2.2rem) 3rem;
  background: linear-gradient(180deg, rgba(20, 12, 11, .96), rgba(10, 7, 7, .96)); border: 1px solid rgba(243, 238, 230, .1);
  box-shadow: 0 40px 80px -40px #000, inset 0 0 0 6px var(--nacht), inset 0 0 0 7px rgba(243, 238, 230, .06); }
.phase::before, .phase::after { content: ""; position: absolute; width: 18px; height: 18px; border: 1px solid rgba(226, 71, 61, .55); pointer-events: none; }
.phase::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.phase::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.phase--2 { top: -4.5rem; }
.phase__knoten { position: absolute; left: 50%; top: 0; width: 13px; height: 13px; margin: -7px 0 0 -6.5px; transform: rotate(45deg);
  background: linear-gradient(135deg, #ffffff, #d9d6d0 55%, #77736d); box-shadow: 0 0 0 4px var(--nacht), 0 0 16px rgba(255, 255, 255, .35); }
.phase__ziffer { display: block; font-family: var(--f-deko); font-weight: 700; font-size: clamp(3.6rem, 2.6rem + 3vw, 5.6rem); line-height: 1; letter-spacing: .02em;
  color: var(--blut-hell); background: linear-gradient(180deg, #ff5f4a 0%, #c81a1c 45%, #6b0709 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .9)) drop-shadow(0 0 22px rgba(220, 30, 28, .3)); }
.phase__name { margin: 1.2rem 0 1rem; font-family: var(--f-zier); font-weight: 400; font-style: italic; font-size: clamp(1.9rem, 1.5rem + 1vw, 2.5rem); line-height: 1.1; color: #fff; }
.phase__text { margin: 0 auto; max-width: 17rem; color: var(--bein-sanft); font-size: 1.1rem; }
.phase--siegel { padding-bottom: 4.6rem; background:
    repeating-linear-gradient(135deg, rgba(243, 238, 230, .022) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, rgba(26, 8, 8, .97), rgba(12, 5, 5, .97)); }
.phase__versiegelt { margin: 1.4rem 0 0; font-family: var(--f-inschr); font-size: max(.64rem, 11px); letter-spacing: .26em; text-transform: uppercase; color: var(--blut-text); }
/* Das Siegel liegt auf der unteren Kante – die dritte Phase ist zu. */
.phase__versiegelt img { position: absolute; left: 50%; bottom: 0; width: 5.4rem; height: auto; margin-left: -2.7rem; transform: translateY(50%);
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .75)); transition: transform .8s var(--sanft); }
.phase--siegel:hover .phase__versiegelt img { transform: translateY(50%) rotate(-10deg) scale(1.07); }

/* ═══ ZWIESPRACHE ════════════════════════════════════════════════════ */

.stimmen { background: radial-gradient(60% 50% at 50% 55%, rgba(110, 8, 10, .2), transparent 75%), var(--nacht); }
.zwiesprache { position: relative; max-width: 66rem; margin: clamp(4.5rem, 10vh, 6.5rem) auto 0; display: grid; gap: 2.6rem; }
.zwiesprache::before { content: ""; position: absolute; left: 50%; top: -2rem; bottom: -2rem; width: 1px; background: linear-gradient(transparent, rgba(226, 71, 61, .5) 12%, rgba(243, 238, 230, .2) 88%, transparent); }
.stimme { position: relative; margin: 0; width: calc(50% - 3rem); display: grid; gap: .45rem; }
.stimme::after { content: ""; position: absolute; top: .55rem; width: 9px; height: 8px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.stimme--narr { justify-self: start; text-align: right; }
.stimme--narr::after { right: calc(-3rem - 4.5px); background: var(--blut-hell); }
.stimme--weise { justify-self: end; text-align: left; }
.stimme--weise::after { left: calc(-3rem - 4.5px); background: var(--bein); }
.stimme__wer { font-family: var(--f-inschr); font-size: max(.66rem, 11px); letter-spacing: .34em; text-transform: uppercase; color: var(--bein-leise); }
.stimme__satz { font-family: var(--f-alt); font-style: italic; font-size: clamp(1.45rem, 1.1rem + 1.1vw, 2.05rem); line-height: 1.28; text-wrap: balance; }
.stimme--narr .stimme__satz { color: var(--blut-text); }
.stimme--weise .stimme__satz { color: #fff; }

/* ═══ DIE LESEPROBE ═════════════════════════════════════════════════ */

.probe { padding-left: 0; padding-right: 0; overflow: hidden; background: radial-gradient(50% 40% at 50% 60%, rgba(243, 238, 230, .06), transparent 70%), var(--nacht); }
.probe .kapitel__kopf { padding: 0 var(--rand); }
.vorzeile--blut { color: var(--blut-text); }
.probe__wahl { display: inline-flex; margin-top: 2.2rem; border: 1px solid var(--bein-hauch); padding: 3px; gap: 3px; }
.probe__ausgabe { background: none; border: 0; padding: .6rem 1.3rem; cursor: pointer; color: var(--bein-sanft); font-family: var(--f-inschr); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; transition: background-color .3s, color .3s; }
.probe__ausgabe[aria-pressed="true"] { background: var(--blut); color: #fff; }
.probe__pfeil { width: 3.4rem; height: 3.4rem; flex: none; border-radius: 50%; border: 1px solid rgba(243, 238, 230, .28); background: rgba(7, 5, 5, .6); cursor: pointer; color: var(--bein);
  display: grid; place-items: center; transition: border-color .3s, background-color .3s, opacity .3s, transform .4s var(--sanft); }
.probe__pfeil svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.3; }
.probe__pfeil:hover { border-color: var(--blut-hell); background: rgba(157, 15, 18, .3); }
#probeWeiter:hover { transform: translateX(3px); } #probeZurueck:hover { transform: translateX(-3px); }
.probe__pfeil:disabled { opacity: .2; cursor: default; background: none; transform: none; }
.probe__stand { margin: 0; text-align: center; color: var(--bein-leise); font-family: var(--f-inschr); font-size: max(.66rem, 11px); letter-spacing: .26em; text-transform: uppercase; }

/* Das aufgeschlagene Buch: Lederdeckel, Seitenkanten, Falz, Lesebändchen. */
.blatt { position: relative; margin: 0 auto; }
.blatt::before { content: ""; position: absolute; inset: -16px -20px -18px; border-radius: 6px; z-index: 0;
  background: var(--korn), linear-gradient(90deg, #0e0b0a, #1f1918 47%, #050404 50%, #1f1918 53%, #0e0b0a);
  background-size: 120px, 100%;
  box-shadow: 0 70px 120px -40px #000, 0 30px 60px -20px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 0 0 5px rgba(0, 0, 0, .4), inset 0 0 0 6px rgba(236, 233, 227, .12); }
.blatt__flaeche { position: relative; z-index: 1; width: 100%; height: 100%; display: flex; justify-content: center; perspective: 3200px; }
.blatt__seite { position: relative; width: 50%; height: 100%; background: var(--papier); overflow: hidden; }
.blatt__seite::after, .blatt__wende > div::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--papierkorn); mix-blend-mode: multiply; opacity: .9; }
.blatt__seite img, .blatt__wende > div img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; mix-blend-mode: multiply; }
.blatt__seite--l { border-radius: 2px 0 0 2px; box-shadow: inset -34px 0 44px -30px rgba(40, 20, 10, .6), -1px 0 0 #d9d4cb, -2px 0 0 #f1ede6, -3px 0 0 #d2cdc3, -4px 0 0 #ece8e0, -5px 0 0 #c9c3b8; }
.blatt__seite--r { border-radius: 0 2px 2px 0; box-shadow: inset 34px 0 44px -30px rgba(40, 20, 10, .6), 1px 0 0 #d9d4cb, 2px 0 0 #f1ede6, 3px 0 0 #d2cdc3, 4px 0 0 #ece8e0, 5px 0 0 #c9c3b8; }
/* Ecke rechts unten: hebt sich beim Zeigen – eine Einladung zum Umblättern. */
.blatt__seite--r:not(.blatt__seite--leer):not(.siegelseite)::before { content: ""; position: absolute; right: 0; bottom: 0; z-index: 2; width: 0; height: 0; pointer-events: none;
  background: linear-gradient(315deg, var(--nacht) 0 50%, #e4ddd1 50%, #fff 64%, #d6cfc3 100%); box-shadow: -3px -3px 8px rgba(0, 0, 0, .18); transition: width .45s var(--sanft), height .45s var(--sanft); }
.blatt:hover .blatt__seite--r:not(.blatt__seite--leer):not(.siegelseite)::before { width: 2.6rem; height: 2.6rem; }
.blatt--einzeln .blatt__seite--l:not(.blatt__seite--leer):not(.siegelseite)::before { content: ""; position: absolute; right: 0; bottom: 0; z-index: 2; width: 1.8rem; height: 1.8rem; pointer-events: none;
  background: linear-gradient(315deg, var(--nacht) 0 50%, #e4ddd1 50%, #fff 64%, #d6cfc3 100%); box-shadow: -3px -3px 8px rgba(0, 0, 0, .18); }
/* Vorsatz: blutrotes Papier, das Zeichen blind geprägt. */
.blatt__seite--leer, .blatt__wende > div.blatt__seite--leer {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 90'%3E%3Cg fill='none' stroke-width='1.3'%3E%3Cpath d='M51 3L99 87H3Z' stroke='%23ff9a8a' stroke-opacity='.2' transform='translate(.8 .8)'/%3E%3Cpath d='M51 3L99 87H3Z' stroke='%23000' stroke-opacity='.5'/%3E%3Cpath d='M51 41L62 61H40Z' stroke='%23000' stroke-opacity='.45'/%3E%3Cpath d='M51 41L62 61H40Z' stroke='%23ff9a8a' stroke-opacity='.18' transform='translate(.6 .6)'/%3E%3C/g%3E%3C/svg%3E") center / 22% auto no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.014' numOctaves='4' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -.7 .42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E") center / cover no-repeat,
    radial-gradient(90% 80% at 50% 40%, #8e0c10, #5a0608 70%, #3a0405);
  box-shadow: none; }
.blatt__seite--leer::after { display: none; }
.blatt__seite--weg { display: none; }
.blatt--einzeln .blatt__seite { width: 100%; border-radius: 2px; box-shadow: 1px 0 0 #d9d4cb, 2px 0 0 #f1ede6, 3px 0 0 #d2cdc3, 4px 0 0 #c9c3b8; }
.blatt--einzeln::before { inset: -10px -12px -12px; }
.blatt__band { position: absolute; z-index: 4; top: -16px; left: calc(50% + 3px); width: 11px; height: calc(100% + 70px); pointer-events: none;
  background: linear-gradient(90deg, #5a0608, #b3161a 45%, #e1373a 55%, #7a0a0d); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 94%, 0 100%); filter: drop-shadow(2px 4px 4px rgba(0, 0, 0, .5)); }
.blatt--einzeln .blatt__band { left: auto; right: 6px; width: 8px; }
.blatt__klick { position: absolute; top: 0; bottom: 0; width: 24%; z-index: 5; background: none; border: 0; cursor: pointer; }
.blatt__klick--z { left: 0; cursor: w-resize; } .blatt__klick--w { right: 0; cursor: e-resize; }
.blatt__klick:disabled { cursor: default; }
.blatt__wende { position: absolute; top: 0; height: 100%; width: 50%; transform-style: preserve-3d; z-index: 3; transition: transform 1.05s cubic-bezier(.45, .05, .25, 1); }
.blatt__wende--vor { left: 50%; transform-origin: left center; }
.blatt__wende--rueck { left: 0; transform-origin: right center; }
.blatt__wende > div { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--papier); overflow: hidden; }
.blatt__wende-hinten { transform: rotateY(180deg); }
.blatt__wende > div::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1s ease; background: linear-gradient(90deg, rgba(0, 0, 0, .42), transparent 45%); }
.blatt__wende.dreht > div::after { opacity: 1; }
.blatt__gleiten { animation: gleiten .6s var(--sanft); }
.blatt__gleiten--z { animation-name: gleiten-z; }
.siegelseite { background: radial-gradient(90% 70% at 50% 40%, #fbf8f2, #ebe4d8) !important; display: grid; place-items: center; }
.siegelblatt { position: relative; z-index: 1; padding: 8% 9%; text-align: center; color: var(--tinte); display: grid; justify-items: center; gap: .3rem; }
.siegelblatt__siegel { width: min(48%, 11.5rem); height: auto; aspect-ratio: 1; margin-bottom: .7rem; filter: drop-shadow(0 12px 16px rgba(60, 0, 0, .38)); }
.siegelblatt__titel { font-family: var(--f-zier); font-weight: 500; font-size: clamp(1.35rem, 1rem + 1.1vw, 2rem); line-height: 1.15; margin: 0; }
.siegelblatt__text { font-size: clamp(.94rem, .8rem + .35vw, 1.1rem); color: var(--tinte-sanft); margin: .4rem 0 1.2rem; max-width: 24rem; }
.siegelblatt .knopf { font-size: .72rem; }
.siegelblatt.stempeln .siegelblatt__siegel { animation: stempel 1.25s cubic-bezier(.55, 0, .3, 1) .2s both; }
.siegelblatt.ohne-siegel .siegelblatt__siegel { visibility: hidden; }

/* ═══ DER VERFASSER: ein weisses Blatt mit gerissenem Rand ═══════════ */

.verfasser { color: var(--tinte); background: var(--papierkorn), radial-gradient(80% 60% at 50% 30%, #f7f2ea, var(--papier) 60%, #e6ddd0); margin-top: 3rem; padding-top: clamp(7rem, 16vh, 11rem); }
.verfasser::before, .verfasser::after { content: ""; position: absolute; left: 0; right: 0; height: 26px; pointer-events: none; background: inherit; }
.verfasser::before { top: -25px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 26' preserveAspectRatio='none'%3E%3Cpath d='M0 26V14l18-3 21 4 17-6 25 5 14-7 22 6 19-4 26 5 15-8 24 7 20-3 17 4 28-6 13 5 22-4 19 6 25-7 16 5 23-3 18 5 26-8 14 6 21-2 19 4 27-7 15 6 24-4 18 3 22-6 17 7 25-5 16 3 23-6 20 5 18-3 26 6 14-7 22 4 19-3 25 6 17-5 21 4 24-7 15 6 20-3 23 5 16-6 27 4 18-3 22 6 15-5 24 3 19-6 21 7 17-4 26 3 14-5 23 6 18-4 25 5 16-6 20 3 24-5 17 6 22-3 19 4 1 0V26Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 26' preserveAspectRatio='none'%3E%3Cpath d='M0 26V14l18-3 21 4 17-6 25 5 14-7 22 6 19-4 26 5 15-8 24 7 20-3 17 4 28-6 13 5 22-4 19 6 25-7 16 5 23-3 18 5 26-8 14 6 21-2 19 4 27-7 15 6 24-4 18 3 22-6 17 7 25-5 16 3 23-6 20 5 18-3 26 6 14-7 22 4 19-3 25 6 17-5 21 4 24-7 15 6 20-3 23 5 16-6 27 4 18-3 22 6 15-5 24 3 19-6 21 7 17-4 26 3 14-5 23 6 18-4 25 5 16-6 20 3 24-5 17 6 22-3 19 4 1 0V26Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.verfasser::after { bottom: -25px; transform: scaleY(-1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 26' preserveAspectRatio='none'%3E%3Cpath d='M0 26V12l22 4 15-6 27 5 18-4 21 6 16-7 25 5 19-3 24 6 14-6 26 4 17-5 23 7 15-4 22 3 18-6 25 5 20-3 16 6 27-7 14 4 22-2 19 5 24-6 17 4 21-3 26 6 15-5 18 3 23-7 16 5 25-4 19 6 21-3 14 5 27-6 18 3 22-5 15 7 24-4 20 3 17-6 26 5 16-3 23 6 19-7 22 4 14 3 25-5 18 6 21-4 24 3 15-6 20 5 26-3 17 4 19-6 23 5 16 3 22-4 1 0V26Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 26' preserveAspectRatio='none'%3E%3Cpath d='M0 26V12l22 4 15-6 27 5 18-4 21 6 16-7 25 5 19-3 24 6 14-6 26 4 17-5 23 7 15-4 22 3 18-6 25 5 20-3 16 6 27-7 14 4 22-2 19 5 24-6 17 4 21-3 26 6 15-5 18 3 23-7 16 5 25-4 19 6 21-3 14 5 27-6 18 3 22-5 15 7 24-4 20 3 17-6 26 5 16-3 23 6 19-7 22 4 14 3 25-5 18 6 21-4 24 3 15-6 20 5 26-3 17 4 19-6 23 5 16 3 22-4 1 0V26Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.verfasser + .exemplar { margin-top: 3rem; }
.verfasser__innen { max-width: 40rem; margin: 0 auto; text-align: center; }
.verfasser .vorzeile::after { content: ""; width: 2.4rem; height: 1px; background: linear-gradient(90deg, currentColor, transparent); }
.verfasser__titel { color: var(--tinte); }
.verfasser__bild { margin: 3rem auto 0; max-width: 15rem; }
.verfasser__bild img { width: 100%; height: auto; filter: grayscale(1) contrast(1.05); box-shadow: 0 30px 50px -30px rgba(40, 20, 10, .6); }
.verfasser__auftakt { margin: 3.4rem 0 0; text-align: left; font-size: 1.24rem; line-height: 1.7; color: var(--tinte); hyphens: auto; }
.verfasser__auftakt::first-letter { float: left; margin: .02em .14em -.1em 0; font-family: var(--f-deko); font-weight: 700; font-size: 4.9em; line-height: .8; color: var(--blut-papier); }
.litanei { margin: 3.4rem 0; display: grid; gap: .3rem; font-family: var(--f-zier); font-size: clamp(1.25rem, 1rem + .9vw, 1.6rem); line-height: 1.35; color: var(--tinte); }
.litanei span { display: block; }
.litanei b { font-weight: 500; font-style: italic; color: var(--blut-papier); }
.verfasser__atelier { margin: 3rem 0 0; }
.verfasser__atelier img { width: 100%; height: auto; box-shadow: 0 30px 60px -30px rgba(40, 20, 10, .6); }
.verfasser__sigil { width: 2.1rem; margin: 3.6rem auto 0; color: #14100e; }

/* ═══ DAS EXEMPLAR ══════════════════════════════════════════════════ */

.exemplar { overflow-x: clip; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: center; max-width: 82rem; margin: 0 auto;
  padding-top: clamp(8rem, 18vh, 12rem); }
.buch--exemplar { --b: clamp(190px, 25vw, 300px); animation: schweben 7s ease-in-out infinite; }
.buch--exemplar .buch__koerper { --ry: -30deg; }
.exemplar__zu { margin-top: 2rem; font-style: italic; color: var(--bein-sanft); }

/* ═══ FRAGEN ════════════════════════════════════════════════════════ */

.fragen__liste { max-width: 46rem; margin: 4rem auto 0; border-top: 1px solid var(--bein-hauch); }
.frage { border-bottom: 1px solid var(--bein-hauch); }
.frage summary { display: grid; grid-template-columns: 3.2rem 1fr auto; align-items: baseline; gap: .4rem; padding: 1.45rem 0; cursor: pointer; list-style: none; transition: color .3s; }
.frage summary::-webkit-details-marker { display: none; }
.frage__nr { font-family: var(--f-inschr); font-size: .78rem; letter-spacing: .1em; color: var(--blut-text); }
.frage__text { font-family: var(--f-zier); font-size: clamp(1.32rem, 1.1rem + .6vw, 1.6rem); line-height: 1.25; color: #fff; }
.frage__zeichen { position: relative; width: 1rem; height: 1rem; align-self: center; }
.frage__zeichen::before, .frage__zeichen::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--blut-text); transition: transform .5s var(--sanft); }
.frage__zeichen::after { transform: rotate(90deg); }
.frage[open] .frage__zeichen::after { transform: rotate(0); }
.frage summary:hover .frage__text { color: var(--blut-text); }
.frage__antwort { padding: 0 2.6rem 1.7rem 3.6rem; color: var(--bein-sanft); }
.frage__antwort p { margin: 0; }
.frage[open] .frage__antwort { animation: aufklappen .6s var(--sanft); }

/* ═══ BRIEFE: ein blutrotes Band ════════════════════════════════════ */

.briefe { margin-top: clamp(3rem, 8vh, 6rem); text-align: center; overflow: hidden;
  background: radial-gradient(70% 120% at 50% 0%, #9e1217, #6a090c 48%, #360405 100%); }
.briefe::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(135deg, rgba(0, 0, 0, .07) 0 1px, transparent 1px 10px); }
.briefe::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--korn); background-size: 180px; opacity: .07; }
.briefe__innen { position: relative; max-width: 38rem; margin: 0 auto; }
.briefe__zeichen { width: 2.6rem; margin: 0 auto 2rem; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
.briefe .kapitel__titel { font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.6rem); }
.briefe__text { margin: 1.3rem auto 0; color: rgba(255, 240, 232, .82); }
.briefe__form { margin: 2.4rem auto 0; max-width: 32rem; }
.briefe__zeile { display: flex; gap: .7rem; }
.briefe .feld { flex: 1; min-width: 0; background: rgba(20, 2, 3, .45); border-color: rgba(255, 220, 210, .3); }
.briefe .feld:focus { border-color: #fff; }
.briefe .knopf--linie { border-color: rgba(255, 235, 225, .6); background: rgba(20, 2, 3, .3); }
.briefe__hinweis { margin: 1rem 0 0; font-size: .9rem; color: rgba(255, 235, 225, .66); }
.briefe__status { margin: .8rem 0 0; min-height: 1.5em; color: #fff; }
.briefe__status.ist-fehler { color: #ffd2c8; }

/* ── Felder ─────────────────────────────────────────────────────────── */

.feld { width: 100%; font: inherit; font-size: 1.06rem; color: var(--bein); padding: .95rem 1.05rem; border: 1px solid rgba(243, 238, 230, .2); border-radius: 1px;
  background: rgba(255, 255, 255, .025); transition: border-color .3s, background-color .3s, box-shadow .3s; }
.feld::placeholder { color: var(--bein-leise); }
.feld:hover { border-color: rgba(243, 238, 230, .34); }
.feld:focus { outline: none; border-color: var(--bein); background: rgba(255, 255, 255, .045); box-shadow: 0 0 0 3px rgba(200, 26, 28, .25); }
.feld[aria-invalid="true"] { border-color: var(--fehler); }
select.feld { appearance: none; -webkit-appearance: none; padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e2473d' stroke-width='1.3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: .75rem; }
select.feld option { background: var(--nacht-2); color: var(--bein); }
textarea.feld { resize: vertical; min-height: 3.4rem; }

/* ═══ FUSS ══════════════════════════════════════════════════════════ */

.fuss { padding: clamp(5rem, 10vh, 7rem) var(--rand) 3rem; text-align: center; background: linear-gradient(var(--nacht), #030202); border-top: 1px solid rgba(243, 238, 230, .06); }
.fuss__sigil { width: 2.7rem; margin: 0 auto 1.6rem; filter: drop-shadow(0 0 20px rgba(255, 255, 255, .2)); }
.fuss__marke { margin: 0; font-family: var(--f-inschr); font-weight: 500; font-size: .9rem; letter-spacing: .5em; padding-left: .5em; text-transform: uppercase; color: var(--bein); }
.fuss__zeile { margin: 1rem auto 0; max-width: 32rem; font-style: italic; color: var(--bein-leise); font-size: 1rem; }
.fuss__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2rem; list-style: none; margin: 2.2rem 0 0; padding: 0; }
.fuss__links a { font-family: var(--f-inschr); font-size: max(.66rem, 11px); letter-spacing: .24em; text-transform: uppercase; text-decoration: none; color: var(--bein-sanft); transition: color .3s; }
.fuss__links a:hover { color: #fff; }
.fuss__nav { margin: 2.4rem auto 0; max-width: 46rem; }
.fuss__nav .fuss__links { margin: 0; }
.fuss__links--weg a { font-family: var(--f-zier); font-size: 1.12rem; letter-spacing: .02em; text-transform: none; color: var(--bein); }
.fuss__links--weg { gap: .5rem 2.2rem; }
.fuss__links li { position: relative; }
.fuss__links--recht li + li::before { content: ""; position: absolute; left: -1.05rem; top: 50%; width: 3px; height: 3px; margin-top: -1.5px; background: rgba(243, 238, 230, .28); transform: rotate(45deg); }
.fuss__trenner { display: block; width: 3.2rem; height: 1px; margin: 1.6rem auto; background: linear-gradient(90deg, transparent, rgba(243, 238, 230, .35), transparent); }
.fuss__recht { margin: 2.6rem 0 0; font-size: .85rem; color: rgba(243, 238, 230, .3); }

/* ── Kaufband (Telefon) ── */
.kaufband { position: fixed; left: .75rem; right: .75rem; bottom: max(.75rem, env(safe-area-inset-bottom)); z-index: 45; display: none; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem .6rem .6rem 1.1rem; background: rgba(12, 7, 7, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(243, 238, 230, .12);
  transform: translateY(150%); transition: transform .6s var(--sanft); box-shadow: 0 20px 40px -10px #000; }
.kaufband.ist-da { transform: none; }
.kaufband__titel { font-family: var(--f-inschr); font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; }
.kaufband__preis { margin-left: .6rem; font-family: var(--f-text); font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--bein-sanft); font-variant-numeric: lining-nums; }

/* ═══ UNTERSEITEN: Kasse, Bestellung, Briefe, Recht ══════════════════ */

.unterseite { min-height: 80vh; padding: calc(var(--leiste-h) + clamp(3rem, 8vh, 5rem)) var(--rand) clamp(5rem, 12vh, 8rem);
  background: radial-gradient(60% 40% at 50% 0%, rgba(157, 15, 18, .16), transparent 70%); }
.unterseite__titel { font-family: var(--f-zier); font-weight: 300; font-size: clamp(2.3rem, 1.6rem + 2.4vw, 3.6rem); line-height: 1.05; color: #fff; text-wrap: balance; }
.zurueck { display: inline-block; margin-bottom: 1.8rem; font-family: var(--f-inschr); font-size: max(.68rem, 11px); letter-spacing: .24em; text-transform: uppercase; text-decoration: none; color: var(--bein-leise); }
.zurueck:hover { color: #fff; }
.meldung { margin: 1.4rem 0; padding: 1rem 1.2rem; border: 1px solid rgba(226, 71, 61, .6); background: rgba(157, 15, 18, .16); color: #ffd9d2; }
.fehlertext { margin: .45rem 0 0; color: var(--fehler); font-size: .95rem; }
.hilfe { margin: .45rem 0 0; color: var(--bein-leise); font-size: .93rem; }

.urkunde { position: relative; max-width: 42rem; margin: 0 auto; padding: clamp(2.2rem, 5vw, 3.6rem); text-align: center;
  border: 1px solid rgba(243, 238, 230, .14); background: linear-gradient(180deg, rgba(22, 14, 13, .9), rgba(10, 7, 7, .9));
  box-shadow: inset 0 0 0 6px var(--nacht), inset 0 0 0 7px rgba(243, 238, 230, .06), 0 50px 90px -50px #000; }
.urkunde::before, .urkunde::after { content: ""; position: absolute; width: 22px; height: 22px; border: 1px solid rgba(226, 71, 61, .6); }
.urkunde::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.urkunde::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.urkunde__satz { margin: 1.3rem auto 1.8rem; max-width: 32rem; color: var(--bein-sanft); font-size: 1.15rem; }
.urkunde__klein { margin: 1rem auto 0; max-width: 32rem; color: var(--bein-leise); font-size: .95rem; }
.urkunde__siegel { width: 9.5rem; height: auto; margin: 0 auto 1.6rem; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .7)); animation: stempel 1.25s cubic-bezier(.55, 0, .3, 1) .25s both; }
.urkunde__nummer { display: inline-block; margin: .4rem auto 1.8rem; padding: 1.1rem 2.2rem; border: 1px solid rgba(243, 238, 230, .2); box-shadow: inset 0 0 0 4px var(--nacht), inset 0 0 0 5px rgba(243, 238, 230, .08); }
.urkunde__nummer p { margin: 0; font-family: var(--f-inschr); font-size: max(.64rem, 11px); letter-spacing: .26em; text-transform: uppercase; color: var(--bein-leise); }
.urkunde__nummer strong { display: block; margin-top: .4rem; font-family: var(--f-inschr); font-weight: 600; font-size: 2.3rem; line-height: 1.1; letter-spacing: .06em; color: #fff; font-variant-numeric: lining-nums; }
.urkunde .knopf { margin-top: .4rem; }
.warten { display: block; width: 3.4rem; height: 3rem; margin: 0 auto 1.6rem; background: var(--blut-hell); clip-path: polygon(50% 0, 100% 100%, 0 100%); animation: pochen 1.6s ease-in-out infinite; }
.tafel { margin: 2rem 0 0; padding: 1.6rem 1.7rem; text-align: left; border: 1px solid var(--bein-hauch); background: rgba(255, 255, 255, .02); }
.tafel h2 { margin: 0 0 1rem; font-family: var(--f-inschr); font-weight: 500; font-size: .76rem; letter-spacing: .28em; text-transform: uppercase; color: var(--blut-text); }
.tafel dl { display: grid; grid-template-columns: minmax(7rem, auto) 1fr; gap: .55rem 1.4rem; margin: 0; }
.tafel dt { color: var(--bein-leise); font-size: .98rem; }
.tafel dd { margin: 0; word-break: break-word; font-variant-numeric: lining-nums; }
.tafel__hinweis { margin: 1.2rem 0 0; color: var(--bein-sanft); font-size: .98rem; }
.zahlen { display: flex; flex-direction: column; align-items: center; gap: .8rem; margin: 1.8rem auto 0; max-width: 26rem; }
.zahlen .knopf { width: 100%; margin: 0; justify-content: center; }
.urkunde__neu { display: block; margin-top: 1rem; font-size: .92rem; color: var(--bein-leise); }
.wahl__marken { font-size: .82rem; letter-spacing: .04em; color: var(--bein-leise); text-align: right; }

/* Kontakt */
.kontakt { max-width: 38rem; margin: 0 auto; }
.kontakt__satz { margin: 0 0 2rem; color: var(--bein-sanft); font-size: 1.08rem; line-height: 1.65; }
.kontakt__form textarea { min-height: 10rem; resize: vertical; }
.kontakt__form .kasse__absenden { justify-content: flex-start; }
.kontakt__direkt { margin: 2.6rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--bein-hauch); color: var(--bein-leise); font-size: .98rem; }
.kontakt__direkt a { color: var(--bein); }
.seite-kontakt .urkunde__satz { margin-bottom: 2rem; }

/* Die Kasse */
.kasse { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 1fr); gap: clamp(2rem, 5vw, 5rem); max-width: 72rem; margin: 0 auto; align-items: start; }
.kasse__form .unterseite__titel { margin-bottom: 1rem; }
.kasse__schritt { margin: 2.4rem 0 0; padding: 0; border: 0; min-width: 0; }
.kasse__schritt legend { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.2rem; padding: 0; font-family: var(--f-inschr); font-weight: 500; font-size: .78rem; letter-spacing: .28em; text-transform: uppercase; color: var(--bein); }
.kasse__schritt legend span { display: inline-grid; place-items: center; min-width: 2.2rem; height: 2.2rem; padding: 0 .3rem; border: 1px solid rgba(226, 71, 61, .55); color: var(--blut-text); font-size: .74rem; letter-spacing: .05em; }
.raster { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.1rem 1rem; }
.raster > .feldgruppe { grid-column: span 6; }
.raster > .drittel { grid-column: span 2; }
.raster > .zwei-drittel { grid-column: span 4; }
.kasse__menge { margin-top: 1.2rem; }
.feldgruppe label { display: block; margin-bottom: .45rem; font-size: .98rem; color: var(--bein-sanft); }
.feldgruppe label small { color: var(--bein-leise); }
.wahlen { display: grid; gap: .8rem; }
.wahl { position: relative; display: block; cursor: pointer; }
.wahl input { position: absolute; opacity: 0; pointer-events: none; }
.wahl__karte { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; padding: 1.1rem 1.25rem 1.15rem 3.1rem; border: 1px solid rgba(243, 238, 230, .16); background: rgba(255, 255, 255, .02);
  transition: border-color .3s, background-color .3s, box-shadow .4s; position: relative; height: 100%; }
.wahl__karte::before { content: ""; position: absolute; left: 1.15rem; top: 1.35rem; width: 13px; height: 12px; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: rgba(243, 238, 230, .25); transition: background-color .3s, transform .4s var(--sanft); }
.wahl:hover .wahl__karte { border-color: rgba(243, 238, 230, .34); }
.wahl input:checked + .wahl__karte { border-color: var(--blut-hell); background: rgba(157, 15, 18, .14); box-shadow: 0 0 0 1px var(--blut-hell), 0 18px 40px -24px rgba(200, 26, 28, .7); }
.wahl input:checked + .wahl__karte::before { background: var(--blut-glut); transform: scale(1.15); }
.wahl input:focus-visible + .wahl__karte { outline: 1px solid var(--bein); outline-offset: 3px; }
.wahl__name { font-family: var(--f-zier); font-size: 1.3rem; line-height: 1.2; color: #fff; }
.wahl__neben { font-variant-numeric: lining-nums; color: var(--bein-sanft); }
.wahl__info { grid-column: 1 / -1; font-size: .94rem; color: var(--bein-leise); }
.haken { display: flex; gap: .8rem; align-items: flex-start; margin-top: 2.2rem; cursor: pointer; color: var(--bein-sanft); font-size: 1rem; }
.haken input { margin-top: .35rem; width: 1.05rem; height: 1.05rem; accent-color: var(--blut-hell); flex: none; }
.kasse__absenden { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: center; }
.kasse__form .kasse__absenden { justify-content: flex-start; }
.kasse__sicher { flex-basis: 100%; margin: .4rem 0 0; color: var(--bein-leise); font-size: .92rem; }
.kasse__summe { position: sticky; top: calc(var(--leiste-h) + 1.6rem); padding: 1.8rem; border: 1px solid var(--bein-hauch); background: linear-gradient(180deg, rgba(24, 15, 14, .92), rgba(10, 7, 7, .92));
  box-shadow: inset 0 0 0 5px var(--nacht), inset 0 0 0 6px rgba(243, 238, 230, .05); }
.kasse__summe h2 { margin: 0 0 1.4rem; font-family: var(--f-inschr); font-weight: 500; font-size: .76rem; letter-spacing: .28em; text-transform: uppercase; color: var(--blut-text); }
.summe__buch { display: flex; gap: 1.4rem; align-items: center; padding-bottom: 1.4rem; border-bottom: 1px solid var(--bein-hauch); }
.summe__buch .buch { --b: 74px; flex: none; }
.summe__titel { margin: 0; font-family: var(--f-zier); font-size: 1.5rem; color: #fff; line-height: 1.15; }
.summe__unter { margin: .2rem 0 0; color: var(--bein-leise); font-variant-numeric: lining-nums; }
.summe__zeilen { width: 100%; margin-top: 1rem; border-collapse: collapse; font-variant-numeric: lining-nums; }
.summe__zeilen td { padding: .45rem 0; color: var(--bein-sanft); }
.summe__zeilen td:last-child { text-align: right; color: var(--bein); }
.summe__zeilen .total td { padding-top: 1rem; border-top: 1px solid var(--bein-hauch); font-family: var(--f-zier); font-size: 1.5rem; color: #fff; }
.summe__lieferung { margin: 1.2rem 0 0; font-size: .94rem; color: var(--bein-leise); }

/* Rechtliches */
.recht { max-width: 44rem; margin: 0 auto; }
.recht h2 { margin: 2.6rem 0 .8rem; font-family: var(--f-zier); font-weight: 500; font-size: 1.6rem; color: #fff; }
.recht p { color: var(--bein-sanft); }
.recht__stand { margin-top: 1rem; font-style: italic; color: var(--bein-leise); }
.recht a { color: var(--bein); }

/* ═══ BEWEGUNG ══════════════════════════════════════════════════════ */

@keyframes drehen { to { transform: rotate(360deg); } }
@keyframes atmen { 0%, 100% { opacity: .65; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes atmen-leise { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes streif { 0% { transform: translateX(-110%) skewX(-18deg); } 38%, 100% { transform: translateX(330%) skewX(-18deg); } }
@keyframes tropfen { 0% { opacity: 0; transform: translateY(0) scale(.6); } 12% { opacity: 1; transform: translateY(0) scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(3rem) scale(.9, 1.15); } }
@keyframes schweben { 0%, 100% { transform: translateY(-6px); } 50% { transform: translateY(8px); } }
@keyframes gleiten { from { opacity: 0; transform: translateX(28px); } }
@keyframes gleiten-z { from { opacity: 0; transform: translateX(-28px); } }
/* v2.26 · das Siegel senkt sich, drückt sich ein (kurz flacher), richtet sich – der Schatten kommt mit ihm näher */
@keyframes stempel {
  0% { opacity: 0; transform: translate3d(0, -10%, 0) scale(1.28) rotate(-7deg); }
  35% { opacity: 1; }
  62% { transform: translate3d(0, 0, 0) scale(.955) rotate(0deg); }
  80% { transform: scale(1.012); }
  100% { opacity: 1; transform: none; } }
@keyframes pochen { 0%, 100% { opacity: .5; transform: scale(.92); } 50% { opacity: 1; transform: scale(1); } }
@keyframes aufklappen { from { opacity: 0; transform: translateY(-6px); } }
@keyframes aufblenden { from { opacity: 0; } }
@keyframes zeichnen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes giessen { from { opacity: 0; transform: scale(.94); } }
@keyframes aufsteigen { from { opacity: 0; transform: translateY(34px) scale(.93); } }
@keyframes erscheinen { from { opacity: 0; filter: blur(12px); transform: scale(1.045); } }
@keyframes heben { from { opacity: 0; transform: translateY(16px); } }

/* Der Auftritt – einmal je Sitzung (die Klasse setzt der Kopf der Seite):
   Kreise und Dreieck zeichnen sich, das Gold wird gegossen, das Buch steigt
   auf, dann erscheint die Schrift. Wer «weniger Bewegung» wünscht, sieht
   alles sofort. */
@media (prefers-reduced-motion: no-preference) {
  .auftritt .auftakt__dunst { animation: aufblenden 2.6s ease-out both .1s; }
  .auftritt .glorie__kreis { stroke-dasharray: 1; animation: zeichnen 2s var(--weich) both .2s; }
  .auftritt .glorie__haar { stroke-dasharray: 1; animation: zeichnen 1.6s var(--weich) both .55s; }
  .auftritt .glorie__guss { transform-origin: 500px 500px; animation: giessen 1.5s var(--sanft) both 1.15s; }
  .auftritt .glorie__linien { animation: aufblenden 2s ease-out both 1.1s; }
  .auftritt .glorie__zahlen { animation: aufblenden 1.4s ease-out both 1.7s; }
  .auftritt .glorie__ring { animation: drehen 260s linear infinite, aufblenden 2.4s ease-out both .9s; }
  .auftritt .glorie__glanz { animation: aufblenden .1s both 1.9s; }
  .auftritt .buch--auftakt { animation: aufsteigen 1.9s var(--sanft) both .35s; }
  .auftritt .auftakt__titel { animation: erscheinen 1.6s var(--sanft) both 1.25s; }
  .auftritt .auftakt__unter { animation: heben 1.2s var(--sanft) both 1.6s; }
  .auftritt .auftakt__wege { animation: heben 1.2s var(--sanft) both 1.85s; }
  .auftritt .auftakt__glut { animation: aufblenden 3s ease-out both 1.4s; }
  .auftritt .leiste { animation: aufblenden 1.4s ease-out both 1.9s; }

  /* Beim Scrollen: Dinge treten aus dem Dunkel (site.js setzt .zeige-bereit). */
  /* v2.25 · nur Deckkraft, Verschiebung und Unschärfe – nichts, was die Zeilen neu umbricht (früher: letter-spacing) */
  .zeige-bereit [data-zeige] { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 1.3s var(--sanft), transform 1.4s var(--sanft), filter 1.4s var(--sanft); }
  .zeige-bereit [data-zeige="tinte"] { transform: scale(1.035); filter: blur(9px); transform-origin: 50% 60%; }
  .zeige-bereit [data-zeige].ist-sichtbar { opacity: 1; transform: none; filter: none; }
  .zeige-bereit [data-zeige].sofort { transition: none !important; }
  .zeige-bereit .stimme--narr[data-zeige] { transform: translateX(-26px); }
  .zeige-bereit .stimme--weise[data-zeige] { transform: translateX(26px); }
  .zeige-bereit .stimme[data-zeige].ist-sichtbar { transform: none; }
  .zeige-bereit .phase[data-zeige] { transform: translateY(40px); }
  .zeige-bereit .phase[data-zeige].ist-sichtbar { transform: none; }
}
@media (max-height: 1000px) and (min-width: 561px) { .auftakt__hinab { display: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .glorie__streif, .auftakt__tropfen { display: none; }
}

/* ═══ SCHMALE BILDSCHIRME ═══════════════════════════════════════════ */

@media (max-width: 1080px) {
  .leiste__links li:not(.leiste__nur-menu) a { letter-spacing: .18em; }
}
@media (max-width: 900px) {
  :root { --leiste-h: 4rem; }
  body { font-size: 1.125rem; }
  .leiste { grid-template-columns: auto 1fr auto; }
  .leiste__menu { display: block; }
  .leiste__marke { justify-self: start; }
  .leiste__wort { font-size: .82rem; letter-spacing: .36em; }
  .leiste__zeichen { width: 1.3rem; }
  .leiste__sprache { display: none; }
  .leiste__kauf { padding: .6rem .9rem; font-size: max(.64rem, 11px); }
  .leiste__links { position: fixed; inset: 0; z-index: -1; flex-direction: column; justify-content: center; align-items: center; gap: 1.6rem; padding: 6rem 2rem;
    background: radial-gradient(70% 50% at 50% 40%, rgba(157, 15, 18, .3), transparent 70%), rgba(5, 3, 3, .97); opacity: 0; visibility: hidden; transition: opacity .5s, visibility 0s .5s; }
  .menu-offen .leiste__links { opacity: 1; visibility: visible; transition: opacity .5s; }
  /* v2.25 · die Wege treten nacheinander aus dem Dunkel */
  .leiste__links > li { opacity: 0; transform: translate3d(0, 14px, 0); filter: blur(4px); transition: opacity .3s ease, transform .3s ease, filter .3s ease; }
  .menu-offen .leiste__links > li { opacity: 1; transform: none; filter: none; transition: opacity .8s var(--sanft), transform .9s var(--sanft), filter .8s var(--sanft); }
  .menu-offen .leiste__links > li:nth-child(1) { transition-delay: .08s; } .menu-offen .leiste__links > li:nth-child(2) { transition-delay: .14s; }
  .menu-offen .leiste__links > li:nth-child(3) { transition-delay: .2s; } .menu-offen .leiste__links > li:nth-child(4) { transition-delay: .26s; }
  .menu-offen .leiste__links > li:nth-child(5) { transition-delay: .32s; } .menu-offen .leiste__links > li:nth-child(6) { transition-delay: .38s; }
  .menu-offen .leiste__links > li:nth-child(n+7) { transition-delay: .44s; }
  .leiste__links a { font-family: var(--f-zier); font-size: 2.2rem; letter-spacing: .01em; text-transform: none; color: var(--bein); }
  .leiste__nur-menu { display: block; }
  .leiste__menu-sprache a { font-family: var(--f-inschr); font-size: .8rem; letter-spacing: .3em; text-transform: uppercase; color: var(--bein-leise); }
  .leiste__links a::after { display: none; }
  .menu-offen.leiste { background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

  .phasen { grid-template-columns: 1fr; max-width: 28rem; gap: 3.4rem; margin-top: 5rem; }
  .phase--2 { top: 0; }
  .phasen__linie { display: none; }
  .phasen::before { content: ""; position: absolute; left: 50%; top: -2rem; bottom: -2rem; width: 1px; background: linear-gradient(transparent, rgba(236, 233, 227, .35) 10%, rgba(236, 233, 227, .35) 90%, transparent); }

  .zwiesprache { gap: 2rem; }
  .zwiesprache::before { left: 0; }
  .stimme { width: auto; padding-left: 1.6rem; text-align: left; justify-self: stretch; }
  .stimme--narr::after, .stimme--weise::after { left: -4.5px; right: auto; }
  .zeige-bereit .stimme--weise[data-zeige], .zeige-bereit .stimme--narr[data-zeige] { transform: translateY(18px); }

  .exemplar { grid-template-columns: 1fr; text-align: left; }
  .kaufband { display: flex; }
  .kasse { grid-template-columns: 1fr; }
  .kasse__summe { position: static; order: -1; }
}
@media (max-width: 560px) {
  .auftakt__wege { flex-direction: column; align-items: stretch; width: 100%; max-width: 22rem; }
  .auftakt__wege .knopf { width: 100%; --pad-x: 1.2rem; letter-spacing: .14em; }
  .glorie__zahlen { display: none; }
  .briefe__zeile { flex-direction: column; }
  .raster > .drittel { grid-column: span 2; }
  .raster > .zwei-drittel { grid-column: span 4; }
  .tafel dl { grid-template-columns: 1fr; gap: .1rem; }
  .tafel dd { margin-bottom: .7rem; }
  .frage summary { grid-template-columns: 2.4rem 1fr auto; }
  .frage__antwort { padding: 0 0 1.5rem 2.8rem; }
}

/* ═══ v2.05 · Das Buch im Dreieck (assets/js/buch3d.js) ═══════════════════
   Das Standbild steht, wo das CSS-Buch der v2.02 stand; die Leinwand legt
   sich über die ganze Bühne, damit die Schraube fallen darf, wohin sie will. */
.auftakt__altar .buch3d__bild { position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; max-width: none; object-fit: contain; pointer-events: none; }
.auftakt__altar.ist-3d .buch3d__bild { visibility: hidden; }
.buch3d { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; }
.buch3d.ist-fahrt { position: fixed; z-index: 300; }
.buch3d-dunst { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; }   /* v2.46 · Glut-Schein und Rauch über dem Buch */
.auftakt.ist-fahrt { isolation: auto; }   /* v2.48 · Buch und Rauch steigen während der Fahrt über das Dunkel */
.buch3d-dunst.ist-fahrt { position: fixed; z-index: 301; }   /* v2.48 · der Rauch begleitet die Fahrt ins Buch */
.auftritt .auftakt__altar .buch3d__bild { animation: aufsteigen 1.9s var(--sanft) both .35s; }
.buchbild { display: block; height: auto; }
.buch--exemplar { width: min(78%, 21rem); margin: 0 auto; animation: schweben 7s ease-in-out infinite; }
.summe__buch .buchbild { width: 74px; flex: none; }
.buch3d-nacht { position: fixed; inset: 0; z-index: 290; background: #000; opacity: 0; pointer-events: none; transition: opacity .9s ease; }
.buch3d-nacht.ist-zu { opacity: 1; pointer-events: auto; }
.buch3d-nacht.ist-langsam { transition: opacity 1.8s cubic-bezier(.4, 0, .2, 1); }
.buch3d-nacht.sofort { transition: none; }
@font-face { font-family: "Kristi"; font-weight: 400; font-display: block; src: url(../fonts/kristi-latin-400-normal.woff2) format("woff2"); }
@media (prefers-reduced-motion: reduce) { .buch--exemplar { animation: none; } }
.muenze { display: block; perspective: 400px; }

/* ═══ v2.20 · Drei Gestalten, das Lesepult, die neue Kasse ═══════════════════
   Das Triptychon: wie die Tafeln eines Altars – in der Mitte, unter einem
   Bogen, das selbst gebundene Exemplar (der Anker), links das PDF, rechts der
   Druck. Das Lesepult: die ganze Katalyse im aufgeschlagenen Buch der
   Leseprobe, mit einem Lesefaden statt sieben Dreiecken. */
[hidden] { display: none !important; }
.lesepult .ist-ruhend { visibility: hidden; opacity: 0; transform: translateY(6px); }
.lesepult__steuer, .lesepult__hilfe, #katVoll { transition: opacity .9s var(--sanft) .25s, transform .9s var(--sanft) .25s, visibility 0s linear 0s, color .3s, border-color .4s; }
.lesepult .ist-ruhend { transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s, color .3s, border-color .4s; }
/* v2.41 · Der ruhende Vollbild-Knopf nimmt keinen Platz ein – sonst steht «Als PDF laden» neben der Mitte */
#katVoll.ist-ruhend { display: none; }
.anker { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }

/* ── Das Lesepult ── */
.katalyse { padding-left: 0; padding-right: 0; overflow: hidden; background: radial-gradient(50% 40% at 50% 60%, rgba(243, 238, 230, .06), transparent 70%), var(--nacht); }
.katalyse .kapitel__kopf { padding: 0 var(--rand); }
.lesepult { position: relative; margin-top: clamp(3rem, 7vh, 4.6rem); padding: 0 var(--rand); scroll-margin-top: calc(var(--leiste-h) + 1.2rem); }
.lesepult__buehne { position: relative; display: grid; place-items: center; min-height: 22rem; }
.lesepult__buehne::before { content: ""; position: absolute; left: 50%; top: -12%; width: min(130vw, 1500px); height: 130%; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 236, 210, .085), transparent); }
.lesepult.ist-bereit .lesepult__buehne { min-height: 0; }
.blatt--pdf canvas { display: block; width: 100%; height: 100%; mix-blend-mode: multiply; animation: aufblenden .45s ease-out; }
.blatt__seite.ist-leer-noch, .blatt__wende > div.ist-leer-noch {
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%) 0 0 / 250% 100% no-repeat, var(--papier);
  animation: glimmen 1.6s ease-in-out infinite; }
@keyframes glimmen { from { background-position: 140% 0, 0 0; } to { background-position: -40% 0, 0 0; } }
.lesepult__steuer { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 4vw, 2.4rem); margin-top: 2.8rem; }
.lesepult__mitte { display: grid; justify-items: center; gap: .55rem; width: min(34rem, 58vw); }
.lesepult__lesefaden { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; margin: 0; background: transparent; cursor: pointer; --fort: 0%; }
.lesepult__lesefaden:focus { outline: none; }
.lesepult__lesefaden::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--blut-hell) var(--fort), rgba(243, 238, 230, .16) var(--fort)); box-shadow: 0 0 6px rgba(200, 26, 28, .35); }
.lesepult__lesefaden::-moz-range-track { height: 2px; background: rgba(243, 238, 230, .16); }
.lesepult__lesefaden::-moz-range-progress { height: 2px; background: var(--blut-hell); }
.lesepult__lesefaden::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 14px; margin-top: -11px; border: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath d='M8 1 15 13H1Z' fill='%23fff' stroke='%23c81a1c' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .3s var(--sanft); }
.lesepult__lesefaden::-moz-range-thumb { width: 16px; height: 14px; border: 0; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath d='M8 1 15 13H1Z' fill='%23fff' stroke='%23c81a1c' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat; }
.lesepult__lesefaden:hover::-webkit-slider-thumb, .lesepult__lesefaden:focus-visible::-webkit-slider-thumb { transform: scale(1.35); }
.lesepult__lesefaden:focus-visible { outline: 1px solid var(--bein); outline-offset: 4px; }
.lesepult__werkzeug { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2.4rem; margin-top: 1.8rem; }
.lesepult__werk { display: inline-flex; align-items: center; gap: .6rem; padding: .55rem 0; border: 0; border-bottom: 1px solid transparent; background: none; cursor: pointer; text-decoration: none;
  font-family: var(--f-inschr); font-size: max(.68rem, 11px); letter-spacing: .24em; text-transform: uppercase; color: var(--bein-sanft); transition: color .3s, border-color .4s; }
.lesepult__werk svg { width: 1rem; height: 1rem; fill: none; stroke: var(--blut-text); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.lesepult__werk small { font-family: var(--f-text); font-size: .86rem; letter-spacing: .02em; text-transform: none; color: var(--bein-leise); }
.lesepult__werk:hover { color: #fff; border-bottom-color: var(--blut-hell); }
/* v2.22 · Herunterladen ist ein richtiger Knopf */
.lesepult__werk--laden { padding: .85rem 1.5rem; border: 1px solid rgba(226, 71, 61, .55); background: linear-gradient(180deg, rgba(157, 15, 18, .22), rgba(90, 6, 8, .18)); color: var(--bein);
  box-shadow: inset 0 0 0 3px var(--nacht), inset 0 0 0 4px rgba(226, 71, 61, .16); transition: border-color .4s, background .4s, color .4s; }
.lesepult__werk--laden:hover { border-color: var(--blut-hell); border-bottom-color: var(--blut-hell); background: linear-gradient(180deg, rgba(180, 18, 20, .4), rgba(110, 8, 10, .34)); }
.lesepult__werk--laden span, .lesepult__werk--laden small { white-space: nowrap; }
@media (max-width: 560px) { .lesepult__werk--laden { padding: .8rem 1rem; letter-spacing: .14em; font-size: max(.62rem, 11px); } }
.lesepult__werk--laden small { padding-left: .7rem; margin-left: .2rem; border-left: 1px solid rgba(243, 238, 230, .16); }
.lesepult__hilfe { margin: .9rem auto 0; max-width: 34rem; text-align: center; font-style: italic; font-size: .92rem; color: var(--bein-leise); }
/* Vollbild: der Lesesaal */
.lesepult.ist-voll { position: fixed; inset: 0; z-index: 220; margin: 0; padding: 1.6rem 1rem 1.2rem; display: flex; flex-direction: column; justify-content: center; overflow: auto;
  background: radial-gradient(60% 50% at 50% 45%, rgba(255, 236, 210, .07), transparent 70%), radial-gradient(90% 70% at 50% 110%, rgba(120, 8, 10, .35), transparent 70%), #050303; }
.lesepult.ist-voll .lesepult__buehne::before { display: none; }
.lesepult.ist-voll .lesepult__steuer { margin-top: 1.6rem; }
.lesepult.ist-voll .lesepult__werkzeug { margin-top: .6rem; }
.lesepult.ist-voll .lesepult__hilfe { display: none; }
html.liest-voll { overflow: hidden; }
html.liest-voll .kaufband, html.liest-voll .pfad, html.liest-voll .laterne { display: none; }

/* ── Drei Gestalten: das Triptychon ── */
.gestalten-k { max-width: 94rem; margin: 0 auto; padding-top: clamp(8rem, 18vh, 12rem); }
.gestalten__sprache { margin-top: 2.2rem; }
.triptychon { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(1rem, 2vw, 1.8rem); align-items: stretch; margin-top: clamp(4rem, 9vh, 6rem); }
.gestalt { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2.8rem clamp(1.2rem, 2vw, 2rem) 2.4rem; isolation: isolate;
  border: 1px solid rgba(243, 238, 230, .13); background: linear-gradient(180deg, rgba(24, 15, 14, .84), rgba(9, 6, 6, .92));
  box-shadow: inset 0 0 0 6px var(--nacht), inset 0 0 0 7px rgba(243, 238, 230, .05), 0 50px 90px -50px #000;
  transition: border-color .6s var(--sanft), transform .8s var(--sanft), box-shadow .8s var(--sanft); }
.gestalt::before, .gestalt::after { content: ""; position: absolute; width: 22px; height: 22px; border: 1px solid rgba(226, 71, 61, .55); pointer-events: none; }
.gestalt::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.gestalt::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.gestalt:hover { border-color: rgba(243, 238, 230, .26); transform: translateY(-4px); }
.gestalt--gebunden { padding-top: 2.8rem; border-color: rgba(226, 71, 61, .42);
  background: radial-gradient(80% 45% at 50% 18%, rgba(157, 15, 18, .3), transparent 72%), linear-gradient(180deg, rgba(32, 14, 13, .96), rgba(10, 6, 6, .96));
  box-shadow: inset 0 0 0 6px var(--nacht), inset 0 0 0 7px rgba(226, 71, 61, .14), 0 60px 110px -40px #000, 0 0 90px -30px rgba(200, 26, 28, .35); }
.gestalt--gebunden:hover { border-color: rgba(255, 120, 100, .6); }
.gestalt__schein { position: absolute; inset: 0 0 auto; height: 60%; z-index: -1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(closest-side, rgba(180, 18, 20, .34), rgba(120, 8, 10, .1) 55%, transparent 78%); animation: atmen 8s ease-in-out infinite; }
.gestalt__bild { display: flex; align-items: flex-end; justify-content: center; height: 17rem; width: 100%; margin-bottom: 2.2rem; }
.gestalt__bild svg, .gestalt__bild img { display: block; height: 100%; max-height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.gestalt__bild .buch--exemplar { width: auto; height: 100%; margin: 0; }
.gestalt__bild .gestalt__foto { box-shadow: 0 40px 60px -30px #000; }
.gestalt__variante { display: none; height: 100%; }
.gestalten-k[data-ausgabe="de"] .gestalt__variante[data-variante="de"], .gestalten-k[data-ausgabe="en"] .gestalt__variante[data-variante="en"] { display: contents; }
.gestalt__svg { transition: transform 1s var(--sanft); }
svg.gestalt__svg { filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .55)); }
.gestalt:hover .gestalt__svg { transform: translateY(-5px); }
.gestalt__nummer { display: flex; align-items: center; justify-content: center; gap: .9rem; margin: 0; font-family: var(--f-inschr); font-size: max(.62rem, 11px); letter-spacing: .3em; text-transform: uppercase; color: var(--blut-text); }
.gestalt__nummer::before, .gestalt__nummer::after { content: ""; width: 1.6rem; height: 1px; background: linear-gradient(90deg, transparent, rgba(226, 71, 61, .7)); }
.gestalt__nummer::after { transform: scaleX(-1); }
.gestalt__stand { margin: .5rem 0 0; font-family: var(--f-inschr); font-size: max(.64rem, 11px); letter-spacing: .26em; text-transform: uppercase; color: var(--blut-text); }
.gestalt__name { margin: 0; font-family: var(--f-inschr); font-weight: 500; font-size: .84rem; letter-spacing: .3em; padding-left: .3em; text-transform: uppercase; color: var(--bein); }
.gestalt__preis { margin: 1rem 0 .35rem; font-family: var(--f-zier); font-weight: 300; font-size: clamp(2.8rem, 2rem + 2vw, 3.7rem); line-height: 1; letter-spacing: -.01em; color: #fff; font-variant-numeric: lining-nums; }
.gestalt__neben { margin: 0; font-style: italic; font-size: .98rem; color: var(--bein-leise); }
.gestalt__kurz { margin: 1.4rem 0 0; max-width: 22rem; color: var(--bein-sanft); font-size: 1.06rem; text-wrap: balance; }
.gestalt__merkmale { list-style: none; width: 100%; max-width: 20.5rem; margin: 1.5rem 0 2.1rem; padding: 0; text-align: left; border-top: 1px solid var(--bein-hauch); }
.gestalt__merkmale li { display: flex; align-items: baseline; gap: .8rem; padding: .62rem 0; border-bottom: 1px solid var(--bein-hauch); font-size: .98rem; color: var(--bein-sanft); }
.gestalt__merkmale li::before { content: ""; flex: none; width: 9px; height: 8px; transform: translateY(-1px); clip-path: polygon(50% 0, 100% 100%, 0 100%); background: var(--blut-hell); }
.gestalt__knopf { margin-top: auto; width: 100%; max-width: 20.5rem; }
.gestalt__zu { margin-top: auto; font-style: italic; color: var(--bein-leise); }
.gestalt.ist-zu, .gestalt.ist-ohne-sprache { opacity: .5; }
.gestalt.ist-ohne-sprache .gestalt__knopf { pointer-events: none; opacity: .35; }
/* v2.22 · Das Triptychon auf gemeinsamen Linien: Bild, Name, Preis, Hinweis, Auflage, Satz, Merkmale, Knopf
   stehen in allen drei Tafeln auf derselben Höhe (CSS Subgrid; ohne Subgrid wie bisher untereinander). */
.gestalt__auflage { min-height: 0; }
.gestalt__auflage:empty { display: block; }
.gestalt__auflage:not(:empty) { margin-top: 1rem; }
.gestalt__neben { margin-top: .55rem; }
.gestalt__merkmale li { line-height: 1.35; }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1081px) {
    .triptychon { grid-template-rows: repeat(8, auto); row-gap: 0; }
    .gestalt { display: grid; grid-row: span 8; grid-template-rows: subgrid; justify-items: center; align-content: start; }
    .gestalt > .gestalt__bild { grid-row: 1; }
    .gestalt > .gestalt__name { grid-row: 2; align-self: end; }
    .gestalt > .gestalt__preis { grid-row: 3; align-self: end; }
    .gestalt > .gestalt__neben { grid-row: 4; }
    .gestalt > .gestalt__auflage { grid-row: 5; margin-top: 0; padding-top: 1.1rem; }
    .gestalt > .gestalt__kurz { grid-row: 6; align-self: start; }
    .gestalt > .gestalt__merkmale { grid-row: 7; align-self: start; }
    .gestalt > .gestalt__knopf, .gestalt > .gestalt__zu { grid-row: 8; align-self: end; margin-top: 0; }
  }
}
.gestalten__zahlung { margin: 4.6rem 0 0; text-align: center; color: var(--bein-leise); font-size: .98rem; }
.gestalten__zu { text-align: center; margin-top: 3rem; }
@media (max-width: 1080px) {
  .triptychon { grid-template-columns: 1fr; max-width: 34rem; margin-left: auto; margin-right: auto; gap: 2rem; }
  .gestalt__bild { height: 13rem; } .gestalt--gebunden .gestalt__bild { height: 17rem; }
}

/* ── Die Kasse: Gestalt und Sprache wählen ── */
.gestalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.gestaltwahl { position: relative; display: block; cursor: pointer; }
.gestaltwahl input { position: absolute; opacity: 0; pointer-events: none; }
.gestaltwahl__karte { position: relative; display: grid; justify-items: center; align-content: start; gap: .25rem; height: 100%; padding: 1.25rem .8rem 1.15rem; text-align: center;
  border: 1px solid rgba(243, 238, 230, .16); background: rgba(255, 255, 255, .02); transition: border-color .3s, background-color .3s, box-shadow .4s, transform .4s var(--sanft); }
.gestaltwahl__bild { display: flex; align-items: flex-end; justify-content: center; height: 5.6rem; margin-bottom: .55rem; }
.gestaltwahl__bild svg, .gestaltwahl__bild img { display: block; height: 100%; width: auto; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .5)); }
.gestaltwahl__name { display: flex; align-items: flex-end; justify-content: center; min-height: 2.8em; font-family: var(--f-inschr); font-weight: 500; font-size: max(.64rem, 11px); letter-spacing: .18em; text-transform: uppercase; color: var(--bein); line-height: 1.4; }
.gestaltwahl__preis { font-family: var(--f-zier); font-size: 1.62rem; line-height: 1.1; color: #fff; font-variant-numeric: lining-nums; }
.gestaltwahl__info { font-size: .84rem; color: var(--bein-leise); line-height: 1.35; }
.gestaltwahl:hover .gestaltwahl__karte { border-color: rgba(243, 238, 230, .34); }
.gestaltwahl input:checked + .gestaltwahl__karte { border-color: var(--blut-hell); background: rgba(157, 15, 18, .14); box-shadow: 0 0 0 1px var(--blut-hell), 0 18px 40px -24px rgba(200, 26, 28, .7); }
.gestaltwahl input:focus-visible + .gestaltwahl__karte { outline: 1px solid var(--bein); outline-offset: 3px; }
.gestaltwahl.ist-zu { opacity: .4; cursor: not-allowed; }
.sprachwahl { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.4rem; }
.sprachwahl__titel { margin-right: .6rem; font-size: .98rem; color: var(--bein-sanft); }
.sprachwahl__wahl { position: relative; }
.sprachwahl__wahl input { position: absolute; opacity: 0; pointer-events: none; }
.sprachwahl__wahl span { display: inline-block; padding: .6rem 1.15rem; border: 1px solid var(--bein-hauch); cursor: pointer; font-family: var(--f-inschr); font-size: max(.66rem, 11px); letter-spacing: .2em; text-transform: uppercase; color: var(--bein-sanft); transition: background-color .3s, color .3s, border-color .3s; }
.sprachwahl__wahl input:checked + span { background: var(--blut); border-color: var(--blut); color: #fff; }
.sprachwahl__wahl input:focus-visible + span { outline: 1px solid var(--bein); outline-offset: 3px; }
.sprachwahl__wahl.ist-zu { opacity: .35; } .sprachwahl__wahl.ist-zu span { cursor: not-allowed; }
.raster > .halb { grid-column: span 3; }
.kasse__unter { margin: 2rem 0 1rem; font-family: var(--f-inschr); font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--bein-sanft); }
.kasse__unter small { font-family: var(--f-text); text-transform: none; letter-spacing: .02em; font-size: .92rem; color: var(--bein-leise); }
.js .kasse__nicht-pdf { display: none; }
.js .kasse:not(.ist-mehr) [data-nur="mehr"],
.js .kasse[data-form="pdf"] [data-nur="phys"],
.js .kasse:not([data-form="pdf"]) [data-nur="pdf"],
.js .kasse:not([data-form="druck"]) [data-nur="druck"],
.js .kasse:not([data-form="gebunden"]) [data-nur="gebunden"] { display: none; }
.zaehler { margin-left: .3rem; font-variant-numeric: tabular-nums lining-nums; color: var(--bein-sanft); }
.haken--eng { margin-top: 1rem; }
.summe__bild { flex: none; width: 76px; }
.summe__bild svg, .summe__bild img { display: block; width: 100%; height: auto; }
.summe__form { margin: .15rem 0 0; font-family: var(--f-inschr); font-size: max(.64rem, 11px); letter-spacing: .22em; text-transform: uppercase; color: var(--blut-text); }
.summe__klein { margin: .55rem 0 0; font-size: .88rem; color: var(--bein-leise); }
.urkunde__pdf { display: grid; justify-items: center; gap: 1rem; margin: 1.2rem 0 .4rem; }
.urkunde__pdfbild svg { display: block; width: 8.5rem; height: auto; filter: drop-shadow(0 20px 24px rgba(0, 0, 0, .6)); }
@media (max-width: 640px) {
  .gestalten { grid-template-columns: 1fr; }
  .gestaltwahl__karte { grid-template-columns: 3.6rem 1fr auto; grid-template-rows: auto auto; justify-items: start; align-items: center; text-align: left; gap: .1rem 1rem; padding: .9rem 1rem; }
  .gestaltwahl__bild { grid-row: 1 / span 2; height: 4.4rem; margin: 0; }
  .gestaltwahl__preis { grid-column: 3; grid-row: 1 / span 2; font-size: 1.4rem; }
  .gestaltwahl__name { grid-column: 2; min-height: 0; justify-content: flex-start; } .gestaltwahl__info { grid-column: 2; }
  .raster > .halb { grid-column: span 6; }
  .lesepult__mitte { width: 46vw; }
  .lesepult__werkzeug { gap: .4rem 1.6rem; }
}
.lesepult.ist-voll > * { flex-shrink: 0; }

/* ═══ v2.24 · DER FOLIANT – die Katalyse als Buch ═══════════════════════
   Ein geschlossenes Buch (schwarz, das weisse Dreieck) – aufgeschlagen eine
   Doppelseite mit Falz, Licht und Schnitten, die mit dem Lesen wandern.
   Masse aus katalyse.js: --b Seitenbreite, --h Höhe, --sl/--sr Schnitte. */
.lesepult__buehne { perspective: 2800px; perspective-origin: 50% 32%; }
.foliant { --b: 400px; --h: 600px; --sl: 0px; --sr: 10px; --falz: cubic-bezier(.62, .02, .22, 1);
  position: relative; z-index: 1; width: calc(var(--b) * 2); height: var(--h); margin: 1rem auto 0; transform-style: preserve-3d;
  transition: transform 1.35s var(--falz); }
.foliant--einzeln { width: var(--b); }
.foliant.ist-zu { transform: translateX(calc(var(--b) * -.5)); }
.foliant--einzeln.ist-zu { transform: none; }
.foliant.ohne-bewegung, .foliant.ohne-bewegung * { transition: none !important; }
/* Schatten auf dem Pult */
.foliant::after { content: ""; position: absolute; left: 3%; right: 3%; bottom: -34px; height: 56px; z-index: -1; pointer-events: none; transform-origin: 100% 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .78), rgba(0, 0, 0, .32) 60%, transparent); filter: blur(8px); transition: transform 1.35s var(--falz); }
.foliant.ist-zu:not(.foliant--einzeln)::after { transform: translateX(3.2%) scaleX(.523); }   /* v2.25 · nur transform: kein Nachrücken */

/* Der Buchblock */
.foliant__block { position: absolute; inset: 0; display: flex; transform-style: preserve-3d; cursor: default; }
.foliant__seite { position: relative; flex: none; width: var(--b); height: 100%; overflow: hidden; background-color: #f6f1e7;
  background-image: var(--papierkorn); }
.foliant__seite canvas { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
.foliant__seite canvas.neu { animation: tinte-ein .7s var(--sanft); }
@keyframes tinte-ein { from { opacity: 0; filter: blur(1.5px); } }
.foliant__seite--l { border-radius: 4px 0 0 4px; }
.foliant__seite--r { border-radius: 0 4px 4px 0; }
/* Licht: die Seite wölbt sich zum Falz hinab – dort wird es dunkler, am Schnitt ein heller Rand */
.foliant__licht { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.foliant__licht::after { content: ""; position: absolute; inset: 0; background-image: var(--papierkorn); opacity: .55; }
.foliant__seite--l .foliant__licht { background: linear-gradient(90deg, rgba(255, 255, 255, .25) 0, transparent 2.5%, transparent 74%, rgba(70, 45, 20, .07) 86%, rgba(40, 24, 10, .22) 96%, rgba(20, 12, 4, .42) 100%); }
.foliant__seite--r .foliant__licht { background: linear-gradient(270deg, rgba(255, 255, 255, .25) 0, transparent 2.5%, transparent 74%, rgba(70, 45, 20, .07) 86%, rgba(40, 24, 10, .22) 96%, rgba(20, 12, 4, .42) 100%); }
.foliant--einzeln .foliant__seite--r .foliant__licht { background: linear-gradient(270deg, rgba(255, 255, 255, .22) 0, transparent 3%, transparent 88%, rgba(40, 24, 10, .16) 100%); }
.foliant__seite.ist-deckelseite { visibility: hidden; }
.foliant__seite.ist-weg, .foliant--einzeln .foliant__seite--l { display: none; }
/* Vorsatz: schwarzes Papier mit einem kaum sichtbaren Muster aus Dreiecken */
.foliant__seite.ist-vorsatz, .foliant__vorsatz { background-color: #0e0c0c;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='30'%3E%3Cpath d='M17 9 22.5 19H11.5Z' fill='%23f6f4f0' fill-opacity='.045'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 50% 40%, rgba(255, 255, 255, .05), transparent 70%); }
.foliant__seite.ist-vorsatz .foliant__licht { opacity: .5; }
.foliant__seite.ist-siegel { display: grid; place-items: center; background: radial-gradient(90% 70% at 50% 40%, #fbf8f2, #ebe4d8); }
.foliant__seite.ist-siegel .siegelblatt { z-index: 3; }
/* Die offene Seite lädt zum Umblättern ein: eine Ecke hebt sich */
.foliant.ist-offen .foliant__seite--r:not(.ist-vorsatz):not(.ist-siegel) { cursor: e-resize; }
.foliant.ist-offen .foliant__seite--l:not(.ist-deckelseite) { cursor: w-resize; }
.foliant.ist-offen .foliant__seite--r:not(.ist-vorsatz):not(.ist-siegel)::after { content: ""; position: absolute; right: 0; bottom: 0; z-index: 3; width: 0; height: 0; pointer-events: none;
  background: linear-gradient(315deg, #0d0a09 0 48%, rgba(0, 0, 0, .2) 50%, #efe8dc 51%, #fffdf8 72%, #e2dacb 100%);
  box-shadow: -4px -4px 10px -2px rgba(30, 15, 5, .25); border-top-left-radius: 2px; transition: width .4s var(--sanft), height .4s var(--sanft); }
.foliant.ist-offen .foliant__seite--r:hover::after { width: clamp(1.6rem, 6%, 2.6rem); height: clamp(1.6rem, 6%, 2.6rem); }
/* Der Falz in der Mitte */
.foliant__falz { position: absolute; top: 0; bottom: 0; left: calc(var(--b) - 22px); width: 44px; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(20, 10, 4, .08) 35%, rgba(10, 5, 2, .3) 50%, rgba(20, 10, 4, .08) 65%, transparent); transition: opacity .6s .6s;
  transform: translateZ(1.2px); }   /* v2.26 · liegt über dem ruhenden Blatt wie über den Seiten: kein Aufblitzen am Falz */
.foliant--einzeln .foliant__falz { display: none; }
/* Die Schnitte: viele Blätter, links gelesen, rechts noch zu lesen */
.foliant__schnitt { position: absolute; top: 4px; bottom: 4px; z-index: 0; pointer-events: none; transition: width .8s var(--sanft), opacity .6s;
  background: repeating-linear-gradient(90deg, #ece6da 0 1px, #cbc2b3 1px 2px); box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.foliant__schnitt--l { right: 100%; width: var(--sl); border-radius: 3px 0 0 3px; }
.foliant__schnitt--r { left: 100%; width: var(--sr); border-radius: 0 3px 3px 0; }
.foliant--einzeln .foliant__schnitt--l { display: none; }
.foliant.ist-zu .foliant__seite--l, .foliant.ist-zu .foliant__schnitt, .foliant.ist-zu .foliant__falz { opacity: 0; }
.foliant__seite--l { transition: opacity .5s .55s; }

/* Der Deckel: schwarz, matt, das weisse Dreieck – wie der Druck */
.foliant__deckel { position: absolute; z-index: 6; top: -7px; bottom: -7px; left: var(--b); width: calc(var(--b) + 7px); display: block; transform-origin: left center;
  transform-style: preserve-3d; transition: transform 1.5s var(--falz), opacity .5s; text-decoration: none; cursor: pointer; }
.foliant--einzeln .foliant__deckel { left: 0; }
.foliant__deckel { transform: rotateY(0deg) translateZ(.8px); }   /* v2.26 · liegt knapp über der ersten Seite – nie gleichauf (kein Flackern) */
.foliant.ist-offen .foliant__deckel { transform: rotateY(-180deg) translateZ(2px); }   /* liegt nach dem Aufschlagen hinter den Seiten */
.foliant--einzeln.ist-offen .foliant__deckel { opacity: 0; pointer-events: none; transition: transform 1.3s var(--falz), opacity .45s .75s; }
.foliant.ist-zu .foliant__deckel:hover, .foliant.ist-zu .foliant__deckel:focus-visible { transform: rotateY(-3.5deg) translateZ(.8px); }
/* unter dem gehobenen Deckel: die erste Seite im Schatten */
.foliant.ist-zu .foliant__seite--r .foliant__licht { background: linear-gradient(90deg, rgba(10, 6, 4, .75), rgba(10, 6, 4, .45) 30%, rgba(10, 6, 4, .3)); transition: background .6s; }
.foliant__deckel:focus-visible { outline: none; }
.foliant__deckel-vorne, .foliant__deckel-innen { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 2px 6px 6px 2px; overflow: hidden; }
.foliant__deckel-vorne { background-color: #0c0c0d;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(100deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .02) 22%, transparent 45%, rgba(0, 0, 0, .3) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset -1px 0 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(255, 255, 255, .04), 0 30px 60px -20px rgba(0, 0, 0, .9); }
/* die Rille am Rücken, wo der Deckel sich biegt */
.foliant__deckel-vorne::before { content: ""; position: absolute; top: 0; bottom: 0; left: 4.5%; width: 7px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(255, 255, 255, .06) 55%, rgba(0, 0, 0, .25)); }
/* ein Lichtstreif, der über den Deckel wandert, wenn man darauf zeigt */
.foliant__deckel-vorne::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .07) 48%, transparent 60%);
  background-size: 260% 100%; background-position: 120% 0; transition: background-position 1.4s var(--sanft); }
.foliant__deckel:hover .foliant__deckel-vorne::after { background-position: -20% 0; }
.foliant__dreieck { position: absolute; left: 50%; top: 44%; width: 17%; aspect-ratio: 1; transform: translateX(-50%); background: #f6f4f0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%); filter: drop-shadow(0 0 0 #fff); box-shadow: 0 0 40px rgba(255, 255, 255, .25); }
.foliant__praegung { position: absolute; left: 0; right: 0; bottom: 9%; text-align: center; font-family: var(--f-inschr); font-size: calc(var(--b) * .028); letter-spacing: .5em; padding-left: .5em;
  color: rgba(0, 0, 0, .55); text-shadow: 0 1px 0 rgba(255, 255, 255, .07), 0 -1px 0 rgba(0, 0, 0, .6); }
.foliant__deckel-innen { transform: rotateY(180deg); border-radius: 6px 2px 2px 6px; }
.foliant__vorsatz { position: absolute; inset: 7px 0 7px 7px; border-radius: 3px 0 0 3px;
  box-shadow: inset -26px 0 34px -18px rgba(0, 0, 0, .8); }
.foliant__deckel-innen { background: #0a0909; }

/* Das Blatt, das sich wendet */
.foliant__blatt { position: absolute; top: 0; height: 100%; width: var(--b); z-index: 5; transform-style: preserve-3d; will-change: transform; pointer-events: none; }
.foliant__blatt--vor { left: var(--b); transform-origin: left center; }
.foliant__blatt--rueck { left: 0; transform-origin: right center; }
.foliant__blatt--einzeln { left: 0; transform-origin: left center; }
.foliant__blatt > .foliant__seite { position: absolute; inset: 0; width: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; visibility: visible; }
.foliant__blatt > .foliant__blatt-vorne { transform: translateZ(.6px); }
.foliant__blatt > .foliant__blatt-hinten { transform: rotateY(180deg) translateZ(.6px); }
.foliant__blatt > .foliant__seite::after { display: none; }
.foliant__wurf { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; }
.foliant__blatt--vor .foliant__wurf--vorne, .foliant__blatt--einzeln .foliant__wurf--vorne { background: linear-gradient(90deg, rgba(25, 14, 6, .5), rgba(25, 14, 6, .22) 40%, rgba(25, 14, 6, .38)); }
.foliant__blatt--rueck .foliant__wurf--vorne { background: linear-gradient(270deg, rgba(25, 14, 6, .5), rgba(25, 14, 6, .22) 40%, rgba(25, 14, 6, .38)); }
.foliant__blatt--vor .foliant__wurf--hinten { background: linear-gradient(270deg, rgba(25, 14, 6, .5), rgba(25, 14, 6, .2) 45%, rgba(255, 255, 255, .06)); }
.foliant__blatt--rueck .foliant__wurf--hinten { background: linear-gradient(90deg, rgba(25, 14, 6, .5), rgba(25, 14, 6, .2) 45%, rgba(255, 255, 255, .06)); }
.foliant__wurf--unten.foliant__wurf--r { background: linear-gradient(90deg, rgba(15, 8, 2, .55), rgba(15, 8, 2, .18) 35%, transparent 75%); }
.foliant__wurf--unten.foliant__wurf--l { background: linear-gradient(270deg, rgba(15, 8, 2, .55), rgba(15, 8, 2, .18) 35%, transparent 75%); }

/* Unter dem Buch: der Ladefaden und «Aufschlagen» */
/* v2.25 · Der Ruf liegt dort, wo nach dem Aufschlagen die Bedienung erscheint – nichts rückt nach */
.foliant__ruf { position: absolute; left: 0; right: 0; top: 100%; margin-top: 2.2rem; z-index: 2; display: grid; justify-items: center; gap: 1.1rem;
  transition: opacity .6s var(--sanft), transform .6s var(--sanft), visibility 0s linear 0s; }
.foliant.ist-offen ~ .foliant__ruf { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease, visibility 0s linear .4s; }
.foliant__ladefaden { display: block; width: 12rem; height: 1px; background: rgba(243, 238, 230, .12); overflow: hidden; opacity: 0; transition: opacity .4s; }
.foliant__ladefaden span { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--blut-tief), var(--blut-hell)); transition: transform .3s; }
.foliant__ruf.ist-laden .foliant__ladefaden { opacity: 1; }
.foliant__auf { font: inherit; font-family: var(--f-inschr); font-size: .7rem; letter-spacing: .3em; padding: .95rem 2.2rem .95rem 2.5rem; text-transform: uppercase; color: var(--bein);
  background: transparent; border: 1px solid rgba(243, 238, 230, .28); cursor: pointer; transition: border-color .4s, color .4s, background .4s; }
.foliant__auf:hover, .foliant__auf:focus-visible { border-color: var(--blut-hell); color: #fff; background: rgba(157, 15, 18, .18); outline: none; }
.foliant__ruf.ist-fehler .foliant__auf { text-transform: none; letter-spacing: .02em; font-family: var(--f-text); font-size: 1rem; color: var(--fehler); }

/* Das Pult im Lesesaal (Vollbild) */
.lesepult.ist-voll .foliant { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .foliant, .foliant__deckel, .foliant__schnitt { transition: none; } }
.foliant__blatt canvas { animation: none; }

/* v2.24 · Die drei Gestalten treten nacheinander ins Licht */
@media (prefers-reduced-motion: no-preference) {
  .zeige-bereit .triptychon .gestalt[data-zeige]:nth-child(2) { transition-delay: .14s; }
  .zeige-bereit .triptychon .gestalt[data-zeige]:nth-child(3) { transition-delay: .28s; }
  .gestalt__bild img { transition: transform 1.1s var(--sanft), filter 1.1s var(--sanft); }
  .gestalt:hover .gestalt__bild img { transform: translateY(-6px) scale(1.015); filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .55)); }
}

/* v2.25 · Ankunft über einen Weg (/werk, /katalyse/12 …): die Seite erscheint erst, wenn sie an der richtigen Stelle steht – sanft aus dem Dunkel */
#inhalt, .fuss { transition: opacity 1s var(--sanft); }
html.ankunft #inhalt, html.ankunft .fuss { opacity: 0; transition: none; animation: ankunft-not 0s linear 3s forwards; }
@keyframes ankunft-not { to { opacity: 1; } }

/* ═══ v2.27 · Das Unikat: das Fragezeichen ════════════════════════════════
   Ein Geheimnis atmet: der rote Schein schwillt, der Tropfen glüht wie ein Herz,
   ein Licht wandert auf der Bahn, Funken steigen, Glanz streicht über den Haken.
   Nur transform und opacity – nichts verschiebt die Seite. */
svg.raetsel { overflow: visible; filter: none; }
.raetsel__aura, .raetsel__glut, .raetsel__punkt, .raetsel__funke { transform-box: fill-box; transform-origin: center; }
.raetsel__zeichen { transition: transform 1.2s var(--sanft); }
.gestalt:hover .raetsel__zeichen, .gestaltwahl:hover .raetsel__zeichen { transform: translateY(-6px); }
.gestalt:hover .gestalt__svg.raetsel { transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .raetsel__aura { animation: raetsel-atmen 7s ease-in-out infinite; }
  .raetsel__glut { animation: raetsel-herz 3.6s ease-in-out infinite; }
  .raetsel__punkt { animation: raetsel-puls 3.6s ease-in-out infinite; }
  .raetsel__glanz { animation: raetsel-glanz 9s cubic-bezier(.6, 0, .3, 1) infinite 1.5s; }
  .raetsel__bahn { transform-box: view-box; transform-origin: 247px 387px; animation: drehen 38s linear infinite; }
  .raetsel__funke { opacity: 0; animation: raetsel-funke 8s ease-out infinite; }
  .raetsel__funke--1 { animation-duration: 9.5s; animation-delay: 1.6s; }
  .raetsel__funke--2 { animation-duration: 7s; animation-delay: 3.2s; }
  .raetsel__funke--3 { animation-duration: 10.5s; animation-delay: 4.8s; }
  .raetsel__funke--4 { animation-duration: 8.5s; animation-delay: 6.1s; }
  .raetsel--klein .raetsel__glanz { animation-duration: 11s; }
}
@keyframes raetsel-atmen { 0%, 100% { opacity: .75; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
/* Herzschlag: zweimal kurz, dann Ruhe */
@keyframes raetsel-herz { 0%, 100% { opacity: .55; transform: scale(.92); } 8% { opacity: 1; transform: scale(1.08); } 16% { opacity: .7; transform: scale(.97); } 24% { opacity: .95; transform: scale(1.05); } 46% { opacity: .55; transform: scale(.92); } }
@keyframes raetsel-puls { 0%, 100% { transform: scale(1); } 8% { transform: scale(1.035); } 16% { transform: scale(1); } 24% { transform: scale(1.025); } 46% { transform: scale(1); } }
@keyframes raetsel-glanz { 0%, 62% { transform: skewX(-18deg) translateX(0); } 100% { transform: skewX(-18deg) translateX(780px); } }
@keyframes raetsel-funke { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .9; } 70% { opacity: .35; } 100% { opacity: 0; transform: translateY(-240px); } }

/* v2.27 · beim Unikat sind die Merkmale ein Vers – Zeile um Zeile tritt er aus dem Dunkel */
.gestalt__merkmale--vers li { justify-content: center; text-align: center; font-family: var(--f-alt); font-style: italic; font-size: 1.08rem; color: var(--bein); letter-spacing: .005em; }
.gestalt__merkmale--vers li::before { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .zeige-bereit .gestalt[data-zeige] .gestalt__merkmale--vers li { opacity: 0; filter: blur(5px); transition: opacity 1.6s var(--sanft), filter 1.6s var(--sanft); }
  .zeige-bereit .gestalt[data-zeige].ist-sichtbar .gestalt__merkmale--vers li { opacity: 1; filter: none; }
  .zeige-bereit .gestalt[data-zeige].ist-sichtbar .gestalt__merkmale--vers li:nth-child(1) { transition-delay: .9s; }
  .zeige-bereit .gestalt[data-zeige].ist-sichtbar .gestalt__merkmale--vers li:nth-child(2) { transition-delay: 1.6s; }
  .zeige-bereit .gestalt[data-zeige].ist-sichtbar .gestalt__merkmale--vers li:nth-child(3) { transition-delay: 2.3s; }
  .zeige-bereit .gestalt[data-zeige].sofort .gestalt__merkmale--vers li { transition: none; }
}
.summe__unikat { margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--bein-hauch); font-family: var(--f-alt); font-style: italic; font-size: 1.02rem; line-height: 1.5; color: var(--bein); }

/* v2.36 · Der Weg einer Bestellung (bezahlt → Druckerei → Druck → unterwegs) */
.weg { list-style: none; margin: 2.2rem auto 0; padding: 0; display: flex; justify-content: center; max-width: 40rem; counter-reset: weg; }
.weg__schritt { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: .45rem; text-align: center; padding: 0 .3rem; }
.weg__schritt::before { content: ""; position: absolute; top: .45rem; right: 50%; width: 100%; height: 1px; background: var(--bein-hauch); }
.weg__schritt:first-child::before { display: none; }
.weg__schritt--fertig::before, .weg__schritt--jetzt::before { background: var(--blut-text); }
.weg__punkt { position: relative; z-index: 1; width: .9rem; height: .9rem; border-radius: 50%; border: 1px solid var(--bein-hauch); background: #0b0908; }
.weg__schritt--fertig .weg__punkt { background: var(--blut-text); border-color: var(--blut-text); }
.weg__schritt--jetzt .weg__punkt { border-color: var(--blut-text); box-shadow: 0 0 0 4px rgba(226, 71, 61, .18); }
.weg__text { font-family: var(--f-inschr); font-size: max(.62rem, 11px); letter-spacing: .2em; text-transform: uppercase; opacity: .55; }
.weg__schritt--fertig .weg__text, .weg__schritt--jetzt .weg__text { opacity: 1; }
.weg__zeit { font-size: .8rem; opacity: .6; }
@media (prefers-reduced-motion: no-preference) {
  .weg__schritt--jetzt .weg__punkt { animation: weg-puls 2.4s ease-in-out infinite; }
}
@keyframes weg-puls { 50% { box-shadow: 0 0 0 7px rgba(226, 71, 61, .06); } }
@media (max-width: 520px) {
  .weg { flex-direction: column; align-items: flex-start; gap: 1rem; max-width: 18rem; }
  .weg__schritt { flex-direction: row; text-align: left; gap: .8rem; }
  .weg__schritt::before { top: auto; bottom: 50%; right: auto; left: calc(.3rem + .45rem); width: 1px; height: calc(100% + 1rem); }
}

/* v2.41 · Sehr schmale Telefone (320–380 px): Marke und «Erwerben» passen in die Leiste, nichts ragt hinaus */
@media (max-width: 380px) {
  .leiste { column-gap: .5rem; }
  .leiste__marke { gap: .55rem; }
  .leiste__wort { font-size: .74rem; letter-spacing: .26em; padding-left: .26em; }
  .leiste__zeichen { width: 1.15rem; }
  .leiste__kauf { padding: .55rem .7rem; letter-spacing: .12em; font-size: max(.6rem, 11px); }
  .leiste__menu { margin-left: -.8rem; }
}
/* v2.41 · Lange Wörter in Titeln (z. B. «Datenschutzerklärung» auf 320 px) brechen mit Trennstrich statt über den Rand zu ragen */
.unterseite__titel, .kapitel__titel, .urkunde h1 { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
.kasse__kopf { max-width: 72rem; margin: 0 auto; }
@media (max-width: 900px) { .kasse__kopf { margin-bottom: 1.8rem; } }

/* ═══ v2.44 · Was die Narrenbibel ist (/narrenbibel, /foolsbible) ═══════════
   Dieselbe Nacht wie oben: Schwarz, Bein, Blut. Eine Lesespalte, rote
   römische Ziffern wie an den Phasentafeln, die Refrains als Inschrift. */
.ueber { isolation: isolate; position: relative; padding: calc(var(--leiste-h, 5rem) + clamp(2.5rem, 7vw, 6rem)) var(--rand) clamp(4rem, 9vw, 8rem); overflow: hidden; }
.ueber::before { content: ""; position: absolute; inset: 0 0 auto; height: 56rem; pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse 52rem 30rem at 50% 14rem, rgba(157, 15, 18, .30), transparent 72%),
              radial-gradient(ellipse 24rem 16rem at 50% 12rem, rgba(255, 74, 53, .09), transparent 72%);
  -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.ueber__kopf { max-width: 46rem; margin: 0 auto; text-align: center; }
.ueber__krumen { display: flex; justify-content: center; gap: .7em; font: 400 max(.66rem, 11px)/1 var(--f-inschr); letter-spacing: .3em; text-transform: uppercase; color: var(--bein-leise); margin-bottom: 3rem; }
.ueber__krumen a { color: var(--bein-sanft); text-decoration: none; }
.ueber__krumen a:hover { color: var(--bein); }
.ueber__sigil { width: 2.1rem; height: auto; margin: 0 auto 1.6rem; display: block; filter: drop-shadow(0 0 18px rgba(255, 74, 53, .35)); }
.ueber__kicker { font: 500 .74rem/1 var(--f-inschr); letter-spacing: .42em; text-transform: uppercase; color: var(--blut-text); margin: 0 0 1.3rem; }
.ueber__titel { font: 300 clamp(3.2rem, 9vw, 6.4rem)/.98 var(--f-zier); letter-spacing: -.01em; margin: 0; color: var(--bein); text-shadow: 0 0 60px rgba(157, 15, 18, .45); }
.ueber__unter { font: italic 400 clamp(1.15rem, 2.2vw, 1.4rem)/1.4 var(--f-zier); color: var(--bein-sanft); margin: 1.1rem 0 2.6rem; }
.ueber__lead { font: 400 clamp(1.18rem, 2vw, 1.36rem)/1.66 var(--f-text); color: var(--bein); text-align: left; margin: 0 auto; padding-top: 2.4rem; border-top: 1px solid var(--bein-hauch); }
.ueber__lead::first-letter { float: left; font: 400 4.6em/.82 var(--f-deko); color: var(--blut-hell); margin: .06em .1em 0 0; text-shadow: 0 0 22px rgba(200, 26, 28, .45); }
.ueber__inhalt { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.6rem; margin: 2.8rem 0 0; padding: 0; }
.ueber__inhalt a { font: 400 .7rem/1.4 var(--f-inschr); letter-spacing: .24em; text-transform: uppercase; color: var(--bein-sanft); text-decoration: none; }
.ueber__inhalt a span { color: var(--blut-text); margin-right: .6em; }
.ueber__inhalt a:hover { color: var(--bein); }
.ueber__abschnitt { max-width: 42rem; margin: clamp(4.5rem, 10vw, 7.5rem) auto 0; scroll-margin-top: calc(var(--leiste-h, 5rem) + 1.5rem); }
.ueber__nr { font: 400 1rem/1 var(--f-deko); color: var(--blut-text); letter-spacing: .1em; margin: 0 0 .9rem; display: flex; align-items: center; gap: 1rem; }
.ueber__nr::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(200, 26, 28, .55), transparent); }
.ueber__h2 { font: 300 clamp(2rem, 4.4vw, 2.9rem)/1.1 var(--f-zier); color: var(--bein); margin: 0 0 1.6rem; }
.ueber__text p, .ueber__frage p { font: 400 1.16rem/1.72 var(--f-text); color: rgba(243, 238, 230, .86); margin: 0 0 1.25rem; }
.ueber__text strong { color: var(--bein); font-weight: 500; }
.ueber__text em { color: var(--bein); }
.ueber__text a { color: var(--bein); text-decoration-color: var(--blut-hell); text-underline-offset: .2em; }
.ueber__text h3 { font: 500 .8rem/1.3 var(--f-inschr); letter-spacing: .3em; text-transform: uppercase; color: var(--blut-text); margin: 2.2rem 0 .7rem; }
.ueber__stimme, .ueber__vers { margin: 1.6rem 0 1.8rem; padding: 0; text-align: center; }
.ueber__stimme p, .ueber__vers p { font: italic 400 clamp(1.5rem, 3.4vw, 2rem)/1.3 var(--f-zier); color: var(--bein); margin: 0; }
.ueber__stimme--weise p { color: var(--blut-text); }
.ueber__vers { padding: 1.6rem 1rem; border-top: 1px solid rgba(200, 26, 28, .4); border-bottom: 1px solid rgba(200, 26, 28, .4); }
.ueber__vers strong { color: var(--blut-hell); font-weight: 500; }
.ueber__refrain { font: 500 .8rem/1.8 var(--f-inschr) !important; letter-spacing: .26em; text-transform: uppercase; color: var(--bein-sanft) !important; text-align: center; margin-top: 2.2rem !important; }
.ueber__refrain--gross { font: italic 400 clamp(1.4rem, 3vw, 1.85rem)/1.35 var(--f-zier) !important; letter-spacing: 0; text-transform: none; color: var(--bein) !important; padding-top: 1.4rem; }
.ueber__refrain--gross::before { content: ""; display: block; width: 2.6rem; height: 1px; background: var(--blut-hell); margin: 0 auto 1.6rem; }
.ueber__hinweis { font-size: 1rem !important; color: var(--bein-leise) !important; font-style: italic; border-left: 2px solid var(--blut); padding-left: 1rem; }
/* v2.49 · Die Etiketten, die das Buch sich selbst anheftet */
.ueber__etiketten { list-style: none; margin: 1.8rem 0 2.2rem; padding: 0; display: grid; gap: .1rem; counter-reset: etikett; }
.ueber__etiketten li { counter-increment: etikett; position: relative; padding: .7rem 0 .7rem 3.2rem; border-bottom: 1px solid var(--bein-hauch);
  font: italic 400 clamp(1.2rem, 2.6vw, 1.45rem)/1.35 var(--f-zier); color: var(--bein); }
.ueber__etiketten li:first-child { border-top: 1px solid var(--bein-hauch); }
.ueber__etiketten li::before { content: counter(etikett, upper-roman); position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 2.2rem;
  font: 500 max(.62rem, 11px)/1 var(--f-inschr); font-style: normal; letter-spacing: .2em; color: var(--blut-text); text-align: right; }
/* v2.49 · Der Gattungsprozess: neun Akten */
.ueber__akten { display: grid; gap: 1.4rem; margin: 2.2rem 0 0; counter-reset: akte; }
.ueber__akte { position: relative; padding: 1.6rem clamp(1.1rem, 3vw, 1.8rem) 1.4rem; background: linear-gradient(180deg, rgba(20, 10, 9, .9), rgba(10, 7, 6, .6));
  border: 1px solid var(--bein-hauch); border-top: 2px solid var(--blut-hell); box-shadow: 0 30px 60px -40px #000; }
.ueber__text .ueber__akte-titel { display: flex; flex-direction: column; gap: .5rem; margin: 0 0 .35rem; font: 400 clamp(1.5rem, 3.2vw, 1.9rem)/1.15 var(--f-zier); letter-spacing: 0; text-transform: none; color: var(--bein); }
.ueber__akte-nr { font: 500 max(.62rem, 11px)/1 var(--f-inschr); letter-spacing: .32em; text-transform: uppercase; color: var(--blut-text); }
.ueber__text .ueber__akte-wer { font: italic 400 1rem/1.45 var(--f-zier); color: var(--bein-sanft); margin: 0 0 1.1rem; }
.ueber__text .ueber__akte p { font-size: 1.06rem; line-height: 1.65; margin-bottom: .9rem; }
.ueber__akte-mark { display: inline-block; margin-right: .5rem; font: 500 max(.6rem, 11px)/1 var(--f-inschr); letter-spacing: .24em; text-transform: uppercase; color: var(--blut-text); vertical-align: .15em; }
.ueber__text .ueber__akte-urteil { margin: 1.2rem 0 0 !important; padding-top: 1rem; border-top: 1px dashed rgba(200, 26, 28, .35); font: italic 400 1.22rem/1.4 var(--f-zier) !important; color: var(--bein) !important; }
.ueber__akte-urteil .ueber__akte-mark { font-style: normal; }
@media (min-width: 900px) { .ueber__abschnitt#prozess { max-width: 50rem; } }
@media print { .ueber__akte { break-inside: avoid; background: none; box-shadow: none; } }
.ueber__fakten { margin: 0; border-top: 1px solid var(--bein-hauch); }
.ueber__fakten div { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding: .95rem 0; border-bottom: 1px solid var(--bein-hauch); }
.ueber__fakten dt { font: 400 max(.68rem, 11px)/1.9 var(--f-inschr); letter-spacing: .24em; text-transform: uppercase; color: var(--blut-text); }
.ueber__fakten dd { margin: 0; font: 400 1.08rem/1.55 var(--f-text); color: var(--bein); }
.ueber__frage { padding: 1.4rem 0; border-bottom: 1px solid var(--bein-hauch); }
.ueber__frage:first-child { border-top: 1px solid var(--bein-hauch); }
.ueber__frage h3 { font: 400 1.4rem/1.3 var(--f-zier); color: var(--bein); margin: 0 0 .5rem; }
.ueber__frage p { margin: 0; font-size: 1.06rem; }
.ueber__wege { max-width: 42rem; margin: clamp(4rem, 9vw, 6rem) auto 0; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: center; }
.ueber__heim { flex-basis: 100%; text-align: center; margin-top: 1.4rem; font: 400 .7rem/1 var(--f-inschr); letter-spacing: .3em; text-transform: uppercase; color: var(--bein-leise); text-decoration: none; }
.ueber__heim::before { content: "‹ "; color: var(--blut-text); }
.ueber__heim:hover { color: var(--bein); }
@media (max-width: 560px) {
  .ueber__fakten div { grid-template-columns: 1fr; gap: .2rem; }
  .ueber__lead::first-letter { font-size: 3.6em; }
}
@media (prefers-reduced-motion: no-preference) {
  /* v2.48 · Jede Unterseite tritt gleich auf: der Kopf Zeile um Zeile aus dem Dunkel. */
  :is(.ueber__kopf, .wald__kopf, .lexikon__kopf, .lemma__kopf, .same__kopf, .kasse__kopf) > *,
  .unterseite > :is(.kontakt, .recht, .urkunde, .bestellung, .laden) > :is(.zurueck, .unterseite__titel, .kontakt__satz, .unterseite__lead) { animation: ueberAuf 1.1s cubic-bezier(.2, .7, .2, 1) both; }
  :is(.ueber__kopf, .wald__kopf, .lexikon__kopf, .lemma__kopf, .same__kopf, .kasse__kopf, .unterseite > * ) > :nth-child(2) { animation-delay: .07s; }
  :is(.ueber__kopf, .wald__kopf, .lexikon__kopf, .lemma__kopf, .same__kopf, .kasse__kopf, .unterseite > * ) > :nth-child(3) { animation-delay: .15s; }
  :is(.ueber__kopf, .wald__kopf, .lexikon__kopf, .lemma__kopf, .same__kopf, .kasse__kopf) > :nth-child(4) { animation-delay: .24s; }
  :is(.ueber__kopf, .wald__kopf, .lexikon__kopf, .lemma__kopf, .same__kopf, .kasse__kopf) > :nth-child(5) { animation-delay: .34s; }
  :is(.ueber__kopf, .wald__kopf, .lexikon__kopf, .lemma__kopf, .same__kopf, .kasse__kopf) > :nth-child(n+6) { animation-delay: .45s; }
  :is(.ueber__kopf, .wald__kopf, .lexikon__kopf) > .sigil { animation-name: sigilAuf; animation-duration: 1.7s; }
}
@keyframes ueberAuf { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sigilAuf { from { opacity: 0; transform: scale(.82); filter: blur(4px) drop-shadow(0 0 0 rgba(255, 74, 53, 0)); } 55% { opacity: 1; filter: blur(0) drop-shadow(0 0 26px rgba(255, 74, 53, .75)); } to { opacity: 1; transform: none; filter: blur(0) drop-shadow(0 0 18px rgba(255, 74, 53, .35)); } }

/* v2.44 · Hinweis in der Kasse: keine Rückgabe */
.kasse__keine-rueckgabe { margin: .4rem 0 1.2rem 2.1rem; font: italic 400 .98rem/1.5 var(--f-text); color: var(--bein-leise); }

/* ═══ v2.45 · Der Wald – neu: eine stille Lesehalle im Stil des Buches ═══
   Dieselbe Nacht, dieselben Schriften. Die Samen als gesetzte Zeilen,
   Antworten wie Randnotizen, Formulare mit feinen Linien. */
.seite-wald { background: var(--nacht, #070505); }
.wald-leiste { position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; gap: clamp(1.2rem, 4vw, 3.4rem);
  margin-top: var(--leiste-h, 5rem); padding: 1rem var(--rand); border-bottom: 1px solid var(--bein-hauch);
  font: 400 max(.68rem, 11px)/1 var(--f-inschr); letter-spacing: .3em; text-transform: uppercase; }
.wald-leiste a { color: var(--bein-leise); text-decoration: none; transition: color .3s; }
.wald-leiste a:hover, .wald-leiste a.ist-hier { color: var(--bein); }
.wald-leiste__heim::before { content: "‹ "; color: var(--blut-text); }
.wald-leiste__saat { color: var(--blut-text) !important; }
.wald { isolation: isolate; position: relative; padding: clamp(3rem, 8vw, 6.5rem) var(--rand) clamp(4rem, 9vw, 8rem); overflow: hidden; }
.wald::before { content: ""; position: absolute; inset: 0 0 auto; height: 52rem; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50rem 28rem at 50% 9rem, rgba(157, 15, 18, .30), transparent 72%),
              radial-gradient(ellipse 22rem 14rem at 50% 8rem, rgba(255, 74, 53, .08), transparent 72%);
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.wald__kopf { max-width: 44rem; margin: 0 auto; text-align: center; }
.wald__sigil { width: 2rem; height: auto; display: block; margin: 0 auto 1.5rem; filter: drop-shadow(0 0 18px rgba(255, 74, 53, .35)); }
.wald__kicker { font: 500 .72rem/1 var(--f-inschr); letter-spacing: .42em; text-transform: uppercase; color: var(--blut-text); margin: 0 0 1.2rem; }
.wald__kicker a { color: inherit; text-decoration: none; }
.wald__titel { font: 300 clamp(3rem, 8.5vw, 6rem)/1 var(--f-zier); color: var(--bein); margin: 0; text-shadow: 0 0 60px rgba(157, 15, 18, .45); }
.wald__motto { font: italic 400 clamp(1.15rem, 2.2vw, 1.45rem)/1.45 var(--f-zier); color: var(--bein-sanft); margin: 1.3rem auto 0; max-width: 34rem; }
.wald__lead { font: 400 1.16rem/1.7 var(--f-text); color: rgba(243, 238, 230, .82); margin: 1.6rem auto 2.4rem; max-width: 36rem; }
.wald__kopf--klein .wald__titel { font-size: clamp(2.4rem, 6vw, 4.2rem); }
.wald__kopf--klein .wald__lead { margin-bottom: 0; }
.wald__h2 { font: 500 .74rem/1 var(--f-inschr); letter-spacing: .36em; text-transform: uppercase; color: var(--bein-sanft); margin: 0 0 1.4rem;
  display: flex; align-items: center; gap: 1rem; }
.wald__h2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(200, 26, 28, .5), transparent); }
.wald__h2 span { color: var(--blut-text); }
.wald__unter { font: italic 400 1.05rem/1.5 var(--f-text); color: var(--bein-leise); margin: -.6rem 0 1.4rem; }
.wald__wurzeln, .wald__samen, .antworten { max-width: 46rem; margin: clamp(4rem, 9vw, 6rem) auto 0; }
.wald__wurzelreihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.wurzel { display: flex; flex-direction: column; gap: .5rem; padding: 1.4rem 1.5rem; border: 1px solid var(--bein-hauch); text-decoration: none;
  background: linear-gradient(160deg, rgba(157, 15, 18, .12), transparent 60%); transition: border-color .35s, transform .35s; }
.wurzel:hover { border-color: rgba(200, 26, 28, .55); transform: translateY(-2px); }
.wurzel__titel { font: 400 1.9rem/1.1 var(--f-zier); color: var(--bein); }
.wurzel__zahl { font: 400 max(.66rem, 11px)/1 var(--f-inschr); letter-spacing: .26em; text-transform: uppercase; color: var(--blut-text); }
.wald__leer, .wald__dank { font: italic 400 1.1rem/1.6 var(--f-text); color: var(--bein-leise); }
.wald__dank { color: var(--bein); border-left: 2px solid var(--blut); padding-left: 1rem; }
.samenliste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bein-hauch); }
.same-zeile a { position: relative; display: grid; grid-template-columns: 1fr auto; gap: .35rem 2rem; padding: 1.7rem 0 1.8rem; border-bottom: 1px solid var(--bein-hauch); text-decoration: none; }
.same-zeile a::before { content: ""; position: absolute; left: -1.4rem; top: 1.9rem; bottom: 2rem; width: 2px; background: var(--blut-hell); transform: scaleY(0); transform-origin: top; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.same-zeile a:hover::before { transform: scaleY(1); }
.same-zeile__datum { grid-column: 1 / -1; font: 400 max(.64rem, 11px)/1 var(--f-inschr); letter-spacing: .24em; text-transform: uppercase; color: var(--bein-leise); }
.same-zeile__titel { font: 400 clamp(1.6rem, 3.2vw, 2.1rem)/1.15 var(--f-zier); color: var(--bein); transition: color .3s; }
.same-zeile a:hover .same-zeile__titel { color: #fff; }
.same-zeile__zahl { grid-row: 2; grid-column: 2; align-self: end; font: 400 max(.64rem, 11px)/1 var(--f-inschr); letter-spacing: .22em; text-transform: uppercase; color: var(--blut-text); white-space: nowrap; }
.same-zeile__autor { grid-column: 1; font: italic 400 1.02rem/1.4 var(--f-text); color: var(--bein-sanft); }
.same-zeile__auszug { grid-column: 1; font: 400 1.04rem/1.6 var(--f-text); color: rgba(243, 238, 230, .62); margin-top: .3rem; }
.same { max-width: 42rem; margin: 0 auto; }
.same__kopf { text-align: center; margin-bottom: 3rem; }
.same__titel { font: 300 clamp(2.4rem, 6.5vw, 4.4rem)/1.05 var(--f-zier); color: var(--bein); margin: 0; text-shadow: 0 0 50px rgba(157, 15, 18, .4); }
.same__meta { font: italic 400 1.1rem/1.5 var(--f-text); color: var(--bein-sanft); margin: 1.1rem 0 0; }
.same__text p { font: 400 1.18rem/1.75 var(--f-text); color: rgba(243, 238, 230, .88); margin: 0 0 1.25rem; white-space: normal; }
.same__text p:first-child { display: flow-root; }
.same__text p:first-child::first-letter { float: left; font: 400 3.3em/.82 var(--f-deko); color: var(--blut-hell); margin: .06em .1em 0 0; }
.same__text a, .antwort__text a { color: var(--bein); text-decoration-color: var(--blut-hell); text-underline-offset: .2em; word-break: break-word; }
.same__wege { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin: 2.4rem 0 0; }
.same__laden { font: 400 max(.68rem, 11px)/1 var(--f-inschr); letter-spacing: .26em; text-transform: uppercase; color: var(--bein-sanft); text-decoration: none; }
.same__laden:hover { color: var(--bein); }
.same__ki { font: italic 400 .98rem/1.4 var(--f-text); color: var(--bein-leise); margin-top: 2rem; }
.antwort { padding: 1.5rem 0; border-bottom: 1px solid var(--bein-hauch); scroll-margin-top: 7rem; }
.antwort:first-of-type { border-top: 1px solid var(--bein-hauch); }
.antwort:target { background: linear-gradient(90deg, rgba(157, 15, 18, .14), transparent 70%); }
.antwort__kopf { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 .6rem; font: 400 max(.66rem, 11px)/1.4 var(--f-inschr); letter-spacing: .24em; text-transform: uppercase; }
.antwort__name { color: var(--bein); }
.antwort__datum { color: var(--bein-leise); }
.antwort__text p { font: 400 1.1rem/1.68 var(--f-text); color: rgba(243, 238, 230, .84); margin: 0 0 .8rem; }
.antwort__bild img { max-width: 14rem; height: auto; border: 1px solid var(--bein-hauch); }
.wald-form { max-width: 46rem; margin: 3rem auto 0; display: grid; gap: 1.5rem; }
.wald-form--saat { max-width: 40rem; margin-top: clamp(3rem, 7vw, 4.5rem); }
.wald-form__reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.wald-feld { display: grid; gap: .55rem; border: 0; margin: 0; padding: 0; min-width: 0; }
.wald-feld > span, .wald-feld > legend { font: 400 max(.66rem, 11px)/1.4 var(--f-inschr); letter-spacing: .26em; text-transform: uppercase; color: var(--bein-sanft); padding: 0; }
.wald-feld small { display: block; margin-top: .35rem; font: italic 400 .98rem/1.4 var(--f-text); letter-spacing: 0; text-transform: none; color: var(--bein-leise); }
.wald-feld input[type=text], .wald-feld input[type=url], .wald-feld select, .wald-feld textarea {
  width: 100%; background: rgba(243, 238, 230, .025); border: 0; border-bottom: 1px solid rgba(243, 238, 230, .28); color: var(--bein);
  font: 400 1.12rem/1.6 var(--f-text); padding: .7rem .2rem; border-radius: 0; transition: border-color .3s, background .3s; }
.wald-feld textarea { resize: vertical; min-height: 9rem; border: 1px solid rgba(243, 238, 230, .18); padding: .9rem 1rem; }
.wald-feld select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.wald-feld select option { background: #0b0807; }
.wald-feld input:focus, .wald-feld select:focus, .wald-feld textarea:focus { outline: none; border-color: var(--blut-hell); background: rgba(157, 15, 18, .07); }
.wald-feld input[type=file] { font: 400 1rem/1.4 var(--f-text); color: var(--bein-sanft); }
.wald-feld input[type=file]::file-selector-button { font: 400 max(.66rem, 11px)/1 var(--f-inschr); letter-spacing: .24em; text-transform: uppercase; color: var(--bein);
  background: transparent; border: 1px solid rgba(243, 238, 230, .35); padding: .8rem 1.1rem; margin-right: 1rem; cursor: pointer; }
.wald-feld--kurz { max-width: 20rem; }
.wald-feld--wahl { display: flex; flex-wrap: wrap; gap: .6rem; }
.wald-feld--wahl legend { width: 100%; margin-bottom: .5rem; }
.wald-wahl { position: relative; cursor: pointer; }
.wald-wahl input { position: absolute; opacity: 0; pointer-events: none; }
.wald-wahl span { display: inline-block; padding: .6rem 1.1rem; border: 1px solid rgba(243, 238, 230, .22); font: 400 1.02rem/1.2 var(--f-text); color: var(--bein-sanft); transition: border-color .3s, background .3s, color .3s; }
.wald-wahl:hover span { border-color: rgba(243, 238, 230, .5); color: var(--bein); }
.wald-wahl input:checked + span { border-color: var(--blut-hell); background: rgba(157, 15, 18, .2); color: var(--bein); box-shadow: 0 0 0 1px var(--blut-hell); }
.wald-wahl input:focus-visible + span { outline: 1px solid var(--bein); outline-offset: 3px; }
.wald-form .knopf { justify-self: start; }
.wald-form__fehler { margin: 0; padding: .9rem 1.1rem; border-left: 2px solid var(--blut-hell); background: rgba(157, 15, 18, .12); color: var(--bein); font: 400 1.05rem/1.5 var(--f-text); }
@media (max-width: 640px) {
  .wald-form__reihe { grid-template-columns: 1fr; }
  .same-zeile a { grid-template-columns: 1fr; }
  .same-zeile__zahl { grid-row: auto; grid-column: 1; }
  .wald-leiste { gap: 1.4rem; letter-spacing: .2em; font-size: max(.6rem, 11px); white-space: nowrap; }
  .wald-leiste__name { display: none; }
}

/* v2.46 · die Heimleiste auch über der Beschreibung (und im Lexikon) */
.heimleiste + .ueber, .heimleiste + .lexikon { padding-top: clamp(2.5rem, 7vw, 5.5rem); }

/* ═══ v2.46 · Das Geflecht des Waldes (app/views/wald_netz.php, assets/js/wald.js) ═══
   Schwarz, Bein, Blut. Äste verjüngen sich zum jüngeren Samen (Holten & van Wijk),
   leichte Biegung (Xu u. a.), keine Bündel, wenige Kreuzungen (Purchase). */
.netzbild { max-width: 76rem; margin: clamp(3rem, 7vw, 5rem) auto 0; }
.netzbild__buehne { position: relative; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: rgba(243, 238, 230, .2) transparent;
  border-top: 1px solid var(--bein-hauch); border-bottom: 1px solid var(--bein-hauch);
  background: radial-gradient(ellipse 60% 55% at 50% 100%, rgba(157, 15, 18, .10), transparent 70%); }
.netzbild__buehne.geht-links { -webkit-mask-image: linear-gradient(90deg, transparent, #000 3.2rem); mask-image: linear-gradient(90deg, transparent, #000 3.2rem); }
.netzbild__buehne.geht-rechts { -webkit-mask-image: linear-gradient(270deg, transparent, #000 3.2rem); mask-image: linear-gradient(270deg, transparent, #000 3.2rem); }
.netzbild__buehne.geht-links.geht-rechts { -webkit-mask-image: linear-gradient(90deg, transparent, #000 3.2rem, #000 calc(100% - 3.2rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 3.2rem, #000 calc(100% - 3.2rem), transparent); }
.netz { display: block; height: auto; }   /* v3.04 · natürliche Grösse aus width/height, nur verkleinert (siehe unten) */
@media (min-width: 900px) { .netz { max-height: max(560px, calc(100svh - var(--leiste-h, 5rem) - 2.5rem)); } }   /* v2.48 · das ganze Geflecht auf einen Blick, Wurzeln inklusive */
.netz__erde { stroke: rgba(243, 238, 230, .16); stroke-width: 1; }
.ast { transition: opacity .45s ease, fill .45s ease; }
.ast--inspiration { fill: #c81a1c; opacity: .82; }
.ast--reaktion { fill: #f3eee6; opacity: .5; }
.ast--thematik { fill: #f3eee6; opacity: .17; }
.ast--fassung { fill: #f3eee6; opacity: .42; }
.kn { cursor: pointer; outline: none; }
.kn__feld { fill: transparent; }
.kn__form { transition: transform .4s cubic-bezier(.2, .7, .2, 1), fill .3s, stroke .3s; transform-box: fill-box; transform-origin: center; }
.kn--werk .kn__form, .kn--werk-l { fill: #f3eee6; stroke: #070505; stroke-width: 1.5; }
.kn--text .kn__form, .kn--text-l { fill: #070505; stroke: #f3eee6; stroke-width: 1.3; }
.kn--wurzel .kn__form { fill: #f3eee6; filter: drop-shadow(0 0 10px rgba(255, 74, 53, .45)); }
/* v3.0 · eigene Wurzeln (von Lesenden gesetzt): offenes Dreieck, gleiche Glut */
.kn--eigen .kn__form, .kn--eigen-l { fill: #070505; stroke: #f3eee6; stroke-width: 1.6; stroke-linejoin: round; }
.kn--wurzel-l { fill: #f3eee6; }
.kn__glut { animation: kn-glimmen 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes kn-glimmen { 50% { opacity: .45; transform: scale(.82); } }
.kn__name { font: italic 400 13.5px var(--f-zier); fill: rgba(243, 238, 230, .74); letter-spacing: .01em; paint-order: stroke; stroke: #070505; stroke-width: 4px; stroke-linejoin: round; transition: fill .3s, opacity .4s; pointer-events: none; }
.kn--wurzel .kn__name { font: 500 12px var(--f-inschr); letter-spacing: .32em; font-style: normal; fill: #f3eee6; }
.kn:hover .kn__form, .kn:focus-visible .kn__form, .kn.ist-mitte .kn__form { transform: scale(1.35); }
.kn:hover .kn__name, .kn:focus-visible .kn__name, .kn.ist-mitte .kn__name { fill: #fff; }
.kn:focus-visible .kn__feld { stroke: rgba(243, 238, 230, .6); stroke-width: 1; stroke-dasharray: 2 3; }
.netz.ist-fokus .ast { opacity: .05; }
.netz.ist-fokus .ast.ist-nah { opacity: .95; }
.netz.ist-fokus .ast--thematik.ist-nah { opacity: .55; }
.netz.ist-fokus .kn { opacity: .22; transition: opacity .35s; }
.netz.ist-fokus .kn.ist-nah { opacity: 1; }
.netzbild.keimt .kn, .netzbild.keimt .ast { opacity: 0; }
.netzbild.keimt.ist-da .kn { animation: kn-keimen 2.2s cubic-bezier(.45, .05, .35, 1) both; }
.netzbild.keimt.ist-da .ast { animation: ast-wachsen 3s cubic-bezier(.6, .05, .4, 1) both; }
.netzbild.keimt.ist-da .ast--inspiration { --ast-o: .82; } .netzbild.keimt.ist-da .ast--reaktion { --ast-o: .5; }
.netzbild.keimt.ist-da .ast--thematik { --ast-o: .17; } .netzbild.keimt.ist-da .ast--fassung { --ast-o: .42; }
.netzbild.waechst:not(.ist-da) .kn, .netzbild.waechst:not(.ist-da) .netz__erde, .netzbild.waechst:not(.ist-da) .netz__boden { opacity: 0; }   /* v2.48 · vor dem Wachsen */
.netz__erde { transform-box: fill-box; transform-origin: center; }
.kn__name { transform-box: fill-box; }
@keyframes kn-keimen { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ast-wachsen { from { opacity: 0; } to { opacity: var(--ast-o, .5); } }
.netzbild__karte { position: absolute; z-index: 2; width: min(20rem, 80vw); padding: 1rem 1.15rem 1.05rem; pointer-events: none;
  background: rgba(10, 7, 6, .94); border: 1px solid rgba(243, 238, 230, .16); border-top: 2px solid var(--blut-hell);
  box-shadow: 0 24px 60px -20px #000, 0 0 0 1px rgba(0, 0, 0, .6); backdrop-filter: blur(6px); }
.netzbild__karte p { margin: 0; }
.netzbild__k-titel { font: 400 1.32rem/1.2 var(--f-zier); color: var(--bein); }
.netzbild__k-meta { margin-top: .45rem !important; font: 400 max(.6rem, 11px)/1.5 var(--f-inschr); letter-spacing: .2em; text-transform: uppercase; color: var(--blut-text); }
.netzbild__k-text { margin-top: .6rem !important; font: 400 .98rem/1.5 var(--f-text); color: rgba(243, 238, 230, .72); }
.netzbild__legende { max-width: 46rem; margin: 1.6rem auto 0; padding: 0 var(--rand); text-align: center; }
.netzbild__legende ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem 1.6rem;
  font: 400 max(.62rem, 11px)/1.4 var(--f-inschr); letter-spacing: .2em; text-transform: uppercase; color: var(--bein-sanft); }
.netzbild__legende li { display: inline-flex; align-items: center; gap: .55rem; }
.netzbild__legende li svg { width: 2.6rem; height: .75rem; overflow: visible; }
.netzbild__legende li svg[viewBox="0 0 14 12"] { width: .9rem; }
.netzbild__legende p { margin: 1rem auto 0; font: italic 400 1.02rem/1.55 var(--f-text); color: var(--bein-leise); max-width: 38rem; }
@media (prefers-reduced-motion: reduce) { .kn__glut { animation: none; } }
/* Verbindungen auf der Seite eines Samens und im Formular */
.verbunden { max-width: 42rem; margin: 2.6rem auto 0; padding-top: 1.6rem; border-top: 1px solid var(--bein-hauch); display: grid; gap: .9rem; }
.verbunden__zeile { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; align-items: baseline; }
.verbunden__art { font: 400 max(.62rem, 11px)/1.5 var(--f-inschr); letter-spacing: .2em; text-transform: uppercase; color: var(--blut-text); }
.verbunden__ziel a { font: 400 1.25rem/1.3 var(--f-zier); color: var(--bein); text-decoration: none; border-bottom: 1px solid rgba(200, 26, 28, .5); }
.verbunden__ziel a:hover { color: #fff; border-bottom-color: var(--blut-hell); }
.same__probe { display: inline-block; margin-left: .6rem; padding: .15rem .5rem; border: 1px solid var(--bein-hauch); font: 400 max(.55rem, 11px)/1.4 var(--f-inschr); letter-spacing: .2em; text-transform: uppercase; color: var(--bein-leise); font-style: normal; vertical-align: middle; }
.wald-form__wurzeln { display: grid; gap: .8rem; }
.wald-form__wurzel { display: grid; grid-template-columns: 1fr 13rem; gap: 1rem; }
@media (max-width: 640px) { .verbunden__zeile, .wald-form__wurzel { grid-template-columns: 1fr; gap: .3rem; } }

/* ═══ v2.46 · Das Lexikon der Narrenbibel (lexikon.php) – im Ton der Beschreibung ═══ */
.lexikon { isolation: isolate; position: relative; padding: calc(var(--leiste-h, 5rem) + clamp(2.5rem, 7vw, 6rem)) var(--rand) clamp(4rem, 9vw, 8rem); overflow: hidden; }
.lexikon::before { content: ""; position: absolute; inset: 0 0 auto; height: 46rem; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 48rem 26rem at 50% 8rem, rgba(157, 15, 18, .26), transparent 72%);
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.lexikon__kopf, .lemma__kopf { max-width: 46rem; margin: 0 auto; text-align: center; }
.lexikon__sigil { width: 2rem; height: auto; display: block; margin: 0 auto 1.5rem; filter: drop-shadow(0 0 18px rgba(255, 74, 53, .35)); }
.lexikon__kicker { font: 500 .72rem/1 var(--f-inschr); letter-spacing: .42em; text-transform: uppercase; color: var(--blut-text); margin: 0 0 1.2rem; }
.lexikon__titel { font: 300 clamp(2.8rem, 8vw, 5.6rem)/1 var(--f-zier); color: var(--bein); margin: 0; text-shadow: 0 0 60px rgba(157, 15, 18, .45); }
.lexikon__lead { font: 400 1.18rem/1.7 var(--f-text); color: rgba(243, 238, 230, .82); margin: 1.6rem auto 0; max-width: 38rem; }
.lexikon__lead a { color: var(--bein); }
.lexikon__h2 { font: 500 .74rem/1 var(--f-inschr); letter-spacing: .36em; text-transform: uppercase; color: var(--bein-sanft); margin: 0 0 1.4rem; display: flex; align-items: center; gap: 1rem; }
.lexikon__h2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(200, 26, 28, .5), transparent); }
.lexikon__kurz, .lexikon__liste { max-width: 46rem; margin: clamp(3.5rem, 8vw, 5.5rem) auto 0; }
.lexikon__fakten { margin: 0; border-top: 1px solid var(--bein-hauch); }
.lexikon__fakten div { display: grid; grid-template-columns: 10rem 1fr; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--bein-hauch); }
.lexikon__fakten dt { font: 400 max(.64rem, 11px)/1.9 var(--f-inschr); letter-spacing: .24em; text-transform: uppercase; color: var(--blut-text); }
.lexikon__fakten dd { margin: 0; font: 400 1.06rem/1.55 var(--f-text); color: var(--bein); }
.lemmata { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bein-hauch); counter-reset: lemma; }
.lemma-zeile a { position: relative; display: grid; grid-template-columns: 2.6rem 1fr; gap: .3rem 1rem; padding: 1.35rem 0 1.4rem; border-bottom: 1px solid var(--bein-hauch); text-decoration: none; counter-increment: lemma; }
.lemma-zeile a::before { content: counter(lemma, upper-roman); grid-row: 1 / 3; font: 400 .7rem/2.4 var(--f-inschr); letter-spacing: .14em; color: var(--blut-text); }
.lemma-zeile__titel { font: 400 clamp(1.4rem, 2.8vw, 1.8rem)/1.2 var(--f-zier); color: var(--bein); transition: color .3s; }
.lemma-zeile a:hover .lemma-zeile__titel { color: #fff; }
.lemma-zeile__kurz { font: 400 1rem/1.55 var(--f-text); color: rgba(243, 238, 230, .6); }
.lexikon__maschinen { max-width: 46rem; margin: 3rem auto 0; font: italic 400 .98rem/1.6 var(--f-text); color: var(--bein-leise); text-align: center; }
.lexikon__maschinen a { color: var(--bein-sanft); }
.lemma { max-width: 44rem; margin: 0 auto; }
.lemma__kopf .ueber__krumen { flex-wrap: wrap; row-gap: .6rem; margin-bottom: 2.4rem; }
.ueber__krumen > * { white-space: nowrap; }
.ueber__krumen [aria-current] { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {   /* v2.48 · Telefon: der eigene Titel steht ohnehin gross darunter – die Krumen bleiben eine Zeile */
  .ueber__krumen { flex-wrap: nowrap !important; letter-spacing: .22em; gap: .55em; }
  .ueber__krumen > [aria-current], .ueber__krumen > [aria-current] + *, .ueber__krumen > :nth-last-child(2) { display: none; }
}
.lemma__titel { font: 300 clamp(2.3rem, 6vw, 4rem)/1.06 var(--f-zier); color: var(--bein); margin: 0; text-shadow: 0 0 50px rgba(157, 15, 18, .4); }
.lemma__meta { font: italic 400 1.05rem/1.5 var(--f-text); color: var(--bein-sanft); margin: 1.1rem 0 0; }
.lemma__meta a { color: var(--bein); text-decoration-color: rgba(200, 26, 28, .6); text-underline-offset: .2em; }
.lemma__kurz { margin: 3rem 0 2.6rem; padding: 1.5rem 1.7rem 1.6rem; border: 1px solid rgba(243, 238, 230, .14); border-left: 2px solid var(--blut-hell);
  background: linear-gradient(110deg, rgba(157, 15, 18, .14), rgba(157, 15, 18, .02) 70%); }
.lemma__kurz p { margin: 0; font: 400 1.22rem/1.62 var(--f-text); color: var(--bein); }
.lemma__kurz .lemma__kurz-titel { font: 500 max(.64rem, 11px)/1 var(--f-inschr); letter-spacing: .32em; text-transform: uppercase; color: var(--blut-text); margin-bottom: .85rem; }
.lemma__text h2 { font: 400 clamp(1.6rem, 3.4vw, 2.1rem)/1.2 var(--f-zier); color: var(--bein); margin: 2.6rem 0 1rem; }
.lemma__text ul { margin: 0 0 1.4rem; padding-left: 1.2rem; }
.lemma__text li { font: 400 1.12rem/1.65 var(--f-text); color: rgba(243, 238, 230, .86); margin-bottom: .55rem; }
.lemma__text li::marker { color: var(--blut-hell); }
.lex-tabelle { width: 100%; border-collapse: collapse; margin: .4rem 0 1.8rem; font: 400 1.02rem/1.45 var(--f-text); color: rgba(243, 238, 230, .86); display: block; overflow-x: auto; }
.lex-tabelle th { font: 500 max(.6rem, 11px)/1.4 var(--f-inschr); letter-spacing: .2em; text-transform: uppercase; color: var(--blut-text); text-align: left; padding: .7rem .9rem .7rem 0; border-bottom: 1px solid rgba(200, 26, 28, .45); white-space: nowrap; }
.lex-tabelle td { padding: .75rem .9rem .75rem 0; border-bottom: 1px solid var(--bein-hauch); vertical-align: top; }
.lex-tabelle td:first-child { color: var(--bein); }
.lemma__fragen, .lemma__quellen, .lemma__siehe { margin-top: clamp(3rem, 7vw, 4.5rem); }
.lemma__quellen ol { margin: 0; padding-left: 1.4rem; font: 400 1.02rem/1.6 var(--f-text); color: rgba(243, 238, 230, .78); }
.lemma__quellen li { margin-bottom: .4rem; }
.lemma__quellen li::marker { color: var(--blut-text); font-family: var(--f-inschr); font-size: .8em; }
.lemma__quellen a { color: var(--bein-sanft); text-decoration-color: rgba(200, 26, 28, .5); text-underline-offset: .2em; }
.lemma__siehe ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .7rem; }
.lemma__siehe a { display: inline-block; padding: .65rem 1rem; border: 1px solid var(--bein-hauch); font: 400 1.12rem/1.2 var(--f-zier); color: var(--bein); text-decoration: none; transition: border-color .3s, background .3s; }
.lemma__siehe a:hover { border-color: rgba(200, 26, 28, .6); background: rgba(157, 15, 18, .1); }
.lemma__zitieren { margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--bein-hauch); font: 400 .98rem/1.6 var(--f-text); color: var(--bein-leise); }
.lemma__zitieren summary { cursor: pointer; font: 500 max(.64rem, 11px)/1 var(--f-inschr); letter-spacing: .28em; text-transform: uppercase; color: var(--bein-sanft); list-style: none; }
.lemma__zitieren summary::before { content: "+ "; color: var(--blut-text); }
.lemma__zitieren[open] summary::before { content: "– "; }
.lemma__zitieren p { margin: .9rem 0 0; word-break: break-word; }
.lemma__zitieren a { color: var(--bein-sanft); }
.heimleiste__hier { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .lexikon__fakten div { grid-template-columns: 1fr; gap: .2rem; } .heimleiste__hier { display: none; } }

/* ═══ v2.47 · Die Katalyse als Text (katalyse-text.php) ═══ */
.katalyse-text .lemma__kopf { margin-bottom: 0; }
.katalyse-text__wege { max-width: 40rem; margin: 0 auto; text-align: center; font: 500 max(.62rem, 11px)/2 var(--f-inschr); letter-spacing: .22em; text-transform: uppercase; color: var(--bein-leise); }
.katalyse-text__wege a { color: var(--bein-sanft); text-decoration: none; border-bottom: 1px solid rgba(200, 26, 28, .45); }
.katalyse-text__warnung { max-width: 38rem; margin: 1.6rem auto 0; text-align: center; font: italic 400 .98rem/1.55 var(--f-text); color: var(--bein-leise); }
.katalyse-text__text { position: relative; max-width: 36rem; margin: clamp(3rem, 7vw, 5rem) auto 0; counter-reset: none; }
.katalyse-text__phase { font: 400 clamp(1.8rem, 4vw, 2.4rem)/1.2 var(--f-zier); color: var(--bein); text-align: center; margin: 0 0 2.4rem; }
.katalyse-text__text p { position: relative; font: 400 1.14rem/1.78 var(--f-text); color: rgba(243, 238, 230, .88); margin: 0 0 1.15rem; hyphens: auto; -webkit-hyphens: auto; }
.katalyse-text__text p.kt-narr, .katalyse-text__text p.kt-weise { font: italic 400 1.22rem/1.5 var(--f-zier); text-align: center; margin: 1.6rem 0; }
.katalyse-text__text p.kt-narr { color: var(--blut-text); }
.katalyse-text__text p.kt-weise { color: var(--bein); }
.kt-seite { position: absolute; left: -4.2rem; top: .35rem; width: 3rem; text-align: right; font: 400 max(.6rem, 11px)/1 var(--f-inschr); letter-spacing: .14em; color: rgba(243, 238, 230, .32); text-decoration: none; scroll-margin-top: 7rem; }
.kt-seite:hover { color: var(--blut-text); }
.kt-seite:empty { display: inline; position: absolute; width: 0; }
.katalyse-text__ende { margin-top: 3rem !important; padding-top: 1.4rem; border-top: 1px solid var(--bein-hauch); font-style: italic !important; color: var(--bein-sanft) !important; text-align: center; }
.katalyse-text__ende a { color: var(--bein); }
@media (max-width: 900px) { .kt-seite { left: auto; right: -0.4rem; top: -1.1rem; width: auto; } }
.katalyse-text .lemma__kurz { margin: 3rem auto 2.4rem; max-width: 40rem; }
.katalyse-text .lemma__zitieren { max-width: 36rem; margin: 3rem auto 0; }
.kt-seite:target, .kt-seite:focus { outline: none; color: var(--blut-hell); }
.kt-seite:target::after { content: ""; position: absolute; right: -1rem; top: -.2rem; width: 2px; height: 1.4rem; background: var(--blut-hell); }

/* v2.48 · Die Fehlerseite: drei Wege zurück, wie drei Phasen */
.fehler { min-height: calc(100svh - 6rem); text-align: center; }
.fehler__knopf { margin: 2.4rem 0 0; }
.fehler__wege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 54rem; margin: clamp(2.8rem, 7vw, 4.5rem) auto 0; }
.fehler__weg + .fehler__weg { margin-left: -1px; }
.fehler__weg { border: 1px solid rgba(243, 238, 230, .12); display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: 2rem 1.2rem 1.8rem; background: var(--nacht); color: var(--bein); text-decoration: none;
  transition: background .5s var(--sanft), color .3s; }
.fehler__weg:hover, .fehler__weg:focus-visible { background: #120808; }
.fehler__weg:focus-visible { outline: 1px solid rgba(243, 238, 230, .5); outline-offset: -6px; }
.fehler__ziffer { font: 400 1.6rem/1 var(--f-zier); color: var(--blut-text); transition: transform .5s var(--sanft), text-shadow .5s; }
.fehler__weg:hover .fehler__ziffer { transform: translateY(-3px); text-shadow: 0 0 18px rgba(255, 74, 53, .6); }
.fehler__name { font: 500 .7rem/1.4 var(--f-inschr); letter-spacing: .3em; text-transform: uppercase; }
.fehler__unter { font: italic 400 1rem/1.4 var(--f-zier); color: rgba(243, 238, 230, .6); }
@media (max-width: 640px) { .fehler__wege { grid-template-columns: 1fr; } .fehler__weg { padding: 1.5rem 1rem; } .fehler__weg + .fehler__weg { margin: -1px 0 0; } }
@media (prefers-reduced-motion: no-preference) {
  .fehler__weg { animation: ueberAuf 1.1s cubic-bezier(.2, .7, .2, 1) both; }
  .fehler__weg:nth-child(1) { animation-delay: .45s; } .fehler__weg:nth-child(2) { animation-delay: .55s; } .fehler__weg:nth-child(3) { animation-delay: .65s; }
}

/* v2.49 · Die Muttern mit der Tastatur – für die Maus unsichtbar */
.muttern-tasten { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.mutter-taste { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mutter-taste:focus-visible { width: auto; height: auto; overflow: visible; clip-path: none; transform: translate(-100%, -50%); pointer-events: auto; z-index: 400;
  padding: .55rem .9rem; background: rgba(7, 5, 5, .86); border: 1px solid rgba(255, 74, 53, .55); color: var(--bein); text-decoration: none;
  font: 500 max(.66rem, 11px)/1 var(--f-inschr); letter-spacing: .24em; text-transform: uppercase; box-shadow: 0 0 24px rgba(255, 74, 53, .25); outline: none; }

/* ═══ v2.49 · Druckansicht: Wer eine Seite druckt (Lexikon, Beschreibung, Katalyse-Text, Quittung),
   bekommt schwarze Schrift auf weissem Papier, ohne Leisten, Leinwände und Knöpfe. ═══ */
@media print {
  @page { margin: 18mm 16mm 20mm; }
  :root { color-scheme: light; }
  html, body { background: #fff !important; color: #111 !important; }
  body { font-size: 11pt; }
  *, *::before, *::after { text-shadow: none !important; box-shadow: none !important; animation: none !important; transition: none !important; }
  [data-zeige], .ueber__kopf > *, .lexikon__kopf > *, .lemma__kopf > * { opacity: 1 !important; transform: none !important; }
  .leiste, .skip, .fuss__nav, .heimleiste, .wald-leiste, .ueber__wege, .knopf, .muttern-tasten, canvas, .buch3d, .buch3d-dunst, .buch3d-nacht,
  .auftakt__hinab, .auftakt__glut, .auftakt__dunst, form, button, video, .kt-leser__steuer, .netzbild__karte, .ueber__inhalt { display: none !important; }
  main, .ueber, .lexikon, .katalyse-text, .unterseite { padding: 0 !important; margin: 0 !important; max-width: none !important; min-height: 0 !important; }
  h1, h2, h3, h4, .ueber__titel, .lexikon__titel, .lemma__titel { color: #000 !important; break-after: avoid; }
  p, li, dd, dt, td, th, blockquote, .ueber__text p { color: #111 !important; orphans: 3; widows: 3; }
  .ueber__kicker, .lexikon__kicker, .ueber__nr, .ueber__akte-nr, .ueber__akte-mark, .ueber__fakten dt, .ueber__etiketten li::before { color: #7a0d10 !important; }
  .sigil, svg.sigil { filter: none !important; }
  a { color: inherit !important; text-decoration: underline; text-decoration-thickness: .5pt; }
  .lemma__text a[href^="http"]::after, .lemma__quellen a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; word-break: break-all; }
  blockquote, .ueber__akte, .lex-tabelle, figure, .same__kopf, table { break-inside: avoid; }
  .ueber__akte, .ueber__fakten div, .ueber__etiketten li, .lex-tabelle td, .lex-tabelle th { border-color: #bbb !important; background: none !important; }
  .netz { max-height: none !important; min-width: 0 !important; }
  main * { color: #1a1a1a !important; }
  .netz text { stroke: none !important; fill: #1a1a1a !important; paint-order: normal !important; }
  .netzbild .ast { mask: none !important; } .netzbild .kn, .netzbild .netz__erde, .netzbild .netz__boden { opacity: 1 !important; }
  body::after, .ueber::before, .lexikon::before, .wald::before, .auftakt::before { display: none !important; }
  .ueber, .lexikon, .wald { overflow: visible !important; isolation: auto !important; }
  .netzbild__buehne { overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important; background: none !important; }
  .fuss { border: 0 !important; padding: 8mm 0 0 !important; background: none !important; }
  .fuss * { color: #555 !important; }
}

/* ═══ v2.49 · Was bisher niemand angesehen hat ═══ */
/* Antippen auf dem Telefon: kein grauer Kasten über Knöpfen und Muttern */
html { -webkit-tap-highlight-color: transparent; }
/* Vom Browser ausgefüllte Felder (Adresse, E-Mail): nicht hellgelb, sondern im Dunkel der Seite */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, select:-webkit-autofill {
  -webkit-text-fill-color: var(--bein); caret-color: var(--bein); -webkit-box-shadow: 0 0 0 100vmax #120c0b inset; box-shadow: 0 0 0 100vmax #120c0b inset;
  transition: background-color 600000s 0s, color 600000s 0s; }
input:autofill { background: #120c0b; color: var(--bein); }
/* Platzhalter lesbar, aber leiser als Eingaben */
::placeholder { color: rgba(243, 238, 230, .42); opacity: 1; }
/* Hoher Kontrast (Windows «Kontrastdesigns»): Fokus, Knöpfe und Linien bleiben sichtbar */
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid Highlight !important; outline-offset: 2px; }
  .knopf, .leiste__kauf, .fehler__weg, .ueber__akte, .mutter-taste, input, textarea, select { border: 1px solid CanvasText !important; }
  .knopf--blut { background: ButtonFace !important; color: ButtonText !important; }
  .ast { fill: CanvasText; } .kn__form { stroke: CanvasText; }
  body::after, .auftakt__dunst, .auftakt__glut, .buch3d-dunst { display: none !important; }
}
/* Wer mehr Kontrast wünscht, bekommt ihn */
@media (prefers-contrast: more) {
  :root { --bein-leise: rgba(243, 238, 230, .78); --bein-sanft: rgba(243, 238, 230, .9); }
  body::after { display: none; }
}
/* Ränder des iPhones (Notch, Home-Leiste): nichts klebt an der Kante */
@supports (padding: max(0px)) {
  .fuss { padding-bottom: calc(3rem + env(safe-area-inset-bottom)); padding-left: max(var(--rand), env(safe-area-inset-left)); padding-right: max(var(--rand), env(safe-area-inset-right)); }
}

/* v3.0 · Das Geflecht wächst langsam – wer nicht warten mag, lässt es sofort stehen */
.netzbild__sofort { position: absolute; right: .8rem; bottom: .7rem; z-index: 3; padding: .45rem .8rem; border: 1px solid rgba(243, 238, 230, .22); background: rgba(7, 5, 5, .72);
  color: var(--bein-leise); font: 400 max(.62rem, 11px)/1 var(--f-inschr); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; opacity: 0; animation: sofort-auf 1.2s 2.4s ease forwards; }
.netzbild__sofort:hover, .netzbild__sofort:focus-visible { color: var(--bein); border-color: rgba(243, 238, 230, .5); }
@keyframes sofort-auf { to { opacity: 1; } }
@media print { .netzbild__sofort { display: none !important; } }

/* v3.0 · Wurzeln, die andere gesetzt haben */
.wurzel--eigen { border-style: dashed; }
.wurzel__wer { display: block; margin-top: .35rem; font: 400 max(.6rem, 11px)/1.5 var(--f-inschr); letter-spacing: .18em; text-transform: uppercase; color: var(--bein-leise); }
.wald__wurzel-setzen { margin: 1.4rem 0 0; text-align: center; font: italic 400 1.08rem/1.4 var(--f-text); }
.wald__wurzel-setzen a { color: var(--bein); text-decoration-color: rgba(157, 15, 18, .8); text-underline-offset: .25em; }
.wald-form__hinweis { margin: .4rem 0 0; font: italic 400 .98rem/1.5 var(--f-text); color: var(--bein-leise); }
.wald-form:has(input[name="woraus"][value="wurzel"]:checked) .wald-form__wurzeln { display: none; }
.same__wurzel { border-color: rgba(243, 238, 230, .4); }
.kn--wurzel.kn--eigen .kn__name { font: italic 400 13.5px var(--f-zier); letter-spacing: .02em; fill: rgba(243, 238, 230, .88); }

/* ═══ v3.0 · DER WIDERHALL (hinter der unteren Mutter) ═══════════════ */
.widerhall { padding: clamp(5.5rem, 12vw, 8rem) var(--rand) clamp(4rem, 9vw, 7rem); }
.widerhall__motto { margin: 0 auto; max-width: 34rem; }
.widerhall__motto p { font: italic 400 clamp(1.2rem, 2.4vw, 1.5rem)/1.4 var(--f-zier); color: var(--bein); margin: 0; }
.widerhall__motto footer { margin-top: .7rem; font: 400 max(.62rem, 11px)/1 var(--f-inschr); letter-spacing: .3em; text-transform: uppercase; color: var(--blut-text); }
.widerhall__h2 { font: 300 clamp(1.9rem, 4vw, 2.6rem)/1.1 var(--f-zier); color: var(--bein); margin: 0 0 1rem; display: flex; align-items: center; gap: .8rem; }
.widerhall__h3 { font: 500 .72rem/1.3 var(--f-inschr); letter-spacing: .28em; text-transform: uppercase; color: var(--blut-text); margin: 2rem 0 .9rem; }
.widerhall__lead { font: 400 1.12rem/1.66 var(--f-text); color: rgba(243, 238, 230, .82); margin: 0 0 1rem; max-width: 42rem; }
.widerhall__klein, .widerhall__seit { font: italic 400 .98rem/1.5 var(--f-text); color: var(--bein-leise); margin: 1rem 0 0; }
.widerhall__leer { font: italic 400 1.05rem/1.5 var(--f-text); color: var(--bein-leise); }
.widerhall__abschnitt { max-width: 52rem; margin: clamp(4rem, 9vw, 6.5rem) auto 0; }

/* Der Puls */
.widerhall__puls { max-width: 52rem; margin: clamp(3.2rem, 7vw, 5rem) auto 0; padding: clamp(1.4rem, 3vw, 2.2rem); border: 1px solid var(--bein-hauch);
  background: radial-gradient(120% 80% at 50% 120%, rgba(157, 15, 18, .22), transparent 60%), rgba(10, 7, 6, .6); }
.puls__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.puls__herz { width: .9rem; height: .9rem; border-radius: 50%; background: var(--blut-glut); box-shadow: 0 0 14px rgba(255, 74, 53, .7); display: inline-block; }
.puls__herz.schlaegt { animation: herzschlag 1.1s cubic-bezier(.2, .7, .2, 1); }
@keyframes herzschlag { 0% { transform: scale(1); } 14% { transform: scale(1.55); } 28% { transform: scale(1); } 42% { transform: scale(1.3); } 70%, 100% { transform: scale(1); } }
.puls__live { display: inline-flex; align-items: center; gap: .55rem; font: 400 max(.62rem, 11px)/1 var(--f-inschr); letter-spacing: .26em; text-transform: uppercase; color: var(--bein-sanft); margin: 0; }
.puls__punkt { width: .45rem; height: .45rem; border-radius: 50%; background: var(--blut-glut); animation: live-glimmen 2.4s ease-in-out infinite; }
@keyframes live-glimmen { 50% { opacity: .25; } }
.puls__zahl { font: 400 1.08rem/1.5 var(--f-text); color: var(--bein-sanft); margin: .3rem 0 1rem; }
.puls__zahl b { font: 400 1.6rem/1 var(--f-zier); color: var(--bein); }
.puls__bild { display: block; width: 100%; height: 5.5rem; }
.puls__balken { fill: var(--bein); opacity: .82; transition: y .6s var(--sanft), height .6s var(--sanft); }
.puls__balken:last-child { fill: var(--blut-glut); opacity: 1; }
.puls__balken.ist-leer { fill: var(--bein-hauch); opacity: 1; }
.puls__achse, .hall__achse { display: flex; justify-content: space-between; margin: .45rem 0 0; font: 400 max(.56rem, 11px)/1 var(--f-inschr); letter-spacing: .22em; text-transform: uppercase; color: var(--bein-leise); }
.puls__heute { list-style: none; margin: 1.6rem 0 0; padding: 1.3rem 0 0; border-top: 1px solid var(--bein-hauch); display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem 1.4rem; }
.puls__heute li { display: flex; flex-direction: column; gap: .35rem; }
.puls__heute b { font: 300 clamp(1.9rem, 4vw, 2.5rem)/1 var(--f-zier); color: var(--bein); }
.puls__heute span { font: 400 max(.6rem, 11px)/1.45 var(--f-inschr); letter-spacing: .2em; text-transform: uppercase; color: var(--bein-leise); }
.puls__heute--wald { border-top: 0; padding-top: 0; }
.puls__du { margin: 1.3rem 0 0; font: italic 400 1rem/1.5 var(--f-text); color: var(--bein-sanft); }
[data-zahl].ist-neu { color: var(--blut-glut) !important; transition: color .6s; }

/* Gesucht, gelesen, erwähnt */
.widerhall__drei { max-width: 66rem; margin: clamp(3.5rem, 8vw, 5.5rem) auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.4rem; }
.widerhall__drei > .widerhall__seit, .widerhall__drei > .widerhall__tabelle { grid-column: 1 / -1; text-align: center; }
.hall { position: relative; padding: 1.7rem 1.5rem 1.3rem; border: 1px solid var(--bein-hauch); background: linear-gradient(180deg, rgba(20, 10, 9, .85), rgba(10, 7, 6, .5)); display: flex; flex-direction: column; }
.hall__name { font: 500 .72rem/1 var(--f-inschr); letter-spacing: .38em; text-transform: uppercase; color: var(--blut-text); margin: 0; }
.hall__zahl { font: 300 clamp(3rem, 7vw, 4.4rem)/1 var(--f-zier); color: var(--bein); margin: .8rem 0 .4rem; font-variant-numeric: tabular-nums; text-shadow: 0 0 40px rgba(157, 15, 18, .5); }
.hall__was { font: italic 400 1rem/1.45 var(--f-text); color: var(--bein-sanft); margin: 0 0 1rem; }
.hall__teile { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .25rem; }
.hall__teile li { display: flex; justify-content: space-between; gap: 1rem; font: 400 .98rem/1.4 var(--f-text); color: rgba(243, 238, 230, .78); border-bottom: 1px dotted var(--bein-hauch); padding: .2rem 0; }
.hall__teile b { font-weight: 400; color: var(--bein); font-variant-numeric: tabular-nums; }
.hall__bild { display: block; width: 100%; height: 4.4rem; margin-top: auto; overflow: visible; cursor: crosshair; outline: none; }
.hall__bild:focus-visible { outline: 1px solid var(--blut-hell); outline-offset: 4px; }
.hall__flaeche { fill: rgba(200, 26, 28, .16); }
.hall__linie { fill: none; stroke: var(--blut-glut); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.hall__kreuz { stroke: var(--bein-sanft); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hall__tip { position: absolute; z-index: 2; margin: 0; padding: .4rem .65rem; background: rgba(7, 5, 5, .95); border: 1px solid rgba(243, 238, 230, .25); font: 400 .9rem/1.2 var(--f-text); color: var(--bein); white-space: nowrap; pointer-events: none; }
.widerhall__tabelle summary { cursor: pointer; font: 400 max(.62rem, 11px)/1 var(--f-inschr); letter-spacing: .24em; text-transform: uppercase; color: var(--bein-sanft); }
.widerhall__tabelle table { margin: 1.2rem auto 0; border-collapse: collapse; font: 400 .98rem/1.4 var(--f-text); color: var(--bein-sanft); }
.widerhall__tabelle th, .widerhall__tabelle td { padding: .3rem .9rem; border-bottom: 1px solid var(--bein-hauch); text-align: left; }
.widerhall__tabelle .r { text-align: right; font-variant-numeric: tabular-nums; }

/* Sprachen, Wörter, Maschinen */
.balken { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.balken li { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr 3.6rem; align-items: center; gap: .9rem; }
.balken__name { font: 400 1.05rem/1.2 var(--f-text); color: var(--bein); }
.balken__spur { width: 100%; height: .5rem; display: block; }
.balken__grund { fill: var(--bein-hauch); } .balken__wert { fill: var(--blut-hell); }
.balken b { font: 400 .95rem/1 var(--f-text); color: var(--bein-sanft); text-align: right; font-variant-numeric: tabular-nums; }
.titelwolke { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem .6rem; }
.titelwolke li { display: inline-flex; flex-direction: column; padding: .45rem .7rem; border: 1px solid var(--bein-hauch); }
.titelwolke span { font: italic 400 1.02rem/1.2 var(--f-zier); color: var(--bein-sanft); }
.titelwolke small { font: 400 max(.5rem, 11px)/1.6 var(--f-inschr); letter-spacing: .2em; text-transform: uppercase; color: var(--bein-leise); }
.titelwolke li.ist-gehoert { border-color: rgba(200, 26, 28, .65); box-shadow: 0 0 18px rgba(157, 15, 18, .35) inset; }
.titelwolke li.ist-gehoert span { color: var(--bein); }
.anfragen, .laender, .presse, .quellen { list-style: none; margin: 0; padding: 0; }
.anfragen { counter-reset: anfrage; display: grid; gap: .1rem; }
.anfragen li, .laender li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--bein-hauch); font: 400 1.05rem/1.35 var(--f-text); color: var(--bein); }
.anfragen li b, .laender li b { font-weight: 400; color: var(--bein-sanft); font-variant-numeric: tabular-nums; }
.laender li em { color: var(--blut-text); font-style: italic; }
.laender--breit { margin-top: 1.4rem; }
.zwei-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0 2.4rem; }
.presse { display: grid; gap: 1.1rem; }
.presse li { display: flex; flex-direction: column; gap: .3rem; padding-bottom: 1rem; border-bottom: 1px solid var(--bein-hauch); }
.presse a { font: 400 1.18rem/1.35 var(--f-zier); color: var(--bein); text-decoration: none; }
.presse a:hover { color: var(--blut-glut); }
.presse span { font: 400 max(.58rem, 11px)/1.5 var(--f-inschr); letter-spacing: .2em; text-transform: uppercase; color: var(--bein-leise); }
.widerhall__methode p { font: 400 1.06rem/1.66 var(--f-text); color: rgba(243, 238, 230, .8); margin: 0 0 1rem; }
.quellen { display: grid; gap: .5rem; margin-top: 1.4rem; }
.quellen li { font: 400 1rem/1.5 var(--f-text); color: var(--bein-sanft); }
.quellen b { color: var(--bein); font-weight: 500; }
.quellen__stand { font: 400 max(.55rem, 11px)/1 var(--f-inschr); letter-spacing: .18em; text-transform: uppercase; color: var(--bein-leise); white-space: nowrap; }
.quellen__stand.ist-alt { color: var(--fehler); }
@media (max-width: 540px) { .balken li { grid-template-columns: 6.5rem 1fr 3rem; gap: .6rem; } }
@media (prefers-reduced-motion: reduce) { .puls__punkt, .puls__herz.schlaegt { animation: none; } }
@media print { .widerhall__puls, .hall__bild, .puls__bild { break-inside: avoid; } .hall__tip { display: none !important; } }

/* ═══ v3.0/3.01 · MITTLERE MUTTER: DIE GESICHTER DES BUCHES UND DAS LEXIKON ═══ */
.ueber__gesichter { list-style: none; margin: 2rem 0 2.2rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1px;
  background: var(--bein-hauch); border: 1px solid var(--bein-hauch); }
.gesicht { position: relative; display: flex; flex-direction: column; gap: .55rem; padding: 1.25rem 1.2rem 1.1rem; background: #0b0807; transition: background .4s; }
.gesicht:hover { background: linear-gradient(180deg, rgba(157, 15, 18, .16), #0b0807 70%); }
.gesicht__nr { position: absolute; top: 1.1rem; right: 1.1rem; font: 400 max(.62rem, 11px)/1 var(--f-inschr); letter-spacing: .14em; color: var(--bein-leise); }
.gesicht__name { font: 500 max(.66rem, 11px)/1.3 var(--f-inschr); letter-spacing: .26em; text-transform: uppercase; color: var(--blut-text); padding-right: 2.4rem; }
.ueber__text .gesicht__zitat, .gesicht__zitat { font: italic 400 1.14rem/1.42 var(--f-zier); color: var(--bein); flex: 1; }
.gesicht__seite { font: 400 max(.62rem, 11px)/1 var(--f-inschr); letter-spacing: .2em; text-transform: uppercase; color: var(--bein-leise); }
@media (min-width: 900px) { #gesichter, #faces { max-width: 64rem; } #gesichter > .ueber__nr, #gesichter > .ueber__h2, #gesichter .ueber__text > p,
  #faces > .ueber__nr, #faces > .ueber__h2, #faces .ueber__text > p { max-width: 42rem; margin-left: auto; margin-right: auto; } }
@media print { .gesicht { background: none; } }
.ueber__fragenliste { margin: 1.4rem 0 1.8rem; padding: 0; list-style: none; counter-reset: frage; border-top: 1px solid var(--bein-hauch); }
.ueber__fragenliste li { counter-increment: frage; position: relative; padding: .9rem 0 .9rem 3rem; border-bottom: 1px solid var(--bein-hauch);
  font: italic 400 clamp(1.15rem, 2.2vw, 1.32rem)/1.45 var(--f-zier); color: var(--bein); }
.ueber__fragenliste li::before { content: counter(frage, upper-roman); position: absolute; left: 0; top: 1.05rem; width: 2.2rem;
  font: 500 max(.66rem, 11px)/1.4 var(--f-inschr); font-style: normal; letter-spacing: .14em; color: var(--blut-text); }
.ueber__register-lead { font: 400 1.08rem/1.65 var(--f-text); color: var(--bein-sanft); margin: 0 0 1.6rem; }
.ueber__register { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bein-hauch); counter-reset: lemma; }
.ueber__register a { position: relative; display: grid; grid-template-columns: 2.6rem 1fr; gap: .25rem 1rem; padding: 1.2rem 0 1.25rem; border-bottom: 1px solid var(--bein-hauch); text-decoration: none; counter-increment: lemma; }
.ueber__register a::before { content: counter(lemma, upper-roman); grid-row: 1 / 4; font: 400 .7rem/2.4 var(--f-inschr); letter-spacing: .14em; color: var(--blut-text); }
.ueber__register-titel { font: 400 clamp(1.3rem, 2.6vw, 1.65rem)/1.2 var(--f-zier); color: var(--bein); transition: color .3s; }
.ueber__register a:hover .ueber__register-titel, .ueber__register a:focus-visible .ueber__register-titel { color: #fff; }
.ueber__register-glosse { font: italic 400 1rem/1.4 var(--f-zier); color: var(--blut-text); }
.ueber__register-kurz { font: 400 .98rem/1.55 var(--f-text); color: rgba(243, 238, 230, .6); }
.ueber__abschnitt--register .lexikon__maschinen { margin-top: 1.8rem; }
@media (min-width: 900px) { .ueber__abschnitt--register { max-width: 48rem; } }
@media print { .ueber__register a::before { color: #555; } .gesicht { break-inside: avoid; } }

/* ═══ v3.01 · DIE DREI MUTTERN ALS WEGWEISER (Wald, Mitte, Widerhall) ═══ */
.muttern { max-width: 64rem; margin: clamp(4.5rem, 10vw, 7rem) auto 0; padding: 0 var(--rand, 1rem); text-align: center; }
.muttern__titel { font: 500 .7rem/1 var(--f-inschr); letter-spacing: .42em; text-transform: uppercase; color: var(--blut-text); margin: 0 0 1.6rem;
  display: flex; align-items: center; gap: 1rem; }
.muttern__titel::before, .muttern__titel::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(200, 26, 28, .5), transparent); }
.muttern__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.muttern__knopf { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: 1.6rem 1.2rem 1.3rem;
  border: 1px solid rgba(243, 238, 230, .14); border-radius: 3px; text-decoration: none; color: var(--bein);
  background: radial-gradient(120% 90% at 50% 0%, rgba(157, 15, 18, .18), rgba(10, 7, 6, .9) 62%);
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), border-color .4s, box-shadow .45s; }
a.muttern__knopf:hover, a.muttern__knopf:focus-visible { transform: translateY(-4px); border-color: rgba(255, 74, 53, .55); box-shadow: 0 18px 40px -22px rgba(255, 74, 53, .55); outline: none; }
a.muttern__knopf:focus-visible { box-shadow: 0 0 0 2px var(--blut-hell), 0 18px 40px -22px rgba(255, 74, 53, .55); }
.muttern__knopf.ist-hier { border-color: rgba(200, 26, 28, .5); background: radial-gradient(120% 90% at 50% 0%, rgba(200, 26, 28, .28), rgba(10, 7, 6, .95) 62%); }
.muttern__mutter { width: 3.1rem; height: 3.1rem; margin-bottom: .3rem; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
a.muttern__knopf:hover .muttern__mutter, a.muttern__knopf:focus-visible .muttern__mutter { transform: rotate(60deg); }
.muttern__sechseck { fill: rgba(243, 238, 230, .06); stroke: rgba(243, 238, 230, .55); stroke-width: 1.4; stroke-linejoin: round; }
.ist-hier .muttern__sechseck { fill: rgba(200, 26, 28, .22); stroke: #ff4a35; }
.muttern__loch { fill: #0a0706; stroke: rgba(243, 238, 230, .35); stroke-width: 1; }
.muttern__gewinde { fill: none; stroke: rgba(243, 238, 230, .2); stroke-width: .8; stroke-dasharray: 1.5 1.5; }
.muttern__punkte circle { fill: rgba(243, 238, 230, .25); }
.muttern__punkte circle.ist-hier { fill: #ff4a35; }
.muttern__lage { font: 400 max(.62rem, 11px)/1 var(--f-inschr); letter-spacing: .3em; text-transform: uppercase; color: var(--bein-leise); }
.muttern__name { font: 300 clamp(1.45rem, 2.6vw, 1.8rem)/1.1 var(--f-zier); color: var(--bein); }
.muttern__was { font: italic 400 .98rem/1.45 var(--f-zier); color: var(--bein-sanft); max-width: 16rem; flex: 1; }
.muttern__marke { margin-top: .5rem; font: 500 max(.6rem, 11px)/1 var(--f-inschr); letter-spacing: .3em; text-transform: uppercase; color: var(--blut-text); }
.ist-hier .muttern__marke { color: var(--bein); }
@media (max-width: 760px) {
  .muttern__liste { grid-template-columns: 1fr; gap: .7rem; }
  .muttern__knopf { display: grid; grid-template-columns: 3rem 1fr; grid-template-rows: auto auto auto; column-gap: 1rem; row-gap: .25rem; align-items: center; text-align: left; padding: 1.1rem 1.1rem; }
  .muttern__mutter { grid-row: 1 / span 4; width: 2.7rem; height: 2.7rem; margin: 0; }
  .muttern__was { max-width: none; }
  .muttern__marke { grid-column: 2; margin-top: .2rem; }
}
@media (prefers-reduced-motion: reduce) { .muttern__knopf, .muttern__mutter { transition: none; } a.muttern__knopf:hover { transform: none; } a.muttern__knopf:hover .muttern__mutter { transform: none; } }
@media print { .muttern { display: none; } }

/* ═══ v3.01 · WIDERHALL: DAS BUCH IN DER WELT ═══════════════════════════ */
.kacheln { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1px; background: var(--bein-hauch); border: 1px solid var(--bein-hauch); }
.kachel { display: flex; flex-direction: column; gap: .4rem; padding: 1.3rem 1.2rem 1.2rem; background: #0b0807; }
.kachel b { font: 300 clamp(2rem, 4vw, 2.8rem)/1 var(--f-zier); color: var(--bein); font-variant-numeric: tabular-nums; }
.kachel span { font: 500 max(.64rem, 11px)/1.4 var(--f-inschr); letter-spacing: .22em; text-transform: uppercase; color: var(--bein-sanft); }
.kachel small { font: italic 400 .95rem/1.4 var(--f-zier); color: var(--blut-text); }
.kachel--gross b { font-size: clamp(2.6rem, 6vw, 3.8rem); color: #fff; text-shadow: 0 0 28px rgba(255, 74, 53, .35); }
.kacheln--klein { margin-top: 2rem; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.kacheln--klein .kachel b { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.auflage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); gap: 1.6rem; align-items: center; margin: 2.2rem 0 1rem; padding: 1.5rem; border: 1px solid rgba(200, 26, 28, .35);
  background: radial-gradient(90% 120% at 100% 50%, rgba(157, 15, 18, .2), transparent 70%); }
.auflage__zahl { margin: 0; font: 300 clamp(2.6rem, 6vw, 3.6rem)/1 var(--f-zier); color: #fff; }
.auflage__zahl span { font-size: .45em; color: var(--bein-sanft); }
.auflage__was { margin: .5rem 0 0; font: italic 400 1.1rem/1.45 var(--f-zier); color: var(--bein-sanft); }
.auflage__bild { width: 100%; height: auto; }
.auflage__feld { fill: rgba(243, 238, 230, .07); stroke: rgba(243, 238, 230, .14); stroke-width: .5; }
.auflage__feld.ist-vergeben { fill: #c81a1c; stroke: #ff4a35; filter: drop-shadow(0 0 2px rgba(255, 74, 53, .7)); }
.monate__bild { width: 100%; height: 6rem; display: block; margin-top: .4rem; }
.anfragen li.ist-name span { color: var(--bein); }
.anfragen li.ist-name span::before { content: "✦ "; color: var(--blut-text); }
.balken b small { font: 400 .7em/1 var(--f-inschr); color: var(--bein-leise); margin-left: .3em; }
@media (max-width: 640px) { .auflage { grid-template-columns: 1fr; } .auflage__bild { max-width: 15rem; margin: 0 auto; } }

/* ═══ v3.02 · WEGE AM SEITENENDE (niemand muss nach oben scrollen) ═══════ */
.fussweg { max-width: 46rem; margin: clamp(3rem, 7vw, 4.5rem) auto 0; padding: 0 var(--rand, 1rem); display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
.fussweg--innen { margin-top: 1.8rem; padding: 0; }
.fussweg__knopf { display: inline-flex; align-items: center; gap: .1em; min-height: 2.75rem; padding: .7rem 1.2rem; border: 1px solid rgba(243, 238, 230, .22); border-radius: 999px;
  font: 500 max(.64rem, 11px)/1 var(--f-inschr); letter-spacing: .26em; text-transform: uppercase; color: var(--bein-sanft); text-decoration: none; background: rgba(10, 7, 6, .6);
  transition: color .3s, border-color .3s, background .3s, transform .3s; }
.fussweg__knopf:hover, .fussweg__knopf:focus-visible { color: var(--bein); border-color: rgba(255, 74, 53, .6); background: rgba(157, 15, 18, .18); transform: translateY(-2px); outline: none; }
.fussweg__knopf:focus-visible { box-shadow: 0 0 0 2px var(--blut-hell); }
.fussweg__knopf span { color: var(--blut-text); }
.fussweg__knopf--heim { color: var(--bein); border-color: rgba(200, 26, 28, .45); }
@media (prefers-reduced-motion: reduce) { .fussweg__knopf { transition: none; } .fussweg__knopf:hover { transform: none; } }
@media print { .fussweg { display: none; } }
/* v3.02 · ein einzelner, herausgehobener Satz aus dem Buch */
.ueber__text .ueber__satz { margin: 1.4rem 0 1.5rem; padding: .2rem 0 .2rem 1.2rem; border-left: 2px solid var(--blut-hell); font: italic 400 clamp(1.25rem, 2.4vw, 1.5rem)/1.4 var(--f-zier); color: var(--bein); }

/* ═══ v3.03 · Die Narrenbibel, seziert: Befund, Belege, Kacheln, Taktschema, Tabelle ═══
   Jede Überschrift eine Behauptung, darunter der Befund; wer überfliegt, liest diese beiden
   (Layer-Cake-Lesen), wer bleibt, findet darunter die Belege. Listen bleiben Listen (ul/ol),
   damit Vorleseprogramme die Anzahl ansagen und das Markdown sie als Aufzählung übernimmt. */
.ueber__text .ueber__befund { margin: 0 0 2rem; padding: 1.15rem 1.3rem 1.2rem 1.4rem; font: italic 400 clamp(1.2rem, 2.4vw, 1.4rem)/1.5 var(--f-zier); color: var(--bein); background: linear-gradient(90deg, rgba(157, 15, 18, .17), rgba(157, 15, 18, 0) 88%); border-left: 2px solid var(--blut-hell); }
.ueber__text .ueber__befund b { display: block; margin-bottom: .65rem; font: normal 500 max(.62rem, 11px)/1 var(--f-inschr); letter-spacing: .34em; text-transform: uppercase; color: var(--blut-text); }
.ueber__seite { white-space: nowrap; margin-left: .2em; font: 500 max(.6rem, 11px)/1 var(--f-inschr); font-style: normal; letter-spacing: .14em; color: var(--blut-text); vertical-align: .14em; }
.ueber__text :is(.ueber__mosaik, .ueber__haken, .ueber__werkstatt, .ueber__register-sprachen, .ueber__zahlen, .ueber__bauplaene, .ueber__stimmen, .ueber__bahn, .ueber__griffe, .ueber__echo, .ueber__felder, .ueber__thesen, .ueber__ahnen, .ueber__urteil) { list-style: none; margin: 1.6rem 0 2.3rem; padding: 0; }
.ueber__text :is(.ueber__mosaik, .ueber__haken, .ueber__werkstatt, .ueber__register-sprachen, .ueber__zahlen, .ueber__bauplaene, .ueber__stimmen, .ueber__bahn, .ueber__griffe, .ueber__echo, .ueber__felder, .ueber__thesen, .ueber__ahnen, .ueber__urteil) li { font: 400 1.08rem/1.6 var(--f-text); color: rgba(243, 238, 230, .86); }
.ueber__text :is(.ueber__mosaik, .ueber__haken, .ueber__werkstatt, .ueber__register-sprachen, .ueber__zahlen, .ueber__bauplaene, .ueber__stimmen, .ueber__bahn, .ueber__griffe, .ueber__felder, .ueber__thesen, .ueber__ahnen, .ueber__urteil) li > b:first-child { display: block; margin-bottom: .45rem; font: 500 max(.66rem, 11px)/1.35 var(--f-inschr); letter-spacing: .24em; text-transform: uppercase; color: var(--blut-text); }
.ueber__text :is(.ueber__mosaik, .ueber__werkstatt, .ueber__stimmen, .ueber__echo, .ueber__thesen) li > i { display: block; margin-top: .5rem; font: italic 400 1rem/1.45 var(--f-zier); color: var(--bein-sanft); }
/* Dreizehn Gattungen, acht Werkstätten, sechs Stimmen: Karten */
.ueber__text :is(.ueber__mosaik, .ueber__stimmen) { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: .75rem; }
.ueber__text :is(.ueber__mosaik, .ueber__stimmen) li { padding: 1rem 1.05rem 1.05rem; border: 1px solid var(--bein-hauch); border-radius: 2px; background: rgba(13, 9, 8, .62); transition: border-color .35s ease, background-color .35s ease; }
.ueber__text :is(.ueber__mosaik, .ueber__stimmen) li:hover { border-color: rgba(200, 26, 28, .5); background: rgba(40, 8, 8, .5); }
.ueber__text .ueber__stimmen li { font: italic 400 1.14rem/1.45 var(--f-zier); color: var(--bein); }
.ueber__text .ueber__werkstatt { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .75rem; }
.ueber__text .ueber__werkstatt li { padding: 1.05rem 1.1rem 1.1rem; border-top: 2px solid var(--blut); background: linear-gradient(180deg, rgba(75, 5, 6, .3), rgba(13, 9, 8, .35)); font: 400 1.22rem/1.5 var(--f-zier); color: var(--bein); }
/* Vierzehn Häkchen */
.ueber__text .ueber__haken { counter-reset: haken; }
.ueber__text .ueber__haken li { counter-increment: haken; position: relative; padding: .95rem 0 .95rem 3.5rem; border-bottom: 1px solid var(--bein-hauch); }
.ueber__text .ueber__haken li:first-child { border-top: 1px solid var(--bein-hauch); }
.ueber__text .ueber__haken li::before { content: counter(haken); position: absolute; left: 0; top: 1rem; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border: 1px solid var(--blut-hell); border-radius: 50%; font: 400 .82rem/1 var(--f-deko); color: var(--blut-text); }
.ueber__text .ueber__haken li::after { content: "✓"; position: absolute; left: 1.6rem; top: .62rem; font: 700 1rem/1 var(--f-text); color: var(--bein); text-shadow: 0 0 10px rgba(255, 74, 53, .75); }
.ueber__text .ueber__haken li > b:first-child { display: inline; margin: 0 .25em 0 0; font: 500 1.08rem/1.5 var(--f-text); letter-spacing: 0; text-transform: none; color: var(--bein); }
/* Zeilen mit Etikett links: Register, Baupläne, Griffe, Felder, Urteil */
.ueber__text :is(.ueber__register-sprachen, .ueber__bauplaene, .ueber__griffe, .ueber__felder, .ueber__urteil) li { position: relative; padding: .85rem 0 .85rem 9.6rem; border-bottom: 1px solid var(--bein-hauch); }
.ueber__text :is(.ueber__register-sprachen, .ueber__bauplaene, .ueber__griffe, .ueber__felder, .ueber__urteil) li:first-child { border-top: 1px solid var(--bein-hauch); }
.ueber__text :is(.ueber__register-sprachen, .ueber__bauplaene, .ueber__griffe, .ueber__felder, .ueber__urteil) li > b:first-child { position: absolute; left: 0; top: 1.22rem; width: 8.5rem; margin: 0; }
.ueber__text .ueber__felder li { font-variant-numeric: lining-nums; }
.ueber__text .ueber__urteil li { padding-left: 8.2rem; font-size: 1.12rem; }
.ueber__text .ueber__urteil li > b:first-child { top: .95rem; width: 7.4rem; font: 400 1.35rem/1.2 var(--f-zier); letter-spacing: 0; text-transform: none; color: var(--bein); }
/* Zahlen als Kacheln */
.ueber__text .ueber__zahlen { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.6rem, 1fr)); gap: 1px; padding: 1px; }
.ueber__text .ueber__zahlen li { padding: 1.1rem 1rem 1rem; background: var(--nacht); outline: 1px solid var(--bein-hauch); font: 400 .94rem/1.35 var(--f-text); color: var(--bein-sanft); }
.ueber__text .ueber__zahlen li > b:first-child { margin-bottom: .45rem; font: 300 clamp(2rem, 4.6vw, 2.6rem)/1 var(--f-zier); letter-spacing: 0; text-transform: none; color: var(--bein); font-variant-numeric: lining-nums tabular-nums; }
/* Kasten (Feuerkeimer, Schweizer Achse) */
.ueber__kasten { margin: 2.2rem 0; padding: 1.4rem 1.4rem .35rem; border: 1px solid rgba(200, 26, 28, .38); background: radial-gradient(120% 140% at 0 0, rgba(157, 15, 18, .2), transparent 62%); }
.ueber__text .ueber__kasten h3 { margin-top: 0; }
/* Zwei Kehrverse im Taktschema */
.ueber__metrum { margin: 1.8rem 0 2.2rem; padding: 1.7rem 1rem; text-align: center; border-top: 1px solid rgba(200, 26, 28, .4); border-bottom: 1px solid rgba(200, 26, 28, .4); }
.ueber__text .metrum__zeile { margin: 0; font: 400 clamp(1.65rem, 4.6vw, 2.5rem)/1.2 var(--f-zier); letter-spacing: .02em; color: var(--bein-leise); }
.metrum__zeile .hebung { font-weight: 600; color: var(--bein); text-shadow: 0 0 18px rgba(255, 74, 53, .5); }
.metrum__zeile--weise .hebung { color: var(--blut-text); }
.ueber__text .metrum__mass { margin: .55rem 0 1.5rem; font: 400 .74rem/1.6 var(--f-inschr); letter-spacing: .2em; color: var(--bein-leise); }
.ueber__text .metrum__mass:last-child { margin-bottom: 0; }
/* Der Weg des Lesers */
.ueber__text .ueber__bahn { position: relative; padding-left: 1.7rem; }
.ueber__text .ueber__bahn::before { content: ""; position: absolute; left: .34rem; top: .5rem; bottom: .6rem; width: 1px; background: linear-gradient(180deg, var(--blut-hell), rgba(200, 26, 28, .08)); }
.ueber__text .ueber__bahn li { position: relative; padding: .5rem 0 .95rem; font: italic 400 1.24rem/1.4 var(--f-zier); color: var(--bein); }
.ueber__text .ueber__bahn li::before { content: ""; position: absolute; left: -1.7rem; top: .62rem; width: .72rem; height: .72rem; border-radius: 50%; background: var(--nacht); border: 1px solid var(--blut-hell); box-shadow: 0 0 10px rgba(255, 74, 53, .55); }
.ueber__text .ueber__bahn li > b:first-child { font-style: normal; margin-bottom: .3rem; }
.ueber__text .ueber__bahn .ueber__seite { display: none; }
/* Wiederkehr: links das erste Mal, rechts das zweite */
.ueber__text .ueber__echo li { display: grid; grid-template-columns: 1fr auto 1fr; gap: .3rem 1rem; align-items: start; padding: 1.1rem 0; border-bottom: 1px solid var(--bein-hauch); }
.ueber__text .ueber__echo li:first-child { border-top: 1px solid var(--bein-hauch); }
.ueber__text .ueber__echo li > span { font: italic 400 1.1rem/1.45 var(--f-zier); color: var(--bein); }
.ueber__text .ueber__echo li > b { font: 400 1.3rem/1.15 var(--f-text); color: var(--blut-text); }
.ueber__text .ueber__echo li > i { grid-column: 1 / -1; margin-top: .2rem; }
/* Dreizehn Thesen, neun Ahnen */
.ueber__text :is(.ueber__thesen, .ueber__ahnen) { display: grid; gap: .7rem; }
.ueber__text .ueber__thesen { counter-reset: these; }
.ueber__text .ueber__thesen li { counter-increment: these; position: relative; padding: 1rem 1.1rem 1.05rem 3.7rem; border: 1px solid var(--bein-hauch); background: rgba(13, 9, 8, .55); }
.ueber__text .ueber__thesen li::before { content: counter(these, upper-roman); position: absolute; left: 1rem; top: 1.08rem; width: 2.2rem; font: 400 .86rem/1 var(--f-deko); color: var(--blut-text); }
.ueber__text .ueber__thesen li > b:first-child { font: 400 1.32rem/1.2 var(--f-zier); letter-spacing: 0; text-transform: none; color: var(--bein); margin-bottom: .35rem; }
.ueber__text .ueber__ahnen { counter-reset: ahn; gap: 0; }
.ueber__text .ueber__ahnen li { counter-increment: ahn; position: relative; padding: .9rem 0 .95rem 3rem; border-bottom: 1px solid var(--bein-hauch); }
.ueber__text .ueber__ahnen li::before { content: counter(ahn); position: absolute; left: 0; top: .82rem; font: 300 1.9rem/1 var(--f-zier); color: rgba(226, 71, 61, .7); }
/* Ein Gesetz, sechs Ebenen */
.ueber__matrix-rahmen { margin: 1.8rem 0 2.2rem; overflow-x: auto; border: 1px solid var(--bein-hauch); background: rgba(13, 9, 8, .5); -webkit-overflow-scrolling: touch; }
.ueber__matrix-rahmen:focus-visible { outline: 2px solid var(--blut-hell); outline-offset: 3px; }
.ueber__matrix { width: 100%; min-width: 37rem; border-collapse: collapse; font: 400 1rem/1.45 var(--f-text); color: rgba(243, 238, 230, .86); }
.ueber__matrix th, .ueber__matrix td { padding: .8rem .9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--bein-hauch); }
.ueber__matrix thead th { font: 500 max(.6rem, 11px)/1.4 var(--f-inschr); letter-spacing: .22em; text-transform: uppercase; color: var(--blut-text); background: rgba(157, 15, 18, .14); }
.ueber__matrix tbody th { font: 400 1.18rem/1.3 var(--f-zier); color: var(--bein); white-space: nowrap; }
.ueber__matrix tbody tr:last-child > * { border-bottom: 0; }
.ueber__matrix tbody tr:hover > * { background: rgba(157, 15, 18, .08); }
.ueber__text .ueber__quellen { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--bein-hauch); font-size: .92rem; line-height: 1.6; color: var(--bein-leise); }
@media (max-width: 600px) {
  .ueber__text :is(.ueber__register-sprachen, .ueber__bauplaene, .ueber__griffe, .ueber__felder, .ueber__urteil) li { padding-left: 0; }
  .ueber__text :is(.ueber__register-sprachen, .ueber__bauplaene, .ueber__griffe, .ueber__felder, .ueber__urteil) li > b:first-child { position: static; width: auto; margin-bottom: .3rem; }
  .ueber__text .ueber__echo li { grid-template-columns: 1fr; }
  .ueber__text .ueber__echo li > b { transform: rotate(90deg); justify-self: start; margin-left: .3rem; }
  .ueber__text .ueber__thesen li { padding-left: 1.1rem; padding-top: 2.4rem; }
  .ueber__text .ueber__thesen li::before { top: 1rem; left: 1.1rem; }
}
@media print {
  .ueber__text :is(.ueber__mosaik, .ueber__stimmen, .ueber__werkstatt, .ueber__thesen, .ueber__zahlen) li, .ueber__kasten, .ueber__text .ueber__befund, .ueber__matrix-rahmen { background: none !important; box-shadow: none !important; }
  .ueber__text :is(.ueber__mosaik, .ueber__stimmen, .ueber__werkstatt, .ueber__thesen, .ueber__echo, .ueber__haken) li, .ueber__kasten, .ueber__metrum, .ueber__matrix { break-inside: avoid; }
  .ueber__seite, .ueber__text li > b:first-child, .ueber__haken li::before, .ueber__thesen li::before, .ueber__ahnen li::before { color: #7a0d10 !important; }
  .ueber__matrix-rahmen { overflow: visible; }
  .ueber__matrix { min-width: 0; }
}
/* v3.03 · Auf dem Telefon wird die Tabelle zu sechs Karten: Ebene als Titel, die drei Grundsätze als beschriftete Zeilen */
@media (max-width: 600px) {
  .ueber__matrix-rahmen { overflow: visible; border: 0; background: none; }
  .ueber__matrix, .ueber__matrix tbody, .ueber__matrix tr, .ueber__matrix th, .ueber__matrix td { display: block; min-width: 0; width: auto; }
  .ueber__matrix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ueber__matrix tbody tr { margin: 0 0 .7rem; border: 1px solid var(--bein-hauch); background: rgba(13, 9, 8, .55); }
  .ueber__matrix tbody th { padding: .8rem .9rem .3rem; border: 0; }
  .ueber__matrix td { padding: .45rem .9rem .55rem; border: 0; border-top: 1px solid var(--bein-hauch); }
  .ueber__matrix td::before { content: attr(data-label); display: block; margin-bottom: .2rem; font: 500 max(.58rem, 11px)/1.3 var(--f-inschr); letter-spacing: .2em; text-transform: uppercase; color: var(--blut-text); }
  .ueber__matrix tbody tr:hover > * { background: none; }
}

/* ═══ v3.05 · Der Wald im Bild, organisch (app/views/wald_netz.php, assets/js/wald.js) ═══
   Äste und Stämme sind Flächen, die sich verjüngen (breit am Ursprung, schmal am Zweig) – wie im alten Bild. Das SVG
   füllt die Breite der Bühne; es wird höher, wenn der Wald wächst, statt kleiner. Auf schmalen Schirmen schiebt man. */
.netzbild { max-width: min(92rem, 100%); }
.netzbild__buehne { text-align: center; }
.netz { display: block; width: 100%; max-width: none; max-height: none; height: auto; min-width: 0; margin: 0 auto; }
.zw { stroke: none; transition: opacity .35s ease; }
.faden { fill: none; stroke-linecap: round; stroke-linejoin: round; transition: opacity .35s ease; }
.stamm { fill: url(#nzHolz); opacity: .62; }
.ast--inspiration { fill: #c81a1c; opacity: .88; }
.ast--reaktion { fill: #f3eee6; opacity: .56; }
.ast--thematik { fill: #f3eee6; opacity: .26; }
.ast--fassung { fill: #e9c9a0; opacity: .66; }
.netz__wurzelwerk { fill: #b8231f; opacity: .34; }
.netz__erde { stroke: rgba(243, 238, 230, .2); stroke-width: 1; }
.faden { stroke: #f3eee6; stroke-width: 1.1; stroke-dasharray: 1.4 4.2; opacity: .3; }
.faden--inspiration { stroke: #e2473d; }
.faden--boden { stroke: #e9c9a0; opacity: .5; stroke-width: 1.4; stroke-dasharray: 2 4; }
.netzbild__legende .faden { stroke-width: 1.4; opacity: .7; }
.kn__name { font-size: 14px; }
.netz.ist-fokus .zw, .netz.ist-fokus .faden { opacity: .07; }
.netz.ist-fokus .zw.ist-nah { opacity: 1; }
.netz.ist-fokus .faden.ist-nah { opacity: .95; stroke-width: 1.6; }
.kn__glut { animation: none; opacity: .85; }
/* Der Trieb: während ein Ast wächst, schiebt sich ein Strich vor (stroke-dashoffset, billig zu malen); ist er
   angekommen, wird er zum Ast, der dicker wird – erst Längen-, dann Dickenwachstum wie bei Pflanzen. */
.zw-trieb { fill: none; stroke: #e8dccb; stroke-linecap: round; opacity: .8; pointer-events: none; }
.zw-trieb.ast--inspiration { stroke: #d42a24; }
.zw-trieb.ast--thematik { stroke: #8f877e; }
.zw-trieb.ast--fassung { stroke: #e9c9a0; }
.zw-trieb.stamm { stroke: #c79b8a; }
.netz-trieb { position: absolute; z-index: 1; pointer-events: none; overflow: visible; will-change: transform; }
.kn-knospe { fill: #070505; stroke: #f3eee6; stroke-width: 1.3; }
.kn-knospe--werk { fill: #f3eee6; stroke: #070505; }
.netz.vor-wachsen .netz__erde-g, .netz.vor-wachsen .netz__boden { opacity: 0; transition: opacity 1s ease-out; }
.netz.vor-wachsen.ist-boden .netz__erde-g, .netz.vor-wachsen.ist-boden .netz__boden { opacity: 1; }
/* Wachsen: bis zu seinem Augenblick ist alles unsichtbar; dann treibt der Strich, der Knoten geht auf, der Name erscheint */
.netz.vor-wachsen .zw:not(.ist-auf), .netz.vor-wachsen .faden:not(.ist-auf) { visibility: hidden; }
.netz.vor-wachsen .kn:not(.ist-auf) { opacity: 0; }
.netz.vor-wachsen .kn:not(.ist-auf) .kn__form { transform: scale(.12); }
.netz.vor-wachsen .kn:not(.ist-auf) .kn__name, .netz.vor-wachsen .kn:not(.ist-auf) .kn__glut { opacity: 0; }
.netz.waechst .kn, .netz.waechst .kn .kn__form, .netz.waechst .kn .kn__name, .netz.waechst .kn .kn__glut, .netz.waechst .zw, .netz.waechst .faden { transition: none; }   /* v3.05 · bewegt wird nur auf der Ebene darüber */
/* Ferne und Nähe */
.netzbild.ist-fern .kn:not(.kn--wichtig) .kn__name { display: none; }
.netzbild__lupe { display: block; margin: 0 auto .7rem; padding: .45rem .95rem; border: 1px solid rgba(243, 238, 230, .24); background: rgba(7, 5, 5, .6);
  color: var(--bein-sanft); font: 500 max(.62rem, 11px)/1 var(--f-inschr); letter-spacing: .22em; text-transform: uppercase; cursor: pointer; transition: color .25s, border-color .25s; }
.netzbild__lupe:hover, .netzbild__lupe:focus-visible { color: var(--bein); border-color: rgba(243, 238, 230, .55); }
.netzbild__lupe[hidden] { display: none; }
.netzbild.ist-nah .netzbild__buehne { overflow: auto; max-height: 84svh; text-align: left; overscroll-behavior: contain; }
.netzbild.ist-nah .netz { width: auto; max-width: none; max-height: none; }
.netzbild__k-aus { margin-top: .5rem !important; font: italic 400 .98rem/1.4 var(--f-zier); color: var(--bein-sanft); }
/* Liste, Seiten, Formular */
.same-zeile__aus { grid-column: 1; font: italic 400 .98rem/1.4 var(--f-zier); color: var(--blut-text); }
.wald__blaettern { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin: 2.4rem 0 0; }
.wald__h2 span { font: 400 max(.62rem, 11px)/1 var(--f-inschr); letter-spacing: .22em; color: var(--bein-leise); vertical-align: middle; margin-left: .6rem; }
.same__wachsen { margin: 2rem 0 0; }
.wald-form__auch { margin: 1rem 0 .4rem; font: italic 400 1rem/1.4 var(--f-text); color: var(--bein-leise); }
.wald-form--saat:has(input[name="woraus"][value="wurzel"]:checked) .wald-form__wurzeln { display: none; }
@media print { .netzbild__lupe { display: none !important; } .netz .zw { fill: #555 !important; } .netz .ast--inspiration { fill: #9d0f12 !important; } .netzbild .zw, .netzbild .faden { visibility: visible !important; } }
@media (forced-colors: active) { .zw { fill: CanvasText; } .faden { stroke: CanvasText; } }
/* v3.04 · was Menschen wirklich eintragen: lange Wörter, lange Titel, zwei Zahlen in einer Zeile */
.wurzel__titel, .same-zeile__titel, .same__titel, .netzbild__k-titel { overflow-wrap: anywhere; hyphens: auto; }
.wurzel__zahl { line-height: 1.7; }
/* ═══ v3.05 · Unterstützen (ganz unten auf der Startseite) ═══ */
.gabe { margin-top: clamp(3rem, 8vh, 5.5rem); padding-bottom: clamp(2.5rem, 6vh, 4rem); text-align: center; }
.gabe__innen { max-width: 34rem; margin: 0 auto; padding: 0 var(--rand); }
.gabe__innen::before { content: ""; display: block; width: 1px; height: 3rem; margin: 0 auto 1.8rem; background: linear-gradient(transparent, rgba(226, 71, 61, .55)); }
.gabe__titel { margin: 0; font: 400 clamp(1.5rem, 1.15rem + 1.3vw, 2.2rem)/1.2 var(--f-zier); color: var(--bein); letter-spacing: .01em; text-wrap: balance; }
.gabe__text { margin: 1rem auto 0; color: var(--bein-sanft); text-wrap: pretty; }
.gabe__weg { margin: 1.7rem 0 0; }
.gabe__knopf { display: inline-flex; align-items: center; gap: .5rem; }
.gabe__hinweis { margin: 1.1rem auto 0; font: italic 400 .95rem/1.5 var(--f-text); color: var(--bein-leise); }
@media print { .gabe { display: none !important; } }
/* ═══ v3.05 · Auf jedem Schirm: Schrift nie unter 11 px, Ziele mindestens 24 px hoch (WCAG 2.2, 2.5.8) ═══
   Die Ziele werden mit Innenabstand und gleich grossem negativem Aussenabstand vergrössert – nichts verschiebt sich. */
.leiste__marke { padding-block: .35rem; margin-block: -.35rem; }
.leiste__sprache { display: inline-block; min-width: 1.75rem; text-align: center; }
.wald-leiste a, .ueber__krumen a { display: inline-block; padding-block: .5rem; margin-block: -.5rem; }
.zurueck { padding-block: .5rem; margin-top: -.5rem; margin-bottom: 1.3rem; }
.widerhall__tabelle summary, .lemma__zitieren summary { padding-block: .45rem; }
.widerhall__tabelle table { display: block; max-width: 100%; width: max-content; overflow-x: auto; }
@media (max-width: 420px) { .widerhall__tabelle th, .widerhall__tabelle td { padding: .3rem .45rem; } .widerhall__tabelle table { font-size: .92rem; } }
/* Die Leiste über Wald, Mitte und Lexikon: auf schmalen Schirmen enger gesperrt und, wenn nötig, zweizeilig – nie breiter als der Schirm */
@media (max-width: 640px) {
  .wald-leiste { flex-wrap: wrap; row-gap: .55rem; column-gap: 1.1rem; letter-spacing: .14em; white-space: normal; text-align: center; padding-inline: max(.8rem, var(--rand)); }
  .wald-leiste a { max-width: 100%; }
}
@media (max-width: 380px) { .wald-leiste { letter-spacing: .1em; column-gap: .8rem; } }
/* Zeilen brechen ausgewogen um: keine einzelnen Wörter in der letzten Zeile von Titeln und Zeilen in Versalien */
h1, h2, h3, h4, .kapitel__titel, .wald__kicker, .kicker, [class$="__kicker"], [class*="__kicker "], .fuss__marke, .gabe__hinweis, .netzbild__legende p { text-wrap: balance; }
p, li, dd, figcaption { text-wrap: pretty; }
.ueber__kicker, .wald__kicker, .lexikon__kicker { line-height: 1.6; }
/* Telefone quer und andere niedrige Schirme: das Buch samt Dreieck passt ganz in die Höhe */
@media (max-height: 560px) and (orientation: landscape) {
  .auftakt__buehne { --b: clamp(76px, (100vh - 9rem) / 2.6, 170px); padding-top: calc(var(--leiste-h) + .4rem); padding-bottom: 3.2rem; }
  .auftakt__titel { font-size: clamp(2rem, 1.2rem + 3vw, 3rem); }
}
@supports (height: 100svh) { @media (max-height: 560px) and (orientation: landscape) { .auftakt__buehne { --b: clamp(76px, (100svh - 9rem) / 2.6, 170px); } } }
/* v3.05 · Der leere Wald lädt ein, statt leer zu sein */
.netz__leer text { font: italic 400 21px/1 var(--f-text); fill: rgba(243, 238, 230, .72); }
.netz__leer .netz__leer-weg { font: 400 12px/1 var(--f-inschr); letter-spacing: .26em; text-transform: uppercase; fill: #e2473d; }
.netz__leer:hover text, .netz__leer:focus-visible text { fill: #f3eee6; }
.netz__leer:focus-visible { outline: none; } .netz__leer:focus-visible .netz__leer-weg { text-decoration: underline; }