/* Aedan O’Lantern — Stilblatt der Seite (statische Fassung und Theme aus EINER Datei).
   Grundlage: Entwurf D (Roberts Wahl vom 19.10.2026: Hero aus B, alles andere aus C); Gestaltungsrunde vom 23.10.2026
   (Robert: Auftritte, Hover, weiche Menue-Unterstriche, Logo, Blaetter und Lichter, Autoren-Abschnitt, Typografie,
   Formular, Fuss, Knoepfe). Nicht im Theme von Hand aendern: Quelle ist website/tilman-guendchen/teile/stil.css,
   bauen.mjs kopiert sie.
   Bewegung: alles, was Inhalt versteckt, haengt an html.js (Einzeiler im Kopf) und hat seinen Notausgang unter
   html.js.tg-notaus (Paket §2b; Live-Regel in scripts/pruefungen/lib/live-tabellen.mjs). */

@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-v20-latin-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-v20-latin-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --papier: #F9FBFE;
  --pergament: #F8F1DB;
  --nacht: #243469;
  --nacht-tief: #1B2650;
  --titelblau: #272A5B;
  --titelrot: #BF3528;
  --titelrot-tief: #9A2A1F;
  --kuerbis: #E39426;
  --kuerbis-hell: #F2B35A;
  --mondlicht: #E8E5DE;
  --tinte: #26221F;
  --grau-text: #5A544D;
  --weiss: #FFFFFF;
  --linie: rgba(39, 42, 91, .14);
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rand: 1rem;
  --radius: 1.25rem;
  --schatten-buch: 0 1px 2px rgba(39, 42, 91, .14), 0 16px 34px -16px rgba(39, 42, 91, .5);
  --schatten-karte: 0 1px 2px rgba(39, 42, 91, .06), 0 18px 40px -26px rgba(39, 42, 91, .45);
  --uebergang: .25s cubic-bezier(.2, .7, .2, 1);
}

/* Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; hyphens: manual; scroll-behavior: smooth; }
body { margin: 0; background: var(--papier); color: var(--tinte); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6; overflow-wrap: break-word; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
figure { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-optical-sizing: auto; font-weight: 600; line-height: 1.12; color: var(--titelblau); text-wrap: balance; letter-spacing: -.01em; }
p, ul, ol, dl, dd, blockquote { margin: 0; }
ul, ol { padding: 0; }
a { color: var(--titelblau); text-decoration-thickness: .08em; text-underline-offset: .2em; transition: color var(--uebergang), text-decoration-color var(--uebergang); }
a:hover { text-decoration-thickness: .14em; }
strong { font-weight: 700; }
:focus-visible { outline: 3px solid var(--titelblau); outline-offset: 3px; }
.nacht :focus-visible, .fuss :focus-visible, .kaufmodul-kopf :focus-visible, .klappentext :focus-visible { outline-color: var(--mondlicht); }
.sprung { position: absolute; left: 1rem; top: -6rem; z-index: 30; padding: .75rem 1.25rem; border-radius: .5rem; background: var(--titelblau); color: var(--weiss); font-weight: 700; text-decoration: none; }
.sprung:focus { top: 1rem; }
.wrap { width: min(100% - 2 * var(--rand), 72rem); margin-inline: auto; }
[id] { scroll-margin-top: 4rem; }   /* beim Scrollen bleibt am Handy nur die Menuezeile (3,5 rem) stehen, ab 960 px der ganze Kopf */

/* Auftritte (assets/js/auftritt.js): versteckt NUR unter html.js, Notausgang unter html.js.tg-notaus.
   Dauer und Staffel an EINER Stelle (Paket §2b: Auftritt 0,8–0,9 s, Staffel in 0,1-s-Schritten, nichts spaeter als 0,6 s). */
html.js .auftritt { opacity: 0; translate: 0 1.25rem; transition: opacity .85s ease, translate .85s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--takt, 0) * .1s); }
html.js .auftritt.sichtbar { opacity: 1; translate: 0 0; }
html.js.tg-notaus .auftritt { opacity: 1 !important; translate: 0 0 !important; transition: none !important; }
.takt-1 { --takt: 1; } .takt-2 { --takt: 2; } .takt-3 { --takt: 3; } .takt-4 { --takt: 4; } .takt-5 { --takt: 5; }

/* Wiederkehrende Bausteine */
.dachzeile { display: flex; align-items: center; gap: .5rem; font-family: var(--sans); font-size: .875rem; font-weight: 700; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--titelblau); }
.dachzeile::before { content: ""; flex: none; width: .625rem; height: .625rem; border-radius: 50%; background: var(--kuerbis); animation: dach-puls 3s ease-in-out infinite; }
.nacht .dachzeile { color: var(--mondlicht); }
.abschnitt { padding-block: 3.5rem; }   /* Robert, 23.10. (2. Runde): weniger Freiraum, auf allen Breiten */
.abschnitt h2, .lesung h2 { margin-top: .75rem; font-size: clamp(1.875rem, 1.35rem + 2.3vw, 2.875rem); }
.einleitung { margin-top: 1rem; max-width: 38rem; font-family: var(--serif); font-optical-sizing: auto; font-size: 1.25rem; line-height: 1.5; }
.mikro { font-size: 1rem; line-height: 1.5; }

/* Knoepfe: weich, ohne harte Kante; der Pfeil rueckt beim Zeigen mit */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: .625rem; min-height: 48px; padding: .75rem 1.5rem; border: 0; border-radius: 999px; background: var(--titelrot); color: var(--weiss); font-family: var(--sans); font-size: 1.0625rem; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; box-shadow: 0 10px 24px -12px rgba(154, 42, 31, .7); transition: background-color var(--uebergang), transform var(--uebergang), box-shadow var(--uebergang), color var(--uebergang); }
.knopf:hover { background: var(--titelrot-tief); transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(154, 42, 31, .75); }
.knopf:active { transform: translateY(0); box-shadow: 0 6px 14px -10px rgba(154, 42, 31, .7); }
.knopf--gross { min-height: 54px; padding: .875rem 1.75rem; font-size: 1.125rem; }
.knopf--gross::after { content: ""; flex: none; width: .5em; height: .5em; margin-left: .125rem; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--uebergang); }
.knopf--gross:hover::after { transform: translateX(3px) rotate(-45deg); }
.knopf--ring { background: var(--kuerbis); color: var(--tinte); box-shadow: 0 10px 24px -12px rgba(227, 148, 38, .9); }
.knopf--ring:hover { background: var(--kuerbis-hell); box-shadow: 0 16px 30px -12px rgba(227, 148, 38, .9); }
.knopf--ring:active { box-shadow: 0 6px 14px -10px rgba(227, 148, 38, .9); }

.buch { width: 100%; border-radius: 3px; background: var(--weiss); box-shadow: var(--schatten-buch); object-fit: contain; }
.wimpel { width: 100%; height: 24px; }

/* Kopf — laeuft auf allen Breiten mit (Robert, 23.10. 2. Runde): am Handy zwei Zeilen, oben Zeichen + Sprache,
   darunter Menue + Knopf; ab 960 px eine Zeile. Fortschrittsbalken an der Unterkante, aktiver Menuepunkt leuchtet. */
