/* ============================================================
   SECRET MOUNTAIN — v3 "Kurs-Look"
   Design-Basis = Tasty-Studios-Onlinekurs (Design-System.md):
   BG #05060b / #02040e · Beige-Familie #c7b489/#d8c9ab/#efe6d2 ·
   Weiß-Überschriften, Lineal 600, System-Sans-Fließtext.
   ============================================================ */

/* Selbst gehostet (assets/fonts/) statt catbox.moe — der Fremd-Host war
   spürbar langsam und verzögerte auf dem Handy den ersten Titel. */
@font-face {
  font-family: "Lineal TS";
  src: url("../fonts/lineal-ts.woff2") format("woff2");
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: "Lineal Web";
  src: url("../fonts/lineal-web.woff2") format("woff2");
  font-weight: 600; font-display: swap;
}

:root {
  /* Hintergrund wie tasty-studios.vercel.app: --ts-void als Basis,
     --ts-dark/--ts-navy als Flächen, dazu der blaue Schein (s. body::before) */
  --bg:      #07070d;
  --bg-2:    #0b0d18;
  --deep:    #05050b;
  --navy:    #111421;
  --navy-2:  #1f213b;
  --ink:     #ffffff;
  --muted:   rgba(244, 241, 232, .64);
  --muted-2: rgba(244, 241, 232, .38);
  --beige:   #c7b489;
  --beige-2: #d8c9ab;
  --beige-3: #efe6d2;
  --hair:    rgba(255, 255, 255, .1);
  --hair-2:  rgba(255, 255, 255, .06);
  --ease:    cubic-bezier(0.32, 0.72, 0, 1);
  --fd:      "Lineal Web", "Lineal TS", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
  --fb:      -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--fb);
  font-weight: 300;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* Blauer Schein über der Grundfläche — dieselben Werte wie auf
   tasty-studios.vercel.app. Eine feststehende Ebene ganz hinten:
   sie wird einmal gerastert und bewegt sich beim Scrollen nicht mit,
   kostet also nichts pro Bild. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58% 46% at 50% 22%, rgba(78, 100, 200, .30) 0%, rgba(52, 62, 150, .12) 44%, rgba(7, 7, 13, 0) 72%),
    radial-gradient(70% 50% at 50% 100%, rgba(31, 33, 59, .55) 0%, rgba(7, 7, 13, 0) 70%);
  transform: translateZ(0);
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
::selection { background: var(--beige); color: var(--bg); }

.wrap { width: min(1240px, 92vw); margin: 0 auto; }

/* ---------- Hero-Titel (ersetzt den früheren schwarzen Preloader) ----------
   Der Name steht jetzt über dem ersten Frame statt auf einem Vorhang.
   Schatten dahinter, damit er auf hellen Frames (Himmel) sicher liest. */
.hero-title {
  font-family: var(--fd); font-weight: 600;
  font-size: clamp(2.1rem, 5.2vw, 4.2rem); line-height: 1.02; letter-spacing: -.012em;
  text-shadow: 0 1px 2px rgba(2, 3, 8, .7), 0 2px 14px rgba(2, 3, 8, .6);
}
.hero-title .hl { display: block; overflow: hidden; }
/* Wortmarke mit Logo dahinter: das Logo liegt als ruhige, leicht
   durchscheinende Fläche hinter der Schrift (eigene Ebene, statisch —
   der Film darunter zeichnet es nicht bei jedem Bild neu). */
.mark-wrap { position: relative; display: inline-block; }
.hero-mark {
  position: absolute; left: 50%; top: 50%;
  width: min(58vh, 34rem); max-width: 175%;
  transform: translate(-50%, -50%);
  opacity: .26; z-index: -1; pointer-events: none; user-select: none;
}
.film-outro .hero-mark { width: min(46vh, 26rem); opacity: .3; }
/* "Mountain" steht schwarz statt beige — nur beim Schluss-Schriftzug */
.film-outro .hero-title .gold { color: #05060b; }
/* Startposition setzt GSAP (fromTo) — ein Prozent-Transform im CSS würde
   GSAP als Pixel-y einlesen und die Zeile bliebe in der Maske stecken. */
.hero-title .hl i { display: block; font-style: normal; }

/* ---------- Typo-Bausteine ---------- */
.chip {
  display: inline-flex; align-items: center; gap: .6rem; align-self: flex-start; width: max-content;
  border: 1px solid var(--hair); border-radius: 99px;
  padding: .42rem 1.1rem;
  text-transform: uppercase; letter-spacing: .16em; font-size: .64rem; font-weight: 500;
  color: var(--beige);
  margin-bottom: 2.2rem;
}
.chip::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--beige); }
.chip--ember { color: var(--beige-2); }
.chip--ember::before { background: var(--beige-2); }

.chap-title {
  font-family: var(--fd); font-weight: 600;
  font-size: clamp(2.5rem, 6.5vw, 5.2rem); line-height: 1.02; letter-spacing: -.015em;
}
.chap-title .it { font-style: normal; }
.gold { color: var(--beige); }
.ember { color: var(--beige-2); }
.lead { color: var(--muted); font-size: 1.08rem; max-width: 56ch; margin-top: 2rem; }

/* Zeilen-Maske für Titel-Reveals */
.cl { display: block; overflow: hidden; }
.cl i { display: block; font-style: normal; }

/* Ghost-Kapitelnummer */
.ghost-num {
  position: absolute; top: 4rem; right: 2vw;
  font-family: var(--fd); font-weight: 600;
  font-size: clamp(8rem, 20vw, 18rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .06);
  pointer-events: none; user-select: none;
}

