/* Maxim Matthew Block · gebaut aus quellen/grundlage.css, blog-uebersicht.css, podcast.css und artikel.css.
   Nicht von Hand ändern: in den Quellen ändern, dann baue_block_theme.py. */
:root {
  color-scheme: dark;
  --night: #070706;
  --coal: #0d0d0c;
  --surface: #131310;
  --ivory: #f0ece2;
  --ivory-dim: #c9c2b4;
  /* Reader der Companion App und Storybook-Umschlag (Visual Storybook, Audit 21.10.2026) */
  --reader-papier: #fbf6ec; --reader-tinte: #221c15; --reader-leise: #6e6353; --reader-gold: #957025; --reader-falz: #ece4d3;
  --umschlag: #161512; --umschlag-licht: #1d1b17; --umschlag-tief: #0f0e0c; --ivory-hell: #ddd7ca;
  --paper: #fbf9f5;
  --paper-soft: #f3efe6;
  --ink: #211f1b;
  --ink-dim: #5d574e;
  --paper-rule: rgba(33, 31, 27, .2);
  --gold: #ddb880;
  --gold-bright: #d4b483;
  --gold-tinte: #8a6631; /* Gold als Schrift und Linie auf Papier (Wert der Buch-Meilensteine, 4,96:1 auf paper, 4,55:1 auf paper-soft); --mb-gold-ink ist derselbe Wert */
  --schatten-papier: 0 22px 44px -14px rgba(33, 31, 27, .4); /* Bild-/Cover-Schatten auf Papier */
  --rule: rgba(221, 184, 128, .3);
  --phase-outline: #f3c77a;
  --phase-rohfassung: #e9a63f;
  --phase-lektorat: #d9822b;
  --phase-ueberarbeitung: #b4661c;
  --phase-lektorat-2: #8a4e14;
  --phase-finale: #5e360d;
  --progress-track: #e4dccb;
  --font-author: Newsreader, Georgia, "Times New Roman", serif;
  --font-world: Cinzel, Georgia, "Times New Roman", serif;
  --font-ui: Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --shell: min(84rem, calc(100vw - 6rem));
  --wide-block: min(72rem, calc(100vw - 4rem));
  --ease: cubic-bezier(.16, 1, .3, 1);
  /* Deckkraftstufen: Nacht und Gold in den Stufen, die mehrfach vorkommen */
  --night-50: rgba(7, 7, 6, .5);
  --night-55: rgba(7, 7, 6, .55);
  --night-82: rgba(7, 7, 6, .82);
  --night-88: rgba(7, 7, 6, .88);
  --night-90: rgba(7, 7, 6, .9);
  --gold-10: rgba(221, 184, 128, .1);
  --gold-55: rgba(221, 184, 128, .55);
  --gold-bright-75: rgba(212, 180, 131, .75);
  --paper-white: #fff;
  --fehlerrot: #e39a86;
  --fehlerrot-papier: #9a4a36; /* Fehler auf Papier (Veranstalterseite); BU4u 5a */
  --feld-rand: var(--gold-55); /* Rand aller Felder auf Nacht, 3,8:1 (Maxim 06.10.2026, 16:41) */
  --haarlinie: 1px solid var(--rule);
  --haarlinie-papier: 1px solid var(--paper-rule); /* Gegenstück auf Papier (extract 07.10.2026) */
  --ziel: 44px; /* kleinste Tippfläche */
  --fokus: 1px solid var(--ivory); /* Maxim 05.10.2026: ein Pixel Elfenbein reicht, 2px Gold war zu fett */
  /* Schriftstufen: Etikett (Cinzel, Versalien), Knopf, Fließtext der Oberfläche, Meta, Lesetext */
  --type-label: 600 12px/1.3 var(--font-world);
  --track-label: .1em;
  --type-button: 600 12px/1 var(--font-world);
  --track-button: .08em;
  --type-ui: 400 16px/1.6 var(--font-ui);
  --type-meta: 500 13px/1.4 var(--font-ui);
  --type-meta-sm: 500 12px/1.4 var(--font-ui);
  --type-prose: 400 19px/1.72 var(--font-author);
}

/* W5 · Bücher: Daten aus neverland-books, Gestaltung ausschließlich im Theme.
   Design-Richtung: Literarische Ausgabe (impeccable-literary-edition / 2026-08-27) */
.mm-buecher { background:var(--paper); color:var(--ink); }

/* --- 1. Kopfbereich (Nacht --night) --- */
.buch-kopf { background:var(--night); color:var(--ivory); padding:clamp(3.5rem,7vw,7rem) 0 0; position:relative; }
.buch-kopf { margin-top:calc(-1 * var(--kopf-hoehe)); padding-top:calc(var(--kopf-hoehe) + clamp(2rem,3.6vw,3.75rem)); }
.buch-kopf-innen { width:var(--wide-block); margin-inline:auto; display:grid; grid-template-columns:minmax(14rem,23rem) minmax(0,1fr); gap:clamp(2.5rem,5vw,6rem); align-items:start; }
.buch-cover-rahmen { position:relative; max-width:380px; margin:0 auto; }
.buch-cover-rahmen img { display:block; width:100%; height:auto; border-radius:2px; filter:drop-shadow(-12px 24px 28px rgba(0,0,0,.58)) drop-shadow(0 4px 10px rgba(0,0,0,.34)); }
.buch-kicker { color:var(--gold-bright); font:var(--type-label); letter-spacing:var(--track-label); text-transform:uppercase; margin:0 0 .75rem; }
.buch-titel { margin:0 0 .5rem; font:400 clamp(2.6rem,5vw,4.6rem)/1.02 var(--font-author); color:var(--ivory); letter-spacing:-.03em; text-wrap:balance; }
.buch-untertitel { margin:0 0 1.25rem; color:var(--gold-bright); font:600 13px/1.4 var(--font-world); letter-spacing:.08em; text-transform:uppercase; }
.buch-hook-zitat { margin:0 0 1.75rem; padding:0 0 0 1.25rem; border-left:2px solid var(--gold); font:italic 400 clamp(1.1rem,1.8vw,1.35rem)/1.55 var(--font-author); color:var(--ivory); }
.buch-hook-zitat p { margin:0; }

.buch-meta-doppel { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1.25rem 2rem; padding:1.25rem 0; border-top:var(--haarlinie); border-bottom:var(--haarlinie); margin-bottom:2rem; }
.buch-meta-hervor { display:block; font:var(--type-label); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ivory); }
.buch-meta-leise { display:block; font:var(--type-meta); color:var(--ivory-dim); margin-top:.25rem; }

.buch-ausgaben-kacheln { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:.75rem; margin-bottom:2rem; }
.buch-ausgabe-kachel { padding:1rem .85rem; border:var(--haarlinie); background:rgba(255,255,255,.02); display:flex; flex-direction:column; gap:.3rem; transition:border-color .2s; }
.buch-ausgabe-kachel:hover { border-color:var(--gold-bright); }
.buch-kachel-format { font:600 12px/1 var(--font-world); letter-spacing:.06em; text-transform:uppercase; color:var(--ivory); }
.buch-kachel-termin { font:500 12px/1.3 var(--font-ui); color:var(--ivory-dim); }
.buch-kachel-preis { font:600 13px/1 var(--font-ui); color:var(--gold-bright); margin-top:.2rem; }
.buch-kachel-sprecher { font:400 11px/1.2 var(--font-ui); color:var(--ivory-dim); font-style:italic; margin-top:.2rem; }

.buch-buybox { margin:1.5rem 0 2rem; padding:1.5rem; background:var(--surface); border:var(--haarlinie); }
.buch-buybox-status-text { margin:0 0 1rem; font:500 14px/1.4 var(--font-ui); color:var(--ivory-dim); }
.buch-buybox-hinweis { margin:0 0 1rem; font:500 14px/1.4 var(--font-ui); color:var(--ivory); }
.buch-buybox-sub { margin:.75rem 0 0; font:var(--type-meta-sm); color:var(--ivory-dim); }

.buch-kopf-fuss-leiste { width:100%; border-top:var(--haarlinie); margin-top:3rem; background:rgba(0,0,0,.25); }
.buch-kopf-fuss-innen { width:var(--wide-block); margin-inline:auto; padding:1.25rem 0; }
.buch-ausgaben-anzahl { font:var(--type-label); letter-spacing:var(--track-label); line-height:1; text-transform:uppercase; color:var(--ivory-dim); }

/* --- W5 · Abgenommener Buch-Hero 03.10.2026: Motiv optional, Ausgabe kompakt --- */
.buch-kopf { overflow:hidden; }
.buch-kopf::before { content:""; position:absolute; inset:0; pointer-events:none; }
.buch-kopf-mit-motiv::before { background-image:linear-gradient(90deg,rgba(7,7,6,.86) 0%,rgba(7,7,6,.66) 52%,var(--night-88) 100%),var(--buch-hero-bild); background-size:cover; background-position:center; opacity:.58; }
.buch-kopf-ohne-motiv::before { background:var(--night); }
.buch-kopf-innen { position:relative; z-index:1; grid-template-columns:minmax(15rem,22rem) minmax(20rem,1fr) minmax(17rem,21rem); gap:clamp(2rem,4vw,4.5rem); align-items:center; }
.buch-kopf-cover { grid-column:1; }
.buch-kopf-copy { grid-column:2; min-width:0; }
.buch-kopf-aktion { grid-column:3; min-width:0; }
.buch-autor { margin:1.2rem 0 0; color:var(--ivory-dim); font:var(--type-meta); }
.buch-genre-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem; margin:1.25rem auto 0; }
.buch-genre-chip { padding:.35rem .65rem; border:var(--haarlinie); background:rgba(221,184,128,.08); color:var(--gold-bright); font:600 10px/1 var(--font-world); letter-spacing:.08em; text-transform:uppercase; }
.buch-proben { display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem; margin:1rem auto 0; }
.buch-probe-link { display:inline-flex; align-items:center; gap:.4rem; min-height:36px; padding:.35rem .7rem; border:var(--haarlinie); color:var(--ivory-dim); font:600 10px/1 var(--font-world); letter-spacing:.08em; text-decoration:none; }
.buch-probe-link:hover,.buch-probe-link:focus-visible { border-color:var(--gold-bright); color:var(--ivory); }
.buch-probe-link .buch-icon { width:1rem; height:1rem; color:var(--gold-bright); }
.buch-buybox { margin:0; padding:1.35rem; position:relative; z-index:1; }
.buch-buybox-status { margin:0 0 .8rem; color:var(--gold-bright); font:600 11px/1 var(--font-world); letter-spacing:.12em; }
.buch-editionsauswahl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; margin:1rem 0; }
.buch-editionen-anzahl-1 { grid-template-columns:1fr; }
.buch-edition-option { min-width:0; }
.buch-edition-option > input { position:absolute; opacity:0; pointer-events:none; }
.buch-edition-option > label { display:flex; min-height:var(--ziel); align-items:center; justify-content:center; padding:.55rem .4rem; border:var(--haarlinie); color:var(--ivory-dim); font:600 10px/1.2 var(--font-world); letter-spacing:.04em; text-align:center; cursor:pointer; }
.buch-edition-option > input:checked + label { color:var(--ivory); }
.buch-edition-option > input:focus-visible + label { outline:2px solid var(--gold-bright); outline-offset:2px; }
.buch-edition-panel { display:none; grid-column:1/-1; padding-top:.85rem; }
.buch-edition-option > input:checked ~ .buch-edition-panel { display:block; }
/* Nur das Panel der gewählten Ausgabe nimmt Platz: die Box umschließt ihren Inhalt. Den Platz für die größte Box reserviert der Hero (.buch-kopf-aktion, Skript buch-kaufbox.js; M 06.10. 20:00, Regel 16). */
.buch-edition-preis { display:block; margin-bottom:.8rem; color:var(--ivory); font:500 1.25rem/1.1 var(--font-author); }
.buch-edition-cta { width:100%; }
.buch-haendler-links { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.8rem; }
.buch-haendler-bereich { text-align:center; }
.buch-haendler-set { display:flex; width:100%; gap:.4rem; flex-wrap:wrap; }
.buch-haendler-set .buch-haendler-link { flex:1 1 calc((100% - 2rem) / 6); }
.buch-haendler-set.buch-haendler-anzahl-1 .buch-haendler-link { flex-basis:100%; }
.buch-haendler-set.buch-haendler-anzahl-2 .buch-haendler-link { flex-basis:calc(50% - .2rem); }
.buch-haendler-set.buch-haendler-anzahl-3 .buch-haendler-link { flex-basis:calc(33.333% - .27rem); }
.buch-haendler-link { display:inline-flex; min-height:var(--ziel); min-width:var(--ziel); align-items:center; justify-content:center; padding:.35rem .55rem; border:var(--haarlinie); color:var(--ivory-dim); font:500 11px/1.2 var(--font-ui); text-decoration:none; }
.buch-haendler-link:hover,.buch-haendler-link:focus-visible { border-color:var(--gold-bright); color:var(--ivory); }
.buch-haendler-link img { display:block; max-width:76px; max-height:25px; width:auto; height:auto; }
.buch-vendor-logo { display:inline-flex; align-items:flex-end; gap:.12rem; color:var(--ivory); font:700 12px/1 var(--font-ui); letter-spacing:-.04em; }
.buch-vendor-logo svg { width:1.1rem; height:1.1rem; fill:none; stroke:var(--gold-bright); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.buch-vendor-logo img { display:block; width:auto; max-width:7rem; height:1.25rem; filter:brightness(0) invert(1); object-fit:contain; }
.buch-vendor-logo { width:100%; justify-content:center; align-items:center; }
.buch-vendor-logo img { max-width:100%; height:1.35rem; filter:none; }
.buch-logo-thalia { font-family:Georgia,var(--font-author),serif; font-weight:700; letter-spacing:-.06em; }
.buch-logo-hugendubel { font-size:10px; letter-spacing:-.02em; }
.buch-updates-link { display:inline-block; margin-top:.75rem; color:var(--gold-bright); font:var(--type-meta-sm); }
.buch-benachrichtigen-form input[name="webseite"] { display:none !important; }
.buch-kopf-fuss-leiste { position:relative; z-index:1; }
.buch-kopf-fuss-leiste { background:var(--paper); border-top-color:rgba(33,31,27,.14); }
.buch-kopf-fuss-leiste .buch-ausgaben-anzahl { color:var(--ink-dim); }
.buch-kopf-fuss-innen { padding:0; }

/* W5 · visuelle Korrektur nach den abgenommenen Hero-Comps: kompakter Rahmen,
   deutliche Verkaufsbox und dieselbe Linien-/Icon-Sprache wie im Entwurf. */
.buch-kopf { padding:clamp(2rem,3.6vw,3.75rem) 0 0; }
.buch-kopf { margin-top:calc(-1 * var(--kopf-hoehe)); padding-top:calc(var(--kopf-hoehe) + clamp(2rem,3.6vw,3.75rem)); }
.buch-kopf-innen { width:min(84rem,calc(100vw - 6rem)); grid-template-columns:minmax(16rem,18rem) minmax(24rem,1fr) minmax(17rem,20rem); gap:clamp(2.25rem,4vw,4rem); align-items:center; }
.buch-kopf-cover { align-self:stretch; display:flex; align-items:center; }
.buch-kopf-cover { align-self:center; transform:translateY(-2.75rem); }
.buch-cover-rahmen { max-width:100%; width:min(100%,17rem); }
.buch-cover-rahmen { transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .55s ease; }
.buch-cover-rahmen:hover,.buch-cover-rahmen:focus-within { transform:translateY(-2.35rem) scale(1.018); }
.buch-cover-hat-hover { isolation:isolate; }
.buch-cover-hat-hover .buch-cover-bild { transition:opacity .42s ease,transform .42s cubic-bezier(.2,.8,.2,1),filter .42s ease; }
.buch-cover-hat-hover .buch-cover-bild-hover { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transform:scale(1.015); pointer-events:none; }
.buch-cover-hat-hover:hover .buch-cover-bild:not(.buch-cover-bild-hover),
.buch-cover-hat-hover:focus-within .buch-cover-bild:not(.buch-cover-bild-hover) { opacity:0; transform:scale(.985); }
.buch-cover-hat-hover:hover .buch-cover-bild-hover,
.buch-cover-hat-hover:focus-within .buch-cover-bild-hover { opacity:1; transform:scale(1); }
@media (prefers-reduced-motion:reduce) {
	.buch-cover-rahmen { transition:none; }
	.buch-cover-hat-hover .buch-cover-bild { transition:none; }
}
.buch-kopf-copy { display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 0 1.5rem; }
/* Zierzeile (BU4u 5a, vorher vier Einzellösungen): ein Wort zwischen zwei Goldlinien. Linien füllen (Standard) oder
   haben feste Länge (--zier-laenge); Farbe --zier-farbe, Abstand --zier-abstand je Stelle. Schrumpfen bis 0 erlaubt (Blatt Regel 18). */
.buch-kicker, .buch-buybox-kopf, .buch-haendler-label, .hueter-name { display:grid; grid-template-columns:var(--zier-spalte,minmax(0,1fr)) auto var(--zier-spalte,minmax(0,1fr)); align-items:center; column-gap:var(--zier-abstand,.6rem); }
.buch-haendler-label, .hueter-name { --zier-spalte:var(--zier-laenge); justify-content:center; }
.buch-kicker::before, .buch-buybox-kopf::before, .buch-haendler-label::before, .hueter-name::before,
.buch-kicker::after, .buch-buybox-kopf::after, .buch-haendler-label::after, .hueter-name::after { content:""; grid-row:1; height:1px; background:var(--zier-farbe,var(--rule)); }
.buch-kicker::before, .buch-buybox-kopf::before, .buch-haendler-label::before, .hueter-name::before { grid-column:1; }
.buch-kicker::after, .buch-buybox-kopf::after, .buch-haendler-label::after, .hueter-name::after { grid-column:3; }
.buch-buybox-kopf > * { grid-column:2; }
.buch-kicker { --zier-farbe:rgba(221,184,128,.85); --zier-abstand:.8rem; grid-template-rows:auto auto; width:min(100%,42ch); row-gap:.1rem; margin:0 auto 1.35rem; color:var(--gold-bright); font:600 11px/1.2 var(--font-world); letter-spacing:.16em; text-align:center; }
.buch-kicker span { grid-column:2; }
.buch-kicker span:nth-of-type(2) { transform:none; }
.buch-titel { margin:0; font:400 clamp(2.6rem,5vw,4.6rem)/1.02 var(--font-author); letter-spacing:-.03em; text-wrap:balance; }
.buch-titel-mit-logo { position:relative; z-index:0; display:flex; justify-content:center; }
.buch-titel-logo-wrap { position:relative; z-index:0; display:block; width:min(100%,22rem); max-height:8rem; color:var(--ivory); }
.buch-titel-logo { position:relative; z-index:0; display:block; width:100%; height:auto; max-height:8rem; }
.buch-titel-logo path, .buch-titel-logo g { fill:currentColor; }
.buch-titel-logo-gold { color:var(--gold-bright); }
.buch-titel-logo-ivory { color:var(--ivory); }
.buch-untertitel { position:relative; z-index:1; margin:-.45rem 0 0; color:var(--gold-bright); font:600 13px/1.4 var(--font-world); letter-spacing:.08em; text-transform:uppercase; }
.buch-hero-teaser { max-width:42ch; margin:1.75rem auto 0; color:var(--ivory-dim); font:400 15px/1.65 var(--font-ui); text-align:justify; text-justify:inter-word; hyphens:auto; }
.buch-hook-zitat { margin:1.5rem auto 0; max-width:34rem; padding:.8rem 0 0; border-left:0; border-top:1px solid var(--gold); font-size:clamp(1.15rem,1.8vw,1.4rem); }
.buch-kopf-aktion { align-self:center; position:relative; } /* Lage der Box im freigehaltenen Platz setzt buch-kaufbox.js (M 06.10. 20:36) */ /* kleine Box schwebt mittig, nie unten angeklebt (Maxim 06.10.2026) */
.buch-buybox { padding:1.35rem 1.35rem 1.25rem; background:rgba(19,19,16,.84); border:1px solid rgba(240,236,226,.32); box-shadow:0 14px 34px rgba(0,0,0,.22); }
.buch-buybox-kopf { margin-bottom:1.15rem; }
.buch-buybox-status { margin:0; text-align:center; white-space:nowrap; }
.buch-buybox-hinweis { text-align:center; margin:0 auto 1.35rem; max-width:24ch; line-height:1.45; }
.buch-editionsauswahl { gap:.55rem; margin:.75rem 0 1rem; }
.buch-editionen-anzahl-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.buch-editionen-anzahl-3 .buch-edition-option > label { min-height:70px; }
.buch-editionen-anzahl-5,.buch-editionen-anzahl-6 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.buch-edition-option { display:contents; }
.buch-edition-option > label { order:1; }
.buch-edition-option > label { min-height:64px; flex-direction:column; gap:.25rem; padding:.55rem .35rem; border-color:rgba(240,236,226,.25); }
.buch-edition-option > label:hover,.buch-edition-option > input:focus-visible + label { border-color:var(--gold-bright); background:var(--gold-10); }
.buch-edition-option > label .buch-icon { width:1.25rem; height:1.25rem; color:var(--gold-bright); }
.buch-edition-option > label span { font-size:9px; }
.buch-edition-option > label small { color:var(--ivory-dim); font:500 10px/1 var(--font-ui); }
.buch-edition-option > input:checked + label { border-color:var(--gold-bright); background:rgba(221,184,128,.17); }
.buch-edition-option > input:checked + label { background:var(--ivory); border-color:var(--ivory); color:var(--night); }
.buch-edition-option > input:checked + label .buch-icon,
.buch-edition-option > input:checked + label small { color:var(--night); }
.buch-edition-panel { grid-column:1/-1; order:2; width:100%; padding-top:.7rem; text-align:center; }
.buch-edition-preis { font-size:1.45rem; }
.buch-edition-isbn { display:block; margin:-.35rem 0 .8rem; color:var(--ivory-dim); font:400 10px/1.3 var(--font-ui); }
.buch-edition-cta { display:flex !important; width:100% !important; min-height:46px !important; }
.buch-bevorzugter-store { display:block; margin:.55rem 0 .15rem; color:var(--ivory-dim); font:500 10px/1.3 var(--font-ui); }
.buch-haendler-label { --zier-laenge:2rem; --zier-abstand:.55rem; margin-top:.75rem; color:var(--ivory-dim); font:500 11px/1.3 var(--font-ui); }
.buch-haendler-links { justify-content:center; }
.buch-haendler-link { flex:1 1 0; min-width:0; min-height:var(--ziel); padding:.3rem .55rem; background:rgba(0,0,0,.14); }
.buch-haendler-link { padding:.2rem .25rem; }
.buch-haendler-link:hover,.buch-haendler-link:focus-visible { border-color:var(--gold-bright); background:var(--gold-10); }
.buch-buybox .mm-knopf { min-height:46px; width:100%; }
.buch-buybox-projektfortschritt { height:5px; margin:-.25rem 0 1rem; background:rgba(255,255,255,.1); border-radius:3px; overflow:hidden; }
.buch-buybox-projektfortschritt span { display:block; height:100%; background:var(--gold); }
.buch-action-row { display:flex; align-items:stretch; gap:.65rem; width:100%; margin-top:.85rem; }
.buch-benachrichtigen-cta svg { flex:0 0 auto; width:16px; height:16px; }
/* Knopfreihe: Hauptknopf und Herz teilen EINE Höhe (--knopf-h). Vorher gewann .mm-buecher .mm-knopf (min-height:44px, später im
   Blatt, gleiche Spezifität) gegen die 46px der Buybox — der Knopf war 44, das Herz mit Plugin-Polster 67 hoch.
   Herz: quadratisch, GENAU EIN Rahmen. Den zweiten Rahmen setzte das Like-Plugin: .wpulike-heart .wp_ulike_general_class
   hat padding:5px, Radius und box-shadow:inset 0 0 0 1px #bdbdbd, dazu .wpulike padding:10px 0. */
.buch-action-row { --knopf-h:46px; }
.buch-buybox .buch-action-row .mm-knopf { min-height:var(--knopf-h); }
.buch-action-row .buch-like { flex:0 0 var(--knopf-h); align-self:flex-start; width:var(--knopf-h); height:var(--knopf-h); min-height:0; margin:0; padding:0; box-sizing:border-box; border:var(--haarlinie); display:flex; align-items:center; justify-content:center; }
.buch-action-row .buch-like .wpulike { display:flex; align-items:center; justify-content:center; margin:0; padding:0; }
.buch-action-row .buch-like .wp_ulike_general_class { padding:0; border:0; border-radius:0; box-shadow:none; background:none; }
.buch-action-row .buch-like .wp_ulike_btn { width:2.2rem; height:2.2rem; }
/* Zähler passt nicht ins Quadrat: nur für Vorlesegeräte erhalten */
.buch-action-row .buch-like .count-box { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; padding:0; margin:0; }
.buch-action-row-only-like { justify-content:flex-end; }

/* ---- Kaufbox BU4u (Blatt docs/KAUFBOX-SOLL.md, Vorlage docs/mockups/kaufbox/alle-zustaende.html, Maxim 06.10.2026) ---- */
.buch-action-row > .mm-knopf { flex:1 1 auto; min-width:0; margin-top:0; gap:.5rem; }
.buch-edition-cta svg.buch-external-icon { width:14px; height:14px; margin-left:.45rem; flex:0 0 auto; } /* Regel 23, Strich in Textfarbe */
/* Benachrichtigen: Meldung, Formular, Knopfreihe, Datenschutz in einem Raster. Mit JS und geschlossen steht die Reihe oben,
   Formular und Datenschutz fehlen ganz (display:none); der Hero reserviert den Platz der offenen Box (Regel 8, 16). */
.kb-benachrichtigen { display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:"meldung" "form" "reihe" "ds"; } /* minmax: sonst wächst die Spalte auf die Mindestbreite von BENACHRICHTIGEN + Herz */
.kb-benachrichtigen > .kb-meldung { grid-area:meldung; }
.kb-benachrichtigen > .kb-form { grid-area:form; }
.kb-benachrichtigen > .buch-action-row { grid-area:reihe; }
.kb-benachrichtigen > .kb-datenschutz { grid-area:ds; }
.kb-js:not(.kb-offen) { grid-template-areas:"meldung" "reihe" "form" "ds"; }
.kb-js:not(.kb-offen) > .kb-form,.kb-js:not(.kb-offen) > .kb-datenschutz { display:none; }
/* Formular offen: die Kacheln gehen, die gewählte Ausgabe bleibt gewählt; die Box wächst von der Mitte aus (Skript, M 06.10. 20:02) */
.buch-buybox:has(.kb-benachrichtigen.kb-offen) .buch-edition-option > label,.kb-gesiegelt .buch-edition-option > label { display:none; }
.buch-buybox:has(.kb-benachrichtigen.kb-offen) .buch-editionsauswahl,.kb-gesiegelt .buch-editionsauswahl { row-gap:0; margin-top:0; }
.kb-mitte { transition:height .35s var(--ease),margin-top .35s var(--ease); }
.kb-benachrichtigen > .kb-form { margin-bottom:-.5rem; } /* offen: Reihe .35rem unter den Feldern; Formular immer mitgelayoutet, darum gleiche Höhe zu/auf */
.buch-buybox .kb-form { display:block; margin:0; }
.kb-form .buch-benachrichtigen-hinweis,.kb-meldung { margin:.35rem 0 .9rem; font:500 14px/1.4 var(--font-ui); color:var(--ivory); text-align:center; transition:opacity .25s ease; }
.kb-form label { display:grid; gap:.4rem; text-align:left; margin:0 0 .6rem; font:500 12px/1.3 var(--font-ui); color:var(--ivory-dim); }
.kb-form input[name="webseite"] { display:none !important; }
.kb-cta { cursor:pointer; }
.kb-cta svg { width:16px; height:16px; flex:0 0 auto; }
.kb-cta.kb-kurz svg { display:none; }
.kb-cta[aria-busy="true"] { opacity:.6; cursor:progress; } /* Regel 21: gedimmt und gesperrt, ohne neuen Text */
.kb-gleiten { transition:transform .35s var(--ease); }
.kb-datenschutz { margin:.6rem 0 0; font:500 12px/1.4 var(--font-ui); color:var(--ivory-dim); text-align:center; }
.kb-datenschutz a { display:inline-block; padding:.85rem .35rem; margin:-.85rem -.35rem; color:var(--ivory-dim); text-decoration:underline; text-underline-offset:2px; } /* Klickfläche ≥ 44 px hoch */
.buch-buybox .mm-knopf:focus-visible { outline:none; background:var(--ivory); color:var(--night); } /* Regel 19: Fokus = Elfenbein-Hintergrund */
.buch-buybox ::selection { background:var(--gold-55); color:var(--ivory); }
/* Herz (Regel 19): Ruhe Elfenbein gedimmt, abgestimmt Gold mit Goldrand; Klickfläche = ganze 46-px-Kachel (Regel 18) */
.buch-buybox { --kb-herz:var(--ivory-dim); }
.buch-buybox .buch-like:hover,.buch-buybox .buch-like:focus-within { --kb-herz:var(--ivory); }
.buch-buybox .wpulike-heart .wp_ulike_put_image:after { background:linear-gradient(to top,var(--gold) 50%,var(--kb-herz) 50%) 0 0 / 100% 200% no-repeat; filter:none; -webkit-mask:url(/wp-content/plugins/neverland-like/assets/img/svg/love.svg) center/contain no-repeat; mask:url(/wp-content/plugins/neverland-like/assets/img/svg/love.svg) center/contain no-repeat; transition:background-position .55s var(--ease); }
.buch-buybox .wpulike-heart .wp_ulike_put_image.wp_ulike_btn_is_active:after { background-position:0 100%; } /* Regel 22: von unten vergoldet */
.buch-buybox .buch-like { transition:border-color .55s var(--ease); }
.buch-buybox .buch-like:has(.wp_ulike_btn_is_active) { border-color:var(--gold-55); }
.buch-action-row .buch-like .wpulike,.buch-action-row .buch-like .wp_ulike_general_class { width:100%; height:100%; }
.buch-action-row .buch-like .wp_ulike_btn { width:100%; height:100%; padding:0; }
/* Herz-Tooltip und -Meldung öffnen nach unten: nie über Kopfzeile oder Rückmeldung (Regel 18) */
.buch-buybox .buch-action-row .buch-like .buch-like-hinweis,.buch-buybox .buch-action-row .buch-like .buch-like-meldung { bottom:auto; top:calc(100% + .5rem); }
/* Nicht kaufbare Ausgabe: Preis tritt zurück (Regel 19) */
.kb-nicht-kaufbar .buch-edition-preis { color:var(--ivory-dim); }
/* Mindestgrößen (Regel 18): Kachelname, Kachelpreis, ISBN 11 px, Händler-Label 12 px */
.buch-buybox .buch-edition-option > label span { font-size:11px; hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word; max-width:100%; }
.buch-buybox .buch-edition-option > label small { font-size:11px; }
.buch-buybox .buch-edition-isbn { font-size:11px; }
.buch-buybox .buch-haendler-label { font-size:12px; }
/* Händler ab 4: 4 = zwei Reihen à 2, 5–6 = Reihen à 3 (Regel 18) */
.buch-haendler-set.buch-haendler-anzahl-4 .buch-haendler-link { flex:0 0 calc(50% - .2rem); }
.buch-haendler-set.buch-haendler-anzahl-5 .buch-haendler-link,.buch-haendler-set.buch-haendler-anzahl-6 .buch-haendler-link { flex:0 0 calc(33.333% - .27rem); }
.buch-haendler-link img { max-width:100%; height:auto; }
/* Blattgold nach dem Eintragen (Regel 22): Zierlinien ziehen sich vom Wort aus in Gold nach außen, dann die Meldung */
.kb-gesiegelt .buch-buybox-kopf::before,.kb-gesiegelt .buch-buybox-kopf::after { animation:kb-linie 1.1s var(--ease) both; }
.kb-gesiegelt .buch-buybox-kopf::before { transform-origin:right center; }
.kb-gesiegelt .buch-buybox-kopf::after { transform-origin:left center; }
@keyframes kb-linie { 0% { transform:scaleX(0); background:var(--gold); } 55% { transform:scaleX(1); background:var(--gold); } 100% { transform:scaleX(1); background:var(--rule); } }
.kb-gesiegelt .kb-meldung { animation:kb-auf .5s .35s var(--ease) both; }
@keyframes kb-auf { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) {
	.kb-gleiten,.kb-mitte,.kb-form .buch-benachrichtigen-hinweis,.buch-buybox .buch-like { transition:none; }
	.buch-buybox .wpulike-heart .wp_ulike_put_image:after { transition:none; }
	.kb-gesiegelt .buch-buybox-kopf::before,.kb-gesiegelt .buch-buybox-kopf::after,.kb-gesiegelt .kb-meldung { animation:none; }
}
.buch-icon { display:block; width:1.1rem; height:1.1rem; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.buch-kopf-fuss-leiste { margin-top:clamp(2rem,3vw,3rem); }
.buch-kopf-fuss-innen { width:var(--shell); padding:1.15rem 0; }
.buch-kopf-mit-motiv::before { opacity:.72; background-image:linear-gradient(90deg,rgba(7,7,6,.91) 0%,rgba(7,7,6,.56) 48%,var(--night-88) 100%),var(--buch-hero-bild); }
.buch-kopf-ohne-motiv::before { background:linear-gradient(110deg,#0b1012,var(--night) 62%,#10100d); }
.buch-kopf-ohne-motiv .buch-kopf-innen { padding-top:.5rem; padding-bottom:.5rem; }
.buch-kopf > .buch-kopf-innen:last-child { padding-bottom:30px; } /* Hero ohne MetaBar-Leiste: 30 px unter dem Inhalt (M 06.10. 20:58) */

/* Seitenkopf-Höhen (Brief kopfhoehen, Maxim 05.10.2026): drei Stufen, Gesamthöhe ab Seitenoberkante inklusive
   Kopfzeile, mit und ohne Bild gleich. Die Stufe sitzt am äußeren Rahmen, der Rahmen läuft unter dem Glas der
   Kopfzeile, der Titel steht unten. Standard: flach Presse/Events/Bücher/Recht/Orte, mittel Köpfe mit Bild
   (Biografie, Beiträge, Event-Detail), hoch Blog-Übersicht; „Seitenkopf: Höhe“ im Editor überschreibt. */
:root { --kopf-flach: 440px; --kopf-mittel: 560px; --kopf-hoch: 800px; }
@media (max-width: 760px) { :root { --kopf-flach: 320px; --kopf-mittel: 440px; --kopf-hoch: 560px; } }
.mm-header { position:relative; isolation:isolate; overflow:hidden; box-sizing:border-box; display:flex; flex-direction:column; justify-content:flex-end; margin-top:calc(-1 * var(--kopf-hoehe)); padding-top:var(--kopf-hoehe); background:var(--night); color:var(--ivory); }
.mm-header::before { content:""; position:absolute; inset:0; z-index:-2; background:var(--night); }
.mm-header.mm-header-flach { min-height:var(--kopf-flach); }
.mm-header.mm-header-mittel { min-height:var(--kopf-mittel); }
.mm-header.mm-header-hoch { min-height:var(--kopf-hoch); }
/* Oben hält der Rahmen den Abstand (Titel steht unten); so passt auch ein zweizeiliger Titel in „flach“. */
.mm-header .article-head { padding-top:clamp(2rem,3vw,3rem); }
/* Quer gehaltenes Telefon (Maxim, 28.09.2026: „quer begrenzen“): Kopf nur so hoch, wie sein Inhalt braucht. */
@media (orientation: landscape) and (max-height: 500px) {
  .mm-header.mm-header-flach, .mm-header.mm-header-mittel, .mm-header.mm-header-hoch { min-height:0; }
}

@media (max-width:1100px) and (min-width:769px) {
  .buch-kopf-innen { grid-template-columns:minmax(15rem,20rem) minmax(18rem,1fr) minmax(16rem,19rem); gap:2rem; }
  .buch-titel { font-size:clamp(2.7rem,4.6vw,4rem); }
}

@media (max-width:1100px) and (min-width:769px) {
  .buch-kopf-innen { grid-template-columns:minmax(13rem,18rem) minmax(15rem,1fr) minmax(15rem,18rem); gap:2rem; }
  .buch-titel { font-size:clamp(2.4rem,4vw,3.7rem); }
}

/* --- 2. Geschichte (Papier --paper) --- */
.buch-geschichte-bereich { background:var(--paper); color:var(--ink); padding:clamp(4rem,8vw,7rem) 0; }
.buch-papier-innen { width:min(58rem,calc(100vw - 4rem)); margin-inline:auto; }
.buch-abschnitt-kicker { font:var(--type-label); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--gold-bright); margin:0 0 .5rem; }
.buch-abschnitt-titel { font:400 clamp(2.2rem,3.8vw,3.2rem)/1.1 var(--font-author); margin:0 0 2rem; color:var(--ink); letter-spacing:-.02em; }
.buch-klappentext-zweispalter { font:var(--type-prose); color:var(--ink); column-count:2; column-gap:3.5rem; margin-bottom:2.5rem; text-wrap:pretty; }
.buch-klappentext-zweispalter p { margin:0 0 1.5rem; }
.buch-geschichte-zitat { margin:3rem 0; padding:2.5rem 0; border-top:1px solid var(--paper-rule); border-bottom:1px solid var(--paper-rule); text-align:center; }
.buch-geschichte-zitat blockquote { margin:0 0 1rem; font:italic 400 clamp(1.35rem,2.4vw,1.9rem)/1.45 var(--font-author); color:var(--ink); }
.buch-geschichte-zitat blockquote p { margin:0; }
.buch-geschichte-zitat cite { font:var(--type-label); letter-spacing:var(--track-label); line-height:1; text-transform:uppercase; color:var(--gold-bright); font-style:normal; }
.buch-geschichte-aktion { margin-top:2rem; }

/* W5 · Redaktioneller Mittelteil: optionale Weltbild-Vertiefung und Serienbrücke. */
.buch-weltbild-bereich { background:var(--night); color:var(--ivory); padding:clamp(4rem,8vw,7rem) 0; }
.buch-weltbild-innen { width:var(--wide-block); margin-inline:auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(18rem,34rem); gap:clamp(2rem,6vw,6rem); align-items:center; }
.buch-weltbild-copy .buch-abschnitt-titel { color:var(--ivory); }
.buch-weltbild-copy > p:last-child { max-width:42rem; color:var(--ivory-dim); font:var(--type-prose); }
.buch-weltbild-bild { display:block; width:100%; aspect-ratio:1.35; object-fit:cover; }
/* BU4j: freie Blöcke der Buchseite (Vertrag §8), Gestaltung nach docs/BU4j-entwuerfe/runde4/index.html.
   Vier Vorlagen (papier, nacht = Theme-Schriften; gin, neutral = Schriften aus assets/schriften/buch-frei-schriften.css).
   Farben: --s-* = Startfarbe der Vorlage, --b-* = eigene Farbe aus dem Block (style-Attribut) oder die Startfarbe. */
.buch-frei { --b-bg:var(--s-bg); --b-text:var(--s-text); --b-akzent:var(--s-akzent); --b-kicker:var(--s-kicker); background:var(--b-bg); color:var(--b-text); box-sizing:border-box; padding:clamp(4rem,8vw,7rem) 0; }
.buch-frei ::selection { background:var(--b-akzent); color:#fff; }
.buch-frei-v-papier { --s-bg:#fbf9f5; --s-text:#211f1b; --s-akzent:#8a6631; --s-kicker:#8a6631; --f-kopf:var(--font-author); --f-text:var(--font-ui); --w-duenn:400; --w-fett:600; --k-gross:none; }
.buch-frei-v-nacht { --s-bg:#070706; --s-text:#f0ece2; --s-akzent:#ddb880; --s-kicker:#ddb880; --f-kopf:var(--font-author); --f-text:var(--font-ui); --w-duenn:400; --w-fett:600; --k-gross:none; }
.buch-frei-v-gin { --s-bg:#fff; --s-text:#212c30; --s-akzent:#d14630; --s-kicker:#b37f46; --f-kopf:Archivo,sans-serif; --f-text:Figtree,sans-serif; --f-kicker:Montserrat,sans-serif; --w-duenn:100; --w-fett:800; --k-gross:uppercase; }
.buch-frei-v-neutral { --s-bg:#fff; --s-text:#18181b; --s-akzent:#475569; --s-kicker:#64748b; --f-kopf:Inter,sans-serif; --f-text:Inter,sans-serif; --f-kicker:Inter,sans-serif; --w-duenn:300; --w-fett:700; --k-gross:none; }
.buch-frei-v-gin.buch-frei-t-bild, .buch-frei-v-gin.buch-frei-d-rahmen { --s-bg:#212c30; --s-text:#fff; --s-akzent:#c54930; }
.buch-frei-v-gin.buch-frei-t-merkmale { --s-bg:#ececec; --s-text:#163331; --s-akzent:#c54930; }
.buch-frei-v-gin.buch-frei-t-galerie { --s-bg:#163331; --s-text:#fff; --s-akzent:#c54930; }
.buch-frei-v-neutral.buch-frei-d-rahmen, .buch-frei-v-neutral.buch-frei-t-galerie { --s-bg:#f4f4f5; }
.buch-frei-v-papier, .buch-frei-v-nacht { font:var(--type-prose); }
.buch-frei-v-gin, .buch-frei-v-neutral { font-family:var(--f-text); }
.buch-frei-t-bild { padding:0; }
.buch-frei-spalte { width:min(58rem,calc(100vw - 2rem)); margin-inline:auto; }
.buch-frei-kicker { font:var(--type-label); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--b-kicker); margin:0 0 .75rem; }
.buch-frei-v-gin .buch-frei-kicker { font:700 22px/1.3 var(--f-kicker); letter-spacing:0; text-transform:none; margin-bottom:18px; }
.buch-frei-v-neutral .buch-frei-kicker { font:700 15px/1.3 var(--f-kicker); letter-spacing:.02em; text-transform:none; margin-bottom:18px; }
.buch-frei-titel { font-family:var(--f-kopf); font-weight:var(--w-duenn); text-transform:var(--k-gross); font-size:clamp(30px,4vw,48px); line-height:1.05; margin:0; text-wrap:balance; color:var(--b-text); }
.buch-frei-v-papier .buch-frei-titel, .buch-frei-v-nacht .buch-frei-titel { line-height:1.1; letter-spacing:-.02em; }
.buch-frei-titel strong { font-weight:var(--w-fett); }
.buch-frei-titel em { font-style:italic; color:var(--b-akzent); }
.buch-frei-fliess { max-width:42rem; margin-top:1.5rem; line-height:1.5; hyphens:auto; }
.buch-frei-v-gin .buch-frei-fliess, .buch-frei-v-neutral .buch-frei-fliess { font-size:clamp(16px,1.5vw,19px); }
.buch-frei-fliess p { margin:0 0 1em; }
.buch-frei-fliess ul, .buch-frei-fliess ol { margin:0 0 1em; padding-left:1.4em; }
.buch-frei-fliess a { color:var(--b-akzent); text-decoration:underline; }
.buch-frei-aktion { margin:2rem 0 0; }
.mm-buecher .buch-frei .mm-knopf-umriss { background:transparent; border:1px solid var(--b-akzent); color:var(--b-text); }
.mm-buecher .buch-frei .mm-knopf-umriss:hover { background:var(--b-akzent); color:var(--b-bg); }
.mm-buecher .buch-frei-v-gin .mm-knopf-umriss, .mm-buecher .buch-frei-v-neutral .mm-knopf-umriss { font-family:var(--f-kicker); font-weight:700; text-transform:none; letter-spacing:.02em; border-radius:0; }
.mm-buecher .buch-frei-v-gin .mm-knopf-umriss { background:var(--b-akzent); color:#fff; }
.mm-buecher .buch-frei-v-gin .mm-knopf-umriss:hover { background:color-mix(in srgb,var(--b-akzent) 82%,#000); color:#fff; }
.buch-frei-sym { width:24px; height:24px; stroke:var(--b-akzent); flex:none; }
/* Text: zentriert und im Rahmen */
.buch-frei-d-zentriert .buch-frei-spalte { width:min(58rem,calc(100vw - 2rem)); text-align:center; }
.buch-frei-d-zentriert .buch-frei-titel { font-size:clamp(26px,3.2vw,35px); line-height:1.15; }
.buch-frei-d-zentriert .buch-frei-fliess { max-width:930px; margin-inline:auto; text-align:left; }
.buch-frei-d-rahmen { padding:clamp(3.5rem,6vw,4.5rem) 16px clamp(4rem,6vw,5rem); }
.buch-frei-rahmen { position:relative; max-width:1056px; margin:0 auto; border:3px solid var(--b-akzent); padding:64px clamp(16px,5vw,53px) 52px; text-align:center; }
.buch-frei-zeichen { position:absolute; top:0; left:50%; transform:translate(-50%,-50%); width:72px; height:72px; background:var(--b-akzent); display:grid; place-items:center; }
.buch-frei-zeichen .buch-frei-sym { width:40px; height:40px; stroke:var(--b-bg); }
.buch-frei-rahmen .buch-frei-titel { font-size:clamp(26px,calc(4.6vw + 12px),65px); overflow-wrap:break-word; } /* adapt 12.10.: 34px lief bei 320 px über den Rahmen */
.buch-frei-rahmen .buch-frei-fliess { max-width:867px; margin:32px auto 0; text-align:left; }
/* Blocksatz erst ab 640 px: schmal reißt er Lücken und trennt jedes zweite Wort */
.buch-frei-d-zentriert .buch-frei-fliess, .buch-frei-rahmen .buch-frei-fliess { hyphens:manual; }
@media (min-width:640px) { .buch-frei-d-zentriert .buch-frei-fliess, .buch-frei-rahmen .buch-frei-fliess { text-align:justify; hyphens:auto; } }
/* Bild + Text und Bild */
.buch-frei-bildtext { width:var(--wide-block); margin-inline:auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(18rem,34rem); gap:clamp(2rem,6vw,6rem); align-items:center; }
.buch-frei-bildseite-links .buch-frei-bildtext { grid-template-columns:minmax(18rem,34rem) minmax(0,1fr); }
.buch-frei-bildseite-links .buch-frei-bildfeld { order:-1; }
.buch-frei-bildtext .buch-frei-bildfeld { display:block; width:100%; height:auto; }
.buch-frei-bildvoll { margin:0; }
.buch-frei-bildvoll .buch-frei-bildfeld { display:block; width:100%; height:clamp(260px,42vw,560px); object-fit:cover; }
.buch-frei-bildvoll figcaption { padding:.75rem 1rem; text-align:center; font-size:.9rem; opacity:.8; }
/* Zitat */
.buch-frei-zitat { padding:2.5rem 0; border-top:1px solid color-mix(in srgb,var(--b-text) 25%,transparent); border-bottom:1px solid color-mix(in srgb,var(--b-text) 25%,transparent); text-align:center; }
.buch-frei-zitat blockquote { margin:0 0 1rem; font:italic var(--w-duenn) clamp(1.35rem,2.4vw,1.9rem)/1.45 var(--f-kopf); }
.buch-frei-zitat blockquote p { margin:0; }
.buch-frei-zitat cite { font:var(--type-label); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--b-kicker); font-style:normal; }
/* Merkmale */
.buch-frei-t-merkmale { padding:clamp(3.5rem,6vw,5rem) 16px clamp(4rem,6vw,5.5rem); }
.buch-frei-merkkopf { text-align:center; max-width:760px; margin:0 auto 56px; }
.buch-frei-merkkopf .buch-frei-titel { font-size:clamp(32px,4.6vw,55px); }
.buch-frei-raster { max-width:960px; margin:0 auto; display:grid; grid-template-columns:minmax(0,311px) minmax(0,1fr); gap:clamp(28px,6vw,80px); align-items:center; }
.buch-frei-ohne-bild .buch-frei-raster { grid-template-columns:minmax(0,1fr); max-width:640px; }
.buch-frei-raster .buch-frei-bildfeld { display:block; width:100%; height:auto; }
.buch-frei-merkliste ul { list-style:none; padding:0; margin:0 0 28px; display:grid; gap:22px; }
.buch-frei-merkliste li { display:grid; grid-template-columns:30px 1fr; gap:14px; line-height:1.5; }
.buch-frei-merkliste li .buch-frei-sym { margin-top:2px; }
.buch-frei-merkliste li b { font-weight:700; }
.buch-frei-merkzitat { padding:22px 0; border-top:1px solid color-mix(in srgb,var(--b-text) 25%,transparent); border-bottom:1px solid color-mix(in srgb,var(--b-text) 25%,transparent); line-height:1.5; }
.buch-frei-merkzitat blockquote { margin:0; font-weight:700; }
.buch-frei-merkzitat blockquote p { margin:0; }
.buch-frei-merkzitat cite { display:block; text-align:right; font-style:normal; margin-top:6px; }
/* Galerie: Raster und Laufband ohne Skript, Karussell mit Pfeilen und Punkten (assets/buch-karussell.js) */
.buch-frei-t-galerie { padding:clamp(3rem,5vw,4rem) 0 clamp(3rem,5vw,3.5rem); }
.buch-frei-t-galerie .buch-frei-spalte { margin-bottom:2rem; }
.buch-frei-t-galerie figure { margin:0; }
.buch-frei-t-galerie figcaption { padding-top:.5rem; font-size:.9rem; opacity:.8; }
.buch-frei-t-galerie .buch-frei-galeriebild { display:block; width:100%; height:auto; }
.buch-frei-bahn-raster { width:var(--wide-block); margin-inline:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr)); gap:16px; }
.buch-frei-bahn-laufband, .buch-frei-karussell .buch-frei-bahn { display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding:0 max(16px,calc((100% - 1094px) / 2)); scrollbar-width:none; }
.buch-frei-karussell .buch-frei-bahn { gap:10px; }
.buch-frei-bahn-laufband::-webkit-scrollbar, .buch-frei-karussell .buch-frei-bahn::-webkit-scrollbar { display:none; }
.buch-frei-bahn-laufband figure { flex:0 0 min(80%,420px); scroll-snap-align:start; }
.buch-frei-karussell .buch-frei-bahn figure { flex:0 0 auto; scroll-snap-align:center; } /* Kachel so breit wie ihr Bild: keine leeren Flächen neben Hoch- oder Querformat */
.buch-frei-karussell .buch-frei-bahn { position:relative; }
.buch-frei-karussell .buch-frei-galeriebild { height:clamp(280px,50vw,700px); width:auto; max-width:calc(100vw - 2rem); object-fit:contain; } /* kein Tönungs-Hintergrund: ein noch nicht geladenes Bild darf keine leere Kachel zeigen */
.buch-frei-steuer { display:none; justify-content:center; align-items:center; gap:18px; margin-top:22px; }
.buch-frei-karussell.ist-bereit .buch-frei-steuer { display:flex; }
.buch-frei-steuer button { width:44px; height:44px; display:grid; place-items:center; background:transparent; border:1px solid var(--b-akzent); color:var(--b-text); cursor:pointer; }
.buch-frei-steuer button:focus-visible, .buch-frei-bahn:focus-visible { outline:2px solid var(--b-akzent); outline-offset:3px; }
.buch-frei-steuer .buch-frei-sym { width:20px; height:20px; stroke:currentColor; }
.buch-frei-punkte { display:flex; gap:8px; }
.buch-frei-punkte i { width:8px; height:8px; background:color-mix(in srgb,var(--b-text) 35%,transparent); }
.buch-frei-punkte i.an { background:var(--b-akzent); }
.buch-abschnitt-titel em { font-style:italic; color:var(--gold-bright); }
@media (max-width:720px) {
	.buch-frei-karussell .buch-frei-galeriebild { width:calc(100vw - 2rem); height:auto; }
	.buch-frei-raster, .buch-frei-bildtext, .buch-frei-bildseite-links .buch-frei-bildtext { grid-template-columns:1fr; }
	.buch-frei-raster .buch-frei-bildfeld { max-width:240px; margin:0 auto; }
	.buch-frei-bildseite-links .buch-frei-bildfeld { order:0; }
}
/* Kopfhöhe aus dem Seitenaufbau (nur flach/mittel/hoch; „standard“ setzt keine Klasse) */
.buch-kopf.buch-kopf-hoehe-flach, .buch-kopf.buch-kopf-hoehe-mittel, .buch-kopf.buch-kopf-hoehe-hoch { box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; }
.buch-kopf.buch-kopf-hoehe-flach { min-height:var(--kopf-flach); }
.buch-kopf.buch-kopf-hoehe-mittel { min-height:var(--kopf-mittel); }
.buch-kopf.buch-kopf-hoehe-hoch { min-height:var(--kopf-hoch); }
.buch-serienbereich { background:var(--paper); color:var(--ink); padding:clamp(4rem,8vw,7rem) 0; border-top:1px solid var(--paper-rule); }
.buch-serienkopf { display:flex; align-items:end; justify-content:space-between; gap:1.5rem; border-bottom:1px solid var(--paper-rule); }
.buch-serienkopf .buch-abschnitt-titel { margin-bottom:1rem; }
.buch-serienhinweis { margin:1.25rem 0 0; color:var(--ink-dim); font:var(--type-ui); }
.buch-serienkarten { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-top:2rem; }
.buch-serienkarte { min-width:0; border-top:1px solid var(--paper-rule); padding-top:.75rem; }
.buch-serienkarte-cover { display:grid; place-items:center; width:100%; aspect-ratio:3/4; background:var(--night); color:var(--ivory); text-align:center; text-decoration:none; overflow:hidden; }
.buch-serienkarte-cover img { display:block; width:100%; height:100%; object-fit:cover; }
.buch-serienkarte .buch-zustand { margin:.75rem 0 .25rem; }
.buch-serienkarte h3 { margin:0; font:400 1.45rem/1.05 var(--font-author); }
.buch-serienkarte h3 a { color:inherit; text-decoration:none; }
.buch-serienkarte h3 a:hover { color:var(--gold-bright); }
.buch-serienkarte-band { margin:.45rem 0 0; color:var(--ink-dim); font:500 12px/1.3 var(--font-ui); }

/* --- 3. Details zum Buch / Fakten (Papier weich --paper-soft) --- */
.buch-fakten-bereich { background:var(--paper-soft); color:var(--ink); padding:clamp(4rem,7vw,6rem) 0; border-top:1px solid var(--paper-rule); }
.buch-fakten-liste { margin:0; display:grid; border-top:1px solid var(--paper-rule); }
.buch-fakten-zeile { display:grid; grid-template-columns:minmax(140px,240px) 1fr; gap:1rem 2rem; padding:1.1rem 0; border-bottom:1px solid var(--paper-rule); align-items:baseline; }
.buch-fakten-zeile dt { font:var(--type-label); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--gold-bright); }
.buch-fakten-zeile dd { margin:0; font:500 15px/1.5 var(--font-ui); color:var(--ink); }

/* --- 4. Stimmen zum Buch (Nacht --night) --- */
.buch-stimmen-bereich { background:var(--night); color:var(--ivory); padding:clamp(4rem,8vw,7rem) 0; }
.buch-nacht-innen { width:var(--wide-block); margin-inline:auto; }
.buch-stimmen-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2rem; margin-top:2rem; }
.buch-stimme-karte { padding:2rem; background:var(--surface); border:var(--haarlinie); display:flex; flex-direction:column; justify-content:space-between; }
.buch-stimme-karte blockquote { margin:0 0 1.25rem; font:italic 400 1.15rem/1.55 var(--font-author); color:var(--ivory); }
.buch-stimme-karte blockquote p { margin:0; }
.buch-stimme-karte cite { font:var(--type-label); letter-spacing:var(--track-label); line-height:1; text-transform:uppercase; color:var(--gold-bright); font-style:normal; }

/* --- Knöpfe & Links --- */
.mm-buecher .mm-knopf, .mm-presse .mm-knopf, .presse-kopf .knopf { display:inline-flex; align-items:center; justify-content:center; }
.mm-presse .mm-knopf[hidden] { display:none; }
/* EIN goldener Hauptknopf (impeccable extract): Bücher, Events, Hüter-Formular, Suche. Kommagruppe statt :is(), damit jede
   Selektorstärke bleibt wie vorher – Varianten (.mm-knopf-umriss, .knopf.leise) und die Buybox-Höhen gewinnen weiter. Der
   Mega-Menü-.knopf (.site-nav) ist absichtlich nicht dabei. Hover und Tastaturfokus: Elfenbein, Schrift bleibt Nacht. */
.mm-buecher .mm-knopf, .mm-presse .mm-knopf, .mm-events .knopf, .presse-kopf .knopf, .hueter-form button, .de-form button, .mm-suche button, .mm-veranstalter .v-form button, .mm-veranstalter .v-knopf, .kontakt-form button, .gw .gw-knopf:not(.gw-leise), .gw-teaser-knopf,
.domain .wp-block-button__link, .entry-content .wp-block-button__link {
	min-height:var(--ziel); padding:0 1.5rem; border:0; border-radius:0; background:var(--gold); color:var(--night);
	font:var(--type-button); letter-spacing:var(--track-button); text-transform:uppercase; text-decoration:none;
	cursor:pointer; transition:background .2s, color .2s;
}
.mm-buecher .mm-knopf:hover, .mm-presse .mm-knopf:hover, .mm-events .knopf:hover, .presse-kopf .knopf:hover, .hueter-form button:hover, .de-form button:hover, .mm-suche button:hover, .mm-veranstalter .v-form button:hover, .mm-veranstalter .v-knopf:hover, .kontakt-form button:hover, .gw .gw-knopf:not(.gw-leise):hover, .gw-teaser-knopf:hover,
.mm-buecher .mm-knopf:not(.mm-knopf-umriss):focus-visible, .mm-presse .mm-knopf:not(.mm-knopf-umriss):focus-visible, .mm-events .knopf:not(.leise):focus-visible, .presse-kopf .knopf:not(.leise):focus-visible,
.hueter-form button:focus-visible, .de-form button:focus-visible, .mm-suche button:focus-visible, .mm-veranstalter .v-form button:focus-visible, .mm-veranstalter .v-knopf:focus-visible, .kontakt-form button:focus-visible, .gw .gw-knopf:not(.gw-leise):focus-visible, .gw-teaser-knopf:focus-visible,
.domain .wp-block-button__link:hover, .domain .wp-block-button__link:focus-visible, .entry-content .wp-block-button__link:hover, .entry-content .wp-block-button__link:focus-visible { background:var(--ivory); color:var(--night); }
.mm-buecher .mm-knopf-umriss, .mm-presse .mm-knopf-umriss { background:transparent; border:1px solid var(--ink); color:var(--ink); }
.mm-buecher .mm-knopf-umriss:hover, .mm-presse .mm-knopf-umriss:hover { background:var(--ink); color:var(--paper); }

/* --- Einstellungsseite der Depesche (/depesche/einstellungen/, W17 08.10.2026): Papier, Kapitelanfang-Anmutung wie die Mails --- */
.depesche-einstellungen { background:var(--paper); color:var(--ink); padding:clamp(4rem,10vw,8rem) 1.5rem clamp(5rem,12vw,9rem); }
.de-innen { max-width:34rem; margin-inline:auto; text-align:center; }
.de-trenner { margin:0 0 1rem; font:600 20px/24px var(--font-author); letter-spacing:.3em; color:var(--ink-dim); }
.depesche-einstellungen h1 { margin:0 0 1.5rem; font:400 clamp(2.4rem,9vw,4rem)/1.1 var(--font-author); letter-spacing:0; color:var(--ink); overflow-wrap:anywhere; }
.de-satz { margin:0 0 2rem; font:400 1.125rem/1.6 var(--font-ui); color:var(--ink); }
.de-meldung { margin:0 0 1.5rem; font:600 1rem/1.5 var(--font-ui); color:var(--gold-tinte); }
.de-meldung:empty { display:none; }
.de-meldung[data-status="fehler"] { color:var(--ink); }
.de-form { margin:0 0 1rem; }
.de-form button { width:100%; max-width:100%; min-height:var(--ziel); padding:.75rem 1.5rem; line-height:1.25; white-space:normal; }
.de-form button:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.de-klein { margin:2rem 0 0; font:400 .875rem/1.5 var(--font-ui); color:var(--ink-dim); }
.de-unter { margin:2.5rem 0 1rem; font:400 1.5rem/1.2 var(--font-author); color:var(--ink); }
.de-hinweis { margin:0 0 1rem; font:400 .9375rem/1.5 var(--font-ui); color:var(--ink-dim); }
.de-themen { color-scheme:light; margin:0 0 1rem; padding:0; border:0; min-width:0; text-align:left; }
.de-legende { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.de-thema { display:flex; align-items:flex-start; gap:.875rem; min-height:var(--ziel); padding:.875rem .25rem; border-top:var(--haarlinie-papier); cursor:pointer; }
.de-thema:last-child { border-bottom:var(--haarlinie-papier); }
.de-thema input { flex:none; width:1.375rem; height:1.375rem; margin:.125rem 0 0; accent-color:var(--ink); cursor:pointer; }
.de-thema:focus-within { outline:2px solid var(--ink); outline-offset:2px; }
.de-thema-text { display:flex; flex-direction:column; gap:.125rem; min-width:0; overflow-wrap:anywhere; }
.de-thema-name { font:600 1.0625rem/1.4 var(--font-ui); color:var(--ink); }
.de-thema-zeile { font:400 .9375rem/1.45 var(--font-ui); color:var(--ink-dim); }
.de-form .de-alle { display:block; width:auto; margin:0 auto 1.25rem; min-height:var(--ziel); padding:.5rem 1rem; background:none; border:0; font:600 .9375rem/1.25 var(--font-ui); letter-spacing:0; text-transform:none; color:var(--gold-tinte); text-decoration:underline; text-underline-offset:.2em; cursor:pointer; }
.de-form .de-alle[hidden] { display:none; }
.de-form .de-alle:hover { background:none; color:var(--ink); }
.de-alle:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }

/* --- Archiv-Übersicht --- */
.buch-regal { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; padding:clamp(3rem,7vw,6rem) 0; width:var(--wide-block); margin-inline:auto; }
/* Einheitliche Karten (Maxim 05.10.2026, 17:16): jede Karte gleich gerahmt, Zeilen gleich hoch; ohne Cover steht eine Platzhalterfläche in Cover-Größe */
.buch-karte { display:grid; grid-template-columns:8.5rem minmax(0,1fr); align-items:start; gap:1.5rem; padding:1.5rem; border:1px solid var(--paper-rule); }
.buch-karte-cover-leer { aspect-ratio:2/3; width:100%; background:color-mix(in srgb, var(--paper-rule) 45%, transparent); }
.buch-karte-cover img { display:block; width:100%; height:auto; }
.buch-karte h2,.buch-karte h3 { margin:0 0 .5rem; font:400 clamp(1.5rem,2.4vw,2.1rem)/1.05 var(--font-author); }
/* Saga-Seite: Zwischenüberschrift je Zyklus */
.buch-gruppe { width:var(--wide-block); margin-inline:auto; padding-top:clamp(2.5rem,5vw,4rem); }
.buch-gruppe-titel { margin:0; font:400 clamp(2rem,3.4vw,3rem)/1.05 var(--font-author); letter-spacing:-.02em; color:var(--ink); }
.buch-gruppe-titel a { color:inherit; text-decoration:none; }
.buch-gruppe-titel a:hover { color:var(--gold-bright); }
.buch-gruppe .buch-regal { width:auto; padding-top:1.5rem; padding-bottom:0; }
.buch-gruppe:last-child { padding-bottom:clamp(3rem,7vw,6rem); }
.buch-karte h2 a,.buch-karte h3 a { color:inherit; text-decoration:none; }
.buch-karte h2 a:hover,.buch-karte h3 a:hover { color:var(--gold-bright); }
.buch-karte-untertitel { margin:0 0 .5rem; font:400 13px/1.4 var(--font-author); color:var(--ink-dim); }
.buch-karte-band { margin:0 0 .35rem; font:var(--type-label); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--gold-bright); }
.buch-archiv-unterzeile { margin:0; font:400 clamp(1.05rem,1.6vw,1.3rem)/1.4 var(--font-author); color:var(--ivory-dim); }
/* Saga-Seite: Visual Storybook als breite Fläche, Cover links, Text rechts; Handy untereinander */
.buch-storybook { width:var(--wide-block); margin:clamp(2.5rem,5vw,4rem) auto clamp(3rem,7vw,6rem); display:grid; grid-template-columns:minmax(0,18rem) minmax(0,1fr); gap:clamp(1.5rem,4vw,3rem); align-items:center; padding:1.5rem; border:1px solid var(--paper-rule); }
.mm-buecher-uebersicht { display:flow-root; } /* Außenabstand des Storybook-Abschnitts bleibt auf der hellen Fläche */
.buch-storybook-cover img { display:block; width:100%; height:auto; }
.buch-storybook h2 { margin:0 0 .75rem; font:400 clamp(2rem,3.4vw,3rem)/1.05 var(--font-author); letter-spacing:-.02em; }
.buch-storybook p { margin:0 0 1.25rem; }
@media (max-width:768px) { .buch-storybook { grid-template-columns:1fr; } .buch-storybook-cover { max-width:14rem; } }
.buch-like { display:flex; align-items:center; justify-content:flex-start; min-height:2rem; margin-top:.65rem; }
.buch-serienkarte .buch-like { justify-content:flex-start; }
.buch-like .wpulike { margin:0; }
.buch-like .wp_ulike_btn { width:2rem; height:2rem; }
.buch-like .wp_ulike_btn:focus-visible { outline:var(--fokus); outline-offset:3px; border-radius:50%; } /* sichtbarer Fokus (Audit 21.10.2026, WCAG 2.4.7) */
/* Herz-Hinweis (BU4s 05.10.2026): Tooltip über dem Herz — beim Überfahren (nur mit Maus), bei Tastaturfokus und beim Antippen
   (Klasse .zeigt, vom Skript für 2,5 s); nach der Abstimmung ersetzt die Meldung (aria-live) den Hinweis. Kein Platz im Fluss. */
.buch-like { position:relative; }
/* Like-Zahl bleibt unsichtbar, auch auf den Karten (nur Vorlesegeräte) */
.buch-like .count-box { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; padding:0; margin:0; }
.buch-like-hinweis,.buch-like-meldung { position:absolute; bottom:calc(100% + .5rem); left:0; z-index:6; width:max-content; max-width:min(15rem,100%); box-sizing:border-box; padding:.55rem .8rem; background:var(--coal); color:var(--ivory); border:var(--haarlinie); font:500 12px/1.45 var(--font-ui); letter-spacing:.01em; text-align:left; opacity:0; visibility:hidden; transform:translateY(4px); transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s; pointer-events:none; }
.buch-like-meldung:empty { display:none; }
/* Knopfreihe: das Herz ist 46 px breit, der Hinweis hängt rechtsbündig darüber und wächst nach links (nie aus dem Fenster) */
.buch-action-row .buch-like .buch-like-hinweis,.buch-action-row .buch-like .buch-like-meldung { left:auto; right:0; max-width:min(15rem,calc(100vw - 2rem)); }
@media (hover:hover) { .buch-like:hover .buch-like-hinweis { opacity:1; visibility:visible; transform:none; transition-delay:0s; } }
.buch-like:has(:focus-visible) .buch-like-hinweis,.buch-like.zeigt .buch-like-hinweis,.buch-like.hat-meldung .buch-like-meldung { opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.buch-like.hat-meldung .buch-like-hinweis { opacity:0; visibility:hidden; }
@media (prefers-reduced-motion:reduce) { .buch-like-hinweis,.buch-like-meldung { transition:none; transform:none; } }

@media (max-width:900px) {
  .buch-klappentext-zweispalter { column-count:1; }
}
@media (max-width:768px) {
	.buch-kopf { padding-top:1.25rem; }
  .buch-kopf-innen { grid-template-columns:1fr; width:calc(100vw - 2rem); }
  .buch-kopf-cover,.buch-kopf-copy,.buch-kopf-aktion { grid-column:1; }
  .buch-cover-rahmen { width:min(16rem,70vw); }
  .buch-kopf-aktion { width:100%; }
	.buch-kopf-copy { text-align:center; padding-inline:1rem; } /* Text 32 px vom Rand, Box bleibt bei 16 px (M 06.10. 20:24) */
	.buch-titel { font-size:clamp(2.8rem,13vw,4.1rem); }
	.buch-kopf { margin-top:calc(-1 * var(--kopf-hoehe)); padding-top:calc(var(--kopf-hoehe) + 1.25rem); }
	.buch-kopf-fuss-innen { width:calc(100vw - 2rem); }
	.buch-editionen-anzahl-3,.buch-editionen-anzahl-5,.buch-editionen-anzahl-6 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .buch-regal { grid-template-columns:1fr; }
  .buch-karte { grid-template-columns:6.5rem minmax(0,1fr); }
  .buch-fakten-zeile { grid-template-columns:1fr; gap:.35rem; }
	.buch-weltbild-innen { width:calc(100vw - 2rem); grid-template-columns:1fr; gap:2rem; }
	.buch-serienkopf { display:block; }
	.buch-serienkopf .mm-knopf { margin-top:.25rem; }
	.buch-serienkarten { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-inline:contain; padding-bottom:.75rem; margin-right:-1rem; padding-right:1rem; }
	.buch-serienkarte { flex:0 0 min(68vw,13rem); scroll-snap-align:start; }
}

/* MetaBar „Projektfortschritt“, Entwurf D (abgenommen 06.10.2026 11:17; docs/mockups/metabar/). Phasenfarben aus der Console, Band = Papier weich. */
.buch-mb { --mb-breite:1152px; --mb-rand:clamp(20px,4vw,64px); --mb-gold-ink:#8a6631; --mb-rule:rgba(33,31,27,.16); display:block; background:var(--paper-soft); color:var(--ink); font-family:var(--font-ui); border:0; }
.buch-mb summary { list-style:none; cursor:pointer; }
.buch-mb summary::-webkit-details-marker { display:none; }
.buch-mb-zeile { max-width:calc(var(--mb-breite) + 2 * var(--mb-rand)); margin:0 auto; padding:0 var(--mb-rand); min-height:82px; box-sizing:border-box; display:grid; grid-template-columns:auto 1fr auto 24px; align-items:center; gap:32px; }
.buch-mb-zeile:focus-visible { outline:2px solid var(--mb-gold-ink); outline-offset:-4px; }
.buch-mb-label,.buch-mb-zonentitel { color:var(--ink); font:600 12px/1 var(--font-ui); text-transform:uppercase; letter-spacing:.22em; }
.buch-mb-label { min-width:190px; }
.buch-mb-wert { color:var(--ink); font:600 12px/1 var(--font-ui); text-transform:uppercase; letter-spacing:.14em; white-space:nowrap; font-variant-numeric:tabular-nums; }
.buch-mb-zahl,.buch-mb-ring-zahl { font-variant-numeric:tabular-nums; }
/* Segmentierter Balken: Segmentbreite = Phasengewicht, Füllung = Phasenwert, Farbe je Phase */
.buch-mb-balken { display:flex; gap:3px; height:10px; }
.buch-mb-seg { position:relative; background:var(--progress-track); border-radius:1px; }
.buch-mb-seg::after { content:""; position:absolute; inset:0 auto 0 0; width:var(--f); background:var(--c); border-radius:inherit; }
.buch-mb-seg:first-child { border-radius:5px 1px 1px 5px; }
.buch-mb-seg:last-child { border-radius:1px 5px 5px 1px; }
.buch-mb-n { position:absolute; top:20px; left:0; font:500 11px/1 var(--font-ui); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-dim); white-space:nowrap; }
.buch-mb-seg.is-aktiv .buch-mb-n { font-weight:700; color:var(--ink); }
.buch-mb-seg:last-child .buch-mb-n { left:auto; right:0; }
.buch-mb-n.zu-breit { visibility:hidden; }
/* Meilenstein „Manuskript fertig“ (Entwurf A, Maxim 06.10.2026, 19:07; docs/mockups/metabar/meilenstein.html): Kreis am Ende der Kette,
   offen Goldring, erreicht gefüllt; Beschriftung über dem Punkt, erreicht in Gold. Rückt per negativem Rand an den Balken. */
.buch-mb-zeile { grid-template-columns:auto 1fr auto auto 24px; }
.buch-mb-zeile .buch-mb-balken { margin-right:-22px; }
.buch-mb-meilenstein { position:relative; display:block; width:12px; height:12px; box-sizing:border-box; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--mb-gold-ink); }
.buch-mb-meilenstein.is-erreicht { background:var(--mb-gold-ink); box-shadow:none; }
.buch-mb-meilenstein-n { position:absolute; bottom:20px; right:0; font:500 11px/1 var(--font-ui); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-dim); white-space:nowrap; }
.buch-mb-meilenstein.is-erreicht .buch-mb-meilenstein-n { color:var(--mb-gold-ink); font-weight:700; }
.buch-mb-phasen li.buch-mb-meilenstein-zeile > span:first-child::before { background:transparent; box-shadow:inset 0 0 0 1.5px var(--mb-gold-ink); }
.buch-mb-phasen li.buch-mb-meilenstein-zeile.is-erreicht { color:var(--mb-gold-ink); font-weight:700; }
.buch-mb-phasen li.buch-mb-meilenstein-zeile.is-erreicht > span:first-child::before { background:var(--mb-gold-ink); box-shadow:none; }
.buch-mb-chevron { width:12px; height:12px; border-right:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink); rotate:45deg; translate:0 -3px; justify-self:center; transition:rotate .25s ease, translate .25s ease, border-color .15s ease; }
.buch-mb[open] .buch-mb-chevron { rotate:-135deg; translate:0 3px; }
.buch-mb-zeile:hover .buch-mb-chevron { border-color:var(--mb-gold-ink); }
/* Aufgeklappt: Trennlinie über die volle Bandbreite, Inhalt in 1152 px */
.buch-mb-auf { border-top:1px solid var(--mb-rule); }
.buch-mb-innen { max-width:calc(var(--mb-breite) + 2 * var(--mb-rand)); margin:0 auto; padding:8px var(--mb-rand) 24px; box-sizing:border-box; display:grid; grid-template-columns:260px 1fr; grid-template-areas:"ring phasen" "buch aus"; }
.buch-mb-innen.ohne-ausgaben { grid-template-areas:"ring phasen" "buch buch"; }
.buch-mb-zone { min-width:0; padding:18px 28px 0; border-left:1px solid var(--mb-rule); }
.buch-mb-zonentitel { margin:0 0 10px; color:var(--ink-dim); }
.buch-mb-zone-ring { grid-area:ring; border-left:0; padding-left:0; display:flex; align-items:center; gap:16px; }
.buch-mb-zone-ring .buch-mb-zonentitel { margin:0; }
.buch-mb-zone-phasen { grid-area:phasen; }
.buch-mb-zone-buch { grid-area:buch; border-left:0; padding-left:0; border-top:1px solid var(--mb-rule); margin-top:14px; }
.buch-mb-zone-ausgaben { grid-area:aus; border-top:1px solid var(--mb-rule); margin-top:14px; }
.buch-mb-ring-wrap { position:relative; width:64px; }
.buch-mb-ring { --ring-strich:8px; width:100%; aspect-ratio:1; border-radius:50%; -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--ring-strich)),#000 calc(100% - var(--ring-strich))); mask:radial-gradient(farthest-side,transparent calc(100% - var(--ring-strich)),#000 calc(100% - var(--ring-strich))); }
.buch-mb-ring-zahl { position:absolute; inset:0; display:grid; place-items:center; text-align:center; font:400 18px/1 var(--font-author); color:var(--ink); }
.buch-mb-phasen { list-style:none; margin:0; padding:0; display:grid; gap:5px; }
.buch-mb-phasen li { display:grid; grid-template-columns:1fr 48px; align-items:center; gap:12px; font:400 13px/1.3 var(--font-ui); color:var(--ink-dim); }
.buch-mb-phasen li[aria-current] { color:var(--ink); font-weight:700; }
.buch-mb-phasen li > span:first-child::before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--c); margin-right:9px; vertical-align:1px; }
.buch-mb-phasen li.buch-mb-zukunft { opacity:.7; }
.buch-mb-phasen li.buch-mb-zukunft > span:first-child::before { background:transparent; box-shadow:inset 0 0 0 1.5px var(--c); }
.buch-mb-z { white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums; }
.buch-mb-haken { width:14px; height:14px; fill:none; stroke:var(--ink-dim); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vertical-align:-2px; }
.buch-mb-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.buch-mb-dl { margin:0; display:grid; gap:3px; }
.buch-mb-dl div { display:grid; grid-template-columns:64px 1fr; gap:12px; font:400 13px/1.4 var(--font-ui); }
.buch-mb-dl dt { color:var(--ink-dim); font-weight:400; }
.buch-mb-dl dd { margin:0; color:var(--ink); font-weight:600; }
.buch-mb-tabelle-wrap { overflow-x:auto; }
.buch-mb-tabelle { border-collapse:collapse; font:400 13px/1.4 var(--font-ui); color:var(--ink); font-variant-numeric:tabular-nums; }
.buch-mb-tabelle th,.buch-mb-tabelle td { text-align:left; padding:2px 12px 2px 0; white-space:nowrap; vertical-align:top; }
.buch-mb-tabelle thead th { font-weight:400; color:var(--ink-dim); padding-bottom:4px; }
.buch-mb-tabelle td { font-weight:600; }
.buch-mb-tabelle tbody th { position:sticky; left:0; background:var(--paper-soft); font-weight:400; color:var(--ink-dim); }
.buch-mb-tabelle td.buch-mb-leer { font-weight:400; color:var(--ink-dim); }
@media (min-width:1024px) {
	.buch-mb-phasen { grid-template-rows:repeat(2,auto); grid-auto-flow:column; grid-auto-columns:1fr; column-gap:40px; }
	.buch-mb-innen.ohne-ausgaben .buch-mb-zone-buch .buch-mb-dl { grid-template-rows:repeat(2,auto); grid-auto-flow:column; grid-auto-columns:minmax(0,260px); column-gap:40px; }
	.buch-mb-tabelle { width:100%; }
	.buch-mb-tabelle th,.buch-mb-tabelle td { padding-right:24px; }
}
@media (min-width:1024px) and (max-width:1279px) { .buch-mb-tabelle th,.buch-mb-tabelle td { padding-right:14px; } }
/* Handy und Tablet: Ring links (104 px), Phasen rechts daneben, darunter Buchdaten, dann Ausgaben (Tabelle wischbar) */
@media (max-width:1023px) {
	.buch-mb-innen { grid-template-columns:104px minmax(0,1fr); grid-template-areas:"ring phasen" "buch buch" "aus aus"; column-gap:20px; padding:0 20px 28px; }
	.buch-mb-zone { border-left:0; border-top:1px solid var(--mb-rule); padding:22px 0; margin-top:0; }
	.buch-mb-zone-ring { border-top:0; align-self:center; }
	.buch-mb-zone-phasen { border-top:0; }
	.buch-mb-zone-ring .buch-mb-zonentitel { display:none; }
	.buch-mb-ring-wrap { width:104px; }
	.buch-mb-ring { --ring-strich:12px; }
	.buch-mb-ring-zahl { font-size:28px; }
}
@media (max-width:600px) {
	.buch-mb-zeile { min-height:0; padding:16px 20px 22px; grid-template-columns:minmax(0,1fr) auto 24px; column-gap:10px; row-gap:8px; grid-template-areas:"label wert chev" "balken balken balken"; }
	.buch-mb-label { grid-area:label; min-width:0; }
	.buch-mb-balken { grid-area:balken; height:8px; gap:2px; }
	.buch-mb-wert { grid-area:wert; font-size:13px; }
	.buch-mb-chevron { grid-area:chev; }
	.buch-mb-zeile { grid-template-areas:"label wert chev" "balken balken ms"; }
	.buch-mb-zeile .buch-mb-balken { margin-right:0; }
	.buch-mb-meilenstein { grid-area:ms; justify-self:center; width:10px; height:10px; }
	.buch-mb-meilenstein-n { display:none; }
	.buch-mb-n,.buch-mb-nicht-handy { display:none; }
}
/* Bewegung: nur mit Skript (Klasse „js“) und ohne „weniger Bewegung“; ohne Skript steht alles sofort voll */
@property --sweep { syntax:"<angle>"; inherits:false; initial-value:360deg; }
@keyframes buch-mb-ring-zeichnen { from { --sweep:0deg; } to { --sweep:360deg; } }
@media (prefers-reduced-motion: no-preference) {
	.js .buch-mb-balken .buch-mb-seg::after { width:0; transition:width .45s cubic-bezier(.22,1,.36,1); transition-delay:calc(var(--i) * 110ms); }
	.js .buch-mb-balken.aufgetragen .buch-mb-seg::after { width:var(--f); }
	.js .buch-mb-ring { --sweep:0deg; -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--ring-strich)),#000 calc(100% - var(--ring-strich))),conic-gradient(#000 var(--sweep),transparent 0); -webkit-mask-composite:source-in; mask:radial-gradient(farthest-side,transparent calc(100% - var(--ring-strich)),#000 calc(100% - var(--ring-strich))) intersect,conic-gradient(#000 var(--sweep),transparent 0); }
	.js .buch-mb-ring.gezeichnet { animation:buch-mb-ring-zeichnen .9s cubic-bezier(.22,1,.36,1) .1s both; }
}
@media (prefers-reduced-motion: reduce) { .buch-mb-chevron { transition:none; } }

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   W7 · Events, Entwurf D (03.10.2026). Portiert elementweise aus docs/mockups/events/. */
.mm-events { --reading: min(42.5rem, calc(100vw - 60px)); }
.mm-events .event-kopf .article-meta dl { margin:0; display:grid; gap:.55rem; }
.mm-events .event-kopf .article-meta > dl:last-child dt { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.mm-events .event-kopf .article-meta dd { margin:0; color:var(--ivory-dim); font:var(--type-ui); }
.mm-events .event-kopf .article-meta dd strong { color:var(--ivory); font-weight:500; }
.mm-events .art-marke { margin:0 0 .9rem; color:var(--gold-bright); font:500 13px/1.4 var(--font-ui); letter-spacing:.11em; text-transform:uppercase; }
.mm-events .fakten-zeile { margin:0 0 1.6rem; padding-bottom:1.4rem; border-bottom:var(--haarlinie); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 1.5rem; }
.mm-events .fakten-zeile > div { min-width:0; padding-top:.7rem; border-top:var(--haarlinie); }
.mm-events .fakten-zeile dt { margin:0 0 .3rem; color:var(--ivory-dim); font:500 12px/1.4 var(--font-ui); letter-spacing:.12em; text-transform:uppercase; }
.mm-events .fakten-zeile dd { color:var(--ivory); font:500 16px/1.4 var(--font-ui); text-shadow:0 2px 22px rgba(0,0,0,.6); }
.mm-events .fakten-zeile dd[data-ton="warn"] { color:var(--gold-bright); }
.mm-events .fakten-zeile dd[data-ton="aus"] { color:var(--fehlerrot); }
.mm-events .knopf { display:inline-flex; align-items:center; justify-content:center; gap:.6rem; } /* Look: gemeinsame Knopfregel bei „Knöpfe & Links“ */
.mm-events .knopf.leise, .presse-kopf .knopf.leise { background:transparent; color:var(--gold-bright); box-shadow:inset 0 0 0 1px var(--rule); }
.mm-events .knopf.leise:hover, .presse-kopf .knopf.leise:hover { background:rgba(221,184,128,.08); }
.mm-events .band { background:var(--surface); border-top:var(--haarlinie); padding:clamp(2.8rem,5vw,4.5rem) 0; }
.mm-events .band-innen { width:var(--shell); margin:0 auto; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(2rem,6vw,6rem); align-items:start; }
.mm-events .reservierung h2 { margin:0 0 .4rem; color:var(--ivory); font:400 clamp(1.8rem,3vw,2.6rem)/1.1 var(--font-author); letter-spacing:-.015em; text-wrap:balance; }
.mm-events .reservierung .hinweis { margin:0; color:var(--ivory-dim); font:var(--type-ui); }
.mm-events .band-d:has(.streifen-karte) { background:var(--night); border-top:1px solid rgba(240,236,226,.16); padding:clamp(3.5rem,5vw,4.5rem) 0; }
.mm-events .band-d .band-innen:has(.streifen-karte) { align-items:center; }
.mm-events .band-d .streifen-karte { --karte:calc(var(--shell) * .58); width:100%; }
.mm-events .band-d .streifen-karte .related { position:relative; }
.mm-event-detail .mit-karte { background:var(--paper); padding-top:clamp(5rem,8vw,7rem); }
.mm-event-detail .mit-karte > .entry-content { padding-top:0; }
.mm-event-detail .angehaengt { background:var(--paper); padding:0 0 clamp(5rem,8vw,7rem); }
.mm-event-detail .angehaengt .karussell { --karte:var(--wide-block); width:var(--wide-block); margin:0 auto; }
.mm-event-detail .angehaengt .related { position:relative; }

.mm-events .fakten-flaeche { background:#fff; padding-top:clamp(4rem,7vw,6rem); }
.mm-events .fakten-d { width:var(--wide-block); margin:0 auto; padding:0 0 clamp(4rem,7vw,6rem); display:grid; grid-template-columns:1fr; gap:3.5rem; background:transparent; color:var(--ink); }
.mm-events .fakt { min-width:0; padding-top:1.1rem; border-top:1px solid rgba(33,31,27,.14); }
.mm-events .fakt-ort,.mm-events .fakt-zeit { border-top-color:var(--gold); }
.mm-events .fakt-name { margin:0 0 .9rem; display:flex; align-items:center; gap:.6rem; color:var(--gold-bright); font:500 12px/1.4 var(--font-ui); letter-spacing:.12em; text-transform:uppercase; }
.mm-events .fakt-icon { flex:none; color:var(--gold); }
.mm-events .fakt-wert { margin:0 0 .3rem; color:var(--ink); font:400 20px/1.35 var(--font-author); text-wrap:balance; }
.mm-events .fakt-neben { margin:0 0 .3rem; color:var(--ink-dim); font:400 18px/1.5 var(--font-author); }
.mm-events .fakt-link { display:flex; align-items:center; width:fit-content; min-height:0; padding-block:.55rem; margin-block:-.2rem; color:var(--gold-bright); font:600 14px/1.3 var(--font-ui); text-decoration:underline; text-decoration-color:currentColor; text-underline-offset:.3em; }
.mm-events .fakt-wert + .fakt-link,.mm-events .fakt-neben + .fakt-link { margin-top:.5rem; }
.mm-events .fakt-link:hover { color:var(--ink); }
.mm-events .fakt-link:focus-visible,.mm-events .fakt-wert a:focus-visible { outline:2px solid var(--gold-bright); outline-offset:3px; }
.mm-events .fakt-meldung { margin:.2rem 0 0; min-height:1.5em; color:var(--ink); font:500 14px/1.5 var(--font-ui); }
.mm-events .fakt-ort .fakt-wert,.mm-events .fakt-zeit .fakt-wert { font-size:clamp(1.9rem,3vw,2.6rem); line-height:1.12; letter-spacing:-.01em; margin-bottom:.55rem; }
.mm-events .fakt-ort .fakt-icon,.mm-events .fakt-zeit .fakt-icon { width:26px; height:26px; }
.mm-events .anfrage { background:var(--night); color:var(--ivory); padding:clamp(3rem,6vw,5rem) 0; }
.mm-events .anfrage-innen { width:var(--wide-block); margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem 3rem; }
.mm-events .anfrage p { margin:0; max-width:38ch; color:var(--ivory-dim); font:400 1.3rem/1.45 var(--font-author); }
.mm-events .anfrage p strong { color:var(--ivory); font-weight:400; }

/* Übersicht D: gleiche Spaltenkanten, ganze Zeile klickbar, Bilder 16:9. */
.mm-events .termine { list-style:none; margin:0; padding:0; }
.mm-events .zeile { --z-ink:var(--ink); --z-dim:var(--ink-dim); --z-linie:var(--paper-rule); position:relative; display:grid; grid-template-columns:8.5rem minmax(0,1fr) 16rem; gap:1.5rem clamp(1.5rem,4vw,3rem); align-items:start; margin-inline:-1.5rem; padding:2rem 1.5rem; border-top:1px solid var(--z-linie); color:var(--z-ink); transition:background-color 260ms var(--ease); }
.mm-events .zeile:last-child { border-bottom:1px solid var(--z-linie); }
.mm-events .termine-dunkel .zeile { --z-ink:var(--ivory); --z-dim:var(--ivory-dim); --z-linie:var(--rule); border-top:0; border-bottom:0; }
.mm-events .termine-dunkel .zeile + .zeile { border-top:1px solid var(--z-linie); }
.mm-events .zeile:hover,.mm-events .zeile:focus-within { background:var(--paper-white); }
.mm-events .termine-dunkel .zeile:hover,.mm-events .termine-dunkel .zeile:focus-within { background:rgba(240,236,226,.06); }
.mm-events .datum { display:grid; gap:.2rem; justify-items:start; }
.mm-events .datum .tag { display:block; font:300 clamp(3.6rem,5.2vw,4.75rem)/.9 var(--font-author); letter-spacing:-.035em; font-variant-numeric:lining-nums; }
.mm-events .datum .punkt { font-size:.5em; margin-left:.04em; }
.mm-events .datum .monat { display:block; margin-top:-.3rem; color:var(--gold-bright); font:400 1.35rem/1.15 var(--font-author); }
.mm-events .datum .jahrzahl { display:block; margin-top:.2rem; color:var(--z-dim); font:600 12px/1.4 var(--font-ui); letter-spacing:.12em; }
.mm-events .datum .jahrzahl::before { content:""; display:block; width:2.25rem; height:1px; margin:.6rem 0 .5rem; background:var(--gold); }
.mm-events .kennzeile { margin:0 0 .5rem; color:var(--z-dim); font:600 14px/1.4 var(--font-ui); letter-spacing:.04em; font-variant-caps:all-small-caps; text-transform:lowercase; }
.mm-events .titel { margin:0 0 .6rem; font:400 1.5rem/1.3 var(--font-author); text-wrap:balance; }
.mm-events .titel a { color:inherit; text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:.22em; text-decoration-thickness:1px; }
.mm-events .titel a::after { content:""; position:absolute; inset:0; }
.mm-events .titel a:hover { text-decoration-thickness:2px; }
.mm-events .zeile:has(.titel a:focus-visible) { outline:2px solid var(--gold-bright); outline-offset:-2px; }
.mm-events .ort-zeit { margin:0; color:var(--z-dim); font:var(--type-ui); }
.mm-events .weiter { margin:.4rem 0 0; }
.mm-events .rueck { position:relative; z-index:1; display:inline-flex; align-items:center; min-height:var(--ziel); color:var(--gold-bright); font:600 14px/1.3 var(--font-ui); text-decoration:underline; text-underline-offset:.3em; }
.mm-events .marke { margin:.6rem 0 0; color:var(--gold-bright); font:600 13px/1.4 var(--font-ui); letter-spacing:.04em; }
.mm-events .ist-abgesagt .titel,.mm-events .ist-abgesagt .datum { opacity:.6; }
.mm-events .motiv { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.mm-events .motiv-leer { background:var(--paper-soft); }
.mm-events .bisher { background:var(--paper); color:var(--ink); padding:clamp(4rem,7vw,6rem) 0; }
.mm-events .bisher-innen { width:var(--shell); margin:0 auto; }
.mm-events .bisher h2 { margin:0 0 2.5rem; font:400 clamp(1.8rem,3vw,2.6rem)/1.1 var(--font-author); letter-spacing:-.015em; }
.mm-events .jahr { margin:3rem 0 1rem; color:var(--ink-dim); font:400 1.5rem/1.3 var(--font-author); }
.mm-events .jahr:first-of-type { margin-top:0; }
.mm-events .jahr-wechsel,.mm-events .jahr-dunkel { margin:0 -1.5rem; padding:1.1rem 1.5rem .9rem; border-top:var(--haarlinie-papier); }
.mm-events .jahr-dunkel { color:var(--ivory-dim); border-color:var(--rule); }

/* Startseiten-Widget: kompakter, ohne Bild; Blockattribut anzahl, Vorgabe 5. */
.startseite-termine { background:var(--night); color:var(--ivory); padding:clamp(4rem,7vw,6rem) 0; border-top:var(--haarlinie); }
.startseite-termine .st-innen { width:var(--wide-block); margin:0 auto; }
.startseite-termine .st-kopf { display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem; margin-bottom:1.5rem; }
.startseite-termine .st-kopf h2 { margin:0; color:var(--ivory); font:400 clamp(2rem,3.2vw,2.8rem)/1.1 var(--font-author); letter-spacing:-.015em; }
.startseite-termine .st-alle { display:inline-flex; align-items:center; min-height:var(--ziel); color:var(--gold-bright); font:600 14px/1.3 var(--font-ui); text-decoration:underline; text-underline-offset:.3em; }
.startseite-termine .st-alle:hover { color:var(--ivory); }
.startseite-termine .st-liste .zeile { grid-template-columns:6.5rem minmax(0,1fr); padding-block:1.4rem; align-items:center; }
.startseite-termine .st-liste .datum .tag { font-size:clamp(2.6rem,3.6vw,3.2rem); }
.startseite-termine .st-liste .datum .monat { font-size:1.1rem; }
.startseite-termine .st-liste .titel { font-size:1.25rem; margin-bottom:.35rem; }
.startseite-termine .st-trenner { margin:0 -1.5rem; padding:1.1rem 1.5rem .9rem; border-top:var(--haarlinie); color:var(--ivory-dim); font:400 1.25rem/1.3 var(--font-author); list-style:none; }
.startseite-termine .st-trenner + .zeile { border-top:var(--haarlinie); }
/* Getönte Fassung (Presseseite): dunkle Tinte statt Schwarz, hebt sich vom Papier ab, ohne zum Nachtband zu werden */
.startseite-termine.st-getoent { background:var(--ink); border-top:0; }
/* Helle Fassung: gleiche Zeilen auf Papier */
.startseite-termine.st-hell { background:transparent; color:var(--ink); padding:clamp(2.25rem,4.5vw,3.5rem) 0; border-top:var(--haarlinie-papier); }
.startseite-termine.st-hell .st-kopf h2 { color:var(--ink); font:400 clamp(1.75rem,2.6vw,2.25rem)/1.15 var(--font-author); letter-spacing:-.01em; }
.startseite-termine.st-hell .st-alle { color:var(--gold-tinte); }
.startseite-termine.st-hell .st-alle:hover { color:var(--ink); }
.startseite-termine.st-hell .st-trenner, .startseite-termine.st-hell .st-trenner + .zeile { border-top:var(--haarlinie-papier); }
.startseite-termine.st-hell .st-trenner { color:var(--ink-dim); }

@media (min-width:760px) {
  .mm-events .fakten-d { grid-template-columns:repeat(2,minmax(0,1fr)); gap:3.5rem 3rem; }
  .mm-events .fakt-breit { grid-column:span 2; }
}
@media (min-width:1180px) { .mm-events .fakten-d { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:900px) { .mm-events .band-innen { grid-template-columns:1fr; } .mm-events .band-d .streifen-karte { --karte:var(--shell); } }
@media (max-width:759px) {
  .mm-events .event-kopf .article-head,.mm-events .band-innen { width:calc(100vw - 60px); }
  .mm-events .fakten-zeile { grid-template-columns:1fr; }
  .mm-events .anfrage-innen,.mm-events .fakten-d,.mm-events .bisher-innen,.startseite-termine .st-innen { width:calc(100vw - 60px); }
  .mm-events .zeile,.startseite-termine .st-liste .zeile { grid-template-columns:1fr; margin-inline:-1rem; padding-inline:1rem; }
  .mm-events .datum { display:flex; align-items:baseline; gap:.9rem; }
  .mm-events .datum .tag { font-size:3rem; }
  .mm-events .datum .jahrzahl { margin:0; }
  .mm-events .datum .jahrzahl::before { display:none; }
  .mm-events .jahr-wechsel,.mm-events .jahr-dunkel,.startseite-termine .st-trenner { margin-inline:-1rem; padding-inline:1rem; }
}
@media (pointer:coarse) { .mm-events .fakt-link { min-height:var(--ziel); padding-block:0; margin-block:0; } }

* { box-sizing: border-box; }

html {
  background: var(--night);
  scrollbar-color: var(--gold) var(--night);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--night);
  color: var(--ivory);
  font:var(--type-prose);
  text-rendering: optimizeLegibility;
}

::selection { background: var(--gold); color: var(--night); }
a { color: inherit; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 5px;
}

.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 100;
  min-height: var(--ziel);
  padding: .75rem 1rem;
  background: var(--gold);
  color: var(--night);
  font: 600 13px/1.4 var(--font-ui);
  transform: translateY(-180%);
}

.skip-link:focus { transform: translateY(0); }

/* Kopf: Signatur, Menü */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.signature {
  min-height: var(--ziel);
  display: inline-flex;
  align-items: center;
}

.site-nav { display: flex; gap: clamp(1.2rem, 2.5vw, 2.6rem); }

.site-nav a {
  min-height: var(--ziel);
  display: inline-flex;
  align-items: center;
  text-underline-offset: .45em;
}

.site-nav a:hover { color: var(--ivory); text-decoration: underline; }

/* Artikelkopf: Titel und Datum */
.article-head {
  width: var(--shell);
  margin: 0 auto;
  padding: clamp(4.5rem, 7.5vw, 7rem) 0 clamp(3.5rem, 5.5vw, 5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(17rem, .75fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: end;
}

/* Die Headline ist in jedem Kopf dasselbe Element (Maxim 05.10.2026) – Blog, Archiv, Events, Recht eingeschlossen;
   nur Startseite und Buch-Detail haben eigene Köpfe. */
.mm-header h1 {
  max-width: 14ch;
  margin: 0;
  color: var(--ivory);
  font: 400 clamp(3.4rem, 5.8vw, 5.25rem)/.98 var(--font-author);
  letter-spacing: -.025em;
  text-wrap: balance;
}

.article-meta {
  padding-bottom: .55rem;
  border-bottom: var(--haarlinie);
}

.article-meta p { margin: 0; }

.article-meta .date {
  margin-bottom: .65rem;
  color: var(--gold-bright);
  font: 500 13px/1.5 var(--font-ui);
}

.article-meta .description {
  max-width: 31ch;
  color: var(--ivory-dim);
  font: 400 16px/1.62 var(--font-ui);
}

/* Gutenberg: ordinary post_content begins */
.entry-content {
  margin-top: 0;
  padding: clamp(5rem, 8vw, 7rem) 0 clamp(5rem, 8vw, 7rem);
  background: var(--paper);
  color: var(--ink);
}

.entry-content > p,
.entry-content > h2,
.entry-content > h3,
.entry-content > ul,
.entry-content > ol {
  width: var(--reading);
  margin-left: auto;
  margin-right: auto;
}

.entry-content > p {
  margin-top: 0; margin-bottom: 1.55em; color: var(--ink-dim);
  text-align: justify; text-justify: inter-word;
  /* Blocksatz braucht Silbentrennung, sonst reißen Lücken auf (Polish 28.09.2026, am Telefon schon seit 26.09.). */
  -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 6 3 3;
  text-wrap: pretty;
}

.entry-content > p:first-of-type {
  margin-bottom: 2.2em;
  color: var(--ink);
  font-size: clamp(1.3rem, 2vw, 1.55rem);
  line-height: 1.5;
}

.entry-content > p:first-of-type::first-letter {
  float: left;
  margin: .06em .12em 0 0;
  color: var(--gold-bright);
  font: 400 5.15em/.7 var(--font-author);
}

@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  .entry-content > p:first-of-type::first-letter {
    float: none;
    margin: 0 .48em 0 0;
    font-family: var(--font-author);
    font-size: inherit;
    line-height: inherit;
    -webkit-initial-letter: 3;
    initial-letter: 3;
  }
}

.entry-content h2 {
  margin-top: 2.8em;
  margin-bottom: .8em;
  color: var(--ink);
  font: 400 clamp(2rem, 3.6vw, 3rem)/1.12 var(--font-author);
  letter-spacing: -.015em;
  text-wrap: balance;
}

.entry-content h3 {
  margin-top: 2.5em;
  margin-bottom: .7em;
  color: var(--gold-bright);
  font: 600 18px/1.35 var(--font-world);
  letter-spacing: .04em;
}

/* Gutenberg core/pullquote */
.wp-block-pullquote {
  position: relative;
  width: 100%;
  margin: clamp(4.5rem, 7vw, 6.5rem) auto;
  padding: clamp(5rem, 7vw, 6.5rem) 0;
  overflow: hidden;
  background: var(--night);
  border: 0;
  color: var(--ivory);
  text-align: left;
}

.wp-block-pullquote blockquote {
  position: relative;
  width: min(68rem, calc(100vw - 6rem));
  margin: 0 auto;
}

.wp-block-pullquote blockquote::before,
.wp-block-pullquote blockquote::after {
  position: absolute;
  color: var(--gold-bright);
  font: 400 clamp(4.75rem, 8vw, 7.5rem)/1 var(--font-author);
  opacity: .96;
}

.wp-block-pullquote blockquote::before {
  content: "“";
  top: -.35em;
  left: 0;
}

.wp-block-pullquote blockquote::after {
  right: 0;
  bottom: -.58em;
}

.wp-block-pullquote p {
  max-width: 22ch;
  margin: 0 auto;
  color: var(--ivory);
  font: italic 300 clamp(2.65rem, 5.2vw, 5rem)/1.04 var(--font-author);
  letter-spacing: -.02em;
  text-align: center;
  text-wrap: balance;
}

/* Gutenberg core/image alignwide */
.wp-block-image.alignwide {
  width: var(--wide-block);
  margin: clamp(4rem, 6vw, 5rem) auto;
}

.wp-block-image.alignwide img {
  width: 100%;
  max-height: 680px;
  display: block;
  object-fit: cover;
  object-position: 50% 42%;
  filter: saturate(.76) contrast(1.04);
}

.wp-block-image figcaption {
  max-width: 60ch;
  margin: .9rem 0 0;
  color: var(--gold-bright);
  font: 500 12px/1.55 var(--font-ui);
  letter-spacing: .05em;
}

/* Gutenberg core/separator */
.wp-block-separator {
  width: 6rem;
  height: 1px;
  margin: 5rem auto;
  border: 0;
  background: var(--gold);
}

.entry-content > p.event-line { color: var(--ink); }
.event-line {
  width: var(--reading);
  margin: 4rem auto 0;
  padding: 1.4rem 0;
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  color: var(--ink);
  font: 600 13px/1.6 var(--font-ui);
  text-align: center;
}

/* Beitragsende: Autorenkasten, Weitere Geschichten (nicht Teil des Artikeltexts) */
.article-after {
  width: 100%;
  margin: 0;
  background: var(--night);
  color: var(--ivory);
  border-top: 1px solid rgba(240, 236, 226, .16);
}

.author-note {
  width: min(64rem, calc(100vw - 6rem));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

.author-note img {
  width: 150px;
  height: 260px;
  display: block;
  object-fit: cover;
  object-position: 50% 22%;
  filter: grayscale(1) contrast(1.05);
}

.author-note h2 {
  margin: 0 0 .55rem;
  font: 400 2rem/1.15 var(--font-author);
}

.author-note h2 a {
  color: var(--ivory);
  text-underline-offset: .2em;
}

.author-note h2 a:hover { text-decoration-color: var(--gold-bright); }

.author-note p {
  margin: 0 0 1rem;
  font:var(--type-ui);
}

.author-note p strong { font-weight: 500; }
.author-note p a { color: var(--gold-bright); text-underline-offset: .25em; }

.related {
  width: min(72rem, calc(100vw - 6rem));
  margin: 6rem auto 0;
  display: grid;
  grid-template-columns: minmax(18rem, .8fr) minmax(0, 1.2fr);
  align-items: stretch;
  background: var(--surface);
}

.related-media { min-height: 380px; overflow: hidden; }

.related-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}

.related:hover .related-media img { transform: scale(1.025); }

.related-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(2.5rem, 6vw, 6rem);
  color: var(--ivory);
}

.related-copy h2 {
  max-width: 17ch;
  margin: 0 0 1rem;
  color: var(--ivory);
  font: 400 clamp(2.1rem, 4vw, 3.5rem)/1.08 var(--font-author);
  text-wrap: balance;
}

.related-copy p {
  max-width: 40ch;
  margin: 0 0 1.6rem;
  color: var(--ivory-dim);
  font:var(--type-ui);
}

.text-link {
  min-height: var(--ziel);
  display: inline-flex;
  align-items: center;
  color: var(--gold-bright);
  font:var(--type-label);
  letter-spacing:var(--track-label);
  line-height:1;
  text-underline-offset: .45em;
  text-transform: uppercase;
}

/* Fuß */
.site-footer {
  padding: 4rem 0 5rem;
  display: grid;
  gap: 4rem;
  color: var(--ivory-dim);
  font: 400 13px/1.7 var(--font-ui);
}

.footer-signature { width: 190px; height: auto; display: block; margin-bottom: 1rem; }
.site-footer strong { color: var(--gold-bright); font-weight: 600; letter-spacing: .08em; }

@media (max-width: 1024px) {
  :root {
    --shell: calc(100vw - 5rem);
    --wide-block: calc(100vw - 5rem);
  }
  .article-head {
    padding: 3.75rem 0 3.25rem;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    /* Titel und Infoblock unten zusammenhalten: ohne das verteilte das Raster den Platz der Mindesthöhe zwischen die
       beiden (Biografie: 123 statt 28 px; Maxim, 28.09.2026: „die Abstände nicht so riesig“). */
    align-content: end;
  }

  .mm-header h1 {
    max-width: 12ch;
    font-size: clamp(3.25rem, 8.5vw, 4.25rem);
  }
  .article-meta { max-width: 30rem; border-bottom: 0; }

  .wp-block-pullquote blockquote {
    width: min(42rem, calc(100vw - 5rem));
    padding-right: clamp(4.5rem, 10vw, 6rem);
    padding-left: clamp(4.5rem, 10vw, 6rem);
  }
  .wp-block-pullquote p { font-size: clamp(2.3rem, 7.6vw, 3.6rem); }

  .author-note { width: var(--shell); grid-template-columns: 120px 1fr; }
  .author-note img { width: 120px; height: 230px; }

  .related { width: var(--shell); grid-template-columns: 1fr; }
  .related-media { min-height: 330px; }
  .site-footer { gap: 3rem 2rem; }
  .site-footer > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 500px) {

  body { line-height: 1.72; }
  .site-nav { gap: 1rem; }
  .article-head { padding-top: 3rem; }
  .mm-header h1 { max-width: 11ch; font-size: clamp(2.75rem, 13vw, 3.45rem); }

  .wp-block-image.alignwide { margin-top: 3.5rem; margin-bottom: 3.5rem; }
  .wp-block-image figcaption { padding: 0; }
  .wp-block-pullquote {
    margin-top: 4rem;
    margin-bottom: 4rem;
    padding: 4.5rem 0;
  }
  .wp-block-pullquote blockquote::before {
    top: -.38em;
    left: 0;
  }
  .wp-block-pullquote blockquote::after {
    right: 0;
    bottom: -.62em;
  }
  .wp-block-pullquote p {
    max-width: 14ch;
    font-size: clamp(2.25rem, 10.5vw, 3rem);
    text-align: center;
  }

  .article-after { padding-bottom: 5rem; }
  .author-note { width: var(--shell); grid-template-columns: 1fr; gap: 1.75rem; }
  .author-note img { width: 100%; height: 180px; object-position: 50% 28%; }
  .author-note h2 { font-size: 1.6rem; }

  .related { width: var(--shell); margin-left: auto; margin-right: auto; }
  .related-media { min-height: 280px; }
  .related-copy { padding: 2.5rem 1.25rem 3rem; }
  .site-footer > div:first-child { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .related-media img { transition: none; }
}
/* Arbeitsstand 25.09.2026 · mit Beitragsbild: Menü, Hüter:in-Block, Fuß, Beitragsbild */
/* Die Signatur schreibt sich beim Laden einmal von links nach rechts (Live, 25.09.2026) */
@keyframes signatur-schreiben {
  from { clip-path: inset(0 100% 0 0); opacity: .35; }
  to { clip-path: inset(0 0 0 0); opacity: 1; }
}
.signature svg { animation: signatur-schreiben 1.3s cubic-bezier(.22, .7, .2, 1) .15s backwards; }
@media (prefers-reduced-motion: reduce) { .signature svg { animation: none; } }
/* Kräftigerer Kopf: große Signatur, mehr Raum (Live „bolder“, 25.09.2026) */
.signature svg { width: 210px; }
.site-nav a { font: 500 15px/1.3 var(--font-ui); letter-spacing: .02em; color: rgba(240, 236, 226, .7); text-decoration: none; transition: color .2s; }
/* Menü in der Sans (Shape, 26.09.2026): Serif bleibt Text und Überschriften vorbehalten */
/* Menü-Hierarchie (Live „polish“, 25.09.2026): nur die aktuelle Seite hell und golden unterstrichen */
.site-nav a:hover, .site-nav a:focus-visible { color: var(--ivory); text-decoration: none; }
.site-nav a[aria-current="page"] { text-decoration-thickness: 2px; text-underline-offset: .6em; }
@media (max-width: 500px) {
  .signature svg { width: 170px; }
  .site-nav a { font-size: 16px; }
}
/* Details (Live „polish“, 25.09.2026): ruhiger Fokusrahmen, Signatur reagiert leise */
.site-nav a:focus-visible, .signature:focus-visible { outline: 1px solid var(--gold-bright); outline-offset: 6px; }
.signature svg { transition: opacity .25s; }
.signature:hover svg { opacity: .82; }
/* Burger-Menü fürs Telefon (Shape, 26.09.2026): drei 1-px-Linien auf ganzen Pixeln (20 × 11 px), die mittlere
   kürzer (13 px, rechtsbündig, beim Zeigen voll); offen ein kleines goldenes X (~14 px) an derselben Stelle.
   „Menü“ bleibt für Screenreader im Knopf. */
.nur-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.burger { position: relative; display: block; width: 20px; height: 11px; }
.burger::before, .burger::after, .burger > span {
  content: ""; position: absolute; left: 0; width: 20px; height: 1px; background: currentColor;
  transition: top .32s var(--ease), transform .32s var(--ease), opacity .18s;
}
.burger::before { top: 0; }
/* Mitte 13 von 20 px per scaleX (13 = 20 × .65, rechtsbündig), damit das Zeigen kein Layout auslöst (polish) */
.burger > span { top: 5px; transform: scaleX(.65); transform-origin: 100% 50%; }
@media (hover: hover) { .nav-klappe > summary:hover .burger > span { transform: none; } }
/* Touch: kein grauer Tipp-Blitz von iOS, stattdessen der eigene Druckzustand in Gold */
.site-header a, .nav-klappe > summary { -webkit-tap-highlight-color: transparent; }
.nav-klappe > summary:active { color: var(--gold-bright); }
.burger::after { top: 10px; }
.nav-klappe[open]:not(.schliesst) .burger::before { top: 5px; transform: rotate(45deg); }
.nav-klappe[open]:not(.schliesst) .burger::after { top: 5px; transform: rotate(-45deg); }
.nav-klappe[open]:not(.schliesst) .burger > span { opacity: 0; }
/* Burger ↔ X in zwei Takten (animate, 26.09.2026): auf = erst zur Mitte zusammen, dann kreuzen; zu = erst
   entkreuzen, dann auseinander, zuletzt kommt die kurze Mitte zurück */
.burger::before, .burger::after {
  transition: transform .18s var(--ease), top .2s var(--ease) .12s;
}
.burger > span { transition: transform .32s var(--ease), opacity .12s linear .16s; }
.nav-klappe[open]:not(.schliesst) .burger::before, .nav-klappe[open]:not(.schliesst) .burger::after {
  transition: top .16s var(--ease), transform .26s var(--ease) .1s;
}
.nav-klappe[open]:not(.schliesst) .burger > span { transition: transform .32s var(--ease), opacity .08s linear; }
.nav-panel { display: contents; }
.nav-kanaele { display: none; }
@media (prefers-reduced-motion: reduce) {
  .signature svg, .burger::before, .burger::after, .burger > span { transition: none; }
}
/* Mattglas-Kopf (Live, 25.09.2026; auf alle Beiträge ausgeweitet 26.09.2026): volle Breite, ohne Linie,
   durchscheinend. Kopfhöhe als Token, damit Hero mit und ohne Beitragsbild exakt gleich sitzt (26.09.2026). */
:root { --kopf-hoehe: 112px; }
@media (max-width: 500px) { :root { --kopf-hoehe: 84px; } }
/* Kopf schwebt (26.09.2026, Maxim): fest oben, der Inhalt gleitet unter dem Glas durch. Der Platzhalter oben im
   body hält Hero und Titel exakt an ihrem Ort; Anker springen nicht unter den Kopf. Keine Dauer-Transformation:
   sie würde das Glas-Menü (position: fixed) im Kopf einsperren. */
html { scroll-padding-top: var(--kopf-hoehe); }
body { padding-top: var(--kopf-hoehe); }
.site-header {
  min-height: var(--kopf-hoehe);
  width: auto; max-width: none; margin: 0;
  padding-inline: calc((100vw - var(--shell)) / 2);
  position: absolute; top: var(--wp-admin--admin-bar--height, 0px); left: 0; right: 0; z-index: 20; isolation: isolate;
  background: transparent;
  border-bottom: 0;
}
/* Mit JavaScript fest oben (Verweilen, dann hinaus); ohne steht er oben auf der Seite und scrollt normal weg */
html.kopf-js .site-header { position: fixed; }
/* Glas als eigene Ebene: oben voll weichgezeichnet und leicht abgedunkelt, nach unten auslaufend (25.09.2026) */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 7, 6, .34) 0%, rgba(7, 7, 6, .12) 60%, transparent 100%);
  -webkit-backdrop-filter: blur(10px) saturate(.9);
  backdrop-filter: blur(10px) saturate(.9);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 100%);
}
/* Läuft der Text unter dem Kopf durch: Glas zum Durchgucken (Maxim, 26.09.2026). Es reicht etwas unter den Kopf
   (--glas-auslauf), dunkelt nur leicht ab (Maxims Wahl: etwa ein Drittel, bewusst unter dem Lesbarkeits-Mindestmaß
   für die Menüschrift über hellem Text) und läuft in mehreren Stufen weich aus. */
:root { --glas-auslauf: 72px; }
.site-header::after {
  content: ""; position: absolute; inset: 0 0 calc(-1 * var(--glas-auslauf)) 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(7, 7, 6, .22) 0%, rgba(7, 7, 6, .2) 34%, rgba(7, 7, 6, .14) 56%,
    rgba(7, 7, 6, .07) 74%, rgba(7, 7, 6, .025) 88%, transparent 100%);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 48%, rgba(0, 0, 0, .75) 64%, rgba(0, 0, 0, .4) 80%, rgba(0, 0, 0, .12) 92%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 48%, rgba(0, 0, 0, .75) 64%, rgba(0, 0, 0, .4) 80%, rgba(0, 0, 0, .12) 92%, transparent 100%);
  opacity: 0;
}
html.kopf-schwebt .site-header::after { opacity: 1; }
/* Über hellem Text: Menüpunkte etwas heller, mit ganz feinem Schatten, damit sie trotz leichterem Glas lesbar bleiben */
html.kopf-schwebt .site-nav .nav-liste a { color: var(--ivory); text-shadow: 0 0 16px rgba(7, 7, 6, .42), 0 2px 32px rgba(7, 7, 6, .32); }
/* Signatur: gleiche Farbe wie die Navigation, über hellem Text derselbe weiche Schatten */
.signature { color: var(--ivory); }
.signature svg { display: block; height: auto; }
html.kopf-schwebt .signature svg { filter: drop-shadow(0 0 14px rgba(7, 7, 6, .4)) drop-shadow(0 2px 28px rgba(7, 7, 6, .3)); }
html.kopf-schwebt .site-nav .nav-liste a:hover, html.kopf-schwebt .site-nav .nav-liste a[aria-current="page"] { color: var(--ivory); }
/* Bewegung des Kopfs (animate, 26.09.2026): Hereingleiten und Einrasten mit weichem Auslauf; Glas, Schrift-
   und Signaturschatten blenden gemeinsam über, statt umzuspringen */
@media (prefers-reduced-motion: no-preference) {
  .site-header::after { transition: opacity .4s var(--ease); }
  .site-header.kopf-rastet { transition: transform .36s var(--ease); }
  .site-nav .nav-liste a { transition: color .2s, text-shadow .4s var(--ease); }
  .signature svg { transition: opacity .25s, filter .4s var(--ease); }
}
/* Offenes Menü: kein Gleiten am Kopf, die Transformation würde das Glas einsperren */
html.menue-offen .site-header { transition: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header::before { background: linear-gradient(180deg, rgba(7, 7, 6, .65) 0%, transparent 100%); }
  .site-header::after { background: linear-gradient(180deg, var(--night-90) 0%, var(--night-90) 60%, transparent 100%); }
}
/* Zitat mit Zeichen als Kopf (Live, 25.09.2026): ein großes Zeichen mittig direkt über dem Satz,
   kein Schlusszeichen, Luft 1,4 eingebacken. Löst den Abstand der Eckzeichen zum Text. */
.wp-block-pullquote { padding-block: clamp(4.9rem, 7.7vw, 7rem); }
.wp-block-pullquote blockquote { display: flex; flex-direction: column; align-items: center; padding: 0; }
.wp-block-pullquote blockquote::before {
  position: static; display: block; height: .42em; margin-bottom: .11em;
  font-size: clamp(6rem, 10vw, 9.5rem); line-height: .78;
}
.wp-block-pullquote blockquote::after { content: none; }
@media (max-width: 500px) {
  .wp-block-pullquote blockquote { width: var(--reading); padding: 0; }
  .wp-block-pullquote blockquote::before { font-size: 6rem; }
}
/* Autorenkasten, Farbe und Zustände (Live, 26.09.2026): hellerer Text, Links sichtbar, ruhiger Fokus */
.author-note p { color: rgba(240, 236, 226, .84); }
.author-note h2 a { text-decoration-color: var(--gold); text-decoration-thickness: 1px; transition: color .2s, text-decoration-color .2s; }
.author-note h2 a:hover { color: var(--gold-bright); }
.author-note p a { text-decoration-color: rgba(212, 180, 131, .5); text-decoration-thickness: 1px; }
.author-note p a:hover { text-decoration-color: var(--gold-bright); }
.author-note a:focus-visible { outline: 1px solid var(--gold-bright); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .author-note h2 a { transition: none; } }
/* Autorenkasten als Ganzes mittig über dem Beitragskasten (Maxim, 26.09.2026): Der Kasten schrumpft auf
   Foto + Text (der Text endet bei 38rem), statt 64rem breit links zu kleben. Am Telefon bleibt er volle Breite. */
@media (min-width: 501px) { .author-note { width: fit-content; max-width: min(64rem, var(--shell)); } }
.nav-klappe > summary { display: none; }
/* Breit: Menü sichtbar, auch wenn die Klappe zu ist (ohne JavaScript startet sie geschlossen) */
@media (min-width: 761px) { .nav-klappe::details-content { content-visibility: visible; } }
.nav-liste { display: flex; gap: clamp(1.2rem, 2.5vw, 2.6rem); }
/* Menüs kommen als <ul><li> aus wp_nav_menu() — ohne Aufzählungspunkte (Maxim 05.10.2026). Footer-Menüs hatten es schon (.site-footer ul). */
.nav-liste, .nav-kanaele, .nav-liste li, .nav-kanaele li { list-style: none; }
.site-nav a[aria-current="page"] { color: var(--ivory); text-decoration: underline; text-decoration-color: var(--gold); }
/* Aktiver Bereich: „Bücher“ trägt auf allen Buchflächen die Klasse statt aria-current (das hat nur der Unterpunkt) — gleiche Auszeichnung */
.site-nav .nav-liste > li.mm-bereich-aktiv > a { color: var(--ivory); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: .6em; }
html.kopf-schwebt .site-nav .nav-liste > li.mm-bereich-aktiv > a { color: var(--ivory); }
/* Untermenü (Maxim 05.10.2026, 17:16; schlicht, kein Mega-Menü): breit aufklappbar bei Hover und Tastaturfokus, schmal immer sichtbar */
.nav-liste .sub-menu { list-style: none; margin: 0; padding: 0; }
@media (min-width: 761px) {
  .nav-liste > li { position: relative; display: flex; align-items: center; }
  .nav-liste .sub-menu {
    position: absolute; top: 100%; left: -1.1rem; min-width: 15rem; z-index: 30;
    padding: .4rem 0; background: rgba(7, 7, 6, .94); border: 1px solid rgba(221, 184, 128, .28);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    visibility: hidden; opacity: 0; transform: translateY(-4px);
  }
  /* Unsichtbare Brücke, damit der Zeiger auf dem Weg vom Auslöser ins Untermenü die Hover-Fläche nicht verlässt */
  .nav-liste .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -1rem; height: 1rem; }
  .nav-liste li:hover > .sub-menu, .nav-liste li:focus-within > .sub-menu { visibility: visible; opacity: 1; transform: none; }
  .nav-liste li.mm-unter-zu > .sub-menu { visibility: hidden; opacity: 0; }
  .nav-liste .sub-menu a { display: flex; width: 100%; padding: 0 1.1rem; min-height: var(--ziel); white-space: nowrap; color: rgba(240, 236, 226, .82); text-shadow: none; }
  .nav-liste .sub-menu a:hover, .nav-liste .sub-menu a:focus-visible { color: var(--gold-bright); }
  .nav-liste .sub-menu a:focus-visible { outline-offset: -3px; }
  html.kopf-schwebt .site-nav .nav-liste .sub-menu a { text-shadow: none; }
}
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  html.nav-bewegt .nav-liste .sub-menu { transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
  html.nav-bewegt .nav-liste li:hover > .sub-menu, html.nav-bewegt .nav-liste li:focus-within > .sub-menu { transition-delay: 0s; }
}
@media (max-width: 760px) {
  .nav-klappe[open] .nav-liste .sub-menu { display: grid; justify-items: center; gap: 0; }
  .nav-klappe[open] .nav-liste .sub-menu a { min-height: var(--ziel); font-size: 17px; color: rgba(240, 236, 226, .78); }
  /* Unterpunkte sichtbar eingerückt (die Liste ist mittig gesetzt, darum Einzug plus Strich davor) */
  .nav-klappe[open] .nav-liste .sub-menu a::before { content: "–"; margin: 0 .55rem 0 1.25rem; color: var(--gold); }
}

/* Depesche-Box (Maxim, 26.09.2026). Telefon wie ein Brief: mittig, „Die Depesche“ zwischen Goldstrichen, Unterschrift
   als Gruß. Ab 761 px als Titelzeile: große Zeile über die Breite, darunter Text links und Vorname, E-Mail, Knopf
   in einer Zeile rechts. Referenzen: entwuerfe/…/blog-detail/referenzen-depesche/. */
.hueter { padding: clamp(3.8rem, 8vw, 6rem) 0; background: var(--surface); border-top: var(--haarlinie); }
.hueter-innen { width: var(--shell); margin: 0 auto; display: grid; justify-items: center; text-align: center; }
.hueter-name { --zier-laenge: 2.2rem; --zier-abstand: .9rem; --zier-farbe: rgba(221, 184, 128, .7); margin: 0; color: var(--gold-bright); font:var(--type-label); letter-spacing:var(--track-label); text-transform: uppercase; }
.hueter h2 { margin: 1.1rem 0 0; color: var(--ivory); font: 400 clamp(3.4rem, 5.8vw, 5.25rem)/1.06 var(--font-author); letter-spacing: -.02em; text-wrap: balance; }
/* Depesche-Überschrift = Rolle headline, dieselben Stufen wie der Artikeltitel (typeset 27.09.) */
@media (max-width: 1024px) { .hueter h2 { font-size: clamp(3.25rem, 8.5vw, 4.25rem); } }
@media (max-width: 500px) { .hueter h2 { font-size: clamp(2.75rem, 13vw, 3.45rem); } }
.hueter-unten { width: 100%; display: grid; justify-items: center; }
.hueter-text { margin: 1.1rem 0 0; max-width: 30rem; color: var(--ivory-dim); font:var(--type-ui); text-wrap: pretty; }
.hueter-rechts { width: 100%; margin-top: 2.2rem; display: grid; gap: 1.1rem; text-align: left; }
.hueter-form { display: grid; gap: 1rem; }
.hueter-form button { width: 100%; }
.hueter-klein { margin: 0; text-align: center; color: rgba(240, 236, 226, .5); font: 400 13px/1.55 var(--font-ui); }
.hueter-klein a { color: rgba(240, 236, 226, .72); text-underline-offset: .2em; }
.hueter-gruss { display: block; margin-top: 2.4rem; width: 120px; height: auto; opacity: .75; } /* dieselbe Datei wie die Fuß-Signatur */
/* Telefon: Briefkopf in einer Zeile (bei 12 px und langen Strichen brach er um); unter 360 px ohne Striche */
@media (max-width: 760px) {
  .hueter-name { --zier-laenge: 1rem; --zier-abstand: .55rem; letter-spacing: .1em; white-space: nowrap; }
}
@media (max-width: 359px) { .hueter-name { --zier-laenge: 0px; --zier-abstand: 0px; } }
@media (min-width: 761px) {
  .hueter-innen { justify-items: start; text-align: left; }
  .hueter-name { --zier-laenge: 0px; --zier-abstand: 0px; }
  .hueter h2 { margin-top: 1rem; max-width: 16ch; }
  .hueter-unten { margin-top: 2.2rem; padding-top: 2rem; border-top: var(--haarlinie);
    grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); column-gap: clamp(3rem, 6vw, 6rem); align-items: start; justify-items: stretch; }
  .hueter-text { margin-top: 0; }
  .hueter-rechts { margin-top: 0; container-type: inline-size; }
  .hueter-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; align-items: end; }
  .hueter-form button { width: auto; white-space: nowrap; }
  .hueter-klein { text-align: left; }
  .hueter-gruss { display: none; }
}
/* Mindestplatz (Maxim, 26.09.2026): Reicht die Breite nicht für beide Felder und den Knopf in einer Zeile,
   rutscht der Knopf unter die Felder, statt die Felder übereinanderzuschieben. */
@container (max-width: 42rem) {
  .hueter-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  .hueter-form button { grid-column: 1 / -1; width: 100%; }
}
.feld { display: grid; gap: .45rem; }
.feld label { color: var(--ivory-dim); font: 500 13px/1.3 var(--font-ui); }
/* Feldmuster auf Nacht (Depesche, Kaufbox; BU4u 5a): Rand --feld-rand, 16 px (sonst zoomt iOS beim Antippen),
   Gold-Einfügemarke, Platzhalter 4,7:1. Höhe und Grund bleiben je Stelle. */
.feld input, .feld textarea, .kb-form input {
  width: 100%; min-width: 0; /* sonst behält das Feld ~209 px und läuft ins Nachbarfeld */
  box-sizing: border-box;
  border: 1px solid var(--feld-rand);
  border-radius: 0;
  color: var(--ivory);
  font: 400 16px/1.3 var(--font-ui);
  caret-color: var(--gold);
}
.feld input::placeholder, .feld textarea::placeholder, .kb-form input::placeholder { color: rgba(201, 194, 180, .62); }
.feld input:focus-visible, .feld textarea:focus-visible, .kb-form input:focus-visible { outline: var(--fokus); outline-offset: 2px; }
.feld input[aria-invalid="true"], .feld textarea[aria-invalid="true"], .kb-form input[aria-invalid="true"] { border-color: var(--fehlerrot); }
.feld input, .feld textarea { min-height: 48px; padding: .7rem .9rem; background: var(--night); }
.feld textarea { min-height: 10rem; resize: vertical; line-height: 1.6; }
.kb-form input { min-height: var(--ziel, 44px); padding: 0 1rem; background: rgba(0, 0, 0, .4); }
/* Look des Knopfs: gemeinsame Knopfregel bei „Knöpfe & Links“; hier nur das Eindrücken */
@media (prefers-reduced-motion: no-preference) { .hueter-form button:active { transform: translateY(1px); } }
.honig { display: none !important; }
/* Anmeldung: Zustände (harden, 26.09.2026). Meldung zwischen Text und Formular; nach dem Dank verschwindet das
   Formular. Fehler in gedämpftem Rot, zusätzlich immer im Wortlaut benannt. */
.hueter-meldung { margin: 0; font: 500 16px/1.6 var(--font-ui); color: var(--ivory); }
.hueter-meldung:empty { margin-bottom: -1.1rem; } /* leer: keinen Rasterabstand erzeugen */
/* Formular-Rückmeldung (BU4u 5a): Depesche und Kaufbox sprechen dieselben Zustände (data-status). Erfolg Hellgold, Fehler --fehlerrot */
.hueter-meldung[data-status="danke"], .kb-meldung[data-status="danke"], .kb-meldung[data-status="bestaetigt"] { color: var(--gold-bright); }
.hueter-meldung[data-status="email"], .hueter-meldung[data-status="fehler"], .hueter-meldung[data-status="zuviel"],
.kb-meldung[data-status="email"], .kb-meldung[data-status="fehler"], .kb-meldung[data-status="zuviel"] { color: var(--fehlerrot); }
.hueter-meldung[data-status="danke"] + .hueter-form { display: none; }
.feld-hinweis { color: rgba(240, 236, 226, .5); font-weight: 400; }
.hueter-form button[disabled] { opacity: .7; cursor: progress; }

.site-footer { grid-template-columns: 1.4fr 1fr 1fr 1fr; row-gap: 3rem; }
.fuss-zitat { margin: 0 0 1rem; color: var(--ivory-dim); font: italic 400 16px/1.5 var(--font-author); max-width: 26ch; }
.fuss-titel { margin: 0 0 1.1rem; color: var(--gold-bright); font: 600 12px/1.4 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
/* Fußlisten (Maxim 07.10.2026: Abstände „eigenartig“): 32 px je Link plus Lücke stand so weit wie Titel zu Liste,
   die Spalten zerfielen. 28 px Klickfläche (Mindestmaß 24 px), keine Lücke; Touch behält 44 px (unten). */
.site-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.site-footer a { display: inline-flex; min-height: 28px; align-items: center; color: var(--ivory-dim); text-decoration: none; }
.site-footer a:hover { color: var(--ivory); text-decoration: underline; text-underline-offset: .3em; }
.fuss-recht {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem;
  padding-top: 1.6rem;
}
.fuss-recht p { margin: 0; }
.fuss-recht a + a { margin-left: 1.5rem; }
/* Rechtliches ist seit 04.10.2026 ein WordPress-Menü (<ul class="fuss-recht-links">): nebeneinander statt
   des Fußlisten-Rasters .site-footer ul (Maxim 05.10.2026: „müssen horizontal nebeneinander sein“) */
.site-footer .fuss-recht-links { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
/* Fuß zweitönig über die volle Breite (Live, 26.09.2026): Band in Fläche, Rechtszeile als dunkler
   Streifen ganz unten; Inhalt bleibt in der Shell-Breite */
.site-footer {
  width: auto; max-width: none; margin: 0;
  padding-inline: calc((100vw - var(--shell)) / 2);
  padding-bottom: 0;
  background: var(--surface);
  border-top: 1px solid rgba(240, 236, 226, .1);
}
.fuss-recht {
  margin-inline: calc((var(--shell) - 100vw) / 2);
  padding: 1.4rem calc((100vw - var(--shell)) / 2) 1.6rem;
  border-top: 0;
  background: var(--night);
}
/* Fuß-Spalten (Live, 26.09.2026): Linkgruppe rechts, jede Spalte so breit wie ihr Inhalt, bündig mit
   der rechten Kante wie Impressum/Datenschutz; Luft liegt neben der Signatur. Unter 1025 px wie bisher. */
@media (min-width: 1025px) {
  .site-footer { grid-template-columns: minmax(0, 1fr) repeat(3, auto); column-gap: clamp(3.5rem, 6vw, 6rem); }
  .fuss-recht { align-items: center; }
}

.wp-block-image.alignwide img { height: auto; }

/* Bildblock-Stile (WordPress-Blockstile für core/image, pro Beitrag wählbar).
   Pro Bild einstellbar über --ausschnitt (vertikaler Bildausschnitt) und --bild-hoehe. */
.wp-block-image.is-style-breit { width: var(--wide-block); margin: clamp(3.5rem, 6vw, 5rem) auto; }
.wp-block-image.is-style-breit img {
  display: block; width: 100%; height: auto;
  max-height: var(--bild-hoehe, 680px);
  object-fit: cover; object-position: 50% var(--ausschnitt, 42%);
  filter: saturate(.85);
}
.wp-block-image.is-style-ganz { width: min(var(--bild-breite, 620px), var(--reading)); /* Telefon: Kante wie der Text (27.09.) */ margin: clamp(3.5rem, 6vw, 5rem) auto; }
.wp-block-image.is-style-ganz img { display: block; width: 100%; height: auto; box-shadow: var(--schatten-papier); }
/* Seitenbild (typeset 28.09.2026): scharfes Hochformat, Desktop links neben dem Text, darunter gestapelt über dem
   ersten Absatz. Gerade Kanten wie der Rest der Seite. Gestapelt an der Textkante, nie am Bildschirmrand (Maxim). */
.mm-seitenbild {
  width: min(16rem, 45vw);
  width: min(16rem, 45vw, 45svh); /* quer gehaltenes Telefon: höchstens 60 % der Bildschirmhöhe (adapt 28.09.2026) */
  margin: 0 0 1.5rem calc((100% - var(--reading)) / 2);
  float: none;
}
.mm-seitenbild img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 22%; }
/* Tablet (Maxim, 03.10.2026): Foto links, der zweite Absatz umfließt es. */
@media (min-width: 761px) and (max-width: 1279px) {
  .mm-seitenbild { float: left; margin: .35rem 1.75rem 1rem calc((100% - var(--reading)) / 2); }
}
/* Telefon (Maxim, 28.09.2026): unter dem ersten Absatz, so breit wie der Text, quadratisch. */
@media (max-width: 760px) {
  .mm-seitenbild { width: var(--reading); }
  .mm-seitenbild img { aspect-ratio: 1 / 1; }
}
/* Sprungmarken (Biografie, 28.09.2026; Maxim: „eher als Sprungmarke innerhalb des Textes“): Listen-Block im Stil
   „Sprungmarken“ mit Links auf Absätze (HTML-Anker im Editor), ohne Überschriften im Text. Kurze Goldlinie darüber wie
   bei „Die Depesche“, keine Aufzählungszeichen. Ein Eintrag mit der Klasse „randzeile-extra“ steht abgesetzt darunter
   (Wacken). Unter 1280 px ein ruhiger Block nach dem ersten Absatz. list-style-type "\200B" statt none: Safari nimmt
   sonst die Listen-Bedeutung für Vorleseprogramme weg. */
.entry-content > .is-style-sprungmarken {
  display: grid; gap: .75rem;
  margin-top: 0; margin-bottom: 2.4rem; padding: 0 0 1.4rem;
  border-bottom: var(--haarlinie-papier);
  list-style-type: "\200B";
  color: var(--ink-dim);
  font: 400 15px/1.5 var(--font-author);
}
.entry-content > .is-style-sprungmarken::before,
.entry-content > .is-style-sprungmarken .randzeile-extra::before {
  content: ""; display: block; width: 2.2rem; height: 1px; margin-bottom: .45rem; background: var(--gold); opacity: .7;
}
.entry-content > .is-style-sprungmarken li { margin: 0; padding: 0; }
.entry-content > .is-style-sprungmarken .randzeile-extra { margin-top: 1.1rem; }
.entry-content > .is-style-sprungmarken .randzeile-extra::before { margin-bottom: 1.2rem; }
.entry-content > .is-style-sprungmarken a {
  color: var(--ink);
  text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
  text-decoration-color: var(--gold-bright-75);
  transition: text-decoration-color .2s;
}
.entry-content > .is-style-sprungmarken a:hover { text-decoration-color: var(--ink); }
/* Sprungziel leuchtet kurz golden auf, damit man sieht, wo man gelandet ist (ohne Überschrift im Text). */
.entry-content > p[id] { scroll-margin-top: 2rem; }
@media (prefers-reduced-motion: no-preference) {
  .entry-content > p:target { animation: sprungziel 1.8s var(--ease); }
}
@keyframes sprungziel {
  from { background-color: rgba(221, 184, 128, .28); box-shadow: 0 0 0 .6rem rgba(221, 184, 128, .28); }
  to { background-color: transparent; box-shadow: 0 0 0 .6rem transparent; }
}
@media (min-width: 1280px) {
  /* Drei Spalten auf Seiten mit Porträt: links das Porträt, Mitte der Text (680 px, dieselbe Lage wie ohne), rechts
     ein Platz, der leer bleiben darf (Maxim, 28.09.2026: „Speichert die Option, dass da rechts etwas sein kann. Lasst
     es jetzt erst mal weg.“). Füllen lässt er sich mit einer Liste im Stil „Sprungmarken“. Erst ab 1280 px: darunter
     ist der Rand neben der Textspalte schmaler als 13 rem. Die fünf inneren Spalten ergeben zusammen genau --shell,
     außen bleibt der Rand von Kopf und Fuß. */
  .entry-content:has(> .mm-seitenbild) {
    /* Randspalte höchstens 16 rem, Abstand zum Text mindestens 2,75 rem; was übrig bleibt, geht in den Abstand
       (1280 px: 13 rem Spalte, 44 px Abstand; ab 1440 px: 16 rem, 76 px – wie vor der rechten Spalte). */
    --rand-spalte: min(16rem, calc((var(--shell) - var(--reading)) / 2 - 2.75rem));
    --rand-luecke: calc((var(--shell) - var(--reading)) / 2 - var(--rand-spalte));
    display: grid;
    grid-template-columns:
      [aussen-start] 1fr
      [portraet-start] var(--rand-spalte) [portraet-end]
      var(--rand-luecke) [text-start] var(--reading) [text-end] var(--rand-luecke)
      [marken-start] var(--rand-spalte) [marken-end]
      1fr [aussen-end];
    align-content: start;
  }
  .entry-content:has(> .mm-seitenbild) > * { grid-column: text; }
  .entry-content:has(> .mm-seitenbild) > .is-style-breit,
  .entry-content:has(> .mm-seitenbild) > .is-style-randlos { grid-column: aussen; }
  /* Beide Randspalten reichen über alle Zeilen des Texts (99 = mehr Absätze, als eine Seite hat; leere Zeilen sind 0 px
     hoch) und bleiben beim Lesen stehen, bis der Text endet (Maxim, 28.09.2026). */
  .entry-content:has(> .mm-seitenbild) > .mm-seitenbild,
  .entry-content:has(> .mm-seitenbild) > .is-style-sprungmarken {
    grid-row: 1 / span 99; align-self: start;
    position: sticky; top: 2rem;
    width: auto; margin: 0; float: none;
  }
  .entry-content:has(> .mm-seitenbild) > .mm-seitenbild { grid-column: portraet; margin-top: .3rem; }
  .entry-content:has(> .mm-seitenbild) > .is-style-sprungmarken {
    grid-column: marken;
    padding: 0; border-bottom: 0;
  }
}
.wp-block-image.is-style-randlos { width: 100%; margin: clamp(3.5rem, 6vw, 5rem) 0; background: var(--night); }
.wp-block-image.is-style-randlos img {
  display: block; width: 100%;
  height: var(--bild-hoehe, 520px);
  object-fit: cover; object-position: 50% var(--ausschnitt, 96%);
}
@media (max-width: 500px) {
  .wp-block-image.is-style-randlos img { height: min(var(--bild-hoehe, 520px), 70vh); }
}

.featured { width: fit-content; max-width: var(--wide-block); margin: 0 auto clamp(3rem, 6vw, 5rem); }
.featured img { display: block; width: auto; max-width: 100%; max-height: min(78vh, 760px); height: auto; }

@media (max-width: 1024px) {
  .site-footer { grid-template-columns: 1fr 1fr 1fr; }
  .fuss-marke { grid-column: 1 / -1; }
}
/* Textrand am Telefon (Maxim, 26.09.2026: „ein bisschen dicht am Rand“, dann „30“): 30 statt 20 px. Kopf, Text,
   Bilder und Fuß bleiben auf derselben Kante. Ab 501 px gelten 40 px. */
@media (max-width: 500px) {
  :root { --shell: calc(100vw - 3.75rem); --wide-block: calc(100vw - 3.75rem); }
}
/* Textspalte (typeset, 26.09.2026; Seiten-Critique Befund 3, Audit P2). Breite in rem statt ch: 65ch hing an der
   Schriftgröße, der Einstieg lief dadurch 897 px breit, der Fließtext 680 px, 108 px Versatz unter der Initiale.
   42,5rem = die abgenommenen 680 px, jetzt für alle Absätze gleich (am Desktop ~80 Zeichen, bewusst beibehalten).
   Grundschrift in rem, damit die Schriftgröße des Browsers greift; bei 16 px Standard pixelgleich. */
:root { --reading: min(42.5rem, calc(100vw - 3rem)); }
@media (max-width: 1024px) { :root { --reading: min(42.5rem, calc(100vw - 5rem)); } }
body { font-size: 1.1875rem; }
/* Telefon: Flattersatz statt Blocksatz. Bei 26–39 Zeichen je Zeile riss der Blocksatz Löcher; die Silbentrennung
   bleibt, damit der rechte Rand ruhig flattert. */
@media (max-width: 500px) {
  :root { --reading: calc(100vw - 3.75rem); } /* Textrand 30 px (Maxim) bleibt, siehe oben */
  body { font-size: 1.125rem; }
  .entry-content > p:first-of-type { font-size: 1.3125rem; }
  .entry-content > p { text-align: start; text-justify: auto; }
}
/* Polish nach Audit (26.09.2026, P3): Sperrung nur noch für Versalien, auf gemischter Schrift höchstens .04em;
   großes Zitat am Telefon mit mehr Zeilenabstand (5 Zeilen bei 1,04 klebten); Fußlinks auf Touch-Geräten mit
   44 px Tippfläche, dafür ohne Zwischenabstand. */
.article-meta .date { letter-spacing: .04em; }
/* Zeilenlänge der UI-Texte am Desktop (Audit P2): Hüter:in-Text und Autorentext liefen mit 83/84 Zeichen */
.author-note p { max-width: 38rem; }
.event-line { letter-spacing: .03em; }
@media (max-width: 500px) { .wp-block-pullquote p { line-height: 1.12; } }
@media (pointer: coarse) {
  .site-footer ul { gap: 0; }
  .site-footer a { min-height: var(--ziel); }
  /* 44 px Fingerfläche: Titel rückt an seine Liste, Linktext etwas größer, sonst stehen die Einträge weiter auseinander als die Gruppe zusammenhält */
  .fuss-titel { margin-bottom: .35rem; }
  .fuss-menue a { font-size: 15px; }
}
/* Burger-Modus bis 760 px (adapt, 26.09.2026): darunter passt die Menüleiste nicht mehr (Messung: bei 501 px
   fehlten drei, bei 568 px zwei, bei 667 px ein Punkt). Kopfgröße bleibt an 500 px gebunden (--kopf-hoehe). */
@media (max-width: 760px) {
  .site-nav a:nth-child(n+3) { display: inline-flex; }
  .signature { position: relative; z-index: 2; }
  .nav-klappe > summary {
    position: relative; z-index: 2;
    display: flex; justify-content: center; align-items: flex-start;
    width: var(--ziel); height: var(--ziel); padding-top: 16px; margin-right: -12px;
    color: var(--ivory); list-style: none; cursor: pointer;
    transition: color .2s;
  }
  .nav-klappe[open]:not(.schliesst) > summary { color: var(--gold-bright); }
  .nav-klappe > summary:focus-visible { outline: 1px solid var(--gold-bright); outline-offset: -2px; }
  .nav-klappe > summary::-webkit-details-marker { display: none; }
  /* Offen: Mattglas randlos über den ganzen Bildschirm; so leicht weichgezeichnet, dass Bild und Textzeilen
     dahinter als Formen erkennbar bleiben (Maxim, 26.09.2026: „durch das Glas durchgucken“) */
  .nav-klappe[open] .nav-panel {
    position: fixed; inset: 0; z-index: 1;
    display: flex; flex-direction: column; align-items: center;
    padding: var(--kopf-hoehe) calc((100vw - var(--shell)) / 2) max(calc(var(--kopf-hoehe) + 3rem), env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain;
    background:
      radial-gradient(ellipse 80% 42% at 50% 44%, rgba(7, 7, 6, .34) 0%, transparent 100%),
      linear-gradient(180deg, var(--night-50) 0%, rgba(7, 7, 6, .64) 45%, rgba(7, 7, 6, .74) 100%);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    backdrop-filter: blur(12px) saturate(1.1);
    animation: glas-auf .5s var(--ease) both;
  }
  .nav-klappe[open] .nav-liste { display: grid; justify-items: center; gap: .15rem; margin-top: auto; }
  /* Aufbau (animate 26.09., angepasst 28.09.2026 – Maxim: „animate open of mobile menue“): Glas zieht scharf, die
     Links steigen gestaffelt auf und werden dabei scharf wie das Glas, dann zeichnet sich die Goldlinie, zuletzt
     die Kanäle. Nach rund 0,8 s steht alles; Schließen bleibt schnell. */
  .nav-klappe[open] .nav-liste a {
    display: flex; align-items: center; justify-content: center; width: fit-content; min-height: 48px;
    color: var(--ivory); font: 500 20px/1.2 var(--font-ui); letter-spacing: .02em;
    animation: zeile-auf .5s var(--ease) both;
  }
  .nav-klappe[open] .nav-liste a:nth-child(1) { animation-delay: 60ms; }
  .nav-klappe[open] .nav-liste a:nth-child(2) { animation-delay: 100ms; }
  .nav-klappe[open] .nav-liste a:nth-child(3) { animation-delay: 140ms; }
  .nav-klappe[open] .nav-liste a:nth-child(4) { animation-delay: 180ms; }
  .nav-klappe[open] .nav-liste a:nth-child(5) { animation-delay: 220ms; }
  .nav-klappe[open] .nav-liste a:nth-child(6) { animation-delay: 260ms; }
  .nav-klappe[open] .nav-liste a[aria-current="page"] { text-decoration-thickness: 1px; text-underline-offset: .45em; }
  .nav-klappe[open] .nav-kanaele {
    display: flex; justify-content: center; gap: .5rem; width: min(18rem, 100%);
    margin: 2rem 0 auto; padding-top: .75rem;
    position: relative;
  }
  /* Kurze Goldlinie statt einer Linie über die ganze Breite (polish, 26.09.2026) */
  .nav-klappe[open] .nav-kanaele::before {
    content: ""; position: absolute; top: 0; left: 50%; width: 2.5rem; height: 1px;
    background: var(--gold); opacity: .7; transform: translateX(-50%);
    animation: linie-auf .45s var(--ease) 300ms both;
  }
  /* Schließen: schneller als das Öffnen. Links und Kanäle blenden zugleich aus, das Glas löst sich auf. */
  .nav-klappe[open].schliesst .nav-panel { animation: glas-zu .22s cubic-bezier(.3, 0, .8, .15) forwards; pointer-events: none; }
  .nav-klappe[open].schliesst .nav-liste a:nth-child(n), .nav-klappe[open].schliesst .nav-kanaele {
    animation: link-zu .14s cubic-bezier(.3, 0, .8, .15) forwards;
  }
  .nav-klappe[open] .nav-kanaele a {
    display: inline-grid; place-items: center; width: 52px; height: 52px;
    color: var(--ivory-dim); transition: color .2s;
    animation: link-auf .4s var(--ease) both;
  }
  .nav-klappe[open] .nav-kanaele a:nth-child(1) { animation-delay: 380ms; }
  .nav-klappe[open] .nav-kanaele a:nth-child(2) { animation-delay: 420ms; }
  .nav-klappe[open] .nav-kanaele a:nth-child(3) { animation-delay: 460ms; }
  /* Icons größer (Maxim, 28.09.2026) */
  .nav-klappe[open] .nav-kanaele svg { display: block; width: 28px; height: 28px; }
  @media (hover: hover) { .nav-klappe[open] .nav-kanaele a:hover { color: var(--gold-bright); } }
  .nav-klappe[open] .nav-kanaele a:active, .nav-klappe[open] .nav-kanaele a.gewaehlt { color: var(--gold-bright); }
  .nav-klappe[open] .nav-liste a:active, .nav-klappe[open] .nav-liste a.gewaehlt { color: var(--gold-bright); }
  /* Nach dem Tipp: das Ziel leuchtet, alles andere tritt zurück, bis die neue Seite erscheint */
  /* (Farbe statt Deckkraft: die Deckkraft hält die Aufbau-Animation fest) */
  .nav-klappe.geht .nav-liste a:not(.gewaehlt) { color: rgba(240, 236, 226, .4); }
  .nav-klappe.geht .nav-kanaele a:not(.gewaehlt) { color: rgba(240, 236, 226, .3); }
  .nav-klappe[open] .nav-kanaele a:focus-visible { outline: 1px solid var(--gold-bright); outline-offset: -4px; }
  html.menue-offen { overflow: hidden; }
  /* Offen steht der Kopf voll sichtbar (das X ist immer erreichbar) */
  html.menue-offen .site-header { transform: none !important; }
  /* Lange Menüpunkte bleiben mittig */
  .nav-klappe[open] .nav-liste a { max-width: 100%; text-align: center; }
}
/* Seitenwechsler (Maxim 10.10.2026, 22:51): „Maxim Matthew · Echoes of Neverland“ rechts oben im Kopf, getrennt vom
   Hauptmenü, auf beiden Websites gleich gesetzt. Aktiv = Text in Textgold, die andere Website = Link in Elfenbein
   gedimmt (≥ 10:1 auf Nacht). Breit hängt er über der Menüzeile (Kopf 112 px: Menü 34–78 px, Wechsler 6–34 px);
   mobil steht er oben im geöffneten Menü. Etikettenschrift klein, ohne Unterstreichung außer im Fokus. */
.seitenwechsler {
  position: absolute; top: 6px; right: calc((100vw - var(--shell)) / 2); z-index: 3;
  display: flex; align-items: center; gap: .55rem; height: 28px;
  font: 600 12px/1 var(--font-world); letter-spacing: .08em; white-space: nowrap;
}
.seitenwechsler .sw-link {
  display: inline-flex; align-items: center; gap: .35em; min-height: 24px;
  font: inherit; letter-spacing: inherit; /* sticht .site-nav a (Manrope 15 px) */
  color: var(--ivory-dim); text-decoration: none; transition: color .2s;
}
.seitenwechsler .sw-pfeil { flex: none; opacity: .85; }
.seitenwechsler .sw-link:hover { color: var(--ivory); }
.seitenwechsler .sw-link:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 4px; color: var(--ivory); }
html.kopf-schwebt .seitenwechsler .sw-link { text-shadow: 0 0 16px rgba(7, 7, 6, .42), 0 2px 32px rgba(7, 7, 6, .32); }
@media (max-width: 760px) {
  .seitenwechsler { display: none; }
  .nav-klappe[open] .seitenwechsler {
    position: static; display: flex; flex: none; justify-content: center; flex-wrap: wrap; height: auto; gap: .2rem .6rem;
    margin: .5rem 0 1.25rem; font-size: 12px;
    animation: zeile-auf .5s var(--ease) both;
  }
  .nav-klappe[open] .seitenwechsler .sw-link { display: inline-flex; align-items: center; min-height: var(--ziel); }
  .nav-klappe[open].schliesst .seitenwechsler { animation: link-zu .14s cubic-bezier(.3, 0, .8, .15) forwards; }
}
/* Niedrige Bildschirme im Hochformat (z. B. 375 × 560): etwas dichter, damit nichts unter die Signatur rutscht */
@media (max-width: 760px) and (max-height: 640px) and (orientation: portrait) {
  .nav-klappe[open] .nav-panel { padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); }
  .nav-klappe[open] .nav-liste a { min-height: var(--ziel); }
  .nav-klappe[open] .nav-kanaele { margin-top: 1.25rem; }
}
/* Niedrige Querformat-Bildschirme (z. B. 568 × 320, 667 × 375): Links in drei Spalten, damit alles ohne
   Scrollen unter den Kopf passt */
@media (max-width: 760px) and (max-height: 500px) and (orientation: landscape) {
  .nav-klappe[open] .nav-panel {
    justify-content: center;
    padding-top: calc(var(--kopf-hoehe) + .25rem); padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
  .nav-klappe[open] .nav-liste {
    grid-template-columns: repeat(3, auto); justify-content: center;
    column-gap: clamp(1.5rem, 5vw, 2.75rem); row-gap: 0; margin-top: 0;
  }
  .nav-klappe[open] .nav-liste a { min-height: var(--ziel); }
  .nav-klappe[open] .nav-kanaele { margin: .75rem 0 0; padding-top: .35rem; }
}
@media (max-width: 500px) {
  .site-footer { grid-template-columns: 1fr; }
  .fuss-marke { grid-column: auto; }
  .fuss-recht { flex-direction: column; }
}
/* Das Glas zieht scharf: Weichzeichnung wächst mit der Deckkraft von 0 auf 12 px */
@keyframes glas-auf {
  from { opacity: 0; -webkit-backdrop-filter: blur(0) saturate(1); backdrop-filter: blur(0) saturate(1); }
  to { opacity: 1; -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1); }
}
@keyframes glas-zu {
  from { opacity: 1; -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1); }
  to { opacity: 0; -webkit-backdrop-filter: blur(0) saturate(1); backdrop-filter: blur(0) saturate(1); }
}
@keyframes link-auf { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes zeile-auf { from { opacity: 0; transform: translateY(18px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes linie-auf { from { opacity: 0; transform: translateX(-50%) scaleX(0); } to { opacity: .7; transform: translateX(-50%) scaleX(1); } }
@keyframes link-zu { to { opacity: 0; transform: translateY(-4px); } }
@keyframes sanft-auf { from { opacity: 0; } to { opacity: 1; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 760px) { .nav-klappe[open] .nav-panel { background: rgba(7, 7, 6, .96); } }
}
/* Reduzierte Bewegung: nur ein kurzes Einblenden des fertigen Glases, keine Wege, kein Staffeln */
@media (prefers-reduced-motion: reduce) {
  .nav-klappe[open] .nav-liste a:nth-child(n), .nav-klappe[open] .nav-kanaele,
  .nav-klappe[open] .nav-kanaele a:nth-child(n), .nav-klappe[open] .nav-kanaele::before { animation: none; }
  .nav-klappe[open] .nav-panel { animation: sanft-auf .2s ease both; }
}
/* Autorenband (Maxim, 26.09.2026): direkt am Beitrag auf dem hellen Grund, als abgedunkelter Cremestreifen. */
.autor-band { position: relative; isolation: isolate; overflow: hidden; padding: clamp(3rem, 6vw, 4.5rem) 0;
  background: var(--paper-soft); color: var(--ink); }
/* Bleistiftwelt im Hintergrund: Weiß verschwindet im Creme (multiply), nur die Striche bleiben, ganz leise */
.autor-welt { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 45%; mix-blend-mode: multiply; opacity: .15; pointer-events: none; }
@media (max-width: 500px) { .autor-welt { opacity: .12; object-position: 50% 100%; } }
.autor-band .author-note h2 a { color: var(--ink); }
/* Tippfläche ≥ 44 px, ohne dass sich die Zeile verschiebt (adapt 28.09.2026) */
.autor-band .author-note h2 a { display: inline-block; padding-block: 9px; margin-block: -9px; }
.autor-band .author-note h2 a:hover { color: var(--gold-bright); }
.autor-band .author-note p { color: var(--ink-dim); }
.autor-band .author-note p a { color: var(--gold-bright); }
.article-after .related:first-child { margin-top: 0; }
/* Karussell (Maxim, 26.09.2026) – wiederverwendbar: .karussell > .karussell-bahn > .karussell-karte.
   Mitte voll, Nachbarn blasser und teilweise entsättigt; zum Rand hin 40 % Deckkraft (Maske). */
.karussell { --karte: min(72rem, 86vw); position: relative; }
/* Breit wie im Entwurf (Maxim): Mitte gut die Hälfte, links und rechts sichtbar die Nachbarn – links immer der letzte Beitrag */
@media (min-width: 1200px) { .karussell { --karte: min(72rem, 62vw); } }
.karussell-bahn {
  position: relative;
  display: flex;
  gap: clamp(1.25rem, 4vw, 4.5rem);
  margin: -8px 0; /* Luft für den Fokusrahmen: overflow-x:auto schneidet auch oben und unten ab (0.40.0) */
  padding: 8px calc((100% - var(--karte)) / 2);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .4) 0%, #000 16%, #000 84%, rgba(0, 0, 0, .4) 100%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .4) 0%, #000 16%, #000 84%, rgba(0, 0, 0, .4) 100%);
}
.karussell-bahn::-webkit-scrollbar { display: none; }
.karussell-karte {
  position: relative;
  flex: 0 0 var(--karte);
  display: flex;
  scroll-snap-align: center;
  transition: opacity .3s cubic-bezier(.22, 1, .36, 1), filter .3s cubic-bezier(.22, 1, .36, 1); /* gehen: schnell */
}
.karussell-karte.ist-mitte { transition-duration: .6s; } /* ankommen: ruhiger */
/* Nachbarn blasser (0.40.0): nicht mehr die ganze Karte mit opacity .5 (Text kam so nur auf 3,2 bis 3,5 : 1), sondern Bild und Grund gedämpft; die Schrift behält Volltonfarben ≥ 4,5 : 1 */
.karussell.ist-bereit .karussell-karte:not(.ist-mitte) { filter: saturate(.45); }
.karussell-karte .related-media { transition: opacity .3s cubic-bezier(.22, 1, .36, 1); }
.karussell.ist-bereit .karussell-karte:not(.ist-mitte) .related-media { opacity: .5; }
.karussell.ist-bereit .karussell-karte:not(.ist-mitte) .related { background: color-mix(in srgb, var(--surface) 50%, var(--night)); }
.karussell.ist-bereit .karussell-karte:not(.ist-mitte) .related-copy h2 { color: color-mix(in srgb, var(--ivory) 72%, var(--night)); }
.karussell.ist-bereit .karussell-karte:not(.ist-mitte) .related-copy p { color: color-mix(in srgb, var(--ivory-dim) 72%, var(--night)); }
.karussell.ist-bereit .karussell-karte:not(.ist-mitte) .text-link { color: color-mix(in srgb, var(--gold-bright) 72%, var(--night)); }
.karussell .related { width: 100%; margin: 0; }
/* Die ganze Karte ist klickbar: der Titel-Link spannt sich über die Karte */
.karussell .related-copy h2 a { color: inherit; text-decoration: none; }
.karussell .related-copy h2 a::after { content: ""; position: absolute; inset: 0; }
.karussell .related-copy h2 a:focus-visible { outline: none; }
.karussell-karte:has(h2 a:focus-visible) { outline: 2px solid var(--gold-bright); outline-offset: 4px; }
.karussell-karte:hover .text-link { text-decoration-color: var(--gold-bright); }
/* Vorschaubilder sind immer 1:1 (Maxim). Die Karte ist so hoch wie das Bild; der Text passt sich an
   (Titel und Auszug höchstens drei Zeilen), statt das Bild zu strecken. */
.karussell { --bild: calc(var(--karte) * .4); }
.karussell .related { grid-template-columns: var(--bild) minmax(0, 1fr); align-items: start; }
.karussell .related-media { min-height: 0; width: 100%; aspect-ratio: 1 / 1; }
.karussell .related-copy { height: var(--bild); overflow: hidden; padding-block: clamp(1.5rem, 3vw, 3rem); }
.karussell .related-copy h2 {
  font-size: clamp(1.65rem, 2.4vw, 2.1rem); /* Rolle subhead */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.karussell .related-copy p {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
/* Seitenende (Maxim, 26.09.2026): weniger Schwarz über und unter dem Karussell */
.article-after { padding: clamp(3.5rem, 5vw, 4.5rem) 0; }
/* Nur noch der Pause-Knopf, klein unten rechts an der mittleren Karte, über der Takt-Linie */
.karussell-steuerung {
  position: absolute; z-index: 2;
  right: calc((100% - var(--karte)) / 2 + .75rem); bottom: .9rem;
  display: flex; margin: 0;
}
@media (hover: hover) { .karussell.ist-bereit .karussell-karte:not(.ist-mitte):hover .related-media { opacity: .75; } }
.karussell-steuerung button {
  width: var(--ziel); height: var(--ziel);
  display: grid; place-items: center;
  padding: 0;
  border: var(--haarlinie);
  border-radius: 50%;
  background: var(--surface);
  color: var(--gold-bright);
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
@media (hover: hover) { .karussell-steuerung button:hover { border-color: var(--gold); color: var(--ivory); } }
.karussell-steuerung button:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.karussell:not(.ist-bereit) .karussell-steuerung, .karussell.nur-eine .karussell-steuerung { display: none; }
.karussell-steuerung button:active { transform: scale(.94); transition-duration: .1s; }

/* animate (Maxim, 26.09.2026) – Schärfeziehen: Kommt eine Karte in die Mitte, zieht sie aus leichter Unschärfe
   scharf, das Bild setzt sich (wie ein Fokuszug an der Kamera). In Ruhe bleibt alles, wie festgelegt. */
.karussell.ist-bereit .karussell-karte.ist-mitte .related { animation: karte-scharf .7s var(--ease) backwards; }
.karussell.ist-bereit .karussell-karte.ist-mitte .related-media img { animation: bild-setzt .9s var(--ease) backwards; }
@keyframes karte-scharf { from { filter: blur(3px); } }
@keyframes bild-setzt { from { transform: scale(1.04); } }
/* Sprung von der Kopie aufs Original: ohne jede Bewegung */
.karussell.springt .karussell-karte, .karussell.springt .karussell-karte * { transition: none !important; animation: none !important; }
/* Takt: feine Goldlinie unten an der mittleren Karte, füllt sich bis zur nächsten Geschichte; steht bei Pause still */
.karussell .related { position: relative; }
.karussell:not(.angehalten) .karussell-karte.ist-mitte .related::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--gold); opacity: .85;
  transform: scaleX(var(--takt, 0)); transform-origin: left center;
  pointer-events: none;
}
/* Pause-Knopf: zeigt, was ein Druck bewirkt (Anhalten ‖ oder Weiterdrehen ▷) */
.karussell-pause .zeichen-weiter, .karussell.angehalten .karussell-pause .zeichen-pause { display: none; }
.karussell.angehalten .karussell-pause .zeichen-weiter { display: block; }
@media (max-width: 760px) {
  .karussell { --karte: 78vw; }
  .karussell .related { grid-template-columns: 1fr; }
  .karussell .related-copy { height: auto; padding: 1.75rem 1.25rem 2.25rem; }
  .karussell .related-copy h2 { -webkit-line-clamp: 5; }
  .karussell .related-copy p { -webkit-line-clamp: 4; }
}
@media (prefers-reduced-motion: reduce) {
  .karussell-karte { transition: none; }
  .karussell.ist-bereit .karussell-karte.ist-mitte .related,
  .karussell.ist-bereit .karussell-karte.ist-mitte .related-media img { animation: none; }
}
/* Beitragsbild als Kopf-Hintergrund */
/* Rahmen, Lage unter der Kopfzeile und Höhe kommen aus .mm-header und seiner Stufe (Brief kopfhoehen 05.10.2026). */
@media (max-width: 760px) { .entry-content { padding-top: 3.5rem; } }
/* Quer gehaltenes Telefon (Maxim, 28.09.2026: „quer begrenzen“): Titel an der Bildschirmhöhe gemessen – sonst lag
   der Titel unter der Kante. Hochkant und Desktop unberührt. */
@media (orientation: landscape) and (max-height: 500px) {
  .mm-header .article-head { padding-top: 1.25rem; padding-bottom: 1.5rem; gap: 1rem; }
  .mm-header h1 { font-size: min(clamp(3.25rem, 8.5vw, 4.25rem), 12svh); }
}
/* Plakat-Kopf beruhigt (layout, 26.09.2026; Seiten-Critique Befund 1, Audit P2): Das Plakat ist selbst Text und
   schlug Titel und Beschreibung. Weichgezeichnet und entsättigt wird es zur Stimmung, die Schrift darauf bleibt
   Form. Das ganze Plakat steht scharf direkt darunter im Text. Leicht vergrößert, damit der Rand der
   Weichzeichnung nicht ins Bild blutet. Abdunklung hinter dem Text mindestens 80 %. */
.kopf-bild {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 28%;
  filter: blur(14px) saturate(.6) brightness(.7);
  transform: scale(1.08);
}
.kopf-mit-bild::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, var(--night-82) 0%, rgba(7, 7, 6, .62) 55%, var(--night-50) 100%),
    linear-gradient(0deg, var(--night) 0%, transparent 30%);
}
.kopf-mit-bild h1, .kopf-mit-bild .article-meta p { text-shadow: 0 2px 22px rgba(0, 0, 0, .6); }
@media (max-width: 500px) {
  .kopf-mit-bild::before { background: linear-gradient(0deg, var(--night) 0%, var(--night-82) 45%, var(--night-55) 100%); }
}
/* Parallaxe im Kopfbild: per Skript im Kopf (teile/kopf.html, schiebe()), nicht per view-timeline – die lief im
   Takt des Herausscrollens und war nicht zu sehen (28.09.2026). */
  
/* Rechtstext (Impressum, Datenschutz; 03.10.2026): kein Einstiegsabsatz mit Initiale, Sprungziele unter dem Kopf,
   ruhiges Inhaltsverzeichnis – Tinte, goldene Unterstreichung, Gold nur als Linie. */
.rechts-inhalt > p:first-of-type { margin-bottom: 1.55em; color: var(--ink-dim); font-size: inherit; line-height: inherit; }
.rechts-inhalt > p:first-of-type::first-letter { all: unset; }
.rechts-inhalt [id] { scroll-margin-top: calc(var(--kopf-hoehe) + 1rem); }
/* Typografie (Feinschliff 03.10.2026): Nachschlagetext – Flattersatz mit Silbentrennung statt Blocksatz, Spaltenbreite bleibt.
   Rang über Größe und Abstand: h2 Subhead, h3 Cinzel-Kennzeile in Gold, h4 Frage in Tinte; oben stets mehr Luft als unten. */
.rechts-inhalt > p, .rechts-inhalt > ul, .rechts-inhalt > ol { overflow-wrap: break-word; }
.rechts-inhalt > p { margin-bottom: 1.15em; text-align: start; text-justify: auto; text-wrap: pretty; }
.rechts-inhalt > p, .rechts-inhalt > ul, .rechts-inhalt > ol { max-width: 62ch; } /* Website-Audit 21.10.2026: Zeilenlänge */
/* Cookie-Namen (_fbp, _ga …): Browser-Monospace stand in voller 19 px und wirkte riesig (Maxim 07.10.2026) – UI-Schrift, etwas kleiner, halbfett */
.rechts-inhalt code { font: 600 .84em/1 var(--font-ui); color: var(--ink); overflow-wrap: anywhere; }
.rechts-inhalt > ul, .rechts-inhalt > ol { margin-top: 0; margin-bottom: 1.15em; padding-left: 1.4em; color: var(--ink-dim); hyphens: auto; }
.rechts-inhalt li { margin: .35em 0; }
.rechts-inhalt > h2 { margin: 2.6em auto .7em; font-size: clamp(1.65rem, 2.4vw, 2.1rem); line-height: 1.18; overflow-wrap: break-word; hyphens: auto; }
.rechts-inhalt > h3 { margin: 2em auto .5em; overflow-wrap: break-word; }
.rechts-inhalt > h4 { width: var(--reading); margin: 1.6em auto .35em; color: var(--ink); font: 600 1.05rem/1.4 var(--font-author); overflow-wrap: break-word; }
.rechts-inhalt > h2 + h3 { margin-top: 1.4em; } /* zwei Überschriften hintereinander: kein doppelter Abstand */
.rechts-inhalt > h3 + h4 { margin-top: 1em; }
.rechts-verzeichnis {
  width: var(--reading); margin: 0 auto 3rem; padding: 1.1rem 0 1.4rem;
  border-top: 1px solid var(--gold); border-bottom: var(--haarlinie-papier);
  color: var(--ink); font: 400 1rem/1.5 var(--font-author);
}
.rechts-verzeichnis summary { cursor: pointer; padding: .3rem 0; font: 600 .8rem/1.4 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.rechts-verzeichnis ol, .rechts-verzeichnis ul { margin: .6rem 0 0; padding-left: 0; list-style: none; } /* Überschriften tragen ihre Nummern schon */
.rechts-verzeichnis ul { margin-top: .25rem; padding-left: 1rem; font-size: .8125rem; line-height: 1.45; }
.rechts-kopf h1 { overflow-wrap: break-word; hyphens: auto; } /* Größe wie alle Köpfe (Maxim 05.10.2026) */
.rechts-verzeichnis li { margin: .35rem 0; overflow-wrap: break-word; hyphens: auto; }
.rechts-verzeichnis ul li { margin: .2rem 0; }
.rechts-verzeichnis a {
  color: var(--ink); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
  text-decoration-color: var(--gold-bright-75); transition: text-decoration-color .2s;
}
.rechts-verzeichnis a:hover { text-decoration-color: var(--ink); }
.rechts-inhalt a:not(.text-link) { text-decoration-color: var(--gold-bright-75); text-underline-offset: .2em; }
@media (max-width: 760px) { .rechts-verzeichnis { width: calc(100% - 2.5rem); } }
/* Verzeichnis ab 1280 px in der rechten Randspalte (Maxim, 03.10.2026): gleiches Raster wie bei Seiten mit Porträt,
   Text bleibt 680 px an gleicher Stelle; Verzeichnis bleibt beim Lesen stehen, zugeklappt, aufgeklappt scrollbar. */
@media (min-width: 1280px) {
  .entry-content:has(> .rechts-verzeichnis) {
    --rand-spalte: min(16rem, calc((var(--shell) - var(--reading)) / 2 - 2.75rem));
    --rand-luecke: calc((var(--shell) - var(--reading)) / 2 - var(--rand-spalte));
    display: grid;
    grid-template-columns:
      [aussen-start] 1fr
      [portraet-start] var(--rand-spalte) [portraet-end]
      var(--rand-luecke) [text-start] var(--reading) [text-end] var(--rand-luecke)
      [marken-start] var(--rand-spalte) [marken-end]
      1fr [aussen-end];
    align-content: start;
  }
  .entry-content:has(> .rechts-verzeichnis) > * { grid-column: text; }
  .entry-content:has(> .rechts-verzeichnis) > .rechts-verzeichnis {
    grid-column: marken; grid-row: 1 / span 99; align-self: start;
    position: sticky; top: 2rem; width: auto; margin: 0;
    max-height: calc(100svh - 4rem); overflow-y: auto; overscroll-behavior: contain;
  }
}

/* ==========================================================================================================
   Mega-Menü Bücher (v18 / mobil v6, abgenommen 05.10.2026)
   Quellen: docs/mockups/mega-menue/mega-menue-v18.html (Desktop) und mobil-menue-v6.html (Handy). Werte 1:1 aus den
   Entwürfen. Selektoren auf das Theme-Menü gelegt: li.hat-mega in .site-nav .nav-liste. Zustand „offen“ = li.hat-mega.offen
   (setzt assets/mega.js). Bild-URLs kommen als --bg am Streifen bzw. als <img> aus dem Markup, nie relativ aus dem CSS.
   Bewusst nicht übernommen: body-Hintergrund, Kopf-Nachbau (.site-header, .signature, Burger-Nachbau, .nav-panel-Nachbau),
   Schriftladen, Test-Bedienfeld #bewegung-test, .nav-liste>li>a-Grundschrift (kommt vom Theme).
   ========================================================================================================== */
.site-nav .nav-liste > li.hat-mega {
  --s2: 6px; --s3: 12px; --s4: 16px; --s5: 28px;
}
.site-nav .nav-liste > li.hat-mega > .mega-knopf {
  all: unset; box-sizing: border-box; cursor: pointer; width: 28px; height: var(--ziel); display: inline-flex; align-items: center; justify-content: center;
  font: 500 15px/1.3 var(--font-ui); letter-spacing: .02em; color: rgba(240, 236, 226, .78); transition: color .2s;
}
.site-nav .nav-liste > li.hat-mega .mega-knopf svg { width: 10px; height: 6px; transition: transform .3s var(--ease); }
.site-nav .nav-liste > li.hat-mega.offen .mega-knopf svg { transform: rotate(180deg); }
.site-nav .nav-liste > li.hat-mega.offen > a, .site-nav .nav-liste > li.hat-mega.offen > .mega-knopf, .site-nav .nav-liste > li.hat-mega > .mega-knopf:hover { color: var(--ivory); }
.site-nav .nav-liste > li.hat-mega > .mega-knopf:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: -2px; }
.site-nav .nav-liste > li.hat-mega > .mega { display: none; }
.site-nav .nav-liste > li.hat-mega > .mm-streifen-liste { display: none; }
.schleier { display: none; }

/* ---------- Panel (Basis = Telefon, Desktop überschreibt) ---------- */
.site-nav .nav-liste > li.hat-mega .tor-saga, .site-nav .nav-liste > li.hat-mega .tor-zdw { position: relative; overflow: hidden; isolation: isolate; }
.site-nav .nav-liste > li.hat-mega .mega a { text-shadow: none; }
.site-nav .nav-liste > li.hat-mega .kennzeile { margin: 0; font: 600 11px/1.4 var(--font-ui); letter-spacing: .26em; text-transform: uppercase; color: var(--ivory-dim); }
.site-nav .nav-liste > li.hat-mega .tor-saga .kennzeile { color: var(--ivory); }
.site-nav .nav-liste > li.hat-mega .titel { margin: var(--s2) 0 0; font: 400 34px/.95 var(--font-author); letter-spacing: .005em; text-transform: uppercase; }
.site-nav .nav-liste > li.hat-mega .titel-saga { color: var(--gold); }
.site-nav .nav-liste > li.hat-mega .titel-saga small { font-size: .6em; letter-spacing: .02em; }
.site-nav .nav-liste > li.hat-mega .titel-zdw { color: var(--ivory); }
.site-nav .nav-liste > li.hat-mega .linie { display: block; height: 1px; margin: var(--s3) 0; background: linear-gradient(90deg, var(--gold-55), var(--gold-10)); }
.site-nav .nav-liste > li.hat-mega .leit { margin: 0; font: 500 15px/1.55 var(--font-ui); letter-spacing: .005em; color: var(--ivory); max-width: 24em; text-wrap: balance; }
.site-nav .nav-liste > li.hat-mega .knopf {
  display: inline-flex; align-items: center; gap: .7rem; margin-top: var(--s4); min-height: 44px; padding: 0 1rem; border: 1px solid var(--gold); border-radius: 3px;
  color: var(--gold); background: rgba(7, 7, 6, .45); font: 600 11.5px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background .25s, color .25s, border-color .25s;
}
.site-nav .nav-liste > li.hat-mega .knopf span { display: inline-block; font-size: 15px; letter-spacing: 0; transition: transform .3s var(--ease); }
.site-nav .nav-liste > li.hat-mega .knopf:hover, .site-nav .nav-liste > li.hat-mega .knopf:focus-visible { background: var(--gold); color: var(--night); text-decoration: none; }
.site-nav .nav-liste > li.hat-mega .knopf:hover span, .site-nav .nav-liste > li.hat-mega .knopf:focus-visible span { transform: translateX(4px); }

.site-nav .nav-liste > li.hat-mega .zyklus { display: flex; align-items: center; gap: 1.2rem; }
.site-nav .nav-liste > li.hat-mega .zyklus-titel { display: inline; min-height: 0; font: 400 24px/1.1 var(--font-author); letter-spacing: .02em; text-transform: uppercase; text-decoration: none; color: var(--ivory); transition: color .2s; }
.site-nav .nav-liste > li.hat-mega .zyklus-titel:hover, .site-nav .nav-liste > li.hat-mega .zyklus-titel:focus-visible { color: var(--gold); text-decoration: none; }
.site-nav .nav-liste > li.hat-mega .zyklus i { flex: none; width: 6cqw; height: 1px; background: linear-gradient(90deg, rgba(221, 184, 128, .4), transparent); }
.site-nav .nav-liste > li.hat-mega .covers { display: flex; gap: 1rem; margin-top: var(--s3); }
.site-nav .nav-liste > li.hat-mega .cover { display: block; min-height: 0; width: calc((100% - 2rem) / 3); text-decoration: none; color: var(--ivory); }
.site-nav .nav-liste > li.hat-mega .cover:hover { text-decoration: none; }
.site-nav .nav-liste > li.hat-mega .cover img, .site-nav .nav-liste > li.hat-mega .cover .leer {
  display: block; width: 100%; aspect-ratio: var(--r); height: auto; border-radius: 2px; background: var(--surface); box-shadow: -4px 8px 14px rgba(0, 0, 0, .55); transition: transform .35s var(--ease);
}
.site-nav .nav-liste > li.hat-mega .cover .leer { display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--gold-55); font: 400 28px/1 var(--font-author); color: var(--gold); background: #0b0b0a; }
.site-nav .nav-liste > li.hat-mega .cover:hover img, .site-nav .nav-liste > li.hat-mega .cover:focus-visible img,
.site-nav .nav-liste > li.hat-mega .cover:hover .leer, .site-nav .nav-liste > li.hat-mega .cover:focus-visible .leer { transform: translateY(-3px); }
.site-nav .nav-liste > li.hat-mega .cover-band { display: block; margin-top: .5rem; font: 400 15px/1.3 var(--font-author); transition: color .2s; }
.site-nav .nav-liste > li.hat-mega .cover-zustand { display: block; margin-top: .1rem; font: 700 9px/1.4 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--gold-bright); white-space: nowrap; }
.site-nav .nav-liste > li.hat-mega .cover:hover .cover-band, .site-nav .nav-liste > li.hat-mega .cover:focus-visible .cover-band { color: var(--gold); }

/* V10: Flächen-Link je Tor, hinter dem Inhalt (z -1, vor dem Bild); Inhalt klickt nur über eigene Links/Knöpfe, sonst durch zur Fläche */
.site-nav .nav-liste > li.hat-mega .flaeche { position: absolute; z-index: -1; inset: 0; display: block; min-height: 0; cursor: pointer; }
.site-nav .nav-liste > li.hat-mega .tor-saga::before, .site-nav .nav-liste > li.hat-mega .tor-saga::after,
.site-nav .nav-liste > li.hat-mega .tor-zdw::before, .site-nav .nav-liste > li.hat-mega .tor-zdw::after { pointer-events: none; }
.site-nav .nav-liste > li.hat-mega .kopf, .site-nav .nav-liste > li.hat-mega .zyklen, .site-nav .nav-liste > li.hat-mega .marker-leiste { pointer-events: none; }
.site-nav .nav-liste > li.hat-mega .kopf a, .site-nav .nav-liste > li.hat-mega .zyklen a { pointer-events: auto; }
.site-nav .nav-liste > li.hat-mega .bild-saga, .site-nav .nav-liste > li.hat-mega .zdw-bild img { transition: filter .2s; }
.site-nav .nav-liste > li.hat-mega .tor-saga:has(.flaeche:hover) .bild-saga, .site-nav .nav-liste > li.hat-mega .tor-zdw:has(.flaeche:hover) .zdw-bild img { filter: brightness(1.06); }
.site-nav .nav-liste > li.hat-mega .bild-saga { position: absolute; z-index: -2; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% 42%; }

.site-nav .nav-liste > li.hat-mega .marker-leiste { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; }
.site-nav .nav-liste > li.hat-mega .marker { display: flex; flex-direction: column; align-items: center; gap: .55em; text-align: center; padding: .2rem .3rem; font: 500 13px/1.35 var(--font-ui); letter-spacing: .01em; color: var(--ivory); cursor: default; }
.site-nav .nav-liste > li.hat-mega .marker svg { display: block; width: 34px; height: 34px; fill: none; stroke: var(--gold); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.site-nav .nav-liste > li.hat-mega .zdw-bild { position: absolute; z-index: -2; top: 0; right: 0; aspect-ratio: 4/3; pointer-events: none; }
.site-nav .nav-liste > li.hat-mega .zdw-bild img { display: block; height: 100%; width: auto; }

/* ---------- Desktop ---------- */
@media (min-width: 761px) {
  .site-header:has(.hat-mega.offen) { background: var(--coal); }
  .site-nav .nav-liste > li.hat-mega { position: static; }
  .site-nav .nav-liste > li.hat-mega > .sub-menu { display: none; }
  .site-nav .nav-liste > li.hat-mega > .mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 19; background: transparent; padding: 0 calc((100vw - var(--shell)) / 2) 2.2rem; animation: mega-auf .35s var(--ease) both; }
  .schleier { display: block; position: fixed; inset: 0; z-index: 15; background: rgba(7, 7, 6, .3); pointer-events: none; opacity: 0; transition: opacity .3s; }
  body:has(.hat-mega.offen) .schleier { opacity: 1; }
  /* V8: 58/42. Zwei Reihen. Reihe 1 = Kopf, per Subgrid in EINER gemeinsamen Zeile; Satz-Reserve fest 2 Zeilen (min-height) -> beide Knöpfe auf derselben Y-Achse, keine Einzel-Margins.
     Reihe 2 = Fuß (Saga: FRØSTFÆDRIN über den Covern, linke Kante · ZdW: Marker 4 x 25 %). */
  .site-nav .nav-liste > li.hat-mega .mega-innen {
    container-type: inline-size; display: grid; grid-template-columns: 58fr 42fr; grid-template-rows: auto minmax(0, 1fr); row-gap: var(--luft-ob); aspect-ratio: 2.7/1;
    border: 1px solid var(--gold); border-radius: 2px; background: var(--coal); box-shadow: 0 28px 60px -12px rgba(0, 0, 0, .75), 0 8px 18px rgba(0, 0, 0, .5);
    --s2: max(5px, .4cqw); --s3: max(9px, .7cqw); --s4: max(12px, .9cqw); --s5: max(14px, 1.1cqw);
    --pad-o: 2.8cqw; --pad-u: 1.85cqw; --luft-ob: .9cqw; --luft-un: .45cqw; --pad-l: 2.8cqw; --pad-r: 2.4cqw; --titel: max(28px, 2.85cqw);
    --leit-f: max(13px, .98cqw); --knopf-h: max(34px, 2.2cqw);
  }
  .site-nav .nav-liste > li.hat-mega .tor-saga, .site-nav .nav-liste > li.hat-mega .tor-zdw { min-height: 0; display: grid; grid-row: 1/3; grid-template-rows: subgrid; padding: 0 var(--pad-r) var(--pad-u) var(--pad-l); }
  .site-nav .nav-liste > li.hat-mega .tor-saga > .kopf, .site-nav .nav-liste > li.hat-mega .tor-zdw > .kopf { padding-top: var(--pad-o); }
  .site-nav .nav-liste > li.hat-mega .tor-zdw { border-left: 1px solid var(--rule); padding-left: 0; }
  .site-nav .nav-liste > li.hat-mega .tor-zdw > .kopf { padding-left: var(--pad-l); }
  .site-nav .nav-liste > li.hat-mega .kopf { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
  .site-nav .nav-liste > li.hat-mega .kennzeile { font-size: max(10px, .72cqw); }
  .site-nav .nav-liste > li.hat-mega .titel { margin: var(--s2) 0 0; font-size: var(--titel); line-height: .95; white-space: nowrap; }
  .site-nav .nav-liste > li.hat-mega .linie { width: 17cqw; margin: var(--s3) 0; }
  .site-nav .nav-liste > li.hat-mega .leit { font-size: var(--leit-f); line-height: 1.5; min-height: 3em; max-width: 24em; }
  .site-nav .nav-liste > li.hat-mega .tor-zdw .leit { max-width: 27em; }
  .site-nav .nav-liste > li.hat-mega .knopf { margin-top: var(--s4); min-height: var(--knopf-h); padding: 0 1.1cqw; font-size: max(10.5px, .68cqw); letter-spacing: .12em; gap: .5rem; }
  .site-nav .nav-liste > li.hat-mega .tor-zdw .knopf { font-size: max(10px, .64cqw); letter-spacing: .1em; padding: 0 .6cqw; }
  /* Reihe 2 links: V6-Fuß, Titel über den Covern, alles auf der linken Kante */
  .site-nav .nav-liste > li.hat-mega .zyklen { min-height: 0; display: flex; flex-direction: column; }
  .site-nav .nav-liste > li.hat-mega .zyklus { gap: 1.2rem; }
  .site-nav .nav-liste > li.hat-mega .zyklus-titel { font-size: max(17px, 1.45cqw); line-height: 1; }
  .site-nav .nav-liste > li.hat-mega .zyklus i { width: 6cqw; }
  .site-nav .nav-liste > li.hat-mega .covers { flex: 1; min-height: 0; gap: 2.2cqw; margin-top: var(--luft-un); justify-content: flex-start; }
  .site-nav .nav-liste > li.hat-mega .cover { width: auto; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; position: relative; }
  .site-nav .nav-liste > li.hat-mega .cover img, .site-nav .nav-liste > li.hat-mega .cover .leer { height: 100%; width: auto; aspect-ratio: var(--r); object-fit: fill; min-height: 0; }
  .site-nav .nav-liste > li.hat-mega .cover-band { font-size: max(12.5px, .9cqw); margin-top: .15cqw; line-height: 1.2; }
  .site-nav .nav-liste > li.hat-mega .cover-band, .site-nav .nav-liste > li.hat-mega .cover-zustand { text-shadow: 0 1px 5px rgba(0, 0, 0, .9); }
  .site-nav .nav-liste > li.hat-mega .cover-zustand { font-size: max(9px, .55cqw); letter-spacing: .13em; margin-top: 0; line-height: 1.3; }
  .site-nav .nav-liste > li.hat-mega .cover-band, .site-nav .nav-liste > li.hat-mega .cover-zustand { width: 0; min-width: 100%; white-space: nowrap; }
  /* Bild ZdW (V6): von Panel-Oberkante bis Unterkante und bis zum rechten Rand; Textbereich dunkel nur per Verlauf */
  .site-nav .nav-liste > li.hat-mega .zdw-bild { top: 0; bottom: 0; right: 0; width: 42cqw; height: 100%; aspect-ratio: auto; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%); mask-image: linear-gradient(90deg, transparent 0, #000 12%); }
  .site-nav .nav-liste > li.hat-mega .zdw-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; translate: 1.4cqw 0; }
  /* Abdunkelung nur hinter Textblock und unter den Fuß-Reihen */
  .site-nav .nav-liste > li.hat-mega .tor-saga::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, var(--night-90) 0, var(--night-88) 30%, var(--night-55) 42%, transparent 56%); -webkit-mask-image: linear-gradient(180deg, #000 0, #000 72%, transparent 84%); mask-image: linear-gradient(180deg, #000 0, #000 72%, transparent 84%); }
  .site-nav .nav-liste > li.hat-mega .tor-saga::after { content: ""; position: absolute; z-index: -1; left: 0; bottom: 0; width: 80%; height: 46%; background: linear-gradient(0deg, var(--night-90) 0, rgba(7, 7, 6, .78) 50%, transparent); pointer-events: none; -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent); mask-image: linear-gradient(90deg, #000 72%, transparent); }
  .site-nav .nav-liste > li.hat-mega .tor-zdw::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--night-88) 0, rgba(7, 7, 6, .7) 45%, transparent 78%); -webkit-mask-image: linear-gradient(180deg, #000 0, #000 52%, transparent 60%); mask-image: linear-gradient(180deg, #000 0, #000 52%, transparent 60%); }
  .site-nav .nav-liste > li.hat-mega .tor-zdw::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 70%, var(--night-55) 80%, rgba(7, 7, 6, .72) 100%); }
  /* Marker: vier gleich breite 25-%-Spalten über die ganze ZdW-Fläche, unabhängig vom Bild, nicht klickbar */
  .site-nav .nav-liste > li.hat-mega .tor-zdw .marker-leiste { position: absolute; left: 0; right: 0; bottom: 1.8cqw; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site-nav .nav-liste > li.hat-mega .marker-leiste .marker { padding: 0; gap: .7cqw; text-shadow: 0 1px 6px rgba(0, 0, 0, .85); font-size: max(11.5px, .84cqw); color: var(--ivory); position: relative; }
  .site-nav .nav-liste > li.hat-mega .marker + .marker::before { content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 1px; background: rgba(221, 184, 128, .16); }
  .site-nav .nav-liste > li.hat-mega .marker svg { width: max(30px, 3.2cqw); height: max(30px, 3.2cqw); filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .8)); }
}
@keyframes mega-auf { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Übergang Kopf → Panel (V17) */
@media (min-width: 761px) {
  .site-nav .nav-liste > li.hat-mega .mega::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 44px; } /* Hover-Brücke: Maus darf langsam von „Bücher“ ins Panel */
  /* B Goldfaden (--zx/--lt setzt assets/mega.js) */
  .site-nav .nav-liste > li.hat-mega .mega-innen::before { content: ""; position: absolute; left: calc(var(--zx, 50%) - .5px); top: calc(30px - var(--lt, 40px)); width: 1px; height: calc(var(--lt, 40px) - 30px); background: linear-gradient(to bottom, transparent, var(--gold)); z-index: 3; }
  .site-nav .nav-liste > li.hat-mega .mega-innen::after { content: ""; position: absolute; top: -1px; left: calc(var(--zx, 50%) - 14px); width: 28px; height: 1px; background: var(--coal); z-index: 3; box-shadow: -14px 0 0 -0px transparent; }
}

/* Bewegung (nur Bewegung, Ruhezustand = v15b) */
@keyframes blende { from { opacity: 0; } to { opacity: 1; } }
/* Blattgold-Glanz: Rahmen + Streifen setzt assets/mega.js (ohne Skript: kein Glanz, nichts verändert) */
.site-nav .nav-liste > li.hat-mega .cover { position: relative; }
.site-nav .nav-liste > li.hat-mega .glanz { position: absolute; top: 0; left: 0; right: 0; overflow: hidden; border-radius: 2px; pointer-events: none; }
.site-nav .nav-liste > li.hat-mega .glanz i { position: absolute; top: -10%; bottom: -10%; left: 0; width: 90%; opacity: 0; transform: translateX(-130%) skewX(-18deg); background: linear-gradient(90deg, rgba(255, 236, 190, 0), rgba(255, 236, 190, .09) 50%, rgba(255, 236, 190, 0)); mix-blend-mode: screen; filter: blur(10px); }
@keyframes glanz { from { opacity: 1; transform: translateX(-130%) skewX(-18deg); } to { opacity: 1; transform: translateX(260%) skewX(-18deg); } }
.site-nav .nav-liste > li.hat-mega .cover:focus-visible .glanz i, .site-nav .nav-liste > li.hat-mega .cover:active .glanz i { animation: glanz 2.6s cubic-bezier(.4, 0, .2, 1); }
@media (hover: hover) { .site-nav .nav-liste > li.hat-mega .cover:hover .glanz i { animation: glanz 2.6s cubic-bezier(.4, 0, .2, 1); } }

@keyframes tor-saga { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes tor-zdw { from { clip-path: inset(0 calc(100% - 1px) 0 0); } to { clip-path: inset(0); } }
@keyframes bild-zoom { from { transform: scale(1.04); } to { transform: scale(1); } }
@keyframes text-ein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes rahmen-ein { from { opacity: 0; transform: none; } to { opacity: 1; transform: none; } }
.site-nav .nav-liste > li.hat-mega .zdw-streifen { display: none; }
@media (min-width: 761px) {
  /* Öffnen = Tore; Schließen = 250 ms Opacity + leichtes Zusammenziehen. Panel bleibt gerendert, nur unsichtbar (visibility), damit das Schließen laufen kann. */
  .site-nav .nav-liste > li.hat-mega > .mega { display: block; animation: none; visibility: hidden; opacity: 0; transform: scale(.985); transform-origin: 50% 0; pointer-events: none; transition: opacity .25s ease-in, transform .25s ease-in, visibility 0s linear .25s; }
  .site-nav .nav-liste > li.hat-mega.offen > .mega { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: visibility 0s; animation: rahmen-ein .16s ease-out both; }
  .site-nav .nav-liste > li.hat-mega.offen .tor-saga { animation: tor-saga .6s var(--ease) backwards; }
  .site-nav .nav-liste > li.hat-mega.offen .tor-zdw { animation: tor-zdw .6s var(--ease) backwards; }
  .site-nav .nav-liste > li.hat-mega.offen .bild-saga { animation: bild-zoom .6s var(--ease) backwards; }
  .site-nav .nav-liste > li.hat-mega.offen .zdw-bild img, .site-nav .nav-liste > li.hat-mega.offen .zdw-streifen { animation: bild-zoom .6s var(--ease) backwards; transform-origin: 0 50%; }
  .site-nav .nav-liste > li.hat-mega.offen .kopf, .site-nav .nav-liste > li.hat-mega.offen .zyklus { animation: text-ein .4s var(--ease) 120ms backwards; }
  .site-nav .nav-liste > li.hat-mega.offen .cover { animation: text-ein .42s var(--ease) 180ms backwards; }
  .site-nav .nav-liste > li.hat-mega.offen .cover:nth-child(2) { animation-delay: 240ms; }
  .site-nav .nav-liste > li.hat-mega.offen .cover:nth-child(3) { animation-delay: 300ms; }
  .site-nav .nav-liste > li.hat-mega.offen .marker-leiste { animation: rahmen-ein .4s var(--ease) 200ms backwards; }

  .site-nav .nav-liste > li.hat-mega .bild-saga { transition: filter .2s, transform .8s ease; }
  .site-nav .nav-liste > li.hat-mega .tor-saga:hover .bild-saga { transform: scale(1.05); transition: filter .2s, transform 6s cubic-bezier(0, 0, .2, 1); }
  .site-nav .nav-liste > li.hat-mega .zdw-bild img, .site-nav .nav-liste > li.hat-mega .zdw-streifen { transition: filter .2s, transform .8s ease; }
  .site-nav .nav-liste > li.hat-mega .tor-zdw:hover .zdw-bild img, .site-nav .nav-liste > li.hat-mega .tor-zdw:hover .zdw-streifen { transform: scale(1.05); transform-origin: 60% 50%; transition: filter .2s, transform 6s cubic-bezier(0, 0, .2, 1); }

  /* Marker zeigen auf ihre Welt: vier schräge Overlays über dem Vignettenbild */
  .site-nav .nav-liste > li.hat-mega .zdw-streifen { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; translate: 1.4cqw 0; }
  .site-nav .nav-liste > li.hat-mega .zdw-streifen .d { fill: var(--night); opacity: 0; transition: opacity .25s; }
  .site-nav .nav-liste > li.hat-mega .zdw-streifen .l { fill: var(--gold); opacity: 0; transition: opacity .25s; }
  .site-nav .nav-liste > li.hat-mega .tor-zdw .marker { pointer-events: auto; }
  .site-nav .nav-liste > li.hat-mega .tor-zdw:has(.marker:nth-child(1):hover) .zdw-streifen .d:not(.s1) { opacity: .5; }
  .site-nav .nav-liste > li.hat-mega .tor-zdw:has(.marker:nth-child(1):hover) .zdw-streifen .l.s1 { opacity: .12; }
  .site-nav .nav-liste > li.hat-mega .tor-zdw:has(.marker:nth-child(2):hover) .zdw-streifen .d:not(.s2) { opacity: .5; }
  .site-nav .nav-liste > li.hat-mega .tor-zdw:has(.marker:nth-child(2):hover) .zdw-streifen .l.s2 { opacity: .12; }
  .site-nav .nav-liste > li.hat-mega .tor-zdw:has(.marker:nth-child(3):hover) .zdw-streifen .d:not(.s3) { opacity: .5; }
  .site-nav .nav-liste > li.hat-mega .tor-zdw:has(.marker:nth-child(3):hover) .zdw-streifen .l.s3 { opacity: .12; }
  .site-nav .nav-liste > li.hat-mega .tor-zdw:has(.marker:nth-child(4):hover) .zdw-streifen .d:not(.s4) { opacity: .5; }
  .site-nav .nav-liste > li.hat-mega .tor-zdw:has(.marker:nth-child(4):hover) .zdw-streifen .l.s4 { opacity: .12; }
}
/* Reduzierte Bewegung (v18: Panel blendet nur kurz ein/aus, Tore, Zoom, Glanz und Staffeln entfallen) */
@media (prefers-reduced-motion: reduce) {
  .schleier, .site-nav .nav-liste > li.hat-mega .cover img, .site-nav .nav-liste > li.hat-mega .knopf, .site-nav .nav-liste > li.hat-mega .knopf span,
  .site-nav .nav-liste > li.hat-mega .bild-saga, .site-nav .nav-liste > li.hat-mega .zdw-bild img { transition: none; }
  .site-nav .nav-liste > li.hat-mega .glanz { display: none; }
  .site-nav .nav-liste > li.hat-mega .mega-knopf svg { transition: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 761px) {
  .site-nav .nav-liste > li.hat-mega > .mega { transform: none !important; transition: opacity .2s, visibility 0s linear .2s; }
  .site-nav .nav-liste > li.hat-mega.offen > .mega { animation: blende .2s ease-out backwards !important; transition: visibility 0s; }
  .site-nav .nav-liste > li.hat-mega.offen .tor-saga, .site-nav .nav-liste > li.hat-mega.offen .tor-zdw, .site-nav .nav-liste > li.hat-mega.offen .bild-saga, .site-nav .nav-liste > li.hat-mega.offen .zdw-bild img,
  .site-nav .nav-liste > li.hat-mega.offen .zdw-streifen, .site-nav .nav-liste > li.hat-mega.offen .kopf, .site-nav .nav-liste > li.hat-mega.offen .zyklus, .site-nav .nav-liste > li.hat-mega.offen .cover,
  .site-nav .nav-liste > li.hat-mega.offen .marker-leiste { animation: none; }
  .site-nav .nav-liste > li.hat-mega .tor-saga:hover .bild-saga { transform: none; }
  .site-nav .nav-liste > li.hat-mega .zdw-bild img, .site-nav .nav-liste > li.hat-mega .zdw-streifen { transition: none; }
  .site-nav .nav-liste > li.hat-mega .tor-zdw:hover .zdw-bild img, .site-nav .nav-liste > li.hat-mega .tor-zdw:hover .zdw-streifen { transform: none; }
  .site-nav .nav-liste > li.hat-mega .zdw-streifen .d, .site-nav .nav-liste > li.hat-mega .zdw-streifen .l { transition: opacity .25s; }
}

/* ---------- Telefon (≤ 760 px, mobil v6): Mega-Panel und Pfeil entfallen, „Bücher“ wird durch zwei Bildstreifen ersetzt ---------- */
@media (max-width: 760px) {
  :root { --einzug: 56px; }
  html .nav-klappe[open] .nav-panel { padding-left: 0; padding-right: 0; align-items: stretch; }
  html .nav-klappe[open] .nav-liste { justify-items: start; width: 100%; padding: 0; gap: .5rem; }
  html .nav-klappe > summary:focus-visible { outline: none; }                          /* kein Quadrat ums X */
  html .nav-klappe > summary:focus-visible .burger { filter: drop-shadow(0 0 3px rgba(212, 180, 131, .9)); }
  html .nav-klappe[open] .nav-liste > li { width: 100%; }
  html .nav-klappe[open] .nav-liste > li > a { margin-left: var(--einzug); justify-content: flex-start; text-align: left; }
  html .nav-klappe[open] .nav-liste > li.hat-mega > a, html .nav-klappe[open] .nav-liste > li.hat-mega > .mega-knopf,
  html .nav-klappe[open] .nav-liste > li.hat-mega > .mega, html .nav-klappe[open] .nav-liste > li.hat-mega > .sub-menu { display: none; }
  html .nav-klappe[open] .nav-liste > li.hat-mega > .mm-streifen-liste { display: block; }
  html .nav-klappe[open] .nav-liste > li.hat-mega .mm-streifen-liste > a.mm-streifen {
    margin: 0; width: 100%; height: clamp(110px, calc(16vh + 10px), 146px); min-height: 0; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 2px;
    padding: 0 calc(var(--einzug) - 12px) 10px var(--einzug); position: relative;
    background: linear-gradient(to top, rgba(7, 7, 6, .72) 0%, rgba(7, 7, 6, .4) 45%, transparent 75%), var(--bg) center/cover no-repeat;
  }
  .mm-streifen-liste .mm-kz { font: 600 10.5px/1.2 var(--font-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-bright); }
  .mm-streifen-liste .mm-tt { display: block; }
  .mm-streifen-liste > a.mm-streifen::after { content: "→"; position: absolute; right: calc(var(--einzug) - 12px); bottom: 10px; color: var(--gold-bright); font: 400 20px/1 var(--font-ui); }
  html .nav-klappe[open] .nav-kanaele { width: auto; padding-left: 0; justify-content: flex-start; margin-left: calc(var(--einzug) - 12px); }
  html .nav-klappe[open] .nav-kanaele::before { left: 12px; transform: none; animation-name: mm-linie-links; }
}
@media (max-width: 760px) and (max-height: 700px) { html .nav-klappe[open] .nav-panel { padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); } }
@keyframes mm-linie-links { from { opacity: 0; transform: scaleX(0); transform-origin: 0 50%; } to { opacity: .7; transform: scaleX(1); transform-origin: 0 50%; } }
@media (max-width: 760px) { html .nav-klappe[open] .nav-liste > li.hat-mega .mm-streifen-liste > a.mm-streifen[href*="zwischen-den-welten"] { background-position: center 72%, center 72%; } }
/* Mega-Menü Bücher: Ende */

/* Für Veranstalter (W4a, 06.10.2026): Papier-Lesefläche, Cinzel-Etiketten, Haarlinien, ein Goldknopf (Absenden, bei „Knöpfe & Links“),
   Fokusringe, Ziele ab 44 px. Keine Kartenraster. */
.veranstalter-kopf h1 { overflow-wrap: break-word; hyphens: auto; }
.mm-veranstalter [id] { scroll-margin-top: calc(var(--kopf-hoehe) + 1rem); }
.mm-veranstalter .v-abschnitt { width: var(--wide-block); margin: 0 auto; padding: clamp(2.5rem, 5vw, 4rem) 0; border-top: var(--haarlinie-papier); }
.mm-veranstalter .v-abschnitt:first-child { border-top: 0; padding-top: 0; }
.mm-veranstalter h2 { margin: 0 0 1.2rem; color: var(--ink); font: 400 clamp(1.7rem, 2.6vw, 2.3rem)/1.15 var(--font-author); letter-spacing: -.01em; text-wrap: balance; }
.mm-veranstalter h3, .mm-veranstalter h4 { margin: 0 0 .6rem; color: var(--gold-tinte); font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; }
.mm-veranstalter p, .mm-veranstalter li { color: var(--ink); font: 400 19px/1.6 var(--font-author); }
.mm-veranstalter p { max-width: 34em; margin: 0 0 1rem; } /* höchstens ~75 Zeichen je Zeile; 68ch ergab in Newsreader ~89 (Detector 21.10.2026) */
.mm-veranstalter .v-etikett { margin: 0 0 .3rem; color: var(--gold-tinte); font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; }
.mm-veranstalter .v-fett { color: var(--ink); font-size: 1.3rem; }
.mm-veranstalter .v-liste { margin: 0; display: grid; border-top: var(--haarlinie-papier); }
.mm-veranstalter .v-zeile { display: grid; grid-template-columns: minmax(7rem, 12rem) minmax(0, 1fr); gap: .5rem 2rem; padding: .8rem 0; border-bottom: var(--haarlinie-papier); }
.mm-veranstalter .v-liste dt { color: var(--gold-tinte); font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; }
.mm-veranstalter .v-liste dd { margin: 0; color: var(--ink); font: 400 18px/1.5 var(--font-author); }
.mm-veranstalter .v-format + .v-format { margin-top: 2.5rem; }
/* Kritik 21.10.2026: Anfrageknopf unter der Einleitung, Formate nebeneinander, Lesebreite begrenzt */
.mm-veranstalter .v-handlung { margin-top: 1.6rem; }
.mm-veranstalter .v-knopf { display: inline-flex; align-items: center; justify-content: center; }
.mm-veranstalter p, .mm-veranstalter .v-liste dd { text-wrap: pretty; }
.mm-veranstalter .v-liste dd { max-width: 34em; }
.mm-veranstalter .v-formate { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem clamp(2rem, 4vw, 3.5rem); }
.mm-veranstalter .v-formate .v-format + .v-format { margin-top: 0; }
.mm-veranstalter .v-formate .v-zeile { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
.mm-veranstalter .v-klein { margin: 2rem 0 0; color: var(--ink-dim); }
/* Referenz als Nachtband (colorize, 21.10.2026): der Beweis auf Nacht wie die O-Töne auf /presse/, randlos ohne waagerechten Überlauf */
.mm-veranstalter .v-referenz { padding-block: clamp(3rem, 6vw, 4.5rem); border-top: 0; background: var(--coal); box-shadow: 0 0 0 100vmax var(--coal); clip-path: inset(0 -100vmax); }
.mm-veranstalter .v-referenz + .v-abschnitt { border-top: 0; }
.mm-veranstalter .v-referenz h2, .mm-veranstalter .v-referenz p, .mm-veranstalter .v-referenz .v-fett, .mm-veranstalter .v-referenz .v-link { color: var(--ivory); }
.mm-veranstalter .v-referenz .v-fett { color: var(--gold); }
.mm-veranstalter .v-referenz .v-link { text-decoration-color: var(--gold); }
.mm-veranstalter .v-referenz .v-link:hover { text-decoration-color: var(--ivory); }
.mm-veranstalter .v-referenz .v-blog { color: var(--ivory-dim); }
.mm-veranstalter .v-referenz .v-galerie figcaption { color: var(--ivory-dim); }
.mm-veranstalter .v-referenz a:focus-visible, .mm-veranstalter .v-referenz button:focus-visible { outline-color: var(--gold-bright); }
.mm-veranstalter .v-referenz ::selection { background: var(--gold); color: var(--night); }
.mm-veranstalter .v-referenz-innen { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.mm-veranstalter .v-referenz-innen:not(:has(.v-foto)) { grid-template-columns: minmax(0, 1fr); }
.mm-veranstalter .v-foto { margin: 0; }
.mm-veranstalter .v-foto img { display: block; width: 100%; height: auto; }
.mm-veranstalter .v-blog { margin-top: 1.5rem; color: var(--ink-dim); }
.mm-veranstalter .v-blog .v-link { font-size: 1.3rem; }
.mm-veranstalter .v-galerie { display: flex; gap: 1rem; align-items: flex-start; margin-top: clamp(1rem, 2.5vw, 1.5rem); }
.mm-veranstalter .v-galerie figure { flex-basis: 0; min-width: 0; margin: 0; } /* flex-grow = Seitenverhältnis (inline): gleiche Höhe, nichts beschnitten */
.mm-veranstalter .v-galerie img { display: block; width: 100%; height: auto; }
.mm-veranstalter .v-galerie figcaption { margin-top: .4rem; color: var(--ink-dim); font: var(--type-meta); }
.mm-veranstalter .v-presse { margin: 0; padding: 0; list-style: none; border-top: var(--haarlinie-papier); }
.mm-veranstalter .v-presse li { padding: .9rem 0; border-bottom: var(--haarlinie-papier); color: var(--ink-dim); font: 400 18px/1.5 var(--font-author); }
.mm-veranstalter .v-presse .v-etikett { display: block; }
.mm-veranstalter .v-presse time { display: block; margin-top: .2rem; font: var(--type-meta); }
.mm-veranstalter .v-link { display: inline-flex; align-items: center; min-height: var(--ziel); color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--gold-tinte); text-underline-offset: .25em; }
.mm-veranstalter .v-presse .v-link, .mm-veranstalter .v-kontakt .v-link, .mm-presse .p-tabelle .v-link, .mm-presse .p-hinweis .v-link, .mm-presse .p-karte .v-link { display: inline; min-height: 0; padding-block: .5rem; }
.mm-veranstalter .v-link:hover { text-decoration-color: var(--ink); }
.mm-veranstalter a:focus-visible, .mm-veranstalter button:focus-visible, .mm-veranstalter summary:focus-visible, .mm-veranstalter input:focus-visible, .mm-veranstalter textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.mm-veranstalter .v-meldung { min-height: 1.6em; margin: 0 0 1rem; color: var(--ink); font: 500 16px/1.6 var(--font-ui); }
.mm-veranstalter .v-meldung[data-status="fehler"] { padding-left: .8rem; border-left: 3px solid var(--fehlerrot-papier); }
.mm-veranstalter .v-meldung[data-status="ok"] ~ .v-form { display: none; }
/* Versiegelte Anfrage (delight, 21.10.2026): Goldlinien ziehen sich von der Meldung nach außen wie in der Buch-Kaufbox, dann die eigenen Angaben */
.mm-veranstalter .v-meldung[data-status="ok"] { display: flex; align-items: center; gap: 1rem; max-width: 46rem; margin: .5rem 0 .6rem; font: 400 1.35rem/1.35 var(--font-author); text-align: center; text-wrap: balance; }
.mm-veranstalter .v-meldung[data-status="ok"]::before, .mm-veranstalter .v-meldung[data-status="ok"]::after { content: ""; flex: 1 1 0; height: 1px; background: var(--gold); animation: v-linie 1.1s var(--ease) both; }
.mm-veranstalter .v-meldung[data-status="ok"]::before { transform-origin: right center; }
.mm-veranstalter .v-meldung[data-status="ok"]::after { transform-origin: left center; }
@keyframes v-linie { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.mm-veranstalter .v-kontrolle { max-width: 46rem; margin: 0 0 1rem; color: var(--ink-dim); font: var(--type-meta); text-align: center; animation: kb-auf .5s .45s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .mm-veranstalter .v-meldung[data-status="ok"]::before, .mm-veranstalter .v-meldung[data-status="ok"]::after, .mm-veranstalter .v-kontrolle { animation: none; } }
.mm-veranstalter .v-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; max-width: 46rem; }
.mm-veranstalter .v-form > input[type="hidden"] { display: none; }
.mm-veranstalter .v-form p { max-width: none; margin: 0 0 1.1rem; } /* sonst kappt die 68ch-Regel die breiten Zeilen */
.mm-veranstalter .v-form .v-breit { grid-column: 1 / -1; }
.mm-veranstalter .v-form label { display: block; margin-bottom: .35rem; color: var(--ink); font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; }
.mm-veranstalter .v-form input[type="text"], .mm-veranstalter .v-form input[type="email"], .mm-veranstalter .v-form input[type="tel"], .mm-veranstalter .v-form input[type="date"], .mm-veranstalter .v-form input[type="number"], .mm-veranstalter .v-form select, .mm-veranstalter .v-form textarea {
  box-sizing: border-box; width: 100%; min-height: var(--ziel); padding: .6rem .8rem; border: 1px solid var(--ink-dim); border-radius: 0; background: var(--paper-white); color: var(--ink); font: 400 16px/1.5 var(--font-ui);
}
.mm-veranstalter .v-form textarea { resize: vertical; }
.mm-veranstalter .v-kontakt { max-width: 46rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: var(--haarlinie-papier); }
@media (max-width: 760px) {
  .mm-veranstalter .v-abschnitt { width: calc(100% - 2.5rem); }
  .mm-veranstalter .v-referenz-innen, .mm-veranstalter .v-form { grid-template-columns: minmax(0, 1fr); }
  .mm-veranstalter .v-formate { grid-template-columns: minmax(0, 1fr); }
  /* Handy: eine wischbare Reihe, alle Bilder gleich hoch, nichts beschnitten */
  .mm-veranstalter .v-galerie { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: -1.25rem; padding-right: 1.25rem; } /* läuft bis an den Bildschirmrand */
  .mm-veranstalter .v-galerie::-webkit-scrollbar { display: none; }
  .mm-veranstalter .v-galerie figure { flex: 0 0 auto; scroll-snap-align: start; }
  .mm-veranstalter .v-galerie img { width: auto; height: 170px; } /* erstes Querformat passt ganz in den Bildschirm, das nächste schaut an */
  .mm-veranstalter .v-zeile { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .mm-veranstalter .v-form button { width: 100%; }
}

/* Presse (W4 Task 4, 07.10.2026): Spalten und Bildlage der Live-Seite 4216 (Maxim 07.10.: „wie viele Spalten, welches
   Bild wo“), Material und Schrift des Themes. Papier, Karten mit Haarlinie, kleine Cinzel-Kicker, ein Goldknopf je Formular.
   Formular-/Linkstile kommen von .mm-veranstalter .v-*. */
.mm-presse #zitate, .mm-presse #zitate + .v-abschnitt { border-top: 0; }
.mm-presse .startseite-termine + .v-abschnitt { border-top: 0; }
.mm-presse .p-rechte { margin-top: clamp(2rem, 4vw, 3rem); }
.mm-presse .v-abschnitt .p-rechte > h3.p-mittel { margin-bottom: 1.25rem; color: var(--ink); font: 400 clamp(1.35rem, 2.2vw, 1.75rem)/1.2 var(--font-author); letter-spacing: -.01em; text-transform: none; }
/* Termin-Widget auf der Presseseite: dasselbe Widget wie auf der Startseite; die Text- und Überschriftenregeln der
   Presse-/Veranstalterseite dürfen es nicht umfärben (:where hält die Spezifität auf .mm-presse li) */
.mm-veranstalter .startseite-termine .titel { margin: 0 0 .35rem; color: var(--z-ink, var(--ivory)); font: 400 1.25rem/1.3 var(--font-author); letter-spacing: normal; text-transform: none; }
/* Typo-Rollen (typeset 07.10.2026, zweite Runde): eine Lesetextschrift (Newsreader) in zwei Größen – 19 px Lesetext,
   17 px in schmalen Spalten und Tabellen; Manrope nur für Metadaten (14 px); Cinzel-Etiketten 13 px statt 12.
   H2 = Abschnitt (Newsreader 28–36 px), leise Abschnitte als 14-px-Etikett; H3 = Kartentitel 13 px. Text immer Tinte, Grau nur für Metadaten. */
.mm-veranstalter :where(.startseite-termine) li { color: inherit; font: inherit; }
.mm-presse .p-punkte li { max-width: 68ch; }
.mm-presse .p-umfeld summary { font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; }
.mm-presse .p-frage, .mm-presse .p-zitate blockquote p { font: italic 400 clamp(1.3rem, 2vw, 1.5rem)/1.4 var(--font-author); } /* ein Zitatstil */
.mm-presse .p-zitate blockquote p { max-width: 60ch; }
.mm-presse .p-mittel { color: var(--ink); font: 400 clamp(1.35rem, 2.2vw, 1.75rem)/1.2 var(--font-author); letter-spacing: -.01em; text-transform: none; }
.mm-presse .p-zeile { margin: 0 0 1.4rem; text-wrap: balance; }
/* Pressebereich: zwei Spalten, rechts das Cover */
.mm-presse .p-knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.mm-presse .p-cover { margin: 0; width: 10rem; }
.mm-presse .p-hinweis.p-mit-cover { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
/* Hero der Presseseite: Standardkopf; rechts unter der Beschreibung Knöpfe und Sprungmarken auf Nacht */
.presse-kopf .article-meta .description { margin-bottom: 1.4rem; }
.kontakt-kopf .article-meta .description + .description { margin-top: 1rem; } /* zwei Absätze von live */
/* Kontakt „Zum zweiten Stern“ (Maxim 07.10.2026): unter dem Standard-Hero eine Nachtfläche mit Sternen, Formular im
   Nachtmuster (.feld, gemeinsamer Knopf), rechts oben der Stern. Nach dem Absenden fliegen die Worte als Goldfunken
   dorthin (Skript in kontakt.php), danach leuchtet er; wer schon einmal geschrieben hat, sieht ihn etwas heller. */
.kontakt-himmel {
  position: relative; overflow: hidden; padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(5rem, 10vw, 8rem);
  border-top: var(--haarlinie);
}
/* Sternenhimmel: Kontakt „Zum zweiten Stern“, Domain-Seiten (W13c) */
.kontakt-himmel, .domain-nacht, .domain-rueckblick {
  --stern-licht: color-mix(in srgb, var(--ivory) 75%, transparent);
  --stern-gold: color-mix(in srgb, var(--gold-bright) 60%, transparent);
  background-color: var(--night); color: var(--ivory);
  background-image:
    radial-gradient(1px 1px at 8% 22%, var(--stern-licht), transparent), radial-gradient(1px 1px at 23% 71%, var(--stern-licht), transparent),
    radial-gradient(1.5px 1.5px at 41% 12%, var(--stern-gold), transparent), radial-gradient(1px 1px at 57% 48%, var(--stern-licht), transparent),
    radial-gradient(1px 1px at 66% 86%, var(--stern-licht), transparent), radial-gradient(1.5px 1.5px at 74% 31%, var(--stern-licht), transparent),
    radial-gradient(1px 1px at 82% 63%, var(--stern-gold), transparent), radial-gradient(1px 1px at 91% 44%, var(--stern-licht), transparent),
    radial-gradient(1px 1px at 96% 88%, var(--stern-licht), transparent), radial-gradient(1px 1px at 34% 93%, var(--stern-gold), transparent),
    radial-gradient(1.5px 1.5px at 52% 7%, var(--stern-licht), transparent), radial-gradient(1px 1px at 87% 15%, var(--stern-gold), transparent),
    radial-gradient(1px 1px at 61% 67%, var(--stern-licht), transparent), radial-gradient(1.5px 1.5px at 78% 79%, var(--stern-licht), transparent),
    radial-gradient(1px 1px at 47% 36%, var(--stern-licht), transparent), radial-gradient(1px 1px at 69% 21%, var(--stern-licht), transparent);
}
.kontakt-innen { position: relative; width: var(--wide-block); margin: 0 auto; }
.kontakt-form { display: grid; gap: 1.4rem; max-width: 34rem; transition: opacity .6s var(--ease); }
.kontakt-form .honig, .kontakt-form > input[type="hidden"] { display: none; }
.kontakt-form button { justify-self: start; }
.kontakt-form button[disabled] { cursor: progress; }
.kontakt-hinweis { margin: 0; color: var(--ivory-dim); font: 400 14px/1.5 var(--font-ui); }
.kontakt-hinweis a { color: var(--gold-bright); text-decoration: underline; text-underline-offset: .25em; }
.kontakt-hinweis a:hover, .kontakt-hinweis a:focus-visible { color: var(--ivory); }
.kontakt-himmel ::selection { background: var(--gold); color: var(--night); }
.kontakt-meldung { margin: 0; outline: 0; font: 500 16px/1.6 var(--font-ui); }
.kontakt-meldung[data-status="fehler"] { margin-bottom: 1.6rem; color: var(--fehlerrot); }
.kontakt-meldung[data-status="ok"] { padding: clamp(4rem, 9vw, 7rem) 0 clamp(2rem, 5vw, 4rem); color: var(--ivory); font: 400 clamp(2rem, 3.4vw, 3rem)/1.15 var(--font-author); letter-spacing: -.015em; text-align: center; text-wrap: balance; }
.kontakt-angekommen .kontakt-form { display: none; }
.kontakt-fliegt .kontakt-form { opacity: .12; }
.feld textarea.kontakt-leer { color: transparent; }
/* Der Stern: klein und blass, nach dem Absenden der hellste am Himmel (Strahlen als zwei Haarlinien) */
.kontakt-stern { position: absolute; top: clamp(-2.5rem, -3vw, -1.75rem); right: 6%; width: 5px; height: 5px; border-radius: 50%; background: var(--ivory); opacity: .5; box-shadow: 0 0 6px 1px var(--stern-gold); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease), box-shadow 1.2s var(--ease); }
.kontakt-stern::before, .kontakt-stern::after { content: ""; position: absolute; top: 50%; left: 50%; width: 64px; height: 1px; background: linear-gradient(90deg, transparent, var(--stern-gold), transparent); opacity: 0; transform: translate(-50%, -50%); transition: opacity 1.2s var(--ease); }
.kontakt-stern::after { transform: translate(-50%, -50%) rotate(90deg); }
.kontakt-bekannt .kontakt-stern { opacity: .8; }
.kontakt-angekommen .kontakt-stern { opacity: 1; transform: scale(1.8); box-shadow: 0 0 10px 3px var(--stern-gold), 0 0 36px 12px color-mix(in srgb, var(--gold) 22%, transparent); }
.kontakt-angekommen .kontakt-stern::before, .kontakt-angekommen .kontakt-stern::after { opacity: 1; }
.kontakt-funken { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.kontakt-funken span { position: absolute; top: 0; left: 0; font: 400 19px/1 var(--font-author); text-shadow: 0 0 8px var(--stern-gold); will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) { .kontakt-stern, .kontakt-stern::before, .kontakt-stern::after, .kontakt-form { transition: none; } }
@media (max-width: 40rem) { .kontakt-stern { right: 4%; } .kontakt-form button { justify-self: stretch; } }
.presse-kopf .p-knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 .5rem; }
.mm-presse .p-cover img { display: block; width: 100%; height: auto; box-shadow: var(--schatten-papier); }
/* Weltpremiere: Kasten mit Goldstrich links */
.mm-presse .p-hinweis { padding: 1.6rem 2rem; border: 1px solid var(--gold-55); border-radius: 2px; background: var(--gold-10); }
.mm-presse .p-hinweis h2 { margin-bottom: .75rem; }
.mm-presse .p-hinweis p:last-child { margin-bottom: 0; }
/* Zahlen & Fakten mit Bild der zwei Bände */
.mm-presse .p-fakten-zweier { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.mm-presse .p-fakten-zweier:not(:has(.p-baende)) { grid-template-columns: minmax(0, 1fr); }
.mm-presse .p-baende { margin: 0; }
.mm-presse .p-baende img { display: block; width: 100%; height: auto; }
/* Karten */
.mm-presse .p-karte { padding: 1.5rem; border: var(--haarlinie-papier); border-radius: 2px; background: var(--paper-soft); }
.mm-presse .p-karte > p:last-child { margin-bottom: 0; }
.mm-presse .p-fakten { padding: .5rem 1.5rem; }
.mm-presse .p-fakten .v-liste { border-top: 0; }
.mm-presse .p-fakten .v-zeile { grid-template-columns: minmax(6.5rem, 9rem) minmax(0, 1fr); gap: .25rem 1.5rem; padding: .7rem 0; }
.mm-presse .p-fakten .v-zeile:last-child { border-bottom: 0; }
.mm-presse .p-fakten dt { padding-top: .2rem; }
.mm-presse .p-fakten strong, .mm-presse .p-hinweis strong, .mm-presse .p-pr strong { color: var(--ink); font-weight: 600; }
.mm-presse .p-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.mm-presse .p-raster.p-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mm-presse .p-raster.p-offen { gap: 2rem; }
.mm-presse .p-material { display: flex; flex-direction: column; }
.mm-presse .p-material .p-unten { margin-top: auto; padding-top: .8rem; }
/* Kurzporträt: Foto links, Fassungen rechts untereinander */
.mm-presse .p-portraet { display: grid; grid-template-columns: minmax(12rem, 19rem) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.25rem); align-items: start; }
.mm-presse .p-foto { margin: 0; }
.mm-presse .p-foto-spalte { display: grid; gap: 1rem; justify-items: start; }
.mm-presse .p-foto-spalte > p { margin: 0; }
/* „Ausführliche Bio“ so breit wie das Foto, Pfeil rechts außen (Maxim 07.10.2026) */
.mm-presse .p-bio { justify-self: stretch; }
.mm-presse .p-bio .mm-knopf { display: flex; justify-content: space-between; width: 100%; box-sizing: border-box; }
.mm-presse .p-foto img { display: block; width: 100%; height: auto; }
.mm-presse .p-stapel { display: grid; gap: 1rem; }
.mm-presse .p-stapel > p { margin: 0; }
.mm-presse .p-kopieren { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.mm-presse .p-kopiert { color: var(--ink); font: var(--type-meta); }
/* Zitate: eine Spalte */
/* O-Töne als Nachtband: einmal die Stimme des Autors auf Nacht, randlos ohne waagerechten Überlauf */
.mm-presse #zitate { margin-block: clamp(1rem, 3vw, 2rem); padding-block: clamp(3rem, 6vw, 4.5rem); background: var(--coal); box-shadow: 0 0 0 100vmax var(--coal); clip-path: inset(0 -100vmax); }
.mm-presse #zitate h2 { color: var(--ivory); }
.mm-presse #zitate .p-zitate { gap: 0; }
.mm-presse #zitate .p-zitate li { padding: 1rem 0; border-top: var(--haarlinie); }
.mm-presse #zitate .p-zitate li:last-child { border-bottom: var(--haarlinie); }
.mm-presse #zitate blockquote p { color: var(--ivory); }
.mm-presse #zitate .v-etikett { margin-top: 1.25rem; color: var(--gold); }
.mm-presse #zitate ::selection { background: var(--gold); color: var(--night); }
.mm-presse .p-zitate { margin: 0 0 1.25rem; padding: 0; list-style: none; display: grid; gap: .9rem; }
.mm-presse .p-zitate blockquote { margin: 0; }
.mm-presse .p-zitate blockquote p { margin: 0; }
/* Knöpfe */
.mm-presse .p-datei { margin: 0 0 .3rem; color: var(--ink-dim); font: var(--type-meta); }
/* Pressespiegel und Termine: Tabelle Medium | Titel | Datum */
.mm-presse .p-tabelle { margin: 0; padding: 0; list-style: none; border-top: var(--haarlinie-papier); }
.mm-presse .p-tabelle li { display: grid; grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr) 8rem; gap: .25rem 1rem; align-items: baseline; padding: .55rem 0; border-bottom: var(--haarlinie-papier); }
.mm-presse .p-tabelle .p-medium { color: var(--ink); font: var(--type-meta); font-weight: 600; }
.mm-presse .p-tabelle .v-link { padding-block: .65rem; font: 400 18px/1.5 var(--font-author); } /* Titel wie .v-liste dd */
.mm-presse .p-tabelle .p-archiv { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; min-height: 1.75rem; color: var(--ink-dim); vertical-align: middle; } /* direkt am Titel, bricht nie allein um (geschütztes Leerzeichen) */
.mm-presse .p-tabelle a.p-archiv:hover, .mm-presse .p-tabelle a.p-archiv:focus-visible { color: var(--gold-tinte); }
.mm-presse .p-tabelle .v-link .p-archiv { min-width: 0; min-height: 0; }
.mm-presse .p-tabelle .p-offline { color: var(--ink-dim); font: var(--type-meta); }
.mm-presse .p-tabelle time { color: var(--ink-dim); font: var(--type-meta); text-align: right; }
.mm-presse .p-umfeld { margin-top: 1.25rem; }
.mm-presse .p-umfeld summary { display: flex; align-items: center; gap: .8rem; min-height: var(--ziel); list-style: none; color: var(--gold-tinte); cursor: pointer; }
.mm-presse .p-umfeld summary::-webkit-details-marker { display: none; }
.mm-presse .p-umfeld summary::after { content: ""; width: .45rem; height: .45rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-.15rem) rotate(45deg); transition: transform .2s var(--ease); }
.mm-presse .p-umfeld[open] summary::after { transform: translateY(.1rem) rotate(-135deg); }
.mm-presse .p-punkte { margin: 0; padding-left: 1.1rem; }
.mm-presse .p-punkte li + li { margin-top: .3rem; }
/* Kontakt: Karte und Formular nebeneinander */
/* Pressekontakt hinterlegt (Maxim 07.10.2026): die Absetzfarbe paper-soft über die volle Breite, Karte darauf hell */
.mm-presse #kontakt { border-top: 0; background: var(--paper-soft); box-shadow: 0 0 0 100vmax var(--paper-soft); clip-path: inset(0 -100vmax); }
.mm-presse #kontakt .p-karte { background: var(--paper); }
.mm-presse .p-kontakt .v-meldung:not([data-status]) { display: none; } /* leer nimmt sie keinen Platz, Formular beginnt auf Höhe der Karte (Maxim 07.10.2026) */
.mm-presse .p-kontakt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
/* adapt 07.10.2026: Tablet (761–1100 px) – Zweispalter, die dort zu eng werden, stapeln oder verschlanken */
@media (min-width: 761px) and (max-width: 1100px) {
  .mm-presse .p-fakten-zweier, .mm-presse .p-kontakt { grid-template-columns: minmax(0, 1fr); }
  .mm-presse .p-fakten-zweier .p-baende { justify-self: center; width: min(100%, 28rem); }
  .mm-presse .p-portraet { grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr); }
  .mm-presse .p-tabelle li { grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr) 7rem; }
}
/* Touch: Archiv-Symbol mit 44-px-Tippfläche, ohne die Zeile aufzublähen */
@media (pointer: coarse) {
  .mm-presse .p-tabelle a.p-archiv { min-width: 44px; min-height: 44px; margin-block: -8px; }
}
.mm-presse .p-pr { padding: 2rem 2.25rem; }
.mm-presse .p-pr .p-mittel { margin: .3rem 0 .8rem; }
.mm-presse .p-stand { max-width: none; margin: 2rem 0 0; text-align: center; }
/* Pressekontakt ist das letzte Band: kein Papierstreifen mehr zwischen ihm und dem Seitenfuß (Maxim 07.10.2026) */
.mm-presse.entry-content { padding-bottom: 0; }
@media (max-width: 960px) {
  .mm-presse .p-raster.p-drei { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .mm-presse .p-portraet, .mm-presse .p-raster, .mm-presse .p-kontakt, .mm-presse .p-fakten-zweier { grid-template-columns: minmax(0, 1fr); }
  .mm-presse .p-hinweis { padding: 1.25rem 1.25rem; }
  .mm-presse .p-hinweis.p-mit-cover { grid-template-columns: minmax(0, 1fr); }
  .mm-presse .p-hinweis .p-cover { width: 8rem; }
  .mm-presse .p-fakten .v-zeile { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
  .mm-presse .p-fakten { padding: .25rem 1.25rem; }
  .mm-presse .p-tabelle li { grid-template-columns: minmax(0, 1fr); }
  .mm-presse .p-tabelle time { text-align: left; }
}

/* ---------------------------------------------------------------------------------------------------------------
   Domain- und QR-Zielseiten (W13c, 07.10.2026). Einladung (echoesofneverland.com, /anmelden/): Entwurf
   .impeccable/mocks/domain/echoes-1-nacht.png – Greif auf Nacht, darunter Papier mit Einladung links und Kasten rechts,
   Rückblick als Nachtband (Stil aus echoes-2-geteilt.png, ohne dessen Unterschrift). Verlag (neverland.pub, Vorlage
   page-domain): pub-1-papier.png – Papier, das Baumhaus läuft ins Papier aus, kein Hauptmenü.
   Höchstens zwei Unterschriften in Sichtweite (Maxim 07.10., 17:16): Logo im Kopf + die im Kasten; der Fuß zeigt seine
   hier nicht. */
.domain { --domain-rand: calc((100% - var(--wide-block)) / 2); }
:where(.domain .wp-block-group), :where(.domain figure) { margin-block: 0; margin-inline: 0; }
.domain-held, .domain-abschnitt, .domain-zitat { margin-inline: auto !important; }
:where(.domain h1, .domain h2, .domain h3) { margin: 0; } .domain h1, .domain h2, .domain h3 { font-family: var(--font-author); font-weight: 400; text-wrap: balance; }
:where(.domain p) { margin: 0; }
.domain-kicker { color: var(--gold-tinte); font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; }
.domain-kicker + h1, .domain-kicker + h2, .domain-kicker + h3 { margin-top: .8rem; }
.domain-vorspann { margin-top: 1.2rem !important; max-width: 38ch; font: 400 clamp(1.15rem, 1.6vw, 1.35rem)/1.5 var(--font-author); }
.domain-klein { margin-top: 1rem !important; color: var(--ink-dim); font: 400 13px/1.55 var(--font-ui); }
.mm-einladung .footer-signature { display: none; }

/* Einladung: Greif auf Nacht */
.domain-nacht { display: grid; justify-items: center; overflow: hidden; padding: .5rem 1.5rem clamp(2rem, 4vw, 3rem); }
.domain-greif img { display: block; width: min(560px, 84vw); height: auto; filter: drop-shadow(0 0 48px rgba(221, 184, 128, .14)); }
/* Papier: Einladung links, Kasten rechts */
.domain-einladung {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start;
  padding: clamp(3rem, 6vw, 5rem) var(--domain-rand); background: var(--paper); color: var(--ink);
}
.domain-einladung h1 { color: var(--ink); font-size: clamp(2.75rem, 5.4vw, 4.5rem); line-height: 1.04; letter-spacing: -.02em; }
.domain-einladung ul { margin: 2rem 0 0; padding: 0; list-style: none; display: grid; gap: .75rem; }
.domain-einladung li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 1rem; align-items: baseline; font: 400 1.1rem/1.45 var(--font-author); }
.domain-einladung li::before { content: ""; height: 1px; background: var(--gold); transform: translateY(-.3em); }
.domain-karte { padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid var(--gold); background: var(--paper); color: var(--ink); }
.domain-abschluss { margin-top: 1.5rem !important; padding-top: 1.25rem; border-top: var(--haarlinie-papier); }
.domain-abschluss p { font: 400 1.05rem/1.5 var(--font-author); }
.domain-unterschrift { margin-top: .6rem !important; }
.domain-unterschrift img { display: block; width: 150px; height: auto; filter: brightness(0); opacity: .82; }
/* Rückblick als Nachtband */
.domain-rueckblick { padding: clamp(3rem, 6vw, 4.5rem) var(--domain-rand); border-top: var(--haarlinie); }
.domain-rueckblick .domain-kicker { display: flex; align-items: center; gap: 1rem; color: var(--gold-bright); }
.domain-rueckblick .domain-kicker::after { content: ""; width: 4rem; height: 1px; background: var(--gold); }
.domain-rueckblick h2 { color: var(--ivory); font-size: clamp(2.4rem, 4.6vw, 3.75rem); line-height: 1.05; letter-spacing: -.02em; }
.domain-datum { margin-top: .9rem !important; color: var(--ivory); font: 400 1.1rem/1.5 var(--font-author); }
.domain-link { margin-top: 1.2rem !important; }
.domain-link a { display: inline-flex; min-height: var(--ziel); align-items: center; color: var(--gold-bright); font: 500 15px/1.3 var(--font-ui); text-decoration: underline; text-underline-offset: .35em; }
.domain-link a:hover, .domain-link a:focus-visible { color: var(--ivory); }

/* Depesche als Kasten auf Papier: dasselbe Formular, Felder im Papiermuster */
.hueter-karte { padding: 0; background: none; border: 0; color: var(--ink); }
.hueter-karte .hueter-innen { width: auto; display: block; text-align: left; }
.hueter-karte #hueter-titel { margin: 0 0 1.2rem; color: var(--gold-tinte); font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; max-width: none; }
.hueter-karte .hueter-unten { display: block; margin: 0; padding: 0; border: 0; }
.hueter-karte .hueter-rechts { margin: 0; }
.hueter-karte .hueter-form { grid-template-columns: minmax(0, 1fr); }
.hueter-karte .hueter-form button { grid-column: auto; width: 100%; }
.hueter-karte .feld label { color: var(--ink); font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; }
.hueter-karte .feld-hinweis { color: var(--ink-dim); font: 400 12px/1.3 var(--font-ui); letter-spacing: 0; text-transform: none; }
.hueter-karte .feld input { background: var(--paper-white); border-color: var(--ink-dim); color: var(--ink); caret-color: var(--gold-tinte); }
.hueter-karte .hueter-klein { text-align: left; color: var(--ink-dim); }
.hueter-karte .hueter-klein a { color: var(--ink); }
.hueter-karte .hueter-meldung[data-status="danke"] { color: var(--gold-tinte); }
.hueter-karte .hueter-meldung[data-status="email"], .hueter-karte .hueter-meldung[data-status="fehler"], .hueter-karte .hueter-meldung[data-status="zuviel"] { color: var(--fehlerrot-papier); }

/* Verlag (page-domain) als Programmvorschau (Maxim 07.10.2026, 18:03; Entwurf .impeccable/mocks/decision/pub-vorschau.png,
   Bauvorgabe Website/Masterplan-2026-08/entwuerfe/unterseiten/neverland-pub/BRIEF-2026-10-07.md): eigene Verlagswelt, nicht
   die von maxim-matthew.com. Gestrichenes Weiß, Schwarz, ein Zinnoberrot; Schibsted Grotesk durchgehend; das Baumhaus fällt
   wie ein Titelbild rechts oben an; ein Inhaltsverzeichnis mit Seitenzahlen führt zu den Werkseiten. */
body.mm-domain {
  --pv-papier: #f7f4ee; --pv-tinte: #151413; --pv-rot: #c2361f; --pv-grau: #5f5c56; --pv-linie: rgba(21, 20, 19, .16);
  --pv-schrift: "Schibsted Grotesk", system-ui, sans-serif;
  padding-top: 0; background: var(--pv-papier); color: var(--pv-tinte); font: 400 17px/1.6 var(--pv-schrift);
}
.pv-nummer, .pv-seite, .pv-zeile { font-variant-numeric: tabular-nums; } /* nur Ziffern: tnum macht in dieser Schrift auch Punkt und Komma breit */
html:has(body.mm-domain) { scroll-padding-top: 1.5rem; }
.mm-domain ::selection { background: var(--pv-rot); color: var(--pv-papier); }
.mm-domain a:focus-visible, .mm-domain button:focus-visible, .mm-domain input:focus-visible { outline: 2px solid var(--pv-rot); outline-offset: 3px; }
.mm-domain .domain h1, .mm-domain .domain h2, .mm-domain .domain h3 { font-family: var(--pv-schrift); color: var(--pv-tinte); }
.domain-kopf { position: absolute; inset: 0 0 auto 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: var(--shell); margin: 0 auto; padding-top: 1.25rem; pointer-events: none; }
.domain-kopf > * { pointer-events: auto; }
.domain-marke { display: inline-flex; min-height: var(--ziel); align-items: center; gap: .45em; color: var(--pv-tinte); font: 700 13px/1.2 var(--pv-schrift); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.domain-ausgabe { margin: 0; color: var(--pv-tinte); font: 500 13px/1.2 var(--pv-schrift); letter-spacing: .04em; }
/* Titelseite */
.pv-titel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: min(100svh, 62rem); padding-left: calc((100vw - var(--shell)) / 2); }
.pv-titel-text { align-self: center; padding: 8rem 2rem 4rem 0; }
.pv-titel h1 { font-size: clamp(3.2rem, 6.6vw, 6rem); font-weight: 800; line-height: .95; letter-spacing: -.035em; max-width: 9ch; }
.pv-titel h1::after { content: ""; display: block; width: 5.5rem; height: 3px; margin-top: 2rem; background: var(--pv-rot); }
.pv-titel .wp-block-buttons { margin-top: 2.25rem; }
.pv-vorspann { margin-top: 1.75rem !important; max-width: 30ch; font: 400 clamp(1.15rem, 1.5vw, 1.35rem)/1.45 var(--pv-schrift); }
.pv-titel-bild { display: grid; grid-template-rows: auto auto; align-content: start; }
.pv-titel-bild .domain-baumhaus img { display: block; width: 100%; height: auto; mix-blend-mode: multiply;
  /* Titelbild fällt oben und rechts an; links und unten läuft der Papiergrund des Aquarells ins Weiß aus */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%), linear-gradient(0deg, transparent 0, #000 18%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 14%), linear-gradient(0deg, transparent 0, #000 18%); mask-composite: intersect; }
.pv-verzeichnis { margin: -1rem calc((100vw - var(--shell)) / 2) 3rem 2rem; padding-left: 1.5rem; border-left: 1px solid var(--pv-rot); }
.pv-verzeichnis ol { margin: 0; padding: 0; list-style: none; }
.pv-verzeichnis a { display: grid; grid-template-columns: 2.5rem auto minmax(1.5rem, 1fr); align-items: baseline; gap: .6rem; min-height: var(--ziel);
  padding: .55rem 0; color: var(--pv-tinte); font: 500 1.05rem/1.3 var(--pv-schrift); text-decoration: none; }
.pv-punkte { border-bottom: 2px dotted var(--pv-linie); transform: translateY(-.25em); }
.pv-nummer { color: var(--pv-rot); font-weight: 700; }
.pv-verzeichnis a:hover .pv-eintrag, .pv-verzeichnis a:focus-visible .pv-eintrag { color: var(--pv-rot); text-decoration: underline; text-underline-offset: .25em; }
.mm-domain .domain .wp-block-button__link { background: var(--pv-rot); border-color: var(--pv-rot); color: var(--pv-papier); font: 700 14px/1 var(--pv-schrift); letter-spacing: .1em; padding: 0 1.75rem; min-height: 52px; }
.mm-domain .domain .wp-block-button__link:hover, .mm-domain .domain .wp-block-button__link:focus-visible { background: var(--pv-tinte); border-color: var(--pv-tinte); color: var(--pv-papier); }
/* Programm: jede Werkseite als Vorschau-Doppelseite */
.pv-programm { width: var(--shell); margin: 0 auto !important; padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(3.5rem, 7vw, 6rem); border-top: 1px solid var(--pv-tinte); }
.pv-kopfzeile h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 800; line-height: 1.02; letter-spacing: -.03em; }
.pv-kopfzeile, .pv-jahrgang { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.pv-jahrgang { margin-top: clamp(3rem, 6vw, 5rem) !important; padding-top: 1.25rem; border-top: 1px solid var(--pv-linie); }
.pv-seite { color: var(--pv-tinte); font: 800 clamp(4rem, 9vw, 8rem)/.8 var(--pv-schrift); letter-spacing: -.05em; }
.pv-jahr { color: var(--pv-rot); font: 800 clamp(2.2rem, 3.8vw, 3.4rem)/.98 var(--pv-schrift); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.pv-regal { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); }
.pv-werk { display: grid; align-content: start; }
.pv-werk .pv-cover { max-width: 15rem; }
.pv-daten { margin-top: 1.4rem !important; }
.pv-cover { position: relative; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 2 / 3; padding: 1.4rem 1.2rem;
  color: #efe4d2; box-shadow: 0 22px 34px -16px rgba(21, 20, 19, .5), 0 2px 4px rgba(21, 20, 19, .15);
  background: linear-gradient(90deg, rgba(0, 0, 0, .28) 0, rgba(255, 255, 255, .08) 3%, transparent 6%), var(--cover, #2a0f14);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.pv-werk:hover .pv-cover { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 32px 44px -18px rgba(21, 20, 19, .55), 0 2px 4px rgba(21, 20, 19, .15); }
.pv-cover-vv { --cover: #2a0f14; }
.pv-cover-gin { --cover: #0f3d3c; }
.pv-cover-haus { font: 600 10px/1.3 var(--pv-schrift); letter-spacing: .16em; text-transform: uppercase; opacity: .75; }
.pv-cover-titel { font: 800 clamp(1.3rem, 2.2vw, 1.9rem)/1.02 var(--pv-schrift); letter-spacing: -.02em; text-wrap: balance; }
.pv-cover-person { font: 500 12px/1.3 var(--pv-schrift); letter-spacing: .1em; text-transform: uppercase; }
.pv-person { color: var(--pv-rot); font: 700 13px/1.3 var(--pv-schrift); letter-spacing: .12em; text-transform: uppercase; }
.pv-daten h3 { margin-top: .5rem !important; font-size: clamp(1.4rem, 2vw, 1.75rem); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; }
.pv-reihe { margin-top: .5rem !important; color: var(--pv-grau); font: 500 1.05rem/1.4 var(--pv-schrift); }
.pv-zeile { margin-top: .35rem !important; padding: .5rem 0; border-bottom: 1px solid var(--pv-linie); font: 500 1rem/1.4 var(--pv-schrift); max-width: 26rem; }
.pv-reihe + .pv-zeile { margin-top: 1.4rem !important; border-top: 1px solid var(--pv-linie); }
/* weitere Seiten der Vorschau */
.pv-abschnitt { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(1.5rem, 4vw, 4rem); width: var(--shell); margin: 0 auto !important;
  padding: clamp(3.5rem, 7vw, 6rem) 0; border-top: 1px solid var(--pv-tinte); }
.pv-abschnitt h2, .pv-klein-abschnitt h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 800; line-height: 1.02; letter-spacing: -.03em; }
.pv-abschnitt-text > p:not([class]), .pv-klein-abschnitt > p:not([class]) { margin-top: 1.1rem; max-width: 60ch; font-size: 1.12rem; line-height: 1.6; }
.pv-gezeichnet { margin-top: 1.2rem !important; color: var(--pv-grau); font-style: italic; }
.pv-autorinnen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; margin-top: 2rem !important; }
.pv-person-karte { padding-top: 1rem; border-top: 3px solid var(--pv-rot); }
.pv-person-karte h3 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.015em; }
.pv-person-karte p { margin-top: .4rem; }
.mm-domain .domain a:not(.wp-block-button__link):not(.pv-verzeichnis a) { color: var(--pv-tinte); text-decoration: underline; text-decoration-color: var(--pv-rot); text-underline-offset: .25em; }
.mm-domain .domain a:not(.wp-block-button__link):hover { color: var(--pv-rot); }
.pv-person-karte a, .pv-link a { display: inline-flex; min-height: var(--ziel); align-items: center; }
.pv-etagen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem; margin-top: 2.25rem !important; }
.pv-etagen .domain-etage { padding-top: 1rem; border-top: 1px solid var(--pv-tinte); }
.pv-etagen .domain-etage-zahl { color: var(--pv-rot); font: 700 13px/1.3 var(--pv-schrift); letter-spacing: .1em; text-transform: uppercase; }
.pv-etagen h3 { margin-top: .6rem !important; font-size: 1.35rem; font-weight: 700; line-height: 1.15; }
.pv-etagen .domain-etage p:not([class]) { margin-top: .5rem; font-size: 1rem; line-height: 1.5; }
.pv-etagen .domain-etage-handwerk { margin-top: .8rem !important; color: var(--pv-grau); font: 500 13px/1.4 var(--pv-schrift); }
.pv-zweispalt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); width: var(--shell); margin: 0 auto !important;
  padding: clamp(3.5rem, 7vw, 6rem) 0; border-top: 1px solid var(--pv-tinte); }
.pv-klein-abschnitt h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.pv-klein { margin-top: .8rem !important; color: var(--pv-grau); font-size: 14px; }
.mm-domain .domain-karte { margin-top: 1.75rem !important; border: 1px solid var(--pv-tinte); background: #fff; }
.mm-domain .hueter-karte, .mm-domain .hueter-karte .feld label { font-family: var(--pv-schrift); color: var(--pv-tinte); }
.mm-domain .hueter-karte #hueter-titel { color: var(--pv-rot); font: 700 13px/1.3 var(--pv-schrift); letter-spacing: .12em; }
.mm-domain .hueter-karte .feld label { font: 600 12px/1.3 var(--pv-schrift); letter-spacing: .1em; }
.mm-domain .hueter-karte .feld input { border-color: var(--pv-tinte); caret-color: var(--pv-rot); font-family: var(--pv-schrift); }
.mm-domain .hueter-form button { background: var(--pv-rot); color: var(--pv-papier); font: 700 14px/1 var(--pv-schrift); letter-spacing: .1em; }
.mm-domain .hueter-form button:hover, .mm-domain .hueter-form button:focus-visible { background: var(--pv-tinte); color: var(--pv-papier); }
.mm-domain .hueter-karte .hueter-meldung[data-status="danke"] { color: var(--pv-tinte); }
.pv-zitat { width: var(--shell); margin: 0 auto !important; padding: 2.5rem 0 4rem; border-top: 1px solid var(--pv-linie); color: var(--pv-grau); font: italic 400 1.15rem/1.5 var(--pv-schrift); }
.domain-fuss { background: var(--pv-tinte, var(--night)); color: #d9d4ca; }
.domain-fuss-innen { width: var(--shell); margin: 0 auto; padding: 1.5rem 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem; font: 400 14px/1.5 var(--pv-schrift, var(--font-ui)); }
.domain-fuss p { margin: 0; }
.domain-fuss a { display: inline-flex; min-height: var(--ziel); align-items: center; color: #d9d4ca; text-decoration: none; }
.domain-fuss a:hover, .domain-fuss a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: .3em; }
.domain-fuss-autor { color: #fff !important; font-weight: 600; }
.domain-recht-links { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: 0; padding: 0; list-style: none; }
@media (max-width: 900px) {
  .pv-titel { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .pv-titel-text { order: 2; padding: 1.5rem 1.25rem 2rem; }
  .pv-titel-bild { order: 1; padding-top: 4rem; }
  .pv-verzeichnis { margin: 0 1.25rem 2rem; }
  .pv-kopfzeile, .pv-jahrgang { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .pv-abschnitt { grid-template-columns: minmax(0, 1fr); }
  .pv-etagen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-zweispalt { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .pv-titel-bild { order: 3; padding-top: 0; }
  .pv-titel-text { order: 1; padding-top: 5.5rem; }
  .pv-cover { max-width: 14rem; }
  .pv-autorinnen, .pv-etagen { grid-template-columns: minmax(0, 1fr); }
  .domain-ausgabe { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pv-cover { transition: none; } .pv-werk:hover .pv-cover { transform: none; } }

@media (max-width: 900px) {
  .domain-einladung { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .domain .wp-block-button, .domain .wp-block-button__link { width: 100%; justify-content: center; }
}
/* echoesofneverland.com (09.10.2026): EoN-Logo statt Unterschrift, als Maske in der Farbe der Navigation;
   Breite wie die Signatur (210 px, Telefon 170 px), Seitenverhältnis des Logos 560 : 184. */
.eon-logo { display: block; width: 210px; aspect-ratio: 560 / 184; background: currentColor; -webkit-mask: url(bilder/eon-logo.svg) center / contain no-repeat; mask: url(bilder/eon-logo.svg) center / contain no-repeat; transition: opacity .25s; }
.eon-marke:hover .eon-logo { opacity: .82; }
html.kopf-schwebt .eon-logo { filter: drop-shadow(0 0 14px rgba(7, 7, 6, .4)); }
@media (max-width: 500px) { .eon-logo { width: 170px; } }

/* ---------- Gewinnspiel · Die Route nach Neverland (Seite /gewinnspiel/, Theme 0.37.0) ----------
   Seitenkopf wie überall (mm_kopf). Darunter Papier: Leiste (Deine Lose · Lose gesamt · Tage übrig), ab 1100 px drei Spalten
   (Preis-Karussell 4 · Route 4 · Termine, Hinweise, Warum mitmachen 4 von 12), darunter die Teilnahmebedingungen. Am Handy: Preise,
   Route, Info, Bedingungen. Alle Inhalte kommen aus dem Gewinnspiel im Builder und seiner Darstellung.
   Gold auf Papier ist gewollt: Linien und Siegel in --gold, kleine Goldschrift in --gold-tinte. Skript: assets/gewinnspiel.js. */
.gw { --gw-siegel: 1.25rem; --gw-v: .94rem; --gw-l: .45rem; --gw-breite: min(84rem, calc(100vw - 60px)); --type-label: 600 13px/1.3 var(--font-world); } /* Etiketten auf der Seite mindestens 13 px (Audit 0.40.0) */
/* Nur für Screenreader sichtbar (Gliederung „Preise“ und „Route“, eine Statusregion) */
.gw-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Ohne Skript (kein .gw-js): Anmeldung, Leiste und Bedienelemente bleiben verborgen, der Hinweis im <noscript> erklärt es */
.gw:not(.gw-js) .gw-form, .gw:not(.gw-js) .gw-lade, .gw:not(.gw-js) .gw-leiste, .gw:not(.gw-js) .gw-st-inhalt, .gw:not(.gw-js) .gw-blase, .gw:not(.gw-js) .gw-k-pfeil, .gw:not(.gw-js) .gw-k-punkte, .gw:not(.gw-js) .gw-k-spiel { display: none; }
.gw-noscript { margin: 0 0 1.5rem; padding: 1rem 1.1rem; background: var(--paper-soft); box-shadow: inset 0 0 0 1px var(--gold); color: var(--ink); font: 400 17px/1.6 var(--font-author); }
@media (min-width: 761px) { .gw { --gw-breite: var(--shell); } }
.gw ::selection { background: var(--gold); color: var(--night); }
.gw-kopf h1 em { font-style: italic; color: var(--gold-bright); }
.gw-kopf .gw-countdown b { font-weight: inherit; }
/* Typografie „Typo so“ (0.38.0): erzählender Text in Newsreader, Manrope nur für Bedienung (Knöpfe, Felder, Hinweise, Fehler); Lesebreite 60–65 Zeichen */
.gw-kopf .gw-kopftext { margin: 0 0 1.75rem; max-width: 62ch; font: 400 clamp(1.1rem, 1.5vw, 1.25rem)/1.6 var(--font-author); }
.gw-kopf .gw-kopftext p { margin: 0 0 .75rem; }
.gw-kopf .gw-kopftext ul, .gw-kopf .gw-kopftext ol { margin: 0 0 .75rem; padding-left: 1.1rem; }
.gw-kopf .gw-kopftext li { margin: 0 0 .4rem; }
.gw-kopf .gw-kopftext a { color: inherit; }
.gw[data-zustand="beendet"] .gw-kopf .p-knoepfe, .gw[data-zustand="bevor"] .gw-kopf .p-knoepfe, .gw[data-zustand="beendet"] .gw-kopf .gw-kopftext, .gw[data-zustand="beendet"] .gw-countdown { display: none; }

/* Papier */
.gw-papier { --fokus: 1px solid var(--ink); padding: 0 0 clamp(3.5rem, 7vw, 6rem); background: var(--paper); color: var(--ink); }
.gw-papier a { color: var(--ink); text-underline-offset: .25em; }
.gw-papier :focus-visible { outline: 2px solid var(--gold-tinte); outline-offset: 3px; }

/* Leiste: Deine Lose · Lose gesamt · Tage übrig. Handy: schmal und klebend unter dem Kopf; Desktop: oben im Papier. */
.gw-leiste { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; text-align: center; padding: .6rem max(calc((100% - var(--gw-breite)) / 2), env(safe-area-inset-right, 0px)) .6rem max(calc((100% - var(--gw-breite)) / 2), env(safe-area-inset-left, 0px)); background: var(--paper); border-bottom: var(--haarlinie-papier); position: sticky; top: 0; z-index: 6; }
/* Querformat am Handy (Höhe unter 500 px): die Leiste klebt nicht, sie nähme ein Fünftel des Bildschirms */
@media (max-height: 499px) { .gw-leiste { position: static; } }
.gw-leiste-feld { display: flex; flex-direction: column; align-items: center; gap: .1rem; margin: 0; }
.gw-leiste-feld[hidden] { display: none; }
.gw-leiste-zahl { font: 400 1.875rem/1.1 var(--font-author); color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.gw-leiste-label { font: 600 12px/1.3 var(--font-world); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.gw[data-lade="ja"] .gw-leiste-zahl { min-width: 2ch; border-radius: 2px; color: transparent; background: var(--paper-soft); }
.gw-raster { display: grid; gap: 2.5rem; width: var(--gw-breite); margin: clamp(2rem, 4vw, 3rem) auto 0; }
.gw-route-spalte { container-type: inline-size; }
/* Schmal: Tafel „Über das Gewinnspiel“ vor Anmeldung und Route (Maxim 10.10.2026, 22:20); die übrige Info-Spalte bleibt danach */
@media (max-width: 1099px) { .gw-spalte-info { display: contents; } .gw-preise { order: 1; } .gw-ueber { order: 2; margin-bottom: 38px; } .gw-route-spalte { order: 3; } .gw-spalte-info > :not(.gw-ueber) { order: 4; } .gw-spalte-info > .gw-info + .gw-info { margin-top: -1.5rem; } } /* Polish 0.42.0: Als Rasterkinder addieren sich Lücke, Außenabstand und Absatzabstand (88 px über der Linie, 33 darunter); jetzt 32 wie ab 1100 px */
/* Tablet (768–1099 px, Maxim 22:32): zwei Spalten. Links Karussell + Tafel, rechts Anmeldung + Route; darunter Termine, Hinweise, Warum mitmachen, dann die Bedingungen */
@media (min-width: 768px) and (max-width: 1099px) {
  .gw-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem clamp(1.75rem, 4vw, 3rem); align-items: start; grid-template-rows: max-content 1fr; } /* Tafel schließt direkt ans Karussell an; die Mehrhöhe der rechten Spalte fällt in Zeile 2 */
  .gw-preise { grid-column: 1; grid-row: 1; }
  .gw-ueber { grid-column: 1; grid-row: 2; }
  .gw-route-spalte { grid-column: 2; grid-row: 1 / span 2; }
  .gw-spalte-info > :not(.gw-ueber) { grid-column: 1 / -1; max-width: 64ch; }
}
@media (min-width: 1100px) {
  .gw-leiste { position: static; padding-block: 1rem; margin-bottom: 0; }
  .gw-leiste-zahl { font-size: 2.25rem; }
  .gw-raster { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3rem clamp(2rem, 3vw, 3.5rem); align-items: start; margin-top: clamp(2.5rem, 4vw, 3.5rem); }
  .gw-preise { grid-column: 1 / span 4; grid-row: 1; }
  .gw-route-spalte { grid-column: 5 / span 4; grid-row: 1; }
  .gw-spalte-info { grid-column: 9 / span 4; grid-row: 1; }
}

/* Preise aus dem Builder: Bild, darunter Name und Beschreibung als eine Einheit; ab zwei Preisen ein Karussell */
.gw-preise { min-width: 0; }
.gw-portraet { margin: 0 0 1.25rem; }
.gw-portraet img { display: block; width: 100%; height: auto; }
.gw-preis { margin: 0; font: 400 clamp(1.5rem, 2vw, 1.85rem)/1.15 var(--font-author); letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.gw-wunsch { margin-top: .85rem; font: 400 17px/1.65 var(--font-author); color: var(--ink-dim); text-wrap: pretty; }
.gw-wunsch p { margin: 0 0 .75rem; text-align: left !important; }
/* Raster: Zeile 1 Bilder, Zeile 2 Punkte (bleiben stehen), Zeile 3 Texte; eine Spalte je Preis */
.gw-k-spur { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; grid-template-rows: auto auto auto; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.gw-k-spur::-webkit-scrollbar { display: none; }
.gw-karussell .gw-portraet { grid-row: 1; align-self: center; margin: 0; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.gw-karussell .gw-folie { grid-row: 3; min-width: 0; box-sizing: border-box; scroll-snap-align: start; scroll-snap-stop: always; }
/* Pfeile mittig auf dem Bild, leicht eingerückt (Höhe setzt das Skript je sichtbarer Folie); Punkte stehen in jeder Folie zwischen Bild und Überschrift */
.gw-karussell { position: relative; }
.gw-k-pfeil { position: absolute; z-index: 2; top: var(--k-y, 6rem); left: .6rem; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--night) 65%, transparent); color: var(--ivory); cursor: pointer; transition: background .2s; }
.gw-k-pfeil.gw-k-weiter { left: auto; right: .6rem; }
.gw-k-pfeil.gw-k-weiter svg { transform: scaleX(-1); }
.gw-k-pfeil:hover { background: color-mix(in srgb, var(--night) 85%, transparent); }
.gw-k-pfeil:focus-visible, .gw-k-spiel:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.gw-k-spiel { position: absolute; z-index: 2; top: .35rem; right: .35rem; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--ivory); cursor: pointer; }
.gw-k-spiel::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: color-mix(in srgb, var(--night) 65%, transparent); transition: background .2s; }
.gw-k-spiel:hover::before { background: color-mix(in srgb, var(--night) 85%, transparent); }
.gw-k-spiel svg { position: relative; }
.gw-k-spiel[hidden] { display: none; }
.gw-k-spiel .gw-k-play, .gw-k-spiel[data-spielt="nein"] .gw-k-pause { display: none; }
.gw-k-spiel[data-spielt="nein"] .gw-k-play { display: block; }
.gw-k-punkte { grid-row: 2; grid-column: 1 / span var(--n); position: sticky; left: 0; justify-self: start; width: calc(100% / var(--n)); display: flex; justify-content: center; margin: .25rem 0 .5rem; }
.gw-k-punkt { position: relative; width: 28px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.gw-k-punkt::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; box-sizing: border-box; border: 1px solid var(--gold-tinte); border-radius: 50%; background: transparent; transition: background .3s var(--ease); }
.gw-k-punkt[aria-current="true"]::before { background: var(--gold); }
.gw-k-punkt:focus-visible { outline: 2px solid var(--gold-tinte); outline-offset: -4px; }
.gw-gewinner { margin-bottom: 2rem; }
.gw-gewinner h2, .gw-info h2 { margin: 0 0 .75rem; font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold-tinte); }
.gw-gewinner ul { margin: 0; padding: 0; list-style: none; font: var(--type-prose); }

/* Spalte 3: Über das Gewinnspiel, Termine, Hinweise, Warum mitmachen */
.gw-spalte-info { min-width: 0; max-width: 64ch; color: var(--ink-dim); font: 400 17px/1.65 var(--font-author); }
/* Über das Gewinnspiel: Nacht-Tafel als Auftakt der Spalte, Brücke zum dunklen Seitenkopf (Maxim 10.10.2026, 21:23; 0.38.0 „A mit Siegel“, 21:40):
   erster Absatz als Auftakt mit goldener Initiale (wie Biografie/Beitrag, .entry-content), feiner Goldrahmen mit Eckzierden, Feder als
   Wasserzeichen, Wachssiegel über der oberen Kante, Goldlinie oben zieht sich einmal ein. Alles Zier ist aria-hidden; der Text bleibt der aus der Darstellung. */
.gw-ueber { position: relative; isolation: isolate; margin: 1.6rem 0 2rem; padding: 2.7rem 1.9rem 2.2rem; background: var(--coal); color: var(--ivory-dim); font: 400 18px/1.7 var(--font-author); }
.gw-ueber-linie { position: absolute; z-index: 1; top: 0; left: 0; right: 0; height: 2px; background: var(--gold); transform-origin: left center; }
.gw-ueber[data-linie="vor"] .gw-ueber-linie { transform: scaleX(0); }
@media (prefers-reduced-motion: no-preference) { .gw-ueber[data-linie="ja"] .gw-ueber-linie { transform: none; transition: transform 1.3s cubic-bezier(.16, 1, .3, 1); } }
.gw-ueber-rahmen { position: absolute; z-index: 0; inset: 10px; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); color: var(--gold); pointer-events: none; }
.gw-ecke { position: absolute; display: block; width: 16px; height: 16px; margin: -1px; overflow: visible; }
.gw-ecke:nth-child(1) { top: 0; left: 0; }
.gw-ecke:nth-child(2) { top: 0; right: 0; transform: scaleX(-1); }
.gw-ecke:nth-child(3) { bottom: 0; right: 0; transform: scale(-1); }
.gw-ecke:nth-child(4) { bottom: 0; left: 0; transform: scaleY(-1); }
.gw-feder-wasser { position: absolute; z-index: 0; left: 1.6rem; bottom: 1.4rem; width: 9.5rem; height: auto; color: var(--gold); opacity: .055; pointer-events: none; }
.gw-wachs { position: absolute; z-index: 2; bottom: -38px; right: -34px; width: 96px; height: auto; filter: drop-shadow(0 6px 10px rgba(7, 7, 6, .32)) drop-shadow(0 1px 2px rgba(7, 7, 6, .25)); pointer-events: none; }
.gw-ueber:has(.gw-wachs) { margin-bottom: calc(2rem + 38px); }
@media (min-width: 768px) and (max-width: 1099px) { .gw-wachs { right: -14px; } } /* Polish 0.42.0: das Siegel der Tafel ragte im Tablet-Layout bis auf 4 px an die Routenlinie, jetzt 24 px */
.gw-ueber p { position: relative; z-index: 1; margin: 0 0 1rem; max-width: 62ch; text-wrap: pretty; }
.gw-ueber > p:first-of-type { margin-bottom: 1.15rem; color: var(--ivory); font-size: clamp(1.3rem, 5.4vw, 1.5rem); line-height: 1.5; }
.gw-ueber > p:first-of-type::first-letter { float: left; margin: .06em .12em 0 0; color: var(--gold-bright); font: 400 5.15em/.7 var(--font-author); }
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  .gw-ueber > p:first-of-type::first-letter { float: none; margin: 0 .48em 0 0; font-family: var(--font-author); font-size: inherit; line-height: inherit; -webkit-initial-letter: 3; initial-letter: 3; }
}
.gw-ueber > :last-child { margin-bottom: 0; }
.gw-ueber em { color: var(--gold); }
.gw-ueber strong { color: var(--ivory); }
.gw-ueber a { color: var(--gold); }
@media (max-width: 519px) { .gw-ueber { padding: 2.5rem 1.55rem 1.9rem; font-size: 17px; } .gw-wachs { right: -10px; width: 76px; bottom: -30px; } .gw-feder-wasser { width: 7.5rem; left: 1.1rem; } }
.gw-ueber ul, .gw-ueber ol, .gw-info ul { margin: 0 0 1rem; padding-left: 1.1rem; }
.gw-ueber ul, .gw-ueber ol { position: relative; z-index: 1; }
.gw-info ul { list-style: none; padding-left: 0; }
.gw-info li { margin-bottom: .6rem; }
.gw-warum ul { list-style: disc; padding-left: 1.1rem; }
.gw-warum li { padding-left: .2rem; }
.gw-warum li::marker { color: var(--gold); }
.gw-info + .gw-info { margin-top: 2rem; padding-top: 2rem; border-top: var(--haarlinie-papier); }
.gw-info strong { color: var(--ink); font-weight: 600; }
.gw-ueber strong { font-weight: 600; }

/* Route: eine durchgehende gepunktete Goldlinie von Siegel zu Siegel; keine Station ist dauerhaft hervorgehoben, nur die geöffnete bekommt einen ruhigen Grund */
.gw-stationen { list-style: none; margin: 0; padding: 0; }
.gw-station { position: relative; padding: 0 0 .9rem 2.5rem; scroll-margin-top: 6rem; }
.gw-station:last-child { padding-bottom: 0; }
.gw-siegel { z-index: 1; position: absolute; left: 0; top: var(--gw-v); box-sizing: border-box; width: var(--gw-siegel); height: var(--gw-siegel); display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gold); background: var(--paper); color: var(--ink); }
.gw-siegel svg { width: 70%; height: 70%; opacity: 0; }
.gw-station[data-zustand="offen"] .gw-siegel, .gw-station[data-zustand="arbeitet"] .gw-siegel { box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 10px var(--gold); }
.gw-station[data-zustand="erledigt"] .gw-siegel { background: var(--gold); }
.gw-station[data-zustand="erledigt"] .gw-siegel svg { opacity: 1; }
/* gepunktete Goldlinie von Siegel zu Siegel; erledigte Stationen ziehen ihr Stück durchgezogen nach */
.gw-station:not(.gw-ziel)::before, .gw-station:not(.gw-ziel)::after { content: ""; position: absolute; left: calc(var(--gw-siegel) / 2 - 1px); top: calc(var(--gw-v) + var(--gw-siegel) / 2); bottom: calc(-1 * (var(--gw-v) + var(--gw-siegel) / 2)); border-left: 2px dotted var(--gold); pointer-events: none; }
.gw-station:not(.gw-ziel)::after { border-left-style: solid; transform: scaleY(0); transform-origin: top; }
.gw-station[data-zustand="erledigt"]:not(.gw-ziel)::after { transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .gw-bewegt .gw-siegel { transition: background .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease); }
  .gw-bewegt .gw-siegel svg { transition: opacity .3s var(--ease) .2s; }
  .gw-bewegt .gw-station:not(.gw-ziel)::after { transition: transform .6s var(--ease) .2s; }
  /* Delight 0.41.0, nur beim echten Gutschreiben (Skript setzt data-neu / data-roll / data-stempel / data-leuchtet, je einmal, unter 1 s; nur transform und opacity) */
  .gw-station[data-neu="ja"] .gw-siegel { animation: gw-stempel .5s var(--ease); }
  .gw-leiste-zahl[data-roll="ja"] { position: relative; animation: gw-rolle-neu .55s var(--ease); }
  .gw-leiste-zahl[data-roll="ja"]::before { content: attr(data-alt); position: absolute; inset: 0; text-align: center; animation: gw-rolle-alt .55s var(--ease) both; }
  .gw-leiste-zahl[data-roll="ja"]::after { content: attr(data-plus); position: absolute; left: 100%; top: -.1em; margin-left: .15em; font: 600 .5em/1 var(--font-world); color: var(--gold-tinte); animation: gw-plus .9s var(--ease) both; pointer-events: none; }
  .gw-stationen { position: relative; }
  .gw-stationen[data-leuchtet="ja"]::before { content: ""; position: absolute; z-index: 0; left: calc(var(--gw-siegel) / 2 - 8px); width: 16px; top: calc(var(--gw-v) + var(--gw-siegel) / 2); bottom: calc(var(--gw-unten, 0px) - var(--gw-v) - var(--gw-siegel) / 2); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 70%, transparent) 50%, transparent); transform-origin: top; animation: gw-leuchten .65s var(--ease) .3s both; pointer-events: none; }
  .gw-ziel[data-stempel="ja"] .gw-ziel-wachs { visibility: visible; animation: gw-druck .9s var(--ease) .3s both; } /* Maxim 10.10. 23:46: nur während des Stempelns sichtbar, blendet danach aus (endet vor dem Entfernen von data-stempel nach 1,2 s) */
}
@keyframes gw-stempel { 0% { transform: scale(1); } 35% { transform: scale(1.28); } 70% { transform: scale(.92); } 100% { transform: scale(1); } }
@keyframes gw-rolle-neu { from { transform: translateY(55%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gw-rolle-alt { from { transform: none; opacity: 1; } to { transform: translateY(-55%); opacity: 0; } }
@keyframes gw-plus { 0% { transform: translateY(.3em); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-.9em); opacity: 0; } }
@keyframes gw-leuchten { 0% { transform: scaleY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@keyframes gw-druck { 0% { transform: scale(1.7) translateY(-10px); opacity: 0; } 35% { transform: scale(.94); opacity: 1; } 50% { transform: none; opacity: 1; } 65% { transform: none; opacity: 1; } 100% { transform: none; opacity: 0; } }
.gw-st-koerper { padding: .75rem .9rem .85rem; }
.gw-st-kopf { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: .6rem; align-items: start; }
/* Offen (0.37.2): Papier-Soft mit feiner Goldlinie rundum und mindestens 20 px Innenabstand, auch am Handy; Hover ist nur ein Hauch Gold.
   Polish 0.42.0: Der Rahmen ist eine Fläche hinter dem Körper (8 px über den Rand hinaus), nicht mehr dessen Innenabstand; Titel und Siegel bleiben
   beim Öffnen und Schließen an derselben Stelle (vorher sprang der Titel 8 px nach unten und 6 px nach rechts). */
.gw-st-koerper { position: relative; isolation: isolate; transition: background .3s var(--ease); }
.gw-st-koerper::before { content: ""; position: absolute; z-index: -1; inset: -8px; background: var(--paper-soft); box-shadow: inset 0 0 0 1px var(--gold); opacity: 0; pointer-events: none; }
.gw-station[data-offen="ja"] .gw-st-koerper::before { opacity: 1; }
.gw-station[data-offen="ja"] { padding-bottom: 1.9rem; } /* Abstand zwischen zwei offenen Rahmen bleibt 14 px */
.gw-station[data-offen="ja"] .gw-st-koerper:has(> .gw-st-kopf .gw-st-knopf:focus-visible) { outline-offset: 8px; } /* Fokusring liegt am Rahmen */
@media (prefers-reduced-motion: no-preference) { .gw-st-koerper::before { transition: opacity .3s var(--ease); } .gw-st-inhalt { transition: opacity .2s var(--ease); } }
/* Leichter Hover auf klickbaren Stationen (Maxim 10.10.2026, 21:24); erledigte bleiben ruhig, geöffnete behalten ihren Grund */
@media (hover: hover) { .gw-station:not(.gw-ziel):not([data-zustand="erledigt"]):not([data-offen="ja"]):hover .gw-st-koerper { background: color-mix(in srgb, var(--gold) 8%, var(--paper)); } }
.gw-icon { grid-row: 1; grid-column: 1; margin-top: .2rem; color: var(--gold-tinte); }
.gw-st-titel { grid-column: 2; margin: 0; font: 400 19px/1.3 var(--font-author); color: var(--ink); }
.gw-st-knopf { all: unset; box-sizing: border-box; cursor: pointer; }
.gw-st-knopf::after { content: ""; position: absolute; inset: -.5rem -.9rem -.5rem -.9rem; }
/* Fokus (0.37.2): nur per Tastatur, und als Rahmen um die ganze Stationszeile, nicht um den Titel */
.gw-papier .gw-st-knopf:focus-visible { outline: none; }
.gw-st-koerper:has(> .gw-st-kopf .gw-st-knopf:focus-visible) { outline: 2px solid var(--gold-tinte); outline-offset: 0; }
.gw-station[data-zustand="erledigt"]:not([data-familie="einladen"]) .gw-st-knopf { cursor: default; }
.gw-station[data-offen="ja"] .gw-st-knopf { color: var(--ink); }
.gw-st-lose { grid-column: 2; margin: .1rem 0 0; font: 600 13px/1.3 var(--font-world); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold-tinte); }
.gw-erledigt-wort { display: none; }
.gw-station[data-zustand="erledigt"] .gw-erledigt-wort { display: inline; }
.gw-st-inhalt { display: none; gap: .8rem; margin: .8rem 0 0 calc(20px + .6rem); font: var(--type-ui); }
.gw-station[data-offen="ja"] .gw-st-inhalt { display: grid; }
/* Sprechblase (0.37.1): steht unter Titel und Losen der Station und schiebt die Route nach unten, statt die nächste Station zu verdecken; Pfeil
   zeigt auf den Titel. Zugeklappt hat sie keine Höhe (Raster 0fr) und ist unsichtbar, auch für Tab. Das Wackeln fällt bei reduzierter Bewegung weg. */
.gw-blase { grid-column: 2; display: grid; grid-template-rows: 0fr; margin: 0; opacity: 0; visibility: hidden; }
.gw-blase[data-sichtbar="ja"] { grid-template-rows: 1fr; opacity: 1; visibility: visible; }
.gw-blase-innen { min-height: 0; overflow: hidden; padding-top: .55rem; }
.gw-blase-box { position: relative; max-width: 22rem; padding: .6rem .8rem .2rem; background: var(--ink); color: var(--paper); font: 500 15px/1.4 var(--font-ui); box-shadow: 0 .4rem 1rem rgba(33, 31, 27, .22); }
.gw-blase-box::before { content: ""; position: absolute; left: 1rem; bottom: 100%; border: .45rem solid transparent; border-top-width: 0; border-bottom-color: var(--ink); }
.gw-blase-text { display: block; }
.gw-blase-knopf { display: block; min-height: var(--ziel); padding: 0; border: 0; background: none; color: var(--gold); font: 600 14px/1 var(--font-ui); text-decoration: underline; text-underline-offset: .25em; cursor: pointer; }
.gw-blase-knopf:hover { color: var(--ivory); }
.gw-blase-knopf:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .gw-blase { transition: grid-template-rows .3s var(--ease), opacity .25s var(--ease), visibility 0s linear .3s; }
  .gw-blase[data-sichtbar="ja"] { transition-delay: 0s; }
}
@keyframes gw-wackeln { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@media (prefers-reduced-motion: no-preference) { .gw-st-kopf.gw-wackelt { animation: gw-wackeln .3s ease-in-out; } }
/* Abgemeldet zurückgenommen (0.37.1): Siegelrand, Zeichnung, Titel und Lose in --ink-dim; nur die Anmeldung selbst bleibt golden. Nach der Anmeldung gelten
   wieder die goldenen Zustände, mit weichem Übergang (nicht bei reduzierter Bewegung). Der Hover bleibt (gold-10). */
.gw-station[data-zustand="gesperrt"] .gw-siegel { border-color: var(--ink-dim); }
.gw-station[data-zustand="gesperrt"] .gw-icon, .gw-station[data-zustand="gesperrt"] .gw-st-titel, .gw-station[data-zustand="gesperrt"] .gw-st-lose { color: var(--ink-dim); }
@media (prefers-reduced-motion: no-preference) {
  .gw-bewegt .gw-icon, .gw-bewegt .gw-st-titel, .gw-bewegt .gw-st-lose { transition: color .5s var(--ease); }
}
/* Sprungziel „Anmelden“ (Teilnehmen im Kopf, #anmelden): Anmeldeblock landet unter Kopfzeile und klebender Lose-Leiste (Handy), nicht darunter versteckt */
.gw-anmeldung { scroll-margin-top: 5rem; } /* html trägt schon scroll-padding-top = Kopfzeile; dazu die klebende Leiste (4 rem) und 1 rem Luft */
@media (min-width: 1100px), (max-height: 499px) { .gw-anmeldung { scroll-margin-top: 1rem; } } /* Leiste steht im Fluss, nur Luft */
/* Kopf der Gewinnspielseite am Handy: das Buch im Hero bleibt zu sehen (Bildausschnitt links, kaum weichgezeichnet), die Schrift liegt auf einem dichteren Verlauf */
@media (max-width: 899px) {
  .gw-rahmen .kopf-bild { object-position: 30% 50%; filter: saturate(.95); transform: none; }
  .mm-header.gw-rahmen::before { background: linear-gradient(180deg, var(--night-82) 0%, rgba(7, 7, 6, .71) 40%, rgba(7, 7, 6, .67) 100%); } /* 0.40.0: dichter, Schlechtestfall (hellster Bildpunkt hinter der Schrift) ≥ 4,5 : 1 für Titel, Betonung, Kopftext und Countdown; vorher .62/.3 → 3,1 bis 3,7 : 1 */
}
.gw-station[data-zustand="arbeitet"] .gw-st-inhalt { opacity: .7; pointer-events: none; }
.gw-station[data-zustand="arbeitet"] .gw-st-inhalt .gw-knopf[aria-disabled="true"] { opacity: 1; } /* sonst .7 × .7 = .49 (Polish 0.42.0) */
.gw-st-meldung { margin: .6rem 0 0 calc(20px + .6rem); font: 500 15px/1.5 var(--font-ui); color: var(--ink-dim); }
.gw-st-meldung:empty { display: none; }
.gw-station[data-unterwegs="ja"] [data-gw="bestaetigen"]:not(:focus) { display: none; } /* Bestätigungsmail unterwegs: Knopf erst nach 48 h wieder; solange er den Fokus hat, bleibt er stehen (aria-disabled) */
.gw-station[data-unterwegs="ja"] [data-gw="bestaetigen"][aria-disabled="true"] { opacity: .7; cursor: default; }
@media (max-width: 519px) { .gw-st-inhalt, .gw-st-meldung { margin-left: 0; } }
.gw-st-meldung[data-art="ok"] { color: var(--gold-tinte); }
.gw-st-meldung[data-art="fehler"] { color: var(--fehlerrot-papier); }
.gw-hinweis { margin: 0; font: 400 14px/1.5 var(--font-ui); color: var(--ink-dim); }
.gw-hinweis:empty { display: none; }
/* Wiederkehrende: bis die Antwort da ist, ein neutrales Gerüst statt des Formulars */
.gw-anmeldung { margin-bottom: 1.5rem; }
.gw-anmeldung .gw-st-meldung { margin-left: 0; }
.gw-station[data-station="anmelden"] .gw-st-inhalt, .gw-station[data-station="anmelden"] .gw-st-meldung { display: none; }
.gw-lade { display: none; gap: .6rem; margin-top: .8rem; }
.gw[data-lade="ja"] .gw-lade { display: grid; }
.gw[data-lade="ja"] .gw-form { display: none; }
.gw-lade span { display: block; height: 2.6rem; background: var(--paper-soft); border-radius: 2px; }
.gw-lade span:last-child { width: 60%; }
@media (prefers-reduced-motion: no-preference) { .gw-lade span { animation: gw-lade 1.4s ease-in-out infinite alternate; } }
@keyframes gw-lade { from { opacity: .55; } to { opacity: 1; } }

/* Felder im Papiermuster (wie .hueter-karte) */
.gw .feld label { color: var(--ink); font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; }
.gw .feld input { background: var(--paper-white); border: 1px solid var(--ink-dim); color: var(--ink); caret-color: var(--gold-tinte); }
.gw .feld input::placeholder { color: var(--ink-dim); }
.gw .feld input:focus-visible { outline: var(--fokus); outline-offset: 2px; }
.gw .feld input[aria-invalid="true"] { border-color: var(--fehlerrot-papier); }
.gw-form { display: grid; gap: .9rem; }
.gw-email-form, .gw-email-felder { display: grid; gap: .9rem; }
.gw-email-felder[hidden], .gw-google[hidden] { display: none; }
.gw-einwilligung { margin-top: .35rem; }
/* Hinweis an der Anmeldung (Darstellung, Box Anmeldung): eigene ruhige Zeile direkt über dem Häkchen, nicht im Einwilligungssatz */
.gw-anmelde-hinweis { margin: .35rem 0 -.35rem; font: 400 16px/1.5 var(--font-author); color: var(--ink-dim); }
.gw-email-knopf { width: 100%; }
.gw[data-angemeldet="ja"] .gw-form { display: none; }
.gw-feldfehler { margin: -.45rem 0 0; font: 500 14px/1.45 var(--font-ui); color: var(--fehlerrot-papier); }
.gw-einwilligung { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; }
.gw-einwilligung input { appearance: none; -webkit-appearance: none; flex: none; width: 1.375rem; height: 1.375rem; margin: .2rem 0 0; border: 1px solid var(--gold-tinte); border-radius: 0; background: var(--paper-white) center / 80% no-repeat; cursor: pointer; }
.gw-einwilligung input:checked { background-color: var(--gold); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3.2 3.2 6.4-7.2' fill='none' stroke='%23211f1b' stroke-width='2'/%3E%3C/svg%3E"); }
.gw-einwilligung input[aria-invalid="true"] { outline: 2px solid var(--fehlerrot-papier); outline-offset: 2px; }
.gw-einwilligung label { font: 400 14px/1.55 var(--font-ui); color: var(--ink-dim); cursor: pointer; }
.gw-einwilligung label a { padding-block: .6rem; color: var(--ink); }
.gw .gw-knopf { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 48px; text-align: center; }
.gw-form .gw-knopf, .gw-fb, .gw-google { width: 100%; }
.gw .gw-form .gw-knopf { min-height: 48px; }
.gw .gw-knopf.gw-leise { background: transparent; color: var(--ink); border: 1px solid var(--ink); cursor: pointer; font: var(--type-button); letter-spacing: var(--track-button); text-transform: uppercase; text-decoration: none; padding: 0 1.25rem; border-radius: 0; transition: background .2s, color .2s; }
.gw .gw-knopf.gw-leise:hover, .gw .gw-knopf.gw-leise:focus-visible { background: var(--ink); color: var(--paper); }
.gw .gw-knopf[aria-disabled="true"], .gw-fb[aria-disabled="true"], .gw-google[aria-disabled="true"] { opacity: .7; cursor: progress; }
/* Druckfeedback für Touch (0.40.0): Knöpfe, Anmeldeknöpfe und Stationszeilen reagieren sofort auf den Finger */
.gw .gw-knopf, .gw-fb, .gw-google, .gw-blase-knopf, .gw-k-pfeil, .gw-k-punkt { transition-property: background, color, transform, box-shadow; }
.gw .gw-knopf:active, .gw-fb:active, .gw-google:active { transform: scale(.985); }
.gw .gw-knopf:active { background: color-mix(in srgb, var(--gold) 82%, var(--ink)); }
.gw .gw-knopf.gw-leise:active { background: var(--ink); color: var(--paper); }
.gw-fb:active { background: #125fc0; }
.gw-google:active { background: #e3e3e3; }
.gw-text-knopf:active { color: var(--ink); }
.gw-k-pfeil:active, .gw-k-spiel:active, .gw-k-punkt:active { transform: scale(.92); }
.gw-station:not(.gw-ziel):not([data-zustand="erledigt"]):not([data-offen="ja"]):active .gw-st-koerper { background: color-mix(in srgb, var(--gold) 16%, var(--paper)); }
.gw-station[data-offen="ja"] .gw-st-kopf:active { opacity: .8; }
.gw-st-inhalt > .gw-knopf { justify-self: start; }
.gw-oder { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .9rem; margin: .2rem 0; font: 500 13px/1 var(--font-ui); color: var(--ink-dim); }
.gw-oder::before, .gw-oder::after { content: ""; height: 1px; background: var(--paper-rule); }
/* Facebook-Knopf im Stil von Meta (Blau, weißes „f“); #166fe5 ist das Hover-Blau der Marke: weiße Schrift 4,7 : 1 */
.gw-fb { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; box-sizing: border-box; min-height: 48px; padding: 0 1.25rem; border: 0; border-radius: 2px; background: #166fe5; color: #fff; font: 600 16px/1 var(--font-ui); cursor: pointer; transition: background .2s; }
.gw-fb:hover { background: #1464d4; }
.gw-google { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; box-sizing: border-box; min-height: 48px; padding: 0 1.25rem; border: 1px solid #747775; border-radius: 2px; background: #fff; color: #1f1f1f; font: 600 16px/1 var(--font-ui); cursor: pointer; transition: background .2s; }
.gw-google:hover { background: #f0f0f0; }
/* Teilnehmerkopf (0.40.0, Maxim 22:41): Vorname groß in Newsreader als Anker, E-Mail klein darunter, „Abmelden“ als Textlink rechts */
.gw-angemeldet { display: none; align-items: center; justify-content: space-between; gap: .5rem 1.25rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--gold); font: var(--type-ui); }
.gw[data-angemeldet="ja"] .gw-angemeldet { display: flex; }
.gw-teilnehmer { min-width: 0; }
.gw-t-name { margin: 0; color: var(--ink); font: 400 clamp(1.9rem, 6vw, 2.35rem)/1.1 var(--font-author); letter-spacing: -.015em; overflow-wrap: anywhere; }
.gw-t-mail { margin: .3rem 0 0; color: var(--ink-dim); font: 400 14px/1.4 var(--font-ui); overflow-wrap: anywhere; }
.gw-t-name:empty, .gw-t-mail:empty { display: none; }
.gw-angemeldet .gw-text-knopf { flex: none; }
.gw-text-knopf { min-height: var(--ziel); padding: 0; border: 0; background: none; color: var(--gold-tinte); font: 500 14px/1 var(--font-ui); text-decoration: underline; text-underline-offset: .25em; cursor: pointer; }

/* Einladung, Channel */
/* Einladungslink (0.37.2): volle Breite auf eigener Zeile, auswählbar; darunter Hauptknopf, Textlink „Teilen“ und „Kopiert“ */
.gw-link-feld { display: block; width: 100%; box-sizing: border-box; text-overflow: ellipsis; user-select: all; -webkit-user-select: all; }
.gw-link-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin-top: .75rem; }
.gw-kopiert { font: 500 14px/1.4 var(--font-ui); color: var(--gold-tinte); }
.gw-kopiert:empty { display: none; }
.gw-anweisung { margin: 0; font: 400 17px/1.65 var(--font-author); color: var(--ink-dim); text-wrap: pretty; overflow-wrap: anywhere; }
.gw-anweisung strong, .gw-anweisung b { color: var(--ink); font-weight: 600; }
.gw-anweisung a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold-tinte); text-decoration-thickness: 1px; text-underline-offset: .25em; }
.gw-anweisung a:hover { color: var(--gold-tinte); }
.gw-anweisung small { font: 400 14px/1.55 var(--font-ui); }
.gw-anweisung p { margin: 0 0 .75rem; }
.gw-anweisung p:empty, .gw-anweisung > :first-child.gw-absatz, .gw-anweisung > :last-child.gw-absatz { display: none; }
.gw-anweisung > :last-child { margin-bottom: 0; }
.gw-absatz { display: block; height: .6em; } /* zwei und mehr Zeilenumbrüche in Folge: schmaler Absatzabstand statt Leerzeilen */
/* Lange Etiketten in Satzschreibung: Versalien nur bis drei Wörter (Klasse setzt mm_gw_lang) */
.gw .feld label.gw-lang { text-transform: none; letter-spacing: 0; font: 500 14px/1.45 var(--font-ui); }
.gw-st-lose.gw-lang { text-transform: none; letter-spacing: 0; font: 400 15px/1.4 var(--font-author); }
.gw-channel-form { display: grid; gap: .85rem; }
.gw-channel-form .gw-knopf { justify-self: start; }

/* Umfrage, Upload */
.gw-wahlen { display: grid; gap: .5rem; margin: 0 0 .8rem; padding: 0; border: 0; }
.gw-wahl { display: flex; gap: .6rem; align-items: center; min-height: var(--ziel); cursor: pointer; font: var(--type-ui); color: var(--ink); }
.gw-wahl input { width: 1.1rem; height: 1.1rem; accent-color: var(--gold-tinte); }
.gw-upload-form, .gw-antwort-form, .gw-umfrage-form { display: grid; gap: .8rem; }
/* Bild wählen (0.37.2): gestaltete Fläche statt Browser-Dateifeld; das echte Feld bleibt (unsichtbar, aber fokussierbar) für Upload und Tastatur */
.gw-datei { position: relative; }
.gw-datei-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.gw-datei-flaeche { display: flex; align-items: center; gap: .9rem; box-sizing: border-box; min-height: 5.5rem; padding: 1rem 1.1rem; border: 1px dashed var(--gold-tinte); background: var(--paper-white); color: var(--ink); font: var(--type-ui); transition: background .2s, border-color .2s; }
.gw-datei:hover .gw-datei-flaeche, .gw-datei-flaeche[data-zieht="ja"] { background: var(--gold-10); border-style: solid; }
.gw-datei-input:focus-visible + .gw-datei-flaeche { outline: 2px solid var(--gold-tinte); outline-offset: 3px; }
.gw-datei-input[aria-invalid="true"] + .gw-datei-flaeche { border-color: var(--fehlerrot-papier); }
.gw-datei-vorschau { flex: none; width: 3.5rem; height: 3.5rem; object-fit: cover; border: 1px solid var(--paper-rule); }
.gw-datei-vorschau[hidden] { display: none; }
.gw-datei-text { display: grid; gap: .15rem; min-width: 0; }
.gw-datei-titel { font: var(--type-button); letter-spacing: var(--track-button); text-transform: uppercase; color: var(--gold-tinte); }
.gw-datei-name { font: var(--type-meta); color: var(--ink-dim); overflow-wrap: anywhere; }
.gw-datei-name:empty { display: none; }
.gw-antwort-form .gw-knopf, .gw-upload-form .gw-knopf, .gw-umfrage-form .gw-knopf { justify-self: start; }

/* Aktionstypen (0.39.0): Besuchen, Folgen, Bewertung, Teilen, Beitrag, Video, Pflichtaktionen. Hauptaktion = Goldknopf, Nebenaktion = Textlink (Regel 0.37.2) */
.gw-station[hidden], .gw-bonus[hidden] { display: none; }
.gw-feld-form { display: grid; gap: .8rem; }
.gw-feld-form .gw-knopf { justify-self: start; }
a.gw-text-knopf { display: inline-flex; align-items: center; justify-self: start; box-sizing: border-box; color: var(--gold-tinte); }
.gw-text-knopf:hover { color: var(--ink); }
.gw-text-knopf:focus-visible, .gw-hilfe:focus-visible { outline: var(--fokus); outline-offset: 2px; }
.gw-hilfe { justify-self: start; display: inline-flex; align-items: center; min-height: var(--ziel); font: 400 14px/1.4 var(--font-ui); color: var(--ink-dim); text-decoration: underline; text-decoration-color: var(--gold-tinte); text-underline-offset: .25em; }
.gw-hilfe:hover { color: var(--ink); }
.gw-teilen-liste { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.gw-optin { margin: 0; }
.gw-embed { max-width: 100%; overflow: hidden; }
.gw-embed:empty { display: none; }
.gw-embed-rahmen { display: block; width: 100%; max-width: 500px; height: 560px; border: 0; background: var(--paper-white); }
.gw-embed blockquote { max-width: 100%; margin: 0; padding: 1rem; background: var(--paper-white); border: 1px solid var(--paper-rule); font: var(--type-ui); color: var(--ink-dim); overflow-wrap: anywhere; }
.gw-embed a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold-tinte); text-underline-offset: .25em; }
.gw-embed-fallback { margin: 0; }
.gw-video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--night); }
.gw-video iframe, .gw-video-flaeche { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Facebook-Plugins (0.40.0): Platz vorhalten, damit die Station beim Laden des SDK nicht springt */
.gw-fb-plugin { min-height: 28px; max-width: 100%; overflow: hidden; }
.gw-fb-plugin[data-groesse="large"] { min-height: 40px; }
.gw-fb-plugin .fb_iframe_widget, .gw-fb-plugin .fb_iframe_widget span { max-width: 100%; }
[data-gw="fb-fallback"][hidden] { display: none; }
/* Pflichtaktionen: Hinweis „Bonuslose“ in der Route, solange nicht alle erledigt sind */
.gw-bonus { margin: .25rem 0 0 2.5rem; padding: .75rem .9rem; list-style: none; border-top: 1px solid var(--gold); }
.gw-bonus-titel { margin: 0 0 .25rem; font: 400 19px/1.3 var(--font-author); color: var(--ink); }
.gw-bonus-text { margin: 0; font: 400 16px/1.5 var(--font-author); color: var(--ink-dim); }

/* Ziel der Route */
.gw-ziel { padding-bottom: 0; }
.gw-ziel .gw-st-koerper { padding-top: .5rem; } /* Zielzeile (28 px) mittig zum Siegel wie die übrigen Stationen (Polish 0.42.0) */
.gw-ziel-text { margin: 0; font: 400 28px/1.2 var(--font-author); color: var(--ink-dim); font-variant-numeric: tabular-nums lining-nums; }
.gw-ziel-zahl { color: var(--gold-tinte); font-weight: 500; }
.gw-ziel[data-zustand="erledigt"] .gw-ziel-text { color: var(--ink); }
/* Haken im Ziel-Siegel erst, wenn alle Stationen erledigt sind (0.37.2); vorher bleibt das Siegel leer, auch bei Losen */
.gw-ziel:not([data-fertig="ja"]) .gw-siegel { background: var(--paper); }
.gw-ziel:not([data-fertig="ja"]) .gw-siegel svg { opacity: 0; }
/* Wachssiegel auf dem Ziel (0.41.0, geändert 0.42.0): echtes Bild, nur während des Stempelns sichtbar (data-stempel, nur ohne reduzierte Bewegung), danach nur noch Opacity-Ausblenden;
   im Endzustand und beim Laden einer schon erledigten Seite nie zu sehen. Das Bild bleibt im DOM und lädt vor. */
.gw-ziel .gw-st-koerper { position: relative; }
.gw-ziel-wachs { position: absolute; top: 0; bottom: 0; right: .5rem; margin-block: auto; width: 56px; height: auto; visibility: hidden; opacity: 0; filter: drop-shadow(0 3px 5px rgba(7, 7, 6, .3)); pointer-events: none; }
.gw-ziel-fertig { display: none; margin: .4rem 0 0; font: 400 16px/1.5 var(--font-author); color: var(--gold-tinte); }
.gw-ziel[data-fertig="ja"] .gw-ziel-fertig { display: block; }

/* Zustände: vor dem Start und nach dem Ende ersetzt eine ruhige Meldung die Route */
.gw-zustand { display: none; padding: 1rem 0 0; }
.gw-zustand-text { margin: 0; font: 400 clamp(1.7rem, 3vw, 2.4rem)/1.2 var(--font-author); color: var(--ink); text-wrap: balance; }
.gw-zustand-dank { margin: .6rem 0 0; font: var(--type-prose); color: var(--ink-dim); }
.gw[data-zustand="beendet"] .gw-route, .gw[data-zustand="bevor"] .gw-route, .gw[data-zustand="beendet"] .gw-leiste, .gw[data-zustand="bevor"] .gw-leiste, .gw[data-zustand="beendet"] .gw-anmeldung, .gw[data-zustand="bevor"] .gw-anmeldung { display: none; }
.gw[data-zustand="beendet"] .gw-zustand, .gw[data-zustand="bevor"] .gw-zustand { display: block; }
.gw[data-zustand="bevor"] .gw-zustand-dank { display: none; }

/* Teilnahmebedingungen (außerhalb des Rasters, damit die klebenden Spalten sie nie überdecken) */
.gw-bedingungen { width: var(--gw-breite); margin: 3rem auto 0; border-top: var(--haarlinie-papier); border-bottom: var(--haarlinie-papier); }
.gw-bedingungen summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; padding: .5rem 0; cursor: pointer; list-style: none; font: var(--type-button); letter-spacing: var(--track-button); text-transform: uppercase; color: var(--gold-tinte); }
.gw-bedingungen summary::-webkit-details-marker { display: none; }
.gw-bedingungen summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; }
.gw-bedingungen[open] summary::after { background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat; }
.gw-bedingungen summary:hover { color: var(--ink); }
.gw-bedingungen summary:focus-visible { outline-offset: 0; }
.gw-regeln { max-width: 68ch; margin-inline: auto; text-align: left; padding: .5rem 0 2.25rem; font: 400 15px/1.7 var(--font-ui); color: var(--ink-dim); }
.gw-regeln h3 { margin: 2rem 0 .6rem; font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold-tinte); }
.gw-regeln h3:first-child { margin-top: 0; }
.gw-regeln p { margin: 0 0 1rem; overflow-wrap: anywhere; }
.gw-regeln ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.gw-regeln li { margin-bottom: .35rem; }

/* ---------- Gewinnspiel-Teaser (Block maxim-matthew/gewinnspiel-teaser, Theme 0.34.0) ----------
   Scharfes Bild wie Maxims Entwurf (Buch links, dunkle rechte Hälfte), Text als HTML darüber. Unter 900 px: Bild oben, Text
   darunter auf Nacht. Maße über cqi, damit der Text mit dem Band wächst, nicht mit dem Fenster. */
.gw-teaser { width: min(84rem, calc(100vw - 60px)); margin: 0 auto; padding-block: clamp(3rem, 6vw, 5rem); }
@media (min-width: 761px) { .gw-teaser { width: var(--shell); } }
.gw-teaser-band { container-type: inline-size; position: relative; background: var(--night); color: var(--ivory); }
.gw-teaser-bildlink { display: block; }
.gw-teaser-bild { display: block; width: 100%; aspect-ratio: 6 / 5; height: auto; object-fit: cover; object-position: 20% center; }
.gw-teaser-text { display: grid; justify-items: center; gap: 1.1rem; padding: 2.25rem 1.25rem 2.5rem; text-align: center; }
.gw-teaser-kicker { margin: 0; padding-left: .24em; font: 600 13px/1.3 var(--font-ui); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-bright); }
.gw-teaser-titel { margin: 0; max-width: 16ch; font: 400 clamp(2rem, 8cqi, 2.75rem)/1.12 var(--font-author); letter-spacing: -.015em; color: var(--ivory); text-wrap: balance; }
.gw-teaser-titel em { font-style: italic; }
.gw-teaser-trenner { position: relative; display: block; width: clamp(8rem, 40cqi, 13rem); height: 1px; background: var(--gold); }
.gw-teaser-trenner::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; background: var(--gold); transform: translate(-50%, -50%) rotate(45deg); }
.gw-teaser-zeile { margin: 0; font: 400 16px/1.5 var(--font-ui); color: var(--ivory); font-variant-numeric: tabular-nums; }
.gw-teaser-knopf { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 48px; }
.gw-teaser-knopf:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
/* Druckfeedback wie die Knöpfe der Seite (Polish 0.42.0): Kopf-Knopf „Teilnehmen“ und Teaser-Knopf */
.gw-teaser-knopf, .gw-kopf .p-knoepfe .knopf { transition-property: background, color, transform; }
.gw-teaser-knopf:active, .gw-kopf .p-knoepfe .knopf:active { transform: scale(.985); background: color-mix(in srgb, var(--gold) 82%, var(--ink)); }
@media (min-width: 900px) {
  .gw-teaser-band { aspect-ratio: 1820 / 925; display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .gw-teaser-bildlink { position: absolute; inset: 0; }
  .gw-teaser-bild { width: 100%; height: 100%; aspect-ratio: auto; object-position: left center; }
  .gw-teaser-text { position: relative; grid-column: 2; padding: 0 2rem; gap: clamp(.9rem, 2.2cqi, 1.5rem); }
  .gw-teaser-kicker { font-size: clamp(13px, 1.1cqi, 15px); }
  .gw-teaser-titel { max-width: none; font-size: clamp(2.2rem, 3.45cqi, 3.5rem); }
  .gw-teaser-zeile { font-size: clamp(16px, 1.25cqi, 19px); }
}

/* Gewinnspiel-Hinweis, Darstellungen „Tafel“ und „Zeile“ (12.10.2026, Entwurf D und C): gleiche Texte wie das Band */
.gw-hf-kicker { margin: 0; font: 600 12px/1.3 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; }
.gw-hf-titel { margin: 0; font: 400 clamp(1.65rem, 5.4vw, 2rem)/1.2 var(--font-author); letter-spacing: -.01em; text-wrap: balance; }
.gw-hf-titel em { font-style: italic; }
.gw-hf-zeile { margin: 0; font: 400 15px/1.5 var(--font-ui); font-variant-numeric: tabular-nums; }
/* Tafel: Nacht-Tafel mit Goldlinie oben, Goldrahmen innen und Siegel unten rechts */
.gw-tafel { position: relative; display: grid; justify-items: start; gap: .7rem; box-sizing: border-box; padding: 1.75rem 1.6rem 2rem; background: var(--coal); color: var(--ivory); border-top: 2px solid var(--gold); }
.gw-tafel::before { content: ""; position: absolute; inset: 9px; border: 1px solid var(--gold-55); pointer-events: none; }
.gw-tafel .gw-hf-kicker { color: var(--gold); }
.gw-tafel .gw-hf-titel { color: var(--ivory); }
.gw-tafel .gw-hf-titel em { color: var(--gold); }
.gw-tafel .gw-hf-zeile { color: var(--ivory-dim); margin-bottom: .6rem; }
.gw-tafel .gw-teaser-knopf { position: relative; }
.gw-tafel-siegel { position: absolute; right: -22px; bottom: -26px; width: 76px; height: auto; filter: drop-shadow(0 5px 8px rgba(7, 7, 6, .3)); pointer-events: none; }
.gw-tafel-feld { background: var(--paper); padding: clamp(3rem, 6vw, 4.5rem) 0; }
.gw-tafel-feld .gw-tafel { width: min(420px, calc(100vw - 4rem)); margin-inline: auto; }
/* Zeile: auf Papier, goldene Haarlinien mit Raute oben und unten, Textlink */
.gw-zeile { background: var(--paper); color: var(--ink); padding: clamp(2.5rem, 5vw, 4rem) 0; }
.gw-zeile-innen { position: relative; display: grid; justify-items: center; gap: .6rem; width: min(44rem, calc(100vw - 4rem)); margin-inline: auto; padding: 2rem 1rem; box-sizing: border-box; text-align: center; border-block: 1px solid var(--gold); }
.gw-zeile-innen::before, .gw-zeile-innen::after { content: ""; position: absolute; left: 50%; width: 8px; height: 8px; background: var(--gold); transform: translate(-50%, -50%) rotate(45deg); }
.gw-zeile-innen::before { top: 0; }
.gw-zeile-innen::after { top: 100%; }
.gw-zeile .gw-hf-kicker { color: var(--gold-tinte); }
.gw-zeile .gw-hf-titel { color: var(--ink); }
.gw-zeile .gw-hf-titel em { color: var(--gold-tinte); }
.gw-zeile .gw-hf-zeile { color: var(--ink-dim); }
.gw-zeile-link { display: inline-flex; align-items: center; gap: .6em; min-height: var(--ziel); margin-top: .2rem; font: 600 13px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-tinte); text-decoration: none; }
.gw-zeile-link:hover { text-decoration: underline; text-underline-offset: 6px; }
.gw-zeile-link:focus-visible { outline: 2px solid var(--gold-tinte); outline-offset: 4px; }
/* Buchseite: Tafel als Randspalte neben „Die Geschichte im Detail“ (ab 1100 px), darunter unter dem Text */
.buch-geschichte-seite { margin-top: 3.5rem; padding-bottom: 1.6rem; }
.buch-geschichte-seite .gw-tafel { max-width: 420px; }
@media (min-width: 1100px) {
  .buch-geschichte-mit-tafel { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 3rem; align-items: start; }
  .buch-geschichte-mit-tafel .buch-klappentext-zweispalter { column-count: 1; }
  .buch-geschichte-seite { margin-top: 0; padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .gw-tafel .gw-teaser-knopf, .gw-zeile-link { transition: none; } .gw-tafel .gw-teaser-knopf:active { transform: none; } }

/* Sprungziel „Jetzt kaufen“ (BU4j): Kaufbox landet nicht unter der festen Navigation */
#kaufen { scroll-margin-top:calc(var(--kopf-hoehe) + 1rem); }

/* ============ Editor v2 Stufe 2 (BU4k): Bausteine aus dem Katalog, Port von Website/prototyp-editor-2026-10/public/proto-canvas.css ============ */
/* ---- Spalten-Container (Slots, verschachtelbar) ---- */
.buch-frei-t-spalten { padding: 0; }
.buch-innen-s { padding: 1.5rem 0; }
.buch-innen-m { padding: clamp(2rem, 4vw, 3.5rem) 0; }
.buch-innen-l { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.buch-innen-0 { padding: 0; }
.buch-spalten { width: var(--wide-block); margin-inline: auto; display: grid; }
.buch-gap-s { gap: .75rem; }
.buch-gap-m { gap: clamp(1rem, 3vw, 2.5rem); }
.buch-gap-l { gap: clamp(2rem, 5vw, 4.5rem); }
.buch-va-oben { align-items: start; }
.buch-va-mitte { align-items: center; }
.buch-va-unten { align-items: end; }
.buch-spalte { min-width: 0; }
.buch-spalte .buch-spalten { width: auto; }
.buch-spalte .buch-frei { padding: clamp(1.25rem, 3vw, 2.25rem) 1rem; }
.buch-spalte .buch-frei-spalte, .buch-spalte .buch-frei-bildtext, .buch-spalte .buch-frei-raster, .buch-spalte .buch-karten-innen, .buch-spalte .buch-autor,
.buch-spalte .buch-wz-kopf, .buch-spalte .buch-sagat, .buch-spalte .buch-sk, .buch-spalte .buch-hg-innen, .buch-spalte .buch-wb-kat, .buch-spalte .buch-gal-fuss,
.buch-spalte .buch-frei-bahn-raster, .buch-spalte .buch-frei-bahn-laufband { width: auto; max-width: 100%; box-sizing: border-box; }
.buch-spalte .buch-frei-bildtext, .buch-spalte .buch-frei-raster, .buch-spalte .buch-autor, .buch-spalte .buch-sagat, .buch-spalte .buch-wz-seiten { grid-template-columns: 1fr; }
.buch-spalte .buch-wb-kat, .buch-spalte .buch-sagat-baende { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.buch-spalte .buch-frei-titel { font-size: clamp(22px, 2.4vw, 32px); }
@media (max-width: 720px) { .buch-spalten { grid-template-columns: 1fr !important; } }

/* ---- Abstand ---- */
.buch-frei-t-abstand { padding: 0; }
.buch-abstand-flaeche { height: 4.5rem; }
.buch-abstand-s .buch-abstand-flaeche { height: 2rem; }
.buch-abstand-l .buch-abstand-flaeche { height: 9rem; }

/* ---- Knopfreihe ---- */
.buch-frei-t-knopfreihe { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.buch-knopfreihe { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }
.buch-ausr-mitte .buch-knopfreihe { justify-content: center; }
.buch-ausr-mitte .buch-frei-spalte { text-align: center; }
.buch-ausr-rechts .buch-knopfreihe { justify-content: flex-end; }

/* ---- Karten, Zahlen ---- */
.buch-frei-t-karten, .buch-frei-t-zahlen { padding: clamp(3rem, 6vw, 5rem) 0; }
.buch-karten-innen { width: var(--wide-block); margin-inline: auto; }
.buch-karten-innen .buch-frei-titel { margin-bottom: 2rem; }
.buch-karten-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 20px; }
.buch-karte-frei { border: 1px solid color-mix(in srgb, var(--b-text) 18%, transparent); background: color-mix(in srgb, var(--b-text) 4%, var(--b-bg)); display: flex; flex-direction: column; }
.buch-karte-frei img, .buch-karte-frei .mm-bildfehlt { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; min-height: 0; }
.buch-karte-frei h3 { font: var(--w-fett) 1.3rem/1.2 var(--f-kopf); margin: 1.1rem 1.2rem .4rem; text-transform: var(--k-gross); }
.buch-karte-frei p { margin: 0 1.2rem 1.2rem; line-height: 1.5; }
.buch-karte-frei a { margin: auto 1.2rem 1.2rem; color: var(--b-akzent); font-weight: 700; }
.buch-zahlen-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: clamp(1.5rem, 4vw, 3rem); text-align: center; }
.buch-zahl { display: flex; flex-direction: column; gap: .5rem; padding-top: 1.2rem; border-top: 3px solid var(--b-akzent); }
.buch-zahl strong { font: var(--w-fett) clamp(2.6rem, 6vw, 4.6rem)/1 var(--f-kopf); color: var(--b-akzent); }
.buch-zahl-text { font-size: 1rem; line-height: 1.4; }

/* ---- Video ---- */
.buch-frei-t-video { padding: clamp(3rem, 6vw, 5rem) 0; }
.buch-video { position: relative; aspect-ratio: 16/9; background: #151515; margin-top: 1.5rem; }
.buch-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.buch-video-start { all: unset; box-sizing: border-box; position: absolute; inset: 0; cursor: pointer; background-size: cover; background-position: center; display: grid; place-items: center; align-content: center; gap: .8rem; }
.buch-video-start::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.buch-video-play { position: relative; width: 76px; height: 76px; border-radius: 50%; background: var(--b-akzent); display: block; }
.buch-video-play::after { content: ""; position: absolute; left: 31px; top: 24px; border: 14px solid transparent; border-left: 22px solid var(--b-bg); border-right: 0; }
.buch-video-label { position: relative; color: #fff; font: 700 14px system-ui, sans-serif; letter-spacing: .04em; }
.buch-video-unter { font-size: .9rem; opacity: .8; text-align: center; }

/* ---- Fragen ---- */
.buch-frei-t-faq { padding: clamp(3rem, 6vw, 5rem) 0; }
.buch-faq { margin-top: 2rem; border-bottom: 1px solid color-mix(in srgb, var(--b-text) 25%, transparent); }
.buch-faq details { border-top: 1px solid color-mix(in srgb, var(--b-text) 25%, transparent); }
.buch-faq summary { cursor: pointer; padding: 1.1rem 0; font: var(--w-fett) 1.15rem/1.3 var(--f-kopf); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.buch-faq summary::-webkit-details-marker { display: none; }
.buch-faq summary::after { content: "+"; color: var(--b-akzent); font-size: 1.5rem; line-height: 1; }
.buch-faq details[open] summary::after { content: "–"; }
.buch-faq details > p { margin: 0 0 1.2rem; max-width: 42rem; line-height: 1.55; }

/* ---- Leseprobe, Hörprobe ---- */
.buch-frei-t-leseprobe, .buch-frei-t-hoerprobe { padding: clamp(3rem, 6vw, 5rem) 0; }
.buch-leseprobe { position: relative; max-height: 15em; overflow: hidden; }
.buch-leseprobe::after { content: ""; position: absolute; inset: auto 0 0 0; height: 7em; background: linear-gradient(to bottom, transparent, var(--b-bg)); pointer-events: none; }
.buch-leseprobe.ist-offen { max-height: none; }
.buch-leseprobe.ist-offen::after { display: none; }
.buch-leseprobe .buch-frei-fliess { margin-top: 0; }
.buch-hoerprobe { display: block; width: min(100%, 36rem); margin-top: 1.5rem; }

/* ---- Autor ---- */
.buch-frei-t-autor { padding: clamp(3rem, 6vw, 5rem) 0; }
.buch-autor { width: var(--wide-block); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.buch-autor-foto { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.buch-autor .buch-frei-titel { font-size: clamp(28px, 3.4vw, 42px); }
@media (max-width: 720px) { .buch-autor { grid-template-columns: 1fr; } .buch-autor-foto { max-width: 220px; } }

/* ---- Termine ---- */

/* ============ Welt & Saga (Maxims Content-Blöcke) ============ */
.buch-frei-v-papier, .buch-frei-v-nacht { --f-welt: var(--font-world); --f-lese: var(--font-author); --k-welt: uppercase; }
.buch-frei-v-gin, .buch-frei-v-neutral { --f-welt: var(--f-kopf); --f-lese: var(--f-text); --k-welt: none; }
.buch-wtitel { word-spacing: .22em; font-family: var(--f-welt); text-transform: var(--k-welt); font-weight: 400; letter-spacing: .05em; font-size: clamp(26px, 3.2vw, 44px); line-height: 1.12; }
.buch-wtitel p { display: inline; margin: 0; }
.buch-frei-v-gin .buch-wtitel, .buch-frei-v-neutral .buch-wtitel { font-weight: var(--w-fett); letter-spacing: -.01em; }
.buch-wtitel-mix { text-transform: none; font-family: var(--f-kopf); letter-spacing: -.01em; }
.buch-wtitel strong { font-weight: 600; }
.buch-frei-v-papier .buch-frei-kicker, .buch-frei-v-nacht .buch-frei-kicker { font: 600 12px/1.3 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; margin-bottom: .6rem; }

.buch-nk { display: inline-flex; align-items: center; gap: .6em; margin-top: 1.4rem; padding: .85em 1.5em; border: 1px solid var(--b-akzent); color: var(--b-text); background: transparent; font: 600 .78rem/1 var(--f-text, var(--font-ui)); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; cursor: pointer; border-radius: 2px; box-sizing: border-box; }
.buch-nk:hover { background: color-mix(in srgb, var(--b-akzent) 18%, transparent); }
.buch-nk-voll { background: var(--b-text); color: var(--b-bg); border-color: var(--b-text); }
.buch-nk-voll:hover { background: color-mix(in srgb, var(--b-text) 85%, var(--b-bg)); }
.buch-punkt { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: #2f9e6b; margin-right: .5rem; flex: none; }
.buch-cover-schloss, .buch-wb-sym, .buch-sagat-schloss, .buch-sk-sym { stroke: currentColor; fill: none; flex: none; }
.buch-cover-leer { display: grid; place-items: center; background: linear-gradient(160deg, #26323d, #0c1116); color: #8d8a80; }
.buch-cover-schloss { width: 1.4rem; height: 1.4rem; }

/* Hintergrundbild unter Text (Welt-Banner, Zitatband, Bild + Text „auf Bild“) */
.buch-hg-rahmen { position: relative; overflow: hidden; isolation: isolate; }
.buch-hg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.buch-hg.mm-bildfehlt { min-height: 0; }
.buch-hg-rahmen::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in srgb, var(--b-bg) 96%, transparent) 0%, color-mix(in srgb, var(--b-bg) 72%, transparent) 40%, transparent 80%); }
.buch-hg-innen { width: var(--wide-block); margin-inline: auto; box-sizing: border-box; }
.buch-hg-innen > * { max-width: 40rem; }
.buch-hg-innen .buch-frei-kicker, .buch-hg-innen .buch-frei-titel { margin-top: 0; }

/* Welt-Banner */
.buch-frei-t-welt-banner { padding: 0; }
.buch-wb { min-height: 14rem; display: flex; align-items: center; }
.buch-wb .buch-hg-innen { padding: clamp(2rem, 4vw, 3.2rem) 0; }
.buch-wb-text { margin: .9rem 0 0; font: 400 clamp(.98rem, 1.3vw, 1.1rem)/1.55 var(--f-lese); max-width: 36rem; }
.buch-welt-symbole .buch-wb { min-height: 20rem; }
.buch-wb-kat { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: var(--wide-block); margin-inline: auto; }
.buch-wb-kat li + li { border-left: 1px solid color-mix(in srgb, var(--b-text) 22%, transparent); }
.buch-wb-kat a { display: grid; justify-items: center; gap: .6rem; padding: 1.6rem .8rem; color: var(--b-text); text-decoration: none; font: 600 .72rem/1.4 var(--f-text, var(--font-ui)); letter-spacing: .12em; text-transform: uppercase; text-align: center; }
.buch-wb-sym { width: 2rem; height: 2rem; color: var(--b-akzent); stroke-width: 1.4; }

/* Die Welt zweispaltig */
.buch-frei-t-welt-zwei { padding: 0; }
.buch-wz-kopf { width: var(--wide-block); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.4rem; padding: 1.8rem 0 .8rem; box-sizing: border-box; }
.buch-wz-kopf .buch-wtitel { font-size: clamp(22px, 2.4vw, 32px); }
.buch-wz-kopf p { margin: 0; font: 400 1rem/1.4 var(--f-lese); opacity: .9; }
.buch-wz-seiten { display: grid; grid-template-columns: 1fr 1fr; }
.buch-wz-seite { position: relative; overflow: hidden; isolation: isolate; min-height: 13rem; display: flex; align-items: center; }
.buch-wz-seite + .buch-wz-seite { border-left: 1px solid color-mix(in srgb, var(--b-text) 20%, transparent); }
.buch-wz-seite .buch-hg { left: 38%; width: 62%; z-index: -1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); }
.buch-wz-copy { padding: 1.2rem 1.5rem 1.8rem clamp(1.25rem, 5vw, 4rem); max-width: 24rem; }
.buch-wz-name { margin: 0 0 .6rem; font: 400 .98rem/1.2 var(--f-welt); letter-spacing: .16em; text-transform: var(--k-welt); }
.buch-wz-copy p { margin: 0 0 .9rem; font: 400 .95rem/1.55 var(--f-lese); }
.buch-wz-link { color: var(--b-text); font: 500 .9rem var(--f-lese); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--b-akzent); }
@media (max-width: 720px) { .buch-wz-seiten { grid-template-columns: 1fr; } .buch-wz-seite + .buch-wz-seite { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--b-text) 20%, transparent); } }

/* Saga-Teaser */
.buch-frei-t-saga-teaser { padding: clamp(2rem, 4vw, 3.5rem) 0; }
.buch-sagat { width: var(--wide-block); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; box-sizing: border-box; }
.buch-sagat-copy .buch-frei-fliess { font: 400 clamp(.98rem, 1.2vw, 1.08rem)/1.6 var(--f-lese); margin-top: 1rem; }
.buch-sagat-copy .buch-frei-fliess p { margin: 0 0 .9rem; }
.buch-sagat-baende { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.buch-sagat-baende li { display: flex; flex-direction: column; gap: .3rem; padding: 0 1rem; }
.buch-sagat-baende li + li { border-left: 1px solid color-mix(in srgb, var(--b-text) 14%, transparent); }
.buch-sagat-cover { width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block; margin-bottom: .7rem; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.buch-sagat-cover.buch-cover-leer { box-shadow: none; }
/* Startseite (W11a): ein einzelner Band (Band I) – Cover in Seitenverhältnis statt in der Höhenangabe des Bildes, eine Spalte */
.buch-sagat-cover { height: auto; }
.buch-sagat-baende:has(> li:only-child) { grid-template-columns: minmax(0, 15rem); justify-content: center; }
.buch-sagat-baende li:only-child { padding: 0; }
.buch-sagat-nr { font: 600 .66rem/1 var(--font-ui); letter-spacing: .16em; opacity: .7; }
.buch-sagat-baende strong { font: 600 1.05rem/1.25 var(--f-lese); }
.buch-sagat-status { display: inline-flex; align-items: center; font: 400 .85rem/1.3 var(--font-ui); opacity: .85; }
.buch-sagat-schloss { width: .9rem; height: .9rem; margin-right: .45rem; }
.buch-st-intro { padding: 0; position: relative; overflow: hidden; }
.buch-st-intro .buch-sagat { display: block; min-height: 27rem; position: relative; padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
.buch-st-intro .buch-sagat-copy { position: relative; z-index: 1; max-width: 34rem; }
.buch-st-intro .buch-wtitel { font-size: clamp(34px, 5vw, 66px); line-height: 1.02; padding-bottom: 1.2rem; position: relative; }
.buch-st-intro .buch-wtitel::after { content: ""; position: absolute; left: 0; bottom: 0; width: 4.5rem; height: 2px; background: var(--b-akzent); }
.buch-st-intro .buch-frei-fliess { margin-top: 1.4rem; }
.buch-sagat-bild { position: absolute; right: 0; top: 0; height: 100%; width: 62%; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); }
@media (max-width: 720px) { .buch-sagat { grid-template-columns: 1fr; } .buch-sagat-baende { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.5rem; } .buch-sagat-baende li:nth-child(odd) { border-left: 0; padding-left: 0; } .buch-sagat-bild { width: 100%; opacity: .35; } }

/* Serien-Karussell hell */
.buch-frei-t-serien-karussell { padding: clamp(1.8rem, 3vw, 2.6rem) 0; }
.buch-sk { width: var(--wide-block); margin-inline: auto; box-sizing: border-box; }
.buch-sk .buch-frei-kicker { margin-bottom: .3rem; }
.buch-sk-titel { font-size: clamp(20px, 2.2vw, 28px) !important; margin-bottom: 1rem; }
.buch-sk-rahmen { display: flex; align-items: center; gap: .6rem; }
.buch-sk-bahn { display: flex; flex: 1; min-width: 0; gap: clamp(1.2rem, 3vw, 2.6rem); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: .4rem 0 .6rem; }
.buch-sk-bahn::-webkit-scrollbar { display: none; }
.buch-sk-buch { flex: 0 0 auto; display: flex; gap: .9rem; align-items: flex-end; scroll-snap-align: start; max-width: 19rem; }
.buch-sk-cover { width: 4.6rem; aspect-ratio: 2/3; object-fit: cover; display: block; box-shadow: 0 5px 14px rgba(0,0,0,.25); flex: none; }
.buch-sk-buch.ist-aktuell { border-bottom: 2px solid var(--b-akzent); padding-bottom: .5rem; }
.buch-sk-buch.ist-aktuell .buch-sk-cover { width: 6.4rem; }
.buch-sk-buch > div { display: grid; gap: .25rem; padding-bottom: .4rem; }
.buch-sk-nr { font: 600 .66rem/1 var(--font-ui); letter-spacing: .16em; opacity: .75; }
.buch-sk-buch strong { font: 600 1.05rem/1.2 var(--f-lese); }
.buch-sk-sub { font: 400 .9rem/1.3 var(--f-lese); }
.buch-sk-termin { font: 400 .8rem/1.3 var(--font-ui); opacity: .6; }
.buch-sk-pfeil { background: transparent; border: 0; color: var(--b-text); cursor: pointer; padding: .5rem; display: grid; place-items: center; }
.buch-sk-sym { width: 1.5rem; height: 1.5rem; }

/* Zitatband auf Bild */
.buch-frei-t-zitatband { padding: 0; }
.buch-zb { min-height: 9rem; display: grid; place-items: center; text-align: center; }
.buch-hg-rahmen.buch-zb::before { background: color-mix(in srgb, var(--b-bg) 68%, transparent); }
.buch-zb .buch-hg-innen { padding: 2rem 0; }
.buch-zb .buch-hg-innen > * { margin-inline: auto; }
.buch-zb blockquote { margin: 0 0 .9rem; font: italic 400 clamp(1.2rem, 2.2vw, 1.7rem)/1.4 var(--f-lese); }
.buch-zb blockquote p { margin: 0; }
.buch-zb blockquote p span, .buch-zb blockquote p div { display: inline !important; }
.buch-zb blockquote p::before { content: "„"; }
.buch-zb blockquote p::after { content: "“"; }
.buch-zb cite { font: normal 400 1rem var(--f-lese); }
.buch-zb cite::before { content: "– "; }

/* Bild + Text auf Bild (Screenshot 19) */
.buch-frei-t-bild-text.buch-bt-auf { padding: 0; }
.buch-bt-auf .buch-hg-rahmen { min-height: clamp(20rem, 32vw, 26rem); display: flex; align-items: center; }
.buch-bt-auf .buch-hg-innen { padding: 2.5rem 0; }
.buch-bt-auf .buch-frei-fliess { font: 400 clamp(.98rem, 1.2vw, 1.08rem)/1.6 var(--f-lese); margin-top: 1rem; max-width: 34rem; }
.buch-bt-auf .buch-frei-fliess p { margin: 0; }

/* Galerie: Bilderstreifen mit Zeile und Knopf (Screenshot 23) */
.buch-gal-kopf { padding-bottom: .2rem; }
.buch-gal-kopf .buch-frei-kicker { margin-bottom: 0; }
.buch-frei-g-laufband .buch-frei-bahn-laufband { width: var(--wide-block); margin-inline: auto; padding: 0; gap: 16px; box-sizing: border-box; }
.buch-frei-g-laufband figure { flex: 1 0 clamp(10rem, 19%, 16rem); }
.buch-frei-g-laufband .buch-frei-galeriebild { height: clamp(7.5rem, 11vw, 10.5rem); object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--b-text) 16%, transparent); }
.buch-gal-fuss { width: var(--wide-block); margin: 1.2rem auto 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; box-sizing: border-box; }
.buch-gal-fuss p { margin: 0; font-size: .95rem; }
.buch-gal-fuss .buch-nk { margin-top: 0; margin-left: auto; }

/* Stimmen (Screenshot 25) */
.buch-stimmen-bereich { --b-text: var(--ivory, #f0ece2); --b-akzent: var(--gold, #ddb880); --b-bg: #15181c; background: #15181c; padding: clamp(2rem, 4vw, 3rem) 0; }
.buch-stimmen-bereich { overflow: hidden; }
.buch-st-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.buch-st-kopf-text { display: flex; flex-direction: column; gap: .5rem; }
.buch-st-steuer { display: flex; gap: .5rem; }
.buch-st-steuer[hidden] { display: none; }
.buch-st-knopf-rund { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--gold, #ddb880) 40%, transparent); background: color-mix(in srgb, var(--gold, #ddb880) 4%, transparent); color: var(--gold, #ddb880); cursor: pointer; transition: background .25s, border-color .25s, transform .25s cubic-bezier(.16,1,.3,1); }
.buch-st-knopf-rund:hover { background: color-mix(in srgb, var(--gold, #ddb880) 14%, transparent); border-color: var(--gold, #ddb880); }
.buch-st-knopf-rund:active { transform: scale(.94); }
.buch-st-knopf-rund:focus-visible { outline: 1px solid var(--gold, #ddb880); outline-offset: 3px; }
.buch-st-lauf, .ist-halt .buch-st-halt { display: none; }
.ist-halt .buch-st-lauf { display: block; }
/* Band: ohne Skript wischbare Reihe, mit Skript Endlosband */
.buch-st-band { margin-top: 1.8rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .4rem max(1.25rem, calc((100vw - var(--buch-innen, 1200px)) / 2)) 1.2rem; scrollbar-width: none; }
.buch-st-band::-webkit-scrollbar { display: none; }
.buch-st-band.ist-band { overflow: hidden; scroll-snap-type: none; padding-inline: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); touch-action: pan-y; cursor: grab; }
.buch-st-band.ist-zug { cursor: grabbing; user-select: none; }
.buch-st-spur { display: flex; align-items: stretch; gap: clamp(2rem, 4vw, 3.5rem); width: max-content; }
.buch-st-band.ist-lauf .buch-st-spur { will-change: transform; }
.buch-st-karte { --zeile: calc(clamp(1.18rem, 1.45vw, 1.34rem) * 1.5); margin: 0; flex: 0 0 clamp(18rem, 28vw, 25.5rem); scroll-snap-align: start; display: flex; flex-direction: column; min-width: 0; }
.buch-st-zeichen { font: 700 4rem/.8 var(--font-author); color: var(--ivory); flex: none; }
.buch-st-sterne { margin-left: auto; flex: none; align-self: center; color: var(--gold); letter-spacing: .16em; font-size: .78rem; line-height: 1; }
.buch-st-zitat { margin: 0; font: italic 400 clamp(1.18rem, 1.45vw, 1.34rem)/1.5 var(--font-author); color: var(--ivory); text-wrap: pretty; } /* Maxim 22:35: Schrift größer, vier Zeilen */
.buch-st-zitat p { margin: 0; }
.buch-st-zitat p::before { content: "„"; }
.buch-st-zitat p::after { content: "“"; }
.buch-st-zitat.ist-zu { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; -webkit-mask-image: linear-gradient(#000 45%, transparent); mask-image: linear-gradient(#000 45%, transparent); } /* Maxim 22:38: bis vier Zeilen ganz; länger → drei Zeilen + „Weiterlesen“ als vierte */
.buch-st-weiter { align-self: flex-end; display: flex; align-items: center; height: var(--zeile); margin: 0; padding: 0; background: none; border: 0; color: var(--gold, #ddb880); font: 500 .76rem var(--font-ui); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.buch-st-weiter:hover { color: #e8c995; }
.buch-st-weiter:focus-visible, .buch-st-link:focus-visible { outline: 1px solid var(--gold, #ddb880); outline-offset: 3px; border-radius: 2px; }
.buch-st-wer { margin-top: auto; padding-top: 1.25rem; display: flex; align-items: center; gap: .85rem; }
.buch-st-weiter[hidden] { display: none; }
.buch-st-weiter, .buch-st-link { position: relative; }
.buch-st-weiter::after, .buch-st-link::after { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%); } /* Tippfläche 44 px, Optik unverändert (Audit) */
.buch-st-bild { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold, #ddb880) 50%, transparent), 0 0 0 4px color-mix(in srgb, var(--gold, #ddb880) 8%, transparent); }
.buch-st-mono { display: grid; place-items: center; font: italic 400 1.35rem/1 var(--font-author); color: var(--gold, #ddb880); background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--gold, #ddb880) 18%, transparent), color-mix(in srgb, var(--gold, #ddb880) 4%, transparent)); }
.buch-st-wer-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.buch-st-wer cite { font: normal 600 .9rem/1.3 var(--font-ui); color: var(--ivory); letter-spacing: .01em; }
.buch-st-name { color: inherit; }
.buch-st-profile { display: flex; flex-wrap: wrap; gap: .1rem .8rem; }
.buch-st-link { display: inline-flex; align-items: center; gap: .35rem; color: color-mix(in srgb, var(--gold, #ddb880) 88%, transparent); font: 400 .8rem/1.4 var(--font-ui); text-decoration: none; overflow-wrap: anywhere; padding: .15rem 0; }
.buch-st-link:hover { color: var(--gold, #ddb880); text-decoration: underline; text-underline-offset: .2em; }
cite .buch-st-link { font: inherit; color: var(--ivory); }
cite .buch-st-link:hover { color: var(--gold, #ddb880); }
.buch-st-ig { flex: none; opacity: .8; }
.buch-st-schnitt { margin: 0; display: flex; align-items: center; gap: .55rem; color: var(--ivory); font: 500 .85rem var(--font-ui); letter-spacing: .02em; }
.buch-st-schnitt-sterne { display: inline-flex; font-size: .8rem; line-height: 1; white-space: nowrap; }
.buch-st-sterne, .buch-st-schnitt-sterne { letter-spacing: 0; }
.buch-st-stern { position: relative; display: inline-block; margin-right: .16em; color: var(--gold, #ddb880); }
.buch-st-stern:last-child { margin-right: 0; }
.buch-st-stern.ist-leer, .buch-st-stern.ist-halb { color: color-mix(in srgb, var(--gold, #ddb880) 55%, transparent); }
.buch-st-stern.ist-halb::after { content: "★"; position: absolute; left: 0; top: 0; width: 50%; overflow: hidden; color: var(--gold, #ddb880); }
@media (prefers-reduced-motion: reduce) { .buch-st-knopf-rund { transition: none; } }
.buch-st-knopf { display: flex; align-items: flex-start; padding-left: 1.6rem; border-left: 1px solid rgba(255,255,255,.1); }
.buch-st-knopf .buch-nk { margin-top: 0; }

/* Serie – Bücher der Saga (Screenshots 06/18) */
.buch-saga-regal { --b-text: #ece8de; --b-akzent: #8f8a7c; --b-bg: #0a1118; --f-text: var(--font-ui); background: #0a1118; color: #ece8de; padding: clamp(2.5rem, 5vw, 4rem) 0; }
.buch-saga-innen { width: var(--wide-block); margin-inline: auto; }
.buch-saga-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.buch-saga-kopf .buch-abschnitt-kicker { margin-bottom: .3rem; }
.buch-saga-titel { margin: 0; font: 400 clamp(22px, 2.6vw, 34px)/1.1 var(--font-world); letter-spacing: .1em; text-transform: uppercase; }
.buch-saga-kopf .buch-nk { margin-top: 0; border: 0; border-bottom: 1px solid var(--gold); border-radius: 0; padding: .3em 0; font-weight: 500; letter-spacing: 0; text-transform: none; font-size: .85rem; }
.buch-saga-reihe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.5rem); }
.buch-saga-band { display: flex; flex-direction: column; }
.buch-saga-cover { display: block; height: 15rem; width: auto; max-width: 100%; object-fit: contain; object-position: left bottom; margin-bottom: 1.3rem; }
.buch-saga-cover.buch-cover-leer { width: min(100%, 10rem); filter: grayscale(1); }
.buch-saga-band h3 { margin: 0; font: 400 1.5rem/1.15 var(--font-author); }
.buch-saga-sub { margin: .3rem 0 0; font: 600 .95rem/1.3 var(--font-author); }
.buch-saga-band-nr { margin: 1rem 0 .1rem; font: 400 .8rem var(--font-author); opacity: .7; }
.buch-saga-status { margin: 0; display: flex; align-items: center; font: 400 .95rem var(--font-author); }
.buch-saga-fort { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; font: 400 .75rem var(--font-ui); opacity: .85; }
.buch-saga-fort span { flex: 1; height: 6px; background: rgba(255,255,255,.1); border-radius: 3px; overflow: hidden; }
.buch-saga-fort i { display: block; height: 100%; background: #86a9c6; }
.buch-saga-band .buch-nk { width: 100%; justify-content: center; margin-top: 1.2rem; border-color: rgba(255,255,255,.45); }
@media (max-width: 720px) { .buch-saga-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Handy: neue Bausteine einspaltig/zweispaltig, Text über Bild lesbar */
@media (max-width: 720px) {
  .buch-wb-kat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .buch-wb-kat li + li { border-left: 0; }
  .buch-wb-kat li:nth-child(even) { border-left: 1px solid color-mix(in srgb, var(--b-text) 22%, transparent); }
  .buch-wb-kat li:nth-child(n+3) { border-top: 1px solid color-mix(in srgb, var(--b-text) 22%, transparent); }
  .buch-hg-rahmen::before { background: color-mix(in srgb, var(--b-bg) 88%, transparent); }
  .buch-wz-seite .buch-hg { left: 20%; width: 80%; opacity: .6; }
  .buch-wz-copy { max-width: none; }
  .buch-gal-fuss .buch-nk { margin-left: 0; }
  .buch-sk-pfeil { display: none; }
  .buch-st-knopf { border-left: 0; padding-left: 0; padding-top: 1rem; }
  .buch-st-karte { padding-left: 0; padding-right: 0; }
}

.buch-saga-status .buch-sagat-schloss { opacity: .7; }
.buch-frei-d-zentriert .buch-frei-fliess, .buch-frei-d-zentriert .buch-frei-fliess p { text-align: center; margin-inline: auto; }

/* ============ Runde nach Kritik ============ */
/* Knopf-Stile: Hauptknopf gefüllt · Nebenknopf Umriss · Textlink mit Pfeil */
.buch-nk { font-size: .8125rem; }
.buch-nk-haupt { background: var(--b-akzent); border-color: var(--b-akzent); color: var(--b-bg); }
.buch-nk-haupt:hover { background: color-mix(in srgb, var(--b-akzent) 86%, var(--b-text)); }
.buch-nk-text { border: 0; border-bottom: 1px solid var(--b-akzent); border-radius: 0; padding: .3em 0; letter-spacing: 0; text-transform: none; font-size: .95rem; font-weight: 600; background: none; }
.buch-nk-text:hover { background: none; border-bottom-width: 2px; }
.buch-saga-kopf .buch-nk, .buch-saga-band .buch-nk { width: auto; margin-top: 0; }
.buch-saga-band .buch-nk { margin-top: 1rem; align-self: flex-start; }

/* Text auf Bild: Abdunkelung hinter dem Textbereich, Kicker mindestens 13 px */
.buch-hg-rahmen::before { background: linear-gradient(90deg, color-mix(in srgb, var(--b-bg) 95%, transparent) 0%, color-mix(in srgb, var(--b-bg) 90%, transparent) 52%, color-mix(in srgb, var(--b-bg) 45%, transparent) 76%, transparent 100%); } /* 0.48.5: Text bleibt auch über Bildern mit hellen Rändern lesbar */
.buch-hg-rahmen.buch-zb::before { background: color-mix(in srgb, var(--b-bg) 68%, transparent); }
.buch-frei-v-papier .buch-frei-kicker, .buch-frei-v-nacht .buch-frei-kicker, .buch-abschnitt-kicker { font-size: 13px; }
.buch-sagat-nr, .buch-sk-nr { font-size: .75rem; }
.buch-sk-termin, .buch-bd-stand { font-size: .85rem; }

/* Bände (Teaser · Regal · Karussell) */
.buch-frei-t-baende.buch-bd-teaser { padding: clamp(2rem, 4vw, 3.5rem) 0; }
.buch-bd-regal { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.buch-bd-stand { display: inline-flex; align-items: center; font-family: var(--font-ui); opacity: .85; }
.buch-saga-cover { display: block; width: 100%; max-width: 11rem; height: auto; aspect-ratio: 2 / 3; object-fit: cover; margin-bottom: 1.3rem; }
.buch-saga-cover.buch-cover-leer { width: 100%; max-width: 11rem; filter: grayscale(1); }
.buch-sk-cover { aspect-ratio: 2 / 3; height: auto; object-fit: cover; }
.buch-saga-band-nr { margin: 1rem 0 .1rem; }
.buch-saga-band h3 { font-family: var(--f-lese); }
.buch-saga-titel { font-family: var(--f-welt); }

/* Abschluss */
.buch-frei-t-abschluss { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.buch-ab { width: min(46rem, var(--wide-block)); margin-inline: auto; text-align: center; }
.buch-ab .buch-wtitel { font-size: clamp(28px, 3.6vw, 46px); }
.buch-ab-text { margin: 1rem auto 0; max-width: 34rem; font: 400 clamp(1rem, 1.3vw, 1.15rem)/1.6 var(--f-lese); }
.buch-ab-knoepfe { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; justify-content: center; align-items: center; margin-top: 1.8rem; }
.buch-ab .buch-nk { margin-top: 0; }

/* Lesetext */
.buch-frei-t-lesetext { padding: clamp(3rem, 6vw, 5rem) 0; }
.buch-lt { width: var(--wide-block); margin-inline: auto; }
.buch-lt-kopf { margin-bottom: 1.6rem; }
.buch-lt-text { font: 400 clamp(1.08rem, 1.4vw, 1.22rem)/1.72 var(--f-lese); }
.buch-lt-text p, .buch-lt-text .buch-frei-fliess p { margin: 0 0 1.1em; }
.buch-lt-text .buch-frei-fliess { font: inherit; margin: 0; }
.buch-lt-zw { font: var(--w-fett) 1.25rem/1.3 var(--f-kopf); margin: 1.8em 0 .5em; text-transform: none; break-after: avoid; }
.buch-lt-einspaltig .buch-lt-text { max-width: 42rem; }
.buch-lt-einspaltig .buch-lt-kopf { max-width: 42rem; }
.buch-lt-zweispaltig .buch-lt-text { column-count: 2; column-gap: clamp(2rem, 5vw, 4rem); }
.buch-lt-zweispaltig .buch-lt-text p { break-inside: avoid-column; }
.buch-lt-randspalte .buch-lt-raster { display: grid; grid-template-columns: minmax(0, 42rem) minmax(14rem, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.buch-lt-initiale .buch-lt-text > p:first-of-type::first-letter, .buch-lt-initiale .buch-lt-text .buch-frei-fliess p:first-child::first-letter { float: left; font: 400 4.4em/.82 var(--f-kopf); padding: .06em .1em 0 0; color: var(--b-akzent); }
.buch-lt-zitat { margin: 1.6em 0; padding-left: 1.2rem; border-left: 3px solid var(--b-akzent); }
.buch-lt-zitat blockquote { margin: 0 0 .5rem; font: italic 400 1.3em/1.45 var(--f-lese); }
.buch-lt-zitat blockquote p { margin: 0; }
.buch-lt-zitat cite { font-style: normal; font-size: .9rem; opacity: .75; }
.buch-lt-bild { margin: 1.6em 0; }
.buch-lt-bildfeld { display: block; width: 100%; height: auto; }
.buch-lt-rand .buch-lt-zitat { margin-top: .4rem; }
.buch-lt-fakten { margin: 0; display: grid; gap: 1rem; border-top: 1px solid color-mix(in srgb, var(--b-text) 25%, transparent); padding-top: 1rem; }
.buch-lt-fakten dt { font: 600 .8rem/1.2 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--b-kicker); }
.buch-lt-fakten dd { margin: .25rem 0 0; font: 400 1.05rem/1.4 var(--f-lese); }
.buch-lt-mehr summary { cursor: pointer; font: 600 .95rem var(--font-ui); color: var(--b-akzent); padding: .4rem 0; list-style: none; }
.buch-lt-mehr summary::after { content: " →"; }
.buch-lt-mehr[open] summary { display: none; }
@media (max-width: 720px) { .buch-lt-zweispaltig .buch-lt-text { column-count: 1; } .buch-lt-randspalte .buch-lt-raster { grid-template-columns: 1fr; } }

.buch-gal-kopf { width: var(--wide-block); margin-inline: auto; max-width: 100%; box-sizing: border-box; }
.buch-lt-initiale .buch-lt-text > p:first-of-type, .buch-lt-initiale .buch-lt-text .buch-frei-fliess p:first-child { display: flow-root; }
.buch-lt-initiale .buch-lt-text > p:first-of-type::first-letter, .buch-lt-initiale .buch-lt-text .buch-frei-fliess p:first-child::first-letter { font-size: 3.4em; line-height: .78; }

/* ---- Editor v2 Stufe 2 (BU4k): Zusätze der öffentlichen Seite ---- */
.mm-vorzeile { white-space: pre-line; }
.buch-wz-copy p.mm-vorzeile { white-space: pre-line; }
.buch-knopfreihe .buch-nk { margin-top: 0; }
.buch-sk-rahmen .buch-sk-pfeil[hidden] { display: none; }
.buch-video-start:focus-visible, .buch-sk-pfeil:focus-visible { outline: 2px solid var(--b-akzent); outline-offset: 3px; }
.buch-lt-mehr summary:focus-visible, .buch-faq summary:focus-visible { outline: 2px solid var(--b-akzent); outline-offset: 3px; }
.buch-weltbild-ohne-bild { grid-template-columns: minmax(0, 46rem); }
.buch-stimmen-bereich .buch-nk { --b-text: var(--ivory, #f0ece2); }
.buch-spalte > .buch-frei-t-spalten { width: 100%; }
.buch-video iframe { border: 0; }
@media (prefers-reduced-motion: reduce) { .buch-sk-bahn { scroll-behavior: auto; } }

/* Gewinnspiel-Band an die Beta-Banner angeglichen (17.10.2026, Maxim): Knopf und Zeile in Cormorant wie „Join the Beta“.
   Nur das Band (Startseite), nicht Tafel und Zeile. Gleiche Schriftdatei wie der Beta-Banner (assets/banner/). */
@font-face { font-family: "MM Banner Cormorant"; src: url("banner/cormorant-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
.gw-teaser-band .gw-teaser-knopf { font: 600 clamp(15px, 1.25cqi, 18px)/1 "MM Banner Cormorant", Georgia, serif; letter-spacing: .12em; border-radius: 8px; padding: .65em 1.4em .6em; }
.gw-teaser-band .gw-teaser-zeile { font-family: "MM Banner Cormorant", Georgia, serif; font-weight: 600; font-size: clamp(17px, 1.45cqi, 22px); }

/* ---------- Startseite (Brief 20.10.2026): Porträt-Kopf, Visual Storybook, Bio-Teaser ---------- */
/* Kopf: Porträt als Bühne (scharf, nicht weichgezeichnet wie die übrigen Köpfe), Text rechts auf der dunklen Wand. */
.mm-header.start-kopf { min-height:clamp(42rem, 52vw, 68rem); justify-content:flex-end; }
.start-portrait { position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover; object-position:30% 12%;
  filter:brightness(.96) contrast(1.04); transform-origin:31% 30%; }
/* Ladezeit vor Effekt (Maxim 21.10.2026, 04:00): keine Einstiegsanimation mehr, das Porträt steht sofort voll da.
   Beim Scrollen versinkt es weiter in der Schwärze (nur, wo der Browser Scroll-Animationen kann; sonst ruhig). */
@keyframes start-versinken { from { opacity:1; transform:scale(1); } to { opacity:.32; transform:scale(1.1) translateY(3%); } }
@supports (animation-timeline: scroll()) {
  .start-portrait { animation:start-versinken linear both; animation-timeline:scroll(root); animation-range:0 90vh; }
}
@media (prefers-reduced-motion: reduce) { .start-portrait { animation:none; } }
.start-kopf::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, transparent 44%, var(--night-55) 62%, var(--night-90) 86%),
             linear-gradient(180deg, transparent 72%, var(--night) 100%); } /* Verlauf wie zuvor, nur später angesetzt: Gesicht bleibt frei (Maxim 20.10.2026) */
.start-kopf-innen { box-sizing:border-box; width:var(--shell); margin-inline:auto; padding-bottom:clamp(3rem, 6vw, 5.5rem);
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, min(34rem, 44%)); }
.start-kopf-innen > * { grid-column:2; }
.start-name h1 { max-width:none; }
.start-leitsatz { margin:1rem 0 0; color:var(--ivory-dim); font:italic 400 clamp(1.3rem, 2vw, 1.65rem)/1.3 var(--font-author); }
.start-leitstory { margin-top:clamp(2rem, 4vw, 3rem); padding-top:1.5rem; border-top:var(--haarlinie); }
.start-leitstory h2 { margin:0 0 .7rem; font:400 clamp(1.8rem, 3vw, 2.6rem)/1.1 var(--font-author); letter-spacing:-.012em; text-wrap:balance; }
.start-leitstory h2 a { color:var(--ivory); text-decoration:none; }
.start-leitstory h2 a:hover { color:var(--gold-bright); }
.start-leitstory p:not(.blog-meta) { max-width:40ch; margin:0 0 .4rem; color:var(--ivory-dim); font:var(--type-ui); }
/* Ein Moment: Name und Geschichte steigen beim Laden nacheinander auf */
.start-name, .start-leitstory { animation:zeile-auf .9s var(--ease) both; }
.start-leitstory { animation-delay:.18s; }
@media (prefers-reduced-motion: reduce) { .start-name, .start-leitstory { animation:none; } }
@media (max-width: 760px) {
  .mm-header.start-kopf { display:block; min-height:0; padding-top:0; }
  .start-portrait { position:relative; z-index:auto; display:block; height:auto; aspect-ratio:4 / 5; object-position:31% 22%;
    -webkit-mask-image:linear-gradient(180deg, #000 68%, transparent 100%); mask-image:linear-gradient(180deg, #000 68%, transparent 100%); }
  .start-kopf::after { display:none; }
  .start-kopf-innen { display:block; width:auto; margin:-5.5rem 30px 0; position:relative; padding-bottom:3.5rem; }
}

/* Bild-Text-Paare: Storybook auf Nacht, Bio auf Papier (Lesefläche), im Wechsel gespiegelt */
.start-paar { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); align-items:center; gap:clamp(2.5rem, 6vw, 6rem);
  padding:clamp(4.5rem, 8vw, 7.5rem) max(2rem, calc((100% - 72rem) / 2)); background:var(--night); color:var(--ivory); }
.start-paar-bild img { display:block; width:100%; height:auto; }
.start-paar h2 { margin:0 0 1.4rem; font:400 clamp(2.4rem, 4.4vw, 4rem)/1.02 var(--font-author); letter-spacing:-.02em; }
.start-paar-text > p { max-width:38rem; margin:0 0 1.2rem; font:var(--type-prose); }
.start-gold { color:var(--gold); }
.start-giveaway { display:flex; flex-wrap:wrap; gap:.4rem 1rem; padding-top:1rem; border-top:var(--haarlinie); color:var(--ivory-dim); font:var(--type-meta) !important; }
.start-giveaway strong { color:var(--gold-bright); font:var(--type-label); letter-spacing:var(--track-label); text-transform:uppercase; }
.start-bio { position:relative; isolation:isolate; overflow:hidden; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); border-top:var(--haarlinie); } /* Bild links, Text rechts (Maxim 20.10.2026) */
.start-bio .start-paar-bild { justify-self:center; width:min(100%, 24rem); }
.start-bio .start-paar-bild img { aspect-ratio:3 / 4; object-fit:cover; object-position:50% 30%; box-shadow:0 30px 60px -20px rgba(0, 0, 0, .8); }
.start-bio h2 { color:var(--ivory); }
.start-bio h2 em { color:var(--gold); }
.start-bio .start-paar-text > p { color:var(--ivory-dim); }
.start-zitat { margin:1.8rem 0 1.4rem; padding:0; max-width:36rem; }
.start-zitat::before { content:""; display:block; width:2.5rem; height:1px; margin-bottom:1.1rem; background:var(--gold); }
.start-zitat p { margin:0; color:var(--ivory); font:italic 300 clamp(1.25rem, 1.8vw, 1.45rem)/1.5 var(--font-author); }
.start-bio .text-link { color:var(--gold-bright); }
@media (max-width: 760px) {
  .start-paar, .start-bio { grid-template-columns:minmax(0, 1fr); padding-inline:30px; }
  .start-bio .start-paar-bild { justify-self:start; width:min(70vw, 20rem); }
}

/* Saga-Bereich und Bio auf Astrolabium-Stein (Brief-Revision 20.10.2026): Startseite durchgehend dunkel, Wechsel über Material.
   Der Stein liegt als Bild hinten, eine Nacht-Vignette davor hält Text ≥ 4,5:1. */
.start-stein { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:70% 35%; pointer-events:none; }
.start-saga::after, .start-bio::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 70% 80% at 50% 45%, var(--night-55), var(--night-82) 80%); }
.start-bio .start-stein { object-position:30% 50%; transform:scaleX(-1); } /* Astrolabium wieder hinter dem Bild (links) */
.start-saga { position:relative; isolation:isolate; overflow:hidden; background:var(--night); color:var(--ivory); text-align:center;
  border-top:var(--haarlinie); padding:clamp(5rem, 9vw, 8rem) max(2rem, calc((100% - 72rem) / 2)) 2.2rem; } /* unten so viel Luft wie über dem × (Maxim 22:45) */
.start-saga-kopf { max-width:44rem; margin:0 auto clamp(3.5rem, 6vw, 5rem); }
.start-saga-marke { margin:0 0 1.1rem; color:var(--gold-bright); font:var(--type-label); letter-spacing:.32em; text-transform:uppercase; }
.start-saga h2 { margin:0 0 1.4rem; color:var(--ivory); font:400 clamp(2.4rem, 4.4vw, 3.8rem)/1.05 var(--font-author); letter-spacing:-.015em; text-wrap:balance; }
.start-saga-kopf > p:not(.start-saga-marke) { max-width:36rem; margin:0 auto 1.4rem; color:var(--ivory-dim); font:400 18px/1.7 var(--font-author); text-wrap:pretty; }
.start-zyklen { display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); align-items:start; gap:clamp(1.5rem, 4vw, 4.5rem); }
.start-mond { display:block; width:100%; height:auto; }
/* Mond-Emblem leuchtet (Maxim 20.10.2026): Lichtebene hinter den beiden Sicheln atmet langsam; nur opacity/transform */
.start-mond-licht { position:relative; isolation:isolate; align-self:center; display:block; width:clamp(13rem, 22vw, 18rem); }
/* Glanz obenauf: weichgezeichnete Kopie; der Kontrast vor dem Weichzeichnen lässt die feinen Linien fast verschwinden,
   sodass das Licht von den hellen Sicheln nach außen strahlt */
.start-mond-glanz { position:absolute; inset:-6%; width:112%; height:112%; pointer-events:none; mix-blend-mode:screen;
  filter:contrast(2.4) saturate(1.2) blur(15px); opacity:.35; transform-origin:46% 52%; animation:mond-glanz 5.5s ease-in-out infinite; }
/* Unruhiges Mondlicht: schwillt an, flackert kurz wie eine Kerzenflamme, sinkt zurück */
@keyframes mond-glanz {
  0% { opacity:.3; transform:scale(1); }
  30% { opacity:.65; transform:scale(1.06); }
  38% { opacity:.48; transform:scale(1.04); }
  44% { opacity:.72; transform:scale(1.08); }
  70% { opacity:.5; transform:scale(1.02); }
  100% { opacity:.3; transform:scale(1); } }
/* Ein Funke kreist um die obere Sichel (offset-path), hinterlässt kurz Licht */
.start-mond-licht::after { content:""; position:absolute; left:0; top:0; width:8px; height:8px; border-radius:50%; pointer-events:none;
  background:#f3ddb4; box-shadow:0 0 6px 2px rgba(221, 184, 128, .9), 0 0 18px 6px rgba(221, 184, 128, .5); /* Gold statt Orange (Kritik 23:10) */
  offset-path:ellipse(17% 19% at 46% 40%); offset-rotate:0deg; animation:mond-funke 7s cubic-bezier(.45, .05, .55, .95) infinite; }
@keyframes mond-funke {
  0% { offset-distance:0%; opacity:0; } 10% { opacity:1; } 55% { opacity:1; } 70% { opacity:0; }
  100% { offset-distance:100%; opacity:0; } }
@media (prefers-reduced-motion: reduce) { .start-mond-glanz { animation:none; opacity:.45; } .start-mond-licht::after { display:none; } }
.start-zyklus-nr { margin:0 0 .6rem; color:var(--gold-bright); font:var(--type-label); letter-spacing:.3em; text-transform:uppercase; }
.start-zyklus h3 { margin:0; color:var(--ivory); font:400 clamp(2rem, 3vw, 2.6rem)/1.1 var(--font-author); letter-spacing:-.01em; }
.start-raute { position:relative; display:block; width:6rem; height:1px; margin:1rem auto 1.1rem;
  background:linear-gradient(90deg, transparent, var(--gold-55) 30%, var(--gold-55) 70%, transparent); }
.start-raute::before { content:""; position:absolute; left:50%; top:50%; width:7px; height:7px; border:1px solid var(--gold); background:var(--night);
  transform:translate(-50%, -50%) rotate(45deg); }
.start-zyklus-zeile { margin:0 0 .8rem; color:var(--ivory); font:400 1.2rem/1.4 var(--font-author); }
.start-zyklus-text { max-width:24rem; margin:0 auto .6rem; color:var(--ivory-dim); font:400 16px/1.65 var(--font-author); }
/* adapt 21.10.2026: Tablet hochkant – zwei Spalten wären ~170 px schmal, Linktext bräche; darum bis 900 px untereinander */
@media (max-width: 900px) {
  .start-zyklen { grid-template-columns:minmax(0, 1fr); gap:2.5rem; }
  .start-mond-licht { width:13rem; margin-inline:auto; }
}
@media (max-width: 760px) {
  .start-saga { padding-inline:30px; }
  .start-stein { object-position:75% 30%; }
}

/* Visual Storybook als randlose Bühne (story02, Maxim 20.10.2026): Heft rechts auf Schiefer, Text links auf der freien Fläche. */
.start-storybook { position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:flex-end; min-height:clamp(36rem, 56vw, 60rem);
  padding:clamp(4.5rem, 8vw, 7rem) max(2rem, calc((100% - 72rem) / 2)); background:var(--night); color:var(--ivory); border-top:var(--haarlinie); }
.start-storybook-buehne { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:70% 50%; }
.start-storybook::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, var(--night-82) 0%, var(--night-55) 30%, transparent 52%),
             linear-gradient(180deg, var(--night) 0%, transparent 14%, transparent 86%, var(--night) 100%); }
.start-storybook-text { max-width:30rem; }
.start-storybook h2 { margin:0 0 1.4rem; font:400 clamp(2.4rem, 4.4vw, 4rem)/1.02 var(--font-author); letter-spacing:-.02em; }
.start-storybook-text > p { max-width:30rem; margin:0 0 1.2rem; color:var(--ivory-dim); font:var(--type-prose); }
.start-storybook em { font-style:italic; }
/* Breite Schirme: Bühne rechts auf 72 % der Breite, links reine Nacht – sonst rutscht das Heft unter den Text */
@media (min-width: 1700px) {
  .start-storybook-buehne { left:auto; right:0; width:72%; }
  .start-storybook::after { background:linear-gradient(90deg, var(--night) 0%, var(--night) 28%, var(--night-55) 36%, transparent 48%),
             linear-gradient(180deg, var(--night) 0%, transparent 14%, transparent 86%, var(--night) 100%); }
}
@media (max-width: 760px) {
  .start-storybook { display:block; min-height:0; padding:0 0 3.5rem; }
  .start-storybook-buehne { position:relative; z-index:auto; display:block; height:auto; aspect-ratio:4 / 3; object-position:72% 50%;
    -webkit-mask-image:linear-gradient(180deg, #000 70%, transparent 100%); mask-image:linear-gradient(180deg, #000 70%, transparent 100%); }
  .start-storybook::after { display:none; }
  .start-storybook-text { margin:-2.5rem 30px 0; position:relative; }
}

/* Bände-Baustein, Darstellung „quer“ (Startseite und Saga-Seite, Maxim 20.10.2026): Queransichten nebeneinander, Unterschrift
   wie im Entwurf „Eine Saga in zwei Zyklen“ (BAND I · Werktitel · Untertitel · Stand · Herz). Bilder unverändert. */
.buch-quer { display:flex; align-items:stretch; justify-content:center; gap:clamp(1.5rem, 4vw, 3.5rem); margin:clamp(3.5rem, 6vw, 5rem) 0 0; padding:0; list-style:none; }
.buch-quer-band { display:flex; flex:1 1 0; max-width:15rem; flex-direction:column; align-items:center; min-width:0; text-align:center; }
.buch-quer-link { display:flex; flex:1 1 auto; flex-direction:column; align-items:center; gap:.3rem; color:var(--ivory); text-decoration:none; }
.buch-quer-link:hover .buch-quer-titel, .buch-quer-link:focus-visible .buch-quer-titel { color:var(--gold-bright); }
.buch-quer-buch { display:flex; align-items:flex-end; justify-content:center; width:100%; height:clamp(11rem, 17vw, 15.5rem); margin-bottom:1.1rem; transition:transform .6s var(--ease); }
.buch-quer-bild { display:block; max-width:100%; max-height:100%; width:auto; height:auto; filter:drop-shadow(14px 22px 22px rgba(0, 0, 0, .6)); }
.buch-quer-link:hover .buch-quer-buch, .buch-quer-link:focus-visible .buch-quer-buch { transform:translateY(-6px); }
.buch-quer-nr { color:var(--gold-bright); font:var(--type-label); letter-spacing:.3em; text-transform:uppercase; }
.buch-quer-titel { display:flex; align-items:flex-start; justify-content:center; min-height:2.3em; color:var(--ivory); font:400 clamp(1.2rem, 1.55vw, 1.5rem)/1.15 var(--font-author); letter-spacing:-.01em; text-wrap:balance; } /* höchstens zwei Zeilen, alle Bände auf gleicher Höhe */
.buch-quer-band.ist-in-arbeit .buch-quer-bild { filter:grayscale(1) drop-shadow(14px 22px 22px rgba(0, 0, 0, .6)); }
.buch-quer-titel.ist-offen { color:var(--ivory-dim); font-style:italic; }
.buch-quer-sub { color:var(--ivory-dim); font:400 1rem/1.35 var(--font-author); }
.buch-quer-stand { margin-top:.2rem; color:color-mix(in srgb, var(--gold) 55%, var(--ivory) 45%); /* helles Gold: Richtung Gold, heller als Gold (Maxim 02:35) */ font:italic 400 1rem/1.35 var(--font-author); letter-spacing:.01em; } /* Stand leiser als der Titel: Hierarchie Band → Titel → Stand (Maxim 21.10.2026, typeset) */
.buch-quer-band .buch-like { --kb-herz:var(--ivory-dim); position:relative; margin-top:.5rem; }
.buch-quer-band .buch-like:hover, .buch-quer-band .buch-like:focus-within { --kb-herz:var(--ivory); }
/* Herz wie in der Kaufbox (ein Rahmen, von unten vergoldet), ohne Kasten und Zähler */
.buch-quer-band .buch-like .wpulike { display:flex; align-items:center; justify-content:center; margin:0; padding:0; }
.buch-quer-band .buch-like .wp_ulike_general_class { padding:0; border:0; border-radius:0; box-shadow:none; background:none; }
.buch-quer-band .buch-like .wp_ulike_btn { width:2.75rem; height:2.75rem; padding:0; border:0; background:none; box-shadow:none; } /* 44 px Tippfläche */
.buch-quer-band .buch-like .wp_ulike_general_class { display:flex; align-items:center; gap:.1rem; }
/* Stimmenzahl als kleines „+n“ neben dem Herz (Maxim 20.10.2026); bei 0 nichts */
.buch-quer-band .buch-like .count-box { position:static; width:auto; height:auto; overflow:visible; clip:auto; padding:0; margin:0 0 0 -.35rem; font-size:0; }
.buch-quer-band .buch-like .count-box::after { content:attr(data-ulike-counter-value); color:var(--gold-bright); font:500 .9rem/1 var(--font-author); font-variant-numeric:lining-nums tabular-nums; letter-spacing:.02em; } /* Zahl in der Buchschrift statt UI-Schrift */
.buch-quer-band .buch-like .count-box[data-ulike-counter-value="0"]::after { content:none; }
/* Hinweis und Meldung unter dem Herz, mittig, lesbare Breite (Maxim 20.10.2026: Tooltip unten, vernünftige Breite) */
.buch-quer-band .buch-like .buch-like-hinweis, .buch-quer-band .buch-like .buch-like-meldung { top:calc(100% + .35rem); bottom:auto; left:50%; width:14rem; max-width:none;
  text-align:center; transform:translate(-50%, -4px); }
.buch-quer-band .buch-like:has(:focus-visible) .buch-like-hinweis, .buch-quer-band .buch-like.zeigt .buch-like-hinweis,
.buch-quer-band .buch-like.hat-meldung .buch-like-meldung { transform:translate(-50%, 0); }
@media (hover:hover) { .buch-quer-band .buch-like:hover .buch-like-hinweis { transform:translate(-50%, 0); } }

.buch-quer-band .wpulike-heart .wp_ulike_put_image { position:relative; cursor:pointer; }
/* Herz (Maxim 20.10.2026): nur Umriss in Gold; nach dem Klick golden gefüllt. Zählt wie überall in Neverland Like. */
.buch-quer-band .wpulike-heart .wp_ulike_put_image:after { content:""; position:absolute; inset:.75rem; background:var(--gold); filter:none;
  -webkit-mask:var(--herz-umriss) center/contain no-repeat; mask:var(--herz-umriss) center/contain no-repeat; transition:opacity .3s var(--ease); }
.buch-quer-band .wpulike-heart .wp_ulike_put_image.wp_ulike_btn_is_active:after { -webkit-mask-image:var(--herz-voll); mask-image:var(--herz-voll); }
.buch-quer-band { --herz-umriss:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.3s-7.3-4.4-9.3-9A5 5 0 0 1 12 6.1a5 5 0 0 1 9.3 5.2c-2 4.6-9.3 9-9.3 9z' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E");
  --herz-voll:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.3s-7.3-4.4-9.3-9A5 5 0 0 1 12 6.1a5 5 0 0 1 9.3 5.2c-2 4.6-9.3 9-9.3 9z' fill='%23000' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.buch-quer-band .buch-like:hover .wp_ulike_put_image:after { opacity:.8; }
@media (prefers-reduced-motion: reduce) { .buch-quer-buch { transition:none; } }
/* Handy (Maxim 20.10.2026: 3+2 „geht nicht“): eine Reihe zum Wischen, je Band gut eine halbe Bildschirmbreite, einrastend */
@media (max-width: 760px) {
  .buch-quer { justify-content:flex-start; gap:1.25rem; margin-inline:-30px; padding:0 30px 4.5rem; margin-bottom:-4rem; overflow-x:auto; scroll-snap-type:x mandatory;
    scroll-padding-inline:30px; overscroll-behavior-x:contain; scrollbar-width:none; }
  .buch-quer::-webkit-scrollbar { display:none; }
  .buch-quer-band { flex:0 0 58vw; scroll-snap-align:start; }
  .buch-quer-buch { height:15rem; }
}

/* Seite „Visual Storybook“ (ME-1804, 20.10.2026): Kopf (story01) → Warum → Bühne (story02) mit Zitat → Reinlesen auf Papier →
   Inhalt mit Zeichnungen → Termine → Companion-Banner. Kein Skript. */
.mm-storybook { background:var(--night); color:var(--ivory); }
.mm-storybook em { font-style:italic; }
.sb-gold { color:var(--gold); }
.sb-kopf { position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:flex-end; justify-content:center;
  min-height:max(38rem, min(71.4vw, calc(100svh + var(--kopf-hoehe)))); margin-top:calc(-1 * var(--kopf-hoehe)); /* so hoch wie das Bild, höchstens ein Bildschirm (adapt 21.10.2026: 1920 px) */ /* läuft unter die Navigation (Maxim 20.10.2026) */
  padding:calc(var(--kopf-hoehe) + clamp(6rem, 10vw, 9rem)) 2rem clamp(2rem, 3.5vw, 3rem); text-align:center; }
.sb-kopf-bild { position:absolute; top:0; left:50%; z-index:-2; width:calc(max(38rem, min(71.4vw, calc(100svh + var(--kopf-hoehe)))) * 1.4008); height:100%; max-width:none; transform:translateX(-50%);
  object-fit:cover; object-position:50% 0%; -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.sb-kopf::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, var(--night-55) 0%, transparent 18%, transparent 46%, var(--night-82) 72%, var(--night) 100%); }
.sb-kopf-text { max-width:44rem; }
.sb-zeile { margin:0 0 1rem; color:var(--gold-bright); font:var(--type-label); letter-spacing:.3em; text-transform:uppercase; }
.sb-kopf h1 { margin:0 0 1.1rem; font:400 clamp(2.6rem, 5vw, 4.6rem)/1.02 var(--font-author); letter-spacing:-.03em; text-wrap:balance; }
.sb-unterzeile { margin:0 auto 2rem; max-width:38rem; color:var(--ivory-dim); font:400 1.4375rem/1.5 var(--font-author); text-wrap:balance; } /* 23 px (Maxim 21.10.2026) */
.sb-knoepfe { display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; }
.sb-knopf { display:inline-flex; align-items:center; justify-content:center; min-height:var(--ziel); padding:0 1.5rem; border:1px solid var(--gold);
  background:var(--gold); color:var(--night); font:var(--type-button); letter-spacing:var(--track-button); text-transform:uppercase;
  text-decoration:none; transition:background .2s, color .2s, border-color .2s; }
.sb-knopf:hover { background:var(--ivory); border-color:var(--ivory); color:var(--night); }
.sb-knopf:focus-visible { outline:2px solid var(--gold-bright); outline-offset:5px; }
.sb-knopf-umriss { background:transparent; color:var(--gold); }

/* Warum: Überschrift links, Text rechts */
.sb-warum { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:clamp(2rem, 5vw, 5rem); align-items:start;
  width:var(--shell); margin:0 auto; padding:clamp(4.5rem, 9vw, 7.5rem) 0; }
.sb-warum h2 { margin:0; font:400 clamp(2.2rem, 4vw, 3.4rem)/1.06 var(--font-author); letter-spacing:-.02em; text-wrap:balance; }
.sb-warum-text p { margin:0 0 1.2rem; max-width:36rem; color:var(--ivory-hell); font:400 1.3125rem/1.65 var(--font-author); } /* 21 px, heller (Maxim 21.10.2026) */
.sb-warum-knoepfe { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.6rem; }
.sb-warum-text .sb-digital { margin-top:1.8rem; padding-top:1.4rem; border-top:var(--haarlinie); color:var(--ivory); }
.sb-digital strong { color:var(--gold); font-weight:400; }

/* Bühne (story02): Zitat aus dem Prolog links auf dem Schiefer */
.sb-buehne { position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:flex-end; min-height:clamp(34rem, 52vw, 56rem);
  padding:clamp(4rem, 7vw, 6rem) max(2rem, calc((100% - 72rem) / 2)) clamp(2.5rem, 4vw, 4rem); }
.sb-buehne-bild { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:70% 50%; }
.sb-buehne::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, var(--night-82) 0%, var(--night-55) 32%, transparent 55%),
             linear-gradient(180deg, var(--night) 0%, transparent 14%, transparent 86%, var(--night) 100%); }
.sb-buehne-text { max-width:30rem; }
.sb-buehne h2 { margin:0 0 2rem; font:400 clamp(2.4rem, 4.4vw, 4rem)/1.04 var(--font-author); letter-spacing:-.02em; }

/* Das aufgeschlagene Buch (Maxim 20.10.2026: Buch-Feeling, eine Doppelseite, nicht so hoch). Satz wie der Reader der
   Companion App (reader.css: Cormorant 500, Papier #fbf6ec, Tinte #221c15, Kopfstück Aldrin + Cormorant Unicase).
   Die Schrift wächst mit der Seitenbreite (cqi), damit jede Seite den Inhalt ihrer Druckseite trägt. */
@font-face { font-family:"SB Cormorant"; src:url("schriften-storybook/cormorant-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"SB Cormorant"; src:url("schriften-storybook/cormorant-500.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"SB Cormorant"; src:url("schriften-storybook/cormorant-600.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"SB Cormorant"; src:url("schriften-storybook/cormorant-italic.woff2") format("woff2"); font-weight:400 600; font-style:italic; font-display:swap; }
@font-face { font-family:"SB Cormorant Unicase"; src:url("schriften-storybook/cormorant-unicase-600.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"SB Aldrin"; src:url("schriften-storybook/aldrin.woff2") format("woff2"); font-display:swap; }
.sb-buch { --sb-papier:var(--reader-papier); --sb-tinte:var(--reader-tinte); --sb-leise:var(--reader-leise); --sb-gold-papier:var(--reader-gold); --sb-umschlag:var(--umschlag);
  padding:clamp(4rem, 8vw, 6.5rem) 0 clamp(4rem, 8vw, 6rem); }
.sb-buch-titel { width:min(var(--shell), 16em); margin:0 auto clamp(2rem, 4vw, 3rem); text-align:center; font:400 clamp(2.2rem, 4vw, 3.4rem)/1.08 var(--font-author); letter-spacing:-.02em; text-wrap:balance; } /* zwei Zeilen (Maxim 21.10.2026) */
.mm-storybook .startseite-termine h2 { font:400 clamp(2.2rem, 4vw, 3.4rem)/1.06 var(--font-author); letter-spacing:-.02em; } /* nur hier: gleiche Abschnittsgröße */
.sb-buch-buehne { position:relative; width:min(var(--shell), calc(76svh * 1.3367 + 9rem)); margin:0 auto; }
.sb-buch-seiten { position:relative; margin:0 auto; outline:none; }
.sb-buch-seiten:focus-visible { outline:2px solid var(--gold-bright); outline-offset:8px; }
/* Ohne Skript: der Fluss als eine Papierbahn */
.sb-fluss { width:min(40rem, 100%); margin:0 auto; padding:clamp(2rem, 5vw, 3.5rem) clamp(1.4rem, 5vw, 3.5rem); background:var(--sb-papier); color:var(--sb-tinte);
  border-radius:3px; font:500 1.1rem/1.62 "SB Cormorant", "Iowan Old Style", Palatino, Georgia, serif; text-align:justify; hyphens:auto; }
.sb-teil + .sb-teil { margin-top:3em; }
/* Satz wie der Reader */
.sb-fluss p, .sb-spalten p { margin:0 0 .47em; text-indent:1.2em; }
.sb-fluss .sb-teil > p:first-child, .sb-fluss header + p, .sb-spalten .sb-teil > p:first-child, .sb-spalten header + p { text-indent:0; }
.sb-fluss em, .sb-spalten em { font-style:italic; }
.sb-fluss strong, .sb-spalten strong { font-weight:600; }
.sb-kapitaelchen { font-variant:small-caps; letter-spacing:.04em; }
.sb-kopfstueck { text-align:center; padding-top:2.4em; margin-bottom:2.6em; }
.sb-ueber { margin:0 0 1em !important; text-indent:0 !important; font-size:1.5em; font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
.sb-runa { display:block; font:400 2.1em/1.1 "SB Aldrin", serif; opacity:.85; }
.sb-titel { margin:.2em 0 0; font:600 1.75em/1.05 "SB Cormorant Unicase", "SB Cormorant", Georgia, serif; letter-spacing:.03em; color:var(--sb-tinte); text-align:center; }
.sb-inhaltsseite .sb-titel { margin:2.2em 0 1.8em; }
.sb-inhalt { margin:0; padding:0; list-style:none; font-weight:500; text-align:left; }
.sb-inhalt li { display:flex; align-items:baseline; gap:.3em; margin-bottom:.42em; }
.sb-punkte { flex:1; border-bottom:1px dotted rgba(34, 28, 21, .45); transform:translateY(-.25em); }
.sb-ausgabe p { text-indent:0 !important; margin-bottom:.9em; }
.sb-widmung { margin-top:3em !important; text-indent:0 !important; text-align:center; font:400 .7em/1.6 var(--font-ui); color:var(--sb-leise); }
.sb-bildseite { margin:0; }
.sb-bildseite img { display:block; width:100%; height:auto; mix-blend-mode:multiply; }
.sb-ende { text-align:center; hyphens:manual; }
.sb-ende-innen { display:flex; flex-direction:column; align-items:center; }
.sb-ende-zeile { margin:0 0 1.1em !important; text-indent:0 !important; font:600 .6em/1.3 var(--font-ui); letter-spacing:.34em; text-transform:uppercase; color:var(--gold-bright); }
.sb-ende-titel { margin:0 0 .7em !important; text-indent:0 !important; font:600 2.15em/1.08 "SB Cormorant Unicase", "SB Cormorant", Georgia, serif; letter-spacing:.02em; color:var(--gold); text-wrap:balance; }
.sb-ende-satz { margin:0 auto 1.8em !important; max-width:15em; text-indent:0 !important; font-size:1.18em; font-style:italic; line-height:1.4; color:var(--ivory); text-wrap:balance; text-align:center; }
.sb-ende-wege { display:grid; grid-template-columns:minmax(0, 1fr); gap:.7em; width:min(100%, 15em); margin:0 !important; text-indent:0 !important; }
.sb-ende-knopf { display:flex; align-items:center; justify-content:center; min-height:var(--ziel); padding:0 1.2em; border:1px solid var(--gold);
  background:var(--gold); color:var(--night); font:var(--type-button); letter-spacing:var(--track-button); text-transform:uppercase; text-decoration:none; transition:background .2s, color .2s, border-color .2s; }
.sb-ende-knopf:hover, .sb-ende-knopf:focus-visible { background:var(--ivory); border-color:var(--ivory); color:var(--night); }
.sb-ende-knopf:focus-visible { outline:2px solid var(--gold-bright); outline-offset:4px; }
.sb-ende-knopf-umriss { background:transparent; color:var(--gold); }
.sb-ende-runa { color:var(--gold); font-size:2.3em; margin-bottom:.7em; opacity:1; }
.sb-siegel { position:relative; display:grid; grid-template-rows:auto auto auto; place-content:center; justify-items:center; gap:.35em; width:11em; aspect-ratio:1; margin:0 auto 1.5em;
  border:1px solid var(--gold); border-radius:50%; box-shadow:inset 0 0 0 .5em var(--sb-umschlag), inset 0 0 0 calc(.5em + 1px) var(--gold-55); }
.sb-siegel::before, .sb-siegel::after { content:""; position:absolute; left:50%; width:5px; height:5px; border:1px solid var(--gold); background:var(--sb-umschlag); transform:translateX(-50%) rotate(45deg); }
.sb-siegel::before { top:-3px; } .sb-siegel::after { bottom:-3px; }
.sb-siegel-nr { font:600 .9em/1 "SB Cormorant Unicase", Georgia, serif; letter-spacing:.24em; color:var(--gold-bright); }
.sb-siegel-linie { display:block; width:4.6em; height:1.5em; border-bottom:1px solid var(--gold); }
.sb-siegel-von { font:600 1.25em/1 "SB Cormorant Unicase", Georgia, serif; letter-spacing:.08em; color:var(--gold); }
.sb-nummer { margin:0 !important; text-indent:0 !important; font:600 .62em/1.7 var(--font-ui); letter-spacing:.26em; text-transform:uppercase; text-align:center; color:var(--ivory-dim); }
/* Ohne Skript: das Ende als dunkler Umschlag am Ende der Papierbahn */
.sb-fluss .sb-ende { margin-inline:calc(-1 * clamp(1.4rem, 5vw, 3.5rem)); padding:3em clamp(1.4rem, 5vw, 3.5rem); background:var(--sb-umschlag); color:var(--ivory); }
.sb-fluss .sb-ende + .sb-ende { margin-top:0; margin-bottom:calc(-1 * clamp(2rem, 5vw, 3.5rem)); }

/* Mit Skript: Seiten = Spalten des Flusses (assets/storybook.js) */
.sb-vorlesen { position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important; white-space:normal; padding:0 !important; }
.sb-buch--blaettern .sb-buch-seiten { position:relative; width:min(calc(100% - 9rem), calc(76svh * 1.3367)); aspect-ratio:742.68 / 555.59; margin:0 auto; perspective:2600px; cursor:pointer; outline:none; }
.sb-buch-seiten:focus-visible { outline:2px solid var(--gold-bright); outline-offset:8px; }
.sb-ansicht { position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; box-shadow:0 30px 60px rgba(0, 0, 0, .55), 0 6px 14px rgba(0, 0, 0, .35); transition:opacity .2s var(--ease); }
.sb-ansicht.ist-weg { opacity:0; }
.sb-mess { visibility:hidden; box-shadow:none; }
.sb-flip { transform-style:preserve-3d; }
.sb-seite { position:relative; overflow:hidden; container-type:inline-size; background:var(--sb-papier); color:var(--sb-tinte); }
.sb-ansicht > .sb-seite:nth-child(odd) { background:linear-gradient(90deg, var(--sb-papier) 86%, var(--reader-falz) 100%); border-radius:3px 0 0 3px; }
.sb-ansicht > .sb-seite:nth-child(even) { background:linear-gradient(270deg, var(--sb-papier) 86%, var(--reader-falz) 100%); border-radius:0 3px 3px 0; }
.sb-fenster { position:absolute; inset:9% 11% 11%; overflow:hidden; }
.sb-spalten { height:100%; background:var(--sb-papier); column-width:calc(100cqi * .78); column-gap:calc(100cqi * .22); column-fill:auto;
  font-family:"SB Cormorant", "Iowan Old Style", Palatino, Georgia, serif; font-size:clamp(.9375rem, 3.45cqi, 1.1875rem); font-weight:500; line-height:1.55;
  text-align:justify; hyphens:auto; text-wrap:pretty; orphans:2; widows:2; }
.sb-spalten .sb-teil { break-before:column; margin:0; }
.sb-spalten .sb-teil:first-child { break-before:auto; }
.sb-spalten .sb-bildseite, .sb-spalten .sb-ende, .sb-spalten .sb-leer { height:100%; break-inside:avoid; display:flex; flex-direction:column; justify-content:center; }
.sb-spalten .sb-bildseite img { max-height:100%; width:auto; max-width:100%; margin:0 auto; object-fit:contain; }
.sb-spalten .sb-ausgabe { padding-top:40%; }
.sb-spalten .sb-kopfstueck { padding-top:18%; margin-bottom:14%; }
.sb-pagina { position:absolute; bottom:4.4%; left:0; right:0; text-align:center; font:italic 400 clamp(11px, 2.6cqi, 14px)/1 "SB Cormorant", Georgia, serif; color:var(--sb-leise); }
.sb-seite-leer .sb-pagina { display:none; }
.sb-ansicht > .sb-seite.sb-seite-dunkel, .sb-blatt > .sb-seite.sb-seite-dunkel { color:var(--ivory);
  background:linear-gradient(118deg, transparent 63%, rgba(221, 184, 128, .22) 63.15%, transparent 63.3%),
             linear-gradient(-71deg, transparent 22%, rgba(221, 184, 128, .14) 22.12%, transparent 22.24%),
             radial-gradient(120% 90% at 50% 40%, var(--umschlag-licht) 0%, var(--sb-umschlag) 60%, var(--umschlag-tief) 100%); }
.sb-seite-dunkel .sb-spalten { background:transparent; }
.sb-seite-dunkel .sb-spalten .sb-ende { justify-content:center; }
.sb-seite-dunkel::before { content:""; position:absolute; inset:5.5%; border:1px solid var(--gold-55); pointer-events:none; }
.sb-ansicht > .sb-seite-dunkel:nth-child(odd)::after, .sb-ansicht > .sb-seite-dunkel:nth-child(even)::after { content:""; position:absolute; top:0; bottom:0; width:14%; pointer-events:none; }
.sb-ansicht > .sb-seite-dunkel:nth-child(odd)::after { right:0; background:linear-gradient(90deg, transparent, rgba(0, 0, 0, .45)); }
.sb-ansicht > .sb-seite-dunkel:nth-child(even)::after { left:0; background:linear-gradient(270deg, transparent, rgba(0, 0, 0, .45)); }
.sb-blatt { position:absolute; top:0; bottom:0; width:50%; transform-style:preserve-3d; transition:transform .7s cubic-bezier(.45, .05, .25, 1); }
.sb-blatt-vor { left:50%; transform-origin:0 50%; }
.sb-blatt-zurueck { left:0; transform-origin:100% 50%; }
.sb-blatt-vor.ist-gedreht { transform:rotateY(-180deg); }
.sb-blatt-zurueck.ist-gedreht { transform:rotateY(180deg); }
.sb-blatt > .sb-seite { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.sb-blatt > .sb-blatt-hinten { transform:rotateY(180deg); }
.sb-blatt-vor .sb-blatt-vorne, .sb-blatt-zurueck .sb-blatt-hinten { background:linear-gradient(270deg, var(--sb-papier) 86%, var(--reader-falz) 100%); }
.sb-blatt-vor .sb-blatt-hinten, .sb-blatt-zurueck .sb-blatt-vorne { background:linear-gradient(90deg, var(--sb-papier) 86%, var(--reader-falz) 100%); }
.sb-blatt-vorne::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg, rgba(0, 0, 0, .16), transparent 35%); opacity:0; transition:opacity .35s; }
.sb-blatt.ist-gedreht .sb-blatt-vorne::after { opacity:1; }
.sb-pfeil { position:absolute; top:50%; z-index:2; display:grid; place-items:center; width:3.25rem; height:3.25rem; margin-top:-1.625rem; padding:0;
  border:1px solid var(--gold); border-radius:50%; background:var(--night-55); color:var(--gold); cursor:pointer; transition:background .2s, color .2s, opacity .2s; }
.sb-pfeil-zurueck { left:0; }
.sb-pfeil-vor { right:0; }
.sb-pfeil:hover { background:var(--gold); color:var(--night); }
.sb-pfeil:focus-visible { outline:2px solid var(--gold-bright); outline-offset:4px; }
.sb-pfeil:disabled { opacity:.25; cursor:default; background:transparent; color:var(--gold); }
.sb-stand { margin:1.6rem 0 0; text-align:center; color:var(--gold-bright); font:500 .9375rem/1.4 var(--font-ui); letter-spacing:.1em; } /* 15 px Gold (Maxim 21.10.2026) */
.sb-banner { scroll-margin-top:6rem; }
.sb-banner .mm-beta-banner__innen { grid-template-columns:minmax(0, 1fr); }
.sb-textlink { margin-left:.4em; color:var(--gold); text-underline-offset:.25em; }
@media (prefers-reduced-motion: reduce) { .sb-blatt { transition:none; } }
/* Kleine Freuden (Maxim 21.10.2026) */
.sb-runa { display:grid; justify-items:center; color:inherit; text-decoration:none; cursor:pointer; }
.sb-runa > span { grid-area:1 / 1; transition:opacity .35s var(--ease), filter .35s var(--ease); }
.sb-runa-klar { opacity:0; font:600 .62em/1.1 "SB Cormorant Unicase", Georgia, serif; letter-spacing:.12em; align-self:center; color:var(--sb-gold-papier); }
.sb-seite-dunkel .sb-runa-klar { color:var(--gold); }
.sb-runa:hover .sb-runa-rune, .sb-runa:focus-visible .sb-runa-rune { opacity:0; filter:blur(3px); }
.sb-runa:hover .sb-runa-klar, .sb-runa:focus-visible .sb-runa-klar { opacity:1; }
@media (hover: hover) and (pointer: fine) {
  .sb-ansicht::after { content:""; position:absolute; right:0; bottom:0; z-index:3; width:0; height:0; pointer-events:none;
    background:linear-gradient(135deg, #f6efdf 0%, var(--reader-falz) 46%, rgba(0, 0, 0, .28) 50%, var(--night) 53%);
    box-shadow:-4px -4px 10px rgba(0, 0, 0, .18); transition:width .3s var(--ease), height .3s var(--ease); }
  .sb-buch-seiten:hover .sb-ansicht:not(.ist-letzte):not(.sb-flip):not(.sb-mess)::after { width:3.4rem; height:3.4rem; }
}
.sb-siegel { background:linear-gradient(115deg, transparent 38%, rgba(221, 184, 128, .32) 50%, transparent 62%) no-repeat; background-size:260% 100%; background-position:160% 0; }
.sb-glanz .sb-siegel { animation:sb-glanz 1.8s .6s cubic-bezier(.3, .1, .2, 1) 1 both; }
@keyframes sb-glanz { from { background-position:160% 0; } to { background-position:-60% 0; } }
@media (prefers-reduced-motion: reduce) { .sb-glanz .sb-siegel { animation:none; } .sb-runa > span { transition:none; } }
.sb-leiste { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.2rem 1.4rem; margin:1.4rem auto 0; }
.sb-leiste .sb-stand { margin:0; }
.sb-ton, .sb-vonvorn { min-height:44px; padding:0 .3rem; border:0; background:none; color:var(--ivory-dim); font:500 .8125rem/1 var(--font-ui); letter-spacing:.08em; cursor:pointer;
  text-decoration:underline; text-decoration-color:var(--gold-55); text-underline-offset:.3em; }
.sb-ton:hover, .sb-vonvorn:hover { color:var(--gold); }
.sb-ton:focus-visible, .sb-vonvorn:focus-visible { outline:2px solid var(--gold-bright); outline-offset:3px; }
.sb-ton[aria-pressed="false"] { color:var(--ivory-dim); text-decoration-style:dotted; }
@media (max-width: 1000px) { .sb-leiste { margin-top:5rem; } } /* unter den Pfeilen, nicht zwischen ihnen (polish 21.10.2026) */
/* Feinschliff (polish 21.10.2026) */
.mm-storybook ::selection { background:var(--gold-55); color:var(--night); }
.mm-storybook .sb-seite ::selection, .mm-storybook .sb-fluss ::selection { background:rgba(149, 112, 37, .28); color:var(--reader-tinte); }
@media (max-width: 760px) {
  .sb-zeile { font-size:.65rem; letter-spacing:.12em; white-space:nowrap; } /* eine Zeile statt Umbruch vor „STORYBOOK“ */
  .sb-kopf h1 { font-size:clamp(2.1rem, 10vw, 2.6rem); } /* zwei Zeilen: „Nicht zu kaufen.“ / „Nur bei Lesungen.“ */
  .sb-runa { padding-block:.3em; margin-block:-.3em; } /* größere Tippfläche, Satz bleibt gleich */
}

@media (max-width: 960px) {
  .sb-warum { grid-template-columns:minmax(0, 1fr); }
}
/* Buch bis 1000 px als einzelne Seite (Audit 21.10.2026: auf dem Tablet war jede Seite nur ~300 px breit) */
@media (max-width: 1000px) {
  /* Kopf bis 1000 px: Bild oben, Text darunter (adapt 21.10.2026: auf 820 px lag die Zeile über dem Buch) */
  .sb-kopf { display:block; min-height:0; padding:0 0 3rem; }
  .sb-kopf-bild { position:relative; left:auto; z-index:auto; display:block; width:100%; height:auto; transform:none; aspect-ratio:4 / 3; object-position:50% 35%;
    -webkit-mask-image:linear-gradient(180deg, #000 70%, transparent 100%); mask-image:linear-gradient(180deg, #000 70%, transparent 100%); }
  .sb-kopf::after { display:none; }
  .sb-kopf-text { margin:-1.5rem auto 0; max-width:44rem; padding:0 30px; position:relative; }
  .sb-buch-buehne { width:calc(100% - 60px); }
  .sb-buch--blaettern .sb-buch-seiten { width:min(100%, calc(68svh * .6684)); aspect-ratio:371.34 / 555.59; }
  .sb-ansicht { grid-template-columns:1fr; }
  .sb-ansicht > .sb-seite:nth-child(odd) { border-radius:3px; background:var(--sb-papier); }
  .sb-fenster { inset:7% 8% 9%; }
  .sb-spalten { column-width:calc(100cqi * .84); column-gap:calc(100cqi * .16); font-size:clamp(.90625rem, 4.6cqi, 1.125rem); }
  .sb-spalten .sb-ausgabe { padding-top:6%; }
  .sb-spalten .sb-inhaltsseite { font-size:.9em; }
  .sb-spalten .sb-inhaltsseite .sb-titel { margin:.6em 0 1.1em; }
  .sb-spalten .sb-inhalt li { margin-bottom:.22em; }
  .sb-spalten .sb-kopfstueck { padding-top:6%; margin-bottom:9%; }
  .sb-pfeil { top:auto; bottom:-4.4rem; margin-top:0; }
  .sb-pfeil-zurueck { left:0; } .sb-pfeil-vor { right:0; }
  .sb-stand { margin-top:2.2rem; }
}
@media (max-width: 760px) {
  .sb-kopf { display:block; min-height:0; padding:0 0 3rem; }
  .sb-kopf-bild { position:relative; z-index:auto; display:block; height:auto; aspect-ratio:4 / 3; object-position:50% 35%;
    -webkit-mask-image:linear-gradient(180deg, #000 70%, transparent 100%); mask-image:linear-gradient(180deg, #000 70%, transparent 100%); }
  .sb-kopf::after { display:none; }
  .sb-zeile { letter-spacing:.18em; }
  .sb-warum { width:calc(100% - 60px); }
  .sb-buehne { display:block; min-height:0; padding:0 0 3rem; }
  .sb-buehne-bild { position:relative; z-index:auto; display:block; height:auto; aspect-ratio:4 / 3; object-position:72% 50%;
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 15%, #000 70%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0%, #000 15%, #000 70%, transparent 100%); }
  .sb-buehne::after { display:none; }
  .sb-buehne-text { margin:-2rem 30px 0; position:relative; }
  .sb-buch--blaettern .sb-buch-seiten { width:min(100%, calc(68svh * .6684)); }
}

/* Meldung des Like-Plugins (Neverland Like ≥ 0.4.0) in den Farben der Seite statt Grün; sie weicht „Frag Ozzy“ selbst aus */
:root { --nlike-toast-grund:var(--night); --nlike-toast-schrift:var(--ivory); --nlike-toast-rand:var(--gold-55); --nlike-toast-akzent:var(--gold);
  --nlike-toast-schriftart:400 1rem/1.4 var(--font-author); }
/* Im Widget Saga-Bände bestätigt die Plugin-Meldung; die eigene Meldung am Herz entfällt dort (sonst doppelt) */
.buch-quer-band .buch-like .buch-like-meldung { display:none; }

/* Widget Saga-Bände – Feinschliff nach Kritik 2 (20.10.2026): Punkte am Handy, gedämpfter Stand bei Bänden in Arbeit, Zyklus-Links auf einer Linie */
.buch-quer-band.ist-in-arbeit .buch-quer-stand { color:color-mix(in srgb, var(--gold) 55%, var(--ivory) 45%); } /* seit 21.10. für alle Bände gleich */
.start-zyklus { display:flex; flex-direction:column; align-items:center; height:100%; }
.start-zyklus .text-link { margin-top:auto; }
.start-zyklen { align-items:stretch; }
.start-baende-punkte { display:none; }
@media (max-width: 760px) {
  .start-saga .buch-quer-band { flex:0 0 44vw; }
  .start-baende-punkte { display:flex; justify-content:center; gap:.5rem; margin-top:1rem; }
  .start-baende-punkte i { width:6px; height:6px; border-radius:50%; background:var(--gold-55); }
  .start-zyklus { height:auto; }
  .start-zyklus .text-link { margin-top:0; }
}

/* stapel-start · Widget Saga-Bände: Bände als Stapel, der auffächert (Maxim 20.10.2026; Bewegung in assets/stapel.js) */
.start-stapel { position:relative; }
.start-stapel .buch-quer-band { transition:transform 1s cubic-bezier(.65, 0, .35, 1); /* weich anfahren, weich bremsen – in beide Richtungen gleich */ transform-origin:50% 0; } /* wächst nach unten in den Platz der Unterschriften (Kritik 23:10: gleiches Maß oben) */
/* --stapel-gross muss zu GROESSER in stapel.js passen */
.start-stapel { --stapel-fuss:clamp(11rem, 17vw, 15.5rem); --stapel-gross:1.55; --stapel-oben:clamp(3.5rem, 6vw, 5rem); } /* oben wie Kopf → Zyklen */
/* Abstand nach oben in beiden Zuständen gleich groß: Platz für die 1,3× höheren Bücher im Stapel, ohne die Zyklen zu berühren */
.start-stapel .buch-quer { margin-top:var(--stapel-oben); }
.start-stapel.ist-zu { padding-top:0; } /* Höhe bleibt gleich (Maxim 22:13): größere Bücher ragen nach oben in den Abstand */
.start-stapel.ist-zu .buch-quer { overflow:visible; }
/* Geschlossen: nur die Bücher, keine Unterschriften */
/* Unterschriften: Öffnen 0,55–1,0 s; Schließen genau gespiegelt 0,28–0,73 s (bei 5 Bänden), gleiche symmetrische Kurve */
.start-stapel .buch-quer-nr, .start-stapel .buch-quer-titel, .start-stapel .buch-quer-stand, .start-stapel .buch-like { transition:opacity .45s cubic-bezier(.65, 0, .35, 1) .55s, transform .45s cubic-bezier(.65, 0, .35, 1) .55s; }
.start-stapel.ist-zu .buch-quer-nr, .start-stapel.ist-zu .buch-quer-titel, .start-stapel.ist-zu .buch-quer-stand, .start-stapel.ist-zu .buch-like { opacity:0; transform:translateY(8px); transition:opacity .45s cubic-bezier(.65, 0, .35, 1) .28s, transform .45s cubic-bezier(.65, 0, .35, 1) .28s; }
/* Der ganze Stapel ist ein Knopf; die Zeile „Alle Bände ansehen“ steht unter den Büchern */
.start-stapel-knopf { position:absolute; inset:0; z-index:10; display:block; padding:0;
  border:0; background:none; color:var(--gold-bright); cursor:default; font:var(--type-label); letter-spacing:.3em; text-transform:uppercase; }
.start-stapel-knopf.zeigt-buch, .start-stapel-knopf span { cursor:pointer; } /* Hand nur über Büchern und Zeile */
.start-stapel-knopf[hidden] { display:none; }
/* Zeile mittig zwischen Fuß des großen Stapels und Ende des Bereichs (Maxim 22:45: Platz darunter harmonisch aufteilen) */
.start-stapel-knopf span { position:absolute; left:50%; top:calc(var(--stapel-fuss) * var(--stapel-gross) + 3rem); transform:translateX(-50%); white-space:nowrap;
  padding:.6rem 0; border-bottom:1px solid var(--gold); color:var(--gold); font-size:.8125rem; } /* fest unter dem Buchfuß; Gold statt Gold-55, damit die Handlung nicht hinter dem Mond verschwindet */ /* Zeile direkt unter dem Buchfuß; der obere Abstand der Reihe fällt mit dem des Stapels zusammen (margin collapse), daher ohne --stapel-oben */
.start-stapel-knopf:focus-visible { outline:none; }
.start-stapel-knopf:focus-visible span { outline:var(--fokus); outline-offset:6px; }
/* Hover: das Buch unter der Maus wächst, die Nachbarn rücken zur Seite (stapel.js); weicher, kürzer als das Auffächern */
.start-stapel.ist-zu:not(.geht-auf):not(.geht-zu) .buch-quer-band { transition:transform .45s cubic-bezier(.22, 1, .36, 1); } /* nur fürs Hovern, nicht beim Zusammenschieben */
.start-stapel.ist-zu:has(.start-stapel-knopf:focus-visible) .buch-quer { transform:translateY(-6px); }
.start-stapel .buch-quer { transition:transform .5s var(--ease); }
.start-stapel.ist-zu .start-stapel-knopf ~ * { pointer-events:none; }
.start-stapel.ist-zu + .start-baende-punkte { visibility:hidden; }
@media (max-width: 760px) {
  .start-stapel.ist-zu .buch-quer { overflow:hidden; }
  .start-stapel { --stapel-fuss:15rem; --stapel-gross:1.3; --stapel-oben:2.5rem; }
  .start-stapel-knopf span { top:calc((var(--stapel-fuss) * var(--stapel-gross) + 100%) / 2); transform:translate(-50%, -50%); } /* Handy: mittig zwischen Buchfuß und Ende */
  .start-stapel.ist-zu { padding-top:0; }
  .start-stapel-knopf { padding-bottom:0; }
}
/* Schließen: runder ×-Knopf unter der offenen Reihe (Maxim 20.10.2026) */
/* Fester Platz für den Knopf: die Verwandlung (Breite/Höhe) verschiebt nichts drumherum (Maxim 22:24: Block wackelt) */
.start-stapel-zu-platz { position:relative; height:2.75rem; margin:2.2rem 0 0; }
.start-stapel-zu { position:absolute; inset:0; margin:auto; display:flex; align-items:center; justify-content:center; width:2.75rem; height:2.75rem; padding:0;
  border:1px solid var(--gold-55); border-radius:50%; background:transparent; color:var(--gold-bright); cursor:pointer;
  transition:border-color .3s ease, color .3s ease, transform .4s var(--ease); animation:sanft-auf .5s ease both; }
.start-stapel-zu[hidden] { display:flex; visibility:hidden; } /* Platz bleibt reserviert, damit sich die Höhe nicht ändert */
.start-stapel-zu svg { width:1rem; height:1rem; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; }
.start-stapel-zu:hover { border-color:var(--gold); color:var(--ivory); transform:rotate(90deg); }
.start-stapel-zu:focus-visible { outline:var(--fokus); outline-offset:4px; }
@media (max-width: 760px) { .start-stapel-zu-platz { margin-top:1rem; } }
/* Verwandlung Zeile ↔ ×: während der Bewegung keine eigene Einblendung/Drehung; Text und × überblenden */
.start-stapel-zu { overflow:hidden; box-sizing:border-box; }
.start-stapel-zu.verwandelt { animation:none; transition:none; transform:none; }
.start-stapel-zu-text { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); white-space:nowrap; color:var(--gold); font-size:.8125rem;
  font:var(--type-label); letter-spacing:.3em; text-transform:uppercase; opacity:0; transition:opacity .25s ease; pointer-events:none; }
.start-stapel-zu svg { transition:opacity .25s ease, transform .5s var(--ease); }
.start-stapel-zu.zeigt-text .start-stapel-zu-text { opacity:1; }
.start-stapel-zu.zeigt-text svg { opacity:0; transform:rotate(-90deg) scale(.6); }
/* Sechs Bände (Maxim 23:22: Band VI gehört in die Reihe): Abstand zwischen den Zyklen, sonst wie gehabt */
.start-saga .buch-quer { gap:clamp(1.25rem, 3vw, 2.5rem); }
.start-saga .buch-quer-titel { font-size:clamp(1.2rem, 1.6vw, 1.45rem); line-height:1.18; max-width:9.5em; } /* schmale Zeile: alle Titel zweizeilig, z. B. „Hinter dem / zweiten Stern“ (Maxim 02:33) */ /* drei Bände: wieder größer, höchstens zwei Zeilen (Maxim: nie dreizeilig) */
.start-saga .buch-quer-band.ist-neuer-zyklus { margin-left:clamp(1.25rem, 3vw, 2.5rem); }
@media (max-width: 760px) { .start-saga .buch-quer-band.ist-neuer-zyklus { margin-left:1.25rem; } }
.start-stapel .buch-quer-band { position:relative; } /* Siegel hängt am Band, neben dem Buch-Link */
/* Siegel „Weltpremiere“ an Band I (Maxim 21.10.2026, 02:34): echter, abgenutzter Papieraufkleber (generiert, Variante 3,
   assets/bilder/startseite-siegel-aufkleber.webp) statt gezeichnetem Rand; Schrift als Code darüber, größer und mittig */
.start-siegel { position:absolute; z-index:2; top:-1.2rem; left:-1.4rem; display:grid; place-items:center; width:6.8rem; aspect-ratio:1;
  background:var(--aufkleber) center/contain no-repeat; filter:drop-shadow(calc(var(--px, 0) * -4px) calc(6px + var(--py, 0) * -3px) 10px rgba(0, 0, 0, .6));
  /* Parallaxe: der Aufkleber folgt der Maus ein Stück und hängt dabei etwas nach (längere, weiche Kurve als die Bücher) */
  transform:translate(calc(var(--px, 0) * 7px), calc(var(--py, 0) * 5px)) rotate(calc(-10deg + var(--px, 0) * 4deg));
  transform-origin:30% 30%; transition:transform .9s cubic-bezier(.22, 1, .36, 1), filter .9s cubic-bezier(.22, 1, .36, 1), scale 1s cubic-bezier(.65, 0, .35, 1); text-decoration:none; }
.start-siegel:focus-visible { outline:var(--fokus); outline-offset:3px; border-radius:50%; }
/* Offen (Bücher kleiner, das Werk steht im Vordergrund): Aufkleber relativ kleiner, gibt mehr vom Cover frei (Maxim 02:36) */
.start-stapel:not(.ist-zu) .start-siegel { scale:.72; }
@media (prefers-reduced-motion: reduce) { .start-siegel { transform:rotate(-10deg); transition:none; } }
.start-siegel > span { display:flex; flex-direction:column; align-items:center; gap:.06rem; width:100%; padding-top:.1rem; text-align:center; }
/* Versalien mit leichter Sperrung; der Abstand hinter dem letzten Buchstaben wird ausgeglichen, sonst sitzt die Zeile links der Mitte */
.start-siegel i { font:var(--type-label); font-size:.5rem; font-style:normal; line-height:1; letter-spacing:.06em; margin-right:-.06em; color:var(--gold-bright); text-transform:uppercase; } /* Zeilenhöhe 1: enge Abstände zwischen Weltpremiere, auf, WACKEN (Maxim 02:40) */
.start-siegel .start-siegel-auf { display:flex; align-items:center; gap:.3rem; margin-right:0; letter-spacing:.06em; }
.start-siegel .start-siegel-auf::before, .start-siegel .start-siegel-auf::after { content:""; width:1rem; height:1px; background:var(--gold-55); } /* Striche fein wie vorher (Maxim 02:41) */
/* Schriftzug „WACKEN / 2026“ als Kontur-SVG aus Maxims Schrift (Latin CT Not Wide, 21.10.2026): W und N größer wie im Original; Maske in Elfenbein */
.start-siegel b { display:block; width:80%; aspect-ratio:2.94; margin-top:.08rem; background:var(--ivory); -webkit-mask:var(--wort) center/contain no-repeat; mask:var(--wort) center/contain no-repeat; }
@media (max-width: 760px) { .start-siegel { width:5.6rem; top:.4rem; left:.4rem; } .start-siegel i { font-size:.42rem; } .start-siegel .start-siegel-auf::before, .start-siegel .start-siegel-auf::after { width:.75rem; } }
/* Zyklus-Titel als Logo: gleiche Höhe, Farbe wie die Überschriften (Maske, die SVGs sind einfarbig) */
.start-zyklus-logo { margin:0; line-height:0; }
.start-zyklus-logo span { display:block; height:clamp(4.5rem, 7vw, 6.5rem); aspect-ratio:var(--seite, 2); margin-inline:auto; background:var(--ivory);
  -webkit-mask:var(--logo) center/contain no-repeat; mask:var(--logo) center/contain no-repeat; }
.start-zyklus:first-child .start-zyklus-logo span { --seite:2.01; } /* Frøstfædrin 561 × 279 */
.start-zyklus:last-child .start-zyklus-logo span { --seite:3.04; max-width:100%; -webkit-mask-size:auto 78%; mask-size:auto 78%; } /* Echoes of Neverland 560 × 184; optisch kleiner (Maxim 02:47), Kasten gleich hoch, damit Rauten und Texte auf einer Linie bleiben */
/* Leserstimme unter dem Stapel: Beleg, ruhig, eine Zeile Absender */
.start-stimme { max-width:36rem; margin:clamp(3rem, 5vw, 4.5rem) auto 0; }
.start-stimme blockquote { margin:0; }
.start-stimme p { margin:0; color:var(--ivory); font:italic 400 clamp(1.15rem, 1.6vw, 1.35rem)/1.5 var(--font-author); text-wrap:balance; }
.start-stimme p::before { content:"„"; } .start-stimme p::after { content:"“"; }
.start-stimme figcaption { display:flex; justify-content:center; align-items:center; gap:.7rem; margin-top:.9rem; color:var(--gold); font:var(--type-label); letter-spacing:.22em; text-transform:uppercase; }
.start-stimme cite { font-style:normal; }
/* stapel-ende */

/* startseite-rhythmus · UI-Review 21.10.2026 (Maxim „1, 3, 4, 5“): Knopf-Gewichte, zwei Abstandsmaße, Kleinkram. Nur .home. */
/* 1 · Gewicht: Saga ist der Hauptweg (gefüllter Knopf); Gewinnspiel und Beta sind Nebenwege (Rahmen statt Füllung) */
.start-knopf { display:inline-flex; align-items:center; justify-content:center; min-height:var(--ziel); padding:0 1.6rem; background:var(--gold); color:var(--night);
  font:var(--type-button); letter-spacing:var(--track-button); text-transform:uppercase; text-decoration:none; transition:background .2s, color .2s; }
.start-knopf:hover, .start-knopf:focus-visible { background:var(--ivory); color:var(--night); }
.start-knopf:focus-visible { outline:var(--fokus); outline-offset:3px; }
/* Nebenknopf: Bildflächen mit nur einem Ausgang (Storybook, Bio) – Rahmen statt Füllung, Maxim 21.10.2026 */
.start-knopf--neben { background:transparent; color:var(--gold-bright); box-shadow:inset 0 0 0 1px var(--gold-55); }
.start-knopf--neben:hover, .start-knopf--neben:focus-visible { background:rgba(221, 184, 128, .08); color:var(--ivory); }
.home .gw-teaser-knopf { background:transparent; color:var(--gold-bright); box-shadow:inset 0 0 0 1px var(--gold-55); }
.home .gw-teaser-knopf:hover { background:rgba(221, 184, 128, .08); color:var(--ivory); }
.home .beta-banner__knopf { background:transparent; color:var(--bb-gold); box-shadow:inset 0 0 0 1px currentColor; }
.home .beta-banner__knopf::after { display:none; }
.home .beta-banner:is(:hover, :focus-visible) .beta-banner__knopf { background:rgba(221, 184, 128, .1); box-shadow:inset 0 0 0 1px currentColor; }
/* 3 · Zwei Abstandsmaße: Hauptabschnitte 112 px, Nebenabschnitte 80 px (mobil kleiner) */
.home .start-saga { padding-top:clamp(4.5rem, 8vw, 7rem); padding-bottom:clamp(4.5rem, 8vw, 7rem); }
.home .start-storybook, .home .start-bio { padding-top:clamp(4.5rem, 8vw, 7rem); padding-bottom:clamp(4.5rem, 8vw, 7rem); }
.home .gw-teaser, .home .mm-beta-banner, .home .hueter, .home .article-after { padding-top:clamp(3rem, 6vw, 5rem); padding-bottom:clamp(3rem, 6vw, 5rem); }
/* 5 · Storybook-Überschrift berührt das Buch nicht mehr; Kleinschrift auf mindestens 15 px */
.home .start-storybook-text { max-width:min(30rem, 40vw); }
.home .start-storybook h2 { font-size:clamp(2.4rem, 3.8vw, 3.6rem); }
.home .start-giveaway, .home .start-leitstory .blog-meta { font-size:15px !important; }
@media (max-width: 760px) { .home .start-storybook-text { max-width:none; } .home .start-storybook { padding-top:0; } } /* mobil steht das Bild oben bündig */
/* startseite-rhythmus-ende */

/* ===== BU4w · Bausteine nach Maxims Entwürfen (content-blocks-2026-10-04, Entscheidungen 14.10. + 20.10.) ===== */
/* System (Phase 0, Maxim 20.10.: „Aus den Entwürfen“): Nacht = Navy aus Entwurf 06 */
.buch-frei-v-nacht { --s-bg: #0b1116; }

/* Text auf Bild: Bild bleibt sichtbar, Abdunkelung nur als Verlauf hinter dem Text (Entwürfe 19, 16) */
@media (min-width: 721px) {
  .buch-hg-rahmen::before { background: linear-gradient(90deg, color-mix(in srgb, var(--b-bg) 86%, transparent) 0%, color-mix(in srgb, var(--b-bg) 62%, transparent) 36%, color-mix(in srgb, var(--b-bg) 18%, transparent) 58%, transparent 72%); }
}

/* Bild + Text auf Bild — Entwurf 19 */
.buch-bt-auf .buch-frei-kicker { color: color-mix(in srgb, var(--b-text) 82%, transparent); font-weight: 500; letter-spacing: .26em; }
.buch-bt-auf .buch-wtitel { word-spacing: normal; letter-spacing: 0; text-transform: none; font-size: clamp(2rem, 3.1vw, 2.75rem); line-height: 1.12; }
.buch-bt-auf .buch-frei-fliess { max-width: 31rem; }
.buch-bt-auf .buch-frei-fliess, .buch-bt-auf .buch-frei-fliess p { hyphens: manual; }
.buch-bt-auf .buch-nk, .buch-wb .buch-nk { border-color: color-mix(in srgb, var(--b-text) 55%, transparent); color: var(--b-text); }

/* Zitatband — Entwurf 08: Bild sichtbar, nur weicher heller Fleck hinter dem Zitat, zwei gleich lange Zeilen */
.buch-hg-rahmen.buch-zb::before { background: radial-gradient(ellipse 42% 78% at 50% 50%, color-mix(in srgb, var(--b-bg) 70%, transparent), transparent 100%); }
.buch-zb { min-height: clamp(8.5rem, 12vw, 11rem); }
.buch-zb .buch-hg-innen { padding: 1.4rem 0; }
.buch-zb blockquote { max-width: 30ch; text-wrap: balance; margin-bottom: .7rem; }
.buch-zb cite::before { content: "— "; }

/* Welt-Banner — Entwürfe 16 + 15: zweizeiliger Titel „Die Welt von / ECHOES OF NEVERLAND“, Leiste mit Bild und zweizeiligen Feldern */
.buch-wb .buch-wtitel { font-size: clamp(1.5rem, 2.1vw, 1.9rem); letter-spacing: .06em; line-height: 1.15; }
.buch-wb .buch-wtitel strong { display: block; font-weight: inherit; font-size: 1.32em; }
.buch-wb-leiste { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); width: 100%; background: color-mix(in srgb, var(--b-bg) 92%, #000); border-top: 1px solid color-mix(in srgb, var(--b-text) 14%, transparent); }
.buch-wb-leiste-bild { position: relative; overflow: hidden; min-height: 9rem; }
.buch-wb-leiste-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent); mask-image: linear-gradient(90deg, #000 55%, transparent); }
.buch-wb-leiste .buch-wb-kat { width: auto; margin: 0; align-self: center; }
.buch-wb-kat a { font-weight: 500; letter-spacing: .14em; color: color-mix(in srgb, var(--b-text) 88%, transparent); }
.buch-wb-sym { color: color-mix(in srgb, var(--b-text) 75%, transparent); stroke-width: 1.2; }
.buch-wb-leiste.ohne-bild { grid-template-columns: 1fr; }
.buch-wb-leiste.ohne-bild .buch-wb-kat { width: var(--wide-block); margin-inline: auto; }
@media (max-width: 720px) { .buch-wb-leiste { grid-template-columns: 1fr; } .buch-wb-leiste-bild { min-height: 6rem; } }

/* Die Welt zweispaltig — Entwurf 10: Kopf liegt in der Kartenfläche über Karte 1, flache Karten */
.buch-wz { position: relative; }
@media (min-width: 721px) {
  .buch-wz-kopf { position: absolute; z-index: 1; top: 0; left: 0; width: 50%; padding: 1.5rem 0 0 clamp(1.25rem, 5vw, 4rem); margin: 0; }
  .buch-wz-seite { min-height: 0; align-items: flex-start; }
  .buch-wz-copy { padding-top: 5.1rem; padding-bottom: 1.1rem; }
  .buch-wz-seite .buch-hg { left: 34%; width: 66%; }
}
.buch-wz-kopf .buch-wtitel { letter-spacing: .08em; }

/* Bilderstreifen — Ist-Fassung + Entscheidung 14.10.: 16:9, fünf sichtbar, mehr seitlich (Pfeile/Wischen), Unterschrift nur in der Lightbox */
.buch-frei-g-laufband .buch-frei-bahn-laufband { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.buch-frei-g-laufband .buch-frei-bahn-laufband::-webkit-scrollbar { display: none; }
.buch-frei-g-laufband figure { flex: 0 0 calc((100% - 4 * 16px) / 5); margin: 0; scroll-snap-align: start; }
.buch-frei-g-laufband .buch-frei-galeriebild { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.buch-frei-g-laufband figcaption, .buch-frei-g-raster .buch-gal-zoom + figcaption { display: none; }
.buch-gal-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.buch-gal-zoom:focus-visible { outline: 2px solid var(--b-akzent); outline-offset: 3px; }
.buch-gal-rahmen { position: relative; }
.buch-gal-pfeil { position: absolute; top: 50%; z-index: 1; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--b-text) 35%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--b-bg) 80%, transparent); color: var(--b-text); cursor: pointer; }
.buch-gal-pfeil[data-gal-schritt="-1"] { left: max(.5rem, calc((100% - var(--wide-block)) / 2 - 3.2rem)); }
.buch-gal-pfeil[data-gal-schritt="1"] { right: max(.5rem, calc((100% - var(--wide-block)) / 2 - 3.2rem)); }
.buch-gal-fuss .buch-nk { border-color: var(--b-akzent); }
@media (max-width: 720px) { .buch-frei-g-laufband figure { flex-basis: 72%; } .buch-gal-pfeil { display: none; } }

.buch-lightbox { max-width: min(92vw, 80rem); max-height: 92vh; padding: 0; border: 0; background: transparent; color: #f0ece2; overflow: visible; }
.buch-lightbox::backdrop { background: rgb(5 8 11 / .92); }
.buch-lightbox figure { margin: 0; }
.buch-lightbox img { display: block; max-width: min(92vw, 80rem); max-height: 80vh; width: auto; height: auto; margin-inline: auto; touch-action: pan-y; user-select: none; }
.buch-lightbox figcaption { margin-top: .8rem; text-align: center; font: italic 400 1rem/1.5 var(--font-author); }
.buch-lightbox-zahl { margin: .4rem 0 0; text-align: center; font: 500 .75rem var(--font-ui); letter-spacing: .14em; opacity: .7; }
.buch-lightbox-zu, .buch-lightbox-pfeil { position: fixed; width: 44px; height: 44px; border: 1px solid rgb(240 236 226 / .35); border-radius: 50%; background: rgb(5 8 11 / .6); color: inherit; font: 400 1.6rem/1 var(--font-ui); cursor: pointer; }
.buch-lightbox-zu { top: 1rem; right: 1rem; }
.buch-lightbox-pfeil { top: 50%; transform: translateY(-50%); }
.buch-lightbox-pfeil[data-lb="-1"] { left: 1rem; }
.buch-lightbox-pfeil[data-lb="1"] { right: 1rem; }

/* ===== BU4w-2 · Feinabgleich auf die Entwürfe (Maße @1440 px, umgerechnet aus den Entwurfs-Screenshots; --k = 1 px bei 1440, darunter proportional) ===== */
.buch-bt-auf, .buch-frei-t-welt-zwei, .buch-zb, .buch-wb, .buch-wb-leiste, .buch-frei-g-laufband { --k: min(1px, .069444vw); }

@media (min-width: 721px) {
  /* 1 · Bild + Text auf Bild — Entwurf 19: 430 hoch, Text ab x=102, Knopf 306×53 */
  .buch-bt-auf .buch-hg-rahmen { min-height: calc(var(--k) * 430); align-items: flex-start; }
  .buch-bt-auf .buch-hg-innen { width: auto; margin-left: calc(var(--k) * 102); padding: calc(var(--k) * 79) 0 calc(var(--k) * 51); }
  .buch-bt-auf .buch-hg-innen > * { max-width: none; }
  .buch-bt-auf .buch-frei-kicker { font-size: max(11px, calc(var(--k) * 15.5)); line-height: 1.3; letter-spacing: .4em; margin: 0 0 calc(var(--k) * 11); }
  .buch-bt-auf .buch-wtitel { font-size: max(1.7rem, calc(var(--k) * 49)); line-height: 1.14; }
  .buch-bt-auf .buch-frei-fliess { max-width: calc(var(--k) * 645); margin-top: calc(var(--k) * 17); font-size: max(15px, calc(var(--k) * 22.5)); line-height: 1.342; }
  .buch-bt-auf .buch-nk { margin-top: calc(var(--k) * 22); font-size: max(12px, calc(var(--k) * 15)); letter-spacing: .175em; padding: calc(var(--k) * 19) calc(var(--k) * 41); }

  /* 2 · Die Welt zweispaltig — Entwurf 10: Karten 152 hoch, kleine Schrift */
  .buch-wz-seite { min-height: calc(var(--k) * 152); }
  .buch-wz-copy { font-size: max(10.5px, calc(var(--k) * 10.6)); line-height: 1.15; }
  .buch-wz-kopf { padding: calc(var(--k) * 13.6) 0 0 calc(var(--k) * 78); gap: .4rem calc(var(--k) * 23); align-items: center; }
  .buch-wz-kopf .buch-wtitel { font-size: max(17px, calc(var(--k) * 21.5)); line-height: 1.1; }
  .buch-wz-kopf p { font-size: max(11.5px, calc(var(--k) * 13)); line-height: 1.2; }
  .buch-wz-copy { padding: calc(var(--k) * 59) 0 calc(var(--k) * 16) calc(var(--k) * 97); }
  .buch-wz-seite + .buch-wz-seite .buch-wz-copy { padding-left: calc(var(--k) * 46); }
  .buch-wz-name { font-size: max(12px, calc(var(--k) * 14.6)); line-height: 1.2; margin-bottom: calc(var(--k) * 6.4); }
  .buch-wz-copy p { font-size: max(13px, calc(var(--k) * 14)); /* Maxim 21.10.: 14 statt 11 px */ line-height: 1.446; max-width: 20.8em; margin-bottom: calc(var(--k) * 12); }
  .buch-wz-link { font-size: max(12.5px, calc(var(--k) * 13.3)); line-height: 1.15; }
  .buch-wz-seite .buch-hg { left: 42%; width: 58%; }
}

/* 3 · Zitatband — Entwurf 08: Zitat 36 px, zwei Zeilen "…dem letzten" / "Satz nicht…" (nur Desktop; Handy behält die Regeln oben) */
@media (min-width: 721px) {
  .buch-zb blockquote { max-width: calc(var(--k) * 660); text-wrap: wrap; font-size: max(1.15rem, calc(var(--k) * 36)); line-height: 1.083; margin-bottom: calc(var(--k) * 15); }
  .buch-zb cite { font-size: max(.95rem, calc(var(--k) * 19.5)); letter-spacing: .055em; }
}

@media (min-width: 721px) {
  /* 4 · Welt-Banner — Entwurf 16: Hero 321 hoch, Leiste 147, Felder inhaltsbreit mit kurzen Trennstrichen */
  .buch-wb { min-height: calc(var(--k) * 321); display: flex; align-items: flex-start; }
  .buch-wb .buch-hg-innen { width: auto; margin-left: calc(var(--k) * 72.6); padding: calc(var(--k) * 22) 0 calc(var(--k) * 35); }
  .buch-wb .buch-hg-innen > * { max-width: none; }
  .buch-wb .buch-frei-kicker { font-size: max(11px, calc(var(--k) * 12)); margin-bottom: calc(var(--k) * 2.2); }
  .buch-wb .buch-wtitel { font-size: max(1.2rem, calc(var(--k) * 28)); letter-spacing: .05em; line-height: 1.35; }
  .buch-wb .buch-wtitel strong { font-size: 1.2em; line-height: 1.25; }
  .buch-wb .buch-hg-innen .buch-wb-text { max-width: calc(var(--k) * 577); margin-top: calc(var(--k) * 16.4); font-size: max(15px, calc(var(--k) * 19.9)); line-height: 1.392; }
  .buch-wb .buch-nk { margin-top: calc(var(--k) * 24); padding: calc(var(--k) * 13.5) calc(var(--k) * 48); letter-spacing: .14em; }
  .buch-wb-leiste { grid-template-columns: 35.2% minmax(0, 1fr); }
  .buch-wb-leiste-bild { min-height: 0; }
  .buch-wb-kat { display: flex; width: auto; margin: 0; align-self: stretch; }
  .buch-wb-kat li { position: relative; flex: none; }
  .buch-wb-kat li + li { border-left: 0; }
  .buch-wb-kat li + li::before { content: ""; position: absolute; left: 0; top: calc(var(--k) * 51); height: calc(var(--k) * 48); width: 1px; background: color-mix(in srgb, var(--b-text) 22%, transparent); }
  .buch-wb-kat a { padding: calc(var(--k) * 32) calc(var(--k) * 53.8) calc(var(--k) * 30); gap: calc(var(--k) * 12); font-size: max(11px, calc(var(--k) * 12.4)); line-height: 1.5; }
  .buch-wb-sym { width: calc(var(--k) * 36); height: calc(var(--k) * 36); }
}

/* 5 · Bilderstreifen — Entwurf 23: Streifen 1138 breit, Bilder 212 breit (16:9 laut Entscheidung 14.10.), Gesamthöhe ~237 */
@media (min-width: 721px) {
  .buch-frei-g-laufband { --gal-w: calc(var(--k) * 1138); --gal-gap: calc(var(--k) * 19.5); padding: calc(var(--k) * 30) 0 calc(var(--k) * 20.5); }
  .buch-frei-t-galerie.buch-frei-g-laufband .buch-gal-kopf { width: var(--gal-w); margin: 0 auto calc(var(--k) * 3.7); padding-bottom: 0; }
  .buch-frei-g-laufband .buch-frei-kicker { font-size: max(11px, calc(var(--k) * 11)); letter-spacing: .02em; }
  .buch-frei-g-laufband .buch-frei-bahn-laufband { width: var(--gal-w); gap: var(--gal-gap); }
  .buch-frei-g-laufband figure { flex-basis: calc((100% - 4 * var(--gal-gap)) / 5); }
  .buch-gal-pfeil[data-gal-schritt="-1"] { left: max(.5rem, calc((100% - var(--gal-w)) / 2 - 3.2rem)); }
  .buch-gal-pfeil[data-gal-schritt="1"] { right: max(.5rem, calc((100% - var(--gal-w)) / 2 - 3.2rem)); }
  .buch-gal-fuss { width: var(--gal-w); margin-top: calc(var(--k) * 17); }
  .buch-gal-fuss p { font-size: max(11px, calc(var(--k) * 11)); line-height: 1.4; }
  .buch-gal-fuss .buch-nk { padding: calc(var(--k) * 9.6) calc(var(--k) * 10.5); font-size: max(11px, calc(var(--k) * 11)); letter-spacing: .06em; }
}

/* Zwischenbreiten (721–1100 px): Felder der Leiste teilen sich die Fläche, Kartentext bricht natürlich um */
@media (min-width: 721px) and (max-width: 1100px) {
  .buch-wb-kat { min-width: 0; }
  .buch-wb-kat li { flex: 1 1 0; min-width: 0; }
  .buch-wb-kat a { padding-inline: .5rem; }
  .buch-wz-copy p { max-width: none; }
}
/* BU4w-3: Welt-Banner wie Entwurf 16 – Gold-Umrissknopf, Navy-Verlauf links kräftiger (helle Himmel sonst grau) */
.buch-wb .buch-nk { border-color: var(--b-akzent); }
@media (min-width: 721px) {
  .buch-wb.buch-hg-rahmen::before { background: linear-gradient(90deg, color-mix(in srgb, var(--b-bg) 94%, transparent) 0%, color-mix(in srgb, var(--b-bg) 78%, transparent) 38%, color-mix(in srgb, var(--b-bg) 20%, transparent) 60%, transparent 74%); }
}
/* BU4w · Bücher der Saga (Regal) — Entwurf 06: gleich hohe Cover, Stand mit Punkt bzw. Balken, volle Umrissknöpfe */
.buch-saga-regal .buch-saga-cover { height: clamp(14rem, 20.8vw, 18.7rem); box-shadow: 0 10px 28px rgb(0 0 0 / .45); }
.buch-saga-regal .buch-saga-band h3 { font-size: clamp(1.4rem, 1.9vw, 1.75rem); margin-top: .2rem; }
.buch-saga-regal .buch-saga-band-nr { font: 400 .95rem var(--font-author); opacity: .8; margin: 1.1rem 0 .35rem; }
.buch-saga-regal .buch-saga-status { gap: .55rem; font-size: 1rem; }
.buch-saga-regal .buch-punkt { display: inline-block; width: .7rem; height: .7rem; margin-right: 0; border-radius: 50%; background: #7fd4c8; }
.buch-saga-regal .buch-punkt-erschienen { background: #ddb880; }
.buch-saga-regal .buch-saga-fort { margin-top: .55rem; font-size: .8rem; }
.buch-saga-regal .buch-saga-band .buch-nk { width: 100%; justify-content: center; margin-top: auto; padding: 1.05em 1em; border-color: rgb(236 232 222 / .5); color: #ece8de; }
.buch-saga-regal .buch-saga-band > :nth-last-child(2) { margin-bottom: 1.4rem; }
.buch-saga-regal .buch-saga-reihe { row-gap: 3.5rem; }

/* saga-luftschiff · Zyklus II vor dem Luftschiff (Vorlage K1), ohne Bände, Weg zur Chronik (Maxim 21.10.2026, 01:27) */
.saga-luftschiff { position:relative; overflow:hidden; display:grid; align-items:center; min-height:clamp(18rem, 42vw, 34rem); background:#0e1620; }
.saga-luftschiff-bild { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 100%; } /* unten mittig: Finns Füße bleiben im Bild */
.saga-luftschiff-text { position:relative; width:var(--wide-block); margin-inline:auto; display:flex; flex-direction:column; align-items:flex-start; gap:1rem; } /* links im dunklen Teil des Bildes, nicht über dem Himmel */
.saga-luftschiff .start-zyklus-logo span { margin-inline:0; height:clamp(3.5rem, 6vw, 5.5rem); max-width:100%; }
.saga-luftschiff-text p { margin:0; max-width:30rem; color:var(--ivory); font:400 1.0625rem/1.65 var(--font-author); }
.saga-luftschiff .text-link { color:var(--gold); }
@media (max-width: 760px) {
  .saga-luftschiff-text { align-items:center; text-align:center; }
  .saga-luftschiff-bild { opacity:.55; }
}

/* saga-kopf · Kopf der Saga-Seite nach K1: Schloss bei Nacht rechts, Titel links (Maxim 21.10.2026, 01:37) */
.saga-kopf { position:relative; overflow:hidden; display:grid; align-items:center; min-height:clamp(26rem, 52vw, 44rem); background:#070a10; }
.saga-kopf-bild { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:100% 50%; }
.saga-kopf-text { position:relative; width:var(--wide-block); margin-inline:auto; padding-block:clamp(5rem, 9vw, 7rem) clamp(3rem, 6vw, 5rem); }
.saga-kopf h1 { margin:0; max-width:9em; font:400 clamp(2.8rem, 6.4vw, 5.8rem)/1 var(--font-world); letter-spacing:.01em; color:var(--gold); }
.saga-kopf-unter { margin:.8rem 0 0; font:400 clamp(1rem, 1.7vw, 1.4rem) var(--font-world); letter-spacing:.14em; color:color-mix(in srgb, var(--gold) 70%, var(--ivory)); }
.saga-kopf .start-raute { margin:1.4rem 0 1.4rem; width:min(24rem, 80%); }
.saga-kopf-text > p:not(.saga-kopf-unter) { margin:0; color:var(--ivory); font:400 clamp(1.05rem, 1.4vw, 1.2rem)/1.7 var(--font-author); }

/* saga-zitat · Zitatband nach K1 */
.saga-zitat { position:relative; overflow:hidden; display:grid; place-items:center; min-height:clamp(16rem, 30vw, 24rem); background:#0a0d12; }
.saga-zitat-bild { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 72%; } /* Stern unten mittig sichtbar */
.saga-zitat p { position:relative; margin:0 0 clamp(3rem, 6vw, 5rem); text-align:center; font:400 clamp(1rem, 1.9vw, 1.5rem)/1.9 var(--font-world); letter-spacing:.32em; text-transform:uppercase; color:var(--ivory); }
@media (max-width: 760px) {
  .saga-kopf-bild { opacity:.6; object-position:85% 50%; }
}

/* ===== Ladezeit mobil (21.10.2026) · Hero-Motiv der Buchseite: Telefon bekommt die mittlere Größe (buch.php setzt -gross und -klein) ===== */
.buch-kopf-mit-motiv { --buch-hero-bild:var(--buch-hero-bild-gross); }
@media (max-width:760px) { .buch-kopf-mit-motiv { --buch-hero-bild:var(--buch-hero-bild-klein,var(--buch-hero-bild-gross)); } }
/* ===== Ende Ladezeit mobil ===== */

/* ===== Ladezeit Startseite (21.10.2026) · Abschnitte unterhalb des ersten Bildschirms rendern erst kurz vor dem Sichtfeld:
   keine Schriften (Cormorant 167 KB), Bilder und Layout beim Start. `auto` merkt sich die echte Höhe nach dem ersten Zeichnen. ===== */
body.home :is(.start-storybook, .start-paar, .gw-teaser, .mm-beta-banner, .hueter, .article-after) { content-visibility:auto; contain-intrinsic-size:auto 700px; }
/* ===== Ende Ladezeit Startseite ===== */


/* start-storybook · ganzer Bereich klickbar (Maxim 21.10.2026, 02:10): der Link spannt sich über den Abschnitt; Knöpfe im Text (Aussprache) bleiben bedienbar */
.start-storybook .text-link::before { content:""; position:absolute; inset:0; z-index:1; }
.start-storybook-text button, .start-storybook-text [role="button"] { position:relative; z-index:2; }
.start-storybook:hover .text-link { text-decoration:underline; text-decoration-color:var(--gold-bright); }

/* Mega-Menü: Stand unter dem Cover darf umbrechen („Angekündigt · Sommer 2027“, „36 % · in Rohfassung“; Maxim 21.10.2026, 02:19) */
.site-nav .nav-liste > li.hat-mega .cover-zustand { white-space: nowrap; min-height: 2lh; } /* immer zwei Zeilen hoch: Cover bleiben gleich groß und auf einer Linie (Maxim 02:31) */
.site-nav .nav-liste > li.hat-mega .cover-zustand-zeile { white-space: nowrap; } /* Fortschritt bleibt eine Zeile */

/* The Echoes of Neverland: Kopfbild unten mittig verankert, damit Finns Füße im Bild bleiben (Maxim 21.10.2026, 02:20) */
.buch-kopf--echoes-of-neverland.buch-kopf-mit-motiv::before { background-position:50% 100%; }

/* Mega-Menü: alle Cover im Format von Band I, gleich groß (Maxim 21.10.2026, 02:31); Platzhalter werden beschnitten statt verzerrt */
.site-nav .nav-liste > li.hat-mega .cover img { object-fit: cover; }

/* Stapel: erstes Zuklappen beim Start ohne Übergang (stapel.js setzt .startet für zwei Frames) */
.start-stapel.startet .buch-quer-band, .start-stapel.startet .buch-quer-nr, .start-stapel.startet .buch-quer-titel, .start-stapel.startet .buch-quer-stand, .start-stapel.startet .buch-like { transition:none !important; }

/* Saga-Seite: Depesche bleibt in der Welt – Nacht mit Sternenkarte (Bild des Zitatbands) statt flacher Fläche, Begleittext in Buchschrift (Kritik 21.10.2026, P2). Nur hier, andere Seiten unverändert. */
main:has(.mm-saga):not(:has(.domain-mit-saga)) .hueter { position:relative; isolation:isolate; overflow:hidden; background:var(--night); border-top-color:rgba(221, 184, 128, .18); }
main:has(.mm-saga):not(:has(.domain-mit-saga)) .hueter::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.42;
  background:linear-gradient(180deg, var(--night) 0%, transparent 30%, transparent 70%, var(--night) 100%), url("bilder/saga-zitat-1920.webp") 50% 40% / cover no-repeat; }
main:has(.mm-saga):not(:has(.domain-mit-saga)) .hueter-text { font:400 1.125rem/1.65 var(--font-author); color:var(--ivory-dim); }

/* Tap-Ziel ≥ 44 px ohne sichtbare Änderung (Kritik 21.10.2026, P2): Aussprache-Knopf 20 → 44 px */
.na-audio::after { content:""; position:absolute; inset:-12px; }
@media (max-width: 760px) { main:has(.mm-saga):not(:has(.domain-mit-saga)) .hueter::before { background-position:0 0, 8% 40%; } } /* Handy: Astrolabium statt Sternlinie hinter dem Formular */

/* polish Saga-Seite (21.10.2026): weiche Übergänge statt harter Bildkanten; Luft über/unter dem Luftschiff-Text */
.saga-kopf::after, .saga-luftschiff::after { content:""; position:absolute; inset:0; pointer-events:none; }
.saga-kopf::after { background:linear-gradient(180deg, transparent 72%, var(--night) 100%); }
.saga-luftschiff::after { background:linear-gradient(180deg, var(--night) 0%, transparent 14%, transparent 86%, rgba(10, 13, 18, .9) 100%); }
.saga-kopf-text, .saga-luftschiff-text { z-index:1; }
.saga-luftschiff-text { padding-block:clamp(3.5rem, 7vw, 5.5rem); }

/* adapt Saga-Seite (21.10.2026): bis 900 px Bild als eigenes Band, Text darunter auf Nacht – Schloss, Finn und Luftschiff bleiben sichtbar statt hinter Text */
@media (max-width: 900px) {
  .saga-kopf, .saga-luftschiff { display:block; min-height:0; }
  .saga-kopf-bild, .saga-luftschiff-bild { position:relative; display:block; height:auto; opacity:1; aspect-ratio:16 / 9;
    -webkit-mask-image:linear-gradient(180deg, #000 62%, transparent 100%); mask-image:linear-gradient(180deg, #000 62%, transparent 100%); }
  .saga-kopf-bild { object-position:74% 50%; }
  .saga-luftschiff-bild { object-position:62% 50%; }
  .saga-kopf::after, .saga-luftschiff::after { display:none; }
  .saga-kopf-text { margin-top:-3rem; padding-block:0 clamp(3rem, 8vw, 4rem); }
  .saga-luftschiff-text { margin-top:-2.5rem; padding-block:0 clamp(3rem, 8vw, 4rem); align-items:flex-start; text-align:left; }
}
@media (max-width: 600px) {
  .saga-kopf-bild, .saga-luftschiff-bild { aspect-ratio:4 / 3; }
}
/* breite Schirme: Luftschiff-Abschnitt wächst mit, damit das Luftschiff im Bild bleibt */
@media (min-width: 901px) { .saga-luftschiff { min-height:min(42vw, 62rem); } }
@media (max-width: 600px) { .saga-kopf-bild { object-position:84% 50%; } .saga-luftschiff-bild { object-position:64% 50%; } } /* Mond und Luftschiffspitze im Ausschnitt */
@media (max-width: 900px) and (orientation: landscape) { .saga-kopf-bild, .saga-luftschiff-bild { aspect-ratio:21 / 9; } } /* Handy quer: Bildband flacher */

/* Saga-Seite nach Ogilvy (21.10.2026): Versprechen als Unterzeile in Buchschrift statt Versalien; Bericht-Link; zwei Stimmen im Wechsel */
.saga-kopf-unter { font:italic 400 clamp(1.15rem, 1.9vw, 1.55rem)/1.35 var(--font-author); letter-spacing:0; color:var(--ivory); max-width:24em; }
.saga-kopf-bericht { margin-top:1.4rem; color:var(--gold); line-height:1.6; text-underline-offset:.35em; }
.start-stimmen-wechsel { display:grid; }
.start-stimmen-wechsel > .start-stimme { grid-area:1 / 1; animation:stimme-wechsel 16s ease-in-out infinite; }
.start-stimmen-wechsel > .start-stimme:nth-child(2) { animation-delay:-8s; }
@keyframes stimme-wechsel { 0%, 44% { opacity:1; visibility:visible; } 50%, 94% { opacity:0; visibility:hidden; } 100% { opacity:1; visibility:visible; } }
@media (prefers-reduced-motion: reduce) { .start-stimmen-wechsel > .start-stimme { animation:none; } .start-stimmen-wechsel > .start-stimme:nth-child(2) { display:none; } }

/* Zwischen den Welten (Entwurf A, 21.10.2026) · Aufbau und Farben nach der Folklore-Vorlage (Maxim 12:50): Kopf, Teaser-Band, Regal, Abschluss-Band; leise, gedämpft, wenige Linien */
.mm-zdw { background:#0b1219; color:#c9c2b4; overflow-x:clip; }
/* läuft unter die Navigation wie der Kopf der Startseite (Maxim 21.10.2026, 13:14) */
.zdw-kopf { position:relative; z-index:1; overflow:hidden; display:grid; align-items:center; margin-top:calc(-1 * var(--kopf-hoehe)); padding-top:var(--kopf-hoehe); min-height:calc(clamp(26rem, 40vw, 40rem) + var(--kopf-hoehe)); box-sizing:border-box; background:#05060d; }
.zdw-kopf-bild { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:62% 78%; }
.zdw-kopf::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg, rgba(5,6,13,.6) 0%, rgba(5,6,13,.2) 45%, transparent 65%), linear-gradient(180deg, transparent 80%, #0b1219 100%); }
/* eine linke Kante mit Kopfzeile und Fuß: --shell */
.zdw-kopf-text { position:relative; z-index:1; width:var(--shell); margin-inline:auto; padding-block:clamp(4rem, 8vw, 6rem); }
.zdw-kennzeile { margin:0 0 1rem; font:500 .8rem var(--font-ui); letter-spacing:.3em; color:rgba(212,180,131,.75); }
.zdw-kopf h1 { margin:0; max-width:16em; font:400 clamp(2rem, 3.2vw, 3rem)/1.2 var(--font-author); color:rgba(217,201,168,.9); text-wrap:balance; }
/* Teaser-Band: ein Satz, mittig, zwischen Kopf und Regal */
.zdw-teaser { position:relative; z-index:2; width:min(40rem, calc(100vw - 3rem)); margin:0 auto; padding:clamp(3rem, 6vw, 5rem) 0 clamp(1rem, 2vw, 1.5rem); text-align:center; }
.zdw-teaser .zdw-raute { margin:0 auto 1.4rem; }
.zdw-einleitung { margin:0; font:italic 400 clamp(1.05rem, 1.4vw, 1.2rem)/1.7 var(--font-author); color:#c9c2b4; }
/* Regal: je Reihe ein Brett. zdw-regal-1536 (Folklore-Farben, 12:48): Bücher stehen bei 630 von 690 px, Vorderkante bis 676; Grafik 124 % der Regalbreite (Höhe .557 W, Standlinie .5086 W).
   Fünf Cover je Reihe, Abstand .04 W: Cover .168 W breit, .252 W hoch. */
.zdw-regal { --w:var(--shell); position:relative; isolation:isolate; width:var(--w); margin:0 auto; padding-bottom:3rem; }
/* Bretter liegen alle hinter allen Karten (Stapel im Regal), sonst überdeckt die zweite Wand die Links der ersten Reihe */
.zdw-brettreihe { position:relative; padding-top:calc(var(--w) * .04); }
.zdw-brettreihe + .zdw-brettreihe { margin-top:1.5rem; }
.zdw-brettreihe::before { content:""; position:absolute; z-index:-1; left:calc(var(--w) * -.12); right:calc(var(--w) * -.12); top:calc(var(--w) * (.04 + .252 - .5086)); height:calc(var(--w) * .557); background:var(--regal) center / 100% 100% no-repeat; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(180deg, transparent, #000 28%); -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(180deg, transparent, #000 28%); mask-composite:intersect; }
.zdw-reihe { list-style:none; margin:0; padding:0; display:flex; justify-content:center; gap:calc(var(--w) * .04); }
.zdw-karte { position:relative; display:flex; flex-direction:column; width:calc(var(--w) * .168); }
/* Link im Titel über die ganze Karte gespannt */
.zdw-karten-link { color:inherit; text-decoration:none; }
.zdw-karten-link::after { content:""; position:absolute; inset:0; z-index:2; }
.zdw-karten-link:focus-visible { outline:none; }
.zdw-karte:has(.zdw-karten-link:focus-visible) { outline:2px solid #ddb880; outline-offset:6px; border-radius:2px; }
/* Herz wie im Saga-Band (.buch-quer-band, Maxim 20.10.2026): goldener Umriss, nach dem Klick gefüllt, „+n“ daneben; über dem Karten-Link, damit die Stimme klickbar bleibt */
.zdw-karte .buch-like { --kb-herz:var(--ivory-dim); position:relative; z-index:3; align-self:center; justify-content:center; margin:.5rem 0 0; } /* mittig (Maxim 14:25) */
.zdw-karte .buch-like .wpulike { display:flex; align-items:center; justify-content:center; margin:0; padding:0; }
.zdw-karte .buch-like .wp_ulike_general_class { display:flex; align-items:center; gap:.1rem; padding:0; border:0; border-radius:0; box-shadow:none; background:none; }
.zdw-karte .buch-like .wp_ulike_btn { width:2.75rem; height:2.75rem; padding:0; border:0; background:none; box-shadow:none; } /* 44 px Tippfläche */
.zdw-karte .buch-like .count-box { position:static; width:auto; height:auto; overflow:visible; clip:auto; padding:0; margin:0 0 0 -.6rem; font-size:0; } /* dicht am Herz (Maxim 14:27) */
.zdw-karte .buch-like .count-box::after { content:attr(data-ulike-counter-value); color:var(--gold-bright); font:500 .9rem/1 var(--font-author); font-variant-numeric:lining-nums tabular-nums; letter-spacing:.02em; }
.zdw-karte .buch-like .count-box[data-ulike-counter-value="0"]::after { content:none; }
.zdw-karte .wpulike-heart .wp_ulike_put_image { position:relative; cursor:pointer; }
.zdw-karte .wpulike-heart .wp_ulike_put_image:after { content:""; position:absolute; inset:.75rem; background:var(--gold); filter:none; -webkit-mask:var(--herz-umriss) center/contain no-repeat; mask:var(--herz-umriss) center/contain no-repeat; transition:opacity .3s var(--ease); }
.zdw-karte .wpulike-heart .wp_ulike_put_image.wp_ulike_btn_is_active:after { -webkit-mask-image:var(--herz-voll); mask-image:var(--herz-voll); filter:none; } /* abgestimmt: gold gefüllt, nicht der rote Plugin-Filter (Maxim 17:25) */
.zdw-karte .buch-like:hover .wp_ulike_put_image:after { opacity:.8; }
.zdw-regal { --herz-umriss:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.3s-7.3-4.4-9.3-9A5 5 0 0 1 12 6.1a5 5 0 0 1 9.3 5.2c-2 4.6-9.3 9-9.3 9z' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E");
  --herz-voll:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.3s-7.3-4.4-9.3-9A5 5 0 0 1 12 6.1a5 5 0 0 1 9.3 5.2c-2 4.6-9.3 9-9.3 9z' fill='%23000' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.zdw-karte .buch-like .buch-like-hinweis, .zdw-karte .buch-like .buch-like-meldung { top:calc(100% + .35rem); bottom:auto; left:50%; width:14rem; max-width:none; text-align:center; transform:translate(-50%, -4px); }
.zdw-karte .buch-like:has(:focus-visible) .buch-like-hinweis, .zdw-karte .buch-like.zeigt .buch-like-hinweis, .zdw-karte .buch-like.hat-meldung .buch-like-meldung { transform:translate(-50%, 0); }
@media (hover:hover) { .zdw-karte .buch-like:hover .buch-like-hinweis { transform:translate(-50%, 0); } }
.zdw-nur-vorlesen { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.zdw-preis { margin:.5rem 0 0; font:500 1.05rem/1.3 var(--font-author); color:#e6d5b0; }
.zdw-erschienen .zdw-cover img { filter:saturate(.6) brightness(.78); }
.zdw-cover { position:relative; display:block; margin-bottom:calc(var(--w) * .0371 + 1.6rem); }
.zdw-cover img, .zdw-cover-leer { display:block; width:100%; height:auto; aspect-ratio:2 / 3; object-fit:cover; border-radius:1px 3px 3px 1px; box-shadow:6px -2px 22px rgba(0,0,0,.6), 0 3px 4px rgba(0,0,0,.8); filter:saturate(.72) brightness(.9); transition:transform .35s cubic-bezier(.16, 1, .3, 1), filter .35s ease-out; }
.zdw-cover-leer { background:#141a26; }
.zdw-cover::before { content:""; position:absolute; z-index:1; inset:0 auto 0 0; width:8%; pointer-events:none; background:linear-gradient(90deg, rgba(0,0,0,.5), rgba(255,255,255,.1) 55%, transparent); }
.zdw-karte:hover .zdw-cover img, .zdw-karte:focus-within .zdw-cover img { transform:translateY(-6px); filter:none; }
.zdw-titel { margin:0; font:500 clamp(1rem, 1.2vw, 1.15rem)/1.3 var(--font-author); color:#ddd7ca; text-wrap:pretty; }
.zdw-untertitel { display:block; margin-top:.2rem; font-size:.86em; font-weight:400; color:#c9c2b4; }
.zdw-genre { margin:.35rem 0 0; font:italic 400 .9rem/1.4 var(--font-author); color:#8f897b; }
.zdw-stand { margin:auto 0 0; padding-top:.75rem; font:400 .875rem/1.4 var(--font-ui); color:#b5ae9f; }
.zdw-balken { display:block; height:4px; margin-top:.5rem; background:rgba(212,180,131,.24); border-radius:2px; overflow:hidden; }
.zdw-balken i { display:block; height:100%; background:rgba(212,180,131,.8); }
/* Balken füllen sich einmal, sobald der Balken selbst sichtbar ist, gestaffelt je Spalte (delight 21.10.2026, Maxim 13:42); ohne JS: voll */
.zdw-wartet .zdw-balken i { transform:scaleX(0); transform-origin:left center; }
.zdw-wartet .zdw-balken.zdw-voll i { transform:scaleX(1); transition:transform 1.6s cubic-bezier(.16, 1, .3, 1) calc(var(--i, 0) * 120ms + 200ms); }
/* Abschluss: Bücherband (zdw-band, 1536 × 520), Text in der freien Mitte (Bildanteil 35–62 %) */
.zdw-abschluss { position:relative; margin-top:2rem; }
.zdw-abschluss-bild { display:block; width:100%; height:auto; -webkit-mask-image:linear-gradient(180deg, transparent, #000 18%, #000 85%, transparent); mask-image:linear-gradient(180deg, transparent, #000 18%, #000 85%, transparent); }
.zdw-abschluss-text { position:absolute; left:35%; width:27%; top:22%; text-align:center; }
.zdw-abschluss-text .zdw-raute { margin:0 auto 1rem; }
.zdw-abschluss-text .zdw-abschluss-unter { margin-top:.7rem; font:italic 400 clamp(.95rem, 1.1vw, 1.05rem)/1.6 var(--font-author); color:#a9a293; }
.zdw-abschluss-unter a { color:#d9c9a8; text-decoration:underline; text-decoration-color:rgba(212,180,131,.5); text-underline-offset:.2em; }
.zdw-abschluss-text p { margin:0; font:300 clamp(1.05rem, 1.6vw, 1.5rem)/1.4 var(--font-author); color:#d9c9a8; text-wrap:balance; }
@media (prefers-reduced-motion: reduce) { .zdw-cover img { transition:none; } .zdw-karte:hover .zdw-cover img { transform:none; } }
/* Ab drei Spalten (unter 1240 px): ein gemeinsames Raster, jedes Cover trägt ein eigenes Stück Brett (zdw-brett) */
/* großer Schirm: Regal darf breiter als die Kopfzeile werden, damit die Cover wachsen */
@media (min-width: 1700px) { .zdw-regal { --w:min(96rem, calc(100vw - 6rem)); } }
@media (max-width: 1240px) {
  .zdw-regal { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:2.2rem 1.5rem; }
  .zdw-brettreihe, .zdw-reihe { display:contents; }
  .zdw-brettreihe::before { display:none; }
  .zdw-karte { width:auto; }
  .zdw-cover { margin-bottom:1rem; }
  .zdw-cover::before { bottom:16px; }
  .zdw-cover::after { content:""; display:block; height:16px; margin-inline:-.9rem; background:var(--brett) center / cover no-repeat; }
}
@media (max-width: 900px) {
  .zdw-kopf { display:block; min-height:0; padding-top:0; background:transparent; }
  .zdw-kopf-bild { position:relative; display:block; height:auto; aspect-ratio:4 / 3; object-position:80% 60%; -webkit-mask-image:linear-gradient(180deg, #000 62%, transparent 100%); mask-image:linear-gradient(180deg, #000 62%, transparent 100%); }
  .zdw-kopf::after { display:none; }
  .zdw-kopf-text { margin-top:-2.5rem; padding-block:0 2.5rem; }
}
@media (max-width: 900px) {
  .zdw-abschluss { display:flex; flex-direction:column-reverse; }
  .zdw-abschluss-text { position:static; width:min(30rem, calc(100vw - 3rem)); margin:0 auto 1.5rem; }
  .zdw-abschluss-bild { aspect-ratio:2 / 1; object-fit:cover; object-position:50% 60%; }
}
@media (max-width: 600px) {
  .zdw-regal { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* Website-Audit 21.10.2026: Absätze nie mit einem einzelnen Wort in der letzten Zeile enden lassen */
p, li, figcaption, blockquote { text-wrap: pretty; }
/* Website-Audit 21.10.2026: Podcast-Folgen setzen kleiner, darum dort die Lesespalte auf etwa 75 Zeichen begrenzen */
.post-template-podcast-folge .entry-content > :is(p, h2, h3, ul, ol) { width: min(var(--reading), 62ch); }

/* stapel-handy · Maxim 21.10.2026: auf dem iPhone fächern die Bände untereinander auf (Cover links, Titel und Stand rechts),
   nicht als Wischreihe. Geschlossen bleibt der Stapel oben; stapel.js schiebt die Bände in x und y und regelt die Höhe. */
@media (max-width: 760px) {
  .start-saga .buch-quer { flex-direction:column; align-items:stretch; gap:1.5rem; margin-inline:0; margin-bottom:0; padding:0;
    overflow:visible; scroll-snap-type:none; transition:transform .5s var(--ease), height 1s cubic-bezier(.65, 0, .35, 1); }
  .start-stapel.ist-zu .buch-quer { overflow:visible; }
  .start-saga .buch-quer-band { flex:0 0 auto; width:100%; max-width:none; display:block; text-align:left; }
  .start-saga .buch-quer-link { display:grid; grid-template-columns:6.5rem minmax(0, 1fr); grid-template-rows:1fr auto auto auto 1fr; column-gap:1.25rem; align-items:start; }
  .start-saga .buch-quer-buch { grid-row:1 / -1; height:10.5rem; justify-content:center; }
  .start-saga .buch-quer-nr { grid-row:2; } .start-saga .buch-quer-titel { grid-row:3; max-width:none; margin-inline:0; } .start-saga .buch-quer-stand { grid-row:4; }
  .start-saga .buch-quer-band .buch-like { position:absolute; left:calc(6.5rem + 1.25rem - .75rem); bottom:-.25rem; margin:0; }
  .start-saga .start-baende-punkte { display:none; }
  .start-stapel { --stapel-fuss:10.5rem; --stapel-gross:1.7; } /* geschlossen größer */
  .start-stapel-knopf span { top:calc(var(--stapel-oben) + var(--stapel-fuss) * var(--stapel-gross) + 1.75rem); transform:translateX(-50%); } /* Zeile fest unter dem Stapelfuß */
}
/* Aufkleber weicht aus (Maxim 13:35): ruhend sitzt er weiter im Buch, beim Hovern über den Stapel gleitet er deutlich nach oben links */
.start-siegel { transition:translate .55s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1), filter .9s cubic-bezier(.22, 1, .36, 1), scale 1s cubic-bezier(.65, 0, .35, 1); }
.start-stapel.ist-zu.weicht .start-siegel { translate:-38% -42%; }
@media (prefers-reduced-motion: reduce) { .start-siegel { transition:none; } }

/* Saga-Kopf mit Poster 4 (Maxim 21.10.2026, 15:12): Bild 16:9 vollflächig; Logo und Zeilen unten links auf Alex' dunklem Umhang, nie über den Gesichtern */
.saga-kopf { align-items:end; min-height:min(56.25vw, calc(100svh - var(--kopf-hoehe, 5rem)), 60rem); }
.saga-kopf-bild { object-position:50% 30%; }
.saga-kopf::after { background:linear-gradient(90deg, rgba(7,7,6,.72) 0%, rgba(7,7,6,.35) 34%, transparent 55%), linear-gradient(180deg, transparent 55%, var(--night) 100%); }
.saga-kopf-text { padding-block:0 clamp(2.5rem, 5vw, 4.5rem); max-width:var(--wide-block); }
.saga-kopf-logo { margin:0; line-height:0; }
.saga-kopf-logo span { display:block; width:clamp(15rem, 30vw, 30rem); aspect-ratio:560 / 184; background:var(--ivory);
  -webkit-mask:var(--logo) no-repeat center / contain; mask:var(--logo) no-repeat center / contain; filter:drop-shadow(0 2px 12px rgba(0,0,0,.6)); }
.saga-kopf-text > p { text-shadow:0 1px 10px rgba(0,0,0,.75); }
.saga-kopf-unter { margin-top:1rem; }
@media (max-width: 900px) {
  .saga-kopf-bild { object-position:52% 30%; }
  .saga-kopf-text { margin-top:-2.5rem; }
  .saga-kopf-logo span { width:min(22rem, 78vw); }
}
@media (max-width: 600px) { .saga-kopf-bild { object-position:52% 30%; } } /* beide Figuren im 4:3-Ausschnitt */
/* Poster-Kopf: Logo kleiner und mittig auf Alex' Umhang (Maxim 21.10.2026, 15:22) */
@media (min-width: 901px) {
  .saga-kopf-logo span { width:clamp(12rem, 21vw, 22rem); }
  .saga-kopf-text { padding-left:clamp(1rem, 4.5vw, 5rem); }
}

/* echoesofneverland.com: Saga-Seite oben, deshalb ohne den eigenen Greif-Kopf (Maxim 21.10.2026, 15:33) */
.domain-mit-saga .domain-nacht { display:none; }
.domain-mit-saga .domain-einladung h2 { color: var(--ink); font-size: clamp(2.75rem, 5.4vw, 4.5rem); line-height: 1.04; letter-spacing: -.02em; } /* wie vorher die H1 */

/* echoesofneverland.com: Poster-Kopf läuft unter die transparente Navigation (Maxim 21.10.2026, 15:42) */
main:has(.domain-mit-saga) .saga-kopf { margin-top:calc(-1 * var(--kopf-hoehe)); }
@media (min-width: 901px) { main:has(.domain-mit-saga) .saga-kopf { min-height:min(56.25vw, 100svh, 64rem); } }

/* Buchseiten: „Die Bücher der Saga“ als Regal von „Zwischen den Welten“ (Maxim 21.10.2026, 16:40) */
.buch-saga-mini { padding-block:clamp(3.5rem, 7vw, 6rem) 0; background:var(--night); color:var(--ivory); overflow-x:clip; } /* gemaltes Regal ragt seitlich hinaus */
.buch-saga-mini-kopf { position:relative; z-index:2; width:var(--shell); margin:0 auto clamp(1.5rem, 3vw, 2.5rem); display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.buch-saga-mini-kopf .buch-abschnitt-titel { margin:0; color:var(--ivory); }
.buch-saga-mini-kopf .text-link { color:var(--gold); }

/* Blog-Übersicht – finale Fassung (Maxim, 27.09.2026: „So nehmen wir es. Das ist unsere finale Blog-Seite.“).
   Markup: inc/blog.php (Quelle block-theme/quellen/blog.php), Bewegung: assets/blog.js (Quelle blog.js hier daneben).
   Aufbau dieser Datei: 1 Grundlagen der Blogbox (Fassung 26.09.), 2 Kopf, Podcast-Streifen und Bewegung (aus der
   Vorschau „pro“), 3 Mitte, Nachladen, Schloss, zwei Welten und Parallaxe (aus „pro-v2“). Die Klassennamen pro-/pro2-
   stammen aus den Vorschauen und bleiben, damit nichts bricht. Vorschauen und Vorgänger: archiv/. */

/* ── 1 Grundlagen ──────────────────────────────────────────────────────────────────────────────────────────── */
.blog-kopf { padding: clamp(3rem, 8vw, 6rem) 0 clamp(2.25rem, 4vw, 3.5rem); background: var(--night); }
/* Seitenüberschrift ist der Rubrikname (Maxim, 26.09.2026, Variante B): „Geschichten hinter den Geschichten“.
   Schrift, Größe und Breite der H1 kommen seit 05.10.2026 aus .mm-header h1 (grundlage.css), wie in jedem Kopf. */

/* Gemeinsam: die Blogbox */
.blog-neu .related, .blog-zeile {
  position: relative;
  width: min(72rem, var(--shell));
  margin: 0 auto;
  display: grid;
  background: var(--surface);
  color: var(--ivory);
}
.blog-neu .related-copy, .blog-zeile-text {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  min-height: 0;
  padding: clamp(2rem, 5vw, 5rem);
}
.blog-meta { margin: 0 0 1rem; color: var(--gold-bright); font: 500 13px/1.5 var(--font-ui); letter-spacing: .08em; }
.blog-neu .related-copy p, .blog-auszug {
  max-width: 40ch; margin: 0 0 1.6rem; color: var(--ivory-dim); font:var(--type-ui);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.blog-neu .related-copy h2 a, .blog-zeile h3 a { color: inherit; text-decoration: none; }
/* Die ganze Karte ist der Link. z-index: beim Zeigen zoomt das Bild (transform) und läge sonst bei Karten mit Bild rechts
   (order: 2) über der Klickfläche – das Bild war dann nicht klickbar (Maxim 27.09.) */
.blog-neu .related-copy h2 a::after, .blog-zeile h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.blog-neu .related-copy h2 a:focus-visible, .blog-zeile h3 a:focus-visible { outline: none; }
.blog-neu .related:has(h2 a:focus-visible), .blog-zeile:has(h3 a:focus-visible) { outline: 2px solid var(--gold-bright); outline-offset: 4px; }
.blog-neu .related:hover .text-link, .blog-zeile:hover .text-link { text-decoration-color: var(--gold-bright); }
.blog-neu .related-media img, .blog-zeile-bild img { transition: transform .9s var(--ease); }
.blog-neu .related:hover .related-media img, .blog-zeile:hover .blog-zeile-bild img { transform: scale(1.025); }

/* Die neueste Geschichte: größer, Cover im echten Format (Plakate sind hochformatig) */
.blog-neu { padding: 0 0 clamp(4rem, 8vw, 6.5rem); background: var(--night); }
.blog-neu .related { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: stretch; }
.blog-neu .related-media { min-height: 0; overflow: hidden; }
.blog-neu .related-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.blog-neu .related-copy h2 {
  max-width: 12ch; margin: 0 0 1.25rem; color: var(--ivory);
  font: 400 clamp(2.6rem, 4.8vw, 4.5rem)/1.02 var(--font-author); letter-spacing: -.02em; text-wrap: balance;
}

/* Weitere Geschichten: Blogboxen untereinander, Bild quadratisch, am Desktop abwechselnd links und rechts */
.blog-liste {
  display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3rem);
  padding: 0 0 clamp(5rem, 10vw, 8rem);
  background: var(--night);
}
.blog-liste > h2 {
  width: min(72rem, var(--shell));
  margin: 0 auto;
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: var(--haarlinie);
  color: var(--ivory);
  font: 400 clamp(1.8rem, 3vw, 2.6rem)/1.1 var(--font-author);
  letter-spacing: -.01em;
}
.blog-zeile { --bild: calc(min(72rem, var(--shell)) * .4); grid-template-columns: var(--bild) minmax(0, 1fr); align-items: stretch; }
/* Bild exakt quadratisch in seiner Spalte, die Textfläche genau so hoch – nichts ragt über den Kartenrand */
.blog-zeile-bild { align-self: start; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; }
.blog-zeile-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-zeile-text { height: var(--bild); overflow: hidden; padding: clamp(2rem, 4vw, 3.5rem); }
.blog-zeile h3 {
  max-width: 18ch; margin: 0 0 1rem; color: var(--ivory);
  font: 400 clamp(1.65rem, 2.4vw, 2.1rem)/1.08 var(--font-author); letter-spacing: -.01em; text-wrap: balance; /* Rolle subhead (typeset 27.09.) */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
.blog-zeile.blog-klein h3 { font-size: 1.5rem; } /* kleine Karte: überall 24 px (typeset 27.09.) */
@media (min-width: 761px) {
  .blog-zeile:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) var(--bild); }
  .blog-zeile:nth-of-type(even) .blog-zeile-bild { order: 2; }
}
.blog-leer { width: min(72rem, var(--shell)); margin: 0 auto; }
.blog-leer { color: var(--ivory-dim); font: 400 18px/1.6 var(--font-ui); }

/* Wie im Karussell: die Blogbox in Blickmitte ist voll, die übrigen treten beim Scrollen etwas zurück */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .blog-zeile { animation: blogbox-fokus linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    @keyframes blogbox-fokus {
      0% { opacity: .78; filter: saturate(.5); } /* nicht blasser: Schrift bleibt über 4,5:1 lesbar */
      30%, 70% { opacity: 1; filter: none; }
      100% { opacity: .78; filter: saturate(.5); }
    }
  }
}

@media (max-width: 760px) {
  .blog-neu .related, .blog-zeile { grid-template-columns: 1fr; }
  .blog-neu .related-media { aspect-ratio: 4 / 5; }
  .blog-neu .related-copy, .blog-zeile-text { min-height: 0; height: auto; padding: 1.75rem 1.25rem 2.25rem; }
  .blog-neu .related-copy h2 { font-size: clamp(2.3rem, 10vw, 3rem); }
}
@media (prefers-reduced-motion: reduce) {
  .blog-neu .related-media img, .blog-zeile-bild img { transition: none; }
}

/* ── 2 Kopf, Podcast-Streifen, Bewegung ─────────────────────────────────────────────────────────────────── */
.pro-marke { margin: 0 0 1rem; color: var(--gold-bright); font: 600 12px/1.4 var(--font-ui); letter-spacing: .22em; text-transform: uppercase; }

/* 1 Kopf: Bleistiftwelt als Radierung, Überschrift groß unten links, Zählzeile unten rechts */
.pro-kopf {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: 0; /* Telefon: so hoch, wie die Überschrift braucht (Maxim 26.09.: „auf dem iPhone viel zu groß“) */
  margin-top: calc(-1 * var(--kopf-hoehe)); /* die Radierung läuft unter dem Glas des Kopfs weiter */
  padding: calc(var(--kopf-hoehe) + 2.5rem) 0 clamp(2rem, 6vw, 4.5rem);
  background: var(--night);
}
.pro-kopf-text { width: min(72rem, var(--shell)); margin: 0 auto; }
.pro-kopf h1 { margin: 0; }
.pro-zahl { margin: 1.5rem 0 0; padding-left: .9rem; border-left: 1px solid var(--gold); color: var(--gold-bright); font: 500 13px/1.6 var(--font-ui); letter-spacing: .08em; }
@media (min-width: 761px) {
  .pro-kopf { min-height: min(92svh, 58rem); }
  .pro-kopf-text { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 2rem; }
  .pro-kopf-text .pro-marke { grid-column: 1 / -1; }
  .pro-zahl { margin: 0 0 .6rem; }
  /* Reihenseite: flacher, so hoch wie der Kopf der Detailseite (Maxim 27.09.: „eher so wie auf der Detailseite“) */
  .pro2-kopf-flach { min-height: 34rem; }
}
/* Quer gehaltenes Telefon (Maxim, 28.09.2026: „quer begrenzen“): Kopf nur so hoch wie sein Inhalt, Titel an der
   Bildschirmhöhe gemessen. Hochkant und Desktop unberührt. */
@media (orientation: landscape) and (max-height: 500px) {
  .pro-kopf, .pro2-kopf-flach { min-height: 0; padding-top: calc(var(--kopf-hoehe) + 1rem); }
}

/* 4 Podcast-Reihe: am Telefon und Tablet eine Wischreihe, am Desktop Streifen – die neueste Folge aufgeklappt,
   die anderen öffnen sich beim Überfahren oder mit der Tastatur */
.pro-reihe { padding: 0 0 clamp(5rem, 10vw, 8rem); background: var(--night); }
.pro-reihe-kopf {
  width: min(72rem, var(--shell)); margin: 0 auto clamp(1.75rem, 3vw, 2.5rem);
  padding-top: clamp(1.75rem, 3vw, 2.5rem); border-top: var(--haarlinie);
  display: grid; gap: .25rem 2rem;
}
.pro-reihe h2 { margin: 0; color: var(--ivory); font: 400 clamp(1.8rem, 3vw, 2.6rem)/1.05 var(--font-author); letter-spacing: -.02em; text-wrap: balance; } /* Rolle title wie „Weitere Geschichten“ */
.pro-reihe-info { margin: .5rem 0 0; color: var(--ivory-dim); font: 400 13px/1.5 var(--font-ui); }
.pro-streifen {
  display: flex; gap: 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  padding: .25rem calc((100% - var(--shell)) / 2) .5rem;
  scroll-padding-inline: calc((100% - var(--shell)) / 2);
}
.pro-folge { position: relative; flex: 0 0 min(78vw, 22rem); scroll-snap-align: start; background: var(--surface); color: var(--ivory); }
.pro-folge-bild { aspect-ratio: 1 / 1; overflow: hidden; }
.pro-folge-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pro-code { display: none; }
.pro-folge-text { padding: 1.5rem 1.25rem 1.9rem; }
.pro-folge :is(h3, h4) {
  margin: 0 0 1rem; color: var(--ivory); font: 400 1.5rem/1.12 var(--font-author); letter-spacing: -.01em; text-wrap: balance; /* kleine Karte 24 px */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
.pro-folge :is(h3, h4) a { color: inherit; text-decoration: none; }
.pro-folge :is(h3, h4) a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.pro-folge :is(h3, h4) a:focus-visible { outline: none; }
.pro-folge:has(:is(h3, h4) a:focus-visible) { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
@media (min-width: 761px) {
  .pro-reihe-kopf { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .pro-reihe-kopf .pro-marke { grid-column: 1 / -1; }
  .pro-reihe-info { margin: 0 0 .5rem; }
}
@media (min-width: 1025px) {
  .pro-streifen {
    --hoehe: clamp(22rem, 27vw, 26rem);
    --text: clamp(18rem, 25vw, 24rem);
    --schmal: var(--hoehe); /* Breite einer zugeklappten Folge – pro-v2 misst sie; ohne Skript steht das Bild links bündig */
    --weich: cubic-bezier(.45, 0, .15, 1); /* weich an, weich aus */
    width: min(72rem, var(--shell)); height: var(--hoehe); margin: 0 auto; padding: 0;
    gap: 2px; overflow: visible; scroll-snap-type: none;
  }
  /* Ruhiger (Maxim 27.09.: „hektisch und hakt“): „offen“ ist ein einfacher Schalter (--offen 0/1), alles andere leitet
     sich davon ab und gleitet mit eigenem Übergang – Breite, Verschiebung des Bildes, Deckkraft. Keine Filter mehr, die
     pro Bild und Frame neu gerechnet werden. Aufgeklappt ist eine Folge immer genau Bild + Textspalte breit, die übrigen
     teilen sich den Rest (eine Folge: kein leeres Feld; fünf: nichts abgeschnitten). */
  .pro-folge {
    --offen: 0;
    min-width: 0; overflow: hidden;
    flex-grow: calc(1 - var(--offen)); flex-shrink: 1; flex-basis: calc(var(--offen) * (var(--hoehe) + var(--text)));
    transition: flex-grow .85s var(--weich), flex-basis .85s var(--weich);
  }
  /* offen: ohne Skript die erste bzw. die überfahrene Folge; mit Skript (pro-v2, .gesteuert) die mit .offen */
  .pro-streifen:not(.gesteuert):not(:has(.pro-folge:not(.pro-folge-geplant):hover, .pro-folge:focus-within)) > .pro-folge:first-child:not(.pro-folge-geplant),
  .pro-streifen:not(.gesteuert) > .pro-folge:not(.pro-folge-geplant):is(:hover, :focus-within),
  .pro-streifen.gesteuert > .pro-folge.offen { --offen: 1; }
  .pro-folge::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to top, var(--night-82), rgba(7, 7, 6, .42) 55%, rgba(7, 7, 6, .3));
    opacity: calc(1 - var(--offen)); transition: opacity .85s var(--weich);
  }
  .pro-folge-bild {
    position: absolute; top: 0; bottom: 0; left: 0; width: var(--hoehe); aspect-ratio: auto; translate: none;
    transform: translateX(calc((1 - var(--offen)) * (var(--schmal) - var(--hoehe)) / 2)); /* zugeklappt: Bildmitte */
    transition: transform .85s var(--weich); will-change: transform;
  }
  .pro-folge-bild img { filter: none; }
  .pro-code {
    display: block; position: absolute; left: 1rem; bottom: 1.1rem; z-index: 1;
    writing-mode: vertical-rl; rotate: 180deg;
    color: var(--ivory); font: 600 12px/1 var(--font-ui); letter-spacing: .18em;
    opacity: calc(1 - var(--offen)); transition: opacity .3s ease;
  }
  .pro-folge-text {
    position: absolute; top: 0; bottom: 0; left: var(--hoehe); width: var(--text);
    display: flex; flex-direction: column; justify-content: center; padding: 2rem 2.25rem;
    opacity: var(--offen); /* erscheint, wenn der Platz offen ist; geht sofort beim Schließen */
    transition: opacity calc(.15s + var(--offen) * .4s) ease-out calc(var(--offen) * .5s);
  }
}

/* Bewegung: ein Auftritt beim Laden (Radierung zieht sich zurück, Überschrift hebt sich), sonst nur die Streifen */
@media (prefers-reduced-motion: no-preference) {
  .pro-kopf h1 { animation: pro-hebt .9s .15s var(--ease) both; }
  .pro-kopf .pro-marke, .pro-zahl { animation: pro-blendet .9s .45s ease both; }
  @keyframes pro-hebt { from { transform: translateY(.28em); } } /* ohne Deckkraft: die Überschrift zählt sofort */
  @keyframes pro-blendet { from { opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { /* kein Gleiten, nur ein kurzer Wechsel */
  .pro-folge { transition: flex-grow .2s linear, flex-basis .2s linear !important; }
  .pro-folge-bild { transition: none !important; }
  .pro-folge-text { transition: opacity .15s linear !important; }
}

/* ── 3 Mitte, Nachladen, Schloss, zwei Welten, Parallaxe ──────────────────────────────────────────────────── */
/* Mitte */
@media (min-width: 761px) {
  .pro2-liste {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); /* Maxim: drei statt vier in einer Reihe */
    column-gap: clamp(1.25rem, 2.5vw, 2rem); row-gap: clamp(2rem, 4vw, 3rem);
    padding-inline: calc((100% - min(72rem, var(--shell))) / 2);
  }
  .pro2-liste > * { margin: 0; } /* sonst schrumpfen die Elemente im Raster auf ihren Inhalt und stehen mittig */
  .pro2-liste > h2, .pro2-liste > .blog-leer { grid-column: 1 / -1; width: auto; margin: 0; }
  .pro2-liste > .blog-zeile:not(.blog-klein) { grid-column: 1 / -1; width: auto; }
  .pro2-liste > .blog-zeile.blog-klein { width: auto; grid-template-columns: 1fr; align-items: start; }
  .pro2-liste .blog-klein .blog-zeile-bild { order: 0; }
  .pro2-liste .blog-klein .blog-zeile-text { height: auto; padding: 1.5rem 1.4rem 1.9rem; justify-content: flex-start; }
  .pro2-liste .blog-klein .blog-meta { margin-bottom: .6rem; }
}
.pro2-liste { padding-bottom: clamp(1rem, 2vw, 1.5rem); }

/* „Ältere Geschichten“: goldener Strich, darunter der Knopf, darunter der Stand */
.pro2-ende { padding: 0 0 clamp(4rem, 8vw, 6rem); background: var(--night); }
.pro2-mehr-nav {
  position: relative; width: min(72rem, var(--shell)); margin: 0 auto; padding-top: 4.5rem;
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
}
.pro2-mehr-nav::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 3rem; background: var(--gold); }
.pro2-mehr, .pro2-zurueck {
  padding-block: .6rem; /* Tippfläche ≥ 44 px (adapt 28.09.2026) */ color: var(--ivory); font: 400 clamp(1.3rem, 2.2vw, 1.75rem)/1.2 var(--font-author); letter-spacing: -.01em;
  text-decoration: underline 1px var(--gold); text-underline-offset: .35em;
}
.pro2-mehr:hover, .pro2-zurueck:hover { text-decoration-color: var(--gold-bright); }
.pro2-mehr::after { content: "\00a0↓" / ""; }
.pro2-zurueck::before { content: "↑\00a0" / ""; }
.pro2-mehr.laedt { opacity: .6; cursor: progress; }
.pro2-stand { margin: 0; color: var(--gold-bright); font:var(--type-meta-sm); letter-spacing: .14em; text-transform: uppercase; }

/* Podcast: je Staffel eine Kopfzeile über ihrem Streifen */
.pro2-staffel-kopf {
  width: min(72rem, var(--shell)); margin: 0 auto 1rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1.25rem;
}
.pro2-staffel-kopf h3 { margin: 0; color: var(--ivory); font: 400 clamp(1.65rem, 2.4vw, 2.1rem)/1.2 var(--font-author); letter-spacing: -.01em; }
.pro2-staffel-kopf p { margin: 0; color: var(--ivory-dim); font: 400 13px/1.5 var(--font-ui); }
.pro2-alle { margin-left: auto; }
.pro2-alle::after { content: "\00a0→" / ""; }
.pro2-reihe .pro-streifen + .pro2-staffel-kopf { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* Blättern (Reihenseite, mehr als 5 Folgen; Maxim 27.09.): 5 im Bild, der Pfeil im goldenen Kreis rechts schiebt eine
   weiter – die erste gleitet links hinaus (Bild wandert mit), die nächste kommt rechts herein und die erste im Bild öffnet
   sich. Links führt ein Pfeil zurück, sobald weitergeschoben ist. Nur Desktop; am Telefon bleibt die Wischreihe. */
.pro2-blaettern { display: none; }
@media (min-width: 1025px) {
  .pro-streifen.blaettert { position: relative; }
  .pro-streifen.blaettert > .pro-folge { transition: flex-grow .85s var(--weich), flex-basis .85s var(--weich), margin .85s var(--weich); }
  .pro-streifen.blaettert > .pro-folge:is(.vorbei, .spaeter) { flex-grow: 0; flex-basis: 0; }
  .pro-streifen.blaettert > .pro-folge.vorbei { margin-right: -2px; } /* die Fuge zum Nachbarn verschwindet mit */
  .pro-streifen.blaettert > .pro-folge.spaeter { margin-left: -2px; }
  .pro-streifen.blaettert > .pro-folge.vorbei .pro-folge-bild { transform: translateX(calc((var(--schmal) - var(--hoehe)) / 2 - var(--schmal))); }
  /* außerhalb neben dem Streifen, so groß wie das Schloss-Siegel (Maxim 27.09.: „außerhalb, ein Hauch kleiner“); der
     Abstand zum Streifen schrumpft, wenn der Rand schmal wird (1025 px: 48 px Rand) */
  .pro2-blaettern {
    --knopf: 2.75rem;
    --luft: clamp(0rem, (100vw - 100%) / 2 - var(--knopf) - .5rem, 1.25rem);
    position: absolute; z-index: 3; top: 50%; translate: 0 -50%;
    display: grid; place-items: center; width: var(--knopf); height: var(--knopf); padding: 0;
    border: 1px solid var(--gold); border-radius: 50%; background: transparent; color: var(--gold-bright);
    cursor: pointer; transition: background-color .3s ease, color .3s ease;
  }
  .pro2-blaettern[hidden] { display: none; }
  .pro2-weiter-pfeil { right: calc(-1 * (var(--knopf) + var(--luft))); }
  .pro2-zurueck-pfeil { left: calc(-1 * (var(--knopf) + var(--luft))); }
  .pro2-zurueck-pfeil svg { rotate: 180deg; }
  .pro2-blaettern svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .pro2-blaettern:hover { background: var(--gold); color: var(--night); }
  .pro2-blaettern:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
  @media (prefers-reduced-motion: no-preference) { /* taucht auf: aus der Mitte, leicht vergrößert */
    .pro2-blaettern { transition: background-color .3s ease, color .3s ease, opacity .5s ease, scale .5s var(--weich); }
    @starting-style { .pro2-blaettern { opacity: 0; scale: .6; } }
    .pro2-blaettern:active { scale: .94; }
  }
}

/* Geplante Folgen (WordPress-Status „Geplant“): grau, gesperrt, öffnen sich nicht; am Desktop steht das Datum senkrecht
   im Streifen („S02E02 · ab 15.1.“), am Telefon als Zeile auf der Karte */
.pro-folge-geplant { cursor: not-allowed; background: var(--night); outline: 1px solid rgba(240, 236, 226, .06); outline-offset: -1px; }
.pro-folge-geplant .pro-folge-bild img { filter: grayscale(1) brightness(.35) contrast(.9); }
.pro-folge-geplant .pro-folge-text, .pro-folge-geplant h4 { color: var(--ivory-dim); }
.pro-folge-geplant .blog-meta { color: var(--ivory-dim); }
.pro-folge-geplant .pro-code { color: var(--ivory-dim); }

/* ── Bewegung (27.09.2026, /impeccable animate) ─────────────────────────────────────────────────────────────────
   Leitmoment: im Kopf lösen sich zwei Bleistiftwelten ab (Bleistiftwelt ↔ Waltor), wie zwei Zeichnungen auf
   demselben Nachtpapier. Die Bilder sind eingebacken (bilder/backe_kopfbilder.py): nur Deckkraft und ein langsames
   Heranrücken, kein Filter, keine Mischmodi. Läuft nur mit JavaScript (Klasse .zwei), hält außer Sicht an (.ruht). */
.pro2-kopf::before, .pro2-kopf::after {
  content: ""; position: absolute; inset: 0; z-index: -2; height: auto; pointer-events: none;
  background: url(bilder/kopf-welt-1-800.webp) 50% 42% / cover no-repeat;
  filter: none; mix-blend-mode: normal; opacity: 1;
  -webkit-mask-image: linear-gradient(22deg, transparent 16%, #000 64%), linear-gradient(to bottom, #000 62%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(22deg, transparent 16%, #000 64%), linear-gradient(to bottom, #000 62%, transparent);
          mask-composite: intersect; /* unten links ruhig für die Schrift, nach unten in die Nacht auslaufend */
}
.pro2-kopf::after { background-image: none; opacity: 0; }
.pro2-kopf.zwei::after { background-image: url(bilder/kopf-welt-2-800.webp); }
@media (min-width: 801px) {
  .pro2-kopf::before { background-image: url(bilder/kopf-welt-1-1600.webp); }
  .pro2-kopf.zwei::after { background-image: url(bilder/kopf-welt-2-1600.webp); }
}
@media (prefers-reduced-motion: no-preference) {
  .pro2-kopf::before { animation: none; }
  .pro2-kopf.zwei::before, .pro2-kopf.zwei::after { will-change: opacity, transform; animation: pro2-welt 11s linear infinite; }
  .pro2-kopf.zwei::after { animation-delay: -5.5s; } /* halbe Runde versetzt: alle 5,5 s löst die eine die andere ab (Maxim 27.09.) */
  @keyframes pro2-welt {
    0%   { opacity: 1; transform: scale(1); }
    35%  { opacity: 1; }
    50%  { opacity: 0; transform: scale(1.03); } /* rückt beim Gehen langsam heran; Überblendung 1,65 s */
    51%  { transform: scale(1); }                /* unsichtbar zurück */
    85%  { opacity: 0; }
    100% { opacity: 1; transform: scale(1); }
  }
}
@media (prefers-reduced-motion: reduce) { /* nur die Überblendung, langsamer, ohne Bewegung */
  .pro2-kopf.zwei::before, .pro2-kopf.zwei::after { animation: pro2-welt-ruhig 22s linear infinite; }
  .pro2-kopf.zwei::after { animation-delay: -11s; }
  @keyframes pro2-welt-ruhig { 0%, 40% { opacity: 1; } 50%, 90% { opacity: 0; } 100% { opacity: 1; } }
}
.pro2-kopf.ruht::before, .pro2-kopf.ruht::after { animation-play-state: paused; }

/* Nachladen (Fassung nach /impeccable animate, auf Maxims Wunsch langsamer): der goldene Strich läuft wie Tinte nach
   unten, solange geladen wird (0,9 → 1,4 s); der Stand leuchtet kurz auf (1,1 → 1,8 s). Die neuen Blogboxen steigen
   gestaffelt aus der Stelle, an der der Knopf stand (vorschau-pro-v2.js). */
.pro2-mehr-nav::before { transform-origin: 50% 0; }
@media (prefers-reduced-motion: no-preference) {
  .pro2-mehr-nav.laedt::before { animation: pro2-tinte 1.4s cubic-bezier(.65, 0, .35, 1) infinite; }
  @keyframes pro2-tinte { 0% { transform: scaleY(0); opacity: 1; } 65% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
}
.pro2-stand.neu { animation: pro2-stand 1.8s ease-out; }
@keyframes pro2-stand { from { color: var(--ivory); } }

/* Schloss auf geplanten Folgen: ein Siegel in Gold. Kommt die Reihe ins Bild, schnappt der Bügel zu und ein Ring
   geht vom Siegel aus; berührt man die Folge, rüttelt das Schloss – noch nicht offen. */
.pro-schloss {
  position: absolute; z-index: 2; left: 50%; top: calc(min(78vw, 22rem) / 2);
  width: 2.75rem; height: 2.75rem; translate: -50% -50%;
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--gold-55); background: rgba(7, 7, 6, .6); color: var(--gold-bright);
  pointer-events: none;
}
@media (min-width: 1025px) { .pro-schloss { top: 50%; } }
.pro-schloss::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--gold); opacity: 0; }
.pro-schloss svg { width: 1.2rem; height: 1.2rem; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pro-schloss .buegel { transform-box: fill-box; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .gesehen .pro-schloss .buegel { animation: pro2-buegel-zu .5s calc(var(--i, 0) * 90ms + 200ms) cubic-bezier(.3, 1.6, .5, 1) both; }
  .gesehen .pro-schloss::before { animation: pro2-siegel .9s calc(var(--i, 0) * 90ms + 380ms) ease-out both; }
  .pro-folge-geplant:hover .pro-schloss svg, .pro-folge-geplant.ruettelt .pro-schloss svg { animation: pro2-ruetteln .45s ease-in-out; }
  @keyframes pro2-buegel-zu { from { transform: translateY(-5px); } }
  @keyframes pro2-siegel { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
  @keyframes pro2-ruetteln { 0%, 100% { rotate: 0deg; } 20% { rotate: -10deg; } 45% { rotate: 8deg; } 70% { rotate: -4deg; } 88% { rotate: 2deg; } }
}
@media (prefers-reduced-motion: reduce) { /* ohne Bewegung: das Siegel leuchtet nur kurz auf */
  .pro-folge-geplant.ruettelt .pro-schloss { border-color: var(--gold-bright); transition: border-color .2s; }
}

/* Parallaxe (Maxim 27.09.2026: „beim Runterscrollen eine leichte Parallaxe“): die beiden Welten gleiten mit knapp
   einem Drittel der Scrollgeschwindigkeit nach – sie liegen hinter der Schrift. Über `translate`, damit das Heranrücken
   der Überblendung (`transform`) unberührt bleibt. Ohne Unterstützung für scroll()-Zeitleisten: kein Effekt. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .pro2-kopf::before { animation: pro2-parallaxe linear both; animation-timeline: scroll(root); animation-range: 0px 100vh; }
    .pro2-kopf.zwei::before, .pro2-kopf.zwei::after {
      animation: pro2-welt 11s linear infinite, pro2-parallaxe linear both;
      animation-timeline: auto, scroll(root); animation-range: normal, 0px 100vh;
    }
    .pro2-kopf.zwei::after { animation-delay: -5.5s, 0s; }
    .pro2-kopf.ruht::before, .pro2-kopf.ruht::after { animation-play-state: paused, running; } /* nur die Überblendung ruht */
    @keyframes pro2-parallaxe { to { translate: 0 30vh; } }
  }
}

/* Das Cover einer Folge ist ein Link zur Folge (Maxim 27.09.) */
a.pro-folge-bild { display: block; color: inherit; }

/* Suche (Umsetzungsplan Blog-Reste, 27.09.): Formular im Kopf unter der Zählzeile, über die ganze Kopfbreite. Feld und
   Knopf wie in der Depesche-Box (48 px hoch, Rand 1 px, Knopf Flächengold mit Nacht-Schrift); am Telefon untereinander,
   ab 761 px in einer Zeile. Die Beschriftung bleibt sichtbar (klein, gedimmt). */
.mm-suche { grid-column: 1 / -1; display: grid; gap: .45rem .75rem; width: 100%; max-width: 40rem; margin-top: 1.6rem; }
.mm-suche label { color: var(--ivory-dim); font: 500 13px/1.3 var(--font-ui); }
.mm-suche input {
  width: 100%; min-width: 0; min-height: 48px; padding: .7rem .9rem;
  border: 1px solid rgba(240, 236, 226, .28); border-radius: 0; background: var(--night); color: var(--ivory);
  font: 400 16px/1.3 var(--font-ui);
}
.mm-suche input:focus-visible { outline: var(--fokus); outline-offset: 2px; }
/* Look des Knopfs: gemeinsame Knopfregel in block-theme/quellen/grundlage.css („Knöpfe & Links“); hier nur der eigene Fokusabstand */
.mm-suche button:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
@media (min-width: 761px) {
  .mm-suche { grid-template-columns: minmax(0, 1fr) auto; margin-top: 2rem; }
  .mm-suche label { grid-column: 1 / -1; }
}
/* 404: die vier Wege als Zeile goldener Textlinks unter dem Suchformular; Tippfläche ≥ 44 px */
.mm-wege { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.mm-wege a { display: inline-flex; align-items: center; min-height: var(--ziel); }

/* Podcast-Folge (Maxim 27.09.2026) – Aufbau wie die Blog-Detailseite. Markup: inc/podcast.php (Quelle
   block-theme/quellen/podcast.php), Vorlage templates/podcast-folge.html, Spieler und Staffel-Streifen: assets/blog.js. */

/* 1 Kopf: lange Wörter („Entdeckungsreise“) am Telefon trennen statt über den Rand laufen. Ohne Reihen-Link wie beim
   Blogbeitrag (Maxim 27.09.) */
.podcast-kopf h1 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }

/* 2 Anhören: der große Spotify-Spieler nach dem ersten Absatz, breiter als der Text, aber schmaler als die großen Bilder:
   880 px (Maxim 27.09.; Satzspalte 680, Bild „breit“ 1152). Am Telefon so breit wie der Text. */
.entry-content > .podcast-spieler-gross { width: min(55rem, var(--wide-block)); margin: clamp(2.5rem, 5vw, 4rem) auto clamp(3rem, 6vw, 4.5rem); }
.podcast-spieler-gross iframe { display: block; width: 100%; height: 352px; border: 0; border-radius: 12px; background: var(--night); }
/* Erst nach Klick (07.10.2026, wie YouTube): vorher Folgenbild mit Abspielknopf in der Höhe des Spielers, damit nichts springt */
.podcast-spieler-gross.mm-video { aspect-ratio: auto; height: 352px; border-radius: 12px; }

/* Angekündigt (Plugin mm-reihen): Datum groß, Platzhaltertext in der Satzspalte */
.entry-content > .mm-ankuendigung { width: var(--reading); margin: 0 auto; }
.mm-ankuendigung-datum { margin: 0 0 1.2em; color: var(--ink); font: 400 clamp(1.5rem, 2.6vw, 2rem)/1.2 var(--font-author); }
.mm-ankuendigung p:not(.mm-ankuendigung-datum) { color: var(--ink-dim); }

/* 4 Mehr aus Staffel N: der Streifen der Übersicht auf Nacht, vor Depesche und Karussell */
.podcast-staffel { padding-top: clamp(4rem, 8vw, 6rem); }
.podcast-staffel .pro-reihe-kopf { border-top: 0; padding-top: 0; }
.podcast-staffel .pro-reihe-info a { color: var(--gold-bright); text-decoration: underline 1px var(--gold); text-underline-offset: .3em; }
.podcast-staffel .pro-folge[aria-current="page"] .blog-meta::after { content: " · diese Folge"; }


/* Artikeltext (Blog und Podcast) – Zwischenüberschriften (/impeccable typeset, 27.09.2026). Die H2 entstehen auch aus
   fetten Einzeilen-Absätzen (inc/inhalt.php). Rolle: Newsreader in der geladenen Stärke 400, knapp das 1,8-Fache des
   Textes (19 px → 34 px), Tinte statt des Grautons der Absätze, deutlich mehr Luft darüber als darunter; der Absatz
   danach schließt dicht an. Anker (id) für Sprünge, mit Abstand unter dem festen Kopf. */
.entry-content > h2 {
  margin: 2.1em auto .6em;
  color: var(--ink);
  font: 400 clamp(1.65rem, 2.4vw, 2.1rem)/1.18 var(--font-author);
  letter-spacing: -.012em;
  text-wrap: balance;
  scroll-margin-top: calc(var(--kopf-hoehe) + 1.5rem);
}
.entry-content > h2 + p { margin-top: 0; }

/* Alter Editor und Einbettungen (Maxim 27.09.2026: „We Who Walk the Wind reparieren und denken, wie es geht“).
   Bilder mit Bildunterschrift aus dem klassischen Editor (figure.wp-caption, feste Breite als style-Attribut) stehen
   mittig in der Satzspalte statt am linken Seitenrand; nie breiter als die Spalte. Die Unterschrift wie beim Bildblock. */
.entry-content > .wp-caption { max-width: min(100%, var(--reading)); margin: clamp(2.5rem, 5vw, 3.5rem) auto; }
.entry-content > .wp-caption.alignright, .entry-content > .wp-caption.alignleft { float: none; }
.wp-caption img { display: block; width: 100%; height: auto; }
.wp-caption .wp-caption-text {
  max-width: 60ch; margin: .9rem 0 0;
  color: var(--gold-bright); font: 500 12px/1.55 var(--font-ui); letter-spacing: .05em;
}
/* YouTube und andere Videos: aus dem alten Editor als <p><iframe width="560"></p>, aus dem neuen als Einbettungs-Block.
   Beide so breit wie der Podcast-Spieler (880 px), 16:9, am Telefon textbreit. */
.entry-content > p:has(> iframe:only-child),
.entry-content > .wp-block-embed.is-type-video { width: min(55rem, var(--wide-block)); margin: clamp(2.5rem, 5vw, 4rem) auto; }
.entry-content > p > iframe:only-child,
.entry-content > .wp-block-embed.is-type-video iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
.entry-content > .wp-block-embed.is-type-video .wp-block-embed__wrapper::before { content: none; }
/* Zitat: Zitat-Block und <blockquote> werden zum hervorgehobenen Zitat (inc/inhalt.php); die Quelle darunter klein. */
.wp-block-pullquote cite {
  display: block; margin-top: 1.6rem;
  color: var(--gold-bright); font: 500 12px/1.5 var(--font-ui); font-style: normal; letter-spacing: .14em; text-transform: uppercase;
  text-align: center;
}

/* Video erst nach Klick (Maxim 27.09.): Bild mit Abspielknopf im goldenen Kreis wie die Blätter-Pfeile; der Klick setzt
   den Spieler ein (assets/video.js). Gleiches Schema wie das Beitragsbild („Video- und Beitragsbilder sollten dem
   gleichen Schema folgen“): nach dem Einstieg, so breit wie ein breites Bild, gleiche Abstände; 16:9. */
.mm-video {
  position: relative; overflow: hidden;
  width: var(--wide-block); margin: clamp(3.5rem, 6vw, 5rem) auto;
  aspect-ratio: 16 / 9; background: var(--night);
}
.wp-block-embed .mm-video { width: 100%; margin: 0; }
.mm-video-start { position: absolute; inset: 0; display: grid; place-items: center; color: var(--gold-bright); }
.mm-video-start img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%; filter: brightness(.7) saturate(.85);
  transition: filter .6s ease, transform .9s var(--ease);
}
.mm-video-knopf {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: clamp(3.75rem, 7vw, 5.25rem); aspect-ratio: 1; border: 1px solid var(--gold); border-radius: 50%;
  background: var(--night-50); transition: background-color .3s ease, color .3s ease;
}
.mm-video-knopf svg { width: 38%; height: 38%; fill: currentColor; translate: 7% 0; }
.mm-video-start:hover img { filter: brightness(.85) saturate(.95); transform: scale(1.02); }
.mm-video-start:hover .mm-video-knopf { background: var(--gold); color: var(--night); }
.mm-video-start:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: -4px; }
.mm-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (prefers-reduced-motion: reduce) { .mm-video-start img { transition: none; } }