/* ============================================================
   Lake Noël Zug – Weihnachtsdorf 2026
   Statische Seite, keine Build-Schritte, Shared-Hosting-tauglich.
   ============================================================ */

/* --- Schriften --------------------------------------------
   Lokal statt von Google: kein Drittanbieter-Request, ein Roundtrip
   weniger vor dem ersten Text. Beides sind variable Fonts, eine Datei
   deckt daher den ganzen Gewichtsbereich ab (Subset: latin).
   Lizenz beider Familien: SIL Open Font License 1.1.
   ---------------------------------------------------------- */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Design-Tokens ---------------------------------------- */
:root {
  --c-deep:        #060b1d;
  --c-bg:          #0b1530;
  --c-raise:       #101c3e;
  --c-panel:       #0d1836;

  --c-gold:        #e8bf70;
  --c-gold-dim:    #e3b151;
  --c-gold-bright: #efd39c;
  --c-gold-deep:   #dda22e;

  /* Kanalwerte für halbtransparente Ableitungen: rgb(var(--c-gold-rgb) / .25).
     Damit zieht ein Farbwechsel auch Ränder, Verläufe und Glows mit. */
  --c-gold-rgb:    232 191 112;
  --c-bg-rgb:      11 21 48;
  --c-panel-rgb:   13 24 54;
  --c-deep-rgb:    6 11 29;
  --c-light-rgb:   244 217 140;   /* Sterne und Lichtpunkte: warmes Licht, kein Markengold */

  --c-light:       rgb(var(--c-light-rgb));
  --c-ink:         #131c38;       /* Text auf goldenem Grund */

  --c-cream:       #f7f4ea;
  --c-sand:        #e9d9ac;
  --c-text:        #e9ecf5;
  --c-text-mute:   #c6cde0;
  --c-text-dim:    #b9c1d6;
  --c-text-faint:  #8f99b5;

  --line-gold:     rgb(var(--c-gold-rgb) / .25);
  --line-gold-soft:rgb(var(--c-gold-rgb) / .12);

  --font-display:  'Cormorant Garamond', Georgia, serif;
  --font-body:     'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius:        18px;
  --radius-pill:   999px;
  --shell:         1100px;
  --gutter:        24px;

  --ease:          cubic-bezier(.22, .7, .3, 1);
}

/* --- Reset ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

html { scroll-behavior: smooth; }

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--c-cream);
  line-height: 1.15;
  margin: 0;
}

p { margin: 0; }

a { color: var(--c-gold-dim); text-decoration: none; transition: color .25s ease; }
a:hover { color: var(--c-gold-bright); }

:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Seitenrahmen ------------------------------------------ */
.page {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--c-deep) 0%, var(--c-bg) 55%, var(--c-raise) 100%);
}

.section {
  position: relative;
  z-index: 1;
  max-width: var(--shell);
  margin-inline: auto;
  padding: 0 var(--gutter) 90px;
}
.section--narrow  { max-width: var(--shell); padding-bottom: 80px; }
.section--prose   { max-width: 880px; padding: 40px var(--gutter) 80px; text-align: center; display: flex; flex-direction: column; gap: 22px; }
.section--prose p { font-size: 18px; line-height: 1.7; color: var(--c-text-mute); }
.section--hours   { max-width: 720px; text-align: center; }

.eyebrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--c-gold-dim);
}
.eyebrow--muted { color: var(--c-text-faint); font-size: 11.5px; }

/* --- Hero-Hintergrund -------------------------------------- */
.hero-backdrop {
  position: absolute;
  inset: 0 0 auto;
  height: 100vh;
  height: 100dvh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Ohne diese Blende bricht das Bild bei exakt 100dvh hart ab – je nach
     Fensterhöhe mitten im Laufband. Die letzten 22 % lösen sich stattdessen
     in den Seitenhintergrund auf, egal wo die Kante gerade liegt. */
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
}
.hero-backdrop img {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center bottom;
  opacity: .85;
}
.hero-backdrop__veil {
  position: absolute; inset: 0;
  background: linear-gradient(0deg,
    var(--c-bg) 0%, rgb(var(--c-bg-rgb) / .92) 12%, rgb(var(--c-bg-rgb) / .55) 30%,
    rgba(9,16,38,.35) 52%, rgb(var(--c-deep-rgb) / .55) 78%, var(--c-deep) 100%);
}
.hero-backdrop__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 45% at 50% 42%, rgb(var(--c-deep-rgb) / .72) 0%, rgb(var(--c-deep-rgb) / 0) 70%);
}

