/* ASSISTUS – Design-Tokens (Fassung 4)
   Rachids Vorgaben vom 05.11.2026: heller Grund wie bei power-people (Weiß und Hellgrau im Wechsel, nur ein
   dunkles Band), nur Logo-Blau und Grautöne, klare runde Schrift (Montserrat), weiche Bögen zwischen Abschnitten.
   Bleiben: Würfel aus Fotos im Hero, Regionskarte. Kontraste prüft scripts/kontrast.mjs. */

:root {
  /* ---------- Farben: Logo-Blau in Abstufungen, dazu neutrale Grautöne ---------- */
  --farbe-blau-900: #0f2a3d;     /* Fuß */
  --farbe-blau-800: #15374f;     /* Logo-Farbe: Überschriften, Knöpfe, dunkles Band */
  --farbe-blau-600: #2c5f86;     /* hervorgehobene Wörter, Hover */
  --farbe-blau-400: #7fa3c0;     /* zweiter Bogen, Linien */
  --farbe-blau-200: #c8d8e5;     /* Flächen, Fluss in der Karte */
  --farbe-blau-100: #e7eef4;     /* sehr helle Flächen, Icon-Felder, Formen */
  --farbe-grau-50: #f2f4f6;      /* helle Abschnitte */
  --farbe-weiss: #ffffff;
  --farbe-text: #46525d;         /* Fließtext */
  --farbe-text-leise: #5f6b76;   /* Nebentext */
  --farbe-linie: #dde3e8;        /* Trennlinien, Kartenränder */
  --farbe-linie-feld: #808d98;   /* Rahmen von Eingabefeldern (≥ 3:1) */
  --farbe-text-hell: #c9d6e1;    /* Text auf Blau */
  --farbe-fehler: #b42318;
  --farbe-erfolg: #1e7a3d;

  /* ---------- Schrift ---------- */
  --schrift: 'Montserrat', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  --text-klein: 0.875rem;                                        /* 14 */
  --text-basis: clamp(1rem, 0.976rem + 0.095vw, 1.0625rem);      /* 16 → 17 */
  --text-lead: clamp(1.0625rem, 0.993rem + 0.286vw, 1.25rem);    /* 17 → 20 */
  --text-h4: clamp(1.0625rem, 1.016rem + 0.19vw, 1.1875rem);     /* 17 → 19 */
  --text-h3: clamp(1.375rem, 1.282rem + 0.381vw, 1.625rem);      /* 22 → 26 */
  --text-h2: clamp(1.75rem, 1.471rem + 1.143vw, 2.5rem);         /* 28 → 40 */
  --text-h1: clamp(2.125rem, 1.659rem + 1.905vw, 3.375rem);      /* 34 → 54 */

  --zeile-titel: 1.18;
  --zeile-text: 1.75;

  /* ---------- Abstände ---------- */
  --abstand-1: 0.25rem;
  --abstand-2: 0.5rem;
  --abstand-3: 0.75rem;
  --abstand-4: 1rem;
  --abstand-5: 1.5rem;
  --abstand-6: 2rem;
  --abstand-7: 2.5rem;
  --abstand-8: 3rem;
  --abstand-9: 4rem;
  --abstand-10: 5rem;
  --abschnitt-y: clamp(4rem, 3.068rem + 3.81vw, 6.5rem);        /* 64 → 104 */

  /* ---------- Raster ---------- */
  --breite-inhalt: 77.5rem;   /* 1240 */
  --rand: clamp(1.25rem, 4vw, 2.5rem);
  --spalten-abstand: clamp(1.25rem, 0.8rem + 1.9vw, 2.5rem);

  /* ---------- Formen ---------- */
  --radius-bild: 1.25rem;
  --radius-karte: 1rem;
  --radius-feld: 0.5rem;
  --radius-pille: 999px;
  --bogen: clamp(2.25rem, 1.4rem + 3.5vw, 5rem);   /* Höhe des Bogens zwischen Abschnitten */
  --bogen-streifen: 0.625rem;                      /* sichtbarer zweiter Bogen darunter */
  --schatten-karte: 0 1px 2px rgb(15 42 61 / 0.05), 0 16px 36px -18px rgb(15 42 61 / 0.25);

  /* ---------- Kopf ---------- */
  --kopf-hoehe: 4.25rem;
  --logo-hoehe: 2.75rem;

  /* ---------- Bewegung ---------- */
  --dauer-kurz: 150ms;
  --dauer: 260ms;
  --kurve: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ---------- Fokus ---------- */
  --fokus-farbe: var(--farbe-blau-800); /* auf Blau in site.css auf Weiß gesetzt */
  --fokus-abstand: 3px;

  --ebene-kopf: 100;
  --ebene-menue: 110;
  --ebene-einwilligung: 120;
}

@media (min-width: 64rem) {
  :root {
    --kopf-hoehe: 5.25rem;
    --logo-hoehe: 3.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dauer-kurz: 0ms;
    --dauer: 0ms;
  }
}