/* ==========================================================================
   MARKEN — die Werte, aus denen die ganze Oberfläche gebaut ist.
   Farbe, Schriftgrößen, Abstände, Rundungen. Sonst nichts.

   REGEL FÜR ALLES DARUNTER: Keine Datei außer dieser schreibt eine Farbe
   als Zahl hin. Wer #a8813f in bausteine.css tippt, hat das System
   verlassen — und beim nächsten Umbau bleibt genau diese Stelle stehen.

   DREI FARBROLLEN, UND SIE WERDEN NIE VERMISCHT
   ---------------------------------------------
     Akzent   Gold. Sagt „hier bist du" — aktives Menü, Marke, Fokus.
              Er sagt NIE etwas über einen Zustand.
     Daten    Blau = Eingang, Orange = Ausgang. Nur an Geldbeträgen.
     Zustand  Grün fertig, Bernstein wartet, Rot Fehler.

   Vorher machte Gold gleichzeitig Akzent UND „wartet" UND Überschrift.
   Deshalb sah jede Seite gleich dringend aus — also gar nicht dringend.

   WARUM BLAU UND ORANGE STATT GRÜN UND ROT
   ----------------------------------------
   Grün #2f6b4f gegen Rot #8c3b3b liegt für rot-grün-blinde Augen bei einem
   Farbabstand von rund 13. Blau gegen Orange liegt bei 78 bis 122 — bei
   gleichem Kontrast zum Hintergrund. Zusätzlich steht vor jedem Betrag ein
   Pfeil: ↓ herein, ↑ hinaus. Wer die Farben gar nicht sieht, liest die
   Richtung trotzdem.
   ========================================================================== */

:root{
  color-scheme:light dark;

  /* --- Grund und Tinte --------------------------------------------------
     Kein reines Weiß und kein reines Schwarz. Beide Neutraltöne sind leicht
     ins Warme gezogen — dieselbe Richtung wie das Gold. */
  --bg:#fbf9f7;          /* der Grund der Seite */
  --card:#ffffff;        /* was darauf liegt */
  --feld:#ffffff;        /* Eingabefelder */
  --feld-still:#fdfcfb;  /* Ablageflächen, ruhende Felder */
  --line:#e6dfda;        /* jede Trennlinie */
  --line-stark:#d5cac2;  /* Linien, die etwas abgrenzen sollen */

  --ink:#1a1614;         /* Überschriften, Zahlen, alles Wichtige */
  --ink2:#4a4340;        /* Fließtext */
  /* Gemessen am 03.09.2026: #8a8280 kam auf dem Seitengrund nur auf 3,58:1.
     Lesbar wird Schrift ab 4,5:1 — dieser Ton hält 4,54:1 und behält den
     warmen Stich. Beiwerk darf leise sein, aber nicht unlesbar. */
  --muted:#79716f;       /* Beiwerk: Einheiten, Datumsangaben, Hinweise */

  /* --- Akzent ---------------------------------------------------------- */
  --gold:#a8813f;        /* Flächen, Linien, Zeichen — nicht für Schrift auf Gold */
  /* Gold AUF Goldfeld kommt nur auf 3,1:1. Für Schrift in einem goldenen
     Feld (Marken, Chips) gibt es deshalb einen dunkleren Zwilling: 4,5:1.
     Zwei Töne statt einem — sonst müsste man das Gold der ganzen Marke
     dunkler machen, nur damit ein Chip lesbar wird. */
  --gold-text:#886833;
  --gold-bg:#f6efe3;
  --gold-linie:#e2d3ba;

  /* --- Daten: Richtung des Geldes -------------------------------------- */
  --ein:#1a6ea8;   --ein-bg:#e8f0f7;
  --aus:#c2410c;   --aus-bg:#fbeee7;

  /* --- Zustand --------------------------------------------------------- */
  --fertig:#2f6b4f;  --fertig-bg:#e8f2ec;
  --wartet:#916414;  --wartet-bg:#f7eeda;
  --fehler:#a3352f;  --fehler-bg:#f9ebea;

  /* --- Schrift ----------------------------------------------------------
     Bewusst die Schrift des Geräts, keine geladene Webschrift: Das Cockpit
     wird auf dem Handy im Studio geöffnet, oft bei schlechtem Netz. Eine
     Schrift, die erst nachgeladen wird, lässt die Seite zweimal springen.
     Die Arbeit steckt stattdessen in der Staffelung. */
  --schrift:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  --schrift-zahl:var(--schrift);

  --gr-mini:11px;    /* Augenbrauen-Zeilen, versal, gesperrt */
  --gr-klein:12.5px; /* Beiwerk unter einer Zeile */
  --gr-neben:13.5px; /* Hinweise, Fußzeilen */
  --gr-text:15px;    /* Fließtext in Karten */
  --gr-lies:16px;    /* längerer Fließtext */
  --gr-h3:15px;
  --gr-h2:17px;
  --gr-h1:19px;      /* Kopfleiste */
  --gr-seite:27px;   /* Seitenkopf eines Bereichs */
  --gr-zahl:26px;    /* große Kennzahl */

  /* --- Abstände: eine Leiter, keine freien Zahlen ----------------------- */
  --a1:4px; --a2:8px; --a3:12px; --a4:16px; --a5:22px; --a6:30px; --a7:44px;

  /* --- Rundungen: drei Stufen, nach Rolle ------------------------------
     klein = Knöpfe und Marken, mittel = Felder, groß = Karten. Eine einzige
     Rundung auf allem lässt jedes Ding gleich wichtig aussehen. */
  --r-klein:7px; --r-mittel:9px; --r-gross:13px; --r-rund:999px;

  --schatten:0 1px 2px rgba(26,22,20,.04), 0 4px 16px rgba(26,22,20,.05);
  --schatten-hoch:0 6px 28px rgba(26,22,20,.10);
  --tempo:.18s;

  --kopf-hoehe:60px;
  --menue-breite:264px;
  --inhalt-breite:920px;
}

