From 4d3b9a82078e530c16213c69559b5802fbd7aeb4 Mon Sep 17 00:00:00 2001
From: Guido <guido.schmit03@gmail.com>
Date: Sun, 30 Aug 2026 14:09:14 +0200
Subject: [PATCH] feat: Auch der Balken der Ausgaben-Anteile faerbt nach Budget
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Der Balken IST die Ausgabe – er soll die Aussage mittragen, damit man sie
sieht, ohne die Zahl zu lesen. Gruen im geplanten Rahmen, rot darueber.

Ohne Plan behaelt er die Kategoriefarbe: Da gibt es nichts zu ueberschreiten,
und die Karte stuende sonst fast durchgehend auf einer Farbe, die nichts
bedeutet.

Der Punkt links bleibt in jedem Fall in der Kategoriefarbe – sonst liessen
sich die Zeilen nicht mehr auseinanderhalten.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 web/src/dashboard/cards.jsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/web/src/dashboard/cards.jsx b/web/src/dashboard/cards.jsx
index 55fb723..04de542 100644
--- a/web/src/dashboard/cards.jsx
+++ b/web/src/dashboard/cards.jsx
@@ -187,7 +187,12 @@ function ExpenseShare({ props }) {
               </span>
             </div>
             <div className="budget-bar">
-              <div className="budget-bar-fill" style={{ width: `${pct}%`, background: r.color }} />
+              {/* Der Balken IST die Ausgabe – er trägt die Aussage mit, damit
+                  man sie sieht, ohne die Zahl zu lesen. Ohne Plan bleibt die
+                  Kategoriefarbe: Da gibt es nichts zu überschreiten. */}
+              <div className={`budget-bar-fill${r.planned > 0 && r.over ? " over" : ""}`}
+                   style={{ width: `${pct}%`,
+                            ...(r.planned > 0 ? {} : { background: r.color }) }} />
             </div>
           </div>
         );