/* =========================================================================
   TASTE THE BRAND — V2
   Editorial one-pager. Tokens & Mechaniken aus ../_designsystem.
   Kein Framework, kein Build-Schritt.

   01 Tokens
   02 Reset & Basis
   03 Typo-Stimmen
   04 Raster, Rahmen & Folio
   05 Motion
   06 Vier-Ecken-Rahmen (sticky) & Menü
   07 Buttons & Links
   08 Abschnitte
   09 Footer
   10 Responsive
   11 Reduced Motion / Print
   ========================================================================= */

/* ── 01 Tokens ─────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Arnika Condensed';
  src: url('../fonts/Arnika-Condensed.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Outfit ist die echte Marken-Sans (variabel 100–900), selbst gehostet */
@font-face {
  font-family: 'Outfit';
  src:
    url('../fonts/Outfit-VariableFont_wght.ttf') format('truetype-variations'),
    url('../fonts/Outfit-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Cormorant Garamond ist die echte Marken-Kursive (variabel 300–700, nur
   Italic-Schnitt) und ersetzt den früheren Bodoni-Moda-Platzhalter.
   Ebenfalls selbst gehostet — die Seite lädt damit keine externen Fonts mehr. */
@font-face {
  font-family: 'Cormorant Garamond';
  src:
    url('../fonts/CormorantGaramond-Italic-VariableFont_wght.ttf') format('truetype-variations'),
    url('../fonts/CormorantGaramond-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Palette — _designsystem/tokens/colors.css */
  --ink: #0a0a08;
  --cream: #e9dbd1;
  --cream-light: color-mix(in oklch, var(--cream) 85%, white);
  --red: #d6050e;
  --red-hover: color-mix(in oklch, var(--red) 88%, black);
  --yellow: #ef9d0b;
  --yellow-hover: color-mix(in oklch, var(--yellow) 88%, black);
  --purple: #69266d;
  --blue: #0097de;
  --green: #5c8f5f;
  /* Studio-Hintergrund aus der Fotografie, heller als --green */
  --green-surface: #7fb881;

  --page: var(--cream);
  --fg: var(--ink);
  --rule: color-mix(in oklch, var(--ink) 22%, var(--cream));

  /* Familien */
  --f-loud: 'Arnika Condensed', Georgia, serif;
  --f-serif: 'Cormorant Garamond', Georgia, serif;
  --f-sans: 'Outfit', Helvetica, Arial, sans-serif;

  /* Gewichte laut Designsystem */
  --w-stamp: 800;
  --w-strong: 600;
  --w-body: 400;

  /* Vier Stimmen, vier Aufgaben — siehe README "Typografie" */
  --loud: clamp(3.25rem, 12.4vw, 15rem);
  --loud-2: clamp(2.5rem, 7.6vw, 8.5rem);
  /* Cormorant hat eine kleine x-Höhe — etwas größer gesetzt als der frühere
     Bodoni, damit die kursive Stimme optisch gleich stark bleibt. */
  --serif-lead: clamp(1.45rem, 2.95vw, 2.95rem);
  --body: clamp(0.9375rem, 0.42vw + 0.82rem, 1.125rem);
  --quiet: clamp(0.6875rem, 0.16vw + 0.64rem, 0.8125rem);

  --loud-lh: 0.82;
  /* Designsystem tokens/layout.css: --voice-loud-tracking wurde von -0.03em
     auf +0.02em gedreht, die laute Stimme läuft jetzt also leicht offen. */
  --loud-tr: 0.02em;
  --quiet-tr: 0.18em;

  /* Faux-Bold für Arnika: nur der Regular-Schnitt liegt vor (siehe README) */
  --loud-weight: 0.03em;

  /* Rahmen */
  --pad: clamp(1rem, 3.2vw, 3rem);
  --gap: clamp(1.5rem, 4vw, 5rem);
  --sec: clamp(5rem, 12vh, 11rem);
  --bar-t: 3.5rem;
  --bar-b: 5rem;

  /* Motion */
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-std: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 140ms;
  --t-std: 400ms;
  --t-slow: 900ms;

  --border-w: 2px;
  --shadow-hard: 6px 6px 0 var(--ink);
  --shadow-hard-sm: 4px 4px 0 var(--ink);
  --shadow-hard-press: 2px 2px 0 var(--ink);
}

/* Farbflächen. Jede setzt --page (Blendenfarbe der Bildaufdeckung), --fg und
   --rule mit, damit Linien und Blenden automatisch mitziehen. */
.inv {
  --page: var(--ink);
  --fg: var(--cream-light);
  --rule: color-mix(in oklch, var(--cream-light) 32%, var(--ink));
  background: var(--page);
  color: var(--fg);
}
.inv-purple {
  --page: var(--purple);
  --fg: var(--cream-light);
  --rule: color-mix(in oklch, var(--cream-light) 34%, var(--purple));
  background: var(--page);
  color: var(--fg);
}
.inv-green {
  --page: var(--green-surface);
  --fg: var(--ink);
  --rule: color-mix(in oklch, var(--ink) 30%, var(--green-surface));
  background: var(--page);
  color: var(--fg);
}
.inv-yellow {
  --page: var(--yellow);
  --fg: var(--ink);
  --rule: color-mix(in oklch, var(--ink) 30%, var(--yellow));
  background: var(--page);
  color: var(--fg);
}

/* ── 02 Reset & Basis ─────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding-bottom: var(--bar-b);
  background: var(--cream);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: var(--body);
  font-weight: var(--w-body);
  line-height: 1.5;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

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

img { height: auto; }

/* `contents` lässt das <img> direkt im Layout des Elternelements liegen —
   sonst greifen Prozenthöhen und Grid-Platzierungen nicht durch das
   <picture> hindurch. */
picture { display: contents; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

::selection {
  background: var(--red);
  color: var(--cream-light);
}

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 999;
  translate: -50% -120%;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--cream-light);
  font-size: var(--quiet);
  font-weight: var(--w-strong);
  letter-spacing: var(--quiet-tr);
  text-transform: uppercase;
  transition: translate var(--t-fast) var(--e-std);
}
.skip:focus { translate: -50% 0; }

/* ── 03 Typo-Stimmen ──────────────────────────────────────────────────── */

/* M1 · laute Stimme — die einzige große Type auf der Seite */
.loud,
.loud-2 {
  font-family: var(--f-loud);
  font-weight: 400;
  line-height: var(--loud-lh);
  letter-spacing: var(--loud-tr);
  text-transform: uppercase;
  -webkit-text-stroke: var(--loud-weight) currentColor;
  paint-order: stroke fill;
  text-wrap: balance;
}
.loud { font-size: var(--loud); }
.loud-2 { font-size: var(--loud-2); }

.hollow {
  color: transparent;
  -webkit-text-stroke: 0.014em var(--fg);
}

/* M1 · leise Stimme — Folio-Daten, Labels, Mikro-Navigation */
.quiet {
  font-size: var(--quiet);
  font-weight: var(--w-strong);
  line-height: 1.4;
  letter-spacing: var(--quiet-tr);
  text-transform: uppercase;
}

/* Datumsstempel — Outfit 800, wie „16.SEPTEMBER 2026" im Key Visual */
.stamp {
  font-weight: var(--w-stamp);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* M5 · die kursive Serif, die mit der lauten Stimme kollidiert */
.script {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
/* Die „Vol. 1"-Schnörkel behalten Schnitt und Größe in Mikro-Zeilen */
.quiet .script {
  font-size: 1.3em;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.lead {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--serif-lead);
  line-height: 1.22;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

.copy {
  max-width: 42ch;
  text-wrap: pretty;
}
.copy + .copy { margin-top: 0.8em; }

/* ── 04 Raster, Rahmen & Folio ────────────────────────────────────────── */

.frame { padding-inline: var(--pad); }

.sec {
  position: relative;
  padding-block: var(--sec);
}

/* Ankersprünge dürfen nicht unter der oberen Leiste landen */
[id] { scroll-margin-top: calc(var(--bar-t) + 1rem); }

/* M4 · edge meta grid — die Folio-Zeile ist die strukturelle Signatur */
.sec-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  border-top: 1px solid var(--rule);
  padding-top: 0.7rem;
  margin-bottom: clamp(2rem, 5vw, 4.5rem);
}

/* 12-Spalten-Raster. Die laute Stimme läuft immer über die volle Breite,
   damit die handgesetzten Zeilenumbrüche halten; Bilder brechen versetzt
   in den Textblock hinein (M6). */
.g12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 1.5rem);
  row-gap: var(--gap);
  align-items: start;
}
.g12 > .head { grid-column: 1 / -1; }
/* Grid-Items sind sonst nie schmaler als ihr Inhalt (implizites
   min-width:auto) — eine einzelne max-content-Box darin (z. B. .qs) würde
   sonst die ganze Spalte und damit die Seite aufsprengen. */
.g12 > * { min-width: 0; }

/* Fortschritts-Haarlinie */
.progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 96;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  scale: var(--p, 0) 1;
  background: var(--red);
  pointer-events: none;
}

