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/Products.jsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { api } from "../api";
 import { useAuth } from "../auth";
+import Icon from "../components/Icon";
 import { fmt, unitShort } from "../units";
 
 export default function Products() {
@@ -31,50 +32,66 @@ export default function Products() {
   return (
     <div>
       <div className="page-head">
-        <h1>Produkte</h1>
-        {isAdmin && <Link className="btn primary" to="/products/new">+ Neues Produkt</Link>}
+        <div>
+          <h1>Produkte</h1>
+          <div className="sub">{products.length} Produkte im Katalog</div>
+        </div>
+        {isAdmin && (
+          <Link className="btn primary" to="/products/new"><Icon name="plus" size={16} />Neues Produkt</Link>
+        )}
       </div>
-      {error && <div className="alert error">{error}</div>}
 
-      <form className="search" onSubmit={onSearch}>
-        <input placeholder="Suchen…" value={q} onChange={(e) => setQ(e.target.value)} />
-        <button className="btn">Suchen</button>
+      {error && <div className="alert error"><Icon name="alert" size={16} />{error}</div>}
+
+      <form className="field-inline" style={{ marginBottom: "var(--sp-4)", maxWidth: 420 }} onSubmit={onSearch}>
+        <label className="grow" style={{ margin: 0 }}>
+          <input placeholder="Produkt suchen…" value={q} onChange={(e) => setQ(e.target.value)} />
+        </label>
+        <button className="btn"><Icon name="search" size={16} />Suchen</button>
       </form>
 
-      <div className="card">
-        <table className="table">
-          <thead>
-            <tr>
-              <th></th>
-              <th>Name</th>
-              <th>Marke</th>
-              <th>Basiseinheit</th>
-              <th>Bestand</th>
-              <th>Mindest</th>
-              <th></th>
-            </tr>
-          </thead>
-          <tbody>
-            {products.map((p) => (
-              <tr key={p.id}>
-                <td className="thumb-cell">
-                  {p.image_url ? <img className="thumb" src={p.image_url} alt="" /> : "📦"}
-                </td>
-                <td>{p.name}</td>
-                <td className="muted">{p.brand || "–"}</td>
-                <td>{unitShort(p.base_unit)}{p.package_size ? ` · Pkg ${p.package_size}` : ""}</td>
-                <td className={p.min_stock != null && p.stock < p.min_stock ? "strong row-warn-text" : ""}>
-                  {fmt(p.stock)} {unitShort(p.base_unit)}
-                </td>
-                <td className="muted">{p.min_stock != null ? fmt(p.min_stock) : "–"}</td>
-                <td><Link to={`/products/${p.id}`}>Details</Link></td>
+      <div className="card" style={{ padding: 0 }}>
+        <div className="table-wrap">
+          <table className="table">
+            <thead>
+              <tr>
+                <th></th>
+                <th>Name</th>
+                <th>Marke</th>
+                <th>Einheit</th>
+                <th className="num">Bestand</th>
+                <th className="num">Mindest</th>
+                <th></th>
               </tr>
-            ))}
-            {products.length === 0 && (
-              <tr><td colSpan={7} className="muted center">Keine Produkte.</td></tr>
-            )}
-          </tbody>
-        </table>
+            </thead>
+            <tbody>
+              {products.map((p) => {
+                const low = p.min_stock != null && p.stock < p.min_stock;
+                return (
+                  <tr key={p.id}>
+                    <td className="thumb-cell">
+                      {p.image_url
+                        ? <img className="thumb" src={p.image_url} alt="" />
+                        : <span className="thumb thumb-fallback"><Icon name="box" size={16} /></span>}
+                    </td>
+                    <td className="strong">{p.name}</td>
+                    <td className="muted">{p.brand || "–"}</td>
+                    <td>{unitShort(p.base_unit)}{p.package_size ? ` · Pkg ${fmt(p.package_size)}` : ""}</td>
+                    <td className="num">
+                      {fmt(p.stock)} {unitShort(p.base_unit)}
+                      {low && <span className="badge warn" style={{ marginLeft: 6 }}>niedrig</span>}
+                    </td>
+                    <td className="num muted">{p.min_stock != null ? fmt(p.min_stock) : "–"}</td>
+                    <td className="num"><Link to={`/products/${p.id}`}>Details</Link></td>
+                  </tr>
+                );
+              })}
+              {products.length === 0 && (
+                <tr><td colSpan={7} className="empty">Keine Produkte gefunden.</td></tr>
+              )}
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
   );