/* ==========================================================================
   FemaleMetrix — Design System
   Schwarz / Anthrazit / Weiß + Electric Blue
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOKENS — hell, eine Palette, kein Dunkelmodus.

   Bis August 2026 war FemaleMetrix dunkel-first (--bg-0: #070A0F). Die Seite
   spricht jetzt Apples Designsprache, und die ist HELL: apple.com wertet
   `prefers-color-scheme` nicht aus, Schwarz ist dort kein Grund, sondern
   Interpunktion — ein Band, das ein Argument trägt (siehe .section-dark).
   Wer hier einen Dunkelmodus nachrüstet, muss rund 400 harte Farbwerte in
   css/*.css auf einem zweiten Grund nachprüfen; das ist bewusst nicht getan.

   Die Token-NAMEN sind absichtlich unverändert geblieben: 1015 Referenzen
   quer durch acht CSS-Dateien hängen daran. Getauscht wurden die WERTE.
   Deshalb heißt --bg-0 weiterhin so, meint aber jetzt den hellen Grund.
   -------------------------------------------------------------------------- */
:root {
  --bg-0: #FBFBFD;               /* Seitengrund */
  --bg-1: #F5F5F7;               /* abgesetztes Band */
  --bg-2: #EEEEF0;               /* zweite Absetzung, Rillen */
  --card: #FFFFFF;
  --card-2: #FFFFFF;
  --card-solid: #FFFFFF;
  --line: #E8E8ED;
  --line-strong: #D2D2D7;
  --text: #1D1D1F;
  /* Apple setzt hier #6E6E73 und #86868B. Der zweite Wert erreicht auf #FBFBFD
     nur 3,51:1 und verfehlt damit AA für normalen Text — Apple nimmt das für
     sein Kleingedrucktes in Kauf, wir nicht: dieselbe Stufe trägt hier die
     Haftungshinweise, und die müssen lesbar sein. Beide Stufen sind deshalb
     eine Spur dunkler gesetzt, der Abstand zwischen ihnen bleibt erhalten.
     Nachgerechnet in tools-dev/tests/fixes-audit.test.js (S13). */
  --muted: #55555A;              /* 6,6:1 auf --bg-0 */
  --muted-2: #6E6E73;            /* 4,9:1 auf --bg-0 */

  /* EIN Lachs für Aktion. Das Marken-Lachs #FA8072 wird über 100-mal als
     TEXTfarbe gebraucht (.eyebrow, .card-num, --status-active), erreicht auf
     Weiß aber nur 2,4:1 und wäre dort unlesbar. Es bleibt deshalb reine
     Markenfarbe (--brand-salmon, nur Logo und Verlauf); als Text tragen zwei
     abgedunkelte Verwandte: --accent (Lachs, 4,8:1) und --accent-2 (Pflaume,
     6,5:1).

     Warum --accent-2 Pflaume ist und nicht einfach ein dunkleres Lachs:
     --status-flag ist Rot (#D70015, Farbton 354°) und --status-attention ist
     Amber (Farbton 27°). Ein warmes Lachs bei 5° liegt zwischen beiden. Als
     das Aktions-Blau noch bei 211° lag, war der Abstand geschenkt; mit einer
     warmen Marke muss er gebaut werden. Pflaume (322°) hält ihn — deshalb ist
     das die zweite Textfarbe, und deshalb bleibt Rot allein der Alarmfarbe
     vorbehalten und wird nie als Fläche unter Lachs gesetzt. */
  --accent: #C0483C;             /* 4,8:1 auf --bg-0 */
  --accent-2: #8A4470;           /* 6,5:1 auf --bg-0 */
  --brand-salmon: #FA8072;       /* NIE als Text allein — Logo und Verlauf */
  --accent-soft: rgba(192, 72, 60, 0.08);
  --accent-line: rgba(192, 72, 60, 0.22);

  /* Semantik unverändert: Grün Verbesserung, Amber Aufmerksamkeit, Rot
     Priorität. Nur die Werte sind die dunkleren Apple-Systemfarben, weil die
     hellen Varianten auf Weiß nicht mehr lesbar wären. */
  --green: #248A3D;
  --green-soft: rgba(36, 138, 61, 0.10);
  --amber: #B25000;
  --amber-soft: rgba(178, 80, 0, 0.10);
  --red: #D70015;
  --red-soft: rgba(215, 0, 21, 0.08);

  /* SAND — zweiter Akzent, bewusst NICHT funktional: Grün heißt Verbesserung,
     Amber Aufmerksamkeit, Rot Priorität, Lachs Aktion. Sand heißt gar nichts,
     und genau das ist seine Aufgabe. Auf hellem Grund kann Sand kein Text
     mehr sein — es bleibt Fläche und Linie, die Textstufe zeigt auf --muted. */
  --sand: #6E6E73;
  --sand-2: #86868B;
  --sand-soft: rgba(160, 145, 125, 0.08);
  --sand-line: rgba(160, 145, 125, 0.28);

  /* Verlauf endet nicht im vollen Marken-Lachs: als Textfüllung (.text-grad)
     muss auch das helle Ende 3:1 für große Schrift halten. #FA8072 läge bei
     2,4:1, #D96A57 liegt bei 3,3:1. */
  --grad: linear-gradient(135deg, #C0483C 0%, #D96A57 100%);

  /* AUFLAGEN — Aufhellungen und Abdunklungen, die die Fläche unter sich
     nicht kennen: Rillen von Fortschrittsbalken, Zebrastreifen in Tabellen,
     gestrichelte Rahmen, Hover-Flächen.

     Im dunklen Stand waren das rgba(255,255,255,x), beim Wechsel auf Hell
     wurden daraus rgba(0,0,0,y). Beides sind Sackgassen, sobald es zwei
     Gründe gibt — deshalb liegen sie jetzt auf Tokens und drehen mit.
     Sechs Stufen reichen für alle 82 Fundstellen. */
  --wash-1: rgba(0, 0, 0, 0.03);
  --wash-2: rgba(0, 0, 0, 0.06);
  --wash-3: rgba(0, 0, 0, 0.10);
  --wash-4: rgba(0, 0, 0, 0.16);
  --wash-5: rgba(0, 0, 0, 0.24);
  --wash-6: rgba(0, 0, 0, 0.34);

  /* Milchige Leisten (Kopfzeile, App-Tab-Bar). Muss den Grundton tragen,
     nicht nur Weiß, sonst leuchtet die Leiste im Dunkelmodus. */
  /* SCRIM — die Farbe, mit der ein Foto abgedunkelt/aufgehellt wird, als
     RGB-Tripel, damit die Deckkraft je Verlaufsstufe frei bleibt.
     Ein Scrim ist per Definition TEILWEISE durchlässig: er trägt Text auf
     der einen Seite und lässt das Motiv auf der anderen stehen. Wer hier ein
     deckendes Token einsetzt, löscht das Bild darunter. Genau das ist am
     09.08.2026 passiert — das Porträt auf coaching.html war unsichtbar,
     weil aus rgba(7,9,13,0.62) ein volldeckendes var(--card) geworden war. */
  --scrim-rgb: 251, 251, 253;
  --chrome: rgba(251, 251, 253, 0.72);
  --chrome-stark: rgba(251, 251, 253, 0.86);
  --chrome-bar: rgba(251, 251, 253, 0.94);

  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 28px;             /* Kachel-Radius der Bento-Flächen */
  --radius-pill: 980px;          /* Buttons */
  --shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 12px 34px rgba(0, 0, 0, 0.10);

  /* SF Pro über den System-Stack: auf Apple-Geräten rendert das die echte
     SF Pro, überall sonst greift das lokal gehostete Inter (kein CDN, siehe
     css/fonts.css). Space Grotesk ist raus — Apple hat genau eine Familie. */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, monospace;

  --header-h: 48px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* overflow-x: clip begrenzt die Breite auf iOS Safari (verhindert, dass ein nach
   rechts geschobenes fixed-Element wie der Warenkorb das Layout-Viewport
   aufbläht -> schwarzer Streifen rechts). clip statt hidden, damit html KEIN
   Scroll-Container wird und position:sticky weiter funktioniert. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; width: 100%; }
/* Im Score-Fragebogen ohne weiches Scrollen: sonst animiert der Browser den
   Fokuswechsel und ueberholt die Positionskorrektur nach jeder Frage. */
html[data-wizard] { scroll-behavior: auto; }

body {
  font-family: var(--font-body);
  background: var(--bg-0);
  color: var(--text);
  /* 17px/1.47 mit leicht negativer Laufweite ist Apples Fließtext-Setzung.
     Vorher: 16px/1.65 ohne Laufweitenkorrektur. */
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: rgba(192, 72, 60, 0.22); }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul, ol { list-style: none; }

.container { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.container-narrow { width: min(860px, calc(100% - 48px)); margin: 0 auto; }
.container-tight { width: min(720px, calc(100% - 48px)); margin: 0 auto; }

/* --------------------------------------------------------------------------
   Typografie
   -------------------------------------------------------------------------- */

/* Gewicht 600 statt 700: SF Pro Display Semibold ist Apples Überschriftenschnitt.
   Bold wirkt in dieser Familie gedrungen, sobald die Grade groß werden. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.h-display {
  font-size: clamp(2.5rem, 7.4vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.022em;
}

.h-section { font-size: clamp(2rem, 5.2vw, 3.5rem); line-height: 1.07; letter-spacing: -0.02em; }
.h-card { font-size: 1.3125rem; line-height: 1.19; letter-spacing: -0.016em; }

.lead {
  font-size: clamp(1.1875rem, 2vw, 1.3125rem);
  color: var(--muted);
  line-height: 1.42;
  letter-spacing: -0.014em;
  text-wrap: pretty;
}

/* EYEBROW — vorher: JetBrains Mono, 0.78rem, Versalien, 0.14em Sperrung, mit
   28px-Strich davor. Apple setzt die Zeile über der Überschrift als normal
   gesetzten, blauen Satz in Überschriftengröße. Der Strich entfällt: bei Apple
   trennt der Weißraum, nicht die Linie. */
.eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.1875rem, 2vw, 1.3125rem);
  font-weight: 600;
  letter-spacing: -0.014em;
  text-transform: none;
  color: var(--accent);
  margin-bottom: 6px;
}

.eyebrow::before { content: none; }

.text-grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.mono { font-family: var(--font-mono); }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }

/* --------------------------------------------------------------------------
   KLEINGEDRUCKTES — Apples Fußnotensystem

   Apple stellt Einschränkungen nicht in Warnkästen, sondern setzt eine
   hochgestellte Ziffer an die Behauptung und löst sie am Ende des Bandes in
   12px Grau auf. Der Hinweis verschwindet dadurch nicht — er verliert nur den
   Rang, den ein Kasten ihm gibt.

   Wo er NICHT hin darf: alles, was rechtlich am Ort der Aussage stehen muss.
   Die KI-Kennzeichnung eines generierten Bildes bleibt deshalb als
   .media-caption direkt unter dem Bild stehen (Apple macht es bei simulierten
   Bildschirminhalten genauso), nicht als Fußnote am Seitenende.
   -------------------------------------------------------------------------- */
.fine {
  font-size: 0.75rem;
  line-height: 1.36;
  letter-spacing: -0.004em;
  color: var(--muted-2);
  margin: 0;
}

/* Hochgestellte Referenz an der Behauptung. */
.fn-ref {
  font-size: 0.62em;
  line-height: 0;
  vertical-align: super;
  color: var(--muted-2);
  font-weight: 400;
  letter-spacing: 0;
  margin-left: 0.12em;
}
a.fn-ref { color: var(--accent); }

/* Fußnotenblock am Bandende. */
.footnotes {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.footnotes li, .footnotes p {
  font-size: 0.75rem;
  line-height: 1.36;
  color: var(--muted-2);
  letter-spacing: -0.004em;
  display: grid;
  grid-template-columns: 1.35em 1fr;
  gap: 4px;
}
.footnotes li::before { content: counter(fn); counter-increment: fn; }
.footnotes { counter-reset: fn; }
.footnotes a { text-decoration: underline; }

/* Bildunterschrift am Ort der Aussage — 12px Grau, aber NICHT verschiebbar. */
.media-caption {
  font-size: 0.75rem;
  line-height: 1.36;
  color: var(--muted-2);
  letter-spacing: -0.004em;
  margin-top: 10px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

/* 48px statt 72px, milchig hell statt milchig dunkel. Apples Leiste ist
   auffällig niedrig und dauerhaft sichtbar — sie soll nicht wirken, sondern
   verfügbar sein. Die Haarlinie steht immer, nicht erst beim Scrollen: auf
   hellem Grund verschwimmt sonst die Kante zwischen Leiste und Seite. */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--chrome);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}

.site-header.scrolled {
  background: var(--chrome-stark);
  border-bottom-color: var(--line-strong);
}

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.02rem;
  letter-spacing: 0.13em;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* P15 BRAND — Split-X-Identität: Wortmarke MALEMETRI + Custom-X (SVG).
   Das X ist der Brand-Akzent; keine separate „Metrix"-Färbung mehr. */
/* Die beiden X-Hälften tragen keine Farbe mehr im Markup. Sie stand dort als
   fester Wert und war zweimal falsch: im dunklen Stand war die linke Hälfte
   Creme (#F0EEE9) und verschwand auf hellem Grund; nach dem Wechsel auf Hell
   war sie Tinte und verschwand auf dunklem Grund. Eine Marke, die auf zwei
   Gründen steht, gehört auf Tokens.
   Das Share-Bild (tools-dev/og-image.html) behält seine festen Werte — es
   rendert eine eigenständige dunkle Fläche und schaltet nie um. */
.logo-x .lx-ink { stroke: var(--text); }
.logo-x .lx-akzent { stroke: var(--accent); }
.logo-word { line-height: 1; }
.logo-x { width: 1.08em; height: 1.08em; margin-left: -0.04em; margin-top: -0.06em; flex-shrink: 0; transition: transform 0.18s; }
.logo:hover .logo-x { transform: scale(1.06); }
@media (max-width: 480px) { .logo { font-size: 0.92rem; letter-spacing: 0.1em; } }

/* (Legacy .logo-mark/.x entfernt — Split-X-Identität seit P15) */

.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

/* 12px, Normalgewicht, gedeckt über Deckkraft statt über eine zweite Farbe.
   Apples Navigation ist bewusst klein: sie soll den Weg zeigen, nicht um
   Aufmerksamkeit mit dem Inhalt konkurrieren. */
.main-nav a:not(.btn) {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text);
  opacity: 0.86;
  transition: opacity 0.2s;
  position: relative;
  padding: 6px 0;
  white-space: nowrap;
}

.main-nav a:not(.btn):hover { opacity: 1; }

/* Der aktive Punkt trug einen 2px-Verlaufsbalken. Apple markiert ihn nur über
   volle Deckkraft und ein halbes Gewicht mehr — eine Linie unter einem 12px
   großen Wort ist auf hellem Grund lauter als das Wort selbst. */
.main-nav a.active {
  opacity: 1;
  font-weight: 500;
}

.main-nav a.active::after { content: none; }

/* Nur für Screenreader: im Layout unsichtbar, im Zugänglichkeitsbaum da. */
h1[tabindex="-1"]:focus, section[tabindex="-1"]:focus, .os-body[tabindex="-1"]:focus { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Datei-Inputs: optisch verschwunden, aber fokussierbar (WCAG 2.1.1).
   display:none / [hidden] nähmen sie aus der Tab-Reihenfolge. */
.file-hidden { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.has-file { position: relative; }
.has-file:focus-within { outline: 2px solid var(--accent-2, #FA8072); outline-offset: 3px; }

.header-actions { display: flex; align-items: center; gap: 14px; }
/* Magazin-Artikel führen drei Ziele im Header (Magazin · Score · Protokoll);
   auf schmalen Geräten umbrechen statt überlaufen. */
.blog-actions { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }

/* Warenkorb und Menü sind bei Apple reine Symbole ohne Rahmen und ohne Fläche.
   Die 42px-Kästchen mit Rand stammen aus dem dunklen Stand, wo ein Symbol ohne
   Fläche verschwand; auf hellem Grund trägt das Symbol selbst. Die Trefferfläche
   bleibt bei 44px — sie wird nur nicht mehr gezeichnet. */
.cart-btn {
  position: relative;
  background: none;
  border: 0;
  color: var(--text);
  opacity: 0.86;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  transition: opacity 0.2s;
}

.cart-btn:hover { opacity: 1; }

.cart-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 600;
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  display: grid;
  place-items: center;
}

.cart-count.empty { display: none; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  width: 44px;
  height: 44px;
  color: var(--text);
  opacity: 0.86;
  font-size: 1.1rem;
}

@media (max-width: 1360px) {
  .main-nav { gap: 16px; }
  .main-nav a:not(.btn) { font-size: 0.86rem; }
}

@media (max-width: 1140px) {
  .main-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg-1);
    border-bottom: 1px solid var(--line);
    padding: 12px 24px 24px;
    display: none;
    /* Das Schubfach ist `fixed` — es wandert beim Seiten-Scrollen NICHT mit.
       Ohne eigenen Deckel ragt es mit aufgeklappten Kapiteln weit über den
       unteren Bildrand hinaus, und alles darunter ist schlicht nicht
       erreichbar: kein Scrollen der Seite bringt es zurück. Deshalb scrollt
       es selbst. */
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .main-nav.open { display: flex; }
  .main-nav a:not(.btn) { padding: 14px 4px; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
  .main-nav a.active::after { display: none; }
  .main-nav .btn { margin-top: 16px; justify-content: center; }
  .nav-toggle { display: grid; place-items: center; }

  /* SPRACHWAHL STEHT AUCH MOBIL IM HEADER — neben Hell/Dunkel.
     Bis August 2026 war sie hier ausgeblendet und main.js schob dafür eine
     Zeile „Sprache / Language" ins Menü. Damit lag die eine Umschaltung im
     Kopf sichtbar und die andere zwei Klicks tief hinter dem Menü-Knopf,
     obwohl beide dasselbe tun: die Darstellung der Seite umstellen. Wer die
     Sprache sucht, sucht sie dort, wo er die Helligkeit gefunden hat.

     Der Knopf steht in jeder Seite schon im Markup; es war nur diese eine
     Zeile, die ihn mobil versteckt hat. Sie ist ersatzlos entfallen — die
     Menüzeile und ihre Einfügung in main.js ebenfalls. */
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

/* PILLE STATT RECHTECK — die auffälligste Einzeländerung.
   Vorher: 12px-Radius, Gewicht 600, Verlaufsfüllung, 28px-Schlagschatten in
   Akzentfarbe. Apple füllt flach mit EINEM Blau, rundet vollständig und setzt
   die Beschriftung im Normalgewicht. Der Schatten entfällt ersatzlos: ein
   farbiger Schein unter dem Button ist die Handschrift des dunklen Standes. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 23px;
  min-height: 44px;
  border-radius: var(--radius-pill);
  font-weight: 400;
  font-size: 1.0625rem;
  letter-spacing: -0.012em;
  border: 1px solid transparent;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover { background: #C0483C; }

/* Sekundär: umrandete Pille in derselben Blaufamilie. */
.btn-ghost {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}

.btn-ghost:hover { background: var(--accent-soft); }

/* .btn-dark hieß so, weil es die dunkle Fläche des alten Standes trug. Es ist
   jetzt die stille Pille: graue Fläche, dunkle Schrift — Apples zweite Stufe. */
.btn-dark {
  background: var(--bg-2);
  border-color: transparent;
  color: var(--text);
}

.btn-dark:hover { background: var(--line-strong); }

.btn-sm { padding: 8px 16px; min-height: 36px; font-size: 0.875rem; }
.btn-lg { padding: 15px 30px; min-height: 52px; font-size: 1.1875rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.36; pointer-events: none; }

/* Gefüllte Pillen tragen bei Apple NIE einen Pfeil — der Chevron gehört dem
   Textlink (.link-arrow). .btn-arrow bleibt als Klasse bestehen, weil sie in
   über 40 Seiten im Markup steht, zeichnet aber nichts mehr. */
.btn-arrow::after { content: none; }

/* TEXTLINK MIT CHEVRON — Apples zweite Handlungsebene neben der Pille. */
.link-arrow {
  color: var(--accent);
  font-size: 1.0625rem;
  letter-spacing: -0.012em;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 44px;
}
.link-arrow:hover { text-decoration: underline; }
.link-arrow::after {
  content: "\203A";
  font-size: 1.22em;
  line-height: 0;
  transform: translateY(0.02em);
}

/* --------------------------------------------------------------------------
   Sektionen & Layout-Utilities
   -------------------------------------------------------------------------- */

/* BÄNDER — der Wechsel der Fläche IST die Trennung. Die Haarlinien oben und
   unten an .section-alt sind entfallen: auf hellem Grund liest man den
   Farbsprung #FBFBFD → #F5F5F7 auch ohne Strich, und zwei Linien pro Band
   ergeben über eine lange Seite ein Gitter, das Apple nicht kennt. */
.section { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.section-tight { padding: clamp(40px, 6vw, 72px) 0; }
.section-alt { background: var(--bg-1); }

/* SCHWARZES PRODUKTBAND — Schwarz ist auf dieser Seite kein Grund mehr,
   sondern Interpunktion: EIN Band pro Seite, das dort steht, wo das Argument
   kippt. Zwei davon sind kein Akzent mehr, sondern ein dunkles Layout mit
   weißen Löchern.

   Umgesetzt als LOKALER TOKEN-BEREICH, nicht als Liste von Ausnahmen.
   Der erste Anlauf zählte einzelne Komponenten auf (.lead, .card, .btn-dark …)
   und war damit sofort unvollständig: Überschriften in Kacheln, Haarlinien,
   Zähler und vor allem Inline-Styles wie style="color:var(--text)" blieben
   dunkel auf Schwarz stehen. Ein Band, das die Tokens für sich neu belegt,
   trägt alles darin automatisch — auch das Inline-var(), weil es gegen den
   lokalen Bereich auflöst.

   Wer hier eine Komponente ergänzt, ergänzt am besten ein TOKEN, keine Regel. */
.section-dark {
  --text: #F5F5F7;
  --muted: #A1A1A6;
  --muted-2: #86868B;
  --line: #2A2A2C;
  --line-strong: #3A3A3C;
  --hairline: rgba(255, 255, 255, 0.14);
  --surface: rgba(255, 255, 255, 0.04);
  --card: #1D1D1F;
  --card-2: #232326;
  --card-solid: #1D1D1F;
  --bg-1: #1D1D1F;
  --bg-2: #2A2A2D;
  /* Auf Schwarz trägt das helle Lachs, nicht das für Weiß abgedunkelte. */
  --accent: #FF8F7A;
  --accent-2: #DFA0BE;
  --accent-soft: rgba(255, 143, 122, 0.16);
  --accent-line: rgba(255, 143, 122, 0.38);
  --green: #30D158;
  --amber: #FF9F0A;
  --red: #FF453A;
  --sand: #A1A1A6;
  --sand-2: #86868B;
  --grad: linear-gradient(135deg, #FF8F7A 0%, #FA8072 100%);
  --shadow: none;
  --shadow-hover: 0 12px 34px rgba(0, 0, 0, 0.6);
  /* Auflagen drehen im Band mit: hier wird aufgehellt, nicht abgedunkelt. */
  --wash-1: rgba(255, 255, 255, 0.05);
  --wash-2: rgba(255, 255, 255, 0.08);
  --wash-3: rgba(255, 255, 255, 0.12);
  --wash-4: rgba(255, 255, 255, 0.18);
  --wash-5: rgba(255, 255, 255, 0.26);
  --wash-6: rgba(255, 255, 255, 0.36);

  background: #000;
  color: var(--text);
}
.section-dark .card,
.section-dark .price-card { box-shadow: none; }

.section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 60px); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head.center .eyebrow::before { display: none; }
.section-head p { margin-top: 16px; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

@media (max-width: 980px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Karten
   -------------------------------------------------------------------------- */

/* KACHEL STATT KARTE — rahmenlos, großer Radius, Schatten erst beim Zeigen.
   Der 1px-Rahmen war auf dunklem Grund die einzige Möglichkeit, eine Fläche
   abzusetzen. Auf Weiß genügt die weiße Fläche auf dem grauen Band; ein
   Rahmen zusätzlich ergibt den Formular-Look, den Apple vermeidet. */
.card {
  background: var(--card);
  border: 0;
  border-radius: var(--radius-lg);
  padding: clamp(26px, 3vw, 40px);
  box-shadow: var(--shadow);
  transition: box-shadow 0.25s, transform 0.25s;
}

/* Nur anklickbare Kacheln heben ab — eine Fläche, die auf Zeigen reagiert,
   ohne irgendwohin zu führen, ist eine Falschaussage. */
a.card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }

.card h3 { margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 1rem; }

/* Kicker: vorher Mono, 0.12em gesperrt, in Cyan. Jetzt Apples stille
   Beschriftung — klein, grau, gesetzt wie Text, nicht wie ein Messwert. */
.card-num {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted-2);
  letter-spacing: 0.01em;
  text-transform: none;
  margin-bottom: 12px;
  display: block;
}

.card-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  margin-bottom: 18px;
}

/* --------------------------------------------------------------------------
   Flagship-Veredelung — editoriale Präzision wie in den Ebooks (bp-*):
   Mono-Kicker statt Emoji, feiner Oberkanten-Akzent, ruhiger Rhythmus.
   -------------------------------------------------------------------------- */
/* .fcard trug eine Verlaufsfüllung und eine 44px-Akzentkante an der Oberkante.
   Beides fällt weg: Apple unterscheidet Kacheln über Größe und Position im
   Raster, nie über eine angesetzte Farbkante. Die Klasse bleibt bestehen,
   damit das Markup unverändert bleibt — sie ist jetzt eine normale Kachel. */
.fcard {
  position: relative;
  background: var(--card);
}
.fcard::before { content: none; }
.fcard .card-num { margin-bottom: 12px; }
.fcard h3 { margin-bottom: 8px; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding: calc(var(--header-h) + clamp(56px, 9vw, 110px)) 0 clamp(64px, 8vw, 110px);
  overflow: hidden;
}

/* Mitscrollende Hero-Hintergründe deaktiviert: das globale, STATISCHE
   Cinematic-Ambient (body::before/::after, Dateiende) übernimmt — wie in
   den Ebooks steht der Hintergrund, nur der Inhalt scrollt. */
.hero-bg, .hero-grid-bg { display: none; }

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 8px 18px 8px 10px;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 28px;
}

.hero-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(45, 212, 167, 0.15);
  animation: pulse 2.4s infinite;
  margin-left: 8px;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(45, 212, 167, 0.15); }
  50% { box-shadow: 0 0 0 7px rgba(45, 212, 167, 0.05); }
}

.hero h1 { margin-bottom: 22px; }
.hero .lead { margin-bottom: 36px; max-width: 560px; }

.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; }

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  color: var(--muted);
  font-size: 0.86rem;
}

