/* =========================================================
   SCHRIFTEN — lokal ausgeliefert
   Keine Verbindung zu Google beim Aufruf der Seite. Nur die
   Subsets latin und latin-ext; mehr braucht eine deutsch/
   englischsprachige Seite nicht.
   font-display: swap — Text ist sofort lesbar, die Schrift
   tauscht sich nach.
   ========================================================= */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/Archivo-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/Archivo-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/Archivo-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/Archivo-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/IBMPlexMono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/IBMPlexMono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/IBMPlexMono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/IBMPlexMono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/InstrumentSans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/InstrumentSans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/InstrumentSans-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/InstrumentSans-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/InstrumentSans-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/InstrumentSans-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   PERMY — permy.de
   Umsetzung von DESIGN.md. Jede Zahl hier stammt aus dem
   dort festgehaltenen System, nicht aus dem Gefühl.

   Harte Regeln, die im ganzen Stylesheet gelten:
   · KEIN box-shadow. Nirgends. Tiefe = Flächenton + 16px-Fase.
   · KEIN Verlauf.
   · Der Akzent ist nie an einen Zustand gebunden — Zustände
     laufen über Deckkraft.
   · Bewegung nur auf color / background-color / opacity,
     0.2–0.3s. Bei prefers-reduced-motion: Dauer 0, nicht entfernt.
   ========================================================= */

/* ---------- TOKENS ---------- */
:root {
  /* Farbe */
  --void-black: #000000;
  --plate: #1b1b1b;
  --raised: #252525;
  --paper: #ffffff;
  --paper-grey: #f1f1f1;
  --edge: #d2d2d2;
  --accent: #ff4a1f;
  --accent-deep: #e03d14;
  --ink-muted: #808080;
  --ink-dim: rgba(255, 255, 255, 0.3);
  --ink-muted-light: rgba(0, 0, 0, 0.4);

  /* Auf dunklen Platten gesetzt, auf hellen überschrieben */
  --fg: var(--paper);
  --fg-secondary: var(--ink-muted);
  --fg-dim: var(--ink-dim);
  --stripe-a: var(--plate);
  --stripe-b: var(--raised);
  --hairline: rgba(255, 255, 255, 0.12);

  /* Schrift */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Abstände — 4px-Basis, siehe DESIGN.md §5 */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-10: 40px;
  --s-11: 44px;
  --s-14: 56px;
  --s-15: 60px;
  --s-20: 80px;
  --s-30: 120px;
  --s-35: 140px;

  /* Maße */
  --bevel: 16px;
  --container: 1408px;
  --reading: 820px;
  --gutter: 16px;
  --control-h: 52px;
  --row-h: 105px;

  /* Bewegung */
  --dur-fast: 0.2s;
  --dur: 0.3s;
}

@media (min-width: 768px) {
  :root { --gutter: 40px; }
}

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

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

body {
  margin: 0;
  background: var(--void-black);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

::selection { background: var(--accent); color: var(--void-black); }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: var(--void-black);
  padding: var(--s-3) var(--s-5);
  font-weight: 600;
}
.skip-link:focus { left: var(--s-4); top: var(--s-4); }

/* ---------- TYPOGRAFIE ----------
   Display-Zeilenhöhe ist exakt 1.0 — DESIGN.md §3.
   Die Skala springt 110px → 14px ohne Zwischengrößen. */
.display-xl {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 7.6vw, 110px);
  line-height: 1;
  letter-spacing: normal;
}
.display-l {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 4.4vw, 60px);
  line-height: 1;
}
.display-m {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1;
}
.subhead {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 32px;
}
.body-lg { font-size: 16px; line-height: 24px; }
.body { font-size: 14px; line-height: 20px; }
.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}
.label {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.reading { max-width: var(--reading); }

.prose p + p { margin-top: var(--s-6); }
.prose p { font-size: 16px; line-height: 24px; color: var(--fg); }

.pull {
  margin-top: var(--s-15);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 36px;
  color: var(--accent);
  max-width: var(--reading);
}

/* Augenbraue: geometrisches Glyph + Label im Akzent.
   Das einzige dekorative Element, das das System erlaubt. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow .mono { color: var(--accent); font-size: 12px; }
.glyph { width: 16px; height: 16px; fill: var(--accent); flex: none; }

/* ---------- PLATTEN + 16px-FASE ----------
   Genau wie in der Referenz: ein 16px hoher Streifen in der
   eigenen Hintergrundfarbe, über bzw. unter dem Abschnitt. */
.plate {
  position: relative;
  background: var(--plate-bg);
  z-index: 1;
}
.plate::before,
.plate::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--bevel);
  background: var(--plate-bg);
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 100%, 0 100%);
  pointer-events: none;
}
.plate::before { top: 0; transform: translateY(calc(var(--bevel) * -1)); }
.plate::after { bottom: 0; transform: translateY(var(--bevel)) rotate(180deg); }

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

