/* =========================================================================
   ZUNDER — gedruckte Verkostungs-Zine, jetzt als butterweiche Scroll-Seite
   Engine gespiegelt von Auréa: ScrollSmoother + pinned Canvas-Film + Reveals.
   Look bleibt: warmes Druckpapier, Playfair/Caveat/Space Mono, Ember/Gold.
   Alle Farben leben in :root. Kein Hex außerhalb. SVG nutzt currentColor.
   ========================================================================= */

:root{
  /* --- Palette: warmes Druckpapier, kein Schwarz --- */
  --paper:#E8DFC8;
  --paper-2:#EDE6D6;
  --ink:#211C15;
  --ember:#9B3B22;
  --gold:#B08D4F;
  --soft:#6B5D48;

  /* abgeleitete Töne (nur aus obigen gemischt via color-mix) */
  --hairline: color-mix(in srgb, var(--ink) 22%, transparent);
  --hairline-soft: color-mix(in srgb, var(--ink) 12%, transparent);
  --ink-dim: color-mix(in srgb, var(--ink) 62%, var(--paper));
  --plate-shadow: color-mix(in srgb, var(--ink) 40%, transparent);
  --scrim: color-mix(in srgb, var(--ink) 60%, transparent);

  /* Typo-Rollen */
  --font-display:"Playfair Display", Georgia, serif;   /* Überschriften */
  --font-hand:"Caveat", "Segoe Script", cursive;        /* Randnotizen */
  --font-mono:"Space Mono", ui-monospace, monospace;    /* Zahlen/Meta */

  --pad:clamp(1.5rem, 5vw, 6rem);
}

/* ---------- Self-hosted Fonts (woff2, latin) — kein CDN, font-display:swap ---------- */
@font-face{
  font-family:"Playfair Display"; font-style:normal; font-weight:400 900;
  font-display:swap; src:url("assets/fonts/playfair-display.woff2") format("woff2");
}
@font-face{
  font-family:"Playfair Display"; font-style:italic; font-weight:400 600;
  font-display:swap; src:url("assets/fonts/playfair-display-italic.woff2") format("woff2");
}
@font-face{
  font-family:"Caveat"; font-style:normal; font-weight:400 700;
  font-display:swap; src:url("assets/fonts/caveat.woff2") format("woff2");
}
@font-face{
  font-family:"Space Mono"; font-style:normal; font-weight:400;
  font-display:swap; src:url("assets/fonts/space-mono-400.woff2") format("woff2");
}
@font-face{
  font-family:"Space Mono"; font-style:normal; font-weight:700;
  font-display:swap; src:url("assets/fonts/space-mono-700.woff2") format("woff2");
}
@font-face{
  font-family:"Space Mono"; font-style:italic; font-weight:400;
  font-display:swap; src:url("assets/fonts/space-mono-italic.woff2") format("woff2");
}

/* ---------- Reset ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ width:100%; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-display);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  cursor:none;                     /* eigener Tinten-Cursor */
}
#smooth-wrapper{ overflow:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.grain-def{ position:absolute; }

.mono{ font-family:var(--font-mono); }
.caveat{ font-family:var(--font-hand); }

