Gebinde-Bezeichnung je Produkt + Spalte "Einheiten (ist / soll)"

- Neues Feld products.package_label: pro Artikel einstellbar, wie das Gebinde
  heisst (Packung, Glas, Tuete, Flasche, Dose, Tube, ...) - Eingabe mit
  Vorschlagsliste, frei ueberschreibbar. Migration per ADD COLUMN IF NOT EXISTS.
- Produkttabelle: Spalte "Packungen" heisst jetzt "Einheiten (ist / soll)" und
  zeigt Bestand und Mindestbestand als "11 / 12 Glas"; die separate Spalte
  "Mindest" entfaellt. Das "niedrig"-Badge sitzt jetzt dort.
- Die Bezeichnung wird ueberall verwendet (Chargenanzeige, Einheiten-Umschalter
  beim Bearbeiten, Mindestbestand-Auswahl, Umrechnungshinweis).
- Speichern/Abbrechen im Chargen-Editor sind jetzt gleich breit (.btn-pair).

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

web/src/pages/ProductForm.jsx

@@ -8,9 +8,12 @@ import { daysUntil, expiryRowClass, fmt, isExpired, unitShort } from "../units";
 
 const EMPTY = {
   barcode: "", name: "", brand: "", image_url: "",
-  unit_id: "", package_size: "", min_stock: "", group_id: "",
+  unit_id: "", package_size: "", package_label: "", min_stock: "", group_id: "",
 };
 
+// Vorschläge für die Gebinde-Bezeichnung (frei überschreibbar).
+const PACKAGE_LABELS = ["Packung", "Glas", "Tüte", "Flasche", "Dose", "Tube", "Becher", "Beutel", "Karton"];
+
 // Kanonische Einheit je Basiseinheit (für OFF-Vorschläge und Altbestand).
 const CANONICAL_NAME = { piece: "Stück", gram: "Gramm", milliliter: "Milliliter" };
 
