/* ==========================================================================
   TWISSTAR · Case Study v3 — 00 FOUNDATION
   Tokens + Base + geteilte Komponenten. Port von case-study-v2.css auf das
   v3-Design-System (design-system.md, BINDEND). Sektionen nutzen, erweitern nicht.
   ========================================================================== */


@font-face {
  font-family: 'Agency FB';
  src: url('fonts/AgencyFBBold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   TOKENS — design-system.md §3–5
   ========================================================================== */
:root {
  /* Bühnen */
  --ink:        #0A0A0A;
  --ink-2:      #141414;
  --white:      #FFFFFF;

  /* Text auf Stage */
  --fg-d:       #FAFAF7;
  --fg-d-2:     #B8B6AE;
  --fg-d-3:     #8A8880;   /* NUR ≥12px Mono-Caps */

  /* Text auf Weiß */
  --fg-l:       #0A0A0A;
  --fg-l-2:     #4A4842;
  --fg-l-3:     #6E6B60;

  /* Linien */
  --line-d:     rgba(250,250,247,0.10);
  --line-d-2:   rgba(250,250,247,0.24);
  --line-l:     rgba(10,10,10,0.12);
  --line-l-2:   rgba(10,10,10,0.28);

  /* Akzente */
  --lime:       #D6E500;
  --lime-dark:  #A8B800;   /* Lime-Ersatz als Text auf Weiß */
  --cyan:       #5BC2E7;   /* nur Kapitel 04 + 10 */

  /* Typo */
  --display:    "Agency FB", "Oswald", "Arial Narrow", sans-serif;
  --heading:    "Barlow Condensed", "Oswald", "Arial Narrow", sans-serif;
  --body:       "Barlow", system-ui, sans-serif;
  --mono:       "JetBrains Mono", ui-monospace, Consolas, monospace;

  /* Raster */
  --max:        1320px;
  --gutter:     clamp(20px, 4vw, 56px);
  --rail:       72px;

  /* Rhythmus */
  --sec-pad:    clamp(96px, 13vh, 160px);
  --block-gap:  clamp(48px, 6vw, 72px);

  /* Motion */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  background: var(--ink);
  color: var(--fg-d);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* ==========================================================================
   TYPO-SKALA — Utility-Klassen (design-system.md §4, bindend)
   ========================================================================== */
.display-hero {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(64px, 9.5vw, 144px); line-height: 0.92; letter-spacing: 0.01em;
}
.display-act {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(56px, 8.5vw, 120px); line-height: 0.92; letter-spacing: 0.01em;
}
.display-h2 {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(40px, 5.5vw, 84px); line-height: 0.95; letter-spacing: 0.015em;
}
.h3 {
  font-family: var(--heading); font-weight: 700; text-transform: uppercase;
  font-size: clamp(22px, 2.2vw, 30px); line-height: 1.1; letter-spacing: 0.04em;
}
.h4 {
  font-family: var(--heading); font-weight: 700; text-transform: uppercase;
  font-size: 20px; line-height: 1.15; letter-spacing: 0.05em;
}
.deck { font-family: var(--body); font-weight: 400; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.55; max-width: 60ch; }
.body { font-family: var(--body); font-weight: 400; font-size: 16px; line-height: 1.6; max-width: 64ch; }
.lead-p { font-family: var(--body); font-weight: 600; font-size: 18px; line-height: 1.5; }
.mono-label {
  font-family: var(--mono); font-weight: 500; text-transform: uppercase;
  font-size: 11px; line-height: 1.4; letter-spacing: 0.22em;
}
.mono-num { font-family: var(--mono); font-weight: 400; font-size: 12px; line-height: 1.5; letter-spacing: 0.18em; }
.stat-big {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(40px, 4.5vw, 64px); line-height: 1; letter-spacing: 0.02em;
}

/* em nie kursiv — die Marke setzt keinen Kursivsatz */
em { font-style: normal; }
/* em in Display-Headlines = Akzent (§4) */
.display-hero em, .display-act em, .display-h2 em { font-style: normal; color: var(--lime); }
.S.white .display-hero em, .S.white .display-act em, .S.white .display-h2 em { color: var(--lime-dark); }

/* ==========================================================================
   TOP-BAR — fixed, OPAK (kein backdrop-filter, §7.1) + Scroll-Progress
   ========================================================================== */
.progress {
  position: fixed; top: 0; left: 0;
  height: 2px; width: 0;
  background: var(--lime);
  z-index: 120;
}

.bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  padding: 16px var(--gutter);
  background: var(--ink);            /* opak — die Marke ist gestempelt */
  border-bottom: 1px solid var(--line-d);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-d-2);
}
.bar .l { display: flex; align-items: center; gap: 12px; color: var(--fg-d); }
/* Signatur-Rotation 1/2: Lime-Dot dreht dauerhaft — nur Border, wirkt wie Chuck (§6) */
.bar .l .dot {
  width: 8px; height: 8px;
  background: transparent;
  border: 1.5px solid var(--lime);
  animation: chuck 8s linear infinite;
}
@keyframes chuck { to { transform: rotate(360deg); } }
.bar .c { color: var(--fg-d); font-weight: 500; }
.bar .r { display: flex; gap: 24px; justify-content: flex-end; align-items: center; }
.bar .r span b { color: var(--fg-d); font-weight: 500; }

/* EN/DE-Sprachumschalter — als <div> (nicht <span>), damit ihn die Mobile-
   Regel .bar .r span:nth-child(n+2) NICHT ausblendet → bleibt immer sichtbar. */
.bar .lang { display: inline-flex; align-items: center; }
.bar .lang a { color: var(--fg-d-2); text-decoration: none; transition: color 0.2s ease; }
.bar .lang a[aria-current="page"] { color: var(--fg-d); }
.bar .lang a:hover { color: var(--lime); }
.bar .lang a + a { margin-left: 10px; }
.bar .lang a + a::before { content: "/"; color: var(--line-d-2); margin-right: 10px; }
@media (max-width: 800px) {
  .bar { grid-template-columns: 1fr 1fr; }
  .bar .c { display: none; }
  .bar .r span:nth-child(n+2) { display: none; }
}

/* ==========================================================================
   SEKTIONEN — alternierend ink / white
   ========================================================================== */
section { position: relative; }

.S { padding: var(--sec-pad) 0; position: relative; }
.S.white { background: var(--white); color: var(--fg-l); }
.S.white a { color: var(--fg-l); }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 2vw, 32px);
  row-gap: clamp(24px, 4vw, 56px);
}

/* Body-Defaults in Sektionen */
.S p { color: var(--fg-d-2); font-size: 16px; line-height: 1.6; max-width: 64ch; }
.S.white p { color: var(--fg-l-2); }
.S p b { color: var(--fg-d); font-weight: 600; }
.S.white p b { color: var(--fg-l); }
.S .lead-p { color: var(--fg-d); }
.S.white .lead-p { color: var(--fg-l); }
.S em.l { font-style: normal; color: var(--lime); }
.S.white em.l { font-style: normal; color: var(--lime-dark); }   /* Lime-Text auf Weiß = Build-Fehler */
.S em.c { font-style: normal; color: var(--cyan); }

/* ==========================================================================
   KAPITEL-KOPF .head — Rail-Nummer + Kicker + Statement + Deck (§7.2)
   ========================================================================== */
.head {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
  margin-bottom: clamp(56px, 8vw, 96px);
}
.head .num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--cyan);                 /* Kapitel-Nummern in Marken-Cyan */
  padding-top: 14px;
  border-top: 1px solid var(--line-d-2);
}
.S.white .head .num { color: var(--cyan-ink); border-top-color: var(--line-l-2); }

.head .meta { display: flex; flex-direction: column; gap: 18px; max-width: 920px; }
.head .kicker {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-d-2);
}
.S.white .head .kicker { color: var(--fg-l-2); }

.head h2 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(40px, 5.5vw, 84px);
  line-height: 0.95;
  letter-spacing: 0.015em;
}
.head h2 em { font-style: normal; color: var(--lime); }
.S.white .head h2 em { color: var(--lime-dark); }

.head .deck {
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.55;
  color: var(--fg-d-2);
  max-width: 60ch;
  font-weight: 400;
}
.S.white .head .deck { color: var(--fg-l-2); }
.head .deck b { color: var(--fg-d); font-weight: 600; }
.S.white .head .deck b { color: var(--fg-l); }

@media (max-width: 720px) {
  .head { grid-template-columns: 1fr; }
  .head .num { padding-top: 0; border-top: none; }
}

/* ==========================================================================
   MARKER-BLOCK .marker — Stempel: Lime-Fläche, schwarzer Mono-Text (§7.3)
   Ersetzt auf Weiß jeden Lime-Text.
   ========================================================================== */
.marker {
  display: inline-block;
  width: fit-content;
  align-self: flex-start;
  background: var(--lime);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.4;
  padding: 4px 10px;
}

/* ==========================================================================
   AKT-TRENNER .act-type (typografisch) / .act (Vollbild-Foto) (§7.4)
   Plus-Marker .plus: Signatur-Rotation 2/2 — dreht beim Reveal einmal 90° (§6)
   ========================================================================== */
.plus {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  color: var(--lime);
  transition: transform 320ms var(--ease);
}
.rv.in .plus, .plus.in { transform: rotate(90deg); }

.act-type {
  background: var(--ink);
  padding: clamp(80px, 10vw, 140px) 0 clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--line-d);
}
.act-type .inner {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: clamp(24px, 3vw, 48px);
}
.act-type .n {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--lime);
  padding-top: 14px;
  border-top: 1px solid var(--lime);
}
.act-type .n .plus { font-size: 13px; margin-right: 6px; }
.act-type h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(56px, 8.5vw, 120px);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--fg-d);
}
.act-type h2 em { font-style: normal; color: var(--lime); }
.act-type .sub {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-d-2);
  margin-top: 24px;
  max-width: 52ch;
  line-height: 1.8;
}
@media (max-width: 720px) { .act-type .inner { grid-template-columns: 1fr; } }

.act {
  position: relative;
  min-height: 72vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
}
.act > img,
.act > video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.act::after {
  content: "";
  position: absolute; inset: 0;
  /* Foto-Overlay: schwarz, von unten, max 80% Deckung (§3) */
  background: linear-gradient(180deg, rgba(10,10,10,0) 35%, rgba(10,10,10,0.8) 100%);
}
.act .inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(48px, 7vw, 88px);
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: clamp(24px, 3vw, 48px);
}
.act .n {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--lime);
  padding-top: 14px;
  border-top: 1px solid var(--lime);
}
.act .n .plus { font-size: 13px; margin-right: 6px; }
.act h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(56px, 8.5vw, 120px);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--fg-d);
}
.act h2 em { font-style: normal; color: var(--lime); }
.act .sub {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-d-2);
  margin-top: 24px;
  max-width: 52ch;
  line-height: 1.8;
}
@media (max-width: 720px) { .act .inner { grid-template-columns: 1fr; } }

/* ==========================================================================
   FIGURE-TAG .tag — Mono-Caption auf Fotos, schwarz hinterlegt, OPAK (§7.5)
   ========================================================================== */
