Listen: Zahlenspalten überall rechtsbündig

Die Klasse .rechts wurde in Listen von der spezifischeren Grundregel
"table.liste th, table.liste td { text-align: left }" überstimmt – die
Ausrichtung war also überall wirkungslos, nicht nur in den Berichten. Die
Regel steht jetzt bei den Tabellen-Grundregeln und gilt für alle Listen:
Kontenübersicht, Kontoblatt, Wertpapiere, Depotbuchungen, Kategorien und
die Berichte. Die berichtseigene Sonderregel entfällt dadurch.

Budgetplaner und Splittabellen bringen ihre eigene Ausrichtung mit und
bleiben unberührt.

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

Changes.md

@@ -12,10 +12,11 @@ bisherigen Verhalten: Die Tabelle darf hinausragen und waagerecht scrollen, stat
 Dabei fiel auf, dass die Zahlenspalten **gar nicht rechtsbündig** standen: `.rechts` und
 `.betrag` sind nur einfach spezifisch, `table.liste th, table.liste td { text-align: left }`
 weiter oben im Stilblatt ist spezifischer und gewann. Solange die Spalten über den Bildschirm
-gezogen waren, fiel es kaum auf – in der schmalen Tabelle sofort. Für Berichte steht die
+gezogen waren, fiel es kaum auf – in der schmalen Tabelle sofort. Die Ausrichtung steht jetzt
-Ausrichtung jetzt ausdrücklich (`table.liste.bericht td.rechts`), sodass die letzte Spalte –
+für **alle Listen** ausdrücklich (`table.liste th.rechts, table.liste td.rechts`): Beträge,
-die Betragsspalte – ihre Zahlen rechtsbündig an ihrer eigenen Kante ausrichtet. Die übrigen
+Salden, Stückzahlen und Aktionsspalten stehen überall rechts, wo `.rechts` gesetzt ist –
-Listen (Kontenübersicht, Wertpapiere) sind unverändert geblieben.
+Kontenübersicht, Kontoblatt, Wertpapiere, Depotbuchungen, Kategorien und die Berichte
+gleichermaßen. Die Klasse tut damit endlich das, was ihr Name sagt.
 
 Der neue E2E-Test misst alles drei: dass der Summenbericht deutlich schmaler bleibt als sein
 Rahmen und links wie rechts gleich viel Luft behält, dass die letzte Spalte

public/static/app.css

@@ -762,6 +762,13 @@ table.liste tbody tr:hover { background: var(--flaeche-gedaempft); }
 
 .rechts { text-align: right; }
 
+/* In Listen reicht `.rechts` allein nicht: `table.liste th, table.liste td`
+   weiter oben setzt text-align auf links und ist spezifischer. Zahlen- und
+   Aktionsspalten stehen deshalb ausdrücklich rechts – die Klasse tut damit
+   überall das, was ihr Name sagt. */
+table.liste th.rechts,
+table.liste td.rechts { text-align: right; }
+
 .betrag {
     font-family: var(--schrift-zahl);
     font-variant-numeric: tabular-nums;
@@ -1751,12 +1758,6 @@ table.liste.bericht {
    sonst quetschte max-width die zwölf Monatsspalten in Umbrüche. */
 .breittabelle table.liste.bericht { max-width: none; }
 
-/* `.rechts` allein reicht hier nicht: `table.liste th, td` setzt weiter oben
-   text-align auf links und ist spezifischer. Die Zahlenspalten – allen voran
-   die letzte – stehen deshalb ausdrücklich rechtsbündig. */
-table.liste.bericht th.rechts,
-table.liste.bericht td.rechts { text-align: right; }
-
 /* Abschnittsüberschrift „Einnahmen“ / „Ausgaben“. */
 table.bericht tr.abschnittszeile th {
     text-align: left;

tests/e2e/specs/module.spec.js

@@ -54,6 +54,25 @@ test.describe('Module der Phasen 4 bis 7', () => {
 		}
 	})
 
+	test('Zahlenspalten stehen in allen Listen rechtsbündig', async ({ page }) => {
+		// `.rechts` markiert Zahlen- und Aktionsspalten. Die Klasse muss die
+		// linksbündige Grundregel der Listen überall schlagen – nicht nur in den
+		// Berichten, wo es zuerst auffiel.
+		for (const pfad of ['/konten', '/wertpapiere', '/wertpapiere/buchungen']) {
+			await page.goto(pfad)
+
+			for (const art of ['th', 'td']) {
+				const zellen = page.locator(`table.liste ${art}.rechts`)
+				const anzahl = await zellen.count()
+				expect(anzahl, `${pfad}: ${art}.rechts vorhanden`).toBeGreaterThan(0)
+
+				for (const stelle of [0, anzahl - 1]) {
+					await expect(zellen.nth(stelle)).toHaveCSS('text-align', 'right')
+				}
+			}
+		}
+	})
+
 	test('Das Cockpit zeichnet seine Kacheln', async ({ page }) => {
 		await page.goto('/')