/* =============================================
   DESIGN TOKENS
   Zentrale Stelle für alle Farben, Abstände
   und Gestaltungsvariablen der Website.
   ============================================= */
:root {
  /* --- Markenfarben --- */
  --blue:        #1c83bf;
  --blue-dark:   #1a7aa3;
  --blue-light:  #e8f4fb;
  --cyan:        #2ab7ca;

  /* --- Textfarben --- */
  --text:        #4b4b48;   /* Haupttext */
  --text-mid:    #444444;   /* Sekundärtext */
  --text-soft:   #777777;   /* Dezenter Text / Subtext */

  /* --- Hintergründe --- */
  --bg:          #ffffff;
  --bg-tint:     #f8f9fa;   /* Leichter Grauton für Abschnitte */
  --bg-tint2:    #f0f2f5;   /* Etwas stärkerer Grauton */

  /* --- Metriken (Lösungs-/Referenzen-Seite) --- */
  --metric-down: #c0392b;   /* Rot für negative Werte (↓, –) */
  --metric-up:   #27ae60;   /* Grün für positive Werte (↑, +) */

  /* --- Ränder & Schatten --- */
  --border:      rgba(0, 0, 0, 0.09);
  --shadow-sm:   0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-md:   0 8px 32px rgba(0, 0, 0, 0.10);
  --shadow-lg:   0 20px 56px rgba(0, 0, 0, 0.12);

  /* --- Typografie --- */
  --font:        'Open Sans', sans-serif;

  /* --- Border-Radius --- */
  --radius:      12px;
  --radius-lg:   20px;
}