/* ---------- Buttons: Beige-CTA (Kurs-Kontrastregel: dunkle Schrift auf Beige) ---------- */
.btn-pill, .nav-reserve { display: inline-block; border-radius: 99px; position: relative; }
.m-inner {
  display: inline-flex; align-items: center; gap: .9rem;
  border: 1px solid rgba(199, 180, 137, .45); border-radius: 99px;
  padding: .55rem .55rem .55rem 1.6rem;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500;
  color: var(--beige-2); background: rgba(199, 180, 137, .05);
  transition: background .6s var(--ease), border-color .6s var(--ease), color .6s var(--ease);
  will-change: transform;
}
.pill-ico {
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(199, 180, 137, .16); font-style: normal; font-size: .95rem;
  transition: transform .6s var(--ease), background .6s var(--ease), color .6s var(--ease);
}
.btn-pill:hover .m-inner, .nav-reserve:hover .m-inner { background: var(--beige); border-color: var(--beige); color: #05060b; }
.btn-pill:hover .pill-ico, .nav-reserve:hover .pill-ico { background: rgba(5, 6, 11, .16); transform: translate(2px, -2px); }
.btn-pill:active .m-inner { transform: scale(.98); }
.btn-pill--full { width: 100%; }
.btn-pill--full .m-inner { width: 100%; justify-content: space-between; }

/* ---------- Nav ---------- */
/* Bleibt dauerhaft stehen — kein Ausblenden beim Scrollen (Robert 30.07.2026):
   Burger + Reservation sind der Schnellzugriff. */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 110;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem clamp(1.2rem, 4vw, 3rem);
}
/* Bei offenem Menü über das Overlay heben — sonst liegt das X darunter
   und das Menü lässt sich nur über einen Link wieder schließen. */
body.menu-open .nav { z-index: 130; }
.nav { justify-content: flex-end; }
.nav-right { display: flex; align-items: center; gap: 1.2rem; }
/* Deckende Fläche statt backdrop-filter — gleicher Grund wie .hero-strip */
.nav-reserve .m-inner { padding: .35rem .35rem .35rem 1.2rem; font-size: .66rem; background: rgba(5, 6, 11, .55); }
.nav-reserve .pill-ico { width: 1.9rem; height: 1.9rem; }
/* Ab dem Film-Outro ausgeblendet (Klasse setzt main.js/updateBeats) */
.nav-reserve { transition: opacity .5s var(--ease), visibility .5s; }
.nav-reserve.is-off { opacity: 0; visibility: hidden; pointer-events: none; }

/* Burger: 3 Striche, kräftiger und mit eigener dunkler Fläche —
   sonst verschwindet er über hellen Frames (Himmel, Sonnenuntergang). */
.nav-burger {
  width: 2.9rem; height: 2.9rem; position: relative; z-index: 130;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
  /* Kein backdrop-filter: der Weichzeichner müsste über dem Canvas bei
     jedem Frame neu gerechnet werden. Deckende Fläche kostet nichts. */
  background: rgba(5, 6, 11, .62);
  transition: background .5s var(--ease), border-color .5s var(--ease);
}
.nav-burger:hover { background: rgba(5, 6, 11, .62); border-color: rgba(199, 180, 137, .55); }
.nav-burger span {
  position: absolute; left: 26%; width: 48%; height: 2px; border-radius: 2px;
  background: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .55);
  transition: transform .55s var(--ease), top .55s var(--ease), opacity .3s var(--ease);
}
.nav-burger span:nth-child(1) { top: 34%; transform: translateY(-50%); }
.nav-burger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav-burger span:nth-child(3) { top: 66%; transform: translateY(-50%); }
body.menu-open .nav-burger span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
body.menu-open .nav-burger span:nth-child(2) { opacity: 0; transform: translateY(-50%) scaleX(.3); }
body.menu-open .nav-burger span:nth-child(3) { top: 50%; transform: translateY(-50%) rotate(-45deg); }

/* Overlay-Menü */
.omenu {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(2, 4, 14, .78); backdrop-filter: blur(28px);
  display: flex; flex-direction: column; justify-content: center; gap: 4rem;
  padding: 0 clamp(1.4rem, 8vw, 8rem);
  visibility: hidden; opacity: 0;
  transition: opacity .7s var(--ease), visibility 0s .7s;
}
body.menu-open .omenu { visibility: visible; opacity: 1; transition: opacity .7s var(--ease); }
.omenu-links { display: flex; flex-direction: column; gap: .5rem; }
.omenu-links a {
  display: flex; align-items: baseline; gap: 1.6rem;
  font-family: var(--fd); font-weight: 600; letter-spacing: -.015em;
  font-size: clamp(2rem, 5.5vw, 3.8rem); line-height: 1.15;
  overflow: hidden;
}
.omenu-links a em {
  font-family: var(--fb); font-style: normal; font-size: .68rem;
  letter-spacing: .3em; color: var(--muted-2);
}
.omenu-links a span {
  display: inline-block; transform: translateY(120%);
  transition: transform .9s var(--ease), color .4s;
}
body.menu-open .omenu-links a span { transform: translateY(0); }
body.menu-open .omenu-links a:nth-child(1) span { transition-delay: .08s; }
body.menu-open .omenu-links a:nth-child(2) span { transition-delay: .14s; }
body.menu-open .omenu-links a:nth-child(3) span { transition-delay: .2s; }
body.menu-open .omenu-links a:nth-child(4) span { transition-delay: .26s; }
body.menu-open .omenu-links a:nth-child(5) span { transition-delay: .32s; }
.omenu-links a:hover span { color: var(--beige); }
.omenu-meta { display: flex; gap: 4rem; flex-wrap: wrap; font-size: .88rem; color: var(--muted); }
.omenu-meta .k {
  display: block; text-transform: uppercase; letter-spacing: .16em;
  font-size: .58rem; color: var(--muted-2); margin-bottom: .4rem;
}
.omenu-meta a:hover { color: var(--beige); }

