/* Bookman-Nachbau (GUST Font License) und Macondo (OFL), siehe vendor/fonts/.
   Bookman und Papyrus dürfen nicht eingebettet werden: Installiert wird das Original genutzt,
   sonst der freie Nachbau (TeX Gyre Bonum bzw. das Papyrus-ähnliche Macondo). */
@font-face {
  font-family: Bookman;
  src: local('Bookman Old Style Bold'), local('BookmanOldStyle-Bold'), url(vendor/fonts/texgyrebonum-bold.otf) format('opentype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: Macondo;
  src: url(vendor/fonts/macondo.woff2) format('woff2');
  font-display: swap;
}

:root {
  --ink: #111;
  --shadow: 0 1px 4px rgba(0,0,0,.18);
  --bookman: Bookman, 'Bookman Old Style', serif;
}
.kontur-weiss { --ink: #fff; text-shadow: var(--outline); } /* text-shadow selbst setzen, sonst erbt es die schwarze Kontur des Elternelements */
/* Plakat-Kontur wie im Kirmestracker: außen 6,3 % der Schriftgröße mit runden Ecken.
   Auch an .kontur-weiss definiert, damit dort das weiße --ink greift. */
:root, .kontur-weiss {
  --outline: .063em 0 0 var(--ink), .061em .016em 0 var(--ink), .055em .032em 0 var(--ink), .045em .045em 0 var(--ink),
    .032em .055em 0 var(--ink), .016em .061em 0 var(--ink), 0 .063em 0 var(--ink), -.016em .061em 0 var(--ink),
    -.032em .055em 0 var(--ink), -.045em .045em 0 var(--ink), -.055em .032em 0 var(--ink), -.061em .016em 0 var(--ink),
    -.063em 0 0 var(--ink), -.061em -.016em 0 var(--ink), -.055em -.032em 0 var(--ink), -.045em -.045em 0 var(--ink),
    -.032em -.055em 0 var(--ink), -.016em -.061em 0 var(--ink), 0 -.063em 0 var(--ink), .016em -.061em 0 var(--ink),
    .032em -.055em 0 var(--ink), .045em -.045em 0 var(--ink), .055em -.032em 0 var(--ink), .061em -.016em 0 var(--ink),
    .04em .07em .12em rgba(0,0,0,.35);
  /* Kräftigere Kontur (8 %) für die Plakat-Texte der Kirmes außer „Kirmes“ */
  --outline-stark: .08em 0 0 var(--ink), .077em .021em 0 var(--ink), .069em .04em 0 var(--ink), .057em .057em 0 var(--ink),
    .04em .069em 0 var(--ink), .021em .077em 0 var(--ink), 0 .08em 0 var(--ink), -.021em .077em 0 var(--ink),
    -.04em .069em 0 var(--ink), -.057em .057em 0 var(--ink), -.069em .04em 0 var(--ink), -.077em .021em 0 var(--ink),
    -.08em 0 0 var(--ink), -.077em -.021em 0 var(--ink), -.069em -.04em 0 var(--ink), -.057em -.057em 0 var(--ink),
    -.04em -.069em 0 var(--ink), -.021em -.077em 0 var(--ink), 0 -.08em 0 var(--ink), .021em -.077em 0 var(--ink),
    .04em -.069em 0 var(--ink), .057em -.057em 0 var(--ink), .069em -.04em 0 var(--ink), .077em -.021em 0 var(--ink),
    .05em .08em .13em rgba(0,0,0,.35);
}

/* ---------- Modi: nur Farben, Schriften, Himmel und Boden ---------- */
/* Kirmes: Farben aus dem Deckblatt der Festschrift gemessen */
[data-modus="kirmes"] {
  --navy: #213481; --strahl: #60c4f0; --strahl-hell: #d8ecfc; --strahl-mitte: #b4e0f8;
  /* Unterhalb der Skyline geht das Navy des Plakat-Bodens weiter; Karten bleiben weiß */
  --grund: var(--navy); --grund-text: #fff; --grund-leise: #c7d0ee;
  --karte: #fff; --text: #1c2430; --leise: #5d6b78; --line: #dbe6ee;
  --akzent: #b01800; --akzent-2: var(--navy);
  --titel-font: var(--bookman); --titel-farbe: #fff; --titel-schatten: var(--outline);
  --knopf-bg: #b01800; --knopf-text: #fff;
  --band-bg: #b01800; --band-text: #fff; --band-schatten: var(--outline);
  --h2-farbe: #fff; --h2-schatten: var(--outline);
  --cd-bg: #fff; --cd-text: var(--navy); --cd-rand: #dbe6ee;
  --himmel: var(--strahl-hell); /* die Strahlen selbst setzt .hero weiter unten, weil sie sich drehen */
  --boden: none;
}
[data-modus="advent"] {
  --grund: #fbf1d3; --karte: #fffaf0; --text: #3b1010; --leise: #7a5a3a; --line: #ecd9a6;
  --akzent: #8e1b1b; --akzent-2: #b8862b;
  --titel-font: Papyrus, 'Papyrus Plain', Macondo, var(--bookman); --titel-farbe: #f6d374; --titel-schatten: 0 3px 0 #4a0b0b, 0 0 30px rgba(246,211,116,.45);
  --knopf-bg: #f6d374; --knopf-text: #8e1b1b;
  --band-bg: #f6d374; --band-text: #8e1b1b; --band-schatten: none;
  --h2-farbe: #8e1b1b; --h2-schatten: none;
  --cd-bg: rgba(246,211,116,.12); --cd-text: #f6d374; --cd-rand: rgba(246,211,116,.55);
  --himmel: radial-gradient(ellipse at 50% 35%, #a52222 0, #7a1414 45%, #4a0b0b 100%);
  /* Goldene Tannen, darunter cremefarbener Schneeboden als Übergang zur Seite */
  --boden: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'><defs><path id='t' d='M0 0 L7 14 L3.5 14 L10 28 L5 28 L13 42 L-13 42 L-5 28 L-10 28 L-3.5 14 L-7 14Z'/></defs><g fill='%23e7b94c'><use href='%23t' transform='translate(30 10)'/><use href='%23t' transform='translate(60 26.8) scale(.6)'/><use href='%23t' transform='translate(96 33) scale(.45)'/><use href='%23t' transform='translate(316 3.7) scale(1.15)'/><use href='%23t' transform='translate(348 22.6) scale(.7)'/><use href='%23t' transform='translate(376 16.3) scale(.85)'/></g><path fill='%23fbf1d3' d='M0 50 Q60 40 130 48 T260 46 T400 48 V60 H0Z'/></svg>") center bottom / 100% 100% no-repeat;
}
[data-modus="ostern"] {
  --grund: #15101f; --karte: #211a30; --text: #f3e9dc; --leise: #b9a99a; --line: #3a2d4f;
  --akzent: #f97316; --akzent-2: #fbbf24;
  --titel-font: var(--bookman); --titel-farbe: #fff6e0; --titel-schatten: 0 0 .08em #fbbf24, 0 0 .25em #f97316, 0 0 .6em rgba(194,65,12,.8);
  --knopf-bg: #f97316; --knopf-text: #15101f;
  --band-bg: #f97316; --band-text: #15101f; --band-schatten: none;
  --h2-farbe: #fbbf24; --h2-schatten: 0 0 18px rgba(249,115,22,.5);
  --cd-bg: rgba(255,255,255,.06); --cd-text: #fff6e0; --cd-rand: rgba(251,191,36,.35);
  --himmel: radial-gradient(ellipse 60% 45% at 50% 100%, rgba(249,115,22,.75), rgba(194,65,12,.25) 55%, transparent 80%),
    linear-gradient(#070b24, #1d1440 45%, #4a1a2a 80%, #7a2a14);
  /* Hügel, Hügelfarbe = Seitenfarbe; den Holzstapel zeichnet effekte.js */
  --boden: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'><path fill='%230d0916' d='M0 44 Q80 28 170 40 Q230 46 290 34 Q350 24 400 36 V60 H0Z'/><path fill='%2315101f' d='M0 50 Q100 42 200 48 T400 47 V60 H0Z'/></svg>") center bottom / 100% 100% no-repeat;
}

/* ---------- Basis ---------- */
* { box-sizing: border-box; }
/* Kein Gummiband-Nachfedern am Seitenrand: sonst zeigt iOS über dem Strahlenkranz den Navy-Seitenhintergrund und es hakelt */
html { scroll-behavior: smooth; overscroll-behavior-y: none; }
/* Text direkt auf dem Seitenhintergrund; Karten setzen --text selbst */
html { --grund-text: var(--text); --grund-leise: var(--leise); } /* html statt :root: geringere Spezifität, die Modi überschreiben es */
body { margin: 0; background: var(--grund); color: var(--grund-text); font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow-x: hidden; }
a { color: var(--akzent); }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }
[hidden] { display: none !important; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(100svh, 900px);
  padding: 48px 16px 120px;
  overflow: hidden;
  background: var(--himmel);
  text-align: center;
}
#effekt { position: absolute; inset: 0; width: 100%; height: 100%; }
.boden { position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(70px, 14vw, 130px); background: var(--boden); pointer-events: none; }
.hero-inhalt { position: relative; z-index: 2; max-width: 900px; }
.verein { margin: 0 0 8px; font: 700 clamp(15px, 3.6vw, 20px) var(--titel-font); color: var(--titel-farbe); text-shadow: var(--titel-schatten); letter-spacing: .08em; text-transform: uppercase; }
.titel { margin: 0; font: 700 clamp(56px, 15vw, 150px)/.95 var(--titel-font); color: var(--titel-farbe); text-shadow: var(--titel-schatten); letter-spacing: .01em; }
.titel span { display: block; font-size: .42em; letter-spacing: .04em; }
[data-modus="advent"] .titel, [data-modus="advent"] .verein, [data-modus="advent"] .band { font-weight: 400; } /* Papyrus hat keinen Fettschnitt */
.ort { margin: 12px 0 0; font: 400 clamp(18px, 4.6vw, 28px) var(--titel-font); color: var(--titel-farbe); text-shadow: var(--titel-schatten); }

/* ---------- Kirmes nach dem Deckblatt der Festschrift ---------- */
/* Strahlenkranz wie auf dem Plakat: oben kräftig, zur Skyline hin heller, mit dünnen Kanten-Linien.
   effekte.js zeichnet ihn drehend und kantengeglättet in den Canvas; das hier ist nur der Rückfall ohne JavaScript.
   Die Strahlbreite (7,5°) muss 360° glatt teilen, sonst entsteht senkrecht über der Mitte eine Naht. */
[data-modus="kirmes"] .hero {
  --t: min(100vw - 32px, 860px, 80svh); /* Titelbreite, alle Plakatmaße hängen daran */
  grid-template-rows: auto auto;
  min-height: 0;
  padding: 0 16px;
  background:
    repeating-conic-gradient(at 50% 100%, var(--strahl) 0 .3deg, transparent .3deg 7.5deg),
    radial-gradient(circle at 50% 100%, rgb(255 255 255 / .75) 0 calc(var(--t) * .9), rgb(255 255 255 / .4) calc(var(--t) * 1.5), rgb(255 255 255 / 0) calc(var(--t) * 2.4)),
    repeating-conic-gradient(at 50% 100%, var(--strahl) 0 3.5deg, var(--strahl-hell) 3.5deg 7.5deg);
}

/* Alle Größen hängen an der Titelbreite --t, damit die Proportionen des Plakats erhalten bleiben */
.plakat { width: var(--t); padding: calc(var(--t) * .16 + 40px) 0 0; } /* +40px: Platz für die Lichterketten */
.bogen { margin: 0; }
.bogen svg { display: block; width: 100%; height: auto; overflow: visible; }
/* Kontur außen 6,3 % der Schriftgröße: Strich doppelt so breit, die innere Hälfte deckt die Füllung ab */
.bogen text { font-family: var(--bookman); font-weight: 700; fill: #fff; stroke: var(--ink); stroke-width: .126em; stroke-linejoin: round; paint-order: stroke; }
.bogen text.stark { stroke-width: .16em; } /* 8 % außen */
.plakat .datum, .plakat .band, .plakat .special, .ort-boden { text-shadow: var(--outline-stark); }
.plakat .special .kontur-weiss { text-shadow: var(--outline-stark); }
.plakat .countdown { margin-top: calc(var(--t) * .14); } /* Abstand zum schrägen Band */
.datum { margin: calc(var(--t) * .07) 0 0; font: 700 calc(var(--t) * .106)/1.1 var(--bookman); color: #fff; }
.band.hashtag {
  display: block;
  width: fit-content; /* so breit wie der Text */
  margin: calc(var(--t) * .12) auto 0; /* Abstand, damit das schräge Band das Datum nicht überdeckt */
  padding: .38em .6em .33em;
  font: 700 calc(var(--t) * .072)/1.15 var(--bookman); /* feste Zeilenhöhe: „normal“ ist in Safari höher als in Chrome */
  white-space: nowrap;
  transform: rotate(-8deg);
  box-shadow: none;
}
/* Auf dem Handy läuft das Band wie auf dem Plakat über den rechten Rand hinaus */
@media (max-width: 700px) {
  .band.hashtag { width: auto; margin-top: calc(var(--t) * .17); margin-right: calc(50% - 50vw - 30px); margin-left: 6%; padding-left: 3%; text-align: left; }
  .plakat { padding-bottom: 18px; } /* etwas Luft zwischen Ankündigung und Skyline */
}
.special { margin: 0; font: 700 calc(var(--t) * .08)/1.1 var(--bookman); color: #fff; }
.special strong { color: #ec5000; }
/* Ankündigungen liegen in derselben Rasterzelle übereinander (Höhe = die längste) und klappen wie eine Anzeigetafel um */
.sprueche { display: grid; margin: calc(var(--t) * .09) 0 0; perspective: 800px; }
.sprueche .special { grid-area: 1 / 1; opacity: 0; transform: translateY(40%) rotateX(-70deg); transition: opacity .6s, transform .6s cubic-bezier(.2, .8, .3, 1.2); }
.sprueche .special.aktiv { opacity: 1; transform: none; }
.sprueche .special.weg { opacity: 0; transform: translateY(-40%) rotateX(70deg); }

/* Skyline (aus dem Deckblatt freigestellt, 2400 × 586) und Navy-Boden mit Ort */
.skyline {
  --b: min(100vw, 1400px);
  --sh: calc(var(--b) * 586 / 2400);
  position: relative; z-index: 2;
  justify-self: stretch;
  margin: calc(var(--sh) * -.3) -16px -2px; /* oben: leerer Bildteil rückt unter die Ankündigung; unten: kein Rundungsspalt zum Hero-Rand */
  padding: calc(var(--sh) - 4px) 16px 28px;
  background:
    url(bilder/skyline.png) center top / var(--b) auto no-repeat,
    /* rechts neben dem Bild geht die Kirche in Wiese über: Fläche ab 71,5 % der Bildhöhe */
    linear-gradient(var(--navy), var(--navy)) right bottom / calc((100% - var(--b)) / 2 + 2px) calc(100% - var(--sh) * .715) no-repeat,
    linear-gradient(var(--navy), var(--navy)) left bottom / 100% calc(100% - var(--sh) + 6px) no-repeat;
}
.ort-boden { margin: 0; font: 700 clamp(22px, 6.2vw, 52px)/1.1 var(--bookman); color: #fff; text-shadow: var(--outline); }
.skyline .countdown div { box-shadow: 0 2px 10px rgba(0,0,0,.3); }
.skyline .sprung a:not(:first-child) { border-color: #fff; }
.band {
  display: inline-block;
  margin: 22px -8px 0;
  padding: 8px 26px;
  background: var(--band-bg);
  color: var(--band-text);
  font: 700 clamp(17px, 4.4vw, 26px) var(--titel-font);
  text-shadow: var(--band-schatten);
  transform: rotate(-2deg);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}

.countdown { display: flex; justify-content: center; gap: clamp(8px, 2vw, 14px); margin-top: 28px; }
.countdown:empty { display: none; }
.countdown div { min-width: clamp(64px, 18vw, 92px); padding: 10px 6px 8px; border: 1px solid var(--cd-rand); border-radius: 16px; background: var(--cd-bg); color: var(--cd-text); box-shadow: var(--shadow); backdrop-filter: blur(6px); }
.countdown b { display: block; font: 700 clamp(28px, 8vw, 46px)/1 var(--bookman); font-variant-numeric: tabular-nums; }
.countdown small { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.countdown p { margin: 0; padding: 10px 22px; border-radius: 999px; background: var(--knopf-bg); color: var(--knopf-text); font: 700 22px var(--bookman); box-shadow: 0 0 0 0 var(--knopf-bg); animation: puls 1.6s infinite; }

.sprung { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.sprung a, .knopf, .buch-leiste button {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--karte); color: var(--text);
  font: 700 16px system-ui, sans-serif; text-decoration: none; box-shadow: var(--shadow); cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.sprung a:first-child { background: var(--knopf-bg); border-color: var(--knopf-bg); color: var(--knopf-text); }
.sprung a:hover, .knopf:hover, .buch-leiste button:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.2); }

/* ---------- Abschnitte ---------- */
.abschnitt { max-width: 1040px; margin: 0 auto; padding: 64px 16px 8px; }
@media (max-width: 700px) {
  .abschnitt { padding-top: 22px; }
  .skyline { padding-bottom: 14px; }
}
h2 { margin: 0 0 20px; font: 700 clamp(34px, 8vw, 56px)/1.1 var(--titel-font); color: var(--h2-farbe); text-shadow: var(--h2-schatten); text-align: center; }
[data-modus="advent"] h2 { font-weight: 400; }
.intro { max-width: 640px; margin: 0 auto 24px; color: var(--grund-leise); text-align: center; }

/* Programm als Zeitleiste */
.zeitleiste { position: relative; max-width: 640px; margin: 0 auto 24px; padding: 0 0 0 28px; list-style: none; }
.zeitleiste::before { content: ""; position: absolute; left: 9px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: linear-gradient(var(--akzent), var(--akzent-2)); }
.zeitleiste li {
  position: relative; display: flex; gap: 14px; align-items: baseline;
  margin-bottom: 10px; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--karte); color: var(--text); box-shadow: var(--shadow);
}
.zeitleiste li::before { content: ""; position: absolute; left: -25px; top: 18px; width: 13px; height: 13px; border-radius: 50%; background: var(--karte); border: 3px solid var(--akzent); }
.zeitleiste time { flex: none; min-width: 3.2em; font: 700 18px var(--bookman); color: var(--akzent); font-variant-numeric: tabular-nums; }
.zeitleiste li.jetzt { border-color: var(--akzent); box-shadow: 0 0 0 2px var(--akzent), 0 6px 18px rgba(0,0,0,.18); }
.zeitleiste li.jetzt::before { background: var(--akzent); animation: puls 1.6s infinite; }
.zeitleiste li.jetzt::after { content: "jetzt"; margin-left: auto; padding: 1px 10px; border-radius: 999px; background: var(--akzent); color: #fff; font-size: 13px; font-weight: 700; }

/* Kirmes: Tage nebeneinander, auf dem Handy als Wisch-Karussell */
[data-modus="kirmes"] .zeitleiste strong { color: #e65100; }
/* Desktop: alle Tage in einer Reihe ohne Scrollen, breiter als die Textspalte (bis 1600 px), je Tag höchstens 300 px, mittig.
   Das Datum steht unter dem Wochentag. */
.tage { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 300px); justify-content: center; gap: 16px; align-items: start;
  width: min(100vw - 48px, 1600px); margin-left: calc(50% - min(50vw - 24px, 800px)); }
/* Lange Wörter wie „Kirmesfrühschoppens“ trennen statt überstehen; ohne Silbentrennung im Browser notfalls ohne Bindestrich */
.tage .zeitleiste li span { hyphens: auto; overflow-wrap: anywhere; }
.tag { container-type: inline-size; }
/* Schrift schrumpft nur in schmalen Spalten, damit „Donnerstag“ in eine Zeile passt (Wortbreite ≈ 6 × Schriftgröße) */
.tag h3 { margin: 0 0 12px 28px; font: 700 min(26px, (100cqi - 28px) / 6.2) var(--bookman); color: var(--akzent-2); }
.tag h3 small { display: block; font-size: 16px; color: var(--grund-leise); }
[data-modus="kirmes"] .tag h3 { color: #fff; }
[data-modus="kirmes"] .zeitleiste::before { background: linear-gradient(var(--akzent), #fff); }
.tage .zeitleiste { margin: 0; }
.tage .zeitleiste li { flex-direction: column; gap: 0; } /* schmale Spalten: Uhrzeit über dem Text */
/* Schmale Spalten (6 Tage auf ~1280 px): Text und Innenabstand etwas kleiner, damit „Kirmesgesellschaft“ ganz in die Karte passt */
@media (min-width: 1200px) { .tage .zeitleiste li { padding-inline: min(16px, 6cqi); font-size: min(17px, 8cqi); } }
/* Unter 1200 px wären 6 Tage zu schmal: Wisch-Karussell, auf dem Handy eine Karte, auf dem Tablet mehrere */
@media (max-width: 1199px) {
  .tage { width: auto; justify-content: start; grid-auto-columns: min(86%, 340px); overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 4px 16px 12px; scroll-padding: 0 16px; } /* so hoch wie der längste Tag; Scrollleiste bleibt für Mausnutzer */
  .tag { scroll-snap-align: center; } /* effekte.js holt den laufenden Tag in die Mitte; der erste rastet trotzdem links ein */
  .tag h3 small { display: inline; } /* im Karussell ist Platz für Wochentag und Datum in einer Zeile */
}

/* Festschrift */
.buch-rahmen { display: grid; place-items: center; min-height: 300px; }
#buch { width: 100%; max-width: 980px; }
/* Breite so begrenzen, dass die Seitenhöhe auf den Bildschirm passt. Am Rahmen, weil StPageFlip maxHeight nicht einhält
   und die Größen an #buch selbst überschreibt. Unter 480 px Breite zeigt StPageFlip (minWidth 240) Einzelseiten. */
.buch-rahmen { max-width: max(480px, (100svh - 140px) * var(--seitenformat, .707) * 2); margin: 0 auto; }
@media (max-width: 511px) { .buch-rahmen { max-width: calc((100svh - 140px) * var(--seitenformat, .707)); } }
.seite { background: #fff; }
.seite img { display: block; width: 100%; height: 100%; object-fit: contain; }
.buch-leiste { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 18px; }
.buch-leiste button { padding: 0 16px; font-size: 22px; }
#vollbild, .knopf { font-size: 15px; }
#seite { min-width: 7em; text-align: center; font-variant-numeric: tabular-nums; color: var(--grund-leise); }
/* Beim Umblättern ragt die Seite über den Abschnitt hinaus: seitlich zoomt das Handy sonst heraus und die Seite springt nach oben,
   unten wird die Seite kurz länger und der Scrollbalken zuckt. */
#festschrift { overflow: clip; }
/* Vollbild als Overlay in der Seite: nur das Buch, so groß wie möglich; Schließen und Leiste schweben darüber.
   container-type: Höhe und Breite (cqh/cqw) kommen vom Overlay selbst, svh/dvh liegen je nach Browserleiste daneben */
#festschrift.offen {
  position: fixed; inset: 0; z-index: 100; max-width: none; margin: 0; padding: 0; container-type: size;
  display: grid; grid-template: 100% / 100%; place-items: center; overflow: hidden; background: var(--grund);
}
html:has(#festschrift.offen) { overflow: hidden; }
.offen h2, .offen .intro, .offen .knopf { display: none; } /* PDF-Knopf gibt es unter dem Buch */
/* Hintergrund: aktuelle Seite vergrößert und weichgezeichnet. Zwei Ebenen, die neue blendet über der alten ein
   (z-index negativ: unter dem Buch, über dem Overlay-Grund) */
.unschaerfe { display: none; }
.offen .unschaerfe { display: block; position: absolute; inset: -40px; z-index: -2; background: center 30% / cover; transform: scale(1.6); filter: blur(10px) brightness(.75); opacity: 0; }
.offen .unschaerfe.aktiv { opacity: 1; transition: opacity .7s ease; }
.offen .unschaerfe.oben { z-index: -1; }
/* Doppelseite so groß wie möglich und ganz sichtbar. touch-action: none, den Zoom macht effekte.js.
   Kein overflow: hidden, gezoomt nutzt die Seite den ganzen Bildschirm (abgeschnitten wird am Overlay) */
.offen .buch-rahmen { width: min(100cqw, 100cqh * var(--seitenformat, .707) * 2); max-width: none; min-height: 0; margin: 0; touch-action: none; }
/* drop-shadow statt box-shadow: folgt den sichtbaren Seiten, auch wenn beim Titelblatt nur die rechte Hälfte belegt ist */
.offen #buch { max-width: none; filter: drop-shadow(0 0 22px rgba(0, 0, 0, .55)); }
#buch { transform-origin: 0 0; }
/* Handy (Einzelseite): volle Höhe ohne Rand oben und unten; seitlich dürfen dafür höchstens 8 px abgeschnitten werden
   (DIN lang auf hohen Handys). Breitere Formate bekommen stattdessen Rand oben und unten. */
@media (max-width: 511px) {
  .offen .buch-rahmen { width: min(100cqh * var(--seitenformat, .707), 100cqw + 16px); justify-self: unsafe center; }
  .offen #buch { filter: none; box-shadow: 0 0 22px rgba(0, 0, 0, .55); } /* Einzelseite: box-shadow reicht und kostet beim Blättern weniger als drop-shadow */
}
.offen .buch-leiste { position: absolute; left: 0; right: 0; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 1; width: fit-content; margin: 0 auto; flex-wrap: nowrap; }
/* Durchsichtig, damit sie wenig von der Seite verdecken; weiße Schrift mit Schatten bleibt auf Weiß und Farbe lesbar */
.offen .buch-leiste button { background: color-mix(in srgb, var(--navy) 30%, transparent); border-color: rgba(255, 255, 255, .5); box-shadow: none; }
.offen .buch-leiste button, .offen #seite { color: #fff; text-shadow: 0 0 3px #000, 0 0 6px #000; }
.offen #vollbild { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 1; }

/* Verein */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.kachel {
  display: grid; gap: 4px; padding: 20px 52px 20px 22px; position: relative;
  border: 1px solid var(--line); border-radius: 18px; background: var(--karte); color: var(--text);
  text-decoration: none; box-shadow: var(--shadow), inset 5px 0 0 var(--akzent); transition: transform .2s, box-shadow .2s;
}
.kachel strong { font: 700 22px var(--bookman); color: var(--akzent); }
.kachel span { color: var(--leise); }
.kachel::after { content: "→"; position: absolute; right: 20px; top: 50%; translate: 0 -50%; font-size: 24px; color: var(--akzent); transition: translate .2s; }
.kachel:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.16), inset 5px 0 0 var(--akzent); }
.kachel:hover::after { translate: 4px -50%; }
.sozial { display: flex; justify-content: center; gap: 14px; margin: 28px 0 0; }
.sozial a { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--akzent); box-shadow: var(--shadow); transition: transform .2s; }
.sozial a:hover { transform: translateY(-3px) rotate(-6deg); }
.sozial svg { width: 24px; height: 24px; fill: #fff; }
[data-modus="ostern"] .sozial svg { fill: #15101f; }

/* Impressum: schlicht, ohne Plakat-Überschriften */
.rechtliches { max-width: 760px; }
.rechtliches h1, .rechtliches h2, .rechtliches h3 { margin: 1.4em 0 .4em; font: 700 1.3em/1.25 var(--bookman); color: var(--grund-text); text-shadow: none; text-align: left; }
.rechtliches a { color: var(--grund-text); }
.rechtliches h1 { font-size: 2em; }
.leise { color: var(--leise); font-size: 14px; }
.statistik table { border-collapse: collapse; }
.statistik th, .statistik td { padding: .2em 1.2em .2em 0; text-align: left; }
.statistik td + td, .statistik th + th { text-align: right; padding-right: 0; }

.fuss {padding: 48px 16px calc(32px + env(safe-area-inset-bottom)); text-align: center; color: var(--grund-leise); font-size: 14px; }
[data-modus="kirmes"] .fuss a { color: #fff; }

/* ---------- Bewegung ---------- */
@keyframes puls { 70% { box-shadow: 0 0 0 12px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    /* Parallax: Titel zieht schneller weg, Boden und Animation langsamer (gemeinsam, damit Riesenrad und Feuer auf dem Boden bleiben) */
    .hero-inhalt:not(.plakat) { animation: wegziehen linear both; animation-timeline: scroll(root); animation-range: 0 90vh; } /* das Plakat ist höher als der Bildschirm und bleibt stehen */
    .boden, #effekt { animation: sinken linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    [data-modus="kirmes"] #effekt { animation: none; } /* der Strahlenkranz muss deckungsgleich bleiben, sonst blitzt oben der CSS-Rückfall durch */
    @keyframes wegziehen { to { transform: translateY(-30%) scale(.92); opacity: 0; } }
    @keyframes sinken { to { transform: translateY(140px); } }
    /* Einträge gleiten beim Scrollen herein */
    .zeitleiste li, .kachel { animation: herein linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .tage .zeitleiste li { animation: none; } /* liegen im waagrechten Karussell, view() fände dort keine Scrollbewegung */
    @keyframes herein { from { opacity: 0; translate: -24px 0; } } /* translate statt transform, sonst blockiert es den Hover-Effekt */
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sprueche { gap: .6em; }
  .sprueche .special { grid-area: auto; opacity: 1; transform: none; } /* statt Durchlaufen alle untereinander */
  *, *::before, *::after { animation: none !important; transition: none !important; }
}