.section { padding-block: clamp(48px, 8vw, 80px); }
.section__head { margin-top: var(--s-6); max-width: 18ch; }
.section__intro { margin-top: var(--s-6); color: var(--fg-secondary); }

/* Helle Platten kehren die Textrollen um */
.section--light {
  --fg: var(--void-black);
  --fg-secondary: var(--ink-muted-light);
  --fg-dim: var(--ink-muted-light);
  --hairline: rgba(0, 0, 0, 0.12);
  color: var(--void-black);
}
.section--light .prose p { color: var(--void-black); }

/* ---------- NAV ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--void-black);
}
.nav__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--s-4) var(--gutter);
  display: flex;
  align-items: center;
  /* Auf dem Telefon stehen Wortmarke, Sprachumschalter und CTA
     nebeneinander. Mit 40px Abstand läuft die Zeile über 375px
     hinaus und der CTA wird abgeschnitten — der Abstand wächst
     erst mit dem Platz. */
  gap: var(--s-3);
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* Tap-Ziel, siehe DESIGN.md §5 */
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
  color: var(--paper);
}
.nav__brand span { color: var(--accent); }
.nav__links {
  display: none;
  gap: var(--s-6);
  margin-left: auto;
}
.nav__links a {
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink-muted);
  transition: color var(--dur-fast);
}
.nav__links a:hover,
.nav__links a.is-active { color: var(--paper); }
.nav__cta { margin-left: auto; }

/* Sprachumschalter — zwei Kürzel, kein Aufklappmenü. */
.nav__lang {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-left: auto;
}
.nav__lang a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--s-2);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-dim);
  transition: color var(--dur-fast);
}
.nav__lang a:hover { color: var(--paper); }
.nav__lang a[aria-current="true"] { color: var(--accent); }
.nav__lang span { color: var(--ink-dim); font-family: var(--font-mono); font-size: 12px; }

@media (min-width: 900px) {
  .nav__inner { gap: var(--s-10); }
  .nav__links { display: flex; margin-left: auto; }
  .nav__lang { margin-left: 0; }
  .nav__cta { margin-left: 0; }
}

/* ---------- BUTTONS ----------
   Pille 80px, Höhe 52px, kein Rahmen, kein Schatten, kein Glühen. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--control-h);
  padding-inline: var(--s-6);
  border-radius: 80px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur), color var(--dur);
}
.btn--primary { background: var(--accent); color: var(--void-black); }
.btn--primary:hover { background: var(--accent-deep); }
.btn:active { transform: translateY(1px); }

/* ---------- 00 HERO ----------
   Kein zentrierter Hero. Asymmetrischer Split 842 + 526,
   der dem 9:16-Hochformat der Bilder entspricht. */
.hero__grid {
  display: grid;
  gap: var(--s-10);
  align-items: center;
  padding-block: clamp(40px, 4.5vw, 64px);
}
/* Eigene Display-Stufe für den Hero: die globale 110px-Stufe
   erzeugt hier fünf Zeilen und schiebt den CTA aus dem Bild. */
.hero .display-xl { font-size: clamp(38px, 6.4vw, 92px); }
.hero__text { max-width: 842px; }
.hero__sub { margin-top: var(--s-6); max-width: 60ch; color: var(--ink-muted); }
.hero__actions { margin-top: var(--s-10); }
.hero__status { margin-top: var(--s-6); color: var(--ink-dim); }
.hero__media .media__frame img { object-position: 50% 45%; }

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 842fr) minmax(0, 526fr);
    min-height: calc(100dvh - 84px);
  }
}

