Kartengroessen korrigiert, Vorschau im Menue, Zeitraum-Auswahl bei Verlaeufen

Zu kleine Karten (Konstruktionsfehler):
Bei Schnellzugriff, Status und den Kennzahlen war die Mindesthoehe gleich der
Standardhoehe - und beide zu klein. Bei 96 px Zeilenhoehe blieben nach Kartenkopf
und Innenabstand nur 23 px fuer den Inhalt, eine Kennzahl braucht allein rund
45 px. Deshalb erschien schon in der Grundeinstellung ein Rollbalken, und
kleiner ging es nicht.
- Zeilenhoehe von 96 auf 40 px: die Hoehe laesst sich jetzt fein abstufen.
- Jede Karte hat eine Mindesthoehe, in die ihr Inhalt nachweislich passt
  (Rechnung steht als Kommentar am Verzeichnis).
- Gespeicherte Anordnungen aus der alten Fassung werden beim Laden auf die
  Mindestgroesse angehoben, statt zu flach zu bleiben.

Vorschau im Menue "Karte hinzufuegen":
Der Name allein verriet nicht, was eine Karte zeigt. Jede Karte hat jetzt eine
kleine Skizze (Tabelle, Ring, Balken, Linie, Kennzahl) und eine Beschreibung.
Bewusst gezeichnete Skizzen statt echter Vorschau - sonst muesste das Menue fuer
jede Karte Daten laden.

Zeitraum bei den Verlaufskarten:
Bestandsverlauf, Artikelverlauf und Ein-/Auslagerungen haben eine Auswahl
7 Tage bis 1 Jahr.

Ringdiagramme:
Der Ring klebte oben in der Karte, darunter blieb viel Leerraum. Er fuellt jetzt
die Karte und sitzt mittig.

Geprueft: "npm run build" laeuft durch.

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

backend/app/routers/dashboard.py

@@ -49,14 +49,16 @@ router = APIRouter(prefix="/dashboard", tags=["dashboard"])
 ENFORCED_KEY = "dashboard_enforced"
 
 # Eingebaute Anordnung – wird benutzt, solange weder eigene noch Vorgabe existiert.
+# Höhen zählen Rasterzeilen à 40 px; die Oberfläche hebt zu flache Karten
+# zusätzlich auf ihre Mindesthöhe an.
 BUILTIN_LAYOUT: list[dict] = [
-    {"i": "actions", "x": 0, "y": 0, "w": 4, "h": 1},
-    {"i": "status", "x": 4, "y": 0, "w": 8, "h": 1},
-    {"i": "expiring", "x": 0, "y": 1, "w": 6, "h": 3},
-    {"i": "shopping", "x": 6, "y": 1, "w": 6, "h": 3},
-    {"i": "expiry-donut", "x": 0, "y": 4, "w": 4, "h": 3},
-    {"i": "category-donut", "x": 4, "y": 4, "w": 4, "h": 3},
-    {"i": "stock-timeline", "x": 8, "y": 4, "w": 4, "h": 3},
+    {"i": "actions", "x": 0, "y": 0, "w": 4, "h": 3},
+    {"i": "status", "x": 4, "y": 0, "w": 8, "h": 3},
+    {"i": "expiring", "x": 0, "y": 3, "w": 6, "h": 6},
+    {"i": "shopping", "x": 6, "y": 3, "w": 6, "h": 6},
+    {"i": "expiry-donut", "x": 0, "y": 9, "w": 4, "h": 6},
+    {"i": "category-donut", "x": 4, "y": 9, "w": 4, "h": 6},
+    {"i": "stock-timeline", "x": 8, "y": 9, "w": 4, "h": 6},
 ]
 
 

web/src/dashboard/Vorschau.jsx