/* ---------- Platzhalter (Slots) ---------- */
.media-slot { position: relative; overflow: hidden; }
.media-slot > img, .media-slot > video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.ph { position: absolute; inset: 0; }
.ph::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 110%, rgba(199, 180, 137, .12), transparent 55%);
}
.slot-tag {
  position: absolute; left: 1.1rem; bottom: 1rem; z-index: 2;
  font-weight: 500; font-size: .56rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  border: 1px dashed rgba(255, 255, 255, .22); border-radius: 4px;
  padding: .35rem .7rem; background: rgba(5, 6, 11, .45); backdrop-filter: blur(4px);
}
.ph--s1 { background: linear-gradient(180deg, #232c44 0%, #3d3a3c 62%, #0a0c16 100%); }
.ph--s2 { background: linear-gradient(165deg, #2b2418 0%, #5c4126 55%, #0a0c16 100%); }
.ph--s3 { background: linear-gradient(200deg, #35291f 0%, #6b4a2e 55%, #0a0c16 100%); }
.ph--s4 { background: linear-gradient(170deg, #202028 0%, #533a28 62%, #08090f 100%); }
.ph--s5 { background: linear-gradient(180deg, #34281c 0%, #7a522e 58%, #0a0c16 100%); }
.ph--s6 { background: linear-gradient(180deg, #402b3c 0%, #b5653a 48%, #120a14 100%); }
.ph--d1 { background: linear-gradient(160deg, #322718, #0c0a09); }
.ph--d2 { background: linear-gradient(160deg, #1e2a34, #0a0e14); }

/* ---------- Film: Video-Scrub ab Pixel 1 ---------- */
.film { position: relative; }
.film-pin { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: var(--bg); }
/* startet unsichtbar und wird eingeblendet, sobald die ersten Frames
   geladen sind (main.js) — ersetzt den früheren Vorhang */
.film-media { position: absolute; inset: 0; opacity: 0; }
.film-media canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  will-change: transform;
}
.film-veil {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    /* Kino-Bänder oben und unten: dort — und nur dort — steht Text.
       Sie geben weißer Schrift auf hellen Bildern (Dach, Fenster, Himmel)
       verlässlich Grund, ohne das Bild in der Mitte zuzukleistern.
       Dazu eine sanfte Absenkung zur Mitte für den Titel und die Vignette. */
    linear-gradient(180deg,
      rgba(2, 3, 8, .74) 0%, rgba(2, 3, 8, .62) 12%, rgba(2, 3, 8, .38) 24%, rgba(2, 3, 8, 0) 42%,
      rgba(2, 3, 8, 0) 56%, rgba(2, 3, 8, .34) 74%, rgba(2, 3, 8, .6) 90%, rgba(2, 3, 8, .76) 100%),
    radial-gradient(74% 58% at 50% 44%, rgba(2, 3, 8, .26) 0%, rgba(2, 3, 8, .10) 44%, transparent 72%),
    radial-gradient(115% 95% at 50% 45%, transparent 58%, rgba(2, 3, 8, .44) 100%);
  /* Eigene Compositor-Ebene: so wird dieser Verlauf EINMAL gerastert und
     nicht bei jedem Frame des Canvas darunter neu gemalt. */
  transform: translateZ(0);
}
/* Hero: mittig, ruhig gesetzt — Kicker, Name, Haarlinie.
   Nur Text und eine 1-px-Linie, keine Flächen über dem Canvas. */
.film-hero {
  position: absolute; z-index: 2; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.5rem; padding: 0 1.4rem 8vh; pointer-events: none; text-align: center;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  will-change: opacity, transform;
}
.hero-kicker {
  text-transform: uppercase; letter-spacing: .42em; font-size: .62rem; font-weight: 500;
  color: var(--beige-2); text-indent: .42em;
  text-shadow: 0 1px 6px rgba(2, 3, 8, .85);
}
.hero-rule {
  display: block; width: 1px; height: 3.4rem;
  background: linear-gradient(180deg, var(--beige-3), rgba(239, 230, 210, .05));
  box-shadow: 0 0 6px rgba(2, 3, 8, .9);
}
/* Ein-/Ausblenden per Klasse statt per Animation je Scroll-Update */
.film-hero.is-off { opacity: 0; transform: translateY(-20px); }
.film-cue { transition: opacity .35s var(--ease); }
.film-cue.is-off { opacity: 0; }
.hero-strip { transition: opacity .4s var(--ease); }
.hero-strip.is-off { opacity: 0; }
/* Lesbarkeit läuft ausschließlich über Textschatten — jede zusätzliche
   Flächen-Ebene über dem Canvas muss bei JEDEM Frame neu gemalt werden
   und kostet Flüssigkeit im Scroll. */

/* Kapitel-Texte während der Fahrt. Der Container ist eine leere,
   durchlässige Fläche — jeder Text sitzt über eine Klasse in seiner Ecke:
   b-tl oben links · b-tr oben rechts · b-bl unten links · b-br unten rechts.
   Ein-/Ausblenden nur über opacity/transform (Compositor, kein Neumalen). */
.film-beats { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.beat {
  position: absolute; width: min(30rem, 58vw);
  opacity: 0; transform: translateY(1.4rem);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
  /* eigene Compositor-Ebene: der Text wird beim Bildwechsel darunter
     nicht neu gerastert, nur neu zusammengesetzt */
  will-change: opacity, transform;
}
.beat.b-tl, .beat.b-tr { top: clamp(5.6rem, 15vh, 9rem); }
.beat.b-bl, .beat.b-br { bottom: clamp(7rem, 15vh, 10rem); }
.beat.b-tl, .beat.b-bl { left: clamp(1.4rem, 5vw, 4.5rem); }
.beat.b-tr, .beat.b-br { right: clamp(1.4rem, 5vw, 4.5rem); text-align: right; }
.beat.b-tr p, .beat.b-br p { margin-left: auto; }
.beat.is-on { opacity: 1; transform: translateY(0); }
.beat-k {
  display: inline-block; margin-bottom: .9rem;
  text-transform: uppercase; letter-spacing: .28em; font-size: .6rem; font-weight: 500;
  color: var(--beige-3); text-shadow: 0 1px 2px rgba(2, 3, 8, .9), 0 1px 10px rgba(2, 3, 8, .8);
}
.beat h2 {
  font-family: var(--fd); font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2.7rem); line-height: 1.08; letter-spacing: -.015em;
  text-shadow: 0 1px 2px rgba(2, 3, 8, .75), 0 2px 14px rgba(2, 3, 8, .6);
}
.beat p {
  margin-top: .9rem; max-width: 34ch;
  font-size: .92rem; line-height: 1.6; color: rgba(248, 246, 240, .94);
  text-shadow: 0 1px 2px rgba(2, 3, 8, .85), 0 1px 10px rgba(2, 3, 8, .7);
}

/* Outro: Name über der Sonnenuntergang-Szene — höher als die Mitte,
   damit er über dem Horizont steht und nicht im Pärchen liegt. */
.film-outro {
  position: absolute; z-index: 2; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 1.1rem; padding: clamp(6rem, 17vh, 11rem) 1.4rem 0; pointer-events: none;
  text-align: center;
  opacity: 0; transform: translateY(1.6rem);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  will-change: opacity, transform;
}
.film-outro.is-on { opacity: 1; transform: translateY(0); }
.outro-k {
  text-transform: uppercase; letter-spacing: .3em; font-size: .6rem; font-weight: 500;
  color: var(--beige-2); text-shadow: 0 1px 8px rgba(2, 3, 8, .8);
}
/* Outro-Name: größer, beide Zeilen mittig, ohne Schatten — der
   Sonnenuntergang ist dunkel genug, der Schatten würde ihn nur trüben. */
.hero-title--outro {
  font-size: clamp(2.6rem, 6.6vw, 5.4rem);
  text-align: center; text-shadow: none;
}
.film-cue {
  position: absolute; z-index: 2; right: clamp(1.6rem, 5vw, 4.5rem); bottom: clamp(7rem, 15vh, 10rem);
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
}
.film-cue span { position: relative; width: 1px; height: 52px; background: var(--hair); overflow: hidden; display: block; }
.film-cue span::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent, var(--beige-2));
  animation: cue 2s var(--ease) infinite;
}
.film-cue b { font-weight: 500; text-transform: uppercase; letter-spacing: .3em; font-size: .56rem; color: rgba(255,255,255,.6); }
@keyframes cue { 0% { transform: translateY(-100%); } 60% { transform: translateY(0); } 100% { transform: translateY(100%); } }
.film-rail {
  position: absolute; z-index: 2; left: 50%; bottom: 4.6rem; transform: translateX(-50%);
  width: min(320px, 40vw); height: 1px; background: rgba(255,255,255,.16);
  opacity: 0; transition: opacity .5s var(--ease);
}
.film-rail i { position: absolute; left: 0; top: 0; height: 100%; width: 0%; background: var(--beige); display: block; }
.film.is-scrubbing .film-rail { opacity: 1; }
.hero-strip {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  border-top: 1px solid var(--hair-2);
  /* Kein backdrop-filter (auch Desktop, 30.07.2026): der Weichzeichner
     müsste bei JEDEM Canvas-Frame neu gerechnet werden — deckendere
     Fläche sieht praktisch gleich aus und kostet nichts. */
  background: rgba(2, 4, 14, .72);
}

/* Laufband */
.marquee { overflow: hidden; white-space: nowrap; }
.marquee-track {
  display: inline-flex; align-items: center; gap: 3rem;
  padding: 1.05rem 0; will-change: transform;
  animation: marq 36s linear infinite;
}
.marquee-track span {
  text-transform: uppercase; letter-spacing: .3em; font-size: .62rem; color: rgba(255, 255, 255, .66);
}
.marquee-track em { color: var(--beige); font-style: normal; font-size: .55rem; }
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee--ghost { border-block: 1px solid var(--hair-2); margin: 3rem 0 2.4rem; }
.marquee--ghost .marquee-track { gap: 4rem; padding: 1.6rem 0; animation-duration: 28s; }
.marquee--ghost .marquee-track span {
  font-family: var(--fd); font-weight: 600; text-transform: none;
  letter-spacing: -.01em; font-size: clamp(1.8rem, 4vw, 3rem);
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .2);
}

/* ---------- Interlude ---------- */
.interlude {
  padding: clamp(7rem, 17vh, 13rem) clamp(1rem, 2vw, 2rem);
  text-align: center; position: relative;
}
.int-line {
  font-family: var(--fd); font-weight: 600;
  font-size: clamp(1.5rem, 3.6vw, 3rem); line-height: 1.25; letter-spacing: -.012em;
}
.int-line i { display: inline-block; font-style: normal; }
.int-line i:last-child { color: var(--beige); }
/* Buchstaben-Masken: jeder Buchstabe fährt aus seiner eigenen Maske hoch.
   Padding/Margin unten, damit Unterlängen (y, p, g) nicht abgeschnitten werden. */
.int-line .ch { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .14em; margin-bottom: -.14em; }
.int-line .ch b { display: inline-block; font-weight: inherit; }
.int-rule {
  display: block; width: 1px; height: 88px; margin: 4rem auto 0;
  background: linear-gradient(180deg, var(--beige), transparent);
}

/* ---------- Bildspur (Framer-Komponente Image Trail Cursor) ----------
   Die Spur liegt als eigene Ebene ueber der ganzen Interlude-Sektion und
   faengt die Mausbewegung ab. Text und Linie liegen darueber, sind aber
   fuer die Maus durchlaessig — sonst bekaeme die Ebene keine Bewegung mit. */
.interlude { overflow: hidden; }
.trail-layer { position: absolute; inset: 0; z-index: 1; }
.interlude .int-line,
.interlude .int-rule { position: relative; z-index: 2; pointer-events: none; }

/* Touch-Geraete haben keinen Cursor — Ebene aus, spart Rechenlast. */
@media (hover: none) {
  .trail-layer { display: none; }
}

/* ---------- Kapitel-Gerüst ---------- */
.kitchen, .events { position: relative; padding: clamp(4rem, 9vh, 7rem) 0; }
.chap-head { margin-bottom: clamp(2rem, 4.5vh, 3.4rem); position: relative; z-index: 2; }
/* Küche: etwas Luft zwischen Überschrift und der ersten Kachelreihe */
.kitchen .chap-head { margin-bottom: clamp(3.2rem, 7vh, 5.4rem); }
/* Events: ruhigere Überschrift */
.events .chap-title { font-size: clamp(2.3rem, 5.6vw, 4.4rem); }
.events .chap-head { margin-bottom: clamp(3rem, 6.5vh, 5rem); }

/* ---------- Kitchen: Signatures (Doppelrand-Karten) ---------- */
.signatures {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 3rem);
  margin-bottom: clamp(2.4rem, 5vh, 4rem);
}
.sig-card { display: grid; gap: 1.6rem; }
.sig-card--b { transform: translateY(clamp(1.5rem, 4vw, 3.5rem)); }
.sig-shell {
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--hair-2);
  border-radius: 1.6rem; padding: .5rem;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .05);
}
.sig-media { aspect-ratio: 4 / 3; border-radius: 1.15rem; overflow: hidden; background: #000; transition: transform .9s var(--ease); }
.sig-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sig-card:hover .sig-media { transform: scale(1.015); }
.sig-body { padding: 0 .6rem; }
.sig-k { text-transform: uppercase; letter-spacing: .16em; font-size: .6rem; font-weight: 500; color: var(--beige); }
.sig-body h3 {
  font-family: var(--fd); font-weight: 600; font-size: 1.55rem; letter-spacing: -.01em; margin: .6rem 0 .5rem;
}
.sig-body p { color: var(--muted); font-size: .92rem; max-width: 46ch; }
.sig-price { display: inline-block; margin-top: .9rem; font-family: var(--fd); font-weight: 600; font-size: 1.15rem; color: var(--beige); }

/* ---------- Bar: Kategorien links (1/3), Getränke-Galerie rechts (2/3) ---------- */
.bar-split {
  /* Schmale Kategorienleiste, der Rest gehört der Galerie.
     minmax(0, 1fr) ist Pflicht: ohne die 0 sprengt die scrollbare
     Galerie ihre Spalte nach rechts über den Seitenrand hinaus. */
  display: grid; grid-template-columns: clamp(170px, 18vw, 250px) minmax(0, 1fr);
  gap: clamp(2rem, 4.5vw, 4rem); align-items: stretch;
  margin-bottom: clamp(4rem, 9vh, 7rem);
}
.bar-k {
  text-transform: uppercase; letter-spacing: .16em; font-size: .6rem; font-weight: 500;
  color: var(--beige); margin-bottom: 1.4rem;
}
.bar-rail { display: flex; flex-direction: column; padding-top: 2rem; }
/* Der Kategorien-Block startet auf der Höhe der Galerie-Überschrift und
   die Notiz sitzt auf der Unterkante der Karten — links und rechts
   bilden damit einen bündigen Block. */
.bar-cats { display: flex; flex-direction: column; gap: .1rem; }
.bar-cat {
  position: relative; text-align: left; padding: .75rem 0;
  border-bottom: 1px solid var(--hair-2);
}
.bar-cat i {
  display: inline-block; font-family: var(--fd); font-weight: 600; font-style: normal;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.25; letter-spacing: -.01em;
  color: var(--muted-2);
  transition: color .45s var(--ease), transform .6s var(--ease);
}
.bar-cat:focus { outline: none; }
.bar-cat:focus-visible { outline: 1px solid rgba(199, 180, 137, .6); outline-offset: 3px; }
.bar-cat:hover i { color: var(--muted); }
.bar-cat.active i { color: var(--beige); }
/* klebt an der Unterkante, damit der Block unten mit den Karten abschließt */
.bar-rail .rail-note { margin-top: auto; padding-top: 1.8rem; max-width: 30ch; }

.bar-title {
  font-family: var(--fd); font-weight: 600; font-size: clamp(1.3rem, 2vw, 1.75rem);
  letter-spacing: -.012em; color: var(--ink);
}
/* In der Bar-Galerie ersetzt die Überschrift die Tab-Reihe */
.bar-split .bar-gal { margin-top: 0; min-width: 0; }
.bar-gal .gal-head { align-items: center; margin-bottom: 1.3rem; }
.bar-gal .gal-foot { justify-content: flex-end; }
.bar-gal .gal-arrow { width: 40px; height: 40px; }
.bar-gal .gal-arrow svg { width: 17px; height: 17px; }
.bar-gal .g-card { width: clamp(320px, 30vw, 420px); }

/* Zentrierte Kapitel-Köpfe */
.chap-head--center { text-align: center; }
.chap-head--center .chip { align-self: center; margin-inline: auto; }
.ad-head--center { text-align: center; }
.ad-head--center .chip { margin-inline: auto; }
/* Zentriert, aber breit: die Zeilen dürfen weiter nach links und rechts
   laufen — kein schmaler Block in der Mitte. */
.ad-head--center .lead,
.chap-head--center .lead { margin-inline: auto; max-width: min(92ch, 100%); }

/* ---------- Kitchen: Gerichte-Galerie (waagerecht scrollbar) ---------- */
.gal { margin-top: clamp(3rem, 7vh, 5rem); }

.gal-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; margin-bottom: clamp(1.6rem, 3vh, 2.4rem);
}
.gal-tabs { display: flex; flex-wrap: wrap; align-items: baseline; gap: clamp(1.1rem, 2.6vw, 2.2rem); }
.gal-tab { position: relative; overflow: hidden; padding: .2rem 0; }
.gal-tab i {
  display: inline-block; font-family: var(--fd); font-weight: 600; font-style: normal;
  font-size: clamp(1.35rem, 2.3vw, 2rem); line-height: 1.18; letter-spacing: -.015em;
  color: var(--muted-2);
  transition: color .5s var(--ease), transform .6s var(--ease);
}
.gal-tab:hover i { color: var(--muted); transform: translateY(-2px); }
.gal-tab.active i { color: var(--beige); }
.gal-tab::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0%;
  background: var(--beige); transition: width .6s var(--ease);
}
.gal-tab.active::after { width: 100%; }

.gal-nav { display: flex; gap: .55rem; flex: 0 0 auto; }
.gal-arrow {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--hair); display: grid; place-items: center;
  background: rgba(255, 255, 255, .02);
  transition: border-color .4s var(--ease), background .4s var(--ease),
              transform .5s var(--ease), opacity .4s;
}
.gal-arrow svg { width: 19px; height: 19px; fill: none; stroke: var(--beige-3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.gal-arrow:hover:not(:disabled) { border-color: var(--beige); background: rgba(199, 180, 137, .1); transform: scale(1.06); }
.gal-arrow:disabled { opacity: .28; cursor: default; }

/* Viewport + Spur */
.gal-viewport { position: relative; }
.gal-track {
  display: flex; gap: clamp(.9rem, 1.6vw, 1.4rem);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: 4px 0 1.4rem;
}
.gal-track::-webkit-scrollbar { display: none; }

/* Weiche Kanten links/rechts, damit die Reihe nicht hart abschneidet */
.gal-fade {
  position: absolute; top: 0; bottom: 1.4rem; width: clamp(40px, 6vw, 90px);
  pointer-events: none; z-index: 2; opacity: 0; transition: opacity .5s var(--ease);
}
.gal-fade--l { left: 0;  background: linear-gradient(90deg, var(--bg), transparent); }
.gal-fade--r { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.gal.at-start .gal-fade--r,
.gal.mid .gal-fade--r { opacity: 1; }
.gal.mid .gal-fade--l,
.gal.at-end .gal-fade--l { opacity: 1; }

/* Kachel */
.g-card {
  flex: 0 0 auto; width: clamp(340px, 34vw, 460px);
  scroll-snap-align: start;
  border: 1px solid var(--hair-2); border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  transition: border-color .5s var(--ease), transform .6s var(--ease), box-shadow .6s var(--ease);
}
.g-card:hover {
  border-color: rgba(199, 180, 137, .38); transform: translateY(-6px);
  box-shadow: 0 22px 50px -22px rgba(0, 0, 0, .9);
}
/* Natives 3:2 der generierten Bilder — kein Beschnitt, keine Ränder. */
.g-media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #000; }
.g-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.1s var(--ease), opacity .8s var(--ease);
}
.g-card:hover .g-media img { transform: scale(1.05); }
.g-tag {
  position: absolute; left: .85rem; top: .85rem; z-index: 2;
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--beige-3); padding: .3rem .6rem; border-radius: 999px;
  background: rgba(5, 6, 11, .62); border: 1px solid var(--hair-2);
  backdrop-filter: blur(6px);
}
.g-body { padding: 1.05rem 1.15rem 1.25rem; display: flex; flex-direction: column; gap: .38rem; }
.g-name {
  font-family: var(--fd); font-weight: 600; font-size: 1.02rem; letter-spacing: -.01em; line-height: 1.3;
  transition: color .4s;
}
.g-card:hover .g-name { color: var(--beige-2); }
.g-desc {
  color: var(--muted); font-size: .8rem; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.56em;
}
.g-price {
  margin-top: .35rem; padding-top: .7rem; border-top: 1px solid var(--hair-2);
  font-family: var(--fd); font-weight: 600; font-size: 1.05rem; color: var(--beige);
  font-variant-numeric: tabular-nums; text-align: right;
}
.g-price small { font-size: .62em; color: var(--muted-2); margin-right: .35em; letter-spacing: .1em; }
.g-card--soon .g-price { color: var(--muted-2); font-size: .82rem; letter-spacing: .1em; }

/* Fuß: Hinweis + Fortschrittsbalken */
.gal-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; margin-top: .4rem;
}
.rail-note { font-size: .78rem; color: var(--muted-2); max-width: 52ch; line-height: 1.7; margin: 0; }
.gal-bar { flex: 0 0 clamp(120px, 18vw, 220px); height: 2px; background: var(--hair-2); border-radius: 2px; overflow: hidden; }
.gal-bar i { display: block; height: 100%; width: 12%; background: var(--beige); border-radius: 2px; transition: width .35s var(--ease), margin-left .35s var(--ease); }

/* ---------- After Dark ---------- */
.afterdark {
  position: relative; padding: clamp(4rem, 9vh, 7rem) 0 clamp(3rem, 6vh, 5rem);
  /* Keine eigene Fläche mehr: jede deckende Sektionsfarbe schneidet den
     durchgehenden Hintergrund ab und erzeugt genau die harte Kante zwischen
     den Abschnitten. Der Schein läuft jetzt ohne Unterbrechung durch. */
  background: transparent;
  overflow: hidden;
}
.ad-glow {
  position: absolute; left: 50%; top: 30%; width: 120vw; height: 80vh;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(199, 180, 137, .07), transparent 70%);
}
.ad-head { position: relative; z-index: 2; }

/* ---------- After Dark: Linsen-Enthuellung (Framer-Komponente) ----------
   Volle Breite, randlos. Bildformat folgt den Vorlagen (16:9), damit die
   Aufnahme nicht angeschnitten wird. */
.ad-reveal { margin: clamp(3rem, 7vh, 5.5rem) 0 clamp(2rem, 4vh, 3rem); }
.ad-reveal-media {
  width: min(1240px, 92vw); margin: 0 auto;   /* gleiche Breite wie der restliche Inhalt */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--hair-2);
  border-radius: 1.6rem;
  background: var(--bg-2);
}
.ad-reveal figcaption {
  margin: 1.1rem auto 0; width: min(1240px, 92vw);
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500;
  color: var(--muted-2);
}
/* Touch: keine Maus, keine Linse — das Tagesbild bleibt einfach stehen. */
@media (hover: none) {
  .ad-reveal figcaption { display: none; }
  .ad-reveal-media { cursor: default; }
}

.ad-times {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--hair-2); border-block: 1px solid var(--hair-2);
  position: relative; z-index: 2; margin-top: 2rem;
}
.ad-time {
  background: var(--bg-2); padding: 2.1rem 1.6rem;
  display: flex; flex-direction: column; gap: .4rem;
}
.ad-time b { font-family: var(--fd); font-weight: 600; font-size: 1.5rem; color: var(--beige-2); }
.ad-time span { font-size: .74rem; text-transform: uppercase; letter-spacing: .16em; color: var(--muted-2); }

/* ---------- Events: Ticket-Wand mit Abendbildern ----------
   Bild liegt hinter jedem Balken. Normal deckt ein dunkles Panel die Karte
   (Bild schimmert durch); Hover schiebt das Panel nach unten raus und das
   ganze Bild steht frei. */
.ticket-wall { display: flex; flex-direction: column; gap: 1.1rem; }
.ticket {
  display: block; position: relative; overflow: hidden;
  height: clamp(180px, 22vh, 240px);
  border: 1px solid var(--hair-2); border-radius: 1.3rem;
  /* Beim Überfahren wächst die Karte nach unten auf und gibt das Bild frei */
  transition: height .7s var(--ease), border-color .7s var(--ease);
}
.ticket:hover { height: min(64vh, 600px); border-color: rgba(199, 180, 137, .38); }
.tk-bg { position: absolute; inset: 0; z-index: 1; }
.tk-bg img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.04);
  transition: transform 1.4s var(--ease);
}
.ticket:hover .tk-bg img { transform: scale(1); }
.tk-panel {
  /* Das Panel behält die Balkenhöhe, auch wenn die Karte aufgeht —
     sonst würde es mitwachsen und das Bild weiter verdecken. */
  position: absolute; left: 0; right: 0; top: 0; z-index: 2;
  display: grid; grid-template-columns: 150px 1.1fr 1.3fr auto;
  align-items: center; gap: 2.4rem;
  padding: 2.6rem clamp(1.6rem, 3vw, 2.6rem);
  /* Kein backdrop-filter: der Weichzeichner müsste während der Panel-Fahrt
     bei jedem Bild neu gerechnet werden. Der Verlauf allein reicht. */
  /* geschlossen: das Bild schimmert durch, bleibt aber ruhig im Hintergrund */
  background: linear-gradient(180deg, rgba(5, 6, 11, .74), rgba(5, 6, 11, .52));
  transition: opacity .7s var(--ease), background .7s var(--ease);
  height: clamp(180px, 22vh, 240px);
}
/* Überfahren: die dunkle Fläche löst sich auf, das Bild bleibt stehen und
   die Karte wächst nach unten auf. Kein Wegschieben, kein Springen. */
.ticket:hover .tk-panel { background: linear-gradient(180deg, rgba(5, 6, 11, .12), rgba(5, 6, 11, 0)); }
.ticket:hover .tk-day, .ticket:hover .tk-name,
.ticket:hover .tk-desc, .ticket:hover .tk-cta { text-shadow: 0 1px 3px rgba(2, 3, 8, .85), 0 2px 14px rgba(2, 3, 8, .7); }
.ticket:hover .tk-desc { color: rgba(248, 246, 240, .92); }
/* Weicher Fuß über der ganzen Karte — gibt der Beschriftung Grund,
   wenn die Fläche weg ist, und wirkt wie eine Lichtkante. */
.ticket::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 6, 11, 0), rgba(5, 6, 11, .55));
  opacity: 0; transition: opacity .7s var(--ease);
}
.ticket:hover::after { opacity: 1; }
.tk-day { text-transform: uppercase; letter-spacing: .16em; font-size: .64rem; font-weight: 500; color: var(--beige); }
.tk-name { font-family: var(--fd); font-weight: 600; font-size: clamp(1.5rem, 2.8vw, 2.2rem); line-height: 1.12; letter-spacing: -.015em; }
.tk-desc { color: var(--muted); font-size: .9rem; }
.tk-cta {
  text-transform: uppercase; letter-spacing: .16em; font-size: .64rem; font-weight: 500;
  border: 1px solid var(--hair); border-radius: 99px; padding: .6rem 1.3rem;
  white-space: nowrap;
}
/* Touch: kein Hover — Panel bleibt stehen, Bild schimmert dauerhaft durch. */
@media (hover: none) {
  .ticket:hover .tk-panel { background: linear-gradient(180deg, rgba(5, 6, 11, .82), rgba(5, 6, 11, .68)); }
  .ticket:hover { height: clamp(180px, 22vh, 240px); }
}

