Tabellen bleiben Tabellen; Karten erst auf schmalen Bildschirmen

Uebersicht, Einheiten und Kategorien zeigten am Rechner die Karten-Ansicht
(Beschriftung links, Wert daneben), weil die Umschaltgrenze bei 700px lag und
neben diesen Bloecken noch etwas steht. Drei bis vier Spalten passen dort aber
locker nebeneinander.

- Grenze auf 480px gesenkt: Karten praktisch nur noch am Handy hochkant.
- .table-wrap faengt Zwischengroessen mit waagerechtem Scrollen ab, statt
  Inhalte abzuschneiden.
- Tooltip-Beschriftung ohne Fragezeichen-Cursor.

Geprueft: "npm run build" laeuft durch.

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

web/src/styles.css

@@ -241,7 +241,7 @@ td select { width: auto; min-width: 0; max-width: 100%; }
 /* 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-wrap { max-width: 100%; container-type: inline-size; overflow-x: auto; }
 .table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
 .table th, .table td {
   text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border);
@@ -268,7 +268,7 @@ td select { width: auto; min-width: 0; max-width: 100%; }
 .cell-row { display: flex; align-items: center; gap: 6px; }
 /* Beschriftung mit Erklaerung im Tooltip: die gepunktete Linie zeigt an, dass
    dort etwas steht - so bleibt das Formular kurz, ohne Wissen zu verstecken. */
-.tip { border-bottom: 1px dotted var(--border-strong); cursor: help; }
+.tip { border-bottom: 1px dotted var(--border-strong); }
 /* In Zahlenspalten sitzt der Inhalt rechts, passend zur Ausrichtung der Spalte. */
 .table td.num .cell-row { justify-content: flex-end; }
 .table tbody tr:last-child td { border-bottom: none; }
@@ -350,11 +350,12 @@ td select { width: auto; min-width: 0; 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 */
-    /* Wird es eng, ist eine Tabelle das falsche Mittel: Spalten quetschen sich,
+/* Karten statt Tabelle erst, wenn es wirklich eng wird (Handy hochkant).
-   Text wird abgeschnitten, und waagerechtes Scrollen in einem Block ist
+   Vorher lag die Grenze bei 700px - dadurch zeigten Uebersicht, Einheiten und
-   unbrauchbar. Stattdessen wird jede Zeile zu einer Karte, in der jede Angabe
+   Kategorien schon am Rechner Karten, obwohl drei bis vier Spalten dort locker
-   ihre Beschriftung aus data-label bekommt. */
+   nebeneinander passen. Dazwischen faengt waagerechtes Scrollen im Block ab,
-@container (max-width: 700px) {
+   damit nichts abgeschnitten wird. */
+@container (max-width: 480px) {
   .table thead { display: none; }
   .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
   .table tr {