Einheiten-Auswahl verstaendlicher: Gruppierung nach Art + Hinweis beim Mindestbestand

Die Produkt-Einheit bietet bewusst alle Einheiten an (sie legt die Art fest),
der Mindestbestand nur die passender Art. Das sah nach einem Fehler aus, war aber
gewollt - jetzt sichtbar gemacht:
- Produkt-Einheit nach Anzahl/Gewicht/Volumen gruppiert (optgroup).
- Mindestbestand mit Hinweistext auf die Art und "Packung(en) a <Groesse>".
- baseShort wird aus der gewaehlten Einheit abgeleitet (funktioniert auch bei
  neuen Produkten).

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

web/src/pages/ProductForm.jsx

@@ -14,6 +14,9 @@ const EMPTY = {
 // Kanonische Einheit je Basiseinheit (für OFF-Vorschläge und Altbestand).
 const CANONICAL_NAME = { piece: "Stück", gram: "Gramm", milliliter: "Milliliter" };
 
+const KIND_LABEL = { count: "Anzahl", weight: "Gewicht", volume: "Volumen" };
+const KIND_ORDER = ["count", "weight", "volume"];
+
 export default function ProductForm() {
   const { id } = useParams();
   const isNew = !id;
@@ -204,7 +207,10 @@ export default function ProductForm() {
   }
 
   const readOnly = !isAdmin;
-  const baseShort = product ? unitShort(product.base_unit) : "";
+  const BASE_SHORT_OF_KIND = { count: "Stk", weight: "g", volume: "ml" };
+  const baseShort = selectedUnit
+    ? BASE_SHORT_OF_KIND[selectedUnit.kind]
+    : product ? unitShort(product.base_unit) : "";
 
   return (
     <div>
@@ -250,7 +256,13 @@ export default function ProductForm() {
               Einheit
               <select value={form.unit_id} onChange={(e) => set("unit_id", e.target.value)} disabled={readOnly} required>
                 <option value="">– wählen –</option>
-                {units.map((u) => <option key={u.id} value={u.id}>{u.name}</option>)}
+                {KIND_ORDER.filter((k) => units.some((u) => u.kind === k)).map((k) => (
+                  <optgroup key={k} label={KIND_LABEL[k]}>
+                    {units.filter((u) => u.kind === k).map((u) => (
+                      <option key={u.id} value={u.id}>{u.name}</option>
+                    ))}
+                  </optgroup>
+                ))}
               </select>
             </label>
             <label className="grow">
@@ -266,13 +278,21 @@ export default function ProductForm() {
                 <input type="number" step="any" value={form.min_stock}
                   onChange={(e) => set("min_stock", e.target.value)} disabled={readOnly} placeholder="z.B. 2" />
                 <select value={minUnit || form.unit_id} onChange={(e) => changeMinUnit(e.target.value)}
-                  disabled={readOnly} style={{ maxWidth: 160, marginTop: 0 }}>
+                  disabled={readOnly} style={{ maxWidth: 190, marginTop: 0 }}>
                   {units
                     .filter((u) => !selectedUnit || u.kind === selectedUnit.kind)
                     .map((u) => <option key={u.id} value={u.id}>{u.name}</option>)}
-                  {form.package_size && <option value="package">Packung(en)</option>}
+                  {form.package_size && (
+                    <option value="package">
+                      Packung(en) à {fmt(form.package_size)} {baseShort}
+                    </option>
+                  )}
                 </select>
               </div>
+              <span className="muted small">
+                Nur Einheiten der Art „{selectedUnit ? KIND_LABEL[selectedUnit.kind] : "–"}“
+                (passend zur Produkteinheit) plus Packungen.
+              </span>
             </label>
             <label className="grow">
               Gruppe