/* Design-System: Gestaltungswerte an EINER Stelle (K4).
 *
 * Vorher standen Farben, Abstaende und Radien als feste Werte in achtzehn Stilblaettern. Drei
 * Folgen: eine Farbanpassung musste an achtzehn Stellen gefunden werden, ein dunkles Thema war
 * nicht moeglich, und niemand konnte pruefen, ob ein Text auf seinem Grund ueberhaupt lesbar ist.
 *
 * Dieses Blatt definiert die Werte. Die Bauteile benutzen NUR diese Werte - das prueft
 * tests/design-system.mjs. Jeder Farbwert existiert in beiden Themen, und jede Kombination aus
 * Text und Grund haelt den Kontrast, den die WCAG fuer AA verlangt.
 *
 * Die Mandantenfarbe (--brand) bleibt ueberschreibbar: branding-theme.css setzt sie je Traeger.
 * Alles andere ist plattformweit. */

:root{
  /* Flaechen. --flaeche ist der Seitengrund, --karte der erhoehte Grund darauf. */
  --flaeche:#f8fafc;
  --karte:#ffffff;
  --flaeche-gedaempft:#f1f5f9;
  --navi:#0B1A30;

  /* Text. --text-gedaempft ist bewusst nicht heller als 4.5:1 auf --flaeche - sonst waere die
   * "unwichtige" Zeile genau die, die niemand mehr lesen kann. */
  --text:#0f172a;
  --text-gedaempft:#53617a;
  --text-auf-farbe:#ffffff;

  /* Linien und Erhebung. */
  --linie:#e2e8f0;
  --linie-stark:#cbd5e1;
  --schatten:0 18px 60px #0f172a14;
  --schatten-klein:0 2px 8px #0f172a0f;

  /* ---------------------------------------------------------------------------------------
   * Die Marke des PRODUKTS. Sie ist verbindlich und wird nicht je Traeger ersetzt.
   *
   * Navy traegt, Gold setzt genau einen Akzent. Gold ist bewusst KEINE Handlungsfarbe: auf
   * hellem Grund haelt es den Kontrast fuer Flaechentext nicht, und ein Knopf, den man nicht
   * lesen kann, ist kein Knopf. Es markiert - Auszeichnung, Siegel, Hervorhebung -, es fuehrt
   * nicht.
   * --------------------------------------------------------------------------------------- */
  --marke-navy:#0B2545;
  --marke-navy-mittel:#1E3A6D;
  --marke-navy-linie:#274576;
  --marke-gold:#D4AF37;
  --marke-gold-hell:#E6C769;
  --marke-gold-tief:#B39627;
  --marke-dunkel:#1f2937;
  --marke-hell:#f1f5f8;
  /* Flaechen und Schriftfarben der kundenseitigen Markenseiten. Sie bleiben in beiden Themen
   * gleich: die Produktseite ist ein Werbemittel und traegt die Marke, keine Themenwahl. */
  --marke-karte:#ffffff;
  --marke-tinte:#0B2545;
  --marke-tinte-leise:#5d718a;
  --marke-linie:#dbe4ee;

  /* Handlungsfarbe des Traegers. branding-theme.css darf sie ersetzen; ohne eigenes Branding
   * ist sie das Navy der Marke. */
  --brand:#0B2545;
  --brand-dunkel:#1E3A6D;
  --brand-hell:#DDE6F2;
  /* Die Schrift AUF der Handlungsfarbe ist ein eigener Wert. Im dunklen Thema ist der Akzent
   * heller als der Grund - dort traegt er dunkle Schrift, nicht weisse. */
  --text-auf-brand:#ffffff;
  --gefahr-flaeche:#b91c1c;
  --text-auf-gefahr:#ffffff;

  /* ---------------------------------------------------------------------------------------
   * Portal-Kompatibilitaets-Variablen.
   *
   * Alle Teilnehmer-/Klassen-/Admin-Dashboards (ca. 15 Dateien) nutzen diese Schluessel.
   * Wir binden sie 1:1 an die Marke, damit eine Aenderung an EINER Stelle (oben) alle
   * Oberflaechen erreicht. Der Fallback-Wert von vormals (#2563eb, #3b82f6, #7c3aed) war
   * das alte blaue/lila Thema – jetzt Navy + Gold, konsistent mit design-tokens. */
  --portal-primary:var(--marke-navy,#0B2545) !important;
  --portal-primary-dark:var(--marke-navy-mittel,#1E3A6D) !important;
  --portal-accent:var(--marke-gold,#D4AF37) !important;
  --portal-accent-soft:var(--marke-gold-hell,#E6C769);
  --portal-bg:#f8fafc !important;
  --portal-surface:#ffffff !important;
  --portal-text:#0B2545 !important;
  --portal-secondary:#0B2545 !important;
  --portal-muted:#334155 !important;
  --portal-border:var(--linie,#e2e8f0) !important;
  --portal-shadow:0 14px 40px rgba(15,23,42,.08);
  --portal-soft:color-mix(in srgb,var(--portal-primary) 6%,var(--portal-surface));
  --kp-role-surface:#ffffff !important;

  /* Zustandsfarben. Getrennt von --brand: ein Traeger mit gruenem Logo braucht trotzdem ein
   * Rot fuer den Fehler. */
  --gut:#15803d;
  --gut-hell:#dcfce7;
  --warnung:#b45309;
  --warnung-hell:#fef3c7;
  --schlecht:#b91c1c;
  --schlecht-hell:#fee2e2;
  --hinweis-hell:#eff6ff;

  /* Abstaende - eine Leiter statt beliebiger Zahlen. */
  --abstand-1:4px;
  --abstand-2:8px;
  --abstand-3:12px;
  --abstand-4:16px;
  --abstand-5:24px;
  --abstand-6:32px;

  /* Radien. */
  --radius-klein:9px;
  --radius:10px;
  --radius-gross:16px;
  --radius-sehr-gross:20px;
  --radius-rund:999px;

  /* Schrift. */
  --schrift:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --schrift-klein:.8rem;
  --schrift-tabelle:.92rem;
  --schrift-gross:1.4rem;
  --schrift-zahl:2rem;

  color-scheme:light;
}

/* Dunkles Thema. Zwei Bloecke, weil beides vorkommt: der Systemwunsch, und die ausdrueckliche
 * Wahl im Portal. Ohne den zweiten liesse sich die Systemvorgabe nicht uebersteuern. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --flaeche:#0b1220;
    --karte:#111a2b;
    --flaeche-gedaempft:#162034;
    --navi:#06101f;
    --text:#e8edf6;
    --text-gedaempft:#a7b3c9;
    --text-auf-farbe:#ffffff;
    --linie:#243049;
    --linie-stark:#33415c;
    --schatten:0 18px 60px #00000066;
    --schatten-klein:0 2px 8px #00000055;
    /* Die Marke im dunklen Thema: dasselbe Navy traegt als Flaeche nicht mehr, deshalb ein
     * aufgehelltes Navy als Handlungsfarbe. Gold bleibt Auszeichnung, nicht Knopf. */
    --marke-navy:#0B2545;
    --marke-navy-mittel:#1E3A6D;
    --marke-gold:#E6C769;
    --marke-gold-tief:#D4AF37;
    --marke-dunkel:#1f2937;
    --marke-hell:#f1f5f8;
    --marke-navy-linie:#274576;
    --marke-gold-hell:#F0DE8E;
    /* Dieselben Werte wie im hellen Thema: Produktseite und Signet sind Werbemittel
     * und tragen die Marke - sie folgen keiner Themenwahl des Besuchers. */
    --marke-karte:#ffffff;
    --marke-tinte:#0B2545;
    --marke-tinte-leise:#5d718a;
    --marke-linie:#dbe4ee;
    --brand:#7aa7f7;
    --brand-dunkel:#9ec0fa;
    --brand-hell:#132442;
    --text-auf-brand:#08101f;
    --gefahr-flaeche:#ff9a94;
    --text-auf-gefahr:#2a0b0b;
    --gut:#7ee2a8;
    --gut-hell:#10301f;
    --warnung:#f0c070;
    --warnung-hell:#3a2a0d;
    --schlecht:#ff9a94;
    --schlecht-hell:#3a1414;
    --hinweis-hell:#13203a;
    color-scheme:dark;
  }
}

:root[data-theme="dark"]{
  --flaeche:#0b1220;
  --karte:#111a2b;
  --flaeche-gedaempft:#162034;
  --navi:#06101f;
  --text:#e8edf6;
  --text-gedaempft:#a7b3c9;
  --text-auf-farbe:#ffffff;
  --linie:#243049;
  --linie-stark:#33415c;
  --schatten:0 18px 60px #00000066;
  --schatten-klein:0 2px 8px #00000055;
  --marke-navy:#0B2545;
  --marke-navy-mittel:#1E3A6D;
  --marke-gold:#E6C769;
  --marke-gold-tief:#D4AF37;
  --marke-dunkel:#1f2937;
  --marke-hell:#f1f5f8;
  --marke-navy-linie:#274576;
  --marke-gold-hell:#F0DE8E;
  /* Dieselben Werte wie im hellen Thema: Produktseite und Signet sind Werbemittel
   * und tragen die Marke - sie folgen keiner Themenwahl des Besuchers. */
  --marke-karte:#ffffff;
  --marke-tinte:#0B2545;
  --marke-tinte-leise:#5d718a;
  --marke-linie:#dbe4ee;
  --brand:#7aa7f7;
  --brand-dunkel:#9ec0fa;
  --brand-hell:#132442;
  --text-auf-brand:#08101f;
  --gefahr-flaeche:#ff9a94;
  --text-auf-gefahr:#2a0b0b;
  --gut:#7ee2a8;
  --gut-hell:#10301f;
  --warnung:#f0c070;
  --warnung-hell:#3a2a0d;
  --schlecht:#ff9a94;
  --schlecht-hell:#3a1414;
  --hinweis-hell:#13203a;
  color-scheme:dark;
}

/* Wer weniger Bewegung will, bekommt weniger Bewegung. Das ist keine Vorliebe, sondern fuer
 * Menschen mit vestibulaeren Stoerungen eine Zugangsbedingung. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}