/* ══════════════════════════════════════════════════════════════
   FINA — Tokens
   Farben, Schriften, Reset und die Textzustände, die überall gelten.
   Wer das Erscheinungsbild global ändern will, ändert es hier.
   ══════════════════════════════════════════════════════════════ */

/* ── Die Schriften liegen bei ─────────────────────────────────
   Sie kamen bis August 2026 von fonts.googleapis.com. Das war an
   drei Stellen falsch: die native Fassung sähe ohne Internet
   anders aus, als sie soll; im Kopf von index.html steht, diese
   Seite lade nichts hoch, während jeder Aufruf die IP-Adresse des
   Besuchers an Google überträgt; und dasselbe Einbinden hat das
   LG München im Januar 2022 als DSGVO-Verstoß gewertet.

   Die Dateien stehen in css/fonts/, alle drei Schriften unter der
   SIL Open Font License (css/fonts/OFL.txt) — Mitliefern ist
   ausdrücklich erlaubt.

   Je Schnitt zwei Dateien: `latin` deckt Deutsch und Englisch ab,
   `latin-ext` holt der Browser nur nach, wenn wirklich ein Zeichen
   daraus auf dem Schirm steht. Archivo ist eine variable Schrift —
   eine Datei je Bereich trägt 400 bis 600, deshalb dort der
   Gewichtsbereich statt dreier Regeln.

   Wer einen weiteren Schnitt braucht, legt die .woff2 daneben und
   schreibt hier eine Regel dazu; heruntergeladen wird nichts mehr. */

