Web: Skeleton-Loading (schimmernde Ladeplatzhalter)

Statt nacktem 'Lädt…'/'Wird geladen…' jetzt geformte, schimmernde
Platzhalter an den zentralen Stellen:
- Neuer Baustein components/Skeleton.jsx (Skeleton/SkeletonLines/CardSkeleton),
  Sweep-Animation, Farben aus CSS-Tokens (Dark-Mode automatisch), respektiert
  prefers-reduced-motion.
- DataTable: bei Erstladung Platzhalterzeilen in Spaltenform (deckt alle
  8 Tabellenseiten). Nachladen mit vorhandenen Zeilen laesst Daten stehen.
- Dashboard-Karten: Zustand-Wrapper + Inline-Diagramm-Lader zeigen
  KPI-/Listen-/Diagramm-Skelette passend zur Kartenform.

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

web/src/styles.css

@@ -892,8 +892,35 @@ select.zeitraum:hover { color: var(--text); }
 /* Wer Bewegung reduziert haben moechte, bekommt sie eingeblendet ohne Fahrt. */
 @media (prefers-reduced-motion: reduce) {
   .toast { animation: none; }
+  .skeleton { animation: none; }
 }
 
+/* ---------- Skeleton (schimmernde Ladeplatzhalter) ---------- */
+/* Farben aus Tokens -> passt sich Hell/Dunkel von allein an. Ueber den grauen
+   Grundton wandert ein hellerer Streifen (Sweep) von rechts nach links. */
+.skeleton {
+  display: block;
+  background: linear-gradient(90deg,
+    var(--surface-2) 25%, var(--border) 37%, var(--surface-2) 63%);
+  background-size: 400% 100%;
+  animation: skeleton-glanz 1.4s ease infinite;
+  border-radius: var(--radius-sm);
+}
+@keyframes skeleton-glanz {
+  from { background-position: 100% 0; }
+  to { background-position: 0 0; }
+}
+.skel-stack { display: flex; flex-direction: column; gap: var(--sp-3); }
+.skel-row {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: var(--sp-3);
+}
+.skel-row .skeleton { flex: none; }
+/* Diagramm-Platzhalter fuellt den Kartenkoerper. */
+.skel-chart { flex: 1; min-height: 120px; height: auto; }
+/* Tabellen-Platzhalterzeilen: kein Hover-Hintergrund. */
+.table tbody tr.skel-tr:hover { background: transparent; }
+
 /* ---------- Login ---------- */
 .login-wrap { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-4); }
 .login-card { width: 100%; max-width: 360px; }