fix(frontend): zirkuläre CSS-Variablen endgültig behoben - kein @theme-Namespace mehr

Vorheriger Fix (--mabea-* Zwischen-Variablen) hat den Zirkel nur eine Ebene verschoben statt aufgelöst: da @theme weiterhin --color-primary selbst neu definierte (höherer Layer als global.css), zeigte --mabea-primary auf --color-primary, welches wiederum auf --mabea-primary zeigte - derselbe Zirkel, nur indirekt. Coming from CSS-Spec: eine zirkuläre var()-Kette macht die Property zur "guaranteed-invalid value", unabhängig davon über wie viele Zwischenschritte sie läuft.

Echter Fix: kein @theme-Mapping auf --color-* mehr, damit keine Namenskollision mit global.css überhaupt erst entstehen kann. Alle betroffenen Tailwind-Klassen (bg-primary, text-danger, border-l-warning, bg-surface-sunken, text-muted-foreground, ring-primary, etc.) auf Arbitrary-Value-Syntax umgestellt (z.B. bg-[var(--color-primary)]) - referenziert global.css-Variablen direkt, ohne je einen neuen Property-Namen im Theme-Layer zu belegen.

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

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

@@ -13,7 +13,7 @@ function QualifikationTileKomponente({ qualifikationsablaeufe }: Props) {
   const [alleAnzeigen, setAlleAnzeigen] = useState(false);
 
   if (qualifikationsablaeufe.length === 0) {
-    return <p className="text-sm text-muted-foreground">Keine bald ablaufenden Qualifikationen.</p>;
+    return <p className="text-sm text-[var(--color-text-muted)]">Keine bald ablaufenden Qualifikationen.</p>;
   }
 
   const sichtbare = alleAnzeigen ? qualifikationsablaeufe : qualifikationsablaeufe.slice(0, ANZAHL_OHNE_AUFKLAPPEN);
@@ -22,11 +22,11 @@ function QualifikationTileKomponente({ qualifikationsablaeufe }: Props) {
     <>
       <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">
+          <li key={q.benutzer_qualifikation_id} className="flex items-center gap-3 border-b border-[var(--color-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>
+              <span className="text-xs text-[var(--color-text-muted)]">{q.qualifikationstyp_name}</span>
             </div>
             <span className="shrink-0 tabular-nums text-sm font-semibold">{q.verbleibende_tage} Tage</span>
           </li>
@@ -34,7 +34,7 @@ function QualifikationTileKomponente({ qualifikationsablaeufe }: Props) {
       </ul>
       {qualifikationsablaeufe.length > ANZAHL_OHNE_AUFKLAPPEN && (
         <button
-          className="mt-2 text-sm font-medium text-primary underline-offset-2 hover:underline"
+          className="mt-2 text-sm font-medium text-[var(--color-primary)] underline-offset-2 hover:underline"
           onClick={() => setAlleAnzeigen(!alleAnzeigen)}
         >
           {alleAnzeigen ? "Weniger anzeigen" : `Alle anzeigen (${qualifikationsablaeufe.length})`}