.tag {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.ph .tag, .visual .cap, .mos .c .tag, .pack-hero .cap, .artwork .cap {
  position: absolute;
  left: 16px; bottom: 16px;
  color: var(--white);
  background: var(--ink);            /* opak, kein rgba */
  padding: 7px 10px;
  border-left: 2px solid var(--lime);
}
.mos .c .tag { left: 12px; bottom: 12px; padding: 6px 10px; }

/* ==========================================================================
   IMG-STAGE — einheitliches Treatment für Stage-Fotos (§8)
   ========================================================================== */
.img-stage { filter: grayscale(0.12) contrast(1.04) brightness(0.92); }

/* ==========================================================================
   SPLIT — Copy + Portrait-Visual (Bestand 01)
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: var(--rail) 6fr 5fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
.split .spacer {}
.split .copy { display: flex; flex-direction: column; gap: 18px; }
.split .copy .lead-p {
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.5;
  color: var(--fg-d);
  font-weight: 600;
  max-width: 34ch;
  margin: 0 0 16px;
}
.S.white .split .copy .lead-p { color: var(--fg-l); }
.split .visual {
  position: relative;
  aspect-ratio: 4/5;
  background: var(--ink-2);
  overflow: hidden;
}
.S.white .split .visual { background: var(--white); border: 1px solid var(--line-l); }
.split .visual img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ==========================================================================
   FACTS — schlanke Zeile ohne Boxen
   ========================================================================== */
.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--line-d);
  border-bottom: 1px solid var(--line-d);
  margin-top: var(--block-gap);
}
.S.white .facts { border-color: var(--line-l); }
.facts .f .k {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-d-3);
  margin-bottom: 6px;
}
.S.white .facts .f .k { color: var(--fg-l-3); }
.facts .f .v {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(18px, 1.5vw, 22px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--fg-d);
}
.S.white .facts .f .v { color: var(--fg-l); }
@media (max-width: 720px) { .facts { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   BRIEF-COLS — These/Antithese; Akzentspalte mit Lime-Topline (§7.8)
   ========================================================================== */
.brief {
  display: grid;
  grid-template-columns: var(--rail) 1fr 1fr;
  gap: clamp(24px, 3vw, 48px);
}
.brief .spacer {}
.brief .col { padding-top: 18px; border-top: 1px solid var(--line-d); }
.S.white .brief .col { border-top-color: var(--line-l); }
.brief .col.accent { border-top: 2px solid var(--lime); }
.brief .col .tag {
  color: var(--fg-d-3);
  margin-bottom: 16px;
}
.S.white .brief .col .tag { color: var(--fg-l-3); }
.brief .col h3 {
  font-family: var(--heading);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 14px;
  color: var(--fg-d);
}
.S.white .brief .col h3 { color: var(--fg-l); }
@media (max-width: 820px) { .brief { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   02 · COUNTER-DUO — Bild links (Evaluating Packaging), rechts The Ask /
   The Answer untereinander. Rail-Spacer hält die Flucht zur Headline.
   -------------------------------------------------------------------------- */
.counter-duo {
  display: grid;
  grid-template-columns: var(--rail) 0.9fr 1.1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
  margin-top: var(--block-gap);
}
.counter-duo .ce-img { margin: 0; }
.counter-duo .ce-img img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line-l);
  background: var(--ink);
}
.counter-duo .ce-img figcaption { margin-top: 14px; }
.counter-duo .ce-cols.brief {            /* .brief-Grid auf gestapelt umbiegen */
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.5vw, 48px);
}
@media (max-width: 820px) {
  .counter-duo { grid-template-columns: 1fr; gap: 28px; }
}

/* --------------------------------------------------------------------------
   06 · PHOTO-TRACK — die Bildpaar-Logik GROSS. Pro Produkt ein volles
   Diptychon über die ganze Breite: Packshot (Studio-Bühne) ↔ Anwendung
   (Einsatz). Bilder sind der Star — je ~halbe Spaltenbreite, quadratisch.
   -------------------------------------------------------------------------- */
.photo-track {
  margin-top: var(--block-gap);
  display: grid;
  gap: clamp(32px, 4vw, 64px);
}
.photo-track .pp { margin: 0; display: block; }
.photo-track .duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  background: var(--ink);
}
.photo-track .ph {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  min-width: 0;               /* Grid-Item darf schrumpfen — sonst Track-Blowout */
  background: var(--ink);
}
.photo-track .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-track .ph .t {
  position: absolute;
  left: 14px; bottom: 14px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--ink);
  padding: 7px 12px;
  border-left: 2px solid var(--lime);
  z-index: 2;
}
.photo-track figcaption {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-l);
  font-family: var(--heading);
  font-weight: 700;
  font-size: clamp(18px, 1.8vw, 26px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-l);
}
.photo-track figcaption .id {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--cyan-ink);
}
@media (max-width: 720px) {
  .photo-track .duo { grid-template-columns: 1fr; gap: 2px; }
}

/* ==========================================================================
   PULL-QUOTE — Rail-Label + Display-Zitat (§7.6)
   ========================================================================== */
.pull {
  margin-top: clamp(64px, 8vw, 120px);
  padding: 48px 0;
  border-top: 1px solid var(--line-d);
  border-bottom: 1px solid var(--line-d);
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: clamp(24px, 3vw, 48px);
}
.S.white .pull { border-color: var(--line-l); }
.pull .lab {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-d-3);
}
.S.white .pull .lab { color: var(--fg-l-3); }
.pull blockquote {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.02;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  max-width: 24ch;
  color: var(--fg-d);
}
.S.white .pull blockquote { color: var(--fg-l); }
.pull blockquote em { font-style: normal; color: var(--lime); }
.S.white .pull blockquote em { color: var(--lime-dark); }
@media (max-width: 720px) { .pull { grid-template-columns: 1fr; } }

/* ==========================================================================
   PILLARS — 3 Spalten, Hairline oben, Mono-Nummer, h4, Body (§7.7)
   ========================================================================== */
.pillars {
  display: grid;
  grid-template-columns: var(--rail) repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
  margin-top: var(--block-gap);
}
.pillars .spacer {}
.pillars .p {
  display: flex; flex-direction: column; gap: 12px;
}
/* Bild bündig oben; quadratische Brand-Kachel mit feiner Outline.
   height:auto nötig — sonst überschreibt das HTML-height-Attribut (1080)
   die aspect-ratio und das Bild wird hochkant gestreckt/falsch beschnitten. */
.pillars .p .p-img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--line-d);
  background: var(--ink);
}
.S.white .pillars .p .p-img { border-color: var(--line-l); }
/* Hairline-Regel jetzt zwischen Bild und Text (statt über der ganzen Karte) */
.pillars .p .n {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lime);
  padding-top: 16px;
  border-top: 1px solid var(--line-d);
}
.S.white .pillars .p .n { border-top-color: var(--line-l); }
.S.white .pillars .p .n { color: var(--lime-dark); }
.pillars .p h4 {
  font-family: var(--heading);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--fg-d);
}
.S.white .pillars .p h4 { color: var(--fg-l); }
.pillars .p p { font-size: 15px; max-width: none; }
@media (max-width: 820px) { .pillars { grid-template-columns: 1fr; } }

/* ==========================================================================
   CLAIM-STRIP — Punkt-Triade (max 1× pro Akt, §4)
   ========================================================================== */
.claim {
  display: grid;
  grid-template-columns: var(--rail) repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: 32px;
  border-top: 1px solid var(--line-d);
}
.S.white .claim { border-top-color: var(--line-l); }
.claim .spacer {}
.claim .w { display: flex; flex-direction: column; gap: 10px; }
.claim .w .word {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(64px, 9vw, 144px);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--fg-d);
}
.S.white .claim .w .word { color: var(--fg-l); }
.claim .w.accent .word { color: var(--lime); }
.S.white .claim .w.accent .word { color: var(--lime-dark); }
.claim .w .sub {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-d-2);
}
.S.white .claim .w .sub { color: var(--fg-l-2); }
@media (max-width: 720px) { .claim { grid-template-columns: 1fr; } }
/* DE: längere Wörter (Einfach./Schnell./Sauber.) — Claim-Wort etwas kleiner,
   damit die 1fr-Spalten nicht über den Container hinauswachsen. Nur DE-Seite. */
html[lang="de"] .claim .w .word { font-size: clamp(48px, 7.4vw, 110px); }

/* ==========================================================================
   SKU-GRID — weiße Packshot-Karten, Mono-Labels (§7.9)
   ========================================================================== */
.sku-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  margin-top: var(--block-gap);
  background: var(--line-d);
  border: 1px solid var(--line-d);
}
.S.white .sku-grid { background: var(--line-l); border-color: var(--line-l); }
.sku-grid .s {
  background: var(--white);
  color: var(--fg-l);
  padding: 18px 14px;
  display: flex; flex-direction: column;
  position: relative;
}
.sku-grid .s .id {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-l-3);
}
.sku-grid .s .nm {
  font-family: var(--heading);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.1;
  margin-top: 4px;
  color: var(--fg-l);
}
.sku-grid .s .img {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 0;          /* Packshots: 24px Innenabstand (§8) */
}
.sku-grid .s .img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sku-grid .s .foot {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-l-3);
  padding-top: 12px;
  border-top: 1px solid var(--line-l);
}
.sku-grid .s .foot .dot { width: 8px; height: 8px; background: var(--lime); }
@media (max-width: 1100px) { .sku-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .sku-grid { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   FEAT — Bild links, Copy rechts (alternierend)
   ========================================================================== */
.feat {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 1px;
  margin-top: var(--block-gap);
  background: var(--line-d);
}
.S.white .feat { background: var(--line-l); }
.feat.rev { grid-template-columns: 5fr 7fr; }
.feat .ph { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--ink); }
.feat .ph img { width: 100%; height: 100%; object-fit: cover; }
.feat .ph .ovl {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0) 50%, rgba(10,10,10,0.8) 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 28px;
}
.feat .ph .ovl .tag {
  position: static;
  background: none; border: none; padding: 0;
  color: var(--lime);
  margin-bottom: 6px;
}
.feat .ph .ovl .nm {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 48px);
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--fg-d);
  line-height: 0.95;
}
.feat .copy {
  background: var(--ink-2);
  padding: clamp(28px, 3.5vw, 48px);
  display: flex; flex-direction: column; gap: 18px; justify-content: center;
}
.S.white .feat .copy { background: var(--white); }
.feat .copy h4 {
  font-family: var(--heading);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--fg-d);
}
.S.white .feat .copy h4 { color: var(--fg-l); }
.feat .copy p { color: var(--fg-d-2); font-size: 15px; line-height: 1.55; max-width: none; }
.S.white .feat .copy p { color: var(--fg-l-2); }
.feat .copy .specs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line-d);
}
.S.white .feat .copy .specs { border-top-color: var(--line-l); }
.feat .copy .specs .k {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-d-3);
  margin-bottom: 4px;
}
.S.white .feat .copy .specs .k { color: var(--fg-l-3); }
.feat .copy .specs .v {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg-d);
}
.S.white .feat .copy .specs .v { color: var(--fg-l); }
@media (max-width: 900px) { .feat, .feat.rev { grid-template-columns: 1fr; } }

/* ==========================================================================
   MOSAIK — 12-col Magazin-Raster
   ========================================================================== */
.mos {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1px;
  margin-top: var(--block-gap);
  background: var(--line-d);
  border: 1px solid var(--line-d);
}
.S.white .mos { background: var(--line-l); border-color: var(--line-l); }
.mos .c { position: relative; overflow: hidden; background: var(--ink); }
.mos .c img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mos .a { grid-column: span 5; aspect-ratio: 4/5; }
.mos .b { grid-column: span 7; aspect-ratio: 16/11; }
.mos .d { grid-column: span 4; aspect-ratio: 1/1; }
.mos .e { grid-column: span 4; aspect-ratio: 1/1; }
.mos .f { grid-column: span 4; aspect-ratio: 1/1; }
.mos .g { grid-column: span 12; aspect-ratio: 24/8; }

