Tabellen entzerrt, EAN-Codes mit Marke und Artikelname, Codes-Block nach unten

EAN-Codes:
- Das Kennzeichen "Artikel" ist weg; stattdessen stehen Marke und Artikelname
  zusammen ("Zweifel - Moutarde Original Chips"). Die Marke allein reichte nicht,
  um einen Code wiederzuerkennen. Hinweistext entsprechend angepasst.

Produktseite:
- "Weitere EAN-Codes" steht jetzt unterhalb von Formular und Chargen statt als
  dritte Spalte dazwischen. Die Codes braucht man selten und sie schoben die
  beiden wichtigen Bloecke auseinander.

Tabellen:
- "overflow-wrap: anywhere" galt fuer ALLE Zellen und zerriss Woerter mitten
  drin ("PROD UKTE", "555 Gram m"). Jetzt nur noch gezielt per Klasse.
- Kopfzeilen und Zahl-plus-Einheit brechen nicht mehr um.
- Eingaben in Tabellen sind kompakter (kleinere Polsterung, Zahlenfelder 8ch),
  Auswahlfelder richten sich nach ihrem Text statt 132px Mindestbreite -
  dadurch sind die Zeilen deutlich schlanker.
- Kennzeichen wie "niedrig" oder "abgelaufen" sitzen ueber .cell-row in einer
  Zeile mit dem Wert und rutschen nicht mehr je nach Zeilenhoehe herum.

Geprueft: "npm run build" laeuft durch. Backend unveraendert.

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

web/src/pages/Groups.jsx

@@ -105,14 +105,16 @@ export default function Groups() {
                   return (
                     <tr key={g.id}>
                       <td data-label="Gruppe">
-                        {isAdmin ? (
-                          <input defaultValue={g.name} style={{ marginTop: 0, minWidth: 130 }}
-                            onBlur={(e) => {
-                              const v = e.target.value.trim();
-                              if (v && v !== g.name) patch(g, { name: v });
-                            }} />
-                        ) : <span className="strong">{g.name}</span>}
-                        {low && <span className="badge warn" style={{ marginLeft: 6 }}>niedrig</span>}
+                        <span className="cell-row">
+                          {isAdmin ? (
+                            <input defaultValue={g.name} style={{ marginTop: 0, minWidth: 120 }}
+                              onBlur={(e) => {
+                                const v = e.target.value.trim();
+                                if (v && v !== g.name) patch(g, { name: v });
+                              }} />
+                          ) : <span className="strong">{g.name}</span>}
+                          {low && <span className="badge warn">niedrig</span>}
+                        </span>
                       </td>
                       <td data-label="Produkte" className="num muted">{g.product_count}</td>
                       <td data-label="Bestand" className="num">{fmt(g.stock)} {g.min_stock_unit_name || ""}</td>
@@ -173,10 +175,10 @@ export default function Groups() {
                 barcodes={selected.barcodes || []}
                 productBarcodes={selected.product_barcodes || []}
                 disabled={!isAdmin}
-                hint={"Codes der zugeordneten Artikel stehen automatisch hier, gekennzeichnet mit " +
-                      "„Artikel“ und der Marke; entfernen lassen sie sich nur, indem der Artikel " +
-                      "die Gruppe wechselt. Zusätzlich sind Codes möglich, die noch zu keinem " +
-                      "Artikel gehören – für die gibt es eine Notiz, weil ihnen die Marke fehlt. " +
+                hint={"Codes der zugeordneten Artikel stehen automatisch hier, mit Marke und " +
+                      "Artikelnamen; entfernen lassen sie sich nur, indem der Artikel die Gruppe " +
+                      "wechselt. Zusätzlich sind Codes möglich, die noch zu keinem Artikel " +
+                      "gehören – für die gibt es eine Notiz, weil ihnen der Artikelname fehlt. " +
                       "Wird so ein Code beim Einlagern gescannt, landet der neu angelegte Artikel " +
                       "automatisch hier."}
                 onAdd={async (body) => {