/* =========================================================
   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(3.75rem, 2.5rem + 6vw, 7.5rem);

  /* 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;
}

/* Skip-Link: a11y — sichtbar nur bei Tastatur-Fokus */
.skip-link {
  position: absolute;
  left: 8px;
  top: -56px;
  z-index: 99999;
  background: #1F1C18;
  color: #FBF5EA;
  padding: 12px 18px;
  border-radius: 0 0 10px 10px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 0;
  outline: 2px solid #F4B860;
  outline-offset: 2px;
}
/* Skip-Link-Ziel: kein störender Outline-Rahmen um den ganzen Hauptinhalt */
#main-content:focus { outline: none; }
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 500;
  /* a11y: war var(--ink-active-muted) = 4.14:1 auf Creme → jetzt >=4.5:1 (WCAG 1.4.3) */
  color: #6E5F50;
  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 -1: hinter dem Content, aber über der Sky-Gradient (-2). Sonst
     legt sich die fixed-positionierte Sonne als heller Disc über Text-Cards
     (Finding H8). So glimmt sie hinter dem Frosted-Glass der Sektionen. */
  z-index: -1;
  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 -1: hinter dem Content (siehe .scroll-sun). Verhindert, dass der
     Mond-Disc auf den Kreativbar-/Night-Cards über dem Text klebt (H8). */
  z-index: -1;
  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;
}

/* ---------- 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: PNG, 2:1 aspect-ratio (1774x887 natural).
   Height-driven sizing — large genug damit Subtitle "FAMILIENCAFE
   & KREATIVBAR" lesbar bleibt. */
/* Nav-Brand-Logo: cropped to bounding-box (439x302, aspect ~1.45:1).
   Height-driven sizing damit Subtitle "FAMILIENCAFE & KREATIVBAR"
   deutlich lesbar bleibt. */
.nav-brand-logo {
  width: auto;
  height: 100px;
  max-width: 200px;
  object-fit: contain;
  object-position: left center;
  display: block;
  flex-shrink: 0;
}
@media (max-width: 767.98px) {
  .nav-brand-logo {
    height: 72px;
    max-width: 140px;
  }
}
.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;
  white-space: nowrap; /* mehrwortige Links wie "Über uns" dürfen nie umbrechen */
}
.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;
  /* WCAG 2.5.5: Mindest-Touch-Target 44×44 CSS-Pixel. */
  width: 44px; height: 44px;
  background: transparent;
  border: none;
  padding: 0;
  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; }

/* Nav-Kompaktierung für mittlere Viewports. Mit white-space:nowrap auf den
   Links (sonst bricht "Über uns" auf zwei Zeilen um) braucht die volle Nav
   (Logo + 6 Links + Pill ~276px + DE/EN + CTA) mehr Breite. Dreistufig:
   - 1025–1520px: engere Link-Abstände, damit der RESERVIEREN-CTA nicht rechts
     aus dem Viewport ragt.
   - 1025–1410px: zusätzlich weicht die Status-Pill — darunter reicht selbst mit
     engen Abständen der Platz für Pill + alle Links nicht.
   - ≤1024px: Burger. Mit nowrap passt die Inline-Nav unter ~1024px nicht mehr
     (gemessen: 965px → CTA ragt 38px raus); der Burger greift daher jetzt bei
     ≤1024 statt ≤960. Overlap-Grenze bei 1024 (max/min beide 1024) vermeidet
     eine fraktionale Sub-Pixel-Lücke (Lehre aus dem 960/961-Fund). */
@media (max-width: 1520px) and (min-width: 1024px) {
  .nav-links { gap: 1.3rem; margin-left: 1.4rem; }
}
@media (max-width: 1410px) and (min-width: 1024px) {
  .nav-status { display: none; }
}

@media (max-width: 1024px) {
  .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-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;
}

/* 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 {
  border-color: var(--accent);
  background: var(--bg);
}
/* WCAG 2.4.7 / 1.4.11: sichtbarer Outline für Tastatur-Fokus zusätzlich zur
   Border-Farbänderung (die alleine das 3:1 Non-Text-Kontrast-Kriterium nicht
   garantiert über alle Themes). :focus-visible vermeidet Outline bei Mausklick. */