/* Packshot-Variante auf Weiß */
.mos.white-imgs .c { background: var(--white); }
.mos.white-imgs .c img { object-fit: contain; padding: 24px; filter: none; }
.mos.white-imgs .c .tag { border-left-color: var(--lime); }

@media (max-width: 800px) { .mos > * { grid-column: 1 / -1 !important; aspect-ratio: 4/3; } }

/* ==========================================================================
   PACK-HERO + ARTWORK + PACK-TRIO
   ========================================================================== */
.pack-hero {
  position: relative;
  aspect-ratio: 21/9;
  overflow: hidden;
  margin-top: var(--block-gap);
}
.pack-hero img { width: 100%; height: 100%; object-fit: cover; }
.pack-hero.fit { aspect-ratio: 16/7; background: var(--white); border: 1px solid var(--line-l); }
.pack-hero.fit img { object-fit: contain; padding: 24px; }

.artwork { position: relative; margin-top: var(--block-gap); border: 1px solid var(--line-l); }
.artwork img { width: 100%; height: auto; display: block; }

/* SHELF-PACKS — alle Retail-Packs nebeneinander auf einer Standlinie,
   nur Bezeichnung darunter. GEMEINSAME Höhe (kein Spalten-Cap), damit der
   quadratische Easy-Pack genauso gross wird wie die hohen Boxen. */
.shelf-packs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;            /* gemeinsame Standlinie unten */
  gap: clamp(32px, 4vw, 60px);      /* EIN einheitlicher Abstand zwischen den Packs */
  margin-top: var(--block-gap);
  padding: clamp(28px, 4vw, 52px) 0 clamp(18px, 2vw, 28px);
  border-top: 1px solid var(--line-l);
  border-bottom: 1px solid var(--line-l);
}
.shelf-packs .it {
  flex: 0 0 auto;                   /* Breite = Bildbreite → Abstände zwischen den Packs gleich */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.shelf-packs .it img {
  height: clamp(280px, 31vw, 430px);
  width: auto;
  object-fit: contain;
}
@media (max-width: 600px) {
  .shelf-packs { gap: 28px clamp(20px, 6vw, 40px); }
  .shelf-packs .it img { height: clamp(210px, 44vw, 300px); }
}
.shelf-packs .it .tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-l-3);
  text-align: center;
  line-height: 1.5;
}
.shelf-packs .it .tag b {
  font-family: var(--heading);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  display: block;
  margin-top: 2px;
  color: var(--fg-l);
}

/* PK-FEATURE — Stanze bzw. Case als eigenständiges Bild, nur Bezeichnung. */
.pk-feature {
  margin: var(--block-gap) 0 0;
}
.pk-feature img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line-l);
  background: var(--white);
}
.pk-feature figcaption { margin-top: 12px; }
.pk-feature.is-case { max-width: 460px; }   /* Case ist nativ klein (400px) */

/* PK-PAIR — Stanze (50% Breite) links, Case rechts daneben. */
.pk-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin-top: var(--block-gap);
}
.pk-pair .pk-feature { margin: 0; }
.pk-pair .pk-feature.is-case { justify-self: center; }
@media (max-width: 720px) { .pk-pair { grid-template-columns: 1fr; gap: 28px; } }

/* SEC-HERO — Sektions-Auftakt als Vollbild-Banner mit Headline drauf.
   Direkt unter .S (ausserhalb .wrap) → volle Viewport-Breite. .lead-hero
   nimmt das Top-Padding der Sektion weg, damit der Banner buendig oben sitzt. */
.S.lead-hero { padding-top: 0; }
.sec-hero {
  position: relative;
  min-height: clamp(380px, 56vh, 660px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
}
.sec-hero > img,
.sec-hero > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sec-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,8,8,0.10) 0%, rgba(8,8,8,0) 40%, rgba(8,8,8,0.82) 100%);
}
.sec-hero .inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(36px, 5vw, 72px);
  display: grid;
  grid-template-columns: var(--rail) 1fr;   /* Rail-Nummer wie .head (07/VOICE) */
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
.sec-hero .num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--cyan);                 /* Kapitel-Nummer in Marken-Cyan */
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.4);   /* helle Hairline auf dem Bild */
}
.sec-hero .meta { display: flex; flex-direction: column; gap: 16px; max-width: 920px; }
.sec-hero .kicker {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-d);
}
.sec-hero h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 92px);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--fg-d);
}
.sec-hero h2 em { font-style: normal; color: var(--lime); }
.sec-hero .meta .deck { color: var(--fg-d-2); margin: 0; max-width: 64ch; }
.sec-hero .meta .deck b { color: var(--fg-d); font-weight: 600; }
@media (max-width: 720px) {
  .sec-hero .inner { grid-template-columns: 1fr; gap: 14px; }
  .sec-hero .num { padding-top: 0; border-top: none; }
}

/* ==========================================================================
   FUNNEL — Text-Steps in 4 Spalten
   ========================================================================== */
.funnel {
  display: grid;
  grid-template-columns: var(--rail) repeat(4, 1fr);
  gap: clamp(24px, 3vw, 40px);
  margin-top: var(--block-gap);
}
.funnel .spacer {}
.funnel .step { padding-top: 18px; border-top: 2px solid var(--lime); }
.funnel .step .n {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lime);
}
.S.white .funnel .step .n { color: var(--lime-dark); }
.funnel .step h4 {
  font-family: var(--heading);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 10px;
  line-height: 1.15;
  color: var(--fg-d);
}
.S.white .funnel .step h4 { color: var(--fg-l); }
.funnel .step p { font-size: 15px; margin-top: 12px; max-width: none; }
@media (max-width: 900px) { .funnel { grid-template-columns: 1fr 1fr; } .funnel .spacer { display: none; } }
@media (max-width: 600px) { .funnel { grid-template-columns: 1fr; } }

/* ==========================================================================
   STEPS — nummerierte Narrative-Zeilen
   ========================================================================== */
.steps {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: clamp(24px, 3vw, 48px);
  margin-top: var(--block-gap);
}
.steps .spacer {}
.steps .list { display: grid; gap: 0; }
.steps .row {
  display: grid;
  grid-template-columns: 80px 200px 1fr;
  gap: 32px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line-d);
  align-items: baseline;
}
.S.white .steps .row { border-bottom-color: var(--line-l); }
.steps .row:first-child { border-top: 1px solid var(--line-d); }
.S.white .steps .row:first-child { border-top-color: var(--line-l); }
.steps .row .n {
  font-family: var(--display);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: 0.02em;
  color: var(--lime);
  line-height: 1;
}
.S.white .steps .row .n { color: var(--lime-dark); }
.steps .row .h {
  font-family: var(--heading);
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--fg-d);
}
.S.white .steps .row .h { color: var(--fg-l); }
.steps .row p { color: var(--fg-d-2); font-size: 15px; line-height: 1.55; max-width: 60ch; margin: 0; }
.S.white .steps .row p { color: var(--fg-l-2); }
@media (max-width: 800px) {
  .steps { grid-template-columns: 1fr; }
  .steps .row { grid-template-columns: 60px 1fr; row-gap: 4px; }
  .steps .row .h { grid-column: 2; }
  .steps .row p { grid-column: 1 / -1; }
}

/* ==========================================================================
   RESULTS — Kennzahl + Caption (Coda)
   ========================================================================== */
.results {
  display: grid;
  grid-template-columns: var(--rail) repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
  margin-top: var(--block-gap);
}
.results .spacer {}
.results .r {
  position: relative;
  display: flex; flex-direction: column; gap: 16px;
  padding-top: 22px;
  border-top: 1px solid var(--line-d);
}
.results .r::before {
  content: "";
  position: absolute;
  top: -2px; left: 0;
  width: 34px; height: 3px;
  background: var(--lime);
}
.S.white .results .r { border-top-color: var(--line-l); }
.S.white .results .r::before { background: var(--lime-dark); }
.results .r .lab {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lime);
}
.S.white .results .r .lab { color: var(--lime-dark); }
.results .r .big {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 34px);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.1;
  text-wrap: balance;
  color: var(--fg-d);
}
.results .r .big em { font-style: normal; color: var(--lime); }
.S.white .results .r .big { color: var(--fg-l); }
.S.white .results .r .big em { color: var(--lime-dark); }
.results .r p {
  margin-top: auto;
  padding-top: 16px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-d-2);
  max-width: 32ch;
}
.S.white .results .r p { color: var(--fg-l-2); }
@media (max-width: 900px) { .results { grid-template-columns: 1fr 1fr; } .results .spacer { display: none; } }
@media (max-width: 600px) { .results { grid-template-columns: 1fr; } }

/* ==========================================================================
   SCOPE — Inventar, zwei Spalten
   ========================================================================== */
.scope {
  display: grid;
  grid-template-columns: var(--rail) 1fr 1fr;
  gap: clamp(24px, 3vw, 56px);
  margin-top: var(--block-gap);
}
.scope .spacer {}
.scope .col h4 {
  font-family: var(--heading);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--lime);
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-d);
}
.S.white .scope .col h4 { color: var(--lime-dark); border-bottom-color: var(--line-l); }
.scope .col ul { list-style: none; padding: 0; margin: 0; }
.scope .col li {
  font-size: 15px;
  color: var(--fg-d-2);
  padding: 14px 0 14px 22px;
  border-bottom: 1px dashed var(--line-d);
  position: relative;
  line-height: 1.55;
}
.S.white .scope .col li { color: var(--fg-l-2); border-bottom-color: var(--line-l); }
.scope .col li::before {
  content: "+";
  font-family: var(--mono);
  font-size: 13px;
  color: var(--lime);
  position: absolute;
  left: 0;
  top: 14px;
}
.S.white .scope .col li::before { color: var(--lime-dark); }
.scope .col li b { color: var(--fg-d); font-weight: 600; }
.S.white .scope .col li b { color: var(--fg-l); }
@media (max-width: 800px) { .scope { grid-template-columns: 1fr; } }

/* ==========================================================================
   STATS — Kennzahlen-Band (Count-Up via Engine, data-count)
   ========================================================================== */
.stats {
  background: var(--ink);
  border-top: 1px solid var(--line-d);
  padding: clamp(48px, 6vw, 80px) 0;
}
.stats .row {
  display: grid;
  grid-template-columns: var(--rail) repeat(4, 1fr);
  gap: clamp(24px, 3vw, 48px);
}
.stats .s { padding-top: 16px; border-top: 1px solid var(--line-d-2); }
.stats .s .big {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, 4.5vw, 64px);
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--fg-d);
}
.stats .s .big.accent { color: var(--lime); }
.stats .s .lab {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-d-2);   /* 11px → hellerer Token (--fg-d-3 ist erst ≥12px erlaubt) */
  margin-top: 12px;
}
@media (max-width: 900px) { .stats .row { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   OUTRO + SIGN-OFF + FOOT
   ========================================================================== */
.outro {
  background: var(--ink);
  padding: var(--sec-pad) 0 0;
  position: relative;
  overflow: hidden;
}
.outro .top {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: clamp(24px, 3vw, 48px);
  margin-bottom: var(--block-gap);
}
.outro .top .num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--fg-d-3);
  padding-top: 14px;
  border-top: 1px solid var(--line-d-2);
}
.outro .top .kicker {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-d-2);
  margin-bottom: 16px;
  display: block;
}
.outro h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, 5.5vw, 84px);
  line-height: 0.95;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  margin-bottom: 32px;
}
.outro h2 em { font-style: normal; color: var(--lime); }
.outro p { color: var(--fg-d-2); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.55; max-width: 64ch; }
.outro p b { color: var(--fg-d); font-weight: 600; }

