Web: Excel-artige DataTable + volle Breite; Produkte migriert

Neue wiederverwendbare DataTable: feste Filterzeile je Spalte (Freitext + Dropdown der vorhandenen Werte, ueber Spalten kombinierbar), Spalten per Drag verschieben und in der Breite ziehen, Klick-Sortierung; Reihenfolge/Breiten merkt der Browser (localStorage). Produkte-Seite darauf umgestellt. Tabellenseiten (Produkte/Kategorien/Gruppen/Einheiten/Gebinde) nutzen jetzt die volle Fensterbreite (content--wide); Kategorien-Seitenspalte etwas breiter und die Feldliste bricht um, statt ueber den Container zu laufen. Farbschema unveraendert.

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

web/src/styles.css

@@ -170,7 +170,7 @@ h2 { font-size: 0.95rem; font-weight: 650; margin: 0 0 var(--sp-3); letter-spaci
    Kartenansicht, obwohl daneben Platz frei waere. */
 /* Tabelle bekommt den ganzen restlichen Platz, der Block daneben bleibt schmal
    und gedeckelt - so scrollt die (breite) Tabelle nicht seitwaerts. */
-.grid-2.wide-aside { grid-template-columns: minmax(0, 1fr) clamp(300px, 26%, 360px); align-items: start; }
+.grid-2.wide-aside { grid-template-columns: minmax(0, 1fr) clamp(320px, 24%, 420px); align-items: start; }
 @media (max-width: 1000px) {
   .grid-2.wide-aside { grid-template-columns: minmax(0, 1fr); }
 }
@@ -511,8 +511,47 @@ td select { width: auto; min-width: 0; max-width: 100%; }
   .table.table-compact td { display: revert; }
   .table.table-compact thead { display: table-header-group; }
   .table.table-compact td::before { content: none; }
+  /* Die Excel-Tabelle bleibt auch schmal eine (quer scrollbare) Tabelle. */
+  .table.datatable, .table.datatable tbody, .table.datatable tr,
+  .table.datatable td { display: revert; }
+  .table.datatable thead { display: table-header-group; }
+  .table.datatable td::before { content: none; }
 }
 
+/* ---------- DataTable (Excel-artige Tabelle) ---------- */
+.dt-root { display: flex; flex-direction: column; gap: var(--sp-3); }
+.dt-toolbar { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
+.datatable { table-layout: fixed; }
+.datatable th, .datatable td { overflow: hidden; text-overflow: ellipsis; }
+.dt-th { position: relative; user-select: none; }
+.dt-th[draggable="true"] { cursor: grab; }
+.dt-th.drop { box-shadow: inset 2px 0 0 var(--accent); }
+.dt-th-label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; max-width: 100%; }
+.dt-th-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dt-th.sorted .dt-th-label { color: var(--accent); }
+.dt-sort { font-size: 0.7em; flex: 0 0 auto; }
+.dt-resize { position: absolute; top: 0; right: 0; width: 8px; height: 100%; cursor: col-resize; touch-action: none; }
+.dt-resize:hover { background: var(--accent-soft); }
+.dt-filter td { padding: 4px 6px; vertical-align: middle; }
+.dt-filter-cell { display: flex; gap: 2px; align-items: center; }
+.dt-filter-input { flex: 1 1 auto; min-width: 0; width: 100%; margin: 0; padding: 4px 6px; font-size: 0.8rem; }
+.dt-filter-btn {
+  flex: 0 0 auto; width: 22px; height: 28px; line-height: 1; border-radius: var(--radius-sm);
+  border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); cursor: pointer;
+}
+.dt-filter-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
+.dt-pop {
+  position: fixed; z-index: 210; min-width: 200px; max-width: 260px;
+  background: var(--surface); border: 1px solid var(--border-strong);
+  border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); padding: var(--sp-2);
+}
+.dt-pop-search { width: 100%; margin: 0 0 var(--sp-2); padding: 5px 8px; font-size: 0.85rem; }
+.dt-pop-actions { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-2); }
+.dt-pop-list { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; }
+.dt-pop-opt { display: flex; align-items: center; gap: 6px; padding: 3px 4px; font-size: 0.85rem; cursor: pointer; margin: 0; }
+.dt-pop-opt:hover { background: var(--surface-2); }
+.dt-pop-opt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
 /* ---------- 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; }
@@ -921,7 +960,10 @@ select.zeitraum:hover { color: var(--text); }
 /* ---- Gegenstände (Non-Food): eigene Felder, Bestand je Ort, Umlagern ---- */
 .stack { display: flex; flex-direction: column; gap: var(--sp-3); }
 .clean-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
-.clean-list li { display: flex; align-items: center; gap: var(--sp-2); padding: 6px 8px; background: var(--surface-2); border-radius: 8px; }
+.clean-list li { display: flex; align-items: center; gap: var(--sp-2); padding: 6px 8px; background: var(--surface-2); border-radius: 8px; flex-wrap: wrap; }
+/* In schmalen Seitenspalten (z.B. Kategorie-Felder) darf die Zeile nicht über
+   den Container hinauslaufen – lieber der lange Feldname umbrechen. */
+.clean-list li > .strong { min-width: 0; overflow-wrap: anywhere; }
 .check-inline { display: flex; align-items: center; gap: var(--sp-2); }
 .check-inline input { width: auto; margin: 0; }
 /* Über eine gewählte Oberkategorie automatisch enthaltene Unterkategorie. */