/* =============================================================
   Website-Verwaltung — Design-Tokens
   Übernommen aus dem PersonalDeck, damit beide Systeme für den
   Rettungsdienst Spree-Neiße wie ein Haus wirken: dieselben Farben,
   Schriften, Rundungen und Abstände, dieselbe Dunkelfassung.
   Nach der PersonalDeck-Designvorlage (08/2026):
   helle Oberfläche, weiche Rundungen, Karten mit feinen Linien,
   Barlow Semi Condensed für Headlines/Zahlen/Buttons,
   Barlow Condensed für Eyebrows und Gruppentitel, Lato als Text.
   Alle Schriften lokal — keine Live-Verbindung zu Google.
   Farbwerte im Rahmen des RD-SPN-Styleguides.
   ============================================================= */

@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("../fonts/barlow-semi-condensed-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("../fonts/barlow-semi-condensed-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("../fonts/barlow-semi-condensed-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("../fonts/barlow-semi-condensed-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("../fonts/barlow-semi-condensed-800.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ---- Kernfarben (RD-SPN-Styleguide) ---- */
  --spn-blau:    #004799;
  --spn-rot:     #BC1010;
  --spn-rot-dkl: #9C0D0D;
  --spn-marine:  #08236A;
  --spn-tief:    #061746;
  --spn-wein:    #751834;
  --spn-weiss:   #FFFFFF;
  /* Papier bleibt Papier. Im Dunkelmodus dreht --spn-weiss auf eine dunkle
     Flaeche; ein eingescanntes Formular und eine Unterschrift in dunkler
     Tinte brauchen aber echtes Weiss darunter, sonst sind sie unsichtbar. */
  --papier:      #FFFFFF;

  --spn-blau-10: #E6ECF5;
  --spn-blau-20: #CCDAEB;
  --spn-blau-40: #99B5D6;
  --spn-rot-8:   #FBEDED;
  --spn-meta:    #5A6B8C;

  /* ---- PersonalDeck-Flächen ---- */
  --pd-grund:      #E9ECF1;   /* Seitengrund */
  --pd-karte:      #FFFFFF;   /* Karten */
  --pd-linie:      #E6ECF5;   /* Kartenränder, Trennlinien */
  --pd-linie-2:    #DFE4EC;   /* Bedienelement-Ränder, Sidebar-Flächen */
  --pd-zeile:      #F1F4F9;   /* Tabellenzeilen-Trenner */
  --pd-hover:      #F4F7FB;   /* Zeilen-Hover */
  --pd-nav-text:   #3A4A70;   /* Navigation inaktiv */
  --pd-kpi-verlauf: linear-gradient(135deg, #08236A 0%, #0B2F8A 100%);

  --spn-verlauf: linear-gradient(100deg, #08236A 0%, #08236A 45%, #751834 100%);
  --spn-gruen:   #0B6B3A;

  /* ---- Statusfarben (Pill-Paare) ---- */
  --st-gruen:    #1B7A43; --st-gruen-bg:   #E7F3EC;
  --st-amber:    #9A6A0B; --st-amber-bg:   #FDF3E3;
  --st-rot:      #BC1010; --st-rot-bg:     #FBEDED;
  --st-blau:     #004799; --st-blau-bg:    #E6ECF5;
  --st-neutral:  #5A6B8C; --st-neutral-bg: #EEF1F6;

  /* ---- Typografie ---- */
  --spn-font-display: "Barlow Semi Condensed", "Arial Narrow", Helvetica, sans-serif;
  --spn-font-subline: "Barlow Condensed", "Arial Narrow", Helvetica, sans-serif;
  --spn-font-text:    Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --spn-font-ui:      var(--spn-font-text);

  --spn-text: 14px;
  --spn-text-klein: 12.5px;
  --spn-label: 12px;
  --spn-zeilenabstand: 1.55;

  /* ---- Rundungen (Vorlage) ---- */
  /* ---- Bewegung ----------------------------------------------------------
     Eine gemeinsame Sprache statt gestreuter Einzelwerte. Massstab ist ein
     Werkzeug, das taeglich benutzt wird: Bewegung darf zeigen, was passiert,
     aber niemanden warten lassen. Alles ueber 300 ms faellt beim zehnten Mal
     am Tag als Verzoegerung auf. */
  --takt-kurz:  120ms;   /* Farbwechsel, Hover, Kleinkram */
  --takt:       220ms;   /* der Normalfall: etwas oeffnet, waechst, wechselt */
  --takt-lang:  320ms;   /* grosse Flaechen, Schubladen */
  --kurve:      cubic-bezier(.4, 0, .2, 1);        /* ruhig an und ab */
  --kurve-rein: cubic-bezier(.16, 1, .3, 1);       /* Eintritt: zackig los, weich an */
  --kurve-feder: cubic-bezier(.34, 1.36, .64, 1);  /* nur wo etwas auftaucht */

  --r-xs: 7px;
  --r-sm: 9px;
  --r-md: 10px;
  --r-btn: 11px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-pill: 999px;

  /* ---- Schatten ---- */
  --schatten-karte: 0 1px 4px rgba(6,23,70,.06);
  --schatten-flach: 0 1px 3px rgba(6,23,70,.08);
  --schatten-aktiv: 0 1px 4px rgba(6,23,70,.10);
  --schatten-pop:   0 10px 30px rgba(6,23,70,.14);

  /* ---- Raster ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px; --sp-5: 32px; --sp-6: 48px;

  /* ---- Bewegung / Ebenen ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur: 300ms;
  /* ---- Farbige Flaechen und der Text darauf ----
     Getrennt vom Farbton, weil im Dunkelmodus beides auseinanderlaeuft.
     --spn-rot ist dort ein heller Akzent fuer Schrift, waehrend ein
     Knopf satt rot bleiben muss. Wer weissen Text auf einen Farbton
     setzt, nimmt hier das passende Paar. */
  --flaeche-rot:    #BC1010;
  --flaeche-marine: #08236A;
  --flaeche-blau:   #004799;
  --auf-marke:  #FFFFFF;   /* auf rot, marine, blau */
  --auf-status: #FFFFFF;   /* auf den Statusfarben */
  --auf-still:  #FFFFFF;   /* auf den stillen Grauflaechen */
  --auf-kachel: #CCDAEB;   /* auf der KPI-Kachel, die immer dunkel ist */
  --zahl-fond:    rgba(0,0,0,.07);
  --zahl-fond-an: rgba(255,255,255,.28);
  --stern-aus: #D9E2F0;
  --stern-an:  #C78A00;
  /* Eingereichte Bescheinigungen liegen bewusst auf Weiss, auch im
     Dunkelmodus. Ein Scan soll gelesen werden, nicht zum Design passen. */
  --beleg-grund: #FFFFFF;
  /* Zweckfarben waehlen die Nutzer selbst, meist fuer hellen Grund. Als
     Schrift auf dunklem Grund sind sie oft zu dunkel, deshalb wird der
     gewaehlte Ton dort aufgehellt. --farbe steht am Bauteil, nicht hier;
     ersetzt wird der Wert erst dort, wo er gebraucht wird. */
  --zweck-text: var(--farbe);
  /* Der Pfeil im Auswahlfeld ist ein kodiertes Bild und kann keine
     Schriftfarbe erben. Er steht deshalb hier, damit er den Modus mitmacht
     statt als dunkler Strich auf dunklem Feld zu verschwinden. */
  color-scheme: light;
  --pfeil-auswahl: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235A6B85' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --z-nav: 50;
  --z-overlay: 80;
}

/* =============================================================
   Dunkelfassung

   Umdefiniert werden nur die Werte, nie die Bauteile. Wer eine Farbe
   fest in eine Regel schreibt, bricht diesen Modus - deshalb steht
   jede Farbe als Token hier.

   Zwei Abweichungen vom Styleguide sind gewollt. Das Marken-Rot
   #BC1010 erreicht auf dunklem Grund nur 2,2:1 und ist als Schrift
   unlesbar, also wird der Farbton aufgehellt und die Flaeche
   getrennt gefuehrt. Und Schatten tragen im Dunkeln nicht, deshalb
   uebernehmen die Linien ihre Aufgabe.

   Die beiden folgenden Bloecke sind absichtlich gleich. Der erste
   gilt nach bewusster Wahl, der zweite nach Wunsch des Systems,
   solange nicht ausdruecklich hell gewaehlt wurde.
   ============================================================= */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Kernfarben */
  --spn-blau: #6FA8FF;
  --spn-rot: #FF6B6B;
  --spn-rot-dkl: #FF8A8A;
  --spn-marine: #C9D7F5;
  --spn-tief: #E8EDF7;
  --spn-weiss: #0E1526;
  --papier: #FFFFFF;   /* Papier bleibt Papier, siehe oben */
  --spn-blau-10: #1B2540;
  --spn-blau-20: #26324F;
  --spn-blau-40: #3B4A6E;
  --spn-rot-8: #2A1A1E;
  --spn-meta: #9AA8C4;
  --spn-gruen: #4ADE80;

  /* Flaechen */
  --pd-grund: #0B111F;
  --pd-karte: #141C2E;
  --pd-linie: #222C44;
  --pd-linie-2: #1C2438;
  --pd-zeile: #202A40;
  --pd-hover: #1B2338;
  --pd-nav-text: #B7C4DE;
  --pd-kpi-verlauf: linear-gradient(135deg, #1B2540 0%, #263766 100%);
  --spn-verlauf: linear-gradient(100deg, #16203A 0%, #1B2540 45%, #3A1F2C 100%);

  /* Farbige Flaechen bleiben satt, der Text darauf kippt */
  --flaeche-rot: #C41C1C;
  --flaeche-marine: #2E3F69;
  --flaeche-blau: #1F5FBF;
  --auf-marke: #FFFFFF;
  --auf-status: #0B111F;
  --auf-still: #DCE4F2;
  --auf-kachel: #C3D2EA;
  --zahl-fond: rgba(255,255,255,.10);
  --zahl-fond-an: rgba(0,0,0,.16);
  --stern-aus: #2E3A55;
  --stern-an: #E3B143;
  --zweck-text: color-mix(in srgb, var(--farbe) 55%, #FFFFFF);
  --pfeil-auswahl: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%239AA8C4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* Statusfarben - im Dunkeln pastellig auf tiefem Grund */
  --st-gruen: #6EE7A0;
  --st-gruen-bg: #14301F;
  --st-amber: #F0C070;
  --st-amber-bg: #33270F;
  --st-rot: #FF8A8A;
  --st-rot-bg: #331A1A;
  --st-blau: #8FBBFF;
  --st-blau-bg: #16233F;
  --st-neutral: #A9B6D0;
  --st-neutral-bg: #1E2740;

  /* Schatten tragen im Dunkeln kaum - dafuer stehen die Linien */
  --schatten-karte: 0 1px 3px rgba(0,0,0,.45);
  --schatten-flach: 0 1px 2px rgba(0,0,0,.45);
  --schatten-aktiv: 0 1px 4px rgba(0,0,0,.55);
  --schatten-pop: 0 12px 34px rgba(0,0,0,.60);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    /* Kernfarben */
    --spn-blau: #6FA8FF;
    --spn-rot: #FF6B6B;
    --spn-rot-dkl: #FF8A8A;
    --spn-marine: #C9D7F5;
    --spn-tief: #E8EDF7;
    --spn-weiss: #0E1526;
    --papier: #FFFFFF;   /* Papier bleibt Papier, siehe oben */
    --spn-blau-10: #1B2540;
    --spn-blau-20: #26324F;
    --spn-blau-40: #3B4A6E;
    --spn-rot-8: #2A1A1E;
    --spn-meta: #9AA8C4;
    --spn-gruen: #4ADE80;

    /* Flaechen */
    --pd-grund: #0B111F;
    --pd-karte: #141C2E;
    --pd-linie: #222C44;
    --pd-linie-2: #1C2438;
    --pd-zeile: #202A40;
    --pd-hover: #1B2338;
    --pd-nav-text: #B7C4DE;
    --pd-kpi-verlauf: linear-gradient(135deg, #1B2540 0%, #263766 100%);
    --spn-verlauf: linear-gradient(100deg, #16203A 0%, #1B2540 45%, #3A1F2C 100%);

    /* Farbige Flaechen bleiben satt, der Text darauf kippt */
    --flaeche-rot: #C41C1C;
    --flaeche-marine: #2E3F69;
    --flaeche-blau: #1F5FBF;
    --auf-marke: #FFFFFF;
    --auf-status: #0B111F;
    --auf-still: #DCE4F2;
    --auf-kachel: #C3D2EA;
    --zahl-fond: rgba(255,255,255,.10);
    --zahl-fond-an: rgba(0,0,0,.16);
    --stern-aus: #2E3A55;
    --stern-an: #E3B143;
    --zweck-text: color-mix(in srgb, var(--farbe) 55%, #FFFFFF);
    --pfeil-auswahl: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%239AA8C4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    /* Statusfarben - im Dunkeln pastellig auf tiefem Grund */
    --st-gruen: #6EE7A0;
    --st-gruen-bg: #14301F;
    --st-amber: #F0C070;
    --st-amber-bg: #33270F;
    --st-rot: #FF8A8A;
    --st-rot-bg: #331A1A;
    --st-blau: #8FBBFF;
    --st-blau-bg: #16233F;
    --st-neutral: #A9B6D0;
    --st-neutral-bg: #1E2740;

    /* Schatten tragen im Dunkeln kaum - dafuer stehen die Linien */
    --schatten-karte: 0 1px 3px rgba(0,0,0,.45);
    --schatten-flach: 0 1px 2px rgba(0,0,0,.45);
    --schatten-aktiv: 0 1px 4px rgba(0,0,0,.55);
    --schatten-pop: 0 12px 34px rgba(0,0,0,.60);
  }
}