.signoff {
  margin-top: clamp(80px, 10vw, 140px);
  padding: 64px 0;
  border-top: 1px solid var(--line-d);
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: clamp(24px, 3vw, 48px);
}
.signoff .num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--fg-d-3);
}
.signoff .big {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(64px, 9.5vw, 144px);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--fg-d);
}
.signoff .big em { font-style: normal; color: var(--lime); }

.foot {
  margin-top: 80px;
  padding: 24px var(--gutter);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-d-2);   /* 11px Footer → hellerer Token */
  border-top: 1px solid var(--line-d);
}
.foot a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.foot a:hover, .foot a:focus-visible { color: var(--lime); }
@media (max-width: 720px) { .outro .top, .signoff { grid-template-columns: 1fr; } }

/* ==========================================================================
   REVEAL-BASIS .rv — mechanisch, kurz, präzise (§6)
   Engine setzt .in; Stagger über --rv-i (60ms-Schritte, max 6 Stufen).
   ========================================================================== */
.rv {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 240ms var(--ease),
    transform 320ms var(--ease);
  transition-delay: calc(var(--rv-i, 0) * 60ms);
}
.rv.in { opacity: 1; transform: none; }

/* Bild-Wipe von unten, 320ms */
.rv img, img.rv {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 320ms var(--ease);
  transition-delay: calc(var(--rv-i, 0) * 60ms);
}
.rv.in img, img.rv.in { clip-path: inset(0 0 0 0); }

/* Ohne JS: alles sofort sichtbar */
html:not(.js) .rv { opacity: 1; transform: none; }
html:not(.js) .rv img, html:not(.js) img.rv { clip-path: none; }

/* Reduced Motion: alles aus, sofort sichtbar */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv, .rv img, img.rv, .plus {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .bar .l .dot { animation: none; }
}

/* ==========================================================================
   PRINT — vom Bestand portiert
   ========================================================================== */
@media print {
  .bar, .progress { display: none; }
  .S { padding: 32px 0; }
  section { page-break-inside: avoid; }
  .rv, .rv img, img.rv {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}

/* ==========================================================================
   TWISSTAR · Case Study v3 — 01 OPEN (Hero + Stats)
   Port der .hero*-Anatomie aus case-study-v2.css auf die v3-Tokens
   (design-system.md, bindend). .stats kommt vollständig aus
   00-foundation.css — hier nur die Screenreader-Überschrift der Sektion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO — "Vier Ecken": Meta in den oberen Ecken, Headline unten-links,
   Steckbrief unten-rechts. Die Mitte bleibt frei — das TWISSTAR-Emblem im
   Foto steht für sich. Foto deutlich aufgehellt; eine Vignette dunkelt nur
   die Ränder ab (wo Text liegt), die Mitte/Emblem bleibt hell.
   Genau EIN Lime-Moment im Viewport: die em-Titelzeile.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
  padding-top: 56px;            /* Platz für die fixe Top-Bar */
}

/* Bild als <img> (LCP: width/height gesetzt, KEIN loading="lazy").
   Deutlich heller als zuvor (brightness 0.4 → 0.66) — die Vignette
   (.hero-grad) übernimmt die Textabsicherung an den Rändern. */
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 32% center;   /* Emblem etwas aus der Mitte nach rechts → linke Ecke frei für die Headline */
  filter: grayscale(0.04) contrast(1.05) saturate(1.06);   /* KEINE Abdunklung mehr — Emblem in voller Helligkeit */
  z-index: -2;
}

/* Vignette, die NUR die Text-Zonen abdunkelt — die vertikale Bildmitte
   (Emblem) bleibt komplett frei/hell:
   1) radial unten-links → backt die Headline-Ecke (Emblem sitzt mittig-rechts,
      außerhalb dieses Radius);
   2) vertikales Band → dunkelt oberen Rand (Meta) und unteren Rand
      (Steckbrief + Headline-Boden), Mitte (≈26–64 %) bleibt transparent. */
.hero-grad {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(125% 95% at 0% 100%, rgba(8,8,8,0.80) 0%, rgba(8,8,8,0) 50%),
    linear-gradient(180deg,
      rgba(8,8,8,0.66) 0%,
      rgba(8,8,8,0) 26%,
      rgba(8,8,8,0) 64%,
      rgba(8,8,8,0.64) 100%);
  z-index: -1;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: none;                  /* volle Viewport-Breite: echte Bildschirm-Ecken statt 1320er-Wrap */
  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* drückt Meta nach oben, Bottom nach unten → Mitte frei */
  min-height: calc(100vh - 56px);
  min-height: calc(100svh - 56px);
  padding-top: 60px;
  padding-bottom: 44px;
  gap: clamp(40px, 6vw, 80px);
}

/* OBERE KANTE — 00/OPEN links, Kicker rechts */
.hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}
.hero-top .num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--cyan);                 /* Kapitel-Nummer in Marken-Cyan */
  padding-top: 14px;
  border-top: 1px solid var(--line-d-2);
}
.hero-top .kicker {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-d);
  padding-top: 14px;
  border-top: 1px solid var(--line-d-2);
  text-align: right;
}

/* UNTERE KANTE — Headline links, Steckbrief rechts, beide am Boden */
.hero-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(28px, 5vw, 80px);
}

/* Titelblock unten-links — display-hero, em = Lime (einziger Lime-Moment).
   Keine ch-Begrenzung: die <br> steuern die Zeilen, die Spalte begrenzt die Breite. */
.hero-headline { min-width: 0; }
.hero-title {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(42px, 6.4vw, 100px);
  line-height: 0.92;
  letter-spacing: 0.01em;
  color: var(--fg-d);
  text-shadow: 0 2px 30px rgba(0,0,0,0.38);
}
.hero-title em { font-style: normal; color: var(--lime); }
.hero-sub {
  margin: 22px 0 0;
  max-width: 44ch;
  font-family: var(--body);
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.5;
  color: var(--fg-d);
  text-shadow: 0 1px 16px rgba(0,0,0,0.55);
}
.hero-sub b { color: var(--fg-d); font-weight: 600; }

/* Steckbrief unten-rechts — rechtsbündig gestapelt + Scroll-Cue */
.hero-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 18px;
  text-align: right;
}
.hero-meta .fields {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}
.hero-bottom .field { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.hero-bottom .k {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-d-2);
  text-shadow: 0 1px 12px rgba(0,0,0,0.55);
}
.hero-bottom .v {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(16px, 1.4vw, 20px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--fg-d);
  text-shadow: 0 1px 16px rgba(0,0,0,0.45);
}
.hero-bottom .scroll {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-d-2);
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-bottom .scroll .l { width: 32px; height: 1px; background: var(--line-d-2); }

@media (max-width: 820px) {
  /* Hochformat: Overlay-Konzept aufgeben. Bild als Band oben,
     aller Text darunter auf Ink — keine Text-über-Bild-Kollision mehr. */
  .hero {
    min-height: 0;
  }
  .hero-bg {
    position: static;
    display: block;
    width: 100%;
    height: clamp(260px, 44svh, 430px);
    object-position: center;
    filter: none;
  }
  .hero-grad { display: none; }
  .hero-inner {
    min-height: 0;
    padding-top: 28px;
    padding-bottom: 44px;
    gap: 28px;
    justify-content: flex-start;
  }
  .hero-top { flex-direction: column; gap: 10px; }
  .hero-top .kicker { text-align: left; border-top: 0; padding-top: 0; }
  .hero-bottom { grid-template-columns: 1fr; gap: 32px; }
  .hero-headline { max-width: none; }
  .hero-title { text-shadow: none; }
  .hero-sub { max-width: none; text-shadow: none; }
  .hero-meta { align-items: flex-start; text-align: left; }
  .hero-meta .fields {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 18px 36px;
    padding-top: 18px;
    border-top: 1px solid var(--line-d);
    width: 100%;
  }
  .hero-bottom .field { align-items: flex-start; }
  .hero-bottom .k,
  .hero-bottom .v { text-shadow: none; }
  .hero-bottom .scroll { display: none; }
}

@media (max-width: 480px) {
  .hero-bg { height: clamp(230px, 38svh, 340px); }
  .hero-inner { gap: 24px; padding-top: 24px; padding-bottom: 36px; }
  .hero-sub { margin-top: 16px; }
}

/* --------------------------------------------------------------------------
   STATS — Anatomie komplett aus Foundation (.stats). Hier nur die visuell
   versteckte h2 für aria-labelledby (Semantik-Pflicht §10).
   -------------------------------------------------------------------------- */
/* Foundation lässt den Rail-Spacer bei ≤900px stehen (Loch oben links im
   2×2-Raster) — andere Foundation-Grids (.funnel, .results) blenden ihn aus.
   Gleiches Muster hier, scoped auf die Stats-Sektion. */
@media (max-width: 900px) {
  .stats .row .spacer { display: none; }
}

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

/* ==========================================================================
   TWISSTAR · Case Study v3 — 02 ACT I (Trenner + 01 Day Zero + 02 The Counter)
   Nur Selektoren, die 00-foundation.css NICHT abdeckt.
   Trenner (.act-type), .head, .facts, .brief, .pull, .tag, .rv → Foundation.
   ========================================================================== */

/* 01 Day Zero sitzt direkt unter dem Akt-Trenner — Abstand verkürzt
   (ersetzt das Inline-Style des Bestands). */
.sec-dz { padding-top: clamp(48px, 6vw, 80px); }

/* --------------------------------------------------------------------------
   .dz — Day-Zero-Komposition (Pflicht-Fix: kein Leerflächen-Loch mehr).
   Beweisstück (weiße Asservat-Karte) groß an der Rail-Flucht, Copy als
   klare Protokoll-Spalte rechts; Weißraum dort strukturiert das Intake-Log.
   -------------------------------------------------------------------------- */
.dz {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: stretch;
}
.dz .spacer {}

/* Asservat: Packshot pur auf Weiß, object-fit contain, 24px Innenabstand,
   keine Filter (§8) — die weiße Karte ist das Licht auf dem Beweisstück. */
.dz-evidence {
  margin: 0;
  position: relative;
  background: var(--white);
  display: flex;
  flex-direction: column;
}
.dz-strip {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 16px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-l-3);
  border-bottom: 1px solid var(--line-l);
}
.dz-evidence img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 24px;
}
.dz-cap {
  position: absolute;
  left: 16px;
  bottom: 16px;
  margin: 0;
  color: var(--white);
  background: var(--ink);            /* opak (§7.5) */
  padding: 7px 10px;
  border-left: 2px solid var(--lime);
}

/* Copy-Spalte: Hairline-Topline in Rail-Logik, Log bündig zur Kartenunterkante */
.dz-copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line-d-2);
}
.dz-copy .lead-p {
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.5;
  max-width: 34ch;
  margin: 0;
}

/* Intake-Log — Protokoll-Ebene, schließt die Spalte nach unten */
.dz-log {
  margin: auto 0 0;
  padding: 0;
}
.dz-log > div {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px dashed var(--line-d);
}
.dz-log dt {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-d-2);
}
.dz-log dd {
  margin: 0;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--fg-d);
}

