/* Farben für Portal, Blog, Helpdesk und Admin-Bereich. Hell oder dunkel richtet sich nach der Systemeinstellung des Geräts.
   Markenfarbe: Lebenshilfe-Blau; Orange nur als kleiner Akzent. */
:root {
  color-scheme: light dark;          /* Formularelemente, Scrollbalken und Datumsfelder des Browsers passen sich an */
  --font:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius:12px;
  --radius-lg:16px;

  --primary:#0b62a8;                 /* gefüllte Knöpfe, aktive Reiter (mit weißem Text) */
  --primary-hover:#084d87;
  --blue:#1a7fd0;                    /* Rahmen, Fokus, Akzentlinien */
  --accent:#f29100;                  /* Orange: Heute-Markierung, Zierlinien */
  --hero:linear-gradient(120deg, #0a4d91 0%, #1272c4 58%, #2a95e6 100%);   /* Kopfzeile und Begrüßungsbereich */
  --ring:rgba(26, 127, 208, .25);    /* Fokus-Schein */

  --bg:#f2f6fb;                      /* Seitenhintergrund */
  --surface:#fff;                    /* Karten, Inhalt */
  --surface-2:#eaf2fa;               /* Tabellenkopf, Code */
  --surface-3:#f7fafd;               /* ruhige Flächen (Kalender: andere Monate) */
  --input-bg:#fff;
  --card-bg:#f7fafd;
  --tab-bg:#e4edf7;
  --btn-bg:#f1f6fb;
  --text:#1b2a3a;
  --muted:#5b6f84;
  --muted-2:#3f5368;
  --line:#d7e2ee;
  --heading:#0a3e6e;                 /* Überschriften */
  --nav-bg:#0b62a8;                  /* Menüköpfe */
  --on-nav:#fff;
  --link:#0b62a8;
  --hover:#e6f1fb;
  --quote-bg:#eef6fd;
  --chip-bg:#e8f2fc;
  --event-bg:#f2f8fe;
  --event-hover:#e1eefa;
  --red:#bb0000;                     /* Flächen mit weißem Text */
  --green:#2e7d32;
  --err-text:#bb0000;                /* Texte auf dem Seitenhintergrund */
  --ok-text:#2e7d32;
  --shadow:0 1px 2px rgba(10, 62, 110, .06), 0 8px 24px rgba(10, 62, 110, .08);
  --shadow-hover:0 2px 4px rgba(10, 62, 110, .08), 0 14px 32px rgba(10, 62, 110, .16);
  --scroll-thumb:#b3c6da;            /* Scrollbalken (Firefox/Chrome: scrollbar-color) */
  --scroll-track:#eaf2fa;
  scrollbar-color:var(--scroll-thumb) var(--scroll-track);
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary:#2b7fd0;
    --primary-hover:#3a8fe0;
    --blue:#4aa3f0;
    --accent:#ffb340;
    --hero:linear-gradient(120deg, #0d3a6b 0%, #145a9e 60%, #1e78c4 100%);
    --ring:rgba(74, 163, 240, .35);

    --bg:#0a141f;
    --surface:#122232;
    --surface-2:#1a3045;
    --surface-3:#0f1d2b;
    --input-bg:#0c1824;
    --card-bg:#0f1d2b;
    --tab-bg:#16293b;
    --btn-bg:#1a3045;
    --text:#e6eef7;
    --muted:#9fb4c8;
    --muted-2:#bccbda;
    --line:#25405a;
    --heading:#cfe5fb;
    --nav-bg:#173f66;
    --on-nav:#fff;
    --link:#7cbcf5;
    --hover:#193654;
    --quote-bg:#12304a;
    --chip-bg:#173a5a;
    --event-bg:#142b42;
    --event-hover:#1d3d5c;
    --red:#c62828;
    --green:#2e7d32;
    --err-text:#ff8a80;
    --ok-text:#6fcf7a;
    --shadow:0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
    --shadow-hover:0 2px 4px rgba(0, 0, 0, .5), 0 14px 32px rgba(0, 0, 0, .5);
    --scroll-thumb:#3b5875;
    --scroll-track:#0a141f;
  }
}