/* Zilla Slab — Überschriften (--font-display) */
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/zilla-slab-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/zilla-slab-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/zilla-slab-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/zilla-slab-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/zilla-slab-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/zilla-slab-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Archivo — Oberfläche (--font-ui), variabel 400…600 */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('fonts/archivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* IBM Plex Mono — Zahlen und Tabellen (--font-data) */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --paper:#E9EAE3; --paper-2:#F4F5F0; --ink:#1B2320; --ink-2:#5A625C;
  --rule:#C7CBC0; --rule-strong:#A9AFA2; --seal:#B23A2E; --ok:#2E6A4C; --amber:#9A6A00;
  --shade:#DDDFD6;
  /* Abbezahlte Zeilen — in Jahres- wie in Monatsansicht dasselbe
     Grau. Eine Spur heller als --shade: es soll zurücktreten,
     nicht die Zeile ausstreichen. --shade bleibt, was es war
     (gesperrte Felder, Siegel). */
  --settled:#E5E7DE;
  /* Orange trägt, was etwas anbietet statt etwas zu tun: der
     Anleitungsknopf in der Kopfzeile (der einzige dort), der Satz
     auf der Begrüßungsseite, der zu ihm schickt — und der Ø über
     der Schnelleingabe der Flexible Payments. Der ist kein Betrag
     der Kategorie, sondern eine Auskunft daneben; in Rot oder Grün
     gäbe er sich als Einnahme oder Kosten aus.
     Und es trägt, **wo gefiltert wird**: die Trennlinien um die
     gewählte Zeile des Zeitstrahls und die Marke „Jetzt" an der
     laufenden. Auch das tut nichts, es sagt einen Zustand.
     --accent für Flächen, --accent-2 für Text: kleine Schrift
     braucht mehr Abstand zum Papier als eine Knopffläche. */
  --accent:#C25A19; --accent-2:#A2470F;
  /* Die helle, leuchtende Stufe: der Grund einer **Fläche**, die
     man von weitem sehen soll — die Filterzeile, solange sie
     greift. --accent ist als Knopffarbe gedacht und wird über eine
     ganze Leiste hinweg hart; dieser Ton hat mehr Licht und
     weniger Rot, trägt aber dieselbe Aussage. Dunkle Schrift und
     helle Knöpfe stehen darauf ruhig. */
  --accent-soft:#F0A551;
  /* Drei Stufen je Geldart, von hell nach kräftig:
     -1 die Posten, -2 die Kategorie darüber, -3 die Kopfzeile des
     Blocks. Die Stufen sind der Grund, warum man in der
     Jahresmatrix auf einen Blick sieht, worin man gerade liest.
     --edge-* ist die dazugehörige Kante. */
  --bg-in:#EDF4EE; --bg-in-2:#D2E7D9; --bg-in-3:#B4D7C0; --edge-in:#6FA07F;
  /* Der grüne Bereich **in den Grafiken** — Zeitstrahl, gefilterte
     Fassung, Verlauf der Prognose (.z-pos). Eine Spur kräftiger als
     --bg-in: über eine große Fläche verliert sich das Grün der
     Zeilen, und die Null wäre dann die einzige Stelle, an der man
     Plus von Minus unterscheidet. Nur eine Spur — es ist ein Grund,
     auf dem Balken liegen, keine Marke. Die Zeilen der Einträge
     behalten --bg-in: dort steht die Farbe auf 30 px Höhe und
     braucht keine Hilfe. */
  --zone-in:#E9F1EA;
  --bg-flex:#FAF5E4; --bg-flex-2:#EFE3BE; --bg-flex-3:#E2D096; --edge-flex:#B79A45;
  --bg-out:#FBF0EE; --bg-out-2:#F2D9D3; --bg-out-3:#E9BFB5; --edge-out:#BE7C6E;
  /* Saldokorrektur: ein ganz helles Blau, das sich von Grün,
     Gelb und Rot der drei Geldarten deutlich absetzt. */
  --bg-bal:#EFF4F9; --bg-bal-2:#DFEAF4; --bg-bal-3:#C6DCEE; --edge-bal:#7EA4C4;
  /* Dasselbe Blau als Schrift: die Kante ist hell genug für einen
     Balken, aber zu blass für ein Wort auf dem Papier — dieselbe
     Logik wie --ink-sal. Die Monatskarten der mobilen Jahresansicht
     schreiben ihr COR damit. */
  --ink-bal:#4E7CA8;
  /* Saldo je Monat: die Zeile über allem. Ein helles Violett —
     es gehört zu keiner der drei Geldarten, weil es sie alle
     zusammenfasst. */
  --bg-sal:#F4F0FB; --bg-sal-2:#E7DFF6; --bg-sal-3:#DDD0F0; --edge-sal:#9B85C9;
  /* Dasselbe Violett als Schrift: die Kante ist hell genug für
     einen Balken, aber zu blass für ein Wort und für eine Zahl.
     Der Anfangsbestand trägt sie — Beschriftung wie Betrag. */
  --ink-sal:#6D30C4;
  /* Restlaufzeit in der Spalte „Ende": auslaufend → weit weg */
  --end-now:#B7DFC6; --end-soon:#BBD6EC; --end-mid:#EDDDA0; --end-far:#EFC7BF;
  /* ── Mac-Chrome (Redesign 22.8.26) ──────────────────────────
     Die zwei Neutraltöne über dem Papier: --chrome-hi ist das
     hellste Grau der Toolbar, --chrome der Grund der Gruppenboxen
     in den Fenstern. --hairline trennt Menüeinträge und
     Tabellenzeilen — derselbe Wert wie --settled, aber eine Linie,
     keine Fläche: wer eine der beiden ändert, meint nicht die
     andere. */
  --chrome-hi:#F7F8F3; --chrome:#ECEDE6; --hairline:#E5E7DE;
  /* Verläufe und Schatten des Chrome — eine Stelle, vier Größen:
     Knopf, Karte, aufgeklapptes Menü, Fenster. */
  --grad-bar:linear-gradient(var(--chrome-hi),var(--chrome));
  --grad-btn:linear-gradient(#fff,var(--paper-2));
  --sh-btn:0 1px 1px rgba(0,0,0,.05);
  --sh-card:0 1px 2px rgba(0,0,0,.04);
  --sh-pop:0 8px 22px rgba(0,0,0,.18);
  --sh-modal:0 18px 44px rgba(0,0,0,.25);
  --font-display:'Zilla Slab',Georgia,serif;
  --font-ui:'Archivo',system-ui,-apple-system,sans-serif;
  --font-data:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Flaches Papier ohne die linierten Zeilen: das Mac-Chrome lebt
   von ruhigen Flächen und feinen Kanten — ein liniertes Blatt
   darunter machte jede Karte zum Fremdkörper. */
body{background:var(--paper);
  color:var(--ink);font-family:var(--font-ui);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}

/* ── Textzustände ─────────────────────────────────────────────
   Vorzeichenfarben. Achtung: In der Jahresmatrix werden .pos/.neg
   für Kategorienzeilen bewusst wieder auf Schwarz gesetzt
   (siehe matrix.css). */
.neg{color:var(--seal)}.pos{color:var(--ok)}.warn{color:var(--amber)}
.est{color:var(--amber)}
.note{font-size:11.5px;color:var(--ink-2)}
/* Eine Notiz behält ihre Zeilen — überall, wo sie zu sehen ist.
   Wer im Notizfenster eine neue Zeile anfängt, meint sie auch:
   eine Liste bliebe sonst ein einziger langer Satz. Deshalb
   pre-wrap statt normal, hier wie an .noteprev, .cellnote und
   der Sprechblase (.tip in css/components.css). */
/* Die Monatsnotiz steht links unter der Zahlungszeile und reicht
   nach rechts so weit wie ihre Zelle — bis an den Rand des Blocks.
   Der senkrechte Strich davor bindet sie an die Position und wächst
   mit ihr: bei mehreren Zeilen über alle.

   **Die Vorschau unter dem Namen sieht genauso aus.** Eine Notiz
   ist eine Notiz — in der Monatsansicht, in der Jahresmatrix und
   in den Fast Budget Details; sähe sie je Ansicht anders aus,
   sähe sie nach etwas anderem aus. Deshalb steht das Bild hier an
   **einer** Stelle, und .noteprev legt nur noch den Abbruch nach
   zwei Zeilen darüber (siehe unten). */
.itemnote,.noteprev{display:block;font-size:11.5px;color:var(--ink);white-space:pre-wrap;text-align:left;
  margin-top:4px;padding-left:9px;border-left:2px solid var(--rule-strong)}
/* Vorschau der Notiz zur ganzen Position: zwei Zeilen unter dem
   Namen, danach Auslassungspunkte. Der volle Text steht in der
   Sprechblase und im Notizfenster.

   Der Abbruch bleibt: eine Zeile der Jahresmatrix darf nicht mit
   der Länge einer Notiz wachsen — zehn Zeilen Text schöben die
   zwölf Monatsspalten daneben auseinander. In der Monatsansicht
   steht die Notiz in einer eigenen Zeile und darf ausschreiben. */
.noteprev{overflow-wrap:anywhere;overflow:hidden;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}