/* ---------- gemeinsame Papier-Textur ---------- */
.paper-grain{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.5;                       /* mix-blend entfernt: kein Full-Screen-Composite-Tax */
  background:
    repeating-linear-gradient(122deg,
      color-mix(in srgb, var(--ink) 4%, transparent) 0 1px,
      transparent 1px 3px),
    repeating-linear-gradient(38deg,
      color-mix(in srgb, var(--ink) 3%, transparent) 0 1px,
      transparent 1px 4px);
}
.paper-grain::after{
  content:""; position:absolute; inset:0;
  background:var(--paper);
  filter:url(#paperNoise);
  opacity:.6;
}
.page-vignette{
  position:fixed; inset:0; z-index:61; pointer-events:none;
  /* mix-blend entfernt: multiply-Look direkt in die Alpha der Ink-Stops gebacken */
  background:
    radial-gradient(140% 120% at 50% 50%,
      transparent 55%,
      color-mix(in srgb, var(--ink) 30%, transparent) 100%);
}

/* ═══════════ PRELOADER — gated auf echten Frame-Load ═══════════ */
.loader{
  position:fixed; inset:0; z-index:500;
  background:radial-gradient(120% 90% at 50% 40%, var(--paper-2), var(--paper) 72%);
  display:flex; align-items:center; justify-content:center;
}
.loader__inner{ display:flex; flex-direction:column; align-items:center; gap:1.4rem; }
.loader__brand{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(2.6rem,8vw,5rem); letter-spacing:.06em; color:var(--ink);
}
.loader__bar{ width:min(46vw,320px); height:1px; background:var(--hairline); overflow:hidden; }
.loader__fill{ display:block; height:100%; width:0%; background:var(--ember); }
.loader__pct{ font-size:.72rem; letter-spacing:.32em; color:var(--soft); font-variant-numeric:tabular-nums; }
.loader__note{ font-size:1.15rem; color:var(--gold); transform:rotate(-2deg); }
.loader.is-done{ pointer-events:none; }

/* ═══════════ SCROLL PROGRESS ═══════════ */
.progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:120;
  background:color-mix(in srgb, var(--ink) 12%, transparent); }
.progress__bar{ display:block; height:100%; width:100%;
  transform:scaleX(0); transform-origin:left; will-change:transform;
  background:linear-gradient(90deg, var(--ember), var(--gold)); }

/* =========================================================================
   BUCH-CONTAINER
   ========================================================================= */
#book{ position:relative; z-index:1; }

/* Editorial-Bausteine */
.eyebrow, .kicker{
  font-size:clamp(.62rem,.9vw,.78rem);
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--soft);
}
.kicker{ letter-spacing:.28em; }
.ord{ font-variant-position:super; font-size:.7em; vertical-align:.4em; }

.h-display{
  font-family:var(--font-display);
  font-weight:800; line-height:.94;
  letter-spacing:-.01em; margin:0;
}
.h-display em{ font-style:italic; font-weight:600; color:var(--ember); }
.h-display .line{ overflow:hidden; }

/* Reveal-Helfer: SplitText clippt Zeilen sauber */
.split-lines .line{ display:block; overflow:hidden; }
.img-clip{ overflow:hidden; }
/* .reveal-up: will-change entfernt — GSAP promotet nur während der aktiven Tween */

/* =========================================================================
   HERO — pinned, scroll-scrubbed Canvas-Film
   ========================================================================= */
.film{ position:relative; }
.film__stage{
  position:relative; height:100vh; width:100%; overflow:hidden;
  background:var(--ink);
}
.film__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.film__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--ink) 46%, transparent) 0%,
      transparent 22%, transparent 60%,
      color-mix(in srgb, var(--ink) 58%, transparent) 100%),
    radial-gradient(ellipse 66% 56% at 50% 50%,
      color-mix(in srgb, var(--ink) 40%, transparent), transparent 82%);
}
.film .ember-glow{ z-index:1; }

.ornframe{
  position:absolute; inset:clamp(1rem,3.5vw,3rem);
  color:var(--gold); pointer-events:none; z-index:2;
}
.ornframe-svg{ width:100%; height:100%; }
.ornframe--light{ color:color-mix(in srgb, var(--paper) 72%, var(--gold)); opacity:.42; }

/* Hero-Beats — über dem scrubbenden Gericht, per Scroll ein-/ausgeblendet */
.beat{
  position:absolute; z-index:3; pointer-events:none;
  left:0; right:0; top:50%; transform:translateY(-50%);
  text-align:center; padding:0 var(--pad);
  display:grid; justify-items:center; gap:.4rem;
}
/* Radiale Tinten-Blende hinter ALLEN zentrierten Beats — Lesbarkeit über dem
   scrubbenden Gericht (vorher nur der Brand-Beat). Soft-Alpha, kein blur(). */
