/* =========================================================
   CRATERLE — DESIGN TOKENS
   ========================================================= */
:root {
  /* Day palette */
  --cream: #FBF5EA;
  --paper: #F5E6D3;
  --paper-deep: #EDD6B8;
  --rosa: #E8B4B8;
  --rosa-deep: #D88F95;
  --green: #B8D4A3;
  --green-deep: #8FB570;
  --orange: #F0C78A;
  --orange-deep: #E2A65B;
  --ink: #1F1C18;
  --ink-soft: #4A4038;
  --ink-muted: #8A7A6A;

  /* Night palette — warm bar, not cold tech */
  --night-bg: #14111E;
  --night-deep: #0B0914;
  --night-card: #1F1A2E;
  --night-ink: #F5E8D0;
  --night-ink-soft: #D4BFA0;
  --night-ink-muted: #8A7B6A;
  --candle: #F4B860;
  --candle-soft: #E8A855;
  --berry: #C7566C;
  --plum: #5B3F5E;

  /* Active theme (switched by .night on body) */
  --bg: var(--cream);
  --bg-alt: var(--paper);
  --ink-active: var(--ink);
  --ink-active-soft: var(--ink-soft);
  --ink-active-muted: var(--ink-muted);
  --accent: var(--rosa-deep);
  --accent-soft: var(--rosa);
  --line: rgba(31, 28, 24, 0.14);
  --line-strong: rgba(31, 28, 24, 0.55);

  /* Typography */
  --font-display: "Fraunces", "Playfair Display", Georgia, serif;
  --font-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Fluid scale */
  --t-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --t-sm: clamp(0.88rem, 0.84rem + 0.2vw, 0.95rem);
  --t-base: clamp(1rem, 0.95rem + 0.25vw, 1.1rem);
  --t-lg: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
  --t-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --t-2xl: clamp(2rem, 1.5rem + 2vw, 3rem);
  --t-3xl: clamp(2.8rem, 2rem + 3.5vw, 4.5rem);
  --t-4xl: clamp(3.6rem, 2.5rem + 5vw, 6.5rem);
  --t-hero: clamp(4.5rem, 3rem + 7vw, 9rem);

  /* Spacing rhythm */
  --gutter: clamp(1.25rem, 1rem + 2vw, 2.5rem);
  --s-1: 0.5rem;  --s-2: 1rem;  --s-3: 1.5rem;  --s-4: 2rem;
  --s-5: 3rem;   --s-6: 4rem;  --s-7: 6rem;    --s-8: 8rem;

  /* Radius & shadow */
  --r-sm: 8px;  --r-md: 16px;  --r-lg: 28px;  --r-xl: 40px;  --r-full: 9999px;
  --sh-sm: 0 2px 6px rgba(31, 28, 24, 0.06), 0 8px 24px rgba(31, 28, 24, 0.04);
  --sh-md: 0 4px 14px rgba(31, 28, 24, 0.08), 0 20px 50px rgba(31, 28, 24, 0.08);
  --sh-lg: 0 10px 30px rgba(31, 28, 24, 0.12), 0 30px 80px rgba(31, 28, 24, 0.12);
  --sh-night: 0 4px 20px rgba(0,0,0,0.4), 0 30px 80px rgba(0,0,0,0.5);

  --ease: cubic-bezier(0.4, 0, 0.1, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.night {
  --bg: var(--night-bg);
  --bg-alt: var(--night-card);
  --ink-active: var(--night-ink);
  --ink-active-soft: var(--night-ink-soft);
  --ink-active-muted: var(--night-ink-muted);
  --accent: var(--candle);
  --accent-soft: var(--candle-soft);
  --line: rgba(244, 184, 96, 0.2);
  --line-strong: rgba(244, 184, 96, 0.55);
}
/* =========================================================
   BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--ink-active);
  background: transparent;
  transition: color 0.9s var(--ease);
  overflow-x: hidden;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }

/* Display type */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 144;
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 500;
  color: var(--ink-active-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: var(--s-8) 0;
  position: relative;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 1.7em;
  border-radius: var(--r-full);
  font-weight: 500;
  font-size: var(--t-sm);
  letter-spacing: 0.02em;
  transition: transform 0.3s var(--ease-out), background 0.3s var(--ease), box-shadow 0.3s var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: var(--ink-active);
  color: var(--bg);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}
.btn-ghost {
  background: transparent;
  color: var(--ink-active);
  border: 1.5px solid var(--line-strong);
}
.btn-ghost:hover {
  background: var(--ink-active);
  color: var(--bg);
  border-color: var(--ink-active);
}
.btn .arrow {
  transition: transform 0.3s var(--ease-out);
}
.btn:hover .arrow {
  transform: translateX(4px);
}

/* Animations */
@keyframes twinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.1); }
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
}
@keyframes drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(6px, -8px) rotate(4deg); }
  66% { transform: translate(-4px, 6px) rotate(-3deg); }
}
@keyframes steam {
  0% { opacity: 0; transform: translateY(0) scale(1); }
  50% { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(-30px) scale(1.3); }
}
@keyframes pulse-ring {
  0% { transform: scale(0.95); opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Utility */
.mono { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.05em; }
.sep-dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.4; margin: 0 0.6em; vertical-align: middle; }

/* =========================================================
   SCROLL-AWARE THEMING — sections blend with sky
   Sections go from opaque warm paper (day) to translucent
   panels on night sky. Text colors invert smoothly.
   ========================================================= */

/* Body is transparent so sky shows through every section */
body.has-sky { background: transparent !important; }

/* Scroll-evening: triggered at progress > 0.50 (golden hour begins) */
body.has-sky.scroll-evening {
  --ink-active: #FFF0D8;
  --ink-active-soft: #E8D4B0;
  --ink-active-muted: #B8A080;
  --line: rgba(255, 220, 170, 0.18);
  --line-strong: rgba(255, 220, 170, 0.45);
  transition: color 0.5s, background 0.5s;
}

/* Scroll-night: progress > 0.72 */
body.has-sky.scroll-night {
  --ink-active: #F5E8D0;
  --ink-active-soft: #D4BFA0;
  --ink-active-muted: #8A7B6A;
  --accent: #F4B860;
  --accent-soft: #E8A855;
  --line: rgba(244, 184, 96, 0.2);
  --line-strong: rgba(244, 184, 96, 0.5);
}

/* Make sections translucent so sky shows through, instead of solid paper */
body.has-sky .section,
body.has-sky .marquee,
body.has-sky .menu-section,
body.has-sky .events-section,
body.has-sky .story-section,
body.has-sky .res-section {
  background: transparent;
  transition: background 0.6s;
}

/* Give sections a subtle translucent backdrop panel that reads with any sky */
body.has-sky .section-panel,
body.has-sky .menu-section > .wrap,
body.has-sky .story-section > .wrap,
body.has-sky .res-section > .wrap {
  position: relative;
}

/* Day: soft warm cream tint; Night: dark warm purple tint; via ::before on sections */
body.has-sky .section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(251, 245, 234, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: -1;
  transition: background 0.6s;
  pointer-events: none;
}
body.has-sky.scroll-evening .section::before {
  background: rgba(91, 63, 94, 0.35);
}
body.has-sky.scroll-night .section::before {
  background: rgba(20, 17, 30, 0.72);
}

/* Hero stays fully transparent */
body.has-sky .hero::before { display: none; }
body.has-sky .hero { background: transparent !important; }

/* Marquee gets a stronger panel so text is legible */
body.has-sky .marquee {
  background: rgba(245, 230, 211, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body.has-sky.scroll-evening .marquee {
  background: rgba(91, 63, 94, 0.45);
}
body.has-sky.scroll-night .marquee {
  background: rgba(31, 26, 46, 0.72);
}

/* Footer keeps solid dark background to ground the page */
body.has-sky .footer { background: var(--ink); color: var(--cream); }
body.has-sky.scroll-night .footer { background: #05030a; }

/* =========================================================
   INTRO — cinematic meteor impact v3
   Realistic atmospheric entry at steep angle from upper-right
   Timeline:
     0.0s  deep blue-violet sky, stars twinkling
     0.3s  distant plasma streak appears upper-right
     0.6s  meteor body emerges, growing, trail lengthening
     2.2s  atmospheric heating peaks — bright white-hot
     2.6s  IMPACT — flash, shockwaves, debris
     2.8s  dust cloud billows out
     3.2s  sky bursts into dawn colors
     3.4s  crater silhouette forms
     4.2s  child handprint stamps inside
     4.6s  CRATERLE lockup lands
     5.4s  subtitle fades in
     6.8s  auto-dismiss
   ========================================================= */

.intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #020108;
  overflow: hidden;
  pointer-events: auto;
  transition: opacity 1s ease, visibility 1s;
  display: block !important;
}
.intro.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  display: none !important;
}

/* ------------------------------------------------------------
   SKY — deep space → atmospheric entry glow → dawn
   ------------------------------------------------------------ */
.intro-sky {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 100%, #1a1037 0%, #0a0620 50%, #020108 100%);
  animation: intro-sky 6.8s cubic-bezier(.4,.0,.2,1) forwards;
}
@keyframes intro-sky {
  0%   { background: radial-gradient(ellipse at 70% 100%, #1a1037 0%, #0a0620 50%, #020108 100%); }
  25%  { background: radial-gradient(ellipse at 70% 100%, #2a1a4a 0%, #120a2a 50%, #020108 100%); }
  /* impact flash in white - done by flash layer */
  40%  { background: radial-gradient(ellipse at 50% 55%, #FFF3D0 0%, #F5A96E 35%, #8B3C4C 75%, #2a1a4a 100%); }
  55%  { background: radial-gradient(ellipse at 50% 60%, #FFE3B0 0%, #F0BC80 30%, #C77A55 70%, #3a2050 100%); }
  70%  { background: radial-gradient(ellipse at 50% 70%, #FFE8C5 0%, #F5CD92 50%, #E5A560 90%); }
  100% { background: #FBF5EA; }
}

/* ------------------------------------------------------------
   STARS — visible only during space/entry phase
   ------------------------------------------------------------ */
.intro-stars {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: intro-stars 6.8s ease forwards;
}
@keyframes intro-stars {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  35%  { opacity: 1; }
  42%  { opacity: 0; }
  100% { opacity: 0; }
}
.intro-star {
  position: absolute;
  width: 2px; height: 2px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px #fff;
  animation: twinkle 2.5s infinite ease-in-out;
}
@keyframes twinkle {
  0%,100% { opacity: .3; transform: scale(.8); }
  50%     { opacity: 1;  transform: scale(1.2); }
}

/* ------------------------------------------------------------
   METEOR — steep diagonal dive from upper-right to lower-center
   Angle: roughly 55° below horizontal, trail streams back toward upper-right
   ------------------------------------------------------------ */
.meteor-wrap {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  perspective: 1000px;
}

/* The meteor itself — a container we translate along the path */
.meteor {
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0; /* zero-size point */
  opacity: 0;
  animation: meteor-path 2.3s cubic-bezier(.35,.05,.8,.5) .4s forwards;
  z-index: 3;
  /* rotation matches flight direction: down-and-left at ~235deg */
  --angle: 235deg;
}
@keyframes meteor-path {
  0% {
    /* start far upper-right, behind screen */
    transform: translate(105vw, -25vh) scale(.3);
    opacity: 0;
  }
  5%  { opacity: .5; }
  15% { opacity: 1; transform: translate(95vw, -15vh) scale(.5); }
  50% { opacity: 1; transform: translate(75vw, 15vh) scale(.85); }
  85% { opacity: 1; transform: translate(58vw, 42vh) scale(1.15); }
  100% {
    transform: translate(50vw, 55vh) scale(1.5);
    opacity: 1;
  }
}

/* The glowing rock — spins and flickers */
.meteor-core {
  position: absolute;
  top: -22px; left: -22px;
  width: 44px; height: 44px;
  transform-origin: center;
  animation: meteor-spin 1.2s linear infinite;
}
@keyframes meteor-spin {
  to { transform: rotate(360deg); }
}
.meteor-core svg {
  width: 100%; height: 100%;
  filter:
    drop-shadow(0 0 8px #FFE8A0)
    drop-shadow(0 0 20px #FFB864)
    drop-shadow(0 0 40px rgba(255, 120, 60, .8));
}

/* Heat halo pulsing around the rock */
.meteor-halo {
  position: absolute;
  top: -60px; left: -60px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 240, 180, .9) 0%,
    rgba(255, 180, 80, .6) 25%,
    rgba(255, 100, 40, .3) 50%,
    transparent 75%);
  filter: blur(4px);
  animation: meteor-halo-pulse .3s ease-in-out infinite alternate;
}
@keyframes meteor-halo-pulse {
  from { transform: scale(1); opacity: .8; }
  to   { transform: scale(1.2); opacity: 1; }
}

/* Trail — a long tapering streak extending back along the flight axis (upper-right) */
.meteor-trail {
  position: absolute;
  top: 0; left: 0;
  width: 700px;
  height: 26px;
  /* anchor right edge at meteor position, extend back to the upper-right */
  transform-origin: 100% 50%;
  transform: translate(-700px, -13px) rotate(-55deg);
  /* translate so right edge meets meteor, then rotate to point back along flight vector */
}
.meteor-trail::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to left,
    rgba(255, 255, 240, 1) 0%,
    rgba(255, 220, 140, .95) 5%,
    rgba(255, 170, 80, .85) 18%,
    rgba(255, 110, 50, .55) 38%,
    rgba(200, 70, 40, .3) 62%,
    rgba(120, 40, 30, .1) 85%,
    transparent 100%);
  /* Taper: narrows toward the tail (left side) */
  clip-path: polygon(0 48%, 100% 0, 100% 100%, 0 52%);
  filter: blur(2px);
}
.meteor-trail::after {
  /* outer smoke/ember haze */
  content: "";
  position: absolute;
  inset: -20px 0;
  background: linear-gradient(to left,
    rgba(255, 200, 120, .4) 0%,
    rgba(240, 140, 80, .3) 30%,
    rgba(160, 80, 60, .15) 65%,
    transparent 100%);
  clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 60%);
  filter: blur(12px);
}

/* Spark particles shedding from the trail */
.meteor-spark {
  position: absolute;
  top: -1px;
  width: 3px; height: 3px;
  background: #FFE8A0;
  border-radius: 50%;
  box-shadow: 0 0 6px #FFB864;
  animation: spark-shed 1.8s ease-out infinite;
}
.meteor-spark:nth-child(1) { left: 20%; animation-delay: .0s; }
.meteor-spark:nth-child(2) { left: 35%; animation-delay: .3s; }
.meteor-spark:nth-child(3) { left: 50%; animation-delay: .6s; }
.meteor-spark:nth-child(4) { left: 65%; animation-delay: .9s; }
.meteor-spark:nth-child(5) { left: 80%; animation-delay: 1.2s; }
@keyframes spark-shed {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(-30px, 40px) scale(.3); }
}

/* ------------------------------------------------------------
   IMPACT FLASH — pure white blow-out
   ------------------------------------------------------------ */
.intro-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 55%, #fff 0%, #fff 25%, rgba(255,255,255,0) 70%);
  opacity: 0;
  pointer-events: none;
  animation: flash 1.8s ease 2.55s forwards;
}
@keyframes flash {
  0%   { opacity: 0; }
  2%   { opacity: 1; }
  8%   { opacity: .9; }
  25%  { opacity: .4; }
  100% { opacity: 0; }
}

/* ------------------------------------------------------------
   SHOCKWAVE RINGS — tri-colored echoes
   ------------------------------------------------------------ */
.shockwave {
  position: absolute;
  top: 55%; left: 50%;
  width: 40px; height: 40px;
  border: 5px solid #FFE3B3;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  animation: shockwave 2.4s cubic-bezier(.15,.85,.3,1) 2.6s forwards;
  filter: drop-shadow(0 0 12px rgba(255,220,150,.9));
}
.shockwave.s2 { animation-delay: 2.78s; border-color: #E8B4B8; }
.shockwave.s3 { animation-delay: 2.96s; border-color: #B8D4A3; }
@keyframes shockwave {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; border-width: 7px; }
  60%  { opacity: .4; }
  100% { transform: translate(-50%, -50%) scale(42); opacity: 0; border-width: .5px; }
}

/* ------------------------------------------------------------
   DEBRIS — rock chunks fly outward
   ------------------------------------------------------------ */
.debris {
  position: absolute;
  top: 55%; left: 50%;
  width: 10px; height: 10px;
  background: #1F1C18;
  border-radius: 2px;
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: debris-fly 1.8s cubic-bezier(.2,.8,.3,1) 2.62s forwards;
  box-shadow: 0 0 4px rgba(255, 180, 100, .6);
}
@keyframes debris-fly {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(0); }
  10%  { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx, 100px)), calc(-50% + var(--dy, -80px))) rotate(var(--dr, 720deg));
  }
}

/* ------------------------------------------------------------
   DUST CLOUD — brown haze billowing after impact
   ------------------------------------------------------------ */
.dust-cloud {
  position: absolute;
  top: 55%; left: 50%;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(210, 170, 120, .85) 0%,
    rgba(180, 140, 100, .65) 40%,
    rgba(140, 100, 80, .3) 70%,
    transparent 100%);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  filter: blur(8px);
  animation: dust-cloud 2.5s cubic-bezier(.2,.5,.3,1) 2.75s forwards;
}
.dust-cloud.d2 {
  animation-delay: 2.9s;
  background: radial-gradient(circle,
    rgba(245, 200, 140, .7) 0%,
    rgba(220, 160, 100, .45) 50%,
    transparent 80%);
}
@keyframes dust-cloud {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  15%  { opacity: .95; }
  100% { transform: translate(-50%, -70%) scale(16); opacity: 0; }
}

/* ------------------------------------------------------------
   CRATER — forms after impact
   ------------------------------------------------------------ */
.crater-form {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -35%) scale(0);
  opacity: 0;
  animation: crater-form 1.4s cubic-bezier(.34,1.56,.64,1) 3.4s forwards;
  z-index: 5;
}
@keyframes crater-form {
  0%   { transform: translate(-50%, -35%) scale(0) rotate(-20deg); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translate(-50%, -35%) scale(1) rotate(0); opacity: 1; }
}

/* ------------------------------------------------------------
   HANDPRINT — child handprint stamps inside
   ------------------------------------------------------------ */
.handprint-form {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -30%) scale(0) rotate(-8deg);
  opacity: 0;
  animation: hand-form .55s cubic-bezier(.34,1.56,.64,1) 4.2s forwards;
  z-index: 6;
  filter: drop-shadow(0 2px 4px rgba(31,28,24,.15));
}
@keyframes hand-form {
  0%   { transform: translate(-50%, -30%) scale(0) rotate(-8deg); opacity: 0; }
  60%  { transform: translate(-50%, -30%) scale(1.15) rotate(-8deg); opacity: 1; }
  100% { transform: translate(-50%, -30%) scale(1) rotate(-8deg); opacity: 1; }
}

/* ------------------------------------------------------------
   TITLE LOCKUP
   ------------------------------------------------------------ */
.intro-title {
  position: absolute;
  top: 58%; left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 144;
  font-size: clamp(3.5rem, 9vw, 8rem);
  letter-spacing: -0.02em;
  color: #1F1C18;
  opacity: 0;
  animation: intro-title 1s cubic-bezier(.2,.7,.2,1) 4.6s forwards;
  white-space: nowrap;
  text-align: center;
  z-index: 7;
}
@keyframes intro-title {
  0%   { opacity: 0; transform: translateX(-50%) translateY(30px); letter-spacing: 0.15em; }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); letter-spacing: -0.02em; }
}

