/* ================================================================
   POLLHANS · Schloß Holte — Pollhansnacht Edition
   ----------------------------------------------------------------
   FARBE   Nacht trägt die Bühne, Zeltcreme das Papier, Glühbirne und
           Oktober sind das Licht, Feuerwerk ist der Funke.
           Glow-Regel: Gelb und Orange leuchten nur auf Nacht,
           auf Creme bleibt alles matt.
   SCHRIFT Tanker ist die HAUPTSCHRIFT — Überschriften, Navigation,
           Labels, Tags, Knöpfe, Zahlen, Aufklapper, Fuß.
           Supreme trägt nur den Lesetext (Sätze, Absätze, Bildzeilen).
           Grand Hotel ist das ADD-ON für die schönen Dinger — als Wort
           UND als Bereich:
             .akz        ein Wort in einer Überschrift, eigene Zeile
             .schnoerkel ein Wort mitten im Satz
             .gruss      eine Zeile als Schlusspunkt
             Bereiche:   nur KURZE Zeilen — Hero-Unterzeilen, Countdown-Label,
                         Tagesdaten, Kopfdatum, Chronik-Mehr, alle Links.
           Laufender Text (Intro-Sätze, Kachel-Sätze, Countdown-Fußzeile,
           Aufklapp-Inhalte, Hinweise) bleibt Supreme: Schreibschrift
           über mehr als eine Zeile liest sich schlecht.
           Regel: nie in Versalien, nie unter 20 px, nie für Daten
           (Uhrzeiten, Tabellen, Kontakt) und nie für Fließtext.
   LINKS   Alle Textlinks stehen in Grand Hotel und LEUCHTEN beim Hover
           (Ausnahme vom Glow-nur-auf-Nacht: Hover ist der Moment, in dem
           das Licht angeht). Knöpfe und Kacheln bleiben Tanker, leuchten
           aber ebenfalls. Telefon/E-Mail bleiben Lesetext (Daten, kein Schmuck).
   SPIEL   Mauszeiger ist ein drehendes Riesenrad (js/fest.js), Klick auf
           den Countdown zündet ein Feuerwerk.
   ================================================================ */

:root {
  --nacht: #12203F;
  --nacht-tief: #0B1530;
  --nacht-hell: #1E3160;
  --creme: #F6EFE0;
  --creme-hell: #FBF7EC;
  --creme-tief: #EAE0CB;
  --linie: #D9CFB8;
  --tinte: #12203F;
  --tinte-soft: #5B6478;
  --gluehbirne: #FFC64B;
  --oktober: #E9762B;
  --feuerwerk: #D63A2F;        /* Flächen, Unterstriche, Legende */
  --feuerwerk-text: #B8322A;   /* Text auf Creme, Kontrast ab 5:1 */
  --zuckerwatte: #F3A7B9;      /* nur Social und Merch, nicht auf der Website */
  --nacht-text: #F6EFE0;
  --nacht-text-soft: #C4CBDD;
  --display: "Tanker", "Arial Black", sans-serif;   /* Hauptschrift. Alternative: Chubbo 700 */
  --script: "Grand Hotel", cursive;                 /* Add-on. Alternative: Pencerio, nur groß auf Nacht */
  --sans: "Supreme", "Segoe UI", sans-serif;        /* nur Lesetext */
  --glow: 0 0 14px rgba(255, 198, 75, .6), 0 0 42px rgba(255, 198, 75, .28);        /* helle Schrift auf Nacht */
  --halo: 0 0 6px rgba(255, 198, 75, .95), 0 0 18px rgba(255, 198, 75, .7), 0 0 34px rgba(255, 198, 75, .35); /* dunkle Schrift auf Creme */
  --rand: clamp(1.25rem, 4vw, 3rem);
  --breite: 1240px;
  --kopf-hoehe: 68px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-hoehe) + 1rem); }

body {
  background: var(--creme);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Browser-Oberflächen gehören zur Welt */
::selection { background: var(--oktober); color: var(--nacht-tief); }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--creme-tief); }
::-webkit-scrollbar-thumb { background: var(--nacht); border: 3px solid var(--creme-tief); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--nacht-hell); }
html { scrollbar-color: var(--nacht) var(--creme-tief); }
:focus-visible { outline: 3px solid var(--nacht); outline-offset: 3px; border-radius: 2px; }
.dark :focus-visible, .fuss :focus-visible { outline-color: var(--gluehbirne); }

