Phase 0 Complete: Tasks 0.7-0.20

- 0.7: UI-Design-Richtlinien (docs/ui-design-guidelines.md, 535 lines)
- 0.8: Theme-Customization Backend (4 theme fields, migration 0023)
- 0.9: Theme-Customization Frontend (SettingsTheme.tsx, themeStore.ts, live preview)
- 0.10: RBAC-Audit (4 plugins secured, 53 routes with require_permission)
- 0.11: LiteLLM-Cleanup (llm_client.py migrated from httpx to litellm)
- 0.12: KI-Agent-Framework docs (plugin-development-guide.md, agent_capabilities field)
- 0.13: Heartbeat configurable (ProactiveSettings, migration 0024, frontend UI)
- 0.14: Unified Search Field-Level RBAC (resolve_permissions + filter_fields_by_permission)
- 0.15: Undo/History-System (EntityHistory model, service, routes, migration 0025, HistoryViewer)
- 0.16: Storage Backend (LocalStorage + S3Storage, DMS/attachments/mail updated)
- 0.17: Import/Export unified Contact fields (firstname, surname, email_1, phone_1)
- 0.18: .gitignore & Config-Cleanup (webui→frontend, python-jose removed, .env untracked)
- 0.19: Mail-Salt Security-Fix (per-account random salt, migration 0026)
- 0.20: AGPL replaced (PyMuPDF→pypdf, OnlyOffice→Collabora, LICENSE + THIRD_PARTY_LICENSES.md)

frontend/src/App.tsx

@@ -3,6 +3,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { AppRouter } from '@/routes';
 import { setUnauthorizedHandler } from '@/api/client';
 import { useAuthStore } from '@/store/authStore';
+import { useThemeStore } from '@/store/themeStore';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -16,6 +17,7 @@ const queryClient = new QueryClient({
 
 export default function App() {
   const { logout } = useAuthStore();
+  const loadThemeFromStorage = useThemeStore((s) => s.loadFromStorage);
 
   React.useEffect(() => {
     setUnauthorizedHandler(() => {
@@ -24,6 +26,11 @@ export default function App() {
     });
   }, [logout]);
 
+  // Load theme from localStorage on app start
+  React.useEffect(() => {
+    loadThemeFromStorage();
+  }, [loadThemeFromStorage]);
+
   return (
     <QueryClientProvider client={queryClient}>
       <AppRouter />

frontend/src/api/entityHistory.ts

@@ -0,0 +1,58 @@
+/**
+ * Entity History hooks — undo/restore functionality.
+ */
+
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { apiGet, apiPost, apiClient } from './client';
+
+export interface EntityHistoryEntry {
+  id: string;
+  entity_type: string;
+  entity_id: string;
+  action: 'create' | 'update' | 'delete';
+  snapshot_before: Record<string, any> | null;
+  snapshot_after: Record<string, any> | null;
+  changes: Record<string, { old: any; new: any }> | null;
+  user_id: string | null;
+  created_at: string;
+}
+
+export interface EntityHistoryList {
+  items: EntityHistoryEntry[];
+  total: number;
+}
+
+export function useEntityHistory(entityType?: string, entityId?: string) {
+  return useQuery({
+    queryKey: ['entityHistory', entityType, entityId],
+    queryFn: () =>
+      apiGet<EntityHistoryList>(`/entity-history/${entityType}/${entityId}`),
+    enabled: !!entityType && !!entityId,
+  });
+}
+
+export function useRestoreFromHistory() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (historyId: string) =>
+      apiClient.post('/entity-history/restore', { history_id: historyId }).then(r => r.data),
+    onSuccess: (_data, _variables, context) => {
+      queryClient.invalidateQueries({ queryKey: ['entityHistory'] });
+      queryClient.invalidateQueries({ queryKey: ['contacts'] });
+      queryClient.invalidateQueries({ queryKey: ['contact'] });
+    },
+  });
+}
+
+export function useUndoLastAction() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ entityType, entityId }: { entityType: string; entityId: string }) =>
+      apiPost(`/entity-history/undo/${entityType}/${entityId}`, {}),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['entityHistory'] });
+      queryClient.invalidateQueries({ queryKey: ['contacts'] });
+      queryClient.invalidateQueries({ queryKey: ['contact'] });
+    },
+  });
+}

frontend/src/api/settings.ts

@@ -55,6 +55,11 @@ export interface SystemSettings {
   invoice_prefix: string;
   quote_prefix: string;
   payment_terms_days: number;
+  // Theme customization
+  theme_primary_color?: string;
+  theme_accent_color?: string;
+  theme_font_family?: string;
+  theme_border_radius?: string;
   created_at?: string;
   updated_at?: string;
 }

frontend/src/components/HistoryViewer.tsx

