feat: Kontostand aufschluesseln – und der Angleich-Knopf bleibt

Zwei Sachen aus derselben Wurzel: Wenn ein Saldo nicht stimmt, sieht man nicht,
warum, und kann auch nichts dagegen tun.

Ein Klick auf den Kontostand zeigt jetzt die Rechnung: Anfangsbestand,
Einnahmen, Ausgaben, Uebertraege raus und rein – jeweils mit der Anzahl der
Buchungen – und was daraus wird. Darunter der Saldo der Bank und, einzeln
aufgefuehrt, alle Uebertraege des Kontos. Genau die sind die haeufigste
Ursache und in einer langen Buchungsliste am schwersten zu ueberblicken.

Rechnung und Kontenliste kommen aus EINER Quelle: ``account_balance_cents``
liest jetzt aus der Aufschluesselung. Sonst koennte die Anzeige etwas anderes
behaupten als der Saldo, und man suchte den Fehler im Falschen.

Ausserdem war der Knopf "Saldo der Bank uebernehmen" verschwunden, sobald die
Bank nur einen verfuegbaren Saldo meldet. Das war zu weit gedacht: Nicht
vergleichbar heisst nicht, dass man nicht angleichen duerfte. Der Knopf ist
zurueck, und die Nachfrage sagt in dem Fall, worauf man sich einlaesst – der
verfuegbare Saldo enthaelt Vorgemerktes, das spaeter noch als Buchung kommt.

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

web/src/finance.css

@@ -1407,3 +1407,39 @@ tr.row-dup {
 .uebertrag-frage .btn {
   flex: 0 0 auto;
 }
+
+/* Aufgeschlüsselter Kontostand: eine Rechnung, also untereinander und rechts
+   ausgerichtet – so lässt sie sich nachvollziehen wie auf Papier. */
+/* Die Zeile darf nur umbrechen, wenn die Rechnung offen ist – sonst
+   verschiebt sich die Kontenliste ohne Grund. */
+.account-row.mit-aufschluss {
+  flex-wrap: wrap;
+}
+.aufschluss {
+  flex: 1 1 100%;
+  margin: var(--sp-2) 0 0 38px;
+  padding: var(--sp-3);
+  border-left: 2px solid var(--border-strong);
+  font-size: 0.85rem;
+}
+.aufschluss-zeile {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--sp-3);
+  padding: 2px 0;
+  min-width: 0;
+}
+.aufschluss-zeile > span:last-child {
+  font-variant-numeric: tabular-nums;
+}
+.aufschluss-summe {
+  margin-top: 4px;
+  padding-top: 4px;
+  border-top: 1px solid var(--border-strong);
+  font-weight: 600;
+}
+.aufschluss-uebertraege {
+  margin-top: var(--sp-3);
+  padding-top: var(--sp-2);
+  border-top: 1px dashed var(--border);
+}