diff --git a/web/src/components/DataTable.jsx b/web/src/components/DataTable.jsx
index 7d84b52..3803b42 100644
--- a/web/src/components/DataTable.jsx
+++ b/web/src/components/DataTable.jsx
@@ -265,34 +265,77 @@ export default function DataTable({
   }
 
   // --- Resize (Pointer) ---
+  //
+  // Gerechnet wird mit der BEWEGUNG seit dem letzten Schritt, nicht mit dem
+  // Abstand zum Startpunkt. Nur so laesst sich die letzte Spalte verbreitern:
+  // Ihr Anfasser sitzt am rechten Rand, und dort ist fuer den Zeiger Schluss -
+  // nach rechts gibt es kein Fenster mehr. Steht er in der Randzone, waechst die
+  // Spalte deshalb von selbst weiter, Schritt fuer Schritt, solange die Taste
+  // haelt. Ein Taktgeber treibt das an, denn ein stehender Zeiger meldet keine
+  // Bewegung mehr.
   const resizing = useRef(null);
+  const rollTimer = useRef(null);
+  const RAND = 36;        // Breite der Randzone
+  const SCHRITT = 14;     // Pixel je Takt in der Randzone
+
   function startResize(e, c) {
     e.preventDefault(); e.stopPropagation();
-    const startW = widthOf(c);
     // Die flexible (grow-)Spalte auf ihre aktuelle Pixelbreite einfrieren. Sonst
-    // "klaut" das Breiterziehen einer Spalte der grow-Spalte den Platz – dann
+    // "klaut" das Breiterziehen einer Spalte der grow-Spalte den Platz - dann
     // schrumpft die Nachbarspalte und alles wandert nach links. Danach verhalten
-    // sich die Spalten wie in Excel (unabhängig, notfalls scrollt die Tabelle).
+    // sich die Spalten wie in Excel (unabhaengig, notfalls scrollt die Tabelle).
     setWidths((old) => {
       const next = { ...old };
       for (const gc of growCols) if (next[gc.key] == null) next[gc.key] = Math.round(widthOf(gc));
       return next;
     });
-    resizing.current = { key: c.key, startX: e.clientX, startW };
+    resizing.current = { key: c.key, breite: widthOf(c), zeigerX: e.clientX, letzterX: e.clientX };
+    rollTimer.current = window.setInterval(anwenden, 30);
     window.addEventListener("pointermove", onResizeMove);
     window.addEventListener("pointerup", endResize);
   }
+
+  function anwenden() {
+    const r = resizing.current; if (!r) return;
+    let delta = r.zeigerX - r.letzterX;
+    r.letzterX = r.zeigerX;
+
+    const el = wrapRef.current;
+    let amRand = false;
+    if (el) {
+      const kasten = el.getBoundingClientRect();
+      if (r.zeigerX > kasten.right - RAND) { delta += SCHRITT; amRand = true; }
+      else if (r.zeigerX < kasten.left + RAND) delta -= SCHRITT;
+    }
+    if (!delta) return;
+
+    const neu = Math.max(60, r.breite + delta);
+    if (neu === r.breite) return;
+    r.breite = neu;
+    setWidths((old) => ({ ...old, [r.key]: Math.round(neu) }));
+    // Mitlaufen, damit der Anfasser unter dem Zeiger bleibt, waehrend die
+    // Tabelle nach rechts waechst.
+    if (amRand && el) requestAnimationFrame(() => { el.scrollLeft = el.scrollWidth; });
+  }
+
   function onResizeMove(e) {
     const r = resizing.current; if (!r) return;
-    const w = Math.max(60, Math.round(r.startW + (e.clientX - r.startX)));
-    setWidths((old) => ({ ...old, [r.key]: w }));
+    r.zeigerX = e.clientX;
+    anwenden();
   }
+
   function endResize() {
     resizing.current = null;
+    if (rollTimer.current) { window.clearInterval(rollTimer.current); rollTimer.current = null; }
     window.removeEventListener("pointermove", onResizeMove);
     window.removeEventListener("pointerup", endResize);
   }
 
+  // Beim Verlassen der Seite mitten im Ziehen bliebe sonst ein Taktgeber laufen.
+  useEffect(() => () => {
+    if (rollTimer.current) window.clearInterval(rollTimer.current);
+  }, []);
+
   // --- Reorder (HTML5 Drag) ---
   const dragKey = useRef(null);
   const [dropKey, setDropKey] = useState(null);
diff --git a/web/src/dashboard/cards.jsx b/web/src/dashboard/cards.jsx
index 7dff2fc..4fea064 100644
--- a/web/src/dashboard/cards.jsx
+++ b/web/src/dashboard/cards.jsx
@@ -8,7 +8,7 @@ import BewegungIcon from "../components/BewegungIcon";
 import { FristBadge, verleihRowClass } from "../components/Verleih";
 import { useSettings } from "../settings";
 import {
-  articlePrimary, articleSecondary, fmt, relativeExpiry,
+  articlePrimary, articleSecondary, bestandPrimary, bestandSecondary, fmt, relativeExpiry,
 } from "../units";
 import Bars from "./charts/Bars";
 import Donut from "./charts/Donut";
@@ -192,9 +192,12 @@ function KarteArtikel({ props: karteProps }) {
         <div className="card-stack">
           <div className="kpi">
             <div className="kpi-label"><Icon name="package" size={14} />{daten.name}</div>
-            <div className="kpi-value">{articlePrimary(daten)}</div>
+            {/* Artikel, nicht Charge: Der Bestand heisst hier ``stock``.
+                ``articlePrimary`` sucht ``quantity`` und lieferte deshalb
+                "NaN Glaeser". */}
+            <div className="kpi-value">{bestandPrimary(daten)}</div>
           </div>
-          <div className="muted small">{articleSecondary(daten)}</div>
+          <div className="muted small">{bestandSecondary(daten)}</div>
         </div>
       )}
     </Zustand>