/* --- Ambiente: Aurora, Sterne, Schnee, Lichtpunkte --------- */
.ambient { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ambient__layer { position: absolute; inset: 0; }

.aurora { position: absolute; filter: blur(22px); animation: auroradrift 46s ease-in-out infinite; }
.aurora--blue {
  top: -10vh; left: -10%; width: 70%; height: 80vh;
  background: radial-gradient(ellipse at center, rgba(88,124,214,.16) 0%, rgba(88,124,214,0) 65%);
}
.aurora--gold {
  top: 20vh; right: -15%; width: 65%; height: 70vh;
  background: radial-gradient(ellipse at center, rgb(var(--c-gold-rgb) / .11) 0%, rgb(var(--c-gold-rgb) / 0) 65%);
  animation-duration: 62s; animation-delay: 6s; animation-direction: reverse;
}
.aurora--violet {
  bottom: -20vh; left: 15%; width: 80%; height: 70vh;
  background: radial-gradient(ellipse at center, rgba(120,90,200,.10) 0%, rgba(120,90,200,0) 65%);
  animation-duration: 78s; animation-delay: 12s;
}

/* Einzelpartikel – Position/Grösse/Timing setzt main.js per Custom Property */
.star, .flake, .bokeh { position: absolute; border-radius: 50%; }
.star {
  left: var(--x); top: var(--y);
  width: var(--size); height: var(--size);
  background: var(--c-light);
  animation: twinkle var(--dur) ease-in-out var(--delay) infinite;
}
.flake {
  left: var(--x); top: -10px;
  width: var(--size); height: var(--size);
  /* Weicher Rand über den Verlauf statt über filter: blur() – der hätte je
     Flocke eine eigene Compositor-Ebene erzeugt (36 Stück). */
  background: radial-gradient(circle, rgb(255 255 255 / .8) 55%, rgb(255 255 255 / 0) 100%);
  animation: snowfall var(--dur) linear var(--delay) infinite,
             sway var(--sway) ease-in-out var(--delay) infinite;
}
.bokeh {
  left: var(--x); bottom: -6vh;
  width: var(--size); height: var(--size);
  background: radial-gradient(circle, rgb(var(--c-light-rgb) / .9) 0%, rgb(var(--c-light-rgb) / 0) 70%);
  animation: bokeh var(--dur) linear var(--delay) infinite;
  opacity: 0;
}

/* --- Hero -------------------------------------------------- */
.hero {
  position: relative;
  z-index: 1;
  /* dvh folgt der ein- und ausfahrenden Adressleiste auf iOS/Android */
  min-height: calc(100vh - 62px);
  min-height: calc(100dvh - 62px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Abstände und Logo folgen der Fensterhöhe, damit die Buttons auch auf
     flachen Bildschirmen (1366x768, 1440x900) ohne Scrollen sichtbar sind */
  gap: clamp(14px, 2.4vh, 28px);
  /* Unten mindestens 28px, damit die Buttons auf flachen Fenstern nicht am
     Laufband kleben – ohne Wert stossen sie dort direkt an. */
  padding: clamp(28px, 6vh, 64px) var(--gutter) clamp(28px, 5vh, 56px);
}
.hero__logo { position: relative; animation: floaty 7s ease-in-out infinite; }

/* --- Auftritt des Heros ------------------------------------
   Der eine komponierte Moment der Seite: das Emblem kommt aus der Unschärfe
   in den Fokus, der Schein blüht einmal auf, danach setzt sich der Text in
   kurzer Staffel. Läuft genau einmal, dauert zusammen 1,2 s.
   Die Dauerschleifen (floaty, glowpulse) übernehmen danach – sie stehen in
   der Animationsliste hinten und gewinnen damit ab ihrer Verzögerung.
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .hero__logo   { animation: emblem-arrive .8s var(--ease) both,
                             floaty 7s ease-in-out 1.1s infinite; }
  .hero__glow   { animation: glow-bloom 1.3s var(--ease) both,
                             glowpulse 5s ease-in-out 1.5s infinite; }
  .hero__title  { animation: hero-settle .65s var(--ease) .22s both; }
  .hero__lead   { animation: hero-settle .65s var(--ease) .34s both; }
  .countdown    { animation: hero-settle .65s var(--ease) .46s both; }
  .hero__actions { animation: hero-settle .65s var(--ease) .58s both; }
}
.hero__logo img { position: relative; width: clamp(200px, 30vh, 400px); max-width: 78vw; height: auto; }
.hero__glow {
  position: absolute; inset: -40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--c-gold-rgb) / .28) 0%, rgb(var(--c-gold-rgb) / 0) 70%);
  animation: glowpulse 5s ease-in-out infinite;
}
.hero .eyebrow { font-size: 14px; letter-spacing: .35em; }
.hero__title { font-size: clamp(34px, min(7vw, 9vh), 84px); line-height: 1.05; }
.hero__lead {
  font-size: clamp(17px, 2.2vw, 21px);
  color: var(--c-text-mute);
  max-width: 620px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 8px; }

.countdown {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid rgb(var(--c-gold-rgb) / .35);
  border-radius: var(--radius-pill);
  padding: 10px 24px;
  background: rgb(var(--c-panel-rgb) / .6);
  font-size: 15px;
  letter-spacing: .12em;
  color: var(--c-sand);
}
.countdown__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-gold);
  animation: glowpulse 2.5s ease-in-out infinite;
}

/* --- Buttons ----------------------------------------------- */
.btn {
  display: inline-block;
  padding: 15px 34px;
  border-radius: var(--radius-pill);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .06em;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              filter .25s ease, background-color .25s ease,
              border-color .25s ease, color .25s ease;
}
/* Anheben beim Zeigen, Eindrücken beim Klicken – zwei Zustände, damit der
   Knopf sich wie ein Gegenstand und nicht wie ein Rechteck anfühlt. */
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); transition-duration: .06s; }

