feat: Abos & Vertraege – was regelmaessig abgeht, an einer Stelle

Netflix, Handyvertrag, Krankenkasse, Halbtax. Bisher sah man sie nur als
einzelne Buchungen im Auszug; die Frage "welche Abos habe ich eigentlich, und
was kosten die zusammen im Monat" liess sich nicht beantworten. Genau die
steht jetzt oben auf der Seite.

Der Bereich heisst "Abos & Vertraege", nicht "Abos": Ein Handyvertrag ist kein
Abo und die Versicherung erst recht nicht – niemand soll ueberlegen muessen,
wo sie hingehoert.

Der Monatswert wird gerechnet, nicht gespeichert (Betrag durch Intervall).
Gespeichert veraltete er beim naechsten Preisaufschlag stillschweigend.

Bei laengerem Intervall klappt "Ich lege monatlich zurueck auf" auf, mit dem
gerechneten Monatsbetrag daneben. Bei monatlicher Abrechnung gibt es nichts
anzusparen, also steht es da auch nicht.

DAZU: Waehrungen sind offen.

Die Rechen-Maschinerie konnte immer schon beliebige Waehrungen – sie rechnet
ueber den Euro als Drehpunkt. Beschraenkt haben es zwei Konstanten: eine
Erlaubnisliste mit EUR und CHF, und ein Filter, der aus dem EZB-Feed alles
ausser CHF wegwarf, obwohl er dreissig Waehrungen liefert.

Massgeblich ist jetzt die Liste der EZB. Frei erfundene Waehrungen bleiben
draussen, und das ist kein Geiz: Ohne Kurs liesse sich der Betrag nie
umrechnen – er stuende in keiner Summe und in keinem Budget, und das faellt
erst spaet auf. Ein Vertrag in einer Waehrung ohne Kurs wird deshalb genannt,
statt die Summe stillschweigend zu klein anzuzeigen.

Erkannt und gebucht wird noch nichts; der Erkennungstext wird nur erfasst.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/src/finance.css

@@ -1625,3 +1625,66 @@ tr.row-dup {
   background: var(--surface-2);
   font-size: 0.95em;
 }
+
+/* --- Abos & Verträge ----------------------------------------------------- */
+
+/* Die Summe ganz oben: Sie ist die Antwort auf die Frage, wegen der man die
+   Seite überhaupt öffnet. */
+.abo-summe {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sp-5);
+}
+.abo-summe-zahl {
+  font-size: 1.4rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  margin-top: 2px;
+}
+
+.abo-liste {
+  display: flex;
+  flex-direction: column;
+}
+.abo-zeile {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+  padding: var(--sp-2) 0;
+  border-bottom: 1px solid var(--border);
+}
+.abo-zeile:last-child { border-bottom: none; }
+/* Gekündigtes bleibt lesbar, tritt aber zurück – es zählt nicht mehr mit. */
+.abo-beendet { opacity: 0.55; }
+
+.abo-mitte { flex: 1; min-width: 0; }
+.abo-kopf {
+  display: flex;
+  align-items: baseline;
+  gap: var(--sp-2);
+  min-width: 0;
+}
+.abo-unten {
+  display: flex;
+  gap: 5px;
+  min-width: 0;
+  margin-top: 1px;
+}
+.abo-faellig { color: var(--muted); white-space: nowrap; }
+.abo-faellig.warn { color: var(--warn); }
+
+.abo-betrag {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+.abo-knoepfe { display: flex; gap: 2px; }
+
+/* Das Ansparen gehört sichtbar zum Intervall darüber, nicht daneben. */
+.abo-ansparen {
+  border-left: 2px solid var(--border-strong);
+  padding-left: var(--sp-3);
+  margin-bottom: var(--sp-3);
+}