/* ==============================================
   FamilienKiez - NEO-BRUTALISM / Kiez-Pop
   Loud, Tactile, Raw.
   ============================================== */

:root {
   /* --- The Palette (Flat & Loud) --- */
   --color-bg-canvas: #FAF9F6;
   /* Off-White "Paper" */
   --color-ink: #000000;
   /* Pure Black for everything */
   --color-white: #FFFFFF;

   /* --- Akzentfarben --- */
   --color-coral: #FF6B6B;
   /* Action / Urgent */
   --color-teal: #4ECDC4;
   /* Places / Kiez */
   --color-yellow: #FFE66D;
   /* Highlights / Events */
   --color-orange: #FF9F1C;
   /* Warning / Building */
   --color-emerald: #10B981;
   /* KIM / AI (Matches FAB) */
   --color-blue: #A8D0E6;
   /* Info / Neutral */
   --color-text-on-yellow: rgba(0, 0, 0, 0.95);
   /* Prevents darkmode inversion */

   /* --- Semantic Mappings (Legacy Compat) --- */
   --primary-color: var(--color-ink);
   /* Buttons sind jetzt schwarz oder outline */
   --primary-hover: var(--color-white);
   /* Invertiert bei Hover */
   --primary-dark: var(--color-ink);
   --primary-light: color-mix(in srgb, var(--color-yellow), var(--bg-card) 75%);
   --text-main: var(--color-ink);
   --text-muted: #555555;
   /* High contrast grey */
   --text-light: var(--color-white);
   --text-color: var(--text-main);
   --surface-on-yellow: #fffdf0;

   /* --- Buttons (Global Tokens) --- */
   --btn-solid-bg: var(--bg-card);
   --btn-solid-text: var(--color-ink);
   --btn-solid-border: var(--color-ink);
   --btn-solid-hover-bg: var(--color-yellow);
   --btn-solid-hover-text: var(--color-text-on-yellow);
   --btn-solid-hover-border: var(--color-text-on-yellow);

   /* --- Hero Action Buttons (Top page controls) --- */
   --hero-action-secondary-bg: var(--color-blue);
   --hero-action-secondary-text: var(--color-ink);
   --hero-action-secondary-border: var(--color-ink);
   --hero-action-primary-bg: var(--color-coral);
   --hero-action-primary-text: var(--color-ink);
   --hero-action-primary-border: var(--color-ink);
   --hero-action-hover-bg: var(--color-yellow);
   --hero-action-hover-text: var(--color-text-on-yellow);
   --hero-action-hover-border: var(--color-text-on-yellow);

   /* --- Homepage News Header Rows --- */
   --news-header-tipps-bg: var(--type-place-bg);
   --news-header-projekte-bg: var(--type-project-bg);
   --news-header-experten-bg: var(--type-expert-bg);
   --news-header-wegweiser-bg: var(--type-guide-bg);
   --news-header-termine-bg: var(--type-event-bg);
   --news-header-marktplatz-bg: var(--type-marketplace-bg);
   --news-header-kieztalk-bg: var(--type-discussion-bg);
   --news-header-kim-bg: var(--type-kim-bg);
   --news-header-text: #000000;

   --bg-body: var(--color-bg-canvas);
   --bg-card: var(--color-white);
   --bg-surface-2: var(--color-white);
   --bg-surface-3: #F0EFEC;
   --color-bg-secondary: var(--bg-surface-3);
   /* Brutalism nutzt kaum grau, eher outlines */

   /* --- Legacy Color Aliases --- */
   --color-primary: var(--primary-color);
   --secondary-color: var(--text-muted);
   --accent-color: var(--color-yellow);
   --color-success: var(--color-emerald);
   --color-green: var(--color-emerald);
   --color-purple: #7c3aed;
   --danger-color: #dc2626;
   --warning-color: #f59e0b;
   --success-color: #16a34a;
   --event-color: var(--color-yellow);
   --icon-color: var(--color-ink);

   /* --- Pastell Akzente --- */
   --bg-accent-warm: #fff1f2;
   --bg-accent-yellow: #fffbeb;
   --bg-accent-amber: #fff8e1;

   /* --- Borders (The Skeleton) --- */
   --border-width: 2px;
   --border-color: var(--color-ink);
   --border-radius-card: 12px;
   --border-radius-pill: 999px;
   --border-radius-sm: 4px;
   --radius-full: 50%;

   /* --- NEO-BRUTALISM TOKENS (Zentral für alle Komponenten) --- */
   --brutal-radius: 0;
   --brutal-border: 2px solid var(--color-ink);
   --brutal-shadow: 2px 2px 0 var(--color-ink);
   --brutal-shadow-lg: 4px 4px 0 var(--color-ink);
   --brutal-shadow-hover: var(--shadow-hard-sm);
   --brutal-bg: var(--bg-card);
   --brutal-card-bg: var(--bg-card);
   --brutal-ink: var(--color-ink);
   --brutal-text-muted: var(--text-muted);
   --brutal-yellow: var(--color-yellow);
   --brutal-coral: var(--color-coral);
   --brutal-teal: var(--color-teal);
   --brutal-blue: var(--color-blue);

   /* --- Spacing (Generous) --- */
   --spacing-xs: 0.75rem;
   --spacing-sm: 1.25rem;
   --spacing-md: 2rem;
   --spacing-lg: 3.5rem;
   --spacing-xl: 6rem;

   /* --- Shadows (Hard Cast) --- */
   /* X Y Blur Spread Color */
   --shadow-sm: 2px 2px 0 var(--color-ink);
   --shadow-hard: 4px 4px 0px 0px var(--color-ink);
   --shadow-hard-sm: 2px 2px 0px 0px var(--color-ink);
   --shadow-none: 0px 0px 0px 0px var(--color-ink);
   --shadow-md: var(--shadow-sm);
   --shadow-lg: var(--shadow-hard);
   --shadow-xl: 6px 6px 0px 0px var(--color-ink);

   /* --- Typography --- */
   --font-heading: 'Inter', system-ui, sans-serif;
   /* Wird via Utility auf Black gesetzt */
   --font-sans: 'Inter', system-ui, sans-serif;
   --font-mono: 'Roboto Mono', monospace;
   /* Für Daten/Tags */

   /* --- Content Type Colors (Flat Backgrounds) --- */
   --type-place-bg: var(--color-teal);
   --type-place-color: #000000;
   /* ALWAYS BLACK ON BRIGHT COLOR */

   --type-event-bg: #FFFFFF;
   --type-event-color: #000000;
   /* White BG, Black Icon */

   --type-marketplace-bg: #f7aef8;
   /* Pinkisch für Markt */
   --type-marketplace-color: #000000;
   /* ALWAYS BLACK ON BRIGHT COLOR */

   --type-project-bg: var(--color-orange);
   --type-project-color: #000000;
   /* ALWAYS BLACK ON BRIGHT COLOR */

   --type-expert-bg: var(--color-coral);
   --type-expert-color: #000000;
   /* ALWAYS BLACK ON BRIGHT COLOR */

   --type-discussion-bg: var(--color-blue);
   --type-discussion-color: #000000;
   /* ALWAYS BLACK ON BRIGHT COLOR */

   --type-guide-bg: #c7d2fe;
   --type-guide-color: #000000;
   /* Light Indigo for Guides */

   --type-kim-bg: var(--color-emerald);
   --type-kim-color: #000000;
   /* ALWAYS BLACK ON BRIGHT COLOR */

   /* --- Transitions (Snappy) --- */
   --transition-snappy: 0.2s cubic-bezier(0.25, 1, 0.5, 1);
   --transition-fast: 0.1s ease-out;
   --transition-smooth: 0.2s ease;
   --transition-bounce: 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);

   /* --- Legacy/Missing Variables Polyfill --- */
   --radius-md: var(--border-radius-card);
   --radius-sm: var(--border-radius-sm);
   --radius-lg: 16px;
   --border-radius-md: var(--border-radius-card);
   --border-color-light: color-mix(in srgb, var(--color-ink), transparent 80%);
   --border-color-dark: var(--color-ink);
   --border-color-strong: var(--color-ink);
   /* --- Component Status Colors (Boxes/Hints) --- */
   --bg-highlight: linear-gradient(135deg, #f0fdf4, #ecfdf5);
   --border-highlight: #bbf7d0;
   --text-highlight-title: #166534;
   --text-highlight: #15803d;

   --bg-hint-green: #f0fdf4;
   --border-hint-green: #86efac;
   --text-hint-green: #166534;
   --icon-hint-green: #16a34a;

   --bg-hint-blue: #eff6ff;
   --border-hint-blue: #93c5fd;
   --text-hint-blue: #1e40af;
   --icon-hint-blue: #2563eb;

   --bg-hint-orange: #fff7ed;
   --border-hint-orange: #fdba74;
   --text-hint-orange: #9a3412;
   --icon-hint-orange: #ea580c;

   --bg-hint-red: #fef2f2;
   --border-hint-red: #fca5a5;
   --text-hint-red: #991b1b;
   --icon-hint-red: #dc2626;

   --bg-warning: #fef3c7;
   --border-warning: #f59e0b;
   --text-warning-title: #92400e;
   --text-warning: #92400e;

   --bg-ai-icon: #e0f2fe;
   --text-ai-icon: #0284c7;

   --bg-copyright: rgba(0, 0, 0, 0.6);

   /* --- Chat/Kieztalk Tokens --- */
   --chat-badge-general-bg: #f1f5f9;
   --chat-badge-general-text: #64748b;
   --chat-badge-education-bg: #ccfbf1;
   --chat-badge-education-text: #115e59;
   --chat-badge-health-bg: #fce7f3;
   --chat-badge-health-text: #9d174d;
   --chat-badge-baby-bg: #ffe4e6;
   --chat-badge-baby-text: #be123c;
   --chat-badge-childcare-bg: #fef3c7;
   --chat-badge-childcare-text: #92400e;
   --chat-badge-activities-bg: #dcfce7;
   --chat-badge-activities-text: #166534;
   --chat-badge-marketplace-bg: #fef9c3;
   --chat-badge-marketplace-text: #854d0e;
   --chat-badge-living-bg: #e0e7ff;
   --chat-badge-living-text: #4338ca;
   --chat-badge-bureaucracy-bg: #f3e8ff;
   --chat-badge-bureaucracy-text: #7e22ce;
   --chat-badge-safety-bg: #fee2e2;
   --chat-badge-safety-text: #dc2626;
   --chat-danger-hover-bg: #fee2e2;
   --chat-danger-hover-text: #dc2626;
   --chat-comments-bg: color-mix(in srgb, var(--bg-card), var(--text-main) 2%);

   /* --- Overlays (Schatten, Backdrop, Dimmer) --- */
   --overlay-0: rgba(0, 0, 0, 0);
   --overlay-5: rgba(0, 0, 0, 0.05);
   --overlay-8: rgba(0, 0, 0, 0.08);
   --overlay-10: rgba(0, 0, 0, 0.1);
   --overlay-12: rgba(0, 0, 0, 0.12);
   --overlay-15: rgba(0, 0, 0, 0.15);
   --overlay-20: rgba(0, 0, 0, 0.2);
   --overlay-50: rgba(0, 0, 0, 0.5);
   --overlay-60: rgba(0, 0, 0, 0.6);
   --overlay-90: rgba(0, 0, 0, 0.9);

   /* --- Glass (weiße Transparenz für Floating UI) --- */
   --glass-10: rgba(255, 255, 255, 0.1);
   --glass-15: rgba(255, 255, 255, 0.15);
   --glass-20: rgba(255, 255, 255, 0.2);
   --glass-30: rgba(255, 255, 255, 0.3);
   --glass-80: rgba(255, 255, 255, 0.8);
   --glass-85: rgba(255, 255, 255, 0.85);
   --glass-90: rgba(255, 255, 255, 0.9);
   --glass-95: rgba(255, 255, 255, 0.95);

   /* --- Farbige Overlays (Akzent-Schatten, Icon-BGs) --- */
   --overlay-purple-glow: rgba(139, 92, 246, 0.4);
   --overlay-purple-fade: rgba(139, 92, 246, 0);
   --overlay-purple-10: rgba(139, 92, 246, 0.1);
   --overlay-purple-30: rgba(139, 92, 246, 0.3);
   --overlay-indigo-25: rgba(102, 126, 234, 0.25);
   --overlay-indigo-35: rgba(102, 126, 234, 0.35);
   --overlay-green-10: rgba(22, 163, 74, 0.1);
   --overlay-emerald-10: rgba(16, 185, 129, 0.1);
   --overlay-blue-10: rgba(59, 130, 246, 0.1);
   --overlay-indigo-10: rgba(30, 64, 175, 0.1);
   --overlay-pink-10: rgba(236, 72, 153, 0.1);
   --overlay-amber-10: rgba(245, 158, 11, 0.1);

   /* --- Text-Stufen --- */
   --text-strong: #333;
   --text-body: #444;
   --text-secondary: #475569;
   --text-supporting: #334155;
   --text-placeholder: #94a3b8;
   --text-disabled: #999;
   --text-muted-soft: #888;
   --text-faint: #bbb;
   --text-muted-strong: #666;
   --text-on-dark: #fff;
   --text-on-bright: #000;

   /* --- Hintergrund-Stufen --- */
   --bg-subtle: #f8fafc;
   --bg-soft: #f1f5f9;
   --bg-neutral: #f5f5f5;
   --bg-muted: #f0f0f0;
   --bg-inset: #e2e8f0;
   --bg-pressed: #e0e0e0;
   --bg-dark: #111;
   --bg-tooltip: #1e293b;
   --bg-badge-dark: #1e1e1e;
   --bg-progress-track: #e5e7eb;

   /* --- Border-Stufen --- */
   --border-subtle: #e2e8f0;
   --border-soft: #f1f5f9;
   --border-light: #ddd;
   --border-lighter: #eee;
   --border-muted: #ccc;

   /* --- Status-Feedback-Tokens --- */
   --status-success-bg: #dcfce7;
   --status-success-text: #166534;
   --status-success-solid: #16a34a;
   --status-success-accent: #15803d;
   --status-error-bg: #fee2e2;
   --status-error-bg-light: #fef2f2;
   --status-error-text: #991b1b;
   --status-error-solid: #ef4444;
   --status-error-hover: #b91c1c;
   --status-error-light: #fecaca;
   --status-info-bg: #dbeafe;
   --status-info-text: #1e40af;
   --status-info-solid: #3b82f6;

   /* --- Sektions-Akzentfarben --- */
   --accent-tipps-bg: #dcfce7;
   --accent-tipps-bg-soft: #bbf7d0;
   --accent-tipps-text: #166534;
   --accent-tipps-solid: #16a34a;
   --accent-tipps-dark: #15803d;

   --accent-projekte-bg: #f3e8ff;
   --accent-projekte-text: #7e22ce;
   --accent-projekte-solid: #9333ea;

   --accent-purple-solid: #8b5cf6;
   --accent-purple-text: #7c3aed;

   --accent-experten-bg: #e0e7ff;
   --accent-experten-text: #3730a3;
   --accent-experten-solid: #4338ca;

   --accent-wegweiser-bg: #e0f2fe;
   --accent-wegweiser-text: #0284c7;
   --accent-wegweiser-solid: #0369a1;

   --accent-termine-bg: #fce7f3;
   --accent-termine-bg-soft: #fbcfe8;
   --accent-termine-text: #be123c;
   --accent-termine-solid: #db2777;
   --accent-termine-date: #fecdd3;
   --accent-termine-text-soft: #9d174d;

   --accent-marktplatz-bg: #fef3c7;
   --accent-marktplatz-text: #b45309;
   --accent-marktplatz-solid: #d97706;
   --accent-marktplatz-text-strong: #92400e;

   --accent-kieztalk-bg: #ccfbf1;
   --accent-kieztalk-text: #0d9488;
   --accent-kieztalk-solid: #0f766e;
   --accent-kieztalk-bg-light: #f0fdfa;
   --accent-kieztalk-border: #5eead4;

   --accent-kim-solid: #10b981;
   --accent-kim-hover: #059669;
   --accent-kim-text: #16a34a;
   --accent-kim-bg: #dcfce7;
   --accent-kim-bg-alt: #d1fae5;
   --accent-kim-border: #86efac;
   --accent-kim-bg-light: #f0fdf4;
   --accent-kim-bg-gradient: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
   --accent-kim-action: #ff6b6b;
   --accent-kim-action-hover: #ff5252;

   /* --- Cross-Referenzen --- */
   --badge-green-bg: var(--accent-tipps-bg);
   --badge-green-text: var(--accent-tipps-text);
   --badge-purple-bg: var(--accent-experten-bg);
   --badge-purple-text: var(--accent-experten-solid);
   --badge-blue-bg: var(--status-info-bg);
   --badge-blue-text: var(--status-info-text);
   --badge-yellow-bg: var(--accent-marktplatz-bg);
   --badge-yellow-text: var(--accent-marktplatz-text-strong);
   --badge-orange-bg: #ffedd5;
   --badge-orange-text: #9a3412;
   --badge-pink-bg: var(--accent-termine-bg);
   --badge-pink-text: var(--accent-termine-text-soft);
   --badge-teal-bg: var(--accent-kieztalk-bg);
   --badge-teal-text: #115e59;
   --badge-help-bg: #fef08a;
   --badge-news-bg: #bfdbfe;
   --badge-recommendation-bg: var(--accent-tipps-bg-soft);

   --avatar-purple-bg: var(--accent-experten-bg);
   --avatar-purple-text: var(--accent-experten-solid);
   --avatar-green-bg: var(--accent-tipps-bg);
   --avatar-green-text: var(--accent-tipps-text);
   --avatar-blue-bg: var(--accent-wegweiser-bg);
   --avatar-blue-text: var(--accent-wegweiser-solid);
   --avatar-orange-bg: var(--badge-orange-bg);
   --avatar-orange-text: #c2410c;

   /* --- Domain-spezifische Tokens --- */
   --mp-type-offer: #22c55e;
   --mp-type-search: var(--status-info-solid);
   --mp-type-lend: #0891b2;
   --mp-type-swap: #8b5cf6;
   --mp-type-default: var(--text-secondary);

   --project-status-new: var(--text-secondary);
   --project-status-planning: #eab308;
   --project-status-active: var(--status-info-solid);
   --project-status-done: #22c55e;

   --project-type-idea-solid: #f59e0b;
   --project-type-idea-text: var(--accent-marktplatz-solid);
   --project-type-idea-bg: var(--overlay-amber-10);
   --project-type-discussion-solid: var(--status-info-solid);
   --project-type-discussion-text: #2563eb;
   --project-type-discussion-bg: var(--overlay-blue-10);
   --project-type-initiative-solid: var(--accent-kim-solid);
   --project-type-initiative-text: var(--accent-kim-hover);
   --project-type-initiative-bg: var(--overlay-emerald-10);
   --project-type-event-solid: #ec4899;
   --project-type-event-text: #db2777;
   --project-type-event-bg: var(--overlay-pink-10);
   --project-type-help-solid: #8b5cf6;
   --project-type-help-text: #7c3aed;
   --project-type-help-bg: var(--overlay-purple-10);

   --btn-danger-bg: #c00;
   --btn-danger-hover: #a00;
   --btn-danger-text: #fff;

   --profile-blue: #0056b3;
   --profile-blue-bg: #e3f2fd;
   --profile-blue-text: #1976d2;
   --profile-pink-bg: #fce4ec;
   --profile-pink-text: #c2185b;

   --editor-link-color: #6200ee;

   --kim-hint-border: #ffd54f;
   --kim-hint-text: #795548;
   --kim-hint-icon: #f9a825;

   --event-gradient-start: #667eea;
   --event-gradient-end: #764ba2;

   --admin-chart-bar-start: #6366f1;
   --admin-chart-bar-end: #4f46e5;

   --chat-user-msg-bg: #1d4ed8;
   --chat-user-msg-text: #ffffff;

}