/* ---------- Reserve: Empfang statt Formular ----------
   Ein Frame aus dem Film liegt sehr dunkel im Hintergrund und schließt den
   Bogen zur Fahrt. Kein backdrop-filter: die Karte scrollt über wechselnden
   Grund, ein Weichzeichner müsste dabei laufend neu gerechnet werden. */
.reserve { position: relative; padding: clamp(5rem, 11vh, 9rem) 0 clamp(4rem, 9vh, 7rem); overflow: hidden; }
.reserve-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7,7,13,.94) 0%, rgba(7,7,13,.86) 45%, rgba(7,7,13,.96) 100%),
    url("../frames/f_1288.jpg") center 38% / cover no-repeat;
}
.reserve .wrap { position: relative; z-index: 2; }

.reserve-head { text-align: center; margin-bottom: clamp(3rem, 7vh, 5rem); }
.reserve-head .lead { margin-inline: auto; max-width: 56ch; }

.reserve-grid {
  display: grid; grid-template-columns: 1fr clamp(360px, 38%, 500px);
  gap: clamp(2.5rem, 5vw, 5rem); align-items: start;
}

/* Linke Spalte: Fakten als typografische Zeilen */
.reserve-facts { display: flex; flex-direction: column; }
.fact {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: .2rem 1rem; padding: 1.5rem 0;
  border-bottom: 1px solid var(--hair-2);
}
.fact:first-child { padding-top: 0; }
.fact-k {
  grid-column: 1 / -1;
  text-transform: uppercase; letter-spacing: .24em; font-size: .58rem; font-weight: 500;
  color: var(--beige); margin-bottom: .55rem;
}
.fact-v {
  font-family: var(--fd); font-weight: 600; letter-spacing: -.012em;
  font-size: clamp(1.25rem, 2.2vw, 1.85rem); line-height: 1.2;
}
.fact-n { grid-column: 1 / -1; color: var(--muted-2); font-size: .82rem; margin-top: .45rem; }
.fact-go {
  font-style: normal; color: var(--beige-2); font-size: 1rem;
  transition: transform .5s var(--ease), color .5s var(--ease);
}
.fact--link { text-decoration: none; }
.fact--link:hover .fact-v { color: var(--beige-2); }
.fact--link:hover .fact-go { transform: translate(3px, -3px); color: var(--beige); }

