/* =========================================================================
   KI-Werkstatt Rhein-Main — DIE FARBPALETTE

   Das ist die einzige Datei, in der Farben stehen. Wer das Aussehen der
   Website ändern will, ändert sie hier — sonst nirgends.

   Eine Ausnahme: assets/favicon.svg, das Symbol im Browser-Tab. SVG-Dateien
   können diese Werte nicht lesen, deshalb steht der Grünton dort noch einmal
   separat. Ändern Sie --accent, ändern Sie bitte auch jene eine Zeile.

   WICHTIG FÜR DAS BEARBEITEN
   In den Farbblöcken stehen absichtlich keine Kommentare. Der Grund: CSS
   kann Kommentare nicht ineinander schachteln. Stünde hinter einem Wert
   noch eine Erläuterung in Kommentarzeichen, ließe sich der Block nicht
   mehr im Ganzen auskommentieren — er bräche beim ersten inneren
   Kommentarende ab und die Seite verlöre ihre Farben.
   Deshalb: alle Erklärungen hier oben, in den Blöcken nur Werte.

   WAS DIE EINZELNEN WERTE BEDEUTEN
     --bg           Seitenhintergrund
     --surface      Karten und Eingabefelder, liegen auf --bg
     --surface-2    abgesetzte Abschnitte, etwas dunkler als --bg
     --line         Trennlinien und Rahmen
     --ink          Überschriften und Fließtext
     --ink-2        Nebentext, Beschriftungen, Erklärungen
     --accent       die Hausfarbe: Knopfflächen, kleine Überschriften
     --accent-deep  dunklere Variante für Links und Text
     --accent-soft  sehr helle Variante als Hintergrund ganzer Abschnitte
     --on-accent    Schrift auf --accent, muss dazu im Kontrast stehen
     --warm         Signalfarbe für Hinweise und Platzhalter-Markierungen
     --warm-soft    zugehörige Hintergrundfarbe
     --shadow       Schatten unter Karten

   ZWEI SÄTZE, ZWEI MODI
   Der erste Block gilt für den hellen Modus, der zweite für den dunklen.
   Welchen ein Besucher sieht, entscheidet die Einstellung seines Geräts.
   Beide Sätze müssen gepflegt werden. Im dunklen Modus wird --accent
   deutlich heller, weil dunkles Grün auf dunklem Grund verschwindet —
   deshalb braucht --on-accent dort eine dunkle statt einer weißen Schrift.

   NACH JEDER ÄNDERUNG PRÜFEN
       node werkzeuge/kontrast-pruefen.js
   Das rechnet nach, ob alle Texte noch gut genug lesbar sind.

   PALETTE WECHSELN
   Unten stehen zwei fertige Alternativen. Zum Wechseln: die beiden Blöcke
   direkt hier unten auskommentieren, die gewünschte Alternative
   einkommentieren, danach den Prüfer laufen lassen.
   ========================================================================= */

:root {
  --bg:          #FBF9F5;
  --surface:     #FFFFFF;
  --surface-2:   #F4F0E9;
  --line:        #D9D1C3;

  --ink:         #1B1F23;
  --ink-2:       #4E565E;

  --accent:      #1D5B52;
  --accent-deep: #143F39;
  --accent-soft: #E6F0ED;
  --on-accent:   #FFFFFF;

  --warm:        #9C4A22;
  --warm-soft:   #FAEEE6;

  --shadow: 0 1px 2px rgba(27,31,35,.04), 0 8px 24px -12px rgba(27,31,35,.12);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #14171A;
    --surface:     #1B1F23;
    --surface-2:   #23282E;
    --line:        #2F353B;

    --ink:         #ECEAE6;
    --ink-2:       #A9B1B8;

    --accent:      #7FC9BB;
    --accent-deep: #A8DCD1;
    --accent-soft: #17302C;
    --on-accent:   #10201D;

    --warm:        #E3A57F;
    --warm-soft:   #2C2018;

    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}

/* =========================================================================
   ALTERNATIVE 1 — SCHIEFER & KUPFER
   Kühler und sachlicher als das Grün. Wirkt etwas behördennäher, was je
   nach Zielgruppe Vertrauen schafft oder Distanz erzeugt.
   Geprüft: alle Kombinationen bestehen den Kontrasttest.
   ========================================================================= */

/*
:root {
  --bg:          #F7F7F8;
  --surface:     #FFFFFF;
  --surface-2:   #ECEEF0;
  --line:        #CED3D9;

  --ink:         #17191C;
  --ink-2:       #4A4F57;

  --accent:      #2F4858;
  --accent-deep: #1E313D;
  --accent-soft: #E7ECF0;
  --on-accent:   #FFFFFF;

  --warm:        #9A5B2C;
  --warm-soft:   #F8EFE7;

  --shadow: 0 1px 2px rgba(23,25,28,.04), 0 8px 24px -12px rgba(23,25,28,.12);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #131518;
    --surface:     #1A1D21;
    --surface-2:   #22262B;
    --line:        #2D3238;

    --ink:         #ECEDEF;
    --ink-2:       #A6ADB6;

    --accent:      #8FB6CC;
    --accent-deep: #B7D3E3;
    --accent-soft: #1B2A33;
    --on-accent:   #10202A;

    --warm:        #DFA173;
    --warm-soft:   #2B2018;

    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}
*/

/* =========================================================================
   ALTERNATIVE 2 — AUBERGINE
   Wärmer und eigenständiger. Fällt zwischen Bildungsanbietern auf, wirkt
   weniger nach Amt und mehr nach Werkstatt.
   Geprüft: alle Kombinationen bestehen den Kontrasttest.
   ========================================================================= */

/*
:root {
  --bg:          #FAF8FA;
  --surface:     #FFFFFF;
  --surface-2:   #F2EDF2;
  --line:        #DACEDC;

  --ink:         #1D1720;
  --ink-2:       #544B58;

  --accent:      #5B2D5B;
  --accent-deep: #3F1E3F;
  --accent-soft: #F0E7F0;
  --on-accent:   #FFFFFF;

  --warm:        #96502A;
  --warm-soft:   #F9EFE8;

  --shadow: 0 1px 2px rgba(29,23,32,.04), 0 8px 24px -12px rgba(29,23,32,.12);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #17141A;
    --surface:     #1E1A21;
    --surface-2:   #272230;
    --line:        #332C38;

    --ink:         #EDE9EF;
    --ink-2:       #ADA3B4;

    --accent:      #C9A0CE;
    --accent-deep: #DEC0E2;
    --accent-soft: #2A1F2E;
    --on-accent:   #201325;

    --warm:        #E0A17C;
    --warm-soft:   #2C2018;

    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}
*/