feat: Ausgaben-Anteile faerben nach Budget

Die Karte zeigte nur, wie sich die Ausgaben verteilen – nicht, ob sie im
Rahmen liegen. Der Betrag ist jetzt gruen, solange er unter dem Geplanten
bleibt, und rot darueber. Dieselben Farben wie ueberall sonst fuer Einnahme
und Ausgabe.

Ohne Plan bleibt der Betrag gedeckt. "Ueber Budget" waere sonst die Aussage
ueber jede Kategorie, fuer die nie eine Vorgabe gemacht wurde – die Karte
stuende dann fast durchgehend auf Rot und sagte nichts mehr.

Das Geplante kommt aus derselben Quelle wie im Budget-Fortschritt, also
einschliesslich eines Monats-Werts, der die Vorlage uebersteuert.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/src/dashboard/cards.jsx

@@ -178,7 +178,13 @@ function ExpenseShare({ props }) {
               <span style={{ color: r.color }}>●</span>
               <span className="grow ellipsis share-name">{r.name}</span>
               <strong className="share-pct">{pct.toFixed(1).replace(".", ",")} %</strong>
-              <span className="muted small share-amount">{formatMoney(r.amount, data.currency)}</span>
+              {/* Grün im geplanten Rahmen, rot darüber – dieselben Farben wie
+                  überall sonst für Einnahme und Ausgabe. Ohne Plan bleibt der
+                  Betrag gedeckt: Da gibt es nichts zu überschreiten. */}
+              <span className={`amount small share-amount ${
+                r.planned > 0 ? (r.over ? "neg" : "pos") : "muted"}`}>
+                {formatMoney(r.amount, data.currency)}
+              </span>
             </div>
             <div className="budget-bar">
               <div className="budget-bar-fill" style={{ width: `${pct}%`, background: r.color }} />