/* ══════════════════════════════════════════════════════════════
   FINA — Kontoblatt
   Die einspaltigen Tabellen der Monats-, Prognose- und
   Kakeibo-Ansicht. Die Jahresmatrix liegt in matrix.css.
   ══════════════════════════════════════════════════════════════ */

/* Die drei Spalten vor der Bezeichnung — Siegel, Betrag,
   Werkzeuge — haben feste Breiten (Mac-Raster: 16-px-Siegel,
   84-px-Betrag, drei 16-px-Werkzeuge). Ihre Summe steht als
   --leadw bereit: das Suchfeld der Filterzeile ist genau so breit.
   Wer eine der drei Breiten ändert, ändert sie hier. */
:root{--markw:28px;--penw:76px;--leadw:calc(var(--markw) + 96px + var(--penw))}

.ledger{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ledger td,.ledger th{border-bottom:1px solid rgba(0,0,0,.10);padding:6px;text-align:left;font-weight:400;vertical-align:top}
.ledger th{font-family:var(--font-data);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.ledger .num{text-align:right;font-family:var(--font-data);font-size:12px;white-space:nowrap;vertical-align:middle}
/* Die Zeilen einer Bereichskarte reichen bis an deren Rand: außen
   je 12 px, wie es das Mac-Raster vorgibt. **Die Verlaufsspalte der
   Prognose bleibt außen vor**: .flowcell darf auf keiner Seite ein
   Polster tragen, sonst rechnen Raster (Padding-Box der Zelle) und
   Balken (Content-Box der Fläche) in zwei verschiedenen Breiten und
   der Kontostand-Strich landet neben seiner Rasterlinie. */
.card .ledger td:first-child{padding-left:12px}
.card .ledger td:last-child:not(.flowcell){padding-right:12px}
/* Name links, Marke rechts am Rand der Zeile. Die Marke sagt
   etwas über die Zahl, nicht über den Namen — direkt hinter dem
   Namen las sie sich wie ein Teil davon. */
.ledger .rowline{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ledger .rowline .pill{margin-left:0;flex:0 0 auto}
.ledger td.amt{vertical-align:top;padding-top:8px!important;width:84px}
.ledger td.num.est{color:var(--amber)!important;font-weight:400}
/* ── Bank, Zahlungsart, Fälligkeit als eigene Spalten ─────────
   Das unsichtbare Raster des Mac-Redesigns: 96 · 76 · 46 px rechts
   vom Namen, in der gedämpften Schrift der Metazeile. Nur am
   Schreibtisch — das Telefon behält die Metazeile unter dem Namen
   (metaCells in js/views/monat.js). */
/* **Auf Höhe des Namens**, nicht mittig: eine Zeile mit Notiz
   wird höher, und mittig rutschten die drei Angaben dann unter
   die Zeile des Namens. Das Polster oben gleicht die kleinere
   Schrift aus (Name 12,5 px ab 6 px, hier 10,5 px ab 8 px). */
.ledger td.mcol{font-size:10.5px;color:var(--ink-2);vertical-align:top;padding-top:8px;white-space:nowrap}
.ledger td.mbank{width:96px}
.ledger td.mpay{width:76px}
.ledger td.mdue{width:46px;text-align:right}
/* Wird das Fenster eng, stehen statt der vollen Namen die Kürzel
   der Jahresmatrix (B · PT · DD); der volle Name wandert in die
   Sprechblase des Kürzels (title, gesetzt in metaCells()). */
.mcol .mabbr{display:none}
@media(max-width:1280px){
  .ledger td.mcol .mfull{display:none}
  .ledger td.mcol .mabbr{display:inline}
  .ledger td.mbank{width:44px}
  .ledger td.mpay{width:40px}
}
/* ── Die Monatsnotiz als eigene Zeile ─────────────────────────
   Sie spannt von der Namensspalte bis an den rechten Rand der
   Karte (colspan über die Meta-Spalten, siehe noteRow() in
   js/views/monat.js). Die Trennlinie sitzt unter der Notiz —
   zwischen Position und ihrer Notiz gibt es keine: beides ist
   eine Zeile, nur technisch sind es zwei. */
.ledger tr:has(+tr.noterow) td{border-bottom:0}
.ledger tr.noterow td{padding-top:0}
.ledger td.notecell .itemnote{margin-top:0}

/* ── Zeilentypen ──────────────────────────────────────────── */
.ledger tr.group td{background:rgba(0,0,0,.05);font-family:var(--font-data);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);padding:9px 6px 8px;border-bottom:1px solid var(--rule-strong);vertical-align:middle}
/* Die Kategoriezeile im Block der regelmäßigen Kosten trägt
   dessen Farbe, eine Stufe kräftiger als die Posten darunter —
   ein Grau von 5 % hob sie kaum von der Karte ab. Anderswo bleibt
   tr.group neutral: im Flexible-Payments-Bereich gliedert dieselbe
   Zeile Monate und Hauptkategorien, nicht Kostenblöcke. */
.card.sec-out .ledger tr.group td{background:var(--bg-out-2);font-weight:600;
  border-bottom:1px solid var(--edge-out);border-top:1px solid var(--edge-out)}
.card.sec-out .ledger tr.group td:first-child{box-shadow:inset 5px 0 0 var(--edge-out)}
/* Dasselbe im Einnahmenblock: seit es mehrere Einnahme-Kategorien
   geben kann, gliedert dieselbe Zeile auch dort — und trägt die
   Farbe ihrer Geldart, eine Stufe kräftiger als die Posten. */
.card.sec-in .ledger tr.group td{background:var(--bg-in-2);font-weight:600;
  border-bottom:1px solid var(--edge-in);border-top:1px solid var(--edge-in)}
.card.sec-in .ledger tr.group td:first-child{box-shadow:inset 5px 0 0 var(--edge-in)}
.ledger tr.sum td{font-weight:600;border-top:1px solid var(--rule-strong);border-bottom:0;vertical-align:middle}
/* ── Unter der letzten Zeile keine Trennlinie ────────────────
   Die dünne Linie trennt zwei Posten voneinander. Unter dem
   letzten steht keiner mehr — dort schließt die Karte selbst ab,
   und ein Strich quer über ihren unteren Rand sähe aus, als käme
   noch etwas. Gilt für alle drei Karten der Monatsansicht, damit
   sie nicht auseinanderlaufen; die mobile Fassung macht es seit
   jeher so (css/mobile.css, dort sitzt die Linie an der Zeile). */
.card.sec-in .ledger tr:last-child td,
.card.sec-flex .ledger tr:last-child td,
.card.sec-out .ledger tr:last-child td{border-bottom:0}
/* ── Die Zeilen tragen die Farbe ihres Bereichs ───────────────
   Die Karte selbst ist weiß (css/layout.css); die hellste
   Blockstufe liegt als Grund an der Tabelle, damit Kategorie-
   (Stufe -2) und abbezahlte Zeilen (--settled) sie an der Zelle
   überschreiben können. Die Trennlinien nehmen die zweite Stufe. */
.card.sec-in .ledger{background:var(--bg-in)}
.card.sec-flex .ledger{background:var(--bg-flex)}
.card.sec-out .ledger{background:var(--bg-out)}
.card.sec-in .ledger td{border-bottom-color:var(--bg-in-2)}
.card.sec-flex .ledger td{border-bottom-color:var(--bg-flex-2)}
.card.sec-out .ledger td{border-bottom-color:var(--bg-out-2)}
/* Die Rundung der Karte unten übernimmt die letzte Zeile — die
   Karte darf kein overflow:hidden tragen (klebender Kopf). */
.card.sec-in .ledger tr:last-child td:first-child,
.card.sec-flex .ledger tr:last-child td:first-child,
.card.sec-out .ledger tr:last-child td:first-child{border-bottom-left-radius:8px}
.card.sec-in .ledger tr:last-child td:last-child,
.card.sec-flex .ledger tr:last-child td:last-child,
.card.sec-out .ledger tr:last-child td:last-child{border-bottom-right-radius:8px}
.card.sec-in .ledger,.card.sec-flex .ledger,.card.sec-out .ledger{border-radius:0 0 8px 8px}
/* Saldokorrektur: wie eine Kategoriezeile gesetzt, aber ohne
   deren graue Hinterlegung — die Karte darunter ist schon blau. */
.ledger tr.balrow td{background:transparent;border-bottom:0;vertical-align:middle;padding:6px}
.ledger tr.balrow td.amt,.ledger tr.balrow td.pencell{padding-top:6px!important}
/* Beschriftung in Mono-Versalien und dem Blau der Saldokorrektur —
   die freistehende Zeile nach 3a/3b. Werkzeuge und Kettensymbol
   dämpft die dritte Blaustufe, solange dort nichts hinterlegt ist. */
.ledger tr.balrow .balname{font-family:var(--font-data);font-size:11px;letter-spacing:.08em;
  font-weight:600;text-transform:uppercase;color:var(--ink-bal);cursor:help}
.card.sec-bal .pencil{color:var(--ink-bal)}
.card.sec-bal .lamp,.card.sec-bal .linkicon.linkdash{color:var(--bg-bal-3)}

/* Die Spalte „Balance corr." der Prognose steht wie jede andere
   Spalte da — die Zeile in Monats- und Jahresansicht behält ihre
   Farbe, die Tabelle hier bleibt ruhig. */
.ledger tr.paid td{color:var(--ink-2)}
/* Der Betrag behält auch in einer abgehakten Zeile seine
   Vorzeichenfarbe — nur der Text daneben tritt zurück. */
.ledger tr.paid td.num.neg{color:var(--seal)}
.ledger tr.paid td.num.pos{color:var(--ok)}

/* Abbezahlt für das ganze Jahr: derselbe graue Grund wie in der
   Jahresmatrix (--settled in css/tokens.css). Der Name bleibt
   schwarz — grau ist der Hintergrund, nicht die Position; nur die
   Zeile darunter mit Bank, Zahlungsart und Fälligkeit tritt
   zurück, wie sie es ohnehin tut. */
.ledger tr.settled td{background:var(--settled)}
.ledger tr.settled td.nm .iname{color:var(--ink)}

/* ── Zellen mit Siegel und Stift ──────────────────────────── */
.markcell{width:var(--markw);vertical-align:top}
/* Stift links, Notizlampe genau mittig zwischen Stift und
   Positionsnamen. Der Raum, in dem die Lampe zentriert wird, muss
   dafür bis zum ersten Buchstaben des Namens reichen — also über
   den rechten Innenabstand dieser Zelle (6px) und den linken der
   Namensspalte (6px) hinaus. Genau diese 12px holt der negative
   Außenabstand zurück; ohne ihn säße die Lampe 6px zu weit
   links. */
/* ── Stift und Notizlampe zwischen Betrag und Bezeichnung ─────
   **Alle Abstände gleich: 12 px.** Betrag zur Stiftspalte, Stift
   zur Lampe, Lampe zur Bezeichnung — die beiden Symbole stehen
   zwischen zwei Angaben und gehören zu keiner von beiden; wäre
   einer der Abstände kleiner, sähe das Symbol wie ein Anhängsel
   der näheren Angabe aus.

   Es sind **drei** Symbole, in derselben Reihenfolge wie die
   festen Spalten der Jahresmatrix: Stift, Link, Notizlampe.

   Gemacht wird es von den Innenabständen der Zellen (6 px links
   und rechts, also 12 px an jeder Grenze) und einem gleich großen
   Abstand im Flex dazwischen. Die Spalte ist deshalb genau so
   breit wie ihr Inhalt: 3 × 20 + 2 × 12 + 12 Polster = 96 px
   (--penw). Wer an --penw dreht, verschiebt auch die Breite des
   Suchfelds (--leadw) und muss die Abstände hier nachrechnen.

   Der Stift ist so groß wie das Symbol der Lampe (15 px): sie
   stehen nebeneinander und sind gleich wichtig. */
.pencell{width:var(--penw);vertical-align:top;padding-top:7px!important;white-space:nowrap}
.pencell .ptools{display:flex;align-items:center;gap:8px}
.pencell .pencil{font-size:13px}
.iname{line-height:1.3}
.ledger .iname{font-family:var(--font-ui);font-weight:400;font-size:12.5px;letter-spacing:0;text-transform:none;line-height:1.3}

/* ── Kakeibo-Auswertung ───────────────────────────────────────
   Links der Pfeil, der rechts die Buchungen der Zeile zeigt;
   rechts die Datumsspalte dieser Buchungen. */
/* Der Pfeil ist ein Knopf wie „Größte Einzelposten" darüber und
   schließt rechts mit ihm ab — deshalb kein Innenabstand rechts. */
.ledger td.arrowcell{width:44px;text-align:right;vertical-align:middle;padding-left:0;padding-right:0}
.btn.small.rowarrow{padding:1px 6px;font-family:var(--font-data);font-size:10px;line-height:1.5;border-radius:4px}
.btn.rowarrow[aria-pressed="true"],.btn.ktop[aria-pressed="true"]{background:var(--ink);color:var(--paper-2);border-color:var(--ink)}
.ledger td.tdate{font-family:var(--font-data);font-size:11.5px;color:var(--ink-2);white-space:nowrap;
  width:58px;padding-top:9px}

/* Die Hauptkategorie-Zeile nach 4c: Grund in der hellsten
   Flex-Stufe, Trennlinie eine Stufe kräftiger, gewöhnliche
   Oberflächenschrift statt Versalien-Mono. */
.ledger tr.kmain td{font-weight:600;font-family:var(--font-ui);font-size:12px;letter-spacing:0;
  text-transform:none;background:var(--bg-flex);border-bottom:1px solid var(--bg-flex-2);padding-top:6px}
.ledger tr.kmain:first-child td{padding-top:6px}
.ledger tr.ksub td{padding-left:14px;border-bottom-color:var(--hairline)}
/* Der Balken teilt sich die Breite mit der neuen Spalte „Art" —
   34 % ließen dem Namen daneben zu wenig. */
.barcell{width:26%;padding-right:0!important}
/* ── Die Werkzeugleiste der Transactions-Ansicht (4c) ─────────
   Ein grauer Kasten wie die Filterzeile des Monats; der Trenner
   steht als eigene Linie zwischen Zeitraum und Gliederung, der
   Zähler rechts in Mono. */
.filterbar.kbar{background:var(--shade);border:1px solid var(--rule);border-radius:7px;
  padding:6px 10px;gap:8px}
.kbar .tbdivider{width:1px;height:18px;background:var(--rule-strong)}
.kbar .txcount{font-family:var(--font-data);font-size:10.5px}
/* Die linke Karte trägt die Flex-Geldart als 4-px-Kante; ihr Kopf
   bleibt weiß mit der goldenen Linie darunter, die Zeilen weiß —
   nur die Hauptkategorien sind getönt (tr.kmain oben). */
.view-kakeibo .card.sec-flex{border-left:4px solid var(--edge-flex)}
.view-kakeibo .card.sec-flex>.sechead{background:#fff;border-bottom:1px solid var(--bg-flex-3);
  padding:9px 14px 7px}
.view-kakeibo .card.sec-flex .ledger{background:#fff}
/* Die Trennlinien der weißen Zeilen bleiben neutral hell (4c) —
   nur die Hauptkategorie-Zeilen behalten ihre Flex-Stufe. Beide
   Regeln stehen hier, weil die Bereichsfassung oben
   (.card.sec-flex .ledger td) sie sonst golden färbte. */
.view-kakeibo .card.sec-flex .ledger td{border-bottom-color:var(--hairline)}
.view-kakeibo .card.sec-flex .ledger tr.kmain td{border-bottom-color:var(--bg-flex-2)}
.view-kakeibo .card.sec-flex .foldarrow,.view-kakeibo .card.sec-flex .foldpad{display:none}

/* ── Woher der Wert kommt ─────────────────────────────────────
   Steht in Klammern hinter dem Namen der Hauptkategorie, nicht in
   einer eigenen Spalte: dort hielt es eine Breite frei, die bei
   einem einzelnen Monat ein Wort trug und in den Unterzeilen gar
   nichts — und es trennte Kategorie und Betrag, die zusammen
   gelesen werden.

   In der Klammer braucht die Marke keinen Rahmen mehr: die Klammer
   fasst schon zusammen, ein Kästchen darin wäre eine zweite
   Fassung. Es bleibt die Farbe, und die sagt dasselbe wie überall
   sonst: Grün steht für Zahlen, die feststehen (Import), Rot für
   die von Hand geänderten, Gelb für das, was noch wackelt. */
.kinds{font-family:var(--font-data);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);white-space:nowrap;font-weight:400}
.kk{font-family:inherit;font-size:inherit;letter-spacing:inherit;color:var(--ink-2);white-space:nowrap}
.kk.k-imp{color:var(--ok)}
.kk.k-corr{color:var(--seal)}
.kk.k-done{color:var(--ink)}
.kk.k-est{color:var(--amber)}
.ksep{color:var(--rule-strong)}
.bar{height:4px;border-radius:2px;opacity:1}
/* ── Die Spalte „Verlauf" der Prognose ────────────────────────
   Sie trägt die Grafik, die sonst der Zeitstrahl der Monatsansicht
   zeigt — gebaut in yearTrack() in js/views/prognose.js, gezeichnet
   mit den Regeln in css/layout.css (.ttrack, .ytrack, .b-*).

   Sie ist die letzte Spalte und bekommt, was übrig bleibt: die
   Zahlen links haben feste Breiten, der Balken nicht — er ist ein
   Verhältnis und liest sich mit jeder Breite. Nach unten begrenzt
   ist sie trotzdem, sonst schrumpfte sie in schmalen Fenstern auf
   ein paar Pixel und zeigte nichts mehr. */
/* Die Spalte fordert einen **Anteil** an, kein Minimum. Mit
   width:auto nehmen sich die Zahlenspalten allen Platz — sie sind
   nowrap und haben feste Breiten —, und der Balken bliebe ein
   Strich von 100 px, auch wenn der Tisch 1250 px breit ist. Ein
   Prozentwert zwingt die Tabelle, ihm die Breite zu geben.

   Ausgeblendet wird sie nicht mehr: auf einem 13"-Bildschirm wäre
   sonst genau die Grafik weg, für die die Ansicht gebaut ist.
   Stattdessen steht die Tabelle jetzt allein und über die volle
   Breite — siehe js/views/prognose.js. */
/* Die Tabelle der Prognose gibt der Grafik **allen** Platz, der
   nicht gebraucht wird: die Zahlenspalten bekommen width:1% und
   schrumpfen damit auf ihren Inhalt (sie sind nowrap, brechen also
   nicht um), die Verlaufsspalte bekommt width:100% und nimmt den
   ganzen Rest. Ein fester Anteil wie 38 % verschenkte Platz,
   sobald eine Spalte leer bleibt — und die Korrekturspalte ist es
   meistens. */
/* Die Untergrenze gilt dem **einzelnen Rasterfeld**, nicht der
   Spalte: der Abstand von einer Linie zur nächsten ist so breit
   wie die Monatsspalte daneben und keinen Schritt schmaler. Zwei
   Linien im Abstand von 40 px sind kein Maß mehr, an dem man
   etwas abliest.

   Wie viele Felder es sind, weiß erst die Ansicht — sie steht als
   `--flowcells` an der Tabelle (siehe viewPrognose in
   js/views/prognose.js). Reicht das Fenster für die Spalte nicht,
   scrollt die Tabelle (siehe unten). */
:root{--progleadw:120px}
.progtable td,.progtable th{width:1%;white-space:nowrap}
.progtable td:first-child,.progtable th:first-child{min-width:var(--progleadw)}
.progtable td.flowcell,.progtable th.flowcell{width:100%;
  min-width:calc(var(--progleadw) * var(--flowcells,1))}
/* ── Die Monatsspalte bleibt stehen ──────────────────────────
   Wird es zu eng, scrollt die Tabelle in ihrem `.scroll`-Rahmen
   nach rechts — nur die Beschriftung bleibt, wie die festen
   Spalten der Jahresmatrix: eine Zahl ohne ihren Monat ist keine
   Zeile mehr. Die Zelle braucht dafür einen **deckenden** Grund,
   sonst schiene das Gescrollte darunter durch. */
.progtable td:first-child,.progtable th:first-child{position:sticky;left:0;z-index:2;
  background:var(--paper-2)}
/* ── Und END bleibt daneben stehen ───────────────────────────
   Der Stand zum Monatsende ist die Zahl, gegen die man den Balken
   daneben liest — beim Scrollen nach rechts wanderte sie als erste
   aus dem Bild, und übrig blieb eine Grafik ohne ihr Ergebnis.
   Sie klebt deshalb an der Monatsspalte: `left` ist genau deren
   Breite (--progleadw), und weil `position:sticky` erst greift, wenn
   die Zelle diese Stelle erreicht, löst sie sich beim Zurückscrollen
   von selbst wieder ab und steht wieder in ihrer Reihe. Zwischen
   START und COR schiebt sich alles darunter hinweg — deshalb ein
   **deckender** Grund (--bg-sal, ihre eigene Farbe) und eine
   Stufe unter der Monatsspalte (z-index 1 gegen 2), damit die
   beiden sich nicht streiten. */
/* **Ein Pixel Überlappung, keine Fuge.** `left` ist rechnerisch
   genau die Breite der Monatsspalte — der Browser rundet beim
   Rollen aber die Lage der klebenden Zelle und die der Tabelle
   darunter verschieden, und bei manchen Rollständen klafft dann
   eine 1-px-Fuge, durch die die Balken der Grafik hindurchziehen
   (nachgemessen bei 617,4 und 700,6). Deshalb setzt sich END ein
   Pixel **unter** die Monatsspalte: die liegt eine Stufe höher
   (z-index 2 gegen 1) und deckt es zu. */
.progtable td.endcol,.progtable th.endcol{position:sticky;
  left:calc(var(--progleadw) - 1px);z-index:1}
/* Senkrechte Linien durch die **ganze** Tabelle, nicht nur in der
   Grafik: das Raster der letzten Spalte wäre sonst ein Fremdkörper
   zwischen Zahlenspalten ohne Trennung. Die letzte Spalte bekommt
   keine — sie hat ihr eigenes Raster und endet am Tischrand. */
.progtable td,.progtable th{border-right:1px solid var(--rule)}
.progtable td:last-child,.progtable th:last-child{border-right:0}
/* Die Zelle trägt das Raster, deshalb muss sie der Bezugspunkt
   sein. Die Linien stehen als eigene Kinder darin und reichen über
   die volle Zeilenhöhe — dadurch stoßen sie von Zeile zu Zeile
   aneinander und ergeben durchgehende Linien. */
.progtable td.flowcell{position:relative}
.progtable td.flowcell>.tgrid,.progtable td.flowcell>.tzero,
.progtable td.flowcell>.tzone{position:absolute;top:0;bottom:0;height:auto}
/* Über der Grafik steht die Achse statt einer Überschrift: an
   jeder Rasterlinie ihr Betrag. Die Marken liegen absolut über der
   Kopfzelle — sie muss also der Bezugspunkt sein, genau wie die
   Zelle darunter es für die Linien ist. Kein Versalsatz und keine
   Sperrung: es sind Zahlen und keine Beschriftung. */
.progtable th.axishead{position:relative}
/* Die Zahlen sind Spaltenköpfe wie die anderen und sehen auch so
   aus: Schrift, Größe und Farbe erbt die Marke von der Kopfzelle,
   und `top` ist genau der Innenabstand der Zelle (7px aus
   `.ledger td,.ledger th`) — dadurch sitzen sie auf derselben
   Zeile wie M, IN, REG und der Rest. Wer den Innenabstand ändert,
   ändert diesen Wert mit. */
.progtable th.axishead .tax{position:absolute;top:7px;
  white-space:nowrap;font-variant-numeric:tabular-nums}
/* Vor der Grafikspalte **bleibt** die Kante: seit die Achse auf dem
   Raster liegt, ist sie zugleich die erste Rasterlinie. Deshalb
   zeichnet die Grafik dort keine eigene mehr (siehe viewPrognose)
   und fängt ohne Innenabstand an — zwischen der letzten Zahl und
   dem Raster steht nichts mehr als dieser eine Strich. */
/* **Kein Innenabstand, auf keiner Seite.** Das Raster liegt in der
   Zelle und rechnet in ihrer Breite, der Balken liegt in einer
   Fläche darin und rechnet in deren Breite — ein Polster von 6 px
   rechts machte aus beidem zwei verschiedene Maßstäbe, und der
   kräftige Strich am Monatsende landete rund zwei Pixel **vor**
   seiner Rasterlinie statt darauf. Die Achsenzahlen halten ihren
   Abstand selbst (siehe `mark()` in js/views/prognose.js). */
.ledger td.flowcell,.ledger th.flowcell{padding-left:0;padding-right:0}
/* Alle Spaltenköpfe gleich groß. `.ledger .num` setzt 14px für die
   Zahlen — das greift auch auf die Kopfzelle und machte die
   Zahlenköpfe größer als „Monat" und „Verlauf". In einer Tabelle,
   deren letzte Spalte eine Grafik ist, fiel das auf. */
.progtable th.num{font-size:10px}
/* Eine Spalte, in der in jeder Zeile nur ein Strich steht, ist so
   schmal wie ihre Überschrift. Rechtsbündig klebten die Striche
   dann an der Kante zur Nachbarspalte; mittig stehen sie unter
   ihrer eigenen Überschrift. */
.progtable td.mid,.progtable th.mid{text-align:center}
/* ── Die Farbe der Geldart, Spalte für Spalte ────────────────
   Dieselben vier Farben wie die Kennzahlen darüber, die Karten der
   Monatsansicht und die Blöcke der Jahresmatrix — die hellste
   Stufe, denn hier ist es ein Grund unter Zahlen und keine
   Blockzeile. Gefärbt wird die **Spalte**, Kopfzelle eingeschlossen:
   erst dadurch liest sie sich als ein Streifen und nicht als zwölf
   getönte Zellen.

   START trägt nichts (ein Stand, keine Bewegung), END das helle
   Violett von „alles zusammen". Die Monatsspalte links bleibt
   ebenfalls frei — sie klebt beim seitlichen Rollen und braucht
   ihren deckenden Grund für sich. */
.progtable td.incol,.progtable th.incol{background:var(--bg-in)}
.progtable td.outcol,.progtable th.outcol{background:var(--bg-out)}
.progtable td.flexcol,.progtable th.flexcol{background:var(--bg-flex)}
.progtable td.balcol,.progtable th.balcol{background:var(--bg-bal)}
/* **END trägt den Grund der Tabelle, wie START.** Beides sind
   Stände und keine Bewegungen — der eine, mit dem der Monat
   anfängt, der andere, mit dem er schließt; zwei Spalten, die
   dasselbe sagen, sollen auch gleich aussehen. Der Grund ist
   trotzdem gesetzt und nicht weggelassen: die Spalte bleibt beim
   seitlichen Rollen stehen (siehe oben), und eine durchsichtige
   Zelle ließe die Spalten darunter hindurchziehen. --paper-2 ist
   genau das, was unter einer ungefärbten Zelle steht. */
.progtable td.endcol,.progtable th.endcol{background:var(--paper-2)}
/* Die Rasterlinie überquert die Zeilentrennung, sonst hätte sie
   alle 38 px eine Lücke und wäre zwölfmal unterbrochen statt
   durchgehend.

   **Der farbige Grund tut das nicht.** Er ist so breit wie die
   ganze Spalte, und die liegt beim Rollen zum Teil **unter** der
   klebenden END-Spalte; ein Pixel Überstand malte dort quer über
   deren Trennlinie — als Rest der Spalte, die gerade darunter
   wegscrollt. Über die Stapelfolge ist das nicht zu lösen: der
   Grund einer Tabellenzelle wird früh gezeichnet, ein absolut
   gesetztes Kind einer anderen Zelle später — auch ein eigener
   Überzug mit z-index ändert daran nichts (geprüft). Ohne den
   Überstand trägt die Grafik dieselbe feine Trennlinie zwischen
   zwei Monaten wie jede andere Spalte der Tabelle. */
.progtable td.flowcell>.tgrid,.progtable td.flowcell>.tzero{bottom:-1px}
.ledger td.flowcell{vertical-align:middle}
/* Vergangene Monate treten zurück — aber nur mit ihren Zahlen.
   Der Verlauf behält seine Farbe: er ist eine Kurve über das ganze
   Jahr, und ein ausgebleichtes Stück unterbräche sie genau dort,
   wo man sie am ehesten liest. */
.ledger tr.past td:not(.flowcell){opacity:.42}
/* Die Monatsspalte tritt mit ihrer Schriftfarbe zurück und nicht
   mit der Deckkraft: sie bleibt beim seitlichen Scrollen stehen,
   und eine durchsichtige Zelle ließe die Zahlen darunter
   durchscheinen. */
.progtable tr.past td:first-child{opacity:1;color:var(--ink-2)}
/* **Dasselbe gilt der END-Spalte**, seit sie neben der Monatsspalte
   stehen bleibt: eine Zelle mit `opacity` ist samt ihrem Grund
   durchsichtig, und die Zahlen der Spalten darunter zögen beim
   Rollen sichtbar hindurch. Sie tritt deshalb ebenfalls mit der
   **Schriftfarbe** zurück. Die Vorzeichenfarbe bleibt dabei
   erhalten, nur gedämpft — in dieser Spalte steht der Kontostand,
   und ob er im Plus oder im Minus liegt, ist ihre ganze Aussage.
   Kennt der Browser `color-mix` nicht, greift die Zeile darüber:
   dann ist die Zahl grau wie der Monatsname daneben. */
.progtable tr.past td.endcol{opacity:1;color:var(--ink-2)}
.progtable tr.past td.endcol.pos{color:color-mix(in srgb,var(--ok) 55%,var(--paper-2))}
.progtable tr.past td.endcol.neg{color:color-mix(in srgb,var(--seal) 55%,var(--paper-2))}
/* ── Der laufende Monat ───────────────────────────────────────
   Dieselbe Marke wie in der Jahresmatrix, nur um 90° gedreht: dort
   fassen zwei feine rote Linien die Spalte des laufenden Monats
   ein (`.cm-l` / `.cm-r` in css/matrix.css), hier fassen sie seine
   Zeile ein. Rot heißt in dieser Anwendung überall „jetzt" — auch
   die Marke im Zeitstrahl (`.tnow`) trägt es.

   **Keine Fläche.** Eine getönte Zeile mitten in zwölf blassen
   legte einen Balken quer über die Tabelle und zog das Auge auf
   den Grund statt auf die Zahlen; und sie hätte mit dem Violett
   des Anfangsbestands zwei Farben um dieselbe Aufmerksamkeit
   streiten lassen. Zwei Haarlinien sagen dasselbe und nehmen
   nichts weg.

   Gezeichnet werden sie je Zelle als `inset`-Schatten, nicht als
   Rand: die Zellen grenzen aneinander, dadurch werden aus sieben
   Strichen zwei durchgehende Linien — und die klebende erste
   Spalte trägt ihr Stück mit, wenn die Tabelle seitlich
   scrollt. */
.progtable tr.now td{box-shadow:inset 0 1px 0 var(--seal),inset 0 -1px 0 var(--seal)}
.progtable tr.now td:first-child{color:var(--seal);font-weight:600}
/* **In der Balkenspalte reicht der Schatten nicht.** Ihre Zonen und
   Rasterlinien liegen als eigene Kinder über dem Grund der Zelle
   und decken ihn samt seinem inset-Schatten zu — die Marke des
   laufenden Monats hörte am Rand der Grafik auf, und genau dort
   liest man sie. Deshalb legt die Zelle die beiden Linien als
   ::after darüber: ein Pseudo-Element ist das **letzte** Kind, es
   liegt also über Zonen, Raster und Balken. Angefasst wird nichts
   (pointer-events:none), die Sprechblasen der Balken bleiben. */
.progtable tr.now td.flowcell::after{content:'';position:absolute;left:0;right:0;top:0;bottom:0;
  pointer-events:none;
  background:linear-gradient(var(--seal),var(--seal)) top left/100% 1px no-repeat,
             linear-gradient(var(--seal),var(--seal)) bottom left/100% 1px no-repeat}
/* Die Zeile des Anfangsbestands steht über dem Januar und gehört
   zu keinem Monat: sie tritt zurück wie die abgerechneten Monate
   und trennt sich mit einer kräftigeren Linie vom Jahr darunter —
   ab dort wird gerechnet. */
.progtable tr.openrow td{color:var(--ink-2);border-bottom:1px solid var(--rule-strong);
  vertical-align:middle}
/* Beschriftung **und** Betrag stehen in Violett: die Zeile ist kein
   Monat, sondern der Stand, auf dem das Jahr aufsetzt, und die beiden
   einzigen Zahlen darin gehören zusammen. Der Betrag bekommt deshalb
   nicht die Vorzeichenfarbe der Monate darunter — ein grünes
   „5.530,00" läse sich wie eine Einnahme des Januars.
   Mittig steht die Zeile, weil sie so hoch ist wie zwei: oben
   angeschlagen sähe der Name aus, als stünde er über dem Balken. */
.progtable tr.openrow td:first-child{font-family:var(--font-data);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-sal)}
/* Der Betrag tritt dabei zurück wie die abgerechneten Monate
   (`tr.past`, dieselbe Deckkraft): er ist schon geschehen, bevor
   das Jahr anfing, und keine Bewegung, die noch aussteht. Die
   Beschriftung bleibt kräftig — sie sagt, was die Zeile ist. */
/* Auch hier nicht über die Deckkraft, wo die Zelle klebt: die
   END-Zelle des Anfangsbestands trägt ihre Blässe in der Farbe. */
.progtable tr.openrow td.num{color:var(--ink-sal);opacity:.42}
.progtable tr.openrow td.num.endcol{opacity:1;
  color:color-mix(in srgb,var(--ink-sal) 45%,var(--paper-2))}

/* ── Die Prognose-Karte nach Mock 4b ──────────────────────────
   Die Überschrift ist eine Titelzeile der Karte: über die volle
   Breite, mit Haarlinie darunter — die negativen Außenmaße heben
   das Kartenpolster auf, das eigene Polster stellt es innen
   wieder her. Die Farberklärung schließt die Karte unten mit
   derselben Linie ab. */
.progcard>h2{margin:-12px -16px 10px;padding:8px 16px 7px;
  border-bottom:1px solid var(--hairline)}
.progcard .thint{margin:0 -16px -12px;padding:6px 16px 8px;
  border-top:1px solid var(--hairline);background:transparent}