@@ -0,0 +1,116 @@
+/**
+ * Kleine Skizzen für das Menü „Karte hinzufügen“.
+ *
+ * Bewusst abstrakte Zeichnungen statt einer echten Vorschau: Eine Live-Vorschau
+ * müsste für jede Karte Daten laden, nur um ein Menü zu zeigen. Die Skizze sagt
+ * in einem Blick, ob es eine Tabelle, ein Ring oder eine Linie wird – genau das,
+ * was der Name allein nicht verrät.
+ */
+const BREITE = 72;
+const HOEHE = 44;
+
+function Rahmen({ children }) {
+  return (
+    <svg className="vorschau" viewBox={`0 0 ${BREITE} ${HOEHE}`} aria-hidden="true">
+      <rect x="0.5" y="0.5" width={BREITE - 1} height={HOEHE - 1} rx="4"
+        fill="var(--surface-2)" stroke="var(--border)" />
+      {children}
+    </svg>
+  );
+}
+
+const SKIZZEN = {
+  aktion: (
+    <Rahmen>
+      <rect x="8" y="14" width="24" height="16" rx="4" fill="var(--accent)" />
+      <rect x="38" y="14" width="26" height="16" rx="4" fill="none" stroke="var(--border-strong)" />
+    </Rahmen>
+  ),
+
+  kennzahl: (
+    <Rahmen>
+      <rect x="10" y="12" width="18" height="4" rx="2" fill="var(--border-strong)" />
+      <rect x="10" y="20" width="30" height="12" rx="3" fill="var(--accent)" opacity="0.75" />
+    </Rahmen>
+  ),
+
+  kennzahlen: (
+    <Rahmen>
+      {[8, 28, 48].map((x, i) => (
+        <g key={x}>
+          <rect x={x} y="12" width="14" height="3" rx="1.5" fill="var(--border-strong)" />
+          <rect x={x} y="19" width="16" height="11" rx="3"
+            fill={["var(--ok)", "var(--warn)", "var(--danger)"][i]} opacity="0.75" />
+        </g>
+      ))}
+    </Rahmen>
+  ),
+
+  tabelle: (
+    <Rahmen>
+      <rect x="8" y="10" width="56" height="3" rx="1.5" fill="var(--border-strong)" />
+      {[18, 25, 32].map((y) => (
+        <g key={y}>
+          <rect x="8" y={y} width="26" height="3" rx="1.5" fill="var(--muted)" opacity="0.45" />
+          <rect x="40" y={y} width="24" height="3" rx="1.5" fill="var(--muted)" opacity="0.3" />
+        </g>
+      ))}
+    </Rahmen>
+  ),
+
+  ring: (
+    <Rahmen>
+      {/* Kreisumfang bei r=11: ~69 – daraus die Abschnitte */}
+      <g transform="translate(24 22) rotate(-90)">
+        <circle r="11" fill="none" stroke="var(--ok)" strokeWidth="7"
+          strokeDasharray="34 35" />
+        <circle r="11" fill="none" stroke="var(--warn)" strokeWidth="7"
+          strokeDasharray="17 52" strokeDashoffset="-34" />
+        <circle r="11" fill="none" stroke="var(--danger)" strokeWidth="7"
+          strokeDasharray="18 51" strokeDashoffset="-51" />
+      </g>
+      {[14, 21, 28].map((y, i) => (
+        <rect key={y} x="44" y={y} width="20" height="3" rx="1.5"
+          fill={["var(--ok)", "var(--warn)", "var(--danger)"][i]} opacity="0.8" />
+      ))}
+    </Rahmen>
+  ),
+
+  balken: (
+    <Rahmen>
+      {[12, 21, 30].map((y, i) => (
+        <g key={y}>
+          <rect x="8" y={y} width="12" height="4" rx="2" fill="var(--muted)" opacity="0.4" />
+          <rect x="24" y={y} width={[30, 22, 14][i]} height="4" rx="2" fill="var(--ok)" opacity="0.8" />
+          <rect x={24 + [30, 22, 14][i] + 2} y={y} width="8" height="4" rx="2"
+            fill="var(--warn)" opacity="0.8" />
+        </g>
+      ))}
+    </Rahmen>
+  ),
+
+  linie: (
+    <Rahmen>
+      <line x1="8" y1="32" x2="64" y2="32" stroke="var(--border-strong)" strokeWidth="1" />
+      <polyline points="8,28 20,22 32,25 44,14 56,18 64,11"
+        fill="none" stroke="var(--accent)" strokeWidth="2"
+        strokeLinecap="round" strokeLinejoin="round" />
+    </Rahmen>
+  ),
+
+  linien: (
+    <Rahmen>
+      <line x1="8" y1="34" x2="64" y2="34" stroke="var(--border-strong)" strokeWidth="1" />
+      <polyline points="8,26 20,18 32,22 44,14 56,20 64,15"
+        fill="none" stroke="var(--ok)" strokeWidth="2"
+        strokeLinecap="round" strokeLinejoin="round" />
+      <polyline points="8,30 20,28 32,30 44,25 56,29 64,26"
+        fill="none" stroke="var(--warn)" strokeWidth="2"
+        strokeLinecap="round" strokeLinejoin="round" />
+    </Rahmen>
+  ),
+};
+
+export default function Vorschau({ art }) {
+  return SKIZZEN[art] ?? SKIZZEN.tabelle;
+}