/* Am Handy ein 2×2-Block (Robert, 23.10. 4. Runde: „unsymmetrisch … kreuz und quer"): links Zeichen + Wortmarke
   ueber dem Menue, beide gleich breit; rechts der Sprachumschalter ueber dem Knopf, beide gleich breit. Beim Scrollen
   verschwindet die obere Zeile (Zeichen + Sprache): der Kopf klebt mit negativem Abstand (--kopf-oben = Hoehe der
   oberen Zeile samt Abstand), so bleibt nur die Menuezeile mit dem Knopf stehen. */
.kopf { --kopf-oben: 3.5rem; position: sticky; top: calc(-1 * var(--kopf-oben)); z-index: 20; background: rgba(249, 251, 254, .92); border-bottom: 1px solid var(--linie); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* Handy: der Sprachumschalter steht NEBEN dem Zeichen (links), der Knopf rechts in der zweiten Zeile — so liegen beide
   nicht mehr uebereinander (Robert, 23.10. 3. Runde: „Abstand zwischen Button und Sprach-Switcher sehr eng"). */
.kopf-innen { display: grid; grid-template-columns: auto auto; justify-content: space-between; grid-template-areas: "marke sprache" "nav knopf"; align-items: center; column-gap: .75rem; row-gap: .5rem; padding-block: .5rem; }
.kopf-mitte { display: contents; }
.wortmarke { grid-area: marke; justify-self: start; display: inline-flex; align-items: center; gap: .625rem; min-height: 40px; font-family: var(--serif); font-optical-sizing: auto; font-size: clamp(1.125rem, .85rem + 1.4vw, 1.5rem); font-weight: 700; line-height: 1.1; color: var(--titelrot); text-decoration: none; white-space: nowrap; }
/* „The Ghost of Halloween" (seit 26.10.2026) ist laenger als „Aedan O’Lantern": zweizeilig gesetzt, damit der Kopf am
   Handy (2×2) und am Rechner (eine Zeile) nicht ueberlaeuft */
.wortmarke-text { white-space: normal; max-width: 6.4em; line-height: 1.02; }
.wortmarke .marke-zeichen { flex: none; width: 2.5rem; height: 2.5rem; transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.wortmarke:hover .marke-zeichen { transform: rotate(-8deg) scale(1.06); }
.hauptnav { grid-area: nav; justify-self: stretch; min-width: 0; }
.hauptnav ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: .5rem; }
.hauptnav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-size: .9375rem; font-weight: 700; color: var(--titelblau); text-decoration: none; transition: color var(--uebergang); }
.hauptnav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .625rem; height: 2px; border-radius: 2px; background: var(--kuerbis); transform: scaleX(0); transform-origin: left center; transition: transform .3s cubic-bezier(.2, .7, .2, 1), background-color var(--uebergang); }
.hauptnav a:hover::after, .hauptnav a:focus-visible::after { transform: scaleX(1); }
.hauptnav a.ist-aktiv { color: var(--titelrot); }
.hauptnav a.ist-aktiv::after { transform: scaleX(1); background: var(--titelrot); }
.sprache { grid-area: sprache; justify-self: stretch; display: flex; align-items: center; padding: .1875rem; border: 1px solid var(--linie); border-radius: 999px; background: var(--weiss); font-size: .8125rem; font-weight: 700; letter-spacing: .04em; }
.sprache-aktiv, .sprache-wahl { flex: 1 1 0; min-width: 2.75rem; display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: 0 .625rem; border-radius: 999px; color: var(--titelblau); text-decoration: none; transition: background-color var(--uebergang), color var(--uebergang); }
.sprache-wahl:hover { background: var(--pergament); }
.sprache-aktiv { background: var(--titelblau); color: var(--weiss); }
.knopf--kopf { grid-area: knopf; justify-self: stretch; min-height: 44px; padding: .5rem .875rem; font-size: .9375rem; background: transparent; color: var(--titelrot); box-shadow: inset 0 0 0 2px var(--titelrot); }
.knopf--kopf:hover, .knopf--kopf.ist-aktiv { background: var(--titelrot); color: var(--weiss); transform: none; box-shadow: inset 0 0 0 2px var(--titelrot); }
.knopf--kopf:active { box-shadow: inset 0 0 0 2px var(--titelrot-tief); }
.fortschritt { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none; }
.fortschritt i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--kuerbis), var(--titelrot)); transform: scaleX(0); transform-origin: left center; }

/* Hero (aus Entwurf B) — der Text liegt UEBER dem Mondschein des Bildes (Pruefbefund B, Kontrast bei 768 px) */
.b-hero { position: relative; overflow: hidden; padding-block: clamp(.75rem, .2rem + 2.4vw, 3rem) clamp(2.25rem, 1.25rem + 3vw, 4rem); }
/* Handy und Tablet (Robert, 23.10. 3. Runde: „die Hero Section noch sehr hässlich … die ganze Sektion in der Farbe"):
   kein Pergament-Schein hinter dem Bild (er faerbte den halben Abschnitt beige), alles mittig unter dem Buch, ruhige
   Abstaende. Der Schein und die linksbuendige Spalte gibt es erst ab 1024 px neben dem Bild. */