@media (max-width: 900px) {
  .dz { grid-template-columns: 1fr; }
  .dz .spacer { display: none; }
  .dz-copy { gap: 16px; }
  .dz-log { margin-top: 10px; }
}

/* Schmale Viewports: Strip-Einträge untereinander statt unschönem Umbruch */
@media (max-width: 480px) {
  .dz-strip { flex-direction: column; gap: 2px; }
}

/* ==========================================================================
   TWISSTAR · Case Study v3 — 03-ACT2A
   Akt-II-Trenner + 03 Strategy + 04 Identity.
   Foundation deckt ab: .act, .head, .pillars, .claim, .marker, .rv.
   Hier: Ports von .logo-card / .palette / .type (v2-Anatomie → v3-Tokens)
   + sektionsspezifische Überleitungszeile .next-note.
   ========================================================================== */

/* ==========================================================================
   NEXT-NOTE — leise Überleitungszeile am Kapitelende (design-system §9)
   ========================================================================== */
.next-note {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: clamp(24px, 3vw, 48px);
  margin-top: var(--block-gap);
}
.next-note .spacer {}
@media (max-width: 720px) { .next-note { grid-template-columns: 1fr; } }

/* ==========================================================================
   LOGO-CARD — Emblem-Showcase | Spezifikation (Port aus case-study-v2.css)
   Das Emblem ist das Werkstück: Original-PNG, KEIN Filter, keine Overlays.
   ========================================================================== */
.logo-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  margin-top: var(--block-gap);
  background: var(--white);
  color: var(--fg-l);
  border: 1px solid var(--line-l);
}
.logo-card .show {
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 64px;
  min-height: 380px;
  border-right: 1px solid var(--line-l);
}
.logo-card .show img {
  width: min(60%, 300px);
  height: auto;
  filter: none;                      /* Fixpunkt: unverändert */
}
.logo-card .copy {
  padding: clamp(28px, 3.5vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.logo-card .copy h3 {
  font-family: var(--heading);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-l);
}
.logo-card .copy p {
  color: var(--fg-l-2);
  font-size: 15px;
  line-height: 1.55;
  max-width: 64ch;
}
.logo-card .copy ul {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}
.logo-card .copy li {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--fg-l-3);
}
.logo-card .copy li b {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg-l);
  margin-top: 4px;
}
@media (max-width: 900px) {
  .logo-card { grid-template-columns: 1fr; }
  .logo-card .show {
    border-right: none;
    border-bottom: 1px solid var(--line-l);
    padding: 48px 24px;
    min-height: 0;
  }
}

/* ==========================================================================
   PALETTE — Markenwerte als Band (Port aus case-study-v2.css)
   Lime auf Weiß nur als Fläche (Swatch); Reihenfolge trennt Lime von Cyan.
   ========================================================================== */
.palette {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  margin-top: clamp(48px, 6vw, 80px);
  border: 1px solid var(--line-d);
}
.S.white .palette { border-color: var(--line-l); }
.palette .sw {
  padding: 28px 24px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--line-d);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.S.white .palette .sw { border-right-color: var(--line-l); }
.palette .sw:last-child { border-right: none; }
.palette .sw .name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.02em;
}
.palette .sw .hex { opacity: 0.7; }
.palette .sw.k  { background: var(--ink);   color: var(--fg-d); }
.palette .sw.cy { background: var(--cyan);  color: var(--ink); }
.palette .sw.li { background: var(--lime);  color: var(--ink); }
.palette .sw.pa { background: var(--white); color: var(--ink); }
.S.white .palette .sw.pa { box-shadow: inset 0 0 0 1px var(--line-l); }
@media (max-width: 820px) {
  .palette { grid-template-columns: 1fr 1fr; }
  .palette .sw { border-right: none; border-bottom: 1px solid var(--line-d); min-height: 160px; }
  .S.white .palette .sw { border-bottom-color: var(--line-l); }
  .palette .sw:nth-last-child(-n+2) { border-bottom: none; }
  /* 2×2: Lime vor White ziehen → Cyan/Lime liegen diagonal, nie benachbart */
  .palette .sw.li { order: 1; }
  .palette .sw.pa { order: 2; }
}

/* ==========================================================================
   TYPE — Spezimen Display/Body (Port aus case-study-v2.css)
   ========================================================================== */
.type {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: clamp(40px, 5vw, 64px);
  border: 1px solid var(--line-d);
}
.S.white .type { border-color: var(--line-l); }
.type .cell {
  padding: 36px 32px;
  border-right: 1px solid var(--line-d);
}
.S.white .type .cell { border-right-color: var(--line-l); }
.type .cell:last-child { border-right: none; }
.type .cell .lab {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-d-3);
  margin-bottom: 22px;
}
.S.white .type .cell .lab { color: var(--fg-l-3); }
.type .cell .disp {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(56px, 7vw, 112px);
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--fg-d);
}
.S.white .type .cell .disp { color: var(--fg-l); }
.type .cell .body {
  font-family: var(--body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--fg-d-2);
  margin-top: 12px;
  max-width: 44ch;
}
.S.white .type .cell .body { color: var(--fg-l-2); }
.type .cell .meta {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-d-3);
  margin-top: 28px;
}
.S.white .type .cell .meta { color: var(--fg-l-3); }
@media (max-width: 720px) {
  .type { grid-template-columns: 1fr; }
  .type .cell { border-right: none; border-bottom: 1px solid var(--line-d); }
  .S.white .type .cell { border-bottom-color: var(--line-l); }
  .type .cell:last-child { border-bottom: none; }
}

/* ==========================================================================
   TWISSTAR · Case Study v3 — 04 AKT II/b (05 Product Line + 06 Photography)
   Nur Ergänzungen zur Foundation (00-foundation.css). Sektion 05 kommt
   vollständig mit Bestandskomponenten aus (head, sku-grid, feat) und
   braucht hier kein eigenes CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   05 · FIX .sku-grid — zwei Render-Bugs der Foundation-Karte (Hinweis für
   Foundation im Report, hier scoped behoben, Anatomie unverändert):
   1. Große intrinsische Packshot-Breiten (1080–1200px) sprengen die
      1fr-Tracks (min-width:auto von Grid-Items, kein overflow:hidden).
   2. max-height:100% des Packshots kollabiert in der Kette
      aspect-ratio-Karte → flex:1-.img → %-Bild auf 0px (Blink).
   Alle sechs SKU-Bilder sind quadratisch → Breite führt, 1:1 hält die Höhe.
   -------------------------------------------------------------------------- */
.sku-grid .s { min-width: 0; }
.sku-grid .s .img {
  position: relative;
  aspect-ratio: 2 / 3;         /* HOCHKANT → die hohen Packshots werden gross
                                  (definite Höhe, entkoppelt vom Flex-Bug) */
  flex: 0 0 auto;              /* nie kollabieren, nie quetschen */
  margin-top: 14px;
}
.sku-grid .s .img img {
  position: absolute;          /* entkoppelt vom Flex-Sizing: Prozente lösen
                                  sich gegen den fertig layouteten Slot auf */
  top: 8px; left: 0;
  width: 100%;
  height: calc(100% - 16px);
  max-height: none;
  object-fit: contain;
}
.sku-grid .s .foot span { white-space: nowrap; }  /* „SEMI-PRO" bricht sonst am
                                                     Bindestrich → ungleiche Karten */

/* --------------------------------------------------------------------------
   06 · MOS-DUO — Doppel-Mosaik als Kontrast-Pointe (Brief, Pflicht-Fix c).
   Reihe 1 (white-imgs, contain) und Reihe 2 (dunkel, cover) teilen das
   identische 12-col-Raster der Foundation; dazwischen liegt exakt 1px Fuge.
   Die Fuge ist Ink — eine harte Kante, kein Abstand.
   -------------------------------------------------------------------------- */
.mos-duo {
  margin-top: var(--block-gap);
  display: grid;
  row-gap: 1px;               /* DIE Fuge */
  background: var(--ink);     /* Fuge zeigt Ink — harte Kante */
}
.mos-duo .mos { margin-top: 0; }                 /* Foundation-Margin neutralisieren */
.mos-duo .mos:first-child { border-bottom: 0; }  /* keine Doppel-Linien an der Fuge */
.mos-duo .mos:last-child  { border-top: 0; }

/* Reihe 2: dunkler Monolith auf weißer Bühne — innere Fugen + Rahmen in Ink,
   damit der Block geschlossen gegen das weiße Hairline-Raster der Reihe 1 steht. */
.S.white .mos-duo .mos-dark {
  background: var(--ink);
  border-color: var(--ink);
}

/* b-Zelle (16/11) ist flacher als die a-Zelle (4/5) derselben Zeile — es
   bliebe ein Reststreifen in Fugenfarbe stehen. Spurbreiten verhalten sich
   5:7, a = 4/5 = 5/6.25 → b mit 7/6.25 ergibt konstruktiv dieselbe
   Zeilenhöhe. Mobile stapelt die Foundation ohnehin alles auf 4/3. */
@media (min-width: 801px) {
  .mos-duo .mos .b { aspect-ratio: 7 / 6.25; }
}

/* --------------------------------------------------------------------------
   06 · MOS-NOTE — Protokoll-Fußzeile unterm Doppel-Mosaik (leise Ebene,
   Überleitung zu 07 Voice, design-system.md §9). Rail-fluchtend.
   -------------------------------------------------------------------------- */
.mos-note {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(28px, 4vw, 44px);
}
.mos-note .spacer {}
.mos-note p {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-l-2);
  max-width: none;
  margin: 0;
}
.mos-note p b { color: var(--fg-l); font-weight: 500; }
@media (max-width: 720px) { .mos-note { grid-template-columns: 1fr; } }

/* ==========================================================================
   TWISSTAR · Case Study v3 — 05 AKT II/c (07 Voice + 08 Packaging)
   NUR Ergänzungen zu 00-foundation.css. Geteilte Komponenten-Anatomie
   (.head, .brief, .pull, .pillars, .pack-hero, .pack-trio, .marker, .tag)
   bleibt unangetastet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   07 VOICE — Register-Specimen: eine Beispielzeile je Register.
   Macht „receipts" ohne Bild greifbar; Mono = Protokoll-Ebene (leise).
   -------------------------------------------------------------------------- */
.brief .col .sample {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px dashed var(--line-d);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.S.white .brief .col .sample { border-top-color: var(--line-l); }
.brief .col .sample .k {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-d-3);
}
.S.white .brief .col .sample .k { color: var(--fg-l-3); }
.brief .col .sample .q {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--fg-d);
}
.S.white .brief .col .sample .q { color: var(--fg-l); }

/* --------------------------------------------------------------------------
   BRIDGE — Überleitungszeile am Sektionsende (§9: logische Folge,
   kein Cliffhanger). Rail-Flucht wie alle Blöcke, bewusst leise.
   -------------------------------------------------------------------------- */