.beat--brand::before, .beat--c::before{
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(72rem,96vw); height:190%; z-index:-1; pointer-events:none;
  /* weichere Alpha-Stops ersetzen das teure blur(12px) */
  background:radial-gradient(ellipse 52% 48% at 50% 50%,
    color-mix(in srgb, var(--ink) 70%, transparent) 30%,
    color-mix(in srgb, var(--ink) 42%, transparent) 58%, transparent 84%);
}
.beat--c::before{
  width:min(60rem,94vw); height:150%;
  background:radial-gradient(ellipse 50% 46% at 50% 50%,
    color-mix(in srgb, var(--ink) 58%, transparent) 26%,
    color-mix(in srgb, var(--ink) 34%, transparent) 56%, transparent 82%);
}
.cover-orn{ color:var(--ember); font-size:1.4rem; text-shadow:0 2px 20px color-mix(in srgb, var(--ink) 70%, transparent); }
.cover-title{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(4rem, 18vw, 14rem);
  line-height:.82; margin:.05em 0; letter-spacing:.02em;
  color:var(--paper);
  text-shadow:0 2px 34px color-mix(in srgb, var(--ink) 74%, transparent);
}
.cover-title .char{ display:inline-block; }
.eyebrow{ color:color-mix(in srgb, var(--paper) 82%, transparent);
  text-shadow:0 2px 18px color-mix(in srgb, var(--ink) 70%, transparent); }
.cover-sub{
  font-size:clamp(1.6rem,4vw,2.6rem);
  color:color-mix(in srgb, var(--gold) 55%, var(--paper));
  transform:rotate(-2deg);
  text-shadow:0 2px 22px color-mix(in srgb, var(--ink) 60%, transparent);
}
.flourish{ width:min(52vw,320px); color:color-mix(in srgb, var(--paper) 62%, var(--gold)); margin:.2rem 0; }

.beat__line{
  font-family:var(--font-display); font-weight:800; line-height:.98;
  font-size:clamp(2.4rem,6vw,5rem); color:var(--paper);
  text-shadow:0 1px 2px color-mix(in srgb, var(--ink) 85%, transparent),
              0 2px 16px color-mix(in srgb, var(--ink) 60%, transparent),
              0 0 46px color-mix(in srgb, var(--ink) 55%, transparent);
}
.beat__line--big{ font-size:clamp(3rem,8vw,6.6rem); }
.beat__line em{ font-style:italic; font-weight:600; color:color-mix(in srgb, var(--ember) 70%, var(--gold)); }

/* ---- Beat-Positionsanker: NICHT alles zentriert (Client-Wunsch) ---- */
/* CENTER bleibt Default (top:50% / translateY(-50%) / text-align:center). */
.beat--lower-left{
  top:auto; bottom:clamp(3.5rem,10vh,7rem); transform:none;
  justify-items:start; text-align:left;
  padding-left:var(--pad); padding-right:var(--pad);
}
.beat--lower-left .beat__line{ max-width:min(46rem,88vw); }
.beat--upper-right{
  top:clamp(3.5rem,12vh,7rem); transform:none;
  justify-items:end; text-align:right;
  padding-left:var(--pad); padding-right:var(--pad);
}
.beat--upper-right .beat__line{ max-width:min(44rem,88vw); }

/* ---- Lokale Scrims pro Position — Lesbarkeit über Guss/Raum/Bar ---- */
/* Zentrierte Beats behalten die radiale Blende (.beat--brand/.beat--c ::before). */
.beat--tl::before, .beat--tr::before{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  width:min(56rem,92vw); height:200%;
}
.beat--tl::before{
  left:calc(var(--pad) * -0.4); bottom:-40%;
  background:radial-gradient(ellipse 60% 50% at 22% 78%,
    color-mix(in srgb, var(--ink) 66%, transparent) 0%,
    color-mix(in srgb, var(--ink) 38%, transparent) 46%, transparent 76%);
}
.beat--tr::before{
  right:calc(var(--pad) * -0.4); top:-40%;
  background:radial-gradient(ellipse 60% 50% at 78% 26%,
    color-mix(in srgb, var(--ink) 64%, transparent) 0%,
    color-mix(in srgb, var(--ink) 36%, transparent) 46%, transparent 76%);
}
/* Ankunft über der hellen Bar-Imagery: kräftigeres, weiches Scrim */
.beat--arrival::before{
  width:min(60rem,96vw);
  background:radial-gradient(ellipse 62% 54% at 22% 78%,
    color-mix(in srgb, var(--ink) 78%, transparent) 0%,
    color-mix(in srgb, var(--ink) 50%, transparent) 48%, transparent 80%);
}
/* Wipe-right braucht einen Masken-Clip, der per JS animiert wird */
.beat--tr .beat__line{ will-change:clip-path; }

