/* mybrainstack · Richtung D „Tinte & Papier" · v2
   Eine Datei. Keine externen Ressourcen. Mobile first (375 px), dann 640 / 768 / 1024 / 1440. */

/* ---------- Schriften (selbst gehostet, OFL) ---------- */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-600-italic.woff2") format("woff2");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ---------- Design-Tokens ---------- */
:root {
  /* hell */
  --paper: #F5F1E8;
  --ink: #14182B;
  --accent: #2B3EE0;
  --accent-hover: #1F2FB8;
  --line: #DAD4C4;
  --muted: #5B6070;
  --card: #FFFFFF;

  /* dunkel (nur einzelne Abschnitte) */
  --d-bg: #14182B;
  --d-text: #F5F1E8;
  --d-accent: #8FA0FF;
  --d-card: #1B2038;
  --d-line: #2A3050;
  --d-muted: #B4B8C7;

  /* Ampeln: NUR für Bewertungen, immer mit Zahl */
  --amp-4: #2F7A4A;   /* grün */
  --amp-3: #A47704;   /* gelb */
  --amp-2: #C2571A;   /* orange */
  --amp-1: #B3362B;   /* rot */
  --amp-off: #E6E1D3;

  /* verdeckte Steckbrief-Zeilen */
  --redact: #E2DCCD;

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --measure: 62ch;
  --gutter: 1rem;          /* 16 px Seitenrand mobil */
  --wrap: 72rem;
  --header-h: 3.75rem;     /* Höhe des Sticky-Headers */
  --space-s: 1rem;
  --space-m: 2rem;
  --space-l: 4rem;
  --space-xl: 6rem;
  --rule: 1px solid var(--line);
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem); /* Anker + Fokus nicht unter dem Sticky-Header */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; }
p { margin: 0 0 1em; max-width: var(--measure); }
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0 0 0.6em;
}
h1 { font-size: clamp(2.2rem, 1.5rem + 3.2vw, 4.1rem); letter-spacing: -0.022em; }
h2 { font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem); max-width: 22ch; }
h3 { font-size: 1.3rem; line-height: 1.25; }
em { font-style: italic; }
strong { font-weight: 600; }

a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.dark :focus-visible { outline-color: var(--d-accent); }

.skip {
  position: absolute; left: var(--gutter); top: -4rem;
  background: var(--ink); color: var(--paper);
  padding: 0.75rem 1rem; z-index: 30; font-weight: 600;
}
.skip:focus { top: 0.75rem; }

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

.mono, .eyebrow, .sec__no {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.eyebrow { color: var(--accent); text-transform: uppercase; margin: 0 0 1.25rem; font-weight: 500; }
.dark .eyebrow { color: var(--d-accent); }
.muted { color: var(--muted); }
.dark .muted { color: var(--d-muted); }
.lede { font-size: 1.1875rem; line-height: 1.55; }
.vh {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Kopf ---------- */
.masthead { border-bottom: var(--rule); background: var(--paper); }
.masthead--sale { position: sticky; top: 0; z-index: 20; }
.masthead__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; min-height: var(--header-h);
}
/* Logo-Slot: feste Fläche, damit ein späteres Bildlogo (assets/img/logo.svg) ohne Layoutänderung passt */
.brand {
  display: inline-flex; align-items: center; gap: 0.55rem; flex: none;
  height: 44px; max-width: 11rem; overflow: hidden;
  color: var(--ink); text-decoration: none;
  font-family: var(--serif); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em;
}
.brand svg { width: 22px; height: 22px; flex: none; }
.brand__img { height: 32px; width: auto; max-width: 11rem; }
.masthead__meta { display: none; color: var(--muted); margin: 0; }

.masthead__nav { display: none; }
.masthead__nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem; }
.masthead__nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.45rem;
  font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.02em;
  color: var(--ink); text-decoration: none;
}
.masthead__nav a:hover { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; }

.masthead__cta {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; padding: 0 0.9rem;
  font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.01em;
  background: var(--accent); color: #FFFFFF; text-decoration: none; white-space: nowrap;
  border: 1.5px solid var(--accent);
  transition: background-color 120ms ease;
}
.masthead__cta:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.cta-long { display: none; }