.bridge {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(32px, 4vw, 48px);
}
.bridge .spacer {}
.bridge p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-d-2);
  max-width: 60ch;
}
.S.white .bridge p { color: var(--fg-l-2); }
@media (max-width: 720px) { .bridge { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   08 PACKAGING — Pack-Hero-Ergänzungen.
   .tall: easy-pack.jpg ist quadratisch (1080×1080); 16/9 statt 16/7 spielt
   das contain-Bild deutlich größer aus („Mut zur Größe", §8). Mobil 1/1,
   damit das Quadrat die Bühne füllt.
   -------------------------------------------------------------------------- */
.pack-hero.fit.tall { aspect-ratio: 16/9; }
@media (max-width: 720px) { .pack-hero.fit.tall { aspect-ratio: 1/1; } }

/* Marker-Block als Bild-Caption (Brief: Lime auf Weiß NUR als Marker-Block).
   Bewusst NICHT .cap — die Foundation-Tag-Optik (schwarz/weiß) wird hier
   durch den Stempel ersetzt. */
.pack-hero .cap-marker {
  position: absolute;
  left: 16px;
  bottom: 16px;
}

/* ==========================================================================
   TWISSTAR · Case Study v3 — 06 AKT III „THE PROOF"
   Sektionen: Akt-Trenner III · 09 Commerce · 10 Motorsport · 11 In the World
   Ports von .sport / .sport-pair / .pair (case-study-v2.css) auf v3-Tokens
   + neue sektionseigene Blöcke: .sport-helmet, .proof-strip, .cat,
   .cat-spreads, .bridge. Geteilte Komponenten (foundation) unangetastet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   09 · PROOF-STRIP — drei Review-Kacheln in Step 04 „Social proof"
   (sitzt in .steps .row, Spalte des Fließtexts; klein, Belege statt Galerie)
   -------------------------------------------------------------------------- */
.steps .row .proof-strip {
  grid-column: 3;
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
.steps .row .proof-strip img {
  width: clamp(88px, 9vw, 132px);
  height: auto;
  border: 1px solid var(--line-d-2);
  background: var(--white);
}
@media (max-width: 800px) {
  .steps .row .proof-strip { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   11 · CAT — Katalog-Cover (quer, 1080×743) + Kontext-Spalte mit Marker
   -------------------------------------------------------------------------- */
.cat {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 1px;
  margin-top: var(--block-gap);
  background: var(--line-l);
  border: 1px solid var(--line-l);
}
.cat .ph {
  position: relative;
  overflow: hidden;
  background: var(--white);
  aspect-ratio: 1080/743;            /* natives Cover-Format, kein Zwangsquadrat */
}
.cat .ph img { width: 100%; height: 100%; object-fit: cover; }
.cat .copy {
  background: var(--white);
  padding: clamp(28px, 3.5vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.cat .copy .lab {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-l-3);
}
.cat .copy h3 {
  font-family: var(--heading);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--fg-l);
}
.cat .copy p { color: var(--fg-l-2); font-size: 15px; line-height: 1.55; margin: 0; }
@media (max-width: 900px) { .cat { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   11 · CAT-SPREADS — vier Hochformat-Seiten (1400×1971 ≈ 1/1.41, A-Format).
   Zellen-aspect-ratio = natives Format → object-fit:cover croppt faktisch
   nichts; Audit-Befund „leere Zellen" damit strukturell ausgeschlossen.
   -------------------------------------------------------------------------- */
.cat-spreads {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 1px;                    /* dockt als Hairline-Raster an .cat an */
  background: var(--line-l);
  border: 1px solid var(--line-l);
}
.cat-spreads .c {
  position: relative;
  overflow: hidden;
  background: var(--white);
  aspect-ratio: 1400/1971;            /* Hochformat behalten, nicht quadratisch */
}
.cat-spreads .c img { width: 100%; height: 100%; object-fit: cover; }
.cat-spreads .c .tag {
  position: absolute;
  left: 12px; bottom: 12px;
  color: var(--white);
  background: var(--ink);
  padding: 6px 10px;
  border-left: 2px solid var(--lime);
}
@media (max-width: 800px) {
  .cat-spreads { grid-template-columns: 1fr 1fr; }   /* 2-up, Hochformat bleibt */
}

/* ==========================================================================
   TWISSTAR · Case Study v3 — 07 CODA (12 Results · 13 Scope · 14 Outro)
   Nur Ergänzungen. Komponenten .head/.results/.scope/.outro/.signoff/.foot
   kommen vollständig aus 00-foundation.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   13 SCOPE — Stücklisten-Abschluss: Totals-Zeile unter dem Inventar.
   Solid-Hairline (kräftiger als die dashed Item-Zeilen) = "Summenstrich".
   Nur auf weißer Bühne eingesetzt → Light-Farben direkt.
   -------------------------------------------------------------------------- */
.scope-note {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: clamp(24px, 3vw, 56px);
  margin-top: clamp(32px, 4vw, 48px);
}
.scope-note .spacer {}
.scope-note .line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--line-l-2);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-l-3);
}
@media (max-width: 800px) {
  .scope-note { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   14 OUTRO — Wordmark-Gruß über dem Footer (≤200px, Brief: "nur wenn ruhig").
   Script-Wordmark als stille Unterschrift nach dem Sign-off; Rail-Flucht
   wie alle Blöcke. Reveal über Foundation-.rv (inkl. Bild-Wipe).
   -------------------------------------------------------------------------- */
/* Finale: Script-Wortmarke mittig als Unterschrift, CTAs prominent darunter. */
.outro .wm {
  display: flex;
  justify-content: center;
  margin-top: clamp(64px, 9vw, 128px);
}
.outro .wm img {
  width: clamp(240px, 34vw, 420px);
  height: auto;
}
.outro .outro-cta {
  justify-content: center;
  margin-top: clamp(36px, 5vw, 64px);
  margin-bottom: clamp(40px, 5vw, 72px);
  gap: 16px;
}
.outro .outro-cta .btn-home {
  font-size: 14px;
  padding: 18px 32px;
}
@media (max-width: 720px) {
  .outro .wm { margin-top: 56px; }
  .outro .wm img { width: min(72vw, 300px); }
  .outro .outro-cta { flex-direction: column; align-items: stretch; text-align: center; }
  .outro .outro-cta .btn-home { justify-content: center; }
}

/* ==========================================================================
   INTEGRATION (Phase 3) — Vereinheitlichung der Überleitungszeilen:
   gleicher Rhythmus für .bridge / .next-note (Ton regeln die Segmente).
   ========================================================================== */
.bridge, .next-note { margin-top: clamp(32px, 4vw, 48px); }
@media (max-width: 720px) { .bridge .spacer, .next-note .spacer { display: none; } }

/* ==========================================================================
   ==========================================================================
   TWISSTAR · Case Study v4 — LOUD LAYER
   Bewusste Abweichung von §1 „nie zwei laute Ebenen": an kuratierten Stellen
   spricht die Marke selbst (Pattern, Stripes, Script, Marquee, Vollbild).
   Das Protokoll bleibt das Raster — die Lautstärke kommt aus dem Material.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BAND — diagonales Stripe-Band (Katalog-Kanten-Zitat). Schwarz/Weiß-Stripes
   mit Cyan-Einschub links und Lime-Block rechts. Als Sektions-Naht.
   -------------------------------------------------------------------------- */
.band {
  position: relative;
  height: 44px;
  background: repeating-linear-gradient(135deg,
    var(--ink) 0 16px, var(--white) 16px 32px);
  overflow: hidden;
}
.band::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 0;
  width: clamp(80px, 12vw, 200px);
  background: repeating-linear-gradient(135deg,
    var(--ink) 0 16px, var(--cyan) 16px 32px);
}
.band::after {
  content: "";
  position: absolute; top: 0; bottom: 0; right: 0;
  width: clamp(48px, 7vw, 120px);
  background: var(--lime);
  border-left: 4px solid var(--ink);
}
.band.thin { height: 20px; }

/* --------------------------------------------------------------------------
   PLUS-CLUSTER — das +-Streufeld der Kataloge als dekorative Ebene.
   Mono-Plus in Lime/Weiß, absolut positionierbar in Sektionen.
   -------------------------------------------------------------------------- */
.plusrow {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.6em;
  color: var(--lime);
  user-select: none;
}
.plusrow .dim { color: var(--fg-d-3); }
/* Lime als Text auf Weiß ist ein Build-Fehler (§3) → lime-dark */
.S.white .plusrow { color: var(--lime-dark); }
.S.white .plusrow .dim { color: var(--fg-l-3); }

/* --------------------------------------------------------------------------
   HERO-PLUSES — Video-Overlay-Asset als Hero-Akzent (Brand-Vokabular ab
   dem ersten Pixel). Screen-Blend, dezent, rein dekorativ.
   -------------------------------------------------------------------------- */
.hero .hero-pluses {
  position: absolute;
  right: 3%;
  top: 14%;
  width: clamp(180px, 24vw, 400px);
  height: auto;
  opacity: 0.55;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   MARQUEE — laufende Display-Zeile (EINFACH. SCHNELL. SAUBER. …).
   Outline-Type, ein Solid-Lime-Wort pro Wiederholung. Pausiert bei
   reduced motion. Eine pro Seite.
   -------------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  background: var(--ink);
  border-top: 1px solid var(--line-d);
  border-bottom: 1px solid var(--line-d);
  padding: clamp(20px, 3vw, 36px) 0;
}
.marquee .track {
  display: flex;
  gap: clamp(40px, 5vw, 80px);
  width: max-content;
  animation: mq 36s linear infinite;
  will-change: transform;
}
.marquee span {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(44px, 7vw, 104px);
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--fg-d-2);
}
.marquee span.solid {
  color: var(--lime);
  -webkit-text-stroke: 0;
}
@keyframes mq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee .track { animation: none; }
}

/* --------------------------------------------------------------------------
   BA — Before/After-Slider („The Jump Cut"). Links Day 0 (Asservat auf
   Weiß), rechts Year 4 (Moodboard-Welt). Lime-Fuge, ziehbarer Griff,
   per Tastatur bedienbar (role=slider, Pfeiltasten — JS).
   -------------------------------------------------------------------------- */
.ba {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line-d);
  user-select: none;
  cursor: ew-resize;
  --ba: 46%;
}
.ba .after,
.ba .before { position: absolute; inset: 0; }
.ba .after img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.ba .before {
  clip-path: inset(0 calc(100% - var(--ba)) 0 0);
  background: var(--white);
}
.ba .before img {
  width: 100%;
  height: 100%;
  object-fit: contain;       /* Bürste füllt die ganze Fläche (ganz sichtbar, auf Weiss) */
  padding: clamp(16px, 3vw, 48px);
}
.ba .lab {
  position: absolute;
  top: 16px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 6px 10px;
  z-index: 2;
}
.ba .lab.l { left: 16px; background: var(--ink); color: var(--white); }
.ba .lab.r { right: 16px; background: var(--lime); color: var(--ink); }
.ba .handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--ba);
  width: 3px;
  margin-left: -1.5px;
  background: var(--lime);
  z-index: 3;
}
.ba .handle::after {
  content: "◂ ▸";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--lime);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  padding: 10px 12px;
  white-space: nowrap;
}
.ba:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
@media (max-width: 600px) {
  .ba .lab { font-size: 9px; letter-spacing: 0.1em; padding: 4px 6px; }
  .ba .lab.l { top: 12px; left: 12px; }
  .ba .lab.r { top: auto; bottom: 12px; right: 12px; }
}

/* Jump-Cut: das Moodboard ist maßgeblich. Container hat exakt dessen
   Seitenverhältnis (1920×1080 = 16:9) und wird auf die native Größe gedeckelt
   — nie hochskaliert, nie beschnitten (object-fit: contain). .ba sitzt direkt
   in .S.jump (ohne .wrap), füllt die Breite bis max. 1920px und zentriert. */