@@ -0,0 +1,168 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { History, RotateCcw, Undo, ChevronDown, ChevronRight } from 'lucide-react';
+import { useEntityHistory, useRestoreFromHistory, useUndoLastAction } from '@/api/entityHistory';
+import { Button } from '@/components/ui/Button';
+import { Badge } from '@/components/ui/Badge';
+import { Skeleton } from '@/components/ui/Skeleton';
+import { useToast } from '@/components/ui/Toast';
+import { formatDistanceToNow } from 'date-fns';
+import { de, enUS } from 'date-fns/locale';
+
+interface HistoryViewerProps {
+  entityType: string;
+  entityId: string;
+}
+
+const actionConfig = {
+  create: { variant: 'success' as const, label: 'Erstellt' },
+  update: { variant: 'primary' as const, label: 'Aktualisiert' },
+  delete: { variant: 'danger' as const, label: 'Gelöscht' },
+};
+
+export function HistoryViewer({ entityType, entityId }: HistoryViewerProps) {
+  const { t, i18n } = useTranslation();
+  const toast = useToast();
+  const { data: history, isLoading } = useEntityHistory(entityType, entityId);
+  const restoreMutation = useRestoreFromHistory();
+  const undoMutation = useUndoLastAction();
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+
+  const dateLocale = i18n.language === 'de' ? de : enUS;
+
+  const handleUndo = async () => {
+    try {
+      await undoMutation.mutateAsync({ entityType, entityId });
+      toast.success(t('history.undone', 'Aktion rückgängig gemacht'));
+    } catch {
+      toast.error(t('history.undoError', 'Rückgängig machen fehlgeschlagen'));
+    }
+  };
+
+  const handleRestore = async (historyId: string) => {
+    try {
+      await restoreMutation.mutateAsync(historyId);
+      toast.success(t('history.restored', 'Version wiederhergestellt'));
+    } catch {
+      toast.error(t('history.restoreError', 'Wiederherstellung fehlgeschlagen'));
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="space-y-3">
+        <Skeleton className="h-8 w-32" />
+        <Skeleton className="h-16 w-full" />
+        <Skeleton className="h-16 w-full" />
+      </div>
+    );
+  }
+
+  const entries = history?.items ?? [];
+
+  if (entries.length === 0) {
+    return (
+      <div className="text-center py-8 text-secondary-400">
+        <History className="w-8 h-8 mx-auto mb-2 opacity-50" aria-hidden="true" />
+        <p className="text-sm">{t('history.empty', 'Keine Änderungshistorie vorhanden')}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4" data-testid="history-viewer">
+      {/* Undo button */}
+      <div className="flex items-center justify-between">
+        <h3 className="text-lg font-semibold text-secondary-900 flex items-center gap-2">
+          <History className="w-5 h-5" aria-hidden="true" />
+          {t('history.title', 'Änderungshistorie')}
+        </h3>
+        <Button
+          variant="secondary"
+          size="sm"
+          onClick={handleUndo}
+          isLoading={undoMutation.isPending}
+          icon={<Undo className="w-4 h-4" />}
+        >
+          {t('history.undo', 'Rückgängig')}
+        </Button>
+      </div>
+
+      {/* History entries */}
+      <div className="space-y-2">
+        {entries.map((entry) => {
+          const config = actionConfig[entry.action] || actionConfig.update;
+          const isExpanded = expandedId === entry.id;
+          const changes = entry.changes || {};
+          const changeKeys = Object.keys(changes);
+
+          return (
+            <div
+              key={entry.id}
+              className="border border-secondary-200 rounded-lg overflow-hidden"
+            >
+              <button
+                onClick={() => setExpandedId(isExpanded ? null : entry.id)}
+                className="w-full flex items-center justify-between p-3 hover:bg-secondary-50 transition-colors text-left"
+                aria-expanded={isExpanded}
+              >
+                <div className="flex items-center gap-3">
+                  {isExpanded ? (
+                    <ChevronDown className="w-4 h-4 text-secondary-400" aria-hidden="true" />
+                  ) : (
+                    <ChevronRight className="w-4 h-4 text-secondary-400" aria-hidden="true" />
+                  )}
+                  <Badge variant={config.variant}>{config.label}</Badge>
+                  <span className="text-sm text-secondary-500">
+                    {formatDistanceToNow(new Date(entry.created_at), { addSuffix: true, locale: dateLocale })}
+                  </span>
+                </div>
+                {changeKeys.length > 0 && (
+                  <span className="text-xs text-secondary-400">
+                    {changeKeys.length} {t('history.fieldsChanged', 'Felder geändert')}
+                  </span>
+                )}
+              </button>
+
+              {isExpanded && (
+                <div className="px-4 pb-3 border-t border-secondary-100">
+                  {/* Changes diff */}
+                  {changeKeys.length > 0 && (
+                    <div className="mt-3 space-y-1">
+                      <p className="text-xs font-medium text-secondary-500 mb-2">{t('history.changes', 'Änderungen')}:</p>
+                      {changeKeys.map((key) => (
+                        <div key={key} className="flex items-start gap-2 text-sm">
+                          <span className="font-mono text-secondary-600 min-w-[120px]">{key}:</span>
+                          <span className="text-danger-600 line-through">
+                            {String(changes[key].old ?? '—')}
+                          </span>
+                          <span className="text-secondary-400">→</span>
+                          <span className="text-success-600">
+                            {String(changes[key].new ?? '—')}
+                          </span>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+
+                  {/* Restore button */}
+                  <div className="mt-3 flex justify-end">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => handleRestore(entry.id)}
+                      isLoading={restoreMutation.isPending}
+                      icon={<RotateCcw className="w-3.5 h-3.5" />}
+                    >
+                      {t('history.restore', 'Diese Version wiederherstellen')}
+                    </Button>
+                  </div>
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

frontend/src/components/contacts/ContactDetail.tsx

@@ -8,6 +8,7 @@ import { Input } from '@/components/ui/Input';
 import { useToast } from '@/components/ui/Toast';
 
 import { Loader2 } from 'lucide-react';
+import { HistoryViewer } from '@/components/HistoryViewer';
 import {
   type UnifiedContact,
   type ContactPerson,
@@ -358,6 +359,13 @@ export function ContactDetail({ contact, loading, onEdit, onDeleted }: ContactDe
             </pre>
           </Section>
         )}
+
+        {/* History */}
+        {contact.id && (
+          <Section title={t('history.title', 'Änderungshistorie')}>
+            <HistoryViewer entityType="contact" entityId={contact.id} />
+          </Section>
+        )}
       </div>
 
       <ContactPersonModal

frontend/src/i18n/locales/de.json

@@ -204,7 +204,7 @@
   "settings": {
     "title": "Einstellungen",
     "language": "Sprache",
-    "theme": "Design",
+    "theme": "Theme",
     "light": "Hell",
     "dark": "Dunkel",
     "system": "System",
@@ -261,7 +261,29 @@
     "pluginUninstalledSuccess": "Plugin erfolgreich deinstalliert.",
     "pluginUninstallConfirm": "Plugin wirklich deinstallieren",
     "pluginRemoveData": "Plugindaten (Tabellen) ebenfalls entfernen",
-    "roleDeleted": "Rolle erfolgreich gelöscht."
+    "roleDeleted": "Rolle erfolgreich gelöscht.",
+    "themeTitle": "Theme-Anpassung",
+    "themeDescription": "Passen Sie Farben, Schriftart und Erscheinungsbild an.",
+    "themeSaved": "Theme gespeichert",
+    "themeSaveError": "Theme konnte nicht gespeichert werden",
+    "unsavedChanges": "Ungespeicherte Änderungen",
+    "presets": "Vorlagen",
+    "presetsDescription": "Schnell eine Farbpalette wählen",
+    "colors": "Farben",
+    "colorsDescription": "Hauptfarbe und Akzentfarbe anpassen",
+    "primaryColor": "Hauptfarbe",
+    "accentColor": "Akzentfarbe",
+    "typography": "Typografie & Layout",
+    "fontFamily": "Schriftart",
+    "borderRadius": "Border-Radius",
+    "darkMode": "Dark Mode",
+    "darkModeDescription": "Zwischen hellem und dunklem Theme wechseln",
+    "darkModeOn": "Dunkles Theme aktiv",
+    "darkModeOff": "Helles Theme aktiv",
+    "livePreview": "Live-Vorschau",
+    "livePreviewDescription": "So sieht die Anwendung mit dem aktuellen Theme aus",
+    "resetTheme": "Zurücksetzen",
+    "saveTheme": "Theme speichern"
   },
   "auditLog": {
     "title": "Audit-Log",
@@ -857,5 +879,17 @@
     "addTag": "Tag hinzufuegen",
     "create": "Neues Tag",
     "selectTags": "{{count}} Tags auswaehlen"
+  },
+  "history": {
+    "title": "Änderungshistorie",
+    "undo": "Rückgängig",
+    "undone": "Aktion rückgängig gemacht",
+    "undoError": "Rückgängig machen fehlgeschlagen",
+    "restore": "Diese Version wiederherstellen",
+    "restored": "Version wiederhergestellt",
+    "restoreError": "Wiederherstellung fehlgeschlagen",
+    "empty": "Keine Änderungshistorie vorhanden",
+    "changes": "Änderungen",
+    "fieldsChanged": "Felder geändert"
   }
-}
+}

frontend/src/i18n/locales/en.json

@@ -261,7 +261,29 @@
     "pluginUninstalledSuccess": "Plugin uninstalled successfully.",
     "pluginUninstallConfirm": "Really uninstall plugin",
     "pluginRemoveData": "Also remove plugin data (tables)",
-    "roleDeleted": "Role deleted successfully."
+    "roleDeleted": "Role deleted successfully.",
+    "themeTitle": "Theme Customization",
+    "themeDescription": "Customize colors, font, and appearance.",
+    "themeSaved": "Theme saved",
+    "themeSaveError": "Failed to save theme",
+    "unsavedChanges": "Unsaved changes",
+    "presets": "Presets",
+    "presetsDescription": "Quickly choose a color palette",
+    "colors": "Colors",
+    "colorsDescription": "Customize primary and accent colors",
+    "primaryColor": "Primary color",
+    "accentColor": "Accent color",
+    "typography": "Typography & Layout",
+    "fontFamily": "Font family",
+    "borderRadius": "Border radius",
+    "darkMode": "Dark Mode",
+    "darkModeDescription": "Switch between light and dark theme",
+    "darkModeOn": "Dark theme active",
+    "darkModeOff": "Light theme active",
+    "livePreview": "Live Preview",
+    "livePreviewDescription": "This is how the app looks with the current theme",
+    "resetTheme": "Reset",
+    "saveTheme": "Save theme"
   },
   "auditLog": {
     "title": "Audit Log",
@@ -857,5 +879,17 @@
     "addTag": "Add tag",
     "create": "New tag",
     "selectTags": "Select {{count}} tags"
+  },
+  "history": {
+    "title": "Change History",
+    "undo": "Undo",
+    "undone": "Action undone",
+    "undoError": "Undo failed",
+    "restore": "Restore this version",
+    "restored": "Version restored",
+    "restoreError": "Restore failed",
+    "empty": "No change history available",
+    "changes": "Changes",
+    "fieldsChanged": "fields changed"
   }
-}
+}

frontend/src/pages/ProactiveAISettings.tsx

@@ -152,6 +152,67 @@ export function ProactiveAISettings() {
           ))}
         </select>
       </div>
+
+      {/* Heartbeat Configuration */}
+      <div className="p-4 bg-white rounded-lg border border-gray-200">
+        <div className="flex items-center justify-between mb-3">
+          <div>
+            <h3 className="font-semibold text-gray-800">Heartbeat</h3>
+            <p className="text-sm text-gray-500">Regelmäßige Status-Meldung an KI-Raum</p>
+          </div>
+          <button
+            onClick={() => update({ heartbeat_enabled: !settings.heartbeat_enabled })}
+            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+              settings.heartbeat_enabled ? 'bg-blue-500' : 'bg-gray-300'
+            }`}
+            role="switch"
+            aria-checked={settings.heartbeat_enabled}
+            aria-label="Heartbeat aktivieren"
+          >
+            <span
+              className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                settings.heartbeat_enabled ? 'translate-x-6' : 'translate-x-1'
+              }`
+            />
+          </button>
+        </div>
+        {settings.heartbeat_enabled && (
+          <>
+            <div className="mb-4">
+              <div className="flex items-center justify-between mb-2">
+                <span className="text-sm font-medium text-gray-700">Intervall</span>
+                <span className="text-sm font-mono text-blue-600">
+                  {settings.heartbeat_interval_seconds || 300}s
+                </span>
+              </div>
+              <input
+                type="range"
+                min="60"
+                max="1800"
+                step="60"
+                value={settings.heartbeat_interval_seconds || 300}
+                onChange={(e) => update({ heartbeat_interval_seconds: parseInt(e.target.value) })}
+                className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-500"
+              />
+              <div className="flex justify-between text-xs text-gray-400 mt-1">
+                <span>1min</span>
+                <span>30min</span>
+              </div>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Ziel-Raum</label>
+              <input
+                type="text"
+                value={settings.heartbeat_target_room || 'Live KI'}
+                onChange={(e) => update({ heartbeat_target_room: e.target.value })}
+                className="w-full px-3 py-2 rounded-lg border border-gray-200 bg-white text-sm text-gray-700 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none"
+                placeholder="Live KI"
+              />
+              <p className="text-xs text-gray-400 mt-1">Name des Raums in der Kommunikation, an den Status-Meldungen gesendet werden.</p>
+            </div>
+          </>
+        )}
+      </div>
     </div>
   );
 }

frontend/src/pages/Settings.tsx

@@ -18,6 +18,7 @@ export function SettingsPage() {
     { to: '/settings/ai', label: t('nav.aiAssistant'), icon: '\ud83e\udde0' },
     { to: '/settings/ai-proactive', label: 'Proaktive KI', icon: '\ud83e\udd16' },
     { to: '/settings/notifications', label: t('settings.notifications'), icon: '\ud83d\udd14' },
+    { to: '/settings/theme', label: t('settings.theme', 'Theme'), icon: '\ud83c\udfa8' },
   ];
 
   return (

frontend/src/pages/SettingsTheme.tsx

@@ -0,0 +1,346 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Palette, Type, Moon, Sun, RotateCcw, Check } from 'lucide-react';
+import { useSystemSettings, useUpdateSystemSettings } from '@/api/settings';
+import { useThemeStore } from '@/store/themeStore';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { Select } from '@/components/ui/Select';
+import { Badge } from '@/components/ui/Badge';
+import { Skeleton } from '@/components/ui/Skeleton';
+import { useToast } from '@/components/ui/Toast';
+
+const FONT_OPTIONS = [
+  { value: 'Inter', label: 'Inter (Standard)' },
+  { value: 'Roboto', label: 'Roboto' },
+  { value: 'Open Sans', label: 'Open Sans' },
+  { value: 'Lato', label: 'Lato' },
+  { value: 'Montserrat', label: 'Montserrat' },
+  { value: 'Source Sans Pro', label: 'Source Sans Pro' },
+  { value: 'Nunito', label: 'Nunito' },
+  { value: 'system-ui', label: 'System UI' },
+];
+
+const RADIUS_OPTIONS = [
+  { value: '0.25rem', label: 'Sharp (0.25rem)' },
+  { value: '0.375rem', label: 'Small (0.375rem)' },
+  { value: '0.5rem', label: 'Medium (0.5rem) — Standard' },
+  { value: '0.75rem', label: 'Large (0.75rem)' },
+  { value: '1rem', label: 'Extra Large (1rem)' },
+  { value: '1.5rem', label: 'Round (1.5rem)' },
+];
+
+const PRESET_THEMES = [
+  { name: 'Classic Blue', primary: '#2563eb', accent: '#d946ef' },
+  { name: 'Ocean', primary: '#0ea5e9', accent: '#6366f1' },
+  { name: 'Forest', primary: '#16a34a', accent: '#84cc16' },
+  { name: 'Sunset', primary: '#ea580c', accent: '#f59e0b' },
+  { name: 'Purple', primary: '#7c3aed', accent: '#ec4899' },
+  { name: 'Slate', primary: '#475569', accent: '#64748b' },
+];
+
+export function SettingsThemePage() {
+  const { t } = useTranslation();
+  const toast = useToast();
+  const { data: settings, isLoading } = useSystemSettings();
+  const updateMutation = useUpdateSystemSettings();
+  const themeStore = useThemeStore();
+
+  const [primaryColor, setPrimaryColor] = useState('#2563eb');
+  const [accentColor, setAccentColor] = useState('#d946ef');
+  const [fontFamily, setFontFamily] = useState('Inter');
+  const [borderRadius, setBorderRadius] = useState('0.5rem');
+  const [darkMode, setDarkMode] = useState(false);
+  const [hasChanges, setHasChanges] = useState(false);
+
+  // Load theme from system settings on mount
+  useEffect(() => {
+    if (settings) {
+      const pc = settings.theme_primary_color || '#2563eb';
+      const ac = settings.theme_accent_color || '#d946ef';
+      const ff = settings.theme_font_family || 'Inter';
+      const br = settings.theme_border_radius || '0.5rem';
+      setPrimaryColor(pc);
+      setAccentColor(ac);
+      setFontFamily(ff);
+      setBorderRadius(br);
+      // Apply to store for live preview
+      themeStore.setTheme({
+        primaryColor: pc,
+        accentColor: ac,
+        fontFamily: ff,
+        borderRadius: br,
+      });
+    }
+  }, [settings]);
+
+  // Load dark mode from localStorage on mount
+  useEffect(() => {
+    themeStore.loadFromStorage();
+    setDarkMode(themeStore.darkMode);
+  }, []);
+
+  // Track changes
+  useEffect(() => {
+    if (!settings) return;
+    const changed =
+      primaryColor !== (settings.theme_primary_color || '#2563eb') ||
+      accentColor !== (settings.theme_accent_color || '#d946ef') ||
+      fontFamily !== (settings.theme_font_family || 'Inter') ||
+      borderRadius !== (settings.theme_border_radius || '0.5rem');
+    setHasChanges(changed);
+  }, [primaryColor, accentColor, fontFamily, borderRadius, settings]);
+
+  // Live preview: apply to theme store immediately
+  const handlePrimaryChange = (val: string) => {
+    setPrimaryColor(val);
+    themeStore.setTheme({ primaryColor: val });
+  };
+
+  const handleAccentChange = (val: string) => {
+    setAccentColor(val);
+    themeStore.setTheme({ accentColor: val });
+  };
+
+  const handleFontChange = (val: string) => {
+    setFontFamily(val);
+    themeStore.setTheme({ fontFamily: val });
+  };
+
+  const handleRadiusChange = (val: string) => {
+    setBorderRadius(val);
+    themeStore.setTheme({ borderRadius: val });
+  };
+
+  const handleDarkModeToggle = () => {
+    const newMode = !darkMode;
+    setDarkMode(newMode);
+    themeStore.toggleDarkMode();
+  };
+
+  const handlePreset = (preset: typeof PRESET_THEMES[0]) => {
+    setPrimaryColor(preset.primary);
+    setAccentColor(preset.accent);
+    themeStore.setTheme({
+      primaryColor: preset.primary,
+      accentColor: preset.accent,
+    });
+  };
+
+  const handleSave = async () => {
+    try {
+      await updateMutation.mutateAsync({
+        ...settings,
+        theme_primary_color: primaryColor,
+        theme_accent_color: accentColor,
+        theme_font_family: fontFamily,
+        theme_border_radius: borderRadius,
+      });
+      toast.success(t('settings.themeSaved', 'Theme gespeichert'));
+      setHasChanges(false);
+    } catch {
+      toast.error(t('settings.themeSaveError', 'Theme konnte nicht gespeichert werden'));
+    }
+  };
+
+  const handleReset = () => {
+    handlePreset(PRESET_THEMES[0]);
+    setFontFamily('Inter');
+    setBorderRadius('0.5rem');
+    themeStore.setTheme({
+      primaryColor: '#2563eb',
+      accentColor: '#d946ef',
+      fontFamily: 'Inter',
+      borderRadius: '0.5rem',
+    });
+  };
+
+  if (isLoading) {
+    return (
+      <div className="space-y-6">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-64 w-full" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6 max-w-4xl" data-testid="settings-theme-page">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-xl font-semibold text-secondary-900">{t('settings.themeTitle', 'Theme-Anpassung')}</h1>
+          <p className="text-sm text-secondary-500 mt-1">{t('settings.themeDescription', 'Passen Sie Farben, Schriftart und Erscheinungsbild an.')}</p>
+        </div>
+        {hasChanges && (
+          <Badge variant="warning" dot>{t('settings.unsavedChanges', 'Ungespeicherte Änderungen')}</Badge>
+        )}
+      </div>
+
+      {/* Preset Themes */}
+      <Card title={t('settings.presets', 'Vorlagen')} description={t('settings.presetsDescription', 'Schnell eine Farbpalette wählen')}>
+        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
+          {PRESET_THEMES.map((preset) => (
+            <button
+              key={preset.name}
+              onClick={() => handlePreset(preset)}
+              className="flex flex-col items-center gap-2 p-3 rounded-lg border border-secondary-200 hover:border-primary-400 hover:bg-primary-50 transition-colors cursor-pointer"
+              aria-label={preset.name}
+            >
+              <div className="flex gap-1">
+                <div className="w-8 h-8 rounded-full" style={{ backgroundColor: preset.primary }} aria-hidden="true" />
+                <div className="w-8 h-8 rounded-full" style={{ backgroundColor: preset.accent }} aria-hidden="true" />
+              </div>
+              <span className="text-xs font-medium text-secondary-700">{preset.name}</span>
+            </button>
+          ))}
+        </div>
+      </Card>
+
+      {/* Color Customization */}
+      <Card title={t('settings.colors', 'Farben')} description={t('settings.colorsDescription', 'Hauptfarbe und Akzentfarbe anpassen')}>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+          <div>
+            <label className="block text-sm font-medium text-secondary-700 mb-2">
+              <Palette className="inline w-4 h-4 mr-1" aria-hidden="true" />
+              {t('settings.primaryColor', 'Hauptfarbe')}
+            </label>
+            <div className="flex items-center gap-3">
+              <input
+                type="color"
+                value={primaryColor}
+                onChange={(e) => handlePrimaryChange(e.target.value)}
+                className="w-12 h-12 rounded-md border border-secondary-200 cursor-pointer"
+                aria-label={t('settings.primaryColor', 'Hauptfarbe')}
+              />
+              <Input
+                value={primaryColor}
+                onChange={(e) => handlePrimaryChange(e.target.value)}
+                className="flex-1"
+                placeholder="#2563eb"
+              />
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-secondary-700 mb-2">
+              <Palette className="inline w-4 h-4 mr-1" aria-hidden="true" />
+              {t('settings.accentColor', 'Akzentfarbe')}
+            </label>
+            <div className="flex items-center gap-3">
+              <input
+                type="color"
+                value={accentColor}
+                onChange={(e) => handleAccentChange(e.target.value)}
+                className="w-12 h-12 rounded-md border border-secondary-200 cursor-pointer"
+                aria-label={t('settings.accentColor', 'Akzentfarbe')}
+              />
+              <Input
+                value={accentColor}
+                onChange={(e) => handleAccentChange(e.target.value)}
+                className="flex-1"
+                placeholder="#d946ef"
+              />
+            </div>
+          </div>
+        </div>
+      </Card>
+
+      {/* Typography & Layout */}
+      <Card title={t('settings.typography', 'Typografie & Layout')}>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+          <div>
+            <label className="block text-sm font-medium text-secondary-700 mb-2">
+              <Type className="inline w-4 h-4 mr-1" aria-hidden="true" />
+              {t('settings.fontFamily', 'Schriftart')}
+            </label>
+            <Select value={fontFamily} onChange={(e) => handleFontChange(e.target.value)} options={FONT_OPTIONS} />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-secondary-700 mb-2">
+              {t('settings.borderRadius', 'Border-Radius')}
+            </label>
+            <Select value={borderRadius} onChange={(e) => handleRadiusChange(e.target.value)} options={RADIUS_OPTIONS} />
+          </div>
+        </div>
+      </Card>
+
+      {/* Dark Mode */}
+      <Card title={t('settings.darkMode', 'Dark Mode')} description={t('settings.darkModeDescription', 'Zwischen hellem und dunklem Theme wechseln')}>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            {darkMode ? (
+              <Moon className="w-5 h-5 text-secondary-600" aria-hidden="true" />
+            ) : (
+              <Sun className="w-5 h-5 text-secondary-600" aria-hidden="true" />
+            )}
+            <span className="text-sm font-medium text-secondary-700">
+              {darkMode ? t('settings.darkModeOn', 'Dunkles Theme aktiv') : t('settings.darkModeOff', 'Helles Theme aktiv')}
+            </span>
+          </div>
+          <button
+            onClick={handleDarkModeToggle}
+            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+              darkMode ? 'bg-primary-600' : 'bg-secondary-300'
+            }`}
+            role="switch"
+            aria-checked={darkMode}
+            aria-label={t('settings.darkMode', 'Dark Mode')}
+          >
+            <span
+              className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                darkMode ? 'translate-x-6' : 'translate-x-1'
+              }`}
+            />
+          </button>
+        </div>
+      </Card>
+
+      {/* Live Preview */}
+      <Card title={t('settings.livePreview', 'Live-Vorschau')} description={t('settings.livePreviewDescription', 'So sieht die Anwendung mit dem aktuellen Theme aus')}>
+        <div className="space-y-4">
+          {/* Buttons */}
+          <div className="flex flex-wrap gap-2">
+            <Button variant="primary" size="sm">Primary Button</Button>
+            <Button variant="secondary" size="sm">Secondary Button</Button>
+            <Button variant="danger" size="sm">Danger Button</Button>
+            <Button variant="ghost" size="sm">Ghost Button</Button>
+          </div>
+          {/* Badges */}
+          <div className="flex flex-wrap gap-2">
+            <Badge variant="primary">Primary</Badge>
+            <Badge variant="success" dot>Success</Badge>
+            <Badge variant="warning">Warning</Badge>
+            <Badge variant="danger">Danger</Badge>
+            <Badge variant="info">Info</Badge>
+          </div>
+          {/* Input preview */}
+          <div className="max-w-xs">
+            <Input label="Beispiel-Input" placeholder="Text eingeben..." />
+          </div>
+          {/* Card preview */}
+          <div className="bg-white rounded-lg border border-secondary-200 p-4 shadow-sm">
+            <p className="text-sm text-secondary-700">Dies ist eine Beispiel-Karte mit dem aktuellen Theme.</p>
+          </div>
+        </div>
+      </Card>
+
+      {/* Actions */}
+      <div className="flex items-center justify-end gap-3">
+        <Button variant="secondary" onClick={handleReset} icon={<RotateCcw className="w-4 h-4" />}>
+          {t('settings.resetTheme', 'Zurücksetzen')}
+        </Button>
+        <Button
+          variant="primary"
+          onClick={handleSave}
+          disabled={!hasChanges}
+          isLoading={updateMutation.isPending}
+          icon={<Check className="w-4 h-4" />}
+        >
+          {t('settings.saveTheme', 'Theme speichern')}
+        </Button>
+      </div>
+    </div>
+  );
+}

frontend/src/routes/index.tsx

@@ -29,6 +29,7 @@ import { SettingsNotificationsPage } from '@/pages/SettingsNotifications';
 import { AIAssistantPage } from '@/pages/AIAssistant';
 import { AISettingsPage } from '@/pages/AISettings';
 import { ProactiveAISettings } from '@/pages/ProactiveAISettings';
+import { SettingsThemePage } from '@/pages/SettingsTheme';
 
 const router = createBrowserRouter([
   {
@@ -79,6 +80,7 @@ const router = createBrowserRouter([
           { path: 'notifications', element: <SettingsNotificationsPage /> },
           { path: 'ai', element: <AISettingsPage /> },
           { path: 'ai-proactive', element: <ProactiveAISettings /> },
+          { path: 'theme', element: <SettingsThemePage /> },
         ],
       },
     ],

frontend/src/store/themeStore.ts

@@ -0,0 +1,153 @@
+/**
+ * Theme store — manages dynamic CSS variables for theme customization.
+ * Applies primary_color, accent_color, font_family, border_radius
+ * from system settings to CSS custom properties on :root.
+ */
+
+import { create } from 'zustand';
+
+export interface ThemeConfig {
+  primaryColor: string;
+  accentColor: string;
+  fontFamily: string;
+  borderRadius: string;
+  darkMode: boolean;
+}
+
+interface ThemeState extends ThemeConfig {
+  setTheme: (config: Partial<ThemeConfig>) => void;
+  toggleDarkMode: () => void;
+  applyTheme: () => void;
+  loadFromStorage: () => void;
+  saveToStorage: () => void;
+}
+
+const DEFAULT_THEME: ThemeConfig = {
+  primaryColor: '#2563eb',
+  accentColor: '#d946ef',
+  fontFamily: 'Inter',
+  borderRadius: '0.5rem',
+  darkMode: false,
+};
+
+/** Convert hex color to RGB values for Tailwind CSS variable injection */
+function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16),
+      }
+    : null;
+}
+
+/** Generate a Tailwind-style color scale (50-900) from a base hex color */
+function generateColorScale(hex: string): Record<string, string> {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return {};
+
+  // Mix with white for lighter shades, with black for darker
+  const mix = (base: number, amount: number, target: number) =>
+    Math.round(base + (target - base) * amount);
+
+  const scales: Record<number, [number, number]> = {
+    50: [0.95, 0],   // 95% white
+    100: [0.90, 0],
+    200: [0.80, 0],
+    300: [0.60, 0],
+    400: [0.30, 0],
+    500: [0, 0],     // base color
+    600: [0, 0.10],  // 10% black
+    700: [0, 0.20],
+    800: [0, 0.30],
+    900: [0, 0.40],
+  };
+
+  const result: Record<string, string> = {};
+  for (const [scale, [whiteAmt, blackAmt]] of Object.entries(scales)) {
+    const r = whiteAmt > 0 ? mix(rgb.r, whiteAmt, 255) : mix(rgb.r, blackAmt, 0);
+    const g = whiteAmt > 0 ? mix(rgb.g, whiteAmt, 255) : mix(rgb.g, blackAmt, 0);
+    const b = whiteAmt > 0 ? mix(rgb.b, whiteAmt, 255) : mix(rgb.b, blackAmt, 0);
+    result[scale] = `rgb(${r} ${g} ${b})`;
+  }
+  result.DEFAULT = hex;
+  return result;
+}
+
+function applyCSSVariables(config: ThemeConfig) {
+  const root = document.documentElement;
+
+  // Apply primary color scale
+  const primaryScale = generateColorScale(config.primaryColor);
+  for (const [key, val] of Object.entries(primaryScale)) {
+    root.style.setProperty(`--color-primary-${key.toLowerCase()}`, val);
+  }
+
+  // Apply accent color scale
+  const accentScale = generateColorScale(config.accentColor);
+  for (const [key, val] of Object.entries(accentScale)) {
+    root.style.setProperty(`--color-accent-${key.toLowerCase()}`, val);
+  }
+
+  // Apply font family
+  root.style.setProperty('--font-sans', `'${config.fontFamily}', system-ui, sans-serif`);
+
+  // Apply border radius
+  root.style.setProperty('--radius-md', config.borderRadius);
+
+  // Apply dark mode
+  if (config.darkMode) {
+    root.classList.add('dark');
+  } else {
+    root.classList.remove('dark');
+  }
+}
+
+const STORAGE_KEY = 'leocrm-theme';
+
+export const useThemeStore = create<ThemeState>((set, get) => ({
+  ...DEFAULT_THEME,
+
+  setTheme: (config) => {
+    set((state) => ({ ...state, ...config }));
+    get().applyTheme();
+    get().saveToStorage();
+  },
+
+  toggleDarkMode: () => {
+    set((state) => ({ ...state, darkMode: !state.darkMode }));
+    get().applyTheme();
+    get().saveToStorage();
+  },
+
+  applyTheme: () => {
+    const state = get();
+    applyCSSVariables({
+      primaryColor: state.primaryColor,
+      accentColor: state.accentColor,
+      fontFamily: state.fontFamily,
+      borderRadius: state.borderRadius,
+      darkMode: state.darkMode,
+    });
+  },
+
+  loadFromStorage: () => {
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      if (stored) {
+        const config = JSON.parse(stored) as Partial<ThemeConfig>;
+        set((state) => ({ ...state, ...config }));
+      }
+    } catch {
+      // ignore parse errors
+    }
+    get().applyTheme();
+  },
+
+  saveToStorage: () => {
+    const state = get();
+    const { setTheme, toggleDarkMode, applyTheme, loadFromStorage, saveToStorage, ...config } = state;
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(config));
+  },
+}));