.intro-sub {
  position: absolute;
  top: calc(58% + clamp(4rem, 9vw, 8rem));
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0.5rem;
  font-style: italic;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.8vw, 1.4rem);
  color: #6B5E48;
  opacity: 0;
  animation: intro-sub .8s ease 5.4s forwards;
  white-space: nowrap;
  z-index: 7;
}
@keyframes intro-sub {
  0%   { opacity: 0; transform: translateX(-50%) translateY(10px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Skip */
.intro-skip {
  position: absolute;
  bottom: 2rem; right: 2rem;
  color: rgba(255,255,255,0.7);
  font-size: .7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-family: var(--font-display);
  padding: 0.8em 1.4em;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  background: rgba(0,0,0,.2);
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 20;
  animation: skip-fade 1s ease .2s both;
}
@keyframes skip-fade { 0% { opacity: 0; } 100% { opacity: 1; } }
.intro-skip:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border-color: rgba(255,255,255,0.6);
}
/* =========================================================
   SCROLL SKY — realistic day→sunset→dusk→night cycle
   Driven by JS (--scroll 0..1) with 5 distinct phases blending:
     0.00–0.30   Morning (warm cream, soft blue above)
     0.30–0.50   Midday (bright cream, pale blue zenith)
     0.50–0.70   Golden hour (peach/amber lower, coral upper)
     0.70–0.85   Dusk (magenta/purple wash, first stars)
     0.85–1.00   Night (deep violet/navy, stars, moon bright)
   Implementation: one sky element with 5 stacked gradient layers,
   each fading in/out via its own --phase variable computed in JS.
   ========================================================= */

.scroll-sky {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  background: #FBF5EA;
}

/* Each phase layer is a full-screen gradient. We stack them and
   fade using opacity driven by JS-set --phase-{name} (0..1). */
.scroll-sky::before,
.scroll-sky::after,
.scroll-sky > .sky-layer {
  content: "";
  position: absolute;
  inset: 0;
  transition: opacity .25s linear;
}

.sky-morning {
  background:
    linear-gradient(to bottom,
      #FFE9C2 0%,
      #FFF4D8 35%,
      #FCE8CE 65%,
      #F5D9B8 100%);
  opacity: var(--phase-morning, 1);
}
.sky-midday {
  background:
    linear-gradient(to bottom,
      #BEDFFF 0%,
      #E3F2FF 30%,
      #FFF8E8 60%,
      #FBF0DA 100%);
  opacity: var(--phase-midday, 0);
}
.sky-golden {
  background:
    linear-gradient(to bottom,
      #FFB280 0%,
      #FFCF8A 18%,
      #F5A86A 42%,
      #D8745C 75%,
      #8E3F5C 100%);
  opacity: var(--phase-golden, 0);
}
.sky-dusk {
  background:
    linear-gradient(to bottom,
      #5B3F74 0%,
      #8E4268 20%,
      #C76B5A 45%,
      #6E3758 75%,
      #2C1E44 100%);
  opacity: var(--phase-dusk, 0);
}
.sky-night {
  background:
    linear-gradient(to bottom,
      #0A0818 0%,
      #120B28 30%,
      #1A1240 60%,
      #241645 100%);
  opacity: var(--phase-night, 0);
}

/* Sun-glow at horizon — peaks during golden hour, follows sun y-position */
.sky-sunglow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 60vw 25vh at var(--sun-glow-x, 50%) var(--sun-glow-y, 85%),
    rgba(255, 180, 100, .75) 0%,
    rgba(255, 130, 80, .45) 25%,
    rgba(230, 90, 90, .2) 55%,
    transparent 85%);
  opacity: var(--phase-golden-glow, 0);
  transition: opacity .3s linear;
  mix-blend-mode: screen;
}

/* Subtle noise/grain for realism */
.sky-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .05;
  /* Grain disabled to avoid bundler URL-parsing issue with nested url(#n) */
}

/* Horizon silhouette — very subtle, darkens into night */
.scroll-horizon {
  position: fixed;
  bottom: 0; left: 0;
  width: 100%;
  height: 18vh;
  z-index: 2;
  pointer-events: none;
  opacity: calc(.08 + var(--scroll, 0) * .25);
}
.scroll-horizon svg { width: 100%; height: 100%; display: block; }
.scroll-horizon svg path { fill: #1F1C18; transition: fill .4s; }
body.scroll-night .scroll-horizon svg path { fill: #05030a; }

/* ---------- Sun ---------- */
.scroll-sun {
  position: fixed;
  width: 110px;
  height: 110px;
  z-index: 3;
  pointer-events: none;
  left: 0; top: 0;
  will-change: transform, opacity;
}
.scroll-sun-core {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
    #FFFAE8 0%,
    #FFE5A8 30%,
    #FFC470 60%,
    #F29840 100%);
  box-shadow:
    0 0 40px rgba(255, 200, 120, .9),
    0 0 100px rgba(255, 160, 80, .7),
    0 0 180px rgba(255, 120, 60, .4);
  animation: sun-pulse 4s ease-in-out infinite;
}
@keyframes sun-pulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50%      { transform: scale(1.04); filter: brightness(1.1); }
}
.scroll-sun-rays {
  position: absolute;
  inset: 0;
  animation: sun-spin 60s linear infinite;
}
.scroll-sun-rays line {
  stroke: #FFD890;
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: .6;
}
@keyframes sun-spin { to { transform: rotate(360deg); } }

/* ---------- Moon ---------- */
.scroll-moon {
  position: fixed;
  width: 95px;
  height: 95px;
  z-index: 3;
  pointer-events: none;
  left: 0; top: 0;
  will-change: transform, opacity;
  opacity: 0;
}
.scroll-moon-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
    #FDF6E0 0%,
    #E8DCC0 45%,
    #B8A990 85%,
    #8A7A60 100%);
  box-shadow:
    inset -8px -10px 22px rgba(0,0,0,.35),
    0 0 30px rgba(245, 232, 208, .6),
    0 0 80px rgba(245, 232, 208, .3);
}
.scroll-moon-disc::before,
.scroll-moon-disc::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(100, 85, 65, .35);
}
.scroll-moon-disc::before {
  width: 14px; height: 14px;
  top: 22%; left: 30%;
  box-shadow:
    30px 18px 0 -2px rgba(100, 85, 65, .35),
    -6px 30px 0 -3px rgba(100, 85, 65, .35);
}
.scroll-moon-disc::after {
  width: 8px; height: 8px;
  top: 55%; left: 60%;
  box-shadow:
    -20px 4px 0 -1px rgba(100, 85, 65, .3);
}

/* ---------- Stars ---------- */
.scroll-stars {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: var(--phase-stars, 0);
  transition: opacity .4s linear;
}
.scroll-stars span {
  position: absolute;
  width: 2px; height: 2px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255,255,255,.9);
  animation: twinkle 3s infinite ease-in-out;
}

/* ---------- Clouds (day/golden only) ---------- */
.scroll-cloud {
  position: fixed;
  z-index: 2;
  pointer-events: none;
  opacity: calc(var(--phase-morning, 0) + var(--phase-midday, 0) * .8 + var(--phase-golden, 0) * .6);
  transition: opacity .4s;
  filter: blur(.5px);
}
.scroll-cloud svg { display: block; }
.scroll-cloud.c1 {
  top: 12vh;
  transform: translateX(calc(-20vw + var(--scroll, 0) * 130vw));
}
.scroll-cloud.c2 {
  top: 28vh;
  transform: translateX(calc(110vw - var(--scroll, 0) * 140vw));
}
.scroll-cloud.c3 {
  top: 42vh;
  transform: translateX(calc(-10vw + var(--scroll, 0) * 100vw));
}
/* Recolor clouds during golden hour */
.scroll-cloud svg ellipse {
  fill: color-mix(in srgb,
    rgba(255,255,255,.85) calc((1 - var(--phase-golden, 0)) * 100%),
    rgba(255, 200, 140, .9) calc(var(--phase-golden, 0) * 100%));
}

/* ---------- Floating particles ---------- */
.scroll-particles {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.floater {
  position: absolute;
  opacity: 0;
  animation: float-drift linear infinite;
}
@keyframes float-drift {
  0%   { transform: translate(0, -10vh) rotate(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translate(var(--dx, 50px), 110vh) rotate(var(--dr, 360deg)); opacity: 0; }
}

/* ---------- Body: transparent so sky shows through ---------- */
body.has-sky {
  background: transparent !important;
}
body.has-sky .hero {
  background: transparent !important;
}
/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.1rem 0;
  transition: background 0.4s var(--ease), backdrop-filter 0.4s var(--ease), padding 0.3s var(--ease), border-color 0.4s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 0.7rem 0;
  border-color: var(--line);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
}
.nav-brand-ring {
  width: 32px; height: 32px;
}
.nav-brand-ring path { stroke: var(--ink-active); }
.nav-brand-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}
@media (max-width: 767.98px) {
  .nav-brand-logo { width: 32px; height: 32px; }
}
.nav-links {
  display: flex;
  gap: var(--s-4);
  margin-left: var(--s-5);
  align-items: center;
}
.nav-links a {
  font-size: var(--t-sm);
  color: var(--ink-active-soft);
  position: relative;
  padding: 0.3rem 0;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--ink-active); }
.nav-links a::after {
  content: "";
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1.5px;
  background: var(--accent);
  transition: width 0.3s var(--ease-out);
}
.nav-links a:hover::after { width: 100%; }

.nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* Opening-status pill — real-time, tone-shifted by current state */
.nav-status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.42rem 0.85rem 0.42rem 0.75rem;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--paper) 60%, transparent);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.5s, color 0.5s, border-color 0.5s;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #7BB07A;
  box-shadow: 0 0 0 0 rgba(123, 176, 122, 0.6);
  animation: status-pulse 2.2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(123,176,122,.55); }
  50%      { box-shadow: 0 0 0 8px rgba(123,176,122,0); }
}
.nav-status[data-tone="night"] .nav-status-dot { background: #F4B860; animation-name: status-pulse-night; }
@keyframes status-pulse-night {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244,184,96,.55); }
  50%      { box-shadow: 0 0 0 8px rgba(244,184,96,0); }
}
.nav-status[data-tone="closed"] .nav-status-dot { background: #C97268; animation: none; }

/* Tone-driven color shift in nav so the pill reads on any sky */
body.scroll-evening .nav-status { background: rgba(30,20,45,.55); color: #FFE9C8; border-color: rgba(255,220,170,.25); }
body.scroll-night   .nav-status { background: rgba(18,13,30,.7);  color: #F5E8D0; border-color: rgba(244,184,96,.3); }

.lang {
  display: inline-flex;
  gap: 0.3rem;
  font-size: var(--t-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  align-items: center;
}
.lang button {
  padding: 0.3em 0.5em;
  color: var(--ink-active-muted);
  transition: color 0.2s;
}
.lang button.active { color: var(--ink-active); font-weight: 600; }
.lang-sep { color: var(--ink-active-muted); opacity: 0.4; }

.nav-cta {
  padding: 0.7em 1.2em;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.nav-burger {
  display: none;
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
}
.nav-burger span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--ink-active);
  position: relative;
}
.nav-burger span::before, .nav-burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--ink-active);
  transition: transform 0.3s;
}
.nav-burger span::before { top: -7px; }
.nav-burger span::after { top: 7px; }

@media (max-width: 960px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-burger { display: inline-flex; }
}

/* Mobile menu */
.nav-mobile {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-7) var(--gutter);
}
.nav-mobile.open { opacity: 1; pointer-events: auto; }
.nav-mobile a {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  color: var(--ink-active);
}
/* =========================================================
   HERO — dual day/night, crater as protagonist
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: 8rem 0 6rem;
  display: flex;
  align-items: center;
  transition: background 0.9s var(--ease);
}

/* Override !important — scroll-sky handles these now */
body:not(.night) .hero,
body.night .hero { background: transparent !important; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s-6);
  align-items: center;
  position: relative;
  z-index: 2;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-5); }
}