/* Rechte Spalte: die Reservierungskarte */
.res-card {
  position: relative; border-radius: 1.6rem;
  border: 1px solid rgba(255, 255, 255, .1);
  background: linear-gradient(180deg, rgba(31, 33, 59, .5), rgba(11, 13, 24, .72));
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .07);
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
}
.res-card-head { padding-bottom: 1.4rem; border-bottom: 1px solid var(--hair-2); margin-bottom: 1.6rem; }
.res-eyebrow {
  display: block; text-transform: uppercase; letter-spacing: .28em;
  font-size: .58rem; font-weight: 500; color: var(--beige); margin-bottom: .8rem;
}
.res-lead { color: var(--muted); font-size: .88rem; line-height: 1.65; }

.res-form { display: flex; flex-direction: column; gap: 1.15rem; }
.rf-field { display: flex; flex-direction: column; gap: .45rem; }
.rf-field label, .rf-label {
  text-transform: uppercase; letter-spacing: .2em; font-size: .56rem; font-weight: 500;
  color: var(--muted-2);
}
.rf-field input, .rf-field textarea {
  width: 100%; background: transparent; color: var(--ink);
  border: 0; border-bottom: 1px solid rgba(255, 255, 255, .16);
  padding: .55rem 0; font-size: .95rem; font-family: inherit;
  transition: border-color .45s var(--ease);
}
.rf-field textarea { resize: vertical; line-height: 1.6; }
.rf-field ::placeholder { color: rgba(244, 241, 232, .3); }
.rf-field input:focus, .rf-field textarea:focus { outline: none; border-bottom-color: var(--beige); }
.rf-field input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .45; cursor: pointer; }

