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

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { api } from "../api";
 import { useAuth } from "../auth";
+import Icon from "../components/Icon";
 
 export default function Users() {
   const { user: me } = useAuth();
@@ -53,38 +54,49 @@ export default function Users() {
 
   return (
     <div>
-      <div className="page-head"><h1>Benutzer</h1></div>
-      {error && <div className="alert error">{error}</div>}
-      {info && <div className="alert info">{info}</div>}
+      <div className="page-head">
+        <div>
+          <h1>Benutzer</h1>
+          <div className="sub">Administratoren verwalten alles, Benutzer lagern nur ein und aus</div>
+        </div>
+      </div>
+      {error && <div className="alert error"><Icon name="alert" size={16} />{error}</div>}
+      {info && <div className="alert ok"><Icon name="check" size={16} />{info}</div>}
 
       <div className="grid-2">
-        <div className="card">
-          <h2>Benutzer</h2>
-          <table className="table">
-            <thead><tr><th>Name</th><th>Rolle</th><th></th></tr></thead>
-            <tbody>
-              {users.map((u) => (
-                <tr key={u.id}>
-                  <td>{u.username}{u.id === me.id && <span className="muted"> (du)</span>}</td>
-                  <td>
-                    <select value={u.role} onChange={(e) => changeRole(u, e.target.value)} disabled={u.id === me.id}>
-                      <option value="user">Nutzer</option>
-                      <option value="admin">Admin</option>
-                    </select>
-                  </td>
-                  <td>
-                    {u.id !== me.id && (
-                      <button className="btn ghost danger" onClick={() => remove(u)}>Löschen</button>
-                    )}
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
+        <div className="card" style={{ padding: 0 }}>
+          <div className="table-wrap">
+            <table className="table">
+              <thead><tr><th>Name</th><th>Rolle</th><th></th></tr></thead>
+              <tbody>
+                {users.map((u) => (
+                  <tr key={u.id}>
+                    <td className="strong">
+                      {u.username}{u.id === me.id && <span className="muted"> (du)</span>}
+                    </td>
+                    <td>
+                      <select value={u.role} onChange={(e) => changeRole(u, e.target.value)}
+                        disabled={u.id === me.id} style={{ maxWidth: 150 }}>
+                        <option value="user">Benutzer</option>
+                        <option value="admin">Administrator</option>
+                      </select>
+                    </td>
+                    <td className="num">
+                      {u.id !== me.id && (
+                        <button className="btn-icon danger" onClick={() => remove(u)} title="Löschen">
+                          <Icon name="trash" size={16} />
+                        </button>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
         </div>
 
-        <form className="card form-narrow" onSubmit={add}>
-          <h2>Neuer Benutzer</h2>
+        <form className="card" onSubmit={add}>
+          <div className="card-head"><Icon name="users" /><h2>Neuer Benutzer</h2></div>
           <label>
             Benutzername
             <input value={form.username} onChange={(e) => setForm({ ...form, username: e.target.value })} required />
@@ -97,11 +109,11 @@ export default function Users() {
           <label>
             Rolle
             <select value={form.role} onChange={(e) => setForm({ ...form, role: e.target.value })}>
-              <option value="user">Nutzer (nur ein-/auslagern)</option>
-              <option value="admin">Admin (volle Verwaltung)</option>
+              <option value="user">Benutzer (nur ein-/auslagern)</option>
+              <option value="admin">Administrator (volle Verwaltung)</option>
             </select>
           </label>
-          <button className="btn primary">Anlegen</button>
+          <button className="btn primary"><Icon name="plus" size={16} />Anlegen</button>
         </form>
       </div>
     </div>