/* Plattenstapelung für den Hero NUR, wenn er auch hineinpasst.
   Eine angeheftete Sektion, die höher ist als das Fenster, macht
   ihren unteren Teil unerreichbar — der CTA wäre nicht mehr
   anklickbar. Die Höhenabfrage ist die Bedingung dafür, dass der
   Effekt überhaupt erlaubt ist. */
@media (min-width: 900px) and (min-height: 940px) {
  .hero { position: sticky; top: 0; }
}

/* ---------- 01 PROBLEM ----------
   Scroll-aufgelöster Absatz: Deckkraft, sonst nichts. */
.scroll-copy {
  margin-top: var(--s-20);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 36px;
  text-transform: uppercase;
  max-width: 24ch;
}
.scroll-copy .word {
  color: var(--ink-dim);
  transition: color var(--dur);
}
.scroll-copy .word.is-lit { color: var(--fg); }

#problem .prose { margin-top: var(--s-20); }

/* ---------- AKZENTBAND ----------
   Vollbreite, eine Zeile Display in Schwarz. Sonst nichts.
   overflow:hidden, weil die Zeile beim Scrollen seitlich driftet
   und sonst die Seite breiter machen würde. */
.band {
  padding-block: var(--s-5) var(--s-15);
  overflow: hidden;
}
.band__line {
  color: var(--void-black);
  max-width: 28ch;
  will-change: transform;
}

/* ---------- SPLITS ---------- */
.split {
  margin-top: var(--s-20);
  display: grid;
  gap: var(--s-10);
  align-items: start;
}
@media (min-width: 900px) {
  .split--media-left { grid-template-columns: minmax(0, 526fr) minmax(0, 842fr); }
  .split--media-right { grid-template-columns: minmax(0, 842fr) minmax(0, 526fr); }
}

.media { position: relative; }

/* Der Rahmen trägt Höhe, Radius und Beschnitt; die Bildunterschrift
   steht außerhalb davon. Erst diese Trennung erlaubt Parallaxe:
   Das Bild darf sich im Rahmen bewegen, ohne dass Kanten aufreißen. */
.media__frame {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}
.media__frame img,
.media__frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}

/* Alle Aufnahmen liegen im 9:16-Hochformat vor. Ungedeckelt wird
   daraus in einer 526px-Spalte ein 935px hoher Block, der die
   Textspalte daneben erschlägt. Deshalb bekommt jeder Rahmen eine
   Höhe, die zu seinem Nachbarn passt, und füllt sie mit cover. */
.split--media-left .media__frame { height: clamp(360px, 52vh, 600px); }
.split--media-right .media__frame { height: clamp(380px, 62vh, 720px); }
.shots .media__frame { height: clamp(320px, 40vw, 520px); }
.hero__media .media__frame { height: clamp(320px, 52vw, 620px); }

/* Überhöhe als Spielraum für die Parallaxe. Ohne GSAP sitzt das
   Bild mittig und nichts fehlt — der Spielraum ist dann einfach
   gleichmäßig oben und unten abgeschnitten. */
.media__frame--parallax img {
  height: calc(100% + 96px);
  margin-top: -48px;
}

@media (min-width: 900px) {
  .hero__media .media__frame { height: clamp(420px, 58vh, 720px); }
}
.media figcaption {
  padding: var(--s-4) var(--s-2) 0;
  color: var(--fg-secondary);
}

.video-toggle {
  position: absolute;
  left: var(--s-4);
  bottom: var(--s-4);
  min-height: 44px;
  padding-inline: var(--s-5);
  border-radius: 80px;
  background: var(--void-black);
  color: var(--paper);
  font-size: 14px;
  font-weight: 600;
  transition: background-color var(--dur), color var(--dur);
}
.video-toggle:hover { background: var(--accent); color: var(--void-black); }

/* ---------- 02 SCHRITTE ---------- */
.steps { display: grid; gap: var(--s-10); }
.step {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid var(--hairline);
}
.step__no { font-size: 14px; color: var(--accent); }
.step__body p { margin-top: var(--s-3); color: var(--fg-secondary); max-width: 52ch; }

/* ---------- 03 ZEBRA-ZEILEN ----------
   Signatur-Listenmuster: 105px hohe Zeilen, abwechselnde
   Flächentöne, keine Rahmen, kein Radius, kein Kachelraster. */
.rows { margin-top: var(--s-20); margin-inline: calc(var(--gutter) * -1); }
.row { background: var(--stripe-a); }
.row:nth-child(even) { background: var(--stripe-b); }

.row__head {
  width: 100%;
  min-height: var(--row-h);
  padding: var(--s-6) var(--gutter);
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 24px;
  align-items: center;
  gap: var(--s-4);
  text-align: left;
  transition: color var(--dur), background-color var(--dur);
}
.row__head:hover { color: var(--accent); }
.row__no { color: var(--accent); font-size: 14px; }
.row__title { display: grid; gap: var(--s-1); }
.row__lead { color: var(--fg-secondary); }
.row__head[aria-expanded="true"] .row__lead { color: var(--fg); }

/* Marke statt Chevron: zwei Striche, die zum Minus werden.
   Geometrisch, wertungsfrei — kein Häkchen, kein Pfeil. */
.row__mark {
  position: relative;
  width: 24px;
  height: 24px;
  justify-self: end;
}
.row__mark::before,
.row__mark::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: currentColor;
  transition: opacity var(--dur);
}
.row__mark::after { transform: rotate(90deg); }
.row__head[aria-expanded="true"] .row__mark::after { opacity: 0; }

.row__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur);
}
.row__panel > * { overflow: hidden; }
.row[data-open] .row__panel { grid-template-rows: 1fr; }
.row__panel-inner {
  padding-inline: var(--gutter);
}
.row[data-open] .row__panel-inner { padding-bottom: var(--s-10); }
.row__panel-inner p { max-width: 62ch; color: var(--fg-secondary); }
.row__detail { margin-top: var(--s-5); color: var(--fg-dim); }

@media (min-width: 900px) {
  .row__head { grid-template-columns: 88px minmax(0, 1fr) 24px; }
  .row__panel-inner { padding-left: calc(var(--gutter) + 88px); }
}

/* ---------- 04 ANGEBOT ---------- */
.offer__intro { color: var(--fg-secondary); max-width: 62ch; }
.offer__item {
  margin-top: var(--s-10);
  padding-top: var(--s-6);
  border-top: 1px solid var(--hairline);
}
.offer__item p { margin-top: var(--s-3); color: var(--fg-secondary); max-width: 58ch; }
.offer__price {
  margin-top: var(--s-15);
  padding: var(--s-6);
  border-radius: 12px;
  background: var(--paper-grey);
  max-width: 62ch;
}
.section--grey .offer__price { background: var(--paper); }

/* ---------- 06 BELEGE ---------- */
.proofs {
  margin-top: var(--s-20);
  display: grid;
  gap: var(--s-10);
}
@media (min-width: 900px) {
  .proofs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-10) var(--s-35); }
}
.proof { padding-top: var(--s-6); border-top: 1px solid var(--hairline); }
.proof__no { display: block; color: var(--accent); font-size: 14px; margin-bottom: var(--s-3); }
.proof p { margin-top: var(--s-3); color: var(--fg-secondary); }

.figures { margin-top: var(--s-20); }
.figures__numbers { display: grid; gap: var(--s-10); }
@media (min-width: 768px) {
  .figures__numbers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.stat { padding-top: var(--s-6); border-top: 1px solid var(--hairline); }
.stat__value {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.stat__label { display: block; margin-top: var(--s-4); color: var(--fg-secondary); max-width: 34ch; }
.figures__honesty {
  margin-top: var(--s-10);
  max-width: var(--reading);
  color: var(--fg-secondary);
}

.shots { margin-top: var(--s-20); display: grid; gap: var(--s-10); }
@media (min-width: 768px) {
  .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 07 DATEN ---------- */
.facts { margin-top: var(--s-20); display: grid; gap: 0; }
.fact {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--s-6);
  padding-block: var(--s-6);
  border-top: 1px solid var(--hairline);
}
.fact:last-child { border-bottom: 1px solid var(--hairline); }
.fact__no { color: var(--accent); font-size: 14px; }
.fact p { color: var(--fg-secondary); max-width: 58ch; }

/* ---------- 08 FORMULAR ---------- */
.waitlist { margin-top: var(--s-20); max-width: var(--reading); }
.field { display: block; margin-bottom: var(--s-10); border: 0; padding: 0; }
.field--choice { margin-bottom: var(--s-10); }
legend.label { padding: 0; margin-bottom: var(--s-4); }
.label { display: block; margin-bottom: var(--s-3); color: var(--fg); }

.input {
  width: 100%;
  min-height: var(--control-h);
  padding-inline: var(--s-5);
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--raised);
  color: var(--fg);
  font: inherit;
  transition: border-color var(--dur), background-color var(--dur);
}
.input::placeholder { color: var(--ink-dim); }
.input:focus { outline: none; border-color: var(--accent); }
.input[aria-invalid="true"] { border-color: var(--accent); }

.choices { display: flex; flex-wrap: wrap; gap: var(--s-3); }
/* inline-flex statt inline: sonst bekommt das absolut gesetzte
   Eingabefeld darin kein volles 44px-Tap-Ziel. */
.choice { position: relative; display: inline-flex; }
.choice input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.choice span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--s-5);
  border-radius: 80px;
  background: var(--raised);
  color: var(--ink-muted);
  font-size: 14px;
  font-weight: 600;
  transition: background-color var(--dur), color var(--dur);
}
.choice input:checked + span { background: var(--accent); color: var(--void-black); }
.choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }

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

.form__submit { margin-top: var(--s-2); }
.form__promise { margin-top: var(--s-6); color: var(--fg-secondary); max-width: 58ch; }
.form__error { margin-top: var(--s-3); color: var(--accent); font-size: 14px; }
.form__done { padding: var(--s-10); border-radius: 20px; background: var(--raised); }
.form__done p + p { margin-top: var(--s-3); color: var(--fg-secondary); }

.waitlist__contact { margin-top: var(--s-15); color: var(--fg-secondary); }
.waitlist__contact a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--accent);
  text-decoration: none;
}
.waitlist__contact a:hover { text-decoration: underline; }

/* ---------- FOOTER ---------- */
.footer {
  background: var(--void-black);
  padding-block: var(--s-20) var(--s-10);
}
.footer__inner { display: grid; gap: var(--s-6); }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--s-6); }
.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink-muted);
  transition: color var(--dur-fast);
}
.footer__links a:hover { color: var(--paper); }
.footer__note { color: var(--ink-dim); }
@media (min-width: 768px) {
  .footer__inner { grid-template-columns: auto 1fr auto; align-items: center; }
  .footer__links { justify-self: center; }
}

/* ---------- SCROLL-REVEAL ----------
   Nur Deckkraft und eine winzige Verschiebung. Kein Federn,
   kein Skalieren, keine Dauerschleifen.

   Bewusst als Erweiterung gebaut: Ohne die Klasse .js-reveal am
   <html> ist jeder Inhalt sichtbar. Das Skript setzt sie erst,
   wenn es die Anzeige auch wieder aufheben kann — und nimmt sie
   zurück, falls der Observer nicht liefert. Sichtbarkeit von
   Text darf nicht an einer Animation hängen. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js-reveal .reveal.is-in { opacity: 1; transform: none; }

/* Die Zebra-Zeilen blenden nur auf, ohne Versatz: Ein verschobener
   Vollbreiten-Streifen würde kurz den Abschnittsgrund durchblitzen
   lassen. */
.js-reveal .reveal--fade { transform: none; }

/* Beim Scrubben sitzt die Farbe direkt am Scrollfortschritt;
   ein 0,3s-Übergang würde hinterherhinken. */
.js-motion .scroll-copy .word { transition-duration: 0.12s; }

/* ---------- BEWEGUNGSREDUKTION ----------
   Dauer auf 0, Animation nicht entfernt — dieselbe Regel wie
   in der App (DESIGN.md §6). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    animation-duration: 0s !important;
  }
  .js-reveal .reveal { opacity: 1; transform: none; }
  .hero { position: static; }
}