.hero-trust li { display: flex; align-items: center; gap: 8px; }
.hero-trust li::before { content: "✓"; color: var(--accent-2); font-weight: 700; }

/* Dashboard-Mock im Hero */

.dash-card {
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  padding: 26px;
  box-shadow: var(--shadow);
  position: relative;
}

.dash-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 21px;
  padding: 1px;
  background: linear-gradient(140deg, rgba(37, 140, 255, 0.5), transparent 40%, transparent 70%, rgba(250, 128, 114, 0.25));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.dash-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}

.dash-title { font-family: var(--font-body);
  font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: var(--muted); }

.dash-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--green-soft);
  color: var(--green);
  border: 1px solid rgba(45, 212, 167, 0.3);
}

.dash-score-row { display: flex; align-items: center; gap: 24px; margin-bottom: 24px; }

.dash-score-num {
  font-family: var(--font-display);
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1;
}

.dash-score-num small { font-size: 1.2rem; color: var(--muted-2); font-weight: 500; }

.dash-bars { display: grid; gap: 13px; }

.dash-bar-row { display: grid; grid-template-columns: 86px 1fr 36px; align-items: center; gap: 12px; font-size: 0.8rem; }
.dash-bar-row .label { color: var(--muted); font-weight: 500; }
.dash-bar-row .val { font-family: var(--font-mono); color: var(--text); text-align: right; font-size: 0.78rem; }

.bar-track {
  height: 7px;
  border-radius: 4px;
  background: var(--wash-3);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--grad);
  width: 0;
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.bar-fill.low { background: linear-gradient(90deg, #f06a6a, #f5b54a); }
.bar-fill.mid { background: linear-gradient(90deg, #f5b54a, #8ed46a); }
.bar-fill.high { background: linear-gradient(90deg, #FF8F7A, #FA8072); }

/* --------------------------------------------------------------------------
   Stat-Leiste
   -------------------------------------------------------------------------- */

.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.stats-strip > div { background: var(--card); padding: 28px 24px; text-align: center; }

.stat-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.stat-label { color: var(--muted); font-size: 0.85rem; }

@media (max-width: 760px) {
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   Säulen / Pillars
   -------------------------------------------------------------------------- */

.pillar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

@media (max-width: 1060px) { .pillar-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pillar-grid { grid-template-columns: 1fr; } }

.pillar {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  transition: border-color 0.25s, transform 0.25s;
}

.pillar:hover { border-color: var(--accent-line); transform: translateY(-3px); }

.pillar-tag {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  color: var(--accent-2);
  margin-bottom: 10px;
  display: block;
}

.pillar h3 { font-size: 1.05rem; margin-bottom: 8px; }
.pillar p { font-size: 0.86rem; color: var(--muted); }

/* Kanonischer Kapitel-Index (P16-CORR-B) — EIN Werk, 14 Kapitel, editorial */
.proto-index { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--line); }
.proto-chap { border-bottom: 1px solid var(--line); }
.proto-chap > a { display: grid; grid-template-columns: 54px 1fr auto; gap: 16px; align-items: center; padding: 16px 6px; text-decoration: none; color: inherit; transition: background .18s; }
.proto-chap > a:hover { background: var(--wash-1); }
.proto-chap .pc-n { font-family: var(--font-mono); font-size: 1.35rem; font-weight: 400; color: rgba(0, 0, 0, 0.24); letter-spacing: .02em; text-align: center; }
.proto-chap .pc-b b { display: block; font-size: 1rem; color: var(--text); margin-bottom: 2px; letter-spacing: .01em; }
.proto-chap .pc-b span { display: block; font-size: .86rem; color: var(--muted); line-height: 1.4; }
.proto-chap .pc-tag { font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; padding: 4px 9px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.proto-chap .pc-tag.free { color: var(--muted-2); border-color: var(--line); }
.proto-chap .pc-tag.paid { color: var(--accent-2); border-color: rgba(250, 128, 114,.4); }
.proto-chap.is-hero .pc-n { color: var(--accent-2); }
.proto-chap.is-hero .pc-b b { font-size: 1.12rem; }
.proto-chap.is-hero > a { background: linear-gradient(100deg, rgba(250, 128, 114,.05), transparent 60%); }
.proto-chap.proto-outro { border-top: 1px solid var(--line); }
.proto-chap.proto-outro .pc-n { color: var(--accent-2); font-size: 1.1rem; }
.proto-chap.proto-outro .pc-b b { color: var(--muted); font-size: 0.94rem; letter-spacing: 0.02em; }
@media (max-width: 560px) {
  .proto-chap > a { grid-template-columns: 40px 1fr; gap: 12px; padding: 14px 4px; }
  .proto-chap .pc-tag { grid-column: 2; justify-self: start; margin-top: 6px; }
}

/* Frei lesbare Kapitel-Previews (P16-D2) — klickbare Kapitel-Kacheln */
.preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 10px; }
@media (max-width: 900px) { .preview-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .preview-grid { grid-template-columns: 1fr; } }
.preview-ch { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 16px; text-decoration: none; color: inherit; transition: border-color 0.2s, transform 0.2s; }
.preview-ch:hover { border-color: var(--accent-line); transform: translateY(-3px); }
.preview-ch .pk { display: block; font-family: var(--font-body);
  font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: var(--accent-2); margin-bottom: 8px; }
.preview-ch b { display: block; font-size: 1rem; color: var(--text); margin-bottom: 5px; }
.preview-ch .pd { display: block; font-size: 0.86rem; color: var(--muted); line-height: 1.45; }
.preview-ch .pgo { display: inline-block; margin-top: 11px; font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: var(--accent-2); }

/* --------------------------------------------------------------------------
   Listen mit Häkchen / Kreuzen
   -------------------------------------------------------------------------- */

.check-list { display: grid; gap: 13px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--muted); font-size: 0.96rem; }
.check-list li::before {
  content: "✓";
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent-2);
  font-size: 0.75rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  margin-top: 2px;
}

.cross-list li::before {
  content: "✕";
  background: var(--red-soft);
  border-color: rgba(240, 106, 106, 0.3);
  color: var(--red);
}

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }

/* !important, damit ein evtl. inline gesetztes grid-template-columns (z. B. repeat(2,1fr))
   auf dem Handy nicht das Layout über den Bildschirmrand schiebt (iOS Shrink-to-fit). */
@media (max-width: 980px) { .pricing-grid { grid-template-columns: 1fr !important; max-width: 520px; margin: 0 auto; } }

.price-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.price-card.featured {
  background: linear-gradient(180deg, rgba(37, 140, 255, 0.1), var(--card) 45%);
  border-color: var(--accent-line);
  box-shadow: 0 24px 70px rgba(37, 140, 255, 0.18);
}

.price-flag {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--grad);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 100px;
  white-space: nowrap;
}

.price-name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; margin-bottom: 6px; }
.price-for { color: var(--muted); font-size: 0.88rem; margin-bottom: 22px; min-height: 44px; }

.price-amount { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.price-amount .num { font-family: var(--font-display); font-size: 2.7rem; font-weight: 700; letter-spacing: -0.02em; }
.price-amount .per { color: var(--muted-2); font-size: 0.85rem; }

.price-note { font-size: 0.8rem; color: var(--muted-2); margin-bottom: 24px; }

.price-card .check-list { margin-bottom: 28px; flex: 1; }
.price-card .check-list li { font-size: 0.9rem; }

/* --------------------------------------------------------------------------
   Accordion (FAQ)
   -------------------------------------------------------------------------- */

/* Apples FAQ ist eine Liste auf Haarlinien, keine Reihe gerahmter Kästen.
   Jede Frage in eigener Box ergab neun Rahmen untereinander — auf Weiß liest
   sich das als Formular, nicht als Text. */
.accordion { display: block; border-top: 1px solid var(--line); }

.accordion details {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  overflow: hidden;
}

.accordion details[open] { border-color: var(--line); }

.accordion summary {
  list-style: none;
  cursor: pointer;
  padding: 19px 34px 19px 0;
  font-weight: 400;
  font-size: 1.0625rem;
  letter-spacing: -0.012em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  position: relative;
}

.accordion summary::-webkit-details-marker { display: none; }

/* Plus-Zeichen als Symbol statt als Mono-Glyphe: „+" im Schriftschnitt sitzt
   je nach Fallback-Familie unterschiedlich hoch. */
.accordion summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 13px;
  height: 13px;
  margin-top: -7px;
  background: var(--accent);
  transition: transform 0.25s;
  flex-shrink: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

.accordion details[open] summary::after { transform: rotate(135deg); }

.accordion .acc-body { padding: 0 40px 22px 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }

/* --------------------------------------------------------------------------
   Formulare
   -------------------------------------------------------------------------- */

.field { display: grid; gap: 8px; margin-bottom: 18px; }
.field label { font-size: 0.88rem; font-weight: 600; }
.field .hint { font-size: 0.78rem; color: var(--muted-2); }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
select, textarea {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 13px 16px;
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A9A396' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 42px;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 140, 255, 0.18);
}

input.invalid, select.invalid { border-color: var(--red); }

textarea { resize: vertical; min-height: 110px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

.checkbox-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.2s;
  font-size: 0.88rem;
  color: var(--muted);
}

.checkbox-row:hover { border-color: var(--line-strong); }
.checkbox-row.checked { border-color: var(--accent-line); background: var(--accent-soft); color: var(--text); }
.checkbox-row.invalid { border-color: var(--red); }

.checkbox-row input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Check-Wizard
   -------------------------------------------------------------------------- */

/* width statt max-width: so greift auf schmalen Geräten dieselbe
   Randlogik wie bei .container* — vorher lag der Fragetext bei 0 px. */
.wizard-wrap { width: min(760px, calc(100% - 48px)); margin: 0 auto; }

/* Die Ergebnisseite injiziert ihr HTML direkt in die <section>; ohne
   diesen Wrapper stand der Text auf jedem Gerät bei exakt 0 px. */
.result-wrap { width: min(860px, calc(100% - 48px)); margin: 0 auto; }

.wizard-progress { margin-bottom: 36px; }

.wizard-progress-top {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  color: var(--muted);
  margin-bottom: 10px;
}

.wizard-progress .bar-track { height: 5px; }

/* Ohne Höhen-Untergrenze fällt die Karte je nach Optionsanzahl um mehrere
   hundert Pixel zusammen; der darunter liegende Inhalt rutscht dann in den
   Blick. Siehe die Scroll-Korrektur in js/check.js/renderStep. */
#wizBody { min-height: 58vh; }

/* Kapitel-Einleitung: erscheint einmal je Kapitel über der Frage und sagt,
   warum jetzt dieses Thema kommt. */
.q-chapter-intro {
  margin: 2px 0 14px; padding: 10px 14px;
  border-left: 2px solid var(--accent-line, rgba(37, 140, 255,.35));
  background: var(--accent-soft, rgba(37, 140, 255,.08));
  border-radius: 0 8px 8px 0;
  color: var(--muted); font-size: 0.92rem; line-height: 1.55;
}

.q-block { animation: qIn 0.35s cubic-bezier(0.22, 1, 0.36, 1); }

@keyframes qIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.q-module-tag {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  color: var(--accent-2);
  margin-bottom: 14px;
  display: block;
}

.q-title { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-bottom: 8px; }
.q-sub { color: var(--muted); font-size: 0.92rem; margin-bottom: 28px; }

.option-grid { display: grid; gap: 11px; margin-bottom: 30px; }
.option-grid.two-col { grid-template-columns: 1fr 1fr; }
/* Raster-Kinder haben standardmäßig min-width:auto und können damit über
   ihre Spalte hinauswachsen — bei 320 px ragte die dritte Antwortkarte
   7 px über den Seitenrand. */
.option-grid > .option-card { min-width: 0; }
/* Die dreiteilige Bewertungszeile (JA / TEILWEISE / NEIN) stand als
   Inline-Stil im JavaScript und war auf schmalen Geräten zu eng. */
.fb-rating { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fb-rating .option-card { padding-left: 10px; padding-right: 10px; text-align: center; justify-content: center; }
.fb-rating .option-card span { overflow-wrap: anywhere; }
@media (max-width: 360px) { .fb-rating { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .option-grid.two-col { grid-template-columns: 1fr; } }

.option-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  font-size: 0.95rem;
  text-align: left;
  color: var(--text);
  width: 100%;
}

.option-card:hover { border-color: var(--accent-line); background: var(--card-2); }

.option-card.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent);
}

.option-card .opt-key {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  display: grid;
  place-items: center;
  color: var(--muted);
  flex-shrink: 0;
}

.option-card.selected .opt-key { background: var(--accent); border-color: var(--accent); color: #fff; }

.wizard-nav { display: flex; justify-content: space-between; gap: 14px; margin-top: 8px; }

.slider-wrap { margin: 12px 0 34px; }

.slider-val {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 18px;
}

input[type="range"] {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--wash-4);
  appearance: none;
  -webkit-appearance: none;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--grad);
  cursor: pointer;
  border: 3px solid #fff;
  box-shadow: 0 4px 14px rgba(37, 140, 255, 0.5);
}

input[type="range"]::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 3px solid #fff;
}

.slider-labels { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--muted-2); margin-top: 10px; }

/* --------------------------------------------------------------------------
   Ergebnis-Dashboard
   -------------------------------------------------------------------------- */

.result-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  padding: clamp(28px, 4.5vw, 48px);
  margin-bottom: 28px;
}

@media (max-width: 760px) { .result-hero { grid-template-columns: 1fr; text-align: center; } .result-hero .score-ring { margin: 0 auto; } }

.score-ring { position: relative; width: 190px; height: 190px; flex-shrink: 0; }
.score-ring svg { transform: rotate(-90deg); }
.score-ring .ring-bg { stroke: var(--wash-3); }
.score-ring .ring-val { stroke: url(#ringGrad); stroke-linecap: round; transition: stroke-dashoffset 1.4s cubic-bezier(0.22, 1, 0.36, 1); }

.score-ring-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}

.score-ring-center .num { font-family: var(--font-display); font-size: 3.2rem; font-weight: 700; line-height: 1; }
.score-ring-center .of { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted-2); margin-top: 4px; }

.result-meta { display: grid; gap: 6px; }
.result-status { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; }

.result-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
@media (max-width: 760px) { .result-chips { justify-content: center; } }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 8px 16px;
  font-size: 0.82rem;
  color: var(--muted);
}

.chip strong { color: var(--text); font-weight: 600; }
.chip.accent { border-color: var(--accent-line); background: var(--accent-soft); }
.chip.warn { border-color: rgba(245, 181, 74, 0.35); background: var(--amber-soft); }

.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
@media (max-width: 900px) { .result-grid { grid-template-columns: 1fr; } }

.radar-wrap { display: grid; place-items: center; padding: 12px 0; }

.score-rows { display: grid; gap: 16px; }

.score-row { display: grid; gap: 7px; }
.score-row-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.88rem; }
.score-row-top .name { font-weight: 600; }
.score-row-top .pts { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); }
.score-row .bar-track { height: 8px; }

.alert {
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  font-size: 0.92rem;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 18px 0;
}

.alert .alert-icon { font-size: 1.2rem; flex-shrink: 0; }
.alert-warn { background: var(--amber-soft); border: 1px solid rgba(245, 181, 74, 0.35); color: #f8d9a0; }
.alert-danger { background: var(--red-soft); border: 1px solid rgba(240, 106, 106, 0.35); color: #f5b8b8; }
.alert-info { background: var(--accent-soft); border: 1px solid var(--accent-line); color: #FBD9D2; }
.alert-ok { background: var(--green-soft); border: 1px solid rgba(45, 212, 167, 0.35); color: #9ff0d8; }

.priority-card { border-left: 3px solid var(--accent); }
.priority-card .pri-rank { font-family: var(--font-body);
  font-weight: 600; font-size: 0.75rem; color: var(--accent-2); letter-spacing: 0.01em; display: block; margin-bottom: 8px; }

/* ---------- Score-Dashboard (Ergebnisseite) ---------- */
.dash-block { margin-bottom: 20px; }
.chip.warn { color: var(--red); }

/* Stärkste Bereiche */
.strength-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-top: 6px; }
.strength-item { background: var(--card-2, var(--wash-1)); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.strength-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.strength-name { font-weight: 700; color: var(--text); }
.strength-val { font-family: var(--font-mono); font-weight: 700; color: var(--green); font-size: 1.15rem; }
.strength-val small { font-size: 0.7rem; color: var(--muted-2, var(--muted)); }

/* Engpass + Priorität */
.bottleneck-card { border-left: 3px solid var(--red); }
.priority1 { border: 1px solid var(--accent-line, var(--line)); background: linear-gradient(135deg, var(--accent-soft), transparent); }
.prio-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.prio-steps li { display: flex; gap: 14px; align-items: flex-start; }
.prio-num { flex: none; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #FF8F7A, #FA8072); color: #fff; font-family: var(--font-mono); font-weight: 700; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; }
.prio-steps li > span:last-child { color: var(--muted); padding-top: 3px; }

/* Personalisierte Wege: Lesen/Tracken + Angebote */
.path-card { text-decoration: none; display: block; transition: border-color .15s, transform .15s; }
.path-card:hover { border-color: var(--accent-line, var(--line-strong)); transform: translateY(-2px); }
.path-tag { font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: var(--accent); }
.offer-card { text-decoration: none; display: flex; flex-direction: column; }
.offer-card.featured { border-color: var(--accent-line); background: var(--accent-soft); }
.offer-card .offer-price { font-family: var(--font-mono); font-weight: 700; color: var(--text); font-size: 1.2rem; margin: 2px 0 8px; }
.offer-card .offer-price small { font-size: 0.72rem; color: var(--muted-2, var(--muted)); font-weight: 400; }
.offer-card .btn { margin-top: auto; }

/* Teilbare Score-Card */
.mm-scorecard { max-width: 440px; margin: 0 auto; background: linear-gradient(150deg, #10151f, #0a0d13); border: 1px solid var(--accent-line, #223); border-radius: 18px; padding: 22px 24px; box-shadow: 0 12px 40px rgba(0,0,0,0.35); }
.mm-scorecard .sc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mm-scorecard .sc-brand { font-family: var(--font-head, "Poppins", sans-serif); font-weight: 600; letter-spacing: 0.06em; color: var(--text); }
.mm-scorecard .sc-brand strong { color: #FF8F7A; }
.mm-scorecard .sc-level { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; color: #A9A396; text-align: right; }
.mm-scorecard .sc-score { display: flex; align-items: baseline; gap: 4px; margin: 10px 0 16px; }
.mm-scorecard .sc-num { font-family: var(--font-head, "Poppins", sans-serif); font-weight: 700; font-size: 3.4rem; line-height: 1; background: linear-gradient(135deg, #FF8F7A, #FA8072); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mm-scorecard .sc-of { color: #A9A396; font-size: 1rem; }
.mm-scorecard .sc-bars { display: grid; gap: 7px; }
.mm-scorecard .sc-bar { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 10px; }
.mm-scorecard .sc-bar-label { font-family: var(--font-body);
  font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: #A9A396; }
.mm-scorecard .sc-bar-track { height: 7px; border-radius: 4px; background: var(--wash-3); overflow: hidden; }
.mm-scorecard .sc-bar-fill { display: block; height: 100%; border-radius: 4px; }
.mm-scorecard .sc-bar-fill.low { background: #e0a020; }
.mm-scorecard .sc-bar-fill.mid { background: #E9695A; }
.mm-scorecard .sc-bar-fill.high { background: linear-gradient(90deg, #FF8F7A, #FA8072); }
.mm-scorecard .sc-foot { margin-top: 16px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; color: #6b7688; text-align: center; }

@media (max-width: 560px) {
  .mm-scorecard { padding: 18px 18px; }
  .mm-scorecard .sc-num { font-size: 2.8rem; }
  .strength-grid { grid-template-columns: 1fr; }
}

.plan-day {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.plan-day:last-child { border-bottom: none; }

.plan-day-num {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--accent-2);
  letter-spacing: 0.01em;
  padding-top: 3px;
}

.plan-day ul { display: grid; gap: 6px; }
.plan-day li { color: var(--muted); font-size: 0.92rem; display: flex; gap: 10px; }
.plan-day li::before { content: "·"; color: var(--accent-2); font-weight: 700; }

/* --------------------------------------------------------------------------
   Shop
   -------------------------------------------------------------------------- */

.shop-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }

.filter-chip {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 9px 20px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--muted);
  transition: all 0.2s;
}

.filter-chip:hover { border-color: var(--accent-line); color: var(--text); }
.filter-chip.active { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }

.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1020px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .product-grid { grid-template-columns: 1fr; } }

.product-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s, transform 0.25s;
}

.product-card:hover { border-color: var(--accent-line); transform: translateY(-3px); }

.product-visual {
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  position: relative;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.product-visual svg { width: 100%; height: 100%; }

.product-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 100px;
  background: var(--grad);
  color: #fff;
}

.product-badge.neutral { background: var(--bg-2); border: 1px solid var(--line-strong); color: var(--muted); }

.product-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.product-cat { font-family: var(--font-body);
  font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: var(--muted-2); margin-bottom: 8px; }
.product-body h3 { font-size: 1.08rem; margin-bottom: 8px; }
.product-body .desc { color: var(--muted); font-size: 0.86rem; flex: 1; margin-bottom: 18px; }

.product-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.product-price { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; }
.product-price small { font-size: 0.7rem; color: var(--muted-2); font-weight: 400; display: block; }

/* Warenkorb-Drawer */

.cart-overlay {
  position: fixed;
  inset: 0;
  background: var(--card);
  backdrop-filter: blur(3px);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.cart-overlay.open { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 100%);
  background: var(--bg-1);
  border-left: 1px solid var(--line-strong);
  z-index: 201;
  /* Geschlossen KOMPLETT aus dem Layout nehmen (display:none). Ein full-width,
     per translateX(100%) nach rechts geparktes Panel verbreitert auf iOS Safari
     sonst das Layout-Viewport -> der Menue-Button (☰) rutscht rechts aus dem
     Bild und der Text wird abgeschnitten. display:none hat keine Box, kann das
     Viewport also nicht aufblaehen. */
  display: none;
  flex-direction: column;
}

.cart-drawer.open { display: flex; animation: cartSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1); }

@keyframes cartSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

.cart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
}

.cart-head h3 { font-size: 1.1rem; }

.cart-close {
  background: var(--card);
  border: 1px solid var(--line);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: var(--text);
  font-size: 1rem;
}

.cart-items { flex: 1; overflow-y: auto; padding: 18px 24px; display: grid; gap: 14px; align-content: start; }

.cart-empty { text-align: center; color: var(--muted); padding: 48px 0; }
.cart-empty .big { font-size: 2.4rem; margin-bottom: 12px; }

.cart-item {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 14px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
}

.cart-item-thumb {
  width: 54px;
  height: 54px;
  border-radius: 9px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 1.3rem;
}

.cart-item-name { font-size: 0.86rem; font-weight: 600; line-height: 1.3; }
.cart-item-price { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); margin-top: 3px; }

.qty-stepper { display: flex; align-items: center; gap: 2px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 9px; }
.qty-stepper button { background: none; border: none; color: var(--text); width: 28px; height: 30px; font-size: 0.95rem; }
.qty-stepper button:hover { color: var(--accent-2); }
.qty-stepper .qty { font-family: var(--font-mono); font-size: 0.82rem; min-width: 22px; text-align: center; }

.cart-item-remove { background: none; border: none; color: var(--muted-2); font-size: 0.78rem; margin-top: 4px; text-decoration: underline; }
.cart-item-remove:hover { color: var(--red); }

.cart-foot { border-top: 1px solid var(--line); padding: 20px 24px; display: grid; gap: 12px; }
.cart-total-row { display: flex; justify-content: space-between; font-size: 0.9rem; color: var(--muted); }
.cart-total-row.grand { font-size: 1.05rem; color: var(--text); font-weight: 700; }
.cart-total-row .mono { font-family: var(--font-mono); }

/* --------------------------------------------------------------------------
   Buchungskalender
   -------------------------------------------------------------------------- */

.booking-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 32px; align-items: start; }
@media (max-width: 900px) { .booking-layout { grid-template-columns: 1fr; } }

.cal-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }

.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.cal-head h3 { font-size: 1.05rem; text-transform: capitalize; }

.cal-nav-btn {
  background: var(--bg-2);
  border: 1px solid var(--line);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: var(--text);
  font-size: 0.95rem;
  transition: border-color 0.2s;
}

.cal-nav-btn:hover:not([disabled]) { border-color: var(--accent-line); }
.cal-nav-btn[disabled] { opacity: 0.3; cursor: default; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }

.cal-dow { font-family: var(--font-body);
  font-weight: 600; font-size: 0.75rem; color: var(--muted-2); text-align: center; padding: 6px 0; }

.cal-day {
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1px solid transparent;
  background: none;
  color: var(--text);
  font-size: 0.88rem;
  font-family: var(--font-mono);
  display: grid;
  place-items: center;
  position: relative;
  transition: all 0.15s;
}

.cal-day.available { background: var(--bg-2); border-color: var(--line); cursor: pointer; }
.cal-day.available:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.cal-day.available::after {
  content: "";
  position: absolute;
  bottom: 6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--green);
}

.cal-day.selected { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 6px 18px rgba(37, 140, 255, 0.4); }
.cal-day.selected::after { background: #fff; }
.cal-day.disabled { color: var(--muted-2); opacity: 0.35; }

.slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 480px) { .slot-grid { grid-template-columns: repeat(2, 1fr); } }

.slot-chip {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 8px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text);
  text-align: center;
  transition: all 0.15s;
}

.slot-chip:hover:not(.taken) { border-color: var(--accent-line); background: var(--accent-soft); }
.slot-chip.selected { background: var(--accent); border-color: var(--accent); color: #fff; }
.slot-chip.taken { opacity: 0.3; cursor: default; text-decoration: line-through; }

.booking-summary {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  font-size: 0.92rem;
  display: grid;
  gap: 4px;
}

/* --------------------------------------------------------------------------
   Steps / Timeline
   -------------------------------------------------------------------------- */

.phase-list { display: grid; gap: 0; position: relative; }

.phase-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  padding-bottom: 40px;
  position: relative;
}

.phase-item:last-child { padding-bottom: 0; }

.phase-item::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 56px;
  bottom: 0;
  width: 2px;
  background: var(--line);
}

.phase-item:last-child::before { display: none; }

.phase-dot {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--accent-line);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent-2);
  font-weight: 700;
  flex-shrink: 0;
}

.phase-body h3 { margin-bottom: 4px; font-size: 1.15rem; }
.phase-weeks { font-family: var(--font-body);
  font-weight: 600; font-size: 0.75rem; color: var(--muted-2); letter-spacing: 0.01em; display: block; margin-bottom: 12px; }
.phase-body p { color: var(--muted); font-size: 0.94rem; margin-bottom: 10px; }
.phase-body .tags { display: flex; flex-wrap: wrap; gap: 8px; }

.tag {
  font-size: 0.76rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 5px 13px;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Tabellen
   -------------------------------------------------------------------------- */

/* Vergleichszeilen auf Haarlinien statt Datenraster: keine Kopfzeilen-Fläche,
   keine Mono-Versalien in der Kopfzeile, mehr Luft je Zeile. */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.data-table th, .data-table td { text-align: left; padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.data-table th { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em; text-transform: none; color: var(--muted-2); }
.data-table td { color: var(--muted); }
.data-table td:first-child { color: var(--text); font-weight: 600; font-size: 1.0625rem; }

/* --------------------------------------------------------------------------
   CTA-Band
   -------------------------------------------------------------------------- */

/* Der blaue Radial-Schein und der Akzentrahmen stammen aus dem dunklen Stand.
   Apple stellt den Abschluss als ruhige graue Fläche mit großem Radius. */
.cta-band {
  background: var(--bg-1);
  border: 0;
  border-radius: var(--radius-lg);
  padding: clamp(44px, 7vw, 80px) clamp(24px, 5vw, 64px);
  text-align: center;
}

.cta-band h2 { font-size: clamp(2rem, 4.4vw, 3rem); margin-bottom: 16px; }
.cta-band p { color: var(--muted); max-width: 560px; margin: 0 auto 32px; }
.cta-band .hero-ctas { justify-content: center; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-1);
  padding: 64px 0 36px;
  margin-top: clamp(72px, 9vw, 120px);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 48px;
}

@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand p { color: var(--muted); font-size: 0.88rem; margin-top: 14px; max-width: 300px; }

/* Apples Footer setzt die Spaltentitel in 12px Halbfett in Textfarbe, die
   Einträge darunter in 12px Grau — nicht in gesperrten Mono-Versalien. */
.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: -0.004em;
  text-transform: none;
  color: var(--text);
  margin-bottom: 12px;
  font-weight: 600;
}

.footer-col ul { display: grid; gap: 9px; }
.footer-col a { color: var(--muted); font-size: 0.75rem; transition: color 0.2s; }
.footer-col a:hover { color: var(--text); text-decoration: underline; }
/* Unterebene im Footer: Was zu DAS PROTOKOLL GEHÖRT, steht eingerückt
   darunter statt als eigener Punkt daneben. Vorher lasen sich das
   12-Wochen-Programm und die Kapitelübersicht wie zwei weitere Produkte —
   auf einer Seite, deren FAQ „genau zwei Angebote" sagt. */
.footer-col .footer-sub {
  gap: 8px; margin: 9px 0 3px; padding-left: 12px;
  border-left: 1px solid var(--line);
}
.footer-col .footer-sub a { font-size: 0.83rem; color: var(--muted-2); }
.footer-col .footer-sub a:hover { color: var(--muted); }

.footer-disclaimer {
  border-top: 1px solid var(--line);
  padding-top: 28px;
  color: var(--muted-2);
  font-size: 0.78rem;
  line-height: 1.7;
  margin-bottom: 24px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--muted-2);
  font-size: 0.8rem;
}

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */

.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--card-2);
  border: 1px solid var(--accent-line);
  border-radius: 12px;
  padding: 14px 24px;
  font-size: 0.9rem;
  z-index: 300;
  opacity: 0;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 48px);
  /* Toast ist reine Anzeige: darf nie Taps auf UI dahinter schlucken —
     weder unsichtbar (opacity 0) noch während der Einblendung. */
  pointer-events: none;
}

.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast .toast-icon { color: var(--green); font-weight: 700; }

/* --------------------------------------------------------------------------
   Reveal-Animationen
   -------------------------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   Hilfsseiten (Rechtliches, Prosa)
   -------------------------------------------------------------------------- */

.prose { max-width: 760px; }
.prose h2 { font-size: 1.4rem; margin: 40px 0 14px; }
.prose h3 { font-size: 1.1rem; margin: 28px 0 10px; }
.prose p, .prose li { color: var(--muted); font-size: 0.95rem; margin-bottom: 12px; }
.prose ul { list-style: disc; padding-left: 22px; }
.prose ul li { margin-bottom: 6px; }
.prose strong { color: var(--text); }
.prose a { color: var(--accent-2); text-decoration: underline; }

.placeholder-note {
  background: var(--amber-soft);
  border: 1px solid rgba(245, 181, 74, 0.35);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-size: 0.85rem;
  color: #f8d9a0;
  margin-bottom: 28px;
}

.page-head { padding: calc(var(--header-h) + clamp(48px, 7vw, 90px)) 0 clamp(36px, 5vw, 64px); position: relative; }
.page-head .hero-bg { opacity: 0.7; }

/* --------------------------------------------------------------------------
   Checkout
   -------------------------------------------------------------------------- */

.checkout-layout { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 36px; align-items: start; }
@media (max-width: 900px) { .checkout-layout { grid-template-columns: 1fr; } .checkout-summary-card { order: -1; } }

.checkout-summary-card { position: sticky; top: calc(var(--header-h) + 24px); }

.summary-line { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; font-size: 0.9rem; color: var(--muted); border-bottom: 1px solid var(--line); }
.summary-line:last-of-type { border-bottom: none; }
.summary-line .mono { font-family: var(--font-mono); color: var(--text); white-space: nowrap; }
.summary-line.grand { font-weight: 700; color: var(--text); font-size: 1.05rem; border-top: 1px solid var(--line-strong); margin-top: 8px; padding-top: 16px; }

.pay-option {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 18px;
  cursor: pointer;
  transition: border-color 0.2s;
  margin-bottom: 12px;
}

.pay-option:hover { border-color: var(--line-strong); }
.pay-option.selected { border-color: var(--accent); background: var(--accent-soft); }
.pay-option input { margin-top: 4px; accent-color: var(--accent); }
.pay-option .pay-name { font-weight: 600; font-size: 0.95rem; }
.pay-option .pay-desc { font-size: 0.82rem; color: var(--muted); margin-top: 3px; }

.order-success {
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
  padding: 40px 0;
}

.order-success .success-icon {
  width: 84px;
  height: 84px;
  margin: 0 auto 28px;
  border-radius: 50%;
  background: var(--green-soft);
  border: 1px solid rgba(45, 212, 167, 0.4);
  display: grid;
  place-items: center;
  font-size: 2.2rem;
  color: var(--green);
}

/* ==========================================================================
   LIGHT THEME
   ========================================================================== */



/* ==========================================================================
   HEADER CONTROLS (Sprache + Theme)
   ========================================================================== */

/* Wie der Warenkorb: reines Symbol, kein Kästchen. Die Trefferfläche bleibt
   bei 44px, sie wird nur nicht mehr gezeichnet. */
.icon-btn {
  background: none;
  border: 0;
  color: var(--text);
  opacity: 0.86;
  height: 44px;
  min-width: 44px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: var(--font-body);
  letter-spacing: -0.01em;
  transition: opacity 0.2s;
}
.icon-btn:hover { opacity: 1; }
.icon-btn svg { width: 17px; height: 17px; }

.icon-btn:hover { border-color: var(--accent-line); background: var(--card-2); }
.icon-btn svg { width: 17px; height: 17px; }
.lang-btn .lang-code { letter-spacing: 0.04em; }

.theme-btn .sun { display: none; }

/* Mehr-Dropdown */
.nav-more { position: relative; }
.nav-more-toggle {
  background: none; border: none; color: var(--muted); font: inherit;
  font-size: 0.92rem; font-weight: 500; cursor: pointer; padding: 6px 0;
  display: inline-flex; align-items: center; gap: 5px;
}
.nav-more-toggle:hover { color: var(--text); }
.nav-more-toggle::after { content: "▾"; font-size: 0.7rem; opacity: 0.7; }
.nav-more-menu {
  position: absolute; top: calc(100% + 12px); right: 0;
  background: var(--bg-1); border: 1px solid var(--line-strong);
  border-radius: 14px; padding: 8px; min-width: 210px;
  box-shadow: var(--shadow); display: none; flex-direction: column; gap: 2px; z-index: 120;
  /* Mit den Kapiteln sind es rund dreißig Zeilen. Ohne Deckel wächst das
     Menü über den unteren Bildrand hinaus und die letzten Einträge sind
     nicht mehr erreichbar. Im mobilen Schubfach (unten) gilt das nicht —
     dort scrollt die Navigation selbst. */
  max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto; overscroll-behavior: contain;
}
.nav-more-menu.open { display: flex; }
.nav-more-menu a {
  padding: 11px 14px !important; border-radius: 9px; font-size: 0.9rem !important;
  color: var(--muted); border-bottom: none !important; display: flex; align-items: center; gap: 10px;
}
.nav-more-menu a:hover { background: var(--card-2); color: var(--text); }
.nav-more-menu a .mi { font-size: 1rem; }
/* Gruppen-Beschriftung: acht Einträge ohne Gliederung wären eine Liste, in
   der man sucht. Mit zwei Mini-Überschriften ist es ein Menü, das man liest.
   Kein Trennstrich zusätzlich — die Beschriftung IST die Trennung. */
.nav-more-label {
  display: block; padding: 10px 14px 4px; font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem; letter-spacing: 0.01em;
  color: var(--muted-2); pointer-events: none;
}
.nav-more-label + a { margin-top: 0; }
.nav-more-menu a + .nav-more-label { margin-top: 6px; border-top: 1px solid var(--hairline); }

/* My FemaleMetrix — ruhiger Sekundär-Zugang (kein zweiter dominanter CTA) */
.main-nav a.nav-my:not(.btn) {
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 7px 14px; font-size: 0.86rem; font-weight: 600; color: var(--text);
}
.main-nav a.nav-my:not(.btn):hover { border-color: var(--accent); color: var(--accent); }
.main-nav a.nav-my.active::after { display: none; }
@media (max-width: 980px) {
  .main-nav a.nav-my:not(.btn) { border: none; border-bottom: 1px solid var(--line); border-radius: 0; padding: 14px 4px; font-size: 1.05rem; }
}

@media (max-width: 980px) {
  .nav-more { width: 100%; }
  /* "Mehr" ist auf dem Handy eine antippbare, einklappbare Zeile (Akkordeon).
     Das Menue bleibt kurz: Haupt-Navigation + "Mehr ▾" + CTA. Antippen klappt
     die Sekundaer-Punkte auf. Nutzt die vorhandene Toggle-Logik (main.js). */
  .nav-more-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 14px 4px; cursor: pointer;
    font-size: 1.05rem; font-weight: 500; color: var(--muted);
    border-bottom: 1px solid var(--line);
  }
  .nav-more-toggle:hover { color: var(--text); }
  .nav-more-toggle::after {
    content: "▾"; font-size: 0.85rem; opacity: 0.7; transition: transform 0.2s;
  }
  /* Chevron dreht, wenn aufgeklappt */
  .nav-more:has(.nav-more-menu.open) .nav-more-toggle::after { transform: rotate(180deg); }
  /* Eingeklappt: Sekundaer-Liste ausgeblendet; .open klappt sie auf */
  /* Im Schubfach scrollt die Navigation als Ganzes — ein eigener Deckel auf
     dem Untermenü würde eine zweite Scrollfläche in der ersten erzeugen. */
  .nav-more-menu { position: static; display: none; box-shadow: none; border: none; padding: 0; min-width: 0; background: none; max-height: none; overflow-y: visible; }
  .nav-more-menu.open { display: flex; }
  .nav-more-menu a {
    border-bottom: 1px solid var(--line) !important;
    padding: 13px 4px 13px 18px !important; font-size: 1rem !important;
    color: var(--muted-2);
  }
  .nav-more-menu a:hover, .nav-more-menu a.active { color: var(--text); background: none; }
  /* Im Akkordeon reicht die Beschriftung ohne Trennstrich — die Einträge
     haben hier schon eigene Linien, ein zweiter Strich wäre Rauschen. */
  .nav-more-label { padding: 14px 4px 4px; }
  .nav-more-menu a + .nav-more-label { border-top: none; margin-top: 0; }
}

/* ==========================================================================
   FREE-TIER BANNER / TOOL- & PAGE-HEADERS
   ========================================================================== */

.free-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--green-soft); border: 1px solid rgba(45, 212, 167, 0.3);
  color: var(--green); font-family: var(--font-body);
  font-weight: 600; font-size: 0.75rem;
  letter-spacing: 0.01em; padding: 5px 12px; border-radius: 100px;
}

/* ==========================================================================
   TOOLS / RECHNER
   ========================================================================== */

.tool-cat-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }

.tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 1020px) { .tools-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .tools-grid { grid-template-columns: 1fr; } }

.tool-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; cursor: pointer; transition: border-color 0.2s, transform 0.2s; text-align: left;
  display: flex; flex-direction: column; gap: 8px; width: 100%; color: var(--text);
}
.tool-card:hover { border-color: var(--accent-line); transform: translateY(-3px); }
.tool-card .tool-ico {
  width: 42px; height: 42px; border-radius: 11px; background: var(--accent-soft);
  border: 1px solid var(--accent-line); display: grid; place-items: center; font-size: 1.15rem; margin-bottom: 6px;
}
.tool-card h3 { font-size: 1.05rem; }
.tool-card p { font-size: 0.85rem; color: var(--muted); }
.tool-card .tool-cat-tag {
  font-family: var(--font-body);
  font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: var(--muted-2); margin-top: auto; padding-top: 8px;
}

.calc-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 860px) { .calc-layout { grid-template-columns: 1fr; } }

.calc-inputs { display: grid; gap: 4px; }
.unit-toggle { display: inline-flex; background: var(--bg-2); border: 1px solid var(--line); border-radius: 9px; padding: 3px; margin-bottom: 18px; }
.unit-toggle button {
  background: none; border: none; color: var(--muted); padding: 7px 16px; border-radius: 7px;
  font-size: 0.82rem; font-weight: 600; font-family: var(--font-mono); transition: all 0.15s;
}
/* Weiß auf var(--accent) erreicht nur 3,94:1. Der Akzent bleibt, wie er
   ist — nur die Flächen mit weißem Text darauf gehen eine Stufe tiefer
   (#C0483C = 5,92:1). */
.unit-toggle button.active { background: #C0483C; color: #fff; }

.seg-toggle { display: flex; gap: 8px; flex-wrap: wrap; }
.seg-toggle button {
  flex: 1; min-width: 70px; background: var(--bg-2); border: 1px solid var(--line); color: var(--text);
  padding: 11px 8px; border-radius: 9px; font-size: 0.85rem; font-weight: 500; transition: all 0.15s;
}
.seg-toggle button.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }

.calc-result-card {
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 28px; position: sticky; top: calc(var(--header-h) + 20px);
}
.calc-big-num { font-family: var(--font-display); font-size: 3.4rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.calc-big-num small { font-size: 1.1rem; color: var(--muted-2); font-weight: 500; }
.calc-result-label { font-family: var(--font-body);
  font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: var(--accent-2); margin-bottom: 10px; }
.calc-interpret { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 0.92rem; color: var(--muted); }
.calc-sub-rows { display: grid; gap: 10px; margin-top: 18px; }
.calc-sub-row { display: flex; justify-content: space-between; gap: 14px; font-size: 0.9rem; padding: 9px 0; border-bottom: 1px solid var(--line); }
.calc-sub-row:last-child { border-bottom: none; }
.calc-sub-row .v { font-family: var(--font-mono); color: var(--text); font-weight: 600; }

.calc-gauge { height: 10px; border-radius: 6px; position: relative; margin: 16px 0 8px; background: linear-gradient(90deg, #2dd4a7 0%, #8ed46a 30%, #f5b54a 60%, #f06a6a 100%); }
.calc-gauge .needle { position: absolute; top: -4px; width: 3px; height: 18px; background: var(--text); border-radius: 2px; box-shadow: 0 0 0 2px var(--bg-1); transition: left 0.5s cubic-bezier(0.22,1,0.36,1); }
.calc-gauge-labels { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--muted-2); font-family: var(--font-mono); }

.tool-disclaimer { font-size: 0.8rem; color: var(--muted-2); margin-top: 20px; line-height: 1.6; }

/* ==========================================================================
   TRACKER
   ========================================================================== */

.tracker-tabs { display: flex; gap: 6px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 5px; margin-bottom: 28px; flex-wrap: wrap; }
.tracker-tab {
  flex: 1; min-width: 88px; background: none; border: none; color: var(--muted); padding: 12px 10px;
  border-radius: 10px; font-size: 0.88rem; font-weight: 600; transition: all 0.15s; display: flex; align-items: center; justify-content: center; gap: 7px;
}
.tracker-tab:hover { color: var(--text); }
.tracker-tab.active { background: #C0483C; color: #fff; box-shadow: 0 6px 18px rgba(37, 140, 255,0.32); }

.tracker-panel { animation: qIn 0.3s ease; }

.stat-grid-tracker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
@media (max-width: 760px) { .stat-grid-tracker { grid-template-columns: repeat(2, 1fr); } }
.tstat {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px;
}
.tstat-num { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; line-height: 1; }
.tstat-label { font-size: 0.8rem; color: var(--muted); margin-top: 6px; }

.exercise-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 16px 18px; margin-bottom: 10px; transition: border-color 0.2s;
}
.exercise-row:hover { border-color: var(--line-strong); }
.exercise-row .ex-meta { font-size: 0.82rem; color: var(--muted); margin-top: 3px; }
.ex-muscle-tag {
  font-family: var(--font-body);
  font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em;
  color: var(--accent-2); background: var(--accent-soft); border: 1px solid var(--accent-line);
  padding: 3px 9px; border-radius: 100px;
}

.set-table { width: 100%; border-collapse: collapse; }
.set-table th { font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.01em; color: var(--muted-2); font-weight: 500; padding: 6px 8px; text-align: center; }
.set-table th:first-child, .set-table td:first-child { text-align: center; width: 44px; }
.set-table td { padding: 6px 8px; }
.set-table input { text-align: center; padding: 10px 6px; font-family: var(--font-mono); }
.set-table .prev-cell { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted-2); text-align: center; white-space: nowrap; }
.set-done-btn { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--muted); font-size: 1rem; }
.set-done-btn.done { background: var(--green); border-color: var(--green); color: #fff; }
.set-row-pr { position: relative; }
.pr-badge { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; color: var(--amber); letter-spacing: 0.06em; }

.rest-timer-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 150; background: var(--bg-1);
  border-top: 1px solid var(--accent-line); padding: 14px 24px; display: none; align-items: center; gap: 18px;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.3);
}
.rest-timer-bar.active { display: flex; }
.rest-time-display { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 700; color: var(--accent-2); min-width: 76px; }
.rest-progress { flex: 1; height: 6px; background: var(--bg-2); border-radius: 4px; overflow: hidden; }
.rest-progress-fill { height: 100%; background: var(--grad); transition: width 1s linear; }

.history-item {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 14px;
}
.history-item .hi-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.history-item .hi-date { font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent-2); }
.history-ex-line { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 0.88rem; }
.history-ex-line:last-child { border-bottom: none; }
.history-ex-line .sets { font-family: var(--font-mono); color: var(--muted); font-size: 0.82rem; }

.mini-chart { width: 100%; height: 160px; }
.mini-chart .ln { fill: none; stroke: url(#trkGrad); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.mini-chart .dot { fill: var(--accent-2); }
.mini-chart .axis { stroke: var(--line); stroke-width: 1; }
.mini-chart .glabel { fill: var(--muted-2); font-size: 10px; font-family: var(--font-mono); }

.empty-state { text-align: center; padding: 50px 20px; color: var(--muted); }
.empty-state .big { font-size: 2.6rem; margin-bottom: 14px; }

.template-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; transition: border-color 0.2s;
}
.template-card:hover { border-color: var(--accent-line); }
.template-card h4 { font-size: 1.02rem; margin-bottom: 6px; }
.template-ex { font-size: 0.84rem; color: var(--muted); padding: 4px 0; }

.ex-picker-search { margin-bottom: 16px; }
.ex-picker-list { max-height: 50vh; overflow-y: auto; display: grid; gap: 8px; }
.ex-pick {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.15s; color: var(--text); text-align: left; width: 100%;
}
.ex-pick:hover { border-color: var(--accent-line); background: var(--card-2); }

.modal-overlay {
  position: fixed; inset: 0; background: var(--card); backdrop-filter: blur(4px); z-index: 200;
  display: grid; place-items: center; padding: 24px; opacity: 0; pointer-events: none;
  /* visibility statt nur opacity: sonst bleiben die Bedienelemente des
     geschlossenen Dialogs fokussierbar. Mitanimiert, damit die Blende
     weiterhin sanft ausläuft statt hart zu verschwinden. */
  visibility: hidden; transition: opacity 0.25s, visibility 0s linear 0.25s;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity 0.25s, visibility 0s; }
.modal-box {
  background: var(--bg-1); border: 1px solid var(--line-strong); border-radius: 18px; padding: 28px;
  max-width: 540px; width: 100%; max-height: 88vh; overflow-y: auto;
}
.modal-box .modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }

/* ==========================================================================
   EBOOKS
   ========================================================================== */

.ebook-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1020px) { .ebook-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .ebook-grid { grid-template-columns: 1fr; } }

.ebook-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column; transition: border-color 0.25s, transform 0.25s;
}
.ebook-card:hover { border-color: var(--accent-line); transform: translateY(-3px); }
.ebook-cover {
  aspect-ratio: 1 / 1.3; position: relative; display: flex; flex-direction: column; justify-content: space-between;
  padding: 26px; border-bottom: 1px solid var(--line); overflow: hidden;
}
.ebook-cover .cov-kicker { font-family: var(--font-body);
  font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: var(--accent-2); position: relative; }