.b-hero__innen { position: relative; z-index: 1; display: grid; gap: 1rem; }
.b-hero__text { display: grid; justify-items: center; text-align: center; position: relative; z-index: 1; }
/* Pruefbefund B (Handy): schmaleres Mockup, damit der Hauptknopf im ersten Bildschirm steht */
.b-hero__bild { order: -1; position: relative; isolation: isolate; justify-self: center; width: min(62%, 22rem); }
.b-hero__rahmen { background: #fff; padding: .375rem; border-radius: 12px; box-shadow: var(--schatten-buch); transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease; }
.b-hero__rahmen:hover { transform: translateY(-4px) rotate(-.6deg); box-shadow: 0 2px 4px rgba(39, 42, 91, .14), 0 26px 44px -18px rgba(39, 42, 91, .55); }
.b-hero__rahmen img { display: block; width: 100%; height: auto; object-fit: contain; }
/* Anhaenger als Pille — die Fahnenform mit gerader rechter Kante wirkte abgeschnitten (Robert, 23.10. 2. Runde) */
.b-anhaenger {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0;
  padding: .3125rem .875rem .3125rem .75rem; border-radius: 999px;
  background: var(--pergament); color: var(--titelblau);
  font-size: .9375rem; font-weight: 700; letter-spacing: .01em;
}
.b-anhaenger::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--kuerbis); }
.b-titel { margin-top: .75rem; }
.b-titel__name { display: block; font-weight: 650; letter-spacing: -.012em; line-height: 1.04; font-size: clamp(2rem, .9rem + 5.2vw, 3.25rem); }
.b-titel__rest { display: block; margin-top: .3rem; font-weight: 500; line-height: 1.2; font-size: clamp(1.25rem, .85rem + 2vw, 1.875rem); }
.b-hero__nutzen { margin-top: .875rem; max-width: 30em; font-family: var(--serif); font-optical-sizing: auto; font-size: clamp(1.125rem, 1.05rem + .4vw, 1.3125rem); line-height: 1.5; }
.b-eckdaten { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.b-eckdaten li {
  display: inline-flex; align-items: center; min-height: 34px; padding: .25rem .75rem;
  background: #fff; border: 1px solid var(--linie); border-radius: 999px;
  font-size: .9375rem; font-weight: 600; line-height: 1.3;
}
.b-kauf { margin-top: 1.5rem; width: 100%; max-width: 27rem; }
.b-kauf .knopf { width: 100%; }
.b-kauf__ersatz { margin-top: .375rem; font-size: 1rem; color: var(--grau-text); }
.b-kauf__ersatz a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-weight: 700; color: var(--titelblau); }
.b-kauf__ersatz a::after { content: ""; flex: none; width: .45em; height: .45em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.b-hero__beleg { margin-top: 1.125rem; max-width: 30em; position: relative; font-size: .9375rem; color: var(--grau-text); }

/* Blaetter im Hero: treiben von oben nach unten, drehen sich, verblassen am Rand. Reine CSS-Bewegung, kein Inhalt. */
.blaetter { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.blatt { position: absolute; top: -8%; left: var(--x, 50%); width: var(--g, 22px); height: var(--g, 22px); opacity: 0; animation: blatt-fall var(--d, 26s) linear infinite; animation-delay: var(--s, 0s); will-change: top, transform; }
.blatt svg { width: 100%; height: 100%; fill: var(--kuerbis); filter: drop-shadow(0 2px 2px rgba(38, 34, 31, .12)); }
.blatt .blatt-ader { fill: none; stroke: rgba(38, 34, 31, .35); stroke-width: 1.2; stroke-linecap: round; }
.blatt-1 { --x: 6%; --g: 20px; --d: 27s; --s: -5s; }
.blatt-2 { --x: 22%; --g: 26px; --d: 32s; --s: -17s; } .blatt-2 svg { fill: var(--titelrot); }
.blatt-3 { --x: 41%; --g: 18px; --d: 24s; --s: -11s; } .blatt-3 svg { fill: var(--kuerbis-hell); }
.blatt-4 { --x: 58%; --g: 24px; --d: 30s; --s: -2s; } .blatt-4 svg { fill: var(--titelrot-tief); }
.blatt-5 { --x: 73%; --g: 20px; --d: 26s; --s: -21s; }
.blatt-6 { --x: 86%; --g: 28px; --d: 34s; --s: -9s; } .blatt-6 svg { fill: var(--titelrot); }
.blatt-7 { --x: 94%; --g: 16px; --d: 23s; --s: -14s; } .blatt-7 svg { fill: var(--kuerbis-hell); }
@keyframes blatt-fall {
  0% { top: -8%; transform: translateX(0) rotate(0deg); opacity: 0; }
  8% { opacity: .9; }
  30% { transform: translateX(-26px) rotate(70deg); }
  55% { transform: translateX(20px) rotate(160deg); }
  80% { transform: translateX(-18px) rotate(250deg); }
  92% { opacity: .9; }
  100% { top: 104%; transform: translateX(12px) rotate(330deg); opacity: 0; }
}
@keyframes dach-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(227, 148, 38, .5); }
  50% { box-shadow: 0 0 0 6px rgba(227, 148, 38, 0); }
}

/* Lesungsband (Nachthimmel als Akzentflaeche) mit glimmenden Lichtern */
.nacht { position: relative; background: var(--nacht); color: var(--mondlicht); overflow-x: clip; }
.nacht h2, .nacht h3 { color: var(--mondlicht); }
.nacht a:not(.knopf) { color: var(--mondlicht); }
.nacht > section { position: relative; z-index: 1; }
.lichter { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.lichter i { position: absolute; left: var(--x); top: var(--y); width: 6px; height: 6px; border-radius: 50%; background: var(--kuerbis); box-shadow: 0 0 10px 3px rgba(227, 148, 38, .5); opacity: .2; animation: glimmen var(--d, 3.4s) ease-in-out infinite; animation-delay: var(--s, 0s); }
.lichter i:nth-child(1) { --x: 4%; --y: 10%; --d: 3.2s; --s: -1s; }
.lichter i:nth-child(2) { --x: 12%; --y: 58%; --d: 4.1s; --s: -2.2s; }
.lichter i:nth-child(3) { --x: 27%; --y: 86%; --d: 3.6s; --s: -.6s; }
.lichter i:nth-child(4) { --x: 45%; --y: 20%; --d: 4.6s; --s: -3s; }
.lichter i:nth-child(5) { --x: 61%; --y: 72%; --d: 3.1s; --s: -1.7s; }
.lichter i:nth-child(6) { --x: 74%; --y: 12%; --d: 3.9s; --s: -.3s; }
.lichter i:nth-child(7) { --x: 88%; --y: 46%; --d: 4.4s; --s: -2.6s; }
.lichter i:nth-child(8) { --x: 96%; --y: 82%; --d: 3.3s; --s: -1.2s; }
.lichter i:nth-child(9) { --x: 35%; --y: 48%; --d: 4.8s; --s: -3.6s; }
@keyframes glimmen {
  0%, 100% { opacity: .15; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.25); }
}
.lesung { padding-block: 2.25rem 2.5rem; }
.lesung .wimpel { margin-bottom: 1.5rem; }
.orte { list-style: none; margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem 1.375rem; font-family: var(--serif); font-optical-sizing: auto; font-size: 1.3125rem; font-weight: 600; line-height: 1.3; }
.orte li { display: flex; align-items: center; gap: .5rem; }
.orte li::before { content: ""; flex: none; width: .625rem; height: .625rem; border-radius: 50%; background: var(--kuerbis); box-shadow: 0 0 0 4px rgba(227, 148, 38, .28); }
.angebot { margin-top: 1.5rem; padding: 1.25rem 1.25rem .5rem; border: 1px solid rgba(232, 229, 222, .35); border-radius: var(--radius); background: rgba(27, 38, 80, .45); }
.angebot h3 { font-size: 1.375rem; }
.angebot dl { margin-top: .5rem; }
.angebot dl > div { display: grid; gap: .5rem; padding-block: 1rem; }
.angebot dl > div + div { border-top: 1px dashed rgba(232, 229, 222, .4); }
.angebot dt { font-family: var(--serif); font-optical-sizing: auto; font-size: 1.25rem; font-weight: 600; line-height: 1.2; }
.angebot dd { display: grid; gap: .375rem; justify-items: start; }
.angebot .notiz { font-size: 1rem; }

/* Die Eintrittskarte liegt seit der 3. Runde (23.10.) auf hellem Grund: das Nachtband umfasst nur noch die Lesungen —
   am Handy war sonst ein ganzer Bildschirm dunkelblau (Robert: „dass die ganze Sektion in der Farbe wird"). */