.film__hint{
  position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%);
  width:1px; height:56px; overflow:hidden; z-index:3;
  background:color-mix(in srgb, var(--paper) 30%, transparent);
}
.film__hint span{
  position:absolute; top:-40%; left:0; width:100%; height:40%;
  background:var(--paper); animation:hint 2.2s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes hint{ 0%{top:-40%} 60%,100%{top:110%} }

/* =========================================================================
   SECTIONS — vertikaler Fluss, jede full-viewport-ish im Zine-Look
   ========================================================================= */
.section{
  position:relative; z-index:1;
  min-height:100vh;
  display:grid; place-items:center;
  padding:clamp(4rem, 10vh, 8rem) var(--pad);
  background:linear-gradient(105deg, var(--paper-2), var(--paper) 60%);
  overflow:hidden;
}
/* Buchfalz-Schatten links: es ist eine gebundene Seite */
.section::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:14%;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--ink) 12%, transparent), transparent);
  pointer-events:none; z-index:0;
}

/* =========================================================================
   II — VORWORT
   ========================================================================= */
.spread--vorwort{ align-items:center; }
.vor-grid{
  width:min(1100px,92vw);
  display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem,5vw,5rem);
  align-items:start; position:relative; z-index:2;
}
.vor-head .h-display{ font-size:clamp(2.6rem,7vw,6rem); max-width:12ch; text-wrap:balance; }
.vor-body{ padding-top:.6rem; }
.vor-body p{ font-size:clamp(1rem,1.35vw,1.18rem); line-height:1.6; margin:0 0 1rem; color:var(--ink); font-family:var(--font-display); font-weight:400; }
.dropcap{
  float:left; font-family:var(--font-display); font-weight:800;
  font-size:4.4em; line-height:.72; padding:.02em .12em 0 0; color:var(--ember);
}
.vor-margin{
  margin:1.8rem 0 0; font-size:clamp(1.3rem,2.6vw,1.9rem); color:var(--gold);
  transform:rotate(-2deg); text-align:right; line-height:1.15;
  pointer-events:none;
}

/* Passepartout-Rahmen (Vorwort-Foto etc.) */
.mat{
  padding:clamp(.6rem,1.4vw,1.1rem); background:var(--paper-2);
  box-shadow:0 24px 60px -20px var(--plate-shadow);
  border:1px solid var(--hairline-soft);
}
.mat img{ filter:saturate(.9) contrast(1.05); }
.kicker.light{ color:color-mix(in srgb, var(--paper-2) 82%, var(--gold)); }

/* =========================================================================
   III — DAS MENÜ (Letterpress-Karte, type-only)
   ========================================================================= */
.spread--menu{ position:relative; }
.spread--menu .courses{ align-self:center; }
.menu-head{ text-align:center; }
.menu-head .h-display{ font-size:clamp(2rem,5vw,4rem); }
.menu-sub{ font-size:clamp(1.1rem,2.4vw,1.6rem); color:var(--gold); transform:rotate(-1.5deg); }

.spread--menu .ember-glow{ position:absolute; }
.spread--menu{
  grid-template-rows:auto 1fr auto auto; gap:clamp(.6rem,1.6vh,1.2rem);
  align-content:center; width:min(820px,90vw);
}
.courses{ list-style:none; margin:.5rem 0 0; padding:0;
  display:grid; gap:clamp(.5rem,1.4vh,1.1rem); align-content:center; width:100%; }
