/*
 * Selbst ausgelieferte Schriften (ADR 037 Abschnitt 1, ADR 038 Abschnitt 2): kein Google-Fonts-
 * Einbinden zur Laufzeit. Dateien liegen unter /assets/fonts/, Lizenz: SIL Open Font License 1.1
 * (siehe /assets/fonts/OFL-*.txt). Quelle: offizielles Google-Fonts-Repository (github.com/google/fonts),
 * Commit-Stand vom Abrufdatum 10.09.2026, Latin + Latin-Extended (deckt DE/EN/FR/IT/ES/TR-Diakritika).
 * Barlow Condensed = Headlines/Versalien/große Zahlen; Work Sans = Fließtext (ADR 037 Abschnitt 1).
 */

@font-face {
  font-family: "Barlow Condensed";
  src: url("/assets/fonts/BarlowCondensed-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("/assets/fonts/BarlowCondensed-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("/assets/fonts/BarlowCondensed-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url("/assets/fonts/WorkSans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url("/assets/fonts/WorkSans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url("/assets/fonts/WorkSans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


/*
 * Kalibris Design-System — Tokens
 * Richtung B „Sportlich-energetisch" (ADR 037), zwei Ebenen: energetic (Regelfall) + quiet.
 * Farbwerte für Terrakotta/Gold sind gegen WCAG AA gemessen (Auflage B4) — Messmethode und
 * Ergebnisse stehen in docs/design-system/README.md, Abschnitt "Kontrast (B4)". Nicht ohne
 * erneute Messung verändern.
 *
 * Dieses File ist die gemeinsame Grundlage für Website UND App (ADR 037: "Ein Design-System
 * für beide"). Der `entwickler` übernimmt es 1:1 für public/styles.css (siehe Change-Note).
 */

:root {
  /* ---- Grundfarben (energetische Ebene, Regelfall) ---- */
  --color-creme: #FBF3EA;            /* Grundfläche */
  --color-surface: #FFFFFF;          /* Karten, angehobene Flächen */
  --color-surface-2: #F5ECE0;        /* zweite, etwas dunklere Creme-Fläche für Abwechslung */

  --color-terracotta: #E2632F;       /* primäre CTAs (großflächig/groß), aktive Zustände, große Zahlen.
                                         NICHT für Fließtext/Button-Beschriftung normaler Größe auf Creme —
                                         siehe --color-terracotta-text (B4) */
  --color-terracotta-text: #B54A1E;  /* abgedunkelte Terrakotta-Variante für Text auf Creme/Weiß UND für
                                         Button-Flächen mit weißer Beschriftung. Kontrast gemessen, siehe README */
  --color-terracotta-dark: #8F3B16;  /* Hover/Active-Zustand von --color-terracotta-text */

  --color-gold: #F0A73C;             /* Energie-Akzent: Flächen, Hervorhebungen, Fortschritt.
                                         NUR als Fläche mit dunkler Schrift (--color-ink) oder rein dekorativ
                                         (Rahmen, Icon, Balken) verwenden — als Textfarbe auf Creme scheitert
                                         der Kontrast deutlich (1,86:1, siehe README) */
  --color-gold-light: #FBE4BE;       /* helle Gold-Fläche für dezente Hervorhebungen */

  --color-pine: #2F6B52;             /* Bestätigung / "im Zielbereich" — unverändert aus public/styles.css
                                         übernommen (ADR 037, offener Punkt zum Pine-Wert). AA auf Creme
                                         besteht ohne Abdunkeln (5,7:1) */
  --color-pine-dark: #24543F;
  --color-pine-light: #E4EEE8;

  /* ---- Neutrale/Schrift-Farben ---- */
  --color-ink: #1E2B26;              /* Haupttextfarbe, aus App-Bestand übernommen */
  --color-ink-muted: #63756E;        /* gedämpfter Text — NUR auf --color-surface (Weiß), nicht auf Creme
                                         (dort 4,44:1, knapp unter AA) */
  --color-ink-muted-on-creme: #566860; /* eigens abgedunkelte Variante für gedämpften Text direkt auf Creme
                                         (5,39:1) — B4-Ergebnis, siehe README */
  --color-ink-faint: #93A39C;        /* nur für rein dekorative/nicht-textuelle Zwecke, kein Fließtext */
  --color-line: #DCE3DF;             /* Trennlinien, Rahmen */
  --color-line-on-creme: #E4D7C7;    /* Trennlinie mit wärmerem Ton für Creme-Flächen */

  --color-focus: #1B4D6B;            /* Fokus-Ring, bewusst nicht terrakotta/gold (Unterscheidbarkeit von
                                         CTA-Farben), AA-Kontrast auf Creme und Weiß geprüft (siehe README) */

  /* ---- Zurückhaltende Ebene ("quiet", Auflage B2) ----
     Gilt verbindlich für: Einwilligung + Widerruf, Rechtstexte (Impressum/AGB/Datenschutz),
     Kontolöschung + deren Bestätigung, Fehler-/Sicherheitsmeldungen (ADR 037 Abschnitt 5).
     Keine Gold-Akzente, keine Terrakotta-Vollflächen, keine farbig unterlegten Schlüsselwörter. */
  --quiet-bg: #F4F1EC;               /* neutrales, warmes Grau-Creme statt Vollfarbe */
  --quiet-surface: #FFFFFF;
  --quiet-ink: #202826;
  --quiet-ink-muted: #57615E;        /* auf --quiet-bg gemessen, siehe README (5,1:1) */
  --quiet-line: #DAD5CB;
  --quiet-accent: #4B5A56;           /* einzige "Akzentfarbe" der ruhigen Ebene: gedecktes Graugrün, für
                                         Fokuszustände und dezente Hervorhebung, kein Gold/Terrakotta */
  --quiet-btn-bg: #FFFFFF;           /* Optionen (z. B. "Einwilligen"/"Ablehnen") gleich gewichtet:
                                         beide als Outline-Buttons ohne Flächenfarbe, siehe components.css */
  --quiet-btn-border: #57615E;

  /* ---- Typografie ---- */
  --font-display: "Barlow Condensed", "Oswald", "Arial Narrow", sans-serif; /* Headlines, große Zahlen,
                                         Versalien. Selbst ausgeliefert (fonts.css), keine Google-Fonts-CDN */
  --font-text: "Work Sans", "Segoe UI", system-ui, sans-serif; /* Fließtext, Labels, Rechtstexte */
  --font-mono: "Work Sans", system-ui, monospace; /* für Zahlen (kcal, Datum) reicht Work-Sans-Tabellenziffern;
                                         kein separates Mono-Font-Ladung nötig */

  /* Skala: rem-basiert, Mindestgrößen für Condensed-Versalien-Headlines (Auflage B3) */
  --fs-body: 1rem;            /* 16px */
  --fs-small: 0.875rem;       /* 14px */
  --fs-lead: 1.125rem;        /* 18px */
  --fs-h4: 1.25rem;           /* 20px */
  --fs-h3: 1.625rem;          /* 26px */
  --fs-h2: 2.125rem;          /* 34px */
  --fs-h1: clamp(2rem, 5vw + 1rem, 3.5rem); /* 32px–56px, wächst mit Viewport statt fester Breite */
  --fs-hero-min: 2rem;        /* Mindestgröße Hero-Headline (B3), auch bei langen FR/TR-Fassungen */

  --lh-tight: 1.08;           /* Condensed-Headlines */
  --lh-normal: 1.55;          /* Fließtext, Lesbarkeit vor Dichte */
  --ls-caps: 0.02em;          /* Versalien-Tracking, dezent — Condensed-Schriften brauchen KEIN
                                  zusätzliches Letter-Spacing wie normale Breitschriften */
  --ls-label: 0.08em;         /* Tertiär-Labels in Versalien (kleine Beschriftungen) */

  /* ---- Abstände (8px-Basis, konsistent für Website + App) ---- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4.5rem;    /* 72px */
  --space-9: 6.5rem;    /* 104px */

  /* ---- Radien & Schatten (ADR 037: große Radien, weiche Schatten) ---- */
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 20px;
  --radius-pill: 999px;
  --shadow-soft: 0 8px 24px -12px rgba(36, 25, 15, 0.22);
  --shadow-softer: 0 4px 14px -8px rgba(36, 25, 15, 0.16);

  /* ---- Layout ---- */
  --content-max: 72rem;      /* 1152px */
  --content-narrow: 46rem;   /* 736px, für Fließtext-/Rechtsseiten */
  --border-focus-width: 3px;
}

/* Quiet-Ebene als Attribut-Scope, nicht als globaler Zustand — Einwilligung, Rechtstexte,
   Kontolöschung und Fehlermeldungen bekommen data-tone="quiet" auf einem umschließenden Element. */
[data-tone="quiet"] {
  --tone-bg: var(--quiet-bg);
  --tone-surface: var(--quiet-surface);
  --tone-ink: var(--quiet-ink);
  --tone-ink-muted: var(--quiet-ink-muted);
  --tone-line: var(--quiet-line);
  --tone-accent: var(--quiet-accent);
}

:root,
[data-tone="energetic"] {
  --tone-bg: var(--color-creme);
  --tone-surface: var(--color-surface);
  --tone-ink: var(--color-ink);
  --tone-ink-muted: var(--color-ink-muted-on-creme);
  --tone-line: var(--color-line-on-creme);
  --tone-accent: var(--color-terracotta-text);
}


/* Kalibris Design-System — Basiselemente, Reset, Barrierefreiheit-Grundlagen */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--color-creme);
  color: var(--color-ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  min-width: 320px; /* niemals width — Inhalte dürfen wachsen, nie abgeschnitten werden (Auflage B3) */
}

img, svg { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-4);
  letter-spacing: var(--ls-caps);
  text-wrap: balance;
  overflow-wrap: break-word; /* nie abschneiden, nie "…" (Auflage B3) */
}

h1 { font-size: var(--fs-h1); text-transform: uppercase; min-height: 1lh; }
h2 { font-size: var(--fs-h2); text-transform: uppercase; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: 600; text-transform: none; }

/* Rechtstexte/quiet-Ebene: keine Versalien-Überschriften — sachlicher Satz statt Plakat */
[data-tone="quiet"] h1,
[data-tone="quiet"] h2 { text-transform: none; letter-spacing: normal; }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--space-4); padding-left: 1.25em; }
li + li { margin-top: var(--space-2); }