/* ── 05 Motion ────────────────────────────────────────────────────────── */

/* Zeilenmaske für die laute Stimme; Umbrüche sind im HTML gesetzt.
   Der obere Innenabstand hält Umlautpunkte (Ü, Ö, Ä) im Sichtfeld — bei
   line-height 0.82 würde die Maske sie sonst abschneiden.

   Wichtig: `.l` selbst trägt keine Schriftgröße, sie steckt am verschachtelten
   `.loud`/`.loud-2`-Span. Ohne die :has()-Regeln unten würde das em-Padding
   gegen die (viel kleinere) geerbte Schriftgröße von `.l` rechnen — dann
   bleibt vom Puffer praktisch nichts übrig, und genau das hat die Punkte
   abgeschnitten. Die :has()-Regeln geben `.l` dieselbe Schriftgröße wie sein
   Kind, damit em wieder am richtigen Maßstab misst. */
.l {
  display: block;
  overflow: hidden;
  padding: 0.16em 0 0.06em;
  margin-top: -0.14em;
}
.l:has(.loud) { font-size: var(--loud); }
.l:has(.loud-2) { font-size: var(--loud-2); }
.l > span {
  display: block;
  translate: 0 105%;
  transition: translate var(--t-slow) var(--e-out);
  transition-delay: var(--d, 0ms);
}
.is-in .l > span { translate: 0 0; }