.beleg { padding-block: 2.5rem 3rem; }
.ticket { position: relative; display: grid; border-radius: var(--radius); background: var(--pergament); color: var(--tinte); box-shadow: var(--schatten-karte); }
.ticket h2 { margin-top: .5rem; color: var(--titelblau); font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.375rem); }
.ticket h3 { margin-top: 1.75rem; color: var(--titelblau); font-size: 1.25rem; }
.ticket .dachzeile { color: var(--titelblau); }
.ticket a:not(.knopf) { color: var(--titelblau); }
.ticket-stub { position: relative; padding: 1.25rem 1.5rem; border-bottom: 2px dashed rgba(39, 42, 91, .4); }
.ticket-stub::before, .ticket-stub::after { content: ""; position: absolute; bottom: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--papier); }
.ticket-stub::before { left: -12px; }
.ticket-stub::after { right: -12px; }
.ticket-stub time { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: .75rem; }
.ticket-tag { font-family: var(--serif); font-optical-sizing: auto; font-size: 4rem; font-weight: 650; line-height: 1; color: var(--titelrot); }
.ticket-monat { font-family: var(--serif); font-optical-sizing: auto; font-size: 1.5rem; font-weight: 600; line-height: 1.1; color: var(--titelblau); }
.ticket-jahr { font-size: 1.0625rem; font-weight: 700; color: var(--titelblau); }
.ticket-inhalt { padding: 1.5rem 1.5rem 1.75rem; }
.ticket-inhalt > p:not(.dachzeile) { margin-top: 1rem; font-family: var(--serif); font-optical-sizing: auto; font-size: 1.125rem; line-height: 1.55; }
.rueckblick-bild { margin-top: 1.25rem; }
.termine { list-style: none; margin-top: .75rem; display: grid; gap: .5rem; }
.termine li { padding: .625rem .875rem; border-radius: .625rem; background: var(--papier); font-weight: 700; color: var(--titelblau); }
.beleg-aktion { margin-top: 2.25rem; display: grid; gap: .75rem; justify-items: start; }
.beleg-frage { font-family: var(--serif); font-optical-sizing: auto; font-size: 1.5rem; font-weight: 600; line-height: 1.2; color: var(--titelblau); text-wrap: balance; }
.beleg .mikro { color: var(--grau-text); }

/* Woher die Kuerbislaterne kommt: vier Karten statt einer Textspalte */
.pfad { list-style: none; margin-top: 2rem; display: grid; gap: 1.25rem; }
.pfad li { position: relative; display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: 1rem; padding: 1.5rem 1.25rem 1.375rem; border-radius: var(--radius); background: var(--weiss); border: 1px solid var(--linie); box-shadow: var(--schatten-karte); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease; }
.pfad li:hover { transform: translateY(-5px); box-shadow: 0 2px 4px rgba(39, 42, 91, .06), 0 26px 44px -24px rgba(39, 42, 91, .5); }
.pfad-bild { grid-row: 1 / span 2; width: 5.5rem; height: 5.5rem; padding: .75rem; border-radius: 50%; background: var(--pergament); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
/* Buchillustration im Kreis (Tilman, 26.10.2026: „in diese runden Kreise reinmachen") — Ring wie bei den Teamfotos. */
.pfad-bild--illustration { margin: 0; padding: 0; overflow: hidden; box-shadow: 0 0 0 4px var(--weiss), 0 0 0 5px rgba(227, 148, 38, .45); }
.pfad-bild--illustration img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pfad li:hover .pfad-bild { transform: rotate(-8deg) scale(1.06); }
.pfad h3 { align-self: center; font-size: 1.375rem; }
.pfad .nr { position: absolute; top: -.75rem; left: 1.125rem; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--titelrot); color: var(--weiss); font-family: var(--sans); font-size: .875rem; font-weight: 700; line-height: 1; box-shadow: 0 0 0 3px var(--papier); }
.pfad p { margin-top: .5rem; max-width: 34rem; font-family: var(--serif); font-optical-sizing: auto; font-size: 1.125rem; line-height: 1.55; }
/* Vorne und hinten im Buch als EIN Bild (Robert, 26.10.2026: „die eine Hälfte links die Vorderseite, rechts die
   Hinterseite"): beide Bilder liegen deckungsgleich übereinander, das hintere zeigt nur seine rechte Hälfte. Der
   Schnitt ist der ausdrückliche Wunsch — keine Abweichung von „Bilder nie abschneiden". */
.vorher-nachher { margin: 2.5rem 0 0; }
.vn-bild { position: relative; overflow: hidden; border-radius: 6px; background: var(--weiss); box-shadow: var(--schatten-buch); }
.vn-bild img { display: block; width: 100%; height: auto; }
.vn-bild .vn-hinten { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; clip-path: inset(0 0 0 50%); }
.vn-naht { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; translate: -50% 0; background: var(--weiss); box-shadow: 0 0 12px rgba(38, 34, 31, .35); }
.vn-naht::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2.25rem; height: 2.25rem; translate: -50% -50%; border-radius: 50%; background: var(--weiss) radial-gradient(circle, var(--kuerbis) 0 .4rem, transparent .45rem); box-shadow: 0 4px 14px rgba(38, 34, 31, .3); }
.vn-unterschrift { margin-top: .75rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; font-size: .9375rem; color: var(--grau-text); }
.vn-rechts { text-align: right; }
.klappentext { position: relative; margin: 2.5rem auto 0; max-width: 44rem; padding: 2.25rem 1.75rem 2rem; border-radius: var(--radius); background: var(--nacht); color: var(--mondlicht); outline: 1px solid rgba(232, 229, 222, .7); outline-offset: -.625rem; overflow: hidden; }
.klappentext::before { content: ""; position: absolute; right: -2.5rem; top: -2.5rem; width: 9rem; height: 9rem; border-radius: 50%; background: radial-gradient(circle, rgba(248, 241, 219, .22) 0 55%, rgba(248, 241, 219, 0) 72%); pointer-events: none; }
.klappentext blockquote { position: relative; font-family: var(--serif); font-optical-sizing: auto; font-size: 1.1875rem; font-weight: 400; line-height: 1.65; }
.klappentext blockquote p + p { margin-top: .875rem; }
.klappentext figcaption { margin-top: 1.25rem; font-size: .875rem; font-weight: 700; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; }

/* Blick ins Buch */
.einblick { background: var(--pergament); }
.galerie { margin-top: 1.75rem; display: grid; gap: 1.5rem; }
.galerie figcaption { margin-top: .75rem; font-size: 1rem; }
.galerie .buch { transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease; }
.galerie figure:hover .buch { transform: translateY(-5px); box-shadow: 0 2px 4px rgba(39, 42, 91, .14), 0 28px 46px -18px rgba(39, 42, 91, .55); }

/* Team: drei Personen zum Aufklappen (details/summary, ohne Skript; name="team" schliesst die anderen) — rund
   ausgeschnittene Fotos sind Tilmans Wunsch (WhatsApp 26.10.2026) */
