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/styles.css

@@ -203,7 +203,9 @@ td .field-inline { margin-bottom: 0; flex-wrap: wrap; }
 .field-inline > input { flex: 1 1 auto; min-width: 78px; }
 .field-inline > select { flex: 0 0 auto; width: auto; min-width: 132px; }
 /* Auswahlfelder in Tabellen richten sich nach ihrem Text statt nach der Zelle. */
-td select { width: auto; min-width: 132px; max-width: 100%; }
+/* Auswahlfelder richten sich nach ihrem Text. Die fruehere Mindestbreite von
+   132px machte schmale Spalten (z.B. "Einheit") unnoetig breit. */
+td select { width: auto; min-width: 0; max-width: 100%; }
 /* 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; }
@@ -242,14 +244,28 @@ td select { width: auto; min-width: 132px; max-width: 100%; }
 .table-wrap { max-width: 100%; container-type: inline-size; }
 .table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
 .table th, .table td {
-  text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border);
-  overflow-wrap: anywhere;
+  text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border);
 }
+/* Frueher stand hier "overflow-wrap: anywhere" fuer ALLE Zellen. Das zerriss
+   Woerter mitten drin ("PROD UKTE", "555 Gram m"), sobald eine Spalte knapp
+   wurde. Umbrechen nur noch dort, wo wirklich lange Zeichenketten stehen. */
+.break-anywhere { overflow-wrap: anywhere; }
+.nowrap { white-space: nowrap; }
 .table thead th {
   color: var(--muted); font-weight: 600; font-size: 0.72rem;
   text-transform: uppercase; letter-spacing: 0.04em;
   border-bottom: 1px solid var(--border-strong);
+  white-space: nowrap;
 }
+/* Werte aus Zahl + Einheit gehoeren zusammen und duerfen nicht umbrechen. */
+.table td.num { white-space: nowrap; }
+/* Eingaben in Tabellen kompakt halten - mit voller Feldhoehe blaeht sich jede
+   Zeile auf und die Spalten werden unnoetig breit. */
+.table td input, .table td select { padding: 5px 8px; font-size: 0.85rem; }
+.table td input[type="number"] { width: 8ch; min-width: 0; }
+/* Zelle mit Eingabe plus Kennzeichen (z.B. "niedrig"): eine Zeile, damit das
+   Kennzeichen immer an derselben Stelle sitzt statt mal darunter zu rutschen. */
+.cell-row { display: flex; align-items: center; gap: 6px; }
 .table tbody tr:last-child td { border-bottom: none; }
 .table tbody tr:hover { background: var(--surface-2); }
 .num { text-align: right; font-variant-numeric: tabular-nums; }