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

DEVLOG.md

@@ -6698,3 +6698,63 @@ Keine Commits in dieser Session.
 - frontend/src/auth/AuthContext.tsx | 15 +++++++++++++--
 
 ---
+## 2026-09-07 14:19 – 14:23 (3m)
+**Beschreibung:** Claude Code Session
+**Projekt:** asb-material
+
+### Commits
+- adb4aee fix(frontend): kritischer Bug - zirkuläre CSS-Variablen brachen Farben app-weit
+
+### Geänderte Dateien
+- DEVLOG.md                        | 26 ++++++++++++++++++++++++++
+- frontend/src/styles/tailwind.css | 61 +++++++++++++++++++++++++++++++++++++++++++++----------------
+
+---
+## 2026-09-07 14:24 – 14:24 (0m)
+**Beschreibung:** Claude Code Session
+**Projekt:** asb-material
+
+### Commits
+Keine Commits in dieser Session.
+
+### Geänderte Dateien
+- DEVLOG.md                        | 26 ++++++++++++++++++++++++++
+- frontend/src/styles/tailwind.css | 61 +++++++++++++++++++++++++++++++++++++++++++++----------------
+
+---
+## 2026-09-07 14:25 – 14:25 (0m)
+**Beschreibung:** Claude Code Session
+**Projekt:** asb-material
+
+### Commits
+Keine Commits in dieser Session.
+
+### Geänderte Dateien
+- DEVLOG.md                        | 26 ++++++++++++++++++++++++++
+- frontend/src/styles/tailwind.css | 61 +++++++++++++++++++++++++++++++++++++++++++++----------------
+
+---
+## 2026-09-07 14:29 – 14:29 (0m)
+**Beschreibung:** Claude Code Session
+**Projekt:** asb-material
+
+### Commits
+Keine Commits in dieser Session.
+
+### Geänderte Dateien
+- DEVLOG.md                        | 26 ++++++++++++++++++++++++++
+- frontend/src/styles/tailwind.css | 61 +++++++++++++++++++++++++++++++++++++++++++++----------------
+
+---
+## 2026-09-07 14:29 – 14:30 (0m)
+**Beschreibung:** Claude Code Session
+**Projekt:** asb-material
+
+### Commits
+Keine Commits in dieser Session.
+
+### Geänderte Dateien
+- DEVLOG.md                        | 26 ++++++++++++++++++++++++++
+- frontend/src/styles/tailwind.css | 61 +++++++++++++++++++++++++++++++++++++++++++++----------------
+
+---

frontend/src/components/status/ReadinessBadge.tsx

