/* ============================================================
   Akt 1 — WebGL-Karton-Stage
   Choreografie: js/main.js (Kommentarkopf erklärt die Beats)

   Stand 01.09. — Bens Feedback Vol.3 (31.08.):
   · Preloader (styles.css) · Intro-Sequenz neu (main.js)
   · Hero: Inhalt füllt ~84 % der Fläche (Inhalt größer relativ zur Box),
     Copy so breit wie die H1, weißer Verlauf 60 % als Element (blendet ein)
   · Flächen: Kicker + Headline in einer Spalte, Icon in Stempelgröße
     rechts unten bündig zum Band, weißer Verlauf unten
   · Paketband: im Stillstand NUR der Aufdruck (kein Doppel-Layer);
     im Zoom die HTML-Ebene als echtes Layout-Scaling (Schriftgröße/px
     statt transform → immer Vektor-scharf), Karten absolut an ihren
     Kartenmitten, Inhalt morpht zu Bens Vorlage (Icon kleiner, Text 40 vw),
     schwarze Verläufe links/rechts, Skip als schwarze Pille
   · Öffnung: Stage wird durchsichtig, die echte Modell-Sektion liegt fixiert
     darunter; Innenwände als Graustufen-Layer (multiply) auf Body-Ebene
   ============================================================ */

.act1 { position: relative; background: #f4f2ee; }
.js:not(.no-motion) .act1 { background: var(--cyan); }
.act1__stage {
  position: relative; z-index: 3;
  height: 100svh;
  margin-top: calc(-1 * var(--header-h));
  min-height: 560px;
  overflow: clip;
  background: #f4f2ee;
  /* Bens 1440er-Raster für die Flächen — eine Quelle für alle Overlays */
  --grid-pad: max(clamp(20px, 6vw, 96px), calc((100% - 1440px) / 2));
  /* Ben Vol.3 (01.2): Box in der Vogelperspektive kleiner, der Inhalt NICHT — der Aufdruck
     füllt deshalb ~92 % der Fläche (vorher 84 %), damit Claim + Stempel auf dem Bildschirm
     nicht mitschrumpfen */
  --hero-pad: clamp(20px, 4vw, 96px);
  --stamp-w: min(clamp(252px, 30vw, 396px), 40vh);
}
/* Öffnung (Ben Vol.3 06): die Stage wird durchsichtig — durch das Loch im Karton
   ist die echte Modell-Sektion (fixiert darunter) sichtbar */
.act1__stage.is-open { background: transparent; }
.act1__stage.is-open .film-grain, .act1__stage.is-open .stage-vignette { display: none; }
.act1__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Graustufen-Layer der Innenwände (Bens 2-Ebenen-Idee): liegt auf Body-Ebene ZWISCHEN
   Modell-Sektion (z 1) und Stage (z 3) und multipliziert seine Schatten auf das echte HTML */
.act1__blend {
  position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2;
  mix-blend-mode: multiply; pointer-events: none; display: none;
}
.act1__blend.is-on { display: block; }

/* ---------- Film-Look-Overlays ---------- */
.film-grain {
  position: absolute; inset: 0; z-index: 8;
  width: 100%; height: 100%;
  pointer-events: none; opacity: .10;
  mix-blend-mode: overlay;
  image-rendering: pixelated;
}
.stage-vignette {
  position: absolute; inset: 0; z-index: 8; pointer-events: none;
  background: radial-gradient(125% 95% at 50% 45%, transparent 46%, rgba(24,18,12,.40) 100%);
}

/* ============================================================
   Gemeinsame Basis aller Kartonflächen-Overlays
   ============================================================ */
.hero-overlay, .face-overlay, .band-overlay {
  position: absolute; inset: 0; z-index: 5;
  opacity: 0; pointer-events: none;
  transform-origin: 50% 0%;
  will-change: opacity;
}
.hero-overlay.is-live, .face-overlay.is-live { pointer-events: auto; }
.band-overlay { pointer-events: none !important; }

/* Ben 24.08. (00): Band-Kicker 36px, weiß, Black, kein Letter-Spacing */
.band-kicker.ix {
  font-size: var(--h5); color: #fff; font-weight: 900; letter-spacing: 0; margin: 0;
}
/* Vol.6 (Ben 04:25/05:00): Position setzt js/main.js (syncBandKicker) exakt auf den Flächen-
   Kicker — die Werte hier sind nur der Fallback vor dem ersten Bake. z-index über den
   seitlichen Verläufen (.band-shade, z 3): „Dein Pain" liegt ÜBER dem Gradienten. */
.band-overlay .band-kicker {
  position: absolute; top: calc(var(--header-h) + clamp(14px, 3vh, 30px));
  left: var(--grid-pad); z-index: 4; opacity: 0;
}

/* ---------- Hero (Pose A) ---------- */
.hero-overlay {
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(24px, 6vh, 80px);
  /* Vol.5 (Ben 04): unterer Block (Copy + Stempel) mittig zwischen Canvas-Mitte und
     Unterkante — mehr Boden-Padding schiebt Block UND Claim gemeinsam nach oben */
  padding: calc(var(--header-h) + clamp(12px, 2vh, 28px)) var(--hero-pad) clamp(40px, 9vh, 96px);
  z-index: 3;
}
.hero-overlay > * { position: relative; z-index: 1; }
/* Ben Vol.3 (02.2): weißer Verlauf 60 % hoch (Vol.2 hatte 50 %), gleiche Kurve;
   im Motion-Modus blendet JS ihn zusammen mit Text/Buttons ein (0,5 s) */
.hero-shade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 60%; z-index: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.14) 38%, rgba(255,255,255,.44) 100%);
  pointer-events: none;
}
.js:not(.no-motion) .hero-shade { opacity: 0; }
/* Claim über die volle Inhaltsbreite = rechts bündig mit dem Stempel (Ben 01.5) */
.hero-claim { width: min(100%, 170vh); height: auto; display: block; flex: none; margin-inline: auto; }
.hero-bottom {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(24px, 4vw, 64px);
}
.hero-copy { max-width: 780px; }
.js:not(.no-motion) .hero-copy { opacity: 0; }   /* JS: Slide-in bottom 0,5 s ease-out */
.hero-copy__badge { font-size: var(--h6); font-weight: 800; margin: 0 0 .8em; color: var(--ink); }
.hero-copy__h1 {
  font-size: var(--h3); font-weight: 900; line-height: 1.06;
  margin: 0 0 .5em; color: #fff; text-shadow: 0 2px 14px rgba(60,40,20,.34);
}
/* Ben Vol.3 (02.1): Copy-Text so breit wie die H1 (keine eigene ch-Grenze mehr) */
.hero-copy__sub {
  font-size: 1.02rem; max-width: none; margin: 0 0 1.3em;
  color: var(--ink);
}
.hero-copy__sub strong { text-decoration: underline; text-underline-offset: 3px; }
.hero-copy__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-stamp { width: var(--stamp-w); height: auto; flex: none; opacity: .85; }
/* Grafiken leben NUR im Kartondruck — die DOM-Vektoren bleiben unsichtbar im Layout
   stehen (der Painter liest ihre Rects). */