[data-reveal='up'] {
  opacity: 0;
  translate: 0 1.5rem;
  transition:
    opacity var(--t-std) var(--e-std) var(--d, 0ms),
    translate var(--t-slow) var(--e-out) var(--d, 0ms);
}
[data-reveal='up'].is-in {
  opacity: 1;
  translate: 0 0;
}

/* Bildaufdeckung über eine Blende, NICHT über clip-path auf dem Element
   selbst: eine auf null beschnittene Fläche meldet dem IntersectionObserver
   `intersectionRatio = 0`, er feuert dann nie und das Bild bliebe für immer
   unsichtbar (und würde wegen loading="lazy" nicht einmal geladen). */
[data-reveal='clip'] { position: relative; }
[data-reveal='clip']::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--page);
  transform-origin: 100% 50%;
  pointer-events: none;
  transition: scale 1.1s var(--e-out) var(--d, 0ms);
}
[data-reveal='clip'].is-in::after { scale: 0 1; }

[data-reveal='rule'] {
  scale: 0 1;
  transform-origin: 0 50%;
  transition: scale var(--t-slow) var(--e-out) var(--d, 0ms);
}
[data-reveal='rule'].is-in { scale: 1 1; }

/* Versetzte Bilddrift (M6) */
[data-speed] { will-change: transform; }

/* Intro-Vorhang */
.intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--cream);
  clip-path: inset(0 0 0 0);
  transition: clip-path 1s var(--e-out) 0.55s;
}
.intro img {
  width: min(42vw, 320px);
  opacity: 0;
  scale: 1.06;
  transition:
    opacity 0.7s var(--e-std),
    scale 1.4s var(--e-out);
}
.intro .quiet {
  position: absolute;
  bottom: calc(var(--pad) + 0.5rem);
  left: var(--pad);
  right: var(--pad);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  opacity: 0;
  transition: opacity 0.6s var(--e-std) 0.25s;
}
.intro.is-ready img,
.intro.is-ready .quiet { opacity: 1; scale: 1; }
.intro.is-done {
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
}

/* ── 06 Vier-Ecken-Rahmen (sticky) & Menü ─────────────────────────────── */

/* Die vier Ecken sind ein permanenter Rahmen. Auch das Menü öffnet sich
   innerhalb dieses Rahmens — Logo und CTA bleiben immer erreichbar. */
.bar {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 95;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding-inline: var(--pad);
  pointer-events: none;
}
.bar > * { pointer-events: auto; }

.bar-t {
  top: 0;
  height: var(--bar-t);
}
.bar-b {
  bottom: 0;
  height: var(--bar-b);
}

/* oben links — Wortmarke */
.mark { justify-self: start; }
.mark img {
  width: clamp(84px, 10vw, 124px);
  transition:
    opacity var(--t-fast) var(--e-std),
    filter var(--t-std) var(--e-std);
}
.mark:hover img { opacity: 0.55; }

/* oben mitte — Live-Folio (M4) */
.folio {
  justify-self: center;
  display: flex;
  gap: 0.8em;
  color: var(--ink);
  transition: color var(--t-std) var(--e-std);
}
.folio b { font-weight: inherit; }
.folio span { opacity: 0.5; }

