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/styles/tailwind.css

@@ -10,50 +10,14 @@
 @import "tailwindcss/theme.css" layer(theme);
 @import "tailwindcss/utilities.css" layer(utilities);
 
-/* Zwischen-Variablen mit eigenem Namen: @theme unten braucht dieselben Namen
-   wie Tailwinds Farb-Namespace (--color-primary etc.), das sind aber EXAKT
-   dieselben Namen wie in global.css. "--color-primary: var(--color-primary)"
-   ist eine zirkuläre Referenz auf sich selbst (gleiche Custom Property,
-   gleiches Element) - laut CSS-Spec wird das zur "guaranteed-invalid value",
-   die Property bricht dadurch überall weg, nicht nur für Tailwind-Utilities,
-   sondern auch für jede alte global.css-Regel wie .btn-primary, die dieselbe
-   Property liest. Über diesen Umweg mit eigenem Namen keine Kollision mehr. */
-@layer global-css {
-  :root {
-    --mabea-bg: var(--color-bg);
-    --mabea-surface: var(--color-surface);
-    --mabea-surface-sunken: var(--color-surface-sunken);
-    --mabea-border: var(--color-border);
-    --mabea-border-strong: var(--color-border-strong);
-    --mabea-text: var(--color-text);
-    --mabea-text-muted: var(--color-text-muted);
-    --mabea-primary: var(--color-primary);
-    --mabea-primary-hover: var(--color-primary-hover);
-    --mabea-primary-soft: var(--color-primary-soft);
-    --mabea-danger: var(--color-danger);
-    --mabea-danger-bg: var(--color-danger-bg);
-    --mabea-warning: var(--color-warning);
-    --mabea-warning-bg: var(--color-warning-bg);
-    --mabea-success: var(--color-success);
-    --mabea-success-bg: var(--color-success-bg);
-  }
-}
-
-@theme {
-  --color-background: var(--mabea-bg);
-  --color-surface: var(--mabea-surface);
-  --color-surface-sunken: var(--mabea-surface-sunken);
-  --color-border: var(--mabea-border);
-  --color-border-strong: var(--mabea-border-strong);
-  --color-foreground: var(--mabea-text);
-  --color-muted-foreground: var(--mabea-text-muted);
-  --color-primary: var(--mabea-primary);
-  --color-primary-hover: var(--mabea-primary-hover);
-  --color-primary-soft: var(--mabea-primary-soft);
-  --color-danger: var(--mabea-danger);
-  --color-danger-bg: var(--mabea-danger-bg);
-  --color-warning: var(--mabea-warning);
-  --color-warning-bg: var(--mabea-warning-bg);
-  --color-success: var(--mabea-success);
-  --color-success-bg: var(--mabea-success-bg);
-}
+/* KEIN @theme-Mapping auf --color-primary/--color-danger/etc.! Das wurde
+   zweimal versucht (auch über Zwischen-Variablen) und ist beide Male an
+   zirkulären CSS-Custom-Property-Referenzen gescheitert: sobald Tailwinds
+   Theme-Namespace denselben Property-Namen wie global.css belegt, gewinnt der
+   höher priorisierte Theme-Layer die Kaskade für GENAU diesen Namen - jede
+   var()-Kette, die (auch indirekt) wieder bei diesem Namen landet, wird zur
+   "guaranteed-invalid value" und bricht app-weit, nicht nur für Tailwind-
+   Utilities. Statt eigener Theme-Tokens werden bestehende global.css-Variablen
+   deshalb überall direkt per Tailwind-Arbitrary-Value-Syntax genutzt, z. B.
+   `bg-[var(--color-primary)]` statt `bg-primary` - keine Namenskollision mehr
+   möglich, da kein neuer Property-Name im Theme-Layer definiert wird. */