.js:not(.no-motion) .hero-claim,
.js:not(.no-motion) .hero-stamp,
.js:not(.no-motion) .face__icon { opacity: 0 !important; }

/* ============================================================
   Text-Flächen (Pose B „Loophole" und Pose D „Cut")
   Grid 1fr / Band / 1fr: oberer Block endet über dem Band, unterer beginnt
   darunter (Ben Vol.2 03.2/07.2, gleiche Werte beide Flächen).
   ============================================================ */
.face-overlay {
  display: grid;
  /* Zeile 2 liegt exakt auf dem 3D-Band (Stage-Mitte) — Header-Polster sitzt im oberen Block */
  grid-template-rows: calc(50% - var(--strip-h, 113px) / 2) var(--strip-h, 113px) 1fr;
  padding: 0;
  --face-gap: clamp(26px, 4.5vh, 56px);
}
/* Ben Vol.3 (03.3): weißer Verlauf unten wie im Hero — Kontrast für die unteren Texte */
.face-overlay::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; z-index: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.14) 38%, rgba(255,255,255,.44) 100%);
  pointer-events: none;
}
.face__top { grid-row: 1; align-self: end; padding: var(--header-h) var(--grid-pad) var(--face-gap); position: relative; z-index: 1; }
.face__row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(24px, 4vw, 60px);
}
.face__col { flex: 2 1 0; }
/* Ben Vol.2 (03.1/07.1): Abstand zwischen Kicker und Headline */
.face__col .band-kicker { position: static; margin: 0 0 clamp(10px, 1.8vh, 20px); }
.face__h {
  /* Walter 02.09.: Typo etwas kleiner als --h1 (Screendesign; exakter px-Wert folgt ggf.) */
  font-size: calc(var(--h1) * .85); font-weight: 900; line-height: .96;
  letter-spacing: var(--ls-h); margin: 0; color: var(--ink);
}
/* Walter 02.09.: Icon etwas kleiner (·0,85) und Unterkante bündig mit der
   Unterlinie der Headline (flex-end-Reihe) — nicht mehr bis kurz vors Band gezogen */
