/* ==========================================================================
   FÖRDERBUCH – Grundgestaltung und Zeichenvorrat
   --------------------------------------------------------------------------
   WIE ES FUNKTIONIERT: Ganz oben stehen die WERTE (Markenfarben, Abstände,
   Schrift). Darunter steht nur noch, welcher Wert wo benutzt wird. Kein
   Bauteil weiter unten schreibt eine Farbe oder eine Pixelzahl direkt hin.

   WARUM DIESE TRENNUNG AB DER ERSTEN ZEILE: Im Schwesterprojekt sind über
   Jahre 5 357 feste Farbwerte, 274 verschiedene Schattenwerte und 1 434
   Inline-Styles entstanden – jede einzelne Stelle für sich harmlos. Das
   Ergebnis war nicht hässlich, sondern uneinheitlich, und das dunkle Design
   ließ sich nicht mehr einschalten, weil die Farben im Code festgenagelt
   waren. Jetzt kostet die Regel nichts. Später kostet sie Wochen.

   DIE REGEL, UND ZWAR GENAU SO WEIT, WIE SIE AUCH GEPRÜFT WIRD:
     1. Unterhalb von §4 steht KEIN Farbwert mehr – kein #rrggbb, kein rgb(),
        kein Farbname. Nur var(--…). Das prüft der Wächter.
     2. Abstände, Ecken und Schriftgrößen kommen aus den Werten in §2.
        Ausgenommen sind Haarlinien (1px, 2px, 3px) und einzelne optische
        Maße wie die Höhe der Wortmarke – dafür einen Wert anzulegen wäre
        Bürokratie ohne Nutzen.
     3. Keine <style>-Blöcke und kein style="…" in den Vorlagen.
     4. Keine Schatten (§5).
   Punkte 1, 3 und 4 stehen in qa/unit/test_design_system.py. Was nicht
   geprüft wird, ist keine Regel, sondern eine Hoffnung.

   VERBUNDEN MIT: docs/DESIGN_SYSTEM.md (die Begründungen und die Regeln),
   qa/unit/test_design_system.py (der Wächter), templates/*.html,
   static/bilder/ (Wortmarke und Zeichen).
   ========================================================================== */

/* ===== §1 MARKE ==========================================================
   Die drei Werte stammen aus der Wortmarke selbst (static/bilder/
   wortmarke.svg), nicht aus einem Farbrad. Wer sie ändert, ändert das Logo
   mit – sonst stehen zwei Grüntöne nebeneinander, und genau daran erkennt
   man ein Produkt, das aus Teilen zusammengesetzt wurde. */
:root {
  --marke-gruen: #155f3e;
  --marke-blau:  #19334e;
  --marke-creme: #fcf9f2;
}

/* ===== §2 BEDEUTUNGEN (hell) =============================================
   Bauteile benutzen NUR diese Namen, nie die Markenwerte aus §1 direkt.
   So lässt sich das dunkle Design an EINER Stelle umschalten. */
:root {
  --grund:        #ffffff;              /* Karten, Tabellen, Formulare */
  --papier:       var(--marke-creme);   /* die Seite hinter den Karten */
  --text:         var(--marke-blau);    /* Fließtext und Überschriften */
  --leise:        #5d6b73;              /* Zweitrangiges, Hilfetexte */
  --linie:        #e6e0d4;              /* 1px-Linien, warm zum Creme */
  --akzent:       var(--marke-gruen);   /* Verweise, Knöpfe, Marke */
  --akzent-hell:  #e8f0ea;              /* Fläche hinter dem Akzent */
  --fokus:        #1c6fd0;              /* Tastatur-Fokus, bewusst NICHT grün:
                                           er muss sich von jedem Zustand
                                           unterscheiden, auch von "gut" */

  /* Die Ampel (docs/PLAN_FOERDERBUCH.md §5.B). Steht hier, obwohl sie noch
     niemand benutzt – gerade deshalb: sie soll nicht später dreimal in drei
     Grüntönen erfunden werden. Alle drei erreichen auf --papier mindestens
     4,5:1; die Farbe ist trotzdem nie das einzige Merkmal, jede Ampel trägt
     zusätzlich Wort und Zeichen (DESIGN_SYSTEM.md §6). */
  --gut:          #155f3e;
  --gut-hell:     #e8f0ea;
  --warnung:      #8a5300;
  --warnung-hell: #fbf0dd;
  --schlecht:     #9b2226;
  --schlecht-hell:#fbe9e9;

  /* Abstände. EINE Reihe, keine Zwischenwerte. Wer 13px braucht, braucht
     in Wirklichkeit 12 oder 16. */
  --a1: .25rem;  --a2: .5rem;   --a3: .75rem;  --a4: 1rem;
  --a5: 1.5rem;  --a6: 2rem;    --a7: 3rem;

  /* Ecken und Linien. Drei Werte reichen für alles. Keine Schatten – die
     Fläche wird von 1px-Linien getragen (DESIGN_SYSTEM.md §5). */
  --ecke-klein: 8px;
  --ecke:       12px;
  --ecke-rund:  999px;

  /* Schriftgrößen. Eine Skala, sieben Stufen, sonst nichts. */
  --s-klein:  .85rem;
  --s-hinweis:.92rem;
  --s-text:   1rem;
  --s-h3:     1.05rem;
  --s-h2:     1.15rem;
  --s-h1:     1.9rem;
  --s-zahl:   1.6rem;   /* große Beträge im Dashboard */
}