/* oben rechts — Menü-Schalter */
.tgl {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  transition: color var(--t-std) var(--e-std);
}
.tgl i {
  display: block;
  width: 1.4rem;
  height: 1px;
  background: currentColor;
  box-shadow: 0 5px 0 currentColor;
  transition:
    box-shadow var(--t-fast) var(--e-std),
    rotate var(--t-std) var(--e-out);
}
.tgl:hover i { box-shadow: 0 7px 0 currentColor; }
/* im geöffneten Zustand wird aus den zwei Strichen ein Kreuz */
.tgl[aria-expanded='true'] i {
  box-shadow: 0 0 0 currentColor;
  rotate: 45deg;
}
.tgl[aria-expanded='true'] i::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: currentColor;
  rotate: 90deg;
}

/* unten links + unten rechts — beide führen zur Anmeldung */
.cta-l { justify-self: start; }
.cta-r { justify-self: end; }

/* unten mitte — Scroll-Hinweis, nur auf dem ersten Screen */
.cue {
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  color: var(--ink);
  opacity: 1;
  transition:
    opacity var(--t-std) var(--e-std),
    color var(--t-std) var(--e-std);
}
.cue.is-gone,
body.is-locked .cue {
  opacity: 0;
  pointer-events: none;
}
.cue i {
  font-style: normal;
  animation: nudge 2.2s var(--e-std) infinite;
}
@keyframes nudge {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 0.35rem; }
}

/* Tonwert-Umschaltung — pro Ecke, nicht pro Abschnitt. Jede Ecke prüft
   selbst, ob unter ihr gerade eine dunkle Fläche liegt (siehe data-bg im
   Markup + main.js). Nötig, weil im Vol.-1-Abschnitt das helle Sheet und
   das dunkle Foto gleichzeitig unter der Leiste liegen können. */
.folio.is-dark,
.tgl.is-dark,
.cue.is-dark { color: var(--cream-light); }
/* Die Wortmarke selbst kippt nicht mehr farblich: sie ist jetzt ein farbiges
   Markenzeichen (Lime-Pinselstrich), kein einfarbiges Strichlogo — ein
   invert() würde die Markenfarbe verfälschen statt nur den Kontrast zu
   sichern. Lime kontrastiert von sich aus ausreichend gegen Cream, Schwarz
   und Violett. */

/* Fullscreen-Menü, innerhalb des Eckenrahmens — dunkles Blatt, helle Schrift.
   data-bg="dark" hält alle vier Ecken über dem Menü im hellen (invertierten)
   Zustand, siehe syncTone() in main.js. */
.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--gap);
  padding: calc(var(--bar-t) + clamp(1rem, 4vh, 3rem)) var(--pad) calc(var(--bar-b) + 0.5rem);
  background: var(--ink);
  color: var(--cream-light);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.75s var(--e-out);
  visibility: hidden;
  overflow-y: auto;
}
.menu.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
}

.menu-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  align-items: center;
  gap: var(--gap);
}

.menu-list {
  display: grid;
  gap: 0.12em;
  align-content: center;
}
.menu-list a {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  width: max-content;
  max-width: 100%;
  transition: opacity var(--t-fast) var(--e-std);
}
/* Große, klar lesbare Navigationspunkte — die zweitgrößte Stimme im System.
   Auf kurzen, breiten Fenstern (siehe Media Query unten) etwas kleiner, damit
   sechs Punkte plus Key Visual plus Fußzeile ohne Scrollen hineinpassen. */
.menu-list .l:has(.loud-2),
.menu-list .loud-2 { font-size: clamp(2.75rem, 7.2vw, 7rem); }
.menu-list a > .l > span {
  translate: 0 110%;
  transition: translate 0.8s var(--e-out) var(--d, 0ms);
}
.menu.is-open .menu-list a > .l > span { translate: 0 0; }
.menu-list a em {
  font-style: normal;
  font-size: var(--quiet);
  font-weight: var(--w-strong);
  letter-spacing: var(--quiet-tr);
  opacity: 0.5;
  padding-top: 0.55em;
}
.menu-list:hover a { opacity: 0.3; }
.menu-list a:hover,
.menu-list a:focus-visible { opacity: 1; }

.menu-side {
  display: grid;
  gap: 1.25rem;
  align-content: center;
}
/* Das Key Visual liegt vollständig sichtbar (object-fit: contain) — es wird
   nicht beschnitten, auch wenn dadurch links/rechts Luft im Rahmen bleibt. */
.menu-poster {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  width: min(100%, 42vh);
  margin-left: auto;
  background: var(--cream);
}
.menu-poster img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.menu-side dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1.2rem;
  border-top: 1px solid var(--rule);
  padding-top: 0.8rem;
}
.menu-side dt { opacity: 0.6; }
.menu-side dd { text-align: right; }

.menu-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem 2rem;
  border-top: 1px solid var(--rule);
  padding-top: 0.8rem;
}
.menu-foot a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  transition: opacity var(--t-fast) var(--e-std);
}
.menu-foot a:hover { opacity: 0.6; }

