diff --git a/BRAIN.md b/BRAIN.md
index f5710c9..52bb27e 100644
--- a/BRAIN.md
+++ b/BRAIN.md
@@ -5,34 +5,37 @@
 
 ## 🎨 1. Design-Tokens & Gemini-Dark-Theme (Copy & Paste)
 
-### Farbpalette (Strict Hex Values)
+### Farbpalette (Strict Hex Values - Google Gemini Material 3 Dark)
 ```css
-/* Backgrounds */
---bg-app:        #0b0f19;  /* Tiefstes Obsidian / OLED Base */
---bg-surface:    #131314;  /* Leicht erhobene Panels, Sidebar */
---bg-card:       #1e1f20;  /* Swipe-Karten, Dialoge, Dropdowns */
---bg-card-hover: #282a2c;  /* Hover-Zustände */
+/* Backgrounds (Material 3 Dark Theme) */
+--bg-canvas:     #131314;  /* Google Gemini Canvas */
+--bg-surface:    #1e1f20;  /* Surface Container (Karten, Dialoge, Panels) */
+--bg-elevated:   #282a2c;  /* Elevated Container / Tonal Chips / Hover */
+--bg-field:      #131314;  /* Input Field Fill */
 
 /* Borders & Dividers */
---border-subtle: rgba(255, 255, 255, 0.08); /* 1px Standard-Kante */
---border-focus:  rgba(138, 180, 248, 0.40); /* Gemini Blue Glow */
+--border-subtle: rgba(255, 255, 255, 0.08); /* 1px Hairline Kante */
+--border-focus:  rgba(168, 199, 250, 0.40); /* Gemini Primary Blue Hairline */
 
-/* Akzente & Status */
---accent-blue:   #8ab4f8;  /* Gemini Primärblau (Buttons, Links, Active) */
---accent-purple: #c58af9;  /* Gemini Voice / Magic Glow */
---swipe-keep:    #81c995;  /* Swipe Rechts (Behalten / ToDo / Success) */
---swipe-discard: #f28b82;  /* Swipe Links (Verwerfen / Archive / Danger) */
+/* Akzente & Status (Material 3 Soft Pastels - KEINE grellen AI-Farbverläufe) */
+--color-primary: #a8c7fa;  /* Google Gemini Primary Blue */
+--color-on-pri:  #041e49;  /* Text on Primary Container */
+--color-success: #a8dab5;  /* Soft Green (Check / Kept) */
+--color-danger:  #f28b82;  /* Soft Coral Red (Discard / Delete) */
+--color-warning: #fdd663;  /* Warm Amber */
 
 /* Typografie */
---text-primary:  #e3e3e3;  /* Haupttext (hoher Kontrast, augenschonend) */
---text-muted:    #9aa0a6;  /* Sekundärtexte, Metadaten, Placeholders */
---text-subtle:   #5f6368;  /* Timestamps, Footer, Deaktiviert */
+--text-primary:   #e3e3e3;  /* High Emphasis */
+--text-secondary: #c4c7c5;  /* Medium Emphasis */
+--text-muted:     #8e918f;  /* Low Emphasis / Subtle */
 ```
 
 ### UI-Regeln & Radien
-* **Buttons / Pills:** Ausnahmslos `rounded-full` (`border-radius: 9999px`).
-* **Karten (Triage Deck):** `rounded-3xl` (`24px`), Padding `p-6`, Border `1px solid var(--border-subtle)`.
-* **Input-Feld (Instant Capture):** `rounded-full`, Höhe `h-14` (56px) für mobile Daumenbedienung, Autofokus bei Mount.
+* **Keine grellen Farbverläufe:** Niemals Blau-zu-Lila-Gradienten wie billige AI-Templates. Strikte neutrale Anthrazit-Flächen mit sanften Pastell-Akzenten.
+* **Keine grellen Glow-Schatten:** Keine starken farbigen Drop-Shadows oder Neon-Glows. Feine `border: 1px solid rgba(255,255,255,0.08)` Hairlines nutzen.
+* **Buttons / Pills:** `rounded-full` (`border-radius: 9999px`) für Filter, Actions und Navigation.
+* **Karten:** `rounded-2xl` (`16px`) oder `rounded-3xl` (`24px`), Padding `p-5` bis `p-6`, Border `1px solid rgba(255, 255, 255, 0.08)`.
+* **Input-Feld (Instant Capture):** Prompt-Box-Stil wie Google Gemini, Höhe `h-14` (56px) für mobile Daumenbedienung, Autofokus bei Mount.
 * **Gesten-Physik (Framer Motion):**
   * Swipe-Schwellenwert: `dragConstraints={{ left: -150, right: 150 }}`
   * Spring-Config: `{ type: "spring", stiffness: 350, damping: 25 }`
diff --git a/docker-compose.yml b/docker-compose.yml
index 1d214ca..d257c66 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -3,7 +3,7 @@ services:
     build:
       context: .
       dockerfile: Dockerfile
-    image: git.dsit.me/sandrodach/mindsift:latest
+    image: git.dsit.me/sandrodach/mindsift:dev
     container_name: mindsift
     restart: unless-stopped
     ports:
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 62712e6..a5841e3 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -8,7 +8,6 @@ import {
   Brain,
   LogOut,
   User as UserIcon,
-  Sparkles,
 } from 'lucide-react';
 import { DashboardStats, SharedList, Thought, User } from './lib/types';
 import { api, clearToken, getToken } from './lib/api';
@@ -128,12 +127,9 @@ export const App: React.FC = () => {
   };
 
   return (
-    <div className="min-h-screen bg-[#0b0f19] text-[#e3e3e3] flex flex-col">
-      {/* Ambient Top Gemini Glow */}
-      <div className="pointer-events-none fixed top-0 left-1/2 -translate-x-1/2 w-[560px] h-[180px] bg-gradient-to-r from-[#8ab4f8]/10 via-[#c58af9]/10 to-[#81c995]/10 blur-3xl -z-10" />
-
+    <div className="min-h-screen bg-[#131314] text-[#e3e3e3] flex flex-col font-sans">
       {/* Header Bar */}
-      <header className="sticky top-0 z-30 backdrop-blur-xl bg-[#0b0f19]/85 border-b border-white/[0.06]">
+      <header className="sticky top-0 z-30 bg-[#131314]/95 backdrop-blur-md border-b border-white/[0.08]">
         <div className="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between gap-4">
           {/* Brand Logo */}
           <div
@@ -141,17 +137,17 @@ export const App: React.FC = () => {
               setActiveTab('triage');
               setCaptureFocusCount((c) => c + 1);
             }}
-            className="flex items-center gap-2.5 cursor-pointer group"
+            className="flex items-center gap-2.5 cursor-pointer group select-none"
           >
-            <div className="w-9 h-9 rounded-full bg-[#1e1f20] gemini-border flex items-center justify-center group-hover:border-[#8ab4f8]/50 transition-colors">
-              <Brain className="w-5 h-5 text-[#8ab4f8]" />
+            <div className="w-8 h-8 rounded-full bg-[#1e1f20] border border-white/[0.08] flex items-center justify-center group-hover:border-[#a8c7fa]/50 transition-colors">
+              <Brain className="w-4 h-4 text-[#a8c7fa]" />
             </div>
-            <div>
-              <span className="font-bold text-lg tracking-tight gemini-gradient-text">
+            <div className="flex items-baseline gap-2">
+              <span className="font-semibold text-base sm:text-lg text-[#e3e3e3] tracking-tight">
                 MindSift
               </span>
-              <span className="hidden md:inline-block ml-2.5 text-xs text-[#9aa0a6]">
-                Der Kopf frei in drei Sekunden.
+              <span className="hidden md:inline-block text-xs text-[#8e918f]">
+                Der Kopf frei in drei Sekunden
               </span>
             </div>
           </div>