.lead { font-size: var(--fs-lead); color: var(--tone-ink-muted, var(--color-ink-muted-on-creme)); }
small, .fs-small { font-size: var(--fs-small); }

/* ---- Fokus-Sichtbarkeit (Auflage B4 / WCAG 2.4.7) ---- */
:focus { outline: none; }
:focus-visible {
  outline: var(--border-focus-width) solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Sprungmarke für Tastatur-/Screenreader-Nutzung */
.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -100px;
  background: var(--color-ink);
  color: var(--color-creme);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-s);
  z-index: 1000;
  transition: top 0.15s ease;
}
.skip-link:focus { top: var(--space-3); }

/* ---- Layout-Hilfsklassen ---- */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
@media (min-width: 640px) { .container { padding-inline: var(--space-6); } }

.container-narrow { max-width: var(--content-narrow); }

.stack > * + * { margin-top: var(--space-5); }
.stack-tight > * + * { margin-top: var(--space-3); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0; padding: 0; margin: -1px;
}

[hidden] { display: none !important; }

/* Mono-gesetzte Zahlen (kcal, Datum, Gewicht) — sprachunabhängig stabil (ADR 037 Abschnitt 4) */
.figure {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------------------------------------------------------------------------
   Utility-Klassen — ersetzen die vormals 126 Inline-style-Attribute im
   ausgelieferten dist/ (Security-Gate 10.09.2026, Befund F-2026-015):
   style-src 'self' in der geplanten CSP (ADR 041) erlaubt Inline-style-
   Attribute nicht (style-src-attr fällt ohne eigene Direktive auf style-src
   zurück, MDN/W3C CSP3). Variante A aus dem Gate-Bericht: wiederkehrende
   Layout-/Abstands-/Farbmuster als Klassen statt als Attribut. Bewusst als
   kleine, komponierbare Utilities (mehrere Klassen kombinierbar) statt
   Einzelfall-Selektoren je Element — hält die Liste kurz und wiederverwendbar,
   statt bei jedem neuen Absatz eine neue Regel zu brauchen.
   --------------------------------------------------------------------------- */
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.ml-2 { margin-left: var(--space-2); }

.text-muted { color: var(--color-ink-muted-on-creme); }
.text-bold { font-weight: 600; }
.size-h3 { font-size: var(--fs-h3); }
.size-body { font-size: var(--fs-body); }
.subheading { font-size: var(--fs-h4); text-transform: none; }
.lead-inline { font-family: var(--font-text); font-size: var(--fs-lead); margin-bottom: var(--space-4); }

.bg-surface-2 { background: var(--color-surface-2); }

.row-split { display: flex; justify-content: space-between; }
.row-split-line {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-line-on-creme);
  padding-bottom: var(--space-2);
}