/* ── 07 Buttons & Links ───────────────────────────────────────────────── */

.btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Primär = Rot auf Cream mit hartem Offset-Schatten (Designsystem-Button) */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  padding: 0.95em 1.4em 0.85em;
  background: var(--red);
  color: var(--cream-light);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow-hard-sm);
  font-size: var(--quiet);
  font-weight: var(--w-strong);
  letter-spacing: var(--quiet-tr);
  text-transform: uppercase;
  transition:
    background-color var(--t-fast) var(--e-std),
    translate var(--t-fast) var(--e-std),
    box-shadow var(--t-fast) var(--e-std);
}
.btn:hover,
.btn:focus-visible { background: var(--red-hover); }
.btn:active {
  translate: 2px 2px;
  box-shadow: var(--shadow-hard-press);
}
.btn i {
  font-style: normal;
  transition: translate var(--t-std) var(--e-out);
}
.btn:hover i { translate: 0.3em 0; }

/* Sekundär = Gelb mit schwarzer Schrift (Designsystem Button, variant
   "secondary"). Trägt u.a. den fixierten Datums-Button unten rechts. */
.btn-2 {
  background: var(--yellow);
  color: var(--ink);
}
.btn-2:hover,
.btn-2:focus-visible { background: var(--yellow-hover); }

/* Datum + Ort unten rechts */
.btn-when {
  gap: 0.75em;
  align-items: baseline;
}
.btn-when b { font-weight: var(--w-stamp); }
.btn-when span { opacity: 0.6; }

/* Inline-Link mit Linie, die beim Hover zurückläuft */
.lnk {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55em;
  padding-bottom: 0.2em;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size var(--t-std) var(--e-out);
}
.lnk:hover,
.lnk:focus-visible { background-size: 0% 1px; }
.lnk i {
  font-style: normal;
  transition: translate var(--t-std) var(--e-out);
}
.lnk:hover i { translate: 0.35em -0.2em; }

/* Cursor-Label (nur bei feinem Zeigegerät) */
.cur {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  width: 6.5rem;
  height: 6.5rem;
  margin: -3.25rem 0 0 -3.25rem;
  border-radius: 50%;
  background: var(--red);
  color: var(--cream-light);
  scale: 0;
  opacity: 0;
  pointer-events: none;
  transition:
    scale 0.4s var(--e-out),
    opacity 0.3s var(--e-std);
}
.cur.is-on { scale: 1; opacity: 1; }

/* ── 08 Abschnitte ────────────────────────────────────────────────────── */

/* 01 · HERO — M2 Type über Bild, Zeilen laufen über beide Kanten hinaus */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: calc(var(--bar-t) + 4vh) 0 calc(var(--bar-b) + 1rem);
  background: var(--cream);
  isolation: isolate;
}

/* Das freigestellte Netzfoto füllt fast die ganze erste Ansicht — beginnt
   oben bündig mit dem Viewport (die fixierte Leiste liegt schwebend darüber)
   und nimmt fast die komplette Bildschirmhöhe ein. Die laute Stimme
   überschneidet es mittig, kein Scrim, kein Verlauf. Echte Alpha-Transparenz
   (kein Hintergrundfüller mehr nötig, anders als beim alten Bildausschnitt):
   die Ränder verschmelzen direkt mit der Cream-Seite. */
.hero-fig {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  translate: -50% 0;
  height: clamp(30rem, 98svh, 68rem);
  max-width: 94vw;
  aspect-ratio: 1410 / 1800;
}
.hero-fig img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  scale: 1.04;
  animation: settle 1.8s var(--e-out) forwards;
}
@keyframes settle {
  to { scale: 1; }
}

.hero-type {
  align-self: center;
  display: grid;
  gap: 0.02em;
  padding-block: 2vh;
}
.hero-type .l:nth-child(1) { margin-left: -0.06em; }
.hero-type .l:nth-child(2) {
  margin-left: clamp(0rem, 9vw, 8rem);
  width: max-content;
}

.hero-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--gap);
  padding-inline: var(--pad);
}
/* Subline zur Hero-Headline — immer einzeilig, kein max-width-Zwang, das
   die Zeile umbrechen könnte. min-width:0 verhindert, dass der nowrap-Text
   die Grid-Spur über die verfügbare Breite hinaus aufzwingt (siehe .qs). */
