feat: Nur die Waehrungen zeigen, die man braucht – und auf dem Telefon lesbar

Drei Sachen, die beim Benutzen aufgefallen sind.

ANGEBOTENE WAEHRUNGEN. In den Einstellungen steht jetzt, welche Waehrungen in
den Auswahlfeldern erscheinen (Vorgabe EUR, CHF, USD). Dass dreissig
unterstuetzt werden, ist gut; dreissig Zeilen in einem Feld zu sehen, wenn man
drei davon braucht, ist es nicht.

Die Einstellung beschraenkt nur die ANZEIGE. Gueltig bleibt alles mit
EZB-Kurs, und die gerade gesetzte Waehrung steht IMMER im Feld – sonst stuende
ein Konto in Dollar vor einem Feld ohne Dollar und wechselte beim naechsten
Speichern stillschweigend die Waehrung. Der Saldo waere danach still falsch.
Die Hauptwaehrung laesst sich nicht abwaehlen.

ZEICHEN STATT KUERZEL, wo es hilft: "€ EUR", "$ USD", "£ GBP". CHF steht
bewusst ohne: "Fr." ist weniger gelaeufig als CHF selbst. Mehrfach belegte
Zeichen bleiben ebenfalls draussen – "US$" von "CA$" zu unterscheiden ist
Raetselraten.

AUF DEM TELEFON. Die Vertragszeile quetschte vier Spalten in 375 Pixel; vom
Namen blieb "Sal..." uebrig und von der Kategorie ein Punkt. Sie ist jetzt ein
Gitter: Unter 620 Pixel rutscht der Betrag unter den Namen, die Knoepfe
bleiben rechts. Der Name bekommt die volle Breite – auf dem Telefon ist er das
Einzige, woran man die Zeile erkennt.

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

web/src/finance.css

@@ -1646,27 +1646,38 @@ tr.row-dup {
   display: flex;
   flex-direction: column;
 }
+/* Als Gitter und nicht als Reihe: Auf dem Telefon rutscht der Betrag unter den
+   Namen, statt vier Spalten in 375 Pixel zu quetschen. Mit Reihe blieb vom
+   Namen "Sal..." uebrig und von der Kategorie ein Punkt. */
 .abo-zeile {
-  display: flex;
+  display: grid;
+  grid-template-columns: auto 1fr auto auto;
+  grid-template-areas: "symbol mitte betrag knoepfe";
   align-items: center;
   gap: var(--sp-3);
   padding: var(--sp-2) 0;
   border-bottom: 1px solid var(--border);
 }
+.abo-zeile > :nth-child(1) { grid-area: symbol; }
+.abo-mitte { grid-area: mitte; }
+.abo-betrag { grid-area: betrag; }
+.abo-knoepfe { grid-area: knoepfe; }
 .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-mitte { min-width: 0; }
 .abo-kopf {
   display: flex;
   align-items: baseline;
-  gap: var(--sp-2);
+  flex-wrap: wrap;
+  gap: 2px var(--sp-2);
   min-width: 0;
 }
 .abo-unten {
   display: flex;
-  gap: 5px;
+  flex-wrap: wrap;
+  gap: 0 5px;
   min-width: 0;
   margin-top: 1px;
 }
@@ -1688,3 +1699,53 @@ tr.row-dup {
   padding-left: var(--sp-3);
   margin-bottom: var(--sp-3);
 }
+
+@media (max-width: 620px) {
+  /* Betrag unter den Namen, Knoepfe bleiben rechts oben. So bekommt der Name
+     die volle Breite – auf dem Telefon ist er das Einzige, woran man die Zeile
+     erkennt. */
+  .abo-zeile {
+    grid-template-columns: auto 1fr auto;
+    grid-template-areas:
+      "symbol mitte  knoepfe"
+      "symbol betrag knoepfe";
+    align-items: start;
+    row-gap: 2px;
+    padding: var(--sp-3) 0;
+  }
+  .abo-zeile > :nth-child(1),
+  .abo-knoepfe { align-self: center; }
+  /* Waagrecht statt untereinander: Unter dem Namen ist Breite da, Hoehe nicht. */
+  .abo-betrag {
+    flex-direction: row;
+    align-items: baseline;
+    flex-wrap: wrap;
+    gap: 0 var(--sp-2);
+  }
+  .abo-summe { gap: var(--sp-3) var(--sp-5); }
+  .abo-summe-zahl { font-size: 1.2rem; }
+}
+
+/* Waehrungs-Auswahl in den Einstellungen: ein Gitter aus Kacheln statt einer
+   Liste mit dreissig Zeilen. */
+.waehrung-gitter {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
+  gap: 6px;
+  margin-bottom: var(--sp-2);
+}
+.waehrung-kachel {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0;
+  padding: 6px 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm, 6px);
+  cursor: pointer;
+  font-size: 0.85rem;
+  white-space: nowrap;
+}
+.waehrung-kachel.an { border-color: var(--accent, var(--border-strong)); }
+.waehrung-kachel input { width: auto; margin: 0; }
+.waehrung-kachel:has(input:disabled) { opacity: 0.6; cursor: default; }