.btn--lg { padding: 17px 40px; font-size: 17px; }
.btn--primary {
  background: linear-gradient(135deg, var(--c-gold), var(--c-gold-deep));
  color: var(--c-ink);
  font-weight: 600;
  box-shadow: 0 6px 18px rgb(var(--c-deep-rgb) / .45);
}
.btn--primary:hover {
  filter: brightness(1.08);
  color: var(--c-ink);
  /* Der Schein nimmt die Goldfarbe auf, statt schwarz nach unten zu fallen */
  box-shadow: 0 12px 30px rgb(var(--c-gold-rgb) / .28), 0 4px 10px rgb(var(--c-deep-rgb) / .5);
}
.btn--ghost {
  border: 1px solid rgb(var(--c-gold-rgb) / .5);
  color: var(--c-sand);
}
.btn--ghost:hover {
  border-color: var(--c-gold);
  color: var(--c-gold-bright);
  background-color: rgb(var(--c-gold-rgb) / .08);
  box-shadow: 0 10px 26px rgb(var(--c-deep-rgb) / .45);
}

/* --- Laufband ---------------------------------------------- */
.marquee {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 18px 0;
  margin-bottom: 70px;
  border-block: 1px solid rgb(var(--c-gold-rgb) / .22);
  background: linear-gradient(90deg, rgb(var(--c-panel-rgb) / .35), rgb(var(--c-gold-rgb) / .07) 50%, rgb(var(--c-panel-rgb) / .35));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 52s linear infinite;
}
.marquee__track.is-offscreen,
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: flex; align-items: center;
  white-space: nowrap;
  padding-right: 30px;
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--c-sand);
}
.marquee__item::after {
  content: '✦';
  margin-left: 30px;
  font-size: 8px;
  letter-spacing: 0;
  color: rgb(var(--c-gold-rgb) / .65);
}

/* --- Eckdaten ---------------------------------------------- */
/* Kein Panel: ein offenes Band mit Haarlinien. Das Panel zwang allen drei
   Zellen die Höhe der längsten auf und liess zwei davon halb leer stehen. */
.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
}
/* Oben ausgerichtet: die Beschriftungen liegen dadurch auf einer Linie,
   auch wenn ein Wert zwei Zeilen braucht. */
.facts__item {
  display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
  gap: 12px;
  padding: 8px 22px 12px;
  text-align: center;
}
.facts__item + .facts__item { border-left: 1px solid var(--line-gold-soft); }
.facts dt { font-size: 12px; letter-spacing: .25em; }
.facts__value {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.25;
  color: var(--c-cream);
  text-wrap: balance;   /* verteilt den Umbruch gleichmässig auf die Zeilen */
  max-width: 22ch;
}

