From 493a98ab6b95f722613489fe9fef4eca63bbf3d0 Mon Sep 17 00:00:00 2001
From: Scarriffle <scarriffleservices@gmail.com>
Date: Thu, 1 Oct 2026 21:31:19 +0200
Subject: [PATCH] fix: Auf der Uebersicht stand nicht, welcher Betrag gebunden
 ist
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 37 ++++++++++++++++++++++++-------------
 web/src/finance.css         | 13 +++++++++++++
 2 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/web/src/dashboard/cards.jsx b/web/src/dashboard/cards.jsx
index c3684bf..f7f1f37 100644
--- a/web/src/dashboard/cards.jsx
+++ b/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>
   );
 }
diff --git a/web/src/finance.css b/web/src/finance.css
index 74aa48a..7ac02d7 100644
--- a/web/src/finance.css
+++ b/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;