/* 
   Dark Mode Support: Matte Onyx (Sehr Matt)
   Flache, gedimmte Kontraste. Keine reinen Schwarz- oder Weißwerte.
*/
@media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
      /* --- The Palette (Dark Mode: MATTE ONYX) --- */
      --color-bg-canvas: #18181b;
      /* Zink / Onyx */
      --color-ink: #f4f4f5;
      /* Off-White Text */
      --color-white: #27272a;
      /* Karten heben sich matt ab */

      /* --- Buntfarben dimmen --- */
      --color-coral: var(--color-ink);
      --color-teal: var(--color-ink);
      --color-orange: var(--color-ink);
      --color-emerald: var(--color-ink);
      --color-blue: var(--color-ink);

      /* Pastell Akzente im Dark Mode (Canvas Farbe) */
      --bg-accent-warm: var(--color-bg-canvas);
      --bg-accent-yellow: var(--color-bg-canvas);
      --bg-accent-amber: var(--color-bg-canvas);

      /* --- Einzige Ausnahme: Hover & Primary Actions --- */
      --color-yellow: #FFE66D;
      /* Bleibt Gelb für Action */
      --color-text-on-yellow: rgba(0, 0, 0, 0.95);
      /* Prevent Inversion, immer Schwarz auf Gelb */

      /* --- Semantic Mappings --- */
      --bg-body: var(--color-bg-canvas);
      --bg-card: var(--color-white);
      --bg-surface-2: var(--color-bg-canvas);
      --bg-surface-3: #3f3f46;
      --color-bg-secondary: #3f3f46;

      --text-main: var(--color-ink);
      --text-muted: #a1a1aa;
      /* Gedimmtes Grautext */
      --text-light: var(--color-bg-canvas);
      --text-color: var(--text-main);
      --surface-on-yellow: #fff7cc;
      --btn-solid-bg: #3f3f46;
      --btn-solid-text: #f4f4f5;
      --btn-solid-border: #52525b;
      --btn-solid-hover-bg: var(--color-yellow);
      --btn-solid-hover-text: var(--color-text-on-yellow);
      --btn-solid-hover-border: var(--color-text-on-yellow);
      --hero-action-secondary-bg: var(--btn-solid-bg);
      --hero-action-secondary-text: var(--btn-solid-text);
      --hero-action-secondary-border: var(--btn-solid-border);
      --hero-action-primary-bg: var(--btn-solid-bg);
      --hero-action-primary-text: var(--btn-solid-text);
      --hero-action-primary-border: var(--btn-solid-border);
      --hero-action-hover-bg: var(--btn-solid-hover-bg);
      --hero-action-hover-text: var(--btn-solid-hover-text);
      --hero-action-hover-border: var(--btn-solid-hover-border);
      --news-header-tipps-bg: rgba(78, 205, 196, 0.24);
      --news-header-projekte-bg: rgba(255, 159, 28, 0.24);
      --news-header-experten-bg: rgba(255, 107, 107, 0.24);
      --news-header-wegweiser-bg: rgba(199, 210, 254, 0.24);
      --news-header-termine-bg: rgba(255, 255, 255, 0.18);
      --news-header-marktplatz-bg: rgba(247, 174, 248, 0.24);
      --news-header-kieztalk-bg: rgba(168, 208, 230, 0.24);
      --news-header-kim-bg: rgba(16, 185, 129, 0.24);
      --news-header-text: var(--text-main);
      --primary-dark: var(--color-ink);
      --primary-light: #3f3f46;
      --color-primary: var(--primary-color);
      --secondary-color: var(--text-muted);
      --accent-color: var(--color-yellow);
      --color-success: #34d399;
      --color-green: #34d399;
      --color-purple: #a78bfa;
      --danger-color: #f87171;
      --warning-color: #fbbf24;
      --success-color: #34d399;
      --event-color: #fcd34d;
      --icon-color: var(--color-ink);

      /* --- Component Status Colors (Dark Mode) --- */
      --bg-highlight: #1a2a1a;
      --border-highlight: #2d5a2d;
      --text-highlight-title: #86efac;
      --text-highlight: #86efac;

      --bg-hint-green: #14532d;
      --border-hint-green: #22c55e;
      --text-hint-green: #86efac;
      --icon-hint-green: #4ade80;

      --bg-hint-blue: #1e3a5f;
      --border-hint-blue: #3b82f6;
      --text-hint-blue: #93c5fd;
      --icon-hint-blue: #60a5fa;

      --bg-hint-orange: #431407;
      --border-hint-orange: #f97316;
      --text-hint-orange: #fdba74;
      --icon-hint-orange: #fb923c;

      --bg-hint-red: rgba(239, 68, 68, 0.15);
      --border-hint-red: #f87171;
      --text-hint-red: #fecaca;
      --icon-hint-red: #f87171;

      --bg-warning: #450a0a;
      --border-warning: #ef4444;
      --text-warning-title: #fca5a5;
      --text-warning: #fecaca;

      --bg-ai-icon: rgba(2, 132, 199, 0.2);
      --text-ai-icon: #38bdf8;

      --bg-copyright: rgba(0, 0, 0, 0.8);

      --chat-badge-general-bg: rgba(100, 116, 139, 0.2);
      --chat-badge-general-text: #94a3b8;
      --chat-badge-education-bg: rgba(17, 94, 89, 0.2);
      --chat-badge-education-text: #5eead4;
      --chat-badge-health-bg: rgba(157, 23, 77, 0.2);
      --chat-badge-health-text: #f9a8d4;
      --chat-badge-baby-bg: rgba(190, 18, 60, 0.2);
      --chat-badge-baby-text: #fda4af;
      --chat-badge-childcare-bg: rgba(146, 64, 14, 0.2);
      --chat-badge-childcare-text: #fcd34d;
      --chat-badge-activities-bg: rgba(22, 101, 52, 0.2);
      --chat-badge-activities-text: #86efac;
      --chat-badge-marketplace-bg: rgba(133, 77, 14, 0.2);
      --chat-badge-marketplace-text: #fef08a;
      --chat-badge-living-bg: rgba(67, 56, 202, 0.2);
      --chat-badge-living-text: #a5b4fc;
      --chat-badge-bureaucracy-bg: rgba(126, 34, 206, 0.2);
      --chat-badge-bureaucracy-text: #d8b4fe;
      --chat-badge-safety-bg: rgba(220, 38, 38, 0.2);
      --chat-badge-safety-text: #fca5a5;
      --chat-danger-hover-bg: rgba(220, 38, 38, 0.2);
      --chat-danger-hover-text: #f87171;
      --chat-comments-bg: rgba(255, 255, 255, 0.02);

      /* --- Borders (Inverted, gedimmt) --- */
      --border-color: #52525b;
      --border-color-light: color-mix(in srgb, #52525b, transparent 80%);
      --border-color-dark: #52525b;
      --border-color-strong: var(--color-ink);

      /* --- Shadows (Dark Zink) --- */
      --shadow-sm: 2px 2px 0 #09090b;
      --shadow-hard: 4px 4px 0px 0px #09090b;
      --shadow-hard-sm: 2px 2px 0px 0px #09090b;
      --shadow-md: var(--shadow-sm);
      --shadow-lg: var(--shadow-hard);
      --shadow-xl: 6px 6px 0px 0px #09090b;

      /* --- NEO-BRUTALISM TOKENS (Dark Mode) --- */
      --brutal-border: 2px solid #52525b;
      --brutal-shadow: 2px 2px 0 #09090b;
      --brutal-shadow-lg: 4px 4px 0 #09090b;
      --brutal-shadow-hover: var(--shadow-hard-sm);
      --brutal-bg: var(--bg-card);
      --brutal-card-bg: var(--bg-card);
      --brutal-ink: var(--color-ink);
      --brutal-text-muted: var(--text-muted);
      --brutal-yellow: var(--color-yellow);
      --brutal-coral: var(--color-coral);
      --brutal-teal: var(--color-teal);
      --brutal-blue: var(--color-blue);


      /* --- Content Type Colors (Dark Backgrounds) --- */
      --type-place-bg: var(--color-bg-canvas);
      --type-event-bg: var(--color-bg-canvas);
      --type-marketplace-bg: var(--color-bg-canvas);
      --type-project-bg: var(--color-bg-canvas);
      --type-expert-bg: var(--color-bg-canvas);
      --type-discussion-bg: var(--color-bg-canvas);
      --type-guide-bg: var(--color-bg-canvas);
      --type-kim-bg: var(--color-bg-canvas);

      /* Text Colors on Content Types (Ink) */
      --type-place-color: var(--color-ink);
      --type-event-color: var(--color-ink);
      --type-marketplace-color: var(--color-ink);
      --type-project-color: var(--color-ink);
      --type-expert-color: var(--color-ink);
      --type-discussion-color: var(--color-ink);
      --type-guide-color: var(--color-ink);
      --type-kim-color: var(--color-ink);

      /* --- Text-Stufen (Dark Mode) --- */
      --text-strong: #e2e8f0;
      --text-body: #d4d4d8;
      --text-secondary: #a1a1aa;
      --text-supporting: #94a3b8;
      --text-placeholder: #71717a;
      --text-disabled: #52525b;
      --text-muted-soft: #71717a;
      --text-faint: #52525b;
      --text-muted-strong: #a1a1aa;
      /* --text-on-dark und --text-on-bright bleiben (funktionieren universal) */

      /* --- Hintergrund-Stufen (Dark Mode) --- */
      --bg-subtle: #1e1e22;
      --bg-soft: #27272a;
      --bg-neutral: #2a2a2e;
      --bg-muted: #303034;
      --bg-inset: #3f3f46;
      --bg-pressed: #52525b;
      --bg-dark: #0a0a0a;
      --bg-tooltip: #0f172a;
      --bg-badge-dark: #0f0f0f;
      --bg-progress-track: #3f3f46;

      /* --- Border-Stufen (Dark Mode) --- */
      --border-subtle: #3f3f46;
      --border-soft: #27272a;
      --border-light: #3f3f46;
      --border-lighter: #2a2a2e;
      --border-muted: #52525b;

      /* --- Status-Feedback (Dark Mode) --- */
      --status-success-bg: rgba(22, 163, 74, 0.15);
      --status-success-text: #86efac;
      --status-success-solid: #34d399;
      --status-success-accent: #4ade80;
      --status-error-bg: rgba(239, 68, 68, 0.15);
      --status-error-bg-light: rgba(239, 68, 68, 0.08);
      --status-error-text: #fca5a5;
      --status-error-solid: #f87171;
      --status-error-hover: #ef4444;
      --status-error-light: rgba(239, 68, 68, 0.2);
      --status-info-bg: rgba(59, 130, 246, 0.15);
      --status-info-text: #93c5fd;
      --status-info-solid: #60a5fa;

      /* --- Sektions-Akzentfarben (Dark Mode) --- */
      --accent-tipps-bg: rgba(22, 163, 74, 0.15);
      --accent-tipps-bg-soft: rgba(22, 163, 74, 0.25);
      --accent-tipps-text: #86efac;
      --accent-tipps-solid: #34d399;
      --accent-tipps-dark: #4ade80;

      --accent-projekte-bg: rgba(147, 51, 234, 0.15);
      --accent-projekte-text: #d8b4fe;
      --accent-projekte-solid: #a855f7;

      --accent-purple-solid: #a78bfa;
      --accent-purple-text: #c4b5fd;

      --accent-experten-bg: rgba(67, 56, 202, 0.15);
      --accent-experten-text: #a5b4fc;
      --accent-experten-solid: #6366f1;

      --accent-wegweiser-bg: rgba(3, 105, 161, 0.15);
      --accent-wegweiser-text: #7dd3fc;
      --accent-wegweiser-solid: #38bdf8;

      --accent-termine-bg: rgba(219, 39, 119, 0.15);
      --accent-termine-bg-soft: rgba(219, 39, 119, 0.25);
      --accent-termine-text: #f9a8d4;
      --accent-termine-solid: #f472b6;
      --accent-termine-date: rgba(219, 39, 119, 0.2);
      --accent-termine-text-soft: #f9a8d4;

      --accent-marktplatz-bg: rgba(217, 119, 6, 0.15);
      --accent-marktplatz-text: #fcd34d;
      --accent-marktplatz-solid: #fbbf24;
      --accent-marktplatz-text-strong: #fcd34d;

      --accent-kieztalk-bg: rgba(13, 148, 136, 0.15);
      --accent-kieztalk-text: #5eead4;
      --accent-kieztalk-solid: #2dd4bf;
      --accent-kieztalk-bg-light: rgba(13, 148, 136, 0.08);
      --accent-kieztalk-border: #2dd4bf;

      --accent-kim-solid: #34d399;
      --accent-kim-hover: #6ee7b7;
      --accent-kim-text: #86efac;
      --accent-kim-bg: rgba(22, 163, 74, 0.15);
      --accent-kim-bg-alt: rgba(16, 185, 129, 0.15);
      --accent-kim-border: #34d399;
      --accent-kim-bg-light: rgba(22, 163, 74, 0.08);
      --accent-kim-bg-gradient: linear-gradient(135deg, rgba(22, 163, 74, 0.08) 0%, rgba(22, 163, 74, 0.15) 100%);
      --accent-kim-action: #ff6b6b;
      --accent-kim-action-hover: #ff5252;

      /* --- Domain-spezifische Tokens (Dark Mode) --- */
      --mp-type-offer: #4ade80;
      --mp-type-lend: #22d3ee;
      --mp-type-swap: #a78bfa;

      --project-status-planning: #fde047;
      --project-status-done: #4ade80;

      --project-type-idea-solid: #fbbf24;
      --project-type-idea-text: #fcd34d;
      --project-type-discussion-text: #93c5fd;
      --project-type-initiative-text: #6ee7b7;
      --project-type-event-solid: #f472b6;
      --project-type-event-text: #f9a8d4;
      --project-type-help-solid: #a78bfa;
      --project-type-help-text: #c4b5fd;

      --btn-danger-bg: #991b1b;
      --btn-danger-hover: #b91c1c;

      --profile-blue: #60a5fa;
      --profile-blue-bg: rgba(25, 118, 210, 0.15);
      --profile-blue-text: #90caf9;
      --profile-pink-bg: rgba(194, 24, 91, 0.15);
      --profile-pink-text: #f48fb1;

      --editor-link-color: #b388ff;

      --kim-hint-border: #ffd54f;
      --kim-hint-text: #d7ccc8;
      --kim-hint-icon: #ffca28;

      --badge-orange-bg: rgba(234, 88, 12, 0.15);
      --badge-orange-text: #fdba74;
      --badge-help-bg: rgba(234, 179, 8, 0.15);
      --badge-news-bg: rgba(59, 130, 246, 0.15);
      --badge-recommendation-bg: rgba(22, 163, 74, 0.25);
      --badge-teal-text: #5eead4;

      --avatar-orange-text: #fb923c;

      --chat-user-msg-bg: #1d4ed8;
      --chat-user-msg-text: #ffffff;
   }
}