img { max-width: 100%; height: auto; display: block; }

/* ---------------- Links: Schnörkel, die beim Hover leuchten ---------------- */

a { color: var(--feuerwerk-text); transition: color .2s ease-out, text-shadow .25s ease-out, text-decoration-color .2s ease-out; }
a:not(.kachel):not(.knopf):not(.marke):not([href^="tel:"]):not([href^="mailto:"]) {
  font-family: var(--script); font-weight: 400; font-size: 1.3em; line-height: 1;
  text-transform: none; letter-spacing: 0;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}
a[href^="tel:"], a[href^="mailto:"] { text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
/* Lesbar leuchten: auf Creme bleibt die Schrift dunkel und bekommt einen hellen Lichtsaum;
   auf Nacht ist die Schrift hell und der Saum hell. Nie Schrift und Glow in derselben Farbe auf hellem Grund. */
a:hover { color: var(--feuerwerk-text); text-decoration-color: currentColor; text-shadow: var(--halo); }
.dark a { color: var(--gluehbirne); }
.dark a:hover { color: var(--gluehbirne); text-shadow: 0 0 10px rgba(255, 198, 75, .95), 0 0 30px rgba(255, 198, 75, .55); }

/* ---------------- Hauptschrift: Überschriften ---------------- */

h1, h2, h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: .98; letter-spacing: .01em; text-wrap: balance; }
h1, h2 { hyphens: auto; overflow-wrap: break-word; }
h1 { font-size: clamp(2.3rem, 6vw, 5.2rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); letter-spacing: .03em; }

/* ---------------- Hauptschrift: Dienst-Typo ---------------- */

.label {
  font-family: var(--display); font-weight: 400; font-size: .86rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-soft);
}
.dark .label { color: var(--nacht-text-soft); }

/* ---------------- Lesetext: Supreme ---------------- */

p { max-width: 62ch; }

.unterzeile { font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--tinte-soft); max-width: 52ch; margin-top: 1rem; }
.dark .unterzeile { color: var(--nacht-text-soft); }

/* ---------------- Add-on: die schönen Dinger ---------------- */

.akz {
  display: block; font-family: var(--script); font-weight: 400;
  text-transform: none; letter-spacing: 0; line-height: 1;
  font-size: 1.34em; color: var(--oktober); margin-top: .06em; hyphens: manual;
}
.schnoerkel {
  font-family: var(--script); font-weight: 400; text-transform: none;
  letter-spacing: 0; font-size: 1.45em; line-height: 1; color: var(--oktober);
  margin: 0 .1em; /* Schreibschrift braucht Luft im Satz */
}
.gruss {
  font-family: var(--script); font-weight: 400; text-transform: none; letter-spacing: 0;
  font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.05; color: var(--oktober); max-width: none;
}
/* Glow gehoert dem Nachtblau: nur auf .dark leuchtet das Gelb.
   Ueber Fotos traegt der Schnoerkel nur einen dunklen Lesbarkeits-Schatten. */
.dark .akz, .dark .schnoerkel, .dark .gruss { color: var(--gluehbirne); text-shadow: var(--glow); }
.hero-text .akz, .hero-text .schnoerkel { color: var(--gluehbirne); text-shadow: 0 2px 20px rgba(18, 32, 63, .65); }

/* ---------------- Sticky Header ---------------- */