.hero-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.4em 1em 0.4em 0.4em;
  background: color-mix(in srgb, var(--bg-alt) 70%, transparent);
  border-radius: var(--r-full);
  font-size: var(--t-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-active-soft);
  margin-bottom: var(--s-3);
  border: 1px solid var(--line);
}
.hero-mark-dot {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  position: relative;
}
.hero-mark-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.4;
  animation: pulse-ring 2s ease-out infinite;
}

.hero-title {
  font-family: var(--font-display);
  font-size: var(--t-hero);
  line-height: 0.9;
  letter-spacing: -0.035em;
  font-weight: 400;
  color: var(--ink-active);
  margin: 0 0 var(--s-3);
  font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 144;
}
.hero-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}
.hero-title .break { display: block; }

.hero-lede {
  font-size: var(--t-lg);
  color: var(--ink-active-soft);
  max-width: 48ch;
  margin: 0 0 var(--s-4);
  line-height: 1.5;
}

.hero-meta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--ink-active-muted);
  margin-bottom: var(--s-4);
  flex-wrap: wrap;
}
.hero-meta svg { width: 16px; height: 16px; opacity: 0.7; }

.hero-ctas {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
}

/* Status chip = the schedule */
.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7em 1.2em;
  background: var(--bg-alt);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  font-size: var(--t-sm);
}
.hero-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green-deep);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--green-deep) 30%, transparent);
  animation: breathe 2.5s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Hero visual — the crater scene */
.hero-visual {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 560px;
  margin-left: auto;
  width: 100%;
}
.crater-scene {
  position: absolute;
  inset: 0;
}
.crater-disc {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--paper-deep) 100%, white 10%) 0%, var(--paper-deep) 40%, var(--paper) 100%);
  box-shadow:
    inset 0 -30px 60px rgba(31, 28, 24, 0.15),
    inset 0 30px 60px rgba(255, 255, 255, 0.3),
    0 40px 80px rgba(31, 28, 24, 0.12);
  transition: background 0.9s, box-shadow 0.9s;
}
body.night .crater-disc {
  background:
    radial-gradient(circle at 30% 30%, #2a2040 0%, #1a1430 50%, #0f0a1e 100%);
  box-shadow:
    inset 0 -30px 60px rgba(0,0,0,0.6),
    inset 0 30px 60px rgba(244, 184, 96, 0.08),
    0 40px 80px rgba(0,0,0,0.4);
}
.crater-ring-big {
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: float 8s ease-in-out infinite;
}
.crater-ring-big path {
  stroke: var(--ink-active);
  stroke-width: 4;
  fill: none;
  stroke-linecap: round;
}
.crater-center-hand {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -55%);
  width: 30%;
  opacity: 0.85;
}
.crater-center-hand path, .crater-center-hand ellipse { fill: var(--ink-active); transition: fill 0.6s; }
.crater-center-hand g path { fill: var(--ink-active); }

/* Orbiting items around the crater */
.orbit {
  position: absolute;
  inset: 0;
  animation: orbit-spin 40s linear infinite;
}
.orbit-item {
  position: absolute;
  width: 18%;
  transition: opacity 0.6s;
}
.orbit-item.day-only { opacity: 1; }
.orbit-item.night-only { opacity: 0; }
body.night .orbit-item.day-only { opacity: 0; }
body.night .orbit-item.night-only { opacity: 1; }

.orbit-item.pos-1 { top: -4%; left: 50%; transform: translateX(-50%); }
.orbit-item.pos-2 { top: 50%; right: -4%; transform: translateY(-50%); }
.orbit-item.pos-3 { bottom: -4%; left: 50%; transform: translateX(-50%); }
.orbit-item.pos-4 { top: 50%; left: -4%; transform: translateY(-50%); }
.orbit-item.pos-5 { top: 12%; right: 12%; }
.orbit-item.pos-6 { bottom: 12%; left: 12%; }

/* Counter-rotate items so they stay upright */
.orbit-item > * { animation: orbit-counter 40s linear infinite; display: block; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes orbit-counter { to { transform: rotate(-360deg); } }

/* Floating side: sun/moon */
.hero-celestial {
  position: absolute;
  top: 8%; right: 8%;
  width: 140px;
  height: 140px;
  transition: opacity 0.9s, transform 0.9s;
  z-index: 3;
}
.hero-sun { opacity: 1; }
.hero-moon { opacity: 0; transform: scale(0.7) rotate(-30deg); }
body.night .hero-sun { opacity: 0; transform: scale(0.7) rotate(30deg); }
body.night .hero-moon { opacity: 1; transform: scale(1) rotate(0); }
.hero-sun, .hero-moon { position: absolute; inset: 0; }
.hero-sun-core {
  position: absolute; inset: 20%;
  border-radius: 50%;
  background: radial-gradient(circle, #FFE9A8 0%, #F5C97E 60%, #E8A855 100%);
  box-shadow: 0 0 60px rgba(245, 201, 126, 0.5);
  animation: float 6s ease-in-out infinite;
}
.hero-sun-rays { position: absolute; inset: 0; animation: orbit-spin 60s linear infinite; }
.hero-sun-rays line { stroke: #F5C97E; stroke-width: 3; stroke-linecap: round; }

.hero-moon-disc {
  position: absolute; inset: 20%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #F5E8D0 0%, #D4BFA0 100%);
  box-shadow: 0 0 40px rgba(244, 184, 96, 0.3);
}
.hero-moon-disc::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  box-shadow: inset -15px -5px 20px rgba(0,0,0,0.4);
}

/* Stars background night-only */
.hero-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
  z-index: 1;
}
body.night .hero-stars { opacity: 1; }
.hero-stars span {
  position: absolute;
  width: 2px; height: 2px;
  background: var(--night-ink);
  border-radius: 50%;
  animation: twinkle 3s infinite;
}

/* Scroll hint */
.scroll-hint {
  position: absolute;
  bottom: 2.5rem; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-active-muted);
  z-index: 2;
}
.scroll-hint .line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, transparent, var(--ink-active-muted), transparent);
  animation: scroll-line 2s ease-in-out infinite;
}
@keyframes scroll-line {
  0%, 100% { transform: scaleY(0.5); opacity: 0.4; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* Decorative flowers */
.hero-bloom {
  position: absolute;
  width: 80px;
  height: 80px;
  animation: drift 8s ease-in-out infinite;
  z-index: 2;
}
.hero-bloom.b1 { top: 15%; left: 5%; width: 70px; animation-delay: 0s; }
.hero-bloom.b2 { top: 68%; left: 8%; width: 55px; animation-delay: -2s; }
.hero-bloom.b3 { bottom: 8%; right: 10%; width: 60px; animation-delay: -4s; }

body.night .hero-bloom { opacity: 0.4; filter: saturate(0.7) brightness(0.9); }
/* =========================================================
   HERO BANNER — illustrated Nördlingen cafe as hero visual
   Reacts to scroll-sky progress: day → dusk → night
   ========================================================= */

.hero-banner-wrap {
  position: relative;
  aspect-ratio: 5 / 4;
  max-width: 640px;
  margin-left: auto;
  width: 100%;
}

.hero-banner {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(180deg, #B8D4E8 0%, #E8D4B0 55%, #D4B890 100%);
  box-shadow:
    0 30px 80px -20px rgba(31, 28, 24, 0.35),
    0 10px 30px -10px rgba(31, 28, 24, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition:
    background 1.2s cubic-bezier(.4,0,.2,1),
    filter 1.2s cubic-bezier(.4,0,.2,1);
  transform: perspective(1200px) rotateX(2deg) rotateY(-2deg);
  transform-style: preserve-3d;
}

/* Illustration itself */
.hero-banner-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  display: block;
  transition: filter 1.2s ease;
}

/* ----- Night mode driven by data-mode AND by scroll-sky classes ----- */
body.scroll-evening .hero-banner,
.hero-banner[data-mode="night"] {
  background: linear-gradient(180deg, #2a1f4a 0%, #4a2f5a 50%, #3a2548 100%);
}
body.scroll-evening .hero-banner-svg,
.hero-banner[data-mode="night"] .hero-banner-svg {
  filter: brightness(0.65) saturate(0.8) hue-rotate(-10deg);
}

body.scroll-night .hero-banner {
  background: linear-gradient(180deg, #0f0a1e 0%, #1a1430 50%, #0a0714 100%);
}
body.scroll-night .hero-banner-svg {
  filter: brightness(0.45) saturate(0.7) hue-rotate(-20deg) contrast(1.05);
}

/* Glowing window overlay at dusk/night */
.hero-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle 10px at 28% 58%, rgba(255, 220, 140, 0.9), transparent 100%),
    radial-gradient(circle 10px at 42% 58%, rgba(255, 220, 140, 0.9), transparent 100%),
    radial-gradient(circle 12px at 38% 72%, rgba(255, 200, 120, 0.95), transparent 100%),
    radial-gradient(circle 8px at 18% 62%, rgba(255, 210, 130, 0.85), transparent 100%),
    radial-gradient(circle 8px at 62% 66%, rgba(255, 215, 135, 0.85), transparent 100%),
    radial-gradient(circle 10px at 74% 70%, rgba(255, 200, 120, 0.9), transparent 100%);
  opacity: 0;
  transition: opacity 1.5s ease;
  mix-blend-mode: screen;
  animation: hbw-flicker 4s ease-in-out infinite;
}
body.scroll-evening .hero-banner::after { opacity: 0.6; }
body.scroll-night .hero-banner::after { opacity: 1; }
@keyframes hbw-flicker {
  0%, 100% { filter: brightness(1); }
  23%      { filter: brightness(1.15); }
  47%      { filter: brightness(0.92); }
  71%      { filter: brightness(1.1); }
}

/* ----- Fireflies ----- */
.hero-banner-fireflies {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity 1.6s ease;
}
body.scroll-evening .hero-banner-fireflies { opacity: 0.7; }
body.scroll-night .hero-banner-fireflies { opacity: 1; }
.hero-banner-fireflies span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #FFE9A8;
  box-shadow: 0 0 8px #FFD488, 0 0 18px rgba(255, 200, 120, 0.7);
  animation: hb-firefly 4s ease-in-out var(--d, 0s) infinite;
}
@keyframes hb-firefly {
  0%, 100% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  15%      { opacity: 1; transform: translate(4px, -3px) scale(1); }
  50%      { opacity: 0.3; transform: translate(-3px, -10px) scale(0.9); }
  75%      { opacity: 1; transform: translate(6px, -16px) scale(1.1); }
}

/* ----- Floating address card ----- */
.hero-banner-address {
  position: absolute;
  left: 1.4rem;
  bottom: 1.4rem;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: .85rem 1.1rem;
  background: rgba(251, 245, 234, 0.92);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(31, 28, 24, 0.08);
  border-radius: 14px;
  box-shadow: 0 16px 40px -12px rgba(31, 28, 24, 0.35);
  transition: background 0.9s, color 0.9s, border-color 0.9s;
}
.hba-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8B6D3A;
}
.hba-street {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: #1F1C18;
  line-height: 1.1;
  margin-top: 2px;
}
.hba-city {
  font-size: 0.82rem;
  color: rgba(31, 28, 24, 0.65);
  letter-spacing: 0.02em;
}
body.scroll-evening .hero-banner-address,
body.scroll-night .hero-banner-address {
  background: rgba(20, 14, 32, 0.78);
  border-color: rgba(244, 184, 96, 0.25);
}
body.scroll-evening .hba-eyebrow,
body.scroll-night .hba-eyebrow { color: #F4B860; }
body.scroll-evening .hba-street,
body.scroll-night .hba-street { color: #FFF0D8; }
body.scroll-evening .hba-city,
body.scroll-night .hba-city { color: rgba(255, 240, 216, 0.75); }

/* Tag-based override (when hero toggled manually, not used currently) */
.hero-banner[data-mode="night"] .hero-banner-address {
  background: rgba(20, 14, 32, 0.78);
  border-color: rgba(244, 184, 96, 0.25);
}

@media (max-width: 900px) {
  .hero-banner-wrap {
    max-width: 100%;
    margin: 2rem 0 0;
    aspect-ratio: 4 / 3;
  }
  .hero-banner { transform: none; }
  .hero-banner-address {
    left: 1rem;
    bottom: 1rem;
    padding: 0.7rem 0.9rem;
  }
  .hba-street { font-size: 1rem; }
}

/* =========================================================
   GOLDENE STUNDE — before/after comparison strip
   (replaces the previous cafe-banner panel)
   ========================================================= */
.gh-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: stretch;
  margin: clamp(2rem, 5vw, 4rem) auto 0;
  max-width: 1100px;
}
.gh-compare-col {
  padding: 2rem 1.8rem;
  border-radius: 24px;
  position: relative;
  transition: transform 0.4s ease;
}
.gh-compare-col:hover { transform: translateY(-4px); }
.gh-compare-day {
  background: linear-gradient(155deg, rgba(255, 238, 205, 0.9), rgba(250, 220, 188, 0.9));
  border: 1px solid rgba(184, 148, 90, 0.25);
  color: #3A2A1A;
}
.gh-compare-night {
  background: linear-gradient(155deg, rgba(30, 22, 48, 0.85), rgba(58, 35, 72, 0.85));
  border: 1px solid rgba(244, 184, 96, 0.3);
  color: #FFEDD0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.gh-compare-label {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  margin-bottom: 1.2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid currentColor;
  opacity: 0.85;
}
.gh-compare-night .gh-compare-label { color: #F4B860; border-color: rgba(244, 184, 96, 0.3); opacity: 1; }
.gh-compare-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.gh-compare-list li {
  font-size: 1.05rem;
  line-height: 1.3;
  padding-left: 1.4rem;
  position: relative;
}
.gh-compare-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
}
.gh-compare-night .gh-compare-list li::before { background: #F4B860; opacity: 1; }
.gh-compare-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-active-soft, #8B6D3A);
  width: 64px;
}
.gh-compare-arrow svg { width: 48px; height: 24px; }
@media (max-width: 800px) {
  .gh-compare { grid-template-columns: 1fr; }
  .gh-compare-arrow { transform: rotate(90deg); margin: 0 auto; }
}
/* =========================================================
   SECTIONS
   ========================================================= */

/* Rebranding marquee — "Vom Crater zum Craterle" */
.marquee {
  padding: var(--s-5) 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
  transition: background 0.9s;
}
.marquee-track {
  display: flex;
  gap: var(--s-5);
  animation: marquee 45s linear infinite;
  white-space: nowrap;
  width: max-content;
}
.marquee-track span {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-style: italic;
  font-weight: 300;
  color: var(--ink-active);
  display: inline-flex;
  align-items: center;
  gap: var(--s-5);
}
.marquee-track span::after {
  content: "";
  width: 12px; height: 12px;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* Section headers */
.sec-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-4);
  align-items: end;
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.sec-head-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-3xl);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0.5rem 0 0;
  color: var(--ink-active);
  font-variation-settings: "SOFT" 50, "WONK" 1;
}
.sec-head-title em { font-style: italic; color: var(--accent); font-weight: 300; }
.sec-head-num {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--ink-active-muted);
  letter-spacing: 0.15em;
}
@media (max-width: 720px) {
  .sec-head { grid-template-columns: 1fr; }
}