.team-raster { display: grid; gap: 2rem; }
.team-liste { display: grid; gap: .75rem; }
.mitglied { border-radius: var(--radius); background: var(--weiss); border: 1px solid var(--linie); box-shadow: var(--schatten-karte); transition: border-color var(--uebergang), box-shadow var(--uebergang); }
.mitglied[open] { border-color: rgba(227, 148, 38, .55); }
.person-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; padding: 1rem 1.25rem; cursor: pointer; list-style: none; }
.person-kopf::-webkit-details-marker { display: none; }
.mitglied .person-kopf:hover .person-name { color: var(--titelrot); }
.person-titel { display: grid; gap: .125rem; }
.person-name { font-family: var(--serif); font-optical-sizing: auto; font-size: 1.375rem; font-weight: 600; line-height: 1.2; color: var(--titelblau); transition: color var(--uebergang); }
.person-rolle { font-size: .8125rem; font-weight: 700; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--grau-text); }
.person-zeichen { flex: none; position: relative; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--pergament); transition: background-color var(--uebergang), transform .35s cubic-bezier(.2, .7, .2, 1); }
.person-zeichen::before, .person-zeichen::after { content: ""; position: absolute; left: 50%; top: 50%; width: .875rem; height: 2px; translate: -50% -50%; border-radius: 2px; background: var(--titelblau); }
.person-zeichen::after { rotate: 90deg; transition: rotate .35s cubic-bezier(.2, .7, .2, 1); }
.mitglied[open] .person-zeichen { background: var(--kuerbis); }
.mitglied[open] .person-zeichen::after { rotate: 0deg; }
.person-inhalt { display: grid; gap: 1.25rem; justify-items: center; padding: .25rem 1.25rem 1.5rem; }
.person-bild { width: 9rem; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--pergament); box-shadow: 0 0 0 5px var(--weiss), 0 0 0 7px rgba(227, 148, 38, .45); }
.person-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.person-zier { display: block; width: 100%; height: 100%; }
.person-text p { max-width: 38rem; font-family: var(--serif); font-optical-sizing: auto; font-size: 1.0625rem; line-height: 1.6; }
.person-text p + p { margin-top: .75rem; }
.person-links { list-style: none; margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.person-links a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .375rem 1rem; border: 1px solid var(--linie); border-radius: 999px; background: var(--papier); font-size: .9375rem; font-weight: 700; text-decoration: none; transition: border-color var(--uebergang), transform var(--uebergang); }
.person-links a::after { content: ""; flex: none; width: .45em; height: .45em; border-right: 2px solid currentColor; border-top: 2px solid currentColor; rotate: 45deg; }
.person-links a:hover { border-color: var(--titelblau); transform: translateY(-1px); }
.team-schluss { max-width: 44rem; padding: 1.5rem 1.5rem 1.5rem 1.75rem; border-left: 4px solid var(--kuerbis); border-radius: 0 var(--radius) var(--radius) 0; background: var(--pergament); font-family: var(--serif); font-optical-sizing: auto; font-size: 1.125rem; line-height: 1.6; color: var(--titelblau); }
.team-schluss p + p { margin-top: .875rem; }

