Tabellen werden bei wenig Platz zu Karten statt seitwaerts zu scrollen

Waagerechtes Scrollen in einem Block war die falsche Antwort auf zu wenig
Platz - man sieht nicht, dass es weitergeht, und auf dem Trackpad ist es
muehsam. Das Scrollen ist ersatzlos weg.

Stattdessen stellt sich jede Tabelle unter 700px verfuegbarer Breite auf
Karten um: eine Karte je Zeile, jede Angabe mit ihrer Beschriftung davor.
Die Beschriftung kommt aus data-label an der Zelle, die Kopfzeile wird
ausgeblendet. Zellen ohne Beschriftung (Vorschaubild, Aktionsknoepfe) bleiben
ohne eigene Zeile.

Ausgeloest wird das per Container-Abfrage, nicht per Bildschirmbreite. Damit
richtet sich die Darstellung nach dem Platz, den die Tabelle wirklich hat -
sie stellt sich also auch um, wenn das Fenster nur die halbe Bildschirmbreite
einnimmt oder ein Block danebensteht.

Dazu die Aufteilung neben dem Block: Die Tabelle hat mehr Spalten als der
Block und bekommt jetzt den groesseren Anteil (1,5 zu 1, Block mindestens
340px). Vorher waren beide gleich breit, wodurch die Tabelle unnoetig frueh in
die Kartenansicht gerutscht waere, obwohl daneben Platz frei war.

Durchgerechnet: Bei 1920 voller Breite bleibt es eine Tabelle (802px) mit
komfortablem Block daneben (534px). Bei halber Bildschirmbreite stapelt sich
die Seite und die Tabelle wird zur Karte. In keinem Fall wird etwas
abgeschnitten und nirgends muss seitwaerts gescrollt werden.

Lange Zeichenketten in Zellen brechen jetzt um (overflow-wrap), da kein
Scrollen mehr auffaengt, was hinauslaeuft.

Dabei aufgefallen: In der Produkttabelle stand nach dem Ergaenzen der
Kategorie-Spalte noch colSpan={7} statt 8 - die Zeile "Keine Produkte
gefunden" ueberspannte die Tabelle nicht mehr ganz. Alle colSpan-Angaben sind
jetzt gegen die Spaltenzahl gegengeprueft.

Getestet: Web-Build laeuft durch, Spaltenzahl und colSpan stimmen in allen
fuenf betroffenen Tabellen ueberein, die Umbruchpunkte sind durchgerechnet.
Die Darstellung im Browser habe ich nicht selbst angesehen.

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

web/src/styles.css

@@ -159,15 +159,16 @@ h2 { font-size: 0.95rem; font-weight: 650; margin: 0 0 var(--sp-3); letter-spaci
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
   gap: var(--sp-4);
 }
-/* Ohne min-width:0 schrumpfen Grid-Kinder nie unter ihre Inhaltsbreite. Genau
-   daran scheiterte das overflow-x der Tabelle: Sie wurde abgeschnitten,
-   statt zu scrollen. */
+/* Ohne min-width:0 schrumpfen Grid-Kinder nie unter ihre Inhaltsbreite -
+   dadurch lief die Tabelle aus ihrer Karte heraus und wurde abgeschnitten. */
 .grid-2 > * { min-width: 0; }
 .form-narrow { max-width: 600px; }
-/* Seiten mit einem inhaltsreichen Block daneben (EAN-Codes) brauchen mehr
-   Mindestbreite und stapeln deshalb frueher. */
-.grid-2.wide-aside {
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
+/* Tabelle plus Block daneben: Die Tabelle hat mehr Spalten und bekommt
+   deshalb den groesseren Anteil - sonst rutscht sie unnoetig frueh in die
+   Kartenansicht, obwohl daneben Platz frei waere. */
+.grid-2.wide-aside { grid-template-columns: minmax(0, 1.5fr) minmax(340px, 1fr); }
+@media (max-width: 1000px) {
+  .grid-2.wide-aside { grid-template-columns: minmax(0, 1fr); }
 }
 
 /* ---------- Forms ---------- */
@@ -235,11 +236,15 @@ td select { width: auto; min-width: 132px; max-width: 100%; }
 .link-btn:hover { text-decoration: underline; }
 
 /* ---------- Tables ---------- */
-.table-wrap { overflow-x: auto; max-width: 100%; }
-/* min-width: Lieber waagerecht scrollen als Spalten so weit quetschen, dass
-   Text abgeschnitten wird. */
-.table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.875rem; }
-.table th, .table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); }
+/* container-type: Die Tabelle richtet sich nach dem Platz, den sie wirklich
+   hat - nicht nach der Bildschirmbreite. So stellt sie sich auch um, wenn das
+   Fenster nur die halbe Bildschirmbreite einnimmt oder ein Block danebensteht. */
+.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;
+}
 .table thead th {
   color: var(--muted); font-weight: 600; font-size: 0.72rem;
   text-transform: uppercase; letter-spacing: 0.04em;
@@ -324,7 +329,44 @@ td select { width: auto; min-width: 132px; max-width: 100%; }
 .precision-pick { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-weight: 400; }
 .precision-pick select { margin: 0; width: auto; padding-top: 3px; padding-bottom: 3px; font-size: 0.8rem; }
  /* Hinweis beim Einlagern: welche Kategorie automatisch zugeordnet wird */
-   /* ---------- EAN-Code-Zeile ---------- */
+    /* Wird es eng, ist eine Tabelle das falsche Mittel: Spalten quetschen sich,
+   Text wird abgeschnitten, und waagerechtes Scrollen in einem Block ist
+   unbrauchbar. Stattdessen wird jede Zeile zu einer Karte, in der jede Angabe
+   ihre Beschriftung aus data-label bekommt. */
+@container (max-width: 700px) {
+  .table thead { display: none; }
+  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
+  .table tr {
+    border: 1px solid var(--border); border-radius: var(--radius-sm);
+    padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3);
+    background: var(--surface);
+  }
+  .table td {
+    border: none; padding: 5px 0;
+    display: flex; align-items: center; justify-content: space-between;
+    gap: var(--sp-3); text-align: left;
+  }
+  .table td::before {
+    content: attr(data-label);
+    flex: 0 0 auto;
+    color: var(--muted); font-size: 0.7rem; font-weight: 600;
+    text-transform: uppercase; letter-spacing: 0.05em;
+  }
+  /* Zellen ohne Beschriftung (Bild, Aktionen) brauchen keine Zeile fuer sich. */
+  .table td:not([data-label])::before { content: none; }
+  .table td:not([data-label]) { justify-content: flex-end; }
+  .table td.num { text-align: left; }
+  .table td input, .table td select { width: auto; max-width: 60%; margin-top: 0; }
+  .table .empty { text-align: center; }
+  /* Reine Nachschlagelisten (Begriff -> Erklaerung) bleiben zweispaltig,
+     dort waere eine Karte je Zeile nur Laerm. */
+  .table.table-compact, .table.table-compact tbody, .table.table-compact tr,
+  .table.table-compact td { display: revert; }
+  .table.table-compact thead { display: table-header-group; }
+  .table.table-compact td::before { content: none; }
+}
+
+/* ---------- EAN-Code-Zeile ---------- */
 .code-row { display: flex; align-items: center; gap: var(--sp-2); flex: 1; min-width: 0; flex-wrap: wrap; }
 .code-row code { flex: 0 0 auto; }
 /* Ein langer Artikelname hat vorher umgebrochen und das Notizfeld auf null