.form-field input:focus-visible, .form-field select:focus-visible, .form-field textarea:focus-visible {
  outline: 2px solid var(--accent, #E2A65B);
  outline-offset: 2px;
}
.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);
}
/* Readable price-range variant — long "Wochentag/Wochenende" strings
   overflow the big display .el-price; render as compact body text instead. */
.eventloc-card .el-price-range {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 600;
  font-size: clamp(1rem, 2vw, 1.3rem);
  line-height: 1.4;
  color: var(--accent, #D88F95);
  margin: .25rem 0 1.25rem;
  letter-spacing: 0;
}
/* Standalone notes that sit directly in .wrap (not inside an eventloc-card):
   typography only — color is inherited from .night-section p so the note
   stays legible on the dark events-section background. */
.el-note {
  font-family: 'Instrument Sans', sans-serif;
  font-size: .85rem;
  font-style: italic;
  line-height: 1.5;
  max-width: 60ch;
  margin: 1.25rem 0 0;
}
.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);
}


/* ---------- Generic section lede (e.g. Kreativbar desc) ---------- */
.section-lede {
  font-family: 'Instrument Sans', sans-serif;
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.6;
  max-width: 60ch;
  color: var(--ink, #1F1C18);
  margin: 0 0 2rem;
}

/* ---------- 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; }
/* Bug-1-Fix 2026-06-07: Kurs-Anfrage — "Platz anfragen"-CTA + Formular-Wrapper */
.course-card .course-cta {
  margin-top: 1.25rem;
}
.course-request-wrap {
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 640px;
}
.course-request-wrap .form {
  margin-top: 1.25rem;
}
/* Anker-Offset, damit die fixe Nav das Formular beim Sprung nicht überdeckt */
#kurs-anfrage {
  scroll-margin-top: 90px;
}
.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;
}

