fix: Restore all files lost during destructive rebase

A previous `git pull --rebase origin main` dropped 177 local commits,
losing 3400+ files across admin-v2, backend, studio-v2, website,
klausur-service, and many other services. The partial restore attempt
(660295e2) only recovered some files.

This commit restores all missing files from pre-rebase ref 98933f5e
while preserving post-rebase additions (night-scheduler, night-mode UI,
NightModeWidget dashboard integration).

Restored features include:
- AI Module Sidebar (FAB), OCR Labeling, OCR Compare
- GPU Dashboard, RAG Pipeline, Magic Help
- Klausur-Korrektur (8 files), Abitur-Archiv (5+ files)
- Companion, Zeugnisse-Crawler, Screen Flow
- Full backend, studio-v2, website, klausur-service
- All compliance SDKs, agent-core, voice-service
- CI/CD configs, documentation, scripts

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

website/app/admin/mail/page.tsx

@@ -0,0 +1,985 @@
+'use client'
+
+/**
+ * Unified Inbox Mail Admin Page
+ *
+ * Admin interface for managing email accounts, viewing system status,
+ * and configuring AI analysis settings.
+ *
+ * See: docs/klausur-modul/UNIFIED-INBOX-SPECIFICATION.md
+ */
+
+import { useState, useEffect, useCallback } from 'react'
+import AdminLayout from '@/components/admin/AdminLayout'
+
+// API Base URL for klausur-service
+const API_BASE = process.env.NEXT_PUBLIC_KLAUSUR_SERVICE_URL || 'http://localhost:8086'
+
+// Types
+interface EmailAccount {
+  id: string
+  email: string
+  displayName: string
+  imapHost: string
+  imapPort: number
+  smtpHost: string
+  smtpPort: number
+  status: 'active' | 'inactive' | 'error' | 'syncing'
+  lastSync: string | null
+  emailCount: number
+  unreadCount: number
+  createdAt: string
+}
+
+interface MailStats {
+  totalAccounts: number
+  activeAccounts: number
+  totalEmails: number
+  unreadEmails: number
+  totalTasks: number
+  pendingTasks: number
+  overdueTasks: number
+  aiAnalyzedCount: number
+  lastSyncTime: string | null
+}
+
+interface SyncStatus {
+  running: boolean
+  accountsInProgress: string[]
+  lastCompleted: string | null
+  errors: string[]
+}
+
+// Tab definitions
+type TabId = 'overview' | 'accounts' | 'ai-settings' | 'templates' | 'logs'
+
+const tabs: { id: TabId; name: string; icon: JSX.Element }[] = [
+  {
+    id: 'overview',
+    name: 'Übersicht',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+      </svg>
+    ),
+  },
+  {
+    id: 'accounts',
+    name: 'Konten',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+      </svg>
+    ),
+  },
+  {
+    id: 'ai-settings',
+    name: 'KI-Einstellungen',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+      </svg>
+    ),
+  },
+  {
+    id: 'templates',
+    name: 'Vorlagen',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+      </svg>
+    ),
+  },
+  {
+    id: 'logs',
+    name: 'Audit-Log',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+      </svg>
+    ),
+  },
+]
+
+// Main Component
+export default function MailAdminPage() {
+  const [activeTab, setActiveTab] = useState<TabId>('overview')
+  const [stats, setStats] = useState<MailStats | null>(null)
+  const [accounts, setAccounts] = useState<EmailAccount[]>([])
+  const [syncStatus, setSyncStatus] = useState<SyncStatus | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const fetchData = useCallback(async () => {
+    try {
+      setLoading(true)
+
+      // Fetch stats and accounts in parallel
+      const [statsRes, accountsRes, statusRes] = await Promise.all([
+        fetch(`${API_BASE}/api/v1/mail/stats`),
+        fetch(`${API_BASE}/api/v1/mail/accounts`),
+        fetch(`${API_BASE}/api/v1/mail/sync/status`),
+      ])
+
+      if (statsRes.ok) {
+        const statsData = await statsRes.json()
+        setStats({
+          totalAccounts: statsData.total_accounts || 0,
+          activeAccounts: statsData.active_accounts || 0,
+          totalEmails: statsData.total_emails || 0,
+          unreadEmails: statsData.unread_emails || 0,
+          totalTasks: statsData.total_tasks || 0,
+          pendingTasks: statsData.pending_tasks || 0,
+          overdueTasks: statsData.overdue_tasks || 0,
+          aiAnalyzedCount: statsData.ai_analyzed_count || 0,
+          lastSyncTime: statsData.last_sync_time,
+        })
+      }
+
+      if (accountsRes.ok) {
+        const accountsData = await accountsRes.json()
+        setAccounts(accountsData.accounts || [])
+      }
+
+      if (statusRes.ok) {
+        const statusData = await statusRes.json()
+        setSyncStatus({
+          running: statusData.running || false,
+          accountsInProgress: statusData.accounts_in_progress || [],
+          lastCompleted: statusData.last_completed,
+          errors: statusData.errors || [],
+        })
+      }
+
+      setError(null)
+    } catch (err) {
+      console.error('Failed to fetch mail data:', err)
+      setError('Verbindung zum Mail-Service fehlgeschlagen')
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    fetchData()
+
+    // Refresh every 10 seconds if syncing
+    const interval = setInterval(() => {
+      if (syncStatus?.running) {
+        fetchData()
+      }
+    }, 10000)
+
+    return () => clearInterval(interval)
+  }, [fetchData, syncStatus?.running])
+
+  return (
+    <AdminLayout
+      title="Unified Inbox"
+      description="E-Mail-Konten & KI-gestützte Analyse verwalten"
+    >
+      {/* Error Banner */}
+      {error && (
+        <div className="mb-6 bg-red-50 border border-red-200 rounded-lg p-4 flex items-center gap-3">
+          <svg className="w-5 h-5 text-red-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+          <span className="text-red-700">{error}</span>
+          <button onClick={fetchData} className="ml-auto text-red-600 hover:text-red-800 text-sm font-medium">
+            Erneut versuchen
+          </button>
+        </div>
+      )}
+
+      {/* Tab Navigation */}
+      <div className="border-b border-slate-200 mb-6">
+        <nav className="-mb-px flex space-x-8">
+          {tabs.map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`
+                flex items-center gap-2 py-4 px-1 border-b-2 font-medium text-sm transition-colors
+                ${activeTab === tab.id
+                  ? 'border-primary-500 text-primary-600'
+                  : 'border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300'
+                }
+              `}
+            >
+              {tab.icon}
+              {tab.name}
+            </button>
+          ))}
+        </nav>
+      </div>
+
+      {/* Tab Content */}
+      {activeTab === 'overview' && (
+        <OverviewTab
+          stats={stats}
+          syncStatus={syncStatus}
+          loading={loading}
+          onRefresh={fetchData}
+        />
+      )}
+      {activeTab === 'accounts' && (
+        <AccountsTab
+          accounts={accounts}
+          loading={loading}
+          onRefresh={fetchData}
+        />
+      )}
+      {activeTab === 'ai-settings' && (
+        <AISettingsTab />
+      )}
+      {activeTab === 'templates' && (
+        <TemplatesTab />
+      )}
+      {activeTab === 'logs' && (
+        <AuditLogTab />
+      )}
+    </AdminLayout>
+  )
+}
+
+// ============================================================================
+// Overview Tab
+// ============================================================================
+
+function OverviewTab({
+  stats,
+  syncStatus,
+  loading,
+  onRefresh
+}: {
+  stats: MailStats | null
+  syncStatus: SyncStatus | null
+  loading: boolean
+  onRefresh: () => void
+}) {
+  const triggerSync = async () => {
+    try {
+      await fetch(`${API_BASE}/api/v1/mail/sync/all`, {
+        method: 'POST',
+      })
+      onRefresh()
+    } catch (err) {
+      console.error('Failed to trigger sync:', err)
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-lg font-semibold text-slate-900">System-Übersicht</h2>
+          <p className="text-sm text-slate-500">Status aller E-Mail-Konten und Aufgaben</p>
+        </div>
+        <div className="flex gap-3">
+          <button
+            onClick={onRefresh}
+            className="px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50"
+          >
+            Aktualisieren
+          </button>
+          <button
+            onClick={triggerSync}
+            disabled={syncStatus?.running}
+            className="px-4 py-2 text-sm font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-700 disabled:opacity-50"
+          >
+            {syncStatus?.running ? 'Synchronisiert...' : 'Alle synchronisieren'}
+          </button>
+        </div>
+      </div>
+
+      {/* Loading State */}
+      {loading && (
+        <div className="flex items-center justify-center py-12">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
+        </div>
+      )}
+
+      {/* Stats Grid */}
+      {!loading && stats && (
+        <>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <StatCard
+              title="E-Mail-Konten"
+              value={stats.totalAccounts}
+              subtitle={`${stats.activeAccounts} aktiv`}
+              color="blue"
+            />
+            <StatCard
+              title="E-Mails gesamt"
+              value={stats.totalEmails}
+              subtitle={`${stats.unreadEmails} ungelesen`}
+              color="green"
+            />
+            <StatCard
+              title="Aufgaben"
+              value={stats.totalTasks}
+              subtitle={`${stats.pendingTasks} offen`}
+              color="yellow"
+            />
+            <StatCard
+              title="Überfällig"
+              value={stats.overdueTasks}
+              color={stats.overdueTasks > 0 ? 'red' : 'green'}
+            />
+          </div>
+
+          {/* Sync Status */}
+          <div className="bg-white rounded-lg border border-slate-200 p-6">
+            <h3 className="text-sm font-medium text-slate-700 mb-4">Synchronisierung</h3>
+            <div className="flex items-center gap-4">
+              {syncStatus?.running ? (
+                <>
+                  <div className="w-3 h-3 bg-yellow-500 rounded-full animate-pulse"></div>
+                  <span className="text-slate-600">
+                    Synchronisiere {syncStatus.accountsInProgress.length} Konto(en)...
+                  </span>
+                </>
+              ) : (
+                <>
+                  <div className="w-3 h-3 bg-green-500 rounded-full"></div>
+                  <span className="text-slate-600">Bereit</span>
+                </>
+              )}
+              {stats.lastSyncTime && (
+                <span className="text-sm text-slate-500 ml-auto">
+                  Letzte Sync: {new Date(stats.lastSyncTime).toLocaleString('de-DE')}
+                </span>
+              )}
+            </div>
+
+            {syncStatus?.errors && syncStatus.errors.length > 0 && (
+              <div className="mt-4 p-4 bg-red-50 rounded-lg">
+                <h4 className="text-sm font-medium text-red-800 mb-2">Fehler</h4>
+                <ul className="text-sm text-red-700 space-y-1">
+                  {syncStatus.errors.slice(0, 3).map((error, i) => (
+                    <li key={i}>{error}</li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </div>
+
+          {/* AI Stats */}
+          <div className="bg-white rounded-lg border border-slate-200 p-6">
+            <h3 className="text-sm font-medium text-slate-700 mb-4">KI-Analyse</h3>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+              <div>
+                <p className="text-xs text-slate-500 uppercase tracking-wider">Analysiert</p>
+                <p className="text-2xl font-bold text-slate-900">{stats.aiAnalyzedCount}</p>
+              </div>
+              <div>
+                <p className="text-xs text-slate-500 uppercase tracking-wider">Analyse-Rate</p>
+                <p className="text-2xl font-bold text-slate-900">
+                  {stats.totalEmails > 0
+                    ? `${Math.round((stats.aiAnalyzedCount / stats.totalEmails) * 100)}%`
+                    : '0%'}
+                </p>
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
+
+function StatCard({
+  title,
+  value,
+  subtitle,
+  color = 'blue'
+}: {
+  title: string
+  value: number
+  subtitle?: string
+  color?: 'blue' | 'green' | 'yellow' | 'red'
+}) {
+  const colorClasses = {
+    blue: 'text-blue-600',
+    green: 'text-green-600',
+    yellow: 'text-yellow-600',
+    red: 'text-red-600',
+  }
+
+  return (
+    <div className="bg-white rounded-lg border border-slate-200 p-6">
+      <p className="text-xs text-slate-500 uppercase tracking-wider mb-1">{title}</p>
+      <p className={`text-3xl font-bold ${colorClasses[color]}`}>{value.toLocaleString()}</p>
+      {subtitle && <p className="text-sm text-slate-500 mt-1">{subtitle}</p>}
+    </div>
+  )
+}
+
+// ============================================================================
+// Accounts Tab
+// ============================================================================
+
+function AccountsTab({
+  accounts,
+  loading,
+  onRefresh
+}: {
+  accounts: EmailAccount[]
+  loading: boolean
+  onRefresh: () => void
+}) {
+  const [showAddModal, setShowAddModal] = useState(false)
+
+  const testConnection = async (accountId: string) => {
+    try {
+      const res = await fetch(`${API_BASE}/api/v1/mail/accounts/${accountId}/test`, {
+        method: 'POST',
+      })
+      if (res.ok) {
+        alert('Verbindung erfolgreich!')
+      } else {
+        alert('Verbindungsfehler')
+      }
+    } catch (err) {
+      alert('Verbindungsfehler')
+    }
+  }
+
+  const statusColors = {
+    active: 'bg-green-100 text-green-800',
+    inactive: 'bg-gray-100 text-gray-800',
+    error: 'bg-red-100 text-red-800',
+    syncing: 'bg-yellow-100 text-yellow-800',
+  }
+
+  const statusLabels = {
+    active: 'Aktiv',
+    inactive: 'Inaktiv',
+    error: 'Fehler',
+    syncing: 'Synchronisiert...',
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-lg font-semibold text-slate-900">E-Mail-Konten</h2>
+          <p className="text-sm text-slate-500">Verwalten Sie die verbundenen E-Mail-Konten</p>
+        </div>
+        <button
+          onClick={() => setShowAddModal(true)}
+          className="px-4 py-2 text-sm font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-700 flex items-center gap-2"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+          </svg>
+          Konto hinzufügen
+        </button>
+      </div>
+
+      {/* Loading State */}
+      {loading && (
+        <div className="flex items-center justify-center py-12">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
+        </div>
+      )}
+
+      {/* Accounts Grid */}
+      {!loading && (
+        <div className="grid gap-4">
+          {accounts.length === 0 ? (
+            <div className="bg-slate-50 rounded-lg p-8 text-center">
+              <svg className="w-12 h-12 text-slate-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+              </svg>
+              <h3 className="text-lg font-medium text-slate-900 mb-2">Keine E-Mail-Konten</h3>
+              <p className="text-slate-500 mb-4">Fügen Sie Ihr erstes E-Mail-Konto hinzu.</p>
+            </div>
+          ) : (
+            accounts.map((account) => (
+              <div
+                key={account.id}
+                className="bg-white rounded-lg border border-slate-200 p-6 hover:shadow-md transition-shadow"
+              >
+                <div className="flex items-start justify-between">
+                  <div className="flex items-center gap-4">
+                    <div className="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center">
+                      <svg className="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                      </svg>
+                    </div>
+                    <div>
+                      <h3 className="text-lg font-semibold text-slate-900">
+                        {account.displayName || account.email}
+                      </h3>
+                      <p className="text-sm text-slate-500">{account.email}</p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <span className={`px-3 py-1 rounded-full text-xs font-medium ${statusColors[account.status]}`}>
+                      {statusLabels[account.status]}
+                    </span>
+                    <button
+                      onClick={() => testConnection(account.id)}
+                      className="p-2 text-slate-400 hover:text-slate-600"
+                      title="Verbindung testen"
+                    >
+                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+                      </svg>
+                    </button>
+                  </div>
+                </div>
+
+                <div className="mt-4 grid grid-cols-2 md:grid-cols-4 gap-4">
+                  <div>
+                    <p className="text-xs text-slate-500 uppercase tracking-wider">E-Mails</p>
+                    <p className="text-lg font-semibold text-slate-900">{account.emailCount}</p>
+                  </div>
+                  <div>
+                    <p className="text-xs text-slate-500 uppercase tracking-wider">Ungelesen</p>
+                    <p className="text-lg font-semibold text-slate-900">{account.unreadCount}</p>
+                  </div>
+                  <div>
+                    <p className="text-xs text-slate-500 uppercase tracking-wider">IMAP</p>
+                    <p className="text-sm font-mono text-slate-700">{account.imapHost}:{account.imapPort}</p>
+                  </div>
+                  <div>
+                    <p className="text-xs text-slate-500 uppercase tracking-wider">Letzte Sync</p>
+                    <p className="text-sm text-slate-700">
+                      {account.lastSync
+                        ? new Date(account.lastSync).toLocaleString('de-DE')
+                        : 'Nie'}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      )}
+
+      {/* Add Account Modal */}
+      {showAddModal && (
+        <AddAccountModal onClose={() => setShowAddModal(false)} onSuccess={() => { setShowAddModal(false); onRefresh(); }} />
+      )}
+    </div>
+  )
+}
+
+function AddAccountModal({
+  onClose,
+  onSuccess
+}: {
+  onClose: () => void
+  onSuccess: () => void
+}) {
+  const [formData, setFormData] = useState({
+    email: '',
+    displayName: '',
+    imapHost: '',
+    imapPort: 993,
+    smtpHost: '',
+    smtpPort: 587,
+    username: '',
+    password: '',
+  })
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setSubmitting(true)
+    setError(null)
+
+    try {
+      const res = await fetch(`${API_BASE}/api/v1/mail/accounts`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          email: formData.email,
+          display_name: formData.displayName,
+          imap_host: formData.imapHost,
+          imap_port: formData.imapPort,
+          smtp_host: formData.smtpHost,
+          smtp_port: formData.smtpPort,
+          username: formData.username,
+          password: formData.password,
+        }),
+      })
+
+      if (res.ok) {
+        onSuccess()
+      } else {
+        const data = await res.json()
+        setError(data.detail || 'Fehler beim Hinzufügen des Kontos')
+      }
+    } catch (err) {
+      setError('Netzwerkfehler')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg shadow-xl max-w-lg w-full mx-4 max-h-[90vh] overflow-y-auto">
+        <div className="p-6 border-b border-slate-200">
+          <h2 className="text-lg font-semibold text-slate-900">E-Mail-Konto hinzufügen</h2>
+        </div>
+
+        <form onSubmit={handleSubmit} className="p-6 space-y-4">
+          {error && (
+            <div className="p-3 bg-red-50 text-red-700 rounded-lg text-sm">{error}</div>
+          )}
+
+          <div className="grid grid-cols-2 gap-4">
+            <div className="col-span-2">
+              <label className="block text-sm font-medium text-slate-700 mb-1">E-Mail-Adresse</label>
+              <input
+                type="email"
+                required
+                value={formData.email}
+                onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
+                placeholder="schulleitung@grundschule-xy.de"
+              />
+            </div>
+            <div className="col-span-2">
+              <label className="block text-sm font-medium text-slate-700 mb-1">Anzeigename</label>
+              <input
+                type="text"
+                value={formData.displayName}
+                onChange={(e) => setFormData({ ...formData, displayName: e.target.value })}
+                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
+                placeholder="Schulleitung"
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">IMAP Server</label>
+              <input
+                type="text"
+                required
+                value={formData.imapHost}
+                onChange={(e) => setFormData({ ...formData, imapHost: e.target.value })}
+                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
+                placeholder="imap.example.com"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">IMAP Port</label>
+              <input
+                type="number"
+                required
+                value={formData.imapPort}
+                onChange={(e) => setFormData({ ...formData, imapPort: parseInt(e.target.value) })}
+                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">SMTP Server</label>
+              <input
+                type="text"
+                required
+                value={formData.smtpHost}
+                onChange={(e) => setFormData({ ...formData, smtpHost: e.target.value })}
+                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
+                placeholder="smtp.example.com"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">SMTP Port</label>
+              <input
+                type="number"
+                required
+                value={formData.smtpPort}
+                onChange={(e) => setFormData({ ...formData, smtpPort: parseInt(e.target.value) })}
+                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
+              />
+            </div>
+
+            <div className="col-span-2">
+              <label className="block text-sm font-medium text-slate-700 mb-1">Benutzername</label>
+              <input
+                type="text"
+                required
+                value={formData.username}
+                onChange={(e) => setFormData({ ...formData, username: e.target.value })}
+                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
+              />
+            </div>
+
+            <div className="col-span-2">
+              <label className="block text-sm font-medium text-slate-700 mb-1">Passwort</label>
+              <input
+                type="password"
+                required
+                value={formData.password}
+                onChange={(e) => setFormData({ ...formData, password: e.target.value })}
+                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
+              />
+              <p className="text-xs text-slate-500 mt-1">
+                Das Passwort wird verschlüsselt in Vault gespeichert.
+              </p>
+            </div>
+          </div>
+
+          <div className="flex justify-end gap-3 pt-4 border-t border-slate-200">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-100 rounded-lg"
+            >
+              Abbrechen
+            </button>
+            <button
+              type="submit"
+              disabled={submitting}
+              className="px-4 py-2 text-sm font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-700 disabled:opacity-50"
+            >
+              {submitting ? 'Speichern...' : 'Konto hinzufügen'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// AI Settings Tab
+// ============================================================================
+
+function AISettingsTab() {
+  const [settings, setSettings] = useState({
+    autoAnalyze: true,
+    autoCreateTasks: true,
+    analysisModel: 'breakpilot-teacher-8b',
+    confidenceThreshold: 0.7,
+  })
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-lg font-semibold text-slate-900">KI-Einstellungen</h2>
+        <p className="text-sm text-slate-500">Konfigurieren Sie die automatische E-Mail-Analyse</p>
+      </div>
+
+      <div className="bg-white rounded-lg border border-slate-200 p-6 space-y-6">
+        {/* Auto-Analyze */}
+        <div className="flex items-center justify-between">
+          <div>
+            <h3 className="text-sm font-medium text-slate-900">Automatische Analyse</h3>
+            <p className="text-sm text-slate-500">E-Mails automatisch beim Empfang analysieren</p>
+          </div>
+          <button
+            onClick={() => setSettings({ ...settings, autoAnalyze: !settings.autoAnalyze })}
+            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+              settings.autoAnalyze ? 'bg-primary-600' : 'bg-slate-200'
+            }`}
+          >
+            <span
+              className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                settings.autoAnalyze ? 'translate-x-6' : 'translate-x-1'
+              }`}
+            />
+          </button>
+        </div>
+
+        {/* Auto-Create Tasks */}
+        <div className="flex items-center justify-between">
+          <div>
+            <h3 className="text-sm font-medium text-slate-900">Aufgaben automatisch erstellen</h3>
+            <p className="text-sm text-slate-500">Erkannte Fristen als Aufgaben anlegen</p>
+          </div>
+          <button
+            onClick={() => setSettings({ ...settings, autoCreateTasks: !settings.autoCreateTasks })}
+            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+              settings.autoCreateTasks ? 'bg-primary-600' : 'bg-slate-200'
+            }`}
+          >
+            <span
+              className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                settings.autoCreateTasks ? 'translate-x-6' : 'translate-x-1'
+              }`}
+            />
+          </button>
+        </div>
+
+        {/* Model Selection */}
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-2">Analyse-Modell</label>
+          <select
+            value={settings.analysisModel}
+            onChange={(e) => setSettings({ ...settings, analysisModel: e.target.value })}
+            className="w-full md:w-64 px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
+          >
+            <option value="breakpilot-teacher-8b">BreakPilot Teacher 8B (schnell)</option>
+            <option value="breakpilot-teacher-70b">BreakPilot Teacher 70B (genau)</option>
+            <option value="llama-3.1-8b-instruct">Llama 3.1 8B Instruct</option>
+          </select>
+        </div>
+
+        {/* Confidence Threshold */}
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-2">
+            Konfidenz-Schwelle: {Math.round(settings.confidenceThreshold * 100)}%
+          </label>
+          <input
+            type="range"
+            min="0.5"
+            max="0.95"
+            step="0.05"
+            value={settings.confidenceThreshold}
+            onChange={(e) => setSettings({ ...settings, confidenceThreshold: parseFloat(e.target.value) })}
+            className="w-full md:w-64"
+          />
+          <p className="text-xs text-slate-500 mt-1">
+            Mindest-Konfidenz für automatische Aufgabenerstellung
+          </p>
+        </div>
+      </div>
+
+      {/* Sender Classification */}
+      <div className="bg-white rounded-lg border border-slate-200 p-6">
+        <h3 className="text-sm font-medium text-slate-700 mb-4">Bekannte Absender (Niedersachsen)</h3>
+        <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
+          {[
+            { domain: '@mk.niedersachsen.de', type: 'Kultusministerium', priority: 'Hoch' },
+            { domain: '@rlsb.de', type: 'RLSB', priority: 'Hoch' },
+            { domain: '@landesschulbehoerde-nds.de', type: 'Landesschulbehörde', priority: 'Hoch' },
+            { domain: '@nibis.de', type: 'NiBiS', priority: 'Mittel' },
+            { domain: '@schultraeger.de', type: 'Schulträger', priority: 'Mittel' },
+          ].map((sender) => (
+            <div key={sender.domain} className="p-3 bg-slate-50 rounded-lg">
+              <p className="text-sm font-mono text-slate-700">{sender.domain}</p>
+              <p className="text-xs text-slate-500">{sender.type}</p>
+              <span className={`text-xs px-2 py-0.5 rounded ${
+                sender.priority === 'Hoch' ? 'bg-red-100 text-red-700' : 'bg-yellow-100 text-yellow-700'
+              }`}>
+                {sender.priority}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// Templates Tab
+// ============================================================================
+
+function TemplatesTab() {
+  const [templates] = useState([
+    { id: '1', name: 'Eingangsbestätigung', category: 'Standard', usageCount: 45 },
+    { id: '2', name: 'Terminbestätigung', category: 'Termine', usageCount: 23 },
+    { id: '3', name: 'Elternbrief-Vorlage', category: 'Eltern', usageCount: 67 },
+  ])
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-lg font-semibold text-slate-900">E-Mail-Vorlagen</h2>
+          <p className="text-sm text-slate-500">Verwalten Sie Antwort-Templates</p>
+        </div>
+        <button className="px-4 py-2 text-sm font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-700 flex items-center gap-2">
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+          </svg>
+          Vorlage erstellen
+        </button>
+      </div>
+
+      <div className="bg-white rounded-lg border border-slate-200 overflow-hidden">
+        <table className="min-w-full divide-y divide-slate-200">
+          <thead className="bg-slate-50">
+            <tr>
+              <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase">Name</th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase">Kategorie</th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase">Verwendet</th>
+              <th className="px-6 py-3 text-right text-xs font-medium text-slate-500 uppercase">Aktionen</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-slate-200">
+            {templates.map((template) => (
+              <tr key={template.id} className="hover:bg-slate-50">
+                <td className="px-6 py-4 text-sm font-medium text-slate-900">{template.name}</td>
+                <td className="px-6 py-4">
+                  <span className="px-2 py-1 bg-slate-100 text-slate-700 text-xs rounded">{template.category}</span>
+                </td>
+                <td className="px-6 py-4 text-sm text-slate-500">{template.usageCount}x</td>
+                <td className="px-6 py-4 text-right">
+                  <button className="text-primary-600 hover:text-primary-800 text-sm font-medium">Bearbeiten</button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// Audit Log Tab
+// ============================================================================
+
+function AuditLogTab() {
+  const [logs] = useState([
+    { id: '1', action: 'account_created', user: 'admin@breakpilot.de', timestamp: new Date().toISOString(), details: 'Konto schulleitung@example.de hinzugefügt' },
+    { id: '2', action: 'email_analyzed', user: 'system', timestamp: new Date(Date.now() - 3600000).toISOString(), details: '5 E-Mails analysiert' },
+    { id: '3', action: 'task_created', user: 'system', timestamp: new Date(Date.now() - 7200000).toISOString(), details: 'Aufgabe aus Fristenerkennung erstellt' },
+  ])
+
+  const actionLabels: Record<string, string> = {
+    account_created: 'Konto erstellt',
+    email_analyzed: 'E-Mail analysiert',
+    task_created: 'Aufgabe erstellt',
+    sync_completed: 'Sync abgeschlossen',
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-lg font-semibold text-slate-900">Audit-Log</h2>
+        <p className="text-sm text-slate-500">Alle Aktionen im Mail-System</p>
+      </div>
+
+      <div className="bg-white rounded-lg border border-slate-200 overflow-hidden">
+        <table className="min-w-full divide-y divide-slate-200">
+          <thead className="bg-slate-50">
+            <tr>
+              <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase">Zeit</th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase">Aktion</th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase">Benutzer</th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase">Details</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-slate-200">
+            {logs.map((log) => (
+              <tr key={log.id} className="hover:bg-slate-50">
+                <td className="px-6 py-4 text-sm text-slate-500">
+                  {new Date(log.timestamp).toLocaleString('de-DE')}
+                </td>
+                <td className="px-6 py-4">
+                  <span className="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded font-medium">
+                    {actionLabels[log.action] || log.action}
+                  </span>
+                </td>
+                <td className="px-6 py-4 text-sm text-slate-700">{log.user}</td>
+                <td className="px-6 py-4 text-sm text-slate-500">{log.details}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}

website/app/admin/mail/wizard/page.tsx

@@ -0,0 +1,393 @@
+'use client'
+
+import { useState } from 'react'
+import AdminLayout from '@/components/admin/AdminLayout'
+import {
+  WizardStepper,
+  WizardNavigation,
+  EducationCard,
+  ArchitectureContext,
+  TestRunner,
+  TestSummary,
+  type WizardStep,
+  type TestCategoryResult,
+  type FullTestResults,
+  type EducationContent,
+  type ArchitectureContextType,
+} from '@/components/wizard'
+
+// ==============================================
+// Constants
+// ==============================================
+
+const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL || 'http://localhost:8000'
+
+const STEPS: WizardStep[] = [
+  { id: 'welcome', name: 'Willkommen', icon: '👋', status: 'pending' },
+  { id: 'smtp', name: 'SMTP', icon: '📤', status: 'pending', category: 'smtp' },
+  { id: 'imap', name: 'IMAP', icon: '📥', status: 'pending', category: 'imap' },
+  { id: 'templates', name: 'Templates', icon: '📝', status: 'pending', category: 'templates' },
+  { id: 'ai-analysis', name: 'KI-Analyse', icon: '🤖', status: 'pending', category: 'ai-analysis' },
+  { id: 'summary', name: 'Zusammenfassung', icon: '📊', status: 'pending' },
+]
+
+const EDUCATION_CONTENT: Record<string, EducationContent> = {
+  'welcome': {
+    title: 'Willkommen zum Mail Wizard',
+    content: [
+      'E-Mail ist nach wie vor der wichtigste Kommunikationskanal mit Eltern.',
+      '',
+      'BreakPilot bietet:',
+      '• SMTP: Versand von System-E-Mails (Benachrichtigungen, Newsletter)',
+      '• IMAP: Empfang und Analyse eingehender E-Mails',
+      '• Templates: Versionierte E-Mail-Vorlagen mit DSB-Freigabe',
+      '• KI-Analyse: Automatische Kategorisierung und GFK-Pruefung',
+      '',
+      'In der Entwicklung nutzen wir Mailpit als Mail-Catcher.',
+      'Alle E-Mails werden abgefangen und koennen inspiziert werden.',
+    ],
+  },
+  'smtp': {
+    title: 'SMTP - Ausgehende E-Mails',
+    content: [
+      'SMTP (Simple Mail Transfer Protocol) sendet E-Mails.',
+      '',
+      'Typische Verwendung:',
+      '• Passwoert-Reset E-Mails',
+      '• Einwilligungs-Erinnerungen',
+      '• DSR-Kommunikation (Betroffenenanfragen)',
+      '• Elternbriefe und Newsletter',
+      '',
+      'Entwicklungsumgebung:',
+      '• Mailpit faengt alle E-Mails ab',
+      '• Keine echten E-Mails werden versendet',
+      '• Web-UI unter http://localhost:8025',
+      '',
+      'Produktion: Echter SMTP-Server (z.B. Postfix, SES)',
+    ],
+  },
+  'imap': {
+    title: 'IMAP - Eingehende E-Mails',
+    content: [
+      'IMAP (Internet Message Access Protocol) empfaengt E-Mails.',
+      '',
+      'Anwendungsfaelle:',
+      '• Eltern-Antworten auf Benachrichtigungen',
+      '• Automatische Ticket-Erstellung aus E-Mails',
+      '• Abwesenheitsmeldungen per E-Mail',
+      '',
+      'Verarbeitung:',
+      '1. E-Mail wird empfangen',
+      '2. KI analysiert Inhalt und Stimmung',
+      '3. Automatische Kategorisierung',
+      '4. Weiterleitung an zustaendige Stelle',
+      '',
+      'DSGVO: E-Mails werden nach Verarbeitung archiviert/geloescht',
+    ],
+  },
+  'templates': {
+    title: 'E-Mail Templates - Versionierte Vorlagen',
+    content: [
+      'Alle System-E-Mails nutzen versionierte Templates.',
+      '',
+      'Workflow (wie bei rechtlichen Dokumenten):',
+      '• draft: Entwurf wird erstellt',
+      '• review: DSB/Admin prueft Inhalt',
+      '• approved: Freigabe erteilt',
+      '• published: Aktiv im System',
+      '',
+      'Template-Typen:',
+      '• welcome: Willkommens-E-Mail',
+      '• password_reset: Passwort zuruecksetzen',
+      '• consent_reminder: Einwilligungs-Erinnerung',
+      '• dsr_receipt: DSR-Eingangsbestaetigung',
+      '',
+      'Personalisierung: {{user.name}}, {{deadline}}, etc.',
+    ],
+  },
+  'ai-analysis': {
+    title: 'KI-Analyse - LLM & GFK',
+    content: [
+      'KI-gestuetzte Analyse verbessert die Kommunikation.',
+      '',
+      'LLM-Funktionen:',
+      '• Automatische Kategorisierung eingehender E-Mails',
+      '• Sentiment-Analyse (positiv/neutral/negativ)',
+      '• Zusammenfassung langer E-Mails',
+      '• Antwort-Vorschlaege generieren',
+      '',
+      'GFK (Gewaltfreie Kommunikation):',
+      '• Pruefung ausgehender Elternbriefe',
+      '• Erkennung von "Du-Botschaften"',
+      '• Vorschlaege fuer wertschaetzende Formulierung',
+      '• Konfliktvermeidung durch bessere Sprache',
+      '',
+      'Optional: Nur aktiv wenn LLM_GATEWAY_ENABLED=true',
+    ],
+  },
+  'summary': {
+    title: 'Test-Zusammenfassung',
+    content: [
+      'Hier sehen Sie eine Uebersicht aller durchgefuehrten Tests:',
+      '• SMTP Server Verfuegbarkeit',
+      '• IMAP Server Status',
+      '• Template-Verwaltung',
+      '• KI-Analyse Bereitschaft',
+    ],
+  },
+}
+
+const ARCHITECTURE_CONTEXTS: Record<string, ArchitectureContextType> = {
+  'smtp': {
+    layer: 'service',
+    services: ['backend', 'mailserver'],
+    dependencies: ['Mailpit (Dev)', 'Postfix (Prod)', 'DNS/SPF/DKIM'],
+    dataFlow: ['FastAPI', 'SMTP Client', 'Mailpit/Postfix', 'Recipient'],
+  },
+  'imap': {
+    layer: 'service',
+    services: ['backend', 'mailserver'],
+    dependencies: ['IMAP Server', 'PostgreSQL', 'LLM Gateway'],
+    dataFlow: ['Mailserver', 'IMAP Fetch', 'KI-Analyse', 'PostgreSQL'],
+  },
+  'templates': {
+    layer: 'api',
+    services: ['backend', 'consent-service'],
+    dependencies: ['PostgreSQL', 'Template Engine', 'DSB Workflow'],
+    dataFlow: ['Admin UI', 'FastAPI', 'email_templates', 'PostgreSQL'],
+  },
+  'ai-analysis': {
+    layer: 'service',
+    services: ['backend'],
+    dependencies: ['LLM Gateway', 'OpenAI/Anthropic/Local', 'GFK Rules'],
+    dataFlow: ['E-Mail Text', 'LLM Gateway', 'Analyse Result', 'PostgreSQL'],
+  },
+}
+
+// ==============================================
+// Main Component
+// ==============================================
+
+export default function MailWizardPage() {
+  const [currentStep, setCurrentStep] = useState(0)
+  const [steps, setSteps] = useState<WizardStep[]>(STEPS)
+  const [categoryResults, setCategoryResults] = useState<Record<string, TestCategoryResult>>({})
+  const [fullResults, setFullResults] = useState<FullTestResults | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const currentStepData = steps[currentStep]
+  const isTestStep = currentStepData?.category !== undefined
+  const isWelcome = currentStepData?.id === 'welcome'
+  const isSummary = currentStepData?.id === 'summary'
+
+  const runCategoryTest = async (category: string) => {
+    setIsLoading(true)
+    setError(null)
+
+    try {
+      const response = await fetch(`${BACKEND_URL}/api/admin/mail-tests/${category}`, {
+        method: 'POST',
+      })
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`)
+      }
+
+      const result: TestCategoryResult = await response.json()
+      setCategoryResults((prev) => ({ ...prev, [category]: result }))
+
+      setSteps((prev) =>
+        prev.map((step) =>
+          step.category === category
+            ? { ...step, status: result.failed === 0 ? 'completed' : 'failed' }
+            : step
+        )
+      )
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const runAllTests = async () => {
+    setIsLoading(true)
+    setError(null)
+
+    try {
+      const response = await fetch(`${BACKEND_URL}/api/admin/mail-tests/run-all`, {
+        method: 'POST',
+      })
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`)
+      }
+
+      const results: FullTestResults = await response.json()
+      setFullResults(results)
+
+      setSteps((prev) =>
+        prev.map((step) => {
+          if (step.category) {
+            const catResult = results.categories.find((c) => c.category === step.category)
+            if (catResult) {
+              return { ...step, status: catResult.failed === 0 ? 'completed' : 'failed' }
+            }
+          }
+          return step
+        })
+      )
+
+      const newCategoryResults: Record<string, TestCategoryResult> = {}
+      results.categories.forEach((cat) => {
+        newCategoryResults[cat.category] = cat
+      })
+      setCategoryResults(newCategoryResults)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const goToNext = () => {
+    if (currentStep < steps.length - 1) {
+      setSteps((prev) =>
+        prev.map((step, idx) =>
+          idx === currentStep && step.status === 'pending'
+            ? { ...step, status: 'completed' }
+            : step
+        )
+      )
+      setCurrentStep((prev) => prev + 1)
+    }
+  }
+
+  const goToPrev = () => {
+    if (currentStep > 0) {
+      setCurrentStep((prev) => prev - 1)
+    }
+  }
+
+  const handleStepClick = (index: number) => {
+    if (index <= currentStep || steps[index - 1]?.status !== 'pending') {
+      setCurrentStep(index)
+    }
+  }
+
+  return (
+    <AdminLayout
+      title="Mail Wizard"
+      description="Interaktives Lernen und Testen der E-Mail Integration"
+    >
+      {/* Header */}
+      <div className="bg-white rounded-lg shadow p-4 mb-6 flex items-center justify-between">
+        <div className="flex items-center">
+          <span className="text-3xl mr-3">📧</span>
+          <div>
+            <h2 className="text-lg font-bold text-gray-800">E-Mail Test Wizard</h2>
+            <p className="text-sm text-gray-600">SMTP, IMAP, Templates & KI-Analyse</p>
+          </div>
+        </div>
+        <a href="/admin/mail" className="text-blue-600 hover:text-blue-800 text-sm">
+          &larr; Zurueck zu E-Mail Management
+        </a>
+      </div>
+
+      {/* Stepper */}
+      <div className="bg-white rounded-lg shadow p-6 mb-6">
+        <WizardStepper steps={steps} currentStep={currentStep} onStepClick={handleStepClick} />
+      </div>
+
+      {/* Content */}
+      <div className="bg-white rounded-lg shadow p-6">
+        <div className="flex items-center mb-6">
+          <span className="text-3xl mr-3">{currentStepData?.icon}</span>
+          <div>
+            <h2 className="text-xl font-bold text-gray-800">
+              Schritt {currentStep + 1}: {currentStepData?.name}
+            </h2>
+            <p className="text-gray-500 text-sm">
+              {currentStep + 1} von {steps.length}
+            </p>
+          </div>
+        </div>
+
+        <EducationCard content={EDUCATION_CONTENT[currentStepData?.id || '']} />
+
+        {isTestStep && currentStepData?.category && ARCHITECTURE_CONTEXTS[currentStepData.category] && (
+          <ArchitectureContext
+            context={ARCHITECTURE_CONTEXTS[currentStepData.category]}
+            currentStep={currentStepData.name}
+          />
+        )}
+
+        {error && (
+          <div className="bg-red-50 border border-red-200 text-red-700 rounded-lg p-4 mb-6">
+            <strong>Fehler:</strong> {error}
+          </div>
+        )}
+
+        {isWelcome && (
+          <div className="text-center py-8">
+            <button
+              onClick={goToNext}
+              className="bg-blue-600 text-white px-8 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors"
+            >
+              Wizard starten
+            </button>
+          </div>
+        )}
+
+        {isTestStep && currentStepData?.category && (
+          <TestRunner
+            category={currentStepData.category}
+            categoryResult={categoryResults[currentStepData.category]}
+            isLoading={isLoading}
+            onRunTests={() => runCategoryTest(currentStepData.category!)}
+          />
+        )}
+
+        {isSummary && (
+          <div>
+            {!fullResults ? (
+              <div className="text-center py-8">
+                <p className="text-gray-600 mb-4">
+                  Fuehren Sie alle Tests aus um eine Zusammenfassung zu sehen.
+                </p>
+                <button
+                  onClick={runAllTests}
+                  disabled={isLoading}
+                  className={`px-6 py-3 rounded-lg font-medium transition-colors ${
+                    isLoading
+                      ? 'bg-gray-400 cursor-not-allowed'
+                      : 'bg-blue-600 text-white hover:bg-blue-700'
+                  }`}
+                >
+                  {isLoading ? 'Alle Tests laufen...' : 'Alle Tests ausfuehren'}
+                </button>
+              </div>
+            ) : (
+              <TestSummary results={fullResults} />
+            )}
+          </div>
+        )}
+
+        <WizardNavigation
+          currentStep={currentStep}
+          totalSteps={steps.length}
+          onPrev={goToPrev}
+          onNext={goToNext}
+          showNext={!isSummary}
+          isLoading={isLoading}
+        />
+      </div>
+
+      <div className="text-center text-gray-500 text-sm mt-6">
+        Diese Tests pruefen die E-Mail-Integration.
+        Bei Fragen wenden Sie sich an das IT-Team.
+      </div>
+    </AdminLayout>
+  )
+}