.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--creme); /* opak: backdrop-filter wuerde das fixe Mobilmenue im Header einsperren */
  border-bottom: 1px solid var(--linie);
}
.kopf-bar {
  max-width: var(--breite); margin: 0 auto; height: var(--kopf-hoehe);
  padding: 0 var(--rand);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.marke { font-family: var(--display); font-size: 1.55rem; text-transform: uppercase; color: var(--tinte); text-decoration: none; line-height: 1; letter-spacing: .02em; }
.marke:hover { color: var(--nacht); text-shadow: var(--halo); }

.nav-liste { list-style: none; display: flex; align-items: center; gap: 1.8rem; }
.nav-liste a {
  font-family: var(--script); font-size: 1.45rem; line-height: 1; letter-spacing: 0; text-transform: none;
  color: var(--tinte); text-decoration: none; padding: .2rem 0 .05rem;
  border-bottom: 2px solid transparent; transition: border-color .18s ease-out, color .18s ease-out, text-shadow .25s ease-out;
}
.nav-liste a:hover { border-color: var(--oktober); color: var(--nacht); }
.nav-liste a[aria-current="page"] { color: var(--feuerwerk-text); border-color: var(--feuerwerk-text); }

.kopf-datum { font-family: var(--script); font-size: 1.45rem; line-height: 1; letter-spacing: 0; text-transform: none; color: var(--oktober); white-space: nowrap; }
@media (max-width: 1080px) { .kopf-datum { display: none; } }

.nav-knopf { display: none; }

@media (max-width: 760px) {
  .nav-liste {
    display: none; position: fixed; inset: 0; z-index: 60; background: var(--nacht);
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 0;
    padding: 4rem var(--rand);
  }
  .nav-liste.offen { display: flex; }
  .nav-liste li { width: 100%; }
  .nav-liste a { display: block; color: var(--nacht-text); font-size: 3.2rem; padding: .9rem 0 .55rem; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--nacht-text) 15%, transparent); }
  .nav-liste a:hover { color: var(--gluehbirne); border-color: var(--gluehbirne); text-shadow: var(--glow); }
  .nav-liste a[aria-current="page"] { color: var(--gluehbirne); }
  .nav-knopf {
    display: block; position: relative; z-index: 70;
    background: var(--nacht); color: var(--nacht-text); border: 0; border-radius: 999px;
    font-family: var(--display); font-size: .9rem; letter-spacing: .05em; text-transform: uppercase;
    padding: .55rem 1.1rem; cursor: pointer;
  }
}

/* ---------------- Raster ---------------- */

.bahn { max-width: var(--breite); margin: 0 auto; padding-left: max(var(--rand), env(safe-area-inset-left)); padding-right: max(var(--rand), env(safe-area-inset-right)); }
.sektion { padding-top: clamp(3.5rem, 8vw, 6rem); padding-bottom: clamp(3.5rem, 8vw, 6rem); }
.sektion-eng { padding-top: clamp(2rem, 4.5vw, 3.5rem); padding-bottom: clamp(2rem, 4.5vw, 3.5rem); }

.dark { background-color: var(--nacht); background-image: radial-gradient(ellipse at 30% 0%, var(--nacht-hell), var(--nacht) 55%, var(--nacht-tief)); color: var(--nacht-text); }
.dark p { color: var(--nacht-text); }
.dark h1, .dark h2, .dark h3 { color: var(--creme-hell); }
.dark ::selection { background: var(--gluehbirne); color: var(--nacht-tief); }

