/* ============================================================
   tokens.css – Farben, Schrift, Abstände
   Alle Design-Entscheidungen stehen hier an einer Stelle.
   Willst du eine Farbe ändern, änderst du sie nur hier.
   ============================================================ */

:root {
  /* --- Leitfarben, abgeleitet aus dem Cover-Bild --- */
  --farbe-marine:        #1E3A5F;  /* Titel, Text, Hauptbuttons */
  --farbe-marine-hell:   #2C4F7C;  /* Hover-Zustand */
  --farbe-marine-zart:   #E3EAF2;  /* zarte Flächen, aktive Navigation */
  --farbe-orange:        #E8862E;  /* Akzent: Unterstreichungen, Fokus, Fortschritt */
  --farbe-orange-dunkel: #C9691A;  /* Orange als Textfarbe (kontraststark genug) */
  --farbe-orange-zart:   #FBEEDF;  /* Hinweisboxen */
  --farbe-creme:         #F7F3EC;  /* Seitenhintergrund */
  --farbe-weiss:         #FFFFFF;  /* Karten */

  /* --- Textfarben --- */
  --farbe-text:          #1E3A5F;
  --farbe-text-leise:    #55677D;  /* Nebeninfos, min. 4.5:1 auf Creme */
  --farbe-linie:         #DDD6CB;  /* Trennlinien */

  /* --- Kapitelfarben, aus den Icon-Kreisen deiner Banner --- */
  --kap-1: #4A90B8;   /* Willkommen  – Blau */
  --kap-2: #F0A030;   /* Wohnung     – Orange */
  --kap-3: #4A90B8;   /* Anmeldung   – Blau (Behörden) */
  --kap-4: #7CB342;   /* Arzt        – Grün */
  --kap-5: #8B6BB1;   /* Stadt       – Lila */
  --kap-6: #D9614C;   /* Abschluss   – Rot */

  /* --- Rückmeldungen --- */
  --farbe-gut:           #4C8C3F;
  --farbe-gut-zart:      #EAF3E6;

  /* --- Schrift --- */
  --schrift: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
             Arial, sans-serif;

  /* Großzügig: die Zielgruppe liest in der Fremdsprache. */
  --text-xs:   0.9375rem;  /* 15px – nur Bildunterschriften */
  --text-s:    1.0625rem;  /* 17px */
  --text-m:    1.1875rem;  /* 19px – Grundtext */
  --text-l:    1.375rem;   /* 22px */
  --text-xl:   1.75rem;    /* 28px */
  --text-xxl:  2.25rem;    /* 36px */

  --zeilenhoehe:       1.65;
  --zeilenhoehe-eng:   1.25;

  /* --- 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: 3rem;
  --abstand-8: 4rem;

  /* --- Formen --- */
  --radius-s:  8px;
  --radius-m:  14px;
  --radius-l:  22px;
  --radius-rund: 999px;

  --schatten-karte:  0 2px 4px rgba(30, 58, 95, 0.06),
                     0 8px 24px rgba(30, 58, 95, 0.07);
  --schatten-hoch:   0 4px 8px rgba(30, 58, 95, 0.10),
                     0 16px 40px rgba(30, 58, 95, 0.12);

  /* --- Maße --- */
  --breite-inhalt:  46rem;   /* angenehme Lesebreite */
  --breite-navi:    18rem;
  --hoehe-kopf:     4.25rem;

  /* --- Bewegung --- */
  --tempo: 180ms ease;
}

/* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  :root { --tempo: 1ms; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}