@media (max-width: 22.5rem) {
  .brand { font-size: 1.02rem; gap: 0.4rem; }
  .masthead__cta { padding: 0 0.6rem; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem;
  min-height: 52px; padding: 0.85rem 1.5rem;
  background: var(--accent); color: #FFFFFF;
  font-family: var(--sans); font-weight: 600; font-size: 1.0625rem;
  text-decoration: none; border: 0; border-radius: 0;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
.btn:hover { background: var(--accent-hover); transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); text-decoration: none; }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.btn__arrow { width: 18px; height: 18px; flex: none; }
.dark .btn { background: var(--d-accent); color: var(--ink); box-shadow: 4px 4px 0 var(--d-text); }
.dark .btn:hover { background: #A9B6FF; box-shadow: 2px 2px 0 var(--d-text); }

/* Kaufblock: Button · Preis · Kleingedrucktes */
.buy { display: grid; justify-items: start; gap: 0.7rem; margin-top: 1.75rem; }
.buy p { margin: 0; }
.price {
  font-family: var(--serif); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.01em; margin: 0;
}
.price small { font-family: var(--sans); font-weight: 400; font-size: 0.9375rem; color: var(--muted); letter-spacing: 0; }
.dark .price small { color: var(--d-muted); }
.fine { font-size: 0.875rem; line-height: 1.5; color: var(--muted); margin: 0; }
.dark .fine { color: var(--d-muted); }

/* ---------- Hero ---------- */
.hero { padding: var(--space-m) 0 var(--space-l); border-bottom: var(--rule); }
/* Mobil (DOM-Reihenfolge): Text · Kaufblock · Cover · Faktenleiste. Ab 768 px: Cover rechts über beide Zeilen. */
.hero__grid { display: grid; gap: 0; }
.hero h1 { max-width: 19ch; margin-bottom: 0.5em; }
.hero h1 em { color: var(--accent); }
/* v4: Das Versprechen ist der Kaufgrund, deshalb dunkel und groß */
.h1__b { display: block; color: var(--ink); margin-top: 0.3em; font-size: 0.72em; line-height: 1.1; letter-spacing: -0.015em; max-width: 22ch; }
.hero .lede { max-width: 44ch; }
/* v4: Zeitachse Heute · Woche 4 · Woche 6 */
.timeline { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 1.5rem 0 0; padding: 0; max-width: 30rem; border-top: 3px solid var(--ink); font-size: 0.8125rem; }
.timeline li { position: relative; padding: 0.9rem 0.5rem 0 0; color: var(--muted); }
.timeline li::before { content: ""; position: absolute; top: -0.5rem; left: 0; width: 0.75rem; height: 0.75rem; background: var(--ink); }
.timeline b { display: block; color: var(--ink); font-weight: 600; }
.timeline .is-goal::before { background: var(--accent); width: 1rem; height: 1rem; top: -0.6rem; }
.timeline .is-goal b { color: var(--accent); }
/* v4: Garantie/Trust unter den Buttons (wird aktiv, sobald die Rückgaberegel feststeht) */
.trust { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0; padding: 0; font-size: 0.8125rem; color: var(--muted); }
.trust li::before { content: "✓ "; color: var(--accent); font-weight: 700; }
.dark .trust { color: var(--d-muted); }
/* v4: zusätzliche Kaufblöcke nach Problem und Für wen */
.buy-strip { margin-top: var(--space-m); padding-top: var(--space-m); border-top: 2px solid var(--ink); }
.buy-strip .lede { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; line-height: 1.3; max-width: 34ch; margin: 0; }
.buy-strip .buy { margin-top: 1.25rem; }
.hero__facts {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem;
  margin: 2.5rem 0 0; padding: 1rem 0 0; list-style: none; color: var(--muted);
  border-top: var(--rule); max-width: 40rem;
}
.hero__facts li::before { content: "/ "; content: "/ " / ""; color: #A39C8A; } /* Trenner wird nicht vorgelesen */
.hero__facts li:first-child::before { content: ""; }

/* Buchumschlag: CSS-Fallback, bis assets/img/cover.webp da ist */
.cover-wrap { justify-self: start; width: min(100%, 13.5rem); margin: 2.5rem 0 0; }
.cover, .cover-img { aspect-ratio: 3 / 4.1; width: 100%; box-shadow: 12px 12px 0 var(--line); }
.cover-img { height: auto; object-fit: cover; background: var(--ink); aspect-ratio: 2 / 3; }
.brand .brand__img { height: 30px; width: auto; }
.cover {
  position: relative;
  background: var(--ink); color: var(--d-text);
  padding: 1.3rem 1.15rem 1.1rem;
  display: flex; flex-direction: column;
}
.cover::before {
  content: ""; position: absolute; inset: 0.6rem;
  border: 1px solid var(--d-line); pointer-events: none;
}
.cover__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 0.75rem; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--d-muted); }
.cover__title {
  font-family: var(--serif); font-weight: 600; font-size: clamp(2.3rem, 9vw, 3rem);
  line-height: 0.98; letter-spacing: -0.02em; margin: auto 0 0.75rem;
}
.cover__title em { color: var(--d-accent); }
.cover__sub { font-size: 0.875rem; line-height: 1.45; color: var(--d-muted); margin: 0 0 1.25rem; max-width: 20ch; }
.cover__console { margin-top: auto; border-top: 1px solid var(--d-line); padding-top: 0.9rem; }

/* Kanalzug (Fader) – Designelement, rein dekorativ */
.fader { display: grid; grid-template-columns: 2.4rem 1fr; align-items: center; gap: 0.6rem; height: 1.15rem; }
.fader__label { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.06em; color: var(--d-muted); }
.fader__track { position: relative; height: 1px; background: var(--d-line); }
.fader__track::after {
  content: ""; position: absolute; top: -4px; left: var(--pos, 50%);
  width: 14px; height: 9px; background: var(--d-text); transform: translateX(-50%);
}
.fader--hot .fader__track::after { background: var(--d-accent); }

/* ---------- Abschnitte ---------- */
.sec { padding: var(--space-l) 0; border-bottom: var(--rule); }
.sec__grid { display: grid; gap: 1.25rem; }
.sec__head { display: flex; align-items: baseline; gap: 0.9rem; border-top: 2px solid var(--ink); padding-top: 0.8rem; }
.sec__no { font-weight: 500; color: var(--ink); margin: 0; }
.sec__head .eyebrow { margin: 0; }
.sec__body { min-width: 0; }
.sec__body > :last-child { margin-bottom: 0; }
.sub { font-size: 1.25rem; margin: 2.5rem 0 0.9rem; }

.dark { background: var(--d-bg); color: var(--d-text); border-bottom: 0; }
.dark .sec__head { border-top-color: var(--d-text); }
.dark .sec__no { color: var(--d-text); }
.dark a { color: var(--d-accent); }

/* ---------- 01 Problem ---------- */
.problem__text { font-size: 1.125rem; line-height: 1.65; max-width: 58ch; }
.problem__text p { margin: 0 0 0.85em; }
.problem__text p:last-child { margin-bottom: 0; }

/* Zahlenkacheln: große Zahl · kleine Grafik (nur aus den genannten Werten) · Text · Quelle */
.stats {
  list-style: none; margin: var(--space-m) 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr; column-gap: 2rem;
  border-top: 3px solid var(--ink);
}
/* Feste Zeile für die Grafik, damit die Texte in einer Kachelreihe auf gleicher Höhe beginnen */
.stat { display: grid; grid-template-rows: auto 3.6rem auto 1fr; padding: 1.5rem 0 1.6rem; border-bottom: var(--rule); min-width: 0; }
.stat .viz { margin: 0; align-self: start; }
.stat__n {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.14em;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(3.4rem, 2.6rem + 3vw, 4.6rem);
  line-height: 0.95; letter-spacing: -0.035em;
  font-variant-numeric: lining-nums tabular-nums;
  margin: 0 0 1rem; color: var(--ink);
}
.stat__u { font-family: var(--sans); font-weight: 600; font-size: 0.3em; letter-spacing: 0; color: var(--accent); }
.stat__pre { font-family: var(--mono); font-weight: 500; font-size: 0.24em; letter-spacing: 0.02em; color: var(--muted); text-transform: uppercase; }
.stat__t { margin: 0 0 0.9rem; max-width: 36ch; }
.stat__src { margin: 0; align-self: end; font-family: var(--mono); font-size: 0.75rem; line-height: 1.5; }
.stat__src a { color: var(--muted); }
.stat__src a:hover { color: var(--accent); }
.stats__note { margin: 1rem 0 0; font-size: 0.875rem; color: var(--muted); }

.viz { margin: 0 0 1rem; max-width: 18rem; }
.viz--bars { display: grid; gap: 0.35rem; }
.viz__row { display: grid; grid-template-columns: 3rem minmax(0, 1fr) 2.6rem; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.6875rem; color: var(--muted); }
.viz__bar { display: block; height: 10px; width: var(--w); background: #8A836F; } /* ≥ 3:1 auf Papier */
.viz__row--hot .viz__bar { background: var(--accent); }
.viz__row--hot { color: var(--ink); }
.viz__v { text-align: right; }
.viz--ticks { display: flex; justify-content: space-between; align-items: end; height: 1.6rem; border-bottom: 2px solid var(--ink); }
.viz--ticks i { display: block; width: 3px; height: 100%; background: var(--accent); }
.viz--ticks i:nth-child(odd) { height: 70%; }
.viz--gap { display: flex; align-items: center; height: 1.6rem; }
.viz__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); flex: none; }
.viz__dot--end { background: transparent; border: 2px solid var(--ink); }
.viz__line { flex: 1; height: 0; border-top: 3px dashed var(--accent); margin: 0 4px; }
.viz--share { position: relative; height: 1.1rem; background: var(--amp-off); border: 1.5px solid var(--ink); }
.viz__fill { position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--accent); }
.viz--people { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; max-width: 15rem; }
.viz--people i { display: block; height: 1.6rem; border: 1.5px solid var(--ink); background: transparent; }
.viz--people i.on { background: var(--accent); border-color: var(--accent); }