/* --- Highlight-Kacheln ------------------------------------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
}
.tile {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(20,32,66,.9), rgb(var(--c-panel-rgb) / .9));
  border: 1px solid rgb(var(--c-gold-rgb) / .2);
  border-radius: var(--radius);
  transition: border-color .3s ease, transform .3s ease;
}
.tile:hover { border-color: rgb(var(--c-gold-rgb) / .55); transform: translateY(-4px); }

.tile--wide  { grid-column: span 4; }
.tile--tall  { grid-column: span 2; }
.tile--third { grid-column: span 2; }
.tile--split { grid-column: span 6; display: grid; grid-template-columns: 1.15fr 1fr; }

.tile__media { position: relative; height: 190px; background: rgb(var(--c-deep-rgb) / .55); }
.tile__media--lg   { height: 300px; }
.tile__media--fill { flex: 1; height: auto; min-height: 240px; }
.tile--split .tile__media--fill { min-height: 280px; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; }

/* Platzhalter, solange ein Bild fehlt (main.js setzt .is-empty) */
.tile__media.is-empty {
  display: grid;
  place-items: center;
  padding: 20px;
  text-align: center;
  background:
    repeating-linear-gradient(45deg, rgb(var(--c-gold-rgb) / .05) 0 12px, transparent 12px 24px),
    rgb(var(--c-deep-rgb) / .55);
  border-bottom: 1px dashed var(--line-gold);
}
.tile__media.is-empty::after {
  content: attr(data-placeholder);
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--c-text-faint);
}

/* flex: 1 – der Textkörper nimmt die Resthöhe. Da alle Kacheln einer Rasterzeile
   gleich hoch sind und gleich hohe Bilder tragen, sind damit auch die Körper
   gleich hoch, unabhängig von der Textlänge. */
.tile__body {
  flex: 1;
  display: flex; flex-direction: column; gap: 8px;
  padding: 24px 26px;
}
.tile__body--centered { justify-content: center; gap: 12px; padding: 40px 38px; }
.tile__body h3 { font-size: 24px; }
.tile__body p  { font-size: 15.5px; line-height: 1.6; color: var(--c-text-dim); }
.tile--wide .tile__body   { gap: 10px; padding: 28px 30px; }
.tile--wide .tile__body h3 { font-size: 28px; }
.tile--wide .tile__body p  { font-size: 16px; line-height: 1.65; }
.tile__title--lg { font-size: 30px; }
.tile--split .tile__body p { font-size: 16px; line-height: 1.7; }

/* --- Öffnungszeiten ---------------------------------------- */
.section--hours h2 { margin: 0 0 34px; font-size: clamp(28px, 4vw, 42px); }
.hours {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  overflow: hidden;
  background: rgb(var(--c-panel-rgb) / .7);
  font-size: 19px;
}
.hours th, .hours td {
  padding: 24px 32px;
  border-bottom: 1px solid var(--line-gold-soft);
  font-weight: inherit;
}
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }
.hours th { text-align: left;  color: var(--c-sand); font-weight: 500; }
.hours td { text-align: right; color: var(--c-text-mute); }

/* --- Standplätze ------------------------------------------- */
.standplatz {
  position: relative;
  z-index: 1;
  padding: 90px var(--gutter);
  background: linear-gradient(180deg, rgb(var(--c-gold-rgb) / .08), rgb(var(--c-gold-rgb) / .02));
  border-block: 1px solid var(--line-gold);
}
.standplatz__inner {
  max-width: 880px;
  margin-inline: auto;
  display: flex; flex-direction: column; align-items: center;
  gap: 22px;
  text-align: center;
}
.standplatz__title {
  font-size: clamp(30px, 5vw, 52px);
  text-wrap: balance;   /* verhindert das einzelne Restwort auf der letzten Zeile */
  max-width: 24ch;      /* zwei etwa gleich lange Zeilen statt 1½ */
}
.standplatz__title strong { font-weight: 700; }
.standplatz__lead  { font-size: 18px; line-height: 1.7; color: var(--c-text-mute); max-width: 640px; }
.standplatz__actions { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 760px;
  margin: 12px 0;
}
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat__value {
  font-family: var(--font-display);
  font-size: 44px;
  color: var(--c-gold);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}

/* --- Footer ------------------------------------------------ */
.footer {
  position: relative;
  z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
  padding: 56px var(--gutter);
  text-align: center;
}
.footer__logo { width: 110px; height: auto; opacity: .9; }
.footer__line { font-size: 14px; color: var(--c-text-faint); }
.footer__line--bright { font-size: 13px; color: var(--c-text-dim); }