.hero-claim { display: grid; min-width: 0; }
.hero-claim .lead { white-space: nowrap; }
/* Rechte untere Ecke des Hero: Eventreihen-Credit + Medienpartnerschaft
   gestapelt, beide rechtsbündig zur selben Kante. Deutlicher Abstand
   zwischen beiden Zeilen (wirkt wie eine Leerzeile), damit die
   Medienpartnerschaft als eigener kleiner Block abgesetzt ist. */
.hero-credits {
  display: grid;
  gap: 1.75rem;
  justify-items: end;
}
.hero-cred {
  text-align: right;
  max-width: 38ch;
  opacity: 0.65;
}
.hero-partner {
  display: flex;
  align-items: center;
  gap: 0.7em;
  opacity: 0.65;
}
/* „Medienpartnerschaft“ ist nur die Bildunterschrift zum Logo — deutlich
   kleiner als der Eventreihen-Credit, das Logo trägt die Aussage. */
.hero-partner span {
  font-size: 0.72em;
}
.hero-partner img {
  height: clamp(1.2rem, 2.1vw, 1.7rem);
  width: auto;
}

/* 02 · IDEE — Laufband */
.ticker {
  padding-block: clamp(1.5rem, 4vw, 3.5rem);
  overflow: clip;
}
.ticker-row {
  display: flex;
  width: max-content;
  animation: slide var(--dur, 150s) linear infinite;
}
.ticker-row > span {
  display: flex;
  gap: 0.4em;
  padding-right: 0.4em;
  white-space: nowrap;
}
.ticker-row em {
  font-style: normal;
  color: var(--red);
  -webkit-text-stroke: 0;
}
@keyframes slide {
  from { translate: 0 0; }
  to { translate: -50% 0; }
}
.ticker:hover .ticker-row { animation-play-state: paused; }

.idee-txt { grid-column: 1 / span 5; }
.idee-fig {
  grid-column: 7 / -1;
  margin-top: clamp(0rem, 5vw, 4rem);
}

/* 03 · IMPULS */
.impuls-txt {
  grid-column: 1 / span 6;
  display: grid;
  gap: clamp(1.25rem, 2.4vw, 2rem);
}
.impuls-fig {
  grid-column: 8 / -1;
  margin-top: clamp(-7rem, -5vw, -1.5rem);
}

/* Kontextsatz und Aussage verschmolzen zu einem Block in der kursiven
   Leitstimme, statt zwei optisch getrennter Absätze (Fließtext + separates
   Zitat mit roter Linie). Nur noch dezent eingerückt. */
.indent {
  padding-left: 1.1rem;
}

/* 04 · FORMAT — vier Takte, am Rand nummeriert */
.beats {
  display: grid;
  border-bottom: 1px solid var(--rule);
}
.beat {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.05fr);
  /* end statt baseline/start: Zahl, Text und Button sitzen auf der
     Unterkante der (teils zweizeiligen) Headline, nicht an deren Oberkante. */
  align-items: end;
  gap: 1rem var(--gap);
  border-top: 1px solid var(--rule);
  padding-block: clamp(1.1rem, 2.4vw, 2rem);
  transition: background-color var(--t-std) var(--e-std);
}
.beat:hover { background: color-mix(in oklch, var(--ink) 5%, transparent); }
.beat h3 { margin-left: -0.03em; }
.beat p { max-width: 40ch; }

/* 05 · VOL. 1 — M3 sheet on bleed */
.bleed {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.bleed-img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Das Vol.-1-Motiv läuft full-bleed (Designsystem: die Netzbilder immer groß
   spielen). Sein Cream-Grund entspricht der Seitenfarbe — deshalb bleiben die
   fixierten Ecken hier schwarz lesbar, auch über dem Sheet. */
.vol1 { padding-block: clamp(4rem, 10vw, 9rem); }
.vol1 .bleed-img { object-position: 72% 45%; }

.sheet {
  position: relative;
  width: min(38rem, 58vw);
  margin-left: clamp(0rem, 7vw, 6rem);
  padding: clamp(1.75rem, 3.4vw, 3rem);
  background: var(--cream-light);
  box-shadow: var(--shadow-hard);
  overflow: clip;
}
/* PLATZHALTER — hier kommt das Motiv der Ausgabe hin (Topping, Produktshot,
   Foto vom Abend). Rot umrandet, damit im Review sofort klar ist, dass die
   Fläche noch zu füllen ist. Zum Ersetzen: <figure> durch <picture> tauschen. */
.sheet-slot {
  position: relative;
  overflow: clip;
  aspect-ratio: 3 / 2;
  margin-block: clamp(1.25rem, 2.4vw, 2rem);
  border: 1px solid var(--rule);
}
.sheet-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sheet-teaser { opacity: 0.55; }
.sheet dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.45rem 1.2rem;
  margin-block: 1.4rem;
  border-top: 1px solid var(--rule);
  padding-top: 0.9rem;
}
.sheet dt { opacity: 0.5; }
.sheet dd {
  text-align: right;
  font-weight: var(--w-stamp);
  letter-spacing: 0.02em;
}