.course{ display:grid; grid-template-columns:2.4rem 1fr; gap:clamp(1rem,2.4vw,2rem); align-items:baseline;
  padding-bottom:clamp(.5rem,1.2vh,.9rem); border-bottom:1px solid var(--hairline-soft); }
.course:last-child{ border-bottom:none; }
.c-num{ color:var(--ember); font-size:.92rem; letter-spacing:.14em; padding-top:.35em; }
.c-name{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.2rem,2.2vw,1.7rem);
  margin:0; letter-spacing:.005em; }
.c-desc{ margin:.15rem 0 0; color:var(--ink-dim); font-size:clamp(.85rem,1.15vw,1rem); font-family:var(--font-display); font-weight:400; }
.c-desc em{ font-style:italic; }

.menu-divider{ width:100%; color:var(--gold); }
.menu-foot{ display:flex; justify-content:space-between; align-items:baseline;
  gap:1rem; flex-wrap:wrap; color:var(--soft); font-size:.72rem; letter-spacing:.18em; position:relative; z-index:2; }
.price{ font-size:1.1rem; letter-spacing:.06em; color:var(--ember); }
.price .per{ color:var(--soft); font-size:.66rem; letter-spacing:.14em; }

/* =========================================================================
   VI — SIGNATUR (Video, wie ein Foto aufs Papier montiert)
   ========================================================================= */
.spread--signatur{ grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,5rem);
  align-items:center; width:min(1100px,92vw); }
.sig-plate{ position:relative; justify-self:center; transform:rotate(-1.5deg); }
.sig-mat{
  padding:clamp(1rem,2vw,1.8rem) clamp(1rem,2vw,1.8rem) clamp(3rem,5vw,4rem);
  background:var(--paper-2);
  box-shadow:0 34px 70px -24px var(--plate-shadow);
  border:1px solid var(--hairline-soft);
}
.sig-video{
  width:min(42vw,460px); aspect-ratio:4/5; object-fit:cover; display:block;
  background:var(--ink); filter:saturate(.95) contrast(1.04);
}
.sig-tape{ position:absolute; width:88px; height:26px;
  background:color-mix(in srgb, var(--gold) 40%, var(--paper-2));
  opacity:.7; mix-blend-mode:multiply; }
.sig-tape--tl{ top:-10px; left:24px; transform:rotate(-24deg); }
.sig-tape--br{ bottom:34px; right:20px; transform:rotate(-18deg); }

.sig-side{ position:relative; z-index:2; }
.sig-side .h-display{ font-size:clamp(2.8rem,6vw,5rem); }
.sig-note{ font-size:clamp(1.3rem,2.6vw,1.8rem); color:var(--gold); margin:.6rem 0; line-height:1.15; transform:rotate(-2deg); }
.sig-desc{ font-size:clamp(.95rem,1.3vw,1.12rem); line-height:1.55; color:var(--ink); max-width:34ch; font-family:var(--font-display); font-weight:400; }
.sig-side .price{ margin-top:1rem; display:inline-block; }

/* =========================================================================
   V — RESERVIERUNG (Rückumschlag)
   ========================================================================= */
.spread--reservierung{
  background:radial-gradient(120% 100% at 50% 40%, var(--paper-2), var(--paper) 72%);
  text-align:center; align-content:center;
}
.res-wash{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.res-wash img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.20; mix-blend-mode:multiply; filter:sepia(.25) saturate(1.2) contrast(1.02); }
.res-frame{
  position:absolute; inset:clamp(1.4rem,4vw,3.2rem);
  border:1px solid var(--hairline); z-index:1;
}
.res-frame::after{ content:""; position:absolute; inset:6px; border:1px solid var(--hairline-soft); }
.res-inner{ position:relative; z-index:2; display:grid; justify-items:center; gap:.55rem; max-width:640px; margin:0 auto; }
.res-head{ font-size:clamp(2.6rem,7vw,5.5rem); }
.res-lede{ font-size:clamp(1rem,1.4vw,1.18rem); line-height:1.6; color:var(--ink); max-width:46ch; font-family:var(--font-display); font-weight:400; }
.res-ctawrap{ margin-top:.8rem; }
.res-cta{
  border:1px solid var(--ink); color:var(--ink); display:inline-block;
  padding:.9rem 1.6rem; letter-spacing:.22em;
  text-transform:uppercase; font-size:.78rem;
  transition:background .3s, color .3s, border-color .3s;
}
.res-cta:hover{ background:var(--ember); color:var(--paper-2); border-color:var(--ember); }
.res-hand{ font-size:clamp(1.3rem,2.6vw,1.8rem); color:var(--gold); transform:rotate(-3deg); }
.colophon{ margin-top:1rem; color:var(--soft); font-size:.68rem; letter-spacing:.1em; line-height:1.7; }
.colophon a{ color:var(--ember); text-decoration:none; }
.colo-dim{ color:var(--hairline); letter-spacing:.14em; margin-top:.6rem; }

