/*
 * Design-Tokens — Design-System "Die Unabhängigen-ABAE" (Stand 2026-08,
 * Quelle: Nextcloud "Design System/Design system für Abae.eu/tokens/").
 * Portiert 1:1 aus colors.css / typography.css / spacing.css / shape.css.
 *
 * WICHTIG: Token-Namen werden vom Customizer (inc/customizer.php +
 * assets/js/customize-preview.js) zur Laufzeit überschrieben — Änderungen
 * hier immer dort mitziehen.
 */
:root {
  /* ── Markenfarben ─────────────────────────────────────────────── */
  --abae-blau: #36557d;
  --abae-magenta: #e50077;
  --abae-gruen: #92e321;   /* nur im Logo-Winkel, nie in der UI */
  --abae-gelb: #ffe600;    /* nur im Logo-Winkel, nie in der UI */

  /* ── Blau-Skala ───────────────────────────────────────────────── */
  --blau-900: #23384f;
  --blau-700: #36557d;
  --blau-400: #7ea0bf;
  --blau-200: #bbd0e4;
  --blau-100: #edf1f6;

  /* ── Magenta-Skala ────────────────────────────────────────────── */
  --magenta-700: #b8005e;
  --magenta-500: #e50077;
  --magenta-200: #f5b9d6;
  --magenta-100: #ffe0ef;

  /* ── Neutrale (kühl, aufs Blau abgestimmt) ────────────────────── */
  --neutral-0: #ffffff;
  --neutral-50: #fbfcfd;
  --neutral-100: #f2f5f8;
  --neutral-200: #e4e9ef;
  --neutral-300: #dde3e9;
  --neutral-400: #c3cbd4;
  --neutral-500: #a6b3c0;
  --neutral-600: #7c8b99;
  --neutral-700: #52627a;

  /* ── Text-Rollen ──────────────────────────────────────────────── */
  --text-headline: var(--abae-blau);
  --text-body-color: var(--neutral-700);
  --text-muted: var(--neutral-600);
  --text-faint: var(--neutral-500);
  --text-on-dark: var(--neutral-0);
  --text-on-dark-muted: #dce6f0;
  --text-signal: var(--abae-magenta);

  /* ── Flächen ──────────────────────────────────────────────────── */
  --surface-page: var(--neutral-0);
  --surface-quiet: var(--blau-100);
  --surface-card: var(--neutral-0);
  --surface-invers: var(--abae-blau);
  --surface-signal: var(--abae-magenta);
  --surface-input: var(--neutral-50);
  --surface-platzhalter: repeating-linear-gradient(135deg, var(--neutral-200) 0 10px, var(--neutral-100) 10px 20px);

  /* ── Ränder ───────────────────────────────────────────────────── */
  --border-default: var(--neutral-300);
  --border-strong: var(--neutral-400);
  --border-hairline: var(--neutral-200);
  --border-signal: var(--magenta-200);
  --border-on-dark: rgba(255, 255, 255, 0.45);

  /* ── Links ────────────────────────────────────────────────────── */
  --link-default: var(--abae-magenta);
  --link-hover: var(--magenta-700);

  /* Nur für "So ja / So nicht"-Boxen (Bildsprache) */
  --ja-gruen: #5b9e33;
  --ja-rand: #c7e8b6;

  /* ── Schriftfamilien ──────────────────────────────────────────── */
  --font-display: 'Edo SZ', cursive;                       /* Slogans, Sektionstitel */
  --font-ui: 'Titillium', 'Source Sans 3', system-ui, sans-serif; /* alles Gelesene + UI */
  --font-plakat: 'Titillium', var(--font-ui);              /* Störer, große Zahlen */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Schriftgrößen ────────────────────────────────────────────── */
  --text-display-xl: 64px;
  --text-display-l: 46px;
  --text-display-m: 38px;
  --text-display-s: 30px;
  --text-h1: 48px;
  --text-h2: 40px;
  --text-h3: 32px;
  --text-h4: 22px;
  /* Basis 18px statt 17px: Titillium läuft schmaler als Source Sans 3 und
     liest sich bei gleicher Punktgröße kleiner. Die abgeleiteten Größen
     folgen der Formel im Customizer (fs+2 / fs-1 / fs-2) — beide Seiten
     müssen übereinstimmen, sonst überschreibt der Inline-Block die Datei. */
  --text-lead: 21px;
  --text-body-l: 20px;
  --text-body: 18px;
  --text-body-s: 17px;
  --text-caption: 16px;
  --text-label: 13px;
  --text-badge: 11px;

  /* ── Gewichte ─────────────────────────────────────────────────── */
  --weight-thin: 200;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  /* 700 statt 800: Titillium ist die Hausschrift und wird vom Kunden nur bis
     Bold (700) geliefert — ein 800er Schnitt existiert nicht. Der Token-Name
     bleibt, damit die sieben Aufrufstellen unverändert bleiben. */
  --weight-black: 700;

  /* ── Zeilenhöhen / Laufweiten ─────────────────────────────────── */
  --leading-display: 1.05;
  --leading-headline: 1.15;
  --leading-title: 1.3;
  --leading-body: 1.6;
  --leading-roomy: 1.7;
  --tracking-headline: -0.02em;
  --tracking-label: 0.12em;
  --tracking-badge: 0.08em;

  /* ── Abstände (4er-Raster) ────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 26px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 52px;
  --space-10: 64px;

  --gutter-seite: var(--space-8);        /* 40px Seitenrand Desktop */
  --gutter-seite-mobil: var(--space-5);  /* 20px Seitenrand mobil */
  --abschnitt-y: var(--space-9);         /* 52px Sektionsabstand */
  --raster-gap: 18px;                    /* Karten-Raster */
  --stack-gap: var(--space-3);
  --inhalt-max: 660px;                   /* Lesebreite */
  --seite-max: 1320px;                   /* Seitenbreite */
  --logo-hoehe-max: 77px;                /* Obergrenze der fluiden Logo-Höhe */

  /* ── Form ─────────────────────────────────────────────────────── */
  --radius-badge: 3px;
  --radius-control: 4px;
  --radius-card: 6px;
  --radius-pill: 999px;
  --radius-rund: 50%;
  --border-width: 1px;
  --border-width-control: 1.5px;
  --border-akzent: 3px;

  /* ── Tiefe & Overlays (flach — Schatten nur Störer + Dialog) ──── */
  --shadow-none: none;
  --shadow-stoerer: 0 14px 34px rgba(24, 42, 32, 0.35);
  --shadow-dialog: 0 24px 60px rgba(31, 45, 62, 0.30);
  --overlay-dialog: rgba(31, 45, 62, 0.45);
  /* Hero-Verlauf — bewusste Abweichung vom Design-System (2026-08-08).
     Dessen tokens/shape.css setzt einen linearen Verlauf 0.88 → 0 über die
     volle Höhe. Der deckt aber auch die Bildmitte ab, wo im Gruppenfoto die
     Gesichter stehen. Jetzt steil: kräftig unten, wo der Slogan liegt, und ab
     52 % Höhe ganz weg. Gemessen am Gruppenbild der Startseite:
     Gesichtszone 96 → 126 von 255, Slogan (46px, weiß) 3.75:1 und Unterzeile
     (20px) 7.62:1 — beide weiter über WCAG AA (3.0:1 bzw. 4.5:1).
     Nicht weiter aufhellen: bei 0.80/0.45/44 % fällt der Slogan auf 2.63:1.
     Auf ≤780px ist der Verlauf ohnehin aus, dort steht der Text unter dem
     Bild (siehe .hero-verlauf in components.css). */
  --overlay-bild: linear-gradient(
    to top,
    rgba(24, 32, 42, 0.85) 0%,
    rgba(24, 32, 42, 0.55) 24%,
    rgba(24, 32, 42, 0) 52%
  );

  /* ── Bewegung ─────────────────────────────────────────────────── */
  --transition-schnell: 120ms ease-out;
  --transition-standard: 180ms ease-out;
}