/* 06 · EDITIONEN — M6 versetzter Bildstreifen */
.strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: var(--gap);
}
.ed {
  display: grid;
  gap: 0.9rem;
  align-content: start;
}
/* Rahmen + Innenabstand: das Foto sitzt wie auf einem Passepartout, statt
   randlos und dadurch seltsam angeschnitten in der Kachel zu liegen. */
.ed-img {
  position: relative;
  overflow: clip;
  background: var(--cream-light);
  border: 1px solid var(--rule);
  padding: 0.65rem;
  aspect-ratio: 4 / 5;
}
.ed-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.9s var(--e-out);
}
.ed:hover .ed-img img { scale: 1.05; }

/* Platzhalter für noch nicht angekündigte Ausgaben — dünner Rahmen wie beim
   Foto, dazu eine leichte Schraffur statt eines Bilds. */
.ed-soon {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--rule);
  background-image: repeating-linear-gradient(
    45deg,
    var(--rule) 0,
    var(--rule) 1px,
    transparent 1px,
    transparent 13px
  );
}
.ed-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

/* 07 · WARUM */
.warum-txt {
  grid-column: 1 / span 6;
  display: grid;
  gap: clamp(1.25rem, 2.4vw, 2rem);
}
.warum-fig {
  grid-column: 8 / -1;
  margin-top: clamp(-6rem, -4vw, -1rem);
}

/* 08 · FÜR MARKEN */
.marken-txt { grid-column: 1 / span 6; }
.marken-fig {
  grid-column: 9 / -1;
  margin-top: clamp(-8rem, -6vw, -2rem);
}
/* width statt max-width in ch: die Box wächst exakt auf die Breite der
   längsten Frage (nowrap unten), alle anderen Zeilen bleiben darunter und
   brechen dadurch nie um — genau eine Zeile pro Frage. */
.qs {
  display: grid;
  width: max-content;
  max-width: 100%;
  margin-block: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--rule);
}
/* min-width:0 auf dem li: sonst zwingt dessen nowrap-Text (Grid-Item-
   Default min-width:auto = min-content = max-content bei nowrap) die Zeile
   über die von .qs vorgegebene max-width hinaus — genau die Lücke, durch
   die der Fragentext zuvor über den Seitenrand hinauslief. */
.qs li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  min-width: 0;
  gap: 1rem;
  border-top: 1px solid var(--rule);
  padding-block: 0.7rem;
}
.qs span:first-child { opacity: 0.5; }
.qs span:last-child { white-space: nowrap; min-width: 0; }

/* 09 · GASTGEBER */
.hosts { border-bottom: 1px solid var(--rule); }
.host {
  display: grid;
  /* Feste Breite statt auto für die Link-Spalte: „auto“ richtet sich nach
     dem jeweiligen Linktext („Vorbeischauen ↗“ vs. „Ansehen ↗“) und verschob
     dadurch Spalte 1+2 von Zeile zu Zeile unterschiedlich weit nach rechts. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 11rem;
  /* end statt start, siehe .beat oben — Text und Link sitzen auf der
     Unterkante der (bei „Frühstück 3000“ zweizeiligen) Headline. */
  align-items: end;
  gap: 0.8rem var(--gap);
  border-top: 1px solid var(--rule);
  padding-block: clamp(1.2rem, 2.6vw, 2.2rem);
}
.host h3 { margin-left: -0.03em; }
.host p { max-width: 34ch; }
.host .lnk { justify-self: end; }

/* 10 · OUTRO */
.outro {
  position: relative;
  min-height: 82svh;
  display: grid;
  align-content: center;
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-block: var(--sec);
  background: var(--cream);
}

/* ── 09 Footer ────────────────────────────────────────────────────────── */

.ftr {
  padding: clamp(3rem, 6vw, 5rem) var(--pad) clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--rule);
}

/* Die Fußzeile des Key Visuals: Partnermarken, getrennt durch eine Haarlinie */
.ftr-partners {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}
.ftr-partners hr {
  flex: 1;
  height: 0;
  margin: 0;
  border: 0;
  border-top: var(--border-w) solid var(--ink);
}
.ftr-partners .p-ilv img { height: clamp(2rem, 3.4vw, 2.75rem); width: auto; }
.ftr-partners .p-f3k img { height: clamp(3.25rem, 5.6vw, 4.5rem); width: auto; }
.ftr-partners a { transition: opacity var(--t-fast) var(--e-std); }
.ftr-partners a:hover { opacity: 0.5; }