.sektion-kopf { margin-bottom: clamp(1.6rem, 3.5vw, 2.8rem); display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.sektion-kopf .mehr { margin-bottom: .4rem; }

/* ---------------- Hero ---------------- */

.hero { position: relative; background: var(--nacht-tief); }
.hero video, .hero > img.hero-bild { width: 100%; height: calc(min(88vh, 820px) - var(--kopf-hoehe)); min-height: 420px; object-fit: cover; display: block; }
.hero-schleier { position: absolute; inset: 0; background: linear-gradient(to top, rgba(18, 32, 63, .78) 0%, rgba(18, 32, 63, .1) 45%, rgba(18, 32, 63, 0) 70%); pointer-events: none; }
.hero-text { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: clamp(1.6rem, 4vw, 3rem); color: var(--creme-hell); }
.hero-text h1 { color: var(--creme-hell); text-shadow: 0 2px 24px rgba(18, 32, 63, .55); }
.hero-text .hero-unter {
  font-family: var(--script); font-size: clamp(1.55rem, 2.9vw, 2.5rem); line-height: 1.12; letter-spacing: 0;
  text-transform: none; margin-top: .7rem; color: var(--creme-hell); max-width: 30ch;
  text-shadow: 0 2px 18px rgba(18, 32, 63, .7);
}
.hero-text .hero-unter b { color: var(--gluehbirne); font-weight: 400; }
.hero-text .hero-unter .schnoerkel { font-size: 1em; margin: 0; }

/* Unterseiten-Hero (Bild) */
.seiten-hero { position: relative; background: var(--nacht-tief); }
.seiten-hero img { width: 100%; height: clamp(300px, 52vh, 540px); object-fit: cover; }
.seiten-hero .hero-schleier { background: linear-gradient(to top, rgba(18, 32, 63, .72) 0%, rgba(18, 32, 63, 0) 55%); }
.seiten-hero .hero-text h1 { font-size: clamp(2.1rem, 5vw, 4.4rem); }

/* ---------------- Countdown ---------------- */

.countdown-band { text-align: center; }
[data-feuerwerk] { cursor: pointer; }
.countdown-band .label { display: block; margin-bottom: 1.2rem; font-family: var(--script); font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1; letter-spacing: 0; text-transform: none; color: var(--gluehbirne); text-shadow: var(--glow); }
.countdown { display: flex; justify-content: center; align-items: stretch; gap: clamp(.7rem, 2.5vw, 2rem); flex-wrap: wrap; }
.cd-zelle { min-width: clamp(64px, 11vw, 116px); }
.cd-zahl {
  font-family: var(--display); font-size: clamp(2.6rem, 7.5vw, 5.2rem); line-height: 1;
  color: var(--gluehbirne); font-variant-numeric: tabular-nums; text-shadow: 0 0 16px rgba(255, 198, 75, .4);
  background: var(--nacht-hell); border-radius: 10px; padding: .35em .12em .28em;
  box-shadow: 0 6px 18px rgba(18, 32, 63, .35), 0 0 28px rgba(255, 198, 75, .14);
}
.cd-wort { font-family: var(--display); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--nacht-text-soft); margin-top: .6rem; }
.countdown-fuss { margin: 1.5rem auto 0; max-width: 56ch; color: var(--nacht-text-soft); font-size: .95rem; }
.countdown-fuss b { color: var(--gluehbirne); font-weight: 600; }

/* ---------------- Kacheln (Attraktionen) ---------------- */

.kacheln { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.2vw, 1.6rem); }
@media (max-width: 700px) { .kacheln { grid-template-columns: 1fr; } }

.kachel { position: relative; display: block; overflow: hidden; border-radius: 10px; aspect-ratio: 4 / 3; text-decoration: none; background: var(--nacht-tief); }
.kachel img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.kachel:hover img { transform: scale(1.045); }
.kachel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18, 32, 63, .82) 0%, rgba(18, 32, 63, .05) 55%); }
.kachel-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: clamp(1rem, 2.5vw, 1.8rem); }
.kachel-tag {
  display: inline-block; background: var(--gluehbirne); color: var(--nacht-tief);
  font-family: var(--display); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 3px; padding: .24rem .55rem .16rem; margin-bottom: .65rem;
}
.kachel-titel { display: block; font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.3rem); text-transform: uppercase; color: var(--creme-hell); line-height: 1; }
.kachel-satz { display: block; margin-top: .45rem; font-family: var(--sans); font-size: .92rem; color: var(--nacht-text); max-width: 40ch; }
.kachel:hover, .dark .kachel:hover { text-shadow: none; }
.kachel-titel { transition: text-shadow .3s ease-out; }
.kachel:hover .kachel-titel { text-shadow: var(--glow); }
.kachel:hover .kachel-tag { box-shadow: 0 0 14px rgba(255, 198, 75, .7); }
.kachel-gross { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
@media (max-width: 700px) { .kachel-gross { aspect-ratio: 4 / 3; } }

/* Bild-Trio */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.9rem, 2vw, 1.4rem); }
@media (max-width: 700px) { .trio { grid-template-columns: 1fr; } }
.trio figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.bild-zeile { font-size: .8rem; font-weight: 500; color: var(--tinte-soft); margin-top: .55rem; }
.bild-zeile b { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .03em; font-size: .95em; color: var(--tinte); }
.dark .bild-zeile { color: var(--nacht-text-soft); }
.dark .bild-zeile b { color: var(--creme-hell); }

/* Duett */
.duett { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.2vw, 1.6rem); }
@media (max-width: 700px) { .duett { grid-template-columns: 1fr; } }
.duett figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }

/* Text + Bild */
.spalten { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 820px) { .spalten { grid-template-columns: 1fr; } }
.spalten figure img { width: 100%; border-radius: 10px; }

/* ---------------- Aufklappen ---------------- */

.klapp-liste { border-top: 1px solid var(--linie); }
.dark .klapp-liste { border-color: color-mix(in srgb, var(--nacht-text) 18%, transparent); }
details.klapp { border-bottom: 1px solid var(--linie); }
.dark details.klapp { border-color: color-mix(in srgb, var(--nacht-text) 18%, transparent); }
details.klapp summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 0; font-family: var(--display); font-size: 1.1rem; letter-spacing: .02em; text-transform: uppercase;
}
details.klapp summary::-webkit-details-marker { display: none; }
details.klapp summary::after { content: "+"; font-family: var(--display); font-size: 1.3rem; color: var(--oktober); flex: none; transition: transform .25s ease-out; line-height: 1; }
details.klapp[open] summary::after { transform: rotate(45deg); }
details.klapp summary:hover { color: var(--oktober); }
.dark details.klapp summary:hover { color: var(--gluehbirne); }
details.klapp .klapp-inhalt { padding: 0 0 1.2rem; }
details.klapp .klapp-inhalt p + p { margin-top: .7rem; }
details.klapp .klapp-inhalt p { font-family: var(--sans); color: var(--tinte-soft); max-width: 60ch; }
.dark details.klapp .klapp-inhalt p { color: var(--nacht-text-soft); }
summary .klapp-meta { font-family: var(--display); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--feuerwerk-text); margin-left: auto; padding-right: 1rem; white-space: nowrap; }
.dark summary .klapp-meta { color: var(--gluehbirne); }

/* ---------------- Programm ---------------- */

.tage { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.2vw, 1.6rem); }
@media (max-width: 900px) { .tage { grid-template-columns: 1fr; } }
.tag-karte { background: var(--creme-hell); border: 1px solid var(--linie); border-radius: 12px; padding: clamp(1.3rem, 2.5vw, 1.9rem); }
.tag-karte h3 { color: var(--nacht); }
.tag-karte .tag-datum { font-family: var(--script); font-size: 1.45rem; line-height: 1; letter-spacing: 0; text-transform: none; color: var(--oktober); margin-top: .3rem; }
.tag-karte ul { list-style: none; margin-top: 1.1rem; }
.tag-karte li { display: flex; gap: .9rem; padding: .55rem 0; border-top: 1px solid var(--linie); font-size: .95rem; }
.tag-karte li:first-child { border-top: 0; }
.tag-karte .zeit { font-family: var(--display); font-size: .92rem; letter-spacing: .03em; text-transform: uppercase; color: var(--nacht); white-space: nowrap; min-width: 5.4rem; font-variant-numeric: tabular-nums; }

/* ---------------- Chronik ---------------- */

.chronik { list-style: none; border-top: 1px solid var(--linie); }
.chronik > li { display: grid; grid-template-columns: minmax(100px, 200px) 1fr; gap: clamp(1.2rem, 4vw, 3.5rem); border-bottom: 1px solid var(--linie); padding: clamp(1.6rem, 3.5vw, 2.6rem) 0; }
@media (max-width: 700px) { .chronik > li { grid-template-columns: 1fr; gap: .7rem; } }
.chronik .jahr { font-family: var(--display); font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1; color: var(--nacht); }
.chronik h3 { margin-bottom: .45rem; }
.chronik figure { margin-top: 1.2rem; max-width: 720px; }
.chronik figure img { border-radius: 10px; }
.chronik details { margin-top: .6rem; }
.chronik details summary { list-style: none; cursor: pointer; font-family: var(--script); font-size: 1.35rem; line-height: 1; letter-spacing: 0; text-transform: none; color: var(--oktober); transition: text-shadow .25s ease-out; }
.chronik details summary:hover { color: var(--feuerwerk-text); text-shadow: var(--halo); }
.chronik details summary::-webkit-details-marker { display: none; }
.chronik details summary::before { content: "+ "; color: var(--oktober); }
.chronik details[open] summary::before { content: "– "; }
.chronik details p { margin-top: .6rem; color: var(--tinte-soft); max-width: 58ch; }

/* ---------------- Lageplan ---------------- */