.ebook-cover .cov-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.1; position: relative; }
.ebook-cover .cov-brand { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); position: relative; }
/* Echtes Titelbild als Cover (klickbar) */
.ebook-cover.ebook-cover-img { padding: 0; display: block; background: #0a1020; cursor: pointer; text-decoration: none; }
.ebook-cover.ebook-cover-img img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; transition: transform .4s ease; }
.ebook-card:hover .ebook-cover.ebook-cover-img img { transform: scale(1.04); }
.ebook-cover.ebook-cover-feat { aspect-ratio: auto; height: 100%; min-height: 280px; }
.ebook-cover .cov-badge-float { position: absolute; top: 12px; left: 12px; z-index: 2; font-family: var(--font-body);
  font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: #fff; background: rgba(8,12,24,0.74); padding: 5px 10px; border-radius: 999px; border: 1px solid var(--accent-line); }
.ebook-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.ebook-body p { font-size: 0.86rem; color: var(--muted); flex: 1; margin-bottom: 16px; }
.ebook-meta { display: flex; gap: 14px; font-size: 0.76rem; color: var(--muted-2); font-family: var(--font-mono); margin-bottom: 16px; }

@media (max-width: 680px) {
  .masterguide-row { grid-template-columns: 1fr !important; }
  .masterguide-row .ebook-cover { border-right: none !important; border-bottom: 1px solid var(--line) !important; min-height: 200px !important; }
}

/* ==========================================================================
   EBOOK-READER (Paper-Dokument)
   ========================================================================== */

.doc-wrap { padding: calc(var(--header-h) + 36px) 0 60px; }
.doc-toolbar { max-width: 800px; margin: 0 auto 20px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.doc-paper {
  background: #fff; color: #1a1d24; max-width: 800px; margin: 0 auto;
  border-radius: 14px; padding: clamp(30px, 5vw, 60px); box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.doc-paper h1, .doc-paper h2, .doc-paper h3, .doc-paper h4 { color: #0d0f13; }
.doc-cover { border-bottom: 3px solid #16181d; padding-bottom: 26px; margin-bottom: 32px; }
/* Auf weissem Papier erreicht #FF8F7A nur 3,94:1 — dieselbe Blaufamilie
   eine Stufe tiefer besteht AA. Auf dunklem Grund bleibt der Akzent. */
.doc-cover .kick { font-family: var(--font-body);
  font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: #C0483C; }
.doc-cover h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); margin: 12px 0 10px; letter-spacing: -0.02em; }
.doc-cover .sub { color: #5b6472; font-size: 1.05rem; }
.doc-cover .brand { font-family: var(--font-mono); font-size: 0.72rem; color: #646c7c; margin-top: 16px; }
.doc-paper h2 { font-size: 1.35rem; margin: 38px 0 12px; padding-top: 8px; }
.doc-paper h3 { font-size: 1.08rem; margin: 24px 0 8px; }
.doc-paper p, .doc-paper li { color: #3a4150; font-size: 0.97rem; line-height: 1.75; margin-bottom: 12px; }
.doc-paper ul, .doc-paper ol { padding-left: 22px; margin-bottom: 14px; }
.doc-paper ul li { list-style: disc; margin-bottom: 6px; }
.doc-paper ol li { list-style: decimal; margin-bottom: 6px; }
.doc-paper strong { color: #16181d; }
.doc-toc { background: #f4f6f9; border: 1px solid #e3e6eb; border-radius: 12px; padding: 22px 26px; margin-bottom: 32px; }
.doc-toc h4 { font-family: var(--font-body);
  font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: #FF8F7A; margin-bottom: 12px; }
.doc-toc ol { padding-left: 20px; margin: 0; }
.doc-toc li { margin-bottom: 5px; font-size: 0.92rem; }
.doc-toc a { color: #52332E; text-decoration: none; }
.doc-toc a:hover { color: #FF8F7A; text-decoration: underline; }
.doc-level { display: inline-block; font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.01em; padding: 3px 9px; border-radius: 6px; vertical-align: 2px; margin-left: 8px; white-space: nowrap; }
.doc-level.lv1 { background: #e7f6ec; color: #1e7a3c; }
.doc-level.lv2 { background: #e8f0fe; color: #C0483C; }
.doc-level.lv3 { background: #f3ecfd; color: #8A4470; }
.doc-level.lv4 { background: #fdecec; color: #c0392b; }
.doc-callout { background: #eef4ff; border-left: 4px solid #FF8F7A; border-radius: 10px; padding: 16px 20px; margin: 18px 0; font-size: 0.92rem; }
.doc-callout strong { color: #6B2E1D; }
.doc-callout.warn { background: #fff8ec; border-left-color: #e0a020; }
.doc-callout.warn strong { color: #7a6420; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin: 16px 0; }
.doc-table th, .doc-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #e9edf2; color: #3a4150; }
.doc-table th { font-family: var(--font-body);
  font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: #646c7c; }
.doc-table td:first-child { font-weight: 600; color: #16181d; }
.doc-footer { margin-top: 44px; padding-top: 20px; border-top: 1.5px solid #e3e6eb; font-family: var(--font-mono); font-size: 0.72rem; color: #646c7c;   /* #9aa3b2 erreichte auf weiss nur 2,54:1 */ display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.doc-disclaimer { font-size: 0.78rem; color: #8893a7; margin-top: 14px; line-height: 1.6; }

/* Action-Box am Modulende — macht aus jedem Modul eine Entscheidung */
.doc-actionbox { border: 1.5px solid #d6e4fb; border-radius: 14px; padding: 4px 20px 8px; margin: 26px 0 30px; background: #fafcff; }
.doc-actionbox h4 { font-family: var(--font-body);
  font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: #FF8F7A; margin: 16px 0 6px; }
.doc-actionbox ul { margin: 0 0 6px; padding-left: 20px; }
.doc-actionbox li { font-size: 0.9rem; color: #3a4150; margin-bottom: 4px; }
.doc-actionbox .ab-stop h4 { color: #c0392b; }
.doc-actionbox .ab-esc h4 { color: #b06a00; }
.doc-actionbox .ab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 26px; }
@media (max-width: 640px) { .doc-actionbox .ab-grid { grid-template-columns: 1fr; } }

/* 10-Minuten Quick-Start */
.doc-quickstart { border: 2px solid #FF8F7A; border-radius: 16px; padding: 8px 22px 18px; margin: 24px 0 34px; background: linear-gradient(180deg,#f2f7ff,#ffffff); }
.doc-quickstart .qs-kick { display: inline-block; font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.01em; color: #FF8F7A; font-weight: 700; margin-top: 14px; }
.doc-quickstart ol { counter-reset: qs; list-style: none; padding: 0; margin: 12px 0 8px; }
.doc-quickstart ol li { counter-increment: qs; position: relative; padding: 8px 0 8px 44px; border-bottom: 1px solid #e6eefb; font-size: 0.95rem; color: #16181d; }
.doc-quickstart ol li::before { content: counter(qs); position: absolute; left: 0; top: 7px; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg,#FF8F7A,#FA8072); color: #fff; font-weight: 700; font-size: 0.85rem; display: grid; place-items: center; }
.doc-quickstart ol li:last-child { border-bottom: none; }

/* Ebook-Bilder */
.doc-figure { margin: 26px 0; }
.doc-figure img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 6px 24px var(--surface); }
.doc-figure figcaption { margin-top: 10px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.03em; color: #646c7c; text-align: center; }
.doc-figure.hero { margin: 4px 0 34px; }
.doc-figure.hero img { border-radius: 16px; aspect-ratio: 16 / 9; object-fit: cover; }
/* Story-Format-Grafiken (hochkant) sinnvoll begrenzt, zentriert */
.doc-figure.portrait { max-width: 380px; margin: 28px auto; }
.doc-figure.portrait img { border-radius: 16px; }

/* Founder-Zeile auf der Startseite (Bild + Story) */
.founder-row { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 36px; align-items: center; max-width: 960px; margin: 0 auto; }
.founder-row img { width: 100%; border-radius: 16px; box-shadow: 0 8px 30px var(--bg-1); }
@media (max-width: 820px) {
  .founder-row { grid-template-columns: 1fr; gap: 22px; text-align: center; }
  .founder-row img { max-width: 300px; margin: 0 auto; }
  .founder-row .btn { display: inline-flex; }
}

/* ==========================================================================
   Ebook-Landingpages (lp/*.html) — fokussierter Lead-Magnet pro Ebook
   ========================================================================== */
.lp-topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; max-width: 1100px; margin: 0 auto; }
.lp-logo { font-family: var(--font-head, "Poppins", sans-serif); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.04em; color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 9px; }
.lp-logo strong { color: var(--accent); font-weight: 700; }
.lp-logo-mark { width: 20px; height: 20px; border-radius: 6px; background: linear-gradient(135deg, #FF8F7A, #FA8072); display: inline-block; }
.lp-topbar-link { color: var(--muted); text-decoration: none; font-size: 0.9rem; }
.lp-topbar-link:hover { color: var(--text); }

.lp-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.lp-hero-media { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.28; }
.lp-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--scrim-rgb), 0.35), rgba(var(--scrim-rgb), 0.9)); }
.lp-hero-inner { position: relative; max-width: 760px; margin: 0 auto; padding: 60px 22px 66px; text-align: center; }
.lp-kicker { display: inline-block; font-family: var(--font-body);
  font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: var(--accent); margin-bottom: 14px; }
.lp-hero-inner h1 { font-size: clamp(1.9rem, 5vw, 2.9rem); line-height: 1.1; margin: 0 0 16px; }
.lp-sub { font-size: 1.05rem; color: var(--muted); max-width: 620px; margin: 0 auto 22px; line-height: 1.6; }
.lp-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: center; align-items: center; margin-bottom: 26px; }
.lp-meta-item { font-size: 0.86rem; color: var(--muted); }
.lp-pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.02em; }
.lp-pill-free { background: rgba(37, 140, 255,0.16); color: var(--accent); }

.lp-body { padding: 44px 22px 20px; }
.lp-grid { display: grid; grid-template-columns: 1fr 400px; gap: 46px; align-items: start; }
.lp-h2 { font-size: 1.3rem; margin: 0 0 16px; }
.lp-content .lp-h2:not(:first-child) { margin-top: 34px; }
.lp-toc { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lp-toc li { display: flex; align-items: baseline; gap: 11px; font-size: 0.98rem; color: var(--text); line-height: 1.45; }
.lp-toc-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, #FF8F7A, #FA8072); transform: translateY(-1px); }
.lp-preview { position: relative; max-height: 260px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; padding: 22px 22px 0; background: var(--card); }
.lp-preview p { margin: 0 0 14px; line-height: 1.65; color: var(--text); }
.lp-preview-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(180deg, transparent, var(--card)); }
.lp-preview-note { margin-top: 12px; font-size: 0.9rem; }

.lp-aside { position: sticky; top: 20px; }
.lp-form-card { background: var(--card); border: 1px solid var(--accent-line, var(--line)); border-radius: 18px; padding: 26px 24px; box-shadow: 0 12px 40px var(--surface); }
.lp-form-title { font-size: 1.3rem; margin: 0 0 8px; }
.lp-success-card { text-align: center; }
.lp-check { width: 54px; height: 54px; border-radius: 50%; background: rgba(37, 140, 255,0.16); color: var(--accent); font-size: 1.6rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
.lp-disclaimer { max-width: 900px; margin: 30px auto 0; font-size: 0.78rem; color: var(--muted-2, var(--muted)); text-align: center; line-height: 1.6; }

.lp-footer { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; align-items: center; padding: 30px 22px 40px; margin-top: 30px; border-top: 1px solid var(--line); }
.lp-footer a { color: var(--muted); text-decoration: none; font-size: 0.88rem; }
.lp-footer a:hover { color: var(--text); }
.lp-footer-brand { color: var(--muted-2, var(--muted)); font-size: 0.82rem; }

@media (max-width: 820px) {
  .lp-grid { grid-template-columns: 1fr; gap: 32px; }
  .lp-aside { position: static; }
  .lp-hero-inner { padding: 44px 20px 48px; }
}

/* Ebook-Diagramme (Inline-SVG, erklären Konzepte statt Stimmung zu setzen) */
.doc-diagram { margin: 26px 0; background: #f7f9fc; border: 1px solid #e6eaf1; border-radius: 14px; text-align: center; padding: 22px 20px 16px; }
.doc-diagram svg { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; }
.doc-diagram figcaption { margin-top: 12px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.03em; color: #646c7c; text-align: center; }

@media print {
  body { background: #fff; color: #111; }
  .site-header, .site-footer, .no-print, .cart-drawer, .cart-overlay, .toast, .rest-timer-bar { display: none !important; }
  .print-area { display: block !important; }
  .doc-wrap { padding: 0; }
  .doc-paper { box-shadow: none; border-radius: 0; padding: 0; max-width: none; }
  .doc-paper h2 { page-break-after: avoid; }
  .doc-figure { break-inside: avoid; page-break-inside: avoid; }
  .doc-figure img { box-shadow: none; }
}

/* ==========================================================================
   12-Wochen-Programm (kurs-programm.html)
   Der Rest dieses Blocks (rund 12 KB: .course-week*, .course-mode*,
   .course-module*, .course-recheck*, .course-res*, .module-callout*,
   .coaching-tease*) wurde entfernt — er stammt aus einer früheren Fassung
   der Programmseite. Gerendert wird heute über c2-* aus css/course2.css.
   Erhalten bleibt nur, was kurs-programm.html im Markup wirklich führt.
   ========================================================================== */
.course-hero { margin-bottom: 32px; }
.course-progress { margin: 24px 0 18px; }
.course-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

@media print {
  /* #courseGate ist live (kurs-programm.html, js/course.js): im Ausdruck
     hat die Code-Abfrage nichts zu suchen. */
  .course-toolbar, #courseGate { display: none !important; }
}

.course-module-ebook { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; color: var(--accent-2); text-decoration: none; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--accent-line); background: var(--accent-soft); transition: border-color .15s, transform .15s; }
.course-module-ebook:hover { transform: translateY(-1px); border-color: var(--accent-2); }

/* ==========================================================================
   MOBILE-FEINSCHLIFF (iPhone & schmale Screens)
   --------------------------------------------------------------------------
   Bewusst ans ENDE der Datei gestellt, damit diese Regeln per Quell-Reihenfolge
   gegen die Basis-Komponenten gewinnen (Media-Queries erhöhen die Spezifität
   nicht). Ziel: nichts läuft über den rechten Rand -> kein iOS Shrink-to-fit,
   die Seite wird also nicht zoomend wie eine Desktop-Seite dargestellt.
   ========================================================================== */
@media (max-width: 600px) {
  /* Seitenrand mobil: 16 px je Seite (~2,6 mm). Weniger fühlt sich an,
     als wäre die Seite abgeschnitten — genau die Rückmeldung, die dazu
     geführt hat. */
  .container, .container-narrow, .container-tight,
  .wizard-wrap, .result-wrap { width: calc(100% - 32px); }

  /* Header kompakt (Founder-Review): 72 → 54px Höhe. Über die Variable, damit
     alles mitzieht, was daran hängt — das mobile Menü (position: fixed,
     top: var(--header-h)) und der Hero-Abstand. Die Tippflächen bleiben bei
     40 px und damit über der 36-px-Grenze für sichere Ziele. */
  :root { --header-h: 54px; }
  .header-inner { gap: 12px; }
  .logo { font-size: 1.1rem; }
  /* Legacy .logo-mark Mobile-Regel entfernt (P15 Split-X) */
  .header-actions { gap: 8px; }
  .icon-btn { height: 38px; min-width: 38px; padding: 0 8px; }
  .icon-btn svg { width: 16px; height: 16px; }
  .cart-btn, .nav-toggle { width: 38px; height: 38px; flex-shrink: 0; }

  /* Grid-/Flex-Kinder dürfen unter ihre Inhaltsbreite schrumpfen
     (Standard min-width:auto verhindert das und erzeugt Überlauf). */
  .price-card, .pillar, .product-card, .tool-card,
  .ebook-card, .pricing-grid > *, .grid-2 > *, .footer-grid > * { min-width: 0; }

  /* Lange Wörter/URLs nicht über den Bildschirmrand schieben */
  p, li, h1, h2, h3, h4, .lead, .price-name,
  .doc-table td, .doc-table th,
  .data-table td, .data-table th { overflow-wrap: break-word; }

  /* Lange Button-Beschriftungen dürfen umbrechen statt das Layout zu sprengen */
  .btn { white-space: normal; }
  .hero-ctas { width: 100%; }
  .hero-ctas .btn { width: 100%; }
  .btn-lg { padding: 15px 20px; }

  /* Karten etwas kompakter */
  .price-card { padding: 28px 22px; }

  /* Tabellen an die Bildschirmbreite anpassen statt überlaufen zu lassen */
  .doc-table, .data-table { table-layout: fixed; width: 100%; }
  .doc-table th, .doc-table td { padding: 8px; font-size: 0.82rem; }
  .data-table th, .data-table td { padding: 10px 9px; font-size: 0.82rem; }
}

@media (max-width: 380px) {
  /* Sehr schmale iPhones (SE 1./2. Gen): zusätzlich Platz sparen */
  .header-actions { gap: 6px; }
  .logo { font-size: 1.05rem; }
  .icon-btn { padding: 0 8px; }
  /* Auch auf dem schmalsten Gerät bleibt der Rand erhalten. Vorher wurde
     er hier auf 12 px verkleinert — ausgerechnet dort, wo der Bildschirm
     ohnehin am dichtesten am Gehäuserand endet. */
  .container, .container-narrow, .container-tight,
  .wizard-wrap, .result-wrap { width: calc(100% - 28px); }
}

/* Der schmalste Fall: 320px (iPhone SE 1. Gen). Dort trägt der Kopf vier
   Elemente — Sprache, Hell/Dunkel, Warenkorb, Menü — und die vier standen
   zusammen 21px über dem rechten Rand, seit die Sprachwahl aus dem Menü
   zurück in die Leiste gewandert ist.

   Die 21px kommen vom Schriftzug, nicht von den Knöpfen: die sind mit 38px
   ohnehin schon unter Apples 44px-Tippfläche, und noch schmaler wären sie
   schwerer zu treffen — auf genau dem Gerät, das die kleinste Auflagefläche
   hat. Der Schriftzug verliert stattdessen etwas Schriftgrad; er ist an
   dieser Stelle Wiedererkennung, keine Handlung.

   MUSS NACH dem 380px-Block stehen: gleiche Spezifität, und der setzt den
   Abstand auf 6px — davor stehend würde diese Regel nie greifen. */
/* Ab hier fällt das Kürzel weg und der Knopf wird zum reinen Globus — wie
   sein Nachbar Hell/Dunkel, der ebenfalls nur sein Zeichen zeigt.

   Die Grenze ist nachgemessen, nicht gerundet: bei 360px stehen noch 14,9px
   Luft, bei 356px läuft die Leiste 1,1px über. Die Regel stand vorher bei
   380px und hätte das Kürzel auf dem SE 2/3 (375px) und den 360er-Androids
   verschluckt, wo 30 bzw. 15px frei sind. Dort stört sie nicht auf, weil der
   Knopf mobil ohnehin versteckt war — die Regel wurde nie sichtbar. */
@media (max-width: 359px) {
  .lang-btn .lang-code { display: none; }
}

@media (max-width: 350px) {
  .logo { font-size: 0.92rem; }
  .header-actions { gap: 4px; }
}

/* ==========================================================================
   MealMetrix — Kalorien-Tracker (dinner.html)
   ========================================================================== */
.mm-daybar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.mm-daybar .mm-daynav { display:flex; align-items:center; gap:14px; }
.mm-daybar button.mm-arrow { background:var(--card-2); border:1px solid var(--line); color:var(--text); width:38px; height:38px; border-radius:10px; font-size:1.1rem; cursor:pointer; }
.mm-daybar .mm-datelabel { font-family:var(--font-display); font-weight:700; font-size:1.1rem; min-width:120px; text-align:center; }

.mm-dash { display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center; padding:22px; margin-bottom:20px; }
.mm-dash .mm-ring { display:flex; justify-content:center; }
@media (max-width:520px){ .mm-dash{ grid-template-columns:1fr; text-align:center; gap:8px; } }

.mm-meal { padding:16px 18px; margin-bottom:14px; }
.mm-meal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:0.98rem; }
.mm-empty { color:var(--muted-2); font-size:0.88rem; padding:4px 0 10px; }
.mm-add { width:100%; margin-top:8px; }
.mm-entry { display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--line); }
.mm-entry:first-of-type { border-top:none; }
.mm-entry-main { flex:1; min-width:0; }
.mm-entry-name { display:block; color:var(--text); font-weight:500; font-size:0.92rem; }
.mm-entry-sub { display:block; color:var(--muted-2); font-size:0.74rem; }
.mm-entry-kcal { color:var(--muted); font-size:0.9rem; white-space:nowrap; }
.mm-entry-del { background:none; border:none; color:var(--muted-2); font-size:1.2rem; cursor:pointer; line-height:1; padding:0 2px; }

.linklike { background:none; border:none; color:var(--accent); text-decoration:underline; cursor:pointer; font:inherit; padding:0; }

/* Modal */
.mm-modal { position:fixed; inset:0; background:rgba(0,0,0,0.6); display:none; z-index:1000; align-items:flex-end; justify-content:center; }
.mm-modal.open { display:flex; }
.mm-modal-box { background:var(--bg); border:1px solid var(--line); border-radius:18px 18px 0 0; width:100%; max-width:560px; max-height:90vh; overflow-y:auto; padding:18px; }
@media (min-width:560px){ .mm-modal{ align-items:center; } .mm-modal-box{ border-radius:18px; } }
.mm-modal-head { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.mm-modal-head strong { flex:1; font-size:1.02rem; }
.mm-modal-close, .mm-modal-back { background:var(--card-2); border:1px solid var(--line); color:var(--text); width:34px; height:34px; border-radius:9px; font-size:1rem; cursor:pointer; }
#mmSearch, .mm-portion input, .mm-portion select { width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--card-2); color:var(--text); font-size:1rem; }
.mm-results { margin-top:12px; display:flex; flex-direction:column; gap:6px; }
.mm-res-label { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted-2); margin:6px 2px; }
.mm-res { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; text-align:left; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:11px 14px; cursor:pointer; color:var(--text); }
.mm-res:hover { border-color:var(--accent-line); }
.mm-res-name { display:block; font-weight:500; font-size:0.92rem; }
.mm-res-cat { display:block; color:var(--muted-2); font-size:0.74rem; }
.mm-res-kcal { color:var(--accent); font-weight:700; text-align:right; white-space:nowrap; }
.mm-res-kcal span { display:block; font-size:0.62rem; color:var(--muted-2); font-weight:400; }
.mm-modal-foot { display:flex; gap:8px; margin-top:14px; }
.mm-modal-foot .btn { flex:1; }

.mm-portion label { display:block; font-size:0.78rem; color:var(--muted); margin:12px 0 5px; }
.mm-portion-row { display:flex; gap:8px; align-items:center; }
.mm-portion-row input { text-align:center; }
.mm-portion-row .btn { width:44px; height:44px; font-size:1.2rem; flex:none; }
.mm-quick-g { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.mm-preview { background:var(--card-2); border:1px solid var(--line); border-radius:12px; padding:14px; margin-top:14px; text-align:center; }
.mm-preview-k { font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:var(--accent); }
.mm-preview-m { color:var(--muted); font-size:0.85rem; margin-top:2px; }
.mm-portion-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:16px; }
.mm-manual-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.mm-sugg-row { display:flex; justify-content:space-between; align-items:center; gap:12px; background:var(--card-2); border:1px solid var(--line); border-radius:10px; padding:11px 14px; }

/* ==========================================================================
   Fitness-Tracker — neue Komponenten (Übungs-Detail, Insights, Scheiben, RPE)
   ========================================================================== */
/* Übungs-Titel als Link im aktiven Workout */
.ex-title-link { background:none; border:none; padding:0; font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--text); cursor:pointer; text-align:left; }
.ex-title-link:hover { color:var(--accent); }

/* Satz-Nummer / Aufwärm-Toggle */
.set-num { width:26px; height:26px; border-radius:7px; border:1px solid var(--line); background:var(--card-2); color:var(--muted); font-size:0.8rem; font-weight:600; cursor:pointer; }
.set-num.is-warmup { background:rgba(245,181,74,0.18); color:var(--amber); border-color:rgba(245,181,74,0.4); }
.warmup-row .set-w, .warmup-row .set-r { opacity:0.7; }
.set-rpe { width:52px; }
.cue-up { color:var(--green); font-size:0.72rem; }
.cue-down { color:var(--red); font-size:0.72rem; }

/* Muskel-Filter-Chips im Übungspicker */
.mfilter-row { display:flex; gap:6px; flex-wrap:wrap; margin:12px 0; }
.mfilter { background:var(--card-2); border:1px solid var(--line); color:var(--muted); border-radius:20px; padding:5px 12px; font-size:0.8rem; cursor:pointer; }
.mfilter.active { background:var(--accent); border-color:var(--accent); color: #fff; }

/* Scheiben-Rechner */
.plate-btn { }
.plate-visual { display:flex; align-items:center; justify-content:center; gap:3px; flex-wrap:wrap; padding:16px; background:var(--card-2); border-radius:12px; margin-top:8px; }
.plate-bar-end { width:10px; height:14px; background:var(--muted-2); border-radius:2px; }
.plate-bar-mid { flex:1; min-width:20px; max-width:60px; height:6px; background:var(--muted-2); border-radius:3px; }
.plate-chip { min-width:34px; height:48px; display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#FF8F7A,#FA8072); color: #fff; font-weight:700; font-size:0.82rem; border-radius:6px; padding:0 6px; }

/* Übungs-Fortschritt (Bibliothek/Detail) */
.ex-progress-row { display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; text-align:left; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 14px; cursor:pointer; }
.ex-progress-row:hover { border-color:var(--accent-line); }
.mini-stat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.mini-stat { background:var(--card-2); border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
.mini-stat span { display:block; font-size:0.72rem; color:var(--muted); }
.mini-stat strong { font-family:var(--font-display); font-size:1.15rem; color:var(--text); }

/* Insights: Wochen-Volumen-Balken */
.ins-bars { display:flex; align-items:flex-end; gap:8px; height:130px; }
.ins-bar-col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:6px; }
.ins-bar { width:100%; max-width:32px; background:linear-gradient(180deg,#FA8072,#FF8F7A); border-radius:5px 5px 0 0; min-height:2px; }
.ins-bar-lbl { font-size:0.66rem; color:var(--muted-2); font-family:var(--font-mono); }
/* Sätze pro Muskel */
.msl-row { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.msl-label { flex:0 0 90px; font-size:0.85rem; color:var(--muted); }
.msl-track { flex:1; height:9px; background:var(--line); border-radius:5px; overflow:hidden; }
.msl-fill { height:100%; background:linear-gradient(90deg,#FF8F7A,#FA8072); border-radius:5px; }
.msl-val { flex:0 0 24px; text-align:right; font-size:0.85rem; color:var(--text); }

/* --- Wochenplan-Kalender & Heute-Karte (Gym-Tracker) --- */
.today-card { margin-bottom:16px; border-left:3px solid var(--accent); }
.today-card.gym { border-left-color:var(--amber); background:linear-gradient(135deg,var(--accent-soft),transparent); }
.today-card.done-card { border-left-color:var(--green); }
.today-kick { font-family:var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color:var(--accent); }
.today-card.gym .today-kick { color:var(--amber); }

.wk-cal-card { margin-bottom:20px; padding:16px 18px; }
.wk-cal-head { display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.wk-cal-head strong { flex:1; font-size:0.95rem; }
.wk-cal { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.wk-day { display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 2px; border-radius:10px; border:1px solid var(--line); background:var(--card-2); min-width:0; }
.wk-name { font-size: 0.75rem; color:var(--muted-2); font-family:var(--font-body); }
.wk-icon { font-size:0.95rem; line-height:1.2; }
.wk-sub { font-size:0.56rem; color:var(--muted-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.wk-day.done { border-color:rgba(45,212,167,0.45); background:rgba(45,212,167,0.08); }
.wk-day.done .wk-sub { color:var(--green); }
.wk-day.missed { opacity:0.45; }
.wk-day.today { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }

.plan-row { display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); }
.plan-row:last-of-type { border-bottom:none; }
.plan-day { flex:0 0 130px; display:flex; align-items:center; gap:8px; font-size:0.9rem; color:var(--text); cursor:pointer; }
.plan-row select { flex:1; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--card-2); color:var(--text); font-size:0.88rem; min-width:0; }
.plan-row select:disabled { opacity:0.35; }
@media (max-width:480px){ .plan-day{ flex-basis:104px; font-size:0.82rem; } }

/* --- "Heute dran"-Hinweis (site-weit, für Tracker-Nutzer mit Plan) --- */
.today-hint {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 900; max-width: calc(100% - 32px); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(135deg, #FF8F7A, #FA8072); color: #fff;
  padding: 11px 20px; border-radius: 999px; font-size: 0.88rem;
  text-decoration: none; box-shadow: 0 10px 30px rgba(37, 140, 255,0.45);
}
.today-hint strong { color: var(--text); }
@media print { .today-hint { display: none; } }


/* ==========================================================================
   AMBIENT — entfernt.

   Hier lagen bis August 2026 vier fixierte Ebenen hinter dem Inhalt: blaue
   Radial-Glows, ein technisches 64px-Raster und eine Rauschtextur. Das war die
   Bildsprache des dunklen Standes und trug ihn auch — auf #070A0F sieht man
   Glow und Grain, auf #FBFBFD sieht man Schmutz.

   Apple legt hinter den Inhalt gar nichts. Die Tiefe entsteht dort aus der
   Abfolge der Bänder (--bg-0 / --bg-1 / .section-dark) und aus dem Schatten
   der Kacheln, nicht aus einer Atmosphäre. Wer die Ebenen zurückholen will,
   holt den dunklen Stand zurück.

   Ersatzlos gestrichen wurde außerdem die Regel
       .section-alt { background: rgba(11, 14, 20, 0.55); }
   die hier unten die Token-Regel weiter oben schlug und jedes zweite Band
   dunkel überstrich — genau das, was auf hellem Grund nicht passieren darf.
   ========================================================================== */

/* Inhalt liegt weiterhin auf einer eigenen Ebene — Kachelschatten und
   sticky-Kopfzeilen brauchen den Stapelkontext. */
body > * { position: relative; z-index: 0; }

/* ==========================================================================
   VISUAL SYSTEM 2.0 — FEMALEMETRIX PERFORMANCE OS
   40% Automotive HMI · 25% Medical Lab · 20% Editorial Science · 15% Cinematic
   Zentrale Tokens + Instrument-Komponenten. KEINE Seite erfindet eigene
   Varianten — diese Klassen sind das System.
   ========================================================================== */
:root {
  /* COLOR HAS MEANING — semantische Status-Ebene (nie dekorativ mischen) */
  --status-active: var(--accent);        /* Lachs: aktiv / primär (EIN Lachs) */
  --status-improving: var(--green);      /* Grün: Verbesserung / Erfolg */
  --status-attention: var(--amber);      /* Amber: Aufmerksamkeit */
  --status-flag: var(--red);             /* Rot: hohe Priorität / Medical Flag */
  --status-neutral: var(--muted-2);      /* Grau: neutral */
  /* Flächen statt Card-in-Card: eine ruhige Ebene + Hairlines.
     Auf hellem Grund sind das dunkle Auflagen, nicht mehr weiße. */
  --surface: rgba(0,0,0,0.022);
  --hairline: rgba(0,0,0,0.10);
  --space-1: 6px; --space-2: 10px; --space-3: 16px; --space-4: 24px; --space-5: 40px;
}

/* ---- SECTION HEADER ----
   War die editoriale Mono-Mikrotypografie: „MM / SCORE" in gesperrtem Cyan,
   dahinter eine Haarlinie über die Restbreite. Das ist die Handschrift des
   Instrumenten-Standes. Apple setzt einen Abschnittskopf als Überschrift mit
   Weißraum darüber — die Linie entfällt, die Systemsilbe wird zur stillen
   Beschriftung, und die Überschrift bekommt negative statt positiver
   Laufweite (gesperrte Überschriften gibt es bei Apple nicht). */
.mm-secthead { display: flex; align-items: baseline; gap: 10px; margin: var(--space-5) 0 var(--space-3); }
.mm-secthead .sys { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em; color: var(--muted-2); }
.mm-secthead h2, .mm-secthead .t { font-family: var(--font-display); font-size: 1.3125rem; font-weight: 600; letter-spacing: -0.016em; color: var(--text); margin: 0; }
.mm-secthead::after { content: none; }

/* ---- STRUKTUR STATT KARTEN ---- */
.mm-hr { border: 0; height: 1px; background: var(--hairline); margin: var(--space-4) 0; }
.mm-plane { padding: var(--space-4) 0; border-top: 1px solid var(--hairline); }

/* ---- DATA AS DESIGN — große Werte sind das Layout, keine Mini-Boxen ---- */
.mm-metric { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mm-metric .v { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 6vw, 2.4rem); line-height: 1.05; letter-spacing: -0.01em; color: var(--text); font-variant-numeric: tabular-nums; }
.mm-metric .v small, .mm-metric .v i { font-style: normal; font-size: 0.45em; font-weight: 600; color: var(--muted-2); letter-spacing: 0.04em; }
.mm-metric .k { font-family: var(--font-body);
  font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: var(--muted-2); }
.mm-metric.is-up .v { color: var(--status-improving); }
.mm-metric.is-watch .v { color: var(--status-attention); }
.mm-metric.is-flag .v { color: var(--status-flag); }
.mm-metric-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-4) var(--space-3); padding: var(--space-3) 0; }
.mm-metric-row > .mm-metric { border-left: 1px solid var(--hairline); padding-left: 14px; }
.mm-metric-row > .mm-metric:first-child { border-left: 0; padding-left: 0; }
/* UMBRUCH: Die Trennlinie gehört an den ANFANG JEDER ZEILE weggenommen, nicht
   nur beim ersten Element insgesamt. Sonst startet die zweite Zeile mit einem
   Strich, der ins Leere zeigt, und ihr Text steht 15 px (1 px Linie + 14 px
   Einzug) weiter rechts als die Zeile darüber — sichtbar am dritten
   Hero-Instrument der Transformation-Seite auf dem Telefon.
   `:first-child` allein kann das nicht: Welches Element eine neue Zeile
   beginnt, weiß nur das Raster, nicht der Selektor. Deshalb ist die
   Spaltenzahl unterhalb von 900 px fest gesetzt statt aus auto-fit
   abgeleitet — dann trifft nth-child zuverlässig den Zeilenanfang.
   Darüber passen auch sechs Instrumente (das längste Vorkommen) in eine
   Zeile, dort bleibt auto-fit. */
@media (max-width: 700px) {
  .mm-metric-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mm-metric-row > .mm-metric:nth-child(2n+1) { border-left: 0; padding-left: 0; }
}
@media (min-width: 701px) and (max-width: 900px) {
  .mm-metric-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mm-metric-row > .mm-metric:nth-child(3n+1) { border-left: 0; padding-left: 0; }
}

/* ---- DIAGNOSTIC SYSTEM LANGUAGE — BODY/ENGINE/RECOVERY/METABOLIC/STRENGTH.
   Primary Bottleneck wird EIN Mal klar markiert — keine Gamification. ---- */
.mm-sys { display: flex; flex-direction: column; }
.mm-sys .row { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--hairline); }
.mm-sys .row:first-child { border-top: 0; }
.mm-sys .id { font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: var(--muted-2); }
.mm-sys .bar { height: 3px; background: var(--wash-3); border-radius: 2px; overflow: hidden; }
.mm-sys .bar > span { display: block; height: 100%; background: var(--status-neutral); border-radius: 2px; }
.mm-sys .val { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.mm-sys .row.is-primary .id { color: var(--status-active); }
.mm-sys .row.is-primary .bar > span { background: var(--status-active); }
.mm-sys .row.is-primary .val::after { content: " · ENGPASS"; font-size: 0.58rem; letter-spacing: 0.12em; color: var(--status-active); }
.mm-sys .row.is-flag .id, .mm-sys .row.is-flag .val { color: var(--status-flag); }
.mm-sys .row.is-flag .bar > span { background: var(--status-flag); }
/* Score V2: mehr Domains, längere Namen — eigene Spaltenbreite statt Überlauf. */
.mm-sys.wide .row { grid-template-columns: 104px 1fr auto; }
.mm-sys .id { overflow-wrap: anywhere; }
@media (max-width: 420px) { .mm-sys.wide .row { grid-template-columns: 92px 1fr auto; gap: 9px; } }

/* ---- OPTIMIERUNGSBEREICHE MIT BEREICHSWERT (Paket 4) ----
   Gleiche Sprache wie .mm-sys, nur mit Platz für Namen, Wert und Begründung.
   Kein neues Designsystem: dieselben Tokens, dieselbe Ruhe, keine Farbampel
   und keine Bewertungssymbole. */
.mm-areas { display: flex; flex-direction: column; }
.mm-area { padding: 13px 0; border-top: 1px solid var(--hairline); }
.mm-area:first-child { border-top: 0; padding-top: 0; }
.mm-area .hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mm-area .nm { font-size: 0.95rem; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.mm-area .val { font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mm-area .bar { height: 3px; margin-top: 8px; background: var(--wash-3); border-radius: 2px; overflow: hidden; }
.mm-area .bar > span { display: block; height: 100%; background: var(--status-neutral); border-radius: 2px; }
.mm-area.is-primary .nm { color: var(--status-active); }
.mm-area.is-primary .val { color: var(--status-active); }
.mm-area.is-primary .bar > span { background: var(--status-active); }
.mm-area .marks { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 8px 0 0; }
.mm-area .mk { font-family: var(--font-body);
  font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: var(--muted-2); }
.mm-area .mk-primary { color: var(--status-active); }
.mm-area .why { margin-top: 8px; }
.mm-area .why > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-body);
  font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em;
  color: var(--muted-2); padding: 6px 0; min-height: 32px; }
.mm-area .why > summary::-webkit-details-marker { display: none; }
.mm-area .why > summary::before { content: "+"; color: var(--accent-2); font-size: 0.8rem; line-height: 1; }
.mm-area .why[open] > summary::before { content: "–"; }
.mm-area .why > summary:hover, .mm-area .why > summary:focus-visible { color: var(--muted); }
.mm-area .why ul { margin: 2px 0 0; padding: 0 0 0 14px; list-style: none; }
.mm-area .why li { position: relative; margin: 0 0 5px; font-size: 0.85rem; color: var(--muted-2); max-width: 62ch; line-height: 1.5; }
.mm-area .why li::before { content: ""; position: absolute; left: -14px; top: 0.62em; width: 5px; height: 1px; background: var(--line); }
.mm-area .why li strong { color: var(--muted); font-weight: 500; }
.mm-area .why li.gapline strong { color: var(--status-flag); }
.mm-area .pt { margin: 8px 0 0; font-size: 0.85rem; color: var(--muted-2); }
.mm-area .pt strong { color: var(--text); font-weight: 500; }
@media (max-width: 420px) {
  .mm-area .hd { flex-wrap: wrap; gap: 2px 10px; }
  .mm-area .nm { font-size: 0.9rem; }
}

/* ---- EMPFOHLENES KAPITEL (Paket 6) ----
   Der Score findet den Engpass, DAS PROTOKOLL erklärt ihn. Eine ruhige
   Zeile mit Abschnitt, Herkunft und Begründung — keine zweite Hero-Zahl,
   keine konkurrierende Karte, bestehende Tokens. */
.mm-chap .ch-kicker {
  display: block; font-family: var(--font-body);
  font-weight: 600; font-size: 0.75rem;
  letter-spacing: 0.01em; color: var(--muted-2); margin-bottom: 6px;
}
.mm-chap .ch-sec { margin: 0 0 3px; font-size: 1.02rem; color: var(--text); overflow-wrap: anywhere; }
.mm-chap .ch-src { margin: 0 0 10px; font-size: 0.82rem; color: var(--muted-2); overflow-wrap: anywhere; }
.mm-chap .ch-tag {
  font-family: var(--font-body);
  font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: var(--accent-2); border: 1px solid var(--accent-line);
  border-radius: 3px; padding: 1px 5px; white-space: nowrap;
}
.mm-chap .ch-why { margin: 0 0 4px; font-size: 0.86rem; color: var(--muted); max-width: 62ch; }
.mm-chap .ch-list { margin: 0 0 12px; padding: 0 0 0 14px; list-style: none; }
.mm-chap .ch-list li { position: relative; margin: 0 0 4px; font-size: 0.86rem; color: var(--muted-2); max-width: 62ch; line-height: 1.5; }
.mm-chap .ch-list li::before { content: ""; position: absolute; left: -14px; top: 0.62em; width: 5px; height: 1px; background: var(--line); }
/* Kompakte Empfehlung in der Bereichskarte — deutlich leiser als oben. */
.mm-area .sec { margin: 8px 0 0; font-size: 0.85rem; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.mm-area .sec .k {
  font-family: var(--font-body);
  font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: var(--muted-2);
}
.mm-area .sec a { color: var(--accent-2); text-decoration: none; overflow-wrap: anywhere; }
.mm-area .sec a:hover, .mm-area .sec a:focus-visible { text-decoration: underline; }

/* ---- OPT-IN-SCHALTER · optionale Nutzungsmessung (nach dem Ergebnis) ----
   Bewusst klein und ruhig: eine Zeile, ein Schalter, kein Erklärtext-Block. */
.mm-optin-row { display: flex; align-items: center; gap: 18px; justify-content: space-between; flex-wrap: wrap; }
.mm-switch { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer;
  padding: 8px 4px; min-height: 44px; border-radius: 10px; }
.mm-switch-track { position: relative; width: 46px; height: 26px; border-radius: 999px; flex-shrink: 0;
  background: var(--wash-4); border: 1px solid var(--line); transition: background 0.18s, border-color 0.18s; }
.mm-switch-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--muted); transition: transform 0.18s, background 0.18s; }
.mm-switch.on .mm-switch-track { background: rgba(250, 128, 114,0.22); border-color: var(--accent-2); }
.mm-switch.on .mm-switch-knob { transform: translateX(20px); background: var(--accent-2); }
.mm-switch-label { font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: var(--muted-2); }
.mm-switch.on .mm-switch-label { color: var(--accent-2); }
.mm-switch:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* ---- TOUCH-TARGET-GARANTIE · Ergebnis-per-E-Mail-Formular ----
   Der Absende-Button und seine Felder sind bereits ~48 px hoch (.btn mit
   14px-Padding). Diese Regel friert das Minimum bei 44 px ein, damit eine
   spätere Padding-/Schriftgrößen-Änderung den Touch-Standard nicht
   unbemerkt unterschreitet. Optik bleibt unverändert — es ist ein Boden,
   kein neues Maß. */
/* Tippflaeche der Ergebnis-Erfassung: mindestens 44 px, sonst ist der
   Absende-Knopf auf dem Telefon nicht sicher zu treffen. */
#scoreLead .btn,
#scoreLead input[type="email"],
#scoreLead input[type="text"] { min-height: 44px; }
#scoreLead .checkbox-row input { min-width: 22px; min-height: 22px; }

/* ---- SCORE V2 · DATENLÜCKEN — unbekannt ist nicht „normal" ---- */
.mm-gaps { display: flex; flex-direction: column; }
.mm-gaps .g { padding: 12px 0; border-top: 1px solid var(--hairline); }
.mm-gaps .g:first-child { border-top: 0; }
.mm-gaps .k { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mm-gaps .k b { font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; font-weight: 500; color: var(--muted); }
.mm-gaps .g.crit .k b { color: var(--status-flag); }
.mm-gaps .k .lvl { font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: var(--muted-2); }
.mm-gaps .g p { margin: 5px 0 0; color: var(--muted-2); font-size: 0.88rem; max-width: 62ch; }

/* ---- EMPTY / LOCKED STATES — Premium-Ruhe statt trauriger Platzhalter ---- */
.mm-empty { padding: var(--space-4) 0; border-top: 1px solid var(--hairline); }
.mm-empty .k { font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: var(--muted-2); display: block; margin-bottom: 6px; }
.mm-empty p { color: var(--muted); max-width: 46ch; }
.mm-locked { position: relative; padding: var(--space-4) 0; border-top: 1px solid var(--hairline); }
.mm-locked .k { font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: var(--muted-2); }
.mm-locked .k::before { content: "LOCKED · "; color: var(--status-attention); }

/* ---- PREMIUM ACCESS MOMENT — Kauf = Produkt-Upgrade, kein Formular-Ende ---- */
.mm-access { text-align: center; padding: var(--space-5) 0; }
.mm-access .stamp { font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: var(--status-improving); display: inline-block; padding: 8px 16px; border: 1px solid rgba(45,212,167,0.35); border-radius: 3px; animation: mm-unlock 700ms cubic-bezier(.2,.8,.2,1) both; }
.mm-access .grant { margin-top: 18px; }
.mm-access .grant b { display: block; font-family: var(--font-display); font-size: clamp(1.3rem, 5vw, 1.9rem); font-weight: 700; letter-spacing: 0.06em; animation: mm-rise 600ms 150ms cubic-bezier(.2,.8,.2,1) both; }
.mm-access .grant b + b { animation-delay: 280ms; }
.mm-access .assigned { margin-top: 16px; font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: var(--muted-2); animation: mm-rise 600ms 420ms both; }
/* Zwei gleichrangige Einstiege nach dem Protokoll-Kauf: lesen oder starten.
   Gestapelt, volle Breite auf Mobil — der Käufer wählt, er sucht nicht. */
.mm-access-choice { display: flex; flex-direction: column; gap: 12px; margin: 22px auto 0; max-width: 420px; }
.mm-access-choice .btn { width: 100%; animation: mm-rise 600ms 520ms both; }
.mm-access-choice .btn + .btn { animation-delay: 640ms; }

/* ==========================================================================
   TEXTSCHUTZ — Inhalte sind das Produkt, nicht Rohmaterial für andere
   --------------------------------------------------------------------------
   WAS DAS KANN: Das bequeme Markieren und Kopieren ganzer Abschnitte
   verhindern. Das hält Gelegenheits-Kopierer und Copy-Paste-Blogs ab.

   WAS DAS NICHT KANN, und das ist wichtig zu wissen: Wer den Text wirklich
   will, holt ihn über "Seite anzeigen", den Reader-Modus des Browsers oder
   einen Screenshot mit Texterkennung. Absoluter Schutz ist im Web
   unmöglich — jeder Text, den ein Browser anzeigen kann, ist auslesbar.

   DESHALB DIE AUSNAHMEN UNTEN. Sie sind keine Schwäche, sondern der
   Unterschied zwischen Schutz und Selbstschaden: Wer seine IBAN nicht
   kopieren kann, überweist nicht. Wer seine Bestellnummer nicht kopieren
   kann, schreibt eine Supportmail. Wer die AGB nicht speichern kann, hat ein
   Verbraucherrecht verloren.
   ========================================================================== */
.mm-guard, .mm-guard * {
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
/* Was zwingend kopierbar bleibt — nach Zweck, nicht nach Gefühl:
   · Eingabefelder: sonst ist kein Formular bedienbar.
   · .mono: dort stehen IBAN, Bestellnummern, Beträge, Codes.
   · Zusammenfassungen und Bestätigungsseiten: Transaktionsdaten des Kunden.
   · mailto/tel-Links: Kontaktaufnahme darf nie erschwert werden.
   · .mm-copyable: bewusst freigegeben, für alles Weitere. */
.mm-guard input, .mm-guard textarea, .mm-guard select,
.mm-guard [contenteditable], .mm-guard [contenteditable] *,
.mm-guard .mono, .mm-guard code, .mm-guard kbd, .mm-guard pre,
.mm-guard .summary-line, .mm-guard .summary-line *,
.mm-guard .order-success, .mm-guard .order-success *,
.mm-guard a[href^="mailto:"], .mm-guard a[href^="tel:"],
.mm-guard .mm-copyable, .mm-guard .mm-copyable * {
  -webkit-user-select: text; -moz-user-select: text; user-select: text;
  -webkit-touch-callout: default;
}

/* ---- KONTO IM CHECKOUT — der bezahlte Zugang lebt im Konto ----------------
   Ruhige, informierende Karte: sie erklärt, wohin der Zugang geht, und
   bietet die Anmeldung an, ohne den Kauf zu blockieren. Der angemeldete
   Zustand ist grün gerahmt — eine Bestätigung, keine Aufgabe. */
.co-acc { border: 1px solid var(--hairline); border-radius: 12px; padding: 16px 18px; margin: 0 0 26px; background: var(--surface-2, var(--wash-1)); }
.co-acc-on { border-color: rgba(45,212,167,0.35); background: var(--green-soft, rgba(45,212,167,0.06)); }
.co-acc-title { margin: 0 0 6px; font-weight: 600; font-size: 0.95rem; }
.co-acc-on .co-acc-title { color: var(--green, #2dd4a7); }
.co-acc-text { margin: 0; color: var(--muted); font-size: 0.88rem; max-width: 62ch; }
.co-acc-row { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.co-acc-row input { flex: 1 1 200px; min-width: 0; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--hairline); background: var(--bg); color: var(--text); font-size: 0.95rem; }
.co-acc-row input:focus { outline: none; border-color: var(--accent-line); }
.co-acc-row .btn { flex: 0 0 auto; }
.co-acc-msg { margin: 10px 0 0; font-size: 0.85rem; }
.co-acc-fine { margin: 12px 0 0; color: var(--muted-2); font-size: 0.78rem; max-width: 62ch; }
/* Auf schmalen Geräten steht der Button unter dem Feld — sonst wird beides
   so schmal, dass die E-Mail-Adresse nicht mehr lesbar ist.
   ACHTUNG: In einem Spalten-Flex wirkt flex-basis auf die HÖHE. Ohne das
   Zurücksetzen wurde das E-Mail-Feld 200px hoch (live gesehen). */
@media (max-width: 480px) {
  .co-acc-row { flex-direction: column; }
  .co-acc-row input { flex: 0 0 auto; width: 100%; }
  .co-acc-row .btn { width: 100%; }
}
@keyframes mm-unlock { from { opacity: 0; transform: scale(0.94); letter-spacing: 0.5em; } to { opacity: 1; transform: scale(1); letter-spacing: 0.26em; } }
@keyframes mm-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ---- MOTION — funktional, nie dekorativ; respektiert reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .mm-access .stamp, .mm-access .grant b, .mm-access .assigned, .mm-access-choice .btn { animation: none; }
}

/* ==========================================================================
   PHASE 14 — HOMEPAGE OS COMPOSITION (sichtbares Redesign)
   Der Einstieg wirkt wie ein Performance-Betriebssystem: massive Typo,
   Mono-Systemzeilen, Diagnose-Instrument, Kapitel-Dramaturgie, Data-Bands.
   ========================================================================== */
/* Die Systemzeile („FEMALEMETRIX TRANSFORM · BODY TARGET ENGINE") war eine
   Mono-Versalienzeile in Cyan mit auslaufendem Strich — die Handschrift des
   Performance-OS-Standes. Apple kennt keine Systemlabels über der Headline;
   dort steht der Produktname im normalen Satz. Sie bleibt als stille
   Beschriftung stehen, ohne Mono, ohne Sperrung, ohne Strich. */
.os14-sysline { display: block; font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em; color: #A1A1A6; margin-bottom: 14px; }
.os14-sysline::after { content: none; }

.os14-hero { position: relative; padding: calc(var(--header-h) + clamp(52px, 8vh, 88px)) 0 clamp(52px, 8vh, 84px); overflow: hidden; }

/* ---- HERO ALS DUNKLES MEDIENBAND ------------------------------------------
   Die Seite ist hell, dieser Hero nicht: ein Foto über die volle Breite mit
   heller Schrift darauf ist Apples Produkt-Einstieg. Weil die Tokens jetzt
   dunkle Schrift liefern, müssen die Textfarben hier ausdrücklich stehen —
   sonst erbt der Hero Anthrazit auf Schwarz.
   -------------------------------------------------------------------------- */
.os14-hero .h-display,
.os14-hero .os14-hero-copy h1 { color: #F5F5F7; }
.os14-hero .text-grad {
  /* Auf schwarzem Grund darf das Blau wieder hell sein — hier gilt Apples
     Dunkelblau #FF8F7A, nicht das für Weiß abgedunkelte --accent. */
  background: linear-gradient(135deg, #FF8F7A 0%, #FA8072 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Hero-Layout: links die sechs Textebenen, rechts das fotografische
   Showcase. Zweispaltig erst ab 1100px — darunter wird die Textspalte so
   schmal, dass die Headline nicht mehr in zwei Zeilen passt. */
.os14-hero-grid { display: grid; grid-template-columns: 1fr; }
.os14-hero .os14-hero-copy { max-width: 780px; }
/* Die Headline ist der Pattern Interrupt und darf entsprechend groß stehen.
   Bemessung (Space Grotesk 700, -0.02em): die längere Zeile "Das bist nicht
   du." misst 8,15× die Schriftgröße — bei 4.2rem sind das 548px und damit
   deutlich unter jeder Spaltenbreite. Beide Sätze stehen über <br> fest auf
   eigenen Zeilen, auf jeder Breite. */
/* margin-bottom: 0 hebt `.hero h1 { margin-bottom: 22px }` auf. Im
   einspaltigen Grid (display:contents) kollabieren Margins nicht — die 22px
   hätten sich dort zum margin-top des Leads addiert und genau den Abstand
   erzeugt, der weg soll. Der Abstand gehört allein dem Lead. */
.os14-hero .h-display { max-width: 780px; margin-bottom: 0; font-size: clamp(3.4rem, 4.6vw, 4.2rem); line-height: 1.02; letter-spacing: -0.025em; text-transform: none; }
@media (min-width: 1000px) {
  /* 1.45fr/1fr ≈ 59 % Textspalte: bei 1440px sind das ~658px, bei 1000px
     noch ~534px — die Headline braucht bei 4.2rem nur 548px bzw. bei 46px
     Schrift 375px und bleibt überall sicher zweizeilig. */
  .os14-hero-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 64px); align-items: center; }
  /* Die Karte inkl. Zielwahl und Fußnote muss in den ersten Viewport passen:
     bei 900px Fensterhöhe bleiben nach Header und Hero-Padding ~684px, und
     Badge, Zielwahl und Fußnote belegen davon ~193px. 52vh hält die Bühne
     darunter; beschnitten wird über object-position nur unten (Beine), der
     Kopf bleibt immer im Bild. */
  .os14-hero .trf-show .stage { max-height: min(52vh, 560px); }
  .os14-hero .trf-show .stage img { object-position: 50% 16%; }
}
@media (max-width: 999px) {
  /* Einspaltig mit gezielter Reihenfolge: das Showcase rückt zwischen
     Beschreibung und CTA — der Wow-Moment kommt vor der Handlung, der CTA
     steht unmittelbar darunter. display:contents hebt dafür die Copy-Box
     auf, ohne die HTML-Reihenfolge (und damit die Vorlesereihenfolge im
     Sinnzusammenhang) umzubauen. */
  .os14-hero .os14-hero-copy { display: contents; }
  .os14-hero .os14-sysline { order: 1; }
  .os14-hero .h-display { order: 2; }
  .os14-hero .lead { order: 3; }
  .os14-hero .trf-show { order: 4; margin-top: 28px; }
  .os14-hero .hero-ctas { order: 5; }
  .os14-hero .os14-ctanote { order: 6; }
  .os14-hero .os14-scoreline { order: 7; }
  .os14-hero .os14-trust { order: 8; }
  /* Die 3:4-Karte darf nicht auf Containerbreite laufen: bei 768px wären das
     720px Breite und das Porträt würde über die max-height stark beschnitten. */
  .os14-hero .trf-show { max-width: 460px; }
}
/* Rhythmus des Textblocks — bewusst asymmetrisch: Luft VOR der Headline,
   wenig darunter. Behauptung und Auflösung sollen als ein Block gelesen
   werden, nicht als zwei Abschnitte. 15px statt der früheren 22px, und
   margin-bottom: 0 neutralisiert .hero .lead (36px), sonst addieren sich
   beide Systeme zum Abstand von .hero-ctas. */
.os14-hero .os14-sysline { margin-bottom: 28px; }
.os14-hero .lead { max-width: 48ch; margin-top: 15px; margin-bottom: 0; font-size: 1.1875rem; line-height: 1.42; color: #A1A1A6; }
.br-m { display: none; }
/* Primär-CTA: das kontraststärkste Element im Hero. Verlauf + subtile Tiefe
   (Innenlicht oben, weicher Schatten), kein Dauer-Glow, keine Neonwirkung. */
.os14-hero .hero-ctas { margin: 30px 0 0; }
/* Der Hero-Button trug drei gestapelte Schatten (Innenkante, blauer Schein,
   Tiefenschatten) und hob beim Zeigen ab. Apples Pille ist flach — auch im
   Hero. Sie wird hier nur größer, sonst nichts. */
.os14-hero .hero-ctas .btn {
  min-height: 52px; padding: 15px 30px;
  font-size: 1.1875rem; font-weight: 400; letter-spacing: -0.012em;
  box-shadow: none;
}
.os14-hero .hero-ctas .btn:focus-visible { outline: 2px solid #FF8F7A; outline-offset: 3px; }
/* Handlungs-Microcopy direkt am CTA: beantwortet vor dem Klick, was danach
   passiert und wie lange es dauert. Klein und grau — sie soll den Button
   stützen, nicht mit ihm konkurrieren. */
.os14-ctanote { margin-top: 11px; font-size: 0.75rem; line-height: 1.36; color: #A1A1A6; }
/* Score-Link: bewusst zweitrangig — keine Fläche, kein Rahmen, aber volle
   Touch-Höhe (~44px) und klar als Link erkennbar. */
.os14-scoreline { margin-top: 4px; }
.os14-scorelink { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 2px 2px 2px 0; font-size: 0.95rem; transition: color 0.2s; }
.os14-scorelink .pre { color: #A1A1A6; }
.os14-scorelink .act {
  color: #FF8F7A;
  text-decoration: none;
  transition: color 0.2s;
}
.os14-scorelink:hover .act, .os14-scorelink:focus-visible .act { text-decoration: underline; }
.os14-scorelink:focus-visible { outline: 2px solid #FF8F7A; outline-offset: 3px; border-radius: 6px; }

/* KLEINGEDRUCKTES — bewusste Umkehr einer früheren Entscheidung.
   Hier stand: „Sie soll wie ein Systemlabel wirken — nicht wie ein Warnhinweis
   und nicht wie Kleingedrucktes", gesetzt in Mono-Versalien. Das war richtig,
   solange Mono-Versalien die Sprache der Seite waren: dort las sich der Satz
   als technische Kennzeichnung.
   In Apples Sprache gibt es diese Ebene nicht — Einschränkungen stehen in
   12px Grau unter der Aussage. Der Satz bleibt an derselben Stelle stehen
   (er gehört zur Aussage des Heros), verliert aber den Systemlabel-Rang. */
.os14-trust {
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1.36;
  letter-spacing: -0.004em;
  text-transform: none;
  color: #86868B;
}
/* Zweispaltiges Text/Instrument-Grid — seit dem Hero-Neuaufbau (August 2026)
   nur noch von Content-Sektionen unterhalb des Heros genutzt (DAS PROTOKOLL). */
.os14-hero-inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr); gap: clamp(28px, 6vw, 84px); align-items: center; }
@media (max-width: 900px) { .os14-hero-inner { grid-template-columns: 1fr; } }

/* =========================================================================
   HERO MOBIL — die wichtigste Ansicht (Traffic aus Instagram/TikTok).
   Reihenfolge: Eyebrow → 2-zeilige Headline → 3 Zeilen Nutzen → Showcase →
   CTA (volle Breite) → CTA-Microcopy → Score-Link → Vertrauens-Microcopy.
   Die Abstände sind hier noch enger als am Desktop, damit der Textblock als
   eine Einheit steht und das Visual früh ins Bild kommt.
   ========================================================================= */
@media (max-width: 640px) {
  .os14-hero { padding: calc(var(--header-h) + 22px) 0 36px; }
  /* Eyebrow: enger gesetzt, damit die Zeile auf 360px ganz bleibt; die
     dekorative Linie entfällt mobil — sie wirkte gedrängt. */
  .os14-hero .os14-sysline { margin-bottom: 24px; font-size: 0.55rem; letter-spacing: 0.16em; }
  .os14-hero .os14-sysline::after { display: none; }
  /* Exakt bemessen: "Das bist nicht du." misst 8,15× die Schriftgröße.
     11.6vw − 5.6px füllt die Content-Breite (100vw − 48px) zu ~95 % — die
     Headline wird so groß wie irgend möglich, ohne je zu brechen: 36px bei
     360px Gerätebreite, 40px bei 390px, 44px bei 430px. */
  .os14-hero .h-display { font-size: clamp(1.9rem, calc(11.6vw - 5.6px), 2.9rem); line-height: 1.04; }
  /* Der entscheidende Abstand: 12px statt der früheren 20px. Behauptung und
     Auflösung müssen als EIN Block gelesen werden. */
  .os14-hero .lead { margin-top: 12px; font-size: 1rem; line-height: 1.45; max-width: none; }
  .os14-hero .hero-ctas { margin-top: 26px; }
  /* CTA: volle Containerbreite, einzeilig, ~54px hoch. */
  .os14-hero .hero-ctas .btn { width: 100%; white-space: nowrap; min-height: 54px; padding: 13px 18px; font-size: 1.06rem; }
  .os14-ctanote { margin-top: 10px; font-size: 0.8rem; }
  .os14-scoreline { margin-top: 2px; }
  .os14-scorelink { font-size: 0.94rem; }
  .os14-trust { margin-top: 10px; font-size: 0.58rem; }
  /* Der CTA gehört auf dem Telefon unmittelbar unter das Bild — Zielwahl und
     Erklärtext der Karte würden ihn sonst rund 150px tiefer schieben, aus dem
     ersten Viewport heraus. display:contents löst die Karte dafür in ihre
     Teile auf; die Bühne behält ihre Breite über die Kinder selbst. Reihenfolge:
     Bild → CTA → Zielwahl → Kartentext → Score → Kennzeichnung. */
  .os14-hero .trf-show { display: contents; }
  .os14-hero .trf-show .ai-badge { order: 4; margin-top: 26px; }
  .os14-hero .trf-show .stage { order: 5; }
  .os14-hero .hero-ctas { order: 6; margin-top: 22px; }
  .os14-hero .os14-ctanote { order: 7; }
  .os14-hero .trf-show .goals { order: 8; margin-top: 20px; }
  .os14-hero .trf-show .note { order: 9; }
  .os14-hero .os14-scoreline { order: 10; margin-top: 14px; }
  .os14-hero .os14-trust { order: 11; }
  .os14-hero .trf-show .stage,
  .os14-hero .trf-show .goals,
  .os14-hero .trf-show .note { max-width: 460px; }
}
@media (max-width: 374px) {
  .os14-hero .hero-ctas .btn { font-size: 0.99rem; }
}
/* Unter ~380px braucht die Beschreibung eine Stufe weniger, sonst wird aus
   drei Zeilen eine vierte. */
@media (max-width: 379px) {
  .os14-hero .lead { font-size: 0.94rem; }
}

/* ---- Signature-Hero-Video: cinematischer Hintergrund, Content bleibt lesbar. */
.os14-hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.os14-hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 78% 50%;
  opacity: 0; transition: opacity 1.2s ease;
}
.os14-hero-video.is-live { opacity: 1; }
/* Scrim: links tiefes Schwarz für die Headline, rechts nur so viel Durchlass,
   dass das Video als Lichtstimmung lesbar bleibt. Seit das Showcase-Foto im
   Hero steht, darf das Videomotiv nicht mehr als zweites Körperbild
   danebenstehen — es wird zur Textur. Keine Vignette, kein Blur. */
/* Der Scrim setzte an beiden Enden var(--bg-0) — solange das #070A0F war,
   verlief er ins Seitenschwarz. Jetzt ist --bg-0 weiß, und der Verlauf lief
   von Weiß nach Schwarz quer durch die Headline. Der Hero ist ein bewusst
   dunkles Medienband (Apples Produkt-Hero), also stehen hier feste
   Schwarzwerte statt des Grund-Tokens. */
.os14-hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.97) 0%, rgba(0,0,0,0.94) 30%, rgba(0,0,0,0.86) 62%, rgba(0,0,0,0.9) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.62) 0%, transparent 26%, transparent 56%, rgba(0,0,0,0.55) 100%);
}
.os14-hero > .container { position: relative; z-index: 1; }
@media (max-width: 1099px) {
  /* Einspaltig: Motiv nach oben rücken (Oberkörper sichtbar, nicht
     angeschnitten), stärkeres vertikales Scrim hinter dem Text. */
  .os14-hero-video { object-position: 70% 30%; }
  .os14-hero-scrim {
    background:
      linear-gradient(180deg, rgba(0,0,0,0.84) 0%, rgba(0,0,0,0.88) 42%, rgba(0,0,0,0.92) 74%, rgba(0,0,0,0.94) 100%);
  }
}
@media (prefers-reduced-motion: reduce) { .os14-hero-video { transition: none; } }

/* ---- AMBIENT MOTION für Seitenköpfe: dasselbe Signature-Video wie der
   Home-Hero (nach dem ersten Besuch im Browser-Cache — keine zweite
   Ladung), stark abgedunkelt hinter .page-head. Hochwertigkeit ohne
   Lesbarkeitsverlust; reduced-motion bleibt beim stehenden Poster. */
.mm-ambient { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.mm-ambient video,
.mm-ambient img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 74% 32%;
  opacity: 0; transition: opacity 1.2s ease;
}
/* Das Standbild hat kein play()-Ereignis, das .is-live setzen könnte —
   es steht direkt auf der gedeckelten Deckkraft. */
.mm-ambient img { opacity: 0.55; transition: none; }
/* Gedeckelt auf 0.55: das Motiv soll als Licht/Atmosphäre lesbar sein,
   nie als eigenständiges Foto hinter dem Text (Founder-QA). */
.mm-ambient video.is-live { opacity: 0.55; }
.mm-ambient .scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(var(--scrim-rgb), 0.9) 0%, rgba(var(--scrim-rgb), 0.82) 34%, rgba(var(--scrim-rgb), 0.93) 72%, var(--bg-0) 100%);
}
/* ATMOSPHÄRE NUR AUF DUNKLEM GRUND.
   Der Ambient-Film liegt bei 55 % Deckkraft hinter den Seitenköpfen und war
   als Licht gedacht, nicht als Foto. Auf dunklem Grund funktioniert das. Auf
   #FBFBFD wird aus einem dunklen Motiv unter einem weißen Schleier ein
   grauer Fleck — dasselbe Argument, aus dem der Cinematic-Ambient hinter dem
   Seiteninhalt entfallen ist. Er bleibt deshalb der dunklen Darstellung
   vorbehalten; das Porträt im Coaching-Hero ist davon NICHT betroffen, das
   ist ein echtes Motiv und steht in beiden Darstellungen. */
.mm-ambient { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mm-ambient { display: block; }
}
:root[data-theme="dark"] .mm-ambient { display: block; }
.page-head > .container { position: relative; z-index: 1; }

/* Coaching-Kopf: Gründer-Porträt als seitenfüllender Hintergrund, der Text
   läuft darüber — Coaching ist das eine Produkt, das eine Person IST.
   Desktop: Porträt rechts verankert (volle Höhe, links weich ausgeblendet),
   Text links auf sicherem Grund. Mobil: Porträt füllt den Kopf, Gesicht
   oben, Text unten über vertikalem Scrim. */
.co-hero { display: flex; align-items: center; min-height: min(86vh, 820px); overflow: hidden; }
.co-hero-media { position: absolute; inset: 0; overflow: hidden; }
.co-hero-media img {
  position: absolute; top: 0; right: 0; height: 100%; width: auto; min-width: 46%;
  object-fit: cover; object-position: 50% 15%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%);
  mask-image: linear-gradient(90deg, transparent 0, #000 26%);
}
.co-hero-media .scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--bg-0) 0%, rgba(var(--scrim-rgb), 0.95) 38%, rgba(var(--scrim-rgb), 0.62) 58%, rgba(var(--scrim-rgb), 0.12) 80%, rgba(var(--scrim-rgb), 0.28) 100%),
    linear-gradient(180deg, rgba(var(--scrim-rgb), 0.4) 0%, transparent 30%, transparent 62%, var(--bg-0) 100%);
}
.co-hero > .container { position: relative; z-index: 1; }

/* Textspalte schmaler als der alte 720er-Block: die Headline bleibt zweizeilig
   und läuft nicht bis in die Bildhälfte, in der das Gesicht steht. */
.co-hero-copy { max-width: 560px; }
.co-hero-copy .lead { margin-top: 18px; }
/* Leistungszeile statt Wiederholung im Fließtext — der Preis steht hier
   einmal und nirgends sonst im Hero. */
.co-facts {
  margin: 16px 0 0; font-family: var(--font-body);
  font-weight: 600; font-size: 0.76rem;
  letter-spacing: 0.01em; color: var(--muted);
}
.co-facts span { color: var(--muted-2); margin: 0 6px; }
/* .hero-ctas bringt global 36px Abstand nach unten mit — zusammen mit dem
   Abstand des Vergleichslinks klaffte darunter eine 52px-Lücke. Der Platz
   gehört dem Porträt, nicht dem Weißraum. */
.co-hero .hero-ctas { margin-top: 22px; margin-bottom: 0; }
.co-compare {
  display: inline-block; margin-top: 16px; font-size: 0.92rem;
  color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--hairline);
  padding-bottom: 2px; transition: color 0.2s ease, border-color 0.2s ease;
}
.co-compare span { color: var(--status-active); margin-left: 4px; }
.co-compare:hover { color: var(--text); border-color: var(--status-active); }
.co-signature { font-size: 0.82rem; color: var(--muted-2); margin: 18px 0 0; }

/* Das Gründer-Porträt der Über-Seite steht jetzt als Seiteneinstieg ganz
   oben — Maße und Ausschnitt unverändert, siehe .ub-open am Dateiende. */
@media (max-width: 900px) {
  /* Wie der Homepage-Hero auf Mobil: das Porträt ist der durchgehende
     HINTERGRUND des gesamten Kopfes, der Text läuft darüber — Lesbarkeit
     sichert der kräftige vertikale Scrim (Gesicht bleibt oben als Motiv
     erkennbar, unten Übergang in die Seite). */
  /* svh statt vh: In mobilen Browsern meint vh den Viewport OHNE Adress-
     leiste. Sichtbar ist beim Laden aber deutlich weniger — mit vh geriet
     die Textgruppe rechnerisch tiefer, als das Display hergibt. svh misst
     den kleinsten (also tatsächlich sichtbaren) Viewport; die vh-Zeile
     darüber bleibt als Fallback für alte Browser stehen. */
  .co-hero { min-height: 92vh; min-height: 96svh; align-items: flex-end; padding-bottom: 40px; }
  .co-hero-media img {
    left: 0; right: auto; top: 0; width: 100%; height: 100%; min-width: 0;
    /* Ausschnitt nach links gezogen: die Person steht dadurch in der rechten
       Bildhälfte, die Kopfzeile beginnt auf dunklem Studiohintergrund. */
    object-position: 26% 0;
    mask-image: none; -webkit-mask-image: none;
  }
  /* Das Gesicht liegt im oberen Drittel und bleibt frei: bis 34 % nur ein
     leichter Schleier, darunter setzt der Textgrund kräftig ein. Der Text
     beginnt erst unterhalb dieser Kante, damit keine Zeile durch die Augen
     läuft. */
  .co-hero-media .scrim {
    background:
      /* Zusätzlich links leicht abdunkeln: trägt die Kopfzeile, ohne das
         Porträt rechts anzufassen. */
      linear-gradient(90deg, rgba(var(--scrim-rgb), 0.5) 0%, rgba(var(--scrim-rgb), 0.22) 40%, transparent 68%),
      linear-gradient(180deg, rgba(var(--scrim-rgb), 0.3) 0%, rgba(var(--scrim-rgb), 0.34) 34%, rgba(var(--scrim-rgb), 0.82) 50%, rgba(var(--scrim-rgb), 0.94) 70%, var(--bg-0) 100%);
  }
  .co-hero-copy { max-width: none; }
  .co-hero-copy .lead { margin-top: 14px; }
  /* Ab etwa iPhone-14-Höhe reicht der Platz, das Porträt ÜBER der Textgruppe
     enden zu lassen — dann kreuzt keine Zeile mehr das Gesicht. Auf kürzeren
     Displays gibt es diesen Platz nicht; dort füllt das Bild wie bisher den
     Kopf und der Text liegt auf dem kräftigen Scrim. */
  /* Schwelle bewusst bei 660px: Auf einem iPhone mit eingeblendeter Safari-
     Leiste sind vom 874px-Display nur rund 700px sichtbar. Mit der früheren
     800px-Grenze griff diese Regel dort NICHT, das Bild füllte den ganzen
     Kopf und die Schrift lag wieder im Gesicht. */
  @media (min-height: 620px) {
    /* Unter dem Header ansetzen, damit der Scheitel nicht hinter der
       Kopfleiste verschwindet — und den Platz in die Bildhöhe geben,
       sodass der Kopf frei und groß über der Textgruppe steht. */
    .co-hero-media img { top: var(--header-h); height: 54vh; height: 49svh; }
    /* Die Textgruppe ist unten verankert und rückt so von der Kinnlinie ab,
       ohne dass sich am Porträt etwas ändert. */
    .co-hero { min-height: 96vh; min-height: 100svh; }
  }
  /* Kompakter als auf Desktop: jede eingesparte Zeile hier ist Platz, den
     das Porträt darüber gewinnt. */
  .co-facts { margin-top: 12px; font-size: 0.68rem; letter-spacing: 0.04em; }
  .co-hero .hero-ctas { margin-top: 18px; }
  /* Hauptbutton etwas niedriger — er soll führen, nicht dominieren. */
  .co-hero .hero-ctas .btn-primary { padding: 14px 22px; width: 100%; }
  .co-signature { margin-top: 14px; }

  /* Mittlere Displayhöhen (iPhone mit eingeblendeter Adressleiste, kompakte
     Androids): Abstände straffen. Jede eingesparte Zeile schiebt die
     Textgruppe weiter von der Kinnlinie weg. */
  @media (min-height: 620px) and (max-height: 730px) {
    .co-hero { padding-bottom: 26px; }
    .co-hero-copy .lead { margin-top: 11px; font-size: 0.97rem; line-height: 1.5; }
    .co-facts { margin-top: 10px; }
    .co-hero .hero-ctas { margin-top: 14px; }
    .co-compare { margin-top: 13px; }
    .co-signature { margin-top: 11px; }
  }

  /* Sehr kurze Displays (iPhone SE): Abstände straffen, damit der Aufruf ohne
     Scrollen sichtbar bleibt. Steht bewusst als LETZTES im Mobilblock — bei
     gleicher Spezifität gewinnt sonst die allgemeine Regel darunter. */
  @media (max-height: 640px) {
    .co-hero { padding-bottom: 16px; }
    .co-hero-copy .lead { margin-top: 10px; }
    .co-facts { margin-top: 10px; font-size: 0.68rem; letter-spacing: 0.04em; }
    .co-hero .hero-ctas { margin-top: 12px; }
    .co-compare { margin-top: 12px; }
    .co-signature { margin-top: 8px; }
  }
}
@media (prefers-reduced-motion: reduce) { .mm-ambient video { transition: none; } }

/* Diagnose-Instrument im Hero: kein Card-Dashboard, ein Messgerät. */
/* =========================================================================
   PREMIUM-TRANSFORMATIONS-SHOWCASE (ersetzt das frühere KI-Schema)
   -------------------------------------------------------------------------
   Das Foto ist der Hauptdarsteller: großes Bild, Vorher/Nachher-Regler,
   Zielumschalter. Keine Dauer-Animationen, keine Leuchtrahmen — nur die
   FemaleMetrix-Hairlines und ein kontrollierter Cyan-Akzent. */
.trf-show { position: relative; }
/* KI-KENNZEICHNUNG — bleibt am Bild, und zwar buchstäblich AUF ihm.
   Bis August 2026 war sie Apples Bildunterschrift: eine eigene graue Zeile
   über dem Bild. Auf dem Telefon kostete genau diese Zeile 26px zwischen der
   Handlung („Mein Potenzial sehen") und dem Beleg — und der Beleg soll so
   dicht wie möglich an die Behauptung.

   Als Kapsel in der Bildecke kennzeichnet sie dasselbe Bild, verbraucht aber
   keine Zeile: dieselbe Optik wie die Marken „HEUTE" und „LANGFRISTIG" unten,
   feste helle Werte, weil sie immer auf dem Foto liegt.

   Sie wandert ausdrücklich NICHT unter das Bild und nicht in den
   Fußnotenblock: eine Kennzeichnung, die erst nach dem Bild auftaucht,
   kennzeichnet nichts. pointer-events: none, damit die Kapsel den
   Vorher/Nachher-Regler nicht abfängt — die Bühne ist eine Ziehfläche. */
.trf-show .ai-badge {
  position: absolute; top: 13px; left: 15px; z-index: 6; pointer-events: none;
  margin: 0; padding: 0; background: none; border-radius: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  font-family: var(--font-body); font-size: 0.5625rem; font-weight: 300;
  letter-spacing: 0.16em; line-height: 1;
  /* 45% Weiß ist die gewollte Zurückhaltung — und zugleich die Untergrenze.
     Gemessen auf dem Grund an dieser Stelle (Leuchtdichte 0,010, also fast
     Schwarz) ergibt das 4,67:1 — an der hellsten Stelle unter der Marke und
     mit dem Regler ganz links immer noch 4,59:1, jeweils ohne den Schatten
     gerechnet. Damit bleibt sie lesbar. Wer die Zahl weiter
     senkt, unterschreitet 4,5:1: dann ist die Marke nicht mehr sicher lesbar,
     und eine Kennzeichnung, die man nicht lesen kann, kennzeichnet nichts.
     Der Schatten deckt den Fall ab, dass der Regler ein helleres Motiv unter
     die Marke schiebt; er kostet optisch nichts. */
  color: rgba(255, 255, 255, 0.45);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.trf-show .stage {
  position: relative; width: 100%; aspect-ratio: 3 / 4; max-height: min(70vh, 620px);
  border-radius: 18px; overflow: hidden; background: #0c1016;
  border: 1px solid var(--line-strong);
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: ew-resize;
}
.trf-show .stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.trf-show .after { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); }
.trf-show .divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; z-index: 5; outline: none; }
.trf-show .divider::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: rgba(240, 238, 233, 0.9); box-shadow: 0 0 14px rgba(7, 10, 15, 0.6); }
.trf-show .grip {
  position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(10, 14, 19, 0.82); border: 1.5px solid rgba(240, 238, 233, 0.85);
  display: grid; place-items: center; color: var(--text); font-size: 0.9rem; letter-spacing: 0.02em;
  backdrop-filter: blur(4px);
}
.trf-show .divider:focus-visible .grip { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(250, 128, 114, 0.35); }
/* Die Marken auf dem Bild trugen color: var(--text) — im dunklen Stand war das
   Cremeweiß, jetzt ist es Tinte und wäre auf der dunklen Kapsel unsichtbar.
   Hier stehen deshalb feste helle Werte: die Marke liegt immer auf dem Foto. */
.trf-show .tag {
  position: absolute; bottom: 12px; z-index: 4;
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.05em;
  padding: 6px 11px; border-radius: 980px; color: #fff;
  background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 0;
}
.trf-show .tag.left { left: 12px; }
.trf-show .tag.right { right: 12px; color: #fff; }

/* ZIELUMSCHALTER ALS SEGMENTED CONTROL — vorher zwei gerahmte Kästen
   nebeneinander, der aktive mit Akzentrahmen und Akzentfläche. Apple setzt
   eine Auswahl aus zwei gleichwertigen Zuständen als Segmentregler: eine
   Rille, in der die aktive Hälfte als erhabene Fläche liegt.
   Die Werte sind fest hell, weil der Regler im dunklen Hero-Band steht. */
/* Der Regler stand bis August 2026 im dunklen Hero und trug feste helle
   Werte. Seit das Showcase ein eigenes Band unter dem Hero ist, liegt er auf
   der Seitenfläche — und muss beiden Darstellungen folgen. Nur die Marken
   auf dem Foto (.tag) bleiben fest hell: sie liegen immer auf dem Bild. */
.trf-show .goals {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 14px;
  background: var(--bg-2); border-radius: 12px; padding: 2px;
}
.trf-show .goal {
  text-align: left; padding: 10px 13px; border-radius: 10px;
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.trf-show .goal b { display: block; color: var(--text); font-size: 0.875rem; line-height: 1.25; margin-bottom: 2px; font-weight: 600; }
.trf-show .goal span { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.04em; color: var(--muted-2); }
.trf-show .goal.on { background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.trf-show .goal.on b { color: var(--text); }
.trf-show .goal.on span { color: var(--muted); }
.trf-show .note { margin: 14px 0 0; font-size: 0.75rem; line-height: 1.36; color: var(--muted-2); text-align: center; }
/* Der Hero trägt genau EINEN CTA — er steht in der Textspalte und wird auf
   Mobile per order direkt unter das Showcase sortiert. Der frühere
   Zweit-Button in der Karte (.cta-m) ist deshalb entfallen. */
@media (max-width: 999px) {
  /* Einspaltig steht das Showcase über dem CTA — je höher die Bühne, desto
     tiefer rutscht der Button. 46vh ist der Punkt, an dem das Motiv noch
     ganzfigurig wirkt und der CTA auf 800px hohen Geräten gerade noch
     vollständig über der Falz landet. */
  .trf-show .stage { max-height: min(46vh, 420px); }
  .trf-show .stage img { object-position: 50% 10%; }
  .trf-show .goals { margin-top: 12px; }
  .trf-show .note { margin-top: 12px; font-size: 0.82rem; }
}
@media (max-width: 360px) {
  .trf-show .goal b { font-size: 0.82rem; }
  .trf-show .goal span { font-size: 0.56rem; }
}

/* Anker unter dem fixen Header: Sprungziele (z. B. #so-gehts) dürfen nie
   unter dem Sticky Header verschwinden — inkl. iOS Safe Area. */
main section[id], main [id].section { scroll-margin-top: calc(84px + env(safe-area-inset-top, 0px)); }

.os14-diag { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 26px 0 20px; position: relative; }
.os14-diag .head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: var(--muted-2); margin-bottom: 18px; }
.os14-diag .head .live { color: var(--status-active); }
.os14-diag .readout { display: flex; align-items: baseline; gap: 16px; margin-bottom: 6px; }
.os14-diag .readout .num { font-family: var(--font-display); font-weight: 700; font-size: clamp(3.4rem, 9vw, 5rem); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.os14-diag .readout .num small { font-size: 0.32em; color: var(--muted-2); font-weight: 600; letter-spacing: 0.04em; }
.os14-diag .readout .meta b { display: block; font-size: 0.92rem; }
.os14-diag .readout .meta span { font-size: 0.78rem; color: var(--muted-2); }
/* Der ENGPASS-Marker bekommt eine eigene Spalte, statt die Wertspalte zu
   verbreitern: sonst startet der Engpass-Balken auf einer kürzeren Grundlinie
   als die übrigen und ein höherer Wert sähe kürzer aus als ein niedrigerer. */
.os14-diag .mm-sys .row { grid-template-columns: 92px 1fr auto 52px; padding: 9px 0; }
.os14-diag .mm-sys .row::after {
  content: ""; font-family: var(--font-body); font-weight: 600; font-size: 0.75rem;
  letter-spacing: 0.01em; color: var(--status-active); text-align: right;
}
.os14-diag .mm-sys .row.is-primary::after { content: "ENGPASS"; }
.os14-diag .mm-sys .row.is-primary .val::after { content: none; }
/* Ableitung unter der Messung: erst die Konsequenz, dann die Lesehilfe. */
.os14-diag .diag-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.os14-diag .diag-foot .lead-out { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--muted); }
.os14-diag .diag-foot .lead-out b { color: var(--status-active); font-weight: 600; }
.os14-diag .diag-foot .note { margin: 7px 0 0; font-size: 0.72rem; line-height: 1.45; color: var(--muted-2); }

/* Data-Band: große Zahlen als Fläche, keine Kacheln. */
.os14-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.os14-band > div { padding: 26px 22px; border-left: 1px solid var(--hairline); }
.os14-band > div:first-child { border-left: 0; }
.os14-band .stat-num { font-size: clamp(1.9rem, 5vw, 2.8rem); font-family: var(--font-display); font-weight: 700; line-height: 1; }
.os14-band .stat-label { font-family: var(--font-body);
  font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: var(--muted-2); margin-top: 8px; }
@media (max-width: 640px) { .os14-band { grid-template-columns: 1fr 1fr; } .os14-band > div:nth-child(odd) { border-left: 0; } .os14-band > div { border-top: 1px solid var(--hairline); } .os14-band > div:nth-child(-n+2) { border-top: 0; } }

/* Kapitel-Dramaturgie: jede Story-Sektion beginnt mit einer Systemmarke. */
/* KAPITELMARKER — entfernt.
   Hier stand die Dramaturgie „01 THE PREVIEW · 02 THE TARGETS · 03 THE
   PROBLEM": eine große transparente Mono-Ziffer, ein gesperrtes Cyan-Label
   und eine auslaufende Linie über jeder Sektion.

   Apple nummeriert Sektionen nicht. Eine Nummer ist dort nur zulässig, wo die
   Reihenfolge selbst Information ist — die vier Schritte „Foto → Ziele →
   Auswahl → Weg" sind so ein Fall und behalten ihre Nummern. „THE PROBLEM"
   ist kein dritter Schritt, sondern ein Kapitelname, und die Zählung
   behauptet eine Ordnung, die es nicht gibt.

   Zusätzlich stand der Marker direkt über der .eyebrow und sagte oft dasselbe
   („THE PREVIEW" über „So funktioniert es"). Er wird ausgeblendet statt aus
   37 Seiten entfernt, damit das Markup unangetastet bleibt; die zugehörigen
   <div class="os14-ch"> sind im HTML-Sweep aus den Hauptseiten geflogen. */
.os14-ch { display: none; }

/* Friction-Rows: editoriale Zeilen statt drei identischer Cards. */
.os14-frictions { border-top: 1px solid var(--hairline); }
.os14-frictions .fr { display: grid; grid-template-columns: 64px 200px 1fr; gap: 18px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--hairline); }
.os14-frictions .fr .no { font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; color: var(--muted-2); letter-spacing: 0.01em; }
.os14-frictions .fr h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; }
.os14-frictions .fr p { color: var(--muted); margin: 0; }
@media (max-width: 700px) { .os14-frictions .fr { grid-template-columns: 44px 1fr; } .os14-frictions .fr p { grid-column: 2; } }

/* ---- P14 Score-Result-Hero: die Zahl dominiert, EIN Limiter-Band. ---- */
.os14-score-hero { padding: 10px 0 4px; margin-bottom: 26px; }
.os14-score-hero .sys { display: flex; justify-content: space-between; font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: var(--status-active); margin-bottom: 16px; }
.os14-score-hero .sys .who { color: var(--muted-2); letter-spacing: 0.14em; }
.os14-score-hero .read { display: flex; align-items: flex-end; gap: clamp(18px, 4vw, 40px); flex-wrap: wrap; padding-bottom: 22px; }
.os14-score-hero .num { font-family: var(--font-display); font-weight: 700; font-size: clamp(4.4rem, 16vw, 8rem); line-height: 0.9; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.os14-score-hero .num small { font-size: 0.22em; font-weight: 600; color: var(--muted-2); letter-spacing: 0.06em; }
.os14-score-hero .lvl { max-width: 42ch; padding-bottom: 8px; }
.os14-score-hero .lvl b, .os14-score-hero .lvl .lvl-h { display: block; margin: 0; font-family: var(--font-display); font-size: clamp(1.15rem, 3vw, 1.5rem); letter-spacing: 0.08em; text-transform: uppercase; }
.os14-score-hero .lvl > span { display: block; color: var(--muted); font-size: 0.92rem; margin-top: 6px; }
.os14-score-hero .lvl .delta { display: inline-block; font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; margin-top: 10px; }
.os14-score-hero .lvl .delta.up { color: var(--status-improving); }
.os14-score-hero .lvl .delta.down { color: var(--status-attention); }
.os14-score-hero .limiter { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 16px; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 16px 0; }
.os14-score-hero .limiter .k { font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: var(--status-active); }
.os14-score-hero .limiter b { font-family: var(--font-display); font-size: clamp(1.2rem, 4vw, 1.7rem); font-weight: 700; letter-spacing: 0.04em; }
.os14-score-hero .limiter .v { font-family: var(--font-mono); font-size: 1.1rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---- P14 12-Week System-Rail: Programmfortschritt 01…12 als Instrument. */
.os14-prograil { display: flex; align-items: center; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--hairline); margin-bottom: 18px; flex-wrap: wrap; }
.os14-prograil .sys { font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.01em; color: var(--status-active); }
.os14-prograil .rail { display: flex; gap: 10px; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em; color: var(--muted-2); flex-wrap: wrap; }
.os14-prograil .rail span.done { color: var(--muted); }
.os14-prograil .rail span.cur { color: var(--status-active); font-weight: 700; position: relative; }
.os14-prograil .rail span.cur::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--status-active); }

/* ---------- DER EINE AUFTRAG (Score → Tracker → zweiter Score) ----------
   Bewusst ruhig gestaltet: Der Block steht ganz oben und soll führen, nicht
   schreien. Der Fortschrittsbalken ist rein dekorativ (aria-hidden) — die
   Zahl daneben ist die zugängliche Fassung. */
.trk-focus-bar {
  height: 6px; border-radius: 4px; background: var(--card-2);
  overflow: hidden; margin-top: 10px;
}
.trk-focus-bar > span {
  display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .3s ease;
}
.trk-focus-check {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card-2); cursor: pointer; font-size: .95rem;
}
.trk-focus-check:hover { border-color: var(--accent-line); }
.trk-focus-check:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.trk-focus-check input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; }
/* ---- TAGESSTATUS AUS MESSDATEN (Paket 5) ----
   Dieselbe Box wie die Checkbox-Zeile, nur mit Platz für Beleg und Herkunft.
   Kein neues Designsystem, keine Ampel — die Herkunft steht als Text da. */
.trk-focus-auto {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card-2);
}
.trk-focus-auto.is-done { border-color: var(--accent-line); }
.trk-focus-auto .ta-head { margin: 0 0 6px; font-size: .95rem; color: var(--text); }
.trk-focus-auto .ta-state { margin: 0 0 4px; font-size: .95rem; font-weight: 600; color: var(--text); }
.trk-focus-auto.is-done .ta-state { color: var(--accent-2); }
.trk-focus-auto .ta-ev { margin: 0 0 4px; font-size: .88rem; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Die Herkunftszeile trägt ganze Sätze („Automatisch aus Messdaten erkannt",
   Konflikthinweise, zurückgenommene Bewertungen) — deshalb lesbare Größe und
   keine Versalien. Mikrotypografie ist für Marker, nicht für Erklärungen. */
.trk-focus-auto .ta-src {
  margin: 0 0 10px; font-size: .82rem; line-height: 1.45;
  color: var(--muted-2); max-width: 62ch;
}
.trk-focus-auto .btn { margin: 0 6px 6px 0; }
@media (max-width: 420px) { .trk-focus-auto .btn { width: 100%; margin-right: 0; } }
.trk-focus-drop {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--muted-2); text-decoration: underline; font: inherit; font-size: .85rem;
}
.trk-focus-drop:hover { color: var(--text); }

/* ---------- Sprungziele unter der festen Kopfzeile ----------
   Die Kopfzeile ist position:fixed. Ohne Reserve landet jedes #anker-Ziel
   genau darunter: Auf coaching.html verschwand die Zeile "Schritt 1 ·
   Kostenlos & unverbindlich" beim Sprung auf #buchen hinter dem Kopf.
   Gilt für Abschnitte und Überschriften, nicht für beliebige Elemente —
   sonst verschiebt die Regel auch Dinge, die niemand anspringt. */
section[id], article[id], h1[id], h2[id], h3[id], .cta-band[id], [id][data-anchor] {
  scroll-margin-top: calc(var(--header-h) + 14px);
}

/* ==========================================================================
   ÜBER FEMALEMETRIX (ueber.html) — editoriale Markenerzählung
   --------------------------------------------------------------------------
   Grundsatz: KEINE Kartenwüste. Die Seite besteht aus Typografie, Haarlinien
   und kontrolliertem Weißraum — dieselben Tokens wie überall (--hairline,
   --status-active, Space Grotesk / Inter / JetBrains Mono), nur anders
   komponiert. Jede Regel hängt unter .ub-page: keine dieser Zeilen kann eine
   andere Seite treffen.

   Dramaturgie: das große Gründer-Bild ist der Einstieg (.ub-open, Maße und
   Ausschnitt unverändert), darunter wechseln sich lange Erzählabschnitte und
   sehr kurze Aussagen ab. Der wiederkehrende typografische Griff ist
   „Setup grau (.set) → Auflösung weiß (.pay)".
   ========================================================================== */

/* ---- Rhythmus: drei Stufen statt überall 120px. Die Story muss verbunden
   bleiben; echte Luft bekommen nur Kapitelbruch und Höhepunkt. ---- */
.ub-page .ub-sec       { padding: clamp(56px, 7vw, 104px) 0; }
.ub-page .ub-sec-tight { padding: clamp(38px, 4.6vw, 64px) 0; }
.ub-page .ub-sec-air   { padding: clamp(76px, 10vw, 150px) 0; }
/* Der erste Textblock folgt dicht auf das Bild — der Übergang ist gesetzt,
   nicht geleert. */
.ub-page .ub-sec-lede  { padding-top: clamp(30px, 4vw, 54px); }

/* Ruhiger Flächenwechsel statt harter Kante — eine Stufe heller, oben und
   unten nur eine Haarlinie. */
.ub-page .ub-band {
  background: var(--card);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

/* ---- Satzspiegel: links ausgerichtete Erzählspalte im breiten Container.
   Daraus entsteht die editoriale Asymmetrie. Zentriert wird nur, wo ein
   Satz als Bühne steht (.is-center). ---- */
/* 760px: gemessen an der längsten H2-Zeile („Ich wollte eine bessere
   Entscheidung.", 36 Zeichen ≈ 8,6× die Schriftgröße = 741px bei 3rem).
   Darunter bräche sie in vier statt zwei Zeilen. */
.ub-page .ub-col { max-width: 760px; }
/* Umbruch nur dort, wo die Spalte breit genug ist, ihn zu tragen. */
.ub-page .ub-br-d { display: none; }
@media (min-width: 700px) { .ub-page .ub-br-d { display: inline; } }
.ub-page .ub-col.is-center { max-width: 860px; margin-left: auto; margin-right: auto; text-align: center; }
.ub-page .ub-col.is-center .eyebrow { justify-content: center; }
.ub-page .ub-col.is-center .eyebrow::before { display: none; }
.ub-page .ub-col + .ub-col { margin-top: clamp(20px, 2.8vw, 32px); }

/* --------------------------------------------------------------------------
   00 · EINSTIEGSBILD
   Das bestehende Porträt bleibt das erste dominante Element: gleiche Höhe,
   gleicher Ausschnitt (object-position 50% 12%) wie zuvor. Neu ist nur die
   Position — es steht unmittelbar unter der Kopfleiste, ohne Text davor.
   -------------------------------------------------------------------------- */
.ub-open { padding-top: var(--header-h); }
.ub-open-fig { margin: 0; position: relative; }
.ub-open-fig img {
  display: block; width: 100%;
  height: clamp(380px, 62vh, 680px);
  object-fit: cover; object-position: 50% 12%;
}
/* Nahtstelle statt Schnittkante: die untersten Prozent laufen in den
   Seitengrund. Das Motiv ist dort ohnehin fast schwarz — die Wirkung des
   Bildes bleibt unangetastet, nur der Übergang wird ruhig. */
.ub-open-fig::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 14%; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--bg-0));
}
.ub-open-cap {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; flex-wrap: wrap;
  padding-top: 14px; padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}
.ub-open-cap .k { font-size: 0.9rem; color: var(--text); }
.ub-open-cap .v {
  font-family: var(--font-body);
  font-weight: 600; font-size: 0.75rem;
  letter-spacing: 0.01em; color: var(--muted-2);
}

/* --------------------------------------------------------------------------
   Typografische Ebenen
   -------------------------------------------------------------------------- */
.ub-page .ub-h1,
.ub-page .ub-h2,
.ub-page .ub-say,
.ub-page .ub-say-xl,
.ub-page .ub-peak-h,
.ub-page .ub-final-h {
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: -0.035em; color: var(--text); margin: 0;
  text-wrap: balance;
}
/* Der wiederkehrende Griff: Aufbau in Grau, Auflösung in Weiß. */
.ub-page .set { color: var(--muted); }
.ub-page .pay { color: var(--text); }

/* Bemessung der H1 (Space Grotesk 700, -0.035em): die längste feste Zeile
   „Dein Körper ist kein" misst rund 8,6× die Schriftgröße. Bei 320px
   Gerätebreite stehen 272px Inhalt zur Verfügung — 8,6vw ergibt dort 27,5px
   und der Mindestwert 1.9rem (30,4px) füllt die Zeile zu 96 %. Sie bricht
   also auf keinem Gerät ungewollt um; „Motivationsproblem" trägt zusätzlich
   ein weiches Trennzeichen. */
.ub-page .ub-h1 { font-size: clamp(1.9rem, 8.6vw, 4.6rem); line-height: 1.02; }
.ub-page .ub-h2 { font-size: clamp(1.6rem, 5.2vw, 3rem); line-height: 1.07; letter-spacing: -0.03em; }
.ub-page .ub-say { font-size: clamp(1.5rem, 5vw, 2.8rem); line-height: 1.1; }
.ub-page .ub-say-xl { font-size: clamp(1.72rem, 6.2vw, 3.7rem); line-height: 1.05; }
.ub-page .ub-say, .ub-page .ub-say-xl { margin: clamp(10px, 1.6vw, 18px) 0; }
.ub-page .ub-say-sub {
  margin-top: clamp(14px, 2vw, 22px);
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.05rem, 2.4vw, 1.6rem);
  letter-spacing: -0.015em; color: var(--muted); line-height: 1.3;
}

/* Erzählprosa — ein Maß, das man am Stück liest. */
.ub-page .ub-prose p {
  color: var(--muted);
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  line-height: 1.68; max-width: 62ch;
  text-wrap: pretty;
}
.ub-page .ub-prose p + p { margin-top: 14px; }
.ub-page .ub-prose .ub-lead {
  color: var(--text); font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.5;
}
.ub-page .ub-emph { color: var(--text); font-weight: 500; }
.ub-page .ub-col.is-center .ub-prose p,
.ub-page .ub-col.is-center p { margin-left: auto; margin-right: auto; }
.ub-page .ub-prose a {
  color: var(--accent-2); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: rgba(250, 128, 114, 0.4);
}
.ub-page .ub-prose a:hover { text-decoration-color: var(--accent-2); }

/* Staccato-Zeilen: kurze Sätze als eigener Block, zusammengehalten von einer
   Haarlinie links. Kein Aufzählungspunkt — das sind Gedanken, keine Liste. */
.ub-page .ub-beats {
  margin-top: clamp(20px, 2.8vw, 32px);
  border-left: 1px solid var(--hairline);
  padding-left: clamp(16px, 2.2vw, 26px);
}
.ub-page .ub-beats p {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  line-height: 1.34; letter-spacing: -0.015em; color: var(--text);
  padding: 5px 0;
}
.ub-page .ub-beats-muted p { color: var(--muted); }

/* --------------------------------------------------------------------------
   03 · Vier Ausgangslagen — Zeilen, keine Karten.
   -------------------------------------------------------------------------- */
.ub-page .ub-cases {
  list-style: none; max-width: 900px;
  margin: clamp(24px, 3.2vw, 38px) 0;
  border-top: 1px solid var(--hairline);
}
.ub-page .ub-cases li {
  display: grid; grid-template-columns: 56px 1fr; gap: 14px;
  align-items: baseline; padding: 17px 0;
  border-bottom: 1px solid var(--hairline);
}
.ub-page .ub-cases .no {
  font-family: var(--font-body); font-weight: 600; font-size: 0.75rem;
  letter-spacing: 0.01em; color: var(--muted-2);
}
.ub-page .ub-cases p { margin: 0; font-size: clamp(0.98rem, 1.2vw, 1.08rem); line-height: 1.55; text-wrap: pretty; }
.ub-page .ub-cases .off { color: var(--muted-2); }
.ub-page .ub-cases b { color: var(--text); font-weight: 600; }

/* --------------------------------------------------------------------------
   04 · Gründer — typografisch. Das Porträt steht bereits oben; hier zählt
   die Stimme, kein zweites Motiv.
   -------------------------------------------------------------------------- */
.ub-page .ub-founder {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(22px, 4vw, 64px);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: clamp(26px, 3.6vw, 44px) 0;
}
.ub-page .ub-founder .nm {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.45rem, 3.2vw, 2.15rem);
  letter-spacing: -0.025em; line-height: 1.1; color: var(--text);
}
.ub-page .ub-founder .rl { margin-top: 6px; color: var(--muted); font-size: 0.98rem; }
.ub-page .ub-founder .mt {
  margin-top: 12px;
  font-family: var(--font-body);
  font-weight: 600; font-size: 0.75rem;
  letter-spacing: 0.01em; color: var(--muted-2);
}

/* --------------------------------------------------------------------------
   05 · Die zwölf Bereiche als Matrix — ein System, keine zwölf Karten.
   -------------------------------------------------------------------------- */
.ub-page .ub-matrix-key {
  margin: clamp(32px, 4.4vw, 56px) 0 14px;
  font-family: var(--font-body);
  font-weight: 600; font-size: 0.75rem;
  letter-spacing: 0.01em; color: var(--status-active);
}
.ub-page .ub-matrix {
  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr);
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.ub-page .ub-matrix li {
  display: flex; flex-direction: column; gap: 8px;
  min-height: 86px; padding: 15px 16px;
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
.ub-page .ub-matrix .no {
  font-family: var(--font-body); font-weight: 600; font-size: 0.75rem;
  letter-spacing: 0.01em; color: var(--muted-2);
}
.ub-page .ub-matrix .nm {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(0.88rem, 1.2vw, 1.04rem); line-height: 1.25;
  letter-spacing: -0.01em; color: var(--text);
  overflow-wrap: break-word; hyphens: auto;
}
.ub-page .ub-matrix-note {
  margin-top: 16px; max-width: 62ch;
  color: var(--muted-2); font-size: 0.9rem; line-height: 1.6;
}

/* Die drei Kernfragen — Zeilen mit Systemnummer, kein Kartendreiklang. */
.ub-page .ub-qs { margin-top: clamp(36px, 5vw, 68px); border-top: 1px solid var(--hairline); }
.ub-page .ub-qs .q {
  display: grid; grid-template-columns: 64px minmax(0, 280px) minmax(0, 1fr);
  gap: clamp(12px, 2.2vw, 32px); align-items: baseline;
  padding: clamp(18px, 2.4vw, 26px) 0;
  border-bottom: 1px solid var(--hairline);
}
.ub-page .ub-qs .no {
  font-family: var(--font-body); font-weight: 600; font-size: 0.75rem;
  letter-spacing: 0.01em; color: var(--status-active);
}
.ub-page .ub-qs h3 {
  margin: 0; font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem); letter-spacing: -0.015em; color: var(--text);
}
.ub-page .ub-qs p { margin: 0; color: var(--muted); font-size: clamp(0.95rem, 1.1vw, 1.02rem); line-height: 1.6; }

/* --------------------------------------------------------------------------
   06 · DER FEMALEMETRIX LOOP — Signature-Element. Desktop waagerecht, Mobil
   senkrecht. Bewusst so gebaut, dass er sich auf anderen Flächen (App,
   weitere Seiten) unverändert wiederverwenden lässt.
   -------------------------------------------------------------------------- */
.ub-page .ub-loop-title {
  display: flex; flex-wrap: wrap; gap: 0 clamp(12px, 1.6vw, 22px);
  margin: clamp(4px, 1vw, 10px) 0 clamp(32px, 4.2vw, 52px);
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3.3rem);
  line-height: 1.04; letter-spacing: -0.03em;
  text-transform: uppercase; color: var(--text);
}
/* VERIFY schließt den Kreis — der einzige farbige Wort im Signature-Block. */
.ub-page .ub-loop-title span:nth-child(4) { color: var(--status-active); }
.ub-page .ub-loop { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hairline); }
.ub-page .ub-loop .st {
  padding: clamp(18px, 2.2vw, 26px) clamp(14px, 1.6vw, 24px) clamp(22px, 2.6vw, 30px);
  border-left: 1px solid var(--hairline);
}
.ub-page .ub-loop .st:first-child { border-left: 0; padding-left: 0; }
.ub-page .ub-loop .no {
  font-family: var(--font-body); font-weight: 600; font-size: 0.75rem;
  letter-spacing: 0.01em; color: var(--status-active);
}
.ub-page .ub-loop h3 {
  margin: 10px 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--text);
}
.ub-page .ub-loop p { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.6; }
.ub-page .ub-loop-back {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-body);
  font-weight: 600; font-size: 0.75rem;
  letter-spacing: 0.01em; color: var(--status-active);
}

/* --------------------------------------------------------------------------
   07 · Die Kette vom Ziel zum System — eine durchgehende Leitung, keine
   acht Kästen.
   -------------------------------------------------------------------------- */
.ub-page .ub-chain { list-style: none; position: relative; max-width: 620px; margin: clamp(28px, 3.8vw, 46px) 0 0; }
.ub-page .ub-chain li {
  position: relative; display: grid; grid-template-columns: 58px 1fr;
  gap: 14px; align-items: center; padding: 13px 0;
}
.ub-page .ub-chain li::before {
  content: ""; position: absolute; left: 5px; top: 0; bottom: 0;
  width: 1px; background: var(--hairline);
}
.ub-page .ub-chain li:first-child::before { top: 50%; }
.ub-page .ub-chain li:last-child::before { bottom: 50%; }
.ub-page .ub-chain li::after {
  content: ""; position: absolute; left: 2px; top: 50%; margin-top: -3.5px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bg-0); border: 1px solid var(--muted-2);
}
.ub-page .ub-chain .no {
  padding-left: 24px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.75rem;
  letter-spacing: 0.01em; color: var(--muted-2);
}
.ub-page .ub-chain .nm {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1rem, 1.5vw, 1.22rem); letter-spacing: -0.015em; color: var(--text);
}
.ub-page .ub-chain .is-last .nm { color: var(--status-active); }
.ub-page .ub-chain .is-last::after { background: var(--status-active); border-color: var(--status-active); }

/* --------------------------------------------------------------------------
   08 · Haltung — fünf Sätze als Typografie, danach die Abgrenzung leise.
   -------------------------------------------------------------------------- */
.ub-page .ub-stance { list-style: none; margin: clamp(26px, 3.4vw, 44px) 0; border-top: 1px solid var(--hairline); }
.ub-page .ub-stance li {
  padding: clamp(13px, 1.7vw, 19px) 0;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.22rem, 3vw, 2rem);
  line-height: 1.22; letter-spacing: -0.025em; color: var(--muted);
  text-wrap: balance;
}
.ub-page .ub-stance b { color: var(--text); font-weight: 700; }
.ub-page .ub-nots {
  list-style: none; display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px clamp(24px, 3vw, 48px); max-width: 900px;
  margin: clamp(18px, 2.4vw, 28px) 0 clamp(22px, 3vw, 32px);
}
.ub-page .ub-nots li { position: relative; padding-left: 22px; color: var(--muted-2); font-size: 0.95rem; line-height: 1.55; }
.ub-page .ub-nots li::before { content: "—"; position: absolute; left: 0; }

/* --------------------------------------------------------------------------
   10 · Der Höhepunkt — die dunkelste Fläche der Seite, nur Schrift.
   -------------------------------------------------------------------------- */
.ub-page .ub-peak {
  padding: clamp(80px, 11vw, 165px) 0;
  background: #05070b;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.ub-page .ub-peak-h { font-size: clamp(1.9rem, 8vw, 4.2rem); line-height: 1.03; }
.ub-page .ub-peak-list {
  display: flex; flex-direction: column; gap: 6px;
  max-width: 760px; margin: clamp(24px, 3.2vw, 40px) auto; text-align: center;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.15rem, 2.4vw, 1.7rem);
  letter-spacing: -0.02em; line-height: 1.25; color: var(--text);
}
/* Alle vier Punkte gleich stark: der letzte ist der wichtigste, er darf
   nicht als Nachsatz gesetzt sein — nur etwas ruhiger im Duktus. */
.ub-page .ub-peak-list span:last-child { font-weight: 500; }
.ub-page .ub-peak-sign {
  margin-top: clamp(30px, 4.2vw, 54px); text-align: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.45rem, 4.2vw, 2.5rem);
  letter-spacing: -0.025em; color: var(--status-active);
}

/* --------------------------------------------------------------------------
   11 · Grenzen — ruhig und seriös, kein Warnkasten.
   -------------------------------------------------------------------------- */
.ub-page .ub-limits { max-width: 820px; border-top: 1px solid var(--hairline); padding-top: clamp(24px, 3.2vw, 40px); }
.ub-page .ub-limits .ub-prose p { font-size: 0.98rem; }
.ub-page .ub-limits-link { margin-top: 14px; }
.ub-page .ub-limits-link a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 0.95rem; color: var(--accent-2);
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: rgba(250, 128, 114, 0.35);
}
.ub-page .ub-limits-link a::after { content: "→"; }
.ub-page .ub-limits-link a:hover { text-decoration-color: var(--accent-2); }

/* --------------------------------------------------------------------------
   12 · Der eine Aufruf. Ein Hauptbutton, ein leiser Zweitlink — kein
   Funnel-Doppel.
   -------------------------------------------------------------------------- */
.ub-page .ub-final { padding: clamp(62px, 8.5vw, 126px) 0 clamp(76px, 10vw, 146px); }
.ub-page .ub-final-h { font-size: clamp(2.1rem, 7.6vw, 4.3rem); line-height: 1.02; }
.ub-page .ub-final-sub {
  margin-top: 12px;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.08rem, 2.2vw, 1.5rem);
  letter-spacing: -0.015em; color: var(--text);
}
.ub-page .ub-final-copy { margin: 16px auto 0; max-width: 56ch; color: var(--muted); font-size: 1rem; line-height: 1.65; }
.ub-page .ub-final-cta { margin-top: clamp(24px, 3vw, 36px); }
.ub-page .ub-final-cta .btn { min-height: 54px; }
.ub-page .ub-final-note { margin-top: 12px; font-size: 0.85rem; color: var(--muted-2); }
.ub-page .ub-final-alt { margin-top: 4px; }
.ub-page .ub-final-alt a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 0.92rem; color: var(--muted);
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--line-strong);
}
.ub-page .ub-final-alt a:hover { color: var(--text); text-decoration-color: var(--muted); }

/* ---- Tastatur: die Seite trägt keine eigenen Widgets, aber jeder Link und
   der Aufruf müssen sichtbar fokussierbar sein. ---- */
.ub-page a:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 6px; }

/* --------------------------------------------------------------------------
   Breakpoints — geprüft ab 320px.
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .ub-page .ub-matrix { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .ub-page .ub-loop { grid-template-columns: repeat(2, 1fr); }
  .ub-page .ub-loop .st:nth-child(odd) { border-left: 0; padding-left: 0; }
  .ub-page .ub-loop .st:nth-child(n+3) { border-top: 1px solid var(--hairline); }
}
@media (max-width: 820px) {
  .ub-page .ub-founder { grid-template-columns: 1fr; gap: 18px; }
  /* Frage und Antwort untereinander: drei Spalten wären hier nur noch
     Spaltenreste. */
  .ub-page .ub-qs .q { grid-template-columns: 44px 1fr; }
  .ub-page .ub-qs p { grid-column: 2; margin-top: 8px; }
}
@media (max-width: 760px) {
  /* Der Loop-Titel steht senkrecht — vier Wörter, vier Zeilen, groß. */
  .ub-page .ub-loop-title { display: block; font-size: clamp(2.1rem, 9.2vw, 3rem); }
  .ub-page .ub-loop-title span { display: block; }
}
@media (max-width: 720px) {
  .ub-page .ub-matrix { grid-template-columns: repeat(2, 1fr); }
  .ub-page .ub-matrix li { padding: 13px 12px; min-height: 78px; }
  .ub-page .ub-nots { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* Auf dem Telefon rücken die Abschnitte enger zusammen: die Erzählung darf
     nicht in Weißraum zerfallen. */
  .ub-page .ub-sec { padding: 52px 0; }
  .ub-page .ub-sec-air { padding: 68px 0; }
  .ub-page .ub-peak { padding: 74px 0; }
  .ub-page .ub-prose p { max-width: none; }
}
@media (max-width: 600px) {
  .ub-page .ub-loop { grid-template-columns: 1fr; }
  .ub-page .ub-loop .st { border-left: 0; padding-left: 0; border-top: 1px solid var(--hairline); }
  .ub-page .ub-loop .st:first-child { border-top: 0; }
}
@media (max-width: 560px) {
  .ub-page .ub-cases li { grid-template-columns: 34px 1fr; gap: 10px; }
  .ub-page .ub-chain li { grid-template-columns: 46px 1fr; gap: 10px; }
  .ub-page .ub-chain .no { padding-left: 20px; }
}
@media (max-width: 520px) {
  /* Der Aufruf nimmt die volle Breite und darf umbrechen — abgeschnittene
     Beschriftungen gibt es nicht. */
  .ub-page .ub-final-cta .btn { width: 100%; padding-left: 18px; padding-right: 18px; white-space: normal; }
}
@media (max-width: 380px) {
  .ub-page .ub-matrix li { padding: 12px 10px; }
  .ub-page .ub-open-cap { gap: 4px 12px; }
}
@media (max-width: 340px) {
  /* Ab 320px passt die Beschriftung einzeilig nur ohne Pfeil und eine
     Spur kleiner — ein zweizeiliger Button neben einem Pfeil sieht aus
     wie ein Fehler. */
  .ub-page .ub-final-cta .btn { font-size: 0.92rem; padding-left: 14px; padding-right: 14px; }
  .ub-page .ub-final-cta .btn-arrow::after { content: none; }
}

/* Bewegung ist Zierrat: ohne JavaScript und bei reduzierter Bewegung steht
   die Seite vollständig — das regelt bereits .reveal global. Hier bleibt
   nichts, was nur animiert sichtbar wäre. */

/* Breite Datentabellen auf schmalen Displays: lieber seitlich schieben als
   Wörter mitten durchbrechen („Alltagsbewegu/ng"). Der Bereich ist
   fokussierbar, damit er auch per Tastatur scrollbar bleibt. */
.mm-tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mm-tscroll:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -2px; }
@media (max-width: 640px) {
  .mm-tscroll .data-table { min-width: 560px; }
  /* Spaltenköpfe sind kurze Etiketten — sie dürfen nie umbrechen. */
  .mm-tscroll .data-table th { white-space: nowrap; }
}

/* ==========================================================================
   ALTERS- UND HINWEIS-SCHRANKE (js/age-gate.js)
   Liegt auf der Anabolen Matrix und dem Stack Builder. Die Schicht deckt die
   Seite vollständig ab; der Inhalt bleibt im DOM, damit Suchmaschinen und
   Besucher dieselbe Seite bekommen — nur eben nicht in derselben Sekunde.

   .mm-gate-locked steht schon während des Parsens auf <html>: ohne diese
   Regel blitzt der Inhalt eine Zehntelsekunde auf, bevor die Schicht steht.
   ========================================================================== */
html.mm-gate-locked { overflow: hidden; }
html.mm-gate-locked body > *:not(.mm-gate) { visibility: hidden; }

.mm-gate {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 18px;
  background: var(--card);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  overflow-y: auto;
}
.mm-gate-box {
  width: 100%; max-width: 560px;
  background: var(--card-solid);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  padding: 28px 26px 22px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}
.mm-gate-k {
  display: inline-block; font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-2);
  border: 1px solid var(--accent-line); border-radius: 999px;
  padding: 4px 10px;
}
.mm-gate-box h2 { font-size: 1.42rem; line-height: 1.2; margin: 14px 0 10px; }
.mm-gate-box p { color: var(--muted); font-size: 0.97rem; margin: 0; }
.mm-gate-list { list-style: none; margin: 16px 0 0; padding: 0; }
.mm-gate-list li {
  position: relative; padding-left: 20px; margin-top: 8px;
  color: var(--text); font-size: 0.93rem;
}
.mm-gate-list li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 8px; height: 1px; background: var(--accent-2);
}
.mm-gate-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.mm-gate-cta .btn { flex: 1 1 auto; text-align: center; }
.mm-gate-fuss { margin-top: 16px !important; font-size: 0.82rem; color: var(--muted-2); }

@media (max-width: 480px) {
  .mm-gate { padding: 16px 12px; align-items: flex-start; }
  .mm-gate-box { padding: 22px 18px 18px; }
  .mm-gate-box h2 { font-size: 1.24rem; }
  .mm-gate-cta .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   DUNKLE DARSTELLUNG
   --------------------------------------------------------------------------
   Die Seite hat zwei Gründe. Der helle ist der Ausgangszustand und steht
   vollständig im :root ganz oben; hier unten werden ausschließlich WERTE
   überschrieben — keine Regel, keine Komponente, keine neue Klasse.

   Warum am Dateiende: style.css führt drei :root-Blöcke (Tokens, eine
   Media-Query für die Kopfhöhe, das Visual System). Ein Dunkel-Block weiter
   oben würde von jedem späteren :root wieder überschrieben. Wer hier etwas
   ergänzt, ergänzt es unterhalb aller Definitionen — sonst wirkt es nicht.

   Drei Zustände, nicht zwei:
     :root                          hell (oben, der Ausgangszustand)
     @media (prefers-color-scheme)  folgt dem Gerät, solange niemand
                                    ausdrücklich HELL gewählt hat
     :root[data-theme="dark"]       ausdrückliche Wahl schlägt das Gerät

   Die Media-Query ist mit :not([data-theme="light"]) abgesichert: ohne das
   könnte ein Besucher auf einem dunkel gestellten Gerät nicht zurück auf
   hell schalten.

   REGEL FÜR ALLE KÜNFTIGEN FARBEN: Eine Farbe, die es NUR hier unten gibt,
   existiert im hellen Stand nicht und fällt dort auf ihren Erbwert zurück —
   das ist die klassische Ursache für „Text unsichtbar". Jede Farbe gehört
   zuerst nach oben ins helle :root und wird hier nur neu belegt.
   Abgesichert durch tools-dev/tests/visual-system.test.js.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-0: #000000;
    --bg-1: #131315;
    --bg-2: #1C1C1E;
    --card: #1C1C1E;
    --card-2: #232326;
    --card-solid: #1C1C1E;
    --line: #2A2A2C;
    --line-strong: #3A3A3C;
    --text: #F5F5F7;
    /* Auf Schwarz tragen hellere Graustufen: #B0B0B6 erreicht 9,8:1,
       #8E8E93 erreicht 6,3:1 — beide über der Schwelle für Fließtext. */
    --muted: #B0B0B6;
    --muted-2: #8E8E93;
    /* Helles Lachs. #C0483C wäre auf Schwarz zu dumpf (3,9:1). */
    --accent: #FF8F7A;
    --accent-2: #DFA0BE;
    --accent-soft: rgba(255, 143, 122, 0.16);
    --accent-line: rgba(255, 143, 122, 0.38);
    --green: #30D158;
    --green-soft: rgba(48, 209, 88, 0.16);
    --amber: #FF9F0A;
    --amber-soft: rgba(255, 159, 10, 0.16);
    --red: #FF453A;
    --red-soft: rgba(255, 69, 58, 0.14);
    --sand: #B0B0B6;
    --sand-2: #8E8E93;
    --sand-soft: rgba(216, 205, 189, 0.08);
    --sand-line: rgba(216, 205, 189, 0.20);
    /* Auf Schwarz darf das Marken-Lachs wieder bis ans Ende laufen: als
       Textfüllung erreicht #FA8072 dort 8,4:1. */
    --grad: linear-gradient(135deg, #FF8F7A 0%, #FA8072 100%);
    --shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    --shadow-hover: 0 12px 34px rgba(0, 0, 0, 0.66);
    /* Auflagen drehen: aus Abdunkeln wird Aufhellen. */
    --wash-1: rgba(255, 255, 255, 0.05);
    --wash-2: rgba(255, 255, 255, 0.08);
    --wash-3: rgba(255, 255, 255, 0.12);
    --wash-4: rgba(255, 255, 255, 0.18);
    --wash-5: rgba(255, 255, 255, 0.26);
    --wash-6: rgba(255, 255, 255, 0.36);
    --scrim-rgb: 0, 0, 0;
    --chrome: rgba(22, 22, 23, 0.72);
    --chrome-stark: rgba(22, 22, 23, 0.86);
    --chrome-bar: rgba(22, 22, 23, 0.94);
    /* Visual-System-Ebene (zweiter :root weiter oben) */
    --surface: rgba(255, 255, 255, 0.04);
    --hairline: rgba(255, 255, 255, 0.11);
  }
}

:root[data-theme="dark"] {
  --bg-0: #000000;
  --bg-1: #131315;
  --bg-2: #1C1C1E;
  --card: #1C1C1E;
  --card-2: #232326;
  --card-solid: #1C1C1E;
  --line: #2A2A2C;
  --line-strong: #3A3A3C;
  --text: #F5F5F7;
  --muted: #B0B0B6;
  --muted-2: #8E8E93;
  --accent: #FF8F7A;
  --accent-2: #DFA0BE;
  --accent-soft: rgba(255, 143, 122, 0.16);
  --accent-line: rgba(255, 143, 122, 0.38);
  --green: #30D158;
  --green-soft: rgba(48, 209, 88, 0.16);
  --amber: #FF9F0A;
  --amber-soft: rgba(255, 159, 10, 0.16);
  --red: #FF453A;
  --red-soft: rgba(255, 69, 58, 0.14);
  --sand: #B0B0B6;
  --sand-2: #8E8E93;
  --sand-soft: rgba(216, 205, 189, 0.08);
  --sand-line: rgba(216, 205, 189, 0.20);
  --grad: linear-gradient(135deg, #FF8F7A 0%, #FA8072 100%);
  --shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  --shadow-hover: 0 12px 34px rgba(0, 0, 0, 0.66);
  --wash-1: rgba(255, 255, 255, 0.05);
  --wash-2: rgba(255, 255, 255, 0.08);
  --wash-3: rgba(255, 255, 255, 0.12);
  --wash-4: rgba(255, 255, 255, 0.18);
  --wash-5: rgba(255, 255, 255, 0.26);
  --wash-6: rgba(255, 255, 255, 0.36);
  --scrim-rgb: 0, 0, 0;
  --chrome: rgba(22, 22, 23, 0.72);
  --chrome-stark: rgba(22, 22, 23, 0.86);
  --chrome-bar: rgba(22, 22, 23, 0.94);
  --surface: rgba(255, 255, 255, 0.04);
  --hairline: rgba(255, 255, 255, 0.11);
}

/* --------------------------------------------------------------------------
   SCHWARZES PRODUKTBAND IM DUNKELN
   Auf hellem Grund ist .section-dark Interpunktion: ein schwarzes Band
   zwischen weißen. Im Dunkeln liegt Schwarz auf Schwarz und die Betonung
   verschwindet — dort kehrt sich die Rolle um: das Band wird zur ERHOBENEN
   Fläche, die Nachbarbänder bleiben der Grund. Die Textfarben darin sind
   ohnehin fest hell gesetzt und stimmen in beiden Darstellungen.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .section-dark { background: #1C1C1E; --card: #2A2A2D; --card-2: #313134; --bg-1: #2A2A2D; --bg-2: #313134; }
}
:root[data-theme="dark"] .section-dark { background: #1C1C1E; --card: #2A2A2D; --card-2: #313134; --bg-1: #2A2A2D; --bg-2: #313134; }

/* ==========================================================================
   VORSCHAU-BAUSTEINE — die Komposition aus der Design-Studie.

   Die Tokenschicht und die Komponenten (Pillen, Kacheln, Bänder) standen
   bereits. Was fehlte, war die KOMPOSITION: Apple baut Seiten nicht aus
   gleich großen Karten in einem Raster, sondern aus wenigen, unterschiedlich
   großen Flächen — eine trägt das Hauptargument, die anderen ordnen sich
   unter. Genau das leisten die Klassen hier.

   Präfix mm- gegen Kollisionen: .row, .price und .band gibt es im Bestand
   bereits in anderer Bedeutung.
   ========================================================================== */

/* ---- BENTO — unterschiedlich große Kacheln in EINEM Raster --------------
   Vier Spalten. Eine Kachel ohne Zusatz belegt zwei davon (halbe Breite),
   .span4 die ganze, .span1 ein Viertel. Daraus entsteht die Hierarchie:
   Das Wichtigste bekommt Fläche, nicht eine Auszeichnung. */
.mm-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.mm-tile {
  background: var(--card);
  border: 0;
  border-radius: var(--radius-lg);
  padding: clamp(26px, 3vw, 40px);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
  grid-column: span 2;
  min-height: 260px;
  transition: box-shadow 0.25s, transform 0.25s;
  position: relative;
  overflow: hidden;
  color: var(--text);
}
a.mm-tile:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.mm-tile.span4 { grid-column: span 4; }
.mm-tile.span1 { grid-column: span 1; min-height: 200px; padding: 26px; }
.mm-tile p { color: var(--muted); margin: 0; }
.mm-tile .mm-kicker {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em;
  color: var(--muted-2); display: block;
}
/* Der Chevron-Link sitzt unten — die Kacheln einer Reihe schließen dadurch
   bündig ab, auch wenn ihre Texte unterschiedlich lang sind. */
.mm-tile .link-arrow { margin-top: auto; }
/* EINE schwarze Kachel trägt das Hauptargument. Sie belegt die Tokens für
   sich neu, damit alles darin stimmt — dieselbe Technik wie .section-dark. */
.mm-tile.onblack {
  --text: #F5F5F7; --muted: #A1A1A6; --muted-2: #86868B;
  --accent: #FF8F7A; --line: #2A2A2C; --hairline: rgba(255,255,255,0.14);
  background: #1D1D1F;
  box-shadow: none;
}
@media (max-width: 900px) {
  .mm-bento { grid-template-columns: repeat(2, 1fr); }
  .mm-tile, .mm-tile.span4 { grid-column: span 2; }
  .mm-tile.span1 { grid-column: span 1; }
}
@media (max-width: 560px) {
  .mm-bento { grid-template-columns: 1fr; gap: 14px; }
  .mm-tile, .mm-tile.span4, .mm-tile.span1 { grid-column: span 1; min-height: 0; border-radius: 22px; }
}

/* ---- SCHRITTREIHE — Haarlinien statt vier Karten ------------------------
   Vier Karten nebeneinander behaupten vier gleichwertige Dinge. Eine Reihe
   mit senkrechten Trennern behauptet einen Ablauf — und genau das ist es. */
.mm-steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.mm-step { padding: 26px 22px 30px; border-right: 1px solid var(--line); }
.mm-step:last-child { border-right: 0; }
.mm-step h3 { font-size: 1.1875rem; margin: 0 0 8px; }
.mm-step p { color: var(--muted); font-size: 0.9375rem; margin: 0; }
.mm-step-n {
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted-2);
  letter-spacing: 0.04em; display: block; margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 860px) {
  .mm-steps { grid-template-columns: 1fr; }
  .mm-step { border-right: 0; border-bottom: 1px solid var(--line); }
  .mm-step:last-child { border-bottom: 0; }
}

/* ---- VERGLEICHSZEILEN — Begriff links, Erklärung rechts, nur Haarlinien -- */
.mm-rows { border-top: 1px solid var(--line); }
.mm-rows > div {
  display: grid; grid-template-columns: minmax(180px, 1fr) 2fr; gap: 20px;
  padding: 16px 0; border-bottom: 1px solid var(--line); align-items: baseline;
}
.mm-rows b { font-weight: 600; font-size: 1.0625rem; }
.mm-rows span { color: var(--muted); font-size: 0.9375rem; }
@media (max-width: 600px) { .mm-rows > div { grid-template-columns: 1fr; gap: 4px; } }

/* ---- HINWEISFLÄCHE — ruhige graue Fläche, kein Warnkasten --------------- */
.mm-notice {
  background: var(--bg-2); border-radius: var(--radius);
  padding: 18px 22px; color: var(--muted); font-size: 0.9375rem;
}
.mm-notice p { margin: 0; color: inherit; }

/* ---- LOKALE PRODUKTNAVIGATION — Apples zweite Leiste --------------------
   Unter der globalen Leiste, klebend: links der Produktname, rechts die
   Handlung. Sie beantwortet „wo bin ich" ohne die Hauptnavigation zu
   vergrößern — und hält die Handlung auf der ganzen Seitenlänge erreichbar. */
.mm-lnav {
  position: sticky; top: var(--header-h); z-index: 70;
  background: var(--chrome);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.mm-lnav-in {
  max-width: 1180px; margin: 0 auto; padding: 0 24px;
  height: 52px; display: flex; align-items: center; gap: 18px;
}
.mm-lnav-name { font-size: 1.3125rem; font-weight: 600; letter-spacing: -0.016em; margin-right: auto; }
.mm-lnav-links { display: flex; gap: 18px; align-items: center; }
.mm-lnav-links a { font-size: 0.75rem; color: var(--muted); }
.mm-lnav-links a:hover { color: var(--text); }
@media (max-width: 760px) { .mm-lnav-links { display: none; } }

/* ---- WERKZEUGRASTER — viele kleine Flächen, gleiche Größe --------------- */
.mm-toolgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; }
.mm-tool {
  background: var(--card); border-radius: var(--radius-sm); padding: 18px 20px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 5px;
  transition: transform 0.2s, box-shadow 0.2s; color: var(--text);
}
.mm-tool:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.mm-tool b { font-size: 0.9375rem; font-weight: 600; }
.mm-tool span { font-size: 0.8125rem; color: var(--muted-2); }

/* ---- ZENTRIERTER VOLLBILD-HERO ----------------------------------------
   Apples Produkteinstieg: ein Motiv über die volle Breite, der Text mittig
   darauf. Die Farben stehen fest hell — das Motiv ist immer dunkel, in
   beiden Darstellungen. */
.mm-hero { position: relative; overflow: hidden; margin-top: var(--header-h); background: #000; }
.mm-hero-photo { width: 100%; height: clamp(420px, 72vh, 720px); object-fit: cover; object-position: center 26%; display: block; }
/* Das Motiv trägt weiterhin die Klasse os14-hero-video, damit das
   Seiten-Script es findet und abspielt. Deren alte Regeln stammen aber vom
   zweispaltigen Hero: dort lag das Video ABSOLUT hinter dem Text und war bis
   zum Start unsichtbar (opacity: 0). Im Vollbild-Hero ist das Motiv das
   Element, das die Höhe aufspannt — absolut positioniert fiele die Sektion
   auf null zusammen, und unsichtbar bliebe der Hero schwarz, falls das
   Script nicht läuft. Beides wird hier zurückgeholt; die Einblendung
   übernimmt das Posterbild. */
.mm-hero .os14-hero-video { position: static; inset: auto; opacity: 1; transition: none; }
.mm-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.22) 42%, rgba(0,0,0,.88) 100%);
}
.mm-hero-copy {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  gap: 16px; padding: 0 24px; color: #F5F5F7;
}
.mm-hero-copy h1 { color: #F5F5F7; max-width: 18ch; }
.mm-hero-copy .lead { color: #E8E8ED; max-width: 40ch; margin: 0; }
.mm-hero-copy .fine { color: #C7C7CC; }
.mm-hero-copy .link-arrow { color: #FF8F7A; }
.mm-hero-copy .text-grad {
  background: linear-gradient(135deg, #FF8F7A 0%, #FA8072 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.mm-ctas { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; justify-content: center; }

/* ---- Feinabstimmung Startseite -----------------------------------------
   Der Hero-Textblock ist EINE Einheit: die Microcopy gehört an den Button,
   nicht in einen eigenen Abschnitt darunter. .hero-ctas trug aus dem alten
   zweispaltigen Hero noch 30px Abstand nach oben; im zentrierten Block
   regelt der gap des Elternteils den Rhythmus. */
.mm-hero-copy .hero-ctas { margin: 6px 0 0; }
.mm-hero-copy .os14-ctanote { margin-top: 2px; }
.mm-hero-copy .os14-trust { margin-top: 0; }
.mm-hero-copy .os14-sysline { margin-bottom: 0; }

/* Das Showcase ist ein Hochformat. Über die volle Textbreite gezogen wird
   daraus eine Wand; die Vorschau hielt es bei gut 460px. */
.section .trf-show { max-width: 480px; width: 100%; }

/* ---- Telefon: zwei Stellen, die bei 390px und darunter klemmen ----------
   Auf dem Gerät geprüft (390px im echten Rahmen, nicht im Headless-Fenster:
   Chrome legt ohne Geräte-Emulation mit rund 500px Mindestbreite aus und
   täuscht dabei einen Überlauf vor, den es nicht gibt). */
@media (max-width: 440px) {
  /* Der Zielumschalter trug zwei Beschriftungen nebeneinander, die beide
     umbrachen — aus zwei Zeilen wurden vier und der Regler wuchs auf die
     halbe Bildschirmhöhe. Untereinander bleibt jede Beschriftung einzeilig. */
  .trf-show .goals { grid-template-columns: 1fr; }
  .trf-show .goal { padding: 11px 13px; }
}
@media (max-width: 520px) {
  /* Produktname und Handlung teilen sich 360px. Der Name gibt nach, nicht
     der Knopf — der Knopf ist der Grund, warum die Leiste mitscrollt. */
  .mm-lnav-in { padding: 0 16px; gap: 12px; }
  .mm-lnav-name { font-size: 1.0625rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mm-lnav-in .btn-sm { flex: 0 0 auto; }
}

/* ---- TELEFON: das Beispielbild gehört in den ersten Blick ---------------
   Gemessen auf 390x844: Der Hero war 608px hoch (72vh), der Text darin belegte
   435px — 170px standen als Leerraum. Die Bildoberkante lag dadurch bei rund
   730px und damit hinter der Falz. Wer die Startseite öffnete, las die
   Behauptung und musste scrollen, um den Beleg zu sehen.

   Die Höhe wird deshalb nicht kleiner gerechnet, sondern gar nicht mehr
   vorgegeben: Der Textblock steht im Fluss, das Motiv liegt als Ebene
   darunter und dehnt sich auf dessen Höhe. Damit ist der Hero auf jedem
   Gerät exakt so hoch wie sein Inhalt — kein Leerraum, kein Überlauf auf
   kleinen Geräten. Die Schriftgrade bleiben unangetastet.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .mm-hero { display: grid; }
  .mm-hero-photo,
  .mm-hero-scrim,
  .mm-hero-copy { grid-area: 1 / 1; }
  .mm-hero-photo { height: 100%; min-height: 0; }

  /* Die Reihenfolge der Ebenen wird hier AUSGESCHRIEBEN — Motiv, Scrim, Text.
     Im Vollbild-Hero ergab sie sich von selbst: der Text lag absolut und nach
     dem Scrim im Dokument, also darüber. Sobald der Text in den Fluss rückt,
     kippt genau das: ein absolut gesetzter Scrim malt über jeden nicht
     positionierten Nachbarn, egal wo er im Dokument steht. Der Text stand
     damit vollständig hinter dem Scrim — auf dem Telefon war die Startseite
     nur noch ein Bild. Auf iOS kommt hinzu, dass Safari das <video> in eine
     eigene Compositing-Ebene hebt; ohne z-index landet auch das Motiv oben.

     Deshalb bekommt jede Ebene ihre Zahl. Der Textblock bleibt dabei im Fluss
     (position: relative verschiebt nichts, inset wird zurückgenommen) — der
     Inhalt bestimmt weiterhin die Höhe des Heros. */
  .mm-hero-photo { position: relative; z-index: 0; }
  .mm-hero-scrim { z-index: 1; }
  .mm-hero-copy {
    position: relative; inset: auto; z-index: 2;
    padding: 30px 22px 14px;
    gap: 10px;
  }
  /* Die Microcopy gehört an den Button, nicht in eigene Abschnitte: beide
     Zeilen rücken zu einem Block zusammen. */
  .mm-hero-copy .hero-ctas { margin-top: 2px; }
  .mm-hero-copy .os14-ctanote { margin-top: 4px; }
  .mm-hero-copy .os14-trust { margin-top: 0; }

  /* Das Band mit dem Beispielbild rückt direkt an den Hero. Gezielt über den
     Nachbarschafts-Selektor, damit kein anderes Band schmaler wird.
     Die Kennzeichnung braucht hier keinen Abstand mehr — sie liegt auf dem
     Bild statt darüber und steht damit gar nicht mehr im Fluss. */
  .mm-hero + .section { padding-top: 10px; }
}

/* Kurze Bildschirme (iPhone SE und Verwandte, ~667px hoch): dort liegt die
   Bildoberkante mit den Werten oben genau auf der Falz, sobald Safari seine
   Leisten einblendet. Die Abstände geben noch einmal nach — die Schriftgrade
   ausdrücklich nicht, die Headline bleibt die Headline. */
@media (max-width: 560px) and (max-height: 700px) {
  .mm-hero-copy { padding: 20px 22px 10px; gap: 8px; }
  .mm-hero + .section { padding-top: 8px; }
}