/* ---------- 02 Modell: Kanalzüge ---------- */
.channels { list-style: none; margin: var(--space-m) 0 0; padding: 0; border-top: 1px solid var(--d-line); }
.channel {
  display: grid; grid-template-columns: 3rem 1fr; column-gap: 0.75rem; row-gap: 0.2rem;
  padding: 1.15rem 0; border-bottom: 1px solid var(--d-line);
}
.channel__ch { grid-row: span 3; font-family: var(--mono); font-size: 0.75rem; color: var(--d-muted); padding-top: 0.45rem; }
.channel__name { font-family: var(--serif); font-weight: 600; font-size: 1.45rem; line-height: 1.2; margin: 0; }
.channel__chem { font-family: var(--mono); font-size: 0.8125rem; color: var(--d-accent); margin: 0; }
.channel__task { margin: 0; color: var(--d-text); }
.channel .fader { display: none; }
.aside-link { margin-top: 1.75rem; max-width: 60ch; }
.textlink { font-weight: 600; padding: 0.7rem 0; } /* Tippfläche ~44 px ohne Zeilensprung im Fließtext */

/* ---------- 03 Im Buch ---------- */
/* v3: Ergebnisliste „in der Hand“ als Mappe: dunkler Kopf wie der Steckbrief, abgehakte Kästchen */
.kit {
  margin: 2.5rem 0 0; max-width: 46rem;
  background: var(--card); border: 1.5px solid var(--ink); box-shadow: 8px 8px 0 var(--ink);
}
.kit__title {
  margin: 0; padding: 0.95rem 1.25rem;
  background: var(--ink); color: var(--d-text);
  font-size: 1.25rem; line-height: 1.3; max-width: none;
}
.kit__list { list-style: none; margin: 0; padding: 0.35rem 1.25rem 0.5rem; }
.kit__list li { position: relative; padding: 0.85rem 0 0.85rem 2.35rem; border-bottom: var(--rule); }
.kit__list li:last-child { border-bottom: 0; }
.kit__list li::before {
  content: ""; position: absolute; left: 0; top: 0.95rem;
  width: 1.3rem; height: 1.3rem; border: 1.5px solid var(--ink); background: var(--paper);
}
.kit__list li::after {
  content: ""; position: absolute; left: 0.33rem; top: 1.22rem;
  width: 0.7rem; height: 0.38rem; border-left: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent);
  transform: rotate(-45deg);
}

