fix: Bankanbindung gliedern – und ein Platzhalter, der nicht ersetzt wurde

Im Kopf jeder Verbindung stand woertlich "zuletzt {{when}}": Der Text erwartet
`when`, uebergeben wurde `datum`.

Die Gliederung lieh sich die Klassen des Postfachs – gestrichelte Trennlinien,
sonst nichts. Damit war weder zu sehen, wo eine Bank aufhoert, noch welcher
Knopf zu welchem Konto gehoert, und das Suchfeld fuer eine neue Bank
verschwamm mit den Angaben der schon verbundenen.

Jetzt: Jede Verbindung ist ein umrandeter Block mit Kopfzeile. Jedes Konto
darin hat eine eigene linke Kante – die bindet seine Knoepfe sichtbar an es.
Die Knoepfe der VERBINDUNG (alle Konten, Salden, trennen) stehen ohne
Einrueckung hinter einer Trennlinie, gehoeren also erkennbar zur Bank und
nicht zum letzten Konto. "Weitere Bank verbinden" ist mit eigener Ueberschrift
abgesetzt.

Nebenbei brach "Minuten (0 = aus)" neben dem Zahlenfeld um und las sich wie
ein Fehler; die Klammer steht ohnehin im Hinweis darunter.

Im Browser nachgemessen.

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

web/src/finance.css

@@ -1336,3 +1336,58 @@ tr.row-dup {
   flex: 0 0 auto;
   white-space: nowrap;
 }
+
+/* ---------- Bankanbindung: Verbindung, Konto, neue Bank ----------
+   Vorher lieh sich das die Klassen des Postfachs: gestrichelte Trennlinien,
+   sonst nichts. Damit war nicht zu sehen, welcher Knopf zu welchem Konto
+   gehört und wo eine Bank aufhört. */
+.bank-verbindung {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: var(--sp-4);
+  margin-top: var(--sp-4);
+}
+.bank-verbindung-kopf {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  padding-bottom: var(--sp-2);
+  margin-bottom: var(--sp-2);
+  border-bottom: 1px solid var(--border);
+}
+/* Ein Konto der Verbindung: eingerückt und mit eigener Kante. Die Kante ist
+   das, was seine Knöpfe sichtbar an es bindet. */
+.bank-konto {
+  border-left: 2px solid var(--border-strong);
+  padding: var(--sp-3) 0 var(--sp-3) var(--sp-3);
+  margin-top: var(--sp-3);
+}
+.bank-konto + .bank-konto {
+  margin-top: var(--sp-2);
+}
+.bank-konto select {
+  width: 100%;
+  margin-top: 4px;
+}
+/* Die Knöpfe der VERBINDUNG (alle Konten, Salden, trennen) stehen ohne
+   Einrückung – so gehören sie sichtbar zur Bank und nicht zum letzten Konto. */
+.bank-verbindung > .mail-actions {
+  padding-top: var(--sp-3);
+  border-top: 1px solid var(--border);
+}
+/* Eine neue Bank hinzufügen ist etwas anderes als eine bestehende zu pflegen. */
+.bank-neu {
+  margin-top: var(--sp-5);
+  padding-top: var(--sp-4);
+  border-top: 2px solid var(--border-strong);
+}
+.bank-neu h3 {
+  margin: 0 0 var(--sp-3);
+  font-size: 1rem;
+}
+
+/* Die Einheit neben dem Zahlenfeld darf nicht umbrechen – „Minuten (0" in der
+   einen und „= aus)" in der nächsten Zeile las sich wie ein Fehler. */
+.bank-verbindung .input-with-button > .muted {
+  white-space: nowrap;
+}

web/src/locales/de.json

@@ -648,11 +648,12 @@
     "syncAll": "Alle Konten holen",
     "syncOne": "Umsätze holen",
     "poll": "Automatisch holen",
-    "pollUnit": "Minuten (0 = aus)",
+    "pollUnit": "Minuten",
     "pollHint": "Certain holt die Umsätze dann von selbst und bucht sie. 0 schaltet das ab; weniger als 15 Minuten lassen die Banken nicht zu.",
     "pollSaved": "Takt gespeichert.",
     "syncOlder": "Älteres nachholen",
-    "syncedDuplicate": "{{n}} standen schon da (aus Datei oder von Hand) und wurden übersprungen."
+    "syncedDuplicate": "{{n}} standen schon da (aus Datei oder von Hand) und wurden übersprungen.",
+    "addTitle": "Weitere Bank verbinden"
   },
   "bankReturn": {
     "title": "Rückkehr von der Bank",

web/src/locales/en.json

@@ -648,11 +648,12 @@
     "syncAll": "Fetch all accounts",
     "syncOne": "Fetch transactions",
     "poll": "Fetch automatically",
-    "pollUnit": "minutes (0 = off)",
+    "pollUnit": "minutes",
     "pollHint": "Certain then fetches and books transactions on its own. 0 turns this off; banks do not allow less than 15 minutes.",
     "pollSaved": "Interval saved.",
     "syncOlder": "Catch up on older",
-    "syncedDuplicate": "{{n}} were already there (from a file or entered by hand) and were skipped."
+    "syncedDuplicate": "{{n}} were already there (from a file or entered by hand) and were skipped.",
+    "addTitle": "Connect another bank"
   },
   "bankReturn": {
     "title": "Back from your bank",

web/src/pages/settings/Bankanbindung.jsx

@@ -232,12 +232,16 @@ export default function Bankanbindung() {
 
       {/* Schritt 2: bestehende Verbindungen samt Kontozuordnung */}
       {verbindungen.map((v) => (
-        <div className="mail-source" key={v.id}>
+        <div className="bank-verbindung" key={v.id}>
-          <div><strong>{v.aspsp_name}</strong> <span className="muted small">{v.aspsp_country}</span></div>
+          <div className="bank-verbindung-kopf">
+            <Icon name="landmark" size={16} />
+            <strong>{v.aspsp_name}</strong>
+            <span className="muted small">{v.aspsp_country}</span>
+          </div>
           <div className="muted small">
             {v.last_error
               ? `${t("bank.lastError")}: ${v.last_error}`
-              : v.last_sync_at ? t("bank.lastSync", { datum: formatDate(v.last_sync_at.slice(0, 10)) })
+              : v.last_sync_at ? t("bank.lastSync", { when: formatDate(v.last_sync_at.slice(0, 10)) })
                                : t("bank.neverSynced")}
           </div>
           {v.valid_until && (
@@ -253,7 +257,7 @@ export default function Bankanbindung() {
               <p className="muted small">{t("bank.noAccountsFound")}</p>
             ) : (
               linksVon(v).map((l) => (
-                <div className="sender-row" key={l.id}>
+                <div className="bank-konto" key={l.id}>
                   <div className="muted small selectable">
                     <strong>{l.remote_name || l.iban || l.remote_uid}</strong>
                     {/* Produktbezeichnung und Ersatzkennung sind bei Pockets das
@@ -371,9 +375,11 @@ export default function Bankanbindung() {
         </div>
       ))}
 
-      {/* Schritt 3: neue Bank verbinden */}
+      {/* Schritt 3: neue Bank verbinden. Deutlich abgesetzt – sonst verschwimmt
+          das Suchfeld mit den Angaben der schon verbundenen Banken. */}
       {app && (
-        <div style={{ marginTop: "var(--sp-3)" }}>
+        <div className="bank-neu">
+          <h3>{t("bank.addTitle")}</h3>
           <form onSubmit={bankenLaden}>
             <label className="field">
               <span>{t("bank.search")}</span>