.plan-scroll { border-radius: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.plan-svg { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 10px 30px rgba(18, 32, 63, .12); display: block; }
.plan-hinweis { display: none; margin-top: .6rem; }
@media (max-width: 760px) {
  .plan-scroll .plan-svg { min-width: 720px; border-radius: 0; box-shadow: none; }
  .plan-hinweis { display: block; }
}
.legende { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .5rem 1.5rem; font-size: .9rem; }
.legende li { display: flex; align-items: baseline; gap: .7rem; padding: .3rem 0; }
.legende b { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; color: var(--tinte); }
.legende .lg-nr { font-family: var(--display); color: var(--creme-hell); background: var(--nacht); min-width: 1.7rem; height: 1.7rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; flex: none; transform: translateY(.25rem); }
.legende .lg-nr.rot { background: var(--feuerwerk-text); }
.legende .lg-nr.gold { background: var(--oktober); color: var(--nacht-tief); }

/* ---------------- Bausteine ---------------- */

.zitat { font-family: var(--display); font-size: clamp(1.6rem, 3.4vw, 2.6rem); text-transform: uppercase; line-height: 1.08; max-width: 22ch; color: var(--nacht); text-wrap: balance; }
.dark .zitat { color: var(--creme-hell); }
.zitat-quelle { margin-top: .9rem; }

.hinweis { background: var(--creme-tief); border-radius: 10px; padding: clamp(1.1rem, 2.5vw, 1.6rem); max-width: 70ch; font-size: .95rem; }
.hinweis p { color: var(--tinte-soft); }
.hinweis b { color: var(--tinte); }

.platzhalter {
  display: inline-block; font-family: var(--display); font-size: .78rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--feuerwerk-text); border: 1px dashed var(--feuerwerk-text); border-radius: 3px; padding: .14rem .45rem .04rem; margin-left: .4rem; vertical-align: middle;
}

.knopf {
  display: inline-block; font-family: var(--display); font-size: .98rem; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; background: var(--oktober); color: var(--nacht); border-radius: 999px;
  padding: .8rem 1.7rem .68rem; transition: background .18s ease-out, transform .18s ease-out, box-shadow .25s ease-out;
}
.knopf:hover { background: #F08A45; transform: translateY(-1px); box-shadow: 0 0 16px rgba(233, 118, 43, .55), 0 0 36px rgba(255, 198, 75, .35); }
.knopf.hell { background: var(--gluehbirne); color: var(--nacht-tief); }
.knopf.hell:hover { background: #FFD46E; box-shadow: 0 0 16px rgba(255, 198, 75, .75), 0 0 40px rgba(255, 198, 75, .4); }
/* Die Link-Hover-Regel darf Knoepfen nie die Schriftfarbe nehmen (Orange auf Orange, Gelb auf Gelb) */
.knopf, .knopf:hover, .dark .knopf, .dark .knopf:hover, .knopf:focus-visible { color: var(--nacht); text-shadow: none; }
.knopf.hell, .knopf.hell:hover, .dark .knopf.hell, .dark .knopf.hell:hover { color: var(--nacht-tief); }

.mehr, a.mehr {
  font-family: var(--script); font-size: 1.5rem; line-height: 1; letter-spacing: 0; text-transform: none;
  color: var(--feuerwerk-text); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .02rem; white-space: nowrap;
}
.mehr:hover { color: var(--feuerwerk-text); }
.dark .mehr { color: var(--gluehbirne); }
.dark .mehr:hover { color: var(--gluehbirne); }

/* ---------------- Fuß ---------------- */

.fuss { background: var(--nacht-tief); color: var(--nacht-text); }
.fuss-inner { max-width: var(--breite); margin: 0 auto; padding: clamp(2.5rem, 5vw, 4rem) var(--rand) 2rem; }
.fuss-oben { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.fuss-siegel { width: 96px; height: 96px; flex: none; }
.fuss-nav { list-style: none; display: flex; gap: 1.6rem; flex-wrap: wrap; }
.fuss-nav a, .fuss .fuss-nav a { font-family: var(--script); color: var(--nacht-text); text-decoration: none; font-size: 1.5rem; line-height: 1; letter-spacing: 0; text-transform: none; }
.fuss-nav a:hover, .fuss .fuss-nav a:hover { color: var(--gluehbirne); text-shadow: var(--glow); }
.fuss-unten { margin-top: clamp(1.8rem, 4vw, 2.8rem); border-top: 1px solid color-mix(in srgb, var(--nacht-text) 16%, transparent); padding-top: 1.2rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: var(--nacht-text-soft); }
.fuss-unten p { max-width: none; color: var(--nacht-text-soft); }

/* ---------------- Bewegung ---------------- */

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1); }
.reveal.sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .knopf:hover { transform: none; }
  .kachel img, .kachel:hover img { transition: none; transform: none; }
}