diff --git a/web/src/pages/Charges.jsx b/web/src/pages/Charges.jsx
index 5d0725e..eeedfcd 100644
--- a/web/src/pages/Charges.jsx
+++ b/web/src/pages/Charges.jsx
@@ -254,9 +254,14 @@ export default function Charges() {
     { key: "created", header: "Eingelagert", width: 130,
       sortValue: (l) => new Date(l.created_at).getTime(),
       render: (l) => <span className="muted">{new Date(l.created_at).toLocaleDateString("de-DE")}</span> },
-    { key: "verbrauch", header: "Verbrauch", label: "Verbrauch", width: 190, align: "num",
+    // 240 statt 190: Zwei beschriftete Knoepfe brauchen den Platz, und die
+    // Tabelle schneidet ab statt umzubrechen (.datatable ist table-layout:fixed
+    // mit overflow:hidden). Bei rechtsbuendigen Zellen faellt dabei der ANFANG
+    // weg - aus "Verbrauchen" wurde sichtbar "rbrauchen". Das Umbrechen unten
+    // faengt ab, wenn jemand die Spalte von Hand schmaler zieht.
+    { key: "verbrauch", header: "Verbrauch", label: "Verbrauch", width: 240, align: "num",
       render: (l) => (
-        <span className="cell-row">
+        <span className="cell-row" style={{ flexWrap: "wrap", justifyContent: "flex-end" }}>
           <button type="button" className="btn sm ghost" title="Teilmenge verbrauchen"
             onClick={() => setVerbrauchen(l)}>
             <Icon name="checkout" size={15} />Verbrauchen
diff --git a/web/src/settings.jsx b/web/src/settings.jsx
index a9d2f47..fc8bb4b 100644
--- a/web/src/settings.jsx
+++ b/web/src/settings.jsx
@@ -17,6 +17,8 @@ const SettingsContext = createContext({
 export function SettingsProvider({ children }) {
   const { user } = useAuth();
   const [dateFormat, setDateFormat] = useState(DEFAULT_FORMAT);
+  // Zaehler, der sich erhoeht, sobald die Mehrzahlformen da sind. Siehe unten.
+  const [gebindeStand, setGebindeStand] = useState(0);
 
   const reload = useCallback(async () => {
     try {
@@ -30,6 +32,13 @@ export function SettingsProvider({ children }) {
       // Mehrzahlformen der Gebinde. Sie landen in einer Modulvariablen, weil
       // auch Nicht-Komponenten (die Formatierer in units.js) sie brauchen.
       setGebindeFormen(await api.listPackageTypes());
+      // Die Formen liegen in einer Modulvariablen – eine Aenderung daran loest
+      // von sich aus kein Neuzeichnen aus. Wer seine Liste zeichnete, BEVOR die
+      // Antwort da war, blieb deshalb bei der Einzahl stehen: In der
+      // Chargenliste stand "3 Glas", auf der Uebersicht "3 Glaeser", je
+      // nachdem welche Abfrage zuerst zurueckkam. Dieser Zaehler haengt im
+      // Kontext und zieht alle nach, die ueber useSettings() formatieren.
+      setGebindeStand((n) => n + 1);
     } catch {
       /* Ohne Liste bleibt die Einzahl stehen – unschoen, aber nicht falsch. */
     }
@@ -41,6 +50,7 @@ export function SettingsProvider({ children }) {
 
   const value = {
     dateFormat,
+    gebindeStand,
     formatDate: (iso) => formatDate(iso, dateFormat),
     // MHD: Monatsangaben erscheinen als "09/2026", Tagesdaten im gewaehlten Format.
     formatBestBefore: (iso, precision) => formatBestBefore(iso, precision, dateFormat),
diff --git a/web/src/units.js b/web/src/units.js
index fcac66f..7820b8b 100644
--- a/web/src/units.js
+++ b/web/src/units.js
@@ -149,7 +149,12 @@ export function baseUnitToInput(baseUnit) {
 
 export function fmt(n) {
   if (n == null) return "–";
-  return Number(n).toLocaleString("de-DE", { maximumFractionDigits: 2 });
+  const zahl = Number(n);
+  // NaN entsteht, wenn irgendwo ein Feld fehlt (z.B. ein Artikel dort, wo eine
+  // Charge erwartet wird). Dem Benutzer "NaN" hinzuschreiben ist nie richtig -
+  // ein Strich sagt wenigstens die Wahrheit: hier steht keine Zahl.
+  if (!Number.isFinite(zahl)) return "–";
+  return zahl.toLocaleString("de-DE", { maximumFractionDigits: 2 });
 }
 
 // Tage bis zum MHD (negativ = überfällig, null = kein MHD).
@@ -308,6 +313,23 @@ export function articlePrimary(item) {
   return `${fmt(item.quantity / (item.unit_factor || 1))} ${item.unit_name || unitShort(item.base_unit)}`;
 }
 
+/**
+ * Bestand eines ARTIKELS als Leitangabe: "3 Gläser".
+ *
+ * Die Brücke zwischen zwei Namen für dieselbe Sache: Eine Charge nennt ihre
+ * Menge ``quantity``, ein Artikel nennt sie ``stock``. ``articlePrimary`` kennt
+ * nur ``quantity`` – wer ihm einen Artikel hinhielt, bekam "NaN Gläser", weil
+ * ``undefined / package_size`` eben NaN ist. Diese beiden Funktionen sind die
+ * Stelle, an der das übersetzt wird, statt es an jeder Aufrufstelle zu tun.
+ */
+export function bestandPrimary(product) {
+  return articlePrimary({ ...product, quantity: product?.stock || 0 });
+}
+
+export function bestandSecondary(product) {
+  return articleSecondary({ ...product, quantity: product?.stock || 0 });
+}
+
 // Untermenge in der Basiseinheit – nur wenn sie sich von der Leitangabe unterscheidet.
 export function articleSecondary(item) {
   if (item.package_size > 0 || (item.unit_factor || 1) !== 1) {