/* v3: Teil 4 als Weg in drei Schritten (mobil senkrecht, ab 768 px waagerecht) */
.toc__part .plan__intro { color: var(--ink); margin-top: 0.2rem; }
.plan { list-style: none; margin: 0.6rem 0 0; padding: 0; counter-reset: plan; display: grid; gap: 0; max-width: 46rem; }
.plan__step {
  counter-increment: plan; position: relative;
  display: grid; align-content: start; gap: 0.15rem; padding: 0 0 1.1rem 3rem; min-height: 3.2rem;
}
.plan__step::before {
  content: counter(plan); position: absolute; left: 0; top: 0;
  width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
  background: var(--accent); color: #FFFFFF;
  font-family: var(--mono); font-weight: 500; font-size: 0.875rem;
}
.plan__step:not(:last-child)::after {
  content: ""; position: absolute; left: calc(1.05rem - 1px); top: 2.1rem; bottom: 0;
  border-left: 2px solid var(--ink);
}
.plan__step:last-child { padding-bottom: 0; }
.plan__step:last-child::before { background: var(--ink); }
.plan__when { font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.02em; color: var(--accent); padding-top: 0.15rem; }
.plan__what { color: var(--ink); max-width: 30ch; }

.toc { list-style: none; margin: var(--space-m) 0 0; padding: 0; border-top: 2px solid var(--ink); }
.toc__part { padding: 1.3rem 0; border-bottom: var(--rule); display: grid; gap: 0.35rem; }
.toc__line { display: block; }
.toc__dots { display: none; }
.toc__ch { display: block; margin-top: 0.15rem; color: var(--muted); }
.toc__line h3 { margin: 0; font-size: 1.35rem; }
.toc__line .toc__dots { flex: 1; border-bottom: 1px dotted var(--muted); transform: translateY(-0.3em); min-width: 1rem; }
.toc__ch { font-family: var(--mono); font-size: 0.8125rem; white-space: nowrap; }
.toc__part p { margin: 0; color: var(--muted); max-width: 54ch; }
.toc__part .toc__note {
  margin-top: 0.35rem; padding-left: 0.7rem; border-left: 2px solid var(--accent);
  font-size: 0.875rem; color: var(--ink);
}
.toc__label { font-family: var(--mono); font-size: 0.75rem; color: var(--accent); letter-spacing: 0.04em; text-transform: uppercase; }