/* ---------------- Spiel: Riesenrad als Mauszeiger, Feuerwerk ---------------- */

@media (pointer: fine) {
  html.hat-cursor, html.hat-cursor body, html.hat-cursor a, html.hat-cursor button,
  html.hat-cursor summary, html.hat-cursor .countdown { cursor: none !important; }
}
.riesenrad-cursor {
  position: fixed; left: 0; top: 0; width: 40px; height: 44px; pointer-events: none; z-index: 100;
  transform: translate3d(-200px, -200px, 0); will-change: transform; opacity: 0; transition: opacity .2s ease-out;
}
.riesenrad-cursor.sichtbar { opacity: 1; }
.riesenrad-cursor svg { width: 40px; height: 44px; overflow: visible; display: block;
  filter: drop-shadow(0 1px 1px rgba(18, 32, 63, .9)) drop-shadow(0 0 5px rgba(255, 198, 75, .35));
  transition: transform .18s ease-out, filter .18s ease-out; transform-origin: 20px 18px; }
.riesenrad-cursor .rad { transform-origin: 20px 18px; animation: rad-drehen 7s linear infinite; }
.riesenrad-cursor.aktiv .rad { animation-duration: 1.4s; }
.riesenrad-cursor.aktiv svg { transform: scale(1.22); filter: drop-shadow(0 1px 1px rgba(18, 32, 63, .9)) drop-shadow(0 0 9px rgba(255, 198, 75, .75)); }
.riesenrad-cursor.druck svg { transform: scale(.88); }
@keyframes rad-drehen { to { transform: rotate(360deg); } }

.feuerwerk-leinwand { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 95; }

@media (prefers-reduced-motion: reduce) {
  .riesenrad-cursor .rad { animation: none; }
  .kachel-titel, .knopf, a { transition: none; }
}

/* ---------------- Responsive Feinschliff ---------------- */

/* Tablet: Navigation etwas enger, damit vier Schnörkel-Links neben die Marke passen */
@media (max-width: 900px) {
  .nav-liste { gap: 1.1rem; }
  .nav-liste a { font-size: 1.3rem; }
}

/* Handy: keine Schrift unter 13 px, Aufklapper-Meta rutscht unter den Titel */
@media (max-width: 700px) {
  .kachel-tag { font-size: .8rem; }
  .bild-zeile { font-size: .88rem; }
  .fuss-unten { font-size: .86rem; }
  .label { font-size: .9rem; }
  .hero-text .hero-unter { max-width: 22ch; }
}
@media (max-width: 600px) {
  details.klapp summary { flex-wrap: wrap; row-gap: .25rem; }
  details.klapp summary::after { order: 2; }
  summary .klapp-meta { order: 3; flex-basis: 100%; margin-left: 0; padding-right: 0; white-space: normal; font-size: .84rem; }
  .sektion-kopf { align-items: flex-start; }
  .tag-karte .zeit { min-width: 4.6rem; }
}

/* Sehr schmale Handys (bis 360 px): Countdown bleibt in einer Reihe */
@media (max-width: 360px) {
  .cd-zelle { min-width: 58px; }
  .cd-zahl { font-size: 2.2rem; }
  .countdown { gap: .5rem; }
  h1 { font-size: 2.1rem; }
}

/* ---------------- Kleinkram ---------------- */

.abstand-oben { margin-top: clamp(1.4rem, 3vw, 2.2rem); }
.abstand-oben-gross { margin-top: clamp(2.4rem, 5.5vw, 4rem); }
.text-mitte { text-align: center; }
.text-mitte p, .text-mitte blockquote { margin-left: auto; margin-right: auto; }
.nur-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }