/* Aus dem Designsystem übernommen (Vereins-Repo, Branding/Designsystem/tokens.css). Nicht hier ändern, sondern dort; danach scripts/designsystem_uebernehmen.py ausführen. */
/* Friedenspraxis — generated from tokens.json */
:root, [data-theme="light"] {
  --navy: #1a2e44; /* Basisfarbe. Große randlose Bänder (Hero, Zitat, Haltung, Footer), Text auf Hell (13,8:1 auf `surface`, 12,8:1 auf `ground`). Element 1 „Wahrnehmen“. */
  --navy-800: #20364f; /* Leicht aufgehellte Navy-Fläche innerhalb eines Navy-Bands (Abstufung, keine Schrift). */
  --navy-700: #2a4260; /* Trennlinien auf Navy (Haltungsliste, Footer-Rechtszeile). */
  --navy-900: #122234; /* Tiefste Fläche: schwebende Bedienelemente über Navy. */
  --pink: #ed1b93; /* Markenfarbe & Haltung: Kernsätze, Claim-Zeile, Zitatzeichen, Mitmachen-Band, Element 4 „Kooperieren“. Als Schrift nur groß (ab 24 px oder 19 px fett): 3,4:1 auf `navy`, 3,7:1 auf `ground`. Weiße Schrift darauf nur fett/groß (4,05:1). Nie Navy auf Pink. */
  --pink-ink: #c8127a; /* Pink als kleine Schrift auf Hell: Eyebrows, Rollen, Tags (5,5:1 auf `surface`, 5,1:1 auf `ground`, 4,7:1 auf `pink-50`). */
  --pink-deep: #c8127a; /* Pinke Fläche unter kleiner weißer Schrift: Button „Mitmachen“, pinke Bereichskarten (Weiß 5,5:1). */
  --pink-50: #fde7f3; /* Hintergrund von Tags/Etiketten mit `pink-ink`-Schrift. */
  --pink-200: #f7b3d8; /* Leichtes Pink für Rahmen und harten Schatten der Info-Karten („Wie wir arbeiten“), aktiver Header-Button. Deko, keine Schrift. */
  --green: #1fffa4; /* Handlung & Hervorhebung: Primär-Button (mit `navy`-Schrift, 10,5:1), Bildrahmen/-schatten, Eyebrows und hervorgehobener Text auf `navy` (10,5:1, auch Fließtext), Element 3 „Kommunizieren“. Nie als Schrift auf Hell (1,2:1). */
  --green-hover: #5cffbc; /* Hover-Zustand des grünen Primär-Buttons. */
  --green-ink: #00875a; /* Grün als Schrift auf Weiß, falls nötig (4,55:1 auf `surface`). Auf `ground` nur 4,2:1, dort nur ab 19 px fett. */
  --cyan: #29f5ff; /* Vierte Farbe des 4er-Systems: Element 2 „Regulieren“ (CI-Kandidat, 01.10.2026). Nur als Fläche/Pille mit `navy`-Schrift (10,3:1); nie als Schrift auf Hell. */
  --ground: #f4f6f8; /* Seitenhintergrund zwischen den Navy-Bändern. */
  --surface: #ffffff; /* Karten, Verben-Pillen, Kästen auf `ground`. */
  --ink: #1a2e44; /* Text auf `ground` und `surface` (= `navy`). */
  --muted: #52627a; /* Sekundärtext, Lead und Kartentext auf `ground` (5,7:1) und `surface` (6,2:1). */
  --line: #d9e0e8; /* Haarlinien und Trenner auf Hell. Trennt nur dekorativ (1,2:1), nie als Rahmen eines Eingabefelds. */
  --on-dark: #ffffff; /* Text auf `navy` (13,8:1) und auf `pink-deep` (5,5:1). */
  --on-dark-muted: #b9c5d3; /* Sekundärtext auf `navy`: Lead, Haltungstexte, Footer, Quellenangaben (7,9:1). */
  --hard-s-green: 5px 5px 0 #1fffa4; /* Weißer Button im Mitmachen-Band, Pille „Kommunizieren“. */
  --hard-s-pink-200: 5px 5px 0 #ed1b93; /* Aktiver Header-Button „Mitmachen“. */
  --hard-m-pink-200: 10px 10px 0 #f7b3d8; /* Info-Karten unter „Wie wir arbeiten“ (Rand 3px `pink-200`). */
  --hard-m-pink: 10px 10px 0 #ed1b93; /* Karte „Was wir nicht tun“ (Rand 3px `pink`). */
  --hard-m-green: 10px 10px 0 #1fffa4; /* Karte „Bei uns gilt“, Teamfotos (Rand 3px `green`). */
  --nav-scrolled: 0 10px 30px -18px rgba(26,46,68,0.45); /* Einzige weiche Schattierung: Header nach dem Scrollen, mobiles Menü. */
}
:root {
  --shadow-s: 5px; /* Versatz des kleinen harten Schattens (Pillen, Buttons). */
  --shadow-m: 10px; /* Versatz des großen harten Schattens (Karten, Fotos). */
  --offset: 18px; /* Versatz versetzter Bildrahmen. */
  --frame: 20px; /* Rahmenabstand großer Panels zum Rand, fluid clamp(8px, 1.6vw, 20px). Seit 01.10. laufen Bänder randlos; nur noch für eingerückte Panels. */
  --gutter: 40px; /* Seitlicher Innenabstand des Inhalts, fluid clamp(16px, 4vw, 40px). */
  --grid-gap: 40px; /* Abstand zwischen Karten im Raster, fluid clamp(28px, 4vw, 40px). */
  --card-pad: 40px; /* Innenabstand großer Karten, fluid clamp(24px, 4vw, 40px); Info-Karten 30px. */
  --head-gap: 56px; /* Abstand Abschnittskopf zu Inhalt, fluid clamp(32px, 5vw, 56px). */
  --section-y: 112px; /* Vertikaler Abschnittsabstand, fluid clamp(64px, 9vw, 112px). */
  --max: 1180px; /* Maximale Inhaltsbreite (`.wrap`). */
  --r-sm: 8px; /* Kleine Elemente: Skip-Link, Fokusflächen. */
  --r-md: 18px; /* Fotos (Teamporträts), Hinweiskästen. */
  --r-lg: 32px; /* Karten, Bereichskästen; kleinster Radius der Baukasten-Schichten (fluid bis `r-xl`). */
  --r-xl: 56px; /* Große eingerückte Panels wie im Beispiel „Farbverteilung“; größter Radius der Baukasten-Schichten. */
  --r-pill: 999px; /* Buttons, Verben-Pillen, Tags, innerste Pille des Baukastens. */
  --font-display: "Saira", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --text-hero: italic 700 104px/0.92 var(--font-display); /* Claim im Hero, Versalien. Fluid: clamp(48px, 7.6vw, 104px). Zweite Hälfte des Claims in `pink`. */
  --text-page-title: italic 700 80px/0.95 var(--font-display); /* H1 der Unterseiten, Versalien, max. 16ch. Fluid: clamp(40px, 6vw, 80px). */
  --text-h2: italic 700 58px/1.02 var(--font-display); /* Abschnittsüberschrift, Versalien. Fluid: clamp(34px, 5vw, 58px). */
  --text-quote: italic 700 46px/1.15 var(--font-display); /* Zitat in Versalien, max. 24ch, Zeichen „ “ in `pink`. Fluid: clamp(28px, 3.6vw, 46px). */
  --text-statement: italic 700 42px/1.1 var(--font-display); /* Großer Einleitungssatz („Worum es geht“), Versalien, Schluss in `pink`. Fluid: clamp(28px, 3.4vw, 42px). */
  --text-card-title: italic 700 30px/1.02 var(--font-display); /* Titel großer Karten (Was wir nicht tun / Bei uns gilt / Wirkung), Versalien. */
  --text-h3: italic 700 26px/1.02 var(--font-display); /* Titel der vier Elemente, Teamnamen, Rahmenkästen, Versalien. */
  --text-h3-small: 700 22px/1.02 var(--font-display); /* Kleine Zwischenüberschrift (Standard-h3), auch kursiv in Versalien für Bereichskarten. */
  --text-verb-pill: italic 700 19px/1 var(--font-display); /* Die vier Verben als Pillen (Formprinzip „Schatten“), Großschreibung am Wortanfang. */
  --text-button: 700 18px/1 var(--font-display); /* Beschriftung aller Buttons und Textlinks mit Pfeil. Im Header 16px. */
  --text-eyebrow: 700 13px/1 var(--font-display); /* Dachzeile über h2, Versalien. `pink-ink` auf Hell, `green` auf Navy. Tags: 12px, 0.12em. */
  --text-lead: 400 22px/1.6 var(--font-body); /* Einleitungstext unter h1/h2, max. 62ch, `muted` auf Hell, `on-dark-muted` oder Weiß auf Navy. Fluid: clamp(19px, 2vw, 22px). */
  --text-body-l: 400 20px/1.6 var(--font-body); /* Betonter Fließtext neben Statements und nach Zitaten. */
  --text-body: 400 18px/1.6 var(--font-body); /* Standard-Fließtext, max. 68ch. */
  --text-body-s: 400 17px/1.6 var(--font-body); /* Text in Karten, Elementen und Haltungsliste. */
  --text-label: 600 16px/1.3 var(--font-body); /* Navigation, Quellenangaben, Footer-Listen. Rollen fett (700) in `pink-ink`. */
  --text-small: 400 14px/1.5 var(--font-body); /* Rechtszeile, Hinweise. Untergrenze für Text. */
}