Karten-Darstellung der Tabellen entzerrt, Erklaerungen als Tooltip

Tabellen (Uebersicht, Einheiten, Kategorien):
Wird der Container schmal, stellen sich Tabellen auf Karten um. Dort trennte
"space-between" Beschriftung und Wert an die beiden Zeilenenden - der Wert stand
weit rechts und wirkte durch die unterschiedlichen Zeilenhoehen nicht auf einer
Linie. Jetzt zwei feste Spalten (Beschriftung, Wert direkt daneben) mit
Ausrichtung an der Schriftlinie. Zahlenspalten stehen in der Karte linksbuendig.

Artikelseite:
Die Erklaerungen unter "MHD-Angabe", "Gruppe" und "Kategorie" standen dauerhaft
im Formular und machten es lang. Sie haengen jetzt als Tooltip an der
Beschriftung; eine gepunktete Linie zeigt an, dass dort eine Erklaerung steht.
(Kategorie hatte denselben Text-Block - der Einheitlichkeit halber mit
umgestellt.)

Geprueft: "npm run build" laeuft durch.

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

web/src/pages/ProductForm.jsx

@@ -315,15 +315,14 @@ export default function ProductForm() {
               </select>
             </label>
             <label className="grow">
-              MHD-Angabe
+              <span className="tip" title="Voreinstellung beim Einlagern – z.B. Konserven tragen oft nur „09/2026“.">
+                MHD-Angabe
+              </span>
               <select value={form.date_precision} onChange={(e) => set("date_precision", e.target.value)}
                 disabled={readOnly}>
                 <option value="day">Tagesdatum</option>
                 <option value="month">nur Monat/Jahr</option>
               </select>
-              <span className="muted small">
-                Voreinstellung beim Einlagern – z.B. Konserven tragen oft nur „09/2026“.
-              </span>
             </label>
           </div>
           <div className="row">
@@ -346,20 +345,20 @@ export default function ProductForm() {
               </div>
             </label>
             <label className="grow">
-              Gruppe
+              <span className="tip" title="Zählt Bestände mehrerer Marken zusammen. Der EAN-Code dieses Artikels erscheint danach automatisch bei der Gruppe.">
+                Gruppe
+              </span>
               <select value={form.group_id} onChange={(e) => set("group_id", e.target.value)} disabled={readOnly}>
                 <option value="">– keine –</option>
                 {groups.map((g) => <option key={g.id} value={g.id}>{g.name}</option>)}
               </select>
-              <span className="muted small">
-                Zählt Bestände mehrerer Marken zusammen. Der EAN-Code dieses Artikels
-                erscheint danach automatisch bei der Gruppe.
-              </span>
             </label>
           </div>
           <div className="row">
             <label className="grow">
-              Kategorie
+              <span className="tip" title="Nur für den Überblick in der Artikelliste – ohne Einfluss auf Bestände.">
+                Kategorie
+              </span>
               <select value={form.category_id} onChange={(e) => set("category_id", e.target.value)}
                 disabled={readOnly}>
                 <option value="">– keine –</option>
@@ -367,9 +366,6 @@ export default function ProductForm() {
                   <option key={c.id} value={c.id}>{"— ".repeat(c.depth)}{c.name}</option>
                 ))}
               </select>
-              <span className="muted small">
-                Nur für den Überblick in der Artikelliste – ohne Einfluss auf Bestände.
-              </span>
             </label>
             <div className="grow" />
           </div>