fix(frontend): kritischer Bug - zirkuläre CSS-Variablen brachen Farben app-weit

@theme-Mapping in tailwind.css hatte Einträge wie "--color-primary: var(--color-primary)" - gleicher Name wie in global.css, also Selbstreferenz auf dieselbe Custom Property. Laut CSS-Spec wird eine zirkuläre var()-Referenz zur "guaranteed-invalid value" - die Property bricht dadurch komplett weg, nicht nur für neue Tailwind-Utilities, sondern für JEDE Regel im ganzen Projekt, die dieselbe Property liest (z.B. .btn-primary in global.css, .badge-danger, etc.). Betraf: primary, primary-hover, primary-soft, danger, danger-bg, warning, warning-bg, success, success-bg, surface, surface-sunken, border, border-strong - praktisch die gesamte Farbpalette der App, nicht auf Dashboard beschränkt. Sichtbar u.a. als unsichtbarer weißer Text auf weißem "Trotzdem übernehmen"-Button (Kontrolle-Seite bei gesperrtem Objekt). Fix: Zwischen-Variablen mit eigenem Namen (--mabea-*) in tailwind.css, keine Namenskollision mehr.

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

DEVLOG.md

@@ -6672,3 +6672,29 @@ Keine Commits in dieser Session.
 - frontend/src/pages/dashboard/TileFrame.tsx     | 13 ++++++++++---
 
 ---
+## 2026-09-07 14:13 – 14:15 (2m)
+**Beschreibung:** Claude Code Session
+**Projekt:** asb-material
+
+### Commits
+- e3616c1 fix(auth): Startseite/AdminRoute redirecten bei Reload fälschlich auf Objekte
+
+### Geänderte Dateien
+- DEVLOG.md                         | 14 ++++++++++++++
+- frontend/src/App.tsx              | 13 +++++++++++--
+- frontend/src/auth/AuthContext.tsx | 15 +++++++++++++--
+
+---
+## 2026-09-07 14:18 – 14:19 (0m)
+**Beschreibung:** Claude Code Session
+**Projekt:** asb-material
+
+### Commits
+Keine Commits in dieser Session.
+
+### Geänderte Dateien
+- DEVLOG.md                         | 14 ++++++++++++++
+- frontend/src/App.tsx              | 13 +++++++++++--
+- frontend/src/auth/AuthContext.tsx | 15 +++++++++++++--
+
+---

frontend/src/styles/tailwind.css

@@ -10,21 +10,50 @@
 @import "tailwindcss/theme.css" layer(theme);
 @import "tailwindcss/utilities.css" layer(utilities);
 
-@theme {
-  --color-background: var(--color-bg);
-  --color-surface: var(--color-surface);
-  --color-surface-sunken: var(--color-surface-sunken);
-  --color-border: var(--color-border);
-  --color-border-strong: var(--color-border-strong);
-  --color-foreground: var(--color-text);
-  --color-muted-foreground: var(--color-text-muted);
-  --color-primary: var(--color-primary);
-  --color-primary-hover: var(--color-primary-hover);
-  --color-primary-soft: var(--color-primary-soft);
-  --color-danger: var(--color-danger);
-  --color-danger-bg: var(--color-danger-bg);
-  --color-warning: var(--color-warning);
-  --color-warning-bg: var(--color-warning-bg);
-  --color-success: var(--color-success);
-  --color-success-bg: var(--color-success-bg);
+/* 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);
 }