feat: Auch der Balken der Ausgaben-Anteile faerbt nach Budget

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

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