fix: Auf der Uebersicht stand nicht, welcher Betrag gebunden ist

Die Kontostands-Karte zeigte die Saeule 3a wie jedes andere Konto: ein
Name, ein Betrag. Dass man an das Geld nicht herankommt, stand nur in
der Summe darunter – und wer den Betrag liest, rechnet ihn im Kopf doch
mit. Die Zeile traegt jetzt dieselbe Marke wie auf der Kontenseite.

Dabei ist ein Fehler aufgefallen, den ich selbst eingebaut hatte: Die
Zeile "zusaetzlich gebunden" stand im Markup HINTER der Summe. Die
klebt per position:sticky am unteren Rand des Rollbereichs – alles
dahinter liegt darunter und ist praktisch nie zu sehen. Summe und
gebundener Betrag stehen jetzt gemeinsam im angehefteten Fuss.

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

web/src/dashboard/cards.jsx

@@ -44,23 +44,34 @@ function AccountBalances() {
         <div className="dash-line" key={a.id}>
           <IconChip name={a.icon} color={a.color} size={26} />
           <span className="grow ellipsis">{a.name}</span>
+          {/* An der Zeile selbst, nicht nur in der Summe darunter: Wer den
+              Betrag liest, soll im selben Blick sehen, dass er nicht
+              verfuegbar ist – sonst rechnet man ihn im Kopf doch mit. */}
+          {a.locked && (
+            <span className="badge" title={t("accounts.lockedHint")}>
+              {t("accounts.lockedBadge")}
+            </span>
+          )}
           <Money cents={a.balance_cents} currency={a.currency} baseCents={a.balance_base_cents} baseCurrency={baseCurrency} />
         </div>
       ))}
-      <div className="dash-total">
-        <span className="grow">{t("cards.total")}</span>
-        {/* Mit einer Kreditkartenschuld kann diese Summe negativ werden.
-            formatMoney allein faerbt nicht – das Minus stuende still da. */}
-        <strong><Money cents={data.total} currency={data.currency} /></strong>
-      </div>
-      {/* Gesperrtes Geld steht daneben, nicht darin – sonst beantwortet die
-          Summe eine andere Frage, als der Nutzer stellt. */}
-      {data.gebunden > 0 && (
-        <div className="dash-line muted small">
-          <span className="grow">{t("cards.locked")}</span>
-          {formatMoney(data.gebunden, data.currency)}
+      {/* Summe und gebundenes Geld in EINEM angehefteten Fuss.
+          Die Summe klebt am unteren Rand des Rollbereichs; eine Zeile dahinter
+          stuende unter dem Angehefteten und waere damit nie zu sehen. */}
+      <div className={`dash-total${data.gebunden > 0 ? " gestapelt" : ""}`}>
+        <div className="dash-total-zeile">
+          <span className="grow">{t("cards.total")}</span>
+          {/* Mit einer Kreditkartenschuld kann diese Summe negativ werden.
+              formatMoney allein faerbt nicht – das Minus stuende still da. */}
+          <strong><Money cents={data.total} currency={data.currency} /></strong>
         </div>
-      )}
+        {data.gebunden > 0 && (
+          <div className="dash-total-zeile muted small">
+            <span className="grow">{t("cards.locked")}</span>
+            {formatMoney(data.gebunden, data.currency)}
+          </div>
+        )}
+      </div>
     </div>
   );
 }

web/src/finance.css

@@ -641,6 +641,19 @@ tr.budget-total-row td {
   padding-bottom: var(--sp-3);
   margin-bottom: calc(-1 * var(--sp-3));
 }
+/* Zwei Zeilen im angehefteten Fuss: die Summe und, was daneben gebunden ist.
+   Beides muss stehen bleiben – eine Zeile hinter dem Angehefteten laege
+   darunter und waere nie zu sehen. */
+.dash-total.gestapelt {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 2px;
+}
+.dash-total-zeile {
+  display: flex;
+  align-items: baseline;
+  gap: var(--sp-2);
+}
 .ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;