style(dashboard): Kacheln modernisiert - Karten, Einsatzbereitschaft-Balken, Termin-Listen, Skeleton

Card: 14px Radius, weicherer Schatten, Hover-Lift über box-shadow (nicht transform, würde von react-grid-layouts Inline-Positionierung überschrieben). Einsatzbereitschaft-Kachel: große Zahl "X/Y einsatzbereit", proportionaler gestapelter Statusbalken, Vierer-Zeile mit Farbpunkten+Zahl, Detail-Liste bleibt aufklappbar. Prüftermine/Ablaufdaten/Qualifikationsablauf: auf 5 Zeilen begrenzt mit "Alle anzeigen", Status-Badge links (überfällig gefüllt rot, bald fällig Outline amber, FristBadge zeigt nur noch Status), Countdown rechts tabular-nums. Neue --status-ok/warn/unknown/critical CSS-Variablen als Alias auf bestehende Farb-Tokens. Skeleton-Platzhalter statt "Lade…"-Text während des initialen Ladens. Keine API-/Datenänderungen.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01CVgbozhYmuEhiEJHffRXCV

frontend/src/pages/dashboard/tiles/QualifikationTile.tsx

@@ -1,29 +1,46 @@
-import { memo } from "react";
+import { memo, useState } from "react";
 
+import { FristBadge } from "../../../components/status/FristBadge";
 import type { Qualifikationsablauf } from "../types";
 
+const ANZAHL_OHNE_AUFKLAPPEN = 5;
+
 interface Props {
   qualifikationsablaeufe: Qualifikationsablauf[];
 }
 
 function QualifikationTileKomponente({ qualifikationsablaeufe }: Props) {
+  const [alleAnzeigen, setAlleAnzeigen] = useState(false);
+
   if (qualifikationsablaeufe.length === 0) {
-    return <p className="text-muted">Keine bald ablaufenden Qualifikationen.</p>;
+    return <p className="text-sm text-muted-foreground">Keine bald ablaufenden Qualifikationen.</p>;
   }
 
+  const sichtbare = alleAnzeigen ? qualifikationsablaeufe : qualifikationsablaeufe.slice(0, ANZAHL_OHNE_AUFKLAPPEN);
+
   return (
-    <ul className="card-list">
-      {qualifikationsablaeufe.map((q) => (
-        <li key={q.benutzer_qualifikation_id} className="row-between" style={{ padding: "0.3rem 0" }}>
-          <span>
-            {q.benutzer_name} <span className="text-muted">({q.qualifikationstyp_name})</span>
-          </span>
-          <span style={{ color: q.status === "abgelaufen" ? "var(--color-danger)" : undefined }}>
-            {q.gueltig_bis} ({q.verbleibende_tage} Tage)
-          </span>
-        </li>
-      ))}
-    </ul>
+    <>
+      <ul>
+        {sichtbare.map((q) => (
+          <li key={q.benutzer_qualifikation_id} className="flex items-center gap-3 border-b border-border py-2 last:border-0">
+            <FristBadge status={q.status} />
+            <div className="min-w-0 flex-1">
+              <span className="block truncate font-medium">{q.benutzer_name}</span>
+              <span className="text-xs text-muted-foreground">{q.qualifikationstyp_name}</span>
+            </div>
+            <span className="shrink-0 tabular-nums text-sm font-semibold">{q.verbleibende_tage} Tage</span>
+          </li>
+        ))}
+      </ul>
+      {qualifikationsablaeufe.length > ANZAHL_OHNE_AUFKLAPPEN && (
+        <button
+          className="mt-2 text-sm font-medium text-primary underline-offset-2 hover:underline"
+          onClick={() => setAlleAnzeigen(!alleAnzeigen)}
+        >
+          {alleAnzeigen ? "Weniger anzeigen" : `Alle anzeigen (${qualifikationsablaeufe.length})`}
+        </button>
+      )}
+    </>
   );
 }