/* KONZEPT — two giant cards, day + night */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
@media (max-width: 900px) {
  .duo { grid-template-columns: 1fr; }
}
.duo-card {
  position: relative;
  border-radius: var(--r-lg);
  padding: var(--s-5);
  min-height: 560px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.duo-card > * { min-width: 0; max-width: 100%; }
.duo-card:hover { transform: translateY(-6px); }
.duo-day {
  background:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.5), transparent 50%),
    linear-gradient(160deg, var(--paper) 0%, var(--rosa) 130%);
  color: var(--ink);
}
.duo-night {
  background:
    radial-gradient(circle at 20% 80%, rgba(244, 184, 96, 0.15), transparent 50%),
    linear-gradient(160deg, #2A1F3E 0%, #14111E 100%);
  color: var(--night-ink);
}
.duo-time {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.7;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.duo-title {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 1.5rem 0 0.6rem;
  font-variation-settings: "SOFT" 50, "WONK" 1;
}
.duo-title em { font-style: italic; font-weight: 300; }
.duo-desc {
  font-size: var(--t-base);
  max-width: 40ch;
  opacity: 0.85;
  margin: 0 0 var(--s-3);
}
.duo-list { display: flex; flex-direction: column; gap: 0.7rem; font-size: var(--t-sm); }
.duo-list li { display: flex; align-items: center; gap: 0.7rem; }
.duo-list li::before {
  content: ""; flex-shrink: 0;
  width: 14px; height: 14px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  opacity: 0.6;
}
.duo-card-art {
  position: absolute;
  opacity: 0.2;
  pointer-events: none;
}
.duo-day .duo-card-art { top: -20%; right: -20%; width: 60%; animation: orbit-spin 80s linear infinite; }
.duo-night .duo-card-art { bottom: -20%; left: -20%; width: 60%; animation: float 10s ease-in-out infinite; }

/* SPIELECKE — 3 cards with SVG */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } }

.feature-card {
  position: relative;
  padding: var(--s-4);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  transition: transform 0.4s var(--ease-out), border-color 0.4s;
  min-height: 340px;
}
.feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
}
.feature-icon {
  width: 56px; height: 56px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent) 30%, var(--bg));
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-2);
}
.feature-icon svg { width: 32px; height: 32px; }
.feature-icon svg path, .feature-icon svg ellipse, .feature-icon svg circle {
  stroke: var(--ink-active);
  fill: transparent;
  stroke-width: 2;
}
.feature-title {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 500;
  margin: 0;
  line-height: 1.05;
  color: var(--ink-active);
}
.feature-desc {
  font-size: var(--t-sm);
  color: var(--ink-active-soft);
  margin: 0;
  flex: 1;
}
.feature-badge {
  align-self: flex-start;
  padding: 0.35em 0.9em;
  border-radius: var(--r-full);
  font-size: var(--t-xs);
  background: var(--ink-active);
  color: var(--bg);
  letter-spacing: 0.05em;
}

.feature-card .feature-kicker {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-active-muted);
}

/* SPEISEN — menu style layout */
.menu-section { background: var(--bg-alt); transition: background 0.9s; }
.menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5) var(--s-6);
}
@media (max-width: 800px) { .menu-grid { grid-template-columns: 1fr; } }
.menu-col h3 {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 500;
  font-style: italic;
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1.5px solid var(--line-strong);
  color: var(--accent);
}
.menu-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-2);
  padding: 0.85rem 0;
  border-bottom: 1px dashed var(--line);
  align-items: baseline;
}
.menu-item:last-child { border-bottom: none; }
.menu-item-name {
  font-weight: 500;
  color: var(--ink-active);
  font-size: var(--t-base);
}
.menu-item-desc {
  font-size: var(--t-sm);
  color: var(--ink-active-soft);
  margin-top: 0.15rem;
}
.menu-item-price {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--ink-active);
  white-space: nowrap;
  font-weight: 500;
}
.menu-item-tag {
  display: inline-block;
  padding: 0.15em 0.5em;
  border-radius: 4px;
  font-size: 0.7rem;
  background: var(--rosa);
  color: var(--ink);
  margin-left: 0.5em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--font-body);
}
.menu-item-tag.kids { background: var(--green); }
.menu-item-tag.new { background: var(--orange); }

/* EVENTS — horizontal list */
.events-section {
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
body.night .events-section {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(91, 63, 94, 0.4), transparent 60%),
    var(--night-bg);
}
.event-list { display: flex; flex-direction: column; gap: 0; }
.event-row {
  display: grid;
  grid-template-columns: 120px 1fr auto auto;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
  align-items: center;
  transition: padding 0.3s var(--ease), background 0.3s;
  cursor: pointer;
}
.event-row:last-child { border-bottom: 1px solid var(--line); }
.event-row:hover {
  padding: var(--s-3) var(--s-2);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.event-date {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.15em;
  color: var(--ink-active-muted);
  text-transform: uppercase;
}
.event-date strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 500;
  color: var(--ink-active);
  font-style: italic;
  letter-spacing: -0.02em;
}
.event-title {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 500;
  margin: 0;
  color: var(--ink-active);
}
.event-sub {
  display: block;
  font-size: var(--t-sm);
  color: var(--ink-active-soft);
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  margin-top: 0.2rem;
}
.event-tag {
  padding: 0.35em 0.9em;
  border-radius: var(--r-full);
  background: var(--bg-alt);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  color: var(--ink-active-soft);
}
.event-row:hover .event-arrow { transform: translateX(6px); }
.event-arrow { transition: transform 0.3s var(--ease-out); }
@media (max-width: 720px) {
  .event-row { grid-template-columns: 80px 1fr; gap: var(--s-2); }
  .event-tag, .event-arrow { display: none; }
}

/* STORY — vom Crater zum Craterle */
.story-section {
  background: var(--bg-alt);
}
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  align-items: center;
}
@media (max-width: 900px) { .story-grid { grid-template-columns: 1fr; } }

.story-text h2 {
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 0 var(--s-3);
  color: var(--ink-active);
}
.story-text h2 em { font-style: italic; color: var(--accent); font-weight: 300; }
.story-text p {
  font-size: var(--t-base);
  color: var(--ink-active-soft);
  max-width: 52ch;
  margin: 0 0 var(--s-3);
  line-height: 1.65;
}

.story-timeline {
  position: relative;
  padding-left: 2rem;
  border-left: 1.5px solid var(--line-strong);
}
.story-timeline li {
  position: relative;
  padding: 0 0 var(--s-3) 0;
}
.story-timeline li::before {
  content: "";
  position: absolute;
  left: -2.55rem; top: 0.4rem;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--bg-alt);
  border: 2px solid var(--ink-active);
}
.story-timeline li.done::before { background: var(--ink-active); }
.story-timeline li.now::before {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 30%, transparent);
}
.story-timeline li .year {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--ink-active-muted);
  letter-spacing: 0.15em;
  margin-bottom: 0.3rem;
  display: block;
}
.story-timeline li .lbl {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  color: var(--ink-active);
  font-weight: 500;
  display: block;
  line-height: 1.2;
}
.story-timeline li p { font-size: var(--t-sm); color: var(--ink-active-soft); margin: 0.3rem 0 0; }

.story-photo {
  aspect-ratio: 4/5;
  border-radius: var(--r-lg);
  background:
    linear-gradient(160deg, rgba(232, 180, 184, 0.4), rgba(184, 212, 163, 0.3)),
    repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,0.03) 10px, rgba(0,0,0,0.03) 11px);
  background-color: var(--paper-deep);
  position: relative;
  overflow: hidden;
  box-shadow: var(--sh-lg);
}
body.night .story-photo {
  background:
    linear-gradient(160deg, rgba(91, 63, 94, 0.5), rgba(244, 184, 96, 0.2)),
    repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.02) 10px, rgba(255,255,255,0.02) 11px);
  background-color: var(--night-card);
}
.story-photo::after {
  content: "Foto folgt";
  position: absolute;
  bottom: 1.5rem; left: 1.5rem;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.15em;
  color: var(--ink-active-muted);
  opacity: 0.7;
  padding: 0.4em 0.8em;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  border-radius: var(--r-sm);
}

/* Stats strip */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-2);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: var(--s-5);
}
@media (max-width: 720px) { .stats-row { grid-template-columns: repeat(2, 1fr); } }
.stat-big {
  text-align: center;
}
.stat-big .num {
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  font-weight: 400;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  line-height: 1;
  color: var(--ink-active);
}
.stat-big .num em { font-style: italic; color: var(--accent); }
.stat-big .lbl {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-active-muted);
}

/* FAQ */
.faq-section {}
.faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  padding: var(--s-3) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 500;
  color: var(--ink-active);
  transition: color 0.2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }
.faq-toggle {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.4s var(--ease-out), background 0.3s, border-color 0.3s;
}
.faq-item[open] .faq-toggle {
  transform: rotate(45deg);
  background: var(--ink-active);
  color: var(--bg);
  border-color: var(--ink-active);
}
.faq-answer {
  padding: 0 0 var(--s-3);
  color: var(--ink-active-soft);
  max-width: 70ch;
  font-size: var(--t-base);
  line-height: 1.65;
}

/* Reservation */
.res-section {
  background: var(--bg-alt);
  transition: background 0.9s;
}
.res-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--s-6);
}
@media (max-width: 900px) { .res-grid { grid-template-columns: 1fr; } }
.res-info h2 {
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 0 0 var(--s-3);
  color: var(--ink-active);
}
.res-info h2 em { font-style: italic; color: var(--accent); font-weight: 300; }
.res-info p { color: var(--ink-active-soft); margin: 0 0 var(--s-3); max-width: 38ch; }

.hours {
  list-style: none; padding: 0;
  border-top: 1px solid var(--line);
  margin-top: var(--s-3);
}
.hours li {
  display: flex; justify-content: space-between;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
}
.hours li.closed { color: var(--ink-active-muted); }
.hours li.now {
  background: color-mix(in srgb, var(--green-deep) 15%, transparent);
  padding: 0.7rem 0.7rem;
  margin: 0 -0.7rem;
  font-weight: 500;
}
.hours .day { color: var(--ink-active-soft); }

.form {
  background: var(--bg);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  border: 1px solid var(--line);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin-bottom: var(--s-2); }
.form-row.full { grid-template-columns: 1fr; }
.form-field label {
  display: block;
  font-size: var(--t-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-active-muted);
  margin-bottom: 0.4rem;
}
.form-field input, .form-field select, .form-field textarea {
  width: 100%;
  padding: 0.9em 1em;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: var(--t-base);
  color: var(--ink-active);
  transition: border-color 0.2s, background 0.2s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg);
}
.form .form-submit {
  width: 100%;
  justify-content: center;
  margin-top: var(--s-2);
}