.face__icon {
  width: min(calc(var(--stamp-w) * .85), calc(50vh - var(--strip-h, 113px) / 2 - var(--header-h) - 24px));
  height: auto; flex: none; align-self: flex-end;
  margin-bottom: 0;
}
.face__foot { grid-row: 3; align-self: start; padding: var(--face-gap) var(--grid-pad) 0; position: relative; z-index: 1; }
.face__lead {
  font-size: var(--h3); font-weight: 900; line-height: 1.1;
  margin: 0 0 .5em; color: var(--ink);
}
.face__sub { font-size: var(--p1); font-weight: 700; margin: 0 0 1.1em; color: rgba(30,22,14,.8); }
.face__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #fff; color: var(--ink); }   /* Vol.5 (Ben): Hover invertiert (Farbe des anderen Zustands) */

/* ============================================================
   Pose C — Paketband (EINE Quelle)
   Stillstand: #pkgband ist die Vorlage für den Aufdruck (Grid-Layout, unsichtbar).
   Zoom: JS setzt --Z (Kamera-Zoom) und --tw (Textbreite, 0,44·W·Z/Zmax) und
   positioniert die Karten absolut. Inhaltsfaktor fest 0,72 (Walter 02.09.: ein Layout).
   Alles über Schriftgröße/px → Vektor-scharf in jeder Zoomstufe (Ben Vol.3 04.2).
   ============================================================ */
.band-overlay { --Z: 1; --shade: 0; }
.pkgband {
  position: absolute; left: 0; right: 0;
  top: calc(50% - var(--strip-h, 113px) * var(--Z) / 2);
  height: calc(var(--strip-h, 113px) * var(--Z));
  color: #fff;
}
/* Ben Vol.3 (03.2): Painpoints über die ganze Breite verteilt, luftiger, breitere Textboxen */
.pains__track {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(16px, 2vw, 40px); align-items: center;
  height: 100%; margin: 0; padding: 0 clamp(24px, 3vw, 60px); list-style: none;
}
.pains__card {
  display: flex; align-items: center; gap: clamp(6px, .6vw, 12px);
  height: 100%; min-width: 0;
}
.pains__icon { height: calc(var(--strip-h, 113px) * .75); width: auto; flex: none; }
.pains__text {
  font-size: clamp(11px, .85vw, 14px); font-weight: 800; line-height: 1.3;
  letter-spacing: 0; color: #fff; margin: 0;
}
.pains__text .cy { color: var(--cyan); font-weight: inherit; font-size: inherit; }

/* Walter 02.09.: EIN Layout überall — die eingezoomte Komposition (Faktor 0,72, feste
   Textbreite --tw) gilt auch im Ruhezustand/Print; Zoom skaliert nur noch mit --Z. */
.js:not(.no-motion) .pkgband .pains__card { gap: calc(var(--gap0, 8px) * var(--Z, 1) * 0.72); }
.js:not(.no-motion) .pkgband .pains__icon { height: calc(var(--strip-h, 113px) * .75 * var(--Z, 1) * 0.72); }
.js:not(.no-motion) .pkgband .pains__text { font-size: calc(var(--fs0, 14px) * var(--Z, 1) * 0.72); width: var(--tw, auto); }
/* Messmodus: Basiswerte (fs0/gap0/Stationen) ohne 0,72/--tw erfassen — JS toggelt kurz */
.js:not(.no-motion) .pkgband.is-measure .pains__card { gap: clamp(6px, .6vw, 12px); }
.js:not(.no-motion) .pkgband.is-measure .pains__icon { height: calc(var(--strip-h, 113px) * .75); }
.js:not(.no-motion) .pkgband.is-measure .pains__text { font-size: clamp(11px, .85vw, 14px); width: auto; }

/* Zoom-Layout: Karten absolut (JS setzt --cx je Karte) — nur noch Positionierung */
.js:not(.no-motion) .pkgband.is-abs .pains__track { display: block; position: relative; height: 100%; padding: 0; }
.js:not(.no-motion) .pkgband.is-abs .pains__card {
  position: absolute; top: 50%; left: var(--cx, 50%);
  transform: translate(-50%, -50%); height: auto; width: max-content;
}