/* =========================================================================
   MEDIA-ANREICHERUNG — Glut-Wash, tipped-in Fotos
   ========================================================================= */

/* ---- Glut-Glühen: sehr subtiler warmer Puls-Layer (GSAP treibt die Opazität) ---- */
.ember-glow{
  position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.18;
  /* screen-Look in die Alpha gebacken — kein Full-Section-Blend mehr beim Scroll */
  background:radial-gradient(60% 55% at 50% 78%,
    color-mix(in srgb, var(--ember) 50%, transparent), transparent 72%);
}
.ember-glow--soft{ background:radial-gradient(70% 60% at 30% 80%,
    color-mix(in srgb, var(--ember) 38%, transparent), transparent 74%); }
.ember-glow--faint{ opacity:.1; }

/* ---- „tipped-in" Foto (Vorwort) + Klebeband ---- */
.mat--tip{ transform:rotate(-2.2deg); }
.vor-photo{ position:relative; margin:1.6rem 0 0; width:min(78%,320px); }
.vor-photo .mat img{ aspect-ratio:4/3; object-fit:cover; }
.plate-cap{ margin-top:.5rem; color:var(--soft); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; }

/* =========================================================================
   AMBIENT — driftende Lichtstrahlen + schwebende Asche-Motes (subtil, GPU-only)
   ========================================================================= */
.ambient{ position:fixed; inset:0; z-index:59; pointer-events:none; overflow:hidden; }
.godray{
  position:absolute; top:-20%; height:150%; width:34vw;
  transform:rotate(9deg); transform-origin:top center; opacity:0;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--gold) 16%, transparent), transparent 62%);
  filter:blur(24px); mix-blend-mode:screen; will-change:transform,opacity;
}
.godray--a{ left:8%; }
.godray--b{ left:58%; width:26vw; transform:rotate(-7deg);
  background:linear-gradient(180deg, color-mix(in srgb, var(--ember) 12%, transparent), transparent 60%); }
.motes{ position:absolute; inset:0; }
.mote{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--gold) 70%, var(--paper)) , transparent 70%);
  opacity:0; will-change:transform,opacity;
}

/* =========================================================================
   MARQUEE — velocity-reaktives Kolumnen-Detail (Zine)
   ========================================================================= */
.marquee{
  position:relative; z-index:1; overflow:hidden;
  padding:clamp(.8rem,2.2vh,1.4rem) 0;
  background:linear-gradient(90deg, var(--paper), var(--paper-2) 50%, var(--paper));
  border-top:1px solid var(--hairline-soft); border-bottom:1px solid var(--hairline-soft);
}
.marquee__track{ display:flex; width:max-content; will-change:transform; }
.marquee__item{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.4rem,3vw,2.4rem); letter-spacing:.08em;
  color:color-mix(in srgb, var(--ink) 30%, var(--paper));
  white-space:nowrap; padding-right:.4em;
}
.marquee__orn{ color:var(--ember); padding:0 .5em; font-size:.7em; vertical-align:.15em; }

/* =========================================================================
   COUNT-UPS + neue Ornamente
   ========================================================================= */