@@ -160,10 +156,10 @@ export const App: React.FC = () => {
           <div className="flex items-center gap-2">
             <button
               onClick={() => setShowAuthModal(true)}
-              className="h-9 px-3.5 rounded-full bg-[#1e1f20] hover:bg-[#282a2c] gemini-border text-xs font-medium text-[#e3e3e3] flex items-center gap-2 transition-colors"
-              title="Benutzer wechseln oder Familienmitglied registrieren"
+              className="h-8 px-3 rounded-full bg-[#1e1f20] hover:bg-[#282a2c] border border-white/[0.08] text-xs font-normal text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-2 transition-colors"
+              title="Benutzer wechseln oder Profil anpassen"
             >
-              <UserIcon className="w-3.5 h-3.5 text-[#8ab4f8]" />
+              <UserIcon className="w-3.5 h-3.5 text-[#a8c7fa]" />
               <span>{user?.displayName || 'Lokal'}</span>
             </button>
           </div>
@@ -171,35 +167,29 @@ export const App: React.FC = () => {
       </header>
 
       {/* Main Content Container */}
-      <main className="flex-1 max-w-6xl w-full mx-auto px-4 sm:px-6 pt-6 pb-24">
-        {/* Global Instant Capture Section (Always Ready at Top) */}
-        <section className="mb-7">
+      <main className="flex-1 max-w-6xl w-full mx-auto px-4 sm:px-6 pt-6 pb-20">
+        {/* Global Instant Capture Section */}
+        <section className="mb-6">
           <InstantCaptureBar
             onCaptured={handleCaptured}
             autoFocusTrigger={captureFocusCount}
           />
         </section>
 
-        {/* Pill Navigation Tabs */}
-        <nav className="flex items-center justify-start sm:justify-center gap-2 overflow-x-auto pb-2 mb-8 no-scrollbar">
+        {/* Google Material 3 Navigation Chips */}
+        <nav className="flex items-center justify-start sm:justify-center gap-1.5 overflow-x-auto pb-2 mb-8 no-scrollbar">
           <button
             onClick={() => setActiveTab('triage')}
-            className={`h-11 px-5 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all ${
+            className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-colors ${
               activeTab === 'triage'
-                ? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold shadow-sm'
-                : 'bg-[#131314] hover:bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border'
+                ? 'bg-[#282a2c] text-[#e3e3e3] font-medium border border-white/[0.12]'
+                : 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20]'
             }`}
           >
-            <Layers className="w-4 h-4" />
+            <Layers className="w-4 h-4 text-[#a8c7fa]" />
             <span>Triage-Deck</span>
             {stats.inboxCount > 0 && (
-              <span
-                className={`px-2 py-0.5 rounded-full text-xs font-bold ${
-                  activeTab === 'triage'
-                    ? 'bg-[#0b0f19] text-[#8ab4f8]'
-                    : 'bg-[#8ab4f8]/20 text-[#8ab4f8]'
-                }`}
-              >
+              <span className="px-1.5 py-0.2 rounded-full text-[11px] bg-[#1e1f20] text-[#a8c7fa] border border-white/[0.06]">
                 {stats.inboxCount}
               </span>
             )}
@@ -207,22 +197,16 @@ export const App: React.FC = () => {
 
           <button
             onClick={() => setActiveTab('tasks')}
-            className={`h-11 px-5 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all ${
+            className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-colors ${
               activeTab === 'tasks'
-                ? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold shadow-sm'
-                : 'bg-[#131314] hover:bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border'
+                ? 'bg-[#282a2c] text-[#e3e3e3] font-medium border border-white/[0.12]'
+                : 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20]'
             }`}
           >
-            <CheckSquare className="w-4 h-4" />
+            <CheckSquare className="w-4 h-4 text-[#a8dab5]" />
             <span>Aufgaben</span>
             {stats.tasksOpenCount > 0 && (
-              <span
-                className={`px-2 py-0.5 rounded-full text-xs font-bold ${
-                  activeTab === 'tasks'
-                    ? 'bg-[#0b0f19] text-[#8ab4f8]'
-                    : 'bg-[#81c995]/20 text-[#81c995]'
-                }`}
-              >
+              <span className="px-1.5 py-0.2 rounded-full text-[11px] bg-[#1e1f20] text-[#a8dab5] border border-white/[0.06]">
                 {stats.tasksOpenCount}
               </span>
             )}
@@ -230,46 +214,40 @@ export const App: React.FC = () => {
 
           <button
             onClick={() => setActiveTab('workspace')}
-            className={`h-11 px-5 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all ${
+            className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-colors ${
               activeTab === 'workspace'
-                ? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold shadow-sm'
-                : 'bg-[#131314] hover:bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border'
+                ? 'bg-[#282a2c] text-[#e3e3e3] font-medium border border-white/[0.12]'
+                : 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20]'
             }`}
           >
-            <FileText className="w-4 h-4" />
+            <FileText className="w-4 h-4 text-[#a8c7fa]" />
             <span>Workspace</span>
-            <span
-              className={`px-2 py-0.5 rounded-full text-xs ${
-                activeTab === 'workspace'
-                  ? 'bg-[#0b0f19] text-[#8ab4f8]'
-                  : 'bg-[#1e1f20] text-[#9aa0a6]'
-              }`}
-            >
+            <span className="px-1.5 py-0.2 rounded-full text-[11px] bg-[#1e1f20] text-[#8e918f] border border-white/[0.06]">
               {stats.docsCount}
             </span>
           </button>
 
           <button
             onClick={() => setActiveTab('lists')}
-            className={`h-11 px-5 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all ${
+            className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-colors ${
               activeTab === 'lists'
-                ? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold shadow-sm'
-                : 'bg-[#131314] hover:bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border'
+                ? 'bg-[#282a2c] text-[#e3e3e3] font-medium border border-white/[0.12]'
+                : 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20]'
             }`}
           >
-            <ShoppingCart className="w-4 h-4" />
+            <ShoppingCart className="w-4 h-4 text-[#a8dab5]" />
             <span>Geteilte Listen</span>
           </button>
 
           <button
             onClick={() => setActiveTab('ecosystem')}
-            className={`h-11 px-5 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all ${
+            className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-colors ${
               activeTab === 'ecosystem'
-                ? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold shadow-sm'
-                : 'bg-[#131314] hover:bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border'
+                ? 'bg-[#282a2c] text-[#e3e3e3] font-medium border border-white/[0.12]'
+                : 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20]'
             }`}
           >
-            <Webhook className="w-4 h-4" />
+            <Webhook className="w-4 h-4 text-[#fdd663]" />
             <span>Webhooks & Export</span>
           </button>
         </nav>
@@ -312,29 +290,26 @@ export const App: React.FC = () => {
 
       {/* Account Switcher / Registration Modal */}
       {showAuthModal && (
-        <div className="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4">
-          <div className="w-full max-w-md p-6 sm:p-8 rounded-3xl bg-[#1e1f20] gemini-border shadow-card-depth">
+        <div className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4">
+          <div className="w-full max-w-md p-6 rounded-3xl bg-[#1e1f20] border border-[#3c4043] shadow-card">
             <div className="flex items-center justify-between mb-5">
-              <div className="flex items-center gap-2">
-                <Sparkles className="w-5 h-5 text-[#8ab4f8]" />
-                <h3 className="text-lg font-bold text-[#e3e3e3]">
-                  {authMode === 'login' ? 'Konto wechseln' : 'Neues Familien-Konto anlegen'}
-                </h3>
-              </div>
+              <h3 className="text-base font-semibold text-[#e3e3e3]">
+                {authMode === 'login' ? 'Konto wechseln' : 'Neues Familien-Konto anlegen'}
+              </h3>
               <button
                 onClick={() => setShowAuthModal(false)}
-                className="px-3 py-1 rounded-full bg-[#282a2c] text-xs text-[#9aa0a6] hover:text-[#e3e3e3]"
+                className="px-2.5 py-1 rounded-full bg-[#282a2c] text-xs text-[#c4c7c5] hover:text-[#e3e3e3]"
               >
                 Schließen
               </button>
             </div>
 
             {user && (
-              <div className="mb-5 p-3.5 rounded-2xl bg-[#131314] gemini-border flex items-center justify-between">
+              <div className="mb-4 p-3 rounded-2xl bg-[#131314] border border-white/[0.08] flex items-center justify-between">
                 <div className="text-xs">
-                  <span className="text-[#9aa0a6]">Aktuell aktiv: </span>
+                  <span className="text-[#8e918f]">Aktiv: </span>
                   <strong className="text-[#e3e3e3]">{user.displayName}</strong>
-                  <span className="text-[#5f6368] ml-1">({user.email})</span>
+                  <span className="text-[#8e918f] ml-1">({user.email})</span>
                 </div>
                 <button
                   type="button"
@@ -344,7 +319,7 @@ export const App: React.FC = () => {
                     await refreshAll();
                     setShowAuthModal(false);
                   }}
-                  className="text-xs text-[#8ab4f8] hover:underline flex items-center gap-1"
+                  className="text-xs text-[#a8c7fa] hover:underline flex items-center gap-1"
                 >
                   <LogOut className="w-3 h-3" /> Standard
                 </button>
@@ -355,10 +330,10 @@ export const App: React.FC = () => {
               <button
                 type="button"
                 onClick={() => setAuthMode('login')}
-                className={`flex-1 h-9 rounded-full text-xs font-semibold ${
+                className={`flex-1 h-8 rounded-full text-xs font-medium ${
                   authMode === 'login'
-                    ? 'bg-[#8ab4f8] text-[#0b0f19]'
-                    : 'bg-[#131314] text-[#9aa0a6]'
+                    ? 'bg-[#282a2c] text-[#e3e3e3] border border-white/[0.12]'
+                    : 'text-[#8e918f] hover:text-[#e3e3e3]'
                 }`}
               >
                 Anmelden
@@ -366,10 +341,10 @@ export const App: React.FC = () => {
               <button
                 type="button"
                 onClick={() => setAuthMode('register')}
-                className={`flex-1 h-9 rounded-full text-xs font-semibold ${
+                className={`flex-1 h-8 rounded-full text-xs font-medium ${
                   authMode === 'register'
-                    ? 'bg-[#8ab4f8] text-[#0b0f19]'
-                    : 'bg-[#131314] text-[#9aa0a6]'
+                    ? 'bg-[#282a2c] text-[#e3e3e3] border border-white/[0.12]'
+                    : 'text-[#8e918f] hover:text-[#e3e3e3]'
                 }`}
               >
                 Registrieren
@@ -383,7 +358,7 @@ export const App: React.FC = () => {
                   value={displayName}
                   onChange={(e) => setDisplayName(e.target.value)}
                   placeholder="Anzeigename (z. B. Lisa)"
-                  className="w-full h-11 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] gemini-border focus:outline-none"
+                  className="w-full h-10 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] placeholder-[#8e918f] border border-[#3c4043] focus:border-[#a8c7fa] focus:outline-none"
                   required
                 />
               )}
@@ -392,7 +367,7 @@ export const App: React.FC = () => {
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
                 placeholder="E-Mail-Adresse"
-                className="w-full h-11 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] gemini-border focus:outline-none"
+                className="w-full h-10 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] placeholder-[#8e918f] border border-[#3c4043] focus:border-[#a8c7fa] focus:outline-none"
                 required
               />
               <input
@@ -400,7 +375,7 @@ export const App: React.FC = () => {
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 placeholder="Passwort (mind. 4 Zeichen)"
-                className="w-full h-11 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] gemini-border focus:outline-none"
+                className="w-full h-10 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] placeholder-[#8e918f] border border-[#3c4043] focus:border-[#a8c7fa] focus:outline-none"
                 required
               />
 
@@ -408,9 +383,9 @@ export const App: React.FC = () => {
 
               <button
                 type="submit"
-                className="w-full h-11 rounded-full bg-[#8ab4f8] text-[#0b0f19] font-semibold text-sm hover:bg-[#a1c2fa] transition-colors"
+                className="w-full h-10 rounded-full bg-[#a8c7fa] text-[#041e49] font-medium text-sm hover:bg-[#b8d4ff] transition-colors"
               >
-                {authMode === 'login' ? 'Einloggen' : 'Konto erstellen & starten'}
+                {authMode === 'login' ? 'Einloggen' : 'Konto erstellen'}
               </button>
             </form>
           </div>
diff --git a/frontend/src/features/capture/InstantCaptureBar.tsx b/frontend/src/features/capture/InstantCaptureBar.tsx
index 8a32e82..e61874d 100644
--- a/frontend/src/features/capture/InstantCaptureBar.tsx
+++ b/frontend/src/features/capture/InstantCaptureBar.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Mic, MicOff, Send, Sparkles, Calendar, AlertTriangle, CheckCircle2 } from 'lucide-react';
+import { Mic, MicOff, ArrowUp, Sparkles, Calendar, Check } from 'lucide-react';
 import { PriorityLevel, Thought } from '../../lib/types';
 import { api, triggerHaptic } from '../../lib/api';
 
@@ -122,7 +122,7 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
       setDueDate('');
       setShowOptions(false);
       setJustSaved(true);
-      setTimeout(() => setJustSaved(false), 1800);
+      setTimeout(() => setJustSaved(false), 1600);
       onCaptured(created);
       inputRef.current?.focus();
     } finally {
@@ -133,20 +133,15 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
   return (
     <div className="w-full max-w-3xl mx-auto">
       <form onSubmit={handleSubmit} className="relative">
+        {/* Google Gemini Style Input Capsule */}
         <div
-          className={`flex items-center h-14 px-4 sm:px-5 rounded-full bg-[#1e1f20] gemini-border gemini-input-glow transition-all duration-200 ${
-            isListening ? 'border-[#c58af9] shadow-purple-glow' : ''
+          className={`flex items-center h-14 px-4 sm:px-5 rounded-full bg-[#1e1f20] border transition-colors duration-150 ${
+            isListening
+              ? 'border-[#a8c7fa] bg-[#1e1f20]'
+              : 'border-[#3c4043] focus-within:border-[#a8c7fa]'
           }`}
         >
-          <Sparkles
-            className={`w-5 h-5 mr-3 flex-shrink-0 transition-colors ${
-              isListening
-                ? 'text-[#c58af9] animate-pulse'
-                : justSaved
-                ? 'text-[#81c995]'
-                : 'text-[#8ab4f8]'
-            }`}
-          />
+          <Sparkles className="w-4 h-4 mr-3 flex-shrink-0 text-[#a8c7fa]" />
 
           <input
             ref={inputRef}
@@ -155,10 +150,10 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
             onChange={(e) => setContent(e.target.value)}
             placeholder={
               isListening
-                ? 'Ich höre zu… sprich deinen Gedanken aus'
+                ? 'Ich höre zu…'
                 : 'Gedanke, Idee oder Zutat sofort festhalten… (Taste C oder /)'
             }
-            className="w-full bg-transparent text-[#e3e3e3] placeholder-[#9aa0a6] text-sm sm:text-base focus:outline-none"
+            className="w-full bg-transparent text-[#e3e3e3] placeholder-[#8e918f] text-sm sm:text-base focus:outline-none"
             autoComplete="off"
           />
 
@@ -167,11 +162,11 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
             <button
               type="button"
               onClick={() => setShowOptions((prev) => !prev)}
-              title="Priorität & Fälligkeitsdatum"
-              className={`h-9 px-3 rounded-full text-xs font-medium flex items-center gap-1.5 transition-colors ${
+              title="Priorität & Fälligkeit"
+              className={`h-8 px-2.5 rounded-full text-xs flex items-center gap-1.5 transition-colors ${
                 showOptions || priority !== 'normal' || dueDate
-                  ? 'bg-[#8ab4f8]/20 text-[#8ab4f8] border border-[#8ab4f8]/40'
-                  : 'text-[#9aa0a6] hover:bg-[#282a2c] hover:text-[#e3e3e3]'
+                  ? 'bg-[#282a2c] text-[#a8c7fa] border border-[#a8c7fa]/30'
+                  : 'text-[#8e918f] hover:text-[#e3e3e3] hover:bg-[#282a2c]'
               }`}
             >
               <Calendar className="w-3.5 h-3.5" />
@@ -180,39 +175,39 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
               </span>
             </button>
 
-            {/* Voice Dictation Pill Button */}
+            {/* Voice Dictation Button */}
             <button
               type="button"
               onClick={toggleVoiceDictation}
-              title="Spracheingabe (Diktieren)"
-              className={`w-9 h-9 rounded-full flex items-center justify-center transition-all ${
+              title="Spracheingabe"
+              className={`w-8 h-8 rounded-full flex items-center justify-center transition-colors ${
                 isListening
-                  ? 'bg-[#c58af9] text-[#0b0f19] animate-pulse'
-                  : 'bg-[#282a2c] text-[#9aa0a6] hover:text-[#e3e3e3] hover:bg-[#323538]'
+                  ? 'bg-[#004a77]/50 text-[#a8c7fa]'
+                  : 'text-[#8e918f] hover:text-[#e3e3e3] hover:bg-[#282a2c]'
               }`}
             >
               {isListening ? <MicOff className="w-4 h-4" /> : <Mic className="w-4 h-4" />}
             </button>
 
-            {/* Instant Send Pill Button */}
+            {/* Instant Send Button */}
             <button
               type="submit"
               disabled={!content.trim() || isSubmitting}
-              className={`h-9 px-4 rounded-full font-medium text-xs sm:text-sm flex items-center gap-1.5 transition-all ${
+              className={`h-8 px-3.5 rounded-full font-medium text-xs flex items-center gap-1.5 transition-colors ${
                 content.trim()
-                  ? 'bg-[#8ab4f8] text-[#0b0f19] hover:bg-[#a1c2fa] shadow-sm cursor-pointer'
-                  : 'bg-[#282a2c] text-[#5f6368] cursor-not-allowed'
+                  ? 'bg-[#a8c7fa] text-[#041e49] hover:bg-[#b8d4ff] cursor-pointer'
+                  : 'bg-[#282a2c] text-[#8e918f] cursor-not-allowed'
               }`}
             >
               {justSaved ? (
                 <>
-                  <CheckCircle2 className="w-4 h-4 text-[#0b0f19]" />
+                  <Check className="w-3.5 h-3.5" />
                   <span className="hidden sm:inline">Gespeichert</span>
                 </>
               ) : (
                 <>
-                  <Send className="w-3.5 h-3.5" />
-                  <span className="hidden sm:inline">Einfrieren</span>
+                  <ArrowUp className="w-3.5 h-3.5" />
+                  <span className="hidden sm:inline">Sichern</span>
                 </>
               )}
             </button>
@@ -221,10 +216,9 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
 
         {/* Expandable Quick Metadata Pills */}
         {showOptions && (
-          <div className="mt-2.5 px-4 py-2.5 rounded-full bg-[#131314] gemini-border flex flex-wrap items-center justify-between gap-2 text-xs animate-fadeIn">
+          <div className="mt-2 px-4 py-2.5 rounded-2xl bg-[#1e1f20] border border-[#3c4043] flex flex-wrap items-center justify-between gap-2 text-xs">
             <div className="flex items-center gap-1.5">
-              <AlertTriangle className="w-3.5 h-3.5 text-[#9aa0a6] mr-1" />
-              <span className="text-[#9aa0a6] mr-1">Priorität:</span>
+              <span className="text-[#8e918f] mr-1">Priorität:</span>
               {(['low', 'normal', 'high', 'urgent'] as PriorityLevel[]).map((p) => {
                 const labels: Record<PriorityLevel, string> = {
                   low: 'Niedrig',
@@ -241,9 +235,9 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
                     className={`px-3 py-1 rounded-full transition-colors ${
                       active
                         ? p === 'urgent'
-                          ? 'bg-[#f28b82] text-[#0b0f19] font-semibold'
-                          : 'bg-[#8ab4f8] text-[#0b0f19] font-semibold'
-                        : 'bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3]'
+                          ? 'bg-[#f28b82]/20 text-[#f28b82] border border-[#f28b82]/40 font-medium'
+                          : 'bg-[#282a2c] text-[#a8c7fa] border border-[#a8c7fa]/30 font-medium'
+                        : 'bg-[#131314] text-[#8e918f] hover:text-[#e3e3e3]'
                     }`}
                   >
                     {labels[p]}
@@ -253,12 +247,12 @@ export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
             </div>
 
             <div className="flex items-center gap-2">
-              <span className="text-[#9aa0a6]">Fällig am:</span>
+              <span className="text-[#8e918f]">Fällig am:</span>
               <input
                 type="date"
                 value={dueDate}
                 onChange={(e) => setDueDate(e.target.value)}
-                className="bg-[#1e1f20] text-[#e3e3e3] px-3 py-1 rounded-full gemini-border text-xs focus:outline-none focus:border-[#8ab4f8]"
+                className="bg-[#131314] text-[#e3e3e3] px-3 py-1 rounded-full border border-[#3c4043] text-xs focus:outline-none focus:border-[#a8c7fa]"
               />
             </div>
           </div>
diff --git a/frontend/src/features/lists/SharedListsView.tsx b/frontend/src/features/lists/SharedListsView.tsx
index 5301c04..87a6733 100644
--- a/frontend/src/features/lists/SharedListsView.tsx
+++ b/frontend/src/features/lists/SharedListsView.tsx
@@ -266,16 +266,16 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
   return (
     <div className="max-w-4xl mx-auto space-y-6">
       {/* Top Space Bar & Realtime Indicator */}
-      <div className="p-4 sm:p-5 rounded-3xl bg-[#1e1f20] gemini-border flex flex-wrap items-center justify-between gap-3">
+      <div className="p-4 sm:p-5 rounded-2xl bg-[#1e1f20] border border-white/[0.08] flex flex-wrap items-center justify-between gap-3">
         <div className="flex flex-wrap items-center gap-2">
           {spaces.map((sp) => (
             <button
               key={sp.id}
               onClick={() => setActiveSpace(sp)}
-              className={`h-10 px-4 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 transition-all ${
+              className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 transition-colors ${
                 activeSpace?.id === sp.id
-                  ? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold shadow-sm'
-                  : 'bg-[#131314] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border'
+                  ? 'bg-[#282a2c] text-[#a8c7fa] border border-[#a8c7fa]/30'
+                  : 'bg-[#131314] text-[#c4c7c5] hover:text-[#e3e3e3] border border-white/[0.08]'
               }`}
             >
               <span>{sp.icon}</span>
@@ -285,16 +285,16 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
 
           <button
             onClick={() => setShowNewSpaceModal((prev) => !prev)}
-            className="h-10 px-3.5 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#8ab4f8] flex items-center gap-1"
+            className="h-9 px-3.5 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
           >
-            <Plus className="w-3.5 h-3.5" /> Space
+            <Plus className="w-3.5 h-3.5 text-[#a8c7fa]" /> Space
           </button>
 
           <button
             onClick={() => setShowJoinModal((prev) => !prev)}
-            className="h-10 px-3.5 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#c58af9] flex items-center gap-1"
+            className="h-9 px-3.5 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
           >
-            <UserPlus className="w-3.5 h-3.5" /> Code einlösen
+            <UserPlus className="w-3.5 h-3.5 text-[#a8c7fa]" /> Code einlösen
           </button>
         </div>
 
@@ -304,8 +304,8 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
             <div
               className={`h-8 px-3 rounded-full text-xs flex items-center gap-1.5 ${
                 wsConnected
-                  ? 'bg-[#81c995]/15 text-[#81c995] border border-[#81c995]/30'
-                  : 'bg-[#282a2c] text-[#9aa0a6]'
+                  ? 'bg-[#a8dab5]/10 text-[#a8dab5] border border-[#a8dab5]/25'
+                  : 'bg-[#282a2c] text-[#8e918f] border border-white/[0.08]'
               }`}
             >
               <Radio className={`w-3.5 h-3.5 ${wsConnected ? 'animate-pulse' : ''}`} />
@@ -315,14 +315,14 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
             <button
               onClick={copyInviteCode}
               title="Einladungscode für Partner oder Familie kopieren"
-              className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3] flex items-center gap-1.5"
+              className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
             >
-              <Users className="w-3.5 h-3.5 text-[#8ab4f8]" />
+              <Users className="w-3.5 h-3.5 text-[#a8c7fa]" />
               <span>Code: {activeSpace.inviteCode}</span>
               {copiedInvite ? (
-                <Check className="w-3.5 h-3.5 text-[#81c995]" />
+                <Check className="w-3.5 h-3.5 text-[#a8dab5]" />
               ) : (
-                <Copy className="w-3 h-3 text-[#9aa0a6]" />
+                <Copy className="w-3 h-3 text-[#8e918f]" />
               )}
             </button>
           </div>
@@ -333,19 +333,19 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
       {showNewSpaceModal && (
         <form
           onSubmit={handleCreateSpace}
-          className="p-4 rounded-3xl bg-[#131314] gemini-border flex items-center gap-3"
+          className="p-4 rounded-2xl bg-[#1e1f20] border border-white/[0.08] flex items-center gap-3"
         >
           <input
             type="text"
             value={newSpaceName}
             onChange={(e) => setNewSpaceName(e.target.value)}
-            placeholder="Name des neuen Familien-/Team-Spaces (z. B. Sommerurlaub 2027)…"
-            className="flex-1 h-10 px-4 rounded-full bg-[#1e1f20] text-sm text-[#e3e3e3] gemini-border focus:outline-none"
+            placeholder="Name des neuen Familien-/Team-Spaces (z. B. Urlaub 2026)…"
+            className="flex-1 h-10 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] placeholder-[#8e918f] border border-white/[0.08] focus:outline-none focus:border-[#a8c7fa] transition-colors"
             autoFocus
           />
           <button
             type="submit"
-            className="h-10 px-5 rounded-full bg-[#8ab4f8] text-[#0b0f19] font-semibold text-xs sm:text-sm"
+            className="h-10 px-5 rounded-full bg-[#a8c7fa] text-[#041e49] font-medium text-xs sm:text-sm hover:bg-[#c2e7ff] transition-colors"
           >
             Space anlegen
           </button>
@@ -355,19 +355,19 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
       {showJoinModal && (
         <form
           onSubmit={handleJoinSpace}
-          className="p-4 rounded-3xl bg-[#131314] gemini-border flex items-center gap-3"
+          className="p-4 rounded-2xl bg-[#1e1f20] border border-white/[0.08] flex items-center gap-3"
         >
           <input
             type="text"
             value={joinCode}
             onChange={(e) => setJoinCode(e.target.value)}
             placeholder="Invite-Code des Partners eingeben…"
-            className="flex-1 h-10 px-4 rounded-full bg-[#1e1f20] text-sm text-[#e3e3e3] gemini-border focus:outline-none uppercase"
+            className="flex-1 h-10 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] placeholder-[#8e918f] border border-white/[0.08] focus:outline-none focus:border-[#a8c7fa] uppercase transition-colors"
             autoFocus
           />
           <button
             type="submit"
-            className="h-10 px-5 rounded-full bg-[#c58af9] text-[#0b0f19] font-semibold text-xs sm:text-sm"
+            className="h-10 px-5 rounded-full bg-[#a8c7fa] text-[#041e49] font-medium text-xs sm:text-sm hover:bg-[#c2e7ff] transition-colors"
           >
             Beitreten
           </button>
@@ -383,15 +383,15 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
             <button
               key={lst.id}
               onClick={() => setActiveListId(lst.id)}
-              className={`h-11 px-5 rounded-full text-sm font-medium flex items-center gap-2 transition-all ${
+              className={`h-10 px-4 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 transition-colors ${
                 isSelected
-                  ? 'bg-[#1e1f20] text-[#8ab4f8] border border-[#8ab4f8]/50 shadow-gemini-glow'
-                  : 'bg-[#131314] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border'
+                  ? 'bg-[#282a2c] text-[#e3e3e3] border border-white/[0.12]'
+                  : 'bg-[#131314] text-[#c4c7c5] hover:text-[#e3e3e3] border border-white/[0.08]'
               }`}
             >
               <span>{lst.icon}</span>
               <span>{lst.title}</span>
-              <span className="px-2 py-0.5 rounded-full bg-[#0b0f19] text-xs text-[#8ab4f8]">
+              <span className="px-2 py-0.2 rounded-full bg-[#131314] text-xs text-[#a8c7fa] border border-white/[0.06]">
                 {openCount}
               </span>
             </button>
@@ -400,9 +400,9 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
 
         <button
           onClick={() => setShowNewListModal((prev) => !prev)}
-          className="h-11 px-4 rounded-full bg-[#131314] hover:bg-[#1e1f20] gemini-border text-xs sm:text-sm text-[#e3e3e3] flex items-center gap-1.5"
+          className="h-10 px-4 rounded-full bg-[#131314] hover:bg-[#1e1f20] border border-white/[0.08] text-xs sm:text-sm text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
         >
-          <Plus className="w-4 h-4 text-[#8ab4f8]" />
+          <Plus className="w-4 h-4 text-[#a8c7fa]" />
           <span>Neue Liste</span>
         </button>
       </div>
@@ -410,7 +410,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
       {showNewListModal && (
         <form
           onSubmit={handleCreateList}
-          className="p-4 rounded-3xl bg-[#131314] gemini-border flex flex-wrap items-center gap-3"
+          className="p-4 rounded-2xl bg-[#1e1f20] border border-white/[0.08] flex flex-wrap items-center gap-3"
         >
           <div className="flex items-center gap-1.5">
             {['🛒', '🏔️', '🍕', '🎉', '🧰', '🎁'].map((ic) => (
@@ -418,8 +418,10 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
                 key={ic}
                 type="button"
                 onClick={() => setNewListIcon(ic)}
-                className={`w-9 h-9 rounded-full flex items-center justify-center ${
-                  newListIcon === ic ? 'bg-[#8ab4f8]/25 border border-[#8ab4f8]' : 'bg-[#1e1f20]'
+                className={`w-9 h-9 rounded-full flex items-center justify-center transition-colors ${
+                  newListIcon === ic
+                    ? 'bg-[#a8c7fa]/20 border border-[#a8c7fa]/40 text-[#a8c7fa]'
+                    : 'bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08]'
                 }`}
               >
                 {ic}
@@ -431,12 +433,12 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
             value={newListTitle}
             onChange={(e) => setNewListTitle(e.target.value)}
             placeholder="Titel der Liste (z. B. Baumarkt, Drogerie, Camping)…"
-            className="flex-1 h-10 px-4 rounded-full bg-[#1e1f20] text-sm text-[#e3e3e3] gemini-border focus:outline-none"
+            className="flex-1 h-10 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] placeholder-[#8e918f] border border-white/[0.08] focus:outline-none focus:border-[#a8c7fa] transition-colors"
             autoFocus
           />
           <button
             type="submit"
-            className="h-10 px-5 rounded-full bg-[#8ab4f8] text-[#0b0f19] font-semibold text-xs sm:text-sm"
+            className="h-10 px-5 rounded-full bg-[#a8c7fa] text-[#041e49] font-medium text-xs sm:text-sm hover:bg-[#c2e7ff] transition-colors"
           >
             Liste erstellen
           </button>
@@ -445,7 +447,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
 
       {/* Active Shared List Card */}
       {activeList ? (
-        <div className="p-6 sm:p-8 rounded-3xl bg-[#1e1f20] gemini-border shadow-card-depth">
+        <div className="p-6 sm:p-8 rounded-2xl bg-[#1e1f20] border border-white/[0.08]">
           {/* Quick-Add Pill Form */}
           <form onSubmit={handleAddItem} className="space-y-3 mb-6">
             <div className="flex flex-col sm:flex-row gap-2.5">
@@ -454,7 +456,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
                 value={newItemText}
                 onChange={(e) => setNewItemText(e.target.value)}
                 placeholder={`Eintrag zu "${activeList.title}" hinzufügen (z. B. Hafermilch)…`}
-                className="flex-1 h-12 px-5 rounded-full bg-[#131314] text-sm sm:text-base text-[#e3e3e3] placeholder-[#9aa0a6] gemini-border focus:outline-none focus:border-[#8ab4f8]"
+                className="flex-1 h-11 px-5 rounded-full bg-[#131314] text-sm sm:text-base text-[#e3e3e3] placeholder-[#8e918f] border border-white/[0.08] focus:outline-none focus:border-[#a8c7fa] transition-colors"
               />
               <div className="flex gap-2">
                 <input
@@ -462,12 +464,12 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
                   value={newItemQty}
                   onChange={(e) => setNewItemQty(e.target.value)}
                   placeholder="Menge (z.B. 2x)"
-                  className="w-32 h-12 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] placeholder-[#9aa0a6] gemini-border focus:outline-none focus:border-[#8ab4f8]"
+                  className="w-32 h-11 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] placeholder-[#8e918f] border border-white/[0.08] focus:outline-none focus:border-[#a8c7fa] transition-colors"
                 />
                 <button
                   type="submit"
                   disabled={!newItemText.trim()}
-                  className="h-12 px-6 rounded-full bg-[#8ab4f8] disabled:bg-[#282a2c] text-[#0b0f19] disabled:text-[#5f6368] font-semibold text-sm flex items-center gap-1.5 transition-colors"
+                  className="h-11 px-5 rounded-full bg-[#a8c7fa] disabled:bg-[#282a2c] text-[#041e49] disabled:text-[#8e918f] font-medium text-sm flex items-center gap-1.5 hover:bg-[#c2e7ff] transition-colors"
                 >
                   <Plus className="w-4 h-4" />
                   <span>Hinzufügen</span>
@@ -477,7 +479,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
 
             {/* Category Quick-Select Pills */}
             <div className="flex flex-wrap items-center gap-1.5">
-              <span className="text-xs text-[#9aa0a6] mr-1">Kategorie:</span>
+              <span className="text-xs text-[#8e918f] mr-1">Kategorie:</span>
               {CATEGORIES.map((cat) => (
                 <button
                   key={cat}
@@ -485,8 +487,8 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
                   onClick={() => setNewItemCategory((prev) => (prev === cat ? '' : cat))}
                   className={`px-3 py-1 rounded-full text-xs transition-colors ${
                     newItemCategory === cat
-                      ? 'bg-[#8ab4f8]/20 text-[#8ab4f8] border border-[#8ab4f8]/40'
-                      : 'bg-[#131314] text-[#9aa0a6] hover:text-[#e3e3e3]'
+                      ? 'bg-[#a8c7fa]/15 text-[#a8c7fa] border border-[#a8c7fa]/25 font-medium'
+                      : 'bg-[#131314] text-[#8e918f] hover:text-[#c4c7c5] border border-white/[0.08]'
                   }`}
                 >
                   {cat}
@@ -498,29 +500,29 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
           {/* Open Items */}
           <div className="space-y-2">
             {openItems.length === 0 ? (
-              <div className="py-8 text-center text-[#9aa0a6] text-sm flex flex-col items-center gap-2">
-                <Sparkles className="w-6 h-6 text-[#81c995]" />
-                <span>Alles erledigt! Keine offenen Punkte auf dieser Liste.</span>
+              <div className="py-8 text-center text-[#8e918f] text-sm flex flex-col items-center gap-2">
+                <Sparkles className="w-5 h-5 text-[#a8dab5]" />
+                <span>Alles erledigt. Keine offenen Punkte auf dieser Liste.</span>
               </div>
             ) : (
               openItems.map((item) => (
                 <div
                   key={item.id}
                   onClick={() => handleToggleItem(item)}
-                  className="p-4 rounded-2xl bg-[#131314] hover:bg-[#242628] gemini-border flex items-center justify-between gap-3 cursor-pointer transition-all active:scale-[0.99]"
+                  className="p-3.5 sm:p-4 rounded-2xl bg-[#131314] hover:bg-[#282a2c]/60 border border-white/[0.08] flex items-center justify-between gap-3 cursor-pointer transition-colors group"
                 >
                   <div className="flex items-center gap-3.5 min-w-0">
-                    <Circle className="w-5 h-5 text-[#8ab4f8] flex-shrink-0" />
-                    <span className="text-base font-medium text-[#e3e3e3] truncate">
+                    <Circle className="w-5 h-5 text-[#8e918f] group-hover:text-[#a8c7fa] flex-shrink-0 transition-colors" />
+                    <span className="text-sm sm:text-base font-normal text-[#e3e3e3] truncate">
                       {item.content}
                     </span>
                     {item.quantity && (
-                      <span className="px-2.5 py-0.5 rounded-full bg-[#1e1f20] text-[#8ab4f8] text-xs font-medium">
+                      <span className="px-2.5 py-0.5 rounded-full bg-[#1e1f20] text-[#a8c7fa] border border-white/[0.06] text-xs font-medium">
                         {item.quantity}
                       </span>
                     )}
                     {item.category && (
-                      <span className="hidden sm:inline px-2.5 py-0.5 rounded-full bg-[#1e1f20] text-[#9aa0a6] text-xs">
+                      <span className="hidden sm:inline px-2.5 py-0.5 rounded-full bg-[#1e1f20] text-[#8e918f] text-xs">
                         {item.category}
                       </span>
                     )}
@@ -532,7 +534,7 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
                       e.stopPropagation();
                       handleDeleteItem(item.id);
                     }}
-                    className="w-8 h-8 rounded-full hover:bg-[#f28b82]/20 text-[#5f6368] hover:text-[#f28b82] flex items-center justify-center"
+                    className="w-8 h-8 rounded-full hover:bg-[#f28b82]/20 text-[#8e918f] hover:text-[#f28b82] flex items-center justify-center transition-colors"
                   >
                     <Trash2 className="w-3.5 h-3.5" />
                   </button>
@@ -545,35 +547,35 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
           {completedItems.length > 0 && (
             <div className="mt-8 pt-6 border-t border-white/[0.06]">
               <div className="flex items-center justify-between mb-3">
-                <span className="text-xs font-semibold uppercase tracking-wider text-[#9aa0a6]">
+                <span className="text-xs font-medium uppercase tracking-wider text-[#8e918f]">
                   Bereits im Einkaufswagen / Erledigt ({completedItems.length})
                 </span>
                 <button
                   onClick={handleClearCompleted}
-                  className="px-3.5 py-1 rounded-full bg-[#131314] hover:bg-[#f28b82]/20 text-xs text-[#9aa0a6] hover:text-[#f28b82] transition-colors"
+                  className="px-3.5 py-1 rounded-full bg-[#131314] hover:bg-[#f28b82]/15 border border-white/[0.08] text-xs text-[#8e918f] hover:text-[#f28b82] transition-colors"
                 >
                   Erledigte aufräumen
                 </button>
               </div>
 
-              <div className="space-y-2 opacity-70">
+              <div className="space-y-1.5 opacity-75">
                 {completedItems.map((item) => (
                   <div
                     key={item.id}
                     onClick={() => handleToggleItem(item)}
-                    className="p-3.5 rounded-2xl bg-[#131314]/60 gemini-border flex items-center justify-between gap-3 cursor-pointer"
+                    className="p-3 rounded-2xl bg-[#131314]/50 border border-white/[0.04] hover:bg-[#131314]/80 flex items-center justify-between gap-3 cursor-pointer transition-colors"
                   >
                     <div className="flex items-center gap-3 min-w-0">
-                      <CheckCircle2 className="w-5 h-5 text-[#81c995] flex-shrink-0" />
-                      <span className="text-sm text-[#9aa0a6] line-through truncate">
+                      <CheckCircle2 className="w-5 h-5 text-[#a8dab5] flex-shrink-0" />
+                      <span className="text-sm text-[#8e918f] line-through truncate">
                         {item.content}
                       </span>
                       {item.quantity && (
-                        <span className="text-xs text-[#5f6368]">({item.quantity})</span>
+                        <span className="text-xs text-[#8e918f]">({item.quantity})</span>
                       )}
                     </div>
                     {item.completedByName && (
-                      <span className="text-xs text-[#5f6368]">✓ {item.completedByName}</span>
+                      <span className="text-xs text-[#8e918f]">✓ {item.completedByName}</span>
                     )}
                   </div>
                 ))}
diff --git a/frontend/src/features/settings/EcosystemView.tsx b/frontend/src/features/settings/EcosystemView.tsx
index 5c6ddb5..0814448 100644
--- a/frontend/src/features/settings/EcosystemView.tsx
+++ b/frontend/src/features/settings/EcosystemView.tsx
@@ -94,16 +94,16 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
   return (
     <div className="max-w-4xl mx-auto space-y-6">
       {/* Section 1: API Keys for Smarthome & Automation */}
-      <div className="p-6 sm:p-8 rounded-3xl bg-[#1e1f20] gemini-border shadow-card-depth">
+      <div className="p-6 sm:p-8 rounded-2xl bg-[#1e1f20] border border-white/[0.08]">
         <div className="flex items-center gap-3 mb-2">
-          <div className="w-10 h-10 rounded-full bg-[#8ab4f8]/15 flex items-center justify-center">
-            <Key className="w-5 h-5 text-[#8ab4f8]" />
+          <div className="w-10 h-10 rounded-full bg-[#a8c7fa]/15 flex items-center justify-center">
+            <Key className="w-5 h-5 text-[#a8c7fa]" />
           </div>
           <div>
-            <h3 className="text-lg font-bold text-[#e3e3e3]">
+            <h3 className="text-lg font-medium text-[#e3e3e3]">
               Webhooks & Ingestion API-Schlüssel
             </h3>
-            <p className="text-xs sm:text-sm text-[#9aa0a6]">
+            <p className="text-xs sm:text-sm text-[#8e918f]">
               Verbinde Home Assistant, Zigbee2MQTT, n8n oder eigene Cronjobs direkt mit deiner MindSift Inbox.
             </p>
           </div>
@@ -115,11 +115,11 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
             value={newKeyName}
             onChange={(e) => setNewKeyName(e.target.value)}
             placeholder="Bezeichnung (z. B. Home Assistant, Proxmox Backup, Rauchmelder)…"
-            className="flex-1 h-11 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] placeholder-[#9aa0a6] gemini-border focus:outline-none focus:border-[#8ab4f8]"
+            className="flex-1 h-11 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] placeholder-[#8e918f] border border-white/[0.08] focus:outline-none focus:border-[#a8c7fa] transition-colors"
           />
           <button
             type="submit"
-            className="h-11 px-6 rounded-full bg-[#8ab4f8] text-[#0b0f19] font-semibold text-sm flex items-center justify-center gap-1.5 hover:bg-[#a1c2fa] transition-colors"
+            className="h-11 px-6 rounded-full bg-[#a8c7fa] text-[#041e49] font-medium text-sm flex items-center justify-center gap-1.5 hover:bg-[#c2e7ff] transition-colors"
           >
             <Plus className="w-4 h-4" />
             <span>API-Key erzeugen</span>
@@ -127,9 +127,9 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
         </form>
 
         {newlyCreatedKey && (
-          <div className="mt-4 p-4 rounded-2xl bg-[#81c995]/15 border border-[#81c995]/40 flex flex-wrap items-center justify-between gap-3">
+          <div className="mt-4 p-4 rounded-2xl bg-[#a8dab5]/10 border border-[#a8dab5]/30 flex flex-wrap items-center justify-between gap-3">
             <div className="min-w-0">
-              <p className="text-xs font-semibold text-[#81c995] mb-1">
+              <p className="text-xs font-medium text-[#a8dab5] mb-1">
                 Neuer API-Schlüssel erstellt (bitte jetzt kopieren):
               </p>
               <code className="text-xs sm:text-sm font-mono text-[#e3e3e3] break-all">
@@ -138,7 +138,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
             </div>
             <button
               onClick={() => handleCopy(newlyCreatedKey)}
-              className="h-9 px-4 rounded-full bg-[#81c995] text-[#0b0f19] font-semibold text-xs flex items-center gap-1.5"
+              className="h-9 px-4 rounded-full bg-[#a8dab5] text-[#041e49] font-medium text-xs flex items-center gap-1.5 hover:bg-[#c2e7ff] transition-colors"
             >
               {copiedKey ? <Check className="w-3.5 h-3.5" /> : <Copy className="w-3.5 h-3.5" />}
               <span>{copiedKey ? 'Kopiert!' : 'Key kopieren'}</span>
@@ -149,27 +149,27 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
         {/* Active Keys List */}
         <div className="mt-5 space-y-2">
           {keys.length === 0 ? (
-            <p className="text-xs text-[#5f6368] py-2">
+            <p className="text-xs text-[#8e918f] py-2">
               Noch keine dedizierten API-Schlüssel hinterlegt.
             </p>
           ) : (
             keys.map((k) => (
               <div
                 key={k.id}
-                className="p-3.5 rounded-2xl bg-[#131314] gemini-border flex items-center justify-between gap-3"
+                className="p-3.5 rounded-2xl bg-[#131314] border border-white/[0.08] flex items-center justify-between gap-3"
               >
                 <div>
                   <span className="text-sm font-medium text-[#e3e3e3]">{k.name}</span>
-                  <span className="ml-3 text-xs font-mono text-[#8ab4f8]">{k.keyPrefix}</span>
+                  <span className="ml-3 text-xs font-mono text-[#a8c7fa]">{k.keyPrefix}</span>
                   {k.lastUsedAt && (
-                    <span className="ml-3 text-xs text-[#5f6368]">
+                    <span className="ml-3 text-xs text-[#8e918f]">
                       Zuletzt genutzt: {new Date(k.lastUsedAt).toLocaleDateString('de-DE')}
                     </span>
                   )}
                 </div>
                 <button
                   onClick={() => handleDeleteKey(k.id)}
-                  className="w-8 h-8 rounded-full hover:bg-[#f28b82]/20 text-[#9aa0a6] hover:text-[#f28b82] flex items-center justify-center"
+                  className="w-8 h-8 rounded-full hover:bg-[#f28b82]/20 text-[#8e918f] hover:text-[#f28b82] flex items-center justify-center transition-colors"
                 >
                   <Trash2 className="w-3.5 h-3.5" />
                 </button>
@@ -180,16 +180,16 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
       </div>
 
       {/* Section 2: Interactive Smarthome Webhook Simulator */}
-      <div className="p-6 sm:p-8 rounded-3xl bg-[#1e1f20] gemini-border shadow-card-depth">
+      <div className="p-6 sm:p-8 rounded-2xl bg-[#1e1f20] border border-white/[0.08]">
         <div className="flex items-center gap-3 mb-4">
-          <div className="w-10 h-10 rounded-full bg-[#c58af9]/15 flex items-center justify-center">
-            <Webhook className="w-5 h-5 text-[#c58af9]" />
+          <div className="w-10 h-10 rounded-full bg-[#a8c7fa]/15 flex items-center justify-center">
+            <Webhook className="w-5 h-5 text-[#a8c7fa]" />
           </div>
           <div>
-            <h3 className="text-lg font-bold text-[#e3e3e3]">
+            <h3 className="text-lg font-medium text-[#e3e3e3]">
               Live Smarthome Webhook-Simulator
             </h3>
-            <p className="text-xs sm:text-sm text-[#9aa0a6]">
+            <p className="text-xs sm:text-sm text-[#8e918f]">
               Teste den Webhook-Endpunkt direkt hier – das Event landet sofort als Karte im Triage-Deck.
             </p>
           </div>
@@ -208,7 +208,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
                 setSimTitle(preset.text);
                 setSimPriority(preset.prio);
               }}
-              className="px-3.5 py-1.5 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3]"
+              className="px-3.5 py-1.5 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] transition-colors"
             >
               {preset.label}
             </button>
@@ -220,12 +220,12 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
             type="text"
             value={simTitle}
             onChange={(e) => setSimTitle(e.target.value)}
-            className="flex-1 h-11 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] gemini-border focus:outline-none"
+            className="flex-1 h-11 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] border border-white/[0.08] focus:outline-none focus:border-[#a8c7fa] transition-colors"
           />
           <button
             type="button"
             onClick={handleSimulateWebhook}
-            className="h-11 px-6 rounded-full bg-[#c58af9] text-[#0b0f19] font-semibold text-sm flex items-center justify-center gap-1.5 hover:opacity-90 transition-opacity"
+            className="h-11 px-6 rounded-full bg-[#a8c7fa] text-[#041e49] font-medium text-sm flex items-center justify-center gap-1.5 hover:bg-[#c2e7ff] transition-colors"
           >
             <Zap className="w-4 h-4" />
             <span>Webhook jetzt abfeuern</span>
@@ -233,16 +233,16 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
         </div>
 
         {simStatus && (
-          <p className="mt-3 text-xs font-medium text-[#81c995]">{simStatus}</p>
+          <p className="mt-3 text-xs font-medium text-[#a8dab5]">{simStatus}</p>
         )}
 
         {/* Code Example Snippets */}
         <div className="mt-6 space-y-3">
-          <div className="flex items-center gap-2 text-xs font-semibold text-[#9aa0a6]">
-            <Terminal className="w-3.5 h-3.5 text-[#8ab4f8]" />
+          <div className="flex items-center gap-2 text-xs font-medium text-[#8e918f]">
+            <Terminal className="w-3.5 h-3.5 text-[#a8c7fa]" />
             <span>cURL / Home Assistant REST Command:</span>
           </div>
-          <pre className="p-4 rounded-2xl bg-[#0b0f19] gemini-border font-mono text-xs text-[#8ab4f8] overflow-x-auto">
+          <pre className="p-4 rounded-2xl bg-[#131314] border border-white/[0.08] font-mono text-xs text-[#a8dab5] overflow-x-auto">
 {`curl -X POST "${baseUrl}/api/v1/webhooks/ingest?token=${exampleToken}" \\
   -H "Content-Type: application/json" \\
   -d '{
@@ -255,16 +255,16 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
       </div>
 
       {/* Section 3: Data Sovereignty & Export */}
-      <div className="p-6 sm:p-8 rounded-3xl bg-[#1e1f20] gemini-border flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+      <div className="p-6 sm:p-8 rounded-2xl bg-[#1e1f20] border border-white/[0.08] flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
         <div className="flex items-center gap-3">
-          <div className="w-10 h-10 rounded-full bg-[#81c995]/15 flex items-center justify-center flex-shrink-0">
-            <ShieldCheck className="w-5 h-5 text-[#81c995]" />
+          <div className="w-10 h-10 rounded-full bg-[#a8dab5]/15 flex items-center justify-center flex-shrink-0">
+            <ShieldCheck className="w-5 h-5 text-[#a8dab5]" />
           </div>
           <div>
-            <h3 className="text-base font-bold text-[#e3e3e3]">
+            <h3 className="text-base font-medium text-[#e3e3e3]">
               100 % Datensouveränität & Komplett-Export
             </h3>
-            <p className="text-xs sm:text-sm text-[#9aa0a6]">
+            <p className="text-xs sm:text-sm text-[#8e918f]">
               Exportiere jederzeit alle Gedanken, Aufgaben, Dokumente und geteilten Listen als portables JSON-Archiv.
             </p>
           </div>
@@ -272,7 +272,7 @@ export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
 
         <button
           onClick={handleFullExport}
-          className="h-11 px-6 rounded-full bg-[#81c995] text-[#0b0f19] font-semibold text-sm flex items-center gap-2 hover:opacity-90 flex-shrink-0"
+          className="h-11 px-6 rounded-full bg-[#a8dab5] text-[#041e49] font-medium text-sm flex items-center gap-2 hover:bg-[#c2e7ff] transition-colors flex-shrink-0"
         >
           <Download className="w-4 h-4" />
           <span>Komplett-Backup (.json)</span>
diff --git a/frontend/src/features/triage/TasksView.tsx b/frontend/src/features/triage/TasksView.tsx
index ec851d9..08eb80c 100644
--- a/frontend/src/features/triage/TasksView.tsx
+++ b/frontend/src/features/triage/TasksView.tsx
@@ -97,10 +97,10 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
         <div className="flex items-center gap-2">
           <button
             onClick={() => setFilter('open')}
-            className={`h-10 px-4 rounded-full text-xs sm:text-sm font-medium transition-colors ${
+            className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium transition-colors ${
               filter === 'open'
-                ? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold'
-                : 'bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border'
+                ? 'bg-[#282a2c] text-[#a8c7fa] border border-[#a8c7fa]/30'
+                : 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20] border border-transparent'
             }`}
           >
             Offene Aufgaben ({openTasks.length})
@@ -108,10 +108,10 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
 
           <button
             onClick={() => setFilter('done')}
-            className={`h-10 px-4 rounded-full text-xs sm:text-sm font-medium transition-colors ${
+            className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium transition-colors ${
               filter === 'done'
-                ? 'bg-[#81c995] text-[#0b0f19] font-semibold'
-                : 'bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border'
+                ? 'bg-[#282a2c] text-[#a8dab5] border border-[#a8dab5]/30'
+                : 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20] border border-transparent'
             }`}
           >
             Erledigt ({doneTasks.length})
@@ -119,10 +119,10 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
 
           <button
             onClick={() => setFilter('discarded')}
-            className={`h-10 px-4 rounded-full text-xs sm:text-sm font-medium transition-colors ${
+            className={`h-9 px-4 rounded-full text-xs sm:text-sm font-medium transition-colors ${
               filter === 'discarded'
-                ? 'bg-[#f28b82] text-[#0b0f19] font-semibold'
-                : 'bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border'
+                ? 'bg-[#282a2c] text-[#f28b82] border border-[#f28b82]/30'
+                : 'text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#1e1f20] border border-transparent'
             }`}
           >
             Verworfen ({discarded.length})
@@ -132,7 +132,7 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
         {filter === 'discarded' && discarded.length > 0 && (
           <button
             onClick={handlePurgeAllDiscarded}
-            className="h-9 px-4 rounded-full bg-[#f28b82]/15 hover:bg-[#f28b82]/25 text-[#f28b82] text-xs font-medium flex items-center gap-1.5 transition-colors"
+            className="h-8 px-3.5 rounded-full bg-[#f28b82]/10 hover:bg-[#f28b82]/20 border border-[#f28b82]/25 text-[#f28b82] text-xs font-medium flex items-center gap-1.5 transition-colors"
           >
             <Trash2 className="w-3.5 h-3.5" />
             Papierkorb leeren
@@ -141,32 +141,32 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
       </div>
 
       {loading ? (
-        <div className="p-8 text-center text-[#9aa0a6] text-sm">Lade Aufgaben…</div>
+        <div className="p-8 text-center text-[#8e918f] text-sm">Lade Aufgaben…</div>
       ) : filter === 'discarded' ? (
         <div className="space-y-2.5">
           {discarded.length === 0 ? (
-            <div className="p-10 rounded-3xl bg-[#1e1f20] gemini-border text-center text-[#9aa0a6] text-sm">
+            <div className="p-10 rounded-2xl bg-[#1e1f20] border border-white/[0.08] text-center text-[#8e918f] text-sm">
               Keine verworfenen Gedanken im Papierkorb.
             </div>
           ) : (
             discarded.map((item) => (
               <div
                 key={item.id}
-                className="p-4 rounded-3xl bg-[#1e1f20] gemini-border flex items-center justify-between gap-4"
+                className="p-4 rounded-2xl bg-[#1e1f20] border border-white/[0.08] flex items-center justify-between gap-4"
               >
                 <div className="min-w-0 flex-1">
-                  <p className="text-sm text-[#9aa0a6] line-through truncate">{item.content}</p>
+                  <p className="text-sm text-[#8e918f] line-through truncate">{item.content}</p>
                 </div>
                 <div className="flex items-center gap-2 flex-shrink-0">
                   <button
                     onClick={() => handleRestore(item)}
-                    className="h-8 px-3 rounded-full bg-[#282a2c] hover:bg-[#323639] text-xs text-[#8ab4f8] flex items-center gap-1"
+                    className="h-8 px-3 rounded-full bg-[#282a2c] hover:bg-[#323639] border border-white/[0.08] text-xs text-[#a8c7fa] flex items-center gap-1.5 transition-colors"
                   >
                     <RotateCcw className="w-3.5 h-3.5" /> Zurück in Inbox
                   </button>
                   <button
                     onClick={() => handleDeletePermanent(item.id)}
-                    className="w-8 h-8 rounded-full bg-[#282a2c] hover:bg-[#f28b82]/20 text-[#f28b82] flex items-center justify-center"
+                    className="w-8 h-8 rounded-full bg-[#282a2c] hover:bg-[#f28b82]/20 border border-white/[0.08] text-[#8e918f] hover:text-[#f28b82] flex items-center justify-center transition-colors"
                   >
                     <Trash2 className="w-3.5 h-3.5" />
                   </button>
@@ -178,33 +178,33 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
       ) : (
         <div className="space-y-2.5">
           {(filter === 'open' ? openTasks : doneTasks).length === 0 ? (
-            <div className="p-10 rounded-3xl bg-[#1e1f20] gemini-border text-center text-[#9aa0a6] text-sm">
+            <div className="p-10 rounded-2xl bg-[#1e1f20] border border-white/[0.08] text-center text-[#8e918f] text-sm">
               {filter === 'open'
-                ? 'Keine offenen Aufgaben. Wische Gedanken in der Triage nach rechts, um Aufgaben anzulegen!'
+                ? 'Keine offenen Aufgaben. Wische Gedanken in der Triage nach rechts, um Aufgaben anzulegen.'
                 : 'Noch keine erledigten Aufgaben.'}
             </div>
           ) : (
             (filter === 'open' ? openTasks : doneTasks).map((task) => (
               <div
                 key={task.id}
-                className="p-4 sm:p-5 rounded-3xl bg-[#1e1f20] hover:bg-[#242628] gemini-border flex flex-col sm:flex-row sm:items-center justify-between gap-3 transition-colors"
+                className="p-4 sm:p-5 rounded-2xl bg-[#1e1f20] hover:bg-[#282a2c]/60 border border-white/[0.08] flex flex-col sm:flex-row sm:items-center justify-between gap-3 transition-colors"
               >
                 <div className="flex items-start gap-3.5 min-w-0 flex-1">
                   <button
                     onClick={() => handleToggleDone(task)}
-                    className="mt-0.5 flex-shrink-0 text-[#8ab4f8] hover:scale-110 transition-transform"
+                    className="mt-0.5 flex-shrink-0 text-[#8e918f] hover:text-[#a8c7fa] transition-colors"
                   >
                     {task.isCompleted ? (
-                      <CheckCircle2 className="w-5 h-5 text-[#81c995]" />
+                      <CheckCircle2 className="w-5 h-5 text-[#a8dab5]" />
                     ) : (
-                      <Circle className="w-5 h-5 text-[#9aa0a6] hover:text-[#8ab4f8]" />
+                      <Circle className="w-5 h-5" />
                     )}
                   </button>
 
                   <div className="min-w-0 flex-1">
                     <p
-                      className={`text-sm sm:text-base font-medium break-words ${
-                        task.isCompleted ? 'line-through text-[#5f6368]' : 'text-[#e3e3e3]'
+                      className={`text-sm sm:text-base font-normal break-words ${
+                        task.isCompleted ? 'line-through text-[#8e918f]' : 'text-[#e3e3e3]'
                       }`}
                     >
                       {task.content}
@@ -212,21 +212,21 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
 
                     <div className="flex flex-wrap items-center gap-2 mt-2">
                       {task.priority === 'urgent' && (
-                        <span className="px-2.5 py-0.5 rounded-full bg-[#f28b82]/20 text-[#f28b82] text-xs flex items-center gap-1">
+                        <span className="px-2.5 py-0.5 rounded-full bg-[#f28b82]/15 text-[#f28b82] border border-[#f28b82]/25 text-xs flex items-center gap-1 font-medium">
                           <AlertCircle className="w-3 h-3" /> Dringend
                         </span>
                       )}
                       {task.priority === 'high' && (
-                        <span className="px-2.5 py-0.5 rounded-full bg-[#8ab4f8]/20 text-[#8ab4f8] text-xs">
+                        <span className="px-2.5 py-0.5 rounded-full bg-[#a8c7fa]/15 text-[#a8c7fa] border border-[#a8c7fa]/25 text-xs font-medium">
                           Hoch
                         </span>
                       )}
                       {task.tags?.map((tag) => (
                         <span
                           key={tag}
-                          className="px-2.5 py-0.5 rounded-full bg-[#131314] text-[#8ab4f8] text-xs flex items-center gap-1"
+                          className="px-2.5 py-0.5 rounded-full bg-[#131314] text-[#c4c7c5] border border-white/[0.08] text-xs flex items-center gap-1"
                         >
-                          <Tag className="w-2.5 h-2.5" />#{tag}
+                          <Tag className="w-2.5 h-2.5 text-[#8e918f]" />#{tag}
                         </span>
                       ))}
                     </div>
@@ -236,28 +236,28 @@ export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocu
                 {/* Action Controls */}
                 <div className="flex items-center gap-2 self-end sm:self-center flex-shrink-0">
                   <div className="relative flex items-center">
-                    <Calendar className="w-3.5 h-3.5 text-[#8ab4f8] absolute left-3 pointer-events-none" />
+                    <Calendar className="w-3.5 h-3.5 text-[#a8c7fa] absolute left-3 pointer-events-none" />
                     <input
                       type="date"
                       value={task.dueDate || ''}
                       onChange={(e) => handleDueDateChange(task, e.target.value)}
-                      className="pl-8 pr-3 py-1 rounded-full bg-[#131314] text-[#e3e3e3] text-xs gemini-border focus:outline-none focus:border-[#8ab4f8]"
+                      className="pl-8 pr-3 py-1 rounded-full bg-[#131314] text-[#e3e3e3] text-xs border border-white/[0.08] focus:outline-none focus:border-[#a8c7fa] transition-colors"
                     />
                   </div>
 
                   <button
                     onClick={() => handleConvertToDoc(task)}
-                    title="Im Workspace als Projekt-Dokument vertiefen"
-                    className="h-8 px-3 rounded-full bg-[#282a2c] hover:bg-[#323538] text-xs text-[#c58af9] flex items-center gap-1"
+                    title="Im Workspace als Dokument vertiefen"
+                    className="h-8 px-3 rounded-full bg-[#282a2c] hover:bg-[#323639] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
                   >
-                    <FileText className="w-3.5 h-3.5" />
+                    <FileText className="w-3.5 h-3.5 text-[#a8c7fa]" />
                     <span className="hidden md:inline">Vertiefen</span>
                   </button>
 
                   <button
                     onClick={() => handleDeletePermanent(task.id)}
                     title="Löschen"
-                    className="w-8 h-8 rounded-full bg-[#282a2c] hover:bg-[#f28b82]/20 text-[#9aa0a6] hover:text-[#f28b82] flex items-center justify-center"
+                    className="w-8 h-8 rounded-full bg-[#282a2c] hover:bg-[#f28b82]/20 border border-white/[0.08] text-[#8e918f] hover:text-[#f28b82] flex items-center justify-center transition-colors"
                   >
                     <Trash2 className="w-3.5 h-3.5" />
                   </button>
diff --git a/frontend/src/features/triage/TriageDeck.tsx b/frontend/src/features/triage/TriageDeck.tsx
index 3be569e..295840f 100644
--- a/frontend/src/features/triage/TriageDeck.tsx
+++ b/frontend/src/features/triage/TriageDeck.tsx
@@ -49,13 +49,13 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
   const nextCard = cards[1];
 
   const x = useMotionValue(0);
-  const rotate = useTransform(x, [-220, 0, 220], [-14, 0, 14]);
-  const keepOpacity = useTransform(x, [25, 130], [0, 1]);
-  const discardOpacity = useTransform(x, [-130, -25], [1, 0]);
+  const rotate = useTransform(x, [-220, 0, 220], [-10, 0, 10]);
+  const keepOpacity = useTransform(x, [25, 120], [0, 1]);
+  const discardOpacity = useTransform(x, [-120, -25], [1, 0]);
   const cardBorderColor = useTransform(
     x,
     [-140, 0, 140],
-    ['rgba(242, 139, 130, 0.65)', 'rgba(255, 255, 255, 0.08)', 'rgba(129, 201, 149, 0.65)']
+    ['rgba(242, 139, 130, 0.6)', '#3c4043', 'rgba(168, 218, 181, 0.6)']
   );
 
   const handleAction = async (
@@ -69,7 +69,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
     if (!activeCard) return;
 
     const current = activeCard;
-    triggerHaptic(action === 'keep' ? [12, 25] : 18);
+    triggerHaptic(action === 'keep' ? [10, 20] : 15);
 
     // Optimistic removal from deck
     setCards((prev) => prev.slice(1));
@@ -134,25 +134,19 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
     switch (priority) {
       case 'urgent':
         return (
-          <span className="px-3 py-1 rounded-full text-xs font-semibold bg-[#f28b82]/20 text-[#f28b82] border border-[#f28b82]/40">
-            🚨 Dringend
+          <span className="px-2.5 py-0.5 rounded-full text-xs font-normal bg-[#f28b82]/15 text-[#f28b82] border border-[#f28b82]/30">
+            Dringend
           </span>
         );
       case 'high':
         return (
-          <span className="px-3 py-1 rounded-full text-xs font-semibold bg-[#8ab4f8]/20 text-[#8ab4f8] border border-[#8ab4f8]/40">
-            ⚡ Priorität Hoch
-          </span>
-        );
-      case 'low':
-        return (
-          <span className="px-3 py-1 rounded-full text-xs font-medium bg-[#282a2c] text-[#9aa0a6]">
-            Später / Niedrig
+          <span className="px-2.5 py-0.5 rounded-full text-xs font-normal bg-[#fdd663]/15 text-[#fdd663] border border-[#fdd663]/30">
+            Hoch
           </span>
         );
       default:
         return (
-          <span className="px-3 py-1 rounded-full text-xs font-medium bg-[#282a2c] text-[#9aa0a6]">
+          <span className="px-2.5 py-0.5 rounded-full text-xs font-normal bg-[#282a2c] text-[#8e918f] border border-white/[0.06]">
             Gedanke
           </span>
         );
@@ -162,15 +156,15 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
   const sourceBadge = (source: string) => {
     if (source === 'voice') {
       return (
-        <span className="px-3 py-1 rounded-full text-xs bg-[#c58af9]/15 text-[#c58af9] flex items-center gap-1">
-          <Mic className="w-3 h-3" /> Sprachnotiz
+        <span className="px-2.5 py-0.5 rounded-full text-xs bg-[#131314] text-[#a8c7fa] border border-white/[0.06] flex items-center gap-1">
+          <Mic className="w-3 h-3" /> Diktat
         </span>
       );
     }
     if (source === 'webhook') {
       return (
-        <span className="px-3 py-1 rounded-full text-xs bg-[#81c995]/15 text-[#81c995] flex items-center gap-1">
-          <Webhook className="w-3 h-3" /> Smarthome Webhook
+        <span className="px-2.5 py-0.5 rounded-full text-xs bg-[#131314] text-[#a8dab5] border border-white/[0.06] flex items-center gap-1">
+          <Webhook className="w-3 h-3" /> Webhook
         </span>
       );
     }
@@ -179,30 +173,30 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
 
   if (!activeCard) {
     return (
-      <div className="max-w-xl mx-auto mt-8 p-8 sm:p-10 rounded-3xl bg-[#1e1f20] gemini-border text-center shadow-card-depth">
-        <div className="w-16 h-16 rounded-full bg-[#81c995]/15 border border-[#81c995]/30 flex items-center justify-center mx-auto mb-5">
-          <Sparkles className="w-8 h-8 text-[#81c995]" />
+      <div className="max-w-xl mx-auto mt-8 p-8 sm:p-10 rounded-3xl bg-[#1e1f20] border border-[#3c4043] text-center shadow-card">
+        <div className="w-12 h-12 rounded-full bg-[#a8dab5]/15 flex items-center justify-center mx-auto mb-4">
+          <Sparkles className="w-6 h-6 text-[#a8dab5]" />
         </div>
-        <h2 className="text-2xl font-bold text-[#e3e3e3] mb-2">Inbox Zero erreicht!</h2>
-        <p className="text-[#9aa0a6] text-sm sm:text-base max-w-md mx-auto mb-6">
-          Dein Kopf ist komplett frei. Alle eingefrorenen Gedanken wurden gesichtet, verworfen oder in echte Projekte und Aufgaben verwandelt.
+        <h2 className="text-xl font-medium text-[#e3e3e3] mb-1.5">Inbox Zero</h2>
+        <p className="text-[#8e918f] text-sm max-w-sm mx-auto mb-6">
+          Alle Gedanken sind gesichtet. Dein Kopf ist wieder frei.
         </p>
 
-        <div className="flex flex-wrap items-center justify-center gap-3">
+        <div className="flex flex-wrap items-center justify-center gap-2.5">
           <button
             onClick={onFocusCapture}
-            className="h-11 px-6 rounded-full bg-[#8ab4f8] text-[#0b0f19] font-semibold text-sm hover:bg-[#a1c2fa] transition-colors"
+            className="h-9 px-5 rounded-full bg-[#a8c7fa] text-[#041e49] font-medium text-xs sm:text-sm hover:bg-[#b8d4ff] transition-colors"
           >
-            + Neuen Gedanken einfrieren
+            + Neuer Gedanke
           </button>
 
           {lastTriaged && (
             <button
               onClick={handleUndo}
-              className="h-11 px-5 rounded-full bg-[#282a2c] text-[#e3e3e3] hover:bg-[#333639] text-sm flex items-center gap-2 transition-colors"
+              className="h-9 px-4 rounded-full bg-[#282a2c] text-[#c4c7c5] hover:text-[#e3e3e3] hover:bg-[#333537] border border-white/[0.08] text-xs flex items-center gap-1.5 transition-colors"
             >
-              <RotateCcw className="w-4 h-4 text-[#8ab4f8]" />
-              Letzten Swipe rückgängig machen
+              <RotateCcw className="w-3.5 h-3.5" />
+              Rückgängig
             </button>
           )}
         </div>
@@ -213,38 +207,39 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
   return (
     <div className="max-w-xl mx-auto select-none">
       {/* Top Deck Status & Undo Bar */}
-      <div className="flex items-center justify-between mb-4 px-2">
+      <div className="flex items-center justify-between mb-3 px-1">
         <div className="flex items-center gap-2">
-          <span className="px-3.5 py-1 rounded-full bg-[#1e1f20] gemini-border text-xs font-medium text-[#8ab4f8]">
-            🃏 Noch {cards.length} {cards.length === 1 ? 'Gedanke' : 'Gedanken'} im Deck
+          <span className="text-xs text-[#8e918f]">
+            {cards.length} {cards.length === 1 ? 'Gedanke' : 'Gedanken'} verbleibend
           </span>
-          <span className="hidden sm:flex items-center gap-1 text-xs text-[#5f6368]">
-            <Keyboard className="w-3.5 h-3.5" /> Pfeiltasten ← / → oder H / L
+          <span className="hidden sm:inline text-xs text-[#8e918f]">•</span>
+          <span className="hidden sm:flex items-center gap-1 text-xs text-[#8e918f]">
+            <Keyboard className="w-3 h-3" /> H / L oder ← / →
           </span>
         </div>
 
         {lastTriaged && (
           <button
             onClick={handleUndo}
-            className="px-3.5 py-1 rounded-full bg-[#1e1f20] hover:bg-[#282a2c] gemini-border text-xs text-[#9aa0a6] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
+            className="h-7 px-2.5 rounded-full bg-[#1e1f20] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
           >
-            <RotateCcw className="w-3.5 h-3.5 text-[#8ab4f8]" />
+            <RotateCcw className="w-3 h-3 text-[#a8c7fa]" />
             Rückgängig
           </button>
         )}
       </div>
 
       {/* Card Stack Container */}
-      <div className="relative h-[340px] sm:h-[360px] w-full flex items-center justify-center">
+      <div className="relative h-[320px] sm:h-[340px] w-full flex items-center justify-center">
         {/* Background Preview Card */}
         {nextCard && (
           <div
             key={nextCard.id + '-preview'}
-            className="absolute inset-x-4 top-5 bottom-0 rounded-3xl bg-[#18191b] gemini-border p-6 opacity-50 scale-[0.95] pointer-events-none flex flex-col justify-between"
+            className="absolute inset-x-3 top-4 bottom-0 rounded-3xl bg-[#1e1f20]/60 border border-[#3c4043]/40 p-6 opacity-40 scale-[0.96] pointer-events-none flex flex-col justify-between"
           >
             <div className="flex items-center gap-2">{priorityBadge(nextCard.priority)}</div>
-            <p className="text-lg text-[#9aa0a6] line-clamp-3">{nextCard.content}</p>
-            <div className="text-xs text-[#5f6368]">Nächste Karte…</div>
+            <p className="text-base text-[#8e918f] line-clamp-3">{nextCard.content}</p>
+            <div className="text-xs text-[#8e918f]">Nächste Karte…</div>
           </div>
         )}
 
@@ -255,7 +250,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
             style={{ x, rotate, borderColor: cardBorderColor }}
             drag="x"
             dragConstraints={{ left: 0, right: 0 }}
-            dragElastic={0.85}
+            dragElastic={0.8}
             transition={{ type: 'spring', stiffness: 350, damping: 25 }}
             onDragEnd={(_, info) => {
               if (info.offset.x > 110 || info.velocity.x > 550) {
@@ -264,22 +259,22 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
                 handleAction('discard');
               }
             }}
-            initial={{ scale: 0.94, opacity: 0, y: 16 }}
+            initial={{ scale: 0.96, opacity: 0, y: 12 }}
             animate={{ scale: 1, opacity: 1, y: 0 }}
-            exit={{ scale: 0.9, opacity: 0 }}
-            className="relative w-full h-full rounded-3xl bg-[#1e1f20] border p-6 sm:p-8 shadow-card-depth cursor-grab active:cursor-grabbing flex flex-col justify-between overflow-hidden"
+            exit={{ scale: 0.92, opacity: 0 }}
+            className="relative w-full h-full rounded-3xl bg-[#1e1f20] border p-6 sm:p-7 shadow-card cursor-grab active:cursor-grabbing flex flex-col justify-between overflow-hidden"
           >
             {/* Dynamic Swipe Overlays */}
             <motion.div
               style={{ opacity: keepOpacity }}
-              className="pointer-events-none absolute top-6 right-6 px-4 py-1.5 rounded-full bg-[#81c995]/20 border-2 border-[#81c995] text-[#81c995] font-bold text-xs tracking-wider uppercase"
+              className="pointer-events-none absolute top-5 right-5 px-3 py-1 rounded-full bg-[#a8dab5]/15 border border-[#a8dab5]/50 text-[#a8dab5] font-medium text-xs tracking-wide uppercase"
             >
               Behalten 👉
             </motion.div>
 
             <motion.div
               style={{ opacity: discardOpacity }}
-              className="pointer-events-none absolute top-6 left-6 px-4 py-1.5 rounded-full bg-[#f28b82]/20 border-2 border-[#f28b82] text-[#f28b82] font-bold text-xs tracking-wider uppercase"
+              className="pointer-events-none absolute top-5 left-5 px-3 py-1 rounded-full bg-[#f28b82]/15 border border-[#f28b82]/50 text-[#f28b82] font-medium text-xs tracking-wide uppercase"
             >
               👈 Weg damit
             </motion.div>
@@ -290,7 +285,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
                 {priorityBadge(activeCard.priority)}
                 {sourceBadge(activeCard.source)}
               </div>
-              <span className="text-xs text-[#5f6368] flex items-center gap-1">
+              <span className="text-xs text-[#8e918f] flex items-center gap-1">
                 <Clock className="w-3.5 h-3.5" />
                 {new Date(activeCard.createdAt).toLocaleString('de-DE', {
                   day: '2-digit',
@@ -301,9 +296,9 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
               </span>
             </div>
 
-            {/* Card Body: The Thought */}
-            <div className="my-auto py-4">
-              <p className="text-xl sm:text-2xl font-medium text-[#e3e3e3] leading-relaxed break-words">
+            {/* Card Body */}
+            <div className="my-auto py-3">
+              <p className="text-lg sm:text-xl font-normal text-[#e3e3e3] leading-relaxed break-words">
                 {activeCard.content}
               </p>
             </div>
@@ -315,18 +310,18 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
                   activeCard.tags.map((tag) => (
                     <span
                       key={tag}
-                      className="px-3 py-0.5 rounded-full bg-[#131314] text-[#8ab4f8] text-xs flex items-center gap-1"
+                      className="px-2.5 py-0.5 rounded-full bg-[#131314] text-[#a8c7fa] border border-white/[0.06] text-xs flex items-center gap-1"
                     >
-                      <Tag className="w-3 h-3" />#{tag}
+                      <Tag className="w-2.5 h-2.5" />#{tag}
                     </span>
                   ))
                 ) : (
-                  <span className="text-xs text-[#5f6368]">Wische links zum Verwerfen, rechts zum Behalten</span>
+                  <span className="text-xs text-[#8e918f]">Wische links oder rechts</span>
                 )}
               </div>
 
               {activeCard.dueDate && (
-                <span className="px-3 py-0.5 rounded-full bg-[#8ab4f8]/15 text-[#8ab4f8] text-xs">
+                <span className="px-2.5 py-0.5 rounded-full bg-[#131314] text-[#c4c7c5] border border-white/[0.06] text-xs">
                   📅 {activeCard.dueDate}
                 </span>
               )}
@@ -337,23 +332,23 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
 
       {/* Convert to Task Date Picker Popover */}
       {showDateModal && (
-        <div className="mt-4 p-4 rounded-3xl bg-[#131314] gemini-border flex flex-wrap items-center justify-between gap-3">
-          <div className="flex items-center gap-2 text-sm text-[#e3e3e3]">
-            <Calendar className="w-4 h-4 text-[#8ab4f8]" />
-            <span>Als To-Do mit Fälligkeitsdatum anlegen:</span>
+        <div className="mt-3 p-3.5 rounded-2xl bg-[#1e1f20] border border-[#3c4043] flex flex-wrap items-center justify-between gap-3">
+          <div className="flex items-center gap-2 text-xs text-[#c4c7c5]">
+            <Calendar className="w-4 h-4 text-[#a8c7fa]" />
+            <span>Fälligkeitsdatum für Aufgabe:</span>
           </div>
           <div className="flex items-center gap-2">
             <input
               type="date"
               value={taskDueDate}
               onChange={(e) => setTaskDueDate(e.target.value)}
-              className="bg-[#1e1f20] text-[#e3e3e3] px-3.5 py-1.5 rounded-full gemini-border text-xs focus:outline-none"
+              className="bg-[#131314] text-[#e3e3e3] px-3 py-1 rounded-full border border-[#3c4043] text-xs focus:outline-none"
             />
             <button
               onClick={() => handleAction('keep', { convertTo: 'task', dueDate: taskDueDate })}
-              className="px-4 py-1.5 rounded-full bg-[#81c995] text-[#0b0f19] font-semibold text-xs hover:opacity-90"
+              className="px-3.5 py-1 rounded-full bg-[#a8dab5] text-[#072711] font-medium text-xs hover:bg-[#b8e3c3]"
             >
-              Aufgabe speichern
+              Speichern
             </button>
           </div>
         </div>
@@ -361,11 +356,11 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
 
       {/* Convert to Shopping List Item Popover */}
       {showListSelector && (
-        <div className="mt-4 p-4 rounded-3xl bg-[#131314] gemini-border">
-          <p className="text-xs text-[#9aa0a6] mb-2.5">
-            In welche geteilte Liste soll dieser Gedanke verschoben werden?
+        <div className="mt-3 p-3.5 rounded-2xl bg-[#1e1f20] border border-[#3c4043]">
+          <p className="text-xs text-[#8e918f] mb-2">
+            In welche Liste verschieben?
           </p>
-          <div className="flex flex-wrap gap-2">
+          <div className="flex flex-wrap gap-1.5">
             {lists.length > 0 ? (
               lists.map((lst) => (
                 <button
@@ -373,26 +368,26 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
                   onClick={() =>
                     handleAction('keep', { convertTo: 'list_item', targetListId: lst.id })
                   }
-                  className="px-4 py-2 rounded-full bg-[#1e1f20] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
+                  className="px-3 py-1.5 rounded-full bg-[#282a2c] hover:bg-[#333537] border border-white/[0.06] text-xs text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
                 >
                   <span>{lst.icon}</span>
                   <span>{lst.title}</span>
                 </button>
               ))
             ) : (
-              <span className="text-xs text-[#5f6368]">Noch keine Listen vorhanden.</span>
+              <span className="text-xs text-[#8e918f]">Keine Listen vorhanden.</span>
             )}
           </div>
         </div>
       )}
 
-      {/* Primary Triage Action Pills */}
-      <div className="mt-6 flex flex-wrap items-center justify-center gap-2.5 sm:gap-3">
+      {/* Primary Triage Action Pills (Material 3 Tonal & Outlined) */}
+      <div className="mt-5 flex flex-wrap items-center justify-center gap-2 sm:gap-2.5">
         {/* Swipe Left: Discard */}
         <button
           onClick={() => handleAction('discard')}
           title="Verwerfen (Taste H oder Pfeil links)"
-          className="h-12 px-5 rounded-full bg-[#1e1f20] hover:bg-[#f28b82]/20 border border-[#f28b82]/30 text-[#f28b82] font-medium text-sm flex items-center gap-2 transition-all active:scale-95"
+          className="h-10 px-4 rounded-full border border-[#f28b82]/30 text-[#f28b82] hover:bg-[#f28b82]/10 font-normal text-xs sm:text-sm flex items-center gap-1.5 transition-colors active:scale-95"
         >
           <X className="w-4 h-4" />
           <span>Weg damit</span>
@@ -405,24 +400,24 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
             setShowDateModal((prev) => !prev);
           }}
           title="Als Aufgabe mit Datum (Taste T)"
-          className={`h-12 px-4 rounded-full gemini-border text-xs sm:text-sm flex items-center gap-1.5 transition-all ${
+          className={`h-10 px-3.5 rounded-full border text-xs sm:text-sm flex items-center gap-1.5 transition-colors ${
             showDateModal
-              ? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold'
-              : 'bg-[#1e1f20] hover:bg-[#282a2c] text-[#e3e3e3]'
+              ? 'bg-[#282a2c] text-[#a8c7fa] border-[#a8c7fa]/40 font-medium'
+              : 'bg-[#282a2c] hover:bg-[#333537] text-[#c4c7c5] hover:text-[#e3e3e3] border-white/[0.08]'
           }`}
         >
-          <Calendar className="w-4 h-4 text-[#8ab4f8]" />
+          <Calendar className="w-3.5 h-3.5 text-[#a8c7fa]" />
           <span>Termin-To-Do</span>
         </button>
 
         {/* Convert to Workspace Document */}
         <button
           onClick={() => handleAction('keep', { convertTo: 'document' })}
-          title="In ein Workspace-Dokument verwandeln (Taste D)"
-          className="h-12 px-4 rounded-full bg-[#1e1f20] hover:bg-[#282a2c] gemini-border text-[#e3e3e3] text-xs sm:text-sm flex items-center gap-1.5 transition-all"
+          title="In Workspace-Notiz umwandeln (Taste D)"
+          className="h-10 px-3.5 rounded-full bg-[#282a2c] hover:bg-[#333537] border border-white/[0.08] text-[#c4c7c5] hover:text-[#e3e3e3] text-xs sm:text-sm flex items-center gap-1.5 transition-colors"
         >
-          <FileText className="w-4 h-4 text-[#c58af9]" />
-          <span>Als Projekt-Notiz</span>
+          <FileText className="w-3.5 h-3.5 text-[#a8c7fa]" />
+          <span>Als Notiz</span>
         </button>
 
         {/* Convert to Shared Shopping List Item */}
@@ -431,22 +426,22 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
             setShowDateModal(false);
             setShowListSelector((prev) => !prev);
           }}
-          title="Auf eine geteilte Einkaufsliste setzen"
-          className={`h-12 px-4 rounded-full gemini-border text-xs sm:text-sm flex items-center gap-1.5 transition-all ${
+          title="Auf eine geteilte Liste setzen"
+          className={`h-10 px-3.5 rounded-full border text-xs sm:text-sm flex items-center gap-1.5 transition-colors ${
             showListSelector
-              ? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold'
-              : 'bg-[#1e1f20] hover:bg-[#282a2c] text-[#e3e3e3]'
+              ? 'bg-[#282a2c] text-[#a8dab5] border-[#a8dab5]/40 font-medium'
+              : 'bg-[#282a2c] hover:bg-[#333537] text-[#c4c7c5] hover:text-[#e3e3e3] border-white/[0.08]'
           }`}
         >
-          <ShoppingCart className="w-4 h-4 text-[#81c995]" />
+          <ShoppingCart className="w-3.5 h-3.5 text-[#a8dab5]" />
           <span>Auf Liste</span>
         </button>
 
         {/* Swipe Right: Keep */}
         <button
           onClick={() => handleAction('keep')}
-          title="Behalten & als Aufgabe sichern (Taste L oder Pfeil rechts)"
-          className="h-12 px-5 rounded-full bg-[#81c995]/20 hover:bg-[#81c995]/30 border border-[#81c995]/40 text-[#81c995] font-semibold text-sm flex items-center gap-2 transition-all active:scale-95"
+          title="Behalten & sichern (Taste L oder Pfeil rechts)"
+          className="h-10 px-4 rounded-full bg-[#a8dab5] hover:bg-[#b8e3c3] text-[#072711] font-medium text-xs sm:text-sm flex items-center gap-1.5 transition-colors active:scale-95"
         >
           <Check className="w-4 h-4" />
           <span>Behalten</span>
diff --git a/frontend/src/features/workspace/WorkspaceView.tsx b/frontend/src/features/workspace/WorkspaceView.tsx
index ef1a6d9..475e364 100644
--- a/frontend/src/features/workspace/WorkspaceView.tsx
+++ b/frontend/src/features/workspace/WorkspaceView.tsx
@@ -209,19 +209,19 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
       <div className="lg:col-span-4 space-y-3">
         <div className="flex items-center gap-2">
           <div className="relative flex-1">
-            <Search className="w-4 h-4 text-[#9aa0a6] absolute left-3.5 top-1/2 -translate-y-1/2" />
+            <Search className="w-4 h-4 text-[#8e918f] absolute left-3.5 top-1/2 -translate-y-1/2" />
             <input
               type="text"
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
               placeholder="Notizen durchsuchen…"
-              className="w-full h-10 pl-9 pr-4 rounded-full bg-[#1e1f20] text-xs sm:text-sm text-[#e3e3e3] placeholder-[#9aa0a6] gemini-border focus:outline-none focus:border-[#8ab4f8]"
+              className="w-full h-10 pl-9 pr-4 rounded-full bg-[#1e1f20] text-xs sm:text-sm text-[#e3e3e3] placeholder-[#8e918f] border border-white/[0.08] focus:outline-none focus:border-[#a8c7fa] transition-colors"
             />
           </div>
 
           <button
             onClick={handleCreateDoc}
-            className="h-10 px-4 rounded-full bg-[#8ab4f8] text-[#0b0f19] font-semibold text-xs sm:text-sm flex items-center gap-1.5 hover:bg-[#a1c2fa] transition-colors flex-shrink-0"
+            className="h-10 px-4 rounded-full bg-[#a8c7fa] text-[#041e49] font-medium text-xs sm:text-sm flex items-center gap-1.5 hover:bg-[#c2e7ff] transition-colors flex-shrink-0"
           >
             <Plus className="w-4 h-4" />
             <span>Neu</span>
@@ -235,22 +235,22 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
               <button
                 key={doc.id}
                 onClick={() => setSelectedDoc(doc)}
-                className={`w-full text-left p-4 rounded-3xl transition-all flex items-start justify-between gap-3 ${
+                className={`w-full text-left p-3.5 sm:p-4 rounded-2xl transition-colors flex items-start justify-between gap-3 ${
                   active
-                    ? 'bg-[#1e1f20] border border-[#8ab4f8]/50 shadow-gemini-glow'
-                    : 'bg-[#131314] hover:bg-[#1e1f20] gemini-border'
+                    ? 'bg-[#282a2c] border border-white/[0.12]'
+                    : 'bg-[#1e1f20] hover:bg-[#282a2c]/60 border border-transparent'
                 }`}
               >
                 <div className="flex items-start gap-3 min-w-0">
                   <span className="text-2xl flex-shrink-0">{doc.icon}</span>
                   <div className="min-w-0">
-                    <h4 className="font-semibold text-sm text-[#e3e3e3] truncate">{doc.title}</h4>
-                    <p className="text-xs text-[#9aa0a6] truncate mt-0.5">
+                    <h4 className="font-medium text-sm text-[#e3e3e3] truncate">{doc.title}</h4>
+                    <p className="text-xs text-[#8e918f] truncate mt-0.5">
                       {doc.blocks?.[0]?.content || 'Leeres Dokument'}
                     </p>
                   </div>
                 </div>
-                {doc.isPinned && <Pin className="w-3.5 h-3.5 text-[#8ab4f8] flex-shrink-0 mt-1" />}
+                {doc.isPinned && <Pin className="w-3.5 h-3.5 text-[#a8c7fa] flex-shrink-0 mt-1" />}
               </button>
             );
           })}
@@ -260,11 +260,11 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
       {/* Right Notion-Flair Block Editor */}
       <div className="lg:col-span-8">
         {selectedDoc ? (
-          <div className="p-6 sm:p-8 rounded-3xl bg-[#1e1f20] gemini-border shadow-card-depth">
+          <div className="p-6 sm:p-8 rounded-2xl bg-[#1e1f20] border border-white/[0.08]">
             {/* Document Top Action Bar */}
             <div className="flex flex-wrap items-center justify-between gap-3 pb-4 mb-6 border-b border-white/[0.06]">
-              <div className="flex items-center gap-2 text-xs text-[#9aa0a6]">
-                <span className="px-3 py-1 rounded-full bg-[#131314] text-[#81c995] flex items-center gap-1">
+              <div className="flex items-center gap-2 text-xs text-[#8e918f]">
+                <span className="px-3 py-1 rounded-full bg-[#131314] text-[#a8dab5] border border-white/[0.06] flex items-center gap-1 font-medium">
                   <Check className="w-3 h-3" />
                   {saveState === 'saving' ? 'Speichert…' : 'Automatisch gespeichert'}
                 </span>
@@ -278,8 +278,8 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                   }
                   className={`h-8 px-3 rounded-full text-xs flex items-center gap-1.5 transition-colors ${
                     selectedDoc.isPinned
-                      ? 'bg-[#8ab4f8]/20 text-[#8ab4f8] border border-[#8ab4f8]/40'
-                      : 'bg-[#282a2c] text-[#9aa0a6] hover:text-[#e3e3e3]'
+                      ? 'bg-[#a8c7fa]/15 text-[#a8c7fa] border border-[#a8c7fa]/25'
+                      : 'bg-[#282a2c] hover:bg-[#323639] border border-white/[0.08] text-[#c4c7c5] hover:text-[#e3e3e3]'
                   }`}
                 >
                   <Pin className="w-3.5 h-3.5" />
@@ -288,15 +288,15 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
 
                 <button
                   onClick={handleExportMarkdown}
-                  className="h-8 px-3 rounded-full bg-[#282a2c] hover:bg-[#323639] text-xs text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
+                  className="h-8 px-3 rounded-full bg-[#282a2c] hover:bg-[#323639] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
                 >
-                  <Download className="w-3.5 h-3.5 text-[#8ab4f8]" />
+                  <Download className="w-3.5 h-3.5 text-[#a8c7fa]" />
                   <span>Markdown (.md)</span>
                 </button>
 
                 <button
                   onClick={() => handleDeleteDoc(selectedDoc.id)}
-                  className="w-8 h-8 rounded-full bg-[#282a2c] hover:bg-[#f28b82]/20 text-[#9aa0a6] hover:text-[#f28b82] flex items-center justify-center transition-colors"
+                  className="w-8 h-8 rounded-full bg-[#282a2c] hover:bg-[#f28b82]/20 border border-white/[0.08] text-[#8e918f] hover:text-[#f28b82] flex items-center justify-center transition-colors"
                 >
                   <Trash2 className="w-3.5 h-3.5" />
                 </button>
@@ -308,14 +308,14 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
               <button
                 type="button"
                 onClick={() => setShowIconPicker((prev) => !prev)}
-                className="w-12 h-12 rounded-2xl bg-[#131314] hover:bg-[#282a2c] gemini-border text-2xl flex items-center justify-center flex-shrink-0"
+                className="w-12 h-12 rounded-2xl bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-2xl flex items-center justify-center flex-shrink-0 transition-colors"
                 title="Icon ändern"
               >
                 {selectedDoc.icon}
               </button>
 
               {showIconPicker && (
-                <div className="absolute top-14 left-0 z-20 p-2.5 rounded-3xl bg-[#131314] gemini-border shadow-card-depth flex flex-wrap gap-1.5 w-64">
+                <div className="absolute top-14 left-0 z-20 p-2.5 rounded-2xl bg-[#1e1f20] border border-white/[0.12] shadow-lg flex flex-wrap gap-1.5 w-64">
                   {ICONS.map((ic) => (
                     <button
                       key={ic}
@@ -324,7 +324,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                         persistDocument({ ...selectedDoc, icon: ic });
                         setShowIconPicker(false);
                       }}
-                      className="w-9 h-9 rounded-full hover:bg-[#282a2c] text-lg flex items-center justify-center"
+                      className="w-9 h-9 rounded-full hover:bg-[#282a2c] text-lg flex items-center justify-center transition-colors"
                     >
                       {ic}
                     </button>
@@ -337,7 +337,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                 value={selectedDoc.title}
                 onChange={(e) => persistDocument({ ...selectedDoc, title: e.target.value })}
                 placeholder="Dokument-Titel…"
-                className="w-full bg-transparent text-2xl sm:text-3xl font-bold text-[#e3e3e3] focus:outline-none"
+                className="w-full bg-transparent text-2xl sm:text-3xl font-semibold text-[#e3e3e3] focus:outline-none"
               />
             </div>
 
@@ -353,7 +353,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                         value={block.content}
                         onChange={(e) => updateBlock(block.id, { content: e.target.value })}
                         placeholder="Überschrift 1…"
-                        className="w-full bg-transparent text-2xl font-bold text-[#e3e3e3] focus:outline-none py-1"
+                        className="w-full bg-transparent text-2xl font-semibold text-[#e3e3e3] focus:outline-none py-1"
                       />
                     )}
 
@@ -363,7 +363,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                         value={block.content}
                         onChange={(e) => updateBlock(block.id, { content: e.target.value })}
                         placeholder="Abschnitts-Überschrift…"
-                        className="w-full bg-transparent text-lg font-semibold text-[#8ab4f8] focus:outline-none pt-2 pb-1"
+                        className="w-full bg-transparent text-lg font-medium text-[#a8c7fa] focus:outline-none pt-2 pb-1"
                       />
                     )}
 
@@ -373,7 +373,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                         value={block.content}
                         onChange={(e) => updateBlock(block.id, { content: e.target.value })}
                         placeholder="Text schreiben…"
-                        className="w-full bg-transparent text-sm sm:text-base text-[#e3e3e3] leading-relaxed focus:outline-none resize-none"
+                        className="w-full bg-transparent text-sm sm:text-base text-[#e3e3e3] leading-relaxed focus:outline-none resize-none font-normal"
                       />
                     )}
 
@@ -383,7 +383,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                           type="checkbox"
                           checked={!!block.checked}
                           onChange={(e) => updateBlock(block.id, { checked: e.target.checked })}
-                          className="w-4 h-4 rounded accent-[#81c995] cursor-pointer"
+                          className="w-4 h-4 rounded accent-[#a8dab5] cursor-pointer"
                         />
                         <input
                           type="text"
@@ -391,7 +391,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                           onChange={(e) => updateBlock(block.id, { content: e.target.value })}
                           placeholder="To-Do Punkt…"
                           className={`w-full bg-transparent text-sm sm:text-base focus:outline-none ${
-                            block.checked ? 'line-through text-[#5f6368]' : 'text-[#e3e3e3]'
+                            block.checked ? 'line-through text-[#8e918f]' : 'text-[#e3e3e3]'
                           }`}
                         />
                       </div>
@@ -399,7 +399,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
 
                     {block.type === 'bullet' && (
                       <div className="flex items-center gap-3 py-0.5">
-                        <span className="w-1.5 h-1.5 rounded-full bg-[#8ab4f8] flex-shrink-0" />
+                        <span className="w-1.5 h-1.5 rounded-full bg-[#a8c7fa] flex-shrink-0" />
                         <input
                           type="text"
                           value={block.content}
@@ -411,8 +411,8 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                     )}
 
                     {block.type === 'callout' && (
-                      <div className="p-4 rounded-2xl bg-[#131314] border border-[#8ab4f8]/30 flex items-start gap-3">
-                        <Sparkles className="w-4 h-4 text-[#8ab4f8] flex-shrink-0 mt-1" />
+                      <div className="p-4 rounded-2xl bg-[#131314] border border-[#a8c7fa]/25 flex items-start gap-3">
+                        <Sparkles className="w-4 h-4 text-[#a8c7fa] flex-shrink-0 mt-1" />
                         <textarea
                           rows={2}
                           value={block.content}
@@ -424,13 +424,13 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                     )}
 
                     {block.type === 'code' && (
-                      <div className="p-4 rounded-2xl bg-[#0b0f19] gemini-border font-mono text-xs sm:text-sm text-[#81c995]">
+                      <div className="p-4 rounded-2xl bg-[#131314] border border-white/[0.08] font-mono text-xs sm:text-sm text-[#a8dab5]">
                         <textarea
                           rows={Math.max(2, block.content.split('\n').length)}
                           value={block.content}
                           onChange={(e) => updateBlock(block.id, { content: e.target.value })}
                           placeholder="// Code oder Shell-Kommando…"
-                          className="w-full bg-transparent focus:outline-none resize-none"
+                          className="w-full bg-transparent focus:outline-none resize-none font-mono"
                         />
                       </div>
                     )}
@@ -441,7 +441,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                     <button
                       type="button"
                       onClick={() => moveBlock(idx, -1)}
-                      className="p-1 rounded-full hover:bg-[#282a2c] text-[#9aa0a6]"
+                      className="p-1 rounded-full hover:bg-[#282a2c] text-[#8e918f] hover:text-[#e3e3e3] transition-colors"
                       title="Nach oben"
                     >
                       <ArrowUp className="w-3.5 h-3.5" />
@@ -449,7 +449,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                     <button
                       type="button"
                       onClick={() => moveBlock(idx, 1)}
-                      className="p-1 rounded-full hover:bg-[#282a2c] text-[#9aa0a6]"
+                      className="p-1 rounded-full hover:bg-[#282a2c] text-[#8e918f] hover:text-[#e3e3e3] transition-colors"
                       title="Nach unten"
                     >
                       <ArrowDown className="w-3.5 h-3.5" />
@@ -457,7 +457,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
                     <button
                       type="button"
                       onClick={() => removeBlock(block.id)}
-                      className="p-1 rounded-full hover:bg-[#f28b82]/20 text-[#9aa0a6] hover:text-[#f28b82]"
+                      className="p-1 rounded-full hover:bg-[#f28b82]/20 text-[#8e918f] hover:text-[#f28b82] transition-colors"
                       title="Block entfernen"
                     >
                       <Trash2 className="w-3.5 h-3.5" />
@@ -469,67 +469,67 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
 
             {/* Add Block Pill Toolbar */}
             <div className="mt-8 pt-4 border-t border-white/[0.06] flex flex-wrap items-center gap-2">
-              <span className="text-xs text-[#9aa0a6] mr-1">+ Block einfügen:</span>
+              <span className="text-xs text-[#8e918f] mr-1">+ Block einfügen:</span>
 
               <button
                 type="button"
                 onClick={() => addBlock('paragraph')}
-                className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3] flex items-center gap-1.5"
+                className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
               >
-                <AlignLeft className="w-3.5 h-3.5 text-[#8ab4f8]" /> Text
+                <AlignLeft className="w-3.5 h-3.5 text-[#a8c7fa]" /> Text
               </button>
 
               <button
                 type="button"
                 onClick={() => addBlock('h2')}
-                className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3] flex items-center gap-1.5"
+                className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
               >
-                <Heading2 className="w-3.5 h-3.5 text-[#8ab4f8]" /> Überschrift
+                <Heading2 className="w-3.5 h-3.5 text-[#a8c7fa]" /> Überschrift
               </button>
 
               <button
                 type="button"
                 onClick={() => addBlock('todo')}
-                className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3] flex items-center gap-1.5"
+                className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
               >
-                <CheckSquare className="w-3.5 h-3.5 text-[#81c995]" /> Checkliste
+                <CheckSquare className="w-3.5 h-3.5 text-[#a8dab5]" /> Checkliste
               </button>
 
               <button
                 type="button"
                 onClick={() => addBlock('bullet')}
-                className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3] flex items-center gap-1.5"
+                className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
               >
-                <List className="w-3.5 h-3.5 text-[#8ab4f8]" /> Aufzählung
+                <List className="w-3.5 h-3.5 text-[#a8c7fa]" /> Aufzählung
               </button>
 
               <button
                 type="button"
                 onClick={() => addBlock('callout')}
-                className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3] flex items-center gap-1.5"
+                className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
               >
-                <Sparkles className="w-3.5 h-3.5 text-[#c58af9]" /> Callout
+                <Sparkles className="w-3.5 h-3.5 text-[#a8c7fa]" /> Callout
               </button>
 
               <button
                 type="button"
                 onClick={() => addBlock('code')}
-                className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3] flex items-center gap-1.5"
+                className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
               >
-                <Code className="w-3.5 h-3.5 text-[#81c995]" /> Codeblock
+                <Code className="w-3.5 h-3.5 text-[#a8dab5]" /> Codeblock
               </button>
 
               <button
                 type="button"
                 onClick={() => addBlock('h1')}
-                className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3] flex items-center gap-1.5"
+                className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] border border-white/[0.08] text-xs text-[#c4c7c5] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
               >
-                <Heading1 className="w-3.5 h-3.5 text-[#8ab4f8]" /> H1
+                <Heading1 className="w-3.5 h-3.5 text-[#a8c7fa]" /> H1
               </button>
             </div>
           </div>
         ) : (
-          <div className="p-12 rounded-3xl bg-[#1e1f20] gemini-border text-center text-[#9aa0a6]">
+          <div className="p-12 rounded-2xl bg-[#1e1f20] border border-white/[0.08] text-center text-[#8e918f]">
             Wähle links ein Dokument aus oder erstelle ein neues Projekt.
           </div>
         )}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index a3854e9..7016e2b 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -3,23 +3,27 @@
 @tailwind utilities;
 
 :root {
-  /* BRAIN.md Strict Gemini Dark Theme Tokens */
-  --bg-app: #0b0f19;
-  --bg-surface: #131314;
-  --bg-card: #1e1f20;
-  --bg-card-hover: #282a2c;
+  /* Google Gemini / Material 3 Dark Palette */
+  --bg-canvas: #131314;
+  --bg-surface: #1e1f20;
+  --bg-surface-elevated: #282a2c;
+  --bg-surface-hover: #333537;
 
   --border-subtle: rgba(255, 255, 255, 0.08);
-  --border-focus: rgba(138, 180, 248, 0.40);
+  --border-medium: #3c4043;
+  --border-focus: #a8c7fa;
 
-  --accent-blue: #8ab4f8;
-  --accent-purple: #c58af9;
-  --swipe-keep: #81c995;
-  --swipe-discard: #f28b82;
+  --color-primary: #a8c7fa;
+  --color-primary-container: #004a77;
+  --color-on-primary-container: #d3e3fd;
+
+  --color-success: #a8dab5;
+  --color-danger: #f28b82;
+  --color-warning: #fdd663;
 
   --text-primary: #e3e3e3;
-  --text-muted: #9aa0a6;
-  --text-subtle: #5f6368;
+  --text-secondary: #c4c7c5;
+  --text-tertiary: #8e918f;
 }
 
 * {
@@ -28,13 +32,13 @@
 }
 
 body {
-  background-color: var(--bg-app);
+  background-color: var(--bg-canvas);
   color: var(--text-primary);
-  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   overflow-x: hidden;
 }
 
-/* Subtle custom dark scrollbar */
+/* Subtle Material scrollbar */
 ::-webkit-scrollbar {
   width: 6px;
   height: 6px;
@@ -50,20 +54,13 @@ body {
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: rgba(138, 180, 248, 0.35);
+  background: rgba(255, 255, 255, 0.22);
 }
 
 .gemini-border {
   border: 1px solid var(--border-subtle);
 }
 
-.gemini-input-glow:focus-within {
-  border-color: rgba(138, 180, 248, 0.55);
-  box-shadow: 0 0 32px -4px rgba(138, 180, 248, 0.25), 0 0 12px -2px rgba(197, 138, 249, 0.2);
-}
-
-.gemini-gradient-text {
-  background: linear-gradient(135deg, #8ab4f8 0%, #c58af9 55%, #81c995 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+.gemini-border-medium {
+  border: 1px solid var(--border-medium);
 }
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 3709d6d..5801533 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -6,17 +6,21 @@ export default {
     extend: {
       colors: {
         gemini: {
-          bg: '#0b0f19',
-          surface: '#131314',
-          card: '#1e1f20',
-          hover: '#282a2c',
-          blue: '#8ab4f8',
-          purple: '#c58af9',
-          keep: '#81c995',
-          discard: '#f28b82',
+          canvas: '#131314',
+          surface: '#1e1f20',
+          elevated: '#282a2c',
+          hover: '#333537',
+          border: '#3c4043',
+          subtle: 'rgba(255, 255, 255, 0.08)',
+          blue: '#a8c7fa',
+          blueContainer: '#004a77',
+          blueOnContainer: '#d3e3fd',
+          green: '#a8dab5',
+          red: '#f28b82',
+          yellow: '#fdd663',
           text: '#e3e3e3',
-          muted: '#9aa0a6',
-          subtle: '#5f6368',
+          secondary: '#c4c7c5',
+          tertiary: '#8e918f',
         },
       },
       fontFamily: {
@@ -24,9 +28,8 @@ export default {
         mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
       },
       boxShadow: {
-        'gemini-glow': '0 0 28px -4px rgba(138, 180, 248, 0.22)',
-        'purple-glow': '0 0 32px -4px rgba(197, 138, 249, 0.35)',
-        'card-depth': '0 20px 50px -12px rgba(0, 0, 0, 0.7)',
+        soft: '0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.2)',
+        card: '0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2)',
       },
     },
   },