/* Ben Vol.3 (04.3): schwarze Verläufe links/rechts (Vorlage) — nur im Zoom sichtbar.
   Vol.5 (Ben): Verlauf nicht nur aufs Band, sondern über die GANZE linke/rechte Seite
   (mehr Realismus — die Ränder dunkeln als Fläche ab, nicht als Streifen). */
.band-shade {
  position: absolute; z-index: 3; width: 14%; pointer-events: none;
  top: 0; height: 100%;
  opacity: var(--shade);
}
/* Vol.6 (Ben 05:00/06:26): „einen Ticken heller, 25 % weniger Alpha" — .88 → .66 */
.band-shade--l { left: 0; background: linear-gradient(90deg, rgba(0,0,0,.66), rgba(0,0,0,0)); }
.band-shade--r { right: 0; background: linear-gradient(270deg, rgba(0,0,0,.66), rgba(0,0,0,0)); }

/* Buttons + Skip (schwarze Pille, Ben Vol.3 04.1) — sichtbar im Zoom, JS toggelt */
.pains__nav {
  position: absolute; left: 0; right: 0; bottom: clamp(16px, 5vh, 44px);
  display: flex; justify-content: center; align-items: center; gap: 14px; z-index: 4;
  opacity: 0; pointer-events: none;
}
.pains__nav.is-on { pointer-events: auto; }
.pains__nav .pains__skip { margin-left: 4px; }

/* ---------- Statisches Poster (no-motion / mobil / kein WebGL) ---------- */
.no-motion .act1__canvas, .act1--static .act1__canvas,
.no-motion .film-grain, .act1--static .film-grain,
.no-motion .stage-vignette, .act1--static .stage-vignette,
.no-motion .band-shade, .act1--static .band-shade,
.no-motion .pains__nav, .act1--static .pains__nav { display: none; }

.no-motion .act1__stage, .act1--static .act1__stage {
  height: auto; min-height: 0;
  background: var(--kraft);
  background-size: cover; background-position: center;
  padding-block: clamp(48px, 8vh, 96px);
}
.no-motion .hero-overlay, .act1--static .hero-overlay,
.no-motion .face-overlay, .act1--static .face-overlay,
.no-motion .band-overlay, .act1--static .band-overlay {
  position: static; opacity: 1; transform: none; pointer-events: auto;
  padding-top: 0; margin-top: clamp(36px, 6vh, 64px);
}
.no-motion .hero-overlay, .act1--static .hero-overlay { margin-top: 0; }
.no-motion .face-overlay, .act1--static .face-overlay { display: block; }
.no-motion .face-overlay::after, .act1--static .face-overlay::after { display: none; }
.no-motion .face__top, .act1--static .face__top,
.no-motion .face__foot, .act1--static .face__foot { padding: 0 clamp(20px, 4vw, 48px); }
.no-motion .face__foot, .act1--static .face__foot { margin-top: 28px; }
.no-motion .face__icon, .act1--static .face__icon { width: clamp(110px, 15vw, 200px); margin-bottom: 0; }
/* Vol.6 (Ben 15:43): im Poster sollen Stempel und Claim so aussehen wie im Aufdruck — voll deckend */
.no-motion .hero-stamp, .act1--static .hero-stamp { opacity: 1; }
.no-motion .band-overlay .band-kicker, .act1--static .band-overlay .band-kicker {
  position: static; opacity: 1; margin: 0 0 12px clamp(20px, 4vw, 48px);
}
.no-motion .pkgband, .act1--static .pkgband {
  position: static; height: auto; transform: none;
  background: #262624; padding: 18px 0;
}
.no-motion .pains__track, .act1--static .pains__track {
  grid-template-columns: 1fr; gap: 16px; height: auto; padding: 0 clamp(20px, 4vw, 48px);
}
.no-motion .pains__icon, .act1--static .pains__icon { height: 64px; }
.no-motion .pains__text, .act1--static .pains__text { font-size: 1rem; line-height: 1.35; }

@media (max-width: 767px) {
  .pains__card { flex-direction: column; align-items: flex-start; gap: 16px; }
  .face__row { flex-direction: column; align-items: flex-start; gap: 18px; }
  .hero-bottom { flex-direction: column; align-items: flex-start; }
}