/* =========================================================================
   KLASSE gedacht - Design-Tokens
   =========================================================================

   Das hier ist die EINZIGE Stelle, an der Farben definiert werden.
   Landingpage und App holen sich beide ihre Farben von hier.

   Wenn du irgendwann eine Farbe aendern willst: nur hier aendern,
   dann ist sie ueberall geaendert.

   Die kurzen Namen (--n, --b, --i ...) stammen aus deiner bestehenden App
   und bleiben absichtlich erhalten - so funktioniert der bestehende Code
   nach der Migration unveraendert weiter. Die langen Namen sind fuer alles
   Neue gedacht, weil man beim Lesen sofort versteht, was gemeint ist.
   ========================================================================= */

:root {
  /* --- Deine sechs CI-Farben --------------------------------------- */

  --kg-navy:        #0F2147;   /* Hauptfarbe: Kopfzeile, Ueberschriften   */
  --kg-berry:       #B9717A;   /* Akzent: Buttons, Hervorhebungen         */
  --kg-blush:       #F5E9E8;   /* Ganz helles Rosa: Hinweisflaechen       */
  --kg-ivory:       #F8F5F2;   /* Hintergrund der Seite                   */
  --kg-sand:        #DDD5CF;   /* Linien und Raender                      */
  --kg-slate:       #4C5564;   /* Flieszlicher Text                       */

  /* Ergaenzung aus der App: Mint fuer "erledigt"-Zustaende */
  --kg-mint:        #E1EEE8;

  /* --- Abgeleitete Toene (nur aus den obigen entwickelt) ------------ */

  --kg-white:       #FFFFFF;
  --kg-muted:       #6A717A;   /* Untertitel, Nebeninformation           */
  --kg-line-soft:   #ECE7E3;   /* Sehr feine Trennlinie                  */
  --kg-berry-dark:  #8E4E57;   /* Berry auf hellem Grund, fuer Links     */

  /* --- Kontrast: gemessen beim Check-up am 28.08.2026 ----------------
     Nach WCAG 2.1 braucht normaler Text 4.5:1 gegen seinen Hintergrund.
     Gemessen wurde:

       Weiss auf --kg-berry #B9717A ........ 3.68  zu wenig
       --kg-muted #78808B auf Ivory ........ 3.68  zu wenig
       --kg-berry #B9717A auf Ivory ........ 3.39  zu wenig (Eyebrow)

     Geaendert wurde deshalb so wenig wie moeglich: Der Farbton bleibt,
     die Toene werden nur so weit abgedunkelt, bis sie die Grenze
     erreichen. Nebeneinandergelegt sieht man kaum einen Unterschied.

       --kg-berry-knopf #A3636B, weisser Text .... 4.61  reicht
       --kg-muted #6A717A auf Ivory .............. 4.54  reicht
       --kg-berry-dark #8E4E57 auf Ivory ......... 5.72  reicht

     --kg-berry selbst bleibt unveraendert. Es ist weiter die Farbe fuer
     Flaechen, Raender und Zeichen, also alles, was kein Text ist.
     -------------------------------------------------------------- */
  --kg-berry-knopf: #A3636B;   /* Knopfgrund, damit weisser Text reicht  */


  /* --- Kurznamen aus der bestehenden App (nicht aendern!) ----------- */

  --n:    var(--kg-navy);
  --b:    var(--kg-berry);
  --i:    var(--kg-ivory);
  --s:    var(--kg-sand);
  --t:    var(--kg-slate);
  --rose: var(--kg-blush);
  --m:    var(--kg-mint);

  /* --- Abstaende ---------------------------------------------------- */

  --kg-space-1: 4px;
  --kg-space-2: 8px;
  --kg-space-3: 14px;
  --kg-space-4: 22px;
  --kg-space-5: 34px;
  --kg-space-6: 56px;
  --kg-space-7: 88px;

  /* --- Rundungen (wie in deiner App) -------------------------------- */

  --kg-radius-s:  10px;
  --kg-radius-m:  12px;
  --kg-radius-l:  18px;
  --kg-radius-pill: 999px;

  /* --- Schrift ------------------------------------------------------ */

  --kg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* --- Maximale Inhaltsbreite --------------------------------------- */

  --kg-width: 1100px;
}