@@ -135,7 +138,7 @@ export default function ProductForm() {
           setForm({
             barcode: p.barcode || "", name: p.name, brand: p.brand || "",
             image_url: p.image_url || "", unit_id: uid,
-            package_size: p.package_size ?? "",
+            package_size: p.package_size ?? "", package_label: p.package_label || "",
             min_stock: p.min_stock != null ? p.min_stock / f : "",
             group_id: p.group_id ?? "",
           });
@@ -168,6 +171,7 @@ export default function ProductForm() {
       image_url: form.image_url || null,
       unit_id: form.unit_id === "" ? null : Number(form.unit_id),
       package_size: form.package_size === "" ? null : Number(form.package_size),
+      package_label: form.package_label.trim() || null,
       min_stock: minBase,
       min_stock_unit_id: sel === "package" || sel === "" ? null : Number(sel),
       min_stock_in_packages: sel === "package",
@@ -271,6 +275,18 @@ export default function ProductForm() {
                 onChange={(e) => set("package_size", e.target.value)} disabled={readOnly} placeholder="z.B. 500" />
             </label>
           </div>
+          <div className="row">
+            <label className="grow">
+              Bezeichnung der Einheit
+              <input list="package-labels" value={form.package_label}
+                onChange={(e) => set("package_label", e.target.value)} disabled={readOnly}
+                placeholder="Packung" />
+              <datalist id="package-labels">
+                {PACKAGE_LABELS.map((l) => <option key={l} value={l} />)}
+              </datalist>
+            </label>
+            <div className="grow" />
+          </div>
           <div className="row">
             <label className="grow">
               Mindestbestand
@@ -284,7 +300,7 @@ export default function ProductForm() {
                     .map((u) => <option key={u.id} value={u.id}>{u.name}</option>)}
                   {form.package_size && (
                     <option value="package">
-                      Packung(en) à {fmt(form.package_size)} {baseShort}
+                      {form.package_label.trim() || "Packung"} à {fmt(form.package_size)} {baseShort}
                     </option>
                   )}
                 </select>
@@ -342,11 +358,12 @@ function LotsCard({ product, lots, baseShort, warnDays, isAdmin, imageUrl, onCha
   const unitFactor = product?.unit_factor || 1;
   const unitName = product?.unit_name || baseShort;
   const pkgSize = product?.package_size || 0;
+  const pkgLabel = product?.package_label || "Packung";
 
   // Leitangabe: Packungen, sobald eine Packungsgröße hinterlegt ist –
   // sonst die Produkteinheit. Darunter steht die jeweils andere Angabe klein.
   const primaryFactor = pkgSize > 0 ? pkgSize : unitFactor;
-  const primaryLabel = pkgSize > 0 ? "Pkg" : unitName;
+  const primaryLabel = pkgSize > 0 ? pkgLabel : unitName;
 
   function secondary(qty) {
     if (pkgSize > 0) return `${fmt(qty / unitFactor)} ${unitName}`;
@@ -434,7 +451,7 @@ function LotsCard({ product, lots, baseShort, warnDays, isAdmin, imageUrl, onCha
                         {pkgSize > 0 ? (
                           <select value={editUnit} onChange={(e) => changeEditUnit(e.target.value)}
                             style={{ marginTop: 0 }}>
-                            <option value="package">Packung(en)</option>
+                            <option value="package">{pkgLabel}</option>
                             <option value="unit">{unitName}</option>
                           </select>
                         ) : (
@@ -466,7 +483,7 @@ function LotsCard({ product, lots, baseShort, warnDays, isAdmin, imageUrl, onCha
                   <td className="muted">{new Date(l.created_at).toLocaleDateString("de-DE")}</td>
                   <td className="num">
                     {isAdmin && (editing ? (
-                      <div className="field-inline" style={{ justifyContent: "flex-end" }}>
+                      <div className="btn-pair">
                         <button className="btn sm primary" onClick={() => saveEdit(l)}>Speichern</button>
                         <button className="btn sm" onClick={() => setEditId(null)}>Abbrechen</button>
                       </div>
@@ -489,7 +506,7 @@ function LotsCard({ product, lots, baseShort, warnDays, isAdmin, imageUrl, onCha
         </table>
       </div>
       {pkgSize > 0 && (
-        <p className="muted small">1 Packung = {fmt(pkgSize)} {baseShort}</p>
+        <p className="muted small">1 {pkgLabel} = {fmt(pkgSize)} {baseShort}</p>
       )}
     </section>
   );

web/src/pages/Products.jsx

@@ -5,6 +5,16 @@ import { useAuth } from "../auth";
 import Icon from "../components/Icon";
 import { fmt, unitShort } from "../units";
 
+// Wie viele Basiseinheiten eine "Artikeleinheit" umfasst (Gebinde oder Produkteinheit).
+function unitCount(p) {
+  return p.package_size && p.package_size > 0 ? p.package_size : (p.unit_factor || 1);
+}
+function countLabel(p) {
+  return p.package_size && p.package_size > 0
+    ? (p.package_label || "Packung")
+    : (p.unit_name || unitShort(p.base_unit));
+}
+
 export default function Products() {
   const { isAdmin } = useAuth();
   const [products, setProducts] = useState([]);
@@ -60,8 +70,7 @@ export default function Products() {
                 <th>Marke</th>
                 <th>Einheit</th>
                 <th className="num">Bestand</th>
-                <th className="num">Packungen</th>
-                <th className="num">Mindest</th>
+                <th className="num">Einheiten (ist / soll)</th>
                 <th></th>
               </tr>
             </thead>
@@ -86,28 +95,25 @@ export default function Products() {
                     <td className="muted">{p.brand || "–"}</td>
                     <td>
                       {p.unit_name || unitShort(p.base_unit)}
-                      {p.package_size ? ` · Pkg ${fmt(p.package_size)} ${unitShort(p.base_unit)}` : ""}
+                      {p.package_size
+                        ? ` · ${p.package_label || "Packung"} ${fmt(p.package_size)} ${unitShort(p.base_unit)}`
+                        : ""}
                     </td>
                     <td className="num">
                       {fmt(p.stock / (p.unit_factor || 1))} {p.unit_name || unitShort(p.base_unit)}
-                      {low && <span className="badge warn" style={{ marginLeft: 6 }}>niedrig</span>}
                     </td>
                     <td className="num">
-                      {p.package_size
-                        ? `${fmt(p.stock / p.package_size)} Pkg`
-                        : `${fmt(p.stock / (p.unit_factor || 1))} ${p.unit_name || unitShort(p.base_unit)}`}
-                    </td>
-                    <td className="num muted">
-                      {p.min_stock != null ? (
-                        <>{fmt(p.min_stock_display)} {p.min_stock_unit_label}</>
-                      ) : "–"}
+                      {fmt(p.stock / unitCount(p))}
+                      {p.min_stock != null ? ` / ${fmt(p.min_stock / unitCount(p))}` : ""}{" "}
+                      {countLabel(p)}
+                      {low && <span className="badge warn" style={{ marginLeft: 6 }}>niedrig</span>}
                     </td>
                     <td className="num"><Link to={`/products/${p.id}`}>Details</Link></td>
                   </tr>
                 );
               })}
               {products.length === 0 && (
-                <tr><td colSpan={8} className="empty">Keine Produkte gefunden.</td></tr>
+                <tr><td colSpan={7} className="empty">Keine Produkte gefunden.</td></tr>
               )}
             </tbody>
           </table>

web/src/styles.css

@@ -160,6 +160,9 @@ td .field-inline { margin-bottom: 0; flex-wrap: wrap; }
    Zahlenfelder duerfen wachsen, Einheiten-Dropdowns behalten ihre Textbreite. */
 .field-inline > input { flex: 1 1 auto; min-width: 78px; }
 .field-inline > select { flex: 0 0 auto; width: auto; min-width: 132px; }
+/* Button-Paare (z.B. Speichern/Abbrechen) gleich breit halten. */
+.btn-pair { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: flex-end; }
+.btn-pair .btn { flex: 1 1 auto; min-width: 104px; justify-content: center; }
 
 /* ---------- Buttons ---------- */
 .btn {