/*
 * Design "deutschland": Schwarz-Rot-Gold.
 * Wird zusätzlich zu style.css geladen, wenn in config.php
 * define('DESIGN', 'deutschland'); gesetzt ist, und überschreibt nur Variablen.
 */
:root:root {
  /* Akzent- und Statusfarben, angelehnt an Apples aktuelle Systemfarben */
  /* Palette: Schwarz-Rot-Gold – in Apples Systemfarben-Logik (Rot ≈ systemRed, Gold ≈ systemYellow) */
  --akzent: #d40000;          /* Deutsches Rot für Links, Buttons, aktive Elemente */
  --akzent-dunkel: #a80000;
  --gold: #ffcc00;
  --gold-hell: rgba(255, 204, 0, 0.2);
  --gold-text: #8a6500;       /* Gold in Textform (ausreichender Kontrast auf hellem Grund) */
  --rot-text: #b3261e;        /* Warn-/Löschrot in Textform, klar vom Akzentrot unterscheidbar */
  --gruen-text: #1d7a3a;
  --schwarz: #1d1d1f;
  --gruen: #30b455;
  --gruen-hell: rgba(48, 180, 85, 0.16);
  --rot: #ff3b30;
  --rot-hell: rgba(255, 59, 48, 0.14);
  --grau: #6e6e73;
  --grau-hell: rgba(120, 120, 128, 0.12);
  --rand: rgba(60, 60, 67, 0.15);

  --text: #1d1d1f;
  --text-sekundaer: #5f5f64;

  /* "Liquid Glass"-Oberflächen: helle, transluzente Panels mit Weichzeichner */
  --glas-bg: rgba(255, 255, 255, 0.62);
  --glas-bg-stark: rgba(255, 255, 255, 0.8);
  --glas-rand: rgba(255, 255, 255, 0.55);
  --glas-blur: blur(24px) saturate(180%);

  --schatten-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.03);
  --schatten-md: 0 10px 30px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.05);
  --schatten-lg: 0 24px 60px rgba(0, 0, 0, 0.14), 0 8px 20px rgba(0, 0, 0, 0.06);

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --akzent-verlauf: linear-gradient(135deg, #e8100a 0%, #b80000 100%);

  /* Diagrammfarben (werden von js/app.js gelesen) */
  --chart-1: #dd0000;
  --chart-2: #1d1d1f;
  --chart-3: #f5b800;
  --chart-4: #8e8e93;
  --chart-5: #ff7a6e;
  --chart-6: #8a6500;
  --chart-7: #b5b5ba;
  --chart-8: #7d0000;

  /* Flächen, Hover, Fokus (vorher fest im Stylesheet) */
  --fleck-1: rgba(255, 204, 0, 0.15);
  --fleck-2: rgba(221, 0, 0, 0.08);
  --fleck-3: rgba(255, 204, 0, 0.09);
  --fleck-4: rgba(221, 0, 0, 0.06);
  --grund-oben: #f8f6f1;
  --grund-unten: #f0ede6;
  --auswahl: rgba(255, 204, 0, 0.4);
  --zeile-hover: rgba(255, 204, 0, 0.09);
  --hover-rand: rgba(255, 204, 0, 0.55);
  --fokus-ring: rgba(255, 204, 0, 0.38);
  --streifen: linear-gradient(90deg, #000 0 33.34%, #dd0000 33.34% 66.67%, #ffce00 66.67% 100%);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:root {
    --text: #f5f5f7;
    --text-sekundaer: #a8a8ad;
    --rand: rgba(255, 255, 255, 0.14);
    --grau-hell: rgba(120, 120, 128, 0.24);
    --akzent: #ff5a4d;
    --akzent-dunkel: #ff3b30;
    --gold-text: #ffd60a;
    --gold-hell: rgba(255, 214, 10, 0.18);
    --rot-text: #ff8a80;
    --gruen-text: #52d273;
    --chart-1: #dd0000;
    --chart-2: #f5f5f7;
    --chart-3: #ffd60a;
    --chart-6: #d9b13a;
    --chart-8: #ff453a;

    --glas-bg: rgba(38, 38, 41, 0.6);
    --glas-bg-stark: rgba(44, 44, 47, 0.82);
    --glas-rand: rgba(255, 255, 255, 0.09);

    --schatten-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --schatten-md: 0 10px 30px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
    --schatten-lg: 0 24px 60px rgba(0, 0, 0, 0.55);

    --fleck-1: rgba(255, 204, 0, 0.12);
    --fleck-2: rgba(221, 0, 0, 0.24);
    --fleck-3: rgba(221, 0, 0, 0.17);
    --fleck-4: rgba(255, 204, 0, 0.07);
    --grund-oben: #1c1c1e;
    --grund-unten: #09090a;
    --streifen: linear-gradient(90deg, #4a4a4d 0 33.34%, #dd0000 33.34% 66.67%, #ffce00 66.67% 100%);

    color-scheme: dark;
  }
}