/* Buch kaufen: Steckbrief statt Tabelle, Umschlag leicht gekippt */
.kaufmodul { overflow: hidden; border-radius: 1.5rem; background: var(--weiss); border: 1px solid var(--linie); box-shadow: var(--schatten-karte); }
.kaufmodul-kopf { position: relative; overflow: hidden; padding: 1.75rem var(--rand-modul, 1.25rem); background: var(--nacht); color: var(--mondlicht); }
.kaufmodul-kopf::after { content: ""; position: absolute; right: -3rem; top: -4rem; width: 12rem; height: 12rem; border-radius: 50%; background: radial-gradient(circle, var(--kuerbis) 0 1.5px, transparent 2px) 0 0 / 12px 12px, rgba(248, 241, 219, .12); opacity: .7; pointer-events: none; }
.kaufmodul-kopf > * { position: relative; }
.kaufmodul-kopf h2 { margin: .5rem 0 0; color: var(--mondlicht); }
.kaufmodul-kopf .dachzeile { color: var(--mondlicht); }
.kaufmodul-titel { margin-top: .375rem; font-family: var(--serif); font-optical-sizing: auto; font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
.kaufmodul-koerper { display: grid; gap: 2.25rem; padding: 1.75rem var(--rand-modul, 1.25rem) 2rem; }
.kauf-buch { display: grid; justify-items: center; }
.kauf-buch__bild { width: min(100%, 15rem); padding-block: .5rem; }
.kauf-buch__bild .buch { transform: rotate(-3deg); transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease; }
.kauf-buch__bild:hover .buch { transform: rotate(0deg) scale(1.03); box-shadow: 0 2px 4px rgba(39, 42, 91, .14), 0 26px 44px -18px rgba(39, 42, 91, .55); }
.fakten { margin-top: 1.5rem; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
.fakten > div { display: grid; gap: .125rem; padding: .75rem .875rem; border-radius: .875rem; background: var(--pergament); }
.fakten dt { font-size: .75rem; font-weight: 700; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--titelblau); }
.fakten dd { font-family: var(--serif); font-optical-sizing: auto; font-size: 1.125rem; font-weight: 600; line-height: 1.3; color: var(--tinte); }
.kauf-einleitung { font-family: var(--serif); font-optical-sizing: auto; font-size: 1.1875rem; line-height: 1.55; }
/* Kaufknopf: zwei Zeilen (Aufruf und Haendler), Vermerk „Partnerlink" als Faehnchen */
.kaufknopf { position: relative; display: inline-grid; justify-items: center; gap: .125rem; margin-top: 1.5rem; min-height: 56px; padding: .625rem 2.25rem; border-radius: 999px; background: var(--titelrot); color: var(--weiss); text-align: center; text-decoration: none; box-shadow: 0 10px 24px -12px rgba(154, 42, 31, .7); transition: background-color var(--uebergang), transform var(--uebergang), box-shadow var(--uebergang); }
.kaufknopf:hover { background: var(--titelrot-tief); transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(154, 42, 31, .75); }
.kaufknopf-zeile { font-size: 1.125rem; font-weight: 700; line-height: 1.2; }
.kaufknopf-haendler { font-size: .9375rem; font-weight: 700; line-height: 1.25; }
/* Mehrere Kaufknoepfe (31.10.2026: E-Book Deutsch und Englisch) — gleich gross, am Handy untereinander, ab Tablet
   nebeneinander; keiner steht ueber dem anderen. */
.kaufknoepfe { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.kaufknoepfe .kaufknopf { display: grid; width: 100%; margin-top: 0; padding-inline: 1.25rem; }
.kaufknopf-hinweis { font-size: .8125rem; font-weight: 400; line-height: 1.3; color: rgba(255, 255, 255, .88); }
@media (min-width: 30em) { .kaufknoepfe { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } }
.partner-marke { position: absolute; top: -.875rem; right: -.375rem; padding: .125rem .5rem; border-radius: 999px; background: var(--mondlicht); color: var(--titelblau); font-size: .8125rem; font-weight: 700; line-height: 1.4; letter-spacing: .02em; }
.ersatz { position: relative; margin-top: 1.25rem; padding: 1.125rem 1.25rem 1.125rem 3.25rem; border-radius: 1rem; background: var(--pergament); font-family: var(--serif); font-optical-sizing: auto; font-size: 1.125rem; line-height: 1.5; }
.ersatz::before { content: ""; position: absolute; left: 1.125rem; top: 1.375rem; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--kuerbis); box-shadow: 0 0 0 5px rgba(227, 148, 38, .25); }
.ersatz a { font-weight: 700; }
.hinweis { margin-top: 1rem; font-size: 1rem; }

/* Kontakt: Textspalte bleibt neben dem Formular stehen, Formular ruhig und leicht */
.kontakt { background: var(--pergament); }
.kontakt-raster { display: grid; gap: 2.5rem; align-items: start; }
.kontakt-text > p:not(.dachzeile):not(.kontakt-mail) { margin-top: 1rem; max-width: 34rem; font-family: var(--serif); font-optical-sizing: auto; font-size: 1.1875rem; line-height: 1.55; }
.ablauf { list-style: none; counter-reset: ablauf; margin-top: 1.75rem; display: grid; gap: 1rem; }
.ablauf li { counter-increment: ablauf; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: .875rem; align-items: start; }
.ablauf li::before { content: counter(ablauf); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--nacht); color: var(--mondlicht); font-weight: 700; line-height: 1; }
.ablauf-zeit { display: block; margin-top: .25rem; font-weight: 700; color: var(--titelblau); }
.kontakt-mail { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--linie); display: grid; gap: .25rem; font-size: 1rem; }
.kontakt-mail__label { color: var(--grau-text); }
.kontakt-mail a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; word-break: break-all; }
.formular { position: relative; display: grid; gap: 1.25rem; padding: 1.5rem 1.25rem; border-radius: 1.5rem; background: var(--weiss); border: 1px solid var(--linie); box-shadow: var(--schatten-karte); }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { margin-bottom: .75rem; padding: 0; font-size: .8125rem; font-weight: 700; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; color: var(--grau-text); }
.anliegen-wahl { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem 1rem .5rem .75rem; border: 1px solid var(--linie); border-radius: 999px; background: var(--papier); color: var(--titelblau); font-weight: 700; line-height: 1.2; transition: background-color var(--uebergang), border-color var(--uebergang), color var(--uebergang); }
.chip span::before { content: ""; flex: none; width: 1rem; height: 1rem; border: 2px solid currentColor; border-radius: 50%; opacity: .55; transition: opacity var(--uebergang), background-color var(--uebergang); }
.chip:hover span { border-color: var(--titelblau); }
.chip input:checked + span { background: var(--titelblau); border-color: var(--titelblau); color: var(--weiss); }
.chip input:checked + span::before { opacity: 1; background: var(--kuerbis); box-shadow: inset 0 0 0 2px var(--titelblau); }
.chip input:focus-visible + span { outline: 3px solid var(--titelblau); outline-offset: 3px; }
.feld-reihe { display: grid; gap: 1.25rem; }
.feldgruppe { display: grid; gap: .375rem; }
.feldgruppe label { font-size: .9375rem; font-weight: 700; color: var(--titelblau); }
.freiwillig { font-weight: 400; color: var(--grau-text); }
.formular input[type="text"], .formular input[type="email"], .formular input[type="tel"], .formular textarea { width: 100%; min-height: 52px; padding: .75rem 1rem; border: 1px solid var(--linie); border-radius: .875rem; background: var(--papier); color: var(--tinte); font: inherit; transition: border-color var(--uebergang), box-shadow var(--uebergang), background-color var(--uebergang); }
.formular input[type="text"]:hover, .formular input[type="email"]:hover, .formular input[type="tel"]:hover, .formular textarea:hover { border-color: rgba(39, 42, 91, .4); }
.formular input[type="text"]:focus-visible, .formular input[type="email"]:focus-visible, .formular input[type="tel"]:focus-visible, .formular textarea:focus-visible { outline: none; border-color: var(--titelblau); background: var(--weiss); box-shadow: 0 0 0 4px rgba(227, 148, 38, .35); }
.formular textarea { min-height: 9.5rem; resize: vertical; }
.formular input:user-invalid, .formular textarea:user-invalid { border-color: var(--titelrot); }
.hilfe { font-size: .9375rem; line-height: 1.5; color: var(--grau-text); }
.honigtopf { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.formular .honigtopf input { width: 16rem; height: 48px; }
.datenschutz { font-size: .9375rem; line-height: 1.5; color: var(--grau-text); }
.formular .knopf { justify-self: stretch; }

/* Danke-Seite und Rechtstexte */
.danke { padding-block: 4rem 5rem; }
.danke-karte { max-width: 44rem; padding: 2rem 1.5rem; border-radius: 1.5rem; background: var(--pergament); }
.danke-karte h1 { margin-top: .75rem; font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
.danke-karte > p:not(.dachzeile) { margin-top: 1rem; font-family: var(--serif); font-optical-sizing: auto; font-size: 1.1875rem; line-height: 1.55; }
.danke-karte .knopf { margin-top: 1.75rem; }
.danke-mail { font-weight: 700; }
.danke-buch { max-width: 44rem; margin-top: 2.5rem; }
.danke-buch figcaption { margin-top: .75rem; font-size: 1rem; }
.danke-buch figcaption a { font-weight: 700; }
.rechtstext { padding-block: 3rem 5rem; }
/* „Datenschutzerklaerung" ist ein Wort von 20 Zeichen: bei 2rem lief es ab 360 px nicht mehr in die Spalte und brach
   mitten im Wort (wortbruch-messen.mjs, 21.10.2026) — deshalb klein anfangen. */
.rechtstext h1 { font-size: clamp(1.5rem, 1rem + 2.6vw, 3rem); }
.rechtstext-inhalt { margin-top: 1.5rem; max-width: 44rem; }
.rechtstext-inhalt h2 { margin-top: 2rem; font-size: 1.5rem; }
.rechtstext-inhalt h3 { margin-top: 1.5rem; font-size: 1.25rem; }
.rechtstext-inhalt p, .rechtstext-inhalt ul, .rechtstext-inhalt ol { margin-top: .75rem; }
.rechtstext-inhalt ul, .rechtstext-inhalt ol { padding-left: 1.25rem; }

/* Fuss (Nachthimmel als Akzentflaeche) mit Wellenkante, Zeichen, Pillen-Links und Zeile ganz unten */
.fuss { position: relative; padding-block: 4rem 1.75rem; background: var(--nacht); color: var(--mondlicht); }
.fuss-welle { position: absolute; left: 0; right: 0; top: -1px; width: 100%; height: 40px; color: var(--pergament); }
body:has(.danke) .fuss-welle, body:has(.rechtstext) .fuss-welle { color: var(--papier); }
.fuss a { color: var(--mondlicht); }
.fuss-raster { display: grid; gap: 2.5rem; }
.fuss-marke { display: flex; align-items: center; gap: .875rem; font-family: var(--serif); font-optical-sizing: auto; font-size: 1.5rem; font-weight: 700; line-height: 1.15; }
.fuss-marke .marke-zeichen { flex: none; width: 3.25rem; height: 3.25rem; }
.fuss-buchtitel { margin-top: .875rem; font-family: var(--serif); font-optical-sizing: auto; font-size: 1.0625rem; font-style: italic; color: var(--mondlicht); }
.fuss-instagram { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; min-height: 44px; padding: .375rem 1rem; border: 1px solid rgba(232, 229, 222, .35); border-radius: 999px; font-size: .9375rem; font-weight: 700; text-decoration: none; transition: background-color var(--uebergang), border-color var(--uebergang); }
.fuss-instagram::before { content: ""; flex: none; width: .875rem; height: .875rem; border: 2px solid currentColor; border-radius: 4px; box-shadow: inset 0 0 0 2px var(--nacht), inset 0 0 0 4px currentColor; }
.fuss-instagram:hover { background: rgba(232, 229, 222, .12); border-color: var(--mondlicht); }
.fuss-anhaenger { margin-top: .25rem; max-width: 22rem; font-size: 1rem; color: rgba(232, 229, 222, .8); }
.fuss-titel { margin-bottom: .625rem; font-size: .8125rem; font-weight: 700; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: rgba(232, 229, 222, .75); }
.fuss ul { list-style: none; display: grid; gap: .25rem; }
.fuss-personen li { display: grid; gap: .0625rem; padding-block: .25rem; }
.fuss-personen .rolle { font-size: .8125rem; color: rgba(232, 229, 222, .7); }
.fuss-personen .rolle:empty { display: none; }
.fuss-personen .person { font-family: var(--serif); font-optical-sizing: auto; font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.fuss-nachweis { font-size: 1rem; }
.fuss-nav { margin-top: 1.5rem; }
.fuss-nav ul { display: flex; flex-wrap: wrap; gap: .5rem; }
.fuss-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: .375rem 1rem; border: 1px solid rgba(232, 229, 222, .35); border-radius: 999px; font-size: .9375rem; font-weight: 700; text-decoration: none; transition: background-color var(--uebergang), border-color var(--uebergang), transform var(--uebergang); }
.fuss-nav a:hover { background: rgba(232, 229, 222, .12); border-color: var(--mondlicht); transform: translateY(-1px); }
.fuss-hinweis { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(232, 229, 222, .25); font-size: 1rem; }
.fuss-unten { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(232, 229, 222, .25); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1.5rem; font-size: .9375rem; color: rgba(232, 229, 222, .8); }
.nach-oben { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-weight: 700; text-decoration: none; }
.nach-oben::after { content: ""; flex: none; width: .5em; height: .5em; margin-top: .2em; border-left: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--uebergang); }
.nach-oben:hover::after { transform: translateY(-3px) rotate(45deg); }

/* Einwilligungshinweis (Statistik): steht nur im Dokument, wenn eine Mess-ID eingetragen ist; faehrt von unten ein.
   Beide Knoepfe gleich gross — Ablehnen ist genauso leicht wie Zustimmen. */
.einwilligung { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 0 var(--rand) var(--rand); transform: translateY(110%); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.einwilligung[hidden] { display: none; }
.einwilligung.zeigt { transform: none; }
.einwilligung-innen { max-width: 44rem; margin-inline: auto; padding: 1.25rem 1.25rem 1.125rem; border-radius: var(--radius); background: var(--weiss); border: 1px solid var(--linie); box-shadow: 0 2px 6px rgba(39, 42, 91, .12), 0 24px 48px -20px rgba(39, 42, 91, .55); }
.einwilligung-titel { font-family: var(--serif); font-optical-sizing: auto; font-size: 1.25rem; font-weight: 600; line-height: 1.2; color: var(--titelblau); }
.einwilligung-text { margin-top: .5rem; font-size: 1rem; line-height: 1.5; }
.einwilligung-text a { font-weight: 700; }
.einwilligung-knoepfe { margin-top: 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
/* Zustimmen und Ablehnen tragen DIESELBE Klasse und sind gleich breit — keine Farbe lenkt zum Zustimmen
   (Hausstandard: „Ablehnen gleichwertig, keine Dark Patterns"; Datenschutzerklaerung: „gleichwertige Schaltflaechen").
   Wache: scripts/pruefungen/einwilligung-gleichwertig.mjs. */
/* Raster statt Fluss: Akzeptieren und Ablehnen sind auf den Pixel gleich breit (im Fluss wuchsen sie je nach Wortlaenge);
   am Handy steht „Einstellungen" darunter ueber die volle Breite, ab 40em alle drei nebeneinander. */
.einwilligung-knoepfe .knopf { min-width: 0; padding-inline: .75rem; }
.einwilligung-knoepfe [data-einwilligung="einstellungen"] { grid-column: 1 / -1; }
@media (min-width: 40em) {
  .einwilligung-knoepfe { grid-template-columns: repeat(3, minmax(0, 13rem)); }
  .einwilligung-knoepfe [data-einwilligung="einstellungen"] { grid-column: auto; }
}
/* Einstellungen (Robert, 26.10.2026: „OK mit Ablehnen und weitere Einstellungen"): Kategorien mit Schalter, aufgeklappt
   ueber den Knopf „Einstellungen". Am Handy scrollt der Hinweis in sich, statt aus dem Bild zu wachsen. */
.einwilligung-innen { max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; }
.einwilligung-wahl { margin-top: 1rem; border-top: 1px solid var(--linie); }
.einwilligung-wahl[hidden] { display: none; }
.wahl-zeile { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .875rem 0; border-bottom: 1px solid var(--linie); }
.wahl-text { min-width: 0; font-size: .9375rem; line-height: 1.45; color: var(--grau-text); }
.wahl-titel { font-family: var(--sans); font-size: 1rem; font-weight: 700; color: var(--titelblau); }
.wahl-titel + p { margin-top: .125rem; }
.wahl-immer { flex: none; padding: .25rem .625rem; border-radius: 999px; background: var(--pergament); color: var(--titelblau); font-size: .8125rem; font-weight: 700; white-space: nowrap; }
.schalter { flex: none; appearance: none; -webkit-appearance: none; position: relative; width: 2.75rem; height: 1.5rem; margin: 0; border-radius: 999px; background: rgba(39, 42, 91, .22); cursor: pointer; transition: background-color var(--uebergang); }
.schalter::before { content: ""; position: absolute; top: .1875rem; left: .1875rem; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--weiss); box-shadow: 0 1px 3px rgba(39, 42, 91, .35); transition: transform var(--uebergang); }
.schalter:checked { background: var(--titelblau); }
.schalter:checked::before { transform: translateX(1.25rem); }
.schalter:disabled { cursor: not-allowed; background: rgba(39, 42, 91, .1); }
.schalter:disabled::before { box-shadow: none; background: var(--mondlicht); }
.einwilligung-wahl .knopf { margin-top: 1rem; width: 100%; max-width: 16rem; }
.knopf--wahl { background: var(--weiss); color: var(--titelblau); box-shadow: inset 0 0 0 2px var(--titelblau); }
.knopf--wahl:hover { background: var(--titelblau); color: var(--weiss); transform: none; box-shadow: inset 0 0 0 2px var(--titelblau); }
.knopf--wahl:active { box-shadow: inset 0 0 0 2px var(--titelblau); }
.fuss-nav-knopf { display: inline-flex; align-items: center; min-height: 44px; padding: .375rem 1rem; border: 1px solid rgba(232, 229, 222, .35); border-radius: 999px; background: transparent; color: var(--mondlicht); font: inherit; font-size: .9375rem; font-weight: 700; cursor: pointer; transition: background-color var(--uebergang), border-color var(--uebergang), transform var(--uebergang); }
.fuss-nav-knopf:hover { background: rgba(232, 229, 222, .12); border-color: var(--mondlicht); transform: translateY(-1px); }

/* ab 600 px */
@media (min-width: 37.5em) {
  :root { --rand: 1.5rem; }
  .angebot dl > div { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; column-gap: 1rem; }
  .kaufmodul { --rand-modul: 2rem; }
  .formular { padding: 2rem; }
  .feld-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formular .knopf { justify-self: start; }
  .danke-karte { padding: 2.5rem 2.25rem; }
}
/* ab 768 px */
@media (min-width: 48em) {
  .abschnitt { padding-block: 4.5rem; }
  .b-kauf { width: auto; }
  .b-kauf .knopf { width: auto; min-width: 17rem; }
  .ticket { grid-template-columns: 11rem minmax(0, 1fr); }
  .ticket-stub { display: grid; place-items: center; padding: 2rem 1rem; border-bottom: 0; border-right: 2px dashed rgba(39, 42, 91, .4); text-align: center; }
  .ticket-stub::before, .ticket-stub::after { left: auto; right: -13px; }
  .ticket-stub::before { top: -12px; bottom: auto; }
  .ticket-stub::after { top: auto; bottom: -12px; }
  .ticket-stub time { flex-direction: column; align-items: center; row-gap: .375rem; }
  .ticket-tag { font-size: 5rem; }
  .ticket-inhalt { padding: 2.25rem 2.5rem 2.5rem; }
  .pfad { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
  .galerie-gross { grid-column: 1 / -1; }
  .team-raster { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 3.5rem; row-gap: 2rem; align-items: start; }
  .team-kopf { position: sticky; top: 6rem; }
  .team-schluss { grid-column: 2; }
  .person-inhalt { grid-template-columns: 11rem minmax(0, 1fr); justify-items: start; align-items: start; column-gap: 1.75rem; padding: .25rem 1.75rem 1.75rem; }
  .person-bild { width: 11rem; }
  .fuss { padding-block: 4.5rem 2rem; }
  .fuss-raster { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
}
/* ab 960 px: Kopf in einer Zeile */
@media (min-width: 60em) {
  [id] { scroll-margin-top: 5rem; }
  .kopf { top: 0; }
  .kopf-innen { grid-template-columns: auto minmax(0, 1fr) auto auto; justify-content: normal; grid-template-areas: "marke nav sprache knopf"; column-gap: 1.5rem; row-gap: 0; padding-block: .625rem; }
  .sprache { justify-self: end; display: inline-flex; }
  .sprache-aktiv, .sprache-wahl { flex: none; }
  .knopf--kopf { justify-self: end; }
  .hauptnav ul { justify-content: flex-end; column-gap: 2rem; }
  .sprache { justify-self: end; margin-left: .5rem; }
  .knopf--kopf { padding-inline: 1.25rem; }
}
/* ab 1024 px */
@media (min-width: 64em) {
  :root { --rand: 2rem; }
  .b-hero__innen { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; column-gap: clamp(2rem, 4vw, 4.5rem); }
  .b-hero__text { grid-column: 1; grid-row: 1; justify-items: start; text-align: left; }
  .b-eckdaten { justify-content: flex-start; }
  .b-hero__nutzen, .b-hero__beleg { max-width: 34em; }
  .b-hero__beleg { padding-left: 1.125rem; }
  .b-hero__beleg::before { content: ""; position: absolute; left: 0; top: .5em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--kuerbis); }
  .b-hero__bild { order: 0; grid-column: 2; grid-row: 1; width: 100%; justify-self: stretch; }
  .b-hero__bild::before {
    content: ""; position: absolute; z-index: -1; left: 50%; top: 52%;
    width: 118%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
    background: radial-gradient(closest-side, var(--pergament) 0 60%, rgba(248, 241, 219, 0) 100%);
  }
  .b-hero__rahmen { padding: .5rem; border-radius: 14px; }
  /* Die gepunktete Scheibe hinter der rechten oberen Ecke des Bildes ist weg: sie wurde vom Hero-Rand abgeschnitten
     und wirkte wie ein fremdes Bild (Robert, 23.10. 2. Runde; Paket §2b′). */
  .b-titel__name { font-size: clamp(3rem, 1rem + 3.3vw, 4rem); }
  .b-titel__rest { font-size: clamp(1.75rem, .9rem + 1.4vw, 2.25rem); }
  .lesung { padding-block: 2.75rem 3rem; }
  .lesung-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; align-items: center; }
  .angebot { margin-top: 0; padding: 1.5rem 1.75rem .75rem; }
  .beleg { padding-block: 3.5rem 4rem; }
  .beleg .wrap { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 3rem; align-items: center; }
  .beleg-aktion { margin-top: 0; }
  .abschnitt { padding-block: 5rem; }
  .pfad { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
  .pfad li { display: block; padding: 1.75rem 1.5rem 1.5rem; }
  .pfad-bild { width: 6.5rem; height: 6.5rem; margin-bottom: 1.25rem; padding: .875rem; }
  .pfad-bild--illustration { padding: 0; }
  .pfad h3 { font-size: 1.3125rem; }
  .kaufmodul { --rand-modul: 2.75rem; }
  /* Umschlag links, rechts Text UND Steckbrief: die rechte Spalte war sonst halb leer (Robert, 23.10. 2. Runde) */
  .kaufmodul-koerper { grid-template-columns: 14rem minmax(0, 1fr); grid-template-areas: "bild text" "bild fakten"; column-gap: 3rem; row-gap: 1.5rem; padding-block: 2.25rem 2.5rem; align-items: start; }
  .kauf-buch { display: contents; }
  .kauf-buch__bild { grid-area: bild; width: 100%; padding-block: .25rem; }
  .kauf-wege { grid-area: text; }
  .fakten { grid-area: fakten; margin-top: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kontakt-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; }
  .kontakt-text { position: sticky; top: 6rem; }
  .formular { padding: 2.5rem; }
}
/* Handy (unter 600 px): der 2×2-Block muss in 343 px passen (375 px) — Zeichen + Wortmarke und Menue links gleich
   breit, Sprache und Knopf rechts gleich breit (gemessen 23.10.2026) */
@media (max-width: 37.49em) {
  .wortmarke { gap: .5rem; font-size: 1.3125rem; }
  .wortmarke .marke-zeichen { width: 2.125rem; height: 2.125rem; }
  .sprache { padding: .125rem; font-size: .75rem; }
  .sprache-aktiv, .sprache-wahl { min-width: 2.5rem; min-height: 2.25rem; padding: 0 .5rem; }
  /* weniger und zartere Blaetter, damit sie den Titel nicht ueberlagern */
  .blatt-5, .blatt-6, .blatt-7 { display: none; }
  .blatt { opacity: .7; }
  /* zweite Zeile: drei Menuepunkte + Knopf muessen in 343 px passen (375 px) — bei 360 px bleiben 316 px */
  .hauptnav ul { column-gap: .5rem; }
  .hauptnav a { min-height: 40px; font-size: .8125rem; white-space: nowrap; }
  .knopf--kopf { min-height: 40px; padding: .375rem .75rem; font-size: .8125rem; white-space: nowrap; }
}
/* ganz schmale Handys (360 px): Menue und Knopf etwas kleiner, sonst laeuft die Zeile ueber */
@media (max-width: 22.5em) {
  .hauptnav a { font-size: .75rem; }
  .knopf--kopf { padding-inline: .5rem; }
  .sprache-aktiv, .sprache-wahl { min-width: 2.25rem; }
}
/* sehr schmale Geraete: Wortmarke darf umbrechen statt ueberzulaufen */
@media (max-width: 22em) {
  .wortmarke { white-space: normal; }
}
/* „Bewegung reduzieren" heisst nicht „nichts": Verschiebung und Zierbewegung aus, ein ruhiges Aufblenden bleibt. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .blatt { display: none; }
  .lichter i { animation: none; opacity: .6; }
  .dachzeile::before { animation: none; }
  html.js .auftritt { translate: 0 0; transition: opacity .5s ease; }
  .knopf:hover, .kaufknopf:hover, .pfad li:hover, .fuss-nav a:hover, .person-links a:hover { transform: none; }
  .fortschritt { display: none; }
  .einwilligung { transition: none; }
  .fuss-nav-knopf:hover { transform: none; }
  .kauf-buch__bild:hover .buch, .galerie figure:hover .buch, .b-hero__rahmen:hover, .wortmarke:hover .marke-zeichen, .pfad li:hover .pfad-bild { transform: none; }
}