Web-UI: professionelles Redesign (Icons statt Emojis) + neue Features

Design:
- Neues Icon-Set (Inline-SVG, Feather-Stil), keine Emojis mehr
- Kohaerentes Design-System (Sidebar-Layout, Palette, Spacing, Light/Dark)
- Alle Seiten ueberarbeitet (Login, Dashboard, Produkte, Formular, Ein-/Auslagern,
  Lagerorte, Benutzer, Einkaufsliste)

Neue Features:
- Gruppen-Verwaltung (anlegen/bearbeiten/loeschen, Produktzahl + Bestand,
  Gruppen-Mindestbestand) inkl. Einkaufsliste
- Einfache Gruppen-Auto-Zuordnung aus OFF-Kategorie im Produktformular
- Verlauf-Seite (Bewegungen: wer/was/wann) via neuem /movements-Endpoint
- Einstellungen-Seite (Ablauf-Warnfrist)
- Lagerorte mit optional uebergeordnetem Ort (verschachtelbar)

Backend:
- groups: PATCH + Anreicherung (product_count, stock)
- views: /shopping-list/groups, /movements
- schemas: GroupUpdate, GroupShoppingItem, MovementOut

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

web/src/pages/ShoppingList.jsx

@@ -1,46 +1,76 @@
 import { useEffect, useState } from "react";
 import { api } from "../api";
+import Icon from "../components/Icon";
 import { fmt, unitShort } from "../units";
 
 export default function ShoppingList() {
   const [items, setItems] = useState([]);
+  const [groups, setGroups] = useState([]);
   const [checked, setChecked] = useState({});
   const [error, setError] = useState(null);
 
   useEffect(() => {
-    api.shoppingList().then(setItems).catch((e) => setError(e.message));
+    Promise.all([api.shoppingList(), api.groupShoppingList()])
+      .then(([p, g]) => { setItems(p); setGroups(g); })
+      .catch((e) => setError(e.message));
   }, []);
 
+  const empty = items.length === 0 && groups.length === 0;
+
+  function toggle(key, val) {
+    setChecked((c) => ({ ...c, [key]: val }));
+  }
+
   return (
     <div>
-      <div className="page-head"><h1>🛒 Einkaufsliste</h1></div>
-      {error && <div className="alert error">{error}</div>}
-      <p className="muted">
-        Produkte, deren Bestand unter dem hinterlegten Mindestbestand liegt.
-      </p>
+      <div className="page-head">
+        <div>
+          <h1>Einkaufsliste</h1>
+          <div className="sub">Produkte und Gruppen unter ihrem Mindestbestand</div>
+        </div>
+      </div>
+      {error && <div className="alert error"><Icon name="alert" size={16} />{error}</div>}
+
       <div className="card">
-        {items.length === 0 ? (
-          <p className="muted">Alle Mindestbestände erreicht. 👍</p>
+        {empty ? (
+          <div className="empty">Alle Mindestbestände erreicht.</div>
         ) : (
           <ul className="checklist">
-            {items.map((it) => (
-              <li key={it.product_id} className={checked[it.product_id] ? "done" : ""}>
-                <label>
-                  <input type="checkbox" checked={!!checked[it.product_id]}
-                    onChange={(e) => setChecked({ ...checked, [it.product_id]: e.target.checked })} />
-                  <span className="item-name">{it.name}</span>
-                </label>
-                <span className="item-qty">
-                  fehlt <strong>{fmt(it.deficit)} {unitShort(it.base_unit)}</strong>
-                  <span className="muted"> (Bestand {fmt(it.stock)} / min {fmt(it.min_stock)})</span>
-                </span>
-              </li>
-            ))}
+            {groups.map((it) => {
+              const key = `g${it.group_id}`;
+              return (
+                <li key={key} className={checked[key] ? "done" : ""}>
+                  <label>
+                    <input type="checkbox" checked={!!checked[key]} onChange={(e) => toggle(key, e.target.checked)} />
+                    <span className="badge accent">Gruppe</span>
+                    <span className="item-name">{it.name}</span>
+                  </label>
+                  <span className="muted small">
+                    fehlt <strong>{fmt(it.deficit)}</strong> (Bestand {fmt(it.stock)} / min {fmt(it.min_stock)})
+                  </span>
+                </li>
+              );
+            })}
+            {items.map((it) => {
+              const key = `p${it.product_id}`;
+              return (
+                <li key={key} className={checked[key] ? "done" : ""}>
+                  <label>
+                    <input type="checkbox" checked={!!checked[key]} onChange={(e) => toggle(key, e.target.checked)} />
+                    <span className="item-name">{it.name}</span>
+                  </label>
+                  <span className="muted small">
+                    fehlt <strong>{fmt(it.deficit)} {unitShort(it.base_unit)}</strong>{" "}
+                    (Bestand {fmt(it.stock)} / min {fmt(it.min_stock)})
+                  </span>
+                </li>
+              );
+            })}
           </ul>
         )}
       </div>
       <p className="muted small">
-        Das Abhaken dient hier nur der Übersicht beim Einkaufen und wird (noch) nicht gespeichert.
+        Das Abhaken hilft beim Einkaufen und wird (noch) nicht dauerhaft gespeichert.
       </p>
     </div>
   );