.ftr-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 0.6fr));
  gap: var(--gap);
  border-top: 1px solid var(--rule);
  padding-top: 1.2rem;
}
.ftr-grid h2 {
  font-size: inherit;
  margin-bottom: 0.9rem;
}
.ftr-grid p { font-weight: var(--w-body); text-transform: none; letter-spacing: 0; }
.ftr-grid ul { display: grid; gap: 0.5rem; }
.ftr-grid li a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  padding-bottom: 0.2em;
  transition: background-size var(--t-std) var(--e-out);
}
.ftr-grid li a:hover,
.ftr-grid li a:focus-visible { background-size: 100% 1px; }

/* ── 10 Responsive ────────────────────────────────────────────────────── */

/* Kurze, aber breite Fenster (z.B. 1280×800 im Fenstermodus): die große
   Menü-Typo und das Key Visual sonst zusammen höher als der Viewport.
   min-width grenzt das gegen schmale, aber ebenfalls kurze Handys ab —
   dort ist .menu-side ohnehin ausgeblendet (siehe 1080px-Query) und die
   6vw-Formel bliebe unter der Mindestgröße, also unverändert groß. */
@media (max-height: 900px) and (min-width: 700px) {
  .menu-list .l:has(.loud-2),
  .menu-list .loud-2 { font-size: clamp(2rem, 6vw, 4.75rem); }
  .menu-poster { width: min(100%, 30vh); }
}

@media (max-width: 1080px) {
  .g12 { grid-template-columns: minmax(0, 1fr); }
  .g12 > * { grid-column: 1 / -1 !important; }
  .impuls-fig,
  .idee-fig,
  .warum-fig { max-width: 26rem; margin-top: 0; }
  .marken-fig { max-width: 20rem; margin-top: 0; }
  .beat { grid-template-columns: 3rem minmax(0, 1fr); }
  .beat p { grid-column: 2; }
  .host { grid-template-columns: minmax(0, 1fr); }
  .host .lnk { justify-self: start; }
  .sheet { width: min(38rem, 100%); }
  .menu-body { grid-template-columns: minmax(0, 1fr); }
  .menu-side { display: none; }
}

@media (max-width: 860px) {
  :root {
    --loud-weight: 0.024em;
    --bar-b: 4.25rem;
  }
  .hero { min-height: 92svh; }
  .hero-fig {
    height: clamp(20rem, 80svh, 38rem);
    max-width: 90vw;
  }
  .hero-type .l:nth-child(2) { margin-left: 0; }
  .hero-foot { grid-template-columns: minmax(0, 1fr); }
  .hero-credits { justify-items: start; }
  .hero-cred { text-align: left; }
  .hero-partner { justify-content: flex-start; }
  /* Folio und Scroll-Hinweis entfallen; die Ecken rücken an den Rand */
  .folio { display: none; }
  .cue { display: none; }
  .bar-t { grid-template-columns: 1fr auto; }
  .bar-b { grid-template-columns: auto 1fr; }
  .cta-r { justify-self: end; }
  .btn-when span { display: none; }
  .strip {
    grid-auto-flow: column;
    grid-auto-columns: 74vw;
    grid-template-columns: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-bottom: 1rem;
    margin-inline: calc(var(--pad) * -1);
    padding-inline: var(--pad);
  }
  .ed { scroll-snap-align: start; }
  .ftr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr-grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  /* Gleiche Situation wie bei .qs: nowrap-Text passt bei --serif-lead's
     Mindestgröße (1.45rem) auf sehr schmalen Telefonen nicht mehr neben
     den Rahmenabstand. */
  .hero-claim .lead { font-size: 0.82em; }
  .qs li,
  .beat { grid-template-columns: 1.9rem 1fr; }
  /* Auf sehr schmalen Telefonen reicht die Spaltenbreite bei nowrap knapp
     nicht für die längste Frage — 0.88em schafft genug Luft, ohne dass es
     merklich kleiner wirkt als die übrigen Zeilen. */
  .qs span:last-child { font-size: 0.8em; }
  .btn { padding: 0.9em 1.05em 0.8em; gap: 0.6em; }
  .mark img { width: 78px; }
  .ftr-partners { flex-wrap: wrap; }
  .ftr-partners hr { flex-basis: 100%; order: 3; }
}

/* ── 11 Reduced Motion / Print ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .l > span,
  [data-reveal] {
    translate: 0 0 !important;
    opacity: 1 !important;
    clip-path: none !important;
    scale: 1 !important;
  }
  .intro,
  .cur { display: none; }
  .ticker-row { animation: none; }
}

@media print {
  .bar, .menu, .progress, .intro, .cur { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
}