Weboberflaeche mit Spielerkonto, Import und Verwaltung

Die Spieler-Detailseite beantwortet die Kernfrage direkt: drei grosse Zaehler,
rot sobald ein Topf im Minus ist, darunter ob ein neuer CC oder ein Redesign
gerade moeglich ist.

Inaktive CCs zeigen ihren Grund und bieten genau die passende Aktion an -
gratis reaktivieren oder bezahlt. Beim Redesign steht der Kulanz-Topf an
erster Stelle, damit er zuerst aufgebraucht wird.

Der Import fuehrt ueber Spaltenzuordnung und Vorschau; gebucht wird erst nach
Bestaetigung.

web/src/components/BalanceCards.tsx

@@ -0,0 +1,43 @@
+import type { Balances } from '../lib/types';
+
+function Card({ label, value, hint }: { label: string; value: number; hint?: string }) {
+  return (
+    <div className={`balance-card${value < 0 ? ' is-negative' : ''}`}>
+      <span className="balance-label">{label}</span>
+      <span className="balance-value">{value}</span>
+      {hint && <span className="balance-hint">{hint}</span>}
+    </div>
+  );
+}
+
+export default function BalanceCards({ balances }: { balances: Balances }) {
+  const canCreate = balances.CC >= 1;
+  const canRedesign = balances.redesignTotal >= 1;
+
+  return (
+    <section className="balances" aria-label="Guthaben">
+      <div className="balance-grid">
+        <Card label="CC-Guthaben" value={balances.CC} />
+        <Card label="Redesign (bezahlt)" value={balances.REDESIGN_PAID} />
+        <Card label="Redesign (Kulanz)" value={balances.REDESIGN_KULANZ} />
+      </div>
+
+      <div className="eligibility">
+        <span className={canCreate ? 'ok' : 'no'}>
+          {canCreate ? '✓' : '✕'} Neuer CC {canCreate ? 'moeglich' : 'nicht moeglich'}
+        </span>
+        <span className={canRedesign ? 'ok' : 'no'}>
+          {canRedesign ? '✓' : '✕'} Redesign {canRedesign ? 'moeglich' : 'nicht moeglich'}
+          {canRedesign && ` (${balances.redesignTotal} verfuegbar)`}
+        </span>
+      </div>
+
+      {(balances.CC < 0 || balances.REDESIGN_PAID < 0 || balances.REDESIGN_KULANZ < 0) && (
+        <p className="overdrawn-hint">
+          Mindestens ein Topf ist im Minus. Das ist erlaubt, deutet aber meist auf ein noch nicht
+          erfasstes Paket hin.
+        </p>
+      )}
+    </section>
+  );
+}