.rf-block { display: flex; flex-direction: column; gap: .6rem; }
.rf-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.rf-chip {
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 99px;
  padding: .5rem .95rem; font-size: .78rem; letter-spacing: .02em;
  color: var(--muted); background: rgba(255, 255, 255, .03);
  transition: background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
.rf-chip:hover { border-color: rgba(199, 180, 137, .5); color: var(--beige-3); }
.rf-chip.active {
  background: var(--beige); border-color: var(--beige); color: #05060b; font-weight: 500;
}

.res-submit {
  margin-top: .6rem; width: 100%;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem;
  border-radius: 99px; padding: .95rem 1rem .95rem 1.6rem;
  background: var(--beige); color: #05060b;
  text-transform: uppercase; letter-spacing: .16em; font-size: .74rem; font-weight: 500;
  transition: background .5s var(--ease), transform .5s var(--ease);
}
.res-submit i {
  font-style: normal; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(5, 6, 11, .14); transition: transform .5s var(--ease);
}
.res-submit:hover { background: var(--beige-3); }
.res-submit:hover i { transform: translate(2px, -2px); }
.res-submit:active { transform: scale(.99); }
.res-note { color: var(--muted-2); font-size: .74rem; text-align: center; margin-top: .3rem; }

footer { position: relative; padding-top: clamp(2.6rem, 6vh, 4.5rem); overflow: hidden; }
.foot-giant {
  font-family: var(--fd); font-weight: 600;
  font-size: clamp(3rem, 10.5vw, 10.5rem); line-height: 1; letter-spacing: -.02em;
  text-align: center; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .1);
  user-select: none; margin-bottom: clamp(3rem, 7vh, 5rem);
  transition: color 1.2s var(--ease);
}
.foot-giant:hover { color: rgba(255, 255, 255, .05); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; padding-bottom: 4rem; }
.foot-logo { font-family: var(--fd); font-weight: 600; font-size: 1.25rem; margin-bottom: 1rem; }
.foot-brand p { color: var(--muted); font-size: .9rem; max-width: 38ch; }
.foot-col { display: flex; flex-direction: column; gap: .7rem; font-size: .9rem; color: var(--muted); }
.foot-col h5 {
  color: var(--ink); font-weight: 500; text-transform: uppercase;
  letter-spacing: .16em; font-size: .62rem; margin-bottom: .5rem;
}
.foot-col a { width: max-content; border-bottom: 1px solid transparent; transition: color .4s, border-color .4s; }
.foot-col a:hover { color: var(--beige); border-color: var(--beige); }
.foot-meta {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1.7rem 0 2rem; font-size: .76rem; color: var(--muted-2);
  border-top: 1px solid var(--hair-2);
}