.S.jump { padding: clamp(56px, 7vh, 96px) 0; }
.S.jump .ba {
  aspect-ratio: 16 / 9;        /* = Moodboard-Seitenverhältnis */
  height: auto;
  width: 100%;
  max-width: 1920px;           /* native Breite — nicht überschreiten */
  max-height: 1080px;          /* native Höhe — nicht überschreiten */
  margin-inline: auto;
  border-left: 0;
  border-right: 0;
}
.S.jump .after img { object-fit: contain; }   /* ganzes Bild, kein Beschnitt */
.S.jump .lab { font-size: 13px; padding: 8px 14px; }
@media (max-width: 600px) {
  .S.jump .lab { font-size: 9px; padding: 4px 6px; }
}

/* --------------------------------------------------------------------------
   D2C — CHANNEL-STRIP: die drei Verkaufskanäle als weiße Marken-Logos direkt
   unter dem Deck (dunkle Bühne). Glyphs (Shopify/Amazon) etwas höher als die
   eBay-Wortmarke — optischer Ausgleich.
   -------------------------------------------------------------------------- */
.channels {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(40px, 6vw, 96px);
  flex-wrap: wrap;
  margin-top: clamp(36px, 5vw, 68px);
}
.channels img { height: clamp(54px, 6vw, 82px); width: auto; opacity: 0.92; }
.channels img.wordmark { height: clamp(38px, 4.3vw, 56px); }
@media (max-width: 600px) {
  .channels { gap: 40px; }
  .channels img { height: 48px; }
  .channels img.wordmark { height: 34px; }
}

/* --------------------------------------------------------------------------
   ACTIVATION-TRENNER — Marketing-Map (Frederics fertige Datei) als Hintergrund.
   CSS-Background statt <img>: kein "Bild in neuem Tab öffnen". cover zeigt
   automatisch nur einen Ausschnitt; das Bild ist bereits auf Schwarz/dezent.
   -------------------------------------------------------------------------- */
.act.act-map {
  background-image: url("assets/marketing-map.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Lesbarkeits-Scrim NUR hinter dem Text (unten + links): Map oben/rechts
   bleibt sichtbar, Headline/Sub bekommen einen dunklen Grund. */
.act.act-map::after {
  background:
    linear-gradient(180deg, rgba(10,10,10,0) 15%, rgba(10,10,10,0.50) 50%, rgba(10,10,10,0.93) 100%),
    linear-gradient(90deg, rgba(10,10,10,0.82) 0%, rgba(10,10,10,0.32) 42%, rgba(10,10,10,0) 72%);
}
/* Type-Schatten: hebt die Schrift auch über hellen Map-Stellen ab. */
.act.act-map h2 { text-shadow: 0 2px 30px rgba(0,0,0,0.75), 0 0 6px rgba(0,0,0,0.55); }
.act.act-map .sub,
.act.act-map .n { text-shadow: 0 1px 14px rgba(0,0,0,0.9); }

/* --------------------------------------------------------------------------
   D2C — INTROSPLIT: Hochformat-Video links neben dem Intro-Head. Vollständig,
   UNbeschnitten im natürlichen Seitenverhältnis (kein Crop). Head rechts ohne
   Rail. Mobil: Video oben, Text darunter.
   -------------------------------------------------------------------------- */
.introsplit {
  display: grid;
  grid-template-columns: var(--rail) clamp(240px, 27vw, 380px) 1fr;
  column-gap: clamp(14px, 1.8vw, 26px);   /* = .shopgrid → Video fluchtet mit den Tiles darunter */
  align-items: start;
  margin-bottom: clamp(48px, 7vw, 88px);
}
.introsplit .vid {
  grid-column: 2;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-d);
  background: var(--ink-2);
}
.introsplit .vid video { width: 100%; height: auto; display: block; }
.introsplit .copy { grid-column: 3; display: flex; flex-direction: column; padding-left: clamp(6px, 1.2vw, 22px); }
/* Kapitel-Nummer in der Rail ganz links — wie .head .num (cyan Mono + Hairline). */
.introsplit > .num {
  grid-column: 1;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  line-height: 1.55;
  color: var(--cyan);
  padding-top: 14px;
  border-top: 1px solid var(--line-d-2);
}
.S.white .introsplit > .num { color: var(--cyan-ink); border-top-color: var(--line-l-2); }
.introsplit .head { grid-template-columns: 1fr; margin-bottom: 0; }
.introsplit .head .num { padding-top: 0; border-top: none; margin-bottom: 2px; }
/* Statement rückt mit unter den Head in die rechte Spalte (kein Rail). */
.introsplit .statement { display: block; margin-top: clamp(30px, 3.5vw, 48px); }
/* Kanal-Logos im Intro-Block: linksbündig zur Textkante, proportional zur Spalte. */
.introsplit .channels {
  justify-content: space-between;
  max-width: clamp(360px, 48vw, 600px);   /* auf Textbreite gedeckelt → eBay ragt nicht raus */
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(28px, 3.5vw, 44px);
}
.introsplit .channels img { height: clamp(36px, 3.8vw, 50px); }
.introsplit .channels img.wordmark { height: clamp(44px, 4.6vw, 62px); }  /* eBay-Wortmarke etwas größer */
@media (max-width: 760px) {
  .introsplit { grid-template-columns: 1fr; row-gap: clamp(20px, 5vw, 32px); }
  .introsplit .vid, .introsplit .copy { grid-column: 1; padding-left: 0; }
}

/* --------------------------------------------------------------------------
   D2C — STATEMENT: komplettes Marketing + Sales Funnel (ersetzt die Map als
   Aussage in Worten). Rail-aligned Lead-Absatz.
   -------------------------------------------------------------------------- */
.statement {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: clamp(16px, 2vw, 32px);
  margin-top: clamp(48px, 6vw, 88px);
}
.statement .lab {
  grid-column: 2;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lime);
}
.statement h3 {
  grid-column: 2;
  margin: 8px 0 0;
  font-family: var(--heading);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(28px, 3.4vw, 50px);
  line-height: 1.0;
  letter-spacing: 0.02em;
  color: var(--fg-d);
}
.statement h3 em { font-style: normal; color: var(--lime); }
.statement p {
  grid-column: 2;
  margin: 20px 0 0;
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.6;
  color: var(--fg-d-2);
  max-width: 56ch;
}
.S.white .statement .lab { color: var(--lime-dark); }
.S.white .statement h3 { color: var(--fg-l); }
.S.white .statement h3 em { color: var(--lime-dark); }
.S.white .statement p { color: var(--fg-l-2); }
@media (max-width: 900px) {
  .statement { grid-template-columns: 1fr; }
  .statement .lab, .statement h3, .statement p { grid-column: 1; }
  .statement p { max-width: none; }
}

/* --------------------------------------------------------------------------
   D2C — SHOPLAB (Gruppen-Label) + SHOPGRID (3-up quadratische Tiles):
   Storefronts und Testimonials aus dem echten Shop.
   -------------------------------------------------------------------------- */
.shoplab {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: clamp(16px, 2vw, 32px);
  margin-top: clamp(44px, 6vw, 76px);
}
.shoplab .l {
  grid-column: 2;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lime);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-d);
}
.S.white .shoplab .l { color: var(--lime-dark); border-bottom-color: var(--line-l); }
.shopgrid {
  display: grid;
  grid-template-columns: var(--rail) repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 26px);
  margin-top: clamp(16px, 2vw, 24px);
}
.shopgrid .cell {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--line-d);
  background: var(--ink-2);
}
.shopgrid .cell img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .shoplab { grid-template-columns: 1fr; }
  .shoplab .l { grid-column: 1; }
}
@media (max-width: 800px) {
  .shopgrid { grid-template-columns: 1fr 1fr; }
  .shopgrid > .spacer { display: none; }
}
@media (max-width: 520px) { .shopgrid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   DNA — 04 Identity: Kit of Parts. Pattern, Plus, Icon-Set, Script als
   gleichberechtigte Systembausteine in einem Hairline-Raster (weiße Bühne).
   -------------------------------------------------------------------------- */
.dna {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-l);
  border: 1px solid var(--line-l);
  margin-top: var(--block-gap);
}
.dna .cell {
  position: relative;
  background: var(--white);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 24px;
}
.dna .cell.full { padding: 0; }
.dna .cell.full img {
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  object-fit: cover;
}
.dna .cell img { max-width: 78%; max-height: 60%; object-fit: contain; }
.dna .cell .lab {
  position: absolute;
  left: 12px; bottom: 12px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--ink);
  padding: 6px 10px;
}
.dna .cell .bigplus {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(64px, 8vw, 120px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: 0.1em;
}
.dna .cell .bigplus b { color: var(--lime-dark); font-weight: 700; }
.dna .cell.stripes {
  background: repeating-linear-gradient(135deg,
    var(--ink) 0 22px, var(--white) 22px 44px);
}
@media (max-width: 800px) { .dna { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------------------------
   APPMATRIX — 04 Identity: ein Emblem, acht Träger. Quadrat-Raster,
   Hairline-Fugen, Mono-Tags. Beweis statt Behauptung.
   -------------------------------------------------------------------------- */
.appmatrix {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-l);
  border: 1px solid var(--line-l);
  margin-top: var(--block-gap);
}
.appmatrix .a {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--ink);
}
.appmatrix .a img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.appmatrix .a.contain {
  background: var(--white);
  display: grid;
  place-items: center;
  padding: 20px;
}
.appmatrix .a.contain img {
  width: auto; height: auto;
  max-width: 85%; max-height: 70%;
  object-fit: contain;
}
.appmatrix .a .tag {
  position: absolute;
  left: 12px; bottom: 12px;
  color: var(--white);
  background: var(--ink);
  padding: 6px 10px;
  border-left: 2px solid var(--lime);
  z-index: 2;
}
@media (max-width: 800px) { .appmatrix { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------------------------
   07 VOICE — der Katalog IST die Voice. Hero-Seite + lautes Specimen-Zitat,
   darunter eine Reihe weiterer Seiten + schmale "earned by"-Zeile (Proof
   lebt in anderen Kapiteln, hier nur Fussnote). Schwarze Bühne.
   -------------------------------------------------------------------------- */
/* Hero: das Katalog-Spread (Doppelseite), volle Breite. */
.vc-spread { margin: var(--block-gap) 0 0; }
.vc-spread img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line-d);
}
.vc-spread figcaption { margin-top: 14px; }

/* Specimen-Reihe: Katalogseite + Social-Kacheln auf GEMEINSAMER Höhe
   (Portrait-Seite schmaler, Social-Kacheln quadratisch — alle gleich hoch). */
.vc-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(20px, 3vw, 48px);
  margin-top: clamp(40px, 5vw, 72px);
}
.vc-row .it {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.vc-row .it img {
  height: clamp(280px, 30vw, 400px);
  width: auto;
  display: block;
  border: 1px solid var(--line-d);
}
.vc-row .it .tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-d-2);   /* 11px → hellerer Token */
  text-align: center;
}
.vc-row .it .tag b {
  font-family: var(--heading);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: none;
  display: block;
  margin-top: 3px;
  color: var(--fg-d);
}
@media (max-width: 600px) { .vc-row .it img { height: clamp(220px, 46vw, 300px); } }

.voice-earned {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: 20px;
  border-top: 1px solid var(--line-d);
}
.voice-earned p {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-d-2);
  max-width: none;
}
.voice-earned .k { color: var(--lime); margin-right: 12px; }   /* dunkle Bühne → lime (nicht cyan) */

/* --------------------------------------------------------------------------
   PRINTFLIP — 11: Katalog als horizontale Blätter-Leiste (scroll-snap).
   Seiten in nativer Höhe, harte Kanten, Mono-Hinweis. Volle Breite.
   -------------------------------------------------------------------------- */