/* FOOTER */
.footer {
  padding: var(--s-6) 0 var(--s-3);
  background: var(--ink-active);
  color: var(--bg);
  transition: background 0.9s, color 0.9s;
}
body.night .footer { background: var(--night-deep); color: var(--night-ink); }
.footer .wrap { color: inherit; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-brand .display {
  font-size: var(--t-3xl);
  margin: 0 0 var(--s-2);
  line-height: 0.9;
}
.footer-brand p { opacity: 0.7; max-width: 32ch; font-size: var(--t-sm); }
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.5;
  margin: 0 0 1rem;
}
.footer-col ul li { margin-bottom: 0.5rem; }
.footer-col a {
  font-size: var(--t-sm);
  opacity: 0.85;
  transition: opacity 0.2s;
}
.footer-col a:hover { opacity: 1; }
.footer-bottom {
  padding-top: var(--s-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  opacity: 0.6;
}

/* Big outline type at bottom */
.big-outline {
  font-family: var(--font-display);
  font-size: clamp(6rem, 22vw, 22rem);
  font-weight: 400;
  line-height: 0.85;
  letter-spacing: -0.04em;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1.5px currentColor;
  opacity: 0.2;
  margin: 0;
  padding: var(--s-5) 0 0;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-style: italic;
}

/* Tweaks panel */
.tweaks {
  position: fixed;
  z-index: 200;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 200;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1rem;
  min-width: 240px;
  box-shadow: var(--sh-lg);
  display: none;
  font-size: var(--t-sm);
}
.tweaks.open { display: block; }
.tweaks h5 {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 0.8rem;
  color: var(--ink-active-muted);
}
.tweak-row { margin-bottom: 0.9rem; }
.tweak-row:last-child { margin-bottom: 0; }
.tweak-row label {
  display: block;
  font-size: var(--t-xs);
  color: var(--ink-active-soft);
  margin-bottom: 0.35rem;
}
.tweak-swatches { display: flex; gap: 0.4rem; }
.tweak-sw {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s;
}
.tweak-sw:hover { transform: scale(1.1); }
.tweak-sw.active { border-color: var(--ink-active); }
.tweak-pills { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.tweak-pill {
  padding: 0.35em 0.8em;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: transparent;
  font-size: var(--t-xs);
  color: var(--ink-active-soft);
  cursor: pointer;
  transition: all 0.2s;
}
.tweak-pill.active {
  background: var(--ink-active);
  color: var(--bg);
  border-color: var(--ink-active);
}

/* Responsive tweaks */
@media (max-width: 720px) {
  .section { padding: var(--s-6) 0; }
  .hero { padding-top: 7rem; }
}
/* =============================================================
   NEW SECTIONS — values, event feature, story credentials,
   eventlocation, courses, hours-note
   ============================================================= */

/* ---------- WERTE ---------- */
.values-section { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }

.values-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  counter-reset: val;
}
.value {
  position: relative;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--cream, #FBF5EA);
  border: 1px solid rgba(31, 28, 24, .08);
  border-radius: 18px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.value:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px -18px rgba(31, 28, 24, .22);
  border-color: rgba(31, 28, 24, .18);
}
.value .v-num {
  display: inline-block;
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-variation-settings: "WONK" 1, "SOFT" 100;
  font-size: clamp(2.25rem, 4vw, 3rem);
  line-height: 1;
  color: var(--accent, #D88F95);
  margin-bottom: .75rem;
  letter-spacing: -.02em;
}
.value h3 {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-variation-settings: "WONK" 1, "SOFT" 70;
  font-size: clamp(1.1rem, 1.4vw, 1.35rem);
  line-height: 1.25;
  margin: 0 0 .5rem;
  color: var(--ink, #1F1C18);
}
.value p {
  font-family: 'Instrument Sans', sans-serif;
  font-size: .95rem;
  line-height: 1.55;
  color: rgba(31, 28, 24, .72);
  margin: 0;
}
.value:nth-child(2) .v-num { color: #8FB570; }
.value:nth-child(3) .v-num { color: #E2A65B; }
.value:nth-child(4) .v-num { color: #8F6C91; }
.value:nth-child(5) .v-num { color: #C97D62; }


/* ---------- EVENT FEATURE (next upcoming) ---------- */
.event-feature {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  background: linear-gradient(135deg, #2B2420 0%, #3D2E28 100%);
  color: #FBF5EA;
  border-radius: 22px;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  margin-bottom: clamp(2rem, 3vw, 3rem);
  box-shadow: 0 20px 60px -24px rgba(31, 28, 24, .45);
  position: relative;
  overflow: hidden;
}
.event-feature::before {
  content: "";
  position: absolute;
  right: -80px; top: -80px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 184, 96, .25), transparent 70%);
  pointer-events: none;
}
.event-feature-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.25rem 1.5rem;
  background: rgba(251, 245, 234, .1);
  border: 1px solid rgba(251, 245, 234, .2);
  border-radius: 14px;
  min-width: 110px;
  backdrop-filter: blur(4px);
}
.event-feature-date .efd-day {
  font-family: 'Instrument Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .8rem;
  opacity: .75;
}
.event-feature-date .efd-num {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-variation-settings: "WONK" 1;
  font-size: clamp(2.75rem, 5vw, 3.75rem);
  line-height: 1;
  margin: .2rem 0;
}
.event-feature-date .efd-mon {
  font-family: 'Instrument Sans', sans-serif;
  text-transform: uppercase;
  font-size: .85rem;
  letter-spacing: .1em;
  opacity: .85;
}
.event-feature-body { position: relative; z-index: 1; }
.event-tag-on-dark {
  display: inline-block;
  padding: .3rem .75rem;
  border: 1px solid rgba(251, 245, 234, .35);
  border-radius: 99px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(251, 245, 234, .9);
  background: transparent;
  margin-bottom: .9rem;
}
.event-feature-title {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-variation-settings: "WONK" 1, "SOFT" 70;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  line-height: 1.15;
  margin: 0 0 .75rem;
  color: #FBF5EA;
}
.event-feature-title em {
  font-style: italic;
  color: #F4B860;
  font-variation-settings: "WONK" 1, "SOFT" 100;
}
.event-feature-sub {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(251, 245, 234, .78);
  margin: 0 0 1rem;
  max-width: 52ch;
}
.event-feature-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  font-family: 'Instrument Sans', sans-serif;
  font-size: .9rem;
  color: rgba(251, 245, 234, .85);
  margin-bottom: 1.25rem;
}
.event-feature-meta .sep-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(251, 245, 234, .4);
  display: inline-block;
}

.event-list-head {
  font-family: 'Instrument Sans', sans-serif;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: rgba(31, 28, 24, .55);
  margin: 0 0 1rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(31, 28, 24, .1);
}

@media (max-width: 640px) {
  .event-feature { grid-template-columns: 1fr; text-align: left; }
  .event-feature-date { flex-direction: row; gap: .75rem; min-width: 0; padding: .75rem 1rem; }
  .event-feature-date .efd-num { font-size: 2rem; margin: 0; }
}


/* ---------- STORY CREDENTIALS (replaces photo placeholder) ---------- */
.story-photo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.story-credentials {
  background: var(--accent-soft, #E8B4B8);
  border-radius: 20px;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 50px -20px rgba(31, 28, 24, .3);
  position: relative;
}
.story-credentials::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  border: 2px solid rgba(31, 28, 24, .1);
  pointer-events: none;
}
.cred-eyebrow {
  font-family: 'Instrument Sans', sans-serif;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: rgba(31, 28, 24, .7);
  display: block;
  margin-bottom: 1rem;
}
.story-credentials ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.story-credentials li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: baseline;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(31, 28, 24, .12);
}
.story-credentials li:last-child { border-bottom: none; padding-bottom: 0; }
.story-credentials li span {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-variation-settings: "WONK" 1;
  font-size: clamp(2rem, 3vw, 2.5rem);
  line-height: 1;
  color: var(--ink, #1F1C18);
  letter-spacing: -.02em;
}
.story-credentials li em {
  font-style: normal;
  font-family: 'Instrument Sans', sans-serif;
  font-size: .92rem;
  line-height: 1.4;
  color: rgba(31, 28, 24, .75);
}

.story-lede {
  font-family: 'Fraunces', serif;
  font-weight: 350;
  font-variation-settings: "WONK" 0, "SOFT" 50;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.5;
  color: var(--ink, #1F1C18);
  margin: 1rem 0 1.25rem;
}
.story-lede em {
  font-style: italic;
  color: var(--accent, #D88F95);
  font-variation-settings: "WONK" 1, "SOFT" 100;
}


/* ---------- EVENTLOCATION ---------- */
.eventloc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: 2rem;
}
.eventloc-card {
  background: #FBF5EA;
  border: 1px solid rgba(31, 28, 24, .08);
  border-radius: 18px;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform .3s ease, box-shadow .3s ease;
}
.eventloc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px -20px rgba(31, 28, 24, .25);
}
.eventloc-card .el-tag {
  align-self: flex-start;
  padding: .3rem .7rem;
  border-radius: 99px;
  background: var(--accent-soft, #E8B4B8);
  color: var(--ink, #1F1C18);
  font-family: 'Instrument Sans', sans-serif;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 1rem;
}
.eventloc-card h3 {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-variation-settings: "WONK" 1, "SOFT" 80;
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  line-height: 1.15;
  margin: 0 0 .5rem;
  color: var(--ink, #1F1C18);
}
.eventloc-card .el-price {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-variation-settings: "WONK" 1;
  font-size: clamp(2rem, 3vw, 2.5rem);
  line-height: 1;
  color: var(--accent, #D88F95);
  margin: .25rem 0 1.25rem;
  letter-spacing: -.02em;
}
.eventloc-card .el-price span {
  font-family: 'Instrument Sans', sans-serif;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: rgba(31, 28, 24, .55);
  vertical-align: middle;
  margin-right: .4rem;
}
.eventloc-card .el-price em {
  font-style: normal;
  font-family: 'Instrument Sans', sans-serif;
  font-size: .9rem;
  color: rgba(31, 28, 24, .6);
  font-weight: 400;
}
.eventloc-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
}
.eventloc-card li {
  font-family: 'Instrument Sans', sans-serif;
  font-size: .92rem;
  color: rgba(31, 28, 24, .8);
  padding-left: 1.25rem;
  position: relative;
  line-height: 1.4;
}
.eventloc-card li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--accent, #D88F95);
  font-weight: 600;
}
.eventloc-card .el-note {
  font-family: 'Instrument Sans', sans-serif;
  font-size: .78rem;
  color: rgba(31, 28, 24, .55);
  font-style: italic;
  margin: 0;
  padding-top: .75rem;
  border-top: 1px solid rgba(31, 28, 24, .08);
}
.eventloc-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem clamp(1.5rem, 2.5vw, 2rem);
  background: var(--accent-soft, #E8B4B8);
  border-radius: 16px;
}
.eventloc-cta p {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-variation-settings: "WONK" 1, "SOFT" 70;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  margin: 0;
  color: var(--ink, #1F1C18);
}


/* ---------- KURSE & FACHVORTRÄGE ---------- */
.courses-lede {
  font-family: 'Fraunces', serif;
  font-weight: 350;
  font-variation-settings: "WONK" 0, "SOFT" 50;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.45;
  max-width: 52ch;
  color: var(--ink, #1F1C18);
  margin: 0 0 2rem;
}
.courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.course-card {
  background: #FBF5EA;
  border: 1px solid rgba(31, 28, 24, .1);
  border-radius: 16px;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  transition: background .3s ease, transform .3s ease, border-color .3s ease;
  cursor: default;
}
.course-card:hover {
  background: #F5ECD9;
  transform: translateY(-3px);
  border-color: rgba(31, 28, 24, .22);
}
.course-card.cc-feature {
  background: var(--ink, #1F1C18);
  color: #FBF5EA;
  border-color: transparent;
}
.course-card.cc-feature:hover {
  background: #2B2420;
}
.course-card .cc-eyebrow {
  font-family: 'Instrument Sans', sans-serif;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--accent, #D88F95);
  margin-bottom: .75rem;
  display: block;
}
.course-card.cc-feature .cc-eyebrow { color: #F4B860; }
.course-card h3 {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-variation-settings: "WONK" 1, "SOFT" 70;
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  line-height: 1.2;
  margin: 0 0 .5rem;
  color: inherit;
}
.course-card p {
  font-family: 'Instrument Sans', sans-serif;
  font-size: .95rem;
  line-height: 1.5;
  margin: 0 0 1rem;
  color: rgba(31, 28, 24, .72);
}
.course-card.cc-feature p { color: rgba(251, 245, 234, .78); }
.course-card .cc-link {
  font-family: 'Instrument Sans', sans-serif;
  font-size: .85rem;
  color: var(--accent, #D88F95);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 500;
}


/* ---------- HOURS NOTE ---------- */
.hours-note {
  font-family: 'Instrument Sans', sans-serif;
  font-size: .85rem;
  font-style: italic;
  color: rgba(31, 28, 24, .6);
  margin: .75rem 0 1.5rem;
  padding-left: 1rem;
  border-left: 2px solid var(--accent-soft, #E8B4B8);
  line-height: 1.4;
}


/* ---------- RESPONSIVE ---------- */
@media (max-width: 640px) {
  .eventloc-cta { flex-direction: column; align-items: flex-start; }
}


/* =============================================================
   SCROLL-AWARE — values/eventloc/courses on evening/night
   ============================================================= */
body.scroll-evening .value,
body.scroll-night .value,
body.scroll-evening .eventloc-card,
body.scroll-night .eventloc-card,
body.scroll-evening .course-card:not(.cc-feature),
body.scroll-night .course-card:not(.cc-feature) {
  background: rgba(43, 36, 32, .85);
  border-color: rgba(251, 245, 234, .12);
  color: #FBF5EA;
  backdrop-filter: blur(6px);
}
body.scroll-evening .value h3,
body.scroll-night .value h3,
body.scroll-evening .eventloc-card h3,
body.scroll-night .eventloc-card h3,
body.scroll-evening .course-card:not(.cc-feature) h3,
body.scroll-night .course-card:not(.cc-feature) h3 {
  color: #FBF5EA;
}
body.scroll-evening .value p,
body.scroll-night .value p,
body.scroll-evening .course-card:not(.cc-feature) p,
body.scroll-night .course-card:not(.cc-feature) p,
body.scroll-evening .eventloc-card li,
body.scroll-night .eventloc-card li {
  color: rgba(251, 245, 234, .72);
}
body.scroll-evening .hours-note,
body.scroll-night .hours-note {
  color: rgba(251, 245, 234, .7);
  border-left-color: var(--accent, #D88F95);
}


/* =============================================================
   EASTER EGG — mini meteor button
   ============================================================= */
.easter-meteor {
  position: fixed;
  left: clamp(1rem, 2vw, 1.5rem);
  bottom: clamp(1rem, 2vw, 1.5rem);
  z-index: 80;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(31, 28, 24, .18);
  background: rgba(251, 245, 234, .9);
  backdrop-filter: blur(8px);
  border-radius: 50%;
  color: var(--ink, #1F1C18);
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(12px) scale(.85) rotate(-30deg);
  transition: opacity .5s ease, transform .5s ease, background .3s, border-color .3s;
  pointer-events: none;
}
.easter-meteor svg {
  width: 20px; height: 20px;
  transition: transform .4s ease;
}
body.scrolled .easter-meteor {
  opacity: .85;
  transform: translateY(0) scale(1) rotate(0deg);
  pointer-events: auto;
}
.easter-meteor:hover {
  opacity: 1;
  background: #1F1C18;
  color: #FBF5EA;
  border-color: #1F1C18;
}
.easter-meteor:hover svg { transform: rotate(-45deg) scale(1.1); }
body.scroll-evening .easter-meteor,
body.scroll-night .easter-meteor {
  background: rgba(43, 36, 32, .85);
  border-color: rgba(251, 245, 234, .2);
  color: #FBF5EA;
}


/* =============================================================
   PRINT — menu-optimized
   ============================================================= */
@media print {
  .intro, .scroll-sky, .scroll-sun, .scroll-moon, .scroll-stars,
  .scroll-cloud, .scroll-horizon, .scroll-particles,
  .nav, #tweaks, .hero-banner, .hero-celestial, .hero-stars,
  .hero-bloom, .footer-map, .intro-skip, .event-arrow,
  .easter-meteor,
  section#spielecke, section#events, section#eventlocation,
  section#kurse, section#story, section#reservierung, section#faq,
  footer { display: none !important; }

  body, body.has-sky { background: #fff !important; color: #1F1C18 !important; }
  .hero { min-height: auto !important; padding: 2cm 1cm !important; }
  .hero-title { font-size: 28pt !important; }
  section { break-inside: avoid; padding: .75cm 1cm !important; }
  .menu-section { break-before: page; }
  .menu-item { break-inside: avoid; }
  h1, h2, h3 { color: #1F1C18 !important; }
}
/* =========================================================
   GOLDEN HOUR — day/night transition block
   + Sky-visible section overrides
   ========================================================= */

/* ---------- Make ALL sections transparent, so sky shows through ---------- */
body.has-sky .section,
body.has-sky .marquee,
body.has-sky .story-section,
body.has-sky .faq-section,
body.has-sky .res-section,
body.has-sky .menu-section,
body.has-sky .events-section {
  background: transparent !important;
}

/* Content cards inside sections get their own surfaces so text stays legible */
body.has-sky .duo-card,
body.has-sky .feature-card,
body.has-sky .event-row,
body.has-sky .faq-item,
body.has-sky .form,
body.has-sky .story-photo,
body.has-sky .hours,
body.has-sky .stats-row .stat-big {
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
}

/* Day-section content cards — warm cream glass */
body.has-sky .day-section .feature-card,
body.has-sky .day-section .duo-card,
body.has-sky .day-section .menu-col,
body.has-sky .day-section .form {
  background: rgba(251, 245, 234, .72);
  border: 1px solid rgba(31, 28, 24, .08);
  border-radius: 20px;
}

/* Menu columns as glass cards */
body.has-sky .menu-col {
  padding: 1.8rem 1.5rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
}
body.has-sky .day-section .menu-col {
  background: rgba(251, 245, 234, .7);
  border: 1px solid rgba(31, 28, 24, .06);
}
body.has-sky .night-section .menu-col {
  background: rgba(15, 10, 30, .55);
  border: 1px solid rgba(245, 197, 126, .12);
}

/* Event rows get individual pill backgrounds */
body.has-sky .event-row {
  background: rgba(251, 245, 234, .6);
  border: 1px solid rgba(31, 28, 24, .08);
  border-radius: 16px;
  margin-bottom: .6rem;
}
body.has-sky .night-section .event-row {
  background: rgba(15, 10, 30, .5);
  border: 1px solid rgba(245, 197, 126, .12);
}

/* Story section cards */
body.has-sky .story-section .story-timeline,
body.has-sky .story-section .story-text {
  position: relative;
  z-index: 1;
}
body.has-sky .night-section .story-photo {
  background: rgba(15, 10, 30, .4);
  border: 1px solid rgba(245, 197, 126, .15);
}

/* Form as glass card */
body.has-sky .night-section .form {
  background: rgba(15, 10, 30, .55);
  border: 1px solid rgba(245, 197, 126, .18);
  border-radius: 20px;
}
body.has-sky .night-section .form input,
body.has-sky .night-section .form textarea {
  background: rgba(245, 232, 208, .06);
  border-color: rgba(245, 232, 208, .2);
  color: #F5E8D0;
}
body.has-sky .night-section .form label {
  color: rgba(245, 232, 208, .6);
}
body.has-sky .night-section .hours {
  border-top-color: rgba(245, 232, 208, .2);
}
body.has-sky .night-section .hours li {
  border-bottom-color: rgba(245, 232, 208, .12);
  color: rgba(245, 232, 208, .85);
}
body.has-sky .night-section .hours li.closed { color: rgba(245, 232, 208, .4); }
body.has-sky .night-section .hours .day { color: rgba(245, 232, 208, .5); }

/* FAQ items */
body.has-sky .faq-item {
  background: rgba(251, 245, 234, .45);
  border: 1px solid rgba(31, 28, 24, .08);
  border-radius: 14px;
  margin-bottom: .5rem;
  padding: 0 1.2rem;
}
body.has-sky .night-section .faq-item {
  background: rgba(15, 10, 30, .5);
  border: 1px solid rgba(245, 197, 126, .12);
}
body.has-sky .night-section .faq-item summary { color: #F5E8D0; }
body.has-sky .night-section .faq-item p { color: rgba(245, 232, 208, .75); }
body.has-sky .night-section .faq-toggle {
  color: #F5C97E;
  border-color: rgba(245, 197, 126, .35);
}

/* Stats row cards on sky */
body.has-sky .stats-row {
  gap: 1rem;
}
body.has-sky .stats-row .stat-big {
  background: rgba(15, 10, 30, .45);
  border: 1px solid rgba(245, 197, 126, .15);
  border-radius: 16px;
  padding: 2rem 1rem;
}

/* Marquee transparent, just text on sky */
body.has-sky .marquee {
  border-top: 1px solid rgba(31, 28, 24, .1);
  border-bottom: 1px solid rgba(31, 28, 24, .1);
  mix-blend-mode: multiply;
}

/* Footer: keep it dark/solid */
body.has-sky .footer {
  position: relative;
  z-index: 1;
}

/* =========================================================
   GOLDEN HOUR
   ========================================================= */
.golden-hour {
  position: relative;
  padding: 10rem 0;
  overflow: hidden;
  text-align: center;
  background: transparent !important;
}

/* Horizon line across the middle */
.golden-hour::before {
  content: "";
  position: absolute;
  top: 55%; left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(31, 28, 24, .3) 20%,
    rgba(31, 28, 24, .5) 50%,
    rgba(31, 28, 24, .3) 80%,
    transparent 100%);
}

.gh-wrap {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 2rem;
}

.gh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: .85rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(31, 28, 24, .6);
  margin-bottom: 2rem;
}
.gh-eyebrow .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #E2A65B;
  box-shadow: 0 0 20px rgba(226, 166, 91, .9);
  animation: goldpulse 2s ease-in-out infinite;
}
@keyframes goldpulse {
  0%,100% { opacity: .6; transform: scale(1); }
  50%     { opacity: 1; transform: scale(1.4); }
}

.gh-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 144;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 2rem;
  text-wrap: balance;
}
.gh-title em {
  font-style: italic;
  color: #C76F40;
  font-variation-settings: "SOFT" 80, "WONK" 1, "opsz" 144;
}
.gh-title .line-break { display: block; }

.gh-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  color: rgba(31, 28, 24, .7);
  max-width: 620px;
  margin: 0 auto 3rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.gh-hint-inline {
  display: inline-block;
  margin-left: .5rem;
  font-style: italic;
  color: #C76F40;
  font-size: .9em;
  opacity: .85;
}

.gh-below { margin-top: 2rem; }

/* =========================================================
   CAFÉ BANNER — Nördlinger Fachwerk with day/night hover
   ========================================================= */
.cafe-banner {
  position: relative;
  max-width: 1280px;
  margin: 3rem auto 1rem;
  padding: 0 2rem;
}
.cafe-banner-inner {
  position: relative;
  aspect-ratio: 1600 / 700;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 30px 80px -30px rgba(31, 28, 24, .45),
    0 8px 24px -8px rgba(31, 28, 24, .2),
    inset 0 0 0 1px rgba(31, 28, 24, .08);
  background: #F5BA78;
  cursor: crosshair;
}

/* ----- Illustration layer ----- */
.cb-illustration {
  position: absolute; inset: 0;
}
.cb-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  transition:
    filter 1.4s cubic-bezier(.4, .2, .3, 1),
    transform 12s ease-out;
  transform: scale(1);
  will-change: filter, transform;
}

/* Day mode: warm saturation */
.cafe-banner[data-mode="day"] .cb-svg {
  filter: brightness(1) saturate(1) hue-rotate(0deg);
}

/* Night mode: the SVG has both day-sky + night-sky baked in;
   we swap them with filter + opacity on specific inner classes via CSS,
   but since it's an <img>, we recolor the whole image instead:
   darken, blue-shift, and swap sun→moon via a cross-fade overlay. */
.cafe-banner[data-mode="night"] .cb-svg {
  filter:
    brightness(.55)
    saturate(.85)
    hue-rotate(-15deg)
    contrast(1.05);
  transform: scale(1.01);
}

/* Night overlay: navy wash + star pinpricks (added as a pseudo layer) */
.cafe-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 500px at 75% 18%, rgba(255, 244, 216, .18) 0%, transparent 50%),
    radial-gradient(800px 400px at 20% 25%, rgba(100, 80, 180, .25) 0%, transparent 60%),
    linear-gradient(180deg,
      rgba(14, 10, 35, .7) 0%,
      rgba(30, 20, 55, .5) 40%,
      rgba(50, 30, 70, .35) 70%,
      rgba(20, 12, 30, .5) 100%);
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(.4, .2, .3, 1);
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 2;
  border-radius: 18px;
}
.cafe-banner[data-mode="night"]::before { opacity: .85; }

/* Window-glow layer — brighten the window pixels at night */
.cafe-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Warm glow spots where the windows are in the SVG viewBox (1600x700) */
  background:
    /* Upper floor windows */
    radial-gradient(70px 60px at 33.7% 37%, rgba(255, 210, 120, .85), transparent 70%),
    radial-gradient(70px 60px at 46.2% 37%, rgba(255, 210, 120, .85), transparent 70%),
    radial-gradient(70px 60px at 58.6% 37%, rgba(255, 210, 120, .85), transparent 70%),
    radial-gradient(70px 60px at 71.0% 37%, rgba(255, 210, 120, .85), transparent 70%),
    /* Lower big windows */
    radial-gradient(110px 70px at 35.7% 54%, rgba(255, 220, 150, .9), transparent 72%),
    radial-gradient(110px 70px at 65.6% 54%, rgba(255, 220, 150, .9), transparent 72%),
    /* Door light */
    radial-gradient(70px 45px at 50.5% 60%, rgba(255, 200, 120, .7), transparent 75%),
    /* Dormer */
    radial-gradient(30px 25px at 50.0% 17%, rgba(255, 210, 120, .7), transparent 70%),
    /* Left tower gate warm glow */
    radial-gradient(40px 35px at 8.1% 50%, rgba(255, 190, 110, .6), transparent 70%),
    /* Neighbor windows */
    radial-gradient(30px 28px at 17.9% 42%, rgba(255, 210, 120, .55), transparent 70%),
    radial-gradient(30px 28px at 21.4% 42%, rgba(255, 210, 120, .55), transparent 70%),
    radial-gradient(30px 28px at 25.2% 42%, rgba(255, 210, 120, .55), transparent 70%),
    radial-gradient(30px 28px at 74.0% 36%, rgba(255, 210, 120, .6), transparent 70%),
    radial-gradient(30px 28px at 77.8% 36%, rgba(255, 210, 120, .6), transparent 70%),
    radial-gradient(30px 28px at 81.5% 36%, rgba(255, 210, 120, .6), transparent 70%),
    radial-gradient(30px 28px at 85.3% 36%, rgba(255, 210, 120, .6), transparent 70%),
    radial-gradient(30px 28px at 74.0% 50%, rgba(255, 210, 120, .55), transparent 70%),
    radial-gradient(30px 28px at 77.8% 50%, rgba(255, 210, 120, .55), transparent 70%),
    radial-gradient(30px 28px at 81.5% 50%, rgba(255, 210, 120, .55), transparent 70%);
  opacity: 0;
  transition: opacity 1.6s cubic-bezier(.4, .2, .3, 1);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 3;
  border-radius: 18px;
  filter: blur(.5px);
}
.cafe-banner[data-mode="night"]::after {
  opacity: 1;
  animation: cb-flicker 5s ease-in-out infinite;
}
@keyframes cb-flicker {
  0%, 100% { filter: blur(.5px) brightness(1); }
  47%      { filter: blur(.5px) brightness(1); }
  48%      { filter: blur(.5px) brightness(.75); }
  49%      { filter: blur(.5px) brightness(1); }
  73%      { filter: blur(.5px) brightness(1.05); }
  74%      { filter: blur(.5px) brightness(.8); }
  75%      { filter: blur(.5px) brightness(1); }
}

/* ----- Meteor flying across the sky (night only) ----- */
.cb-meteor {
  position: absolute;
  top: -4%;
  left: -12%;
  width: 16%;
  height: 8%;
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  transform: rotate(22deg);
}
.cafe-banner[data-mode="night"] .cb-meteor {
  animation: cb-meteor-fly 14s ease-in 3s infinite;
}
.cb-meteor-head {
  position: absolute;
  right: 0; top: 50%;
  width: 14px; height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFF6D8 0%, #FFD488 40%, #FF8A3C 80%, transparent 100%);
  box-shadow:
    0 0 20px rgba(255, 200, 120, .9),
    0 0 40px rgba(255, 140, 60, .7);
}
.cb-meteor-tail {
  position: absolute;
  right: 6px; top: 50%;
  height: 2px;
  width: 100%;
  margin-top: -1px;
  background: linear-gradient(to left,
    rgba(255, 240, 200, .9) 0%,
    rgba(255, 180, 100, .6) 30%,
    rgba(255, 120, 60, .3) 60%,
    transparent 100%);
  border-radius: 2px;
  filter: blur(1px);
}
@keyframes cb-meteor-fly {
  0%   { transform: translate(0, 0) rotate(22deg); opacity: 0; }
  3%   { opacity: 1; }
  35%  { transform: translate(620%, 280%) rotate(22deg); opacity: 1; }
  42%  { transform: translate(720%, 340%) rotate(22deg); opacity: 0; }
  100% { transform: translate(720%, 340%) rotate(22deg); opacity: 0; }
}

/* ----- Fireflies (night only) ----- */
.cb-fireflies {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.cafe-banner[data-mode="night"] .cb-fireflies { opacity: 1; }
.cb-fireflies span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #FFE9A8;
  box-shadow: 0 0 8px #FFD488, 0 0 18px rgba(255, 200, 120, .7);
  animation: cb-firefly 4s ease-in-out var(--d, 0s) infinite;
}
@keyframes cb-firefly {
  0%, 100% { opacity: 0; transform: translate(0, 0) scale(.6); }
  15%      { opacity: 1; transform: translate(4px, -3px) scale(1); }
  50%      { opacity: .3; transform: translate(-3px, -10px) scale(.9); }
  75%      { opacity: 1; transform: translate(6px, -16px) scale(1.1); }
}

/* ----- Day/Night toggle buttons ----- */
.cb-toggle {
  position: absolute;
  top: 1.2rem; right: 1.2rem;
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(255, 245, 232, .85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(31, 28, 24, .08);
  border-radius: 999px;
  z-index: 6;
  box-shadow: 0 8px 24px -8px rgba(31, 28, 24, .3);
}
.cb-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: .5rem .95rem;
  border: none;
  background: transparent;
  font-family: var(--font-display);
  font-style: italic;
  font-size: .9rem;
  color: rgba(31, 28, 24, .6);
  border-radius: 999px;
  cursor: pointer;
  transition: background .3s, color .3s;
}
.cb-toggle-btn:hover { color: #1F1C18; }
.cb-toggle-btn.is-active {
  background: #1F1C18;
  color: #FBF5EA;
}
.cafe-banner[data-mode="night"] .cb-toggle {
  background: rgba(15, 10, 30, .75);
  border-color: rgba(245, 197, 126, .2);
  color: #F5E8D0;
}
.cafe-banner[data-mode="night"] .cb-toggle-btn {
  color: rgba(245, 232, 208, .6);
}
.cafe-banner[data-mode="night"] .cb-toggle-btn:hover { color: #F5E8D0; }
.cafe-banner[data-mode="night"] .cb-toggle-btn.is-active {
  background: #F5C97E;
  color: #1F1C18;
}

/* ----- Address card overlay ----- */
.cb-address {
  position: absolute;
  bottom: 1.5rem; left: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: 1rem 1.3rem;
  background: rgba(255, 245, 232, .9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(31, 28, 24, .1);
  border-radius: 14px;
  z-index: 6;
  box-shadow: 0 12px 32px -8px rgba(31, 28, 24, .35);
  transition: background .6s, border-color .6s, color .6s;
}
.cb-addr-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(31, 28, 24, .5);
}
.cb-addr-street {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  color: #1F1C18;
}
.cb-addr-city {
  font-family: var(--font-sans);
  font-size: .85rem;
  color: rgba(31, 28, 24, .65);
}
.cafe-banner[data-mode="night"] .cb-address {
  background: rgba(15, 10, 30, .75);
  border-color: rgba(245, 197, 126, .2);
}
.cafe-banner[data-mode="night"] .cb-addr-eyebrow { color: rgba(245, 197, 126, .75); }
.cafe-banner[data-mode="night"] .cb-addr-street { color: #F5E8D0; }
.cafe-banner[data-mode="night"] .cb-addr-city { color: rgba(245, 232, 208, .65); }

/* ----- Parallax / mouse-follow tilt ----- */
.cafe-banner-inner {
  transform-style: preserve-3d;
  perspective: 1200px;
}
.cb-illustration {
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
  transform:
    translate3d(var(--cb-px, 0), var(--cb-py, 0), 0)
    rotateX(var(--cb-ry, 0deg))
    rotateY(var(--cb-rx, 0deg));
}

/* Mobile: simplify */
@media (max-width: 720px) {
  .cb-toggle { top: .8rem; right: .8rem; padding: 3px; }
  .cb-toggle-btn { padding: .4rem .7rem; font-size: .8rem; }
  .cb-toggle-btn svg { width: 13px; height: 13px; }
  .cb-address { bottom: .8rem; left: .8rem; padding: .7rem .9rem; }
  .cb-addr-street { font-size: .95rem; }
  .cb-addr-city { font-size: .78rem; }
  .cafe-banner { padding: 0 1rem; }
}

/* Reduced motion: keep day/night toggle, kill meteor + firefly animations */
@media (prefers-reduced-motion: reduce) {
  .cb-meteor, .cb-fireflies span, .cafe-banner[data-mode="night"]::after {
    animation: none !important;
  }
  .cb-illustration { transition: none; }
}

.gh-silhouette { display: none; }

.gh-clock {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-top: 2rem;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: .8rem;
  letter-spacing: .2em;
  color: rgba(31, 28, 24, .55);
  text-transform: uppercase;
}
.gh-clock span em {
  font-style: normal;
  color: #C76F40;
  font-weight: 600;
}

/* =========================================================
   Night-theme text colors for night sections
   ========================================================= */
.night-section {
  color: #F5E8D0;
}
.night-section .sec-head-title,
.night-section h3,
.night-section h4 { color: #F5E8D0; }
.night-section .sec-head-title em { color: #F5C97E; font-style: italic; }
.night-section .eyebrow { color: rgba(245, 232, 208, .6); }
.night-section .sec-head-num { color: rgba(245, 232, 208, .4); }
.night-section p { color: rgba(245, 232, 208, .8); }

.night-section .menu-item {
  border-bottom-color: rgba(245, 232, 208, .15);
}
.night-section .menu-item-name { color: #F5E8D0; }
.night-section .menu-item-desc { color: rgba(245, 232, 208, .55); }
.night-section .menu-item-price { color: #F5C97E; }
.night-section .menu-col h3 { color: #F5C97E; }

.night-section .event-date { color: #F5C97E; }
.night-section .event-title { color: #F5E8D0; }
.night-section .event-sub { color: rgba(245, 232, 208, .5); }
.night-section .event-tag {
  background: rgba(245, 197, 126, .15);
  color: #F5C97E;
  border: 1px solid rgba(245, 197, 126, .3);
}
.night-section .story-text h2 { color: #F5E8D0; }
.night-section .story-text h2 em { color: #F5C97E; }
.night-section .story-timeline { border-left-color: rgba(245, 197, 126, .3); }
.night-section .story-timeline li::before { border-color: #F5C97E; background: transparent; }
.night-section .story-timeline li.done::before { background: #F5C97E; }
.night-section .story-timeline li .lbl { color: #F5E8D0; }
.night-section .story-timeline li .year { color: rgba(245, 197, 126, .8); }
.night-section .story-timeline li p { color: rgba(245, 232, 208, .7); }
.night-section .stat-big .num { color: #F5C97E; }
.night-section .stat-big .lbl { color: rgba(245, 232, 208, .7); }

.night-section .btn.btn-primary {
  background: #F5C97E;
  color: #1F1C18;
}
.night-section .btn.btn-ghost {
  color: #F5E8D0;
  border-color: rgba(245, 232, 208, .3);
}

body.has-sky .footer {
  background: #0a0616 !important;
  color: #F5E8D0;
}
/* =========================================================
   DARK-MODE FIXES
   Scroll-driven readability: when body has .scroll-evening or
   .scroll-night, nav + footer + duo-night + events must stay
   legible against the darkening sky.
   ========================================================= */

/* ---------------- NAV ---------------- */
/* When scrolled into dusk/night, flip the whole nav panel dark */
body.has-sky.scroll-evening .nav.scrolled,
body.has-sky.scroll-night   .nav.scrolled {
  background: rgba(18, 13, 30, 0.82);
  border-color: rgba(244, 184, 96, 0.18);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
}
body.has-sky.scroll-evening .nav:not(.scrolled),
body.has-sky.scroll-night   .nav:not(.scrolled) {
  background: linear-gradient(180deg, rgba(18,13,30,.4), transparent);
}

/* Brand lockup (logo ring + "Craterle" wordmark) */
body.has-sky.scroll-evening .nav-brand,
body.has-sky.scroll-night   .nav-brand { color: #FFEDCB; }
body.has-sky.scroll-evening .nav-brand-ring path,
body.has-sky.scroll-night   .nav-brand-ring path { stroke: #F4B860; }

/* Link list */
body.has-sky.scroll-evening .nav-links a,
body.has-sky.scroll-night   .nav-links a {
  color: rgba(255, 237, 203, 0.78);
}
body.has-sky.scroll-evening .nav-links a:hover,
body.has-sky.scroll-night   .nav-links a:hover { color: #FFF; }
body.has-sky.scroll-evening .nav-links a::after,
body.has-sky.scroll-night   .nav-links a::after { background: #F4B860; }

/* DE / EN switcher */
body.has-sky.scroll-evening .lang button,
body.has-sky.scroll-night   .lang button {
  color: rgba(255, 237, 203, 0.55);
}
body.has-sky.scroll-evening .lang button.active,
body.has-sky.scroll-night   .lang button.active {
  color: #F4B860;
}
body.has-sky.scroll-evening .lang-sep,
body.has-sky.scroll-night   .lang-sep { color: rgba(255,237,203,.3); }

/* Primary CTA "Reservieren" — needs strong contrast on dark bg */
body.has-sky.scroll-evening .nav-right .btn-primary,
body.has-sky.scroll-night   .nav-right .btn-primary,
body.has-sky.scroll-evening .nav-cta,
body.has-sky.scroll-night   .nav-cta {
  background: #F4B860;
  color: #1F1C18;
  border-color: #F4B860;
}
body.has-sky.scroll-evening .nav-right .btn-primary:hover,
body.has-sky.scroll-night   .nav-right .btn-primary:hover,
body.has-sky.scroll-evening .nav-cta:hover,
body.has-sky.scroll-night   .nav-cta:hover {
  background: #FFD488;
  border-color: #FFD488;
}

/* ---------------- DUO-NIGHT CARD (#konzept) ---------------- */
/* The night card's bg is dark purple; ensure all text inside is cream/gold */
.duo-night,
.duo-night * { color: #F5E8D0; }
.duo-night .duo-title { color: #FFEDCB; }
.duo-night .duo-title em { color: #F4B860; }
.duo-night .duo-time { color: #F4B860; opacity: 1; }
.duo-night .duo-desc { color: rgba(245, 232, 208, 0.85); }
.duo-night .duo-list { color: #F5E8D0; }
.duo-night .duo-list li { color: #F5E8D0; }
.duo-night .duo-list li::before {
  border-color: #F4B860;
  opacity: 0.9;
}

/* The golden-hour glass-card override may force semi-transparent bg;
   boost the duo-night bg so text stays readable regardless of sky phase */
body.has-sky .duo-night {
  background:
    radial-gradient(circle at 20% 80%, rgba(244, 184, 96, 0.15), transparent 50%),
    linear-gradient(160deg, rgba(42, 31, 62, 0.92) 0%, rgba(20, 17, 30, 0.92) 100%) !important;
  border: 1px solid rgba(244, 184, 96, 0.18);
}

/* ---------------- EVENTS ---------------- */
/* Each event row needs breathing room + readable text without hovering */
.event-row {
  padding: 1.4rem 1.4rem !important;  /* bigger baseline padding */
  gap: 1.5rem !important;
  margin-bottom: 0.8rem;
  border-top: 1px solid transparent !important;
  border: 1px solid rgba(31, 28, 24, 0.08);
  border-radius: 16px;
}
.event-row:hover {
  padding: 1.4rem 1.6rem !important;  /* no jarring padding jump */
  transform: translateX(4px);
}

/* Event date badge — full opacity, always legible */
.event-date {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0.6rem 0.4rem;
  background: rgba(31, 28, 24, 0.06);
  border-radius: 12px;
  min-width: 72px;
  color: rgba(31, 28, 24, 0.7) !important;
}
.event-date strong {
  color: var(--ink-active) !important;
  font-size: 1.7rem !important;
  line-height: 1;
  margin: 2px 0;
}

/* Dark-sky (evening + night) treatment for event rows */
body.has-sky.scroll-evening .event-row,
body.has-sky.scroll-night   .event-row {
  background: rgba(20, 14, 32, 0.62) !important;
  border: 1px solid rgba(244, 184, 96, 0.16) !important;
}
body.has-sky.scroll-evening .event-date,
body.has-sky.scroll-night   .event-date {
  background: rgba(244, 184, 96, 0.12);
  color: #F4B860 !important;
}
body.has-sky.scroll-evening .event-date strong,
body.has-sky.scroll-night   .event-date strong { color: #FFEDCB !important; }
body.has-sky.scroll-evening .event-title,
body.has-sky.scroll-night   .event-title { color: #FFEDCB !important; }
body.has-sky.scroll-evening .event-sub,
body.has-sky.scroll-night   .event-sub { color: rgba(245, 232, 208, 0.72) !important; }
body.has-sky.scroll-evening .event-tag,
body.has-sky.scroll-night   .event-tag {
  background: rgba(244, 184, 96, 0.15);
  color: #F4B860;
  border: 1px solid rgba(244, 184, 96, 0.25);
}
body.has-sky.scroll-evening .event-arrow,
body.has-sky.scroll-night   .event-arrow { color: #F4B860; }

/* ---------------- FOOTER ---------------- */
/* Footer is already dark. In dusk/night mode, tune warmer accent */
body.has-sky.scroll-evening .footer,
body.has-sky.scroll-night   .footer {
  background: #0a0614 !important;
  color: #F5E8D0 !important;
}
.footer .big-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(245, 232, 208, 0.2);
}
body.has-sky.scroll-night .footer .big-outline {
  -webkit-text-stroke-color: rgba(244, 184, 96, 0.28);
}
.footer-brand .display { color: #FFEDCB; }
.footer-brand p { color: rgba(245, 232, 208, 0.72); }
.footer-col h4 { color: #F4B860; opacity: 1; }
.footer-col a { color: rgba(245, 232, 208, 0.82) !important; }
.footer-col a:hover { color: #F4B860 !important; opacity: 1; }
.footer-col ul li { color: rgba(245, 232, 208, 0.78); }
.footer-bottom { color: rgba(245, 232, 208, 0.5); }

/* ---------------- GOOGLE MAPS BLOCK IN FOOTER ---------------- */
.footer-map {
  margin: clamp(2rem, 5vw, 3.5rem) 0 clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(244, 184, 96, 0.2);
  background: rgba(20, 14, 32, 0.6);
  min-height: 280px;
}
@media (max-width: 720px) {
  .footer-map { grid-template-columns: 1fr; }
}
.footer-map-embed {
  position: relative;
  min-height: 280px;
  background: #1a1228;
  overflow: hidden;
}
.footer-map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: invert(.92) hue-rotate(185deg) saturate(.6) brightness(.95);
}
.footer-map-info {
  padding: 2rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .9rem;
}
.fm-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.82rem;
  color: #F4B860;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fm-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.05;
  color: #FFEDCB;
  font-style: italic;
  font-weight: 400;
  margin: 0;
}
.fm-addr {
  color: rgba(245, 232, 208, 0.75);
  font-size: 0.95rem;
  line-height: 1.5;
}
.fm-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}
.fm-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: transform .2s, background .2s, color .2s;
}
.fm-btn-primary {
  background: #F4B860;
  color: #1F1C18;
}
.fm-btn-primary:hover { background: #FFD488; transform: translateY(-1px); }
.fm-btn-ghost {
  background: transparent;
  color: #F4B860;
  border: 1px solid rgba(244, 184, 96, 0.4);
}
.fm-btn-ghost:hover {
  background: rgba(244, 184, 96, 0.1);
  transform: translateY(-1px);
}
.fm-btn svg { width: 14px; height: 14px; }

/* ---------------- scroll-evening: darken section pre-header too ---------------- */
body.has-sky.scroll-evening section .section-heading,
body.has-sky.scroll-night   section .section-heading {
  color: #FFEDCB;
}
body.has-sky.scroll-evening section .eyebrow,
body.has-sky.scroll-night   section .eyebrow {
  color: #F4B860;
}

/* ---------------- EVENTLOC CTA BUTTON — always dark pill ---------------- */
/* The soft-rosa CTA bar was rendering a white-on-white button.
   Force an ink-dark pill that works on both day + night. */
.eventloc-cta .btn.btn-primary,
#eventlocation .btn.btn-primary {
  background: #1F1C18;
  color: #FBF6EE;
  border: 1px solid #1F1C18;
}
.eventloc-cta .btn.btn-primary:hover,
#eventlocation .btn.btn-primary:hover {
  background: #2F2A24;
  border-color: #2F2A24;
  color: #FFEDCB;
}

/* ---------------- COURSES section text — lighten on dark sky ---------------- */
/* The Kurse section still reads dark ink even when sky is dusk/night.
   Keep normal ink by day, shift up when the sky goes dark. */
body.has-sky.scroll-evening #kurse .courses-lede,
body.has-sky.scroll-night   #kurse .courses-lede {
  color: rgba(255, 237, 203, 0.92);
}
body.has-sky.scroll-evening #kurse .course-card,
body.has-sky.scroll-night   #kurse .course-card {
  color: #FBF6EE;
}
body.has-sky.scroll-evening #kurse .course-card h4,
body.has-sky.scroll-night   #kurse .course-card h4,
body.has-sky.scroll-evening #kurse .courses-offer h3,
body.has-sky.scroll-night   #kurse .courses-offer h3 {
  color: #FFF0D3;
}
body.has-sky.scroll-evening #kurse .course-card p,
body.has-sky.scroll-night   #kurse .course-card p,
body.has-sky.scroll-evening #kurse .courses-offer p,
body.has-sky.scroll-night   #kurse .courses-offer p,
body.has-sky.scroll-evening #kurse .courses-offer li,
body.has-sky.scroll-night   #kurse .courses-offer li {
  color: rgba(255, 237, 203, 0.78);
}
body.has-sky.scroll-evening #kurse .course-meta,
body.has-sky.scroll-night   #kurse .course-meta {
  color: rgba(244, 184, 96, 0.85);
}
body.has-sky.scroll-evening #kurse .sec-head-num,
body.has-sky.scroll-night   #kurse .sec-head-num,
body.has-sky.scroll-evening #eventlocation .sec-head-num,
body.has-sky.scroll-night   #eventlocation .sec-head-num {
  color: #F4B860;
  border-color: rgba(244, 184, 96, 0.35);
}

/* Same courtesy for eventlocation (same day-section surface) */
body.has-sky.scroll-evening #eventlocation .el-card,
body.has-sky.scroll-night   #eventlocation .el-card,
body.has-sky.scroll-evening #eventlocation .sec-head-title,
body.has-sky.scroll-night   #eventlocation .sec-head-title {
  color: #FBF6EE;
}
body.has-sky.scroll-evening #eventlocation .el-card p,
body.has-sky.scroll-night   #eventlocation .el-card p,
body.has-sky.scroll-evening #eventlocation .el-card li,
body.has-sky.scroll-night   #eventlocation .el-card li {
  color: rgba(255, 237, 203, 0.78);
}
/* =============================================================
   LEGAL MODALS — Impressum + Datenschutz
   ============================================================= */

/* Footer legal links */
.footer-legal {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.legal-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  opacity: 0.75;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  letter-spacing: 0.01em;
  transition: opacity 160ms ease;
}
.legal-link:hover,
.legal-link:focus-visible {
  opacity: 1;
  outline: none;
}
.sep-dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
}

/* Modal shell */
.legal-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  align-items: stretch;
  justify-content: flex-end;
  pointer-events: none;
}
.legal-modal.open {
  display: flex;
  pointer-events: auto;
}
.legal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 8, 20, 0);
  backdrop-filter: blur(0px);
  transition: background 320ms ease, backdrop-filter 320ms ease;
}
.legal-modal.open .legal-backdrop {
  background: rgba(12, 8, 20, 0.45);
  backdrop-filter: blur(6px);
}

/* Panel — slides in from the right like a drawer */
.legal-panel {
  position: relative;
  width: min(640px, 100%);
  max-width: 100%;
  height: 100vh;
  height: 100dvh;
  background: #FBF6EE;
  color: #1F1C18;
  overflow-y: auto;
  overflow-x: hidden;
  padding: clamp(3rem, 5vw, 4.5rem) clamp(2rem, 5vw, 4rem) 4rem;
  box-shadow:
    -24px 0 60px -20px rgba(0, 0, 0, 0.3),
    -4px 0 20px -8px rgba(0, 0, 0, 0.2);
  transform: translateX(110%);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  font-family: 'Instrument Sans', system-ui, sans-serif;
  line-height: 1.6;
}
.legal-modal.open .legal-panel {
  transform: translateX(0);
}

/* Warm left edge — little brand accent */
.legal-panel::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, #D88F95 0%, #E2A65B 50%, #8F6C91 100%);
  opacity: 0.9;
}

/* Close button */
.legal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(31, 28, 24, 0.15);
  background: #FFF;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: #1F1C18;
  display: grid;
  place-items: center;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
  z-index: 2;
}
.legal-close:hover {
  transform: rotate(90deg);
  border-color: rgba(31, 28, 24, 0.4);
  background: #FFF;
}

/* Typography inside doc */
.legal-eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8F6C91;
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(143, 108, 145, 0.3);
  border-radius: 999px;
  margin-bottom: 1.25rem;
}
.legal-title {
  font-family: 'Fraunces', 'Playfair Display', serif;
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 144;
  font-weight: 400;
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 2rem;
  color: #1F1C18;
}
.legal-lede {
  font-size: 1.05rem;
  color: rgba(31, 28, 24, 0.78);
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid rgba(31, 28, 24, 0.08);
}
.legal-doc h3 {
  font-family: 'Fraunces', serif;
  font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 24;
  font-weight: 500;
  font-size: 1.15rem;
  margin: 2rem 0 0.6rem;
  color: #1F1C18;
  letter-spacing: -0.005em;
}
.legal-doc h3:first-of-type {
  margin-top: 0.5rem;
}
.legal-doc p {
  margin: 0 0 1rem;
  color: rgba(31, 28, 24, 0.82);
  font-size: 0.96rem;
}
.legal-doc p strong {
  color: #1F1C18;
  font-weight: 600;
}
.legal-doc p em {
  font-style: italic;
  color: #8F6C91;
}
.legal-doc ul {
  margin: 0.5rem 0 1rem;
  padding-left: 1.2rem;
  color: rgba(31, 28, 24, 0.82);
  font-size: 0.96rem;
}
.legal-doc ul li {
  margin-bottom: 0.35rem;
}
.legal-doc a {
  color: #8F6C91;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.legal-doc a:hover {
  color: #5B3F5E;
}
.legal-footnote {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(31, 28, 24, 0.08);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: rgba(31, 28, 24, 0.5);
  text-transform: uppercase;
}

/* Mobile */
@media (max-width: 640px) {
  .legal-modal {
    justify-content: stretch;
  }
  .legal-panel {
    width: 100%;
    padding: 3.5rem 1.5rem 3rem;
  }
  .legal-title {
    font-size: 2rem;
  }
}

/* Prevent body scroll when modal open */
body.legal-open {
  overflow: hidden;
}
/* ============================================ */
/* RESERVATION SECTION (DISH + Event form)       */
/* ============================================ */

/* DISH two-click block */
.reservation-dish {
  max-width: 760px;
  margin: 0 auto var(--space-2xl, 3rem);
  padding: var(--space-xl, 2rem);
  background: var(--color-cream, #f9f2e6);
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 4px 16px rgba(45, 45, 45, 0.06);
  text-align: center;
}

.dish-intro .dish-notice {
  margin: 0 0 var(--space-md, 1rem);
  font-size: 0.95rem;
  color: var(--color-text-muted, #6a6a6a);
  line-height: 1.5;
}

.dish-intro .btn[data-dish-open] {
  min-width: 240px;
}

.dish-intro .btn.btn-disabled,
.dish-intro .btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.dish-vacation {
  margin-top: var(--space-md, 1rem);
  color: var(--color-accent-warm, #b8743a);
  font-weight: 500;
  font-size: 0.95rem;
}

.dish-container:empty {
  display: none;
}

.dish-container.dish-loaded {
  margin-top: var(--space-lg, 1.5rem);
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  background: #fff;
}

/* Divider between DISH and event form */
.reservation-divider {
  position: relative;
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--space-xl, 2rem);
  color: var(--color-text-muted, #6a6a6a);
  font-style: italic;
  font-size: 0.9rem;
}

.reservation-divider::before,
.reservation-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: rgba(45, 45, 45, 0.15);
}

.reservation-divider::before { left: 0; }
.reservation-divider::after  { right: 0; }

.reservation-divider span {
  display: inline-block;
  padding: 0 var(--space-md, 1rem);
  background: var(--color-bg, #fff);
  position: relative;
  z-index: 1;
}

/* Event request form container */
.event-request-wrap {
  max-width: 760px;
  margin: 0 auto;
}

.event-request-title {
  text-align: center;
  font-family: var(--font-heading, 'Playfair Display', serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 0 0 var(--space-sm, 0.5rem);
}

.event-request-intro {
  text-align: center;
  color: var(--color-text-muted, #6a6a6a);
  margin: 0 0 var(--space-xl, 2rem);
}

/* Field-error inline messages */
.event-form .field-error {
  display: block;
  margin-top: 4px;
  color: #c0392b;
  font-size: 0.85rem;
  line-height: 1.3;
}

.event-form select {
  font-family: inherit;
  font-size: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(45, 45, 45, 0.2);
  border-radius: var(--radius-sm, 8px);
  background: #fff;
  color: inherit;
  width: 100%;
}

.event-form select:focus {
  outline: 2px solid var(--color-accent-warm, #f0c78a);
  outline-offset: 2px;
  border-color: var(--color-accent-warm, #f0c78a);
}

.event-form select.error {
  border-color: #c0392b;
}

.form-error {
  margin-top: var(--space-md, 1rem);
  padding: var(--space-sm, 0.75rem) var(--space-md, 1rem);
  background: #fbe9e7;
  color: #c0392b;
  border-left: 3px solid #c0392b;
  border-radius: var(--radius-sm, 8px);
  font-size: 0.95rem;
}

/* Footer vacation banner */
.footer-vacation {
  margin-top: var(--space-sm, 0.75rem);
  padding: 0.5rem 0.75rem;
  background: rgba(240, 199, 138, 0.15);
  color: var(--color-accent-warm, #b8743a);
  border-left: 3px solid var(--color-accent-warm, #f0c78a);
  border-radius: var(--radius-sm, 8px);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Mobile */
@media (max-width: 640px) {
  .reservation-dish {
    padding: var(--space-md, 1rem);
  }
  .reservation-divider::before,
  .reservation-divider::after { width: 30%; }
}
/* ============================================ */
/* VACATION POPUP                                */
/* ============================================ */

#vacation-modal .modal-box {
  text-align: center;
  max-width: 480px;
  padding: var(--space-xl, 2.5rem) var(--space-xl, 2.5rem) var(--space-lg, 2rem);
}

.vacation-modal-icon {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: var(--space-md, 1rem);
}

#vacation-modal h2 {
  font-family: var(--font-heading, 'Playfair Display', serif);
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  margin: 0 0 var(--space-md, 1rem);
  color: var(--color-text, #2d2d2d);
}

#vacation-modal .modal-content {
  margin-bottom: var(--space-lg, 1.5rem);
}

#vacation-modal .modal-content p {
  margin: 0 0 var(--space-sm, 0.5rem);
  line-height: 1.6;
}

.vacation-modal-period {
  color: var(--color-text-muted, #6a6a6a);
  font-size: 0.95rem;
  font-style: italic;
}

#vacation-modal .btn {
  min-width: 160px;
}
/* ============================================================
   PERFORMANCE + EPILEPSIE HARDENING
   ------------------------------------------------------------
   Override-Layer fuer infinite-Animationen. Wird als LETZTES
   CSS geladen (im index.html head), ueberschreibt alle vorherigen
   Animation-Rules nach WCAG 2.3.1/2.3.3 + Mobile-Performance.
   ============================================================ */

/* ------------------------------------------------------------
   1. prefers-reduced-motion: HARD OFF auf alle infinite animations
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Stop any looping effects completely */
  .intro-star,
  .cloud,
  .twinkle,
  .firefly,
  [class*="flicker"],
  [class*="meteor"],
  [class*="pulse"],
  [class*="drift"],
  [class*="float"],
  [class*="steam"] {
    animation: none !important;
  }
  /* Intro direkt auf End-State (NICHT duration=0 weil FOUC) */
  #intro { opacity: 0; pointer-events: none; visibility: hidden; }
}

/* ------------------------------------------------------------
   2. Mobile <768px: infinite animations AUS (CPU + Battery)
   Intro-Animation bleibt sichtbar (Leon-Pride), aber kuerzer
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
  /* Expensive decorative loops off auf Mobile */
  .cb-flicker,
  [class*="cb-flicker"],
  .cb-firefly,
  [class*="cb-firefly"],
  .cb-meteor,
  [class*="cb-meteor"],
  .hbw-flicker,
  [class*="hbw-flicker"],
  .goldpulse,
  [class*="goldpulse"] {
    animation: none !important;
  }

  /* Intro-Stars: weniger Flickering, kuerzere Dauer */
  .intro-star {
    animation-duration: 1.2s !important;
  }

  /* Sun/Moon-Pulse ausschalten (CPU heavy) */
  .sun, .moon, .cloud {
    animation: none !important;
  }

  /* Filter-heavy Effects aus */
  .hero-banner-wrap::before,
  .hero-banner-wrap::after {
    filter: none !important;
  }
}

/* ------------------------------------------------------------
   3. Low-end Device Hint via connection-speed
   ------------------------------------------------------------ */
@media (prefers-reduced-data: reduce) {
  .intro-star { display: none !important; }
  [class*="flicker"], [class*="pulse"], [class*="firefly"], [class*="meteor"] {
    animation: none !important;
  }
}

/* ------------------------------------------------------------
   4. Epilepsie-Safety: ALLE infinite Animationen haben
   animation-composition: replace (verhindert accumulating flashes)
   ------------------------------------------------------------ */
*[style*="animation"], [class*="flicker"], [class*="pulse"] {
  animation-composition: replace;
}

/* Fade-Transitions statt Hard-Cuts fuer Tag/Nacht-Sections */
.day-section, .night-section {
  transition: background 800ms ease-in-out, color 800ms ease-in-out;
}
/* Self-hosted Google Fonts (latin subset only) */

/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/fraunces-italic.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;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/fraunces-normal.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;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/instrument-sans-italic.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;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/instrument-sans-normal.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;
}
/* --- fonts.css inlined END --- */