/* Manueller Theme-Toggle (data-theme auf <html>) */
:root[data-theme="dark"] {
   --color-bg-canvas: #18181b;
   --color-ink: #f4f4f5;
   --color-white: #27272a;
   --color-coral: var(--color-ink);
   --color-teal: var(--color-ink);
   --color-orange: var(--color-ink);
   --color-emerald: var(--color-ink);
   --color-blue: var(--color-ink);
   --bg-accent-warm: var(--color-bg-canvas);
   --bg-accent-yellow: var(--color-bg-canvas);
   --bg-accent-amber: var(--color-bg-canvas);
   --color-yellow: #FFE66D;
   --color-text-on-yellow: rgba(0, 0, 0, 0.95);
   --bg-body: var(--color-bg-canvas);
   --bg-card: var(--color-white);
   --bg-surface-2: var(--color-bg-canvas);
   --bg-surface-3: #3f3f46;
   --color-bg-secondary: #3f3f46;
   --text-main: var(--color-ink);
   --text-muted: #a1a1aa;
   --text-light: var(--color-bg-canvas);
   --text-color: var(--text-main);
   --surface-on-yellow: #fff7cc;
   --btn-solid-bg: #3f3f46;
   --btn-solid-text: #f4f4f5;
   --btn-solid-border: #52525b;
   --btn-solid-hover-bg: var(--color-yellow);
   --btn-solid-hover-text: var(--color-text-on-yellow);
   --btn-solid-hover-border: var(--color-text-on-yellow);
   --hero-action-secondary-bg: var(--btn-solid-bg);
   --hero-action-secondary-text: var(--btn-solid-text);
   --hero-action-secondary-border: var(--btn-solid-border);
   --hero-action-primary-bg: var(--btn-solid-bg);
   --hero-action-primary-text: var(--btn-solid-text);
   --hero-action-primary-border: var(--btn-solid-border);
   --hero-action-hover-bg: var(--btn-solid-hover-bg);
   --hero-action-hover-text: var(--btn-solid-hover-text);
   --hero-action-hover-border: var(--btn-solid-hover-border);
   --news-header-tipps-bg: rgba(78, 205, 196, 0.24);
   --news-header-projekte-bg: rgba(255, 159, 28, 0.24);
   --news-header-experten-bg: rgba(255, 107, 107, 0.24);
   --news-header-wegweiser-bg: rgba(199, 210, 254, 0.24);
   --news-header-termine-bg: rgba(255, 255, 255, 0.18);
   --news-header-marktplatz-bg: rgba(247, 174, 248, 0.24);
   --news-header-kieztalk-bg: rgba(168, 208, 230, 0.24);
   --news-header-kim-bg: rgba(16, 185, 129, 0.24);
   --news-header-text: var(--text-main);
   --primary-dark: var(--color-ink);
   --primary-light: #3f3f46;
   --color-primary: var(--primary-color);
   --secondary-color: var(--text-muted);
   --accent-color: var(--color-yellow);
   --color-success: #34d399;
   --color-green: #34d399;
   --color-purple: #a78bfa;
   --danger-color: #f87171;
   --warning-color: #fbbf24;
   --success-color: #34d399;
   --event-color: #fcd34d;
   --icon-color: var(--color-ink);
   --bg-highlight: #1a2a1a;
   --border-highlight: #2d5a2d;
   --text-highlight-title: #86efac;
   --text-highlight: #86efac;
   --bg-hint-green: #14532d;
   --border-hint-green: #22c55e;
   --text-hint-green: #86efac;
   --icon-hint-green: #4ade80;
   --bg-hint-blue: #1e3a5f;
   --border-hint-blue: #3b82f6;
   --text-hint-blue: #93c5fd;
   --icon-hint-blue: #60a5fa;
   --bg-hint-orange: #431407;
   --border-hint-orange: #f97316;
   --text-hint-orange: #fdba74;
   --icon-hint-orange: #fb923c;
   --bg-hint-red: rgba(239, 68, 68, 0.15);
   --border-hint-red: #f87171;
   --text-hint-red: #fecaca;
   --icon-hint-red: #f87171;
   --bg-warning: #450a0a;
   --border-warning: #ef4444;
   --text-warning-title: #fca5a5;
   --text-warning: #fecaca;
   --bg-ai-icon: rgba(2, 132, 199, 0.2);
   --text-ai-icon: #38bdf8;
   --bg-copyright: rgba(0, 0, 0, 0.8);
   --chat-badge-general-bg: rgba(100, 116, 139, 0.2);
   --chat-badge-general-text: #94a3b8;
   --chat-badge-education-bg: rgba(17, 94, 89, 0.2);
   --chat-badge-education-text: #5eead4;
   --chat-badge-health-bg: rgba(157, 23, 77, 0.2);
   --chat-badge-health-text: #f9a8d4;
   --chat-badge-baby-bg: rgba(190, 18, 60, 0.2);
   --chat-badge-baby-text: #fda4af;
   --chat-badge-childcare-bg: rgba(146, 64, 14, 0.2);
   --chat-badge-childcare-text: #fcd34d;
   --chat-badge-activities-bg: rgba(22, 101, 52, 0.2);
   --chat-badge-activities-text: #86efac;
   --chat-badge-marketplace-bg: rgba(133, 77, 14, 0.2);
   --chat-badge-marketplace-text: #fef08a;
   --chat-badge-living-bg: rgba(67, 56, 202, 0.2);
   --chat-badge-living-text: #a5b4fc;
   --chat-badge-bureaucracy-bg: rgba(126, 34, 206, 0.2);
   --chat-badge-bureaucracy-text: #d8b4fe;
   --chat-badge-safety-bg: rgba(220, 38, 38, 0.2);
   --chat-badge-safety-text: #fca5a5;
   --chat-danger-hover-bg: rgba(220, 38, 38, 0.2);
   --chat-danger-hover-text: #f87171;
   --chat-comments-bg: rgba(255, 255, 255, 0.02);
   --border-color: #52525b;
   --border-color-light: color-mix(in srgb, #52525b, transparent 80%);
   --border-color-dark: #52525b;
   --border-color-strong: var(--color-ink);
   --shadow-sm: 2px 2px 0 #09090b;
   --shadow-hard: 4px 4px 0px 0px #09090b;
   --shadow-hard-sm: 2px 2px 0px 0px #09090b;
   --shadow-md: var(--shadow-sm);
   --shadow-lg: var(--shadow-hard);
   --shadow-xl: 6px 6px 0px 0px #09090b;
   --brutal-border: 2px solid #52525b;
   --brutal-shadow: 2px 2px 0 #09090b;
   --brutal-shadow-lg: 4px 4px 0 #09090b;
   --brutal-shadow-hover: var(--shadow-hard-sm);
   --brutal-bg: var(--bg-card);
   --brutal-card-bg: var(--bg-card);
   --brutal-ink: var(--color-ink);
   --brutal-text-muted: var(--text-muted);
   --brutal-yellow: var(--color-yellow);
   --brutal-coral: var(--color-coral);
   --brutal-teal: var(--color-teal);
   --brutal-blue: var(--color-blue);
   --type-place-bg: var(--color-bg-canvas);
   --type-event-bg: var(--color-bg-canvas);
   --type-marketplace-bg: var(--color-bg-canvas);
   --type-project-bg: var(--color-bg-canvas);
   --type-expert-bg: var(--color-bg-canvas);
   --type-discussion-bg: var(--color-bg-canvas);
   --type-guide-bg: var(--color-bg-canvas);
   --type-kim-bg: var(--color-bg-canvas);
   --type-place-color: var(--color-ink);
   --type-event-color: var(--color-ink);
   --type-marketplace-color: var(--color-ink);
   --type-project-color: var(--color-ink);
   --type-expert-color: var(--color-ink);
   --type-discussion-color: var(--color-ink);
   --type-guide-color: var(--color-ink);
   --type-kim-color: var(--color-ink);

   /* --- Text-Stufen (Dark Mode) --- */
   --text-strong: #e2e8f0;
   --text-body: #d4d4d8;
   --text-secondary: #a1a1aa;
   --text-supporting: #94a3b8;
   --text-placeholder: #71717a;
   --text-disabled: #52525b;
   --text-muted-soft: #71717a;
   --text-faint: #52525b;
   --text-muted-strong: #a1a1aa;

   /* --- Hintergrund-Stufen (Dark Mode) --- */
   --bg-subtle: #1e1e22;
   --bg-soft: #27272a;
   --bg-neutral: #2a2a2e;
   --bg-muted: #303034;
   --bg-inset: #3f3f46;
   --bg-pressed: #52525b;
   --bg-dark: #0a0a0a;
   --bg-tooltip: #0f172a;
   --bg-badge-dark: #0f0f0f;
   --bg-progress-track: #3f3f46;

   /* --- Border-Stufen (Dark Mode) --- */
   --border-subtle: #3f3f46;
   --border-soft: #27272a;
   --border-light: #3f3f46;
   --border-lighter: #2a2a2e;
   --border-muted: #52525b;

   /* --- Status-Feedback (Dark Mode) --- */
   --status-success-bg: rgba(22, 163, 74, 0.15);
   --status-success-text: #86efac;
   --status-success-solid: #34d399;
   --status-success-accent: #4ade80;
   --status-error-bg: rgba(239, 68, 68, 0.15);
   --status-error-bg-light: rgba(239, 68, 68, 0.08);
   --status-error-text: #fca5a5;
   --status-error-solid: #f87171;
   --status-error-hover: #ef4444;
   --status-error-light: rgba(239, 68, 68, 0.2);
   --status-info-bg: rgba(59, 130, 246, 0.15);
   --status-info-text: #93c5fd;
   --status-info-solid: #60a5fa;

   /* --- Sektions-Akzentfarben (Dark Mode) --- */
   --accent-tipps-bg: rgba(22, 163, 74, 0.15);
   --accent-tipps-bg-soft: rgba(22, 163, 74, 0.25);
   --accent-tipps-text: #86efac;
   --accent-tipps-solid: #34d399;
   --accent-tipps-dark: #4ade80;

   --accent-projekte-bg: rgba(147, 51, 234, 0.15);
   --accent-projekte-text: #d8b4fe;
   --accent-projekte-solid: #a855f7;

   --accent-purple-solid: #a78bfa;
   --accent-purple-text: #c4b5fd;

   --accent-experten-bg: rgba(67, 56, 202, 0.15);
   --accent-experten-text: #a5b4fc;
   --accent-experten-solid: #6366f1;

   --accent-wegweiser-bg: rgba(3, 105, 161, 0.15);
   --accent-wegweiser-text: #7dd3fc;
   --accent-wegweiser-solid: #38bdf8;

   --accent-termine-bg: rgba(219, 39, 119, 0.15);
   --accent-termine-bg-soft: rgba(219, 39, 119, 0.25);
   --accent-termine-text: #f9a8d4;
   --accent-termine-solid: #f472b6;
   --accent-termine-date: rgba(219, 39, 119, 0.2);
   --accent-termine-text-soft: #f9a8d4;

   --accent-marktplatz-bg: rgba(217, 119, 6, 0.15);
   --accent-marktplatz-text: #fcd34d;
   --accent-marktplatz-solid: #fbbf24;
   --accent-marktplatz-text-strong: #fcd34d;

   --accent-kieztalk-bg: rgba(13, 148, 136, 0.15);
   --accent-kieztalk-text: #5eead4;
   --accent-kieztalk-solid: #2dd4bf;
   --accent-kieztalk-bg-light: rgba(13, 148, 136, 0.08);
   --accent-kieztalk-border: #2dd4bf;

   --accent-kim-solid: #34d399;
   --accent-kim-hover: #6ee7b7;
   --accent-kim-text: #86efac;
   --accent-kim-bg: rgba(22, 163, 74, 0.15);
   --accent-kim-bg-alt: rgba(16, 185, 129, 0.15);
   --accent-kim-border: #34d399;
   --accent-kim-bg-light: rgba(22, 163, 74, 0.08);
   --accent-kim-bg-gradient: linear-gradient(135deg, rgba(22, 163, 74, 0.08) 0%, rgba(22, 163, 74, 0.15) 100%);
   --accent-kim-action: #ff6b6b;
   --accent-kim-action-hover: #ff5252;

   /* --- Domain-spezifische Tokens (Dark Mode) --- */
   --mp-type-offer: #4ade80;
   --mp-type-lend: #22d3ee;
   --mp-type-swap: #a78bfa;

   --project-status-planning: #fde047;
   --project-status-done: #4ade80;

   --project-type-idea-solid: #fbbf24;
   --project-type-idea-text: #fcd34d;
   --project-type-discussion-text: #93c5fd;
   --project-type-initiative-text: #6ee7b7;
   --project-type-event-solid: #f472b6;
   --project-type-event-text: #f9a8d4;
   --project-type-help-solid: #a78bfa;
   --project-type-help-text: #c4b5fd;

   --btn-danger-bg: #991b1b;
   --btn-danger-hover: #b91c1c;

   --profile-blue: #60a5fa;
   --profile-blue-bg: rgba(25, 118, 210, 0.15);
   --profile-blue-text: #90caf9;
   --profile-pink-bg: rgba(194, 24, 91, 0.15);
   --profile-pink-text: #f48fb1;

   --editor-link-color: #b388ff;

   --kim-hint-border: #ffd54f;
   --kim-hint-text: #d7ccc8;
   --kim-hint-icon: #ffca28;

   --badge-orange-bg: rgba(234, 88, 12, 0.15);
   --badge-orange-text: #fdba74;
   --badge-help-bg: rgba(234, 179, 8, 0.15);
   --badge-news-bg: rgba(59, 130, 246, 0.15);
   --badge-recommendation-bg: rgba(22, 163, 74, 0.25);
   --badge-teal-text: #5eead4;

   --avatar-orange-text: #fb923c;

   --chat-user-msg-bg: #1d4ed8;
   --chat-user-msg-text: #ffffff;
}