/* Steckbrief-Ausschnitt */
.specimen { display: grid; gap: var(--space-m); margin-top: 1rem; }
.card {
  background: var(--card); border: 1.5px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  max-width: 34rem;
}
.card__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  padding: 0.9rem 1.25rem; background: var(--ink); color: var(--d-text);
}
.card__head .mono { color: var(--d-muted); }
.card__title { font-family: var(--serif); font-weight: 600; font-size: 1.6rem; margin: 0; line-height: 1.1; }
.card dl { margin: 0; }
.card__row { padding: 0.95rem 1.25rem; border-top: var(--rule); display: grid; gap: 0.3rem; }
.card__row:first-child { border-top: 0; }
.card dt { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.card dd { margin: 0; font-size: 0.96875rem; line-height: 1.5; }
.card dd .muted { display: block; font-size: 0.875rem; margin-top: 0.25rem; }

/* Verdeckte Zeilen: im HTML steht kein echter Inhalt, nur Balken + Hinweis */
.redact { position: relative; display: grid; gap: 6px; padding: 0.2rem 0; }
.redact__bar { display: block; height: 0.75rem; width: 100%; background: var(--redact); border-radius: 2px; }
.redact__bar + .redact__bar { width: 62%; }
.redact__tag {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  padding: 0.2rem 0.55rem; background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.03em; line-height: 1.3; white-space: nowrap;
}

/* Ampel: Segmente + Zahl. Zahl trägt die Information, Farbe ergänzt. */
.rating { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; margin: 0.15rem 0; }
.meter { display: inline-flex; gap: 3px; }
.meter i { width: 14px; height: 14px; background: var(--amp-off); border: 1px solid rgba(20, 24, 43, 0.25); }
.meter[data-level="4"] i:nth-child(-n+4) { background: var(--amp-4); border-color: var(--amp-4); }
.meter[data-level="5"] i:nth-child(-n+5) { background: var(--amp-4); border-color: var(--amp-4); }
.meter[data-level="3"] i:nth-child(-n+3) { background: var(--amp-3); border-color: var(--amp-3); }
.meter[data-level="2"] i:nth-child(-n+2) { background: var(--amp-2); border-color: var(--amp-2); }
.meter[data-level="1"] i:nth-child(-n+1) { background: var(--amp-1); border-color: var(--amp-1); }
.meter--dot i { border-radius: 50%; }
.rating__n { font-family: var(--mono); font-weight: 500; font-size: 0.9375rem; margin-right: 0.6rem; }

.specimen__lead { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; line-height: 1.3; margin: 0 0 0.6rem; max-width: 26ch; }
.amounts { color: var(--muted); padding-top: 1rem; border-top: var(--rule); margin: 1.5rem 0 0; }

/* ---------- 04 Für wen ---------- */
.fit { list-style: none; margin: var(--space-m) 0 0; padding: 0; border-top: 2px solid var(--ink); display: grid; column-gap: 2.5rem; }
.fit li { position: relative; padding: 1rem 0 1rem 2rem; border-bottom: var(--rule); max-width: 50ch; }
.fit li::before { content: ""; position: absolute; left: 0.2rem; top: 1.5rem; width: 0.7rem; height: 0.7rem; background: var(--ink); }

/* ---------- FAQ ---------- */
.faq { margin-top: var(--space-m); border-top: 2px solid var(--ink); max-width: 46rem; }
.faq details { border-bottom: var(--rule); }
.faq summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 1fr 1.5rem; gap: 1rem; align-items: center;
  min-height: 44px; padding: 1.1rem 0;
  font-family: var(--serif); font-weight: 600; font-size: 1.2rem; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 14px; height: 14px; justify-self: end;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 14px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 2px 14px no-repeat;
  transition: transform 160ms ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--accent); }
.faq .faq__a { padding: 0 2.5rem 1.25rem 0; }
.faq .faq__a p:last-child { margin-bottom: 0; }

/* ---------- Schluss-CTA ---------- */
.closing { padding: var(--space-l) 0; }
.closing h2 { max-width: 22ch; }
.closing__grid { display: grid; gap: var(--space-m); align-items: end; }
.closing__buy { display: grid; justify-items: start; gap: 1rem; }
.closing .price { font-size: 2.25rem; }

/* ---------- Freebie / Danke / Rechtstexte ---------- */
.page-hero { padding: var(--space-l) 0 var(--space-m); }
.page-hero h1 { max-width: 16ch; }
.page-hero .lede { max-width: 46ch; }
.signup { display: grid; gap: var(--space-l); padding-top: var(--space-l); padding-bottom: var(--space-l); }
.signup h1 { max-width: 18ch; }
.signup h1 em { color: var(--accent); }
/* v4: Opt-ins mobil/Tablet: H1 + Lede + Formular above the fold, Liste dahinter.
   .signup__intro wird per display: contents aufgelöst, damit Formular und Liste umsortiert werden können. */
@media (max-width: 63.99rem) {
  .signup { display: flex; flex-direction: column; gap: 0; }
  .signup__intro { display: contents; }
  .signup .form-slot { order: 1; margin-top: 0.75rem; width: 100%; }
  .signup__intro .gets, .signup__intro .muted { order: 2; }
}
.signup .lede { max-width: 44ch; }
.signup .gets { margin-top: var(--space-m); }
.gets { list-style: none; margin: 0 0 var(--space-m); padding: 0; border-top: 2px solid var(--ink); counter-reset: g; }
.gets li { counter-increment: g; padding: 1rem 0 1rem 2.6rem; border-bottom: var(--rule); position: relative; max-width: 52ch; }
.gets li::before { content: counter(g, decimal-leading-zero); position: absolute; left: 0; top: 1.2rem; font-family: var(--mono); font-size: 0.75rem; color: var(--accent); }

.form-slot {
  background: var(--card); border: 1.5px solid var(--ink); box-shadow: 8px 8px 0 var(--ink);
  padding: 1.5rem 1.25rem; max-width: 30rem;
}
.form-slot h2 { font-size: 1.5rem; max-width: none; }
.consent { font-size: 0.875rem; line-height: 1.55; color: var(--muted); margin: 0; }
.consent a { color: var(--accent); }

.systems-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--d-line); }
.systems-mini li { display: flex; gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--d-line); align-items: baseline; }
.systems-mini .mono { color: var(--d-muted); min-width: 2.6rem; }
.systems-mini--wide .mono { flex: 0 0 6rem; white-space: nowrap; }
.systems-mini span:last-child { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; }

.steps { list-style: none; margin: var(--space-m) 0; padding: 0; border-top: 2px solid var(--ink); max-width: 44rem; }
.steps li { display: grid; grid-template-columns: 3rem 1fr; gap: 0.75rem; padding: 1.25rem 0; border-bottom: var(--rule); }
.steps .steps__n { font-family: var(--serif); font-weight: 600; font-size: 2rem; line-height: 1; color: var(--accent); }
.steps h2 { font-size: 1.25rem; margin: 0 0 0.35rem; max-width: none; }
.steps p { margin: 0; }

.legal { padding: var(--space-l) 0; }
.legal__body { max-width: 44rem; }
.legal h1 { font-size: clamp(2.1rem, 1.6rem + 2.4vw, 3.2rem); }
.legal h2 { font-size: 1.45rem; margin-top: 2.5rem; padding-top: 1rem; border-top: var(--rule); max-width: none; }
.legal h3 { font-size: 1.1rem; margin-top: 1.5rem; }
.legal address { font-style: normal; margin: 0 0 1em; }
.legal ul { padding-left: 1.2rem; max-width: var(--measure); }
.legal li { margin-bottom: 0.4rem; }
.legal .stand { font-family: var(--mono); font-size: 0.8125rem; color: var(--muted); }

/* Platzhalter, die vor Livegang ersetzt werden müssen: bewusst auffällig */
.ph {
  background: #FFF3C4; color: #5A4300; border: 1px dashed #8A6A00;
  padding: 0.05em 0.35em; font-family: var(--mono); font-size: 0.875em; font-weight: 500;
}

/* ---------- Fuß ---------- */
.footer { border-top: 2px solid var(--ink); padding: var(--space-m) 0 var(--space-l); font-size: 0.9375rem; }
.footer__grid { display: grid; gap: 1.25rem; }
.footer__info p { margin: 0 0 0.3rem; }
.footer nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.footer nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }
.footer p { margin: 0; }
.footer .disclaimer { font-weight: 600; margin-bottom: 0.3rem; }
/* v4: Footer mit Lead-Seiten + Rechtliches */
.footer__links { display: grid; gap: 0.25rem; }

/* ---------- 640 px ---------- */
@media (min-width: 40rem) {
  .stats { grid-template-columns: 1fr 1fr; }
  .fit { grid-template-columns: 1fr 1fr; }
}

/* ---------- 768 px ---------- */
@media (min-width: 48rem) {
  :root { --gutter: 2rem; --space-l: 5rem; }
  .masthead__meta { display: block; }
  .masthead__nav { display: block; }
  .hero__grid { grid-template-columns: minmax(0, 1fr) 15rem; column-gap: 2.5rem; }
  .hero__copy { grid-column: 1; grid-row: 1; align-self: end; }
  .hero__facts { grid-column: 1; grid-row: 2; align-self: start; }
  .cover-wrap { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 100%; justify-self: end; margin: 0; }
  .cover { padding: 1.5rem 1.4rem 1.25rem; }
  .cover__title { font-size: 2.3rem; }
  .channel { grid-template-columns: 3.5rem 14.5rem 1fr; align-items: baseline; row-gap: 0; column-gap: 1.5rem; }
  .channel__ch { grid-row: span 2; padding-top: 0.35rem; }
  .channel__name { grid-column: 2; grid-row: 1; }
  .channel__chem { grid-column: 2; grid-row: 2; }
  .channel__task { grid-column: 3; grid-row: 1 / span 2; align-self: center; max-width: 40ch; }
  .toc__line { display: flex; align-items: baseline; gap: 0.6rem; }
  .toc__dots { display: block; }
  .toc__ch { display: inline; margin: 0; color: var(--ink); }
  .card__row { grid-template-columns: 9.5rem 1fr; gap: 1rem; align-items: baseline; }
  .card__row--hidden { align-items: center; }
  .plan { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.25rem; margin-top: 0.9rem; }
  .plan__step { padding: 3rem 0 0; min-height: 0; }
  .plan__step:not(:last-child)::after { left: 2.1rem; right: -1.25rem; top: calc(1.05rem - 1px); bottom: auto; border-left: 0; border-top: 2px solid var(--ink); }
  .kit__title { padding: 1.05rem 1.5rem; }
  .kit__list { padding: 0.35rem 1.5rem 0.5rem; }
  .form-slot { padding: 2rem; }
  .footer__grid { grid-template-columns: 1fr auto; align-items: start; }
}