/* ===== §3 DUNKEL =========================================================
   Nur Werte, keine Bauteile. Wenn hier je ein Bauteil auftaucht, ist oben
   etwas falsch gebaut. */
@media (prefers-color-scheme: dark) {
  :root {
    --grund:        #151d27;
    --papier:       #0f151d;
    --text:         #eaeef2;
    --leise:        #9aa7b2;
    --linie:        #2a3542;
    --akzent:       #5fb489;   /* aufgehelltes Markengrün: das dunkle Grün
                                  erreicht auf dunklem Grund keine 4,5:1 */
    --akzent-hell:  #172a22;
    --fokus:        #6cb2ff;
    --gut:          #5fb489;
    --gut-hell:     #172a22;
    --warnung:      #e0a75e;
    --warnung-hell: #2c2415;
    --schlecht:     #f08b8b;
    --schlecht-hell:#2e1a1b;
  }
}

/* ===== §4 GRUNDLAGEN =====================================================
   SCHRIFT – die Entscheidung steht in docs/DESIGN_SYSTEM.md §4 (ADR-015):
   EIN Stapel Systemschriften, keine geladene Schriftdatei. Das hält die CSP
   bei 'self', spart jede Ladezeit und kostet keine Lizenzfrage. Der
   Wiedererkennungswert kommt aus der Wortmarke, nicht aus dem Fließtext.

   `tabular-nums` ist hier kein Feinschliff, sondern Pflicht: In einer
   Belegliste müssen 1.428,00 und 850,00 untereinander bündig stehen. Ohne
   diese Zeile sind die Spalten in jedem Nachweis krumm. */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  background: var(--papier);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: var(--s-text);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

/* Beträge, Fristen, Kennzeichen: gleiche Ziffernbreite, nie umbrechend. */
.zahl, td.zahl, .betrag {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Tastaturbedienung sichtbar machen – Pflicht, nicht Geschmack. */
:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
  border-radius: var(--ecke-klein);
}

/* ===== §5 GERÜST ========================================================= */
.huelle {
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--a7) 1.25rem var(--a7);
}

.kopf {
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--a5) 1.25rem 0;
}

/* Die Wortmarke wird über die HÖHE gesetzt, nie über die Breite: die
   Buchstabenhöhe soll überall gleich wirken, egal ob ein- oder zweizeilig. */
.kopf .wortmarke { height: 26px; width: auto; }

/* Die helle Fassung erscheint nur im dunklen Design, und umgekehrt. Zwei
   Dateien statt einer Filterrechnung – ein CSS-Filter über ein Logo ist die
   Sorte Trick, die bei der nächsten Farbänderung falsch aussieht.
   BEIDE Regeln tragen denselben Selektoraufbau (.kopf + Klasse). Ein
   kürzerer Selektor hier hat beim ersten Versuch verloren, und das Ergebnis
   war kein Fehler, sondern zwei Logos übereinander – die Sorte Fehler, die
   man nur sieht, wenn man das dunkle Design wirklich anschaut. */
.kopf .wortmarke-dunkel { display: block; }
.kopf .wortmarke-hell   { display: none; }
@media (prefers-color-scheme: dark) {
  .kopf .wortmarke-dunkel { display: none; }
  .kopf .wortmarke-hell   { display: block; }
}

.karte {
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--ecke);
  padding: var(--a6);
}

/* ===== §6 TEXT =========================================================== */
h1 { margin: 0 0 var(--a1); font-size: var(--s-h1); letter-spacing: -.02em; }
h2 { margin: var(--a5) 0 var(--a2); font-size: var(--s-h2); }
h3 { margin: var(--a4) 0 var(--a1); font-size: var(--s-h3); }

.unterzeile { margin: 0 0 var(--a5); color: var(--leise); }

ul { padding-left: 1.1rem; }
li { margin: var(--a1) 0; }

a { color: var(--akzent); }

.marke {
  display: inline-block;
  background: var(--akzent-hell);
  color: var(--akzent);
  border-radius: var(--ecke-rund);
  padding: .2rem .7rem;
  font-size: var(--s-klein);
  font-weight: 600;
  margin-bottom: var(--a4);
}

.hinweis {
  background: var(--papier);
  border-left: 3px solid var(--akzent);
  padding: var(--a3) var(--a4);
  border-radius: 0 var(--ecke-klein) var(--ecke-klein) 0;
  color: var(--leise);
  font-size: var(--s-hinweis);
}

footer {
  margin-top: var(--a6);
  padding-top: var(--a4);
  border-top: 1px solid var(--linie);
  font-size: var(--s-klein);
  color: var(--leise);
  display: flex;
  flex-wrap: wrap;
  gap: var(--a1) var(--a4);
  align-items: center;
}

footer a { color: var(--leise); }

/* ===== §7 SCHMALE SCHIRME ===============================================
   NUR überschreiben, was am Telefon wirklich klemmt. Am Rechner war nichts
   kaputt – wer hier Grundregeln umbaut, repariert das Falsche. */
@media (max-width: 640px) {
  .huelle { padding: var(--a5) var(--a4) var(--a7); }
  .kopf   { padding: var(--a4) var(--a4) 0; }
  .karte  { padding: 1.25rem; border-radius: var(--ecke-klein); }
  h1 { font-size: 1.5rem; }
}

/* Wer Bewegung abgestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}