feat: Zeigen, welche Buchungen in einem Ausgaben-Anteil stecken

Eine Zahl, die man nicht aufschluesseln kann, muss man glauben. Genau das
war der Streitpunkt: Die Karte nannte fuer Lebensmittel einen Betrag, und
es gab keine Moeglichkeit nachzusehen, welche Zahlungen darin einbezogen
sind und welche nicht.

Jetzt oeffnet ein Klick auf einen Anteil - in der Liste wie in der
Legende des Kreises - die Buchungen dahinter: Datum, Empfaenger, Konto,
Betrag. Die Liste kommt aus derselben Stelle, die auch die Summe bildet
(`budget.expense_rows`), sie kann also gar nicht etwas anderes zeigen als
das, was gezaehlt wurde. Ein Test haelt das fest.

Steht eine Buchung darin, obwohl ihr Datum ausserhalb des Zeitraums
liegt, traegt sie die Kalendermarke: Dann wurde ihr Budget-Monat von Hand
gesetzt, und das ist der Grund.

Nebenbei: Dialoge haengen jetzt am Seitenkoerper. Kacheln der Uebersicht
werden per `transform` positioniert - damit war die Kachel der
Bezugsrahmen fuer `position: fixed`, und der Dialog sass eingeklemmt
darin statt ueber der Seite.

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

web/src/finance.css

@@ -1523,3 +1523,67 @@ tr.row-dup {
   font-weight: 580;
   color: var(--text);
 }
+
+/* ---------- Woraus ein Anteil besteht ----------
+   Eine Zahl, die man nicht aufschlüsseln kann, muss man glauben. Deshalb ist
+   jede Zeile der Ausgaben-Anteile ein Knopf – sie sieht aus wie vorher, führt
+   aber zu den Buchungen dahinter. */
+.anteil-knopf {
+  display: block;
+  width: 100%;
+  background: none;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+}
+.anteil-knopf:hover .share-name {
+  text-decoration: underline;
+}
+.chart-legend li > .legend-zeile {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  width: 100%;
+  min-width: 0;
+  background: none;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+}
+.chart-legend li > .legend-zeile.klickbar {
+  cursor: pointer;
+}
+.chart-legend li > .legend-zeile.klickbar:hover .legend-name {
+  text-decoration: underline;
+}
+
+.anteil-liste {
+  display: flex;
+  flex-direction: column;
+}
+.anteil-zeile {
+  display: flex;
+  align-items: baseline;
+  gap: var(--sp-3);
+  padding: 6px 0;
+  border-bottom: 1px solid var(--border);
+  font-size: 0.85rem;
+}
+/* Feste Breite für Datum und Konto: Sonst rutscht der Betrag von Zeile zu
+   Zeile, und genau die Beträge will man hier untereinander vergleichen. */
+.anteil-datum {
+  flex: 0 0 auto;
+  min-width: 5.5em;
+}
+.anteil-konto {
+  flex: 0 1 auto;
+  max-width: 9em;
+}