web/src/dashboard/cards.jsx

@@ -272,30 +272,56 @@ function KarteKategorienSaeulen() {
   );
 }
 
-function KarteBestandsverlauf({ tage = 90 }) {
+/** Zeitraum-Auswahl für die Verlaufskarten. */
+const ZEITRAEUME = [
+  { tage: 7, label: "7 Tage" },
+  { tage: 30, label: "30 Tage" },
+  { tage: 90, label: "90 Tage" },
+  { tage: 180, label: "6 Monate" },
+  { tage: 365, label: "1 Jahr" },
+];
+
+function ZeitraumWahl({ wert, setzen }) {
+  return (
+    <select className="zeitraum" value={wert} onChange={(e) => setzen(Number(e.target.value))}>
+      {ZEITRAEUME.map((z) => <option key={z.tage} value={z.tage}>{z.label}</option>)}
+    </select>
+  );
+}
+
+function KarteBestandsverlauf() {
+  const [tage, setTage] = useState(90);
   const { daten, fehler } = useDaten(() => api.dashboardTimeline(tage), [tage]);
-  if (fehler) return <div className="alert error"><Icon name="alert" size={16} />{fehler}</div>;
-  if (!daten) return <div className="empty">Lädt…</div>;
 
   return (
-    <Line
-      labels={daten.map((p) => kurzesDatum(p.date))}
-      serien={[{
-        name: "Artikeleinheiten",
-        color: tokenFarbe("--accent", "#3f51b5"),
-        werte: daten.map((p) => p.article_units),
-      }]}
-      einheit="Einheiten"
-    />
+    <div className="card-stack">
+      <ZeitraumWahl wert={tage} setzen={setTage} />
+      {fehler ? (
+        <div className="alert error"><Icon name="alert" size={16} />{fehler}</div>
+      ) : !daten ? (
+        <div className="empty">Lädt…</div>
+      ) : (
+        <Line
+          labels={daten.map((p) => kurzesDatum(p.date))}
+          serien={[{
+            name: "Artikeleinheiten",
+            color: tokenFarbe("--accent", "#3f51b5"),
+            werte: daten.map((p) => p.article_units),
+          }]}
+          einheit="Einheiten"
+        />
+      )}
+    </div>
   );
 }
 
 function KarteArtikelverlauf() {
   const [produkte, setProdukte] = useState([]);
   const [gewaehlt, setGewaehlt] = useState("");
+  const [tage, setTage] = useState(90);
   const { daten, fehler } = useDaten(
-    () => (gewaehlt ? api.dashboardTimeline(90, gewaehlt) : Promise.resolve([])),
-    [gewaehlt],
+    () => (gewaehlt ? api.dashboardTimeline(tage, gewaehlt) : Promise.resolve([])),
+    [gewaehlt, tage],
   );
 
   useEffect(() => {
@@ -308,11 +334,13 @@ function KarteArtikelverlauf() {
 
   return (
     <div className="card-stack">
-      <select value={gewaehlt} onChange={(e) => setGewaehlt(e.target.value)}
-        style={{ marginTop: 0, maxWidth: 280 }}>
-        <option value="">– Artikel wählen –</option>
-        {produkte.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
-      </select>
+      <div className="card-toolbar">
+        <select value={gewaehlt} onChange={(e) => setGewaehlt(e.target.value)}>
+          <option value="">– Artikel wählen –</option>
+          {produkte.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
+        </select>
+        <ZeitraumWahl wert={tage} setzen={setTage} />
+      </div>
       {fehler ? (
         <div className="alert error"><Icon name="alert" size={16} />{fehler}</div>
       ) : (
@@ -330,79 +358,123 @@ function KarteArtikelverlauf() {
   );
 }
 
-function KarteBewegungsverlauf({ tage = 30 }) {
+function KarteBewegungsverlauf() {
+  const [tage, setTage] = useState(30);
   const { daten, fehler } = useDaten(() => api.dashboardActivity(tage), [tage]);
-  if (fehler) return <div className="alert error"><Icon name="alert" size={16} />{fehler}</div>;
-  if (!daten) return <div className="empty">Lädt…</div>;
 
   return (
-    <Line
-      labels={daten.map((p) => kurzesDatum(p.date))}
-      serien={[
-        { name: "Eingelagert", color: tokenFarbe("--ok", "#2e7d55"), werte: daten.map((p) => p.checked_in) },
-        { name: "Ausgelagert", color: tokenFarbe("--warn", "#b06f14"), werte: daten.map((p) => p.checked_out) },
-      ]}
-      einheit="Vorgänge"
-    />
+    <div className="card-stack">
+      <ZeitraumWahl wert={tage} setzen={setTage} />
+      {fehler ? (
+        <div className="alert error"><Icon name="alert" size={16} />{fehler}</div>
+      ) : !daten ? (
+        <div className="empty">Lädt…</div>
+      ) : (
+        <Line
+          labels={daten.map((p) => kurzesDatum(p.date))}
+          serien={[
+            { name: "Eingelagert", color: tokenFarbe("--ok", "#2e7d55"), werte: daten.map((p) => p.checked_in) },
+            { name: "Ausgelagert", color: tokenFarbe("--warn", "#b06f14"), werte: daten.map((p) => p.checked_out) },
+          ]}
+          einheit="Vorgänge"
+        />
+      )}
+    </div>
   );
 }
 
 // ---------------------------------------------------------------- Verzeichnis
+/**
+ * Höhen sind Rasterzeilen à 40 px (plus 16 px Abstand je weiterer Zeile).
+ * Die Mindesthöhe ist bewusst so gewählt, dass der Inhalt ohne Rollbalken
+ * hineinpasst – vorher war sie gleich der Standardhöhe und beide zu klein.
+ *
+ *   nutzbare Höhe = h * 40 + (h - 1) * 16 − 41 (Kopf) − 32 (Innenabstand)
+ *   h=3 → 79 px   h=4 → 119 px   h=6 → 199 px   h=7 → 239 px
+ */
 export const KARTEN = {
   actions: {
-    titel: "Schnellzugriff", icon: "checkin", standard: { w: 4, h: 1 }, min: { w: 3, h: 1 },
+    titel: "Schnellzugriff", icon: "checkin", vorschau: "aktion",
+    beschreibung: "Knöpfe zum Ein- und Auslagern",
+    standard: { w: 4, h: 3 }, min: { w: 3, h: 3 },
     komponente: KarteAktionen,
   },
   status: {
-    titel: "Status", icon: "dashboard", standard: { w: 8, h: 1 }, min: { w: 4, h: 1 },
+    titel: "Status", icon: "dashboard", vorschau: "kennzahlen",
+    beschreibung: "Bald ablaufend, abgelaufen, nachzukaufen",
+    standard: { w: 8, h: 3 }, min: { w: 4, h: 3 },
     komponente: KarteStatus,
   },
   "kpi-products": {
-    titel: "Artikel mit Bestand", icon: "package", standard: { w: 3, h: 1 }, min: { w: 2, h: 1 },
+    titel: "Artikel mit Bestand", icon: "package", vorschau: "kennzahl",
+    beschreibung: "Anzahl verschiedener Artikel im Lager",
+    standard: { w: 3, h: 3 }, min: { w: 2, h: 3 },
     komponente: KarteArtikelzahl,
   },
   "kpi-units": {
-    titel: "Artikeleinheiten", icon: "box", standard: { w: 3, h: 1 }, min: { w: 2, h: 1 },
+    titel: "Artikeleinheiten", icon: "box", vorschau: "kennzahl",
+    beschreibung: "Summe aller Gebinde im Lager",
+    standard: { w: 3, h: 3 }, min: { w: 2, h: 3 },
     komponente: KarteEinheiten,
   },
   expiring: {
-    titel: "Bald ablaufend", icon: "clock", standard: { w: 6, h: 3 }, min: { w: 4, h: 2 },
+    titel: "Bald ablaufend", icon: "clock", vorschau: "tabelle",
+    beschreibung: "Chargen innerhalb der Warnfrist",
+    standard: { w: 6, h: 6 }, min: { w: 4, h: 4 },
     komponente: () => <KarteAblauf />,
   },
   expired: {
-    titel: "Abgelaufen", icon: "alert", standard: { w: 6, h: 2 }, min: { w: 4, h: 2 },
+    titel: "Abgelaufen", icon: "alert", vorschau: "tabelle",
+    beschreibung: "Nur überfällige Chargen",
+    standard: { w: 6, h: 5 }, min: { w: 4, h: 4 },
     komponente: () => <KarteAblauf nurAbgelaufen />,
   },
   shopping: {
-    titel: "Einkaufsliste", icon: "cart", standard: { w: 6, h: 3 }, min: { w: 4, h: 2 },
+    titel: "Einkaufsliste", icon: "cart", vorschau: "tabelle",
+    beschreibung: "Produkte und Gruppen unter Mindestbestand",
+    standard: { w: 6, h: 6 }, min: { w: 4, h: 4 },
     komponente: KarteEinkaufsliste,
   },
   movements: {
-    titel: "Letzte Bewegungen", icon: "history", standard: { w: 6, h: 3 }, min: { w: 4, h: 2 },
+    titel: "Letzte Bewegungen", icon: "history", vorschau: "tabelle",
+    beschreibung: "Wer hat zuletzt was ein- oder ausgelagert",
+    standard: { w: 6, h: 6 }, min: { w: 4, h: 4 },
     komponente: KarteBewegungen,
   },
   "expiry-donut": {
-    titel: "Ablauf-Anteile", icon: "clock", standard: { w: 4, h: 3 }, min: { w: 3, h: 3 },
+    titel: "Ablauf-Anteile", icon: "clock", vorschau: "ring",
+    beschreibung: "Ring: in Ordnung, bald ablaufend, abgelaufen",
+    standard: { w: 4, h: 6 }, min: { w: 3, h: 5 },
     komponente: KarteAblaufRing,
   },
   "category-donut": {
-    titel: "Kategorien-Anteile", icon: "tag", standard: { w: 4, h: 3 }, min: { w: 3, h: 3 },
+    titel: "Kategorien-Anteile", icon: "tag", vorschau: "ring",
+    beschreibung: "Ring: welche Kategorie wie viel ausmacht",
+    standard: { w: 4, h: 6 }, min: { w: 3, h: 5 },
     komponente: KarteKategorienRing,
   },
   "category-bars": {
-    titel: "Kategorien nach Zustand", icon: "tag", standard: { w: 8, h: 3 }, min: { w: 4, h: 2 },
+    titel: "Kategorien nach Zustand", icon: "tag", vorschau: "balken",
+    beschreibung: "Balken je Kategorie, nach Ablauf aufgeteilt",
+    standard: { w: 8, h: 6 }, min: { w: 4, h: 5 },
     komponente: KarteKategorienSaeulen,
   },
   "stock-timeline": {
-    titel: "Bestandsverlauf", icon: "history", standard: { w: 8, h: 3 }, min: { w: 4, h: 2 },
+    titel: "Bestandsverlauf", icon: "history", vorschau: "linie",
+    beschreibung: "Artikeleinheiten im Lager über 90 Tage",
+    standard: { w: 8, h: 6 }, min: { w: 4, h: 5 },
     komponente: KarteBestandsverlauf,
   },
   "product-timeline": {
-    titel: "Verlauf eines Artikels", icon: "package", standard: { w: 8, h: 3 }, min: { w: 4, h: 3 },
+    titel: "Verlauf eines Artikels", icon: "package", vorschau: "linie",
+    beschreibung: "Ein wählbarer Artikel über 90 Tage",
+    standard: { w: 8, h: 7 }, min: { w: 4, h: 6 },
     komponente: KarteArtikelverlauf,
   },
   "activity-timeline": {
-    titel: "Ein- und Auslagerungen", icon: "history", standard: { w: 8, h: 3 }, min: { w: 4, h: 2 },
+    titel: "Ein- und Auslagerungen", icon: "history", vorschau: "linien",
+    beschreibung: "Vorgänge je Tag über 30 Tage",
+    standard: { w: 8, h: 6 }, min: { w: 4, h: 5 },
     komponente: KarteBewegungsverlauf,
   },
 };

web/src/pages/Dashboard.jsx

@@ -5,11 +5,15 @@ import { useAuth } from "../auth";
 import Icon from "../components/Icon";
 import { useConfirm } from "../confirm";
 import { KARTEN, KARTEN_IDS } from "../dashboard/cards";
+import Vorschau from "../dashboard/Vorschau";
 
 const Raster = WidthProvider(GridLayout);
 
 const SPALTEN = 12;
-const ZEILENHOEHE = 96;
+// Feine Zeilen: Damit lässt sich die Höhe in kleinen Schritten anpassen. Mit den
+// vorherigen 96 px war schon die kleinste Stufe entweder zu klein (Rollbalken)
+// oder unnötig hoch.
+const ZEILENHOEHE = 40;
 
 /**
  * Startseite als frei zusammenstellbares Raster.
@@ -48,9 +52,20 @@ export default function Dashboard() {
 
   useEffect(() => { laden(); }, []);
 
-  /** Unbekannte Karten aussortieren – z.B. nach einem Update, das eine entfernt. */
+  /**
+   * Unbekannte Karten aussortieren – z.B. nach einem Update, das eine entfernt.
+   * Zusätzlich zu kleine Karten auf ihre Mindestgröße heben: Gespeicherte
+   * Anordnungen aus einer früheren Fassung haben Höhen aus einem gröberen
+   * Raster und wären sonst zu flach für ihren Inhalt.
+   */
   function bereinige(liste) {
-    return (liste || []).filter((k) => KARTEN[k.i]);
+    return (liste || [])
+      .filter((k) => KARTEN[k.i])
+      .map((k) => ({
+        ...k,
+        w: Math.max(k.w, KARTEN[k.i].min.w),
+        h: Math.max(k.h, KARTEN[k.i].min.h),
+      }));
   }
 
   const verfuegbar = useMemo(
@@ -173,15 +188,17 @@ export default function Dashboard() {
                   <Icon name="plus" size={16} />Karte hinzufügen
                 </button>
                 {menuOffen && (
-                  <ul className="menu">
+                  <div className="menu karten-menu">
                     {verfuegbar.map((id) => (
-                      <li key={id}>
-                        <button className="link-btn" onClick={() => hinzufuegen(id)}>
-                          <Icon name={KARTEN[id].icon} size={15} />{KARTEN[id].titel}
-                        </button>
-                      </li>
+                      <button key={id} className="karten-wahl" onClick={() => hinzufuegen(id)}>
+                        <Vorschau art={KARTEN[id].vorschau} />
+                        <span className="karten-text">
+                          <span className="karten-titel">{KARTEN[id].titel}</span>
+                          <span className="muted small">{KARTEN[id].beschreibung}</span>
+                        </span>
+                      </button>
                     ))}
-                  </ul>
+                  </div>
                 )}
               </div>
               <button className="btn primary" onClick={speichern}>Speichern</button>

web/src/styles.css

@@ -495,7 +495,10 @@ td select { width: auto; min-width: 0; max-width: 100%; }
 }
 .dash-card-head h2 { margin: 0; flex: 1; font-size: 0.9rem; }
 .dash-card-head .icon { color: var(--muted); }
-.dash-card-body { flex: 1; min-height: 0; overflow: auto; padding: var(--sp-4); }
+.dash-card-body {
+  flex: 1; min-height: 0; overflow: auto; padding: var(--sp-4);
+  display: flex; flex-direction: column;
+}
 
 /* Anfasser nur im Bearbeitungsmodus - sonst stoert er beim Lesen. */
 .dash-grid .react-resizable-handle { display: none; }
@@ -536,6 +539,25 @@ td select { width: auto; min-width: 0; max-width: 100%; }
 }
 .menu .link-btn:hover { background: var(--surface-2); text-decoration: none; }
 
+/* Auswahl mit Skizze: Der Name allein verraet nicht, ob eine Karte eine
+   Tabelle, ein Ring oder eine Linie wird. */
+.karten-menu { min-width: 340px; max-height: 60vh; }
+.karten-wahl {
+  display: flex; align-items: center; gap: var(--sp-3);
+  width: 100%; padding: var(--sp-2); border: none; background: none;
+  border-radius: var(--radius-sm); cursor: pointer; text-align: left;
+  font: inherit; color: var(--text);
+}
+.karten-wahl:hover { background: var(--surface-2); }
+.karten-wahl .vorschau { width: 72px; height: 44px; flex: 0 0 auto; }
+.karten-text { display: flex; flex-direction: column; min-width: 0; }
+.karten-titel { font-weight: 600; font-size: 0.875rem; }
+
+/* Auswahlfelder in Karten (Zeitraum, Artikel) */
+.card-toolbar { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
+.card-toolbar select { margin-top: 0; width: auto; min-width: 0; flex: 1 1 140px; }
+select.zeitraum { margin-top: 0; width: auto; min-width: 0; flex: 0 0 auto; align-self: flex-start; }
+
 /* ---------- Startseite: Kartentypen ---------- */
 .card-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
 .card-stack { display: flex; flex-direction: column; gap: var(--sp-3); height: 100%; }
@@ -551,7 +573,13 @@ td select { width: auto; min-width: 0; max-width: 100%; }
 .kpi.danger .kpi-value { color: var(--danger); }
 
 /* ---------- Diagramme ---------- */
-.chart-donut { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
+/* Der Ring fuellt die Karte und sitzt mittig – vorher klebte er oben und
+   darunter blieb eine grosse leere Flaeche stehen. */
+.chart-donut {
+  display: flex; align-items: center; justify-content: center;
+  gap: var(--sp-4); flex-wrap: wrap;
+  flex: 1; min-height: 0;
+}
 .donut-svg { width: 160px; height: 160px; flex: 0 0 auto; }
 .donut-svg circle { transition: stroke-width 120ms ease; cursor: default; }
 .donut-value { font-size: 20px; font-weight: 680; fill: var(--text); }