.footer__nav {
  display: flex; align-items: center; gap: 22px;
  margin-top: 12px; padding-top: 20px;
  border-top: 1px solid rgb(var(--c-gold-rgb) / .18);
}
.footer__link {
  border: 0; background: none;
  padding: 11px 6px;   /* Zielgrösse ≥ 24px (WCAG 2.5.8) */
  margin: -11px -6px;  /* ohne die Abstände im Footer zu verändern */
  font: inherit;
  font-size: 13.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  cursor: pointer;
  transition: color .25s ease;
}
.footer__link:hover { color: var(--c-gold); }
.footer__sep { font-size: 8px; color: rgb(var(--c-gold-rgb) / .5); }

.footer__producer { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 22px 0 10px; }
.footer__producer a { display: inline-block; padding: 8px 6px; }
.footer__producer img { height: 30px; width: auto; max-width: 78vw; opacity: .9; }
.footer__fineprint { font-size: 12.5px; color: #9aa3bd; }
.footer__fineprint + .footer__fineprint { font-size: 12px; color: var(--c-text-faint); }

/* --- Rechtliches-Dialog ------------------------------------ */
/* Natives <dialog>: die UA-Vorgaben (zentriert, auto-Breite, Rahmen) werden
   überschrieben – das Element ist selbst die Overlay-Fläche. */
.legal {
  position: fixed; inset: 0; z-index: 50;
  width: 100%; max-width: 100%;
  height: 100%; max-height: 100%;
  margin: 0; border: 0;
  padding: 6vh 20px;
  overflow-y: auto;
  background: rgba(4,8,20,.78);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: var(--c-text);
}
.legal[open] {
  display: flex; align-items: flex-start; justify-content: center;
  animation: fadeup .35s ease;
}
.legal::backdrop { background: transparent; }

/* Wer Transparenzeffekte im System abbestellt hat, bekommt einen deckenden
   Scrim statt der Milchglasscheibe. */
@media (prefers-reduced-transparency: reduce) {
  .legal {
    background: rgb(var(--c-deep-rgb) / .97);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
}
.legal__panel {
  position: relative;
  width: 100%; max-width: 760px;
  padding: 46px 48px 52px;
  background: linear-gradient(180deg, var(--c-raise), var(--c-bg));
  border: 1px solid rgb(var(--c-gold-rgb) / .3);
  border-radius: 20px;
}
.legal__close {
  position: absolute; top: 16px; right: 16px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgb(var(--c-gold-rgb) / .35);
  background: transparent;
  color: var(--c-sand);
  font-size: 17px; line-height: 1;
  cursor: pointer;
  transition: border-color .25s ease, color .25s ease;
}
.legal__close:hover { border-color: var(--c-gold); color: var(--c-gold-bright); }
.legal__title { margin: 0 0 26px; font-size: 38px; }
.legal__content { display: flex; flex-direction: column; gap: 24px; }
.legal__doc { display: flex; flex-direction: column; gap: 24px; }
.legal__doc[hidden] { display: none; }
.legal__doc h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-sand);
  margin-bottom: -16px;
}
.legal__doc p { font-size: 16px; line-height: 1.7; color: var(--c-text-mute); }
.legal__source { margin-top: 8px; font-size: 13.5px; color: #7b85a3; }
body.is-locked { overflow: hidden; }

/* --- Scroll-Reveal ----------------------------------------- */
/* Kurz und beiläufig: 900 ms und 26 px Weg liessen jeden Abschnitt wie einen
   eigenen Auftritt wirken und nahmen dem Hero seinen Rang. */
[data-reveal], [data-reveal-children] > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.is-revealed { opacity: 1 !important; transform: none !important; }

/* --- Responsive -------------------------------------------- */
@media (max-width: 980px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tile--wide, .tile--split { grid-column: span 2; }
  .tile--tall, .tile--third { grid-column: span 1; }
  /* Ab hier stehen grosse und kleine Kacheln nebeneinander – gleiche Bildhöhe,
     damit die Textkörper weiterhin auf einer Linie beginnen. */
  .tile__media, .tile__media--lg { height: 220px; }
  .tile--split { display: flex; }
  .tile--split .tile__media--fill { height: auto; min-height: 260px; }
  .tile__body--centered { padding: 32px 28px; }
}

@media (max-width: 640px) {
  :root { --gutter: 18px; }
  /* Drei animierte blur(22px)-Flächen sind auf Mobilgeräten die teuerste
     Dauerlast der Seite. Der Farbschleier bleibt, die Bewegung entfällt. */
  .aurora { animation: none; filter: blur(14px); }
  .tiles { grid-template-columns: 1fr; gap: 18px; }
  .tile--wide, .tile--split, .tile--tall, .tile--third { grid-column: span 1; }
  .tile__media, .tile__media--lg, .tile__media--fill { height: 220px; min-height: 0; flex: none; }
  .hero { gap: 22px; padding-top: 48px; }
  .hero__actions .btn, .standplatz__actions .btn { width: 100%; text-align: center; }
  /* Zwei Spalten sind auf dem Handy zu eng – beide Zellen brechen um und
     stehen zerrissen nebeneinander. Darum untereinander, im selben Muster
     wie die Eckdaten: Label oben, Zeit gross darunter. */
  .hours, .hours tbody, .hours tr, .hours th, .hours td { display: block; }
  .hours tr {
    padding: 20px 20px 22px;
    border-bottom: 1px solid var(--line-gold-soft);
  }
  .hours tr:last-child { border-bottom: 0; }
  .hours th, .hours td { padding: 0; border: 0; text-align: left; }
  .hours th {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--c-gold-dim);
  }
  .hours td {
    margin-top: 6px;
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--c-cream);
  }
  .stats { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .stat__value { font-size: 32px; }
  .stat__label { font-size: 10.5px; letter-spacing: .1em; }
  .legal__panel { padding: 40px 24px 44px; }
  .legal__title { font-size: 30px; }
  /* Untereinander: die Trennlinie wandert von links nach oben */
  .facts { grid-template-columns: 1fr; }
  .facts__item { padding: 24px 20px; }
  .facts__item + .facts__item { border-left: 0; border-top: 1px solid var(--line-gold-soft); }
}