/* Dunkle Fassung: eigene Stufen aus denselben Tönen, nicht umgekehrt.
   Sie ist genauso durchgestaltet wie die helle — beide werden benutzt,
   das Handy schaltet abends von selbst um. */
@media (prefers-color-scheme: dark){
  :root:not([data-farbe="hell"]){
    --bg:#151312; --card:#1e1a18; --feld:#232020; --feld-still:#211e1d;
    --line:#332e2b; --line-stark:#443c37;
    --ink:#f0ece8; --ink2:#c3bcb6; --muted:#8f8783;
    --gold:#c9a05c; --gold-text:#d8b370; --gold-bg:#2a2318; --gold-linie:#4a3c25;
    --ein:#3987e5; --ein-bg:#141f2c;
    --aus:#da5e2c; --aus-bg:#2a1810;
    --fertig:#6db292; --fertig-bg:#1a2620;
    --wartet:#d3a24e; --wartet-bg:#2a2214;
    --fehler:#d98080; --fehler-bg:#2a1c1c;
    --schatten:0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
    --schatten-hoch:0 8px 30px rgba(0,0,0,.45);
  }
}
:root[data-farbe="dunkel"]{
  --bg:#151312; --card:#1e1a18; --feld:#232020; --feld-still:#211e1d;
  --line:#332e2b; --line-stark:#443c37;
  --ink:#f0ece8; --ink2:#c3bcb6; --muted:#8f8783;
  --gold:#c9a05c; --gold-text:#d8b370; --gold-bg:#2a2318; --gold-linie:#4a3c25;
  --ein:#3987e5; --ein-bg:#141f2c;
  --aus:#da5e2c; --aus-bg:#2a1810;
  --fertig:#6db292; --fertig-bg:#1a2620;
  --wartet:#d3a24e; --wartet-bg:#2a2214;
  --fehler:#d98080; --fehler-bg:#2a1c1c;
  --schatten:0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
  --schatten-hoch:0 8px 30px rgba(0,0,0,.45);
}

/* --- Alte Namen, damit nichts stehen bleibt -------------------------------
   Das Programm und die älteren Teile (uebersicht.css, werkbank.css) sprechen
   noch von --good und --bad. Statt fünfzehn Dateien anzufassen, zeigen die
   alten Namen hier auf die neuen. var() wird erst beim Benutzen aufgelöst —
   deshalb reicht diese eine Stelle für helle und dunkle Fassung.
   Neue Regeln benutzen --fertig/--fehler; die alten sterben mit der Zeit aus. */
:root{
  --good:var(--fertig);  --good-bg:var(--fertig-bg);
  --bad:var(--fehler);   --bad-bg:var(--fehler-bg);
  --warn:var(--wartet);
}