.printflip-wrap { margin-top: var(--block-gap); }
.printflip-hint {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-l-3);
  margin-bottom: 14px;
}
.printflip {
  display: flex;
  gap: clamp(14px, 1.6vw, 24px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--ink) transparent;
}
.printflip::-webkit-scrollbar { height: 6px; }
.printflip::-webkit-scrollbar-thumb { background: var(--ink); }
.printflip::-webkit-scrollbar-track { background: var(--line-l); }
.printflip .pg {
  flex: 0 0 auto;
  height: clamp(380px, 58vh, 620px);
  scroll-snap-align: start;
  position: relative;
  border: 1px solid var(--line-l);
}
.printflip .pg img {
  height: 100%;
  width: auto;
  display: block;
}
.printflip .pg .tag {
  position: absolute;
  left: 10px; bottom: 10px;
  color: var(--white);
  background: var(--ink);
  padding: 5px 9px;
  border-left: 2px solid var(--lime);
}

/* --------------------------------------------------------------------------
   DECKPAIR — 11: zwei Original-Seiten aus dem B2B-Pitch-Deck (16:9).
   -------------------------------------------------------------------------- */
.deckpair {
  display: grid;
  grid-template-columns: var(--rail) 1fr 1fr;
  gap: clamp(16px, 2vw, 32px);
  margin-top: var(--block-gap);
}
.deckpair .d { position: relative; border: 1px solid var(--line-l); }
.deckpair .d img { width: 100%; display: block; }
.deckpair .d .tag {
  position: absolute;
  left: 12px; bottom: 12px;
  color: var(--white);
  background: var(--ink);
  padding: 6px 10px;
  border-left: 2px solid var(--lime);
}
.deckpair .spacer { grid-row: 1 / span 2; }   /* Rail über beide Reihen (2×2-Deck) */
@media (max-width: 800px) {
  .deckpair { grid-template-columns: 1fr; }
  .deckpair .spacer { display: none; }
}

/* --------------------------------------------------------------------------
   FLEETWEAR — Van + Overall nebeneinander auf gemeinsamer Höhe (kein Full-Bleed,
   downscaled → scharf statt pixelig). Rail-aligned via spacer.
   -------------------------------------------------------------------------- */
.fleetwear {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 2vw, 32px);
  margin-top: clamp(16px, 2vw, 24px);
}
.fleetwear .spacer { flex: 0 0 var(--rail); }
.fleetwear .it {
  position: relative;
  flex: 0 0 auto;
  height: clamp(280px, 34vw, 460px);
  border: 1px solid var(--line-d);
  overflow: hidden;
  background: var(--ink-2);
}
.fleetwear .it img { height: 100%; width: auto; display: block; }
.fleetwear .it .tag {
  position: absolute;
  left: 12px; bottom: 12px;
  color: var(--white);
  background: var(--ink);
  padding: 6px 10px;
  border-left: 2px solid var(--lime);
}
@media (max-width: 800px) {
  .fleetwear { flex-wrap: wrap; gap: 16px; }
  .fleetwear .spacer { display: none; }
  .fleetwear .it { height: auto; width: 100%; flex: 1 1 100%; }
  .fleetwear .it img { width: 100%; height: auto; }
}

/* --------------------------------------------------------------------------
   RACING — RACE-WIDE: breites Strecken-Bild (contained, rail-aligned, scharf).
   -------------------------------------------------------------------------- */
.race-wide {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: clamp(16px, 2vw, 32px);
  margin-top: var(--block-gap);
}
.race-wide .ph {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-d);
  background: var(--ink-2);
}
.race-wide .ph img { width: 100%; height: auto; display: block; }
.race-wide .ph .tag {
  position: absolute; left: 14px; bottom: 14px;
  color: var(--white); background: var(--ink);
  padding: 7px 11px; border-left: 2px solid var(--lime);
}
@media (max-width: 720px) {
  .race-wide { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   IMGROW — generische Bild-Reihe auf gemeinsamer Höhe (rail-aligned via spacer);
   Bilder behalten ihr natürliches Seitenverhältnis (height:100%, width:auto) →
   KEIN Crop. Höhe pro Instanz via Inline --rh. (.race-wide/.race-duo abgelöst.)
   -------------------------------------------------------------------------- */
.imgrow {
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 1.8vw, 28px);
  margin-top: clamp(16px, 2vw, 28px);
}
.imgrow .spacer { flex: 0 0 var(--rail); }
.imgrow .it {
  position: relative;
  flex: 0 0 auto;
  height: var(--rh, 420px);
  border: 1px solid var(--line-d);
  overflow: hidden;
  background: var(--ink-2);
}
.imgrow .it img { height: 100%; width: auto; display: block; }
.imgrow .it .tag {
  position: absolute; left: 12px; bottom: 12px;
  color: var(--white); background: var(--ink);
  padding: 6px 10px; border-left: 2px solid var(--lime);
}
@media (max-width: 800px) {
  .imgrow { flex-wrap: wrap; gap: 14px; }
  .imgrow .spacer { display: none; }
  .imgrow .it { height: auto !important; width: 100%; }
  .imgrow .it img { width: 100%; height: auto; }
}

/* --------------------------------------------------------------------------
   FIA F3 LOGO (weiß) — Top-Bar (klein) + Racing-Head (mittel, als Credential).
   -------------------------------------------------------------------------- */
.f3-logo { width: auto; display: block; }
.bar .f3-logo { height: 14px; opacity: 0.85; }
.f3-head { height: clamp(46px, 5vw, 66px); opacity: 0.95; flex: none; }

/* Headline + F3-Logo nebeneinander: Logo rechts neben "WE WENT RACING".
   Logo = 10% kleiner als der zweizeilige Headline-Block (1.71 statt 1.9 x
   Schriftgroesse); vertikal zentriert -> die freie Hoehe wird als gleicher
   Rand ober- und unterhalb des Logos verteilt. */
.head .h2-row {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  flex-wrap: wrap;
}
.head .h2-row h2 { margin: 0; }
.head .h2-row .f3-head {
  height: calc(1.71 * clamp(40px, 5.5vw, 84px));
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   OUTRO-CTA — zurückhaltender „Back to homepage"-Button am Seitenende (dunkel).
   -------------------------------------------------------------------------- */
.outro-cta {
  margin-top: clamp(36px, 5vw, 64px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.btn-home {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-d);
  text-decoration: none;
  padding: 15px 24px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-home:hover, .btn-home:focus-visible {
  background: var(--lime);
  color: var(--ink);
  border-color: var(--lime);
}
.btn-home--primary {
  background: var(--lime);
  color: var(--ink);
  border-color: var(--lime);
  font-weight: 700;
}
.btn-home--primary:hover, .btn-home--primary:focus-visible {
  background: transparent;
  color: var(--lime);
}

/* --------------------------------------------------------------------------
   JOURNEY — 09 Commerce: die echte Customer-Journey/Marketing-Map als
   Original-Arbeitsdatei. Schwarzer Artefakt-Rahmen, Mono-Protokollzeile.
   -------------------------------------------------------------------------- */
.journey {
  margin-top: var(--block-gap);
  border: 1px solid var(--line-d-2);
  background: #000;
}
.journey img { width: 100%; display: block; }
.journey .cap {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-top: 1px solid var(--line-d);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-d-3);
}
.journey .cap b { color: var(--lime); font-weight: 500; }

/* --------------------------------------------------------------------------
   SKU-TWIST — 05: Signatur-Rotation Nr. 3, der Dreh am Werkzeug.
   Kein Lift, kein Schatten — nur die Drehung (mechanisch, 240ms).
   -------------------------------------------------------------------------- */
.sku-grid .s .img img { transition: transform 240ms var(--ease); }
.sku-grid .s:hover .img img { transform: rotate(-8deg) scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .sku-grid .s:hover .img img { transform: none; }
}

/* --------------------------------------------------------------------------
   ACT-TRENNER-AUFRÜSTUNG — Stripe-Naht oben an jedem Akt-Trenner
   (Katalog-Kanten-Zitat), Plus-Streu rechts.
   -------------------------------------------------------------------------- */
.act::before,
.act-type::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 14px;
  z-index: 3;
  background: repeating-linear-gradient(135deg,
    var(--ink) 0 12px, var(--white) 12px 24px);
}
.act .plusdeco,
.act-type .plusdeco {
  position: absolute;
  right: var(--gutter);
  top: clamp(36px, 5vw, 64px);
  z-index: 3;
  text-align: right;
  line-height: 2.2;
}

/* --------------------------------------------------------------------------
   AKZENT AUF WEISS = CYAN — --lime-dark (#A8B800) wirkt auf Weiß wie
   Schlamm; jedes kontrastfähige Lime kippt ins Oliv. Cyan dunkelt sauber:
   Bühnen-Logik fortan: Schwarz → Lime, Weiß → Cyan (Logo-Diamant).
   -------------------------------------------------------------------------- */
:root {
  --cyan-text: #1593C6;   /* Display-Akzente auf Weiß (≥3:1, large text) */
  --cyan-ink:  #0C7AA3;   /* Mono-Labels/kleine Akzente auf Weiß (≥4.5:1) */
}
.S.white .display-hero em,
.S.white .display-act em,
.S.white .display-h2 em,
.S.white .head h2 em,
.S.white .pull blockquote em,
.S.white .claim .w.accent .word,
.S.white em.l { color: var(--cyan-text); }

.S.white .pillars .p .n,
.S.white .funnel .step .n,
.S.white .results .r .lab,
.S.white .scope .col h4,
.S.white .scope .col li::before,
.S.white .plusrow { color: var(--cyan-ink); }

.dna .cell .bigplus b { color: var(--cyan-text); }

/* --------------------------------------------------------------------------
   SKEW-FIX — width:100% via CSS + height-Attribut im HTML = Streckung
   (global gilt nur max-width:100%, kein height:auto). Hier explizit.
   -------------------------------------------------------------------------- */
.specwall .stack .mock img,
.deckpair .d img,
.merch .ph img,
.journey img { height: auto; }

/* --------------------------------------------------------------------------
   PACING — Straffung: dichterer Seitenrhythmus, flachere Akt-Trenner.
   Überschreibt die Foundation-Tokens bewusst (v4-Entscheidung).
   -------------------------------------------------------------------------- */
:root {
  --sec-pad: clamp(72px, 9vh, 116px);
  --block-gap: clamp(40px, 4.5vw, 56px);
}
.act { min-height: 56vh; }
.act-type { padding: clamp(64px, 7vw, 104px) 0 clamp(32px, 4vw, 56px); }

/* --------------------------------------------------------------------------
   PROOF-ROW — Review-Belege als eigenständige Zeile unter der Journey-Map
   (ersetzt die gestrichene 5-Step-Liste in 09).
   -------------------------------------------------------------------------- */
.proof-row {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: clamp(24px, 3vw, 48px);
  margin-top: 24px;
  align-items: center;
}
.proof-row .imgs { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.proof-row .imgs img {
  width: clamp(96px, 10vw, 150px);
  height: auto;
  border: 1px solid var(--line-d-2);
  background: var(--white);
}
.proof-row .imgs .lab {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-d-3);
  margin-left: 8px;
}
@media (max-width: 720px) { .proof-row { grid-template-columns: 1fr; } }

/* Print: laute Ebenen drucken sauber */
@media print {
  .marquee, .band { display: none; }
  .printflip { overflow-x: visible; flex-wrap: wrap; }
}