/* =====================================================================
   VARIABLEN – die einzige Stelle, an der Farben, Schriften & Abstände
   geändert werden müssen. Alles andere leitet sich hiervon ab.
   ===================================================================== */

:root {
  /* ---------- FARBEN (hier ändern = überall geändert) ---------- */
  --blau:  #175586;   /* Hauptfarbe: Flächen, Überschriften, Buttons, Logo */
  --hell:  #F0EDDB;   /* Hintergrund, Text auf Blau, Logo auf Blau */
  --text:  #333745;   /* Fließtext auf hellem Grund */

  /* Abgeleitete Töne – werden automatisch aus den drei Farben gemischt */
  --blau-10: color-mix(in srgb, var(--blau) 10%, var(--hell));  /* Karten, Hover */
  --blau-20: color-mix(in srgb, var(--blau) 20%, var(--hell));  /* Linien, Rahmen */
  --blau-40: color-mix(in srgb, var(--blau) 40%, var(--hell));  /* Formen im Hintergrund */
  --blau-dunkel: color-mix(in srgb, var(--blau) 85%, var(--text)); /* Hover auf Blau */
  --hell-70: color-mix(in srgb, var(--hell) 70%, var(--blau));  /* gedämpfter Text auf Blau */
  --blau-hell: color-mix(in srgb, var(--hell) 18%, var(--blau)); /* Zweitbuttons auf Blau */
  --text-70: color-mix(in srgb, var(--text) 70%, var(--hell));  /* gedämpfter Text auf Hell */

  /* ---------- SCHRIFTEN ---------- */
  --font-headline: "Fraunces", "Fraunces Ersatz", Georgia, serif;
  --font-text:     "Nunito Sans", "Nunito Ersatz Segoe", "Nunito Ersatz Arial", system-ui, sans-serif;

  /* Schriftgrößen – fluid, passen sich der Bildschirmbreite an */
  --fs-xs:   0.8rem;
  --fs-sm:   0.92rem;
  --fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-lg:   clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --fs-h3:   clamp(1.3rem, 1.15rem + 0.8vw, 1.75rem);
  --fs-h2:   clamp(1.9rem, 1.5rem + 1.8vw, 3rem);
  --fs-h1:   clamp(2.4rem, 1.8rem + 3vw, 4.4rem);

  /* ---------- ABSTÄNDE & MASSE ---------- */
  --raum-xs: 0.5rem;
  --raum-sm: 1rem;
  --raum-md: 2rem;
  --raum-lg: clamp(3rem, 2rem + 4vw, 6rem);      /* Abstand zwischen Sektionen */
  --raum-xl: clamp(5rem, 3rem + 7vw, 9rem);

  --breite-max: 1200px;      /* maximale Inhaltsbreite */
  --breite-text: 40.8em;     /* maximale Breite von Fließtext (≈ 68 Zeichen; em statt ch, damit nichts springt, während die Schrift lädt) */
  --seitenrand: clamp(1rem, 4vw, 3rem);

  --radius: 1.25rem;         /* Eckenrundung für Karten */
  --radius-sm: 0.6rem;
  --header-hoehe: 5rem;

  /* ---------- ANIMATION ---------- */
  --uebergang: 0.25s ease;
}