/* ---------- Scroll-Reveal-Basis ---------- */
.sr { opacity: 0; transform: translateY(34px); filter: blur(6px); }
.sr.done { opacity: 1; transform: none; filter: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  /* Reservation-Pill bleibt auch mobil neben dem Burger — kompakter und
     OHNE backdrop-filter (Weichzeichner über dem scrubbenden Canvas =
     das bekannte Gift); deckende Fläche wie beim Burger. */
  .nav { padding: 1.1rem 1.2rem; }
  .nav-reserve .m-inner {
    padding: .3rem .3rem .3rem 1rem; font-size: .6rem; gap: .6rem;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: rgba(5, 6, 11, .62); border-color: rgba(255, 255, 255, .22);
  }
  .nav-reserve .pill-ico { width: 1.7rem; height: 1.7rem; }
  .film-cue { display: none; }
  /* Kein backdrop-filter über dem scrubbenden Canvas: der Weichzeichner
     müsste auf dem Handy bei JEDEM Frame neu gerechnet werden (das bekannte
     Gift). Deckendere Fläche sieht gleich aus und kostet nichts. */
  .hero-strip { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(2, 4, 14, .72); }
  .beat { width: min(30rem, 84vw); }
  .beat.b-bl, .beat.b-br { bottom: clamp(5.5rem, 12vh, 8rem); }
  .signatures { grid-template-columns: 1fr; }
  .sig-card--b { transform: none; }
  .bar-split { grid-template-columns: 1fr; gap: 1.8rem; }
  .bar-cats { flex-direction: row; flex-wrap: wrap; gap: .4rem 1.4rem; }
  .bar-cat { border-bottom: 0; padding: .3rem 0; }
  .bar-cat.active i, .bar-cat:hover i { transform: none; }
  .bar-cat::before { display: none; }
  .bar-rail .rail-note { display: none; }
  .bar-gal .g-card { width: 62vw; max-width: 240px; }
  .gal-head { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .gal-nav { display: none; }
  .gal-tab i { font-size: 1.3rem; }
  .g-card { width: 74vw; max-width: 300px; }
  .gal-foot { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .gal-bar { width: 100%; flex: 0 0 auto; }
  .tk-panel { grid-template-columns: 1fr; gap: .6rem; padding: 1.6rem 1.4rem; align-content: center; }
  .tk-cta { width: max-content; margin-top: .6rem; }
  .reserve-grid { grid-template-columns: 1fr; }
  .f-split { grid-template-columns: 1fr; }
  .ad-times { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; gap: 2rem; }
  .ghost-num { display: none; }
}
/* Handys nutzen das Hochkant-Frame-Set — auch für den Reserve-Hintergrund,
   statt dafür extra einen 1920er-Desktop-Frame zu laden.
   frames-m/f_0644 = derselbe Moment wie frames/f_1288. */
@media (max-width: 500px) and (orientation: portrait) {
  .reserve-bg {
    background:
      linear-gradient(180deg, rgba(7,7,13,.94) 0%, rgba(7,7,13,.86) 45%, rgba(7,7,13,.96) 100%),
      url("../frames-m/f_0644.jpg") center 38% / cover no-repeat;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .sr { opacity: 1; transform: none; filter: none; }
}