/* ===========================================================================
 * palette.css — die Farben und Maße des Programms, an einer Stelle
 *
 * Vorher standen rund 155 Farbwerte direkt zwischen den Regeln, verteilt auf
 * `index.html`, `knopf.css` und `login.html`. Beim Umfärben am 01.08.2026
 * wurden sie einzeln von Hand ersetzt — die nächste Farbänderung wäre wieder
 * Handarbeit gewesen, und die PDF-Vorlage (`templates/rechnung.css`) wurde
 * dabei schlicht vergessen.
 *
 * Der eigentliche Anlass für eine eigene Datei ist aber ein anderer:
 * `knopf.css` wird von **beiden** Seiten geladen (Programm und Anmeldung),
 * hatte selbst kein `:root` und lebte von den Variablen der jeweiligen Seite.
 * `login.html` kannte davon nur sechs — jede Variable, die knopf.css benutzt
 * hätte, wäre auf der Anmeldeseite ins Leere gelaufen. Jetzt laden beide
 * Seiten diese Datei, und es gibt nur noch eine Liste.
 *
 * WICHTIG: Die PDF-Vorlage `templates/rechnung.css` hat ihr **eigenes**
 * `:root` und liest diese Datei nicht — sie wird von Puppeteer ohne den
 * Webserver gerendert. Wer hier eine Farbe ändert, die auch auf dem
 * gedruckten Blatt steht, ändert sie dort ein zweites Mal. Beide Stellen sind
 * gegenseitig kommentiert.
 * ========================================================================= */

:root{
  /* --- Grundton ---------------------------------------------------------- */
  --anthrazit:#1E293B;      /* Seitenleiste, dunkle Flächen */
  --anthrazit-tief:#0F172A;
  --anthrazit-hell:#334155; /* Abzeichen in der dunklen Leiste */
  --blau:#2563EB;           /* Akzent: Knöpfe, Verweise, aktive Punkte */
  --blau-tief:#1D4ED8;      /* Knopf unter dem Zeiger */
  --blau-hell:#93C5FD;      /* Akzent AUF dunklem Grund — nicht auf Weiß */
  --blau-zart:#BFDBFE;      /* Schrift im Abzeichen der Leiste */
  --grau:#F8FAFC;           /* Seitenhintergrund */
  --flaeche:#FFFFFF;        /* Karten, Tabellen, Felder */
  --text:#0F172A;
  --muted:#64748B;          /* Hilfstext auf Weiß */
  --muted-hell:#94A3B8;     /* Platzhalter — 3,0:1, gerade noch lesbar */
  --rand:#E2E8F0;           /* die eine Kantenfarbe — überall dieselbe */
  --rand-hell:#F1F5F9;      /* Trennlinien innerhalb einer Fläche */
  --rand-stark:#CBD5E1;     /* betonte Kante: Eingabefeld unter dem Zeiger */

  /* Ecken. Drei Stufen, mehr nicht: Fläche · Kasten · Bedienelement. Vorher
     standen 8, 10 und 12 px verstreut zwischen den Regeln, und beim
     Nebeneinander sah man die Unruhe, ohne sie benennen zu können. */
  --ecke-flaeche:12px;      /* Karten, Blöcke, Kacheln */
  --ecke-kasten:10px;       /* Tabellenrahmen, Hinweisfelder */
  --ecke-element:8px;       /* Knöpfe, Eingabefelder */

  /* --- Meldungsfarben ------------------------------------------------------
     Je Meldung drei Werte: Schrift, Untergrund, Kante. Sie hängen zusammen und
     gehören deshalb nebeneinander — wer den Untergrund ändert und die Kante
     vergisst, sieht es erst am Bildschirm. */
  --gruen:#15803D;  --gruen-bg:#DCFCE7;  --gruen-rand:#BBF7D0;  --gruen-text:#166534;
  --rot:#B91C1C;    --rot-bg:#FEE2E2;    --rot-rand:#FECACA;    --rot-text:#991B1B;
  --rot-hell:#DC2626;                    /* Löschkreuz unter dem Zeiger */
  --gelb:#B45309;   --gelb-bg:#FEF3C7;   --gelb-rand:#FDE68A;   --gelb-text:#92400E;

  /* --- Zustände einer Rechnung --------------------------------------------
     Schrift und Untergrund je Zustand. Der Zustand steht nie nur in der Farbe:
     die Pille trägt immer ihr Wort. */
  --st-entwurf:#475569;    --st-entwurf-bg:#F1F5F9;
  --st-offen:#1D4ED8;      --st-offen-bg:#DBEAFE;
  --st-bezahlt:#15803D;    --st-bezahlt-bg:#DCFCE7;
  --st-ueberfaellig:#B91C1C; --st-ueberfaellig-bg:#FEE2E2;
  --st-storniert:#57534E;  --st-storniert-bg:#F5F5F4;

  /* --- Durchscheinende Schichten -------------------------------------------
     Auflagen auf dunklem oder hellem Grund; der Grundton scheint durch, damit
     sie auf jedem Untergrund sitzen. Die letzten zwei Stellen sind die
     Deckkraft. */
  --auf-dunkel-schwach:#0F172A66;   /* Menüpunkt unter dem Zeiger */
  --auf-dunkel-mittel:#0F172A99;    /* der aktive Menüpunkt */
  --auf-dunkel-stark:#0F172ABB;
  --auf-hell-schwach:#FFFFFF1F;     /* Trennlinie in der dunklen Leiste */
  --auf-hell-mittel:#FFFFFF2E;

  /* --- Schatten ------------------------------------------------------------ */
  --schatten-zart:#0F172A22;
  --schatten:#0F172A26;
  --schatten-stark:#0F172A33;

  /* --- Sehr helle Tönungen ------------------------------------------------- */
  --tuepfel-blau:#F5F9FF;   /* angetippte Zeile */
  --tuepfel-grau:#FCFDFE;   /* Wechselzeile in langen Tabellen */
}