.count{ font-variant-numeric:tabular-nums; }
.menu-topline{ width:min(200px,60%); color:var(--gold); margin:.4rem auto .1rem; display:block; }
.sig-rule{ width:100%; max-width:300px; color:var(--gold); margin:.8rem 0 .2rem; display:block; }

/* zweites tipped-in Foto (Vorwort) — Tiefen-Layering */
.vor-photo{ transform-style:preserve-3d; }
.vor-photo2{
  position:absolute; right:-14%; bottom:-22%; width:52%;
  margin:0; padding:clamp(.35rem,.9vw,.7rem); background:var(--paper-2);
  box-shadow:0 20px 46px -18px var(--plate-shadow);
  border:1px solid var(--hairline-soft); transform:rotate(3.4deg); z-index:-1;
}
.vor-photo2 img{ aspect-ratio:1/1; object-fit:cover; filter:saturate(.85) contrast(1.06); }

/* Menü-Gänge: Hover-Mikrointeraktion (nur transform/color — GPU) */
.course{ transition:color .35s ease; }
.course .c-name{ transition:transform .4s cubic-bezier(.22,1,.36,1); transform-origin:left; }
.course:hover .c-name{ transform:translateX(10px); color:var(--ember); }
.course:hover .c-num{ color:var(--gold); }

/* Res-CTA: magnetischer Button, gefüllter Sweep beim Hover */
.res-cta{ position:relative; overflow:hidden; will-change:transform; }
.res-cta::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--ember);
  transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.res-cta:hover{ color:var(--paper-2); border-color:var(--ember); background:transparent; }
.res-cta:hover::before{ transform:scaleX(1); }

/* =========================================================================
   EIGENER CURSOR — Tinten-Punkt
   ========================================================================= */
#cursor{
  position:fixed; top:0; left:0; z-index:200; pointer-events:none;
  width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%;
  background:var(--ember); mix-blend-mode:multiply;
  transition:width .2s, height .2s, background .2s, opacity .2s;
}
#cursor.is-hot{ width:34px; height:34px; margin:-17px 0 0 -17px;
  background:color-mix(in srgb, var(--gold) 55%, transparent); }
@media (hover:none){ body{cursor:auto} #cursor{display:none} }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:820px){
  .vor-grid{ grid-template-columns:1fr; gap:1.4rem; }
  .vor-margin{ transform:rotate(-2deg); text-align:left; margin-top:1rem; }
  .spread--signatur{ grid-template-columns:1fr; gap:1.6rem; }
  .sig-video{ width:min(78vw,420px); }
  .sig-side{ text-align:center; }
  .sig-desc{ margin-inline:auto; }
  .sig-rule{ margin-inline:auto; }
  .vor-photo{ width:min(70%,260px); }
  .vor-photo2{ right:-8%; bottom:-16%; width:46%; }
  .marquee__item{ font-size:clamp(1.1rem,5vw,1.6rem); }
}

/* schmaleres Buchfalz-Band auf kleinen Screens: einspaltige Copy sitzt sonst darunter */
@media (max-width:600px){
  .section::before{ width:6%;
    background:linear-gradient(90deg,
      color-mix(in srgb, var(--ink) 8%, transparent), transparent); }
}

/* =========================================================================
   REDUCED MOTION — kein Grain-Shimmer, harte Schnitte
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  #hint, .film__hint span{ animation:none; }
  .film__hint{ display:none; }
  .cover-sub, .sig-note, .res-hand, .vor-margin{ transform:none; }
  /* statischer Hero: ein repräsentativer Frame + nur der Brand-Beat sichtbar,
     die überlappenden Tagline-Beats aus (JS pinnt/scrubbt nicht). */
  .beat--brand{ opacity:1 !important; visibility:visible !important; }
  .beat--c{ display:none !important; }
  /* Ambient-Leben komplett aus: keine Motes, keine Rays, kein Laufband-Drift */
  .ambient, .godray, .motes, .mote{ display:none !important; }
  .marquee{ display:none !important; }
  .vor-photo2{ position:static; width:100%; transform:none; margin-top:1rem; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}