@@ -17,10 +17,10 @@ const VARIANT: Record<Readiness, "success" | "warning" | "danger" | "neutral"> =
 };
 
 const PUNKT_FARBE: Record<Readiness, string> = {
-  ready: "bg-success",
-  limited: "bg-warning",
-  "not-ready": "bg-danger",
-  unknown: "bg-muted-foreground",
+  ready: "bg-[var(--color-success)]",
+  limited: "bg-[var(--color-warning)]",
+  "not-ready": "bg-[var(--color-danger)]",
+  unknown: "bg-[var(--color-text-muted)]",
 };
 
 interface Props {

frontend/src/components/ui/badge.tsx

@@ -6,11 +6,11 @@ import { cn } from "../../lib/utils";
 const badgeVariants = cva("inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium", {
   variants: {
     variant: {
-      neutral: "bg-surface-sunken text-muted-foreground",
-      success: "bg-success-bg text-success",
-      warning: "bg-warning-bg text-warning",
-      danger: "bg-danger-bg text-danger",
-      primary: "bg-primary-soft text-primary",
+      neutral: "bg-[var(--color-surface-sunken)] text-[var(--color-text-muted)]",
+      success: "bg-[var(--color-success-bg)] text-[var(--color-success)]",
+      warning: "bg-[var(--color-warning-bg)] text-[var(--color-warning)]",
+      danger: "bg-[var(--color-danger-bg)] text-[var(--color-danger)]",
+      primary: "bg-[var(--color-primary-soft)] text-[var(--color-primary)]",
     },
   },
   defaultVariants: {

frontend/src/components/ui/button.tsx

@@ -5,14 +5,15 @@ import { forwardRef, type ButtonHTMLAttributes } from "react";
 import { cn } from "../../lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
-        default: "bg-primary text-white hover:bg-primary-hover",
-        secondary: "bg-surface-sunken text-foreground border border-border hover:bg-border/40",
-        ghost: "hover:bg-surface-sunken text-foreground",
-        danger: "bg-danger text-white hover:opacity-90",
+        default: "bg-[var(--color-primary)] text-white hover:bg-[var(--color-primary-hover)]",
+        secondary:
+          "bg-[var(--color-surface-sunken)] text-[var(--color-text)] border border-[var(--color-border)] hover:bg-[var(--color-border)]/40",
+        ghost: "hover:bg-[var(--color-surface-sunken)] text-[var(--color-text)]",
+        danger: "bg-[var(--color-danger)] text-white hover:opacity-90",
       },
       size: {
         default: "h-9 px-4 py-2",

frontend/src/components/ui/card.tsx

@@ -6,7 +6,7 @@ export const Card = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>((
   <div
     ref={ref}
     className={cn(
-      "rounded-[14px] border border-border bg-surface text-foreground",
+      "rounded-[14px] border border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-text)]",
       "shadow-[0_1px_3px_rgba(0,0,0,.08),0_4px_12px_rgba(0,0,0,.05)]",
       // hover-lift über box-shadow statt transform: TileFrame wird von
       // react-grid-layout per inline transform positioniert, ein Tailwind-
@@ -28,7 +28,10 @@ export const CardTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadi
   ({ className, ...props }, ref) => (
     <h3
       ref={ref}
-      className={cn("min-w-0 truncate text-sm font-semibold tracking-wide text-muted-foreground uppercase", className)}
+      className={cn(
+        "min-w-0 truncate text-sm font-semibold tracking-wide text-[var(--color-text-muted)] uppercase",
+        className
+      )}
       {...props}
     />
   )

frontend/src/pages/dashboard/DashboardPage.tsx

@@ -216,7 +216,7 @@ export function DashboardPage() {
           <div>
             <h1 className="text-2xl font-bold tracking-tight">Dashboard</h1>
             {zuletztAktualisiert && (
-              <p className="text-xs text-muted-foreground">
+              <p className="text-xs text-[var(--color-text-muted)]">
                 Aktualisiert um {zuletztAktualisiert.toLocaleTimeString("de-DE")}
               </p>
             )}
@@ -252,17 +252,17 @@ export function DashboardPage() {
       {laedt && (
         <div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
           {Array.from({ length: 6 }).map((_, i) => (
-            <div key={i} className="h-40 animate-pulse rounded-[14px] border border-border bg-surface-sunken" />
+            <div key={i} className="h-40 animate-pulse rounded-[14px] border border-[var(--color-border)] bg-[var(--color-surface-sunken)]" />
           ))}
         </div>
       )}
       {bearbeitenModus && layout.ausgeblendet.length > 0 && (
-        <div className="mt-3 rounded-md border border-border bg-surface-sunken px-4 py-3 text-sm">
+        <div className="mt-3 rounded-md border border-[var(--color-border)] bg-[var(--color-surface-sunken)] px-4 py-3 text-sm">
           Ausgeblendet:{" "}
           {layout.ausgeblendet.map((id, i) => (
             <span key={id}>
               {i > 0 && ", "}
-              <button className="text-primary underline underline-offset-2" onClick={() => ausblendenUmschalten(id)}>
+              <button className="text-[var(--color-primary)] underline underline-offset-2" onClick={() => ausblendenUmschalten(id)}>
                 {TITEL[id]} wieder einblenden
               </button>
             </span>
@@ -270,7 +270,7 @@ export function DashboardPage() {
         </div>
       )}
       {bearbeitenModus && (
-        <p className="mt-2 text-xs text-muted-foreground">
+        <p className="mt-2 text-xs text-[var(--color-text-muted)]">
           Kachel ziehen zum Verschieben, an der unteren rechten Ecke ziehen zum Vergrößern/Verkleinern.
         </p>
       )}

frontend/src/pages/dashboard/TileFrame.tsx

@@ -7,9 +7,9 @@ import { cn } from "../../lib/utils";
 export type TileAkzent = "neutral" | "warning" | "danger";
 
 const AKZENT_KLASSE: Record<TileAkzent, string> = {
-  neutral: "border-l-border",
-  warning: "border-l-warning",
-  danger: "border-l-danger",
+  neutral: "border-l-[var(--color-border)]",
+  warning: "border-l-[var(--color-warning)]",
+  danger: "border-l-[var(--color-danger)]",
 };
 
 interface Props extends HTMLAttributes<HTMLDivElement> {

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

@@ -14,7 +14,7 @@ function AblaufdatenTileKomponente({ ablaufdaten }: Props) {
   const [alleAnzeigen, setAlleAnzeigen] = useState(false);
 
   if (ablaufdaten.length === 0) {
-    return <p className="text-sm text-muted-foreground">Keine bald ablaufenden Chargen.</p>;
+    return <p className="text-sm text-[var(--color-text-muted)]">Keine bald ablaufenden Chargen.</p>;
   }
 
   const sichtbare = alleAnzeigen ? ablaufdaten : ablaufdaten.slice(0, ANZAHL_OHNE_AUFKLAPPEN);
@@ -25,14 +25,14 @@ function AblaufdatenTileKomponente({ ablaufdaten }: Props) {
         {sichtbare.map((a) => (
           <li
             key={`${a.objekt_id}-${a.material_id}`}
-            className="flex items-center gap-3 border-b border-border py-2 last:border-0"
+            className="flex items-center gap-3 border-b border-[var(--color-border)] py-2 last:border-0"
           >
             <InventoryStatus status={a.status} />
             <div className="min-w-0 flex-1">
               <Link to={`/akte/objekt/${a.objekt_id}`} className="block truncate font-medium">
                 {a.objekt_name} – {a.material_name}
               </Link>
-              <span className="text-xs text-muted-foreground">{a.ablaufdatum}</span>
+              <span className="text-xs text-[var(--color-text-muted)]">{a.ablaufdatum}</span>
             </div>
             <span className="shrink-0 tabular-nums text-sm font-semibold">{a.verbleibende_tage} Tage</span>
           </li>
@@ -40,7 +40,7 @@ function AblaufdatenTileKomponente({ ablaufdaten }: Props) {
       </ul>
       {ablaufdaten.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 (${ablaufdaten.length})`}

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

@@ -39,10 +39,10 @@ function EinsatzbereitschaftTileKomponente({ bereitschaft }: Props) {
     <>
       <p className="leading-none">
         <span className="text-4xl font-bold tabular-nums">{bereitschaft.einsatzbereit}</span>
-        <span className="text-sm font-semibold text-muted-foreground">/{bereitschaft.gesamt} einsatzbereit</span>
+        <span className="text-sm font-semibold text-[var(--color-text-muted)]">/{bereitschaft.gesamt} einsatzbereit</span>
       </p>
 
-      <div className="mt-3 flex h-2.5 w-full overflow-hidden rounded-full bg-surface-sunken">
+      <div className="mt-3 flex h-2.5 w-full overflow-hidden rounded-full bg-[var(--color-surface-sunken)]">
         {segmente.map(
           (s) =>
             s.anzahl > 0 && (
@@ -59,14 +59,14 @@ function EinsatzbereitschaftTileKomponente({ bereitschaft }: Props) {
         {segmente.map((s) => (
           <div key={s.label} className="flex items-center gap-1.5 text-sm">
             <span className="h-2 w-2 shrink-0 rounded-full" style={{ backgroundColor: s.farbVar }} />
-            <span className="text-muted-foreground">{s.label}</span>
+            <span className="text-[var(--color-text-muted)]">{s.label}</span>
             <span className="ml-auto font-semibold tabular-nums">{s.anzahl}</span>
           </div>
         ))}
       </div>
 
       {bereitschaft.nie_kontrolliert_gesamt > bereitschaft.unbekannt && (
-        <p className="mt-3 text-xs text-muted-foreground">
+        <p className="mt-3 text-xs text-[var(--color-text-muted)]">
           Davon {bereitschaft.nie_kontrolliert_gesamt} insgesamt noch nie kontrolliert (auch bei Objekten mit weiteren
           Problemen).
         </p>
@@ -75,7 +75,7 @@ function EinsatzbereitschaftTileKomponente({ bereitschaft }: Props) {
       {bereitschaft.details.length > 0 && (
         <>
           <button
-            className="mt-3 text-sm font-medium text-primary underline-offset-2 hover:underline"
+            className="mt-3 text-sm font-medium text-[var(--color-primary)] underline-offset-2 hover:underline"
             onClick={() => setDetailsOffen(!detailsOffen)}
           >
             {detailsOffen ? "Details ausblenden" : "Details anzeigen"}
@@ -83,13 +83,13 @@ function EinsatzbereitschaftTileKomponente({ bereitschaft }: Props) {
           {detailsOffen && (
             <ul className="mt-2">
               {bereitschaft.details.map((d) => (
-                <li key={d.objekt_id} className="flex items-center justify-between gap-2 border-b border-border py-2 last:border-0">
+                <li key={d.objekt_id} className="flex items-center justify-between gap-2 border-b border-[var(--color-border)] py-2 last:border-0">
                   <Link to={`/objekte/${d.objekt_id}/kontrolle`} className="truncate font-medium">
                     {d.name} ({d.code})
                   </Link>
                   <span className="flex shrink-0 items-center gap-2">
                     <ReadinessBadge status={readinessVonGruenden(d.gruende)} />
-                    <span className="hidden text-xs text-muted-foreground sm:inline">
+                    <span className="hidden text-xs text-[var(--color-text-muted)] sm:inline">
                       {d.gruende.map((g) => GRUND_TEXT[g] ?? g).join(", ")}
                     </span>
                   </span>

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

@@ -10,7 +10,7 @@ function KennzahlenTileKomponente({ kennzahlen }: Props) {
   return (
     <div>
       <p className="text-4xl font-bold tabular-nums leading-none">{kennzahlen.anzahl_offener_fehlbestaende}</p>
-      <p className="mb-3 text-xs uppercase tracking-wide text-muted-foreground">Offene Fehlbestände</p>
+      <p className="mb-3 text-xs uppercase tracking-wide text-[var(--color-text-muted)]">Offene Fehlbestände</p>
       <ul className="card-list">
         <li style={{ padding: "0.3rem 0" }}>Genehmigte Mindermengen: {kennzahlen.anzahl_genehmigter_mindermengen}</li>
         <li style={{ padding: "0.3rem 0" }}>

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

@@ -16,12 +16,12 @@ function MaengelTileKomponente({ maengel, maengelNeuAnzahl, maengelKritischAnzah
   return (
     <>
       <p className="text-4xl font-bold tabular-nums leading-none">{maengelOffenListe.length}</p>
-      <p className="mb-2 text-xs uppercase tracking-wide text-muted-foreground">Offen</p>
+      <p className="mb-2 text-xs uppercase tracking-wide text-[var(--color-text-muted)]">Offen</p>
       {maengelNeuAnzahl > 0 && (
-        <p className="font-semibold text-warning">{maengelNeuAnzahl} neu gemeldet</p>
+        <p className="font-semibold text-[var(--color-warning)]">{maengelNeuAnzahl} neu gemeldet</p>
       )}
       {maengelKritischAnzahl > 0 && (
-        <p className="text-danger">{maengelKritischAnzahl} kritisch (blockiert Einsatzbereitschaft)</p>
+        <p className="text-[var(--color-danger)]">{maengelKritischAnzahl} kritisch (blockiert Einsatzbereitschaft)</p>
       )}
       {maengelOffenListe.length > 0 && (
         <>

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

@@ -14,7 +14,7 @@ function PrueftermineTileKomponente({ prueftermine }: Props) {
   const [alleAnzeigen, setAlleAnzeigen] = useState(false);
 
   if (prueftermine.length === 0) {
-    return <p className="text-sm text-muted-foreground">Keine anstehenden oder überfälligen Geräteprüfungen.</p>;
+    return <p className="text-sm text-[var(--color-text-muted)]">Keine anstehenden oder überfälligen Geräteprüfungen.</p>;
   }
 
   const sichtbare = alleAnzeigen ? prueftermine : prueftermine.slice(0, ANZAHL_OHNE_AUFKLAPPEN);
@@ -25,14 +25,14 @@ function PrueftermineTileKomponente({ prueftermine }: Props) {
         {sichtbare.map((p) => (
           <li
             key={`${p.typ}-${p.objekt_id}-${p.faelligkeitsdatum}`}
-            className="flex items-center gap-3 border-b border-border py-2 last:border-0"
+            className="flex items-center gap-3 border-b border-[var(--color-border)] py-2 last:border-0"
           >
             <InspectionStatus status={p.status} />
             <div className="min-w-0 flex-1">
               <Link to={`/akte/objekt/${p.objekt_id}`} className="block truncate font-medium">
                 {p.bezeichnung}
               </Link>
-              <span className="text-xs text-muted-foreground">{p.faelligkeitsdatum}</span>
+              <span className="text-xs text-[var(--color-text-muted)]">{p.faelligkeitsdatum}</span>
             </div>
             <span className="shrink-0 tabular-nums text-sm font-semibold">{p.verbleibende_tage} Tage</span>
           </li>
@@ -40,7 +40,7 @@ function PrueftermineTileKomponente({ prueftermine }: Props) {
       </ul>
       {prueftermine.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 (${prueftermine.length})`}

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})`}

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. */