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>
         );