/* ---------- 1024 px: Randspalte für Abschnittsnummern ---------- */
@media (min-width: 64rem) {
  :root { --space-l: 6rem; }
  .cta-long { display: inline; }
  .cta-short { display: none; }
  .masthead__nav ul { gap: 0.5rem; }
  .hero { padding: 5rem 0 var(--space-l); }
  .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: var(--space-l); }
  .cover-wrap { width: min(100%, 21rem); justify-self: end; }
  .cover__title { font-size: 3rem; }
  .sec__grid { grid-template-columns: 11rem minmax(0, 1fr); column-gap: 3rem; }
  .sec__head {
    flex-direction: column; gap: 0.35rem;
    position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start;
  }
  .sec__no { font-size: 0.875rem; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .channel { grid-template-columns: 3.5rem 15.5rem minmax(0, 1fr) 9rem; }
  .channel .fader { display: grid; grid-column: 4; grid-row: 1 / span 2; grid-template-columns: 1fr; align-self: center; }
  .specimen { grid-template-columns: minmax(0, 32rem) minmax(0, 1fr); align-items: end; column-gap: 3.5rem; }
  .toc__part { grid-template-columns: 7rem minmax(0, 1fr); column-gap: 1.5rem; }
  .toc__part .toc__label { grid-row: 1 / span 3; padding-top: 0.4rem; }
  .toc__part > :not(.toc__label) { grid-column: 2; }
  .closing__grid { grid-template-columns: minmax(0, 1fr) auto; }
  .signup { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); column-gap: 5rem; align-items: start; padding-top: var(--space-l); }
  .form-slot { position: sticky; top: 1.5rem; margin-top: 3.2rem; }
}

/* ---------- 1440 px ---------- */
@media (min-width: 90rem) {
  :root { --wrap: 80rem; }
  body { font-size: 1.125rem; }
}

/* ---------- Druck ---------- */
@media print {
  .masthead--sale, .sec__head { position: static; }
  .masthead__cta, .masthead__nav, .btn, .skip, .channel .fader, .cover-wrap { display: none; }
  body { background: #fff; color: #000; }
  /* Dunkle Abschnitte: Farben auf Druck (weißes Papier) umstellen, sonst helle Schrift auf Weiß */
  .dark {
    background: none; color: #000;
    --d-text: #000; --d-muted: #333; --d-accent: #1F2FB8; --d-line: #999;
  }
  .card__head, .redact__tag { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sec, .closing { padding: 1.5rem 0; }
  .stat, .channel, .toc__part, .card, .kit, .faq details { break-inside: avoid; }
  .kit__title { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .plan__step::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* sonst weiße Ziffer auf weißem Grund */
  .plan { break-inside: avoid; }
  h2, h3, .sub { break-after: avoid; }
  .stat__src a::after { content: " (" attr(href) ")"; word-break: break-all; }
}

/* ---------- Anmeldeformular ---------- */
.signup-form { display: grid; gap: 0.75rem; margin: 0 0 1rem; }
.signup-form label { font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; }
.signup-form input[type="email"] {
  font: inherit; font-size: 1rem; padding: 0.8rem 0.9rem; min-height: 48px; width: 100%;
  background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 0;
}
.signup-form input[type="email"]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.signup-form .btn { justify-content: center; cursor: pointer; }
.signup-form .btn:disabled { opacity: 0.6; cursor: wait; }
.signup-form__status { margin: 0; font-size: 0.875rem; color: var(--muted); min-height: 1.3em; }