/* Kalibris Design-System — Komponenten
   Priorisierungsregel (ADR 037 Abschnitt 3): genau ein Primär-Weg je Bildschirm, Sekundär bleibt
   vollständig sichtbar, aber ruhiger; Tertiär ohne visuelles Gewicht. */

/* =================== Buttons =================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 9rem;             /* min-width statt width — Text darf wachsen (Auflage B3) */
  width: max-content;
  max-width: 100%;
  padding: 0.85em 1.6em;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-lead);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  white-space: normal;         /* nie abschneiden, kein nowrap+ellipsis (Auflage B3) */
  line-height: 1.2;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.btn:active { transform: translateY(1px); }

/* Primär — großer, farbiger CTA. Genau einer je Bildschirm. */
.btn-primary {
  background: var(--color-terracotta-text); /* AA-geprüfte, abgedunkelte Terrakotta (siehe tokens.css) */
  color: #FFFFFF;
}
.btn-primary:hover { background: var(--color-terracotta-dark); }

/* Sekundär — Outline, kleiner gewichtet, aber vollständig sichtbar. */
.btn-secondary {
  background: transparent;
  border-color: var(--color-terracotta-text);
  color: var(--color-terracotta-text);
  font-size: var(--fs-body);
}
.btn-secondary:hover { background: var(--color-gold-light); }

/* Tertiär — kleine, umrandete Pill ohne CTA-Gewicht (z. B. "Anmelden" im Nav). */
.btn-tertiary {
  min-width: auto;
  padding: 0.5em 1.1em;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-line-on-creme);
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-text);
  font-weight: 500;
  font-size: var(--fs-small);
  text-transform: none;
  letter-spacing: normal;
}
.btn-tertiary:hover { border-color: var(--color-terracotta-text); color: var(--color-terracotta-text); }

/* Quiet-Ebene: zwei gleichwertige Optionen, kein optischer Vorentscheid (Auflage B2) */
[data-tone="quiet"] .btn-quiet {
  min-width: 12rem;
  padding: 0.85em 1.6em;
  border-radius: var(--radius-m);
  border: 2px solid var(--quiet-accent);
  background: var(--quiet-btn-bg);
  color: var(--quiet-ink);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-body);
  text-transform: none;
  letter-spacing: normal;
}
[data-tone="quiet"] .btn-quiet:hover { background: var(--quiet-bg); }
/* Bewusst: keine .btn-quiet-primary/-secondary-Variante — beide Optionen (z. B. "Einwilligung
   erteilen" / "Nicht einwilligen") erhalten identisches Styling. */

/* =================== Kopfzeile / Navigation =================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--color-creme) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-line-on-creme);
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover { color: var(--color-terracotta-text); }

.nav-links {
  display: none;
  align-items: center;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  text-decoration: none;
  font-weight: 500;
  font-size: var(--fs-small);
  color: var(--color-ink);
  padding: var(--space-1) 0;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { border-bottom-color: var(--color-terracotta-text); }

.nav-actions { display: flex; align-items: center; gap: var(--space-3); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-s);
  border: 1.5px solid var(--color-line-on-creme);
  background: transparent;
  cursor: pointer;
}
.nav-toggle svg { width: 1.4rem; height: 1.4rem; }

.nav-mobile {
  display: none;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-top: 1px solid var(--color-line-on-creme);
  background: var(--color-creme);
}
.nav-mobile a {
  display: block;
  padding: var(--space-3) var(--space-2);
  text-decoration: none;
  color: var(--color-ink);
  font-weight: 500;
  border-radius: var(--radius-s);
}
.nav-mobile a:hover, .nav-mobile a:focus-visible { background: var(--color-surface-2); }
body[data-nav-open="true"] .nav-mobile { display: flex; }

@media (min-width: 860px) {
  .nav-toggle { display: none; }
  .nav-links { display: flex; }
  .nav-mobile { display: none !important; }
}

/* =================== Hero =================== */

.hero {
  padding-block: var(--space-8) var(--space-7);
}
.hero-grid {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-8); }
  /* bewusst asymmetrisch (58/42), kein perfekt zentrierter 50/50-Hero */
}
.hero h1 { font-size: var(--fs-h1); min-height: 0; }
.hero-visual {
  background: var(--color-surface);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-soft);
  padding: var(--space-6);
  border: 1px solid var(--color-line-on-creme);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.hero-actions .link-quiet { font-family: var(--font-text); text-transform: none; letter-spacing: normal; }

.link-quiet {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--color-ink);
  font-weight: 500;
}
.link-quiet:hover { color: var(--color-terracotta-text); }

/* =================== Sections & Cards =================== */

section { padding-block: var(--space-8); }
section.tight { padding-block: var(--space-7); }
.section-eyebrow {
  display: inline-block;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--color-terracotta-text);
  margin-bottom: var(--space-2);
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-line-on-creme);
  border-radius: var(--radius-l);
  padding: var(--space-6);
}

.grid { display: grid; gap: var(--space-5); }
.grid-3 { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
}

.step-card .step-index {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  color: var(--color-gold);
  -webkit-text-stroke: 1.5px var(--color-terracotta-text);
  margin-bottom: var(--space-3);
}

/* =================== Pricing =================== */

.price-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line-on-creme);
  border-radius: var(--radius-l);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.price-card.is-highlighted { border-color: var(--color-terracotta-text); box-shadow: var(--shadow-softer); }
.price-tier-name {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--fs-h3);
}
.price-amount {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
}
.price-amount .unit { font-size: var(--fs-body); font-family: var(--font-text); font-weight: 500; color: var(--color-ink-muted-on-creme); }
.price-pending {
  display: inline-block;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--color-ink-muted-on-creme);
  background: var(--color-surface-2);
  border: 1px solid var(--color-line-on-creme);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
}
.price-features { list-style: none; margin: 0; padding: 0; }
.price-features li {
  padding-left: 1.6em;
  position: relative;
}
.price-features li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 0.5em; height: 0.5em;
  border-radius: 2px;
  background: var(--color-terracotta-text);
}
.price-features li + li { margin-top: var(--space-3); }

/* =================== Badges =================== */

.badge-example {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-text);
  font-weight: 700;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: #FFFFFF;
  background: var(--color-ink);
  border-radius: var(--radius-s);
  padding: 0.3em 0.7em;
}

.badge-planned {
  display: inline-flex;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--color-pine-dark);
  background: var(--color-pine-light);
  border-radius: var(--radius-pill);
  padding: 0.25em 0.9em;
}