/* --- Animationen ------------------------------------------- */
@keyframes twinkle {
  0%, 100% { opacity: .25; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1.15); }
}
/* Fallen läuft über die eigenständige `translate`-Eigenschaft, Schwingen über
   `transform`. Beide sind Compositor-Eigenschaften und können deshalb parallel
   animiert werden, ohne dass der Browser je Frame neu umbricht. */
@keyframes snowfall {
  0%   { translate: 0 -5vh; }
  100% { translate: 24px 105vh; }
}
@keyframes sway {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(26px); }
}
@keyframes bokeh {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  15%  { opacity: .55; }
  85%  { opacity: .35; }
  100% { transform: translate(30px, -70vh) scale(1.3); opacity: 0; }
}
/* Auftritt: Unschärfe → Fokus. Nur ein Element, nur einmal – deshalb
   vertretbar, obwohl filter teuer ist. */
@keyframes emblem-arrive {
  from { opacity: 0; transform: scale(.94); filter: blur(12px); }
  to   { opacity: 1; transform: none;       filter: blur(0); }
}
@keyframes glow-bloom {
  from { opacity: 0; transform: scale(.55); }
  to   { opacity: .5; transform: none; }
}
@keyframes hero-settle {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes glowpulse {
  0%, 100% { opacity: .5; }
  50%      { opacity: .9; }
}
@keyframes fadeup {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes auroradrift {
  0%   { transform: translate3d(-8%, 0, 0) scale(1); }
  50%  { transform: translate3d(8%, -3%, 0) scale(1.15); }
  100% { transform: translate3d(-8%, 0, 0) scale(1); }
}

/* --- Bewegung reduzieren ----------------------------------- */
/* Dekoration verschwindet, Rückmeldung bleibt: Hover-Farben, Fokus und das
   Öffnen des Dialogs sollen weiterhin spürbar sein, nur eben ruhiger. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Endlos laufende Dekoration und der Hero-Auftritt – ersatzlos aus.
     Der Inhalt steht sofort da, nichts blendet ein. */
  .aurora,
  .hero__logo,
  .hero__title,
  .hero__lead,
  .hero__actions,
  .countdown,
  .hero__glow,
  .countdown__dot,
  .marquee__track,
  .star, .flake, .bokeh {
    animation: none;
  }
  /* Der ruhende Zustand der Pulsanimationen ist ihre halbe Deckkraft */
  .hero__glow, .countdown__dot { opacity: .7; }

  /* Einblenden entfällt, der Inhalt steht sofort */
  [data-reveal], [data-reveal-children] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Bewegung im Hover ja, Verschiebung nein */
  .tile { transition-duration: .15s; }
  .tile:hover { transform: none; }
  .btn:hover, .btn:active { transform: none; }
  .legal[open] { animation: none; }
  .btn, a, .footer__link, .legal__close { transition-duration: .12s; }
}