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">
+      {/* Summe und gebundenes Geld in EINEM angehefteten Fuss.
-        <span className="grow">{t("cards.total")}</span>
+          Die Summe klebt am unteren Rand des Rollbereichs; eine Zeile dahinter
-        {/* Mit einer Kreditkartenschuld kann diese Summe negativ werden.
+          stuende unter dem Angehefteten und waere damit nie zu sehen. */}
-            formatMoney allein faerbt nicht – das Minus stuende still da. */}
+      <div className={`dash-total${data.gebunden > 0 ? " gestapelt" : ""}`}>
-        <strong><Money cents={data.total} currency={data.currency} /></strong>
+        <div className="dash-total-zeile">
-      </div>
+          <span className="grow">{t("cards.total")}</span>
-      {/* Gesperrtes Geld steht daneben, nicht darin – sonst beantwortet die
+          {/* Mit einer Kreditkartenschuld kann diese Summe negativ werden.
-          Summe eine andere Frage, als der Nutzer stellt. */}
+              formatMoney allein faerbt nicht – das Minus stuende still da. */}
-      {data.gebunden > 0 && (
+          <strong><Money cents={data.total} currency={data.currency} /></strong>
-        <div className="dash-line muted small">
-          <span className="grow">{t("cards.locked")}</span>
-          {formatMoney(data.gebunden, data.currency)}
         </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;