.example-frame {
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid var(--color-line-on-creme);
}
.example-frame .badge-example { position: absolute; top: var(--space-3); left: var(--space-3); }

/* =================== Footer =================== */

.site-footer {
  border-top: 1px solid var(--color-line-on-creme);
  padding-block: var(--space-7);
  background: var(--color-surface-2);
}
.footer-grid {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 1.3fr repeat(3, 1fr); }
}
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li + li { margin-top: var(--space-2); }
.footer-links a { text-decoration: none; color: var(--color-ink); }
.footer-links a:hover { color: var(--color-terracotta-text); }
.footer-heading {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--color-ink-muted-on-creme);
  margin-bottom: var(--space-3);
}
.footer-medical-disclaimer {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line-on-creme);
  font-size: var(--fs-small);
  color: var(--color-ink-muted-on-creme);
}
.footer-meta { margin-top: var(--space-4); font-size: var(--fs-small); color: var(--color-ink-muted-on-creme); }

/* =================== Legal / quiet content pages =================== */

[data-tone="quiet"] {
  background: var(--quiet-bg);
}
[data-tone="quiet"] .legal-page {
  background: var(--quiet-surface);
  border: 1px solid var(--quiet-line);
  border-radius: var(--radius-l);
  padding: var(--space-7) var(--space-6);
}
[data-tone="quiet"] .legal-meta {
  font-size: var(--fs-small);
  color: var(--quiet-ink-muted);
  margin-bottom: var(--space-5);
}
.draft-notice {
  display: block;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--quiet-ink);
  background: var(--color-gold-light);
  border: 1px solid #E3B876;
  border-radius: var(--radius-s);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
}
[data-tone="quiet"] h2 { font-size: var(--fs-h4); margin-top: var(--space-7); }
[data-tone="quiet"] h2:first-of-type { margin-top: 0; }
[data-tone="quiet"] table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; font-size: var(--fs-small); }
[data-tone="quiet"] th, [data-tone="quiet"] td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--quiet-line); vertical-align: top; }
[data-tone="quiet"] th { font-weight: 600; }

/* =================== Utility: skip target focus ring off page bg =================== */
main:focus-visible { outline: none; }

/* =================== Kontobereich-Vorlage (Referenzkomponenten für die App, W4) =================== */
/* Diese Klassen sind Teil der Design-System-Lieferung für den entwickler-Subagenten (ADR 038).
   Sie werden hier demonstriert (docs/design-system), nicht als App-Code ausgeliefert. */
.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--quiet-line);
}
.account-row:last-child { border-bottom: none; }
.account-row-label { font-weight: 600; color: var(--quiet-ink); }
.account-row-value { color: var(--quiet-ink-muted); text-align: right; }
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--fs-small);
  font-weight: 600;
  padding: 0.25em 0.8em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--quiet-line);
}
.status-pill.is-active { color: var(--color-pine-dark); border-color: var(--color-pine); background: var(--color-pine-light); }
.status-pill.is-pending { color: #7A5A1E; border-color: #E3B876; background: var(--color-gold-light); }
.status-pill.is-coming-soon { color: var(--quiet-ink-muted); background: var(--quiet-bg); }

/* =================== Seitenspezifische Klassen (Ablösung von Inline-style, F-2026-015) =================== */
/* Reset der Nav-Link-Liste — vorher ein Inline-style-Attribut direkt am <ul> in layout.js. */
.nav-links-inner { display: flex; align-items: center; gap: inherit; list-style: none; margin: 0; padding: 0; }

/* Footer-Wordmark, kleiner als der Header-Wordmark, sonst identische Klasse .wordmark. */
.footer-wordmark { font-size: 1.25rem; }

/* Ausblick-/Roadmap-Karte: Titel+Text links, Tag-Badge rechts, umbrechend. */
.outlook-card {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: flex-start;
}
.outlook-card-text { flex: 1; min-width: 16rem; }