/* ----- Tageskarte placeholder ----- */
.menu-placeholder {
  margin: 1.75rem 0 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--paper, #F5E6D3);
  border-radius: 12px;
  border-left: 3px solid var(--rosa, #E8B4B8);
  text-align: center;
}
.menu-placeholder h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  color: var(--ink, #1F1C18);
  margin: 0 0 .4rem;
}
.menu-placeholder p {
  font-family: 'Instrument Sans', sans-serif;
  font-size: .875rem;
  color: rgba(31, 28, 24, .65);
  margin: 0;
  line-height: 1.5;
}

/* ----- Café practical info (hours + Kinderpauschale) ----- */
.cafe-info {
  margin: 1.5rem 0 2rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.cafe-info p {
  font-family: 'Instrument Sans', sans-serif;
  font-size: .9rem;
  color: rgba(31, 28, 24, .8);
  margin: 0;
  padding: .5rem .75rem;
  background: var(--paper, #F5E6D3);
  border-radius: 8px;
  border-left: 3px solid var(--rosa, #E8B4B8);
  line-height: 1.5;
}

/* ----- Hausordnung hint-box ----- */
.regeln-box {
  margin-top: 2.5rem;
  padding: 1.5rem 1.75rem;
  background: var(--paper, #F5E6D3);
  border-radius: 14px;
  border-left: 3px solid var(--rosa, #E8B4B8);
}
.regeln-heading {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink, #1F1C18);
  margin: 0 0 .6rem;
}
.regeln-intro {
  font-size: .9rem;
  color: var(--ink-soft, #4A4038);
  margin: 0 0 1rem;
  line-height: 1.5;
}
.regeln-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.regeln-list li {
  font-size: .88rem;
  line-height: 1.55;
  color: var(--ink-soft, #4A4038);
}
.regeln-list li strong {
  display: block;
  font-weight: 600;
  color: var(--ink, #1F1C18);
  margin-bottom: .15rem;
}
.regeln-pruefung {
  font-size: .85rem;
  font-style: italic;
  color: var(--ink-muted, #8A7A6A);
  margin: 0 0 .4rem;
  line-height: 1.4;
}
.regeln-dank {
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink-soft, #4A4038);
  margin: 0;
}
/* Night/evening scroll adaptation */
body.scroll-evening .regeln-box,
body.scroll-night .regeln-box {
  background: rgba(43, 36, 32, .75);
  border-left-color: var(--candle-soft, #E8A855);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body.scroll-evening .regeln-heading,
body.scroll-night .regeln-heading,
body.scroll-evening .regeln-dank,
body.scroll-night .regeln-dank {
  color: #FBF5EA;
}
body.scroll-evening .regeln-intro,
body.scroll-night .regeln-intro,
body.scroll-evening .regeln-list li,
body.scroll-night .regeln-list li {
  color: rgba(251, 245, 234, .78);
}
body.scroll-evening .regeln-list li strong,
body.scroll-night .regeln-list li strong {
  color: #FBF5EA;
}
body.scroll-evening .regeln-pruefung,
body.scroll-night .regeln-pruefung {
  color: rgba(251, 245, 234, .55);
}


/* ---------- 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-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 select,
body.has-sky .night-section .form textarea {
  background: rgba(245, 232, 208, .06);
  border-color: rgba(245, 232, 208, .2);
  color: #F5E8D0;
}
/* Bug-Fix 2026-06-07 (Time-Dropdown-Kontrast): Das native <select>-Options-Popup
   wird vom Browser auf hellem Systemgrund gezeichnet. Ohne eigene option-Farbe
   erbten die Optionen die helle Schrift (#F5E8D0) des <select> → hell-auf-hell,
   praktisch unlesbar. Optionen daher explizit dunkel-auf-creme (≈16:1) und
   color-scheme:light, damit der Popup-Chrome hell bleibt. Das geschlossene Feld
   nutzt weiterhin die select-color (#F5E8D0) auf dem dunklen Glas-Hintergrund. */
.night-section .form select { color-scheme: light; }
.night-section .form select option {
  color: #1F1C18;
  background-color: #FBF5EA;
}
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);
}

/* ----- Kreativbar: placeholder + hours in night context ----- */
.night-section .menu-placeholder {
  background: rgba(245, 201, 126, .08);
  border-left-color: #F5C97E;
}
.night-section .menu-placeholder h3 { color: #F5E8D0; }
.night-section .menu-placeholder p  { color: rgba(245, 232, 208, .7); }
.night-section .cafe-info p {
  background: rgba(245, 201, 126, .08);
  border-left-color: rgba(245, 197, 126, .4);
  color: rgba(245, 232, 208, .8);
}

/* ----- Reservation-Form: Status-Box Layout-Shift verhindern -----
   Wenn nach Submit eine Erfolgs-/Fehler-Meldung erscheint, soll die Sektion
   nicht springen. Min-Height nur wenn Inhalt da ist; sonst zero. */
[data-form-status]:empty { min-height: 0; }
[data-form-status]:not(:empty) { min-height: 3rem; padding: 0.75rem 1rem; }

/* ----- Kreativbar: Offenes-Angebot Box (15 €-Paket) ----- */
/* Eigene Box neben der Bar-Karte — stärker hervorgehoben (Grün-Akzent statt
   Kerze-Gelb), um klar als gebuchtes Angebot lesbar zu sein. */
.kreativbar-offen {
  margin: 1.25rem 0 2rem;
  padding: 1.5rem 1.75rem;
  background: rgba(184, 212, 163, .08);
  border-radius: 12px;
  border-left: 3px solid var(--green, #B8D4A3);
  text-align: center;
}
.kreativbar-offen h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  color: #F5E8D0;
  margin: 0 0 .55rem;
}
.kreativbar-offen p {
  font-family: 'Instrument Sans', sans-serif;
  font-size: .95rem;
  color: rgba(245, 232, 208, .85);
  margin: 0;
  line-height: 1.55;
}
.kreativbar-offen strong { color: var(--green, #B8D4A3); }

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 { opacity: 1; }
/* WCAG 2.4.7 + 2.4.11: sichtbarer Fokus-Ring statt opacity-only. */
.legal-link:focus-visible {
  opacity: 1;
  outline: 2px solid #F4B860;
  outline-offset: 3px;
  border-radius: 2px;
}
.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 (Event form)              */
/* ============================================ */

/* Divider between reservation 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-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 --- */

/* ============================================================
   Mobile-Layout-Fix 2026-05-05: Scroll-Sun/Moon ausblenden auf
   schmalen Viewports, weil sie sonst den Content überlagern.
   ============================================================ */
@media (max-width: 720px) {
  .scroll-sun,
  .scroll-moon {
    display: none !important;
  }
}


/* ============================================================
   Form-Hints (Reservation-Form 2026-05-05): Sub-Labels für
   Telefon-Pflicht-Begründung und Datum→Zeit-Slot-Generation.
   ============================================================ */
.form-hint {
  display: block;
  font-size: 0.85em;
  font-weight: 400;
  font-style: italic;
  color: #5e5346;
  margin-top: 4px;
  letter-spacing: 0;
}
label .form-hint {
  display: inline;
  margin-left: 4px;
  font-style: normal;
  color: #9b8e78;
  font-weight: 400;
}
.form-field--error .form-hint {
  color: #c53030;
}


/* ============================================================
   Mobile-Audit-Fixes (2026-05-13)
   - HIGH-1: Nav-Status-Pill clippte ("GESCHLOSSEN · WIEDER FR..." wurde
     abgeschnitten). Fix: auf Mobile ausblenden — Hero-Mark im Hero
     traegt denselben Live-Status (statusLabel).
   - HIGH-2: Hero-Sun-Disc ueberlappte Hero-Titel "Ein Ort". Fix:
     verkleinern + nach oben rechts schieben (out of Text-Bereich).
   - MEDIUM-1: doppelter Status-Pill (Nav + Hero-Mark) durch HIGH-1
     implizit aufgeloest.
   - MEDIUM-2: Nav-Right-Container Overflow (~415px in 390px Viewport)
     durch Nav-Status-Hide stark reduziert; restliches Spacing nachgezogen.
   ============================================================ */
@media (max-width: 640px) {
  .nav-status {
    display: none;
  }
  .nav-right {
    gap: 0.5rem;
  }
  .hero-sun,
  .hero-moon {
    transform: scale(0.5) translate(40%, -30%);
    transform-origin: top right;
  }
  /* Bug-Fix 2026-06-07 (Sonne/Mond-Stapel Mobile): Die opacity:0.6 wurde zuvor
     gemeinsam auf .hero-sun UND .hero-moon gesetzt und schlug per späterer
     Quellposition die Basis .hero-moon{opacity:0} → Sonne und Mond lagen
     deckungsgleich übereinander. Jetzt bekommt nur die Sonne opacity; der Mond
     bleibt im Tag-Default unsichtbar (kein Stapel). Mobile zeigt damit statisch
     genau einen Himmelskörper. Echte Scroll-Bewegung ist bewusst separat. */
  .hero-sun {
    opacity: 0.6;
  }
  /* Night-mode Override: existing body.night .hero-moon (spec 0,2,1) wuerde
     sonst das mobile transform schlagen → moon ueberlappt Hero-Titel im Abend. */
  body.night .hero-sun,
  body.night .hero-moon {
    transform: scale(0.5) translate(40%, -30%);
    transform-origin: top right;
  }
}


/* ============================================================
   Mobile-Audit-Iteration-2 (2026-05-13)
   Nach Leon-Live-Test auf iPhone:
   - Horizontal-Scroll fixen (Seite liess sich links/rechts schieben)
   - Marquee-Banner war zu gross auf Mobile
   - Generelle Groessen runter (Section-Padding, Hero-Title)
   - Tap-Highlight (blauer Click-Marker) auf Buttons entfernen
   - User-Select auf Buttons entfernen
   - EN-Button-Bug per HTML-Attribut-Fix (data-lang -> data-lang-switch)
   ============================================================ */

/* Universal: kein blauer Tap-Highlight + kein Text-Select auf Touch-Buttons */
button,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Universal: horizontal-overflow-Hardening (verhindert links/rechts-Wischen
   auf Mobile durch decorative SVG-overflow oder Nav-right-Wide-Items). */
html,
body {
  overflow-x: clip;
}

@media (max-width: 640px) {
  /* Section-Padding stark reduziert: s-8 = 8rem ist auf 375px zu viel Luft. */
  .section { padding: var(--s-5) 0; }

  /* Hero-Title kleiner: --t-hero geht bis 9rem auf Desktop, das ist auf
     Mobile 144px Font-Size → Riesen-Klotz. Cap auf ~4rem (64px). */
  .hero-title {
    font-size: clamp(2.5rem, 9vw, 4rem);
    letter-spacing: -0.02em;
  }

  /* Marquee deutlich kleiner: 148px Hoehe vorher, jetzt ~72px. */
  .marquee {
    padding: var(--s-2) 0;
  }
  .marquee-track {
    gap: var(--s-3);
  }
  .marquee-track span {
    font-size: clamp(1.1rem, 5vw, 1.6rem);
  }
  .marquee-track span::after {
    width: 8px; height: 8px;
  }

  /* Reservation-Form: 2-Spalten-Rows (Vor/Nachname, Datum/Uhrzeit,
     Erwachsene/Kinder) auf Mobile zu 1-Spalte zusammenbrechen.
     Inputs sprengen sonst den Viewport. */
  .form-row {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   Mobile-Audit-Iteration-3 (2026-05-13)
   - Nav-Mobile-Overlay war kontrast-arm (weiss-auf-cream im Day-Mode)
     und Schrift zu gross (--t-2xl = bis 48px pro Link). Fix: dunkler
     Glass-Panel + dezentere Schriftgroesse + EN/DE-Lang-Switcher
     erst hier im Overlay verfuegbar (war vorher nur in der Nav-Right,
     auf Mobile durch Burger ueberdeckt).
   ============================================================ */
/* Breakpoint an den Burger gekoppelt (≤1024px, s. Nav-Kompaktierung). Sonst
   bekäme das 961–1024px-Band das Base-Overlay (z-index 99, heller bg) und die
   Nav-Bar (z-index 100) blutet durch das offene Menü. */
@media (max-width: 1024px) {
  .nav-mobile {
    background: rgba(20, 15, 28, 0.96);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    padding: var(--s-5) var(--gutter);
    gap: var(--s-2);
    /* Pre-existing z-index war 99, nav-bar ist 100 → bar blutet durch
       das offene Overlay. Mit dem neuen dunklen Glass-Panel sehr sichtbar.
       Fix: overlay ueber nav-bar legen. */
    z-index: 101;
  }
  .nav-mobile a {
    font-size: var(--t-lg);
    color: #F5E8D0;
    padding: 0.35rem 0;
    letter-spacing: 0.01em;
  }
  /* Explizite Farben statt CSS-Variablen — sonst kollidiert default
     `.btn-primary { background: var(--ink-active) }` (im light-Mode dark)
     mit unserem dark-Overlay → dark-on-dark Button unsichtbar. Plus
     body.scroll-night override liefert gelben bg, aber mein color: ink
     macht Text auf gelb auch fast unsichtbar wenn bg-Trick variiert. */
  .nav-mobile a.btn-primary {
    margin-top: var(--s-2);
    background: #F4B860 !important;
    color: #1F1C18 !important;
    border-color: #F4B860 !important;
  }
  .nav-mobile a.btn-primary:hover {
    background: #FFD488 !important;
    border-color: #FFD488 !important;
  }
  .nav-mobile-lang {
    margin-top: var(--s-3);
    font-size: var(--t-sm);
  }
  .nav-mobile-lang button {
    color: rgba(245, 232, 208, 0.6);
  }
  .nav-mobile-lang button.active {
    color: #F5E8D0;
    font-weight: 600;
  }
  .nav-mobile-lang .lang-sep {
    color: rgba(245, 232, 208, 0.3);
  }
}


/* ============================================================
   Mobile-Audit-Iteration-4 (2026-05-13)
   - Issue 2: Time-Select im disabled-State (vor Datum-Wahl bzw.
     wenn geschlossen) rendert auf iOS-Safari hell-weiss — passt
     nicht zum bg-alt aller anderen Form-Felder.
   - flatpickr-Integration: Kalender-Picker fuer #rf-date mit
     disable-Callback fuer Mi/Do/Vacation. Wenige Brand-Tweaks
     damit der Picker farblich passt.
   ============================================================ */

/* Issue 2: Disabled-State konsistent zu enabled-State halten */
.form-field input:disabled,
.form-field select:disabled,
.form-field textarea:disabled {
  background: var(--bg-alt);
  color: var(--ink-active-muted);
  opacity: 0.7;
  cursor: not-allowed;
}

/* flatpickr-Brand-Tuning: Calendar-Popup ans Craterle-Theme angepasst.
   Default-Layout bleibt, nur Akzent-Farben + Border-Radius. */
.flatpickr-calendar {
  font-family: var(--font-body, system-ui);
  border-radius: var(--r-md, 10px);
  box-shadow: 0 8px 28px rgba(45, 30, 20, 0.18);
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--accent);
  border-color: var(--accent);
}
.flatpickr-day.today {
  border-color: var(--accent);
}
.flatpickr-day.today:hover {
  background: var(--accent);
  color: #fff;
}
.flatpickr-day:hover {
  background: var(--bg-alt);
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  background: transparent;
  color: rgba(0, 0, 0, 0.15);
  text-decoration: line-through;
  cursor: not-allowed;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  color: var(--ink-active);
}


/* ============================================================
   Iter-5 (2026-05-13): Franzi-Fotos integriert
   - Story-Section: Portrait + Credentials stacked (photo TOP,
     stats darunter). Bisheriger Photo-Placeholder ("Foto folgt"
     Pseudo-Element + Gradient-Background) entfernt.
   - Konzept-Section: Familien-Landscape-Foto zwischen sec-head
     und duo-Cards als visueller Story-Anchor.
   ============================================================ */

/* Story-Section: aside enthält jetzt Photo + Credentials, kein
   Placeholder-Background mehr. !important hier weil:
   - `body.night .story-photo` (spec 0,1,1) hat gradient-background
   - `body.has-sky .night-section .story-photo` (spec 0,3,1) hat
     gradient + 1px gold-border (placeholder-card-look)
   Beide wuerden sonst hinter/um das Foto durchscheinen. Photo ist
   ab jetzt Photo, kein Placeholder. */
.story-photo {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  aspect-ratio: auto;
  padding: 0;
}
.story-photo::after {
  display: none;
}
.story-photo-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: center 18%;
  border-radius: var(--r-lg);
  display: block;
}

/* Night-Mode: Portrait bekommt subtilen warmen Filter damit es zur
   dunklen Atmosphäre passt (Story-Section ist night-section). */
body.night .story-photo-img {
  filter: brightness(0.92) saturate(0.95);
}

/* Konzept-Section: Familien-Foto als visueller Anchor zwischen
   sec-head und duo-cards. */
.konzept-photo {
  margin: var(--s-5) 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  display: block;
}
.konzept-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: center 28%;
  display: block;
}

@media (max-width: 640px) {
  .konzept-photo {
    margin: var(--s-3) 0;
  }
  .konzept-photo img {
    aspect-ratio: 4/3;
  }
}

/* =============================================================
   CONTRAST OVERRIDE — #werte + #konzept on scroll-evening / scroll-night
   Both sections use class "day-section" (cream background, #FBF5EA).
   When the user scrolls to the bottom of the page, body gains
   .scroll-evening (>35%) and .scroll-night (>60%).  The global
   scroll-aware rules above (lines ~3149-3179 and ~4177-4184) then
   fire, turning .value cards dark-brown and section headings cream —
   producing illegible cream-on-cream.  These targeted overrides (higher
   source order, equal or higher specificity) restore day-palette ink.
   ============================================================= */

/* --- #werte: .value cards --- */
body.scroll-evening #werte .value,
body.scroll-night   #werte .value {
  background: var(--cream, #FBF5EA);
  border-color: rgba(31, 28, 24, .08);
  color: var(--ink, #1F1C18);
  backdrop-filter: none;
}
body.scroll-evening #werte .value h3,
body.scroll-night   #werte .value h3 {
  color: var(--ink, #1F1C18);
}
body.scroll-evening #werte .value p,
body.scroll-night   #werte .value p {
  color: rgba(31, 28, 24, .72);
}
/* .v-num: default accent is overridden to gold (#F4B860) under scroll-night
   via --accent redefine (line ~249).  Force day-palette accent colours back. */
body.scroll-evening #werte .value .v-num,
body.scroll-night   #werte .value .v-num {
  color: var(--rosa-deep, #D88F95);
}
body.scroll-evening #werte .value:nth-child(2) .v-num,
body.scroll-night   #werte .value:nth-child(2) .v-num { color: #8FB570; }
body.scroll-evening #werte .value:nth-child(3) .v-num,
body.scroll-night   #werte .value:nth-child(3) .v-num { color: #E2A65B; }
body.scroll-evening #werte .value:nth-child(4) .v-num,
body.scroll-night   #werte .value:nth-child(4) .v-num { color: #8F6C91; }
body.scroll-evening #werte .value:nth-child(5) .v-num,
body.scroll-night   #werte .value:nth-child(5) .v-num { color: #C97D62; }

/* --- #werte: section heading + eyebrow (has-sky rule at ~4177 turns them cream) --- */
body.has-sky.scroll-evening #werte .section-heading,
body.has-sky.scroll-night   #werte .section-heading {
  color: var(--ink, #1F1C18);
}
body.has-sky.scroll-evening #werte .eyebrow,
body.has-sky.scroll-night   #werte .eyebrow {
  color: var(--rosa-deep, #D88F95);
}

/* --- #konzept: section heading + eyebrow --- */
body.has-sky.scroll-evening #konzept .section-heading,
body.has-sky.scroll-night   #konzept .section-heading {
  color: var(--ink, #1F1C18);
}
body.has-sky.scroll-evening #konzept .eyebrow,
body.has-sky.scroll-night   #konzept .eyebrow {
  color: var(--rosa-deep, #D88F95);
}

/* --- #konzept: .duo-day card text --- */
/* .duo-day has its own explicit dark ink from the base rule (color: var(--ink)).
   The has-sky glass-card rule gives it a cream/rgba bg; no scroll override
   touches .duo-day text directly — but the section-level --ink-active
   remap under scroll-evening/night (lines ~236-248) can propagate.
   Pin it explicitly so the day card stays legible. */
body.scroll-evening #konzept .duo-day,
body.scroll-night   #konzept .duo-day {
  color: var(--ink, #1F1C18);
}
body.scroll-evening #konzept .duo-day .duo-title,
body.scroll-night   #konzept .duo-day .duo-title {
  color: var(--ink, #1F1C18);
}
body.scroll-evening #konzept .duo-day .duo-time,
body.scroll-night   #konzept .duo-day .duo-time {
  color: var(--ink-soft, #4A4038);
}
body.scroll-evening #konzept .duo-day .duo-desc,
body.scroll-night   #konzept .duo-day .duo-desc {
  color: rgba(31, 28, 24, .80);
}
body.scroll-evening #konzept .duo-day .duo-list,
body.scroll-night   #konzept .duo-day .duo-list,
body.scroll-evening #konzept .duo-day .duo-list li,
body.scroll-night   #konzept .duo-day .duo-list li {
  color: var(--ink-soft, #4A4038);
}

/* .duo-night is intentionally always-dark (dark purple bg + cream text) —
   no override needed or wanted for the night card. */