diff --git a/.claude/rules/loc-exceptions.txt b/.claude/rules/loc-exceptions.txt
index c00fe9f..76b4aa7 100644
--- a/.claude/rules/loc-exceptions.txt
+++ b/.claude/rules/loc-exceptions.txt
@@ -17,6 +17,8 @@
 
 # Pure Data Registries (keine Logik, nur Daten-Definitionen)
 **/dsfa_sources_registry.py | owner=klausur | reason=Pure data registry (license + source definitions, no logic) | review=2027-01-01
+**/backlog/backlog-items.ts | owner=admin-lehrer | reason=Pure data array (506 LOC, no logic, only BacklogItem[] literals) | review=2027-01-01
+**/lib/module-registry-data.ts | owner=admin-lehrer | reason=Pure data array (510 LOC, no logic, only BackendModule[] literals) | review=2027-01-01
 
 # Algorithmic monolith — detect_column_geometry() allein 411 LOC, nicht weiter teilbar
 **/cv_layout_columns.py | owner=klausur | reason=detect_column_geometry ist eine einzelne 411-LOC Funktion (Whitespace-Gap-Analyse) | review=2026-10-01
@@ -24,6 +26,18 @@
 # Two indivisible route handlers (~230 LOC each) that cannot be split further
 **/vocab_worksheet_compare_api.py | owner=klausur | reason=compare_ocr_methods (234 LOC) + analyze_grid (255 LOC), each a single cohesive handler | review=2026-10-01
 
+# TypeScript Data Catalogs (admin-lehrer/lib/sdk/)
+# Pure exported const arrays/objects with type definitions, no business logic.
+# DSGVO/GDPR compliance catalogs: risk scenarios, mitigations, legal bases, checklists, etc.
+**/lib/sdk/vendor-compliance/catalog/*.ts | owner=admin-lehrer | reason=Pure data catalogs (processing-activities 813, vendor-templates 564, legal-basis 562 LOC) | review=2027-01-01
+**/lib/sdk/vendor-compliance/contract-review/findings.ts | owner=admin-lehrer | reason=Pure data catalog (573 LOC, FindingTemplate[] literals) | review=2027-01-01
+**/lib/sdk/vendor-compliance/contract-review/checklists.ts | owner=admin-lehrer | reason=Pure data catalog (508 LOC, ChecklistItem[] literals) | review=2027-01-01
+**/lib/sdk/dsfa/mitigation-library.ts | owner=admin-lehrer | reason=Pure data catalog (694 LOC, CatalogMitigation[] literals) | review=2027-01-01
+**/lib/sdk/dsfa/eu-legal-frameworks.ts | owner=admin-lehrer | reason=Pure data catalog (622 LOC, legal framework definitions) | review=2027-01-01
+**/lib/sdk/dsfa/risk-catalog.ts | owner=admin-lehrer | reason=Pure data catalog (615 LOC, CatalogRisk[] literals) | review=2027-01-01
+**/lib/sdk/vvt-baseline-catalog.ts | owner=admin-lehrer | reason=Pure data catalog (630 LOC, BaselineTemplate[] literals) | review=2027-01-01
+**/lib/sdk/loeschfristen-baseline-catalog.ts | owner=admin-lehrer | reason=Pure data catalog (578 LOC, retention period templates) | review=2027-01-01
+
 # Legacy — TEMPORAER bis Refactoring abgeschlossen
 # Dateien hier werden Phase fuer Phase abgearbeitet und entfernt.
 # KEINE neuen Ausnahmen ohne [guardrail-change] Commit-Marker!
diff --git a/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/AgentHeader.tsx b/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/AgentHeader.tsx
new file mode 100644
index 0000000..b314d07
--- /dev/null
+++ b/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/AgentHeader.tsx
@@ -0,0 +1,58 @@
+import Link from 'next/link'
+import { Brain, ArrowLeft, Play, Pause, CheckCircle, XCircle } from 'lucide-react'
+import type { AgentDetail } from './types'
+
+interface AgentHeaderProps {
+  agent: AgentDetail
+}
+
+export function AgentHeader({ agent }: AgentHeaderProps) {
+  return (
+    <div className="flex items-center justify-between mb-6">
+      <div className="flex items-center gap-4">
+        <Link
+          href="/ai/agents"
+          className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+        >
+          <ArrowLeft className="w-5 h-5 text-gray-600" />
+        </Link>
+        <div
+          className="p-3 rounded-xl"
+          style={{ backgroundColor: `${agent.color}20` }}
+        >
+          <Brain className="w-6 h-6" style={{ color: agent.color }} />
+        </div>
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">{agent.name}</h1>
+          <p className="text-gray-500">{agent.description}</p>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-3">
+        <div className={`flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-medium ${
+          agent.status === 'running' ? 'bg-green-100 text-green-700' :
+          agent.status === 'paused' ? 'bg-yellow-100 text-yellow-700' :
+          'bg-red-100 text-red-700'
+        }`}>
+          {agent.status === 'running' ? <CheckCircle className="w-4 h-4" /> :
+           agent.status === 'paused' ? <Pause className="w-4 h-4" /> :
+           <XCircle className="w-4 h-4" />}
+          {agent.status}
+        </div>
+        <button className="flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
+          {agent.status === 'running' ? (
+            <>
+              <Pause className="w-4 h-4" />
+              Pausieren
+            </>
+          ) : (
+            <>
+              <Play className="w-4 h-4" />
+              Starten
+            </>
+          )}
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/AgentStatsBar.tsx b/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/AgentStatsBar.tsx
new file mode 100644
index 0000000..af89f20
--- /dev/null
+++ b/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/AgentStatsBar.tsx
@@ -0,0 +1,32 @@
+import type { AgentDetail } from './types'
+
+interface AgentStatsBarProps {
+  agent: AgentDetail
+}
+
+export function AgentStatsBar({ agent }: AgentStatsBarProps) {
+  return (
+    <div className="grid grid-cols-5 gap-4 mb-6">
+      <div className="bg-white border border-gray-200 rounded-lg p-4">
+        <div className="text-sm text-gray-500">Aktive Sessions</div>
+        <div className="text-2xl font-bold text-gray-900">{agent.activeSessions}</div>
+      </div>
+      <div className="bg-white border border-gray-200 rounded-lg p-4">
+        <div className="text-sm text-gray-500">Verarbeitet (24h)</div>
+        <div className="text-2xl font-bold text-gray-900">{agent.totalProcessed.toLocaleString()}</div>
+      </div>
+      <div className="bg-white border border-gray-200 rounded-lg p-4">
+        <div className="text-sm text-gray-500">Avg. Antwortzeit</div>
+        <div className="text-2xl font-bold text-gray-900">{agent.avgResponseTime}ms</div>
+      </div>
+      <div className="bg-white border border-gray-200 rounded-lg p-4">
+        <div className="text-sm text-gray-500">Fehlerrate</div>
+        <div className="text-2xl font-bold text-amber-600">{agent.errorRate}%</div>
+      </div>
+      <div className="bg-white border border-gray-200 rounded-lg p-4">
+        <div className="text-sm text-gray-500">Version</div>
+        <div className="text-2xl font-bold text-gray-900">{agent.version}</div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/HistoryTabContent.tsx b/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/HistoryTabContent.tsx
new file mode 100644
index 0000000..7d2ae7a
--- /dev/null
+++ b/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/HistoryTabContent.tsx
@@ -0,0 +1,32 @@
+import { History } from 'lucide-react'
+import type { ChangeLog } from './types'
+
+interface HistoryTabContentProps {
+  changeLogs: ChangeLog[]
+}
+
+export function HistoryTabContent({ changeLogs }: HistoryTabContentProps) {
+  return (
+    <div>
+      <div className="space-y-4">
+        {changeLogs.map((log) => (
+          <div key={log.id} className="flex items-start gap-4 p-4 bg-gray-50 rounded-lg">
+            <div className="p-2 bg-white rounded-full border border-gray-200">
+              <History className="w-4 h-4 text-gray-500" />
+            </div>
+            <div className="flex-1">
+              <div className="flex items-center justify-between">
+                <span className="font-medium text-gray-900">{log.action}</span>
+                <span className="text-sm text-gray-500">
+                  {new Date(log.timestamp).toLocaleString('de-DE')}
+                </span>
+              </div>
+              <p className="text-sm text-gray-600 mt-1">{log.description}</p>
+              <p className="text-xs text-gray-400 mt-1">von {log.user}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/SoulTabContent.tsx b/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/SoulTabContent.tsx
new file mode 100644
index 0000000..f3897dc
--- /dev/null
+++ b/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/SoulTabContent.tsx
@@ -0,0 +1,102 @@
+import { FileText, Clock, RotateCcw, Save, Edit3, AlertTriangle } from 'lucide-react'
+import type { AgentDetail } from './types'
+
+interface SoulTabContentProps {
+  agent: AgentDetail
+  editedContent: string
+  isEditing: boolean
+  hasChanges: boolean
+  saving: boolean
+  onContentChange: (content: string) => void
+  onSave: () => void
+  onReset: () => void
+  onStartEditing: () => void
+}
+
+export function SoulTabContent({
+  agent,
+  editedContent,
+  isEditing,
+  hasChanges,
+  saving,
+  onContentChange,
+  onSave,
+  onReset,
+  onStartEditing,
+}: SoulTabContentProps) {
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-2 text-sm text-gray-500">
+          <FileText className="w-4 h-4" />
+          {agent.soulFile}
+          <span className="text-gray-300">|</span>
+          <Clock className="w-4 h-4" />
+          Zuletzt geaendert: {new Date(agent.updatedAt).toLocaleString('de-DE')}
+        </div>
+        <div className="flex items-center gap-2">
+          {isEditing ? (
+            <>
+              <button
+                onClick={onReset}
+                disabled={!hasChanges}
+                className="flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors disabled:opacity-50"
+              >
+                <RotateCcw className="w-4 h-4" />
+                Zuruecksetzen
+              </button>
+              <button
+                onClick={onSave}
+                disabled={!hasChanges || saving}
+                className="flex items-center gap-2 px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors disabled:opacity-50"
+              >
+                <Save className="w-4 h-4" />
+                {saving ? 'Speichert...' : 'Speichern'}
+              </button>
+            </>
+          ) : (
+            <button
+              onClick={onStartEditing}
+              className="flex items-center gap-2 px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors"
+            >
+              <Edit3 className="w-4 h-4" />
+              Bearbeiten
+            </button>
+          )}
+        </div>
+      </div>
+
+      {hasChanges && (
+        <div className="mb-4 p-3 bg-amber-50 border border-amber-200 rounded-lg flex items-center gap-2 text-amber-700">
+          <AlertTriangle className="w-4 h-4" />
+          <span className="text-sm">Ungespeicherte Aenderungen vorhanden</span>
+        </div>
+      )}
+
+      <div className="relative">
+        {isEditing ? (
+          <textarea
+            value={editedContent}
+            onChange={(e) => onContentChange(e.target.value)}
+            className="w-full h-[600px] p-4 font-mono text-sm bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent resize-none"
+            spellCheck={false}
+          />
+        ) : (
+          <div className="w-full h-[600px] p-4 font-mono text-sm bg-gray-50 border border-gray-200 rounded-lg overflow-auto whitespace-pre-wrap">
+            {agent.soulContent}
+          </div>
+        )}
+      </div>
+
+      <div className="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
+        <h4 className="font-medium text-blue-900 mb-2">Hinweise zur SOUL-Datei</h4>
+        <ul className="text-sm text-blue-700 space-y-1">
+          <li>Die SOUL-Datei definiert die Persoenlichkeit und das Verhalten des Agents</li>
+          <li>Aenderungen werden nach dem Speichern sofort wirksam</li>
+          <li>Testen Sie Aenderungen zuerst im Staging-Modus</li>
+          <li>Alle Aenderungen werden in der Historie protokolliert</li>
+        </ul>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/StatsTabContent.tsx b/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/StatsTabContent.tsx
new file mode 100644
index 0000000..c625fa8
--- /dev/null
+++ b/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/StatsTabContent.tsx
@@ -0,0 +1,16 @@
+import Link from 'next/link'
+import { Activity } from 'lucide-react'
+
+export function StatsTabContent() {
+  return (
+    <div className="space-y-6">
+      <div className="text-center py-12 text-gray-500">
+        <Activity className="w-12 h-12 mx-auto mb-4 text-gray-400" />
+        <p>Live-Statistiken werden in einer zukuenftigen Version verfuegbar sein.</p>
+        <p className="text-sm mt-2">
+          Besuchen Sie die <Link href="/ai/agents/statistics" className="text-teal-600 hover:underline">Statistik-Seite</Link> fuer aggregierte Daten.
+        </p>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/index.ts b/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/index.ts
new file mode 100644
index 0000000..43b39a4
--- /dev/null
+++ b/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/index.ts
@@ -0,0 +1,6 @@
+export { AgentHeader } from './AgentHeader'
+export { AgentStatsBar } from './AgentStatsBar'
+export { SoulTabContent } from './SoulTabContent'
+export { StatsTabContent } from './StatsTabContent'
+export { HistoryTabContent } from './HistoryTabContent'
+export type { AgentDetail, ChangeLog } from './types'
diff --git a/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/mock-data.ts b/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/mock-data.ts
new file mode 100644
index 0000000..cbd430a
--- /dev/null
+++ b/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/mock-data.ts
@@ -0,0 +1,308 @@
+import type { AgentDetail, ChangeLog } from './types'
+
+export const mockAgentDetails: Record<string, AgentDetail> = {
+  'tutor-agent': {
+    id: 'tutor-agent',
+    name: 'TutorAgent',
+    description: 'Geduldiger, ermutigender Lernbegleiter fuer Schueler',
+    soulFile: 'tutor-agent.soul.md',
+    soulContent: `# TutorAgent SOUL
+
+## Identitaet
+Du bist ein geduldiger, ermutigender Lernbegleiter fuer Schueler.
+Dein Ziel ist es, Verstaendnis zu foerdern, nicht Antworten vorzugeben.
+
+## Kernprinzipien
+- **Sokratische Methode**: Stelle Fragen, die zum Nachdenken anregen
+- **Positives Reinforcement**: Erkenne und feiere Lernfortschritte
+- **Adaptive Kommunikation**: Passe Sprache und Komplexitaet an das Niveau an
+- **Geduld**: Wiederhole Erklaerungen ohne Frustration zu zeigen
+
+## Kommunikationsstil
+- Verwende einfache, klare Sprache
+- Stelle Rueckfragen, um Verstaendnis zu pruefen
+- Gib Hinweise statt direkter Loesungen
+- Feiere kleine Erfolge
+- Nutze Analogien und Beispiele aus dem Alltag
+- Strukturiere komplexe Themen in verdauliche Schritte
+
+## Fachgebiete
+- Mathematik (Grundschule bis Abitur)
+- Naturwissenschaften (Physik, Chemie, Biologie)
+- Sprachen (Deutsch, Englisch)
+- Gesellschaftswissenschaften (Geschichte, Politik)
+
+## Lernstrategien
+1. **Konzeptbasiertes Lernen**: Erklaere das "Warum" hinter Regeln
+2. **Visualisierung**: Nutze Diagramme und Skizzen wenn moeglich
+3. **Verbindungen herstellen**: Verknuepfe neues Wissen mit Bekanntem
+4. **Wiederholung**: Baue systematische Wiederholung ein
+5. **Selbsttest**: Ermutige zur Selbstueberpruefung
+
+## Einschraenkungen
+- Gib NIEMALS vollstaendige Loesungen fuer Hausaufgaben
+- Verweise bei komplexen Themen auf Lehrkraefte
+- Erkenne Frustration und biete Pausen an
+- Keine Unterstuetzung bei Pruefungsbetrug
+- Keine medizinischen oder rechtlichen Ratschlaege
+
+## Eskalation
+- Bei wiederholtem Unverstaendnis: Schlage alternatives Erklaerformat vor
+- Bei emotionaler Belastung: Empfehle Gespraech mit Vertrauensperson
+- Bei technischen Problemen: Eskaliere an Support
+- Bei Verdacht auf Lernschwierigkeiten: Empfehle professionelle Diagnostik
+
+## Metrik-Ziele
+- Verstaendnis-Score > 80% bei Nachfragen
+- Engagement-Zeit > 5 Minuten pro Session
+- Wiederbesuchs-Rate > 60%
+- Frustrations-Indikatoren < 10%`,
+    color: '#3b82f6',
+    status: 'running',
+    activeSessions: 12,
+    totalProcessed: 1847,
+    avgResponseTime: 234,
+    errorRate: 0.5,
+    lastRestart: '2025-01-14T08:30:00Z',
+    version: '1.2.0',
+    createdAt: '2024-11-01T00:00:00Z',
+    updatedAt: '2025-01-14T10:15:00Z'
+  },
+  'grader-agent': {
+    id: 'grader-agent',
+    name: 'GraderAgent',
+    description: 'Objektiver, fairer Pruefer von Schuelerarbeiten',
+    soulFile: 'grader-agent.soul.md',
+    soulContent: `# GraderAgent SOUL
+
+## Identitaet
+Du bist ein objektiver, fairer Pruefer von Schuelerarbeiten.
+Dein Ziel ist konstruktives Feedback, das zum Lernen motiviert.
+
+## Kernprinzipien
+- **Objektivitaet**: Bewerte nach festgelegten Kriterien, nicht nach Sympathie
+- **Fairness**: Gleiche Massstaebe fuer alle Schueler
+- **Konstruktivitaet**: Feedback soll zum Lernen anregen
+- **Transparenz**: Begruende jede Bewertung nachvollziehbar
+
+## Bewertungsprinzipien
+- Bewerte nach festgelegten Kriterien (Erwartungshorizont)
+- Beruecksichtige Teilleistungen
+- Unterscheide zwischen Fluechtigkeitsfehlern und Verstaendnisluecken
+- Formuliere Feedback lernfoerdernd
+- Nutze das 15-Punkte-System korrekt (0-15 Punkte, 5 = ausreichend)
+
+## Workflow
+1. Lies die Aufgabenstellung und den Erwartungshorizont
+2. Analysiere die Schuelerantwort systematisch
+3. Identifiziere korrekte Elemente
+4. Identifiziere Fehler mit Kategorisierung
+5. Vergebe Punkte nach Kriterienkatalog
+6. Formuliere konstruktives Feedback
+
+## Fehlerkategorien
+- **Rechtschreibung (R)**: Orthografische Fehler
+- **Grammatik (Gr)**: Grammatikalische Fehler
+- **Ausdruck (A)**: Stilistische Schwaechen
+- **Inhalt (I)**: Fachliche Fehler oder Luecken
+- **Struktur (St)**: Aufbau- und Gliederungsprobleme
+- **Logik (L)**: Argumentationsfehler
+
+## Qualitaetssicherung
+- Bei Unsicherheit: Markiere zur manuellen Ueberpruefung
+- Bei Grenzfaellen: Dokumentiere Entscheidungsgrundlage
+- Konsistenz: Vergleiche mit aehnlichen Bewertungen
+- Kalibrierung: Orientiere an Vergleichsarbeiten
+
+## Eskalation
+- Unleserliche Antworten: Markiere fuer manuelles Review
+- Verdacht auf Plagiat: Eskaliere an Lehrkraft
+- Technische Fehler: Pausiere und melde
+- Unklare Aufgabenstellung: Frage nach Klarstellung`,
+    color: '#10b981',
+    status: 'running',
+    activeSessions: 3,
+    totalProcessed: 456,
+    avgResponseTime: 1205,
+    errorRate: 1.2,
+    lastRestart: '2025-01-13T14:00:00Z',
+    version: '1.1.0',
+    createdAt: '2024-11-01T00:00:00Z',
+    updatedAt: '2025-01-13T16:30:00Z'
+  },
+  'quality-judge': {
+    id: 'quality-judge',
+    name: 'QualityJudge',
+    description: 'Kritischer Qualitaetspruefer fuer KI-generierte Inhalte',
+    soulFile: 'quality-judge.soul.md',
+    soulContent: `# QualityJudge SOUL
+
+## Identitaet
+Du bist ein kritischer Qualitaetspruefer fuer KI-generierte Inhalte.
+Dein Ziel ist die Sicherstellung hoher Qualitaetsstandards.
+
+## Bewertungsdimensionen
+
+### 1. Intent Accuracy (0-100)
+- Wurde die Benutzerabsicht korrekt erkannt?
+- Stimmt die Kategorie der Antwort?
+
+### 2. Faithfulness (1-5)
+- **5**: Vollstaendig faktisch korrekt
+- **4**: Minor Ungenauigkeiten ohne Auswirkung
+- **3**: Einige Ungenauigkeiten, Kernaussage korrekt
+- **2**: Signifikante Fehler
+- **1**: Grundlegend falsch
+
+### 3. Relevance (1-5)
+- **5**: Direkt und vollstaendig relevant
+- **4**: Weitgehend relevant
+- **3**: Teilweise relevant
+- **2**: Geringe Relevanz
+- **1**: Voellig irrelevant
+
+### 4. Coherence (1-5)
+- **5**: Perfekt strukturiert und logisch
+- **4**: Gut strukturiert, kleine Luecken
+- **3**: Verstaendlich, aber verbesserungsfaehig
+- **2**: Schwer zu folgen
+- **1**: Unverstaendlich/chaotisch
+
+### 5. Safety ("pass"/"fail")
+- Keine DSGVO-Verstoesse (keine PII)
+- Keine schaedlichen Inhalte
+- Keine Desinformation
+- Keine Diskriminierung
+- Altersgerechte Sprache
+
+## Schwellenwerte
+- **Production Ready**: composite >= 80
+- **Needs Review**: 60 <= composite < 80
+- **Failed**: composite < 60`,
+    color: '#f59e0b',
+    status: 'running',
+    activeSessions: 8,
+    totalProcessed: 3291,
+    avgResponseTime: 89,
+    errorRate: 0.3,
+    lastRestart: '2025-01-14T06:00:00Z',
+    version: '2.0.0',
+    createdAt: '2024-10-15T00:00:00Z',
+    updatedAt: '2025-01-14T08:00:00Z'
+  },
+  'alert-agent': {
+    id: 'alert-agent',
+    name: 'AlertAgent',
+    description: 'Aufmerksamer Waechter fuer das Breakpilot-System',
+    soulFile: 'alert-agent.soul.md',
+    soulContent: `# AlertAgent SOUL
+
+## Identitaet
+Du bist ein aufmerksamer Waechter fuer das Breakpilot-System.
+Dein Ziel ist die rechtzeitige Erkennung und Kommunikation relevanter Ereignisse.
+
+## Importance Levels
+
+### KRITISCH (5)
+- Systemausfaelle
+- Sicherheitsvorfaelle
+- DSGVO-Verstoesse
+**Aktion**: Sofortige Benachrichtigung aller Admins
+
+### DRINGEND (4)
+- Performance-Probleme
+- API-Ausfaelle
+- Hohe Fehlerraten
+**Aktion**: Benachrichtigung innerhalb 5 Minuten
+
+### WICHTIG (3)
+- Neue kritische Nachrichten
+- Relevante Bildungspolitik
+- Technische Warnungen
+**Aktion**: Taeglicher Digest
+
+### PRUEFEN (2)
+- Interessante Entwicklungen
+- Konkurrenznachrichten
+**Aktion**: Woechentlicher Digest
+
+### INFO (1)
+- Allgemeine Updates
+**Aktion**: Archivieren`,
+    color: '#ef4444',
+    status: 'running',
+    activeSessions: 1,
+    totalProcessed: 892,
+    avgResponseTime: 45,
+    errorRate: 0.1,
+    lastRestart: '2025-01-12T00:00:00Z',
+    version: '1.0.0',
+    createdAt: '2024-12-01T00:00:00Z',
+    updatedAt: '2025-01-12T02:00:00Z'
+  },
+  'orchestrator': {
+    id: 'orchestrator',
+    name: 'Orchestrator',
+    description: 'Zentraler Koordinator des Multi-Agent-Systems',
+    soulFile: 'orchestrator.soul.md',
+    soulContent: `# OrchestratorAgent SOUL
+
+## Identitaet
+Du bist der zentrale Koordinator des Breakpilot Multi-Agent-Systems.
+Dein Ziel ist die effiziente Verteilung und Ueberwachung von Aufgaben.
+
+## Kernprinzipien
+- **Effizienz**: Minimale Latenz bei maximaler Qualitaet
+- **Resilienz**: Graceful Degradation bei Agent-Ausfaellen
+- **Fairness**: Ausgewogene Lastverteilung
+- **Transparenz**: Volle Nachvollziehbarkeit aller Entscheidungen
+
+## Verantwortlichkeiten
+1. Task-Routing zu spezialisierten Agents
+2. Session-Management und Recovery
+3. Agent-Gesundheitsueberwachung
+4. Lastverteilung
+5. Fehlerbehandlung und Retry-Logik
+
+## Task-Routing-Logik
+
+| Intent-Kategorie | Primaerer Agent | Fallback |
+|------------------|-----------------|----------|
+| learning_support | TutorAgent | Manuell |
+| exam_grading | GraderAgent | QualityJudge |
+| quality_check | QualityJudge | Manual Review |
+| system_alert | AlertAgent | E-Mail Fallback |
+
+## Fehlerbehandlung
+
+### Retry-Policy
+- **Max Retries**: 3
+- **Backoff**: Exponential (1s, 2s, 4s)
+- **Keine Retries**: Validation Errors, Auth Failures
+
+### Circuit Breaker
+- **Threshold**: 5 Fehler in 60 Sekunden
+- **Cooldown**: 30 Sekunden
+
+## Metriken
+- **Task Completion Rate**: > 99%
+- **Average Latency**: < 2s
+- **Error Rate**: < 1%`,
+    color: '#8b5cf6',
+    status: 'running',
+    activeSessions: 24,
+    totalProcessed: 8934,
+    avgResponseTime: 12,
+    errorRate: 0.2,
+    lastRestart: '2025-01-14T00:00:00Z',
+    version: '1.5.0',
+    createdAt: '2024-10-01T00:00:00Z',
+    updatedAt: '2025-01-14T00:30:00Z'
+  }
+}
+
+export const mockChangeLogs: ChangeLog[] = [
+  { id: '1', timestamp: '2025-01-14T10:15:00Z', user: 'admin@breakpilot.de', action: 'SOUL Updated', description: 'Kommunikationsstil angepasst' },
+  { id: '2', timestamp: '2025-01-13T14:30:00Z', user: 'lehrer1@schule.de', action: 'Einschraenkung hinzugefuegt', description: 'Keine Hausaufgaben-Loesungen' },
+  { id: '3', timestamp: '2025-01-10T09:00:00Z', user: 'admin@breakpilot.de', action: 'Version 1.2.0', description: 'Neue Fachgebiete hinzugefuegt' },
+]
diff --git a/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/types.ts b/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/types.ts
new file mode 100644
index 0000000..1cc5fbb
--- /dev/null
+++ b/admin-lehrer/app/(admin)/ai/agents/[agentId]/_components/types.ts
@@ -0,0 +1,25 @@
+export interface AgentDetail {
+  id: string
+  name: string
+  description: string
+  soulFile: string
+  soulContent: string
+  color: string
+  status: 'running' | 'paused' | 'stopped' | 'error'
+  activeSessions: number
+  totalProcessed: number
+  avgResponseTime: number
+  errorRate: number
+  lastRestart: string
+  version: string
+  createdAt: string
+  updatedAt: string
+}
+
+export interface ChangeLog {
+  id: string
+  timestamp: string
+  user: string
+  action: string
+  description: string
+}
diff --git a/admin-lehrer/app/(admin)/ai/agents/[agentId]/page.tsx b/admin-lehrer/app/(admin)/ai/agents/[agentId]/page.tsx
index f1c5ca5..f3108fd 100644
--- a/admin-lehrer/app/(admin)/ai/agents/[agentId]/page.tsx
+++ b/admin-lehrer/app/(admin)/ai/agents/[agentId]/page.tsx
@@ -1,348 +1,29 @@
 'use client'
 
 import { useState, useEffect } from 'react'
-import { useParams, useRouter } from 'next/navigation'
+import { useParams } from 'next/navigation'
 import Link from 'next/link'
-import { Bot, Brain, ArrowLeft, Save, RotateCcw, Play, Pause, AlertTriangle, FileText, Settings, Activity, Clock, CheckCircle, XCircle, History, Eye, Edit3 } from 'lucide-react'
+import { AlertTriangle, FileText, Activity, History } from 'lucide-react'
+import { mockAgentDetails, mockChangeLogs } from './_components/mock-data'
+import {
+  AgentHeader,
+  AgentStatsBar,
+  SoulTabContent,
+  StatsTabContent,
+  HistoryTabContent,
+} from './_components'
+import type { AgentDetail } from './_components'
 
-// Types
-interface AgentDetail {
-  id: string
-  name: string
-  description: string
-  soulFile: string
-  soulContent: string
-  color: string
-  status: 'running' | 'paused' | 'stopped' | 'error'
-  activeSessions: number
-  totalProcessed: number
-  avgResponseTime: number
-  errorRate: number
-  lastRestart: string
-  version: string
-  createdAt: string
-  updatedAt: string
-}
+type TabId = 'soul' | 'stats' | 'history'
 
-interface ChangeLog {
-  id: string
-  timestamp: string
-  user: string
-  action: string
-  description: string
-}
-
-// Mock data
-const mockAgentDetails: Record<string, AgentDetail> = {
-  'tutor-agent': {
-    id: 'tutor-agent',
-    name: 'TutorAgent',
-    description: 'Geduldiger, ermutigender Lernbegleiter fuer Schueler',
-    soulFile: 'tutor-agent.soul.md',
-    soulContent: `# TutorAgent SOUL
-
-## Identitaet
-Du bist ein geduldiger, ermutigender Lernbegleiter fuer Schueler.
-Dein Ziel ist es, Verstaendnis zu foerdern, nicht Antworten vorzugeben.
-
-## Kernprinzipien
-- **Sokratische Methode**: Stelle Fragen, die zum Nachdenken anregen
-- **Positives Reinforcement**: Erkenne und feiere Lernfortschritte
-- **Adaptive Kommunikation**: Passe Sprache und Komplexitaet an das Niveau an
-- **Geduld**: Wiederhole Erklaerungen ohne Frustration zu zeigen
-
-## Kommunikationsstil
-- Verwende einfache, klare Sprache
-- Stelle Rueckfragen, um Verstaendnis zu pruefen
-- Gib Hinweise statt direkter Loesungen
-- Feiere kleine Erfolge
-- Nutze Analogien und Beispiele aus dem Alltag
-- Strukturiere komplexe Themen in verdauliche Schritte
-
-## Fachgebiete
-- Mathematik (Grundschule bis Abitur)
-- Naturwissenschaften (Physik, Chemie, Biologie)
-- Sprachen (Deutsch, Englisch)
-- Gesellschaftswissenschaften (Geschichte, Politik)
-
-## Lernstrategien
-1. **Konzeptbasiertes Lernen**: Erklaere das "Warum" hinter Regeln
-2. **Visualisierung**: Nutze Diagramme und Skizzen wenn moeglich
-3. **Verbindungen herstellen**: Verknuepfe neues Wissen mit Bekanntem
-4. **Wiederholung**: Baue systematische Wiederholung ein
-5. **Selbsttest**: Ermutige zur Selbstueberpruefung
-
-## Einschraenkungen
-- Gib NIEMALS vollstaendige Loesungen fuer Hausaufgaben
-- Verweise bei komplexen Themen auf Lehrkraefte
-- Erkenne Frustration und biete Pausen an
-- Keine Unterstuetzung bei Pruefungsbetrug
-- Keine medizinischen oder rechtlichen Ratschlaege
-
-## Eskalation
-- Bei wiederholtem Unverstaendnis: Schlage alternatives Erklaerformat vor
-- Bei emotionaler Belastung: Empfehle Gespraech mit Vertrauensperson
-- Bei technischen Problemen: Eskaliere an Support
-- Bei Verdacht auf Lernschwierigkeiten: Empfehle professionelle Diagnostik
-
-## Metrik-Ziele
-- Verstaendnis-Score > 80% bei Nachfragen
-- Engagement-Zeit > 5 Minuten pro Session
-- Wiederbesuchs-Rate > 60%
-- Frustrations-Indikatoren < 10%`,
-    color: '#3b82f6',
-    status: 'running',
-    activeSessions: 12,
-    totalProcessed: 1847,
-    avgResponseTime: 234,
-    errorRate: 0.5,
-    lastRestart: '2025-01-14T08:30:00Z',
-    version: '1.2.0',
-    createdAt: '2024-11-01T00:00:00Z',
-    updatedAt: '2025-01-14T10:15:00Z'
-  },
-  'grader-agent': {
-    id: 'grader-agent',
-    name: 'GraderAgent',
-    description: 'Objektiver, fairer Pruefer von Schuelerarbeiten',
-    soulFile: 'grader-agent.soul.md',
-    soulContent: `# GraderAgent SOUL
-
-## Identitaet
-Du bist ein objektiver, fairer Pruefer von Schuelerarbeiten.
-Dein Ziel ist konstruktives Feedback, das zum Lernen motiviert.
-
-## Kernprinzipien
-- **Objektivitaet**: Bewerte nach festgelegten Kriterien, nicht nach Sympathie
-- **Fairness**: Gleiche Massstaebe fuer alle Schueler
-- **Konstruktivitaet**: Feedback soll zum Lernen anregen
-- **Transparenz**: Begruende jede Bewertung nachvollziehbar
-
-## Bewertungsprinzipien
-- Bewerte nach festgelegten Kriterien (Erwartungshorizont)
-- Beruecksichtige Teilleistungen
-- Unterscheide zwischen Fluechtigkeitsfehlern und Verstaendnisluecken
-- Formuliere Feedback lernfoerdernd
-- Nutze das 15-Punkte-System korrekt (0-15 Punkte, 5 = ausreichend)
-
-## Workflow
-1. Lies die Aufgabenstellung und den Erwartungshorizont
-2. Analysiere die Schuelerantwort systematisch
-3. Identifiziere korrekte Elemente
-4. Identifiziere Fehler mit Kategorisierung
-5. Vergebe Punkte nach Kriterienkatalog
-6. Formuliere konstruktives Feedback
-
-## Fehlerkategorien
-- **Rechtschreibung (R)**: Orthografische Fehler
-- **Grammatik (Gr)**: Grammatikalische Fehler
-- **Ausdruck (A)**: Stilistische Schwaechen
-- **Inhalt (I)**: Fachliche Fehler oder Luecken
-- **Struktur (St)**: Aufbau- und Gliederungsprobleme
-- **Logik (L)**: Argumentationsfehler
-
-## Qualitaetssicherung
-- Bei Unsicherheit: Markiere zur manuellen Ueberpruefung
-- Bei Grenzfaellen: Dokumentiere Entscheidungsgrundlage
-- Konsistenz: Vergleiche mit aehnlichen Bewertungen
-- Kalibrierung: Orientiere an Vergleichsarbeiten
-
-## Eskalation
-- Unleserliche Antworten: Markiere fuer manuelles Review
-- Verdacht auf Plagiat: Eskaliere an Lehrkraft
-- Technische Fehler: Pausiere und melde
-- Unklare Aufgabenstellung: Frage nach Klarstellung`,
-    color: '#10b981',
-    status: 'running',
-    activeSessions: 3,
-    totalProcessed: 456,
-    avgResponseTime: 1205,
-    errorRate: 1.2,
-    lastRestart: '2025-01-13T14:00:00Z',
-    version: '1.1.0',
-    createdAt: '2024-11-01T00:00:00Z',
-    updatedAt: '2025-01-13T16:30:00Z'
-  },
-  'quality-judge': {
-    id: 'quality-judge',
-    name: 'QualityJudge',
-    description: 'Kritischer Qualitaetspruefer fuer KI-generierte Inhalte',
-    soulFile: 'quality-judge.soul.md',
-    soulContent: `# QualityJudge SOUL
-
-## Identitaet
-Du bist ein kritischer Qualitaetspruefer fuer KI-generierte Inhalte.
-Dein Ziel ist die Sicherstellung hoher Qualitaetsstandards.
-
-## Bewertungsdimensionen
-
-### 1. Intent Accuracy (0-100)
-- Wurde die Benutzerabsicht korrekt erkannt?
-- Stimmt die Kategorie der Antwort?
-
-### 2. Faithfulness (1-5)
-- **5**: Vollstaendig faktisch korrekt
-- **4**: Minor Ungenauigkeiten ohne Auswirkung
-- **3**: Einige Ungenauigkeiten, Kernaussage korrekt
-- **2**: Signifikante Fehler
-- **1**: Grundlegend falsch
-
-### 3. Relevance (1-5)
-- **5**: Direkt und vollstaendig relevant
-- **4**: Weitgehend relevant
-- **3**: Teilweise relevant
-- **2**: Geringe Relevanz
-- **1**: Voellig irrelevant
-
-### 4. Coherence (1-5)
-- **5**: Perfekt strukturiert und logisch
-- **4**: Gut strukturiert, kleine Luecken
-- **3**: Verstaendlich, aber verbesserungsfaehig
-- **2**: Schwer zu folgen
-- **1**: Unverstaendlich/chaotisch
-
-### 5. Safety ("pass"/"fail")
-- Keine DSGVO-Verstoesse (keine PII)
-- Keine schaedlichen Inhalte
-- Keine Desinformation
-- Keine Diskriminierung
-- Altersgerechte Sprache
-
-## Schwellenwerte
-- **Production Ready**: composite >= 80
-- **Needs Review**: 60 <= composite < 80
-- **Failed**: composite < 60`,
-    color: '#f59e0b',
-    status: 'running',
-    activeSessions: 8,
-    totalProcessed: 3291,
-    avgResponseTime: 89,
-    errorRate: 0.3,
-    lastRestart: '2025-01-14T06:00:00Z',
-    version: '2.0.0',
-    createdAt: '2024-10-15T00:00:00Z',
-    updatedAt: '2025-01-14T08:00:00Z'
-  },
-  'alert-agent': {
-    id: 'alert-agent',
-    name: 'AlertAgent',
-    description: 'Aufmerksamer Waechter fuer das Breakpilot-System',
-    soulFile: 'alert-agent.soul.md',
-    soulContent: `# AlertAgent SOUL
-
-## Identitaet
-Du bist ein aufmerksamer Waechter fuer das Breakpilot-System.
-Dein Ziel ist die rechtzeitige Erkennung und Kommunikation relevanter Ereignisse.
-
-## Importance Levels
-
-### KRITISCH (5)
-- Systemausfaelle
-- Sicherheitsvorfaelle
-- DSGVO-Verstoesse
-**Aktion**: Sofortige Benachrichtigung aller Admins
-
-### DRINGEND (4)
-- Performance-Probleme
-- API-Ausfaelle
-- Hohe Fehlerraten
-**Aktion**: Benachrichtigung innerhalb 5 Minuten
-
-### WICHTIG (3)
-- Neue kritische Nachrichten
-- Relevante Bildungspolitik
-- Technische Warnungen
-**Aktion**: Taeglicher Digest
-
-### PRUEFEN (2)
-- Interessante Entwicklungen
-- Konkurrenznachrichten
-**Aktion**: Woechentlicher Digest
-
-### INFO (1)
-- Allgemeine Updates
-**Aktion**: Archivieren`,
-    color: '#ef4444',
-    status: 'running',
-    activeSessions: 1,
-    totalProcessed: 892,
-    avgResponseTime: 45,
-    errorRate: 0.1,
-    lastRestart: '2025-01-12T00:00:00Z',
-    version: '1.0.0',
-    createdAt: '2024-12-01T00:00:00Z',
-    updatedAt: '2025-01-12T02:00:00Z'
-  },
-  'orchestrator': {
-    id: 'orchestrator',
-    name: 'Orchestrator',
-    description: 'Zentraler Koordinator des Multi-Agent-Systems',
-    soulFile: 'orchestrator.soul.md',
-    soulContent: `# OrchestratorAgent SOUL
-
-## Identitaet
-Du bist der zentrale Koordinator des Breakpilot Multi-Agent-Systems.
-Dein Ziel ist die effiziente Verteilung und Ueberwachung von Aufgaben.
-
-## Kernprinzipien
-- **Effizienz**: Minimale Latenz bei maximaler Qualitaet
-- **Resilienz**: Graceful Degradation bei Agent-Ausfaellen
-- **Fairness**: Ausgewogene Lastverteilung
-- **Transparenz**: Volle Nachvollziehbarkeit aller Entscheidungen
-
-## Verantwortlichkeiten
-1. Task-Routing zu spezialisierten Agents
-2. Session-Management und Recovery
-3. Agent-Gesundheitsueberwachung
-4. Lastverteilung
-5. Fehlerbehandlung und Retry-Logik
-
-## Task-Routing-Logik
-
-| Intent-Kategorie | Primaerer Agent | Fallback |
-|------------------|-----------------|----------|
-| learning_support | TutorAgent | Manuell |
-| exam_grading | GraderAgent | QualityJudge |
-| quality_check | QualityJudge | Manual Review |
-| system_alert | AlertAgent | E-Mail Fallback |
-
-## Fehlerbehandlung
-
-### Retry-Policy
-- **Max Retries**: 3
-- **Backoff**: Exponential (1s, 2s, 4s)
-- **Keine Retries**: Validation Errors, Auth Failures
-
-### Circuit Breaker
-- **Threshold**: 5 Fehler in 60 Sekunden
-- **Cooldown**: 30 Sekunden
-
-## Metriken
-- **Task Completion Rate**: > 99%
-- **Average Latency**: < 2s
-- **Error Rate**: < 1%`,
-    color: '#8b5cf6',
-    status: 'running',
-    activeSessions: 24,
-    totalProcessed: 8934,
-    avgResponseTime: 12,
-    errorRate: 0.2,
-    lastRestart: '2025-01-14T00:00:00Z',
-    version: '1.5.0',
-    createdAt: '2024-10-01T00:00:00Z',
-    updatedAt: '2025-01-14T00:30:00Z'
-  }
-}
-
-const mockChangeLogs: ChangeLog[] = [
-  { id: '1', timestamp: '2025-01-14T10:15:00Z', user: 'admin@breakpilot.de', action: 'SOUL Updated', description: 'Kommunikationsstil angepasst' },
-  { id: '2', timestamp: '2025-01-13T14:30:00Z', user: 'lehrer1@schule.de', action: 'Einschraenkung hinzugefuegt', description: 'Keine Hausaufgaben-Loesungen' },
-  { id: '3', timestamp: '2025-01-10T09:00:00Z', user: 'admin@breakpilot.de', action: 'Version 1.2.0', description: 'Neue Fachgebiete hinzugefuegt' },
+const TABS: { id: TabId; label: string; icon: typeof FileText }[] = [
+  { id: 'soul', label: 'SOUL-File', icon: FileText },
+  { id: 'stats', label: 'Live-Statistiken', icon: Activity },
+  { id: 'history', label: 'Aenderungshistorie', icon: History },
 ]
 
 export default function AgentDetailPage() {
   const params = useParams()
-  const router = useRouter()
   const agentId = params.agentId as string
 
   const [agent, setAgent] = useState<AgentDetail | null>(null)
@@ -350,10 +31,9 @@ export default function AgentDetailPage() {
   const [isEditing, setIsEditing] = useState(false)
   const [hasChanges, setHasChanges] = useState(false)
   const [saving, setSaving] = useState(false)
-  const [activeTab, setActiveTab] = useState<'soul' | 'stats' | 'history'>('soul')
+  const [activeTab, setActiveTab] = useState<TabId>('soul')
 
   useEffect(() => {
-    // Load agent data
     const agentData = mockAgentDetails[agentId]
     if (agentData) {
       setAgent(agentData)
@@ -363,10 +43,7 @@ export default function AgentDetailPage() {
 
   const handleSave = async () => {
     setSaving(true)
-    // In production, save to API
-    // await fetch(`/api/admin/agents/${agentId}/soul`, { method: 'PUT', body: editedContent })
     await new Promise(resolve => setTimeout(resolve, 1000))
-
     if (agent) {
       setAgent({ ...agent, soulContent: editedContent, updatedAt: new Date().toISOString() })
     }
@@ -393,7 +70,7 @@ export default function AgentDetailPage() {
         <div className="text-center py-12">
           <AlertTriangle className="w-12 h-12 text-amber-500 mx-auto mb-4" />
           <h2 className="text-xl font-semibold text-gray-900 mb-2">Agent nicht gefunden</h2>
-          <p className="text-gray-500 mb-4">Der Agent "{agentId}" existiert nicht.</p>
+          <p className="text-gray-500 mb-4">Der Agent &quot;{agentId}&quot; existiert nicht.</p>
           <Link href="/ai/agents" className="text-teal-600 hover:text-teal-700">
             &larr; Zurueck zur Uebersicht
           </Link>
@@ -404,231 +81,46 @@ export default function AgentDetailPage() {
 
   return (
     <div className="p-6 max-w-7xl mx-auto">
-      {/* Header */}
-      <div className="flex items-center justify-between mb-6">
-        <div className="flex items-center gap-4">
-          <Link
-            href="/ai/agents"
-            className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
-          >
-            <ArrowLeft className="w-5 h-5 text-gray-600" />
-          </Link>
-          <div
-            className="p-3 rounded-xl"
-            style={{ backgroundColor: `${agent.color}20` }}
-          >
-            <Brain className="w-6 h-6" style={{ color: agent.color }} />
-          </div>
-          <div>
-            <h1 className="text-2xl font-bold text-gray-900">{agent.name}</h1>
-            <p className="text-gray-500">{agent.description}</p>
-          </div>
-        </div>
-
-        <div className="flex items-center gap-3">
-          <div className={`flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-medium ${
-            agent.status === 'running' ? 'bg-green-100 text-green-700' :
-            agent.status === 'paused' ? 'bg-yellow-100 text-yellow-700' :
-            'bg-red-100 text-red-700'
-          }`}>
-            {agent.status === 'running' ? <CheckCircle className="w-4 h-4" /> :
-             agent.status === 'paused' ? <Pause className="w-4 h-4" /> :
-             <XCircle className="w-4 h-4" />}
-            {agent.status}
-          </div>
-          <button className="flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
-            {agent.status === 'running' ? (
-              <>
-                <Pause className="w-4 h-4" />
-                Pausieren
-              </>
-            ) : (
-              <>
-                <Play className="w-4 h-4" />
-                Starten
-              </>
-            )}
-          </button>
-        </div>
-      </div>
-
-      {/* Stats Bar */}
-      <div className="grid grid-cols-5 gap-4 mb-6">
-        <div className="bg-white border border-gray-200 rounded-lg p-4">
-          <div className="text-sm text-gray-500">Aktive Sessions</div>
-          <div className="text-2xl font-bold text-gray-900">{agent.activeSessions}</div>
-        </div>
-        <div className="bg-white border border-gray-200 rounded-lg p-4">
-          <div className="text-sm text-gray-500">Verarbeitet (24h)</div>
-          <div className="text-2xl font-bold text-gray-900">{agent.totalProcessed.toLocaleString()}</div>
-        </div>
-        <div className="bg-white border border-gray-200 rounded-lg p-4">
-          <div className="text-sm text-gray-500">Avg. Antwortzeit</div>
-          <div className="text-2xl font-bold text-gray-900">{agent.avgResponseTime}ms</div>
-        </div>
-        <div className="bg-white border border-gray-200 rounded-lg p-4">
-          <div className="text-sm text-gray-500">Fehlerrate</div>
-          <div className="text-2xl font-bold text-amber-600">{agent.errorRate}%</div>
-        </div>
-        <div className="bg-white border border-gray-200 rounded-lg p-4">
-          <div className="text-sm text-gray-500">Version</div>
-          <div className="text-2xl font-bold text-gray-900">{agent.version}</div>
-        </div>
-      </div>
+      <AgentHeader agent={agent} />
+      <AgentStatsBar agent={agent} />
 
       {/* Tabs */}
       <div className="bg-white border border-gray-200 rounded-xl overflow-hidden">
         <div className="border-b border-gray-200">
           <div className="flex">
-            <button
-              onClick={() => setActiveTab('soul')}
-              className={`flex items-center gap-2 px-6 py-4 text-sm font-medium border-b-2 transition-colors ${
-                activeTab === 'soul'
-                  ? 'border-teal-500 text-teal-600'
-                  : 'border-transparent text-gray-500 hover:text-gray-700'
-              }`}
-            >
-              <FileText className="w-4 h-4" />
-              SOUL-File
-            </button>
-            <button
-              onClick={() => setActiveTab('stats')}
-              className={`flex items-center gap-2 px-6 py-4 text-sm font-medium border-b-2 transition-colors ${
-                activeTab === 'stats'
-                  ? 'border-teal-500 text-teal-600'
-                  : 'border-transparent text-gray-500 hover:text-gray-700'
-              }`}
-            >
-              <Activity className="w-4 h-4" />
-              Live-Statistiken
-            </button>
-            <button
-              onClick={() => setActiveTab('history')}
-              className={`flex items-center gap-2 px-6 py-4 text-sm font-medium border-b-2 transition-colors ${
-                activeTab === 'history'
-                  ? 'border-teal-500 text-teal-600'
-                  : 'border-transparent text-gray-500 hover:text-gray-700'
-              }`}
-            >
-              <History className="w-4 h-4" />
-              Aenderungshistorie
-            </button>
+            {TABS.map(({ id, label, icon: Icon }) => (
+              <button
+                key={id}
+                onClick={() => setActiveTab(id)}
+                className={`flex items-center gap-2 px-6 py-4 text-sm font-medium border-b-2 transition-colors ${
+                  activeTab === id
+                    ? 'border-teal-500 text-teal-600'
+                    : 'border-transparent text-gray-500 hover:text-gray-700'
+                }`}
+              >
+                <Icon className="w-4 h-4" />
+                {label}
+              </button>
+            ))}
           </div>
         </div>
 
-        {/* Tab Content */}
         <div className="p-6">
           {activeTab === 'soul' && (
-            <div>
-              <div className="flex items-center justify-between mb-4">
-                <div className="flex items-center gap-2 text-sm text-gray-500">
-                  <FileText className="w-4 h-4" />
-                  {agent.soulFile}
-                  <span className="text-gray-300">|</span>
-                  <Clock className="w-4 h-4" />
-                  Zuletzt geaendert: {new Date(agent.updatedAt).toLocaleString('de-DE')}
-                </div>
-                <div className="flex items-center gap-2">
-                  {isEditing ? (
-                    <>
-                      <button
-                        onClick={handleReset}
-                        disabled={!hasChanges}
-                        className="flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors disabled:opacity-50"
-                      >
-                        <RotateCcw className="w-4 h-4" />
-                        Zuruecksetzen
-                      </button>
-                      <button
-                        onClick={handleSave}
-                        disabled={!hasChanges || saving}
-                        className="flex items-center gap-2 px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors disabled:opacity-50"
-                      >
-                        <Save className="w-4 h-4" />
-                        {saving ? 'Speichert...' : 'Speichern'}
-                      </button>
-                    </>
-                  ) : (
-                    <button
-                      onClick={() => setIsEditing(true)}
-                      className="flex items-center gap-2 px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors"
-                    >
-                      <Edit3 className="w-4 h-4" />
-                      Bearbeiten
-                    </button>
-                  )}
-                </div>
-              </div>
-
-              {hasChanges && (
-                <div className="mb-4 p-3 bg-amber-50 border border-amber-200 rounded-lg flex items-center gap-2 text-amber-700">
-                  <AlertTriangle className="w-4 h-4" />
-                  <span className="text-sm">Ungespeicherte Aenderungen vorhanden</span>
-                </div>
-              )}
-
-              <div className="relative">
-                {isEditing ? (
-                  <textarea
-                    value={editedContent}
-                    onChange={(e) => handleContentChange(e.target.value)}
-                    className="w-full h-[600px] p-4 font-mono text-sm bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent resize-none"
-                    spellCheck={false}
-                  />
-                ) : (
-                  <div className="w-full h-[600px] p-4 font-mono text-sm bg-gray-50 border border-gray-200 rounded-lg overflow-auto whitespace-pre-wrap">
-                    {agent.soulContent}
-                  </div>
-                )}
-              </div>
-
-              <div className="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
-                <h4 className="font-medium text-blue-900 mb-2">Hinweise zur SOUL-Datei</h4>
-                <ul className="text-sm text-blue-700 space-y-1">
-                  <li>• Die SOUL-Datei definiert die Persoenlichkeit und das Verhalten des Agents</li>
-                  <li>• Aenderungen werden nach dem Speichern sofort wirksam</li>
-                  <li>• Testen Sie Aenderungen zuerst im Staging-Modus</li>
-                  <li>• Alle Aenderungen werden in der Historie protokolliert</li>
-                </ul>
-              </div>
-            </div>
-          )}
-
-          {activeTab === 'stats' && (
-            <div className="space-y-6">
-              <div className="text-center py-12 text-gray-500">
-                <Activity className="w-12 h-12 mx-auto mb-4 text-gray-400" />
-                <p>Live-Statistiken werden in einer zukuenftigen Version verfuegbar sein.</p>
-                <p className="text-sm mt-2">
-                  Besuchen Sie die <Link href="/ai/agents/statistics" className="text-teal-600 hover:underline">Statistik-Seite</Link> fuer aggregierte Daten.
-                </p>
-              </div>
-            </div>
-          )}
-
-          {activeTab === 'history' && (
-            <div>
-              <div className="space-y-4">
-                {mockChangeLogs.map((log) => (
-                  <div key={log.id} className="flex items-start gap-4 p-4 bg-gray-50 rounded-lg">
-                    <div className="p-2 bg-white rounded-full border border-gray-200">
-                      <History className="w-4 h-4 text-gray-500" />
-                    </div>
-                    <div className="flex-1">
-                      <div className="flex items-center justify-between">
-                        <span className="font-medium text-gray-900">{log.action}</span>
-                        <span className="text-sm text-gray-500">
-                          {new Date(log.timestamp).toLocaleString('de-DE')}
-                        </span>
-                      </div>
-                      <p className="text-sm text-gray-600 mt-1">{log.description}</p>
-                      <p className="text-xs text-gray-400 mt-1">von {log.user}</p>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
+            <SoulTabContent
+              agent={agent}
+              editedContent={editedContent}
+              isEditing={isEditing}
+              hasChanges={hasChanges}
+              saving={saving}
+              onContentChange={handleContentChange}
+              onSave={handleSave}
+              onReset={handleReset}
+              onStartEditing={() => setIsEditing(true)}
+            />
           )}
+          {activeTab === 'stats' && <StatsTabContent />}
+          {activeTab === 'history' && <HistoryTabContent changeLogs={mockChangeLogs} />}
         </div>
       </div>
     </div>
diff --git a/admin-lehrer/app/(admin)/ai/agents/architecture/_components/AgentTypesSection.tsx b/admin-lehrer/app/(admin)/ai/agents/architecture/_components/AgentTypesSection.tsx
new file mode 100644
index 0000000..3f278cb
--- /dev/null
+++ b/admin-lehrer/app/(admin)/ai/agents/architecture/_components/AgentTypesSection.tsx
@@ -0,0 +1,120 @@
+import { Brain, CheckCircle, Shield, AlertTriangle, MessageSquare } from 'lucide-react'
+
+interface AgentCardProps {
+  icon: React.ReactNode
+  bgColor: string
+  hoverBorder: string
+  name: string
+  description: string
+  tags: { label: string; colorClasses: string }[]
+  soulInfo: string
+}
+
+function AgentCard({ icon, bgColor, hoverBorder, name, description, tags, soulInfo }: AgentCardProps) {
+  return (
+    <div className={`border border-gray-200 rounded-xl p-4 ${hoverBorder} transition-colors`}>
+      <div className="flex items-start gap-4">
+        <div className={`p-3 ${bgColor} rounded-lg`}>
+          {icon}
+        </div>
+        <div className="flex-1">
+          <h4 className="font-semibold text-gray-900">{name}</h4>
+          <p className="text-sm text-gray-600 mb-2">{description}</p>
+          <div className="flex flex-wrap gap-2">
+            {tags.map(tag => (
+              <span key={tag.label} className={`px-2 py-1 ${tag.colorClasses} text-xs rounded-full`}>
+                {tag.label}
+              </span>
+            ))}
+          </div>
+          <div className="mt-2 text-xs text-gray-500">{soulInfo}</div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const AGENTS: AgentCardProps[] = [
+  {
+    icon: <Brain className="w-6 h-6 text-blue-600" />,
+    bgColor: 'bg-blue-100',
+    hoverBorder: 'hover:border-blue-300',
+    name: 'TutorAgent',
+    description: 'Lernbegleitung und Fragen beantworten',
+    tags: [
+      { label: 'Geduldig', colorClasses: 'bg-blue-50 text-blue-700' },
+      { label: 'Ermutigend', colorClasses: 'bg-blue-50 text-blue-700' },
+      { label: 'Sokratisch', colorClasses: 'bg-blue-50 text-blue-700' },
+    ],
+    soulInfo: 'SOUL: tutor-agent.soul.md | Routing: learning_*, help_*, question_*',
+  },
+  {
+    icon: <CheckCircle className="w-6 h-6 text-green-600" />,
+    bgColor: 'bg-green-100',
+    hoverBorder: 'hover:border-green-300',
+    name: 'GraderAgent',
+    description: 'Klausur-Korrektur und Bewertung',
+    tags: [
+      { label: 'Objektiv', colorClasses: 'bg-green-50 text-green-700' },
+      { label: 'Fair', colorClasses: 'bg-green-50 text-green-700' },
+      { label: 'Konstruktiv', colorClasses: 'bg-green-50 text-green-700' },
+    ],
+    soulInfo: 'SOUL: grader-agent.soul.md | Routing: grade_*, evaluate_*, correct_*',
+  },
+  {
+    icon: <Shield className="w-6 h-6 text-amber-600" />,
+    bgColor: 'bg-amber-100',
+    hoverBorder: 'hover:border-amber-300',
+    name: 'QualityJudge',
+    description: 'BQAS Qualitaetspruefung',
+    tags: [
+      { label: 'Kritisch', colorClasses: 'bg-amber-50 text-amber-700' },
+      { label: 'Praezise', colorClasses: 'bg-amber-50 text-amber-700' },
+      { label: 'Schnell', colorClasses: 'bg-amber-50 text-amber-700' },
+    ],
+    soulInfo: 'SOUL: quality-judge.soul.md | Routing: quality_*, review_*, validate_*',
+  },
+  {
+    icon: <AlertTriangle className="w-6 h-6 text-red-600" />,
+    bgColor: 'bg-red-100',
+    hoverBorder: 'hover:border-red-300',
+    name: 'AlertAgent',
+    description: 'Monitoring und Benachrichtigungen',
+    tags: [
+      { label: 'Wachsam', colorClasses: 'bg-red-50 text-red-700' },
+      { label: 'Proaktiv', colorClasses: 'bg-red-50 text-red-700' },
+      { label: 'Priorisierend', colorClasses: 'bg-red-50 text-red-700' },
+    ],
+    soulInfo: 'SOUL: alert-agent.soul.md | Routing: alert_*, monitor_*, notify_*',
+  },
+  {
+    icon: <MessageSquare className="w-6 h-6 text-purple-600" />,
+    bgColor: 'bg-purple-100',
+    hoverBorder: 'hover:border-purple-300',
+    name: 'Orchestrator',
+    description: 'Task-Koordination und Routing',
+    tags: [
+      { label: 'Koordinierend', colorClasses: 'bg-purple-50 text-purple-700' },
+      { label: 'Effizient', colorClasses: 'bg-purple-50 text-purple-700' },
+      { label: 'Zuverlaessig', colorClasses: 'bg-purple-50 text-purple-700' },
+    ],
+    soulInfo: 'SOUL: orchestrator.soul.md | Routing: Fallback fuer alle unbekannten Intents',
+  },
+]
+
+export function AgentTypesSection() {
+  return (
+    <div className="space-y-4">
+      <p className="text-gray-600 mb-4">
+        Jeder Agent hat eine spezialisierte Rolle im System. Die Agents kommunizieren ueber den Message Bus
+        und nutzen das Shared Brain fuer konsistente Entscheidungen.
+      </p>
+
+      <div className="grid gap-4">
+        {AGENTS.map(agent => (
+          <AgentCard key={agent.name} {...agent} />
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/ai/agents/architecture/_components/DatabaseSchemaSection.tsx b/admin-lehrer/app/(admin)/ai/agents/architecture/_components/DatabaseSchemaSection.tsx
new file mode 100644
index 0000000..a172f94
--- /dev/null
+++ b/admin-lehrer/app/(admin)/ai/agents/architecture/_components/DatabaseSchemaSection.tsx
@@ -0,0 +1,73 @@
+export function DatabaseSchemaSection() {
+  return (
+    <div className="space-y-4">
+      <p className="text-gray-600 mb-4">
+        Das Agent-System nutzt PostgreSQL fuer persistente Daten und Valkey (Redis) fuer Caching und Pub/Sub.
+      </p>
+
+      <div className="space-y-4">
+        {/* agent_sessions */}
+        <div className="bg-white border border-gray-200 rounded-xl p-4">
+          <h4 className="font-semibold text-gray-900 mb-2 font-mono">agent_sessions</h4>
+          <p className="text-sm text-gray-600 mb-3">Speichert Session-Daten mit Checkpoints</p>
+          <div className="bg-gray-50 rounded-lg p-3 font-mono text-xs overflow-x-auto">
+            <pre>{`
+CREATE TABLE agent_sessions (
+    id UUID PRIMARY KEY,
+    agent_type VARCHAR(50) NOT NULL,
+    user_id UUID REFERENCES users(id),
+    state VARCHAR(20) NOT NULL DEFAULT 'active',
+    context JSONB DEFAULT '{}',
+    checkpoints JSONB DEFAULT '[]',
+    created_at TIMESTAMPTZ DEFAULT NOW(),
+    updated_at TIMESTAMPTZ DEFAULT NOW(),
+    last_heartbeat TIMESTAMPTZ DEFAULT NOW()
+);
+            `}</pre>
+          </div>
+        </div>
+
+        {/* agent_memory */}
+        <div className="bg-white border border-gray-200 rounded-xl p-4">
+          <h4 className="font-semibold text-gray-900 mb-2 font-mono">agent_memory</h4>
+          <p className="text-sm text-gray-600 mb-3">Langzeit-Gedaechtnis mit TTL</p>
+          <div className="bg-gray-50 rounded-lg p-3 font-mono text-xs overflow-x-auto">
+            <pre>{`
+CREATE TABLE agent_memory (
+    id UUID PRIMARY KEY,
+    namespace VARCHAR(100) NOT NULL,
+    key VARCHAR(500) NOT NULL,
+    value JSONB NOT NULL,
+    agent_id VARCHAR(50) NOT NULL,
+    access_count INTEGER DEFAULT 0,
+    created_at TIMESTAMPTZ DEFAULT NOW(),
+    expires_at TIMESTAMPTZ,
+    UNIQUE(namespace, key)
+);
+            `}</pre>
+          </div>
+        </div>
+
+        {/* agent_messages */}
+        <div className="bg-white border border-gray-200 rounded-xl p-4">
+          <h4 className="font-semibold text-gray-900 mb-2 font-mono">agent_messages</h4>
+          <p className="text-sm text-gray-600 mb-3">Audit-Trail fuer Inter-Agent Kommunikation</p>
+          <div className="bg-gray-50 rounded-lg p-3 font-mono text-xs overflow-x-auto">
+            <pre>{`
+CREATE TABLE agent_messages (
+    id UUID PRIMARY KEY,
+    sender VARCHAR(50) NOT NULL,
+    receiver VARCHAR(50) NOT NULL,
+    message_type VARCHAR(50) NOT NULL,
+    payload JSONB NOT NULL,
+    priority INTEGER DEFAULT 1,
+    correlation_id UUID,
+    created_at TIMESTAMPTZ DEFAULT NOW()
+);
+            `}</pre>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/ai/agents/architecture/_components/MessageBusSection.tsx b/admin-lehrer/app/(admin)/ai/agents/architecture/_components/MessageBusSection.tsx
new file mode 100644
index 0000000..2b9e4ed
--- /dev/null
+++ b/admin-lehrer/app/(admin)/ai/agents/architecture/_components/MessageBusSection.tsx
@@ -0,0 +1,75 @@
+export function MessageBusSection() {
+  return (
+    <div className="space-y-4">
+      <p className="text-gray-600 mb-4">
+        Der Message Bus ermoeglicht die asynchrone Kommunikation zwischen Agents via Redis Pub/Sub.
+        Er unterstuetzt Prioritaeten, Request-Response-Pattern und Broadcast-Nachrichten.
+      </p>
+
+      <div className="bg-gray-50 rounded-xl p-6 font-mono text-sm">
+        <div className="text-gray-500 mb-2"># Nachrichtenfluss</div>
+        <pre className="text-gray-700">{`
+┌──────────────┐                    ┌──────────────┐
+│   Sender     │                    │   Receiver   │
+│   (Agent)    │                    │   (Agent)    │
+└──────┬───────┘                    └──────▲───────┘
+       │                                   │
+       │ publish(AgentMessage)             │ handle(message)
+       │                                   │
+       ▼                                   │
+┌────────────────────────────────────────────────────────┐
+│                     Message Bus                         │
+│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐    │
+│  │ Priority Q  │  │   Routing   │  │   Logging   │    │
+│  │ HIGH/NORMAL │  │   Rules     │  │   Audit     │    │
+│  └─────────────┘  └─────────────┘  └─────────────┘    │
+│                                                         │
+│                 Redis Pub/Sub                          │
+└────────────────────────────────────────────────────────┘
+        `}</pre>
+      </div>
+
+      <div className="mt-6">
+        <h4 className="font-semibold text-gray-900 mb-3">Nachrichtentypen</h4>
+        <div className="overflow-x-auto">
+          <table className="min-w-full border border-gray-200 rounded-lg">
+            <thead className="bg-gray-50">
+              <tr>
+                <th className="px-4 py-2 text-left text-sm font-medium text-gray-900">Typ</th>
+                <th className="px-4 py-2 text-left text-sm font-medium text-gray-900">Prioritaet</th>
+                <th className="px-4 py-2 text-left text-sm font-medium text-gray-900">Beschreibung</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-200">
+              <tr>
+                <td className="px-4 py-2 text-sm font-mono text-gray-700">task_request</td>
+                <td className="px-4 py-2"><span className="px-2 py-1 bg-yellow-100 text-yellow-700 text-xs rounded">NORMAL</span></td>
+                <td className="px-4 py-2 text-sm text-gray-600">Neue Aufgabe an Agent senden</td>
+              </tr>
+              <tr>
+                <td className="px-4 py-2 text-sm font-mono text-gray-700">task_response</td>
+                <td className="px-4 py-2"><span className="px-2 py-1 bg-yellow-100 text-yellow-700 text-xs rounded">NORMAL</span></td>
+                <td className="px-4 py-2 text-sm text-gray-600">Antwort auf task_request</td>
+              </tr>
+              <tr>
+                <td className="px-4 py-2 text-sm font-mono text-gray-700">escalation</td>
+                <td className="px-4 py-2"><span className="px-2 py-1 bg-orange-100 text-orange-700 text-xs rounded">HIGH</span></td>
+                <td className="px-4 py-2 text-sm text-gray-600">Eskalation an anderen Agent</td>
+              </tr>
+              <tr>
+                <td className="px-4 py-2 text-sm font-mono text-gray-700">alert</td>
+                <td className="px-4 py-2"><span className="px-2 py-1 bg-red-100 text-red-700 text-xs rounded">CRITICAL</span></td>
+                <td className="px-4 py-2 text-sm text-gray-600">Kritische Benachrichtigung</td>
+              </tr>
+              <tr>
+                <td className="px-4 py-2 text-sm font-mono text-gray-700">heartbeat</td>
+                <td className="px-4 py-2"><span className="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded">LOW</span></td>
+                <td className="px-4 py-2 text-sm text-gray-600">Liveness-Signal</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/ai/agents/architecture/_components/OverviewSection.tsx b/admin-lehrer/app/(admin)/ai/agents/architecture/_components/OverviewSection.tsx
new file mode 100644
index 0000000..e81020e
--- /dev/null
+++ b/admin-lehrer/app/(admin)/ai/agents/architecture/_components/OverviewSection.tsx
@@ -0,0 +1,71 @@
+import { Server, Brain, GitBranch } from 'lucide-react'
+
+export function OverviewSection() {
+  return (
+    <div className="space-y-6">
+      <p className="text-gray-600">
+        Das Breakpilot Multi-Agent-System basiert auf dem Mission Control Konzept. Es ermoeglicht
+        die Koordination mehrerer spezialisierter KI-Agents, die gemeinsam komplexe Aufgaben loesen.
+      </p>
+
+      {/* Architecture Diagram */}
+      <div className="bg-gray-50 rounded-xl p-6 font-mono text-sm overflow-x-auto">
+        <pre className="text-gray-700">{`
+┌─────────────────────────────────────────────────────────────────┐
+│                     Breakpilot Services                          │
+│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────────┐  │
+│  │Voice Service│  │Klausur Svc  │  │  Admin-v2 / AlertAgent  │  │
+│  └──────┬──────┘  └──────┬──────┘  └───────────┬─────────────┘  │
+│         │                │                      │                │
+│         └────────────────┼──────────────────────┘                │
+│                          │                                       │
+│  ┌───────────────────────▼───────────────────────────────────┐  │
+│  │                    Agent Core                              │  │
+│  │  ┌─────────────┐  ┌─────────────┐  ┌───────────────────┐  │  │
+│  │  │   Sessions  │  │Shared Brain │  │   Orchestrator    │  │  │
+│  │  │ - Manager   │  │ - Memory    │  │ - Message Bus     │  │  │
+│  │  │ - Heartbeat │  │ - Context   │  │ - Supervisor      │  │  │
+│  │  │ - Checkpoint│  │ - Knowledge │  │ - Task Router     │  │  │
+│  │  └─────────────┘  └─────────────┘  └───────────────────┘  │  │
+│  └───────────────────────────────────────────────────────────┘  │
+│                          │                                       │
+│  ┌───────────────────────▼───────────────────────────────────┐  │
+│  │                   Infrastructure                           │  │
+│  │     Valkey (Redis)          PostgreSQL          Qdrant     │  │
+│  └───────────────────────────────────────────────────────────┘  │
+└─────────────────────────────────────────────────────────────────┘
+        `}</pre>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
+          <div className="flex items-center gap-2 mb-2">
+            <Server className="w-5 h-5 text-blue-600" />
+            <span className="font-semibold text-blue-900">Session Management</span>
+          </div>
+          <p className="text-sm text-blue-700">
+            Verwaltet Agent-Lifecycles mit State Machine, Checkpoints und automatischer Recovery.
+          </p>
+        </div>
+        <div className="bg-purple-50 border border-purple-200 rounded-xl p-4">
+          <div className="flex items-center gap-2 mb-2">
+            <Brain className="w-5 h-5 text-purple-600" />
+            <span className="font-semibold text-purple-900">Shared Brain</span>
+          </div>
+          <p className="text-sm text-purple-700">
+            Gemeinsames Gedaechtnis fuer alle Agents mit TTL, Context-Verwaltung und Knowledge Graph.
+          </p>
+        </div>
+        <div className="bg-green-50 border border-green-200 rounded-xl p-4">
+          <div className="flex items-center gap-2 mb-2">
+            <GitBranch className="w-5 h-5 text-green-600" />
+            <span className="font-semibold text-green-900">Orchestrator</span>
+          </div>
+          <p className="text-sm text-green-700">
+            Message Bus, Supervisor und Task Router fuer die Agent-Koordination.
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/ai/agents/architecture/_components/SessionLifecycleSection.tsx b/admin-lehrer/app/(admin)/ai/agents/architecture/_components/SessionLifecycleSection.tsx
new file mode 100644
index 0000000..0953cdf
--- /dev/null
+++ b/admin-lehrer/app/(admin)/ai/agents/architecture/_components/SessionLifecycleSection.tsx
@@ -0,0 +1,56 @@
+export function SessionLifecycleSection() {
+  return (
+    <div className="space-y-4">
+      <p className="text-gray-600 mb-4">
+        Sessions verwalten den Zustand von Agent-Interaktionen. Jede Session hat einen definierten
+        Lebenszyklus mit Checkpoints fuer Recovery.
+      </p>
+
+      <div className="bg-gray-50 rounded-xl p-6 font-mono text-sm">
+        <div className="text-gray-500 mb-2"># Session State Machine</div>
+        <pre className="text-gray-700">{`
+                    ┌─────────────────────────────────────┐
+                    │                                     │
+                    ▼                                     │
+┌──────────┐    ┌──────────┐    ┌──────────┐    ┌──────────┐
+│  ACTIVE  │───▶│  PAUSED  │───▶│ COMPLETED│    │  FAILED  │
+└──────────┘    └──────────┘    └──────────┘    └──────────┘
+     │               │                               ▲
+     │               │                               │
+     └───────────────┴───────────────────────────────┘
+                          (bei Fehler)
+
+States:
+- ACTIVE: Session laeuft, Agent verarbeitet Tasks
+- PAUSED: Session pausiert, wartet auf Eingabe
+- COMPLETED: Session erfolgreich beendet
+- FAILED: Session mit Fehler beendet
+        `}</pre>
+      </div>
+
+      <div className="mt-6">
+        <h4 className="font-semibold text-gray-900 mb-3">Heartbeat Monitoring</h4>
+        <div className="bg-white border border-gray-200 rounded-xl p-5">
+          <div className="grid grid-cols-3 gap-4 text-center">
+            <div>
+              <div className="text-2xl font-bold text-gray-900">30s</div>
+              <div className="text-sm text-gray-500">Timeout</div>
+            </div>
+            <div>
+              <div className="text-2xl font-bold text-gray-900">5s</div>
+              <div className="text-sm text-gray-500">Check Interval</div>
+            </div>
+            <div>
+              <div className="text-2xl font-bold text-gray-900">3</div>
+              <div className="text-sm text-gray-500">Max Missed Beats</div>
+            </div>
+          </div>
+          <p className="text-sm text-gray-600 mt-4 text-center">
+            Nach 3 verpassten Heartbeats wird der Agent als ausgefallen markiert und die
+            Restart-Policy greift (max. 3 Versuche).
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/ai/agents/architecture/_components/SharedBrainSection.tsx b/admin-lehrer/app/(admin)/ai/agents/architecture/_components/SharedBrainSection.tsx
new file mode 100644
index 0000000..c9b4447
--- /dev/null
+++ b/admin-lehrer/app/(admin)/ai/agents/architecture/_components/SharedBrainSection.tsx
@@ -0,0 +1,83 @@
+import { Database, Activity, GitBranch } from 'lucide-react'
+
+export function SharedBrainSection() {
+  return (
+    <div className="space-y-4">
+      <p className="text-gray-600 mb-4">
+        Das Shared Brain speichert Wissen und Kontext, auf den alle Agents zugreifen koennen.
+        Es besteht aus drei Komponenten: Memory Store, Context Manager und Knowledge Graph.
+      </p>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div className="bg-white border border-gray-200 rounded-xl p-5">
+          <div className="flex items-center gap-2 mb-3">
+            <Database className="w-5 h-5 text-blue-600" />
+            <h4 className="font-semibold text-gray-900">Memory Store</h4>
+          </div>
+          <p className="text-sm text-gray-600 mb-3">
+            Langzeit-Gedaechtnis fuer Fakten, Entscheidungen und Lernfortschritte.
+          </p>
+          <ul className="text-xs text-gray-500 space-y-1">
+            <li>- TTL-basierte Expiration (30 Tage default)</li>
+            <li>- Access-Tracking (Haeufigkeit)</li>
+            <li>- Pattern-basierte Suche</li>
+            <li>- Hybrid: Redis + PostgreSQL</li>
+          </ul>
+        </div>
+
+        <div className="bg-white border border-gray-200 rounded-xl p-5">
+          <div className="flex items-center gap-2 mb-3">
+            <Activity className="w-5 h-5 text-purple-600" />
+            <h4 className="font-semibold text-gray-900">Context Manager</h4>
+          </div>
+          <p className="text-sm text-gray-600 mb-3">
+            Verwaltet Konversationskontext mit automatischer Komprimierung.
+          </p>
+          <ul className="text-xs text-gray-500 space-y-1">
+            <li>- Max 50 Messages pro Context</li>
+            <li>- Automatische Zusammenfassung</li>
+            <li>- System-Messages bleiben erhalten</li>
+            <li>- Entity-Extraktion</li>
+          </ul>
+        </div>
+
+        <div className="bg-white border border-gray-200 rounded-xl p-5">
+          <div className="flex items-center gap-2 mb-3">
+            <GitBranch className="w-5 h-5 text-green-600" />
+            <h4 className="font-semibold text-gray-900">Knowledge Graph</h4>
+          </div>
+          <p className="text-sm text-gray-600 mb-3">
+            Graph-basierte Darstellung von Entitaeten und ihren Beziehungen.
+          </p>
+          <ul className="text-xs text-gray-500 space-y-1">
+            <li>- Entitaeten: Student, Lehrer, Fach</li>
+            <li>- Beziehungen: lernt, unterrichtet</li>
+            <li>- BFS-basierte Pfadsuche</li>
+            <li>- Verwandte Entitaeten finden</li>
+          </ul>
+        </div>
+      </div>
+
+      <div className="bg-gray-50 rounded-xl p-6 font-mono text-sm mt-6">
+        <div className="text-gray-500 mb-2"># Memory Store Beispiel</div>
+        <pre className="text-gray-700">{`
+# Speichern
+await store.remember(
+    key="student:123:progress",
+    value={"level": 5, "score": 85, "topic": "algebra"},
+    agent_id="tutor-agent",
+    ttl_days=30
+)
+
+# Abrufen
+progress = await store.recall("student:123:progress")
+# → {"level": 5, "score": 85, "topic": "algebra"}
+
+# Suchen
+all_progress = await store.search("student:123:*")
+# → [Memory(...), Memory(...), ...]
+        `}</pre>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/ai/agents/architecture/_components/SoulFilesSection.tsx b/admin-lehrer/app/(admin)/ai/agents/architecture/_components/SoulFilesSection.tsx
new file mode 100644
index 0000000..4e85f8d
--- /dev/null
+++ b/admin-lehrer/app/(admin)/ai/agents/architecture/_components/SoulFilesSection.tsx
@@ -0,0 +1,68 @@
+export function SoulFilesSection() {
+  return (
+    <div className="space-y-4">
+      <p className="text-gray-600 mb-4">
+        SOUL-Dateien (Semantic Outline for Unified Learning) definieren die Persoenlichkeit und
+        Verhaltensregeln jedes Agents. Sie bestimmen, wie ein Agent kommuniziert, entscheidet und eskaliert.
+      </p>
+
+      <div className="bg-gray-900 rounded-xl p-6 text-gray-100 font-mono text-sm overflow-x-auto">
+        <div className="text-gray-400 mb-4"># Beispiel: tutor-agent.soul.md</div>
+        <pre className="text-green-400">{`
+# TutorAgent SOUL
+
+## Identitaet
+Du bist ein geduldiger, ermutigender Lernbegleiter fuer Schueler.
+Dein Ziel ist es, Verstaendnis zu foerdern, nicht Antworten vorzugeben.
+
+## Kommunikationsstil
+- Verwende einfache, klare Sprache
+- Stelle Rueckfragen, um Verstaendnis zu pruefen
+- Gib Hinweise statt direkter Loesungen
+- Feiere kleine Erfolge
+
+## Fachgebiete
+- Mathematik (Grundschule bis Abitur)
+- Naturwissenschaften (Physik, Chemie, Biologie)
+- Sprachen (Deutsch, Englisch)
+
+## Einschraenkungen
+- Gib NIEMALS vollstaendige Loesungen fuer Hausaufgaben
+- Verweise bei komplexen Themen auf Lehrkraefte
+- Erkenne Frustration und biete Pausen an
+
+## Eskalation
+- Bei wiederholtem Unverstaendnis: Schlage alternatives Erklaerformat vor
+- Bei emotionaler Belastung: Empfehle Gespraech mit Vertrauensperson
+- Bei technischen Problemen: Eskaliere an Support
+        `}</pre>
+      </div>
+
+      <div className="mt-6">
+        <h4 className="font-semibold text-gray-900 mb-3">SOUL-Struktur</h4>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="bg-white border border-gray-200 rounded-lg p-4">
+            <h5 className="font-medium text-gray-900 mb-2">Identitaet</h5>
+            <p className="text-sm text-gray-600">Wer ist der Agent? Welche Rolle nimmt er ein?</p>
+          </div>
+          <div className="bg-white border border-gray-200 rounded-lg p-4">
+            <h5 className="font-medium text-gray-900 mb-2">Kommunikationsstil</h5>
+            <p className="text-sm text-gray-600">Wie kommuniziert der Agent mit Benutzern?</p>
+          </div>
+          <div className="bg-white border border-gray-200 rounded-lg p-4">
+            <h5 className="font-medium text-gray-900 mb-2">Fachgebiete</h5>
+            <p className="text-sm text-gray-600">In welchen Bereichen ist der Agent kompetent?</p>
+          </div>
+          <div className="bg-white border border-gray-200 rounded-lg p-4">
+            <h5 className="font-medium text-gray-900 mb-2">Einschraenkungen</h5>
+            <p className="text-sm text-gray-600">Was darf der Agent NICHT tun?</p>
+          </div>
+          <div className="bg-white border border-gray-200 rounded-lg p-4 md:col-span-2">
+            <h5 className="font-medium text-gray-900 mb-2">Eskalation</h5>
+            <p className="text-sm text-gray-600">Wann und wie eskaliert der Agent an andere Agents oder Menschen?</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/ai/agents/architecture/_components/TaskRoutingSection.tsx b/admin-lehrer/app/(admin)/ai/agents/architecture/_components/TaskRoutingSection.tsx
new file mode 100644
index 0000000..51574a2
--- /dev/null
+++ b/admin-lehrer/app/(admin)/ai/agents/architecture/_components/TaskRoutingSection.tsx
@@ -0,0 +1,82 @@
+export function TaskRoutingSection() {
+  return (
+    <div className="space-y-4">
+      <p className="text-gray-600 mb-4">
+        Der Task Router entscheidet, welcher Agent eine Anfrage bearbeitet. Er verwendet
+        Intent-basierte Regeln mit Prioritaeten und Fallback-Ketten.
+      </p>
+
+      <div className="overflow-x-auto">
+        <table className="min-w-full border border-gray-200 rounded-lg">
+          <thead className="bg-gray-50">
+            <tr>
+              <th className="px-4 py-2 text-left text-sm font-medium text-gray-900">Intent-Pattern</th>
+              <th className="px-4 py-2 text-left text-sm font-medium text-gray-900">Ziel-Agent</th>
+              <th className="px-4 py-2 text-left text-sm font-medium text-gray-900">Prioritaet</th>
+              <th className="px-4 py-2 text-left text-sm font-medium text-gray-900">Fallback</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-200">
+            <tr>
+              <td className="px-4 py-2 text-sm font-mono text-blue-700">learning_*</td>
+              <td className="px-4 py-2 text-sm text-gray-700">TutorAgent</td>
+              <td className="px-4 py-2 text-sm text-gray-700">10</td>
+              <td className="px-4 py-2 text-sm text-gray-500">Orchestrator</td>
+            </tr>
+            <tr>
+              <td className="px-4 py-2 text-sm font-mono text-blue-700">help_*, question_*</td>
+              <td className="px-4 py-2 text-sm text-gray-700">TutorAgent</td>
+              <td className="px-4 py-2 text-sm text-gray-700">8</td>
+              <td className="px-4 py-2 text-sm text-gray-500">Orchestrator</td>
+            </tr>
+            <tr>
+              <td className="px-4 py-2 text-sm font-mono text-green-700">grade_*, evaluate_*</td>
+              <td className="px-4 py-2 text-sm text-gray-700">GraderAgent</td>
+              <td className="px-4 py-2 text-sm text-gray-700">10</td>
+              <td className="px-4 py-2 text-sm text-gray-500">Orchestrator</td>
+            </tr>
+            <tr>
+              <td className="px-4 py-2 text-sm font-mono text-amber-700">quality_*, review_*</td>
+              <td className="px-4 py-2 text-sm text-gray-700">QualityJudge</td>
+              <td className="px-4 py-2 text-sm text-gray-700">10</td>
+              <td className="px-4 py-2 text-sm text-gray-500">GraderAgent</td>
+            </tr>
+            <tr>
+              <td className="px-4 py-2 text-sm font-mono text-red-700">alert_*, monitor_*</td>
+              <td className="px-4 py-2 text-sm text-gray-700">AlertAgent</td>
+              <td className="px-4 py-2 text-sm text-gray-700">10</td>
+              <td className="px-4 py-2 text-sm text-gray-500">Orchestrator</td>
+            </tr>
+            <tr className="bg-gray-50">
+              <td className="px-4 py-2 text-sm font-mono text-gray-500">* (alle anderen)</td>
+              <td className="px-4 py-2 text-sm text-gray-700">Orchestrator</td>
+              <td className="px-4 py-2 text-sm text-gray-700">0</td>
+              <td className="px-4 py-2 text-sm text-gray-500">-</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="bg-white border border-gray-200 rounded-xl p-4">
+          <h4 className="font-semibold text-gray-900 mb-2">Routing-Strategien</h4>
+          <ul className="text-sm text-gray-600 space-y-2">
+            <li><span className="font-mono text-blue-600">ROUND_ROBIN</span> - Gleichmaessige Verteilung</li>
+            <li><span className="font-mono text-blue-600">LEAST_LOADED</span> - Agent mit wenigsten Tasks</li>
+            <li><span className="font-mono text-blue-600">PRIORITY</span> - Hoechste Prioritaet zuerst</li>
+            <li><span className="font-mono text-blue-600">RANDOM</span> - Zufaellige Auswahl</li>
+          </ul>
+        </div>
+        <div className="bg-white border border-gray-200 rounded-xl p-4">
+          <h4 className="font-semibold text-gray-900 mb-2">Fallback-Verhalten</h4>
+          <ul className="text-sm text-gray-600 space-y-2">
+            <li>1. Versuche Ziel-Agent zu erreichen</li>
+            <li>2. Bei Timeout: Fallback-Agent nutzen</li>
+            <li>3. Bei Fehler: Orchestrator uebernimmt</li>
+            <li>4. Bei kritischen Fehlern: Alert an Admin</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/ai/agents/architecture/_components/index.ts b/admin-lehrer/app/(admin)/ai/agents/architecture/_components/index.ts
new file mode 100644
index 0000000..927dd12
--- /dev/null
+++ b/admin-lehrer/app/(admin)/ai/agents/architecture/_components/index.ts
@@ -0,0 +1,9 @@
+export { OverviewSection } from './OverviewSection'
+export { AgentTypesSection } from './AgentTypesSection'
+export { SoulFilesSection } from './SoulFilesSection'
+export { MessageBusSection } from './MessageBusSection'
+export { SharedBrainSection } from './SharedBrainSection'
+export { TaskRoutingSection } from './TaskRoutingSection'
+export { SessionLifecycleSection } from './SessionLifecycleSection'
+export { DatabaseSchemaSection } from './DatabaseSchemaSection'
+export type { Section } from './types'
diff --git a/admin-lehrer/app/(admin)/ai/agents/architecture/_components/types.ts b/admin-lehrer/app/(admin)/ai/agents/architecture/_components/types.ts
new file mode 100644
index 0000000..452b75c
--- /dev/null
+++ b/admin-lehrer/app/(admin)/ai/agents/architecture/_components/types.ts
@@ -0,0 +1,6 @@
+export interface Section {
+  id: string
+  title: string
+  icon: React.ReactNode
+  content: React.ReactNode
+}
diff --git a/admin-lehrer/app/(admin)/ai/agents/architecture/page.tsx b/admin-lehrer/app/(admin)/ai/agents/architecture/page.tsx
index 7fce202..4a1eaca 100644
--- a/admin-lehrer/app/(admin)/ai/agents/architecture/page.tsx
+++ b/admin-lehrer/app/(admin)/ai/agents/architecture/page.tsx
@@ -2,17 +2,78 @@
 
 import { useState } from 'react'
 import Link from 'next/link'
-import { ArrowLeft, Cpu, Brain, MessageSquare, Database, Activity, Shield, ChevronDown, ChevronRight, GitBranch, Layers, Server, FileText, AlertTriangle, CheckCircle, Zap, RefreshCw } from 'lucide-react'
+import {
+  ArrowLeft, Cpu, Brain, MessageSquare, Database,
+  Activity, ChevronDown, ChevronRight, GitBranch,
+  Layers, FileText, Zap, RefreshCw,
+} from 'lucide-react'
+import {
+  OverviewSection,
+  AgentTypesSection,
+  SoulFilesSection,
+  MessageBusSection,
+  SharedBrainSection,
+  TaskRoutingSection,
+  SessionLifecycleSection,
+  DatabaseSchemaSection,
+} from './_components'
+import type { Section } from './_components'
 
-interface Section {
-  id: string
-  title: string
-  icon: React.ReactNode
-  content: React.ReactNode
-}
+const SECTIONS: Section[] = [
+  {
+    id: 'overview',
+    title: 'System-Uebersicht',
+    icon: <Layers className="w-5 h-5" />,
+    content: <OverviewSection />,
+  },
+  {
+    id: 'agents',
+    title: 'Agent-Typen',
+    icon: <Cpu className="w-5 h-5" />,
+    content: <AgentTypesSection />,
+  },
+  {
+    id: 'soul-files',
+    title: 'SOUL-Files (Persoenlichkeiten)',
+    icon: <FileText className="w-5 h-5" />,
+    content: <SoulFilesSection />,
+  },
+  {
+    id: 'message-bus',
+    title: 'Message Bus & Kommunikation',
+    icon: <MessageSquare className="w-5 h-5" />,
+    content: <MessageBusSection />,
+  },
+  {
+    id: 'shared-brain',
+    title: 'Shared Brain (Gedaechtnis)',
+    icon: <Brain className="w-5 h-5" />,
+    content: <SharedBrainSection />,
+  },
+  {
+    id: 'task-routing',
+    title: 'Task Routing',
+    icon: <Zap className="w-5 h-5" />,
+    content: <TaskRoutingSection />,
+  },
+  {
+    id: 'session-lifecycle',
+    title: 'Session Lifecycle',
+    icon: <RefreshCw className="w-5 h-5" />,
+    content: <SessionLifecycleSection />,
+  },
+  {
+    id: 'database',
+    title: 'Datenbank-Schema',
+    icon: <Database className="w-5 h-5" />,
+    content: <DatabaseSchemaSection />,
+  },
+]
 
 export default function ArchitecturePage() {
-  const [expandedSections, setExpandedSections] = useState<string[]>(['overview', 'agents', 'soul-files'])
+  const [expandedSections, setExpandedSections] = useState<string[]>([
+    'overview', 'agents', 'soul-files',
+  ])
 
   const toggleSection = (id: string) => {
     setExpandedSections(prev =>
@@ -22,654 +83,6 @@ export default function ArchitecturePage() {
     )
   }
 
-  const sections: Section[] = [
-    {
-      id: 'overview',
-      title: 'System-Uebersicht',
-      icon: <Layers className="w-5 h-5" />,
-      content: (
-        <div className="space-y-6">
-          <p className="text-gray-600">
-            Das Breakpilot Multi-Agent-System basiert auf dem Mission Control Konzept. Es ermoeglicht
-            die Koordination mehrerer spezialisierter KI-Agents, die gemeinsam komplexe Aufgaben loesen.
-          </p>
-
-          {/* Architecture Diagram */}
-          <div className="bg-gray-50 rounded-xl p-6 font-mono text-sm overflow-x-auto">
-            <pre className="text-gray-700">{`
-┌─────────────────────────────────────────────────────────────────┐
-│                     Breakpilot Services                          │
-│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────────┐  │
-│  │Voice Service│  │Klausur Svc  │  │  Admin-v2 / AlertAgent  │  │
-│  └──────┬──────┘  └──────┬──────┘  └───────────┬─────────────┘  │
-│         │                │                      │                │
-│         └────────────────┼──────────────────────┘                │
-│                          │                                       │
-│  ┌───────────────────────▼───────────────────────────────────┐  │
-│  │                    Agent Core                              │  │
-│  │  ┌─────────────┐  ┌─────────────┐  ┌───────────────────┐  │  │
-│  │  │   Sessions  │  │Shared Brain │  │   Orchestrator    │  │  │
-│  │  │ - Manager   │  │ - Memory    │  │ - Message Bus     │  │  │
-│  │  │ - Heartbeat │  │ - Context   │  │ - Supervisor      │  │  │
-│  │  │ - Checkpoint│  │ - Knowledge │  │ - Task Router     │  │  │
-│  │  └─────────────┘  └─────────────┘  └───────────────────┘  │  │
-│  └───────────────────────────────────────────────────────────┘  │
-│                          │                                       │
-│  ┌───────────────────────▼───────────────────────────────────┐  │
-│  │                   Infrastructure                           │  │
-│  │     Valkey (Redis)          PostgreSQL          Qdrant     │  │
-│  └───────────────────────────────────────────────────────────┘  │
-└─────────────────────────────────────────────────────────────────┘
-            `}</pre>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
-              <div className="flex items-center gap-2 mb-2">
-                <Server className="w-5 h-5 text-blue-600" />
-                <span className="font-semibold text-blue-900">Session Management</span>
-              </div>
-              <p className="text-sm text-blue-700">
-                Verwaltet Agent-Lifecycles mit State Machine, Checkpoints und automatischer Recovery.
-              </p>
-            </div>
-            <div className="bg-purple-50 border border-purple-200 rounded-xl p-4">
-              <div className="flex items-center gap-2 mb-2">
-                <Brain className="w-5 h-5 text-purple-600" />
-                <span className="font-semibold text-purple-900">Shared Brain</span>
-              </div>
-              <p className="text-sm text-purple-700">
-                Gemeinsames Gedaechtnis fuer alle Agents mit TTL, Context-Verwaltung und Knowledge Graph.
-              </p>
-            </div>
-            <div className="bg-green-50 border border-green-200 rounded-xl p-4">
-              <div className="flex items-center gap-2 mb-2">
-                <GitBranch className="w-5 h-5 text-green-600" />
-                <span className="font-semibold text-green-900">Orchestrator</span>
-              </div>
-              <p className="text-sm text-green-700">
-                Message Bus, Supervisor und Task Router fuer die Agent-Koordination.
-              </p>
-            </div>
-          </div>
-        </div>
-      )
-    },
-    {
-      id: 'agents',
-      title: 'Agent-Typen',
-      icon: <Cpu className="w-5 h-5" />,
-      content: (
-        <div className="space-y-4">
-          <p className="text-gray-600 mb-4">
-            Jeder Agent hat eine spezialisierte Rolle im System. Die Agents kommunizieren ueber den Message Bus
-            und nutzen das Shared Brain fuer konsistente Entscheidungen.
-          </p>
-
-          <div className="grid gap-4">
-            {/* TutorAgent */}
-            <div className="border border-gray-200 rounded-xl p-4 hover:border-blue-300 transition-colors">
-              <div className="flex items-start gap-4">
-                <div className="p-3 bg-blue-100 rounded-lg">
-                  <Brain className="w-6 h-6 text-blue-600" />
-                </div>
-                <div className="flex-1">
-                  <h4 className="font-semibold text-gray-900">TutorAgent</h4>
-                  <p className="text-sm text-gray-600 mb-2">Lernbegleitung und Fragen beantworten</p>
-                  <div className="flex flex-wrap gap-2">
-                    <span className="px-2 py-1 bg-blue-50 text-blue-700 text-xs rounded-full">Geduldig</span>
-                    <span className="px-2 py-1 bg-blue-50 text-blue-700 text-xs rounded-full">Ermutigend</span>
-                    <span className="px-2 py-1 bg-blue-50 text-blue-700 text-xs rounded-full">Sokratisch</span>
-                  </div>
-                  <div className="mt-2 text-xs text-gray-500">
-                    SOUL: tutor-agent.soul.md | Routing: learning_*, help_*, question_*
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            {/* GraderAgent */}
-            <div className="border border-gray-200 rounded-xl p-4 hover:border-green-300 transition-colors">
-              <div className="flex items-start gap-4">
-                <div className="p-3 bg-green-100 rounded-lg">
-                  <CheckCircle className="w-6 h-6 text-green-600" />
-                </div>
-                <div className="flex-1">
-                  <h4 className="font-semibold text-gray-900">GraderAgent</h4>
-                  <p className="text-sm text-gray-600 mb-2">Klausur-Korrektur und Bewertung</p>
-                  <div className="flex flex-wrap gap-2">
-                    <span className="px-2 py-1 bg-green-50 text-green-700 text-xs rounded-full">Objektiv</span>
-                    <span className="px-2 py-1 bg-green-50 text-green-700 text-xs rounded-full">Fair</span>
-                    <span className="px-2 py-1 bg-green-50 text-green-700 text-xs rounded-full">Konstruktiv</span>
-                  </div>
-                  <div className="mt-2 text-xs text-gray-500">
-                    SOUL: grader-agent.soul.md | Routing: grade_*, evaluate_*, correct_*
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            {/* QualityJudge */}
-            <div className="border border-gray-200 rounded-xl p-4 hover:border-amber-300 transition-colors">
-              <div className="flex items-start gap-4">
-                <div className="p-3 bg-amber-100 rounded-lg">
-                  <Shield className="w-6 h-6 text-amber-600" />
-                </div>
-                <div className="flex-1">
-                  <h4 className="font-semibold text-gray-900">QualityJudge</h4>
-                  <p className="text-sm text-gray-600 mb-2">BQAS Qualitaetspruefung</p>
-                  <div className="flex flex-wrap gap-2">
-                    <span className="px-2 py-1 bg-amber-50 text-amber-700 text-xs rounded-full">Kritisch</span>
-                    <span className="px-2 py-1 bg-amber-50 text-amber-700 text-xs rounded-full">Praezise</span>
-                    <span className="px-2 py-1 bg-amber-50 text-amber-700 text-xs rounded-full">Schnell</span>
-                  </div>
-                  <div className="mt-2 text-xs text-gray-500">
-                    SOUL: quality-judge.soul.md | Routing: quality_*, review_*, validate_*
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            {/* AlertAgent */}
-            <div className="border border-gray-200 rounded-xl p-4 hover:border-red-300 transition-colors">
-              <div className="flex items-start gap-4">
-                <div className="p-3 bg-red-100 rounded-lg">
-                  <AlertTriangle className="w-6 h-6 text-red-600" />
-                </div>
-                <div className="flex-1">
-                  <h4 className="font-semibold text-gray-900">AlertAgent</h4>
-                  <p className="text-sm text-gray-600 mb-2">Monitoring und Benachrichtigungen</p>
-                  <div className="flex flex-wrap gap-2">
-                    <span className="px-2 py-1 bg-red-50 text-red-700 text-xs rounded-full">Wachsam</span>
-                    <span className="px-2 py-1 bg-red-50 text-red-700 text-xs rounded-full">Proaktiv</span>
-                    <span className="px-2 py-1 bg-red-50 text-red-700 text-xs rounded-full">Priorisierend</span>
-                  </div>
-                  <div className="mt-2 text-xs text-gray-500">
-                    SOUL: alert-agent.soul.md | Routing: alert_*, monitor_*, notify_*
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            {/* Orchestrator */}
-            <div className="border border-gray-200 rounded-xl p-4 hover:border-purple-300 transition-colors">
-              <div className="flex items-start gap-4">
-                <div className="p-3 bg-purple-100 rounded-lg">
-                  <MessageSquare className="w-6 h-6 text-purple-600" />
-                </div>
-                <div className="flex-1">
-                  <h4 className="font-semibold text-gray-900">Orchestrator</h4>
-                  <p className="text-sm text-gray-600 mb-2">Task-Koordination und Routing</p>
-                  <div className="flex flex-wrap gap-2">
-                    <span className="px-2 py-1 bg-purple-50 text-purple-700 text-xs rounded-full">Koordinierend</span>
-                    <span className="px-2 py-1 bg-purple-50 text-purple-700 text-xs rounded-full">Effizient</span>
-                    <span className="px-2 py-1 bg-purple-50 text-purple-700 text-xs rounded-full">Zuverlaessig</span>
-                  </div>
-                  <div className="mt-2 text-xs text-gray-500">
-                    SOUL: orchestrator.soul.md | Routing: Fallback fuer alle unbekannten Intents
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      )
-    },
-    {
-      id: 'soul-files',
-      title: 'SOUL-Files (Persoenlichkeiten)',
-      icon: <FileText className="w-5 h-5" />,
-      content: (
-        <div className="space-y-4">
-          <p className="text-gray-600 mb-4">
-            SOUL-Dateien (Semantic Outline for Unified Learning) definieren die Persoenlichkeit und
-            Verhaltensregeln jedes Agents. Sie bestimmen, wie ein Agent kommuniziert, entscheidet und eskaliert.
-          </p>
-
-          <div className="bg-gray-900 rounded-xl p-6 text-gray-100 font-mono text-sm overflow-x-auto">
-            <div className="text-gray-400 mb-4"># Beispiel: tutor-agent.soul.md</div>
-            <pre className="text-green-400">{`
-# TutorAgent SOUL
-
-## Identitaet
-Du bist ein geduldiger, ermutigender Lernbegleiter fuer Schueler.
-Dein Ziel ist es, Verstaendnis zu foerdern, nicht Antworten vorzugeben.
-
-## Kommunikationsstil
-- Verwende einfache, klare Sprache
-- Stelle Rueckfragen, um Verstaendnis zu pruefen
-- Gib Hinweise statt direkter Loesungen
-- Feiere kleine Erfolge
-
-## Fachgebiete
-- Mathematik (Grundschule bis Abitur)
-- Naturwissenschaften (Physik, Chemie, Biologie)
-- Sprachen (Deutsch, Englisch)
-
-## Einschraenkungen
-- Gib NIEMALS vollstaendige Loesungen fuer Hausaufgaben
-- Verweise bei komplexen Themen auf Lehrkraefte
-- Erkenne Frustration und biete Pausen an
-
-## Eskalation
-- Bei wiederholtem Unverstaendnis: Schlage alternatives Erklaerformat vor
-- Bei emotionaler Belastung: Empfehle Gespraech mit Vertrauensperson
-- Bei technischen Problemen: Eskaliere an Support
-            `}</pre>
-          </div>
-
-          <div className="mt-6">
-            <h4 className="font-semibold text-gray-900 mb-3">SOUL-Struktur</h4>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div className="bg-white border border-gray-200 rounded-lg p-4">
-                <h5 className="font-medium text-gray-900 mb-2">Identitaet</h5>
-                <p className="text-sm text-gray-600">Wer ist der Agent? Welche Rolle nimmt er ein?</p>
-              </div>
-              <div className="bg-white border border-gray-200 rounded-lg p-4">
-                <h5 className="font-medium text-gray-900 mb-2">Kommunikationsstil</h5>
-                <p className="text-sm text-gray-600">Wie kommuniziert der Agent mit Benutzern?</p>
-              </div>
-              <div className="bg-white border border-gray-200 rounded-lg p-4">
-                <h5 className="font-medium text-gray-900 mb-2">Fachgebiete</h5>
-                <p className="text-sm text-gray-600">In welchen Bereichen ist der Agent kompetent?</p>
-              </div>
-              <div className="bg-white border border-gray-200 rounded-lg p-4">
-                <h5 className="font-medium text-gray-900 mb-2">Einschraenkungen</h5>
-                <p className="text-sm text-gray-600">Was darf der Agent NICHT tun?</p>
-              </div>
-              <div className="bg-white border border-gray-200 rounded-lg p-4 md:col-span-2">
-                <h5 className="font-medium text-gray-900 mb-2">Eskalation</h5>
-                <p className="text-sm text-gray-600">Wann und wie eskaliert der Agent an andere Agents oder Menschen?</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      )
-    },
-    {
-      id: 'message-bus',
-      title: 'Message Bus & Kommunikation',
-      icon: <MessageSquare className="w-5 h-5" />,
-      content: (
-        <div className="space-y-4">
-          <p className="text-gray-600 mb-4">
-            Der Message Bus ermoeglicht die asynchrone Kommunikation zwischen Agents via Redis Pub/Sub.
-            Er unterstuetzt Prioritaeten, Request-Response-Pattern und Broadcast-Nachrichten.
-          </p>
-
-          <div className="bg-gray-50 rounded-xl p-6 font-mono text-sm">
-            <div className="text-gray-500 mb-2"># Nachrichtenfluss</div>
-            <pre className="text-gray-700">{`
-┌──────────────┐                    ┌──────────────┐
-│   Sender     │                    │   Receiver   │
-│   (Agent)    │                    │   (Agent)    │
-└──────┬───────┘                    └──────▲───────┘
-       │                                   │
-       │ publish(AgentMessage)             │ handle(message)
-       │                                   │
-       ▼                                   │
-┌────────────────────────────────────────────────────────┐
-│                     Message Bus                         │
-│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐    │
-│  │ Priority Q  │  │   Routing   │  │   Logging   │    │
-│  │ HIGH/NORMAL │  │   Rules     │  │   Audit     │    │
-│  └─────────────┘  └─────────────┘  └─────────────┘    │
-│                                                         │
-│                 Redis Pub/Sub                          │
-└────────────────────────────────────────────────────────┘
-            `}</pre>
-          </div>
-
-          <div className="mt-6">
-            <h4 className="font-semibold text-gray-900 mb-3">Nachrichtentypen</h4>
-            <div className="overflow-x-auto">
-              <table className="min-w-full border border-gray-200 rounded-lg">
-                <thead className="bg-gray-50">
-                  <tr>
-                    <th className="px-4 py-2 text-left text-sm font-medium text-gray-900">Typ</th>
-                    <th className="px-4 py-2 text-left text-sm font-medium text-gray-900">Prioritaet</th>
-                    <th className="px-4 py-2 text-left text-sm font-medium text-gray-900">Beschreibung</th>
-                  </tr>
-                </thead>
-                <tbody className="divide-y divide-gray-200">
-                  <tr>
-                    <td className="px-4 py-2 text-sm font-mono text-gray-700">task_request</td>
-                    <td className="px-4 py-2"><span className="px-2 py-1 bg-yellow-100 text-yellow-700 text-xs rounded">NORMAL</span></td>
-                    <td className="px-4 py-2 text-sm text-gray-600">Neue Aufgabe an Agent senden</td>
-                  </tr>
-                  <tr>
-                    <td className="px-4 py-2 text-sm font-mono text-gray-700">task_response</td>
-                    <td className="px-4 py-2"><span className="px-2 py-1 bg-yellow-100 text-yellow-700 text-xs rounded">NORMAL</span></td>
-                    <td className="px-4 py-2 text-sm text-gray-600">Antwort auf task_request</td>
-                  </tr>
-                  <tr>
-                    <td className="px-4 py-2 text-sm font-mono text-gray-700">escalation</td>
-                    <td className="px-4 py-2"><span className="px-2 py-1 bg-orange-100 text-orange-700 text-xs rounded">HIGH</span></td>
-                    <td className="px-4 py-2 text-sm text-gray-600">Eskalation an anderen Agent</td>
-                  </tr>
-                  <tr>
-                    <td className="px-4 py-2 text-sm font-mono text-gray-700">alert</td>
-                    <td className="px-4 py-2"><span className="px-2 py-1 bg-red-100 text-red-700 text-xs rounded">CRITICAL</span></td>
-                    <td className="px-4 py-2 text-sm text-gray-600">Kritische Benachrichtigung</td>
-                  </tr>
-                  <tr>
-                    <td className="px-4 py-2 text-sm font-mono text-gray-700">heartbeat</td>
-                    <td className="px-4 py-2"><span className="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded">LOW</span></td>
-                    <td className="px-4 py-2 text-sm text-gray-600">Liveness-Signal</td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-      )
-    },
-    {
-      id: 'shared-brain',
-      title: 'Shared Brain (Gedaechtnis)',
-      icon: <Brain className="w-5 h-5" />,
-      content: (
-        <div className="space-y-4">
-          <p className="text-gray-600 mb-4">
-            Das Shared Brain speichert Wissen und Kontext, auf den alle Agents zugreifen koennen.
-            Es besteht aus drei Komponenten: Memory Store, Context Manager und Knowledge Graph.
-          </p>
-
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <div className="bg-white border border-gray-200 rounded-xl p-5">
-              <div className="flex items-center gap-2 mb-3">
-                <Database className="w-5 h-5 text-blue-600" />
-                <h4 className="font-semibold text-gray-900">Memory Store</h4>
-              </div>
-              <p className="text-sm text-gray-600 mb-3">
-                Langzeit-Gedaechtnis fuer Fakten, Entscheidungen und Lernfortschritte.
-              </p>
-              <ul className="text-xs text-gray-500 space-y-1">
-                <li>- TTL-basierte Expiration (30 Tage default)</li>
-                <li>- Access-Tracking (Haeufigkeit)</li>
-                <li>- Pattern-basierte Suche</li>
-                <li>- Hybrid: Redis + PostgreSQL</li>
-              </ul>
-            </div>
-
-            <div className="bg-white border border-gray-200 rounded-xl p-5">
-              <div className="flex items-center gap-2 mb-3">
-                <Activity className="w-5 h-5 text-purple-600" />
-                <h4 className="font-semibold text-gray-900">Context Manager</h4>
-              </div>
-              <p className="text-sm text-gray-600 mb-3">
-                Verwaltet Konversationskontext mit automatischer Komprimierung.
-              </p>
-              <ul className="text-xs text-gray-500 space-y-1">
-                <li>- Max 50 Messages pro Context</li>
-                <li>- Automatische Zusammenfassung</li>
-                <li>- System-Messages bleiben erhalten</li>
-                <li>- Entity-Extraktion</li>
-              </ul>
-            </div>
-
-            <div className="bg-white border border-gray-200 rounded-xl p-5">
-              <div className="flex items-center gap-2 mb-3">
-                <GitBranch className="w-5 h-5 text-green-600" />
-                <h4 className="font-semibold text-gray-900">Knowledge Graph</h4>
-              </div>
-              <p className="text-sm text-gray-600 mb-3">
-                Graph-basierte Darstellung von Entitaeten und ihren Beziehungen.
-              </p>
-              <ul className="text-xs text-gray-500 space-y-1">
-                <li>- Entitaeten: Student, Lehrer, Fach</li>
-                <li>- Beziehungen: lernt, unterrichtet</li>
-                <li>- BFS-basierte Pfadsuche</li>
-                <li>- Verwandte Entitaeten finden</li>
-              </ul>
-            </div>
-          </div>
-
-          <div className="bg-gray-50 rounded-xl p-6 font-mono text-sm mt-6">
-            <div className="text-gray-500 mb-2"># Memory Store Beispiel</div>
-            <pre className="text-gray-700">{`
-# Speichern
-await store.remember(
-    key="student:123:progress",
-    value={"level": 5, "score": 85, "topic": "algebra"},
-    agent_id="tutor-agent",
-    ttl_days=30
-)
-
-# Abrufen
-progress = await store.recall("student:123:progress")
-# → {"level": 5, "score": 85, "topic": "algebra"}
-
-# Suchen
-all_progress = await store.search("student:123:*")
-# → [Memory(...), Memory(...), ...]
-            `}</pre>
-          </div>
-        </div>
-      )
-    },
-    {
-      id: 'task-routing',
-      title: 'Task Routing',
-      icon: <Zap className="w-5 h-5" />,
-      content: (
-        <div className="space-y-4">
-          <p className="text-gray-600 mb-4">
-            Der Task Router entscheidet, welcher Agent eine Anfrage bearbeitet. Er verwendet
-            Intent-basierte Regeln mit Prioritaeten und Fallback-Ketten.
-          </p>
-
-          <div className="overflow-x-auto">
-            <table className="min-w-full border border-gray-200 rounded-lg">
-              <thead className="bg-gray-50">
-                <tr>
-                  <th className="px-4 py-2 text-left text-sm font-medium text-gray-900">Intent-Pattern</th>
-                  <th className="px-4 py-2 text-left text-sm font-medium text-gray-900">Ziel-Agent</th>
-                  <th className="px-4 py-2 text-left text-sm font-medium text-gray-900">Prioritaet</th>
-                  <th className="px-4 py-2 text-left text-sm font-medium text-gray-900">Fallback</th>
-                </tr>
-              </thead>
-              <tbody className="divide-y divide-gray-200">
-                <tr>
-                  <td className="px-4 py-2 text-sm font-mono text-blue-700">learning_*</td>
-                  <td className="px-4 py-2 text-sm text-gray-700">TutorAgent</td>
-                  <td className="px-4 py-2 text-sm text-gray-700">10</td>
-                  <td className="px-4 py-2 text-sm text-gray-500">Orchestrator</td>
-                </tr>
-                <tr>
-                  <td className="px-4 py-2 text-sm font-mono text-blue-700">help_*, question_*</td>
-                  <td className="px-4 py-2 text-sm text-gray-700">TutorAgent</td>
-                  <td className="px-4 py-2 text-sm text-gray-700">8</td>
-                  <td className="px-4 py-2 text-sm text-gray-500">Orchestrator</td>
-                </tr>
-                <tr>
-                  <td className="px-4 py-2 text-sm font-mono text-green-700">grade_*, evaluate_*</td>
-                  <td className="px-4 py-2 text-sm text-gray-700">GraderAgent</td>
-                  <td className="px-4 py-2 text-sm text-gray-700">10</td>
-                  <td className="px-4 py-2 text-sm text-gray-500">Orchestrator</td>
-                </tr>
-                <tr>
-                  <td className="px-4 py-2 text-sm font-mono text-amber-700">quality_*, review_*</td>
-                  <td className="px-4 py-2 text-sm text-gray-700">QualityJudge</td>
-                  <td className="px-4 py-2 text-sm text-gray-700">10</td>
-                  <td className="px-4 py-2 text-sm text-gray-500">GraderAgent</td>
-                </tr>
-                <tr>
-                  <td className="px-4 py-2 text-sm font-mono text-red-700">alert_*, monitor_*</td>
-                  <td className="px-4 py-2 text-sm text-gray-700">AlertAgent</td>
-                  <td className="px-4 py-2 text-sm text-gray-700">10</td>
-                  <td className="px-4 py-2 text-sm text-gray-500">Orchestrator</td>
-                </tr>
-                <tr className="bg-gray-50">
-                  <td className="px-4 py-2 text-sm font-mono text-gray-500">* (alle anderen)</td>
-                  <td className="px-4 py-2 text-sm text-gray-700">Orchestrator</td>
-                  <td className="px-4 py-2 text-sm text-gray-700">0</td>
-                  <td className="px-4 py-2 text-sm text-gray-500">-</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-
-          <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div className="bg-white border border-gray-200 rounded-xl p-4">
-              <h4 className="font-semibold text-gray-900 mb-2">Routing-Strategien</h4>
-              <ul className="text-sm text-gray-600 space-y-2">
-                <li><span className="font-mono text-blue-600">ROUND_ROBIN</span> - Gleichmaessige Verteilung</li>
-                <li><span className="font-mono text-blue-600">LEAST_LOADED</span> - Agent mit wenigsten Tasks</li>
-                <li><span className="font-mono text-blue-600">PRIORITY</span> - Hoechste Prioritaet zuerst</li>
-                <li><span className="font-mono text-blue-600">RANDOM</span> - Zufaellige Auswahl</li>
-              </ul>
-            </div>
-            <div className="bg-white border border-gray-200 rounded-xl p-4">
-              <h4 className="font-semibold text-gray-900 mb-2">Fallback-Verhalten</h4>
-              <ul className="text-sm text-gray-600 space-y-2">
-                <li>1. Versuche Ziel-Agent zu erreichen</li>
-                <li>2. Bei Timeout: Fallback-Agent nutzen</li>
-                <li>3. Bei Fehler: Orchestrator uebernimmt</li>
-                <li>4. Bei kritischen Fehlern: Alert an Admin</li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      )
-    },
-    {
-      id: 'session-lifecycle',
-      title: 'Session Lifecycle',
-      icon: <RefreshCw className="w-5 h-5" />,
-      content: (
-        <div className="space-y-4">
-          <p className="text-gray-600 mb-4">
-            Sessions verwalten den Zustand von Agent-Interaktionen. Jede Session hat einen definierten
-            Lebenszyklus mit Checkpoints fuer Recovery.
-          </p>
-
-          <div className="bg-gray-50 rounded-xl p-6 font-mono text-sm">
-            <div className="text-gray-500 mb-2"># Session State Machine</div>
-            <pre className="text-gray-700">{`
-                    ┌─────────────────────────────────────┐
-                    │                                     │
-                    ▼                                     │
-┌──────────┐    ┌──────────┐    ┌──────────┐    ┌──────────┐
-│  ACTIVE  │───▶│  PAUSED  │───▶│ COMPLETED│    │  FAILED  │
-└──────────┘    └──────────┘    └──────────┘    └──────────┘
-     │               │                               ▲
-     │               │                               │
-     └───────────────┴───────────────────────────────┘
-                          (bei Fehler)
-
-States:
-- ACTIVE: Session laeuft, Agent verarbeitet Tasks
-- PAUSED: Session pausiert, wartet auf Eingabe
-- COMPLETED: Session erfolgreich beendet
-- FAILED: Session mit Fehler beendet
-            `}</pre>
-          </div>
-
-          <div className="mt-6">
-            <h4 className="font-semibold text-gray-900 mb-3">Heartbeat Monitoring</h4>
-            <div className="bg-white border border-gray-200 rounded-xl p-5">
-              <div className="grid grid-cols-3 gap-4 text-center">
-                <div>
-                  <div className="text-2xl font-bold text-gray-900">30s</div>
-                  <div className="text-sm text-gray-500">Timeout</div>
-                </div>
-                <div>
-                  <div className="text-2xl font-bold text-gray-900">5s</div>
-                  <div className="text-sm text-gray-500">Check Interval</div>
-                </div>
-                <div>
-                  <div className="text-2xl font-bold text-gray-900">3</div>
-                  <div className="text-sm text-gray-500">Max Missed Beats</div>
-                </div>
-              </div>
-              <p className="text-sm text-gray-600 mt-4 text-center">
-                Nach 3 verpassten Heartbeats wird der Agent als ausgefallen markiert und die
-                Restart-Policy greift (max. 3 Versuche).
-              </p>
-            </div>
-          </div>
-        </div>
-      )
-    },
-    {
-      id: 'database',
-      title: 'Datenbank-Schema',
-      icon: <Database className="w-5 h-5" />,
-      content: (
-        <div className="space-y-4">
-          <p className="text-gray-600 mb-4">
-            Das Agent-System nutzt PostgreSQL fuer persistente Daten und Valkey (Redis) fuer Caching und Pub/Sub.
-          </p>
-
-          <div className="space-y-4">
-            {/* agent_sessions */}
-            <div className="bg-white border border-gray-200 rounded-xl p-4">
-              <h4 className="font-semibold text-gray-900 mb-2 font-mono">agent_sessions</h4>
-              <p className="text-sm text-gray-600 mb-3">Speichert Session-Daten mit Checkpoints</p>
-              <div className="bg-gray-50 rounded-lg p-3 font-mono text-xs overflow-x-auto">
-                <pre>{`
-CREATE TABLE agent_sessions (
-    id UUID PRIMARY KEY,
-    agent_type VARCHAR(50) NOT NULL,
-    user_id UUID REFERENCES users(id),
-    state VARCHAR(20) NOT NULL DEFAULT 'active',
-    context JSONB DEFAULT '{}',
-    checkpoints JSONB DEFAULT '[]',
-    created_at TIMESTAMPTZ DEFAULT NOW(),
-    updated_at TIMESTAMPTZ DEFAULT NOW(),
-    last_heartbeat TIMESTAMPTZ DEFAULT NOW()
-);
-                `}</pre>
-              </div>
-            </div>
-
-            {/* agent_memory */}
-            <div className="bg-white border border-gray-200 rounded-xl p-4">
-              <h4 className="font-semibold text-gray-900 mb-2 font-mono">agent_memory</h4>
-              <p className="text-sm text-gray-600 mb-3">Langzeit-Gedaechtnis mit TTL</p>
-              <div className="bg-gray-50 rounded-lg p-3 font-mono text-xs overflow-x-auto">
-                <pre>{`
-CREATE TABLE agent_memory (
-    id UUID PRIMARY KEY,
-    namespace VARCHAR(100) NOT NULL,
-    key VARCHAR(500) NOT NULL,
-    value JSONB NOT NULL,
-    agent_id VARCHAR(50) NOT NULL,
-    access_count INTEGER DEFAULT 0,
-    created_at TIMESTAMPTZ DEFAULT NOW(),
-    expires_at TIMESTAMPTZ,
-    UNIQUE(namespace, key)
-);
-                `}</pre>
-              </div>
-            </div>
-
-            {/* agent_messages */}
-            <div className="bg-white border border-gray-200 rounded-xl p-4">
-              <h4 className="font-semibold text-gray-900 mb-2 font-mono">agent_messages</h4>
-              <p className="text-sm text-gray-600 mb-3">Audit-Trail fuer Inter-Agent Kommunikation</p>
-              <div className="bg-gray-50 rounded-lg p-3 font-mono text-xs overflow-x-auto">
-                <pre>{`
-CREATE TABLE agent_messages (
-    id UUID PRIMARY KEY,
-    sender VARCHAR(50) NOT NULL,
-    receiver VARCHAR(50) NOT NULL,
-    message_type VARCHAR(50) NOT NULL,
-    payload JSONB NOT NULL,
-    priority INTEGER DEFAULT 1,
-    correlation_id UUID,
-    created_at TIMESTAMPTZ DEFAULT NOW()
-);
-                `}</pre>
-              </div>
-            </div>
-          </div>
-        </div>
-      )
-    }
-  ]
-
   return (
     <div className="p-6 max-w-5xl mx-auto">
       {/* Header */}
@@ -696,7 +109,7 @@ CREATE TABLE agent_messages (
       <div className="bg-gray-50 rounded-xl p-5 mb-8">
         <h2 className="font-semibold text-gray-900 mb-3">Inhaltsverzeichnis</h2>
         <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
-          {sections.map(section => (
+          {SECTIONS.map(section => (
             <button
               key={section.id}
               onClick={() => {
@@ -716,7 +129,7 @@ CREATE TABLE agent_messages (
 
       {/* Sections */}
       <div className="space-y-4">
-        {sections.map(section => (
+        {SECTIONS.map(section => (
           <div
             key={section.id}
             id={section.id}
@@ -749,7 +162,7 @@ CREATE TABLE agent_messages (
 
       {/* Footer Links */}
       <div className="mt-8 bg-teal-50 border border-teal-200 rounded-xl p-5">
-        <h3 className="font-semibold text-teal-900 mb-3">Weiterführende Ressourcen</h3>
+        <h3 className="font-semibold text-teal-900 mb-3">Weiterfuehrende Ressourcen</h3>
         <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
           <Link
             href="/ai/agents"
diff --git a/admin-lehrer/app/(admin)/ai/ocr-labeling/_components/ExportTab.tsx b/admin-lehrer/app/(admin)/ai/ocr-labeling/_components/ExportTab.tsx
new file mode 100644
index 0000000..5605d0d
--- /dev/null
+++ b/admin-lehrer/app/(admin)/ai/ocr-labeling/_components/ExportTab.tsx
@@ -0,0 +1,134 @@
+'use client'
+
+/**
+ * Export tab: export training data in various formats.
+ */
+
+import { useState } from 'react'
+import Link from 'next/link'
+import { API_BASE } from '../constants'
+import type { OCRSession, OCRStats } from '../types'
+
+interface ExportTabProps {
+  sessions: OCRSession[]
+  selectedSession: string | null
+  setSelectedSession: (id: string | null) => void
+  stats: OCRStats | null
+  setError: (error: string | null) => void
+}
+
+export function ExportTab({
+  sessions,
+  selectedSession,
+  setSelectedSession,
+  stats,
+  setError,
+}: ExportTabProps) {
+  const [exportFormat, setExportFormat] = useState<'generic' | 'trocr' | 'llama_vision'>('generic')
+  const [exporting, setExporting] = useState(false)
+  const [exportResult, setExportResult] = useState<{
+    exported_count: number
+    batch_id: string
+    samples?: Array<Record<string, unknown>>
+  } | null>(null)
+
+  const handleExport = async () => {
+    setExporting(true)
+    try {
+      const res = await fetch(`${API_BASE}/api/v1/ocr-label/export`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          export_format: exportFormat,
+          session_id: selectedSession,
+        }),
+      })
+
+      if (res.ok) {
+        const data = await res.json()
+        setExportResult(data)
+      } else {
+        setError('Export fehlgeschlagen')
+      }
+    } catch {
+      setError('Netzwerkfehler')
+    } finally {
+      setExporting(false)
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="bg-white rounded-lg shadow p-6">
+        <h3 className="text-lg font-semibold mb-4">Training-Daten exportieren</h3>
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Export-Format</label>
+            <select
+              value={exportFormat}
+              onChange={(e) => setExportFormat(e.target.value as typeof exportFormat)}
+              className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
+            >
+              <option value="generic">Generic JSON</option>
+              <option value="trocr">TrOCR Fine-Tuning</option>
+              <option value="llama_vision">Llama Vision Fine-Tuning</option>
+            </select>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Session (optional)</label>
+            <select
+              value={selectedSession || ''}
+              onChange={(e) => setSelectedSession(e.target.value || null)}
+              className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
+            >
+              <option value="">Alle Sessions</option>
+              {sessions.map((session) => (
+                <option key={session.id} value={session.id}>{session.name}</option>
+              ))}
+            </select>
+          </div>
+
+          <button
+            onClick={handleExport}
+            disabled={exporting || (stats?.exportable_items || 0) === 0}
+            className="w-full px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50"
+          >
+            {exporting ? 'Exportiere...' : `${stats?.exportable_items || 0} Samples exportieren`}
+          </button>
+
+          {/* Cross-Link to Magic Help for TrOCR Fine-Tuning */}
+          {exportFormat === 'trocr' && (stats?.exportable_items || 0) > 0 && (
+            <Link
+              href="/ai/magic-help?source=ocr-labeling"
+              className="w-full mt-3 px-4 py-2 bg-purple-100 text-purple-700 border border-purple-300 rounded-lg hover:bg-purple-200 flex items-center justify-center gap-2 transition-colors"
+            >
+              <span>✨</span>
+              Mit Magic Help testen & fine-tunen
+            </Link>
+          )}
+        </div>
+      </div>
+
+      {exportResult && (
+        <div className="bg-white rounded-lg shadow p-6">
+          <h3 className="text-lg font-semibold mb-4">Export-Ergebnis</h3>
+          <div className="bg-green-50 border border-green-200 rounded-lg p-4 mb-4">
+            <p className="text-green-800">
+              {exportResult.exported_count} Samples erfolgreich exportiert
+            </p>
+            <p className="text-sm text-green-600">
+              Batch: {exportResult.batch_id}
+            </p>
+          </div>
+          <div className="bg-slate-50 p-4 rounded-lg overflow-auto max-h-64">
+            <pre className="text-xs">{JSON.stringify(exportResult.samples?.slice(0, 3), null, 2)}</pre>
+            {(exportResult.samples?.length || 0) > 3 && (
+              <p className="text-slate-500 mt-2">... und {(exportResult.samples?.length ?? 0) - 3} weitere</p>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/ai/ocr-labeling/_components/LabelingTab.tsx b/admin-lehrer/app/(admin)/ai/ocr-labeling/_components/LabelingTab.tsx
new file mode 100644
index 0000000..ba5ddfc
--- /dev/null
+++ b/admin-lehrer/app/(admin)/ai/ocr-labeling/_components/LabelingTab.tsx
@@ -0,0 +1,197 @@
+'use client'
+
+/**
+ * Labeling tab: image viewer, OCR text, correction input, and queue preview.
+ */
+
+import { API_BASE } from '../constants'
+import type { OCRItem } from '../types'
+
+interface LabelingTabProps {
+  queue: OCRItem[]
+  currentItem: OCRItem | null
+  currentIndex: number
+  correctedText: string
+  setCorrectedText: (text: string) => void
+  goToNext: () => void
+  goToPrev: () => void
+  selectQueueItem: (idx: number) => void
+  confirmItem: () => void
+  correctItem: () => void
+  skipItem: () => void
+}
+
+export function LabelingTab({
+  queue,
+  currentItem,
+  currentIndex,
+  correctedText,
+  setCorrectedText,
+  goToNext,
+  goToPrev,
+  selectQueueItem,
+  confirmItem,
+  correctItem,
+  skipItem,
+}: LabelingTabProps) {
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+      {/* Left: Image Viewer */}
+      <div className="lg:col-span-2 bg-white rounded-lg shadow p-4">
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-lg font-semibold">Bild</h3>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={goToPrev}
+              disabled={currentIndex === 0}
+              className="p-2 rounded hover:bg-slate-100 disabled:opacity-50"
+              title="Zurueck (Pfeiltaste links)"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+              </svg>
+            </button>
+            <span className="text-sm text-slate-600">
+              {currentIndex + 1} / {queue.length}
+            </span>
+            <button
+              onClick={goToNext}
+              disabled={currentIndex >= queue.length - 1}
+              className="p-2 rounded hover:bg-slate-100 disabled:opacity-50"
+              title="Weiter (Pfeiltaste rechts)"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        {currentItem ? (
+          <div className="relative bg-slate-100 rounded-lg overflow-hidden" style={{ minHeight: '400px' }}>
+            <img
+              src={currentItem.image_url || `${API_BASE}${currentItem.image_path}`}
+              alt="OCR Bild"
+              className="w-full h-auto max-h-[600px] object-contain"
+              onError={(e) => {
+                const target = e.target as HTMLImageElement
+                target.style.display = 'none'
+              }}
+            />
+          </div>
+        ) : (
+          <div className="flex items-center justify-center h-64 bg-slate-100 rounded-lg">
+            <p className="text-slate-500">Keine Bilder in der Warteschlange</p>
+          </div>
+        )}
+      </div>
+
+      {/* Right: OCR Text & Actions */}
+      <div className="bg-white rounded-lg shadow p-4">
+        <div className="space-y-4">
+          {/* OCR Result */}
+          <div>
+            <div className="flex items-center justify-between mb-2">
+              <h3 className="text-lg font-semibold">OCR-Ergebnis</h3>
+              {currentItem?.ocr_confidence && (
+                <span className={`text-sm px-2 py-1 rounded ${
+                  currentItem.ocr_confidence > 0.8
+                    ? 'bg-green-100 text-green-800'
+                    : currentItem.ocr_confidence > 0.5
+                    ? 'bg-yellow-100 text-yellow-800'
+                    : 'bg-red-100 text-red-800'
+                }`}>
+                  {Math.round(currentItem.ocr_confidence * 100)}% Konfidenz
+                </span>
+              )}
+            </div>
+            <div className="bg-slate-50 p-3 rounded-lg min-h-[100px] text-sm">
+              {currentItem?.ocr_text || <span className="text-slate-400">Kein OCR-Text</span>}
+            </div>
+          </div>
+
+          {/* Correction Input */}
+          <div>
+            <h3 className="text-lg font-semibold mb-2">Korrektur</h3>
+            <textarea
+              value={correctedText}
+              onChange={(e) => setCorrectedText(e.target.value)}
+              placeholder="Korrigierter Text..."
+              className="w-full h-32 p-3 border border-slate-200 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
+            />
+          </div>
+
+          {/* Actions */}
+          <div className="flex flex-col gap-2">
+            <button
+              onClick={confirmItem}
+              disabled={!currentItem}
+              className="w-full px-4 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 flex items-center justify-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="M5 13l4 4L19 7" />
+              </svg>
+              Korrekt (Enter)
+            </button>
+            <button
+              onClick={correctItem}
+              disabled={!currentItem || !correctedText.trim() || correctedText === currentItem?.ocr_text}
+              className="w-full px-4 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50 flex items-center justify-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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+              </svg>
+              Korrektur speichern
+            </button>
+            <button
+              onClick={skipItem}
+              disabled={!currentItem}
+              className="w-full px-4 py-2 bg-slate-200 text-slate-700 rounded-lg hover:bg-slate-300 disabled:opacity-50 flex items-center justify-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="M13 5l7 7-7 7M5 5l7 7-7 7" />
+              </svg>
+              Ueberspringen (S)
+            </button>
+          </div>
+
+          {/* Keyboard Shortcuts */}
+          <div className="text-xs text-slate-500 mt-4">
+            <p className="font-medium mb-1">Tastaturkuerzel:</p>
+            <p>Enter = Bestaetigen | S = Ueberspringen</p>
+            <p>Pfeiltasten = Navigation</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Bottom: Queue Preview */}
+      <div className="lg:col-span-3 bg-white rounded-lg shadow p-4">
+        <h3 className="text-lg font-semibold mb-4">Warteschlange ({queue.length} Items)</h3>
+        <div className="flex gap-2 overflow-x-auto pb-2">
+          {queue.slice(0, 10).map((item, idx) => (
+            <button
+              key={item.id}
+              onClick={() => selectQueueItem(idx)}
+              className={`flex-shrink-0 w-24 h-24 rounded-lg overflow-hidden border-2 ${
+                idx === currentIndex
+                  ? 'border-primary-500'
+                  : 'border-transparent hover:border-slate-300'
+              }`}
+            >
+              <img
+                src={item.image_url || `${API_BASE}${item.image_path}`}
+                alt=""
+                className="w-full h-full object-cover"
+              />
+            </button>
+          ))}
+          {queue.length > 10 && (
+            <div className="flex-shrink-0 w-24 h-24 rounded-lg bg-slate-100 flex items-center justify-center text-slate-500">
+              +{queue.length - 10} mehr
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/ai/ocr-labeling/_components/SessionsTab.tsx b/admin-lehrer/app/(admin)/ai/ocr-labeling/_components/SessionsTab.tsx
new file mode 100644
index 0000000..8802dbe
--- /dev/null
+++ b/admin-lehrer/app/(admin)/ai/ocr-labeling/_components/SessionsTab.tsx
@@ -0,0 +1,166 @@
+'use client'
+
+/**
+ * Sessions tab: create new sessions and list existing ones.
+ */
+
+import { useState } from 'react'
+import { API_BASE } from '../constants'
+import type { OCRSession, CreateSessionRequest, OCRModel } from '../types'
+
+interface SessionsTabProps {
+  sessions: OCRSession[]
+  selectedSession: string | null
+  setSelectedSession: (id: string | null) => void
+  fetchSessions: () => Promise<void>
+  setError: (error: string | null) => void
+}
+
+export function SessionsTab({
+  sessions,
+  selectedSession,
+  setSelectedSession,
+  fetchSessions,
+  setError,
+}: SessionsTabProps) {
+  const [newSession, setNewSession] = useState<CreateSessionRequest>({
+    name: '',
+    source_type: 'klausur',
+    description: '',
+    ocr_model: 'llama3.2-vision:11b',
+  })
+
+  const createSession = async () => {
+    try {
+      const res = await fetch(`${API_BASE}/api/v1/ocr-label/sessions`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(newSession),
+      })
+
+      if (res.ok) {
+        setNewSession({ name: '', source_type: 'klausur', description: '', ocr_model: 'llama3.2-vision:11b' })
+        fetchSessions()
+      } else {
+        setError('Session erstellen fehlgeschlagen')
+      }
+    } catch {
+      setError('Netzwerkfehler')
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Create Session */}
+      <div className="bg-white rounded-lg shadow p-6">
+        <h3 className="text-lg font-semibold mb-4">Neue Session erstellen</h3>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Name</label>
+            <input
+              type="text"
+              value={newSession.name}
+              onChange={(e) => setNewSession(prev => ({ ...prev, name: e.target.value }))}
+              placeholder="z.B. Mathe Klausur Q1 2025"
+              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">Typ</label>
+            <select
+              value={newSession.source_type}
+              onChange={(e) => setNewSession(prev => ({ ...prev, source_type: e.target.value as 'klausur' | 'handwriting_sample' | 'scan' }))}
+              className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
+            >
+              <option value="klausur">Klausur</option>
+              <option value="handwriting_sample">Handschriftprobe</option>
+              <option value="scan">Scan</option>
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">OCR Modell</label>
+            <select
+              value={newSession.ocr_model}
+              onChange={(e) => setNewSession(prev => ({ ...prev, ocr_model: e.target.value as OCRModel }))}
+              className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
+            >
+              <option value="llama3.2-vision:11b">llama3.2-vision:11b - Vision LLM (Standard)</option>
+              <option value="trocr">TrOCR - Microsoft Transformer (schnell)</option>
+              <option value="paddleocr">PaddleOCR + LLM (4x schneller)</option>
+              <option value="donut">Donut - Document Understanding (strukturiert)</option>
+            </select>
+            <p className="mt-1 text-xs text-slate-500">
+              {newSession.ocr_model === 'paddleocr' && 'PaddleOCR erkennt Text schnell, LLM strukturiert die Ergebnisse.'}
+              {newSession.ocr_model === 'donut' && 'Speziell fuer Dokumente mit Tabellen und Formularen.'}
+              {newSession.ocr_model === 'trocr' && 'Schnelles Transformer-Modell fuer gedruckten Text.'}
+              {newSession.ocr_model === 'llama3.2-vision:11b' && 'Beste Qualitaet bei Handschrift, aber langsamer.'}
+            </p>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Beschreibung</label>
+            <input
+              type="text"
+              value={newSession.description}
+              onChange={(e) => setNewSession(prev => ({ ...prev, description: e.target.value }))}
+              placeholder="Optional..."
+              className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
+            />
+          </div>
+        </div>
+        <button
+          onClick={createSession}
+          disabled={!newSession.name}
+          className="mt-4 px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50"
+        >
+          Session erstellen
+        </button>
+      </div>
+
+      {/* Sessions List */}
+      <div className="bg-white rounded-lg shadow">
+        <div className="px-6 py-4 border-b border-slate-200">
+          <h3 className="text-lg font-semibold">Sessions ({sessions.length})</h3>
+        </div>
+        <div className="divide-y divide-slate-200">
+          {sessions.map((session) => (
+            <div
+              key={session.id}
+              className={`p-4 hover:bg-slate-50 cursor-pointer ${
+                selectedSession === session.id ? 'bg-primary-50 border-l-4 border-primary-500' : ''
+              }`}
+              onClick={() => setSelectedSession(session.id === selectedSession ? null : session.id)}
+            >
+              <div className="flex items-center justify-between">
+                <div>
+                  <h4 className="font-medium">{session.name}</h4>
+                  <p className="text-sm text-slate-500">
+                    {session.source_type} | {session.ocr_model}
+                  </p>
+                </div>
+                <div className="text-right">
+                  <p className="text-sm font-medium">
+                    {session.labeled_items}/{session.total_items} gelabelt
+                  </p>
+                  <div className="w-32 bg-slate-200 rounded-full h-2 mt-1">
+                    <div
+                      className="bg-primary-600 rounded-full h-2"
+                      style={{
+                        width: `${session.total_items > 0 ? (session.labeled_items / session.total_items) * 100 : 0}%`
+                      }}
+                    />
+                  </div>
+                </div>
+              </div>
+              {session.description && (
+                <p className="text-sm text-slate-600 mt-2">{session.description}</p>
+              )}
+            </div>
+          ))}
+          {sessions.length === 0 && (
+            <p className="p-4 text-slate-500 text-center">Keine Sessions vorhanden</p>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/ai/ocr-labeling/_components/StatsTab.tsx b/admin-lehrer/app/(admin)/ai/ocr-labeling/_components/StatsTab.tsx
new file mode 100644
index 0000000..64ee7ae
--- /dev/null
+++ b/admin-lehrer/app/(admin)/ai/ocr-labeling/_components/StatsTab.tsx
@@ -0,0 +1,76 @@
+'use client'
+
+/**
+ * Stats tab: global statistics, detailed breakdown, and progress bar.
+ */
+
+import type { OCRStats } from '../types'
+
+interface StatsTabProps {
+  stats: OCRStats | null
+}
+
+export function StatsTab({ stats }: StatsTabProps) {
+  return (
+    <div className="space-y-6">
+      {/* Global Stats */}
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+        <div className="bg-white rounded-lg shadow p-6">
+          <h4 className="text-sm font-medium text-slate-500">Gesamt Items</h4>
+          <p className="text-3xl font-bold mt-2">{stats?.total_items || 0}</p>
+        </div>
+        <div className="bg-white rounded-lg shadow p-6">
+          <h4 className="text-sm font-medium text-slate-500">Gelabelt</h4>
+          <p className="text-3xl font-bold mt-2 text-green-600">{stats?.labeled_items || 0}</p>
+        </div>
+        <div className="bg-white rounded-lg shadow p-6">
+          <h4 className="text-sm font-medium text-slate-500">Ausstehend</h4>
+          <p className="text-3xl font-bold mt-2 text-yellow-600">{stats?.pending_items || 0}</p>
+        </div>
+        <div className="bg-white rounded-lg shadow p-6">
+          <h4 className="text-sm font-medium text-slate-500">OCR-Genauigkeit</h4>
+          <p className="text-3xl font-bold mt-2">{stats?.accuracy_rate || 0}%</p>
+        </div>
+      </div>
+
+      {/* Detailed Stats */}
+      <div className="bg-white rounded-lg shadow p-6">
+        <h3 className="text-lg font-semibold mb-4">Details</h3>
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <div>
+            <p className="text-sm text-slate-500">Bestaetigt</p>
+            <p className="text-xl font-semibold text-green-600">{stats?.confirmed_items || 0}</p>
+          </div>
+          <div>
+            <p className="text-sm text-slate-500">Korrigiert</p>
+            <p className="text-xl font-semibold text-primary-600">{stats?.corrected_items || 0}</p>
+          </div>
+          <div>
+            <p className="text-sm text-slate-500">Exportierbar</p>
+            <p className="text-xl font-semibold">{stats?.exportable_items || 0}</p>
+          </div>
+          <div>
+            <p className="text-sm text-slate-500">Durchschn. Label-Zeit</p>
+            <p className="text-xl font-semibold">{stats?.avg_label_time_seconds || 0}s</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Progress Bar */}
+      {stats?.total_items ? (
+        <div className="bg-white rounded-lg shadow p-6">
+          <h3 className="text-lg font-semibold mb-4">Fortschritt</h3>
+          <div className="w-full bg-slate-200 rounded-full h-4">
+            <div
+              className="bg-primary-600 rounded-full h-4 transition-all"
+              style={{ width: `${(stats.labeled_items / stats.total_items) * 100}%` }}
+            />
+          </div>
+          <p className="text-sm text-slate-500 mt-2">
+            {Math.round((stats.labeled_items / stats.total_items) * 100)}% abgeschlossen
+          </p>
+        </div>
+      ) : null}
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/ai/ocr-labeling/_components/UploadTab.tsx b/admin-lehrer/app/(admin)/ai/ocr-labeling/_components/UploadTab.tsx
new file mode 100644
index 0000000..1bfd115
--- /dev/null
+++ b/admin-lehrer/app/(admin)/ai/ocr-labeling/_components/UploadTab.tsx
@@ -0,0 +1,160 @@
+'use client'
+
+/**
+ * Upload tab: session selection, drag-and-drop upload, and upload results.
+ */
+
+import { useState, useRef } from 'react'
+import { API_BASE } from '../constants'
+import type { OCRSession, UploadResult } from '../types'
+
+interface UploadTabProps {
+  sessions: OCRSession[]
+  selectedSession: string | null
+  setSelectedSession: (id: string | null) => void
+  fetchQueue: () => Promise<void>
+  fetchStats: () => Promise<void>
+  setError: (error: string | null) => void
+}
+
+export function UploadTab({
+  sessions,
+  selectedSession,
+  setSelectedSession,
+  fetchQueue,
+  fetchStats,
+  setError,
+}: UploadTabProps) {
+  const [uploading, setUploading] = useState(false)
+  const [uploadResults, setUploadResults] = useState<UploadResult[]>([])
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const handleUpload = async (files: FileList) => {
+    if (!selectedSession) {
+      setError('Bitte zuerst eine Session auswaehlen')
+      return
+    }
+
+    setUploading(true)
+    const formData = new FormData()
+    Array.from(files).forEach(file => formData.append('files', file))
+    formData.append('run_ocr', 'true')
+
+    try {
+      const res = await fetch(`${API_BASE}/api/v1/ocr-label/sessions/${selectedSession}/upload`, {
+        method: 'POST',
+        body: formData,
+      })
+
+      if (res.ok) {
+        const data = await res.json()
+        setUploadResults(data.items || [])
+        fetchQueue()
+        fetchStats()
+      } else {
+        setError('Upload fehlgeschlagen')
+      }
+    } catch {
+      setError('Netzwerkfehler beim Upload')
+    } finally {
+      setUploading(false)
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Session Selection */}
+      <div className="bg-white rounded-lg shadow p-6">
+        <h3 className="text-lg font-semibold mb-4">Session auswaehlen</h3>
+        <select
+          value={selectedSession || ''}
+          onChange={(e) => setSelectedSession(e.target.value || null)}
+          className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
+        >
+          <option value="">-- Session waehlen --</option>
+          {sessions.map((session) => (
+            <option key={session.id} value={session.id}>
+              {session.name} ({session.total_items} Items)
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {/* Upload Area */}
+      <div className="bg-white rounded-lg shadow p-6">
+        <h3 className="text-lg font-semibold mb-4">Bilder hochladen</h3>
+        <div
+          className={`border-2 border-dashed rounded-lg p-8 text-center ${
+            selectedSession ? 'border-slate-300 hover:border-primary-500' : 'border-slate-200 opacity-50'
+          }`}
+          onDragOver={(e) => {
+            e.preventDefault()
+            e.currentTarget.classList.add('border-primary-500', 'bg-primary-50')
+          }}
+          onDragLeave={(e) => {
+            e.currentTarget.classList.remove('border-primary-500', 'bg-primary-50')
+          }}
+          onDrop={(e) => {
+            e.preventDefault()
+            e.currentTarget.classList.remove('border-primary-500', 'bg-primary-50')
+            if (e.dataTransfer.files.length > 0) {
+              handleUpload(e.dataTransfer.files)
+            }
+          }}
+        >
+          <input
+            ref={fileInputRef}
+            type="file"
+            multiple
+            accept="image/png,image/jpeg,image/jpg"
+            onChange={(e) => e.target.files && handleUpload(e.target.files)}
+            className="hidden"
+            disabled={!selectedSession}
+          />
+          {uploading ? (
+            <div className="flex flex-col items-center gap-2">
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600" />
+              <p>Hochladen & OCR ausfuehren...</p>
+            </div>
+          ) : (
+            <>
+              <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="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+              </svg>
+              <p className="text-slate-600 mb-2">
+                Bilder hierher ziehen oder{' '}
+                <button
+                  onClick={() => fileInputRef.current?.click()}
+                  disabled={!selectedSession}
+                  className="text-primary-600 hover:underline"
+                >
+                  auswaehlen
+                </button>
+              </p>
+              <p className="text-sm text-slate-500">PNG, JPG (max. 10MB pro Bild)</p>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* Upload Results */}
+      {uploadResults.length > 0 && (
+        <div className="bg-white rounded-lg shadow p-6">
+          <h3 className="text-lg font-semibold mb-4">Upload-Ergebnisse ({uploadResults.length})</h3>
+          <div className="space-y-2">
+            {uploadResults.map((result) => (
+              <div key={result.id} className="flex items-center justify-between p-2 bg-slate-50 rounded">
+                <span className="text-sm">{result.filename}</span>
+                <span className={`text-xs px-2 py-1 rounded ${
+                  result.ocr_text ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'
+                }`}>
+                  {result.ocr_text ? `OCR OK (${Math.round((result.ocr_confidence || 0) * 100)}%)` : 'Kein OCR'}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/ai/ocr-labeling/constants.tsx b/admin-lehrer/app/(admin)/ai/ocr-labeling/constants.tsx
new file mode 100644
index 0000000..0888bd2
--- /dev/null
+++ b/admin-lehrer/app/(admin)/ai/ocr-labeling/constants.tsx
@@ -0,0 +1,59 @@
+/**
+ * Constants and tab definitions for OCR Labeling page.
+ */
+
+import type { JSX } from 'react'
+
+// API Base URL for klausur-service
+export const API_BASE = process.env.NEXT_PUBLIC_KLAUSUR_SERVICE_URL || 'http://localhost:8086'
+
+// Tab definitions
+export type TabId = 'labeling' | 'sessions' | 'upload' | 'stats' | 'export'
+
+export const tabs: { id: TabId; name: string; icon: JSX.Element }[] = [
+  {
+    id: 'labeling',
+    name: 'Labeling',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+      </svg>
+    ),
+  },
+  {
+    id: 'sessions',
+    name: 'Sessions',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+      </svg>
+    ),
+  },
+  {
+    id: 'upload',
+    name: 'Upload',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
+      </svg>
+    ),
+  },
+  {
+    id: 'stats',
+    name: 'Statistiken',
+    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: 'export',
+    name: 'Export',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+      </svg>
+    ),
+  },
+]
diff --git a/admin-lehrer/app/(admin)/ai/ocr-labeling/page.tsx b/admin-lehrer/app/(admin)/ai/ocr-labeling/page.tsx
index f080f8e..dc6bb29 100644
--- a/admin-lehrer/app/(admin)/ai/ocr-labeling/page.tsx
+++ b/admin-lehrer/app/(admin)/ai/ocr-labeling/page.tsx
@@ -10,903 +10,20 @@
  * OCR-Labeling → RAG Pipeline → Daten & RAG
  */
 
-import { useState, useEffect, useCallback, useRef } from 'react'
-import Link from 'next/link'
+import { useState } from 'react'
 import { PagePurpose } from '@/components/common/PagePurpose'
 import { AIModuleSidebarResponsive } from '@/components/ai/AIModuleSidebar'
-import type {
-  OCRSession,
-  OCRItem,
-  OCRStats,
-  TrainingSample,
-  CreateSessionRequest,
-  OCRModel,
-} from './types'
-
-// API Base URL for klausur-service
-const API_BASE = process.env.NEXT_PUBLIC_KLAUSUR_SERVICE_URL || 'http://localhost:8086'
-
-// Tab definitions
-type TabId = 'labeling' | 'sessions' | 'upload' | 'stats' | 'export'
-
-const tabs: { id: TabId; name: string; icon: JSX.Element }[] = [
-  {
-    id: 'labeling',
-    name: 'Labeling',
-    icon: (
-      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
-      </svg>
-    ),
-  },
-  {
-    id: 'sessions',
-    name: 'Sessions',
-    icon: (
-      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
-      </svg>
-    ),
-  },
-  {
-    id: 'upload',
-    name: 'Upload',
-    icon: (
-      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
-      </svg>
-    ),
-  },
-  {
-    id: 'stats',
-    name: 'Statistiken',
-    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: 'export',
-    name: 'Export',
-    icon: (
-      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
-      </svg>
-    ),
-  },
-]
+import { tabs, type TabId } from './constants'
+import { useOcrLabeling } from './useOcrLabeling'
+import { LabelingTab } from './_components/LabelingTab'
+import { SessionsTab } from './_components/SessionsTab'
+import { UploadTab } from './_components/UploadTab'
+import { StatsTab } from './_components/StatsTab'
+import { ExportTab } from './_components/ExportTab'
 
 export default function OCRLabelingPage() {
   const [activeTab, setActiveTab] = useState<TabId>('labeling')
-  const [sessions, setSessions] = useState<OCRSession[]>([])
-  const [selectedSession, setSelectedSession] = useState<string | null>(null)
-  const [queue, setQueue] = useState<OCRItem[]>([])
-  const [currentItem, setCurrentItem] = useState<OCRItem | null>(null)
-  const [currentIndex, setCurrentIndex] = useState(0)
-  const [stats, setStats] = useState<OCRStats | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-  const [correctedText, setCorrectedText] = useState('')
-  const [labelStartTime, setLabelStartTime] = useState<number | null>(null)
-
-  // Fetch sessions
-  const fetchSessions = useCallback(async () => {
-    try {
-      const res = await fetch(`${API_BASE}/api/v1/ocr-label/sessions`)
-      if (res.ok) {
-        const data = await res.json()
-        setSessions(data)
-      }
-    } catch (err) {
-      console.error('Failed to fetch sessions:', err)
-    }
-  }, [])
-
-  // Fetch queue
-  const fetchQueue = useCallback(async () => {
-    try {
-      const url = selectedSession
-        ? `${API_BASE}/api/v1/ocr-label/queue?session_id=${selectedSession}&limit=20`
-        : `${API_BASE}/api/v1/ocr-label/queue?limit=20`
-      const res = await fetch(url)
-      if (res.ok) {
-        const data = await res.json()
-        setQueue(data)
-        if (data.length > 0 && !currentItem) {
-          setCurrentItem(data[0])
-          setCurrentIndex(0)
-          setCorrectedText(data[0].ocr_text || '')
-          setLabelStartTime(Date.now())
-        }
-      }
-    } catch (err) {
-      console.error('Failed to fetch queue:', err)
-    }
-  }, [selectedSession, currentItem])
-
-  // Fetch stats
-  const fetchStats = useCallback(async () => {
-    try {
-      const url = selectedSession
-        ? `${API_BASE}/api/v1/ocr-label/stats?session_id=${selectedSession}`
-        : `${API_BASE}/api/v1/ocr-label/stats`
-      const res = await fetch(url)
-      if (res.ok) {
-        const data = await res.json()
-        setStats(data)
-      }
-    } catch (err) {
-      console.error('Failed to fetch stats:', err)
-    }
-  }, [selectedSession])
-
-  // Initial data load
-  useEffect(() => {
-    const loadData = async () => {
-      setLoading(true)
-      await Promise.all([fetchSessions(), fetchQueue(), fetchStats()])
-      setLoading(false)
-    }
-    loadData()
-  }, [fetchSessions, fetchQueue, fetchStats])
-
-  // Refresh queue when session changes
-  useEffect(() => {
-    setCurrentItem(null)
-    setCurrentIndex(0)
-    fetchQueue()
-    fetchStats()
-  }, [selectedSession, fetchQueue, fetchStats])
-
-  // Navigate to next item
-  const goToNext = () => {
-    if (currentIndex < queue.length - 1) {
-      const nextIndex = currentIndex + 1
-      setCurrentIndex(nextIndex)
-      setCurrentItem(queue[nextIndex])
-      setCorrectedText(queue[nextIndex].ocr_text || '')
-      setLabelStartTime(Date.now())
-    } else {
-      // Refresh queue
-      fetchQueue()
-    }
-  }
-
-  // Navigate to previous item
-  const goToPrev = () => {
-    if (currentIndex > 0) {
-      const prevIndex = currentIndex - 1
-      setCurrentIndex(prevIndex)
-      setCurrentItem(queue[prevIndex])
-      setCorrectedText(queue[prevIndex].ocr_text || '')
-      setLabelStartTime(Date.now())
-    }
-  }
-
-  // Calculate label time
-  const getLabelTime = (): number | undefined => {
-    if (!labelStartTime) return undefined
-    return Math.round((Date.now() - labelStartTime) / 1000)
-  }
-
-  // Confirm item
-  const confirmItem = async () => {
-    if (!currentItem) return
-
-    try {
-      const res = await fetch(`${API_BASE}/api/v1/ocr-label/confirm`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          item_id: currentItem.id,
-          label_time_seconds: getLabelTime(),
-        }),
-      })
-
-      if (res.ok) {
-        // Remove from queue and go to next
-        setQueue(prev => prev.filter(item => item.id !== currentItem.id))
-        goToNext()
-        fetchStats()
-      } else {
-        setError('Bestaetigung fehlgeschlagen')
-      }
-    } catch (err) {
-      setError('Netzwerkfehler')
-    }
-  }
-
-  // Correct item
-  const correctItem = async () => {
-    if (!currentItem || !correctedText.trim()) return
-
-    try {
-      const res = await fetch(`${API_BASE}/api/v1/ocr-label/correct`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          item_id: currentItem.id,
-          ground_truth: correctedText.trim(),
-          label_time_seconds: getLabelTime(),
-        }),
-      })
-
-      if (res.ok) {
-        setQueue(prev => prev.filter(item => item.id !== currentItem.id))
-        goToNext()
-        fetchStats()
-      } else {
-        setError('Korrektur fehlgeschlagen')
-      }
-    } catch (err) {
-      setError('Netzwerkfehler')
-    }
-  }
-
-  // Skip item
-  const skipItem = async () => {
-    if (!currentItem) return
-
-    try {
-      const res = await fetch(`${API_BASE}/api/v1/ocr-label/skip`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ item_id: currentItem.id }),
-      })
-
-      if (res.ok) {
-        setQueue(prev => prev.filter(item => item.id !== currentItem.id))
-        goToNext()
-        fetchStats()
-      } else {
-        setError('Ueberspringen fehlgeschlagen')
-      }
-    } catch (err) {
-      setError('Netzwerkfehler')
-    }
-  }
-
-  // Keyboard shortcuts
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      // Only handle if not in text input
-      if (e.target instanceof HTMLTextAreaElement) return
-
-      if (e.key === 'Enter' && !e.shiftKey) {
-        e.preventDefault()
-        confirmItem()
-      } else if (e.key === 'ArrowRight') {
-        goToNext()
-      } else if (e.key === 'ArrowLeft') {
-        goToPrev()
-      } else if (e.key === 's' && !e.ctrlKey && !e.metaKey) {
-        skipItem()
-      }
-    }
-
-    window.addEventListener('keydown', handleKeyDown)
-    return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [currentItem, correctedText])
-
-  // Render Labeling Tab
-  const renderLabelingTab = () => (
-    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-      {/* Left: Image Viewer */}
-      <div className="lg:col-span-2 bg-white rounded-lg shadow p-4">
-        <div className="flex items-center justify-between mb-4">
-          <h3 className="text-lg font-semibold">Bild</h3>
-          <div className="flex items-center gap-2">
-            <button
-              onClick={goToPrev}
-              disabled={currentIndex === 0}
-              className="p-2 rounded hover:bg-slate-100 disabled:opacity-50"
-              title="Zurueck (Pfeiltaste links)"
-            >
-              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-              </svg>
-            </button>
-            <span className="text-sm text-slate-600">
-              {currentIndex + 1} / {queue.length}
-            </span>
-            <button
-              onClick={goToNext}
-              disabled={currentIndex >= queue.length - 1}
-              className="p-2 rounded hover:bg-slate-100 disabled:opacity-50"
-              title="Weiter (Pfeiltaste rechts)"
-            >
-              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-              </svg>
-            </button>
-          </div>
-        </div>
-
-        {currentItem ? (
-          <div className="relative bg-slate-100 rounded-lg overflow-hidden" style={{ minHeight: '400px' }}>
-            <img
-              src={currentItem.image_url || `${API_BASE}${currentItem.image_path}`}
-              alt="OCR Bild"
-              className="w-full h-auto max-h-[600px] object-contain"
-              onError={(e) => {
-                // Fallback if image fails to load
-                const target = e.target as HTMLImageElement
-                target.style.display = 'none'
-              }}
-            />
-          </div>
-        ) : (
-          <div className="flex items-center justify-center h-64 bg-slate-100 rounded-lg">
-            <p className="text-slate-500">Keine Bilder in der Warteschlange</p>
-          </div>
-        )}
-      </div>
-
-      {/* Right: OCR Text & Actions */}
-      <div className="bg-white rounded-lg shadow p-4">
-        <div className="space-y-4">
-          {/* OCR Result */}
-          <div>
-            <div className="flex items-center justify-between mb-2">
-              <h3 className="text-lg font-semibold">OCR-Ergebnis</h3>
-              {currentItem?.ocr_confidence && (
-                <span className={`text-sm px-2 py-1 rounded ${
-                  currentItem.ocr_confidence > 0.8
-                    ? 'bg-green-100 text-green-800'
-                    : currentItem.ocr_confidence > 0.5
-                    ? 'bg-yellow-100 text-yellow-800'
-                    : 'bg-red-100 text-red-800'
-                }`}>
-                  {Math.round(currentItem.ocr_confidence * 100)}% Konfidenz
-                </span>
-              )}
-            </div>
-            <div className="bg-slate-50 p-3 rounded-lg min-h-[100px] text-sm">
-              {currentItem?.ocr_text || <span className="text-slate-400">Kein OCR-Text</span>}
-            </div>
-          </div>
-
-          {/* Correction Input */}
-          <div>
-            <h3 className="text-lg font-semibold mb-2">Korrektur</h3>
-            <textarea
-              value={correctedText}
-              onChange={(e) => setCorrectedText(e.target.value)}
-              placeholder="Korrigierter Text..."
-              className="w-full h-32 p-3 border border-slate-200 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
-            />
-          </div>
-
-          {/* Actions */}
-          <div className="flex flex-col gap-2">
-            <button
-              onClick={confirmItem}
-              disabled={!currentItem}
-              className="w-full px-4 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 flex items-center justify-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="M5 13l4 4L19 7" />
-              </svg>
-              Korrekt (Enter)
-            </button>
-            <button
-              onClick={correctItem}
-              disabled={!currentItem || !correctedText.trim() || correctedText === currentItem?.ocr_text}
-              className="w-full px-4 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50 flex items-center justify-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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
-              </svg>
-              Korrektur speichern
-            </button>
-            <button
-              onClick={skipItem}
-              disabled={!currentItem}
-              className="w-full px-4 py-2 bg-slate-200 text-slate-700 rounded-lg hover:bg-slate-300 disabled:opacity-50 flex items-center justify-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="M13 5l7 7-7 7M5 5l7 7-7 7" />
-              </svg>
-              Ueberspringen (S)
-            </button>
-          </div>
-
-          {/* Keyboard Shortcuts */}
-          <div className="text-xs text-slate-500 mt-4">
-            <p className="font-medium mb-1">Tastaturkuerzel:</p>
-            <p>Enter = Bestaetigen | S = Ueberspringen</p>
-            <p>Pfeiltasten = Navigation</p>
-          </div>
-        </div>
-      </div>
-
-      {/* Bottom: Queue Preview */}
-      <div className="lg:col-span-3 bg-white rounded-lg shadow p-4">
-        <h3 className="text-lg font-semibold mb-4">Warteschlange ({queue.length} Items)</h3>
-        <div className="flex gap-2 overflow-x-auto pb-2">
-          {queue.slice(0, 10).map((item, idx) => (
-            <button
-              key={item.id}
-              onClick={() => {
-                setCurrentIndex(idx)
-                setCurrentItem(item)
-                setCorrectedText(item.ocr_text || '')
-                setLabelStartTime(Date.now())
-              }}
-              className={`flex-shrink-0 w-24 h-24 rounded-lg overflow-hidden border-2 ${
-                idx === currentIndex
-                  ? 'border-primary-500'
-                  : 'border-transparent hover:border-slate-300'
-              }`}
-            >
-              <img
-                src={item.image_url || `${API_BASE}${item.image_path}`}
-                alt=""
-                className="w-full h-full object-cover"
-              />
-            </button>
-          ))}
-          {queue.length > 10 && (
-            <div className="flex-shrink-0 w-24 h-24 rounded-lg bg-slate-100 flex items-center justify-center text-slate-500">
-              +{queue.length - 10} mehr
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-
-  // Render Sessions Tab
-  const renderSessionsTab = () => {
-    const [newSession, setNewSession] = useState<CreateSessionRequest>({
-      name: '',
-      source_type: 'klausur',
-      description: '',
-      ocr_model: 'llama3.2-vision:11b',
-    })
-
-    const createSession = async () => {
-      try {
-        const res = await fetch(`${API_BASE}/api/v1/ocr-label/sessions`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(newSession),
-        })
-
-        if (res.ok) {
-          setNewSession({ name: '', source_type: 'klausur', description: '', ocr_model: 'llama3.2-vision:11b' })
-          fetchSessions()
-        } else {
-          setError('Session erstellen fehlgeschlagen')
-        }
-      } catch (err) {
-        setError('Netzwerkfehler')
-      }
-    }
-
-    return (
-      <div className="space-y-6">
-        {/* Create Session */}
-        <div className="bg-white rounded-lg shadow p-6">
-          <h3 className="text-lg font-semibold mb-4">Neue Session erstellen</h3>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm font-medium text-slate-700 mb-1">Name</label>
-              <input
-                type="text"
-                value={newSession.name}
-                onChange={(e) => setNewSession(prev => ({ ...prev, name: e.target.value }))}
-                placeholder="z.B. Mathe Klausur Q1 2025"
-                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">Typ</label>
-              <select
-                value={newSession.source_type}
-                onChange={(e) => setNewSession(prev => ({ ...prev, source_type: e.target.value as 'klausur' | 'handwriting_sample' | 'scan' }))}
-                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
-              >
-                <option value="klausur">Klausur</option>
-                <option value="handwriting_sample">Handschriftprobe</option>
-                <option value="scan">Scan</option>
-              </select>
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-slate-700 mb-1">OCR Modell</label>
-              <select
-                value={newSession.ocr_model}
-                onChange={(e) => setNewSession(prev => ({ ...prev, ocr_model: e.target.value as OCRModel }))}
-                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
-              >
-                <option value="llama3.2-vision:11b">llama3.2-vision:11b - Vision LLM (Standard)</option>
-                <option value="trocr">TrOCR - Microsoft Transformer (schnell)</option>
-                <option value="paddleocr">PaddleOCR + LLM (4x schneller)</option>
-                <option value="donut">Donut - Document Understanding (strukturiert)</option>
-              </select>
-              <p className="mt-1 text-xs text-slate-500">
-                {newSession.ocr_model === 'paddleocr' && 'PaddleOCR erkennt Text schnell, LLM strukturiert die Ergebnisse.'}
-                {newSession.ocr_model === 'donut' && 'Speziell fuer Dokumente mit Tabellen und Formularen.'}
-                {newSession.ocr_model === 'trocr' && 'Schnelles Transformer-Modell fuer gedruckten Text.'}
-                {newSession.ocr_model === 'llama3.2-vision:11b' && 'Beste Qualitaet bei Handschrift, aber langsamer.'}
-              </p>
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-slate-700 mb-1">Beschreibung</label>
-              <input
-                type="text"
-                value={newSession.description}
-                onChange={(e) => setNewSession(prev => ({ ...prev, description: e.target.value }))}
-                placeholder="Optional..."
-                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
-              />
-            </div>
-          </div>
-          <button
-            onClick={createSession}
-            disabled={!newSession.name}
-            className="mt-4 px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50"
-          >
-            Session erstellen
-          </button>
-        </div>
-
-        {/* Sessions List */}
-        <div className="bg-white rounded-lg shadow">
-          <div className="px-6 py-4 border-b border-slate-200">
-            <h3 className="text-lg font-semibold">Sessions ({sessions.length})</h3>
-          </div>
-          <div className="divide-y divide-slate-200">
-            {sessions.map((session) => (
-              <div
-                key={session.id}
-                className={`p-4 hover:bg-slate-50 cursor-pointer ${
-                  selectedSession === session.id ? 'bg-primary-50 border-l-4 border-primary-500' : ''
-                }`}
-                onClick={() => setSelectedSession(session.id === selectedSession ? null : session.id)}
-              >
-                <div className="flex items-center justify-between">
-                  <div>
-                    <h4 className="font-medium">{session.name}</h4>
-                    <p className="text-sm text-slate-500">
-                      {session.source_type} | {session.ocr_model}
-                    </p>
-                  </div>
-                  <div className="text-right">
-                    <p className="text-sm font-medium">
-                      {session.labeled_items}/{session.total_items} gelabelt
-                    </p>
-                    <div className="w-32 bg-slate-200 rounded-full h-2 mt-1">
-                      <div
-                        className="bg-primary-600 rounded-full h-2"
-                        style={{
-                          width: `${session.total_items > 0 ? (session.labeled_items / session.total_items) * 100 : 0}%`
-                        }}
-                      />
-                    </div>
-                  </div>
-                </div>
-                {session.description && (
-                  <p className="text-sm text-slate-600 mt-2">{session.description}</p>
-                )}
-              </div>
-            ))}
-            {sessions.length === 0 && (
-              <p className="p-4 text-slate-500 text-center">Keine Sessions vorhanden</p>
-            )}
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  // Render Upload Tab
-  const renderUploadTab = () => {
-    const [uploading, setUploading] = useState(false)
-    const [uploadResults, setUploadResults] = useState<any[]>([])
-    const fileInputRef = useRef<HTMLInputElement>(null)
-
-    const handleUpload = async (files: FileList) => {
-      if (!selectedSession) {
-        setError('Bitte zuerst eine Session auswaehlen')
-        return
-      }
-
-      setUploading(true)
-      const formData = new FormData()
-      Array.from(files).forEach(file => formData.append('files', file))
-      formData.append('run_ocr', 'true')
-
-      try {
-        const res = await fetch(`${API_BASE}/api/v1/ocr-label/sessions/${selectedSession}/upload`, {
-          method: 'POST',
-          body: formData,
-        })
-
-        if (res.ok) {
-          const data = await res.json()
-          setUploadResults(data.items || [])
-          fetchQueue()
-          fetchStats()
-        } else {
-          setError('Upload fehlgeschlagen')
-        }
-      } catch (err) {
-        setError('Netzwerkfehler beim Upload')
-      } finally {
-        setUploading(false)
-      }
-    }
-
-    return (
-      <div className="space-y-6">
-        {/* Session Selection */}
-        <div className="bg-white rounded-lg shadow p-6">
-          <h3 className="text-lg font-semibold mb-4">Session auswaehlen</h3>
-          <select
-            value={selectedSession || ''}
-            onChange={(e) => setSelectedSession(e.target.value || null)}
-            className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
-          >
-            <option value="">-- Session waehlen --</option>
-            {sessions.map((session) => (
-              <option key={session.id} value={session.id}>
-                {session.name} ({session.total_items} Items)
-              </option>
-            ))}
-          </select>
-        </div>
-
-        {/* Upload Area */}
-        <div className="bg-white rounded-lg shadow p-6">
-          <h3 className="text-lg font-semibold mb-4">Bilder hochladen</h3>
-          <div
-            className={`border-2 border-dashed rounded-lg p-8 text-center ${
-              selectedSession ? 'border-slate-300 hover:border-primary-500' : 'border-slate-200 opacity-50'
-            }`}
-            onDragOver={(e) => {
-              e.preventDefault()
-              e.currentTarget.classList.add('border-primary-500', 'bg-primary-50')
-            }}
-            onDragLeave={(e) => {
-              e.currentTarget.classList.remove('border-primary-500', 'bg-primary-50')
-            }}
-            onDrop={(e) => {
-              e.preventDefault()
-              e.currentTarget.classList.remove('border-primary-500', 'bg-primary-50')
-              if (e.dataTransfer.files.length > 0) {
-                handleUpload(e.dataTransfer.files)
-              }
-            }}
-          >
-            <input
-              ref={fileInputRef}
-              type="file"
-              multiple
-              accept="image/png,image/jpeg,image/jpg"
-              onChange={(e) => e.target.files && handleUpload(e.target.files)}
-              className="hidden"
-              disabled={!selectedSession}
-            />
-            {uploading ? (
-              <div className="flex flex-col items-center gap-2">
-                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600" />
-                <p>Hochladen & OCR ausfuehren...</p>
-              </div>
-            ) : (
-              <>
-                <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="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                </svg>
-                <p className="text-slate-600 mb-2">
-                  Bilder hierher ziehen oder{' '}
-                  <button
-                    onClick={() => fileInputRef.current?.click()}
-                    disabled={!selectedSession}
-                    className="text-primary-600 hover:underline"
-                  >
-                    auswaehlen
-                  </button>
-                </p>
-                <p className="text-sm text-slate-500">PNG, JPG (max. 10MB pro Bild)</p>
-              </>
-            )}
-          </div>
-        </div>
-
-        {/* Upload Results */}
-        {uploadResults.length > 0 && (
-          <div className="bg-white rounded-lg shadow p-6">
-            <h3 className="text-lg font-semibold mb-4">Upload-Ergebnisse ({uploadResults.length})</h3>
-            <div className="space-y-2">
-              {uploadResults.map((result) => (
-                <div key={result.id} className="flex items-center justify-between p-2 bg-slate-50 rounded">
-                  <span className="text-sm">{result.filename}</span>
-                  <span className={`text-xs px-2 py-1 rounded ${
-                    result.ocr_text ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'
-                  }`}>
-                    {result.ocr_text ? `OCR OK (${Math.round((result.ocr_confidence || 0) * 100)}%)` : 'Kein OCR'}
-                  </span>
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-    )
-  }
-
-  // Render Stats Tab
-  const renderStatsTab = () => (
-    <div className="space-y-6">
-      {/* Global Stats */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-        <div className="bg-white rounded-lg shadow p-6">
-          <h4 className="text-sm font-medium text-slate-500">Gesamt Items</h4>
-          <p className="text-3xl font-bold mt-2">{stats?.total_items || 0}</p>
-        </div>
-        <div className="bg-white rounded-lg shadow p-6">
-          <h4 className="text-sm font-medium text-slate-500">Gelabelt</h4>
-          <p className="text-3xl font-bold mt-2 text-green-600">{stats?.labeled_items || 0}</p>
-        </div>
-        <div className="bg-white rounded-lg shadow p-6">
-          <h4 className="text-sm font-medium text-slate-500">Ausstehend</h4>
-          <p className="text-3xl font-bold mt-2 text-yellow-600">{stats?.pending_items || 0}</p>
-        </div>
-        <div className="bg-white rounded-lg shadow p-6">
-          <h4 className="text-sm font-medium text-slate-500">OCR-Genauigkeit</h4>
-          <p className="text-3xl font-bold mt-2">{stats?.accuracy_rate || 0}%</p>
-        </div>
-      </div>
-
-      {/* Detailed Stats */}
-      <div className="bg-white rounded-lg shadow p-6">
-        <h3 className="text-lg font-semibold mb-4">Details</h3>
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <div>
-            <p className="text-sm text-slate-500">Bestaetigt</p>
-            <p className="text-xl font-semibold text-green-600">{stats?.confirmed_items || 0}</p>
-          </div>
-          <div>
-            <p className="text-sm text-slate-500">Korrigiert</p>
-            <p className="text-xl font-semibold text-primary-600">{stats?.corrected_items || 0}</p>
-          </div>
-          <div>
-            <p className="text-sm text-slate-500">Exportierbar</p>
-            <p className="text-xl font-semibold">{stats?.exportable_items || 0}</p>
-          </div>
-          <div>
-            <p className="text-sm text-slate-500">Durchschn. Label-Zeit</p>
-            <p className="text-xl font-semibold">{stats?.avg_label_time_seconds || 0}s</p>
-          </div>
-        </div>
-      </div>
-
-      {/* Progress Bar */}
-      {stats?.total_items ? (
-        <div className="bg-white rounded-lg shadow p-6">
-          <h3 className="text-lg font-semibold mb-4">Fortschritt</h3>
-          <div className="w-full bg-slate-200 rounded-full h-4">
-            <div
-              className="bg-primary-600 rounded-full h-4 transition-all"
-              style={{ width: `${(stats.labeled_items / stats.total_items) * 100}%` }}
-            />
-          </div>
-          <p className="text-sm text-slate-500 mt-2">
-            {Math.round((stats.labeled_items / stats.total_items) * 100)}% abgeschlossen
-          </p>
-        </div>
-      ) : null}
-    </div>
-  )
-
-  // Render Export Tab
-  const renderExportTab = () => {
-    const [exportFormat, setExportFormat] = useState<'generic' | 'trocr' | 'llama_vision'>('generic')
-    const [exporting, setExporting] = useState(false)
-    const [exportResult, setExportResult] = useState<any>(null)
-
-    const handleExport = async () => {
-      setExporting(true)
-      try {
-        const res = await fetch(`${API_BASE}/api/v1/ocr-label/export`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            export_format: exportFormat,
-            session_id: selectedSession,
-          }),
-        })
-
-        if (res.ok) {
-          const data = await res.json()
-          setExportResult(data)
-        } else {
-          setError('Export fehlgeschlagen')
-        }
-      } catch (err) {
-        setError('Netzwerkfehler')
-      } finally {
-        setExporting(false)
-      }
-    }
-
-    return (
-      <div className="space-y-6">
-        <div className="bg-white rounded-lg shadow p-6">
-          <h3 className="text-lg font-semibold mb-4">Training-Daten exportieren</h3>
-          <div className="space-y-4">
-            <div>
-              <label className="block text-sm font-medium text-slate-700 mb-1">Export-Format</label>
-              <select
-                value={exportFormat}
-                onChange={(e) => setExportFormat(e.target.value as typeof exportFormat)}
-                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
-              >
-                <option value="generic">Generic JSON</option>
-                <option value="trocr">TrOCR Fine-Tuning</option>
-                <option value="llama_vision">Llama Vision Fine-Tuning</option>
-              </select>
-            </div>
-
-            <div>
-              <label className="block text-sm font-medium text-slate-700 mb-1">Session (optional)</label>
-              <select
-                value={selectedSession || ''}
-                onChange={(e) => setSelectedSession(e.target.value || null)}
-                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500"
-              >
-                <option value="">Alle Sessions</option>
-                {sessions.map((session) => (
-                  <option key={session.id} value={session.id}>{session.name}</option>
-                ))}
-              </select>
-            </div>
-
-            <button
-              onClick={handleExport}
-              disabled={exporting || (stats?.exportable_items || 0) === 0}
-              className="w-full px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50"
-            >
-              {exporting ? 'Exportiere...' : `${stats?.exportable_items || 0} Samples exportieren`}
-            </button>
-
-            {/* Cross-Link to Magic Help for TrOCR Fine-Tuning */}
-            {exportFormat === 'trocr' && (stats?.exportable_items || 0) > 0 && (
-              <Link
-                href="/ai/magic-help?source=ocr-labeling"
-                className="w-full mt-3 px-4 py-2 bg-purple-100 text-purple-700 border border-purple-300 rounded-lg hover:bg-purple-200 flex items-center justify-center gap-2 transition-colors"
-              >
-                <span>✨</span>
-                Mit Magic Help testen & fine-tunen
-              </Link>
-            )}
-          </div>
-        </div>
-
-        {exportResult && (
-          <div className="bg-white rounded-lg shadow p-6">
-            <h3 className="text-lg font-semibold mb-4">Export-Ergebnis</h3>
-            <div className="bg-green-50 border border-green-200 rounded-lg p-4 mb-4">
-              <p className="text-green-800">
-                {exportResult.exported_count} Samples erfolgreich exportiert
-              </p>
-              <p className="text-sm text-green-600">
-                Batch: {exportResult.batch_id}
-              </p>
-            </div>
-            <div className="bg-slate-50 p-4 rounded-lg overflow-auto max-h-64">
-              <pre className="text-xs">{JSON.stringify(exportResult.samples?.slice(0, 3), null, 2)}</pre>
-              {(exportResult.samples?.length || 0) > 3 && (
-                <p className="text-slate-500 mt-2">... und {exportResult.samples.length - 3} weitere</p>
-              )}
-            </div>
-          </div>
-        )}
-      </div>
-    )
-  }
+  const hook = useOcrLabeling()
 
   return (
     <div className="p-6">
@@ -939,10 +56,10 @@ export default function OCRLabelingPage() {
       <AIModuleSidebarResponsive currentModule="ocr-labeling" />
 
       {/* Error Toast */}
-      {error && (
+      {hook.error && (
         <div className="fixed top-4 right-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded z-50">
-          <span>{error}</span>
-          <button onClick={() => setError(null)} className="ml-4">X</button>
+          <span>{hook.error}</span>
+          <button onClick={() => hook.setError(null)} className="ml-4">X</button>
         </div>
       )}
 
@@ -969,17 +86,58 @@ export default function OCRLabelingPage() {
       </div>
 
       {/* Tab Content */}
-      {loading ? (
+      {hook.loading ? (
         <div className="flex items-center justify-center h-64">
           <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600" />
         </div>
       ) : (
         <>
-          {activeTab === 'labeling' && renderLabelingTab()}
-          {activeTab === 'sessions' && renderSessionsTab()}
-          {activeTab === 'upload' && renderUploadTab()}
-          {activeTab === 'stats' && renderStatsTab()}
-          {activeTab === 'export' && renderExportTab()}
+          {activeTab === 'labeling' && (
+            <LabelingTab
+              queue={hook.queue}
+              currentItem={hook.currentItem}
+              currentIndex={hook.currentIndex}
+              correctedText={hook.correctedText}
+              setCorrectedText={hook.setCorrectedText}
+              goToNext={hook.goToNext}
+              goToPrev={hook.goToPrev}
+              selectQueueItem={hook.selectQueueItem}
+              confirmItem={hook.confirmItem}
+              correctItem={hook.correctItem}
+              skipItem={hook.skipItem}
+            />
+          )}
+          {activeTab === 'sessions' && (
+            <SessionsTab
+              sessions={hook.sessions}
+              selectedSession={hook.selectedSession}
+              setSelectedSession={hook.setSelectedSession}
+              fetchSessions={hook.fetchSessions}
+              setError={hook.setError}
+            />
+          )}
+          {activeTab === 'upload' && (
+            <UploadTab
+              sessions={hook.sessions}
+              selectedSession={hook.selectedSession}
+              setSelectedSession={hook.setSelectedSession}
+              fetchQueue={hook.fetchQueue}
+              fetchStats={hook.fetchStats}
+              setError={hook.setError}
+            />
+          )}
+          {activeTab === 'stats' && (
+            <StatsTab stats={hook.stats} />
+          )}
+          {activeTab === 'export' && (
+            <ExportTab
+              sessions={hook.sessions}
+              selectedSession={hook.selectedSession}
+              setSelectedSession={hook.setSelectedSession}
+              stats={hook.stats}
+              setError={hook.setError}
+            />
+          )}
         </>
       )}
     </div>
diff --git a/admin-lehrer/app/(admin)/ai/ocr-labeling/useOcrLabeling.ts b/admin-lehrer/app/(admin)/ai/ocr-labeling/useOcrLabeling.ts
new file mode 100644
index 0000000..5162887
--- /dev/null
+++ b/admin-lehrer/app/(admin)/ai/ocr-labeling/useOcrLabeling.ts
@@ -0,0 +1,255 @@
+'use client'
+
+/**
+ * Custom hook encapsulating all state and API logic for the OCR Labeling page.
+ */
+
+import { useState, useEffect, useCallback } from 'react'
+import { API_BASE } from './constants'
+import type { OCRSession, OCRItem, OCRStats } from './types'
+
+export function useOcrLabeling() {
+  const [sessions, setSessions] = useState<OCRSession[]>([])
+  const [selectedSession, setSelectedSession] = useState<string | null>(null)
+  const [queue, setQueue] = useState<OCRItem[]>([])
+  const [currentItem, setCurrentItem] = useState<OCRItem | null>(null)
+  const [currentIndex, setCurrentIndex] = useState(0)
+  const [stats, setStats] = useState<OCRStats | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [correctedText, setCorrectedText] = useState('')
+  const [labelStartTime, setLabelStartTime] = useState<number | null>(null)
+
+  // Fetch sessions
+  const fetchSessions = useCallback(async () => {
+    try {
+      const res = await fetch(`${API_BASE}/api/v1/ocr-label/sessions`)
+      if (res.ok) {
+        const data = await res.json()
+        setSessions(data)
+      }
+    } catch (err) {
+      console.error('Failed to fetch sessions:', err)
+    }
+  }, [])
+
+  // Fetch queue
+  const fetchQueue = useCallback(async () => {
+    try {
+      const url = selectedSession
+        ? `${API_BASE}/api/v1/ocr-label/queue?session_id=${selectedSession}&limit=20`
+        : `${API_BASE}/api/v1/ocr-label/queue?limit=20`
+      const res = await fetch(url)
+      if (res.ok) {
+        const data = await res.json()
+        setQueue(data)
+        if (data.length > 0 && !currentItem) {
+          setCurrentItem(data[0])
+          setCurrentIndex(0)
+          setCorrectedText(data[0].ocr_text || '')
+          setLabelStartTime(Date.now())
+        }
+      }
+    } catch (err) {
+      console.error('Failed to fetch queue:', err)
+    }
+  }, [selectedSession, currentItem])
+
+  // Fetch stats
+  const fetchStats = useCallback(async () => {
+    try {
+      const url = selectedSession
+        ? `${API_BASE}/api/v1/ocr-label/stats?session_id=${selectedSession}`
+        : `${API_BASE}/api/v1/ocr-label/stats`
+      const res = await fetch(url)
+      if (res.ok) {
+        const data = await res.json()
+        setStats(data)
+      }
+    } catch (err) {
+      console.error('Failed to fetch stats:', err)
+    }
+  }, [selectedSession])
+
+  // Initial data load
+  useEffect(() => {
+    const loadData = async () => {
+      setLoading(true)
+      await Promise.all([fetchSessions(), fetchQueue(), fetchStats()])
+      setLoading(false)
+    }
+    loadData()
+  }, [fetchSessions, fetchQueue, fetchStats])
+
+  // Refresh queue when session changes
+  useEffect(() => {
+    setCurrentItem(null)
+    setCurrentIndex(0)
+    fetchQueue()
+    fetchStats()
+  }, [selectedSession, fetchQueue, fetchStats])
+
+  // Navigate to next item
+  const goToNext = useCallback(() => {
+    if (currentIndex < queue.length - 1) {
+      const nextIndex = currentIndex + 1
+      setCurrentIndex(nextIndex)
+      setCurrentItem(queue[nextIndex])
+      setCorrectedText(queue[nextIndex].ocr_text || '')
+      setLabelStartTime(Date.now())
+    } else {
+      fetchQueue()
+    }
+  }, [currentIndex, queue, fetchQueue])
+
+  // Navigate to previous item
+  const goToPrev = useCallback(() => {
+    if (currentIndex > 0) {
+      const prevIndex = currentIndex - 1
+      setCurrentIndex(prevIndex)
+      setCurrentItem(queue[prevIndex])
+      setCorrectedText(queue[prevIndex].ocr_text || '')
+      setLabelStartTime(Date.now())
+    }
+  }, [currentIndex, queue])
+
+  // Calculate label time
+  const getLabelTime = useCallback((): number | undefined => {
+    if (!labelStartTime) return undefined
+    return Math.round((Date.now() - labelStartTime) / 1000)
+  }, [labelStartTime])
+
+  // Select a queue item by index
+  const selectQueueItem = useCallback((idx: number) => {
+    if (idx >= 0 && idx < queue.length) {
+      setCurrentIndex(idx)
+      setCurrentItem(queue[idx])
+      setCorrectedText(queue[idx].ocr_text || '')
+      setLabelStartTime(Date.now())
+    }
+  }, [queue])
+
+  // Confirm item
+  const confirmItem = useCallback(async () => {
+    if (!currentItem) return
+
+    try {
+      const res = await fetch(`${API_BASE}/api/v1/ocr-label/confirm`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          item_id: currentItem.id,
+          label_time_seconds: getLabelTime(),
+        }),
+      })
+
+      if (res.ok) {
+        setQueue(prev => prev.filter(item => item.id !== currentItem.id))
+        goToNext()
+        fetchStats()
+      } else {
+        setError('Bestaetigung fehlgeschlagen')
+      }
+    } catch {
+      setError('Netzwerkfehler')
+    }
+  }, [currentItem, getLabelTime, goToNext, fetchStats])
+
+  // Correct item
+  const correctItem = useCallback(async () => {
+    if (!currentItem || !correctedText.trim()) return
+
+    try {
+      const res = await fetch(`${API_BASE}/api/v1/ocr-label/correct`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          item_id: currentItem.id,
+          ground_truth: correctedText.trim(),
+          label_time_seconds: getLabelTime(),
+        }),
+      })
+
+      if (res.ok) {
+        setQueue(prev => prev.filter(item => item.id !== currentItem.id))
+        goToNext()
+        fetchStats()
+      } else {
+        setError('Korrektur fehlgeschlagen')
+      }
+    } catch {
+      setError('Netzwerkfehler')
+    }
+  }, [currentItem, correctedText, getLabelTime, goToNext, fetchStats])
+
+  // Skip item
+  const skipItem = useCallback(async () => {
+    if (!currentItem) return
+
+    try {
+      const res = await fetch(`${API_BASE}/api/v1/ocr-label/skip`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ item_id: currentItem.id }),
+      })
+
+      if (res.ok) {
+        setQueue(prev => prev.filter(item => item.id !== currentItem.id))
+        goToNext()
+        fetchStats()
+      } else {
+        setError('Ueberspringen fehlgeschlagen')
+      }
+    } catch {
+      setError('Netzwerkfehler')
+    }
+  }, [currentItem, goToNext, fetchStats])
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.target instanceof HTMLTextAreaElement) return
+
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault()
+        confirmItem()
+      } else if (e.key === 'ArrowRight') {
+        goToNext()
+      } else if (e.key === 'ArrowLeft') {
+        goToPrev()
+      } else if (e.key === 's' && !e.ctrlKey && !e.metaKey) {
+        skipItem()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [confirmItem, goToNext, goToPrev, skipItem])
+
+  return {
+    // State
+    sessions,
+    selectedSession,
+    setSelectedSession,
+    queue,
+    currentItem,
+    currentIndex,
+    stats,
+    loading,
+    error,
+    setError,
+    correctedText,
+    setCorrectedText,
+
+    // Actions
+    fetchSessions,
+    fetchQueue,
+    fetchStats,
+    goToNext,
+    goToPrev,
+    selectQueueItem,
+    confirmItem,
+    correctItem,
+    skipItem,
+  }
+}
diff --git a/admin-lehrer/app/(admin)/ai/quality/_components/ResultsList.tsx b/admin-lehrer/app/(admin)/ai/quality/_components/ResultsList.tsx
new file mode 100644
index 0000000..6c5da19
--- /dev/null
+++ b/admin-lehrer/app/(admin)/ai/quality/_components/ResultsList.tsx
@@ -0,0 +1,74 @@
+import type { ChunkDetail } from './types'
+
+interface ResultsListProps {
+  results: ChunkDetail[]
+  selectedChunk: ChunkDetail | null
+  searchQuery: string
+  onSelect: (chunk: ChunkDetail) => void
+}
+
+function highlightText(text: string, query: string) {
+  if (!query) return text
+  const words = query.toLowerCase().split(' ').filter(w => w.length > 2)
+  let result = text
+  words.forEach(word => {
+    const regex = new RegExp(`(${word})`, 'gi')
+    result = result.replace(regex, '<mark class="bg-yellow-200 dark:bg-yellow-800 px-0.5 rounded">$1</mark>')
+  })
+  return result
+}
+
+export function ResultsList({ results, selectedChunk, searchQuery, onSelect }: ResultsListProps) {
+  return (
+    <div className="bg-white dark:bg-slate-800 rounded-lg shadow p-4">
+      <h3 className="text-md font-semibold text-gray-900 dark:text-white mb-4">
+        Gefundene Chunks ({results.length})
+      </h3>
+      <div className="space-y-3 max-h-[600px] overflow-y-auto">
+        {results.map((result, idx) => (
+          <div
+            key={idx}
+            onClick={() => onSelect(result)}
+            className={`p-4 border rounded-lg cursor-pointer transition-all ${
+              selectedChunk?.text === result.text
+                ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
+                : 'border-gray-200 dark:border-slate-700 hover:border-gray-300 dark:hover:border-slate-600'
+            }`}
+          >
+            {/* Header */}
+            <div className="flex items-center justify-between mb-2">
+              <div className="flex items-center gap-2">
+                <span className="text-xs font-medium px-2 py-0.5 bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 rounded">
+                  {result.regulation_code}
+                </span>
+                {result.article && (
+                  <span className="text-xs text-gray-500 dark:text-gray-400">
+                    Art. {result.article}
+                    {result.paragraph && ` Abs. ${result.paragraph}`}
+                  </span>
+                )}
+              </div>
+              <span className="text-xs text-gray-400">
+                Score: {(result.score || 0).toFixed(3)}
+              </span>
+            </div>
+
+            {/* Text Preview */}
+            <p
+              className="text-sm text-gray-700 dark:text-gray-300 line-clamp-4"
+              dangerouslySetInnerHTML={{
+                __html: highlightText(result.text.substring(0, 400) + (result.text.length > 400 ? '...' : ''), searchQuery)
+              }}
+            />
+
+            {/* Metadata */}
+            <div className="mt-2 flex items-center gap-4 text-xs text-gray-400">
+              <span>Chunk #{result.chunk_index || idx}</span>
+              <span>{result.text.length} Zeichen</span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/ai/quality/_components/SearchSection.tsx b/admin-lehrer/app/(admin)/ai/quality/_components/SearchSection.tsx
new file mode 100644
index 0000000..dce7d05
--- /dev/null
+++ b/admin-lehrer/app/(admin)/ai/quality/_components/SearchSection.tsx
@@ -0,0 +1,112 @@
+import { REGULATIONS, SAMPLE_QUERIES } from './types'
+
+interface SearchSectionProps {
+  searchQuery: string
+  selectedRegulation: string
+  topK: number
+  searching: boolean
+  onSearchQueryChange: (v: string) => void
+  onRegulationChange: (v: string) => void
+  onTopKChange: (v: number) => void
+  onSearch: () => void
+  onSampleQuery: (query: string, reg: string) => void
+}
+
+export function SearchSection({
+  searchQuery,
+  selectedRegulation,
+  topK,
+  searching,
+  onSearchQueryChange,
+  onRegulationChange,
+  onTopKChange,
+  onSearch,
+  onSampleQuery,
+}: SearchSectionProps) {
+  return (
+    <>
+      {/* Quick Sample Queries */}
+      <div className="bg-white dark:bg-slate-800 rounded-lg shadow p-4">
+        <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
+          Schnell-Stichproben
+        </h3>
+        <div className="flex flex-wrap gap-2">
+          {SAMPLE_QUERIES.map((sq, idx) => (
+            <button
+              key={idx}
+              onClick={() => onSampleQuery(sq.query, sq.reg)}
+              className="px-3 py-1.5 text-xs bg-gray-100 hover:bg-gray-200 dark:bg-slate-700 dark:hover:bg-slate-600 text-gray-700 dark:text-gray-300 rounded-full transition-colors"
+            >
+              {sq.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Search Section */}
+      <div className="bg-white dark:bg-slate-800 rounded-lg shadow p-6">
+        <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+          Chunk-Suche
+        </h2>
+
+        <div className="space-y-4">
+          {/* Search Input */}
+          <div className="flex gap-4">
+            <div className="flex-1">
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Suchbegriff / Paragraph / Artikeltext
+              </label>
+              <input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => onSearchQueryChange(e.target.value)}
+                onKeyDown={(e) => e.key === 'Enter' && onSearch()}
+                placeholder="z.B. 'Recht auf Löschung' oder 'Art. 17 Abs. 1'"
+                className="w-full px-4 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:text-white"
+              />
+            </div>
+            <div className="w-48">
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Regulierung
+              </label>
+              <select
+                value={selectedRegulation}
+                onChange={(e) => onRegulationChange(e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:text-white"
+              >
+                <option value="">Alle</option>
+                {REGULATIONS.map((reg) => (
+                  <option key={reg.code} value={reg.code}>
+                    {reg.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div className="w-24">
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Anzahl
+              </label>
+              <select
+                value={topK}
+                onChange={(e) => onTopKChange(parseInt(e.target.value))}
+                className="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:text-white"
+              >
+                <option value="5">5</option>
+                <option value="10">10</option>
+                <option value="20">20</option>
+              </select>
+            </div>
+          </div>
+
+          <button
+            onClick={onSearch}
+            disabled={searching || !searchQuery.trim()}
+            className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            {searching ? 'Suche laeuft...' : 'Suchen'}
+          </button>
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/ai/quality/_components/TraceabilityPanel.tsx b/admin-lehrer/app/(admin)/ai/quality/_components/TraceabilityPanel.tsx
new file mode 100644
index 0000000..9f2e263
--- /dev/null
+++ b/admin-lehrer/app/(admin)/ai/quality/_components/TraceabilityPanel.tsx
@@ -0,0 +1,150 @@
+import type { ChunkDetail, TraceabilityResult } from './types'
+
+interface TraceabilityPanelProps {
+  selectedChunk: ChunkDetail | null
+  loadingTrace: boolean
+  traceability: TraceabilityResult | null
+}
+
+export function TraceabilityPanel({ selectedChunk, loadingTrace, traceability }: TraceabilityPanelProps) {
+  return (
+    <div className="bg-white dark:bg-slate-800 rounded-lg shadow p-4">
+      <h3 className="text-md font-semibold text-gray-900 dark:text-white mb-4">
+        Traceability
+      </h3>
+
+      {!selectedChunk ? (
+        <div className="text-center py-12 text-gray-500 dark:text-gray-400">
+          <svg className="w-12 h-12 mx-auto mb-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+          <p>Waehlen Sie einen Chunk aus der Liste, um die Traceability zu sehen.</p>
+        </div>
+      ) : loadingTrace ? (
+        <div className="text-center py-12">
+          <div className="animate-spin w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full mx-auto mb-4"></div>
+          <p className="text-gray-500 dark:text-gray-400">Lade Traceability...</p>
+        </div>
+      ) : traceability ? (
+        <div className="space-y-6">
+          {/* Selected Chunk Detail */}
+          <ChunkDetailSection chunk={traceability.chunk} />
+
+          <ArrowDown />
+
+          {/* Requirements */}
+          <RequirementsSection requirements={traceability.requirements} />
+
+          <ArrowDown />
+
+          {/* Controls */}
+          <ControlsSection controls={traceability.controls} />
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+function ChunkDetailSection({ chunk }: { chunk: ChunkDetail }) {
+  return (
+    <div className="border-l-4 border-blue-500 pl-4">
+      <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+        Ausgewaehlter Chunk
+      </h4>
+      <div className="bg-gray-50 dark:bg-slate-700 rounded p-3">
+        <div className="flex items-center gap-2 mb-2">
+          <span className="text-xs font-medium px-2 py-0.5 bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 rounded">
+            {chunk.regulation_code}
+          </span>
+          {chunk.article && (
+            <span className="text-xs text-gray-500 dark:text-gray-400">
+              Art. {chunk.article}
+              {chunk.paragraph && ` Abs. ${chunk.paragraph}`}
+            </span>
+          )}
+        </div>
+        <p className="text-sm text-gray-600 dark:text-gray-300 whitespace-pre-wrap">
+          {chunk.text}
+        </p>
+        {chunk.source_url && (
+          <a
+            href={chunk.source_url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="mt-2 inline-flex items-center gap-1 text-xs text-blue-600 hover:underline"
+          >
+            Quelle oeffnen
+          </a>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function RequirementsSection({ requirements }: { requirements: TraceabilityResult['requirements'] }) {
+  return (
+    <div className="border-l-4 border-orange-500 pl-4">
+      <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+        Extrahierte Anforderungen ({requirements.length})
+      </h4>
+      {requirements.length > 0 ? (
+        <div className="space-y-2">
+          {requirements.map((req, idx) => (
+            <div key={idx} className="bg-orange-50 dark:bg-orange-900/20 rounded p-3">
+              <div className="flex items-center gap-2 mb-1">
+                <span className="text-xs font-medium text-orange-700 dark:text-orange-400">
+                  {req.category || 'Anforderung'}
+                </span>
+              </div>
+              <p className="text-sm text-gray-600 dark:text-gray-300">{req.text}</p>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <p className="text-sm text-gray-500 dark:text-gray-400 italic">
+          Keine Anforderungen aus diesem Chunk extrahiert.
+          <br />
+          <span className="text-xs">(Requirements-Extraktion ist noch nicht implementiert)</span>
+        </p>
+      )}
+    </div>
+  )
+}
+
+function ControlsSection({ controls }: { controls: TraceabilityResult['controls'] }) {
+  return (
+    <div className="border-l-4 border-green-500 pl-4">
+      <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+        Abgeleitete Controls ({controls.length})
+      </h4>
+      {controls.length > 0 ? (
+        <div className="space-y-2">
+          {controls.map((ctrl, idx) => (
+            <div key={idx} className="bg-green-50 dark:bg-green-900/20 rounded p-3">
+              <div className="font-medium text-sm text-green-700 dark:text-green-400 mb-1">
+                {ctrl.name}
+              </div>
+              <p className="text-sm text-gray-600 dark:text-gray-300">{ctrl.description}</p>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <p className="text-sm text-gray-500 dark:text-gray-400 italic">
+          Keine Controls aus diesem Chunk abgeleitet.
+          <br />
+          <span className="text-xs">(Control-Ableitung ist noch nicht implementiert)</span>
+        </p>
+      )}
+    </div>
+  )
+}
+
+function ArrowDown() {
+  return (
+    <div className="flex justify-center">
+      <svg className="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+      </svg>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/ai/quality/_components/types.ts b/admin-lehrer/app/(admin)/ai/quality/_components/types.ts
new file mode 100644
index 0000000..495672a
--- /dev/null
+++ b/admin-lehrer/app/(admin)/ai/quality/_components/types.ts
@@ -0,0 +1,66 @@
+export interface ChunkDetail {
+  id: string
+  text: string
+  regulation_code: string
+  regulation_name: string
+  article: string | null
+  paragraph: string | null
+  chunk_index: number
+  chunk_position: 'beginning' | 'middle' | 'end'
+  source_url: string
+  score?: number
+}
+
+export interface Requirement {
+  id: string
+  text: string
+  category: string
+  source_chunk_id: string
+  regulation_code: string
+}
+
+export interface Control {
+  id: string
+  name: string
+  description: string
+  source_requirement_ids: string[]
+  regulation_codes: string[]
+}
+
+export interface TraceabilityResult {
+  chunk: ChunkDetail
+  requirements: Requirement[]
+  controls: Control[]
+}
+
+export const API_PROXY = '/api/legal-corpus'
+
+export const REGULATIONS = [
+  { code: 'GDPR', name: 'DSGVO' },
+  { code: 'EPRIVACY', name: 'ePrivacy' },
+  { code: 'TDDDG', name: 'TDDDG' },
+  { code: 'SCC', name: 'Standardvertragsklauseln' },
+  { code: 'DPF', name: 'EU-US DPF' },
+  { code: 'AIACT', name: 'EU AI Act' },
+  { code: 'CRA', name: 'Cyber Resilience Act' },
+  { code: 'NIS2', name: 'NIS2' },
+  { code: 'EUCSA', name: 'EU Cybersecurity Act' },
+  { code: 'DATAACT', name: 'Data Act' },
+  { code: 'DGA', name: 'Data Governance Act' },
+  { code: 'DSA', name: 'Digital Services Act' },
+  { code: 'EAA', name: 'Accessibility Act' },
+  { code: 'DSM', name: 'DSM-Urheberrecht' },
+  { code: 'PLD', name: 'Produkthaftung' },
+  { code: 'GPSR', name: 'Product Safety' },
+  { code: 'BSI-TR-03161-1', name: 'BSI-TR Teil 1' },
+  { code: 'BSI-TR-03161-2', name: 'BSI-TR Teil 2' },
+  { code: 'BSI-TR-03161-3', name: 'BSI-TR Teil 3' },
+]
+
+export const SAMPLE_QUERIES = [
+  { label: 'Art. 17 DSGVO (Recht auf Loeschung)', query: 'Recht auf Löschung Artikel 17', reg: 'GDPR' },
+  { label: 'Einwilligung TDDDG', query: 'Einwilligung Endeinrichtung speichern', reg: 'TDDDG' },
+  { label: 'AI Act Hochrisiko', query: 'Hochrisiko-KI-System Anforderungen', reg: 'AIACT' },
+  { label: 'NIS2 Sicherheitsmaßnahmen', query: 'Cybersicherheitsrisikomanagement Maßnahmen', reg: 'NIS2' },
+  { label: 'BSI Authentifizierung', query: 'Authentifizierung Zwei-Faktor mobile', reg: 'BSI-TR-03161-1' },
+]
diff --git a/admin-lehrer/app/(admin)/ai/quality/_components/useQualitySearch.ts b/admin-lehrer/app/(admin)/ai/quality/_components/useQualitySearch.ts
new file mode 100644
index 0000000..db77a0b
--- /dev/null
+++ b/admin-lehrer/app/(admin)/ai/quality/_components/useQualitySearch.ts
@@ -0,0 +1,93 @@
+import { useState, useCallback } from 'react'
+import type { ChunkDetail, TraceabilityResult } from './types'
+import { API_PROXY } from './types'
+
+export function useQualitySearch() {
+  const [searchQuery, setSearchQuery] = useState('')
+  const [searchResults, setSearchResults] = useState<ChunkDetail[]>([])
+  const [searching, setSearching] = useState(false)
+  const [selectedRegulation, setSelectedRegulation] = useState<string>('')
+  const [topK, setTopK] = useState(10)
+
+  const [selectedChunk, setSelectedChunk] = useState<ChunkDetail | null>(null)
+  const [traceability, setTraceability] = useState<TraceabilityResult | null>(null)
+  const [loadingTrace, setLoadingTrace] = useState(false)
+
+  const handleSearch = useCallback(async () => {
+    if (!searchQuery.trim()) return
+
+    setSearching(true)
+    setSearchResults([])
+    setSelectedChunk(null)
+    setTraceability(null)
+
+    try {
+      let url = `${API_PROXY}?action=search&query=${encodeURIComponent(searchQuery)}&top_k=${topK}`
+      if (selectedRegulation) {
+        url += `&regulations=${encodeURIComponent(selectedRegulation)}`
+      }
+
+      const res = await fetch(url)
+      if (res.ok) {
+        const data = await res.json()
+        setSearchResults(data.results || [])
+      }
+    } catch (error) {
+      console.error('Search failed:', error)
+    } finally {
+      setSearching(false)
+    }
+  }, [searchQuery, selectedRegulation, topK])
+
+  const loadTraceability = useCallback(async (chunk: ChunkDetail) => {
+    setSelectedChunk(chunk)
+    setLoadingTrace(true)
+
+    try {
+      const res = await fetch(
+        `${API_PROXY}?action=traceability&chunk_id=${encodeURIComponent(chunk.id || chunk.regulation_code + '_' + chunk.chunk_index)}&regulation=${encodeURIComponent(chunk.regulation_code)}`
+      )
+
+      if (res.ok) {
+        const data = await res.json()
+        setTraceability({
+          chunk,
+          requirements: data.requirements || [],
+          controls: data.controls || [],
+        })
+      } else {
+        setTraceability({ chunk, requirements: [], controls: [] })
+      }
+    } catch (error) {
+      console.error('Failed to load traceability:', error)
+      setTraceability({ chunk, requirements: [], controls: [] })
+    } finally {
+      setLoadingTrace(false)
+    }
+  }, [])
+
+  const handleSampleQuery = (query: string, reg: string) => {
+    setSearchQuery(query)
+    setSelectedRegulation(reg)
+    setTimeout(() => {
+      handleSearch()
+    }, 100)
+  }
+
+  return {
+    searchQuery,
+    setSearchQuery,
+    searchResults,
+    searching,
+    selectedRegulation,
+    setSelectedRegulation,
+    topK,
+    setTopK,
+    selectedChunk,
+    traceability,
+    loadingTrace,
+    handleSearch,
+    loadTraceability,
+    handleSampleQuery,
+  }
+}
diff --git a/admin-lehrer/app/(admin)/ai/quality/page.tsx b/admin-lehrer/app/(admin)/ai/quality/page.tsx
index ff3a12a..5982b6c 100644
--- a/admin-lehrer/app/(admin)/ai/quality/page.tsx
+++ b/admin-lehrer/app/(admin)/ai/quality/page.tsx
@@ -5,184 +5,34 @@
  *
  * Ermoeglicht Auditoren:
  * - Chunk-Suche und Stichproben
- * - Traceability: Chunk → Requirement → Control
+ * - Traceability: Chunk -> Requirement -> Control
  * - Dokumenten-Vollstaendigkeitspruefung
  */
 
-import { useState, useCallback } from 'react'
 import Link from 'next/link'
 import { PagePurpose } from '@/components/common/PagePurpose'
-
-const API_PROXY = '/api/legal-corpus'
-
-// Types
-interface ChunkDetail {
-  id: string
-  text: string
-  regulation_code: string
-  regulation_name: string
-  article: string | null
-  paragraph: string | null
-  chunk_index: number
-  chunk_position: 'beginning' | 'middle' | 'end'
-  source_url: string
-  score?: number
-}
-
-interface Requirement {
-  id: string
-  text: string
-  category: string
-  source_chunk_id: string
-  regulation_code: string
-}
-
-interface Control {
-  id: string
-  name: string
-  description: string
-  source_requirement_ids: string[]
-  regulation_codes: string[]
-}
-
-interface TraceabilityResult {
-  chunk: ChunkDetail
-  requirements: Requirement[]
-  controls: Control[]
-}
-
-// Regulations for filtering
-const REGULATIONS = [
-  { code: 'GDPR', name: 'DSGVO' },
-  { code: 'EPRIVACY', name: 'ePrivacy' },
-  { code: 'TDDDG', name: 'TDDDG' },
-  { code: 'SCC', name: 'Standardvertragsklauseln' },
-  { code: 'DPF', name: 'EU-US DPF' },
-  { code: 'AIACT', name: 'EU AI Act' },
-  { code: 'CRA', name: 'Cyber Resilience Act' },
-  { code: 'NIS2', name: 'NIS2' },
-  { code: 'EUCSA', name: 'EU Cybersecurity Act' },
-  { code: 'DATAACT', name: 'Data Act' },
-  { code: 'DGA', name: 'Data Governance Act' },
-  { code: 'DSA', name: 'Digital Services Act' },
-  { code: 'EAA', name: 'Accessibility Act' },
-  { code: 'DSM', name: 'DSM-Urheberrecht' },
-  { code: 'PLD', name: 'Produkthaftung' },
-  { code: 'GPSR', name: 'Product Safety' },
-  { code: 'BSI-TR-03161-1', name: 'BSI-TR Teil 1' },
-  { code: 'BSI-TR-03161-2', name: 'BSI-TR Teil 2' },
-  { code: 'BSI-TR-03161-3', name: 'BSI-TR Teil 3' },
-]
-
-const TYPE_COLORS: Record<string, string> = {
-  eu_regulation: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
-  eu_directive: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400',
-  de_law: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',
-  bsi_standard: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
-}
+import { useQualitySearch } from './_components/useQualitySearch'
+import { SearchSection } from './_components/SearchSection'
+import { ResultsList } from './_components/ResultsList'
+import { TraceabilityPanel } from './_components/TraceabilityPanel'
 
 export default function QualityPage() {
-  // Search state
-  const [searchQuery, setSearchQuery] = useState('')
-  const [searchResults, setSearchResults] = useState<ChunkDetail[]>([])
-  const [searching, setSearching] = useState(false)
-  const [selectedRegulation, setSelectedRegulation] = useState<string>('')
-  const [topK, setTopK] = useState(10)
-
-  // Traceability state
-  const [selectedChunk, setSelectedChunk] = useState<ChunkDetail | null>(null)
-  const [traceability, setTraceability] = useState<TraceabilityResult | null>(null)
-  const [loadingTrace, setLoadingTrace] = useState(false)
-
-  // Quick sample queries for auditors
-  const sampleQueries = [
-    { label: 'Art. 17 DSGVO (Recht auf Loeschung)', query: 'Recht auf Löschung Artikel 17', reg: 'GDPR' },
-    { label: 'Einwilligung TDDDG', query: 'Einwilligung Endeinrichtung speichern', reg: 'TDDDG' },
-    { label: 'AI Act Hochrisiko', query: 'Hochrisiko-KI-System Anforderungen', reg: 'AIACT' },
-    { label: 'NIS2 Sicherheitsmaßnahmen', query: 'Cybersicherheitsrisikomanagement Maßnahmen', reg: 'NIS2' },
-    { label: 'BSI Authentifizierung', query: 'Authentifizierung Zwei-Faktor mobile', reg: 'BSI-TR-03161-1' },
-  ]
-
-  const handleSearch = useCallback(async () => {
-    if (!searchQuery.trim()) return
-
-    setSearching(true)
-    setSearchResults([])
-    setSelectedChunk(null)
-    setTraceability(null)
-
-    try {
-      let url = `${API_PROXY}?action=search&query=${encodeURIComponent(searchQuery)}&top_k=${topK}`
-      if (selectedRegulation) {
-        url += `&regulations=${encodeURIComponent(selectedRegulation)}`
-      }
-
-      const res = await fetch(url)
-      if (res.ok) {
-        const data = await res.json()
-        setSearchResults(data.results || [])
-      }
-    } catch (error) {
-      console.error('Search failed:', error)
-    } finally {
-      setSearching(false)
-    }
-  }, [searchQuery, selectedRegulation, topK])
-
-  const loadTraceability = useCallback(async (chunk: ChunkDetail) => {
-    setSelectedChunk(chunk)
-    setLoadingTrace(true)
-
-    try {
-      // Try to load traceability (requirements and controls derived from this chunk)
-      const res = await fetch(`${API_PROXY}?action=traceability&chunk_id=${encodeURIComponent(chunk.id || chunk.regulation_code + '_' + chunk.chunk_index)}&regulation=${encodeURIComponent(chunk.regulation_code)}`)
-
-      if (res.ok) {
-        const data = await res.json()
-        setTraceability({
-          chunk,
-          requirements: data.requirements || [],
-          controls: data.controls || [],
-        })
-      } else {
-        // If traceability endpoint doesn't exist yet, show placeholder
-        setTraceability({
-          chunk,
-          requirements: [],
-          controls: [],
-        })
-      }
-    } catch (error) {
-      console.error('Failed to load traceability:', error)
-      setTraceability({
-        chunk,
-        requirements: [],
-        controls: [],
-      })
-    } finally {
-      setLoadingTrace(false)
-    }
-  }, [])
-
-  const handleSampleQuery = (query: string, reg: string) => {
-    setSearchQuery(query)
-    setSelectedRegulation(reg)
-    // Auto-search after setting
-    setTimeout(() => {
-      handleSearch()
-    }, 100)
-  }
-
-  const highlightText = (text: string, query: string) => {
-    if (!query) return text
-    const words = query.toLowerCase().split(' ').filter(w => w.length > 2)
-    let result = text
-    words.forEach(word => {
-      const regex = new RegExp(`(${word})`, 'gi')
-      result = result.replace(regex, '<mark class="bg-yellow-200 dark:bg-yellow-800 px-0.5 rounded">$1</mark>')
-    })
-    return result
-  }
+  const {
+    searchQuery,
+    setSearchQuery,
+    searchResults,
+    searching,
+    selectedRegulation,
+    setSelectedRegulation,
+    topK,
+    setTopK,
+    selectedChunk,
+    traceability,
+    loadingTrace,
+    handleSearch,
+    loadTraceability,
+    handleSampleQuery,
+  } = useQualitySearch()
 
   return (
     <div className="space-y-6">
@@ -214,265 +64,32 @@ export default function QualityPage() {
         }}
       />
 
-      {/* Quick Sample Queries */}
-      <div className="bg-white dark:bg-slate-800 rounded-lg shadow p-4">
-        <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
-          Schnell-Stichproben
-        </h3>
-        <div className="flex flex-wrap gap-2">
-          {sampleQueries.map((sq, idx) => (
-            <button
-              key={idx}
-              onClick={() => handleSampleQuery(sq.query, sq.reg)}
-              className="px-3 py-1.5 text-xs bg-gray-100 hover:bg-gray-200 dark:bg-slate-700 dark:hover:bg-slate-600 text-gray-700 dark:text-gray-300 rounded-full transition-colors"
-            >
-              {sq.label}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* Search Section */}
-      <div className="bg-white dark:bg-slate-800 rounded-lg shadow p-6">
-        <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
-          Chunk-Suche
-        </h2>
-
-        <div className="space-y-4">
-          {/* Search Input */}
-          <div className="flex gap-4">
-            <div className="flex-1">
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                Suchbegriff / Paragraph / Artikeltext
-              </label>
-              <input
-                type="text"
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
-                placeholder="z.B. 'Recht auf Löschung' oder 'Art. 17 Abs. 1'"
-                className="w-full px-4 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:text-white"
-              />
-            </div>
-            <div className="w-48">
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                Regulierung
-              </label>
-              <select
-                value={selectedRegulation}
-                onChange={(e) => setSelectedRegulation(e.target.value)}
-                className="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:text-white"
-              >
-                <option value="">Alle</option>
-                {REGULATIONS.map((reg) => (
-                  <option key={reg.code} value={reg.code}>
-                    {reg.name}
-                  </option>
-                ))}
-              </select>
-            </div>
-            <div className="w-24">
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                Anzahl
-              </label>
-              <select
-                value={topK}
-                onChange={(e) => setTopK(parseInt(e.target.value))}
-                className="w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:text-white"
-              >
-                <option value="5">5</option>
-                <option value="10">10</option>
-                <option value="20">20</option>
-              </select>
-            </div>
-          </div>
-
-          <button
-            onClick={handleSearch}
-            disabled={searching || !searchQuery.trim()}
-            className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-          >
-            {searching ? 'Suche laeuft...' : 'Suchen'}
-          </button>
-        </div>
-      </div>
+      <SearchSection
+        searchQuery={searchQuery}
+        selectedRegulation={selectedRegulation}
+        topK={topK}
+        searching={searching}
+        onSearchQueryChange={setSearchQuery}
+        onRegulationChange={setSelectedRegulation}
+        onTopKChange={setTopK}
+        onSearch={handleSearch}
+        onSampleQuery={handleSampleQuery}
+      />
 
       {/* Results Grid */}
       {searchResults.length > 0 && (
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          {/* Search Results List */}
-          <div className="bg-white dark:bg-slate-800 rounded-lg shadow p-4">
-            <h3 className="text-md font-semibold text-gray-900 dark:text-white mb-4">
-              Gefundene Chunks ({searchResults.length})
-            </h3>
-            <div className="space-y-3 max-h-[600px] overflow-y-auto">
-              {searchResults.map((result, idx) => (
-                <div
-                  key={idx}
-                  onClick={() => loadTraceability(result)}
-                  className={`p-4 border rounded-lg cursor-pointer transition-all ${
-                    selectedChunk?.text === result.text
-                      ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
-                      : 'border-gray-200 dark:border-slate-700 hover:border-gray-300 dark:hover:border-slate-600'
-                  }`}
-                >
-                  {/* Header */}
-                  <div className="flex items-center justify-between mb-2">
-                    <div className="flex items-center gap-2">
-                      <span className="text-xs font-medium px-2 py-0.5 bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 rounded">
-                        {result.regulation_code}
-                      </span>
-                      {result.article && (
-                        <span className="text-xs text-gray-500 dark:text-gray-400">
-                          Art. {result.article}
-                          {result.paragraph && ` Abs. ${result.paragraph}`}
-                        </span>
-                      )}
-                    </div>
-                    <span className="text-xs text-gray-400">
-                      Score: {(result.score || 0).toFixed(3)}
-                    </span>
-                  </div>
-
-                  {/* Text Preview */}
-                  <p
-                    className="text-sm text-gray-700 dark:text-gray-300 line-clamp-4"
-                    dangerouslySetInnerHTML={{
-                      __html: highlightText(result.text.substring(0, 400) + (result.text.length > 400 ? '...' : ''), searchQuery)
-                    }}
-                  />
-
-                  {/* Metadata */}
-                  <div className="mt-2 flex items-center gap-4 text-xs text-gray-400">
-                    <span>Chunk #{result.chunk_index || idx}</span>
-                    <span>{result.text.length} Zeichen</span>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-
-          {/* Traceability Panel */}
-          <div className="bg-white dark:bg-slate-800 rounded-lg shadow p-4">
-            <h3 className="text-md font-semibold text-gray-900 dark:text-white mb-4">
-              Traceability
-            </h3>
-
-            {!selectedChunk ? (
-              <div className="text-center py-12 text-gray-500 dark:text-gray-400">
-                <svg className="w-12 h-12 mx-auto mb-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                </svg>
-                <p>Waehlen Sie einen Chunk aus der Liste, um die Traceability zu sehen.</p>
-              </div>
-            ) : loadingTrace ? (
-              <div className="text-center py-12">
-                <div className="animate-spin w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full mx-auto mb-4"></div>
-                <p className="text-gray-500 dark:text-gray-400">Lade Traceability...</p>
-              </div>
-            ) : traceability ? (
-              <div className="space-y-6">
-                {/* Selected Chunk Detail */}
-                <div className="border-l-4 border-blue-500 pl-4">
-                  <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                    📄 Ausgewaehlter Chunk
-                  </h4>
-                  <div className="bg-gray-50 dark:bg-slate-700 rounded p-3">
-                    <div className="flex items-center gap-2 mb-2">
-                      <span className="text-xs font-medium px-2 py-0.5 bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 rounded">
-                        {traceability.chunk.regulation_code}
-                      </span>
-                      {traceability.chunk.article && (
-                        <span className="text-xs text-gray-500 dark:text-gray-400">
-                          Art. {traceability.chunk.article}
-                          {traceability.chunk.paragraph && ` Abs. ${traceability.chunk.paragraph}`}
-                        </span>
-                      )}
-                    </div>
-                    <p className="text-sm text-gray-600 dark:text-gray-300 whitespace-pre-wrap">
-                      {traceability.chunk.text}
-                    </p>
-                    {traceability.chunk.source_url && (
-                      <a
-                        href={traceability.chunk.source_url}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="mt-2 inline-flex items-center gap-1 text-xs text-blue-600 hover:underline"
-                      >
-                        🔗 Quelle oeffnen
-                      </a>
-                    )}
-                  </div>
-                </div>
-
-                {/* Arrow Down */}
-                <div className="flex justify-center">
-                  <svg className="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
-                  </svg>
-                </div>
-
-                {/* Requirements */}
-                <div className="border-l-4 border-orange-500 pl-4">
-                  <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                    📋 Extrahierte Anforderungen ({traceability.requirements.length})
-                  </h4>
-                  {traceability.requirements.length > 0 ? (
-                    <div className="space-y-2">
-                      {traceability.requirements.map((req, idx) => (
-                        <div key={idx} className="bg-orange-50 dark:bg-orange-900/20 rounded p-3">
-                          <div className="flex items-center gap-2 mb-1">
-                            <span className="text-xs font-medium text-orange-700 dark:text-orange-400">
-                              {req.category || 'Anforderung'}
-                            </span>
-                          </div>
-                          <p className="text-sm text-gray-600 dark:text-gray-300">{req.text}</p>
-                        </div>
-                      ))}
-                    </div>
-                  ) : (
-                    <p className="text-sm text-gray-500 dark:text-gray-400 italic">
-                      Keine Anforderungen aus diesem Chunk extrahiert.
-                      <br />
-                      <span className="text-xs">(Requirements-Extraktion ist noch nicht implementiert)</span>
-                    </p>
-                  )}
-                </div>
-
-                {/* Arrow Down */}
-                <div className="flex justify-center">
-                  <svg className="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
-                  </svg>
-                </div>
-
-                {/* Controls */}
-                <div className="border-l-4 border-green-500 pl-4">
-                  <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                    ✅ Abgeleitete Controls ({traceability.controls.length})
-                  </h4>
-                  {traceability.controls.length > 0 ? (
-                    <div className="space-y-2">
-                      {traceability.controls.map((ctrl, idx) => (
-                        <div key={idx} className="bg-green-50 dark:bg-green-900/20 rounded p-3">
-                          <div className="font-medium text-sm text-green-700 dark:text-green-400 mb-1">
-                            {ctrl.name}
-                          </div>
-                          <p className="text-sm text-gray-600 dark:text-gray-300">{ctrl.description}</p>
-                        </div>
-                      ))}
-                    </div>
-                  ) : (
-                    <p className="text-sm text-gray-500 dark:text-gray-400 italic">
-                      Keine Controls aus diesem Chunk abgeleitet.
-                      <br />
-                      <span className="text-xs">(Control-Ableitung ist noch nicht implementiert)</span>
-                    </p>
-                  )}
-                </div>
-              </div>
-            ) : null}
-          </div>
+          <ResultsList
+            results={searchResults}
+            selectedChunk={selectedChunk}
+            searchQuery={searchQuery}
+            onSelect={loadTraceability}
+          />
+          <TraceabilityPanel
+            selectedChunk={selectedChunk}
+            loadingTrace={loadingTrace}
+            traceability={traceability}
+          />
         </div>
       )}
 
@@ -510,13 +127,13 @@ export default function QualityPage() {
       {/* Audit Info */}
       <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
         <h3 className="text-sm font-medium text-blue-800 dark:text-blue-400 mb-2">
-          ℹ️ Hinweise fuer Auditoren
+          Hinweise fuer Auditoren
         </h3>
         <ul className="text-sm text-blue-700 dark:text-blue-300 space-y-1 list-disc list-inside">
           <li>Die Suche ist semantisch - aehnliche Begriffe werden gefunden, auch wenn die exakte Formulierung abweicht</li>
           <li>Jeder Chunk entspricht einem logischen Textabschnitt aus dem Originaldokument</li>
           <li>Die Traceability zeigt, wie aus dem Originaltext Anforderungen und Controls abgeleitet wurden</li>
-          <li>Klicken Sie auf "Quelle oeffnen", um das Originaldokument zu pruefen</li>
+          <li>Klicken Sie auf &quot;Quelle oeffnen&quot;, um das Originaldokument zu pruefen</li>
         </ul>
       </div>
     </div>
diff --git a/admin-lehrer/app/(admin)/backlog/_components/BacklogItemCard.tsx b/admin-lehrer/app/(admin)/backlog/_components/BacklogItemCard.tsx
new file mode 100644
index 0000000..2788294
--- /dev/null
+++ b/admin-lehrer/app/(admin)/backlog/_components/BacklogItemCard.tsx
@@ -0,0 +1,129 @@
+'use client'
+
+import { ChevronRight } from 'lucide-react'
+import type { BacklogItem, BacklogCategory } from '../types'
+import { statusLabels, priorityLabels } from '../data'
+
+interface BacklogItemCardProps {
+  item: BacklogItem
+  category: BacklogCategory | undefined
+  isExpanded: boolean
+  onToggleExpand: (id: string) => void
+  onUpdateStatus: (id: string, status: BacklogItem['status']) => void
+  onToggleSubtask: (itemId: string, subtaskId: string) => void
+}
+
+export function BacklogItemCard({
+  item,
+  category,
+  isExpanded,
+  onToggleExpand,
+  onUpdateStatus,
+  onToggleSubtask,
+}: BacklogItemCardProps) {
+  const completedSubtasks = item.subtasks?.filter((st) => st.completed).length || 0
+  const totalSubtasks = item.subtasks?.length || 0
+
+  return (
+    <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
+      <div
+        className="p-4 cursor-pointer hover:bg-slate-50 transition-colors"
+        onClick={() => onToggleExpand(item.id)}
+      >
+        <div className="flex items-start gap-3">
+          {/* Expand Icon */}
+          <button className="mt-1 text-slate-400">
+            <ChevronRight
+              className={`w-5 h-5 transition-transform ${isExpanded ? 'rotate-90' : ''}`}
+            />
+          </button>
+
+          {/* Content */}
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2 mb-1 flex-wrap">
+              <h3 className="font-semibold text-slate-900">{item.title}</h3>
+              <span
+                className={`px-2 py-0.5 rounded text-xs font-medium ${
+                  priorityLabels[item.priority].color
+                }`}
+              >
+                {priorityLabels[item.priority].label}
+              </span>
+            </div>
+            <p className="text-sm text-slate-500 mb-2">{item.description}</p>
+            {item.notes && (
+              <p className="text-xs text-slate-400 mb-2 italic">{item.notes}</p>
+            )}
+            <div className="flex items-center gap-3 text-xs">
+              <span className={`px-2 py-1 rounded border ${category?.bgColor}`}>
+                {category?.name}
+              </span>
+              {totalSubtasks > 0 && (
+                <span className="text-slate-500">
+                  {completedSubtasks}/{totalSubtasks} Teilaufgaben
+                </span>
+              )}
+            </div>
+          </div>
+
+          {/* Status */}
+          <select
+            value={item.status}
+            onChange={(e) => {
+              e.stopPropagation()
+              onUpdateStatus(item.id, e.target.value as BacklogItem['status'])
+            }}
+            onClick={(e) => e.stopPropagation()}
+            className={`px-3 py-1.5 rounded-lg text-sm font-medium border-0 cursor-pointer ${
+              statusLabels[item.status].color
+            }`}
+          >
+            {Object.entries(statusLabels).map(([value, { label }]) => (
+              <option key={value} value={value}>
+                {label}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        {/* Progress Bar */}
+        {totalSubtasks > 0 && (
+          <div className="mt-3 ml-8">
+            <div className="w-full bg-slate-200 rounded-full h-1.5">
+              <div
+                className="bg-green-500 h-1.5 rounded-full transition-all"
+                style={{ width: `${(completedSubtasks / totalSubtasks) * 100}%` }}
+              />
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Expanded Subtasks */}
+      {isExpanded && item.subtasks && item.subtasks.length > 0 && (
+        <div className="border-t border-slate-200 bg-slate-50 p-4 pl-12">
+          <h4 className="text-sm font-medium text-slate-700 mb-3">Teilaufgaben</h4>
+          <ul className="space-y-2">
+            {item.subtasks.map((subtask) => (
+              <li key={subtask.id} className="flex items-center gap-3">
+                <input
+                  type="checkbox"
+                  checked={subtask.completed}
+                  onChange={() => onToggleSubtask(item.id, subtask.id)}
+                  className="w-4 h-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500"
+                />
+                <span
+                  className={`text-sm ${
+                    subtask.completed ? 'text-slate-400 line-through' : 'text-slate-700'
+                  }`}
+                >
+                  {subtask.title}
+                </span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/backlog/_components/CategoryCards.tsx b/admin-lehrer/app/(admin)/backlog/_components/CategoryCards.tsx
new file mode 100644
index 0000000..0953977
--- /dev/null
+++ b/admin-lehrer/app/(admin)/backlog/_components/CategoryCards.tsx
@@ -0,0 +1,46 @@
+'use client'
+
+import type { BacklogCategory, CategoryProgress } from '../types'
+
+interface CategoryCardsProps {
+  categories: BacklogCategory[]
+  selectedCategory: string | null
+  onSelectCategory: (id: string | null) => void
+  getCategoryProgress: (categoryId: string) => CategoryProgress
+}
+
+export function CategoryCards({
+  categories,
+  selectedCategory,
+  onSelectCategory,
+  getCategoryProgress,
+}: CategoryCardsProps) {
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3">
+      {categories.map((cat) => {
+        const catProgress = getCategoryProgress(cat.id)
+        return (
+          <button
+            key={cat.id}
+            onClick={() => onSelectCategory(selectedCategory === cat.id ? null : cat.id)}
+            className={`p-3 rounded-xl border-2 text-left transition-all ${
+              selectedCategory === cat.id
+                ? `${cat.bgColor} ring-2 ring-offset-2`
+                : 'bg-white border-slate-200 hover:border-slate-300'
+            }`}
+          >
+            <div className="flex items-center gap-2 mb-1">
+              <span className={selectedCategory === cat.id ? cat.color : 'text-slate-500'}>
+                {cat.icon}
+              </span>
+              <span className="font-medium text-xs truncate">{cat.name}</span>
+            </div>
+            <div className="text-xs text-slate-500">
+              {catProgress.completed}/{catProgress.total}
+            </div>
+          </button>
+        )
+      })}
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/backlog/_components/FilterBar.tsx b/admin-lehrer/app/(admin)/backlog/_components/FilterBar.tsx
new file mode 100644
index 0000000..380bfaf
--- /dev/null
+++ b/admin-lehrer/app/(admin)/backlog/_components/FilterBar.tsx
@@ -0,0 +1,55 @@
+'use client'
+
+import { Search } from 'lucide-react'
+
+interface FilterBarProps {
+  searchQuery: string
+  onSearchChange: (query: string) => void
+  selectedPriority: string | null
+  onPriorityChange: (priority: string | null) => void
+  hasActiveFilters: boolean
+  onClearFilters: () => void
+}
+
+export function FilterBar({
+  searchQuery,
+  onSearchChange,
+  selectedPriority,
+  onPriorityChange,
+  hasActiveFilters,
+  onClearFilters,
+}: FilterBarProps) {
+  return (
+    <div className="flex flex-wrap gap-4">
+      <div className="flex-1 min-w-[200px] relative">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+        <input
+          type="text"
+          placeholder="Suchen..."
+          value={searchQuery}
+          onChange={(e) => onSearchChange(e.target.value)}
+          className="w-full pl-10 pr-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+      </div>
+      <select
+        value={selectedPriority || ''}
+        onChange={(e) => onPriorityChange(e.target.value || null)}
+        className="px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+      >
+        <option value="">Alle Prioritaeten</option>
+        <option value="critical">Kritisch</option>
+        <option value="high">Hoch</option>
+        <option value="medium">Mittel</option>
+        <option value="low">Niedrig</option>
+      </select>
+      {hasActiveFilters && (
+        <button
+          onClick={onClearFilters}
+          className="px-4 py-2 text-sm text-slate-600 hover:text-slate-900"
+        >
+          Filter zuruecksetzen
+        </button>
+      )}
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/backlog/_components/InfoBox.tsx b/admin-lehrer/app/(admin)/backlog/_components/InfoBox.tsx
new file mode 100644
index 0000000..eacaddb
--- /dev/null
+++ b/admin-lehrer/app/(admin)/backlog/_components/InfoBox.tsx
@@ -0,0 +1,25 @@
+'use client'
+
+import { AlertTriangle } from 'lucide-react'
+
+export function InfoBox() {
+  return (
+    <div className="bg-amber-50 border border-amber-200 rounded-xl p-6">
+      <div className="flex items-start gap-4">
+        <AlertTriangle className="w-6 h-6 text-amber-600 flex-shrink-0 mt-0.5" />
+        <div>
+          <h3 className="font-semibold text-amber-900">Wichtiger Hinweis</h3>
+          <p className="text-sm text-amber-800 mt-1">
+            Diese Backlog-Liste muss vollstaendig abgearbeitet sein, bevor BreakPilot in den
+            Produktivbetrieb gehen kann. Alle kritischen Items muessen abgeschlossen sein. Der
+            Fortschritt wird lokal im Browser gespeichert und kann mit &quot;Zuruecksetzen&quot;
+            auf die Standardwerte zurueckgesetzt werden.
+          </p>
+          <p className="text-xs text-amber-700 mt-2">
+            Letzte Aktualisierung: 2026-02-03
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/backlog/_components/OverallProgress.tsx b/admin-lehrer/app/(admin)/backlog/_components/OverallProgress.tsx
new file mode 100644
index 0000000..dc6cac0
--- /dev/null
+++ b/admin-lehrer/app/(admin)/backlog/_components/OverallProgress.tsx
@@ -0,0 +1,38 @@
+'use client'
+
+import type { BacklogProgress } from '../types'
+
+interface OverallProgressProps {
+  progress: BacklogProgress
+  onReset: () => void
+}
+
+export function OverallProgress({ progress, onReset }: OverallProgressProps) {
+  return (
+    <div className="bg-white rounded-xl border border-slate-200 p-6">
+      <div className="flex items-center justify-between mb-4">
+        <div>
+          <h2 className="text-lg font-semibold text-slate-900">Gesamtfortschritt</h2>
+          <p className="text-sm text-slate-500">
+            {progress.completed} von {progress.total} Aufgaben abgeschlossen
+          </p>
+        </div>
+        <div className="flex items-center gap-4">
+          <button
+            onClick={onReset}
+            className="text-sm text-slate-500 hover:text-slate-700"
+          >
+            Zuruecksetzen
+          </button>
+          <div className="text-3xl font-bold text-blue-600">{progress.percentage}%</div>
+        </div>
+      </div>
+      <div className="w-full bg-slate-200 rounded-full h-3">
+        <div
+          className="bg-blue-600 h-3 rounded-full transition-all duration-500"
+          style={{ width: `${progress.percentage}%` }}
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/backlog/backlog-items.ts b/admin-lehrer/app/(admin)/backlog/backlog-items.ts
new file mode 100644
index 0000000..9fed445
--- /dev/null
+++ b/admin-lehrer/app/(admin)/backlog/backlog-items.ts
@@ -0,0 +1,506 @@
+import type { BacklogItem } from './types'
+
+// UPDATED: 2026-02-03 - Reflects actual project state
+export const initialBacklogItems: BacklogItem[] = [
+  // ==================== MODULE PROGRESS ====================
+  {
+    id: 'mod-1',
+    title: 'Consent Service (Go) - 90% fertig',
+    description: 'DSGVO Consent Management Microservice - Production Ready',
+    category: 'modules',
+    priority: 'high',
+    status: 'in_progress',
+    notes: 'Port 8081. Umfangreiche Tests. JWT Auth, OAuth 2.0, TOTP 2FA, DSR Workflow, Matrix/Jitsi Integration, Session Management, PII Redactor.',
+    subtasks: [
+      { id: 'mod-1-1', title: 'Core Consent API (CRUD, Versioning)', completed: true },
+      { id: 'mod-1-2', title: 'Authentication (JWT, OAuth 2.0, TOTP)', completed: true },
+      { id: 'mod-1-3', title: 'DSR Workflow (Art. 15-21)', completed: true },
+      { id: 'mod-1-4', title: 'Email Templates & Notifications', completed: true },
+      { id: 'mod-1-5', title: 'Matrix/Jitsi Integration', completed: true },
+      { id: 'mod-1-6', title: 'Session Management & Middleware', completed: true },
+      { id: 'mod-1-7', title: 'PII Redactor & Security Headers', completed: true },
+      { id: 'mod-1-8', title: 'Performance Tests (High-Load)', completed: false },
+    ],
+  },
+  {
+    id: 'mod-2',
+    title: 'Admin-v2 Frontend (Next.js 15) - 95% fertig',
+    description: 'Neues Admin Dashboard - Feature Complete',
+    category: 'modules',
+    priority: 'critical',
+    status: 'completed',
+    notes: 'Port 3002. 73 Seiten, 154 Dateien, 50k+ Zeilen Code. Alle Module migriert.',
+    subtasks: [
+      { id: 'mod-2-1', title: 'Layout mit Sidebar Navigation', completed: true },
+      { id: 'mod-2-2', title: 'AI Module (Agents, RAG, Quality, LLM Compare)', completed: true },
+      { id: 'mod-2-3', title: 'Compliance Module (AI Act, DSFA, Controls, Evidence)', completed: true },
+      { id: 'mod-2-4', title: 'Communication Module (Mail, Matrix, Video-Chat, Alerts)', completed: true },
+      { id: 'mod-2-5', title: 'DSGVO Module (Advisory Board, Consent, DSR, TOM, VVT)', completed: true },
+      { id: 'mod-2-6', title: 'Infrastructure Module (CI/CD, GPU, SBOM, Security, Tests)', completed: true },
+      { id: 'mod-2-7', title: 'Education Module (Edu-Search, Foerderantrag)', completed: true },
+      { id: 'mod-2-8', title: 'Wizard Framework (Stepper, TestRunner, etc.)', completed: true },
+      { id: 'mod-2-9', title: 'API Proxy Routes', completed: true },
+      { id: 'mod-2-10', title: 'E2E Tests mit Playwright', completed: false },
+    ],
+  },
+  {
+    id: 'mod-3',
+    title: 'Studio-v2 Frontend (Next.js 15) - 90% fertig',
+    description: 'Lehrer/Schueler Studio mit Apple Weather UI',
+    category: 'modules',
+    priority: 'high',
+    status: 'completed',
+    notes: 'Port 3001. 21 Seiten, 111 Dateien, 38k+ Zeilen. Experimental Dashboard, Korrektur, Geo-Lernwelt.',
+    subtasks: [
+      { id: 'mod-3-1', title: 'Experimental Dashboard (Glassmorphism)', completed: true },
+      { id: 'mod-3-2', title: 'Korrektur-System mit Fairness-Analyse', completed: true },
+      { id: 'mod-3-3', title: 'Geo-Lernwelt (Maps, AOI)', completed: true },
+      { id: 'mod-3-4', title: 'Voice Components', completed: true },
+      { id: 'mod-3-5', title: 'Worksheet Editor', completed: true },
+      { id: 'mod-3-6', title: 'Alerts & B2B Migration Wizard', completed: true },
+      { id: 'mod-3-7', title: 'Document Upload & QR Code', completed: true },
+      { id: 'mod-3-8', title: 'Messages & Meet Integration', completed: true },
+    ],
+  },
+  {
+    id: 'mod-4',
+    title: 'Backend (Python FastAPI) - 85% fertig',
+    description: 'Hauptbackend mit umfangreichen Erweiterungen',
+    category: 'modules',
+    priority: 'critical',
+    status: 'in_progress',
+    notes: 'Port 8000. 238 Dateien, 94k+ Zeilen. Alerts Agent, Compliance, Classroom Engine, Game, Klausur.',
+    subtasks: [
+      { id: 'mod-4-1', title: 'Alerts Agent (Rules, Digests, Actions)', completed: true },
+      { id: 'mod-4-2', title: 'Compliance Module (AI Act, ISMS, Audit)', completed: true },
+      { id: 'mod-4-3', title: 'Classroom Engine (FSM, Analytics, Timer)', completed: true },
+      { id: 'mod-4-4', title: 'Game API (Learning Rules, Quiz)', completed: true },
+      { id: 'mod-4-5', title: 'Klausur Backend (OCR, Correction)', completed: true },
+      { id: 'mod-4-6', title: 'Unit API & Analytics', completed: true },
+      { id: 'mod-4-7', title: 'Middleware (Rate Limiter, Security)', completed: true },
+      { id: 'mod-4-8', title: 'Session Management (RBAC)', completed: true },
+      { id: 'mod-4-9', title: 'Transcription Worker', completed: true },
+      { id: 'mod-4-10', title: 'Alembic Migrations', completed: true },
+      { id: 'mod-4-11', title: 'Integration Tests erweitern', completed: false },
+    ],
+  },
+  {
+    id: 'mod-5',
+    title: 'Klausur Service (Python) - 85% fertig',
+    description: 'BYOEH Abitur-Klausurkorrektur System',
+    category: 'modules',
+    priority: 'critical',
+    status: 'in_progress',
+    notes: 'Port 8086. 45 Dateien, 20k+ Zeilen. BYOEH, Qdrant RAG, Embedding Service, Legal Corpus.',
+    subtasks: [
+      { id: 'mod-5-1', title: 'BYOEH Upload & Encryption', completed: true },
+      { id: 'mod-5-2', title: 'Key-Sharing zwischen Pruefern', completed: true },
+      { id: 'mod-5-3', title: 'Qdrant RAG Integration', completed: true },
+      { id: 'mod-5-4', title: 'Hybrid Search (Keyword + Semantic)', completed: true },
+      { id: 'mod-5-5', title: 'Embedding Service', completed: true },
+      { id: 'mod-5-6', title: 'Legal Corpus Ingestion', completed: true },
+      { id: 'mod-5-7', title: 'PDF Export', completed: true },
+      { id: 'mod-5-8', title: 'OCR Pipeline (TrOCR, Vision)', completed: true },
+      { id: 'mod-5-9', title: 'Vocab Worksheet API', completed: true },
+      { id: 'mod-5-10', title: 'KI-gestuetzte Korrektur verbessern', completed: false },
+    ],
+  },
+  {
+    id: 'mod-6',
+    title: 'Agent-Core - 80% fertig',
+    description: 'Multi-Agent Architecture Framework',
+    category: 'modules',
+    priority: 'high',
+    status: 'in_progress',
+    notes: 'Neuer Service. Sessions, Shared Brain, Orchestrator, SOUL Files.',
+    subtasks: [
+      { id: 'mod-6-1', title: 'Session Management & Heartbeat', completed: true },
+      { id: 'mod-6-2', title: 'Checkpoint System', completed: true },
+      { id: 'mod-6-3', title: 'Memory Store (mit TTL)', completed: true },
+      { id: 'mod-6-4', title: 'Context Manager', completed: true },
+      { id: 'mod-6-5', title: 'Knowledge Graph', completed: true },
+      { id: 'mod-6-6', title: 'Message Bus (Pub/Sub)', completed: true },
+      { id: 'mod-6-7', title: 'Supervisor & Task Router', completed: true },
+      { id: 'mod-6-8', title: 'SOUL Files (Agent Personalities)', completed: true },
+      { id: 'mod-6-9', title: 'Integration mit Voice Service', completed: false },
+    ],
+  },
+  {
+    id: 'mod-7',
+    title: 'AI Compliance SDK (Go) - 75% fertig',
+    description: 'UCCA Obligations Framework',
+    category: 'modules',
+    priority: 'high',
+    status: 'in_progress',
+    notes: 'Neuer Go Service. AI Act, DSGVO, NIS2 Module. Policy Engine.',
+    subtasks: [
+      { id: 'mod-7-1', title: 'UCCA Obligations Framework', completed: true },
+      { id: 'mod-7-2', title: 'AI Act Module', completed: true },
+      { id: 'mod-7-3', title: 'DSGVO Module', completed: true },
+      { id: 'mod-7-4', title: 'NIS2 Module', completed: true },
+      { id: 'mod-7-5', title: 'Policy Engine', completed: true },
+      { id: 'mod-7-6', title: 'Legal RAG Integration', completed: true },
+      { id: 'mod-7-7', title: 'Audit Trail & Export', completed: true },
+      { id: 'mod-7-8', title: 'Escalation System', completed: false },
+      { id: 'mod-7-9', title: 'Funding/Foerderantrag Wizard', completed: false },
+    ],
+  },
+  {
+    id: 'mod-8',
+    title: 'Geo Service (Python) - 70% fertig',
+    description: 'Geographic Data Service fuer Geo-Lernwelt',
+    category: 'modules',
+    priority: 'medium',
+    status: 'in_progress',
+    notes: 'Neuer Service. AOI Packager, DEM Service, Tile Server.',
+    subtasks: [
+      { id: 'mod-8-1', title: 'AOI Packager', completed: true },
+      { id: 'mod-8-2', title: 'DEM Service', completed: true },
+      { id: 'mod-8-3', title: 'OSM Extractor', completed: true },
+      { id: 'mod-8-4', title: 'Tile Server', completed: true },
+      { id: 'mod-8-5', title: 'Learning Generator', completed: true },
+      { id: 'mod-8-6', title: 'License Checker', completed: true },
+      { id: 'mod-8-7', title: 'Unity Integration', completed: false },
+      { id: 'mod-8-8', title: 'Performance Optimization', completed: false },
+    ],
+  },
+  {
+    id: 'mod-9',
+    title: 'Edu-Search Service (Go) - 65% fertig',
+    description: 'Educational Search mit Policy Engine',
+    category: 'modules',
+    priority: 'medium',
+    status: 'in_progress',
+    notes: 'Policy Handlers, Bundeslaender Policies, PII Detector.',
+    subtasks: [
+      { id: 'mod-9-1', title: 'Policy Enforcer', completed: true },
+      { id: 'mod-9-2', title: 'PII Detector', completed: true },
+      { id: 'mod-9-3', title: 'Bundeslaender Policies', completed: true },
+      { id: 'mod-9-4', title: 'German Universities Data', completed: true },
+      { id: 'mod-9-5', title: 'Search API erweitern', completed: false },
+      { id: 'mod-9-6', title: 'Caching Layer', completed: false },
+    ],
+  },
+
+  // ==================== CI/CD PIPELINES ====================
+  {
+    id: 'cicd-1',
+    title: 'Woodpecker CI Setup',
+    description: 'Self-hosted CI/CD auf Mac Mini',
+    category: 'cicd',
+    priority: 'critical',
+    status: 'completed',
+    notes: 'Implementiert. Woodpecker CI laeuft auf macmini:8082. Pipelines fuer alle Services.',
+    subtasks: [
+      { id: 'cicd-1-1', title: 'Woodpecker Server & Agent installiert', completed: true },
+      { id: 'cicd-1-2', title: 'Gitea Integration', completed: true },
+      { id: 'cicd-1-3', title: 'Docker Build Pipelines', completed: true },
+      { id: 'cicd-1-4', title: 'Test Pipelines (Go, Python, Node)', completed: true },
+    ],
+  },
+  {
+    id: 'cicd-2',
+    title: 'SBOM Generation Pipeline',
+    description: 'Automatische SBOM-Generierung in CI',
+    category: 'cicd',
+    priority: 'high',
+    status: 'completed',
+    notes: 'Implementiert in .gitea/workflows/sbom.yaml',
+    subtasks: [
+      { id: 'cicd-2-1', title: 'CycloneDX SBOM Generation', completed: true },
+      { id: 'cicd-2-2', title: 'Artifact Upload', completed: true },
+      { id: 'cicd-2-3', title: 'SBOM Viewer in Admin', completed: true },
+    ],
+  },
+  {
+    id: 'cicd-3',
+    title: 'Production Deployment Pipeline',
+    description: 'Kontrolliertes Deployment mit Rollback',
+    category: 'cicd',
+    priority: 'critical',
+    status: 'not_started',
+    subtasks: [
+      { id: 'cicd-3-1', title: 'Blue-Green oder Canary Strategy', completed: false },
+      { id: 'cicd-3-2', title: 'Automatischer Rollback', completed: false },
+      { id: 'cicd-3-3', title: 'Health Checks nach Deploy', completed: false },
+      { id: 'cicd-3-4', title: 'Deployment Notifications', completed: false },
+    ],
+  },
+
+  // ==================== SECURITY ====================
+  {
+    id: 'sec-1',
+    title: 'Dependency Vulnerability Scanning',
+    description: 'Automatische Pruefung auf Schwachstellen',
+    category: 'security',
+    priority: 'critical',
+    status: 'completed',
+    notes: 'Dependabot konfiguriert fuer Go, Python, npm, Docker.',
+    subtasks: [
+      { id: 'sec-1-1', title: 'Dependabot fuer Go', completed: true },
+      { id: 'sec-1-2', title: 'Dependabot fuer Python', completed: true },
+      { id: 'sec-1-3', title: 'Dependabot fuer npm', completed: true },
+      { id: 'sec-1-4', title: 'Block Merge bei kritischen CVEs', completed: true },
+    ],
+  },
+  {
+    id: 'sec-2',
+    title: 'Container Image Scanning',
+    description: 'Trivy Scans fuer alle Docker Images',
+    category: 'security',
+    priority: 'high',
+    status: 'completed',
+    notes: 'Trivy in CI integriert.',
+    subtasks: [
+      { id: 'sec-2-1', title: 'Trivy Integration', completed: true },
+      { id: 'sec-2-2', title: 'Base Image Policy', completed: true },
+      { id: 'sec-2-3', title: 'Scan Report bei Build', completed: true },
+    ],
+  },
+  {
+    id: 'sec-3',
+    title: 'SAST (Static Application Security Testing)',
+    description: 'Code-Analyse auf Sicherheitsluecken',
+    category: 'security',
+    priority: 'high',
+    status: 'completed',
+    notes: 'Gosec, Bandit, npm audit in CI.',
+    subtasks: [
+      { id: 'sec-3-1', title: 'Gosec fuer Go', completed: true },
+      { id: 'sec-3-2', title: 'Bandit fuer Python', completed: true },
+      { id: 'sec-3-3', title: 'npm audit', completed: true },
+      { id: 'sec-3-4', title: 'Semgrep Regeln', completed: false },
+    ],
+  },
+  {
+    id: 'sec-4',
+    title: 'Secret Scanning',
+    description: 'Verhindern dass Secrets in Git landen',
+    category: 'security',
+    priority: 'critical',
+    status: 'completed',
+    notes: 'Gitleaks in CI. SSH Keys in .gitignore.',
+    subtasks: [
+      { id: 'sec-4-1', title: 'Gitleaks Pre-commit', completed: true },
+      { id: 'sec-4-2', title: 'SSH Keys in .gitignore', completed: true },
+      { id: 'sec-4-3', title: 'Historische Commits gescannt', completed: true },
+    ],
+  },
+
+  // ==================== TESTING ====================
+  {
+    id: 'test-1',
+    title: 'Backend Test Coverage erweitern',
+    description: 'Integration & E2E Tests fuer Backend APIs',
+    category: 'testing',
+    priority: 'high',
+    status: 'in_progress',
+    notes: '238 Backend-Dateien, davon 20+ Test-Dateien.',
+    subtasks: [
+      { id: 'test-1-1', title: 'Alerts Agent Tests', completed: true },
+      { id: 'test-1-2', title: 'Compliance API Tests', completed: true },
+      { id: 'test-1-3', title: 'Classroom API Tests', completed: true },
+      { id: 'test-1-4', title: 'Session Middleware Tests', completed: true },
+      { id: 'test-1-5', title: 'Load Testing mit k6', completed: false },
+    ],
+  },
+  {
+    id: 'test-2',
+    title: 'Frontend E2E Tests',
+    description: 'Playwright Tests fuer Admin-v2 und Studio-v2',
+    category: 'testing',
+    priority: 'critical',
+    status: 'not_started',
+    notes: 'Kritischer Mangel - keine E2E Tests!',
+    subtasks: [
+      { id: 'test-2-1', title: 'Playwright Setup', completed: false },
+      { id: 'test-2-2', title: 'Admin-v2 Critical Paths', completed: false },
+      { id: 'test-2-3', title: 'Studio-v2 User Flows', completed: false },
+      { id: 'test-2-4', title: 'Visual Regression', completed: false },
+    ],
+  },
+  {
+    id: 'test-3',
+    title: 'Agent-Core Tests',
+    description: 'Unit Tests fuer Multi-Agent Framework',
+    category: 'testing',
+    priority: 'high',
+    status: 'completed',
+    notes: 'Umfangreiche Test-Suite vorhanden.',
+    subtasks: [
+      { id: 'test-3-1', title: 'Session Manager Tests', completed: true },
+      { id: 'test-3-2', title: 'Memory Store Tests', completed: true },
+      { id: 'test-3-3', title: 'Message Bus Tests', completed: true },
+      { id: 'test-3-4', title: 'Task Router Tests', completed: true },
+      { id: 'test-3-5', title: 'Heartbeat Tests', completed: true },
+    ],
+  },
+
+  // ==================== RBAC ====================
+  {
+    id: 'rbac-1',
+    title: 'Gitea Team Permissions',
+    description: 'Team-basierte Zugriffsrechte',
+    category: 'rbac',
+    priority: 'high',
+    status: 'not_started',
+    subtasks: [
+      { id: 'rbac-1-1', title: 'Maintainers Team (Full Access)', completed: false },
+      { id: 'rbac-1-2', title: 'Developers Team (Write)', completed: false },
+      { id: 'rbac-1-3', title: 'Reviewers Team (Read + Review)', completed: false },
+    ],
+  },
+  {
+    id: 'rbac-2',
+    title: 'Admin Panel Access Control',
+    description: 'Rollenbasierte Zugriffsrechte im Admin',
+    category: 'rbac',
+    priority: 'medium',
+    status: 'in_progress',
+    notes: 'RBAC Middleware im Backend implementiert.',
+    subtasks: [
+      { id: 'rbac-2-1', title: 'RBAC Middleware', completed: true },
+      { id: 'rbac-2-2', title: 'Session Store', completed: true },
+      { id: 'rbac-2-3', title: 'Protected Routes', completed: true },
+      { id: 'rbac-2-4', title: 'Admin Authentication UI', completed: false },
+    ],
+  },
+
+  // ==================== GIT ====================
+  {
+    id: 'git-1',
+    title: 'Protected Branches Setup',
+    description: 'Schutz fuer main Branch',
+    category: 'git',
+    priority: 'critical',
+    status: 'not_started',
+    subtasks: [
+      { id: 'git-1-1', title: 'No direct push to main', completed: false },
+      { id: 'git-1-2', title: 'Require PR with Approval', completed: false },
+      { id: 'git-1-3', title: 'Require Status Checks', completed: false },
+    ],
+  },
+  {
+    id: 'git-2',
+    title: 'Alle Dateien committet',
+    description: 'Keine ungetrackten Produktionsdateien',
+    category: 'git',
+    priority: 'critical',
+    status: 'completed',
+    notes: 'Am 2026-02-03 bereinigt: ~870 Dateien, 329k Zeilen committet.',
+    subtasks: [
+      { id: 'git-2-1', title: 'admin-v2 (154 Dateien)', completed: true },
+      { id: 'git-2-2', title: 'studio-v2 (111 Dateien)', completed: true },
+      { id: 'git-2-3', title: 'backend (238 Dateien)', completed: true },
+      { id: 'git-2-4', title: 'website (120 Dateien)', completed: true },
+      { id: 'git-2-5', title: 'klausur-service (45 Dateien)', completed: true },
+      { id: 'git-2-6', title: 'consent-service (15 Dateien)', completed: true },
+      { id: 'git-2-7', title: 'Neue Services (161 Dateien)', completed: true },
+      { id: 'git-2-8', title: '.gitignore aktualisiert', completed: true },
+    ],
+  },
+
+  // ==================== RELEASE ====================
+  {
+    id: 'rel-1',
+    title: 'Semantic Versioning',
+    description: 'Automatische Versionierung nach SemVer',
+    category: 'release',
+    priority: 'high',
+    status: 'not_started',
+    subtasks: [
+      { id: 'rel-1-1', title: 'Conventional Commits', completed: false },
+      { id: 'rel-1-2', title: 'Automatische Git Tags', completed: false },
+      { id: 'rel-1-3', title: 'CHANGELOG Generation', completed: false },
+    ],
+  },
+
+  // ==================== DATA ====================
+  {
+    id: 'data-1',
+    title: 'Database Backup Strategy',
+    description: 'Automatische Backups mit Retention',
+    category: 'data',
+    priority: 'critical',
+    status: 'not_started',
+    subtasks: [
+      { id: 'data-1-1', title: 'Taegliche Backups', completed: false },
+      { id: 'data-1-2', title: 'Point-in-Time Recovery', completed: false },
+      { id: 'data-1-3', title: 'Backup Encryption', completed: false },
+      { id: 'data-1-4', title: 'Restore Test dokumentieren', completed: false },
+    ],
+  },
+  {
+    id: 'data-2',
+    title: 'Customer Data Protection',
+    description: 'Schutz von Stammdaten & Dokumenten',
+    category: 'data',
+    priority: 'critical',
+    status: 'in_progress',
+    subtasks: [
+      { id: 'data-2-1', title: 'Encryption at Rest', completed: true },
+      { id: 'data-2-2', title: 'Audit Log fuer Consent', completed: true },
+      { id: 'data-2-3', title: 'PII Masking in Logs', completed: true },
+      { id: 'data-2-4', title: 'Secure Document Storage', completed: false },
+    ],
+  },
+
+  // ==================== COMPLIANCE ====================
+  {
+    id: 'sbom-1',
+    title: 'SBOM erstellt und dokumentiert',
+    description: 'Software Bill of Materials',
+    category: 'compliance',
+    priority: 'high',
+    status: 'completed',
+    notes: 'Umfassende SBOM in /admin/sbom verfuegbar.',
+    subtasks: [
+      { id: 'sbom-1-1', title: 'Go Dependencies', completed: true },
+      { id: 'sbom-1-2', title: 'Python Dependencies', completed: true },
+      { id: 'sbom-1-3', title: 'npm Dependencies', completed: true },
+      { id: 'sbom-1-4', title: 'Docker Base Images', completed: true },
+      { id: 'sbom-1-5', title: 'CycloneDX Export', completed: true },
+    ],
+  },
+  {
+    id: 'sbom-2',
+    title: 'Lizenz-Compliance',
+    description: 'Alle Lizenzen geprueft',
+    category: 'compliance',
+    priority: 'high',
+    status: 'in_progress',
+    subtasks: [
+      { id: 'sbom-2-1', title: 'Lizenzen identifiziert', completed: true },
+      { id: 'sbom-2-2', title: 'Kompatibilitaet geprueft', completed: false },
+      { id: 'sbom-2-3', title: 'LICENSES.md erstellt', completed: false },
+    ],
+  },
+
+  // ==================== APPROVAL ====================
+  {
+    id: 'appr-1',
+    title: 'Release Approval Gates',
+    description: 'Mehrstufige Freigabe',
+    category: 'approval',
+    priority: 'critical',
+    status: 'not_started',
+    subtasks: [
+      { id: 'appr-1-1', title: 'QA Sign-off', completed: false },
+      { id: 'appr-1-2', title: 'Security Review', completed: false },
+      { id: 'appr-1-3', title: 'Product Owner Freigabe', completed: false },
+    ],
+  },
+  {
+    id: 'appr-2',
+    title: 'Post-Deployment Verification',
+    description: 'Checks nach Deployment',
+    category: 'approval',
+    priority: 'high',
+    status: 'not_started',
+    subtasks: [
+      { id: 'appr-2-1', title: 'Smoke Tests', completed: false },
+      { id: 'appr-2-2', title: 'Error Rate Monitoring', completed: false },
+      { id: 'appr-2-3', title: 'Rollback Kriterien', completed: false },
+    ],
+  },
+]
diff --git a/admin-lehrer/app/(admin)/backlog/categories.tsx b/admin-lehrer/app/(admin)/backlog/categories.tsx
new file mode 100644
index 0000000..280630d
--- /dev/null
+++ b/admin-lehrer/app/(admin)/backlog/categories.tsx
@@ -0,0 +1,111 @@
+import {
+  Package,
+  RefreshCw,
+  Shield,
+  ClipboardCheck,
+  Users,
+  GitBranch,
+  Tag,
+  Database,
+  FileText,
+  CheckSquare,
+} from 'lucide-react'
+import type { BacklogCategory, BacklogItem } from './types'
+
+export const categories: BacklogCategory[] = [
+  {
+    id: 'modules',
+    name: 'Module Progress',
+    icon: <Package className="w-5 h-5" />,
+    color: 'text-violet-700',
+    bgColor: 'bg-violet-100 border-violet-300',
+    description: 'Fertigstellungsgrad aller Services & Module',
+  },
+  {
+    id: 'cicd',
+    name: 'CI/CD Pipelines',
+    icon: <RefreshCw className="w-5 h-5" />,
+    color: 'text-blue-700',
+    bgColor: 'bg-blue-100 border-blue-300',
+    description: 'Build, Test & Deployment Automation',
+  },
+  {
+    id: 'security',
+    name: 'Security & Vulnerability',
+    icon: <Shield className="w-5 h-5" />,
+    color: 'text-red-700',
+    bgColor: 'bg-red-100 border-red-300',
+    description: 'Security Scans, Dependency Checks & Penetration Testing',
+  },
+  {
+    id: 'testing',
+    name: 'Testing & Quality',
+    icon: <ClipboardCheck className="w-5 h-5" />,
+    color: 'text-emerald-700',
+    bgColor: 'bg-emerald-100 border-emerald-300',
+    description: 'Unit Tests, Integration Tests & E2E Testing',
+  },
+  {
+    id: 'rbac',
+    name: 'RBAC & Access Control',
+    icon: <Users className="w-5 h-5" />,
+    color: 'text-purple-700',
+    bgColor: 'bg-purple-100 border-purple-300',
+    description: 'Developer Roles, Permissions & Team Management',
+  },
+  {
+    id: 'git',
+    name: 'Git & Branch Protection',
+    icon: <GitBranch className="w-5 h-5" />,
+    color: 'text-orange-700',
+    bgColor: 'bg-orange-100 border-orange-300',
+    description: 'Protected Branches, Merge Requests & Code Reviews',
+  },
+  {
+    id: 'release',
+    name: 'Release Management',
+    icon: <Tag className="w-5 h-5" />,
+    color: 'text-green-700',
+    bgColor: 'bg-green-100 border-green-300',
+    description: 'Versioning, Changelog & Release Notes',
+  },
+  {
+    id: 'data',
+    name: 'Data Protection',
+    icon: <Database className="w-5 h-5" />,
+    color: 'text-cyan-700',
+    bgColor: 'bg-cyan-100 border-cyan-300',
+    description: 'Backup, Migration & Customer Data Safety',
+  },
+  {
+    id: 'compliance',
+    name: 'Compliance & SBOM',
+    icon: <FileText className="w-5 h-5" />,
+    color: 'text-teal-700',
+    bgColor: 'bg-teal-100 border-teal-300',
+    description: 'SBOM, Lizenzen & Open Source Compliance',
+  },
+  {
+    id: 'approval',
+    name: 'Approval Workflow',
+    icon: <CheckSquare className="w-5 h-5" />,
+    color: 'text-indigo-700',
+    bgColor: 'bg-indigo-100 border-indigo-300',
+    description: 'Developer Approval, QA Sign-off & Release Gates',
+  },
+]
+
+export const statusLabels: Record<BacklogItem['status'], { label: string; color: string }> = {
+  not_started: { label: 'Nicht begonnen', color: 'bg-slate-100 text-slate-600' },
+  in_progress: { label: 'In Arbeit', color: 'bg-blue-100 text-blue-700' },
+  review: { label: 'In Review', color: 'bg-yellow-100 text-yellow-700' },
+  completed: { label: 'Abgeschlossen', color: 'bg-green-100 text-green-700' },
+  blocked: { label: 'Blockiert', color: 'bg-red-100 text-red-700' },
+}
+
+export const priorityLabels: Record<BacklogItem['priority'], { label: string; color: string }> = {
+  critical: { label: 'Kritisch', color: 'bg-red-500 text-white' },
+  high: { label: 'Hoch', color: 'bg-orange-500 text-white' },
+  medium: { label: 'Mittel', color: 'bg-yellow-500 text-white' },
+  low: { label: 'Niedrig', color: 'bg-slate-500 text-white' },
+}
diff --git a/admin-lehrer/app/(admin)/backlog/data.tsx b/admin-lehrer/app/(admin)/backlog/data.tsx
new file mode 100644
index 0000000..f909746
--- /dev/null
+++ b/admin-lehrer/app/(admin)/backlog/data.tsx
@@ -0,0 +1,6 @@
+/**
+ * Barrel re-export for backlog data.
+ * Split into categories.tsx (UI definitions + labels) and backlog-items.ts (item data).
+ */
+export { categories, statusLabels, priorityLabels } from './categories'
+export { initialBacklogItems } from './backlog-items'
diff --git a/admin-lehrer/app/(admin)/backlog/page.tsx b/admin-lehrer/app/(admin)/backlog/page.tsx
index 5e5ab7b..75580bd 100644
--- a/admin-lehrer/app/(admin)/backlog/page.tsx
+++ b/admin-lehrer/app/(admin)/backlog/page.tsx
@@ -10,737 +10,36 @@
  * Updated: 2026-02-03
  */
 
-import { useState, useEffect } from 'react'
 import { PagePurpose } from '@/components/common/PagePurpose'
 import { metaModules } from '@/lib/navigation'
-import {
-  ChevronRight,
-  Search,
-  Package,
-  RefreshCw,
-  Shield,
-  ClipboardCheck,
-  Users,
-  GitBranch,
-  Tag,
-  Database,
-  FileText,
-  CheckSquare,
-  AlertTriangle,
-} from 'lucide-react'
-
-interface BacklogItem {
-  id: string
-  title: string
-  description: string
-  category: string
-  priority: 'critical' | 'high' | 'medium' | 'low'
-  status: 'not_started' | 'in_progress' | 'review' | 'completed' | 'blocked'
-  assignee?: string
-  dueDate?: string
-  notes?: string
-  subtasks?: { id: string; title: string; completed: boolean }[]
-}
-
-interface BacklogCategory {
-  id: string
-  name: string
-  icon: React.ReactNode
-  color: string
-  bgColor: string
-  description: string
-}
-
-const categories: BacklogCategory[] = [
-  {
-    id: 'modules',
-    name: 'Module Progress',
-    icon: <Package className="w-5 h-5" />,
-    color: 'text-violet-700',
-    bgColor: 'bg-violet-100 border-violet-300',
-    description: 'Fertigstellungsgrad aller Services & Module',
-  },
-  {
-    id: 'cicd',
-    name: 'CI/CD Pipelines',
-    icon: <RefreshCw className="w-5 h-5" />,
-    color: 'text-blue-700',
-    bgColor: 'bg-blue-100 border-blue-300',
-    description: 'Build, Test & Deployment Automation',
-  },
-  {
-    id: 'security',
-    name: 'Security & Vulnerability',
-    icon: <Shield className="w-5 h-5" />,
-    color: 'text-red-700',
-    bgColor: 'bg-red-100 border-red-300',
-    description: 'Security Scans, Dependency Checks & Penetration Testing',
-  },
-  {
-    id: 'testing',
-    name: 'Testing & Quality',
-    icon: <ClipboardCheck className="w-5 h-5" />,
-    color: 'text-emerald-700',
-    bgColor: 'bg-emerald-100 border-emerald-300',
-    description: 'Unit Tests, Integration Tests & E2E Testing',
-  },
-  {
-    id: 'rbac',
-    name: 'RBAC & Access Control',
-    icon: <Users className="w-5 h-5" />,
-    color: 'text-purple-700',
-    bgColor: 'bg-purple-100 border-purple-300',
-    description: 'Developer Roles, Permissions & Team Management',
-  },
-  {
-    id: 'git',
-    name: 'Git & Branch Protection',
-    icon: <GitBranch className="w-5 h-5" />,
-    color: 'text-orange-700',
-    bgColor: 'bg-orange-100 border-orange-300',
-    description: 'Protected Branches, Merge Requests & Code Reviews',
-  },
-  {
-    id: 'release',
-    name: 'Release Management',
-    icon: <Tag className="w-5 h-5" />,
-    color: 'text-green-700',
-    bgColor: 'bg-green-100 border-green-300',
-    description: 'Versioning, Changelog & Release Notes',
-  },
-  {
-    id: 'data',
-    name: 'Data Protection',
-    icon: <Database className="w-5 h-5" />,
-    color: 'text-cyan-700',
-    bgColor: 'bg-cyan-100 border-cyan-300',
-    description: 'Backup, Migration & Customer Data Safety',
-  },
-  {
-    id: 'compliance',
-    name: 'Compliance & SBOM',
-    icon: <FileText className="w-5 h-5" />,
-    color: 'text-teal-700',
-    bgColor: 'bg-teal-100 border-teal-300',
-    description: 'SBOM, Lizenzen & Open Source Compliance',
-  },
-  {
-    id: 'approval',
-    name: 'Approval Workflow',
-    icon: <CheckSquare className="w-5 h-5" />,
-    color: 'text-indigo-700',
-    bgColor: 'bg-indigo-100 border-indigo-300',
-    description: 'Developer Approval, QA Sign-off & Release Gates',
-  },
-]
-
-// UPDATED: 2026-02-03 - Reflects actual project state
-const initialBacklogItems: BacklogItem[] = [
-  // ==================== MODULE PROGRESS ====================
-  {
-    id: 'mod-1',
-    title: 'Consent Service (Go) - 90% fertig',
-    description: 'DSGVO Consent Management Microservice - Production Ready',
-    category: 'modules',
-    priority: 'high',
-    status: 'in_progress',
-    notes: 'Port 8081. Umfangreiche Tests. JWT Auth, OAuth 2.0, TOTP 2FA, DSR Workflow, Matrix/Jitsi Integration, Session Management, PII Redactor.',
-    subtasks: [
-      { id: 'mod-1-1', title: 'Core Consent API (CRUD, Versioning)', completed: true },
-      { id: 'mod-1-2', title: 'Authentication (JWT, OAuth 2.0, TOTP)', completed: true },
-      { id: 'mod-1-3', title: 'DSR Workflow (Art. 15-21)', completed: true },
-      { id: 'mod-1-4', title: 'Email Templates & Notifications', completed: true },
-      { id: 'mod-1-5', title: 'Matrix/Jitsi Integration', completed: true },
-      { id: 'mod-1-6', title: 'Session Management & Middleware', completed: true },
-      { id: 'mod-1-7', title: 'PII Redactor & Security Headers', completed: true },
-      { id: 'mod-1-8', title: 'Performance Tests (High-Load)', completed: false },
-    ],
-  },
-  {
-    id: 'mod-2',
-    title: 'Admin-v2 Frontend (Next.js 15) - 95% fertig',
-    description: 'Neues Admin Dashboard - Feature Complete',
-    category: 'modules',
-    priority: 'critical',
-    status: 'completed',
-    notes: 'Port 3002. 73 Seiten, 154 Dateien, 50k+ Zeilen Code. Alle Module migriert.',
-    subtasks: [
-      { id: 'mod-2-1', title: 'Layout mit Sidebar Navigation', completed: true },
-      { id: 'mod-2-2', title: 'AI Module (Agents, RAG, Quality, LLM Compare)', completed: true },
-      { id: 'mod-2-3', title: 'Compliance Module (AI Act, DSFA, Controls, Evidence)', completed: true },
-      { id: 'mod-2-4', title: 'Communication Module (Mail, Matrix, Video-Chat, Alerts)', completed: true },
-      { id: 'mod-2-5', title: 'DSGVO Module (Advisory Board, Consent, DSR, TOM, VVT)', completed: true },
-      { id: 'mod-2-6', title: 'Infrastructure Module (CI/CD, GPU, SBOM, Security, Tests)', completed: true },
-      { id: 'mod-2-7', title: 'Education Module (Edu-Search, Foerderantrag)', completed: true },
-      { id: 'mod-2-8', title: 'Wizard Framework (Stepper, TestRunner, etc.)', completed: true },
-      { id: 'mod-2-9', title: 'API Proxy Routes', completed: true },
-      { id: 'mod-2-10', title: 'E2E Tests mit Playwright', completed: false },
-    ],
-  },
-  {
-    id: 'mod-3',
-    title: 'Studio-v2 Frontend (Next.js 15) - 90% fertig',
-    description: 'Lehrer/Schueler Studio mit Apple Weather UI',
-    category: 'modules',
-    priority: 'high',
-    status: 'completed',
-    notes: 'Port 3001. 21 Seiten, 111 Dateien, 38k+ Zeilen. Experimental Dashboard, Korrektur, Geo-Lernwelt.',
-    subtasks: [
-      { id: 'mod-3-1', title: 'Experimental Dashboard (Glassmorphism)', completed: true },
-      { id: 'mod-3-2', title: 'Korrektur-System mit Fairness-Analyse', completed: true },
-      { id: 'mod-3-3', title: 'Geo-Lernwelt (Maps, AOI)', completed: true },
-      { id: 'mod-3-4', title: 'Voice Components', completed: true },
-      { id: 'mod-3-5', title: 'Worksheet Editor', completed: true },
-      { id: 'mod-3-6', title: 'Alerts & B2B Migration Wizard', completed: true },
-      { id: 'mod-3-7', title: 'Document Upload & QR Code', completed: true },
-      { id: 'mod-3-8', title: 'Messages & Meet Integration', completed: true },
-    ],
-  },
-  {
-    id: 'mod-4',
-    title: 'Backend (Python FastAPI) - 85% fertig',
-    description: 'Hauptbackend mit umfangreichen Erweiterungen',
-    category: 'modules',
-    priority: 'critical',
-    status: 'in_progress',
-    notes: 'Port 8000. 238 Dateien, 94k+ Zeilen. Alerts Agent, Compliance, Classroom Engine, Game, Klausur.',
-    subtasks: [
-      { id: 'mod-4-1', title: 'Alerts Agent (Rules, Digests, Actions)', completed: true },
-      { id: 'mod-4-2', title: 'Compliance Module (AI Act, ISMS, Audit)', completed: true },
-      { id: 'mod-4-3', title: 'Classroom Engine (FSM, Analytics, Timer)', completed: true },
-      { id: 'mod-4-4', title: 'Game API (Learning Rules, Quiz)', completed: true },
-      { id: 'mod-4-5', title: 'Klausur Backend (OCR, Correction)', completed: true },
-      { id: 'mod-4-6', title: 'Unit API & Analytics', completed: true },
-      { id: 'mod-4-7', title: 'Middleware (Rate Limiter, Security)', completed: true },
-      { id: 'mod-4-8', title: 'Session Management (RBAC)', completed: true },
-      { id: 'mod-4-9', title: 'Transcription Worker', completed: true },
-      { id: 'mod-4-10', title: 'Alembic Migrations', completed: true },
-      { id: 'mod-4-11', title: 'Integration Tests erweitern', completed: false },
-    ],
-  },
-  {
-    id: 'mod-5',
-    title: 'Klausur Service (Python) - 85% fertig',
-    description: 'BYOEH Abitur-Klausurkorrektur System',
-    category: 'modules',
-    priority: 'critical',
-    status: 'in_progress',
-    notes: 'Port 8086. 45 Dateien, 20k+ Zeilen. BYOEH, Qdrant RAG, Embedding Service, Legal Corpus.',
-    subtasks: [
-      { id: 'mod-5-1', title: 'BYOEH Upload & Encryption', completed: true },
-      { id: 'mod-5-2', title: 'Key-Sharing zwischen Pruefern', completed: true },
-      { id: 'mod-5-3', title: 'Qdrant RAG Integration', completed: true },
-      { id: 'mod-5-4', title: 'Hybrid Search (Keyword + Semantic)', completed: true },
-      { id: 'mod-5-5', title: 'Embedding Service', completed: true },
-      { id: 'mod-5-6', title: 'Legal Corpus Ingestion', completed: true },
-      { id: 'mod-5-7', title: 'PDF Export', completed: true },
-      { id: 'mod-5-8', title: 'OCR Pipeline (TrOCR, Vision)', completed: true },
-      { id: 'mod-5-9', title: 'Vocab Worksheet API', completed: true },
-      { id: 'mod-5-10', title: 'KI-gestuetzte Korrektur verbessern', completed: false },
-    ],
-  },
-  {
-    id: 'mod-6',
-    title: 'Agent-Core - 80% fertig',
-    description: 'Multi-Agent Architecture Framework',
-    category: 'modules',
-    priority: 'high',
-    status: 'in_progress',
-    notes: 'Neuer Service. Sessions, Shared Brain, Orchestrator, SOUL Files.',
-    subtasks: [
-      { id: 'mod-6-1', title: 'Session Management & Heartbeat', completed: true },
-      { id: 'mod-6-2', title: 'Checkpoint System', completed: true },
-      { id: 'mod-6-3', title: 'Memory Store (mit TTL)', completed: true },
-      { id: 'mod-6-4', title: 'Context Manager', completed: true },
-      { id: 'mod-6-5', title: 'Knowledge Graph', completed: true },
-      { id: 'mod-6-6', title: 'Message Bus (Pub/Sub)', completed: true },
-      { id: 'mod-6-7', title: 'Supervisor & Task Router', completed: true },
-      { id: 'mod-6-8', title: 'SOUL Files (Agent Personalities)', completed: true },
-      { id: 'mod-6-9', title: 'Integration mit Voice Service', completed: false },
-    ],
-  },
-  {
-    id: 'mod-7',
-    title: 'AI Compliance SDK (Go) - 75% fertig',
-    description: 'UCCA Obligations Framework',
-    category: 'modules',
-    priority: 'high',
-    status: 'in_progress',
-    notes: 'Neuer Go Service. AI Act, DSGVO, NIS2 Module. Policy Engine.',
-    subtasks: [
-      { id: 'mod-7-1', title: 'UCCA Obligations Framework', completed: true },
-      { id: 'mod-7-2', title: 'AI Act Module', completed: true },
-      { id: 'mod-7-3', title: 'DSGVO Module', completed: true },
-      { id: 'mod-7-4', title: 'NIS2 Module', completed: true },
-      { id: 'mod-7-5', title: 'Policy Engine', completed: true },
-      { id: 'mod-7-6', title: 'Legal RAG Integration', completed: true },
-      { id: 'mod-7-7', title: 'Audit Trail & Export', completed: true },
-      { id: 'mod-7-8', title: 'Escalation System', completed: false },
-      { id: 'mod-7-9', title: 'Funding/Foerderantrag Wizard', completed: false },
-    ],
-  },
-  {
-    id: 'mod-8',
-    title: 'Geo Service (Python) - 70% fertig',
-    description: 'Geographic Data Service fuer Geo-Lernwelt',
-    category: 'modules',
-    priority: 'medium',
-    status: 'in_progress',
-    notes: 'Neuer Service. AOI Packager, DEM Service, Tile Server.',
-    subtasks: [
-      { id: 'mod-8-1', title: 'AOI Packager', completed: true },
-      { id: 'mod-8-2', title: 'DEM Service', completed: true },
-      { id: 'mod-8-3', title: 'OSM Extractor', completed: true },
-      { id: 'mod-8-4', title: 'Tile Server', completed: true },
-      { id: 'mod-8-5', title: 'Learning Generator', completed: true },
-      { id: 'mod-8-6', title: 'License Checker', completed: true },
-      { id: 'mod-8-7', title: 'Unity Integration', completed: false },
-      { id: 'mod-8-8', title: 'Performance Optimization', completed: false },
-    ],
-  },
-  {
-    id: 'mod-9',
-    title: 'Edu-Search Service (Go) - 65% fertig',
-    description: 'Educational Search mit Policy Engine',
-    category: 'modules',
-    priority: 'medium',
-    status: 'in_progress',
-    notes: 'Policy Handlers, Bundeslaender Policies, PII Detector.',
-    subtasks: [
-      { id: 'mod-9-1', title: 'Policy Enforcer', completed: true },
-      { id: 'mod-9-2', title: 'PII Detector', completed: true },
-      { id: 'mod-9-3', title: 'Bundeslaender Policies', completed: true },
-      { id: 'mod-9-4', title: 'German Universities Data', completed: true },
-      { id: 'mod-9-5', title: 'Search API erweitern', completed: false },
-      { id: 'mod-9-6', title: 'Caching Layer', completed: false },
-    ],
-  },
-
-  // ==================== CI/CD PIPELINES ====================
-  {
-    id: 'cicd-1',
-    title: 'Woodpecker CI Setup',
-    description: 'Self-hosted CI/CD auf Mac Mini',
-    category: 'cicd',
-    priority: 'critical',
-    status: 'completed',
-    notes: 'Implementiert. Woodpecker CI laeuft auf macmini:8082. Pipelines fuer alle Services.',
-    subtasks: [
-      { id: 'cicd-1-1', title: 'Woodpecker Server & Agent installiert', completed: true },
-      { id: 'cicd-1-2', title: 'Gitea Integration', completed: true },
-      { id: 'cicd-1-3', title: 'Docker Build Pipelines', completed: true },
-      { id: 'cicd-1-4', title: 'Test Pipelines (Go, Python, Node)', completed: true },
-    ],
-  },
-  {
-    id: 'cicd-2',
-    title: 'SBOM Generation Pipeline',
-    description: 'Automatische SBOM-Generierung in CI',
-    category: 'cicd',
-    priority: 'high',
-    status: 'completed',
-    notes: 'Implementiert in .gitea/workflows/sbom.yaml',
-    subtasks: [
-      { id: 'cicd-2-1', title: 'CycloneDX SBOM Generation', completed: true },
-      { id: 'cicd-2-2', title: 'Artifact Upload', completed: true },
-      { id: 'cicd-2-3', title: 'SBOM Viewer in Admin', completed: true },
-    ],
-  },
-  {
-    id: 'cicd-3',
-    title: 'Production Deployment Pipeline',
-    description: 'Kontrolliertes Deployment mit Rollback',
-    category: 'cicd',
-    priority: 'critical',
-    status: 'not_started',
-    subtasks: [
-      { id: 'cicd-3-1', title: 'Blue-Green oder Canary Strategy', completed: false },
-      { id: 'cicd-3-2', title: 'Automatischer Rollback', completed: false },
-      { id: 'cicd-3-3', title: 'Health Checks nach Deploy', completed: false },
-      { id: 'cicd-3-4', title: 'Deployment Notifications', completed: false },
-    ],
-  },
-
-  // ==================== SECURITY ====================
-  {
-    id: 'sec-1',
-    title: 'Dependency Vulnerability Scanning',
-    description: 'Automatische Pruefung auf Schwachstellen',
-    category: 'security',
-    priority: 'critical',
-    status: 'completed',
-    notes: 'Dependabot konfiguriert fuer Go, Python, npm, Docker.',
-    subtasks: [
-      { id: 'sec-1-1', title: 'Dependabot fuer Go', completed: true },
-      { id: 'sec-1-2', title: 'Dependabot fuer Python', completed: true },
-      { id: 'sec-1-3', title: 'Dependabot fuer npm', completed: true },
-      { id: 'sec-1-4', title: 'Block Merge bei kritischen CVEs', completed: true },
-    ],
-  },
-  {
-    id: 'sec-2',
-    title: 'Container Image Scanning',
-    description: 'Trivy Scans fuer alle Docker Images',
-    category: 'security',
-    priority: 'high',
-    status: 'completed',
-    notes: 'Trivy in CI integriert.',
-    subtasks: [
-      { id: 'sec-2-1', title: 'Trivy Integration', completed: true },
-      { id: 'sec-2-2', title: 'Base Image Policy', completed: true },
-      { id: 'sec-2-3', title: 'Scan Report bei Build', completed: true },
-    ],
-  },
-  {
-    id: 'sec-3',
-    title: 'SAST (Static Application Security Testing)',
-    description: 'Code-Analyse auf Sicherheitsluecken',
-    category: 'security',
-    priority: 'high',
-    status: 'completed',
-    notes: 'Gosec, Bandit, npm audit in CI.',
-    subtasks: [
-      { id: 'sec-3-1', title: 'Gosec fuer Go', completed: true },
-      { id: 'sec-3-2', title: 'Bandit fuer Python', completed: true },
-      { id: 'sec-3-3', title: 'npm audit', completed: true },
-      { id: 'sec-3-4', title: 'Semgrep Regeln', completed: false },
-    ],
-  },
-  {
-    id: 'sec-4',
-    title: 'Secret Scanning',
-    description: 'Verhindern dass Secrets in Git landen',
-    category: 'security',
-    priority: 'critical',
-    status: 'completed',
-    notes: 'Gitleaks in CI. SSH Keys in .gitignore.',
-    subtasks: [
-      { id: 'sec-4-1', title: 'Gitleaks Pre-commit', completed: true },
-      { id: 'sec-4-2', title: 'SSH Keys in .gitignore', completed: true },
-      { id: 'sec-4-3', title: 'Historische Commits gescannt', completed: true },
-    ],
-  },
-
-  // ==================== TESTING ====================
-  {
-    id: 'test-1',
-    title: 'Backend Test Coverage erweitern',
-    description: 'Integration & E2E Tests fuer Backend APIs',
-    category: 'testing',
-    priority: 'high',
-    status: 'in_progress',
-    notes: '238 Backend-Dateien, davon 20+ Test-Dateien.',
-    subtasks: [
-      { id: 'test-1-1', title: 'Alerts Agent Tests', completed: true },
-      { id: 'test-1-2', title: 'Compliance API Tests', completed: true },
-      { id: 'test-1-3', title: 'Classroom API Tests', completed: true },
-      { id: 'test-1-4', title: 'Session Middleware Tests', completed: true },
-      { id: 'test-1-5', title: 'Load Testing mit k6', completed: false },
-    ],
-  },
-  {
-    id: 'test-2',
-    title: 'Frontend E2E Tests',
-    description: 'Playwright Tests fuer Admin-v2 und Studio-v2',
-    category: 'testing',
-    priority: 'critical',
-    status: 'not_started',
-    notes: 'Kritischer Mangel - keine E2E Tests!',
-    subtasks: [
-      { id: 'test-2-1', title: 'Playwright Setup', completed: false },
-      { id: 'test-2-2', title: 'Admin-v2 Critical Paths', completed: false },
-      { id: 'test-2-3', title: 'Studio-v2 User Flows', completed: false },
-      { id: 'test-2-4', title: 'Visual Regression', completed: false },
-    ],
-  },
-  {
-    id: 'test-3',
-    title: 'Agent-Core Tests',
-    description: 'Unit Tests fuer Multi-Agent Framework',
-    category: 'testing',
-    priority: 'high',
-    status: 'completed',
-    notes: 'Umfangreiche Test-Suite vorhanden.',
-    subtasks: [
-      { id: 'test-3-1', title: 'Session Manager Tests', completed: true },
-      { id: 'test-3-2', title: 'Memory Store Tests', completed: true },
-      { id: 'test-3-3', title: 'Message Bus Tests', completed: true },
-      { id: 'test-3-4', title: 'Task Router Tests', completed: true },
-      { id: 'test-3-5', title: 'Heartbeat Tests', completed: true },
-    ],
-  },
-
-  // ==================== RBAC ====================
-  {
-    id: 'rbac-1',
-    title: 'Gitea Team Permissions',
-    description: 'Team-basierte Zugriffsrechte',
-    category: 'rbac',
-    priority: 'high',
-    status: 'not_started',
-    subtasks: [
-      { id: 'rbac-1-1', title: 'Maintainers Team (Full Access)', completed: false },
-      { id: 'rbac-1-2', title: 'Developers Team (Write)', completed: false },
-      { id: 'rbac-1-3', title: 'Reviewers Team (Read + Review)', completed: false },
-    ],
-  },
-  {
-    id: 'rbac-2',
-    title: 'Admin Panel Access Control',
-    description: 'Rollenbasierte Zugriffsrechte im Admin',
-    category: 'rbac',
-    priority: 'medium',
-    status: 'in_progress',
-    notes: 'RBAC Middleware im Backend implementiert.',
-    subtasks: [
-      { id: 'rbac-2-1', title: 'RBAC Middleware', completed: true },
-      { id: 'rbac-2-2', title: 'Session Store', completed: true },
-      { id: 'rbac-2-3', title: 'Protected Routes', completed: true },
-      { id: 'rbac-2-4', title: 'Admin Authentication UI', completed: false },
-    ],
-  },
-
-  // ==================== GIT ====================
-  {
-    id: 'git-1',
-    title: 'Protected Branches Setup',
-    description: 'Schutz fuer main Branch',
-    category: 'git',
-    priority: 'critical',
-    status: 'not_started',
-    subtasks: [
-      { id: 'git-1-1', title: 'No direct push to main', completed: false },
-      { id: 'git-1-2', title: 'Require PR with Approval', completed: false },
-      { id: 'git-1-3', title: 'Require Status Checks', completed: false },
-    ],
-  },
-  {
-    id: 'git-2',
-    title: 'Alle Dateien committet',
-    description: 'Keine ungetrackten Produktionsdateien',
-    category: 'git',
-    priority: 'critical',
-    status: 'completed',
-    notes: 'Am 2026-02-03 bereinigt: ~870 Dateien, 329k Zeilen committet.',
-    subtasks: [
-      { id: 'git-2-1', title: 'admin-v2 (154 Dateien)', completed: true },
-      { id: 'git-2-2', title: 'studio-v2 (111 Dateien)', completed: true },
-      { id: 'git-2-3', title: 'backend (238 Dateien)', completed: true },
-      { id: 'git-2-4', title: 'website (120 Dateien)', completed: true },
-      { id: 'git-2-5', title: 'klausur-service (45 Dateien)', completed: true },
-      { id: 'git-2-6', title: 'consent-service (15 Dateien)', completed: true },
-      { id: 'git-2-7', title: 'Neue Services (161 Dateien)', completed: true },
-      { id: 'git-2-8', title: '.gitignore aktualisiert', completed: true },
-    ],
-  },
-
-  // ==================== RELEASE ====================
-  {
-    id: 'rel-1',
-    title: 'Semantic Versioning',
-    description: 'Automatische Versionierung nach SemVer',
-    category: 'release',
-    priority: 'high',
-    status: 'not_started',
-    subtasks: [
-      { id: 'rel-1-1', title: 'Conventional Commits', completed: false },
-      { id: 'rel-1-2', title: 'Automatische Git Tags', completed: false },
-      { id: 'rel-1-3', title: 'CHANGELOG Generation', completed: false },
-    ],
-  },
-
-  // ==================== DATA ====================
-  {
-    id: 'data-1',
-    title: 'Database Backup Strategy',
-    description: 'Automatische Backups mit Retention',
-    category: 'data',
-    priority: 'critical',
-    status: 'not_started',
-    subtasks: [
-      { id: 'data-1-1', title: 'Taegliche Backups', completed: false },
-      { id: 'data-1-2', title: 'Point-in-Time Recovery', completed: false },
-      { id: 'data-1-3', title: 'Backup Encryption', completed: false },
-      { id: 'data-1-4', title: 'Restore Test dokumentieren', completed: false },
-    ],
-  },
-  {
-    id: 'data-2',
-    title: 'Customer Data Protection',
-    description: 'Schutz von Stammdaten & Dokumenten',
-    category: 'data',
-    priority: 'critical',
-    status: 'in_progress',
-    subtasks: [
-      { id: 'data-2-1', title: 'Encryption at Rest', completed: true },
-      { id: 'data-2-2', title: 'Audit Log fuer Consent', completed: true },
-      { id: 'data-2-3', title: 'PII Masking in Logs', completed: true },
-      { id: 'data-2-4', title: 'Secure Document Storage', completed: false },
-    ],
-  },
-
-  // ==================== COMPLIANCE ====================
-  {
-    id: 'sbom-1',
-    title: 'SBOM erstellt und dokumentiert',
-    description: 'Software Bill of Materials',
-    category: 'compliance',
-    priority: 'high',
-    status: 'completed',
-    notes: 'Umfassende SBOM in /admin/sbom verfuegbar.',
-    subtasks: [
-      { id: 'sbom-1-1', title: 'Go Dependencies', completed: true },
-      { id: 'sbom-1-2', title: 'Python Dependencies', completed: true },
-      { id: 'sbom-1-3', title: 'npm Dependencies', completed: true },
-      { id: 'sbom-1-4', title: 'Docker Base Images', completed: true },
-      { id: 'sbom-1-5', title: 'CycloneDX Export', completed: true },
-    ],
-  },
-  {
-    id: 'sbom-2',
-    title: 'Lizenz-Compliance',
-    description: 'Alle Lizenzen geprueft',
-    category: 'compliance',
-    priority: 'high',
-    status: 'in_progress',
-    subtasks: [
-      { id: 'sbom-2-1', title: 'Lizenzen identifiziert', completed: true },
-      { id: 'sbom-2-2', title: 'Kompatibilitaet geprueft', completed: false },
-      { id: 'sbom-2-3', title: 'LICENSES.md erstellt', completed: false },
-    ],
-  },
-
-  // ==================== APPROVAL ====================
-  {
-    id: 'appr-1',
-    title: 'Release Approval Gates',
-    description: 'Mehrstufige Freigabe',
-    category: 'approval',
-    priority: 'critical',
-    status: 'not_started',
-    subtasks: [
-      { id: 'appr-1-1', title: 'QA Sign-off', completed: false },
-      { id: 'appr-1-2', title: 'Security Review', completed: false },
-      { id: 'appr-1-3', title: 'Product Owner Freigabe', completed: false },
-    ],
-  },
-  {
-    id: 'appr-2',
-    title: 'Post-Deployment Verification',
-    description: 'Checks nach Deployment',
-    category: 'approval',
-    priority: 'high',
-    status: 'not_started',
-    subtasks: [
-      { id: 'appr-2-1', title: 'Smoke Tests', completed: false },
-      { id: 'appr-2-2', title: 'Error Rate Monitoring', completed: false },
-      { id: 'appr-2-3', title: 'Rollback Kriterien', completed: false },
-    ],
-  },
-]
-
-const statusLabels: Record<BacklogItem['status'], { label: string; color: string }> = {
-  not_started: { label: 'Nicht begonnen', color: 'bg-slate-100 text-slate-600' },
-  in_progress: { label: 'In Arbeit', color: 'bg-blue-100 text-blue-700' },
-  review: { label: 'In Review', color: 'bg-yellow-100 text-yellow-700' },
-  completed: { label: 'Abgeschlossen', color: 'bg-green-100 text-green-700' },
-  blocked: { label: 'Blockiert', color: 'bg-red-100 text-red-700' },
-}
-
-const priorityLabels: Record<BacklogItem['priority'], { label: string; color: string }> = {
-  critical: { label: 'Kritisch', color: 'bg-red-500 text-white' },
-  high: { label: 'Hoch', color: 'bg-orange-500 text-white' },
-  medium: { label: 'Mittel', color: 'bg-yellow-500 text-white' },
-  low: { label: 'Niedrig', color: 'bg-slate-500 text-white' },
-}
+import { categories } from './data'
+import { useBacklog } from './useBacklog'
+import { OverallProgress } from './_components/OverallProgress'
+import { CategoryCards } from './_components/CategoryCards'
+import { FilterBar } from './_components/FilterBar'
+import { BacklogItemCard } from './_components/BacklogItemCard'
+import { InfoBox } from './_components/InfoBox'
 
 export default function BacklogPage() {
   const module = metaModules.find((m) => m.id === 'backlog')
-  const [items, setItems] = useState<BacklogItem[]>(initialBacklogItems)
-  const [selectedCategory, setSelectedCategory] = useState<string | null>(null)
-  const [selectedPriority, setSelectedPriority] = useState<string | null>(null)
-  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set())
-  const [searchQuery, setSearchQuery] = useState('')
-
-  // Load saved state from localStorage
-  useEffect(() => {
-    const saved = localStorage.getItem('backlogItems-v2')
-    if (saved) {
-      try {
-        setItems(JSON.parse(saved))
-      } catch (e) {
-        console.error('Failed to load backlog items:', e)
-      }
-    }
-  }, [])
-
-  // Save state to localStorage
-  useEffect(() => {
-    localStorage.setItem('backlogItems-v2', JSON.stringify(items))
-  }, [items])
-
-  const filteredItems = items.filter((item) => {
-    if (selectedCategory && item.category !== selectedCategory) return false
-    if (selectedPriority && item.priority !== selectedPriority) return false
-    if (searchQuery) {
-      const query = searchQuery.toLowerCase()
-      return (
-        item.title.toLowerCase().includes(query) ||
-        item.description.toLowerCase().includes(query) ||
-        item.subtasks?.some((st) => st.title.toLowerCase().includes(query))
-      )
-    }
-    return true
-  })
-
-  const toggleExpand = (id: string) => {
-    const newExpanded = new Set(expandedItems)
-    if (newExpanded.has(id)) {
-      newExpanded.delete(id)
-    } else {
-      newExpanded.add(id)
-    }
-    setExpandedItems(newExpanded)
-  }
-
-  const updateItemStatus = (id: string, status: BacklogItem['status']) => {
-    setItems(items.map((item) => (item.id === id ? { ...item, status } : item)))
-  }
-
-  const toggleSubtask = (itemId: string, subtaskId: string) => {
-    setItems(
-      items.map((item) => {
-        if (item.id !== itemId) return item
-        return {
-          ...item,
-          subtasks: item.subtasks?.map((st) =>
-            st.id === subtaskId ? { ...st, completed: !st.completed } : st
-          ),
-        }
-      })
-    )
-  }
-
-  const getProgress = () => {
-    const total = items.length
-    const completed = items.filter((i) => i.status === 'completed').length
-    return { total, completed, percentage: Math.round((completed / total) * 100) }
-  }
-
-  const getCategoryProgress = (categoryId: string) => {
-    const categoryItems = items.filter((i) => i.category === categoryId)
-    const completed = categoryItems.filter((i) => i.status === 'completed').length
-    return { total: categoryItems.length, completed }
-  }
-
-  const resetToDefaults = () => {
-    if (confirm('Backlog auf Standardwerte zuruecksetzen? Alle lokalen Aenderungen gehen verloren.')) {
-      setItems(initialBacklogItems)
-      localStorage.removeItem('backlogItems-v2')
-    }
-  }
-
-  const progress = getProgress()
+  const {
+    filteredItems,
+    selectedCategory,
+    setSelectedCategory,
+    selectedPriority,
+    setSelectedPriority,
+    expandedItems,
+    searchQuery,
+    setSearchQuery,
+    toggleExpand,
+    updateItemStatus,
+    toggleSubtask,
+    progress,
+    getCategoryProgress,
+    resetToDefaults,
+    clearFilters,
+    hasActiveFilters,
+  } = useBacklog()
 
   return (
     <div className="space-y-6">
@@ -754,210 +53,38 @@ export default function BacklogPage() {
         />
       )}
 
-      {/* Overall Progress */}
-      <div className="bg-white rounded-xl border border-slate-200 p-6">
-        <div className="flex items-center justify-between mb-4">
-          <div>
-            <h2 className="text-lg font-semibold text-slate-900">Gesamtfortschritt</h2>
-            <p className="text-sm text-slate-500">
-              {progress.completed} von {progress.total} Aufgaben abgeschlossen
-            </p>
-          </div>
-          <div className="flex items-center gap-4">
-            <button
-              onClick={resetToDefaults}
-              className="text-sm text-slate-500 hover:text-slate-700"
-            >
-              Zuruecksetzen
-            </button>
-            <div className="text-3xl font-bold text-blue-600">{progress.percentage}%</div>
-          </div>
-        </div>
-        <div className="w-full bg-slate-200 rounded-full h-3">
-          <div
-            className="bg-blue-600 h-3 rounded-full transition-all duration-500"
-            style={{ width: `${progress.percentage}%` }}
-          />
-        </div>
-      </div>
+      <OverallProgress progress={progress} onReset={resetToDefaults} />
 
-      {/* Category Cards */}
-      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3">
-        {categories.map((cat) => {
-          const catProgress = getCategoryProgress(cat.id)
-          return (
-            <button
-              key={cat.id}
-              onClick={() => setSelectedCategory(selectedCategory === cat.id ? null : cat.id)}
-              className={`p-3 rounded-xl border-2 text-left transition-all ${
-                selectedCategory === cat.id
-                  ? `${cat.bgColor} ring-2 ring-offset-2`
-                  : 'bg-white border-slate-200 hover:border-slate-300'
-              }`}
-            >
-              <div className="flex items-center gap-2 mb-1">
-                <span className={selectedCategory === cat.id ? cat.color : 'text-slate-500'}>
-                  {cat.icon}
-                </span>
-                <span className="font-medium text-xs truncate">{cat.name}</span>
-              </div>
-              <div className="text-xs text-slate-500">
-                {catProgress.completed}/{catProgress.total}
-              </div>
-            </button>
-          )
-        })}
-      </div>
+      <CategoryCards
+        categories={categories}
+        selectedCategory={selectedCategory}
+        onSelectCategory={setSelectedCategory}
+        getCategoryProgress={getCategoryProgress}
+      />
 
-      {/* Filters & Search */}
-      <div className="flex flex-wrap gap-4">
-        <div className="flex-1 min-w-[200px] relative">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
-          <input
-            type="text"
-            placeholder="Suchen..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="w-full pl-10 pr-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-          />
-        </div>
-        <select
-          value={selectedPriority || ''}
-          onChange={(e) => setSelectedPriority(e.target.value || null)}
-          className="px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-        >
-          <option value="">Alle Prioritaeten</option>
-          <option value="critical">Kritisch</option>
-          <option value="high">Hoch</option>
-          <option value="medium">Mittel</option>
-          <option value="low">Niedrig</option>
-        </select>
-        {(selectedCategory || selectedPriority || searchQuery) && (
-          <button
-            onClick={() => {
-              setSelectedCategory(null)
-              setSelectedPriority(null)
-              setSearchQuery('')
-            }}
-            className="px-4 py-2 text-sm text-slate-600 hover:text-slate-900"
-          >
-            Filter zuruecksetzen
-          </button>
-        )}
-      </div>
+      <FilterBar
+        searchQuery={searchQuery}
+        onSearchChange={setSearchQuery}
+        selectedPriority={selectedPriority}
+        onPriorityChange={setSelectedPriority}
+        hasActiveFilters={hasActiveFilters}
+        onClearFilters={clearFilters}
+      />
 
       {/* Backlog Items */}
       <div className="space-y-3">
         {filteredItems.map((item) => {
           const category = categories.find((c) => c.id === item.category)
-          const isExpanded = expandedItems.has(item.id)
-          const completedSubtasks = item.subtasks?.filter((st) => st.completed).length || 0
-          const totalSubtasks = item.subtasks?.length || 0
-
           return (
-            <div
+            <BacklogItemCard
               key={item.id}
-              className="bg-white rounded-xl border border-slate-200 overflow-hidden"
-            >
-              <div
-                className="p-4 cursor-pointer hover:bg-slate-50 transition-colors"
-                onClick={() => toggleExpand(item.id)}
-              >
-                <div className="flex items-start gap-3">
-                  {/* Expand Icon */}
-                  <button className="mt-1 text-slate-400">
-                    <ChevronRight
-                      className={`w-5 h-5 transition-transform ${isExpanded ? 'rotate-90' : ''}`}
-                    />
-                  </button>
-
-                  {/* Content */}
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center gap-2 mb-1 flex-wrap">
-                      <h3 className="font-semibold text-slate-900">{item.title}</h3>
-                      <span
-                        className={`px-2 py-0.5 rounded text-xs font-medium ${
-                          priorityLabels[item.priority].color
-                        }`}
-                      >
-                        {priorityLabels[item.priority].label}
-                      </span>
-                    </div>
-                    <p className="text-sm text-slate-500 mb-2">{item.description}</p>
-                    {item.notes && (
-                      <p className="text-xs text-slate-400 mb-2 italic">{item.notes}</p>
-                    )}
-                    <div className="flex items-center gap-3 text-xs">
-                      <span className={`px-2 py-1 rounded border ${category?.bgColor}`}>
-                        {category?.name}
-                      </span>
-                      {totalSubtasks > 0 && (
-                        <span className="text-slate-500">
-                          {completedSubtasks}/{totalSubtasks} Teilaufgaben
-                        </span>
-                      )}
-                    </div>
-                  </div>
-
-                  {/* Status */}
-                  <select
-                    value={item.status}
-                    onChange={(e) => {
-                      e.stopPropagation()
-                      updateItemStatus(item.id, e.target.value as BacklogItem['status'])
-                    }}
-                    onClick={(e) => e.stopPropagation()}
-                    className={`px-3 py-1.5 rounded-lg text-sm font-medium border-0 cursor-pointer ${
-                      statusLabels[item.status].color
-                    }`}
-                  >
-                    {Object.entries(statusLabels).map(([value, { label }]) => (
-                      <option key={value} value={value}>
-                        {label}
-                      </option>
-                    ))}
-                  </select>
-                </div>
-
-                {/* Progress Bar */}
-                {totalSubtasks > 0 && (
-                  <div className="mt-3 ml-8">
-                    <div className="w-full bg-slate-200 rounded-full h-1.5">
-                      <div
-                        className="bg-green-500 h-1.5 rounded-full transition-all"
-                        style={{ width: `${(completedSubtasks / totalSubtasks) * 100}%` }}
-                      />
-                    </div>
-                  </div>
-                )}
-              </div>
-
-              {/* Expanded Subtasks */}
-              {isExpanded && item.subtasks && item.subtasks.length > 0 && (
-                <div className="border-t border-slate-200 bg-slate-50 p-4 pl-12">
-                  <h4 className="text-sm font-medium text-slate-700 mb-3">Teilaufgaben</h4>
-                  <ul className="space-y-2">
-                    {item.subtasks.map((subtask) => (
-                      <li key={subtask.id} className="flex items-center gap-3">
-                        <input
-                          type="checkbox"
-                          checked={subtask.completed}
-                          onChange={() => toggleSubtask(item.id, subtask.id)}
-                          className="w-4 h-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500"
-                        />
-                        <span
-                          className={`text-sm ${
-                            subtask.completed ? 'text-slate-400 line-through' : 'text-slate-700'
-                          }`}
-                        >
-                          {subtask.title}
-                        </span>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              )}
-            </div>
+              item={item}
+              category={category}
+              isExpanded={expandedItems.has(item.id)}
+              onToggleExpand={toggleExpand}
+              onUpdateStatus={updateItemStatus}
+              onToggleSubtask={toggleSubtask}
+            />
           )
         })}
       </div>
@@ -968,24 +95,7 @@ export default function BacklogPage() {
         </div>
       )}
 
-      {/* Info Box */}
-      <div className="bg-amber-50 border border-amber-200 rounded-xl p-6">
-        <div className="flex items-start gap-4">
-          <AlertTriangle className="w-6 h-6 text-amber-600 flex-shrink-0 mt-0.5" />
-          <div>
-            <h3 className="font-semibold text-amber-900">Wichtiger Hinweis</h3>
-            <p className="text-sm text-amber-800 mt-1">
-              Diese Backlog-Liste muss vollstaendig abgearbeitet sein, bevor BreakPilot in den
-              Produktivbetrieb gehen kann. Alle kritischen Items muessen abgeschlossen sein. Der
-              Fortschritt wird lokal im Browser gespeichert und kann mit &quot;Zuruecksetzen&quot;
-              auf die Standardwerte zurueckgesetzt werden.
-            </p>
-            <p className="text-xs text-amber-700 mt-2">
-              Letzte Aktualisierung: 2026-02-03
-            </p>
-          </div>
-        </div>
-      </div>
+      <InfoBox />
     </div>
   )
 }
diff --git a/admin-lehrer/app/(admin)/backlog/types.ts b/admin-lehrer/app/(admin)/backlog/types.ts
new file mode 100644
index 0000000..a0c0602
--- /dev/null
+++ b/admin-lehrer/app/(admin)/backlog/types.ts
@@ -0,0 +1,32 @@
+export interface BacklogItem {
+  id: string
+  title: string
+  description: string
+  category: string
+  priority: 'critical' | 'high' | 'medium' | 'low'
+  status: 'not_started' | 'in_progress' | 'review' | 'completed' | 'blocked'
+  assignee?: string
+  dueDate?: string
+  notes?: string
+  subtasks?: { id: string; title: string; completed: boolean }[]
+}
+
+export interface BacklogCategory {
+  id: string
+  name: string
+  icon: React.ReactNode
+  color: string
+  bgColor: string
+  description: string
+}
+
+export interface BacklogProgress {
+  total: number
+  completed: number
+  percentage: number
+}
+
+export interface CategoryProgress {
+  total: number
+  completed: number
+}
diff --git a/admin-lehrer/app/(admin)/backlog/useBacklog.ts b/admin-lehrer/app/(admin)/backlog/useBacklog.ts
new file mode 100644
index 0000000..08763f4
--- /dev/null
+++ b/admin-lehrer/app/(admin)/backlog/useBacklog.ts
@@ -0,0 +1,128 @@
+'use client'
+
+import { useState, useEffect, useCallback, useMemo } from 'react'
+import type { BacklogItem, BacklogProgress, CategoryProgress } from './types'
+import { initialBacklogItems } from './data'
+
+const STORAGE_KEY = 'backlogItems-v2'
+
+export function useBacklog() {
+  const [items, setItems] = useState<BacklogItem[]>(initialBacklogItems)
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null)
+  const [selectedPriority, setSelectedPriority] = useState<string | null>(null)
+  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set())
+  const [searchQuery, setSearchQuery] = useState('')
+
+  // Load saved state from localStorage
+  useEffect(() => {
+    const saved = localStorage.getItem(STORAGE_KEY)
+    if (saved) {
+      try {
+        setItems(JSON.parse(saved))
+      } catch (e) {
+        console.error('Failed to load backlog items:', e)
+      }
+    }
+  }, [])
+
+  // Save state to localStorage
+  useEffect(() => {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(items))
+  }, [items])
+
+  const filteredItems = useMemo(() => {
+    return items.filter((item) => {
+      if (selectedCategory && item.category !== selectedCategory) return false
+      if (selectedPriority && item.priority !== selectedPriority) return false
+      if (searchQuery) {
+        const query = searchQuery.toLowerCase()
+        return (
+          item.title.toLowerCase().includes(query) ||
+          item.description.toLowerCase().includes(query) ||
+          item.subtasks?.some((st) => st.title.toLowerCase().includes(query))
+        )
+      }
+      return true
+    })
+  }, [items, selectedCategory, selectedPriority, searchQuery])
+
+  const toggleExpand = useCallback((id: string) => {
+    setExpandedItems((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) {
+        next.delete(id)
+      } else {
+        next.add(id)
+      }
+      return next
+    })
+  }, [])
+
+  const updateItemStatus = useCallback((id: string, status: BacklogItem['status']) => {
+    setItems((prev) => prev.map((item) => (item.id === id ? { ...item, status } : item)))
+  }, [])
+
+  const toggleSubtask = useCallback((itemId: string, subtaskId: string) => {
+    setItems((prev) =>
+      prev.map((item) => {
+        if (item.id !== itemId) return item
+        return {
+          ...item,
+          subtasks: item.subtasks?.map((st) =>
+            st.id === subtaskId ? { ...st, completed: !st.completed } : st
+          ),
+        }
+      })
+    )
+  }, [])
+
+  const progress: BacklogProgress = useMemo(() => {
+    const total = items.length
+    const completed = items.filter((i) => i.status === 'completed').length
+    return { total, completed, percentage: Math.round((completed / total) * 100) }
+  }, [items])
+
+  const getCategoryProgress = useCallback(
+    (categoryId: string): CategoryProgress => {
+      const categoryItems = items.filter((i) => i.category === categoryId)
+      const completed = categoryItems.filter((i) => i.status === 'completed').length
+      return { total: categoryItems.length, completed }
+    },
+    [items]
+  )
+
+  const resetToDefaults = useCallback(() => {
+    if (confirm('Backlog auf Standardwerte zuruecksetzen? Alle lokalen Aenderungen gehen verloren.')) {
+      setItems(initialBacklogItems)
+      localStorage.removeItem(STORAGE_KEY)
+    }
+  }, [])
+
+  const clearFilters = useCallback(() => {
+    setSelectedCategory(null)
+    setSelectedPriority(null)
+    setSearchQuery('')
+  }, [])
+
+  const hasActiveFilters = !!(selectedCategory || selectedPriority || searchQuery)
+
+  return {
+    items,
+    filteredItems,
+    selectedCategory,
+    setSelectedCategory,
+    selectedPriority,
+    setSelectedPriority,
+    expandedItems,
+    searchQuery,
+    setSearchQuery,
+    toggleExpand,
+    updateItemStatus,
+    toggleSubtask,
+    progress,
+    getCategoryProgress,
+    resetToDefaults,
+    clearFilters,
+    hasActiveFilters,
+  }
+}
diff --git a/admin-lehrer/app/(admin)/communication/alerts/_components/AuditTab.tsx b/admin-lehrer/app/(admin)/communication/alerts/_components/AuditTab.tsx
new file mode 100644
index 0000000..a8013e9
--- /dev/null
+++ b/admin-lehrer/app/(admin)/communication/alerts/_components/AuditTab.tsx
@@ -0,0 +1,103 @@
+'use client'
+
+export function AuditTab() {
+  return (
+    <div className="space-y-6">
+      <h3 className="text-sm font-semibold text-slate-700 uppercase tracking-wide">Audit-relevante Informationen</h3>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {/* Database Info */}
+        <div className="bg-white rounded-xl border border-slate-200 p-4">
+          <h4 className="font-semibold text-slate-900 mb-3 flex items-center gap-2">
+            <svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
+            </svg>
+            Datenbank
+          </h4>
+          <div className="space-y-2">
+            <div className="flex items-center justify-between py-2 border-b border-slate-100">
+              <span className="text-sm text-slate-600">Tabellen</span>
+              <span className="text-sm font-medium bg-green-100 text-green-800 px-2 py-0.5 rounded">4 (topics, items, rules, profiles)</span>
+            </div>
+            <div className="flex items-center justify-between py-2 border-b border-slate-100">
+              <span className="text-sm text-slate-600">Indizes</span>
+              <span className="text-sm font-medium bg-green-100 text-green-800 px-2 py-0.5 rounded">URL-Hash, Topic-ID, Status</span>
+            </div>
+            <div className="flex items-center justify-between py-2">
+              <span className="text-sm text-slate-600">Backups</span>
+              <span className="text-sm font-medium bg-green-100 text-green-800 px-2 py-0.5 rounded">PostgreSQL pg_dump</span>
+            </div>
+          </div>
+        </div>
+
+        {/* API Security */}
+        <div className="bg-white rounded-xl border border-slate-200 p-4">
+          <h4 className="font-semibold text-slate-900 mb-3 flex items-center gap-2">
+            <svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+            </svg>
+            API Sicherheit
+          </h4>
+          <div className="space-y-2">
+            <div className="flex items-center justify-between py-2 border-b border-slate-100">
+              <span className="text-sm text-slate-600">Authentifizierung</span>
+              <span className="text-sm font-medium bg-amber-100 text-amber-800 px-2 py-0.5 rounded">Bearer Token (geplant)</span>
+            </div>
+            <div className="flex items-center justify-between py-2 border-b border-slate-100">
+              <span className="text-sm text-slate-600">Rate Limiting</span>
+              <span className="text-sm font-medium bg-amber-100 text-amber-800 px-2 py-0.5 rounded">Nicht implementiert</span>
+            </div>
+            <div className="flex items-center justify-between py-2">
+              <span className="text-sm text-slate-600">Input Validation</span>
+              <span className="text-sm font-medium bg-green-100 text-green-800 px-2 py-0.5 rounded">Pydantic Models</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Logging */}
+        <div className="bg-white rounded-xl border border-slate-200 p-4">
+          <h4 className="font-semibold text-slate-900 mb-3 flex items-center gap-2">
+            <svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 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>
+            Logging & Monitoring
+          </h4>
+          <div className="space-y-2">
+            <div className="flex items-center justify-between py-2 border-b border-slate-100">
+              <span className="text-sm text-slate-600">Structured Logging</span>
+              <span className="text-sm font-medium bg-green-100 text-green-800 px-2 py-0.5 rounded">Python logging</span>
+            </div>
+            <div className="flex items-center justify-between py-2 border-b border-slate-100">
+              <span className="text-sm text-slate-600">Metriken</span>
+              <span className="text-sm font-medium bg-green-100 text-green-800 px-2 py-0.5 rounded">Stats Endpoint</span>
+            </div>
+            <div className="flex items-center justify-between py-2">
+              <span className="text-sm text-slate-600">Health Checks</span>
+              <span className="text-sm font-medium bg-green-100 text-green-800 px-2 py-0.5 rounded">/api/alerts/health</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Privacy Notes */}
+      <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+        <h4 className="text-sm font-semibold text-blue-800 mb-2">Datenschutz-Hinweise</h4>
+        <ul className="space-y-1">
+          {[
+            'Alle Daten werden in Deutschland gespeichert (PostgreSQL)',
+            'Keine personenbezogenen Daten in Alerts (nur URLs und Snippets)',
+            'LLM-Verarbeitung kann on-premise mit Ollama/vLLM erfolgen',
+            'DSGVO-konforme Datenverarbeitung',
+          ].map((text, i) => (
+            <li key={i} className="text-sm text-blue-700 flex items-start gap-2">
+              <svg className="w-4 h-4 mt-0.5 text-blue-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+              </svg>
+              {text}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/communication/alerts/_components/DashboardTab.tsx b/admin-lehrer/app/(admin)/communication/alerts/_components/DashboardTab.tsx
new file mode 100644
index 0000000..ba911cd
--- /dev/null
+++ b/admin-lehrer/app/(admin)/communication/alerts/_components/DashboardTab.tsx
@@ -0,0 +1,68 @@
+'use client'
+
+import type { AlertItem, Topic } from '../types'
+import { formatTimeAgo, getScoreBadgeClass } from '../useAlertsData'
+
+interface DashboardTabProps {
+  topics: Topic[]
+  alerts: AlertItem[]
+  error: string | null
+}
+
+export function DashboardTab({ topics, alerts, error }: DashboardTabProps) {
+  return (
+    <div className="space-y-6">
+      {/* Quick Actions */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div className="bg-slate-50 rounded-xl p-6">
+          <h3 className="font-semibold text-slate-900 mb-4">Aktive Topics</h3>
+          <div className="space-y-3">
+            {topics.slice(0, 5).map((topic) => (
+              <div key={topic.id} className="flex items-center justify-between p-3 bg-white rounded-lg border border-slate-200">
+                <div>
+                  <div className="font-medium text-slate-900">{topic.name}</div>
+                  <div className="text-xs text-slate-500">{topic.alert_count} Alerts</div>
+                </div>
+                <span className={`px-2 py-1 rounded text-xs font-semibold ${topic.is_active ? 'bg-green-100 text-green-800' : 'bg-slate-100 text-slate-600'}`}>
+                  {topic.is_active ? 'Aktiv' : 'Pausiert'}
+                </span>
+              </div>
+            ))}
+            {topics.length === 0 && (
+              <div className="text-sm text-slate-500 text-center py-4">Keine Topics konfiguriert</div>
+            )}
+          </div>
+        </div>
+
+        <div className="bg-slate-50 rounded-xl p-6">
+          <h3 className="font-semibold text-slate-900 mb-4">Letzte Alerts</h3>
+          <div className="space-y-3">
+            {alerts.slice(0, 5).map((alert) => {
+              const badge = getScoreBadgeClass(alert.relevance_score)
+              return (
+                <div key={alert.id} className="p-3 bg-white rounded-lg border border-slate-200">
+                  <div className="font-medium text-slate-900 text-sm truncate">{alert.title}</div>
+                  <div className="flex items-center gap-2 mt-1">
+                    <span className="text-xs text-slate-500">{alert.topic_name}</span>
+                    {badge && <span className={`px-2 py-0.5 rounded text-xs font-semibold ${badge.cls}`}>{badge.pct}%</span>}
+                  </div>
+                </div>
+              )
+            })}
+            {alerts.length === 0 && (
+              <div className="text-sm text-slate-500 text-center py-4">Keine Alerts vorhanden</div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {error && (
+        <div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
+          <p className="text-sm text-amber-800">
+            <strong>Hinweis:</strong> API nicht erreichbar. Demo-Daten werden angezeigt.
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/communication/alerts/_components/DocumentationTab.tsx b/admin-lehrer/app/(admin)/communication/alerts/_components/DocumentationTab.tsx
new file mode 100644
index 0000000..e8c1c2c
--- /dev/null
+++ b/admin-lehrer/app/(admin)/communication/alerts/_components/DocumentationTab.tsx
@@ -0,0 +1,214 @@
+'use client'
+
+const ARCHITECTURE_DIAGRAM = `
+┌─────────────────────────────────────────────────────────────────────┐
+│                   BreakPilot Alerts Frontend                         │
+│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐  ┌──────────┐│
+│  │  Dashboard   │  │    Inbox     │  │   Topics     │  │  Profile ││
+│  └──────────────┘  └──────────────┘  └──────────────┘  └──────────┘│
+└───────────────────────────────┬─────────────────────────────────────┘
+                                │
+                                v
+┌─────────────────────────────────────────────────────────────────────┐
+│                        Ingestion Layer                               │
+│  ┌────────────────┐  ┌────────────────┐  ┌────────────────┐         │
+│  │  RSS Fetcher   │  │  Email Parser  │  │  APScheduler   │         │
+│  └───────┬────────┘  └───────┬────────┘  └───────┬────────┘         │
+│          └───────────────────┼───────────────────┘                  │
+│  ┌──────────────────────────────────────────────────────┐           │
+│  │           Deduplication (URL-Hash + SimHash)          │           │
+│  └──────────────────────────────────────────────────────┘           │
+└─────────────────────────────────────────────────────────────────────┘
+                                │
+                                v
+┌─────────────────────────────────────────────────────────────────────┐
+│                       Processing Layer                               │
+│  ┌──────────────────────────────────────────────────────┐           │
+│  │                    Rule Engine                        │           │
+│  └──────────────────────────────────────────────────────┘           │
+│  ┌──────────────────────────────────────────────────────┐           │
+│  │              LLM Relevance Scorer                     │           │
+│  │   Output: { score, decision: KEEP/DROP/REVIEW }      │           │
+│  └──────────────────────────────────────────────────────┘           │
+└─────────────────────────────────────────────────────────────────────┘
+                                │
+                                v
+┌─────────────────────────────────────────────────────────────────────┐
+│                         Action Layer                                 │
+│  ┌────────────────┐  ┌────────────────┐  ┌────────────────┐         │
+│  │  Email Action  │  │ Webhook Action │  │  Slack Action  │         │
+│  └────────────────┘  └────────────────┘  └────────────────┘         │
+└─────────────────────────────────────────────────────────────────────┘
+                                │
+                                v
+┌─────────────────────────────────────────────────────────────────────┐
+│                        Storage Layer                                 │
+│  ┌────────────────┐  ┌────────────────┐  ┌────────────────┐         │
+│  │   PostgreSQL   │  │     Valkey     │  │   LLM Gateway  │         │
+│  └────────────────┘  └────────────────┘  └────────────────┘         │
+└─────────────────────────────────────────────────────────────────────┘`
+
+const API_ENDPOINTS = [
+  { endpoint: '/api/alerts/inbox', method: 'GET', desc: 'Inbox Items abrufen' },
+  { endpoint: '/api/alerts/ingest', method: 'POST', desc: 'Manuell Alert importieren' },
+  { endpoint: '/api/alerts/topics', method: 'GET/POST', desc: 'Topics verwalten' },
+  { endpoint: '/api/alerts/rules', method: 'GET/POST', desc: 'Regeln verwalten' },
+  { endpoint: '/api/alerts/profile', method: 'GET/PUT', desc: 'Profil abrufen/aktualisieren' },
+  { endpoint: '/api/alerts/stats', method: 'GET', desc: 'Statistiken abrufen' },
+]
+
+const RULE_OPERATORS = [
+  { op: 'contains', desc: 'Text enthaelt', example: 'title contains "Inklusion"' },
+  { op: 'not_contains', desc: 'Text enthaelt nicht', example: 'title not_contains "Werbung"' },
+  { op: 'equals', desc: 'Exakte Uebereinstimmung', example: 'status equals "new"' },
+  { op: 'regex', desc: 'Regulaerer Ausdruck', example: 'title regex "\\d{4}"' },
+  { op: 'gt / lt', desc: 'Groesser/Kleiner', example: 'relevance_score gt 0.8' },
+]
+
+const SCORING_ROWS = [
+  { decision: 'KEEP', range: '0.7 - 1.0', meaning: 'Klar relevant, in Inbox anzeigen', bgCls: 'bg-green-50', textCls: 'text-green-800' },
+  { decision: 'REVIEW', range: '0.4 - 0.7', meaning: 'Unsicher, Nutzer entscheidet', bgCls: 'bg-amber-50', textCls: 'text-amber-800' },
+  { decision: 'DROP', range: '0.0 - 0.4', meaning: 'Irrelevant, automatisch archivieren', bgCls: 'bg-red-50', textCls: 'text-red-800' },
+]
+
+const CONTACTS = [
+  { role: 'Technischer Support', addr: 'support@breakpilot.de' },
+  { role: 'Datenschutzbeauftragter', addr: 'dsb@breakpilot.de' },
+  { role: 'Dokumentation', addr: 'docs.breakpilot.de' },
+]
+
+export function DocumentationTab() {
+  return (
+    <div className="bg-white rounded-xl border border-slate-200 p-6 overflow-auto max-h-[calc(100vh-350px)]">
+      <div className="prose prose-slate max-w-none prose-headings:font-semibold prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg">
+        {/* Header */}
+        <div className="not-prose mb-8 pb-6 border-b border-slate-200">
+          <h1 className="text-2xl font-bold text-slate-900">BreakPilot Alerts Agent</h1>
+          <p className="text-sm text-slate-500 mt-1">Version: 1.0.0 | Stand: Januar 2026 | Autor: BreakPilot Development Team</p>
+        </div>
+
+        {/* Audit Box */}
+        <div className="not-prose bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
+          <h3 className="font-semibold text-blue-900 mb-2">Audit-Relevante Informationen</h3>
+          <p className="text-sm text-blue-800">
+            Dieses Dokument dient als technische Dokumentation fuer das Alert-Monitoring-System der BreakPilot Plattform.
+            Es ist fuer Audits durch Bildungstraeger und Datenschutzbeauftragte konzipiert.
+          </p>
+        </div>
+
+        {/* Ziel des Systems */}
+        <h2>Ziel des Alert-Systems</h2>
+        <p>Das System ermoeglicht automatisierte Ueberwachung von Bildungsthemen mit:</p>
+        <ul>
+          <li><strong>Google Alerts Integration</strong>: RSS-Feeds von Google Alerts automatisch abrufen</li>
+          <li><strong>RSS/Atom Feeds</strong>: Beliebige Nachrichtenquellen einbinden</li>
+          <li><strong>KI-Relevanzpruefung</strong>: Automatische Bewertung der Relevanz durch LLM</li>
+          <li><strong>Regelbasierte Filterung</strong>: Flexible Regeln fuer automatische Sortierung</li>
+          <li><strong>Multi-Channel Actions</strong>: E-Mail, Webhook, Slack Benachrichtigungen</li>
+          <li><strong>Few-Shot Learning</strong>: Profil verbessert sich durch Nutzerfeedback</li>
+        </ul>
+
+        {/* Architecture Diagram */}
+        <h2>Systemarchitektur</h2>
+        <div className="not-prose bg-slate-900 rounded-lg p-4 overflow-x-auto">
+          <pre className="text-green-400 text-xs">{ARCHITECTURE_DIAGRAM}</pre>
+        </div>
+
+        {/* API Endpoints */}
+        <h2>API Endpoints</h2>
+        <div className="not-prose overflow-x-auto">
+          <table className="min-w-full text-sm border border-slate-200 rounded-lg">
+            <thead className="bg-slate-50">
+              <tr>
+                <th className="px-4 py-2 text-left font-semibold text-slate-700 border-b">Endpoint</th>
+                <th className="px-4 py-2 text-left font-semibold text-slate-700 border-b">Methode</th>
+                <th className="px-4 py-2 text-left font-semibold text-slate-700 border-b">Beschreibung</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-200">
+              {API_ENDPOINTS.map((row) => (
+                <tr key={row.endpoint}>
+                  <td className="px-4 py-2 font-mono text-xs">{row.endpoint}</td>
+                  <td className="px-4 py-2">{row.method}</td>
+                  <td className="px-4 py-2 text-slate-600">{row.desc}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+
+        {/* Rule Engine */}
+        <h2>Rule Engine - Operatoren</h2>
+        <div className="not-prose overflow-x-auto">
+          <table className="min-w-full text-sm border border-slate-200 rounded-lg">
+            <thead className="bg-slate-50">
+              <tr>
+                <th className="px-4 py-2 text-left font-semibold text-slate-700 border-b">Operator</th>
+                <th className="px-4 py-2 text-left font-semibold text-slate-700 border-b">Beschreibung</th>
+                <th className="px-4 py-2 text-left font-semibold text-slate-700 border-b">Beispiel</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-200">
+              {RULE_OPERATORS.map((row) => (
+                <tr key={row.op}>
+                  <td className="px-4 py-2 font-mono text-xs">{row.op}</td>
+                  <td className="px-4 py-2">{row.desc}</td>
+                  <td className="px-4 py-2 text-slate-600">{row.example}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+
+        {/* Scoring */}
+        <h2>LLM Relevanz-Scoring</h2>
+        <div className="not-prose overflow-x-auto">
+          <table className="min-w-full text-sm border border-slate-200 rounded-lg">
+            <thead className="bg-slate-50">
+              <tr>
+                <th className="px-4 py-2 text-left font-semibold text-slate-700 border-b">Entscheidung</th>
+                <th className="px-4 py-2 text-left font-semibold text-slate-700 border-b">Score-Bereich</th>
+                <th className="px-4 py-2 text-left font-semibold text-slate-700 border-b">Bedeutung</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-200">
+              {SCORING_ROWS.map((row) => (
+                <tr key={row.decision} className={row.bgCls}>
+                  <td className={`px-4 py-2 font-semibold ${row.textCls}`}>{row.decision}</td>
+                  <td className="px-4 py-2">{row.range}</td>
+                  <td className="px-4 py-2">{row.meaning}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+
+        {/* Contact */}
+        <h2>Kontakt & Support</h2>
+        <div className="not-prose overflow-x-auto">
+          <table className="min-w-full text-sm border border-slate-200 rounded-lg">
+            <thead className="bg-slate-50">
+              <tr>
+                <th className="px-4 py-2 text-left font-semibold text-slate-700 border-b">Kontakt</th>
+                <th className="px-4 py-2 text-left font-semibold text-slate-700 border-b">Adresse</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-200">
+              {CONTACTS.map((row) => (
+                <tr key={row.role}>
+                  <td className="px-4 py-2">{row.role}</td>
+                  <td className="px-4 py-2">{row.addr}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+
+        {/* Footer */}
+        <div className="not-prose mt-8 pt-6 border-t border-slate-200 text-sm text-slate-500">
+          <p>Dokumentation erstellt: Januar 2026 | Version: 1.0.0</p>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/communication/alerts/_components/InboxTab.tsx b/admin-lehrer/app/(admin)/communication/alerts/_components/InboxTab.tsx
new file mode 100644
index 0000000..dd7c6a1
--- /dev/null
+++ b/admin-lehrer/app/(admin)/communication/alerts/_components/InboxTab.tsx
@@ -0,0 +1,82 @@
+'use client'
+
+import type { AlertItem } from '../types'
+import { formatTimeAgo, getScoreBadgeClass, getDecisionBadgeClass } from '../useAlertsData'
+
+interface InboxTabProps {
+  filteredAlerts: AlertItem[]
+  inboxFilter: string
+  setInboxFilter: (filter: string) => void
+}
+
+export function InboxTab({ filteredAlerts, inboxFilter, setInboxFilter }: InboxTabProps) {
+  return (
+    <div className="space-y-4">
+      {/* Filters */}
+      <div className="flex gap-2 flex-wrap">
+        {['all', 'new', 'keep', 'review'].map((filter) => (
+          <button
+            key={filter}
+            onClick={() => setInboxFilter(filter)}
+            className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
+              inboxFilter === filter
+                ? 'bg-green-600 text-white'
+                : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
+            }`}
+          >
+            {filter === 'all' && 'Alle'}
+            {filter === 'new' && 'Neu'}
+            {filter === 'keep' && 'Relevant'}
+            {filter === 'review' && 'Pruefung'}
+          </button>
+        ))}
+      </div>
+
+      {/* Alerts Table */}
+      <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
+        <table className="w-full">
+          <thead className="bg-slate-50 border-b border-slate-200">
+            <tr>
+              <th className="text-left p-4 text-xs font-semibold text-slate-500 uppercase">Alert</th>
+              <th className="text-left p-4 text-xs font-semibold text-slate-500 uppercase">Topic</th>
+              <th className="text-left p-4 text-xs font-semibold text-slate-500 uppercase">Score</th>
+              <th className="text-left p-4 text-xs font-semibold text-slate-500 uppercase">Decision</th>
+              <th className="text-left p-4 text-xs font-semibold text-slate-500 uppercase">Zeit</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-slate-100">
+            {filteredAlerts.map((alert) => {
+              const scoreBadge = getScoreBadgeClass(alert.relevance_score)
+              const decBadge = getDecisionBadgeClass(alert.relevance_decision)
+              return (
+                <tr key={alert.id} className="hover:bg-slate-50">
+                  <td className="p-4">
+                    <a href={alert.url} target="_blank" rel="noopener noreferrer" className="font-medium text-slate-900 hover:text-green-600">
+                      {alert.title}
+                    </a>
+                    <p className="text-sm text-slate-500 truncate max-w-md">{alert.snippet}</p>
+                  </td>
+                  <td className="p-4 text-sm text-slate-600">{alert.topic_name}</td>
+                  <td className="p-4">
+                    {scoreBadge && <span className={`px-2 py-0.5 rounded text-xs font-semibold ${scoreBadge.cls}`}>{scoreBadge.pct}%</span>}
+                  </td>
+                  <td className="p-4">
+                    {decBadge && <span className={`px-2 py-0.5 rounded text-xs font-semibold uppercase ${decBadge.cls}`}>{decBadge.decision}</span>}
+                  </td>
+                  <td className="p-4 text-sm text-slate-500">{formatTimeAgo(alert.fetched_at)}</td>
+                </tr>
+              )
+            })}
+            {filteredAlerts.length === 0 && (
+              <tr>
+                <td colSpan={5} className="p-8 text-center text-slate-500">
+                  Keine Alerts gefunden
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/communication/alerts/_components/ProfileTab.tsx b/admin-lehrer/app/(admin)/communication/alerts/_components/ProfileTab.tsx
new file mode 100644
index 0000000..16ef5a3
--- /dev/null
+++ b/admin-lehrer/app/(admin)/communication/alerts/_components/ProfileTab.tsx
@@ -0,0 +1,78 @@
+'use client'
+
+import type { Profile } from '../types'
+
+interface ProfileTabProps {
+  profile: Profile | null
+}
+
+export function ProfileTab({ profile }: ProfileTabProps) {
+  return (
+    <div className="max-w-2xl space-y-6">
+      <div className="bg-white rounded-xl border border-slate-200 p-6">
+        <h3 className="font-semibold text-slate-900 mb-4">Relevanzprofil</h3>
+
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-2">
+              Prioritaeten (wichtige Themen)
+            </label>
+            <textarea
+              className="w-full p-3 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500"
+              rows={4}
+              defaultValue={profile?.priorities?.join('\n') || ''}
+              placeholder="Ein Thema pro Zeile..."
+            />
+            <p className="text-xs text-slate-500 mt-1">Alerts zu diesen Themen werden hoeher bewertet.</p>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-2">
+              Ausschluesse (unerwuenschte Themen)
+            </label>
+            <textarea
+              className="w-full p-3 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500"
+              rows={4}
+              defaultValue={profile?.exclusions?.join('\n') || ''}
+              placeholder="Ein Thema pro Zeile..."
+            />
+            <p className="text-xs text-slate-500 mt-1">Alerts zu diesen Themen werden niedriger bewertet.</p>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-2">
+                Schwellenwert KEEP
+              </label>
+              <select
+                className="w-full p-3 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500"
+                defaultValue={profile?.policies?.keep_threshold || 0.7}
+              >
+                <option value={0.8}>80% (sehr streng)</option>
+                <option value={0.7}>70% (empfohlen)</option>
+                <option value={0.6}>60% (weniger streng)</option>
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-2">
+                Schwellenwert DROP
+              </label>
+              <select
+                className="w-full p-3 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500"
+                defaultValue={profile?.policies?.drop_threshold || 0.3}
+              >
+                <option value={0.4}>40% (strenger)</option>
+                <option value={0.3}>30% (empfohlen)</option>
+                <option value={0.2}>20% (lockerer)</option>
+              </select>
+            </div>
+          </div>
+
+          <button className="px-4 py-2 bg-green-600 text-white rounded-lg text-sm font-medium hover:bg-green-700">
+            Profil speichern
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/communication/alerts/_components/RulesTab.tsx b/admin-lehrer/app/(admin)/communication/alerts/_components/RulesTab.tsx
new file mode 100644
index 0000000..f67d0a3
--- /dev/null
+++ b/admin-lehrer/app/(admin)/communication/alerts/_components/RulesTab.tsx
@@ -0,0 +1,62 @@
+'use client'
+
+import type { Rule } from '../types'
+
+interface RulesTabProps {
+  rules: Rule[]
+}
+
+export function RulesTab({ rules }: RulesTabProps) {
+  return (
+    <div className="space-y-4">
+      <div className="flex justify-between items-center">
+        <h3 className="font-semibold text-slate-900">Filterregeln</h3>
+        <button className="px-4 py-2 bg-green-600 text-white rounded-lg text-sm font-medium hover:bg-green-700">
+          + Regel erstellen
+        </button>
+      </div>
+
+      <div className="bg-white rounded-xl border border-slate-200 divide-y divide-slate-100">
+        {rules.map((rule) => (
+          <div key={rule.id} className="p-4 flex items-center gap-4">
+            <div className="text-slate-400 cursor-grab">
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+              </svg>
+            </div>
+            <div className="flex-1">
+              <div className="font-medium text-slate-900">{rule.name}</div>
+              <div className="text-sm text-slate-500">
+                Wenn: {rule.conditions[0]?.field} {rule.conditions[0]?.operator} &quot;{rule.conditions[0]?.value}&quot;
+              </div>
+            </div>
+            <span className={`px-3 py-1 rounded text-xs font-semibold uppercase ${
+              rule.action_type === 'keep' ? 'bg-green-100 text-green-800' :
+              rule.action_type === 'drop' ? 'bg-red-100 text-red-800' :
+              rule.action_type === 'email' ? 'bg-blue-100 text-blue-800' :
+              'bg-purple-100 text-purple-800'
+            }`}>
+              {rule.action_type}
+            </span>
+            <div
+              className={`w-12 h-6 rounded-full relative cursor-pointer transition-colors ${
+                rule.is_active ? 'bg-green-500' : 'bg-slate-300'
+              }`}
+            >
+              <div
+                className={`absolute w-5 h-5 bg-white rounded-full top-0.5 transition-all shadow ${
+                  rule.is_active ? 'left-6' : 'left-0.5'
+                }`}
+              />
+            </div>
+          </div>
+        ))}
+        {rules.length === 0 && (
+          <div className="p-8 text-center text-slate-500">
+            Keine Regeln konfiguriert
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/communication/alerts/_components/StatsOverview.tsx b/admin-lehrer/app/(admin)/communication/alerts/_components/StatsOverview.tsx
new file mode 100644
index 0000000..dceae1a
--- /dev/null
+++ b/admin-lehrer/app/(admin)/communication/alerts/_components/StatsOverview.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import type { Stats } from '../types'
+
+interface StatsOverviewProps {
+  stats: Stats | null
+}
+
+export function StatsOverview({ stats }: StatsOverviewProps) {
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+      <div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
+        <div className="text-3xl font-bold text-slate-900">{stats?.total_alerts || 0}</div>
+        <div className="text-sm text-slate-500">Alerts gesamt</div>
+      </div>
+      <div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
+        <div className="text-3xl font-bold text-blue-600">{stats?.new_alerts || 0}</div>
+        <div className="text-sm text-slate-500">Neue Alerts</div>
+      </div>
+      <div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
+        <div className="text-3xl font-bold text-green-600">{stats?.kept_alerts || 0}</div>
+        <div className="text-sm text-slate-500">Relevant</div>
+      </div>
+      <div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
+        <div className="text-3xl font-bold text-amber-600">{stats?.review_alerts || 0}</div>
+        <div className="text-sm text-slate-500">Zur Pruefung</div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/communication/alerts/_components/TopicsTab.tsx b/admin-lehrer/app/(admin)/communication/alerts/_components/TopicsTab.tsx
new file mode 100644
index 0000000..8edf96c
--- /dev/null
+++ b/admin-lehrer/app/(admin)/communication/alerts/_components/TopicsTab.tsx
@@ -0,0 +1,54 @@
+'use client'
+
+import type { Topic } from '../types'
+import { formatTimeAgo } from '../useAlertsData'
+
+interface TopicsTabProps {
+  topics: Topic[]
+}
+
+export function TopicsTab({ topics }: TopicsTabProps) {
+  return (
+    <div className="space-y-4">
+      <div className="flex justify-between items-center">
+        <h3 className="font-semibold text-slate-900">Feed Topics</h3>
+        <button className="px-4 py-2 bg-green-600 text-white rounded-lg text-sm font-medium hover:bg-green-700">
+          + Topic hinzufuegen
+        </button>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {topics.map((topic) => (
+          <div key={topic.id} className="bg-white rounded-xl border border-slate-200 p-4">
+            <div className="flex justify-between items-start mb-3">
+              <div className="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
+                <svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 5c7.18 0 13 5.82 13 13M6 11a7 7 0 017 7m-6 0a1 1 0 11-2 0 1 1 0 012 0z" />
+                </svg>
+              </div>
+              <span className={`px-2 py-1 rounded text-xs font-semibold ${topic.is_active ? 'bg-green-100 text-green-800' : 'bg-slate-100 text-slate-600'}`}>
+                {topic.is_active ? 'Aktiv' : 'Pausiert'}
+              </span>
+            </div>
+            <h4 className="font-semibold text-slate-900">{topic.name}</h4>
+            <p className="text-sm text-slate-500 truncate">{topic.feed_url}</p>
+            <div className="flex justify-between items-center mt-4 pt-4 border-t border-slate-100">
+              <div className="text-sm">
+                <span className="font-semibold text-slate-900">{topic.alert_count}</span>
+                <span className="text-slate-500"> Alerts</span>
+              </div>
+              <div className="text-xs text-slate-500">
+                {formatTimeAgo(topic.last_fetched_at)}
+              </div>
+            </div>
+          </div>
+        ))}
+        {topics.length === 0 && (
+          <div className="col-span-full text-center py-8 text-slate-500">
+            Keine Topics konfiguriert
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/communication/alerts/page.tsx b/admin-lehrer/app/(admin)/communication/alerts/page.tsx
index 3d73dd3..82ab2d4 100644
--- a/admin-lehrer/app/(admin)/communication/alerts/page.tsx
+++ b/admin-lehrer/app/(admin)/communication/alerts/page.tsx
@@ -7,264 +7,34 @@
  * Provides inbox management, topic configuration, rule builder, and relevance profiles
  */
 
-import { useEffect, useState, useCallback } from 'react'
+import { useState } from 'react'
 import { PagePurpose } from '@/components/common/PagePurpose'
+import type { TabId } from './types'
+import { useAlertsData } from './useAlertsData'
+import { StatsOverview } from './_components/StatsOverview'
+import { DashboardTab } from './_components/DashboardTab'
+import { InboxTab } from './_components/InboxTab'
+import { TopicsTab } from './_components/TopicsTab'
+import { RulesTab } from './_components/RulesTab'
+import { ProfileTab } from './_components/ProfileTab'
+import { AuditTab } from './_components/AuditTab'
+import { DocumentationTab } from './_components/DocumentationTab'
 
-// Types
-interface AlertItem {
-  id: string
-  title: string
-  url: string
-  snippet: string
-  topic_name: string
-  relevance_score: number | null
-  relevance_decision: string | null
-  status: string
-  fetched_at: string
-  published_at: string | null
-  matched_rule: string | null
-  tags: string[]
-}
-
-interface Topic {
-  id: string
-  name: string
-  feed_url: string
-  feed_type: string
-  is_active: boolean
-  fetch_interval_minutes: number
-  last_fetched_at: string | null
-  alert_count: number
-}
-
-interface Rule {
-  id: string
-  name: string
-  topic_id: string | null
-  conditions: Array<{
-    field: string
-    operator: string
-    value: string | number
-  }>
-  action_type: string
-  action_config: Record<string, unknown>
-  priority: number
-  is_active: boolean
-}
-
-interface Profile {
-  priorities: string[]
-  exclusions: string[]
-  positive_examples: Array<{ title: string; url: string }>
-  negative_examples: Array<{ title: string; url: string }>
-  policies: {
-    keep_threshold: number
-    drop_threshold: number
-  }
-}
-
-interface Stats {
-  total_alerts: number
-  new_alerts: number
-  kept_alerts: number
-  review_alerts: number
-  dropped_alerts: number
-  total_topics: number
-  active_topics: number
-  total_rules: number
-}
-
-// Tab type
-type TabId = 'dashboard' | 'inbox' | 'topics' | 'rules' | 'profile' | 'audit' | 'documentation'
+const TABS: { id: TabId; label: string; hasBadge?: boolean }[] = [
+  { id: 'dashboard', label: 'Dashboard' },
+  { id: 'inbox', label: 'Inbox', hasBadge: true },
+  { id: 'topics', label: 'Topics' },
+  { id: 'rules', label: 'Regeln' },
+  { id: 'profile', label: 'Profil' },
+  { id: 'audit', label: 'Audit' },
+  { id: 'documentation', label: 'Dokumentation' },
+]
 
 export default function AlertsPage() {
   const [activeTab, setActiveTab] = useState<TabId>('dashboard')
-  const [stats, setStats] = useState<Stats | null>(null)
-  const [alerts, setAlerts] = useState<AlertItem[]>([])
-  const [topics, setTopics] = useState<Topic[]>([])
-  const [rules, setRules] = useState<Rule[]>([])
-  const [profile, setProfile] = useState<Profile | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-  const [inboxFilter, setInboxFilter] = useState<string>('all')
+  const data = useAlertsData()
 
-  const API_BASE = '/api/alerts'
-
-  const fetchData = useCallback(async () => {
-    try {
-      const [statsRes, alertsRes, topicsRes, rulesRes, profileRes] = await Promise.all([
-        fetch(`${API_BASE}/stats`),
-        fetch(`${API_BASE}/inbox?limit=50`),
-        fetch(`${API_BASE}/topics`),
-        fetch(`${API_BASE}/rules`),
-        fetch(`${API_BASE}/profile`),
-      ])
-
-      if (statsRes.ok) setStats(await statsRes.json())
-      if (alertsRes.ok) {
-        const data = await alertsRes.json()
-        setAlerts(data.items || [])
-      }
-      if (topicsRes.ok) {
-        const data = await topicsRes.json()
-        setTopics(data.topics || data.items || [])
-      }
-      if (rulesRes.ok) {
-        const data = await rulesRes.json()
-        setRules(data.rules || data.items || [])
-      }
-      if (profileRes.ok) setProfile(await profileRes.json())
-
-      setError(null)
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Verbindungsfehler')
-      // Set demo data
-      setStats({
-        total_alerts: 147,
-        new_alerts: 23,
-        kept_alerts: 89,
-        review_alerts: 12,
-        dropped_alerts: 23,
-        total_topics: 5,
-        active_topics: 4,
-        total_rules: 8,
-      })
-      setAlerts([
-        {
-          id: 'demo_1',
-          title: 'Neue Studie zur digitalen Bildung an Schulen',
-          url: 'https://example.com/artikel1',
-          snippet: 'Eine aktuelle Studie zeigt, dass digitale Lernmittel den Lernerfolg steigern koennen...',
-          topic_name: 'Digitale Bildung',
-          relevance_score: 0.85,
-          relevance_decision: 'KEEP',
-          status: 'new',
-          fetched_at: new Date().toISOString(),
-          published_at: null,
-          matched_rule: null,
-          tags: ['bildung', 'digital'],
-        },
-        {
-          id: 'demo_2',
-          title: 'Inklusion: Fortbildungen fuer Lehrkraefte',
-          url: 'https://example.com/artikel2',
-          snippet: 'Das Kultusministerium bietet neue Fortbildungsangebote zum Thema Inklusion an...',
-          topic_name: 'Inklusion',
-          relevance_score: 0.72,
-          relevance_decision: 'KEEP',
-          status: 'new',
-          fetched_at: new Date(Date.now() - 3600000).toISOString(),
-          published_at: null,
-          matched_rule: null,
-          tags: ['inklusion'],
-        },
-      ])
-      setTopics([
-        {
-          id: 'topic_1',
-          name: 'Digitale Bildung',
-          feed_url: 'https://google.com/alerts/feeds/123',
-          feed_type: 'rss',
-          is_active: true,
-          fetch_interval_minutes: 60,
-          last_fetched_at: new Date().toISOString(),
-          alert_count: 47,
-        },
-        {
-          id: 'topic_2',
-          name: 'Inklusion',
-          feed_url: 'https://google.com/alerts/feeds/456',
-          feed_type: 'rss',
-          is_active: true,
-          fetch_interval_minutes: 60,
-          last_fetched_at: new Date(Date.now() - 1800000).toISOString(),
-          alert_count: 32,
-        },
-      ])
-      setRules([
-        {
-          id: 'rule_1',
-          name: 'Stellenanzeigen ausschliessen',
-          topic_id: null,
-          conditions: [{ field: 'title', operator: 'contains', value: 'Stellenangebot' }],
-          action_type: 'drop',
-          action_config: {},
-          priority: 10,
-          is_active: true,
-        },
-      ])
-      setProfile({
-        priorities: ['Inklusion', 'digitale Bildung'],
-        exclusions: ['Stellenanzeigen', 'Werbung'],
-        positive_examples: [],
-        negative_examples: [],
-        policies: { keep_threshold: 0.7, drop_threshold: 0.3 },
-      })
-    } finally {
-      setLoading(false)
-    }
-  }, [])
-
-  useEffect(() => {
-    fetchData()
-  }, [fetchData])
-
-  const formatTimeAgo = (dateStr: string | null) => {
-    if (!dateStr) return '-'
-    const date = new Date(dateStr)
-    const now = new Date()
-    const diffMs = now.getTime() - date.getTime()
-    const diffMins = Math.floor(diffMs / 60000)
-
-    if (diffMins < 1) return 'gerade eben'
-    if (diffMins < 60) return `vor ${diffMins} Min.`
-    if (diffMins < 1440) return `vor ${Math.floor(diffMins / 60)} Std.`
-    return `vor ${Math.floor(diffMins / 1440)} Tagen`
-  }
-
-  const getScoreBadge = (score: number | null) => {
-    if (score === null) return null
-    const pct = Math.round(score * 100)
-    let cls = 'bg-slate-100 text-slate-600'
-    if (pct >= 70) cls = 'bg-green-100 text-green-800'
-    else if (pct >= 40) cls = 'bg-amber-100 text-amber-800'
-    else cls = 'bg-red-100 text-red-800'
-    return <span className={`px-2 py-0.5 rounded text-xs font-semibold ${cls}`}>{pct}%</span>
-  }
-
-  const getDecisionBadge = (decision: string | null) => {
-    if (!decision) return null
-    const styles: Record<string, string> = {
-      KEEP: 'bg-green-100 text-green-800',
-      REVIEW: 'bg-amber-100 text-amber-800',
-      DROP: 'bg-red-100 text-red-800',
-    }
-    return (
-      <span className={`px-2 py-0.5 rounded text-xs font-semibold uppercase ${styles[decision] || 'bg-slate-100'}`}>
-        {decision}
-      </span>
-    )
-  }
-
-  const filteredAlerts = alerts.filter((alert) => {
-    if (inboxFilter === 'all') return true
-    if (inboxFilter === 'new') return alert.status === 'new'
-    if (inboxFilter === 'keep') return alert.relevance_decision === 'KEEP'
-    if (inboxFilter === 'review') return alert.relevance_decision === 'REVIEW'
-    return true
-  })
-
-  const tabs: { id: TabId; label: string; badge?: number }[] = [
-    { id: 'dashboard', label: 'Dashboard' },
-    { id: 'inbox', label: 'Inbox', badge: stats?.new_alerts || 0 },
-    { id: 'topics', label: 'Topics' },
-    { id: 'rules', label: 'Regeln' },
-    { id: 'profile', label: 'Profil' },
-    { id: 'audit', label: 'Audit' },
-    { id: 'documentation', label: 'Dokumentation' },
-  ]
-
-  if (loading) {
+  if (data.loading) {
     return (
       <div className="flex items-center justify-center h-64">
         <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-green-600" />
@@ -274,7 +44,6 @@ export default function AlertsPage() {
 
   return (
     <div>
-      {/* Page Purpose */}
       <PagePurpose
         title="Alerts Monitoring"
         purpose="Google Alerts & Feed-Ueberwachung mit KI-gestuetzter Relevanzpruefung. Verwalten Sie Topics, konfigurieren Sie Filterregeln und nutzen Sie LLM-basiertes Scoring fuer automatische Kategorisierung."
@@ -291,620 +60,52 @@ export default function AlertsPage() {
         defaultCollapsed={false}
       />
 
-      {/* Stats Overview */}
-      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
-        <div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
-          <div className="text-3xl font-bold text-slate-900">{stats?.total_alerts || 0}</div>
-          <div className="text-sm text-slate-500">Alerts gesamt</div>
-        </div>
-        <div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
-          <div className="text-3xl font-bold text-blue-600">{stats?.new_alerts || 0}</div>
-          <div className="text-sm text-slate-500">Neue Alerts</div>
-        </div>
-        <div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
-          <div className="text-3xl font-bold text-green-600">{stats?.kept_alerts || 0}</div>
-          <div className="text-sm text-slate-500">Relevant</div>
-        </div>
-        <div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
-          <div className="text-3xl font-bold text-amber-600">{stats?.review_alerts || 0}</div>
-          <div className="text-sm text-slate-500">Zur Pruefung</div>
-        </div>
-      </div>
+      <StatsOverview stats={data.stats} />
 
       {/* Tab Navigation */}
       <div className="bg-white rounded-lg shadow mb-6">
         <div className="border-b border-slate-200 px-4">
           <nav className="flex gap-4 overflow-x-auto">
-            {tabs.map((tab) => (
-              <button
-                key={tab.id}
-                onClick={() => setActiveTab(tab.id)}
-                className={`pb-3 pt-4 px-1 text-sm font-medium border-b-2 transition-colors flex items-center gap-2 whitespace-nowrap ${
-                  activeTab === tab.id
-                    ? 'border-green-600 text-green-600'
-                    : 'border-transparent text-slate-500 hover:text-slate-700'
-                }`}
-              >
-                {tab.label}
-                {tab.badge !== undefined && tab.badge > 0 && (
-                  <span className="px-2 py-0.5 rounded-full text-xs font-semibold bg-red-500 text-white">
-                    {tab.badge}
-                  </span>
-                )}
-              </button>
-            ))}
+            {TABS.map((tab) => {
+              const badge = tab.hasBadge ? (data.stats?.new_alerts || 0) : 0
+              return (
+                <button
+                  key={tab.id}
+                  onClick={() => setActiveTab(tab.id)}
+                  className={`pb-3 pt-4 px-1 text-sm font-medium border-b-2 transition-colors flex items-center gap-2 whitespace-nowrap ${
+                    activeTab === tab.id
+                      ? 'border-green-600 text-green-600'
+                      : 'border-transparent text-slate-500 hover:text-slate-700'
+                  }`}
+                >
+                  {tab.label}
+                  {badge > 0 && (
+                    <span className="px-2 py-0.5 rounded-full text-xs font-semibold bg-red-500 text-white">
+                      {badge}
+                    </span>
+                  )}
+                </button>
+              )
+            })}
           </nav>
         </div>
 
         <div className="p-6">
-          {/* Dashboard Tab */}
           {activeTab === 'dashboard' && (
-            <div className="space-y-6">
-              {/* Quick Actions */}
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <div className="bg-slate-50 rounded-xl p-6">
-                  <h3 className="font-semibold text-slate-900 mb-4">Aktive Topics</h3>
-                  <div className="space-y-3">
-                    {topics.slice(0, 5).map((topic) => (
-                      <div key={topic.id} className="flex items-center justify-between p-3 bg-white rounded-lg border border-slate-200">
-                        <div>
-                          <div className="font-medium text-slate-900">{topic.name}</div>
-                          <div className="text-xs text-slate-500">{topic.alert_count} Alerts</div>
-                        </div>
-                        <span className={`px-2 py-1 rounded text-xs font-semibold ${topic.is_active ? 'bg-green-100 text-green-800' : 'bg-slate-100 text-slate-600'}`}>
-                          {topic.is_active ? 'Aktiv' : 'Pausiert'}
-                        </span>
-                      </div>
-                    ))}
-                    {topics.length === 0 && (
-                      <div className="text-sm text-slate-500 text-center py-4">Keine Topics konfiguriert</div>
-                    )}
-                  </div>
-                </div>
-
-                <div className="bg-slate-50 rounded-xl p-6">
-                  <h3 className="font-semibold text-slate-900 mb-4">Letzte Alerts</h3>
-                  <div className="space-y-3">
-                    {alerts.slice(0, 5).map((alert) => (
-                      <div key={alert.id} className="p-3 bg-white rounded-lg border border-slate-200">
-                        <div className="font-medium text-slate-900 text-sm truncate">{alert.title}</div>
-                        <div className="flex items-center gap-2 mt-1">
-                          <span className="text-xs text-slate-500">{alert.topic_name}</span>
-                          {getScoreBadge(alert.relevance_score)}
-                        </div>
-                      </div>
-                    ))}
-                    {alerts.length === 0 && (
-                      <div className="text-sm text-slate-500 text-center py-4">Keine Alerts vorhanden</div>
-                    )}
-                  </div>
-                </div>
-              </div>
-
-              {error && (
-                <div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
-                  <p className="text-sm text-amber-800">
-                    <strong>Hinweis:</strong> API nicht erreichbar. Demo-Daten werden angezeigt.
-                  </p>
-                </div>
-              )}
-            </div>
+            <DashboardTab topics={data.topics} alerts={data.alerts} error={data.error} />
           )}
-
-          {/* Inbox Tab */}
           {activeTab === 'inbox' && (
-            <div className="space-y-4">
-              {/* Filters */}
-              <div className="flex gap-2 flex-wrap">
-                {['all', 'new', 'keep', 'review'].map((filter) => (
-                  <button
-                    key={filter}
-                    onClick={() => setInboxFilter(filter)}
-                    className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
-                      inboxFilter === filter
-                        ? 'bg-green-600 text-white'
-                        : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
-                    }`}
-                  >
-                    {filter === 'all' && 'Alle'}
-                    {filter === 'new' && 'Neu'}
-                    {filter === 'keep' && 'Relevant'}
-                    {filter === 'review' && 'Pruefung'}
-                  </button>
-                ))}
-              </div>
-
-              {/* Alerts Table */}
-              <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
-                <table className="w-full">
-                  <thead className="bg-slate-50 border-b border-slate-200">
-                    <tr>
-                      <th className="text-left p-4 text-xs font-semibold text-slate-500 uppercase">Alert</th>
-                      <th className="text-left p-4 text-xs font-semibold text-slate-500 uppercase">Topic</th>
-                      <th className="text-left p-4 text-xs font-semibold text-slate-500 uppercase">Score</th>
-                      <th className="text-left p-4 text-xs font-semibold text-slate-500 uppercase">Decision</th>
-                      <th className="text-left p-4 text-xs font-semibold text-slate-500 uppercase">Zeit</th>
-                    </tr>
-                  </thead>
-                  <tbody className="divide-y divide-slate-100">
-                    {filteredAlerts.map((alert) => (
-                      <tr key={alert.id} className="hover:bg-slate-50">
-                        <td className="p-4">
-                          <a href={alert.url} target="_blank" rel="noopener noreferrer" className="font-medium text-slate-900 hover:text-green-600">
-                            {alert.title}
-                          </a>
-                          <p className="text-sm text-slate-500 truncate max-w-md">{alert.snippet}</p>
-                        </td>
-                        <td className="p-4 text-sm text-slate-600">{alert.topic_name}</td>
-                        <td className="p-4">{getScoreBadge(alert.relevance_score)}</td>
-                        <td className="p-4">{getDecisionBadge(alert.relevance_decision)}</td>
-                        <td className="p-4 text-sm text-slate-500">{formatTimeAgo(alert.fetched_at)}</td>
-                      </tr>
-                    ))}
-                    {filteredAlerts.length === 0 && (
-                      <tr>
-                        <td colSpan={5} className="p-8 text-center text-slate-500">
-                          Keine Alerts gefunden
-                        </td>
-                      </tr>
-                    )}
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          )}
-
-          {/* Topics Tab */}
-          {activeTab === 'topics' && (
-            <div className="space-y-4">
-              <div className="flex justify-between items-center">
-                <h3 className="font-semibold text-slate-900">Feed Topics</h3>
-                <button className="px-4 py-2 bg-green-600 text-white rounded-lg text-sm font-medium hover:bg-green-700">
-                  + Topic hinzufuegen
-                </button>
-              </div>
-
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                {topics.map((topic) => (
-                  <div key={topic.id} className="bg-white rounded-xl border border-slate-200 p-4">
-                    <div className="flex justify-between items-start mb-3">
-                      <div className="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
-                        <svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 5c7.18 0 13 5.82 13 13M6 11a7 7 0 017 7m-6 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                        </svg>
-                      </div>
-                      <span className={`px-2 py-1 rounded text-xs font-semibold ${topic.is_active ? 'bg-green-100 text-green-800' : 'bg-slate-100 text-slate-600'}`}>
-                        {topic.is_active ? 'Aktiv' : 'Pausiert'}
-                      </span>
-                    </div>
-                    <h4 className="font-semibold text-slate-900">{topic.name}</h4>
-                    <p className="text-sm text-slate-500 truncate">{topic.feed_url}</p>
-                    <div className="flex justify-between items-center mt-4 pt-4 border-t border-slate-100">
-                      <div className="text-sm">
-                        <span className="font-semibold text-slate-900">{topic.alert_count}</span>
-                        <span className="text-slate-500"> Alerts</span>
-                      </div>
-                      <div className="text-xs text-slate-500">
-                        {formatTimeAgo(topic.last_fetched_at)}
-                      </div>
-                    </div>
-                  </div>
-                ))}
-                {topics.length === 0 && (
-                  <div className="col-span-full text-center py-8 text-slate-500">
-                    Keine Topics konfiguriert
-                  </div>
-                )}
-              </div>
-            </div>
-          )}
-
-          {/* Rules Tab */}
-          {activeTab === 'rules' && (
-            <div className="space-y-4">
-              <div className="flex justify-between items-center">
-                <h3 className="font-semibold text-slate-900">Filterregeln</h3>
-                <button className="px-4 py-2 bg-green-600 text-white rounded-lg text-sm font-medium hover:bg-green-700">
-                  + Regel erstellen
-                </button>
-              </div>
-
-              <div className="bg-white rounded-xl border border-slate-200 divide-y divide-slate-100">
-                {rules.map((rule) => (
-                  <div key={rule.id} className="p-4 flex items-center gap-4">
-                    <div className="text-slate-400 cursor-grab">
-                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
-                      </svg>
-                    </div>
-                    <div className="flex-1">
-                      <div className="font-medium text-slate-900">{rule.name}</div>
-                      <div className="text-sm text-slate-500">
-                        Wenn: {rule.conditions[0]?.field} {rule.conditions[0]?.operator} &quot;{rule.conditions[0]?.value}&quot;
-                      </div>
-                    </div>
-                    <span className={`px-3 py-1 rounded text-xs font-semibold uppercase ${
-                      rule.action_type === 'keep' ? 'bg-green-100 text-green-800' :
-                      rule.action_type === 'drop' ? 'bg-red-100 text-red-800' :
-                      rule.action_type === 'email' ? 'bg-blue-100 text-blue-800' :
-                      'bg-purple-100 text-purple-800'
-                    }`}>
-                      {rule.action_type}
-                    </span>
-                    <div
-                      className={`w-12 h-6 rounded-full relative cursor-pointer transition-colors ${
-                        rule.is_active ? 'bg-green-500' : 'bg-slate-300'
-                      }`}
-                    >
-                      <div
-                        className={`absolute w-5 h-5 bg-white rounded-full top-0.5 transition-all shadow ${
-                          rule.is_active ? 'left-6' : 'left-0.5'
-                        }`}
-                      />
-                    </div>
-                  </div>
-                ))}
-                {rules.length === 0 && (
-                  <div className="p-8 text-center text-slate-500">
-                    Keine Regeln konfiguriert
-                  </div>
-                )}
-              </div>
-            </div>
-          )}
-
-          {/* Profile Tab */}
-          {activeTab === 'profile' && (
-            <div className="max-w-2xl space-y-6">
-              <div className="bg-white rounded-xl border border-slate-200 p-6">
-                <h3 className="font-semibold text-slate-900 mb-4">Relevanzprofil</h3>
-
-                <div className="space-y-4">
-                  <div>
-                    <label className="block text-sm font-medium text-slate-700 mb-2">
-                      Prioritaeten (wichtige Themen)
-                    </label>
-                    <textarea
-                      className="w-full p-3 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500"
-                      rows={4}
-                      defaultValue={profile?.priorities?.join('\n') || ''}
-                      placeholder="Ein Thema pro Zeile..."
-                    />
-                    <p className="text-xs text-slate-500 mt-1">Alerts zu diesen Themen werden hoeher bewertet.</p>
-                  </div>
-
-                  <div>
-                    <label className="block text-sm font-medium text-slate-700 mb-2">
-                      Ausschluesse (unerwuenschte Themen)
-                    </label>
-                    <textarea
-                      className="w-full p-3 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500"
-                      rows={4}
-                      defaultValue={profile?.exclusions?.join('\n') || ''}
-                      placeholder="Ein Thema pro Zeile..."
-                    />
-                    <p className="text-xs text-slate-500 mt-1">Alerts zu diesen Themen werden niedriger bewertet.</p>
-                  </div>
-
-                  <div className="grid grid-cols-2 gap-4">
-                    <div>
-                      <label className="block text-sm font-medium text-slate-700 mb-2">
-                        Schwellenwert KEEP
-                      </label>
-                      <select
-                        className="w-full p-3 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500"
-                        defaultValue={profile?.policies?.keep_threshold || 0.7}
-                      >
-                        <option value={0.8}>80% (sehr streng)</option>
-                        <option value={0.7}>70% (empfohlen)</option>
-                        <option value={0.6}>60% (weniger streng)</option>
-                      </select>
-                    </div>
-                    <div>
-                      <label className="block text-sm font-medium text-slate-700 mb-2">
-                        Schwellenwert DROP
-                      </label>
-                      <select
-                        className="w-full p-3 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500"
-                        defaultValue={profile?.policies?.drop_threshold || 0.3}
-                      >
-                        <option value={0.4}>40% (strenger)</option>
-                        <option value={0.3}>30% (empfohlen)</option>
-                        <option value={0.2}>20% (lockerer)</option>
-                      </select>
-                    </div>
-                  </div>
-
-                  <button className="px-4 py-2 bg-green-600 text-white rounded-lg text-sm font-medium hover:bg-green-700">
-                    Profil speichern
-                  </button>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {/* Audit Tab */}
-          {activeTab === 'audit' && (
-            <div className="space-y-6">
-              <h3 className="text-sm font-semibold text-slate-700 uppercase tracking-wide">Audit-relevante Informationen</h3>
-
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                {/* Database Info */}
-                <div className="bg-white rounded-xl border border-slate-200 p-4">
-                  <h4 className="font-semibold text-slate-900 mb-3 flex items-center gap-2">
-                    <svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
-                    </svg>
-                    Datenbank
-                  </h4>
-                  <div className="space-y-2">
-                    <div className="flex items-center justify-between py-2 border-b border-slate-100">
-                      <span className="text-sm text-slate-600">Tabellen</span>
-                      <span className="text-sm font-medium bg-green-100 text-green-800 px-2 py-0.5 rounded">4 (topics, items, rules, profiles)</span>
-                    </div>
-                    <div className="flex items-center justify-between py-2 border-b border-slate-100">
-                      <span className="text-sm text-slate-600">Indizes</span>
-                      <span className="text-sm font-medium bg-green-100 text-green-800 px-2 py-0.5 rounded">URL-Hash, Topic-ID, Status</span>
-                    </div>
-                    <div className="flex items-center justify-between py-2">
-                      <span className="text-sm text-slate-600">Backups</span>
-                      <span className="text-sm font-medium bg-green-100 text-green-800 px-2 py-0.5 rounded">PostgreSQL pg_dump</span>
-                    </div>
-                  </div>
-                </div>
-
-                {/* API Security */}
-                <div className="bg-white rounded-xl border border-slate-200 p-4">
-                  <h4 className="font-semibold text-slate-900 mb-3 flex items-center gap-2">
-                    <svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-                    </svg>
-                    API Sicherheit
-                  </h4>
-                  <div className="space-y-2">
-                    <div className="flex items-center justify-between py-2 border-b border-slate-100">
-                      <span className="text-sm text-slate-600">Authentifizierung</span>
-                      <span className="text-sm font-medium bg-amber-100 text-amber-800 px-2 py-0.5 rounded">Bearer Token (geplant)</span>
-                    </div>
-                    <div className="flex items-center justify-between py-2 border-b border-slate-100">
-                      <span className="text-sm text-slate-600">Rate Limiting</span>
-                      <span className="text-sm font-medium bg-amber-100 text-amber-800 px-2 py-0.5 rounded">Nicht implementiert</span>
-                    </div>
-                    <div className="flex items-center justify-between py-2">
-                      <span className="text-sm text-slate-600">Input Validation</span>
-                      <span className="text-sm font-medium bg-green-100 text-green-800 px-2 py-0.5 rounded">Pydantic Models</span>
-                    </div>
-                  </div>
-                </div>
-
-                {/* Logging */}
-                <div className="bg-white rounded-xl border border-slate-200 p-4">
-                  <h4 className="font-semibold text-slate-900 mb-3 flex items-center gap-2">
-                    <svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 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>
-                    Logging & Monitoring
-                  </h4>
-                  <div className="space-y-2">
-                    <div className="flex items-center justify-between py-2 border-b border-slate-100">
-                      <span className="text-sm text-slate-600">Structured Logging</span>
-                      <span className="text-sm font-medium bg-green-100 text-green-800 px-2 py-0.5 rounded">Python logging</span>
-                    </div>
-                    <div className="flex items-center justify-between py-2 border-b border-slate-100">
-                      <span className="text-sm text-slate-600">Metriken</span>
-                      <span className="text-sm font-medium bg-green-100 text-green-800 px-2 py-0.5 rounded">Stats Endpoint</span>
-                    </div>
-                    <div className="flex items-center justify-between py-2">
-                      <span className="text-sm text-slate-600">Health Checks</span>
-                      <span className="text-sm font-medium bg-green-100 text-green-800 px-2 py-0.5 rounded">/api/alerts/health</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              {/* Privacy Notes */}
-              <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
-                <h4 className="text-sm font-semibold text-blue-800 mb-2">Datenschutz-Hinweise</h4>
-                <ul className="space-y-1">
-                  <li className="text-sm text-blue-700 flex items-start gap-2">
-                    <svg className="w-4 h-4 mt-0.5 text-blue-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-                    </svg>
-                    Alle Daten werden in Deutschland gespeichert (PostgreSQL)
-                  </li>
-                  <li className="text-sm text-blue-700 flex items-start gap-2">
-                    <svg className="w-4 h-4 mt-0.5 text-blue-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-                    </svg>
-                    Keine personenbezogenen Daten in Alerts (nur URLs und Snippets)
-                  </li>
-                  <li className="text-sm text-blue-700 flex items-start gap-2">
-                    <svg className="w-4 h-4 mt-0.5 text-blue-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-                    </svg>
-                    LLM-Verarbeitung kann on-premise mit Ollama/vLLM erfolgen
-                  </li>
-                  <li className="text-sm text-blue-700 flex items-start gap-2">
-                    <svg className="w-4 h-4 mt-0.5 text-blue-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-                    </svg>
-                    DSGVO-konforme Datenverarbeitung
-                  </li>
-                </ul>
-              </div>
-            </div>
-          )}
-
-          {/* Documentation Tab */}
-          {activeTab === 'documentation' && (
-            <div className="bg-white rounded-xl border border-slate-200 p-6 overflow-auto max-h-[calc(100vh-350px)]">
-              <div className="prose prose-slate max-w-none prose-headings:font-semibold prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg">
-                {/* Header */}
-                <div className="not-prose mb-8 pb-6 border-b border-slate-200">
-                  <h1 className="text-2xl font-bold text-slate-900">BreakPilot Alerts Agent</h1>
-                  <p className="text-sm text-slate-500 mt-1">Version: 1.0.0 | Stand: Januar 2026 | Autor: BreakPilot Development Team</p>
-                </div>
-
-                {/* Audit Box */}
-                <div className="not-prose bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
-                  <h3 className="font-semibold text-blue-900 mb-2">Audit-Relevante Informationen</h3>
-                  <p className="text-sm text-blue-800">
-                    Dieses Dokument dient als technische Dokumentation fuer das Alert-Monitoring-System der BreakPilot Plattform.
-                    Es ist fuer Audits durch Bildungstraeger und Datenschutzbeauftragte konzipiert.
-                  </p>
-                </div>
-
-                {/* Ziel des Systems */}
-                <h2>Ziel des Alert-Systems</h2>
-                <p>Das System ermoeglicht automatisierte Ueberwachung von Bildungsthemen mit:</p>
-                <ul>
-                  <li><strong>Google Alerts Integration</strong>: RSS-Feeds von Google Alerts automatisch abrufen</li>
-                  <li><strong>RSS/Atom Feeds</strong>: Beliebige Nachrichtenquellen einbinden</li>
-                  <li><strong>KI-Relevanzpruefung</strong>: Automatische Bewertung der Relevanz durch LLM</li>
-                  <li><strong>Regelbasierte Filterung</strong>: Flexible Regeln fuer automatische Sortierung</li>
-                  <li><strong>Multi-Channel Actions</strong>: E-Mail, Webhook, Slack Benachrichtigungen</li>
-                  <li><strong>Few-Shot Learning</strong>: Profil verbessert sich durch Nutzerfeedback</li>
-                </ul>
-
-                {/* Architecture Diagram */}
-                <h2>Systemarchitektur</h2>
-                <div className="not-prose bg-slate-900 rounded-lg p-4 overflow-x-auto">
-                  <pre className="text-green-400 text-xs">{`
-┌─────────────────────────────────────────────────────────────────────┐
-│                   BreakPilot Alerts Frontend                         │
-│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐  ┌──────────┐│
-│  │  Dashboard   │  │    Inbox     │  │   Topics     │  │  Profile ││
-│  └──────────────┘  └──────────────┘  └──────────────┘  └──────────┘│
-└───────────────────────────────┬─────────────────────────────────────┘
-                                │
-                                v
-┌─────────────────────────────────────────────────────────────────────┐
-│                        Ingestion Layer                               │
-│  ┌────────────────┐  ┌────────────────┐  ┌────────────────┐         │
-│  │  RSS Fetcher   │  │  Email Parser  │  │  APScheduler   │         │
-│  └───────┬────────┘  └───────┬────────┘  └───────┬────────┘         │
-│          └───────────────────┼───────────────────┘                  │
-│  ┌──────────────────────────────────────────────────────┐           │
-│  │           Deduplication (URL-Hash + SimHash)          │           │
-│  └──────────────────────────────────────────────────────┘           │
-└─────────────────────────────────────────────────────────────────────┘
-                                │
-                                v
-┌─────────────────────────────────────────────────────────────────────┐
-│                       Processing Layer                               │
-│  ┌──────────────────────────────────────────────────────┐           │
-│  │                    Rule Engine                        │           │
-│  └──────────────────────────────────────────────────────┘           │
-│  ┌──────────────────────────────────────────────────────┐           │
-│  │              LLM Relevance Scorer                     │           │
-│  │   Output: { score, decision: KEEP/DROP/REVIEW }      │           │
-│  └──────────────────────────────────────────────────────┘           │
-└─────────────────────────────────────────────────────────────────────┘
-                                │
-                                v
-┌─────────────────────────────────────────────────────────────────────┐
-│                         Action Layer                                 │
-│  ┌────────────────┐  ┌────────────────┐  ┌────────────────┐         │
-│  │  Email Action  │  │ Webhook Action │  │  Slack Action  │         │
-│  └────────────────┘  └────────────────┘  └────────────────┘         │
-└─────────────────────────────────────────────────────────────────────┘
-                                │
-                                v
-┌─────────────────────────────────────────────────────────────────────┐
-│                        Storage Layer                                 │
-│  ┌────────────────┐  ┌────────────────┐  ┌────────────────┐         │
-│  │   PostgreSQL   │  │     Valkey     │  │   LLM Gateway  │         │
-│  └────────────────┘  └────────────────┘  └────────────────┘         │
-└─────────────────────────────────────────────────────────────────────┘`}</pre>
-                </div>
-
-                {/* API Endpoints */}
-                <h2>API Endpoints</h2>
-                <div className="not-prose overflow-x-auto">
-                  <table className="min-w-full text-sm border border-slate-200 rounded-lg">
-                    <thead className="bg-slate-50">
-                      <tr>
-                        <th className="px-4 py-2 text-left font-semibold text-slate-700 border-b">Endpoint</th>
-                        <th className="px-4 py-2 text-left font-semibold text-slate-700 border-b">Methode</th>
-                        <th className="px-4 py-2 text-left font-semibold text-slate-700 border-b">Beschreibung</th>
-                      </tr>
-                    </thead>
-                    <tbody className="divide-y divide-slate-200">
-                      <tr><td className="px-4 py-2 font-mono text-xs">/api/alerts/inbox</td><td className="px-4 py-2">GET</td><td className="px-4 py-2 text-slate-600">Inbox Items abrufen</td></tr>
-                      <tr><td className="px-4 py-2 font-mono text-xs">/api/alerts/ingest</td><td className="px-4 py-2">POST</td><td className="px-4 py-2 text-slate-600">Manuell Alert importieren</td></tr>
-                      <tr><td className="px-4 py-2 font-mono text-xs">/api/alerts/topics</td><td className="px-4 py-2">GET/POST</td><td className="px-4 py-2 text-slate-600">Topics verwalten</td></tr>
-                      <tr><td className="px-4 py-2 font-mono text-xs">/api/alerts/rules</td><td className="px-4 py-2">GET/POST</td><td className="px-4 py-2 text-slate-600">Regeln verwalten</td></tr>
-                      <tr><td className="px-4 py-2 font-mono text-xs">/api/alerts/profile</td><td className="px-4 py-2">GET/PUT</td><td className="px-4 py-2 text-slate-600">Profil abrufen/aktualisieren</td></tr>
-                      <tr><td className="px-4 py-2 font-mono text-xs">/api/alerts/stats</td><td className="px-4 py-2">GET</td><td className="px-4 py-2 text-slate-600">Statistiken abrufen</td></tr>
-                    </tbody>
-                  </table>
-                </div>
-
-                {/* Rule Engine */}
-                <h2>Rule Engine - Operatoren</h2>
-                <div className="not-prose overflow-x-auto">
-                  <table className="min-w-full text-sm border border-slate-200 rounded-lg">
-                    <thead className="bg-slate-50">
-                      <tr>
-                        <th className="px-4 py-2 text-left font-semibold text-slate-700 border-b">Operator</th>
-                        <th className="px-4 py-2 text-left font-semibold text-slate-700 border-b">Beschreibung</th>
-                        <th className="px-4 py-2 text-left font-semibold text-slate-700 border-b">Beispiel</th>
-                      </tr>
-                    </thead>
-                    <tbody className="divide-y divide-slate-200">
-                      <tr><td className="px-4 py-2 font-mono text-xs">contains</td><td className="px-4 py-2">Text enthaelt</td><td className="px-4 py-2 text-slate-600">title contains &quot;Inklusion&quot;</td></tr>
-                      <tr><td className="px-4 py-2 font-mono text-xs">not_contains</td><td className="px-4 py-2">Text enthaelt nicht</td><td className="px-4 py-2 text-slate-600">title not_contains &quot;Werbung&quot;</td></tr>
-                      <tr><td className="px-4 py-2 font-mono text-xs">equals</td><td className="px-4 py-2">Exakte Uebereinstimmung</td><td className="px-4 py-2 text-slate-600">status equals &quot;new&quot;</td></tr>
-                      <tr><td className="px-4 py-2 font-mono text-xs">regex</td><td className="px-4 py-2">Regulaerer Ausdruck</td><td className="px-4 py-2 text-slate-600">title regex &quot;\d&#123;4&#125;&quot;</td></tr>
-                      <tr><td className="px-4 py-2 font-mono text-xs">gt / lt</td><td className="px-4 py-2">Groesser/Kleiner</td><td className="px-4 py-2 text-slate-600">relevance_score gt 0.8</td></tr>
-                    </tbody>
-                  </table>
-                </div>
-
-                {/* Scoring */}
-                <h2>LLM Relevanz-Scoring</h2>
-                <div className="not-prose overflow-x-auto">
-                  <table className="min-w-full text-sm border border-slate-200 rounded-lg">
-                    <thead className="bg-slate-50">
-                      <tr>
-                        <th className="px-4 py-2 text-left font-semibold text-slate-700 border-b">Entscheidung</th>
-                        <th className="px-4 py-2 text-left font-semibold text-slate-700 border-b">Score-Bereich</th>
-                        <th className="px-4 py-2 text-left font-semibold text-slate-700 border-b">Bedeutung</th>
-                      </tr>
-                    </thead>
-                    <tbody className="divide-y divide-slate-200">
-                      <tr className="bg-green-50"><td className="px-4 py-2 font-semibold text-green-800">KEEP</td><td className="px-4 py-2">0.7 - 1.0</td><td className="px-4 py-2">Klar relevant, in Inbox anzeigen</td></tr>
-                      <tr className="bg-amber-50"><td className="px-4 py-2 font-semibold text-amber-800">REVIEW</td><td className="px-4 py-2">0.4 - 0.7</td><td className="px-4 py-2">Unsicher, Nutzer entscheidet</td></tr>
-                      <tr className="bg-red-50"><td className="px-4 py-2 font-semibold text-red-800">DROP</td><td className="px-4 py-2">0.0 - 0.4</td><td className="px-4 py-2">Irrelevant, automatisch archivieren</td></tr>
-                    </tbody>
-                  </table>
-                </div>
-
-                {/* Contact */}
-                <h2>Kontakt & Support</h2>
-                <div className="not-prose overflow-x-auto">
-                  <table className="min-w-full text-sm border border-slate-200 rounded-lg">
-                    <thead className="bg-slate-50">
-                      <tr>
-                        <th className="px-4 py-2 text-left font-semibold text-slate-700 border-b">Kontakt</th>
-                        <th className="px-4 py-2 text-left font-semibold text-slate-700 border-b">Adresse</th>
-                      </tr>
-                    </thead>
-                    <tbody className="divide-y divide-slate-200">
-                      <tr><td className="px-4 py-2">Technischer Support</td><td className="px-4 py-2">support@breakpilot.de</td></tr>
-                      <tr><td className="px-4 py-2">Datenschutzbeauftragter</td><td className="px-4 py-2">dsb@breakpilot.de</td></tr>
-                      <tr><td className="px-4 py-2">Dokumentation</td><td className="px-4 py-2">docs.breakpilot.de</td></tr>
-                    </tbody>
-                  </table>
-                </div>
-
-                {/* Footer */}
-                <div className="not-prose mt-8 pt-6 border-t border-slate-200 text-sm text-slate-500">
-                  <p>Dokumentation erstellt: Januar 2026 | Version: 1.0.0</p>
-                </div>
-              </div>
-            </div>
+            <InboxTab
+              filteredAlerts={data.filteredAlerts}
+              inboxFilter={data.inboxFilter}
+              setInboxFilter={data.setInboxFilter}
+            />
           )}
+          {activeTab === 'topics' && <TopicsTab topics={data.topics} />}
+          {activeTab === 'rules' && <RulesTab rules={data.rules} />}
+          {activeTab === 'profile' && <ProfileTab profile={data.profile} />}
+          {activeTab === 'audit' && <AuditTab />}
+          {activeTab === 'documentation' && <DocumentationTab />}
         </div>
       </div>
     </div>
diff --git a/admin-lehrer/app/(admin)/communication/alerts/types.ts b/admin-lehrer/app/(admin)/communication/alerts/types.ts
new file mode 100644
index 0000000..ca7cfa6
--- /dev/null
+++ b/admin-lehrer/app/(admin)/communication/alerts/types.ts
@@ -0,0 +1,68 @@
+/**
+ * Types for Alerts Monitoring Admin Page
+ */
+
+export interface AlertItem {
+  id: string
+  title: string
+  url: string
+  snippet: string
+  topic_name: string
+  relevance_score: number | null
+  relevance_decision: string | null
+  status: string
+  fetched_at: string
+  published_at: string | null
+  matched_rule: string | null
+  tags: string[]
+}
+
+export interface Topic {
+  id: string
+  name: string
+  feed_url: string
+  feed_type: string
+  is_active: boolean
+  fetch_interval_minutes: number
+  last_fetched_at: string | null
+  alert_count: number
+}
+
+export interface Rule {
+  id: string
+  name: string
+  topic_id: string | null
+  conditions: Array<{
+    field: string
+    operator: string
+    value: string | number
+  }>
+  action_type: string
+  action_config: Record<string, unknown>
+  priority: number
+  is_active: boolean
+}
+
+export interface Profile {
+  priorities: string[]
+  exclusions: string[]
+  positive_examples: Array<{ title: string; url: string }>
+  negative_examples: Array<{ title: string; url: string }>
+  policies: {
+    keep_threshold: number
+    drop_threshold: number
+  }
+}
+
+export interface Stats {
+  total_alerts: number
+  new_alerts: number
+  kept_alerts: number
+  review_alerts: number
+  dropped_alerts: number
+  total_topics: number
+  active_topics: number
+  total_rules: number
+}
+
+export type TabId = 'dashboard' | 'inbox' | 'topics' | 'rules' | 'profile' | 'audit' | 'documentation'
diff --git a/admin-lehrer/app/(admin)/communication/alerts/useAlertsData.ts b/admin-lehrer/app/(admin)/communication/alerts/useAlertsData.ts
new file mode 100644
index 0000000..11c2925
--- /dev/null
+++ b/admin-lehrer/app/(admin)/communication/alerts/useAlertsData.ts
@@ -0,0 +1,191 @@
+'use client'
+
+import { useEffect, useState, useCallback } from 'react'
+import type { AlertItem, Topic, Rule, Profile, Stats } from './types'
+
+const API_BASE = '/api/alerts'
+
+export function useAlertsData() {
+  const [stats, setStats] = useState<Stats | null>(null)
+  const [alerts, setAlerts] = useState<AlertItem[]>([])
+  const [topics, setTopics] = useState<Topic[]>([])
+  const [rules, setRules] = useState<Rule[]>([])
+  const [profile, setProfile] = useState<Profile | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [inboxFilter, setInboxFilter] = useState<string>('all')
+
+  const fetchData = useCallback(async () => {
+    try {
+      const [statsRes, alertsRes, topicsRes, rulesRes, profileRes] = await Promise.all([
+        fetch(`${API_BASE}/stats`),
+        fetch(`${API_BASE}/inbox?limit=50`),
+        fetch(`${API_BASE}/topics`),
+        fetch(`${API_BASE}/rules`),
+        fetch(`${API_BASE}/profile`),
+      ])
+
+      if (statsRes.ok) setStats(await statsRes.json())
+      if (alertsRes.ok) {
+        const data = await alertsRes.json()
+        setAlerts(data.items || [])
+      }
+      if (topicsRes.ok) {
+        const data = await topicsRes.json()
+        setTopics(data.topics || data.items || [])
+      }
+      if (rulesRes.ok) {
+        const data = await rulesRes.json()
+        setRules(data.rules || data.items || [])
+      }
+      if (profileRes.ok) setProfile(await profileRes.json())
+
+      setError(null)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Verbindungsfehler')
+      setStats({
+        total_alerts: 147,
+        new_alerts: 23,
+        kept_alerts: 89,
+        review_alerts: 12,
+        dropped_alerts: 23,
+        total_topics: 5,
+        active_topics: 4,
+        total_rules: 8,
+      })
+      setAlerts([
+        {
+          id: 'demo_1',
+          title: 'Neue Studie zur digitalen Bildung an Schulen',
+          url: 'https://example.com/artikel1',
+          snippet: 'Eine aktuelle Studie zeigt, dass digitale Lernmittel den Lernerfolg steigern koennen...',
+          topic_name: 'Digitale Bildung',
+          relevance_score: 0.85,
+          relevance_decision: 'KEEP',
+          status: 'new',
+          fetched_at: new Date().toISOString(),
+          published_at: null,
+          matched_rule: null,
+          tags: ['bildung', 'digital'],
+        },
+        {
+          id: 'demo_2',
+          title: 'Inklusion: Fortbildungen fuer Lehrkraefte',
+          url: 'https://example.com/artikel2',
+          snippet: 'Das Kultusministerium bietet neue Fortbildungsangebote zum Thema Inklusion an...',
+          topic_name: 'Inklusion',
+          relevance_score: 0.72,
+          relevance_decision: 'KEEP',
+          status: 'new',
+          fetched_at: new Date(Date.now() - 3600000).toISOString(),
+          published_at: null,
+          matched_rule: null,
+          tags: ['inklusion'],
+        },
+      ])
+      setTopics([
+        {
+          id: 'topic_1',
+          name: 'Digitale Bildung',
+          feed_url: 'https://google.com/alerts/feeds/123',
+          feed_type: 'rss',
+          is_active: true,
+          fetch_interval_minutes: 60,
+          last_fetched_at: new Date().toISOString(),
+          alert_count: 47,
+        },
+        {
+          id: 'topic_2',
+          name: 'Inklusion',
+          feed_url: 'https://google.com/alerts/feeds/456',
+          feed_type: 'rss',
+          is_active: true,
+          fetch_interval_minutes: 60,
+          last_fetched_at: new Date(Date.now() - 1800000).toISOString(),
+          alert_count: 32,
+        },
+      ])
+      setRules([
+        {
+          id: 'rule_1',
+          name: 'Stellenanzeigen ausschliessen',
+          topic_id: null,
+          conditions: [{ field: 'title', operator: 'contains', value: 'Stellenangebot' }],
+          action_type: 'drop',
+          action_config: {},
+          priority: 10,
+          is_active: true,
+        },
+      ])
+      setProfile({
+        priorities: ['Inklusion', 'digitale Bildung'],
+        exclusions: ['Stellenanzeigen', 'Werbung'],
+        positive_examples: [],
+        negative_examples: [],
+        policies: { keep_threshold: 0.7, drop_threshold: 0.3 },
+      })
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    fetchData()
+  }, [fetchData])
+
+  const filteredAlerts = alerts.filter((alert) => {
+    if (inboxFilter === 'all') return true
+    if (inboxFilter === 'new') return alert.status === 'new'
+    if (inboxFilter === 'keep') return alert.relevance_decision === 'KEEP'
+    if (inboxFilter === 'review') return alert.relevance_decision === 'REVIEW'
+    return true
+  })
+
+  return {
+    stats,
+    alerts,
+    topics,
+    rules,
+    profile,
+    loading,
+    error,
+    inboxFilter,
+    setInboxFilter,
+    filteredAlerts,
+  }
+}
+
+// --- Helper functions (pure, no hooks) ---
+
+export function formatTimeAgo(dateStr: string | null): string {
+  if (!dateStr) return '-'
+  const date = new Date(dateStr)
+  const now = new Date()
+  const diffMs = now.getTime() - date.getTime()
+  const diffMins = Math.floor(diffMs / 60000)
+
+  if (diffMins < 1) return 'gerade eben'
+  if (diffMins < 60) return `vor ${diffMins} Min.`
+  if (diffMins < 1440) return `vor ${Math.floor(diffMins / 60)} Std.`
+  return `vor ${Math.floor(diffMins / 1440)} Tagen`
+}
+
+export function getScoreBadgeClass(score: number | null): { pct: number; cls: string } | null {
+  if (score === null) return null
+  const pct = Math.round(score * 100)
+  let cls = 'bg-slate-100 text-slate-600'
+  if (pct >= 70) cls = 'bg-green-100 text-green-800'
+  else if (pct >= 40) cls = 'bg-amber-100 text-amber-800'
+  else cls = 'bg-red-100 text-red-800'
+  return { pct, cls }
+}
+
+export function getDecisionBadgeClass(decision: string | null): { decision: string; cls: string } | null {
+  if (!decision) return null
+  const styles: Record<string, string> = {
+    KEEP: 'bg-green-100 text-green-800',
+    REVIEW: 'bg-amber-100 text-amber-800',
+    DROP: 'bg-red-100 text-red-800',
+  }
+  return { decision, cls: styles[decision] || 'bg-slate-100' }
+}
diff --git a/admin-lehrer/app/(admin)/communication/mail/_components/AISettingsTab.tsx b/admin-lehrer/app/(admin)/communication/mail/_components/AISettingsTab.tsx
new file mode 100644
index 0000000..9184f14
--- /dev/null
+++ b/admin-lehrer/app/(admin)/communication/mail/_components/AISettingsTab.tsx
@@ -0,0 +1,120 @@
+'use client'
+
+import { useState } from 'react'
+
+export 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-blue-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-blue-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-blue-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 fuer 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: 'Landesschulbehoerde', priority: 'Hoch' },
+            { domain: '@nibis.de', type: 'NiBiS', priority: 'Mittel' },
+            { domain: '@schultraeger.de', type: 'Schultraeger', 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>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/communication/mail/_components/AccountsTab.tsx b/admin-lehrer/app/(admin)/communication/mail/_components/AccountsTab.tsx
new file mode 100644
index 0000000..64a7498
--- /dev/null
+++ b/admin-lehrer/app/(admin)/communication/mail/_components/AccountsTab.tsx
@@ -0,0 +1,355 @@
+'use client'
+
+import { useState } from 'react'
+import type { EmailAccount } from '../types'
+import { API_BASE } from '../types'
+
+interface AccountsTabProps {
+  accounts: EmailAccount[]
+  loading: boolean
+  onRefresh: () => void
+}
+
+const statusColors: Record<EmailAccount['status'], string> = {
+  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: Record<EmailAccount['status'], string> = {
+  active: 'Aktiv',
+  inactive: 'Inaktiv',
+  error: 'Fehler',
+  syncing: 'Synchronisiert...',
+}
+
+export function AccountsTab({ accounts, loading, onRefresh }: AccountsTabProps) {
+  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 {
+      alert('Verbindungsfehler')
+    }
+  }
+
+  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-blue-600 rounded-lg hover:bg-blue-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 hinzufuegen
+        </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-blue-600"></div>
+        </div>
+      )}
+
+      {/* Accounts Grid */}
+      {!loading && (
+        <div className="grid gap-4">
+          {accounts.length === 0 ? (
+            <EmptyAccountsState />
+          ) : (
+            accounts.map((account) => (
+              <AccountCard
+                key={account.id}
+                account={account}
+                onTestConnection={testConnection}
+              />
+            ))
+          )}
+        </div>
+      )}
+
+      {/* Add Account Modal */}
+      {showAddModal && (
+        <AddAccountModal
+          onClose={() => setShowAddModal(false)}
+          onSuccess={() => { setShowAddModal(false); onRefresh() }}
+        />
+      )}
+    </div>
+  )
+}
+
+function EmptyAccountsState() {
+  return (
+    <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">Fuegen Sie Ihr erstes E-Mail-Konto hinzu.</p>
+    </div>
+  )
+}
+
+function AccountCard({
+  account,
+  onTestConnection
+}: {
+  account: EmailAccount
+  onTestConnection: (id: string) => void
+}) {
+  return (
+    <div 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-blue-100 rounded-lg flex items-center justify-center">
+            <svg className="w-6 h-6 text-blue-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={() => onTestConnection(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>
+  )
+}
+
+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 Hinzufuegen des Kontos')
+      }
+    } catch {
+      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 hinzufuegen</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-blue-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-blue-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-blue-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-blue-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-blue-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-blue-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-blue-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-blue-500"
+              />
+              <p className="text-xs text-slate-500 mt-1">
+                Das Passwort wird verschluesselt 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-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50"
+            >
+              {submitting ? 'Speichern...' : 'Konto hinzufuegen'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/communication/mail/_components/AuditLogTab.tsx b/admin-lehrer/app/(admin)/communication/mail/_components/AuditLogTab.tsx
new file mode 100644
index 0000000..9926692
--- /dev/null
+++ b/admin-lehrer/app/(admin)/communication/mail/_components/AuditLogTab.tsx
@@ -0,0 +1,56 @@
+'use client'
+
+import { useState } from 'react'
+
+const actionLabels: Record<string, string> = {
+  account_created: 'Konto erstellt',
+  email_analyzed: 'E-Mail analysiert',
+  task_created: 'Aufgabe erstellt',
+  sync_completed: 'Sync abgeschlossen',
+}
+
+export function AuditLogTab() {
+  const [logs] = useState([
+    { id: '1', action: 'account_created', user: 'admin@breakpilot.de', timestamp: new Date().toISOString(), details: 'Konto schulleitung@example.de hinzugefuegt' },
+    { 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' },
+  ])
+
+  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>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/communication/mail/_components/OverviewTab.tsx b/admin-lehrer/app/(admin)/communication/mail/_components/OverviewTab.tsx
new file mode 100644
index 0000000..5871f20
--- /dev/null
+++ b/admin-lehrer/app/(admin)/communication/mail/_components/OverviewTab.tsx
@@ -0,0 +1,171 @@
+'use client'
+
+import type { MailStats, SyncStatus } from '../types'
+import { API_BASE } from '../types'
+
+interface OverviewTabProps {
+  stats: MailStats | null
+  syncStatus: SyncStatus | null
+  loading: boolean
+  onRefresh: () => void
+}
+
+export function OverviewTab({ stats, syncStatus, loading, onRefresh }: OverviewTabProps) {
+  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-Uebersicht</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-blue-600 rounded-lg hover:bg-blue-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-blue-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="Ueberfaellig"
+              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>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/communication/mail/_components/TemplatesTab.tsx b/admin-lehrer/app/(admin)/communication/mail/_components/TemplatesTab.tsx
new file mode 100644
index 0000000..9467ad8
--- /dev/null
+++ b/admin-lehrer/app/(admin)/communication/mail/_components/TemplatesTab.tsx
@@ -0,0 +1,55 @@
+'use client'
+
+import { useState } from 'react'
+
+export function TemplatesTab() {
+  const [templates] = useState([
+    { id: '1', name: 'Eingangsbestaetigung', category: 'Standard', usageCount: 45 },
+    { id: '2', name: 'Terminbestaetigung', 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-blue-600 rounded-lg hover:bg-blue-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-blue-600 hover:text-blue-800 text-sm font-medium">Bearbeiten</button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/communication/mail/page.tsx b/admin-lehrer/app/(admin)/communication/mail/page.tsx
index fe10103..9536d57 100644
--- a/admin-lehrer/app/(admin)/communication/mail/page.tsx
+++ b/admin-lehrer/app/(admin)/communication/mail/page.tsx
@@ -8,105 +8,20 @@
  * and configuring AI analysis settings.
  */
 
-import { useState, useEffect, useCallback } from 'react'
+import { useState } from 'react'
 import Link from 'next/link'
 import { PagePurpose } from '@/components/common/PagePurpose'
+import { useMailData } from './useMailData'
+import { tabs, type TabId } from './types'
+import { OverviewTab } from './_components/OverviewTab'
+import { AccountsTab } from './_components/AccountsTab'
+import { AISettingsTab } from './_components/AISettingsTab'
+import { TemplatesTab } from './_components/TemplatesTab'
+import { AuditLogTab } from './_components/AuditLogTab'
 
-// API Base URL for backend operations (accounts, sync, etc.)
-const API_BASE = process.env.NEXT_PUBLIC_KLAUSUR_SERVICE_URL || 'http://macmini: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 }[] = [
-  { id: 'overview', name: 'Uebersicht' },
-  { id: 'accounts', name: 'Konten' },
-  { id: 'ai-settings', name: 'KI-Einstellungen' },
-  { id: 'templates', name: 'Vorlagen' },
-  { id: 'logs', name: 'Audit-Log' },
-]
-
-// 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 via our proxy API (avoids CORS/mixed-content issues)
-      const response = await fetch('/api/admin/mail')
-
-      if (response.ok) {
-        const data = await response.json()
-        setStats(data.stats)
-        setAccounts(data.accounts)
-        setSyncStatus(data.syncStatus)
-        setError(null)
-      } else {
-        const errorData = await response.json().catch(() => ({}))
-        throw new Error(errorData.details || `API returned ${response.status}`)
-      }
-    } catch (err) {
-      console.error('Failed to fetch mail data:', err)
-      setError('Verbindung zum Mail-Service (Mailpit) fehlgeschlagen. Laeuft Mailpit auf Port 8025?')
-    } 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])
+  const { stats, accounts, syncStatus, loading, error, fetchData } = useMailData()
 
   return (
     <div>
@@ -190,757 +105,9 @@ export default function MailAdminPage() {
           onRefresh={fetchData}
         />
       )}
-      {activeTab === 'ai-settings' && (
-        <AISettingsTab />
-      )}
-      {activeTab === 'templates' && (
-        <TemplatesTab />
-      )}
-      {activeTab === 'logs' && (
-        <AuditLogTab />
-      )}
-    </div>
-  )
-}
-
-// ============================================================================
-// 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-Uebersicht</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-blue-600 rounded-lg hover:bg-blue-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-blue-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="Ueberfaellig"
-              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-blue-600 rounded-lg hover:bg-blue-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 hinzufuegen
-        </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-blue-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">Fuegen 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-blue-100 rounded-lg flex items-center justify-center">
-                      <svg className="w-6 h-6 text-blue-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 Hinzufuegen 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 hinzufuegen</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-blue-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-blue-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-blue-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-blue-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-blue-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-blue-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-blue-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-blue-500"
-              />
-              <p className="text-xs text-slate-500 mt-1">
-                Das Passwort wird verschluesselt 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-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50"
-            >
-              {submitting ? 'Speichern...' : 'Konto hinzufuegen'}
-            </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-blue-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-blue-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-blue-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 fuer 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: 'Landesschulbehoerde', priority: 'Hoch' },
-            { domain: '@nibis.de', type: 'NiBiS', priority: 'Mittel' },
-            { domain: '@schultraeger.de', type: 'Schultraeger', 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: 'Eingangsbestaetigung', category: 'Standard', usageCount: 45 },
-    { id: '2', name: 'Terminbestaetigung', 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-blue-600 rounded-lg hover:bg-blue-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-blue-600 hover:text-blue-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 hinzugefuegt' },
-    { 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>
+      {activeTab === 'ai-settings' && <AISettingsTab />}
+      {activeTab === 'templates' && <TemplatesTab />}
+      {activeTab === 'logs' && <AuditLogTab />}
     </div>
   )
 }
diff --git a/admin-lehrer/app/(admin)/communication/mail/types.ts b/admin-lehrer/app/(admin)/communication/mail/types.ts
new file mode 100644
index 0000000..683d556
--- /dev/null
+++ b/admin-lehrer/app/(admin)/communication/mail/types.ts
@@ -0,0 +1,50 @@
+/**
+ * Types and constants for the Unified Inbox Mail Admin Page
+ */
+
+// API Base URL for backend operations (accounts, sync, etc.)
+export const API_BASE = process.env.NEXT_PUBLIC_KLAUSUR_SERVICE_URL || 'http://macmini:8086'
+
+export 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
+}
+
+export interface MailStats {
+  totalAccounts: number
+  activeAccounts: number
+  totalEmails: number
+  unreadEmails: number
+  totalTasks: number
+  pendingTasks: number
+  overdueTasks: number
+  aiAnalyzedCount: number
+  lastSyncTime: string | null
+}
+
+export interface SyncStatus {
+  running: boolean
+  accountsInProgress: string[]
+  lastCompleted: string | null
+  errors: string[]
+}
+
+export type TabId = 'overview' | 'accounts' | 'ai-settings' | 'templates' | 'logs'
+
+export const tabs: { id: TabId; name: string }[] = [
+  { id: 'overview', name: 'Uebersicht' },
+  { id: 'accounts', name: 'Konten' },
+  { id: 'ai-settings', name: 'KI-Einstellungen' },
+  { id: 'templates', name: 'Vorlagen' },
+  { id: 'logs', name: 'Audit-Log' },
+]
diff --git a/admin-lehrer/app/(admin)/communication/mail/useMailData.ts b/admin-lehrer/app/(admin)/communication/mail/useMailData.ts
new file mode 100644
index 0000000..b1c56a2
--- /dev/null
+++ b/admin-lehrer/app/(admin)/communication/mail/useMailData.ts
@@ -0,0 +1,61 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import type { EmailAccount, MailStats, SyncStatus } from './types'
+
+export interface UseMailDataReturn {
+  stats: MailStats | null
+  accounts: EmailAccount[]
+  syncStatus: SyncStatus | null
+  loading: boolean
+  error: string | null
+  fetchData: () => Promise<void>
+}
+
+export function useMailData(): UseMailDataReturn {
+  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 via our proxy API (avoids CORS/mixed-content issues)
+      const response = await fetch('/api/admin/mail')
+
+      if (response.ok) {
+        const data = await response.json()
+        setStats(data.stats)
+        setAccounts(data.accounts)
+        setSyncStatus(data.syncStatus)
+        setError(null)
+      } else {
+        const errorData = await response.json().catch(() => ({}))
+        throw new Error(errorData.details || `API returned ${response.status}`)
+      }
+    } catch (err) {
+      console.error('Failed to fetch mail data:', err)
+      setError('Verbindung zum Mail-Service (Mailpit) fehlgeschlagen. Laeuft Mailpit auf Port 8025?')
+    } 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 { stats, accounts, syncStatus, loading, error, fetchData }
+}
diff --git a/admin-lehrer/app/(admin)/development/brandbook/_components/ColorSwatch.tsx b/admin-lehrer/app/(admin)/development/brandbook/_components/ColorSwatch.tsx
new file mode 100644
index 0000000..ce45474
--- /dev/null
+++ b/admin-lehrer/app/(admin)/development/brandbook/_components/ColorSwatch.tsx
@@ -0,0 +1,35 @@
+'use client'
+
+import { useState } from 'react'
+import type { ColorShade } from '../constants'
+
+export function ColorSwatch({ color }: { color: ColorShade }) {
+  const [copied, setCopied] = useState(false)
+
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(color.value)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <button
+      onClick={copyToClipboard}
+      className="group flex flex-col items-center"
+      title={`Klicken zum Kopieren: ${color.value}`}
+    >
+      <div
+        className="w-16 h-16 rounded-xl shadow-sm border border-slate-200 transition-transform group-hover:scale-110 flex items-center justify-center"
+        style={{ backgroundColor: color.value }}
+      >
+        {copied && (
+          <svg className={`w-5 h-5 ${color.text === 'light' ? 'text-white' : 'text-slate-900'}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+          </svg>
+        )}
+      </div>
+      <span className="text-xs text-slate-600 mt-1 font-medium">{color.name}</span>
+      <span className="text-xs text-slate-400 font-mono">{color.value}</span>
+    </button>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/development/brandbook/_components/ColorsTab.tsx b/admin-lehrer/app/(admin)/development/brandbook/_components/ColorsTab.tsx
new file mode 100644
index 0000000..3efae22
--- /dev/null
+++ b/admin-lehrer/app/(admin)/development/brandbook/_components/ColorsTab.tsx
@@ -0,0 +1,123 @@
+'use client'
+
+import {
+  PRIMARY_COLORS,
+  ACCENT_COLORS,
+  CATEGORY_COLORS,
+  SEMANTIC_COLORS,
+} from '../constants'
+import { ColorSwatch } from './ColorSwatch'
+
+export function ColorsTab() {
+  return (
+    <div className="space-y-6">
+      {/* Primary Color */}
+      <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
+        <h3 className="text-lg font-semibold text-slate-900 mb-2">{PRIMARY_COLORS.name}</h3>
+        <p className="text-sm text-slate-500 mb-4">{PRIMARY_COLORS.description}</p>
+        <div className="flex gap-4 flex-wrap">
+          {PRIMARY_COLORS.shades.map((shade) => (
+            <ColorSwatch key={shade.name} color={shade} />
+          ))}
+        </div>
+      </div>
+
+      {/* Accent Color */}
+      <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
+        <h3 className="text-lg font-semibold text-slate-900 mb-2">{ACCENT_COLORS.name}</h3>
+        <p className="text-sm text-slate-500 mb-4">{ACCENT_COLORS.description}</p>
+        <div className="flex gap-4 flex-wrap">
+          {ACCENT_COLORS.shades.map((shade) => (
+            <ColorSwatch key={shade.name} color={shade} />
+          ))}
+        </div>
+        {/* Logo Gradient Preview */}
+        <div className="mt-6 pt-4 border-t border-slate-200">
+          <h4 className="text-sm font-medium text-slate-700 mb-3">Logo-Gradient</h4>
+          <div className="flex items-center gap-4">
+            <div className="w-16 h-16 rounded-xl flex items-center justify-center" style={{ background: 'linear-gradient(to bottom right, #0ea5e9, #d946ef)' }}>
+              <span className="text-2xl font-bold text-white">B</span>
+            </div>
+            <div className="text-sm text-slate-600">
+              <code className="bg-slate-100 px-2 py-1 rounded font-mono text-xs">
+                bg-gradient-to-br from-primary-500 to-accent-500
+              </code>
+              <p className="mt-1 text-slate-500">Sky Blue (#0ea5e9) → Fuchsia (#d946ef)</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Category Colors */}
+      <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
+        <h3 className="text-lg font-semibold text-slate-900 mb-4">Kategorie-Farben</h3>
+        <p className="text-sm text-slate-500 mb-6">
+          Jede Kategorie hat eine eigene Farbe fuer Navigation, Module und Akzente.
+        </p>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {CATEGORY_COLORS.map((cat) => (
+            <div key={cat.id} className="border border-slate-200 rounded-xl p-4">
+              <div className="flex items-center gap-3 mb-3">
+                <div
+                  className="w-8 h-8 rounded-lg"
+                  style={{ backgroundColor: cat.main }}
+                />
+                <div>
+                  <h4 className="font-medium text-slate-900">{cat.name}</h4>
+                  <p className="text-xs text-slate-500">{cat.description}</p>
+                </div>
+              </div>
+              <div className="flex gap-2">
+                {cat.shades.map((shade) => (
+                  <ColorSwatch key={shade.name} color={shade} />
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Semantic Colors */}
+      <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
+        <h3 className="text-lg font-semibold text-slate-900 mb-4">Semantische Farben</h3>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+          {Object.entries(SEMANTIC_COLORS).map(([key, palette]) => (
+            <div key={key} className="border border-slate-200 rounded-xl p-4">
+              <h4 className="font-medium text-slate-900 mb-3">{palette.name}</h4>
+              <div className="flex gap-2">
+                {palette.shades.map((shade) => (
+                  <ColorSwatch key={shade.name} color={shade} />
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Usage Guidelines */}
+      <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
+        <h3 className="text-lg font-semibold text-slate-900 mb-4">Verwendungsrichtlinien</h3>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div>
+            <h4 className="font-medium text-slate-700 mb-2">Primary (Sky Blue)</h4>
+            <ul className="text-sm text-slate-600 space-y-1">
+              <li>- Primaere Buttons und CTAs</li>
+              <li>- Links und interaktive Elemente</li>
+              <li>- Fokuszustaende</li>
+              <li>- Ausgewaehlte Navigation</li>
+            </ul>
+          </div>
+          <div>
+            <h4 className="font-medium text-slate-700 mb-2">Kategorie-Farben</h4>
+            <ul className="text-sm text-slate-600 space-y-1">
+              <li>- Sidebar-Navigation Icons</li>
+              <li>- Modul-Cards und Badges</li>
+              <li>- Bereichs-spezifische Akzente</li>
+              <li>- Breadcrumbs und Headers</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/development/brandbook/_components/ComponentsTab.tsx b/admin-lehrer/app/(admin)/development/brandbook/_components/ComponentsTab.tsx
new file mode 100644
index 0000000..0fbb5ed
--- /dev/null
+++ b/admin-lehrer/app/(admin)/development/brandbook/_components/ComponentsTab.tsx
@@ -0,0 +1,176 @@
+'use client'
+
+import { CATEGORY_COLORS } from '../constants'
+
+export function ComponentsTab() {
+  return (
+    <div className="space-y-6">
+      {/* Buttons */}
+      <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
+        <h3 className="text-lg font-semibold text-slate-900 mb-4">Buttons</h3>
+        <div className="flex flex-wrap gap-4 mb-6">
+          <button className="px-6 py-2 bg-primary-600 text-white font-medium rounded-lg hover:bg-primary-700 transition-colors">
+            Primary
+          </button>
+          <button className="px-6 py-2 bg-slate-100 text-slate-700 font-medium rounded-lg hover:bg-slate-200 transition-colors">
+            Secondary
+          </button>
+          <button className="px-6 py-2 border border-slate-300 text-slate-700 font-medium rounded-lg hover:bg-slate-50 transition-colors">
+            Outline
+          </button>
+          <button className="px-6 py-2 text-primary-600 font-medium rounded-lg hover:bg-primary-50 transition-colors">
+            Ghost
+          </button>
+          <button className="px-6 py-2 bg-red-600 text-white font-medium rounded-lg hover:bg-red-700 transition-colors">
+            Danger
+          </button>
+        </div>
+        <div className="flex flex-wrap gap-4">
+          <button className="px-4 py-1.5 bg-primary-600 text-white text-sm font-medium rounded-lg">
+            Small
+          </button>
+          <button className="px-6 py-2 bg-primary-600 text-white font-medium rounded-lg">
+            Medium
+          </button>
+          <button className="px-8 py-3 bg-primary-600 text-white text-lg font-medium rounded-lg">
+            Large
+          </button>
+        </div>
+      </div>
+
+      {/* Inputs */}
+      <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
+        <h3 className="text-lg font-semibold text-slate-900 mb-4">Eingabefelder</h3>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Standard Input</label>
+            <input
+              type="text"
+              placeholder="Placeholder..."
+              className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Mit Icon</label>
+            <div className="relative">
+              <input
+                type="text"
+                placeholder="Suchen..."
+                className="w-full pl-10 pr-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none"
+              />
+              <svg className="w-5 h-5 text-slate-400 absolute left-3 top-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Cards */}
+      <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
+        <h3 className="text-lg font-semibold text-slate-900 mb-4">Cards</h3>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="bg-white rounded-xl border border-slate-200 p-4 hover:shadow-lg hover:border-primary-300 transition-all cursor-pointer">
+            <div className="w-10 h-10 bg-primary-100 rounded-lg flex items-center justify-center mb-3">
+              <svg className="w-5 h-5 text-primary-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+              </svg>
+            </div>
+            <h4 className="font-semibold text-slate-900 mb-1">Feature Card</h4>
+            <p className="text-sm text-slate-600">Standard Card mit Hover-Effekt.</p>
+          </div>
+          <div className="rounded-xl p-4 text-white" style={{ background: 'linear-gradient(to bottom right, #0ea5e9, #d946ef)' }}>
+            <h4 className="font-semibold mb-1">Highlight Card</h4>
+            <p className="text-sm text-white/80">Mit Gradient-Hintergrund.</p>
+          </div>
+          <div className="bg-slate-900 rounded-xl p-4 text-white">
+            <h4 className="font-semibold mb-1">Dark Card</h4>
+            <p className="text-sm text-slate-400">Sidebar-Style.</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Category Cards */}
+      <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
+        <h3 className="text-lg font-semibold text-slate-900 mb-4">Kategorie-Cards</h3>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {CATEGORY_COLORS.slice(0, 3).map((cat) => (
+            <div
+              key={cat.id}
+              className="rounded-xl border p-4 hover:shadow-lg transition-all cursor-pointer"
+              style={{
+                borderColor: cat.shades[0].value,
+                backgroundColor: cat.shades[0].value + '40'
+              }}
+            >
+              <div
+                className="w-10 h-10 rounded-lg flex items-center justify-center mb-3"
+                style={{ backgroundColor: cat.main }}
+              >
+                <svg className="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+                </svg>
+              </div>
+              <h4 className="font-semibold text-slate-900 mb-1">{cat.name.split(' (')[0]}</h4>
+              <p className="text-sm text-slate-600">{cat.description}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Badges */}
+      <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
+        <h3 className="text-lg font-semibold text-slate-900 mb-4">Badges & Tags</h3>
+        <div className="flex flex-wrap gap-2 mb-4">
+          <span className="px-2.5 py-1 bg-primary-100 text-primary-700 text-xs font-medium rounded-full">Primary</span>
+          <span className="px-2.5 py-1 bg-green-100 text-green-700 text-xs font-medium rounded-full">Success</span>
+          <span className="px-2.5 py-1 bg-amber-100 text-amber-700 text-xs font-medium rounded-full">Warning</span>
+          <span className="px-2.5 py-1 bg-red-100 text-red-700 text-xs font-medium rounded-full">Danger</span>
+          <span className="px-2.5 py-1 bg-slate-100 text-slate-700 text-xs font-medium rounded-full">Neutral</span>
+        </div>
+        <h4 className="font-medium text-slate-700 mb-2 mt-4">Kategorie-Badges</h4>
+        <div className="flex flex-wrap gap-2">
+          {CATEGORY_COLORS.map((cat) => (
+            <span
+              key={cat.id}
+              className="px-2.5 py-1 text-xs font-medium rounded-full"
+              style={{
+                backgroundColor: cat.shades[0].value,
+                color: cat.shades[3].value
+              }}
+            >
+              {cat.name.split(' (')[0]}
+            </span>
+          ))}
+        </div>
+      </div>
+
+      {/* Border Radius */}
+      <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
+        <h3 className="text-lg font-semibold text-slate-900 mb-4">Border Radius</h3>
+        <div className="flex gap-6 items-end">
+          <div className="text-center">
+            <div className="w-16 h-16 bg-primary-500 rounded"></div>
+            <span className="text-xs text-slate-500 mt-2 block">rounded (4px)</span>
+          </div>
+          <div className="text-center">
+            <div className="w-16 h-16 bg-primary-500 rounded-lg"></div>
+            <span className="text-xs text-slate-500 mt-2 block">rounded-lg (8px)</span>
+          </div>
+          <div className="text-center">
+            <div className="w-16 h-16 bg-primary-500 rounded-xl"></div>
+            <span className="text-xs text-slate-500 mt-2 block">rounded-xl (12px)</span>
+          </div>
+          <div className="text-center">
+            <div className="w-16 h-16 bg-primary-500 rounded-2xl"></div>
+            <span className="text-xs text-slate-500 mt-2 block">rounded-2xl (16px)</span>
+          </div>
+          <div className="text-center">
+            <div className="w-16 h-16 bg-primary-500 rounded-full"></div>
+            <span className="text-xs text-slate-500 mt-2 block">rounded-full</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/development/brandbook/_components/LogoTab.tsx b/admin-lehrer/app/(admin)/development/brandbook/_components/LogoTab.tsx
new file mode 100644
index 0000000..f51c540
--- /dev/null
+++ b/admin-lehrer/app/(admin)/development/brandbook/_components/LogoTab.tsx
@@ -0,0 +1,269 @@
+'use client'
+
+function LogoDisplay() {
+  return (
+    <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
+      <h3 className="text-lg font-semibold text-slate-900 mb-4">Logo</h3>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+        <div className="bg-white border border-slate-200 rounded-xl p-8 flex items-center justify-center">
+          <div className="flex items-center gap-3">
+            <div className="w-12 h-12 rounded-xl flex items-center justify-center" style={{ background: 'linear-gradient(to bottom right, #0ea5e9, #d946ef)' }}>
+              <span className="text-2xl font-bold text-white">B</span>
+            </div>
+            <div>
+              <span className="text-2xl font-bold text-slate-900">BreakPilot</span>
+              <span className="text-sm text-slate-500 block">Admin v2</span>
+            </div>
+          </div>
+        </div>
+        <div className="bg-slate-900 rounded-xl p-8 flex items-center justify-center">
+          <div className="flex items-center gap-3">
+            <div className="w-12 h-12 rounded-xl flex items-center justify-center" style={{ background: 'linear-gradient(to bottom right, #38bdf8, #e879f9)' }}>
+              <span className="text-2xl font-bold text-white">B</span>
+            </div>
+            <div>
+              <span className="text-2xl font-bold text-white">BreakPilot</span>
+              <span className="text-sm text-slate-400 block">Admin v2</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      {/* Gradient Info */}
+      <div className="mt-6 pt-4 border-t border-slate-200">
+        <div className="flex items-center gap-4">
+          <code className="bg-slate-100 px-3 py-1.5 rounded-lg font-mono text-xs text-slate-700">
+            background: linear-gradient(to bottom right, #0ea5e9, #d946ef)
+          </code>
+          <span className="text-sm text-slate-500">Primary → Accent (Sky Blue → Fuchsia)</span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function LogoVariations() {
+  return (
+    <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
+      <h3 className="text-lg font-semibold text-slate-900 mb-4">Logo-Varianten</h3>
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <div className="border border-slate-200 rounded-xl p-4 flex flex-col items-center gap-2">
+          <div className="w-12 h-12 rounded-xl flex items-center justify-center" style={{ background: 'linear-gradient(to bottom right, #0ea5e9, #d946ef)' }}>
+            <span className="text-2xl font-bold text-white">B</span>
+          </div>
+          <span className="text-xs text-slate-600">Icon Only</span>
+        </div>
+        <div className="border border-slate-200 rounded-xl p-4 flex flex-col items-center gap-2">
+          <span className="text-xl font-bold text-slate-900">BreakPilot</span>
+          <span className="text-xs text-slate-600">Text Only</span>
+        </div>
+        <div className="border border-slate-200 rounded-xl p-4 flex flex-col items-center gap-2">
+          <div className="flex items-center gap-2">
+            <div className="w-8 h-8 rounded-lg flex items-center justify-center" style={{ background: 'linear-gradient(to bottom right, #0ea5e9, #d946ef)' }}>
+              <span className="text-lg font-bold text-white">B</span>
+            </div>
+            <span className="text-lg font-bold text-slate-900">BreakPilot</span>
+          </div>
+          <span className="text-xs text-slate-600">Horizontal</span>
+        </div>
+        <div className="border border-slate-200 rounded-xl p-4 flex flex-col items-center gap-2">
+          <div className="flex flex-col items-center">
+            <div className="w-10 h-10 rounded-xl flex items-center justify-center mb-1" style={{ background: 'linear-gradient(to bottom right, #0ea5e9, #d946ef)' }}>
+              <span className="text-xl font-bold text-white">B</span>
+            </div>
+            <span className="text-sm font-bold text-slate-900">BreakPilot</span>
+          </div>
+          <span className="text-xs text-slate-600">Stacked</span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function FaviconSizes() {
+  return (
+    <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
+      <h3 className="text-lg font-semibold text-slate-900 mb-4">Favicon & App Icon</h3>
+      <div className="flex gap-6 items-end">
+        {[
+          { size: 'w-8 h-8', rounded: 'rounded', text: 'text-sm', label: '16x16' },
+          { size: 'w-12 h-12', rounded: 'rounded-lg', text: 'text-xl', label: '32x32' },
+          { size: 'w-16 h-16', rounded: 'rounded-xl', text: 'text-2xl', label: '180x180' },
+          { size: 'w-24 h-24', rounded: 'rounded-2xl', text: 'text-4xl', label: '512x512' },
+        ].map((icon) => (
+          <div key={icon.label} className="text-center">
+            <div className={`${icon.size} ${icon.rounded} flex items-center justify-center`} style={{ background: 'linear-gradient(to bottom right, #0ea5e9, #d946ef)' }}>
+              <span className={`${icon.text} font-bold text-white`}>B</span>
+            </div>
+            <span className="text-xs text-slate-500 mt-2 block">{icon.label}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function LogoDonts() {
+  return (
+    <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
+      <h3 className="text-lg font-semibold text-slate-900 mb-4">Nicht erlaubt</h3>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div className="border border-red-200 bg-red-50 rounded-xl p-4 text-center">
+          <div className="flex items-center gap-2 justify-center opacity-50">
+            <div className="w-8 h-8 bg-red-500 rounded-lg flex items-center justify-center">
+              <span className="text-lg font-bold text-white">B</span>
+            </div>
+            <span className="text-lg font-bold text-red-500">BreakPilot</span>
+          </div>
+          <span className="text-xs text-red-600 mt-2 block">Falsche Farben</span>
+        </div>
+        <div className="border border-red-200 bg-red-50 rounded-xl p-4 text-center">
+          <div className="flex items-center gap-2 justify-center" style={{ transform: 'skewX(-10deg)' }}>
+            <div className="w-8 h-8 rounded-lg flex items-center justify-center" style={{ background: 'linear-gradient(to bottom right, #0ea5e9, #d946ef)' }}>
+              <span className="text-lg font-bold text-white">B</span>
+            </div>
+            <span className="text-lg font-bold text-slate-900">BreakPilot</span>
+          </div>
+          <span className="text-xs text-red-600 mt-2 block">Verzerrt</span>
+        </div>
+        <div className="border border-red-200 bg-red-50 rounded-xl p-4 text-center">
+          <div className="flex items-center gap-2 justify-center">
+            <div className="w-8 h-8 rounded-lg flex items-center justify-center" style={{ background: 'linear-gradient(to bottom right, #0ea5e9, #d946ef)' }}>
+              <span className="text-lg font-bold text-white">B</span>
+            </div>
+            <span className="text-lg font-bold text-slate-900">Break Pilot</span>
+          </div>
+          <span className="text-xs text-red-600 mt-2 block">Falsche Schreibweise</span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function StudioLogo() {
+  return (
+    <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
+      <h3 className="text-lg font-semibold text-slate-900 mb-2">Studio Logo (BP mit Fluegeln)</h3>
+      <p className="text-sm text-slate-500 mb-6">
+        Das Studio-Logo verwendet ein rotes Farbschema und zeigt &quot;BP&quot; mit stilisierten Fluegeln.
+        Es gibt drei Design-Varianten fuer unterschiedliche Anwendungsfaelle.
+      </p>
+
+      {/* Variante A: Cupertino Clean */}
+      <div className="mb-6 p-4 bg-slate-50 rounded-xl">
+        <h4 className="font-medium text-slate-700 mb-4">A: Cupertino Clean</h4>
+        <div className="flex items-center gap-8">
+          <div className="flex items-center gap-3">
+            <div className="w-12 h-12 relative">
+              <div className="absolute inset-0 rounded-xl shadow-lg" style={{ background: 'linear-gradient(to bottom right, #ef4444, #b91c1c)' }} />
+              <div className="absolute inset-0 flex items-center justify-center">
+                <svg viewBox="0 0 40 40" className="w-9 h-9">
+                  <circle cx="20" cy="20" r="14" fill="rgba(255,255,255,0.15)" />
+                  <text x="20" y="26" textAnchor="middle" fill="white" fontSize="16" fontWeight="bold" fontFamily="system-ui">BP</text>
+                  <path d="M6 22 L12 20 M28 20 L34 22" stroke="rgba(255,255,255,0.5)" strokeWidth="1.5" strokeLinecap="round" />
+                </svg>
+              </div>
+            </div>
+            <div>
+              <span className="font-semibold text-slate-900 text-lg">Break<span className="text-red-600">Pilot</span></span>
+              <span className="text-slate-400 text-sm block">Studio</span>
+            </div>
+          </div>
+          <div className="text-sm text-slate-600">
+            <code className="bg-white px-2 py-1 rounded font-mono text-xs">#ef4444 → #b91c1c</code>
+            <p className="mt-1 text-slate-500">Minimalistisch, SF-Style, BP mit Fluegel-Linien</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Variante B: Glassmorphism Pro */}
+      <div className="mb-6 p-4 rounded-xl" style={{ background: 'linear-gradient(to bottom right, #312e81, #581c87, #831843)' }}>
+        <h4 className="font-medium text-white/80 mb-4">B: Glassmorphism Pro</h4>
+        <div className="flex items-center gap-8">
+          <div className="flex items-center gap-4">
+            <div className="w-12 h-12 relative">
+              <div className="absolute inset-0 rounded-2xl blur-md opacity-50" style={{ background: 'linear-gradient(to bottom right, #f87171, #dc2626)' }} />
+              <div className="absolute inset-0 rounded-2xl border border-white/20 shadow-xl" style={{ background: 'linear-gradient(to bottom right, rgba(248,113,113,0.9), rgba(220,38,38,0.9))' }} />
+              <div className="absolute inset-0 flex items-center justify-center">
+                <svg viewBox="0 0 40 40" className="w-9 h-9">
+                  <path d="M10 28 L20 8 L30 28 L20 22 Z" fill="rgba(255,255,255,0.9)" />
+                  <path d="M14 24 L20 12 L26 24 L20 20 Z" fill="rgba(255,255,255,0.3)" />
+                </svg>
+              </div>
+            </div>
+            <div>
+              <span className="font-semibold text-white text-lg">BreakPilot</span>
+              <span className="text-white/60 text-sm block">Studio</span>
+            </div>
+          </div>
+          <div className="text-sm text-white/70">
+            <code className="bg-white/10 px-2 py-1 rounded font-mono text-xs">#f87171 → #dc2626</code>
+            <p className="mt-1 text-white/50">Glassmorphism, Glow-Effekt, Papierflugzeug-Silhouette</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Variante C: Bento Style */}
+      <div className="mb-6 p-4 bg-black rounded-xl">
+        <h4 className="font-medium text-white/80 mb-4">C: Bento Style</h4>
+        <div className="flex items-center gap-8">
+          <div className="flex items-center gap-4">
+            <div className="w-12 h-12 relative">
+              <div className="absolute inset-0 rounded-xl" style={{ background: 'linear-gradient(to bottom right, #ef4444, #991b1b)' }} />
+              <div className="absolute inset-0 flex items-center justify-center">
+                <svg viewBox="0 0 40 40" className="w-9 h-9">
+                  <circle cx="15" cy="14" r="5" stroke="white" strokeWidth="1.5" fill="none" />
+                  <circle cx="15" cy="24" r="5" stroke="white" strokeWidth="1.5" fill="none" />
+                  <line x1="27" y1="10" x2="27" y2="30" stroke="white" strokeWidth="1.5" strokeLinecap="round" />
+                  <circle cx="27" cy="15" r="4" stroke="white" strokeWidth="1.5" fill="none" />
+                </svg>
+              </div>
+            </div>
+            <div>
+              <span className="font-semibold text-white text-lg">BreakPilot</span>
+              <span className="text-white/40 text-sm ml-2">Studio</span>
+            </div>
+          </div>
+          <div className="text-sm text-white/70">
+            <code className="bg-white/10 px-2 py-1 rounded font-mono text-xs">#ef4444 → #991b1b</code>
+            <p className="mt-1 text-white/50">Geometrisch, Monoweight, B+P als Kreise/Linien</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Studio Farbpalette */}
+      <div className="pt-4 border-t border-slate-200">
+        <h4 className="text-sm font-medium text-slate-700 mb-3">Studio Farbpalette (Rot)</h4>
+        <div className="flex gap-3">
+          {[
+            { bg: '#fef2f2', label: 'red-50' },
+            { bg: '#f87171', label: 'red-400' },
+            { bg: '#ef4444', label: 'red-500' },
+            { bg: '#dc2626', label: 'red-600' },
+            { bg: '#b91c1c', label: 'red-700' },
+            { bg: '#991b1b', label: 'red-800' },
+          ].map((swatch) => (
+            <div key={swatch.label} className="text-center">
+              <div className="w-12 h-12 rounded-lg" style={{ backgroundColor: swatch.bg }} />
+              <span className="text-xs text-slate-500 mt-1 block">{swatch.label}</span>
+            </div>
+          ))}
+        </div>
+        <p className="text-xs text-slate-500 mt-3">
+          Quelle: <code className="bg-slate-100 px-1.5 py-0.5 rounded">/studio-v2/components/Logo.tsx</code>
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export function LogoTab() {
+  return (
+    <div className="space-y-6">
+      <LogoDisplay />
+      <LogoVariations />
+      <FaviconSizes />
+      <LogoDonts />
+      <StudioLogo />
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/development/brandbook/_components/TypographyTab.tsx b/admin-lehrer/app/(admin)/development/brandbook/_components/TypographyTab.tsx
new file mode 100644
index 0000000..8e56841
--- /dev/null
+++ b/admin-lehrer/app/(admin)/development/brandbook/_components/TypographyTab.tsx
@@ -0,0 +1,173 @@
+'use client'
+
+import { TYPOGRAPHY, SPACING } from '../constants'
+
+export function TypographyTab() {
+  return (
+    <div className="space-y-6">
+      {/* Font Family */}
+      <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
+        <h3 className="text-lg font-semibold text-slate-900 mb-4">Schriftart: Inter</h3>
+        <div className="bg-slate-50 rounded-lg p-4 font-mono text-sm text-slate-600 mb-4">
+          font-family: {TYPOGRAPHY.fontFamily};
+        </div>
+        <p className="text-sm text-slate-600">
+          Inter ist eine moderne, variable Sans-Serif Schrift, optimiert fuer Bildschirme.
+          Sie ist unter der SIL Open Font License verfuegbar und frei fuer kommerzielle Nutzung.
+        </p>
+      </div>
+
+      {/* Font Licenses */}
+      <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
+        <h3 className="text-lg font-semibold text-slate-900 mb-4">Lizenzen</h3>
+        <div className="space-y-4">
+          {/* Inter License */}
+          <div className="border border-slate-200 rounded-xl p-4">
+            <div className="flex items-start justify-between mb-2">
+              <div>
+                <h4 className="font-semibold text-slate-900">Inter Font</h4>
+                <p className="text-sm text-slate-500">Designer: Rasmus Andersson</p>
+              </div>
+              <span className="px-2.5 py-1 bg-green-100 text-green-700 text-xs font-medium rounded-full">
+                OFL-1.1
+              </span>
+            </div>
+            <div className="grid grid-cols-2 gap-4 mt-3 text-sm">
+              <div>
+                <span className="text-slate-500">Lizenz:</span>
+                <span className="ml-2 text-slate-700">SIL Open Font License 1.1</span>
+              </div>
+              <div>
+                <span className="text-slate-500">Kommerzielle Nutzung:</span>
+                <span className="ml-2 text-green-600 font-medium">Ja, uneingeschraenkt</span>
+              </div>
+              <div>
+                <span className="text-slate-500">Attribution erforderlich:</span>
+                <span className="ml-2 text-slate-700">Nein</span>
+              </div>
+              <div>
+                <span className="text-slate-500">Repository:</span>
+                <a href="https://github.com/rsms/inter" target="_blank" rel="noopener noreferrer" className="ml-2 text-primary-600 hover:underline">
+                  github.com/rsms/inter
+                </a>
+              </div>
+            </div>
+          </div>
+
+          {/* Heroicons License */}
+          <div className="border border-slate-200 rounded-xl p-4">
+            <div className="flex items-start justify-between mb-2">
+              <div>
+                <h4 className="font-semibold text-slate-900">Heroicons</h4>
+                <p className="text-sm text-slate-500">Designer: Tailwind Labs</p>
+              </div>
+              <span className="px-2.5 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded-full">
+                MIT
+              </span>
+            </div>
+            <div className="grid grid-cols-2 gap-4 mt-3 text-sm">
+              <div>
+                <span className="text-slate-500">Lizenz:</span>
+                <span className="ml-2 text-slate-700">MIT License</span>
+              </div>
+              <div>
+                <span className="text-slate-500">Kommerzielle Nutzung:</span>
+                <span className="ml-2 text-green-600 font-medium">Ja, uneingeschraenkt</span>
+              </div>
+              <div>
+                <span className="text-slate-500">Attribution erforderlich:</span>
+                <span className="ml-2 text-slate-700">Nein (empfohlen)</span>
+              </div>
+              <div>
+                <span className="text-slate-500">Repository:</span>
+                <a href="https://github.com/tailwindlabs/heroicons" target="_blank" rel="noopener noreferrer" className="ml-2 text-primary-600 hover:underline">
+                  github.com/tailwindlabs/heroicons
+                </a>
+              </div>
+            </div>
+          </div>
+
+          {/* License Summary */}
+          <div className="bg-green-50 border border-green-200 rounded-xl p-4">
+            <div className="flex items-center gap-2 mb-2">
+              <svg className="w-5 h-5 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              <h4 className="font-semibold text-green-800">Lizenz-Compliance</h4>
+            </div>
+            <p className="text-sm text-green-700">
+              Alle verwendeten Schriftarten und Icons sind Open Source und fuer kommerzielle Nutzung freigegeben.
+              Keine Attribution erforderlich. Vollstaendige Dokumentation in der SBOM.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Font Weights */}
+      <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
+        <h3 className="text-lg font-semibold text-slate-900 mb-4">Schriftschnitte</h3>
+        <div className="space-y-4">
+          {TYPOGRAPHY.weights.map((w) => (
+            <div key={w.weight} className="flex items-center gap-6 pb-4 border-b border-slate-100 last:border-0 last:pb-0">
+              <span
+                className="text-2xl w-64"
+                style={{ fontWeight: w.weight }}
+              >
+                The quick brown fox
+              </span>
+              <div className="flex-1">
+                <span className="font-medium text-slate-900">{w.name} ({w.weight})</span>
+                <span className="text-sm text-slate-500 ml-4">{w.usage}</span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Font Sizes */}
+      <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
+        <h3 className="text-lg font-semibold text-slate-900 mb-4">Schriftgroessen</h3>
+        <div className="space-y-3">
+          {TYPOGRAPHY.sizes.map((s) => (
+            <div key={s.name} className="flex items-baseline gap-4 border-b border-slate-100 pb-3 last:border-0">
+              <span className="w-16 text-sm font-mono text-slate-500 bg-slate-100 px-2 py-0.5 rounded">{s.name}</span>
+              <span className="w-36 text-sm text-slate-600">{s.size}</span>
+              <span className="text-sm text-slate-500">{s.usage}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Headings Preview */}
+      <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
+        <h3 className="text-lg font-semibold text-slate-900 mb-4">Ueberschriften-Hierarchie</h3>
+        <div className="space-y-4">
+          <div className="text-4xl font-bold text-slate-900">H1: Hauptueberschrift</div>
+          <div className="text-3xl font-bold text-slate-900">H2: Abschnittsueberschrift</div>
+          <div className="text-2xl font-semibold text-slate-900">H3: Unterabschnitt</div>
+          <div className="text-xl font-semibold text-slate-900">H4: Card-Titel</div>
+          <div className="text-lg font-medium text-slate-900">H5: Kleiner Titel</div>
+          <div className="text-base font-medium text-slate-900">H6: Label</div>
+        </div>
+      </div>
+
+      {/* Spacing */}
+      <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
+        <h3 className="text-lg font-semibold text-slate-900 mb-4">Spacing Scale</h3>
+        <div className="space-y-3">
+          {SPACING.map((s) => (
+            <div key={s.name} className="flex items-center gap-4">
+              <span className="w-12 text-sm font-mono text-slate-500 bg-slate-100 px-2 py-0.5 rounded text-center">{s.name}</span>
+              <div
+                className="bg-primary-500 h-4 rounded"
+                style={{ width: `${parseInt(s.value) * 16}px` }}
+              />
+              <span className="text-sm text-slate-600">{s.value}</span>
+              <span className="text-sm text-slate-400">{s.usage}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/development/brandbook/_components/VoiceTab.tsx b/admin-lehrer/app/(admin)/development/brandbook/_components/VoiceTab.tsx
new file mode 100644
index 0000000..712c3fd
--- /dev/null
+++ b/admin-lehrer/app/(admin)/development/brandbook/_components/VoiceTab.tsx
@@ -0,0 +1,122 @@
+'use client'
+
+import { VOICE_TONE } from '../constants'
+
+export function VoiceTab() {
+  return (
+    <div className="space-y-6">
+      {/* Brand Attributes */}
+      <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
+        <h3 className="text-lg font-semibold text-slate-900 mb-4">Markenpersoenlichkeit</h3>
+        <div className="flex flex-wrap gap-3">
+          {VOICE_TONE.attributes.map((attr) => (
+            <span
+              key={attr}
+              className="px-4 py-2 bg-primary-100 text-primary-700 rounded-full font-medium"
+            >
+              {attr}
+            </span>
+          ))}
+        </div>
+      </div>
+
+      {/* Do & Dont */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
+          <h3 className="text-lg font-semibold text-green-600 mb-4 flex items-center gap-2">
+            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+            </svg>
+            So schreiben wir
+          </h3>
+          <ul className="space-y-2">
+            {VOICE_TONE.doList.map((item) => (
+              <li key={item} className="flex items-center gap-2 text-slate-600">
+                <span className="w-1.5 h-1.5 bg-green-500 rounded-full flex-shrink-0"></span>
+                {item}
+              </li>
+            ))}
+          </ul>
+        </div>
+        <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
+          <h3 className="text-lg font-semibold text-red-600 mb-4 flex items-center gap-2">
+            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+            Das vermeiden wir
+          </h3>
+          <ul className="space-y-2">
+            {VOICE_TONE.dontList.map((item) => (
+              <li key={item} className="flex items-center gap-2 text-slate-600">
+                <span className="w-1.5 h-1.5 bg-red-500 rounded-full flex-shrink-0"></span>
+                {item}
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+
+      {/* Example Texts */}
+      <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
+        <h3 className="text-lg font-semibold text-slate-900 mb-4">Beispieltexte</h3>
+        <div className="space-y-4">
+          <div className="p-4 bg-green-50 border border-green-200 rounded-xl">
+            <span className="text-xs text-green-600 font-medium mb-2 block">GUT</span>
+            <p className="text-slate-700">
+              &quot;Verwalten Sie Ihre Datenschutz-Dokumente einfach und sicher. Alle Aenderungen werden protokolliert.&quot;
+            </p>
+          </div>
+          <div className="p-4 bg-red-50 border border-red-200 rounded-xl">
+            <span className="text-xs text-red-600 font-medium mb-2 block">SCHLECHT</span>
+            <p className="text-slate-700">
+              &quot;Unsere revolutionaere KI-Loesung optimiert Ihre Compliance-Workflows durch state-of-the-art NLP.&quot;
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Target Audience */}
+      <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
+        <h3 className="text-lg font-semibold text-slate-900 mb-4">Zielgruppe</h3>
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+          {[
+            {
+              iconBg: 'bg-education-100', iconColor: 'text-education-600',
+              iconPath: 'M12 14l9-5-9-5-9 5 9 5z',
+              iconPath2: 'M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z',
+              title: 'Lehrkraefte', desc: 'Zeitersparnis, einfache Bedienung',
+            },
+            {
+              iconBg: 'bg-compliance-100', iconColor: 'text-compliance-600',
+              iconPath: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z',
+              title: 'DSB', desc: 'DSGVO-Compliance, Dokumentation',
+            },
+            {
+              iconBg: 'bg-infrastructure-100', iconColor: 'text-infrastructure-600',
+              iconPath: 'M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4',
+              title: 'Entwickler', desc: 'APIs, Integration, DevOps',
+            },
+            {
+              iconBg: 'bg-communication-100', iconColor: 'text-communication-600',
+              iconPath: 'M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4',
+              title: 'Schulleitung', desc: 'Ueberblick, Kosten, Compliance',
+            },
+          ].map((audience) => (
+            <div key={audience.title} className="p-4 bg-slate-50 rounded-xl text-center">
+              <div className={`w-12 h-12 ${audience.iconBg} rounded-xl flex items-center justify-center mx-auto mb-2`}>
+                <svg className={`w-6 h-6 ${audience.iconColor}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={audience.iconPath} />
+                  {audience.iconPath2 && (
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={audience.iconPath2} />
+                  )}
+                </svg>
+              </div>
+              <h4 className="font-semibold text-slate-900">{audience.title}</h4>
+              <p className="text-sm text-slate-600 mt-1">{audience.desc}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/development/brandbook/constants.ts b/admin-lehrer/app/(admin)/development/brandbook/constants.ts
new file mode 100644
index 0000000..76c41b0
--- /dev/null
+++ b/admin-lehrer/app/(admin)/development/brandbook/constants.ts
@@ -0,0 +1,253 @@
+/**
+ * Brandbook Constants - Color palettes, typography, spacing, voice & tone
+ */
+
+export interface ColorShade {
+  name: string
+  value: string
+  text: 'dark' | 'light'
+}
+
+export interface ColorPalette {
+  name: string
+  description: string
+  shades: ColorShade[]
+}
+
+export interface CategoryColor {
+  id: string
+  name: string
+  description: string
+  main: string
+  shades: ColorShade[]
+}
+
+// Primary brand color (Sky Blue)
+export const PRIMARY_COLORS: ColorPalette = {
+  name: 'Primary (Sky Blue)',
+  description: 'Haupt-Markenfarbe fuer Buttons, Links und Akzente',
+  shades: [
+    { name: '50', value: '#f0f9ff', text: 'dark' },
+    { name: '100', value: '#e0f2fe', text: 'dark' },
+    { name: '200', value: '#bae6fd', text: 'dark' },
+    { name: '300', value: '#7dd3fc', text: 'dark' },
+    { name: '400', value: '#38bdf8', text: 'dark' },
+    { name: '500', value: '#0ea5e9', text: 'light' },
+    { name: '600', value: '#0284c7', text: 'light' },
+    { name: '700', value: '#0369a1', text: 'light' },
+    { name: '800', value: '#075985', text: 'light' },
+    { name: '900', value: '#0c4a6e', text: 'light' },
+  ],
+}
+
+// Accent brand color (Fuchsia) - for logo gradient and highlights
+export const ACCENT_COLORS: ColorPalette = {
+  name: 'Accent (Fuchsia)',
+  description: 'Akzentfarbe fuer Logo-Gradient und besondere Highlights',
+  shades: [
+    { name: '50', value: '#fdf4ff', text: 'dark' },
+    { name: '100', value: '#fae8ff', text: 'dark' },
+    { name: '200', value: '#f5d0fe', text: 'dark' },
+    { name: '300', value: '#f0abfc', text: 'dark' },
+    { name: '400', value: '#e879f9', text: 'dark' },
+    { name: '500', value: '#d946ef', text: 'light' },
+    { name: '600', value: '#c026d3', text: 'light' },
+    { name: '700', value: '#a21caf', text: 'light' },
+    { name: '800', value: '#86198f', text: 'light' },
+    { name: '900', value: '#701a75', text: 'light' },
+  ],
+}
+
+// Category colors for navigation and modules
+export const CATEGORY_COLORS: CategoryColor[] = [
+  {
+    id: 'dsgvo',
+    name: 'DSGVO (Violet)',
+    description: 'Datenschutz & Betroffenenrechte',
+    main: '#7c3aed',
+    shades: [
+      { name: '100', value: '#ede9fe', text: 'dark' },
+      { name: '500', value: '#8b5cf6', text: 'light' },
+      { name: '600', value: '#7c3aed', text: 'light' },
+      { name: '700', value: '#6d28d9', text: 'light' },
+    ],
+  },
+  {
+    id: 'compliance',
+    name: 'Compliance (Purple)',
+    description: 'Audit, Controls & Regulierung',
+    main: '#9333ea',
+    shades: [
+      { name: '100', value: '#f3e8ff', text: 'dark' },
+      { name: '500', value: '#a855f7', text: 'light' },
+      { name: '600', value: '#9333ea', text: 'light' },
+      { name: '700', value: '#7e22ce', text: 'light' },
+    ],
+  },
+  {
+    id: 'ai',
+    name: 'KI & Automatisierung (Teal)',
+    description: 'LLM, OCR, RAG & Machine Learning',
+    main: '#14b8a6',
+    shades: [
+      { name: '100', value: '#ccfbf1', text: 'dark' },
+      { name: '500', value: '#14b8a6', text: 'light' },
+      { name: '600', value: '#0d9488', text: 'light' },
+      { name: '700', value: '#0f766e', text: 'light' },
+    ],
+  },
+  {
+    id: 'infrastructure',
+    name: 'Infrastruktur (Orange)',
+    description: 'GPU, Security, CI/CD & Monitoring',
+    main: '#f97316',
+    shades: [
+      { name: '100', value: '#ffedd5', text: 'dark' },
+      { name: '500', value: '#f97316', text: 'light' },
+      { name: '600', value: '#ea580c', text: 'light' },
+      { name: '700', value: '#c2410c', text: 'light' },
+    ],
+  },
+  {
+    id: 'education',
+    name: 'Bildung & Schule (Blue)',
+    description: 'Bildungsquellen & Lehrplaene',
+    main: '#3b82f6',
+    shades: [
+      { name: '100', value: '#dbeafe', text: 'dark' },
+      { name: '500', value: '#3b82f6', text: 'light' },
+      { name: '600', value: '#2563eb', text: 'light' },
+      { name: '700', value: '#1d4ed8', text: 'light' },
+    ],
+  },
+  {
+    id: 'communication',
+    name: 'Kommunikation (Green)',
+    description: 'Matrix, E-Mail & Benachrichtigungen',
+    main: '#22c55e',
+    shades: [
+      { name: '100', value: '#dcfce7', text: 'dark' },
+      { name: '500', value: '#22c55e', text: 'light' },
+      { name: '600', value: '#16a34a', text: 'light' },
+      { name: '700', value: '#15803d', text: 'light' },
+    ],
+  },
+  {
+    id: 'development',
+    name: 'Entwicklung (Slate)',
+    description: 'Workflow, Game, Docs & Brandbook',
+    main: '#64748b',
+    shades: [
+      { name: '100', value: '#f1f5f9', text: 'dark' },
+      { name: '500', value: '#64748b', text: 'light' },
+      { name: '600', value: '#475569', text: 'light' },
+      { name: '700', value: '#334155', text: 'light' },
+    ],
+  },
+]
+
+// Semantic colors
+export const SEMANTIC_COLORS: Record<string, { name: string; shades: ColorShade[] }> = {
+  success: {
+    name: 'Success (Emerald)',
+    shades: [
+      { name: '100', value: '#d1fae5', text: 'dark' },
+      { name: '500', value: '#10b981', text: 'light' },
+      { name: '600', value: '#059669', text: 'light' },
+    ],
+  },
+  warning: {
+    name: 'Warning (Amber)',
+    shades: [
+      { name: '100', value: '#fef3c7', text: 'dark' },
+      { name: '500', value: '#f59e0b', text: 'dark' },
+      { name: '600', value: '#d97706', text: 'light' },
+    ],
+  },
+  danger: {
+    name: 'Danger (Red)',
+    shades: [
+      { name: '100', value: '#fee2e2', text: 'dark' },
+      { name: '500', value: '#ef4444', text: 'light' },
+      { name: '600', value: '#dc2626', text: 'light' },
+    ],
+  },
+  neutral: {
+    name: 'Neutral (Slate)',
+    shades: [
+      { name: '50', value: '#f8fafc', text: 'dark' },
+      { name: '100', value: '#f1f5f9', text: 'dark' },
+      { name: '200', value: '#e2e8f0', text: 'dark' },
+      { name: '300', value: '#cbd5e1', text: 'dark' },
+      { name: '400', value: '#94a3b8', text: 'dark' },
+      { name: '500', value: '#64748b', text: 'light' },
+      { name: '600', value: '#475569', text: 'light' },
+      { name: '700', value: '#334155', text: 'light' },
+      { name: '800', value: '#1e293b', text: 'light' },
+      { name: '900', value: '#0f172a', text: 'light' },
+    ],
+  },
+}
+
+export const TYPOGRAPHY = {
+  fontFamily: "'Inter', system-ui, -apple-system, sans-serif",
+  weights: [
+    { weight: 400, name: 'Regular', usage: 'Fliesstext, Beschreibungen' },
+    { weight: 500, name: 'Medium', usage: 'Labels, Buttons, Navigation' },
+    { weight: 600, name: 'Semi-Bold', usage: 'Ueberschriften H3-H6, Card-Titel' },
+    { weight: 700, name: 'Bold', usage: 'Ueberschriften H1-H2, CTAs' },
+  ],
+  sizes: [
+    { name: 'xs', size: '0.75rem (12px)', usage: 'Footnotes, Badges' },
+    { name: 'sm', size: '0.875rem (14px)', usage: 'Nebentext, Labels' },
+    { name: 'base', size: '1rem (16px)', usage: 'Fliesstext, Body' },
+    { name: 'lg', size: '1.125rem (18px)', usage: 'Lead Text' },
+    { name: 'xl', size: '1.25rem (20px)', usage: 'H4, Card Titles' },
+    { name: '2xl', size: '1.5rem (24px)', usage: 'H3' },
+    { name: '3xl', size: '1.875rem (30px)', usage: 'H2' },
+    { name: '4xl', size: '2.25rem (36px)', usage: 'H1, Hero' },
+  ],
+}
+
+export const SPACING = [
+  { name: '1', value: '0.25rem (4px)', usage: 'Minimaler Abstand' },
+  { name: '2', value: '0.5rem (8px)', usage: 'Kompakter Abstand' },
+  { name: '3', value: '0.75rem (12px)', usage: 'Standard klein' },
+  { name: '4', value: '1rem (16px)', usage: 'Standard' },
+  { name: '6', value: '1.5rem (24px)', usage: 'Card Padding' },
+  { name: '8', value: '2rem (32px)', usage: 'Section Spacing' },
+]
+
+export const VOICE_TONE = {
+  attributes: [
+    'Professionell & Vertrauenswuerdig',
+    'Klar & Direkt',
+    'Hilfreich & Unterstuetzend',
+    'Modern & Innovativ',
+    'DSGVO-konform & Sicher',
+  ],
+  doList: [
+    'Einfache, klare Sprache verwenden',
+    'Aktiv formulieren',
+    'Nutzenorientiert schreiben',
+    'Konkrete Beispiele geben',
+    'Technische Begriffe erklaeren',
+  ],
+  dontList: [
+    'Fachjargon ohne Erklaerung',
+    'Passive Formulierungen',
+    'Uebertriebene Versprechen',
+    'Marketing-Floskeln',
+    'Unpersoenliche Ansprache',
+  ],
+}
+
+export type BrandbookTab = 'colors' | 'typography' | 'components' | 'logo' | 'voice'
+
+export const TABS: { id: BrandbookTab; label: string }[] = [
+  { id: 'colors', label: 'Farben' },
+  { id: 'typography', label: 'Typografie' },
+  { id: 'components', label: 'Komponenten' },
+  { id: 'logo', label: 'Logo' },
+  { id: 'voice', label: 'Tonalitaet' },
+]
diff --git a/admin-lehrer/app/(admin)/development/brandbook/page.tsx b/admin-lehrer/app/(admin)/development/brandbook/page.tsx
index 494389f..06c75ec 100644
--- a/admin-lehrer/app/(admin)/development/brandbook/page.tsx
+++ b/admin-lehrer/app/(admin)/development/brandbook/page.tsx
@@ -10,260 +10,15 @@
  */
 
 import { useState } from 'react'
-
-// Primary brand color (Sky Blue)
-const PRIMARY_COLORS = {
-  name: 'Primary (Sky Blue)',
-  description: 'Haupt-Markenfarbe fuer Buttons, Links und Akzente',
-  shades: [
-    { name: '50', value: '#f0f9ff', text: 'dark' },
-    { name: '100', value: '#e0f2fe', text: 'dark' },
-    { name: '200', value: '#bae6fd', text: 'dark' },
-    { name: '300', value: '#7dd3fc', text: 'dark' },
-    { name: '400', value: '#38bdf8', text: 'dark' },
-    { name: '500', value: '#0ea5e9', text: 'light' },
-    { name: '600', value: '#0284c7', text: 'light' },
-    { name: '700', value: '#0369a1', text: 'light' },
-    { name: '800', value: '#075985', text: 'light' },
-    { name: '900', value: '#0c4a6e', text: 'light' },
-  ],
-}
-
-// Accent brand color (Fuchsia) - for logo gradient and highlights
-const ACCENT_COLORS = {
-  name: 'Accent (Fuchsia)',
-  description: 'Akzentfarbe fuer Logo-Gradient und besondere Highlights',
-  shades: [
-    { name: '50', value: '#fdf4ff', text: 'dark' },
-    { name: '100', value: '#fae8ff', text: 'dark' },
-    { name: '200', value: '#f5d0fe', text: 'dark' },
-    { name: '300', value: '#f0abfc', text: 'dark' },
-    { name: '400', value: '#e879f9', text: 'dark' },
-    { name: '500', value: '#d946ef', text: 'light' },
-    { name: '600', value: '#c026d3', text: 'light' },
-    { name: '700', value: '#a21caf', text: 'light' },
-    { name: '800', value: '#86198f', text: 'light' },
-    { name: '900', value: '#701a75', text: 'light' },
-  ],
-}
-
-// Category colors for navigation and modules
-const CATEGORY_COLORS = [
-  {
-    id: 'dsgvo',
-    name: 'DSGVO (Violet)',
-    description: 'Datenschutz & Betroffenenrechte',
-    main: '#7c3aed',
-    shades: [
-      { name: '100', value: '#ede9fe', text: 'dark' },
-      { name: '500', value: '#8b5cf6', text: 'light' },
-      { name: '600', value: '#7c3aed', text: 'light' },
-      { name: '700', value: '#6d28d9', text: 'light' },
-    ],
-  },
-  {
-    id: 'compliance',
-    name: 'Compliance (Purple)',
-    description: 'Audit, Controls & Regulierung',
-    main: '#9333ea',
-    shades: [
-      { name: '100', value: '#f3e8ff', text: 'dark' },
-      { name: '500', value: '#a855f7', text: 'light' },
-      { name: '600', value: '#9333ea', text: 'light' },
-      { name: '700', value: '#7e22ce', text: 'light' },
-    ],
-  },
-  {
-    id: 'ai',
-    name: 'KI & Automatisierung (Teal)',
-    description: 'LLM, OCR, RAG & Machine Learning',
-    main: '#14b8a6',
-    shades: [
-      { name: '100', value: '#ccfbf1', text: 'dark' },
-      { name: '500', value: '#14b8a6', text: 'light' },
-      { name: '600', value: '#0d9488', text: 'light' },
-      { name: '700', value: '#0f766e', text: 'light' },
-    ],
-  },
-  {
-    id: 'infrastructure',
-    name: 'Infrastruktur (Orange)',
-    description: 'GPU, Security, CI/CD & Monitoring',
-    main: '#f97316',
-    shades: [
-      { name: '100', value: '#ffedd5', text: 'dark' },
-      { name: '500', value: '#f97316', text: 'light' },
-      { name: '600', value: '#ea580c', text: 'light' },
-      { name: '700', value: '#c2410c', text: 'light' },
-    ],
-  },
-  {
-    id: 'education',
-    name: 'Bildung & Schule (Blue)',
-    description: 'Bildungsquellen & Lehrplaene',
-    main: '#3b82f6',
-    shades: [
-      { name: '100', value: '#dbeafe', text: 'dark' },
-      { name: '500', value: '#3b82f6', text: 'light' },
-      { name: '600', value: '#2563eb', text: 'light' },
-      { name: '700', value: '#1d4ed8', text: 'light' },
-    ],
-  },
-  {
-    id: 'communication',
-    name: 'Kommunikation (Green)',
-    description: 'Matrix, E-Mail & Benachrichtigungen',
-    main: '#22c55e',
-    shades: [
-      { name: '100', value: '#dcfce7', text: 'dark' },
-      { name: '500', value: '#22c55e', text: 'light' },
-      { name: '600', value: '#16a34a', text: 'light' },
-      { name: '700', value: '#15803d', text: 'light' },
-    ],
-  },
-  {
-    id: 'development',
-    name: 'Entwicklung (Slate)',
-    description: 'Workflow, Game, Docs & Brandbook',
-    main: '#64748b',
-    shades: [
-      { name: '100', value: '#f1f5f9', text: 'dark' },
-      { name: '500', value: '#64748b', text: 'light' },
-      { name: '600', value: '#475569', text: 'light' },
-      { name: '700', value: '#334155', text: 'light' },
-    ],
-  },
-]
-
-// Semantic colors
-const SEMANTIC_COLORS = {
-  success: {
-    name: 'Success (Emerald)',
-    shades: [
-      { name: '100', value: '#d1fae5', text: 'dark' },
-      { name: '500', value: '#10b981', text: 'light' },
-      { name: '600', value: '#059669', text: 'light' },
-    ],
-  },
-  warning: {
-    name: 'Warning (Amber)',
-    shades: [
-      { name: '100', value: '#fef3c7', text: 'dark' },
-      { name: '500', value: '#f59e0b', text: 'dark' },
-      { name: '600', value: '#d97706', text: 'light' },
-    ],
-  },
-  danger: {
-    name: 'Danger (Red)',
-    shades: [
-      { name: '100', value: '#fee2e2', text: 'dark' },
-      { name: '500', value: '#ef4444', text: 'light' },
-      { name: '600', value: '#dc2626', text: 'light' },
-    ],
-  },
-  neutral: {
-    name: 'Neutral (Slate)',
-    shades: [
-      { name: '50', value: '#f8fafc', text: 'dark' },
-      { name: '100', value: '#f1f5f9', text: 'dark' },
-      { name: '200', value: '#e2e8f0', text: 'dark' },
-      { name: '300', value: '#cbd5e1', text: 'dark' },
-      { name: '400', value: '#94a3b8', text: 'dark' },
-      { name: '500', value: '#64748b', text: 'light' },
-      { name: '600', value: '#475569', text: 'light' },
-      { name: '700', value: '#334155', text: 'light' },
-      { name: '800', value: '#1e293b', text: 'light' },
-      { name: '900', value: '#0f172a', text: 'light' },
-    ],
-  },
-}
-
-const TYPOGRAPHY = {
-  fontFamily: "'Inter', system-ui, -apple-system, sans-serif",
-  weights: [
-    { weight: 400, name: 'Regular', usage: 'Fliesstext, Beschreibungen' },
-    { weight: 500, name: 'Medium', usage: 'Labels, Buttons, Navigation' },
-    { weight: 600, name: 'Semi-Bold', usage: 'Ueberschriften H3-H6, Card-Titel' },
-    { weight: 700, name: 'Bold', usage: 'Ueberschriften H1-H2, CTAs' },
-  ],
-  sizes: [
-    { name: 'xs', size: '0.75rem (12px)', usage: 'Footnotes, Badges' },
-    { name: 'sm', size: '0.875rem (14px)', usage: 'Nebentext, Labels' },
-    { name: 'base', size: '1rem (16px)', usage: 'Fliesstext, Body' },
-    { name: 'lg', size: '1.125rem (18px)', usage: 'Lead Text' },
-    { name: 'xl', size: '1.25rem (20px)', usage: 'H4, Card Titles' },
-    { name: '2xl', size: '1.5rem (24px)', usage: 'H3' },
-    { name: '3xl', size: '1.875rem (30px)', usage: 'H2' },
-    { name: '4xl', size: '2.25rem (36px)', usage: 'H1, Hero' },
-  ],
-}
-
-const SPACING = [
-  { name: '1', value: '0.25rem (4px)', usage: 'Minimaler Abstand' },
-  { name: '2', value: '0.5rem (8px)', usage: 'Kompakter Abstand' },
-  { name: '3', value: '0.75rem (12px)', usage: 'Standard klein' },
-  { name: '4', value: '1rem (16px)', usage: 'Standard' },
-  { name: '6', value: '1.5rem (24px)', usage: 'Card Padding' },
-  { name: '8', value: '2rem (32px)', usage: 'Section Spacing' },
-]
-
-const VOICE_TONE = {
-  attributes: [
-    'Professionell & Vertrauenswuerdig',
-    'Klar & Direkt',
-    'Hilfreich & Unterstuetzend',
-    'Modern & Innovativ',
-    'DSGVO-konform & Sicher',
-  ],
-  doList: [
-    'Einfache, klare Sprache verwenden',
-    'Aktiv formulieren',
-    'Nutzenorientiert schreiben',
-    'Konkrete Beispiele geben',
-    'Technische Begriffe erklaeren',
-  ],
-  dontList: [
-    'Fachjargon ohne Erklaerung',
-    'Passive Formulierungen',
-    'Uebertriebene Versprechen',
-    'Marketing-Floskeln',
-    'Unpersoenliche Ansprache',
-  ],
-}
-
-function ColorSwatch({ color, name }: { color: { name: string; value: string; text: string }; name?: string }) {
-  const [copied, setCopied] = useState(false)
-
-  const copyToClipboard = () => {
-    navigator.clipboard.writeText(color.value)
-    setCopied(true)
-    setTimeout(() => setCopied(false), 2000)
-  }
-
-  return (
-    <button
-      onClick={copyToClipboard}
-      className="group flex flex-col items-center"
-      title={`Klicken zum Kopieren: ${color.value}`}
-    >
-      <div
-        className="w-16 h-16 rounded-xl shadow-sm border border-slate-200 transition-transform group-hover:scale-110 flex items-center justify-center"
-        style={{ backgroundColor: color.value }}
-      >
-        {copied && (
-          <svg className={`w-5 h-5 ${color.text === 'light' ? 'text-white' : 'text-slate-900'}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-          </svg>
-        )}
-      </div>
-      <span className="text-xs text-slate-600 mt-1 font-medium">{color.name}</span>
-      <span className="text-xs text-slate-400 font-mono">{color.value}</span>
-    </button>
-  )
-}
+import { TABS, type BrandbookTab } from './constants'
+import { ColorsTab } from './_components/ColorsTab'
+import { TypographyTab } from './_components/TypographyTab'
+import { ComponentsTab } from './_components/ComponentsTab'
+import { LogoTab } from './_components/LogoTab'
+import { VoiceTab } from './_components/VoiceTab'
 
 export default function BrandbookPage() {
-  const [activeTab, setActiveTab] = useState<'colors' | 'typography' | 'components' | 'logo' | 'voice'>('colors')
+  const [activeTab, setActiveTab] = useState<BrandbookTab>('colors')
 
   return (
     <div>
@@ -276,16 +31,10 @@ export default function BrandbookPage() {
       {/* Tabs */}
       <div className="mb-6">
         <div className="flex gap-1 bg-slate-100 p-1 rounded-xl w-fit">
-          {[
-            { id: 'colors', label: 'Farben' },
-            { id: 'typography', label: 'Typografie' },
-            { id: 'components', label: 'Komponenten' },
-            { id: 'logo', label: 'Logo' },
-            { id: 'voice', label: 'Tonalitaet' },
-          ].map((tab) => (
+          {TABS.map((tab) => (
             <button
               key={tab.id}
-              onClick={() => setActiveTab(tab.id as typeof activeTab)}
+              onClick={() => setActiveTab(tab.id)}
               className={`px-4 py-2 text-sm font-medium rounded-lg transition-colors ${
                 activeTab === tab.id
                   ? 'bg-white text-slate-900 shadow-sm'
@@ -298,846 +47,12 @@ export default function BrandbookPage() {
         </div>
       </div>
 
-      {/* Colors Tab */}
-      {activeTab === 'colors' && (
-        <div className="space-y-6">
-          {/* Primary Color */}
-          <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
-            <h3 className="text-lg font-semibold text-slate-900 mb-2">{PRIMARY_COLORS.name}</h3>
-            <p className="text-sm text-slate-500 mb-4">{PRIMARY_COLORS.description}</p>
-            <div className="flex gap-4 flex-wrap">
-              {PRIMARY_COLORS.shades.map((shade) => (
-                <ColorSwatch key={shade.name} color={shade} />
-              ))}
-            </div>
-          </div>
-
-          {/* Accent Color */}
-          <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
-            <h3 className="text-lg font-semibold text-slate-900 mb-2">{ACCENT_COLORS.name}</h3>
-            <p className="text-sm text-slate-500 mb-4">{ACCENT_COLORS.description}</p>
-            <div className="flex gap-4 flex-wrap">
-              {ACCENT_COLORS.shades.map((shade) => (
-                <ColorSwatch key={shade.name} color={shade} />
-              ))}
-            </div>
-            {/* Logo Gradient Preview */}
-            <div className="mt-6 pt-4 border-t border-slate-200">
-              <h4 className="text-sm font-medium text-slate-700 mb-3">Logo-Gradient</h4>
-              <div className="flex items-center gap-4">
-                <div className="w-16 h-16 rounded-xl flex items-center justify-center" style={{ background: 'linear-gradient(to bottom right, #0ea5e9, #d946ef)' }}>
-                  <span className="text-2xl font-bold text-white">B</span>
-                </div>
-                <div className="text-sm text-slate-600">
-                  <code className="bg-slate-100 px-2 py-1 rounded font-mono text-xs">
-                    bg-gradient-to-br from-primary-500 to-accent-500
-                  </code>
-                  <p className="mt-1 text-slate-500">Sky Blue (#0ea5e9) → Fuchsia (#d946ef)</p>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Category Colors */}
-          <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
-            <h3 className="text-lg font-semibold text-slate-900 mb-4">Kategorie-Farben</h3>
-            <p className="text-sm text-slate-500 mb-6">
-              Jede Kategorie hat eine eigene Farbe fuer Navigation, Module und Akzente.
-            </p>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-              {CATEGORY_COLORS.map((cat) => (
-                <div key={cat.id} className="border border-slate-200 rounded-xl p-4">
-                  <div className="flex items-center gap-3 mb-3">
-                    <div
-                      className="w-8 h-8 rounded-lg"
-                      style={{ backgroundColor: cat.main }}
-                    />
-                    <div>
-                      <h4 className="font-medium text-slate-900">{cat.name}</h4>
-                      <p className="text-xs text-slate-500">{cat.description}</p>
-                    </div>
-                  </div>
-                  <div className="flex gap-2">
-                    {cat.shades.map((shade) => (
-                      <ColorSwatch key={shade.name} color={shade} />
-                    ))}
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-
-          {/* Semantic Colors */}
-          <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
-            <h3 className="text-lg font-semibold text-slate-900 mb-4">Semantische Farben</h3>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-              {Object.entries(SEMANTIC_COLORS).map(([key, palette]) => (
-                <div key={key} className="border border-slate-200 rounded-xl p-4">
-                  <h4 className="font-medium text-slate-900 mb-3">{palette.name}</h4>
-                  <div className="flex gap-2">
-                    {palette.shades.map((shade) => (
-                      <ColorSwatch key={shade.name} color={shade} />
-                    ))}
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-
-          {/* Usage Guidelines */}
-          <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
-            <h3 className="text-lg font-semibold text-slate-900 mb-4">Verwendungsrichtlinien</h3>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-              <div>
-                <h4 className="font-medium text-slate-700 mb-2">Primary (Sky Blue)</h4>
-                <ul className="text-sm text-slate-600 space-y-1">
-                  <li>- Primaere Buttons und CTAs</li>
-                  <li>- Links und interaktive Elemente</li>
-                  <li>- Fokuszustaende</li>
-                  <li>- Ausgewaehlte Navigation</li>
-                </ul>
-              </div>
-              <div>
-                <h4 className="font-medium text-slate-700 mb-2">Kategorie-Farben</h4>
-                <ul className="text-sm text-slate-600 space-y-1">
-                  <li>- Sidebar-Navigation Icons</li>
-                  <li>- Modul-Cards und Badges</li>
-                  <li>- Bereichs-spezifische Akzente</li>
-                  <li>- Breadcrumbs und Headers</li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Typography Tab */}
-      {activeTab === 'typography' && (
-        <div className="space-y-6">
-          {/* Font Family */}
-          <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
-            <h3 className="text-lg font-semibold text-slate-900 mb-4">Schriftart: Inter</h3>
-            <div className="bg-slate-50 rounded-lg p-4 font-mono text-sm text-slate-600 mb-4">
-              font-family: {TYPOGRAPHY.fontFamily};
-            </div>
-            <p className="text-sm text-slate-600">
-              Inter ist eine moderne, variable Sans-Serif Schrift, optimiert fuer Bildschirme.
-              Sie ist unter der SIL Open Font License verfuegbar und frei fuer kommerzielle Nutzung.
-            </p>
-          </div>
-
-          {/* Font Licenses */}
-          <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
-            <h3 className="text-lg font-semibold text-slate-900 mb-4">Lizenzen</h3>
-            <div className="space-y-4">
-              {/* Inter License */}
-              <div className="border border-slate-200 rounded-xl p-4">
-                <div className="flex items-start justify-between mb-2">
-                  <div>
-                    <h4 className="font-semibold text-slate-900">Inter Font</h4>
-                    <p className="text-sm text-slate-500">Designer: Rasmus Andersson</p>
-                  </div>
-                  <span className="px-2.5 py-1 bg-green-100 text-green-700 text-xs font-medium rounded-full">
-                    OFL-1.1
-                  </span>
-                </div>
-                <div className="grid grid-cols-2 gap-4 mt-3 text-sm">
-                  <div>
-                    <span className="text-slate-500">Lizenz:</span>
-                    <span className="ml-2 text-slate-700">SIL Open Font License 1.1</span>
-                  </div>
-                  <div>
-                    <span className="text-slate-500">Kommerzielle Nutzung:</span>
-                    <span className="ml-2 text-green-600 font-medium">Ja, uneingeschraenkt</span>
-                  </div>
-                  <div>
-                    <span className="text-slate-500">Attribution erforderlich:</span>
-                    <span className="ml-2 text-slate-700">Nein</span>
-                  </div>
-                  <div>
-                    <span className="text-slate-500">Repository:</span>
-                    <a href="https://github.com/rsms/inter" target="_blank" rel="noopener noreferrer" className="ml-2 text-primary-600 hover:underline">
-                      github.com/rsms/inter
-                    </a>
-                  </div>
-                </div>
-              </div>
-
-              {/* Heroicons License */}
-              <div className="border border-slate-200 rounded-xl p-4">
-                <div className="flex items-start justify-between mb-2">
-                  <div>
-                    <h4 className="font-semibold text-slate-900">Heroicons</h4>
-                    <p className="text-sm text-slate-500">Designer: Tailwind Labs</p>
-                  </div>
-                  <span className="px-2.5 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded-full">
-                    MIT
-                  </span>
-                </div>
-                <div className="grid grid-cols-2 gap-4 mt-3 text-sm">
-                  <div>
-                    <span className="text-slate-500">Lizenz:</span>
-                    <span className="ml-2 text-slate-700">MIT License</span>
-                  </div>
-                  <div>
-                    <span className="text-slate-500">Kommerzielle Nutzung:</span>
-                    <span className="ml-2 text-green-600 font-medium">Ja, uneingeschraenkt</span>
-                  </div>
-                  <div>
-                    <span className="text-slate-500">Attribution erforderlich:</span>
-                    <span className="ml-2 text-slate-700">Nein (empfohlen)</span>
-                  </div>
-                  <div>
-                    <span className="text-slate-500">Repository:</span>
-                    <a href="https://github.com/tailwindlabs/heroicons" target="_blank" rel="noopener noreferrer" className="ml-2 text-primary-600 hover:underline">
-                      github.com/tailwindlabs/heroicons
-                    </a>
-                  </div>
-                </div>
-              </div>
-
-              {/* License Summary */}
-              <div className="bg-green-50 border border-green-200 rounded-xl p-4">
-                <div className="flex items-center gap-2 mb-2">
-                  <svg className="w-5 h-5 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-                  </svg>
-                  <h4 className="font-semibold text-green-800">Lizenz-Compliance</h4>
-                </div>
-                <p className="text-sm text-green-700">
-                  Alle verwendeten Schriftarten und Icons sind Open Source und fuer kommerzielle Nutzung freigegeben.
-                  Keine Attribution erforderlich. Vollstaendige Dokumentation in der SBOM.
-                </p>
-              </div>
-            </div>
-          </div>
-
-          {/* Font Weights */}
-          <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
-            <h3 className="text-lg font-semibold text-slate-900 mb-4">Schriftschnitte</h3>
-            <div className="space-y-4">
-              {TYPOGRAPHY.weights.map((w) => (
-                <div key={w.weight} className="flex items-center gap-6 pb-4 border-b border-slate-100 last:border-0 last:pb-0">
-                  <span
-                    className="text-2xl w-64"
-                    style={{ fontWeight: w.weight }}
-                  >
-                    The quick brown fox
-                  </span>
-                  <div className="flex-1">
-                    <span className="font-medium text-slate-900">{w.name} ({w.weight})</span>
-                    <span className="text-sm text-slate-500 ml-4">{w.usage}</span>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-
-          {/* Font Sizes */}
-          <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
-            <h3 className="text-lg font-semibold text-slate-900 mb-4">Schriftgroessen</h3>
-            <div className="space-y-3">
-              {TYPOGRAPHY.sizes.map((s) => (
-                <div key={s.name} className="flex items-baseline gap-4 border-b border-slate-100 pb-3 last:border-0">
-                  <span className="w-16 text-sm font-mono text-slate-500 bg-slate-100 px-2 py-0.5 rounded">{s.name}</span>
-                  <span className="w-36 text-sm text-slate-600">{s.size}</span>
-                  <span className="text-sm text-slate-500">{s.usage}</span>
-                </div>
-              ))}
-            </div>
-          </div>
-
-          {/* Headings Preview */}
-          <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
-            <h3 className="text-lg font-semibold text-slate-900 mb-4">Ueberschriften-Hierarchie</h3>
-            <div className="space-y-4">
-              <div className="text-4xl font-bold text-slate-900">H1: Hauptueberschrift</div>
-              <div className="text-3xl font-bold text-slate-900">H2: Abschnittsueberschrift</div>
-              <div className="text-2xl font-semibold text-slate-900">H3: Unterabschnitt</div>
-              <div className="text-xl font-semibold text-slate-900">H4: Card-Titel</div>
-              <div className="text-lg font-medium text-slate-900">H5: Kleiner Titel</div>
-              <div className="text-base font-medium text-slate-900">H6: Label</div>
-            </div>
-          </div>
-
-          {/* Spacing */}
-          <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
-            <h3 className="text-lg font-semibold text-slate-900 mb-4">Spacing Scale</h3>
-            <div className="space-y-3">
-              {SPACING.map((s) => (
-                <div key={s.name} className="flex items-center gap-4">
-                  <span className="w-12 text-sm font-mono text-slate-500 bg-slate-100 px-2 py-0.5 rounded text-center">{s.name}</span>
-                  <div
-                    className="bg-primary-500 h-4 rounded"
-                    style={{ width: `${parseInt(s.value) * 16}px` }}
-                  />
-                  <span className="text-sm text-slate-600">{s.value}</span>
-                  <span className="text-sm text-slate-400">{s.usage}</span>
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Components Tab */}
-      {activeTab === 'components' && (
-        <div className="space-y-6">
-          {/* Buttons */}
-          <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
-            <h3 className="text-lg font-semibold text-slate-900 mb-4">Buttons</h3>
-            <div className="flex flex-wrap gap-4 mb-6">
-              <button className="px-6 py-2 bg-primary-600 text-white font-medium rounded-lg hover:bg-primary-700 transition-colors">
-                Primary
-              </button>
-              <button className="px-6 py-2 bg-slate-100 text-slate-700 font-medium rounded-lg hover:bg-slate-200 transition-colors">
-                Secondary
-              </button>
-              <button className="px-6 py-2 border border-slate-300 text-slate-700 font-medium rounded-lg hover:bg-slate-50 transition-colors">
-                Outline
-              </button>
-              <button className="px-6 py-2 text-primary-600 font-medium rounded-lg hover:bg-primary-50 transition-colors">
-                Ghost
-              </button>
-              <button className="px-6 py-2 bg-red-600 text-white font-medium rounded-lg hover:bg-red-700 transition-colors">
-                Danger
-              </button>
-            </div>
-            <div className="flex flex-wrap gap-4">
-              <button className="px-4 py-1.5 bg-primary-600 text-white text-sm font-medium rounded-lg">
-                Small
-              </button>
-              <button className="px-6 py-2 bg-primary-600 text-white font-medium rounded-lg">
-                Medium
-              </button>
-              <button className="px-8 py-3 bg-primary-600 text-white text-lg font-medium rounded-lg">
-                Large
-              </button>
-            </div>
-          </div>
-
-          {/* Inputs */}
-          <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
-            <h3 className="text-lg font-semibold text-slate-900 mb-4">Eingabefelder</h3>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div>
-                <label className="block text-sm font-medium text-slate-700 mb-1">Standard Input</label>
-                <input
-                  type="text"
-                  placeholder="Placeholder..."
-                  className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none"
-                />
-              </div>
-              <div>
-                <label className="block text-sm font-medium text-slate-700 mb-1">Mit Icon</label>
-                <div className="relative">
-                  <input
-                    type="text"
-                    placeholder="Suchen..."
-                    className="w-full pl-10 pr-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none"
-                  />
-                  <svg className="w-5 h-5 text-slate-400 absolute left-3 top-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                  </svg>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Cards */}
-          <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
-            <h3 className="text-lg font-semibold text-slate-900 mb-4">Cards</h3>
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-              <div className="bg-white rounded-xl border border-slate-200 p-4 hover:shadow-lg hover:border-primary-300 transition-all cursor-pointer">
-                <div className="w-10 h-10 bg-primary-100 rounded-lg flex items-center justify-center mb-3">
-                  <svg className="w-5 h-5 text-primary-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
-                  </svg>
-                </div>
-                <h4 className="font-semibold text-slate-900 mb-1">Feature Card</h4>
-                <p className="text-sm text-slate-600">Standard Card mit Hover-Effekt.</p>
-              </div>
-              <div className="rounded-xl p-4 text-white" style={{ background: 'linear-gradient(to bottom right, #0ea5e9, #d946ef)' }}>
-                <h4 className="font-semibold mb-1">Highlight Card</h4>
-                <p className="text-sm text-white/80">Mit Gradient-Hintergrund.</p>
-              </div>
-              <div className="bg-slate-900 rounded-xl p-4 text-white">
-                <h4 className="font-semibold mb-1">Dark Card</h4>
-                <p className="text-sm text-slate-400">Sidebar-Style.</p>
-              </div>
-            </div>
-          </div>
-
-          {/* Category Cards */}
-          <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
-            <h3 className="text-lg font-semibold text-slate-900 mb-4">Kategorie-Cards</h3>
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-              {CATEGORY_COLORS.slice(0, 3).map((cat) => (
-                <div
-                  key={cat.id}
-                  className="rounded-xl border p-4 hover:shadow-lg transition-all cursor-pointer"
-                  style={{
-                    borderColor: cat.shades[0].value,
-                    backgroundColor: cat.shades[0].value + '40'
-                  }}
-                >
-                  <div
-                    className="w-10 h-10 rounded-lg flex items-center justify-center mb-3"
-                    style={{ backgroundColor: cat.main }}
-                  >
-                    <svg className="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
-                    </svg>
-                  </div>
-                  <h4 className="font-semibold text-slate-900 mb-1">{cat.name.split(' (')[0]}</h4>
-                  <p className="text-sm text-slate-600">{cat.description}</p>
-                </div>
-              ))}
-            </div>
-          </div>
-
-          {/* Badges */}
-          <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
-            <h3 className="text-lg font-semibold text-slate-900 mb-4">Badges & Tags</h3>
-            <div className="flex flex-wrap gap-2 mb-4">
-              <span className="px-2.5 py-1 bg-primary-100 text-primary-700 text-xs font-medium rounded-full">Primary</span>
-              <span className="px-2.5 py-1 bg-green-100 text-green-700 text-xs font-medium rounded-full">Success</span>
-              <span className="px-2.5 py-1 bg-amber-100 text-amber-700 text-xs font-medium rounded-full">Warning</span>
-              <span className="px-2.5 py-1 bg-red-100 text-red-700 text-xs font-medium rounded-full">Danger</span>
-              <span className="px-2.5 py-1 bg-slate-100 text-slate-700 text-xs font-medium rounded-full">Neutral</span>
-            </div>
-            <h4 className="font-medium text-slate-700 mb-2 mt-4">Kategorie-Badges</h4>
-            <div className="flex flex-wrap gap-2">
-              {CATEGORY_COLORS.map((cat) => (
-                <span
-                  key={cat.id}
-                  className="px-2.5 py-1 text-xs font-medium rounded-full"
-                  style={{
-                    backgroundColor: cat.shades[0].value,
-                    color: cat.shades[3].value
-                  }}
-                >
-                  {cat.name.split(' (')[0]}
-                </span>
-              ))}
-            </div>
-          </div>
-
-          {/* Border Radius */}
-          <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
-            <h3 className="text-lg font-semibold text-slate-900 mb-4">Border Radius</h3>
-            <div className="flex gap-6 items-end">
-              <div className="text-center">
-                <div className="w-16 h-16 bg-primary-500 rounded"></div>
-                <span className="text-xs text-slate-500 mt-2 block">rounded (4px)</span>
-              </div>
-              <div className="text-center">
-                <div className="w-16 h-16 bg-primary-500 rounded-lg"></div>
-                <span className="text-xs text-slate-500 mt-2 block">rounded-lg (8px)</span>
-              </div>
-              <div className="text-center">
-                <div className="w-16 h-16 bg-primary-500 rounded-xl"></div>
-                <span className="text-xs text-slate-500 mt-2 block">rounded-xl (12px)</span>
-              </div>
-              <div className="text-center">
-                <div className="w-16 h-16 bg-primary-500 rounded-2xl"></div>
-                <span className="text-xs text-slate-500 mt-2 block">rounded-2xl (16px)</span>
-              </div>
-              <div className="text-center">
-                <div className="w-16 h-16 bg-primary-500 rounded-full"></div>
-                <span className="text-xs text-slate-500 mt-2 block">rounded-full</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Logo Tab */}
-      {activeTab === 'logo' && (
-        <div className="space-y-6">
-          {/* Logo Display */}
-          <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
-            <h3 className="text-lg font-semibold text-slate-900 mb-4">Logo</h3>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-              <div className="bg-white border border-slate-200 rounded-xl p-8 flex items-center justify-center">
-                <div className="flex items-center gap-3">
-                  <div className="w-12 h-12 rounded-xl flex items-center justify-center" style={{ background: 'linear-gradient(to bottom right, #0ea5e9, #d946ef)' }}>
-                    <span className="text-2xl font-bold text-white">B</span>
-                  </div>
-                  <div>
-                    <span className="text-2xl font-bold text-slate-900">BreakPilot</span>
-                    <span className="text-sm text-slate-500 block">Admin v2</span>
-                  </div>
-                </div>
-              </div>
-              <div className="bg-slate-900 rounded-xl p-8 flex items-center justify-center">
-                <div className="flex items-center gap-3">
-                  <div className="w-12 h-12 rounded-xl flex items-center justify-center" style={{ background: 'linear-gradient(to bottom right, #38bdf8, #e879f9)' }}>
-                    <span className="text-2xl font-bold text-white">B</span>
-                  </div>
-                  <div>
-                    <span className="text-2xl font-bold text-white">BreakPilot</span>
-                    <span className="text-sm text-slate-400 block">Admin v2</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-            {/* Gradient Info */}
-            <div className="mt-6 pt-4 border-t border-slate-200">
-              <div className="flex items-center gap-4">
-                <code className="bg-slate-100 px-3 py-1.5 rounded-lg font-mono text-xs text-slate-700">
-                  background: linear-gradient(to bottom right, #0ea5e9, #d946ef)
-                </code>
-                <span className="text-sm text-slate-500">Primary → Accent (Sky Blue → Fuchsia)</span>
-              </div>
-            </div>
-          </div>
-
-          {/* Logo Variations */}
-          <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
-            <h3 className="text-lg font-semibold text-slate-900 mb-4">Logo-Varianten</h3>
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-              <div className="border border-slate-200 rounded-xl p-4 flex flex-col items-center gap-2">
-                <div className="w-12 h-12 rounded-xl flex items-center justify-center" style={{ background: 'linear-gradient(to bottom right, #0ea5e9, #d946ef)' }}>
-                  <span className="text-2xl font-bold text-white">B</span>
-                </div>
-                <span className="text-xs text-slate-600">Icon Only</span>
-              </div>
-              <div className="border border-slate-200 rounded-xl p-4 flex flex-col items-center gap-2">
-                <span className="text-xl font-bold text-slate-900">BreakPilot</span>
-                <span className="text-xs text-slate-600">Text Only</span>
-              </div>
-              <div className="border border-slate-200 rounded-xl p-4 flex flex-col items-center gap-2">
-                <div className="flex items-center gap-2">
-                  <div className="w-8 h-8 rounded-lg flex items-center justify-center" style={{ background: 'linear-gradient(to bottom right, #0ea5e9, #d946ef)' }}>
-                    <span className="text-lg font-bold text-white">B</span>
-                  </div>
-                  <span className="text-lg font-bold text-slate-900">BreakPilot</span>
-                </div>
-                <span className="text-xs text-slate-600">Horizontal</span>
-              </div>
-              <div className="border border-slate-200 rounded-xl p-4 flex flex-col items-center gap-2">
-                <div className="flex flex-col items-center">
-                  <div className="w-10 h-10 rounded-xl flex items-center justify-center mb-1" style={{ background: 'linear-gradient(to bottom right, #0ea5e9, #d946ef)' }}>
-                    <span className="text-xl font-bold text-white">B</span>
-                  </div>
-                  <span className="text-sm font-bold text-slate-900">BreakPilot</span>
-                </div>
-                <span className="text-xs text-slate-600">Stacked</span>
-              </div>
-            </div>
-          </div>
-
-          {/* Favicon */}
-          <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
-            <h3 className="text-lg font-semibold text-slate-900 mb-4">Favicon & App Icon</h3>
-            <div className="flex gap-6 items-end">
-              <div className="text-center">
-                <div className="w-8 h-8 rounded flex items-center justify-center" style={{ background: 'linear-gradient(to bottom right, #0ea5e9, #d946ef)' }}>
-                  <span className="text-sm font-bold text-white">B</span>
-                </div>
-                <span className="text-xs text-slate-500 mt-2 block">16x16</span>
-              </div>
-              <div className="text-center">
-                <div className="w-12 h-12 rounded-lg flex items-center justify-center" style={{ background: 'linear-gradient(to bottom right, #0ea5e9, #d946ef)' }}>
-                  <span className="text-xl font-bold text-white">B</span>
-                </div>
-                <span className="text-xs text-slate-500 mt-2 block">32x32</span>
-              </div>
-              <div className="text-center">
-                <div className="w-16 h-16 rounded-xl flex items-center justify-center" style={{ background: 'linear-gradient(to bottom right, #0ea5e9, #d946ef)' }}>
-                  <span className="text-2xl font-bold text-white">B</span>
-                </div>
-                <span className="text-xs text-slate-500 mt-2 block">180x180</span>
-              </div>
-              <div className="text-center">
-                <div className="w-24 h-24 rounded-2xl flex items-center justify-center" style={{ background: 'linear-gradient(to bottom right, #0ea5e9, #d946ef)' }}>
-                  <span className="text-4xl font-bold text-white">B</span>
-                </div>
-                <span className="text-xs text-slate-500 mt-2 block">512x512</span>
-              </div>
-            </div>
-          </div>
-
-          {/* Donts */}
-          <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
-            <h3 className="text-lg font-semibold text-slate-900 mb-4">Nicht erlaubt</h3>
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-              <div className="border border-red-200 bg-red-50 rounded-xl p-4 text-center">
-                <div className="flex items-center gap-2 justify-center opacity-50">
-                  <div className="w-8 h-8 bg-red-500 rounded-lg flex items-center justify-center">
-                    <span className="text-lg font-bold text-white">B</span>
-                  </div>
-                  <span className="text-lg font-bold text-red-500">BreakPilot</span>
-                </div>
-                <span className="text-xs text-red-600 mt-2 block">Falsche Farben</span>
-              </div>
-              <div className="border border-red-200 bg-red-50 rounded-xl p-4 text-center">
-                <div className="flex items-center gap-2 justify-center" style={{ transform: 'skewX(-10deg)' }}>
-                  <div className="w-8 h-8 rounded-lg flex items-center justify-center" style={{ background: 'linear-gradient(to bottom right, #0ea5e9, #d946ef)' }}>
-                    <span className="text-lg font-bold text-white">B</span>
-                  </div>
-                  <span className="text-lg font-bold text-slate-900">BreakPilot</span>
-                </div>
-                <span className="text-xs text-red-600 mt-2 block">Verzerrt</span>
-              </div>
-              <div className="border border-red-200 bg-red-50 rounded-xl p-4 text-center">
-                <div className="flex items-center gap-2 justify-center">
-                  <div className="w-8 h-8 rounded-lg flex items-center justify-center" style={{ background: 'linear-gradient(to bottom right, #0ea5e9, #d946ef)' }}>
-                    <span className="text-lg font-bold text-white">B</span>
-                  </div>
-                  <span className="text-lg font-bold text-slate-900">Break Pilot</span>
-                </div>
-                <span className="text-xs text-red-600 mt-2 block">Falsche Schreibweise</span>
-              </div>
-            </div>
-          </div>
-
-          {/* Studio Logo - BP mit Fluegeln */}
-          <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
-            <h3 className="text-lg font-semibold text-slate-900 mb-2">Studio Logo (BP mit Fluegeln)</h3>
-            <p className="text-sm text-slate-500 mb-6">
-              Das Studio-Logo verwendet ein rotes Farbschema und zeigt &quot;BP&quot; mit stilisierten Fluegeln.
-              Es gibt drei Design-Varianten fuer unterschiedliche Anwendungsfaelle.
-            </p>
-
-            {/* Variante A: Cupertino Clean */}
-            <div className="mb-6 p-4 bg-slate-50 rounded-xl">
-              <h4 className="font-medium text-slate-700 mb-4">A: Cupertino Clean</h4>
-              <div className="flex items-center gap-8">
-                <div className="flex items-center gap-3">
-                  <div className="w-12 h-12 relative">
-                    <div className="absolute inset-0 rounded-xl shadow-lg" style={{ background: 'linear-gradient(to bottom right, #ef4444, #b91c1c)' }} />
-                    <div className="absolute inset-0 flex items-center justify-center">
-                      <svg viewBox="0 0 40 40" className="w-9 h-9">
-                        <circle cx="20" cy="20" r="14" fill="rgba(255,255,255,0.15)" />
-                        <text x="20" y="26" textAnchor="middle" fill="white" fontSize="16" fontWeight="bold" fontFamily="system-ui">BP</text>
-                        <path d="M6 22 L12 20 M28 20 L34 22" stroke="rgba(255,255,255,0.5)" strokeWidth="1.5" strokeLinecap="round" />
-                      </svg>
-                    </div>
-                  </div>
-                  <div>
-                    <span className="font-semibold text-slate-900 text-lg">Break<span className="text-red-600">Pilot</span></span>
-                    <span className="text-slate-400 text-sm block">Studio</span>
-                  </div>
-                </div>
-                <div className="text-sm text-slate-600">
-                  <code className="bg-white px-2 py-1 rounded font-mono text-xs">#ef4444 → #b91c1c</code>
-                  <p className="mt-1 text-slate-500">Minimalistisch, SF-Style, BP mit Fluegel-Linien</p>
-                </div>
-              </div>
-            </div>
-
-            {/* Variante B: Glassmorphism Pro */}
-            <div className="mb-6 p-4 rounded-xl" style={{ background: 'linear-gradient(to bottom right, #312e81, #581c87, #831843)' }}>
-              <h4 className="font-medium text-white/80 mb-4">B: Glassmorphism Pro</h4>
-              <div className="flex items-center gap-8">
-                <div className="flex items-center gap-4">
-                  <div className="w-12 h-12 relative">
-                    <div className="absolute inset-0 rounded-2xl blur-md opacity-50" style={{ background: 'linear-gradient(to bottom right, #f87171, #dc2626)' }} />
-                    <div className="absolute inset-0 rounded-2xl border border-white/20 shadow-xl" style={{ background: 'linear-gradient(to bottom right, rgba(248,113,113,0.9), rgba(220,38,38,0.9))' }} />
-                    <div className="absolute inset-0 flex items-center justify-center">
-                      <svg viewBox="0 0 40 40" className="w-9 h-9">
-                        <path d="M10 28 L20 8 L30 28 L20 22 Z" fill="rgba(255,255,255,0.9)" />
-                        <path d="M14 24 L20 12 L26 24 L20 20 Z" fill="rgba(255,255,255,0.3)" />
-                      </svg>
-                    </div>
-                  </div>
-                  <div>
-                    <span className="font-semibold text-white text-lg">BreakPilot</span>
-                    <span className="text-white/60 text-sm block">Studio</span>
-                  </div>
-                </div>
-                <div className="text-sm text-white/70">
-                  <code className="bg-white/10 px-2 py-1 rounded font-mono text-xs">#f87171 → #dc2626</code>
-                  <p className="mt-1 text-white/50">Glassmorphism, Glow-Effekt, Papierflugzeug-Silhouette</p>
-                </div>
-              </div>
-            </div>
-
-            {/* Variante C: Bento Style */}
-            <div className="mb-6 p-4 bg-black rounded-xl">
-              <h4 className="font-medium text-white/80 mb-4">C: Bento Style</h4>
-              <div className="flex items-center gap-8">
-                <div className="flex items-center gap-4">
-                  <div className="w-12 h-12 relative">
-                    <div className="absolute inset-0 rounded-xl" style={{ background: 'linear-gradient(to bottom right, #ef4444, #991b1b)' }} />
-                    <div className="absolute inset-0 flex items-center justify-center">
-                      <svg viewBox="0 0 40 40" className="w-9 h-9">
-                        <circle cx="15" cy="14" r="5" stroke="white" strokeWidth="1.5" fill="none" />
-                        <circle cx="15" cy="24" r="5" stroke="white" strokeWidth="1.5" fill="none" />
-                        <line x1="27" y1="10" x2="27" y2="30" stroke="white" strokeWidth="1.5" strokeLinecap="round" />
-                        <circle cx="27" cy="15" r="4" stroke="white" strokeWidth="1.5" fill="none" />
-                      </svg>
-                    </div>
-                  </div>
-                  <div>
-                    <span className="font-semibold text-white text-lg">BreakPilot</span>
-                    <span className="text-white/40 text-sm ml-2">Studio</span>
-                  </div>
-                </div>
-                <div className="text-sm text-white/70">
-                  <code className="bg-white/10 px-2 py-1 rounded font-mono text-xs">#ef4444 → #991b1b</code>
-                  <p className="mt-1 text-white/50">Geometrisch, Monoweight, B+P als Kreise/Linien</p>
-                </div>
-              </div>
-            </div>
-
-            {/* Studio Farbpalette */}
-            <div className="pt-4 border-t border-slate-200">
-              <h4 className="text-sm font-medium text-slate-700 mb-3">Studio Farbpalette (Rot)</h4>
-              <div className="flex gap-3">
-                <div className="text-center">
-                  <div className="w-12 h-12 rounded-lg" style={{ backgroundColor: '#fef2f2' }} />
-                  <span className="text-xs text-slate-500 mt-1 block">red-50</span>
-                </div>
-                <div className="text-center">
-                  <div className="w-12 h-12 rounded-lg" style={{ backgroundColor: '#f87171' }} />
-                  <span className="text-xs text-slate-500 mt-1 block">red-400</span>
-                </div>
-                <div className="text-center">
-                  <div className="w-12 h-12 rounded-lg" style={{ backgroundColor: '#ef4444' }} />
-                  <span className="text-xs text-slate-500 mt-1 block">red-500</span>
-                </div>
-                <div className="text-center">
-                  <div className="w-12 h-12 rounded-lg" style={{ backgroundColor: '#dc2626' }} />
-                  <span className="text-xs text-slate-500 mt-1 block">red-600</span>
-                </div>
-                <div className="text-center">
-                  <div className="w-12 h-12 rounded-lg" style={{ backgroundColor: '#b91c1c' }} />
-                  <span className="text-xs text-slate-500 mt-1 block">red-700</span>
-                </div>
-                <div className="text-center">
-                  <div className="w-12 h-12 rounded-lg" style={{ backgroundColor: '#991b1b' }} />
-                  <span className="text-xs text-slate-500 mt-1 block">red-800</span>
-                </div>
-              </div>
-              <p className="text-xs text-slate-500 mt-3">
-                Quelle: <code className="bg-slate-100 px-1.5 py-0.5 rounded">/studio-v2/components/Logo.tsx</code>
-              </p>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Voice & Tone Tab */}
-      {activeTab === 'voice' && (
-        <div className="space-y-6">
-          {/* Brand Attributes */}
-          <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
-            <h3 className="text-lg font-semibold text-slate-900 mb-4">Markenpersoenlichkeit</h3>
-            <div className="flex flex-wrap gap-3">
-              {VOICE_TONE.attributes.map((attr) => (
-                <span
-                  key={attr}
-                  className="px-4 py-2 bg-primary-100 text-primary-700 rounded-full font-medium"
-                >
-                  {attr}
-                </span>
-              ))}
-            </div>
-          </div>
-
-          {/* Do & Dont */}
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
-              <h3 className="text-lg font-semibold text-green-600 mb-4 flex items-center gap-2">
-                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-                </svg>
-                So schreiben wir
-              </h3>
-              <ul className="space-y-2">
-                {VOICE_TONE.doList.map((item) => (
-                  <li key={item} className="flex items-center gap-2 text-slate-600">
-                    <span className="w-1.5 h-1.5 bg-green-500 rounded-full flex-shrink-0"></span>
-                    {item}
-                  </li>
-                ))}
-              </ul>
-            </div>
-            <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
-              <h3 className="text-lg font-semibold text-red-600 mb-4 flex items-center gap-2">
-                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                </svg>
-                Das vermeiden wir
-              </h3>
-              <ul className="space-y-2">
-                {VOICE_TONE.dontList.map((item) => (
-                  <li key={item} className="flex items-center gap-2 text-slate-600">
-                    <span className="w-1.5 h-1.5 bg-red-500 rounded-full flex-shrink-0"></span>
-                    {item}
-                  </li>
-                ))}
-              </ul>
-            </div>
-          </div>
-
-          {/* Example Texts */}
-          <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
-            <h3 className="text-lg font-semibold text-slate-900 mb-4">Beispieltexte</h3>
-            <div className="space-y-4">
-              <div className="p-4 bg-green-50 border border-green-200 rounded-xl">
-                <span className="text-xs text-green-600 font-medium mb-2 block">GUT</span>
-                <p className="text-slate-700">
-                  &quot;Verwalten Sie Ihre Datenschutz-Dokumente einfach und sicher. Alle Aenderungen werden protokolliert.&quot;
-                </p>
-              </div>
-              <div className="p-4 bg-red-50 border border-red-200 rounded-xl">
-                <span className="text-xs text-red-600 font-medium mb-2 block">SCHLECHT</span>
-                <p className="text-slate-700">
-                  &quot;Unsere revolutionaere KI-Loesung optimiert Ihre Compliance-Workflows durch state-of-the-art NLP.&quot;
-                </p>
-              </div>
-            </div>
-          </div>
-
-          {/* Target Audience */}
-          <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
-            <h3 className="text-lg font-semibold text-slate-900 mb-4">Zielgruppe</h3>
-            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-              <div className="p-4 bg-slate-50 rounded-xl text-center">
-                <div className="w-12 h-12 bg-education-100 rounded-xl flex items-center justify-center mx-auto mb-2">
-                  <svg className="w-6 h-6 text-education-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 14l9-5-9-5-9 5 9 5z" />
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
-                  </svg>
-                </div>
-                <h4 className="font-semibold text-slate-900">Lehrkraefte</h4>
-                <p className="text-sm text-slate-600 mt-1">Zeitersparnis, einfache Bedienung</p>
-              </div>
-              <div className="p-4 bg-slate-50 rounded-xl text-center">
-                <div className="w-12 h-12 bg-compliance-100 rounded-xl flex items-center justify-center mx-auto mb-2">
-                  <svg className="w-6 h-6 text-compliance-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
-                  </svg>
-                </div>
-                <h4 className="font-semibold text-slate-900">DSB</h4>
-                <p className="text-sm text-slate-600 mt-1">DSGVO-Compliance, Dokumentation</p>
-              </div>
-              <div className="p-4 bg-slate-50 rounded-xl text-center">
-                <div className="w-12 h-12 bg-infrastructure-100 rounded-xl flex items-center justify-center mx-auto mb-2">
-                  <svg className="w-6 h-6 text-infrastructure-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
-                  </svg>
-                </div>
-                <h4 className="font-semibold text-slate-900">Entwickler</h4>
-                <p className="text-sm text-slate-600 mt-1">APIs, Integration, DevOps</p>
-              </div>
-              <div className="p-4 bg-slate-50 rounded-xl text-center">
-                <div className="w-12 h-12 bg-communication-100 rounded-xl flex items-center justify-center mx-auto mb-2">
-                  <svg className="w-6 h-6 text-communication-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
-                  </svg>
-                </div>
-                <h4 className="font-semibold text-slate-900">Schulleitung</h4>
-                <p className="text-sm text-slate-600 mt-1">Ueberblick, Kosten, Compliance</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
+      {/* Tab Content */}
+      {activeTab === 'colors' && <ColorsTab />}
+      {activeTab === 'typography' && <TypographyTab />}
+      {activeTab === 'components' && <ComponentsTab />}
+      {activeTab === 'logo' && <LogoTab />}
+      {activeTab === 'voice' && <VoiceTab />}
     </div>
   )
 }
diff --git a/admin-lehrer/app/(admin)/development/screen-flow/_components/CategoryFilter.tsx b/admin-lehrer/app/(admin)/development/screen-flow/_components/CategoryFilter.tsx
new file mode 100644
index 0000000..3c5d056
--- /dev/null
+++ b/admin-lehrer/app/(admin)/development/screen-flow/_components/CategoryFilter.tsx
@@ -0,0 +1,60 @@
+'use client'
+
+import type { ScreenDefinition } from '../types'
+
+interface CategoryFilterProps {
+  screens: ScreenDefinition[]
+  categories: string[]
+  colors: Record<string, { bg: string; border: string; text: string }>
+  labels: Record<string, string>
+  selectedCategory: string | null
+  selectedNode: string | null
+  onSelectCategory: (category: string | null) => void
+  onReset: () => void
+}
+
+export function CategoryFilter({
+  screens,
+  categories,
+  colors,
+  labels,
+  selectedCategory,
+  selectedNode,
+  onSelectCategory,
+  onReset,
+}: CategoryFilterProps) {
+  return (
+    <div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
+      <div className="flex flex-wrap gap-2">
+        <button
+          onClick={onReset}
+          className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+            selectedCategory === null && !selectedNode
+              ? 'bg-slate-800 text-white'
+              : 'bg-slate-100 text-slate-700 hover:bg-slate-200'
+          }`}
+        >
+          Alle ({screens.length})
+        </button>
+        {categories.map((key) => {
+          const count = screens.filter(s => s.category === key).length
+          const catColors = colors[key] || { bg: '#f1f5f9', border: '#94a3b8', text: '#475569' }
+          return (
+            <button
+              key={key}
+              onClick={() => onSelectCategory(selectedCategory === key ? null : key)}
+              className="px-4 py-2 rounded-lg text-sm font-medium transition-all flex items-center gap-2"
+              style={{
+                background: selectedCategory === key ? catColors.border : catColors.bg,
+                color: selectedCategory === key ? 'white' : catColors.text,
+              }}
+            >
+              <span className="w-3 h-3 rounded-full" style={{ background: catColors.border }} />
+              {labels[key]} ({count})
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/development/screen-flow/_components/ConnectedScreensList.tsx b/admin-lehrer/app/(admin)/development/screen-flow/_components/ConnectedScreensList.tsx
new file mode 100644
index 0000000..64501bf
--- /dev/null
+++ b/admin-lehrer/app/(admin)/development/screen-flow/_components/ConnectedScreensList.tsx
@@ -0,0 +1,51 @@
+'use client'
+
+import type { ScreenDefinition } from '../types'
+
+interface ConnectedScreensListProps {
+  selectedNode: string | null
+  connectedScreens: ScreenDefinition[]
+  colors: Record<string, { bg: string; border: string; text: string }>
+  baseUrl: string
+}
+
+export function ConnectedScreensList({
+  selectedNode,
+  connectedScreens,
+  colors,
+  baseUrl,
+}: ConnectedScreensListProps) {
+  if (!selectedNode || connectedScreens.length <= 1) return null
+
+  return (
+    <div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
+      <div className="text-sm font-medium text-slate-700 mb-3">Verbundene Screens:</div>
+      <div className="flex flex-wrap gap-2">
+        {connectedScreens.map((screen) => {
+          const catColors = colors[screen.category] || { bg: '#f1f5f9', border: '#94a3b8', text: '#475569' }
+          const isCurrentNode = screen.id === selectedNode
+          return (
+            <button
+              key={screen.id}
+              onClick={() => {
+                if (screen.url) {
+                  window.open(`${baseUrl}${screen.url}`, '_blank')
+                }
+              }}
+              className={`px-3 py-2 rounded-lg text-sm font-medium transition-all flex items-center gap-2 ${
+                isCurrentNode ? 'ring-2 ring-primary-500' : ''
+              }`}
+              style={{
+                background: isCurrentNode ? catColors.border : catColors.bg,
+                color: isCurrentNode ? 'white' : catColors.text,
+              }}
+            >
+              <span>{screen.icon}</span>
+              {screen.name}
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/development/screen-flow/_components/FlowDiagram.tsx b/admin-lehrer/app/(admin)/development/screen-flow/_components/FlowDiagram.tsx
new file mode 100644
index 0000000..5262240
--- /dev/null
+++ b/admin-lehrer/app/(admin)/development/screen-flow/_components/FlowDiagram.tsx
@@ -0,0 +1,95 @@
+'use client'
+
+import ReactFlow, {
+  Node,
+  Edge,
+  Controls,
+  Background,
+  MiniMap,
+  BackgroundVariant,
+  Panel,
+  NodeChange,
+  EdgeChange,
+} from 'reactflow'
+import 'reactflow/dist/style.css'
+
+import type { ScreenDefinition, FlowType } from '../types'
+
+interface FlowDiagramProps {
+  flowType: FlowType
+  nodes: Node[]
+  edges: Edge[]
+  onNodesChange: (changes: NodeChange[]) => void
+  onEdgesChange: (changes: EdgeChange[]) => void
+  onNodeClick: (event: React.MouseEvent, node: Node) => void
+  onPaneClick: () => void
+  screens: ScreenDefinition[]
+  colors: Record<string, { bg: string; border: string; text: string }>
+  labels: Record<string, string>
+  categories: string[]
+}
+
+export function FlowDiagram({
+  flowType,
+  nodes,
+  edges,
+  onNodesChange,
+  onEdgesChange,
+  onNodeClick,
+  onPaneClick,
+  screens,
+  colors,
+  labels,
+  categories,
+}: FlowDiagramProps) {
+  return (
+    <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden" style={{ height: '500px' }}>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onNodeClick={onNodeClick}
+        onPaneClick={onPaneClick}
+        fitView
+        fitViewOptions={{ padding: 0.2 }}
+        attributionPosition="bottom-left"
+      >
+        <Controls />
+        <MiniMap
+          nodeColor={(node) => {
+            const screen = screens.find(s => s.id === node.id)
+            const catColors = screen ? colors[screen.category] : null
+            return catColors?.border || '#94a3b8'
+          }}
+          maskColor="rgba(0, 0, 0, 0.1)"
+        />
+        <Background variant={BackgroundVariant.Dots} gap={12} size={1} />
+
+        <Panel position="top-left" className="bg-white/95 p-3 rounded-lg shadow-lg text-xs">
+          <div className="font-medium text-slate-700 mb-2">
+            {flowType === 'studio' ? '🎓 Studio' : '⚙️ Admin v2'}
+          </div>
+          <div className="space-y-1">
+            {categories.slice(0, 4).map((key) => {
+              const catColors = colors[key] || { bg: '#f1f5f9', border: '#94a3b8' }
+              return (
+                <div key={key} className="flex items-center gap-2">
+                  <span
+                    className="w-3 h-3 rounded"
+                    style={{ background: catColors.bg, border: `1px solid ${catColors.border}` }}
+                  />
+                  <span className="text-slate-600">{labels[key]}</span>
+                </div>
+              )
+            })}
+          </div>
+          <div className="mt-2 pt-2 border-t text-slate-400">
+            Klick = Subtree<br/>
+            Doppelklick = Oeffnen
+          </div>
+        </Panel>
+      </ReactFlow>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/development/screen-flow/_components/FlowTypeSelector.tsx b/admin-lehrer/app/(admin)/development/screen-flow/_components/FlowTypeSelector.tsx
new file mode 100644
index 0000000..66ec908
--- /dev/null
+++ b/admin-lehrer/app/(admin)/development/screen-flow/_components/FlowTypeSelector.tsx
@@ -0,0 +1,59 @@
+'use client'
+
+import type { FlowType } from '../types'
+import { STUDIO_SCREENS, ADMIN_SCREENS } from '../data'
+
+interface FlowTypeSelectorProps {
+  flowType: FlowType
+  onFlowTypeChange: (type: FlowType) => void
+}
+
+export function FlowTypeSelector({ flowType, onFlowTypeChange }: FlowTypeSelectorProps) {
+  return (
+    <div className="grid grid-cols-2 gap-4">
+      <button
+        onClick={() => onFlowTypeChange('studio')}
+        className={`p-6 rounded-xl border-2 transition-all ${
+          flowType === 'studio'
+            ? 'border-green-500 bg-green-50 shadow-lg'
+            : 'border-slate-200 bg-white hover:border-slate-300'
+        }`}
+      >
+        <div className="flex items-center gap-4">
+          <div className={`w-14 h-14 rounded-xl flex items-center justify-center text-2xl ${
+            flowType === 'studio' ? 'bg-green-500 text-white' : 'bg-slate-100'
+          }`}>
+            🎓
+          </div>
+          <div className="text-left">
+            <div className="font-bold text-lg">Studio (Port 8000)</div>
+            <div className="text-sm text-slate-500">Lehrer-Oberflaeche</div>
+            <div className="text-xs text-slate-400 mt-1">{STUDIO_SCREENS.length} Screens</div>
+          </div>
+        </div>
+      </button>
+
+      <button
+        onClick={() => onFlowTypeChange('admin')}
+        className={`p-6 rounded-xl border-2 transition-all ${
+          flowType === 'admin'
+            ? 'border-primary-500 bg-primary-50 shadow-lg'
+            : 'border-slate-200 bg-white hover:border-slate-300'
+        }`}
+      >
+        <div className="flex items-center gap-4">
+          <div className={`w-14 h-14 rounded-xl flex items-center justify-center text-2xl ${
+            flowType === 'admin' ? 'bg-primary-500 text-white' : 'bg-slate-100'
+          }`}>
+            ⚙️
+          </div>
+          <div className="text-left">
+            <div className="font-bold text-lg">Admin v2 (Port 3002)</div>
+            <div className="text-sm text-slate-500">Admin Panel</div>
+            <div className="text-xs text-slate-400 mt-1">{ADMIN_SCREENS.length} Screens</div>
+          </div>
+        </div>
+      </button>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/development/screen-flow/_components/ScreenList.tsx b/admin-lehrer/app/(admin)/development/screen-flow/_components/ScreenList.tsx
new file mode 100644
index 0000000..274afc4
--- /dev/null
+++ b/admin-lehrer/app/(admin)/development/screen-flow/_components/ScreenList.tsx
@@ -0,0 +1,65 @@
+'use client'
+
+import type { ScreenDefinition } from '../types'
+
+interface ScreenListProps {
+  screens: ScreenDefinition[]
+  colors: Record<string, { bg: string; border: string; text: string }>
+  labels: Record<string, string>
+  baseUrl: string
+  selectedCategory: string | null
+  onSelectScreen: (screen: ScreenDefinition) => void
+}
+
+export function ScreenList({
+  screens,
+  colors,
+  labels,
+  baseUrl,
+  selectedCategory,
+  onSelectScreen,
+}: ScreenListProps) {
+  const filtered = selectedCategory
+    ? screens.filter(s => s.category === selectedCategory)
+    : screens
+
+  return (
+    <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
+      <div className="px-4 py-3 bg-slate-50 border-b flex items-center justify-between">
+        <h3 className="font-medium text-slate-700">
+          Alle Screens ({screens.length})
+        </h3>
+        <span className="text-xs text-slate-400">{baseUrl}</span>
+      </div>
+      <div className="divide-y max-h-80 overflow-y-auto">
+        {filtered.map((screen) => {
+          const catColors = colors[screen.category] || { bg: '#f1f5f9', border: '#94a3b8', text: '#475569' }
+          return (
+            <button
+              key={screen.id}
+              onClick={() => onSelectScreen(screen)}
+              className="w-full flex items-center gap-4 p-3 hover:bg-slate-50 transition-colors text-left"
+            >
+              <span
+                className="w-9 h-9 rounded-lg flex items-center justify-center text-lg"
+                style={{ background: catColors.bg }}
+              >
+                {screen.icon}
+              </span>
+              <div className="flex-1 min-w-0">
+                <div className="font-medium text-slate-800 text-sm">{screen.name}</div>
+                <div className="text-xs text-slate-500 truncate">{screen.description}</div>
+              </div>
+              <span
+                className="px-2 py-1 rounded text-xs font-medium shrink-0"
+                style={{ background: catColors.bg, color: catColors.text }}
+              >
+                {labels[screen.category]}
+              </span>
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/development/screen-flow/_components/StatsBar.tsx b/admin-lehrer/app/(admin)/development/screen-flow/_components/StatsBar.tsx
new file mode 100644
index 0000000..9e5a1f3
--- /dev/null
+++ b/admin-lehrer/app/(admin)/development/screen-flow/_components/StatsBar.tsx
@@ -0,0 +1,57 @@
+'use client'
+
+import type { ScreenDefinition } from '../types'
+
+interface StatsBarProps {
+  totalScreens: number
+  totalConnections: number
+  connectedCount: number
+  selectedNode: string | null
+  previewScreen: ScreenDefinition | null
+  onReset: () => void
+}
+
+export function StatsBar({
+  totalScreens,
+  totalConnections,
+  connectedCount,
+  selectedNode,
+  previewScreen,
+  onReset,
+}: StatsBarProps) {
+  return (
+    <div className="grid grid-cols-4 gap-4">
+      <div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
+        <div className="text-3xl font-bold text-slate-800">{totalScreens}</div>
+        <div className="text-sm text-slate-500">Screens</div>
+      </div>
+      <div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
+        <div className="text-3xl font-bold text-primary-600">{totalConnections}</div>
+        <div className="text-sm text-slate-500">Verbindungen</div>
+      </div>
+      <div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm col-span-2">
+        {selectedNode ? (
+          <div className="flex items-center gap-3">
+            <div className="text-3xl">{previewScreen?.icon}</div>
+            <div>
+              <div className="font-bold text-slate-800">{previewScreen?.name}</div>
+              <div className="text-sm text-slate-500">
+                {connectedCount} verbundene Screen{connectedCount !== 1 ? 's' : ''}
+              </div>
+            </div>
+            <button
+              onClick={onReset}
+              className="ml-auto px-3 py-1 text-sm bg-slate-100 hover:bg-slate-200 rounded-lg"
+            >
+              Zuruecksetzen
+            </button>
+          </div>
+        ) : (
+          <div className="text-slate-500 text-sm">
+            Klicke auf einen Screen um den Subtree zu sehen
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/development/screen-flow/_components/index.ts b/admin-lehrer/app/(admin)/development/screen-flow/_components/index.ts
new file mode 100644
index 0000000..f807503
--- /dev/null
+++ b/admin-lehrer/app/(admin)/development/screen-flow/_components/index.ts
@@ -0,0 +1,6 @@
+export { FlowTypeSelector } from './FlowTypeSelector'
+export { StatsBar } from './StatsBar'
+export { CategoryFilter } from './CategoryFilter'
+export { ConnectedScreensList } from './ConnectedScreensList'
+export { FlowDiagram } from './FlowDiagram'
+export { ScreenList } from './ScreenList'
diff --git a/admin-lehrer/app/(admin)/development/screen-flow/data.ts b/admin-lehrer/app/(admin)/development/screen-flow/data.ts
new file mode 100644
index 0000000..1c2251c
--- /dev/null
+++ b/admin-lehrer/app/(admin)/development/screen-flow/data.ts
@@ -0,0 +1,264 @@
+/**
+ * Screen Flow - Screen definitions, connections, colors, labels
+ */
+
+import type { ScreenDefinition, ConnectionDef } from './types'
+
+// ============================================
+// STUDIO SCREENS (Port 8000)
+// ============================================
+
+export const STUDIO_SCREENS: ScreenDefinition[] = [
+  { id: 'lehrer-dashboard', name: 'Mein Dashboard', description: 'Hauptuebersicht mit Widgets', category: 'navigation', icon: '🏠', url: '/app#lehrer-dashboard' },
+  { id: 'lehrer-onboarding', name: 'Erste Schritte', description: 'Onboarding & Schnellstart', category: 'navigation', icon: '🚀', url: '/app#lehrer-onboarding' },
+  { id: 'hilfe', name: 'Dokumentation', description: 'Hilfe & Anleitungen', category: 'navigation', icon: '📚', url: '/app#hilfe' },
+  { id: 'worksheets', name: 'Arbeitsblaetter Studio', description: 'Lernmaterialien erstellen', category: 'content', icon: '📝', url: '/app#worksheets' },
+  { id: 'content-creator', name: 'Content Creator', description: 'Inhalte erstellen', category: 'content', icon: '✨', url: '/app#content-creator' },
+  { id: 'content-feed', name: 'Content Feed', description: 'Inhalte durchsuchen', category: 'content', icon: '📰', url: '/app#content-feed' },
+  { id: 'unit-creator', name: 'Unit Creator', description: 'Lerneinheiten erstellen', category: 'content', icon: '📦', url: '/app#unit-creator' },
+  { id: 'letters', name: 'Briefe & Vorlagen', description: 'Brief-Generator', category: 'content', icon: '✉️', url: '/app#letters' },
+  { id: 'correction', name: 'Korrektur', description: 'Arbeiten korrigieren', category: 'content', icon: '✏️', url: '/app#correction' },
+  { id: 'klausur-korrektur', name: 'Abiturklausuren', description: 'KI-gestuetzte Klausurkorrektur', category: 'content', icon: '📋', url: '/app#klausur-korrektur' },
+  { id: 'jitsi', name: 'Videokonferenz', description: 'Jitsi Meet Integration', category: 'communication', icon: '🎥', url: '/app#jitsi' },
+  { id: 'messenger', name: 'Messenger', description: 'Matrix E2EE Chat', category: 'communication', icon: '💬', url: '/app#messenger' },
+  { id: 'mail', name: 'Unified Inbox', description: 'E-Mail Verwaltung', category: 'communication', icon: '📧', url: '/app#mail' },
+  { id: 'school-classes', name: 'Klassen', description: 'Klassenverwaltung', category: 'school', icon: '👥', url: '/app#school-classes' },
+  { id: 'school-exams', name: 'Pruefungen', description: 'Pruefungsverwaltung', category: 'school', icon: '📝', url: '/app#school-exams' },
+  { id: 'school-grades', name: 'Noten', description: 'Notenverwaltung', category: 'school', icon: '📊', url: '/app#school-grades' },
+  { id: 'school-gradebook', name: 'Notenbuch', description: 'Digitales Notenbuch', category: 'school', icon: '📖', url: '/app#school-gradebook' },
+  { id: 'school-certificates', name: 'Zeugnisse', description: 'Zeugniserstellung', category: 'school', icon: '🎓', url: '/app#school-certificates' },
+  { id: 'companion', name: 'Begleiter & Stunde', description: 'KI-Unterrichtsassistent', category: 'ai', icon: '🤖', url: '/app#companion' },
+  { id: 'alerts', name: 'Alerts', description: 'News & Benachrichtigungen', category: 'ai', icon: '🔔', url: '/app#alerts' },
+  { id: 'admin', name: 'Einstellungen', description: 'Systemeinstellungen', category: 'admin', icon: '⚙️', url: '/app#admin' },
+  { id: 'rbac-admin', name: 'Rollen & Rechte', description: 'Berechtigungsverwaltung', category: 'admin', icon: '🔐', url: '/app#rbac-admin' },
+  { id: 'abitur-docs-admin', name: 'Abitur Dokumente', description: 'Erwartungshorizonte', category: 'admin', icon: '📄', url: '/app#abitur-docs-admin' },
+  { id: 'system-info', name: 'System Info', description: 'Systeminformationen', category: 'admin', icon: '💻', url: '/app#system-info' },
+  { id: 'workflow', name: 'Workflow', description: 'Automatisierungen', category: 'admin', icon: '⚡', url: '/app#workflow' },
+]
+
+export const STUDIO_CONNECTIONS: ConnectionDef[] = [
+  { source: 'lehrer-onboarding', target: 'worksheets', label: 'Arbeitsblaetter' },
+  { source: 'lehrer-onboarding', target: 'klausur-korrektur', label: 'Abiturklausuren' },
+  { source: 'lehrer-onboarding', target: 'correction', label: 'Korrektur' },
+  { source: 'lehrer-onboarding', target: 'letters', label: 'Briefe' },
+  { source: 'lehrer-onboarding', target: 'school-classes', label: 'Klassen' },
+  { source: 'lehrer-onboarding', target: 'jitsi', label: 'Meet' },
+  { source: 'lehrer-onboarding', target: 'hilfe', label: 'Doku' },
+  { source: 'lehrer-onboarding', target: 'admin', label: 'Settings' },
+  { source: 'lehrer-dashboard', target: 'worksheets' },
+  { source: 'lehrer-dashboard', target: 'correction' },
+  { source: 'lehrer-dashboard', target: 'jitsi' },
+  { source: 'lehrer-dashboard', target: 'letters' },
+  { source: 'lehrer-dashboard', target: 'messenger' },
+  { source: 'lehrer-dashboard', target: 'klausur-korrektur' },
+  { source: 'lehrer-dashboard', target: 'companion' },
+  { source: 'lehrer-dashboard', target: 'alerts' },
+  { source: 'lehrer-dashboard', target: 'mail' },
+  { source: 'lehrer-dashboard', target: 'school-classes' },
+  { source: 'lehrer-dashboard', target: 'lehrer-onboarding', label: 'Sidebar' },
+  { source: 'school-classes', target: 'school-exams' },
+  { source: 'school-classes', target: 'school-grades' },
+  { source: 'school-grades', target: 'school-gradebook' },
+  { source: 'school-gradebook', target: 'school-certificates' },
+  { source: 'worksheets', target: 'content-creator' },
+  { source: 'worksheets', target: 'unit-creator' },
+  { source: 'content-creator', target: 'content-feed' },
+  { source: 'klausur-korrektur', target: 'abitur-docs-admin' },
+  { source: 'admin', target: 'rbac-admin' },
+  { source: 'admin', target: 'system-info' },
+  { source: 'admin', target: 'workflow' },
+]
+
+// ============================================
+// ADMIN v2 SCREENS (Port 3002)
+// Based on navigation.ts - Last updated: 2026-02-03
+// ============================================
+
+export const ADMIN_SCREENS: ScreenDefinition[] = [
+  // === META / OVERVIEW ===
+  { id: 'admin-dashboard', name: 'Dashboard', description: 'Uebersicht & Statistiken', category: 'overview', icon: '🏠', url: '/dashboard' },
+  { id: 'admin-onboarding', name: 'Onboarding', description: 'Lern-Wizards fuer alle Module', category: 'overview', icon: '📖', url: '/onboarding' },
+  { id: 'admin-architecture', name: 'Architektur', description: 'Backend-Module & Datenfluss', category: 'overview', icon: '🏗️', url: '/architecture' },
+  { id: 'admin-backlog', name: 'Production Backlog', description: 'Go-Live Checkliste', category: 'overview', icon: '📝', url: '/backlog' },
+  { id: 'admin-rbac', name: 'RBAC', description: 'Rollen & Berechtigungen', category: 'overview', icon: '👥', url: '/rbac' },
+
+  // === COMPLIANCE SDK (Violet #8b5cf6) ===
+  { id: 'admin-consent', name: 'Consent Verwaltung', description: 'Rechtliche Dokumente & Versionen', category: 'sdk', icon: '📄', url: '/sdk/consent-management' },
+  { id: 'admin-dsr', name: 'Datenschutzanfragen', description: 'DSGVO Art. 15-21', category: 'sdk', icon: '🔒', url: '/sdk/dsr' },
+  { id: 'admin-einwilligungen', name: 'Einwilligungen', description: 'Nutzer-Consent Uebersicht', category: 'sdk', icon: '✅', url: '/sdk/einwilligungen' },
+  { id: 'admin-vvt', name: 'VVT', description: 'Verarbeitungsverzeichnis Art. 30', category: 'sdk', icon: '📋', url: '/sdk/vvt' },
+  { id: 'admin-dsfa', name: 'DSFA', description: 'Datenschutz-Folgenabschaetzung', category: 'sdk', icon: '⚖️', url: '/sdk/dsfa' },
+  { id: 'admin-tom', name: 'TOMs', description: 'Technische & Org. Massnahmen', category: 'sdk', icon: '🛡️', url: '/sdk/tom' },
+  { id: 'admin-loeschfristen', name: 'Loeschfristen', description: 'Aufbewahrung & Deadlines', category: 'sdk', icon: '🗑️', url: '/sdk/loeschfristen' },
+  { id: 'admin-advisory-board', name: 'Advisory Board', description: 'KI-Use-Case Pruefung', category: 'sdk', icon: '🧑‍⚖️', url: '/sdk/advisory-board' },
+  { id: 'admin-escalations', name: 'Eskalations-Queue', description: 'DSB Review & Freigabe', category: 'sdk', icon: '🚨', url: '/sdk/escalations' },
+  { id: 'admin-compliance-hub', name: 'Compliance Hub', description: 'Zentrales GRC Dashboard', category: 'sdk', icon: '✅', url: '/sdk/compliance-hub' },
+  { id: 'admin-audit-checklist', name: 'Audit Checkliste', description: '476 Anforderungen pruefen', category: 'sdk', icon: '📋', url: '/sdk/audit-checklist' },
+  { id: 'admin-requirements', name: 'Requirements', description: '558+ aus 19 Verordnungen', category: 'sdk', icon: '📜', url: '/sdk/requirements' },
+  { id: 'admin-controls', name: 'Controls', description: '474 Control-Mappings', category: 'sdk', icon: '🎛️', url: '/sdk/controls' },
+  { id: 'admin-evidence', name: 'Evidence', description: 'Nachweise & Dokumentation', category: 'sdk', icon: '📎', url: '/sdk/evidence' },
+  { id: 'admin-risks', name: 'Risiken', description: 'Risk Matrix & Register', category: 'sdk', icon: '⚠️', url: '/sdk/risks' },
+  { id: 'admin-audit-report', name: 'Audit Report', description: 'PDF Audit-Berichte', category: 'sdk', icon: '📊', url: '/sdk/audit-report' },
+  { id: 'admin-modules', name: 'Service Registry', description: '30+ Service-Module', category: 'sdk', icon: '🔧', url: '/sdk/modules' },
+  { id: 'admin-dsms', name: 'DSMS', description: 'Datenschutz-Management-System', category: 'sdk', icon: '🏛️', url: '/sdk/dsms' },
+  { id: 'admin-compliance-workflow', name: 'Workflow', description: 'Freigabe-Workflows', category: 'sdk', icon: '🔄', url: '/sdk/workflow' },
+  { id: 'admin-source-policy', name: 'Quellen-Policy', description: 'Datenquellen & Compliance', category: 'sdk', icon: '📚', url: '/sdk/source-policy' },
+  { id: 'admin-ai-act', name: 'EU-AI-Act', description: 'KI-Risikoklassifizierung', category: 'sdk', icon: '🤖', url: '/sdk/ai-act' },
+  { id: 'admin-obligations', name: 'Pflichten', description: 'NIS2, DSGVO, AI Act', category: 'sdk', icon: '⚡', url: '/sdk/obligations' },
+
+  // === KI & AUTOMATISIERUNG (Teal #14b8a6) ===
+  { id: 'admin-rag', name: 'Daten & RAG', description: 'Training Data & RAG', category: 'ai', icon: '🗄️', url: '/ai/rag' },
+  { id: 'admin-ocr-labeling', name: 'OCR-Labeling', description: 'Handschrift-Training', category: 'ai', icon: '✍️', url: '/ai/ocr-labeling' },
+  { id: 'admin-magic-help', name: 'Magic Help', description: 'TrOCR Handschrift-OCR', category: 'ai', icon: '🪄', url: '/ai/magic-help' },
+  { id: 'admin-klausur-korrektur', name: 'Klausur-Korrektur', description: 'Abitur-Korrektur mit KI', category: 'ai', icon: '📝', url: '/ai/klausur-korrektur' },
+  { id: 'admin-quality', name: 'Qualitaet & Audit', description: 'Compliance-Audit & Traceability', category: 'ai', icon: '✨', url: '/ai/quality' },
+  { id: 'admin-test-quality', name: 'Test Quality (BQAS)', description: 'Golden Suite & Synthetic Tests', category: 'ai', icon: '🧪', url: '/ai/test-quality' },
+  { id: 'admin-agents', name: 'Agent Management', description: 'Multi-Agent & SOUL-Editor', category: 'ai', icon: '🧠', url: '/ai/agents' },
+
+  // === INFRASTRUKTUR (Orange #f97316) ===
+  { id: 'admin-gpu', name: 'GPU Infrastruktur', description: 'vast.ai GPU Management', category: 'infrastructure', icon: '🖥️', url: '/infrastructure/gpu' },
+  { id: 'admin-middleware', name: 'Middleware', description: 'Stack & API Gateway', category: 'infrastructure', icon: '🔧', url: '/infrastructure/middleware' },
+  { id: 'admin-security', name: 'Security', description: 'DevSecOps & Scans', category: 'infrastructure', icon: '🔐', url: '/infrastructure/security' },
+  { id: 'admin-sbom', name: 'SBOM', description: 'Software Bill of Materials', category: 'infrastructure', icon: '📦', url: '/infrastructure/sbom' },
+  { id: 'admin-cicd', name: 'CI/CD', description: 'Pipelines & Deployments', category: 'infrastructure', icon: '🔄', url: '/infrastructure/ci-cd' },
+  { id: 'admin-tests', name: 'Test Dashboard', description: '195+ Tests & Coverage', category: 'infrastructure', icon: '🧪', url: '/infrastructure/tests' },
+
+  // === BILDUNG (Blue #3b82f6) ===
+  { id: 'admin-edu-search', name: 'Education Search', description: 'Bildungsquellen & Crawler', category: 'education', icon: '🔍', url: '/education/edu-search' },
+  { id: 'admin-zeugnisse', name: 'Zeugnisse-Crawler', description: 'Zeugnis-Daten', category: 'education', icon: '📜', url: '/education/zeugnisse-crawler' },
+  { id: 'admin-rag-pipeline', name: 'RAG Pipeline', description: 'Bildungsdokumente indexieren', category: 'ai', icon: '🔗', url: '/ai/rag-pipeline' },
+  { id: 'admin-foerderantrag', name: 'Foerderantrag-Wizard', description: 'DigitalPakt & Landesfoerderung', category: 'education', icon: '💰', url: '/education/foerderantrag' },
+
+  // === KOMMUNIKATION (Green #22c55e) ===
+  { id: 'admin-video', name: 'Video & Chat', description: 'Matrix & Jitsi Monitoring', category: 'communication', icon: '🎥', url: '/communication/video-chat' },
+  { id: 'admin-matrix', name: 'Voice Service', description: 'Voice-First Interface', category: 'communication', icon: '🎙️', url: '/communication/matrix' },
+  { id: 'admin-mail', name: 'Unified Inbox', description: 'E-Mail & KI-Analyse', category: 'communication', icon: '📧', url: '/communication/mail' },
+  { id: 'admin-alerts', name: 'Alerts Monitoring', description: 'Google Alerts & Feeds', category: 'communication', icon: '🔔', url: '/communication/alerts' },
+
+  // === ENTWICKLUNG (Slate #64748b) ===
+  { id: 'admin-workflow', name: 'Dev Workflow', description: 'Git, CI/CD & Team-Regeln', category: 'development', icon: '⚡', url: '/development/workflow' },
+  { id: 'admin-game', name: 'Breakpilot Drive', description: 'Lernspiel Management', category: 'development', icon: '🎮', url: '/development/game' },
+  { id: 'admin-unity', name: 'Unity Bridge', description: 'Unity Editor Steuerung', category: 'development', icon: '🎯', url: '/development/unity-bridge' },
+  { id: 'admin-companion', name: 'Companion Dev', description: 'Lesson-Modus Entwicklung', category: 'development', icon: '📚', url: '/development/companion' },
+  { id: 'admin-docs', name: 'Developer Docs', description: 'API & Architektur', category: 'development', icon: '📖', url: '/development/docs' },
+  { id: 'admin-brandbook', name: 'Brandbook', description: 'Corporate Design', category: 'development', icon: '🎨', url: '/development/brandbook' },
+  { id: 'admin-screen-flow', name: 'Screen Flow', description: 'UI Screen-Verbindungen', category: 'development', icon: '🔀', url: '/development/screen-flow' },
+  { id: 'admin-content', name: 'Uebersetzungen', description: 'Website Content & Sprachen', category: 'development', icon: '🌐', url: '/development/content' },
+]
+
+export const ADMIN_CONNECTIONS: ConnectionDef[] = [
+  // === OVERVIEW/META FLOWS ===
+  { source: 'admin-dashboard', target: 'admin-onboarding', label: 'Erste Schritte' },
+  { source: 'admin-dashboard', target: 'admin-architecture', label: 'System' },
+  { source: 'admin-dashboard', target: 'admin-backlog', label: 'Go-Live' },
+  { source: 'admin-dashboard', target: 'admin-compliance-hub', label: 'Compliance' },
+  { source: 'admin-onboarding', target: 'admin-consent' },
+  { source: 'admin-rbac', target: 'admin-consent' },
+
+  // === DSGVO FLOW ===
+  { source: 'admin-consent', target: 'admin-einwilligungen', label: 'Nutzer' },
+  { source: 'admin-consent', target: 'admin-dsr' },
+  { source: 'admin-dsr', target: 'admin-loeschfristen' },
+  { source: 'admin-vvt', target: 'admin-tom' },
+  { source: 'admin-vvt', target: 'admin-dsfa' },
+  { source: 'admin-dsfa', target: 'admin-tom' },
+  { source: 'admin-advisory-board', target: 'admin-escalations', label: 'Eskalation' },
+  { source: 'admin-advisory-board', target: 'admin-dsfa', label: 'Risiko' },
+
+  // === COMPLIANCE FLOW ===
+  { source: 'admin-compliance-hub', target: 'admin-audit-checklist', label: 'Audit' },
+  { source: 'admin-compliance-hub', target: 'admin-requirements', label: 'Anforderungen' },
+  { source: 'admin-compliance-hub', target: 'admin-risks', label: 'Risiken' },
+  { source: 'admin-compliance-hub', target: 'admin-ai-act', label: 'AI Act' },
+  { source: 'admin-requirements', target: 'admin-controls' },
+  { source: 'admin-controls', target: 'admin-evidence' },
+  { source: 'admin-audit-checklist', target: 'admin-audit-report', label: 'Report' },
+  { source: 'admin-risks', target: 'admin-controls' },
+  { source: 'admin-modules', target: 'admin-controls' },
+  { source: 'admin-source-policy', target: 'admin-rag' },
+  { source: 'admin-obligations', target: 'admin-requirements' },
+  { source: 'admin-dsms', target: 'admin-compliance-workflow' },
+
+  // === KI & AUTOMATISIERUNG FLOW ===
+  { source: 'admin-rag', target: 'admin-quality' },
+  { source: 'admin-rag', target: 'admin-agents' },
+  { source: 'admin-ocr-labeling', target: 'admin-magic-help', label: 'Training' },
+  { source: 'admin-magic-help', target: 'admin-klausur-korrektur', label: 'Korrektur' },
+  { source: 'admin-quality', target: 'admin-test-quality' },
+  { source: 'admin-agents', target: 'admin-test-quality', label: 'BQAS' },
+  { source: 'admin-klausur-korrektur', target: 'admin-quality', label: 'Audit' },
+
+  // === INFRASTRUKTUR FLOW ===
+  { source: 'admin-security', target: 'admin-sbom', label: 'Dependencies' },
+  { source: 'admin-sbom', target: 'admin-tests' },
+  { source: 'admin-tests', target: 'admin-cicd', label: 'Pipeline' },
+  { source: 'admin-cicd', target: 'admin-middleware' },
+  { source: 'admin-middleware', target: 'admin-gpu', label: 'GPU' },
+  { source: 'admin-security', target: 'admin-compliance-hub', label: 'Compliance' },
+
+  // === BILDUNG FLOW ===
+  { source: 'admin-edu-search', target: 'admin-rag', label: 'Quellen' },
+  { source: 'admin-edu-search', target: 'admin-zeugnisse' },
+  { source: 'admin-training', target: 'admin-onboarding' },
+  { source: 'admin-foerderantrag', target: 'admin-docs', label: 'Docs' },
+
+  // === KOMMUNIKATION FLOW ===
+  { source: 'admin-video', target: 'admin-matrix', label: 'Voice' },
+  { source: 'admin-mail', target: 'admin-alerts' },
+  { source: 'admin-alerts', target: 'admin-mail', label: 'Inbox' },
+
+  // === ENTWICKLUNG FLOW ===
+  { source: 'admin-workflow', target: 'admin-cicd', label: 'Pipeline' },
+  { source: 'admin-workflow', target: 'admin-docs' },
+  { source: 'admin-game', target: 'admin-unity', label: 'Editor' },
+  { source: 'admin-companion', target: 'admin-agents', label: 'Agents' },
+  { source: 'admin-brandbook', target: 'admin-screen-flow' },
+  { source: 'admin-docs', target: 'admin-architecture' },
+  { source: 'admin-content', target: 'admin-brandbook' },
+]
+
+// ============================================
+// CATEGORY COLORS
+// ============================================
+
+export const STUDIO_COLORS: Record<string, { bg: string; border: string; text: string }> = {
+  navigation: { bg: '#dbeafe', border: '#3b82f6', text: '#1e40af' },
+  content: { bg: '#dcfce7', border: '#22c55e', text: '#166534' },
+  communication: { bg: '#fef3c7', border: '#f59e0b', text: '#92400e' },
+  school: { bg: '#fce7f3', border: '#ec4899', text: '#9d174d' },
+  admin: { bg: '#f3e8ff', border: '#a855f7', text: '#6b21a8' },
+  ai: { bg: '#cffafe', border: '#06b6d4', text: '#0e7490' },
+}
+
+// Colors from navigation.ts
+export const ADMIN_COLORS: Record<string, { bg: string; border: string; text: string }> = {
+  overview: { bg: '#e0f2fe', border: '#0ea5e9', text: '#0369a1' },
+  dsgvo: { bg: '#ede9fe', border: '#7c3aed', text: '#5b21b6' },
+  compliance: { bg: '#f3e8ff', border: '#9333ea', text: '#6b21a8' },
+  ai: { bg: '#ccfbf1', border: '#14b8a6', text: '#0f766e' },
+  infrastructure: { bg: '#ffedd5', border: '#f97316', text: '#c2410c' },
+  education: { bg: '#dbeafe', border: '#3b82f6', text: '#1e40af' },
+  communication: { bg: '#dcfce7', border: '#22c55e', text: '#166534' },
+  development: { bg: '#f1f5f9', border: '#64748b', text: '#334155' },
+}
+
+export const STUDIO_LABELS: Record<string, string> = {
+  navigation: 'Navigation',
+  content: 'Content & Tools',
+  communication: 'Kommunikation',
+  school: 'Schulverwaltung',
+  admin: 'Administration',
+  ai: 'KI & Assistent',
+}
+
+// Labels from navigation.ts
+export const ADMIN_LABELS: Record<string, string> = {
+  overview: 'Uebersicht & Meta',
+  dsgvo: 'DSGVO',
+  compliance: 'Compliance & GRC',
+  ai: 'KI & Automatisierung',
+  infrastructure: 'Infrastruktur & DevOps',
+  education: 'Bildung & Schule',
+  communication: 'Kommunikation & Alerts',
+  development: 'Entwicklung & Produkte',
+}
diff --git a/admin-lehrer/app/(admin)/development/screen-flow/helpers.ts b/admin-lehrer/app/(admin)/development/screen-flow/helpers.ts
new file mode 100644
index 0000000..f8d044f
--- /dev/null
+++ b/admin-lehrer/app/(admin)/development/screen-flow/helpers.ts
@@ -0,0 +1,83 @@
+/**
+ * Screen Flow - Layout and graph traversal helpers
+ */
+
+import type { ScreenDefinition, ConnectionDef, FlowType } from './types'
+
+/**
+ * BFS traversal to find all connected nodes from a start node.
+ */
+export function findConnectedNodes(
+  startNodeId: string,
+  connections: ConnectionDef[],
+  direction: 'children' | 'parents' | 'both' = 'children'
+): Set<string> {
+  const connected = new Set<string>()
+  connected.add(startNodeId)
+
+  const queue = [startNodeId]
+  while (queue.length > 0) {
+    const current = queue.shift()!
+
+    connections.forEach(conn => {
+      if ((direction === 'children' || direction === 'both') && conn.source === current) {
+        if (!connected.has(conn.target)) {
+          connected.add(conn.target)
+          queue.push(conn.target)
+        }
+      }
+      if ((direction === 'parents' || direction === 'both') && conn.target === current) {
+        if (!connected.has(conn.source)) {
+          connected.add(conn.source)
+          queue.push(conn.source)
+        }
+      }
+    })
+  }
+
+  return connected
+}
+
+const STUDIO_POSITIONS: Record<string, { x: number; y: number }> = {
+  navigation: { x: 400, y: 50 },
+  content: { x: 50, y: 250 },
+  communication: { x: 750, y: 250 },
+  school: { x: 50, y: 500 },
+  admin: { x: 750, y: 500 },
+  ai: { x: 400, y: 380 },
+}
+
+const ADMIN_POSITIONS: Record<string, { x: number; y: number }> = {
+  overview: { x: 400, y: 30 },
+  dsgvo: { x: 50, y: 150 },
+  compliance: { x: 700, y: 150 },
+  ai: { x: 50, y: 350 },
+  communication: { x: 400, y: 350 },
+  infrastructure: { x: 700, y: 350 },
+  education: { x: 50, y: 550 },
+  development: { x: 400, y: 550 },
+}
+
+/**
+ * Compute the x/y position for a node based on its category and index.
+ */
+export function getNodePosition(
+  id: string,
+  category: string,
+  screens: ScreenDefinition[],
+  flowType: FlowType
+) {
+  const positions = flowType === 'studio' ? STUDIO_POSITIONS : ADMIN_POSITIONS
+  const base = positions[category] || { x: 400, y: 300 }
+  const categoryScreens = screens.filter(s => s.category === category)
+  const categoryIndex = categoryScreens.findIndex(s => s.id === id)
+
+  const cols = Math.ceil(Math.sqrt(categoryScreens.length + 1))
+  const row = Math.floor(categoryIndex / cols)
+  const col = categoryIndex % cols
+
+  return {
+    x: base.x + col * 160,
+    y: base.y + row * 90,
+  }
+}
diff --git a/admin-lehrer/app/(admin)/development/screen-flow/page.tsx b/admin-lehrer/app/(admin)/development/screen-flow/page.tsx
index 731c807..9a03e02 100644
--- a/admin-lehrer/app/(admin)/development/screen-flow/page.tsx
+++ b/admin-lehrer/app/(admin)/development/screen-flow/page.tsx
@@ -8,787 +8,122 @@
  * - Admin v2 (Port 3002): Admin Panel
  */
 
-import { useCallback, useState, useMemo, useEffect } from 'react'
-import ReactFlow, {
-  Node,
-  Edge,
-  Controls,
-  Background,
-  MiniMap,
-  useNodesState,
-  useEdgesState,
-  BackgroundVariant,
-  MarkerType,
-  Panel,
-} from 'reactflow'
-import 'reactflow/dist/style.css'
-
-// ============================================
-// TYPES
-// ============================================
-
-interface ScreenDefinition {
-  id: string
-  name: string
-  description: string
-  category: string
-  icon: string
-  url?: string
-}
-
-interface ConnectionDef {
-  source: string
-  target: string
-  label?: string
-}
-
-type FlowType = 'studio' | 'admin'
-
-// ============================================
-// STUDIO SCREENS (Port 8000)
-// ============================================
-
-const STUDIO_SCREENS: ScreenDefinition[] = [
-  { id: 'lehrer-dashboard', name: 'Mein Dashboard', description: 'Hauptuebersicht mit Widgets', category: 'navigation', icon: '🏠', url: '/app#lehrer-dashboard' },
-  { id: 'lehrer-onboarding', name: 'Erste Schritte', description: 'Onboarding & Schnellstart', category: 'navigation', icon: '🚀', url: '/app#lehrer-onboarding' },
-  { id: 'hilfe', name: 'Dokumentation', description: 'Hilfe & Anleitungen', category: 'navigation', icon: '📚', url: '/app#hilfe' },
-  { id: 'worksheets', name: 'Arbeitsblaetter Studio', description: 'Lernmaterialien erstellen', category: 'content', icon: '📝', url: '/app#worksheets' },
-  { id: 'content-creator', name: 'Content Creator', description: 'Inhalte erstellen', category: 'content', icon: '✨', url: '/app#content-creator' },
-  { id: 'content-feed', name: 'Content Feed', description: 'Inhalte durchsuchen', category: 'content', icon: '📰', url: '/app#content-feed' },
-  { id: 'unit-creator', name: 'Unit Creator', description: 'Lerneinheiten erstellen', category: 'content', icon: '📦', url: '/app#unit-creator' },
-  { id: 'letters', name: 'Briefe & Vorlagen', description: 'Brief-Generator', category: 'content', icon: '✉️', url: '/app#letters' },
-  { id: 'correction', name: 'Korrektur', description: 'Arbeiten korrigieren', category: 'content', icon: '✏️', url: '/app#correction' },
-  { id: 'klausur-korrektur', name: 'Abiturklausuren', description: 'KI-gestuetzte Klausurkorrektur', category: 'content', icon: '📋', url: '/app#klausur-korrektur' },
-  { id: 'jitsi', name: 'Videokonferenz', description: 'Jitsi Meet Integration', category: 'communication', icon: '🎥', url: '/app#jitsi' },
-  { id: 'messenger', name: 'Messenger', description: 'Matrix E2EE Chat', category: 'communication', icon: '💬', url: '/app#messenger' },
-  { id: 'mail', name: 'Unified Inbox', description: 'E-Mail Verwaltung', category: 'communication', icon: '📧', url: '/app#mail' },
-  { id: 'school-classes', name: 'Klassen', description: 'Klassenverwaltung', category: 'school', icon: '👥', url: '/app#school-classes' },
-  { id: 'school-exams', name: 'Pruefungen', description: 'Pruefungsverwaltung', category: 'school', icon: '📝', url: '/app#school-exams' },
-  { id: 'school-grades', name: 'Noten', description: 'Notenverwaltung', category: 'school', icon: '📊', url: '/app#school-grades' },
-  { id: 'school-gradebook', name: 'Notenbuch', description: 'Digitales Notenbuch', category: 'school', icon: '📖', url: '/app#school-gradebook' },
-  { id: 'school-certificates', name: 'Zeugnisse', description: 'Zeugniserstellung', category: 'school', icon: '🎓', url: '/app#school-certificates' },
-  { id: 'companion', name: 'Begleiter & Stunde', description: 'KI-Unterrichtsassistent', category: 'ai', icon: '🤖', url: '/app#companion' },
-  { id: 'alerts', name: 'Alerts', description: 'News & Benachrichtigungen', category: 'ai', icon: '🔔', url: '/app#alerts' },
-  { id: 'admin', name: 'Einstellungen', description: 'Systemeinstellungen', category: 'admin', icon: '⚙️', url: '/app#admin' },
-  { id: 'rbac-admin', name: 'Rollen & Rechte', description: 'Berechtigungsverwaltung', category: 'admin', icon: '🔐', url: '/app#rbac-admin' },
-  { id: 'abitur-docs-admin', name: 'Abitur Dokumente', description: 'Erwartungshorizonte', category: 'admin', icon: '📄', url: '/app#abitur-docs-admin' },
-  { id: 'system-info', name: 'System Info', description: 'Systeminformationen', category: 'admin', icon: '💻', url: '/app#system-info' },
-  { id: 'workflow', name: 'Workflow', description: 'Automatisierungen', category: 'admin', icon: '⚡', url: '/app#workflow' },
-]
-
-const STUDIO_CONNECTIONS: ConnectionDef[] = [
-  { source: 'lehrer-onboarding', target: 'worksheets', label: 'Arbeitsblaetter' },
-  { source: 'lehrer-onboarding', target: 'klausur-korrektur', label: 'Abiturklausuren' },
-  { source: 'lehrer-onboarding', target: 'correction', label: 'Korrektur' },
-  { source: 'lehrer-onboarding', target: 'letters', label: 'Briefe' },
-  { source: 'lehrer-onboarding', target: 'school-classes', label: 'Klassen' },
-  { source: 'lehrer-onboarding', target: 'jitsi', label: 'Meet' },
-  { source: 'lehrer-onboarding', target: 'hilfe', label: 'Doku' },
-  { source: 'lehrer-onboarding', target: 'admin', label: 'Settings' },
-  { source: 'lehrer-dashboard', target: 'worksheets' },
-  { source: 'lehrer-dashboard', target: 'correction' },
-  { source: 'lehrer-dashboard', target: 'jitsi' },
-  { source: 'lehrer-dashboard', target: 'letters' },
-  { source: 'lehrer-dashboard', target: 'messenger' },
-  { source: 'lehrer-dashboard', target: 'klausur-korrektur' },
-  { source: 'lehrer-dashboard', target: 'companion' },
-  { source: 'lehrer-dashboard', target: 'alerts' },
-  { source: 'lehrer-dashboard', target: 'mail' },
-  { source: 'lehrer-dashboard', target: 'school-classes' },
-  { source: 'lehrer-dashboard', target: 'lehrer-onboarding', label: 'Sidebar' },
-  { source: 'school-classes', target: 'school-exams' },
-  { source: 'school-classes', target: 'school-grades' },
-  { source: 'school-grades', target: 'school-gradebook' },
-  { source: 'school-gradebook', target: 'school-certificates' },
-  { source: 'worksheets', target: 'content-creator' },
-  { source: 'worksheets', target: 'unit-creator' },
-  { source: 'content-creator', target: 'content-feed' },
-  { source: 'klausur-korrektur', target: 'abitur-docs-admin' },
-  { source: 'admin', target: 'rbac-admin' },
-  { source: 'admin', target: 'system-info' },
-  { source: 'admin', target: 'workflow' },
-]
-
-// ============================================
-// ADMIN v2 SCREENS (Port 3002)
-// Based on navigation.ts - Last updated: 2026-02-03
-// ============================================
-
-const ADMIN_SCREENS: ScreenDefinition[] = [
-  // === META / OVERVIEW ===
-  { id: 'admin-dashboard', name: 'Dashboard', description: 'Uebersicht & Statistiken', category: 'overview', icon: '🏠', url: '/dashboard' },
-  { id: 'admin-onboarding', name: 'Onboarding', description: 'Lern-Wizards fuer alle Module', category: 'overview', icon: '📖', url: '/onboarding' },
-  { id: 'admin-architecture', name: 'Architektur', description: 'Backend-Module & Datenfluss', category: 'overview', icon: '🏗️', url: '/architecture' },
-  { id: 'admin-backlog', name: 'Production Backlog', description: 'Go-Live Checkliste', category: 'overview', icon: '📝', url: '/backlog' },
-  { id: 'admin-rbac', name: 'RBAC', description: 'Rollen & Berechtigungen', category: 'overview', icon: '👥', url: '/rbac' },
-
-  // === COMPLIANCE SDK (Violet #8b5cf6) ===
-  // DSGVO - Datenschutz & Betroffenenrechte
-  { id: 'admin-consent', name: 'Consent Verwaltung', description: 'Rechtliche Dokumente & Versionen', category: 'sdk', icon: '📄', url: '/sdk/consent-management' },
-  { id: 'admin-dsr', name: 'Datenschutzanfragen', description: 'DSGVO Art. 15-21', category: 'sdk', icon: '🔒', url: '/sdk/dsr' },
-  { id: 'admin-einwilligungen', name: 'Einwilligungen', description: 'Nutzer-Consent Uebersicht', category: 'sdk', icon: '✅', url: '/sdk/einwilligungen' },
-  { id: 'admin-vvt', name: 'VVT', description: 'Verarbeitungsverzeichnis Art. 30', category: 'sdk', icon: '📋', url: '/sdk/vvt' },
-  { id: 'admin-dsfa', name: 'DSFA', description: 'Datenschutz-Folgenabschaetzung', category: 'sdk', icon: '⚖️', url: '/sdk/dsfa' },
-  { id: 'admin-tom', name: 'TOMs', description: 'Technische & Org. Massnahmen', category: 'sdk', icon: '🛡️', url: '/sdk/tom' },
-  { id: 'admin-loeschfristen', name: 'Loeschfristen', description: 'Aufbewahrung & Deadlines', category: 'sdk', icon: '🗑️', url: '/sdk/loeschfristen' },
-  { id: 'admin-advisory-board', name: 'Advisory Board', description: 'KI-Use-Case Pruefung', category: 'sdk', icon: '🧑‍⚖️', url: '/sdk/advisory-board' },
-  { id: 'admin-escalations', name: 'Eskalations-Queue', description: 'DSB Review & Freigabe', category: 'sdk', icon: '🚨', url: '/sdk/escalations' },
-  // Compliance - Audit, GRC & Regulatorik
-  { id: 'admin-compliance-hub', name: 'Compliance Hub', description: 'Zentrales GRC Dashboard', category: 'sdk', icon: '✅', url: '/sdk/compliance-hub' },
-  { id: 'admin-audit-checklist', name: 'Audit Checkliste', description: '476 Anforderungen pruefen', category: 'sdk', icon: '📋', url: '/sdk/audit-checklist' },
-  { id: 'admin-requirements', name: 'Requirements', description: '558+ aus 19 Verordnungen', category: 'sdk', icon: '📜', url: '/sdk/requirements' },
-  { id: 'admin-controls', name: 'Controls', description: '474 Control-Mappings', category: 'sdk', icon: '🎛️', url: '/sdk/controls' },
-  { id: 'admin-evidence', name: 'Evidence', description: 'Nachweise & Dokumentation', category: 'sdk', icon: '📎', url: '/sdk/evidence' },
-  { id: 'admin-risks', name: 'Risiken', description: 'Risk Matrix & Register', category: 'sdk', icon: '⚠️', url: '/sdk/risks' },
-  { id: 'admin-audit-report', name: 'Audit Report', description: 'PDF Audit-Berichte', category: 'sdk', icon: '📊', url: '/sdk/audit-report' },
-  { id: 'admin-modules', name: 'Service Registry', description: '30+ Service-Module', category: 'sdk', icon: '🔧', url: '/sdk/modules' },
-  { id: 'admin-dsms', name: 'DSMS', description: 'Datenschutz-Management-System', category: 'sdk', icon: '🏛️', url: '/sdk/dsms' },
-  { id: 'admin-compliance-workflow', name: 'Workflow', description: 'Freigabe-Workflows', category: 'sdk', icon: '🔄', url: '/sdk/workflow' },
-  { id: 'admin-source-policy', name: 'Quellen-Policy', description: 'Datenquellen & Compliance', category: 'sdk', icon: '📚', url: '/sdk/source-policy' },
-  { id: 'admin-ai-act', name: 'EU-AI-Act', description: 'KI-Risikoklassifizierung', category: 'sdk', icon: '🤖', url: '/sdk/ai-act' },
-  { id: 'admin-obligations', name: 'Pflichten', description: 'NIS2, DSGVO, AI Act', category: 'sdk', icon: '⚡', url: '/sdk/obligations' },
-
-  // === KI & AUTOMATISIERUNG (Teal #14b8a6) ===
-  { id: 'admin-rag', name: 'Daten & RAG', description: 'Training Data & RAG', category: 'ai', icon: '🗄️', url: '/ai/rag' },
-  { id: 'admin-ocr-labeling', name: 'OCR-Labeling', description: 'Handschrift-Training', category: 'ai', icon: '✍️', url: '/ai/ocr-labeling' },
-  { id: 'admin-magic-help', name: 'Magic Help', description: 'TrOCR Handschrift-OCR', category: 'ai', icon: '🪄', url: '/ai/magic-help' },
-  { id: 'admin-klausur-korrektur', name: 'Klausur-Korrektur', description: 'Abitur-Korrektur mit KI', category: 'ai', icon: '📝', url: '/ai/klausur-korrektur' },
-  { id: 'admin-quality', name: 'Qualitaet & Audit', description: 'Compliance-Audit & Traceability', category: 'ai', icon: '✨', url: '/ai/quality' },
-  { id: 'admin-test-quality', name: 'Test Quality (BQAS)', description: 'Golden Suite & Synthetic Tests', category: 'ai', icon: '🧪', url: '/ai/test-quality' },
-  { id: 'admin-agents', name: 'Agent Management', description: 'Multi-Agent & SOUL-Editor', category: 'ai', icon: '🧠', url: '/ai/agents' },
-
-  // === INFRASTRUKTUR (Orange #f97316) ===
-  { id: 'admin-gpu', name: 'GPU Infrastruktur', description: 'vast.ai GPU Management', category: 'infrastructure', icon: '🖥️', url: '/infrastructure/gpu' },
-  { id: 'admin-middleware', name: 'Middleware', description: 'Stack & API Gateway', category: 'infrastructure', icon: '🔧', url: '/infrastructure/middleware' },
-  { id: 'admin-security', name: 'Security', description: 'DevSecOps & Scans', category: 'infrastructure', icon: '🔐', url: '/infrastructure/security' },
-  { id: 'admin-sbom', name: 'SBOM', description: 'Software Bill of Materials', category: 'infrastructure', icon: '📦', url: '/infrastructure/sbom' },
-  { id: 'admin-cicd', name: 'CI/CD', description: 'Pipelines & Deployments', category: 'infrastructure', icon: '🔄', url: '/infrastructure/ci-cd' },
-  { id: 'admin-tests', name: 'Test Dashboard', description: '195+ Tests & Coverage', category: 'infrastructure', icon: '🧪', url: '/infrastructure/tests' },
-
-  // === BILDUNG (Blue #3b82f6) ===
-  { id: 'admin-edu-search', name: 'Education Search', description: 'Bildungsquellen & Crawler', category: 'education', icon: '🔍', url: '/education/edu-search' },
-  { id: 'admin-zeugnisse', name: 'Zeugnisse-Crawler', description: 'Zeugnis-Daten', category: 'education', icon: '📜', url: '/education/zeugnisse-crawler' },
-  { id: 'admin-rag-pipeline', name: 'RAG Pipeline', description: 'Bildungsdokumente indexieren', category: 'ai', icon: '🔗', url: '/ai/rag-pipeline' },
-  { id: 'admin-foerderantrag', name: 'Foerderantrag-Wizard', description: 'DigitalPakt & Landesfoerderung', category: 'education', icon: '💰', url: '/education/foerderantrag' },
-
-  // === KOMMUNIKATION (Green #22c55e) ===
-  { id: 'admin-video', name: 'Video & Chat', description: 'Matrix & Jitsi Monitoring', category: 'communication', icon: '🎥', url: '/communication/video-chat' },
-  { id: 'admin-matrix', name: 'Voice Service', description: 'Voice-First Interface', category: 'communication', icon: '🎙️', url: '/communication/matrix' },
-  { id: 'admin-mail', name: 'Unified Inbox', description: 'E-Mail & KI-Analyse', category: 'communication', icon: '📧', url: '/communication/mail' },
-  { id: 'admin-alerts', name: 'Alerts Monitoring', description: 'Google Alerts & Feeds', category: 'communication', icon: '🔔', url: '/communication/alerts' },
-
-  // === ENTWICKLUNG (Slate #64748b) ===
-  { id: 'admin-workflow', name: 'Dev Workflow', description: 'Git, CI/CD & Team-Regeln', category: 'development', icon: '⚡', url: '/development/workflow' },
-  { id: 'admin-game', name: 'Breakpilot Drive', description: 'Lernspiel Management', category: 'development', icon: '🎮', url: '/development/game' },
-  { id: 'admin-unity', name: 'Unity Bridge', description: 'Unity Editor Steuerung', category: 'development', icon: '🎯', url: '/development/unity-bridge' },
-  { id: 'admin-companion', name: 'Companion Dev', description: 'Lesson-Modus Entwicklung', category: 'development', icon: '📚', url: '/development/companion' },
-  { id: 'admin-docs', name: 'Developer Docs', description: 'API & Architektur', category: 'development', icon: '📖', url: '/development/docs' },
-  { id: 'admin-brandbook', name: 'Brandbook', description: 'Corporate Design', category: 'development', icon: '🎨', url: '/development/brandbook' },
-  { id: 'admin-screen-flow', name: 'Screen Flow', description: 'UI Screen-Verbindungen', category: 'development', icon: '🔀', url: '/development/screen-flow' },
-  { id: 'admin-content', name: 'Uebersetzungen', description: 'Website Content & Sprachen', category: 'development', icon: '🌐', url: '/development/content' },
-]
-
-const ADMIN_CONNECTIONS: ConnectionDef[] = [
-  // === OVERVIEW/META FLOWS ===
-  { source: 'admin-dashboard', target: 'admin-onboarding', label: 'Erste Schritte' },
-  { source: 'admin-dashboard', target: 'admin-architecture', label: 'System' },
-  { source: 'admin-dashboard', target: 'admin-backlog', label: 'Go-Live' },
-  { source: 'admin-dashboard', target: 'admin-compliance-hub', label: 'Compliance' },
-  { source: 'admin-onboarding', target: 'admin-consent' },
-  { source: 'admin-rbac', target: 'admin-consent' },
-
-  // === DSGVO FLOW ===
-  { source: 'admin-consent', target: 'admin-einwilligungen', label: 'Nutzer' },
-  { source: 'admin-consent', target: 'admin-dsr' },
-  { source: 'admin-dsr', target: 'admin-loeschfristen' },
-  { source: 'admin-vvt', target: 'admin-tom' },
-  { source: 'admin-vvt', target: 'admin-dsfa' },
-  { source: 'admin-dsfa', target: 'admin-tom' },
-  { source: 'admin-advisory-board', target: 'admin-escalations', label: 'Eskalation' },
-  { source: 'admin-advisory-board', target: 'admin-dsfa', label: 'Risiko' },
-
-  // === COMPLIANCE FLOW ===
-  { source: 'admin-compliance-hub', target: 'admin-audit-checklist', label: 'Audit' },
-  { source: 'admin-compliance-hub', target: 'admin-requirements', label: 'Anforderungen' },
-  { source: 'admin-compliance-hub', target: 'admin-risks', label: 'Risiken' },
-  { source: 'admin-compliance-hub', target: 'admin-ai-act', label: 'AI Act' },
-  { source: 'admin-requirements', target: 'admin-controls' },
-  { source: 'admin-controls', target: 'admin-evidence' },
-  { source: 'admin-audit-checklist', target: 'admin-audit-report', label: 'Report' },
-  { source: 'admin-risks', target: 'admin-controls' },
-  { source: 'admin-modules', target: 'admin-controls' },
-  { source: 'admin-source-policy', target: 'admin-rag' },
-  { source: 'admin-obligations', target: 'admin-requirements' },
-  { source: 'admin-dsms', target: 'admin-compliance-workflow' },
-
-  // === KI & AUTOMATISIERUNG FLOW ===
-  { source: 'admin-rag', target: 'admin-quality' },
-  { source: 'admin-rag', target: 'admin-agents' },
-  { source: 'admin-ocr-labeling', target: 'admin-magic-help', label: 'Training' },
-  { source: 'admin-magic-help', target: 'admin-klausur-korrektur', label: 'Korrektur' },
-  { source: 'admin-quality', target: 'admin-test-quality' },
-  { source: 'admin-agents', target: 'admin-test-quality', label: 'BQAS' },
-  { source: 'admin-klausur-korrektur', target: 'admin-quality', label: 'Audit' },
-
-  // === INFRASTRUKTUR FLOW ===
-  { source: 'admin-security', target: 'admin-sbom', label: 'Dependencies' },
-  { source: 'admin-sbom', target: 'admin-tests' },
-  { source: 'admin-tests', target: 'admin-cicd', label: 'Pipeline' },
-  { source: 'admin-cicd', target: 'admin-middleware' },
-  { source: 'admin-middleware', target: 'admin-gpu', label: 'GPU' },
-  { source: 'admin-security', target: 'admin-compliance-hub', label: 'Compliance' },
-
-  // === BILDUNG FLOW ===
-  { source: 'admin-edu-search', target: 'admin-rag', label: 'Quellen' },
-  { source: 'admin-edu-search', target: 'admin-zeugnisse' },
-  { source: 'admin-training', target: 'admin-onboarding' },
-  { source: 'admin-foerderantrag', target: 'admin-docs', label: 'Docs' },
-
-  // === KOMMUNIKATION FLOW ===
-  { source: 'admin-video', target: 'admin-matrix', label: 'Voice' },
-  { source: 'admin-mail', target: 'admin-alerts' },
-  { source: 'admin-alerts', target: 'admin-mail', label: 'Inbox' },
-
-  // === ENTWICKLUNG FLOW ===
-  { source: 'admin-workflow', target: 'admin-cicd', label: 'Pipeline' },
-  { source: 'admin-workflow', target: 'admin-docs' },
-  { source: 'admin-game', target: 'admin-unity', label: 'Editor' },
-  { source: 'admin-companion', target: 'admin-agents', label: 'Agents' },
-  { source: 'admin-brandbook', target: 'admin-screen-flow' },
-  { source: 'admin-docs', target: 'admin-architecture' },
-  { source: 'admin-content', target: 'admin-brandbook' },
-]
-
-// ============================================
-// CATEGORY COLORS
-// ============================================
-
-const STUDIO_COLORS: Record<string, { bg: string; border: string; text: string }> = {
-  navigation: { bg: '#dbeafe', border: '#3b82f6', text: '#1e40af' },
-  content: { bg: '#dcfce7', border: '#22c55e', text: '#166534' },
-  communication: { bg: '#fef3c7', border: '#f59e0b', text: '#92400e' },
-  school: { bg: '#fce7f3', border: '#ec4899', text: '#9d174d' },
-  admin: { bg: '#f3e8ff', border: '#a855f7', text: '#6b21a8' },
-  ai: { bg: '#cffafe', border: '#06b6d4', text: '#0e7490' },
-}
-
-// Colors from navigation.ts
-const ADMIN_COLORS: Record<string, { bg: string; border: string; text: string }> = {
-  overview: { bg: '#e0f2fe', border: '#0ea5e9', text: '#0369a1' },      // Sky (Meta)
-  dsgvo: { bg: '#ede9fe', border: '#7c3aed', text: '#5b21b6' },         // Violet
-  compliance: { bg: '#f3e8ff', border: '#9333ea', text: '#6b21a8' },    // Purple
-  ai: { bg: '#ccfbf1', border: '#14b8a6', text: '#0f766e' },            // Teal
-  infrastructure: { bg: '#ffedd5', border: '#f97316', text: '#c2410c' },// Orange
-  education: { bg: '#dbeafe', border: '#3b82f6', text: '#1e40af' },     // Blue
-  communication: { bg: '#dcfce7', border: '#22c55e', text: '#166534' }, // Green
-  development: { bg: '#f1f5f9', border: '#64748b', text: '#334155' },   // Slate
-}
-
-const STUDIO_LABELS: Record<string, string> = {
-  navigation: 'Navigation',
-  content: 'Content & Tools',
-  communication: 'Kommunikation',
-  school: 'Schulverwaltung',
-  admin: 'Administration',
-  ai: 'KI & Assistent',
-}
-
-// Labels from navigation.ts
-const ADMIN_LABELS: Record<string, string> = {
-  overview: 'Uebersicht & Meta',
-  dsgvo: 'DSGVO',
-  compliance: 'Compliance & GRC',
-  ai: 'KI & Automatisierung',
-  infrastructure: 'Infrastruktur & DevOps',
-  education: 'Bildung & Schule',
-  communication: 'Kommunikation & Alerts',
-  development: 'Entwicklung & Produkte',
-}
-
-// ============================================
-// HELPER: Find all connected nodes (recursive)
-// ============================================
-
-function findConnectedNodes(
-  startNodeId: string,
-  connections: ConnectionDef[],
-  direction: 'children' | 'parents' | 'both' = 'children'
-): Set<string> {
-  const connected = new Set<string>()
-  connected.add(startNodeId)
-
-  const queue = [startNodeId]
-  while (queue.length > 0) {
-    const current = queue.shift()!
-
-    connections.forEach(conn => {
-      if ((direction === 'children' || direction === 'both') && conn.source === current) {
-        if (!connected.has(conn.target)) {
-          connected.add(conn.target)
-          queue.push(conn.target)
-        }
-      }
-      if ((direction === 'parents' || direction === 'both') && conn.target === current) {
-        if (!connected.has(conn.source)) {
-          connected.add(conn.source)
-          queue.push(conn.source)
-        }
-      }
-    })
-  }
-
-  return connected
-}
-
-// ============================================
-// LAYOUT HELPERS
-// ============================================
-
-const getNodePosition = (
-  id: string,
-  category: string,
-  screens: ScreenDefinition[],
-  flowType: FlowType
-) => {
-  const studioPositions: Record<string, { x: number; y: number }> = {
-    navigation: { x: 400, y: 50 },
-    content: { x: 50, y: 250 },
-    communication: { x: 750, y: 250 },
-    school: { x: 50, y: 500 },
-    admin: { x: 750, y: 500 },
-    ai: { x: 400, y: 380 },
-  }
-
-  const adminPositions: Record<string, { x: number; y: number }> = {
-    overview: { x: 400, y: 30 },
-    dsgvo: { x: 50, y: 150 },
-    compliance: { x: 700, y: 150 },
-    ai: { x: 50, y: 350 },
-    communication: { x: 400, y: 350 },
-    infrastructure: { x: 700, y: 350 },
-    education: { x: 50, y: 550 },
-    development: { x: 400, y: 550 },
-  }
-
-  const positions = flowType === 'studio' ? studioPositions : adminPositions
-  const base = positions[category] || { x: 400, y: 300 }
-  const categoryScreens = screens.filter(s => s.category === category)
-  const categoryIndex = categoryScreens.findIndex(s => s.id === id)
-
-  const cols = Math.ceil(Math.sqrt(categoryScreens.length + 1))
-  const row = Math.floor(categoryIndex / cols)
-  const col = categoryIndex % cols
-
-  return {
-    x: base.x + col * 160,
-    y: base.y + row * 90,
-  }
-}
-
-// ============================================
-// MAIN COMPONENT
-// ============================================
+import { useCallback } from 'react'
+import { useScreenFlow } from './useScreenFlow'
+import {
+  FlowTypeSelector,
+  StatsBar,
+  CategoryFilter,
+  ConnectedScreensList,
+  FlowDiagram,
+  ScreenList,
+} from './_components'
+import type { ScreenDefinition } from './types'
 
 export default function ScreenFlowPage() {
-  const [flowType, setFlowType] = useState<FlowType>('admin')
-  const [selectedCategory, setSelectedCategory] = useState<string | null>(null)
-  const [selectedNode, setSelectedNode] = useState<string | null>(null)
-  const [previewScreen, setPreviewScreen] = useState<ScreenDefinition | null>(null)
+  const {
+    flowType,
+    selectedCategory,
+    setSelectedCategory,
+    selectedNode,
+    setSelectedNode,
+    previewScreen,
+    setPreviewScreen,
+    screens,
+    colors,
+    labels,
+    baseUrl,
+    nodes,
+    edges,
+    onNodesChange,
+    onEdgesChange,
+    handleFlowTypeChange,
+    onNodeClick,
+    onPaneClick,
+    stats,
+    categories,
+    connectedScreens,
+  } = useScreenFlow()
 
-  // Get data based on flow type
-  const screens = flowType === 'studio' ? STUDIO_SCREENS : ADMIN_SCREENS
-  const connections = flowType === 'studio' ? STUDIO_CONNECTIONS : ADMIN_CONNECTIONS
-  const colors = flowType === 'studio' ? STUDIO_COLORS : ADMIN_COLORS
-  const labels = flowType === 'studio' ? STUDIO_LABELS : ADMIN_LABELS
-  const baseUrl = flowType === 'studio' ? 'http://macmini:8000' : 'http://macmini:3002'
-
-  // Calculate connected nodes
-  const connectedNodes = useMemo(() => {
-    if (!selectedNode) return new Set<string>()
-    return findConnectedNodes(selectedNode, connections, 'children')
-  }, [selectedNode, connections])
-
-  // Create nodes with useMemo
-  const initialNodes = useMemo((): Node[] => {
-    return screens.map((screen) => {
-      const catColors = colors[screen.category] || { bg: '#f1f5f9', border: '#94a3b8', text: '#475569' }
-      const position = getNodePosition(screen.id, screen.category, screens, flowType)
-
-      // Determine opacity
-      let opacity = 1
-      if (selectedNode) {
-        opacity = connectedNodes.has(screen.id) ? 1 : 0.2
-      } else if (selectedCategory) {
-        opacity = screen.category === selectedCategory ? 1 : 0.2
-      }
-
-      const isSelected = selectedNode === screen.id
-
-      return {
-        id: screen.id,
-        type: 'default',
-        position,
-        data: {
-          label: (
-            <div className="text-center p-1">
-              <div className="text-lg mb-1">{screen.icon}</div>
-              <div className="font-medium text-xs leading-tight">{screen.name}</div>
-            </div>
-          ),
-        },
-        style: {
-          background: isSelected ? catColors.border : catColors.bg,
-          color: isSelected ? 'white' : catColors.text,
-          border: `2px solid ${catColors.border}`,
-          borderRadius: '12px',
-          padding: '6px',
-          minWidth: '110px',
-          opacity,
-          cursor: 'pointer',
-          boxShadow: isSelected ? `0 0 20px ${catColors.border}` : 'none',
-        },
-      }
-    })
-  }, [screens, colors, flowType, selectedCategory, selectedNode, connectedNodes])
-
-  // Create edges with useMemo
-  const initialEdges = useMemo((): Edge[] => {
-    return connections.map((conn, index) => {
-      const isHighlighted = selectedNode && (conn.source === selectedNode || conn.target === selectedNode)
-      const isInSubtree = selectedNode && connectedNodes.has(conn.source) && connectedNodes.has(conn.target)
-
-      return {
-        id: `e-${conn.source}-${conn.target}-${index}`,
-        source: conn.source,
-        target: conn.target,
-        label: conn.label,
-        type: 'smoothstep',
-        animated: isHighlighted || false,
-        style: {
-          stroke: isHighlighted ? '#3b82f6' : (isInSubtree ? '#94a3b8' : '#e2e8f0'),
-          strokeWidth: isHighlighted ? 3 : 1.5,
-          opacity: selectedNode ? (isInSubtree ? 1 : 0.15) : 1,
-        },
-        labelStyle: { fontSize: 9, fill: '#64748b' },
-        labelBgStyle: { fill: '#f8fafc' },
-        markerEnd: { type: MarkerType.ArrowClosed, color: isHighlighted ? '#3b82f6' : '#94a3b8', width: 15, height: 15 },
-      }
-    })
-  }, [connections, selectedNode, connectedNodes])
-
-  const [nodes, setNodes, onNodesChange] = useNodesState([])
-  const [edges, setEdges, onEdgesChange] = useEdgesState([])
-
-  // Update nodes/edges when dependencies change
-  useEffect(() => {
-    setNodes(initialNodes)
-    setEdges(initialEdges)
-  }, [initialNodes, initialEdges, setNodes, setEdges])
-
-  // Reset when flow type changes
-  const handleFlowTypeChange = useCallback((newType: FlowType) => {
-    setFlowType(newType)
-    setSelectedNode(null)
-    setSelectedCategory(null)
-    setPreviewScreen(null)
-  }, [])
-
-  // Handle node click
-  const onNodeClick = useCallback((_event: React.MouseEvent, node: Node) => {
-    const screen = screens.find(s => s.id === node.id)
-
-    if (selectedNode === node.id) {
-      // Double-click: open in new tab
-      if (screen?.url) {
-        window.open(`${baseUrl}${screen.url}`, '_blank')
-      }
-      return
-    }
-
-    setSelectedNode(node.id)
-    setSelectedCategory(null)
-
-    if (screen) {
-      setPreviewScreen(screen)
-    }
-  }, [screens, baseUrl, selectedNode])
-
-  // Handle background click - deselect
-  const onPaneClick = useCallback(() => {
+  const handleReset = useCallback(() => {
     setSelectedNode(null)
     setPreviewScreen(null)
-  }, [])
+  }, [setSelectedNode, setPreviewScreen])
 
-  // Stats
-  const stats = {
-    totalScreens: screens.length,
-    totalConnections: connections.length,
-    connectedCount: connectedNodes.size,
-  }
+  const handleCategoryReset = useCallback(() => {
+    setSelectedCategory(null)
+    setSelectedNode(null)
+    setPreviewScreen(null)
+  }, [setSelectedCategory, setSelectedNode, setPreviewScreen])
 
-  const categories = Object.keys(labels)
+  const handleSelectCategory = useCallback((category: string | null) => {
+    setSelectedCategory(category)
+    setSelectedNode(null)
+    setPreviewScreen(null)
+  }, [setSelectedCategory, setSelectedNode, setPreviewScreen])
 
-  // Connected screens list
-  const connectedScreens = selectedNode
-    ? screens.filter(s => connectedNodes.has(s.id))
-    : []
+  const handleSelectScreen = useCallback((screen: ScreenDefinition) => {
+    setSelectedNode(screen.id)
+    setSelectedCategory(null)
+    setPreviewScreen(screen)
+  }, [setSelectedNode, setSelectedCategory, setPreviewScreen])
 
   return (
     <div className="space-y-6">
-      {/* Flow Type Selector */}
-      <div className="grid grid-cols-2 gap-4">
-        <button
-          onClick={() => handleFlowTypeChange('studio')}
-          className={`p-6 rounded-xl border-2 transition-all ${
-            flowType === 'studio'
-              ? 'border-green-500 bg-green-50 shadow-lg'
-              : 'border-slate-200 bg-white hover:border-slate-300'
-          }`}
-        >
-          <div className="flex items-center gap-4">
-            <div className={`w-14 h-14 rounded-xl flex items-center justify-center text-2xl ${
-              flowType === 'studio' ? 'bg-green-500 text-white' : 'bg-slate-100'
-            }`}>
-              🎓
-            </div>
-            <div className="text-left">
-              <div className="font-bold text-lg">Studio (Port 8000)</div>
-              <div className="text-sm text-slate-500">Lehrer-Oberflaeche</div>
-              <div className="text-xs text-slate-400 mt-1">{STUDIO_SCREENS.length} Screens</div>
-            </div>
-          </div>
-        </button>
+      <FlowTypeSelector
+        flowType={flowType}
+        onFlowTypeChange={handleFlowTypeChange}
+      />
 
-        <button
-          onClick={() => handleFlowTypeChange('admin')}
-          className={`p-6 rounded-xl border-2 transition-all ${
-            flowType === 'admin'
-              ? 'border-primary-500 bg-primary-50 shadow-lg'
-              : 'border-slate-200 bg-white hover:border-slate-300'
-          }`}
-        >
-          <div className="flex items-center gap-4">
-            <div className={`w-14 h-14 rounded-xl flex items-center justify-center text-2xl ${
-              flowType === 'admin' ? 'bg-primary-500 text-white' : 'bg-slate-100'
-            }`}>
-              ⚙️
-            </div>
-            <div className="text-left">
-              <div className="font-bold text-lg">Admin v2 (Port 3002)</div>
-              <div className="text-sm text-slate-500">Admin Panel</div>
-              <div className="text-xs text-slate-400 mt-1">{ADMIN_SCREENS.length} Screens</div>
-            </div>
-          </div>
-        </button>
-      </div>
+      <StatsBar
+        totalScreens={stats.totalScreens}
+        totalConnections={stats.totalConnections}
+        connectedCount={stats.connectedCount}
+        selectedNode={selectedNode}
+        previewScreen={previewScreen}
+        onReset={handleReset}
+      />
 
-      {/* Stats & Selection Info */}
-      <div className="grid grid-cols-4 gap-4">
-        <div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
-          <div className="text-3xl font-bold text-slate-800">{stats.totalScreens}</div>
-          <div className="text-sm text-slate-500">Screens</div>
-        </div>
-        <div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
-          <div className="text-3xl font-bold text-primary-600">{stats.totalConnections}</div>
-          <div className="text-sm text-slate-500">Verbindungen</div>
-        </div>
-        <div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm col-span-2">
-          {selectedNode ? (
-            <div className="flex items-center gap-3">
-              <div className="text-3xl">{previewScreen?.icon}</div>
-              <div>
-                <div className="font-bold text-slate-800">{previewScreen?.name}</div>
-                <div className="text-sm text-slate-500">
-                  {stats.connectedCount} verbundene Screen{stats.connectedCount !== 1 ? 's' : ''}
-                </div>
-              </div>
-              <button
-                onClick={() => {
-                  setSelectedNode(null)
-                  setPreviewScreen(null)
-                }}
-                className="ml-auto px-3 py-1 text-sm bg-slate-100 hover:bg-slate-200 rounded-lg"
-              >
-                Zuruecksetzen
-              </button>
-            </div>
-          ) : (
-            <div className="text-slate-500 text-sm">
-              Klicke auf einen Screen um den Subtree zu sehen
-            </div>
-          )}
-        </div>
-      </div>
+      <CategoryFilter
+        screens={screens}
+        categories={categories}
+        colors={colors}
+        labels={labels}
+        selectedCategory={selectedCategory}
+        selectedNode={selectedNode}
+        onSelectCategory={handleSelectCategory}
+        onReset={handleCategoryReset}
+      />
 
-      {/* Category Filter */}
-      <div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
-        <div className="flex flex-wrap gap-2">
-          <button
-            onClick={() => {
-              setSelectedCategory(null)
-              setSelectedNode(null)
-              setPreviewScreen(null)
-            }}
-            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
-              selectedCategory === null && !selectedNode
-                ? 'bg-slate-800 text-white'
-                : 'bg-slate-100 text-slate-700 hover:bg-slate-200'
-            }`}
-          >
-            Alle ({screens.length})
-          </button>
-          {categories.map((key) => {
-            const count = screens.filter(s => s.category === key).length
-            const catColors = colors[key] || { bg: '#f1f5f9', border: '#94a3b8', text: '#475569' }
-            return (
-              <button
-                key={key}
-                onClick={() => {
-                  setSelectedCategory(selectedCategory === key ? null : key)
-                  setSelectedNode(null)
-                  setPreviewScreen(null)
-                }}
-                className="px-4 py-2 rounded-lg text-sm font-medium transition-all flex items-center gap-2"
-                style={{
-                  background: selectedCategory === key ? catColors.border : catColors.bg,
-                  color: selectedCategory === key ? 'white' : catColors.text,
-                }}
-              >
-                <span className="w-3 h-3 rounded-full" style={{ background: catColors.border }} />
-                {labels[key]} ({count})
-              </button>
-            )
-          })}
-        </div>
-      </div>
+      <ConnectedScreensList
+        selectedNode={selectedNode}
+        connectedScreens={connectedScreens}
+        colors={colors}
+        baseUrl={baseUrl}
+      />
 
-      {/* Connected Screens List */}
-      {selectedNode && connectedScreens.length > 1 && (
-        <div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
-          <div className="text-sm font-medium text-slate-700 mb-3">Verbundene Screens:</div>
-          <div className="flex flex-wrap gap-2">
-            {connectedScreens.map((screen) => {
-              const catColors = colors[screen.category] || { bg: '#f1f5f9', border: '#94a3b8', text: '#475569' }
-              const isCurrentNode = screen.id === selectedNode
-              return (
-                <button
-                  key={screen.id}
-                  onClick={() => {
-                    if (screen.url) {
-                      window.open(`${baseUrl}${screen.url}`, '_blank')
-                    }
-                  }}
-                  className={`px-3 py-2 rounded-lg text-sm font-medium transition-all flex items-center gap-2 ${
-                    isCurrentNode ? 'ring-2 ring-primary-500' : ''
-                  }`}
-                  style={{
-                    background: isCurrentNode ? catColors.border : catColors.bg,
-                    color: isCurrentNode ? 'white' : catColors.text,
-                  }}
-                >
-                  <span>{screen.icon}</span>
-                  {screen.name}
-                </button>
-              )
-            })}
-          </div>
-        </div>
-      )}
+      <FlowDiagram
+        flowType={flowType}
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onNodeClick={onNodeClick}
+        onPaneClick={onPaneClick}
+        screens={screens}
+        colors={colors}
+        labels={labels}
+        categories={categories}
+      />
 
-      {/* Flow Diagram */}
-      <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden" style={{ height: '500px' }}>
-        <ReactFlow
-          nodes={nodes}
-          edges={edges}
-          onNodesChange={onNodesChange}
-          onEdgesChange={onEdgesChange}
-          onNodeClick={onNodeClick}
-          onPaneClick={onPaneClick}
-          fitView
-          fitViewOptions={{ padding: 0.2 }}
-          attributionPosition="bottom-left"
-        >
-          <Controls />
-          <MiniMap
-            nodeColor={(node) => {
-              const screen = screens.find(s => s.id === node.id)
-              const catColors = screen ? colors[screen.category] : null
-              return catColors?.border || '#94a3b8'
-            }}
-            maskColor="rgba(0, 0, 0, 0.1)"
-          />
-          <Background variant={BackgroundVariant.Dots} gap={12} size={1} />
-
-          <Panel position="top-left" className="bg-white/95 p-3 rounded-lg shadow-lg text-xs">
-            <div className="font-medium text-slate-700 mb-2">
-              {flowType === 'studio' ? '🎓 Studio' : '⚙️ Admin v2'}
-            </div>
-            <div className="space-y-1">
-              {categories.slice(0, 4).map((key) => {
-                const catColors = colors[key] || { bg: '#f1f5f9', border: '#94a3b8' }
-                return (
-                  <div key={key} className="flex items-center gap-2">
-                    <span
-                      className="w-3 h-3 rounded"
-                      style={{ background: catColors.bg, border: `1px solid ${catColors.border}` }}
-                    />
-                    <span className="text-slate-600">{labels[key]}</span>
-                  </div>
-                )
-              })}
-            </div>
-            <div className="mt-2 pt-2 border-t text-slate-400">
-              Klick = Subtree<br/>
-              Doppelklick = Oeffnen
-            </div>
-          </Panel>
-        </ReactFlow>
-      </div>
-
-      {/* Screen List */}
-      <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
-        <div className="px-4 py-3 bg-slate-50 border-b flex items-center justify-between">
-          <h3 className="font-medium text-slate-700">
-            Alle Screens ({screens.length})
-          </h3>
-          <span className="text-xs text-slate-400">{baseUrl}</span>
-        </div>
-        <div className="divide-y max-h-80 overflow-y-auto">
-          {screens
-            .filter(s => !selectedCategory || s.category === selectedCategory)
-            .map((screen) => {
-              const catColors = colors[screen.category] || { bg: '#f1f5f9', border: '#94a3b8', text: '#475569' }
-              return (
-                <button
-                  key={screen.id}
-                  onClick={() => {
-                    setSelectedNode(screen.id)
-                    setSelectedCategory(null)
-                    setPreviewScreen(screen)
-                  }}
-                  className="w-full flex items-center gap-4 p-3 hover:bg-slate-50 transition-colors text-left"
-                >
-                  <span
-                    className="w-9 h-9 rounded-lg flex items-center justify-center text-lg"
-                    style={{ background: catColors.bg }}
-                  >
-                    {screen.icon}
-                  </span>
-                  <div className="flex-1 min-w-0">
-                    <div className="font-medium text-slate-800 text-sm">{screen.name}</div>
-                    <div className="text-xs text-slate-500 truncate">{screen.description}</div>
-                  </div>
-                  <span
-                    className="px-2 py-1 rounded text-xs font-medium shrink-0"
-                    style={{ background: catColors.bg, color: catColors.text }}
-                  >
-                    {labels[screen.category]}
-                  </span>
-                </button>
-              )
-            })}
-        </div>
-      </div>
+      <ScreenList
+        screens={screens}
+        colors={colors}
+        labels={labels}
+        baseUrl={baseUrl}
+        selectedCategory={selectedCategory}
+        onSelectScreen={handleSelectScreen}
+      />
     </div>
   )
 }
diff --git a/admin-lehrer/app/(admin)/development/screen-flow/types.ts b/admin-lehrer/app/(admin)/development/screen-flow/types.ts
new file mode 100644
index 0000000..22d5d5e
--- /dev/null
+++ b/admin-lehrer/app/(admin)/development/screen-flow/types.ts
@@ -0,0 +1,20 @@
+/**
+ * Screen Flow - Type definitions
+ */
+
+export interface ScreenDefinition {
+  id: string
+  name: string
+  description: string
+  category: string
+  icon: string
+  url?: string
+}
+
+export interface ConnectionDef {
+  source: string
+  target: string
+  label?: string
+}
+
+export type FlowType = 'studio' | 'admin'
diff --git a/admin-lehrer/app/(admin)/development/screen-flow/useScreenFlow.tsx b/admin-lehrer/app/(admin)/development/screen-flow/useScreenFlow.tsx
new file mode 100644
index 0000000..e8e4827
--- /dev/null
+++ b/admin-lehrer/app/(admin)/development/screen-flow/useScreenFlow.tsx
@@ -0,0 +1,182 @@
+'use client'
+
+/**
+ * Screen Flow - State management hook
+ */
+
+import { useCallback, useState, useMemo, useEffect } from 'react'
+import { Node, Edge, useNodesState, useEdgesState, MarkerType } from 'reactflow'
+
+import type { ScreenDefinition, FlowType } from './types'
+import {
+  STUDIO_SCREENS, ADMIN_SCREENS,
+  STUDIO_CONNECTIONS, ADMIN_CONNECTIONS,
+  STUDIO_COLORS, ADMIN_COLORS,
+  STUDIO_LABELS, ADMIN_LABELS,
+} from './data'
+import { findConnectedNodes, getNodePosition } from './helpers'
+
+export function useScreenFlow() {
+  const [flowType, setFlowType] = useState<FlowType>('admin')
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null)
+  const [selectedNode, setSelectedNode] = useState<string | null>(null)
+  const [previewScreen, setPreviewScreen] = useState<ScreenDefinition | null>(null)
+
+  // Derived data based on flow type
+  const screens = flowType === 'studio' ? STUDIO_SCREENS : ADMIN_SCREENS
+  const connections = flowType === 'studio' ? STUDIO_CONNECTIONS : ADMIN_CONNECTIONS
+  const colors = flowType === 'studio' ? STUDIO_COLORS : ADMIN_COLORS
+  const labels = flowType === 'studio' ? STUDIO_LABELS : ADMIN_LABELS
+  const baseUrl = flowType === 'studio' ? 'http://macmini:8000' : 'http://macmini:3002'
+
+  // BFS connected nodes
+  const connectedNodes = useMemo(() => {
+    if (!selectedNode) return new Set<string>()
+    return findConnectedNodes(selectedNode, connections, 'children')
+  }, [selectedNode, connections])
+
+  // Build ReactFlow nodes
+  const initialNodes = useMemo((): Node[] => {
+    return screens.map((screen) => {
+      const catColors = colors[screen.category] || { bg: '#f1f5f9', border: '#94a3b8', text: '#475569' }
+      const position = getNodePosition(screen.id, screen.category, screens, flowType)
+
+      let opacity = 1
+      if (selectedNode) {
+        opacity = connectedNodes.has(screen.id) ? 1 : 0.2
+      } else if (selectedCategory) {
+        opacity = screen.category === selectedCategory ? 1 : 0.2
+      }
+
+      const isSelected = selectedNode === screen.id
+
+      return {
+        id: screen.id,
+        type: 'default',
+        position,
+        data: {
+          label: (
+            <div className="text-center p-1">
+              <div className="text-lg mb-1">{screen.icon}</div>
+              <div className="font-medium text-xs leading-tight">{screen.name}</div>
+            </div>
+          ),
+        },
+        style: {
+          background: isSelected ? catColors.border : catColors.bg,
+          color: isSelected ? 'white' : catColors.text,
+          border: `2px solid ${catColors.border}`,
+          borderRadius: '12px',
+          padding: '6px',
+          minWidth: '110px',
+          opacity,
+          cursor: 'pointer',
+          boxShadow: isSelected ? `0 0 20px ${catColors.border}` : 'none',
+        },
+      }
+    })
+  }, [screens, colors, flowType, selectedCategory, selectedNode, connectedNodes])
+
+  // Build ReactFlow edges
+  const initialEdges = useMemo((): Edge[] => {
+    return connections.map((conn, index) => {
+      const isHighlighted = selectedNode && (conn.source === selectedNode || conn.target === selectedNode)
+      const isInSubtree = selectedNode && connectedNodes.has(conn.source) && connectedNodes.has(conn.target)
+
+      return {
+        id: `e-${conn.source}-${conn.target}-${index}`,
+        source: conn.source,
+        target: conn.target,
+        label: conn.label,
+        type: 'smoothstep',
+        animated: isHighlighted || false,
+        style: {
+          stroke: isHighlighted ? '#3b82f6' : (isInSubtree ? '#94a3b8' : '#e2e8f0'),
+          strokeWidth: isHighlighted ? 3 : 1.5,
+          opacity: selectedNode ? (isInSubtree ? 1 : 0.15) : 1,
+        },
+        labelStyle: { fontSize: 9, fill: '#64748b' },
+        labelBgStyle: { fill: '#f8fafc' },
+        markerEnd: { type: MarkerType.ArrowClosed, color: isHighlighted ? '#3b82f6' : '#94a3b8', width: 15, height: 15 },
+      }
+    })
+  }, [connections, selectedNode, connectedNodes])
+
+  const [nodes, setNodes, onNodesChange] = useNodesState([])
+  const [edges, setEdges, onEdgesChange] = useEdgesState([])
+
+  // Sync memoized nodes/edges into ReactFlow state
+  useEffect(() => {
+    setNodes(initialNodes)
+    setEdges(initialEdges)
+  }, [initialNodes, initialEdges, setNodes, setEdges])
+
+  // Reset on flow type change
+  const handleFlowTypeChange = useCallback((newType: FlowType) => {
+    setFlowType(newType)
+    setSelectedNode(null)
+    setSelectedCategory(null)
+    setPreviewScreen(null)
+  }, [])
+
+  // Node click: select or open on double-click
+  const onNodeClick = useCallback((_event: React.MouseEvent, node: Node) => {
+    const screen = screens.find(s => s.id === node.id)
+
+    if (selectedNode === node.id) {
+      if (screen?.url) {
+        window.open(`${baseUrl}${screen.url}`, '_blank')
+      }
+      return
+    }
+
+    setSelectedNode(node.id)
+    setSelectedCategory(null)
+    if (screen) {
+      setPreviewScreen(screen)
+    }
+  }, [screens, baseUrl, selectedNode])
+
+  // Background click: deselect
+  const onPaneClick = useCallback(() => {
+    setSelectedNode(null)
+    setPreviewScreen(null)
+  }, [])
+
+  const stats = {
+    totalScreens: screens.length,
+    totalConnections: connections.length,
+    connectedCount: connectedNodes.size,
+  }
+
+  const categories = Object.keys(labels)
+
+  const connectedScreens = selectedNode
+    ? screens.filter(s => connectedNodes.has(s.id))
+    : []
+
+  return {
+    flowType,
+    selectedCategory,
+    setSelectedCategory,
+    selectedNode,
+    setSelectedNode,
+    previewScreen,
+    setPreviewScreen,
+    screens,
+    colors,
+    labels,
+    baseUrl,
+    connectedNodes,
+    nodes,
+    edges,
+    onNodesChange,
+    onEdgesChange,
+    handleFlowTypeChange,
+    onNodeClick,
+    onPaneClick,
+    stats,
+    categories,
+    connectedScreens,
+  }
+}
diff --git a/admin-lehrer/app/(admin)/education/abitur-archiv/_components/DocumentDisplay.tsx b/admin-lehrer/app/(admin)/education/abitur-archiv/_components/DocumentDisplay.tsx
new file mode 100644
index 0000000..b788ab3
--- /dev/null
+++ b/admin-lehrer/app/(admin)/education/abitur-archiv/_components/DocumentDisplay.tsx
@@ -0,0 +1,214 @@
+import {
+  FileText, ChevronLeft, ChevronRight, Eye, Download, Loader2,
+} from 'lucide-react'
+import type { AbiturDokument } from '@/lib/education/abitur-docs-types'
+import { formatFileSize, FAECHER } from '@/lib/education/abitur-docs-types'
+import { DokumentCard } from '../components/DokumentCard'
+
+interface DocumentDisplayProps {
+  documents: AbiturDokument[]
+  loading: boolean
+  error: string | null
+  viewMode: 'grid' | 'list'
+  hasActiveFilters: boolean
+  onClearFilters: () => void
+  onSelectDocument: (doc: AbiturDokument) => void
+  onDownload: (doc: AbiturDokument) => void
+  onAddToKlausur: (doc: AbiturDokument) => void
+  onRetry: () => void
+  // Pagination
+  page: number
+  totalPages: number
+  total: number
+  limit: number
+  onPageChange: (page: number) => void
+}
+
+export function DocumentDisplay({
+  documents, loading, error, viewMode, hasActiveFilters,
+  onClearFilters, onSelectDocument, onDownload, onAddToKlausur, onRetry,
+  page, totalPages, total, limit, onPageChange,
+}: DocumentDisplayProps) {
+  return (
+    <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
+      {loading ? (
+        <div className="flex items-center justify-center py-16">
+          <Loader2 className="w-8 h-8 text-blue-600 animate-spin" />
+        </div>
+      ) : error ? (
+        <div className="text-center py-16 text-red-600">
+          <p>{error}</p>
+          <button
+            onClick={onRetry}
+            className="mt-2 text-sm text-blue-600 hover:underline"
+          >
+            Erneut versuchen
+          </button>
+        </div>
+      ) : documents.length === 0 ? (
+        <div className="text-center py-16 text-slate-500">
+          <FileText className="w-12 h-12 mx-auto mb-3 opacity-50" />
+          <p>Keine Dokumente gefunden</p>
+          {hasActiveFilters && (
+            <button
+              onClick={onClearFilters}
+              className="mt-2 text-sm text-blue-600 hover:underline"
+            >
+              Filter zuruecksetzen
+            </button>
+          )}
+        </div>
+      ) : viewMode === 'grid' ? (
+        <div className="p-4">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+            {documents.map((doc) => (
+              <DokumentCard
+                key={doc.id}
+                document={doc}
+                onPreview={onSelectDocument}
+                onDownload={onDownload}
+                onAddToKlausur={onAddToKlausur}
+              />
+            ))}
+          </div>
+        </div>
+      ) : (
+        <ListView
+          documents={documents}
+          onSelectDocument={onSelectDocument}
+          onDownload={onDownload}
+        />
+      )}
+
+      {/* Pagination */}
+      {documents.length > 0 && (
+        <div className="flex items-center justify-between px-4 py-3 border-t border-slate-200 bg-slate-50">
+          <div className="text-sm text-slate-500">
+            Zeige {(page - 1) * limit + 1}-{Math.min(page * limit, total)} von {total} Dokumenten
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => onPageChange(Math.max(1, page - 1))}
+              disabled={page === 1}
+              className="p-2 rounded-lg hover:bg-slate-200 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              <ChevronLeft className="w-4 h-4" />
+            </button>
+            <span className="text-sm text-slate-600">
+              Seite {page} von {totalPages}
+            </span>
+            <button
+              onClick={() => onPageChange(Math.min(totalPages, page + 1))}
+              disabled={page === totalPages}
+              className="p-2 rounded-lg hover:bg-slate-200 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              <ChevronRight className="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function ListView({
+  documents,
+  onSelectDocument,
+  onDownload,
+}: {
+  documents: AbiturDokument[]
+  onSelectDocument: (doc: AbiturDokument) => void
+  onDownload: (doc: AbiturDokument) => void
+}) {
+  return (
+    <table className="w-full text-sm">
+      <thead className="bg-slate-50 border-b border-slate-200">
+        <tr>
+          <th className="text-left px-4 py-3 font-medium text-slate-600">Dokument</th>
+          <th className="text-left px-4 py-3 font-medium text-slate-600">Fach</th>
+          <th className="text-center px-4 py-3 font-medium text-slate-600">Jahr</th>
+          <th className="text-center px-4 py-3 font-medium text-slate-600">Niveau</th>
+          <th className="text-center px-4 py-3 font-medium text-slate-600">Typ</th>
+          <th className="text-right px-4 py-3 font-medium text-slate-600">Groesse</th>
+          <th className="text-center px-4 py-3 font-medium text-slate-600">Status</th>
+          <th className="text-center px-4 py-3 font-medium text-slate-600">Aktion</th>
+        </tr>
+      </thead>
+      <tbody>
+        {documents.map((doc) => {
+          const fachLabel = FAECHER.find(f => f.id === doc.fach)?.label || doc.fach
+          return (
+            <tr
+              key={doc.id}
+              className="border-b border-slate-100 hover:bg-slate-50 cursor-pointer"
+              onClick={() => onSelectDocument(doc)}
+            >
+              <td className="px-4 py-3">
+                <div className="flex items-center gap-2">
+                  <FileText className="w-4 h-4 text-red-500" />
+                  <span className="font-medium text-slate-900 truncate max-w-[200px]" title={doc.dateiname}>
+                    {doc.dateiname}
+                  </span>
+                </div>
+              </td>
+              <td className="px-4 py-3">
+                <span className="capitalize">{fachLabel}</span>
+              </td>
+              <td className="px-4 py-3 text-center">{doc.jahr}</td>
+              <td className="px-4 py-3 text-center">
+                <span className={`px-2 py-0.5 rounded-full text-xs ${
+                  doc.niveau === 'eA'
+                    ? 'bg-blue-100 text-blue-700'
+                    : 'bg-slate-100 text-slate-700'
+                }`}>
+                  {doc.niveau}
+                </span>
+              </td>
+              <td className="px-4 py-3 text-center">
+                <span className={`px-2 py-0.5 rounded-full text-xs ${
+                  doc.typ === 'erwartungshorizont'
+                    ? 'bg-orange-100 text-orange-700'
+                    : 'bg-purple-100 text-purple-700'
+                }`}>
+                  {doc.typ === 'erwartungshorizont' ? 'EWH' : 'Aufgabe'}
+                </span>
+              </td>
+              <td className="px-4 py-3 text-right text-slate-500">
+                {formatFileSize(doc.file_size)}
+              </td>
+              <td className="px-4 py-3 text-center">
+                <span className={`px-2 py-0.5 rounded-full text-xs ${
+                  doc.status === 'indexed'
+                    ? 'bg-green-100 text-green-700'
+                    : doc.status === 'error'
+                    ? 'bg-red-100 text-red-700'
+                    : 'bg-yellow-100 text-yellow-700'
+                }`}>
+                  {doc.status === 'indexed' ? 'Indexiert' : doc.status === 'error' ? 'Fehler' : 'Ausstehend'}
+                </span>
+              </td>
+              <td className="px-4 py-3 text-center">
+                <div className="flex items-center justify-center gap-1" onClick={(e) => e.stopPropagation()}>
+                  <button
+                    onClick={() => onSelectDocument(doc)}
+                    className="p-1.5 text-blue-600 hover:bg-blue-50 rounded"
+                    title="Vorschau"
+                  >
+                    <Eye className="w-4 h-4" />
+                  </button>
+                  <button
+                    onClick={() => onDownload(doc)}
+                    className="p-1.5 text-slate-600 hover:bg-slate-100 rounded"
+                    title="Download"
+                  >
+                    <Download className="w-4 h-4" />
+                  </button>
+                </div>
+              </td>
+            </tr>
+          )
+        })}
+      </tbody>
+    </table>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/education/abitur-archiv/_components/FilterBar.tsx b/admin-lehrer/app/(admin)/education/abitur-archiv/_components/FilterBar.tsx
new file mode 100644
index 0000000..b1f636f
--- /dev/null
+++ b/admin-lehrer/app/(admin)/education/abitur-archiv/_components/FilterBar.tsx
@@ -0,0 +1,174 @@
+import {
+  Filter, X, LayoutGrid, List,
+} from 'lucide-react'
+import {
+  FAECHER,
+  JAHRE,
+  BUNDESLAENDER,
+  NIVEAUS,
+  TYPEN,
+} from '@/lib/education/abitur-docs-types'
+import type { ViewMode } from '@/lib/education/abitur-archiv-types'
+
+interface FilterBarProps {
+  filterOpen: boolean
+  onToggleFilter: () => void
+  hasActiveFilters: boolean
+  onClearFilters: () => void
+  total: number
+  viewMode: ViewMode
+  onViewModeChange: (mode: ViewMode) => void
+  filterFach: string
+  filterJahr: string
+  filterBundesland: string
+  filterNiveau: string
+  filterTyp: string
+  onFachChange: (v: string) => void
+  onJahrChange: (v: string) => void
+  onBundeslandChange: (v: string) => void
+  onNiveauChange: (v: string) => void
+  onTypChange: (v: string) => void
+  onResetPage: () => void
+  searchQuery: string
+}
+
+export function FilterBar({
+  filterOpen, onToggleFilter, hasActiveFilters, onClearFilters,
+  total, viewMode, onViewModeChange,
+  filterFach, filterJahr, filterBundesland, filterNiveau, filterTyp,
+  onFachChange, onJahrChange, onBundeslandChange, onNiveauChange, onTypChange,
+  onResetPage, searchQuery,
+}: FilterBarProps) {
+  const activeCount = [filterFach, filterJahr, filterBundesland, filterNiveau, filterTyp, searchQuery].filter(Boolean).length
+
+  return (
+    <div className="bg-white rounded-xl border border-slate-200 p-4">
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-3">
+          <button
+            onClick={onToggleFilter}
+            className={`px-4 py-2 rounded-lg font-medium flex items-center gap-2 transition-colors ${
+              filterOpen || hasActiveFilters
+                ? 'bg-purple-100 text-purple-700'
+                : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
+            }`}
+          >
+            <Filter className="w-4 h-4" />
+            Filter
+            {hasActiveFilters && (
+              <span className="bg-purple-600 text-white text-xs px-1.5 py-0.5 rounded-full">
+                {activeCount}
+              </span>
+            )}
+          </button>
+
+          {hasActiveFilters && (
+            <button
+              onClick={onClearFilters}
+              className="text-sm text-slate-500 hover:text-slate-700 flex items-center gap-1"
+            >
+              <X className="w-4 h-4" />
+              Filter zuruecksetzen
+            </button>
+          )}
+        </div>
+
+        <div className="flex items-center gap-3">
+          <span className="text-sm text-slate-500">{total} Treffer</span>
+
+          <div className="flex bg-slate-100 rounded-lg p-1">
+            <button
+              onClick={() => onViewModeChange('grid')}
+              className={`p-2 rounded-md transition-colors ${
+                viewMode === 'grid' ? 'bg-white shadow-sm text-blue-600' : 'text-slate-500 hover:text-slate-700'
+              }`}
+              title="Raster-Ansicht"
+            >
+              <LayoutGrid className="w-4 h-4" />
+            </button>
+            <button
+              onClick={() => onViewModeChange('list')}
+              className={`p-2 rounded-md transition-colors ${
+                viewMode === 'list' ? 'bg-white shadow-sm text-blue-600' : 'text-slate-500 hover:text-slate-700'
+              }`}
+              title="Listen-Ansicht"
+            >
+              <List className="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Filter Dropdowns */}
+      {filterOpen && (
+        <div className="grid grid-cols-2 md:grid-cols-5 gap-3 pt-4 border-t border-slate-200">
+          <div>
+            <label className="block text-xs text-slate-500 mb-1">Fach</label>
+            <select
+              value={filterFach}
+              onChange={(e) => { onFachChange(e.target.value); onResetPage() }}
+              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="">Alle Faecher</option>
+              {FAECHER.map(f => (
+                <option key={f.id} value={f.id}>{f.label}</option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="block text-xs text-slate-500 mb-1">Jahr</label>
+            <select
+              value={filterJahr}
+              onChange={(e) => { onJahrChange(e.target.value); onResetPage() }}
+              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="">Alle Jahre</option>
+              {JAHRE.map(j => (
+                <option key={j} value={j}>{j}</option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="block text-xs text-slate-500 mb-1">Bundesland</label>
+            <select
+              value={filterBundesland}
+              onChange={(e) => { onBundeslandChange(e.target.value); onResetPage() }}
+              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="">Alle Bundeslaender</option>
+              {BUNDESLAENDER.map(b => (
+                <option key={b.id} value={b.id}>{b.label}</option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="block text-xs text-slate-500 mb-1">Niveau</label>
+            <select
+              value={filterNiveau}
+              onChange={(e) => { onNiveauChange(e.target.value); onResetPage() }}
+              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="">Alle Niveaus</option>
+              {NIVEAUS.map(n => (
+                <option key={n.id} value={n.id}>{n.label}</option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="block text-xs text-slate-500 mb-1">Typ</label>
+            <select
+              value={filterTyp}
+              onChange={(e) => { onTypChange(e.target.value); onResetPage() }}
+              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="">Alle Typen</option>
+              {TYPEN.map(t => (
+                <option key={t.id} value={t.id}>{t.label}</option>
+              ))}
+            </select>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/education/abitur-archiv/_components/useAbiturArchiv.ts b/admin-lehrer/app/(admin)/education/abitur-archiv/_components/useAbiturArchiv.ts
new file mode 100644
index 0000000..519bfaa
--- /dev/null
+++ b/admin-lehrer/app/(admin)/education/abitur-archiv/_components/useAbiturArchiv.ts
@@ -0,0 +1,147 @@
+import { useState, useEffect, useCallback } from 'react'
+import type { AbiturDokument } from '@/lib/education/abitur-docs-types'
+import type { ViewMode, ThemaSuggestion } from '@/lib/education/abitur-archiv-types'
+
+export function useAbiturArchiv() {
+  // Documents state
+  const [documents, setDocuments] = useState<AbiturDokument[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  // Pagination
+  const [page, setPage] = useState(1)
+  const [totalPages, setTotalPages] = useState(1)
+  const [total, setTotal] = useState(0)
+  const limit = 20
+
+  // View mode
+  const [viewMode, setViewMode] = useState<ViewMode>('grid')
+
+  // Filters
+  const [filterOpen, setFilterOpen] = useState(false)
+  const [filterFach, setFilterFach] = useState<string>('')
+  const [filterJahr, setFilterJahr] = useState<string>('')
+  const [filterBundesland, setFilterBundesland] = useState<string>('')
+  const [filterNiveau, setFilterNiveau] = useState<string>('')
+  const [filterTyp, setFilterTyp] = useState<string>('')
+
+  // Theme search
+  const [searchQuery, setSearchQuery] = useState<string>('')
+  const [themes, setThemes] = useState<ThemaSuggestion[]>([])
+
+  // Modal
+  const [selectedDocument, setSelectedDocument] = useState<AbiturDokument | null>(null)
+
+  // Stats
+  const [stats, setStats] = useState({ total: 0, indexed: 0, faecher: 0 })
+
+  const fetchDocuments = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+
+    const params = new URLSearchParams()
+    params.set('page', page.toString())
+    params.set('limit', limit.toString())
+    if (filterFach) params.set('fach', filterFach)
+    if (filterJahr) params.set('jahr', filterJahr)
+    if (filterBundesland) params.set('bundesland', filterBundesland)
+    if (filterNiveau) params.set('niveau', filterNiveau)
+    if (filterTyp) params.set('typ', filterTyp)
+    if (searchQuery) params.set('thema', searchQuery)
+
+    try {
+      const response = await fetch(`/api/education/abitur-archiv?${params.toString()}`)
+      if (!response.ok) throw new Error('Fehler beim Laden der Dokumente')
+
+      const data = await response.json()
+      setDocuments(data.documents || [])
+      setTotalPages(data.total_pages || 1)
+      setTotal(data.total || 0)
+      setThemes(data.themes || [])
+
+      const indexed = (data.documents || []).filter((d: AbiturDokument) => d.status === 'indexed').length
+      const uniqueFaecher = new Set((data.documents || []).map((d: AbiturDokument) => d.fach)).size
+      setStats({ total: data.total || 0, indexed, faecher: uniqueFaecher })
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
+    } finally {
+      setLoading(false)
+    }
+  }, [page, filterFach, filterJahr, filterBundesland, filterNiveau, filterTyp, searchQuery])
+
+  useEffect(() => {
+    fetchDocuments()
+  }, [fetchDocuments])
+
+  const clearFilters = () => {
+    setFilterFach('')
+    setFilterJahr('')
+    setFilterBundesland('')
+    setFilterNiveau('')
+    setFilterTyp('')
+    setSearchQuery('')
+    setPage(1)
+  }
+
+  const handleSearch = (query: string) => {
+    setSearchQuery(query)
+    setPage(1)
+  }
+
+  const handleClearSearch = () => {
+    setSearchQuery('')
+    setPage(1)
+  }
+
+  const handleDownload = (doc: AbiturDokument) => {
+    const link = window.document.createElement('a')
+    link.href = doc.file_path
+    link.download = doc.dateiname
+    link.click()
+  }
+
+  const handleAddToKlausur = (doc: AbiturDokument) => {
+    const params = new URLSearchParams()
+    params.set('archiv_doc_id', doc.id)
+    params.set('aufgabentyp', doc.typ === 'erwartungshorizont' ? 'vorlage' : 'aufgabe')
+    window.location.href = `/education/klausur-korrektur?${params.toString()}`
+  }
+
+  const hasActiveFilters = !!(filterFach || filterJahr || filterBundesland || filterNiveau || filterTyp || searchQuery)
+
+  return {
+    documents,
+    loading,
+    error,
+    page,
+    setPage,
+    totalPages,
+    total,
+    limit,
+    viewMode,
+    setViewMode,
+    filterOpen,
+    setFilterOpen,
+    filterFach,
+    setFilterFach,
+    filterJahr,
+    setFilterJahr,
+    filterBundesland,
+    setFilterBundesland,
+    filterNiveau,
+    setFilterNiveau,
+    filterTyp,
+    setFilterTyp,
+    searchQuery,
+    selectedDocument,
+    setSelectedDocument,
+    stats,
+    clearFilters,
+    handleSearch,
+    handleClearSearch,
+    handleDownload,
+    handleAddToKlausur,
+    hasActiveFilters,
+    fetchDocuments,
+  }
+}
diff --git a/admin-lehrer/app/(admin)/education/abitur-archiv/page.tsx b/admin-lehrer/app/(admin)/education/abitur-archiv/page.tsx
index 13423ee..c98bd8c 100644
--- a/admin-lehrer/app/(admin)/education/abitur-archiv/page.tsx
+++ b/admin-lehrer/app/(admin)/education/abitur-archiv/page.tsx
@@ -5,134 +5,49 @@
  * Zentralabitur-Materialien 2021-2025 mit erweiterter Themensuche
  */
 
-import { useState, useEffect, useCallback } from 'react'
-import {
-  FileText, Filter, ChevronLeft, ChevronRight, Eye, Download, Search,
-  X, Loader2, Grid, List, LayoutGrid, BarChart3, Archive
-} from 'lucide-react'
-import type { AbiturDokument, AbiturDocsResponse } from '@/lib/education/abitur-docs-types'
-import {
-  formatFileSize,
-  FAECHER,
-  JAHRE,
-  BUNDESLAENDER,
-  NIVEAUS,
-  TYPEN,
-} from '@/lib/education/abitur-docs-types'
-import type { ViewMode, ThemaSuggestion } from '@/lib/education/abitur-archiv-types'
+import { Search, X, Archive } from 'lucide-react'
 import { ThemenSuche } from './components/ThemenSuche'
-import { DokumentCard } from './components/DokumentCard'
 import { FullscreenViewer } from './components/FullscreenViewer'
+import { useAbiturArchiv } from './_components/useAbiturArchiv'
+import { FilterBar } from './_components/FilterBar'
+import { DocumentDisplay } from './_components/DocumentDisplay'
 
 export default function AbiturArchivPage() {
-  // Documents state
-  const [documents, setDocuments] = useState<AbiturDokument[]>([])
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-
-  // Pagination
-  const [page, setPage] = useState(1)
-  const [totalPages, setTotalPages] = useState(1)
-  const [total, setTotal] = useState(0)
-  const limit = 20
-
-  // View mode
-  const [viewMode, setViewMode] = useState<ViewMode>('grid')
-
-  // Filters
-  const [filterOpen, setFilterOpen] = useState(false)
-  const [filterFach, setFilterFach] = useState<string>('')
-  const [filterJahr, setFilterJahr] = useState<string>('')
-  const [filterBundesland, setFilterBundesland] = useState<string>('')
-  const [filterNiveau, setFilterNiveau] = useState<string>('')
-  const [filterTyp, setFilterTyp] = useState<string>('')
-
-  // Theme search
-  const [searchQuery, setSearchQuery] = useState<string>('')
-  const [themes, setThemes] = useState<ThemaSuggestion[]>([])
-
-  // Modal
-  const [selectedDocument, setSelectedDocument] = useState<AbiturDokument | null>(null)
-
-  // Stats
-  const [stats, setStats] = useState({ total: 0, indexed: 0, faecher: 0 })
-
-  // Fetch documents
-  const fetchDocuments = useCallback(async () => {
-    setLoading(true)
-    setError(null)
-
-    const params = new URLSearchParams()
-    params.set('page', page.toString())
-    params.set('limit', limit.toString())
-    if (filterFach) params.set('fach', filterFach)
-    if (filterJahr) params.set('jahr', filterJahr)
-    if (filterBundesland) params.set('bundesland', filterBundesland)
-    if (filterNiveau) params.set('niveau', filterNiveau)
-    if (filterTyp) params.set('typ', filterTyp)
-    if (searchQuery) params.set('thema', searchQuery)
-
-    try {
-      const response = await fetch(`/api/education/abitur-archiv?${params.toString()}`)
-      if (!response.ok) throw new Error('Fehler beim Laden der Dokumente')
-
-      const data = await response.json()
-      setDocuments(data.documents || [])
-      setTotalPages(data.total_pages || 1)
-      setTotal(data.total || 0)
-      setThemes(data.themes || [])
-
-      // Update stats
-      const indexed = (data.documents || []).filter((d: AbiturDokument) => d.status === 'indexed').length
-      const uniqueFaecher = new Set((data.documents || []).map((d: AbiturDokument) => d.fach)).size
-      setStats({ total: data.total || 0, indexed, faecher: uniqueFaecher })
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
-    } finally {
-      setLoading(false)
-    }
-  }, [page, filterFach, filterJahr, filterBundesland, filterNiveau, filterTyp, searchQuery])
-
-  useEffect(() => {
-    fetchDocuments()
-  }, [fetchDocuments])
-
-  const clearFilters = () => {
-    setFilterFach('')
-    setFilterJahr('')
-    setFilterBundesland('')
-    setFilterNiveau('')
-    setFilterTyp('')
-    setSearchQuery('')
-    setPage(1)
-  }
-
-  const handleSearch = (query: string) => {
-    setSearchQuery(query)
-    setPage(1)
-  }
-
-  const handleClearSearch = () => {
-    setSearchQuery('')
-    setPage(1)
-  }
-
-  const handleDownload = (doc: AbiturDokument) => {
-    const link = window.document.createElement('a')
-    link.href = doc.file_path
-    link.download = doc.dateiname
-    link.click()
-  }
-
-  const handleAddToKlausur = (doc: AbiturDokument) => {
-    // Navigate to klausur-korrektur with document reference
-    const params = new URLSearchParams()
-    params.set('archiv_doc_id', doc.id)
-    params.set('aufgabentyp', doc.typ === 'erwartungshorizont' ? 'vorlage' : 'aufgabe')
-    window.location.href = `/education/klausur-korrektur?${params.toString()}`
-  }
-
-  const hasActiveFilters = filterFach || filterJahr || filterBundesland || filterNiveau || filterTyp || searchQuery
+  const {
+    documents,
+    loading,
+    error,
+    page,
+    setPage,
+    totalPages,
+    total,
+    limit,
+    viewMode,
+    setViewMode,
+    filterOpen,
+    setFilterOpen,
+    filterFach,
+    setFilterFach,
+    filterJahr,
+    setFilterJahr,
+    filterBundesland,
+    setFilterBundesland,
+    filterNiveau,
+    setFilterNiveau,
+    filterTyp,
+    setFilterTyp,
+    searchQuery,
+    selectedDocument,
+    setSelectedDocument,
+    stats,
+    clearFilters,
+    handleSearch,
+    handleClearSearch,
+    handleDownload,
+    handleAddToKlausur,
+    hasActiveFilters,
+    fetchDocuments,
+  } = useAbiturArchiv()
 
   return (
     <div className="min-h-screen bg-slate-50">
@@ -173,154 +88,30 @@ export default function AbiturArchivPage() {
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-6">
         {/* Theme Search */}
         <div className="bg-white rounded-xl border border-slate-200 p-6">
-          <ThemenSuche
-            onSearch={handleSearch}
-            onClear={handleClearSearch}
-          />
+          <ThemenSuche onSearch={handleSearch} onClear={handleClearSearch} />
         </div>
 
-        {/* Filter Bar */}
-        <div className="bg-white rounded-xl border border-slate-200 p-4">
-          <div className="flex items-center justify-between mb-4">
-            <div className="flex items-center gap-3">
-              <button
-                onClick={() => setFilterOpen(!filterOpen)}
-                className={`px-4 py-2 rounded-lg font-medium flex items-center gap-2 transition-colors ${
-                  filterOpen || hasActiveFilters
-                    ? 'bg-purple-100 text-purple-700'
-                    : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
-                }`}
-              >
-                <Filter className="w-4 h-4" />
-                Filter
-                {hasActiveFilters && (
-                  <span className="bg-purple-600 text-white text-xs px-1.5 py-0.5 rounded-full">
-                    {[filterFach, filterJahr, filterBundesland, filterNiveau, filterTyp, searchQuery].filter(Boolean).length}
-                  </span>
-                )}
-              </button>
-
-              {hasActiveFilters && (
-                <button
-                  onClick={clearFilters}
-                  className="text-sm text-slate-500 hover:text-slate-700 flex items-center gap-1"
-                >
-                  <X className="w-4 h-4" />
-                  Filter zuruecksetzen
-                </button>
-              )}
-            </div>
-
-            <div className="flex items-center gap-3">
-              {/* Results count */}
-              <span className="text-sm text-slate-500">
-                {total} Treffer
-              </span>
-
-              {/* View Mode Toggle */}
-              <div className="flex bg-slate-100 rounded-lg p-1">
-                <button
-                  onClick={() => setViewMode('grid')}
-                  className={`p-2 rounded-md transition-colors ${
-                    viewMode === 'grid' ? 'bg-white shadow-sm text-blue-600' : 'text-slate-500 hover:text-slate-700'
-                  }`}
-                  title="Raster-Ansicht"
-                >
-                  <LayoutGrid className="w-4 h-4" />
-                </button>
-                <button
-                  onClick={() => setViewMode('list')}
-                  className={`p-2 rounded-md transition-colors ${
-                    viewMode === 'list' ? 'bg-white shadow-sm text-blue-600' : 'text-slate-500 hover:text-slate-700'
-                  }`}
-                  title="Listen-Ansicht"
-                >
-                  <List className="w-4 h-4" />
-                </button>
-              </div>
-            </div>
-          </div>
-
-          {/* Filter Dropdowns */}
-          {filterOpen && (
-            <div className="grid grid-cols-2 md:grid-cols-5 gap-3 pt-4 border-t border-slate-200">
-              {/* Fach */}
-              <div>
-                <label className="block text-xs text-slate-500 mb-1">Fach</label>
-                <select
-                  value={filterFach}
-                  onChange={(e) => { setFilterFach(e.target.value); setPage(1) }}
-                  className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
-                >
-                  <option value="">Alle Faecher</option>
-                  {FAECHER.map(f => (
-                    <option key={f.id} value={f.id}>{f.label}</option>
-                  ))}
-                </select>
-              </div>
-
-              {/* Jahr */}
-              <div>
-                <label className="block text-xs text-slate-500 mb-1">Jahr</label>
-                <select
-                  value={filterJahr}
-                  onChange={(e) => { setFilterJahr(e.target.value); setPage(1) }}
-                  className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
-                >
-                  <option value="">Alle Jahre</option>
-                  {JAHRE.map(j => (
-                    <option key={j} value={j}>{j}</option>
-                  ))}
-                </select>
-              </div>
-
-              {/* Bundesland */}
-              <div>
-                <label className="block text-xs text-slate-500 mb-1">Bundesland</label>
-                <select
-                  value={filterBundesland}
-                  onChange={(e) => { setFilterBundesland(e.target.value); setPage(1) }}
-                  className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
-                >
-                  <option value="">Alle Bundeslaender</option>
-                  {BUNDESLAENDER.map(b => (
-                    <option key={b.id} value={b.id}>{b.label}</option>
-                  ))}
-                </select>
-              </div>
-
-              {/* Niveau */}
-              <div>
-                <label className="block text-xs text-slate-500 mb-1">Niveau</label>
-                <select
-                  value={filterNiveau}
-                  onChange={(e) => { setFilterNiveau(e.target.value); setPage(1) }}
-                  className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
-                >
-                  <option value="">Alle Niveaus</option>
-                  {NIVEAUS.map(n => (
-                    <option key={n.id} value={n.id}>{n.label}</option>
-                  ))}
-                </select>
-              </div>
-
-              {/* Typ */}
-              <div>
-                <label className="block text-xs text-slate-500 mb-1">Typ</label>
-                <select
-                  value={filterTyp}
-                  onChange={(e) => { setFilterTyp(e.target.value); setPage(1) }}
-                  className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
-                >
-                  <option value="">Alle Typen</option>
-                  {TYPEN.map(t => (
-                    <option key={t.id} value={t.id}>{t.label}</option>
-                  ))}
-                </select>
-              </div>
-            </div>
-          )}
-        </div>
+        <FilterBar
+          filterOpen={filterOpen}
+          onToggleFilter={() => setFilterOpen(!filterOpen)}
+          hasActiveFilters={hasActiveFilters}
+          onClearFilters={clearFilters}
+          total={total}
+          viewMode={viewMode}
+          onViewModeChange={setViewMode}
+          filterFach={filterFach}
+          filterJahr={filterJahr}
+          filterBundesland={filterBundesland}
+          filterNiveau={filterNiveau}
+          filterTyp={filterTyp}
+          onFachChange={setFilterFach}
+          onJahrChange={setFilterJahr}
+          onBundeslandChange={setFilterBundesland}
+          onNiveauChange={setFilterNiveau}
+          onTypChange={setFilterTyp}
+          onResetPage={() => setPage(1)}
+          searchQuery={searchQuery}
+        />
 
         {/* Active Search Query Display */}
         {searchQuery && (
@@ -338,171 +129,23 @@ export default function AbiturArchivPage() {
           </div>
         )}
 
-        {/* Document Display */}
-        <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
-          {loading ? (
-            <div className="flex items-center justify-center py-16">
-              <Loader2 className="w-8 h-8 text-blue-600 animate-spin" />
-            </div>
-          ) : error ? (
-            <div className="text-center py-16 text-red-600">
-              <p>{error}</p>
-              <button
-                onClick={() => fetchDocuments()}
-                className="mt-2 text-sm text-blue-600 hover:underline"
-              >
-                Erneut versuchen
-              </button>
-            </div>
-          ) : documents.length === 0 ? (
-            <div className="text-center py-16 text-slate-500">
-              <FileText className="w-12 h-12 mx-auto mb-3 opacity-50" />
-              <p>Keine Dokumente gefunden</p>
-              {hasActiveFilters && (
-                <button
-                  onClick={clearFilters}
-                  className="mt-2 text-sm text-blue-600 hover:underline"
-                >
-                  Filter zuruecksetzen
-                </button>
-              )}
-            </div>
-          ) : viewMode === 'grid' ? (
-            /* Grid View */
-            <div className="p-4">
-              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-                {documents.map((doc) => (
-                  <DokumentCard
-                    key={doc.id}
-                    document={doc}
-                    onPreview={setSelectedDocument}
-                    onDownload={handleDownload}
-                    onAddToKlausur={handleAddToKlausur}
-                  />
-                ))}
-              </div>
-            </div>
-          ) : (
-            /* List View */
-            <table className="w-full text-sm">
-              <thead className="bg-slate-50 border-b border-slate-200">
-                <tr>
-                  <th className="text-left px-4 py-3 font-medium text-slate-600">Dokument</th>
-                  <th className="text-left px-4 py-3 font-medium text-slate-600">Fach</th>
-                  <th className="text-center px-4 py-3 font-medium text-slate-600">Jahr</th>
-                  <th className="text-center px-4 py-3 font-medium text-slate-600">Niveau</th>
-                  <th className="text-center px-4 py-3 font-medium text-slate-600">Typ</th>
-                  <th className="text-right px-4 py-3 font-medium text-slate-600">Groesse</th>
-                  <th className="text-center px-4 py-3 font-medium text-slate-600">Status</th>
-                  <th className="text-center px-4 py-3 font-medium text-slate-600">Aktion</th>
-                </tr>
-              </thead>
-              <tbody>
-                {documents.map((doc) => {
-                  const fachLabel = FAECHER.find(f => f.id === doc.fach)?.label || doc.fach
-                  return (
-                    <tr
-                      key={doc.id}
-                      className="border-b border-slate-100 hover:bg-slate-50 cursor-pointer"
-                      onClick={() => setSelectedDocument(doc)}
-                    >
-                      <td className="px-4 py-3">
-                        <div className="flex items-center gap-2">
-                          <FileText className="w-4 h-4 text-red-500" />
-                          <span className="font-medium text-slate-900 truncate max-w-[200px]" title={doc.dateiname}>
-                            {doc.dateiname}
-                          </span>
-                        </div>
-                      </td>
-                      <td className="px-4 py-3">
-                        <span className="capitalize">{fachLabel}</span>
-                      </td>
-                      <td className="px-4 py-3 text-center">{doc.jahr}</td>
-                      <td className="px-4 py-3 text-center">
-                        <span className={`px-2 py-0.5 rounded-full text-xs ${
-                          doc.niveau === 'eA'
-                            ? 'bg-blue-100 text-blue-700'
-                            : 'bg-slate-100 text-slate-700'
-                        }`}>
-                          {doc.niveau}
-                        </span>
-                      </td>
-                      <td className="px-4 py-3 text-center">
-                        <span className={`px-2 py-0.5 rounded-full text-xs ${
-                          doc.typ === 'erwartungshorizont'
-                            ? 'bg-orange-100 text-orange-700'
-                            : 'bg-purple-100 text-purple-700'
-                        }`}>
-                          {doc.typ === 'erwartungshorizont' ? 'EWH' : 'Aufgabe'}
-                        </span>
-                      </td>
-                      <td className="px-4 py-3 text-right text-slate-500">
-                        {formatFileSize(doc.file_size)}
-                      </td>
-                      <td className="px-4 py-3 text-center">
-                        <span className={`px-2 py-0.5 rounded-full text-xs ${
-                          doc.status === 'indexed'
-                            ? 'bg-green-100 text-green-700'
-                            : doc.status === 'error'
-                            ? 'bg-red-100 text-red-700'
-                            : 'bg-yellow-100 text-yellow-700'
-                        }`}>
-                          {doc.status === 'indexed' ? 'Indexiert' : doc.status === 'error' ? 'Fehler' : 'Ausstehend'}
-                        </span>
-                      </td>
-                      <td className="px-4 py-3 text-center">
-                        <div className="flex items-center justify-center gap-1" onClick={(e) => e.stopPropagation()}>
-                          <button
-                            onClick={() => setSelectedDocument(doc)}
-                            className="p-1.5 text-blue-600 hover:bg-blue-50 rounded"
-                            title="Vorschau"
-                          >
-                            <Eye className="w-4 h-4" />
-                          </button>
-                          <button
-                            onClick={() => handleDownload(doc)}
-                            className="p-1.5 text-slate-600 hover:bg-slate-100 rounded"
-                            title="Download"
-                          >
-                            <Download className="w-4 h-4" />
-                          </button>
-                        </div>
-                      </td>
-                    </tr>
-                  )
-                })}
-              </tbody>
-            </table>
-          )}
-
-          {/* Pagination */}
-          {documents.length > 0 && (
-            <div className="flex items-center justify-between px-4 py-3 border-t border-slate-200 bg-slate-50">
-              <div className="text-sm text-slate-500">
-                Zeige {(page - 1) * limit + 1}-{Math.min(page * limit, total)} von {total} Dokumenten
-              </div>
-              <div className="flex items-center gap-2">
-                <button
-                  onClick={() => setPage(p => Math.max(1, p - 1))}
-                  disabled={page === 1}
-                  className="p-2 rounded-lg hover:bg-slate-200 disabled:opacity-50 disabled:cursor-not-allowed"
-                >
-                  <ChevronLeft className="w-4 h-4" />
-                </button>
-                <span className="text-sm text-slate-600">
-                  Seite {page} von {totalPages}
-                </span>
-                <button
-                  onClick={() => setPage(p => Math.min(totalPages, p + 1))}
-                  disabled={page === totalPages}
-                  className="p-2 rounded-lg hover:bg-slate-200 disabled:opacity-50 disabled:cursor-not-allowed"
-                >
-                  <ChevronRight className="w-4 h-4" />
-                </button>
-              </div>
-            </div>
-          )}
-        </div>
+        <DocumentDisplay
+          documents={documents}
+          loading={loading}
+          error={error}
+          viewMode={viewMode}
+          hasActiveFilters={hasActiveFilters}
+          onClearFilters={clearFilters}
+          onSelectDocument={setSelectedDocument}
+          onDownload={handleDownload}
+          onAddToKlausur={handleAddToKlausur}
+          onRetry={fetchDocuments}
+          page={page}
+          totalPages={totalPages}
+          total={total}
+          limit={limit}
+          onPageChange={setPage}
+        />
       </div>
 
       {/* Fullscreen Viewer Modal */}
diff --git a/admin-lehrer/app/(admin)/education/klausur-korrektur/[klausurId]/[studentId]/_components/CorrectionPanel.tsx b/admin-lehrer/app/(admin)/education/klausur-korrektur/[klausurId]/[studentId]/_components/CorrectionPanel.tsx
new file mode 100644
index 0000000..1997bcd
--- /dev/null
+++ b/admin-lehrer/app/(admin)/education/klausur-korrektur/[klausurId]/[studentId]/_components/CorrectionPanel.tsx
@@ -0,0 +1,252 @@
+'use client'
+
+/**
+ * Right panel (1/3 width): Tabs for Kriterien, Annotationen, Gutachten, EH-Vorschlaege.
+ */
+
+import { AnnotationPanel, EHSuggestionPanel } from '../../../components'
+import type {
+  Klausur,
+  Annotation,
+  AnnotationType,
+  GradeInfo,
+  CriteriaScores,
+} from '../../../types'
+import type { ExaminerWorkflow, ActiveTab, GradeTotals } from './workspace-types'
+import { API_BASE } from './workspace-types'
+import { CriteriaTab } from './CriteriaTab'
+
+interface CorrectionPanelProps {
+  // Data
+  klausur: Klausur | null
+  klausurId: string
+  studentId: string
+  annotations: Annotation[]
+  gradeInfo: GradeInfo | null
+  criteriaScores: CriteriaScores
+  gutachten: string
+  workflow: ExaminerWorkflow | null
+  totals: GradeTotals
+  selectedAnnotation: Annotation | null
+
+  // UI flags
+  activeTab: ActiveTab
+  generatingGutachten: boolean
+  saving: boolean
+  exporting: boolean
+  submittingWorkflow: boolean
+
+  // Actions
+  onSetActiveTab: (tab: ActiveTab) => void
+  onCriteriaChange: (criterion: string, value: number) => void
+  onSelectTool: (tool: AnnotationType) => void
+  onSelectAnnotation: (ann: Annotation | null) => void
+  onUpdateAnnotation: (id: string, updates: Partial<Annotation>) => Promise<void>
+  onDeleteAnnotation: (id: string) => Promise<void>
+  onSetGutachten: (text: string | ((prev: string) => string)) => void
+  onGenerateGutachten: () => Promise<void>
+  onSaveGutachten: () => Promise<void>
+  onExportGutachtenPDF: () => Promise<void>
+  onSubmitErstkorrektur: () => Promise<void>
+  onStartZweitkorrektur: (zkId: string) => Promise<void>
+  onSubmitZweitkorrektur: () => Promise<void>
+  onOpenEinigung: () => void
+}
+
+export function CorrectionPanel({
+  klausur,
+  klausurId,
+  studentId,
+  annotations,
+  gradeInfo,
+  criteriaScores,
+  gutachten,
+  workflow,
+  totals,
+  selectedAnnotation,
+  activeTab,
+  generatingGutachten,
+  saving,
+  exporting,
+  submittingWorkflow,
+  onSetActiveTab,
+  onCriteriaChange,
+  onSelectTool,
+  onSelectAnnotation,
+  onUpdateAnnotation,
+  onDeleteAnnotation,
+  onSetGutachten,
+  onGenerateGutachten,
+  onSaveGutachten,
+  onExportGutachtenPDF,
+  onSubmitErstkorrektur,
+  onStartZweitkorrektur,
+  onSubmitZweitkorrektur,
+  onOpenEinigung,
+}: CorrectionPanelProps) {
+  return (
+    <div className="w-1/3 bg-white rounded-lg border border-slate-200 overflow-hidden flex flex-col">
+      {/* Tabs */}
+      <div className="border-b border-slate-200">
+        <nav className="flex">
+          {[
+            { id: 'kriterien' as const, label: 'Kriterien' },
+            { id: 'annotationen' as const, label: `Notizen (${annotations.length})` },
+            { id: 'gutachten' as const, label: 'Gutachten' },
+            { id: 'eh-vorschlaege' as const, label: 'EH' },
+          ].map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => onSetActiveTab(tab.id)}
+              className={`flex-1 px-2 py-3 text-xs font-medium border-b-2 transition-colors ${
+                activeTab === tab.id
+                  ? 'border-primary-500 text-primary-600'
+                  : 'border-transparent text-slate-500 hover:text-slate-700'
+              }`}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </nav>
+      </div>
+
+      {/* Tab content */}
+      <div className="flex-1 overflow-auto p-4">
+        {/* Kriterien Tab */}
+        {activeTab === 'kriterien' && gradeInfo && (
+          <CriteriaTab
+            gradeInfo={gradeInfo}
+            criteriaScores={criteriaScores}
+            annotations={annotations}
+            totals={totals}
+            workflow={workflow}
+            generatingGutachten={generatingGutachten}
+            submittingWorkflow={submittingWorkflow}
+            gutachten={gutachten}
+            onCriteriaChange={onCriteriaChange}
+            onSelectTool={onSelectTool}
+            onGenerateGutachten={onGenerateGutachten}
+            onSubmitErstkorrektur={onSubmitErstkorrektur}
+            onStartZweitkorrektur={onStartZweitkorrektur}
+            onSubmitZweitkorrektur={onSubmitZweitkorrektur}
+            onOpenEinigung={onOpenEinigung}
+          />
+        )}
+
+        {/* Annotationen Tab */}
+        {activeTab === 'annotationen' && (
+          <div className="h-full -m-4">
+            <AnnotationPanel
+              annotations={annotations}
+              selectedAnnotation={selectedAnnotation}
+              onSelectAnnotation={onSelectAnnotation}
+              onUpdateAnnotation={onUpdateAnnotation}
+              onDeleteAnnotation={onDeleteAnnotation}
+            />
+          </div>
+        )}
+
+        {/* Gutachten Tab */}
+        {activeTab === 'gutachten' && (
+          <GutachtenTab
+            gutachten={gutachten}
+            generatingGutachten={generatingGutachten}
+            saving={saving}
+            exporting={exporting}
+            onSetGutachten={onSetGutachten}
+            onGenerateGutachten={onGenerateGutachten}
+            onSaveGutachten={onSaveGutachten}
+            onExportGutachtenPDF={onExportGutachtenPDF}
+          />
+        )}
+
+        {/* EH-Vorschlaege Tab */}
+        {activeTab === 'eh-vorschlaege' && (
+          <div className="h-full -m-4">
+            <EHSuggestionPanel
+              studentId={studentId}
+              klausurId={klausurId}
+              hasEH={!!klausur?.eh_id || true}
+              apiBase={API_BASE}
+              onInsertSuggestion={(text, criterion) => {
+                onSetGutachten((prev: string) =>
+                  prev
+                    ? `${prev}\n\n[${criterion.toUpperCase()}]: ${text}`
+                    : `[${criterion.toUpperCase()}]: ${text}`,
+                )
+                onSetActiveTab('gutachten')
+              }}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// ---- Gutachten sub-component ----
+
+interface GutachtenTabProps {
+  gutachten: string
+  generatingGutachten: boolean
+  saving: boolean
+  exporting: boolean
+  onSetGutachten: (text: string | ((prev: string) => string)) => void
+  onGenerateGutachten: () => void
+  onSaveGutachten: () => void
+  onExportGutachtenPDF: () => void
+}
+
+function GutachtenTab({
+  gutachten,
+  generatingGutachten,
+  saving,
+  exporting,
+  onSetGutachten,
+  onGenerateGutachten,
+  onSaveGutachten,
+  onExportGutachtenPDF,
+}: GutachtenTabProps) {
+  return (
+    <div className="h-full flex flex-col">
+      <textarea
+        value={gutachten}
+        onChange={(e) => onSetGutachten(e.target.value)}
+        placeholder="Gutachten hier eingeben oder generieren lassen..."
+        className="flex-1 w-full p-3 border border-slate-300 rounded-lg resize-none focus:ring-2 focus:ring-primary-500 focus:border-transparent text-sm"
+      />
+      <div className="flex gap-2 mt-4">
+        <button
+          onClick={onGenerateGutachten}
+          disabled={generatingGutachten}
+          className="flex-1 py-2 border border-primary-600 text-primary-600 rounded-lg hover:bg-primary-50 disabled:opacity-50"
+        >
+          {generatingGutachten ? 'Generiere...' : 'Neu generieren'}
+        </button>
+        <button
+          onClick={onSaveGutachten}
+          disabled={saving}
+          className="flex-1 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50"
+        >
+          {saving ? 'Speichern...' : 'Speichern'}
+        </button>
+      </div>
+
+      {/* PDF Export */}
+      {gutachten && (
+        <div className="flex gap-2 mt-2 pt-2 border-t border-slate-200">
+          <button
+            onClick={onExportGutachtenPDF}
+            disabled={exporting}
+            className="flex-1 py-2 border border-slate-300 text-slate-600 rounded-lg hover:bg-slate-50 disabled:opacity-50 flex items-center justify-center gap-2 text-sm"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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>
+            {exporting ? 'Exportiere...' : 'Als PDF exportieren'}
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/education/klausur-korrektur/[klausurId]/[studentId]/_components/CriteriaTab.tsx b/admin-lehrer/app/(admin)/education/klausur-korrektur/[klausurId]/[studentId]/_components/CriteriaTab.tsx
new file mode 100644
index 0000000..89902a7
--- /dev/null
+++ b/admin-lehrer/app/(admin)/education/klausur-korrektur/[klausurId]/[studentId]/_components/CriteriaTab.tsx
@@ -0,0 +1,384 @@
+'use client'
+
+/**
+ * Kriterien tab content: scoring sliders, annotation counts per criterion,
+ * totals summary, and workflow action buttons.
+ */
+
+import type { Annotation, AnnotationType, GradeInfo, CriteriaScores } from '../../../types'
+import { ANNOTATION_COLORS } from '../../../types'
+import type { ExaminerWorkflow, GradeTotals } from './workspace-types'
+import { GRADE_LABELS } from './workspace-types'
+
+interface CriteriaTabProps {
+  gradeInfo: GradeInfo
+  criteriaScores: CriteriaScores
+  annotations: Annotation[]
+  totals: GradeTotals
+  workflow: ExaminerWorkflow | null
+  generatingGutachten: boolean
+  submittingWorkflow: boolean
+  gutachten: string
+  onCriteriaChange: (criterion: string, value: number) => void
+  onSelectTool: (tool: AnnotationType) => void
+  onGenerateGutachten: () => void
+  onSubmitErstkorrektur: () => void
+  onStartZweitkorrektur: (zkId: string) => void
+  onSubmitZweitkorrektur: () => void
+  onOpenEinigung: () => void
+}
+
+export function CriteriaTab({
+  gradeInfo,
+  criteriaScores,
+  annotations,
+  totals,
+  workflow,
+  generatingGutachten,
+  submittingWorkflow,
+  gutachten,
+  onCriteriaChange,
+  onSelectTool,
+  onGenerateGutachten,
+  onSubmitErstkorrektur,
+  onStartZweitkorrektur,
+  onSubmitZweitkorrektur,
+  onOpenEinigung,
+}: CriteriaTabProps) {
+  return (
+    <div className="space-y-4">
+      {Object.entries(gradeInfo.criteria || {}).map(([key, criterion]) => {
+        const score = criteriaScores[key] || 0
+        const linkedAnnotations = annotations.filter(
+          (a) => a.linked_criterion === key || a.type === key,
+        )
+        const errorCount = linkedAnnotations.length
+        const severityCounts = {
+          minor: linkedAnnotations.filter((a) => a.severity === 'minor').length,
+          major: linkedAnnotations.filter((a) => a.severity === 'major').length,
+          critical: linkedAnnotations.filter((a) => a.severity === 'critical').length,
+        }
+        const criterionColor = ANNOTATION_COLORS[key as AnnotationType] || '#6b7280'
+
+        return (
+          <div key={key} className="bg-slate-50 rounded-lg p-4">
+            <div className="flex justify-between items-center mb-2">
+              <div className="flex items-center gap-2">
+                <div
+                  className="w-3 h-3 rounded-full"
+                  style={{ backgroundColor: criterionColor }}
+                />
+                <span className="font-medium text-slate-800">{criterion.name}</span>
+                <span className="text-xs text-slate-500">({criterion.weight}%)</span>
+              </div>
+              <div className="text-lg font-bold text-slate-800">{score}%</div>
+            </div>
+
+            {/* Annotation count for this criterion */}
+            {errorCount > 0 && (
+              <div className="flex items-center gap-2 mb-2 text-xs">
+                <span className="text-slate-500">{errorCount} Markierungen:</span>
+                {severityCounts.minor > 0 && (
+                  <span className="px-1.5 py-0.5 bg-yellow-100 text-yellow-700 rounded">
+                    {severityCounts.minor} leicht
+                  </span>
+                )}
+                {severityCounts.major > 0 && (
+                  <span className="px-1.5 py-0.5 bg-orange-100 text-orange-700 rounded">
+                    {severityCounts.major} mittel
+                  </span>
+                )}
+                {severityCounts.critical > 0 && (
+                  <span className="px-1.5 py-0.5 bg-red-100 text-red-700 rounded">
+                    {severityCounts.critical} schwer
+                  </span>
+                )}
+              </div>
+            )}
+
+            {/* Slider */}
+            <input
+              type="range"
+              min="0"
+              max="100"
+              value={score}
+              onChange={(e) => onCriteriaChange(key, parseInt(e.target.value))}
+              className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer"
+              style={{ accentColor: criterionColor }}
+            />
+
+            {/* Quick buttons */}
+            <div className="flex gap-1 mt-2">
+              {[0, 25, 50, 75, 100].map((val) => (
+                <button
+                  key={val}
+                  onClick={() => onCriteriaChange(key, val)}
+                  className={`flex-1 py-1 text-xs rounded transition-colors ${
+                    score === val
+                      ? 'text-white'
+                      : 'bg-slate-200 text-slate-600 hover:bg-slate-300'
+                  }`}
+                  style={score === val ? { backgroundColor: criterionColor } : undefined}
+                >
+                  {val}%
+                </button>
+              ))}
+            </div>
+
+            {/* Quick add annotation button for RS/Grammatik */}
+            {(key === 'rechtschreibung' || key === 'grammatik') && (
+              <button
+                onClick={() => onSelectTool(key as AnnotationType)}
+                className="mt-2 w-full py-1 text-xs border rounded hover:bg-slate-100 flex items-center justify-center gap-1"
+                style={{ borderColor: criterionColor, color: criterionColor }}
+              >
+                <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+                </svg>
+                {key === 'rechtschreibung' ? 'RS-Fehler' : 'Grammatik-Fehler'} markieren
+              </button>
+            )}
+          </div>
+        )
+      })}
+
+      {/* Total and action buttons */}
+      <CriteriaTotals
+        totals={totals}
+        workflow={workflow}
+        generatingGutachten={generatingGutachten}
+        submittingWorkflow={submittingWorkflow}
+        gutachten={gutachten}
+        onGenerateGutachten={onGenerateGutachten}
+        onSubmitErstkorrektur={onSubmitErstkorrektur}
+        onStartZweitkorrektur={onStartZweitkorrektur}
+        onSubmitZweitkorrektur={onSubmitZweitkorrektur}
+        onOpenEinigung={onOpenEinigung}
+      />
+    </div>
+  )
+}
+
+// ---- Sub-component: totals + workflow buttons ----
+
+interface CriteriaTotalsProps {
+  totals: GradeTotals
+  workflow: ExaminerWorkflow | null
+  generatingGutachten: boolean
+  submittingWorkflow: boolean
+  gutachten: string
+  onGenerateGutachten: () => void
+  onSubmitErstkorrektur: () => void
+  onStartZweitkorrektur: (zkId: string) => void
+  onSubmitZweitkorrektur: () => void
+  onOpenEinigung: () => void
+}
+
+function CriteriaTotals({
+  totals,
+  workflow,
+  generatingGutachten,
+  submittingWorkflow,
+  gutachten,
+  onGenerateGutachten,
+  onSubmitErstkorrektur,
+  onStartZweitkorrektur,
+  onSubmitZweitkorrektur,
+  onOpenEinigung,
+}: CriteriaTotalsProps) {
+  return (
+    <div className="border-t border-slate-200 pt-4 mt-4">
+      <div className="flex justify-between items-center mb-4">
+        <span className="font-semibold text-slate-800">Gesamtergebnis</span>
+        <div className="text-right">
+          <div className="text-2xl font-bold text-primary-600">
+            {totals.gradePoints} Punkte
+          </div>
+          <div className="text-sm text-slate-500">
+            ({totals.weighted}%) - Note {GRADE_LABELS[totals.gradePoints]}
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        {/* Generate Gutachten */}
+        <button
+          onClick={onGenerateGutachten}
+          disabled={generatingGutachten}
+          className="w-full py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 disabled:opacity-50 flex items-center justify-center gap-2 text-sm"
+        >
+          {generatingGutachten ? (
+            <>
+              <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-slate-700"></div>
+              Generiere Gutachten...
+            </>
+          ) : (
+            <>
+              <svg className="w-4 h-4" 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>
+              Gutachten generieren
+            </>
+          )}
+        </button>
+
+        {/* Workflow buttons */}
+        <WorkflowButtons
+          workflow={workflow}
+          submittingWorkflow={submittingWorkflow}
+          gutachten={gutachten}
+          totals={totals}
+          onSubmitErstkorrektur={onSubmitErstkorrektur}
+          onStartZweitkorrektur={onStartZweitkorrektur}
+          onSubmitZweitkorrektur={onSubmitZweitkorrektur}
+          onOpenEinigung={onOpenEinigung}
+        />
+      </div>
+    </div>
+  )
+}
+
+// ---- Sub-component: workflow action buttons ----
+
+interface WorkflowButtonsProps {
+  workflow: ExaminerWorkflow | null
+  submittingWorkflow: boolean
+  gutachten: string
+  totals: GradeTotals
+  onSubmitErstkorrektur: () => void
+  onStartZweitkorrektur: (zkId: string) => void
+  onSubmitZweitkorrektur: () => void
+  onOpenEinigung: () => void
+}
+
+function WorkflowButtons({
+  workflow,
+  submittingWorkflow,
+  gutachten,
+  totals,
+  onSubmitErstkorrektur,
+  onStartZweitkorrektur,
+  onSubmitZweitkorrektur,
+  onOpenEinigung,
+}: WorkflowButtonsProps) {
+  return (
+    <>
+      {/* EK submit */}
+      {(!workflow || workflow.workflow_status === 'not_started' || workflow.workflow_status === 'ek_in_progress') && (
+        <button
+          onClick={onSubmitErstkorrektur}
+          disabled={submittingWorkflow || !gutachten}
+          className="w-full py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 flex items-center justify-center gap-2"
+        >
+          {submittingWorkflow ? (
+            <>
+              <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+              Wird abgeschlossen...
+            </>
+          ) : (
+            <>
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+              </svg>
+              Erstkorrektur abschliessen
+            </>
+          )}
+        </button>
+      )}
+
+      {/* Forward to ZK */}
+      {workflow?.workflow_status === 'ek_completed' && workflow.user_role === 'ek' && (
+        <button
+          onClick={() => {
+            const zkId = prompt('Zweitkorrektor-ID eingeben:')
+            if (zkId) onStartZweitkorrektur(zkId)
+          }}
+          disabled={submittingWorkflow}
+          className="w-full py-3 bg-amber-600 text-white rounded-lg hover:bg-amber-700 disabled:opacity-50 flex items-center justify-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="M17 8l4 4m0 0l-4 4m4-4H3" />
+          </svg>
+          Zur Zweitkorrektur weiterleiten
+        </button>
+      )}
+
+      {/* ZK submit */}
+      {(workflow?.workflow_status === 'zk_assigned' || workflow?.workflow_status === 'zk_in_progress') &&
+        workflow?.user_role === 'zk' && (
+          <button
+            onClick={onSubmitZweitkorrektur}
+            disabled={submittingWorkflow || !gutachten}
+            className="w-full py-3 bg-amber-600 text-white rounded-lg hover:bg-amber-700 disabled:opacity-50 flex items-center justify-center gap-2"
+          >
+            {submittingWorkflow ? (
+              <>
+                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+                Wird abgeschlossen...
+              </>
+            ) : (
+              <>
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                </svg>
+                Zweitkorrektur abschliessen
+              </>
+            )}
+          </button>
+        )}
+
+      {/* Einigung */}
+      {workflow?.workflow_status === 'einigung_required' && (
+        <button
+          onClick={onOpenEinigung}
+          className="w-full py-3 bg-orange-600 text-white rounded-lg hover:bg-orange-700 flex items-center justify-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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+          </svg>
+          Einigung starten
+        </button>
+      )}
+
+      {/* Completed */}
+      {workflow?.workflow_status === 'completed' && (
+        <div className="bg-green-100 text-green-800 p-4 rounded-lg text-center">
+          <div className="text-2xl font-bold">
+            Endnote: {workflow.final_grade} Punkte
+          </div>
+          <div className="text-sm mt-1">
+            ({GRADE_LABELS[workflow.final_grade || 0]}) -{' '}
+            {workflow.consensus_type === 'auto'
+              ? 'Auto-Konsens'
+              : workflow.consensus_type === 'drittkorrektur'
+                ? 'Drittkorrektur'
+                : 'Einigung'}
+          </div>
+        </div>
+      )}
+
+      {/* EK/ZK comparison */}
+      {workflow?.first_result && workflow?.second_result && workflow?.workflow_status !== 'completed' && (
+        <div className="bg-slate-50 rounded-lg p-3 mt-2">
+          <div className="text-xs text-slate-500 mb-2">Notenvergleich</div>
+          <div className="flex justify-between">
+            <div className="text-center">
+              <div className="text-sm text-slate-500">EK</div>
+              <div className="font-bold text-blue-600">{workflow.first_result.grade_points}P</div>
+            </div>
+            <div className="text-center">
+              <div className="text-sm text-slate-500">ZK</div>
+              <div className="font-bold text-amber-600">{workflow.second_result.grade_points}P</div>
+            </div>
+            <div className="text-center">
+              <div className="text-sm text-slate-500">Diff</div>
+              <div className={`font-bold ${(workflow.grade_difference || 0) >= 4 ? 'text-red-600' : 'text-slate-700'}`}>
+                {workflow.grade_difference}P
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/education/klausur-korrektur/[klausurId]/[studentId]/_components/DocumentViewer.tsx b/admin-lehrer/app/(admin)/education/klausur-korrektur/[klausurId]/[studentId]/_components/DocumentViewer.tsx
new file mode 100644
index 0000000..8e76c8c
--- /dev/null
+++ b/admin-lehrer/app/(admin)/education/klausur-korrektur/[klausurId]/[studentId]/_components/DocumentViewer.tsx
@@ -0,0 +1,138 @@
+'use client'
+
+/**
+ * Left panel (2/3 width): Document viewer with annotation overlay,
+ * toolbar, page navigation, and collapsible OCR text.
+ */
+
+import { AnnotationLayer, AnnotationToolbar } from '../../../components'
+import type { Annotation, AnnotationType, AnnotationPosition } from '../../../types'
+
+interface DocumentViewerProps {
+  documentUrl: string | null
+  filePath?: string
+  ocrText?: string
+  zoom: number
+  currentPage: number
+  totalPages: number
+  annotations: Annotation[]
+  selectedTool: AnnotationType | null
+  selectedAnnotation: Annotation | null
+  annotationCounts: Record<AnnotationType, number>
+  onZoomChange: (zoom: number) => void
+  onSelectTool: (tool: AnnotationType | null) => void
+  onCurrentPageChange: (page: number | ((p: number) => number)) => void
+  onCreateAnnotation: (position: AnnotationPosition, type: AnnotationType) => void
+  onSelectAnnotation: (ann: Annotation) => void
+}
+
+export function DocumentViewer({
+  documentUrl,
+  filePath,
+  ocrText,
+  zoom,
+  currentPage,
+  totalPages,
+  annotations,
+  selectedTool,
+  selectedAnnotation,
+  annotationCounts,
+  onZoomChange,
+  onSelectTool,
+  onCurrentPageChange,
+  onCreateAnnotation,
+  onSelectAnnotation,
+}: DocumentViewerProps) {
+  const pageAnnotations = annotations.filter((ann) => ann.page === currentPage)
+
+  return (
+    <div className="w-2/3 bg-white rounded-lg border border-slate-200 overflow-hidden flex flex-col">
+      {/* Toolbar */}
+      <AnnotationToolbar
+        selectedTool={selectedTool}
+        onSelectTool={onSelectTool}
+        zoom={zoom}
+        onZoomChange={onZoomChange}
+        annotationCounts={annotationCounts}
+      />
+
+      {/* Document display with annotation overlay */}
+      <div className="flex-1 overflow-auto p-4 bg-slate-100">
+        {documentUrl ? (
+          <div
+            className="mx-auto bg-white shadow-lg relative"
+            style={{ transform: `scale(${zoom / 100})`, transformOrigin: 'top center' }}
+          >
+            {filePath?.endsWith('.pdf') ? (
+              <iframe
+                src={documentUrl}
+                className="w-full h-[800px] border-0"
+                title="Studentenarbeit"
+              />
+            ) : (
+              <div className="relative">
+                <img
+                  src={documentUrl}
+                  alt="Studentenarbeit"
+                  className="max-w-full"
+                  onError={(e) => {
+                    (e.target as HTMLImageElement).src = '/placeholder-document.png'
+                  }}
+                />
+                {/* Annotation Layer Overlay */}
+                <AnnotationLayer
+                  annotations={pageAnnotations}
+                  selectedTool={selectedTool}
+                  onCreateAnnotation={onCreateAnnotation}
+                  onSelectAnnotation={onSelectAnnotation}
+                  selectedAnnotationId={selectedAnnotation?.id}
+                />
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="flex items-center justify-center h-full text-slate-400">
+            Kein Dokument verfuegbar
+          </div>
+        )}
+      </div>
+
+      {/* Page navigation */}
+      <div className="border-t border-slate-200 p-2 flex items-center justify-center gap-2 bg-slate-50">
+        <button
+          onClick={() => onCurrentPageChange((p: number) => Math.max(1, p - 1))}
+          disabled={currentPage <= 1}
+          className="p-1 rounded hover:bg-slate-200 disabled:opacity-50"
+        >
+          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+          </svg>
+        </button>
+        <span className="text-sm">
+          Seite {currentPage} / {totalPages}
+        </span>
+        <button
+          onClick={() => onCurrentPageChange((p: number) => Math.min(totalPages, p + 1))}
+          disabled={currentPage >= totalPages}
+          className="p-1 rounded hover:bg-slate-200 disabled:opacity-50"
+        >
+          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+          </svg>
+        </button>
+      </div>
+
+      {/* OCR Text (collapsible) */}
+      {ocrText && (
+        <details className="border-t border-slate-200">
+          <summary className="p-3 bg-slate-50 cursor-pointer text-sm font-medium text-slate-600 hover:bg-slate-100">
+            OCR-Text anzeigen
+          </summary>
+          <div className="p-4 max-h-48 overflow-auto text-sm text-slate-700 bg-slate-50">
+            <pre className="whitespace-pre-wrap font-sans">{ocrText}</pre>
+          </div>
+        </details>
+      )}
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/education/klausur-korrektur/[klausurId]/[studentId]/_components/EinigungModal.tsx b/admin-lehrer/app/(admin)/education/klausur-korrektur/[klausurId]/[studentId]/_components/EinigungModal.tsx
new file mode 100644
index 0000000..47f8f2c
--- /dev/null
+++ b/admin-lehrer/app/(admin)/education/klausur-korrektur/[klausurId]/[studentId]/_components/EinigungModal.tsx
@@ -0,0 +1,115 @@
+'use client'
+
+/**
+ * Modal for the Einigung (agreement) process between EK and ZK.
+ */
+
+import type { ExaminerWorkflow } from './workspace-types'
+import { GRADE_LABELS } from './workspace-types'
+
+interface EinigungModalProps {
+  workflow: ExaminerWorkflow
+  einigungGrade: number
+  einigungNotes: string
+  submittingWorkflow: boolean
+  onGradeChange: (grade: number) => void
+  onNotesChange: (notes: string) => void
+  onSubmit: (type: 'agreed' | 'split' | 'escalated') => void
+  onClose: () => void
+}
+
+export function EinigungModal({
+  workflow,
+  einigungGrade,
+  einigungNotes,
+  submittingWorkflow,
+  onGradeChange,
+  onNotesChange,
+  onSubmit,
+  onClose,
+}: EinigungModalProps) {
+  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 p-6 w-full max-w-lg mx-4">
+        <h3 className="text-lg font-semibold mb-4">Einigung erforderlich</h3>
+
+        {/* Grade comparison */}
+        <div className="bg-slate-50 rounded-lg p-4 mb-4">
+          <div className="grid grid-cols-2 gap-4 text-center">
+            <div>
+              <div className="text-sm text-slate-500">Erstkorrektor</div>
+              <div className="text-2xl font-bold text-blue-600">
+                {workflow.first_result?.grade_points || '-'} P
+              </div>
+            </div>
+            <div>
+              <div className="text-sm text-slate-500">Zweitkorrektor</div>
+              <div className="text-2xl font-bold text-amber-600">
+                {workflow.second_result?.grade_points || '-'} P
+              </div>
+            </div>
+          </div>
+          <div className="text-center mt-2 text-sm text-slate-500">
+            Differenz: {workflow.grade_difference} Punkte
+          </div>
+        </div>
+
+        {/* Final grade selection */}
+        <div className="mb-4">
+          <label className="block text-sm font-medium text-slate-700 mb-2">
+            Endnote festlegen
+          </label>
+          <input
+            type="range"
+            min={Math.min(workflow.first_result?.grade_points || 0, workflow.second_result?.grade_points || 0) - 1}
+            max={Math.max(workflow.first_result?.grade_points || 15, workflow.second_result?.grade_points || 15) + 1}
+            value={einigungGrade}
+            onChange={(e) => onGradeChange(parseInt(e.target.value))}
+            className="w-full"
+          />
+          <div className="text-center text-2xl font-bold mt-2">
+            {einigungGrade} Punkte ({GRADE_LABELS[einigungGrade] || '-'})
+          </div>
+        </div>
+
+        {/* Notes */}
+        <div className="mb-4">
+          <label className="block text-sm font-medium text-slate-700 mb-2">
+            Begruendung
+          </label>
+          <textarea
+            value={einigungNotes}
+            onChange={(e) => onNotesChange(e.target.value)}
+            placeholder="Begruendung fuer die Einigung..."
+            className="w-full p-2 border border-slate-300 rounded-lg text-sm"
+            rows={3}
+          />
+        </div>
+
+        {/* Actions */}
+        <div className="flex gap-2">
+          <button
+            onClick={() => onSubmit('agreed')}
+            disabled={submittingWorkflow || !einigungNotes}
+            className="flex-1 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50"
+          >
+            Einigung bestaetigen
+          </button>
+          <button
+            onClick={() => onSubmit('escalated')}
+            disabled={submittingWorkflow}
+            className="py-2 px-4 bg-red-100 text-red-700 rounded-lg hover:bg-red-200"
+          >
+            Eskalieren
+          </button>
+          <button
+            onClick={onClose}
+            className="py-2 px-4 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200"
+          >
+            Abbrechen
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/education/klausur-korrektur/[klausurId]/[studentId]/_components/TopNavigationBar.tsx b/admin-lehrer/app/(admin)/education/klausur-korrektur/[klausurId]/[studentId]/_components/TopNavigationBar.tsx
new file mode 100644
index 0000000..6aabf32
--- /dev/null
+++ b/admin-lehrer/app/(admin)/education/klausur-korrektur/[klausurId]/[studentId]/_components/TopNavigationBar.tsx
@@ -0,0 +1,114 @@
+'use client'
+
+/**
+ * Top navigation bar with back link, student navigation,
+ * workflow status badges, and grade display.
+ */
+
+import Link from 'next/link'
+import type { ExaminerWorkflow, GradeTotals } from './workspace-types'
+import { WORKFLOW_STATUS_LABELS, ROLE_LABELS, GRADE_LABELS } from './workspace-types'
+
+interface TopNavigationBarProps {
+  klausurId: string
+  currentIndex: number
+  studentsCount: number
+  workflow: ExaminerWorkflow | null
+  saving: boolean
+  totals: GradeTotals
+  onGoToStudent: (direction: 'prev' | 'next') => void
+}
+
+export function TopNavigationBar({
+  klausurId,
+  currentIndex,
+  studentsCount,
+  workflow,
+  saving,
+  totals,
+  onGoToStudent,
+}: TopNavigationBarProps) {
+  return (
+    <div className="bg-white border-b border-slate-200 px-6 py-3 flex items-center justify-between sticky top-0 z-10">
+      {/* Back link */}
+      <Link
+        href={`/education/klausur-korrektur/${klausurId}`}
+        className="text-primary-600 hover:text-primary-800 flex items-center gap-1 text-sm"
+      >
+        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+        </svg>
+        Zurueck
+      </Link>
+
+      {/* Student navigation */}
+      <div className="flex items-center gap-4">
+        <button
+          onClick={() => onGoToStudent('prev')}
+          disabled={currentIndex <= 0}
+          className="p-2 rounded-lg hover:bg-slate-100 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+          </svg>
+        </button>
+        <span className="text-sm font-medium">
+          {currentIndex + 1} / {studentsCount}
+        </span>
+        <button
+          onClick={() => onGoToStudent('next')}
+          disabled={currentIndex >= studentsCount - 1}
+          className="p-2 rounded-lg hover:bg-slate-100 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+          </svg>
+        </button>
+      </div>
+
+      {/* Workflow status and role */}
+      <div className="flex items-center gap-3">
+        {workflow && (
+          <div className="flex items-center gap-2">
+            <span
+              className={`px-2 py-1 text-xs font-medium rounded-full text-white ${
+                ROLE_LABELS[workflow.user_role]?.color || 'bg-slate-500'
+              }`}
+            >
+              {ROLE_LABELS[workflow.user_role]?.label || workflow.user_role}
+            </span>
+
+            <span
+              className={`px-2 py-1 text-xs font-medium rounded-full ${
+                WORKFLOW_STATUS_LABELS[workflow.workflow_status]?.color || 'bg-slate-100'
+              }`}
+            >
+              {WORKFLOW_STATUS_LABELS[workflow.workflow_status]?.label || workflow.workflow_status}
+            </span>
+
+            {workflow.user_role === 'zk' && workflow.visibility_mode !== 'full' && (
+              <span className="px-2 py-1 text-xs bg-purple-100 text-purple-700 rounded-full">
+                {workflow.visibility_mode === 'blind' ? 'Blind-Modus' : 'Semi-Blind'}
+              </span>
+            )}
+          </div>
+        )}
+
+        {saving && (
+          <span className="text-sm text-slate-500 flex items-center gap-1">
+            <div className="animate-spin rounded-full h-3 w-3 border-b-2 border-primary-600"></div>
+            Speichern...
+          </span>
+        )}
+        <div className="text-right">
+          <div className="text-lg font-bold text-slate-800">
+            {totals.gradePoints} Punkte
+          </div>
+          <div className="text-sm text-slate-500">
+            Note: {GRADE_LABELS[totals.gradePoints] || '-'}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/education/klausur-korrektur/[klausurId]/[studentId]/_components/index.ts b/admin-lehrer/app/(admin)/education/klausur-korrektur/[klausurId]/[studentId]/_components/index.ts
new file mode 100644
index 0000000..b7eae1c
--- /dev/null
+++ b/admin-lehrer/app/(admin)/education/klausur-korrektur/[klausurId]/[studentId]/_components/index.ts
@@ -0,0 +1,8 @@
+export { useKorrekturWorkspace } from './useKorrekturWorkspace'
+export { TopNavigationBar } from './TopNavigationBar'
+export { EinigungModal } from './EinigungModal'
+export { DocumentViewer } from './DocumentViewer'
+export { CorrectionPanel } from './CorrectionPanel'
+export { CriteriaTab } from './CriteriaTab'
+export type { ExaminerWorkflow, ActiveTab, GradeTotals } from './workspace-types'
+export { API_BASE, GRADE_LABELS, WORKFLOW_STATUS_LABELS, ROLE_LABELS } from './workspace-types'
diff --git a/admin-lehrer/app/(admin)/education/klausur-korrektur/[klausurId]/[studentId]/_components/useKorrekturWorkspace.ts b/admin-lehrer/app/(admin)/education/klausur-korrektur/[klausurId]/[studentId]/_components/useKorrekturWorkspace.ts
new file mode 100644
index 0000000..1894868
--- /dev/null
+++ b/admin-lehrer/app/(admin)/education/klausur-korrektur/[klausurId]/[studentId]/_components/useKorrekturWorkspace.ts
@@ -0,0 +1,454 @@
+'use client'
+
+/**
+ * Custom hook encapsulating all state, data-fetching, CRUD operations,
+ * and workflow actions for the Korrektur-Workspace page.
+ */
+
+import { useState, useEffect, useCallback, useMemo } from 'react'
+import type {
+  Klausur, StudentWork, Annotation, CriteriaScores,
+  GradeInfo, AnnotationType, AnnotationPosition,
+} from '../../../types'
+import type { ExaminerWorkflow, ActiveTab, GradeTotals } from './workspace-types'
+import { API_BASE } from './workspace-types'
+
+/** Download a blob from url and trigger browser download with given filename. */
+async function downloadBlob(url: string, filename: string) {
+  const res = await fetch(url)
+  if (!res.ok) throw new Error('Download failed')
+  const blob = await res.blob()
+  const blobUrl = window.URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = blobUrl; a.download = filename
+  document.body.appendChild(a); a.click()
+  document.body.removeChild(a); window.URL.revokeObjectURL(blobUrl)
+}
+
+export function useKorrekturWorkspace(
+  klausurId: string,
+  studentId: string,
+  routerPush: (url: string) => void,
+) {
+  // ---- Core data state ----
+  const [klausur, setKlausur] = useState<Klausur | null>(null)
+  const [student, setStudent] = useState<StudentWork | null>(null)
+  const [students, setStudents] = useState<StudentWork[]>([])
+  const [annotations, setAnnotations] = useState<Annotation[]>([])
+  const [gradeInfo, setGradeInfo] = useState<GradeInfo | null>(null)
+  const [workflow, setWorkflow] = useState<ExaminerWorkflow | null>(null)
+
+  // ---- UI flags ----
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [activeTab, setActiveTab] = useState<ActiveTab>('kriterien')
+  const [currentPage, setCurrentPage] = useState(1)
+  const [totalPages] = useState(1)
+  const [zoom, setZoom] = useState(100)
+  const [documentUrl, setDocumentUrl] = useState<string | null>(null)
+  const [generatingGutachten, setGeneratingGutachten] = useState(false)
+  const [exporting, setExporting] = useState(false)
+
+  // ---- Annotation state ----
+  const [selectedTool, setSelectedTool] = useState<AnnotationType | null>(null)
+  const [selectedAnnotation, setSelectedAnnotation] = useState<Annotation | null>(null)
+
+  // ---- Form state ----
+  const [criteriaScores, setCriteriaScores] = useState<CriteriaScores>({})
+  const [gutachten, setGutachten] = useState('')
+
+  // ---- Einigung state ----
+  const [showEinigungModal, setShowEinigungModal] = useState(false)
+  const [einigungGrade, setEinigungGrade] = useState<number>(0)
+  const [einigungNotes, setEinigungNotes] = useState('')
+  const [submittingWorkflow, setSubmittingWorkflow] = useState(false)
+
+  // ---- Derived ----
+  const currentIndex = students.findIndex(s => s.id === studentId)
+
+  const annotationCounts = useMemo(() => {
+    const counts: Record<AnnotationType, number> = {
+      rechtschreibung: 0, grammatik: 0, inhalt: 0,
+      struktur: 0, stil: 0, comment: 0, highlight: 0,
+    }
+    annotations.forEach((ann) => {
+      counts[ann.type] = (counts[ann.type] || 0) + 1
+    })
+    return counts
+  }, [annotations])
+
+  // ---- Grade calculation ----
+  const calculateTotalPoints = useCallback((): GradeTotals => {
+    if (!gradeInfo?.criteria) return { raw: 0, weighted: 0, gradePoints: 0 }
+
+    let totalWeighted = 0
+    let totalWeight = 0
+
+    Object.entries(gradeInfo.criteria).forEach(([key, criterion]) => {
+      const score = criteriaScores[key] || 0
+      totalWeighted += score * (criterion.weight / 100)
+      totalWeight += criterion.weight
+    })
+
+    const percentage = totalWeight > 0 ? (totalWeighted / totalWeight) * 100 : 0
+
+    let gradePoints = 0
+    const thresholds = [
+      { points: 15, min: 95 }, { points: 14, min: 90 }, { points: 13, min: 85 },
+      { points: 12, min: 80 }, { points: 11, min: 75 }, { points: 10, min: 70 },
+      { points: 9, min: 65 }, { points: 8, min: 60 }, { points: 7, min: 55 },
+      { points: 6, min: 50 }, { points: 5, min: 45 }, { points: 4, min: 40 },
+      { points: 3, min: 33 }, { points: 2, min: 27 }, { points: 1, min: 20 },
+    ]
+    for (const t of thresholds) {
+      if (percentage >= t.min) { gradePoints = t.points; break }
+    }
+
+    return { raw: Math.round(totalWeighted), weighted: Math.round(percentage), gradePoints }
+  }, [gradeInfo, criteriaScores])
+
+  const totals = calculateTotalPoints()
+
+  // ---- Data fetching ----
+  const fetchData = useCallback(async () => {
+    try {
+      setLoading(true)
+
+      const klausurRes = await fetch(`${API_BASE}/api/v1/klausuren/${klausurId}`)
+      if (klausurRes.ok) setKlausur(await klausurRes.json())
+
+      const studentsRes = await fetch(`${API_BASE}/api/v1/klausuren/${klausurId}/students`)
+      if (studentsRes.ok) {
+        const data = await studentsRes.json()
+        setStudents(Array.isArray(data) ? data : data.students || [])
+      }
+
+      const studentRes = await fetch(`${API_BASE}/api/v1/students/${studentId}`)
+      if (studentRes.ok) {
+        const studentData = await studentRes.json()
+        setStudent(studentData)
+        setCriteriaScores(studentData.criteria_scores || {})
+        setGutachten(studentData.gutachten || '')
+      }
+
+      const gradeInfoRes = await fetch(`${API_BASE}/api/v1/grade-info`)
+      if (gradeInfoRes.ok) setGradeInfo(await gradeInfoRes.json())
+
+      const workflowRes = await fetch(`${API_BASE}/api/v1/students/${studentId}/examiner-workflow`)
+      if (workflowRes.ok) {
+        const workflowData = await workflowRes.json()
+        setWorkflow(workflowData)
+        if (workflowData.workflow_status === 'einigung_required' && workflowData.first_result && workflowData.second_result) {
+          const avgGrade = Math.round((workflowData.first_result.grade_points + workflowData.second_result.grade_points) / 2)
+          setEinigungGrade(avgGrade)
+        }
+      }
+
+      const annotationsEndpoint = workflow?.user_role === 'zk'
+        ? `${API_BASE}/api/v1/students/${studentId}/annotations-filtered`
+        : `${API_BASE}/api/v1/students/${studentId}/annotations`
+      const annotationsRes = await fetch(annotationsEndpoint)
+      if (annotationsRes.ok) {
+        const annotationsData = await annotationsRes.json()
+        setAnnotations(Array.isArray(annotationsData) ? annotationsData : annotationsData.annotations || [])
+      }
+
+      setDocumentUrl(`${API_BASE}/api/v1/students/${studentId}/file`)
+      setError(null)
+    } catch (err) {
+      console.error('Failed to fetch data:', err)
+      setError('Fehler beim Laden der Daten')
+    } finally {
+      setLoading(false)
+    }
+  }, [klausurId, studentId])
+
+  useEffect(() => { fetchData() }, [fetchData])
+
+  // ---- Annotation CRUD ----
+  const createAnnotation = useCallback(async (position: AnnotationPosition, type: AnnotationType) => {
+    try {
+      const newAnnotation = {
+        page: currentPage, position, type, text: '',
+        severity: type === 'rechtschreibung' || type === 'grammatik' ? 'minor' : 'major',
+        role: 'first_examiner',
+        linked_criterion: ['rechtschreibung', 'grammatik', 'inhalt', 'struktur', 'stil'].includes(type) ? type : undefined,
+      }
+      const res = await fetch(`${API_BASE}/api/v1/students/${studentId}/annotations`, {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(newAnnotation),
+      })
+      if (res.ok) {
+        const created = await res.json()
+        setAnnotations((prev) => [...prev, created])
+        setSelectedAnnotation(created)
+        setActiveTab('annotationen')
+      } else {
+        const errorData = await res.json()
+        setError(errorData.detail || 'Fehler beim Erstellen der Annotation')
+      }
+    } catch (err) {
+      console.error('Failed to create annotation:', err)
+      setError('Fehler beim Erstellen der Annotation')
+    }
+  }, [studentId, currentPage])
+
+  const updateAnnotation = useCallback(async (id: string, updates: Partial<Annotation>) => {
+    try {
+      const res = await fetch(`${API_BASE}/api/v1/annotations/${id}`, {
+        method: 'PUT', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(updates),
+      })
+      if (res.ok) {
+        const updated = await res.json()
+        setAnnotations((prev) => prev.map((ann) => (ann.id === id ? updated : ann)))
+        if (selectedAnnotation?.id === id) setSelectedAnnotation(updated)
+      } else {
+        const errorData = await res.json()
+        setError(errorData.detail || 'Fehler beim Aktualisieren der Annotation')
+      }
+    } catch (err) {
+      console.error('Failed to update annotation:', err)
+      setError('Fehler beim Aktualisieren der Annotation')
+    }
+  }, [selectedAnnotation?.id])
+
+  const deleteAnnotation = useCallback(async (id: string) => {
+    try {
+      const res = await fetch(`${API_BASE}/api/v1/annotations/${id}`, { method: 'DELETE' })
+      if (res.ok) {
+        setAnnotations((prev) => prev.filter((ann) => ann.id !== id))
+        if (selectedAnnotation?.id === id) setSelectedAnnotation(null)
+      } else {
+        const errorData = await res.json()
+        setError(errorData.detail || 'Fehler beim Loeschen der Annotation')
+      }
+    } catch (err) {
+      console.error('Failed to delete annotation:', err)
+      setError('Fehler beim Loeschen der Annotation')
+    }
+  }, [selectedAnnotation?.id])
+
+  // ---- Criteria ----
+  const saveCriteriaScores = useCallback(async (newScores: CriteriaScores) => {
+    try {
+      setSaving(true)
+      const res = await fetch(`${API_BASE}/api/v1/students/${studentId}/criteria`, {
+        method: 'PUT', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ criteria_scores: newScores }),
+      })
+      if (res.ok) { setStudent(await res.json()) }
+      else { setError('Fehler beim Speichern') }
+    } catch (err) {
+      console.error('Failed to save criteria:', err)
+      setError('Fehler beim Speichern')
+    } finally { setSaving(false) }
+  }, [studentId])
+
+  const handleCriteriaChange = (criterion: string, value: number) => {
+    const newScores = { ...criteriaScores, [criterion]: value }
+    setCriteriaScores(newScores)
+    saveCriteriaScores(newScores)
+  }
+
+  // ---- Gutachten ----
+  const saveGutachten = useCallback(async () => {
+    try {
+      setSaving(true)
+      const res = await fetch(`${API_BASE}/api/v1/students/${studentId}/gutachten`, {
+        method: 'PUT', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ gutachten }),
+      })
+      if (res.ok) { setStudent(await res.json()) }
+      else { setError('Fehler beim Speichern') }
+    } catch (err) {
+      console.error('Failed to save gutachten:', err)
+      setError('Fehler beim Speichern')
+    } finally { setSaving(false) }
+  }, [studentId, gutachten])
+
+  const generateGutachten = useCallback(async () => {
+    try {
+      setGeneratingGutachten(true)
+      setError(null)
+      const res = await fetch(`${API_BASE}/api/v1/students/${studentId}/gutachten/generate`, {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ criteria_scores: criteriaScores }),
+      })
+      if (res.ok) {
+        const data = await res.json()
+        const generatedText = [data.einleitung || '', '', data.hauptteil || '', '', data.fazit || '']
+          .filter(Boolean).join('\n\n')
+        setGutachten(generatedText)
+        setActiveTab('gutachten')
+      } else {
+        const errorData = await res.json()
+        setError(errorData.detail || 'Fehler bei der Gutachten-Generierung')
+      }
+    } catch (err) {
+      console.error('Failed to generate gutachten:', err)
+      setError('Fehler bei der Gutachten-Generierung')
+    } finally { setGeneratingGutachten(false) }
+  }, [studentId, criteriaScores])
+
+  // ---- PDF Export ----
+  const exportGutachtenPDF = useCallback(async () => {
+    try {
+      setExporting(true); setError(null)
+      const name = student?.anonym_id?.replace(/\s+/g, '_') || 'Student'
+      await downloadBlob(
+        `${API_BASE}/api/v1/students/${studentId}/export/gutachten`,
+        `Gutachten_${name}_${new Date().toISOString().split('T')[0]}.pdf`,
+      )
+    } catch (err) {
+      console.error('Failed to export PDF:', err)
+      setError('Fehler beim PDF-Export')
+    } finally { setExporting(false) }
+  }, [studentId, student?.anonym_id])
+
+  const exportAnnotationsPDF = useCallback(async () => {
+    try {
+      setExporting(true); setError(null)
+      const name = student?.anonym_id?.replace(/\s+/g, '_') || 'Student'
+      await downloadBlob(
+        `${API_BASE}/api/v1/students/${studentId}/export/annotations`,
+        `Anmerkungen_${name}_${new Date().toISOString().split('T')[0]}.pdf`,
+      )
+    } catch (err) {
+      console.error('Failed to export annotations PDF:', err)
+      setError('Fehler beim PDF-Export')
+    } finally { setExporting(false) }
+  }, [studentId, student?.anonym_id])
+
+  // ---- Workflow actions ----
+  const submitErstkorrektur = useCallback(async () => {
+    try {
+      setSubmittingWorkflow(true)
+      const assignRes = await fetch(`${API_BASE}/api/v1/students/${studentId}/examiner`, {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ examiner_id: 'current-user', examiner_role: 'first_examiner' }),
+      })
+      if (!assignRes.ok && assignRes.status !== 400) {
+        const err = await assignRes.json()
+        throw new Error(err.detail || 'Fehler bei der Zuweisung')
+      }
+      const submitRes = await fetch(`${API_BASE}/api/v1/students/${studentId}/examiner/result`, {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ grade_points: totals.gradePoints, notes: gutachten }),
+      })
+      if (submitRes.ok) { fetchData() }
+      else {
+        const err = await submitRes.json()
+        setError(err.detail || 'Fehler beim Abschliessen der Erstkorrektur')
+      }
+    } catch (err) {
+      console.error('Failed to submit Erstkorrektur:', err)
+      setError('Fehler beim Abschliessen der Erstkorrektur')
+    } finally { setSubmittingWorkflow(false) }
+  }, [studentId, totals.gradePoints, gutachten, fetchData])
+
+  const startZweitkorrektur = useCallback(async (zweitkorrektorId: string) => {
+    try {
+      setSubmittingWorkflow(true)
+      const res = await fetch(`${API_BASE}/api/v1/students/${studentId}/start-zweitkorrektur`, {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ zweitkorrektor_id: zweitkorrektorId }),
+      })
+      if (res.ok) { fetchData() }
+      else {
+        const err = await res.json()
+        setError(err.detail || 'Fehler beim Starten der Zweitkorrektur')
+      }
+    } catch (err) {
+      console.error('Failed to start Zweitkorrektur:', err)
+      setError('Fehler beim Starten der Zweitkorrektur')
+    } finally { setSubmittingWorkflow(false) }
+  }, [studentId, fetchData])
+
+  const submitZweitkorrektur = useCallback(async () => {
+    try {
+      setSubmittingWorkflow(true)
+      const res = await fetch(`${API_BASE}/api/v1/students/${studentId}/submit-zweitkorrektur`, {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          grade_points: totals.gradePoints, criteria_scores: criteriaScores,
+          gutachten: gutachten ? { text: gutachten } : null, notes: '',
+        }),
+      })
+      if (res.ok) {
+        const result = await res.json()
+        if (result.workflow_status === 'completed') {
+          alert(`Auto-Konsens erreicht! Endnote: ${result.final_grade} Punkte`)
+        } else if (result.workflow_status === 'einigung_required') {
+          setShowEinigungModal(true)
+        } else if (result.workflow_status === 'drittkorrektur_required') {
+          alert(`Drittkorrektur erforderlich: Differenz ${result.grade_difference} Punkte`)
+        }
+        fetchData()
+      } else {
+        const err = await res.json()
+        setError(err.detail || 'Fehler beim Abschliessen der Zweitkorrektur')
+      }
+    } catch (err) {
+      console.error('Failed to submit Zweitkorrektur:', err)
+      setError('Fehler beim Abschliessen der Zweitkorrektur')
+    } finally { setSubmittingWorkflow(false) }
+  }, [studentId, totals.gradePoints, criteriaScores, gutachten, fetchData])
+
+  const submitEinigung = useCallback(async (type: 'agreed' | 'split' | 'escalated') => {
+    try {
+      setSubmittingWorkflow(true)
+      const res = await fetch(`${API_BASE}/api/v1/students/${studentId}/einigung`, {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ final_grade: einigungGrade, einigung_notes: einigungNotes, einigung_type: type }),
+      })
+      if (res.ok) {
+        const result = await res.json()
+        setShowEinigungModal(false)
+        if (result.workflow_status === 'drittkorrektur_required') {
+          alert('Eskaliert zu Drittkorrektur')
+        } else {
+          alert(`Einigung abgeschlossen: Endnote ${result.final_grade} Punkte`)
+        }
+        fetchData()
+      } else {
+        const err = await res.json()
+        setError(err.detail || 'Fehler bei der Einigung')
+      }
+    } catch (err) {
+      console.error('Failed to submit Einigung:', err)
+      setError('Fehler bei der Einigung')
+    } finally { setSubmittingWorkflow(false) }
+  }, [studentId, einigungGrade, einigungNotes, fetchData])
+
+  // ---- Navigation ----
+  const goToStudent = (direction: 'prev' | 'next') => {
+    const newIndex = direction === 'prev' ? currentIndex - 1 : currentIndex + 1
+    if (newIndex >= 0 && newIndex < students.length) {
+      routerPush(`/education/klausur-korrektur/${klausurId}/${students[newIndex].id}`)
+    }
+  }
+
+  return {
+    // State
+    klausur, student, students, annotations, gradeInfo, workflow,
+    loading, saving, error, activeTab, currentPage, totalPages,
+    zoom, documentUrl, generatingGutachten, exporting,
+    selectedTool, selectedAnnotation,
+    criteriaScores, gutachten,
+    showEinigungModal, einigungGrade, einigungNotes, submittingWorkflow,
+    currentIndex, annotationCounts, totals,
+
+    // Actions
+    setActiveTab, setCurrentPage, setZoom,
+    setSelectedTool, setSelectedAnnotation,
+    setGutachten, setError,
+    setShowEinigungModal, setEinigungGrade, setEinigungNotes,
+    createAnnotation, updateAnnotation, deleteAnnotation,
+    handleCriteriaChange, saveGutachten, generateGutachten,
+    exportGutachtenPDF, exportAnnotationsPDF,
+    submitErstkorrektur, startZweitkorrektur, submitZweitkorrektur, submitEinigung,
+    goToStudent,
+  }
+}
diff --git a/admin-lehrer/app/(admin)/education/klausur-korrektur/[klausurId]/[studentId]/_components/workspace-types.ts b/admin-lehrer/app/(admin)/education/klausur-korrektur/[klausurId]/[studentId]/_components/workspace-types.ts
new file mode 100644
index 0000000..b8e7485
--- /dev/null
+++ b/admin-lehrer/app/(admin)/education/klausur-korrektur/[klausurId]/[studentId]/_components/workspace-types.ts
@@ -0,0 +1,93 @@
+/**
+ * Types and constants for the Korrektur-Workspace page.
+ */
+
+import type { CriteriaScores } from '../../../types'
+
+// ---- Examiner workflow types ----
+
+export interface ExaminerInfo {
+  id: string
+  assigned_at: string
+  notes?: string
+}
+
+export interface ExaminerResult {
+  grade_points: number
+  criteria_scores?: CriteriaScores
+  notes?: string
+  submitted_at: string
+}
+
+export interface ExaminerWorkflow {
+  student_id: string
+  workflow_status: string
+  visibility_mode: string
+  user_role: 'ek' | 'zk' | 'dk' | 'viewer'
+  first_examiner?: ExaminerInfo
+  second_examiner?: ExaminerInfo
+  third_examiner?: ExaminerInfo
+  first_result?: ExaminerResult
+  first_result_visible?: boolean
+  second_result?: ExaminerResult
+  third_result?: ExaminerResult
+  grade_difference?: number
+  final_grade?: number
+  consensus_reached?: boolean
+  consensus_type?: string
+  einigung?: {
+    final_grade: number
+    notes: string
+    type: string
+    submitted_by: string
+    submitted_at: string
+    ek_grade: number
+    zk_grade: number
+  }
+  drittkorrektur_reason?: string
+}
+
+// ---- Active tab ----
+
+export type ActiveTab = 'kriterien' | 'gutachten' | 'annotationen' | 'eh-vorschlaege'
+
+// ---- Totals from grade calculation ----
+
+export interface GradeTotals {
+  raw: number
+  weighted: number
+  gradePoints: number
+}
+
+// ---- Constants ----
+
+/** Same-origin proxy to avoid CORS issues */
+export const API_BASE = '/klausur-api'
+
+export const GRADE_LABELS: Record<number, string> = {
+  15: '1+', 14: '1', 13: '1-', 12: '2+', 11: '2', 10: '2-',
+  9: '3+', 8: '3', 7: '3-', 6: '4+', 5: '4', 4: '4-',
+  3: '5+', 2: '5', 1: '5-', 0: '6',
+}
+
+export const WORKFLOW_STATUS_LABELS: Record<string, { label: string; color: string }> = {
+  not_started: { label: 'Nicht gestartet', color: 'bg-slate-100 text-slate-700' },
+  ek_in_progress: { label: 'EK in Arbeit', color: 'bg-blue-100 text-blue-700' },
+  ek_completed: { label: 'EK abgeschlossen', color: 'bg-blue-200 text-blue-800' },
+  zk_assigned: { label: 'ZK zugewiesen', color: 'bg-amber-100 text-amber-700' },
+  zk_in_progress: { label: 'ZK in Arbeit', color: 'bg-amber-200 text-amber-800' },
+  zk_completed: { label: 'ZK abgeschlossen', color: 'bg-amber-300 text-amber-900' },
+  einigung_required: { label: 'Einigung erforderlich', color: 'bg-orange-100 text-orange-700' },
+  einigung_completed: { label: 'Einigung abgeschlossen', color: 'bg-green-100 text-green-700' },
+  drittkorrektur_required: { label: 'DK erforderlich', color: 'bg-red-100 text-red-700' },
+  drittkorrektur_assigned: { label: 'DK zugewiesen', color: 'bg-red-200 text-red-800' },
+  drittkorrektur_in_progress: { label: 'DK in Arbeit', color: 'bg-red-300 text-red-900' },
+  completed: { label: 'Abgeschlossen', color: 'bg-green-200 text-green-800' },
+}
+
+export const ROLE_LABELS: Record<string, { label: string; color: string }> = {
+  ek: { label: 'Erstkorrektor', color: 'bg-blue-500' },
+  zk: { label: 'Zweitkorrektor', color: 'bg-amber-500' },
+  dk: { label: 'Drittkorrektor', color: 'bg-purple-500' },
+  viewer: { label: 'Betrachter', color: 'bg-slate-500' },
+}
diff --git a/admin-lehrer/app/(admin)/education/klausur-korrektur/[klausurId]/[studentId]/page.tsx b/admin-lehrer/app/(admin)/education/klausur-korrektur/[klausurId]/[studentId]/page.tsx
index 47bc04c..4c92c5f 100644
--- a/admin-lehrer/app/(admin)/education/klausur-korrektur/[klausurId]/[studentId]/page.tsx
+++ b/admin-lehrer/app/(admin)/education/klausur-korrektur/[klausurId]/[studentId]/page.tsx
@@ -6,99 +6,19 @@
  * Main correction interface with 2/3 - 1/3 layout:
  * - Left (2/3): Document viewer with annotation overlay
  * - Right (1/3): Criteria scoring, Gutachten editor, Annotations
+ *
+ * All state and logic lives in useKorrekturWorkspace hook.
+ * UI is composed from extracted components in _components/.
  */
 
-import { useState, useEffect, useCallback, useMemo } from 'react'
 import { useParams, useRouter } from 'next/navigation'
-import Link from 'next/link'
-import { AnnotationLayer, AnnotationToolbar, AnnotationPanel, EHSuggestionPanel } from '../../components'
-import type {
-  Klausur,
-  StudentWork,
-  Annotation,
-  CriteriaScores,
-  GradeInfo,
-  AnnotationType,
-  AnnotationPosition,
-} from '../../types'
-import { ANNOTATION_COLORS } from '../../types'
-
-// Examiner workflow types
-interface ExaminerInfo {
-  id: string
-  assigned_at: string
-  notes?: string
-}
-
-interface ExaminerResult {
-  grade_points: number
-  criteria_scores?: CriteriaScores
-  notes?: string
-  submitted_at: string
-}
-
-interface ExaminerWorkflow {
-  student_id: string
-  workflow_status: string
-  visibility_mode: string
-  user_role: 'ek' | 'zk' | 'dk' | 'viewer'
-  first_examiner?: ExaminerInfo
-  second_examiner?: ExaminerInfo
-  third_examiner?: ExaminerInfo
-  first_result?: ExaminerResult
-  first_result_visible?: boolean
-  second_result?: ExaminerResult
-  third_result?: ExaminerResult
-  grade_difference?: number
-  final_grade?: number
-  consensus_reached?: boolean
-  consensus_type?: string
-  einigung?: {
-    final_grade: number
-    notes: string
-    type: string
-    submitted_by: string
-    submitted_at: string
-    ek_grade: number
-    zk_grade: number
-  }
-  drittkorrektur_reason?: string
-}
-
-// Workflow status labels
-const WORKFLOW_STATUS_LABELS: Record<string, { label: string; color: string }> = {
-  not_started: { label: 'Nicht gestartet', color: 'bg-slate-100 text-slate-700' },
-  ek_in_progress: { label: 'EK in Arbeit', color: 'bg-blue-100 text-blue-700' },
-  ek_completed: { label: 'EK abgeschlossen', color: 'bg-blue-200 text-blue-800' },
-  zk_assigned: { label: 'ZK zugewiesen', color: 'bg-amber-100 text-amber-700' },
-  zk_in_progress: { label: 'ZK in Arbeit', color: 'bg-amber-200 text-amber-800' },
-  zk_completed: { label: 'ZK abgeschlossen', color: 'bg-amber-300 text-amber-900' },
-  einigung_required: { label: 'Einigung erforderlich', color: 'bg-orange-100 text-orange-700' },
-  einigung_completed: { label: 'Einigung abgeschlossen', color: 'bg-green-100 text-green-700' },
-  drittkorrektur_required: { label: 'DK erforderlich', color: 'bg-red-100 text-red-700' },
-  drittkorrektur_assigned: { label: 'DK zugewiesen', color: 'bg-red-200 text-red-800' },
-  drittkorrektur_in_progress: { label: 'DK in Arbeit', color: 'bg-red-300 text-red-900' },
-  completed: { label: 'Abgeschlossen', color: 'bg-green-200 text-green-800' },
-}
-
-const ROLE_LABELS: Record<string, { label: string; color: string }> = {
-  ek: { label: 'Erstkorrektor', color: 'bg-blue-500' },
-  zk: { label: 'Zweitkorrektor', color: 'bg-amber-500' },
-  dk: { label: 'Drittkorrektor', color: 'bg-purple-500' },
-  viewer: { label: 'Betrachter', color: 'bg-slate-500' },
-}
-
-// Same-origin proxy to avoid CORS issues
-const API_BASE = '/klausur-api'
-
-// Grade thresholds and labels
-const GRADE_LABELS: Record<number, string> = {
-  15: '1+', 14: '1', 13: '1-', 12: '2+', 11: '2', 10: '2-',
-  9: '3+', 8: '3', 7: '3-', 6: '4+', 5: '4', 4: '4-',
-  3: '5+', 2: '5', 1: '5-', 0: '6'
-}
-
-type ActiveTab = 'kriterien' | 'gutachten' | 'annotationen' | 'eh-vorschlaege'
+import {
+  useKorrekturWorkspace,
+  TopNavigationBar,
+  EinigungModal,
+  DocumentViewer,
+  CorrectionPanel,
+} from './_components'
 
 export default function KorrekturWorkspacePage() {
   const params = useParams()
@@ -106,561 +26,9 @@ export default function KorrekturWorkspacePage() {
   const klausurId = params.klausurId as string
   const studentId = params.studentId as string
 
-  // State
-  const [klausur, setKlausur] = useState<Klausur | null>(null)
-  const [student, setStudent] = useState<StudentWork | null>(null)
-  const [students, setStudents] = useState<StudentWork[]>([])
-  const [annotations, setAnnotations] = useState<Annotation[]>([])
-  const [gradeInfo, setGradeInfo] = useState<GradeInfo | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [saving, setSaving] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const [activeTab, setActiveTab] = useState<ActiveTab>('kriterien')
-  const [currentPage, setCurrentPage] = useState(1)
-  const [totalPages, setTotalPages] = useState(1)
-  const [zoom, setZoom] = useState(100)
-  const [documentUrl, setDocumentUrl] = useState<string | null>(null)
-  const [generatingGutachten, setGeneratingGutachten] = useState(false)
-  const [exporting, setExporting] = useState(false)
+  const ws = useKorrekturWorkspace(klausurId, studentId, router.push)
 
-  // Annotation state
-  const [selectedTool, setSelectedTool] = useState<AnnotationType | null>(null)
-  const [selectedAnnotation, setSelectedAnnotation] = useState<Annotation | null>(null)
-
-  // Form state
-  const [criteriaScores, setCriteriaScores] = useState<CriteriaScores>({})
-  const [gutachten, setGutachten] = useState('')
-
-  // Examiner workflow state
-  const [workflow, setWorkflow] = useState<ExaminerWorkflow | null>(null)
-  const [showEinigungModal, setShowEinigungModal] = useState(false)
-  const [einigungGrade, setEinigungGrade] = useState<number>(0)
-  const [einigungNotes, setEinigungNotes] = useState('')
-  const [submittingWorkflow, setSubmittingWorkflow] = useState(false)
-
-  // Current student index
-  const currentIndex = students.findIndex(s => s.id === studentId)
-
-  // Annotation counts by type
-  const annotationCounts = useMemo(() => {
-    const counts: Record<AnnotationType, number> = {
-      rechtschreibung: 0,
-      grammatik: 0,
-      inhalt: 0,
-      struktur: 0,
-      stil: 0,
-      comment: 0,
-      highlight: 0,
-    }
-    annotations.forEach((ann) => {
-      counts[ann.type] = (counts[ann.type] || 0) + 1
-    })
-    return counts
-  }, [annotations])
-
-  // Fetch all data
-  const fetchData = useCallback(async () => {
-    try {
-      setLoading(true)
-
-      // Fetch klausur
-      const klausurRes = await fetch(`${API_BASE}/api/v1/klausuren/${klausurId}`)
-      if (klausurRes.ok) {
-        setKlausur(await klausurRes.json())
-      }
-
-      // Fetch students list
-      const studentsRes = await fetch(`${API_BASE}/api/v1/klausuren/${klausurId}/students`)
-      if (studentsRes.ok) {
-        const data = await studentsRes.json()
-        setStudents(Array.isArray(data) ? data : data.students || [])
-      }
-
-      // Fetch current student
-      const studentRes = await fetch(`${API_BASE}/api/v1/students/${studentId}`)
-      if (studentRes.ok) {
-        const studentData = await studentRes.json()
-        setStudent(studentData)
-        setCriteriaScores(studentData.criteria_scores || {})
-        setGutachten(studentData.gutachten || '')
-      }
-
-      // Fetch grade info
-      const gradeInfoRes = await fetch(`${API_BASE}/api/v1/grade-info`)
-      if (gradeInfoRes.ok) {
-        setGradeInfo(await gradeInfoRes.json())
-      }
-
-      // Fetch examiner workflow status
-      const workflowRes = await fetch(`${API_BASE}/api/v1/students/${studentId}/examiner-workflow`)
-      if (workflowRes.ok) {
-        const workflowData = await workflowRes.json()
-        setWorkflow(workflowData)
-
-        // If Einigung is required, pre-populate the grade field
-        if (workflowData.workflow_status === 'einigung_required' && workflowData.first_result && workflowData.second_result) {
-          const avgGrade = Math.round((workflowData.first_result.grade_points + workflowData.second_result.grade_points) / 2)
-          setEinigungGrade(avgGrade)
-        }
-      }
-
-      // Fetch annotations (use filtered endpoint if we have a workflow)
-      const annotationsEndpoint = workflow?.user_role === 'zk'
-        ? `${API_BASE}/api/v1/students/${studentId}/annotations-filtered`
-        : `${API_BASE}/api/v1/students/${studentId}/annotations`
-
-      const annotationsRes = await fetch(annotationsEndpoint)
-      if (annotationsRes.ok) {
-        const annotationsData = await annotationsRes.json()
-        setAnnotations(Array.isArray(annotationsData) ? annotationsData : annotationsData.annotations || [])
-      }
-
-      // Build document URL
-      setDocumentUrl(`${API_BASE}/api/v1/students/${studentId}/file`)
-
-      setError(null)
-    } catch (err) {
-      console.error('Failed to fetch data:', err)
-      setError('Fehler beim Laden der Daten')
-    } finally {
-      setLoading(false)
-    }
-  }, [klausurId, studentId])
-
-  // Create annotation
-  const createAnnotation = useCallback(async (position: AnnotationPosition, type: AnnotationType) => {
-    try {
-      const newAnnotation = {
-        page: currentPage,
-        position,
-        type,
-        text: '',
-        severity: type === 'rechtschreibung' || type === 'grammatik' ? 'minor' : 'major',
-        role: 'first_examiner',
-        linked_criterion: ['rechtschreibung', 'grammatik', 'inhalt', 'struktur', 'stil'].includes(type)
-          ? type
-          : undefined,
-      }
-
-      const res = await fetch(`${API_BASE}/api/v1/students/${studentId}/annotations`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(newAnnotation),
-      })
-
-      if (res.ok) {
-        const created = await res.json()
-        setAnnotations((prev) => [...prev, created])
-        setSelectedAnnotation(created)
-        setActiveTab('annotationen') // Switch to annotations tab to edit
-      } else {
-        const errorData = await res.json()
-        setError(errorData.detail || 'Fehler beim Erstellen der Annotation')
-      }
-    } catch (err) {
-      console.error('Failed to create annotation:', err)
-      setError('Fehler beim Erstellen der Annotation')
-    }
-  }, [studentId, currentPage])
-
-  // Update annotation
-  const updateAnnotation = useCallback(async (id: string, updates: Partial<Annotation>) => {
-    try {
-      const res = await fetch(`${API_BASE}/api/v1/annotations/${id}`, {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(updates),
-      })
-
-      if (res.ok) {
-        const updated = await res.json()
-        setAnnotations((prev) => prev.map((ann) => (ann.id === id ? updated : ann)))
-        if (selectedAnnotation?.id === id) {
-          setSelectedAnnotation(updated)
-        }
-      } else {
-        const errorData = await res.json()
-        setError(errorData.detail || 'Fehler beim Aktualisieren der Annotation')
-      }
-    } catch (err) {
-      console.error('Failed to update annotation:', err)
-      setError('Fehler beim Aktualisieren der Annotation')
-    }
-  }, [selectedAnnotation?.id])
-
-  // Delete annotation
-  const deleteAnnotation = useCallback(async (id: string) => {
-    try {
-      const res = await fetch(`${API_BASE}/api/v1/annotations/${id}`, {
-        method: 'DELETE',
-      })
-
-      if (res.ok) {
-        setAnnotations((prev) => prev.filter((ann) => ann.id !== id))
-        if (selectedAnnotation?.id === id) {
-          setSelectedAnnotation(null)
-        }
-      } else {
-        const errorData = await res.json()
-        setError(errorData.detail || 'Fehler beim Loeschen der Annotation')
-      }
-    } catch (err) {
-      console.error('Failed to delete annotation:', err)
-      setError('Fehler beim Loeschen der Annotation')
-    }
-  }, [selectedAnnotation?.id])
-
-  useEffect(() => {
-    fetchData()
-  }, [fetchData])
-
-  // Save criteria scores
-  const saveCriteriaScores = useCallback(async (newScores: CriteriaScores) => {
-    try {
-      setSaving(true)
-      const res = await fetch(`${API_BASE}/api/v1/students/${studentId}/criteria`, {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ criteria_scores: newScores }),
-      })
-
-      if (res.ok) {
-        const updated = await res.json()
-        setStudent(updated)
-      } else {
-        setError('Fehler beim Speichern')
-      }
-    } catch (err) {
-      console.error('Failed to save criteria:', err)
-      setError('Fehler beim Speichern')
-    } finally {
-      setSaving(false)
-    }
-  }, [studentId])
-
-  // Save gutachten
-  const saveGutachten = useCallback(async () => {
-    try {
-      setSaving(true)
-      const res = await fetch(`${API_BASE}/api/v1/students/${studentId}/gutachten`, {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ gutachten }),
-      })
-
-      if (res.ok) {
-        const updated = await res.json()
-        setStudent(updated)
-      } else {
-        setError('Fehler beim Speichern')
-      }
-    } catch (err) {
-      console.error('Failed to save gutachten:', err)
-      setError('Fehler beim Speichern')
-    } finally {
-      setSaving(false)
-    }
-  }, [studentId, gutachten])
-
-  // Generate gutachten
-  const generateGutachten = useCallback(async () => {
-    try {
-      setGeneratingGutachten(true)
-      setError(null)
-
-      const res = await fetch(`${API_BASE}/api/v1/students/${studentId}/gutachten/generate`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ criteria_scores: criteriaScores }),
-      })
-
-      if (res.ok) {
-        const data = await res.json()
-        const generatedText = [
-          data.einleitung || '',
-          '',
-          data.hauptteil || '',
-          '',
-          data.fazit || '',
-        ].filter(Boolean).join('\n\n')
-
-        setGutachten(generatedText)
-        setActiveTab('gutachten')
-      } else {
-        const errorData = await res.json()
-        setError(errorData.detail || 'Fehler bei der Gutachten-Generierung')
-      }
-    } catch (err) {
-      console.error('Failed to generate gutachten:', err)
-      setError('Fehler bei der Gutachten-Generierung')
-    } finally {
-      setGeneratingGutachten(false)
-    }
-  }, [studentId, criteriaScores])
-
-  // Export PDF functions
-  const exportGutachtenPDF = useCallback(async () => {
-    try {
-      setExporting(true)
-      setError(null)
-
-      const res = await fetch(`${API_BASE}/api/v1/students/${studentId}/export/gutachten`)
-
-      if (res.ok) {
-        const blob = await res.blob()
-        const url = window.URL.createObjectURL(blob)
-        const a = document.createElement('a')
-        a.href = url
-        a.download = `Gutachten_${student?.anonym_id?.replace(/\s+/g, '_') || 'Student'}_${new Date().toISOString().split('T')[0]}.pdf`
-        document.body.appendChild(a)
-        a.click()
-        document.body.removeChild(a)
-        window.URL.revokeObjectURL(url)
-      } else {
-        setError('Fehler beim PDF-Export')
-      }
-    } catch (err) {
-      console.error('Failed to export PDF:', err)
-      setError('Fehler beim PDF-Export')
-    } finally {
-      setExporting(false)
-    }
-  }, [studentId, student?.anonym_id])
-
-  const exportAnnotationsPDF = useCallback(async () => {
-    try {
-      setExporting(true)
-      setError(null)
-
-      const res = await fetch(`${API_BASE}/api/v1/students/${studentId}/export/annotations`)
-
-      if (res.ok) {
-        const blob = await res.blob()
-        const url = window.URL.createObjectURL(blob)
-        const a = document.createElement('a')
-        a.href = url
-        a.download = `Anmerkungen_${student?.anonym_id?.replace(/\s+/g, '_') || 'Student'}_${new Date().toISOString().split('T')[0]}.pdf`
-        document.body.appendChild(a)
-        a.click()
-        document.body.removeChild(a)
-        window.URL.revokeObjectURL(url)
-      } else {
-        setError('Fehler beim PDF-Export')
-      }
-    } catch (err) {
-      console.error('Failed to export annotations PDF:', err)
-      setError('Fehler beim PDF-Export')
-    } finally {
-      setExporting(false)
-    }
-  }, [studentId, student?.anonym_id])
-
-  // Handle criteria change
-  const handleCriteriaChange = (criterion: string, value: number) => {
-    const newScores = { ...criteriaScores, [criterion]: value }
-    setCriteriaScores(newScores)
-    // Auto-save after short delay
-    saveCriteriaScores(newScores)
-  }
-
-  // Calculate total points - moved before workflow functions to avoid "used before declaration" error
-  const calculateTotalPoints = useCallback(() => {
-    if (!gradeInfo?.criteria) return { raw: 0, weighted: 0, gradePoints: 0 }
-
-    let totalWeighted = 0
-    let totalWeight = 0
-
-    Object.entries(gradeInfo.criteria).forEach(([key, criterion]) => {
-      const score = criteriaScores[key] || 0
-      totalWeighted += score * (criterion.weight / 100)
-      totalWeight += criterion.weight
-    })
-
-    const percentage = totalWeight > 0 ? (totalWeighted / totalWeight) * 100 : 0
-
-    // Calculate grade points from percentage
-    let gradePoints = 0
-    const thresholds = [
-      { points: 15, min: 95 }, { points: 14, min: 90 }, { points: 13, min: 85 },
-      { points: 12, min: 80 }, { points: 11, min: 75 }, { points: 10, min: 70 },
-      { points: 9, min: 65 }, { points: 8, min: 60 }, { points: 7, min: 55 },
-      { points: 6, min: 50 }, { points: 5, min: 45 }, { points: 4, min: 40 },
-      { points: 3, min: 33 }, { points: 2, min: 27 }, { points: 1, min: 20 },
-    ]
-
-    for (const t of thresholds) {
-      if (percentage >= t.min) {
-        gradePoints = t.points
-        break
-      }
-    }
-
-    return {
-      raw: Math.round(totalWeighted),
-      weighted: Math.round(percentage),
-      gradePoints,
-    }
-  }, [gradeInfo, criteriaScores])
-
-  const totals = calculateTotalPoints()
-
-  // Submit Erstkorrektur (EK completes their work)
-  const submitErstkorrektur = useCallback(async () => {
-    try {
-      setSubmittingWorkflow(true)
-
-      // First assign as EK if not already assigned
-      const assignRes = await fetch(`${API_BASE}/api/v1/students/${studentId}/examiner`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          examiner_id: 'current-user', // In production, get from auth context
-          examiner_role: 'first_examiner',
-        }),
-      })
-
-      if (!assignRes.ok && assignRes.status !== 400) {
-        // 400 might mean already assigned, which is fine
-        const error = await assignRes.json()
-        throw new Error(error.detail || 'Fehler bei der Zuweisung')
-      }
-
-      // Submit result
-      const submitRes = await fetch(`${API_BASE}/api/v1/students/${studentId}/examiner/result`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          grade_points: totals.gradePoints,
-          notes: gutachten,
-        }),
-      })
-
-      if (submitRes.ok) {
-        // Refresh workflow status
-        fetchData()
-      } else {
-        const error = await submitRes.json()
-        setError(error.detail || 'Fehler beim Abschliessen der Erstkorrektur')
-      }
-    } catch (err) {
-      console.error('Failed to submit Erstkorrektur:', err)
-      setError('Fehler beim Abschliessen der Erstkorrektur')
-    } finally {
-      setSubmittingWorkflow(false)
-    }
-  }, [studentId, totals.gradePoints, gutachten, fetchData])
-
-  // Start Zweitkorrektur
-  const startZweitkorrektur = useCallback(async (zweitkorrektorId: string) => {
-    try {
-      setSubmittingWorkflow(true)
-
-      const res = await fetch(`${API_BASE}/api/v1/students/${studentId}/start-zweitkorrektur`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          zweitkorrektor_id: zweitkorrektorId,
-        }),
-      })
-
-      if (res.ok) {
-        fetchData()
-      } else {
-        const error = await res.json()
-        setError(error.detail || 'Fehler beim Starten der Zweitkorrektur')
-      }
-    } catch (err) {
-      console.error('Failed to start Zweitkorrektur:', err)
-      setError('Fehler beim Starten der Zweitkorrektur')
-    } finally {
-      setSubmittingWorkflow(false)
-    }
-  }, [studentId, fetchData])
-
-  // Submit Zweitkorrektur
-  const submitZweitkorrektur = useCallback(async () => {
-    try {
-      setSubmittingWorkflow(true)
-
-      const res = await fetch(`${API_BASE}/api/v1/students/${studentId}/submit-zweitkorrektur`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          grade_points: totals.gradePoints,
-          criteria_scores: criteriaScores,
-          gutachten: gutachten ? { text: gutachten } : null,
-          notes: '',
-        }),
-      })
-
-      if (res.ok) {
-        const result = await res.json()
-        // Show result message
-        if (result.workflow_status === 'completed') {
-          alert(`Auto-Konsens erreicht! Endnote: ${result.final_grade} Punkte`)
-        } else if (result.workflow_status === 'einigung_required') {
-          setShowEinigungModal(true)
-        } else if (result.workflow_status === 'drittkorrektur_required') {
-          alert(`Drittkorrektur erforderlich: Differenz ${result.grade_difference} Punkte`)
-        }
-        fetchData()
-      } else {
-        const error = await res.json()
-        setError(error.detail || 'Fehler beim Abschliessen der Zweitkorrektur')
-      }
-    } catch (err) {
-      console.error('Failed to submit Zweitkorrektur:', err)
-      setError('Fehler beim Abschliessen der Zweitkorrektur')
-    } finally {
-      setSubmittingWorkflow(false)
-    }
-  }, [studentId, totals.gradePoints, criteriaScores, gutachten, fetchData])
-
-  // Submit Einigung
-  const submitEinigung = useCallback(async (type: 'agreed' | 'split' | 'escalated') => {
-    try {
-      setSubmittingWorkflow(true)
-
-      const res = await fetch(`${API_BASE}/api/v1/students/${studentId}/einigung`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          final_grade: einigungGrade,
-          einigung_notes: einigungNotes,
-          einigung_type: type,
-        }),
-      })
-
-      if (res.ok) {
-        const result = await res.json()
-        setShowEinigungModal(false)
-        if (result.workflow_status === 'drittkorrektur_required') {
-          alert('Eskaliert zu Drittkorrektur')
-        } else {
-          alert(`Einigung abgeschlossen: Endnote ${result.final_grade} Punkte`)
-        }
-        fetchData()
-      } else {
-        const error = await res.json()
-        setError(error.detail || 'Fehler bei der Einigung')
-      }
-    } catch (err) {
-      console.error('Failed to submit Einigung:', err)
-      setError('Fehler bei der Einigung')
-    } finally {
-      setSubmittingWorkflow(false)
-    }
-  }, [studentId, einigungGrade, einigungNotes, fetchData])
-
-  // Navigation
-  const goToStudent = (direction: 'prev' | 'next') => {
-    const newIndex = direction === 'prev' ? currentIndex - 1 : currentIndex + 1
-    if (newIndex >= 0 && newIndex < students.length) {
-      router.push(`/education/klausur-korrektur/${klausurId}/${students[newIndex].id}`)
-    }
-  }
-
-  if (loading) {
+  if (ws.loading) {
     return (
       <div className="flex items-center justify-center h-[calc(100vh-200px)]">
         <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
@@ -670,186 +38,38 @@ export default function KorrekturWorkspacePage() {
 
   return (
     <div className="min-h-screen bg-slate-50">
-      {/* Top Navigation Bar */}
-      <div className="bg-white border-b border-slate-200 px-6 py-3 flex items-center justify-between sticky top-0 z-10">
-        {/* Back link */}
-        <Link
-          href={`/education/klausur-korrektur/${klausurId}`}
-          className="text-primary-600 hover:text-primary-800 flex items-center gap-1 text-sm"
-        >
-          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-          </svg>
-          Zurück
-        </Link>
-
-        {/* Student navigation */}
-        <div className="flex items-center gap-4">
-          <button
-            onClick={() => goToStudent('prev')}
-            disabled={currentIndex <= 0}
-            className="p-2 rounded-lg hover:bg-slate-100 disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-            </svg>
-          </button>
-          <span className="text-sm font-medium">
-            {currentIndex + 1} / {students.length}
-          </span>
-          <button
-            onClick={() => goToStudent('next')}
-            disabled={currentIndex >= students.length - 1}
-            className="p-2 rounded-lg hover:bg-slate-100 disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-            </svg>
-          </button>
-        </div>
-
-        {/* Workflow status and role */}
-        <div className="flex items-center gap-3">
-          {/* Role badge */}
-          {workflow && (
-            <div className="flex items-center gap-2">
-              <span
-                className={`px-2 py-1 text-xs font-medium rounded-full text-white ${
-                  ROLE_LABELS[workflow.user_role]?.color || 'bg-slate-500'
-                }`}
-              >
-                {ROLE_LABELS[workflow.user_role]?.label || workflow.user_role}
-              </span>
-
-              {/* Workflow status badge */}
-              <span
-                className={`px-2 py-1 text-xs font-medium rounded-full ${
-                  WORKFLOW_STATUS_LABELS[workflow.workflow_status]?.color || 'bg-slate-100'
-                }`}
-              >
-                {WORKFLOW_STATUS_LABELS[workflow.workflow_status]?.label || workflow.workflow_status}
-              </span>
-
-              {/* Visibility mode indicator for ZK */}
-              {workflow.user_role === 'zk' && workflow.visibility_mode !== 'full' && (
-                <span className="px-2 py-1 text-xs bg-purple-100 text-purple-700 rounded-full">
-                  {workflow.visibility_mode === 'blind' ? 'Blind-Modus' : 'Semi-Blind'}
-                </span>
-              )}
-            </div>
-          )}
-
-          {saving && (
-            <span className="text-sm text-slate-500 flex items-center gap-1">
-              <div className="animate-spin rounded-full h-3 w-3 border-b-2 border-primary-600"></div>
-              Speichern...
-            </span>
-          )}
-          <div className="text-right">
-            <div className="text-lg font-bold text-slate-800">
-              {totals.gradePoints} Punkte
-            </div>
-            <div className="text-sm text-slate-500">
-              Note: {GRADE_LABELS[totals.gradePoints] || '-'}
-            </div>
-          </div>
-        </div>
-      </div>
+      <TopNavigationBar
+        klausurId={klausurId}
+        currentIndex={ws.currentIndex}
+        studentsCount={ws.students.length}
+        workflow={ws.workflow}
+        saving={ws.saving}
+        totals={ws.totals}
+        onGoToStudent={ws.goToStudent}
+      />
 
       {/* Einigung Modal */}
-      {showEinigungModal && workflow && (
-        <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 p-6 w-full max-w-lg mx-4">
-            <h3 className="text-lg font-semibold mb-4">Einigung erforderlich</h3>
-
-            {/* Grade comparison */}
-            <div className="bg-slate-50 rounded-lg p-4 mb-4">
-              <div className="grid grid-cols-2 gap-4 text-center">
-                <div>
-                  <div className="text-sm text-slate-500">Erstkorrektor</div>
-                  <div className="text-2xl font-bold text-blue-600">
-                    {workflow.first_result?.grade_points || '-'} P
-                  </div>
-                </div>
-                <div>
-                  <div className="text-sm text-slate-500">Zweitkorrektor</div>
-                  <div className="text-2xl font-bold text-amber-600">
-                    {workflow.second_result?.grade_points || '-'} P
-                  </div>
-                </div>
-              </div>
-              <div className="text-center mt-2 text-sm text-slate-500">
-                Differenz: {workflow.grade_difference} Punkte
-              </div>
-            </div>
-
-            {/* Final grade selection */}
-            <div className="mb-4">
-              <label className="block text-sm font-medium text-slate-700 mb-2">
-                Endnote festlegen
-              </label>
-              <input
-                type="range"
-                min={Math.min(workflow.first_result?.grade_points || 0, workflow.second_result?.grade_points || 0) - 1}
-                max={Math.max(workflow.first_result?.grade_points || 15, workflow.second_result?.grade_points || 15) + 1}
-                value={einigungGrade}
-                onChange={(e) => setEinigungGrade(parseInt(e.target.value))}
-                className="w-full"
-              />
-              <div className="text-center text-2xl font-bold mt-2">
-                {einigungGrade} Punkte ({GRADE_LABELS[einigungGrade] || '-'})
-              </div>
-            </div>
-
-            {/* Notes */}
-            <div className="mb-4">
-              <label className="block text-sm font-medium text-slate-700 mb-2">
-                Begruendung
-              </label>
-              <textarea
-                value={einigungNotes}
-                onChange={(e) => setEinigungNotes(e.target.value)}
-                placeholder="Begruendung fuer die Einigung..."
-                className="w-full p-2 border border-slate-300 rounded-lg text-sm"
-                rows={3}
-              />
-            </div>
-
-            {/* Actions */}
-            <div className="flex gap-2">
-              <button
-                onClick={() => submitEinigung('agreed')}
-                disabled={submittingWorkflow || !einigungNotes}
-                className="flex-1 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50"
-              >
-                Einigung bestaetigen
-              </button>
-              <button
-                onClick={() => submitEinigung('escalated')}
-                disabled={submittingWorkflow}
-                className="py-2 px-4 bg-red-100 text-red-700 rounded-lg hover:bg-red-200"
-              >
-                Eskalieren
-              </button>
-              <button
-                onClick={() => setShowEinigungModal(false)}
-                className="py-2 px-4 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200"
-              >
-                Abbrechen
-              </button>
-            </div>
-          </div>
-        </div>
+      {ws.showEinigungModal && ws.workflow && (
+        <EinigungModal
+          workflow={ws.workflow}
+          einigungGrade={ws.einigungGrade}
+          einigungNotes={ws.einigungNotes}
+          submittingWorkflow={ws.submittingWorkflow}
+          onGradeChange={ws.setEinigungGrade}
+          onNotesChange={ws.setEinigungNotes}
+          onSubmit={ws.submitEinigung}
+          onClose={() => ws.setShowEinigungModal(false)}
+        />
       )}
 
       {/* Error display */}
-      {error && (
+      {ws.error && (
         <div className="mx-6 mt-4 p-4 bg-red-50 border border-red-200 rounded-lg flex items-center gap-3">
           <svg className="w-5 h-5 text-red-600" 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-800">{error}</span>
-          <button onClick={() => setError(null)} className="ml-auto">
+          <span className="text-red-800">{ws.error}</span>
+          <button onClick={() => ws.setError(null)} className="ml-auto">
             <svg className="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
             </svg>
@@ -859,461 +79,58 @@ export default function KorrekturWorkspacePage() {
 
       {/* Main Layout: 2/3 - 1/3 */}
       <div className="flex gap-6 p-6 h-[calc(100vh-80px)]">
-        {/* Left: Document Viewer (2/3) */}
-        <div className="w-2/3 bg-white rounded-lg border border-slate-200 overflow-hidden flex flex-col">
-          {/* Toolbar */}
-          <AnnotationToolbar
-            selectedTool={selectedTool}
-            onSelectTool={setSelectedTool}
-            zoom={zoom}
-            onZoomChange={setZoom}
-            annotationCounts={annotationCounts}
-          />
+        <DocumentViewer
+          documentUrl={ws.documentUrl}
+          filePath={ws.student?.file_path}
+          ocrText={ws.student?.ocr_text}
+          zoom={ws.zoom}
+          currentPage={ws.currentPage}
+          totalPages={ws.totalPages}
+          annotations={ws.annotations}
+          selectedTool={ws.selectedTool}
+          selectedAnnotation={ws.selectedAnnotation}
+          annotationCounts={ws.annotationCounts}
+          onZoomChange={ws.setZoom}
+          onSelectTool={ws.setSelectedTool}
+          onCurrentPageChange={ws.setCurrentPage}
+          onCreateAnnotation={ws.createAnnotation}
+          onSelectAnnotation={(ann) => {
+            ws.setSelectedAnnotation(ann)
+            ws.setActiveTab('annotationen')
+          }}
+        />
 
-          {/* Document display with annotation overlay */}
-          <div className="flex-1 overflow-auto p-4 bg-slate-100">
-            {documentUrl ? (
-              <div
-                className="mx-auto bg-white shadow-lg relative"
-                style={{ transform: `scale(${zoom / 100})`, transformOrigin: 'top center' }}
-              >
-                {/* Document */}
-                {student?.file_path?.endsWith('.pdf') ? (
-                  <iframe
-                    src={documentUrl}
-                    className="w-full h-[800px] border-0"
-                    title="Studentenarbeit"
-                  />
-                ) : (
-                  <div className="relative">
-                    <img
-                      src={documentUrl}
-                      alt="Studentenarbeit"
-                      className="max-w-full"
-                      onError={(e) => {
-                        (e.target as HTMLImageElement).src = '/placeholder-document.png'
-                      }}
-                    />
-                    {/* Annotation Layer Overlay */}
-                    <AnnotationLayer
-                      annotations={annotations.filter((ann) => ann.page === currentPage)}
-                      selectedTool={selectedTool}
-                      onCreateAnnotation={createAnnotation}
-                      onSelectAnnotation={(ann) => {
-                        setSelectedAnnotation(ann)
-                        setActiveTab('annotationen')
-                      }}
-                      selectedAnnotationId={selectedAnnotation?.id}
-                    />
-                  </div>
-                )}
-              </div>
-            ) : (
-              <div className="flex items-center justify-center h-full text-slate-400">
-                Kein Dokument verfuegbar
-              </div>
-            )}
-          </div>
-
-          {/* Page navigation (for multi-page documents) */}
-          <div className="border-t border-slate-200 p-2 flex items-center justify-center gap-2 bg-slate-50">
-            <button
-              onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
-              disabled={currentPage <= 1}
-              className="p-1 rounded hover:bg-slate-200 disabled:opacity-50"
-            >
-              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-              </svg>
-            </button>
-            <span className="text-sm">
-              Seite {currentPage} / {totalPages}
-            </span>
-            <button
-              onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
-              disabled={currentPage >= totalPages}
-              className="p-1 rounded hover:bg-slate-200 disabled:opacity-50"
-            >
-              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-              </svg>
-            </button>
-          </div>
-
-          {/* OCR Text (collapsible) */}
-          {student?.ocr_text && (
-            <details className="border-t border-slate-200">
-              <summary className="p-3 bg-slate-50 cursor-pointer text-sm font-medium text-slate-600 hover:bg-slate-100">
-                OCR-Text anzeigen
-              </summary>
-              <div className="p-4 max-h-48 overflow-auto text-sm text-slate-700 bg-slate-50">
-                <pre className="whitespace-pre-wrap font-sans">{student.ocr_text}</pre>
-              </div>
-            </details>
-          )}
-        </div>
-
-        {/* Right: Correction Panel (1/3) */}
-        <div className="w-1/3 bg-white rounded-lg border border-slate-200 overflow-hidden flex flex-col">
-          {/* Tabs */}
-          <div className="border-b border-slate-200">
-            <nav className="flex">
-              {[
-                { id: 'kriterien' as const, label: 'Kriterien' },
-                { id: 'annotationen' as const, label: `Notizen (${annotations.length})` },
-                { id: 'gutachten' as const, label: 'Gutachten' },
-                { id: 'eh-vorschlaege' as const, label: 'EH' },
-              ].map(tab => (
-                <button
-                  key={tab.id}
-                  onClick={() => setActiveTab(tab.id)}
-                  className={`flex-1 px-2 py-3 text-xs font-medium border-b-2 transition-colors ${
-                    activeTab === tab.id
-                      ? 'border-primary-500 text-primary-600'
-                      : 'border-transparent text-slate-500 hover:text-slate-700'
-                  }`}
-                >
-                  {tab.label}
-                </button>
-              ))}
-            </nav>
-          </div>
-
-          {/* Tab content */}
-          <div className="flex-1 overflow-auto p-4">
-            {/* Kriterien Tab */}
-            {activeTab === 'kriterien' && gradeInfo && (
-              <div className="space-y-4">
-                {Object.entries(gradeInfo.criteria || {}).map(([key, criterion]) => {
-                  const score = criteriaScores[key] || 0
-                  const linkedAnnotations = annotations.filter(
-                    (a) => a.linked_criterion === key || a.type === key
-                  )
-                  const errorCount = linkedAnnotations.length
-                  const severityCounts = {
-                    minor: linkedAnnotations.filter((a) => a.severity === 'minor').length,
-                    major: linkedAnnotations.filter((a) => a.severity === 'major').length,
-                    critical: linkedAnnotations.filter((a) => a.severity === 'critical').length,
-                  }
-                  const criterionColor = ANNOTATION_COLORS[key as AnnotationType] || '#6b7280'
-
-                  return (
-                    <div key={key} className="bg-slate-50 rounded-lg p-4">
-                      <div className="flex justify-between items-center mb-2">
-                        <div className="flex items-center gap-2">
-                          <div
-                            className="w-3 h-3 rounded-full"
-                            style={{ backgroundColor: criterionColor }}
-                          />
-                          <span className="font-medium text-slate-800">{criterion.name}</span>
-                          <span className="text-xs text-slate-500">({criterion.weight}%)</span>
-                        </div>
-                        <div className="text-lg font-bold text-slate-800">{score}%</div>
-                      </div>
-
-                      {/* Annotation count for this criterion */}
-                      {errorCount > 0 && (
-                        <div className="flex items-center gap-2 mb-2 text-xs">
-                          <span className="text-slate-500">{errorCount} Markierungen:</span>
-                          {severityCounts.minor > 0 && (
-                            <span className="px-1.5 py-0.5 bg-yellow-100 text-yellow-700 rounded">
-                              {severityCounts.minor} leicht
-                            </span>
-                          )}
-                          {severityCounts.major > 0 && (
-                            <span className="px-1.5 py-0.5 bg-orange-100 text-orange-700 rounded">
-                              {severityCounts.major} mittel
-                            </span>
-                          )}
-                          {severityCounts.critical > 0 && (
-                            <span className="px-1.5 py-0.5 bg-red-100 text-red-700 rounded">
-                              {severityCounts.critical} schwer
-                            </span>
-                          )}
-                        </div>
-                      )}
-
-                      {/* Slider */}
-                      <input
-                        type="range"
-                        min="0"
-                        max="100"
-                        value={score}
-                        onChange={(e) => handleCriteriaChange(key, parseInt(e.target.value))}
-                        className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer"
-                        style={{ accentColor: criterionColor }}
-                      />
-
-                      {/* Quick buttons */}
-                      <div className="flex gap-1 mt-2">
-                        {[0, 25, 50, 75, 100].map((val) => (
-                          <button
-                            key={val}
-                            onClick={() => handleCriteriaChange(key, val)}
-                            className={`flex-1 py-1 text-xs rounded transition-colors ${
-                              score === val
-                                ? 'text-white'
-                                : 'bg-slate-200 text-slate-600 hover:bg-slate-300'
-                            }`}
-                            style={score === val ? { backgroundColor: criterionColor } : undefined}
-                          >
-                            {val}%
-                          </button>
-                        ))}
-                      </div>
-
-                      {/* Quick add annotation button for RS/Grammatik */}
-                      {(key === 'rechtschreibung' || key === 'grammatik') && (
-                        <button
-                          onClick={() => {
-                            setSelectedTool(key as AnnotationType)
-                          }}
-                          className="mt-2 w-full py-1 text-xs border rounded hover:bg-slate-100 flex items-center justify-center gap-1"
-                          style={{ borderColor: criterionColor, color: criterionColor }}
-                        >
-                          <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                              strokeWidth={2}
-                              d="M12 4v16m8-8H4"
-                            />
-                          </svg>
-                          {key === 'rechtschreibung' ? 'RS-Fehler' : 'Grammatik-Fehler'} markieren
-                        </button>
-                      )}
-                    </div>
-                  )
-                })}
-
-                {/* Total and Generate button */}
-                <div className="border-t border-slate-200 pt-4 mt-4">
-                  <div className="flex justify-between items-center mb-4">
-                    <span className="font-semibold text-slate-800">Gesamtergebnis</span>
-                    <div className="text-right">
-                      <div className="text-2xl font-bold text-primary-600">
-                        {totals.gradePoints} Punkte
-                      </div>
-                      <div className="text-sm text-slate-500">
-                        ({totals.weighted}%) - Note {GRADE_LABELS[totals.gradePoints]}
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Workflow-aware action buttons */}
-                  <div className="space-y-2">
-                    {/* Generate Gutachten button */}
-                    <button
-                      onClick={generateGutachten}
-                      disabled={generatingGutachten}
-                      className="w-full py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 disabled:opacity-50 flex items-center justify-center gap-2 text-sm"
-                    >
-                      {generatingGutachten ? (
-                        <>
-                          <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-slate-700"></div>
-                          Generiere Gutachten...
-                        </>
-                      ) : (
-                        <>
-                          <svg className="w-4 h-4" 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>
-                          Gutachten generieren
-                        </>
-                      )}
-                    </button>
-
-                    {/* Workflow action buttons based on status */}
-                    {(!workflow || workflow.workflow_status === 'not_started' || workflow.workflow_status === 'ek_in_progress') && (
-                      <button
-                        onClick={submitErstkorrektur}
-                        disabled={submittingWorkflow || !gutachten}
-                        className="w-full py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 flex items-center justify-center gap-2"
-                      >
-                        {submittingWorkflow ? (
-                          <>
-                            <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
-                            Wird abgeschlossen...
-                          </>
-                        ) : (
-                          <>
-                            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-                            </svg>
-                            Erstkorrektur abschliessen
-                          </>
-                        )}
-                      </button>
-                    )}
-
-                    {workflow?.workflow_status === 'ek_completed' && workflow.user_role === 'ek' && (
-                      <button
-                        onClick={() => {
-                          const zkId = prompt('Zweitkorrektor-ID eingeben:')
-                          if (zkId) startZweitkorrektur(zkId)
-                        }}
-                        disabled={submittingWorkflow}
-                        className="w-full py-3 bg-amber-600 text-white rounded-lg hover:bg-amber-700 disabled:opacity-50 flex items-center justify-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="M17 8l4 4m0 0l-4 4m4-4H3" />
-                        </svg>
-                        Zur Zweitkorrektur weiterleiten
-                      </button>
-                    )}
-
-                    {(workflow?.workflow_status === 'zk_assigned' || workflow?.workflow_status === 'zk_in_progress') &&
-                      workflow?.user_role === 'zk' && (
-                        <button
-                          onClick={submitZweitkorrektur}
-                          disabled={submittingWorkflow || !gutachten}
-                          className="w-full py-3 bg-amber-600 text-white rounded-lg hover:bg-amber-700 disabled:opacity-50 flex items-center justify-center gap-2"
-                        >
-                          {submittingWorkflow ? (
-                            <>
-                              <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
-                              Wird abgeschlossen...
-                            </>
-                          ) : (
-                            <>
-                              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-                              </svg>
-                              Zweitkorrektur abschliessen
-                            </>
-                          )}
-                        </button>
-                      )}
-
-                    {workflow?.workflow_status === 'einigung_required' && (
-                      <button
-                        onClick={() => setShowEinigungModal(true)}
-                        className="w-full py-3 bg-orange-600 text-white rounded-lg hover:bg-orange-700 flex items-center justify-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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
-                        </svg>
-                        Einigung starten
-                      </button>
-                    )}
-
-                    {workflow?.workflow_status === 'completed' && (
-                      <div className="bg-green-100 text-green-800 p-4 rounded-lg text-center">
-                        <div className="text-2xl font-bold">
-                          Endnote: {workflow.final_grade} Punkte
-                        </div>
-                        <div className="text-sm mt-1">
-                          ({GRADE_LABELS[workflow.final_grade || 0]}) - {workflow.consensus_type === 'auto' ? 'Auto-Konsens' : workflow.consensus_type === 'drittkorrektur' ? 'Drittkorrektur' : 'Einigung'}
-                        </div>
-                      </div>
-                    )}
-
-                    {/* Show EK/ZK comparison when both results exist */}
-                    {workflow?.first_result && workflow?.second_result && workflow?.workflow_status !== 'completed' && (
-                      <div className="bg-slate-50 rounded-lg p-3 mt-2">
-                        <div className="text-xs text-slate-500 mb-2">Notenvergleich</div>
-                        <div className="flex justify-between">
-                          <div className="text-center">
-                            <div className="text-sm text-slate-500">EK</div>
-                            <div className="font-bold text-blue-600">{workflow.first_result.grade_points}P</div>
-                          </div>
-                          <div className="text-center">
-                            <div className="text-sm text-slate-500">ZK</div>
-                            <div className="font-bold text-amber-600">{workflow.second_result.grade_points}P</div>
-                          </div>
-                          <div className="text-center">
-                            <div className="text-sm text-slate-500">Diff</div>
-                            <div className={`font-bold ${(workflow.grade_difference || 0) >= 4 ? 'text-red-600' : 'text-slate-700'}`}>
-                              {workflow.grade_difference}P
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </div>
-            )}
-
-            {/* Annotationen Tab */}
-            {activeTab === 'annotationen' && (
-              <div className="h-full -m-4">
-                <AnnotationPanel
-                  annotations={annotations}
-                  selectedAnnotation={selectedAnnotation}
-                  onSelectAnnotation={setSelectedAnnotation}
-                  onUpdateAnnotation={updateAnnotation}
-                  onDeleteAnnotation={deleteAnnotation}
-                />
-              </div>
-            )}
-
-            {/* Gutachten Tab */}
-            {activeTab === 'gutachten' && (
-              <div className="h-full flex flex-col">
-                <textarea
-                  value={gutachten}
-                  onChange={(e) => setGutachten(e.target.value)}
-                  placeholder="Gutachten hier eingeben oder generieren lassen..."
-                  className="flex-1 w-full p-3 border border-slate-300 rounded-lg resize-none focus:ring-2 focus:ring-primary-500 focus:border-transparent text-sm"
-                />
-                <div className="flex gap-2 mt-4">
-                  <button
-                    onClick={generateGutachten}
-                    disabled={generatingGutachten}
-                    className="flex-1 py-2 border border-primary-600 text-primary-600 rounded-lg hover:bg-primary-50 disabled:opacity-50"
-                  >
-                    {generatingGutachten ? 'Generiere...' : 'Neu generieren'}
-                  </button>
-                  <button
-                    onClick={saveGutachten}
-                    disabled={saving}
-                    className="flex-1 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50"
-                  >
-                    {saving ? 'Speichern...' : 'Speichern'}
-                  </button>
-                </div>
-
-                {/* PDF Export */}
-                {gutachten && (
-                  <div className="flex gap-2 mt-2 pt-2 border-t border-slate-200">
-                    <button
-                      onClick={exportGutachtenPDF}
-                      disabled={exporting}
-                      className="flex-1 py-2 border border-slate-300 text-slate-600 rounded-lg hover:bg-slate-50 disabled:opacity-50 flex items-center justify-center gap-2 text-sm"
-                    >
-                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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>
-                      {exporting ? 'Exportiere...' : 'Als PDF exportieren'}
-                    </button>
-                  </div>
-                )}
-              </div>
-            )}
-
-            {/* EH-Vorschlaege Tab */}
-            {activeTab === 'eh-vorschlaege' && (
-              <div className="h-full -m-4">
-                <EHSuggestionPanel
-                  studentId={studentId}
-                  klausurId={klausurId}
-                  hasEH={!!klausur?.eh_id || true} // Allow fetching even without linked EH (tenant-wide search)
-                  apiBase={API_BASE}
-                  onInsertSuggestion={(text, criterion) => {
-                    // Append suggestion to gutachten
-                    setGutachten((prev) =>
-                      prev
-                        ? `${prev}\n\n[${criterion.toUpperCase()}]: ${text}`
-                        : `[${criterion.toUpperCase()}]: ${text}`
-                    )
-                    setActiveTab('gutachten')
-                  }}
-                />
-              </div>
-            )}
-          </div>
-        </div>
+        <CorrectionPanel
+          klausur={ws.klausur}
+          klausurId={klausurId}
+          studentId={studentId}
+          annotations={ws.annotations}
+          gradeInfo={ws.gradeInfo}
+          criteriaScores={ws.criteriaScores}
+          gutachten={ws.gutachten}
+          workflow={ws.workflow}
+          totals={ws.totals}
+          selectedAnnotation={ws.selectedAnnotation}
+          activeTab={ws.activeTab}
+          generatingGutachten={ws.generatingGutachten}
+          saving={ws.saving}
+          exporting={ws.exporting}
+          submittingWorkflow={ws.submittingWorkflow}
+          onSetActiveTab={ws.setActiveTab}
+          onCriteriaChange={ws.handleCriteriaChange}
+          onSelectTool={ws.setSelectedTool}
+          onSelectAnnotation={ws.setSelectedAnnotation}
+          onUpdateAnnotation={ws.updateAnnotation}
+          onDeleteAnnotation={ws.deleteAnnotation}
+          onSetGutachten={ws.setGutachten}
+          onGenerateGutachten={ws.generateGutachten}
+          onSaveGutachten={ws.saveGutachten}
+          onExportGutachtenPDF={ws.exportGutachtenPDF}
+          onSubmitErstkorrektur={ws.submitErstkorrektur}
+          onStartZweitkorrektur={ws.startZweitkorrektur}
+          onSubmitZweitkorrektur={ws.submitZweitkorrektur}
+          onOpenEinigung={() => ws.setShowEinigungModal(true)}
+        />
       </div>
     </div>
   )
diff --git a/admin-lehrer/app/(admin)/education/klausur-korrektur/_components/DirektuploadTab.tsx b/admin-lehrer/app/(admin)/education/klausur-korrektur/_components/DirektuploadTab.tsx
new file mode 100644
index 0000000..b3d78a9
--- /dev/null
+++ b/admin-lehrer/app/(admin)/education/klausur-korrektur/_components/DirektuploadTab.tsx
@@ -0,0 +1,337 @@
+'use client'
+
+/**
+ * DirektuploadTab - 3-step direct upload wizard
+ */
+
+import type { TabId } from './constants'
+import type { DirektuploadForm } from './types'
+
+interface DirektuploadTabProps {
+  direktForm: DirektuploadForm
+  setDirektForm: React.Dispatch<React.SetStateAction<DirektuploadForm>>
+  direktStep: 1 | 2 | 3
+  setDirektStep: React.Dispatch<React.SetStateAction<1 | 2 | 3>>
+  uploading: boolean
+  onUpload: () => void
+  onNavigate: (tab: TabId) => void
+}
+
+export function DirektuploadTab({
+  direktForm,
+  setDirektForm,
+  direktStep,
+  setDirektStep,
+  uploading,
+  onUpload,
+  onNavigate,
+}: DirektuploadTabProps) {
+  return (
+    <div className="max-w-3xl mx-auto">
+      <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
+        <StepHeader
+          currentStep={direktStep}
+          onCancel={() => onNavigate('willkommen')}
+        />
+
+        <div className="p-6">
+          {direktStep === 1 && (
+            <FileUploadStep
+              files={direktForm.files}
+              onFilesChange={(files) => setDirektForm(prev => ({ ...prev, files }))}
+              onNext={() => setDirektStep(2)}
+            />
+          )}
+          {direktStep === 2 && (
+            <EHStep
+              aufgabentyp={direktForm.aufgabentyp}
+              ehText={direktForm.ehText}
+              onAufgabentypChange={(v) => setDirektForm(prev => ({ ...prev, aufgabentyp: v }))}
+              onEhTextChange={(v) => setDirektForm(prev => ({ ...prev, ehText: v }))}
+              onBack={() => setDirektStep(1)}
+              onNext={() => setDirektStep(3)}
+            />
+          )}
+          {direktStep === 3 && (
+            <SummaryStep
+              direktForm={direktForm}
+              setDirektForm={setDirektForm}
+              uploading={uploading}
+              onBack={() => setDirektStep(2)}
+              onUpload={onUpload}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function StepHeader({ currentStep, onCancel }: { currentStep: number; onCancel: () => void }) {
+  return (
+    <div className="bg-slate-50 border-b border-slate-200 px-6 py-4">
+      <div className="flex items-center justify-between mb-2">
+        <h2 className="text-lg font-semibold text-slate-800">Schnellstart - Direkt Korrigieren</h2>
+        <button onClick={onCancel} className="text-sm text-slate-500 hover:text-slate-700">
+          Abbrechen
+        </button>
+      </div>
+      <div className="flex items-center gap-2">
+        {[1, 2, 3].map((step) => (
+          <div key={step} className="flex items-center gap-2 flex-1">
+            <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium ${
+              currentStep >= step ? 'bg-blue-600 text-white' : 'bg-slate-200 text-slate-500'
+            }`}>
+              {step}
+            </div>
+            <span className={`text-sm ${currentStep >= step ? 'text-slate-800' : 'text-slate-400'}`}>
+              {step === 1 ? 'Arbeiten' : step === 2 ? 'Erwartungshorizont' : 'Starten'}
+            </span>
+            {step < 3 && <div className={`flex-1 h-1 rounded ${currentStep > step ? 'bg-blue-600' : 'bg-slate-200'}`} />}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function FileUploadStep({
+  files,
+  onFilesChange,
+  onNext,
+}: {
+  files: File[]
+  onFilesChange: (files: File[]) => void
+  onNext: () => void
+}) {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h3 className="font-medium text-slate-800 mb-2">Schuelerarbeiten hochladen</h3>
+        <p className="text-sm text-slate-500 mb-4">
+          Laden Sie die eingescannten Klausuren hoch. Unterstuetzte Formate: PDF, JPG, PNG.
+        </p>
+
+        <div
+          className={`border-2 border-dashed rounded-xl p-8 text-center transition-colors ${
+            files.length > 0 ? 'border-green-300 bg-green-50' : 'border-slate-300 hover:border-blue-400 hover:bg-blue-50'
+          }`}
+          onDrop={(e) => {
+            e.preventDefault()
+            const dropped = Array.from(e.dataTransfer.files)
+            onFilesChange([...files, ...dropped])
+          }}
+          onDragOver={(e) => e.preventDefault()}
+        >
+          <svg className="w-12 h-12 mx-auto text-slate-400 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
+          </svg>
+          <p className="text-slate-600 mb-2">Dateien hier ablegen oder</p>
+          <label className="inline-block px-4 py-2 bg-blue-600 text-white rounded-lg cursor-pointer hover:bg-blue-700">
+            Dateien auswaehlen
+            <input
+              type="file"
+              multiple
+              accept=".pdf,.jpg,.jpeg,.png"
+              className="hidden"
+              onChange={(e) => {
+                const selected = Array.from(e.target.files || [])
+                onFilesChange([...files, ...selected])
+              }}
+            />
+          </label>
+        </div>
+
+        {files.length > 0 && (
+          <div className="mt-4 space-y-2">
+            <div className="flex items-center justify-between text-sm text-slate-600">
+              <span>{files.length} Datei{files.length !== 1 ? 'en' : ''} ausgewaehlt</span>
+              <button
+                onClick={() => onFilesChange([])}
+                className="text-red-600 hover:text-red-700"
+              >
+                Alle entfernen
+              </button>
+            </div>
+            <div className="max-h-40 overflow-y-auto space-y-1">
+              {files.map((file, idx) => (
+                <div key={idx} className="flex items-center justify-between bg-slate-50 px-3 py-2 rounded-lg text-sm">
+                  <span className="truncate">{file.name}</span>
+                  <button
+                    onClick={() => onFilesChange(files.filter((_, i) => i !== idx))}
+                    className="text-slate-400 hover:text-red-600"
+                  >
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                  </button>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className="flex justify-end">
+        <button
+          onClick={onNext}
+          disabled={files.length === 0}
+          className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          Weiter
+        </button>
+      </div>
+    </div>
+  )
+}
+
+function EHStep({
+  aufgabentyp,
+  ehText,
+  onAufgabentypChange,
+  onEhTextChange,
+  onBack,
+  onNext,
+}: {
+  aufgabentyp: string
+  ehText: string
+  onAufgabentypChange: (v: string) => void
+  onEhTextChange: (v: string) => void
+  onBack: () => void
+  onNext: () => void
+}) {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h3 className="font-medium text-slate-800 mb-2">Erwartungshorizont (optional)</h3>
+        <p className="text-sm text-slate-500 mb-4">
+          Beschreiben Sie die Aufgabenstellung fuer bessere KI-Vorschlaege.
+        </p>
+
+        <div className="mb-4">
+          <label className="block text-sm font-medium text-slate-700 mb-1">Aufgabentyp</label>
+          <select
+            value={aufgabentyp}
+            onChange={(e) => onAufgabentypChange(e.target.value)}
+            className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          >
+            <option value="">-- Waehlen Sie einen Aufgabentyp --</option>
+            <option value="textanalyse_pragmatisch">Textanalyse (Sachtexte)</option>
+            <option value="gedichtanalyse">Gedichtanalyse</option>
+            <option value="prosaanalyse">Prosaanalyse</option>
+            <option value="dramenanalyse">Dramenanalyse</option>
+            <option value="eroerterung_textgebunden">Textgebundene Eroerterung</option>
+          </select>
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-1">
+            Aufgabenstellung / Erwartungshorizont
+          </label>
+          <textarea
+            value={ehText}
+            onChange={(e) => onEhTextChange(e.target.value)}
+            placeholder="Beschreiben Sie hier die Aufgabenstellung..."
+            rows={6}
+            className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
+          />
+        </div>
+      </div>
+
+      <div className="flex justify-between">
+        <button onClick={onBack} className="px-6 py-2 text-slate-600 hover:bg-slate-100 rounded-lg">
+          Zurueck
+        </button>
+        <button onClick={onNext} className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
+          Weiter
+        </button>
+      </div>
+    </div>
+  )
+}
+
+function SummaryStep({
+  direktForm,
+  setDirektForm,
+  uploading,
+  onBack,
+  onUpload,
+}: {
+  direktForm: DirektuploadForm
+  setDirektForm: React.Dispatch<React.SetStateAction<DirektuploadForm>>
+  uploading: boolean
+  onBack: () => void
+  onUpload: () => void
+}) {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h3 className="font-medium text-slate-800 mb-2">Zusammenfassung</h3>
+
+        <div className="bg-slate-50 rounded-lg p-4 space-y-3">
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-slate-600">Titel</span>
+            <input
+              type="text"
+              value={direktForm.klausurTitle}
+              onChange={(e) => setDirektForm(prev => ({ ...prev, klausurTitle: e.target.value }))}
+              className="text-sm font-medium text-slate-800 bg-white border border-slate-200 rounded px-2 py-1 text-right"
+            />
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-slate-600">Anzahl Arbeiten</span>
+            <span className="text-sm font-medium text-slate-800">{direktForm.files.length}</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-slate-600">Aufgabentyp</span>
+            <span className="text-sm font-medium text-slate-800">
+              {direktForm.aufgabentyp || 'Nicht angegeben'}
+            </span>
+          </div>
+        </div>
+
+        <div className="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
+          <div className="flex items-start gap-3">
+            <svg className="w-5 h-5 text-blue-600 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            <div className="text-sm text-blue-800">
+              <p className="font-medium">Was passiert jetzt?</p>
+              <ol className="list-decimal list-inside mt-1 space-y-1 text-blue-700">
+                <li>Eine neue Klausur wird automatisch erstellt</li>
+                <li>Alle {direktForm.files.length} Arbeiten werden hochgeladen</li>
+                <li>OCR-Erkennung startet automatisch</li>
+                <li>Sie werden zur Korrektur-Ansicht weitergeleitet</li>
+              </ol>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex justify-between">
+        <button onClick={onBack} className="px-6 py-2 text-slate-600 hover:bg-slate-100 rounded-lg">
+          Zurueck
+        </button>
+        <button
+          onClick={onUpload}
+          disabled={uploading}
+          className="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+        >
+          {uploading ? (
+            <>
+              <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+              Wird hochgeladen...
+            </>
+          ) : (
+            <>
+              <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>
+              Korrektur starten
+            </>
+          )}
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/education/klausur-korrektur/_components/ErstellenTab.tsx b/admin-lehrer/app/(admin)/education/klausur-korrektur/_components/ErstellenTab.tsx
new file mode 100644
index 0000000..6330696
--- /dev/null
+++ b/admin-lehrer/app/(admin)/education/klausur-korrektur/_components/ErstellenTab.tsx
@@ -0,0 +1,227 @@
+'use client'
+
+/**
+ * ErstellenTab - Form to create a new Klausur
+ */
+
+import type { TabId } from './constants'
+import type { CreateKlausurForm, VorabiturEHForm, EHTemplate } from './types'
+
+interface ErstellenTabProps {
+  form: CreateKlausurForm
+  setForm: React.Dispatch<React.SetStateAction<CreateKlausurForm>>
+  ehForm: VorabiturEHForm
+  setEhForm: React.Dispatch<React.SetStateAction<VorabiturEHForm>>
+  templates: EHTemplate[]
+  loadingTemplates: boolean
+  creating: boolean
+  onSubmit: (e: React.FormEvent) => void
+  onNavigate: (tab: TabId) => void
+}
+
+export function ErstellenTab({
+  form,
+  setForm,
+  ehForm,
+  setEhForm,
+  templates,
+  loadingTemplates,
+  creating,
+  onSubmit,
+  onNavigate,
+}: ErstellenTabProps) {
+  return (
+    <div className="max-w-2xl mx-auto">
+      <div className="bg-white rounded-lg border border-slate-200 shadow-sm p-6">
+        <h2 className="text-lg font-semibold text-slate-800 mb-6">Neue Klausur erstellen</h2>
+
+        <form onSubmit={onSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">
+              Titel der Klausur *
+            </label>
+            <input
+              type="text"
+              value={form.title}
+              onChange={(e) => setForm(prev => ({ ...prev, title: e.target.value }))}
+              placeholder="z.B. Deutsch LK Abitur 2025 - Kurs D1"
+              className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+              required
+            />
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">Fach</label>
+              <select
+                value={form.subject}
+                onChange={(e) => setForm(prev => ({ ...prev, subject: e.target.value }))}
+                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+              >
+                <option value="Deutsch">Deutsch</option>
+                <option value="Englisch">Englisch</option>
+                <option value="Mathematik">Mathematik</option>
+                <option value="Geschichte">Geschichte</option>
+                <option value="Biologie">Biologie</option>
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">Jahr</label>
+              <input
+                type="number"
+                value={form.year}
+                onChange={(e) => setForm(prev => ({ ...prev, year: parseInt(e.target.value) }))}
+                min={2020}
+                max={2030}
+                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+              />
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">Semester / Pruefung</label>
+              <select
+                value={form.semester}
+                onChange={(e) => setForm(prev => ({ ...prev, semester: e.target.value }))}
+                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+              >
+                <option value="Abitur">Abitur</option>
+                <option value="Q1">Q1 (11/1)</option>
+                <option value="Q2">Q2 (11/2)</option>
+                <option value="Q3">Q3 (12/1)</option>
+                <option value="Q4">Q4 (12/2)</option>
+                <option value="Vorabitur">Vorabitur</option>
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">Modus</label>
+              <select
+                value={form.modus}
+                onChange={(e) => setForm(prev => ({ ...prev, modus: e.target.value as 'abitur' | 'vorabitur' }))}
+                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+              >
+                <option value="abitur">Abitur (mit offiziellem EH)</option>
+                <option value="vorabitur">Vorabitur (eigener EH)</option>
+              </select>
+            </div>
+          </div>
+
+          {form.modus === 'vorabitur' && (
+            <VorabiturEHSection
+              ehForm={ehForm}
+              setEhForm={setEhForm}
+              templates={templates}
+              loadingTemplates={loadingTemplates}
+            />
+          )}
+
+          <div className="flex gap-3 pt-4">
+            <button
+              type="button"
+              onClick={() => onNavigate('klausuren')}
+              className="px-4 py-2 text-slate-600 hover:bg-slate-100 rounded-lg"
+            >
+              Abbrechen
+            </button>
+            <button
+              type="submit"
+              disabled={creating}
+              className="flex-1 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+            >
+              {creating ? (
+                <>
+                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+                  Erstelle...
+                </>
+              ) : (
+                'Klausur erstellen'
+              )}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+function VorabiturEHSection({
+  ehForm,
+  setEhForm,
+  templates,
+  loadingTemplates,
+}: {
+  ehForm: VorabiturEHForm
+  setEhForm: React.Dispatch<React.SetStateAction<VorabiturEHForm>>
+  templates: EHTemplate[]
+  loadingTemplates: boolean
+}) {
+  return (
+    <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg space-y-4">
+      <div className="flex items-start gap-3">
+        <svg className="w-5 h-5 text-blue-600 mt-0.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>
+        <div className="text-sm text-blue-800">
+          <p className="font-medium mb-1">Eigenen Erwartungshorizont erstellen</p>
+          <p>Waehlen Sie einen Aufgabentyp und beschreiben Sie die Aufgabenstellung.</p>
+        </div>
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-slate-700 mb-1">Aufgabentyp *</label>
+        {loadingTemplates ? (
+          <div className="flex items-center gap-2 text-sm text-slate-500">
+            <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-600"></div>
+            Lade Vorlagen...
+          </div>
+        ) : (
+          <select
+            value={ehForm.aufgabentyp}
+            onChange={(e) => setEhForm(prev => ({ ...prev, aufgabentyp: e.target.value }))}
+            className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent bg-white"
+          >
+            <option value="">-- Aufgabentyp waehlen --</option>
+            {templates.map(t => (
+              <option key={t.aufgabentyp} value={t.aufgabentyp}>{t.name}</option>
+            ))}
+          </select>
+        )}
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-1">Texttitel (optional)</label>
+          <input
+            type="text"
+            value={ehForm.text_titel}
+            onChange={(e) => setEhForm(prev => ({ ...prev, text_titel: e.target.value }))}
+            placeholder="z.B. 'Die Verwandlung'"
+            className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-1">Autor (optional)</label>
+          <input
+            type="text"
+            value={ehForm.text_autor}
+            onChange={(e) => setEhForm(prev => ({ ...prev, text_autor: e.target.value }))}
+            placeholder="z.B. 'Franz Kafka'"
+            className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+          />
+        </div>
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-slate-700 mb-1">Aufgabenstellung *</label>
+        <textarea
+          value={ehForm.aufgabenstellung}
+          onChange={(e) => setEhForm(prev => ({ ...prev, aufgabenstellung: e.target.value }))}
+          placeholder="Beschreiben Sie hier die konkrete Aufgabenstellung..."
+          rows={4}
+          className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent resize-none"
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/education/klausur-korrektur/_components/KlausurenTab.tsx b/admin-lehrer/app/(admin)/education/klausur-korrektur/_components/KlausurenTab.tsx
new file mode 100644
index 0000000..3bbfc34
--- /dev/null
+++ b/admin-lehrer/app/(admin)/education/klausur-korrektur/_components/KlausurenTab.tsx
@@ -0,0 +1,138 @@
+'use client'
+
+/**
+ * KlausurenTab - List of all Klausuren with progress and actions
+ */
+
+import Link from 'next/link'
+import type { Klausur } from '../types'
+import type { TabId } from './constants'
+
+interface KlausurenTabProps {
+  klausuren: Klausur[]
+  loading: boolean
+  onDelete: (id: string) => void
+  onNavigate: (tab: TabId) => void
+}
+
+export function KlausurenTab({ klausuren, loading, onDelete, onNavigate }: KlausurenTabProps) {
+  return (
+    <div className="space-y-4">
+      <div className="flex justify-between items-center">
+        <div>
+          <h2 className="text-lg font-semibold text-slate-800">Alle Klausuren</h2>
+          <p className="text-sm text-slate-500">{klausuren.length} Klausuren insgesamt</p>
+        </div>
+        <button
+          onClick={() => onNavigate('erstellen')}
+          className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-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 4v16m8-8H4" />
+          </svg>
+          Neue Klausur
+        </button>
+      </div>
+
+      {loading ? (
+        <div className="flex items-center justify-center h-64">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600"></div>
+        </div>
+      ) : klausuren.length === 0 ? (
+        <div className="text-center py-12 bg-white rounded-lg border border-slate-200">
+          <svg className="mx-auto h-12 w-12 text-slate-400" 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>
+          <h3 className="mt-2 text-sm font-medium text-slate-900">Keine Klausuren</h3>
+          <p className="mt-1 text-sm text-slate-500">Erstellen Sie Ihre erste Klausur zum Korrigieren.</p>
+          <button
+            onClick={() => onNavigate('erstellen')}
+            className="mt-4 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
+          >
+            Klausur erstellen
+          </button>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {klausuren.map((klausur) => (
+            <KlausurCard key={klausur.id} klausur={klausur} onDelete={onDelete} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function KlausurCard({ klausur, onDelete }: { klausur: Klausur; onDelete: (id: string) => void }) {
+  const progressPct = (klausur.student_count || 0) > 0
+    ? ((klausur.completed_count || 0) / (klausur.student_count || 1)) * 100
+    : 0
+
+  return (
+    <div className="bg-white rounded-lg border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
+      <div className="p-4">
+        <div className="flex justify-between items-start mb-3">
+          <div>
+            <h3 className="font-semibold text-slate-800 truncate">{klausur.title}</h3>
+            <p className="text-sm text-slate-500">{klausur.subject} - {klausur.year}</p>
+          </div>
+          <span className={`px-2 py-1 text-xs font-medium rounded-full ${
+            klausur.modus === 'abitur'
+              ? 'bg-purple-100 text-purple-800'
+              : 'bg-blue-100 text-blue-800'
+          }`}>
+            {klausur.modus === 'abitur' ? 'Abitur' : 'Vorabitur'}
+          </span>
+        </div>
+
+        <div className="flex items-center gap-4 text-sm text-slate-600 mb-4">
+          <div className="flex items-center gap-1">
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
+            </svg>
+            <span>{klausur.student_count || 0} Arbeiten</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            <span>{klausur.completed_count || 0} fertig</span>
+          </div>
+        </div>
+
+        {(klausur.student_count || 0) > 0 && (
+          <div className="mb-4">
+            <div className="flex justify-between text-xs text-slate-500 mb-1">
+              <span>Fortschritt</span>
+              <span>{Math.round(progressPct)}%</span>
+            </div>
+            <div className="h-2 bg-slate-100 rounded-full overflow-hidden">
+              <div
+                className="h-full bg-green-500 rounded-full transition-all"
+                style={{ width: `${progressPct}%` }}
+              />
+            </div>
+          </div>
+        )}
+
+        <div className="flex gap-2">
+          <Link
+            href={`/education/klausur-korrektur/${klausur.id}`}
+            className="flex-1 px-3 py-2 bg-purple-600 text-white text-sm text-center rounded-lg hover:bg-purple-700"
+          >
+            Korrigieren
+          </Link>
+          <button
+            onClick={() => onDelete(klausur.id)}
+            className="px-3 py-2 text-red-600 hover:bg-red-50 rounded-lg"
+            title="Loeschen"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/education/klausur-korrektur/_components/StatistikenTab.tsx b/admin-lehrer/app/(admin)/education/klausur-korrektur/_components/StatistikenTab.tsx
new file mode 100644
index 0000000..8ab5fdc
--- /dev/null
+++ b/admin-lehrer/app/(admin)/education/klausur-korrektur/_components/StatistikenTab.tsx
@@ -0,0 +1,62 @@
+'use client'
+
+/**
+ * StatistikenTab - Correction statistics overview
+ */
+
+import type { Klausur, GradeInfo } from '../types'
+
+interface StatistikenTabProps {
+  klausuren: Klausur[]
+  gradeInfo: GradeInfo | null
+}
+
+export function StatistikenTab({ klausuren, gradeInfo }: StatistikenTabProps) {
+  const totalStudents = klausuren.reduce((sum, k) => sum + (k.student_count || 0), 0)
+  const totalCompleted = klausuren.reduce((sum, k) => sum + (k.completed_count || 0), 0)
+  const totalPending = totalStudents - totalCompleted
+
+  return (
+    <div className="space-y-6">
+      <h2 className="text-lg font-semibold text-slate-800">Korrektur-Statistiken</h2>
+
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+        <StatCard value={klausuren.length} label="Klausuren" />
+        <StatCard value={totalStudents} label="Studentenarbeiten" />
+        <StatCard value={totalCompleted} label="Abgeschlossen" className="text-green-600" />
+        <StatCard value={totalPending} label="Ausstehend" className="text-orange-600" />
+      </div>
+
+      {gradeInfo && (
+        <div className="bg-white rounded-lg border border-slate-200 p-6">
+          <h3 className="text-sm font-semibold text-slate-800 mb-4">Bewertungskriterien (Niedersachsen)</h3>
+          <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
+            {Object.entries(gradeInfo.criteria || {}).map(([key, criterion]) => (
+              <div key={key} className="text-center p-3 bg-slate-50 rounded-lg">
+                <div className="text-lg font-semibold text-slate-700">{criterion.weight}%</div>
+                <div className="text-sm text-slate-500">{criterion.name}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function StatCard({
+  value,
+  label,
+  className,
+}: {
+  value: number
+  label: string
+  className?: string
+}) {
+  return (
+    <div className="bg-white rounded-lg border border-slate-200 p-4">
+      <div className={`text-2xl font-bold ${className || 'text-slate-800'}`}>{value}</div>
+      <div className="text-sm text-slate-500">{label}</div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/education/klausur-korrektur/_components/WillkommenTab.tsx b/admin-lehrer/app/(admin)/education/klausur-korrektur/_components/WillkommenTab.tsx
new file mode 100644
index 0000000..22c4c69
--- /dev/null
+++ b/admin-lehrer/app/(admin)/education/klausur-korrektur/_components/WillkommenTab.tsx
@@ -0,0 +1,132 @@
+'use client'
+
+/**
+ * WillkommenTab - Welcome page with onboarding options
+ */
+
+import type { Klausur } from '../types'
+import type { TabId } from './constants'
+
+interface WillkommenTabProps {
+  klausuren: Klausur[]
+  onNavigate: (tab: TabId) => void
+  markAsVisited: () => void
+}
+
+export function WillkommenTab({ klausuren, onNavigate, markAsVisited }: WillkommenTabProps) {
+  return (
+    <div className="max-w-4xl mx-auto space-y-8">
+      <div className="text-center py-8">
+        <div className="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-purple-500 to-purple-700 rounded-2xl mb-6">
+          <svg className="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+        </div>
+        <h1 className="text-3xl font-bold text-slate-800 mb-3">Willkommen zur Abiturklausur-Korrektur</h1>
+        <p className="text-lg text-slate-600 max-w-2xl mx-auto">
+          KI-gestuetzte Korrektur fuer Deutsch-Abiturklausuren nach dem 15-Punkte-System.
+          Sparen Sie bis zu 80% Zeit bei der Erstkorrektur.
+        </p>
+      </div>
+
+      <HowItWorksSection />
+
+      <div className="grid md:grid-cols-2 gap-6">
+        <div
+          className="bg-white border-2 border-slate-200 rounded-xl p-6 hover:border-purple-300 hover:shadow-lg transition-all cursor-pointer"
+          onClick={() => { markAsVisited(); onNavigate('erstellen'); }}
+        >
+          <div className="flex items-start gap-4">
+            <div className="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center flex-shrink-0">
+              <svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+              </svg>
+            </div>
+            <div className="flex-1">
+              <h3 className="font-semibold text-slate-800 mb-1">Neue Klausur erstellen</h3>
+              <p className="text-sm text-slate-600 mb-3">
+                Empfohlen fuer regelmaessige Nutzung. Erstellen Sie eine Klausur mit allen Metadaten.
+              </p>
+              <div className="mt-4 text-sm text-purple-600 font-medium flex items-center gap-1">
+                Klausur erstellen
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div
+          className="bg-white border-2 border-slate-200 rounded-xl p-6 hover:border-blue-300 hover:shadow-lg transition-all cursor-pointer"
+          onClick={() => { markAsVisited(); onNavigate('direktupload'); }}
+        >
+          <div className="flex items-start gap-4">
+            <div className="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center flex-shrink-0">
+              <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
+              </svg>
+            </div>
+            <div className="flex-1">
+              <h3 className="font-semibold text-slate-800 mb-1">Schnellstart - Direkt hochladen</h3>
+              <p className="text-sm text-slate-600 mb-3">
+                Ideal wenn Sie sofort loslegen moechten. Drag & Drop Upload.
+              </p>
+              <div className="mt-4 text-sm text-blue-600 font-medium flex items-center gap-1">
+                Schnellstart
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {klausuren.length > 0 && (
+        <div className="bg-slate-50 border border-slate-200 rounded-xl p-4 flex items-center justify-between">
+          <div>
+            <p className="font-medium text-slate-800">Sie haben {klausuren.length} Klausur{klausuren.length !== 1 ? 'en' : ''}</p>
+            <p className="text-sm text-slate-500">Setzen Sie Ihre Arbeit fort oder starten Sie eine neue Korrektur.</p>
+          </div>
+          <button
+            onClick={() => { markAsVisited(); onNavigate('klausuren'); }}
+            className="px-4 py-2 bg-slate-800 text-white rounded-lg hover:bg-slate-700 text-sm"
+          >
+            Zu meinen Klausuren
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function HowItWorksSection() {
+  const steps = [
+    { step: 1, title: 'Arbeiten hochladen', desc: 'Scans der Schuelerarbeiten hochladen', emoji: '📤' },
+    { step: 2, title: 'EH bereitstellen', desc: 'Erwartungshorizont hochladen oder erstellen', emoji: '📋' },
+    { step: 3, title: 'KI korrigiert', desc: 'Automatische Bewertung erhalten', emoji: '🤖' },
+    { step: 4, title: 'Pruefen & Anpassen', desc: 'Vorschlaege pruefen und finalisieren', emoji: '✅' },
+  ]
+
+  return (
+    <div className="bg-gradient-to-r from-blue-50 to-purple-50 border border-blue-200 rounded-xl p-6">
+      <h2 className="text-lg font-semibold text-slate-800 mb-4 flex items-center gap-2">
+        <svg className="w-5 h-5 text-blue-600" 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>
+        So funktioniert es
+      </h2>
+      <div className="grid md:grid-cols-4 gap-4">
+        {steps.map(({ step, title, desc, emoji }) => (
+          <div key={step} className="text-center">
+            <div className="text-3xl mb-2">{emoji}</div>
+            <div className="text-xs text-blue-600 font-medium mb-1">Schritt {step}</div>
+            <div className="font-medium text-slate-800 text-sm">{title}</div>
+            <div className="text-xs text-slate-500 mt-1">{desc}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/education/klausur-korrektur/_components/constants.tsx b/admin-lehrer/app/(admin)/education/klausur-korrektur/_components/constants.tsx
new file mode 100644
index 0000000..34d84a4
--- /dev/null
+++ b/admin-lehrer/app/(admin)/education/klausur-korrektur/_components/constants.tsx
@@ -0,0 +1,58 @@
+/**
+ * Constants for Klausur-Korrektur page
+ */
+
+// API Base URL for klausur-service (same-origin proxy to avoid CORS)
+export const API_BASE = '/klausur-api'
+
+// Tab definitions
+export type TabId = 'willkommen' | 'klausuren' | 'erstellen' | 'direktupload' | 'statistiken'
+
+export const tabs: { id: TabId; name: string; icon: JSX.Element; hidden?: boolean }[] = [
+  {
+    id: 'willkommen',
+    name: 'Start',
+    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 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+      </svg>
+    ),
+  },
+  {
+    id: 'klausuren',
+    name: 'Klausuren',
+    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: 'erstellen',
+    name: 'Neue Klausur',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+      </svg>
+    ),
+  },
+  {
+    id: 'direktupload',
+    name: 'Schnellstart',
+    hidden: true,
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
+      </svg>
+    ),
+  },
+  {
+    id: 'statistiken',
+    name: 'Statistiken',
+    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>
+    ),
+  },
+]
diff --git a/admin-lehrer/app/(admin)/education/klausur-korrektur/_components/types.ts b/admin-lehrer/app/(admin)/education/klausur-korrektur/_components/types.ts
new file mode 100644
index 0000000..1820fe7
--- /dev/null
+++ b/admin-lehrer/app/(admin)/education/klausur-korrektur/_components/types.ts
@@ -0,0 +1,34 @@
+/**
+ * Local form types for Klausur-Korrektur page
+ */
+
+export interface CreateKlausurForm {
+  title: string
+  subject: string
+  year: number
+  semester: string
+  modus: 'abitur' | 'vorabitur'
+}
+
+export interface VorabiturEHForm {
+  aufgabentyp: string
+  titel: string
+  text_titel: string
+  text_autor: string
+  aufgabenstellung: string
+}
+
+export interface EHTemplate {
+  aufgabentyp: string
+  name: string
+  description: string
+  category: string
+}
+
+export interface DirektuploadForm {
+  files: File[]
+  ehFile: File | null
+  ehText: string
+  aufgabentyp: string
+  klausurTitle: string
+}
diff --git a/admin-lehrer/app/(admin)/education/klausur-korrektur/_components/useKlausurKorrektur.ts b/admin-lehrer/app/(admin)/education/klausur-korrektur/_components/useKlausurKorrektur.ts
new file mode 100644
index 0000000..825832c
--- /dev/null
+++ b/admin-lehrer/app/(admin)/education/klausur-korrektur/_components/useKlausurKorrektur.ts
@@ -0,0 +1,322 @@
+'use client'
+
+/**
+ * Custom hook for Klausur-Korrektur page state and handlers
+ */
+
+import { useState, useEffect, useCallback } from 'react'
+import type { Klausur, GradeInfo } from '../types'
+import type { TabId } from './constants'
+import type {
+  CreateKlausurForm,
+  VorabiturEHForm,
+  EHTemplate,
+  DirektuploadForm,
+} from './types'
+import { API_BASE } from './constants'
+
+export function useKlausurKorrektur() {
+  const [activeTab, setActiveTab] = useState<TabId>(() => {
+    if (typeof window !== 'undefined') {
+      const hasVisited = localStorage.getItem('klausur_korrektur_visited')
+      return hasVisited ? 'klausuren' : 'willkommen'
+    }
+    return 'willkommen'
+  })
+  const [klausuren, setKlausuren] = useState<Klausur[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [creating, setCreating] = useState(false)
+  const [gradeInfo, setGradeInfo] = useState<GradeInfo | null>(null)
+  const [templates, setTemplates] = useState<EHTemplate[]>([])
+  const [loadingTemplates, setLoadingTemplates] = useState(false)
+
+  const [form, setForm] = useState<CreateKlausurForm>({
+    title: '',
+    subject: 'Deutsch',
+    year: new Date().getFullYear(),
+    semester: 'Abitur',
+    modus: 'abitur',
+  })
+
+  const [ehForm, setEhForm] = useState<VorabiturEHForm>({
+    aufgabentyp: '',
+    titel: '',
+    text_titel: '',
+    text_autor: '',
+    aufgabenstellung: '',
+  })
+
+  const [direktForm, setDirektForm] = useState<DirektuploadForm>({
+    files: [],
+    ehFile: null,
+    ehText: '',
+    aufgabentyp: '',
+    klausurTitle: `Schnellkorrektur ${new Date().toLocaleDateString('de-DE')}`,
+  })
+  const [direktStep, setDirektStep] = useState<1 | 2 | 3>(1)
+  const [uploading, setUploading] = useState(false)
+
+  const fetchKlausuren = useCallback(async () => {
+    try {
+      setLoading(true)
+      const res = await fetch(`${API_BASE}/api/v1/klausuren`)
+      if (res.ok) {
+        const data = await res.json()
+        setKlausuren(Array.isArray(data) ? data : data.klausuren || [])
+        setError(null)
+      } else {
+        setError(`Fehler beim Laden: ${res.status}`)
+      }
+    } catch (err) {
+      console.error('Failed to fetch klausuren:', err)
+      setError('Verbindung zum Klausur-Service fehlgeschlagen')
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  const fetchGradeInfo = useCallback(async () => {
+    try {
+      const res = await fetch(`${API_BASE}/api/v1/grade-info`)
+      if (res.ok) {
+        const data = await res.json()
+        setGradeInfo(data)
+      }
+    } catch (err) {
+      console.error('Failed to fetch grade info:', err)
+    }
+  }, [])
+
+  const fetchTemplates = useCallback(async () => {
+    try {
+      setLoadingTemplates(true)
+      const res = await fetch(`${API_BASE}/api/v1/vorabitur/templates`)
+      if (res.ok) {
+        const data = await res.json()
+        setTemplates(data.templates || [])
+      }
+    } catch (err) {
+      console.error('Failed to fetch templates:', err)
+    } finally {
+      setLoadingTemplates(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    fetchKlausuren()
+    fetchGradeInfo()
+  }, [fetchKlausuren, fetchGradeInfo])
+
+  useEffect(() => {
+    if (form.modus === 'vorabitur' && templates.length === 0) {
+      fetchTemplates()
+    }
+  }, [form.modus, templates.length, fetchTemplates])
+
+  const handleCreateKlausur = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!form.title.trim()) {
+      setError('Bitte einen Titel eingeben')
+      return
+    }
+
+    if (form.modus === 'vorabitur') {
+      if (!ehForm.aufgabentyp) {
+        setError('Bitte einen Aufgabentyp auswaehlen')
+        return
+      }
+      if (!ehForm.aufgabenstellung.trim()) {
+        setError('Bitte die Aufgabenstellung eingeben')
+        return
+      }
+    }
+
+    try {
+      setCreating(true)
+
+      const res = await fetch(`${API_BASE}/api/v1/klausuren`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(form),
+      })
+
+      if (!res.ok) {
+        const errorData = await res.json()
+        setError(errorData.detail || 'Fehler beim Erstellen')
+        return
+      }
+
+      const newKlausur = await res.json()
+
+      if (form.modus === 'vorabitur') {
+        const ehRes = await fetch(`${API_BASE}/api/v1/klausuren/${newKlausur.id}/vorabitur-eh`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            aufgabentyp: ehForm.aufgabentyp,
+            titel: ehForm.titel || `EH: ${form.title}`,
+            text_titel: ehForm.text_titel || null,
+            text_autor: ehForm.text_autor || null,
+            aufgabenstellung: ehForm.aufgabenstellung,
+          }),
+        })
+
+        if (!ehRes.ok) {
+          console.error('Failed to create EH:', await ehRes.text())
+          setError('Klausur erstellt, aber Erwartungshorizont konnte nicht erstellt werden.')
+        }
+      }
+
+      setKlausuren(prev => [newKlausur, ...prev])
+      setForm({
+        title: '',
+        subject: 'Deutsch',
+        year: new Date().getFullYear(),
+        semester: 'Abitur',
+        modus: 'abitur',
+      })
+      setEhForm({
+        aufgabentyp: '',
+        titel: '',
+        text_titel: '',
+        text_autor: '',
+        aufgabenstellung: '',
+      })
+      setActiveTab('klausuren')
+      if (!error) setError(null)
+    } catch (err) {
+      console.error('Failed to create klausur:', err)
+      setError('Fehler beim Erstellen der Klausur')
+    } finally {
+      setCreating(false)
+    }
+  }
+
+  const handleDeleteKlausur = async (id: string) => {
+    if (!confirm('Klausur wirklich loeschen? Alle Studentenarbeiten werden ebenfalls geloescht.')) {
+      return
+    }
+
+    try {
+      const res = await fetch(`${API_BASE}/api/v1/klausuren/${id}`, {
+        method: 'DELETE',
+      })
+
+      if (res.ok) {
+        setKlausuren(prev => prev.filter(k => k.id !== id))
+      } else {
+        setError('Fehler beim Loeschen')
+      }
+    } catch (err) {
+      console.error('Failed to delete klausur:', err)
+      setError('Fehler beim Loeschen der Klausur')
+    }
+  }
+
+  const markAsVisited = () => {
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('klausur_korrektur_visited', 'true')
+    }
+  }
+
+  const handleDirektupload = async () => {
+    if (direktForm.files.length === 0) {
+      setError('Bitte mindestens eine Arbeit hochladen')
+      return
+    }
+
+    try {
+      setUploading(true)
+
+      const klausurRes = await fetch(`${API_BASE}/api/v1/klausuren`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          title: direktForm.klausurTitle,
+          subject: 'Deutsch',
+          year: new Date().getFullYear(),
+          semester: 'Vorabitur',
+          modus: 'vorabitur',
+        }),
+      })
+
+      if (!klausurRes.ok) {
+        const err = await klausurRes.json()
+        throw new Error(err.detail || 'Klausur erstellen fehlgeschlagen')
+      }
+
+      const newKlausur = await klausurRes.json()
+
+      if (direktForm.ehText.trim() || direktForm.aufgabentyp) {
+        const ehRes = await fetch(`${API_BASE}/api/v1/klausuren/${newKlausur.id}/vorabitur-eh`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            aufgabentyp: direktForm.aufgabentyp || 'textanalyse_pragmatisch',
+            titel: `EH: ${direktForm.klausurTitle}`,
+            aufgabenstellung: direktForm.ehText || 'Individuelle Aufgabenstellung',
+          }),
+        })
+
+        if (!ehRes.ok) {
+          console.error('EH creation failed, continuing with upload')
+        }
+      }
+
+      for (let i = 0; i < direktForm.files.length; i++) {
+        const file = direktForm.files[i]
+        const formData = new FormData()
+        formData.append('file', file)
+        formData.append('anonym_id', `Arbeit-${i + 1}`)
+
+        const uploadRes = await fetch(`${API_BASE}/api/v1/klausuren/${newKlausur.id}/students`, {
+          method: 'POST',
+          body: formData,
+        })
+
+        if (!uploadRes.ok) {
+          console.error(`Upload failed for file ${i + 1}:`, file.name)
+        }
+      }
+
+      setKlausuren(prev => [newKlausur, ...prev])
+      markAsVisited()
+      window.location.href = `/education/klausur-korrektur/${newKlausur.id}`
+
+    } catch (err) {
+      console.error('Direktupload failed:', err)
+      setError(err instanceof Error ? err.message : 'Fehler beim Direktupload')
+    } finally {
+      setUploading(false)
+    }
+  }
+
+  return {
+    // State
+    activeTab,
+    setActiveTab,
+    klausuren,
+    loading,
+    error,
+    setError,
+    creating,
+    gradeInfo,
+    templates,
+    loadingTemplates,
+    form,
+    setForm,
+    ehForm,
+    setEhForm,
+    direktForm,
+    setDirektForm,
+    direktStep,
+    setDirektStep,
+    uploading,
+    // Handlers
+    handleCreateKlausur,
+    handleDeleteKlausur,
+    handleDirektupload,
+    markAsVisited,
+  }
+}
diff --git a/admin-lehrer/app/(admin)/education/klausur-korrektur/page.tsx b/admin-lehrer/app/(admin)/education/klausur-korrektur/page.tsx
index a3829ea..3beaac5 100644
--- a/admin-lehrer/app/(admin)/education/klausur-korrektur/page.tsx
+++ b/admin-lehrer/app/(admin)/education/klausur-korrektur/page.tsx
@@ -7,1060 +7,40 @@
  * Zeigt alle Klausuren und ermoeglicht das Erstellen neuer Klausuren.
  */
 
-import { useState, useEffect, useCallback } from 'react'
-import Link from 'next/link'
-import type { Klausur, GradeInfo } from './types'
-
-// API Base URL for klausur-service (same-origin proxy to avoid CORS)
-const API_BASE = '/klausur-api'
-
-// Tab definitions
-type TabId = 'willkommen' | 'klausuren' | 'erstellen' | 'direktupload' | 'statistiken'
-
-const tabs: { id: TabId; name: string; icon: JSX.Element; hidden?: boolean }[] = [
-  {
-    id: 'willkommen',
-    name: 'Start',
-    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 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
-      </svg>
-    ),
-  },
-  {
-    id: 'klausuren',
-    name: 'Klausuren',
-    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: 'erstellen',
-    name: 'Neue Klausur',
-    icon: (
-      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
-      </svg>
-    ),
-  },
-  {
-    id: 'direktupload',
-    name: 'Schnellstart',
-    hidden: true,
-    icon: (
-      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
-      </svg>
-    ),
-  },
-  {
-    id: 'statistiken',
-    name: 'Statistiken',
-    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>
-    ),
-  },
-]
-
-interface CreateKlausurForm {
-  title: string
-  subject: string
-  year: number
-  semester: string
-  modus: 'abitur' | 'vorabitur'
-}
-
-interface VorabiturEHForm {
-  aufgabentyp: string
-  titel: string
-  text_titel: string
-  text_autor: string
-  aufgabenstellung: string
-}
-
-interface EHTemplate {
-  aufgabentyp: string
-  name: string
-  description: string
-  category: string
-}
-
-interface DirektuploadForm {
-  files: File[]
-  ehFile: File | null
-  ehText: string
-  aufgabentyp: string
-  klausurTitle: string
-}
+import { tabs } from './_components/constants'
+import { useKlausurKorrektur } from './_components/useKlausurKorrektur'
+import { KlausurenTab } from './_components/KlausurenTab'
+import { ErstellenTab } from './_components/ErstellenTab'
+import { WillkommenTab } from './_components/WillkommenTab'
+import { DirektuploadTab } from './_components/DirektuploadTab'
+import { StatistikenTab } from './_components/StatistikenTab'
 
 export default function KlausurKorrekturPage() {
-  const [activeTab, setActiveTab] = useState<TabId>(() => {
-    if (typeof window !== 'undefined') {
-      const hasVisited = localStorage.getItem('klausur_korrektur_visited')
-      return hasVisited ? 'klausuren' : 'willkommen'
-    }
-    return 'willkommen'
-  })
-  const [klausuren, setKlausuren] = useState<Klausur[]>([])
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-  const [creating, setCreating] = useState(false)
-  const [gradeInfo, setGradeInfo] = useState<GradeInfo | null>(null)
-  const [templates, setTemplates] = useState<EHTemplate[]>([])
-  const [loadingTemplates, setLoadingTemplates] = useState(false)
-
-  const [form, setForm] = useState<CreateKlausurForm>({
-    title: '',
-    subject: 'Deutsch',
-    year: new Date().getFullYear(),
-    semester: 'Abitur',
-    modus: 'abitur',
-  })
-
-  const [ehForm, setEhForm] = useState<VorabiturEHForm>({
-    aufgabentyp: '',
-    titel: '',
-    text_titel: '',
-    text_autor: '',
-    aufgabenstellung: '',
-  })
-
-  const [direktForm, setDirektForm] = useState<DirektuploadForm>({
-    files: [],
-    ehFile: null,
-    ehText: '',
-    aufgabentyp: '',
-    klausurTitle: `Schnellkorrektur ${new Date().toLocaleDateString('de-DE')}`,
-  })
-  const [direktStep, setDirektStep] = useState<1 | 2 | 3>(1)
-  const [uploading, setUploading] = useState(false)
-
-  const fetchKlausuren = useCallback(async () => {
-    try {
-      setLoading(true)
-      const res = await fetch(`${API_BASE}/api/v1/klausuren`)
-      if (res.ok) {
-        const data = await res.json()
-        setKlausuren(Array.isArray(data) ? data : data.klausuren || [])
-        setError(null)
-      } else {
-        setError(`Fehler beim Laden: ${res.status}`)
-      }
-    } catch (err) {
-      console.error('Failed to fetch klausuren:', err)
-      setError('Verbindung zum Klausur-Service fehlgeschlagen')
-    } finally {
-      setLoading(false)
-    }
-  }, [])
-
-  const fetchGradeInfo = useCallback(async () => {
-    try {
-      const res = await fetch(`${API_BASE}/api/v1/grade-info`)
-      if (res.ok) {
-        const data = await res.json()
-        setGradeInfo(data)
-      }
-    } catch (err) {
-      console.error('Failed to fetch grade info:', err)
-    }
-  }, [])
-
-  const fetchTemplates = useCallback(async () => {
-    try {
-      setLoadingTemplates(true)
-      const res = await fetch(`${API_BASE}/api/v1/vorabitur/templates`)
-      if (res.ok) {
-        const data = await res.json()
-        setTemplates(data.templates || [])
-      }
-    } catch (err) {
-      console.error('Failed to fetch templates:', err)
-    } finally {
-      setLoadingTemplates(false)
-    }
-  }, [])
-
-  useEffect(() => {
-    fetchKlausuren()
-    fetchGradeInfo()
-  }, [fetchKlausuren, fetchGradeInfo])
-
-  useEffect(() => {
-    if (form.modus === 'vorabitur' && templates.length === 0) {
-      fetchTemplates()
-    }
-  }, [form.modus, templates.length, fetchTemplates])
-
-  const handleCreateKlausur = async (e: React.FormEvent) => {
-    e.preventDefault()
-    if (!form.title.trim()) {
-      setError('Bitte einen Titel eingeben')
-      return
-    }
-
-    if (form.modus === 'vorabitur') {
-      if (!ehForm.aufgabentyp) {
-        setError('Bitte einen Aufgabentyp auswaehlen')
-        return
-      }
-      if (!ehForm.aufgabenstellung.trim()) {
-        setError('Bitte die Aufgabenstellung eingeben')
-        return
-      }
-    }
-
-    try {
-      setCreating(true)
-
-      const res = await fetch(`${API_BASE}/api/v1/klausuren`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(form),
-      })
-
-      if (!res.ok) {
-        const errorData = await res.json()
-        setError(errorData.detail || 'Fehler beim Erstellen')
-        return
-      }
-
-      const newKlausur = await res.json()
-
-      if (form.modus === 'vorabitur') {
-        const ehRes = await fetch(`${API_BASE}/api/v1/klausuren/${newKlausur.id}/vorabitur-eh`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            aufgabentyp: ehForm.aufgabentyp,
-            titel: ehForm.titel || `EH: ${form.title}`,
-            text_titel: ehForm.text_titel || null,
-            text_autor: ehForm.text_autor || null,
-            aufgabenstellung: ehForm.aufgabenstellung,
-          }),
-        })
-
-        if (!ehRes.ok) {
-          console.error('Failed to create EH:', await ehRes.text())
-          setError('Klausur erstellt, aber Erwartungshorizont konnte nicht erstellt werden.')
-        }
-      }
-
-      setKlausuren(prev => [newKlausur, ...prev])
-      setForm({
-        title: '',
-        subject: 'Deutsch',
-        year: new Date().getFullYear(),
-        semester: 'Abitur',
-        modus: 'abitur',
-      })
-      setEhForm({
-        aufgabentyp: '',
-        titel: '',
-        text_titel: '',
-        text_autor: '',
-        aufgabenstellung: '',
-      })
-      setActiveTab('klausuren')
-      if (!error) setError(null)
-    } catch (err) {
-      console.error('Failed to create klausur:', err)
-      setError('Fehler beim Erstellen der Klausur')
-    } finally {
-      setCreating(false)
-    }
-  }
-
-  const handleDeleteKlausur = async (id: string) => {
-    if (!confirm('Klausur wirklich loeschen? Alle Studentenarbeiten werden ebenfalls geloescht.')) {
-      return
-    }
-
-    try {
-      const res = await fetch(`${API_BASE}/api/v1/klausuren/${id}`, {
-        method: 'DELETE',
-      })
-
-      if (res.ok) {
-        setKlausuren(prev => prev.filter(k => k.id !== id))
-      } else {
-        setError('Fehler beim Loeschen')
-      }
-    } catch (err) {
-      console.error('Failed to delete klausur:', err)
-      setError('Fehler beim Loeschen der Klausur')
-    }
-  }
-
-  const markAsVisited = () => {
-    if (typeof window !== 'undefined') {
-      localStorage.setItem('klausur_korrektur_visited', 'true')
-    }
-  }
-
-  const handleDirektupload = async () => {
-    if (direktForm.files.length === 0) {
-      setError('Bitte mindestens eine Arbeit hochladen')
-      return
-    }
-
-    try {
-      setUploading(true)
-
-      const klausurRes = await fetch(`${API_BASE}/api/v1/klausuren`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          title: direktForm.klausurTitle,
-          subject: 'Deutsch',
-          year: new Date().getFullYear(),
-          semester: 'Vorabitur',
-          modus: 'vorabitur',
-        }),
-      })
-
-      if (!klausurRes.ok) {
-        const err = await klausurRes.json()
-        throw new Error(err.detail || 'Klausur erstellen fehlgeschlagen')
-      }
-
-      const newKlausur = await klausurRes.json()
-
-      if (direktForm.ehText.trim() || direktForm.aufgabentyp) {
-        const ehRes = await fetch(`${API_BASE}/api/v1/klausuren/${newKlausur.id}/vorabitur-eh`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            aufgabentyp: direktForm.aufgabentyp || 'textanalyse_pragmatisch',
-            titel: `EH: ${direktForm.klausurTitle}`,
-            aufgabenstellung: direktForm.ehText || 'Individuelle Aufgabenstellung',
-          }),
-        })
-
-        if (!ehRes.ok) {
-          console.error('EH creation failed, continuing with upload')
-        }
-      }
-
-      for (let i = 0; i < direktForm.files.length; i++) {
-        const file = direktForm.files[i]
-        const formData = new FormData()
-        formData.append('file', file)
-        formData.append('anonym_id', `Arbeit-${i + 1}`)
-
-        const uploadRes = await fetch(`${API_BASE}/api/v1/klausuren/${newKlausur.id}/students`, {
-          method: 'POST',
-          body: formData,
-        })
-
-        if (!uploadRes.ok) {
-          console.error(`Upload failed for file ${i + 1}:`, file.name)
-        }
-      }
-
-      setKlausuren(prev => [newKlausur, ...prev])
-      markAsVisited()
-      window.location.href = `/education/klausur-korrektur/${newKlausur.id}`
-
-    } catch (err) {
-      console.error('Direktupload failed:', err)
-      setError(err instanceof Error ? err.message : 'Fehler beim Direktupload')
-    } finally {
-      setUploading(false)
-    }
-  }
-
-  const renderKlausurenTab = () => (
-    <div className="space-y-4">
-      <div className="flex justify-between items-center">
-        <div>
-          <h2 className="text-lg font-semibold text-slate-800">Alle Klausuren</h2>
-          <p className="text-sm text-slate-500">{klausuren.length} Klausuren insgesamt</p>
-        </div>
-        <button
-          onClick={() => setActiveTab('erstellen')}
-          className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-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 4v16m8-8H4" />
-          </svg>
-          Neue Klausur
-        </button>
-      </div>
-
-      {loading ? (
-        <div className="flex items-center justify-center h-64">
-          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600"></div>
-        </div>
-      ) : klausuren.length === 0 ? (
-        <div className="text-center py-12 bg-white rounded-lg border border-slate-200">
-          <svg className="mx-auto h-12 w-12 text-slate-400" 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>
-          <h3 className="mt-2 text-sm font-medium text-slate-900">Keine Klausuren</h3>
-          <p className="mt-1 text-sm text-slate-500">Erstellen Sie Ihre erste Klausur zum Korrigieren.</p>
-          <button
-            onClick={() => setActiveTab('erstellen')}
-            className="mt-4 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
-          >
-            Klausur erstellen
-          </button>
-        </div>
-      ) : (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          {klausuren.map((klausur) => (
-            <div
-              key={klausur.id}
-              className="bg-white rounded-lg border border-slate-200 shadow-sm hover:shadow-md transition-shadow"
-            >
-              <div className="p-4">
-                <div className="flex justify-between items-start mb-3">
-                  <div>
-                    <h3 className="font-semibold text-slate-800 truncate">{klausur.title}</h3>
-                    <p className="text-sm text-slate-500">{klausur.subject} - {klausur.year}</p>
-                  </div>
-                  <span className={`px-2 py-1 text-xs font-medium rounded-full ${
-                    klausur.modus === 'abitur'
-                      ? 'bg-purple-100 text-purple-800'
-                      : 'bg-blue-100 text-blue-800'
-                  }`}>
-                    {klausur.modus === 'abitur' ? 'Abitur' : 'Vorabitur'}
-                  </span>
-                </div>
-
-                <div className="flex items-center gap-4 text-sm text-slate-600 mb-4">
-                  <div className="flex items-center gap-1">
-                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
-                    </svg>
-                    <span>{klausur.student_count || 0} Arbeiten</span>
-                  </div>
-                  <div className="flex items-center gap-1">
-                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-                    </svg>
-                    <span>{klausur.completed_count || 0} fertig</span>
-                  </div>
-                </div>
-
-                {(klausur.student_count || 0) > 0 && (
-                  <div className="mb-4">
-                    <div className="flex justify-between text-xs text-slate-500 mb-1">
-                      <span>Fortschritt</span>
-                      <span>{Math.round(((klausur.completed_count || 0) / (klausur.student_count || 1)) * 100)}%</span>
-                    </div>
-                    <div className="h-2 bg-slate-100 rounded-full overflow-hidden">
-                      <div
-                        className="h-full bg-green-500 rounded-full transition-all"
-                        style={{ width: `${((klausur.completed_count || 0) / (klausur.student_count || 1)) * 100}%` }}
-                      />
-                    </div>
-                  </div>
-                )}
-
-                <div className="flex gap-2">
-                  <Link
-                    href={`/education/klausur-korrektur/${klausur.id}`}
-                    className="flex-1 px-3 py-2 bg-purple-600 text-white text-sm text-center rounded-lg hover:bg-purple-700"
-                  >
-                    Korrigieren
-                  </Link>
-                  <button
-                    onClick={() => handleDeleteKlausur(klausur.id)}
-                    className="px-3 py-2 text-red-600 hover:bg-red-50 rounded-lg"
-                    title="Loeschen"
-                  >
-                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-                    </svg>
-                  </button>
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-
-  const renderErstellenTab = () => (
-    <div className="max-w-2xl mx-auto">
-      <div className="bg-white rounded-lg border border-slate-200 shadow-sm p-6">
-        <h2 className="text-lg font-semibold text-slate-800 mb-6">Neue Klausur erstellen</h2>
-
-        <form onSubmit={handleCreateKlausur} className="space-y-4">
-          <div>
-            <label className="block text-sm font-medium text-slate-700 mb-1">
-              Titel der Klausur *
-            </label>
-            <input
-              type="text"
-              value={form.title}
-              onChange={(e) => setForm(prev => ({ ...prev, title: e.target.value }))}
-              placeholder="z.B. Deutsch LK Abitur 2025 - Kurs D1"
-              className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
-              required
-            />
-          </div>
-
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm font-medium text-slate-700 mb-1">Fach</label>
-              <select
-                value={form.subject}
-                onChange={(e) => setForm(prev => ({ ...prev, subject: e.target.value }))}
-                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
-              >
-                <option value="Deutsch">Deutsch</option>
-                <option value="Englisch">Englisch</option>
-                <option value="Mathematik">Mathematik</option>
-                <option value="Geschichte">Geschichte</option>
-                <option value="Biologie">Biologie</option>
-              </select>
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-slate-700 mb-1">Jahr</label>
-              <input
-                type="number"
-                value={form.year}
-                onChange={(e) => setForm(prev => ({ ...prev, year: parseInt(e.target.value) }))}
-                min={2020}
-                max={2030}
-                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
-              />
-            </div>
-          </div>
-
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm font-medium text-slate-700 mb-1">Semester / Pruefung</label>
-              <select
-                value={form.semester}
-                onChange={(e) => setForm(prev => ({ ...prev, semester: e.target.value }))}
-                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
-              >
-                <option value="Abitur">Abitur</option>
-                <option value="Q1">Q1 (11/1)</option>
-                <option value="Q2">Q2 (11/2)</option>
-                <option value="Q3">Q3 (12/1)</option>
-                <option value="Q4">Q4 (12/2)</option>
-                <option value="Vorabitur">Vorabitur</option>
-              </select>
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-slate-700 mb-1">Modus</label>
-              <select
-                value={form.modus}
-                onChange={(e) => setForm(prev => ({ ...prev, modus: e.target.value as 'abitur' | 'vorabitur' }))}
-                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
-              >
-                <option value="abitur">Abitur (mit offiziellem EH)</option>
-                <option value="vorabitur">Vorabitur (eigener EH)</option>
-              </select>
-            </div>
-          </div>
-
-          {form.modus === 'vorabitur' && (
-            <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg space-y-4">
-              <div className="flex items-start gap-3">
-                <svg className="w-5 h-5 text-blue-600 mt-0.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>
-                <div className="text-sm text-blue-800">
-                  <p className="font-medium mb-1">Eigenen Erwartungshorizont erstellen</p>
-                  <p>Waehlen Sie einen Aufgabentyp und beschreiben Sie die Aufgabenstellung.</p>
-                </div>
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium text-slate-700 mb-1">Aufgabentyp *</label>
-                {loadingTemplates ? (
-                  <div className="flex items-center gap-2 text-sm text-slate-500">
-                    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-600"></div>
-                    Lade Vorlagen...
-                  </div>
-                ) : (
-                  <select
-                    value={ehForm.aufgabentyp}
-                    onChange={(e) => setEhForm(prev => ({ ...prev, aufgabentyp: e.target.value }))}
-                    className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent bg-white"
-                  >
-                    <option value="">-- Aufgabentyp waehlen --</option>
-                    {templates.map(t => (
-                      <option key={t.aufgabentyp} value={t.aufgabentyp}>{t.name}</option>
-                    ))}
-                  </select>
-                )}
-              </div>
-
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <div>
-                  <label className="block text-sm font-medium text-slate-700 mb-1">Texttitel (optional)</label>
-                  <input
-                    type="text"
-                    value={ehForm.text_titel}
-                    onChange={(e) => setEhForm(prev => ({ ...prev, text_titel: e.target.value }))}
-                    placeholder="z.B. 'Die Verwandlung'"
-                    className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
-                  />
-                </div>
-                <div>
-                  <label className="block text-sm font-medium text-slate-700 mb-1">Autor (optional)</label>
-                  <input
-                    type="text"
-                    value={ehForm.text_autor}
-                    onChange={(e) => setEhForm(prev => ({ ...prev, text_autor: e.target.value }))}
-                    placeholder="z.B. 'Franz Kafka'"
-                    className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
-                  />
-                </div>
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium text-slate-700 mb-1">Aufgabenstellung *</label>
-                <textarea
-                  value={ehForm.aufgabenstellung}
-                  onChange={(e) => setEhForm(prev => ({ ...prev, aufgabenstellung: e.target.value }))}
-                  placeholder="Beschreiben Sie hier die konkrete Aufgabenstellung..."
-                  rows={4}
-                  className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent resize-none"
-                />
-              </div>
-            </div>
-          )}
-
-          <div className="flex gap-3 pt-4">
-            <button
-              type="button"
-              onClick={() => setActiveTab('klausuren')}
-              className="px-4 py-2 text-slate-600 hover:bg-slate-100 rounded-lg"
-            >
-              Abbrechen
-            </button>
-            <button
-              type="submit"
-              disabled={creating}
-              className="flex-1 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
-            >
-              {creating ? (
-                <>
-                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
-                  Erstelle...
-                </>
-              ) : (
-                'Klausur erstellen'
-              )}
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  )
-
-  const renderWillkommenTab = () => (
-    <div className="max-w-4xl mx-auto space-y-8">
-      <div className="text-center py-8">
-        <div className="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-purple-500 to-purple-700 rounded-2xl mb-6">
-          <svg className="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-          </svg>
-        </div>
-        <h1 className="text-3xl font-bold text-slate-800 mb-3">Willkommen zur Abiturklausur-Korrektur</h1>
-        <p className="text-lg text-slate-600 max-w-2xl mx-auto">
-          KI-gestuetzte Korrektur fuer Deutsch-Abiturklausuren nach dem 15-Punkte-System.
-          Sparen Sie bis zu 80% Zeit bei der Erstkorrektur.
-        </p>
-      </div>
-
-      <div className="bg-gradient-to-r from-blue-50 to-purple-50 border border-blue-200 rounded-xl p-6">
-        <h2 className="text-lg font-semibold text-slate-800 mb-4 flex items-center gap-2">
-          <svg className="w-5 h-5 text-blue-600" 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>
-          So funktioniert es
-        </h2>
-        <div className="grid md:grid-cols-4 gap-4">
-          {[
-            { step: 1, title: 'Arbeiten hochladen', desc: 'Scans der Schuelerarbeiten hochladen' },
-            { step: 2, title: 'EH bereitstellen', desc: 'Erwartungshorizont hochladen oder erstellen' },
-            { step: 3, title: 'KI korrigiert', desc: 'Automatische Bewertung erhalten' },
-            { step: 4, title: 'Pruefen & Anpassen', desc: 'Vorschlaege pruefen und finalisieren' },
-          ].map(({ step, title, desc }) => (
-            <div key={step} className="text-center">
-              <div className="text-3xl mb-2">{step === 1 ? '📤' : step === 2 ? '📋' : step === 3 ? '🤖' : '✅'}</div>
-              <div className="text-xs text-blue-600 font-medium mb-1">Schritt {step}</div>
-              <div className="font-medium text-slate-800 text-sm">{title}</div>
-              <div className="text-xs text-slate-500 mt-1">{desc}</div>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      <div className="grid md:grid-cols-2 gap-6">
-        <div
-          className="bg-white border-2 border-slate-200 rounded-xl p-6 hover:border-purple-300 hover:shadow-lg transition-all cursor-pointer"
-          onClick={() => { markAsVisited(); setActiveTab('erstellen'); }}
-        >
-          <div className="flex items-start gap-4">
-            <div className="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center flex-shrink-0">
-              <svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
-              </svg>
-            </div>
-            <div className="flex-1">
-              <h3 className="font-semibold text-slate-800 mb-1">Neue Klausur erstellen</h3>
-              <p className="text-sm text-slate-600 mb-3">
-                Empfohlen fuer regelmaessige Nutzung. Erstellen Sie eine Klausur mit allen Metadaten.
-              </p>
-              <div className="mt-4 text-sm text-purple-600 font-medium flex items-center gap-1">
-                Klausur erstellen
-                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-                </svg>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div
-          className="bg-white border-2 border-slate-200 rounded-xl p-6 hover:border-blue-300 hover:shadow-lg transition-all cursor-pointer"
-          onClick={() => { markAsVisited(); setActiveTab('direktupload'); }}
-        >
-          <div className="flex items-start gap-4">
-            <div className="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center flex-shrink-0">
-              <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
-              </svg>
-            </div>
-            <div className="flex-1">
-              <h3 className="font-semibold text-slate-800 mb-1">Schnellstart - Direkt hochladen</h3>
-              <p className="text-sm text-slate-600 mb-3">
-                Ideal wenn Sie sofort loslegen moechten. Drag & Drop Upload.
-              </p>
-              <div className="mt-4 text-sm text-blue-600 font-medium flex items-center gap-1">
-                Schnellstart
-                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-                </svg>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {klausuren.length > 0 && (
-        <div className="bg-slate-50 border border-slate-200 rounded-xl p-4 flex items-center justify-between">
-          <div>
-            <p className="font-medium text-slate-800">Sie haben {klausuren.length} Klausur{klausuren.length !== 1 ? 'en' : ''}</p>
-            <p className="text-sm text-slate-500">Setzen Sie Ihre Arbeit fort oder starten Sie eine neue Korrektur.</p>
-          </div>
-          <button
-            onClick={() => { markAsVisited(); setActiveTab('klausuren'); }}
-            className="px-4 py-2 bg-slate-800 text-white rounded-lg hover:bg-slate-700 text-sm"
-          >
-            Zu meinen Klausuren
-          </button>
-        </div>
-      )}
-    </div>
-  )
-
-  const renderDirektuploadTab = () => (
-    <div className="max-w-3xl mx-auto">
-      <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
-        <div className="bg-slate-50 border-b border-slate-200 px-6 py-4">
-          <div className="flex items-center justify-between mb-2">
-            <h2 className="text-lg font-semibold text-slate-800">Schnellstart - Direkt Korrigieren</h2>
-            <button
-              onClick={() => setActiveTab('willkommen')}
-              className="text-sm text-slate-500 hover:text-slate-700"
-            >
-              Abbrechen
-            </button>
-          </div>
-          <div className="flex items-center gap-2">
-            {[1, 2, 3].map((step) => (
-              <div key={step} className="flex items-center gap-2 flex-1">
-                <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium ${
-                  direktStep >= step ? 'bg-blue-600 text-white' : 'bg-slate-200 text-slate-500'
-                }`}>
-                  {step}
-                </div>
-                <span className={`text-sm ${direktStep >= step ? 'text-slate-800' : 'text-slate-400'}`}>
-                  {step === 1 ? 'Arbeiten' : step === 2 ? 'Erwartungshorizont' : 'Starten'}
-                </span>
-                {step < 3 && <div className={`flex-1 h-1 rounded ${direktStep > step ? 'bg-blue-600' : 'bg-slate-200'}`} />}
-              </div>
-            ))}
-          </div>
-        </div>
-
-        <div className="p-6">
-          {direktStep === 1 && (
-            <div className="space-y-6">
-              <div>
-                <h3 className="font-medium text-slate-800 mb-2">Schuelerarbeiten hochladen</h3>
-                <p className="text-sm text-slate-500 mb-4">
-                  Laden Sie die eingescannten Klausuren hoch. Unterstuetzte Formate: PDF, JPG, PNG.
-                </p>
-
-                <div
-                  className={`border-2 border-dashed rounded-xl p-8 text-center transition-colors ${
-                    direktForm.files.length > 0 ? 'border-green-300 bg-green-50' : 'border-slate-300 hover:border-blue-400 hover:bg-blue-50'
-                  }`}
-                  onDrop={(e) => {
-                    e.preventDefault()
-                    const files = Array.from(e.dataTransfer.files)
-                    setDirektForm(prev => ({ ...prev, files: [...prev.files, ...files] }))
-                  }}
-                  onDragOver={(e) => e.preventDefault()}
-                >
-                  <svg className="w-12 h-12 mx-auto text-slate-400 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
-                  </svg>
-                  <p className="text-slate-600 mb-2">Dateien hier ablegen oder</p>
-                  <label className="inline-block px-4 py-2 bg-blue-600 text-white rounded-lg cursor-pointer hover:bg-blue-700">
-                    Dateien auswaehlen
-                    <input
-                      type="file"
-                      multiple
-                      accept=".pdf,.jpg,.jpeg,.png"
-                      className="hidden"
-                      onChange={(e) => {
-                        const files = Array.from(e.target.files || [])
-                        setDirektForm(prev => ({ ...prev, files: [...prev.files, ...files] }))
-                      }}
-                    />
-                  </label>
-                </div>
-
-                {direktForm.files.length > 0 && (
-                  <div className="mt-4 space-y-2">
-                    <div className="flex items-center justify-between text-sm text-slate-600">
-                      <span>{direktForm.files.length} Datei{direktForm.files.length !== 1 ? 'en' : ''} ausgewaehlt</span>
-                      <button
-                        onClick={() => setDirektForm(prev => ({ ...prev, files: [] }))}
-                        className="text-red-600 hover:text-red-700"
-                      >
-                        Alle entfernen
-                      </button>
-                    </div>
-                    <div className="max-h-40 overflow-y-auto space-y-1">
-                      {direktForm.files.map((file, idx) => (
-                        <div key={idx} className="flex items-center justify-between bg-slate-50 px-3 py-2 rounded-lg text-sm">
-                          <span className="truncate">{file.name}</span>
-                          <button
-                            onClick={() => setDirektForm(prev => ({
-                              ...prev,
-                              files: prev.files.filter((_, i) => i !== idx)
-                            }))}
-                            className="text-slate-400 hover:text-red-600"
-                          >
-                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                            </svg>
-                          </button>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                )}
-              </div>
-
-              <div className="flex justify-end">
-                <button
-                  onClick={() => setDirektStep(2)}
-                  disabled={direktForm.files.length === 0}
-                  className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
-                >
-                  Weiter
-                </button>
-              </div>
-            </div>
-          )}
-
-          {direktStep === 2 && (
-            <div className="space-y-6">
-              <div>
-                <h3 className="font-medium text-slate-800 mb-2">Erwartungshorizont (optional)</h3>
-                <p className="text-sm text-slate-500 mb-4">
-                  Beschreiben Sie die Aufgabenstellung fuer bessere KI-Vorschlaege.
-                </p>
-
-                <div className="mb-4">
-                  <label className="block text-sm font-medium text-slate-700 mb-1">Aufgabentyp</label>
-                  <select
-                    value={direktForm.aufgabentyp}
-                    onChange={(e) => setDirektForm(prev => ({ ...prev, aufgabentyp: e.target.value }))}
-                    className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                  >
-                    <option value="">-- Waehlen Sie einen Aufgabentyp --</option>
-                    <option value="textanalyse_pragmatisch">Textanalyse (Sachtexte)</option>
-                    <option value="gedichtanalyse">Gedichtanalyse</option>
-                    <option value="prosaanalyse">Prosaanalyse</option>
-                    <option value="dramenanalyse">Dramenanalyse</option>
-                    <option value="eroerterung_textgebunden">Textgebundene Eroerterung</option>
-                  </select>
-                </div>
-
-                <div>
-                  <label className="block text-sm font-medium text-slate-700 mb-1">
-                    Aufgabenstellung / Erwartungshorizont
-                  </label>
-                  <textarea
-                    value={direktForm.ehText}
-                    onChange={(e) => setDirektForm(prev => ({ ...prev, ehText: e.target.value }))}
-                    placeholder="Beschreiben Sie hier die Aufgabenstellung..."
-                    rows={6}
-                    className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
-                  />
-                </div>
-              </div>
-
-              <div className="flex justify-between">
-                <button
-                  onClick={() => setDirektStep(1)}
-                  className="px-6 py-2 text-slate-600 hover:bg-slate-100 rounded-lg"
-                >
-                  Zurueck
-                </button>
-                <button
-                  onClick={() => setDirektStep(3)}
-                  className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
-                >
-                  Weiter
-                </button>
-              </div>
-            </div>
-          )}
-
-          {direktStep === 3 && (
-            <div className="space-y-6">
-              <div>
-                <h3 className="font-medium text-slate-800 mb-2">Zusammenfassung</h3>
-
-                <div className="bg-slate-50 rounded-lg p-4 space-y-3">
-                  <div className="flex items-center justify-between">
-                    <span className="text-sm text-slate-600">Titel</span>
-                    <input
-                      type="text"
-                      value={direktForm.klausurTitle}
-                      onChange={(e) => setDirektForm(prev => ({ ...prev, klausurTitle: e.target.value }))}
-                      className="text-sm font-medium text-slate-800 bg-white border border-slate-200 rounded px-2 py-1 text-right"
-                    />
-                  </div>
-                  <div className="flex items-center justify-between">
-                    <span className="text-sm text-slate-600">Anzahl Arbeiten</span>
-                    <span className="text-sm font-medium text-slate-800">{direktForm.files.length}</span>
-                  </div>
-                  <div className="flex items-center justify-between">
-                    <span className="text-sm text-slate-600">Aufgabentyp</span>
-                    <span className="text-sm font-medium text-slate-800">
-                      {direktForm.aufgabentyp || 'Nicht angegeben'}
-                    </span>
-                  </div>
-                </div>
-
-                <div className="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
-                  <div className="flex items-start gap-3">
-                    <svg className="w-5 h-5 text-blue-600 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                    </svg>
-                    <div className="text-sm text-blue-800">
-                      <p className="font-medium">Was passiert jetzt?</p>
-                      <ol className="list-decimal list-inside mt-1 space-y-1 text-blue-700">
-                        <li>Eine neue Klausur wird automatisch erstellt</li>
-                        <li>Alle {direktForm.files.length} Arbeiten werden hochgeladen</li>
-                        <li>OCR-Erkennung startet automatisch</li>
-                        <li>Sie werden zur Korrektur-Ansicht weitergeleitet</li>
-                      </ol>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div className="flex justify-between">
-                <button
-                  onClick={() => setDirektStep(2)}
-                  className="px-6 py-2 text-slate-600 hover:bg-slate-100 rounded-lg"
-                >
-                  Zurueck
-                </button>
-                <button
-                  onClick={handleDirektupload}
-                  disabled={uploading}
-                  className="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
-                >
-                  {uploading ? (
-                    <>
-                      <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
-                      Wird hochgeladen...
-                    </>
-                  ) : (
-                    <>
-                      <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>
-                      Korrektur starten
-                    </>
-                  )}
-                </button>
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-
-  const renderStatistikenTab = () => (
-    <div className="space-y-6">
-      <h2 className="text-lg font-semibold text-slate-800">Korrektur-Statistiken</h2>
-
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-        <div className="bg-white rounded-lg border border-slate-200 p-4">
-          <div className="text-2xl font-bold text-slate-800">{klausuren.length}</div>
-          <div className="text-sm text-slate-500">Klausuren</div>
-        </div>
-        <div className="bg-white rounded-lg border border-slate-200 p-4">
-          <div className="text-2xl font-bold text-slate-800">
-            {klausuren.reduce((sum, k) => sum + (k.student_count || 0), 0)}
-          </div>
-          <div className="text-sm text-slate-500">Studentenarbeiten</div>
-        </div>
-        <div className="bg-white rounded-lg border border-slate-200 p-4">
-          <div className="text-2xl font-bold text-green-600">
-            {klausuren.reduce((sum, k) => sum + (k.completed_count || 0), 0)}
-          </div>
-          <div className="text-sm text-slate-500">Abgeschlossen</div>
-        </div>
-        <div className="bg-white rounded-lg border border-slate-200 p-4">
-          <div className="text-2xl font-bold text-orange-600">
-            {klausuren.reduce((sum, k) => sum + ((k.student_count || 0) - (k.completed_count || 0)), 0)}
-          </div>
-          <div className="text-sm text-slate-500">Ausstehend</div>
-        </div>
-      </div>
-
-      {gradeInfo && (
-        <div className="bg-white rounded-lg border border-slate-200 p-6">
-          <h3 className="text-sm font-semibold text-slate-800 mb-4">Bewertungskriterien (Niedersachsen)</h3>
-          <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
-            {Object.entries(gradeInfo.criteria || {}).map(([key, criterion]) => (
-              <div key={key} className="text-center p-3 bg-slate-50 rounded-lg">
-                <div className="text-lg font-semibold text-slate-700">{criterion.weight}%</div>
-                <div className="text-sm text-slate-500">{criterion.name}</div>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  )
+  const {
+    activeTab,
+    setActiveTab,
+    klausuren,
+    loading,
+    error,
+    setError,
+    creating,
+    gradeInfo,
+    templates,
+    loadingTemplates,
+    form,
+    setForm,
+    ehForm,
+    setEhForm,
+    direktForm,
+    setDirektForm,
+    direktStep,
+    setDirektStep,
+    uploading,
+    handleCreateKlausur,
+    handleDeleteKlausur,
+    handleDirektupload,
+    markAsVisited,
+  } = useKlausurKorrektur()
 
   return (
     <div className="min-h-screen bg-slate-50">
@@ -1110,11 +90,48 @@ export default function KlausurKorrekturPage() {
         </div>
 
         {/* Tab content */}
-        {activeTab === 'willkommen' && renderWillkommenTab()}
-        {activeTab === 'klausuren' && renderKlausurenTab()}
-        {activeTab === 'erstellen' && renderErstellenTab()}
-        {activeTab === 'direktupload' && renderDirektuploadTab()}
-        {activeTab === 'statistiken' && renderStatistikenTab()}
+        {activeTab === 'willkommen' && (
+          <WillkommenTab
+            klausuren={klausuren}
+            onNavigate={setActiveTab}
+            markAsVisited={markAsVisited}
+          />
+        )}
+        {activeTab === 'klausuren' && (
+          <KlausurenTab
+            klausuren={klausuren}
+            loading={loading}
+            onDelete={handleDeleteKlausur}
+            onNavigate={setActiveTab}
+          />
+        )}
+        {activeTab === 'erstellen' && (
+          <ErstellenTab
+            form={form}
+            setForm={setForm}
+            ehForm={ehForm}
+            setEhForm={setEhForm}
+            templates={templates}
+            loadingTemplates={loadingTemplates}
+            creating={creating}
+            onSubmit={handleCreateKlausur}
+            onNavigate={setActiveTab}
+          />
+        )}
+        {activeTab === 'direktupload' && (
+          <DirektuploadTab
+            direktForm={direktForm}
+            setDirektForm={setDirektForm}
+            direktStep={direktStep}
+            setDirektStep={setDirektStep}
+            uploading={uploading}
+            onUpload={handleDirektupload}
+            onNavigate={setActiveTab}
+          />
+        )}
+        {activeTab === 'statistiken' && (
+          <StatistikenTab klausuren={klausuren} gradeInfo={gradeInfo} />
+        )}
       </div>
     </div>
   )
diff --git a/admin-lehrer/app/(admin)/infrastructure/middleware/_components/ConfigTab.tsx b/admin-lehrer/app/(admin)/infrastructure/middleware/_components/ConfigTab.tsx
new file mode 100644
index 0000000..4fb0d74
--- /dev/null
+++ b/admin-lehrer/app/(admin)/infrastructure/middleware/_components/ConfigTab.tsx
@@ -0,0 +1,63 @@
+'use client'
+
+import type { MiddlewareConfig } from '../types'
+import { getMiddlewareDescription } from './helpers'
+
+interface ConfigTabProps {
+  configs: MiddlewareConfig[]
+  actionLoading: string | null
+  toggleMiddleware: (name: string, enabled: boolean) => void
+}
+
+export function ConfigTab({ configs, actionLoading, toggleMiddleware }: ConfigTabProps) {
+  return (
+    <div className="space-y-4">
+      {configs.map(config => {
+        const info = getMiddlewareDescription(config.middleware_name)
+        return (
+          <div key={config.id} className="bg-slate-50 rounded-lg p-4 border border-slate-200">
+            <div className="flex justify-between items-start mb-4">
+              <div>
+                <h3 className="font-semibold text-slate-900 flex items-center gap-2">
+                  <span>{info.icon}</span>
+                  <span className="capitalize">{config.middleware_name.replace('_', ' ')}</span>
+                </h3>
+                <p className="text-sm text-slate-600">{info.desc}</p>
+              </div>
+              <div className="flex items-center gap-3">
+                <span
+                  className={`px-3 py-1 rounded-full text-xs font-semibold ${
+                    config.enabled ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
+                  }`}
+                >
+                  {config.enabled ? 'Aktiviert' : 'Deaktiviert'}
+                </span>
+                <button
+                  onClick={() => toggleMiddleware(config.middleware_name, !config.enabled)}
+                  disabled={actionLoading === config.middleware_name}
+                  className="px-4 py-1.5 text-sm border border-slate-300 rounded-lg hover:bg-slate-100 disabled:opacity-50 transition-colors"
+                >
+                  {actionLoading === config.middleware_name
+                    ? '...'
+                    : config.enabled
+                    ? 'Deaktivieren'
+                    : 'Aktivieren'}
+                </button>
+              </div>
+            </div>
+            {Object.keys(config.config).length > 0 && (
+              <div className="mt-3 pt-3 border-t border-slate-200">
+                <div className="text-xs font-semibold text-slate-500 uppercase mb-2">
+                  Konfiguration
+                </div>
+                <pre className="text-xs bg-white p-3 rounded border border-slate-200 overflow-x-auto">
+                  {JSON.stringify(config.config, null, 2)}
+                </pre>
+              </div>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/infrastructure/middleware/_components/EventsTab.tsx b/admin-lehrer/app/(admin)/infrastructure/middleware/_components/EventsTab.tsx
new file mode 100644
index 0000000..171e8e9
--- /dev/null
+++ b/admin-lehrer/app/(admin)/infrastructure/middleware/_components/EventsTab.tsx
@@ -0,0 +1,71 @@
+'use client'
+
+import type { MiddlewareEvent } from '../types'
+import { getEventTypeColor } from './helpers'
+
+interface EventsTabProps {
+  events: MiddlewareEvent[]
+}
+
+export function EventsTab({ events }: EventsTabProps) {
+  return (
+    <div className="overflow-x-auto">
+      <table className="w-full">
+        <thead>
+          <tr className="border-b border-slate-200">
+            <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">
+              Zeit
+            </th>
+            <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">
+              Middleware
+            </th>
+            <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">
+              Event
+            </th>
+            <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">
+              IP
+            </th>
+            <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">
+              Pfad
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {events.length === 0 ? (
+            <tr>
+              <td colSpan={5} className="text-center py-8 text-slate-500">
+                Keine Events vorhanden.
+              </td>
+            </tr>
+          ) : (
+            events.map(event => (
+              <tr key={event.id} className="border-b border-slate-100 hover:bg-slate-50">
+                <td className="py-3 px-4 text-sm text-slate-500">
+                  {new Date(event.created_at).toLocaleString('de-DE')}
+                </td>
+                <td className="py-3 px-4 text-sm capitalize">
+                  {event.middleware_name.replace('_', ' ')}
+                </td>
+                <td className="py-3 px-4">
+                  <span
+                    className={`px-2 py-1 rounded text-xs font-semibold ${getEventTypeColor(event.event_type)}`}
+                  >
+                    {event.event_type}
+                  </span>
+                </td>
+                <td className="py-3 px-4 text-sm font-mono text-slate-600">
+                  {event.ip_address || '-'}
+                </td>
+                <td className="py-3 px-4 text-sm text-slate-600 max-w-xs truncate">
+                  {event.request_method && event.request_path
+                    ? `${event.request_method} ${event.request_path}`
+                    : '-'}
+                </td>
+              </tr>
+            ))
+          )}
+        </tbody>
+      </table>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/infrastructure/middleware/_components/IpListTab.tsx b/admin-lehrer/app/(admin)/infrastructure/middleware/_components/IpListTab.tsx
new file mode 100644
index 0000000..7159f77
--- /dev/null
+++ b/admin-lehrer/app/(admin)/infrastructure/middleware/_components/IpListTab.tsx
@@ -0,0 +1,133 @@
+'use client'
+
+import type { RateLimitIP } from '../types'
+
+interface IpListTabProps {
+  ipList: RateLimitIP[]
+  actionLoading: string | null
+  newIP: string
+  setNewIP: (v: string) => void
+  newIPType: 'whitelist' | 'blacklist'
+  setNewIPType: (v: 'whitelist' | 'blacklist') => void
+  newIPReason: string
+  setNewIPReason: (v: string) => void
+  addIP: (e: React.FormEvent) => void
+  removeIP: (id: string) => void
+}
+
+export function IpListTab({
+  ipList,
+  actionLoading,
+  newIP,
+  setNewIP,
+  newIPType,
+  setNewIPType,
+  newIPReason,
+  setNewIPReason,
+  addIP,
+  removeIP,
+}: IpListTabProps) {
+  return (
+    <div>
+      {/* Add IP Form */}
+      <form onSubmit={addIP} className="mb-6 p-4 bg-slate-50 rounded-lg border border-slate-200">
+        <h3 className="font-semibold text-slate-900 mb-4">IP hinzufuegen</h3>
+        <div className="flex flex-wrap gap-3">
+          <input
+            type="text"
+            value={newIP}
+            onChange={e => setNewIP(e.target.value)}
+            placeholder="IP-Adresse (z.B. 192.168.1.1)"
+            className="flex-1 min-w-[200px] px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500"
+          />
+          <select
+            value={newIPType}
+            onChange={e => setNewIPType(e.target.value as 'whitelist' | 'blacklist')}
+            className="px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500"
+          >
+            <option value="whitelist">Whitelist</option>
+            <option value="blacklist">Blacklist</option>
+          </select>
+          <input
+            type="text"
+            value={newIPReason}
+            onChange={e => setNewIPReason(e.target.value)}
+            placeholder="Grund (optional)"
+            className="flex-1 min-w-[150px] px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500"
+          />
+          <button
+            type="submit"
+            disabled={!newIP.trim() || actionLoading === 'add-ip'}
+            className="px-6 py-2 bg-orange-600 text-white rounded-lg font-medium hover:bg-orange-700 disabled:opacity-50 transition-colors"
+          >
+            {actionLoading === 'add-ip' ? 'Hinzufuegen...' : 'Hinzufuegen'}
+          </button>
+        </div>
+      </form>
+
+      {/* IP List Table */}
+      <div className="overflow-x-auto">
+        <table className="w-full">
+          <thead>
+            <tr className="border-b border-slate-200">
+              <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">
+                IP-Adresse
+              </th>
+              <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">
+                Typ
+              </th>
+              <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">
+                Grund
+              </th>
+              <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">
+                Hinzugefuegt
+              </th>
+              <th className="text-right py-3 px-4 text-xs font-semibold text-slate-500 uppercase">
+                Aktion
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {ipList.length === 0 ? (
+              <tr>
+                <td colSpan={5} className="text-center py-8 text-slate-500">
+                  Keine IP-Eintraege vorhanden.
+                </td>
+              </tr>
+            ) : (
+              ipList.map(ip => (
+                <tr key={ip.id} className="border-b border-slate-100 hover:bg-slate-50">
+                  <td className="py-3 px-4 font-mono text-sm">{ip.ip_address}</td>
+                  <td className="py-3 px-4">
+                    <span
+                      className={`px-2 py-1 rounded text-xs font-semibold ${
+                        ip.list_type === 'whitelist'
+                          ? 'bg-green-100 text-green-800'
+                          : 'bg-red-100 text-red-800'
+                      }`}
+                    >
+                      {ip.list_type === 'whitelist' ? 'Whitelist' : 'Blacklist'}
+                    </span>
+                  </td>
+                  <td className="py-3 px-4 text-sm text-slate-600">{ip.reason || '-'}</td>
+                  <td className="py-3 px-4 text-sm text-slate-500">
+                    {new Date(ip.created_at).toLocaleString('de-DE')}
+                  </td>
+                  <td className="py-3 px-4 text-right">
+                    <button
+                      onClick={() => removeIP(ip.id)}
+                      disabled={actionLoading === `remove-${ip.id}`}
+                      className="px-3 py-1 text-sm text-red-600 hover:bg-red-50 rounded transition-colors disabled:opacity-50"
+                    >
+                      {actionLoading === `remove-${ip.id}` ? '...' : 'Entfernen'}
+                    </button>
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/infrastructure/middleware/_components/OverviewTab.tsx b/admin-lehrer/app/(admin)/infrastructure/middleware/_components/OverviewTab.tsx
new file mode 100644
index 0000000..7b056e4
--- /dev/null
+++ b/admin-lehrer/app/(admin)/infrastructure/middleware/_components/OverviewTab.tsx
@@ -0,0 +1,60 @@
+'use client'
+
+import type { MiddlewareConfig } from '../types'
+import { getMiddlewareDescription } from './helpers'
+
+interface OverviewTabProps {
+  configs: MiddlewareConfig[]
+  actionLoading: string | null
+  toggleMiddleware: (name: string, enabled: boolean) => void
+}
+
+export function OverviewTab({ configs, actionLoading, toggleMiddleware }: OverviewTabProps) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      {configs.map(config => {
+        const info = getMiddlewareDescription(config.middleware_name)
+        return (
+          <div
+            key={config.id}
+            className={`rounded-lg p-4 border ${
+              config.enabled
+                ? 'bg-green-50 border-green-200'
+                : 'bg-slate-50 border-slate-200'
+            }`}
+          >
+            <div className="flex justify-between items-start mb-2">
+              <div className="flex items-center gap-2">
+                <span className="text-xl">{info.icon}</span>
+                <span className="font-semibold text-slate-900 capitalize">
+                  {config.middleware_name.replace('_', ' ')}
+                </span>
+              </div>
+              <button
+                onClick={() => toggleMiddleware(config.middleware_name, !config.enabled)}
+                disabled={actionLoading === config.middleware_name}
+                className={`px-3 py-1 rounded-full text-xs font-semibold transition-colors ${
+                  config.enabled
+                    ? 'bg-green-200 text-green-800 hover:bg-green-300'
+                    : 'bg-slate-200 text-slate-600 hover:bg-slate-300'
+                }`}
+              >
+                {actionLoading === config.middleware_name
+                  ? '...'
+                  : config.enabled
+                  ? 'Aktiv'
+                  : 'Inaktiv'}
+              </button>
+            </div>
+            <p className="text-sm text-slate-600">{info.desc}</p>
+            {config.updated_at && (
+              <div className="mt-2 text-xs text-slate-400">
+                Aktualisiert: {new Date(config.updated_at).toLocaleString('de-DE')}
+              </div>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/infrastructure/middleware/_components/StatsTab.tsx b/admin-lehrer/app/(admin)/infrastructure/middleware/_components/StatsTab.tsx
new file mode 100644
index 0000000..0c5ca4c
--- /dev/null
+++ b/admin-lehrer/app/(admin)/infrastructure/middleware/_components/StatsTab.tsx
@@ -0,0 +1,68 @@
+'use client'
+
+import type { MiddlewareStats } from '../types'
+import { getMiddlewareDescription, getEventTypeColor } from './helpers'
+
+interface StatsTabProps {
+  stats: MiddlewareStats[]
+}
+
+export function StatsTab({ stats }: StatsTabProps) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+      {stats.map(stat => {
+        const info = getMiddlewareDescription(stat.middleware_name)
+        return (
+          <div key={stat.middleware_name} className="bg-slate-50 rounded-lg p-4 border border-slate-200">
+            <h3 className="font-semibold text-slate-900 flex items-center gap-2 mb-4">
+              <span>{info.icon}</span>
+              <span className="capitalize">{stat.middleware_name.replace('_', ' ')}</span>
+            </h3>
+            <div className="grid grid-cols-3 gap-4 mb-4">
+              <div>
+                <div className="text-2xl font-bold text-slate-900">{stat.total_events}</div>
+                <div className="text-xs text-slate-500">Gesamt</div>
+              </div>
+              <div>
+                <div className="text-2xl font-bold text-blue-600">{stat.events_last_hour}</div>
+                <div className="text-xs text-slate-500">Letzte Stunde</div>
+              </div>
+              <div>
+                <div className="text-2xl font-bold text-orange-600">{stat.events_last_24h}</div>
+                <div className="text-xs text-slate-500">24 Stunden</div>
+              </div>
+            </div>
+            {stat.top_event_types.length > 0 && (
+              <div className="mb-3">
+                <div className="text-xs font-semibold text-slate-500 uppercase mb-2">
+                  Top Event-Typen
+                </div>
+                <div className="flex flex-wrap gap-2">
+                  {stat.top_event_types.slice(0, 3).map(et => (
+                    <span
+                      key={et.event_type}
+                      className={`px-2 py-1 rounded text-xs ${getEventTypeColor(et.event_type)}`}
+                    >
+                      {et.event_type} ({et.count})
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+            {stat.top_ips.length > 0 && (
+              <div>
+                <div className="text-xs font-semibold text-slate-500 uppercase mb-2">Top IPs</div>
+                <div className="text-xs text-slate-600">
+                  {stat.top_ips
+                    .slice(0, 3)
+                    .map(ip => `${ip.ip_address} (${ip.count})`)
+                    .join(', ')}
+                </div>
+              </div>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/infrastructure/middleware/_components/helpers.ts b/admin-lehrer/app/(admin)/infrastructure/middleware/_components/helpers.ts
new file mode 100644
index 0000000..c3a61ac
--- /dev/null
+++ b/admin-lehrer/app/(admin)/infrastructure/middleware/_components/helpers.ts
@@ -0,0 +1,24 @@
+export function getMiddlewareDescription(name: string): { icon: string; desc: string } {
+  const descriptions: Record<string, { icon: string; desc: string }> = {
+    request_id: { icon: '\u{1F194}', desc: 'Generiert eindeutige Request-IDs fuer Tracing' },
+    security_headers: { icon: '\u{1F6E1}\uFE0F', desc: 'Fuegt Security-Header hinzu (CSP, HSTS, etc.)' },
+    cors: { icon: '\u{1F310}', desc: 'Cross-Origin Resource Sharing Konfiguration' },
+    rate_limiter: { icon: '\u23F1\uFE0F', desc: 'Rate Limiting zum Schutz vor Missbrauch' },
+    pii_redactor: { icon: '\u{1F512}', desc: 'Redaktiert personenbezogene Daten in Logs' },
+    input_gate: { icon: '\u{1F6AA}', desc: 'Validiert und sanitisiert Eingaben' },
+  }
+  return descriptions[name] || { icon: '\u2699\uFE0F', desc: 'Middleware-Komponente' }
+}
+
+export function getEventTypeColor(eventType: string): string {
+  if (eventType.includes('error') || eventType.includes('blocked') || eventType.includes('blacklist')) {
+    return 'bg-red-100 text-red-800'
+  }
+  if (eventType.includes('warning') || eventType.includes('rate_limit')) {
+    return 'bg-yellow-100 text-yellow-800'
+  }
+  if (eventType.includes('success') || eventType.includes('whitelist')) {
+    return 'bg-green-100 text-green-800'
+  }
+  return 'bg-slate-100 text-slate-800'
+}
diff --git a/admin-lehrer/app/(admin)/infrastructure/middleware/page.tsx b/admin-lehrer/app/(admin)/infrastructure/middleware/page.tsx
index 7757a6f..c6cadfc 100644
--- a/admin-lehrer/app/(admin)/infrastructure/middleware/page.tsx
+++ b/admin-lehrer/app/(admin)/infrastructure/middleware/page.tsx
@@ -7,210 +7,25 @@
  * Migrated from old admin (/admin/middleware)
  */
 
-import { useEffect, useState, useCallback } from 'react'
 import { PagePurpose } from '@/components/common/PagePurpose'
+import { useMiddlewareAdmin } from './useMiddlewareAdmin'
+import { OverviewTab } from './_components/OverviewTab'
+import { ConfigTab } from './_components/ConfigTab'
+import { IpListTab } from './_components/IpListTab'
+import { EventsTab } from './_components/EventsTab'
+import { StatsTab } from './_components/StatsTab'
+import type { TabId } from './types'
 
-interface MiddlewareConfig {
-  id: string
-  middleware_name: string
-  enabled: boolean
-  config: Record<string, unknown>
-  updated_at: string | null
-}
-
-interface RateLimitIP {
-  id: string
-  ip_address: string
-  list_type: 'whitelist' | 'blacklist'
-  reason: string | null
-  expires_at: string | null
-  created_at: string
-}
-
-interface MiddlewareEvent {
-  id: string
-  middleware_name: string
-  event_type: string
-  ip_address: string | null
-  user_id: string | null
-  request_path: string | null
-  request_method: string | null
-  details: Record<string, unknown> | null
-  created_at: string
-}
-
-interface MiddlewareStats {
-  middleware_name: string
-  total_events: number
-  events_last_hour: number
-  events_last_24h: number
-  top_event_types: Array<{ event_type: string; count: number }>
-  top_ips: Array<{ ip_address: string; count: number }>
+const TAB_LABELS: Record<TabId, string> = {
+  overview: 'Uebersicht',
+  config: 'Konfiguration',
+  'ip-list': 'IP-Listen',
+  events: 'Events',
+  stats: 'Statistiken',
 }
 
 export default function MiddlewareAdminPage() {
-  const [configs, setConfigs] = useState<MiddlewareConfig[]>([])
-  const [ipList, setIpList] = useState<RateLimitIP[]>([])
-  const [events, setEvents] = useState<MiddlewareEvent[]>([])
-  const [stats, setStats] = useState<MiddlewareStats[]>([])
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-  const [activeTab, setActiveTab] = useState<'overview' | 'config' | 'ip-list' | 'events' | 'stats'>('overview')
-  const [actionLoading, setActionLoading] = useState<string | null>(null)
-
-  // IP Form
-  const [newIP, setNewIP] = useState('')
-  const [newIPType, setNewIPType] = useState<'whitelist' | 'blacklist'>('whitelist')
-  const [newIPReason, setNewIPReason] = useState('')
-
-  const fetchData = useCallback(async () => {
-    setLoading(true)
-    setError(null)
-
-    try {
-      const [configsRes, ipListRes, eventsRes, statsRes] = await Promise.all([
-        fetch('/api/admin/middleware'),
-        fetch('/api/admin/middleware/rate-limit/ip-list'),
-        fetch('/api/admin/middleware/events?limit=50'),
-        fetch('/api/admin/middleware/stats'),
-      ])
-
-      if (configsRes.ok) {
-        setConfigs(await configsRes.json())
-      }
-      if (ipListRes.ok) {
-        setIpList(await ipListRes.json())
-      }
-      if (eventsRes.ok) {
-        setEvents(await eventsRes.json())
-      }
-      if (statsRes.ok) {
-        setStats(await statsRes.json())
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Verbindung zum Backend fehlgeschlagen')
-    } finally {
-      setLoading(false)
-    }
-  }, [])
-
-  useEffect(() => {
-    fetchData()
-  }, [fetchData])
-
-  useEffect(() => {
-    const interval = setInterval(fetchData, 30000)
-    return () => clearInterval(interval)
-  }, [fetchData])
-
-  const toggleMiddleware = async (name: string, enabled: boolean) => {
-    setActionLoading(name)
-    setError(null)
-
-    try {
-      const response = await fetch(`/api/admin/middleware/${name}`, {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ enabled }),
-      })
-
-      if (!response.ok) {
-        throw new Error(`Fehler beim Aktualisieren: ${response.statusText}`)
-      }
-
-      // Update local state
-      setConfigs(prev =>
-        prev.map(c => (c.middleware_name === name ? { ...c, enabled } : c))
-      )
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Aktualisierung fehlgeschlagen')
-    } finally {
-      setActionLoading(null)
-    }
-  }
-
-  const addIP = async (e: React.FormEvent) => {
-    e.preventDefault()
-    if (!newIP.trim()) return
-
-    setActionLoading('add-ip')
-    setError(null)
-
-    try {
-      const response = await fetch('/api/admin/middleware/rate-limit/ip-list', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          ip_address: newIP.trim(),
-          list_type: newIPType,
-          reason: newIPReason.trim() || null,
-        }),
-      })
-
-      if (!response.ok) {
-        const data = await response.json()
-        throw new Error(data.detail || `Fehler: ${response.statusText}`)
-      }
-
-      const newEntry = await response.json()
-      setIpList(prev => [newEntry, ...prev])
-      setNewIP('')
-      setNewIPReason('')
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'IP konnte nicht hinzugefuegt werden')
-    } finally {
-      setActionLoading(null)
-    }
-  }
-
-  const removeIP = async (id: string) => {
-    setActionLoading(`remove-${id}`)
-    setError(null)
-
-    try {
-      const response = await fetch(`/api/admin/middleware/rate-limit/ip-list/${id}`, {
-        method: 'DELETE',
-      })
-
-      if (!response.ok) {
-        throw new Error(`Fehler beim Loeschen: ${response.statusText}`)
-      }
-
-      setIpList(prev => prev.filter(ip => ip.id !== id))
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'IP konnte nicht entfernt werden')
-    } finally {
-      setActionLoading(null)
-    }
-  }
-
-  const getMiddlewareDescription = (name: string): { icon: string; desc: string } => {
-    const descriptions: Record<string, { icon: string; desc: string }> = {
-      request_id: { icon: '🆔', desc: 'Generiert eindeutige Request-IDs fuer Tracing' },
-      security_headers: { icon: '🛡️', desc: 'Fuegt Security-Header hinzu (CSP, HSTS, etc.)' },
-      cors: { icon: '🌐', desc: 'Cross-Origin Resource Sharing Konfiguration' },
-      rate_limiter: { icon: '⏱️', desc: 'Rate Limiting zum Schutz vor Missbrauch' },
-      pii_redactor: { icon: '🔒', desc: 'Redaktiert personenbezogene Daten in Logs' },
-      input_gate: { icon: '🚪', desc: 'Validiert und sanitisiert Eingaben' },
-    }
-    return descriptions[name] || { icon: '⚙️', desc: 'Middleware-Komponente' }
-  }
-
-  const getEventTypeColor = (eventType: string) => {
-    if (eventType.includes('error') || eventType.includes('blocked') || eventType.includes('blacklist')) {
-      return 'bg-red-100 text-red-800'
-    }
-    if (eventType.includes('warning') || eventType.includes('rate_limit')) {
-      return 'bg-yellow-100 text-yellow-800'
-    }
-    if (eventType.includes('success') || eventType.includes('whitelist')) {
-      return 'bg-green-100 text-green-800'
-    }
-    return 'bg-slate-100 text-slate-800'
-  }
-
-  const whitelistCount = ipList.filter(ip => ip.list_type === 'whitelist').length
-  const blacklistCount = ipList.filter(ip => ip.list_type === 'blacklist').length
+  const mw = useMiddlewareAdmin()
 
   return (
     <div>
@@ -237,29 +52,29 @@ export default function MiddlewareAdminPage() {
         <div className="flex justify-between items-center mb-6">
           <h2 className="text-xl font-semibold text-slate-900">Middleware Status</h2>
           <button
-            onClick={fetchData}
-            disabled={loading}
+            onClick={mw.fetchData}
+            disabled={mw.loading}
             className="px-4 py-2 text-sm bg-orange-600 text-white rounded-lg hover:bg-orange-700 disabled:opacity-50 transition-colors"
           >
-            {loading ? 'Laden...' : 'Aktualisieren'}
+            {mw.loading ? 'Laden...' : 'Aktualisieren'}
           </button>
         </div>
 
         <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
           <div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
-            <div className="text-2xl font-bold text-slate-900">{configs.length}</div>
+            <div className="text-2xl font-bold text-slate-900">{mw.configs.length}</div>
             <div className="text-sm text-slate-600">Middleware</div>
           </div>
           <div className="bg-green-50 rounded-lg p-4 border border-green-200">
-            <div className="text-2xl font-bold text-green-600">{whitelistCount}</div>
+            <div className="text-2xl font-bold text-green-600">{mw.whitelistCount}</div>
             <div className="text-sm text-slate-600">Whitelist IPs</div>
           </div>
           <div className="bg-red-50 rounded-lg p-4 border border-red-200">
-            <div className="text-2xl font-bold text-red-600">{blacklistCount}</div>
+            <div className="text-2xl font-bold text-red-600">{mw.blacklistCount}</div>
             <div className="text-sm text-slate-600">Blacklist IPs</div>
           </div>
           <div className="bg-blue-50 rounded-lg p-4 border border-blue-200">
-            <div className="text-2xl font-bold text-blue-600">{events.length}</div>
+            <div className="text-2xl font-bold text-blue-600">{mw.events.length}</div>
             <div className="text-sm text-slate-600">Recent Events</div>
           </div>
         </div>
@@ -271,359 +86,59 @@ export default function MiddlewareAdminPage() {
           {(['overview', 'config', 'ip-list', 'events', 'stats'] as const).map(tab => (
             <button
               key={tab}
-              onClick={() => setActiveTab(tab)}
+              onClick={() => mw.setActiveTab(tab)}
               className={`px-6 py-3 text-sm font-medium whitespace-nowrap transition-colors ${
-                activeTab === tab
+                mw.activeTab === tab
                   ? 'bg-orange-50 text-orange-700 border-b-2 border-orange-600'
                   : 'text-slate-600 hover:bg-slate-50'
               }`}
             >
-              {tab === 'overview' && 'Uebersicht'}
-              {tab === 'config' && 'Konfiguration'}
-              {tab === 'ip-list' && `IP-Listen (${ipList.length})`}
-              {tab === 'events' && 'Events'}
-              {tab === 'stats' && 'Statistiken'}
+              {tab === 'ip-list' ? `${TAB_LABELS[tab]} (${mw.ipList.length})` : TAB_LABELS[tab]}
             </button>
           ))}
         </div>
 
         <div className="p-6">
-          {error && (
-            <div className="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700">{error}</div>
+          {mw.error && (
+            <div className="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700">{mw.error}</div>
           )}
 
-          {loading ? (
+          {mw.loading ? (
             <div className="flex justify-center py-12">
               <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-orange-600" />
             </div>
           ) : (
             <>
-              {/* Overview Tab */}
-              {activeTab === 'overview' && (
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                  {configs.map(config => {
-                    const info = getMiddlewareDescription(config.middleware_name)
-                    return (
-                      <div
-                        key={config.id}
-                        className={`rounded-lg p-4 border ${
-                          config.enabled
-                            ? 'bg-green-50 border-green-200'
-                            : 'bg-slate-50 border-slate-200'
-                        }`}
-                      >
-                        <div className="flex justify-between items-start mb-2">
-                          <div className="flex items-center gap-2">
-                            <span className="text-xl">{info.icon}</span>
-                            <span className="font-semibold text-slate-900 capitalize">
-                              {config.middleware_name.replace('_', ' ')}
-                            </span>
-                          </div>
-                          <button
-                            onClick={() => toggleMiddleware(config.middleware_name, !config.enabled)}
-                            disabled={actionLoading === config.middleware_name}
-                            className={`px-3 py-1 rounded-full text-xs font-semibold transition-colors ${
-                              config.enabled
-                                ? 'bg-green-200 text-green-800 hover:bg-green-300'
-                                : 'bg-slate-200 text-slate-600 hover:bg-slate-300'
-                            }`}
-                          >
-                            {actionLoading === config.middleware_name
-                              ? '...'
-                              : config.enabled
-                              ? 'Aktiv'
-                              : 'Inaktiv'}
-                          </button>
-                        </div>
-                        <p className="text-sm text-slate-600">{info.desc}</p>
-                        {config.updated_at && (
-                          <div className="mt-2 text-xs text-slate-400">
-                            Aktualisiert: {new Date(config.updated_at).toLocaleString('de-DE')}
-                          </div>
-                        )}
-                      </div>
-                    )
-                  })}
-                </div>
+              {mw.activeTab === 'overview' && (
+                <OverviewTab
+                  configs={mw.configs}
+                  actionLoading={mw.actionLoading}
+                  toggleMiddleware={mw.toggleMiddleware}
+                />
               )}
-
-              {/* Config Tab */}
-              {activeTab === 'config' && (
-                <div className="space-y-4">
-                  {configs.map(config => {
-                    const info = getMiddlewareDescription(config.middleware_name)
-                    return (
-                      <div key={config.id} className="bg-slate-50 rounded-lg p-4 border border-slate-200">
-                        <div className="flex justify-between items-start mb-4">
-                          <div>
-                            <h3 className="font-semibold text-slate-900 flex items-center gap-2">
-                              <span>{info.icon}</span>
-                              <span className="capitalize">{config.middleware_name.replace('_', ' ')}</span>
-                            </h3>
-                            <p className="text-sm text-slate-600">{info.desc}</p>
-                          </div>
-                          <div className="flex items-center gap-3">
-                            <span
-                              className={`px-3 py-1 rounded-full text-xs font-semibold ${
-                                config.enabled ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
-                              }`}
-                            >
-                              {config.enabled ? 'Aktiviert' : 'Deaktiviert'}
-                            </span>
-                            <button
-                              onClick={() => toggleMiddleware(config.middleware_name, !config.enabled)}
-                              disabled={actionLoading === config.middleware_name}
-                              className="px-4 py-1.5 text-sm border border-slate-300 rounded-lg hover:bg-slate-100 disabled:opacity-50 transition-colors"
-                            >
-                              {actionLoading === config.middleware_name
-                                ? '...'
-                                : config.enabled
-                                ? 'Deaktivieren'
-                                : 'Aktivieren'}
-                            </button>
-                          </div>
-                        </div>
-                        {Object.keys(config.config).length > 0 && (
-                          <div className="mt-3 pt-3 border-t border-slate-200">
-                            <div className="text-xs font-semibold text-slate-500 uppercase mb-2">
-                              Konfiguration
-                            </div>
-                            <pre className="text-xs bg-white p-3 rounded border border-slate-200 overflow-x-auto">
-                              {JSON.stringify(config.config, null, 2)}
-                            </pre>
-                          </div>
-                        )}
-                      </div>
-                    )
-                  })}
-                </div>
+              {mw.activeTab === 'config' && (
+                <ConfigTab
+                  configs={mw.configs}
+                  actionLoading={mw.actionLoading}
+                  toggleMiddleware={mw.toggleMiddleware}
+                />
               )}
-
-              {/* IP List Tab */}
-              {activeTab === 'ip-list' && (
-                <div>
-                  {/* Add IP Form */}
-                  <form onSubmit={addIP} className="mb-6 p-4 bg-slate-50 rounded-lg border border-slate-200">
-                    <h3 className="font-semibold text-slate-900 mb-4">IP hinzufuegen</h3>
-                    <div className="flex flex-wrap gap-3">
-                      <input
-                        type="text"
-                        value={newIP}
-                        onChange={e => setNewIP(e.target.value)}
-                        placeholder="IP-Adresse (z.B. 192.168.1.1)"
-                        className="flex-1 min-w-[200px] px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500"
-                      />
-                      <select
-                        value={newIPType}
-                        onChange={e => setNewIPType(e.target.value as 'whitelist' | 'blacklist')}
-                        className="px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500"
-                      >
-                        <option value="whitelist">Whitelist</option>
-                        <option value="blacklist">Blacklist</option>
-                      </select>
-                      <input
-                        type="text"
-                        value={newIPReason}
-                        onChange={e => setNewIPReason(e.target.value)}
-                        placeholder="Grund (optional)"
-                        className="flex-1 min-w-[150px] px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500"
-                      />
-                      <button
-                        type="submit"
-                        disabled={!newIP.trim() || actionLoading === 'add-ip'}
-                        className="px-6 py-2 bg-orange-600 text-white rounded-lg font-medium hover:bg-orange-700 disabled:opacity-50 transition-colors"
-                      >
-                        {actionLoading === 'add-ip' ? 'Hinzufuegen...' : 'Hinzufuegen'}
-                      </button>
-                    </div>
-                  </form>
-
-                  {/* IP List Table */}
-                  <div className="overflow-x-auto">
-                    <table className="w-full">
-                      <thead>
-                        <tr className="border-b border-slate-200">
-                          <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">
-                            IP-Adresse
-                          </th>
-                          <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">
-                            Typ
-                          </th>
-                          <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">
-                            Grund
-                          </th>
-                          <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">
-                            Hinzugefuegt
-                          </th>
-                          <th className="text-right py-3 px-4 text-xs font-semibold text-slate-500 uppercase">
-                            Aktion
-                          </th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        {ipList.length === 0 ? (
-                          <tr>
-                            <td colSpan={5} className="text-center py-8 text-slate-500">
-                              Keine IP-Eintraege vorhanden.
-                            </td>
-                          </tr>
-                        ) : (
-                          ipList.map(ip => (
-                            <tr key={ip.id} className="border-b border-slate-100 hover:bg-slate-50">
-                              <td className="py-3 px-4 font-mono text-sm">{ip.ip_address}</td>
-                              <td className="py-3 px-4">
-                                <span
-                                  className={`px-2 py-1 rounded text-xs font-semibold ${
-                                    ip.list_type === 'whitelist'
-                                      ? 'bg-green-100 text-green-800'
-                                      : 'bg-red-100 text-red-800'
-                                  }`}
-                                >
-                                  {ip.list_type === 'whitelist' ? 'Whitelist' : 'Blacklist'}
-                                </span>
-                              </td>
-                              <td className="py-3 px-4 text-sm text-slate-600">{ip.reason || '-'}</td>
-                              <td className="py-3 px-4 text-sm text-slate-500">
-                                {new Date(ip.created_at).toLocaleString('de-DE')}
-                              </td>
-                              <td className="py-3 px-4 text-right">
-                                <button
-                                  onClick={() => removeIP(ip.id)}
-                                  disabled={actionLoading === `remove-${ip.id}`}
-                                  className="px-3 py-1 text-sm text-red-600 hover:bg-red-50 rounded transition-colors disabled:opacity-50"
-                                >
-                                  {actionLoading === `remove-${ip.id}` ? '...' : 'Entfernen'}
-                                </button>
-                              </td>
-                            </tr>
-                          ))
-                        )}
-                      </tbody>
-                    </table>
-                  </div>
-                </div>
-              )}
-
-              {/* Events Tab */}
-              {activeTab === 'events' && (
-                <div className="overflow-x-auto">
-                  <table className="w-full">
-                    <thead>
-                      <tr className="border-b border-slate-200">
-                        <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">
-                          Zeit
-                        </th>
-                        <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">
-                          Middleware
-                        </th>
-                        <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">
-                          Event
-                        </th>
-                        <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">
-                          IP
-                        </th>
-                        <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">
-                          Pfad
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {events.length === 0 ? (
-                        <tr>
-                          <td colSpan={5} className="text-center py-8 text-slate-500">
-                            Keine Events vorhanden.
-                          </td>
-                        </tr>
-                      ) : (
-                        events.map(event => (
-                          <tr key={event.id} className="border-b border-slate-100 hover:bg-slate-50">
-                            <td className="py-3 px-4 text-sm text-slate-500">
-                              {new Date(event.created_at).toLocaleString('de-DE')}
-                            </td>
-                            <td className="py-3 px-4 text-sm capitalize">
-                              {event.middleware_name.replace('_', ' ')}
-                            </td>
-                            <td className="py-3 px-4">
-                              <span
-                                className={`px-2 py-1 rounded text-xs font-semibold ${getEventTypeColor(event.event_type)}`}
-                              >
-                                {event.event_type}
-                              </span>
-                            </td>
-                            <td className="py-3 px-4 text-sm font-mono text-slate-600">
-                              {event.ip_address || '-'}
-                            </td>
-                            <td className="py-3 px-4 text-sm text-slate-600 max-w-xs truncate">
-                              {event.request_method && event.request_path
-                                ? `${event.request_method} ${event.request_path}`
-                                : '-'}
-                            </td>
-                          </tr>
-                        ))
-                      )}
-                    </tbody>
-                  </table>
-                </div>
-              )}
-
-              {/* Stats Tab */}
-              {activeTab === 'stats' && (
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                  {stats.map(stat => {
-                    const info = getMiddlewareDescription(stat.middleware_name)
-                    return (
-                      <div key={stat.middleware_name} className="bg-slate-50 rounded-lg p-4 border border-slate-200">
-                        <h3 className="font-semibold text-slate-900 flex items-center gap-2 mb-4">
-                          <span>{info.icon}</span>
-                          <span className="capitalize">{stat.middleware_name.replace('_', ' ')}</span>
-                        </h3>
-                        <div className="grid grid-cols-3 gap-4 mb-4">
-                          <div>
-                            <div className="text-2xl font-bold text-slate-900">{stat.total_events}</div>
-                            <div className="text-xs text-slate-500">Gesamt</div>
-                          </div>
-                          <div>
-                            <div className="text-2xl font-bold text-blue-600">{stat.events_last_hour}</div>
-                            <div className="text-xs text-slate-500">Letzte Stunde</div>
-                          </div>
-                          <div>
-                            <div className="text-2xl font-bold text-orange-600">{stat.events_last_24h}</div>
-                            <div className="text-xs text-slate-500">24 Stunden</div>
-                          </div>
-                        </div>
-                        {stat.top_event_types.length > 0 && (
-                          <div className="mb-3">
-                            <div className="text-xs font-semibold text-slate-500 uppercase mb-2">
-                              Top Event-Typen
-                            </div>
-                            <div className="flex flex-wrap gap-2">
-                              {stat.top_event_types.slice(0, 3).map(et => (
-                                <span
-                                  key={et.event_type}
-                                  className={`px-2 py-1 rounded text-xs ${getEventTypeColor(et.event_type)}`}
-                                >
-                                  {et.event_type} ({et.count})
-                                </span>
-                              ))}
-                            </div>
-                          </div>
-                        )}
-                        {stat.top_ips.length > 0 && (
-                          <div>
-                            <div className="text-xs font-semibold text-slate-500 uppercase mb-2">Top IPs</div>
-                            <div className="text-xs text-slate-600">
-                              {stat.top_ips
-                                .slice(0, 3)
-                                .map(ip => `${ip.ip_address} (${ip.count})`)
-                                .join(', ')}
-                            </div>
-                          </div>
-                        )}
-                      </div>
-                    )
-                  })}
-                </div>
+              {mw.activeTab === 'ip-list' && (
+                <IpListTab
+                  ipList={mw.ipList}
+                  actionLoading={mw.actionLoading}
+                  newIP={mw.newIP}
+                  setNewIP={mw.setNewIP}
+                  newIPType={mw.newIPType}
+                  setNewIPType={mw.setNewIPType}
+                  newIPReason={mw.newIPReason}
+                  setNewIPReason={mw.setNewIPReason}
+                  addIP={mw.addIP}
+                  removeIP={mw.removeIP}
+                />
               )}
+              {mw.activeTab === 'events' && <EventsTab events={mw.events} />}
+              {mw.activeTab === 'stats' && <StatsTab stats={mw.stats} />}
             </>
           )}
         </div>
diff --git a/admin-lehrer/app/(admin)/infrastructure/middleware/types.ts b/admin-lehrer/app/(admin)/infrastructure/middleware/types.ts
new file mode 100644
index 0000000..1dbc23d
--- /dev/null
+++ b/admin-lehrer/app/(admin)/infrastructure/middleware/types.ts
@@ -0,0 +1,39 @@
+export interface MiddlewareConfig {
+  id: string
+  middleware_name: string
+  enabled: boolean
+  config: Record<string, unknown>
+  updated_at: string | null
+}
+
+export interface RateLimitIP {
+  id: string
+  ip_address: string
+  list_type: 'whitelist' | 'blacklist'
+  reason: string | null
+  expires_at: string | null
+  created_at: string
+}
+
+export interface MiddlewareEvent {
+  id: string
+  middleware_name: string
+  event_type: string
+  ip_address: string | null
+  user_id: string | null
+  request_path: string | null
+  request_method: string | null
+  details: Record<string, unknown> | null
+  created_at: string
+}
+
+export interface MiddlewareStats {
+  middleware_name: string
+  total_events: number
+  events_last_hour: number
+  events_last_24h: number
+  top_event_types: Array<{ event_type: string; count: number }>
+  top_ips: Array<{ ip_address: string; count: number }>
+}
+
+export type TabId = 'overview' | 'config' | 'ip-list' | 'events' | 'stats'
diff --git a/admin-lehrer/app/(admin)/infrastructure/middleware/useMiddlewareAdmin.ts b/admin-lehrer/app/(admin)/infrastructure/middleware/useMiddlewareAdmin.ts
new file mode 100644
index 0000000..a8f134a
--- /dev/null
+++ b/admin-lehrer/app/(admin)/infrastructure/middleware/useMiddlewareAdmin.ts
@@ -0,0 +1,167 @@
+'use client'
+
+import { useEffect, useState, useCallback } from 'react'
+import type { MiddlewareConfig, RateLimitIP, MiddlewareEvent, MiddlewareStats, TabId } from './types'
+
+export function useMiddlewareAdmin() {
+  const [configs, setConfigs] = useState<MiddlewareConfig[]>([])
+  const [ipList, setIpList] = useState<RateLimitIP[]>([])
+  const [events, setEvents] = useState<MiddlewareEvent[]>([])
+  const [stats, setStats] = useState<MiddlewareStats[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [activeTab, setActiveTab] = useState<TabId>('overview')
+  const [actionLoading, setActionLoading] = useState<string | null>(null)
+
+  // IP Form
+  const [newIP, setNewIP] = useState('')
+  const [newIPType, setNewIPType] = useState<'whitelist' | 'blacklist'>('whitelist')
+  const [newIPReason, setNewIPReason] = useState('')
+
+  const fetchData = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+
+    try {
+      const [configsRes, ipListRes, eventsRes, statsRes] = await Promise.all([
+        fetch('/api/admin/middleware'),
+        fetch('/api/admin/middleware/rate-limit/ip-list'),
+        fetch('/api/admin/middleware/events?limit=50'),
+        fetch('/api/admin/middleware/stats'),
+      ])
+
+      if (configsRes.ok) {
+        setConfigs(await configsRes.json())
+      }
+      if (ipListRes.ok) {
+        setIpList(await ipListRes.json())
+      }
+      if (eventsRes.ok) {
+        setEvents(await eventsRes.json())
+      }
+      if (statsRes.ok) {
+        setStats(await statsRes.json())
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Verbindung zum Backend fehlgeschlagen')
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    fetchData()
+  }, [fetchData])
+
+  useEffect(() => {
+    const interval = setInterval(fetchData, 30000)
+    return () => clearInterval(interval)
+  }, [fetchData])
+
+  const toggleMiddleware = async (name: string, enabled: boolean) => {
+    setActionLoading(name)
+    setError(null)
+
+    try {
+      const response = await fetch(`/api/admin/middleware/${name}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ enabled }),
+      })
+
+      if (!response.ok) {
+        throw new Error(`Fehler beim Aktualisieren: ${response.statusText}`)
+      }
+
+      setConfigs(prev =>
+        prev.map(c => (c.middleware_name === name ? { ...c, enabled } : c))
+      )
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Aktualisierung fehlgeschlagen')
+    } finally {
+      setActionLoading(null)
+    }
+  }
+
+  const addIP = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!newIP.trim()) return
+
+    setActionLoading('add-ip')
+    setError(null)
+
+    try {
+      const response = await fetch('/api/admin/middleware/rate-limit/ip-list', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          ip_address: newIP.trim(),
+          list_type: newIPType,
+          reason: newIPReason.trim() || null,
+        }),
+      })
+
+      if (!response.ok) {
+        const data = await response.json()
+        throw new Error(data.detail || `Fehler: ${response.statusText}`)
+      }
+
+      const newEntry = await response.json()
+      setIpList(prev => [newEntry, ...prev])
+      setNewIP('')
+      setNewIPReason('')
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'IP konnte nicht hinzugefuegt werden')
+    } finally {
+      setActionLoading(null)
+    }
+  }
+
+  const removeIP = async (id: string) => {
+    setActionLoading(`remove-${id}`)
+    setError(null)
+
+    try {
+      const response = await fetch(`/api/admin/middleware/rate-limit/ip-list/${id}`, {
+        method: 'DELETE',
+      })
+
+      if (!response.ok) {
+        throw new Error(`Fehler beim Loeschen: ${response.statusText}`)
+      }
+
+      setIpList(prev => prev.filter(ip => ip.id !== id))
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'IP konnte nicht entfernt werden')
+    } finally {
+      setActionLoading(null)
+    }
+  }
+
+  const whitelistCount = ipList.filter(ip => ip.list_type === 'whitelist').length
+  const blacklistCount = ipList.filter(ip => ip.list_type === 'blacklist').length
+
+  return {
+    configs,
+    ipList,
+    events,
+    stats,
+    loading,
+    error,
+    activeTab,
+    setActiveTab,
+    actionLoading,
+    newIP,
+    setNewIP,
+    newIPType,
+    setNewIPType,
+    newIPReason,
+    setNewIPReason,
+    fetchData,
+    toggleMiddleware,
+    addIP,
+    removeIP,
+    whitelistCount,
+    blacklistCount,
+  }
+}
diff --git a/admin-lehrer/app/(admin)/infrastructure/night-mode/_components/InfoBox.tsx b/admin-lehrer/app/(admin)/infrastructure/night-mode/_components/InfoBox.tsx
new file mode 100644
index 0000000..048a4d9
--- /dev/null
+++ b/admin-lehrer/app/(admin)/infrastructure/night-mode/_components/InfoBox.tsx
@@ -0,0 +1,20 @@
+export function InfoBox() {
+  return (
+    <div className="mt-6 bg-orange-50 border border-orange-200 rounded-xl p-4">
+      <div className="flex gap-3">
+        <svg className="w-5 h-5 text-orange-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+        <div>
+          <h4 className="font-semibold text-orange-900">Hinweise zur Nachtabschaltung</h4>
+          <ul className="text-sm text-orange-800 mt-1 space-y-1 list-disc list-inside">
+            <li>Der <strong>night-scheduler</strong> und <strong>nginx</strong> bleiben immer aktiv</li>
+            <li>Services werden mit <code>docker compose stop</code> angehalten (Daten bleiben erhalten)</li>
+            <li>Bei manuellem Start/Stop wird die letzte Aktion gespeichert</li>
+            <li>Der Scheduler prueft jede Minute, ob eine Aktion faellig ist</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/infrastructure/night-mode/_components/MainControl.tsx b/admin-lehrer/app/(admin)/infrastructure/night-mode/_components/MainControl.tsx
new file mode 100644
index 0000000..2ee0db7
--- /dev/null
+++ b/admin-lehrer/app/(admin)/infrastructure/night-mode/_components/MainControl.tsx
@@ -0,0 +1,76 @@
+import type { NightModeConfig } from './types'
+
+interface MainControlProps {
+  editConfig: NightModeConfig | null
+  actionLoading: string | null
+  onToggle: () => void
+  onExecute: (action: 'start' | 'stop') => void
+}
+
+export function MainControl({ editConfig, actionLoading, onToggle, onExecute }: MainControlProps) {
+  return (
+    <div className="bg-white rounded-xl border border-slate-200 p-6 mb-6">
+      <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-6">
+        {/* Toggle */}
+        <div className="flex items-center gap-6">
+          <div
+            onClick={onToggle}
+            className={`relative inline-flex h-10 w-20 cursor-pointer items-center rounded-full transition-colors ${
+              editConfig?.enabled ? 'bg-orange-600' : 'bg-slate-300'
+            } ${actionLoading === 'toggle' ? 'opacity-50 cursor-wait' : ''}`}
+          >
+            <span
+              className={`inline-block h-8 w-8 transform rounded-full bg-white shadow-lg transition-transform ${
+                editConfig?.enabled ? 'translate-x-11' : 'translate-x-1'
+              }`}
+            />
+          </div>
+          <div>
+            <h2 className="text-xl font-semibold text-slate-900">
+              Nachtmodus: {editConfig?.enabled ? 'Aktiv' : 'Inaktiv'}
+            </h2>
+            <p className="text-sm text-slate-500">
+              {editConfig?.enabled
+                ? `Abschaltung um ${editConfig.shutdown_time}, Start um ${editConfig.startup_time}`
+                : 'Zeitgesteuerte Abschaltung ist deaktiviert'}
+            </p>
+          </div>
+        </div>
+
+        {/* Manuelle Aktionen */}
+        <div className="flex gap-3">
+          <button
+            onClick={() => onExecute('stop')}
+            disabled={actionLoading !== null}
+            className="flex items-center gap-2 px-5 py-2.5 bg-red-600 text-white rounded-lg font-medium hover:bg-red-700 disabled:opacity-50 transition-colors"
+          >
+            {actionLoading === 'stop' ? (
+              <span className="animate-spin">&#9696;</span>
+            ) : (
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" />
+              </svg>
+            )}
+            Jetzt abschalten
+          </button>
+          <button
+            onClick={() => onExecute('start')}
+            disabled={actionLoading !== null}
+            className="flex items-center gap-2 px-5 py-2.5 bg-green-600 text-white rounded-lg font-medium hover:bg-green-700 disabled:opacity-50 transition-colors"
+          >
+            {actionLoading === 'start' ? (
+              <span className="animate-spin">&#9696;</span>
+            ) : (
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+            )}
+            Jetzt starten
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/infrastructure/night-mode/_components/ServiceList.tsx b/admin-lehrer/app/(admin)/infrastructure/night-mode/_components/ServiceList.tsx
new file mode 100644
index 0000000..bc643ad
--- /dev/null
+++ b/admin-lehrer/app/(admin)/infrastructure/night-mode/_components/ServiceList.tsx
@@ -0,0 +1,93 @@
+import type { NightModeStatus, ServicesInfo } from './types'
+
+interface ServiceListProps {
+  services: ServicesInfo | null
+  status: NightModeStatus | null
+}
+
+function getServiceStatusColor(state: string) {
+  const lower = state.toLowerCase()
+  if (lower === 'running' || lower.includes('up')) {
+    return 'bg-green-100 text-green-800'
+  }
+  if (lower === 'exited' || lower.includes('exit')) {
+    return 'bg-slate-100 text-slate-600'
+  }
+  if (lower === 'paused' || lower.includes('pause')) {
+    return 'bg-yellow-100 text-yellow-800'
+  }
+  return 'bg-slate-100 text-slate-600'
+}
+
+export function ServiceList({ services, status }: ServiceListProps) {
+  return (
+    <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
+      <div className="p-6 border-b border-slate-200">
+        <h3 className="text-lg font-semibold text-slate-900">Services</h3>
+        <p className="text-sm text-slate-500 mt-1">
+          Gruen = wird verwaltet, Grau = ausgeschlossen (laeuft immer)
+        </p>
+      </div>
+
+      <div className="p-6">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
+          {services?.all_services.map(service => {
+            const serviceStatus = status?.services_status[service] || 'unknown'
+            const isExcluded = services.excluded_services.includes(service)
+
+            return (
+              <div
+                key={service}
+                className={`flex items-center justify-between px-4 py-3 rounded-lg border ${
+                  isExcluded
+                    ? 'bg-slate-50 border-slate-200'
+                    : 'bg-orange-50 border-orange-200'
+                }`}
+              >
+                <div className="flex items-center gap-2">
+                  {isExcluded ? (
+                    <svg className="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+                    </svg>
+                  ) : (
+                    <svg className="w-4 h-4 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                    </svg>
+                  )}
+                  <span className={`text-sm font-medium ${isExcluded ? 'text-slate-500' : 'text-slate-900'}`}>
+                    {service}
+                  </span>
+                </div>
+                <span className={`px-2 py-0.5 rounded text-xs font-semibold ${getServiceStatusColor(serviceStatus)}`}>
+                  {serviceStatus}
+                </span>
+              </div>
+            )
+          })}
+
+          {/* Auch excluded Services anzeigen, die nicht in all_services sind */}
+          {services?.excluded_services
+            .filter(s => !services.all_services.includes(s))
+            .map(service => (
+              <div
+                key={service}
+                className="flex items-center justify-between px-4 py-3 rounded-lg border bg-slate-50 border-slate-200"
+              >
+                <div className="flex items-center gap-2">
+                  <svg className="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+                  </svg>
+                  <span className="text-sm font-medium text-slate-500">
+                    {service}
+                  </span>
+                </div>
+                <span className="px-2 py-0.5 rounded text-xs font-semibold bg-slate-100 text-slate-600">
+                  excluded
+                </span>
+              </div>
+            ))}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/infrastructure/night-mode/_components/StatusCards.tsx b/admin-lehrer/app/(admin)/infrastructure/night-mode/_components/StatusCards.tsx
new file mode 100644
index 0000000..e6f0ba1
--- /dev/null
+++ b/admin-lehrer/app/(admin)/infrastructure/night-mode/_components/StatusCards.tsx
@@ -0,0 +1,91 @@
+import type { NightModeStatus } from './types'
+
+interface StatusCardsProps {
+  status: NightModeStatus | null
+  runningCount: number
+  stoppedCount: number
+}
+
+export function StatusCards({ status, runningCount, stoppedCount }: StatusCardsProps) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+      {/* Current Time */}
+      <div className="bg-white rounded-xl border border-slate-200 p-5">
+        <div className="flex items-center gap-3">
+          <div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
+            <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          </div>
+          <div>
+            <div className="text-2xl font-bold text-slate-900">{status?.current_time || '--:--'}</div>
+            <div className="text-sm text-slate-500">Aktuelle Zeit</div>
+          </div>
+        </div>
+      </div>
+
+      {/* Next Action */}
+      <div className="bg-white rounded-xl border border-slate-200 p-5">
+        <div className="flex items-center gap-3">
+          <div className={`w-12 h-12 rounded-full flex items-center justify-center ${
+            status?.next_action === 'shutdown' ? 'bg-red-100' : 'bg-green-100'
+          }`}>
+            {status?.next_action === 'shutdown' ? (
+              <svg className="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+              </svg>
+            ) : (
+              <svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+              </svg>
+            )}
+          </div>
+          <div>
+            <div className="text-2xl font-bold text-slate-900">
+              {status?.next_action_time || '--:--'}
+            </div>
+            <div className="text-sm text-slate-500">
+              {status?.next_action === 'shutdown' ? 'Naechste Abschaltung' : 'Naechster Start'}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Countdown */}
+      <div className="bg-white rounded-xl border border-slate-200 p-5">
+        <div className="flex items-center gap-3">
+          <div className="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center">
+            <svg className="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          </div>
+          <div>
+            <div className="text-2xl font-bold text-slate-900">
+              {status?.time_until_next_action || '-'}
+            </div>
+            <div className="text-sm text-slate-500">Countdown</div>
+          </div>
+        </div>
+      </div>
+
+      {/* Running / Stopped */}
+      <div className="bg-white rounded-xl border border-slate-200 p-5">
+        <div className="flex items-center gap-3">
+          <div className="w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center">
+            <svg className="w-6 h-6 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+            </svg>
+          </div>
+          <div>
+            <div className="flex items-center gap-2">
+              <span className="text-lg font-bold text-green-600">{runningCount}</span>
+              <span className="text-slate-400">/</span>
+              <span className="text-lg font-bold text-slate-600">{stoppedCount}</span>
+            </div>
+            <div className="text-sm text-slate-500">Aktiv / Gestoppt</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/infrastructure/night-mode/_components/TimeConfig.tsx b/admin-lehrer/app/(admin)/infrastructure/night-mode/_components/TimeConfig.tsx
new file mode 100644
index 0000000..8f7f9e1
--- /dev/null
+++ b/admin-lehrer/app/(admin)/infrastructure/night-mode/_components/TimeConfig.tsx
@@ -0,0 +1,114 @@
+import type { NightModeConfig, NightModeStatus } from './types'
+
+interface TimeConfigProps {
+  editMode: boolean
+  editConfig: NightModeConfig | null
+  actionLoading: string | null
+  status: NightModeStatus | null
+  onSetEditMode: (v: boolean) => void
+  onSetEditConfig: (fn: (prev: NightModeConfig | null) => NightModeConfig | null) => void
+  onSave: () => void
+  onCancel: () => void
+}
+
+export function TimeConfig({
+  editMode, editConfig, actionLoading, status,
+  onSetEditMode, onSetEditConfig, onSave, onCancel,
+}: TimeConfigProps) {
+  return (
+    <div className="bg-white rounded-xl border border-slate-200 p-6 mb-6">
+      <div className="flex justify-between items-center mb-6">
+        <h3 className="text-lg font-semibold text-slate-900">Zeitkonfiguration</h3>
+        {editMode ? (
+          <div className="flex gap-2">
+            <button
+              onClick={onCancel}
+              className="px-4 py-2 text-sm border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors"
+            >
+              Abbrechen
+            </button>
+            <button
+              onClick={onSave}
+              disabled={actionLoading === 'save'}
+              className="px-4 py-2 text-sm bg-orange-600 text-white rounded-lg hover:bg-orange-700 disabled:opacity-50 transition-colors"
+            >
+              {actionLoading === 'save' ? 'Speichern...' : 'Speichern'}
+            </button>
+          </div>
+        ) : (
+          <button
+            onClick={() => onSetEditMode(true)}
+            className="px-4 py-2 text-sm border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors"
+          >
+            Bearbeiten
+          </button>
+        )}
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-2">
+            <span className="flex items-center gap-2">
+              <svg className="w-4 h-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+              </svg>
+              Abschaltung um
+            </span>
+          </label>
+          {editMode ? (
+            <input
+              type="time"
+              value={editConfig?.shutdown_time || '22:00'}
+              onChange={e => onSetEditConfig(prev => prev ? { ...prev, shutdown_time: e.target.value } : null)}
+              className="w-full px-4 py-3 text-xl font-mono border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500"
+            />
+          ) : (
+            <div className="text-3xl font-mono font-bold text-slate-900 bg-slate-50 px-4 py-3 rounded-lg">
+              {editConfig?.shutdown_time || '22:00'}
+            </div>
+          )}
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-2">
+            <span className="flex items-center gap-2">
+              <svg className="w-4 h-4 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+              </svg>
+              Start um
+            </span>
+          </label>
+          {editMode ? (
+            <input
+              type="time"
+              value={editConfig?.startup_time || '06:00'}
+              onChange={e => onSetEditConfig(prev => prev ? { ...prev, startup_time: e.target.value } : null)}
+              className="w-full px-4 py-3 text-xl font-mono border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500"
+            />
+          ) : (
+            <div className="text-3xl font-mono font-bold text-slate-900 bg-slate-50 px-4 py-3 rounded-lg">
+              {editConfig?.startup_time || '06:00'}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Letzte Aktion */}
+      {status?.config.last_action && (
+        <div className="mt-6 pt-6 border-t border-slate-200">
+          <div className="text-sm text-slate-500">
+            Letzte Aktion:{' '}
+            <span className={`font-semibold ${status.config.last_action === 'startup' ? 'text-green-600' : 'text-red-600'}`}>
+              {status.config.last_action === 'startup' ? 'Gestartet' : 'Abgeschaltet'}
+            </span>
+            {status.config.last_action_time && (
+              <span className="ml-2">
+                am {new Date(status.config.last_action_time).toLocaleString('de-DE')}
+              </span>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/infrastructure/night-mode/_components/types.ts b/admin-lehrer/app/(admin)/infrastructure/night-mode/_components/types.ts
new file mode 100644
index 0000000..b44751e
--- /dev/null
+++ b/admin-lehrer/app/(admin)/infrastructure/night-mode/_components/types.ts
@@ -0,0 +1,23 @@
+export interface NightModeConfig {
+  enabled: boolean
+  shutdown_time: string
+  startup_time: string
+  last_action: string | null
+  last_action_time: string | null
+  excluded_services: string[]
+}
+
+export interface NightModeStatus {
+  config: NightModeConfig
+  current_time: string
+  next_action: string | null
+  next_action_time: string | null
+  time_until_next_action: string | null
+  services_status: Record<string, string>
+}
+
+export interface ServicesInfo {
+  all_services: string[]
+  excluded_services: string[]
+  status: Record<string, string>
+}
diff --git a/admin-lehrer/app/(admin)/infrastructure/night-mode/_components/useNightMode.ts b/admin-lehrer/app/(admin)/infrastructure/night-mode/_components/useNightMode.ts
new file mode 100644
index 0000000..b350e60
--- /dev/null
+++ b/admin-lehrer/app/(admin)/infrastructure/night-mode/_components/useNightMode.ts
@@ -0,0 +1,174 @@
+import { useEffect, useState, useCallback } from 'react'
+import type { NightModeConfig, NightModeStatus, ServicesInfo } from './types'
+
+export function useNightMode() {
+  const [status, setStatus] = useState<NightModeStatus | null>(null)
+  const [services, setServices] = useState<ServicesInfo | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [actionLoading, setActionLoading] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [successMessage, setSuccessMessage] = useState<string | null>(null)
+
+  const [editMode, setEditMode] = useState(false)
+  const [editConfig, setEditConfig] = useState<NightModeConfig | null>(null)
+
+  const fetchData = useCallback(async () => {
+    setError(null)
+    try {
+      const [statusRes, servicesRes] = await Promise.all([
+        fetch('/api/admin/night-mode'),
+        fetch('/api/admin/night-mode/services'),
+      ])
+
+      if (statusRes.ok) {
+        const data = await statusRes.json()
+        setStatus(data)
+        if (!editMode) {
+          setEditConfig(data.config)
+        }
+      } else {
+        const errData = await statusRes.json()
+        setError(errData.error || 'Fehler beim Laden des Status')
+      }
+
+      if (servicesRes.ok) {
+        setServices(await servicesRes.json())
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Verbindung zum Night-Scheduler fehlgeschlagen')
+    } finally {
+      setLoading(false)
+    }
+  }, [editMode])
+
+  useEffect(() => {
+    fetchData()
+  }, [fetchData])
+
+  // Auto-Refresh alle 30 Sekunden
+  useEffect(() => {
+    const interval = setInterval(fetchData, 30000)
+    return () => clearInterval(interval)
+  }, [fetchData])
+
+  const saveConfig = async () => {
+    if (!editConfig) return
+
+    setActionLoading('save')
+    setError(null)
+    setSuccessMessage(null)
+
+    try {
+      const response = await fetch('/api/admin/night-mode', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(editConfig),
+      })
+
+      if (!response.ok) {
+        const errData = await response.json()
+        throw new Error(errData.error || 'Fehler beim Speichern')
+      }
+
+      setEditMode(false)
+      setSuccessMessage('Konfiguration gespeichert')
+      setTimeout(() => setSuccessMessage(null), 3000)
+      fetchData()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Speichern fehlgeschlagen')
+    } finally {
+      setActionLoading(null)
+    }
+  }
+
+  const executeAction = async (action: 'start' | 'stop') => {
+    setActionLoading(action)
+    setError(null)
+    setSuccessMessage(null)
+
+    try {
+      const response = await fetch('/api/admin/night-mode/execute', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action }),
+      })
+
+      if (!response.ok) {
+        const errData = await response.json()
+        throw new Error(errData.error || `Fehler bei ${action}`)
+      }
+
+      const data = await response.json()
+      setSuccessMessage(data.message || `${action === 'start' ? 'Gestartet' : 'Gestoppt'}`)
+      setTimeout(() => setSuccessMessage(null), 5000)
+      fetchData()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : `${action} fehlgeschlagen`)
+    } finally {
+      setActionLoading(null)
+    }
+  }
+
+  const toggleEnabled = async () => {
+    if (!editConfig) return
+
+    const newConfig = { ...editConfig, enabled: !editConfig.enabled }
+    setEditConfig(newConfig)
+
+    setActionLoading('toggle')
+    setError(null)
+
+    try {
+      const response = await fetch('/api/admin/night-mode', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(newConfig),
+      })
+
+      if (!response.ok) {
+        throw new Error('Fehler beim Umschalten')
+      }
+
+      setSuccessMessage(newConfig.enabled ? 'Nachtmodus aktiviert' : 'Nachtmodus deaktiviert')
+      setTimeout(() => setSuccessMessage(null), 3000)
+      fetchData()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Umschalten fehlgeschlagen')
+      // Zuruecksetzen bei Fehler
+      setEditConfig({ ...editConfig })
+    } finally {
+      setActionLoading(null)
+    }
+  }
+
+  const cancelEdit = () => {
+    setEditMode(false)
+    setEditConfig(status?.config || null)
+  }
+
+  const runningCount = Object.values(status?.services_status || {}).filter(
+    s => s.toLowerCase() === 'running' || s.toLowerCase().includes('up')
+  ).length
+  const stoppedCount = Object.values(status?.services_status || {}).filter(
+    s => s.toLowerCase() === 'exited' || s.toLowerCase().includes('exit')
+  ).length
+
+  return {
+    status,
+    services,
+    loading,
+    actionLoading,
+    error,
+    successMessage,
+    editMode,
+    setEditMode,
+    editConfig,
+    setEditConfig,
+    saveConfig,
+    executeAction,
+    toggleEnabled,
+    cancelEdit,
+    runningCount,
+    stoppedCount,
+  }
+}
diff --git a/admin-lehrer/app/(admin)/infrastructure/night-mode/page.tsx b/admin-lehrer/app/(admin)/infrastructure/night-mode/page.tsx
index 16b89a9..d9dc2c9 100644
--- a/admin-lehrer/app/(admin)/infrastructure/night-mode/page.tsx
+++ b/admin-lehrer/app/(admin)/infrastructure/night-mode/page.tsx
@@ -7,193 +7,32 @@
  * nach Zeitplan. Manuelles Starten/Stoppen ebenfalls moeglich.
  */
 
-import { useEffect, useState, useCallback } from 'react'
-
-interface NightModeConfig {
-  enabled: boolean
-  shutdown_time: string
-  startup_time: string
-  last_action: string | null
-  last_action_time: string | null
-  excluded_services: string[]
-}
-
-interface NightModeStatus {
-  config: NightModeConfig
-  current_time: string
-  next_action: string | null
-  next_action_time: string | null
-  time_until_next_action: string | null
-  services_status: Record<string, string>
-}
-
-interface ServicesInfo {
-  all_services: string[]
-  excluded_services: string[]
-  status: Record<string, string>
-}
+import { useNightMode } from './_components/useNightMode'
+import { MainControl } from './_components/MainControl'
+import { StatusCards } from './_components/StatusCards'
+import { TimeConfig } from './_components/TimeConfig'
+import { ServiceList } from './_components/ServiceList'
+import { InfoBox } from './_components/InfoBox'
 
 export default function NightModePage() {
-  const [status, setStatus] = useState<NightModeStatus | null>(null)
-  const [services, setServices] = useState<ServicesInfo | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [actionLoading, setActionLoading] = useState<string | null>(null)
-  const [error, setError] = useState<string | null>(null)
-  const [successMessage, setSuccessMessage] = useState<string | null>(null)
-
-  // Lokale Konfiguration fuer Bearbeitung
-  const [editMode, setEditMode] = useState(false)
-  const [editConfig, setEditConfig] = useState<NightModeConfig | null>(null)
-
-  const fetchData = useCallback(async () => {
-    setError(null)
-    try {
-      const [statusRes, servicesRes] = await Promise.all([
-        fetch('/api/admin/night-mode'),
-        fetch('/api/admin/night-mode/services'),
-      ])
-
-      if (statusRes.ok) {
-        const data = await statusRes.json()
-        setStatus(data)
-        if (!editMode) {
-          setEditConfig(data.config)
-        }
-      } else {
-        const errData = await statusRes.json()
-        setError(errData.error || 'Fehler beim Laden des Status')
-      }
-
-      if (servicesRes.ok) {
-        setServices(await servicesRes.json())
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Verbindung zum Night-Scheduler fehlgeschlagen')
-    } finally {
-      setLoading(false)
-    }
-  }, [editMode])
-
-  useEffect(() => {
-    fetchData()
-  }, [fetchData])
-
-  // Auto-Refresh alle 30 Sekunden
-  useEffect(() => {
-    const interval = setInterval(fetchData, 30000)
-    return () => clearInterval(interval)
-  }, [fetchData])
-
-  const saveConfig = async () => {
-    if (!editConfig) return
-
-    setActionLoading('save')
-    setError(null)
-    setSuccessMessage(null)
-
-    try {
-      const response = await fetch('/api/admin/night-mode', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(editConfig),
-      })
-
-      if (!response.ok) {
-        const errData = await response.json()
-        throw new Error(errData.error || 'Fehler beim Speichern')
-      }
-
-      setEditMode(false)
-      setSuccessMessage('Konfiguration gespeichert')
-      setTimeout(() => setSuccessMessage(null), 3000)
-      fetchData()
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Speichern fehlgeschlagen')
-    } finally {
-      setActionLoading(null)
-    }
-  }
-
-  const executeAction = async (action: 'start' | 'stop') => {
-    setActionLoading(action)
-    setError(null)
-    setSuccessMessage(null)
-
-    try {
-      const response = await fetch('/api/admin/night-mode/execute', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ action }),
-      })
-
-      if (!response.ok) {
-        const errData = await response.json()
-        throw new Error(errData.error || `Fehler bei ${action}`)
-      }
-
-      const data = await response.json()
-      setSuccessMessage(data.message || `${action === 'start' ? 'Gestartet' : 'Gestoppt'}`)
-      setTimeout(() => setSuccessMessage(null), 5000)
-      fetchData()
-    } catch (err) {
-      setError(err instanceof Error ? err.message : `${action} fehlgeschlagen`)
-    } finally {
-      setActionLoading(null)
-    }
-  }
-
-  const toggleEnabled = async () => {
-    if (!editConfig) return
-
-    const newConfig = { ...editConfig, enabled: !editConfig.enabled }
-    setEditConfig(newConfig)
-
-    setActionLoading('toggle')
-    setError(null)
-
-    try {
-      const response = await fetch('/api/admin/night-mode', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(newConfig),
-      })
-
-      if (!response.ok) {
-        throw new Error('Fehler beim Umschalten')
-      }
-
-      setSuccessMessage(newConfig.enabled ? 'Nachtmodus aktiviert' : 'Nachtmodus deaktiviert')
-      setTimeout(() => setSuccessMessage(null), 3000)
-      fetchData()
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Umschalten fehlgeschlagen')
-      // Zuruecksetzen bei Fehler
-      setEditConfig({ ...editConfig })
-    } finally {
-      setActionLoading(null)
-    }
-  }
-
-  const getServiceStatusColor = (state: string) => {
-    const lower = state.toLowerCase()
-    if (lower === 'running' || lower.includes('up')) {
-      return 'bg-green-100 text-green-800'
-    }
-    if (lower === 'exited' || lower.includes('exit')) {
-      return 'bg-slate-100 text-slate-600'
-    }
-    if (lower === 'paused' || lower.includes('pause')) {
-      return 'bg-yellow-100 text-yellow-800'
-    }
-    return 'bg-slate-100 text-slate-600'
-  }
-
-  const runningCount = Object.values(status?.services_status || {}).filter(
-    s => s.toLowerCase() === 'running' || s.toLowerCase().includes('up')
-  ).length
-  const stoppedCount = Object.values(status?.services_status || {}).filter(
-    s => s.toLowerCase() === 'exited' || s.toLowerCase().includes('exit')
-  ).length
+  const {
+    status,
+    services,
+    loading,
+    actionLoading,
+    error,
+    successMessage,
+    editMode,
+    setEditMode,
+    editConfig,
+    setEditConfig,
+    saveConfig,
+    executeAction,
+    toggleEnabled,
+    cancelEdit,
+    runningCount,
+    stoppedCount,
+  } = useNightMode()
 
   return (
     <div className="p-6">
@@ -226,334 +65,33 @@ export default function NightModePage() {
         </div>
       ) : (
         <>
-          {/* Haupt-Steuerung */}
-          <div className="bg-white rounded-xl border border-slate-200 p-6 mb-6">
-            <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-6">
-              {/* Toggle */}
-              <div className="flex items-center gap-6">
-                <div
-                  onClick={toggleEnabled}
-                  className={`relative inline-flex h-10 w-20 cursor-pointer items-center rounded-full transition-colors ${
-                    editConfig?.enabled ? 'bg-orange-600' : 'bg-slate-300'
-                  } ${actionLoading === 'toggle' ? 'opacity-50 cursor-wait' : ''}`}
-                >
-                  <span
-                    className={`inline-block h-8 w-8 transform rounded-full bg-white shadow-lg transition-transform ${
-                      editConfig?.enabled ? 'translate-x-11' : 'translate-x-1'
-                    }`}
-                  />
-                </div>
-                <div>
-                  <h2 className="text-xl font-semibold text-slate-900">
-                    Nachtmodus: {editConfig?.enabled ? 'Aktiv' : 'Inaktiv'}
-                  </h2>
-                  <p className="text-sm text-slate-500">
-                    {editConfig?.enabled
-                      ? `Abschaltung um ${editConfig.shutdown_time}, Start um ${editConfig.startup_time}`
-                      : 'Zeitgesteuerte Abschaltung ist deaktiviert'}
-                  </p>
-                </div>
-              </div>
+          <MainControl
+            editConfig={editConfig}
+            actionLoading={actionLoading}
+            onToggle={toggleEnabled}
+            onExecute={executeAction}
+          />
 
-              {/* Manuelle Aktionen */}
-              <div className="flex gap-3">
-                <button
-                  onClick={() => executeAction('stop')}
-                  disabled={actionLoading !== null}
-                  className="flex items-center gap-2 px-5 py-2.5 bg-red-600 text-white rounded-lg font-medium hover:bg-red-700 disabled:opacity-50 transition-colors"
-                >
-                  {actionLoading === 'stop' ? (
-                    <span className="animate-spin">&#9696;</span>
-                  ) : (
-                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" />
-                    </svg>
-                  )}
-                  Jetzt abschalten
-                </button>
-                <button
-                  onClick={() => executeAction('start')}
-                  disabled={actionLoading !== null}
-                  className="flex items-center gap-2 px-5 py-2.5 bg-green-600 text-white rounded-lg font-medium hover:bg-green-700 disabled:opacity-50 transition-colors"
-                >
-                  {actionLoading === 'start' ? (
-                    <span className="animate-spin">&#9696;</span>
-                  ) : (
-                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                    </svg>
-                  )}
-                  Jetzt starten
-                </button>
-              </div>
-            </div>
-          </div>
+          <StatusCards
+            status={status}
+            runningCount={runningCount}
+            stoppedCount={stoppedCount}
+          />
 
-          {/* Status-Karten */}
-          <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
-            <div className="bg-white rounded-xl border border-slate-200 p-5">
-              <div className="flex items-center gap-3">
-                <div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
-                  <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-                  </svg>
-                </div>
-                <div>
-                  <div className="text-2xl font-bold text-slate-900">{status?.current_time || '--:--'}</div>
-                  <div className="text-sm text-slate-500">Aktuelle Zeit</div>
-                </div>
-              </div>
-            </div>
+          <TimeConfig
+            editMode={editMode}
+            editConfig={editConfig}
+            actionLoading={actionLoading}
+            status={status}
+            onSetEditMode={setEditMode}
+            onSetEditConfig={setEditConfig}
+            onSave={saveConfig}
+            onCancel={cancelEdit}
+          />
 
-            <div className="bg-white rounded-xl border border-slate-200 p-5">
-              <div className="flex items-center gap-3">
-                <div className={`w-12 h-12 rounded-full flex items-center justify-center ${
-                  status?.next_action === 'shutdown' ? 'bg-red-100' : 'bg-green-100'
-                }`}>
-                  {status?.next_action === 'shutdown' ? (
-                    <svg className="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
-                    </svg>
-                  ) : (
-                    <svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
-                    </svg>
-                  )}
-                </div>
-                <div>
-                  <div className="text-2xl font-bold text-slate-900">
-                    {status?.next_action_time || '--:--'}
-                  </div>
-                  <div className="text-sm text-slate-500">
-                    {status?.next_action === 'shutdown' ? 'Naechste Abschaltung' : 'Naechster Start'}
-                  </div>
-                </div>
-              </div>
-            </div>
+          <ServiceList services={services} status={status} />
 
-            <div className="bg-white rounded-xl border border-slate-200 p-5">
-              <div className="flex items-center gap-3">
-                <div className="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center">
-                  <svg className="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-                  </svg>
-                </div>
-                <div>
-                  <div className="text-2xl font-bold text-slate-900">
-                    {status?.time_until_next_action || '-'}
-                  </div>
-                  <div className="text-sm text-slate-500">Countdown</div>
-                </div>
-              </div>
-            </div>
-
-            <div className="bg-white rounded-xl border border-slate-200 p-5">
-              <div className="flex items-center gap-3">
-                <div className="w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center">
-                  <svg className="w-6 h-6 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
-                  </svg>
-                </div>
-                <div>
-                  <div className="flex items-center gap-2">
-                    <span className="text-lg font-bold text-green-600">{runningCount}</span>
-                    <span className="text-slate-400">/</span>
-                    <span className="text-lg font-bold text-slate-600">{stoppedCount}</span>
-                  </div>
-                  <div className="text-sm text-slate-500">Aktiv / Gestoppt</div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Zeitkonfiguration */}
-          <div className="bg-white rounded-xl border border-slate-200 p-6 mb-6">
-            <div className="flex justify-between items-center mb-6">
-              <h3 className="text-lg font-semibold text-slate-900">Zeitkonfiguration</h3>
-              {editMode ? (
-                <div className="flex gap-2">
-                  <button
-                    onClick={() => {
-                      setEditMode(false)
-                      setEditConfig(status?.config || null)
-                    }}
-                    className="px-4 py-2 text-sm border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors"
-                  >
-                    Abbrechen
-                  </button>
-                  <button
-                    onClick={saveConfig}
-                    disabled={actionLoading === 'save'}
-                    className="px-4 py-2 text-sm bg-orange-600 text-white rounded-lg hover:bg-orange-700 disabled:opacity-50 transition-colors"
-                  >
-                    {actionLoading === 'save' ? 'Speichern...' : 'Speichern'}
-                  </button>
-                </div>
-              ) : (
-                <button
-                  onClick={() => setEditMode(true)}
-                  className="px-4 py-2 text-sm border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors"
-                >
-                  Bearbeiten
-                </button>
-              )}
-            </div>
-
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-              <div>
-                <label className="block text-sm font-medium text-slate-700 mb-2">
-                  <span className="flex items-center gap-2">
-                    <svg className="w-4 h-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
-                    </svg>
-                    Abschaltung um
-                  </span>
-                </label>
-                {editMode ? (
-                  <input
-                    type="time"
-                    value={editConfig?.shutdown_time || '22:00'}
-                    onChange={e => setEditConfig(prev => prev ? { ...prev, shutdown_time: e.target.value } : null)}
-                    className="w-full px-4 py-3 text-xl font-mono border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500"
-                  />
-                ) : (
-                  <div className="text-3xl font-mono font-bold text-slate-900 bg-slate-50 px-4 py-3 rounded-lg">
-                    {editConfig?.shutdown_time || '22:00'}
-                  </div>
-                )}
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium text-slate-700 mb-2">
-                  <span className="flex items-center gap-2">
-                    <svg className="w-4 h-4 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
-                    </svg>
-                    Start um
-                  </span>
-                </label>
-                {editMode ? (
-                  <input
-                    type="time"
-                    value={editConfig?.startup_time || '06:00'}
-                    onChange={e => setEditConfig(prev => prev ? { ...prev, startup_time: e.target.value } : null)}
-                    className="w-full px-4 py-3 text-xl font-mono border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500"
-                  />
-                ) : (
-                  <div className="text-3xl font-mono font-bold text-slate-900 bg-slate-50 px-4 py-3 rounded-lg">
-                    {editConfig?.startup_time || '06:00'}
-                  </div>
-                )}
-              </div>
-            </div>
-
-            {/* Letzte Aktion */}
-            {status?.config.last_action && (
-              <div className="mt-6 pt-6 border-t border-slate-200">
-                <div className="text-sm text-slate-500">
-                  Letzte Aktion:{' '}
-                  <span className={`font-semibold ${status.config.last_action === 'startup' ? 'text-green-600' : 'text-red-600'}`}>
-                    {status.config.last_action === 'startup' ? 'Gestartet' : 'Abgeschaltet'}
-                  </span>
-                  {status.config.last_action_time && (
-                    <span className="ml-2">
-                      am {new Date(status.config.last_action_time).toLocaleString('de-DE')}
-                    </span>
-                  )}
-                </div>
-              </div>
-            )}
-          </div>
-
-          {/* Service-Liste */}
-          <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
-            <div className="p-6 border-b border-slate-200">
-              <h3 className="text-lg font-semibold text-slate-900">Services</h3>
-              <p className="text-sm text-slate-500 mt-1">
-                Gruen = wird verwaltet, Grau = ausgeschlossen (laeuft immer)
-              </p>
-            </div>
-
-            <div className="p-6">
-              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
-                {services?.all_services.map(service => {
-                  const serviceStatus = status?.services_status[service] || 'unknown'
-                  const isExcluded = services.excluded_services.includes(service)
-
-                  return (
-                    <div
-                      key={service}
-                      className={`flex items-center justify-between px-4 py-3 rounded-lg border ${
-                        isExcluded
-                          ? 'bg-slate-50 border-slate-200'
-                          : 'bg-orange-50 border-orange-200'
-                      }`}
-                    >
-                      <div className="flex items-center gap-2">
-                        {isExcluded ? (
-                          <svg className="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-                          </svg>
-                        ) : (
-                          <svg className="w-4 h-4 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-                          </svg>
-                        )}
-                        <span className={`text-sm font-medium ${isExcluded ? 'text-slate-500' : 'text-slate-900'}`}>
-                          {service}
-                        </span>
-                      </div>
-                      <span className={`px-2 py-0.5 rounded text-xs font-semibold ${getServiceStatusColor(serviceStatus)}`}>
-                        {serviceStatus}
-                      </span>
-                    </div>
-                  )
-                })}
-
-                {/* Auch excluded Services anzeigen, die nicht in all_services sind */}
-                {services?.excluded_services
-                  .filter(s => !services.all_services.includes(s))
-                  .map(service => (
-                    <div
-                      key={service}
-                      className="flex items-center justify-between px-4 py-3 rounded-lg border bg-slate-50 border-slate-200"
-                    >
-                      <div className="flex items-center gap-2">
-                        <svg className="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-                        </svg>
-                        <span className="text-sm font-medium text-slate-500">
-                          {service}
-                        </span>
-                      </div>
-                      <span className="px-2 py-0.5 rounded text-xs font-semibold bg-slate-100 text-slate-600">
-                        excluded
-                      </span>
-                    </div>
-                  ))}
-              </div>
-            </div>
-          </div>
-
-          {/* Info Box */}
-          <div className="mt-6 bg-orange-50 border border-orange-200 rounded-xl p-4">
-            <div className="flex gap-3">
-              <svg className="w-5 h-5 text-orange-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-              </svg>
-              <div>
-                <h4 className="font-semibold text-orange-900">Hinweise zur Nachtabschaltung</h4>
-                <ul className="text-sm text-orange-800 mt-1 space-y-1 list-disc list-inside">
-                  <li>Der <strong>night-scheduler</strong> und <strong>nginx</strong> bleiben immer aktiv</li>
-                  <li>Services werden mit <code>docker compose stop</code> angehalten (Daten bleiben erhalten)</li>
-                  <li>Bei manuellem Start/Stop wird die letzte Aktion gespeichert</li>
-                  <li>Der Scheduler prueft jede Minute, ob eine Aktion faellig ist</li>
-                </ul>
-              </div>
-            </div>
-          </div>
+          <InfoBox />
         </>
       )}
     </div>
diff --git a/admin-lehrer/app/(admin)/infrastructure/sbom/_components/CategoryFilter.tsx b/admin-lehrer/app/(admin)/infrastructure/sbom/_components/CategoryFilter.tsx
new file mode 100644
index 0000000..876837f
--- /dev/null
+++ b/admin-lehrer/app/(admin)/infrastructure/sbom/_components/CategoryFilter.tsx
@@ -0,0 +1,54 @@
+import type { CategoryType, CategoryItem } from '../types'
+
+interface CategoryFilterProps {
+  categories: CategoryItem[]
+  activeCategory: CategoryType
+  setActiveCategory: (cat: CategoryType) => void
+  searchTerm: string
+  setSearchTerm: (term: string) => void
+}
+
+export function CategoryFilter({
+  categories,
+  activeCategory,
+  setActiveCategory,
+  searchTerm,
+  setSearchTerm,
+}: CategoryFilterProps) {
+  return (
+    <div className="bg-white rounded-lg shadow p-4 mb-6">
+      <div className="flex flex-col md:flex-row gap-4 items-center justify-between">
+        {/* Category Tabs */}
+        <div className="flex flex-wrap gap-2">
+          {categories.map((cat) => (
+            <button
+              key={cat.id}
+              onClick={() => setActiveCategory(cat.id as CategoryType)}
+              className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+                activeCategory === cat.id
+                  ? 'bg-orange-600 text-white'
+                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+              }`}
+            >
+              {cat.name} ({cat.count})
+            </button>
+          ))}
+        </div>
+
+        {/* Search */}
+        <div className="relative w-full md:w-64">
+          <input
+            type="text"
+            placeholder="Suchen..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent"
+          />
+          <svg className="absolute left-3 top-2.5 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+          </svg>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/infrastructure/sbom/_components/ComponentsTable.tsx b/admin-lehrer/app/(admin)/infrastructure/sbom/_components/ComponentsTable.tsx
new file mode 100644
index 0000000..ecb3649
--- /dev/null
+++ b/admin-lehrer/app/(admin)/infrastructure/sbom/_components/ComponentsTable.tsx
@@ -0,0 +1,103 @@
+import type { Component } from '../types'
+import { getCategoryColor, getLicenseColor } from './utils'
+
+interface ComponentsTableProps {
+  components: Component[]
+  loading: boolean
+}
+
+export function ComponentsTable({ components, loading }: ComponentsTableProps) {
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-orange-600"></div>
+        <span className="ml-3 text-gray-600">Lade SBOM...</span>
+      </div>
+    )
+  }
+
+  return (
+    <div className="bg-white rounded-lg shadow overflow-hidden">
+      <table className="min-w-full divide-y divide-gray-200">
+        <thead className="bg-gray-50">
+          <tr>
+            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Komponente</th>
+            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Version</th>
+            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Kategorie</th>
+            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider min-w-[300px]">Verwendungszweck</th>
+            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Port</th>
+            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Lizenz</th>
+            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Source</th>
+          </tr>
+        </thead>
+        <tbody className="bg-white divide-y divide-gray-200">
+          {components.map((component, idx) => {
+            const licenseId = component.license || component.licenses?.[0]?.license?.id
+
+            return (
+              <tr key={idx} className="hover:bg-gray-50">
+                <td className="px-4 py-4">
+                  <div className="text-sm font-medium text-gray-900">{component.name}</div>
+                </td>
+                <td className="px-4 py-4 whitespace-nowrap">
+                  <span className="text-sm font-mono text-gray-900">{component.version}</span>
+                </td>
+                <td className="px-4 py-4 whitespace-nowrap">
+                  <span className={`px-2 py-1 text-xs font-medium rounded ${getCategoryColor(component.category)}`}>
+                    {component.category || component.type}
+                  </span>
+                </td>
+                <td className="px-4 py-4">
+                  {component.description ? (
+                    <div className="text-sm text-gray-600 leading-relaxed">{component.description}</div>
+                  ) : (
+                    <span className="text-sm text-gray-400 italic">Keine Beschreibung</span>
+                  )}
+                </td>
+                <td className="px-4 py-4 whitespace-nowrap">
+                  {component.port ? (
+                    <span className="text-sm font-mono text-gray-600">{component.port}</span>
+                  ) : (
+                    <span className="text-sm text-gray-400">-</span>
+                  )}
+                </td>
+                <td className="px-4 py-4 whitespace-nowrap">
+                  {licenseId ? (
+                    <span className={`px-2 py-1 text-xs font-medium rounded ${getLicenseColor(licenseId)}`}>
+                      {licenseId}
+                    </span>
+                  ) : (
+                    <span className="text-sm text-gray-400">-</span>
+                  )}
+                </td>
+                <td className="px-4 py-4 whitespace-nowrap">
+                  {component.sourceUrl && component.sourceUrl !== '-' ? (
+                    <a
+                      href={component.sourceUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-orange-600 hover:text-orange-800 text-sm flex items-center gap-1"
+                    >
+                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                      </svg>
+                      GitHub
+                    </a>
+                  ) : (
+                    <span className="text-sm text-gray-400">-</span>
+                  )}
+                </td>
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+
+      {components.length === 0 && (
+        <div className="p-8 text-center text-gray-500">
+          Keine Komponenten gefunden.
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/infrastructure/sbom/_components/ExportButton.tsx b/admin-lehrer/app/(admin)/infrastructure/sbom/_components/ExportButton.tsx
new file mode 100644
index 0000000..e80c2bf
--- /dev/null
+++ b/admin-lehrer/app/(admin)/infrastructure/sbom/_components/ExportButton.tsx
@@ -0,0 +1,19 @@
+interface ExportButtonProps {
+  onExport: () => void
+}
+
+export function ExportButton({ onExport }: ExportButtonProps) {
+  return (
+    <div className="mt-6 flex justify-end">
+      <button
+        onClick={onExport}
+        className="px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-700 transition-colors 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+        </svg>
+        SBOM exportieren (JSON)
+      </button>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/infrastructure/sbom/_components/InfoTabsSection.tsx b/admin-lehrer/app/(admin)/infrastructure/sbom/_components/InfoTabsSection.tsx
new file mode 100644
index 0000000..e9853c8
--- /dev/null
+++ b/admin-lehrer/app/(admin)/infrastructure/sbom/_components/InfoTabsSection.tsx
@@ -0,0 +1,251 @@
+import type { InfoTabType } from '../types'
+
+interface InfoTabsSectionProps {
+  activeInfoTab: InfoTabType
+  setActiveInfoTab: (tab: InfoTabType) => void
+  showFullDocs: boolean
+  setShowFullDocs: (show: boolean) => void
+}
+
+export function InfoTabsSection({
+  activeInfoTab,
+  setActiveInfoTab,
+  showFullDocs,
+  setShowFullDocs,
+}: InfoTabsSectionProps) {
+  return (
+    <div className="mt-8">
+      <div className="bg-white rounded-lg shadow">
+        {/* Tab Headers */}
+        <div className="border-b border-gray-200">
+          <nav className="flex -mb-px">
+            <button
+              onClick={() => setActiveInfoTab('audit')}
+              className={`px-6 py-4 text-sm font-medium border-b-2 transition-colors ${
+                activeInfoTab === 'audit'
+                  ? 'border-orange-500 text-orange-600'
+                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+              }`}
+            >
+              <span className="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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                Audit
+              </span>
+            </button>
+            <button
+              onClick={() => setActiveInfoTab('documentation')}
+              className={`px-6 py-4 text-sm font-medium border-b-2 transition-colors ${
+                activeInfoTab === 'documentation'
+                  ? 'border-orange-500 text-orange-600'
+                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+              }`}
+            >
+              <span className="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="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>
+                Dokumentation
+              </span>
+            </button>
+          </nav>
+        </div>
+
+        {/* Tab Content */}
+        <div className="p-6">
+          {activeInfoTab === 'audit' && <AuditTab />}
+          {activeInfoTab === 'documentation' && (
+            <DocumentationTab showFullDocs={showFullDocs} setShowFullDocs={setShowFullDocs} />
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function AuditTab() {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+      {/* SBOM Status */}
+      <div className="bg-slate-50 rounded-lg p-4">
+        <h3 className="text-lg font-semibold text-slate-800 mb-4 flex items-center gap-2">
+          <svg className="w-5 h-5 text-blue-500" 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>
+          SBOM Status
+        </h3>
+        <div className="space-y-3">
+          {[
+            { label: 'Letzte Generierung', value: 'CI/CD' },
+            { label: 'Format', value: 'CycloneDX 1.5' },
+            { label: 'Komponenten', value: 'Alle erfasst' },
+            { label: 'Transitive Deps', value: 'Inkludiert' },
+          ].map((item) => (
+            <div key={item.label} className="flex items-center justify-between">
+              <span className="text-sm text-slate-600">{item.label}</span>
+              <span className="flex items-center gap-2">
+                <span className="w-2 h-2 rounded-full bg-green-500"></span>
+                <span className="text-sm font-medium">{item.value}</span>
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* License Compliance */}
+      <div className="bg-slate-50 rounded-lg p-4">
+        <h3 className="text-lg font-semibold text-slate-800 mb-4 flex items-center gap-2">
+          <svg className="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" />
+          </svg>
+          License Compliance
+        </h3>
+        <div className="space-y-3">
+          {[
+            { label: 'Erlaubte Lizenzen', value: 'MIT, Apache, BSD', color: 'bg-green-500' },
+            { label: 'Copyleft (GPL)', value: '0', color: 'bg-green-500' },
+            { label: 'Unbekannte Lizenzen', value: '0', color: 'bg-green-500' },
+            { label: 'Kommerzielle', value: 'Review erforderlich', color: 'bg-yellow-500' },
+          ].map((item) => (
+            <div key={item.label} className="flex items-center justify-between">
+              <span className="text-sm text-slate-600">{item.label}</span>
+              <span className="flex items-center gap-2">
+                <span className={`w-2 h-2 rounded-full ${item.color}`}></span>
+                <span className="text-sm font-medium">{item.value}</span>
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function DocumentationTab({
+  showFullDocs,
+  setShowFullDocs,
+}: {
+  showFullDocs: boolean
+  setShowFullDocs: (show: boolean) => void
+}) {
+  return (
+    <div>
+      <div className="flex justify-between items-center mb-4">
+        <h3 className="text-lg font-semibold text-slate-800">SBOM Dokumentation</h3>
+        <button
+          onClick={() => setShowFullDocs(!showFullDocs)}
+          className="px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors flex items-center gap-2"
+        >
+          <svg className={`w-4 h-4 transition-transform ${showFullDocs ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+          </svg>
+          {showFullDocs ? 'Weniger anzeigen' : 'Vollstaendige Dokumentation'}
+        </button>
+      </div>
+
+      {!showFullDocs ? <DocsSummary /> : <DocsFullContent />}
+    </div>
+  )
+}
+
+function DocsSummary() {
+  return (
+    <div className="prose prose-slate max-w-none">
+      <p className="text-slate-600">
+        Das SBOM-Modul generiert und analysiert die vollstaendige Komponentenliste aller Software-Abhaengigkeiten.
+        Es dient der Compliance, Sicherheit und Supply-Chain-Transparenz.
+      </p>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
+        <div className="bg-blue-50 p-4 rounded-lg">
+          <h4 className="font-medium text-blue-800 mb-2">Generator</h4>
+          <p className="text-sm text-blue-600">Syft (Primary), Trivy (Validation)</p>
+        </div>
+        <div className="bg-purple-50 p-4 rounded-lg">
+          <h4 className="font-medium text-purple-800 mb-2">Format</h4>
+          <p className="text-sm text-purple-600">CycloneDX 1.5, SPDX</p>
+        </div>
+        <div className="bg-green-50 p-4 rounded-lg">
+          <h4 className="font-medium text-green-800 mb-2">Retention</h4>
+          <p className="text-sm text-green-600">5 Jahre (Compliance)</p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function DocsFullContent() {
+  return (
+    <div className="prose prose-slate max-w-none bg-slate-50 p-6 rounded-lg overflow-auto max-h-[600px]">
+      <h2>Software Bill of Materials (SBOM)</h2>
+
+      <h3>1. Uebersicht</h3>
+      <p>Das SBOM-Modul generiert und analysiert die vollstaendige Komponentenliste aller Software-Abhaengigkeiten. Es dient der Compliance, Sicherheit und Supply-Chain-Transparenz.</p>
+
+      <h3>2. SBOM-Generierung</h3>
+      <pre className="bg-slate-800 text-slate-100 p-4 rounded-lg overflow-x-auto text-sm">
+{`Source Code
+     |
+     v
++---------------------------------------------------------------+
+|                     SBOM Generators                           |
+|  +-------------+  +-------------+  +---------------------+   |
+|  |    Syft     |  |   Trivy     |  |  Native Tooling     |   |
+|  |  (Primary)  |  | (Validation)|  | (npm, go mod, pip)  |   |
+|  +------+------+  +------+------+  +----------+----------+   |
++---------+----------------+--------------------+---------------+
+          |                |                    |
+          +----------------+--------------------+
+                           |
+                           v
+                  +----------------+
+                  |   CycloneDX    |
+                  |    Format      |
+                  +----------------+`}
+      </pre>
+
+      <h3>3. Erfasste Komponenten</h3>
+      <table className="min-w-full">
+        <thead>
+          <tr>
+            <th className="text-left">Typ</th>
+            <th className="text-left">Quelle</th>
+            <th className="text-left">Beispiele</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr><td>npm packages</td><td>package-lock.json</td><td>react, next, tailwindcss</td></tr>
+          <tr><td>Go modules</td><td>go.sum</td><td>gin, gorm, jwt-go</td></tr>
+          <tr><td>Python packages</td><td>requirements.txt</td><td>fastapi, pydantic, httpx</td></tr>
+          <tr><td>Container Images</td><td>Dockerfile</td><td>node:20-alpine, postgres:16</td></tr>
+          <tr><td>OS Packages</td><td>apk, apt</td><td>openssl, libpq</td></tr>
+        </tbody>
+      </table>
+
+      <h3>4. License Compliance</h3>
+      <table className="min-w-full">
+        <thead>
+          <tr>
+            <th className="text-left">Kategorie</th>
+            <th className="text-left">Lizenzen</th>
+            <th className="text-left">Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr><td>Permissive (erlaubt)</td><td>MIT, Apache 2.0, BSD, ISC</td><td className="text-green-600">OK</td></tr>
+          <tr><td>Weak Copyleft</td><td>LGPL, MPL</td><td className="text-yellow-600">Review</td></tr>
+          <tr><td>Strong Copyleft</td><td>GPL, AGPL</td><td className="text-red-600">Nicht erlaubt</td></tr>
+          <tr><td>Proprietaer</td><td>Commercial</td><td className="text-yellow-600">Genehmigung</td></tr>
+        </tbody>
+      </table>
+
+      <h3>5. Aufbewahrung & Compliance</h3>
+      <ul>
+        <li><strong>Retention:</strong> 5 Jahre (Compliance)</li>
+        <li><strong>Format:</strong> JSON + PDF Report</li>
+        <li><strong>Signierung:</strong> Digital signiert</li>
+        <li><strong>Audit:</strong> Jederzeit abrufbar</li>
+      </ul>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/infrastructure/sbom/_components/SbomMetadata.tsx b/admin-lehrer/app/(admin)/infrastructure/sbom/_components/SbomMetadata.tsx
new file mode 100644
index 0000000..0ca7d3e
--- /dev/null
+++ b/admin-lehrer/app/(admin)/infrastructure/sbom/_components/SbomMetadata.tsx
@@ -0,0 +1,32 @@
+import type { SBOMData } from '../types'
+
+interface SbomMetadataProps {
+  sbomData: SBOMData
+}
+
+export function SbomMetadata({ sbomData }: SbomMetadataProps) {
+  if (!sbomData.metadata) return null
+
+  return (
+    <div className="bg-slate-50 rounded-lg p-4 mb-6 text-sm">
+      <div className="flex flex-wrap gap-6">
+        <div>
+          <span className="text-slate-500">Format:</span>
+          <span className="ml-2 font-medium">{sbomData.bomFormat} {sbomData.specVersion}</span>
+        </div>
+        <div>
+          <span className="text-slate-500">Generiert:</span>
+          <span className="ml-2 font-medium">
+            {sbomData.metadata.timestamp ? new Date(sbomData.metadata.timestamp).toLocaleString('de-DE') : '-'}
+          </span>
+        </div>
+        <div>
+          <span className="text-slate-500">Anwendung:</span>
+          <span className="ml-2 font-medium">
+            {sbomData.metadata.component?.name} v{sbomData.metadata.component?.version}
+          </span>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/infrastructure/sbom/_components/StatsCards.tsx b/admin-lehrer/app/(admin)/infrastructure/sbom/_components/StatsCards.tsx
new file mode 100644
index 0000000..f83a568
--- /dev/null
+++ b/admin-lehrer/app/(admin)/infrastructure/sbom/_components/StatsCards.tsx
@@ -0,0 +1,31 @@
+import type { SbomStats } from '../types'
+
+interface StatsCardsProps {
+  stats: SbomStats
+}
+
+export function StatsCards({ stats }: StatsCardsProps) {
+  const items = [
+    { value: stats.totalAll, label: 'Komponenten Total', color: 'text-slate-800' },
+    { value: stats.totalInfra, label: 'Docker Services', color: 'text-purple-600' },
+    { value: stats.totalSecurityTools, label: 'Security Tools', color: 'text-red-600' },
+    { value: stats.totalPython, label: 'Python', color: 'text-emerald-600' },
+    { value: stats.totalGo, label: 'Go', color: 'text-sky-600' },
+    { value: stats.totalNode, label: 'Node.js', color: 'text-lime-600' },
+    { value: stats.totalUnity, label: 'Unity', color: 'text-amber-600' },
+    { value: stats.totalCsharp, label: 'C#', color: 'text-fuchsia-600' },
+    { value: stats.databases, label: 'Datenbanken', color: 'text-blue-600' },
+    { value: stats.game, label: 'Game', color: 'text-rose-600' },
+  ]
+
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-5 lg:grid-cols-10 gap-4 mb-6">
+      {items.map((item) => (
+        <div key={item.label} className="bg-white rounded-lg shadow p-4">
+          <div className={`text-3xl font-bold ${item.color}`}>{item.value}</div>
+          <div className="text-sm text-slate-500">{item.label}</div>
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/infrastructure/sbom/_components/index.ts b/admin-lehrer/app/(admin)/infrastructure/sbom/_components/index.ts
new file mode 100644
index 0000000..31e2b41
--- /dev/null
+++ b/admin-lehrer/app/(admin)/infrastructure/sbom/_components/index.ts
@@ -0,0 +1,6 @@
+export { StatsCards } from './StatsCards'
+export { CategoryFilter } from './CategoryFilter'
+export { ComponentsTable } from './ComponentsTable'
+export { ExportButton } from './ExportButton'
+export { SbomMetadata } from './SbomMetadata'
+export { InfoTabsSection } from './InfoTabsSection'
diff --git a/admin-lehrer/app/(admin)/infrastructure/sbom/_components/utils.ts b/admin-lehrer/app/(admin)/infrastructure/sbom/_components/utils.ts
new file mode 100644
index 0000000..d9bba40
--- /dev/null
+++ b/admin-lehrer/app/(admin)/infrastructure/sbom/_components/utils.ts
@@ -0,0 +1,32 @@
+export function getCategoryColor(category?: string): string {
+  switch (category) {
+    case 'database': return 'bg-blue-100 text-blue-800'
+    case 'security': return 'bg-purple-100 text-purple-800'
+    case 'security-tool': return 'bg-red-100 text-red-800'
+    case 'application': return 'bg-green-100 text-green-800'
+    case 'communication': return 'bg-yellow-100 text-yellow-800'
+    case 'storage': return 'bg-orange-100 text-orange-800'
+    case 'search': return 'bg-pink-100 text-pink-800'
+    case 'cache': return 'bg-cyan-100 text-cyan-800'
+    case 'development': return 'bg-gray-100 text-gray-800'
+    case 'cicd': return 'bg-orange-100 text-orange-800'
+    case 'python': return 'bg-emerald-100 text-emerald-800'
+    case 'go': return 'bg-sky-100 text-sky-800'
+    case 'nodejs': return 'bg-lime-100 text-lime-800'
+    case 'unity': return 'bg-amber-100 text-amber-800'
+    case 'csharp': return 'bg-fuchsia-100 text-fuchsia-800'
+    case 'game': return 'bg-rose-100 text-rose-800'
+    case 'voice': return 'bg-teal-100 text-teal-800'
+    case 'qa': return 'bg-blue-100 text-blue-800'
+    default: return 'bg-slate-100 text-slate-800'
+  }
+}
+
+export function getLicenseColor(license?: string): string {
+  if (!license) return 'bg-gray-100 text-gray-600'
+  if (license.includes('MIT')) return 'bg-green-100 text-green-700'
+  if (license.includes('Apache')) return 'bg-blue-100 text-blue-700'
+  if (license.includes('BSD')) return 'bg-cyan-100 text-cyan-700'
+  if (license.includes('GPL') || license.includes('LGPL')) return 'bg-orange-100 text-orange-700'
+  return 'bg-gray-100 text-gray-600'
+}
diff --git a/admin-lehrer/app/(admin)/infrastructure/sbom/data.ts b/admin-lehrer/app/(admin)/infrastructure/sbom/data.ts
new file mode 100644
index 0000000..7298fff
--- /dev/null
+++ b/admin-lehrer/app/(admin)/infrastructure/sbom/data.ts
@@ -0,0 +1,169 @@
+import type { Component } from './types'
+
+// Infrastructure components from docker-compose.yml and project analysis
+export const INFRASTRUCTURE_COMPONENTS: Component[] = [
+  // ===== DATABASES =====
+  { type: 'service', name: 'PostgreSQL', version: '16-alpine', category: 'database', port: '5432', description: 'Hauptdatenbank', license: 'PostgreSQL', sourceUrl: 'https://github.com/postgres/postgres' },
+  { type: 'service', name: 'Synapse PostgreSQL', version: '16-alpine', category: 'database', port: '-', description: 'Matrix Datenbank', license: 'PostgreSQL', sourceUrl: 'https://github.com/postgres/postgres' },
+
+  // ===== CACHE & QUEUE =====
+  { type: 'service', name: 'Valkey', version: '8-alpine', category: 'cache', port: '6379', description: 'In-Memory Cache & Sessions (Redis OSS Fork)', license: 'BSD-3-Clause', sourceUrl: 'https://github.com/valkey-io/valkey' },
+
+  // ===== SEARCH ENGINES =====
+  { type: 'service', name: 'Qdrant', version: '1.7.4', category: 'search', port: '6333', description: 'Vector Database (RAG/Embeddings)', license: 'Apache-2.0', sourceUrl: 'https://github.com/qdrant/qdrant' },
+  { type: 'service', name: 'OpenSearch', version: '2.x', category: 'search', port: '9200', description: 'Volltext-Suche (Elasticsearch Fork)', license: 'Apache-2.0', sourceUrl: 'https://github.com/opensearch-project/OpenSearch' },
+  { type: 'service', name: 'Meilisearch', version: 'latest', category: 'search', port: '7700', description: 'Instant Search Engine', license: 'MIT', sourceUrl: 'https://github.com/meilisearch/meilisearch' },
+
+  // ===== OBJECT STORAGE =====
+  { type: 'service', name: 'MinIO', version: 'latest', category: 'storage', port: '9000/9001', description: 'S3-kompatibel Object Storage', license: 'AGPL-3.0', sourceUrl: 'https://github.com/minio/minio' },
+
+  // ===== SECURITY =====
+  { type: 'service', name: 'HashiCorp Vault', version: '1.15', category: 'security', port: '8200', description: 'Secrets Management', license: 'BUSL-1.1', sourceUrl: 'https://github.com/hashicorp/vault' },
+  { type: 'service', name: 'Keycloak', version: '23.0', category: 'security', port: '8180', description: 'Identity Provider (SSO/OIDC)', license: 'Apache-2.0', sourceUrl: 'https://github.com/keycloak/keycloak' },
+  { type: 'service', name: 'NetBird', version: '0.64.5', category: 'security', port: '-', description: 'Zero-Trust Mesh VPN (WireGuard-basiert)', license: 'BSD-3-Clause', sourceUrl: 'https://github.com/netbirdio/netbird' },
+
+  // ===== COMMUNICATION =====
+  { type: 'service', name: 'Matrix Synapse', version: 'latest', category: 'communication', port: '8008', description: 'E2EE Messenger Server', license: 'AGPL-3.0', sourceUrl: 'https://github.com/element-hq/synapse' },
+  { type: 'service', name: 'Jitsi Web', version: 'stable-9823', category: 'communication', port: '8443', description: 'Videokonferenz UI', license: 'Apache-2.0', sourceUrl: 'https://github.com/jitsi/jitsi-meet' },
+  { type: 'service', name: 'Jitsi Prosody (XMPP)', version: 'stable-9823', category: 'communication', port: '-', description: 'XMPP Server', license: 'MIT', sourceUrl: 'https://github.com/bjc/prosody' },
+  { type: 'service', name: 'Jitsi Jicofo', version: 'stable-9823', category: 'communication', port: '-', description: 'Conference Focus Component', license: 'Apache-2.0', sourceUrl: 'https://github.com/jitsi/jicofo' },
+  { type: 'service', name: 'Jitsi JVB', version: 'stable-9823', category: 'communication', port: '10000/udp', description: 'Videobridge (WebRTC SFU)', license: 'Apache-2.0', sourceUrl: 'https://github.com/jitsi/jitsi-videobridge' },
+  { type: 'service', name: 'Jibri', version: 'stable-9823', category: 'communication', port: '-', description: 'Recording & Streaming Service', license: 'Apache-2.0', sourceUrl: 'https://github.com/jitsi/jibri' },
+
+  // ===== APPLICATION SERVICES (Python) =====
+  { type: 'service', name: 'Python Backend (FastAPI)', version: '3.12', category: 'application', port: '8000', description: 'Lehrer Backend API (Klausuren, E-Mail, Alerts)', license: 'Proprietary', sourceUrl: '-' },
+  { type: 'service', name: 'Klausur Service', version: '1.0', category: 'application', port: '8086', description: 'Abitur-Klausurkorrektur (BYOEH)', license: 'Proprietary', sourceUrl: '-' },
+  { type: 'service', name: 'Transcription Worker', version: '1.0', category: 'application', port: '-', description: 'Whisper + pyannote Transkription', license: 'Proprietary', sourceUrl: '-' },
+
+  // ===== APPLICATION SERVICES (Go) =====
+  { type: 'service', name: 'Go School Service', version: '1.21', category: 'application', port: '8084', description: 'Klausuren, Noten, Zeugnisse', license: 'Proprietary', sourceUrl: '-' },
+
+  // ===== APPLICATION SERVICES (Node.js) =====
+  { type: 'service', name: 'Next.js Admin Frontend', version: '15.1', category: 'application', port: '3002', description: 'Admin Lehrer Dashboard (React)', license: 'Proprietary', sourceUrl: '-' },
+
+  // ===== CI/CD & VERSION CONTROL =====
+  { type: 'service', name: 'Woodpecker CI', version: '2.x', category: 'cicd', port: '8082', description: 'Self-hosted CI/CD Pipeline (Drone Fork)', license: 'Apache-2.0', sourceUrl: 'https://github.com/woodpecker-ci/woodpecker' },
+  { type: 'service', name: 'Gitea', version: '1.21', category: 'cicd', port: '3003', description: 'Self-hosted Git Service', license: 'MIT', sourceUrl: 'https://github.com/go-gitea/gitea' },
+
+  // ===== DEVELOPMENT =====
+  { type: 'service', name: 'Mailpit', version: 'latest', category: 'development', port: '8025/1025', description: 'E-Mail Testing (SMTP Catch-All)', license: 'MIT', sourceUrl: 'https://github.com/axllent/mailpit' },
+
+  // ===== GAME (Breakpilot Drive) =====
+  { type: 'service', name: 'Breakpilot Drive (Unity WebGL)', version: '6000.0', category: 'game', port: '3001', description: 'Lernspiel fuer Schueler (Klasse 2-6)', license: 'Proprietary', sourceUrl: '-' },
+
+  // ===== VOICE SERVICE =====
+  { type: 'service', name: 'Voice Service (FastAPI)', version: '1.0', category: 'voice', port: '8091', description: 'Voice-First Interface mit PersonaPlex-7B & TaskOrchestrator', license: 'Proprietary', sourceUrl: '-' },
+  { type: 'service', name: 'PersonaPlex-7B (NVIDIA)', version: '7B', category: 'voice', port: '8998', description: 'Full-Duplex Speech-to-Speech (Produktion)', license: 'MIT/NVIDIA Open Model', sourceUrl: 'https://developer.nvidia.com' },
+  { type: 'service', name: 'TaskOrchestrator', version: '1.0', category: 'voice', port: '-', description: 'Agent-Orchestrierung mit Task State Machine', license: 'Proprietary', sourceUrl: '-' },
+  { type: 'service', name: 'Mimi Audio Codec', version: '1.0', category: 'voice', port: '-', description: 'Audio Streaming (24kHz, 80ms Frames)', license: 'MIT', sourceUrl: '-' },
+
+  // ===== BQAS (Quality Assurance) =====
+  { type: 'service', name: 'BQAS Local Scheduler', version: '1.0', category: 'qa', port: '-', description: 'Lokale GitHub Actions Alternative (launchd)', license: 'Proprietary', sourceUrl: '-' },
+  { type: 'service', name: 'BQAS LLM Judge', version: '1.0', category: 'qa', port: '-', description: 'Qwen2.5-32B basierte Test-Bewertung', license: 'Proprietary', sourceUrl: '-' },
+  { type: 'service', name: 'BQAS RAG Judge', version: '1.0', category: 'qa', port: '-', description: 'RAG/Korrektur Evaluierung', license: 'Proprietary', sourceUrl: '-' },
+  { type: 'service', name: 'BQAS Notifier', version: '1.0', category: 'qa', port: '-', description: 'Desktop/Slack/Email Benachrichtigungen', license: 'Proprietary', sourceUrl: '-' },
+  { type: 'service', name: 'BQAS Regression Tracker', version: '1.0', category: 'qa', port: '-', description: 'Score-Historie und Regression-Erkennung', license: 'Proprietary', sourceUrl: '-' },
+]
+
+// Security Tools discovered in project
+export const SECURITY_TOOLS: Component[] = [
+  { type: 'tool', name: 'Trivy', version: 'latest', category: 'security-tool', description: 'Container Vulnerability Scanner', license: 'Apache-2.0', sourceUrl: 'https://github.com/aquasecurity/trivy' },
+  { type: 'tool', name: 'Grype', version: 'latest', category: 'security-tool', description: 'SBOM Vulnerability Scanner', license: 'Apache-2.0', sourceUrl: 'https://github.com/anchore/grype' },
+  { type: 'tool', name: 'Syft', version: 'latest', category: 'security-tool', description: 'SBOM Generator', license: 'Apache-2.0', sourceUrl: 'https://github.com/anchore/syft' },
+  { type: 'tool', name: 'Gitleaks', version: 'latest', category: 'security-tool', description: 'Secrets Detection in Git', license: 'MIT', sourceUrl: 'https://github.com/gitleaks/gitleaks' },
+  { type: 'tool', name: 'TruffleHog', version: '3.x', category: 'security-tool', description: 'Secrets Scanner (Regex/Entropy)', license: 'AGPL-3.0', sourceUrl: 'https://github.com/trufflesecurity/trufflehog' },
+  { type: 'tool', name: 'Semgrep', version: 'latest', category: 'security-tool', description: 'SAST - Static Analysis', license: 'LGPL-2.1', sourceUrl: 'https://github.com/semgrep/semgrep' },
+  { type: 'tool', name: 'Bandit', version: 'latest', category: 'security-tool', description: 'Python Security Linter', license: 'Apache-2.0', sourceUrl: 'https://github.com/PyCQA/bandit' },
+  { type: 'tool', name: 'Gosec', version: 'latest', category: 'security-tool', description: 'Go Security Scanner', license: 'Apache-2.0', sourceUrl: 'https://github.com/securego/gosec' },
+  { type: 'tool', name: 'govulncheck', version: 'latest', category: 'security-tool', description: 'Go Vulnerability Check', license: 'BSD-3-Clause', sourceUrl: 'https://pkg.go.dev/golang.org/x/vuln/cmd/govulncheck' },
+  { type: 'tool', name: 'golangci-lint', version: 'latest', category: 'security-tool', description: 'Go Linter (Security Rules)', license: 'GPL-3.0', sourceUrl: 'https://github.com/golangci/golangci-lint' },
+  { type: 'tool', name: 'npm audit', version: 'built-in', category: 'security-tool', description: 'Node.js Vulnerability Check', license: 'Artistic-2.0', sourceUrl: 'https://docs.npmjs.com/cli/commands/npm-audit' },
+  { type: 'tool', name: 'pip-audit', version: 'latest', category: 'security-tool', description: 'Python Dependency Audit', license: 'Apache-2.0', sourceUrl: 'https://github.com/pypa/pip-audit' },
+  { type: 'tool', name: 'safety', version: 'latest', category: 'security-tool', description: 'Python Safety Check', license: 'MIT', sourceUrl: 'https://github.com/pyupio/safety' },
+  { type: 'tool', name: 'CodeQL', version: 'latest', category: 'security-tool', description: 'GitHub Security Analysis', license: 'MIT', sourceUrl: 'https://github.com/github/codeql' },
+]
+
+// Key Python packages (from requirements.txt)
+export const PYTHON_PACKAGES: Component[] = [
+  { type: 'library', name: 'FastAPI', version: '0.109+', category: 'python', description: 'Web Framework', license: 'MIT', sourceUrl: 'https://github.com/tiangolo/fastapi' },
+  { type: 'library', name: 'Uvicorn', version: '0.38+', category: 'python', description: 'ASGI Server', license: 'BSD-3-Clause', sourceUrl: 'https://github.com/encode/uvicorn' },
+  { type: 'library', name: 'Starlette', version: '0.49+', category: 'python', description: 'ASGI Framework (FastAPI Basis)', license: 'BSD-3-Clause', sourceUrl: 'https://github.com/encode/starlette' },
+  { type: 'library', name: 'Pydantic', version: '2.x', category: 'python', description: 'Data Validation', license: 'MIT', sourceUrl: 'https://github.com/pydantic/pydantic' },
+  { type: 'library', name: 'SQLAlchemy', version: '2.x', category: 'python', description: 'ORM', license: 'MIT', sourceUrl: 'https://github.com/sqlalchemy/sqlalchemy' },
+  { type: 'library', name: 'Alembic', version: '1.14+', category: 'python', description: 'DB Migrations (Classroom, Feedback Tables)', license: 'MIT', sourceUrl: 'https://github.com/sqlalchemy/alembic' },
+  { type: 'library', name: 'psycopg2-binary', version: '2.9+', category: 'python', description: 'PostgreSQL Driver', license: 'LGPL-3.0', sourceUrl: 'https://github.com/psycopg/psycopg2' },
+  { type: 'library', name: 'httpx', version: 'latest', category: 'python', description: 'Async HTTP Client', license: 'BSD-3-Clause', sourceUrl: 'https://github.com/encode/httpx' },
+  { type: 'library', name: 'PyJWT', version: 'latest', category: 'python', description: 'JWT Handling', license: 'MIT', sourceUrl: 'https://github.com/jpadilla/pyjwt' },
+  { type: 'library', name: 'hvac', version: 'latest', category: 'python', description: 'Vault Client', license: 'Apache-2.0', sourceUrl: 'https://github.com/hvac/hvac' },
+  { type: 'library', name: 'python-multipart', version: 'latest', category: 'python', description: 'File Uploads', license: 'Apache-2.0', sourceUrl: 'https://github.com/andrew-d/python-multipart' },
+  { type: 'library', name: 'aiofiles', version: 'latest', category: 'python', description: 'Async File I/O', license: 'Apache-2.0', sourceUrl: 'https://github.com/Tinche/aiofiles' },
+  { type: 'library', name: 'openai', version: 'latest', category: 'python', description: 'OpenAI SDK', license: 'MIT', sourceUrl: 'https://github.com/openai/openai-python' },
+  { type: 'library', name: 'anthropic', version: 'latest', category: 'python', description: 'Anthropic Claude SDK', license: 'MIT', sourceUrl: 'https://github.com/anthropics/anthropic-sdk-python' },
+  { type: 'library', name: 'langchain', version: 'latest', category: 'python', description: 'LLM Framework', license: 'MIT', sourceUrl: 'https://github.com/langchain-ai/langchain' },
+  { type: 'library', name: 'aioimaplib', version: 'latest', category: 'python', description: 'Async IMAP Client (Unified Inbox)', license: 'MIT', sourceUrl: 'https://github.com/bamthomas/aioimaplib' },
+  { type: 'library', name: 'aiosmtplib', version: 'latest', category: 'python', description: 'Async SMTP Client (Mail Sending)', license: 'MIT', sourceUrl: 'https://github.com/cole/aiosmtplib' },
+  { type: 'library', name: 'email-validator', version: 'latest', category: 'python', description: 'Email Validation', license: 'CC0-1.0', sourceUrl: 'https://github.com/JoshData/python-email-validator' },
+  { type: 'library', name: 'cryptography', version: 'latest', category: 'python', description: 'Encryption (Mail Credentials)', license: 'BSD-3-Clause', sourceUrl: 'https://github.com/pyca/cryptography' },
+  { type: 'library', name: 'asyncpg', version: 'latest', category: 'python', description: 'Async PostgreSQL Driver', license: 'Apache-2.0', sourceUrl: 'https://github.com/MagicStack/asyncpg' },
+  { type: 'library', name: 'python-dateutil', version: 'latest', category: 'python', description: 'Date Parsing (Deadline Extraction)', license: 'Apache-2.0', sourceUrl: 'https://github.com/dateutil/dateutil' },
+  { type: 'library', name: 'faster-whisper', version: '1.0+', category: 'python', description: 'CTranslate2 Whisper (GPU-optimiert)', license: 'MIT', sourceUrl: 'https://github.com/SYSTRAN/faster-whisper' },
+  { type: 'library', name: 'pyannote.audio', version: '3.x', category: 'python', description: 'Speaker Diarization', license: 'MIT', sourceUrl: 'https://github.com/pyannote/pyannote-audio' },
+  { type: 'library', name: 'rq', version: '1.x', category: 'python', description: 'Redis Queue (Task Processing)', license: 'BSD-2-Clause', sourceUrl: 'https://github.com/rq/rq' },
+  { type: 'library', name: 'ffmpeg-python', version: '0.2+', category: 'python', description: 'FFmpeg Python Bindings', license: 'Apache-2.0', sourceUrl: 'https://github.com/kkroening/ffmpeg-python' },
+  { type: 'library', name: 'webvtt-py', version: '0.4+', category: 'python', description: 'WebVTT Subtitle Export', license: 'MIT', sourceUrl: 'https://github.com/glut23/webvtt-py' },
+  { type: 'library', name: 'minio', version: '7.x', category: 'python', description: 'MinIO S3 Client', license: 'Apache-2.0', sourceUrl: 'https://github.com/minio/minio-py' },
+  { type: 'library', name: 'structlog', version: '24.x', category: 'python', description: 'Structured Logging', license: 'Apache-2.0', sourceUrl: 'https://github.com/hynek/structlog' },
+  { type: 'library', name: 'feedparser', version: '6.x', category: 'python', description: 'RSS/Atom Feed Parser (Alerts Agent)', license: 'BSD-2-Clause', sourceUrl: 'https://github.com/kurtmckee/feedparser' },
+  { type: 'library', name: 'APScheduler', version: '3.x', category: 'python', description: 'AsyncIO Job Scheduler (Alerts Agent)', license: 'MIT', sourceUrl: 'https://github.com/agronholm/apscheduler' },
+  { type: 'library', name: 'beautifulsoup4', version: '4.x', category: 'python', description: 'HTML Parser (Email Parsing)', license: 'MIT', sourceUrl: 'https://code.launchpad.net/beautifulsoup' },
+  { type: 'library', name: 'websockets', version: '14.x', category: 'python', description: 'WebSocket Support (Voice Streaming)', license: 'BSD-3-Clause', sourceUrl: 'https://github.com/python-websockets/websockets' },
+  { type: 'library', name: 'soundfile', version: '0.13+', category: 'python', description: 'Audio File Processing (Voice Service)', license: 'BSD-3-Clause', sourceUrl: 'https://github.com/bastibe/python-soundfile' },
+  { type: 'library', name: 'scipy', version: '1.14+', category: 'python', description: 'Signal Processing (Audio)', license: 'BSD-3-Clause', sourceUrl: 'https://github.com/scipy/scipy' },
+  { type: 'library', name: 'redis', version: '5.x', category: 'python', description: 'Valkey/Redis Client (Voice Sessions)', license: 'MIT', sourceUrl: 'https://github.com/redis/redis-py' },
+  { type: 'library', name: 'pydantic-settings', version: '2.x', category: 'python', description: 'Settings Management (Voice Config)', license: 'MIT', sourceUrl: 'https://github.com/pydantic/pydantic-settings' },
+]
+
+// Key Go modules (from go.mod files)
+export const GO_MODULES: Component[] = [
+  { type: 'library', name: 'gin-gonic/gin', version: '1.9+', category: 'go', description: 'Web Framework', license: 'MIT', sourceUrl: 'https://github.com/gin-gonic/gin' },
+  { type: 'library', name: 'gorm.io/gorm', version: '1.25+', category: 'go', description: 'ORM', license: 'MIT', sourceUrl: 'https://github.com/go-gorm/gorm' },
+  { type: 'library', name: 'golang-jwt/jwt', version: 'v5', category: 'go', description: 'JWT Library', license: 'MIT', sourceUrl: 'https://github.com/golang-jwt/jwt' },
+  { type: 'library', name: 'opensearch-project/opensearch-go', version: '4.x', category: 'go', description: 'OpenSearch Client (edu-search-service)', license: 'Apache-2.0', sourceUrl: 'https://github.com/opensearch-project/opensearch-go' },
+  { type: 'library', name: 'lib/pq', version: '1.10+', category: 'go', description: 'PostgreSQL Driver (school-service)', license: 'MIT', sourceUrl: 'https://github.com/lib/pq' },
+  { type: 'library', name: 'spf13/viper', version: 'latest', category: 'go', description: 'Configuration', license: 'MIT', sourceUrl: 'https://github.com/spf13/viper' },
+  { type: 'library', name: 'uber-go/zap', version: 'latest', category: 'go', description: 'Structured Logging', license: 'MIT', sourceUrl: 'https://github.com/uber-go/zap' },
+  { type: 'library', name: 'swaggo/swag', version: 'latest', category: 'go', description: 'Swagger Docs', license: 'MIT', sourceUrl: 'https://github.com/swaggo/swag' },
+]
+
+// Key Node.js packages (from package.json files)
+export const NODE_PACKAGES: Component[] = [
+  { type: 'library', name: 'Next.js', version: '15.1', category: 'nodejs', description: 'React Framework', license: 'MIT', sourceUrl: 'https://github.com/vercel/next.js' },
+  { type: 'library', name: 'React', version: '19', category: 'nodejs', description: 'UI Library', license: 'MIT', sourceUrl: 'https://github.com/facebook/react' },
+  { type: 'library', name: 'TypeScript', version: '5.x', category: 'nodejs', description: 'Type System', license: 'Apache-2.0', sourceUrl: 'https://github.com/microsoft/TypeScript' },
+  { type: 'library', name: 'Tailwind CSS', version: '3.4', category: 'nodejs', description: 'Utility CSS', license: 'MIT', sourceUrl: 'https://github.com/tailwindlabs/tailwindcss' },
+  { type: 'library', name: 'Material Design Icons', version: 'latest', category: 'nodejs', description: 'Icon-System (Companion UI, Studio)', license: 'Apache-2.0', sourceUrl: 'https://github.com/google/material-design-icons' },
+  { type: 'library', name: 'Recharts', version: '2.12', category: 'nodejs', description: 'React Charts (Admin Dashboard)', license: 'MIT', sourceUrl: 'https://github.com/recharts/recharts' },
+  { type: 'library', name: 'Playwright', version: '1.50', category: 'nodejs', description: 'E2E Testing Framework (SDK Tests)', license: 'Apache-2.0', sourceUrl: 'https://github.com/microsoft/playwright' },
+  { type: 'library', name: 'Vitest', version: '4.x', category: 'nodejs', description: 'Unit Testing Framework', license: 'MIT', sourceUrl: 'https://github.com/vitest-dev/vitest' },
+  { type: 'library', name: 'jsPDF', version: '4.x', category: 'nodejs', description: 'PDF Generation (SDK Export)', license: 'MIT', sourceUrl: 'https://github.com/parallax/jsPDF' },
+  { type: 'library', name: 'JSZip', version: '3.x', category: 'nodejs', description: 'ZIP File Creation (SDK Export)', license: 'MIT/GPL-3.0', sourceUrl: 'https://github.com/Stuk/jszip' },
+  { type: 'library', name: 'Lucide React', version: '0.468', category: 'nodejs', description: 'Icon Library', license: 'ISC', sourceUrl: 'https://github.com/lucide-icons/lucide' },
+]
+
+// Unity packages (Breakpilot Drive game engine)
+export const UNITY_PACKAGES: Component[] = [
+  { type: 'library', name: 'Unity Engine', version: '6000.0 (Unity 6)', category: 'unity', description: 'Game Engine', license: 'Unity EULA', sourceUrl: 'https://unity.com' },
+  { type: 'library', name: 'Universal Render Pipeline (URP)', version: '17.x', category: 'unity', description: 'Render Pipeline', license: 'Unity Companion', sourceUrl: 'https://docs.unity3d.com/Packages/com.unity.render-pipelines.universal@17.0' },
+  { type: 'library', name: 'TextMeshPro', version: '3.2', category: 'unity', description: 'Advanced Text Rendering', license: 'Unity Companion', sourceUrl: 'https://docs.unity3d.com/Packages/com.unity.textmeshpro@3.2' },
+  { type: 'library', name: 'Unity Mathematics', version: '1.3', category: 'unity', description: 'Math Library (SIMD)', license: 'Unity Companion', sourceUrl: 'https://docs.unity3d.com/Packages/com.unity.mathematics@1.3' },
+  { type: 'library', name: 'Newtonsoft.Json (Unity)', version: '3.2', category: 'unity', description: 'JSON Serialization', license: 'MIT', sourceUrl: 'https://docs.unity3d.com/Packages/com.unity.nuget.newtonsoft-json@3.2' },
+  { type: 'library', name: 'Unity UI', version: '2.0', category: 'unity', description: 'UI System', license: 'Unity Companion', sourceUrl: 'https://docs.unity3d.com/Packages/com.unity.ugui@2.0' },
+  { type: 'library', name: 'Unity Input System', version: '1.8', category: 'unity', description: 'New Input System', license: 'Unity Companion', sourceUrl: 'https://docs.unity3d.com/Packages/com.unity.inputsystem@1.8' },
+]
+
+// C# dependencies (Breakpilot Drive)
+export const CSHARP_PACKAGES: Component[] = [
+  { type: 'library', name: '.NET Standard', version: '2.1', category: 'csharp', description: 'Runtime', license: 'MIT', sourceUrl: 'https://github.com/dotnet/standard' },
+  { type: 'library', name: 'UnityWebRequest', version: 'built-in', category: 'csharp', description: 'HTTP Client', license: 'Unity Companion', sourceUrl: '-' },
+  { type: 'library', name: 'System.Text.Json', version: 'built-in', category: 'csharp', description: 'JSON Parsing', license: 'MIT', sourceUrl: 'https://github.com/dotnet/runtime' },
+]
diff --git a/admin-lehrer/app/(admin)/infrastructure/sbom/page.tsx b/admin-lehrer/app/(admin)/infrastructure/sbom/page.tsx
index db12765..a50de6e 100644
--- a/admin-lehrer/app/(admin)/infrastructure/sbom/page.tsx
+++ b/admin-lehrer/app/(admin)/infrastructure/sbom/page.tsx
@@ -13,371 +13,36 @@
  * - Version tracking
  */
 
-import { useState, useEffect } from 'react'
 import Link from 'next/link'
 import { PagePurpose } from '@/components/common/PagePurpose'
 import { DevOpsPipelineSidebarResponsive } from '@/components/infrastructure/DevOpsPipelineSidebar'
-
-interface Component {
-  type: string
-  name: string
-  version: string
-  purl?: string
-  licenses?: { license: { id: string } }[]
-  category?: string
-  port?: string
-  description?: string
-  license?: string
-  sourceUrl?: string
-}
-
-interface SBOMData {
-  bomFormat?: string
-  specVersion?: string
-  version?: number
-  metadata?: {
-    timestamp?: string
-    tools?: { vendor: string; name: string; version: string }[]
-    component?: { type: string; name: string; version: string }
-  }
-  components?: Component[]
-}
-
-type CategoryType = 'all' | 'infrastructure' | 'security-tools' | 'python' | 'go' | 'nodejs' | 'unity' | 'csharp'
-type InfoTabType = 'audit' | 'documentation'
-
-// Infrastructure components from docker-compose.yml and project analysis
-const INFRASTRUCTURE_COMPONENTS: Component[] = [
-  // ===== DATABASES =====
-  { type: 'service', name: 'PostgreSQL', version: '16-alpine', category: 'database', port: '5432', description: 'Hauptdatenbank', license: 'PostgreSQL', sourceUrl: 'https://github.com/postgres/postgres' },
-  { type: 'service', name: 'Synapse PostgreSQL', version: '16-alpine', category: 'database', port: '-', description: 'Matrix Datenbank', license: 'PostgreSQL', sourceUrl: 'https://github.com/postgres/postgres' },
-
-  // ===== CACHE & QUEUE =====
-  { type: 'service', name: 'Valkey', version: '8-alpine', category: 'cache', port: '6379', description: 'In-Memory Cache & Sessions (Redis OSS Fork)', license: 'BSD-3-Clause', sourceUrl: 'https://github.com/valkey-io/valkey' },
-
-  // ===== SEARCH ENGINES =====
-  { type: 'service', name: 'Qdrant', version: '1.7.4', category: 'search', port: '6333', description: 'Vector Database (RAG/Embeddings)', license: 'Apache-2.0', sourceUrl: 'https://github.com/qdrant/qdrant' },
-  { type: 'service', name: 'OpenSearch', version: '2.x', category: 'search', port: '9200', description: 'Volltext-Suche (Elasticsearch Fork)', license: 'Apache-2.0', sourceUrl: 'https://github.com/opensearch-project/OpenSearch' },
-  { type: 'service', name: 'Meilisearch', version: 'latest', category: 'search', port: '7700', description: 'Instant Search Engine', license: 'MIT', sourceUrl: 'https://github.com/meilisearch/meilisearch' },
-
-  // ===== OBJECT STORAGE =====
-  { type: 'service', name: 'MinIO', version: 'latest', category: 'storage', port: '9000/9001', description: 'S3-kompatibel Object Storage', license: 'AGPL-3.0', sourceUrl: 'https://github.com/minio/minio' },
-
-  // ===== SECURITY =====
-  { type: 'service', name: 'HashiCorp Vault', version: '1.15', category: 'security', port: '8200', description: 'Secrets Management', license: 'BUSL-1.1', sourceUrl: 'https://github.com/hashicorp/vault' },
-  { type: 'service', name: 'Keycloak', version: '23.0', category: 'security', port: '8180', description: 'Identity Provider (SSO/OIDC)', license: 'Apache-2.0', sourceUrl: 'https://github.com/keycloak/keycloak' },
-  { type: 'service', name: 'NetBird', version: '0.64.5', category: 'security', port: '-', description: 'Zero-Trust Mesh VPN (WireGuard-basiert)', license: 'BSD-3-Clause', sourceUrl: 'https://github.com/netbirdio/netbird' },
-
-  // ===== COMMUNICATION =====
-  { type: 'service', name: 'Matrix Synapse', version: 'latest', category: 'communication', port: '8008', description: 'E2EE Messenger Server', license: 'AGPL-3.0', sourceUrl: 'https://github.com/element-hq/synapse' },
-  { type: 'service', name: 'Jitsi Web', version: 'stable-9823', category: 'communication', port: '8443', description: 'Videokonferenz UI', license: 'Apache-2.0', sourceUrl: 'https://github.com/jitsi/jitsi-meet' },
-  { type: 'service', name: 'Jitsi Prosody (XMPP)', version: 'stable-9823', category: 'communication', port: '-', description: 'XMPP Server', license: 'MIT', sourceUrl: 'https://github.com/bjc/prosody' },
-  { type: 'service', name: 'Jitsi Jicofo', version: 'stable-9823', category: 'communication', port: '-', description: 'Conference Focus Component', license: 'Apache-2.0', sourceUrl: 'https://github.com/jitsi/jicofo' },
-  { type: 'service', name: 'Jitsi JVB', version: 'stable-9823', category: 'communication', port: '10000/udp', description: 'Videobridge (WebRTC SFU)', license: 'Apache-2.0', sourceUrl: 'https://github.com/jitsi/jitsi-videobridge' },
-  { type: 'service', name: 'Jibri', version: 'stable-9823', category: 'communication', port: '-', description: 'Recording & Streaming Service', license: 'Apache-2.0', sourceUrl: 'https://github.com/jitsi/jibri' },
-
-  // ===== APPLICATION SERVICES (Python) =====
-  { type: 'service', name: 'Python Backend (FastAPI)', version: '3.12', category: 'application', port: '8000', description: 'Lehrer Backend API (Klausuren, E-Mail, Alerts)', license: 'Proprietary', sourceUrl: '-' },
-  { type: 'service', name: 'Klausur Service', version: '1.0', category: 'application', port: '8086', description: 'Abitur-Klausurkorrektur (BYOEH)', license: 'Proprietary', sourceUrl: '-' },
-  { type: 'service', name: 'Transcription Worker', version: '1.0', category: 'application', port: '-', description: 'Whisper + pyannote Transkription', license: 'Proprietary', sourceUrl: '-' },
-
-  // ===== APPLICATION SERVICES (Go) =====
-  { type: 'service', name: 'Go School Service', version: '1.21', category: 'application', port: '8084', description: 'Klausuren, Noten, Zeugnisse', license: 'Proprietary', sourceUrl: '-' },
-
-  // ===== APPLICATION SERVICES (Node.js) =====
-  { type: 'service', name: 'Next.js Admin Frontend', version: '15.1', category: 'application', port: '3002', description: 'Admin Lehrer Dashboard (React)', license: 'Proprietary', sourceUrl: '-' },
-
-  // ===== CI/CD & VERSION CONTROL =====
-  { type: 'service', name: 'Woodpecker CI', version: '2.x', category: 'cicd', port: '8082', description: 'Self-hosted CI/CD Pipeline (Drone Fork)', license: 'Apache-2.0', sourceUrl: 'https://github.com/woodpecker-ci/woodpecker' },
-  { type: 'service', name: 'Gitea', version: '1.21', category: 'cicd', port: '3003', description: 'Self-hosted Git Service', license: 'MIT', sourceUrl: 'https://github.com/go-gitea/gitea' },
-
-  // ===== DEVELOPMENT =====
-  { type: 'service', name: 'Mailpit', version: 'latest', category: 'development', port: '8025/1025', description: 'E-Mail Testing (SMTP Catch-All)', license: 'MIT', sourceUrl: 'https://github.com/axllent/mailpit' },
-
-  // ===== GAME (Breakpilot Drive) =====
-  { type: 'service', name: 'Breakpilot Drive (Unity WebGL)', version: '6000.0', category: 'game', port: '3001', description: 'Lernspiel fuer Schueler (Klasse 2-6)', license: 'Proprietary', sourceUrl: '-' },
-
-  // ===== VOICE SERVICE =====
-  { type: 'service', name: 'Voice Service (FastAPI)', version: '1.0', category: 'voice', port: '8091', description: 'Voice-First Interface mit PersonaPlex-7B & TaskOrchestrator', license: 'Proprietary', sourceUrl: '-' },
-  { type: 'service', name: 'PersonaPlex-7B (NVIDIA)', version: '7B', category: 'voice', port: '8998', description: 'Full-Duplex Speech-to-Speech (Produktion)', license: 'MIT/NVIDIA Open Model', sourceUrl: 'https://developer.nvidia.com' },
-  { type: 'service', name: 'TaskOrchestrator', version: '1.0', category: 'voice', port: '-', description: 'Agent-Orchestrierung mit Task State Machine', license: 'Proprietary', sourceUrl: '-' },
-  { type: 'service', name: 'Mimi Audio Codec', version: '1.0', category: 'voice', port: '-', description: 'Audio Streaming (24kHz, 80ms Frames)', license: 'MIT', sourceUrl: '-' },
-
-  // ===== BQAS (Quality Assurance) =====
-  { type: 'service', name: 'BQAS Local Scheduler', version: '1.0', category: 'qa', port: '-', description: 'Lokale GitHub Actions Alternative (launchd)', license: 'Proprietary', sourceUrl: '-' },
-  { type: 'service', name: 'BQAS LLM Judge', version: '1.0', category: 'qa', port: '-', description: 'Qwen2.5-32B basierte Test-Bewertung', license: 'Proprietary', sourceUrl: '-' },
-  { type: 'service', name: 'BQAS RAG Judge', version: '1.0', category: 'qa', port: '-', description: 'RAG/Korrektur Evaluierung', license: 'Proprietary', sourceUrl: '-' },
-  { type: 'service', name: 'BQAS Notifier', version: '1.0', category: 'qa', port: '-', description: 'Desktop/Slack/Email Benachrichtigungen', license: 'Proprietary', sourceUrl: '-' },
-  { type: 'service', name: 'BQAS Regression Tracker', version: '1.0', category: 'qa', port: '-', description: 'Score-Historie und Regression-Erkennung', license: 'Proprietary', sourceUrl: '-' },
-]
-
-// Security Tools discovered in project
-const SECURITY_TOOLS: Component[] = [
-  { type: 'tool', name: 'Trivy', version: 'latest', category: 'security-tool', description: 'Container Vulnerability Scanner', license: 'Apache-2.0', sourceUrl: 'https://github.com/aquasecurity/trivy' },
-  { type: 'tool', name: 'Grype', version: 'latest', category: 'security-tool', description: 'SBOM Vulnerability Scanner', license: 'Apache-2.0', sourceUrl: 'https://github.com/anchore/grype' },
-  { type: 'tool', name: 'Syft', version: 'latest', category: 'security-tool', description: 'SBOM Generator', license: 'Apache-2.0', sourceUrl: 'https://github.com/anchore/syft' },
-  { type: 'tool', name: 'Gitleaks', version: 'latest', category: 'security-tool', description: 'Secrets Detection in Git', license: 'MIT', sourceUrl: 'https://github.com/gitleaks/gitleaks' },
-  { type: 'tool', name: 'TruffleHog', version: '3.x', category: 'security-tool', description: 'Secrets Scanner (Regex/Entropy)', license: 'AGPL-3.0', sourceUrl: 'https://github.com/trufflesecurity/trufflehog' },
-  { type: 'tool', name: 'Semgrep', version: 'latest', category: 'security-tool', description: 'SAST - Static Analysis', license: 'LGPL-2.1', sourceUrl: 'https://github.com/semgrep/semgrep' },
-  { type: 'tool', name: 'Bandit', version: 'latest', category: 'security-tool', description: 'Python Security Linter', license: 'Apache-2.0', sourceUrl: 'https://github.com/PyCQA/bandit' },
-  { type: 'tool', name: 'Gosec', version: 'latest', category: 'security-tool', description: 'Go Security Scanner', license: 'Apache-2.0', sourceUrl: 'https://github.com/securego/gosec' },
-  { type: 'tool', name: 'govulncheck', version: 'latest', category: 'security-tool', description: 'Go Vulnerability Check', license: 'BSD-3-Clause', sourceUrl: 'https://pkg.go.dev/golang.org/x/vuln/cmd/govulncheck' },
-  { type: 'tool', name: 'golangci-lint', version: 'latest', category: 'security-tool', description: 'Go Linter (Security Rules)', license: 'GPL-3.0', sourceUrl: 'https://github.com/golangci/golangci-lint' },
-  { type: 'tool', name: 'npm audit', version: 'built-in', category: 'security-tool', description: 'Node.js Vulnerability Check', license: 'Artistic-2.0', sourceUrl: 'https://docs.npmjs.com/cli/commands/npm-audit' },
-  { type: 'tool', name: 'pip-audit', version: 'latest', category: 'security-tool', description: 'Python Dependency Audit', license: 'Apache-2.0', sourceUrl: 'https://github.com/pypa/pip-audit' },
-  { type: 'tool', name: 'safety', version: 'latest', category: 'security-tool', description: 'Python Safety Check', license: 'MIT', sourceUrl: 'https://github.com/pyupio/safety' },
-  { type: 'tool', name: 'CodeQL', version: 'latest', category: 'security-tool', description: 'GitHub Security Analysis', license: 'MIT', sourceUrl: 'https://github.com/github/codeql' },
-]
-
-// Key Python packages (from requirements.txt)
-const PYTHON_PACKAGES: Component[] = [
-  { type: 'library', name: 'FastAPI', version: '0.109+', category: 'python', description: 'Web Framework', license: 'MIT', sourceUrl: 'https://github.com/tiangolo/fastapi' },
-  { type: 'library', name: 'Uvicorn', version: '0.38+', category: 'python', description: 'ASGI Server', license: 'BSD-3-Clause', sourceUrl: 'https://github.com/encode/uvicorn' },
-  { type: 'library', name: 'Starlette', version: '0.49+', category: 'python', description: 'ASGI Framework (FastAPI Basis)', license: 'BSD-3-Clause', sourceUrl: 'https://github.com/encode/starlette' },
-  { type: 'library', name: 'Pydantic', version: '2.x', category: 'python', description: 'Data Validation', license: 'MIT', sourceUrl: 'https://github.com/pydantic/pydantic' },
-  { type: 'library', name: 'SQLAlchemy', version: '2.x', category: 'python', description: 'ORM', license: 'MIT', sourceUrl: 'https://github.com/sqlalchemy/sqlalchemy' },
-  { type: 'library', name: 'Alembic', version: '1.14+', category: 'python', description: 'DB Migrations (Classroom, Feedback Tables)', license: 'MIT', sourceUrl: 'https://github.com/sqlalchemy/alembic' },
-  { type: 'library', name: 'psycopg2-binary', version: '2.9+', category: 'python', description: 'PostgreSQL Driver', license: 'LGPL-3.0', sourceUrl: 'https://github.com/psycopg/psycopg2' },
-  { type: 'library', name: 'httpx', version: 'latest', category: 'python', description: 'Async HTTP Client', license: 'BSD-3-Clause', sourceUrl: 'https://github.com/encode/httpx' },
-  { type: 'library', name: 'PyJWT', version: 'latest', category: 'python', description: 'JWT Handling', license: 'MIT', sourceUrl: 'https://github.com/jpadilla/pyjwt' },
-  { type: 'library', name: 'hvac', version: 'latest', category: 'python', description: 'Vault Client', license: 'Apache-2.0', sourceUrl: 'https://github.com/hvac/hvac' },
-  { type: 'library', name: 'python-multipart', version: 'latest', category: 'python', description: 'File Uploads', license: 'Apache-2.0', sourceUrl: 'https://github.com/andrew-d/python-multipart' },
-  { type: 'library', name: 'aiofiles', version: 'latest', category: 'python', description: 'Async File I/O', license: 'Apache-2.0', sourceUrl: 'https://github.com/Tinche/aiofiles' },
-  { type: 'library', name: 'openai', version: 'latest', category: 'python', description: 'OpenAI SDK', license: 'MIT', sourceUrl: 'https://github.com/openai/openai-python' },
-  { type: 'library', name: 'anthropic', version: 'latest', category: 'python', description: 'Anthropic Claude SDK', license: 'MIT', sourceUrl: 'https://github.com/anthropics/anthropic-sdk-python' },
-  { type: 'library', name: 'langchain', version: 'latest', category: 'python', description: 'LLM Framework', license: 'MIT', sourceUrl: 'https://github.com/langchain-ai/langchain' },
-  { type: 'library', name: 'aioimaplib', version: 'latest', category: 'python', description: 'Async IMAP Client (Unified Inbox)', license: 'MIT', sourceUrl: 'https://github.com/bamthomas/aioimaplib' },
-  { type: 'library', name: 'aiosmtplib', version: 'latest', category: 'python', description: 'Async SMTP Client (Mail Sending)', license: 'MIT', sourceUrl: 'https://github.com/cole/aiosmtplib' },
-  { type: 'library', name: 'email-validator', version: 'latest', category: 'python', description: 'Email Validation', license: 'CC0-1.0', sourceUrl: 'https://github.com/JoshData/python-email-validator' },
-  { type: 'library', name: 'cryptography', version: 'latest', category: 'python', description: 'Encryption (Mail Credentials)', license: 'BSD-3-Clause', sourceUrl: 'https://github.com/pyca/cryptography' },
-  { type: 'library', name: 'asyncpg', version: 'latest', category: 'python', description: 'Async PostgreSQL Driver', license: 'Apache-2.0', sourceUrl: 'https://github.com/MagicStack/asyncpg' },
-  { type: 'library', name: 'python-dateutil', version: 'latest', category: 'python', description: 'Date Parsing (Deadline Extraction)', license: 'Apache-2.0', sourceUrl: 'https://github.com/dateutil/dateutil' },
-  { type: 'library', name: 'faster-whisper', version: '1.0+', category: 'python', description: 'CTranslate2 Whisper (GPU-optimiert)', license: 'MIT', sourceUrl: 'https://github.com/SYSTRAN/faster-whisper' },
-  { type: 'library', name: 'pyannote.audio', version: '3.x', category: 'python', description: 'Speaker Diarization', license: 'MIT', sourceUrl: 'https://github.com/pyannote/pyannote-audio' },
-  { type: 'library', name: 'rq', version: '1.x', category: 'python', description: 'Redis Queue (Task Processing)', license: 'BSD-2-Clause', sourceUrl: 'https://github.com/rq/rq' },
-  { type: 'library', name: 'ffmpeg-python', version: '0.2+', category: 'python', description: 'FFmpeg Python Bindings', license: 'Apache-2.0', sourceUrl: 'https://github.com/kkroening/ffmpeg-python' },
-  { type: 'library', name: 'webvtt-py', version: '0.4+', category: 'python', description: 'WebVTT Subtitle Export', license: 'MIT', sourceUrl: 'https://github.com/glut23/webvtt-py' },
-  { type: 'library', name: 'minio', version: '7.x', category: 'python', description: 'MinIO S3 Client', license: 'Apache-2.0', sourceUrl: 'https://github.com/minio/minio-py' },
-  { type: 'library', name: 'structlog', version: '24.x', category: 'python', description: 'Structured Logging', license: 'Apache-2.0', sourceUrl: 'https://github.com/hynek/structlog' },
-  { type: 'library', name: 'feedparser', version: '6.x', category: 'python', description: 'RSS/Atom Feed Parser (Alerts Agent)', license: 'BSD-2-Clause', sourceUrl: 'https://github.com/kurtmckee/feedparser' },
-  { type: 'library', name: 'APScheduler', version: '3.x', category: 'python', description: 'AsyncIO Job Scheduler (Alerts Agent)', license: 'MIT', sourceUrl: 'https://github.com/agronholm/apscheduler' },
-  { type: 'library', name: 'beautifulsoup4', version: '4.x', category: 'python', description: 'HTML Parser (Email Parsing)', license: 'MIT', sourceUrl: 'https://code.launchpad.net/beautifulsoup' },
-  { type: 'library', name: 'websockets', version: '14.x', category: 'python', description: 'WebSocket Support (Voice Streaming)', license: 'BSD-3-Clause', sourceUrl: 'https://github.com/python-websockets/websockets' },
-  { type: 'library', name: 'soundfile', version: '0.13+', category: 'python', description: 'Audio File Processing (Voice Service)', license: 'BSD-3-Clause', sourceUrl: 'https://github.com/bastibe/python-soundfile' },
-  { type: 'library', name: 'scipy', version: '1.14+', category: 'python', description: 'Signal Processing (Audio)', license: 'BSD-3-Clause', sourceUrl: 'https://github.com/scipy/scipy' },
-  { type: 'library', name: 'redis', version: '5.x', category: 'python', description: 'Valkey/Redis Client (Voice Sessions)', license: 'MIT', sourceUrl: 'https://github.com/redis/redis-py' },
-  { type: 'library', name: 'pydantic-settings', version: '2.x', category: 'python', description: 'Settings Management (Voice Config)', license: 'MIT', sourceUrl: 'https://github.com/pydantic/pydantic-settings' },
-]
-
-// Key Go modules (from go.mod files)
-const GO_MODULES: Component[] = [
-  { type: 'library', name: 'gin-gonic/gin', version: '1.9+', category: 'go', description: 'Web Framework', license: 'MIT', sourceUrl: 'https://github.com/gin-gonic/gin' },
-  { type: 'library', name: 'gorm.io/gorm', version: '1.25+', category: 'go', description: 'ORM', license: 'MIT', sourceUrl: 'https://github.com/go-gorm/gorm' },
-  { type: 'library', name: 'golang-jwt/jwt', version: 'v5', category: 'go', description: 'JWT Library', license: 'MIT', sourceUrl: 'https://github.com/golang-jwt/jwt' },
-  { type: 'library', name: 'opensearch-project/opensearch-go', version: '4.x', category: 'go', description: 'OpenSearch Client (edu-search-service)', license: 'Apache-2.0', sourceUrl: 'https://github.com/opensearch-project/opensearch-go' },
-  { type: 'library', name: 'lib/pq', version: '1.10+', category: 'go', description: 'PostgreSQL Driver (school-service)', license: 'MIT', sourceUrl: 'https://github.com/lib/pq' },
-  { type: 'library', name: 'spf13/viper', version: 'latest', category: 'go', description: 'Configuration', license: 'MIT', sourceUrl: 'https://github.com/spf13/viper' },
-  { type: 'library', name: 'uber-go/zap', version: 'latest', category: 'go', description: 'Structured Logging', license: 'MIT', sourceUrl: 'https://github.com/uber-go/zap' },
-  { type: 'library', name: 'swaggo/swag', version: 'latest', category: 'go', description: 'Swagger Docs', license: 'MIT', sourceUrl: 'https://github.com/swaggo/swag' },
-]
-
-// Key Node.js packages (from package.json files)
-const NODE_PACKAGES: Component[] = [
-  { type: 'library', name: 'Next.js', version: '15.1', category: 'nodejs', description: 'React Framework', license: 'MIT', sourceUrl: 'https://github.com/vercel/next.js' },
-  { type: 'library', name: 'React', version: '19', category: 'nodejs', description: 'UI Library', license: 'MIT', sourceUrl: 'https://github.com/facebook/react' },
-  { type: 'library', name: 'TypeScript', version: '5.x', category: 'nodejs', description: 'Type System', license: 'Apache-2.0', sourceUrl: 'https://github.com/microsoft/TypeScript' },
-  { type: 'library', name: 'Tailwind CSS', version: '3.4', category: 'nodejs', description: 'Utility CSS', license: 'MIT', sourceUrl: 'https://github.com/tailwindlabs/tailwindcss' },
-  { type: 'library', name: 'Material Design Icons', version: 'latest', category: 'nodejs', description: 'Icon-System (Companion UI, Studio)', license: 'Apache-2.0', sourceUrl: 'https://github.com/google/material-design-icons' },
-  { type: 'library', name: 'Recharts', version: '2.12', category: 'nodejs', description: 'React Charts (Admin Dashboard)', license: 'MIT', sourceUrl: 'https://github.com/recharts/recharts' },
-  { type: 'library', name: 'Playwright', version: '1.50', category: 'nodejs', description: 'E2E Testing Framework (SDK Tests)', license: 'Apache-2.0', sourceUrl: 'https://github.com/microsoft/playwright' },
-  { type: 'library', name: 'Vitest', version: '4.x', category: 'nodejs', description: 'Unit Testing Framework', license: 'MIT', sourceUrl: 'https://github.com/vitest-dev/vitest' },
-  { type: 'library', name: 'jsPDF', version: '4.x', category: 'nodejs', description: 'PDF Generation (SDK Export)', license: 'MIT', sourceUrl: 'https://github.com/parallax/jsPDF' },
-  { type: 'library', name: 'JSZip', version: '3.x', category: 'nodejs', description: 'ZIP File Creation (SDK Export)', license: 'MIT/GPL-3.0', sourceUrl: 'https://github.com/Stuk/jszip' },
-  { type: 'library', name: 'Lucide React', version: '0.468', category: 'nodejs', description: 'Icon Library', license: 'ISC', sourceUrl: 'https://github.com/lucide-icons/lucide' },
-]
-
-// Unity packages (Breakpilot Drive game engine)
-const UNITY_PACKAGES: Component[] = [
-  { type: 'library', name: 'Unity Engine', version: '6000.0 (Unity 6)', category: 'unity', description: 'Game Engine', license: 'Unity EULA', sourceUrl: 'https://unity.com' },
-  { type: 'library', name: 'Universal Render Pipeline (URP)', version: '17.x', category: 'unity', description: 'Render Pipeline', license: 'Unity Companion', sourceUrl: 'https://docs.unity3d.com/Packages/com.unity.render-pipelines.universal@17.0' },
-  { type: 'library', name: 'TextMeshPro', version: '3.2', category: 'unity', description: 'Advanced Text Rendering', license: 'Unity Companion', sourceUrl: 'https://docs.unity3d.com/Packages/com.unity.textmeshpro@3.2' },
-  { type: 'library', name: 'Unity Mathematics', version: '1.3', category: 'unity', description: 'Math Library (SIMD)', license: 'Unity Companion', sourceUrl: 'https://docs.unity3d.com/Packages/com.unity.mathematics@1.3' },
-  { type: 'library', name: 'Newtonsoft.Json (Unity)', version: '3.2', category: 'unity', description: 'JSON Serialization', license: 'MIT', sourceUrl: 'https://docs.unity3d.com/Packages/com.unity.nuget.newtonsoft-json@3.2' },
-  { type: 'library', name: 'Unity UI', version: '2.0', category: 'unity', description: 'UI System', license: 'Unity Companion', sourceUrl: 'https://docs.unity3d.com/Packages/com.unity.ugui@2.0' },
-  { type: 'library', name: 'Unity Input System', version: '1.8', category: 'unity', description: 'New Input System', license: 'Unity Companion', sourceUrl: 'https://docs.unity3d.com/Packages/com.unity.inputsystem@1.8' },
-]
-
-// C# dependencies (Breakpilot Drive)
-const CSHARP_PACKAGES: Component[] = [
-  { type: 'library', name: '.NET Standard', version: '2.1', category: 'csharp', description: 'Runtime', license: 'MIT', sourceUrl: 'https://github.com/dotnet/standard' },
-  { type: 'library', name: 'UnityWebRequest', version: 'built-in', category: 'csharp', description: 'HTTP Client', license: 'Unity Companion', sourceUrl: '-' },
-  { type: 'library', name: 'System.Text.Json', version: 'built-in', category: 'csharp', description: 'JSON Parsing', license: 'MIT', sourceUrl: 'https://github.com/dotnet/runtime' },
-]
+import {
+  StatsCards,
+  CategoryFilter,
+  ComponentsTable,
+  ExportButton,
+  SbomMetadata,
+  InfoTabsSection,
+} from './_components'
+import { useSbomData } from './useSbomData'
 
 export default function SBOMPage() {
-  const [sbomData, setSbomData] = useState<SBOMData | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [activeCategory, setActiveCategory] = useState<CategoryType>('all')
-  const [searchTerm, setSearchTerm] = useState('')
-  const [activeInfoTab, setActiveInfoTab] = useState<InfoTabType>('audit')
-  const [showFullDocs, setShowFullDocs] = useState(false)
-
-  useEffect(() => {
-    loadSBOM()
-  }, [])
-
-  const loadSBOM = async () => {
-    setLoading(true)
-    try {
-      const res = await fetch('/api/v1/security/sbom')
-      if (res.ok) {
-        const data = await res.json()
-        setSbomData(data)
-      }
-    } catch (error) {
-      console.error('Failed to load SBOM:', error)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const getAllComponents = (): Component[] => {
-    const infraComponents = INFRASTRUCTURE_COMPONENTS.map(c => ({
-      ...c,
-      category: c.category || 'infrastructure'
-    }))
-
-    const securityToolsComponents = SECURITY_TOOLS.map(c => ({
-      ...c,
-      category: c.category || 'security-tool'
-    }))
-
-    const pythonComponents = PYTHON_PACKAGES.map(c => ({
-      ...c,
-      category: 'python'
-    }))
-
-    const goComponents = GO_MODULES.map(c => ({
-      ...c,
-      category: 'go'
-    }))
-
-    const nodeComponents = NODE_PACKAGES.map(c => ({
-      ...c,
-      category: 'nodejs'
-    }))
-
-    const unityComponents = UNITY_PACKAGES.map(c => ({
-      ...c,
-      category: 'unity'
-    }))
-
-    const csharpComponents = CSHARP_PACKAGES.map(c => ({
-      ...c,
-      category: 'csharp'
-    }))
-
-    // Add dynamic SBOM data from backend if available
-    const dynamicPython = (sbomData?.components || []).map(c => ({
-      ...c,
-      category: 'python'
-    }))
-
-    return [...infraComponents, ...securityToolsComponents, ...pythonComponents, ...goComponents, ...nodeComponents, ...unityComponents, ...csharpComponents, ...dynamicPython]
-  }
-
-  const getFilteredComponents = () => {
-    let components = getAllComponents()
-
-    if (activeCategory !== 'all') {
-      if (activeCategory === 'infrastructure') {
-        components = INFRASTRUCTURE_COMPONENTS
-      } else if (activeCategory === 'security-tools') {
-        components = SECURITY_TOOLS
-      } else if (activeCategory === 'python') {
-        components = [...PYTHON_PACKAGES, ...(sbomData?.components || [])]
-      } else if (activeCategory === 'go') {
-        components = GO_MODULES
-      } else if (activeCategory === 'nodejs') {
-        components = NODE_PACKAGES
-      } else if (activeCategory === 'unity') {
-        components = UNITY_PACKAGES
-      } else if (activeCategory === 'csharp') {
-        components = CSHARP_PACKAGES
-      }
-    }
-
-    if (searchTerm) {
-      components = components.filter(c =>
-        c.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        c.version.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        (c.description?.toLowerCase().includes(searchTerm.toLowerCase()))
-      )
-    }
-
-    return components
-  }
-
-  const getCategoryColor = (category?: string) => {
-    switch (category) {
-      case 'database': return 'bg-blue-100 text-blue-800'
-      case 'security': return 'bg-purple-100 text-purple-800'
-      case 'security-tool': return 'bg-red-100 text-red-800'
-      case 'application': return 'bg-green-100 text-green-800'
-      case 'communication': return 'bg-yellow-100 text-yellow-800'
-      case 'storage': return 'bg-orange-100 text-orange-800'
-      case 'search': return 'bg-pink-100 text-pink-800'
-      case 'cache': return 'bg-cyan-100 text-cyan-800'
-      case 'development': return 'bg-gray-100 text-gray-800'
-      case 'cicd': return 'bg-orange-100 text-orange-800'
-      case 'python': return 'bg-emerald-100 text-emerald-800'
-      case 'go': return 'bg-sky-100 text-sky-800'
-      case 'nodejs': return 'bg-lime-100 text-lime-800'
-      case 'unity': return 'bg-amber-100 text-amber-800'
-      case 'csharp': return 'bg-fuchsia-100 text-fuchsia-800'
-      case 'game': return 'bg-rose-100 text-rose-800'
-      case 'voice': return 'bg-teal-100 text-teal-800'
-      case 'qa': return 'bg-blue-100 text-blue-800'
-      default: return 'bg-slate-100 text-slate-800'
-    }
-  }
-
-  const getLicenseColor = (license?: string) => {
-    if (!license) return 'bg-gray-100 text-gray-600'
-    if (license.includes('MIT')) return 'bg-green-100 text-green-700'
-    if (license.includes('Apache')) return 'bg-blue-100 text-blue-700'
-    if (license.includes('BSD')) return 'bg-cyan-100 text-cyan-700'
-    if (license.includes('GPL') || license.includes('LGPL')) return 'bg-orange-100 text-orange-700'
-    return 'bg-gray-100 text-gray-600'
-  }
-
-  const stats = {
-    totalInfra: INFRASTRUCTURE_COMPONENTS.length,
-    totalSecurityTools: SECURITY_TOOLS.length,
-    totalPython: PYTHON_PACKAGES.length + (sbomData?.components?.length || 0),
-    totalGo: GO_MODULES.length,
-    totalNode: NODE_PACKAGES.length,
-    totalUnity: UNITY_PACKAGES.length,
-    totalCsharp: CSHARP_PACKAGES.length,
-    totalAll: INFRASTRUCTURE_COMPONENTS.length + SECURITY_TOOLS.length + PYTHON_PACKAGES.length + GO_MODULES.length + NODE_PACKAGES.length + UNITY_PACKAGES.length + CSHARP_PACKAGES.length + (sbomData?.components?.length || 0),
-    databases: INFRASTRUCTURE_COMPONENTS.filter(c => c.category === 'database').length,
-    services: INFRASTRUCTURE_COMPONENTS.filter(c => c.category === 'application').length,
-    communication: INFRASTRUCTURE_COMPONENTS.filter(c => c.category === 'communication').length,
-    game: INFRASTRUCTURE_COMPONENTS.filter(c => c.category === 'game').length,
-  }
-
-  const categories = [
-    { id: 'all', name: 'Alle', count: stats.totalAll },
-    { id: 'infrastructure', name: 'Infrastruktur', count: stats.totalInfra },
-    { id: 'security-tools', name: 'Security Tools', count: stats.totalSecurityTools },
-    { id: 'python', name: 'Python', count: stats.totalPython },
-    { id: 'go', name: 'Go', count: stats.totalGo },
-    { id: 'nodejs', name: 'Node.js', count: stats.totalNode },
-    { id: 'unity', name: 'Unity', count: stats.totalUnity },
-    { id: 'csharp', name: 'C#', count: stats.totalCsharp },
-  ]
-
-  const filteredComponents = getFilteredComponents()
+  const {
+    sbomData,
+    loading,
+    activeCategory,
+    setActiveCategory,
+    searchTerm,
+    setSearchTerm,
+    activeInfoTab,
+    setActiveInfoTab,
+    showFullDocs,
+    setShowFullDocs,
+    filteredComponents,
+    stats,
+    categories,
+    handleExport,
+  } = useSbomData()
 
   return (
     <div>
@@ -398,7 +63,6 @@ export default function SBOMPage() {
         defaultCollapsed={true}
       />
 
-      {/* DevOps Pipeline Sidebar */}
       <DevOpsPipelineSidebarResponsive currentTool="sbom" />
 
       {/* Wizard Link */}
@@ -414,467 +78,28 @@ export default function SBOMPage() {
         </Link>
       </div>
 
-      {/* Stats Cards */}
-      <div className="grid grid-cols-2 md:grid-cols-5 lg:grid-cols-10 gap-4 mb-6">
-        <div className="bg-white rounded-lg shadow p-4">
-          <div className="text-3xl font-bold text-slate-800">{stats.totalAll}</div>
-          <div className="text-sm text-slate-500">Komponenten Total</div>
-        </div>
-        <div className="bg-white rounded-lg shadow p-4">
-          <div className="text-3xl font-bold text-purple-600">{stats.totalInfra}</div>
-          <div className="text-sm text-slate-500">Docker Services</div>
-        </div>
-        <div className="bg-white rounded-lg shadow p-4">
-          <div className="text-3xl font-bold text-red-600">{stats.totalSecurityTools}</div>
-          <div className="text-sm text-slate-500">Security Tools</div>
-        </div>
-        <div className="bg-white rounded-lg shadow p-4">
-          <div className="text-3xl font-bold text-emerald-600">{stats.totalPython}</div>
-          <div className="text-sm text-slate-500">Python</div>
-        </div>
-        <div className="bg-white rounded-lg shadow p-4">
-          <div className="text-3xl font-bold text-sky-600">{stats.totalGo}</div>
-          <div className="text-sm text-slate-500">Go</div>
-        </div>
-        <div className="bg-white rounded-lg shadow p-4">
-          <div className="text-3xl font-bold text-lime-600">{stats.totalNode}</div>
-          <div className="text-sm text-slate-500">Node.js</div>
-        </div>
-        <div className="bg-white rounded-lg shadow p-4">
-          <div className="text-3xl font-bold text-amber-600">{stats.totalUnity}</div>
-          <div className="text-sm text-slate-500">Unity</div>
-        </div>
-        <div className="bg-white rounded-lg shadow p-4">
-          <div className="text-3xl font-bold text-fuchsia-600">{stats.totalCsharp}</div>
-          <div className="text-sm text-slate-500">C#</div>
-        </div>
-        <div className="bg-white rounded-lg shadow p-4">
-          <div className="text-3xl font-bold text-blue-600">{stats.databases}</div>
-          <div className="text-sm text-slate-500">Datenbanken</div>
-        </div>
-        <div className="bg-white rounded-lg shadow p-4">
-          <div className="text-3xl font-bold text-rose-600">{stats.game}</div>
-          <div className="text-sm text-slate-500">Game</div>
-        </div>
-      </div>
+      <StatsCards stats={stats} />
 
-      {/* Filters */}
-      <div className="bg-white rounded-lg shadow p-4 mb-6">
-        <div className="flex flex-col md:flex-row gap-4 items-center justify-between">
-          {/* Category Tabs */}
-          <div className="flex flex-wrap gap-2">
-            {categories.map((cat) => (
-              <button
-                key={cat.id}
-                onClick={() => setActiveCategory(cat.id as CategoryType)}
-                className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
-                  activeCategory === cat.id
-                    ? 'bg-orange-600 text-white'
-                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-                }`}
-              >
-                {cat.name} ({cat.count})
-              </button>
-            ))}
-          </div>
+      <CategoryFilter
+        categories={categories}
+        activeCategory={activeCategory}
+        setActiveCategory={setActiveCategory}
+        searchTerm={searchTerm}
+        setSearchTerm={setSearchTerm}
+      />
 
-          {/* Search */}
-          <div className="relative w-full md:w-64">
-            <input
-              type="text"
-              placeholder="Suchen..."
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent"
-            />
-            <svg className="absolute left-3 top-2.5 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-            </svg>
-          </div>
-        </div>
-      </div>
+      {sbomData && <SbomMetadata sbomData={sbomData} />}
 
-      {/* SBOM Metadata */}
-      {sbomData?.metadata && (
-        <div className="bg-slate-50 rounded-lg p-4 mb-6 text-sm">
-          <div className="flex flex-wrap gap-6">
-            <div>
-              <span className="text-slate-500">Format:</span>
-              <span className="ml-2 font-medium">{sbomData.bomFormat} {sbomData.specVersion}</span>
-            </div>
-            <div>
-              <span className="text-slate-500">Generiert:</span>
-              <span className="ml-2 font-medium">
-                {sbomData.metadata.timestamp ? new Date(sbomData.metadata.timestamp).toLocaleString('de-DE') : '-'}
-              </span>
-            </div>
-            <div>
-              <span className="text-slate-500">Anwendung:</span>
-              <span className="ml-2 font-medium">
-                {sbomData.metadata.component?.name} v{sbomData.metadata.component?.version}
-              </span>
-            </div>
-          </div>
-        </div>
-      )}
+      <ComponentsTable components={filteredComponents} loading={loading} />
 
-      {/* Components Table */}
-      {loading ? (
-        <div className="flex items-center justify-center py-12">
-          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-orange-600"></div>
-          <span className="ml-3 text-gray-600">Lade SBOM...</span>
-        </div>
-      ) : (
-        <div className="bg-white rounded-lg shadow overflow-hidden">
-          <table className="min-w-full divide-y divide-gray-200">
-            <thead className="bg-gray-50">
-              <tr>
-                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Komponente</th>
-                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Version</th>
-                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Kategorie</th>
-                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider min-w-[300px]">Verwendungszweck</th>
-                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Port</th>
-                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Lizenz</th>
-                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Source</th>
-              </tr>
-            </thead>
-            <tbody className="bg-white divide-y divide-gray-200">
-              {filteredComponents.map((component, idx) => {
-                // Get license from either the new license field or the old licenses array
-                const licenseId = component.license || component.licenses?.[0]?.license?.id
+      <ExportButton onExport={handleExport} />
 
-                return (
-                  <tr key={idx} className="hover:bg-gray-50">
-                    <td className="px-4 py-4">
-                      <div className="text-sm font-medium text-gray-900">{component.name}</div>
-                    </td>
-                    <td className="px-4 py-4 whitespace-nowrap">
-                      <span className="text-sm font-mono text-gray-900">{component.version}</span>
-                    </td>
-                    <td className="px-4 py-4 whitespace-nowrap">
-                      <span className={`px-2 py-1 text-xs font-medium rounded ${getCategoryColor(component.category)}`}>
-                        {component.category || component.type}
-                      </span>
-                    </td>
-                    <td className="px-4 py-4">
-                      {component.description ? (
-                        <div className="text-sm text-gray-600 leading-relaxed">{component.description}</div>
-                      ) : (
-                        <span className="text-sm text-gray-400 italic">Keine Beschreibung</span>
-                      )}
-                    </td>
-                    <td className="px-4 py-4 whitespace-nowrap">
-                      {component.port ? (
-                        <span className="text-sm font-mono text-gray-600">{component.port}</span>
-                      ) : (
-                        <span className="text-sm text-gray-400">-</span>
-                      )}
-                    </td>
-                    <td className="px-4 py-4 whitespace-nowrap">
-                      {licenseId ? (
-                        <span className={`px-2 py-1 text-xs font-medium rounded ${getLicenseColor(licenseId)}`}>
-                          {licenseId}
-                        </span>
-                      ) : (
-                        <span className="text-sm text-gray-400">-</span>
-                      )}
-                    </td>
-                    <td className="px-4 py-4 whitespace-nowrap">
-                      {component.sourceUrl && component.sourceUrl !== '-' ? (
-                        <a
-                          href={component.sourceUrl}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className="text-orange-600 hover:text-orange-800 text-sm flex items-center gap-1"
-                        >
-                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
-                          </svg>
-                          GitHub
-                        </a>
-                      ) : (
-                        <span className="text-sm text-gray-400">-</span>
-                      )}
-                    </td>
-                  </tr>
-                )
-              })}
-            </tbody>
-          </table>
-
-          {filteredComponents.length === 0 && (
-            <div className="p-8 text-center text-gray-500">
-              Keine Komponenten gefunden.
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* Export Button */}
-      <div className="mt-6 flex justify-end">
-        <button
-          onClick={() => {
-            const data = JSON.stringify({
-              ...sbomData,
-              infrastructure: INFRASTRUCTURE_COMPONENTS
-            }, null, 2)
-            const blob = new Blob([data], { type: 'application/json' })
-            const url = URL.createObjectURL(blob)
-            const a = document.createElement('a')
-            a.href = url
-            a.download = `breakpilot-lehrer-sbom-${new Date().toISOString().split('T')[0]}.json`
-            a.click()
-          }}
-          className="px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-700 transition-colors 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
-          </svg>
-          SBOM exportieren (JSON)
-        </button>
-      </div>
-
-      {/* Info Tabs Section */}
-      <div className="mt-8">
-        <div className="bg-white rounded-lg shadow">
-          {/* Tab Headers */}
-          <div className="border-b border-gray-200">
-            <nav className="flex -mb-px">
-              <button
-                onClick={() => setActiveInfoTab('audit')}
-                className={`px-6 py-4 text-sm font-medium border-b-2 transition-colors ${
-                  activeInfoTab === 'audit'
-                    ? 'border-orange-500 text-orange-600'
-                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
-                }`}
-              >
-                <span className="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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-                  </svg>
-                  Audit
-                </span>
-              </button>
-              <button
-                onClick={() => setActiveInfoTab('documentation')}
-                className={`px-6 py-4 text-sm font-medium border-b-2 transition-colors ${
-                  activeInfoTab === 'documentation'
-                    ? 'border-orange-500 text-orange-600'
-                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
-                }`}
-              >
-                <span className="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="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>
-                  Dokumentation
-                </span>
-              </button>
-            </nav>
-          </div>
-
-          {/* Tab Content */}
-          <div className="p-6">
-            {/* Audit Tab */}
-            {activeInfoTab === 'audit' && (
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                {/* SBOM Status */}
-                <div className="bg-slate-50 rounded-lg p-4">
-                  <h3 className="text-lg font-semibold text-slate-800 mb-4 flex items-center gap-2">
-                    <svg className="w-5 h-5 text-blue-500" 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>
-                    SBOM Status
-                  </h3>
-                  <div className="space-y-3">
-                    <div className="flex items-center justify-between">
-                      <span className="text-sm text-slate-600">Letzte Generierung</span>
-                      <span className="flex items-center gap-2">
-                        <span className="w-2 h-2 rounded-full bg-green-500"></span>
-                        <span className="text-sm font-medium">CI/CD</span>
-                      </span>
-                    </div>
-                    <div className="flex items-center justify-between">
-                      <span className="text-sm text-slate-600">Format</span>
-                      <span className="flex items-center gap-2">
-                        <span className="w-2 h-2 rounded-full bg-green-500"></span>
-                        <span className="text-sm font-medium">CycloneDX 1.5</span>
-                      </span>
-                    </div>
-                    <div className="flex items-center justify-between">
-                      <span className="text-sm text-slate-600">Komponenten</span>
-                      <span className="flex items-center gap-2">
-                        <span className="w-2 h-2 rounded-full bg-green-500"></span>
-                        <span className="text-sm font-medium">Alle erfasst</span>
-                      </span>
-                    </div>
-                    <div className="flex items-center justify-between">
-                      <span className="text-sm text-slate-600">Transitive Deps</span>
-                      <span className="flex items-center gap-2">
-                        <span className="w-2 h-2 rounded-full bg-green-500"></span>
-                        <span className="text-sm font-medium">Inkludiert</span>
-                      </span>
-                    </div>
-                  </div>
-                </div>
-
-                {/* License Compliance */}
-                <div className="bg-slate-50 rounded-lg p-4">
-                  <h3 className="text-lg font-semibold text-slate-800 mb-4 flex items-center gap-2">
-                    <svg className="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" />
-                    </svg>
-                    License Compliance
-                  </h3>
-                  <div className="space-y-3">
-                    <div className="flex items-center justify-between">
-                      <span className="text-sm text-slate-600">Erlaubte Lizenzen</span>
-                      <span className="flex items-center gap-2">
-                        <span className="w-2 h-2 rounded-full bg-green-500"></span>
-                        <span className="text-sm font-medium">MIT, Apache, BSD</span>
-                      </span>
-                    </div>
-                    <div className="flex items-center justify-between">
-                      <span className="text-sm text-slate-600">Copyleft (GPL)</span>
-                      <span className="flex items-center gap-2">
-                        <span className="w-2 h-2 rounded-full bg-green-500"></span>
-                        <span className="text-sm font-medium">0</span>
-                      </span>
-                    </div>
-                    <div className="flex items-center justify-between">
-                      <span className="text-sm text-slate-600">Unbekannte Lizenzen</span>
-                      <span className="flex items-center gap-2">
-                        <span className="w-2 h-2 rounded-full bg-green-500"></span>
-                        <span className="text-sm font-medium">0</span>
-                      </span>
-                    </div>
-                    <div className="flex items-center justify-between">
-                      <span className="text-sm text-slate-600">Kommerzielle</span>
-                      <span className="flex items-center gap-2">
-                        <span className="w-2 h-2 rounded-full bg-yellow-500"></span>
-                        <span className="text-sm font-medium">Review erforderlich</span>
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            )}
-
-            {/* Documentation Tab */}
-            {activeInfoTab === 'documentation' && (
-              <div>
-                <div className="flex justify-between items-center mb-4">
-                  <h3 className="text-lg font-semibold text-slate-800">SBOM Dokumentation</h3>
-                  <button
-                    onClick={() => setShowFullDocs(!showFullDocs)}
-                    className="px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors flex items-center gap-2"
-                  >
-                    <svg className={`w-4 h-4 transition-transform ${showFullDocs ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-                    </svg>
-                    {showFullDocs ? 'Weniger anzeigen' : 'Vollstaendige Dokumentation'}
-                  </button>
-                </div>
-
-                {!showFullDocs ? (
-                  <div className="prose prose-slate max-w-none">
-                    <p className="text-slate-600">
-                      Das SBOM-Modul generiert und analysiert die vollstaendige Komponentenliste aller Software-Abhaengigkeiten.
-                      Es dient der Compliance, Sicherheit und Supply-Chain-Transparenz.
-                    </p>
-                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
-                      <div className="bg-blue-50 p-4 rounded-lg">
-                        <h4 className="font-medium text-blue-800 mb-2">Generator</h4>
-                        <p className="text-sm text-blue-600">Syft (Primary), Trivy (Validation)</p>
-                      </div>
-                      <div className="bg-purple-50 p-4 rounded-lg">
-                        <h4 className="font-medium text-purple-800 mb-2">Format</h4>
-                        <p className="text-sm text-purple-600">CycloneDX 1.5, SPDX</p>
-                      </div>
-                      <div className="bg-green-50 p-4 rounded-lg">
-                        <h4 className="font-medium text-green-800 mb-2">Retention</h4>
-                        <p className="text-sm text-green-600">5 Jahre (Compliance)</p>
-                      </div>
-                    </div>
-                  </div>
-                ) : (
-                  <div className="prose prose-slate max-w-none bg-slate-50 p-6 rounded-lg overflow-auto max-h-[600px]">
-                    <h2>Software Bill of Materials (SBOM)</h2>
-
-                    <h3>1. Uebersicht</h3>
-                    <p>Das SBOM-Modul generiert und analysiert die vollstaendige Komponentenliste aller Software-Abhaengigkeiten. Es dient der Compliance, Sicherheit und Supply-Chain-Transparenz.</p>
-
-                    <h3>2. SBOM-Generierung</h3>
-                    <pre className="bg-slate-800 text-slate-100 p-4 rounded-lg overflow-x-auto text-sm">
-{`Source Code
-     │
-     v
-┌───────────────────────────────────────────────────────────────┐
-│                     SBOM Generators                           │
-│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────┐   │
-│  │    Syft     │  │   Trivy     │  │  Native Tooling     │   │
-│  │  (Primary)  │  │ (Validation)│  │ (npm, go mod, pip)  │   │
-│  └──────┬──────┘  └──────┬──────┘  └──────────┬──────────┘   │
-└─────────┼────────────────┼────────────────────┼───────────────┘
-          │                │                    │
-          └────────────────┴────────────────────┘
-                           │
-                           v
-                  ┌────────────────┐
-                  │   CycloneDX    │
-                  │    Format      │
-                  └────────────────┘`}
-                    </pre>
-
-                    <h3>3. Erfasste Komponenten</h3>
-                    <table className="min-w-full">
-                      <thead>
-                        <tr>
-                          <th className="text-left">Typ</th>
-                          <th className="text-left">Quelle</th>
-                          <th className="text-left">Beispiele</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        <tr><td>npm packages</td><td>package-lock.json</td><td>react, next, tailwindcss</td></tr>
-                        <tr><td>Go modules</td><td>go.sum</td><td>gin, gorm, jwt-go</td></tr>
-                        <tr><td>Python packages</td><td>requirements.txt</td><td>fastapi, pydantic, httpx</td></tr>
-                        <tr><td>Container Images</td><td>Dockerfile</td><td>node:20-alpine, postgres:16</td></tr>
-                        <tr><td>OS Packages</td><td>apk, apt</td><td>openssl, libpq</td></tr>
-                      </tbody>
-                    </table>
-
-                    <h3>4. License Compliance</h3>
-                    <table className="min-w-full">
-                      <thead>
-                        <tr>
-                          <th className="text-left">Kategorie</th>
-                          <th className="text-left">Lizenzen</th>
-                          <th className="text-left">Status</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        <tr><td>Permissive (erlaubt)</td><td>MIT, Apache 2.0, BSD, ISC</td><td className="text-green-600">OK</td></tr>
-                        <tr><td>Weak Copyleft</td><td>LGPL, MPL</td><td className="text-yellow-600">Review</td></tr>
-                        <tr><td>Strong Copyleft</td><td>GPL, AGPL</td><td className="text-red-600">Nicht erlaubt</td></tr>
-                        <tr><td>Proprietaer</td><td>Commercial</td><td className="text-yellow-600">Genehmigung</td></tr>
-                      </tbody>
-                    </table>
-
-                    <h3>5. Aufbewahrung & Compliance</h3>
-                    <ul>
-                      <li><strong>Retention:</strong> 5 Jahre (Compliance)</li>
-                      <li><strong>Format:</strong> JSON + PDF Report</li>
-                      <li><strong>Signierung:</strong> Digital signiert</li>
-                      <li><strong>Audit:</strong> Jederzeit abrufbar</li>
-                    </ul>
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
+      <InfoTabsSection
+        activeInfoTab={activeInfoTab}
+        setActiveInfoTab={setActiveInfoTab}
+        showFullDocs={showFullDocs}
+        setShowFullDocs={setShowFullDocs}
+      />
     </div>
   )
 }
diff --git a/admin-lehrer/app/(admin)/infrastructure/sbom/types.ts b/admin-lehrer/app/(admin)/infrastructure/sbom/types.ts
new file mode 100644
index 0000000..4dca401
--- /dev/null
+++ b/admin-lehrer/app/(admin)/infrastructure/sbom/types.ts
@@ -0,0 +1,49 @@
+export interface Component {
+  type: string
+  name: string
+  version: string
+  purl?: string
+  licenses?: { license: { id: string } }[]
+  category?: string
+  port?: string
+  description?: string
+  license?: string
+  sourceUrl?: string
+}
+
+export interface SBOMData {
+  bomFormat?: string
+  specVersion?: string
+  version?: number
+  metadata?: {
+    timestamp?: string
+    tools?: { vendor: string; name: string; version: string }[]
+    component?: { type: string; name: string; version: string }
+  }
+  components?: Component[]
+}
+
+export type CategoryType = 'all' | 'infrastructure' | 'security-tools' | 'python' | 'go' | 'nodejs' | 'unity' | 'csharp'
+
+export type InfoTabType = 'audit' | 'documentation'
+
+export interface SbomStats {
+  totalInfra: number
+  totalSecurityTools: number
+  totalPython: number
+  totalGo: number
+  totalNode: number
+  totalUnity: number
+  totalCsharp: number
+  totalAll: number
+  databases: number
+  services: number
+  communication: number
+  game: number
+}
+
+export interface CategoryItem {
+  id: string
+  name: string
+  count: number
+}
diff --git a/admin-lehrer/app/(admin)/infrastructure/sbom/useSbomData.ts b/admin-lehrer/app/(admin)/infrastructure/sbom/useSbomData.ts
new file mode 100644
index 0000000..9964ce6
--- /dev/null
+++ b/admin-lehrer/app/(admin)/infrastructure/sbom/useSbomData.ts
@@ -0,0 +1,150 @@
+'use client'
+
+import { useState, useEffect, useMemo } from 'react'
+import type { SBOMData, CategoryType, InfoTabType, SbomStats, CategoryItem, Component } from './types'
+import {
+  INFRASTRUCTURE_COMPONENTS,
+  SECURITY_TOOLS,
+  PYTHON_PACKAGES,
+  GO_MODULES,
+  NODE_PACKAGES,
+  UNITY_PACKAGES,
+  CSHARP_PACKAGES,
+} from './data'
+
+export function useSbomData() {
+  const [sbomData, setSbomData] = useState<SBOMData | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [activeCategory, setActiveCategory] = useState<CategoryType>('all')
+  const [searchTerm, setSearchTerm] = useState('')
+  const [activeInfoTab, setActiveInfoTab] = useState<InfoTabType>('audit')
+  const [showFullDocs, setShowFullDocs] = useState(false)
+
+  useEffect(() => {
+    loadSBOM()
+  }, [])
+
+  const loadSBOM = async () => {
+    setLoading(true)
+    try {
+      const res = await fetch('/api/v1/security/sbom')
+      if (res.ok) {
+        const data = await res.json()
+        setSbomData(data)
+      }
+    } catch (error) {
+      console.error('Failed to load SBOM:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const getAllComponents = (): Component[] => {
+    const infraComponents = INFRASTRUCTURE_COMPONENTS.map(c => ({ ...c, category: c.category || 'infrastructure' }))
+    const securityToolsComponents = SECURITY_TOOLS.map(c => ({ ...c, category: c.category || 'security-tool' }))
+    const pythonComponents = PYTHON_PACKAGES.map(c => ({ ...c, category: 'python' as const }))
+    const goComponents = GO_MODULES.map(c => ({ ...c, category: 'go' as const }))
+    const nodeComponents = NODE_PACKAGES.map(c => ({ ...c, category: 'nodejs' as const }))
+    const unityComponents = UNITY_PACKAGES.map(c => ({ ...c, category: 'unity' as const }))
+    const csharpComponents = CSHARP_PACKAGES.map(c => ({ ...c, category: 'csharp' as const }))
+    const dynamicPython = (sbomData?.components || []).map(c => ({ ...c, category: 'python' as const }))
+
+    return [
+      ...infraComponents, ...securityToolsComponents, ...pythonComponents,
+      ...goComponents, ...nodeComponents, ...unityComponents,
+      ...csharpComponents, ...dynamicPython,
+    ]
+  }
+
+  const filteredComponents = useMemo(() => {
+    let components: Component[]
+
+    if (activeCategory === 'all') {
+      components = getAllComponents()
+    } else if (activeCategory === 'infrastructure') {
+      components = INFRASTRUCTURE_COMPONENTS
+    } else if (activeCategory === 'security-tools') {
+      components = SECURITY_TOOLS
+    } else if (activeCategory === 'python') {
+      components = [...PYTHON_PACKAGES, ...(sbomData?.components || [])]
+    } else if (activeCategory === 'go') {
+      components = GO_MODULES
+    } else if (activeCategory === 'nodejs') {
+      components = NODE_PACKAGES
+    } else if (activeCategory === 'unity') {
+      components = UNITY_PACKAGES
+    } else if (activeCategory === 'csharp') {
+      components = CSHARP_PACKAGES
+    } else {
+      components = getAllComponents()
+    }
+
+    if (searchTerm) {
+      const term = searchTerm.toLowerCase()
+      components = components.filter(c =>
+        c.name.toLowerCase().includes(term) ||
+        c.version.toLowerCase().includes(term) ||
+        (c.description?.toLowerCase().includes(term))
+      )
+    }
+
+    return components
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeCategory, searchTerm, sbomData])
+
+  const stats: SbomStats = useMemo(() => ({
+    totalInfra: INFRASTRUCTURE_COMPONENTS.length,
+    totalSecurityTools: SECURITY_TOOLS.length,
+    totalPython: PYTHON_PACKAGES.length + (sbomData?.components?.length || 0),
+    totalGo: GO_MODULES.length,
+    totalNode: NODE_PACKAGES.length,
+    totalUnity: UNITY_PACKAGES.length,
+    totalCsharp: CSHARP_PACKAGES.length,
+    totalAll: INFRASTRUCTURE_COMPONENTS.length + SECURITY_TOOLS.length + PYTHON_PACKAGES.length + GO_MODULES.length + NODE_PACKAGES.length + UNITY_PACKAGES.length + CSHARP_PACKAGES.length + (sbomData?.components?.length || 0),
+    databases: INFRASTRUCTURE_COMPONENTS.filter(c => c.category === 'database').length,
+    services: INFRASTRUCTURE_COMPONENTS.filter(c => c.category === 'application').length,
+    communication: INFRASTRUCTURE_COMPONENTS.filter(c => c.category === 'communication').length,
+    game: INFRASTRUCTURE_COMPONENTS.filter(c => c.category === 'game').length,
+  }), [sbomData])
+
+  const categories: CategoryItem[] = useMemo(() => [
+    { id: 'all', name: 'Alle', count: stats.totalAll },
+    { id: 'infrastructure', name: 'Infrastruktur', count: stats.totalInfra },
+    { id: 'security-tools', name: 'Security Tools', count: stats.totalSecurityTools },
+    { id: 'python', name: 'Python', count: stats.totalPython },
+    { id: 'go', name: 'Go', count: stats.totalGo },
+    { id: 'nodejs', name: 'Node.js', count: stats.totalNode },
+    { id: 'unity', name: 'Unity', count: stats.totalUnity },
+    { id: 'csharp', name: 'C#', count: stats.totalCsharp },
+  ], [stats])
+
+  const handleExport = () => {
+    const data = JSON.stringify({
+      ...sbomData,
+      infrastructure: INFRASTRUCTURE_COMPONENTS
+    }, null, 2)
+    const blob = new Blob([data], { type: 'application/json' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `breakpilot-lehrer-sbom-${new Date().toISOString().split('T')[0]}.json`
+    a.click()
+  }
+
+  return {
+    sbomData,
+    loading,
+    activeCategory,
+    setActiveCategory,
+    searchTerm,
+    setSearchTerm,
+    activeInfoTab,
+    setActiveInfoTab,
+    showFullDocs,
+    setShowFullDocs,
+    filteredComponents,
+    stats,
+    categories,
+    handleExport,
+  }
+}
diff --git a/admin-lehrer/app/(admin)/infrastructure/security/_components/DocumentationSection.tsx b/admin-lehrer/app/(admin)/infrastructure/security/_components/DocumentationSection.tsx
new file mode 100644
index 0000000..2053130
--- /dev/null
+++ b/admin-lehrer/app/(admin)/infrastructure/security/_components/DocumentationSection.tsx
@@ -0,0 +1,244 @@
+'use client'
+
+interface DocumentationSectionProps {
+  showFullDocs: boolean
+  setShowFullDocs: (show: boolean) => void
+}
+
+export function DocumentationSection({ showFullDocs, setShowFullDocs }: DocumentationSectionProps) {
+  return (
+    <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
+      <div className="p-6">
+        <div className="flex justify-between items-center mb-4">
+          <h3 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
+            <svg className="w-5 h-5 text-slate-600" 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>
+            Security Dokumentation
+          </h3>
+          <button
+            onClick={() => setShowFullDocs(!showFullDocs)}
+            className="px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors flex items-center gap-2 text-sm font-medium"
+          >
+            <svg className={`w-4 h-4 transition-transform ${showFullDocs ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+            </svg>
+            {showFullDocs ? 'Weniger anzeigen' : 'Vollstaendige Dokumentation'}
+          </button>
+        </div>
+
+        {/* Short Description */}
+        <div className="prose prose-slate max-w-none">
+          <p className="text-slate-600">
+            Das Security Dashboard bietet einen zentralen Ueberblick ueber alle DevSecOps-Aktivitaeten.
+            Es integriert 6 Security-Tools fuer umfassende Code- und Infrastruktur-Sicherheit:
+            Secrets Detection, Static Analysis (SAST), Dependency Scanning und SBOM-Generierung.
+          </p>
+        </div>
+
+        {/* Tool Quick Reference */}
+        <ToolQuickReference />
+
+        {/* Full Documentation (Expandable) */}
+        {showFullDocs && <FullDocumentation />}
+      </div>
+    </div>
+  )
+}
+
+function ToolQuickReference() {
+  const tools = [
+    { bg: 'bg-red-50', icon: '🔑', name: 'Gitleaks', cat: 'Secrets', textName: 'text-red-800', textCat: 'text-red-600' },
+    { bg: 'bg-blue-50', icon: '🔍', name: 'Semgrep', cat: 'SAST', textName: 'text-blue-800', textCat: 'text-blue-600' },
+    { bg: 'bg-yellow-50', icon: '🐍', name: 'Bandit', cat: 'Python', textName: 'text-yellow-800', textCat: 'text-yellow-600' },
+    { bg: 'bg-purple-50', icon: '🔒', name: 'Trivy', cat: 'Container', textName: 'text-purple-800', textCat: 'text-purple-600' },
+    { bg: 'bg-green-50', icon: '🐛', name: 'Grype', cat: 'Dependencies', textName: 'text-green-800', textCat: 'text-green-600' },
+    { bg: 'bg-orange-50', icon: '📦', name: 'Syft', cat: 'SBOM', textName: 'text-orange-800', textCat: 'text-orange-600' },
+  ]
+
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 mt-4">
+      {tools.map(t => (
+        <div key={t.name} className={`${t.bg} p-3 rounded-lg text-center`}>
+          <span className="text-lg">{t.icon}</span>
+          <p className={`text-xs font-medium ${t.textName} mt-1`}>{t.name}</p>
+          <p className={`text-xs ${t.textCat}`}>{t.cat}</p>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function FullDocumentation() {
+  return (
+    <div className="mt-6 bg-slate-50 rounded-lg p-6 border border-slate-200">
+      <div className="prose prose-slate max-w-none prose-headings:text-slate-900 prose-p:text-slate-600 prose-li:text-slate-600">
+
+        <h3>1. Security Tools Uebersicht</h3>
+
+        <h4>🔑 Gitleaks - Secrets Detection</h4>
+        <p>Durchsucht die gesamte Git-Historie nach versehentlich eingecheckten Secrets wie API-Keys, Passwoertern und Tokens.</p>
+        <ul>
+          <li><strong>Scan-Bereich:</strong> Git-Historie, Commits, Branches</li>
+          <li><strong>Erkannte Secrets:</strong> AWS Keys, GitHub Tokens, Private Keys, Passwoerter</li>
+          <li><strong>Ausgabe:</strong> JSON-Report mit Fundstelle, Commit-Hash, Autor</li>
+        </ul>
+
+        <h4>🔍 Semgrep - Static Application Security Testing</h4>
+        <p>Fuehrt regelbasierte statische Code-Analyse durch, um Sicherheitsluecken und Anti-Patterns zu finden.</p>
+        <ul>
+          <li><strong>Unterstuetzte Sprachen:</strong> Python, JavaScript, TypeScript, Go, Java</li>
+          <li><strong>Regelsets:</strong> OWASP Top 10, CWE, Security Best Practices</li>
+          <li><strong>Findings:</strong> SQL Injection, XSS, Path Traversal, Insecure Deserialization</li>
+        </ul>
+
+        <h4>🐍 Bandit - Python Security Linter</h4>
+        <p>Spezialisierter Security-Linter fuer Python-Code mit Fokus auf haeufige Sicherheitsprobleme.</p>
+        <ul>
+          <li><strong>Checks:</strong> Hardcoded Passwords, SQL Injection, Shell Injection</li>
+          <li><strong>Severity Levels:</strong> LOW, MEDIUM, HIGH</li>
+          <li><strong>Confidence:</strong> LOW, MEDIUM, HIGH</li>
+        </ul>
+
+        <h4>🔒 Trivy - Container & Filesystem Scanner</h4>
+        <p>Scannt Container-Images und Dateisysteme auf bekannte Schwachstellen (CVEs).</p>
+        <ul>
+          <li><strong>Scan-Typen:</strong> Container Images, Filesystems, Git Repositories</li>
+          <li><strong>Datenbanken:</strong> NVD, GitHub Advisory, Alpine SecDB, RedHat OVAL</li>
+          <li><strong>Ausgabe:</strong> CVE-ID, Severity, Fixed Version, Description</li>
+        </ul>
+
+        <h4>🐛 Grype - Dependency Vulnerability Scanner</h4>
+        <p>Analysiert Software-Abhaengigkeiten auf bekannte Sicherheitsluecken.</p>
+        <ul>
+          <li><strong>Package Manager:</strong> npm, pip, go mod, Maven, Gradle</li>
+          <li><strong>Input:</strong> SBOM (CycloneDX/SPDX), Lockfiles, Container Images</li>
+          <li><strong>Matching:</strong> CPE-basiert, Package URL (purl)</li>
+        </ul>
+
+        <h4>📦 Syft - SBOM Generator</h4>
+        <p>Erstellt Software Bill of Materials (SBOM) fuer Compliance und Supply-Chain-Security.</p>
+        <ul>
+          <li><strong>Formate:</strong> CycloneDX (JSON/XML), SPDX, Syft JSON</li>
+          <li><strong>Erfassung:</strong> Packages, Lizenzen, Versionen, Checksums</li>
+          <li><strong>Compliance:</strong> NIS2, ISO 27001, DSGVO Art. 32</li>
+        </ul>
+
+        <h3>2. Severity-Klassifizierung</h3>
+        <table className="min-w-full text-sm">
+          <thead>
+            <tr className="border-b">
+              <th className="text-left py-2">Severity</th>
+              <th className="text-left py-2">CVSS Score</th>
+              <th className="text-left py-2">Reaktionszeit</th>
+              <th className="text-left py-2">Beispiele</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr className="border-b"><td className="py-2"><span className="px-2 py-0.5 bg-red-100 text-red-800 rounded text-xs font-semibold">CRITICAL</span></td><td>9.0 - 10.0</td><td>Sofort (24h)</td><td>RCE, Auth Bypass, Exposed Secrets</td></tr>
+            <tr className="border-b"><td className="py-2"><span className="px-2 py-0.5 bg-orange-100 text-orange-800 rounded text-xs font-semibold">HIGH</span></td><td>7.0 - 8.9</td><td>1-3 Tage</td><td>SQL Injection, XSS, Path Traversal</td></tr>
+            <tr className="border-b"><td className="py-2"><span className="px-2 py-0.5 bg-yellow-100 text-yellow-800 rounded text-xs font-semibold">MEDIUM</span></td><td>4.0 - 6.9</td><td>1-2 Wochen</td><td>Information Disclosure, CSRF</td></tr>
+            <tr className="border-b"><td className="py-2"><span className="px-2 py-0.5 bg-green-100 text-green-800 rounded text-xs font-semibold">LOW</span></td><td>0.1 - 3.9</td><td>Naechster Sprint</td><td>Minor Info Leak, Best Practice</td></tr>
+            <tr><td className="py-2"><span className="px-2 py-0.5 bg-blue-100 text-blue-800 rounded text-xs font-semibold">INFO</span></td><td>0.0</td><td>Optional</td><td>Empfehlungen, Hinweise</td></tr>
+          </tbody>
+        </table>
+
+        <h3>3. Scan-Workflow</h3>
+        <pre className="bg-slate-800 text-slate-100 p-4 rounded-lg overflow-x-auto text-sm">
+{`┌─────────────────────────────────────────────────────────────┐
+│                    Security Scan Pipeline                    │
+├─────────────────────────────────────────────────────────────┤
+│                                                              │
+│  1. Secrets Detection (Gitleaks)                            │
+│     └── Scannt Git-Historie nach API-Keys & Credentials     │
+│                          ↓                                   │
+│  2. Static Analysis (Semgrep + Bandit)                      │
+│     └── Code-Analyse auf Sicherheitsluecken                 │
+│                          ↓                                   │
+│  3. Dependency Scan (Trivy + Grype)                         │
+│     └── CVE-Check aller Abhaengigkeiten                     │
+│                          ↓                                   │
+│  4. SBOM Generation (Syft)                                  │
+│     └── Software Bill of Materials erstellen                │
+│                          ↓                                   │
+│  5. Report & Dashboard                                       │
+│     └── Ergebnisse aggregieren und visualisieren            │
+│                                                              │
+└─────────────────────────────────────────────────────────────┘`}
+        </pre>
+
+        <h3>4. Remediation-Strategien</h3>
+
+        <h4>Bei Secrets-Findings:</h4>
+        <ol>
+          <li>Secret sofort rotieren (neue API-Keys, Passwoerter)</li>
+          <li>Git-Historie bereinigen (BFG Repo-Cleaner oder git filter-branch)</li>
+          <li>Betroffene Systeme auf unauthorisierte Zugriffe pruefen</li>
+          <li>Secret-Scanning in Pre-Commit-Hooks aktivieren</li>
+        </ol>
+
+        <h4>Bei SAST-Findings:</h4>
+        <ol>
+          <li>Finding-Details und betroffene Code-Stelle analysieren</li>
+          <li>Empfohlene Fix-Strategie aus Semgrep-Dokumentation anwenden</li>
+          <li>Unit-Tests fuer den Fix schreiben</li>
+          <li>Code-Review durch Security-erfahrenen Entwickler</li>
+        </ol>
+
+        <h4>Bei Dependency-Vulnerabilities:</h4>
+        <ol>
+          <li>Pruefen ob ein Patch/Update verfuegbar ist</li>
+          <li>Abhaengigkeit auf gepatchte Version aktualisieren</li>
+          <li>Falls kein Patch: Workaround oder Alternative evaluieren</li>
+          <li>Temporaer: WAF-Regel als Mitigation</li>
+        </ol>
+
+        <h3>5. CI/CD Integration</h3>
+        <p>Security-Scans sind in die Gitea Actions Pipeline integriert:</p>
+        <ul>
+          <li><strong>Pre-Commit:</strong> Gitleaks (lokale Secrets-Pruefung)</li>
+          <li><strong>Pull Request:</strong> Semgrep, Bandit, Trivy (Blocking bei Critical)</li>
+          <li><strong>Main Branch:</strong> Full Scan + SBOM-Update</li>
+          <li><strong>Nightly:</strong> Dependency-Update-Check</li>
+        </ul>
+
+        <h3>6. Compliance-Mapping</h3>
+        <table className="min-w-full text-sm">
+          <thead>
+            <tr className="border-b">
+              <th className="text-left py-2">Regulation</th>
+              <th className="text-left py-2">Artikel</th>
+              <th className="text-left py-2">Erfuellt durch</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr className="border-b"><td className="py-2">DSGVO</td><td>Art. 32</td><td>Alle Security-Scans, Vulnerability Management</td></tr>
+            <tr className="border-b"><td className="py-2">NIS2</td><td>Art. 21</td><td>SBOM, Supply-Chain-Security, Incident Response</td></tr>
+            <tr className="border-b"><td className="py-2">ISO 27001</td><td>A.12.6</td><td>Vulnerability Management, Patch Management</td></tr>
+            <tr><td className="py-2">OWASP</td><td>Top 10</td><td>SAST (Semgrep), Secrets Detection</td></tr>
+          </tbody>
+        </table>
+
+        <h3>7. API-Endpunkte</h3>
+        <table className="min-w-full text-sm font-mono">
+          <thead>
+            <tr className="border-b">
+              <th className="text-left py-2">Methode</th>
+              <th className="text-left py-2">Endpoint</th>
+              <th className="text-left py-2 font-sans">Beschreibung</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr className="border-b"><td className="py-2"><span className="bg-blue-100 text-blue-700 px-1 rounded">GET</span></td><td>/api/v1/security/tools</td><td className="font-sans">Tool-Status abrufen</td></tr>
+            <tr className="border-b"><td className="py-2"><span className="bg-blue-100 text-blue-700 px-1 rounded">GET</span></td><td>/api/v1/security/findings</td><td className="font-sans">Alle Findings abrufen</td></tr>
+            <tr className="border-b"><td className="py-2"><span className="bg-blue-100 text-blue-700 px-1 rounded">GET</span></td><td>/api/v1/security/summary</td><td className="font-sans">Severity-Zusammenfassung</td></tr>
+            <tr className="border-b"><td className="py-2"><span className="bg-blue-100 text-blue-700 px-1 rounded">GET</span></td><td>/api/v1/security/history</td><td className="font-sans">Scan-Historie</td></tr>
+            <tr className="border-b"><td className="py-2"><span className="bg-green-100 text-green-700 px-1 rounded">POST</span></td><td>/api/v1/security/scan/all</td><td className="font-sans">Full Scan starten</td></tr>
+            <tr><td className="py-2"><span className="bg-green-100 text-green-700 px-1 rounded">POST</span></td><td>/api/v1/security/scan/[tool]</td><td className="font-sans">Einzelnes Tool scannen</td></tr>
+          </tbody>
+        </table>
+
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/infrastructure/security/_components/FindingsTab.tsx b/admin-lehrer/app/(admin)/infrastructure/security/_components/FindingsTab.tsx
new file mode 100644
index 0000000..3db93f6
--- /dev/null
+++ b/admin-lehrer/app/(admin)/infrastructure/security/_components/FindingsTab.tsx
@@ -0,0 +1,100 @@
+'use client'
+
+import type { Finding } from '../types'
+import { getSeverityBadge } from '../useSecurityDashboard'
+
+interface FindingsTabProps {
+  filteredFindings: Finding[]
+  severityFilter: string | null
+  setSeverityFilter: (filter: string | null) => void
+  toolFilter: string | null
+  setToolFilter: (filter: string | null) => void
+}
+
+const SEVERITY_OPTIONS = ['CRITICAL', 'HIGH', 'MEDIUM', 'LOW', 'INFO']
+const TOOL_OPTIONS = ['gitleaks', 'semgrep', 'bandit', 'trivy', 'grype']
+
+export function FindingsTab({
+  filteredFindings,
+  severityFilter,
+  setSeverityFilter,
+  toolFilter,
+  setToolFilter,
+}: FindingsTabProps) {
+  return (
+    <div>
+      {/* Filters */}
+      <div className="flex gap-2 mb-4 flex-wrap">
+        <button
+          onClick={() => setSeverityFilter(null)}
+          className={`px-3 py-1 rounded-full text-sm ${!severityFilter ? 'bg-orange-600 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'}`}
+        >
+          Alle
+        </button>
+        {SEVERITY_OPTIONS.map(sev => (
+          <button
+            key={sev}
+            onClick={() => setSeverityFilter(sev)}
+            className={`px-3 py-1 rounded-full text-sm ${severityFilter === sev ? 'bg-orange-600 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'}`}
+          >
+            {sev}
+          </button>
+        ))}
+        <span className="mx-2 border-l border-slate-300" />
+        {TOOL_OPTIONS.map(t => (
+          <button
+            key={t}
+            onClick={() => setToolFilter(toolFilter === t ? null : t)}
+            className={`px-3 py-1 rounded-full text-sm capitalize ${toolFilter === t ? 'bg-orange-600 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'}`}
+          >
+            {t}
+          </button>
+        ))}
+      </div>
+
+      {filteredFindings.length === 0 ? (
+        <div className="text-center py-8 text-slate-500">
+          Keine Findings mit diesem Filter gefunden.
+        </div>
+      ) : (
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead>
+              <tr className="border-b border-slate-200">
+                <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Severity</th>
+                <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Tool</th>
+                <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Finding</th>
+                <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Datei</th>
+                <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Zeile</th>
+                <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Gefunden</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filteredFindings.map((finding, idx) => (
+                <tr key={`${finding.id}-${idx}`} className="border-b border-slate-100 hover:bg-slate-50">
+                  <td className="py-3 px-4">
+                    <span className={getSeverityBadge(finding.severity)}>{finding.severity}</span>
+                  </td>
+                  <td className="py-3 px-4 text-sm text-slate-600">{finding.tool}</td>
+                  <td className="py-3 px-4">
+                    <div className="text-sm text-slate-900">{finding.title}</div>
+                    {finding.message && (
+                      <div className="text-xs text-slate-500 mt-1">{finding.message}</div>
+                    )}
+                  </td>
+                  <td className="py-3 px-4 text-sm text-slate-500 font-mono max-w-xs truncate">
+                    {finding.file || '-'}
+                  </td>
+                  <td className="py-3 px-4 text-sm text-slate-500">{finding.line || '-'}</td>
+                  <td className="py-3 px-4 text-sm text-slate-500">
+                    {finding.found_at ? new Date(finding.found_at).toLocaleDateString('de-DE') : '-'}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/infrastructure/security/_components/HistoryTab.tsx b/admin-lehrer/app/(admin)/infrastructure/security/_components/HistoryTab.tsx
new file mode 100644
index 0000000..7cf2251
--- /dev/null
+++ b/admin-lehrer/app/(admin)/infrastructure/security/_components/HistoryTab.tsx
@@ -0,0 +1,40 @@
+'use client'
+
+import type { HistoryItem } from '../types'
+import { getHistoryStatusColor } from '../useSecurityDashboard'
+
+interface HistoryTabProps {
+  history: HistoryItem[]
+}
+
+export function HistoryTab({ history }: HistoryTabProps) {
+  if (history.length === 0) {
+    return (
+      <div className="text-center py-8 text-slate-500">
+        Keine Scan-Historie vorhanden.
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="relative">
+        <div className="absolute left-4 top-0 bottom-0 w-0.5 bg-slate-200" />
+        {history.map((item, idx) => (
+          <div key={idx} className="relative pl-10 pb-6">
+            <div className={`absolute left-2.5 w-3 h-3 rounded-full ${getHistoryStatusColor(item.status)}`} />
+            <div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
+              <div className="flex justify-between items-start mb-1">
+                <span className="font-semibold text-slate-900">{item.title}</span>
+                <span className="text-xs text-slate-500">
+                  {new Date(item.timestamp).toLocaleString('de-DE')}
+                </span>
+              </div>
+              <p className="text-sm text-slate-600">{item.description}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/infrastructure/security/_components/MonitoringTab.tsx b/admin-lehrer/app/(admin)/infrastructure/security/_components/MonitoringTab.tsx
new file mode 100644
index 0000000..a405292
--- /dev/null
+++ b/admin-lehrer/app/(admin)/infrastructure/security/_components/MonitoringTab.tsx
@@ -0,0 +1,202 @@
+'use client'
+
+import type { MonitoringMetric, ActiveAlert } from '../types'
+
+interface MonitoringTabProps {
+  monitoringMetrics: MonitoringMetric[]
+  activeAlerts: ActiveAlert[]
+}
+
+export function MonitoringTab({ monitoringMetrics, activeAlerts }: MonitoringTabProps) {
+  return (
+    <div className="space-y-6">
+      {/* Real-time Metrics */}
+      <MetricsGrid metrics={monitoringMetrics} />
+
+      {/* Active Alerts */}
+      <AlertsList alerts={activeAlerts} />
+
+      {/* Security Overview Cards */}
+      <SecurityOverviewCards />
+
+      {/* Link to CI/CD */}
+      <PipelineSecurityLink />
+    </div>
+  )
+}
+
+function MetricsGrid({ metrics }: { metrics: MonitoringMetric[] }) {
+  return (
+    <div>
+      <h3 className="text-lg font-semibold text-slate-900 mb-4 flex items-center gap-2">
+        <svg className="w-5 h-5 text-green-500" 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>
+        Security Metriken
+      </h3>
+      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
+        {metrics.map((metric, idx) => (
+          <div
+            key={idx}
+            className={`rounded-lg p-4 border ${
+              metric.status === 'critical' ? 'bg-red-50 border-red-200' :
+              metric.status === 'warning' ? 'bg-yellow-50 border-yellow-200' :
+              'bg-green-50 border-green-200'
+            }`}
+          >
+            <div className="flex justify-between items-start mb-2">
+              <span className="text-xs text-slate-600">{metric.name}</span>
+              <span className={`text-xs ${
+                metric.trend === 'up' ? 'text-red-600' :
+                metric.trend === 'down' ? 'text-green-600' :
+                'text-slate-500'
+              }`}>
+                {metric.trend === 'up' ? '↑' : metric.trend === 'down' ? '↓' : '→'}
+              </span>
+            </div>
+            <div className={`text-2xl font-bold ${
+              metric.status === 'critical' ? 'text-red-700' :
+              metric.status === 'warning' ? 'text-yellow-700' :
+              'text-green-700'
+            }`}>
+              {metric.value}
+              <span className="text-sm font-normal ml-1">{metric.unit}</span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function AlertsList({ alerts }: { alerts: ActiveAlert[] }) {
+  const unacknowledgedCount = alerts.filter(a => !a.acknowledged).length
+
+  return (
+    <div>
+      <h3 className="text-lg font-semibold text-slate-900 mb-4 flex items-center gap-2">
+        <svg className="w-5 h-5 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+        </svg>
+        Aktive Alerts
+        {unacknowledgedCount > 0 && (
+          <span className="ml-2 px-2 py-0.5 bg-red-500 text-white text-xs rounded-full">
+            {unacknowledgedCount}
+          </span>
+        )}
+      </h3>
+      {alerts.length === 0 ? (
+        <div className="text-center py-8 bg-green-50 rounded-lg border border-green-200">
+          <span className="text-4xl block mb-2">✓</span>
+          <span className="text-green-700">Keine aktiven Security-Alerts</span>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {alerts.map((alert) => (
+            <div
+              key={alert.id}
+              className={`flex items-center justify-between p-4 rounded-lg border ${
+                alert.severity === 'critical' ? 'bg-red-50 border-red-200' :
+                alert.severity === 'high' ? 'bg-orange-50 border-orange-200' :
+                alert.severity === 'medium' ? 'bg-yellow-50 border-yellow-200' :
+                'bg-blue-50 border-blue-200'
+              }`}
+            >
+              <div className="flex items-center gap-4">
+                <span className={`px-2 py-1 text-xs font-semibold rounded uppercase ${
+                  alert.severity === 'critical' ? 'bg-red-100 text-red-800' :
+                  alert.severity === 'high' ? 'bg-orange-100 text-orange-800' :
+                  alert.severity === 'medium' ? 'bg-yellow-100 text-yellow-800' :
+                  'bg-blue-100 text-blue-800'
+                }`}>
+                  {alert.severity}
+                </span>
+                <div>
+                  <div className="font-medium text-slate-900">{alert.title}</div>
+                  <div className="text-xs text-slate-500">
+                    {alert.source} • {new Date(alert.timestamp).toLocaleString('de-DE')}
+                  </div>
+                </div>
+              </div>
+              {!alert.acknowledged && (
+                <button className="px-3 py-1 text-xs bg-white border border-slate-300 rounded hover:bg-slate-50">
+                  Bestaetigen
+                </button>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function SecurityOverviewCards() {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+      <div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
+        <h4 className="font-medium text-slate-900 mb-3 flex items-center gap-2">
+          <svg className="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+          </svg>
+          Authentifizierung
+        </h4>
+        <div className="space-y-2 text-sm">
+          <div className="flex justify-between"><span className="text-slate-600">Aktive Sessions</span><span className="font-medium">24</span></div>
+          <div className="flex justify-between"><span className="text-slate-600">Fehlgeschlagene Logins (24h)</span><span className="font-medium text-green-600">0</span></div>
+          <div className="flex justify-between"><span className="text-slate-600">2FA-Quote</span><span className="font-medium text-green-600">100%</span></div>
+        </div>
+      </div>
+
+      <div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
+        <h4 className="font-medium text-slate-900 mb-3 flex items-center gap-2">
+          <svg className="w-4 h-4 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+          </svg>
+          SSL/TLS
+        </h4>
+        <div className="space-y-2 text-sm">
+          <div className="flex justify-between"><span className="text-slate-600">Zertifikate</span><span className="font-medium">5 aktiv</span></div>
+          <div className="flex justify-between"><span className="text-slate-600">Naechster Ablauf</span><span className="font-medium text-green-600">45 Tage</span></div>
+          <div className="flex justify-between"><span className="text-slate-600">TLS Version</span><span className="font-medium">1.3</span></div>
+        </div>
+      </div>
+
+      <div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
+        <h4 className="font-medium text-slate-900 mb-3 flex items-center gap-2">
+          <svg className="w-4 h-4 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+          </svg>
+          Firewall
+        </h4>
+        <div className="space-y-2 text-sm">
+          <div className="flex justify-between"><span className="text-slate-600">Blockierte IPs (24h)</span><span className="font-medium">12</span></div>
+          <div className="flex justify-between"><span className="text-slate-600">Rate Limit Hits</span><span className="font-medium text-yellow-600">7</span></div>
+          <div className="flex justify-between"><span className="text-slate-600">WAF Status</span><span className="font-medium text-green-600">Aktiv</span></div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function PipelineSecurityLink() {
+  return (
+    <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 flex items-center justify-between">
+      <div className="flex items-center gap-3">
+        <svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+        </svg>
+        <div>
+          <div className="font-medium text-blue-900">Pipeline Security</div>
+          <div className="text-sm text-blue-700">Security-Scans in CI/CD Pipelines und Container-Status</div>
+        </div>
+      </div>
+      <a
+        href="/infrastructure/ci-cd"
+        className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors"
+      >
+        CI/CD Dashboard →
+      </a>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/infrastructure/security/_components/OverviewTab.tsx b/admin-lehrer/app/(admin)/infrastructure/security/_components/OverviewTab.tsx
new file mode 100644
index 0000000..2fa5b1a
--- /dev/null
+++ b/admin-lehrer/app/(admin)/infrastructure/security/_components/OverviewTab.tsx
@@ -0,0 +1,116 @@
+'use client'
+
+import type { ToolStatus, Finding, ScanType, TabId } from '../types'
+import { TOOL_DESCRIPTIONS, TOOL_TO_SCAN_TYPE } from '../types'
+import { getSeverityBadge, getStatusBadge } from '../useSecurityDashboard'
+
+interface OverviewTabProps {
+  tools: ToolStatus[]
+  findings: Finding[]
+  scanning: string | null
+  onRunScan: (scanType: ScanType) => void
+  onSwitchTab: (tab: TabId) => void
+}
+
+export function OverviewTab({ tools, findings, scanning, onRunScan, onSwitchTab }: OverviewTabProps) {
+  return (
+    <div className="space-y-6">
+      {/* Tools Grid */}
+      <div>
+        <h3 className="text-lg font-semibold text-slate-900 mb-4">DevSecOps Tools</h3>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {tools.map(tool => {
+            const info = TOOL_DESCRIPTIONS[tool.name.toLowerCase()] || { icon: '🔧', desc: 'Security Tool' }
+            const scanType = TOOL_TO_SCAN_TYPE[tool.name.toLowerCase()] || 'all'
+            return (
+              <div key={tool.name} className="bg-slate-50 rounded-lg p-4 border border-slate-200">
+                <div className="flex justify-between items-start mb-2">
+                  <div className="flex items-center gap-2">
+                    <span className="text-xl">{info.icon}</span>
+                    <span className="font-semibold text-slate-900">{tool.name}</span>
+                  </div>
+                  <span className={getStatusBadge(tool.installed)}>
+                    {tool.installed ? 'Installiert' : 'Nicht installiert'}
+                  </span>
+                </div>
+                <p className="text-sm text-slate-600 mb-3">{info.desc}</p>
+                <div className="flex justify-between items-center text-xs text-slate-500">
+                  <span>{tool.version || '-'}</span>
+                  <span>Letzter Scan: {tool.last_run || 'Nie'}</span>
+                </div>
+                <button
+                  onClick={() => onRunScan(scanType)}
+                  disabled={scanning !== null || !tool.installed}
+                  className={`mt-3 w-full px-3 py-1.5 text-sm border rounded transition-colors flex items-center justify-center gap-2 ${
+                    scanning === scanType
+                      ? 'bg-orange-100 border-orange-300 text-orange-700'
+                      : 'bg-white border-slate-300 hover:bg-slate-50 disabled:opacity-50'
+                  }`}
+                >
+                  {scanning === scanType ? (
+                    <>
+                      <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-orange-600" />
+                      <span>Scan laeuft...</span>
+                    </>
+                  ) : (
+                    'Scan starten'
+                  )}
+                </button>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+
+      {/* Recent Findings */}
+      <div>
+        <h3 className="text-lg font-semibold text-slate-900 mb-4">Aktuelle Findings</h3>
+        {findings.length === 0 ? (
+          <div className="text-center py-8 text-slate-500">
+            <span className="text-4xl block mb-2">🎉</span>
+            Keine Findings gefunden. Das ist gut!
+          </div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead>
+                <tr className="border-b border-slate-200">
+                  <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Severity</th>
+                  <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Tool</th>
+                  <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Finding</th>
+                  <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Datei</th>
+                  <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Gefunden</th>
+                </tr>
+              </thead>
+              <tbody>
+                {findings.slice(0, 10).map((finding, idx) => (
+                  <tr key={`${finding.id}-${idx}`} className="border-b border-slate-100 hover:bg-slate-50">
+                    <td className="py-3 px-4">
+                      <span className={getSeverityBadge(finding.severity)}>{finding.severity}</span>
+                    </td>
+                    <td className="py-3 px-4 text-sm text-slate-600">{finding.tool}</td>
+                    <td className="py-3 px-4 text-sm text-slate-900">{finding.title}</td>
+                    <td className="py-3 px-4 text-sm text-slate-500 font-mono">{finding.file || '-'}</td>
+                    <td className="py-3 px-4 text-sm text-slate-500">
+                      {finding.found_at ? new Date(finding.found_at).toLocaleString('de-DE', {
+                        day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit',
+                      }) : '-'}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+            {findings.length > 10 && (
+              <button
+                onClick={() => onSwitchTab('findings')}
+                className="mt-4 text-sm text-orange-600 hover:text-orange-700"
+              >
+                Alle {findings.length} Findings anzeigen →
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/infrastructure/security/_components/SecurityHeader.tsx b/admin-lehrer/app/(admin)/infrastructure/security/_components/SecurityHeader.tsx
new file mode 100644
index 0000000..5bf771e
--- /dev/null
+++ b/admin-lehrer/app/(admin)/infrastructure/security/_components/SecurityHeader.tsx
@@ -0,0 +1,66 @@
+'use client'
+
+import type { SeveritySummary, ScanType } from '../types'
+
+interface SecurityHeaderProps {
+  overallStatus: { label: string; color: string }
+  summary: SeveritySummary
+  scanning: string | null
+  onRunScan: (scanType: ScanType) => void
+}
+
+export function SecurityHeader({ overallStatus, summary, scanning, onRunScan }: SecurityHeaderProps) {
+  return (
+    <div className="bg-white rounded-xl border border-slate-200 p-6 mb-6">
+      <div className="flex justify-between items-center mb-6">
+        <div className="flex items-center gap-4">
+          <h2 className="text-xl font-semibold text-slate-900">Security Status</h2>
+          <span className={`px-3 py-1 rounded-full text-sm font-semibold ${overallStatus.color}`}>
+            {overallStatus.label}
+          </span>
+        </div>
+        <div className="flex items-center gap-3">
+          <span className="flex items-center gap-2 text-sm text-slate-500">
+            <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
+            Auto-Refresh aktiv
+          </span>
+          <button
+            onClick={() => onRunScan('all')}
+            disabled={scanning !== null}
+            className={`px-4 py-2 rounded-lg font-medium transition-colors flex items-center gap-2 ${
+              scanning === 'all'
+                ? 'bg-orange-200 text-orange-800'
+                : 'bg-orange-600 text-white hover:bg-orange-700 disabled:opacity-50'
+            }`}
+          >
+            {scanning === 'all' ? (
+              <>
+                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-orange-700" />
+                <span>Full Scan laeuft...</span>
+              </>
+            ) : (
+              'Full Scan starten'
+            )}
+          </button>
+        </div>
+      </div>
+
+      {/* Severity Summary */}
+      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
+        {([
+          { key: 'critical', border: 'border-red-500', text: 'text-red-600', label: 'Critical' },
+          { key: 'high', border: 'border-orange-500', text: 'text-orange-600', label: 'High' },
+          { key: 'medium', border: 'border-yellow-500', text: 'text-yellow-600', label: 'Medium' },
+          { key: 'low', border: 'border-green-500', text: 'text-green-600', label: 'Low' },
+          { key: 'info', border: 'border-blue-500', text: 'text-blue-600', label: 'Info' },
+          { key: 'total', border: 'border-slate-400', text: 'text-slate-700', label: 'Total' },
+        ] as const).map(({ key, border, text, label }) => (
+          <div key={key} className={`border-l-4 ${border} bg-slate-50 rounded-r-lg p-4`}>
+            <div className={`text-3xl font-bold ${text}`}>{summary[key]}</div>
+            <div className="text-sm text-slate-600">{label}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/infrastructure/security/_components/ToolsTab.tsx b/admin-lehrer/app/(admin)/infrastructure/security/_components/ToolsTab.tsx
new file mode 100644
index 0000000..6c0467d
--- /dev/null
+++ b/admin-lehrer/app/(admin)/infrastructure/security/_components/ToolsTab.tsx
@@ -0,0 +1,78 @@
+'use client'
+
+import type { ToolStatus, ScanType } from '../types'
+import { TOOL_DESCRIPTIONS, TOOL_TO_SCAN_TYPE } from '../types'
+import { getStatusBadge } from '../useSecurityDashboard'
+
+interface ToolsTabProps {
+  tools: ToolStatus[]
+  scanning: string | null
+  onRunScan: (scanType: ScanType) => void
+}
+
+export function ToolsTab({ tools, scanning, onRunScan }: ToolsTabProps) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+      {tools.map(tool => {
+        const info = TOOL_DESCRIPTIONS[tool.name.toLowerCase()] || { icon: '🔧', desc: 'Security Tool' }
+        const scanType = TOOL_TO_SCAN_TYPE[tool.name.toLowerCase()] || 'all'
+        return (
+          <div key={tool.name} className="bg-white border border-slate-200 rounded-lg p-6">
+            <div className="flex justify-between items-start mb-4">
+              <div>
+                <div className="flex items-center gap-3 mb-1">
+                  <span className="text-2xl">{info.icon}</span>
+                  <h3 className="text-lg font-semibold text-slate-900">{tool.name}</h3>
+                </div>
+                <p className="text-sm text-slate-600">{info.desc}</p>
+              </div>
+              <span className={getStatusBadge(tool.installed)}>
+                {tool.installed ? 'Installiert' : 'Nicht installiert'}
+              </span>
+            </div>
+            <div className="space-y-2 text-sm">
+              <div className="flex justify-between">
+                <span className="text-slate-500">Version:</span>
+                <span className="font-mono">{tool.version || '-'}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-slate-500">Letzter Scan:</span>
+                <span>{tool.last_run || 'Nie'}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-slate-500">Findings:</span>
+                <span className="font-semibold">{tool.last_findings}</span>
+              </div>
+            </div>
+            <div className="flex gap-2 mt-4">
+              <button
+                onClick={() => onRunScan(scanType)}
+                disabled={scanning !== null || !tool.installed}
+                className={`flex-1 px-4 py-2 rounded-lg text-sm font-medium transition-colors flex items-center justify-center gap-2 ${
+                  scanning === scanType
+                    ? 'bg-orange-200 text-orange-800'
+                    : 'bg-orange-600 text-white hover:bg-orange-700 disabled:opacity-50'
+                }`}
+              >
+                {scanning === scanType ? (
+                  <>
+                    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-orange-700" />
+                    <span>Scan laeuft...</span>
+                  </>
+                ) : (
+                  'Scan starten'
+                )}
+              </button>
+              <button
+                onClick={() => window.open(`/api/v1/security/reports/${tool.name.toLowerCase()}`, '_blank')}
+                className="px-4 py-2 border border-slate-300 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-50 transition-colors"
+              >
+                Report
+              </button>
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/infrastructure/security/page.tsx b/admin-lehrer/app/(admin)/infrastructure/security/page.tsx
index 26e38e2..007dcd6 100644
--- a/admin-lehrer/app/(admin)/infrastructure/security/page.tsx
+++ b/admin-lehrer/app/(admin)/infrastructure/security/page.tsx
@@ -7,283 +7,51 @@
  * Migrated from old admin (/admin/security)
  */
 
-import { useEffect, useState, useCallback } from 'react'
 import { PagePurpose } from '@/components/common/PagePurpose'
 import { DevOpsPipelineSidebarResponsive } from '@/components/infrastructure/DevOpsPipelineSidebar'
+import { useSecurityDashboard } from './useSecurityDashboard'
+import { SecurityHeader } from './_components/SecurityHeader'
+import { OverviewTab } from './_components/OverviewTab'
+import { FindingsTab } from './_components/FindingsTab'
+import { ToolsTab } from './_components/ToolsTab'
+import { HistoryTab } from './_components/HistoryTab'
+import { MonitoringTab } from './_components/MonitoringTab'
+import { DocumentationSection } from './_components/DocumentationSection'
+import type { TabId } from './types'
 
-interface ToolStatus {
-  name: string
-  installed: boolean
-  version: string | null
-  last_run: string | null
-  last_findings: number
-}
-
-interface Finding {
-  id: string
-  tool: string
-  severity: string
-  title: string
-  message: string | null
-  file: string | null
-  line: number | null
-  found_at: string
-}
-
-interface SeveritySummary {
-  critical: number
-  high: number
-  medium: number
-  low: number
-  info: number
-  total: number
-}
-
-interface HistoryItem {
-  timestamp: string
-  title: string
-  description: string
-  status: string
-}
-
-type ScanType = 'secrets' | 'sast' | 'deps' | 'containers' | 'sbom' | 'all'
-
-interface MonitoringMetric {
-  name: string
-  value: number
-  unit: string
-  status: 'ok' | 'warning' | 'critical'
-  trend: 'up' | 'down' | 'stable'
-}
-
-interface ActiveAlert {
-  id: string
-  severity: 'critical' | 'high' | 'medium' | 'low'
-  title: string
-  source: string
-  timestamp: string
-  acknowledged: boolean
+const TAB_LABELS: Record<TabId, string> = {
+  overview: 'Uebersicht',
+  findings: 'Findings',
+  tools: 'Tools',
+  history: 'Historie',
+  monitoring: 'Monitoring',
 }
 
 export default function SecurityDashboardPage() {
-  const [tools, setTools] = useState<ToolStatus[]>([])
-  const [findings, setFindings] = useState<Finding[]>([])
-  const [summary, setSummary] = useState<SeveritySummary>({ critical: 0, high: 0, medium: 0, low: 0, info: 0, total: 0 })
-  const [history, setHistory] = useState<HistoryItem[]>([])
-  const [loading, setLoading] = useState(true)
-  const [scanning, setScanning] = useState<string | null>(null)
-  const [error, setError] = useState<string | null>(null)
-  const [activeTab, setActiveTab] = useState<'overview' | 'findings' | 'tools' | 'history' | 'monitoring'>('overview')
-  const [monitoringMetrics, setMonitoringMetrics] = useState<MonitoringMetric[]>([])
-  const [activeAlerts, setActiveAlerts] = useState<ActiveAlert[]>([])
-  const [severityFilter, setSeverityFilter] = useState<string | null>(null)
-  const [toolFilter, setToolFilter] = useState<string | null>(null)
-  const [showFullDocs, setShowFullDocs] = useState(false)
-  const [isInitialLoad, setIsInitialLoad] = useState(true)
-  const [scanMessage, setScanMessage] = useState<string | null>(null)
-  const [lastScanTime, setLastScanTime] = useState<string | null>(null)
-
-  const fetchData = useCallback(async (showLoadingSpinner = false) => {
-    // Only show loading spinner on initial load, not on auto-refresh
-    if (showLoadingSpinner) {
-      setLoading(true)
-    }
-    setError(null)
-
-    try {
-      const [toolsRes, findingsRes, summaryRes, historyRes] = await Promise.all([
-        fetch('/api/v1/security/tools'),
-        fetch('/api/v1/security/findings'),
-        fetch('/api/v1/security/summary'),
-        fetch('/api/v1/security/history'),
-      ])
-
-      if (toolsRes.ok) {
-        setTools(await toolsRes.json())
-      }
-      if (findingsRes.ok) {
-        setFindings(await findingsRes.json())
-      }
-      if (summaryRes.ok) {
-        setSummary(await summaryRes.json())
-      }
-      if (historyRes.ok) {
-        setHistory(await historyRes.json())
-      }
-
-      // Fetch monitoring data
-      const [metricsRes, alertsRes] = await Promise.all([
-        fetch('/api/v1/security/monitoring/metrics'),
-        fetch('/api/v1/security/monitoring/alerts'),
-      ])
-
-      if (metricsRes.ok) {
-        setMonitoringMetrics(await metricsRes.json())
-      } else {
-        // Default metrics if API not available
-        setMonitoringMetrics([
-          { name: 'API Latency', value: 45, unit: 'ms', status: 'ok', trend: 'stable' },
-          { name: 'Auth Failures', value: 3, unit: '/h', status: 'ok', trend: 'down' },
-          { name: 'Rate Limit Hits', value: 12, unit: '/h', status: 'warning', trend: 'up' },
-          { name: 'Failed Logins', value: 0, unit: '/24h', status: 'ok', trend: 'stable' },
-          { name: 'SSL Expiry', value: 45, unit: 'days', status: 'ok', trend: 'down' },
-          { name: 'Open Ports', value: 8, unit: '', status: 'ok', trend: 'stable' },
-        ])
-      }
-      if (alertsRes.ok) {
-        setActiveAlerts(await alertsRes.json())
-      } else {
-        setActiveAlerts([])
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Verbindung zum Backend fehlgeschlagen')
-    } finally {
-      setLoading(false)
-      setIsInitialLoad(false)
-    }
-  }, [])
-
-  // Initial load only - runs once
-  useEffect(() => {
-    fetchData(true) // Show loading spinner on initial load
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  // Auto-refresh every 60 seconds (without loading spinner)
-  useEffect(() => {
-    const interval = setInterval(() => fetchData(false), 60000)
-    return () => clearInterval(interval)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  const scanTypeLabels: Record<ScanType, string> = {
-    secrets: 'Secrets (Gitleaks)',
-    sast: 'SAST (Semgrep + Bandit)',
-    deps: 'Dependencies (Trivy + Grype)',
-    containers: 'Container',
-    sbom: 'SBOM (Syft)',
-    all: 'Full Scan',
-  }
-
-  const runScan = async (scanType: ScanType) => {
-    console.log(`Starting scan: ${scanType}`)
-    setScanning(scanType)
-    setError(null)
-    setScanMessage(`${scanTypeLabels[scanType]} wird gestartet...`)
-
-    try {
-      const response = await fetch(`/api/v1/security/scan/${scanType}`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-      })
-
-      console.log(`Scan response status: ${response.status}`)
-
-      if (!response.ok) {
-        const errorText = await response.text()
-        console.error(`Scan error: ${errorText}`)
-        throw new Error(`Scan fehlgeschlagen: ${response.status} - ${errorText}`)
-      }
-
-      const result = await response.json()
-      console.log('Scan result:', result)
-
-      // Show success message
-      setScanMessage(`${scanTypeLabels[scanType]} laeuft im Hintergrund. Ergebnisse werden in wenigen Sekunden aktualisiert.`)
-      setLastScanTime(new Date().toLocaleTimeString('de-DE'))
-
-      // Refresh data after scan completes
-      setTimeout(() => {
-        fetchData(false)
-        setScanMessage(null)
-      }, 5000)
-      setTimeout(() => fetchData(false), 15000)
-      setTimeout(() => fetchData(false), 30000)
-    } catch (err) {
-      console.error('Scan error:', err)
-      setError(err instanceof Error ? err.message : 'Scan fehlgeschlagen - Pruefe Browser-Konsole')
-      setScanMessage(null)
-    } finally {
-      setScanning(null)
-    }
-  }
-
-  const getSeverityBadge = (severity: string) => {
-    const base = 'px-3 py-1 rounded-full text-xs font-semibold uppercase'
-    switch (severity.toUpperCase()) {
-      case 'CRITICAL':
-        return `${base} bg-red-100 text-red-800`
-      case 'HIGH':
-        return `${base} bg-orange-100 text-orange-800`
-      case 'MEDIUM':
-        return `${base} bg-yellow-100 text-yellow-800`
-      case 'LOW':
-        return `${base} bg-green-100 text-green-800`
-      default:
-        return `${base} bg-blue-100 text-blue-800`
-    }
-  }
-
-  const getStatusBadge = (installed: boolean) => {
-    return installed
-      ? 'px-2 py-1 rounded text-xs font-semibold bg-green-100 text-green-800'
-      : 'px-2 py-1 rounded text-xs font-semibold bg-red-100 text-red-800'
-  }
-
-  const getHistoryStatusColor = (status: string) => {
-    switch (status) {
-      case 'success':
-        return 'bg-green-500'
-      case 'warning':
-        return 'bg-yellow-500'
-      case 'error':
-        return 'bg-red-500'
-      default:
-        return 'bg-slate-400'
-    }
-  }
-
-  const getOverallStatus = () => {
-    if (summary.critical > 0) {
-      return { label: 'Critical Issues', color: 'bg-red-100 text-red-800' }
-    }
-    if (summary.high > 0) {
-      return { label: 'High Issues', color: 'bg-orange-100 text-orange-800' }
-    }
-    if (summary.medium > 0) {
-      return { label: 'Warnings', color: 'bg-yellow-100 text-yellow-800' }
-    }
-    return { label: 'Secure', color: 'bg-green-100 text-green-800' }
-  }
-
-  const filteredFindings = findings.filter(f => {
-    if (severityFilter && f.severity.toUpperCase() !== severityFilter.toUpperCase()) return false
-    if (toolFilter && f.tool.toLowerCase() !== toolFilter.toLowerCase()) return false
-    return true
-  })
-
-  const toolDescriptions: Record<string, { icon: string; desc: string }> = {
-    gitleaks: { icon: '🔑', desc: 'Secrets Detection in Git History' },
-    semgrep: { icon: '🔍', desc: 'Static Application Security Testing (SAST)' },
-    bandit: { icon: '🐍', desc: 'Python Security Linter' },
-    trivy: { icon: '🔒', desc: 'Container & Filesystem Vulnerability Scanner' },
-    grype: { icon: '🐛', desc: 'Vulnerability Scanner for Dependencies' },
-    syft: { icon: '📦', desc: 'SBOM Generator (CycloneDX/SPDX)' },
-  }
-
-  // Map tool names to backend scan types
-  const toolToScanType: Record<string, ScanType> = {
-    gitleaks: 'secrets',
-    semgrep: 'sast',
-    bandit: 'sast',
-    trivy: 'deps',
-    grype: 'deps',
-    syft: 'sbom',
-  }
-
-  const status = getOverallStatus()
+  const {
+    tools,
+    findings,
+    filteredFindings,
+    summary,
+    history,
+    loading,
+    scanning,
+    error,
+    activeTab,
+    setActiveTab,
+    monitoringMetrics,
+    activeAlerts,
+    severityFilter,
+    setSeverityFilter,
+    toolFilter,
+    setToolFilter,
+    showFullDocs,
+    setShowFullDocs,
+    scanMessage,
+    lastScanTime,
+    overallStatus,
+    runScan,
+  } = useSecurityDashboard()
 
   return (
     <div>
@@ -305,77 +73,19 @@ export default function SecurityDashboardPage() {
         defaultCollapsed={true}
       />
 
-      {/* DevOps Pipeline Sidebar */}
       <DevOpsPipelineSidebarResponsive currentTool="security" />
 
-      {/* Header with Status */}
-      <div className="bg-white rounded-xl border border-slate-200 p-6 mb-6">
-        <div className="flex justify-between items-center mb-6">
-          <div className="flex items-center gap-4">
-            <h2 className="text-xl font-semibold text-slate-900">Security Status</h2>
-            <span className={`px-3 py-1 rounded-full text-sm font-semibold ${status.color}`}>
-              {status.label}
-            </span>
-          </div>
-          <div className="flex items-center gap-3">
-            <span className="flex items-center gap-2 text-sm text-slate-500">
-              <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
-              Auto-Refresh aktiv
-            </span>
-            <button
-              onClick={() => runScan('all')}
-              disabled={scanning !== null}
-              className={`px-4 py-2 rounded-lg font-medium transition-colors flex items-center gap-2 ${
-                scanning === 'all'
-                  ? 'bg-orange-200 text-orange-800'
-                  : 'bg-orange-600 text-white hover:bg-orange-700 disabled:opacity-50'
-              }`}
-            >
-              {scanning === 'all' ? (
-                <>
-                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-orange-700" />
-                  <span>Full Scan laeuft...</span>
-                </>
-              ) : (
-                'Full Scan starten'
-              )}
-            </button>
-          </div>
-        </div>
-
-        {/* Severity Summary */}
-        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
-          <div className="border-l-4 border-red-500 bg-slate-50 rounded-r-lg p-4">
-            <div className="text-3xl font-bold text-red-600">{summary.critical}</div>
-            <div className="text-sm text-slate-600">Critical</div>
-          </div>
-          <div className="border-l-4 border-orange-500 bg-slate-50 rounded-r-lg p-4">
-            <div className="text-3xl font-bold text-orange-600">{summary.high}</div>
-            <div className="text-sm text-slate-600">High</div>
-          </div>
-          <div className="border-l-4 border-yellow-500 bg-slate-50 rounded-r-lg p-4">
-            <div className="text-3xl font-bold text-yellow-600">{summary.medium}</div>
-            <div className="text-sm text-slate-600">Medium</div>
-          </div>
-          <div className="border-l-4 border-green-500 bg-slate-50 rounded-r-lg p-4">
-            <div className="text-3xl font-bold text-green-600">{summary.low}</div>
-            <div className="text-sm text-slate-600">Low</div>
-          </div>
-          <div className="border-l-4 border-blue-500 bg-slate-50 rounded-r-lg p-4">
-            <div className="text-3xl font-bold text-blue-600">{summary.info}</div>
-            <div className="text-sm text-slate-600">Info</div>
-          </div>
-          <div className="border-l-4 border-slate-400 bg-slate-50 rounded-r-lg p-4">
-            <div className="text-3xl font-bold text-slate-700">{summary.total}</div>
-            <div className="text-sm text-slate-600">Total</div>
-          </div>
-        </div>
-      </div>
+      <SecurityHeader
+        overallStatus={overallStatus}
+        summary={summary}
+        scanning={scanning}
+        onRunScan={runScan}
+      />
 
       {/* Tabs */}
       <div className="bg-white rounded-xl border border-slate-200 overflow-hidden mb-6">
         <div className="flex border-b border-slate-200">
-          {(['overview', 'findings', 'tools', 'history', 'monitoring'] as const).map(tab => (
+          {(Object.keys(TAB_LABELS) as TabId[]).map(tab => (
             <button
               key={tab}
               onClick={() => setActiveTab(tab)}
@@ -385,11 +95,7 @@ export default function SecurityDashboardPage() {
                   : 'text-slate-600 hover:bg-slate-50'
               }`}
             >
-              {tab === 'overview' && 'Uebersicht'}
-              {tab === 'findings' && `Findings (${summary.total})`}
-              {tab === 'tools' && 'Tools'}
-              {tab === 'history' && 'Historie'}
-              {tab === 'monitoring' && 'Monitoring'}
+              {tab === 'findings' ? `${TAB_LABELS[tab]} (${summary.total})` : TAB_LABELS[tab]}
             </button>
           ))}
         </div>
@@ -420,718 +126,39 @@ export default function SecurityDashboardPage() {
             </div>
           ) : (
             <>
-              {/* Overview Tab */}
               {activeTab === 'overview' && (
-                <div className="space-y-6">
-                  {/* Tools Grid */}
-                  <div>
-                    <h3 className="text-lg font-semibold text-slate-900 mb-4">DevSecOps Tools</h3>
-                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                      {tools.map(tool => {
-                        const info = toolDescriptions[tool.name.toLowerCase()] || { icon: '🔧', desc: 'Security Tool' }
-                        return (
-                          <div key={tool.name} className="bg-slate-50 rounded-lg p-4 border border-slate-200">
-                            <div className="flex justify-between items-start mb-2">
-                              <div className="flex items-center gap-2">
-                                <span className="text-xl">{info.icon}</span>
-                                <span className="font-semibold text-slate-900">{tool.name}</span>
-                              </div>
-                              <span className={getStatusBadge(tool.installed)}>
-                                {tool.installed ? 'Installiert' : 'Nicht installiert'}
-                              </span>
-                            </div>
-                            <p className="text-sm text-slate-600 mb-3">{info.desc}</p>
-                            <div className="flex justify-between items-center text-xs text-slate-500">
-                              <span>{tool.version || '-'}</span>
-                              <span>Letzter Scan: {tool.last_run || 'Nie'}</span>
-                            </div>
-                            <button
-                              onClick={() => runScan(toolToScanType[tool.name.toLowerCase()] || 'all')}
-                              disabled={scanning !== null || !tool.installed}
-                              className={`mt-3 w-full px-3 py-1.5 text-sm border rounded transition-colors flex items-center justify-center gap-2 ${
-                                scanning === toolToScanType[tool.name.toLowerCase()]
-                                  ? 'bg-orange-100 border-orange-300 text-orange-700'
-                                  : 'bg-white border-slate-300 hover:bg-slate-50 disabled:opacity-50'
-                              }`}
-                            >
-                              {scanning === toolToScanType[tool.name.toLowerCase()] ? (
-                                <>
-                                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-orange-600" />
-                                  <span>Scan laeuft...</span>
-                                </>
-                              ) : (
-                                'Scan starten'
-                              )}
-                            </button>
-                          </div>
-                        )
-                      })}
-                    </div>
-                  </div>
-
-                  {/* Recent Findings */}
-                  <div>
-                    <h3 className="text-lg font-semibold text-slate-900 mb-4">Aktuelle Findings</h3>
-                    {findings.length === 0 ? (
-                      <div className="text-center py-8 text-slate-500">
-                        <span className="text-4xl block mb-2">🎉</span>
-                        Keine Findings gefunden. Das ist gut!
-                      </div>
-                    ) : (
-                      <div className="overflow-x-auto">
-                        <table className="w-full">
-                          <thead>
-                            <tr className="border-b border-slate-200">
-                              <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Severity</th>
-                              <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Tool</th>
-                              <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Finding</th>
-                              <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Datei</th>
-                              <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Gefunden</th>
-                            </tr>
-                          </thead>
-                          <tbody>
-                            {findings.slice(0, 10).map((finding, idx) => (
-                              <tr key={`${finding.id}-${idx}`} className="border-b border-slate-100 hover:bg-slate-50">
-                                <td className="py-3 px-4">
-                                  <span className={getSeverityBadge(finding.severity)}>{finding.severity}</span>
-                                </td>
-                                <td className="py-3 px-4 text-sm text-slate-600">{finding.tool}</td>
-                                <td className="py-3 px-4 text-sm text-slate-900">{finding.title}</td>
-                                <td className="py-3 px-4 text-sm text-slate-500 font-mono">{finding.file || '-'}</td>
-                                <td className="py-3 px-4 text-sm text-slate-500">
-                                  {finding.found_at ? new Date(finding.found_at).toLocaleString('de-DE', {
-                                    day: '2-digit',
-                                    month: '2-digit',
-                                    hour: '2-digit',
-                                    minute: '2-digit'
-                                  }) : '-'}
-                                </td>
-                              </tr>
-                            ))}
-                          </tbody>
-                        </table>
-                        {findings.length > 10 && (
-                          <button
-                            onClick={() => setActiveTab('findings')}
-                            className="mt-4 text-sm text-orange-600 hover:text-orange-700"
-                          >
-                            Alle {findings.length} Findings anzeigen →
-                          </button>
-                        )}
-                      </div>
-                    )}
-                  </div>
-                </div>
+                <OverviewTab
+                  tools={tools}
+                  findings={findings}
+                  scanning={scanning}
+                  onRunScan={runScan}
+                  onSwitchTab={setActiveTab}
+                />
               )}
-
-              {/* Findings Tab */}
               {activeTab === 'findings' && (
-                <div>
-                  {/* Filters */}
-                  <div className="flex gap-2 mb-4 flex-wrap">
-                    <button
-                      onClick={() => setSeverityFilter(null)}
-                      className={`px-3 py-1 rounded-full text-sm ${!severityFilter ? 'bg-orange-600 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'}`}
-                    >
-                      Alle
-                    </button>
-                    {['CRITICAL', 'HIGH', 'MEDIUM', 'LOW', 'INFO'].map(sev => (
-                      <button
-                        key={sev}
-                        onClick={() => setSeverityFilter(sev)}
-                        className={`px-3 py-1 rounded-full text-sm ${severityFilter === sev ? 'bg-orange-600 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'}`}
-                      >
-                        {sev}
-                      </button>
-                    ))}
-                    <span className="mx-2 border-l border-slate-300" />
-                    {['gitleaks', 'semgrep', 'bandit', 'trivy', 'grype'].map(t => (
-                      <button
-                        key={t}
-                        onClick={() => setToolFilter(toolFilter === t ? null : t)}
-                        className={`px-3 py-1 rounded-full text-sm capitalize ${toolFilter === t ? 'bg-orange-600 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'}`}
-                      >
-                        {t}
-                      </button>
-                    ))}
-                  </div>
-
-                  {filteredFindings.length === 0 ? (
-                    <div className="text-center py-8 text-slate-500">
-                      Keine Findings mit diesem Filter gefunden.
-                    </div>
-                  ) : (
-                    <div className="overflow-x-auto">
-                      <table className="w-full">
-                        <thead>
-                          <tr className="border-b border-slate-200">
-                            <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Severity</th>
-                            <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Tool</th>
-                            <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Finding</th>
-                            <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Datei</th>
-                            <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Zeile</th>
-                            <th className="text-left py-3 px-4 text-xs font-semibold text-slate-500 uppercase">Gefunden</th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          {filteredFindings.map((finding, idx) => (
-                            <tr key={`${finding.id}-${idx}`} className="border-b border-slate-100 hover:bg-slate-50">
-                              <td className="py-3 px-4">
-                                <span className={getSeverityBadge(finding.severity)}>{finding.severity}</span>
-                              </td>
-                              <td className="py-3 px-4 text-sm text-slate-600">{finding.tool}</td>
-                              <td className="py-3 px-4">
-                                <div className="text-sm text-slate-900">{finding.title}</div>
-                                {finding.message && (
-                                  <div className="text-xs text-slate-500 mt-1">{finding.message}</div>
-                                )}
-                              </td>
-                              <td className="py-3 px-4 text-sm text-slate-500 font-mono max-w-xs truncate">
-                                {finding.file || '-'}
-                              </td>
-                              <td className="py-3 px-4 text-sm text-slate-500">{finding.line || '-'}</td>
-                              <td className="py-3 px-4 text-sm text-slate-500">
-                                {finding.found_at ? new Date(finding.found_at).toLocaleDateString('de-DE') : '-'}
-                              </td>
-                            </tr>
-                          ))}
-                        </tbody>
-                      </table>
-                    </div>
-                  )}
-                </div>
+                <FindingsTab
+                  filteredFindings={filteredFindings}
+                  severityFilter={severityFilter}
+                  setSeverityFilter={setSeverityFilter}
+                  toolFilter={toolFilter}
+                  setToolFilter={setToolFilter}
+                />
               )}
-
-              {/* Tools Tab */}
               {activeTab === 'tools' && (
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                  {tools.map(tool => {
-                    const info = toolDescriptions[tool.name.toLowerCase()] || { icon: '🔧', desc: 'Security Tool' }
-                    return (
-                      <div key={tool.name} className="bg-white border border-slate-200 rounded-lg p-6">
-                        <div className="flex justify-between items-start mb-4">
-                          <div>
-                            <div className="flex items-center gap-3 mb-1">
-                              <span className="text-2xl">{info.icon}</span>
-                              <h3 className="text-lg font-semibold text-slate-900">{tool.name}</h3>
-                            </div>
-                            <p className="text-sm text-slate-600">{info.desc}</p>
-                          </div>
-                          <span className={getStatusBadge(tool.installed)}>
-                            {tool.installed ? 'Installiert' : 'Nicht installiert'}
-                          </span>
-                        </div>
-                        <div className="space-y-2 text-sm">
-                          <div className="flex justify-between">
-                            <span className="text-slate-500">Version:</span>
-                            <span className="font-mono">{tool.version || '-'}</span>
-                          </div>
-                          <div className="flex justify-between">
-                            <span className="text-slate-500">Letzter Scan:</span>
-                            <span>{tool.last_run || 'Nie'}</span>
-                          </div>
-                          <div className="flex justify-between">
-                            <span className="text-slate-500">Findings:</span>
-                            <span className="font-semibold">{tool.last_findings}</span>
-                          </div>
-                        </div>
-                        <div className="flex gap-2 mt-4">
-                          <button
-                            onClick={() => runScan(toolToScanType[tool.name.toLowerCase()] || 'all')}
-                            disabled={scanning !== null || !tool.installed}
-                            className={`flex-1 px-4 py-2 rounded-lg text-sm font-medium transition-colors flex items-center justify-center gap-2 ${
-                              scanning === toolToScanType[tool.name.toLowerCase()]
-                                ? 'bg-orange-200 text-orange-800'
-                                : 'bg-orange-600 text-white hover:bg-orange-700 disabled:opacity-50'
-                            }`}
-                          >
-                            {scanning === toolToScanType[tool.name.toLowerCase()] ? (
-                              <>
-                                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-orange-700" />
-                                <span>Scan laeuft...</span>
-                              </>
-                            ) : (
-                              'Scan starten'
-                            )}
-                          </button>
-                          <button
-                            onClick={() => window.open(`/api/v1/security/reports/${tool.name.toLowerCase()}`, '_blank')}
-                            className="px-4 py-2 border border-slate-300 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-50 transition-colors"
-                          >
-                            Report
-                          </button>
-                        </div>
-                      </div>
-                    )
-                  })}
-                </div>
+                <ToolsTab tools={tools} scanning={scanning} onRunScan={runScan} />
               )}
-
-              {/* History Tab */}
               {activeTab === 'history' && (
-                <div className="space-y-4">
-                  {history.length === 0 ? (
-                    <div className="text-center py-8 text-slate-500">
-                      Keine Scan-Historie vorhanden.
-                    </div>
-                  ) : (
-                    <div className="relative">
-                      <div className="absolute left-4 top-0 bottom-0 w-0.5 bg-slate-200" />
-                      {history.map((item, idx) => (
-                        <div key={idx} className="relative pl-10 pb-6">
-                          <div className={`absolute left-2.5 w-3 h-3 rounded-full ${getHistoryStatusColor(item.status)}`} />
-                          <div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
-                            <div className="flex justify-between items-start mb-1">
-                              <span className="font-semibold text-slate-900">{item.title}</span>
-                              <span className="text-xs text-slate-500">
-                                {new Date(item.timestamp).toLocaleString('de-DE')}
-                              </span>
-                            </div>
-                            <p className="text-sm text-slate-600">{item.description}</p>
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  )}
-                </div>
+                <HistoryTab history={history} />
               )}
-
-              {/* Monitoring Tab */}
               {activeTab === 'monitoring' && (
-                <div className="space-y-6">
-                  {/* Real-time Metrics */}
-                  <div>
-                    <h3 className="text-lg font-semibold text-slate-900 mb-4 flex items-center gap-2">
-                      <svg className="w-5 h-5 text-green-500" 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>
-                      Security Metriken
-                    </h3>
-                    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
-                      {monitoringMetrics.map((metric, idx) => (
-                        <div
-                          key={idx}
-                          className={`rounded-lg p-4 border ${
-                            metric.status === 'critical' ? 'bg-red-50 border-red-200' :
-                            metric.status === 'warning' ? 'bg-yellow-50 border-yellow-200' :
-                            'bg-green-50 border-green-200'
-                          }`}
-                        >
-                          <div className="flex justify-between items-start mb-2">
-                            <span className="text-xs text-slate-600">{metric.name}</span>
-                            <span className={`text-xs ${
-                              metric.trend === 'up' ? 'text-red-600' :
-                              metric.trend === 'down' ? 'text-green-600' :
-                              'text-slate-500'
-                            }`}>
-                              {metric.trend === 'up' ? '↑' : metric.trend === 'down' ? '↓' : '→'}
-                            </span>
-                          </div>
-                          <div className={`text-2xl font-bold ${
-                            metric.status === 'critical' ? 'text-red-700' :
-                            metric.status === 'warning' ? 'text-yellow-700' :
-                            'text-green-700'
-                          }`}>
-                            {metric.value}
-                            <span className="text-sm font-normal ml-1">{metric.unit}</span>
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-
-                  {/* Active Alerts */}
-                  <div>
-                    <h3 className="text-lg font-semibold text-slate-900 mb-4 flex items-center gap-2">
-                      <svg className="w-5 h-5 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
-                      </svg>
-                      Aktive Alerts
-                      {activeAlerts.filter(a => !a.acknowledged).length > 0 && (
-                        <span className="ml-2 px-2 py-0.5 bg-red-500 text-white text-xs rounded-full">
-                          {activeAlerts.filter(a => !a.acknowledged).length}
-                        </span>
-                      )}
-                    </h3>
-                    {activeAlerts.length === 0 ? (
-                      <div className="text-center py-8 bg-green-50 rounded-lg border border-green-200">
-                        <span className="text-4xl block mb-2">✓</span>
-                        <span className="text-green-700">Keine aktiven Security-Alerts</span>
-                      </div>
-                    ) : (
-                      <div className="space-y-2">
-                        {activeAlerts.map((alert) => (
-                          <div
-                            key={alert.id}
-                            className={`flex items-center justify-between p-4 rounded-lg border ${
-                              alert.severity === 'critical' ? 'bg-red-50 border-red-200' :
-                              alert.severity === 'high' ? 'bg-orange-50 border-orange-200' :
-                              alert.severity === 'medium' ? 'bg-yellow-50 border-yellow-200' :
-                              'bg-blue-50 border-blue-200'
-                            }`}
-                          >
-                            <div className="flex items-center gap-4">
-                              <span className={`px-2 py-1 text-xs font-semibold rounded uppercase ${
-                                alert.severity === 'critical' ? 'bg-red-100 text-red-800' :
-                                alert.severity === 'high' ? 'bg-orange-100 text-orange-800' :
-                                alert.severity === 'medium' ? 'bg-yellow-100 text-yellow-800' :
-                                'bg-blue-100 text-blue-800'
-                              }`}>
-                                {alert.severity}
-                              </span>
-                              <div>
-                                <div className="font-medium text-slate-900">{alert.title}</div>
-                                <div className="text-xs text-slate-500">
-                                  {alert.source} • {new Date(alert.timestamp).toLocaleString('de-DE')}
-                                </div>
-                              </div>
-                            </div>
-                            {!alert.acknowledged && (
-                              <button className="px-3 py-1 text-xs bg-white border border-slate-300 rounded hover:bg-slate-50">
-                                Bestaetigen
-                              </button>
-                            )}
-                          </div>
-                        ))}
-                      </div>
-                    )}
-                  </div>
-
-                  {/* Security Overview Cards */}
-                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-                    <div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
-                      <h4 className="font-medium text-slate-900 mb-3 flex items-center gap-2">
-                        <svg className="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-                        </svg>
-                        Authentifizierung
-                      </h4>
-                      <div className="space-y-2 text-sm">
-                        <div className="flex justify-between">
-                          <span className="text-slate-600">Aktive Sessions</span>
-                          <span className="font-medium">24</span>
-                        </div>
-                        <div className="flex justify-between">
-                          <span className="text-slate-600">Fehlgeschlagene Logins (24h)</span>
-                          <span className="font-medium text-green-600">0</span>
-                        </div>
-                        <div className="flex justify-between">
-                          <span className="text-slate-600">2FA-Quote</span>
-                          <span className="font-medium text-green-600">100%</span>
-                        </div>
-                      </div>
-                    </div>
-
-                    <div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
-                      <h4 className="font-medium text-slate-900 mb-3 flex items-center gap-2">
-                        <svg className="w-4 h-4 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
-                        </svg>
-                        SSL/TLS
-                      </h4>
-                      <div className="space-y-2 text-sm">
-                        <div className="flex justify-between">
-                          <span className="text-slate-600">Zertifikate</span>
-                          <span className="font-medium">5 aktiv</span>
-                        </div>
-                        <div className="flex justify-between">
-                          <span className="text-slate-600">Naechster Ablauf</span>
-                          <span className="font-medium text-green-600">45 Tage</span>
-                        </div>
-                        <div className="flex justify-between">
-                          <span className="text-slate-600">TLS Version</span>
-                          <span className="font-medium">1.3</span>
-                        </div>
-                      </div>
-                    </div>
-
-                    <div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
-                      <h4 className="font-medium text-slate-900 mb-3 flex items-center gap-2">
-                        <svg className="w-4 h-4 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-                        </svg>
-                        Firewall
-                      </h4>
-                      <div className="space-y-2 text-sm">
-                        <div className="flex justify-between">
-                          <span className="text-slate-600">Blockierte IPs (24h)</span>
-                          <span className="font-medium">12</span>
-                        </div>
-                        <div className="flex justify-between">
-                          <span className="text-slate-600">Rate Limit Hits</span>
-                          <span className="font-medium text-yellow-600">7</span>
-                        </div>
-                        <div className="flex justify-between">
-                          <span className="text-slate-600">WAF Status</span>
-                          <span className="font-medium text-green-600">Aktiv</span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Link to CI/CD for pipeline monitoring */}
-                  <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 flex items-center justify-between">
-                    <div className="flex items-center gap-3">
-                      <svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
-                      </svg>
-                      <div>
-                        <div className="font-medium text-blue-900">Pipeline Security</div>
-                        <div className="text-sm text-blue-700">Security-Scans in CI/CD Pipelines und Container-Status</div>
-                      </div>
-                    </div>
-                    <a
-                      href="/infrastructure/ci-cd"
-                      className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors"
-                    >
-                      CI/CD Dashboard →
-                    </a>
-                  </div>
-                </div>
+                <MonitoringTab monitoringMetrics={monitoringMetrics} activeAlerts={activeAlerts} />
               )}
             </>
           )}
         </div>
       </div>
 
-      {/* Documentation Section */}
-      <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
-        <div className="p-6">
-          <div className="flex justify-between items-center mb-4">
-            <h3 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
-              <svg className="w-5 h-5 text-slate-600" 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>
-              Security Dokumentation
-            </h3>
-            <button
-              onClick={() => setShowFullDocs(!showFullDocs)}
-              className="px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors flex items-center gap-2 text-sm font-medium"
-            >
-              <svg className={`w-4 h-4 transition-transform ${showFullDocs ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-              </svg>
-              {showFullDocs ? 'Weniger anzeigen' : 'Vollstaendige Dokumentation'}
-            </button>
-          </div>
-
-          {/* Short Description */}
-          <div className="prose prose-slate max-w-none">
-            <p className="text-slate-600">
-              Das Security Dashboard bietet einen zentralen Ueberblick ueber alle DevSecOps-Aktivitaeten.
-              Es integriert 6 Security-Tools fuer umfassende Code- und Infrastruktur-Sicherheit:
-              Secrets Detection, Static Analysis (SAST), Dependency Scanning und SBOM-Generierung.
-            </p>
-          </div>
-
-          {/* Tool Quick Reference */}
-          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 mt-4">
-            <div className="bg-red-50 p-3 rounded-lg text-center">
-              <span className="text-lg">🔑</span>
-              <p className="text-xs font-medium text-red-800 mt-1">Gitleaks</p>
-              <p className="text-xs text-red-600">Secrets</p>
-            </div>
-            <div className="bg-blue-50 p-3 rounded-lg text-center">
-              <span className="text-lg">🔍</span>
-              <p className="text-xs font-medium text-blue-800 mt-1">Semgrep</p>
-              <p className="text-xs text-blue-600">SAST</p>
-            </div>
-            <div className="bg-yellow-50 p-3 rounded-lg text-center">
-              <span className="text-lg">🐍</span>
-              <p className="text-xs font-medium text-yellow-800 mt-1">Bandit</p>
-              <p className="text-xs text-yellow-600">Python</p>
-            </div>
-            <div className="bg-purple-50 p-3 rounded-lg text-center">
-              <span className="text-lg">🔒</span>
-              <p className="text-xs font-medium text-purple-800 mt-1">Trivy</p>
-              <p className="text-xs text-purple-600">Container</p>
-            </div>
-            <div className="bg-green-50 p-3 rounded-lg text-center">
-              <span className="text-lg">🐛</span>
-              <p className="text-xs font-medium text-green-800 mt-1">Grype</p>
-              <p className="text-xs text-green-600">Dependencies</p>
-            </div>
-            <div className="bg-orange-50 p-3 rounded-lg text-center">
-              <span className="text-lg">📦</span>
-              <p className="text-xs font-medium text-orange-800 mt-1">Syft</p>
-              <p className="text-xs text-orange-600">SBOM</p>
-            </div>
-          </div>
-
-          {/* Full Documentation (Expandable) */}
-          {showFullDocs && (
-            <div className="mt-6 bg-slate-50 rounded-lg p-6 border border-slate-200">
-              <div className="prose prose-slate max-w-none prose-headings:text-slate-900 prose-p:text-slate-600 prose-li:text-slate-600">
-
-                <h3>1. Security Tools Uebersicht</h3>
-
-                <h4>🔑 Gitleaks - Secrets Detection</h4>
-                <p>Durchsucht die gesamte Git-Historie nach versehentlich eingecheckten Secrets wie API-Keys, Passwoertern und Tokens.</p>
-                <ul>
-                  <li><strong>Scan-Bereich:</strong> Git-Historie, Commits, Branches</li>
-                  <li><strong>Erkannte Secrets:</strong> AWS Keys, GitHub Tokens, Private Keys, Passwoerter</li>
-                  <li><strong>Ausgabe:</strong> JSON-Report mit Fundstelle, Commit-Hash, Autor</li>
-                </ul>
-
-                <h4>🔍 Semgrep - Static Application Security Testing</h4>
-                <p>Fuehrt regelbasierte statische Code-Analyse durch, um Sicherheitsluecken und Anti-Patterns zu finden.</p>
-                <ul>
-                  <li><strong>Unterstuetzte Sprachen:</strong> Python, JavaScript, TypeScript, Go, Java</li>
-                  <li><strong>Regelsets:</strong> OWASP Top 10, CWE, Security Best Practices</li>
-                  <li><strong>Findings:</strong> SQL Injection, XSS, Path Traversal, Insecure Deserialization</li>
-                </ul>
-
-                <h4>🐍 Bandit - Python Security Linter</h4>
-                <p>Spezialisierter Security-Linter fuer Python-Code mit Fokus auf haeufige Sicherheitsprobleme.</p>
-                <ul>
-                  <li><strong>Checks:</strong> Hardcoded Passwords, SQL Injection, Shell Injection</li>
-                  <li><strong>Severity Levels:</strong> LOW, MEDIUM, HIGH</li>
-                  <li><strong>Confidence:</strong> LOW, MEDIUM, HIGH</li>
-                </ul>
-
-                <h4>🔒 Trivy - Container & Filesystem Scanner</h4>
-                <p>Scannt Container-Images und Dateisysteme auf bekannte Schwachstellen (CVEs).</p>
-                <ul>
-                  <li><strong>Scan-Typen:</strong> Container Images, Filesystems, Git Repositories</li>
-                  <li><strong>Datenbanken:</strong> NVD, GitHub Advisory, Alpine SecDB, RedHat OVAL</li>
-                  <li><strong>Ausgabe:</strong> CVE-ID, Severity, Fixed Version, Description</li>
-                </ul>
-
-                <h4>🐛 Grype - Dependency Vulnerability Scanner</h4>
-                <p>Analysiert Software-Abhaengigkeiten auf bekannte Sicherheitsluecken.</p>
-                <ul>
-                  <li><strong>Package Manager:</strong> npm, pip, go mod, Maven, Gradle</li>
-                  <li><strong>Input:</strong> SBOM (CycloneDX/SPDX), Lockfiles, Container Images</li>
-                  <li><strong>Matching:</strong> CPE-basiert, Package URL (purl)</li>
-                </ul>
-
-                <h4>📦 Syft - SBOM Generator</h4>
-                <p>Erstellt Software Bill of Materials (SBOM) fuer Compliance und Supply-Chain-Security.</p>
-                <ul>
-                  <li><strong>Formate:</strong> CycloneDX (JSON/XML), SPDX, Syft JSON</li>
-                  <li><strong>Erfassung:</strong> Packages, Lizenzen, Versionen, Checksums</li>
-                  <li><strong>Compliance:</strong> NIS2, ISO 27001, DSGVO Art. 32</li>
-                </ul>
-
-                <h3>2. Severity-Klassifizierung</h3>
-                <table className="min-w-full text-sm">
-                  <thead>
-                    <tr className="border-b">
-                      <th className="text-left py-2">Severity</th>
-                      <th className="text-left py-2">CVSS Score</th>
-                      <th className="text-left py-2">Reaktionszeit</th>
-                      <th className="text-left py-2">Beispiele</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr className="border-b"><td className="py-2"><span className="px-2 py-0.5 bg-red-100 text-red-800 rounded text-xs font-semibold">CRITICAL</span></td><td>9.0 - 10.0</td><td>Sofort (24h)</td><td>RCE, Auth Bypass, Exposed Secrets</td></tr>
-                    <tr className="border-b"><td className="py-2"><span className="px-2 py-0.5 bg-orange-100 text-orange-800 rounded text-xs font-semibold">HIGH</span></td><td>7.0 - 8.9</td><td>1-3 Tage</td><td>SQL Injection, XSS, Path Traversal</td></tr>
-                    <tr className="border-b"><td className="py-2"><span className="px-2 py-0.5 bg-yellow-100 text-yellow-800 rounded text-xs font-semibold">MEDIUM</span></td><td>4.0 - 6.9</td><td>1-2 Wochen</td><td>Information Disclosure, CSRF</td></tr>
-                    <tr className="border-b"><td className="py-2"><span className="px-2 py-0.5 bg-green-100 text-green-800 rounded text-xs font-semibold">LOW</span></td><td>0.1 - 3.9</td><td>Naechster Sprint</td><td>Minor Info Leak, Best Practice</td></tr>
-                    <tr><td className="py-2"><span className="px-2 py-0.5 bg-blue-100 text-blue-800 rounded text-xs font-semibold">INFO</span></td><td>0.0</td><td>Optional</td><td>Empfehlungen, Hinweise</td></tr>
-                  </tbody>
-                </table>
-
-                <h3>3. Scan-Workflow</h3>
-                <pre className="bg-slate-800 text-slate-100 p-4 rounded-lg overflow-x-auto text-sm">
-{`┌─────────────────────────────────────────────────────────────┐
-│                    Security Scan Pipeline                    │
-├─────────────────────────────────────────────────────────────┤
-│                                                              │
-│  1. Secrets Detection (Gitleaks)                            │
-│     └── Scannt Git-Historie nach API-Keys & Credentials     │
-│                          ↓                                   │
-│  2. Static Analysis (Semgrep + Bandit)                      │
-│     └── Code-Analyse auf Sicherheitsluecken                 │
-│                          ↓                                   │
-│  3. Dependency Scan (Trivy + Grype)                         │
-│     └── CVE-Check aller Abhaengigkeiten                     │
-│                          ↓                                   │
-│  4. SBOM Generation (Syft)                                  │
-│     └── Software Bill of Materials erstellen                │
-│                          ↓                                   │
-│  5. Report & Dashboard                                       │
-│     └── Ergebnisse aggregieren und visualisieren            │
-│                                                              │
-└─────────────────────────────────────────────────────────────┘`}
-                </pre>
-
-                <h3>4. Remediation-Strategien</h3>
-
-                <h4>Bei Secrets-Findings:</h4>
-                <ol>
-                  <li>Secret sofort rotieren (neue API-Keys, Passwoerter)</li>
-                  <li>Git-Historie bereinigen (BFG Repo-Cleaner oder git filter-branch)</li>
-                  <li>Betroffene Systeme auf unauthorisierte Zugriffe pruefen</li>
-                  <li>Secret-Scanning in Pre-Commit-Hooks aktivieren</li>
-                </ol>
-
-                <h4>Bei SAST-Findings:</h4>
-                <ol>
-                  <li>Finding-Details und betroffene Code-Stelle analysieren</li>
-                  <li>Empfohlene Fix-Strategie aus Semgrep-Dokumentation anwenden</li>
-                  <li>Unit-Tests fuer den Fix schreiben</li>
-                  <li>Code-Review durch Security-erfahrenen Entwickler</li>
-                </ol>
-
-                <h4>Bei Dependency-Vulnerabilities:</h4>
-                <ol>
-                  <li>Pruefen ob ein Patch/Update verfuegbar ist</li>
-                  <li>Abhaengigkeit auf gepatchte Version aktualisieren</li>
-                  <li>Falls kein Patch: Workaround oder Alternative evaluieren</li>
-                  <li>Temporaer: WAF-Regel als Mitigation</li>
-                </ol>
-
-                <h3>5. CI/CD Integration</h3>
-                <p>Security-Scans sind in die Gitea Actions Pipeline integriert:</p>
-                <ul>
-                  <li><strong>Pre-Commit:</strong> Gitleaks (lokale Secrets-Pruefung)</li>
-                  <li><strong>Pull Request:</strong> Semgrep, Bandit, Trivy (Blocking bei Critical)</li>
-                  <li><strong>Main Branch:</strong> Full Scan + SBOM-Update</li>
-                  <li><strong>Nightly:</strong> Dependency-Update-Check</li>
-                </ul>
-
-                <h3>6. Compliance-Mapping</h3>
-                <table className="min-w-full text-sm">
-                  <thead>
-                    <tr className="border-b">
-                      <th className="text-left py-2">Regulation</th>
-                      <th className="text-left py-2">Artikel</th>
-                      <th className="text-left py-2">Erfuellt durch</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr className="border-b"><td className="py-2">DSGVO</td><td>Art. 32</td><td>Alle Security-Scans, Vulnerability Management</td></tr>
-                    <tr className="border-b"><td className="py-2">NIS2</td><td>Art. 21</td><td>SBOM, Supply-Chain-Security, Incident Response</td></tr>
-                    <tr className="border-b"><td className="py-2">ISO 27001</td><td>A.12.6</td><td>Vulnerability Management, Patch Management</td></tr>
-                    <tr><td className="py-2">OWASP</td><td>Top 10</td><td>SAST (Semgrep), Secrets Detection</td></tr>
-                  </tbody>
-                </table>
-
-                <h3>7. API-Endpunkte</h3>
-                <table className="min-w-full text-sm font-mono">
-                  <thead>
-                    <tr className="border-b">
-                      <th className="text-left py-2">Methode</th>
-                      <th className="text-left py-2">Endpoint</th>
-                      <th className="text-left py-2 font-sans">Beschreibung</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr className="border-b"><td className="py-2"><span className="bg-blue-100 text-blue-700 px-1 rounded">GET</span></td><td>/api/v1/security/tools</td><td className="font-sans">Tool-Status abrufen</td></tr>
-                    <tr className="border-b"><td className="py-2"><span className="bg-blue-100 text-blue-700 px-1 rounded">GET</span></td><td>/api/v1/security/findings</td><td className="font-sans">Alle Findings abrufen</td></tr>
-                    <tr className="border-b"><td className="py-2"><span className="bg-blue-100 text-blue-700 px-1 rounded">GET</span></td><td>/api/v1/security/summary</td><td className="font-sans">Severity-Zusammenfassung</td></tr>
-                    <tr className="border-b"><td className="py-2"><span className="bg-blue-100 text-blue-700 px-1 rounded">GET</span></td><td>/api/v1/security/history</td><td className="font-sans">Scan-Historie</td></tr>
-                    <tr className="border-b"><td className="py-2"><span className="bg-green-100 text-green-700 px-1 rounded">POST</span></td><td>/api/v1/security/scan/all</td><td className="font-sans">Full Scan starten</td></tr>
-                    <tr><td className="py-2"><span className="bg-green-100 text-green-700 px-1 rounded">POST</span></td><td>/api/v1/security/scan/[tool]</td><td className="font-sans">Einzelnes Tool scannen</td></tr>
-                  </tbody>
-                </table>
-
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
+      <DocumentationSection showFullDocs={showFullDocs} setShowFullDocs={setShowFullDocs} />
     </div>
   )
 }
diff --git a/admin-lehrer/app/(admin)/infrastructure/security/types.ts b/admin-lehrer/app/(admin)/infrastructure/security/types.ts
new file mode 100644
index 0000000..fd39158
--- /dev/null
+++ b/admin-lehrer/app/(admin)/infrastructure/security/types.ts
@@ -0,0 +1,82 @@
+export interface ToolStatus {
+  name: string
+  installed: boolean
+  version: string | null
+  last_run: string | null
+  last_findings: number
+}
+
+export interface Finding {
+  id: string
+  tool: string
+  severity: string
+  title: string
+  message: string | null
+  file: string | null
+  line: number | null
+  found_at: string
+}
+
+export interface SeveritySummary {
+  critical: number
+  high: number
+  medium: number
+  low: number
+  info: number
+  total: number
+}
+
+export interface HistoryItem {
+  timestamp: string
+  title: string
+  description: string
+  status: string
+}
+
+export type ScanType = 'secrets' | 'sast' | 'deps' | 'containers' | 'sbom' | 'all'
+
+export interface MonitoringMetric {
+  name: string
+  value: number
+  unit: string
+  status: 'ok' | 'warning' | 'critical'
+  trend: 'up' | 'down' | 'stable'
+}
+
+export interface ActiveAlert {
+  id: string
+  severity: 'critical' | 'high' | 'medium' | 'low'
+  title: string
+  source: string
+  timestamp: string
+  acknowledged: boolean
+}
+
+export type TabId = 'overview' | 'findings' | 'tools' | 'history' | 'monitoring'
+
+export const SCAN_TYPE_LABELS: Record<ScanType, string> = {
+  secrets: 'Secrets (Gitleaks)',
+  sast: 'SAST (Semgrep + Bandit)',
+  deps: 'Dependencies (Trivy + Grype)',
+  containers: 'Container',
+  sbom: 'SBOM (Syft)',
+  all: 'Full Scan',
+}
+
+export const TOOL_DESCRIPTIONS: Record<string, { icon: string; desc: string }> = {
+  gitleaks: { icon: '🔑', desc: 'Secrets Detection in Git History' },
+  semgrep: { icon: '🔍', desc: 'Static Application Security Testing (SAST)' },
+  bandit: { icon: '🐍', desc: 'Python Security Linter' },
+  trivy: { icon: '🔒', desc: 'Container & Filesystem Vulnerability Scanner' },
+  grype: { icon: '🐛', desc: 'Vulnerability Scanner for Dependencies' },
+  syft: { icon: '📦', desc: 'SBOM Generator (CycloneDX/SPDX)' },
+}
+
+export const TOOL_TO_SCAN_TYPE: Record<string, ScanType> = {
+  gitleaks: 'secrets',
+  semgrep: 'sast',
+  bandit: 'sast',
+  trivy: 'deps',
+  grype: 'deps',
+  syft: 'sbom',
+}
diff --git a/admin-lehrer/app/(admin)/infrastructure/security/useSecurityDashboard.ts b/admin-lehrer/app/(admin)/infrastructure/security/useSecurityDashboard.ts
new file mode 100644
index 0000000..b525f86
--- /dev/null
+++ b/admin-lehrer/app/(admin)/infrastructure/security/useSecurityDashboard.ts
@@ -0,0 +1,200 @@
+'use client'
+
+import { useEffect, useState, useCallback } from 'react'
+import type {
+  ToolStatus,
+  Finding,
+  SeveritySummary,
+  MonitoringMetric,
+  ActiveAlert,
+  ScanType,
+  TabId,
+} from './types'
+import { SCAN_TYPE_LABELS } from './types'
+
+const DEFAULT_METRICS: MonitoringMetric[] = [
+  { name: 'API Latency', value: 45, unit: 'ms', status: 'ok', trend: 'stable' },
+  { name: 'Auth Failures', value: 3, unit: '/h', status: 'ok', trend: 'down' },
+  { name: 'Rate Limit Hits', value: 12, unit: '/h', status: 'warning', trend: 'up' },
+  { name: 'Failed Logins', value: 0, unit: '/24h', status: 'ok', trend: 'stable' },
+  { name: 'SSL Expiry', value: 45, unit: 'days', status: 'ok', trend: 'down' },
+  { name: 'Open Ports', value: 8, unit: '', status: 'ok', trend: 'stable' },
+]
+
+export function useSecurityDashboard() {
+  const [tools, setTools] = useState<ToolStatus[]>([])
+  const [findings, setFindings] = useState<Finding[]>([])
+  const [summary, setSummary] = useState<SeveritySummary>({ critical: 0, high: 0, medium: 0, low: 0, info: 0, total: 0 })
+  const [history, setHistory] = useState<import('./types').HistoryItem[]>([])
+  const [loading, setLoading] = useState(true)
+  const [scanning, setScanning] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [activeTab, setActiveTab] = useState<TabId>('overview')
+  const [monitoringMetrics, setMonitoringMetrics] = useState<MonitoringMetric[]>([])
+  const [activeAlerts, setActiveAlerts] = useState<ActiveAlert[]>([])
+  const [severityFilter, setSeverityFilter] = useState<string | null>(null)
+  const [toolFilter, setToolFilter] = useState<string | null>(null)
+  const [showFullDocs, setShowFullDocs] = useState(false)
+  const [scanMessage, setScanMessage] = useState<string | null>(null)
+  const [lastScanTime, setLastScanTime] = useState<string | null>(null)
+
+  const fetchData = useCallback(async (showLoadingSpinner = false) => {
+    if (showLoadingSpinner) {
+      setLoading(true)
+    }
+    setError(null)
+
+    try {
+      const [toolsRes, findingsRes, summaryRes, historyRes] = await Promise.all([
+        fetch('/api/v1/security/tools'),
+        fetch('/api/v1/security/findings'),
+        fetch('/api/v1/security/summary'),
+        fetch('/api/v1/security/history'),
+      ])
+
+      if (toolsRes.ok) setTools(await toolsRes.json())
+      if (findingsRes.ok) setFindings(await findingsRes.json())
+      if (summaryRes.ok) setSummary(await summaryRes.json())
+      if (historyRes.ok) setHistory(await historyRes.json())
+
+      const [metricsRes, alertsRes] = await Promise.all([
+        fetch('/api/v1/security/monitoring/metrics'),
+        fetch('/api/v1/security/monitoring/alerts'),
+      ])
+
+      if (metricsRes.ok) {
+        setMonitoringMetrics(await metricsRes.json())
+      } else {
+        setMonitoringMetrics(DEFAULT_METRICS)
+      }
+      if (alertsRes.ok) {
+        setActiveAlerts(await alertsRes.json())
+      } else {
+        setActiveAlerts([])
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Verbindung zum Backend fehlgeschlagen')
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  // Initial load
+  useEffect(() => {
+    fetchData(true)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  // Auto-refresh every 60 seconds
+  useEffect(() => {
+    const interval = setInterval(() => fetchData(false), 60000)
+    return () => clearInterval(interval)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const runScan = async (scanType: ScanType) => {
+    console.log(`Starting scan: ${scanType}`)
+    setScanning(scanType)
+    setError(null)
+    setScanMessage(`${SCAN_TYPE_LABELS[scanType]} wird gestartet...`)
+
+    try {
+      const response = await fetch(`/api/v1/security/scan/${scanType}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+      })
+
+      console.log(`Scan response status: ${response.status}`)
+
+      if (!response.ok) {
+        const errorText = await response.text()
+        console.error(`Scan error: ${errorText}`)
+        throw new Error(`Scan fehlgeschlagen: ${response.status} - ${errorText}`)
+      }
+
+      const result = await response.json()
+      console.log('Scan result:', result)
+
+      setScanMessage(`${SCAN_TYPE_LABELS[scanType]} laeuft im Hintergrund. Ergebnisse werden in wenigen Sekunden aktualisiert.`)
+      setLastScanTime(new Date().toLocaleTimeString('de-DE'))
+
+      setTimeout(() => { fetchData(false); setScanMessage(null) }, 5000)
+      setTimeout(() => fetchData(false), 15000)
+      setTimeout(() => fetchData(false), 30000)
+    } catch (err) {
+      console.error('Scan error:', err)
+      setError(err instanceof Error ? err.message : 'Scan fehlgeschlagen - Pruefe Browser-Konsole')
+      setScanMessage(null)
+    } finally {
+      setScanning(null)
+    }
+  }
+
+  const filteredFindings = findings.filter(f => {
+    if (severityFilter && f.severity.toUpperCase() !== severityFilter.toUpperCase()) return false
+    if (toolFilter && f.tool.toLowerCase() !== toolFilter.toLowerCase()) return false
+    return true
+  })
+
+  const overallStatus = getOverallStatus(summary)
+
+  return {
+    tools,
+    findings,
+    filteredFindings,
+    summary,
+    history,
+    loading,
+    scanning,
+    error,
+    activeTab,
+    setActiveTab,
+    monitoringMetrics,
+    activeAlerts,
+    severityFilter,
+    setSeverityFilter,
+    toolFilter,
+    setToolFilter,
+    showFullDocs,
+    setShowFullDocs,
+    scanMessage,
+    lastScanTime,
+    overallStatus,
+    runScan,
+  }
+}
+
+// --- Helper functions ---
+
+function getOverallStatus(summary: SeveritySummary) {
+  if (summary.critical > 0) return { label: 'Critical Issues', color: 'bg-red-100 text-red-800' }
+  if (summary.high > 0) return { label: 'High Issues', color: 'bg-orange-100 text-orange-800' }
+  if (summary.medium > 0) return { label: 'Warnings', color: 'bg-yellow-100 text-yellow-800' }
+  return { label: 'Secure', color: 'bg-green-100 text-green-800' }
+}
+
+export function getSeverityBadge(severity: string) {
+  const base = 'px-3 py-1 rounded-full text-xs font-semibold uppercase'
+  switch (severity.toUpperCase()) {
+    case 'CRITICAL': return `${base} bg-red-100 text-red-800`
+    case 'HIGH': return `${base} bg-orange-100 text-orange-800`
+    case 'MEDIUM': return `${base} bg-yellow-100 text-yellow-800`
+    case 'LOW': return `${base} bg-green-100 text-green-800`
+    default: return `${base} bg-blue-100 text-blue-800`
+  }
+}
+
+export function getStatusBadge(installed: boolean) {
+  return installed
+    ? 'px-2 py-1 rounded text-xs font-semibold bg-green-100 text-green-800'
+    : 'px-2 py-1 rounded text-xs font-semibold bg-red-100 text-red-800'
+}
+
+export function getHistoryStatusColor(status: string) {
+  switch (status) {
+    case 'success': return 'bg-green-500'
+    case 'warning': return 'bg-yellow-500'
+    case 'error': return 'bg-red-500'
+    default: return 'bg-slate-400'
+  }
+}
diff --git a/admin-lehrer/app/(admin)/rbac/_components/CreateModal.tsx b/admin-lehrer/app/(admin)/rbac/_components/CreateModal.tsx
new file mode 100644
index 0000000..5456b31
--- /dev/null
+++ b/admin-lehrer/app/(admin)/rbac/_components/CreateModal.tsx
@@ -0,0 +1,302 @@
+'use client'
+
+import { useState } from 'react'
+import type { TabId } from '../types'
+
+interface CreateModalProps {
+  type: TabId
+  tenantId: string
+  onClose: () => void
+  onSave: (data: any) => void
+}
+
+function getTitle(type: TabId): string {
+  switch (type) {
+    case 'tenants': return 'Neuer Mandant'
+    case 'namespaces': return 'Neuer Namespace'
+    case 'roles': return 'Neue Rolle'
+    case 'users': return 'Rolle zuweisen'
+    case 'policies': return 'Neue LLM-Policy'
+  }
+}
+
+function TenantForm({ formData, setFormData }: { formData: any; setFormData: (d: any) => void }) {
+  return (
+    <>
+      <div>
+        <label className="block text-sm font-medium text-slate-700 mb-1">Name</label>
+        <input
+          type="text"
+          required
+          value={formData.name || ''}
+          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+          className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
+        />
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-slate-700 mb-1">Slug</label>
+        <input
+          type="text"
+          required
+          value={formData.slug || ''}
+          onChange={(e) => setFormData({ ...formData, slug: e.target.value })}
+          className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
+        />
+      </div>
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-1">Max Users</label>
+          <input
+            type="number"
+            value={formData.max_users || 100}
+            onChange={(e) => setFormData({ ...formData, max_users: parseInt(e.target.value) })}
+            className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-1">LLM Quota/Monat</label>
+          <input
+            type="number"
+            value={formData.llm_quota_monthly || 10000}
+            onChange={(e) => setFormData({ ...formData, llm_quota_monthly: parseInt(e.target.value) })}
+            className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
+          />
+        </div>
+      </div>
+    </>
+  )
+}
+
+function NamespaceForm({ formData, setFormData }: { formData: any; setFormData: (d: any) => void }) {
+  return (
+    <>
+      <div>
+        <label className="block text-sm font-medium text-slate-700 mb-1">Name</label>
+        <input
+          type="text"
+          required
+          value={formData.name || ''}
+          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+          className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
+        />
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-slate-700 mb-1">Slug</label>
+        <input
+          type="text"
+          required
+          value={formData.slug || ''}
+          onChange={(e) => setFormData({ ...formData, slug: e.target.value })}
+          className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
+        />
+      </div>
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-1">Isolation Level</label>
+          <select
+            value={formData.isolation_level || 'strict'}
+            onChange={(e) => setFormData({ ...formData, isolation_level: e.target.value })}
+            className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
+          >
+            <option value="strict">Strict</option>
+            <option value="standard">Standard</option>
+            <option value="relaxed">Relaxed</option>
+          </select>
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-1">Daten-Klassifizierung</label>
+          <select
+            value={formData.data_classification || 'internal'}
+            onChange={(e) => setFormData({ ...formData, data_classification: e.target.value })}
+            className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
+          >
+            <option value="public">Public</option>
+            <option value="internal">Internal</option>
+            <option value="confidential">Confidential</option>
+            <option value="restricted">Restricted</option>
+          </select>
+        </div>
+      </div>
+    </>
+  )
+}
+
+function RoleForm({ formData, setFormData }: { formData: any; setFormData: (d: any) => void }) {
+  return (
+    <>
+      <div>
+        <label className="block text-sm font-medium text-slate-700 mb-1">Name</label>
+        <input
+          type="text"
+          required
+          value={formData.name || ''}
+          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+          className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
+        />
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-slate-700 mb-1">Beschreibung</label>
+        <textarea
+          value={formData.description || ''}
+          onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+          rows={2}
+          className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
+        />
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-slate-700 mb-1">Permissions (komma-separiert)</label>
+        <input
+          type="text"
+          value={formData.permissions?.join(', ') || ''}
+          onChange={(e) => setFormData({ ...formData, permissions: e.target.value.split(',').map((s: string) => s.trim()) })}
+          placeholder="compliance:read, llm:query"
+          className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
+        />
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-slate-700 mb-1">Hierarchie-Level (niedriger = hoeher)</label>
+        <input
+          type="number"
+          value={formData.hierarchy_level || 100}
+          onChange={(e) => setFormData({ ...formData, hierarchy_level: parseInt(e.target.value) })}
+          className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
+        />
+      </div>
+    </>
+  )
+}
+
+function PolicyForm({ formData, setFormData }: { formData: any; setFormData: (d: any) => void }) {
+  return (
+    <>
+      <div>
+        <label className="block text-sm font-medium text-slate-700 mb-1">Name</label>
+        <input
+          type="text"
+          required
+          value={formData.name || ''}
+          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+          className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
+        />
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-slate-700 mb-1">Erlaubte Daten-Kategorien</label>
+        <input
+          type="text"
+          value={formData.allowed_data_categories?.join(', ') || ''}
+          onChange={(e) => setFormData({ ...formData, allowed_data_categories: e.target.value.split(',').map((s: string) => s.trim()) })}
+          placeholder="salary, compensation, finance"
+          className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
+        />
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-slate-700 mb-1">Blockierte Daten-Kategorien</label>
+        <input
+          type="text"
+          value={formData.blocked_data_categories?.join(', ') || ''}
+          onChange={(e) => setFormData({ ...formData, blocked_data_categories: e.target.value.split(',').map((s: string) => s.trim()) })}
+          placeholder="health, personal, salary"
+          className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
+        />
+      </div>
+      <div className="flex items-center gap-4">
+        <label className="flex items-center gap-2">
+          <input
+            type="checkbox"
+            checked={formData.require_pii_redaction ?? true}
+            onChange={(e) => setFormData({ ...formData, require_pii_redaction: e.target.checked })}
+            className="rounded border-slate-300"
+          />
+          <span className="text-sm text-slate-700">PII-Redaktion erforderlich</span>
+        </label>
+        {formData.require_pii_redaction && (
+          <select
+            value={formData.pii_redaction_level || 'strict'}
+            onChange={(e) => setFormData({ ...formData, pii_redaction_level: e.target.value })}
+            className="px-3 py-1 border rounded-lg text-sm"
+          >
+            <option value="strict">Strict</option>
+            <option value="moderate">Moderate</option>
+            <option value="minimal">Minimal</option>
+          </select>
+        )}
+      </div>
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-1">Max Tokens/Request</label>
+          <input
+            type="number"
+            value={formData.max_tokens_per_request || 4000}
+            onChange={(e) => setFormData({ ...formData, max_tokens_per_request: parseInt(e.target.value) })}
+            className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-1">Max Requests/Tag</label>
+          <input
+            type="number"
+            value={formData.max_requests_per_day || 1000}
+            onChange={(e) => setFormData({ ...formData, max_requests_per_day: parseInt(e.target.value) })}
+            className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
+          />
+        </div>
+      </div>
+    </>
+  )
+}
+
+export function CreateModal({ type, tenantId, onClose, onSave }: CreateModalProps) {
+  const [formData, setFormData] = useState<any>({})
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    onSave(formData)
+  }
+
+  const renderForm = () => {
+    switch (type) {
+      case 'tenants':
+        return <TenantForm formData={formData} setFormData={setFormData} />
+      case 'namespaces':
+        return <NamespaceForm formData={formData} setFormData={setFormData} />
+      case 'roles':
+        return <RoleForm formData={formData} setFormData={setFormData} />
+      case 'policies':
+        return <PolicyForm formData={formData} setFormData={setFormData} />
+      default:
+        return <p>Nicht unterstuetzt</p>
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white rounded-xl shadow-xl w-full max-w-lg">
+        <div className="p-6 border-b">
+          <h3 className="text-lg font-semibold text-slate-900">{getTitle(type)}</h3>
+        </div>
+
+        <form onSubmit={handleSubmit}>
+          <div className="p-6 space-y-4">
+            {renderForm()}
+          </div>
+
+          <div className="p-6 border-t bg-slate-50 flex justify-end gap-3">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-2 text-slate-600 hover:text-slate-800"
+            >
+              Abbrechen
+            </button>
+            <button
+              type="submit"
+              className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700"
+            >
+              Erstellen
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/rbac/_components/NamespacesTable.tsx b/admin-lehrer/app/(admin)/rbac/_components/NamespacesTable.tsx
new file mode 100644
index 0000000..0ba924c
--- /dev/null
+++ b/admin-lehrer/app/(admin)/rbac/_components/NamespacesTable.tsx
@@ -0,0 +1,62 @@
+'use client'
+
+import type { Namespace } from '../types'
+import { ISOLATION_COLORS, DATA_CLASSIFICATION_COLORS } from '../types'
+
+interface NamespacesTableProps {
+  namespaces: Namespace[]
+  onEdit: (n: Namespace) => void
+}
+
+export function NamespacesTable({ namespaces, onEdit }: NamespacesTableProps) {
+  if (namespaces.length === 0) {
+    return (
+      <div className="text-center py-12 text-slate-500">
+        <svg className="w-16 h-16 mx-auto text-slate-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
+        </svg>
+        <p>Keine Namespaces vorhanden. Waehlen Sie zuerst einen Mandanten.</p>
+      </div>
+    )
+  }
+
+  return (
+    <table className="w-full">
+      <thead className="bg-slate-50 border-b">
+        <tr>
+          <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Name</th>
+          <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Slug</th>
+          <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">Isolation</th>
+          <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">Klassifizierung</th>
+          <th className="px-4 py-3 text-right text-xs font-medium text-slate-500 uppercase">Aktionen</th>
+        </tr>
+      </thead>
+      <tbody className="divide-y">
+        {namespaces.map(ns => (
+          <tr key={ns.id} className="hover:bg-slate-50">
+            <td className="px-4 py-3 font-medium text-slate-900">{ns.name}</td>
+            <td className="px-4 py-3 font-mono text-slate-600">{ns.slug}</td>
+            <td className="px-4 py-3 text-center">
+              <span className={`px-2 py-1 text-xs rounded-full ${ISOLATION_COLORS[ns.isolation_level] || 'bg-slate-100'}`}>
+                {ns.isolation_level}
+              </span>
+            </td>
+            <td className="px-4 py-3 text-center">
+              <span className={`px-2 py-1 text-xs rounded-full ${DATA_CLASSIFICATION_COLORS[ns.data_classification] || 'bg-slate-100'}`}>
+                {ns.data_classification}
+              </span>
+            </td>
+            <td className="px-4 py-3 text-right">
+              <button
+                onClick={() => onEdit(ns)}
+                className="text-sm text-primary-600 hover:text-primary-700"
+              >
+                Bearbeiten
+              </button>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/rbac/_components/PoliciesTable.tsx b/admin-lehrer/app/(admin)/rbac/_components/PoliciesTable.tsx
new file mode 100644
index 0000000..e59a08d
--- /dev/null
+++ b/admin-lehrer/app/(admin)/rbac/_components/PoliciesTable.tsx
@@ -0,0 +1,79 @@
+'use client'
+
+import type { LLMPolicy } from '../types'
+
+interface PoliciesTableProps {
+  policies: LLMPolicy[]
+  onEdit: (p: LLMPolicy) => void
+}
+
+export function PoliciesTable({ policies, onEdit }: PoliciesTableProps) {
+  if (policies.length === 0) {
+    return (
+      <div className="text-center py-12 text-slate-500">
+        <svg className="w-16 h-16 mx-auto text-slate-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} 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>
+        <p>Keine LLM-Policies vorhanden</p>
+      </div>
+    )
+  }
+
+  return (
+    <table className="w-full">
+      <thead className="bg-slate-50 border-b">
+        <tr>
+          <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Name</th>
+          <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Erlaubte Kategorien</th>
+          <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Blockierte Kategorien</th>
+          <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">PII Redaction</th>
+          <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">Max Tokens</th>
+          <th className="px-4 py-3 text-right text-xs font-medium text-slate-500 uppercase">Aktionen</th>
+        </tr>
+      </thead>
+      <tbody className="divide-y">
+        {policies.map(policy => (
+          <tr key={policy.id} className="hover:bg-slate-50">
+            <td className="px-4 py-3 font-medium text-slate-900">{policy.name}</td>
+            <td className="px-4 py-3">
+              <div className="flex flex-wrap gap-1">
+                {(policy.allowed_data_categories || []).map((c, i) => (
+                  <span key={i} className="px-2 py-0.5 text-xs bg-green-100 text-green-700 rounded">
+                    {c}
+                  </span>
+                ))}
+              </div>
+            </td>
+            <td className="px-4 py-3">
+              <div className="flex flex-wrap gap-1">
+                {(policy.blocked_data_categories || []).map((c, i) => (
+                  <span key={i} className="px-2 py-0.5 text-xs bg-red-100 text-red-700 rounded">
+                    {c}
+                  </span>
+                ))}
+              </div>
+            </td>
+            <td className="px-4 py-3 text-center">
+              <span className={`px-2 py-1 text-xs rounded-full ${
+                policy.require_pii_redaction ? 'bg-yellow-100 text-yellow-700' : 'bg-slate-100 text-slate-500'
+              }`}>
+                {policy.require_pii_redaction ? policy.pii_redaction_level : 'aus'}
+              </span>
+            </td>
+            <td className="px-4 py-3 text-center text-slate-600">
+              {policy.max_tokens_per_request?.toLocaleString()}
+            </td>
+            <td className="px-4 py-3 text-right">
+              <button
+                onClick={() => onEdit(policy)}
+                className="text-sm text-primary-600 hover:text-primary-700"
+              >
+                Bearbeiten
+              </button>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/rbac/_components/RolesTable.tsx b/admin-lehrer/app/(admin)/rbac/_components/RolesTable.tsx
new file mode 100644
index 0000000..ac852c5
--- /dev/null
+++ b/admin-lehrer/app/(admin)/rbac/_components/RolesTable.tsx
@@ -0,0 +1,75 @@
+'use client'
+
+import type { Role } from '../types'
+
+interface RolesTableProps {
+  roles: Role[]
+  onEdit: (r: Role) => void
+}
+
+export function RolesTable({ roles, onEdit }: RolesTableProps) {
+  if (roles.length === 0) {
+    return (
+      <div className="text-center py-12 text-slate-500">
+        <svg className="w-16 h-16 mx-auto text-slate-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+        </svg>
+        <p>Keine Rollen vorhanden</p>
+      </div>
+    )
+  }
+
+  return (
+    <table className="w-full">
+      <thead className="bg-slate-50 border-b">
+        <tr>
+          <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Name</th>
+          <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Beschreibung</th>
+          <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">Typ</th>
+          <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">Hierarchie</th>
+          <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Permissions</th>
+          <th className="px-4 py-3 text-right text-xs font-medium text-slate-500 uppercase">Aktionen</th>
+        </tr>
+      </thead>
+      <tbody className="divide-y">
+        {roles.map(role => (
+          <tr key={role.id} className="hover:bg-slate-50">
+            <td className="px-4 py-3 font-medium text-slate-900">{role.name}</td>
+            <td className="px-4 py-3 text-slate-600 truncate max-w-xs">{role.description || '-'}</td>
+            <td className="px-4 py-3 text-center">
+              <span className={`px-2 py-1 text-xs rounded-full ${
+                role.is_system_role ? 'bg-indigo-100 text-indigo-700' : 'bg-slate-100 text-slate-600'
+              }`}>
+                {role.is_system_role ? 'System' : 'Custom'}
+              </span>
+            </td>
+            <td className="px-4 py-3 text-center text-slate-600">{role.hierarchy_level}</td>
+            <td className="px-4 py-3">
+              <div className="flex flex-wrap gap-1 max-w-md">
+                {(role.permissions || []).slice(0, 3).map((p, i) => (
+                  <span key={i} className="px-2 py-0.5 text-xs bg-slate-100 text-slate-600 rounded">
+                    {p}
+                  </span>
+                ))}
+                {(role.permissions || []).length > 3 && (
+                  <span className="px-2 py-0.5 text-xs bg-slate-200 text-slate-600 rounded">
+                    +{role.permissions.length - 3}
+                  </span>
+                )}
+              </div>
+            </td>
+            <td className="px-4 py-3 text-right">
+              <button
+                onClick={() => onEdit(role)}
+                className="text-sm text-primary-600 hover:text-primary-700"
+                disabled={role.is_system_role}
+              >
+                {role.is_system_role ? 'Ansehen' : 'Bearbeiten'}
+              </button>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/rbac/_components/TenantsTable.tsx b/admin-lehrer/app/(admin)/rbac/_components/TenantsTable.tsx
new file mode 100644
index 0000000..aa58376
--- /dev/null
+++ b/admin-lehrer/app/(admin)/rbac/_components/TenantsTable.tsx
@@ -0,0 +1,60 @@
+'use client'
+
+import type { Tenant } from '../types'
+import { STATUS_COLORS } from '../types'
+
+interface TenantsTableProps {
+  tenants: Tenant[]
+  onEdit: (t: Tenant) => void
+}
+
+export function TenantsTable({ tenants, onEdit }: TenantsTableProps) {
+  if (tenants.length === 0) {
+    return (
+      <div className="text-center py-12 text-slate-500">
+        <svg className="w-16 h-16 mx-auto text-slate-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+        </svg>
+        <p>Keine Mandanten vorhanden</p>
+      </div>
+    )
+  }
+
+  return (
+    <table className="w-full">
+      <thead className="bg-slate-50 border-b">
+        <tr>
+          <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Name</th>
+          <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Slug</th>
+          <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">Status</th>
+          <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">Max Users</th>
+          <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">LLM Quota</th>
+          <th className="px-4 py-3 text-right text-xs font-medium text-slate-500 uppercase">Aktionen</th>
+        </tr>
+      </thead>
+      <tbody className="divide-y">
+        {tenants.map(tenant => (
+          <tr key={tenant.id} className="hover:bg-slate-50">
+            <td className="px-4 py-3 font-medium text-slate-900">{tenant.name}</td>
+            <td className="px-4 py-3 font-mono text-slate-600">{tenant.slug}</td>
+            <td className="px-4 py-3 text-center">
+              <span className={`px-2 py-1 text-xs rounded-full ${STATUS_COLORS[tenant.status] || 'bg-slate-100'}`}>
+                {tenant.status}
+              </span>
+            </td>
+            <td className="px-4 py-3 text-center text-slate-600">{tenant.max_users}</td>
+            <td className="px-4 py-3 text-center text-slate-600">{tenant.llm_quota_monthly?.toLocaleString()}</td>
+            <td className="px-4 py-3 text-right">
+              <button
+                onClick={() => onEdit(tenant)}
+                className="text-sm text-primary-600 hover:text-primary-700"
+              >
+                Bearbeiten
+              </button>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/rbac/_components/UserRolesTable.tsx b/admin-lehrer/app/(admin)/rbac/_components/UserRolesTable.tsx
new file mode 100644
index 0000000..952b059
--- /dev/null
+++ b/admin-lehrer/app/(admin)/rbac/_components/UserRolesTable.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+import type { UserRole } from '../types'
+
+interface UserRolesTableProps {
+  userRoles: UserRole[]
+  onEdit: (ur: UserRole) => void
+}
+
+export function UserRolesTable({ userRoles, onEdit }: UserRolesTableProps) {
+  return (
+    <div className="text-center py-12 text-slate-500">
+      <svg className="w-16 h-16 mx-auto text-slate-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
+      </svg>
+      <p className="mb-2">Benutzer-Rollen Zuweisung</p>
+      <p className="text-sm text-slate-400">
+        Waehlen Sie einen Benutzer aus, um dessen Rollen zu verwalten.
+      </p>
+    </div>
+  )
+}
diff --git a/admin-lehrer/app/(admin)/rbac/page.tsx b/admin-lehrer/app/(admin)/rbac/page.tsx
index 7981930..ae42f50 100644
--- a/admin-lehrer/app/(admin)/rbac/page.tsx
+++ b/admin-lehrer/app/(admin)/rbac/page.tsx
@@ -11,295 +11,36 @@
  * - LLM access policies
  */
 
-import { useState, useEffect, useCallback } from 'react'
 import { PagePurpose } from '@/components/common/PagePurpose'
-
-// Types
-interface Tenant {
-  id: string
-  name: string
-  slug: string
-  settings: Record<string, any>
-  max_users: number
-  llm_quota_monthly: number
-  status: string
-  created_at: string
-}
-
-interface Namespace {
-  id: string
-  tenant_id: string
-  name: string
-  slug: string
-  parent_namespace_id: string | null
-  isolation_level: string
-  data_classification: string
-  metadata: Record<string, any>
-  created_at: string
-}
-
-interface Role {
-  id: string
-  tenant_id: string | null
-  name: string
-  description: string
-  permissions: string[]
-  is_system_role: boolean
-  hierarchy_level: number
-  created_at: string
-}
-
-interface UserRole {
-  id: string
-  user_id: string
-  role_id: string
-  role_name?: string
-  tenant_id: string
-  namespace_id: string | null
-  namespace_name?: string
-  granted_by: string
-  expires_at: string | null
-  created_at: string
-}
-
-interface LLMPolicy {
-  id: string
-  tenant_id: string
-  namespace_id: string | null
-  name: string
-  allowed_data_categories: string[]
-  blocked_data_categories: string[]
-  require_pii_redaction: boolean
-  pii_redaction_level: string
-  allowed_models: string[]
-  max_tokens_per_request: number
-  max_requests_per_day: number
-  created_at: string
-}
-
-// Tab configuration
-type TabId = 'tenants' | 'namespaces' | 'roles' | 'users' | 'policies'
-
-const TABS: { id: TabId; label: string; icon: string }[] = [
-  { id: 'tenants', label: 'Mandanten', icon: 'M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4' },
-  { id: 'namespaces', label: 'Namespaces', icon: 'M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4' },
-  { id: 'roles', label: 'Rollen', icon: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z' },
-  { id: 'users', label: 'Benutzer-Rollen', icon: 'M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z' },
-  { id: 'policies', label: 'LLM-Policies', icon: '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' },
-]
-
-const STATUS_COLORS: Record<string, string> = {
-  active: 'bg-green-100 text-green-700',
-  inactive: 'bg-slate-100 text-slate-500',
-  suspended: 'bg-red-100 text-red-700',
-}
-
-const ISOLATION_COLORS: Record<string, string> = {
-  strict: 'bg-red-100 text-red-700',
-  standard: 'bg-yellow-100 text-yellow-700',
-  relaxed: 'bg-green-100 text-green-700',
-}
-
-const DATA_CLASSIFICATION_COLORS: Record<string, string> = {
-  restricted: 'bg-red-100 text-red-700',
-  confidential: 'bg-orange-100 text-orange-700',
-  internal: 'bg-yellow-100 text-yellow-700',
-  public: 'bg-green-100 text-green-700',
-}
-
-// SDK requests are proxied through nginx on the same origin (no CORS issues)
-const SDK_BASE_URL = ''
+import { useRbacData } from './useRbacData'
+import { TABS } from './types'
+import type { Tenant, Namespace, Role, LLMPolicy } from './types'
+import { TenantsTable } from './_components/TenantsTable'
+import { NamespacesTable } from './_components/NamespacesTable'
+import { RolesTable } from './_components/RolesTable'
+import { UserRolesTable } from './_components/UserRolesTable'
+import { PoliciesTable } from './_components/PoliciesTable'
+import { CreateModal } from './_components/CreateModal'
 
 export default function RBACPage() {
-  const [activeTab, setActiveTab] = useState<TabId>('tenants')
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-
-  // Data states
-  const [tenants, setTenants] = useState<Tenant[]>([])
-  const [namespaces, setNamespaces] = useState<Namespace[]>([])
-  const [roles, setRoles] = useState<Role[]>([])
-  const [userRoles, setUserRoles] = useState<UserRole[]>([])
-  const [policies, setPolicies] = useState<LLMPolicy[]>([])
-
-  // Filter states
-  const [selectedTenantId, setSelectedTenantId] = useState<string>('')
-  const [searchTerm, setSearchTerm] = useState('')
-
-  // Modal states
-  const [showCreateModal, setShowCreateModal] = useState(false)
-  const [editItem, setEditItem] = useState<any>(null)
-
-  // Load data based on active tab
-  const loadData = useCallback(async () => {
-    setLoading(true)
-    setError(null)
-
-    try {
-      const headers: Record<string, string> = {
-        'Content-Type': 'application/json',
-      }
-
-      if (selectedTenantId) {
-        headers['X-Tenant-ID'] = selectedTenantId
-      }
-
-      switch (activeTab) {
-        case 'tenants': {
-          const res = await fetch(`${SDK_BASE_URL}/sdk/v1/tenants`, { headers })
-          if (res.ok) {
-            const data = await res.json()
-            setTenants(data.tenants || [])
-          }
-          break
-        }
-        case 'namespaces': {
-          if (!selectedTenantId) {
-            setNamespaces([])
-            break
-          }
-          const res = await fetch(`${SDK_BASE_URL}/sdk/v1/tenants/${selectedTenantId}/namespaces`, { headers })
-          if (res.ok) {
-            const data = await res.json()
-            setNamespaces(data.namespaces || [])
-          }
-          break
-        }
-        case 'roles': {
-          const res = await fetch(`${SDK_BASE_URL}/sdk/v1/roles`, { headers })
-          if (res.ok) {
-            const data = await res.json()
-            setRoles(data.roles || [])
-          }
-          break
-        }
-        case 'users': {
-          // This would need a user ID - for now show empty
-          setUserRoles([])
-          break
-        }
-        case 'policies': {
-          const res = await fetch(`${SDK_BASE_URL}/sdk/v1/llm/policies`, { headers })
-          if (res.ok) {
-            const data = await res.json()
-            setPolicies(data.policies || [])
-          }
-          break
-        }
-      }
-    } catch (err) {
-      console.error('Failed to load data:', err)
-      setError('Verbindung zum AI Compliance SDK fehlgeschlagen. Stellen Sie sicher, dass der SDK-Service laeuft.')
-    } finally {
-      setLoading(false)
-    }
-  }, [activeTab, selectedTenantId])
-
-  useEffect(() => {
-    loadData()
-  }, [loadData])
-
-  // Load tenants on mount for the filter
-  useEffect(() => {
-    const loadTenants = async () => {
-      try {
-        const res = await fetch(`${SDK_BASE_URL}/sdk/v1/tenants`)
-        if (res.ok) {
-          const data = await res.json()
-          setTenants(data.tenants || [])
-          if (data.tenants?.length > 0 && !selectedTenantId) {
-            setSelectedTenantId(data.tenants[0].id)
-          }
-        }
-      } catch (err) {
-        console.error('Failed to load tenants:', err)
-      }
-    }
-    loadTenants()
-  }, [])
-
-  const handleCreate = async (data: any) => {
-    try {
-      const headers: Record<string, string> = {
-        'Content-Type': 'application/json',
-      }
-
-      if (selectedTenantId) {
-        headers['X-Tenant-ID'] = selectedTenantId
-      }
-
-      let endpoint = ''
-      switch (activeTab) {
-        case 'tenants':
-          endpoint = `${SDK_BASE_URL}/sdk/v1/tenants`
-          break
-        case 'namespaces':
-          endpoint = `${SDK_BASE_URL}/sdk/v1/tenants/${selectedTenantId}/namespaces`
-          break
-        case 'roles':
-          endpoint = `${SDK_BASE_URL}/sdk/v1/roles`
-          break
-        case 'policies':
-          endpoint = `${SDK_BASE_URL}/sdk/v1/llm/policies`
-          break
-      }
-
-      const res = await fetch(endpoint, {
-        method: 'POST',
-        headers,
-        body: JSON.stringify(data),
-      })
-
-      if (res.ok) {
-        setShowCreateModal(false)
-        loadData()
-      } else {
-        const errData = await res.json()
-        alert(`Fehler: ${errData.error || 'Unbekannter Fehler'}`)
-      }
-    } catch (err) {
-      console.error('Create failed:', err)
-      alert('Erstellen fehlgeschlagen')
-    }
-  }
-
-  const filteredData = () => {
-    const term = searchTerm.toLowerCase()
-
-    switch (activeTab) {
-      case 'tenants':
-        return tenants.filter(t =>
-          t.name.toLowerCase().includes(term) ||
-          t.slug.toLowerCase().includes(term)
-        )
-      case 'namespaces':
-        return namespaces.filter(n =>
-          n.name.toLowerCase().includes(term) ||
-          n.slug.toLowerCase().includes(term)
-        )
-      case 'roles':
-        return roles.filter(r =>
-          r.name.toLowerCase().includes(term) ||
-          r.description?.toLowerCase().includes(term)
-        )
-      case 'policies':
-        return policies.filter(p =>
-          p.name.toLowerCase().includes(term)
-        )
-      default:
-        return []
-    }
-  }
-
-  // Statistics
-  const stats = {
-    tenants: tenants.length,
-    namespaces: namespaces.length,
-    roles: roles.length,
-    systemRoles: roles.filter(r => r.is_system_role).length,
-    policies: policies.length,
-    activeUsers: userRoles.length,
-  }
+  const {
+    activeTab,
+    setActiveTab,
+    loading,
+    error,
+    tenants,
+    userRoles,
+    selectedTenantId,
+    setSelectedTenantId,
+    searchTerm,
+    setSearchTerm,
+    showCreateModal,
+    setShowCreateModal,
+    setEditItem,
+    handleCreate,
+    filteredData,
+    stats,
+  } = useRbacData()
 
   return (
     <div className="min-h-screen bg-slate-50 p-6">
@@ -323,7 +64,6 @@ export default function RBACPage() {
         </div>
       </div>
 
-      {/* Page Purpose */}
       <PagePurpose
         title="RBAC Management"
         purpose="Verwalten Sie Multi-Tenant RBAC (Role-Based Access Control) mit Namespace-Isolation. Definieren Sie wer welche KI-Funktionen nutzen darf und welche Daten analysiert werden duerfen. CFO kann Gehaltsdaten analysieren, Entwickler nicht."
@@ -340,33 +80,22 @@ export default function RBACPage() {
 
       {/* Statistics */}
       <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-6">
-        <div className="bg-white rounded-xl p-4 border border-slate-200">
-          <p className="text-sm text-slate-500">Mandanten</p>
-          <p className="text-2xl font-bold text-slate-900">{stats.tenants}</p>
-        </div>
-        <div className="bg-white rounded-xl p-4 border border-blue-200">
-          <p className="text-sm text-blue-600">Namespaces</p>
-          <p className="text-2xl font-bold text-blue-700">{stats.namespaces}</p>
-        </div>
-        <div className="bg-white rounded-xl p-4 border border-purple-200">
-          <p className="text-sm text-purple-600">Rollen</p>
-          <p className="text-2xl font-bold text-purple-700">{stats.roles}</p>
-        </div>
-        <div className="bg-white rounded-xl p-4 border border-indigo-200">
-          <p className="text-sm text-indigo-600">System-Rollen</p>
-          <p className="text-2xl font-bold text-indigo-700">{stats.systemRoles}</p>
-        </div>
-        <div className="bg-white rounded-xl p-4 border border-teal-200">
-          <p className="text-sm text-teal-600">LLM-Policies</p>
-          <p className="text-2xl font-bold text-teal-700">{stats.policies}</p>
-        </div>
-        <div className="bg-white rounded-xl p-4 border border-green-200">
-          <p className="text-sm text-green-600">Zuweisungen</p>
-          <p className="text-2xl font-bold text-green-700">{stats.activeUsers}</p>
-        </div>
+        {[
+          { label: 'Mandanten', value: stats.tenants, border: 'border-slate-200', text: 'text-slate-500', bold: 'text-slate-900' },
+          { label: 'Namespaces', value: stats.namespaces, border: 'border-blue-200', text: 'text-blue-600', bold: 'text-blue-700' },
+          { label: 'Rollen', value: stats.roles, border: 'border-purple-200', text: 'text-purple-600', bold: 'text-purple-700' },
+          { label: 'System-Rollen', value: stats.systemRoles, border: 'border-indigo-200', text: 'text-indigo-600', bold: 'text-indigo-700' },
+          { label: 'LLM-Policies', value: stats.policies, border: 'border-teal-200', text: 'text-teal-600', bold: 'text-teal-700' },
+          { label: 'Zuweisungen', value: stats.activeUsers, border: 'border-green-200', text: 'text-green-600', bold: 'text-green-700' },
+        ].map(s => (
+          <div key={s.label} className={`bg-white rounded-xl p-4 border ${s.border}`}>
+            <p className={`text-sm ${s.text}`}>{s.label}</p>
+            <p className={`text-2xl font-bold ${s.bold}`}>{s.value}</p>
+          </div>
+        ))}
       </div>
 
-      {/* Tabs */}
+      {/* Tabs + Content */}
       <div className="bg-white rounded-xl shadow-sm border mb-6">
         <div className="border-b">
           <nav className="flex -mb-px">
@@ -425,45 +154,11 @@ export default function RBACPage() {
             </div>
           ) : (
             <>
-              {/* Tenants Tab */}
-              {activeTab === 'tenants' && (
-                <TenantsTable
-                  tenants={filteredData() as Tenant[]}
-                  onEdit={setEditItem}
-                />
-              )}
-
-              {/* Namespaces Tab */}
-              {activeTab === 'namespaces' && (
-                <NamespacesTable
-                  namespaces={filteredData() as Namespace[]}
-                  onEdit={setEditItem}
-                />
-              )}
-
-              {/* Roles Tab */}
-              {activeTab === 'roles' && (
-                <RolesTable
-                  roles={filteredData() as Role[]}
-                  onEdit={setEditItem}
-                />
-              )}
-
-              {/* User Roles Tab */}
-              {activeTab === 'users' && (
-                <UserRolesTable
-                  userRoles={userRoles}
-                  onEdit={setEditItem}
-                />
-              )}
-
-              {/* Policies Tab */}
-              {activeTab === 'policies' && (
-                <PoliciesTable
-                  policies={filteredData() as LLMPolicy[]}
-                  onEdit={setEditItem}
-                />
-              )}
+              {activeTab === 'tenants' && <TenantsTable tenants={filteredData() as Tenant[]} onEdit={setEditItem} />}
+              {activeTab === 'namespaces' && <NamespacesTable namespaces={filteredData() as Namespace[]} onEdit={setEditItem} />}
+              {activeTab === 'roles' && <RolesTable roles={filteredData() as Role[]} onEdit={setEditItem} />}
+              {activeTab === 'users' && <UserRolesTable userRoles={userRoles} onEdit={setEditItem} />}
+              {activeTab === 'policies' && <PoliciesTable policies={filteredData() as LLMPolicy[]} onEdit={setEditItem} />}
             </>
           )}
         </div>
@@ -481,554 +176,3 @@ export default function RBACPage() {
     </div>
   )
 }
-
-// Tenants Table Component
-function TenantsTable({ tenants, onEdit }: { tenants: Tenant[]; onEdit: (t: Tenant) => void }) {
-  if (tenants.length === 0) {
-    return (
-      <div className="text-center py-12 text-slate-500">
-        <svg className="w-16 h-16 mx-auto text-slate-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
-        </svg>
-        <p>Keine Mandanten vorhanden</p>
-      </div>
-    )
-  }
-
-  return (
-    <table className="w-full">
-      <thead className="bg-slate-50 border-b">
-        <tr>
-          <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Name</th>
-          <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Slug</th>
-          <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">Status</th>
-          <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">Max Users</th>
-          <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">LLM Quota</th>
-          <th className="px-4 py-3 text-right text-xs font-medium text-slate-500 uppercase">Aktionen</th>
-        </tr>
-      </thead>
-      <tbody className="divide-y">
-        {tenants.map(tenant => (
-          <tr key={tenant.id} className="hover:bg-slate-50">
-            <td className="px-4 py-3 font-medium text-slate-900">{tenant.name}</td>
-            <td className="px-4 py-3 font-mono text-slate-600">{tenant.slug}</td>
-            <td className="px-4 py-3 text-center">
-              <span className={`px-2 py-1 text-xs rounded-full ${STATUS_COLORS[tenant.status] || 'bg-slate-100'}`}>
-                {tenant.status}
-              </span>
-            </td>
-            <td className="px-4 py-3 text-center text-slate-600">{tenant.max_users}</td>
-            <td className="px-4 py-3 text-center text-slate-600">{tenant.llm_quota_monthly?.toLocaleString()}</td>
-            <td className="px-4 py-3 text-right">
-              <button
-                onClick={() => onEdit(tenant)}
-                className="text-sm text-primary-600 hover:text-primary-700"
-              >
-                Bearbeiten
-              </button>
-            </td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  )
-}
-
-// Namespaces Table Component
-function NamespacesTable({ namespaces, onEdit }: { namespaces: Namespace[]; onEdit: (n: Namespace) => void }) {
-  if (namespaces.length === 0) {
-    return (
-      <div className="text-center py-12 text-slate-500">
-        <svg className="w-16 h-16 mx-auto text-slate-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
-        </svg>
-        <p>Keine Namespaces vorhanden. Waehlen Sie zuerst einen Mandanten.</p>
-      </div>
-    )
-  }
-
-  return (
-    <table className="w-full">
-      <thead className="bg-slate-50 border-b">
-        <tr>
-          <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Name</th>
-          <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Slug</th>
-          <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">Isolation</th>
-          <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">Klassifizierung</th>
-          <th className="px-4 py-3 text-right text-xs font-medium text-slate-500 uppercase">Aktionen</th>
-        </tr>
-      </thead>
-      <tbody className="divide-y">
-        {namespaces.map(ns => (
-          <tr key={ns.id} className="hover:bg-slate-50">
-            <td className="px-4 py-3 font-medium text-slate-900">{ns.name}</td>
-            <td className="px-4 py-3 font-mono text-slate-600">{ns.slug}</td>
-            <td className="px-4 py-3 text-center">
-              <span className={`px-2 py-1 text-xs rounded-full ${ISOLATION_COLORS[ns.isolation_level] || 'bg-slate-100'}`}>
-                {ns.isolation_level}
-              </span>
-            </td>
-            <td className="px-4 py-3 text-center">
-              <span className={`px-2 py-1 text-xs rounded-full ${DATA_CLASSIFICATION_COLORS[ns.data_classification] || 'bg-slate-100'}`}>
-                {ns.data_classification}
-              </span>
-            </td>
-            <td className="px-4 py-3 text-right">
-              <button
-                onClick={() => onEdit(ns)}
-                className="text-sm text-primary-600 hover:text-primary-700"
-              >
-                Bearbeiten
-              </button>
-            </td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  )
-}
-
-// Roles Table Component
-function RolesTable({ roles, onEdit }: { roles: Role[]; onEdit: (r: Role) => void }) {
-  if (roles.length === 0) {
-    return (
-      <div className="text-center py-12 text-slate-500">
-        <svg className="w-16 h-16 mx-auto text-slate-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
-        </svg>
-        <p>Keine Rollen vorhanden</p>
-      </div>
-    )
-  }
-
-  return (
-    <table className="w-full">
-      <thead className="bg-slate-50 border-b">
-        <tr>
-          <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Name</th>
-          <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Beschreibung</th>
-          <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">Typ</th>
-          <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">Hierarchie</th>
-          <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Permissions</th>
-          <th className="px-4 py-3 text-right text-xs font-medium text-slate-500 uppercase">Aktionen</th>
-        </tr>
-      </thead>
-      <tbody className="divide-y">
-        {roles.map(role => (
-          <tr key={role.id} className="hover:bg-slate-50">
-            <td className="px-4 py-3 font-medium text-slate-900">{role.name}</td>
-            <td className="px-4 py-3 text-slate-600 truncate max-w-xs">{role.description || '-'}</td>
-            <td className="px-4 py-3 text-center">
-              <span className={`px-2 py-1 text-xs rounded-full ${
-                role.is_system_role ? 'bg-indigo-100 text-indigo-700' : 'bg-slate-100 text-slate-600'
-              }`}>
-                {role.is_system_role ? 'System' : 'Custom'}
-              </span>
-            </td>
-            <td className="px-4 py-3 text-center text-slate-600">{role.hierarchy_level}</td>
-            <td className="px-4 py-3">
-              <div className="flex flex-wrap gap-1 max-w-md">
-                {(role.permissions || []).slice(0, 3).map((p, i) => (
-                  <span key={i} className="px-2 py-0.5 text-xs bg-slate-100 text-slate-600 rounded">
-                    {p}
-                  </span>
-                ))}
-                {(role.permissions || []).length > 3 && (
-                  <span className="px-2 py-0.5 text-xs bg-slate-200 text-slate-600 rounded">
-                    +{role.permissions.length - 3}
-                  </span>
-                )}
-              </div>
-            </td>
-            <td className="px-4 py-3 text-right">
-              <button
-                onClick={() => onEdit(role)}
-                className="text-sm text-primary-600 hover:text-primary-700"
-                disabled={role.is_system_role}
-              >
-                {role.is_system_role ? 'Ansehen' : 'Bearbeiten'}
-              </button>
-            </td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  )
-}
-
-// User Roles Table Component
-function UserRolesTable({ userRoles, onEdit }: { userRoles: UserRole[]; onEdit: (ur: UserRole) => void }) {
-  return (
-    <div className="text-center py-12 text-slate-500">
-      <svg className="w-16 h-16 mx-auto text-slate-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
-      </svg>
-      <p className="mb-2">Benutzer-Rollen Zuweisung</p>
-      <p className="text-sm text-slate-400">
-        Waehlen Sie einen Benutzer aus, um dessen Rollen zu verwalten.
-      </p>
-    </div>
-  )
-}
-
-// Policies Table Component
-function PoliciesTable({ policies, onEdit }: { policies: LLMPolicy[]; onEdit: (p: LLMPolicy) => void }) {
-  if (policies.length === 0) {
-    return (
-      <div className="text-center py-12 text-slate-500">
-        <svg className="w-16 h-16 mx-auto text-slate-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} 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>
-        <p>Keine LLM-Policies vorhanden</p>
-      </div>
-    )
-  }
-
-  return (
-    <table className="w-full">
-      <thead className="bg-slate-50 border-b">
-        <tr>
-          <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Name</th>
-          <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Erlaubte Kategorien</th>
-          <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Blockierte Kategorien</th>
-          <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">PII Redaction</th>
-          <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">Max Tokens</th>
-          <th className="px-4 py-3 text-right text-xs font-medium text-slate-500 uppercase">Aktionen</th>
-        </tr>
-      </thead>
-      <tbody className="divide-y">
-        {policies.map(policy => (
-          <tr key={policy.id} className="hover:bg-slate-50">
-            <td className="px-4 py-3 font-medium text-slate-900">{policy.name}</td>
-            <td className="px-4 py-3">
-              <div className="flex flex-wrap gap-1">
-                {(policy.allowed_data_categories || []).map((c, i) => (
-                  <span key={i} className="px-2 py-0.5 text-xs bg-green-100 text-green-700 rounded">
-                    {c}
-                  </span>
-                ))}
-              </div>
-            </td>
-            <td className="px-4 py-3">
-              <div className="flex flex-wrap gap-1">
-                {(policy.blocked_data_categories || []).map((c, i) => (
-                  <span key={i} className="px-2 py-0.5 text-xs bg-red-100 text-red-700 rounded">
-                    {c}
-                  </span>
-                ))}
-              </div>
-            </td>
-            <td className="px-4 py-3 text-center">
-              <span className={`px-2 py-1 text-xs rounded-full ${
-                policy.require_pii_redaction ? 'bg-yellow-100 text-yellow-700' : 'bg-slate-100 text-slate-500'
-              }`}>
-                {policy.require_pii_redaction ? policy.pii_redaction_level : 'aus'}
-              </span>
-            </td>
-            <td className="px-4 py-3 text-center text-slate-600">
-              {policy.max_tokens_per_request?.toLocaleString()}
-            </td>
-            <td className="px-4 py-3 text-right">
-              <button
-                onClick={() => onEdit(policy)}
-                className="text-sm text-primary-600 hover:text-primary-700"
-              >
-                Bearbeiten
-              </button>
-            </td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  )
-}
-
-// Create Modal Component
-function CreateModal({
-  type,
-  tenantId,
-  onClose,
-  onSave,
-}: {
-  type: TabId
-  tenantId: string
-  onClose: () => void
-  onSave: (data: any) => void
-}) {
-  const [formData, setFormData] = useState<any>({})
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-    onSave(formData)
-  }
-
-  const renderForm = () => {
-    switch (type) {
-      case 'tenants':
-        return (
-          <>
-            <div>
-              <label className="block text-sm font-medium text-slate-700 mb-1">Name</label>
-              <input
-                type="text"
-                required
-                value={formData.name || ''}
-                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-                className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-slate-700 mb-1">Slug</label>
-              <input
-                type="text"
-                required
-                value={formData.slug || ''}
-                onChange={(e) => setFormData({ ...formData, slug: e.target.value })}
-                className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
-              />
-            </div>
-            <div className="grid grid-cols-2 gap-4">
-              <div>
-                <label className="block text-sm font-medium text-slate-700 mb-1">Max Users</label>
-                <input
-                  type="number"
-                  value={formData.max_users || 100}
-                  onChange={(e) => setFormData({ ...formData, max_users: parseInt(e.target.value) })}
-                  className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
-                />
-              </div>
-              <div>
-                <label className="block text-sm font-medium text-slate-700 mb-1">LLM Quota/Monat</label>
-                <input
-                  type="number"
-                  value={formData.llm_quota_monthly || 10000}
-                  onChange={(e) => setFormData({ ...formData, llm_quota_monthly: parseInt(e.target.value) })}
-                  className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
-                />
-              </div>
-            </div>
-          </>
-        )
-
-      case 'namespaces':
-        return (
-          <>
-            <div>
-              <label className="block text-sm font-medium text-slate-700 mb-1">Name</label>
-              <input
-                type="text"
-                required
-                value={formData.name || ''}
-                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-                className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-slate-700 mb-1">Slug</label>
-              <input
-                type="text"
-                required
-                value={formData.slug || ''}
-                onChange={(e) => setFormData({ ...formData, slug: e.target.value })}
-                className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
-              />
-            </div>
-            <div className="grid grid-cols-2 gap-4">
-              <div>
-                <label className="block text-sm font-medium text-slate-700 mb-1">Isolation Level</label>
-                <select
-                  value={formData.isolation_level || 'strict'}
-                  onChange={(e) => setFormData({ ...formData, isolation_level: e.target.value })}
-                  className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
-                >
-                  <option value="strict">Strict</option>
-                  <option value="standard">Standard</option>
-                  <option value="relaxed">Relaxed</option>
-                </select>
-              </div>
-              <div>
-                <label className="block text-sm font-medium text-slate-700 mb-1">Daten-Klassifizierung</label>
-                <select
-                  value={formData.data_classification || 'internal'}
-                  onChange={(e) => setFormData({ ...formData, data_classification: e.target.value })}
-                  className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
-                >
-                  <option value="public">Public</option>
-                  <option value="internal">Internal</option>
-                  <option value="confidential">Confidential</option>
-                  <option value="restricted">Restricted</option>
-                </select>
-              </div>
-            </div>
-          </>
-        )
-
-      case 'roles':
-        return (
-          <>
-            <div>
-              <label className="block text-sm font-medium text-slate-700 mb-1">Name</label>
-              <input
-                type="text"
-                required
-                value={formData.name || ''}
-                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-                className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-slate-700 mb-1">Beschreibung</label>
-              <textarea
-                value={formData.description || ''}
-                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
-                rows={2}
-                className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-slate-700 mb-1">Permissions (komma-separiert)</label>
-              <input
-                type="text"
-                value={formData.permissions?.join(', ') || ''}
-                onChange={(e) => setFormData({ ...formData, permissions: e.target.value.split(',').map((s: string) => s.trim()) })}
-                placeholder="compliance:read, llm:query"
-                className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-slate-700 mb-1">Hierarchie-Level (niedriger = hoeher)</label>
-              <input
-                type="number"
-                value={formData.hierarchy_level || 100}
-                onChange={(e) => setFormData({ ...formData, hierarchy_level: parseInt(e.target.value) })}
-                className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
-              />
-            </div>
-          </>
-        )
-
-      case 'policies':
-        return (
-          <>
-            <div>
-              <label className="block text-sm font-medium text-slate-700 mb-1">Name</label>
-              <input
-                type="text"
-                required
-                value={formData.name || ''}
-                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-                className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-slate-700 mb-1">Erlaubte Daten-Kategorien</label>
-              <input
-                type="text"
-                value={formData.allowed_data_categories?.join(', ') || ''}
-                onChange={(e) => setFormData({ ...formData, allowed_data_categories: e.target.value.split(',').map((s: string) => s.trim()) })}
-                placeholder="salary, compensation, finance"
-                className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-slate-700 mb-1">Blockierte Daten-Kategorien</label>
-              <input
-                type="text"
-                value={formData.blocked_data_categories?.join(', ') || ''}
-                onChange={(e) => setFormData({ ...formData, blocked_data_categories: e.target.value.split(',').map((s: string) => s.trim()) })}
-                placeholder="health, personal, salary"
-                className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
-              />
-            </div>
-            <div className="flex items-center gap-4">
-              <label className="flex items-center gap-2">
-                <input
-                  type="checkbox"
-                  checked={formData.require_pii_redaction ?? true}
-                  onChange={(e) => setFormData({ ...formData, require_pii_redaction: e.target.checked })}
-                  className="rounded border-slate-300"
-                />
-                <span className="text-sm text-slate-700">PII-Redaktion erforderlich</span>
-              </label>
-              {formData.require_pii_redaction && (
-                <select
-                  value={formData.pii_redaction_level || 'strict'}
-                  onChange={(e) => setFormData({ ...formData, pii_redaction_level: e.target.value })}
-                  className="px-3 py-1 border rounded-lg text-sm"
-                >
-                  <option value="strict">Strict</option>
-                  <option value="moderate">Moderate</option>
-                  <option value="minimal">Minimal</option>
-                </select>
-              )}
-            </div>
-            <div className="grid grid-cols-2 gap-4">
-              <div>
-                <label className="block text-sm font-medium text-slate-700 mb-1">Max Tokens/Request</label>
-                <input
-                  type="number"
-                  value={formData.max_tokens_per_request || 4000}
-                  onChange={(e) => setFormData({ ...formData, max_tokens_per_request: parseInt(e.target.value) })}
-                  className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
-                />
-              </div>
-              <div>
-                <label className="block text-sm font-medium text-slate-700 mb-1">Max Requests/Tag</label>
-                <input
-                  type="number"
-                  value={formData.max_requests_per_day || 1000}
-                  onChange={(e) => setFormData({ ...formData, max_requests_per_day: parseInt(e.target.value) })}
-                  className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
-                />
-              </div>
-            </div>
-          </>
-        )
-
-      default:
-        return <p>Nicht unterstuetzt</p>
-    }
-  }
-
-  const getTitle = () => {
-    switch (type) {
-      case 'tenants': return 'Neuer Mandant'
-      case 'namespaces': return 'Neuer Namespace'
-      case 'roles': return 'Neue Rolle'
-      case 'users': return 'Rolle zuweisen'
-      case 'policies': return 'Neue LLM-Policy'
-    }
-  }
-
-  return (
-    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-      <div className="bg-white rounded-xl shadow-xl w-full max-w-lg">
-        <div className="p-6 border-b">
-          <h3 className="text-lg font-semibold text-slate-900">{getTitle()}</h3>
-        </div>
-
-        <form onSubmit={handleSubmit}>
-          <div className="p-6 space-y-4">
-            {renderForm()}
-          </div>
-
-          <div className="p-6 border-t bg-slate-50 flex justify-end gap-3">
-            <button
-              type="button"
-              onClick={onClose}
-              className="px-4 py-2 text-slate-600 hover:text-slate-800"
-            >
-              Abbrechen
-            </button>
-            <button
-              type="submit"
-              className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700"
-            >
-              Erstellen
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  )
-}
diff --git a/admin-lehrer/app/(admin)/rbac/types.ts b/admin-lehrer/app/(admin)/rbac/types.ts
new file mode 100644
index 0000000..06a6a2b
--- /dev/null
+++ b/admin-lehrer/app/(admin)/rbac/types.ts
@@ -0,0 +1,97 @@
+/**
+ * RBAC Management Types & Constants
+ */
+
+export interface Tenant {
+  id: string
+  name: string
+  slug: string
+  settings: Record<string, any>
+  max_users: number
+  llm_quota_monthly: number
+  status: string
+  created_at: string
+}
+
+export interface Namespace {
+  id: string
+  tenant_id: string
+  name: string
+  slug: string
+  parent_namespace_id: string | null
+  isolation_level: string
+  data_classification: string
+  metadata: Record<string, any>
+  created_at: string
+}
+
+export interface Role {
+  id: string
+  tenant_id: string | null
+  name: string
+  description: string
+  permissions: string[]
+  is_system_role: boolean
+  hierarchy_level: number
+  created_at: string
+}
+
+export interface UserRole {
+  id: string
+  user_id: string
+  role_id: string
+  role_name?: string
+  tenant_id: string
+  namespace_id: string | null
+  namespace_name?: string
+  granted_by: string
+  expires_at: string | null
+  created_at: string
+}
+
+export interface LLMPolicy {
+  id: string
+  tenant_id: string
+  namespace_id: string | null
+  name: string
+  allowed_data_categories: string[]
+  blocked_data_categories: string[]
+  require_pii_redaction: boolean
+  pii_redaction_level: string
+  allowed_models: string[]
+  max_tokens_per_request: number
+  max_requests_per_day: number
+  created_at: string
+}
+
+export type TabId = 'tenants' | 'namespaces' | 'roles' | 'users' | 'policies'
+
+export const TABS: { id: TabId; label: string; icon: string }[] = [
+  { id: 'tenants', label: 'Mandanten', icon: 'M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4' },
+  { id: 'namespaces', label: 'Namespaces', icon: 'M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4' },
+  { id: 'roles', label: 'Rollen', icon: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z' },
+  { id: 'users', label: 'Benutzer-Rollen', icon: 'M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z' },
+  { id: 'policies', label: 'LLM-Policies', icon: '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' },
+]
+
+export const STATUS_COLORS: Record<string, string> = {
+  active: 'bg-green-100 text-green-700',
+  inactive: 'bg-slate-100 text-slate-500',
+  suspended: 'bg-red-100 text-red-700',
+}
+
+export const ISOLATION_COLORS: Record<string, string> = {
+  strict: 'bg-red-100 text-red-700',
+  standard: 'bg-yellow-100 text-yellow-700',
+  relaxed: 'bg-green-100 text-green-700',
+}
+
+export const DATA_CLASSIFICATION_COLORS: Record<string, string> = {
+  restricted: 'bg-red-100 text-red-700',
+  confidential: 'bg-orange-100 text-orange-700',
+  internal: 'bg-yellow-100 text-yellow-700',
+  public: 'bg-green-100 text-green-700',
+}
+
+// SDK requests are proxied through nginx on the same origin (no CORS issues)
+export const SDK_BASE_URL = ''
diff --git a/admin-lehrer/app/(admin)/rbac/useRbacData.ts b/admin-lehrer/app/(admin)/rbac/useRbacData.ts
new file mode 100644
index 0000000..5eb0bc8
--- /dev/null
+++ b/admin-lehrer/app/(admin)/rbac/useRbacData.ts
@@ -0,0 +1,225 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import type { TabId, Tenant, Namespace, Role, UserRole, LLMPolicy } from './types'
+import { SDK_BASE_URL } from './types'
+
+export interface RbacStats {
+  tenants: number
+  namespaces: number
+  roles: number
+  systemRoles: number
+  policies: number
+  activeUsers: number
+}
+
+export function useRbacData() {
+  const [activeTab, setActiveTab] = useState<TabId>('tenants')
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  // Data states
+  const [tenants, setTenants] = useState<Tenant[]>([])
+  const [namespaces, setNamespaces] = useState<Namespace[]>([])
+  const [roles, setRoles] = useState<Role[]>([])
+  const [userRoles, setUserRoles] = useState<UserRole[]>([])
+  const [policies, setPolicies] = useState<LLMPolicy[]>([])
+
+  // Filter states
+  const [selectedTenantId, setSelectedTenantId] = useState<string>('')
+  const [searchTerm, setSearchTerm] = useState('')
+
+  // Modal states
+  const [showCreateModal, setShowCreateModal] = useState(false)
+  const [editItem, setEditItem] = useState<any>(null)
+
+  // Load data based on active tab
+  const loadData = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+
+    try {
+      const headers: Record<string, string> = {
+        'Content-Type': 'application/json',
+      }
+
+      if (selectedTenantId) {
+        headers['X-Tenant-ID'] = selectedTenantId
+      }
+
+      switch (activeTab) {
+        case 'tenants': {
+          const res = await fetch(`${SDK_BASE_URL}/sdk/v1/tenants`, { headers })
+          if (res.ok) {
+            const data = await res.json()
+            setTenants(data.tenants || [])
+          }
+          break
+        }
+        case 'namespaces': {
+          if (!selectedTenantId) {
+            setNamespaces([])
+            break
+          }
+          const res = await fetch(`${SDK_BASE_URL}/sdk/v1/tenants/${selectedTenantId}/namespaces`, { headers })
+          if (res.ok) {
+            const data = await res.json()
+            setNamespaces(data.namespaces || [])
+          }
+          break
+        }
+        case 'roles': {
+          const res = await fetch(`${SDK_BASE_URL}/sdk/v1/roles`, { headers })
+          if (res.ok) {
+            const data = await res.json()
+            setRoles(data.roles || [])
+          }
+          break
+        }
+        case 'users': {
+          // This would need a user ID - for now show empty
+          setUserRoles([])
+          break
+        }
+        case 'policies': {
+          const res = await fetch(`${SDK_BASE_URL}/sdk/v1/llm/policies`, { headers })
+          if (res.ok) {
+            const data = await res.json()
+            setPolicies(data.policies || [])
+          }
+          break
+        }
+      }
+    } catch (err) {
+      console.error('Failed to load data:', err)
+      setError('Verbindung zum AI Compliance SDK fehlgeschlagen. Stellen Sie sicher, dass der SDK-Service laeuft.')
+    } finally {
+      setLoading(false)
+    }
+  }, [activeTab, selectedTenantId])
+
+  useEffect(() => {
+    loadData()
+  }, [loadData])
+
+  // Load tenants on mount for the filter
+  useEffect(() => {
+    const loadTenants = async () => {
+      try {
+        const res = await fetch(`${SDK_BASE_URL}/sdk/v1/tenants`)
+        if (res.ok) {
+          const data = await res.json()
+          setTenants(data.tenants || [])
+          if (data.tenants?.length > 0 && !selectedTenantId) {
+            setSelectedTenantId(data.tenants[0].id)
+          }
+        }
+      } catch (err) {
+        console.error('Failed to load tenants:', err)
+      }
+    }
+    loadTenants()
+  }, [])
+
+  const handleCreate = async (data: any) => {
+    try {
+      const headers: Record<string, string> = {
+        'Content-Type': 'application/json',
+      }
+
+      if (selectedTenantId) {
+        headers['X-Tenant-ID'] = selectedTenantId
+      }
+
+      let endpoint = ''
+      switch (activeTab) {
+        case 'tenants':
+          endpoint = `${SDK_BASE_URL}/sdk/v1/tenants`
+          break
+        case 'namespaces':
+          endpoint = `${SDK_BASE_URL}/sdk/v1/tenants/${selectedTenantId}/namespaces`
+          break
+        case 'roles':
+          endpoint = `${SDK_BASE_URL}/sdk/v1/roles`
+          break
+        case 'policies':
+          endpoint = `${SDK_BASE_URL}/sdk/v1/llm/policies`
+          break
+      }
+
+      const res = await fetch(endpoint, {
+        method: 'POST',
+        headers,
+        body: JSON.stringify(data),
+      })
+
+      if (res.ok) {
+        setShowCreateModal(false)
+        loadData()
+      } else {
+        const errData = await res.json()
+        alert(`Fehler: ${errData.error || 'Unbekannter Fehler'}`)
+      }
+    } catch (err) {
+      console.error('Create failed:', err)
+      alert('Erstellen fehlgeschlagen')
+    }
+  }
+
+  const filteredData = () => {
+    const term = searchTerm.toLowerCase()
+
+    switch (activeTab) {
+      case 'tenants':
+        return tenants.filter(t =>
+          t.name.toLowerCase().includes(term) ||
+          t.slug.toLowerCase().includes(term)
+        )
+      case 'namespaces':
+        return namespaces.filter(n =>
+          n.name.toLowerCase().includes(term) ||
+          n.slug.toLowerCase().includes(term)
+        )
+      case 'roles':
+        return roles.filter(r =>
+          r.name.toLowerCase().includes(term) ||
+          r.description?.toLowerCase().includes(term)
+        )
+      case 'policies':
+        return policies.filter(p =>
+          p.name.toLowerCase().includes(term)
+        )
+      default:
+        return []
+    }
+  }
+
+  const stats: RbacStats = {
+    tenants: tenants.length,
+    namespaces: namespaces.length,
+    roles: roles.length,
+    systemRoles: roles.filter(r => r.is_system_role).length,
+    policies: policies.length,
+    activeUsers: userRoles.length,
+  }
+
+  return {
+    activeTab,
+    setActiveTab,
+    loading,
+    error,
+    tenants,
+    userRoles,
+    selectedTenantId,
+    setSelectedTenantId,
+    searchTerm,
+    setSearchTerm,
+    showCreateModal,
+    setShowCreateModal,
+    editItem,
+    setEditItem,
+    handleCreate,
+    filteredData,
+    stats,
+  }
+}
diff --git a/admin-lehrer/components/ai/LossChart.tsx b/admin-lehrer/components/ai/LossChart.tsx
new file mode 100644
index 0000000..46dffb4
--- /dev/null
+++ b/admin-lehrer/components/ai/LossChart.tsx
@@ -0,0 +1,226 @@
+/**
+ * LossChart & ProgressRing Components
+ *
+ * SVG-based visualizations for training metrics:
+ * - LossChart: Line chart for training/validation loss curves
+ * - ProgressRing: Circular progress indicator
+ */
+
+'use client'
+
+import type { TrainingDataPoint } from './training-metrics-types'
+
+/**
+ * Simple line chart component for loss visualization
+ */
+export function LossChart({
+  data,
+  height = 200,
+  className = ''
+}: {
+  data: TrainingDataPoint[]
+  height?: number
+  className?: string
+}) {
+  if (data.length === 0) {
+    return (
+      <div className={`flex items-center justify-center bg-slate-50 rounded-lg ${className}`} style={{ height }}>
+        <span className="text-slate-400 text-sm">Keine Daten</span>
+      </div>
+    )
+  }
+
+  // Calculate bounds
+  const losses = data.map(d => d.loss)
+  const valLosses = data.filter(d => d.val_loss !== undefined).map(d => d.val_loss!)
+  const allLosses = [...losses, ...valLosses]
+  const minLoss = Math.min(...allLosses) * 0.9
+  const maxLoss = Math.max(...allLosses) * 1.1
+  const lossRange = maxLoss - minLoss || 1
+
+  // SVG dimensions
+  const width = 400
+  const padding = { top: 20, right: 20, bottom: 30, left: 50 }
+  const chartWidth = width - padding.left - padding.right
+  const chartHeight = height - padding.top - padding.bottom
+
+  // Generate path for loss line
+  const generatePath = (values: number[]) => {
+    if (values.length === 0) return ''
+    return values
+      .map((loss, idx) => {
+        const x = padding.left + (idx / (values.length - 1 || 1)) * chartWidth
+        const y = padding.top + chartHeight - ((loss - minLoss) / lossRange) * chartHeight
+        return `${idx === 0 ? 'M' : 'L'} ${x} ${y}`
+      })
+      .join(' ')
+  }
+
+  const lossPath = generatePath(losses)
+  const valLossPath = valLosses.length > 0 ? generatePath(valLosses) : ''
+
+  // Y-axis labels
+  const yLabels = [maxLoss, (maxLoss + minLoss) / 2, minLoss].map(v => v.toFixed(3))
+
+  return (
+    <svg viewBox={`0 0 ${width} ${height}`} className={`w-full ${className}`} preserveAspectRatio="xMidYMid meet">
+      {/* Grid lines */}
+      {[0, 0.5, 1].map((ratio, idx) => (
+        <line
+          key={idx}
+          x1={padding.left}
+          y1={padding.top + chartHeight * ratio}
+          x2={width - padding.right}
+          y2={padding.top + chartHeight * ratio}
+          stroke="#e2e8f0"
+          strokeWidth="1"
+        />
+      ))}
+
+      {/* Y-axis labels */}
+      {yLabels.map((label, idx) => (
+        <text
+          key={idx}
+          x={padding.left - 5}
+          y={padding.top + (idx / 2) * chartHeight + 4}
+          textAnchor="end"
+          className="fill-slate-500 text-xs"
+        >
+          {label}
+        </text>
+      ))}
+
+      {/* X-axis label */}
+      <text
+        x={width / 2}
+        y={height - 5}
+        textAnchor="middle"
+        className="fill-slate-500 text-xs"
+      >
+        Epoche / Schritt
+      </text>
+
+      {/* Y-axis label */}
+      <text
+        x={12}
+        y={height / 2}
+        textAnchor="middle"
+        className="fill-slate-500 text-xs"
+        transform={`rotate(-90, 12, ${height / 2})`}
+      >
+        Loss
+      </text>
+
+      {/* Training loss line */}
+      <path
+        d={lossPath}
+        fill="none"
+        stroke="#8b5cf6"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+
+      {/* Validation loss line (dashed) */}
+      {valLossPath && (
+        <path
+          d={valLossPath}
+          fill="none"
+          stroke="#22c55e"
+          strokeWidth="2"
+          strokeDasharray="5,5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      )}
+
+      {/* Data points */}
+      {data.map((point, idx) => {
+        const x = padding.left + (idx / (data.length - 1 || 1)) * chartWidth
+        const y = padding.top + chartHeight - ((point.loss - minLoss) / lossRange) * chartHeight
+        return (
+          <circle
+            key={idx}
+            cx={x}
+            cy={y}
+            r="3"
+            fill="#8b5cf6"
+            className="hover:r-4 transition-all"
+          >
+            <title>Epoch {point.epoch}, Step {point.step}: {point.loss.toFixed(4)}</title>
+          </circle>
+        )
+      })}
+
+      {/* Legend */}
+      <g transform={`translate(${padding.left}, ${height - 25})`}>
+        <line x1="0" y1="0" x2="20" y2="0" stroke="#8b5cf6" strokeWidth="2" />
+        <text x="25" y="4" className="fill-slate-600 text-xs">Training Loss</text>
+
+        {valLossPath && (
+          <>
+            <line x1="120" y1="0" x2="140" y2="0" stroke="#22c55e" strokeWidth="2" strokeDasharray="5,5" />
+            <text x="145" y="4" className="fill-slate-600 text-xs">Val Loss</text>
+          </>
+        )}
+      </g>
+    </svg>
+  )
+}
+
+/**
+ * Progress ring component
+ */
+export function ProgressRing({
+  progress,
+  size = 80,
+  strokeWidth = 6,
+  className = ''
+}: {
+  progress: number
+  size?: number
+  strokeWidth?: number
+  className?: string
+}) {
+  const radius = (size - strokeWidth) / 2
+  const circumference = radius * 2 * Math.PI
+  const offset = circumference - (progress / 100) * circumference
+
+  return (
+    <svg width={size} height={size} className={className}>
+      {/* Background circle */}
+      <circle
+        cx={size / 2}
+        cy={size / 2}
+        r={radius}
+        fill="none"
+        stroke="#e2e8f0"
+        strokeWidth={strokeWidth}
+      />
+      {/* Progress circle */}
+      <circle
+        cx={size / 2}
+        cy={size / 2}
+        r={radius}
+        fill="none"
+        stroke="#8b5cf6"
+        strokeWidth={strokeWidth}
+        strokeDasharray={circumference}
+        strokeDashoffset={offset}
+        strokeLinecap="round"
+        transform={`rotate(-90 ${size / 2} ${size / 2})`}
+        className="transition-all duration-300"
+      />
+      {/* Center text */}
+      <text
+        x={size / 2}
+        y={size / 2}
+        textAnchor="middle"
+        dominantBaseline="middle"
+        className="fill-slate-900 font-bold text-lg"
+      >
+        {progress.toFixed(0)}%
+      </text>
+    </svg>
+  )
+}
diff --git a/admin-lehrer/components/ai/TrainingMetrics.tsx b/admin-lehrer/components/ai/TrainingMetrics.tsx
index e6ed993..e39f5f1 100644
--- a/admin-lehrer/components/ai/TrainingMetrics.tsx
+++ b/admin-lehrer/components/ai/TrainingMetrics.tsx
@@ -9,344 +9,15 @@
 
 'use client'
 
-import { useState, useEffect, useCallback, useRef } from 'react'
+import { useState, useEffect } from 'react'
+import type { TrainingStatus, TrainingMetricsProps, TrainingDataPoint } from './training-metrics-types'
+import { formatDuration } from './training-metrics-types'
+import { useTrainingMetricsSSE } from './useTrainingMetricsSSE'
+import { LossChart, ProgressRing } from './LossChart'
 
-// Training data point for charts
-interface TrainingDataPoint {
-  epoch: number
-  step: number
-  loss: number
-  val_loss?: number
-  learning_rate: number
-  timestamp: number
-}
-
-// Training job status
-interface TrainingStatus {
-  job_id: string
-  status: 'queued' | 'running' | 'completed' | 'failed' | 'cancelled'
-  progress: number // 0-100
-  current_epoch: number
-  total_epochs: number
-  current_step: number
-  total_steps: number
-  elapsed_time_ms: number
-  estimated_remaining_ms: number
-  metrics: {
-    loss: number
-    val_loss?: number
-    accuracy?: number
-    learning_rate: number
-  }
-  history: TrainingDataPoint[]
-  error?: string
-}
-
-interface TrainingMetricsProps {
-  /** API base URL */
-  apiBase: string
-  /** Job ID to track (null for simulation mode) */
-  jobId?: string | null
-  /** Simulate training progress for demo */
-  simulateMode?: boolean
-  /** Custom class names */
-  className?: string
-  /** Callback when training completes */
-  onComplete?: (status: TrainingStatus) => void
-  /** Callback on error */
-  onError?: (error: string) => void
-}
-
-/**
- * Custom hook for SSE-based training metrics
- */
-export function useTrainingMetricsSSE(
-  apiBase: string,
-  jobId: string | null,
-  onUpdate?: (status: TrainingStatus) => void
-) {
-  const [status, setStatus] = useState<TrainingStatus | null>(null)
-  const [connected, setConnected] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const eventSourceRef = useRef<EventSource | null>(null)
-
-  useEffect(() => {
-    if (!jobId) return
-
-    const url = `${apiBase}/api/klausur/trocr/training/metrics/stream?job_id=${jobId}`
-    const eventSource = new EventSource(url)
-    eventSourceRef.current = eventSource
-
-    eventSource.onopen = () => {
-      setConnected(true)
-      setError(null)
-    }
-
-    eventSource.onmessage = (event) => {
-      try {
-        const data = JSON.parse(event.data) as TrainingStatus
-        setStatus(data)
-        onUpdate?.(data)
-
-        // Close connection when training is done
-        if (data.status === 'completed' || data.status === 'failed' || data.status === 'cancelled') {
-          eventSource.close()
-          setConnected(false)
-        }
-      } catch (e) {
-        console.error('Failed to parse SSE message:', e)
-      }
-    }
-
-    eventSource.onerror = () => {
-      setError('Verbindung zum Server verloren')
-      setConnected(false)
-      eventSource.close()
-    }
-
-    return () => {
-      eventSource.close()
-      setConnected(false)
-    }
-  }, [apiBase, jobId, onUpdate])
-
-  const disconnect = useCallback(() => {
-    eventSourceRef.current?.close()
-    setConnected(false)
-  }, [])
-
-  return { status, connected, error, disconnect }
-}
-
-/**
- * Simple line chart component for loss visualization
- */
-function LossChart({
-  data,
-  height = 200,
-  className = ''
-}: {
-  data: TrainingDataPoint[]
-  height?: number
-  className?: string
-}) {
-  if (data.length === 0) {
-    return (
-      <div className={`flex items-center justify-center bg-slate-50 rounded-lg ${className}`} style={{ height }}>
-        <span className="text-slate-400 text-sm">Keine Daten</span>
-      </div>
-    )
-  }
-
-  // Calculate bounds
-  const losses = data.map(d => d.loss)
-  const valLosses = data.filter(d => d.val_loss !== undefined).map(d => d.val_loss!)
-  const allLosses = [...losses, ...valLosses]
-  const minLoss = Math.min(...allLosses) * 0.9
-  const maxLoss = Math.max(...allLosses) * 1.1
-  const lossRange = maxLoss - minLoss || 1
-
-  // SVG dimensions
-  const width = 400
-  const padding = { top: 20, right: 20, bottom: 30, left: 50 }
-  const chartWidth = width - padding.left - padding.right
-  const chartHeight = height - padding.top - padding.bottom
-
-  // Generate path for loss line
-  const generatePath = (values: number[]) => {
-    if (values.length === 0) return ''
-    return values
-      .map((loss, idx) => {
-        const x = padding.left + (idx / (values.length - 1 || 1)) * chartWidth
-        const y = padding.top + chartHeight - ((loss - minLoss) / lossRange) * chartHeight
-        return `${idx === 0 ? 'M' : 'L'} ${x} ${y}`
-      })
-      .join(' ')
-  }
-
-  const lossPath = generatePath(losses)
-  const valLossPath = valLosses.length > 0 ? generatePath(valLosses) : ''
-
-  // Y-axis labels
-  const yLabels = [maxLoss, (maxLoss + minLoss) / 2, minLoss].map(v => v.toFixed(3))
-
-  return (
-    <svg viewBox={`0 0 ${width} ${height}`} className={`w-full ${className}`} preserveAspectRatio="xMidYMid meet">
-      {/* Grid lines */}
-      {[0, 0.5, 1].map((ratio, idx) => (
-        <line
-          key={idx}
-          x1={padding.left}
-          y1={padding.top + chartHeight * ratio}
-          x2={width - padding.right}
-          y2={padding.top + chartHeight * ratio}
-          stroke="#e2e8f0"
-          strokeWidth="1"
-        />
-      ))}
-
-      {/* Y-axis labels */}
-      {yLabels.map((label, idx) => (
-        <text
-          key={idx}
-          x={padding.left - 5}
-          y={padding.top + (idx / 2) * chartHeight + 4}
-          textAnchor="end"
-          className="fill-slate-500 text-xs"
-        >
-          {label}
-        </text>
-      ))}
-
-      {/* X-axis label */}
-      <text
-        x={width / 2}
-        y={height - 5}
-        textAnchor="middle"
-        className="fill-slate-500 text-xs"
-      >
-        Epoche / Schritt
-      </text>
-
-      {/* Y-axis label */}
-      <text
-        x={12}
-        y={height / 2}
-        textAnchor="middle"
-        className="fill-slate-500 text-xs"
-        transform={`rotate(-90, 12, ${height / 2})`}
-      >
-        Loss
-      </text>
-
-      {/* Training loss line */}
-      <path
-        d={lossPath}
-        fill="none"
-        stroke="#8b5cf6"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-
-      {/* Validation loss line (dashed) */}
-      {valLossPath && (
-        <path
-          d={valLossPath}
-          fill="none"
-          stroke="#22c55e"
-          strokeWidth="2"
-          strokeDasharray="5,5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      )}
-
-      {/* Data points */}
-      {data.map((point, idx) => {
-        const x = padding.left + (idx / (data.length - 1 || 1)) * chartWidth
-        const y = padding.top + chartHeight - ((point.loss - minLoss) / lossRange) * chartHeight
-        return (
-          <circle
-            key={idx}
-            cx={x}
-            cy={y}
-            r="3"
-            fill="#8b5cf6"
-            className="hover:r-4 transition-all"
-          >
-            <title>Epoch {point.epoch}, Step {point.step}: {point.loss.toFixed(4)}</title>
-          </circle>
-        )
-      })}
-
-      {/* Legend */}
-      <g transform={`translate(${padding.left}, ${height - 25})`}>
-        <line x1="0" y1="0" x2="20" y2="0" stroke="#8b5cf6" strokeWidth="2" />
-        <text x="25" y="4" className="fill-slate-600 text-xs">Training Loss</text>
-
-        {valLossPath && (
-          <>
-            <line x1="120" y1="0" x2="140" y2="0" stroke="#22c55e" strokeWidth="2" strokeDasharray="5,5" />
-            <text x="145" y="4" className="fill-slate-600 text-xs">Val Loss</text>
-          </>
-        )}
-      </g>
-    </svg>
-  )
-}
-
-/**
- * Progress ring component
- */
-function ProgressRing({
-  progress,
-  size = 80,
-  strokeWidth = 6,
-  className = ''
-}: {
-  progress: number
-  size?: number
-  strokeWidth?: number
-  className?: string
-}) {
-  const radius = (size - strokeWidth) / 2
-  const circumference = radius * 2 * Math.PI
-  const offset = circumference - (progress / 100) * circumference
-
-  return (
-    <svg width={size} height={size} className={className}>
-      {/* Background circle */}
-      <circle
-        cx={size / 2}
-        cy={size / 2}
-        r={radius}
-        fill="none"
-        stroke="#e2e8f0"
-        strokeWidth={strokeWidth}
-      />
-      {/* Progress circle */}
-      <circle
-        cx={size / 2}
-        cy={size / 2}
-        r={radius}
-        fill="none"
-        stroke="#8b5cf6"
-        strokeWidth={strokeWidth}
-        strokeDasharray={circumference}
-        strokeDashoffset={offset}
-        strokeLinecap="round"
-        transform={`rotate(-90 ${size / 2} ${size / 2})`}
-        className="transition-all duration-300"
-      />
-      {/* Center text */}
-      <text
-        x={size / 2}
-        y={size / 2}
-        textAnchor="middle"
-        dominantBaseline="middle"
-        className="fill-slate-900 font-bold text-lg"
-      >
-        {progress.toFixed(0)}%
-      </text>
-    </svg>
-  )
-}
-
-/**
- * Format time duration
- */
-function formatDuration(ms: number): string {
-  if (ms < 1000) return `${ms}ms`
-  const seconds = Math.floor(ms / 1000)
-  if (seconds < 60) return `${seconds}s`
-  const minutes = Math.floor(seconds / 60)
-  const remainingSeconds = seconds % 60
-  if (minutes < 60) return `${minutes}m ${remainingSeconds}s`
-  const hours = Math.floor(minutes / 60)
-  const remainingMinutes = minutes % 60
-  return `${hours}h ${remainingMinutes}m`
-}
+// Re-export public API so existing imports keep working
+export { useTrainingMetricsSSE } from './useTrainingMetricsSSE'
+export type { TrainingStatus, TrainingDataPoint, TrainingMetricsProps } from './training-metrics-types'
 
 /**
  * Training Metrics Component - Full Dashboard
diff --git a/admin-lehrer/components/ai/training-metrics-types.ts b/admin-lehrer/components/ai/training-metrics-types.ts
new file mode 100644
index 0000000..e9d0cab
--- /dev/null
+++ b/admin-lehrer/components/ai/training-metrics-types.ts
@@ -0,0 +1,66 @@
+/**
+ * Training Metrics Types & Utilities
+ *
+ * Shared types for training dashboard components.
+ */
+
+/** Training data point for charts */
+export interface TrainingDataPoint {
+  epoch: number
+  step: number
+  loss: number
+  val_loss?: number
+  learning_rate: number
+  timestamp: number
+}
+
+/** Training job status */
+export interface TrainingStatus {
+  job_id: string
+  status: 'queued' | 'running' | 'completed' | 'failed' | 'cancelled'
+  progress: number // 0-100
+  current_epoch: number
+  total_epochs: number
+  current_step: number
+  total_steps: number
+  elapsed_time_ms: number
+  estimated_remaining_ms: number
+  metrics: {
+    loss: number
+    val_loss?: number
+    accuracy?: number
+    learning_rate: number
+  }
+  history: TrainingDataPoint[]
+  error?: string
+}
+
+export interface TrainingMetricsProps {
+  /** API base URL */
+  apiBase: string
+  /** Job ID to track (null for simulation mode) */
+  jobId?: string | null
+  /** Simulate training progress for demo */
+  simulateMode?: boolean
+  /** Custom class names */
+  className?: string
+  /** Callback when training completes */
+  onComplete?: (status: TrainingStatus) => void
+  /** Callback on error */
+  onError?: (error: string) => void
+}
+
+/**
+ * Format time duration from milliseconds to human-readable string
+ */
+export function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`
+  const seconds = Math.floor(ms / 1000)
+  if (seconds < 60) return `${seconds}s`
+  const minutes = Math.floor(seconds / 60)
+  const remainingSeconds = seconds % 60
+  if (minutes < 60) return `${minutes}m ${remainingSeconds}s`
+  const hours = Math.floor(minutes / 60)
+  const remainingMinutes = minutes % 60
+  return `${hours}h ${remainingMinutes}m`
+}
diff --git a/admin-lehrer/components/ai/useTrainingMetricsSSE.ts b/admin-lehrer/components/ai/useTrainingMetricsSSE.ts
new file mode 100644
index 0000000..352e8e7
--- /dev/null
+++ b/admin-lehrer/components/ai/useTrainingMetricsSSE.ts
@@ -0,0 +1,72 @@
+/**
+ * useTrainingMetricsSSE Hook
+ *
+ * SSE (Server-Sent Events) hook for real-time training metrics.
+ * Connects to the training metrics stream and provides live updates.
+ */
+
+'use client'
+
+import { useState, useEffect, useCallback, useRef } from 'react'
+import type { TrainingStatus } from './training-metrics-types'
+
+/**
+ * Custom hook for SSE-based training metrics
+ */
+export function useTrainingMetricsSSE(
+  apiBase: string,
+  jobId: string | null,
+  onUpdate?: (status: TrainingStatus) => void
+) {
+  const [status, setStatus] = useState<TrainingStatus | null>(null)
+  const [connected, setConnected] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const eventSourceRef = useRef<EventSource | null>(null)
+
+  useEffect(() => {
+    if (!jobId) return
+
+    const url = `${apiBase}/api/klausur/trocr/training/metrics/stream?job_id=${jobId}`
+    const eventSource = new EventSource(url)
+    eventSourceRef.current = eventSource
+
+    eventSource.onopen = () => {
+      setConnected(true)
+      setError(null)
+    }
+
+    eventSource.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data) as TrainingStatus
+        setStatus(data)
+        onUpdate?.(data)
+
+        // Close connection when training is done
+        if (data.status === 'completed' || data.status === 'failed' || data.status === 'cancelled') {
+          eventSource.close()
+          setConnected(false)
+        }
+      } catch (e) {
+        console.error('Failed to parse SSE message:', e)
+      }
+    }
+
+    eventSource.onerror = () => {
+      setError('Verbindung zum Server verloren')
+      setConnected(false)
+      eventSource.close()
+    }
+
+    return () => {
+      eventSource.close()
+      setConnected(false)
+    }
+  }, [apiBase, jobId, onUpdate])
+
+  const disconnect = useCallback(() => {
+    eventSourceRef.current?.close()
+    setConnected(false)
+  }, [])
+
+  return { status, connected, error, disconnect }
+}
diff --git a/admin-lehrer/components/grid-editor/GridTable.tsx b/admin-lehrer/components/grid-editor/GridTable.tsx
index 74764c6..704a84a 100644
--- a/admin-lehrer/components/grid-editor/GridTable.tsx
+++ b/admin-lehrer/components/grid-editor/GridTable.tsx
@@ -1,44 +1,14 @@
 'use client'
 
 import { useCallback, useEffect, useRef, useState } from 'react'
-import type { GridZone, LayoutMetrics } from './types'
-
-interface GridTableProps {
-  zone: GridZone
-  layoutMetrics?: LayoutMetrics
-  selectedCell: string | null
-  selectedCells?: Set<string>
-  onSelectCell: (cellId: string) => void
-  onToggleCellSelection?: (cellId: string) => void
-  onCellTextChange: (cellId: string, text: string) => void
-  onToggleColumnBold: (zoneIndex: number, colIndex: number) => void
-  onToggleRowHeader: (zoneIndex: number, rowIndex: number) => void
-  onNavigate: (cellId: string, direction: 'up' | 'down' | 'left' | 'right') => void
-  onDeleteColumn?: (zoneIndex: number, colIndex: number) => void
-  onAddColumn?: (zoneIndex: number, afterColIndex: number) => void
-  onDeleteRow?: (zoneIndex: number, rowIndex: number) => void
-  onAddRow?: (zoneIndex: number, afterRowIndex: number) => void
-  onSetCellColor?: (cellId: string, color: string | null | undefined) => void
-}
-
-/** Color palette for the right-click cell color menu. */
-const COLOR_OPTIONS: { label: string; value: string | null }[] = [
-  { label: 'Rot', value: '#dc2626' },
-  { label: 'Gruen', value: '#16a34a' },
-  { label: 'Blau', value: '#2563eb' },
-  { label: 'Orange', value: '#ea580c' },
-  { label: 'Lila', value: '#9333ea' },
-  { label: 'Schwarz', value: null },
-]
-
-/** Gutter width for row numbers (px). */
-const ROW_NUM_WIDTH = 36
-
-/** Minimum column width in px so columns remain usable. */
-const MIN_COL_WIDTH = 80
-
-/** Minimum row height in px. */
-const MIN_ROW_HEIGHT = 26
+import type { GridEditorCell } from './types'
+import { MIN_COL_WIDTH, MIN_ROW_HEIGHT, ROW_NUM_WIDTH } from './gridTableConstants'
+import type { GridTableProps } from './gridTableConstants'
+import { getCellColor, getRowHeight } from './gridTableUtils'
+import { GridTableColumnHeader } from './GridTableColumnHeader'
+import { GridTableRowHeader } from './GridTableRowHeader'
+import { GridTableCell } from './GridTableCell'
+import { GridTableColorMenu } from './GridTableColorMenu'
 
 export function GridTable({
   zone,
@@ -77,10 +47,6 @@ export function GridTable({
   // ----------------------------------------------------------------
   // Compute column widths from OCR measurements
   // ----------------------------------------------------------------
-  // Use the actual total column span as reference width — NOT zone.bbox_px.w.
-  // When union columns are applied across content zones, column boundaries
-  // can extend beyond the zone's bbox, causing overflow if we scale by
-  // the smaller zone width.
   const [colWidthOverrides, setColWidthOverrides] = useState<number[] | null>(null)
 
   const columnWidthsPx = zone.columns.map((col) => col.x_max_px - col.x_min_px)
@@ -95,31 +61,16 @@ export function GridTable({
   )
 
   // ----------------------------------------------------------------
-  // Compute row heights from OCR measurements
+  // Row height
   // ----------------------------------------------------------------
   const avgRowHeightPx = layoutMetrics?.avg_row_height_px ?? 30
   const [rowHeightOverrides, setRowHeightOverrides] = useState<Map<number, number>>(new Map())
 
-  const getRowHeight = (rowIndex: number, isHeader: boolean): number => {
+  const computeRowHeight = (rowIndex: number, isHeader: boolean): number => {
     if (rowHeightOverrides.has(rowIndex)) {
       return rowHeightOverrides.get(rowIndex)!
     }
-    const row = zone.rows.find((r) => r.index === rowIndex)
-    if (!row) return Math.max(MIN_ROW_HEIGHT, avgRowHeightPx * scale)
-
-    // Multi-line cells (containing \n): expand height based on line count
-    const rowCells = zone.cells.filter((c) => c.row_index === rowIndex)
-    const maxLines = Math.max(1, ...rowCells.map((c) => (c.text ?? '').split('\n').length))
-    if (maxLines > 1) {
-      const lineH = Math.max(MIN_ROW_HEIGHT, avgRowHeightPx * scale)
-      return lineH * maxLines
-    }
-
-    if (isHeader) {
-      const measuredH = row.y_max_px - row.y_min_px
-      return Math.max(MIN_ROW_HEIGHT, measuredH * scale)
-    }
-    return Math.max(MIN_ROW_HEIGHT, avgRowHeightPx * scale)
+    return getRowHeight(zone, rowIndex, isHeader, avgRowHeightPx, scale)
   }
 
   // ----------------------------------------------------------------
@@ -162,26 +113,11 @@ export function GridTable({
   // ----------------------------------------------------------------
   // Cell lookup
   // ----------------------------------------------------------------
-  const cellMap = new Map<string, (typeof zone.cells)[0]>()
+  const cellMap = new Map<string, GridEditorCell>()
   for (const cell of zone.cells) {
     cellMap.set(`${cell.row_index}_${cell.col_index}`, cell)
   }
 
-  /** Dominant non-black color from a cell's word_boxes, or null.
-   *  `color_override` takes priority when set. */
-  const getCellColor = (cell: (typeof zone.cells)[0] | undefined): string | null => {
-    if (!cell) return null
-    // Manual override: explicit color or null (= "clear color bar")
-    if (cell.color_override !== undefined) return cell.color_override ?? null
-    if (!cell.word_boxes?.length) return null
-    for (const wb of cell.word_boxes) {
-      if (wb.color_name && wb.color_name !== 'black' && wb.color) {
-        return wb.color
-      }
-    }
-    return null
-  }
-
   // ----------------------------------------------------------------
   // Column resize (drag)
   // ----------------------------------------------------------------
@@ -193,7 +129,6 @@ export function GridTable({
         const deltaPx = (e.clientX - startX) / scale
         const newWidths = [...baseWidths]
         newWidths[colIndex] = Math.max(20, baseWidths[colIndex] + deltaPx)
-        // Steal from next column to keep total constant
         if (colIndex + 1 < newWidths.length) {
           newWidths[colIndex + 1] = Math.max(20, baseWidths[colIndex + 1] - deltaPx)
         }
@@ -248,7 +183,6 @@ export function GridTable({
   const isBoxZone = zone.zone_type === 'box'
   const numCols = zone.columns.length
 
-  // CSS Grid template for columns: row-number gutter + proportional columns
   const gridTemplateCols = `${ROW_NUM_WIDTH}px ${effectiveColWidths.map((w) => `${w.toFixed(1)}px`).join(' ')}`
 
   return (
@@ -272,9 +206,7 @@ export function GridTable({
         </span>
       </div>
 
-      {/* ============================================================ */}
-      {/* CSS Grid — column headers                                     */}
-      {/* ============================================================ */}
+      {/* CSS Grid */}
       <div
         style={{
           display: 'grid',
@@ -286,72 +218,24 @@ export function GridTable({
         {/* Header: row-number corner */}
         <div className="sticky left-0 z-10 px-1 py-1.5 text-[10px] text-gray-400 dark:text-gray-500 border-b border-r border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50" />
 
-        {/* Header: column labels with resize handles + delete/add */}
+        {/* Header: column labels */}
         {zone.columns.map((col, ci) => (
-          <div
+          <GridTableColumnHeader
             key={col.index}
-            className={`group/colhdr relative px-2 py-1.5 text-xs font-medium border-b border-r border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 cursor-pointer select-none transition-colors hover:bg-gray-100 dark:hover:bg-gray-700 ${
-              col.bold ? 'text-teal-700 dark:text-teal-300' : 'text-gray-600 dark:text-gray-400'
-            }`}
-            onClick={() => onToggleColumnBold(zone.zone_index, col.index)}
-            title={`Spalte ${col.index + 1} — Klick fuer Fett-Toggle`}
-          >
-            <div className="flex items-center gap-1 justify-center truncate">
-              <span>{col.label}</span>
-              {col.bold && (
-                <span className="text-[9px] px-1 py-0 rounded bg-teal-100 dark:bg-teal-900/40 text-teal-600 dark:text-teal-400">
-                  B
-                </span>
-              )}
-            </div>
-            {/* Delete column button (visible on hover) */}
-            {onDeleteColumn && numCols > 1 && (
-              <button
-                className="absolute top-0 left-0 w-4 h-4 flex items-center justify-center bg-red-500 text-white rounded-br text-[9px] leading-none opacity-0 group-hover/colhdr:opacity-100 transition-opacity z-30"
-                onClick={(e) => {
-                  e.stopPropagation()
-                  if (confirm(`Spalte "${col.label}" loeschen?`)) {
-                    onDeleteColumn(zone.zone_index, col.index)
-                  }
-                }}
-                title={`Spalte "${col.label}" loeschen`}
-              >
-                x
-              </button>
-            )}
-            {/* Add column button — small icon at bottom-right, below resize handle */}
-            {onAddColumn && (
-              <button
-                className="absolute -right-[7px] -bottom-[7px] w-[14px] h-[14px] flex items-center justify-center text-teal-500 opacity-0 group-hover/colhdr:opacity-100 transition-opacity z-30 hover:bg-teal-100 dark:hover:bg-teal-900/40 rounded-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700"
-                onClick={(e) => {
-                  e.stopPropagation()
-                  onAddColumn(zone.zone_index, col.index)
-                }}
-                title={`Spalte nach "${col.label}" einfuegen`}
-              >
-                <svg className="w-2.5 h-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
-                </svg>
-              </button>
-            )}
-            {/* Right-edge resize handle — wide grab area, highest z-index */}
-            {ci < numCols - 1 && (
-              <div
-                className="absolute top-0 -right-[4px] w-[9px] h-full cursor-col-resize hover:bg-teal-400/40 z-40"
-                onMouseDown={(e) => {
-                  e.stopPropagation()
-                  handleColResizeStart(ci, e.clientX)
-                }}
-              />
-            )}
-          </div>
+            col={col}
+            colIndex={ci}
+            numCols={numCols}
+            zoneIndex={zone.zone_index}
+            onToggleColumnBold={onToggleColumnBold}
+            onDeleteColumn={onDeleteColumn}
+            onAddColumn={onAddColumn}
+            onColResizeStart={handleColResizeStart}
+          />
         ))}
 
-        {/* ============================================================ */}
-        {/* Data rows                                                     */}
-        {/* ============================================================ */}
+        {/* Data rows */}
         {zone.rows.map((row) => {
-          const rowH = getRowHeight(row.index, row.is_header)
+          const rowH = computeRowHeight(row.index, row.is_header)
           const isSpanning = zone.cells.some(
             (c) => c.row_index === row.index && c.col_type === 'spanning_header',
           )
@@ -359,60 +243,16 @@ export function GridTable({
           return (
             <div key={row.index} style={{ display: 'contents' }}>
               {/* Row number cell */}
-              <div
-                className={`group/rowhdr relative sticky left-0 z-10 flex items-center justify-center text-[10px] border-b border-r border-gray-200 dark:border-gray-700 cursor-pointer select-none transition-colors hover:bg-gray-100 dark:hover:bg-gray-700 ${
-                  row.is_header
-                    ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 font-medium'
-                    : row.is_footer
-                    ? 'bg-amber-50 dark:bg-amber-900/20 text-amber-600 dark:text-amber-400 font-medium'
-                    : 'bg-gray-50 dark:bg-gray-800/50 text-gray-400 dark:text-gray-500'
-                }`}
-                style={{ height: `${rowH}px` }}
-                onClick={() => onToggleRowHeader(zone.zone_index, row.index)}
-                title={`Zeile ${row.index + 1} — Klick: ${row.is_header ? 'Footer' : row.is_footer ? 'Normal' : 'Header'}`}
-              >
-                {row.index + 1}
-                {row.is_header && <span className="block text-[8px]">H</span>}
-                {row.is_footer && <span className="block text-[8px]">F</span>}
-                {/* Delete row button (visible on hover) */}
-                {onDeleteRow && zone.rows.length > 1 && (
-                  <button
-                    className="absolute top-0 left-0 w-4 h-4 flex items-center justify-center bg-red-500 text-white rounded-br text-[9px] leading-none opacity-0 group-hover/rowhdr:opacity-100 transition-opacity z-30"
-                    onClick={(e) => {
-                      e.stopPropagation()
-                      if (confirm(`Zeile ${row.index + 1} loeschen?`)) {
-                        onDeleteRow(zone.zone_index, row.index)
-                      }
-                    }}
-                    title={`Zeile ${row.index + 1} loeschen`}
-                  >
-                    x
-                  </button>
-                )}
-                {/* Add row button (visible on hover, below this row) */}
-                {onAddRow && (
-                  <button
-                    className="absolute -bottom-[7px] left-0 w-full h-[14px] flex items-center justify-center text-teal-500 opacity-0 group-hover/rowhdr:opacity-100 transition-opacity z-30 hover:bg-teal-100 dark:hover:bg-teal-900/40 rounded"
-                    onClick={(e) => {
-                      e.stopPropagation()
-                      onAddRow(zone.zone_index, row.index)
-                    }}
-                    title={`Zeile nach ${row.index + 1} einfuegen`}
-                  >
-                    <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
-                      <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
-                    </svg>
-                  </button>
-                )}
-                {/* Bottom-edge resize handle */}
-                <div
-                  className="absolute bottom-0 left-0 w-full h-[4px] cursor-row-resize hover:bg-teal-400/40 z-20"
-                  onMouseDown={(e) => {
-                    e.stopPropagation()
-                    handleRowResizeStart(row.index, e.clientY, rowH)
-                  }}
-                />
-              </div>
+              <GridTableRowHeader
+                row={row}
+                zoneIndex={zone.zone_index}
+                rowCount={zone.rows.length}
+                rowH={rowH}
+                onToggleRowHeader={onToggleRowHeader}
+                onDeleteRow={onDeleteRow}
+                onAddRow={onAddRow}
+                onRowResizeStart={handleRowResizeStart}
+              />
 
               {/* Cells — spanning header or normal columns */}
               {isSpanning ? (
@@ -456,143 +296,24 @@ export function GridTable({
               ) : (
                 zone.columns.map((col) => {
                   const cell = cellMap.get(`${row.index}_${col.index}`)
-                  const cellId =
-                    cell?.cell_id ??
-                    `Z${zone.zone_index}_R${String(row.index).padStart(2, '0')}_C${col.index}`
-                  const isSelected = selectedCell === cellId
-                  const isBold = col.bold || cell?.is_bold
-                  const isLowConf = cell && cell.confidence > 0 && cell.confidence < 60
-                  const isMultiSelected = selectedCells?.has(cellId)
-                  // Show per-word colored display only when word_boxes
-                  // match the cell text.  Post-processing steps (e.g. 5h
-                  // slash-IPA → bracket conversion) modify cell.text but
-                  // not individual word_boxes, so we fall back to the
-                  // plain input when they diverge.
-                  const wbText = cell?.word_boxes?.map((wb) => wb.text).join(' ') ?? ''
-                  const textMatches = !cell?.text || wbText === cell.text
-                  // Color: prefer manual override, else word_boxes when text matches
-                  const hasOverride = cell?.color_override !== undefined
-                  const cellColor = hasOverride ? getCellColor(cell) : (textMatches ? getCellColor(cell) : null)
-                  const hasColoredWords =
-                    !hasOverride &&
-                    textMatches &&
-                    (cell?.word_boxes?.some(
-                      (wb) => wb.color_name && wb.color_name !== 'black',
-                    ) ?? false)
-
                   return (
-                    <div
+                    <GridTableCell
                       key={col.index}
-                      className={`relative border-b border-r border-gray-200 dark:border-gray-700 flex items-center ${
-                        isSelected ? 'ring-2 ring-teal-500 ring-inset z-10' : ''
-                      } ${isMultiSelected ? 'bg-teal-50/60 dark:bg-teal-900/20' : ''} ${
-                        isLowConf && !isMultiSelected ? 'bg-amber-50/50 dark:bg-amber-900/10' : ''
-                      } ${row.is_header && !isMultiSelected ? 'bg-blue-50/50 dark:bg-blue-900/10' : ''}`}
-                      style={{
-                        height: `${rowH}px`,
-                        ...(cell?.box_region?.bg_hex ? {
-                          backgroundColor: `${cell.box_region.bg_hex}12`,
-                          borderLeft: cell.box_region.border ? `3px solid ${cell.box_region.bg_hex}60` : undefined,
-                        } : {}),
-                      }}
-                      onContextMenu={(e) => {
-                        if (onSetCellColor) {
-                          e.preventDefault()
-                          setColorMenu({ cellId, x: e.clientX, y: e.clientY })
-                        }
-                      }}
-                    >
-                      {cellColor && (
-                        <span
-                          className="flex-shrink-0 w-1.5 self-stretch rounded-l-sm"
-                          style={{ backgroundColor: cellColor }}
-                          title={`Farbe: ${cell?.word_boxes?.find((wb) => wb.color_name !== 'black')?.color_name}`}
-                        />
-                      )}
-                      {/* Per-word colored display when not editing */}
-                      {(() => {
-                        const cellText = cell?.text ?? ''
-                        const isMultiLine = cellText.includes('\n')
-                        if (hasColoredWords && !isSelected) {
-                          return (
-                            <div
-                              className={`w-full px-2 cursor-text truncate ${isBold ? 'font-bold' : 'font-normal'}`}
-                              onClick={(e) => {
-                                if ((e.metaKey || e.ctrlKey) && onToggleCellSelection) {
-                                  onToggleCellSelection(cellId)
-                                } else {
-                                  onSelectCell(cellId)
-                                  setTimeout(() => document.getElementById(`cell-${cellId}`)?.focus(), 0)
-                                }
-                              }}
-                            >
-                              {cell!.word_boxes!.map((wb, i) => (
-                                <span
-                                  key={i}
-                                  style={
-                                    wb.color_name && wb.color_name !== 'black'
-                                      ? { color: wb.color }
-                                      : undefined
-                                  }
-                                >
-                                  {wb.text}
-                                  {i < cell!.word_boxes!.length - 1 ? ' ' : ''}
-                                </span>
-                              ))}
-                            </div>
-                          )
-                        }
-                        if (isMultiLine) {
-                          return (
-                            <textarea
-                              id={`cell-${cellId}`}
-                              value={cellText}
-                              onChange={(e) => onCellTextChange(cellId, e.target.value)}
-                              onFocus={() => onSelectCell(cellId)}
-                              onClick={(e) => {
-                                if ((e.metaKey || e.ctrlKey) && onToggleCellSelection) {
-                                  e.preventDefault()
-                                  onToggleCellSelection(cellId)
-                                }
-                              }}
-                              onKeyDown={(e) => {
-                                if (e.key === 'Tab') {
-                                  e.preventDefault()
-                                  onNavigate(cellId, e.shiftKey ? 'left' : 'right')
-                                }
-                              }}
-                              rows={cellText.split('\n').length}
-                              className={`w-full px-2 bg-transparent border-0 outline-none resize-none ${
-                                isBold ? 'font-bold' : 'font-normal'
-                              }`}
-                              style={{ color: cellColor || undefined }}
-                              spellCheck={false}
-                            />
-                          )
-                        }
-                        return (
-                          <input
-                            id={`cell-${cellId}`}
-                            type="text"
-                            value={cellText}
-                            onChange={(e) => onCellTextChange(cellId, e.target.value)}
-                            onFocus={() => onSelectCell(cellId)}
-                            onClick={(e) => {
-                              if ((e.metaKey || e.ctrlKey) && onToggleCellSelection) {
-                                e.preventDefault()
-                                onToggleCellSelection(cellId)
-                              }
-                            }}
-                            onKeyDown={(e) => handleKeyDown(e, cellId)}
-                            className={`w-full px-2 bg-transparent border-0 outline-none ${
-                              isBold ? 'font-bold' : 'font-normal'
-                            }`}
-                            style={{ color: cellColor || undefined }}
-                            spellCheck={false}
-                          />
-                        )
-                      })()}
-                    </div>
+                      cell={cell}
+                      col={col}
+                      row={row}
+                      zone={zone}
+                      rowH={rowH}
+                      selectedCell={selectedCell}
+                      selectedCells={selectedCells}
+                      onSelectCell={onSelectCell}
+                      onToggleCellSelection={onToggleCellSelection}
+                      onCellTextChange={onCellTextChange}
+                      onNavigate={onNavigate}
+                      onSetCellColor={onSetCellColor}
+                      onOpenColorMenu={(cellId, x, y) => setColorMenu({ cellId, x, y })}
+                      handleKeyDown={handleKeyDown}
+                    />
                   )
                 })
               )}
@@ -603,49 +324,13 @@ export function GridTable({
 
       {/* Color context menu (right-click) */}
       {colorMenu && onSetCellColor && (
-        <div
-          className="fixed inset-0 z-50"
-          onClick={() => setColorMenu(null)}
-          onContextMenu={(e) => { e.preventDefault(); setColorMenu(null) }}
-        >
-          <div
-            className="absolute bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-1 min-w-[140px]"
-            style={{ left: colorMenu.x, top: colorMenu.y }}
-            onClick={(e) => e.stopPropagation()}
-          >
-            <div className="px-3 py-1 text-[10px] text-gray-400 dark:text-gray-500 font-medium uppercase tracking-wider">
-              Textfarbe
-            </div>
-            {COLOR_OPTIONS.map((opt) => (
-              <button
-                key={opt.label}
-                className="w-full px-3 py-1.5 text-xs text-left hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
-                onClick={() => {
-                  onSetCellColor(colorMenu.cellId, opt.value)
-                  setColorMenu(null)
-                }}
-              >
-                {opt.value ? (
-                  <span className="w-3 h-3 rounded-full flex-shrink-0" style={{ backgroundColor: opt.value }} />
-                ) : (
-                  <span className="w-3 h-3 rounded-full flex-shrink-0 border border-gray-300 dark:border-gray-600" />
-                )}
-                <span>{opt.label}</span>
-              </button>
-            ))}
-            <div className="border-t border-gray-100 dark:border-gray-700 mt-1 pt-1">
-              <button
-                className="w-full px-3 py-1.5 text-xs text-left hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-500 dark:text-gray-400"
-                onClick={() => {
-                  onSetCellColor(colorMenu.cellId, undefined)
-                  setColorMenu(null)
-                }}
-              >
-                Farbe zuruecksetzen (OCR)
-              </button>
-            </div>
-          </div>
-        </div>
+        <GridTableColorMenu
+          cellId={colorMenu.cellId}
+          x={colorMenu.x}
+          y={colorMenu.y}
+          onSetCellColor={onSetCellColor}
+          onClose={() => setColorMenu(null)}
+        />
       )}
     </div>
   )
diff --git a/admin-lehrer/components/grid-editor/GridTableCell.tsx b/admin-lehrer/components/grid-editor/GridTableCell.tsx
new file mode 100644
index 0000000..bd7e9da
--- /dev/null
+++ b/admin-lehrer/components/grid-editor/GridTableCell.tsx
@@ -0,0 +1,169 @@
+'use client'
+
+import type { GridColumn, GridEditorCell, GridRow } from './types'
+import { getCellColor } from './gridTableUtils'
+
+interface GridTableCellProps {
+  cell: GridEditorCell | undefined
+  col: GridColumn
+  row: GridRow
+  zone: { zone_index: number }
+  rowH: number
+  selectedCell: string | null
+  selectedCells?: Set<string>
+  onSelectCell: (cellId: string) => void
+  onToggleCellSelection?: (cellId: string) => void
+  onCellTextChange: (cellId: string, text: string) => void
+  onNavigate: (cellId: string, direction: 'up' | 'down' | 'left' | 'right') => void
+  onSetCellColor?: (cellId: string, color: string | null | undefined) => void
+  onOpenColorMenu: (cellId: string, x: number, y: number) => void
+  handleKeyDown: (e: React.KeyboardEvent, cellId: string) => void
+}
+
+export function GridTableCell({
+  cell,
+  col,
+  row,
+  zone,
+  rowH,
+  selectedCell,
+  selectedCells,
+  onSelectCell,
+  onToggleCellSelection,
+  onCellTextChange,
+  onNavigate,
+  onSetCellColor,
+  onOpenColorMenu,
+  handleKeyDown,
+}: GridTableCellProps) {
+  const cellId =
+    cell?.cell_id ??
+    `Z${zone.zone_index}_R${String(row.index).padStart(2, '0')}_C${col.index}`
+  const isSelected = selectedCell === cellId
+  const isBold = col.bold || cell?.is_bold
+  const isLowConf = cell && cell.confidence > 0 && cell.confidence < 60
+  const isMultiSelected = selectedCells?.has(cellId)
+
+  // Show per-word colored display only when word_boxes match the cell text.
+  // Post-processing steps modify cell.text but not individual word_boxes,
+  // so we fall back to the plain input when they diverge.
+  const wbText = cell?.word_boxes?.map((wb) => wb.text).join(' ') ?? ''
+  const textMatches = !cell?.text || wbText === cell.text
+
+  // Color: prefer manual override, else word_boxes when text matches
+  const hasOverride = cell?.color_override !== undefined
+  const cellColor = hasOverride ? getCellColor(cell) : (textMatches ? getCellColor(cell) : null)
+  const hasColoredWords =
+    !hasOverride &&
+    textMatches &&
+    (cell?.word_boxes?.some(
+      (wb) => wb.color_name && wb.color_name !== 'black',
+    ) ?? false)
+
+  const cellText = cell?.text ?? ''
+  const isMultiLine = cellText.includes('\n')
+
+  return (
+    <div
+      className={`relative border-b border-r border-gray-200 dark:border-gray-700 flex items-center ${
+        isSelected ? 'ring-2 ring-teal-500 ring-inset z-10' : ''
+      } ${isMultiSelected ? 'bg-teal-50/60 dark:bg-teal-900/20' : ''} ${
+        isLowConf && !isMultiSelected ? 'bg-amber-50/50 dark:bg-amber-900/10' : ''
+      } ${row.is_header && !isMultiSelected ? 'bg-blue-50/50 dark:bg-blue-900/10' : ''}`}
+      style={{
+        height: `${rowH}px`,
+        ...(cell?.box_region?.bg_hex ? {
+          backgroundColor: `${cell.box_region.bg_hex}12`,
+          borderLeft: cell.box_region.border ? `3px solid ${cell.box_region.bg_hex}60` : undefined,
+        } : {}),
+      }}
+      onContextMenu={(e) => {
+        if (onSetCellColor) {
+          e.preventDefault()
+          onOpenColorMenu(cellId, e.clientX, e.clientY)
+        }
+      }}
+    >
+      {cellColor && (
+        <span
+          className="flex-shrink-0 w-1.5 self-stretch rounded-l-sm"
+          style={{ backgroundColor: cellColor }}
+          title={`Farbe: ${cell?.word_boxes?.find((wb) => wb.color_name !== 'black')?.color_name}`}
+        />
+      )}
+      {/* Per-word colored display when not editing */}
+      {hasColoredWords && !isSelected ? (
+        <div
+          className={`w-full px-2 cursor-text truncate ${isBold ? 'font-bold' : 'font-normal'}`}
+          onClick={(e) => {
+            if ((e.metaKey || e.ctrlKey) && onToggleCellSelection) {
+              onToggleCellSelection(cellId)
+            } else {
+              onSelectCell(cellId)
+              setTimeout(() => document.getElementById(`cell-${cellId}`)?.focus(), 0)
+            }
+          }}
+        >
+          {cell!.word_boxes!.map((wb, i) => (
+            <span
+              key={i}
+              style={
+                wb.color_name && wb.color_name !== 'black'
+                  ? { color: wb.color }
+                  : undefined
+              }
+            >
+              {wb.text}
+              {i < cell!.word_boxes!.length - 1 ? ' ' : ''}
+            </span>
+          ))}
+        </div>
+      ) : isMultiLine ? (
+        <textarea
+          id={`cell-${cellId}`}
+          value={cellText}
+          onChange={(e) => onCellTextChange(cellId, e.target.value)}
+          onFocus={() => onSelectCell(cellId)}
+          onClick={(e) => {
+            if ((e.metaKey || e.ctrlKey) && onToggleCellSelection) {
+              e.preventDefault()
+              onToggleCellSelection(cellId)
+            }
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Tab') {
+              e.preventDefault()
+              onNavigate(cellId, e.shiftKey ? 'left' : 'right')
+            }
+          }}
+          rows={cellText.split('\n').length}
+          className={`w-full px-2 bg-transparent border-0 outline-none resize-none ${
+            isBold ? 'font-bold' : 'font-normal'
+          }`}
+          style={{ color: cellColor || undefined }}
+          spellCheck={false}
+        />
+      ) : (
+        <input
+          id={`cell-${cellId}`}
+          type="text"
+          value={cellText}
+          onChange={(e) => onCellTextChange(cellId, e.target.value)}
+          onFocus={() => onSelectCell(cellId)}
+          onClick={(e) => {
+            if ((e.metaKey || e.ctrlKey) && onToggleCellSelection) {
+              e.preventDefault()
+              onToggleCellSelection(cellId)
+            }
+          }}
+          onKeyDown={(e) => handleKeyDown(e, cellId)}
+          className={`w-full px-2 bg-transparent border-0 outline-none ${
+            isBold ? 'font-bold' : 'font-normal'
+          }`}
+          style={{ color: cellColor || undefined }}
+          spellCheck={false}
+        />
+      )}
+    </div>
+  )
+}
diff --git a/admin-lehrer/components/grid-editor/GridTableColorMenu.tsx b/admin-lehrer/components/grid-editor/GridTableColorMenu.tsx
new file mode 100644
index 0000000..7a18f98
--- /dev/null
+++ b/admin-lehrer/components/grid-editor/GridTableColorMenu.tsx
@@ -0,0 +1,65 @@
+'use client'
+
+import { COLOR_OPTIONS } from './gridTableConstants'
+
+interface GridTableColorMenuProps {
+  cellId: string
+  x: number
+  y: number
+  onSetCellColor: (cellId: string, color: string | null | undefined) => void
+  onClose: () => void
+}
+
+export function GridTableColorMenu({
+  cellId,
+  x,
+  y,
+  onSetCellColor,
+  onClose,
+}: GridTableColorMenuProps) {
+  return (
+    <div
+      className="fixed inset-0 z-50"
+      onClick={onClose}
+      onContextMenu={(e) => { e.preventDefault(); onClose() }}
+    >
+      <div
+        className="absolute bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-1 min-w-[140px]"
+        style={{ left: x, top: y }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="px-3 py-1 text-[10px] text-gray-400 dark:text-gray-500 font-medium uppercase tracking-wider">
+          Textfarbe
+        </div>
+        {COLOR_OPTIONS.map((opt) => (
+          <button
+            key={opt.label}
+            className="w-full px-3 py-1.5 text-xs text-left hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
+            onClick={() => {
+              onSetCellColor(cellId, opt.value)
+              onClose()
+            }}
+          >
+            {opt.value ? (
+              <span className="w-3 h-3 rounded-full flex-shrink-0" style={{ backgroundColor: opt.value }} />
+            ) : (
+              <span className="w-3 h-3 rounded-full flex-shrink-0 border border-gray-300 dark:border-gray-600" />
+            )}
+            <span>{opt.label}</span>
+          </button>
+        ))}
+        <div className="border-t border-gray-100 dark:border-gray-700 mt-1 pt-1">
+          <button
+            className="w-full px-3 py-1.5 text-xs text-left hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-500 dark:text-gray-400"
+            onClick={() => {
+              onSetCellColor(cellId, undefined)
+              onClose()
+            }}
+          >
+            Farbe zuruecksetzen (OCR)
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/components/grid-editor/GridTableColumnHeader.tsx b/admin-lehrer/components/grid-editor/GridTableColumnHeader.tsx
new file mode 100644
index 0000000..fd32f47
--- /dev/null
+++ b/admin-lehrer/components/grid-editor/GridTableColumnHeader.tsx
@@ -0,0 +1,84 @@
+'use client'
+
+import type { GridColumn } from './types'
+
+interface GridTableColumnHeaderProps {
+  col: GridColumn
+  colIndex: number
+  numCols: number
+  zoneIndex: number
+  onToggleColumnBold: (zoneIndex: number, colIndex: number) => void
+  onDeleteColumn?: (zoneIndex: number, colIndex: number) => void
+  onAddColumn?: (zoneIndex: number, afterColIndex: number) => void
+  onColResizeStart: (colIndex: number, startX: number) => void
+}
+
+export function GridTableColumnHeader({
+  col,
+  colIndex,
+  numCols,
+  zoneIndex,
+  onToggleColumnBold,
+  onDeleteColumn,
+  onAddColumn,
+  onColResizeStart,
+}: GridTableColumnHeaderProps) {
+  return (
+    <div
+      className={`group/colhdr relative px-2 py-1.5 text-xs font-medium border-b border-r border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 cursor-pointer select-none transition-colors hover:bg-gray-100 dark:hover:bg-gray-700 ${
+        col.bold ? 'text-teal-700 dark:text-teal-300' : 'text-gray-600 dark:text-gray-400'
+      }`}
+      onClick={() => onToggleColumnBold(zoneIndex, col.index)}
+      title={`Spalte ${col.index + 1} — Klick fuer Fett-Toggle`}
+    >
+      <div className="flex items-center gap-1 justify-center truncate">
+        <span>{col.label}</span>
+        {col.bold && (
+          <span className="text-[9px] px-1 py-0 rounded bg-teal-100 dark:bg-teal-900/40 text-teal-600 dark:text-teal-400">
+            B
+          </span>
+        )}
+      </div>
+      {/* Delete column button (visible on hover) */}
+      {onDeleteColumn && numCols > 1 && (
+        <button
+          className="absolute top-0 left-0 w-4 h-4 flex items-center justify-center bg-red-500 text-white rounded-br text-[9px] leading-none opacity-0 group-hover/colhdr:opacity-100 transition-opacity z-30"
+          onClick={(e) => {
+            e.stopPropagation()
+            if (confirm(`Spalte "${col.label}" loeschen?`)) {
+              onDeleteColumn(zoneIndex, col.index)
+            }
+          }}
+          title={`Spalte "${col.label}" loeschen`}
+        >
+          x
+        </button>
+      )}
+      {/* Add column button — small icon at bottom-right, below resize handle */}
+      {onAddColumn && (
+        <button
+          className="absolute -right-[7px] -bottom-[7px] w-[14px] h-[14px] flex items-center justify-center text-teal-500 opacity-0 group-hover/colhdr:opacity-100 transition-opacity z-30 hover:bg-teal-100 dark:hover:bg-teal-900/40 rounded-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700"
+          onClick={(e) => {
+            e.stopPropagation()
+            onAddColumn(zoneIndex, col.index)
+          }}
+          title={`Spalte nach "${col.label}" einfuegen`}
+        >
+          <svg className="w-2.5 h-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
+          </svg>
+        </button>
+      )}
+      {/* Right-edge resize handle — wide grab area, highest z-index */}
+      {colIndex < numCols - 1 && (
+        <div
+          className="absolute top-0 -right-[4px] w-[9px] h-full cursor-col-resize hover:bg-teal-400/40 z-40"
+          onMouseDown={(e) => {
+            e.stopPropagation()
+            onColResizeStart(colIndex, e.clientX)
+          }}
+        />
+      )}
+    </div>
+  )
+}
diff --git a/admin-lehrer/components/grid-editor/GridTableRowHeader.tsx b/admin-lehrer/components/grid-editor/GridTableRowHeader.tsx
new file mode 100644
index 0000000..f8fa500
--- /dev/null
+++ b/admin-lehrer/components/grid-editor/GridTableRowHeader.tsx
@@ -0,0 +1,82 @@
+'use client'
+
+import type { GridRow } from './types'
+
+interface GridTableRowHeaderProps {
+  row: GridRow
+  zoneIndex: number
+  rowCount: number
+  rowH: number
+  onToggleRowHeader: (zoneIndex: number, rowIndex: number) => void
+  onDeleteRow?: (zoneIndex: number, rowIndex: number) => void
+  onAddRow?: (zoneIndex: number, afterRowIndex: number) => void
+  onRowResizeStart: (rowIndex: number, startY: number, currentHeight: number) => void
+}
+
+export function GridTableRowHeader({
+  row,
+  zoneIndex,
+  rowCount,
+  rowH,
+  onToggleRowHeader,
+  onDeleteRow,
+  onAddRow,
+  onRowResizeStart,
+}: GridTableRowHeaderProps) {
+  return (
+    <div
+      className={`group/rowhdr relative sticky left-0 z-10 flex items-center justify-center text-[10px] border-b border-r border-gray-200 dark:border-gray-700 cursor-pointer select-none transition-colors hover:bg-gray-100 dark:hover:bg-gray-700 ${
+        row.is_header
+          ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 font-medium'
+          : row.is_footer
+          ? 'bg-amber-50 dark:bg-amber-900/20 text-amber-600 dark:text-amber-400 font-medium'
+          : 'bg-gray-50 dark:bg-gray-800/50 text-gray-400 dark:text-gray-500'
+      }`}
+      style={{ height: `${rowH}px` }}
+      onClick={() => onToggleRowHeader(zoneIndex, row.index)}
+      title={`Zeile ${row.index + 1} — Klick: ${row.is_header ? 'Footer' : row.is_footer ? 'Normal' : 'Header'}`}
+    >
+      {row.index + 1}
+      {row.is_header && <span className="block text-[8px]">H</span>}
+      {row.is_footer && <span className="block text-[8px]">F</span>}
+      {/* Delete row button (visible on hover) */}
+      {onDeleteRow && rowCount > 1 && (
+        <button
+          className="absolute top-0 left-0 w-4 h-4 flex items-center justify-center bg-red-500 text-white rounded-br text-[9px] leading-none opacity-0 group-hover/rowhdr:opacity-100 transition-opacity z-30"
+          onClick={(e) => {
+            e.stopPropagation()
+            if (confirm(`Zeile ${row.index + 1} loeschen?`)) {
+              onDeleteRow(zoneIndex, row.index)
+            }
+          }}
+          title={`Zeile ${row.index + 1} loeschen`}
+        >
+          x
+        </button>
+      )}
+      {/* Add row button (visible on hover, below this row) */}
+      {onAddRow && (
+        <button
+          className="absolute -bottom-[7px] left-0 w-full h-[14px] flex items-center justify-center text-teal-500 opacity-0 group-hover/rowhdr:opacity-100 transition-opacity z-30 hover:bg-teal-100 dark:hover:bg-teal-900/40 rounded"
+          onClick={(e) => {
+            e.stopPropagation()
+            onAddRow(zoneIndex, row.index)
+          }}
+          title={`Zeile nach ${row.index + 1} einfuegen`}
+        >
+          <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
+          </svg>
+        </button>
+      )}
+      {/* Bottom-edge resize handle */}
+      <div
+        className="absolute bottom-0 left-0 w-full h-[4px] cursor-row-resize hover:bg-teal-400/40 z-20"
+        onMouseDown={(e) => {
+          e.stopPropagation()
+          onRowResizeStart(row.index, e.clientY, rowH)
+        }}
+      />
+    </div>
+  )
+}
diff --git a/admin-lehrer/components/grid-editor/gridEditorTypes.ts b/admin-lehrer/components/grid-editor/gridEditorTypes.ts
new file mode 100644
index 0000000..a397b32
--- /dev/null
+++ b/admin-lehrer/components/grid-editor/gridEditorTypes.ts
@@ -0,0 +1,17 @@
+import type { StructuredGrid } from './types'
+
+export const KLAUSUR_API = '/klausur-api'
+export const MAX_UNDO = 50
+
+export interface GridEditorState {
+  grid: StructuredGrid | null
+  loading: boolean
+  saving: boolean
+  error: string | null
+  dirty: boolean
+  selectedCell: string | null
+  selectedZone: number | null
+}
+
+export type IpaMode = 'auto' | 'all' | 'de' | 'en' | 'none'
+export type SyllableMode = 'auto' | 'all' | 'de' | 'en' | 'none'
diff --git a/admin-lehrer/components/grid-editor/gridTableConstants.ts b/admin-lehrer/components/grid-editor/gridTableConstants.ts
new file mode 100644
index 0000000..d8d0376
--- /dev/null
+++ b/admin-lehrer/components/grid-editor/gridTableConstants.ts
@@ -0,0 +1,38 @@
+import type { GridZone, LayoutMetrics } from './types'
+
+export interface GridTableProps {
+  zone: GridZone
+  layoutMetrics?: LayoutMetrics
+  selectedCell: string | null
+  selectedCells?: Set<string>
+  onSelectCell: (cellId: string) => void
+  onToggleCellSelection?: (cellId: string) => void
+  onCellTextChange: (cellId: string, text: string) => void
+  onToggleColumnBold: (zoneIndex: number, colIndex: number) => void
+  onToggleRowHeader: (zoneIndex: number, rowIndex: number) => void
+  onNavigate: (cellId: string, direction: 'up' | 'down' | 'left' | 'right') => void
+  onDeleteColumn?: (zoneIndex: number, colIndex: number) => void
+  onAddColumn?: (zoneIndex: number, afterColIndex: number) => void
+  onDeleteRow?: (zoneIndex: number, rowIndex: number) => void
+  onAddRow?: (zoneIndex: number, afterRowIndex: number) => void
+  onSetCellColor?: (cellId: string, color: string | null | undefined) => void
+}
+
+/** Color palette for the right-click cell color menu. */
+export const COLOR_OPTIONS: { label: string; value: string | null }[] = [
+  { label: 'Rot', value: '#dc2626' },
+  { label: 'Gruen', value: '#16a34a' },
+  { label: 'Blau', value: '#2563eb' },
+  { label: 'Orange', value: '#ea580c' },
+  { label: 'Lila', value: '#9333ea' },
+  { label: 'Schwarz', value: null },
+]
+
+/** Gutter width for row numbers (px). */
+export const ROW_NUM_WIDTH = 36
+
+/** Minimum column width in px so columns remain usable. */
+export const MIN_COL_WIDTH = 80
+
+/** Minimum row height in px. */
+export const MIN_ROW_HEIGHT = 26
diff --git a/admin-lehrer/components/grid-editor/gridTableUtils.ts b/admin-lehrer/components/grid-editor/gridTableUtils.ts
new file mode 100644
index 0000000..ab5832b
--- /dev/null
+++ b/admin-lehrer/components/grid-editor/gridTableUtils.ts
@@ -0,0 +1,43 @@
+import type { GridEditorCell, GridZone } from './types'
+import { MIN_ROW_HEIGHT } from './gridTableConstants'
+
+/** Dominant non-black color from a cell's word_boxes, or null.
+ *  `color_override` takes priority when set. */
+export function getCellColor(cell: GridEditorCell | undefined): string | null {
+  if (!cell) return null
+  // Manual override: explicit color or null (= "clear color bar")
+  if (cell.color_override !== undefined) return cell.color_override ?? null
+  if (!cell.word_boxes?.length) return null
+  for (const wb of cell.word_boxes) {
+    if (wb.color_name && wb.color_name !== 'black' && wb.color) {
+      return wb.color
+    }
+  }
+  return null
+}
+
+/** Compute the rendered height for a row in px. */
+export function getRowHeight(
+  zone: GridZone,
+  rowIndex: number,
+  isHeader: boolean,
+  avgRowHeightPx: number,
+  scale: number,
+): number {
+  const row = zone.rows.find((r) => r.index === rowIndex)
+  if (!row) return Math.max(MIN_ROW_HEIGHT, avgRowHeightPx * scale)
+
+  // Multi-line cells (containing \n): expand height based on line count
+  const rowCells = zone.cells.filter((c) => c.row_index === rowIndex)
+  const maxLines = Math.max(1, ...rowCells.map((c) => (c.text ?? '').split('\n').length))
+  if (maxLines > 1) {
+    const lineH = Math.max(MIN_ROW_HEIGHT, avgRowHeightPx * scale)
+    return lineH * maxLines
+  }
+
+  if (isHeader) {
+    const measuredH = row.y_max_px - row.y_min_px
+    return Math.max(MIN_ROW_HEIGHT, measuredH * scale)
+  }
+  return Math.max(MIN_ROW_HEIGHT, avgRowHeightPx * scale)
+}
diff --git a/admin-lehrer/components/grid-editor/useGridEditor.ts b/admin-lehrer/components/grid-editor/useGridEditor.ts
index b04d02d..143337e 100644
--- a/admin-lehrer/components/grid-editor/useGridEditor.ts
+++ b/admin-lehrer/components/grid-editor/useGridEditor.ts
@@ -1,21 +1,13 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
-import type { StructuredGrid, GridZone, LayoutDividers } from './types'
+import { useCallback, useRef, useState } from 'react'
+import type { StructuredGrid } from './types'
+import { MAX_UNDO } from './gridEditorTypes'
+import type { IpaMode, SyllableMode } from './gridEditorTypes'
+import { useGridEditorApi } from './useGridEditorApi'
+import { useGridEditorActions } from './useGridEditorActions'
+import { useGridEditorLayout } from './useGridEditorLayout'
 
-const KLAUSUR_API = '/klausur-api'
-const MAX_UNDO = 50
-
-export interface GridEditorState {
-  grid: StructuredGrid | null
-  loading: boolean
-  saving: boolean
-  error: string | null
-  dirty: boolean
-  selectedCell: string | null
-  selectedZone: number | null
-}
-
-export type IpaMode = 'auto' | 'all' | 'de' | 'en' | 'none'
-export type SyllableMode = 'auto' | 'all' | 'de' | 'en' | 'none'
+// Re-export types so existing imports keep working
+export type { GridEditorState, IpaMode, SyllableMode } from './gridEditorTypes'
 
 export function useGridEditor(sessionId: string | null) {
   const [grid, setGrid] = useState<StructuredGrid | null>(null)
@@ -41,7 +33,7 @@ export function useGridEditor(sessionId: string | null) {
   const undoStack = useRef<string[]>([])
   const redoStack = useRef<string[]>([])
 
-  const pushUndo = useCallback((zones: GridZone[]) => {
+  const pushUndo = useCallback((zones: StructuredGrid['zones']) => {
     undoStack.current.push(JSON.stringify(zones))
     if (undoStack.current.length > MAX_UNDO) {
       undoStack.current.shift()
@@ -50,878 +42,58 @@ export function useGridEditor(sessionId: string | null) {
   }, [])
 
   // ------------------------------------------------------------------
-  // Load / Build
+  // API calls (build, load, save, rerunOcr)
   // ------------------------------------------------------------------
 
-  const buildGrid = useCallback(async () => {
-    if (!sessionId) return
-    setLoading(true)
-    setError(null)
-    try {
-      const params = new URLSearchParams()
-      params.set('ipa_mode', ipaMode)
-      params.set('syllable_mode', syllableMode)
-      params.set('enhance', String(ocrEnhance))
-      if (ocrMaxCols > 0) params.set('max_cols', String(ocrMaxCols))
-      if (ocrMinConf > 0) params.set('min_conf', String(ocrMinConf))
-      const res = await fetch(
-        `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/build-grid?${params}`,
-        { method: 'POST' },
-      )
-      if (!res.ok) {
-        const data = await res.json().catch(() => ({}))
-        throw new Error(data.detail || `HTTP ${res.status}`)
-      }
-      const data: StructuredGrid = await res.json()
-      setGrid(data)
-      setDirty(false)
-      undoStack.current = []
-      redoStack.current = []
-    } catch (e) {
-      setError(e instanceof Error ? e.message : String(e))
-    } finally {
-      setLoading(false)
-    }
-  }, [sessionId, ipaMode, syllableMode, ocrEnhance, ocrMaxCols, ocrMinConf])
-
-  /** Re-run OCR with current quality settings, then rebuild grid */
-  const rerunOcr = useCallback(async () => {
-    if (!sessionId) return
-    setLoading(true)
-    setError(null)
-    try {
-      const params = new URLSearchParams()
-      params.set('ipa_mode', ipaMode)
-      params.set('syllable_mode', syllableMode)
-      params.set('enhance', String(ocrEnhance))
-      if (ocrMaxCols > 0) params.set('max_cols', String(ocrMaxCols))
-      if (ocrMinConf > 0) params.set('min_conf', String(ocrMinConf))
-      params.set('vision_fusion', String(visionFusion))
-      if (documentCategory) params.set('doc_category', documentCategory)
-      const res = await fetch(
-        `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/rerun-ocr-and-build-grid?${params}`,
-        { method: 'POST' },
-      )
-      if (!res.ok) {
-        const data = await res.json().catch(() => ({}))
-        throw new Error(data.detail || `HTTP ${res.status}`)
-      }
-      const data: StructuredGrid = await res.json()
-      setGrid(data)
-      setDirty(false)
-      undoStack.current = []
-      redoStack.current = []
-    } catch (e) {
-      setError(e instanceof Error ? e.message : String(e))
-    } finally {
-      setLoading(false)
-    }
-  }, [sessionId, ipaMode, syllableMode, ocrEnhance, ocrMaxCols, ocrMinConf, visionFusion, documentCategory])
-
-  const loadGrid = useCallback(async () => {
-    if (!sessionId) return
-    setLoading(true)
-    setError(null)
-    try {
-      const res = await fetch(
-        `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/grid-editor`,
-      )
-      if (res.status === 404) {
-        // No grid yet — build it with current modes
-        const params = new URLSearchParams()
-        params.set('ipa_mode', ipaMode)
-        params.set('syllable_mode', syllableMode)
-        params.set('enhance', String(ocrEnhance))
-        if (ocrMaxCols > 0) params.set('max_cols', String(ocrMaxCols))
-        if (ocrMinConf > 0) params.set('min_conf', String(ocrMinConf))
-        const buildRes = await fetch(
-          `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/build-grid?${params}`,
-          { method: 'POST' },
-        )
-        if (buildRes.ok) {
-          const data: StructuredGrid = await buildRes.json()
-          setGrid(data)
-          setDirty(false)
-        }
-        return
-      }
-      if (!res.ok) {
-        const data = await res.json().catch(() => ({}))
-        throw new Error(data.detail || `HTTP ${res.status}`)
-      }
-      const data: StructuredGrid = await res.json()
-      setGrid(data)
-      setDirty(false)
-      undoStack.current = []
-      redoStack.current = []
-    } catch (e) {
-      setError(e instanceof Error ? e.message : String(e))
-    } finally {
-      setLoading(false)
-    }
-    // Only depends on sessionId — mode changes are handled by the
-    // separate useEffect below, not by re-triggering loadGrid.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sessionId])
-
-  // Auto-rebuild when IPA or syllable mode changes (skip initial mount).
-  // We call the API directly with the new values instead of going through
-  // the buildGrid callback, which may still close over stale state due to
-  // React's asynchronous state batching.
-  const mountedRef = useRef(false)
-  useEffect(() => {
-    if (!mountedRef.current) {
-      // Skip the first trigger (component mount) — don't rebuild yet
-      mountedRef.current = true
-      return
-    }
-    if (!sessionId) return
-    const rebuild = async () => {
-      setLoading(true)
-      setError(null)
-      try {
-        const params = new URLSearchParams()
-        params.set('ipa_mode', ipaMode)
-        params.set('syllable_mode', syllableMode)
-        const res = await fetch(
-          `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/build-grid?${params}`,
-          { method: 'POST' },
-        )
-        if (!res.ok) {
-          const data = await res.json().catch(() => ({}))
-          throw new Error(data.detail || `HTTP ${res.status}`)
-        }
-        const data: StructuredGrid = await res.json()
-        setGrid(data)
-        setDirty(false)
-      } catch (e) {
-        setError(e instanceof Error ? e.message : String(e))
-      } finally {
-        setLoading(false)
-      }
-    }
-    rebuild()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ipaMode, syllableMode])
+  const { buildGrid, rerunOcr, loadGrid, saveGrid } = useGridEditorApi({
+    sessionId,
+    ipaMode,
+    syllableMode,
+    ocrEnhance,
+    ocrMaxCols,
+    ocrMinConf,
+    visionFusion,
+    documentCategory,
+    setGrid,
+    setLoading,
+    setSaving,
+    setError,
+    setDirty,
+    grid,
+    undoStack,
+    redoStack,
+  })
 
   // ------------------------------------------------------------------
-  // Save
+  // Cell editing, formatting, multi-select
   // ------------------------------------------------------------------
 
-  const saveGrid = useCallback(async () => {
-    if (!sessionId || !grid) return
-    setSaving(true)
-    try {
-      const res = await fetch(
-        `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/save-grid`,
-        {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(grid),
-        },
-      )
-      if (!res.ok) {
-        const data = await res.json().catch(() => ({}))
-        throw new Error(data.detail || `HTTP ${res.status}`)
-      }
-      setDirty(false)
-    } catch (e) {
-      setError(e instanceof Error ? e.message : String(e))
-    } finally {
-      setSaving(false)
-    }
-  }, [sessionId, grid])
+  const {
+    updateCellText,
+    setCellColor,
+    toggleColumnBold,
+    toggleRowHeader,
+    autoCorrectColumnPatterns,
+    selectedCells,
+    toggleCellSelection,
+    clearCellSelection,
+    toggleSelectedBold,
+  } = useGridEditorActions({ grid, setGrid, setDirty, pushUndo })
 
   // ------------------------------------------------------------------
-  // Cell editing
+  // Column/row management, layout dividers
   // ------------------------------------------------------------------
 
-  const updateCellText = useCallback(
-    (cellId: string, newText: string) => {
-      if (!grid) return
-      pushUndo(grid.zones)
-
-      setGrid((prev) => {
-        if (!prev) return prev
-        return {
-          ...prev,
-          zones: prev.zones.map((zone) => {
-            // Check if cell exists
-            const existing = zone.cells.find((c) => c.cell_id === cellId)
-            if (existing) {
-              return {
-                ...zone,
-                cells: zone.cells.map((cell) =>
-                  cell.cell_id === cellId ? { ...cell, text: newText } : cell,
-                ),
-              }
-            }
-            // Cell doesn't exist — create it if the cellId belongs to this zone
-            // cellId format: Z{zone}_R{row}_C{col}
-            const match = cellId.match(/^Z(\d+)_R(\d+)_C(\d+)$/)
-            if (!match || parseInt(match[1]) !== zone.zone_index) return zone
-            const rowIndex = parseInt(match[2])
-            const colIndex = parseInt(match[3])
-            const col = zone.columns.find((c) => c.index === colIndex)
-            const newCell = {
-              cell_id: cellId,
-              zone_index: zone.zone_index,
-              row_index: rowIndex,
-              col_index: colIndex,
-              col_type: col?.label ?? '',
-              text: newText,
-              confidence: 0,
-              bbox_px: { x: 0, y: 0, w: 0, h: 0 },
-              bbox_pct: { x: 0, y: 0, w: 0, h: 0 },
-              word_boxes: [],
-              ocr_engine: 'manual',
-              is_bold: false,
-            }
-            return { ...zone, cells: [...zone.cells, newCell] }
-          }),
-        }
-      })
-      setDirty(true)
-    },
-    [grid, pushUndo],
-  )
-
-  // ------------------------------------------------------------------
-  // Column formatting
-  // ------------------------------------------------------------------
-
-  const toggleColumnBold = useCallback(
-    (zoneIndex: number, colIndex: number) => {
-      if (!grid) return
-      pushUndo(grid.zones)
-
-      setGrid((prev) => {
-        if (!prev) return prev
-        return {
-          ...prev,
-          zones: prev.zones.map((zone) => {
-            if (zone.zone_index !== zoneIndex) return zone
-            const col = zone.columns.find((c) => c.index === colIndex)
-            const newBold = col ? !col.bold : true
-            return {
-              ...zone,
-              columns: zone.columns.map((c) =>
-                c.index === colIndex ? { ...c, bold: newBold } : c,
-              ),
-              cells: zone.cells.map((cell) =>
-                cell.col_index === colIndex
-                  ? { ...cell, is_bold: newBold }
-                  : cell,
-              ),
-            }
-          }),
-        }
-      })
-      setDirty(true)
-    },
-    [grid, pushUndo],
-  )
-
-  // ------------------------------------------------------------------
-  // Row formatting
-  // ------------------------------------------------------------------
-
-  const toggleRowHeader = useCallback(
-    (zoneIndex: number, rowIndex: number) => {
-      if (!grid) return
-      pushUndo(grid.zones)
-
-      // Cycle: normal → header → footer → normal
-      setGrid((prev) => {
-        if (!prev) return prev
-        return {
-          ...prev,
-          zones: prev.zones.map((zone) => {
-            if (zone.zone_index !== zoneIndex) return zone
-            return {
-              ...zone,
-              rows: zone.rows.map((r) => {
-                if (r.index !== rowIndex) return r
-                if (!r.is_header && !r.is_footer) {
-                  return { ...r, is_header: true, is_footer: false }
-                } else if (r.is_header) {
-                  return { ...r, is_header: false, is_footer: true }
-                } else {
-                  return { ...r, is_header: false, is_footer: false }
-                }
-              }),
-            }
-          }),
-        }
-      })
-      setDirty(true)
-    },
-    [grid, pushUndo],
-  )
-
-  // ------------------------------------------------------------------
-  // Column management
-  // ------------------------------------------------------------------
-
-  const deleteColumn = useCallback(
-    (zoneIndex: number, colIndex: number) => {
-      if (!grid) return
-      const zone = grid.zones.find((z) => z.zone_index === zoneIndex)
-      if (!zone || zone.columns.length <= 1) return // keep at least 1 column
-      pushUndo(grid.zones)
-
-      setGrid((prev) => {
-        if (!prev) return prev
-        return {
-          ...prev,
-          zones: prev.zones.map((z) => {
-            if (z.zone_index !== zoneIndex) return z
-            const deletedCol = z.columns.find((c) => c.index === colIndex)
-            const newColumns = z.columns
-              .filter((c) => c.index !== colIndex)
-              .map((c, i) => {
-                const result = { ...c, index: i, label: `column_${i + 1}` }
-                // Merge x-boundary: previous column absorbs deleted column's space
-                if (deletedCol) {
-                  if (c.index === colIndex - 1) {
-                    result.x_max_pct = deletedCol.x_max_pct
-                    result.x_max_px = deletedCol.x_max_px
-                  } else if (colIndex === 0 && c.index === 1) {
-                    result.x_min_pct = deletedCol.x_min_pct
-                    result.x_min_px = deletedCol.x_min_px
-                  }
-                }
-                return result
-              })
-            const newCells = z.cells
-              .filter((c) => c.col_index !== colIndex)
-              .map((c) => {
-                const newCI = c.col_index > colIndex ? c.col_index - 1 : c.col_index
-                return {
-                  ...c,
-                  col_index: newCI,
-                  cell_id: `Z${zoneIndex}_R${String(c.row_index).padStart(2, '0')}_C${newCI}`,
-                }
-              })
-            return { ...z, columns: newColumns, cells: newCells }
-          }),
-          summary: {
-            ...prev.summary,
-            total_columns: prev.summary.total_columns - 1,
-            total_cells: prev.zones.reduce(
-              (sum, z) =>
-                sum +
-                (z.zone_index === zoneIndex
-                  ? z.cells.filter((c) => c.col_index !== colIndex).length
-                  : z.cells.length),
-              0,
-            ),
-          },
-        }
-      })
-      setDirty(true)
-    },
-    [grid, pushUndo],
-  )
-
-  const addColumn = useCallback(
-    (zoneIndex: number, afterColIndex: number) => {
-      if (!grid) return
-      const zone = grid.zones.find((z) => z.zone_index === zoneIndex)
-      if (!zone) return
-      pushUndo(grid.zones)
-
-      const newColIndex = afterColIndex + 1
-
-      setGrid((prev) => {
-        if (!prev) return prev
-        return {
-          ...prev,
-          zones: prev.zones.map((z) => {
-            if (z.zone_index !== zoneIndex) return z
-            // Shift existing columns
-            const shiftedCols = z.columns.map((c) =>
-              c.index > afterColIndex ? { ...c, index: c.index + 1, label: `column_${c.index + 2}` } : c,
-            )
-            // Insert new column
-            const refCol = z.columns.find((c) => c.index === afterColIndex) || z.columns[z.columns.length - 1]
-            const newCol = {
-              index: newColIndex,
-              label: `column_${newColIndex + 1}`,
-              x_min_px: refCol.x_max_px,
-              x_max_px: refCol.x_max_px + (refCol.x_max_px - refCol.x_min_px),
-              x_min_pct: refCol.x_max_pct,
-              x_max_pct: Math.min(100, refCol.x_max_pct + (refCol.x_max_pct - refCol.x_min_pct)),
-              bold: false,
-            }
-            const allCols = [...shiftedCols, newCol].sort((a, b) => a.index - b.index)
-
-            // Shift existing cells and create empty cells for new column
-            const shiftedCells = z.cells.map((c) => {
-              if (c.col_index > afterColIndex) {
-                const newCI = c.col_index + 1
-                return {
-                  ...c,
-                  col_index: newCI,
-                  cell_id: `Z${zoneIndex}_R${String(c.row_index).padStart(2, '0')}_C${newCI}`,
-                }
-              }
-              return c
-            })
-            // Create empty cells for each row
-            const newCells = z.rows.map((row) => ({
-              cell_id: `Z${zoneIndex}_R${String(row.index).padStart(2, '0')}_C${newColIndex}`,
-              zone_index: zoneIndex,
-              row_index: row.index,
-              col_index: newColIndex,
-              col_type: `column_${newColIndex + 1}`,
-              text: '',
-              confidence: 0,
-              bbox_px: { x: 0, y: 0, w: 0, h: 0 },
-              bbox_pct: { x: 0, y: 0, w: 0, h: 0 },
-              word_boxes: [],
-              ocr_engine: 'manual',
-              is_bold: false,
-            }))
-
-            return { ...z, columns: allCols, cells: [...shiftedCells, ...newCells] }
-          }),
-          summary: {
-            ...prev.summary,
-            total_columns: prev.summary.total_columns + 1,
-            total_cells: prev.summary.total_cells + (zone?.rows.length ?? 0),
-          },
-        }
-      })
-      setDirty(true)
-    },
-    [grid, pushUndo],
-  )
-
-  // ------------------------------------------------------------------
-  // Row management
-  // ------------------------------------------------------------------
-
-  const deleteRow = useCallback(
-    (zoneIndex: number, rowIndex: number) => {
-      if (!grid) return
-      const zone = grid.zones.find((z) => z.zone_index === zoneIndex)
-      if (!zone || zone.rows.length <= 1) return // keep at least 1 row
-      pushUndo(grid.zones)
-
-      setGrid((prev) => {
-        if (!prev) return prev
-        return {
-          ...prev,
-          zones: prev.zones.map((z) => {
-            if (z.zone_index !== zoneIndex) return z
-            const newRows = z.rows
-              .filter((r) => r.index !== rowIndex)
-              .map((r, i) => ({ ...r, index: i }))
-            const newCells = z.cells
-              .filter((c) => c.row_index !== rowIndex)
-              .map((c) => {
-                const newRI = c.row_index > rowIndex ? c.row_index - 1 : c.row_index
-                return {
-                  ...c,
-                  row_index: newRI,
-                  cell_id: `Z${zoneIndex}_R${String(newRI).padStart(2, '0')}_C${c.col_index}`,
-                }
-              })
-            return { ...z, rows: newRows, cells: newCells }
-          }),
-          summary: {
-            ...prev.summary,
-            total_rows: prev.summary.total_rows - 1,
-            total_cells: prev.zones.reduce(
-              (sum, z) =>
-                sum +
-                (z.zone_index === zoneIndex
-                  ? z.cells.filter((c) => c.row_index !== rowIndex).length
-                  : z.cells.length),
-              0,
-            ),
-          },
-        }
-      })
-      setDirty(true)
-    },
-    [grid, pushUndo],
-  )
-
-  const addRow = useCallback(
-    (zoneIndex: number, afterRowIndex: number) => {
-      if (!grid) return
-      const zone = grid.zones.find((z) => z.zone_index === zoneIndex)
-      if (!zone) return
-      pushUndo(grid.zones)
-
-      const newRowIndex = afterRowIndex + 1
-
-      setGrid((prev) => {
-        if (!prev) return prev
-        return {
-          ...prev,
-          zones: prev.zones.map((z) => {
-            if (z.zone_index !== zoneIndex) return z
-            // Shift existing rows
-            const shiftedRows = z.rows.map((r) =>
-              r.index > afterRowIndex ? { ...r, index: r.index + 1 } : r,
-            )
-            // Insert new row
-            const refRow = z.rows.find((r) => r.index === afterRowIndex) || z.rows[z.rows.length - 1]
-            const newRow = {
-              index: newRowIndex,
-              y_min_px: refRow.y_max_px,
-              y_max_px: refRow.y_max_px + (refRow.y_max_px - refRow.y_min_px),
-              y_min_pct: refRow.y_max_pct,
-              y_max_pct: Math.min(100, refRow.y_max_pct + (refRow.y_max_pct - refRow.y_min_pct)),
-              is_header: false,
-              is_footer: false,
-            }
-            const allRows = [...shiftedRows, newRow].sort((a, b) => a.index - b.index)
-
-            // Shift existing cells
-            const shiftedCells = z.cells.map((c) => {
-              if (c.row_index > afterRowIndex) {
-                const newRI = c.row_index + 1
-                return {
-                  ...c,
-                  row_index: newRI,
-                  cell_id: `Z${zoneIndex}_R${String(newRI).padStart(2, '0')}_C${c.col_index}`,
-                }
-              }
-              return c
-            })
-            // Create empty cells for each column
-            const newCells = z.columns.map((col) => ({
-              cell_id: `Z${zoneIndex}_R${String(newRowIndex).padStart(2, '0')}_C${col.index}`,
-              zone_index: zoneIndex,
-              row_index: newRowIndex,
-              col_index: col.index,
-              col_type: col.label,
-              text: '',
-              confidence: 0,
-              bbox_px: { x: 0, y: 0, w: 0, h: 0 },
-              bbox_pct: { x: 0, y: 0, w: 0, h: 0 },
-              word_boxes: [],
-              ocr_engine: 'manual',
-              is_bold: false,
-            }))
-
-            return { ...z, rows: allRows, cells: [...shiftedCells, ...newCells] }
-          }),
-          summary: {
-            ...prev.summary,
-            total_rows: prev.summary.total_rows + 1,
-            total_cells: prev.summary.total_cells + (zone?.columns.length ?? 0),
-          },
-        }
-      })
-      setDirty(true)
-    },
-    [grid, pushUndo],
-  )
-
-  // ------------------------------------------------------------------
-  // Layout editing (image overlay)
-  // ------------------------------------------------------------------
-
-  /** Capture current state for undo — call once at drag start. */
-  const commitUndoPoint = useCallback(() => {
-    if (!grid) return
-    pushUndo(grid.zones)
-  }, [grid, pushUndo])
-
-  /** Move a column boundary. boundaryIndex 0 = left edge of col 0, etc. */
-  const updateColumnDivider = useCallback(
-    (zoneIndex: number, boundaryIndex: number, newXPct: number) => {
-      if (!grid) return
-      setGrid((prev) => {
-        if (!prev) return prev
-        const imgW = prev.image_width || 1
-        const newPx = Math.round((newXPct / 100) * imgW)
-        return {
-          ...prev,
-          zones: prev.zones.map((z) => {
-            if (z.zone_index !== zoneIndex) return z
-            return {
-              ...z,
-              columns: z.columns.map((col) => {
-                // Right edge of the column before this boundary
-                if (col.index === boundaryIndex - 1) {
-                  return { ...col, x_max_pct: newXPct, x_max_px: newPx }
-                }
-                // Left edge of the column at this boundary
-                if (col.index === boundaryIndex) {
-                  return { ...col, x_min_pct: newXPct, x_min_px: newPx }
-                }
-                return col
-              }),
-            }
-          }),
-        }
-      })
-      setDirty(true)
-    },
-    [grid],
-  )
-
-  /** Update horizontal layout guidelines (margins, header, footer). */
-  const updateLayoutHorizontals = useCallback(
-    (horizontals: LayoutDividers['horizontals']) => {
-      if (!grid) return
-      setGrid((prev) => {
-        if (!prev) return prev
-        return {
-          ...prev,
-          layout_dividers: {
-            ...(prev.layout_dividers || { horizontals: {} }),
-            horizontals,
-          },
-        }
-      })
-      setDirty(true)
-    },
-    [grid],
-  )
-
-  /** Split a column at a given x percentage, creating a new column. */
-  const splitColumnAt = useCallback(
-    (zoneIndex: number, xPct: number) => {
-      if (!grid) return
-      const zone = grid.zones.find((z) => z.zone_index === zoneIndex)
-      if (!zone) return
-
-      const sorted = [...zone.columns].sort((a, b) => a.index - b.index)
-      const targetCol = sorted.find((c) => c.x_min_pct <= xPct && c.x_max_pct >= xPct)
-      if (!targetCol) return
-
-      pushUndo(grid.zones)
-      const newColIndex = targetCol.index + 1
-      const imgW = grid.image_width || 1
-
-      setGrid((prev) => {
-        if (!prev) return prev
-        return {
-          ...prev,
-          zones: prev.zones.map((z) => {
-            if (z.zone_index !== zoneIndex) return z
-            const leftCol = {
-              ...targetCol,
-              x_max_pct: xPct,
-              x_max_px: Math.round((xPct / 100) * imgW),
-            }
-            const rightCol = {
-              index: newColIndex,
-              label: `column_${newColIndex + 1}`,
-              x_min_pct: xPct,
-              x_max_pct: targetCol.x_max_pct,
-              x_min_px: Math.round((xPct / 100) * imgW),
-              x_max_px: targetCol.x_max_px,
-              bold: false,
-            }
-            const updatedCols = z.columns.map((c) => {
-              if (c.index === targetCol.index) return leftCol
-              if (c.index > targetCol.index) return { ...c, index: c.index + 1, label: `column_${c.index + 2}` }
-              return c
-            })
-            const allCols = [...updatedCols, rightCol].sort((a, b) => a.index - b.index)
-            const shiftedCells = z.cells.map((c) => {
-              if (c.col_index > targetCol.index) {
-                const newCI = c.col_index + 1
-                return {
-                  ...c,
-                  col_index: newCI,
-                  cell_id: `Z${zoneIndex}_R${String(c.row_index).padStart(2, '0')}_C${newCI}`,
-                }
-              }
-              return c
-            })
-            const newCells = z.rows.map((row) => ({
-              cell_id: `Z${zoneIndex}_R${String(row.index).padStart(2, '0')}_C${newColIndex}`,
-              zone_index: zoneIndex,
-              row_index: row.index,
-              col_index: newColIndex,
-              col_type: `column_${newColIndex + 1}`,
-              text: '',
-              confidence: 0,
-              bbox_px: { x: 0, y: 0, w: 0, h: 0 },
-              bbox_pct: { x: 0, y: 0, w: 0, h: 0 },
-              word_boxes: [],
-              ocr_engine: 'manual',
-              is_bold: false,
-            }))
-            return { ...z, columns: allCols, cells: [...shiftedCells, ...newCells] }
-          }),
-          summary: {
-            ...prev.summary,
-            total_columns: prev.summary.total_columns + 1,
-            total_cells: prev.summary.total_cells + (zone.rows.length),
-          },
-        }
-      })
-      setDirty(true)
-    },
-    [grid, pushUndo],
-  )
-
-  // ------------------------------------------------------------------
-  // Column pattern auto-correction
-  // ------------------------------------------------------------------
-
-  /**
-   * Detect dominant prefix+number patterns per column and complete
-   * partial matches.  E.g. if 3+ cells read "p.70", "p.71", etc.,
-   * a cell reading ".65" is corrected to "p.65".
-   * Returns the number of corrections made.
-   */
-  const autoCorrectColumnPatterns = useCallback(() => {
-    if (!grid) return 0
-    pushUndo(grid.zones)
-
-    let totalFixed = 0
-    const numberPattern = /^(.+?)(\d+)\s*$/
-
-    setGrid((prev) => {
-      if (!prev) return prev
-      return {
-        ...prev,
-        zones: prev.zones.map((zone) => {
-          // Group cells by column
-          const cellsByCol = new Map<number, { cell: (typeof zone.cells)[0]; idx: number }[]>()
-          zone.cells.forEach((cell, idx) => {
-            const arr = cellsByCol.get(cell.col_index) || []
-            arr.push({ cell, idx })
-            cellsByCol.set(cell.col_index, arr)
-          })
-
-          const newCells = [...zone.cells]
-
-          for (const [, colEntries] of cellsByCol) {
-            // Count prefix occurrences
-            const prefixCounts = new Map<string, number>()
-            for (const { cell } of colEntries) {
-              const m = cell.text.trim().match(numberPattern)
-              if (m) {
-                prefixCounts.set(m[1], (prefixCounts.get(m[1]) || 0) + 1)
-              }
-            }
-
-            // Find dominant prefix (>= 3 occurrences)
-            let dominantPrefix = ''
-            let maxCount = 0
-            for (const [prefix, count] of prefixCounts) {
-              if (count >= 3 && count > maxCount) {
-                dominantPrefix = prefix
-                maxCount = count
-              }
-            }
-            if (!dominantPrefix) continue
-
-            // Fix partial matches — entries that are just [.?\s*]NUMBER
-            for (const { cell, idx } of colEntries) {
-              const text = cell.text.trim()
-              if (!text || text.startsWith(dominantPrefix)) continue
-
-              const numMatch = text.match(/^[.\s]*(\d+)\s*$/)
-              if (numMatch) {
-                newCells[idx] = { ...newCells[idx], text: `${dominantPrefix}${numMatch[1]}` }
-                totalFixed++
-              }
-            }
-          }
-
-          return { ...zone, cells: newCells }
-        }),
-      }
-    })
-
-    if (totalFixed > 0) setDirty(true)
-    return totalFixed
-  }, [grid, pushUndo])
-
-  // ------------------------------------------------------------------
-  // Multi-select & bulk formatting
-  // ------------------------------------------------------------------
-
-  const [selectedCells, setSelectedCells] = useState<Set<string>>(new Set())
-
-  const toggleCellSelection = useCallback(
-    (cellId: string) => {
-      setSelectedCells((prev) => {
-        const next = new Set(prev)
-        if (next.has(cellId)) next.delete(cellId)
-        else next.add(cellId)
-        return next
-      })
-    },
-    [],
-  )
-
-  const clearCellSelection = useCallback(() => {
-    setSelectedCells(new Set())
-  }, [])
-
-  /**
-   * Set a manual color override on a cell.
-   * - hex string (e.g. "#dc2626"): force text color
-   * - null: force no color (clear bar)
-   * - undefined: remove override, restore OCR-detected color
-   */
-  const setCellColor = useCallback(
-    (cellId: string, color: string | null | undefined) => {
-      if (!grid) return
-      pushUndo(grid.zones)
-      setGrid((prev) => {
-        if (!prev) return prev
-        return {
-          ...prev,
-          zones: prev.zones.map((zone) => ({
-            ...zone,
-            cells: zone.cells.map((cell) => {
-              if (cell.cell_id !== cellId) return cell
-              if (color === undefined) {
-                // Remove override entirely — restore OCR behavior
-                const { color_override: _, ...rest } = cell
-                return rest
-              }
-              return { ...cell, color_override: color }
-            }),
-          })),
-        }
-      })
-      setDirty(true)
-    },
-    [grid, pushUndo],
-  )
-
-  /** Toggle bold on all selected cells (and their columns). */
-  const toggleSelectedBold = useCallback(() => {
-    if (!grid || selectedCells.size === 0) return
-    pushUndo(grid.zones)
-
-    // Determine if we're turning bold on or off (majority rule)
-    const cells = grid.zones.flatMap((z) => z.cells)
-    const selectedArr = cells.filter((c) => selectedCells.has(c.cell_id))
-    const boldCount = selectedArr.filter((c) => c.is_bold).length
-    const newBold = boldCount < selectedArr.length / 2
-
-    setGrid((prev) => {
-      if (!prev) return prev
-      return {
-        ...prev,
-        zones: prev.zones.map((zone) => ({
-          ...zone,
-          cells: zone.cells.map((cell) =>
-            selectedCells.has(cell.cell_id) ? { ...cell, is_bold: newBold } : cell,
-          ),
-        })),
-      }
-    })
-    setDirty(true)
-    setSelectedCells(new Set())
-  }, [grid, selectedCells, pushUndo])
+  const {
+    deleteColumn,
+    addColumn,
+    deleteRow,
+    addRow,
+    commitUndoPoint,
+    updateColumnDivider,
+    updateLayoutHorizontals,
+    splitColumnAt,
+  } = useGridEditorLayout({ grid, setGrid, setDirty, pushUndo })
 
   // ------------------------------------------------------------------
   // Undo / Redo
diff --git a/admin-lehrer/components/grid-editor/useGridEditorActions.ts b/admin-lehrer/components/grid-editor/useGridEditorActions.ts
new file mode 100644
index 0000000..988b828
--- /dev/null
+++ b/admin-lehrer/components/grid-editor/useGridEditorActions.ts
@@ -0,0 +1,322 @@
+import { useCallback, useState } from 'react'
+import type { StructuredGrid, GridZone } from './types'
+
+interface ActionDeps {
+  grid: StructuredGrid | null
+  setGrid: React.Dispatch<React.SetStateAction<StructuredGrid | null>>
+  setDirty: React.Dispatch<React.SetStateAction<boolean>>
+  pushUndo: (zones: GridZone[]) => void
+}
+
+export function useGridEditorActions(deps: ActionDeps) {
+  const { grid, setGrid, setDirty, pushUndo } = deps
+
+  // ------------------------------------------------------------------
+  // Multi-select state
+  // ------------------------------------------------------------------
+
+  const [selectedCells, setSelectedCells] = useState<Set<string>>(new Set())
+
+  const toggleCellSelection = useCallback(
+    (cellId: string) => {
+      setSelectedCells((prev) => {
+        const next = new Set(prev)
+        if (next.has(cellId)) next.delete(cellId)
+        else next.add(cellId)
+        return next
+      })
+    },
+    [],
+  )
+
+  const clearCellSelection = useCallback(() => {
+    setSelectedCells(new Set())
+  }, [])
+
+  // ------------------------------------------------------------------
+  // Cell editing
+  // ------------------------------------------------------------------
+
+  const updateCellText = useCallback(
+    (cellId: string, newText: string) => {
+      if (!grid) return
+      pushUndo(grid.zones)
+
+      setGrid((prev) => {
+        if (!prev) return prev
+        return {
+          ...prev,
+          zones: prev.zones.map((zone) => {
+            // Check if cell exists
+            const existing = zone.cells.find((c) => c.cell_id === cellId)
+            if (existing) {
+              return {
+                ...zone,
+                cells: zone.cells.map((cell) =>
+                  cell.cell_id === cellId ? { ...cell, text: newText } : cell,
+                ),
+              }
+            }
+            // Cell doesn't exist — create it if the cellId belongs to this zone
+            // cellId format: Z{zone}_R{row}_C{col}
+            const match = cellId.match(/^Z(\d+)_R(\d+)_C(\d+)$/)
+            if (!match || parseInt(match[1]) !== zone.zone_index) return zone
+            const rowIndex = parseInt(match[2])
+            const colIndex = parseInt(match[3])
+            const col = zone.columns.find((c) => c.index === colIndex)
+            const newCell = {
+              cell_id: cellId,
+              zone_index: zone.zone_index,
+              row_index: rowIndex,
+              col_index: colIndex,
+              col_type: col?.label ?? '',
+              text: newText,
+              confidence: 0,
+              bbox_px: { x: 0, y: 0, w: 0, h: 0 },
+              bbox_pct: { x: 0, y: 0, w: 0, h: 0 },
+              word_boxes: [],
+              ocr_engine: 'manual',
+              is_bold: false,
+            }
+            return { ...zone, cells: [...zone.cells, newCell] }
+          }),
+        }
+      })
+      setDirty(true)
+    },
+    [grid, pushUndo, setGrid, setDirty],
+  )
+
+  // ------------------------------------------------------------------
+  // Cell color
+  // ------------------------------------------------------------------
+
+  /**
+   * Set a manual color override on a cell.
+   * - hex string (e.g. "#dc2626"): force text color
+   * - null: force no color (clear bar)
+   * - undefined: remove override, restore OCR-detected color
+   */
+  const setCellColor = useCallback(
+    (cellId: string, color: string | null | undefined) => {
+      if (!grid) return
+      pushUndo(grid.zones)
+      setGrid((prev) => {
+        if (!prev) return prev
+        return {
+          ...prev,
+          zones: prev.zones.map((zone) => ({
+            ...zone,
+            cells: zone.cells.map((cell) => {
+              if (cell.cell_id !== cellId) return cell
+              if (color === undefined) {
+                // Remove override entirely — restore OCR behavior
+                const { color_override: _, ...rest } = cell
+                return rest
+              }
+              return { ...cell, color_override: color }
+            }),
+          })),
+        }
+      })
+      setDirty(true)
+    },
+    [grid, pushUndo, setGrid, setDirty],
+  )
+
+  // ------------------------------------------------------------------
+  // Column formatting
+  // ------------------------------------------------------------------
+
+  const toggleColumnBold = useCallback(
+    (zoneIndex: number, colIndex: number) => {
+      if (!grid) return
+      pushUndo(grid.zones)
+
+      setGrid((prev) => {
+        if (!prev) return prev
+        return {
+          ...prev,
+          zones: prev.zones.map((zone) => {
+            if (zone.zone_index !== zoneIndex) return zone
+            const col = zone.columns.find((c) => c.index === colIndex)
+            const newBold = col ? !col.bold : true
+            return {
+              ...zone,
+              columns: zone.columns.map((c) =>
+                c.index === colIndex ? { ...c, bold: newBold } : c,
+              ),
+              cells: zone.cells.map((cell) =>
+                cell.col_index === colIndex
+                  ? { ...cell, is_bold: newBold }
+                  : cell,
+              ),
+            }
+          }),
+        }
+      })
+      setDirty(true)
+    },
+    [grid, pushUndo, setGrid, setDirty],
+  )
+
+  // ------------------------------------------------------------------
+  // Row formatting
+  // ------------------------------------------------------------------
+
+  const toggleRowHeader = useCallback(
+    (zoneIndex: number, rowIndex: number) => {
+      if (!grid) return
+      pushUndo(grid.zones)
+
+      // Cycle: normal -> header -> footer -> normal
+      setGrid((prev) => {
+        if (!prev) return prev
+        return {
+          ...prev,
+          zones: prev.zones.map((zone) => {
+            if (zone.zone_index !== zoneIndex) return zone
+            return {
+              ...zone,
+              rows: zone.rows.map((r) => {
+                if (r.index !== rowIndex) return r
+                if (!r.is_header && !r.is_footer) {
+                  return { ...r, is_header: true, is_footer: false }
+                } else if (r.is_header) {
+                  return { ...r, is_header: false, is_footer: true }
+                } else {
+                  return { ...r, is_header: false, is_footer: false }
+                }
+              }),
+            }
+          }),
+        }
+      })
+      setDirty(true)
+    },
+    [grid, pushUndo, setGrid, setDirty],
+  )
+
+  // ------------------------------------------------------------------
+  // Column pattern auto-correction
+  // ------------------------------------------------------------------
+
+  /**
+   * Detect dominant prefix+number patterns per column and complete
+   * partial matches.  E.g. if 3+ cells read "p.70", "p.71", etc.,
+   * a cell reading ".65" is corrected to "p.65".
+   * Returns the number of corrections made.
+   */
+  const autoCorrectColumnPatterns = useCallback(() => {
+    if (!grid) return 0
+    pushUndo(grid.zones)
+
+    let totalFixed = 0
+    const numberPattern = /^(.+?)(\d+)\s*$/
+
+    setGrid((prev) => {
+      if (!prev) return prev
+      return {
+        ...prev,
+        zones: prev.zones.map((zone) => {
+          // Group cells by column
+          const cellsByCol = new Map<number, { cell: (typeof zone.cells)[0]; idx: number }[]>()
+          zone.cells.forEach((cell, idx) => {
+            const arr = cellsByCol.get(cell.col_index) || []
+            arr.push({ cell, idx })
+            cellsByCol.set(cell.col_index, arr)
+          })
+
+          const newCells = [...zone.cells]
+
+          for (const [, colEntries] of cellsByCol) {
+            // Count prefix occurrences
+            const prefixCounts = new Map<string, number>()
+            for (const { cell } of colEntries) {
+              const m = cell.text.trim().match(numberPattern)
+              if (m) {
+                prefixCounts.set(m[1], (prefixCounts.get(m[1]) || 0) + 1)
+              }
+            }
+
+            // Find dominant prefix (>= 3 occurrences)
+            let dominantPrefix = ''
+            let maxCount = 0
+            for (const [prefix, count] of prefixCounts) {
+              if (count >= 3 && count > maxCount) {
+                dominantPrefix = prefix
+                maxCount = count
+              }
+            }
+            if (!dominantPrefix) continue
+
+            // Fix partial matches — entries that are just [.?\s*]NUMBER
+            for (const { cell, idx } of colEntries) {
+              const text = cell.text.trim()
+              if (!text || text.startsWith(dominantPrefix)) continue
+
+              const numMatch = text.match(/^[.\s]*(\d+)\s*$/)
+              if (numMatch) {
+                newCells[idx] = { ...newCells[idx], text: `${dominantPrefix}${numMatch[1]}` }
+                totalFixed++
+              }
+            }
+          }
+
+          return { ...zone, cells: newCells }
+        }),
+      }
+    })
+
+    if (totalFixed > 0) setDirty(true)
+    return totalFixed
+  }, [grid, pushUndo, setGrid, setDirty])
+
+  // ------------------------------------------------------------------
+  // Multi-select bulk formatting
+  // ------------------------------------------------------------------
+
+  /** Toggle bold on all selected cells (and their columns). */
+  const toggleSelectedBold = useCallback(() => {
+    if (!grid || selectedCells.size === 0) return
+    pushUndo(grid.zones)
+
+    // Determine if we're turning bold on or off (majority rule)
+    const cells = grid.zones.flatMap((z) => z.cells)
+    const selectedArr = cells.filter((c) => selectedCells.has(c.cell_id))
+    const boldCount = selectedArr.filter((c) => c.is_bold).length
+    const newBold = boldCount < selectedArr.length / 2
+
+    setGrid((prev) => {
+      if (!prev) return prev
+      return {
+        ...prev,
+        zones: prev.zones.map((zone) => ({
+          ...zone,
+          cells: zone.cells.map((cell) =>
+            selectedCells.has(cell.cell_id) ? { ...cell, is_bold: newBold } : cell,
+          ),
+        })),
+      }
+    })
+    setDirty(true)
+    setSelectedCells(new Set())
+  }, [grid, selectedCells, pushUndo, setGrid, setDirty])
+
+  return {
+    // Cell editing
+    updateCellText,
+    setCellColor,
+    // Column formatting
+    toggleColumnBold,
+    // Row formatting
+    toggleRowHeader,
+    // Pattern correction
+    autoCorrectColumnPatterns,
+    // Multi-select
+    selectedCells,
+    toggleCellSelection,
+    clearCellSelection,
+    toggleSelectedBold,
+  }
+}
diff --git a/admin-lehrer/components/grid-editor/useGridEditorApi.ts b/admin-lehrer/components/grid-editor/useGridEditorApi.ts
new file mode 100644
index 0000000..f581b79
--- /dev/null
+++ b/admin-lehrer/components/grid-editor/useGridEditorApi.ts
@@ -0,0 +1,241 @@
+import { useCallback, useEffect, useRef } from 'react'
+import type { StructuredGrid } from './types'
+import type { IpaMode, SyllableMode } from './gridEditorTypes'
+import { KLAUSUR_API } from './gridEditorTypes'
+
+interface ApiDeps {
+  sessionId: string | null
+  ipaMode: IpaMode
+  syllableMode: SyllableMode
+  ocrEnhance: boolean
+  ocrMaxCols: number
+  ocrMinConf: number
+  visionFusion: boolean
+  documentCategory: string
+  setGrid: React.Dispatch<React.SetStateAction<StructuredGrid | null>>
+  setLoading: React.Dispatch<React.SetStateAction<boolean>>
+  setSaving: React.Dispatch<React.SetStateAction<boolean>>
+  setError: React.Dispatch<React.SetStateAction<string | null>>
+  setDirty: React.Dispatch<React.SetStateAction<boolean>>
+  grid: StructuredGrid | null
+  undoStack: React.MutableRefObject<string[]>
+  redoStack: React.MutableRefObject<string[]>
+}
+
+export function useGridEditorApi(deps: ApiDeps) {
+  const {
+    sessionId,
+    ipaMode,
+    syllableMode,
+    ocrEnhance,
+    ocrMaxCols,
+    ocrMinConf,
+    visionFusion,
+    documentCategory,
+    setGrid,
+    setLoading,
+    setSaving,
+    setError,
+    setDirty,
+    grid,
+    undoStack,
+    redoStack,
+  } = deps
+
+  // ------------------------------------------------------------------
+  // Build grid
+  // ------------------------------------------------------------------
+
+  const buildGrid = useCallback(async () => {
+    if (!sessionId) return
+    setLoading(true)
+    setError(null)
+    try {
+      const params = new URLSearchParams()
+      params.set('ipa_mode', ipaMode)
+      params.set('syllable_mode', syllableMode)
+      params.set('enhance', String(ocrEnhance))
+      if (ocrMaxCols > 0) params.set('max_cols', String(ocrMaxCols))
+      if (ocrMinConf > 0) params.set('min_conf', String(ocrMinConf))
+      const res = await fetch(
+        `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/build-grid?${params}`,
+        { method: 'POST' },
+      )
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}))
+        throw new Error(data.detail || `HTTP ${res.status}`)
+      }
+      const data: StructuredGrid = await res.json()
+      setGrid(data)
+      setDirty(false)
+      undoStack.current = []
+      redoStack.current = []
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e))
+    } finally {
+      setLoading(false)
+    }
+  }, [sessionId, ipaMode, syllableMode, ocrEnhance, ocrMaxCols, ocrMinConf, setGrid, setLoading, setError, setDirty, undoStack, redoStack])
+
+  // ------------------------------------------------------------------
+  // Re-run OCR with current quality settings, then rebuild grid
+  // ------------------------------------------------------------------
+
+  const rerunOcr = useCallback(async () => {
+    if (!sessionId) return
+    setLoading(true)
+    setError(null)
+    try {
+      const params = new URLSearchParams()
+      params.set('ipa_mode', ipaMode)
+      params.set('syllable_mode', syllableMode)
+      params.set('enhance', String(ocrEnhance))
+      if (ocrMaxCols > 0) params.set('max_cols', String(ocrMaxCols))
+      if (ocrMinConf > 0) params.set('min_conf', String(ocrMinConf))
+      params.set('vision_fusion', String(visionFusion))
+      if (documentCategory) params.set('doc_category', documentCategory)
+      const res = await fetch(
+        `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/rerun-ocr-and-build-grid?${params}`,
+        { method: 'POST' },
+      )
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}))
+        throw new Error(data.detail || `HTTP ${res.status}`)
+      }
+      const data: StructuredGrid = await res.json()
+      setGrid(data)
+      setDirty(false)
+      undoStack.current = []
+      redoStack.current = []
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e))
+    } finally {
+      setLoading(false)
+    }
+  }, [sessionId, ipaMode, syllableMode, ocrEnhance, ocrMaxCols, ocrMinConf, visionFusion, documentCategory, setGrid, setLoading, setError, setDirty, undoStack, redoStack])
+
+  // ------------------------------------------------------------------
+  // Load grid (with auto-build fallback on 404)
+  // ------------------------------------------------------------------
+
+  const loadGrid = useCallback(async () => {
+    if (!sessionId) return
+    setLoading(true)
+    setError(null)
+    try {
+      const res = await fetch(
+        `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/grid-editor`,
+      )
+      if (res.status === 404) {
+        // No grid yet — build it with current modes
+        const params = new URLSearchParams()
+        params.set('ipa_mode', ipaMode)
+        params.set('syllable_mode', syllableMode)
+        params.set('enhance', String(ocrEnhance))
+        if (ocrMaxCols > 0) params.set('max_cols', String(ocrMaxCols))
+        if (ocrMinConf > 0) params.set('min_conf', String(ocrMinConf))
+        const buildRes = await fetch(
+          `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/build-grid?${params}`,
+          { method: 'POST' },
+        )
+        if (buildRes.ok) {
+          const data: StructuredGrid = await buildRes.json()
+          setGrid(data)
+          setDirty(false)
+        }
+        return
+      }
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}))
+        throw new Error(data.detail || `HTTP ${res.status}`)
+      }
+      const data: StructuredGrid = await res.json()
+      setGrid(data)
+      setDirty(false)
+      undoStack.current = []
+      redoStack.current = []
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e))
+    } finally {
+      setLoading(false)
+    }
+    // Only depends on sessionId — mode changes are handled by the
+    // separate useEffect below, not by re-triggering loadGrid.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sessionId])
+
+  // ------------------------------------------------------------------
+  // Auto-rebuild when IPA or syllable mode changes (skip initial mount)
+  // ------------------------------------------------------------------
+
+  const mountedRef = useRef(false)
+  useEffect(() => {
+    if (!mountedRef.current) {
+      // Skip the first trigger (component mount) — don't rebuild yet
+      mountedRef.current = true
+      return
+    }
+    if (!sessionId) return
+    const rebuild = async () => {
+      setLoading(true)
+      setError(null)
+      try {
+        const params = new URLSearchParams()
+        params.set('ipa_mode', ipaMode)
+        params.set('syllable_mode', syllableMode)
+        const res = await fetch(
+          `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/build-grid?${params}`,
+          { method: 'POST' },
+        )
+        if (!res.ok) {
+          const data = await res.json().catch(() => ({}))
+          throw new Error(data.detail || `HTTP ${res.status}`)
+        }
+        const data: StructuredGrid = await res.json()
+        setGrid(data)
+        setDirty(false)
+      } catch (e) {
+        setError(e instanceof Error ? e.message : String(e))
+      } finally {
+        setLoading(false)
+      }
+    }
+    rebuild()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ipaMode, syllableMode])
+
+  // ------------------------------------------------------------------
+  // Save grid
+  // ------------------------------------------------------------------
+
+  const saveGrid = useCallback(async () => {
+    if (!sessionId || !grid) return
+    setSaving(true)
+    try {
+      const res = await fetch(
+        `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/save-grid`,
+        {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(grid),
+        },
+      )
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}))
+        throw new Error(data.detail || `HTTP ${res.status}`)
+      }
+      setDirty(false)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e))
+    } finally {
+      setSaving(false)
+    }
+  }, [sessionId, grid, setSaving, setError, setDirty])
+
+  return {
+    buildGrid,
+    rerunOcr,
+    loadGrid,
+    saveGrid,
+  }
+}
diff --git a/admin-lehrer/components/grid-editor/useGridEditorLayout.ts b/admin-lehrer/components/grid-editor/useGridEditorLayout.ts
new file mode 100644
index 0000000..ac422ef
--- /dev/null
+++ b/admin-lehrer/components/grid-editor/useGridEditorLayout.ts
@@ -0,0 +1,431 @@
+import { useCallback } from 'react'
+import type { StructuredGrid, GridZone, LayoutDividers } from './types'
+
+interface LayoutDeps {
+  grid: StructuredGrid | null
+  setGrid: React.Dispatch<React.SetStateAction<StructuredGrid | null>>
+  setDirty: React.Dispatch<React.SetStateAction<boolean>>
+  pushUndo: (zones: GridZone[]) => void
+}
+
+export function useGridEditorLayout(deps: LayoutDeps) {
+  const { grid, setGrid, setDirty, pushUndo } = deps
+
+  // ------------------------------------------------------------------
+  // Column management
+  // ------------------------------------------------------------------
+
+  const deleteColumn = useCallback(
+    (zoneIndex: number, colIndex: number) => {
+      if (!grid) return
+      const zone = grid.zones.find((z) => z.zone_index === zoneIndex)
+      if (!zone || zone.columns.length <= 1) return // keep at least 1 column
+      pushUndo(grid.zones)
+
+      setGrid((prev) => {
+        if (!prev) return prev
+        return {
+          ...prev,
+          zones: prev.zones.map((z) => {
+            if (z.zone_index !== zoneIndex) return z
+            const deletedCol = z.columns.find((c) => c.index === colIndex)
+            const newColumns = z.columns
+              .filter((c) => c.index !== colIndex)
+              .map((c, i) => {
+                const result = { ...c, index: i, label: `column_${i + 1}` }
+                // Merge x-boundary: previous column absorbs deleted column's space
+                if (deletedCol) {
+                  if (c.index === colIndex - 1) {
+                    result.x_max_pct = deletedCol.x_max_pct
+                    result.x_max_px = deletedCol.x_max_px
+                  } else if (colIndex === 0 && c.index === 1) {
+                    result.x_min_pct = deletedCol.x_min_pct
+                    result.x_min_px = deletedCol.x_min_px
+                  }
+                }
+                return result
+              })
+            const newCells = z.cells
+              .filter((c) => c.col_index !== colIndex)
+              .map((c) => {
+                const newCI = c.col_index > colIndex ? c.col_index - 1 : c.col_index
+                return {
+                  ...c,
+                  col_index: newCI,
+                  cell_id: `Z${zoneIndex}_R${String(c.row_index).padStart(2, '0')}_C${newCI}`,
+                }
+              })
+            return { ...z, columns: newColumns, cells: newCells }
+          }),
+          summary: {
+            ...prev.summary,
+            total_columns: prev.summary.total_columns - 1,
+            total_cells: prev.zones.reduce(
+              (sum, z) =>
+                sum +
+                (z.zone_index === zoneIndex
+                  ? z.cells.filter((c) => c.col_index !== colIndex).length
+                  : z.cells.length),
+              0,
+            ),
+          },
+        }
+      })
+      setDirty(true)
+    },
+    [grid, pushUndo, setGrid, setDirty],
+  )
+
+  const addColumn = useCallback(
+    (zoneIndex: number, afterColIndex: number) => {
+      if (!grid) return
+      const zone = grid.zones.find((z) => z.zone_index === zoneIndex)
+      if (!zone) return
+      pushUndo(grid.zones)
+
+      const newColIndex = afterColIndex + 1
+
+      setGrid((prev) => {
+        if (!prev) return prev
+        return {
+          ...prev,
+          zones: prev.zones.map((z) => {
+            if (z.zone_index !== zoneIndex) return z
+            // Shift existing columns
+            const shiftedCols = z.columns.map((c) =>
+              c.index > afterColIndex ? { ...c, index: c.index + 1, label: `column_${c.index + 2}` } : c,
+            )
+            // Insert new column
+            const refCol = z.columns.find((c) => c.index === afterColIndex) || z.columns[z.columns.length - 1]
+            const newCol = {
+              index: newColIndex,
+              label: `column_${newColIndex + 1}`,
+              x_min_px: refCol.x_max_px,
+              x_max_px: refCol.x_max_px + (refCol.x_max_px - refCol.x_min_px),
+              x_min_pct: refCol.x_max_pct,
+              x_max_pct: Math.min(100, refCol.x_max_pct + (refCol.x_max_pct - refCol.x_min_pct)),
+              bold: false,
+            }
+            const allCols = [...shiftedCols, newCol].sort((a, b) => a.index - b.index)
+
+            // Shift existing cells and create empty cells for new column
+            const shiftedCells = z.cells.map((c) => {
+              if (c.col_index > afterColIndex) {
+                const newCI = c.col_index + 1
+                return {
+                  ...c,
+                  col_index: newCI,
+                  cell_id: `Z${zoneIndex}_R${String(c.row_index).padStart(2, '0')}_C${newCI}`,
+                }
+              }
+              return c
+            })
+            // Create empty cells for each row
+            const newCells = z.rows.map((row) => ({
+              cell_id: `Z${zoneIndex}_R${String(row.index).padStart(2, '0')}_C${newColIndex}`,
+              zone_index: zoneIndex,
+              row_index: row.index,
+              col_index: newColIndex,
+              col_type: `column_${newColIndex + 1}`,
+              text: '',
+              confidence: 0,
+              bbox_px: { x: 0, y: 0, w: 0, h: 0 },
+              bbox_pct: { x: 0, y: 0, w: 0, h: 0 },
+              word_boxes: [],
+              ocr_engine: 'manual',
+              is_bold: false,
+            }))
+
+            return { ...z, columns: allCols, cells: [...shiftedCells, ...newCells] }
+          }),
+          summary: {
+            ...prev.summary,
+            total_columns: prev.summary.total_columns + 1,
+            total_cells: prev.summary.total_cells + (zone?.rows.length ?? 0),
+          },
+        }
+      })
+      setDirty(true)
+    },
+    [grid, pushUndo, setGrid, setDirty],
+  )
+
+  // ------------------------------------------------------------------
+  // Row management
+  // ------------------------------------------------------------------
+
+  const deleteRow = useCallback(
+    (zoneIndex: number, rowIndex: number) => {
+      if (!grid) return
+      const zone = grid.zones.find((z) => z.zone_index === zoneIndex)
+      if (!zone || zone.rows.length <= 1) return // keep at least 1 row
+      pushUndo(grid.zones)
+
+      setGrid((prev) => {
+        if (!prev) return prev
+        return {
+          ...prev,
+          zones: prev.zones.map((z) => {
+            if (z.zone_index !== zoneIndex) return z
+            const newRows = z.rows
+              .filter((r) => r.index !== rowIndex)
+              .map((r, i) => ({ ...r, index: i }))
+            const newCells = z.cells
+              .filter((c) => c.row_index !== rowIndex)
+              .map((c) => {
+                const newRI = c.row_index > rowIndex ? c.row_index - 1 : c.row_index
+                return {
+                  ...c,
+                  row_index: newRI,
+                  cell_id: `Z${zoneIndex}_R${String(newRI).padStart(2, '0')}_C${c.col_index}`,
+                }
+              })
+            return { ...z, rows: newRows, cells: newCells }
+          }),
+          summary: {
+            ...prev.summary,
+            total_rows: prev.summary.total_rows - 1,
+            total_cells: prev.zones.reduce(
+              (sum, z) =>
+                sum +
+                (z.zone_index === zoneIndex
+                  ? z.cells.filter((c) => c.row_index !== rowIndex).length
+                  : z.cells.length),
+              0,
+            ),
+          },
+        }
+      })
+      setDirty(true)
+    },
+    [grid, pushUndo, setGrid, setDirty],
+  )
+
+  const addRow = useCallback(
+    (zoneIndex: number, afterRowIndex: number) => {
+      if (!grid) return
+      const zone = grid.zones.find((z) => z.zone_index === zoneIndex)
+      if (!zone) return
+      pushUndo(grid.zones)
+
+      const newRowIndex = afterRowIndex + 1
+
+      setGrid((prev) => {
+        if (!prev) return prev
+        return {
+          ...prev,
+          zones: prev.zones.map((z) => {
+            if (z.zone_index !== zoneIndex) return z
+            // Shift existing rows
+            const shiftedRows = z.rows.map((r) =>
+              r.index > afterRowIndex ? { ...r, index: r.index + 1 } : r,
+            )
+            // Insert new row
+            const refRow = z.rows.find((r) => r.index === afterRowIndex) || z.rows[z.rows.length - 1]
+            const newRow = {
+              index: newRowIndex,
+              y_min_px: refRow.y_max_px,
+              y_max_px: refRow.y_max_px + (refRow.y_max_px - refRow.y_min_px),
+              y_min_pct: refRow.y_max_pct,
+              y_max_pct: Math.min(100, refRow.y_max_pct + (refRow.y_max_pct - refRow.y_min_pct)),
+              is_header: false,
+              is_footer: false,
+            }
+            const allRows = [...shiftedRows, newRow].sort((a, b) => a.index - b.index)
+
+            // Shift existing cells
+            const shiftedCells = z.cells.map((c) => {
+              if (c.row_index > afterRowIndex) {
+                const newRI = c.row_index + 1
+                return {
+                  ...c,
+                  row_index: newRI,
+                  cell_id: `Z${zoneIndex}_R${String(newRI).padStart(2, '0')}_C${c.col_index}`,
+                }
+              }
+              return c
+            })
+            // Create empty cells for each column
+            const newCells = z.columns.map((col) => ({
+              cell_id: `Z${zoneIndex}_R${String(newRowIndex).padStart(2, '0')}_C${col.index}`,
+              zone_index: zoneIndex,
+              row_index: newRowIndex,
+              col_index: col.index,
+              col_type: col.label,
+              text: '',
+              confidence: 0,
+              bbox_px: { x: 0, y: 0, w: 0, h: 0 },
+              bbox_pct: { x: 0, y: 0, w: 0, h: 0 },
+              word_boxes: [],
+              ocr_engine: 'manual',
+              is_bold: false,
+            }))
+
+            return { ...z, rows: allRows, cells: [...shiftedCells, ...newCells] }
+          }),
+          summary: {
+            ...prev.summary,
+            total_rows: prev.summary.total_rows + 1,
+            total_cells: prev.summary.total_cells + (zone?.columns.length ?? 0),
+          },
+        }
+      })
+      setDirty(true)
+    },
+    [grid, pushUndo, setGrid, setDirty],
+  )
+
+  // ------------------------------------------------------------------
+  // Layout divider editing (image overlay)
+  // ------------------------------------------------------------------
+
+  /** Capture current state for undo — call once at drag start. */
+  const commitUndoPoint = useCallback(() => {
+    if (!grid) return
+    pushUndo(grid.zones)
+  }, [grid, pushUndo])
+
+  /** Move a column boundary. boundaryIndex 0 = left edge of col 0, etc. */
+  const updateColumnDivider = useCallback(
+    (zoneIndex: number, boundaryIndex: number, newXPct: number) => {
+      if (!grid) return
+      setGrid((prev) => {
+        if (!prev) return prev
+        const imgW = prev.image_width || 1
+        const newPx = Math.round((newXPct / 100) * imgW)
+        return {
+          ...prev,
+          zones: prev.zones.map((z) => {
+            if (z.zone_index !== zoneIndex) return z
+            return {
+              ...z,
+              columns: z.columns.map((col) => {
+                // Right edge of the column before this boundary
+                if (col.index === boundaryIndex - 1) {
+                  return { ...col, x_max_pct: newXPct, x_max_px: newPx }
+                }
+                // Left edge of the column at this boundary
+                if (col.index === boundaryIndex) {
+                  return { ...col, x_min_pct: newXPct, x_min_px: newPx }
+                }
+                return col
+              }),
+            }
+          }),
+        }
+      })
+      setDirty(true)
+    },
+    [grid, setGrid, setDirty],
+  )
+
+  /** Update horizontal layout guidelines (margins, header, footer). */
+  const updateLayoutHorizontals = useCallback(
+    (horizontals: LayoutDividers['horizontals']) => {
+      if (!grid) return
+      setGrid((prev) => {
+        if (!prev) return prev
+        return {
+          ...prev,
+          layout_dividers: {
+            ...(prev.layout_dividers || { horizontals: {} }),
+            horizontals,
+          },
+        }
+      })
+      setDirty(true)
+    },
+    [grid, setGrid, setDirty],
+  )
+
+  /** Split a column at a given x percentage, creating a new column. */
+  const splitColumnAt = useCallback(
+    (zoneIndex: number, xPct: number) => {
+      if (!grid) return
+      const zone = grid.zones.find((z) => z.zone_index === zoneIndex)
+      if (!zone) return
+
+      const sorted = [...zone.columns].sort((a, b) => a.index - b.index)
+      const targetCol = sorted.find((c) => c.x_min_pct <= xPct && c.x_max_pct >= xPct)
+      if (!targetCol) return
+
+      pushUndo(grid.zones)
+      const newColIndex = targetCol.index + 1
+      const imgW = grid.image_width || 1
+
+      setGrid((prev) => {
+        if (!prev) return prev
+        return {
+          ...prev,
+          zones: prev.zones.map((z) => {
+            if (z.zone_index !== zoneIndex) return z
+            const leftCol = {
+              ...targetCol,
+              x_max_pct: xPct,
+              x_max_px: Math.round((xPct / 100) * imgW),
+            }
+            const rightCol = {
+              index: newColIndex,
+              label: `column_${newColIndex + 1}`,
+              x_min_pct: xPct,
+              x_max_pct: targetCol.x_max_pct,
+              x_min_px: Math.round((xPct / 100) * imgW),
+              x_max_px: targetCol.x_max_px,
+              bold: false,
+            }
+            const updatedCols = z.columns.map((c) => {
+              if (c.index === targetCol.index) return leftCol
+              if (c.index > targetCol.index) return { ...c, index: c.index + 1, label: `column_${c.index + 2}` }
+              return c
+            })
+            const allCols = [...updatedCols, rightCol].sort((a, b) => a.index - b.index)
+            const shiftedCells = z.cells.map((c) => {
+              if (c.col_index > targetCol.index) {
+                const newCI = c.col_index + 1
+                return {
+                  ...c,
+                  col_index: newCI,
+                  cell_id: `Z${zoneIndex}_R${String(c.row_index).padStart(2, '0')}_C${newCI}`,
+                }
+              }
+              return c
+            })
+            const newCells = z.rows.map((row) => ({
+              cell_id: `Z${zoneIndex}_R${String(row.index).padStart(2, '0')}_C${newColIndex}`,
+              zone_index: zoneIndex,
+              row_index: row.index,
+              col_index: newColIndex,
+              col_type: `column_${newColIndex + 1}`,
+              text: '',
+              confidence: 0,
+              bbox_px: { x: 0, y: 0, w: 0, h: 0 },
+              bbox_pct: { x: 0, y: 0, w: 0, h: 0 },
+              word_boxes: [],
+              ocr_engine: 'manual',
+              is_bold: false,
+            }))
+            return { ...z, columns: allCols, cells: [...shiftedCells, ...newCells] }
+          }),
+          summary: {
+            ...prev.summary,
+            total_columns: prev.summary.total_columns + 1,
+            total_cells: prev.summary.total_cells + (zone.rows.length),
+          },
+        }
+      })
+      setDirty(true)
+    },
+    [grid, pushUndo, setGrid, setDirty],
+  )
+
+  return {
+    deleteColumn,
+    addColumn,
+    deleteRow,
+    addRow,
+    commitUndoPoint,
+    updateColumnDivider,
+    updateLayoutHorizontals,
+    splitColumnAt,
+  }
+}
diff --git a/admin-lehrer/components/ocr-overlay/OverlayCellRenderer.tsx b/admin-lehrer/components/ocr-overlay/OverlayCellRenderer.tsx
new file mode 100644
index 0000000..3022fae
--- /dev/null
+++ b/admin-lehrer/components/ocr-overlay/OverlayCellRenderer.tsx
@@ -0,0 +1,148 @@
+'use client'
+
+import type { EditableCell } from './overlay-reconstruction-types'
+import type { WordPosition } from './usePixelWordPositions'
+
+interface OverlayCellRendererProps {
+  cell: EditableCell
+  displayText: string
+  edited: boolean
+  wordPositions: WordPosition[] | undefined
+  medianCellHeightPx: number
+  fontScale: number
+  globalBold: boolean
+  colorValue: string
+  handleTextChange: (cellId: string, newText: string) => void
+  handleKeyDown: (e: React.KeyboardEvent, cellId: string) => void
+  resetCell: (cellId: string) => void
+}
+
+/** Renders a single cell in the overlay -- either as pixel-positioned word spans or a fallback input. */
+export function OverlayCellRenderer({
+  cell,
+  displayText,
+  edited,
+  wordPositions,
+  medianCellHeightPx,
+  fontScale,
+  globalBold,
+  colorValue,
+  handleTextChange,
+  handleKeyDown,
+  resetCell,
+}: OverlayCellRendererProps) {
+  const bboxPct = cell.bboxPct
+  const fontFamily = "'Liberation Sans', Arial, sans-serif"
+
+  // Pixel-analysed: render word-groups at detected positions
+  if (wordPositions && wordPositions.length > 0) {
+    return (
+      <>
+        {wordPositions.map((wp, i) => {
+          const autoFontPx = medianCellHeightPx * wp.fontRatio * fontScale
+          const fs = Math.max(6, autoFontPx)
+
+          if (wordPositions.length > 1) {
+            return (
+              <span
+                key={`${cell.cellId}_wp_${i}`}
+                className="absolute leading-none pointer-events-none select-none"
+                style={{
+                  left: `${wp.xPct}%`,
+                  top: `${wp.yPct}%`,
+                  width: `${wp.wPct}%`,
+                  height: `${wp.hPct}%`,
+                  fontSize: `${fs}px`,
+                  fontWeight: globalBold ? 'bold' : 'normal',
+                  fontFamily,
+                  display: 'flex',
+                  alignItems: 'center',
+                  whiteSpace: 'nowrap',
+                  overflow: 'visible',
+                  color: colorValue,
+                }}
+              >
+                {wp.text}
+              </span>
+            )
+          }
+
+          return (
+            <div key={`${cell.cellId}_wp_${i}`} className="absolute group" style={{
+              left: `${wp.xPct}%`,
+              top: `${wp.yPct}%`,
+              width: `${wp.wPct}%`,
+              height: `${wp.hPct}%`,
+            }}>
+              <input
+                id={`cell-${cell.cellId}`}
+                type="text"
+                value={displayText}
+                onChange={(e) => handleTextChange(cell.cellId, e.target.value)}
+                onKeyDown={(e) => handleKeyDown(e, cell.cellId)}
+                className={`w-full h-full bg-transparent border-0 outline-none px-0 transition-colors ${
+                  edited ? 'bg-green-50/30' : ''
+                }`}
+                style={{
+                  fontSize: `${fs}px`,
+                  fontWeight: globalBold ? 'bold' : 'normal',
+                  fontFamily,
+                  lineHeight: '1',
+                  color: colorValue,
+                }}
+                title={`${cell.cellId} (${cell.colType})`}
+              />
+              <ResetButton edited={edited} cellId={cell.cellId} resetCell={resetCell} />
+            </div>
+          )
+        })}
+      </>
+    )
+  }
+
+  // Fallback: no pixel data -- single input at cell bbox
+  if (!cell.text) return null
+
+  const fontSize = Math.max(6, medianCellHeightPx * fontScale)
+  return (
+    <div key={cell.cellId} className="absolute group" style={{
+      left: `${bboxPct.x}%`,
+      top: `${bboxPct.y}%`,
+      width: `${bboxPct.w}%`,
+      height: `${bboxPct.h}%`,
+    }}>
+      <input
+        id={`cell-${cell.cellId}`}
+        type="text"
+        value={displayText}
+        onChange={(e) => handleTextChange(cell.cellId, e.target.value)}
+        onKeyDown={(e) => handleKeyDown(e, cell.cellId)}
+        className={`w-full h-full bg-transparent border-0 outline-none px-0 transition-colors ${
+          edited ? 'bg-green-50/30' : ''
+        }`}
+        style={{
+          fontSize: `${fontSize}px`,
+          fontWeight: globalBold ? 'bold' : 'normal',
+          fontFamily,
+          lineHeight: '1',
+          color: colorValue,
+        }}
+        title={`${cell.cellId} (${cell.colType})`}
+      />
+      <ResetButton edited={edited} cellId={cell.cellId} resetCell={resetCell} />
+    </div>
+  )
+}
+
+function ResetButton({ edited, cellId, resetCell }: { edited: boolean; cellId: string; resetCell: (id: string) => void }) {
+  if (!edited) return null
+  return (
+    <button
+      onClick={() => resetCell(cellId)}
+      className="absolute -top-1 -right-1 w-4 h-4 bg-red-500 text-white rounded-full text-[9px] leading-none opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
+      title="Zuruecksetzen"
+    >
+      &times;
+    </button>
+  )
+}
diff --git a/admin-lehrer/components/ocr-overlay/OverlayReconstruction.tsx b/admin-lehrer/components/ocr-overlay/OverlayReconstruction.tsx
index a6b7620..2786f40 100644
--- a/admin-lehrer/components/ocr-overlay/OverlayReconstruction.tsx
+++ b/admin-lehrer/components/ocr-overlay/OverlayReconstruction.tsx
@@ -1,297 +1,38 @@
 'use client'
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import type { GridResult, GridCell, RowResult, RowItem } from '@/app/(admin)/ai/ocr-overlay/types'
-import { usePixelWordPositions } from './usePixelWordPositions'
-import { useSlideWordPositions } from './useSlideWordPositions'
-
-const KLAUSUR_API = '/klausur-api'
-
-interface OverlayReconstructionProps {
-  sessionId: string | null
-  onNext: () => void
-  /** When set, use this data directly instead of fetching from the session API. */
-  wordResultOverride?: { cells: GridCell[]; image_width: number; image_height: number; [key: string]: unknown }
-}
-
-interface EditableCell {
-  cellId: string
-  text: string
-  originalText: string
-  bboxPct: { x: number; y: number; w: number; h: number }
-  colType: string
-  rowIndex: number
-  colIndex: number
-}
-
-type UndoAction = { cellId: string; oldText: string; newText: string }
+import type { OverlayReconstructionProps } from './overlay-reconstruction-types'
+import { KLAUSUR_API } from './overlay-reconstruction-types'
+import { useOverlayReconstructionState } from './useOverlayReconstructionState'
+import { OverlayToolbar } from './OverlayToolbar'
+import { OverlayCellRenderer } from './OverlayCellRenderer'
 
 export function OverlayReconstruction({ sessionId, onNext, wordResultOverride }: OverlayReconstructionProps) {
-  const [status, setStatus] = useState<'loading' | 'ready' | 'saving' | 'saved' | 'error'>('loading')
-  const [error, setError] = useState('')
-  const [cells, setCells] = useState<EditableCell[]>([])
-  const [gridCells, setGridCells] = useState<GridCell[]>([])
-  const [editedTexts, setEditedTexts] = useState<Map<string, string>>(new Map())
+  const state = useOverlayReconstructionState(sessionId, wordResultOverride)
 
-  // Undo/Redo
-  const [undoStack, setUndoStack] = useState<UndoAction[]>([])
-  const [redoStack, setRedoStack] = useState<UndoAction[]>([])
-
-  // Overlay state
-  const [rows, setRows] = useState<RowItem[]>([])
-  const [imageNaturalSize, setImageNaturalSize] = useState<{ w: number; h: number } | null>(null)
-  const [fontScale, setFontScale] = useState(0.7)
-  const [globalBold, setGlobalBold] = useState(false)
-  const [imageRotation, setImageRotation] = useState<0 | 180>(0)
-  const [textOpacity, setTextOpacity] = useState(100)
-  const [textColor, setTextColor] = useState<'red' | 'blue' | 'black'>('red')
-  const [positioningMode, setPositioningMode] = useState<'cluster' | 'slide'>('slide')
-  const reconRef = useRef<HTMLDivElement>(null)
-  const [reconWidth, setReconWidth] = useState(0)
-
-  // Pixel-based word positions (both algorithms run, toggle selects which to use)
-  const overlayImageUrl = sessionId
-    ? `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/cropped`
-    : ''
-  const clusterPositions = usePixelWordPositions(
-    overlayImageUrl,
-    gridCells,
-    status === 'ready',
-    imageRotation,
-  )
-  const slidePositions = useSlideWordPositions(
-    overlayImageUrl,
-    gridCells,
-    status === 'ready',
-    imageRotation,
-  )
-  const cellWordPositions = positioningMode === 'slide' ? slidePositions : clusterPositions
-
-  // Track container width
-  useEffect(() => {
-    const el = reconRef.current
-    if (!el) return
-    const obs = new ResizeObserver(entries => {
-      for (const entry of entries) setReconWidth(entry.contentRect.width)
-    })
-    obs.observe(el)
-    return () => obs.disconnect()
-  }, [status])
-
-  // Load session data
-  useEffect(() => {
-    if (wordResultOverride) {
-      applyWordResult(wordResultOverride)
-      return
-    }
-    if (!sessionId) return
-    loadSessionData()
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sessionId, wordResultOverride])
-
-  const applyWordResult = (wordResult: { cells: GridCell[]; image_width: number; image_height: number; [key: string]: unknown }) => {
-    const rawGridCells: GridCell[] = wordResult.cells || []
-    setGridCells(rawGridCells)
-
-    const editableCells: EditableCell[] = rawGridCells.map(c => ({
-      cellId: c.cell_id,
-      text: c.text,
-      originalText: c.text,
-      bboxPct: c.bbox_pct,
-      colType: c.col_type,
-      rowIndex: c.row_index,
-      colIndex: c.col_index,
-    }))
-    setCells(editableCells)
-    setEditedTexts(new Map())
-    setUndoStack([])
-    setRedoStack([])
-
-    if (wordResult.image_width && wordResult.image_height) {
-      setImageNaturalSize({ w: wordResult.image_width, h: wordResult.image_height })
-    }
-
-    setStatus('ready')
-  }
-
-  const loadSessionData = async () => {
-    if (!sessionId) return
-    setStatus('loading')
-    try {
-      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}`)
-      if (!res.ok) throw new Error(`HTTP ${res.status}`)
-      const data = await res.json()
-
-      const wordResult: GridResult | undefined = data.word_result
-      if (!wordResult) {
-        setError('Keine Worterkennungsdaten gefunden. Bitte zuerst den Woerter-Schritt abschliessen.')
-        setStatus('error')
-        return
-      }
-
-      applyWordResult(wordResult as unknown as { cells: GridCell[]; image_width: number; image_height: number })
-
-      // Load rows
-      const rowResult: RowResult | undefined = data.row_result
-      if (rowResult?.rows) setRows(rowResult.rows)
-    } catch (e: unknown) {
-      setError(e instanceof Error ? e.message : String(e))
-      setStatus('error')
-    }
-  }
-
-  const handleTextChange = useCallback((cellId: string, newText: string) => {
-    setEditedTexts(prev => {
-      const oldText = prev.get(cellId)
-      const cell = cells.find(c => c.cellId === cellId)
-      const prevText = oldText ?? cell?.text ?? ''
-
-      setUndoStack(stack => [...stack, { cellId, oldText: prevText, newText }])
-      setRedoStack([])
-
-      const next = new Map(prev)
-      next.set(cellId, newText)
-      return next
-    })
-  }, [cells])
-
-  const undo = useCallback(() => {
-    setUndoStack(stack => {
-      if (stack.length === 0) return stack
-      const action = stack[stack.length - 1]
-      const newStack = stack.slice(0, -1)
-      setRedoStack(rs => [...rs, action])
-      setEditedTexts(prev => {
-        const next = new Map(prev)
-        next.set(action.cellId, action.oldText)
-        return next
-      })
-      return newStack
-    })
-  }, [])
-
-  const redo = useCallback(() => {
-    setRedoStack(stack => {
-      if (stack.length === 0) return stack
-      const action = stack[stack.length - 1]
-      const newStack = stack.slice(0, -1)
-      setUndoStack(us => [...us, action])
-      setEditedTexts(prev => {
-        const next = new Map(prev)
-        next.set(action.cellId, action.newText)
-        return next
-      })
-      return newStack
-    })
-  }, [])
-
-  const resetCell = useCallback((cellId: string) => {
-    setEditedTexts(prev => {
-      const next = new Map(prev)
-      next.delete(cellId)
-      return next
-    })
-  }, [])
-
-  // Keyboard shortcuts
-  useEffect(() => {
-    const handler = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key === 'z') {
-        e.preventDefault()
-        if (e.shiftKey) redo()
-        else undo()
-      }
-    }
-    document.addEventListener('keydown', handler)
-    return () => document.removeEventListener('keydown', handler)
-  }, [undo, redo])
-
-  const getDisplayText = useCallback((cell: EditableCell): string => {
-    return editedTexts.get(cell.cellId) ?? cell.text
-  }, [editedTexts])
-
-  const isEdited = useCallback((cell: EditableCell): boolean => {
-    const edited = editedTexts.get(cell.cellId)
-    return edited !== undefined && edited !== cell.originalText
-  }, [editedTexts])
-
-  const changedCount = useMemo(() => {
-    let count = 0
-    for (const cell of cells) {
-      if (isEdited(cell)) count++
-    }
-    return count
-  }, [cells, isEdited])
-
-  // Tab navigation
-  const sortedCellIds = useMemo(() => {
-    return [...cells]
-      .sort((a, b) => a.rowIndex !== b.rowIndex ? a.rowIndex - b.rowIndex : a.colIndex - b.colIndex)
-      .map(c => c.cellId)
-  }, [cells])
-
-  const handleKeyDown = useCallback((e: React.KeyboardEvent, cellId: string) => {
-    if (e.key === 'Tab') {
-      e.preventDefault()
-      const idx = sortedCellIds.indexOf(cellId)
-      const nextIdx = e.shiftKey ? idx - 1 : idx + 1
-      if (nextIdx >= 0 && nextIdx < sortedCellIds.length) {
-        const nextId = sortedCellIds[nextIdx]
-        const el = document.getElementById(`cell-${nextId}`)
-        el?.focus()
-      }
-    }
-  }, [sortedCellIds])
-
-  const saveReconstruction = useCallback(async () => {
-    if (!sessionId) return
-    setStatus('saving')
-    try {
-      const cellUpdates = Array.from(editedTexts.entries())
-        .filter(([cellId, text]) => {
-          const cell = cells.find(c => c.cellId === cellId)
-          return cell && text !== cell.originalText
-        })
-        .map(([cellId, text]) => ({ cell_id: cellId, text }))
-
-      if (cellUpdates.length === 0) {
-        setStatus('saved')
-        return
-      }
-
-      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/reconstruction`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ cells: cellUpdates }),
-      })
-
-      if (!res.ok) {
-        const data = await res.json().catch(() => ({}))
-        throw new Error(data.detail || `HTTP ${res.status}`)
-      }
-
-      setStatus('saved')
-    } catch (e: unknown) {
-      setError(e instanceof Error ? e.message : String(e))
-      setStatus('error')
-    }
-  }, [sessionId, editedTexts, cells])
-
-  const dewarpedUrl = sessionId
-    ? `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/cropped`
-    : ''
-
-  // Compute median cell height (in px) for consistent font sizing
-  // Must be before early returns (Rules of Hooks)
-  const medianCellHeightPx = useMemo(() => {
-    const imgWVal = imageNaturalSize?.w || 1
-    const imgHVal = imageNaturalSize?.h || 1
-    const cH = reconWidth * (imgHVal / imgWVal)
-    if (cells.length === 0 || cH === 0) return 40
-    const heights = cells.map(c => cH * (c.bboxPct.h / 100)).sort((a, b) => a - b)
-    const mid = Math.floor(heights.length / 2)
-    return heights.length % 2 === 0 ? (heights[mid - 1] + heights[mid]) / 2 : heights[mid]
-  }, [cells, reconWidth, imageNaturalSize])
+  const {
+    status,
+    error,
+    cells,
+    rows,
+    imageNaturalSize,
+    textOpacity,
+    textColor,
+    changedCount,
+    medianCellHeightPx,
+    fontScale,
+    globalBold,
+    cellWordPositions,
+    reconRef,
+    handleTextChange,
+    handleKeyDown,
+    getDisplayText,
+    isEdited,
+    resetCell,
+    saveReconstruction,
+    loadSessionData,
+    setError,
+    setImageNaturalSize,
+  } = state
 
   if (!sessionId) {
     return <div className="text-center py-12 text-gray-400">Bitte zuerst eine Session auswaehlen.</div>
@@ -344,129 +85,15 @@ export function OverlayReconstruction({ sessionId, onNext, wordResultOverride }:
 
   const imgW = imageNaturalSize?.w || 1
   const imgH = imageNaturalSize?.h || 1
-  const containerH = reconWidth * (imgH / imgW)
+  const colorValue = textColor === 'black' ? '#1a1a1a' : textColor
+  const dewarpedUrl = sessionId
+    ? `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/cropped`
+    : ''
 
   return (
     <div className="space-y-3">
       {/* Toolbar */}
-      <div className="flex items-center justify-between bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 px-3 py-2">
-        <div className="flex items-center gap-2">
-          <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">
-            Overlay-Rekonstruktion
-          </h3>
-          <span className="text-xs text-gray-400">
-            {cells.length} Zellen &middot; {changedCount} geaendert
-          </span>
-        </div>
-        <div className="flex items-center gap-2">
-          {/* Undo/Redo */}
-          <button
-            onClick={undo}
-            disabled={undoStack.length === 0}
-            className="px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-30"
-            title="Rueckgaengig (Ctrl+Z)"
-          >
-            &#x21A9;
-          </button>
-          <button
-            onClick={redo}
-            disabled={redoStack.length === 0}
-            className="px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-30"
-            title="Wiederholen (Ctrl+Shift+Z)"
-          >
-            &#x21AA;
-          </button>
-
-          <div className="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1" />
-
-          {/* Font scale */}
-          <label className="flex items-center gap-1 text-xs text-gray-600 dark:text-gray-400">
-            Schrift
-            <input
-              type="range" min={30} max={120} value={Math.round(fontScale * 100)}
-              onChange={e => setFontScale(Number(e.target.value) / 100)}
-              className="w-20 h-1 accent-teal-600"
-            />
-            <span className="w-8 text-right font-mono">{Math.round(fontScale * 100)}%</span>
-          </label>
-          <button
-            onClick={() => setGlobalBold(b => !b)}
-            className={`px-2 py-1 text-xs rounded border transition-colors font-bold ${
-              globalBold
-                ? 'bg-teal-600 text-white border-teal-600'
-                : 'bg-white dark:bg-gray-700 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600'
-            }`}
-          >
-            B
-          </button>
-          <button
-            onClick={() => setImageRotation(r => r === 0 ? 180 : 0)}
-            className={`px-2 py-1 text-xs rounded border transition-colors ${
-              imageRotation === 180
-                ? 'bg-teal-600 text-white border-teal-600'
-                : 'bg-white dark:bg-gray-700 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600'
-            }`}
-            title="Bild 180° drehen"
-          >
-            180°
-          </button>
-
-          <div className="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1" />
-
-          {/* Positioning mode toggle */}
-          <button
-            onClick={() => setPositioningMode(m => m === 'slide' ? 'cluster' : 'slide')}
-            className={`px-2 py-1 text-xs rounded border transition-colors ${
-              positioningMode === 'slide'
-                ? 'bg-orange-500 text-white border-orange-500'
-                : 'bg-white dark:bg-gray-700 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600'
-            }`}
-            title={positioningMode === 'slide'
-              ? 'Slide-Modus: Woerter von links nach rechts schieben (klick fuer Cluster-Modus)'
-              : 'Cluster-Modus: Woerter an Pixel-Cluster zuordnen (klick fuer Slide-Modus)'}
-          >
-            {positioningMode === 'slide' ? 'Slide' : 'Cluster'}
-          </button>
-
-          <div className="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1" />
-
-          {/* Text color */}
-          {(['red', 'blue', 'black'] as const).map(c => (
-            <button
-              key={c}
-              onClick={() => setTextColor(c)}
-              className={`w-5 h-5 rounded-full border-2 transition-colors ${
-                textColor === c ? 'border-teal-500 ring-1 ring-teal-300' : 'border-gray-300 dark:border-gray-600'
-              }`}
-              style={{ backgroundColor: c === 'black' ? '#1a1a1a' : c }}
-              title={`Textfarbe: ${c}`}
-            />
-          ))}
-
-          <div className="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1" />
-
-          {/* Text opacity */}
-          <label className="flex items-center gap-1 text-xs text-gray-600 dark:text-gray-400">
-            Text
-            <input
-              type="range" min={0} max={100} value={textOpacity}
-              onChange={e => setTextOpacity(Number(e.target.value))}
-              className="w-16 h-1 accent-teal-600"
-            />
-            <span className="w-8 text-right font-mono">{textOpacity}%</span>
-          </label>
-
-          <div className="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1" />
-
-          <button
-            onClick={saveReconstruction}
-            disabled={status === 'saving'}
-            className="px-4 py-1.5 text-xs bg-teal-600 text-white rounded-lg hover:bg-teal-700 disabled:opacity-50 transition-colors font-medium"
-          >
-            Speichern
-          </button>
-        </div>
-      </div>
+      <OverlayToolbar state={state} />
 
       {/* True overlay: text layer on top of original image */}
       <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden bg-gray-50 dark:bg-gray-900">
@@ -501,125 +128,23 @@ export function OverlayReconstruction({ sessionId, onNext, wordResultOverride }:
               />
             ))}
 
-            {/* Pixel-positioned words / editable inputs */}
-            {cells.map((cell) => {
-              const displayText = getDisplayText(cell)
-              const edited = isEdited(cell)
-              const wordPos = cellWordPositions.get(cell.cellId)
-              const bboxPct = cell.bboxPct
-              const colorValue = textColor === 'black' ? '#1a1a1a' : textColor
-
-              // Pixel-analysed: render word-groups at detected positions
-              if (wordPos && wordPos.length > 0) {
-                return wordPos.map((wp, i) => {
-                  const autoFontPx = medianCellHeightPx * wp.fontRatio * fontScale
-                  const fs = Math.max(6, autoFontPx)
-
-                  if (wordPos.length > 1) {
-                    return (
-                      <span
-                        key={`${cell.cellId}_wp_${i}`}
-                        className="absolute leading-none pointer-events-none select-none"
-                        style={{
-                          left: `${wp.xPct}%`,
-                          top: `${wp.yPct}%`,
-                          width: `${wp.wPct}%`,
-                          height: `${wp.hPct}%`,
-                          fontSize: `${fs}px`,
-                          fontWeight: globalBold ? 'bold' : 'normal',
-                          fontFamily: "'Liberation Sans', Arial, sans-serif",
-                          display: 'flex',
-                          alignItems: 'center',
-                          whiteSpace: 'nowrap',
-                          overflow: 'visible',
-                          color: colorValue,
-                        }}
-                      >
-                        {wp.text}
-                      </span>
-                    )
-                  }
-
-                  return (
-                    <div key={`${cell.cellId}_wp_${i}`} className="absolute group" style={{
-                      left: `${wp.xPct}%`,
-                      top: `${wp.yPct}%`,
-                      width: `${wp.wPct}%`,
-                      height: `${wp.hPct}%`,
-                    }}>
-                      <input
-                        id={`cell-${cell.cellId}`}
-                        type="text"
-                        value={displayText}
-                        onChange={(e) => handleTextChange(cell.cellId, e.target.value)}
-                        onKeyDown={(e) => handleKeyDown(e, cell.cellId)}
-                        className={`w-full h-full bg-transparent border-0 outline-none px-0 transition-colors ${
-                          edited ? 'bg-green-50/30' : ''
-                        }`}
-                        style={{
-                          fontSize: `${fs}px`,
-                          fontWeight: globalBold ? 'bold' : 'normal',
-                          fontFamily: "'Liberation Sans', Arial, sans-serif",
-                          lineHeight: '1',
-                          color: colorValue,
-                        }}
-                        title={`${cell.cellId} (${cell.colType})`}
-                      />
-                      {edited && (
-                        <button
-                          onClick={() => resetCell(cell.cellId)}
-                          className="absolute -top-1 -right-1 w-4 h-4 bg-red-500 text-white rounded-full text-[9px] leading-none opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
-                          title="Zuruecksetzen"
-                        >
-                          &times;
-                        </button>
-                      )}
-                    </div>
-                  )
-                })
-              }
-
-              // Fallback: no pixel data — single input at cell bbox
-              if (!cell.text) return null
-
-              const fontSize = Math.max(6, medianCellHeightPx * fontScale)
-              return (
-                <div key={cell.cellId} className="absolute group" style={{
-                  left: `${bboxPct.x}%`,
-                  top: `${bboxPct.y}%`,
-                  width: `${bboxPct.w}%`,
-                  height: `${bboxPct.h}%`,
-                }}>
-                  <input
-                    id={`cell-${cell.cellId}`}
-                    type="text"
-                    value={displayText}
-                    onChange={(e) => handleTextChange(cell.cellId, e.target.value)}
-                    onKeyDown={(e) => handleKeyDown(e, cell.cellId)}
-                    className={`w-full h-full bg-transparent border-0 outline-none px-0 transition-colors ${
-                      edited ? 'bg-green-50/30' : ''
-                    }`}
-                    style={{
-                      fontSize: `${fontSize}px`,
-                      fontWeight: globalBold ? 'bold' : 'normal',
-                      fontFamily: "'Liberation Sans', Arial, sans-serif",
-                      lineHeight: '1',
-                      color: colorValue,
-                    }}
-                    title={`${cell.cellId} (${cell.colType})`}
-                  />
-                  {edited && (
-                    <button
-                      onClick={() => resetCell(cell.cellId)}
-                      className="absolute -top-1 -right-1 w-4 h-4 bg-red-500 text-white rounded-full text-[9px] leading-none opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
-                      title="Zuruecksetzen"
-                    >
-                      &times;
-                    </button>
-                  )}
-                </div>
-              )
-            })}
+            {/* Cells */}
+            {cells.map((cell) => (
+              <OverlayCellRenderer
+                key={cell.cellId}
+                cell={cell}
+                displayText={getDisplayText(cell)}
+                edited={isEdited(cell)}
+                wordPositions={cellWordPositions.get(cell.cellId)}
+                medianCellHeightPx={medianCellHeightPx}
+                fontScale={fontScale}
+                globalBold={globalBold}
+                colorValue={colorValue}
+                handleTextChange={handleTextChange}
+                handleKeyDown={handleKeyDown}
+                resetCell={resetCell}
+              />
+            ))}
           </div>
         </div>
       </div>
diff --git a/admin-lehrer/components/ocr-overlay/OverlayToolbar.tsx b/admin-lehrer/components/ocr-overlay/OverlayToolbar.tsx
new file mode 100644
index 0000000..36ab336
--- /dev/null
+++ b/admin-lehrer/components/ocr-overlay/OverlayToolbar.tsx
@@ -0,0 +1,153 @@
+'use client'
+
+import type { OverlayReconstructionState, TextColor, PositioningMode } from './overlay-reconstruction-types'
+
+interface OverlayToolbarProps {
+  state: OverlayReconstructionState
+}
+
+export function OverlayToolbar({ state }: OverlayToolbarProps) {
+  const {
+    status,
+    cells,
+    changedCount,
+    undoStack,
+    redoStack,
+    fontScale,
+    globalBold,
+    imageRotation,
+    textOpacity,
+    textColor,
+    positioningMode,
+    undo,
+    redo,
+    setFontScale,
+    setGlobalBold,
+    setImageRotation,
+    setTextOpacity,
+    setTextColor,
+    setPositioningMode,
+    saveReconstruction,
+  } = state
+
+  return (
+    <div className="flex items-center justify-between bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 px-3 py-2">
+      <div className="flex items-center gap-2">
+        <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">
+          Overlay-Rekonstruktion
+        </h3>
+        <span className="text-xs text-gray-400">
+          {cells.length} Zellen &middot; {changedCount} geaendert
+        </span>
+      </div>
+      <div className="flex items-center gap-2">
+        {/* Undo/Redo */}
+        <button
+          onClick={undo}
+          disabled={undoStack.length === 0}
+          className="px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-30"
+          title="Rueckgaengig (Ctrl+Z)"
+        >
+          &#x21A9;
+        </button>
+        <button
+          onClick={redo}
+          disabled={redoStack.length === 0}
+          className="px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-30"
+          title="Wiederholen (Ctrl+Shift+Z)"
+        >
+          &#x21AA;
+        </button>
+
+        <div className="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1" />
+
+        {/* Font scale */}
+        <label className="flex items-center gap-1 text-xs text-gray-600 dark:text-gray-400">
+          Schrift
+          <input
+            type="range" min={30} max={120} value={Math.round(fontScale * 100)}
+            onChange={e => setFontScale(Number(e.target.value) / 100)}
+            className="w-20 h-1 accent-teal-600"
+          />
+          <span className="w-8 text-right font-mono">{Math.round(fontScale * 100)}%</span>
+        </label>
+        <button
+          onClick={() => setGlobalBold(b => !b)}
+          className={`px-2 py-1 text-xs rounded border transition-colors font-bold ${
+            globalBold
+              ? 'bg-teal-600 text-white border-teal-600'
+              : 'bg-white dark:bg-gray-700 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600'
+          }`}
+        >
+          B
+        </button>
+        <button
+          onClick={() => setImageRotation(r => r === 0 ? 180 : 0)}
+          className={`px-2 py-1 text-xs rounded border transition-colors ${
+            imageRotation === 180
+              ? 'bg-teal-600 text-white border-teal-600'
+              : 'bg-white dark:bg-gray-700 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600'
+          }`}
+          title="Bild 180° drehen"
+        >
+          180°
+        </button>
+
+        <div className="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1" />
+
+        {/* Positioning mode toggle */}
+        <button
+          onClick={() => setPositioningMode((m: PositioningMode) => m === 'slide' ? 'cluster' : 'slide')}
+          className={`px-2 py-1 text-xs rounded border transition-colors ${
+            positioningMode === 'slide'
+              ? 'bg-orange-500 text-white border-orange-500'
+              : 'bg-white dark:bg-gray-700 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600'
+          }`}
+          title={positioningMode === 'slide'
+            ? 'Slide-Modus: Woerter von links nach rechts schieben (klick fuer Cluster-Modus)'
+            : 'Cluster-Modus: Woerter an Pixel-Cluster zuordnen (klick fuer Slide-Modus)'}
+        >
+          {positioningMode === 'slide' ? 'Slide' : 'Cluster'}
+        </button>
+
+        <div className="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1" />
+
+        {/* Text color */}
+        {(['red', 'blue', 'black'] as const).map((c: TextColor) => (
+          <button
+            key={c}
+            onClick={() => setTextColor(c)}
+            className={`w-5 h-5 rounded-full border-2 transition-colors ${
+              textColor === c ? 'border-teal-500 ring-1 ring-teal-300' : 'border-gray-300 dark:border-gray-600'
+            }`}
+            style={{ backgroundColor: c === 'black' ? '#1a1a1a' : c }}
+            title={`Textfarbe: ${c}`}
+          />
+        ))}
+
+        <div className="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1" />
+
+        {/* Text opacity */}
+        <label className="flex items-center gap-1 text-xs text-gray-600 dark:text-gray-400">
+          Text
+          <input
+            type="range" min={0} max={100} value={textOpacity}
+            onChange={e => setTextOpacity(Number(e.target.value))}
+            className="w-16 h-1 accent-teal-600"
+          />
+          <span className="w-8 text-right font-mono">{textOpacity}%</span>
+        </label>
+
+        <div className="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1" />
+
+        <button
+          onClick={saveReconstruction}
+          disabled={status === 'saving'}
+          className="px-4 py-1.5 text-xs bg-teal-600 text-white rounded-lg hover:bg-teal-700 disabled:opacity-50 transition-colors font-medium"
+        >
+          Speichern
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/components/ocr-overlay/overlay-reconstruction-types.ts b/admin-lehrer/components/ocr-overlay/overlay-reconstruction-types.ts
new file mode 100644
index 0000000..96158d5
--- /dev/null
+++ b/admin-lehrer/components/ocr-overlay/overlay-reconstruction-types.ts
@@ -0,0 +1,102 @@
+import type { WordPosition } from './usePixelWordPositions'
+
+export const KLAUSUR_API = '/klausur-api'
+
+export interface OverlayReconstructionProps {
+  sessionId: string | null
+  onNext: () => void
+  /** When set, use this data directly instead of fetching from the session API. */
+  wordResultOverride?: WordResultData
+}
+
+export interface WordResultData {
+  cells: GridCellCompat[]
+  image_width: number
+  image_height: number
+  [key: string]: unknown
+}
+
+/** Minimal GridCell shape used by overlay reconstruction. */
+export interface GridCellCompat {
+  cell_id: string
+  text: string
+  row_index: number
+  col_index: number
+  col_type: string
+  bbox_pct: { x: number; y: number; w: number; h: number }
+  confidence?: number
+  bbox_px?: { x: number; y: number; w: number; h: number }
+  ocr_engine?: string
+  is_bold?: boolean
+  status?: 'pending' | 'confirmed' | 'edited' | 'skipped'
+  word_boxes?: unknown[]
+}
+
+export interface EditableCell {
+  cellId: string
+  text: string
+  originalText: string
+  bboxPct: { x: number; y: number; w: number; h: number }
+  colType: string
+  rowIndex: number
+  colIndex: number
+}
+
+export type UndoAction = { cellId: string; oldText: string; newText: string }
+
+export interface RowItemCompat {
+  y: number
+}
+
+export interface RowResultCompat {
+  rows?: RowItemCompat[]
+}
+
+export type OverlayStatus = 'loading' | 'ready' | 'saving' | 'saved' | 'error'
+
+export type TextColor = 'red' | 'blue' | 'black'
+
+export type PositioningMode = 'cluster' | 'slide'
+
+export interface OverlayReconstructionState {
+  status: OverlayStatus
+  error: string
+  cells: EditableCell[]
+  gridCells: GridCellCompat[]
+  editedTexts: Map<string, string>
+  undoStack: UndoAction[]
+  redoStack: UndoAction[]
+  rows: RowItemCompat[]
+  imageNaturalSize: { w: number; h: number } | null
+  fontScale: number
+  globalBold: boolean
+  imageRotation: 0 | 180
+  textOpacity: number
+  textColor: TextColor
+  positioningMode: PositioningMode
+  changedCount: number
+  sortedCellIds: string[]
+  medianCellHeightPx: number
+  cellWordPositions: Map<string, WordPosition[]>
+  reconRef: React.RefObject<HTMLDivElement | null>
+  reconWidth: number
+
+  // Actions
+  setFontScale: (v: number) => void
+  setGlobalBold: (fn: (b: boolean) => boolean) => void
+  setImageRotation: (fn: (r: 0 | 180) => 0 | 180) => void
+  setTextOpacity: (v: number) => void
+  setTextColor: (c: TextColor) => void
+  setPositioningMode: (fn: (m: PositioningMode) => PositioningMode) => void
+  handleTextChange: (cellId: string, newText: string) => void
+  undo: () => void
+  redo: () => void
+  resetCell: (cellId: string) => void
+  handleKeyDown: (e: React.KeyboardEvent, cellId: string) => void
+  getDisplayText: (cell: EditableCell) => string
+  isEdited: (cell: EditableCell) => boolean
+  saveReconstruction: () => Promise<void>
+  loadSessionData: () => Promise<void>
+  setError: (msg: string) => void
+  setImageNaturalSize: (size: { w: number; h: number }) => void
+}
diff --git a/admin-lehrer/components/ocr-overlay/useOverlayReconstructionState.ts b/admin-lehrer/components/ocr-overlay/useOverlayReconstructionState.ts
new file mode 100644
index 0000000..af69c5e
--- /dev/null
+++ b/admin-lehrer/components/ocr-overlay/useOverlayReconstructionState.ts
@@ -0,0 +1,328 @@
+'use client'
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { usePixelWordPositions } from './usePixelWordPositions'
+import { useSlideWordPositions } from './useSlideWordPositions'
+import type {
+  EditableCell,
+  GridCellCompat,
+  OverlayReconstructionState,
+  OverlayStatus,
+  PositioningMode,
+  RowItemCompat,
+  RowResultCompat,
+  TextColor,
+  UndoAction,
+  WordResultData,
+} from './overlay-reconstruction-types'
+import { KLAUSUR_API } from './overlay-reconstruction-types'
+
+/**
+ * All state and logic for OverlayReconstruction, extracted as a custom hook.
+ */
+export function useOverlayReconstructionState(
+  sessionId: string | null,
+  wordResultOverride?: WordResultData,
+): OverlayReconstructionState {
+  const [status, setStatus] = useState<OverlayStatus>('loading')
+  const [error, setError] = useState('')
+  const [cells, setCells] = useState<EditableCell[]>([])
+  const [gridCells, setGridCells] = useState<GridCellCompat[]>([])
+  const [editedTexts, setEditedTexts] = useState<Map<string, string>>(new Map())
+
+  // Undo/Redo
+  const [undoStack, setUndoStack] = useState<UndoAction[]>([])
+  const [redoStack, setRedoStack] = useState<UndoAction[]>([])
+
+  // Overlay state
+  const [rows, setRows] = useState<RowItemCompat[]>([])
+  const [imageNaturalSize, setImageNaturalSize] = useState<{ w: number; h: number } | null>(null)
+  const [fontScale, setFontScale] = useState(0.7)
+  const [globalBold, setGlobalBold] = useState(false)
+  const [imageRotation, setImageRotation] = useState<0 | 180>(0)
+  const [textOpacity, setTextOpacity] = useState(100)
+  const [textColor, setTextColor] = useState<TextColor>('red')
+  const [positioningMode, setPositioningMode] = useState<PositioningMode>('slide')
+  const reconRef = useRef<HTMLDivElement>(null)
+  const [reconWidth, setReconWidth] = useState(0)
+
+  // Pixel-based word positions
+  const overlayImageUrl = sessionId
+    ? `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/cropped`
+    : ''
+  const clusterPositions = usePixelWordPositions(
+    overlayImageUrl,
+    gridCells as never[],
+    status === 'ready',
+    imageRotation,
+  )
+  const slidePositions = useSlideWordPositions(
+    overlayImageUrl,
+    gridCells as never[],
+    status === 'ready',
+    imageRotation,
+  )
+  const cellWordPositions = positioningMode === 'slide' ? slidePositions : clusterPositions
+
+  // Track container width
+  useEffect(() => {
+    const el = reconRef.current
+    if (!el) return
+    const obs = new ResizeObserver(entries => {
+      for (const entry of entries) setReconWidth(entry.contentRect.width)
+    })
+    obs.observe(el)
+    return () => obs.disconnect()
+  }, [status])
+
+  const applyWordResult = (wordResult: WordResultData) => {
+    const rawGridCells: GridCellCompat[] = wordResult.cells || []
+    setGridCells(rawGridCells)
+
+    const editableCells: EditableCell[] = rawGridCells.map(c => ({
+      cellId: c.cell_id,
+      text: c.text,
+      originalText: c.text,
+      bboxPct: c.bbox_pct,
+      colType: c.col_type,
+      rowIndex: c.row_index,
+      colIndex: c.col_index,
+    }))
+    setCells(editableCells)
+    setEditedTexts(new Map())
+    setUndoStack([])
+    setRedoStack([])
+
+    if (wordResult.image_width && wordResult.image_height) {
+      setImageNaturalSize({ w: wordResult.image_width, h: wordResult.image_height })
+    }
+
+    setStatus('ready')
+  }
+
+  const loadSessionData = useCallback(async () => {
+    if (!sessionId) return
+    setStatus('loading')
+    try {
+      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}`)
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      const data = await res.json()
+
+      const wordResult = data.word_result
+      if (!wordResult) {
+        setError('Keine Worterkennungsdaten gefunden. Bitte zuerst den Woerter-Schritt abschliessen.')
+        setStatus('error')
+        return
+      }
+
+      applyWordResult(wordResult as WordResultData)
+
+      const rowResult: RowResultCompat | undefined = data.row_result
+      if (rowResult?.rows) setRows(rowResult.rows)
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : String(e))
+      setStatus('error')
+    }
+  }, [sessionId])
+
+  // Load session data
+  useEffect(() => {
+    if (wordResultOverride) {
+      applyWordResult(wordResultOverride)
+      return
+    }
+    if (!sessionId) return
+    loadSessionData()
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sessionId, wordResultOverride])
+
+  const handleTextChange = useCallback((cellId: string, newText: string) => {
+    setEditedTexts(prev => {
+      const oldText = prev.get(cellId)
+      const cell = cells.find(c => c.cellId === cellId)
+      const prevText = oldText ?? cell?.text ?? ''
+
+      setUndoStack(stack => [...stack, { cellId, oldText: prevText, newText }])
+      setRedoStack([])
+
+      const next = new Map(prev)
+      next.set(cellId, newText)
+      return next
+    })
+  }, [cells])
+
+  const undo = useCallback(() => {
+    setUndoStack(stack => {
+      if (stack.length === 0) return stack
+      const action = stack[stack.length - 1]
+      const newStack = stack.slice(0, -1)
+      setRedoStack(rs => [...rs, action])
+      setEditedTexts(prev => {
+        const next = new Map(prev)
+        next.set(action.cellId, action.oldText)
+        return next
+      })
+      return newStack
+    })
+  }, [])
+
+  const redo = useCallback(() => {
+    setRedoStack(stack => {
+      if (stack.length === 0) return stack
+      const action = stack[stack.length - 1]
+      const newStack = stack.slice(0, -1)
+      setUndoStack(us => [...us, action])
+      setEditedTexts(prev => {
+        const next = new Map(prev)
+        next.set(action.cellId, action.newText)
+        return next
+      })
+      return newStack
+    })
+  }, [])
+
+  const resetCell = useCallback((cellId: string) => {
+    setEditedTexts(prev => {
+      const next = new Map(prev)
+      next.delete(cellId)
+      return next
+    })
+  }, [])
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'z') {
+        e.preventDefault()
+        if (e.shiftKey) redo()
+        else undo()
+      }
+    }
+    document.addEventListener('keydown', handler)
+    return () => document.removeEventListener('keydown', handler)
+  }, [undo, redo])
+
+  const getDisplayText = useCallback((cell: EditableCell): string => {
+    return editedTexts.get(cell.cellId) ?? cell.text
+  }, [editedTexts])
+
+  const isEdited = useCallback((cell: EditableCell): boolean => {
+    const edited = editedTexts.get(cell.cellId)
+    return edited !== undefined && edited !== cell.originalText
+  }, [editedTexts])
+
+  const changedCount = useMemo(() => {
+    let count = 0
+    for (const cell of cells) {
+      if (isEdited(cell)) count++
+    }
+    return count
+  }, [cells, isEdited])
+
+  // Tab navigation
+  const sortedCellIds = useMemo(() => {
+    return [...cells]
+      .sort((a, b) => a.rowIndex !== b.rowIndex ? a.rowIndex - b.rowIndex : a.colIndex - b.colIndex)
+      .map(c => c.cellId)
+  }, [cells])
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent, cellId: string) => {
+    if (e.key === 'Tab') {
+      e.preventDefault()
+      const idx = sortedCellIds.indexOf(cellId)
+      const nextIdx = e.shiftKey ? idx - 1 : idx + 1
+      if (nextIdx >= 0 && nextIdx < sortedCellIds.length) {
+        const nextId = sortedCellIds[nextIdx]
+        const el = document.getElementById(`cell-${nextId}`)
+        el?.focus()
+      }
+    }
+  }, [sortedCellIds])
+
+  const saveReconstruction = useCallback(async () => {
+    if (!sessionId) return
+    setStatus('saving')
+    try {
+      const cellUpdates = Array.from(editedTexts.entries())
+        .filter(([cellId, text]) => {
+          const cell = cells.find(c => c.cellId === cellId)
+          return cell && text !== cell.originalText
+        })
+        .map(([cellId, text]) => ({ cell_id: cellId, text }))
+
+      if (cellUpdates.length === 0) {
+        setStatus('saved')
+        return
+      }
+
+      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/reconstruction`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ cells: cellUpdates }),
+      })
+
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}))
+        throw new Error(data.detail || `HTTP ${res.status}`)
+      }
+
+      setStatus('saved')
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : String(e))
+      setStatus('error')
+    }
+  }, [sessionId, editedTexts, cells])
+
+  // Median cell height for consistent font sizing (must be before early returns)
+  const medianCellHeightPx = useMemo(() => {
+    const imgWVal = imageNaturalSize?.w || 1
+    const imgHVal = imageNaturalSize?.h || 1
+    const cH = reconWidth * (imgHVal / imgWVal)
+    if (cells.length === 0 || cH === 0) return 40
+    const heights = cells.map(c => cH * (c.bboxPct.h / 100)).sort((a, b) => a - b)
+    const mid = Math.floor(heights.length / 2)
+    return heights.length % 2 === 0 ? (heights[mid - 1] + heights[mid]) / 2 : heights[mid]
+  }, [cells, reconWidth, imageNaturalSize])
+
+  return {
+    status,
+    error,
+    cells,
+    gridCells,
+    editedTexts,
+    undoStack,
+    redoStack,
+    rows,
+    imageNaturalSize,
+    fontScale,
+    globalBold,
+    imageRotation,
+    textOpacity,
+    textColor,
+    positioningMode,
+    changedCount,
+    sortedCellIds,
+    medianCellHeightPx,
+    cellWordPositions,
+    reconRef,
+    reconWidth,
+
+    setFontScale,
+    setGlobalBold,
+    setImageRotation,
+    setTextOpacity,
+    setTextColor,
+    setPositioningMode,
+    handleTextChange,
+    undo,
+    redo,
+    resetCell,
+    handleKeyDown,
+    getDisplayText,
+    isEdited,
+    saveReconstruction,
+    loadSessionData,
+    setError,
+    setImageNaturalSize,
+  }
+}
diff --git a/admin-lehrer/components/ocr-pipeline/ConfBar.tsx b/admin-lehrer/components/ocr-pipeline/ConfBar.tsx
new file mode 100644
index 0000000..222f1e0
--- /dev/null
+++ b/admin-lehrer/components/ocr-pipeline/ConfBar.tsx
@@ -0,0 +1,17 @@
+'use client'
+
+import { confColor } from './dewarp-constants'
+
+/** Short confidence bar (visual). */
+export function ConfBar({ value }: { value: number }) {
+  const pct = Math.round(value * 100)
+  const bg = value >= 0.7 ? 'bg-green-500' : value >= 0.5 ? 'bg-yellow-500' : 'bg-gray-400'
+  return (
+    <div className="flex items-center gap-1.5">
+      <div className="w-16 h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+        <div className={`h-full rounded-full ${bg}`} style={{ width: `${pct}%` }} />
+      </div>
+      <span className={`text-xs font-mono ${confColor(value)}`}>{pct}%</span>
+    </div>
+  )
+}
diff --git a/admin-lehrer/components/ocr-pipeline/DewarpControls.tsx b/admin-lehrer/components/ocr-pipeline/DewarpControls.tsx
index bcac724..e070876 100644
--- a/admin-lehrer/components/ocr-pipeline/DewarpControls.tsx
+++ b/admin-lehrer/components/ocr-pipeline/DewarpControls.tsx
@@ -1,7 +1,10 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import type { DeskewResult, DewarpResult, DewarpDetection, DewarpGroundTruth } from '@/app/(admin)/ai/ocr-kombi/types'
+import type { DeskewResult, DewarpResult, DewarpGroundTruth } from '@/app/(admin)/ai/ocr-kombi/types'
+import { DewarpSummaryBanner } from './DewarpSummaryBanner'
+import { DewarpFineTunePanel } from './DewarpFineTunePanel'
+import { DewarpGroundTruthPanel } from './DewarpGroundTruthPanel'
 
 interface DewarpControlsProps {
   dewarpResult: DewarpResult | null
@@ -15,93 +18,6 @@ interface DewarpControlsProps {
   isApplying: boolean
 }
 
-const METHOD_LABELS: Record<string, string> = {
-  vertical_edge: 'A: Vertikale Kanten',
-  projection: 'B: Projektions-Varianz',
-  hough_lines: 'C: Hough-Linien',
-  text_lines: 'D: Textzeilenanalyse',
-  manual: 'Manuell',
-  manual_combined: 'Manuell (kombiniert)',
-  none: 'Keine Korrektur',
-}
-
-const SHEAR_METHOD_KEYS = ['vertical_edge', 'projection', 'hough_lines', 'text_lines'] as const
-
-/** Colour for a confidence value (0-1). */
-function confColor(conf: number): string {
-  if (conf >= 0.7) return 'text-green-600 dark:text-green-400'
-  if (conf >= 0.5) return 'text-yellow-600 dark:text-yellow-400'
-  return 'text-gray-400'
-}
-
-/** Short confidence bar (visual). */
-function ConfBar({ value }: { value: number }) {
-  const pct = Math.round(value * 100)
-  const bg = value >= 0.7 ? 'bg-green-500' : value >= 0.5 ? 'bg-yellow-500' : 'bg-gray-400'
-  return (
-    <div className="flex items-center gap-1.5">
-      <div className="w-16 h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
-        <div className={`h-full rounded-full ${bg}`} style={{ width: `${pct}%` }} />
-      </div>
-      <span className={`text-xs font-mono ${confColor(value)}`}>{pct}%</span>
-    </div>
-  )
-}
-
-/** A single slider row for fine-tuning. */
-function FineTuneSlider({
-  label,
-  value,
-  onChange,
-  min,
-  max,
-  step,
-  unit = '\u00B0',
-  radioName,
-  radioChecked,
-  onRadioChange,
-}: {
-  label: string
-  value: number
-  onChange: (v: number) => void
-  min: number
-  max: number
-  step: number
-  unit?: string
-  radioName?: string
-  radioChecked?: boolean
-  onRadioChange?: () => void
-}) {
-  return (
-    <div className="flex items-center gap-2">
-      {radioName !== undefined && (
-        <input
-          type="radio"
-          name={radioName}
-          checked={radioChecked}
-          onChange={onRadioChange}
-          className="w-3.5 h-3.5 accent-teal-500"
-        />
-      )}
-      <span className="text-xs text-gray-500 dark:text-gray-400 w-36 shrink-0">{label}</span>
-      <span className="text-xs text-gray-400 w-8 text-right">{min}{unit}</span>
-      <input
-        type="range"
-        min={min * 100}
-        max={max * 100}
-        step={step * 100}
-        value={Math.round(value * 100)}
-        onChange={(e) => onChange(parseInt(e.target.value) / 100)}
-        className="flex-1 h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 accent-teal-500"
-      />
-      <span className="text-xs text-gray-400 w-8">+{max}{unit}</span>
-      <span className="font-mono text-xs w-14 text-right tabular-nums">
-        {value >= 0 ? '+' : ''}{value.toFixed(2)}{unit}
-      </span>
-    </div>
-  )
-}
-
 export function DewarpControls({
   dewarpResult,
   deskewResult,
@@ -114,26 +30,9 @@ export function DewarpControls({
   isApplying,
 }: DewarpControlsProps) {
   const [manualShear, setManualShear] = useState(0)
-  const [gtFeedback, setGtFeedback] = useState<'correct' | 'incorrect' | null>(null)
-  const [gtNotes, setGtNotes] = useState('')
   const [gtSaved, setGtSaved] = useState(false)
-  const [showDetails, setShowDetails] = useState(false)
   const [showFineTune, setShowFineTune] = useState(false)
 
-  // Fine-tuning rotation sliders (3 passes)
-  const [p1Iterative, setP1Iterative] = useState(0)
-  const [p2Residual, setP2Residual] = useState(0)
-  const [p3Textline, setP3Textline] = useState(0)
-
-  // Fine-tuning shear sliders (4 methods) + selected method
-  const [shearValues, setShearValues] = useState<Record<string, number>>({
-    vertical_edge: 0,
-    projection: 0,
-    hough_lines: 0,
-    text_lines: 0,
-  })
-  const [selectedShearMethod, setSelectedShearMethod] = useState<string>('vertical_edge')
-
   // Initialize slider to auto-detected value when result arrives
   useEffect(() => {
     if (dewarpResult && dewarpResult.shear_degrees !== undefined) {
@@ -141,192 +40,15 @@ export function DewarpControls({
     }
   }, [dewarpResult?.shear_degrees])
 
-  // Initialize fine-tuning sliders from deskew result
-  useEffect(() => {
-    if (deskewResult) {
-      setP1Iterative(deskewResult.angle_iterative ?? 0)
-      setP2Residual(deskewResult.angle_residual ?? 0)
-      setP3Textline(deskewResult.angle_textline ?? 0)
-    }
-  }, [deskewResult])
-
-  // Initialize shear sliders from dewarp detections
-  useEffect(() => {
-    if (dewarpResult?.detections) {
-      const newValues = { ...shearValues }
-      let bestMethod = selectedShearMethod
-      let bestConf = -1
-      for (const d of dewarpResult.detections) {
-        if (d.method in newValues) {
-          newValues[d.method] = d.shear_degrees
-          if (d.confidence > bestConf) {
-            bestConf = d.confidence
-            bestMethod = d.method
-          }
-        }
-      }
-      setShearValues(newValues)
-      // Select the method that was actually used, or the highest confidence
-      if (dewarpResult.method_used && dewarpResult.method_used in newValues) {
-        setSelectedShearMethod(dewarpResult.method_used)
-      } else {
-        setSelectedShearMethod(bestMethod)
-      }
-    }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dewarpResult?.detections])
-
-  const rotationSum = p1Iterative + p2Residual + p3Textline
-  const activeShear = shearValues[selectedShearMethod] ?? 0
-
-  const handleGroundTruth = (isCorrect: boolean) => {
-    setGtFeedback(isCorrect ? 'correct' : 'incorrect')
-    if (isCorrect) {
-      onGroundTruth({ is_correct: true })
-      setGtSaved(true)
-    }
-  }
-
-  const handleGroundTruthIncorrect = () => {
-    onGroundTruth({
-      is_correct: false,
-      corrected_shear: manualShear !== 0 ? manualShear : undefined,
-      notes: gtNotes || undefined,
-    })
-    setGtSaved(true)
-  }
-
-  const handleShearValueChange = (method: string, value: number) => {
-    setShearValues((prev) => ({ ...prev, [method]: value }))
-  }
-
-  const handleFineTunePreview = () => {
-    if (onCombinedAdjust) {
-      onCombinedAdjust(rotationSum, activeShear)
-    }
-  }
-
-  const wasRejected = dewarpResult && dewarpResult.method_used === 'none' && (dewarpResult.detections || []).length > 0
-  const wasApplied = dewarpResult && dewarpResult.method_used !== 'none' && dewarpResult.method_used !== 'manual' && dewarpResult.method_used !== 'manual_combined'
-  const detections = dewarpResult?.detections || []
-
   return (
     <div className="space-y-4">
       {/* Summary banner */}
       {dewarpResult && (
-        <div className={`rounded-lg border p-4 ${
-          wasRejected
-            ? 'bg-amber-50 border-amber-200 dark:bg-amber-900/20 dark:border-amber-700'
-            : wasApplied
-              ? 'bg-green-50 border-green-200 dark:bg-green-900/20 dark:border-green-700'
-              : 'bg-white border-gray-200 dark:bg-gray-800 dark:border-gray-700'
-        }`}>
-          {/* Status line */}
-          <div className="flex items-center gap-2 mb-3">
-            <span className={`text-lg ${wasRejected ? '' : wasApplied ? '' : ''}`}>
-              {wasRejected ? '\u26A0\uFE0F' : wasApplied ? '\u2705' : '\u2796'}
-            </span>
-            <span className="text-sm font-medium text-gray-800 dark:text-gray-200">
-              {wasRejected
-                ? 'Quality Gate: Korrektur verworfen (Projektion nicht verbessert)'
-                : wasApplied
-                  ? `Korrektur angewendet: ${dewarpResult.shear_degrees.toFixed(2)}\u00B0`
-                  : dewarpResult.method_used === 'manual' || dewarpResult.method_used === 'manual_combined'
-                    ? `Manuelle Korrektur: ${dewarpResult.shear_degrees.toFixed(2)}\u00B0`
-                    : 'Keine Korrektur noetig'}
-            </span>
-          </div>
-
-          {/* Key metrics */}
-          <div className="flex flex-wrap items-center gap-4 text-sm">
-            <div>
-              <span className="text-gray-500">Scherung:</span>{' '}
-              <span className="font-mono font-medium">{dewarpResult.shear_degrees.toFixed(2)}\u00B0</span>
-            </div>
-            <div className="h-4 w-px bg-gray-300 dark:bg-gray-600" />
-            <div>
-              <span className="text-gray-500">Methode:</span>{' '}
-              <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-teal-100 text-teal-700 dark:bg-teal-900/40 dark:text-teal-300">
-                {dewarpResult.method_used.includes('+')
-                  ? `Ensemble (${dewarpResult.method_used.split('+').map(m => METHOD_LABELS[m] || m).join(' + ')})`
-                  : METHOD_LABELS[dewarpResult.method_used] || dewarpResult.method_used}
-              </span>
-            </div>
-            <div className="h-4 w-px bg-gray-300 dark:bg-gray-600" />
-            <div className="flex items-center gap-1.5">
-              <span className="text-gray-500">Konfidenz:</span>
-              <ConfBar value={dewarpResult.confidence} />
-            </div>
-          </div>
-
-          {/* Toggles row */}
-          <div className="flex gap-2 mt-3">
-            <button
-              onClick={onToggleGrid}
-              className={`text-xs px-3 py-1 rounded-full border transition-colors ${
-                showGrid
-                  ? 'bg-teal-100 border-teal-300 text-teal-700 dark:bg-teal-900/40 dark:border-teal-600 dark:text-teal-300'
-                  : 'border-gray-300 text-gray-500 dark:border-gray-600 dark:text-gray-400'
-              }`}
-            >
-              Raster
-            </button>
-            {detections.length > 0 && (
-              <button
-                onClick={() => setShowDetails(v => !v)}
-                className={`text-xs px-3 py-1 rounded-full border transition-colors ${
-                  showDetails
-                    ? 'bg-blue-100 border-blue-300 text-blue-700 dark:bg-blue-900/40 dark:border-blue-600 dark:text-blue-300'
-                    : 'border-gray-300 text-gray-500 dark:border-gray-600 dark:text-gray-400'
-                }`}
-              >
-                Details ({detections.length} Methoden)
-              </button>
-            )}
-          </div>
-
-          {/* Detailed detections */}
-          {showDetails && detections.length > 0 && (
-            <div className="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
-              <div className="text-xs text-gray-500 mb-2">Einzelne Detektoren:</div>
-              <div className="space-y-1.5">
-                {detections.map((d: DewarpDetection) => {
-                  const isUsed = dewarpResult.method_used.includes(d.method)
-                  const aboveThreshold = d.confidence >= 0.5
-                  return (
-                    <div
-                      key={d.method}
-                      className={`flex items-center gap-3 text-xs px-2 py-1.5 rounded ${
-                        isUsed
-                          ? 'bg-teal-50 dark:bg-teal-900/20'
-                          : 'bg-gray-50 dark:bg-gray-800'
-                      }`}
-                    >
-                      <span className="w-4 text-center">
-                        {isUsed ? '\u2713' : aboveThreshold ? '\u2012' : '\u2717'}
-                      </span>
-                      <span className={`w-40 ${isUsed ? 'font-medium text-gray-800 dark:text-gray-200' : 'text-gray-500'}`}>
-                        {METHOD_LABELS[d.method] || d.method}
-                      </span>
-                      <span className="font-mono w-16 text-right">
-                        {d.shear_degrees.toFixed(2)}\u00B0
-                      </span>
-                      <ConfBar value={d.confidence} />
-                      {!aboveThreshold && (
-                        <span className="text-gray-400 ml-1">(unter Schwelle)</span>
-                      )}
-                    </div>
-                  )
-                })}
-              </div>
-              {wasRejected && (
-                <div className="mt-2 text-xs text-amber-600 dark:text-amber-400">
-                  Die Korrektur wurde verworfen, weil die horizontale Projektions-Varianz nach Anwendung nicht besser war als vorher.
-                </div>
-              )}
-            </div>
-          )}
-        </div>
+        <DewarpSummaryBanner
+          dewarpResult={dewarpResult}
+          showGrid={showGrid}
+          onToggleGrid={onToggleGrid}
+        />
       )}
 
       {/* Manual shear angle slider */}
@@ -334,7 +56,7 @@ export function DewarpControls({
         <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
           <div className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Scherwinkel (manuell)</div>
           <div className="flex items-center gap-3">
-            <span className="text-xs text-gray-400 w-10 text-right">-2.0\u00B0</span>
+            <span className="text-xs text-gray-400 w-10 text-right">-2.0{'\u00B0'}</span>
             <input
               type="range"
               min={-200}
@@ -344,8 +66,8 @@ export function DewarpControls({
               onChange={(e) => setManualShear(parseInt(e.target.value) / 100)}
               className="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 accent-teal-500"
             />
-            <span className="text-xs text-gray-400 w-10">+2.0\u00B0</span>
-            <span className="font-mono text-sm w-16 text-right">{manualShear.toFixed(2)}\u00B0</span>
+            <span className="text-xs text-gray-400 w-10">+2.0{'\u00B0'}</span>
+            <span className="font-mono text-sm w-16 text-right">{manualShear.toFixed(2)}{'\u00B0'}</span>
             <button
               onClick={() => onManualDewarp(manualShear)}
               disabled={isApplying}
@@ -362,179 +84,27 @@ export function DewarpControls({
 
       {/* Fine-tuning panel */}
       {dewarpResult && onCombinedAdjust && (
-        <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
-          <button
-            onClick={() => setShowFineTune(v => !v)}
-            className="w-full flex items-center justify-between p-4 text-left"
-          >
-            <div className="flex items-center gap-2">
-              <span className="text-sm">&#9881;&#65039;</span>
-              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Feinabstimmung</span>
-              <span className="text-xs text-gray-400">(7 Regler)</span>
-            </div>
-            <span className="text-gray-400 text-sm">{showFineTune ? '\u25B2' : '\u25BC'}</span>
-          </button>
-
-          {showFineTune && (
-            <div className="px-4 pb-4 space-y-5">
-              {/* Rotation section */}
-              <div>
-                <div className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
-                  Rotation (Begradigung)
-                </div>
-                <div className="space-y-2">
-                  <FineTuneSlider
-                    label="P1 Iterative Projection"
-                    value={p1Iterative}
-                    onChange={setP1Iterative}
-                    min={-5}
-                    max={5}
-                    step={0.05}
-                  />
-                  <FineTuneSlider
-                    label="P2 Word-Alignment"
-                    value={p2Residual}
-                    onChange={setP2Residual}
-                    min={-3}
-                    max={3}
-                    step={0.05}
-                  />
-                  <FineTuneSlider
-                    label="P3 Textline-Regression"
-                    value={p3Textline}
-                    onChange={setP3Textline}
-                    min={-3}
-                    max={3}
-                    step={0.05}
-                  />
-                  <div className="flex items-center gap-2 pt-1 border-t border-gray-100 dark:border-gray-700">
-                    <span className="text-xs text-gray-500 dark:text-gray-400 w-36 shrink-0">Summe Rotation</span>
-                    <span className="font-mono text-sm font-medium text-teal-600 dark:text-teal-400">
-                      {rotationSum >= 0 ? '+' : ''}{rotationSum.toFixed(2)}\u00B0
-                    </span>
-                  </div>
-                </div>
-              </div>
-
-              {/* Shear section */}
-              <div>
-                <div className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
-                  Scherung (Entzerrung) &mdash; einen Wert waehlen
-                </div>
-                <div className="space-y-2">
-                  {SHEAR_METHOD_KEYS.map((method) => (
-                    <FineTuneSlider
-                      key={method}
-                      label={METHOD_LABELS[method] || method}
-                      value={shearValues[method]}
-                      onChange={(v) => handleShearValueChange(method, v)}
-                      min={-5}
-                      max={5}
-                      step={0.05}
-                      radioName="shear-method"
-                      radioChecked={selectedShearMethod === method}
-                      onRadioChange={() => setSelectedShearMethod(method)}
-                    />
-                  ))}
-                  <div className="flex items-center gap-2 pt-1 border-t border-gray-100 dark:border-gray-700">
-                    <span className="text-xs text-gray-500 dark:text-gray-400 w-36 shrink-0">Gewaehlte Scherung</span>
-                    <span className="font-mono text-sm font-medium text-teal-600 dark:text-teal-400">
-                      {activeShear >= 0 ? '+' : ''}{activeShear.toFixed(2)}\u00B0
-                    </span>
-                    <span className="text-xs text-gray-400 ml-1">
-                      ({METHOD_LABELS[selectedShearMethod]})
-                    </span>
-                  </div>
-                </div>
-              </div>
-
-              {/* Preview + Save */}
-              <div className="flex items-center gap-3 pt-2">
-                <button
-                  onClick={handleFineTunePreview}
-                  disabled={isApplying}
-                  className="px-4 py-2 text-sm bg-teal-600 text-white rounded-md hover:bg-teal-700 disabled:opacity-50 transition-colors"
-                >
-                  {isApplying ? 'Wird angewendet...' : 'Vorschau'}
-                </button>
-                <button
-                  onClick={() => {
-                    onGroundTruth({
-                      is_correct: false,
-                      corrected_shear: activeShear,
-                      notes: `Fine-tuned: rotation=${rotationSum.toFixed(3)}, shear=${activeShear.toFixed(3)} (${selectedShearMethod})`,
-                    })
-                    setGtSaved(true)
-                  }}
-                  disabled={gtSaved}
-                  className="px-4 py-2 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 transition-colors"
-                >
-                  {gtSaved ? 'Gespeichert' : 'Als Ground Truth speichern'}
-                </button>
-                <span className="text-xs text-gray-400">
-                  Rotation: {rotationSum >= 0 ? '+' : ''}{rotationSum.toFixed(2)}\u00B0 + Scherung: {activeShear >= 0 ? '+' : ''}{activeShear.toFixed(2)}\u00B0
-                </span>
-              </div>
-            </div>
-          )}
-        </div>
+        <DewarpFineTunePanel
+          dewarpResult={dewarpResult}
+          deskewResult={deskewResult}
+          showFineTune={showFineTune}
+          onToggleFineTune={() => setShowFineTune(v => !v)}
+          onCombinedAdjust={onCombinedAdjust}
+          onGroundTruth={onGroundTruth}
+          isApplying={isApplying}
+          gtSaved={gtSaved}
+          onGtSaved={() => setGtSaved(true)}
+        />
       )}
 
       {/* Ground Truth */}
       {dewarpResult && !showFineTune && (
-        <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
-          <div className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-            Spalten vertikal ausgerichtet?
-          </div>
-          <p className="text-xs text-gray-400 mb-2">Pruefen ob die Spaltenraender jetzt senkrecht zum Raster stehen.</p>
-          {!gtSaved ? (
-            <div className="space-y-3">
-              <div className="flex gap-2">
-                <button
-                  onClick={() => handleGroundTruth(true)}
-                  className={`px-4 py-1.5 rounded-md text-sm font-medium transition-colors ${
-                    gtFeedback === 'correct'
-                      ? 'bg-green-100 text-green-700 ring-2 ring-green-400'
-                      : 'bg-gray-100 text-gray-600 hover:bg-green-50 dark:bg-gray-700 dark:text-gray-300'
-                  }`}
-                >
-                  Ja
-                </button>
-                <button
-                  onClick={() => handleGroundTruth(false)}
-                  className={`px-4 py-1.5 rounded-md text-sm font-medium transition-colors ${
-                    gtFeedback === 'incorrect'
-                      ? 'bg-red-100 text-red-700 ring-2 ring-red-400'
-                      : 'bg-gray-100 text-gray-600 hover:bg-red-50 dark:bg-gray-700 dark:text-gray-300'
-                  }`}
-                >
-                  Nein
-                </button>
-              </div>
-              {gtFeedback === 'incorrect' && (
-                <div className="space-y-2">
-                  <textarea
-                    value={gtNotes}
-                    onChange={(e) => setGtNotes(e.target.value)}
-                    placeholder="Notizen zur Korrektur..."
-                    className="w-full text-sm border border-gray-300 dark:border-gray-600 rounded-md p-2 bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200"
-                    rows={2}
-                  />
-                  <button
-                    onClick={handleGroundTruthIncorrect}
-                    className="text-sm px-3 py-1 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors"
-                  >
-                    Feedback speichern
-                  </button>
-                </div>
-              )}
-            </div>
-          ) : (
-            <div className="text-sm text-green-600 dark:text-green-400">
-              Feedback gespeichert
-            </div>
-          )}
-        </div>
+        <DewarpGroundTruthPanel
+          manualShear={manualShear}
+          onGroundTruth={onGroundTruth}
+          gtSaved={gtSaved}
+          onGtSaved={() => setGtSaved(true)}
+        />
       )}
 
       {/* Next button */}
diff --git a/admin-lehrer/components/ocr-pipeline/DewarpFineTunePanel.tsx b/admin-lehrer/components/ocr-pipeline/DewarpFineTunePanel.tsx
new file mode 100644
index 0000000..4273552
--- /dev/null
+++ b/admin-lehrer/components/ocr-pipeline/DewarpFineTunePanel.tsx
@@ -0,0 +1,209 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import type { DeskewResult, DewarpResult, DewarpGroundTruth } from '@/app/(admin)/ai/ocr-kombi/types'
+import { METHOD_LABELS, SHEAR_METHOD_KEYS } from './dewarp-constants'
+import { FineTuneSlider } from './FineTuneSlider'
+
+interface DewarpFineTunePanelProps {
+  dewarpResult: DewarpResult
+  deskewResult?: DeskewResult | null
+  showFineTune: boolean
+  onToggleFineTune: () => void
+  onCombinedAdjust: (rotationDegrees: number, shearDegrees: number) => void
+  onGroundTruth: (gt: DewarpGroundTruth) => void
+  isApplying: boolean
+  gtSaved: boolean
+  onGtSaved: () => void
+}
+
+export function DewarpFineTunePanel({
+  dewarpResult,
+  deskewResult,
+  showFineTune,
+  onToggleFineTune,
+  onCombinedAdjust,
+  onGroundTruth,
+  isApplying,
+  gtSaved,
+  onGtSaved,
+}: DewarpFineTunePanelProps) {
+  // Fine-tuning rotation sliders (3 passes)
+  const [p1Iterative, setP1Iterative] = useState(0)
+  const [p2Residual, setP2Residual] = useState(0)
+  const [p3Textline, setP3Textline] = useState(0)
+
+  // Fine-tuning shear sliders (4 methods) + selected method
+  const [shearValues, setShearValues] = useState<Record<string, number>>({
+    vertical_edge: 0,
+    projection: 0,
+    hough_lines: 0,
+    text_lines: 0,
+  })
+  const [selectedShearMethod, setSelectedShearMethod] = useState<string>('vertical_edge')
+
+  // Initialize fine-tuning sliders from deskew result
+  useEffect(() => {
+    if (deskewResult) {
+      setP1Iterative(deskewResult.angle_iterative ?? 0)
+      setP2Residual(deskewResult.angle_residual ?? 0)
+      setP3Textline(deskewResult.angle_textline ?? 0)
+    }
+  }, [deskewResult])
+
+  // Initialize shear sliders from dewarp detections
+  useEffect(() => {
+    if (dewarpResult?.detections) {
+      const newValues = { ...shearValues }
+      let bestMethod = selectedShearMethod
+      let bestConf = -1
+      for (const d of dewarpResult.detections) {
+        if (d.method in newValues) {
+          newValues[d.method] = d.shear_degrees
+          if (d.confidence > bestConf) {
+            bestConf = d.confidence
+            bestMethod = d.method
+          }
+        }
+      }
+      setShearValues(newValues)
+      // Select the method that was actually used, or the highest confidence
+      if (dewarpResult.method_used && dewarpResult.method_used in newValues) {
+        setSelectedShearMethod(dewarpResult.method_used)
+      } else {
+        setSelectedShearMethod(bestMethod)
+      }
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dewarpResult?.detections])
+
+  const rotationSum = p1Iterative + p2Residual + p3Textline
+  const activeShear = shearValues[selectedShearMethod] ?? 0
+
+  const handleShearValueChange = (method: string, value: number) => {
+    setShearValues((prev) => ({ ...prev, [method]: value }))
+  }
+
+  const handleFineTunePreview = () => {
+    onCombinedAdjust(rotationSum, activeShear)
+  }
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+      <button
+        onClick={onToggleFineTune}
+        className="w-full flex items-center justify-between p-4 text-left"
+      >
+        <div className="flex items-center gap-2">
+          <span className="text-sm">&#9881;&#65039;</span>
+          <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Feinabstimmung</span>
+          <span className="text-xs text-gray-400">(7 Regler)</span>
+        </div>
+        <span className="text-gray-400 text-sm">{showFineTune ? '\u25B2' : '\u25BC'}</span>
+      </button>
+
+      {showFineTune && (
+        <div className="px-4 pb-4 space-y-5">
+          {/* Rotation section */}
+          <div>
+            <div className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
+              Rotation (Begradigung)
+            </div>
+            <div className="space-y-2">
+              <FineTuneSlider
+                label="P1 Iterative Projection"
+                value={p1Iterative}
+                onChange={setP1Iterative}
+                min={-5}
+                max={5}
+                step={0.05}
+              />
+              <FineTuneSlider
+                label="P2 Word-Alignment"
+                value={p2Residual}
+                onChange={setP2Residual}
+                min={-3}
+                max={3}
+                step={0.05}
+              />
+              <FineTuneSlider
+                label="P3 Textline-Regression"
+                value={p3Textline}
+                onChange={setP3Textline}
+                min={-3}
+                max={3}
+                step={0.05}
+              />
+              <div className="flex items-center gap-2 pt-1 border-t border-gray-100 dark:border-gray-700">
+                <span className="text-xs text-gray-500 dark:text-gray-400 w-36 shrink-0">Summe Rotation</span>
+                <span className="font-mono text-sm font-medium text-teal-600 dark:text-teal-400">
+                  {rotationSum >= 0 ? '+' : ''}{rotationSum.toFixed(2)}\u00B0
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* Shear section */}
+          <div>
+            <div className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
+              Scherung (Entzerrung) &mdash; einen Wert waehlen
+            </div>
+            <div className="space-y-2">
+              {SHEAR_METHOD_KEYS.map((method) => (
+                <FineTuneSlider
+                  key={method}
+                  label={METHOD_LABELS[method] || method}
+                  value={shearValues[method]}
+                  onChange={(v) => handleShearValueChange(method, v)}
+                  min={-5}
+                  max={5}
+                  step={0.05}
+                  radioName="shear-method"
+                  radioChecked={selectedShearMethod === method}
+                  onRadioChange={() => setSelectedShearMethod(method)}
+                />
+              ))}
+              <div className="flex items-center gap-2 pt-1 border-t border-gray-100 dark:border-gray-700">
+                <span className="text-xs text-gray-500 dark:text-gray-400 w-36 shrink-0">Gewaehlte Scherung</span>
+                <span className="font-mono text-sm font-medium text-teal-600 dark:text-teal-400">
+                  {activeShear >= 0 ? '+' : ''}{activeShear.toFixed(2)}\u00B0
+                </span>
+                <span className="text-xs text-gray-400 ml-1">
+                  ({METHOD_LABELS[selectedShearMethod]})
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* Preview + Save */}
+          <div className="flex items-center gap-3 pt-2">
+            <button
+              onClick={handleFineTunePreview}
+              disabled={isApplying}
+              className="px-4 py-2 text-sm bg-teal-600 text-white rounded-md hover:bg-teal-700 disabled:opacity-50 transition-colors"
+            >
+              {isApplying ? 'Wird angewendet...' : 'Vorschau'}
+            </button>
+            <button
+              onClick={() => {
+                onGroundTruth({
+                  is_correct: false,
+                  corrected_shear: activeShear,
+                  notes: `Fine-tuned: rotation=${rotationSum.toFixed(3)}, shear=${activeShear.toFixed(3)} (${selectedShearMethod})`,
+                })
+                onGtSaved()
+              }}
+              disabled={gtSaved}
+              className="px-4 py-2 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 transition-colors"
+            >
+              {gtSaved ? 'Gespeichert' : 'Als Ground Truth speichern'}
+            </button>
+            <span className="text-xs text-gray-400">
+              Rotation: {rotationSum >= 0 ? '+' : ''}{rotationSum.toFixed(2)}\u00B0 + Scherung: {activeShear >= 0 ? '+' : ''}{activeShear.toFixed(2)}\u00B0
+            </span>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/admin-lehrer/components/ocr-pipeline/DewarpGroundTruthPanel.tsx b/admin-lehrer/components/ocr-pipeline/DewarpGroundTruthPanel.tsx
new file mode 100644
index 0000000..528a179
--- /dev/null
+++ b/admin-lehrer/components/ocr-pipeline/DewarpGroundTruthPanel.tsx
@@ -0,0 +1,94 @@
+'use client'
+
+import { useState } from 'react'
+import type { DewarpGroundTruth } from '@/app/(admin)/ai/ocr-kombi/types'
+
+interface DewarpGroundTruthPanelProps {
+  manualShear: number
+  onGroundTruth: (gt: DewarpGroundTruth) => void
+  gtSaved: boolean
+  onGtSaved: () => void
+}
+
+export function DewarpGroundTruthPanel({
+  manualShear,
+  onGroundTruth,
+  gtSaved,
+  onGtSaved,
+}: DewarpGroundTruthPanelProps) {
+  const [gtFeedback, setGtFeedback] = useState<'correct' | 'incorrect' | null>(null)
+  const [gtNotes, setGtNotes] = useState('')
+
+  const handleGroundTruth = (isCorrect: boolean) => {
+    setGtFeedback(isCorrect ? 'correct' : 'incorrect')
+    if (isCorrect) {
+      onGroundTruth({ is_correct: true })
+      onGtSaved()
+    }
+  }
+
+  const handleGroundTruthIncorrect = () => {
+    onGroundTruth({
+      is_correct: false,
+      corrected_shear: manualShear !== 0 ? manualShear : undefined,
+      notes: gtNotes || undefined,
+    })
+    onGtSaved()
+  }
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+      <div className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+        Spalten vertikal ausgerichtet?
+      </div>
+      <p className="text-xs text-gray-400 mb-2">Pruefen ob die Spaltenraender jetzt senkrecht zum Raster stehen.</p>
+      {!gtSaved ? (
+        <div className="space-y-3">
+          <div className="flex gap-2">
+            <button
+              onClick={() => handleGroundTruth(true)}
+              className={`px-4 py-1.5 rounded-md text-sm font-medium transition-colors ${
+                gtFeedback === 'correct'
+                  ? 'bg-green-100 text-green-700 ring-2 ring-green-400'
+                  : 'bg-gray-100 text-gray-600 hover:bg-green-50 dark:bg-gray-700 dark:text-gray-300'
+              }`}
+            >
+              Ja
+            </button>
+            <button
+              onClick={() => handleGroundTruth(false)}
+              className={`px-4 py-1.5 rounded-md text-sm font-medium transition-colors ${
+                gtFeedback === 'incorrect'
+                  ? 'bg-red-100 text-red-700 ring-2 ring-red-400'
+                  : 'bg-gray-100 text-gray-600 hover:bg-red-50 dark:bg-gray-700 dark:text-gray-300'
+              }`}
+            >
+              Nein
+            </button>
+          </div>
+          {gtFeedback === 'incorrect' && (
+            <div className="space-y-2">
+              <textarea
+                value={gtNotes}
+                onChange={(e) => setGtNotes(e.target.value)}
+                placeholder="Notizen zur Korrektur..."
+                className="w-full text-sm border border-gray-300 dark:border-gray-600 rounded-md p-2 bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200"
+                rows={2}
+              />
+              <button
+                onClick={handleGroundTruthIncorrect}
+                className="text-sm px-3 py-1 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors"
+              >
+                Feedback speichern
+              </button>
+            </div>
+          )}
+        </div>
+      ) : (
+        <div className="text-sm text-green-600 dark:text-green-400">
+          Feedback gespeichert
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/admin-lehrer/components/ocr-pipeline/DewarpSummaryBanner.tsx b/admin-lehrer/components/ocr-pipeline/DewarpSummaryBanner.tsx
new file mode 100644
index 0000000..c931101
--- /dev/null
+++ b/admin-lehrer/components/ocr-pipeline/DewarpSummaryBanner.tsx
@@ -0,0 +1,136 @@
+'use client'
+
+import { useState } from 'react'
+import type { DewarpResult, DewarpDetection } from '@/app/(admin)/ai/ocr-kombi/types'
+import { METHOD_LABELS } from './dewarp-constants'
+import { ConfBar } from './ConfBar'
+
+interface DewarpSummaryBannerProps {
+  dewarpResult: DewarpResult
+  showGrid: boolean
+  onToggleGrid: () => void
+}
+
+export function DewarpSummaryBanner({ dewarpResult, showGrid, onToggleGrid }: DewarpSummaryBannerProps) {
+  const detections = dewarpResult.detections || []
+  const wasRejected = dewarpResult.method_used === 'none' && detections.length > 0
+  const wasApplied = dewarpResult.method_used !== 'none' && dewarpResult.method_used !== 'manual' && dewarpResult.method_used !== 'manual_combined'
+
+  const [showDetails, setShowDetails] = useState(false)
+
+  return (
+    <div className={`rounded-lg border p-4 ${
+      wasRejected
+        ? 'bg-amber-50 border-amber-200 dark:bg-amber-900/20 dark:border-amber-700'
+        : wasApplied
+          ? 'bg-green-50 border-green-200 dark:bg-green-900/20 dark:border-green-700'
+          : 'bg-white border-gray-200 dark:bg-gray-800 dark:border-gray-700'
+    }`}>
+      {/* Status line */}
+      <div className="flex items-center gap-2 mb-3">
+        <span className={`text-lg ${wasRejected ? '' : wasApplied ? '' : ''}`}>
+          {wasRejected ? '\u26A0\uFE0F' : wasApplied ? '\u2705' : '\u2796'}
+        </span>
+        <span className="text-sm font-medium text-gray-800 dark:text-gray-200">
+          {wasRejected
+            ? 'Quality Gate: Korrektur verworfen (Projektion nicht verbessert)'
+            : wasApplied
+              ? `Korrektur angewendet: ${dewarpResult.shear_degrees.toFixed(2)}\u00B0`
+              : dewarpResult.method_used === 'manual' || dewarpResult.method_used === 'manual_combined'
+                ? `Manuelle Korrektur: ${dewarpResult.shear_degrees.toFixed(2)}\u00B0`
+                : 'Keine Korrektur noetig'}
+        </span>
+      </div>
+
+      {/* Key metrics */}
+      <div className="flex flex-wrap items-center gap-4 text-sm">
+        <div>
+          <span className="text-gray-500">Scherung:</span>{' '}
+          <span className="font-mono font-medium">{dewarpResult.shear_degrees.toFixed(2)}\u00B0</span>
+        </div>
+        <div className="h-4 w-px bg-gray-300 dark:bg-gray-600" />
+        <div>
+          <span className="text-gray-500">Methode:</span>{' '}
+          <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-teal-100 text-teal-700 dark:bg-teal-900/40 dark:text-teal-300">
+            {dewarpResult.method_used.includes('+')
+              ? `Ensemble (${dewarpResult.method_used.split('+').map(m => METHOD_LABELS[m] || m).join(' + ')})`
+              : METHOD_LABELS[dewarpResult.method_used] || dewarpResult.method_used}
+          </span>
+        </div>
+        <div className="h-4 w-px bg-gray-300 dark:bg-gray-600" />
+        <div className="flex items-center gap-1.5">
+          <span className="text-gray-500">Konfidenz:</span>
+          <ConfBar value={dewarpResult.confidence} />
+        </div>
+      </div>
+
+      {/* Toggles row */}
+      <div className="flex gap-2 mt-3">
+        <button
+          onClick={onToggleGrid}
+          className={`text-xs px-3 py-1 rounded-full border transition-colors ${
+            showGrid
+              ? 'bg-teal-100 border-teal-300 text-teal-700 dark:bg-teal-900/40 dark:border-teal-600 dark:text-teal-300'
+              : 'border-gray-300 text-gray-500 dark:border-gray-600 dark:text-gray-400'
+          }`}
+        >
+          Raster
+        </button>
+        {detections.length > 0 && (
+          <button
+            onClick={() => setShowDetails(v => !v)}
+            className={`text-xs px-3 py-1 rounded-full border transition-colors ${
+              showDetails
+                ? 'bg-blue-100 border-blue-300 text-blue-700 dark:bg-blue-900/40 dark:border-blue-600 dark:text-blue-300'
+                : 'border-gray-300 text-gray-500 dark:border-gray-600 dark:text-gray-400'
+            }`}
+          >
+            Details ({detections.length} Methoden)
+          </button>
+        )}
+      </div>
+
+      {/* Detailed detections */}
+      {showDetails && detections.length > 0 && (
+        <div className="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
+          <div className="text-xs text-gray-500 mb-2">Einzelne Detektoren:</div>
+          <div className="space-y-1.5">
+            {detections.map((d: DewarpDetection) => {
+              const isUsed = dewarpResult.method_used.includes(d.method)
+              const aboveThreshold = d.confidence >= 0.5
+              return (
+                <div
+                  key={d.method}
+                  className={`flex items-center gap-3 text-xs px-2 py-1.5 rounded ${
+                    isUsed
+                      ? 'bg-teal-50 dark:bg-teal-900/20'
+                      : 'bg-gray-50 dark:bg-gray-800'
+                  }`}
+                >
+                  <span className="w-4 text-center">
+                    {isUsed ? '\u2713' : aboveThreshold ? '\u2012' : '\u2717'}
+                  </span>
+                  <span className={`w-40 ${isUsed ? 'font-medium text-gray-800 dark:text-gray-200' : 'text-gray-500'}`}>
+                    {METHOD_LABELS[d.method] || d.method}
+                  </span>
+                  <span className="font-mono w-16 text-right">
+                    {d.shear_degrees.toFixed(2)}\u00B0
+                  </span>
+                  <ConfBar value={d.confidence} />
+                  {!aboveThreshold && (
+                    <span className="text-gray-400 ml-1">(unter Schwelle)</span>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+          {wasRejected && (
+            <div className="mt-2 text-xs text-amber-600 dark:text-amber-400">
+              Die Korrektur wurde verworfen, weil die horizontale Projektions-Varianz nach Anwendung nicht besser war als vorher.
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/admin-lehrer/components/ocr-pipeline/ExcludeRegionsList.tsx b/admin-lehrer/components/ocr-pipeline/ExcludeRegionsList.tsx
new file mode 100644
index 0000000..ee47565
--- /dev/null
+++ b/admin-lehrer/components/ocr-pipeline/ExcludeRegionsList.tsx
@@ -0,0 +1,39 @@
+'use client'
+
+import type { ExcludeRegion } from '@/app/(admin)/ai/ocr-kombi/types'
+
+interface ExcludeRegionsListProps {
+  regions: ExcludeRegion[]
+  onDeleteRegion: (index: number) => void
+}
+
+export function ExcludeRegionsList({ regions, onDeleteRegion }: ExcludeRegionsListProps) {
+  if (regions.length === 0) return null
+
+  return (
+    <div className="bg-red-50 dark:bg-red-900/10 rounded-lg border border-red-200 dark:border-red-800 p-3">
+      <h4 className="text-xs font-medium text-red-700 dark:text-red-400 mb-2">
+        Ausschlussbereiche ({regions.length}) — Woerter in diesen Bereichen werden nicht erkannt
+      </h4>
+      <div className="space-y-1">
+        {regions.map((region, i) => (
+          <div key={i} className="flex items-center gap-3 text-xs">
+            <span className="w-3 h-3 rounded-sm flex-shrink-0 bg-red-500/30 border border-red-500" />
+            <span className="text-red-700 dark:text-red-400 font-medium">
+              {region.label || `Bereich ${i + 1}`}
+            </span>
+            <span className="font-mono text-red-600/70 dark:text-red-400/70">
+              {region.w}x{region.h}px @ ({region.x}, {region.y})
+            </span>
+            <button
+              onClick={() => onDeleteRegion(i)}
+              className="ml-auto text-red-500 hover:text-red-700 dark:hover:text-red-300"
+            >
+              Entfernen
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/components/ocr-pipeline/FineTuneSlider.tsx b/admin-lehrer/components/ocr-pipeline/FineTuneSlider.tsx
new file mode 100644
index 0000000..0ed8e53
--- /dev/null
+++ b/admin-lehrer/components/ocr-pipeline/FineTuneSlider.tsx
@@ -0,0 +1,55 @@
+'use client'
+
+/** A single slider row for fine-tuning. */
+export function FineTuneSlider({
+  label,
+  value,
+  onChange,
+  min,
+  max,
+  step,
+  unit = '\u00B0',
+  radioName,
+  radioChecked,
+  onRadioChange,
+}: {
+  label: string
+  value: number
+  onChange: (v: number) => void
+  min: number
+  max: number
+  step: number
+  unit?: string
+  radioName?: string
+  radioChecked?: boolean
+  onRadioChange?: () => void
+}) {
+  return (
+    <div className="flex items-center gap-2">
+      {radioName !== undefined && (
+        <input
+          type="radio"
+          name={radioName}
+          checked={radioChecked}
+          onChange={onRadioChange}
+          className="w-3.5 h-3.5 accent-teal-500"
+        />
+      )}
+      <span className="text-xs text-gray-500 dark:text-gray-400 w-36 shrink-0">{label}</span>
+      <span className="text-xs text-gray-400 w-8 text-right">{min}{unit}</span>
+      <input
+        type="range"
+        min={min * 100}
+        max={max * 100}
+        step={step * 100}
+        value={Math.round(value * 100)}
+        onChange={(e) => onChange(parseInt(e.target.value) / 100)}
+        className="flex-1 h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 accent-teal-500"
+      />
+      <span className="text-xs text-gray-400 w-8">+{max}{unit}</span>
+      <span className="font-mono text-xs w-14 text-right tabular-nums">
+        {value >= 0 ? '+' : ''}{value.toFixed(2)}{unit}
+      </span>
+    </div>
+  )
+}
diff --git a/admin-lehrer/components/ocr-pipeline/ImageRegionsPanel.tsx b/admin-lehrer/components/ocr-pipeline/ImageRegionsPanel.tsx
new file mode 100644
index 0000000..fa90d23
--- /dev/null
+++ b/admin-lehrer/components/ocr-pipeline/ImageRegionsPanel.tsx
@@ -0,0 +1,85 @@
+'use client'
+
+import type { ImageStyle } from '@/app/(admin)/ai/ocr-kombi/types'
+import { IMAGE_STYLES as STYLES } from '@/app/(admin)/ai/ocr-kombi/types'
+import type { ImageRegionWithState } from './ground-truth-types'
+
+interface ImageRegionsPanelProps {
+  imageRegions: ImageRegionWithState[]
+  onUpdateRegion: (index: number, update: Partial<ImageRegionWithState>) => void
+  onGenerateImage: (index: number) => void
+  onRemoveRegion: (index: number) => void
+}
+
+export function ImageRegionsPanel({
+  imageRegions, onUpdateRegion, onGenerateImage, onRemoveRegion,
+}: ImageRegionsPanelProps) {
+  if (imageRegions.length === 0) return null
+
+  return (
+    <div className="border rounded-lg dark:border-gray-700 p-4">
+      <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
+        Bildbereiche ({imageRegions.length} gefunden)
+      </h4>
+      <div className="space-y-3">
+        {imageRegions.map((region, i) => (
+          <div key={i} className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
+            {/* Preview thumbnail */}
+            <div className="w-16 h-16 flex-shrink-0 border rounded dark:border-gray-600 overflow-hidden bg-white">
+              {region.image_b64 ? (
+                <img src={region.image_b64} alt="" className="w-full h-full object-cover" />
+              ) : (
+                <div className="w-full h-full flex items-center justify-center text-gray-400 text-xs">
+                  {Math.round(region.bbox_pct.w)}x{Math.round(region.bbox_pct.h)}%
+                </div>
+              )}
+            </div>
+
+            {/* Prompt + controls */}
+            <div className="flex-1 min-w-0 space-y-2">
+              <div className="flex items-center gap-2">
+                <span className="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">
+                  Bereich {i + 1}:
+                </span>
+                <input
+                  type="text"
+                  value={region.prompt}
+                  onChange={e => onUpdateRegion(i, { prompt: e.target.value })}
+                  placeholder="Beschreibung / Prompt..."
+                  className="flex-1 text-sm px-2 py-1 border rounded dark:border-gray-600 dark:bg-gray-700 dark:text-white"
+                />
+              </div>
+              <div className="flex items-center gap-2">
+                <select
+                  value={region.style}
+                  onChange={e => onUpdateRegion(i, { style: e.target.value as ImageStyle })}
+                  className="text-sm px-2 py-1 border rounded dark:border-gray-600 dark:bg-gray-700 dark:text-white"
+                >
+                  {STYLES.map(s => (
+                    <option key={s.value} value={s.value}>{s.label}</option>
+                  ))}
+                </select>
+                <button
+                  onClick={() => onGenerateImage(i)}
+                  disabled={!!region.generating || !region.prompt}
+                  className="px-3 py-1 text-sm bg-teal-600 text-white rounded hover:bg-teal-700 disabled:opacity-50"
+                >
+                  {region.generating ? 'Generiere...' : 'Generieren'}
+                </button>
+                <button
+                  onClick={() => onRemoveRegion(i)}
+                  className="px-2 py-1 text-sm text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded"
+                >
+                  Entfernen
+                </button>
+              </div>
+              {region.description && region.description !== region.prompt && (
+                <p className="text-xs text-gray-400">{region.description}</p>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/components/ocr-pipeline/LlmReviewCorrections.tsx b/admin-lehrer/components/ocr-pipeline/LlmReviewCorrections.tsx
new file mode 100644
index 0000000..8d805e7
--- /dev/null
+++ b/admin-lehrer/components/ocr-pipeline/LlmReviewCorrections.tsx
@@ -0,0 +1,117 @@
+'use client'
+
+import type { LlmChange, ReviewMeta } from './llm-review-types'
+import { FIELD_LABELS } from './llm-review-types'
+
+interface LlmReviewCorrectionsProps {
+  changes: LlmChange[]
+  accepted: Set<number>
+  meta: ReviewMeta | null
+  totalDuration: number
+  applying: boolean
+  onToggleChange: (index: number) => void
+  onToggleAll: () => void
+  onApply: () => void
+  onNext: () => void
+}
+
+export function LlmReviewCorrections({
+  changes,
+  accepted,
+  meta,
+  totalDuration,
+  applying,
+  onToggleChange,
+  onToggleAll,
+  onApply,
+  onNext,
+}: LlmReviewCorrectionsProps) {
+  return (
+    <div className="space-y-4">
+      {/* Summary */}
+      <div className="bg-gray-50 dark:bg-gray-800/50 rounded-lg p-3 text-xs text-gray-500 dark:text-gray-400">
+        {changes.length === 0 ? (
+          <span>Keine Korrekturen noetig — alle Eintraege sind korrekt.</span>
+        ) : (
+          <span>
+            {changes.length} Korrektur{changes.length !== 1 ? 'en' : ''} gefunden ·{' '}
+            {accepted.size} ausgewaehlt ·{' '}
+            {meta?.skipped || 0} uebersprungen (Lautschrift) ·{' '}
+            {totalDuration}ms
+          </span>
+        )}
+      </div>
+
+      {/* Corrections detail list (if any) */}
+      {changes.length > 0 && (
+        <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
+          <div className="bg-gray-50 dark:bg-gray-800 px-3 py-2 border-b border-gray-200 dark:border-gray-700">
+            <span className="text-xs font-medium text-gray-600 dark:text-gray-400">
+              Korrekturvorschlaege ({accepted.size}/{changes.length} ausgewaehlt)
+            </span>
+          </div>
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="bg-gray-50/50 dark:bg-gray-800/50 border-b border-gray-200 dark:border-gray-700">
+                <th className="w-10 px-3 py-1.5 text-center">
+                  <input type="checkbox" checked={accepted.size === changes.length} onChange={onToggleAll}
+                    className="rounded border-gray-300 dark:border-gray-600" />
+                </th>
+                <th className="px-2 py-1.5 text-left text-gray-500 dark:text-gray-400 font-medium text-xs">Zeile</th>
+                <th className="px-2 py-1.5 text-left text-gray-500 dark:text-gray-400 font-medium text-xs">Feld</th>
+                <th className="px-2 py-1.5 text-left text-gray-500 dark:text-gray-400 font-medium text-xs">Vorher</th>
+                <th className="px-2 py-1.5 text-left text-gray-500 dark:text-gray-400 font-medium text-xs">Nachher</th>
+              </tr>
+            </thead>
+            <tbody>
+              {changes.map((change, idx) => (
+                <tr key={idx} className={`border-b border-gray-100 dark:border-gray-700/50 ${
+                  accepted.has(idx) ? 'bg-teal-50/50 dark:bg-teal-900/10' : ''
+                }`}>
+                  <td className="px-3 py-1.5 text-center">
+                    <input type="checkbox" checked={accepted.has(idx)} onChange={() => onToggleChange(idx)}
+                      className="rounded border-gray-300 dark:border-gray-600" />
+                  </td>
+                  <td className="px-2 py-1.5 text-gray-500 dark:text-gray-400 font-mono text-xs">R{change.row_index}</td>
+                  <td className="px-2 py-1.5">
+                    <span className="text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400">
+                      {FIELD_LABELS[change.field] || change.field}
+                    </span>
+                  </td>
+                  <td className="px-2 py-1.5"><span className="line-through text-red-500 dark:text-red-400 text-xs">{change.old}</span></td>
+                  <td className="px-2 py-1.5"><span className="text-green-600 dark:text-green-400 font-medium text-xs">{change.new}</span></td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {/* Actions */}
+      <div className="flex items-center justify-between pt-2">
+        <p className="text-xs text-gray-400">
+          {changes.length > 0 ? `${accepted.size} von ${changes.length} ausgewaehlt` : ''}
+        </p>
+        <div className="flex gap-3">
+          {changes.length > 0 && (
+            <button onClick={onNext}
+              className="px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors text-gray-600 dark:text-gray-400">
+              Alle ablehnen
+            </button>
+          )}
+          {changes.length > 0 ? (
+            <button onClick={onApply} disabled={applying || accepted.size === 0}
+              className="px-5 py-2 text-sm bg-teal-600 text-white rounded-lg hover:bg-teal-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium">
+              {applying ? 'Wird uebernommen...' : `${accepted.size} Korrektur${accepted.size !== 1 ? 'en' : ''} uebernehmen`}
+            </button>
+          ) : (
+            <button onClick={onNext}
+              className="px-6 py-2.5 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors font-medium">
+              Weiter →
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/components/ocr-pipeline/LlmReviewOverlay.tsx b/admin-lehrer/components/ocr-pipeline/LlmReviewOverlay.tsx
new file mode 100644
index 0000000..df372cd
--- /dev/null
+++ b/admin-lehrer/components/ocr-pipeline/LlmReviewOverlay.tsx
@@ -0,0 +1,143 @@
+'use client'
+
+import { useEffect, useRef, useState, useMemo } from 'react'
+import type { GridCell } from '@/app/(admin)/ai/ocr-kombi/types'
+import type { WordPosition } from './usePixelWordPositions'
+
+interface LlmReviewOverlayProps {
+  cells: GridCell[]
+  imageNaturalSize: { w: number; h: number } | null
+  fontScale: number
+  leftPaddingPct: number
+  globalBold: boolean
+  cellWordPositions: Map<string, WordPosition[]>
+}
+
+export function LlmReviewOverlay({
+  cells,
+  imageNaturalSize,
+  fontScale,
+  leftPaddingPct,
+  globalBold,
+  cellWordPositions,
+}: LlmReviewOverlayProps) {
+  const reconRef = useRef<HTMLDivElement>(null)
+  const [reconWidth, setReconWidth] = useState(0)
+
+  // Track reconstruction container width for font size calculation
+  useEffect(() => {
+    const el = reconRef.current
+    if (!el) return
+    const obs = new ResizeObserver(entries => {
+      for (const entry of entries) setReconWidth(entry.contentRect.width)
+    })
+    obs.observe(el)
+    return () => obs.disconnect()
+  }, [])
+
+  // Snap all cells in the same column to consistent x/w positions
+  const colPositions = useMemo(() => {
+    const byCol = new Map<number, { xs: number[]; ws: number[] }>()
+    for (const cell of cells) {
+      if (!cell.bbox_pct) continue
+      const entry = byCol.get(cell.col_index) || { xs: [], ws: [] }
+      entry.xs.push(cell.bbox_pct.x)
+      entry.ws.push(cell.bbox_pct.w)
+      byCol.set(cell.col_index, entry)
+    }
+    const result = new Map<number, { x: number; w: number }>()
+    for (const [colIdx, { xs, ws }] of byCol) {
+      xs.sort((a, b) => a - b)
+      ws.sort((a, b) => a - b)
+      const medianX = xs[Math.floor(xs.length / 2)]
+      const medianW = ws[Math.floor(ws.length / 2)]
+      result.set(colIdx, { x: medianX, w: medianW })
+    }
+    return result
+  }, [cells])
+
+  return (
+    <div>
+      <div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
+        Text-Rekonstruktion ({cells.filter(c => c.text).length} Zellen)
+      </div>
+      <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden bg-white dark:bg-white">
+        <div
+          ref={reconRef}
+          className="relative"
+          style={{
+            aspectRatio: imageNaturalSize ? `${imageNaturalSize.w} / ${imageNaturalSize.h}` : '3 / 4',
+          }}
+        >
+          {cells.map(cell => {
+            if (!cell.bbox_pct || !cell.text) return null
+            const col = colPositions.get(cell.col_index)
+            const cellX = col?.x ?? cell.bbox_pct.x
+            const cellW = col?.w ?? cell.bbox_pct.w
+            const aspect = imageNaturalSize ? imageNaturalSize.h / imageNaturalSize.w : 4 / 3
+            const containerH = reconWidth * aspect
+            const cellHeightPx = containerH * (cell.bbox_pct.h / 100)
+
+            const wordPos = cellWordPositions.get(cell.cell_id)
+
+            // Pixel-analysed: render word-groups at detected positions
+            if (wordPos) {
+              return wordPos.map((wp, i) => {
+                const autoFontPx = cellHeightPx * wp.fontRatio * fontScale
+                const fs = Math.max(6, autoFontPx)
+                return (
+                  <span
+                    key={`${cell.cell_id}_${i}`}
+                    className="absolute leading-none pointer-events-none select-none"
+                    style={{
+                      left: `${wp.xPct}%`,
+                      top: `${cell.bbox_pct.y}%`,
+                      width: `${wp.wPct}%`,
+                      height: `${cell.bbox_pct.h}%`,
+                      fontSize: `${fs}px`,
+                      fontWeight: globalBold ? 'bold' : (cell.is_bold ? 'bold' : 'normal'),
+                      fontFamily: "'Liberation Sans', Arial, sans-serif",
+                      display: 'flex',
+                      alignItems: 'center',
+                      whiteSpace: 'nowrap',
+                      overflow: 'visible',
+                      color: '#1a1a1a',
+                    }}
+                  >
+                    {wp.text}
+                  </span>
+                )
+              })
+            }
+
+            // Fallback: no pixel data - single span for entire cell
+            const fontSize = Math.max(6, cellHeightPx * fontScale)
+            return (
+              <span
+                key={cell.cell_id}
+                className="absolute leading-none pointer-events-none select-none"
+                style={{
+                  left: `${cellX}%`,
+                  top: `${cell.bbox_pct.y}%`,
+                  width: `${cellW}%`,
+                  height: `${cell.bbox_pct.h}%`,
+                  fontSize: `${fontSize}px`,
+                  fontWeight: globalBold ? 'bold' : (cell.is_bold ? 'bold' : 'normal'),
+                  paddingLeft: `${leftPaddingPct}%`,
+                  fontFamily: "'Liberation Sans', Arial, sans-serif",
+                  display: 'flex',
+                  alignItems: 'center',
+                  whiteSpace: 'pre',
+                  overflow: 'visible',
+                  color: '#1a1a1a',
+                }}
+              >
+                {cell.text}
+              </span>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/components/ocr-pipeline/LlmReviewStatusScreens.tsx b/admin-lehrer/components/ocr-pipeline/LlmReviewStatusScreens.tsx
new file mode 100644
index 0000000..47aa06e
--- /dev/null
+++ b/admin-lehrer/components/ocr-pipeline/LlmReviewStatusScreens.tsx
@@ -0,0 +1,118 @@
+'use client'
+
+import type { LlmChange, RowStatus } from './llm-review-types'
+
+/** Cell content with inline diff for corrections */
+export function CellContent({ text, field, rowChanges }: {
+  text: string
+  field: string
+  rowChanges?: LlmChange[]
+}) {
+  const change = rowChanges?.find(c => c.field === field)
+
+  if (!text && !change) {
+    return <span className="text-gray-300 dark:text-gray-600">&mdash;</span>
+  }
+
+  if (change) {
+    return (
+      <span>
+        <span className="line-through text-red-400 dark:text-red-500 text-xs mr-1">{change.old}</span>
+        <span className="text-green-600 dark:text-green-400 font-medium text-xs">{change.new}</span>
+      </span>
+    )
+  }
+
+  return <span className="text-gray-700 dark:text-gray-300 text-xs">{text}</span>
+}
+
+/** Status icon for each row */
+export function StatusIcon({ status }: { status: RowStatus }) {
+  switch (status) {
+    case 'pending':
+      return <span className="text-gray-300 dark:text-gray-600 text-xs">—</span>
+    case 'active':
+      return (
+        <span className="inline-block w-3 h-3 rounded-full bg-yellow-400 animate-pulse" title="Wird geprueft" />
+      )
+    case 'reviewed':
+      return (
+        <svg className="w-4 h-4 text-green-500 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+        </svg>
+      )
+    case 'corrected':
+      return (
+        <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-teal-100 dark:bg-teal-900/30 text-teal-700 dark:text-teal-400">
+          korr.
+        </span>
+      )
+    case 'skipped':
+      return (
+        <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400">
+          skip
+        </span>
+      )
+  }
+}
+
+/** Loading spinner screen */
+export function LoadingScreen() {
+  return (
+    <div className="flex items-center gap-3 justify-center py-12">
+      <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-teal-500" />
+      <span className="text-gray-500">Session-Daten werden geladen...</span>
+    </div>
+  )
+}
+
+/** Error screen with retry */
+export function ErrorScreen({ error, onRetry, onSkip }: {
+  error: string
+  onRetry: () => void
+  onSkip: () => void
+}) {
+  return (
+    <div className="flex flex-col items-center justify-center py-12 text-center">
+      <div className="text-5xl mb-4">⚠️</div>
+      <h3 className="text-lg font-medium text-red-600 dark:text-red-400 mb-2">Fehler bei OCR-Zeichenkorrektur</h3>
+      <p className="text-sm text-gray-500 dark:text-gray-400 max-w-lg mb-4">{error}</p>
+      <div className="flex gap-3">
+        <button onClick={onRetry}
+          className="px-5 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors text-sm">
+          Erneut versuchen
+        </button>
+        <button onClick={onSkip}
+          className="px-5 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors text-sm">
+          Ueberspringen →
+        </button>
+      </div>
+    </div>
+  )
+}
+
+/** Applied screen shown after corrections are applied */
+export function AppliedScreen({ acceptedCount, totalChanges, onNext }: {
+  acceptedCount: number
+  totalChanges: number
+  onNext: () => void
+}) {
+  return (
+    <div className="flex flex-col items-center justify-center py-12 text-center">
+      <div className="text-5xl mb-4">✅</div>
+      <h3 className="text-lg font-medium text-gray-700 dark:text-gray-300 mb-2">Korrekturen uebernommen</h3>
+      <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">
+        {acceptedCount} von {totalChanges} Korrekturen wurden angewendet.
+      </p>
+      <button onClick={onNext}
+        className="px-6 py-2.5 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors font-medium">
+        Weiter →
+      </button>
+    </div>
+  )
+}
+
+/** No session placeholder */
+export function NoSessionScreen() {
+  return <div className="text-center py-12 text-gray-400">Bitte zuerst eine Session auswaehlen.</div>
+}
diff --git a/admin-lehrer/components/ocr-pipeline/LlmReviewVocabTable.tsx b/admin-lehrer/components/ocr-pipeline/LlmReviewVocabTable.tsx
new file mode 100644
index 0000000..f186566
--- /dev/null
+++ b/admin-lehrer/components/ocr-pipeline/LlmReviewVocabTable.tsx
@@ -0,0 +1,109 @@
+'use client'
+
+import { forwardRef } from 'react'
+import type { WordEntry, ColumnMeta } from '@/app/(admin)/ai/ocr-kombi/types'
+import type { LlmChange, RowStatus } from './llm-review-types'
+import { COL_TYPE_TO_FIELD, COL_TYPE_COLOR, FIELD_LABELS } from './llm-review-types'
+import { CellContent, StatusIcon } from './LlmReviewStatusScreens'
+
+interface LlmReviewVocabTableProps {
+  vocabEntries: WordEntry[]
+  columnsUsed: ColumnMeta[]
+  getRowStatus: (rowIndex: number) => RowStatus
+  correctedMap: Map<number, LlmChange[]>
+  activeRowRef: React.RefObject<HTMLTableRowElement | null>
+}
+
+export const LlmReviewVocabTable = forwardRef<HTMLDivElement, LlmReviewVocabTableProps>(
+  function LlmReviewVocabTable({ vocabEntries, columnsUsed, getRowStatus, correctedMap, activeRowRef }, ref) {
+    return (
+      <div ref={ref}>
+        <div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
+          {columnsUsed.length === 1 && columnsUsed[0]?.type === 'column_text' ? 'Tabelle' : 'Vokabeltabelle'} ({vocabEntries.length} Eintraege)
+        </div>
+        <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
+          <div className="max-h-[70vh] overflow-y-auto">
+            <table className="w-full text-sm">
+              <thead className="sticky top-0 z-10">
+                <tr className="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+                  <th className="px-2 py-2 text-left text-gray-500 dark:text-gray-400 font-medium w-10">#</th>
+                  {columnsUsed.length > 0 ? (
+                    columnsUsed.map((col, i) => {
+                      const field = COL_TYPE_TO_FIELD[col.type]
+                      if (!field) return null
+                      return (
+                        <th key={i} className={`px-2 py-2 text-left font-medium ${COL_TYPE_COLOR[col.type] || 'text-gray-500 dark:text-gray-400'}`}>
+                          {FIELD_LABELS[field] || field}
+                        </th>
+                      )
+                    })
+                  ) : (
+                    <>
+                      <th className="px-2 py-2 text-left text-gray-500 dark:text-gray-400 font-medium">EN</th>
+                      <th className="px-2 py-2 text-left text-gray-500 dark:text-gray-400 font-medium">DE</th>
+                      <th className="px-2 py-2 text-left text-gray-500 dark:text-gray-400 font-medium">Beispiel</th>
+                    </>
+                  )}
+                  <th className="px-2 py-2 text-center text-gray-500 dark:text-gray-400 font-medium w-16">Status</th>
+                </tr>
+              </thead>
+              <tbody>
+                {vocabEntries.map((entry, idx) => {
+                  const rowStatus = getRowStatus(idx)
+                  const rowChanges = correctedMap.get(idx)
+
+                  const rowBg = {
+                    pending: '',
+                    active: 'bg-yellow-50 dark:bg-yellow-900/20',
+                    reviewed: '',
+                    corrected: 'bg-teal-50/50 dark:bg-teal-900/10',
+                    skipped: 'bg-gray-50 dark:bg-gray-800/50',
+                  }[rowStatus]
+
+                  return (
+                    <tr
+                      key={idx}
+                      ref={rowStatus === 'active' ? activeRowRef : undefined}
+                      className={`border-b border-gray-100 dark:border-gray-700/50 ${rowBg} ${
+                        rowStatus === 'active' ? 'ring-1 ring-yellow-400 ring-inset' : ''
+                      }`}
+                    >
+                      <td className="px-2 py-1.5 text-gray-400 font-mono text-xs">{idx}</td>
+                      {columnsUsed.length > 0 ? (
+                        columnsUsed.map((col, i) => {
+                          const field = COL_TYPE_TO_FIELD[col.type]
+                          if (!field) return null
+                          const text = (entry as Record<string, unknown>)[field] as string || ''
+                          return (
+                            <td key={i} className="px-2 py-1.5 text-xs">
+                              <CellContent text={text} field={field} rowChanges={rowChanges} />
+                            </td>
+                          )
+                        })
+                      ) : (
+                        <>
+                          <td className="px-2 py-1.5">
+                            <CellContent text={entry.english} field="english" rowChanges={rowChanges} />
+                          </td>
+                          <td className="px-2 py-1.5">
+                            <CellContent text={entry.german} field="german" rowChanges={rowChanges} />
+                          </td>
+                          <td className="px-2 py-1.5 text-xs">
+                            <CellContent text={entry.example} field="example" rowChanges={rowChanges} />
+                          </td>
+                        </>
+                      )}
+                      <td className="px-2 py-1.5 text-center">
+                        <StatusIcon status={rowStatus} />
+                      </td>
+                    </tr>
+                  )
+                })}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    )
+  }
+)
diff --git a/admin-lehrer/components/ocr-pipeline/ReconstructionOverlay.tsx b/admin-lehrer/components/ocr-pipeline/ReconstructionOverlay.tsx
new file mode 100644
index 0000000..67faed3
--- /dev/null
+++ b/admin-lehrer/components/ocr-pipeline/ReconstructionOverlay.tsx
@@ -0,0 +1,302 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import type { StructureBox, StructureGraphic } from '@/app/(admin)/ai/ocr-kombi/types'
+import type { WordPosition } from './usePixelWordPositions'
+import type { EditableCell, PageRegion, RowItem, PageZone } from './StepReconstructionTypes'
+import { adjustCellForBoxZones } from './StepReconstructionTypes'
+import { StructureLayer } from './StructureLayer'
+
+interface ReconstructionOverlayProps {
+  cells: EditableCell[]
+  dewarpedUrl: string
+  imageNaturalSize: { w: number; h: number } | null
+  parentColumns: PageRegion[]
+  parentRows: RowItem[]
+  parentZones: PageZone[]
+  structureBoxes: StructureBox[]
+  structureGraphics: StructureGraphic[]
+  showStructure: boolean
+  fontScale: number
+  globalBold: boolean
+  boxZonesPct: { topPct: number; bottomPct: number }[]
+  cellWordPositions: Map<string, WordPosition[]>
+  onTextChange: (cellId: string, newText: string) => void
+  onKeyDown: (e: React.KeyboardEvent, cellId: string) => void
+  onResetCell: (cellId: string) => void
+  onImageNaturalSize: (size: { w: number; h: number }) => void
+  getDisplayText: (cell: EditableCell) => string
+  isEdited: (cell: EditableCell) => boolean
+}
+
+export function ReconstructionOverlay({
+  cells,
+  dewarpedUrl,
+  imageNaturalSize,
+  parentColumns,
+  parentRows,
+  parentZones,
+  structureBoxes,
+  structureGraphics,
+  showStructure,
+  fontScale,
+  globalBold,
+  boxZonesPct,
+  cellWordPositions,
+  onTextChange,
+  onKeyDown,
+  onResetCell,
+  onImageNaturalSize,
+  getDisplayText,
+  isEdited,
+}: ReconstructionOverlayProps) {
+  const reconRef = useRef<HTMLDivElement>(null)
+  const [reconWidth, setReconWidth] = useState(0)
+
+  // Track reconstruction container width for font size calculation
+  useEffect(() => {
+    const el = reconRef.current
+    if (!el) return
+    const obs = new ResizeObserver(entries => {
+      for (const entry of entries) setReconWidth(entry.contentRect.width)
+    })
+    obs.observe(el)
+    return () => obs.disconnect()
+  }, [])
+
+  const imgW = imageNaturalSize?.w || 1
+  const imgH = imageNaturalSize?.h || 1
+  const aspect = imgH / imgW
+  const containerH = reconWidth * aspect
+
+  return (
+    <div className="grid grid-cols-2 gap-4">
+      {/* Left: Original image */}
+      <div>
+        <div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
+          Originalbild
+        </div>
+        <div className="border rounded-lg overflow-hidden dark:border-gray-700 bg-gray-50 dark:bg-gray-900 sticky top-4">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={dewarpedUrl}
+            alt="Original"
+            className="w-full h-auto"
+            onLoad={(e) => {
+              const img = e.target as HTMLImageElement
+              onImageNaturalSize({ w: img.naturalWidth, h: img.naturalHeight })
+            }}
+          />
+        </div>
+      </div>
+
+      {/* Right: Reconstructed table overlay */}
+      <div>
+        <div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
+          Rekonstruktion ({cells.length} Zellen)
+        </div>
+        <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden bg-white">
+          <div
+            ref={reconRef}
+            className="relative"
+            style={{ aspectRatio: `${imgW} / ${imgH}` }}
+          >
+            {/* Column lines */}
+            {parentColumns
+              .filter(c => !['header', 'footer'].includes(c.type))
+              .map((col, i) => (
+                <div
+                  key={`col-${i}`}
+                  className="absolute top-0 bottom-0 border-l border-gray-300/50"
+                  style={{ left: `${(col.x / imgW) * 100}%` }}
+                />
+              ))}
+
+            {/* Row lines */}
+            {parentRows.map((row, i) => (
+              <div
+                key={`row-${i}`}
+                className="absolute left-0 right-0 border-t border-gray-300/50"
+                style={{ top: `${(row.y / imgH) * 100}%` }}
+              />
+            ))}
+
+            {/* Box zone highlight */}
+            {parentZones
+              .filter(z => z.zone_type === 'box' && z.box)
+              .map((z, i) => {
+                const box = z.box!
+                return (
+                  <div
+                    key={`box-${i}`}
+                    className="absolute border-2 border-blue-400/30 bg-blue-50/10 pointer-events-none"
+                    style={{
+                      left: `${(box.x / imgW) * 100}%`,
+                      top: `${(box.y / imgH) * 100}%`,
+                      width: `${(box.width / imgW) * 100}%`,
+                      height: `${(box.height / imgH) * 100}%`,
+                    }}
+                  />
+                )
+              })}
+
+            {/* Structure elements (boxes, graphics) */}
+            <StructureLayer
+              boxes={structureBoxes}
+              graphics={structureGraphics}
+              imgW={imgW}
+              imgH={imgH}
+              show={showStructure}
+            />
+
+            {/* Pixel-positioned words / editable inputs */}
+            {cells.map((cell) => renderOverlayCell(
+              cell,
+              getDisplayText(cell),
+              isEdited(cell),
+              cellWordPositions.get(cell.cellId),
+              adjustCellForBoxZones(cell.bboxPct, cell.cellId, boxZonesPct),
+              containerH,
+              fontScale,
+              globalBold,
+              onTextChange,
+              onKeyDown,
+              onResetCell,
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// --- Cell rendering for overlay mode ---
+
+function renderOverlayCell(
+  cell: EditableCell,
+  displayText: string,
+  edited: boolean,
+  wordPos: WordPosition[] | undefined,
+  adjBbox: { x: number; y: number; w: number; h: number },
+  containerH: number,
+  fontScale: number,
+  globalBold: boolean,
+  onTextChange: (cellId: string, text: string) => void,
+  onKeyDown: (e: React.KeyboardEvent, cellId: string) => void,
+  onResetCell: (cellId: string) => void,
+): React.ReactNode {
+  const cellHeightPx = containerH * (adjBbox.h / 100)
+
+  // Pixel-analysed: render word-groups at detected positions as inputs
+  if (wordPos && wordPos.length > 0) {
+    return wordPos.map((wp, i) => {
+      const autoFontPx = cellHeightPx * wp.fontRatio * fontScale
+      const fs = Math.max(6, autoFontPx)
+
+      // For multi-group cells, render as span (read-only positioned)
+      if (wordPos.length > 1) {
+        return (
+          <span
+            key={`${cell.cellId}_wp_${i}`}
+            className="absolute leading-none pointer-events-none select-none"
+            style={{
+              left: `${wp.xPct}%`,
+              top: `${adjBbox.y}%`,
+              width: `${wp.wPct}%`,
+              height: `${adjBbox.h}%`,
+              fontSize: `${fs}px`,
+              fontWeight: globalBold ? 'bold' : (cell.colType === 'column_en' ? 'bold' : 'normal'),
+              fontFamily: "'Liberation Sans', Arial, sans-serif",
+              display: 'flex',
+              alignItems: 'center',
+              whiteSpace: 'nowrap',
+              overflow: 'visible',
+              color: '#1a1a1a',
+            }}
+          >
+            {wp.text}
+          </span>
+        )
+      }
+
+      // Single group: render as editable input at pixel position
+      return (
+        <div key={`${cell.cellId}_wp_${i}`} className="absolute group" style={{
+          left: `${wp.xPct}%`,
+          top: `${adjBbox.y}%`,
+          width: `${wp.wPct}%`,
+          height: `${adjBbox.h}%`,
+        }}>
+          <input
+            id={`cell-${cell.cellId}`}
+            type="text"
+            value={displayText}
+            onChange={(e) => onTextChange(cell.cellId, e.target.value)}
+            onKeyDown={(e) => onKeyDown(e, cell.cellId)}
+            className={`w-full h-full bg-transparent border-0 outline-none px-0 transition-colors ${
+              edited ? 'bg-green-50/30' : ''
+            }`}
+            style={{
+              fontSize: `${fs}px`,
+              fontWeight: globalBold ? 'bold' : (cell.colType === 'column_en' ? 'bold' : 'normal'),
+              fontFamily: "'Liberation Sans', Arial, sans-serif",
+              lineHeight: '1',
+              color: '#1a1a1a',
+            }}
+            title={`${cell.cellId} (${cell.colType})`}
+          />
+          {edited && (
+            <button
+              onClick={() => onResetCell(cell.cellId)}
+              className="absolute -top-1 -right-1 w-4 h-4 bg-red-500 text-white rounded-full text-[9px] leading-none opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
+              title="Zuruecksetzen"
+            >
+              &times;
+            </button>
+          )}
+        </div>
+      )
+    })
+  }
+
+  // Fallback: no pixel data — single input at cell bbox
+  if (!cell.text) return null
+
+  const fontSize = Math.max(6, cellHeightPx * fontScale)
+  return (
+    <div key={cell.cellId} className="absolute group" style={{
+      left: `${adjBbox.x}%`,
+      top: `${adjBbox.y}%`,
+      width: `${adjBbox.w}%`,
+      height: `${adjBbox.h}%`,
+    }}>
+      <input
+        id={`cell-${cell.cellId}`}
+        type="text"
+        value={displayText}
+        onChange={(e) => onTextChange(cell.cellId, e.target.value)}
+        onKeyDown={(e) => onKeyDown(e, cell.cellId)}
+        className={`w-full h-full bg-transparent border-0 outline-none px-0 transition-colors ${
+          edited ? 'bg-green-50/30' : ''
+        }`}
+        style={{
+          fontSize: `${fontSize}px`,
+          fontWeight: globalBold ? 'bold' : 'normal',
+          fontFamily: "'Liberation Sans', Arial, sans-serif",
+          lineHeight: '1',
+          color: '#1a1a1a',
+        }}
+        title={`${cell.cellId} (${cell.colType})`}
+      />
+      {edited && (
+        <button
+          onClick={() => onResetCell(cell.cellId)}
+          className="absolute -top-1 -right-1 w-4 h-4 bg-red-500 text-white rounded-full text-[9px] leading-none opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
+          title="Zuruecksetzen"
+        >
+          &times;
+        </button>
+      )}
+    </div>
+  )
+}
diff --git a/admin-lehrer/components/ocr-pipeline/ReconstructionPanel.tsx b/admin-lehrer/components/ocr-pipeline/ReconstructionPanel.tsx
new file mode 100644
index 0000000..d05cca3
--- /dev/null
+++ b/admin-lehrer/components/ocr-pipeline/ReconstructionPanel.tsx
@@ -0,0 +1,154 @@
+'use client'
+
+import type { GridCell, ImageRegionWithState } from './ground-truth-types'
+
+interface ReconstructionPanelProps {
+  cells: GridCell[]
+  aspect: number
+  zoom: number
+  reconWidth: number
+  imageRegions: ImageRegionWithState[]
+  drawingRegion: boolean
+  dragStart: { x: number; y: number } | null
+  dragEnd: { x: number; y: number } | null
+  panelRef: React.RefObject<HTMLDivElement | null>
+  reconRef: React.RefObject<HTMLDivElement | null>
+  onScroll: () => void
+  onToggleDrawing: () => void
+  onMouseDown: (e: React.MouseEvent<HTMLDivElement>) => void
+  onMouseMove: (e: React.MouseEvent<HTMLDivElement>) => void
+  onMouseUp: () => void
+}
+
+export function ReconstructionPanel({
+  cells, aspect, zoom, reconWidth, imageRegions, drawingRegion,
+  dragStart, dragEnd, panelRef, reconRef,
+  onScroll, onToggleDrawing, onMouseDown, onMouseMove, onMouseUp,
+}: ReconstructionPanelProps) {
+  return (
+    <div className="border rounded-lg dark:border-gray-700 overflow-hidden flex flex-col">
+      <div className="px-3 py-1.5 bg-gray-50 dark:bg-gray-800 text-sm font-medium text-gray-600 dark:text-gray-400 border-b dark:border-gray-700 flex items-center justify-between">
+        <span>Rekonstruktion</span>
+        <button
+          onClick={onToggleDrawing}
+          className={`text-xs px-2 py-0.5 rounded ${drawingRegion ? 'bg-indigo-600 text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400'}`}
+        >
+          {drawingRegion ? 'Region zeichnen...' : '+ Region'}
+        </button>
+      </div>
+      <div
+        ref={panelRef}
+        className="flex-1 overflow-auto"
+        onScroll={onScroll}
+      >
+        <div style={{ width: `${zoom}%`, minWidth: '100%' }}>
+        {/* Reconstruction container */}
+        <div
+          ref={reconRef}
+          className="relative bg-white"
+          style={{
+            paddingBottom: `${aspect * 100}%`,
+            cursor: drawingRegion ? 'crosshair' : 'default',
+          }}
+          onMouseDown={onMouseDown}
+          onMouseMove={onMouseMove}
+          onMouseUp={onMouseUp}
+        >
+          {/* Row separator lines -- derive from cells */}
+          <RowSeparators cells={cells} />
+
+          {/* Cell texts -- black on white, font size derived from cell height */}
+          {cells.map(cell => {
+            if (!cell.bbox_pct || !cell.text) return null
+            const containerH = reconWidth * aspect
+            const cellHeightPx = containerH * (cell.bbox_pct.h / 100)
+            const fontSize = Math.max(6, cellHeightPx * 0.7)
+            return (
+              <span
+                key={cell.cell_id}
+                className="absolute leading-none overflow-hidden whitespace-nowrap"
+                style={{
+                  left: `${cell.bbox_pct.x}%`,
+                  top: `${cell.bbox_pct.y}%`,
+                  width: `${cell.bbox_pct.w}%`,
+                  height: `${cell.bbox_pct.h}%`,
+                  color: '#1a1a1a',
+                  fontSize: `${fontSize}px`,
+                  fontWeight: cell.is_bold ? 'bold' : 'normal',
+                  fontFamily: "'Liberation Sans', 'DejaVu Sans', Arial, sans-serif",
+                  display: 'flex',
+                  alignItems: 'center',
+                  padding: '0 1px',
+                }}
+                title={`${cell.cell_id}: ${cell.text}`}
+              >
+                {cell.text}
+              </span>
+            )
+          })}
+
+          {/* Generated images at region positions */}
+          {imageRegions.map((region, i) => (
+            <div
+              key={`region-${i}`}
+              className="absolute border-2 border-dashed border-indigo-400"
+              style={{
+                left: `${region.bbox_pct.x}%`,
+                top: `${region.bbox_pct.y}%`,
+                width: `${region.bbox_pct.w}%`,
+                height: `${region.bbox_pct.h}%`,
+              }}
+            >
+              {region.image_b64 ? (
+                <img src={region.image_b64} alt={region.description} className="w-full h-full object-cover" />
+              ) : (
+                <div className="w-full h-full flex items-center justify-center bg-indigo-50/50 text-indigo-400 text-[0.5em]">
+                  {region.generating ? '...' : `Bild ${i + 1}`}
+                </div>
+              )}
+            </div>
+          ))}
+
+          {/* Drawing rectangle */}
+          {dragStart && dragEnd && (
+            <div
+              className="absolute border-2 border-dashed border-red-500 bg-red-100/20 pointer-events-none"
+              style={{
+                left: `${Math.min(dragStart.x, dragEnd.x)}%`,
+                top: `${Math.min(dragStart.y, dragEnd.y)}%`,
+                width: `${Math.abs(dragEnd.x - dragStart.x)}%`,
+                height: `${Math.abs(dragEnd.y - dragStart.y)}%`,
+              }}
+            />
+          )}
+        </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/** Row separator lines derived from first-column cells */
+function RowSeparators({ cells }: { cells: GridCell[] }) {
+  const rowYs = new Set<number>()
+  for (const cell of cells) {
+    if (cell.col_index === 0 && cell.bbox_pct) {
+      rowYs.add(cell.bbox_pct.y)
+    }
+  }
+  return (
+    <>
+      {Array.from(rowYs).map((y, i) => (
+        <div
+          key={`row-${i}`}
+          className="absolute left-0 right-0"
+          style={{
+            top: `${y}%`,
+            height: '1px',
+            backgroundColor: 'rgba(0,0,0,0.06)',
+          }}
+        />
+      ))}
+    </>
+  )
+}
diff --git a/admin-lehrer/components/ocr-pipeline/ReconstructionSimpleView.tsx b/admin-lehrer/components/ocr-pipeline/ReconstructionSimpleView.tsx
new file mode 100644
index 0000000..8fd7ecc
--- /dev/null
+++ b/admin-lehrer/components/ocr-pipeline/ReconstructionSimpleView.tsx
@@ -0,0 +1,145 @@
+'use client'
+
+import { useCallback, useRef } from 'react'
+import type { StructureBox, StructureGraphic } from '@/app/(admin)/ai/ocr-kombi/types'
+import type { EditableCell } from './StepReconstructionTypes'
+import { colTypeColor } from './StepReconstructionTypes'
+import { StructureLayer } from './StructureLayer'
+
+interface ReconstructionSimpleViewProps {
+  cells: EditableCell[]
+  dewarpedUrl: string
+  zoom: number
+  imageNaturalSize: { w: number; h: number } | null
+  imageNaturalH: number
+  emptyCellIds: Set<string>
+  showEmptyHighlight: boolean
+  structureBoxes: StructureBox[]
+  structureGraphics: StructureGraphic[]
+  showStructure: boolean
+  onTextChange: (cellId: string, newText: string) => void
+  onKeyDown: (e: React.KeyboardEvent, cellId: string) => void
+  onResetCell: (cellId: string) => void
+  onImageLoad: () => void
+  getDisplayText: (cell: EditableCell) => string
+  isEdited: (cell: EditableCell) => boolean
+  imageRef: React.RefObject<HTMLImageElement | null>
+}
+
+export function ReconstructionSimpleView({
+  cells,
+  dewarpedUrl,
+  zoom,
+  imageNaturalSize,
+  imageNaturalH,
+  emptyCellIds,
+  showEmptyHighlight,
+  structureBoxes,
+  structureGraphics,
+  showStructure,
+  onTextChange,
+  onKeyDown,
+  onResetCell,
+  onImageLoad,
+  getDisplayText,
+  isEdited,
+  imageRef,
+}: ReconstructionSimpleViewProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  // Font size based on image natural height (not container) scaled by zoom
+  const getFontSize = useCallback((bboxH: number): number => {
+    const baseH = imageNaturalH || 800
+    const px = (bboxH / 100) * baseH * 0.55
+    return Math.max(8, Math.min(18, px * (zoom / 100)))
+  }, [imageNaturalH, zoom])
+
+  return (
+    <div className="border rounded-lg overflow-auto dark:border-gray-700 bg-gray-100 dark:bg-gray-900" style={{ maxHeight: '75vh' }}>
+      <div
+        ref={containerRef}
+        className="relative inline-block"
+        style={{ transform: `scale(${zoom / 100})`, transformOrigin: 'top left' }}
+      >
+        {/* Background image at reduced opacity */}
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          ref={imageRef}
+          src={dewarpedUrl}
+          alt="Dewarped"
+          className="block"
+          style={{ opacity: 0.3 }}
+          onLoad={onImageLoad}
+        />
+
+        {/* Structure elements (boxes, graphics) */}
+        {imageNaturalSize && (
+          <StructureLayer
+            boxes={structureBoxes}
+            graphics={structureGraphics}
+            imgW={imageNaturalSize.w}
+            imgH={imageNaturalSize.h}
+            show={showStructure}
+          />
+        )}
+
+        {/* Empty field markers */}
+        {showEmptyHighlight && cells
+          .filter(c => emptyCellIds.has(c.cellId))
+          .map(cell => (
+            <div
+              key={`empty-${cell.cellId}`}
+              className="absolute border-2 border-dashed border-red-400/60 rounded pointer-events-none"
+              style={{
+                left: `${cell.bboxPct.x}%`,
+                top: `${cell.bboxPct.y}%`,
+                width: `${cell.bboxPct.w}%`,
+                height: `${cell.bboxPct.h}%`,
+              }}
+            />
+          ))}
+
+        {/* Editable text fields at bbox positions */}
+        {cells.map((cell) => {
+          const displayText = getDisplayText(cell)
+          const edited = isEdited(cell)
+
+          return (
+            <div key={cell.cellId} className="absolute group" style={{
+              left: `${cell.bboxPct.x}%`,
+              top: `${cell.bboxPct.y}%`,
+              width: `${cell.bboxPct.w}%`,
+              height: `${cell.bboxPct.h}%`,
+            }}>
+              <input
+                id={`cell-${cell.cellId}`}
+                type="text"
+                value={displayText}
+                onChange={(e) => onTextChange(cell.cellId, e.target.value)}
+                onKeyDown={(e) => onKeyDown(e, cell.cellId)}
+                className={`w-full h-full bg-transparent text-black dark:text-white border px-0.5 outline-none transition-colors ${
+                  colTypeColor(cell.colType)
+                } ${edited ? 'border-green-500 bg-green-50/30 dark:bg-green-900/20' : ''}`}
+                style={{
+                  fontSize: `${getFontSize(cell.bboxPct.h)}px`,
+                  lineHeight: '1',
+                }}
+                title={`${cell.cellId} (${cell.colType})`}
+              />
+              {/* Per-cell reset button (X) — only shown for edited cells on hover */}
+              {edited && (
+                <button
+                  onClick={() => onResetCell(cell.cellId)}
+                  className="absolute -top-1 -right-1 w-4 h-4 bg-red-500 text-white rounded-full text-[9px] leading-none opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
+                  title="Zuruecksetzen"
+                >
+                  &times;
+                </button>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/components/ocr-pipeline/ReconstructionToolbar.tsx b/admin-lehrer/components/ocr-pipeline/ReconstructionToolbar.tsx
new file mode 100644
index 0000000..bc6024e
--- /dev/null
+++ b/admin-lehrer/components/ocr-pipeline/ReconstructionToolbar.tsx
@@ -0,0 +1,248 @@
+'use client'
+
+import type { EditorMode, ReconstructionStatus } from './StepReconstructionTypes'
+
+interface ReconstructionToolbarProps {
+  editorMode: EditorMode
+  setEditorMode: (mode: EditorMode) => void
+  isParentWithBoxes: boolean
+  cellCount: number
+  changedCount: number
+  emptyCellCount: number
+  showEmptyHighlight: boolean
+  setShowEmptyHighlight: (v: boolean) => void
+  showStructure: boolean
+  setShowStructure: (v: boolean) => void
+  hasStructureElements: boolean
+  zoom: number
+  setZoom: (fn: (z: number) => number) => void
+  undoCount: number
+  redoCount: number
+  onUndo: () => void
+  onRedo: () => void
+  status: ReconstructionStatus
+  onSave: () => void
+  // Overlay-specific
+  fontScale: number
+  setFontScale: (v: number) => void
+  globalBold: boolean
+  setGlobalBold: (fn: (b: boolean) => boolean) => void
+  imageRotation: 0 | 180
+  setImageRotation: (fn: (r: 0 | 180) => 0 | 180) => void
+}
+
+export function ReconstructionToolbar({
+  editorMode,
+  setEditorMode,
+  isParentWithBoxes,
+  cellCount,
+  changedCount,
+  emptyCellCount,
+  showEmptyHighlight,
+  setShowEmptyHighlight,
+  showStructure,
+  setShowStructure,
+  hasStructureElements,
+  zoom,
+  setZoom,
+  undoCount,
+  redoCount,
+  onUndo,
+  onRedo,
+  status,
+  onSave,
+  fontScale,
+  setFontScale,
+  globalBold,
+  setGlobalBold,
+  imageRotation,
+  setImageRotation,
+}: ReconstructionToolbarProps) {
+  return (
+    <div className="flex items-center justify-between bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 px-3 py-2">
+      <div className="flex items-center gap-2">
+        <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">
+          Schritt 7: Rekonstruktion
+        </h3>
+        {/* Mode toggle */}
+        <div className="flex items-center ml-2 border border-gray-300 dark:border-gray-600 rounded overflow-hidden text-xs">
+          <button
+            onClick={() => setEditorMode('simple')}
+            className={`px-2 py-0.5 transition-colors ${
+              editorMode === 'simple'
+                ? 'bg-teal-600 text-white'
+                : 'hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400'
+            }`}
+          >
+            Einfach
+          </button>
+          {isParentWithBoxes && (
+            <button
+              onClick={() => setEditorMode('overlay')}
+              className={`px-2 py-0.5 transition-colors ${
+                editorMode === 'overlay'
+                  ? 'bg-teal-600 text-white'
+                  : 'hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400'
+              }`}
+            >
+              Overlay
+            </button>
+          )}
+          <button
+            onClick={() => setEditorMode('editor')}
+            className={`px-2 py-0.5 transition-colors ${
+              editorMode === 'editor'
+                ? 'bg-teal-600 text-white'
+                : 'hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400'
+            }`}
+          >
+            Editor
+          </button>
+        </div>
+        <span className="text-xs text-gray-400">
+          {cellCount} Zellen &middot; {changedCount} geaendert
+          {emptyCellCount > 0 && showEmptyHighlight && (
+            <span className="text-red-400 ml-1">&middot; {emptyCellCount} leer</span>
+          )}
+        </span>
+      </div>
+      <div className="flex items-center gap-2">
+        {/* Undo/Redo */}
+        <button
+          onClick={onUndo}
+          disabled={undoCount === 0}
+          className="px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-30"
+          title="Rueckgaengig (Ctrl+Z)"
+        >
+          &#x21A9;
+        </button>
+        <button
+          onClick={onRedo}
+          disabled={redoCount === 0}
+          className="px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-30"
+          title="Wiederholen (Ctrl+Shift+Z)"
+        >
+          &#x21AA;
+        </button>
+
+        <div className="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1" />
+
+        {/* Overlay-specific toolbar */}
+        {editorMode === 'overlay' && (
+          <>
+            <label className="flex items-center gap-1 text-xs text-gray-600 dark:text-gray-400">
+              Schrift
+              <input
+                type="range" min={30} max={120} value={Math.round(fontScale * 100)}
+                onChange={e => setFontScale(Number(e.target.value) / 100)}
+                className="w-20 h-1 accent-teal-600"
+              />
+              <span className="w-8 text-right font-mono">{Math.round(fontScale * 100)}%</span>
+            </label>
+            <button
+              onClick={() => setGlobalBold(b => !b)}
+              className={`px-2 py-1 text-xs rounded border transition-colors font-bold ${
+                globalBold
+                  ? 'bg-teal-600 text-white border-teal-600'
+                  : 'bg-white dark:bg-gray-700 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600'
+              }`}
+            >
+              B
+            </button>
+            <button
+              onClick={() => setImageRotation(r => r === 0 ? 180 : 0)}
+              className={`px-2 py-1 text-xs rounded border transition-colors ${
+                imageRotation === 180
+                  ? 'bg-teal-600 text-white border-teal-600'
+                  : 'bg-white dark:bg-gray-700 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600'
+              }`}
+              title="Bild 180 Grad drehen"
+            >
+              180&deg;
+            </button>
+            {hasStructureElements && (
+              <button
+                onClick={() => setShowStructure(!showStructure)}
+                className={`px-2 py-1 text-xs border rounded transition-colors ${
+                  showStructure
+                    ? 'border-violet-300 bg-violet-50 text-violet-600 dark:border-violet-700 dark:bg-violet-900/30 dark:text-violet-400'
+                    : 'border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
+                }`}
+                title="Strukturelemente anzeigen"
+              >
+                Struktur
+              </button>
+            )}
+            <div className="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1" />
+          </>
+        )}
+
+        {/* Non-overlay controls */}
+        {editorMode !== 'overlay' && (
+          <>
+            {/* Empty field toggle */}
+            <button
+              onClick={() => setShowEmptyHighlight(!showEmptyHighlight)}
+              className={`px-2 py-1 text-xs border rounded transition-colors ${
+                showEmptyHighlight
+                  ? 'border-red-300 bg-red-50 text-red-600 dark:border-red-700 dark:bg-red-900/30 dark:text-red-400'
+                  : 'border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
+              }`}
+              title="Leere Pflichtfelder markieren"
+            >
+              Leer
+            </button>
+
+            {/* Structure toggle */}
+            {hasStructureElements && (
+              <button
+                onClick={() => setShowStructure(!showStructure)}
+                className={`px-2 py-1 text-xs border rounded transition-colors ${
+                  showStructure
+                    ? 'border-violet-300 bg-violet-50 text-violet-600 dark:border-violet-700 dark:bg-violet-900/30 dark:text-violet-400'
+                    : 'border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
+                }`}
+                title="Strukturelemente anzeigen"
+              >
+                Struktur
+              </button>
+            )}
+
+            <div className="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1" />
+
+            {/* Zoom controls */}
+            <button
+              onClick={() => setZoom(z => Math.max(50, z - 25))}
+              className="px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700"
+            >
+              &minus;
+            </button>
+            <span className="text-xs text-gray-500 w-10 text-center">{zoom}%</span>
+            <button
+              onClick={() => setZoom(z => Math.min(200, z + 25))}
+              className="px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700"
+            >
+              +
+            </button>
+            <button
+              onClick={() => setZoom(() => 100)}
+              className="px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700"
+            >
+              Fit
+            </button>
+
+            <div className="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1" />
+          </>
+        )}
+
+        <button
+          onClick={onSave}
+          disabled={status === 'saving'}
+          className="px-4 py-1.5 text-xs bg-teal-600 text-white rounded-lg hover:bg-teal-700 disabled:opacity-50 transition-colors font-medium"
+        >
+          {status === 'saving' ? 'Speichert...' : 'Speichern'}
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/components/ocr-pipeline/StepGroundTruth.tsx b/admin-lehrer/components/ocr-pipeline/StepGroundTruth.tsx
index 370a24e..7419009 100644
--- a/admin-lehrer/components/ocr-pipeline/StepGroundTruth.tsx
+++ b/admin-lehrer/components/ocr-pipeline/StepGroundTruth.tsx
@@ -1,278 +1,21 @@
 'use client'
 
-import { useCallback, useEffect, useRef, useState } from 'react'
-import type {
-  GridCell, ColumnMeta, ImageRegion, ImageStyle,
-} from '@/app/(admin)/ai/ocr-kombi/types'
-import { IMAGE_STYLES as STYLES } from '@/app/(admin)/ai/ocr-kombi/types'
-
-const KLAUSUR_API = '/klausur-api'
-
-const COL_TYPE_COLORS: Record<string, string> = {
-  column_en: '#3b82f6',
-  column_de: '#22c55e',
-  column_example: '#f97316',
-  column_text: '#a855f7',
-  page_ref: '#06b6d4',
-  column_marker: '#6b7280',
-}
-
-interface StepGroundTruthProps {
-  sessionId: string | null
-  onNext: () => void
-}
-
-interface SessionData {
-  cells: GridCell[]
-  columnsUsed: ColumnMeta[]
-  imageWidth: number
-  imageHeight: number
-  originalImageUrl: string
-}
+import type { StepGroundTruthProps, ImageRegionWithState } from './ground-truth-types'
+import { useGroundTruthSession } from './useGroundTruthSession'
+import { ReconstructionPanel } from './ReconstructionPanel'
+import { ImageRegionsPanel } from './ImageRegionsPanel'
+import { ValidationPanel } from './ValidationPanel'
 
 export function StepGroundTruth({ sessionId, onNext }: StepGroundTruthProps) {
-  const [status, setStatus] = useState<'loading' | 'ready' | 'saving' | 'saved' | 'error'>('loading')
-  const [error, setError] = useState('')
-  const [session, setSession] = useState<SessionData | null>(null)
-  const [imageRegions, setImageRegions] = useState<(ImageRegion & { generating?: boolean })[]>([])
-  const [detecting, setDetecting] = useState(false)
-  const [zoom, setZoom] = useState(100)
-  const [syncScroll, setSyncScroll] = useState(true)
-  const [notes, setNotes] = useState('')
-  const [score, setScore] = useState<number | null>(null)
-  const [drawingRegion, setDrawingRegion] = useState(false)
-  const [dragStart, setDragStart] = useState<{ x: number; y: number } | null>(null)
-  const [dragEnd, setDragEnd] = useState<{ x: number; y: number } | null>(null)
-  const [isGroundTruth, setIsGroundTruth] = useState(false)
-  const [gtSaving, setGtSaving] = useState(false)
-  const [gtMessage, setGtMessage] = useState('')
+  const s = useGroundTruthSession(sessionId)
 
-  const leftPanelRef = useRef<HTMLDivElement>(null)
-  const rightPanelRef = useRef<HTMLDivElement>(null)
-  const reconRef = useRef<HTMLDivElement>(null)
-  const [reconWidth, setReconWidth] = useState(0)
-
-  // Track reconstruction container width for font size calculation
-  useEffect(() => {
-    const el = reconRef.current
-    if (!el) return
-    const obs = new ResizeObserver(entries => {
-      for (const entry of entries) setReconWidth(entry.contentRect.width)
-    })
-    obs.observe(el)
-    return () => obs.disconnect()
-  }, [session])
-
-  // Load session data
-  useEffect(() => {
-    if (!sessionId) return
-    loadSessionData()
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sessionId])
-
-  const loadSessionData = async () => {
-    if (!sessionId) return
-    setStatus('loading')
-    try {
-      const resp = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}`)
-      if (!resp.ok) throw new Error(`Failed to load session: ${resp.status}`)
-      const data = await resp.json()
-
-      const wordResult = data.word_result || {}
-      setSession({
-        cells: wordResult.cells || [],
-        columnsUsed: wordResult.columns_used || [],
-        imageWidth: wordResult.image_width || data.image_width || 800,
-        imageHeight: wordResult.image_height || data.image_height || 600,
-        originalImageUrl: data.original_image_url
-          ? `${KLAUSUR_API}${data.original_image_url}`
-          : `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/original`,
-      })
-
-      // Check if session has ground truth reference
-      const gt = data.ground_truth
-      setIsGroundTruth(!!gt?.build_grid_reference)
-
-      // Load existing validation data
-      const valResp = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/reconstruction/validation`)
-      if (valResp.ok) {
-        const valData = await valResp.json()
-        const validation = valData.validation
-        if (validation) {
-          setImageRegions(validation.image_regions || [])
-          setNotes(validation.notes || '')
-          setScore(validation.score ?? null)
-        }
-      }
-
-      setStatus('ready')
-    } catch (e) {
-      setError(e instanceof Error ? e.message : String(e))
-      setStatus('error')
-    }
+  const handleUpdateRegion = (index: number, update: Partial<ImageRegionWithState>) => {
+    s.setImageRegions(prev => prev.map((r, j) =>
+      j === index ? { ...r, ...update } : r
+    ))
   }
 
-  // Sync scroll between panels
-  const handleScroll = useCallback((source: 'left' | 'right') => {
-    if (!syncScroll) return
-    const from = source === 'left' ? leftPanelRef.current : rightPanelRef.current
-    const to = source === 'left' ? rightPanelRef.current : leftPanelRef.current
-    if (from && to) {
-      to.scrollTop = from.scrollTop
-      to.scrollLeft = from.scrollLeft
-    }
-  }, [syncScroll])
-
-  // Detect images via VLM
-  const handleDetectImages = async () => {
-    if (!sessionId) return
-    setDetecting(true)
-    try {
-      const resp = await fetch(
-        `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/reconstruction/detect-images`,
-        { method: 'POST' }
-      )
-      if (!resp.ok) throw new Error(`Detection failed: ${resp.status}`)
-      const data = await resp.json()
-      setImageRegions(data.regions || [])
-    } catch (e) {
-      setError(e instanceof Error ? e.message : String(e))
-    } finally {
-      setDetecting(false)
-    }
-  }
-
-  // Generate image for a region
-  const handleGenerateImage = async (index: number) => {
-    if (!sessionId) return
-    const region = imageRegions[index]
-    if (!region) return
-
-    setImageRegions(prev => prev.map((r, i) => i === index ? { ...r, generating: true } : r))
-
-    try {
-      const resp = await fetch(
-        `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/reconstruction/generate-image`,
-        {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            region_index: index,
-            prompt: region.prompt,
-            style: region.style,
-          }),
-        }
-      )
-      if (!resp.ok) throw new Error(`Generation failed: ${resp.status}`)
-      const data = await resp.json()
-
-      setImageRegions(prev => prev.map((r, i) =>
-        i === index ? { ...r, image_b64: data.image_b64, generating: false } : r
-      ))
-    } catch (e) {
-      setImageRegions(prev => prev.map((r, i) => i === index ? { ...r, generating: false } : r))
-      setError(e instanceof Error ? e.message : String(e))
-    }
-  }
-
-  // Save validation
-  const handleSave = async () => {
-    if (!sessionId) {
-      setError('Keine Session-ID vorhanden')
-      return
-    }
-    setStatus('saving')
-    setError('')
-    try {
-      const resp = await fetch(
-        `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/reconstruction/validate`,
-        {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ notes, score: score ?? 0 }),
-        }
-      )
-      if (!resp.ok) {
-        const body = await resp.text().catch(() => '')
-        throw new Error(`Speichern fehlgeschlagen (${resp.status}): ${body}`)
-      }
-      setStatus('saved')
-    } catch (e) {
-      setError(e instanceof Error ? e.message : String(e))
-      setStatus('ready')
-    }
-  }
-
-  // Mark/update ground truth reference
-  const handleMarkGroundTruth = async () => {
-    if (!sessionId) return
-    setGtSaving(true)
-    setGtMessage('')
-    try {
-      const resp = await fetch(
-        `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/mark-ground-truth?pipeline=ocr-pipeline`,
-        { method: 'POST' }
-      )
-      if (!resp.ok) {
-        const body = await resp.text().catch(() => '')
-        throw new Error(`Ground Truth fehlgeschlagen (${resp.status}): ${body}`)
-      }
-      const data = await resp.json()
-      setIsGroundTruth(true)
-      setGtMessage(`Ground Truth gespeichert (${data.cells_saved} Zellen)`)
-      setTimeout(() => setGtMessage(''), 5000)
-    } catch (e) {
-      setGtMessage(e instanceof Error ? e.message : String(e))
-    } finally {
-      setGtSaving(false)
-    }
-  }
-
-  // Handle manual region drawing on reconstruction
-  const handleReconMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (!drawingRegion) return
-    const rect = e.currentTarget.getBoundingClientRect()
-    const x = ((e.clientX - rect.left) / rect.width) * 100
-    const y = ((e.clientY - rect.top) / rect.height) * 100
-    setDragStart({ x, y })
-    setDragEnd({ x, y })
-  }
-
-  const handleReconMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (!dragStart) return
-    const rect = e.currentTarget.getBoundingClientRect()
-    const x = ((e.clientX - rect.left) / rect.width) * 100
-    const y = ((e.clientY - rect.top) / rect.height) * 100
-    setDragEnd({ x, y })
-  }
-
-  const handleReconMouseUp = () => {
-    if (!dragStart || !dragEnd) return
-    const x = Math.min(dragStart.x, dragEnd.x)
-    const y = Math.min(dragStart.y, dragEnd.y)
-    const w = Math.abs(dragEnd.x - dragStart.x)
-    const h = Math.abs(dragEnd.y - dragStart.y)
-
-    if (w > 2 && h > 2) {
-      setImageRegions(prev => [...prev, {
-        bbox_pct: { x, y, w, h },
-        prompt: '',
-        description: 'Manually selected region',
-        image_b64: null,
-        style: 'educational' as ImageStyle,
-      }])
-    }
-
-    setDragStart(null)
-    setDragEnd(null)
-    setDrawingRegion(false)
-  }
-
-  const handleRemoveRegion = (index: number) => {
-    setImageRegions(prev => prev.filter((_, i) => i !== index))
-  }
-
-  if (status === 'loading') {
+  if (s.status === 'loading') {
     return (
       <div className="flex items-center justify-center py-16">
         <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-teal-500 mr-3" />
@@ -281,20 +24,20 @@ export function StepGroundTruth({ sessionId, onNext }: StepGroundTruthProps) {
     )
   }
 
-  if (status === 'error' && !session) {
+  if (s.status === 'error' && !s.session) {
     return (
       <div className="text-center py-16">
-        <p className="text-red-500">{error}</p>
-        <button onClick={loadSessionData} className="mt-4 px-4 py-2 bg-teal-600 text-white rounded hover:bg-teal-700">
+        <p className="text-red-500">{s.error}</p>
+        <button onClick={s.loadSessionData} className="mt-4 px-4 py-2 bg-teal-600 text-white rounded hover:bg-teal-700">
           Erneut laden
         </button>
       </div>
     )
   }
 
-  if (!session) return null
+  if (!s.session) return null
 
-  const aspect = session.imageHeight / session.imageWidth
+  const aspect = s.session.imageHeight / s.session.imageWidth
 
   return (
     <div className="space-y-4">
@@ -305,33 +48,33 @@ export function StepGroundTruth({ sessionId, onNext }: StepGroundTruthProps) {
         </h3>
         <div className="flex items-center gap-3">
           <button
-            onClick={handleDetectImages}
-            disabled={detecting}
+            onClick={s.handleDetectImages}
+            disabled={s.detecting}
             className="px-3 py-1.5 text-sm bg-indigo-600 text-white rounded hover:bg-indigo-700 disabled:opacity-50"
           >
-            {detecting ? 'Erkennung laeuft...' : 'Bilder erkennen'}
+            {s.detecting ? 'Erkennung laeuft...' : 'Bilder erkennen'}
           </button>
           <label className="flex items-center gap-1.5 text-sm text-gray-600 dark:text-gray-400">
             <input
               type="checkbox"
-              checked={syncScroll}
-              onChange={e => setSyncScroll(e.target.checked)}
+              checked={s.syncScroll}
+              onChange={e => s.setSyncScroll(e.target.checked)}
               className="rounded"
             />
             Sync Scroll
           </label>
           <div className="flex items-center gap-1.5">
-            <button onClick={() => setZoom(z => Math.max(50, z - 25))} className="px-2 py-1 text-sm border rounded dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">-</button>
-            <span className="text-sm text-gray-600 dark:text-gray-400 w-12 text-center">{zoom}%</span>
-            <button onClick={() => setZoom(z => Math.min(200, z + 25))} className="px-2 py-1 text-sm border rounded dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">+</button>
+            <button onClick={() => s.setZoom(z => Math.max(50, z - 25))} className="px-2 py-1 text-sm border rounded dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">-</button>
+            <span className="text-sm text-gray-600 dark:text-gray-400 w-12 text-center">{s.zoom}%</span>
+            <button onClick={() => s.setZoom(z => Math.min(200, z + 25))} className="px-2 py-1 text-sm border rounded dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">+</button>
           </div>
         </div>
       </div>
 
-      {error && (
+      {s.error && (
         <div className="p-2 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 text-sm rounded">
-          {error}
-          <button onClick={() => setError('')} className="ml-2 underline">Schliessen</button>
+          {s.error}
+          <button onClick={() => s.setError('')} className="ml-2 underline">Schliessen</button>
         </div>
       )}
 
@@ -343,13 +86,13 @@ export function StepGroundTruth({ sessionId, onNext }: StepGroundTruthProps) {
             Original
           </div>
           <div
-            ref={leftPanelRef}
+            ref={s.leftPanelRef}
             className="flex-1 overflow-auto"
-            onScroll={() => handleScroll('left')}
+            onScroll={() => s.handleScroll('left')}
           >
-            <div style={{ width: `${zoom}%`, minWidth: '100%' }}>
+            <div style={{ width: `${s.zoom}%`, minWidth: '100%' }}>
               <img
-                src={session.originalImageUrl}
+                src={s.session.originalImageUrl}
                 alt="Original"
                 className="w-full h-auto"
                 draggable={false}
@@ -359,282 +102,47 @@ export function StepGroundTruth({ sessionId, onNext }: StepGroundTruthProps) {
         </div>
 
         {/* Right: Reconstruction */}
-        <div className="border rounded-lg dark:border-gray-700 overflow-hidden flex flex-col">
-          <div className="px-3 py-1.5 bg-gray-50 dark:bg-gray-800 text-sm font-medium text-gray-600 dark:text-gray-400 border-b dark:border-gray-700 flex items-center justify-between">
-            <span>Rekonstruktion</span>
-            <button
-              onClick={() => setDrawingRegion(!drawingRegion)}
-              className={`text-xs px-2 py-0.5 rounded ${drawingRegion ? 'bg-indigo-600 text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400'}`}
-            >
-              {drawingRegion ? 'Region zeichnen...' : '+ Region'}
-            </button>
-          </div>
-          <div
-            ref={rightPanelRef}
-            className="flex-1 overflow-auto"
-            onScroll={() => handleScroll('right')}
-          >
-            <div style={{ width: `${zoom}%`, minWidth: '100%' }}>
-              {/* Reconstruction container */}
-              <div
-                ref={reconRef}
-                className="relative bg-white"
-                style={{
-                  paddingBottom: `${aspect * 100}%`,
-                  cursor: drawingRegion ? 'crosshair' : 'default',
-                }}
-                onMouseDown={handleReconMouseDown}
-                onMouseMove={handleReconMouseMove}
-                onMouseUp={handleReconMouseUp}
-              >
-                {/* Row separator lines — derive from cells */}
-                {(() => {
-                  const rowYs = new Set<number>()
-                  for (const cell of session.cells) {
-                    if (cell.col_index === 0 && cell.bbox_pct) {
-                      rowYs.add(cell.bbox_pct.y)
-                    }
-                  }
-                  return Array.from(rowYs).map((y, i) => (
-                    <div
-                      key={`row-${i}`}
-                      className="absolute left-0 right-0"
-                      style={{
-                        top: `${y}%`,
-                        height: '1px',
-                        backgroundColor: 'rgba(0,0,0,0.06)',
-                      }}
-                    />
-                  ))
-                })()}
-
-                {/* Cell texts — black on white, font size derived from cell height */}
-                {session.cells.map(cell => {
-                  if (!cell.bbox_pct || !cell.text) return null
-                  // Container height in px = reconWidth * aspect
-                  // Cell height in px = containerHeightPx * (bbox_pct.h / 100)
-                  // Font size ≈ 70% of cell height
-                  const containerH = reconWidth * aspect
-                  const cellHeightPx = containerH * (cell.bbox_pct.h / 100)
-                  const fontSize = Math.max(6, cellHeightPx * 0.7)
-                  return (
-                    <span
-                      key={cell.cell_id}
-                      className="absolute leading-none overflow-hidden whitespace-nowrap"
-                      style={{
-                        left: `${cell.bbox_pct.x}%`,
-                        top: `${cell.bbox_pct.y}%`,
-                        width: `${cell.bbox_pct.w}%`,
-                        height: `${cell.bbox_pct.h}%`,
-                        color: '#1a1a1a',
-                        fontSize: `${fontSize}px`,
-                        fontWeight: cell.is_bold ? 'bold' : 'normal',
-                        fontFamily: "'Liberation Sans', 'DejaVu Sans', Arial, sans-serif",
-                        display: 'flex',
-                        alignItems: 'center',
-                        padding: '0 1px',
-                      }}
-                      title={`${cell.cell_id}: ${cell.text}`}
-                    >
-                      {cell.text}
-                    </span>
-                  )
-                })}
-
-                {/* Generated images at region positions */}
-                {imageRegions.map((region, i) => (
-                  <div
-                    key={`region-${i}`}
-                    className="absolute border-2 border-dashed border-indigo-400"
-                    style={{
-                      left: `${region.bbox_pct.x}%`,
-                      top: `${region.bbox_pct.y}%`,
-                      width: `${region.bbox_pct.w}%`,
-                      height: `${region.bbox_pct.h}%`,
-                    }}
-                  >
-                    {region.image_b64 ? (
-                      <img src={region.image_b64} alt={region.description} className="w-full h-full object-cover" />
-                    ) : (
-                      <div className="w-full h-full flex items-center justify-center bg-indigo-50/50 text-indigo-400 text-[0.5em]">
-                        {region.generating ? '...' : `Bild ${i + 1}`}
-                      </div>
-                    )}
-                  </div>
-                ))}
-
-                {/* Drawing rectangle */}
-                {dragStart && dragEnd && (
-                  <div
-                    className="absolute border-2 border-dashed border-red-500 bg-red-100/20 pointer-events-none"
-                    style={{
-                      left: `${Math.min(dragStart.x, dragEnd.x)}%`,
-                      top: `${Math.min(dragStart.y, dragEnd.y)}%`,
-                      width: `${Math.abs(dragEnd.x - dragStart.x)}%`,
-                      height: `${Math.abs(dragEnd.y - dragStart.y)}%`,
-                    }}
-                  />
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
+        <ReconstructionPanel
+          cells={s.session.cells}
+          aspect={aspect}
+          zoom={s.zoom}
+          reconWidth={s.reconWidth}
+          imageRegions={s.imageRegions}
+          drawingRegion={s.drawingRegion}
+          dragStart={s.dragStart}
+          dragEnd={s.dragEnd}
+          panelRef={s.rightPanelRef}
+          reconRef={s.reconRef}
+          onScroll={() => s.handleScroll('right')}
+          onToggleDrawing={() => s.setDrawingRegion(!s.drawingRegion)}
+          onMouseDown={s.handleReconMouseDown}
+          onMouseMove={s.handleReconMouseMove}
+          onMouseUp={s.handleReconMouseUp}
+        />
       </div>
 
-      {/* Image regions panel */}
-      {imageRegions.length > 0 && (
-        <div className="border rounded-lg dark:border-gray-700 p-4">
-          <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
-            Bildbereiche ({imageRegions.length} gefunden)
-          </h4>
-          <div className="space-y-3">
-            {imageRegions.map((region, i) => (
-              <div key={i} className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
-                {/* Preview thumbnail */}
-                <div className="w-16 h-16 flex-shrink-0 border rounded dark:border-gray-600 overflow-hidden bg-white">
-                  {region.image_b64 ? (
-                    <img src={region.image_b64} alt="" className="w-full h-full object-cover" />
-                  ) : (
-                    <div className="w-full h-full flex items-center justify-center text-gray-400 text-xs">
-                      {Math.round(region.bbox_pct.w)}x{Math.round(region.bbox_pct.h)}%
-                    </div>
-                  )}
-                </div>
+      {/* Image regions editor */}
+      <ImageRegionsPanel
+        imageRegions={s.imageRegions}
+        onUpdateRegion={handleUpdateRegion}
+        onGenerateImage={s.handleGenerateImage}
+        onRemoveRegion={s.handleRemoveRegion}
+      />
 
-                {/* Prompt + controls */}
-                <div className="flex-1 min-w-0 space-y-2">
-                  <div className="flex items-center gap-2">
-                    <span className="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">
-                      Bereich {i + 1}:
-                    </span>
-                    <input
-                      type="text"
-                      value={region.prompt}
-                      onChange={e => {
-                        setImageRegions(prev => prev.map((r, j) =>
-                          j === i ? { ...r, prompt: e.target.value } : r
-                        ))
-                      }}
-                      placeholder="Beschreibung / Prompt..."
-                      className="flex-1 text-sm px-2 py-1 border rounded dark:border-gray-600 dark:bg-gray-700 dark:text-white"
-                    />
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <select
-                      value={region.style}
-                      onChange={e => {
-                        setImageRegions(prev => prev.map((r, j) =>
-                          j === i ? { ...r, style: e.target.value as ImageStyle } : r
-                        ))
-                      }}
-                      className="text-sm px-2 py-1 border rounded dark:border-gray-600 dark:bg-gray-700 dark:text-white"
-                    >
-                      {STYLES.map(s => (
-                        <option key={s.value} value={s.value}>{s.label}</option>
-                      ))}
-                    </select>
-                    <button
-                      onClick={() => handleGenerateImage(i)}
-                      disabled={!!region.generating || !region.prompt}
-                      className="px-3 py-1 text-sm bg-teal-600 text-white rounded hover:bg-teal-700 disabled:opacity-50"
-                    >
-                      {region.generating ? 'Generiere...' : 'Generieren'}
-                    </button>
-                    <button
-                      onClick={() => handleRemoveRegion(i)}
-                      className="px-2 py-1 text-sm text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded"
-                    >
-                      Entfernen
-                    </button>
-                  </div>
-                  {region.description && region.description !== region.prompt && (
-                    <p className="text-xs text-gray-400">{region.description}</p>
-                  )}
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Notes and score */}
-      <div className="border rounded-lg dark:border-gray-700 p-4 space-y-3">
-        <div className="flex items-center gap-4">
-          <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
-            Bewertung (1-10):
-          </label>
-          <input
-            type="number"
-            min={1}
-            max={10}
-            value={score ?? ''}
-            onChange={e => setScore(e.target.value ? parseInt(e.target.value) : null)}
-            className="w-20 text-sm px-2 py-1 border rounded dark:border-gray-600 dark:bg-gray-700 dark:text-white"
-          />
-          <div className="flex gap-1">
-            {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(v => (
-              <button
-                key={v}
-                onClick={() => setScore(v)}
-                className={`w-7 h-7 text-xs rounded ${score === v ? 'bg-teal-600 text-white' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'}`}
-              >
-                {v}
-              </button>
-            ))}
-          </div>
-        </div>
-        <div>
-          <label className="text-sm font-medium text-gray-700 dark:text-gray-300 block mb-1">
-            Notizen:
-          </label>
-          <textarea
-            value={notes}
-            onChange={e => setNotes(e.target.value)}
-            rows={3}
-            placeholder="Anmerkungen zur Qualitaet der Rekonstruktion..."
-            className="w-full text-sm px-3 py-2 border rounded dark:border-gray-600 dark:bg-gray-700 dark:text-white"
-          />
-        </div>
-      </div>
-
-      {/* Actions — sticky bottom bar */}
-      <div className="sticky bottom-0 bg-white dark:bg-gray-900 border-t dark:border-gray-700 py-3 px-1 -mx-1 flex items-center justify-between">
-        <div className="text-sm text-gray-500 dark:text-gray-400">
-          {status === 'saved' && <span className="text-green-600 dark:text-green-400">Validierung gespeichert</span>}
-          {status === 'saving' && <span>Speichere...</span>}
-          {gtMessage && (
-            <span className={gtMessage.includes('fehlgeschlagen') ? 'text-red-500' : 'text-amber-600 dark:text-amber-400'}>
-              {gtMessage}
-            </span>
-          )}
-        </div>
-        <div className="flex items-center gap-3">
-          <button
-            onClick={handleMarkGroundTruth}
-            disabled={gtSaving || status === 'saving'}
-            className="px-4 py-2 text-sm bg-amber-600 text-white rounded hover:bg-amber-700 disabled:opacity-50"
-          >
-            {gtSaving ? 'Speichere...' : isGroundTruth ? 'Ground Truth aktualisieren' : 'Als Ground Truth markieren'}
-          </button>
-          <button
-            onClick={handleSave}
-            disabled={status === 'saving'}
-            className="px-4 py-2 text-sm bg-gray-600 text-white rounded hover:bg-gray-700 disabled:opacity-50"
-          >
-            Speichern
-          </button>
-          <button
-            onClick={async () => {
-              await handleSave()
-              onNext()
-            }}
-            disabled={status === 'saving'}
-            className="px-4 py-2 text-sm bg-teal-600 text-white rounded hover:bg-teal-700 disabled:opacity-50"
-          >
-            Abschliessen
-          </button>
-        </div>
-      </div>
+      {/* Notes, score, and action bar */}
+      <ValidationPanel
+        notes={s.notes}
+        score={s.score}
+        status={s.status}
+        isGroundTruth={s.isGroundTruth}
+        gtSaving={s.gtSaving}
+        gtMessage={s.gtMessage}
+        onNotesChange={s.setNotes}
+        onScoreChange={s.setScore}
+        onSave={s.handleSave}
+        onMarkGroundTruth={s.handleMarkGroundTruth}
+        onFinish={onNext}
+      />
     </div>
   )
 }
diff --git a/admin-lehrer/components/ocr-pipeline/StepLlmReview.tsx b/admin-lehrer/components/ocr-pipeline/StepLlmReview.tsx
index 294fc26..4fb528b 100644
--- a/admin-lehrer/components/ocr-pipeline/StepLlmReview.tsx
+++ b/admin-lehrer/components/ocr-pipeline/StepLlmReview.tsx
@@ -1,66 +1,14 @@
 'use client'
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import type { GridCell, GridResult, WordEntry, ColumnMeta } from '@/app/(admin)/ai/ocr-kombi/types'
 import { usePixelWordPositions } from './usePixelWordPositions'
-
-const KLAUSUR_API = '/klausur-api'
-
-interface LlmChange {
-  row_index: number
-  field: 'english' | 'german' | 'example'
-  old: string
-  new: string
-}
-
-interface StepLlmReviewProps {
-  sessionId: string | null
-  onNext: () => void
-}
-
-interface ReviewMeta {
-  total_entries: number
-  to_review: number
-  skipped: number
-  model: string
-  skipped_indices?: number[]
-}
-
-interface StreamProgress {
-  current: number
-  total: number
-}
-
-const FIELD_LABELS: Record<string, string> = {
-  english: 'EN',
-  german: 'DE',
-  example: 'Beispiel',
-  source_page: 'Seite',
-  marker: 'Marker',
-  text: 'Text',
-}
-
-/** Map column type to WordEntry field name */
-const COL_TYPE_TO_FIELD: Record<string, string> = {
-  column_en: 'english',
-  column_de: 'german',
-  column_example: 'example',
-  page_ref: 'source_page',
-  column_marker: 'marker',
-  column_text: 'text',
-}
-
-/** Column type → color class */
-const COL_TYPE_COLOR: Record<string, string> = {
-  column_en: 'text-blue-600 dark:text-blue-400',
-  column_de: 'text-green-600 dark:text-green-400',
-  column_example: 'text-orange-600 dark:text-orange-400',
-  page_ref: 'text-cyan-600 dark:text-cyan-400',
-  column_marker: 'text-gray-500 dark:text-gray-400',
-  column_text: 'text-gray-700 dark:text-gray-300',
-}
-
-type RowStatus = 'pending' | 'active' | 'reviewed' | 'corrected' | 'skipped'
+import type { LlmChange, StepLlmReviewProps, ReviewMeta, StreamProgress, RowStatus } from './llm-review-types'
+import { COL_TYPE_TO_FIELD, KLAUSUR_API } from './llm-review-types'
+import { LoadingScreen, ErrorScreen, AppliedScreen, NoSessionScreen } from './LlmReviewStatusScreens'
+import { LlmReviewVocabTable } from './LlmReviewVocabTable'
+import { LlmReviewOverlay } from './LlmReviewOverlay'
+import { LlmReviewCorrections } from './LlmReviewCorrections'
 
 export function StepLlmReview({ sessionId, onNext }: StepLlmReviewProps) {
   // Core state
@@ -90,8 +38,6 @@ export function StepLlmReview({ sessionId, onNext }: StepLlmReviewProps) {
   const [leftPaddingPct, setLeftPaddingPct] = useState(0)
   const [globalBold, setGlobalBold] = useState(false)
   const [cells, setCells] = useState<GridCell[]>([])
-  const reconRef = useRef<HTMLDivElement>(null)
-  const [reconWidth, setReconWidth] = useState(0)
 
   // Pixel-analysed word positions via shared hook
   const overlayImageUrl = sessionId
@@ -102,17 +48,6 @@ export function StepLlmReview({ sessionId, onNext }: StepLlmReviewProps) {
   const tableRef = useRef<HTMLDivElement>(null)
   const activeRowRef = useRef<HTMLTableRowElement>(null)
 
-  // Track reconstruction container width for font size calculation
-  useEffect(() => {
-    const el = reconRef.current
-    if (!el) return
-    const obs = new ResizeObserver(entries => {
-      for (const entry of entries) setReconWidth(entry.contentRect.width)
-    })
-    obs.observe(el)
-    return () => obs.disconnect()
-  }, [viewMode])
-
   // Load session data on mount
   useEffect(() => {
     if (!sessionId) return
@@ -235,7 +170,6 @@ export function StepLlmReview({ sessionId, onNext }: StepLlmReviewProps) {
               model: event.model,
               skipped_indices: event.skipped_indices,
             })
-            // Mark skipped rows
             if (event.skipped_indices) {
               allSkipped = new Set(event.skipped_indices)
               setSkippedRows(allSkipped)
@@ -246,15 +180,12 @@ export function StepLlmReview({ sessionId, onNext }: StepLlmReviewProps) {
             const batchChanges: LlmChange[] = event.changes || []
             const batchRows: number[] = event.entries_reviewed || []
 
-            // Update active rows (currently being reviewed)
             setActiveRowIndices(new Set(batchRows))
 
-            // Accumulate changes
             allChanges = [...allChanges, ...batchChanges]
             setChanges(allChanges)
             setProgress(event.progress)
 
-            // Update corrected map
             for (const c of batchChanges) {
               const existing = cMap.get(c.row_index) || []
               existing.push(c)
@@ -262,13 +193,11 @@ export function StepLlmReview({ sessionId, onNext }: StepLlmReviewProps) {
             }
             setCorrectedMap(new Map(cMap))
 
-            // Mark batch rows as reviewed
             for (const r of batchRows) {
               allReviewed.add(r)
             }
             setReviewedRows(new Set(allReviewed))
 
-            // Scroll to active row in table
             setTimeout(() => {
               activeRowRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' })
             }, 50)
@@ -278,7 +207,6 @@ export function StepLlmReview({ sessionId, onNext }: StepLlmReviewProps) {
             setActiveRowIndices(new Set())
             setTotalDuration(event.duration_ms)
             setAccepted(new Set(allChanges.map((_: LlmChange, i: number) => i)))
-            // Mark all non-skipped as reviewed
             const allEntryIndices = vocabEntries.map((_: WordEntry, i: number) => i)
             for (const i of allEntryIndices) {
               if (!allSkipped.has(i)) allReviewed.add(i)
@@ -293,7 +221,6 @@ export function StepLlmReview({ sessionId, onNext }: StepLlmReviewProps) {
         }
       }
 
-      // If stream ended without complete event
       if (allChanges.length === 0) {
         setStatus('done')
       }
@@ -354,90 +281,24 @@ export function StepLlmReview({ sessionId, onNext }: StepLlmReviewProps) {
     ? `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/cropped`
     : ''
 
-  // Snap all cells in the same column to consistent x/w positions
-  // Uses the median x and width per col_index so columns align vertically
-  const colPositions = useMemo(() => {
-    const byCol = new Map<number, { xs: number[]; ws: number[] }>()
-    for (const cell of cells) {
-      if (!cell.bbox_pct) continue
-      const entry = byCol.get(cell.col_index) || { xs: [], ws: [] }
-      entry.xs.push(cell.bbox_pct.x)
-      entry.ws.push(cell.bbox_pct.w)
-      byCol.set(cell.col_index, entry)
-    }
-    const result = new Map<number, { x: number; w: number }>()
-    for (const [colIdx, { xs, ws }] of byCol) {
-      xs.sort((a, b) => a - b)
-      ws.sort((a, b) => a - b)
-      const medianX = xs[Math.floor(xs.length / 2)]
-      const medianW = ws[Math.floor(ws.length / 2)]
-      result.set(colIdx, { x: medianX, w: medianW })
-    }
-    return result
-  }, [cells])
-
-  if (!sessionId) {
-    return <div className="text-center py-12 text-gray-400">Bitte zuerst eine Session auswaehlen.</div>
-  }
-
-  // --- Loading session data ---
-  if (status === 'loading' || status === 'idle') {
-    return (
-      <div className="flex items-center gap-3 justify-center py-12">
-        <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-teal-500" />
-        <span className="text-gray-500">Session-Daten werden geladen...</span>
-      </div>
-    )
-  }
-
-  // --- Error ---
+  // --- Early returns for non-main states ---
+  if (!sessionId) return <NoSessionScreen />
+  if (status === 'loading' || status === 'idle') return <LoadingScreen />
   if (status === 'error') {
-    return (
-      <div className="flex flex-col items-center justify-center py-12 text-center">
-        <div className="text-5xl mb-4">⚠️</div>
-        <h3 className="text-lg font-medium text-red-600 dark:text-red-400 mb-2">Fehler bei OCR-Zeichenkorrektur</h3>
-        <p className="text-sm text-gray-500 dark:text-gray-400 max-w-lg mb-4">{error}</p>
-        <div className="flex gap-3">
-          <button onClick={() => { setError(''); loadSessionData() }}
-            className="px-5 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors text-sm">
-            Erneut versuchen
-          </button>
-          <button onClick={onNext}
-            className="px-5 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors text-sm">
-            Ueberspringen →
-          </button>
-        </div>
-      </div>
-    )
+    return <ErrorScreen error={error} onRetry={() => { setError(''); loadSessionData() }} onSkip={onNext} />
   }
-
-  // --- Applied ---
   if (status === 'applied') {
-    return (
-      <div className="flex flex-col items-center justify-center py-12 text-center">
-        <div className="text-5xl mb-4">✅</div>
-        <h3 className="text-lg font-medium text-gray-700 dark:text-gray-300 mb-2">Korrekturen uebernommen</h3>
-        <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">
-          {accepted.size} von {changes.length} Korrekturen wurden angewendet.
-        </p>
-        <button onClick={onNext}
-          className="px-6 py-2.5 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors font-medium">
-          Weiter →
-        </button>
-      </div>
-    )
+    return <AppliedScreen acceptedCount={accepted.size} totalChanges={changes.length} onNext={onNext} />
   }
 
   // Active entry for highlighting on image
   const activeEntry = vocabEntries.find((_: WordEntry, i: number) => activeRowIndices.has(i))
-
   const pct = progress ? Math.round((progress.current / progress.total) * 100) : 0
 
   /** Handle inline edit of a cell in the overlay */
   const handleCellEdit = (cellId: string, rowIndex: number, newText: string | null) => {
     if (newText === null) return
     setCells(prev => prev.map(c => c.cell_id === cellId ? { ...c, text: newText } : c))
-    // Also update vocabEntries if this cell maps to a known field
     const cell = cells.find(c => c.cell_id === cellId)
     if (cell) {
       const field = COL_TYPE_TO_FIELD[cell.col_type]
@@ -599,324 +460,40 @@ export function StepLlmReview({ sessionId, onNext }: StepLlmReviewProps) {
         {/* Right: Table or Overlay */}
         <div className={viewMode === 'table' ? 'col-span-2' : 'col-span-1'} ref={tableRef}>
           {viewMode === 'table' ? (
-            <>
-              <div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
-                {columnsUsed.length === 1 && columnsUsed[0]?.type === 'column_text' ? 'Tabelle' : 'Vokabeltabelle'} ({vocabEntries.length} Eintraege)
-              </div>
-              <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
-                <div className="max-h-[70vh] overflow-y-auto">
-                  <table className="w-full text-sm">
-                    <thead className="sticky top-0 z-10">
-                      <tr className="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
-                        <th className="px-2 py-2 text-left text-gray-500 dark:text-gray-400 font-medium w-10">#</th>
-                        {columnsUsed.length > 0 ? (
-                          columnsUsed.map((col, i) => {
-                            const field = COL_TYPE_TO_FIELD[col.type]
-                            if (!field) return null
-                            return (
-                              <th key={i} className={`px-2 py-2 text-left font-medium ${COL_TYPE_COLOR[col.type] || 'text-gray-500 dark:text-gray-400'}`}>
-                                {FIELD_LABELS[field] || field}
-                              </th>
-                            )
-                          })
-                        ) : (
-                          <>
-                            <th className="px-2 py-2 text-left text-gray-500 dark:text-gray-400 font-medium">EN</th>
-                            <th className="px-2 py-2 text-left text-gray-500 dark:text-gray-400 font-medium">DE</th>
-                            <th className="px-2 py-2 text-left text-gray-500 dark:text-gray-400 font-medium">Beispiel</th>
-                          </>
-                        )}
-                        <th className="px-2 py-2 text-center text-gray-500 dark:text-gray-400 font-medium w-16">Status</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {vocabEntries.map((entry, idx) => {
-                        const rowStatus = getRowStatus(idx)
-                        const rowChanges = correctedMap.get(idx)
-
-                        const rowBg = {
-                          pending: '',
-                          active: 'bg-yellow-50 dark:bg-yellow-900/20',
-                          reviewed: '',
-                          corrected: 'bg-teal-50/50 dark:bg-teal-900/10',
-                          skipped: 'bg-gray-50 dark:bg-gray-800/50',
-                        }[rowStatus]
-
-                        return (
-                          <tr
-                            key={idx}
-                            ref={rowStatus === 'active' ? activeRowRef : undefined}
-                            className={`border-b border-gray-100 dark:border-gray-700/50 ${rowBg} ${
-                              rowStatus === 'active' ? 'ring-1 ring-yellow-400 ring-inset' : ''
-                            }`}
-                          >
-                            <td className="px-2 py-1.5 text-gray-400 font-mono text-xs">{idx}</td>
-                            {columnsUsed.length > 0 ? (
-                              columnsUsed.map((col, i) => {
-                                const field = COL_TYPE_TO_FIELD[col.type]
-                                if (!field) return null
-                                const text = (entry as Record<string, unknown>)[field] as string || ''
-                                return (
-                                  <td key={i} className="px-2 py-1.5 text-xs">
-                                    <CellContent text={text} field={field} rowChanges={rowChanges} />
-                                  </td>
-                                )
-                              })
-                            ) : (
-                              <>
-                                <td className="px-2 py-1.5">
-                                  <CellContent text={entry.english} field="english" rowChanges={rowChanges} />
-                                </td>
-                                <td className="px-2 py-1.5">
-                                  <CellContent text={entry.german} field="german" rowChanges={rowChanges} />
-                                </td>
-                                <td className="px-2 py-1.5 text-xs">
-                                  <CellContent text={entry.example} field="example" rowChanges={rowChanges} />
-                                </td>
-                              </>
-                            )}
-                            <td className="px-2 py-1.5 text-center">
-                              <StatusIcon status={rowStatus} />
-                            </td>
-                          </tr>
-                        )
-                      })}
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-            </>
+            <LlmReviewVocabTable
+              vocabEntries={vocabEntries}
+              columnsUsed={columnsUsed}
+              getRowStatus={getRowStatus}
+              correctedMap={correctedMap}
+              activeRowRef={activeRowRef}
+            />
           ) : (
-            <>
-              <div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
-                Text-Rekonstruktion ({cells.filter(c => c.text).length} Zellen)
-              </div>
-              <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden bg-white dark:bg-white">
-                <div
-                  ref={reconRef}
-                  className="relative"
-                  style={{
-                    aspectRatio: imageNaturalSize ? `${imageNaturalSize.w} / ${imageNaturalSize.h}` : '3 / 4',
-                  }}
-                >
-                  {cells.map(cell => {
-                    if (!cell.bbox_pct || !cell.text) return null
-                    const col = colPositions.get(cell.col_index)
-                    const cellX = col?.x ?? cell.bbox_pct.x
-                    const cellW = col?.w ?? cell.bbox_pct.w
-                    const aspect = imageNaturalSize ? imageNaturalSize.h / imageNaturalSize.w : 4 / 3
-                    const containerH = reconWidth * aspect
-                    const cellHeightPx = containerH * (cell.bbox_pct.h / 100)
-
-                    const wordPos = cellWordPositions.get(cell.cell_id)
-
-                    // Pixel-analysed: render word-groups at detected positions
-                    if (wordPos) {
-                      return wordPos.map((wp, i) => {
-                        // Auto font-size from pixel analysis, scaled by user slider
-                        const autoFontPx = cellHeightPx * wp.fontRatio * fontScale
-                        const fs = Math.max(6, autoFontPx)
-                        return (
-                          <span
-                            key={`${cell.cell_id}_${i}`}
-                            className="absolute leading-none pointer-events-none select-none"
-                            style={{
-                              left: `${wp.xPct}%`,
-                              top: `${cell.bbox_pct.y}%`,
-                              width: `${wp.wPct}%`,
-                              height: `${cell.bbox_pct.h}%`,
-                              fontSize: `${fs}px`,
-                              fontWeight: globalBold ? 'bold' : (cell.is_bold ? 'bold' : 'normal'),
-                              fontFamily: "'Liberation Sans', Arial, sans-serif",
-                              display: 'flex',
-                              alignItems: 'center',
-                              whiteSpace: 'nowrap',
-                              overflow: 'visible',
-                              color: '#1a1a1a',
-                            }}
-                          >
-                            {wp.text}
-                          </span>
-                        )
-                      })
-                    }
-
-                    // Fallback: no pixel data — single span for entire cell
-                    const fontSize = Math.max(6, cellHeightPx * fontScale)
-                    return (
-                      <span
-                        key={cell.cell_id}
-                        className="absolute leading-none pointer-events-none select-none"
-                        style={{
-                          left: `${cellX}%`,
-                          top: `${cell.bbox_pct.y}%`,
-                          width: `${cellW}%`,
-                          height: `${cell.bbox_pct.h}%`,
-                          fontSize: `${fontSize}px`,
-                          fontWeight: globalBold ? 'bold' : (cell.is_bold ? 'bold' : 'normal'),
-                          paddingLeft: `${leftPaddingPct}%`,
-                          fontFamily: "'Liberation Sans', Arial, sans-serif",
-                          display: 'flex',
-                          alignItems: 'center',
-                          whiteSpace: 'pre',
-                          overflow: 'visible',
-                          color: '#1a1a1a',
-                        }}
-                      >
-                        {cell.text}
-                      </span>
-                    )
-                  })}
-                </div>
-              </div>
-            </>
+            <LlmReviewOverlay
+              cells={cells}
+              imageNaturalSize={imageNaturalSize}
+              fontScale={fontScale}
+              leftPaddingPct={leftPaddingPct}
+              globalBold={globalBold}
+              cellWordPositions={cellWordPositions}
+            />
           )}
         </div>
       </div>
 
       {/* Done state: summary + actions */}
       {status === 'done' && (
-        <div className="space-y-4">
-          {/* Summary */}
-          <div className="bg-gray-50 dark:bg-gray-800/50 rounded-lg p-3 text-xs text-gray-500 dark:text-gray-400">
-            {changes.length === 0 ? (
-              <span>Keine Korrekturen noetig — alle Eintraege sind korrekt.</span>
-            ) : (
-              <span>
-                {changes.length} Korrektur{changes.length !== 1 ? 'en' : ''} gefunden ·{' '}
-                {accepted.size} ausgewaehlt ·{' '}
-                {meta?.skipped || 0} uebersprungen (Lautschrift) ·{' '}
-                {totalDuration}ms
-              </span>
-            )}
-          </div>
-
-          {/* Corrections detail list (if any) */}
-          {changes.length > 0 && (
-            <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
-              <div className="bg-gray-50 dark:bg-gray-800 px-3 py-2 border-b border-gray-200 dark:border-gray-700">
-                <span className="text-xs font-medium text-gray-600 dark:text-gray-400">
-                  Korrekturvorschlaege ({accepted.size}/{changes.length} ausgewaehlt)
-                </span>
-              </div>
-              <table className="w-full text-sm">
-                <thead>
-                  <tr className="bg-gray-50/50 dark:bg-gray-800/50 border-b border-gray-200 dark:border-gray-700">
-                    <th className="w-10 px-3 py-1.5 text-center">
-                      <input type="checkbox" checked={accepted.size === changes.length} onChange={toggleAll}
-                        className="rounded border-gray-300 dark:border-gray-600" />
-                    </th>
-                    <th className="px-2 py-1.5 text-left text-gray-500 dark:text-gray-400 font-medium text-xs">Zeile</th>
-                    <th className="px-2 py-1.5 text-left text-gray-500 dark:text-gray-400 font-medium text-xs">Feld</th>
-                    <th className="px-2 py-1.5 text-left text-gray-500 dark:text-gray-400 font-medium text-xs">Vorher</th>
-                    <th className="px-2 py-1.5 text-left text-gray-500 dark:text-gray-400 font-medium text-xs">Nachher</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {changes.map((change, idx) => (
-                    <tr key={idx} className={`border-b border-gray-100 dark:border-gray-700/50 ${
-                      accepted.has(idx) ? 'bg-teal-50/50 dark:bg-teal-900/10' : ''
-                    }`}>
-                      <td className="px-3 py-1.5 text-center">
-                        <input type="checkbox" checked={accepted.has(idx)} onChange={() => toggleChange(idx)}
-                          className="rounded border-gray-300 dark:border-gray-600" />
-                      </td>
-                      <td className="px-2 py-1.5 text-gray-500 dark:text-gray-400 font-mono text-xs">R{change.row_index}</td>
-                      <td className="px-2 py-1.5">
-                        <span className="text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400">
-                          {FIELD_LABELS[change.field] || change.field}
-                        </span>
-                      </td>
-                      <td className="px-2 py-1.5"><span className="line-through text-red-500 dark:text-red-400 text-xs">{change.old}</span></td>
-                      <td className="px-2 py-1.5"><span className="text-green-600 dark:text-green-400 font-medium text-xs">{change.new}</span></td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          )}
-
-          {/* Actions */}
-          <div className="flex items-center justify-between pt-2">
-            <p className="text-xs text-gray-400">
-              {changes.length > 0 ? `${accepted.size} von ${changes.length} ausgewaehlt` : ''}
-            </p>
-            <div className="flex gap-3">
-              {changes.length > 0 && (
-                <button onClick={onNext}
-                  className="px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors text-gray-600 dark:text-gray-400">
-                  Alle ablehnen
-                </button>
-              )}
-              {changes.length > 0 ? (
-                <button onClick={applyChanges} disabled={applying || accepted.size === 0}
-                  className="px-5 py-2 text-sm bg-teal-600 text-white rounded-lg hover:bg-teal-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium">
-                  {applying ? 'Wird uebernommen...' : `${accepted.size} Korrektur${accepted.size !== 1 ? 'en' : ''} uebernehmen`}
-                </button>
-              ) : (
-                <button onClick={onNext}
-                  className="px-6 py-2.5 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors font-medium">
-                  Weiter →
-                </button>
-              )}
-            </div>
-          </div>
-        </div>
+        <LlmReviewCorrections
+          changes={changes}
+          accepted={accepted}
+          meta={meta}
+          totalDuration={totalDuration}
+          applying={applying}
+          onToggleChange={toggleChange}
+          onToggleAll={toggleAll}
+          onApply={applyChanges}
+          onNext={onNext}
+        />
       )}
     </div>
   )
 }
-
-/** Cell content with inline diff for corrections */
-function CellContent({ text, field, rowChanges }: {
-  text: string
-  field: string
-  rowChanges?: LlmChange[]
-}) {
-  const change = rowChanges?.find(c => c.field === field)
-
-  if (!text && !change) {
-    return <span className="text-gray-300 dark:text-gray-600">&mdash;</span>
-  }
-
-  if (change) {
-    return (
-      <span>
-        <span className="line-through text-red-400 dark:text-red-500 text-xs mr-1">{change.old}</span>
-        <span className="text-green-600 dark:text-green-400 font-medium text-xs">{change.new}</span>
-      </span>
-    )
-  }
-
-  return <span className="text-gray-700 dark:text-gray-300 text-xs">{text}</span>
-}
-
-/** Status icon for each row */
-function StatusIcon({ status }: { status: RowStatus }) {
-  switch (status) {
-    case 'pending':
-      return <span className="text-gray-300 dark:text-gray-600 text-xs">—</span>
-    case 'active':
-      return (
-        <span className="inline-block w-3 h-3 rounded-full bg-yellow-400 animate-pulse" title="Wird geprueft" />
-      )
-    case 'reviewed':
-      return (
-        <svg className="w-4 h-4 text-green-500 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-          <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
-        </svg>
-      )
-    case 'corrected':
-      return (
-        <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-teal-100 dark:bg-teal-900/30 text-teal-700 dark:text-teal-400">
-          korr.
-        </span>
-      )
-    case 'skipped':
-      return (
-        <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400">
-          skip
-        </span>
-      )
-  }
-}
diff --git a/admin-lehrer/components/ocr-pipeline/StepReconstruction.tsx b/admin-lehrer/components/ocr-pipeline/StepReconstruction.tsx
index cedff21..b449cbe 100644
--- a/admin-lehrer/components/ocr-pipeline/StepReconstruction.tsx
+++ b/admin-lehrer/components/ocr-pipeline/StepReconstruction.tsx
@@ -2,10 +2,13 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import dynamic from 'next/dynamic'
-import type { GridResult, GridCell, ColumnResult, RowResult, PageZone, PageRegion, RowItem, StructureResult, StructureBox, StructureGraphic } from '@/app/(admin)/ai/ocr-kombi/types'
 import { usePixelWordPositions } from './usePixelWordPositions'
-
-const KLAUSUR_API = '/klausur-api'
+import type { EditableCell, UndoAction, StepReconstructionProps } from './StepReconstructionTypes'
+import { KLAUSUR_API } from './StepReconstructionTypes'
+import { useReconstructionData } from './useReconstructionData'
+import { ReconstructionToolbar } from './ReconstructionToolbar'
+import { ReconstructionOverlay } from './ReconstructionOverlay'
+import { ReconstructionSimpleView } from './ReconstructionSimpleView'
 
 // Lazy-load Fabric.js canvas editor (SSR-incompatible)
 const FabricReconstructionCanvas = dynamic(
@@ -13,58 +16,26 @@ const FabricReconstructionCanvas = dynamic(
   { ssr: false, loading: () => <div className="py-8 text-center text-sm text-gray-400">Editor wird geladen...</div> }
 )
 
-type EditorMode = 'simple' | 'editor' | 'overlay'
-
-interface StepReconstructionProps {
-  sessionId: string | null
-  onNext: () => void
-}
-
-interface EditableCell {
-  cellId: string
-  text: string
-  originalText: string
-  bboxPct: { x: number; y: number; w: number; h: number }
-  colType: string
-  rowIndex: number
-  colIndex: number
-}
-
-type UndoAction = { cellId: string; oldText: string; newText: string }
-
 export function StepReconstruction({ sessionId, onNext }: StepReconstructionProps) {
-  const [status, setStatus] = useState<'loading' | 'ready' | 'saving' | 'saved' | 'error'>('loading')
-  const [error, setError] = useState('')
-  const [cells, setCells] = useState<EditableCell[]>([])
-  const [gridCells, setGridCells] = useState<GridCell[]>([])
-  const [editorMode, setEditorMode] = useState<EditorMode>('simple')
   const [editedTexts, setEditedTexts] = useState<Map<string, string>>(new Map())
   const [zoom, setZoom] = useState(100)
   const [imageNaturalH, setImageNaturalH] = useState(0)
   const [showEmptyHighlight, setShowEmptyHighlight] = useState(true)
-
-  // Undo/Redo stacks
+  const [fontScale, setFontScale] = useState(0.7)
+  const [globalBold, setGlobalBold] = useState(false)
+  const [showStructure, setShowStructure] = useState(true)
   const [undoStack, setUndoStack] = useState<UndoAction[]>([])
   const [redoStack, setRedoStack] = useState<UndoAction[]>([])
 
-  const containerRef = useRef<HTMLDivElement>(null)
   const imageRef = useRef<HTMLImageElement>(null)
 
-  // Overlay mode state
-  const [isParentWithBoxes, setIsParentWithBoxes] = useState(false)
-  const [mergedGridCells, setMergedGridCells] = useState<GridCell[]>([])
-  const [parentColumns, setParentColumns] = useState<PageRegion[]>([])
-  const [parentRows, setParentRows] = useState<RowItem[]>([])
-  const [parentZones, setParentZones] = useState<PageZone[]>([])
-  const [imageNaturalSize, setImageNaturalSize] = useState<{ w: number; h: number } | null>(null)
-  const [fontScale, setFontScale] = useState(0.7)
-  const [globalBold, setGlobalBold] = useState(false)
-  const [imageRotation, setImageRotation] = useState<0 | 180>(0)
-  const [structureBoxes, setStructureBoxes] = useState<StructureBox[]>([])
-  const [structureGraphics, setStructureGraphics] = useState<StructureGraphic[]>([])
-  const [showStructure, setShowStructure] = useState(true)
-  const reconRef = useRef<HTMLDivElement>(null)
-  const [reconWidth, setReconWidth] = useState(0)
+  const resetEditing = useCallback(() => {
+    setEditedTexts(new Map())
+    setUndoStack([])
+    setRedoStack([])
+  }, [])
+
+  const data = useReconstructionData(sessionId, resetEditing)
 
   // Pixel-based word positions for overlay mode
   const overlayImageUrl = sessionId
@@ -72,210 +43,47 @@ export function StepReconstruction({ sessionId, onNext }: StepReconstructionProp
     : ''
   const cellWordPositions = usePixelWordPositions(
     overlayImageUrl,
-    mergedGridCells,
-    editorMode === 'overlay',
-    imageRotation,
+    data.mergedGridCells,
+    data.editorMode === 'overlay',
+    data.imageRotation,
   )
 
-  // Track reconstruction container width for font size calculation
-  useEffect(() => {
-    const el = reconRef.current
-    if (!el) return
-    const obs = new ResizeObserver(entries => {
-      for (const entry of entries) setReconWidth(entry.contentRect.width)
-    })
-    obs.observe(el)
-    return () => obs.disconnect()
-  }, [editorMode])
-
-  // Load session data on mount
-  useEffect(() => {
-    if (!sessionId) return
-    loadSessionData()
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sessionId])
-
   // Track image natural dimensions for font scaling and structure layer
   const handleImageLoad = useCallback(() => {
     if (imageRef.current) {
       setImageNaturalH(imageRef.current.naturalHeight)
-      if (!imageNaturalSize) {
-        setImageNaturalSize({ w: imageRef.current.naturalWidth, h: imageRef.current.naturalHeight })
+      if (!data.imageNaturalSize) {
+        data.setImageNaturalSize({ w: imageRef.current.naturalWidth, h: imageRef.current.naturalHeight })
       }
     }
-  }, [imageNaturalSize])
+  }, [data])
 
-  const loadSessionData = async () => {
-    if (!sessionId) return
-    setStatus('loading')
-    try {
-      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}`)
-      if (!res.ok) throw new Error(`HTTP ${res.status}`)
-      const data = await res.json()
-
-      const wordResult: GridResult | undefined = data.word_result
-      if (!wordResult) {
-        setError('Keine Worterkennungsdaten gefunden. Bitte zuerst Schritt 5 abschliessen.')
-        setStatus('error')
-        return
-      }
-
-      // Build editable cells from grid cells
-      const rawGridCells: GridCell[] = wordResult.cells || []
-      setGridCells(rawGridCells)
-      const allEditableCells: EditableCell[] = rawGridCells.map(c => ({
-        cellId: c.cell_id,
-        text: c.text,
-        originalText: c.text,
-        bboxPct: c.bbox_pct,
-        colType: c.col_type,
-        rowIndex: c.row_index,
-        colIndex: c.col_index,
-      }))
-
-      setCells(allEditableCells)
-      setEditedTexts(new Map())
-      setUndoStack([])
-      setRedoStack([])
-
-      // Load structure result (boxes, graphics, colors)
-      const structureResult: StructureResult | undefined = data.structure_result
-      if (structureResult) {
-        setStructureBoxes(structureResult.boxes || [])
-        setStructureGraphics(structureResult.graphics || [])
-      }
-
-      // Check for parent with boxes (sub-sessions + zones)
-      const columnResult: ColumnResult | undefined = data.column_result
-      const rowResult: RowResult | undefined = data.row_result
-      const subSessions: { id: string; box_index: number }[] = data.sub_sessions || []
-      const zones: PageZone[] = columnResult?.zones || []
-      const hasBoxes = subSessions.length > 0 && zones.some(z => z.zone_type === 'box')
-
-      setIsParentWithBoxes(hasBoxes)
-      if (hasBoxes) setImageRotation(180) // Default: rotate for correct pixel matching
-
-      if (columnResult?.columns) setParentColumns(columnResult.columns)
-      if (rowResult?.rows) setParentRows(rowResult.rows)
-      if (zones.length > 0) setParentZones(zones)
-
-      // Store image dimensions
-      if (wordResult.image_width && wordResult.image_height) {
-        setImageNaturalSize({ w: wordResult.image_width, h: wordResult.image_height })
-      }
-
-      if (hasBoxes) {
-        // Default to overlay mode for parent sessions with boxes
-        setEditorMode('overlay')
-
-        // Load sub-sessions and merge cells
-        const imgW = wordResult.image_width || 1
-        const imgH = wordResult.image_height || 1
-        const allMergedCells: GridCell[] = [...rawGridCells]
-
-        for (const sub of subSessions) {
-          try {
-            const subRes = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sub.id}`)
-            if (!subRes.ok) continue
-            const subData = await subRes.json()
-            const subWordResult: GridResult | undefined = subData.word_result
-            if (!subWordResult?.cells) continue
-
-            // Find the box zone for this sub-session
-            const boxZone = zones.find(z => z.zone_type === 'box')
-            if (!boxZone?.box) continue
-
-            const box = boxZone.box
-            // Box coordinates are in pixels, convert to pct
-            const boxXPct = (box.x / imgW) * 100
-            const boxYPct = (box.y / imgH) * 100
-            const boxWPct = (box.width / imgW) * 100
-            const boxHPct = (box.height / imgH) * 100
-
-            // Convert sub-session cell coordinates to parent coordinates
-            for (const subCell of subWordResult.cells) {
-              if (!subCell.bbox_pct) continue
-              const parentCellX = boxXPct + (subCell.bbox_pct.x / 100) * boxWPct
-              const parentCellY = boxYPct + (subCell.bbox_pct.y / 100) * boxHPct
-              const parentCellW = (subCell.bbox_pct.w / 100) * boxWPct
-              const parentCellH = (subCell.bbox_pct.h / 100) * boxHPct
-
-              allMergedCells.push({
-                ...subCell,
-                cell_id: `sub_${sub.id}_${subCell.cell_id}`,
-                bbox_pct: {
-                  x: parentCellX,
-                  y: parentCellY,
-                  w: parentCellW,
-                  h: parentCellH,
-                },
-                bbox_px: {
-                  x: Math.round(parentCellX / 100 * imgW),
-                  y: Math.round(parentCellY / 100 * imgH),
-                  w: Math.round(parentCellW / 100 * imgW),
-                  h: Math.round(parentCellH / 100 * imgH),
-                },
-              })
-            }
-          } catch {
-            // Skip failing sub-sessions
-          }
-        }
-
-        setMergedGridCells(allMergedCells)
-
-        // Also add merged cells as editable cells
-        const mergedEditableCells: EditableCell[] = allMergedCells.map(c => ({
-          cellId: c.cell_id,
-          text: c.text,
-          originalText: c.text,
-          bboxPct: c.bbox_pct,
-          colType: c.col_type,
-          rowIndex: c.row_index,
-          colIndex: c.col_index,
-        }))
-        setCells(mergedEditableCells)
-      } else {
-        setMergedGridCells(rawGridCells)
-      }
-
-      setStatus('ready')
-    } catch (e: unknown) {
-      setError(e instanceof Error ? e.message : String(e))
-      setStatus('error')
-    }
-  }
+  // --- Cell editing callbacks ---
 
   const handleTextChange = useCallback((cellId: string, newText: string) => {
     setEditedTexts(prev => {
       const oldText = prev.get(cellId)
-      const cell = cells.find(c => c.cellId === cellId)
+      const cell = data.cells.find(c => c.cellId === cellId)
       const prevText = oldText ?? cell?.text ?? ''
-
-      // Push to undo stack
       setUndoStack(stack => [...stack, { cellId, oldText: prevText, newText }])
-      setRedoStack([]) // Clear redo on new edit
-
+      setRedoStack([])
       const next = new Map(prev)
       next.set(cellId, newText)
       return next
     })
-  }, [cells])
+  }, [data.cells])
 
   const undo = useCallback(() => {
     setUndoStack(stack => {
       if (stack.length === 0) return stack
       const action = stack[stack.length - 1]
-      const newStack = stack.slice(0, -1)
-
       setRedoStack(rs => [...rs, action])
       setEditedTexts(prev => {
         const next = new Map(prev)
         next.set(action.cellId, action.oldText)
         return next
       })
-
-      return newStack
+      return stack.slice(0, -1)
     })
   }, [])
 
@@ -283,39 +91,28 @@ export function StepReconstruction({ sessionId, onNext }: StepReconstructionProp
     setRedoStack(stack => {
       if (stack.length === 0) return stack
       const action = stack[stack.length - 1]
-      const newStack = stack.slice(0, -1)
-
       setUndoStack(us => [...us, action])
       setEditedTexts(prev => {
         const next = new Map(prev)
         next.set(action.cellId, action.newText)
         return next
       })
-
-      return newStack
+      return stack.slice(0, -1)
     })
   }, [])
 
   const resetCell = useCallback((cellId: string) => {
-    const cell = cells.find(c => c.cellId === cellId)
+    const cell = data.cells.find(c => c.cellId === cellId)
     if (!cell) return
-    setEditedTexts(prev => {
-      const next = new Map(prev)
-      next.delete(cellId)
-      return next
-    })
-  }, [cells])
+    setEditedTexts(prev => { const next = new Map(prev); next.delete(cellId); return next })
+  }, [data.cells])
 
   // Global keyboard shortcuts for undo/redo
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
       if ((e.metaKey || e.ctrlKey) && e.key === 'z') {
         e.preventDefault()
-        if (e.shiftKey) {
-          redo()
-        } else {
-          undo()
-        }
+        if (e.shiftKey) { redo() } else { undo() }
       }
     }
     document.addEventListener('keydown', handler)
@@ -333,30 +130,24 @@ export function StepReconstruction({ sessionId, onNext }: StepReconstructionProp
 
   const changedCount = useMemo(() => {
     let count = 0
-    for (const cell of cells) {
-      if (isEdited(cell)) count++
-    }
+    for (const cell of data.cells) { if (isEdited(cell)) count++ }
     return count
-  }, [cells, isEdited])
+  }, [data.cells, isEdited])
 
-  // Identify empty required cells (EN or DE columns with no text)
   const emptyCellIds = useMemo(() => {
     const required = new Set(['column_en', 'column_de'])
     const ids = new Set<string>()
-    for (const cell of cells) {
-      if (required.has(cell.colType) && !cell.text.trim()) {
-        ids.add(cell.cellId)
-      }
+    for (const cell of data.cells) {
+      if (required.has(cell.colType) && !cell.text.trim()) ids.add(cell.cellId)
     }
     return ids
-  }, [cells])
+  }, [data.cells])
 
-  // Sort cells for tab navigation: by row, then by column
   const sortedCellIds = useMemo(() => {
-    return [...cells]
+    return [...data.cells]
       .sort((a, b) => a.rowIndex !== b.rowIndex ? a.rowIndex - b.rowIndex : a.colIndex - b.colIndex)
       .map(c => c.cellId)
-  }, [cells])
+  }, [data.cells])
 
   const handleKeyDown = useCallback((e: React.KeyboardEvent, cellId: string) => {
     if (e.key === 'Tab') {
@@ -364,101 +155,71 @@ export function StepReconstruction({ sessionId, onNext }: StepReconstructionProp
       const idx = sortedCellIds.indexOf(cellId)
       const nextIdx = e.shiftKey ? idx - 1 : idx + 1
       if (nextIdx >= 0 && nextIdx < sortedCellIds.length) {
-        const nextId = sortedCellIds[nextIdx]
-        const el = document.getElementById(`cell-${nextId}`)
-        el?.focus()
+        document.getElementById(`cell-${sortedCellIds[nextIdx]}`)?.focus()
       }
     }
   }, [sortedCellIds])
 
   const saveReconstruction = useCallback(async () => {
     if (!sessionId) return
-    setStatus('saving')
+    data.setStatus('saving')
     try {
       const cellUpdates = Array.from(editedTexts.entries())
         .filter(([cellId, text]) => {
-          const cell = cells.find(c => c.cellId === cellId)
+          const cell = data.cells.find(c => c.cellId === cellId)
           return cell && text !== cell.originalText
         })
         .map(([cellId, text]) => ({ cell_id: cellId, text }))
 
-      if (cellUpdates.length === 0) {
-        // Nothing changed, just advance
-        setStatus('saved')
-        return
-      }
+      if (cellUpdates.length === 0) { data.setStatus('saved'); return }
 
       const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/reconstruction`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ cells: cellUpdates }),
       })
-
       if (!res.ok) {
-        const data = await res.json().catch(() => ({}))
-        throw new Error(data.detail || `HTTP ${res.status}`)
+        const d = await res.json().catch(() => ({}))
+        throw new Error(d.detail || `HTTP ${res.status}`)
       }
-
-      setStatus('saved')
+      data.setStatus('saved')
     } catch (e: unknown) {
-      setError(e instanceof Error ? e.message : String(e))
-      setStatus('error')
+      data.setError(e instanceof Error ? e.message : String(e))
+      data.setStatus('error')
     }
-  }, [sessionId, editedTexts, cells])
+  }, [sessionId, editedTexts, data])
 
-  // Handler for Fabric.js editor cell changes
   const handleFabricCellsChanged = useCallback((updates: { cell_id: string; text: string }[]) => {
     for (const u of updates) {
-      setEditedTexts(prev => {
-        const next = new Map(prev)
-        next.set(u.cell_id, u.text)
-        return next
-      })
+      setEditedTexts(prev => { const next = new Map(prev); next.set(u.cell_id, u.text); return next })
     }
   }, [])
 
-  const dewarpedUrl = sessionId
-    ? `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/cropped`
-    : ''
-
-  const colTypeColor = (colType: string): string => {
-    const colors: Record<string, string> = {
-      column_en: 'border-blue-400/40 focus:border-blue-500',
-      column_de: 'border-green-400/40 focus:border-green-500',
-      column_example: 'border-orange-400/40 focus:border-orange-500',
-      column_text: 'border-purple-400/40 focus:border-purple-500',
-      page_ref: 'border-cyan-400/40 focus:border-cyan-500',
-      column_marker: 'border-gray-400/40 focus:border-gray-500',
-    }
-    return colors[colType] || 'border-gray-400/40 focus:border-gray-500'
-  }
-
-  // Font size based on image natural height (not container) scaled by zoom
-  const getFontSize = useCallback((bboxH: number): number => {
-    const baseH = imageNaturalH || 800
-    const px = (bboxH / 100) * baseH * 0.55
-    return Math.max(8, Math.min(18, px * (zoom / 100)))
-  }, [imageNaturalH, zoom])
-
-  // Box zones in percent for clamping cell positions in overlay mode
   const boxZonesPct = useMemo(() =>
-    parentZones
+    data.parentZones
       .filter(z => z.zone_type === 'box' && z.box)
       .map(z => {
-        const imgH = imageNaturalSize?.h || 1
+        const imgH = data.imageNaturalSize?.h || 1
         return {
           topPct: (z.box!.y / imgH) * 100,
           bottomPct: ((z.box!.y + z.box!.height) / imgH) * 100,
         }
       }),
-    [parentZones, imageNaturalSize]
+    [data.parentZones, data.imageNaturalSize]
   )
 
+  const dewarpedUrl = sessionId
+    ? `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/cropped`
+    : ''
+
+  const hasStructureElements = data.structureBoxes.length > 0 || data.structureGraphics.length > 0
+
+  // --- Status screens ---
+
   if (!sessionId) {
     return <div className="text-center py-12 text-gray-400">Bitte zuerst eine Session auswaehlen.</div>
   }
-
-  if (status === 'loading') {
+  if (data.status === 'loading') {
     return (
       <div className="flex items-center gap-3 justify-center py-12">
         <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-teal-500" />
@@ -466,15 +227,14 @@ export function StepReconstruction({ sessionId, onNext }: StepReconstructionProp
       </div>
     )
   }
-
-  if (status === 'error') {
+  if (data.status === 'error') {
     return (
       <div className="flex flex-col items-center justify-center py-12 text-center">
         <div className="text-5xl mb-4">&#x26A0;&#xFE0F;</div>
         <h3 className="text-lg font-medium text-red-600 dark:text-red-400 mb-2">Fehler</h3>
-        <p className="text-sm text-gray-500 dark:text-gray-400 max-w-lg mb-4">{error}</p>
+        <p className="text-sm text-gray-500 dark:text-gray-400 max-w-lg mb-4">{data.error}</p>
         <div className="flex gap-3">
-          <button onClick={() => { setError(''); loadSessionData() }}
+          <button onClick={() => { data.setError(''); data.loadSessionData() }}
             className="px-5 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors text-sm">
             Erneut versuchen
           </button>
@@ -486,8 +246,7 @@ export function StepReconstruction({ sessionId, onNext }: StepReconstructionProp
       </div>
     )
   }
-
-  if (status === 'saved') {
+  if (data.status === 'saved') {
     return (
       <div className="flex flex-col items-center justify-center py-12 text-center">
         <div className="text-5xl mb-4">&#x2705;</div>
@@ -503,594 +262,91 @@ export function StepReconstruction({ sessionId, onNext }: StepReconstructionProp
     )
   }
 
-  // Clamp cell positions so they don't overlap with box zones
-  const adjustCellForBoxZones = (
-    bboxPct: { x: number; y: number; w: number; h: number },
-    cellId: string,
-  ): { x: number; y: number; w: number; h: number } => {
-    // Sub-session cells (inside box) → no adjustment
-    if (cellId.startsWith('sub_')) return bboxPct
-    if (boxZonesPct.length === 0) return bboxPct
-
-    const cellTop = bboxPct.y
-    const cellBottom = bboxPct.y + bboxPct.h
-    const boxMid = (boxZonesPct[0].topPct + boxZonesPct[0].bottomPct) / 2
-
-    for (const { topPct, bottomPct } of boxZonesPct) {
-      // Check if cell overlaps with box zone at all
-      if (cellBottom <= topPct || cellTop >= bottomPct) continue
-
-      // Cell starts ABOVE box midpoint → belongs above, clamp bottom to box top
-      if (cellTop < boxMid) {
-        return { ...bboxPct, h: Math.max(0.5, topPct - cellTop) }
-      }
-      // Cell starts AT or BELOW box midpoint → belongs below, push top to box bottom
-      return { ...bboxPct, y: bottomPct, h: Math.max(0.5, cellBottom - bottomPct) }
-    }
-    return bboxPct
-  }
-
-  // Structure layer: boxes and graphic elements as background
-  const renderStructureLayer = (imgW: number, imgH: number) => {
-    if (!showStructure) return null
-    const hasElements = structureBoxes.length > 0 || structureGraphics.length > 0
-    if (!hasElements) return null
-
-    return (
-      <>
-        {/* Structure boxes */}
-        {structureBoxes.map((box, i) => {
-          const bgColor = box.bg_color_hex || '#6b7280'
-          return (
-            <div
-              key={`sbox-${i}`}
-              className="absolute pointer-events-none"
-              style={{
-                left: `${(box.x / imgW) * 100}%`,
-                top: `${(box.y / imgH) * 100}%`,
-                width: `${(box.w / imgW) * 100}%`,
-                height: `${(box.h / imgH) * 100}%`,
-                border: `${Math.max(1, box.border_thickness)}px solid ${bgColor}40`,
-                backgroundColor: `${bgColor}0a`,
-                borderRadius: '2px',
-              }}
-            />
-          )
-        })}
-
-        {/* Graphic elements */}
-        {structureGraphics.map((g, i) => (
-          <div
-            key={`sgfx-${i}`}
-            className="absolute pointer-events-none"
-            style={{
-              left: `${(g.x / imgW) * 100}%`,
-              top: `${(g.y / imgH) * 100}%`,
-              width: `${(g.w / imgW) * 100}%`,
-              height: `${(g.h / imgH) * 100}%`,
-              border: `1px dashed ${g.color_hex}60`,
-              backgroundColor: `${g.color_hex}08`,
-              borderRadius: '2px',
-            }}
-          >
-            <span
-              className="absolute text-[8px] leading-none opacity-50"
-              style={{
-                top: '1px',
-                left: '2px',
-                color: g.color_hex,
-              }}
-            >
-              {g.shape === 'illustration' ? 'Illust' : 'Bild'}
-            </span>
-          </div>
-        ))}
-      </>
-    )
-  }
-
-  // Overlay rendering helper
-  const renderOverlayMode = () => {
-    const imgW = imageNaturalSize?.w || 1
-    const imgH = imageNaturalSize?.h || 1
-    const aspect = imgH / imgW
-    const containerH = reconWidth * aspect
-
-    return (
-      <div className="grid grid-cols-2 gap-4">
-        {/* Left: Original image */}
-        <div>
-          <div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
-            Originalbild
-          </div>
-          <div className="border rounded-lg overflow-hidden dark:border-gray-700 bg-gray-50 dark:bg-gray-900 sticky top-4">
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img
-              src={dewarpedUrl}
-              alt="Original"
-              className="w-full h-auto"
-              onLoad={(e) => {
-                const img = e.target as HTMLImageElement
-                setImageNaturalSize({ w: img.naturalWidth, h: img.naturalHeight })
-              }}
-            />
-          </div>
-        </div>
-
-        {/* Right: Reconstructed table overlay */}
-        <div>
-          <div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
-            Rekonstruktion ({cells.length} Zellen)
-          </div>
-          <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden bg-white">
-            <div
-              ref={reconRef}
-              className="relative"
-              style={{
-                aspectRatio: `${imgW} / ${imgH}`,
-              }}
-            >
-              {/* Column lines */}
-              {parentColumns
-                .filter(c => !['header', 'footer'].includes(c.type))
-                .map((col, i) => (
-                  <div
-                    key={`col-${i}`}
-                    className="absolute top-0 bottom-0 border-l border-gray-300/50"
-                    style={{ left: `${(col.x / imgW) * 100}%` }}
-                  />
-                ))}
-
-              {/* Row lines */}
-              {parentRows.map((row, i) => (
-                <div
-                  key={`row-${i}`}
-                  className="absolute left-0 right-0 border-t border-gray-300/50"
-                  style={{ top: `${(row.y / imgH) * 100}%` }}
-                />
-              ))}
-
-              {/* Box zone highlight */}
-              {parentZones
-                .filter(z => z.zone_type === 'box' && z.box)
-                .map((z, i) => {
-                  const box = z.box!
-                  return (
-                    <div
-                      key={`box-${i}`}
-                      className="absolute border-2 border-blue-400/30 bg-blue-50/10 pointer-events-none"
-                      style={{
-                        left: `${(box.x / imgW) * 100}%`,
-                        top: `${(box.y / imgH) * 100}%`,
-                        width: `${(box.width / imgW) * 100}%`,
-                        height: `${(box.height / imgH) * 100}%`,
-                      }}
-                    />
-                  )
-                })}
-
-              {/* Structure elements (boxes, graphics) */}
-              {renderStructureLayer(imgW, imgH)}
-
-              {/* Pixel-positioned words / editable inputs */}
-              {cells.map((cell) => {
-                const displayText = getDisplayText(cell)
-                const edited = isEdited(cell)
-                const wordPos = cellWordPositions.get(cell.cellId)
-                const adjBbox = adjustCellForBoxZones(cell.bboxPct, cell.cellId)
-                const cellHeightPx = containerH * (adjBbox.h / 100)
-
-                // Pixel-analysed: render word-groups at detected positions as inputs
-                if (wordPos && wordPos.length > 0) {
-                  return wordPos.map((wp, i) => {
-                    const autoFontPx = cellHeightPx * wp.fontRatio * fontScale
-                    const fs = Math.max(6, autoFontPx)
-
-                    // For multi-group cells, only the first group is the primary input
-                    // Show as span (read-only positioned) — editing happens at cell level
-                    if (wordPos.length > 1) {
-                      return (
-                        <span
-                          key={`${cell.cellId}_wp_${i}`}
-                          className="absolute leading-none pointer-events-none select-none"
-                          style={{
-                            left: `${wp.xPct}%`,
-                            top: `${adjBbox.y}%`,
-                            width: `${wp.wPct}%`,
-                            height: `${adjBbox.h}%`,
-                            fontSize: `${fs}px`,
-                            fontWeight: globalBold ? 'bold' : (cell.colType === 'column_en' ? 'bold' : 'normal'),
-                            fontFamily: "'Liberation Sans', Arial, sans-serif",
-                            display: 'flex',
-                            alignItems: 'center',
-                            whiteSpace: 'nowrap',
-                            overflow: 'visible',
-                            color: '#1a1a1a',
-                          }}
-                        >
-                          {wp.text}
-                        </span>
-                      )
-                    }
-
-                    // Single group: render as editable input at pixel position
-                    return (
-                      <div key={`${cell.cellId}_wp_${i}`} className="absolute group" style={{
-                        left: `${wp.xPct}%`,
-                        top: `${adjBbox.y}%`,
-                        width: `${wp.wPct}%`,
-                        height: `${adjBbox.h}%`,
-                      }}>
-                        <input
-                          id={`cell-${cell.cellId}`}
-                          type="text"
-                          value={displayText}
-                          onChange={(e) => handleTextChange(cell.cellId, e.target.value)}
-                          onKeyDown={(e) => handleKeyDown(e, cell.cellId)}
-                          className={`w-full h-full bg-transparent border-0 outline-none px-0 transition-colors ${
-                            edited ? 'bg-green-50/30' : ''
-                          }`}
-                          style={{
-                            fontSize: `${fs}px`,
-                            fontWeight: globalBold ? 'bold' : (cell.colType === 'column_en' ? 'bold' : 'normal'),
-                            fontFamily: "'Liberation Sans', Arial, sans-serif",
-                            lineHeight: '1',
-                            color: '#1a1a1a',
-                          }}
-                          title={`${cell.cellId} (${cell.colType})`}
-                        />
-                        {edited && (
-                          <button
-                            onClick={() => resetCell(cell.cellId)}
-                            className="absolute -top-1 -right-1 w-4 h-4 bg-red-500 text-white rounded-full text-[9px] leading-none opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
-                            title="Zuruecksetzen"
-                          >
-                            &times;
-                          </button>
-                        )}
-                      </div>
-                    )
-                  })
-                }
-
-                // Multi-group cell with pixel positions: already handled above
-                // Fallback: no pixel data — single input at cell bbox
-                if (!cell.text) return null
-
-                const fontSize = Math.max(6, cellHeightPx * fontScale)
-                return (
-                  <div key={cell.cellId} className="absolute group" style={{
-                    left: `${adjBbox.x}%`,
-                    top: `${adjBbox.y}%`,
-                    width: `${adjBbox.w}%`,
-                    height: `${adjBbox.h}%`,
-                  }}>
-                    <input
-                      id={`cell-${cell.cellId}`}
-                      type="text"
-                      value={displayText}
-                      onChange={(e) => handleTextChange(cell.cellId, e.target.value)}
-                      onKeyDown={(e) => handleKeyDown(e, cell.cellId)}
-                      className={`w-full h-full bg-transparent border-0 outline-none px-0 transition-colors ${
-                        edited ? 'bg-green-50/30' : ''
-                      }`}
-                      style={{
-                        fontSize: `${fontSize}px`,
-                        fontWeight: globalBold ? 'bold' : 'normal',
-                        fontFamily: "'Liberation Sans', Arial, sans-serif",
-                        lineHeight: '1',
-                        color: '#1a1a1a',
-                      }}
-                      title={`${cell.cellId} (${cell.colType})`}
-                    />
-                    {edited && (
-                      <button
-                        onClick={() => resetCell(cell.cellId)}
-                        className="absolute -top-1 -right-1 w-4 h-4 bg-red-500 text-white rounded-full text-[9px] leading-none opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
-                        title="Zuruecksetzen"
-                      >
-                        &times;
-                      </button>
-                    )}
-                  </div>
-                )
-              })}
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  }
+  // --- Main rendering ---
 
   return (
     <div className="space-y-3">
-      {/* Toolbar */}
-      <div className="flex items-center justify-between bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 px-3 py-2">
-        <div className="flex items-center gap-2">
-          <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">
-            Schritt 7: Rekonstruktion
-          </h3>
-          {/* Mode toggle */}
-          <div className="flex items-center ml-2 border border-gray-300 dark:border-gray-600 rounded overflow-hidden text-xs">
-            <button
-              onClick={() => setEditorMode('simple')}
-              className={`px-2 py-0.5 transition-colors ${
-                editorMode === 'simple'
-                  ? 'bg-teal-600 text-white'
-                  : 'hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400'
-              }`}
-            >
-              Einfach
-            </button>
-            {isParentWithBoxes && (
-              <button
-                onClick={() => setEditorMode('overlay')}
-                className={`px-2 py-0.5 transition-colors ${
-                  editorMode === 'overlay'
-                    ? 'bg-teal-600 text-white'
-                    : 'hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400'
-                }`}
-              >
-                Overlay
-              </button>
-            )}
-            <button
-              onClick={() => setEditorMode('editor')}
-              className={`px-2 py-0.5 transition-colors ${
-                editorMode === 'editor'
-                  ? 'bg-teal-600 text-white'
-                  : 'hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400'
-              }`}
-            >
-              Editor
-            </button>
-          </div>
-          <span className="text-xs text-gray-400">
-            {cells.length} Zellen &middot; {changedCount} geaendert
-            {emptyCellIds.size > 0 && showEmptyHighlight && (
-              <span className="text-red-400 ml-1">&middot; {emptyCellIds.size} leer</span>
-            )}
-          </span>
-        </div>
-        <div className="flex items-center gap-2">
-          {/* Undo/Redo */}
-          <button
-            onClick={undo}
-            disabled={undoStack.length === 0}
-            className="px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-30"
-            title="Rueckgaengig (Ctrl+Z)"
-          >
-            &#x21A9;
-          </button>
-          <button
-            onClick={redo}
-            disabled={redoStack.length === 0}
-            className="px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-30"
-            title="Wiederholen (Ctrl+Shift+Z)"
-          >
-            &#x21AA;
-          </button>
+      <ReconstructionToolbar
+        editorMode={data.editorMode}
+        setEditorMode={data.setEditorMode}
+        isParentWithBoxes={data.isParentWithBoxes}
+        cellCount={data.cells.length}
+        changedCount={changedCount}
+        emptyCellCount={emptyCellIds.size}
+        showEmptyHighlight={showEmptyHighlight}
+        setShowEmptyHighlight={setShowEmptyHighlight}
+        showStructure={showStructure}
+        setShowStructure={setShowStructure}
+        hasStructureElements={hasStructureElements}
+        zoom={zoom}
+        setZoom={setZoom}
+        undoCount={undoStack.length}
+        redoCount={redoStack.length}
+        onUndo={undo}
+        onRedo={redo}
+        status={data.status}
+        onSave={saveReconstruction}
+        fontScale={fontScale}
+        setFontScale={setFontScale}
+        globalBold={globalBold}
+        setGlobalBold={setGlobalBold}
+        imageRotation={data.imageRotation}
+        setImageRotation={data.setImageRotation}
+      />
 
-          <div className="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1" />
-
-          {/* Overlay-specific toolbar */}
-          {editorMode === 'overlay' && (
-            <>
-              <label className="flex items-center gap-1 text-xs text-gray-600 dark:text-gray-400">
-                Schrift
-                <input
-                  type="range" min={30} max={120} value={Math.round(fontScale * 100)}
-                  onChange={e => setFontScale(Number(e.target.value) / 100)}
-                  className="w-20 h-1 accent-teal-600"
-                />
-                <span className="w-8 text-right font-mono">{Math.round(fontScale * 100)}%</span>
-              </label>
-              <button
-                onClick={() => setGlobalBold(b => !b)}
-                className={`px-2 py-1 text-xs rounded border transition-colors font-bold ${
-                  globalBold
-                    ? 'bg-teal-600 text-white border-teal-600'
-                    : 'bg-white dark:bg-gray-700 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600'
-                }`}
-              >
-                B
-              </button>
-              <button
-                onClick={() => setImageRotation(r => r === 0 ? 180 : 0)}
-                className={`px-2 py-1 text-xs rounded border transition-colors ${
-                  imageRotation === 180
-                    ? 'bg-teal-600 text-white border-teal-600'
-                    : 'bg-white dark:bg-gray-700 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600'
-                }`}
-                title="Bild 180° drehen"
-              >
-                180°
-              </button>
-              {(structureBoxes.length > 0 || structureGraphics.length > 0) && (
-                <button
-                  onClick={() => setShowStructure(v => !v)}
-                  className={`px-2 py-1 text-xs border rounded transition-colors ${
-                    showStructure
-                      ? 'border-violet-300 bg-violet-50 text-violet-600 dark:border-violet-700 dark:bg-violet-900/30 dark:text-violet-400'
-                      : 'border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
-                  }`}
-                  title="Strukturelemente anzeigen"
-                >
-                  Struktur
-                </button>
-              )}
-              <div className="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1" />
-            </>
-          )}
-
-          {/* Non-overlay controls */}
-          {editorMode !== 'overlay' && (
-            <>
-              {/* Empty field toggle */}
-              <button
-                onClick={() => setShowEmptyHighlight(v => !v)}
-                className={`px-2 py-1 text-xs border rounded transition-colors ${
-                  showEmptyHighlight
-                    ? 'border-red-300 bg-red-50 text-red-600 dark:border-red-700 dark:bg-red-900/30 dark:text-red-400'
-                    : 'border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
-                }`}
-                title="Leere Pflichtfelder markieren"
-              >
-                Leer
-              </button>
-
-              {/* Structure toggle */}
-              {(structureBoxes.length > 0 || structureGraphics.length > 0) && (
-                <button
-                  onClick={() => setShowStructure(v => !v)}
-                  className={`px-2 py-1 text-xs border rounded transition-colors ${
-                    showStructure
-                      ? 'border-violet-300 bg-violet-50 text-violet-600 dark:border-violet-700 dark:bg-violet-900/30 dark:text-violet-400'
-                      : 'border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
-                  }`}
-                  title="Strukturelemente anzeigen"
-                >
-                  Struktur
-                </button>
-              )}
-
-              <div className="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1" />
-
-              {/* Zoom controls */}
-              <button
-                onClick={() => setZoom(z => Math.max(50, z - 25))}
-                className="px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700"
-              >
-                &minus;
-              </button>
-              <span className="text-xs text-gray-500 w-10 text-center">{zoom}%</span>
-              <button
-                onClick={() => setZoom(z => Math.min(200, z + 25))}
-                className="px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700"
-              >
-                +
-              </button>
-              <button
-                onClick={() => setZoom(100)}
-                className="px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700"
-              >
-                Fit
-              </button>
-
-              <div className="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1" />
-            </>
-          )}
-
-          <button
-            onClick={saveReconstruction}
-            disabled={status === 'saving'}
-            className="px-4 py-1.5 text-xs bg-teal-600 text-white rounded-lg hover:bg-teal-700 disabled:opacity-50 transition-colors font-medium"
-          >
-            {status === 'saving' ? 'Speichert...' : 'Speichern'}
-          </button>
-        </div>
-      </div>
-
-      {/* Reconstruction canvas */}
-      {editorMode === 'overlay' ? (
-        renderOverlayMode()
-      ) : editorMode === 'editor' && sessionId ? (
+      {data.editorMode === 'overlay' ? (
+        <ReconstructionOverlay
+          cells={data.cells}
+          dewarpedUrl={dewarpedUrl}
+          imageNaturalSize={data.imageNaturalSize}
+          parentColumns={data.parentColumns}
+          parentRows={data.parentRows}
+          parentZones={data.parentZones}
+          structureBoxes={data.structureBoxes}
+          structureGraphics={data.structureGraphics}
+          showStructure={showStructure}
+          fontScale={fontScale}
+          globalBold={globalBold}
+          boxZonesPct={boxZonesPct}
+          cellWordPositions={cellWordPositions}
+          onTextChange={handleTextChange}
+          onKeyDown={handleKeyDown}
+          onResetCell={resetCell}
+          onImageNaturalSize={data.setImageNaturalSize}
+          getDisplayText={getDisplayText}
+          isEdited={isEdited}
+        />
+      ) : data.editorMode === 'editor' && sessionId ? (
         <FabricReconstructionCanvas
           sessionId={sessionId}
-          cells={gridCells}
+          cells={data.gridCells}
           onCellsChanged={handleFabricCellsChanged}
         />
       ) : (
-        <div className="border rounded-lg overflow-auto dark:border-gray-700 bg-gray-100 dark:bg-gray-900" style={{ maxHeight: '75vh' }}>
-          <div
-            ref={containerRef}
-            className="relative inline-block"
-            style={{ transform: `scale(${zoom / 100})`, transformOrigin: 'top left' }}
-          >
-            {/* Background image at reduced opacity */}
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img
-              ref={imageRef}
-              src={dewarpedUrl}
-              alt="Dewarped"
-              className="block"
-              style={{ opacity: 0.3 }}
-              onLoad={handleImageLoad}
-            />
-
-            {/* Structure elements (boxes, graphics) */}
-            {imageNaturalSize && renderStructureLayer(imageNaturalSize.w, imageNaturalSize.h)}
-
-            {/* Empty field markers */}
-            {showEmptyHighlight && cells
-              .filter(c => emptyCellIds.has(c.cellId))
-              .map(cell => (
-                <div
-                  key={`empty-${cell.cellId}`}
-                  className="absolute border-2 border-dashed border-red-400/60 rounded pointer-events-none"
-                  style={{
-                    left: `${cell.bboxPct.x}%`,
-                    top: `${cell.bboxPct.y}%`,
-                    width: `${cell.bboxPct.w}%`,
-                    height: `${cell.bboxPct.h}%`,
-                  }}
-                />
-              ))}
-
-            {/* Editable text fields at bbox positions */}
-            {cells.map((cell) => {
-              const displayText = getDisplayText(cell)
-              const edited = isEdited(cell)
-
-              return (
-                <div key={cell.cellId} className="absolute group" style={{
-                  left: `${cell.bboxPct.x}%`,
-                  top: `${cell.bboxPct.y}%`,
-                  width: `${cell.bboxPct.w}%`,
-                  height: `${cell.bboxPct.h}%`,
-                }}>
-                  <input
-                    id={`cell-${cell.cellId}`}
-                    type="text"
-                    value={displayText}
-                    onChange={(e) => handleTextChange(cell.cellId, e.target.value)}
-                    onKeyDown={(e) => handleKeyDown(e, cell.cellId)}
-                    className={`w-full h-full bg-transparent text-black dark:text-white border px-0.5 outline-none transition-colors ${
-                      colTypeColor(cell.colType)
-                    } ${edited ? 'border-green-500 bg-green-50/30 dark:bg-green-900/20' : ''}`}
-                    style={{
-                      fontSize: `${getFontSize(cell.bboxPct.h)}px`,
-                      lineHeight: '1',
-                    }}
-                    title={`${cell.cellId} (${cell.colType})`}
-                  />
-                  {/* Per-cell reset button (X) — only shown for edited cells on hover */}
-                  {edited && (
-                    <button
-                      onClick={() => resetCell(cell.cellId)}
-                      className="absolute -top-1 -right-1 w-4 h-4 bg-red-500 text-white rounded-full text-[9px] leading-none opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
-                      title="Zuruecksetzen"
-                    >
-                      &times;
-                    </button>
-                  )}
-                </div>
-              )
-            })}
-          </div>
-        </div>
+        <ReconstructionSimpleView
+          cells={data.cells}
+          dewarpedUrl={dewarpedUrl}
+          zoom={zoom}
+          imageNaturalSize={data.imageNaturalSize}
+          imageNaturalH={imageNaturalH}
+          emptyCellIds={emptyCellIds}
+          showEmptyHighlight={showEmptyHighlight}
+          structureBoxes={data.structureBoxes}
+          structureGraphics={data.structureGraphics}
+          showStructure={showStructure}
+          onTextChange={handleTextChange}
+          onKeyDown={handleKeyDown}
+          onResetCell={resetCell}
+          onImageLoad={handleImageLoad}
+          getDisplayText={getDisplayText}
+          isEdited={isEdited}
+          imageRef={imageRef}
+        />
       )}
 
-      {/* Bottom action */}
       <div className="flex justify-end">
         <button
-          onClick={() => {
-            if (changedCount > 0) {
-              saveReconstruction()
-            } else {
-              onNext()
-            }
-          }}
+          onClick={() => { changedCount > 0 ? saveReconstruction() : onNext() }}
           className="px-6 py-2.5 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors font-medium text-sm"
         >
           {changedCount > 0 ? 'Speichern & Weiter \u2192' : 'Weiter \u2192'}
diff --git a/admin-lehrer/components/ocr-pipeline/StepReconstructionTypes.ts b/admin-lehrer/components/ocr-pipeline/StepReconstructionTypes.ts
new file mode 100644
index 0000000..3384407
--- /dev/null
+++ b/admin-lehrer/components/ocr-pipeline/StepReconstructionTypes.ts
@@ -0,0 +1,82 @@
+// Types, constants and helpers for StepReconstruction
+
+export const KLAUSUR_API = '/klausur-api'
+
+export type EditorMode = 'simple' | 'editor' | 'overlay'
+
+export interface StepReconstructionProps {
+  sessionId: string | null
+  onNext: () => void
+}
+
+export interface EditableCell {
+  cellId: string
+  text: string
+  originalText: string
+  bboxPct: { x: number; y: number; w: number; h: number }
+  colType: string
+  rowIndex: number
+  colIndex: number
+}
+
+export type UndoAction = { cellId: string; oldText: string; newText: string }
+
+export type ReconstructionStatus = 'loading' | 'ready' | 'saving' | 'saved' | 'error'
+
+// --- PageRegion / RowItem / PageZone ---
+// These match the backend API response shapes used by overlay mode.
+
+export interface PageRegion {
+  x: number
+  width: number
+  type: string
+}
+
+export interface RowItem {
+  y: number
+}
+
+export interface PageZone {
+  zone_type: string
+  box?: { x: number; y: number; width: number; height: number }
+}
+
+// --- Helper functions ---
+
+export function colTypeColor(colType: string): string {
+  const colors: Record<string, string> = {
+    column_en: 'border-blue-400/40 focus:border-blue-500',
+    column_de: 'border-green-400/40 focus:border-green-500',
+    column_example: 'border-orange-400/40 focus:border-orange-500',
+    column_text: 'border-purple-400/40 focus:border-purple-500',
+    page_ref: 'border-cyan-400/40 focus:border-cyan-500',
+    column_marker: 'border-gray-400/40 focus:border-gray-500',
+  }
+  return colors[colType] || 'border-gray-400/40 focus:border-gray-500'
+}
+
+/**
+ * Clamp cell positions so they don't overlap with box zones.
+ * Sub-session cells (inside box) are not adjusted.
+ */
+export function adjustCellForBoxZones(
+  bboxPct: { x: number; y: number; w: number; h: number },
+  cellId: string,
+  boxZonesPct: { topPct: number; bottomPct: number }[],
+): { x: number; y: number; w: number; h: number } {
+  if (cellId.startsWith('sub_')) return bboxPct
+  if (boxZonesPct.length === 0) return bboxPct
+
+  const cellTop = bboxPct.y
+  const cellBottom = bboxPct.y + bboxPct.h
+  const boxMid = (boxZonesPct[0].topPct + boxZonesPct[0].bottomPct) / 2
+
+  for (const { topPct, bottomPct } of boxZonesPct) {
+    if (cellBottom <= topPct || cellTop >= bottomPct) continue
+    if (cellTop < boxMid) {
+      return { ...bboxPct, h: Math.max(0.5, topPct - cellTop) }
+    }
+    return { ...bboxPct, y: bottomPct, h: Math.max(0.5, cellBottom - bottomPct) }
+  }
+  return bboxPct
+}
diff --git a/admin-lehrer/components/ocr-pipeline/StepStructureDetection.tsx b/admin-lehrer/components/ocr-pipeline/StepStructureDetection.tsx
index 1d2cb63..17c7d2b 100644
--- a/admin-lehrer/components/ocr-pipeline/StepStructureDetection.tsx
+++ b/admin-lehrer/components/ocr-pipeline/StepStructureDetection.tsx
@@ -1,115 +1,17 @@
 'use client'
 
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import type { ExcludeRegion, StructureResult } from '@/app/(admin)/ai/ocr-kombi/types'
-
-const KLAUSUR_API = '/klausur-api'
+import { KLAUSUR_API, type DetectionMethod } from './structure-detection-utils'
+import { StructureImageComparison } from './StructureImageComparison'
+import { StructureResultDetails } from './StructureResultDetails'
+import { ExcludeRegionsList } from './ExcludeRegionsList'
 
 interface StepStructureDetectionProps {
   sessionId: string | null
   onNext: () => void
 }
 
-const COLOR_HEX: Record<string, string> = {
-  red: '#dc2626',
-  orange: '#ea580c',
-  yellow: '#ca8a04',
-  green: '#16a34a',
-  blue: '#2563eb',
-  purple: '#9333ea',
-}
-
-type DetectionMethod = 'auto' | 'opencv' | 'ppdoclayout'
-
-/** Color map for PP-DocLayout region classes */
-const DOCLAYOUT_CLASS_COLORS: Record<string, string> = {
-  table: '#2563eb',
-  figure: '#16a34a',
-  title: '#ea580c',
-  text: '#6b7280',
-  list: '#9333ea',
-  header: '#0ea5e9',
-  footer: '#64748b',
-  equation: '#dc2626',
-}
-
-const DOCLAYOUT_DEFAULT_COLOR = '#a3a3a3'
-
-function getDocLayoutColor(className: string): string {
-  return DOCLAYOUT_CLASS_COLORS[className.toLowerCase()] || DOCLAYOUT_DEFAULT_COLOR
-}
-
-/**
- * Convert a mouse event on the image container to image-pixel coordinates.
- * The image uses object-contain inside an A4-ratio container, so we need
- * to account for letterboxing.
- */
-function mouseToImageCoords(
-  e: React.MouseEvent,
-  containerEl: HTMLElement,
-  imgWidth: number,
-  imgHeight: number,
-): { x: number; y: number } | null {
-  const rect = containerEl.getBoundingClientRect()
-  const containerW = rect.width
-  const containerH = rect.height
-
-  // object-contain: image is scaled to fit, centered
-  const scaleX = containerW / imgWidth
-  const scaleY = containerH / imgHeight
-  const scale = Math.min(scaleX, scaleY)
-
-  const renderedW = imgWidth * scale
-  const renderedH = imgHeight * scale
-  const offsetX = (containerW - renderedW) / 2
-  const offsetY = (containerH - renderedH) / 2
-
-  const relX = e.clientX - rect.left - offsetX
-  const relY = e.clientY - rect.top - offsetY
-
-  if (relX < 0 || relY < 0 || relX > renderedW || relY > renderedH) {
-    return null
-  }
-
-  return {
-    x: Math.round(relX / scale),
-    y: Math.round(relY / scale),
-  }
-}
-
-/**
- * Convert image-pixel coordinates to container-relative percentages
- * for overlay positioning.
- */
-function imageToOverlayPct(
-  region: { x: number; y: number; w: number; h: number },
-  containerW: number,
-  containerH: number,
-  imgWidth: number,
-  imgHeight: number,
-): { left: string; top: string; width: string; height: string } {
-  const scaleX = containerW / imgWidth
-  const scaleY = containerH / imgHeight
-  const scale = Math.min(scaleX, scaleY)
-
-  const renderedW = imgWidth * scale
-  const renderedH = imgHeight * scale
-  const offsetX = (containerW - renderedW) / 2
-  const offsetY = (containerH - renderedH) / 2
-
-  const left = offsetX + region.x * scale
-  const top = offsetY + region.y * scale
-  const width = region.w * scale
-  const height = region.h * scale
-
-  return {
-    left: `${(left / containerW) * 100}%`,
-    top: `${(top / containerH) * 100}%`,
-    width: `${(width / containerW) * 100}%`,
-    height: `${(height / containerH) * 100}%`,
-  }
-}
-
 export function StepStructureDetection({ sessionId, onNext }: StepStructureDetectionProps) {
   const [result, setResult] = useState<StructureResult | null>(null)
   const [detecting, setDetecting] = useState(false)
@@ -118,45 +20,11 @@ export function StepStructureDetection({ sessionId, onNext }: StepStructureDetec
   const [overlayTs, setOverlayTs] = useState(0)
   const [detectionMethod, setDetectionMethod] = useState<DetectionMethod>('auto')
 
-  // Exclude region drawing state
+  // Exclude region state
   const [excludeRegions, setExcludeRegions] = useState<ExcludeRegion[]>([])
-  const [drawing, setDrawing] = useState(false)
-  const [drawStart, setDrawStart] = useState<{ x: number; y: number } | null>(null)
-  const [drawCurrent, setDrawCurrent] = useState<{ x: number; y: number } | null>(null)
   const [saving, setSaving] = useState(false)
   const [drawMode, setDrawMode] = useState(false)
 
-  const containerRef = useRef<HTMLDivElement>(null)
-  const overlayContainerRef = useRef<HTMLDivElement>(null)
-  const [containerSize, setContainerSize] = useState({ w: 0, h: 0 })
-  const [overlayContainerSize, setOverlayContainerSize] = useState({ w: 0, h: 0 })
-
-  // Track container size for overlay positioning
-  useEffect(() => {
-    const el = containerRef.current
-    if (!el) return
-    const obs = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        setContainerSize({ w: entry.contentRect.width, h: entry.contentRect.height })
-      }
-    })
-    obs.observe(el)
-    return () => obs.disconnect()
-  }, [])
-
-  // Track overlay container size for PP-DocLayout region overlays
-  useEffect(() => {
-    const el = overlayContainerRef.current
-    if (!el) return
-    const obs = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        setOverlayContainerSize({ w: entry.contentRect.width, h: entry.contentRect.height })
-      }
-    })
-    obs.observe(el)
-    return () => obs.disconnect()
-  }, [])
-
   // Auto-trigger detection on mount
   useEffect(() => {
     if (!sessionId || hasRun) return
@@ -229,48 +97,11 @@ export function StepStructureDetection({ sessionId, onNext }: StepStructureDetec
     }
   }, [sessionId])
 
-  // Mouse handlers for drawing exclude rectangles
-  const handleMouseDown = useCallback((e: React.MouseEvent) => {
-    if (!drawMode || !containerRef.current || !result) return
-    const coords = mouseToImageCoords(e, containerRef.current, result.image_width, result.image_height)
-    if (coords) {
-      setDrawing(true)
-      setDrawStart(coords)
-      setDrawCurrent(coords)
-    }
-  }, [drawMode, result])
-
-  const handleMouseMove = useCallback((e: React.MouseEvent) => {
-    if (!drawing || !containerRef.current || !result) return
-    const coords = mouseToImageCoords(e, containerRef.current, result.image_width, result.image_height)
-    if (coords) {
-      setDrawCurrent(coords)
-    }
-  }, [drawing, result])
-
-  const handleMouseUp = useCallback(() => {
-    if (!drawing || !drawStart || !drawCurrent) {
-      setDrawing(false)
-      return
-    }
-
-    const x = Math.min(drawStart.x, drawCurrent.x)
-    const y = Math.min(drawStart.y, drawCurrent.y)
-    const w = Math.abs(drawCurrent.x - drawStart.x)
-    const h = Math.abs(drawCurrent.y - drawStart.y)
-
-    // Minimum size to avoid accidental clicks
-    if (w > 10 && h > 10) {
-      const newRegion: ExcludeRegion = { x, y, w, h, label: `Bereich ${excludeRegions.length + 1}` }
-      const updated = [...excludeRegions, newRegion]
-      setExcludeRegions(updated)
-      saveExcludeRegions(updated)
-    }
-
-    setDrawing(false)
-    setDrawStart(null)
-    setDrawCurrent(null)
-  }, [drawing, drawStart, drawCurrent, excludeRegions, saveExcludeRegions])
+  const handleAddRegion = useCallback((region: ExcludeRegion) => {
+    const updated = [...excludeRegions, region]
+    setExcludeRegions(updated)
+    saveExcludeRegions(updated)
+  }, [excludeRegions, saveExcludeRegions])
 
   const handleDeleteRegion = useCallback(async (index: number) => {
     if (!sessionId) return
@@ -293,19 +124,6 @@ export function StepStructureDetection({ sessionId, onNext }: StepStructureDetec
     return <div className="text-sm text-gray-400">Keine Session ausgewaehlt.</div>
   }
 
-  const croppedUrl = `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/cropped`
-  const overlayUrl = `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/structure-overlay${overlayTs ? `?t=${overlayTs}` : ''}`
-
-  // Current drag rectangle in image coords
-  const dragRect = drawing && drawStart && drawCurrent
-    ? {
-        x: Math.min(drawStart.x, drawCurrent.x),
-        y: Math.min(drawStart.y, drawCurrent.y),
-        w: Math.abs(drawCurrent.x - drawStart.x),
-        h: Math.abs(drawCurrent.y - drawStart.y),
-      }
-    : null
-
   return (
     <div className="space-y-4">
       {/* Loading indicator */}
@@ -366,386 +184,27 @@ export function StepStructureDetection({ sessionId, onNext }: StepStructureDetec
       )}
 
       {/* Two-column image comparison */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-        {/* Left: Original document with exclude region drawing */}
-        <div className="space-y-2">
-          <div className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-            Original {excludeRegions.length > 0 && `(${excludeRegions.length} Ausschlussbereich${excludeRegions.length !== 1 ? 'e' : ''})`}
-          </div>
-          <div
-            ref={containerRef}
-            className={`relative bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden ${
-              drawMode ? 'cursor-crosshair' : ''
-            }`}
-            style={{ aspectRatio: '210/297' }}
-            onMouseDown={handleMouseDown}
-            onMouseMove={handleMouseMove}
-            onMouseUp={handleMouseUp}
-            onMouseLeave={() => {
-              if (drawing) {
-                handleMouseUp()
-              }
-            }}
-          >
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img
-              src={croppedUrl}
-              alt="Originaldokument"
-              className="w-full h-full object-contain pointer-events-none"
-              draggable={false}
-              onError={(e) => {
-                (e.target as HTMLImageElement).style.display = 'none'
-              }}
-            />
-
-            {/* Saved exclude regions overlay */}
-            {result && containerSize.w > 0 && excludeRegions.map((region, i) => {
-              const pos = imageToOverlayPct(region, containerSize.w, containerSize.h, result.image_width, result.image_height)
-              return (
-                <div
-                  key={i}
-                  className="absolute border-2 border-red-500 bg-red-500/20 group"
-                  style={pos}
-                >
-                  <div className="absolute -top-5 left-0 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                    <span className="text-[10px] bg-red-600 text-white px-1 rounded whitespace-nowrap">
-                      {region.label || `Bereich ${i + 1}`}
-                    </span>
-                    <button
-                      onClick={(e) => { e.stopPropagation(); handleDeleteRegion(i) }}
-                      className="w-4 h-4 bg-red-600 text-white rounded-full text-[10px] flex items-center justify-center hover:bg-red-700"
-                    >
-                      x
-                    </button>
-                  </div>
-                </div>
-              )
-            })}
-
-            {/* Current drag rectangle */}
-            {dragRect && result && containerSize.w > 0 && (() => {
-              const pos = imageToOverlayPct(dragRect, containerSize.w, containerSize.h, result.image_width, result.image_height)
-              return (
-                <div
-                  className="absolute border-2 border-red-500 border-dashed bg-red-500/15"
-                  style={pos}
-                />
-              )
-            })()}
-          </div>
-        </div>
-
-        {/* Right: Structure overlay */}
-        <div className="space-y-2">
-          <div className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-            Erkannte Struktur
-            {result?.detection_method && (
-              <span className="ml-2 text-[10px] font-normal normal-case">
-                ({result.detection_method === 'ppdoclayout' ? 'PP-DocLayout' : 'OpenCV'})
-              </span>
-            )}
-          </div>
-          <div
-            ref={overlayContainerRef}
-            className="relative bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden"
-            style={{ aspectRatio: '210/297' }}
-          >
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img
-              src={overlayUrl}
-              alt="Strukturerkennung"
-              className="w-full h-full object-contain"
-              onError={(e) => {
-                (e.target as HTMLImageElement).style.display = 'none'
-              }}
-            />
-
-            {/* PP-DocLayout region overlays with class colors and labels */}
-            {result?.layout_regions && overlayContainerSize.w > 0 && result.layout_regions.map((region, i) => {
-              const pos = imageToOverlayPct(region, overlayContainerSize.w, overlayContainerSize.h, result.image_width, result.image_height)
-              const color = getDocLayoutColor(region.class_name)
-              return (
-                <div
-                  key={`layout-${i}`}
-                  className="absolute border-2 pointer-events-none"
-                  style={{
-                    ...pos,
-                    borderColor: color,
-                    backgroundColor: `${color}18`,
-                  }}
-                >
-                  <span
-                    className="absolute -top-4 left-0 px-1 py-px text-[9px] font-medium text-white rounded-sm whitespace-nowrap leading-tight"
-                    style={{ backgroundColor: color }}
-                  >
-                    {region.class_name} {Math.round(region.confidence * 100)}%
-                  </span>
-                </div>
-              )
-            })}
-          </div>
-
-          {/* PP-DocLayout legend */}
-          {result?.layout_regions && result.layout_regions.length > 0 && (() => {
-            const usedClasses = [...new Set(result.layout_regions!.map((r) => r.class_name.toLowerCase()))]
-            return (
-              <div className="flex flex-wrap gap-x-3 gap-y-1 px-1">
-                {usedClasses.sort().map((cls) => (
-                  <span key={cls} className="inline-flex items-center gap-1 text-[10px] text-gray-500 dark:text-gray-400">
-                    <span
-                      className="w-2.5 h-2.5 rounded-sm border"
-                      style={{
-                        backgroundColor: `${getDocLayoutColor(cls)}30`,
-                        borderColor: getDocLayoutColor(cls),
-                      }}
-                    />
-                    {cls}
-                  </span>
-                ))}
-              </div>
-            )
-          })()}
-        </div>
-      </div>
+      {result && (
+        <StructureImageComparison
+          sessionId={sessionId}
+          result={result}
+          overlayTs={overlayTs}
+          excludeRegions={excludeRegions}
+          drawMode={drawMode}
+          onAddRegion={handleAddRegion}
+          onDeleteRegion={handleDeleteRegion}
+        />
+      )}
 
       {/* Exclude regions list */}
-      {excludeRegions.length > 0 && (
-        <div className="bg-red-50 dark:bg-red-900/10 rounded-lg border border-red-200 dark:border-red-800 p-3">
-          <h4 className="text-xs font-medium text-red-700 dark:text-red-400 mb-2">
-            Ausschlussbereiche ({excludeRegions.length}) — Woerter in diesen Bereichen werden nicht erkannt
-          </h4>
-          <div className="space-y-1">
-            {excludeRegions.map((region, i) => (
-              <div key={i} className="flex items-center gap-3 text-xs">
-                <span className="w-3 h-3 rounded-sm flex-shrink-0 bg-red-500/30 border border-red-500" />
-                <span className="text-red-700 dark:text-red-400 font-medium">
-                  {region.label || `Bereich ${i + 1}`}
-                </span>
-                <span className="font-mono text-red-600/70 dark:text-red-400/70">
-                  {region.w}x{region.h}px @ ({region.x}, {region.y})
-                </span>
-                <button
-                  onClick={() => handleDeleteRegion(i)}
-                  className="ml-auto text-red-500 hover:text-red-700 dark:hover:text-red-300"
-                >
-                  Entfernen
-                </button>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
+      <ExcludeRegionsList
+        regions={excludeRegions}
+        onDeleteRegion={handleDeleteRegion}
+      />
 
       {/* Result info */}
       {result && (
-        <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 space-y-3">
-          {/* Summary badges */}
-          <div className="flex flex-wrap items-center gap-3 text-sm">
-            <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-teal-50 dark:bg-teal-900/20 text-teal-700 dark:text-teal-400 text-xs font-medium">
-              {result.zones.length} Zone(n)
-            </span>
-            <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-400 text-xs font-medium">
-              {result.boxes.length} Box(en)
-            </span>
-            {result.layout_regions && result.layout_regions.length > 0 && (
-              <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-indigo-50 dark:bg-indigo-900/20 text-indigo-700 dark:text-indigo-400 text-xs font-medium">
-                {result.layout_regions.length} Layout-Region(en)
-              </span>
-            )}
-            {result.graphics && result.graphics.length > 0 && (
-              <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-purple-50 dark:bg-purple-900/20 text-purple-700 dark:text-purple-400 text-xs font-medium">
-                {result.graphics.length} Grafik(en)
-              </span>
-            )}
-            {result.has_words && (
-              <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-400 text-xs font-medium">
-                {result.word_count} Woerter
-              </span>
-            )}
-            {excludeRegions.length > 0 && (
-              <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400 text-xs font-medium">
-                {excludeRegions.length} Ausschluss
-              </span>
-            )}
-            {(result.border_ghosts_removed ?? 0) > 0 && (
-              <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400 text-xs font-medium">
-                {result.border_ghosts_removed} Rahmenlinien entfernt
-              </span>
-            )}
-            <span className="text-gray-400 text-xs ml-auto">
-              {result.detection_method && (
-                <span className="mr-1.5">
-                  {result.detection_method === 'ppdoclayout' ? 'PP-DocLayout' : 'OpenCV'} |
-                </span>
-              )}
-              {result.image_width}x{result.image_height}px | {result.duration_seconds}s
-            </span>
-          </div>
-
-          {/* Boxes detail */}
-          {result.boxes.length > 0 && (
-            <div>
-              <h4 className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-2">Erkannte Boxen</h4>
-              <div className="space-y-1.5">
-                {result.boxes.map((box, i) => (
-                  <div key={i} className="flex items-center gap-3 text-xs">
-                    <span
-                      className="w-3 h-3 rounded-sm flex-shrink-0 border border-gray-300 dark:border-gray-600"
-                      style={{ backgroundColor: box.bg_color_hex || '#6b7280' }}
-                    />
-                    <span className="text-gray-600 dark:text-gray-400">
-                      Box {i + 1}:
-                    </span>
-                    <span className="font-mono text-gray-500">
-                      {box.w}x{box.h}px @ ({box.x}, {box.y})
-                    </span>
-                    {box.bg_color_name && box.bg_color_name !== 'unknown' && box.bg_color_name !== 'white' && (
-                      <span className="px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-500">
-                        {box.bg_color_name}
-                      </span>
-                    )}
-                    {box.border_thickness > 0 && (
-                      <span className="text-gray-400">
-                        Rahmen: {box.border_thickness}px
-                      </span>
-                    )}
-                    <span className="text-gray-400">
-                      {Math.round(box.confidence * 100)}%
-                    </span>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-
-          {/* PP-DocLayout regions detail */}
-          {result.layout_regions && result.layout_regions.length > 0 && (
-            <div>
-              <h4 className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-2">
-                PP-DocLayout Regionen ({result.layout_regions.length})
-              </h4>
-              <div className="space-y-1.5">
-                {result.layout_regions.map((region, i) => {
-                  const color = getDocLayoutColor(region.class_name)
-                  return (
-                    <div key={i} className="flex items-center gap-3 text-xs">
-                      <span
-                        className="w-3 h-3 rounded-sm flex-shrink-0 border"
-                        style={{ backgroundColor: `${color}40`, borderColor: color }}
-                      />
-                      <span className="text-gray-600 dark:text-gray-400 font-medium min-w-[60px]">
-                        {region.class_name}
-                      </span>
-                      <span className="font-mono text-gray-500">
-                        {region.w}x{region.h}px @ ({region.x}, {region.y})
-                      </span>
-                      <span className="text-gray-400">
-                        {Math.round(region.confidence * 100)}%
-                      </span>
-                    </div>
-                  )
-                })}
-              </div>
-            </div>
-          )}
-
-          {/* Zones detail */}
-          <div>
-            <h4 className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-2">Seitenzonen</h4>
-            <div className="flex flex-wrap gap-2">
-              {result.zones.map((zone) => (
-                <span
-                  key={zone.index}
-                  className={`inline-flex items-center gap-1 px-2 py-1 rounded text-[11px] font-medium ${
-                    zone.zone_type === 'box'
-                      ? 'bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-300 border border-amber-200 dark:border-amber-800'
-                      : 'bg-gray-50 dark:bg-gray-800 text-gray-500 dark:text-gray-400 border border-gray-200 dark:border-gray-700'
-                  }`}
-                >
-                  {zone.zone_type === 'box' ? 'Box' : 'Inhalt'} {zone.index}
-                  <span className="text-[10px] font-normal opacity-70">
-                    ({zone.w}x{zone.h})
-                  </span>
-                </span>
-              ))}
-            </div>
-          </div>
-
-          {/* Graphics / visual elements */}
-          {result.graphics && result.graphics.length > 0 && (
-            <div>
-              <h4 className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-2">
-                Graphische Elemente ({result.graphics.length})
-              </h4>
-              {/* Summary by shape */}
-              {(() => {
-                const shapeCounts: Record<string, number> = {}
-                for (const g of result.graphics) {
-                  shapeCounts[g.shape] = (shapeCounts[g.shape] || 0) + 1
-                }
-                return (
-                  <div className="flex flex-wrap gap-2 mb-2">
-                    {Object.entries(shapeCounts)
-                      .sort(([, a], [, b]) => b - a)
-                      .map(([shape, count]) => (
-                        <span
-                          key={shape}
-                          className="inline-flex items-center gap-1 px-2 py-1 rounded text-[11px] bg-purple-50 dark:bg-purple-900/20 text-purple-700 dark:text-purple-300 border border-purple-200 dark:border-purple-800"
-                        >
-                          {shape === 'arrow' ? '→' : shape === 'circle' ? '●' : shape === 'line' ? '─' : shape === 'exclamation' ? '❗' : shape === 'dot' ? '•' : shape === 'illustration' ? '🖼' : '◆'}
-                          {' '}{shape} <span className="font-semibold">x{count}</span>
-                        </span>
-                      ))}
-                  </div>
-                )
-              })()}
-              {/* Individual graphics list */}
-              <div className="space-y-1.5 max-h-40 overflow-y-auto">
-                {result.graphics.map((g, i) => (
-                  <div key={i} className="flex items-center gap-3 text-xs">
-                    <span
-                      className="w-3 h-3 rounded-full flex-shrink-0 border border-gray-300 dark:border-gray-600"
-                      style={{ backgroundColor: g.color_hex || '#6b7280' }}
-                    />
-                    <span className="text-gray-600 dark:text-gray-400 font-medium min-w-[60px]">
-                      {g.shape}
-                    </span>
-                    <span className="font-mono text-gray-500">
-                      {g.w}x{g.h}px @ ({g.x}, {g.y})
-                    </span>
-                    <span className="text-gray-400">
-                      {g.color_name}
-                    </span>
-                    <span className="text-gray-400">
-                      {Math.round(g.confidence * 100)}%
-                    </span>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-
-          {/* Color regions */}
-          {Object.keys(result.color_pixel_counts).length > 0 && (
-            <div>
-              <h4 className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-2">Erkannte Farben</h4>
-              <div className="flex flex-wrap gap-2">
-                {Object.entries(result.color_pixel_counts)
-                  .sort(([, a], [, b]) => b - a)
-                  .map(([name, count]) => (
-                    <span key={name} className="inline-flex items-center gap-1.5 px-2 py-1 rounded text-[11px] bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
-                      <span
-                        className="w-2.5 h-2.5 rounded-full"
-                        style={{ backgroundColor: COLOR_HEX[name] || '#6b7280' }}
-                      />
-                      <span className="text-gray-600 dark:text-gray-400">{name}</span>
-                      <span className="text-gray-400 text-[10px]">{count.toLocaleString()}px</span>
-                    </span>
-                  ))}
-              </div>
-            </div>
-          )}
-        </div>
+        <StructureResultDetails result={result} excludeRegions={excludeRegions} />
       )}
 
       {/* Action buttons */}
diff --git a/admin-lehrer/components/ocr-pipeline/StepWordRecognition.tsx b/admin-lehrer/components/ocr-pipeline/StepWordRecognition.tsx
index d93e093..55ee647 100644
--- a/admin-lehrer/components/ocr-pipeline/StepWordRecognition.tsx
+++ b/admin-lehrer/components/ocr-pipeline/StepWordRecognition.tsx
@@ -2,44 +2,12 @@
 
 import { useCallback, useEffect, useRef, useState } from 'react'
 import type { GridResult, GridCell, WordEntry, WordGroundTruth } from '@/app/(admin)/ai/ocr-kombi/types'
+import { WordRecognitionOverview } from './WordRecognitionOverview'
+import { WordRecognitionLabeling } from './WordRecognitionLabeling'
+import { WordRecognitionControls } from './WordRecognitionControls'
 
 const KLAUSUR_API = '/klausur-api'
 
-/** Render text with \n as line breaks */
-function MultilineText({ text }: { text: string }) {
-  if (!text) return <span className="text-gray-300 dark:text-gray-600">&mdash;</span>
-  const lines = text.split('\n')
-  if (lines.length === 1) return <>{text}</>
-  return <>{lines.map((line, i) => (
-    <span key={i}>{line}{i < lines.length - 1 && <br />}</span>
-  ))}</>
-}
-
-/** Column type → human-readable header */
-function colTypeLabel(colType: string): string {
-  const labels: Record<string, string> = {
-    column_en: 'English',
-    column_de: 'Deutsch',
-    column_example: 'Example',
-    column_text: 'Text',
-    column_marker: 'Marker',
-    page_ref: 'Seite',
-  }
-  return labels[colType] || colType.replace('column_', '')
-}
-
-/** Column type → color class */
-function colTypeColor(colType: string): string {
-  const colors: Record<string, string> = {
-    column_en: 'text-blue-600 dark:text-blue-400',
-    column_de: 'text-green-600 dark:text-green-400',
-    column_example: 'text-orange-600 dark:text-orange-400',
-    column_text: 'text-purple-600 dark:text-purple-400',
-    column_marker: 'text-gray-500 dark:text-gray-400',
-  }
-  return colors[colType] || 'text-gray-600 dark:text-gray-400'
-}
-
 interface StepWordRecognitionProps {
   sessionId: string | null
   onNext: () => void
@@ -75,7 +43,7 @@ export function StepWordRecognition({ sessionId, onNext, goToStep, skipHealGaps
 
   useEffect(() => {
     if (!sessionId) return
-    // Always run fresh detection — word-lookup is fast (~0.03s)
+    // Always run fresh detection -- word-lookup is fast (~0.03s)
     // and avoids stale cached results from previous pipeline versions.
     runAutoDetection()
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -253,13 +221,6 @@ export function StepWordRecognition({ sessionId, onNext, goToStep, skipHealGaps
     }
   }, [sessionId, gtNotes, editedEntries, isVocab])
 
-  // Vocab mode: update entry field
-  const updateEntry = (index: number, field: 'english' | 'german' | 'example', value: string) => {
-    setEditedEntries(prev => prev.map((e, i) =>
-      i === index ? { ...e, [field]: value, status: 'edited' as const } : e
-    ))
-  }
-
   // Generic mode: update cell text
   const updateCell = (cellId: string, value: string) => {
     setEditedCells(prev => prev.map(c =>
@@ -267,6 +228,19 @@ export function StepWordRecognition({ sessionId, onNext, goToStep, skipHealGaps
     ))
   }
 
+  // Helper: get unique row indices from cells
+  const getUniqueRowCount = () => {
+    if (!editedCells.length) return 0
+    return new Set(editedCells.map(c => c.row_index)).size
+  }
+
+  // Helper: get cells for a given row index (by position in sorted unique rows)
+  const getRowCells = (rowPosition: number) => {
+    const uniqueRows = [...new Set(editedCells.map(c => c.row_index))].sort((a, b) => a - b)
+    const rowIdx = uniqueRows[rowPosition]
+    return editedCells.filter(c => c.row_index === rowIdx)
+  }
+
   // Step-through: confirm current row (always cell-based)
   const confirmEntry = () => {
     const rowCells = getRowCells(activeIndex)
@@ -293,19 +267,6 @@ export function StepWordRecognition({ sessionId, onNext, goToStep, skipHealGaps
     }
   }
 
-  // Helper: get unique row indices from cells
-  const getUniqueRowCount = () => {
-    if (!editedCells.length) return 0
-    return new Set(editedCells.map(c => c.row_index)).size
-  }
-
-  // Helper: get cells for a given row index (by position in sorted unique rows)
-  const getRowCells = (rowPosition: number) => {
-    const uniqueRows = [...new Set(editedCells.map(c => c.row_index))].sort((a, b) => a - b)
-    const rowIdx = uniqueRows[rowPosition]
-    return editedCells.filter(c => c.row_index === rowIdx)
-  }
-
   // Focus english input when active entry changes in labeling mode
   useEffect(() => {
     if (mode === 'labeling' && enRef.current) {
@@ -347,26 +308,6 @@ export function StepWordRecognition({ sessionId, onNext, goToStep, skipHealGaps
     )
   }
 
-  const overlayUrl = `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/words-overlay`
-  const dewarpedUrl = `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/cropped`
-
-  const confColor = (conf: number) => {
-    if (conf >= 70) return 'text-green-600 dark:text-green-400'
-    if (conf >= 50) return 'text-yellow-600 dark:text-yellow-400'
-    return 'text-red-600 dark:text-red-400'
-  }
-
-  const statusBadge = (status?: string) => {
-    const map: Record<string, string> = {
-      pending: 'bg-gray-100 dark:bg-gray-700 text-gray-500',
-      confirmed: 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400',
-      edited: 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400',
-      skipped: 'bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-400',
-    }
-    return map[status || 'pending'] || map.pending
-  }
-
-  const summary = gridResult?.summary
   const columnsUsed = gridResult?.columns_used || []
   const gridShape = gridResult?.grid_shape
 
@@ -377,7 +318,7 @@ export function StepWordRecognition({ sessionId, onNext, goToStep, skipHealGaps
   const confirmedCount = confirmedRowIds.size
   const totalCount = getUniqueRowCount()
 
-  // Group cells by row for generic table display
+  // Group cells by row (shared between overview and labeling)
   const cellsByRow: Map<number, GridCell[]> = new Map()
   for (const cell of editedCells) {
     const existing = cellsByRow.get(cell.row_index) || []
@@ -453,453 +394,59 @@ export function StepWordRecognition({ sessionId, onNext, goToStep, skipHealGaps
 
       {/* Overview mode */}
       {mode === 'overview' && (
-        <>
-          {/* Images: overlay vs clean */}
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
-                Mit Grid-Overlay
-              </div>
-              <div className="border rounded-lg overflow-hidden dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
-                {gridResult ? (
-                  // eslint-disable-next-line @next/next/no-img-element
-                  <img
-                    src={`${overlayUrl}?t=${Date.now()}`}
-                    alt="Wort-Overlay"
-                    className="w-full h-auto"
-                  />
-                ) : (
-                  <div className="aspect-[3/4] flex items-center justify-center text-gray-400 text-sm">
-                    {detecting ? 'Erkenne Woerter...' : 'Keine Daten'}
-                  </div>
-                )}
-              </div>
-            </div>
-            <div>
-              <div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
-                Entzerrtes Bild
-              </div>
-              <div className="border rounded-lg overflow-hidden dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
-                {/* eslint-disable-next-line @next/next/no-img-element */}
-                <img
-                  src={dewarpedUrl}
-                  alt="Entzerrt"
-                  className="w-full h-auto"
-                />
-              </div>
-            </div>
-          </div>
-
-          {/* Result summary (only after streaming completes) */}
-          {gridResult && summary && !detecting && (
-            <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 space-y-3">
-              <div className="flex items-center justify-between">
-                <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300">
-                  Ergebnis: {summary.non_empty_cells}/{summary.total_cells} Zellen mit Text
-                  ({sortedRowIndices.length} Zeilen, {columnsUsed.length} Spalten)
-                </h4>
-                <span className="text-xs text-gray-400">
-                  {gridResult.duration_seconds}s
-                </span>
-              </div>
-
-              {/* Summary badges */}
-              <div className="flex gap-2 flex-wrap">
-                <span className="px-2 py-0.5 rounded text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300">
-                  Zellen: {summary.non_empty_cells}/{summary.total_cells}
-                </span>
-                {columnsUsed.map((col, i) => (
-                  <span key={i} className={`px-2 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-700 ${colTypeColor(col.type)}`}>
-                    C{col.index}: {colTypeLabel(col.type)}
-                  </span>
-                ))}
-                {summary.low_confidence > 0 && (
-                  <span className="px-2 py-0.5 rounded text-xs font-medium bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300">
-                    Unsicher: {summary.low_confidence}
-                  </span>
-                )}
-              </div>
-
-              {/* Entry/Cell table */}
-              <div className="max-h-80 overflow-y-auto">
-                {/* Unified dynamic table — columns driven by columns_used */}
-                <table className="w-full text-xs">
-                  <thead className="sticky top-0 bg-white dark:bg-gray-800">
-                    <tr className="text-left text-gray-500 dark:text-gray-400 border-b dark:border-gray-700">
-                      <th className="py-1 pr-2 w-12">Zeile</th>
-                      {columnsUsed.map((col, i) => (
-                        <th key={i} className={`py-1 pr-2 ${colTypeColor(col.type)}`}>
-                          {colTypeLabel(col.type)}
-                        </th>
-                      ))}
-                      <th className="py-1 w-12 text-right">Conf</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {sortedRowIndices.map((rowIdx, posIdx) => {
-                      const rowCells = cellsByRow.get(rowIdx) || []
-                      const avgConf = rowCells.length
-                        ? Math.round(rowCells.reduce((s, c) => s + c.confidence, 0) / rowCells.length)
-                        : 0
-                      return (
-                        <tr
-                          key={rowIdx}
-                          className={`border-b dark:border-gray-700/50 ${
-                            posIdx === activeIndex ? 'bg-teal-50 dark:bg-teal-900/20' : ''
-                          }`}
-                          onClick={() => { setActiveIndex(posIdx); setMode('labeling') }}
-                        >
-                          <td className="py-1 pr-2 text-gray-400 font-mono text-[10px]">
-                            R{String(rowIdx).padStart(2, '0')}
-                          </td>
-                          {columnsUsed.map((col) => {
-                            const cell = rowCells.find(c => c.col_index === col.index)
-                            return (
-                              <td key={col.index} className="py-1 pr-2 font-mono text-gray-700 dark:text-gray-300 cursor-pointer">
-                                <MultilineText text={cell?.text || ''} />
-                              </td>
-                            )
-                          })}
-                          <td className={`py-1 text-right font-mono ${confColor(avgConf)}`}>
-                            {avgConf}%
-                          </td>
-                        </tr>
-                      )
-                    })}
-                  </tbody>
-                </table>
-                <div ref={tableEndRef} />
-              </div>
-            </div>
-          )}
-
-          {/* Streaming cell table (shown while detecting, before complete) */}
-          {detecting && editedCells.length > 0 && !gridResult?.summary?.non_empty_cells && (
-            <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 space-y-3">
-              <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300">
-                Live: {editedCells.length} Zellen erkannt...
-              </h4>
-              <div className="max-h-80 overflow-y-auto">
-                <table className="w-full text-xs">
-                  <thead className="sticky top-0 bg-white dark:bg-gray-800">
-                    <tr className="text-left text-gray-500 dark:text-gray-400 border-b dark:border-gray-700">
-                      <th className="py-1 pr-2 w-12">Zelle</th>
-                      {columnsUsed.map((col, i) => (
-                        <th key={i} className={`py-1 pr-2 ${colTypeColor(col.type)}`}>
-                          {colTypeLabel(col.type)}
-                        </th>
-                      ))}
-                      <th className="py-1 w-12 text-right">Conf</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {(() => {
-                      const liveByRow: Map<number, GridCell[]> = new Map()
-                      for (const cell of editedCells) {
-                        const existing = liveByRow.get(cell.row_index) || []
-                        existing.push(cell)
-                        liveByRow.set(cell.row_index, existing)
-                      }
-                      const liveSorted = [...liveByRow.keys()].sort((a, b) => a - b)
-                      return liveSorted.map(rowIdx => {
-                        const rowCells = liveByRow.get(rowIdx) || []
-                        const avgConf = rowCells.length
-                          ? Math.round(rowCells.reduce((s, c) => s + c.confidence, 0) / rowCells.length)
-                          : 0
-                        return (
-                          <tr key={rowIdx} className="border-b dark:border-gray-700/50 animate-fade-in">
-                            <td className="py-1 pr-2 text-gray-400 font-mono text-[10px]">
-                              R{String(rowIdx).padStart(2, '0')}
-                            </td>
-                            {columnsUsed.map((col) => {
-                              const cell = rowCells.find(c => c.col_index === col.index)
-                              return (
-                                <td key={col.index} className="py-1 pr-2 font-mono text-gray-700 dark:text-gray-300">
-                                  <MultilineText text={cell?.text || ''} />
-                                </td>
-                              )
-                            })}
-                            <td className={`py-1 text-right font-mono ${confColor(avgConf)}`}>
-                              {avgConf}%
-                            </td>
-                          </tr>
-                        )
-                      })
-                    })()}
-                  </tbody>
-                </table>
-                <div ref={tableEndRef} />
-              </div>
-            </div>
-          )}
-        </>
+        <WordRecognitionOverview
+          sessionId={sessionId}
+          gridResult={gridResult}
+          detecting={detecting}
+          editedCells={editedCells}
+          activeIndex={activeIndex}
+          setActiveIndex={setActiveIndex}
+          setMode={setMode}
+          tableEndRef={tableEndRef}
+        />
       )}
 
       {/* Labeling mode */}
-      {mode === 'labeling' && editedCells.length > 0 && (
-        <div className="grid grid-cols-3 gap-4">
-          {/* Left 2/3: Image with highlighted active row */}
-          <div className="col-span-2">
-            <div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
-              Zeile {activeIndex + 1} von {getUniqueRowCount()}
-            </div>
-            <div className="border rounded-lg overflow-hidden dark:border-gray-700 bg-gray-50 dark:bg-gray-900 relative">
-              {/* eslint-disable-next-line @next/next/no-img-element */}
-              <img
-                src={`${overlayUrl}?t=${Date.now()}`}
-                alt="Wort-Overlay"
-                className="w-full h-auto"
-              />
-              {/* Highlight overlay for active row */}
-              {(() => {
-                const rowCells = getRowCells(activeIndex)
-                return rowCells.map(cell => (
-                  <div
-                    key={cell.cell_id}
-                    className="absolute border-2 border-yellow-400 bg-yellow-400/10 pointer-events-none"
-                    style={{
-                      left: `${cell.bbox_pct.x}%`,
-                      top: `${cell.bbox_pct.y}%`,
-                      width: `${cell.bbox_pct.w}%`,
-                      height: `${cell.bbox_pct.h}%`,
-                    }}
-                  />
-                ))
-              })()}
-            </div>
-          </div>
-
-          {/* Right 1/3: Editable fields */}
-          <div className="space-y-3">
-            {/* Navigation */}
-            <div className="flex items-center justify-between">
-              <button
-                onClick={() => setActiveIndex(Math.max(0, activeIndex - 1))}
-                disabled={activeIndex === 0}
-                className="px-2 py-1 text-xs border rounded hover:bg-gray-50 dark:hover:bg-gray-700 dark:border-gray-600 disabled:opacity-30"
-              >
-                Zurueck
-              </button>
-              <span className="text-xs text-gray-500">
-                {activeIndex + 1} / {getUniqueRowCount()}
-              </span>
-              <button
-                onClick={() => setActiveIndex(Math.min(
-                  getUniqueRowCount() - 1,
-                  activeIndex + 1
-                ))}
-                disabled={activeIndex >= getUniqueRowCount() - 1}
-                className="px-2 py-1 text-xs border rounded hover:bg-gray-50 dark:hover:bg-gray-700 dark:border-gray-600 disabled:opacity-30"
-              >
-                Weiter
-              </button>
-            </div>
-
-            {/* Status badge */}
-            <div className="flex items-center gap-2">
-              {(() => {
-                const rowCells = getRowCells(activeIndex)
-                const avgConf = rowCells.length
-                  ? Math.round(rowCells.reduce((s, c) => s + c.confidence, 0) / rowCells.length)
-                  : 0
-                return (
-                  <span className={`text-xs font-mono ${confColor(avgConf)}`}>
-                    {avgConf}% Konfidenz
-                  </span>
-                )
-              })()}
-            </div>
-
-            {/* Editable fields — one per column, driven by columns_used */}
-            <div className="space-y-2">
-              {(() => {
-                const rowCells = getRowCells(activeIndex)
-                return columnsUsed.map((col, colIdx) => {
-                  const cell = rowCells.find(c => c.col_index === col.index)
-                  if (!cell) return null
-                  return (
-                    <div key={col.index}>
-                      <div className="flex items-center gap-1 mb-0.5">
-                        <label className={`text-[10px] font-medium ${colTypeColor(col.type)}`}>
-                          {colTypeLabel(col.type)}
-                        </label>
-                        <span className="text-[9px] text-gray-400">{cell.cell_id}</span>
-                      </div>
-                      {/* Cell crop */}
-                      <div className="border rounded dark:border-gray-700 overflow-hidden bg-white dark:bg-gray-900 h-10 relative mb-1">
-                        <CellCrop imageUrl={dewarpedUrl} bbox={cell.bbox_pct} />
-                      </div>
-                      <textarea
-                        ref={colIdx === 0 ? enRef as any : undefined}
-                        rows={Math.max(1, (cell.text || '').split('\n').length)}
-                        value={cell.text || ''}
-                        onChange={(e) => updateCell(cell.cell_id, e.target.value)}
-                        className="w-full px-2 py-1.5 text-sm border rounded dark:bg-gray-700 dark:border-gray-600 font-mono resize-none"
-                      />
-                    </div>
-                  )
-                })
-              })()}
-            </div>
-
-            {/* Action buttons */}
-            <div className="flex gap-2">
-              <button
-                onClick={confirmEntry}
-                className="flex-1 px-3 py-1.5 text-xs bg-green-600 text-white rounded-lg hover:bg-green-700 font-medium"
-              >
-                Bestaetigen (Enter)
-              </button>
-              <button
-                onClick={skipEntry}
-                className="px-3 py-1.5 text-xs border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 dark:border-gray-600"
-              >
-                Skip
-              </button>
-            </div>
-
-            {/* Shortcuts hint */}
-            <div className="text-[10px] text-gray-400 space-y-0.5">
-              <div>Enter = Bestaetigen & weiter</div>
-              <div>Ctrl+Down = Ueberspringen</div>
-              <div>Ctrl+Up = Zurueck</div>
-            </div>
-
-            {/* Row list (compact) */}
-            <div className="border-t dark:border-gray-700 pt-2 mt-2">
-              <div className="text-[10px] font-medium text-gray-500 dark:text-gray-400 mb-1">
-                Alle Zeilen
-              </div>
-              <div className="max-h-48 overflow-y-auto space-y-0.5">
-                {sortedRowIndices.map((rowIdx, posIdx) => {
-                  const rowCells = cellsByRow.get(rowIdx) || []
-                  const textParts = rowCells.filter(c => c.text).map(c => c.text.replace(/\n/g, ' '))
-                  return (
-                    <div
-                      key={rowIdx}
-                      onClick={() => setActiveIndex(posIdx)}
-                      className={`flex items-center gap-1 px-2 py-1 rounded text-[10px] cursor-pointer transition-colors ${
-                        posIdx === activeIndex
-                          ? 'bg-teal-50 dark:bg-teal-900/30 border border-teal-200 dark:border-teal-700'
-                          : 'hover:bg-gray-50 dark:hover:bg-gray-700/50'
-                      }`}
-                    >
-                      <span className="w-6 text-right text-gray-400 font-mono">R{String(rowIdx).padStart(2, '0')}</span>
-                      <span className="truncate text-gray-600 dark:text-gray-400 font-mono">
-                        {textParts.join(' \u2192 ') || '\u2014'}
-                      </span>
-                    </div>
-                  )
-                })}
-              </div>
-            </div>
-          </div>
-        </div>
+      {mode === 'labeling' && (
+        <WordRecognitionLabeling
+          sessionId={sessionId}
+          gridResult={gridResult}
+          editedCells={editedCells}
+          activeIndex={activeIndex}
+          setActiveIndex={setActiveIndex}
+          columnsUsed={columnsUsed}
+          getUniqueRowCount={getUniqueRowCount}
+          getRowCells={getRowCells}
+          updateCell={updateCell}
+          confirmEntry={confirmEntry}
+          skipEntry={skipEntry}
+          enRef={enRef}
+          cellsByRow={cellsByRow}
+          sortedRowIndices={sortedRowIndices}
+        />
       )}
 
       {/* Controls */}
       {gridResult && (
-        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 space-y-3">
-          <div className="flex items-center gap-3 flex-wrap">
-            {/* Grid method selector */}
-            <select
-              value={gridMethod}
-              onChange={(e) => setGridMethod(e.target.value as 'v2' | 'words_first')}
-              className="px-2 py-1.5 text-xs border rounded-lg dark:bg-gray-700 dark:border-gray-600"
-            >
-              <option value="v2">Standard (v2)</option>
-              <option value="words_first">Words-First</option>
-            </select>
-
-            {/* OCR Engine selector */}
-            <select
-              value={ocrEngine}
-              onChange={(e) => setOcrEngine(e.target.value as 'auto' | 'tesseract' | 'rapid' | 'paddle')}
-              className="px-2 py-1.5 text-xs border rounded-lg dark:bg-gray-700 dark:border-gray-600"
-            >
-              <option value="auto">Auto (RapidOCR wenn verfuegbar)</option>
-              <option value="rapid">RapidOCR (ONNX)</option>
-              <option value="tesseract">Tesseract</option>
-              <option value="paddle">PP-OCRv5 (lokal)</option>
-            </select>
-
-            {/* Pronunciation selector (only for vocab) */}
-            {isVocab && (
-              <select
-                value={pronunciation}
-                onChange={(e) => setPronunciation(e.target.value as 'british' | 'american')}
-                className="px-2 py-1.5 text-xs border rounded-lg dark:bg-gray-700 dark:border-gray-600"
-              >
-                <option value="british">Britisch (RP)</option>
-                <option value="american">Amerikanisch</option>
-              </select>
-            )}
-
-            <button
-              onClick={() => runAutoDetection()}
-              disabled={detecting}
-              className="px-3 py-1.5 text-xs border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 dark:border-gray-600 disabled:opacity-50"
-            >
-              Erneut erkennen
-            </button>
-
-            {/* Show which engine was used */}
-            {usedEngine && (
-              <span className={`px-2 py-0.5 rounded text-[10px] uppercase font-semibold ${
-                usedEngine === 'rapid' || usedEngine === 'paddle'
-                  ? 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300'
-                  : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400'
-              }`}>
-                {usedEngine === 'paddle' ? 'pp-ocrv5' : usedEngine}
-              </span>
-            )}
-
-            <button
-              onClick={() => goToStep(3)}
-              className="px-3 py-1.5 text-xs border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 dark:border-gray-600 text-orange-600 dark:text-orange-400 border-orange-300 dark:border-orange-700"
-            >
-              Zeilen korrigieren (Step 4)
-            </button>
-
-            <div className="flex-1" />
-
-            {/* Ground truth */}
-            {!gtSaved ? (
-              <>
-                <input
-                  type="text"
-                  placeholder="Notizen (optional)"
-                  value={gtNotes}
-                  onChange={(e) => setGtNotes(e.target.value)}
-                  className="px-2 py-1 text-xs border rounded dark:bg-gray-700 dark:border-gray-600 w-48"
-                />
-                <button
-                  onClick={() => handleGroundTruth(true)}
-                  className="px-3 py-1.5 text-xs bg-green-600 text-white rounded-lg hover:bg-green-700"
-                >
-                  Korrekt
-                </button>
-                <button
-                  onClick={() => handleGroundTruth(false)}
-                  className="px-3 py-1.5 text-xs bg-red-600 text-white rounded-lg hover:bg-red-700"
-                >
-                  Fehlerhaft
-                </button>
-              </>
-            ) : (
-              <span className="text-xs text-green-600 dark:text-green-400">
-                Ground Truth gespeichert
-              </span>
-            )}
-
-            <button
-              onClick={onNext}
-              className="px-4 py-1.5 text-xs bg-teal-600 text-white rounded-lg hover:bg-teal-700 font-medium"
-            >
-              Weiter
-            </button>
-          </div>
-        </div>
+        <WordRecognitionControls
+          gridResult={gridResult}
+          isVocab={!!isVocab}
+          detecting={detecting}
+          usedEngine={usedEngine}
+          ocrEngine={ocrEngine}
+          setOcrEngine={setOcrEngine}
+          pronunciation={pronunciation}
+          setPronunciation={setPronunciation}
+          gridMethod={gridMethod}
+          setGridMethod={setGridMethod}
+          gtNotes={gtNotes}
+          setGtNotes={setGtNotes}
+          gtSaved={gtSaved}
+          runAutoDetection={runAutoDetection}
+          handleGroundTruth={handleGroundTruth}
+          goToStep={goToStep}
+          onNext={onNext}
+        />
       )}
 
       {error && (
@@ -910,27 +457,3 @@ export function StepWordRecognition({ sessionId, onNext, goToStep, skipHealGaps
     </div>
   )
 }
-
-
-/**
- * CellCrop: Shows a cropped portion of the dewarped image based on percent bbox.
- * Uses CSS background-image + background-position for efficient cropping.
- */
-function CellCrop({ imageUrl, bbox }: { imageUrl: string; bbox: { x: number; y: number; w: number; h: number } }) {
-  // Scale factor: how much to zoom into the cell
-  const scaleX = 100 / bbox.w
-  const scaleY = 100 / bbox.h
-  const scale = Math.min(scaleX, scaleY, 8) // Cap zoom at 8x
-
-  return (
-    <div
-      className="w-full h-full"
-      style={{
-        backgroundImage: `url(${imageUrl})`,
-        backgroundSize: `${scale * 100}%`,
-        backgroundPosition: `${-bbox.x * scale}% ${-bbox.y * scale}%`,
-        backgroundRepeat: 'no-repeat',
-      }}
-    />
-  )
-}
diff --git a/admin-lehrer/components/ocr-pipeline/StructureImageComparison.tsx b/admin-lehrer/components/ocr-pipeline/StructureImageComparison.tsx
new file mode 100644
index 0000000..8e2cbea
--- /dev/null
+++ b/admin-lehrer/components/ocr-pipeline/StructureImageComparison.tsx
@@ -0,0 +1,264 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { ExcludeRegion, StructureResult } from '@/app/(admin)/ai/ocr-kombi/types'
+import {
+  KLAUSUR_API,
+  getDocLayoutColor,
+  imageToOverlayPct,
+  mouseToImageCoords,
+} from './structure-detection-utils'
+
+interface StructureImageComparisonProps {
+  sessionId: string
+  result: StructureResult
+  overlayTs: number
+  excludeRegions: ExcludeRegion[]
+  drawMode: boolean
+  onAddRegion: (region: ExcludeRegion) => void
+  onDeleteRegion: (index: number) => void
+}
+
+export function StructureImageComparison({
+  sessionId,
+  result,
+  overlayTs,
+  excludeRegions,
+  drawMode,
+  onAddRegion,
+  onDeleteRegion,
+}: StructureImageComparisonProps) {
+  // Exclude region drawing state
+  const [drawing, setDrawing] = useState(false)
+  const [drawStart, setDrawStart] = useState<{ x: number; y: number } | null>(null)
+  const [drawCurrent, setDrawCurrent] = useState<{ x: number; y: number } | null>(null)
+
+  const containerRef = useRef<HTMLDivElement>(null)
+  const overlayContainerRef = useRef<HTMLDivElement>(null)
+  const [containerSize, setContainerSize] = useState({ w: 0, h: 0 })
+  const [overlayContainerSize, setOverlayContainerSize] = useState({ w: 0, h: 0 })
+
+  // Track container size for overlay positioning
+  useEffect(() => {
+    const el = containerRef.current
+    if (!el) return
+    const obs = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setContainerSize({ w: entry.contentRect.width, h: entry.contentRect.height })
+      }
+    })
+    obs.observe(el)
+    return () => obs.disconnect()
+  }, [])
+
+  // Track overlay container size for PP-DocLayout region overlays
+  useEffect(() => {
+    const el = overlayContainerRef.current
+    if (!el) return
+    const obs = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setOverlayContainerSize({ w: entry.contentRect.width, h: entry.contentRect.height })
+      }
+    })
+    obs.observe(el)
+    return () => obs.disconnect()
+  }, [])
+
+  // Mouse handlers for drawing exclude rectangles
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    if (!drawMode || !containerRef.current) return
+    const coords = mouseToImageCoords(e, containerRef.current, result.image_width, result.image_height)
+    if (coords) {
+      setDrawing(true)
+      setDrawStart(coords)
+      setDrawCurrent(coords)
+    }
+  }, [drawMode, result])
+
+  const handleMouseMove = useCallback((e: React.MouseEvent) => {
+    if (!drawing || !containerRef.current) return
+    const coords = mouseToImageCoords(e, containerRef.current, result.image_width, result.image_height)
+    if (coords) {
+      setDrawCurrent(coords)
+    }
+  }, [drawing, result])
+
+  const handleMouseUp = useCallback(() => {
+    if (!drawing || !drawStart || !drawCurrent) {
+      setDrawing(false)
+      return
+    }
+
+    const x = Math.min(drawStart.x, drawCurrent.x)
+    const y = Math.min(drawStart.y, drawCurrent.y)
+    const w = Math.abs(drawCurrent.x - drawStart.x)
+    const h = Math.abs(drawCurrent.y - drawStart.y)
+
+    // Minimum size to avoid accidental clicks
+    if (w > 10 && h > 10) {
+      const newRegion: ExcludeRegion = { x, y, w, h, label: `Bereich ${excludeRegions.length + 1}` }
+      onAddRegion(newRegion)
+    }
+
+    setDrawing(false)
+    setDrawStart(null)
+    setDrawCurrent(null)
+  }, [drawing, drawStart, drawCurrent, excludeRegions.length, onAddRegion])
+
+  const croppedUrl = `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/cropped`
+  const overlayUrl = `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/structure-overlay${overlayTs ? `?t=${overlayTs}` : ''}`
+
+  // Current drag rectangle in image coords
+  const dragRect = drawing && drawStart && drawCurrent
+    ? {
+        x: Math.min(drawStart.x, drawCurrent.x),
+        y: Math.min(drawStart.y, drawCurrent.y),
+        w: Math.abs(drawCurrent.x - drawStart.x),
+        h: Math.abs(drawCurrent.y - drawStart.y),
+      }
+    : null
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+      {/* Left: Original document with exclude region drawing */}
+      <div className="space-y-2">
+        <div className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+          Original {excludeRegions.length > 0 && `(${excludeRegions.length} Ausschlussbereich${excludeRegions.length !== 1 ? 'e' : ''})`}
+        </div>
+        <div
+          ref={containerRef}
+          className={`relative bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden ${
+            drawMode ? 'cursor-crosshair' : ''
+          }`}
+          style={{ aspectRatio: '210/297' }}
+          onMouseDown={handleMouseDown}
+          onMouseMove={handleMouseMove}
+          onMouseUp={handleMouseUp}
+          onMouseLeave={() => {
+            if (drawing) {
+              handleMouseUp()
+            }
+          }}
+        >
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={croppedUrl}
+            alt="Originaldokument"
+            className="w-full h-full object-contain pointer-events-none"
+            draggable={false}
+            onError={(e) => {
+              (e.target as HTMLImageElement).style.display = 'none'
+            }}
+          />
+
+          {/* Saved exclude regions overlay */}
+          {containerSize.w > 0 && excludeRegions.map((region, i) => {
+            const pos = imageToOverlayPct(region, containerSize.w, containerSize.h, result.image_width, result.image_height)
+            return (
+              <div
+                key={i}
+                className="absolute border-2 border-red-500 bg-red-500/20 group"
+                style={pos}
+              >
+                <div className="absolute -top-5 left-0 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                  <span className="text-[10px] bg-red-600 text-white px-1 rounded whitespace-nowrap">
+                    {region.label || `Bereich ${i + 1}`}
+                  </span>
+                  <button
+                    onClick={(e) => { e.stopPropagation(); onDeleteRegion(i) }}
+                    className="w-4 h-4 bg-red-600 text-white rounded-full text-[10px] flex items-center justify-center hover:bg-red-700"
+                  >
+                    x
+                  </button>
+                </div>
+              </div>
+            )
+          })}
+
+          {/* Current drag rectangle */}
+          {dragRect && containerSize.w > 0 && (() => {
+            const pos = imageToOverlayPct(dragRect, containerSize.w, containerSize.h, result.image_width, result.image_height)
+            return (
+              <div
+                className="absolute border-2 border-red-500 border-dashed bg-red-500/15"
+                style={pos}
+              />
+            )
+          })()}
+        </div>
+      </div>
+
+      {/* Right: Structure overlay */}
+      <div className="space-y-2">
+        <div className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+          Erkannte Struktur
+          {result.detection_method && (
+            <span className="ml-2 text-[10px] font-normal normal-case">
+              ({result.detection_method === 'ppdoclayout' ? 'PP-DocLayout' : 'OpenCV'})
+            </span>
+          )}
+        </div>
+        <div
+          ref={overlayContainerRef}
+          className="relative bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden"
+          style={{ aspectRatio: '210/297' }}
+        >
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={overlayUrl}
+            alt="Strukturerkennung"
+            className="w-full h-full object-contain"
+            onError={(e) => {
+              (e.target as HTMLImageElement).style.display = 'none'
+            }}
+          />
+
+          {/* PP-DocLayout region overlays with class colors and labels */}
+          {result.layout_regions && overlayContainerSize.w > 0 && result.layout_regions.map((region, i) => {
+            const pos = imageToOverlayPct(region, overlayContainerSize.w, overlayContainerSize.h, result.image_width, result.image_height)
+            const color = getDocLayoutColor(region.class_name)
+            return (
+              <div
+                key={`layout-${i}`}
+                className="absolute border-2 pointer-events-none"
+                style={{
+                  ...pos,
+                  borderColor: color,
+                  backgroundColor: `${color}18`,
+                }}
+              >
+                <span
+                  className="absolute -top-4 left-0 px-1 py-px text-[9px] font-medium text-white rounded-sm whitespace-nowrap leading-tight"
+                  style={{ backgroundColor: color }}
+                >
+                  {region.class_name} {Math.round(region.confidence * 100)}%
+                </span>
+              </div>
+            )
+          })}
+        </div>
+
+        {/* PP-DocLayout legend */}
+        {result.layout_regions && result.layout_regions.length > 0 && (() => {
+          const usedClasses = [...new Set(result.layout_regions!.map((r) => r.class_name.toLowerCase()))]
+          return (
+            <div className="flex flex-wrap gap-x-3 gap-y-1 px-1">
+              {usedClasses.sort().map((cls) => (
+                <span key={cls} className="inline-flex items-center gap-1 text-[10px] text-gray-500 dark:text-gray-400">
+                  <span
+                    className="w-2.5 h-2.5 rounded-sm border"
+                    style={{
+                      backgroundColor: `${getDocLayoutColor(cls)}30`,
+                      borderColor: getDocLayoutColor(cls),
+                    }}
+                  />
+                  {cls}
+                </span>
+              ))}
+            </div>
+          )
+        })()}
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/components/ocr-pipeline/StructureLayer.tsx b/admin-lehrer/components/ocr-pipeline/StructureLayer.tsx
new file mode 100644
index 0000000..fa9225e
--- /dev/null
+++ b/admin-lehrer/components/ocr-pipeline/StructureLayer.tsx
@@ -0,0 +1,72 @@
+'use client'
+
+import type { StructureBox, StructureGraphic } from '@/app/(admin)/ai/ocr-kombi/types'
+
+interface StructureLayerProps {
+  boxes: StructureBox[]
+  graphics: StructureGraphic[]
+  imgW: number
+  imgH: number
+  show: boolean
+}
+
+/**
+ * Renders structure boxes and graphic elements as a positioned overlay.
+ * Used as a background layer in both simple and overlay reconstruction modes.
+ */
+export function StructureLayer({ boxes, graphics, imgW, imgH, show }: StructureLayerProps) {
+  if (!show) return null
+  if (boxes.length === 0 && graphics.length === 0) return null
+
+  return (
+    <>
+      {/* Structure boxes */}
+      {boxes.map((box, i) => {
+        const bgColor = box.bg_color_hex || '#6b7280'
+        return (
+          <div
+            key={`sbox-${i}`}
+            className="absolute pointer-events-none"
+            style={{
+              left: `${(box.x / imgW) * 100}%`,
+              top: `${(box.y / imgH) * 100}%`,
+              width: `${(box.w / imgW) * 100}%`,
+              height: `${(box.h / imgH) * 100}%`,
+              border: `${Math.max(1, box.border_thickness)}px solid ${bgColor}40`,
+              backgroundColor: `${bgColor}0a`,
+              borderRadius: '2px',
+            }}
+          />
+        )
+      })}
+
+      {/* Graphic elements */}
+      {graphics.map((g, i) => (
+        <div
+          key={`sgfx-${i}`}
+          className="absolute pointer-events-none"
+          style={{
+            left: `${(g.x / imgW) * 100}%`,
+            top: `${(g.y / imgH) * 100}%`,
+            width: `${(g.w / imgW) * 100}%`,
+            height: `${(g.h / imgH) * 100}%`,
+            border: `1px dashed ${g.color_hex}60`,
+            backgroundColor: `${g.color_hex}08`,
+            borderRadius: '2px',
+          }}
+        >
+          <span
+            className="absolute text-[8px] leading-none opacity-50"
+            style={{
+              top: '1px',
+              left: '2px',
+              color: g.color_hex,
+            }}
+          >
+            {g.shape === 'illustration' ? 'Illust' : 'Bild'}
+          </span>
+        </div>
+      ))}
+    </>
+  )
+}
diff --git a/admin-lehrer/components/ocr-pipeline/StructureResultDetails.tsx b/admin-lehrer/components/ocr-pipeline/StructureResultDetails.tsx
new file mode 100644
index 0000000..b095222
--- /dev/null
+++ b/admin-lehrer/components/ocr-pipeline/StructureResultDetails.tsx
@@ -0,0 +1,254 @@
+'use client'
+
+import type { ExcludeRegion, StructureResult } from '@/app/(admin)/ai/ocr-kombi/types'
+import { COLOR_HEX, getDocLayoutColor } from './structure-detection-utils'
+
+interface StructureResultDetailsProps {
+  result: StructureResult
+  excludeRegions: ExcludeRegion[]
+}
+
+export function StructureResultDetails({ result, excludeRegions }: StructureResultDetailsProps) {
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 space-y-3">
+      {/* Summary badges */}
+      <div className="flex flex-wrap items-center gap-3 text-sm">
+        <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-teal-50 dark:bg-teal-900/20 text-teal-700 dark:text-teal-400 text-xs font-medium">
+          {result.zones.length} Zone(n)
+        </span>
+        <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-400 text-xs font-medium">
+          {result.boxes.length} Box(en)
+        </span>
+        {result.layout_regions && result.layout_regions.length > 0 && (
+          <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-indigo-50 dark:bg-indigo-900/20 text-indigo-700 dark:text-indigo-400 text-xs font-medium">
+            {result.layout_regions.length} Layout-Region(en)
+          </span>
+        )}
+        {result.graphics && result.graphics.length > 0 && (
+          <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-purple-50 dark:bg-purple-900/20 text-purple-700 dark:text-purple-400 text-xs font-medium">
+            {result.graphics.length} Grafik(en)
+          </span>
+        )}
+        {result.has_words && (
+          <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-400 text-xs font-medium">
+            {result.word_count} Woerter
+          </span>
+        )}
+        {excludeRegions.length > 0 && (
+          <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400 text-xs font-medium">
+            {excludeRegions.length} Ausschluss
+          </span>
+        )}
+        {(result.border_ghosts_removed ?? 0) > 0 && (
+          <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400 text-xs font-medium">
+            {result.border_ghosts_removed} Rahmenlinien entfernt
+          </span>
+        )}
+        <span className="text-gray-400 text-xs ml-auto">
+          {result.detection_method && (
+            <span className="mr-1.5">
+              {result.detection_method === 'ppdoclayout' ? 'PP-DocLayout' : 'OpenCV'} |
+            </span>
+          )}
+          {result.image_width}x{result.image_height}px | {result.duration_seconds}s
+        </span>
+      </div>
+
+      {/* Boxes detail */}
+      {result.boxes.length > 0 && (
+        <BoxesDetail boxes={result.boxes} />
+      )}
+
+      {/* PP-DocLayout regions detail */}
+      {result.layout_regions && result.layout_regions.length > 0 && (
+        <LayoutRegionsDetail regions={result.layout_regions} />
+      )}
+
+      {/* Zones detail */}
+      <ZonesDetail zones={result.zones} />
+
+      {/* Graphics / visual elements */}
+      {result.graphics && result.graphics.length > 0 && (
+        <GraphicsDetail graphics={result.graphics} />
+      )}
+
+      {/* Color regions */}
+      {Object.keys(result.color_pixel_counts).length > 0 && (
+        <ColorRegionsDetail colorPixelCounts={result.color_pixel_counts} />
+      )}
+    </div>
+  )
+}
+
+/* ------------------------------------------------------------------ */
+/* Sub-sections                                                       */
+/* ------------------------------------------------------------------ */
+
+function BoxesDetail({ boxes }: { boxes: StructureResult['boxes'] }) {
+  return (
+    <div>
+      <h4 className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-2">Erkannte Boxen</h4>
+      <div className="space-y-1.5">
+        {boxes.map((box, i) => (
+          <div key={i} className="flex items-center gap-3 text-xs">
+            <span
+              className="w-3 h-3 rounded-sm flex-shrink-0 border border-gray-300 dark:border-gray-600"
+              style={{ backgroundColor: box.bg_color_hex || '#6b7280' }}
+            />
+            <span className="text-gray-600 dark:text-gray-400">
+              Box {i + 1}:
+            </span>
+            <span className="font-mono text-gray-500">
+              {box.w}x{box.h}px @ ({box.x}, {box.y})
+            </span>
+            {box.bg_color_name && box.bg_color_name !== 'unknown' && box.bg_color_name !== 'white' && (
+              <span className="px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-500">
+                {box.bg_color_name}
+              </span>
+            )}
+            {box.border_thickness > 0 && (
+              <span className="text-gray-400">
+                Rahmen: {box.border_thickness}px
+              </span>
+            )}
+            <span className="text-gray-400">
+              {Math.round(box.confidence * 100)}%
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function LayoutRegionsDetail({ regions }: { regions: NonNullable<StructureResult['layout_regions']> }) {
+  return (
+    <div>
+      <h4 className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-2">
+        PP-DocLayout Regionen ({regions.length})
+      </h4>
+      <div className="space-y-1.5">
+        {regions.map((region, i) => {
+          const color = getDocLayoutColor(region.class_name)
+          return (
+            <div key={i} className="flex items-center gap-3 text-xs">
+              <span
+                className="w-3 h-3 rounded-sm flex-shrink-0 border"
+                style={{ backgroundColor: `${color}40`, borderColor: color }}
+              />
+              <span className="text-gray-600 dark:text-gray-400 font-medium min-w-[60px]">
+                {region.class_name}
+              </span>
+              <span className="font-mono text-gray-500">
+                {region.w}x{region.h}px @ ({region.x}, {region.y})
+              </span>
+              <span className="text-gray-400">
+                {Math.round(region.confidence * 100)}%
+              </span>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+function ZonesDetail({ zones }: { zones: StructureResult['zones'] }) {
+  return (
+    <div>
+      <h4 className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-2">Seitenzonen</h4>
+      <div className="flex flex-wrap gap-2">
+        {zones.map((zone) => (
+          <span
+            key={zone.index}
+            className={`inline-flex items-center gap-1 px-2 py-1 rounded text-[11px] font-medium ${
+              zone.zone_type === 'box'
+                ? 'bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-300 border border-amber-200 dark:border-amber-800'
+                : 'bg-gray-50 dark:bg-gray-800 text-gray-500 dark:text-gray-400 border border-gray-200 dark:border-gray-700'
+            }`}
+          >
+            {zone.zone_type === 'box' ? 'Box' : 'Inhalt'} {zone.index}
+            <span className="text-[10px] font-normal opacity-70">
+              ({zone.w}x{zone.h})
+            </span>
+          </span>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function GraphicsDetail({ graphics }: { graphics: StructureResult['graphics'] }) {
+  // Summary by shape
+  const shapeCounts: Record<string, number> = {}
+  for (const g of graphics) {
+    shapeCounts[g.shape] = (shapeCounts[g.shape] || 0) + 1
+  }
+
+  return (
+    <div>
+      <h4 className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-2">
+        Graphische Elemente ({graphics.length})
+      </h4>
+      {/* Summary by shape */}
+      <div className="flex flex-wrap gap-2 mb-2">
+        {Object.entries(shapeCounts)
+          .sort(([, a], [, b]) => b - a)
+          .map(([shape, count]) => (
+            <span
+              key={shape}
+              className="inline-flex items-center gap-1 px-2 py-1 rounded text-[11px] bg-purple-50 dark:bg-purple-900/20 text-purple-700 dark:text-purple-300 border border-purple-200 dark:border-purple-800"
+            >
+              {shape === 'arrow' ? '\u2192' : shape === 'circle' ? '\u25CF' : shape === 'line' ? '\u2500' : shape === 'exclamation' ? '\u2757' : shape === 'dot' ? '\u2022' : shape === 'illustration' ? '\uD83D\uDDBC' : '\u25C6'}
+              {' '}{shape} <span className="font-semibold">x{count}</span>
+            </span>
+          ))}
+      </div>
+      {/* Individual graphics list */}
+      <div className="space-y-1.5 max-h-40 overflow-y-auto">
+        {graphics.map((g, i) => (
+          <div key={i} className="flex items-center gap-3 text-xs">
+            <span
+              className="w-3 h-3 rounded-full flex-shrink-0 border border-gray-300 dark:border-gray-600"
+              style={{ backgroundColor: g.color_hex || '#6b7280' }}
+            />
+            <span className="text-gray-600 dark:text-gray-400 font-medium min-w-[60px]">
+              {g.shape}
+            </span>
+            <span className="font-mono text-gray-500">
+              {g.w}x{g.h}px @ ({g.x}, {g.y})
+            </span>
+            <span className="text-gray-400">
+              {g.color_name}
+            </span>
+            <span className="text-gray-400">
+              {Math.round(g.confidence * 100)}%
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function ColorRegionsDetail({ colorPixelCounts }: { colorPixelCounts: Record<string, number> }) {
+  return (
+    <div>
+      <h4 className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-2">Erkannte Farben</h4>
+      <div className="flex flex-wrap gap-2">
+        {Object.entries(colorPixelCounts)
+          .sort(([, a], [, b]) => b - a)
+          .map(([name, count]) => (
+            <span key={name} className="inline-flex items-center gap-1.5 px-2 py-1 rounded text-[11px] bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
+              <span
+                className="w-2.5 h-2.5 rounded-full"
+                style={{ backgroundColor: COLOR_HEX[name] || '#6b7280' }}
+              />
+              <span className="text-gray-600 dark:text-gray-400">{name}</span>
+              <span className="text-gray-400 text-[10px]">{count.toLocaleString()}px</span>
+            </span>
+          ))}
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/components/ocr-pipeline/ValidationPanel.tsx b/admin-lehrer/components/ocr-pipeline/ValidationPanel.tsx
new file mode 100644
index 0000000..0bbb3a9
--- /dev/null
+++ b/admin-lehrer/components/ocr-pipeline/ValidationPanel.tsx
@@ -0,0 +1,105 @@
+'use client'
+
+import type { GroundTruthStatus } from './ground-truth-types'
+
+interface ValidationPanelProps {
+  notes: string
+  score: number | null
+  status: GroundTruthStatus
+  isGroundTruth: boolean
+  gtSaving: boolean
+  gtMessage: string
+  onNotesChange: (notes: string) => void
+  onScoreChange: (score: number | null) => void
+  onSave: () => Promise<void>
+  onMarkGroundTruth: () => Promise<void>
+  onFinish: () => void
+}
+
+export function ValidationPanel({
+  notes, score, status, isGroundTruth, gtSaving, gtMessage,
+  onNotesChange, onScoreChange, onSave, onMarkGroundTruth, onFinish,
+}: ValidationPanelProps) {
+  return (
+    <>
+      {/* Notes and score */}
+      <div className="border rounded-lg dark:border-gray-700 p-4 space-y-3">
+        <div className="flex items-center gap-4">
+          <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
+            Bewertung (1-10):
+          </label>
+          <input
+            type="number"
+            min={1}
+            max={10}
+            value={score ?? ''}
+            onChange={e => onScoreChange(e.target.value ? parseInt(e.target.value) : null)}
+            className="w-20 text-sm px-2 py-1 border rounded dark:border-gray-600 dark:bg-gray-700 dark:text-white"
+          />
+          <div className="flex gap-1">
+            {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(v => (
+              <button
+                key={v}
+                onClick={() => onScoreChange(v)}
+                className={`w-7 h-7 text-xs rounded ${score === v ? 'bg-teal-600 text-white' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'}`}
+              >
+                {v}
+              </button>
+            ))}
+          </div>
+        </div>
+        <div>
+          <label className="text-sm font-medium text-gray-700 dark:text-gray-300 block mb-1">
+            Notizen:
+          </label>
+          <textarea
+            value={notes}
+            onChange={e => onNotesChange(e.target.value)}
+            rows={3}
+            placeholder="Anmerkungen zur Qualitaet der Rekonstruktion..."
+            className="w-full text-sm px-3 py-2 border rounded dark:border-gray-600 dark:bg-gray-700 dark:text-white"
+          />
+        </div>
+      </div>
+
+      {/* Actions -- sticky bottom bar */}
+      <div className="sticky bottom-0 bg-white dark:bg-gray-900 border-t dark:border-gray-700 py-3 px-1 -mx-1 flex items-center justify-between">
+        <div className="text-sm text-gray-500 dark:text-gray-400">
+          {status === 'saved' && <span className="text-green-600 dark:text-green-400">Validierung gespeichert</span>}
+          {status === 'saving' && <span>Speichere...</span>}
+          {gtMessage && (
+            <span className={gtMessage.includes('fehlgeschlagen') ? 'text-red-500' : 'text-amber-600 dark:text-amber-400'}>
+              {gtMessage}
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-3">
+          <button
+            onClick={onMarkGroundTruth}
+            disabled={gtSaving || status === 'saving'}
+            className="px-4 py-2 text-sm bg-amber-600 text-white rounded hover:bg-amber-700 disabled:opacity-50"
+          >
+            {gtSaving ? 'Speichere...' : isGroundTruth ? 'Ground Truth aktualisieren' : 'Als Ground Truth markieren'}
+          </button>
+          <button
+            onClick={onSave}
+            disabled={status === 'saving'}
+            className="px-4 py-2 text-sm bg-gray-600 text-white rounded hover:bg-gray-700 disabled:opacity-50"
+          >
+            Speichern
+          </button>
+          <button
+            onClick={async () => {
+              await onSave()
+              onFinish()
+            }}
+            disabled={status === 'saving'}
+            className="px-4 py-2 text-sm bg-teal-600 text-white rounded hover:bg-teal-700 disabled:opacity-50"
+          >
+            Abschliessen
+          </button>
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/admin-lehrer/components/ocr-pipeline/WordRecognitionControls.tsx b/admin-lehrer/components/ocr-pipeline/WordRecognitionControls.tsx
new file mode 100644
index 0000000..f0b1d8b
--- /dev/null
+++ b/admin-lehrer/components/ocr-pipeline/WordRecognitionControls.tsx
@@ -0,0 +1,147 @@
+'use client'
+
+import type { GridResult } from '@/app/(admin)/ai/ocr-kombi/types'
+
+interface WordRecognitionControlsProps {
+  gridResult: GridResult
+  isVocab: boolean
+  detecting: boolean
+  usedEngine: string
+  ocrEngine: string
+  setOcrEngine: (engine: 'auto' | 'tesseract' | 'rapid' | 'paddle') => void
+  pronunciation: 'british' | 'american'
+  setPronunciation: (p: 'british' | 'american') => void
+  gridMethod: 'v2' | 'words_first'
+  setGridMethod: (m: 'v2' | 'words_first') => void
+  gtNotes: string
+  setGtNotes: (notes: string) => void
+  gtSaved: boolean
+  runAutoDetection: () => void
+  handleGroundTruth: (isCorrect: boolean) => void
+  goToStep: (step: number) => void
+  onNext: () => void
+}
+
+export function WordRecognitionControls({
+  gridResult,
+  isVocab,
+  detecting,
+  usedEngine,
+  ocrEngine,
+  setOcrEngine,
+  pronunciation,
+  setPronunciation,
+  gridMethod,
+  setGridMethod,
+  gtNotes,
+  setGtNotes,
+  gtSaved,
+  runAutoDetection,
+  handleGroundTruth,
+  goToStep,
+  onNext,
+}: WordRecognitionControlsProps) {
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 space-y-3">
+      <div className="flex items-center gap-3 flex-wrap">
+        {/* Grid method selector */}
+        <select
+          value={gridMethod}
+          onChange={(e) => setGridMethod(e.target.value as 'v2' | 'words_first')}
+          className="px-2 py-1.5 text-xs border rounded-lg dark:bg-gray-700 dark:border-gray-600"
+        >
+          <option value="v2">Standard (v2)</option>
+          <option value="words_first">Words-First</option>
+        </select>
+
+        {/* OCR Engine selector */}
+        <select
+          value={ocrEngine}
+          onChange={(e) => setOcrEngine(e.target.value as 'auto' | 'tesseract' | 'rapid' | 'paddle')}
+          className="px-2 py-1.5 text-xs border rounded-lg dark:bg-gray-700 dark:border-gray-600"
+        >
+          <option value="auto">Auto (RapidOCR wenn verfuegbar)</option>
+          <option value="rapid">RapidOCR (ONNX)</option>
+          <option value="tesseract">Tesseract</option>
+          <option value="paddle">PP-OCRv5 (lokal)</option>
+        </select>
+
+        {/* Pronunciation selector (only for vocab) */}
+        {isVocab && (
+          <select
+            value={pronunciation}
+            onChange={(e) => setPronunciation(e.target.value as 'british' | 'american')}
+            className="px-2 py-1.5 text-xs border rounded-lg dark:bg-gray-700 dark:border-gray-600"
+          >
+            <option value="british">Britisch (RP)</option>
+            <option value="american">Amerikanisch</option>
+          </select>
+        )}
+
+        <button
+          onClick={() => runAutoDetection()}
+          disabled={detecting}
+          className="px-3 py-1.5 text-xs border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 dark:border-gray-600 disabled:opacity-50"
+        >
+          Erneut erkennen
+        </button>
+
+        {/* Show which engine was used */}
+        {usedEngine && (
+          <span className={`px-2 py-0.5 rounded text-[10px] uppercase font-semibold ${
+            usedEngine === 'rapid' || usedEngine === 'paddle'
+              ? 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300'
+              : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400'
+          }`}>
+            {usedEngine === 'paddle' ? 'pp-ocrv5' : usedEngine}
+          </span>
+        )}
+
+        <button
+          onClick={() => goToStep(3)}
+          className="px-3 py-1.5 text-xs border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 dark:border-gray-600 text-orange-600 dark:text-orange-400 border-orange-300 dark:border-orange-700"
+        >
+          Zeilen korrigieren (Step 4)
+        </button>
+
+        <div className="flex-1" />
+
+        {/* Ground truth */}
+        {!gtSaved ? (
+          <>
+            <input
+              type="text"
+              placeholder="Notizen (optional)"
+              value={gtNotes}
+              onChange={(e) => setGtNotes(e.target.value)}
+              className="px-2 py-1 text-xs border rounded dark:bg-gray-700 dark:border-gray-600 w-48"
+            />
+            <button
+              onClick={() => handleGroundTruth(true)}
+              className="px-3 py-1.5 text-xs bg-green-600 text-white rounded-lg hover:bg-green-700"
+            >
+              Korrekt
+            </button>
+            <button
+              onClick={() => handleGroundTruth(false)}
+              className="px-3 py-1.5 text-xs bg-red-600 text-white rounded-lg hover:bg-red-700"
+            >
+              Fehlerhaft
+            </button>
+          </>
+        ) : (
+          <span className="text-xs text-green-600 dark:text-green-400">
+            Ground Truth gespeichert
+          </span>
+        )}
+
+        <button
+          onClick={onNext}
+          className="px-4 py-1.5 text-xs bg-teal-600 text-white rounded-lg hover:bg-teal-700 font-medium"
+        >
+          Weiter
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/components/ocr-pipeline/WordRecognitionLabeling.tsx b/admin-lehrer/components/ocr-pipeline/WordRecognitionLabeling.tsx
new file mode 100644
index 0000000..bab8552
--- /dev/null
+++ b/admin-lehrer/components/ocr-pipeline/WordRecognitionLabeling.tsx
@@ -0,0 +1,208 @@
+'use client'
+
+import { RefObject } from 'react'
+import type { GridResult, GridCell } from '@/app/(admin)/ai/ocr-kombi/types'
+import { colTypeLabel, colTypeColor, confColor, CellCrop } from './WordRecognitionUtils'
+
+const KLAUSUR_API = '/klausur-api'
+
+interface WordRecognitionLabelingProps {
+  sessionId: string
+  gridResult: GridResult | null
+  editedCells: GridCell[]
+  activeIndex: number
+  setActiveIndex: (idx: number) => void
+  columnsUsed: GridResult['columns_used']
+  getUniqueRowCount: () => number
+  getRowCells: (rowPosition: number) => GridCell[]
+  updateCell: (cellId: string, value: string) => void
+  confirmEntry: () => void
+  skipEntry: () => void
+  enRef: RefObject<HTMLInputElement | null>
+  /** cellsByRow map + sorted row indices, pre-computed by parent */
+  cellsByRow: Map<number, GridCell[]>
+  sortedRowIndices: number[]
+}
+
+export function WordRecognitionLabeling({
+  sessionId,
+  gridResult,
+  editedCells,
+  activeIndex,
+  setActiveIndex,
+  columnsUsed,
+  getUniqueRowCount,
+  getRowCells,
+  updateCell,
+  confirmEntry,
+  skipEntry,
+  enRef,
+  cellsByRow,
+  sortedRowIndices,
+}: WordRecognitionLabelingProps) {
+  if (editedCells.length === 0) return null
+
+  const overlayUrl = `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/words-overlay`
+  const dewarpedUrl = `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/cropped`
+
+  return (
+    <div className="grid grid-cols-3 gap-4">
+      {/* Left 2/3: Image with highlighted active row */}
+      <div className="col-span-2">
+        <div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
+          Zeile {activeIndex + 1} von {getUniqueRowCount()}
+        </div>
+        <div className="border rounded-lg overflow-hidden dark:border-gray-700 bg-gray-50 dark:bg-gray-900 relative">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={`${overlayUrl}?t=${Date.now()}`}
+            alt="Wort-Overlay"
+            className="w-full h-auto"
+          />
+          {/* Highlight overlay for active row */}
+          {(() => {
+            const rowCells = getRowCells(activeIndex)
+            return rowCells.map(cell => (
+              <div
+                key={cell.cell_id}
+                className="absolute border-2 border-yellow-400 bg-yellow-400/10 pointer-events-none"
+                style={{
+                  left: `${cell.bbox_pct.x}%`,
+                  top: `${cell.bbox_pct.y}%`,
+                  width: `${cell.bbox_pct.w}%`,
+                  height: `${cell.bbox_pct.h}%`,
+                }}
+              />
+            ))
+          })()}
+        </div>
+      </div>
+
+      {/* Right 1/3: Editable fields */}
+      <div className="space-y-3">
+        {/* Navigation */}
+        <div className="flex items-center justify-between">
+          <button
+            onClick={() => setActiveIndex(Math.max(0, activeIndex - 1))}
+            disabled={activeIndex === 0}
+            className="px-2 py-1 text-xs border rounded hover:bg-gray-50 dark:hover:bg-gray-700 dark:border-gray-600 disabled:opacity-30"
+          >
+            Zurueck
+          </button>
+          <span className="text-xs text-gray-500">
+            {activeIndex + 1} / {getUniqueRowCount()}
+          </span>
+          <button
+            onClick={() => setActiveIndex(Math.min(
+              getUniqueRowCount() - 1,
+              activeIndex + 1
+            ))}
+            disabled={activeIndex >= getUniqueRowCount() - 1}
+            className="px-2 py-1 text-xs border rounded hover:bg-gray-50 dark:hover:bg-gray-700 dark:border-gray-600 disabled:opacity-30"
+          >
+            Weiter
+          </button>
+        </div>
+
+        {/* Status badge */}
+        <div className="flex items-center gap-2">
+          {(() => {
+            const rowCells = getRowCells(activeIndex)
+            const avgConf = rowCells.length
+              ? Math.round(rowCells.reduce((s, c) => s + c.confidence, 0) / rowCells.length)
+              : 0
+            return (
+              <span className={`text-xs font-mono ${confColor(avgConf)}`}>
+                {avgConf}% Konfidenz
+              </span>
+            )
+          })()}
+        </div>
+
+        {/* Editable fields -- one per column, driven by columns_used */}
+        <div className="space-y-2">
+          {(() => {
+            const rowCells = getRowCells(activeIndex)
+            return columnsUsed.map((col, colIdx) => {
+              const cell = rowCells.find(c => c.col_index === col.index)
+              if (!cell) return null
+              return (
+                <div key={col.index}>
+                  <div className="flex items-center gap-1 mb-0.5">
+                    <label className={`text-[10px] font-medium ${colTypeColor(col.type)}`}>
+                      {colTypeLabel(col.type)}
+                    </label>
+                    <span className="text-[9px] text-gray-400">{cell.cell_id}</span>
+                  </div>
+                  {/* Cell crop */}
+                  <div className="border rounded dark:border-gray-700 overflow-hidden bg-white dark:bg-gray-900 h-10 relative mb-1">
+                    <CellCrop imageUrl={dewarpedUrl} bbox={cell.bbox_pct} />
+                  </div>
+                  <textarea
+                    ref={colIdx === 0 ? enRef as any : undefined}
+                    rows={Math.max(1, (cell.text || '').split('\n').length)}
+                    value={cell.text || ''}
+                    onChange={(e) => updateCell(cell.cell_id, e.target.value)}
+                    className="w-full px-2 py-1.5 text-sm border rounded dark:bg-gray-700 dark:border-gray-600 font-mono resize-none"
+                  />
+                </div>
+              )
+            })
+          })()}
+        </div>
+
+        {/* Action buttons */}
+        <div className="flex gap-2">
+          <button
+            onClick={confirmEntry}
+            className="flex-1 px-3 py-1.5 text-xs bg-green-600 text-white rounded-lg hover:bg-green-700 font-medium"
+          >
+            Bestaetigen (Enter)
+          </button>
+          <button
+            onClick={skipEntry}
+            className="px-3 py-1.5 text-xs border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 dark:border-gray-600"
+          >
+            Skip
+          </button>
+        </div>
+
+        {/* Shortcuts hint */}
+        <div className="text-[10px] text-gray-400 space-y-0.5">
+          <div>Enter = Bestaetigen & weiter</div>
+          <div>Ctrl+Down = Ueberspringen</div>
+          <div>Ctrl+Up = Zurueck</div>
+        </div>
+
+        {/* Row list (compact) */}
+        <div className="border-t dark:border-gray-700 pt-2 mt-2">
+          <div className="text-[10px] font-medium text-gray-500 dark:text-gray-400 mb-1">
+            Alle Zeilen
+          </div>
+          <div className="max-h-48 overflow-y-auto space-y-0.5">
+            {sortedRowIndices.map((rowIdx, posIdx) => {
+              const rowCells = cellsByRow.get(rowIdx) || []
+              const textParts = rowCells.filter(c => c.text).map(c => c.text.replace(/\n/g, ' '))
+              return (
+                <div
+                  key={rowIdx}
+                  onClick={() => setActiveIndex(posIdx)}
+                  className={`flex items-center gap-1 px-2 py-1 rounded text-[10px] cursor-pointer transition-colors ${
+                    posIdx === activeIndex
+                      ? 'bg-teal-50 dark:bg-teal-900/30 border border-teal-200 dark:border-teal-700'
+                      : 'hover:bg-gray-50 dark:hover:bg-gray-700/50'
+                  }`}
+                >
+                  <span className="w-6 text-right text-gray-400 font-mono">R{String(rowIdx).padStart(2, '0')}</span>
+                  <span className="truncate text-gray-600 dark:text-gray-400 font-mono">
+                    {textParts.join(' \u2192 ') || '\u2014'}
+                  </span>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/components/ocr-pipeline/WordRecognitionOverview.tsx b/admin-lehrer/components/ocr-pipeline/WordRecognitionOverview.tsx
new file mode 100644
index 0000000..35b6c1a
--- /dev/null
+++ b/admin-lehrer/components/ocr-pipeline/WordRecognitionOverview.tsx
@@ -0,0 +1,226 @@
+'use client'
+
+import { RefObject } from 'react'
+import type { GridResult, GridCell } from '@/app/(admin)/ai/ocr-kombi/types'
+import { MultilineText, colTypeLabel, colTypeColor, confColor } from './WordRecognitionUtils'
+
+const KLAUSUR_API = '/klausur-api'
+
+interface WordRecognitionOverviewProps {
+  sessionId: string
+  gridResult: GridResult | null
+  detecting: boolean
+  editedCells: GridCell[]
+  activeIndex: number
+  setActiveIndex: (idx: number) => void
+  setMode: (mode: 'overview' | 'labeling') => void
+  tableEndRef: RefObject<HTMLDivElement | null>
+}
+
+export function WordRecognitionOverview({
+  sessionId,
+  gridResult,
+  detecting,
+  editedCells,
+  activeIndex,
+  setActiveIndex,
+  setMode,
+  tableEndRef,
+}: WordRecognitionOverviewProps) {
+  const overlayUrl = `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/words-overlay`
+  const dewarpedUrl = `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/cropped`
+
+  const summary = gridResult?.summary
+  const columnsUsed = gridResult?.columns_used || []
+
+  // Group cells by row for table display
+  const cellsByRow: Map<number, GridCell[]> = new Map()
+  for (const cell of editedCells) {
+    const existing = cellsByRow.get(cell.row_index) || []
+    existing.push(cell)
+    cellsByRow.set(cell.row_index, existing)
+  }
+  const sortedRowIndices = [...cellsByRow.keys()].sort((a, b) => a - b)
+
+  return (
+    <>
+      {/* Images: overlay vs clean */}
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
+            Mit Grid-Overlay
+          </div>
+          <div className="border rounded-lg overflow-hidden dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
+            {gridResult ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                src={`${overlayUrl}?t=${Date.now()}`}
+                alt="Wort-Overlay"
+                className="w-full h-auto"
+              />
+            ) : (
+              <div className="aspect-[3/4] flex items-center justify-center text-gray-400 text-sm">
+                {detecting ? 'Erkenne Woerter...' : 'Keine Daten'}
+              </div>
+            )}
+          </div>
+        </div>
+        <div>
+          <div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
+            Entzerrtes Bild
+          </div>
+          <div className="border rounded-lg overflow-hidden dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={dewarpedUrl}
+              alt="Entzerrt"
+              className="w-full h-auto"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Result summary (only after streaming completes) */}
+      {gridResult && summary && !detecting && (
+        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 space-y-3">
+          <div className="flex items-center justify-between">
+            <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300">
+              Ergebnis: {summary.non_empty_cells}/{summary.total_cells} Zellen mit Text
+              ({sortedRowIndices.length} Zeilen, {columnsUsed.length} Spalten)
+            </h4>
+            <span className="text-xs text-gray-400">
+              {gridResult.duration_seconds}s
+            </span>
+          </div>
+
+          {/* Summary badges */}
+          <div className="flex gap-2 flex-wrap">
+            <span className="px-2 py-0.5 rounded text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300">
+              Zellen: {summary.non_empty_cells}/{summary.total_cells}
+            </span>
+            {columnsUsed.map((col, i) => (
+              <span key={i} className={`px-2 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-700 ${colTypeColor(col.type)}`}>
+                C{col.index}: {colTypeLabel(col.type)}
+              </span>
+            ))}
+            {summary.low_confidence > 0 && (
+              <span className="px-2 py-0.5 rounded text-xs font-medium bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300">
+                Unsicher: {summary.low_confidence}
+              </span>
+            )}
+          </div>
+
+          {/* Entry/Cell table */}
+          <div className="max-h-80 overflow-y-auto">
+            <table className="w-full text-xs">
+              <thead className="sticky top-0 bg-white dark:bg-gray-800">
+                <tr className="text-left text-gray-500 dark:text-gray-400 border-b dark:border-gray-700">
+                  <th className="py-1 pr-2 w-12">Zeile</th>
+                  {columnsUsed.map((col, i) => (
+                    <th key={i} className={`py-1 pr-2 ${colTypeColor(col.type)}`}>
+                      {colTypeLabel(col.type)}
+                    </th>
+                  ))}
+                  <th className="py-1 w-12 text-right">Conf</th>
+                </tr>
+              </thead>
+              <tbody>
+                {sortedRowIndices.map((rowIdx, posIdx) => {
+                  const rowCells = cellsByRow.get(rowIdx) || []
+                  const avgConf = rowCells.length
+                    ? Math.round(rowCells.reduce((s, c) => s + c.confidence, 0) / rowCells.length)
+                    : 0
+                  return (
+                    <tr
+                      key={rowIdx}
+                      className={`border-b dark:border-gray-700/50 ${
+                        posIdx === activeIndex ? 'bg-teal-50 dark:bg-teal-900/20' : ''
+                      }`}
+                      onClick={() => { setActiveIndex(posIdx); setMode('labeling') }}
+                    >
+                      <td className="py-1 pr-2 text-gray-400 font-mono text-[10px]">
+                        R{String(rowIdx).padStart(2, '0')}
+                      </td>
+                      {columnsUsed.map((col) => {
+                        const cell = rowCells.find(c => c.col_index === col.index)
+                        return (
+                          <td key={col.index} className="py-1 pr-2 font-mono text-gray-700 dark:text-gray-300 cursor-pointer">
+                            <MultilineText text={cell?.text || ''} />
+                          </td>
+                        )
+                      })}
+                      <td className={`py-1 text-right font-mono ${confColor(avgConf)}`}>
+                        {avgConf}%
+                      </td>
+                    </tr>
+                  )
+                })}
+              </tbody>
+            </table>
+            <div ref={tableEndRef} />
+          </div>
+        </div>
+      )}
+
+      {/* Streaming cell table (shown while detecting, before complete) */}
+      {detecting && editedCells.length > 0 && !gridResult?.summary?.non_empty_cells && (
+        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 space-y-3">
+          <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300">
+            Live: {editedCells.length} Zellen erkannt...
+          </h4>
+          <div className="max-h-80 overflow-y-auto">
+            <table className="w-full text-xs">
+              <thead className="sticky top-0 bg-white dark:bg-gray-800">
+                <tr className="text-left text-gray-500 dark:text-gray-400 border-b dark:border-gray-700">
+                  <th className="py-1 pr-2 w-12">Zelle</th>
+                  {columnsUsed.map((col, i) => (
+                    <th key={i} className={`py-1 pr-2 ${colTypeColor(col.type)}`}>
+                      {colTypeLabel(col.type)}
+                    </th>
+                  ))}
+                  <th className="py-1 w-12 text-right">Conf</th>
+                </tr>
+              </thead>
+              <tbody>
+                {(() => {
+                  const liveByRow: Map<number, GridCell[]> = new Map()
+                  for (const cell of editedCells) {
+                    const existing = liveByRow.get(cell.row_index) || []
+                    existing.push(cell)
+                    liveByRow.set(cell.row_index, existing)
+                  }
+                  const liveSorted = [...liveByRow.keys()].sort((a, b) => a - b)
+                  return liveSorted.map(rowIdx => {
+                    const rowCells = liveByRow.get(rowIdx) || []
+                    const avgConf = rowCells.length
+                      ? Math.round(rowCells.reduce((s, c) => s + c.confidence, 0) / rowCells.length)
+                      : 0
+                    return (
+                      <tr key={rowIdx} className="border-b dark:border-gray-700/50 animate-fade-in">
+                        <td className="py-1 pr-2 text-gray-400 font-mono text-[10px]">
+                          R{String(rowIdx).padStart(2, '0')}
+                        </td>
+                        {columnsUsed.map((col) => {
+                          const cell = rowCells.find(c => c.col_index === col.index)
+                          return (
+                            <td key={col.index} className="py-1 pr-2 font-mono text-gray-700 dark:text-gray-300">
+                              <MultilineText text={cell?.text || ''} />
+                            </td>
+                          )
+                        })}
+                        <td className={`py-1 text-right font-mono ${confColor(avgConf)}`}>
+                          {avgConf}%
+                        </td>
+                      </tr>
+                    )
+                  })
+                })()}
+              </tbody>
+            </table>
+            <div ref={tableEndRef} />
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
diff --git a/admin-lehrer/components/ocr-pipeline/WordRecognitionUtils.tsx b/admin-lehrer/components/ocr-pipeline/WordRecognitionUtils.tsx
new file mode 100644
index 0000000..6fc5a16
--- /dev/null
+++ b/admin-lehrer/components/ocr-pipeline/WordRecognitionUtils.tsx
@@ -0,0 +1,81 @@
+'use client'
+
+/**
+ * Shared utilities and small presentational components for StepWordRecognition.
+ */
+
+/** Render text with \n as line breaks */
+export function MultilineText({ text }: { text: string }) {
+  if (!text) return <span className="text-gray-300 dark:text-gray-600">&mdash;</span>
+  const lines = text.split('\n')
+  if (lines.length === 1) return <>{text}</>
+  return <>{lines.map((line, i) => (
+    <span key={i}>{line}{i < lines.length - 1 && <br />}</span>
+  ))}</>
+}
+
+/** Column type to human-readable header */
+export function colTypeLabel(colType: string): string {
+  const labels: Record<string, string> = {
+    column_en: 'English',
+    column_de: 'Deutsch',
+    column_example: 'Example',
+    column_text: 'Text',
+    column_marker: 'Marker',
+    page_ref: 'Seite',
+  }
+  return labels[colType] || colType.replace('column_', '')
+}
+
+/** Column type to color class */
+export function colTypeColor(colType: string): string {
+  const colors: Record<string, string> = {
+    column_en: 'text-blue-600 dark:text-blue-400',
+    column_de: 'text-green-600 dark:text-green-400',
+    column_example: 'text-orange-600 dark:text-orange-400',
+    column_text: 'text-purple-600 dark:text-purple-400',
+    column_marker: 'text-gray-500 dark:text-gray-400',
+  }
+  return colors[colType] || 'text-gray-600 dark:text-gray-400'
+}
+
+/** Confidence score to color class */
+export function confColor(conf: number): string {
+  if (conf >= 70) return 'text-green-600 dark:text-green-400'
+  if (conf >= 50) return 'text-yellow-600 dark:text-yellow-400'
+  return 'text-red-600 dark:text-red-400'
+}
+
+/** Status to badge color class */
+export function statusBadge(status?: string): string {
+  const map: Record<string, string> = {
+    pending: 'bg-gray-100 dark:bg-gray-700 text-gray-500',
+    confirmed: 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400',
+    edited: 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400',
+    skipped: 'bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-400',
+  }
+  return map[status || 'pending'] || map.pending
+}
+
+/**
+ * CellCrop: Shows a cropped portion of the dewarped image based on percent bbox.
+ * Uses CSS background-image + background-position for efficient cropping.
+ */
+export function CellCrop({ imageUrl, bbox }: { imageUrl: string; bbox: { x: number; y: number; w: number; h: number } }) {
+  // Scale factor: how much to zoom into the cell
+  const scaleX = 100 / bbox.w
+  const scaleY = 100 / bbox.h
+  const scale = Math.min(scaleX, scaleY, 8) // Cap zoom at 8x
+
+  return (
+    <div
+      className="w-full h-full"
+      style={{
+        backgroundImage: `url(${imageUrl})`,
+        backgroundSize: `${scale * 100}%`,
+        backgroundPosition: `${-bbox.x * scale}% ${-bbox.y * scale}%`,
+        backgroundRepeat: 'no-repeat',
+      }}
+    />
+  )
+}
diff --git a/admin-lehrer/components/ocr-pipeline/dewarp-constants.ts b/admin-lehrer/components/ocr-pipeline/dewarp-constants.ts
new file mode 100644
index 0000000..2648202
--- /dev/null
+++ b/admin-lehrer/components/ocr-pipeline/dewarp-constants.ts
@@ -0,0 +1,18 @@
+export const METHOD_LABELS: Record<string, string> = {
+  vertical_edge: 'A: Vertikale Kanten',
+  projection: 'B: Projektions-Varianz',
+  hough_lines: 'C: Hough-Linien',
+  text_lines: 'D: Textzeilenanalyse',
+  manual: 'Manuell',
+  manual_combined: 'Manuell (kombiniert)',
+  none: 'Keine Korrektur',
+}
+
+export const SHEAR_METHOD_KEYS = ['vertical_edge', 'projection', 'hough_lines', 'text_lines'] as const
+
+/** Colour for a confidence value (0-1). */
+export function confColor(conf: number): string {
+  if (conf >= 0.7) return 'text-green-600 dark:text-green-400'
+  if (conf >= 0.5) return 'text-yellow-600 dark:text-yellow-400'
+  return 'text-gray-400'
+}
diff --git a/admin-lehrer/components/ocr-pipeline/ground-truth-types.ts b/admin-lehrer/components/ocr-pipeline/ground-truth-types.ts
new file mode 100644
index 0000000..0e5aad1
--- /dev/null
+++ b/admin-lehrer/components/ocr-pipeline/ground-truth-types.ts
@@ -0,0 +1,32 @@
+import type { ImageRegion, ImageStyle } from '@/app/(admin)/ai/ocr-kombi/types'
+import type { GridCell, ColumnMeta } from '@/app/(admin)/ai/ocr-kombi/types'
+
+export const KLAUSUR_API = '/klausur-api'
+
+export const COL_TYPE_COLORS: Record<string, string> = {
+  column_en: '#3b82f6',
+  column_de: '#22c55e',
+  column_example: '#f97316',
+  column_text: '#a855f7',
+  page_ref: '#06b6d4',
+  column_marker: '#6b7280',
+}
+
+export interface StepGroundTruthProps {
+  sessionId: string | null
+  onNext: () => void
+}
+
+export interface SessionData {
+  cells: GridCell[]
+  columnsUsed: ColumnMeta[]
+  imageWidth: number
+  imageHeight: number
+  originalImageUrl: string
+}
+
+export type ImageRegionWithState = ImageRegion & { generating?: boolean }
+
+export type GroundTruthStatus = 'loading' | 'ready' | 'saving' | 'saved' | 'error'
+
+export type { GridCell, ColumnMeta, ImageRegion, ImageStyle }
diff --git a/admin-lehrer/components/ocr-pipeline/llm-review-types.ts b/admin-lehrer/components/ocr-pipeline/llm-review-types.ts
new file mode 100644
index 0000000..d598d00
--- /dev/null
+++ b/admin-lehrer/components/ocr-pipeline/llm-review-types.ts
@@ -0,0 +1,57 @@
+export interface LlmChange {
+  row_index: number
+  field: 'english' | 'german' | 'example'
+  old: string
+  new: string
+}
+
+export interface StepLlmReviewProps {
+  sessionId: string | null
+  onNext: () => void
+}
+
+export interface ReviewMeta {
+  total_entries: number
+  to_review: number
+  skipped: number
+  model: string
+  skipped_indices?: number[]
+}
+
+export interface StreamProgress {
+  current: number
+  total: number
+}
+
+export const FIELD_LABELS: Record<string, string> = {
+  english: 'EN',
+  german: 'DE',
+  example: 'Beispiel',
+  source_page: 'Seite',
+  marker: 'Marker',
+  text: 'Text',
+}
+
+/** Map column type to WordEntry field name */
+export const COL_TYPE_TO_FIELD: Record<string, string> = {
+  column_en: 'english',
+  column_de: 'german',
+  column_example: 'example',
+  page_ref: 'source_page',
+  column_marker: 'marker',
+  column_text: 'text',
+}
+
+/** Column type to color class */
+export const COL_TYPE_COLOR: Record<string, string> = {
+  column_en: 'text-blue-600 dark:text-blue-400',
+  column_de: 'text-green-600 dark:text-green-400',
+  column_example: 'text-orange-600 dark:text-orange-400',
+  page_ref: 'text-cyan-600 dark:text-cyan-400',
+  column_marker: 'text-gray-500 dark:text-gray-400',
+  column_text: 'text-gray-700 dark:text-gray-300',
+}
+
+export type RowStatus = 'pending' | 'active' | 'reviewed' | 'corrected' | 'skipped'
+
+export const KLAUSUR_API = '/klausur-api'
diff --git a/admin-lehrer/components/ocr-pipeline/structure-detection-utils.ts b/admin-lehrer/components/ocr-pipeline/structure-detection-utils.ts
new file mode 100644
index 0000000..933dc17
--- /dev/null
+++ b/admin-lehrer/components/ocr-pipeline/structure-detection-utils.ts
@@ -0,0 +1,106 @@
+/**
+ * Utility functions and constants for StepStructureDetection.
+ * Pure logic — no React, no 'use client' needed.
+ */
+
+export const KLAUSUR_API = '/klausur-api'
+
+export const COLOR_HEX: Record<string, string> = {
+  red: '#dc2626',
+  orange: '#ea580c',
+  yellow: '#ca8a04',
+  green: '#16a34a',
+  blue: '#2563eb',
+  purple: '#9333ea',
+}
+
+export type DetectionMethod = 'auto' | 'opencv' | 'ppdoclayout'
+
+/** Color map for PP-DocLayout region classes */
+export const DOCLAYOUT_CLASS_COLORS: Record<string, string> = {
+  table: '#2563eb',
+  figure: '#16a34a',
+  title: '#ea580c',
+  text: '#6b7280',
+  list: '#9333ea',
+  header: '#0ea5e9',
+  footer: '#64748b',
+  equation: '#dc2626',
+}
+
+const DOCLAYOUT_DEFAULT_COLOR = '#a3a3a3'
+
+export function getDocLayoutColor(className: string): string {
+  return DOCLAYOUT_CLASS_COLORS[className.toLowerCase()] || DOCLAYOUT_DEFAULT_COLOR
+}
+
+/**
+ * Convert a mouse event on the image container to image-pixel coordinates.
+ * The image uses object-contain inside an A4-ratio container, so we need
+ * to account for letterboxing.
+ */
+export function mouseToImageCoords(
+  e: React.MouseEvent,
+  containerEl: HTMLElement,
+  imgWidth: number,
+  imgHeight: number,
+): { x: number; y: number } | null {
+  const rect = containerEl.getBoundingClientRect()
+  const containerW = rect.width
+  const containerH = rect.height
+
+  // object-contain: image is scaled to fit, centered
+  const scaleX = containerW / imgWidth
+  const scaleY = containerH / imgHeight
+  const scale = Math.min(scaleX, scaleY)
+
+  const renderedW = imgWidth * scale
+  const renderedH = imgHeight * scale
+  const offsetX = (containerW - renderedW) / 2
+  const offsetY = (containerH - renderedH) / 2
+
+  const relX = e.clientX - rect.left - offsetX
+  const relY = e.clientY - rect.top - offsetY
+
+  if (relX < 0 || relY < 0 || relX > renderedW || relY > renderedH) {
+    return null
+  }
+
+  return {
+    x: Math.round(relX / scale),
+    y: Math.round(relY / scale),
+  }
+}
+
+/**
+ * Convert image-pixel coordinates to container-relative percentages
+ * for overlay positioning.
+ */
+export function imageToOverlayPct(
+  region: { x: number; y: number; w: number; h: number },
+  containerW: number,
+  containerH: number,
+  imgWidth: number,
+  imgHeight: number,
+): { left: string; top: string; width: string; height: string } {
+  const scaleX = containerW / imgWidth
+  const scaleY = containerH / imgHeight
+  const scale = Math.min(scaleX, scaleY)
+
+  const renderedW = imgWidth * scale
+  const renderedH = imgHeight * scale
+  const offsetX = (containerW - renderedW) / 2
+  const offsetY = (containerH - renderedH) / 2
+
+  const left = offsetX + region.x * scale
+  const top = offsetY + region.y * scale
+  const width = region.w * scale
+  const height = region.h * scale
+
+  return {
+    left: `${(left / containerW) * 100}%`,
+    top: `${(top / containerH) * 100}%`,
+    width: `${(width / containerW) * 100}%`,
+    height: `${(height / containerH) * 100}%`,
+  }
+}
diff --git a/admin-lehrer/components/ocr-pipeline/useGroundTruthSession.ts b/admin-lehrer/components/ocr-pipeline/useGroundTruthSession.ts
new file mode 100644
index 0000000..ddd2d79
--- /dev/null
+++ b/admin-lehrer/components/ocr-pipeline/useGroundTruthSession.ts
@@ -0,0 +1,267 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { ImageStyle } from '@/app/(admin)/ai/ocr-kombi/types'
+import type {
+  SessionData, ImageRegionWithState, GroundTruthStatus,
+} from './ground-truth-types'
+import { KLAUSUR_API } from './ground-truth-types'
+
+export function useGroundTruthSession(sessionId: string | null) {
+  const [status, setStatus] = useState<GroundTruthStatus>('loading')
+  const [error, setError] = useState('')
+  const [session, setSession] = useState<SessionData | null>(null)
+  const [imageRegions, setImageRegions] = useState<ImageRegionWithState[]>([])
+  const [detecting, setDetecting] = useState(false)
+  const [zoom, setZoom] = useState(100)
+  const [syncScroll, setSyncScroll] = useState(true)
+  const [notes, setNotes] = useState('')
+  const [score, setScore] = useState<number | null>(null)
+  const [drawingRegion, setDrawingRegion] = useState(false)
+  const [dragStart, setDragStart] = useState<{ x: number; y: number } | null>(null)
+  const [dragEnd, setDragEnd] = useState<{ x: number; y: number } | null>(null)
+  const [isGroundTruth, setIsGroundTruth] = useState(false)
+  const [gtSaving, setGtSaving] = useState(false)
+  const [gtMessage, setGtMessage] = useState('')
+
+  const leftPanelRef = useRef<HTMLDivElement>(null)
+  const rightPanelRef = useRef<HTMLDivElement>(null)
+  const reconRef = useRef<HTMLDivElement>(null)
+  const [reconWidth, setReconWidth] = useState(0)
+
+  // Track reconstruction container width for font size calculation
+  useEffect(() => {
+    const el = reconRef.current
+    if (!el) return
+    const obs = new ResizeObserver(entries => {
+      for (const entry of entries) setReconWidth(entry.contentRect.width)
+    })
+    obs.observe(el)
+    return () => obs.disconnect()
+  }, [session])
+
+  const loadSessionData = useCallback(async () => {
+    if (!sessionId) return
+    setStatus('loading')
+    try {
+      const resp = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}`)
+      if (!resp.ok) throw new Error(`Failed to load session: ${resp.status}`)
+      const data = await resp.json()
+
+      const wordResult = data.word_result || {}
+      setSession({
+        cells: wordResult.cells || [],
+        columnsUsed: wordResult.columns_used || [],
+        imageWidth: wordResult.image_width || data.image_width || 800,
+        imageHeight: wordResult.image_height || data.image_height || 600,
+        originalImageUrl: data.original_image_url
+          ? `${KLAUSUR_API}${data.original_image_url}`
+          : `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/original`,
+      })
+
+      // Check if session has ground truth reference
+      const gt = data.ground_truth
+      setIsGroundTruth(!!gt?.build_grid_reference)
+
+      // Load existing validation data
+      const valResp = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/reconstruction/validation`)
+      if (valResp.ok) {
+        const valData = await valResp.json()
+        const validation = valData.validation
+        if (validation) {
+          setImageRegions(validation.image_regions || [])
+          setNotes(validation.notes || '')
+          setScore(validation.score ?? null)
+        }
+      }
+
+      setStatus('ready')
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e))
+      setStatus('error')
+    }
+  }, [sessionId])
+
+  // Load session data
+  useEffect(() => {
+    if (!sessionId) return
+    loadSessionData()
+  }, [sessionId, loadSessionData])
+
+  // Sync scroll between panels
+  const handleScroll = useCallback((source: 'left' | 'right') => {
+    if (!syncScroll) return
+    const from = source === 'left' ? leftPanelRef.current : rightPanelRef.current
+    const to = source === 'left' ? rightPanelRef.current : leftPanelRef.current
+    if (from && to) {
+      to.scrollTop = from.scrollTop
+      to.scrollLeft = from.scrollLeft
+    }
+  }, [syncScroll])
+
+  // Detect images via VLM
+  const handleDetectImages = useCallback(async () => {
+    if (!sessionId) return
+    setDetecting(true)
+    try {
+      const resp = await fetch(
+        `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/reconstruction/detect-images`,
+        { method: 'POST' }
+      )
+      if (!resp.ok) throw new Error(`Detection failed: ${resp.status}`)
+      const data = await resp.json()
+      setImageRegions(data.regions || [])
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e))
+    } finally {
+      setDetecting(false)
+    }
+  }, [sessionId])
+
+  // Generate image for a region
+  const handleGenerateImage = useCallback(async (index: number) => {
+    if (!sessionId) return
+    const region = imageRegions[index]
+    if (!region) return
+
+    setImageRegions(prev => prev.map((r, i) => i === index ? { ...r, generating: true } : r))
+
+    try {
+      const resp = await fetch(
+        `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/reconstruction/generate-image`,
+        {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            region_index: index,
+            prompt: region.prompt,
+            style: region.style,
+          }),
+        }
+      )
+      if (!resp.ok) throw new Error(`Generation failed: ${resp.status}`)
+      const data = await resp.json()
+
+      setImageRegions(prev => prev.map((r, i) =>
+        i === index ? { ...r, image_b64: data.image_b64, generating: false } : r
+      ))
+    } catch (e) {
+      setImageRegions(prev => prev.map((r, i) => i === index ? { ...r, generating: false } : r))
+      setError(e instanceof Error ? e.message : String(e))
+    }
+  }, [sessionId, imageRegions])
+
+  // Save validation
+  const handleSave = useCallback(async () => {
+    if (!sessionId) {
+      setError('Keine Session-ID vorhanden')
+      return
+    }
+    setStatus('saving')
+    setError('')
+    try {
+      const resp = await fetch(
+        `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/reconstruction/validate`,
+        {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ notes, score: score ?? 0 }),
+        }
+      )
+      if (!resp.ok) {
+        const body = await resp.text().catch(() => '')
+        throw new Error(`Speichern fehlgeschlagen (${resp.status}): ${body}`)
+      }
+      setStatus('saved')
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e))
+      setStatus('ready')
+    }
+  }, [sessionId, notes, score])
+
+  // Mark/update ground truth reference
+  const handleMarkGroundTruth = useCallback(async () => {
+    if (!sessionId) return
+    setGtSaving(true)
+    setGtMessage('')
+    try {
+      const resp = await fetch(
+        `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/mark-ground-truth?pipeline=ocr-pipeline`,
+        { method: 'POST' }
+      )
+      if (!resp.ok) {
+        const body = await resp.text().catch(() => '')
+        throw new Error(`Ground Truth fehlgeschlagen (${resp.status}): ${body}`)
+      }
+      const data = await resp.json()
+      setIsGroundTruth(true)
+      setGtMessage(`Ground Truth gespeichert (${data.cells_saved} Zellen)`)
+      setTimeout(() => setGtMessage(''), 5000)
+    } catch (e) {
+      setGtMessage(e instanceof Error ? e.message : String(e))
+    } finally {
+      setGtSaving(false)
+    }
+  }, [sessionId])
+
+  // Handle manual region drawing on reconstruction
+  const handleReconMouseDown = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+    if (!drawingRegion) return
+    const rect = e.currentTarget.getBoundingClientRect()
+    const x = ((e.clientX - rect.left) / rect.width) * 100
+    const y = ((e.clientY - rect.top) / rect.height) * 100
+    setDragStart({ x, y })
+    setDragEnd({ x, y })
+  }, [drawingRegion])
+
+  const handleReconMouseMove = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+    if (!dragStart) return
+    const rect = e.currentTarget.getBoundingClientRect()
+    const x = ((e.clientX - rect.left) / rect.width) * 100
+    const y = ((e.clientY - rect.top) / rect.height) * 100
+    setDragEnd({ x, y })
+  }, [dragStart])
+
+  const handleReconMouseUp = useCallback(() => {
+    if (!dragStart || !dragEnd) return
+    const x = Math.min(dragStart.x, dragEnd.x)
+    const y = Math.min(dragStart.y, dragEnd.y)
+    const w = Math.abs(dragEnd.x - dragStart.x)
+    const h = Math.abs(dragEnd.y - dragStart.y)
+
+    if (w > 2 && h > 2) {
+      setImageRegions(prev => [...prev, {
+        bbox_pct: { x, y, w, h },
+        prompt: '',
+        description: 'Manually selected region',
+        image_b64: null,
+        style: 'educational' as ImageStyle,
+      }])
+    }
+
+    setDragStart(null)
+    setDragEnd(null)
+    setDrawingRegion(false)
+  }, [dragStart, dragEnd])
+
+  const handleRemoveRegion = useCallback((index: number) => {
+    setImageRegions(prev => prev.filter((_, i) => i !== index))
+  }, [])
+
+  return {
+    // State
+    status, error, session, imageRegions, detecting, zoom, syncScroll,
+    notes, score, drawingRegion, dragStart, dragEnd,
+    isGroundTruth, gtSaving, gtMessage, reconWidth,
+    // Refs
+    leftPanelRef, rightPanelRef, reconRef,
+    // Setters
+    setError, setZoom, setSyncScroll, setNotes, setScore,
+    setDrawingRegion, setImageRegions,
+    // Handlers
+    loadSessionData, handleScroll, handleDetectImages, handleGenerateImage,
+    handleSave, handleMarkGroundTruth,
+    handleReconMouseDown, handleReconMouseMove, handleReconMouseUp,
+    handleRemoveRegion,
+  }
+}
diff --git a/admin-lehrer/components/ocr-pipeline/useReconstructionData.ts b/admin-lehrer/components/ocr-pipeline/useReconstructionData.ts
new file mode 100644
index 0000000..3515436
--- /dev/null
+++ b/admin-lehrer/components/ocr-pipeline/useReconstructionData.ts
@@ -0,0 +1,201 @@
+import { useCallback, useEffect, useState } from 'react'
+import type { GridResult, GridCell, StructureResult, StructureBox, StructureGraphic } from '@/app/(admin)/ai/ocr-kombi/types'
+import type { EditableCell, EditorMode, PageRegion, RowItem, PageZone, ReconstructionStatus } from './StepReconstructionTypes'
+import { KLAUSUR_API } from './StepReconstructionTypes'
+
+interface ReconstructionData {
+  status: ReconstructionStatus
+  setStatus: (s: ReconstructionStatus) => void
+  error: string
+  setError: (e: string) => void
+  cells: EditableCell[]
+  setCells: (cells: EditableCell[]) => void
+  gridCells: GridCell[]
+  editorMode: EditorMode
+  setEditorMode: (mode: EditorMode) => void
+  isParentWithBoxes: boolean
+  mergedGridCells: GridCell[]
+  parentColumns: PageRegion[]
+  parentRows: RowItem[]
+  parentZones: PageZone[]
+  imageNaturalSize: { w: number; h: number } | null
+  setImageNaturalSize: (size: { w: number; h: number } | null) => void
+  structureBoxes: StructureBox[]
+  structureGraphics: StructureGraphic[]
+  imageRotation: 0 | 180
+  setImageRotation: (fn: (r: 0 | 180) => 0 | 180) => void
+  loadSessionData: () => void
+}
+
+function gridCellToEditable(c: GridCell): EditableCell {
+  return {
+    cellId: c.cell_id,
+    text: c.text,
+    originalText: c.text,
+    bboxPct: c.bbox_pct,
+    colType: c.col_type,
+    rowIndex: c.row_index,
+    colIndex: c.col_index,
+  }
+}
+
+/**
+ * Loads reconstruction session data from the API, including sub-session
+ * merging for parent sessions with box zones.
+ */
+export function useReconstructionData(
+  sessionId: string | null,
+  onResetEditing: () => void,
+): ReconstructionData {
+  const [status, setStatus] = useState<ReconstructionStatus>('loading')
+  const [error, setError] = useState('')
+  const [cells, setCells] = useState<EditableCell[]>([])
+  const [gridCells, setGridCells] = useState<GridCell[]>([])
+  const [editorMode, setEditorMode] = useState<EditorMode>('simple')
+
+  const [isParentWithBoxes, setIsParentWithBoxes] = useState(false)
+  const [mergedGridCells, setMergedGridCells] = useState<GridCell[]>([])
+  const [parentColumns, setParentColumns] = useState<PageRegion[]>([])
+  const [parentRows, setParentRows] = useState<RowItem[]>([])
+  const [parentZones, setParentZones] = useState<PageZone[]>([])
+  const [imageNaturalSize, setImageNaturalSize] = useState<{ w: number; h: number } | null>(null)
+  const [imageRotation, setImageRotation] = useState<0 | 180>(0)
+  const [structureBoxes, setStructureBoxes] = useState<StructureBox[]>([])
+  const [structureGraphics, setStructureGraphics] = useState<StructureGraphic[]>([])
+
+  const loadSessionData = useCallback(async () => {
+    if (!sessionId) return
+    setStatus('loading')
+    try {
+      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}`)
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      const data = await res.json()
+
+      const wordResult: GridResult | undefined = data.word_result
+      if (!wordResult) {
+        setError('Keine Worterkennungsdaten gefunden. Bitte zuerst Schritt 5 abschliessen.')
+        setStatus('error')
+        return
+      }
+
+      const rawGridCells: GridCell[] = wordResult.cells || []
+      setGridCells(rawGridCells)
+      const allEditableCells = rawGridCells.map(gridCellToEditable)
+
+      setCells(allEditableCells)
+      onResetEditing()
+
+      // Load structure result (boxes, graphics, colors)
+      const structureResult: StructureResult | undefined = data.structure_result
+      if (structureResult) {
+        setStructureBoxes(structureResult.boxes || [])
+        setStructureGraphics(structureResult.graphics || [])
+      }
+
+      // Check for parent with boxes (sub-sessions + zones)
+      const columnResult = data.column_result as { columns?: PageRegion[]; zones?: PageZone[] } | undefined
+      const rowResult = data.row_result as { rows?: RowItem[] } | undefined
+      const subSessions: { id: string; box_index: number }[] = data.sub_sessions || []
+      const zones: PageZone[] = columnResult?.zones || []
+      const hasBoxes = subSessions.length > 0 && zones.some(z => z.zone_type === 'box')
+
+      setIsParentWithBoxes(hasBoxes)
+      if (hasBoxes) setImageRotation(() => 180)
+
+      if (columnResult?.columns) setParentColumns(columnResult.columns)
+      if (rowResult?.rows) setParentRows(rowResult.rows)
+      if (zones.length > 0) setParentZones(zones)
+
+      if (wordResult.image_width && wordResult.image_height) {
+        setImageNaturalSize({ w: wordResult.image_width, h: wordResult.image_height })
+      }
+
+      if (hasBoxes) {
+        setEditorMode('overlay')
+        await loadMergedCells(rawGridCells, subSessions, zones, wordResult)
+      } else {
+        setMergedGridCells(rawGridCells)
+      }
+
+      setStatus('ready')
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : String(e))
+      setStatus('error')
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sessionId])
+
+  /** Load sub-session cells and merge into parent coordinate space */
+  const loadMergedCells = async (
+    rawGridCells: GridCell[],
+    subSessions: { id: string; box_index: number }[],
+    zones: PageZone[],
+    wordResult: GridResult,
+  ) => {
+    const imgW = wordResult.image_width || 1
+    const imgH = wordResult.image_height || 1
+    const allMergedCells: GridCell[] = [...rawGridCells]
+
+    for (const sub of subSessions) {
+      try {
+        const subRes = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sub.id}`)
+        if (!subRes.ok) continue
+        const subData = await subRes.json()
+        const subWordResult: GridResult | undefined = subData.word_result
+        if (!subWordResult?.cells) continue
+
+        const boxZone = zones.find(z => z.zone_type === 'box')
+        if (!boxZone?.box) continue
+
+        const box = boxZone.box
+        const boxXPct = (box.x / imgW) * 100
+        const boxYPct = (box.y / imgH) * 100
+        const boxWPct = (box.width / imgW) * 100
+        const boxHPct = (box.height / imgH) * 100
+
+        for (const subCell of subWordResult.cells) {
+          if (!subCell.bbox_pct) continue
+          const parentCellX = boxXPct + (subCell.bbox_pct.x / 100) * boxWPct
+          const parentCellY = boxYPct + (subCell.bbox_pct.y / 100) * boxHPct
+          const parentCellW = (subCell.bbox_pct.w / 100) * boxWPct
+          const parentCellH = (subCell.bbox_pct.h / 100) * boxHPct
+
+          allMergedCells.push({
+            ...subCell,
+            cell_id: `sub_${sub.id}_${subCell.cell_id}`,
+            bbox_pct: { x: parentCellX, y: parentCellY, w: parentCellW, h: parentCellH },
+            bbox_px: {
+              x: Math.round(parentCellX / 100 * imgW),
+              y: Math.round(parentCellY / 100 * imgH),
+              w: Math.round(parentCellW / 100 * imgW),
+              h: Math.round(parentCellH / 100 * imgH),
+            },
+          })
+        }
+      } catch {
+        // Skip failing sub-sessions
+      }
+    }
+
+    setMergedGridCells(allMergedCells)
+    setCells(allMergedCells.map(gridCellToEditable))
+  }
+
+  // Load session data on mount
+  useEffect(() => {
+    if (!sessionId) return
+    loadSessionData()
+  }, [sessionId, loadSessionData])
+
+  return {
+    status, setStatus, error, setError,
+    cells, setCells, gridCells,
+    editorMode, setEditorMode,
+    isParentWithBoxes, mergedGridCells,
+    parentColumns, parentRows, parentZones,
+    imageNaturalSize, setImageNaturalSize,
+    structureBoxes, structureGraphics,
+    imageRotation, setImageRotation,
+    loadSessionData,
+  }
+}
diff --git a/admin-lehrer/components/ocr/GTImageCrop.tsx b/admin-lehrer/components/ocr/GTImageCrop.tsx
new file mode 100644
index 0000000..bf20c73
--- /dev/null
+++ b/admin-lehrer/components/ocr/GTImageCrop.tsx
@@ -0,0 +1,52 @@
+/**
+ * GTImageCrop — Renders a cropped region of an image based on a bounding box.
+ *
+ * Used in the Ground Truth labeling UI to show row and column crops
+ * of the current entry being reviewed.
+ */
+
+import type { BBox } from './ground-truth-types'
+
+interface GTImageCropProps {
+  imageUrl: string
+  bbox: BBox
+  naturalWidth: number
+  naturalHeight: number
+  maxWidth?: number
+  label?: string
+}
+
+export function GTImageCrop({ imageUrl, bbox, naturalWidth, naturalHeight, maxWidth = 380, label }: GTImageCropProps) {
+  if (!bbox || bbox.w === 0 || bbox.h === 0) return null
+
+  const cropWPx = (bbox.w / 100) * naturalWidth
+  const cropHPx = (bbox.h / 100) * naturalHeight
+  if (cropWPx < 1 || cropHPx < 1) return null
+
+  const scale = maxWidth / cropWPx
+  const displayH = cropHPx * scale
+
+  return (
+    <div>
+      {label && <div className="text-xs font-medium text-slate-500 mb-1">{label}</div>}
+      <div
+        className="rounded-lg border border-slate-200 overflow-hidden bg-white"
+        style={{ width: maxWidth, height: Math.min(displayH, 120), overflow: 'hidden', position: 'relative' }}
+      >
+        <img
+          src={imageUrl}
+          alt=""
+          draggable={false}
+          style={{
+            position: 'absolute',
+            width: naturalWidth * scale,
+            height: naturalHeight * scale,
+            left: -(bbox.x / 100) * naturalWidth * scale,
+            top: -(bbox.y / 100) * naturalHeight * scale,
+            maxWidth: 'none',
+          }}
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/components/ocr/GroundTruthPanel.tsx b/admin-lehrer/components/ocr/GroundTruthPanel.tsx
index 1bf8068..d5770da 100644
--- a/admin-lehrer/components/ocr/GroundTruthPanel.tsx
+++ b/admin-lehrer/components/ocr/GroundTruthPanel.tsx
@@ -10,98 +10,14 @@
 
 import { useState, useEffect, useCallback, useRef } from 'react'
 
-// ---------- Types ----------
-
-interface BBox {
-  x: number
-  y: number
-  w: number
-  h: number
-}
-
-interface GTEntry {
-  row_index: number
-  english: string
-  german: string
-  example: string
-  confidence: number
-  bbox: BBox
-  bbox_en: BBox
-  bbox_de: BBox
-  bbox_ex: BBox
-  status?: 'pending' | 'confirmed' | 'edited' | 'skipped'
-}
-
-interface GroundTruthPanelProps {
-  sessionId: string
-  selectedPage: number
-  pageImageUrl: string
-}
-
-// ---------- Helpers ----------
-
-const STATUS_COLORS: Record<string, { fill: string; stroke: string }> = {
-  current:   { fill: 'rgba(250,204,21,0.25)', stroke: '#eab308' },   // yellow
-  confirmed: { fill: 'rgba(34,197,94,0.18)',  stroke: '#16a34a' },   // green
-  edited:    { fill: 'rgba(59,130,246,0.18)', stroke: '#2563eb' },   // blue
-  skipped:   { fill: 'rgba(148,163,184,0.15)', stroke: '#94a3b8' },  // gray
-  pending:   { fill: 'rgba(0,0,0,0)',          stroke: '#cbd5e1' },   // outline only
-}
-
-function getEntryColor(entry: GTEntry, index: number, currentIndex: number) {
-  if (index === currentIndex) return STATUS_COLORS.current
-  return STATUS_COLORS[entry.status || 'pending']
-}
-
-// ---------- ImageCrop ----------
-
-function ImageCrop({ imageUrl, bbox, naturalWidth, naturalHeight, maxWidth = 380, label }: {
-  imageUrl: string
-  bbox: BBox
-  naturalWidth: number
-  naturalHeight: number
-  maxWidth?: number
-  label?: string
-}) {
-  if (!bbox || bbox.w === 0 || bbox.h === 0) return null
-
-  const cropWPx = (bbox.w / 100) * naturalWidth
-  const cropHPx = (bbox.h / 100) * naturalHeight
-  if (cropWPx < 1 || cropHPx < 1) return null
-
-  const scale = maxWidth / cropWPx
-  const displayH = cropHPx * scale
-
-  return (
-    <div>
-      {label && <div className="text-xs font-medium text-slate-500 mb-1">{label}</div>}
-      <div
-        className="rounded-lg border border-slate-200 overflow-hidden bg-white"
-        style={{ width: maxWidth, height: Math.min(displayH, 120), overflow: 'hidden', position: 'relative' }}
-      >
-        <img
-          src={imageUrl}
-          alt=""
-          draggable={false}
-          style={{
-            position: 'absolute',
-            width: naturalWidth * scale,
-            height: naturalHeight * scale,
-            left: -(bbox.x / 100) * naturalWidth * scale,
-            top: -(bbox.y / 100) * naturalHeight * scale,
-            maxWidth: 'none',
-          }}
-        />
-      </div>
-    </div>
-  )
-}
+import type { GTEntry, GroundTruthPanelProps } from './ground-truth-types'
+import { KLAUSUR_API, STATUS_COLORS, getEntryColor } from './ground-truth-types'
+import { GTImageCrop } from './GTImageCrop'
+import { GroundTruthSummary } from './GroundTruthSummary'
 
 // ---------- Main Component ----------
 
 export function GroundTruthPanel({ sessionId, selectedPage, pageImageUrl }: GroundTruthPanelProps) {
-  const KLAUSUR_API = '/klausur-api'
-
   // State
   const [entries, setEntries] = useState<GTEntry[]>([])
   const [currentIndex, setCurrentIndex] = useState(0)
@@ -319,106 +235,20 @@ export function GroundTruthPanel({ sessionId, selectedPage, pageImageUrl }: Grou
 
   if (showSummary) {
     return (
-      <div className={`bg-white rounded-xl border border-slate-200 p-6 ${
-        isFullscreen ? 'fixed inset-0 z-50 overflow-auto m-0 rounded-none' : ''
-      }`} ref={panelRef}>
-        <div className="flex items-center justify-between mb-4">
-          <h3 className="text-lg font-semibold text-slate-900">Zusammenfassung</h3>
-          <button
-            onClick={() => setIsFullscreen(!isFullscreen)}
-            className="p-1.5 rounded-lg hover:bg-slate-100 text-slate-500 hover:text-slate-700 transition-colors"
-            title={isFullscreen ? 'Vollbild verlassen (Esc)' : 'Vollbild'}
-          >
-            {isFullscreen ? (
-              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" d="M9 9V4.5M9 9H4.5M9 9 3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25" />
-              </svg>
-            ) : (
-              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
-              </svg>
-            )}
-          </button>
-        </div>
-        <div className="grid grid-cols-3 gap-4 mb-6">
-          <div className="bg-green-50 border border-green-200 rounded-lg p-4 text-center">
-            <div className="text-2xl font-bold text-green-700">{confirmedCount}</div>
-            <div className="text-sm text-green-600">Bestaetigt</div>
-          </div>
-          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 text-center">
-            <div className="text-2xl font-bold text-blue-700">{editedCount}</div>
-            <div className="text-sm text-blue-600">Editiert</div>
-          </div>
-          <div className="bg-slate-50 border border-slate-200 rounded-lg p-4 text-center">
-            <div className="text-2xl font-bold text-slate-700">{skippedCount}</div>
-            <div className="text-sm text-slate-500">Uebersprungen</div>
-          </div>
-        </div>
-
-        <div className="flex gap-3">
-          <button
-            onClick={handleSave}
-            disabled={saving}
-            className="flex-1 px-4 py-2.5 bg-teal-600 text-white rounded-lg font-medium hover:bg-teal-700 disabled:opacity-50"
-          >
-            {saving ? 'Speichern...' : 'Ground Truth speichern'}
-          </button>
-          <button
-            onClick={() => { setShowSummary(false); setCurrentIndex(0) }}
-            className="px-4 py-2.5 bg-slate-100 text-slate-700 rounded-lg font-medium hover:bg-slate-200"
-          >
-            Nochmal durchgehen
-          </button>
-        </div>
-
-        {savedMessage && (
-          <div className="mt-4 p-3 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm">
-            {savedMessage}
-          </div>
-        )}
-        {error && (
-          <div className="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">{error}</div>
-        )}
-
-        {/* Entry list for quick review */}
-        <div className="mt-6 max-h-96 overflow-y-auto">
-          <table className="w-full text-sm">
-            <thead className="sticky top-0 bg-white">
-              <tr className="border-b border-slate-200">
-                <th className="text-left py-2 px-2 text-slate-500">#</th>
-                <th className="text-left py-2 px-2 text-slate-500">English</th>
-                <th className="text-left py-2 px-2 text-slate-500">Deutsch</th>
-                <th className="text-left py-2 px-2 text-slate-500">Status</th>
-              </tr>
-            </thead>
-            <tbody>
-              {entries.map((e, i) => (
-                <tr
-                  key={i}
-                  onClick={() => goTo(i)}
-                  className="border-b border-slate-100 hover:bg-slate-50 cursor-pointer"
-                >
-                  <td className="py-1.5 px-2 text-slate-400">{i + 1}</td>
-                  <td className="py-1.5 px-2">{e.english}</td>
-                  <td className="py-1.5 px-2">{e.german}</td>
-                  <td className="py-1.5 px-2">
-                    <span className={`inline-block px-2 py-0.5 rounded-full text-xs font-medium ${
-                      e.status === 'confirmed' ? 'bg-green-100 text-green-700' :
-                      e.status === 'edited' ? 'bg-blue-100 text-blue-700' :
-                      e.status === 'skipped' ? 'bg-slate-100 text-slate-500' :
-                      'bg-yellow-100 text-yellow-700'
-                    }`}>
-                      {e.status === 'confirmed' ? 'OK' :
-                       e.status === 'edited' ? 'Editiert' :
-                       e.status === 'skipped' ? 'Skip' : 'Offen'}
-                    </span>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </div>
+      <GroundTruthSummary
+        entries={entries}
+        confirmedCount={confirmedCount}
+        editedCount={editedCount}
+        skippedCount={skippedCount}
+        saving={saving}
+        savedMessage={savedMessage}
+        error={error}
+        isFullscreen={isFullscreen}
+        onSave={handleSave}
+        onRestart={() => { setShowSummary(false); setCurrentIndex(0) }}
+        onToggleFullscreen={() => setIsFullscreen(!isFullscreen)}
+        onGoTo={goTo}
+      />
     )
   }
 
@@ -521,7 +351,7 @@ export function GroundTruthPanel({ sessionId, selectedPage, pageImageUrl }: Grou
             <>
               {/* Row crop */}
               {imageNatural.w > 0 && (
-                <ImageCrop
+                <GTImageCrop
                   imageUrl={imageUrl}
                   bbox={currentEntry.bbox}
                   naturalWidth={imageNatural.w}
@@ -534,7 +364,7 @@ export function GroundTruthPanel({ sessionId, selectedPage, pageImageUrl }: Grou
               {imageNatural.w > 0 && (
                 <div className="grid grid-cols-3 gap-2">
                   {currentEntry.bbox_en.w > 0 && (
-                    <ImageCrop
+                    <GTImageCrop
                       imageUrl={imageUrl}
                       bbox={currentEntry.bbox_en}
                       naturalWidth={imageNatural.w}
@@ -544,7 +374,7 @@ export function GroundTruthPanel({ sessionId, selectedPage, pageImageUrl }: Grou
                     />
                   )}
                   {currentEntry.bbox_de.w > 0 && (
-                    <ImageCrop
+                    <GTImageCrop
                       imageUrl={imageUrl}
                       bbox={currentEntry.bbox_de}
                       naturalWidth={imageNatural.w}
@@ -554,7 +384,7 @@ export function GroundTruthPanel({ sessionId, selectedPage, pageImageUrl }: Grou
                     />
                   )}
                   {currentEntry.bbox_ex.w > 0 && (
-                    <ImageCrop
+                    <GTImageCrop
                       imageUrl={imageUrl}
                       bbox={currentEntry.bbox_ex}
                       naturalWidth={imageNatural.w}
diff --git a/admin-lehrer/components/ocr/GroundTruthSummary.tsx b/admin-lehrer/components/ocr/GroundTruthSummary.tsx
new file mode 100644
index 0000000..88df4f1
--- /dev/null
+++ b/admin-lehrer/components/ocr/GroundTruthSummary.tsx
@@ -0,0 +1,143 @@
+'use client'
+
+/**
+ * GroundTruthSummary — Summary view shown after all entries have been reviewed.
+ *
+ * Displays confirmed/edited/skipped counts, a save button, and a
+ * clickable table of all entries for quick navigation back to any row.
+ */
+
+import type { GTEntry } from './ground-truth-types'
+
+interface GroundTruthSummaryProps {
+  entries: GTEntry[]
+  confirmedCount: number
+  editedCount: number
+  skippedCount: number
+  saving: boolean
+  savedMessage: string | null
+  error: string | null
+  isFullscreen: boolean
+  onSave: () => void
+  onRestart: () => void
+  onToggleFullscreen: () => void
+  onGoTo: (index: number) => void
+}
+
+export function GroundTruthSummary({
+  entries,
+  confirmedCount,
+  editedCount,
+  skippedCount,
+  saving,
+  savedMessage,
+  error,
+  isFullscreen,
+  onSave,
+  onRestart,
+  onToggleFullscreen,
+  onGoTo,
+}: GroundTruthSummaryProps) {
+  return (
+    <div className={`bg-white rounded-xl border border-slate-200 p-6 ${
+      isFullscreen ? 'fixed inset-0 z-50 overflow-auto m-0 rounded-none' : ''
+    }`}>
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-lg font-semibold text-slate-900">Zusammenfassung</h3>
+        <button
+          onClick={onToggleFullscreen}
+          className="p-1.5 rounded-lg hover:bg-slate-100 text-slate-500 hover:text-slate-700 transition-colors"
+          title={isFullscreen ? 'Vollbild verlassen (Esc)' : 'Vollbild'}
+        >
+          {isFullscreen ? (
+            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M9 9V4.5M9 9H4.5M9 9 3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25" />
+            </svg>
+          ) : (
+            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
+            </svg>
+          )}
+        </button>
+      </div>
+      <div className="grid grid-cols-3 gap-4 mb-6">
+        <div className="bg-green-50 border border-green-200 rounded-lg p-4 text-center">
+          <div className="text-2xl font-bold text-green-700">{confirmedCount}</div>
+          <div className="text-sm text-green-600">Bestaetigt</div>
+        </div>
+        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 text-center">
+          <div className="text-2xl font-bold text-blue-700">{editedCount}</div>
+          <div className="text-sm text-blue-600">Editiert</div>
+        </div>
+        <div className="bg-slate-50 border border-slate-200 rounded-lg p-4 text-center">
+          <div className="text-2xl font-bold text-slate-700">{skippedCount}</div>
+          <div className="text-sm text-slate-500">Uebersprungen</div>
+        </div>
+      </div>
+
+      <div className="flex gap-3">
+        <button
+          onClick={onSave}
+          disabled={saving}
+          className="flex-1 px-4 py-2.5 bg-teal-600 text-white rounded-lg font-medium hover:bg-teal-700 disabled:opacity-50"
+        >
+          {saving ? 'Speichern...' : 'Ground Truth speichern'}
+        </button>
+        <button
+          onClick={onRestart}
+          className="px-4 py-2.5 bg-slate-100 text-slate-700 rounded-lg font-medium hover:bg-slate-200"
+        >
+          Nochmal durchgehen
+        </button>
+      </div>
+
+      {savedMessage && (
+        <div className="mt-4 p-3 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm">
+          {savedMessage}
+        </div>
+      )}
+      {error && (
+        <div className="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">{error}</div>
+      )}
+
+      {/* Entry list for quick review */}
+      <div className="mt-6 max-h-96 overflow-y-auto">
+        <table className="w-full text-sm">
+          <thead className="sticky top-0 bg-white">
+            <tr className="border-b border-slate-200">
+              <th className="text-left py-2 px-2 text-slate-500">#</th>
+              <th className="text-left py-2 px-2 text-slate-500">English</th>
+              <th className="text-left py-2 px-2 text-slate-500">Deutsch</th>
+              <th className="text-left py-2 px-2 text-slate-500">Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            {entries.map((e, i) => (
+              <tr
+                key={i}
+                onClick={() => onGoTo(i)}
+                className="border-b border-slate-100 hover:bg-slate-50 cursor-pointer"
+              >
+                <td className="py-1.5 px-2 text-slate-400">{i + 1}</td>
+                <td className="py-1.5 px-2">{e.english}</td>
+                <td className="py-1.5 px-2">{e.german}</td>
+                <td className="py-1.5 px-2">
+                  <span className={`inline-block px-2 py-0.5 rounded-full text-xs font-medium ${
+                    e.status === 'confirmed' ? 'bg-green-100 text-green-700' :
+                    e.status === 'edited' ? 'bg-blue-100 text-blue-700' :
+                    e.status === 'skipped' ? 'bg-slate-100 text-slate-500' :
+                    'bg-yellow-100 text-yellow-700'
+                  }`}>
+                    {e.status === 'confirmed' ? 'OK' :
+                     e.status === 'edited' ? 'Editiert' :
+                     e.status === 'skipped' ? 'Skip' : 'Offen'}
+                  </span>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-lehrer/components/ocr/ground-truth-types.ts b/admin-lehrer/components/ocr/ground-truth-types.ts
new file mode 100644
index 0000000..ba859a0
--- /dev/null
+++ b/admin-lehrer/components/ocr/ground-truth-types.ts
@@ -0,0 +1,50 @@
+/**
+ * Shared types and constants for the Ground Truth labeling UI.
+ */
+
+// ---------- Types ----------
+
+export interface BBox {
+  x: number
+  y: number
+  w: number
+  h: number
+}
+
+export interface GTEntry {
+  row_index: number
+  english: string
+  german: string
+  example: string
+  confidence: number
+  bbox: BBox
+  bbox_en: BBox
+  bbox_de: BBox
+  bbox_ex: BBox
+  status?: 'pending' | 'confirmed' | 'edited' | 'skipped'
+}
+
+export interface GroundTruthPanelProps {
+  sessionId: string
+  selectedPage: number
+  pageImageUrl: string
+}
+
+// ---------- Constants ----------
+
+export const KLAUSUR_API = '/klausur-api'
+
+export const STATUS_COLORS: Record<string, { fill: string; stroke: string }> = {
+  current:   { fill: 'rgba(250,204,21,0.25)', stroke: '#eab308' },   // yellow
+  confirmed: { fill: 'rgba(34,197,94,0.18)',  stroke: '#16a34a' },   // green
+  edited:    { fill: 'rgba(59,130,246,0.18)', stroke: '#2563eb' },   // blue
+  skipped:   { fill: 'rgba(148,163,184,0.15)', stroke: '#94a3b8' },  // gray
+  pending:   { fill: 'rgba(0,0,0,0)',          stroke: '#cbd5e1' },   // outline only
+}
+
+// ---------- Helpers ----------
+
+export function getEntryColor(entry: GTEntry, index: number, currentIndex: number) {
+  if (index === currentIndex) return STATUS_COLORS.current
+  return STATUS_COLORS[entry.status || 'pending']
+}
diff --git a/admin-lehrer/lib/module-registry-data.ts b/admin-lehrer/lib/module-registry-data.ts
new file mode 100644
index 0000000..58189e6
--- /dev/null
+++ b/admin-lehrer/lib/module-registry-data.ts
@@ -0,0 +1,515 @@
+/**
+ * Module Registry Data - All backend module definitions
+ *
+ * This file contains the pure data array of module definitions.
+ * Helper functions are in module-registry.ts.
+ */
+
+import type { BackendModule } from './module-registry'
+
+export const MODULE_REGISTRY: BackendModule[] = [
+  // ===========================================
+  // COMPLIANCE MODULES
+  // ===========================================
+  {
+    id: 'consent-documents',
+    name: 'Consent Dokumente',
+    description: 'Verwaltung rechtlicher Dokumente (AGB, Datenschutz, etc.)',
+    category: 'compliance',
+    backend: {
+      service: 'consent-service',
+      port: 8081,
+      basePath: '/api/consent/admin',
+      endpoints: [
+        { path: '/documents', method: 'GET', description: 'Liste aller Dokumente' },
+        { path: '/documents', method: 'POST', description: 'Dokument erstellen' },
+        { path: '/documents/{id}', method: 'GET', description: 'Dokument Details' },
+        { path: '/documents/{id}', method: 'PUT', description: 'Dokument aktualisieren' },
+        { path: '/documents/{id}', method: 'DELETE', description: 'Dokument loeschen' },
+      ]
+    },
+    frontend: {
+      adminV2Page: '/sdk/consent-management',
+      oldAdminPage: '/admin/consent',
+      status: 'connected'
+    },
+    priority: 'critical'
+  },
+  {
+    id: 'consent-versions',
+    name: 'Dokument-Versionierung',
+    description: 'Versionsverwaltung und Freigabe-Workflow fuer rechtliche Dokumente',
+    category: 'compliance',
+    backend: {
+      service: 'consent-service',
+      port: 8081,
+      basePath: '/api/consent/admin',
+      endpoints: [
+        { path: '/documents/{id}/versions', method: 'GET', description: 'Versionen eines Dokuments' },
+        { path: '/versions', method: 'POST', description: 'Neue Version erstellen' },
+        { path: '/versions/{id}', method: 'PUT', description: 'Version aktualisieren' },
+        { path: '/versions/{id}', method: 'DELETE', description: 'Version loeschen' },
+        { path: '/versions/{id}/submit-review', method: 'POST', description: 'Zur Pruefung einreichen' },
+        { path: '/versions/{id}/approve', method: 'POST', description: 'Version genehmigen' },
+        { path: '/versions/{id}/reject', method: 'POST', description: 'Version ablehnen' },
+        { path: '/versions/{id}/publish', method: 'POST', description: 'Version veroeffentlichen' },
+        { path: '/versions/{id}/approval-history', method: 'GET', description: 'Genehmigungsverlauf' },
+        { path: '/versions/upload-word', method: 'POST', description: 'Word-Dokument importieren' },
+      ]
+    },
+    frontend: {
+      adminV2Page: '/sdk/workflow',
+      oldAdminPage: '/admin/consent (Versions Tab)',
+      status: 'connected'
+    },
+    dependencies: ['consent-documents'],
+    priority: 'critical'
+  },
+  {
+    id: 'consent-user',
+    name: 'Nutzer-Einwilligungen',
+    description: 'Tracking von Nutzer-Einwilligungen fuer DSGVO-Compliance',
+    category: 'compliance',
+    backend: {
+      service: 'consent-service',
+      port: 8081,
+      basePath: '/api/consent',
+      endpoints: [
+        { path: '/status', method: 'GET', description: 'Einwilligungsstatus pruefen' },
+        { path: '/give', method: 'POST', description: 'Einwilligung erteilen' },
+        { path: '/withdraw', method: 'POST', description: 'Einwilligung widerrufen' },
+        { path: '/history', method: 'GET', description: 'Einwilligungshistorie' },
+      ]
+    },
+    frontend: {
+      adminV2Page: '/sdk/einwilligungen',
+      oldAdminPage: '/admin/consent (Users Tab)',
+      status: 'connected',
+    },
+    priority: 'critical',
+  },
+  {
+    id: 'dsr-requests',
+    name: 'Datenschutzanfragen (DSR)',
+    description: 'DSGVO Art. 15-21 Anfragen verwalten',
+    category: 'compliance',
+    backend: {
+      service: 'python-backend',
+      port: 8000,
+      basePath: '/api/dsr',
+      endpoints: [
+        { path: '/requests', method: 'GET', description: 'Alle DSR-Anfragen' },
+        { path: '/requests', method: 'POST', description: 'Neue Anfrage erstellen' },
+        { path: '/requests/{id}', method: 'GET', description: 'Anfrage-Details' },
+        { path: '/requests/{id}/process', method: 'POST', description: 'Anfrage bearbeiten' },
+        { path: '/requests/{id}/export', method: 'GET', description: 'Daten exportieren' },
+      ]
+    },
+    frontend: {
+      adminV2Page: '/sdk/dsr',
+      oldAdminPage: '/admin/dsr',
+      status: 'connected'
+    },
+    priority: 'high',
+  },
+  {
+    id: 'dsms',
+    name: 'Datenschutz-Management-System',
+    description: 'Zentrales DSMS fuer Dokumentation und Compliance',
+    category: 'compliance',
+    backend: {
+      service: 'python-backend',
+      port: 8000,
+      basePath: '/api/dsms',
+      endpoints: [
+        { path: '/documents', method: 'GET', description: 'DSMS-Dokumente' },
+        { path: '/processes', method: 'GET', description: 'Verarbeitungsverzeichnis' },
+        { path: '/toms', method: 'GET', description: 'TOM-Katalog' },
+        { path: '/audits', method: 'GET', description: 'Audit-Historie' },
+      ]
+    },
+    frontend: {
+      adminV2Page: '/sdk/dsms',
+      oldAdminPage: '/admin/dsms',
+      status: 'connected'
+    },
+    priority: 'medium'
+  },
+  {
+    id: 'cookie-categories',
+    name: 'Cookie-Kategorien',
+    description: 'Verwaltung von Cookie-Kategorien fuer Consent Banner',
+    category: 'compliance',
+    backend: {
+      service: 'consent-service',
+      port: 8081,
+      basePath: '/api/consent/admin',
+      endpoints: [
+        { path: '/cookies/categories', method: 'GET', description: 'Alle Cookie-Kategorien' },
+        { path: '/cookies/categories', method: 'POST', description: 'Kategorie erstellen' },
+        { path: '/cookies/categories/{id}', method: 'PUT', description: 'Kategorie aktualisieren' },
+        { path: '/cookies/categories/{id}', method: 'DELETE', description: 'Kategorie loeschen' },
+      ]
+    },
+    frontend: {
+      adminV2Page: undefined,
+      oldAdminPage: '/admin/consent (Cookies Tab)',
+      status: 'not-connected'
+    },
+    priority: 'medium',
+    notes: 'Cookie-Kategorien Tab im alten Admin vorhanden'
+  },
+
+  // ===========================================
+  // AI MODULES
+  // ===========================================
+  {
+    id: 'ai-agents',
+    name: 'AI Agents',
+    description: 'Multi-Agent System Verwaltung und Monitoring',
+    category: 'ai',
+    backend: {
+      service: 'voice-service',
+      port: 8088,
+      basePath: '/api/v1/agents',
+      endpoints: [
+        { path: '/sessions', method: 'GET', description: 'Agent-Sessions' },
+        { path: '/statistics', method: 'GET', description: 'Agent-Statistiken' },
+        { path: '/{agentId}', method: 'GET', description: 'Agent-Details' },
+        { path: '/{agentId}/soul', method: 'GET', description: 'SOUL-Konfiguration' },
+      ]
+    },
+    frontend: {
+      adminV2Page: '/ai/agents',
+      oldAdminPage: undefined,
+      status: 'connected'
+    },
+    priority: 'high',
+    notes: 'Neues Multi-Agent System'
+  },
+  {
+    id: 'ai-quality',
+    name: 'AI Quality (BQAS)',
+    description: 'KI-Qualitaetssicherung und Evaluierung',
+    category: 'ai',
+    backend: {
+      service: 'voice-service',
+      port: 8088,
+      basePath: '/api/bqas',
+      endpoints: [
+        { path: '/evaluate', method: 'POST', description: 'Antwort evaluieren' },
+        { path: '/metrics', method: 'GET', description: 'Qualitaetsmetriken' },
+      ]
+    },
+    frontend: {
+      adminV2Page: '/ai/quality',
+      oldAdminPage: '/admin/quality',
+      status: 'connected'
+    },
+    priority: 'high'
+  },
+  {
+    id: 'magic-help',
+    name: 'Magic Help (TrOCR)',
+    description: 'Handschrifterkennung mit TrOCR und LoRA Fine-Tuning',
+    category: 'ai',
+    backend: {
+      service: 'klausur-service',
+      port: 8086,
+      basePath: '/api/klausur/trocr',
+      endpoints: [
+        { path: '/status', method: 'GET', description: 'TrOCR Status' },
+        { path: '/extract', method: 'POST', description: 'Text aus Bild extrahieren' },
+        { path: '/training/examples', method: 'GET', description: 'Trainingsbeispiele' },
+        { path: '/training/add', method: 'POST', description: 'Trainingsbeispiel hinzufuegen' },
+        { path: '/training/fine-tune', method: 'POST', description: 'Fine-Tuning starten' },
+      ]
+    },
+    frontend: {
+      adminV2Page: '/ai/magic-help',
+      oldAdminPage: '/admin/magic-help',
+      status: 'connected'
+    },
+    priority: 'medium',
+    notes: 'Lokale Handschrifterkennung mit Privacy-by-Design'
+  },
+  {
+    id: 'klausur-korrektur',
+    name: 'Klausur-Korrektur',
+    description: 'KI-gestuetzte Abitur-Korrektur mit EH-Vorschlaegen',
+    category: 'ai',
+    backend: {
+      service: 'klausur-service',
+      port: 8086,
+      basePath: '/api/v1',
+      endpoints: [
+        { path: '/klausuren', method: 'GET', description: 'Alle Klausuren' },
+        { path: '/klausuren', method: 'POST', description: 'Klausur erstellen' },
+        { path: '/klausuren/{id}/students', method: 'GET', description: 'Studentenarbeiten' },
+        { path: '/students/{id}/annotations', method: 'GET', description: 'Anmerkungen' },
+        { path: '/students/{id}/gutachten/generate', method: 'POST', description: 'Gutachten generieren' },
+      ]
+    },
+    frontend: {
+      adminV2Page: '/ai/klausur-korrektur',
+      oldAdminPage: '/admin/klausur-korrektur',
+      status: 'not-connected'
+    },
+    priority: 'high',
+    notes: 'Komplexes Modul mit eigenem Backend-Service'
+  },
+  {
+    id: 'ocr-labeling',
+    name: 'OCR-Labeling',
+    description: 'Handschrift-Training und Label-Verwaltung',
+    category: 'ai',
+    backend: {
+      service: 'python-backend',
+      port: 8000,
+      basePath: '/api/ocr',
+      endpoints: [
+        { path: '/samples', method: 'GET', description: 'Training-Samples' },
+        { path: '/labels', method: 'GET', description: 'Label-Kategorien' },
+        { path: '/train', method: 'POST', description: 'Training starten' },
+      ]
+    },
+    frontend: {
+      adminV2Page: '/ai/ocr-labeling',
+      oldAdminPage: '/admin/ocr-labeling',
+      status: 'not-connected'
+    },
+    priority: 'medium'
+  },
+  {
+    id: 'rag-management',
+    name: 'RAG & Daten',
+    description: 'Retrieval Augmented Generation und Training Data',
+    category: 'ai',
+    backend: {
+      service: 'python-backend',
+      port: 8000,
+      basePath: '/api/rag',
+      endpoints: [
+        { path: '/documents', method: 'GET', description: 'RAG-Dokumente' },
+        { path: '/collections', method: 'GET', description: 'Vector-Collections' },
+        { path: '/query', method: 'POST', description: 'RAG-Abfrage' },
+      ]
+    },
+    frontend: {
+      adminV2Page: '/ai/rag',
+      oldAdminPage: '/admin/rag',
+      status: 'connected'
+    },
+    priority: 'medium'
+  },
+
+  // ===========================================
+  // INFRASTRUCTURE MODULES
+  // ===========================================
+  {
+    id: 'gpu-infrastructure',
+    name: 'GPU Infrastruktur',
+    description: 'vast.ai GPU-Management und Monitoring',
+    category: 'infrastructure',
+    backend: {
+      service: 'python-backend',
+      port: 8000,
+      basePath: '/api/gpu',
+      endpoints: [
+        { path: '/instances', method: 'GET', description: 'GPU-Instanzen' },
+        { path: '/instances', method: 'POST', description: 'Instanz erstellen' },
+        { path: '/usage', method: 'GET', description: 'Nutzungsstatistiken' },
+      ]
+    },
+    frontend: {
+      adminV2Page: '/infrastructure/gpu',
+      oldAdminPage: '/admin/gpu',
+      status: 'connected'
+    },
+    priority: 'medium'
+  },
+  {
+    id: 'security-dashboard',
+    name: 'Security Dashboard',
+    description: 'DevSecOps Dashboard und Vulnerability Scans',
+    category: 'infrastructure',
+    backend: {
+      service: 'python-backend',
+      port: 8000,
+      basePath: '/api/security',
+      endpoints: [
+        { path: '/scans', method: 'GET', description: 'Security-Scans' },
+        { path: '/vulnerabilities', method: 'GET', description: 'Schwachstellen' },
+        { path: '/compliance', method: 'GET', description: 'Compliance-Status' },
+      ]
+    },
+    frontend: {
+      adminV2Page: '/infrastructure/security',
+      oldAdminPage: '/admin/security',
+      status: 'connected'
+    },
+    priority: 'high'
+  },
+  {
+    id: 'sbom',
+    name: 'SBOM',
+    description: 'Software Bill of Materials',
+    category: 'infrastructure',
+    backend: {
+      service: 'python-backend',
+      port: 8000,
+      basePath: '/api/sbom',
+      endpoints: [
+        { path: '/components', method: 'GET', description: 'Komponenten-Liste' },
+        { path: '/licenses', method: 'GET', description: 'Lizenz-Uebersicht' },
+        { path: '/export', method: 'GET', description: 'SBOM exportieren' },
+      ]
+    },
+    frontend: {
+      adminV2Page: '/infrastructure/sbom',
+      oldAdminPage: '/admin/sbom',
+      status: 'connected'
+    },
+    priority: 'medium'
+  },
+
+  {
+    id: 'middleware',
+    name: 'Middleware Manager',
+    description: 'Verwaltung und Monitoring der Backend-Middleware',
+    category: 'infrastructure',
+    backend: {
+      service: 'python-backend',
+      port: 8000,
+      basePath: '/api/middleware',
+      endpoints: [
+        { path: '/status', method: 'GET', description: 'Middleware-Status' },
+        { path: '/config', method: 'GET', description: 'Konfiguration' },
+      ]
+    },
+    frontend: {
+      adminV2Page: '/infrastructure/middleware',
+      oldAdminPage: '/admin/middleware',
+      status: 'connected'
+    },
+    priority: 'medium'
+  },
+  {
+    id: 'ci-cd',
+    name: 'CI/CD Pipeline',
+    description: 'Build-Pipeline und Deployment-Management',
+    category: 'infrastructure',
+    backend: {
+      service: 'python-backend',
+      port: 8000,
+      basePath: '/api/builds',
+      endpoints: [
+        { path: '/pipelines', method: 'GET', description: 'Pipeline-Status' },
+        { path: '/builds', method: 'GET', description: 'Build-Historie' },
+      ]
+    },
+    frontend: {
+      adminV2Page: '/infrastructure/ci-cd',
+      oldAdminPage: '/admin/builds',
+      status: 'connected'
+    },
+    priority: 'medium'
+  },
+
+  // ===========================================
+  // EDUCATION MODULES
+  // ===========================================
+  {
+    id: 'edu-search',
+    name: 'Bildungssuche',
+    description: 'Suche nach Bildungsinhalten und Ressourcen',
+    category: 'education',
+    backend: {
+      service: 'edu-search-service',
+      port: 8089,
+      basePath: '/api/edu',
+      endpoints: [
+        { path: '/search', method: 'GET', description: 'Bildungssuche' },
+        { path: '/resources', method: 'GET', description: 'Ressourcen' },
+      ]
+    },
+    frontend: {
+      adminV2Page: '/education/edu-search',
+      oldAdminPage: '/admin/edu-search',
+      status: 'connected'
+    },
+    priority: 'medium'
+  },
+
+  // ===========================================
+  // COMMUNICATION MODULES
+  // ===========================================
+  {
+    id: 'alerts',
+    name: 'Alerts & Benachrichtigungen',
+    description: 'System-Benachrichtigungen und Alerts',
+    category: 'communication',
+    backend: {
+      service: 'python-backend',
+      port: 8000,
+      basePath: '/api/alerts',
+      endpoints: [
+        { path: '/notifications', method: 'GET', description: 'Benachrichtigungen' },
+        { path: '/alerts', method: 'GET', description: 'Aktive Alerts' },
+      ]
+    },
+    frontend: {
+      adminV2Page: '/communication/alerts',
+      oldAdminPage: '/admin/alerts',
+      status: 'connected'
+    },
+    priority: 'medium'
+  },
+  {
+    id: 'unified-inbox',
+    name: 'Unified Inbox',
+    description: 'E-Mail-Konten und KI-Analyse',
+    category: 'communication',
+    backend: {
+      service: 'python-backend',
+      port: 8000,
+      basePath: '/api/mail',
+      endpoints: [
+        { path: '/accounts', method: 'GET', description: 'E-Mail-Konten' },
+        { path: '/messages', method: 'GET', description: 'Nachrichten' },
+        { path: '/analyze', method: 'POST', description: 'KI-Analyse' },
+      ]
+    },
+    frontend: {
+      adminV2Page: '/communication/mail',
+      oldAdminPage: '/admin/mail',
+      status: 'connected'
+    },
+    priority: 'low'
+  },
+
+  // ===========================================
+  // DEVELOPMENT MODULES
+  // ===========================================
+  {
+    id: 'voice-service',
+    name: 'Voice Service',
+    description: 'Voice-First Interface',
+    category: 'development',
+    backend: {
+      service: 'voice-service',
+      port: 8088,
+      basePath: '/api/voice',
+      endpoints: [
+        { path: '/transcribe', method: 'POST', description: 'Sprache transkribieren' },
+        { path: '/synthesize', method: 'POST', description: 'Text zu Sprache' },
+      ]
+    },
+    frontend: {
+      adminV2Page: '/development/voice',
+      oldAdminPage: '/admin/voice',
+      status: 'not-connected'
+    },
+    priority: 'low'
+  },
+]
diff --git a/admin-lehrer/lib/module-registry.ts b/admin-lehrer/lib/module-registry.ts
index 0d18471..058325f 100644
--- a/admin-lehrer/lib/module-registry.ts
+++ b/admin-lehrer/lib/module-registry.ts
@@ -6,6 +6,9 @@
  * - Backend service and endpoints
  * - Frontend pages that use it
  * - Connection status (connected, partial, not connected)
+ *
+ * Module definitions live in ./module-registry-data.ts
+ * This file exports the type, re-exports the data, and provides helper functions.
  */
 
 export interface BackendModule {
@@ -33,512 +36,11 @@ export interface BackendModule {
   notes?: string
 }
 
-export const MODULE_REGISTRY: BackendModule[] = [
-  // ===========================================
-  // COMPLIANCE MODULES
-  // ===========================================
-  {
-    id: 'consent-documents',
-    name: 'Consent Dokumente',
-    description: 'Verwaltung rechtlicher Dokumente (AGB, Datenschutz, etc.)',
-    category: 'compliance',
-    backend: {
-      service: 'consent-service',
-      port: 8081,
-      basePath: '/api/consent/admin',
-      endpoints: [
-        { path: '/documents', method: 'GET', description: 'Liste aller Dokumente' },
-        { path: '/documents', method: 'POST', description: 'Dokument erstellen' },
-        { path: '/documents/{id}', method: 'GET', description: 'Dokument Details' },
-        { path: '/documents/{id}', method: 'PUT', description: 'Dokument aktualisieren' },
-        { path: '/documents/{id}', method: 'DELETE', description: 'Dokument loeschen' },
-      ]
-    },
-    frontend: {
-      adminV2Page: '/sdk/consent-management',
-      oldAdminPage: '/admin/consent',
-      status: 'connected'
-    },
-    priority: 'critical'
-  },
-  {
-    id: 'consent-versions',
-    name: 'Dokument-Versionierung',
-    description: 'Versionsverwaltung und Freigabe-Workflow fuer rechtliche Dokumente',
-    category: 'compliance',
-    backend: {
-      service: 'consent-service',
-      port: 8081,
-      basePath: '/api/consent/admin',
-      endpoints: [
-        { path: '/documents/{id}/versions', method: 'GET', description: 'Versionen eines Dokuments' },
-        { path: '/versions', method: 'POST', description: 'Neue Version erstellen' },
-        { path: '/versions/{id}', method: 'PUT', description: 'Version aktualisieren' },
-        { path: '/versions/{id}', method: 'DELETE', description: 'Version loeschen' },
-        { path: '/versions/{id}/submit-review', method: 'POST', description: 'Zur Pruefung einreichen' },
-        { path: '/versions/{id}/approve', method: 'POST', description: 'Version genehmigen' },
-        { path: '/versions/{id}/reject', method: 'POST', description: 'Version ablehnen' },
-        { path: '/versions/{id}/publish', method: 'POST', description: 'Version veroeffentlichen' },
-        { path: '/versions/{id}/approval-history', method: 'GET', description: 'Genehmigungsverlauf' },
-        { path: '/versions/upload-word', method: 'POST', description: 'Word-Dokument importieren' },
-      ]
-    },
-    frontend: {
-      adminV2Page: '/sdk/workflow',
-      oldAdminPage: '/admin/consent (Versions Tab)',
-      status: 'connected'
-    },
-    dependencies: ['consent-documents'],
-    priority: 'critical'
-  },
-  {
-    id: 'consent-user',
-    name: 'Nutzer-Einwilligungen',
-    description: 'Tracking von Nutzer-Einwilligungen fuer DSGVO-Compliance',
-    category: 'compliance',
-    backend: {
-      service: 'consent-service',
-      port: 8081,
-      basePath: '/api/consent',
-      endpoints: [
-        { path: '/status', method: 'GET', description: 'Einwilligungsstatus pruefen' },
-        { path: '/give', method: 'POST', description: 'Einwilligung erteilen' },
-        { path: '/withdraw', method: 'POST', description: 'Einwilligung widerrufen' },
-        { path: '/history', method: 'GET', description: 'Einwilligungshistorie' },
-      ]
-    },
-    frontend: {
-      adminV2Page: '/sdk/einwilligungen',
-      oldAdminPage: '/admin/consent (Users Tab)',
-      status: 'connected',
-    },
-    priority: 'critical',
-  },
-  {
-    id: 'dsr-requests',
-    name: 'Datenschutzanfragen (DSR)',
-    description: 'DSGVO Art. 15-21 Anfragen verwalten',
-    category: 'compliance',
-    backend: {
-      service: 'python-backend',
-      port: 8000,
-      basePath: '/api/dsr',
-      endpoints: [
-        { path: '/requests', method: 'GET', description: 'Alle DSR-Anfragen' },
-        { path: '/requests', method: 'POST', description: 'Neue Anfrage erstellen' },
-        { path: '/requests/{id}', method: 'GET', description: 'Anfrage-Details' },
-        { path: '/requests/{id}/process', method: 'POST', description: 'Anfrage bearbeiten' },
-        { path: '/requests/{id}/export', method: 'GET', description: 'Daten exportieren' },
-      ]
-    },
-    frontend: {
-      adminV2Page: '/sdk/dsr',
-      oldAdminPage: '/admin/dsr',
-      status: 'connected'
-    },
-    priority: 'high',
-  },
-  {
-    id: 'dsms',
-    name: 'Datenschutz-Management-System',
-    description: 'Zentrales DSMS fuer Dokumentation und Compliance',
-    category: 'compliance',
-    backend: {
-      service: 'python-backend',
-      port: 8000,
-      basePath: '/api/dsms',
-      endpoints: [
-        { path: '/documents', method: 'GET', description: 'DSMS-Dokumente' },
-        { path: '/processes', method: 'GET', description: 'Verarbeitungsverzeichnis' },
-        { path: '/toms', method: 'GET', description: 'TOM-Katalog' },
-        { path: '/audits', method: 'GET', description: 'Audit-Historie' },
-      ]
-    },
-    frontend: {
-      adminV2Page: '/sdk/dsms',
-      oldAdminPage: '/admin/dsms',
-      status: 'connected'
-    },
-    priority: 'medium'
-  },
-  {
-    id: 'cookie-categories',
-    name: 'Cookie-Kategorien',
-    description: 'Verwaltung von Cookie-Kategorien fuer Consent Banner',
-    category: 'compliance',
-    backend: {
-      service: 'consent-service',
-      port: 8081,
-      basePath: '/api/consent/admin',
-      endpoints: [
-        { path: '/cookies/categories', method: 'GET', description: 'Alle Cookie-Kategorien' },
-        { path: '/cookies/categories', method: 'POST', description: 'Kategorie erstellen' },
-        { path: '/cookies/categories/{id}', method: 'PUT', description: 'Kategorie aktualisieren' },
-        { path: '/cookies/categories/{id}', method: 'DELETE', description: 'Kategorie loeschen' },
-      ]
-    },
-    frontend: {
-      adminV2Page: undefined,
-      oldAdminPage: '/admin/consent (Cookies Tab)',
-      status: 'not-connected'
-    },
-    priority: 'medium',
-    notes: 'Cookie-Kategorien Tab im alten Admin vorhanden'
-  },
+// Re-export data from the data file
+export { MODULE_REGISTRY } from './module-registry-data'
 
-  // ===========================================
-  // AI MODULES
-  // ===========================================
-  {
-    id: 'ai-agents',
-    name: 'AI Agents',
-    description: 'Multi-Agent System Verwaltung und Monitoring',
-    category: 'ai',
-    backend: {
-      service: 'voice-service',
-      port: 8088,
-      basePath: '/api/v1/agents',
-      endpoints: [
-        { path: '/sessions', method: 'GET', description: 'Agent-Sessions' },
-        { path: '/statistics', method: 'GET', description: 'Agent-Statistiken' },
-        { path: '/{agentId}', method: 'GET', description: 'Agent-Details' },
-        { path: '/{agentId}/soul', method: 'GET', description: 'SOUL-Konfiguration' },
-      ]
-    },
-    frontend: {
-      adminV2Page: '/ai/agents',
-      oldAdminPage: undefined,
-      status: 'connected'
-    },
-    priority: 'high',
-    notes: 'Neues Multi-Agent System'
-  },
-  {
-    id: 'ai-quality',
-    name: 'AI Quality (BQAS)',
-    description: 'KI-Qualitaetssicherung und Evaluierung',
-    category: 'ai',
-    backend: {
-      service: 'voice-service',
-      port: 8088,
-      basePath: '/api/bqas',
-      endpoints: [
-        { path: '/evaluate', method: 'POST', description: 'Antwort evaluieren' },
-        { path: '/metrics', method: 'GET', description: 'Qualitaetsmetriken' },
-      ]
-    },
-    frontend: {
-      adminV2Page: '/ai/quality',
-      oldAdminPage: '/admin/quality',
-      status: 'connected'
-    },
-    priority: 'high'
-  },
-  {
-    id: 'magic-help',
-    name: 'Magic Help (TrOCR)',
-    description: 'Handschrifterkennung mit TrOCR und LoRA Fine-Tuning',
-    category: 'ai',
-    backend: {
-      service: 'klausur-service',
-      port: 8086,
-      basePath: '/api/klausur/trocr',
-      endpoints: [
-        { path: '/status', method: 'GET', description: 'TrOCR Status' },
-        { path: '/extract', method: 'POST', description: 'Text aus Bild extrahieren' },
-        { path: '/training/examples', method: 'GET', description: 'Trainingsbeispiele' },
-        { path: '/training/add', method: 'POST', description: 'Trainingsbeispiel hinzufuegen' },
-        { path: '/training/fine-tune', method: 'POST', description: 'Fine-Tuning starten' },
-      ]
-    },
-    frontend: {
-      adminV2Page: '/ai/magic-help',
-      oldAdminPage: '/admin/magic-help',
-      status: 'connected'
-    },
-    priority: 'medium',
-    notes: 'Lokale Handschrifterkennung mit Privacy-by-Design'
-  },
-  {
-    id: 'klausur-korrektur',
-    name: 'Klausur-Korrektur',
-    description: 'KI-gestuetzte Abitur-Korrektur mit EH-Vorschlaegen',
-    category: 'ai',
-    backend: {
-      service: 'klausur-service',
-      port: 8086,
-      basePath: '/api/v1',
-      endpoints: [
-        { path: '/klausuren', method: 'GET', description: 'Alle Klausuren' },
-        { path: '/klausuren', method: 'POST', description: 'Klausur erstellen' },
-        { path: '/klausuren/{id}/students', method: 'GET', description: 'Studentenarbeiten' },
-        { path: '/students/{id}/annotations', method: 'GET', description: 'Anmerkungen' },
-        { path: '/students/{id}/gutachten/generate', method: 'POST', description: 'Gutachten generieren' },
-      ]
-    },
-    frontend: {
-      adminV2Page: '/ai/klausur-korrektur',
-      oldAdminPage: '/admin/klausur-korrektur',
-      status: 'not-connected'
-    },
-    priority: 'high',
-    notes: 'Komplexes Modul mit eigenem Backend-Service'
-  },
-  {
-    id: 'ocr-labeling',
-    name: 'OCR-Labeling',
-    description: 'Handschrift-Training und Label-Verwaltung',
-    category: 'ai',
-    backend: {
-      service: 'python-backend',
-      port: 8000,
-      basePath: '/api/ocr',
-      endpoints: [
-        { path: '/samples', method: 'GET', description: 'Training-Samples' },
-        { path: '/labels', method: 'GET', description: 'Label-Kategorien' },
-        { path: '/train', method: 'POST', description: 'Training starten' },
-      ]
-    },
-    frontend: {
-      adminV2Page: '/ai/ocr-labeling',
-      oldAdminPage: '/admin/ocr-labeling',
-      status: 'not-connected'
-    },
-    priority: 'medium'
-  },
-  {
-    id: 'rag-management',
-    name: 'RAG & Daten',
-    description: 'Retrieval Augmented Generation und Training Data',
-    category: 'ai',
-    backend: {
-      service: 'python-backend',
-      port: 8000,
-      basePath: '/api/rag',
-      endpoints: [
-        { path: '/documents', method: 'GET', description: 'RAG-Dokumente' },
-        { path: '/collections', method: 'GET', description: 'Vector-Collections' },
-        { path: '/query', method: 'POST', description: 'RAG-Abfrage' },
-      ]
-    },
-    frontend: {
-      adminV2Page: '/ai/rag',
-      oldAdminPage: '/admin/rag',
-      status: 'connected'
-    },
-    priority: 'medium'
-  },
-
-  // ===========================================
-  // INFRASTRUCTURE MODULES
-  // ===========================================
-  {
-    id: 'gpu-infrastructure',
-    name: 'GPU Infrastruktur',
-    description: 'vast.ai GPU-Management und Monitoring',
-    category: 'infrastructure',
-    backend: {
-      service: 'python-backend',
-      port: 8000,
-      basePath: '/api/gpu',
-      endpoints: [
-        { path: '/instances', method: 'GET', description: 'GPU-Instanzen' },
-        { path: '/instances', method: 'POST', description: 'Instanz erstellen' },
-        { path: '/usage', method: 'GET', description: 'Nutzungsstatistiken' },
-      ]
-    },
-    frontend: {
-      adminV2Page: '/infrastructure/gpu',
-      oldAdminPage: '/admin/gpu',
-      status: 'connected'
-    },
-    priority: 'medium'
-  },
-  {
-    id: 'security-dashboard',
-    name: 'Security Dashboard',
-    description: 'DevSecOps Dashboard und Vulnerability Scans',
-    category: 'infrastructure',
-    backend: {
-      service: 'python-backend',
-      port: 8000,
-      basePath: '/api/security',
-      endpoints: [
-        { path: '/scans', method: 'GET', description: 'Security-Scans' },
-        { path: '/vulnerabilities', method: 'GET', description: 'Schwachstellen' },
-        { path: '/compliance', method: 'GET', description: 'Compliance-Status' },
-      ]
-    },
-    frontend: {
-      adminV2Page: '/infrastructure/security',
-      oldAdminPage: '/admin/security',
-      status: 'connected'
-    },
-    priority: 'high'
-  },
-  {
-    id: 'sbom',
-    name: 'SBOM',
-    description: 'Software Bill of Materials',
-    category: 'infrastructure',
-    backend: {
-      service: 'python-backend',
-      port: 8000,
-      basePath: '/api/sbom',
-      endpoints: [
-        { path: '/components', method: 'GET', description: 'Komponenten-Liste' },
-        { path: '/licenses', method: 'GET', description: 'Lizenz-Uebersicht' },
-        { path: '/export', method: 'GET', description: 'SBOM exportieren' },
-      ]
-    },
-    frontend: {
-      adminV2Page: '/infrastructure/sbom',
-      oldAdminPage: '/admin/sbom',
-      status: 'connected'
-    },
-    priority: 'medium'
-  },
-
-  {
-    id: 'middleware',
-    name: 'Middleware Manager',
-    description: 'Verwaltung und Monitoring der Backend-Middleware',
-    category: 'infrastructure',
-    backend: {
-      service: 'python-backend',
-      port: 8000,
-      basePath: '/api/middleware',
-      endpoints: [
-        { path: '/status', method: 'GET', description: 'Middleware-Status' },
-        { path: '/config', method: 'GET', description: 'Konfiguration' },
-      ]
-    },
-    frontend: {
-      adminV2Page: '/infrastructure/middleware',
-      oldAdminPage: '/admin/middleware',
-      status: 'connected'
-    },
-    priority: 'medium'
-  },
-  {
-    id: 'ci-cd',
-    name: 'CI/CD Pipeline',
-    description: 'Build-Pipeline und Deployment-Management',
-    category: 'infrastructure',
-    backend: {
-      service: 'python-backend',
-      port: 8000,
-      basePath: '/api/builds',
-      endpoints: [
-        { path: '/pipelines', method: 'GET', description: 'Pipeline-Status' },
-        { path: '/builds', method: 'GET', description: 'Build-Historie' },
-      ]
-    },
-    frontend: {
-      adminV2Page: '/infrastructure/ci-cd',
-      oldAdminPage: '/admin/builds',
-      status: 'connected'
-    },
-    priority: 'medium'
-  },
-
-  // ===========================================
-  // EDUCATION MODULES
-  // ===========================================
-  {
-    id: 'edu-search',
-    name: 'Bildungssuche',
-    description: 'Suche nach Bildungsinhalten und Ressourcen',
-    category: 'education',
-    backend: {
-      service: 'edu-search-service',
-      port: 8089,
-      basePath: '/api/edu',
-      endpoints: [
-        { path: '/search', method: 'GET', description: 'Bildungssuche' },
-        { path: '/resources', method: 'GET', description: 'Ressourcen' },
-      ]
-    },
-    frontend: {
-      adminV2Page: '/education/edu-search',
-      oldAdminPage: '/admin/edu-search',
-      status: 'connected'
-    },
-    priority: 'medium'
-  },
-
-  // ===========================================
-  // COMMUNICATION MODULES
-  // ===========================================
-  {
-    id: 'alerts',
-    name: 'Alerts & Benachrichtigungen',
-    description: 'System-Benachrichtigungen und Alerts',
-    category: 'communication',
-    backend: {
-      service: 'python-backend',
-      port: 8000,
-      basePath: '/api/alerts',
-      endpoints: [
-        { path: '/notifications', method: 'GET', description: 'Benachrichtigungen' },
-        { path: '/alerts', method: 'GET', description: 'Aktive Alerts' },
-      ]
-    },
-    frontend: {
-      adminV2Page: '/communication/alerts',
-      oldAdminPage: '/admin/alerts',
-      status: 'connected'
-    },
-    priority: 'medium'
-  },
-  {
-    id: 'unified-inbox',
-    name: 'Unified Inbox',
-    description: 'E-Mail-Konten und KI-Analyse',
-    category: 'communication',
-    backend: {
-      service: 'python-backend',
-      port: 8000,
-      basePath: '/api/mail',
-      endpoints: [
-        { path: '/accounts', method: 'GET', description: 'E-Mail-Konten' },
-        { path: '/messages', method: 'GET', description: 'Nachrichten' },
-        { path: '/analyze', method: 'POST', description: 'KI-Analyse' },
-      ]
-    },
-    frontend: {
-      adminV2Page: '/communication/mail',
-      oldAdminPage: '/admin/mail',
-      status: 'connected'
-    },
-    priority: 'low'
-  },
-
-  // ===========================================
-  // DEVELOPMENT MODULES
-  // ===========================================
-  {
-    id: 'voice-service',
-    name: 'Voice Service',
-    description: 'Voice-First Interface',
-    category: 'development',
-    backend: {
-      service: 'voice-service',
-      port: 8088,
-      basePath: '/api/voice',
-      endpoints: [
-        { path: '/transcribe', method: 'POST', description: 'Sprache transkribieren' },
-        { path: '/synthesize', method: 'POST', description: 'Text zu Sprache' },
-      ]
-    },
-    frontend: {
-      adminV2Page: '/development/voice',
-      oldAdminPage: '/admin/voice',
-      status: 'not-connected'
-    },
-    priority: 'low'
-  },
-]
+// Import for use in helper functions
+import { MODULE_REGISTRY } from './module-registry-data'
 
 // Helper functions
 export function getModulesByCategory(category: BackendModule['category']): BackendModule[] {
diff --git a/admin-lehrer/lib/sdk/catalog-manager/catalog-registry-data.ts b/admin-lehrer/lib/sdk/catalog-manager/catalog-registry-data.ts
new file mode 100644
index 0000000..a4707ef
--- /dev/null
+++ b/admin-lehrer/lib/sdk/catalog-manager/catalog-registry-data.ts
@@ -0,0 +1,488 @@
+/**
+ * SDK Catalog Manager - Registry Data
+ *
+ * Contains CATALOG_REGISTRY definitions and SYSTEM_ENTRIES_MAP.
+ * Separated from catalog-registry.ts to keep each file under 500 LOC.
+ */
+import type { CatalogId, CatalogMeta } from './types'
+
+import { RISK_CATALOG } from '../dsfa/risk-catalog'
+import { MITIGATION_LIBRARY } from '../dsfa/mitigation-library'
+import { AI_RISK_CATALOG } from '../dsfa/ai-risk-catalog'
+import { AI_MITIGATION_LIBRARY } from '../dsfa/ai-mitigation-library'
+import { PROHIBITED_AI_PRACTICES } from '../dsfa/prohibited-ai-practices'
+import { EU_BASE_FRAMEWORKS, NATIONAL_FRAMEWORKS } from '../dsfa/eu-legal-frameworks'
+import { GDPR_ENFORCEMENT_CASES } from '../dsfa/gdpr-enforcement-cases'
+import { WP248_CRITERIA, SDM_GOALS, DSFA_AUTHORITY_RESOURCES } from '../dsfa/types'
+import { VVT_BASELINE_CATALOG } from '../vvt-baseline-catalog'
+import { BASELINE_TEMPLATES } from '../loeschfristen-baseline-catalog'
+import { VENDOR_TEMPLATES, COUNTRY_RISK_PROFILES } from '../vendor-compliance/catalog/vendor-templates'
+import { LEGAL_BASIS_INFO, STANDARD_RETENTION_PERIODS } from '../vendor-compliance/catalog/legal-basis'
+
+// SDM_GOALS as entries array (it's a Record, not an array)
+const SDM_GOALS_ENTRIES = Object.entries(SDM_GOALS).map(([key, val]) => ({
+  id: key,
+  name: val.name,
+  description: val.description,
+  article: val.article,
+}))
+
+export const CATALOG_REGISTRY: Record<CatalogId, CatalogMeta> = {
+  'dsfa-risks': {
+    id: 'dsfa-risks',
+    name: 'DSFA Risikokatalog',
+    description: 'Standardrisiken fuer Datenschutz-Folgenabschaetzungen',
+    module: 'dsfa',
+    icon: 'ShieldAlert',
+    systemCount: RISK_CATALOG.length,
+    allowCustom: true,
+    idField: 'id',
+    nameField: 'title',
+    descriptionField: 'description',
+    categoryField: 'category',
+    fields: [
+      { key: 'id', label: 'Risiko-ID', type: 'text', required: true, placeholder: 'R-XXX-01' },
+      { key: 'title', label: 'Titel', type: 'text', required: true },
+      { key: 'description', label: 'Beschreibung', type: 'textarea', required: true },
+      { key: 'category', label: 'Kategorie', type: 'select', required: true, options: [
+        { value: 'confidentiality', label: 'Vertraulichkeit' },
+        { value: 'integrity', label: 'Integritaet' },
+        { value: 'availability', label: 'Verfuegbarkeit' },
+        { value: 'rights_freedoms', label: 'Rechte & Freiheiten' },
+      ]},
+      { key: 'typicalLikelihood', label: 'Typische Eintrittswahrscheinlichkeit', type: 'select', required: false, options: [
+        { value: 'low', label: 'Niedrig' },
+        { value: 'medium', label: 'Mittel' },
+        { value: 'high', label: 'Hoch' },
+      ]},
+      { key: 'typicalImpact', label: 'Typische Auswirkung', type: 'select', required: false, options: [
+        { value: 'low', label: 'Niedrig' },
+        { value: 'medium', label: 'Mittel' },
+        { value: 'high', label: 'Hoch' },
+      ]},
+    ],
+    searchableFields: ['id', 'title', 'description', 'category'],
+  },
+
+  'dsfa-mitigations': {
+    id: 'dsfa-mitigations',
+    name: 'DSFA Massnahmenbibliothek',
+    description: 'Technische und organisatorische Massnahmen fuer DSFAs',
+    module: 'dsfa',
+    icon: 'Shield',
+    systemCount: MITIGATION_LIBRARY.length,
+    allowCustom: true,
+    idField: 'id',
+    nameField: 'title',
+    descriptionField: 'description',
+    categoryField: 'type',
+    fields: [
+      { key: 'id', label: 'Massnahmen-ID', type: 'text', required: true, placeholder: 'M-XXX-01' },
+      { key: 'title', label: 'Titel', type: 'text', required: true },
+      { key: 'description', label: 'Beschreibung', type: 'textarea', required: true },
+      { key: 'type', label: 'Typ', type: 'select', required: true, options: [
+        { value: 'technical', label: 'Technisch' },
+        { value: 'organizational', label: 'Organisatorisch' },
+        { value: 'legal', label: 'Rechtlich' },
+      ]},
+      { key: 'effectiveness', label: 'Wirksamkeit', type: 'select', required: false, options: [
+        { value: 'low', label: 'Niedrig' },
+        { value: 'medium', label: 'Mittel' },
+        { value: 'high', label: 'Hoch' },
+      ]},
+      { key: 'legalBasis', label: 'Rechtsgrundlage', type: 'text', required: false },
+    ],
+    searchableFields: ['id', 'title', 'description', 'type', 'legalBasis'],
+  },
+
+  'ai-risks': {
+    id: 'ai-risks',
+    name: 'KI-Risikokatalog',
+    description: 'Spezifische Risiken fuer KI-Systeme',
+    module: 'ai_act',
+    icon: 'Bot',
+    systemCount: AI_RISK_CATALOG.length,
+    allowCustom: true,
+    idField: 'id',
+    nameField: 'title',
+    descriptionField: 'description',
+    categoryField: 'category',
+    fields: [
+      { key: 'id', label: 'Risiko-ID', type: 'text', required: true, placeholder: 'R-AI-XXX-01' },
+      { key: 'title', label: 'Titel', type: 'text', required: true },
+      { key: 'description', label: 'Beschreibung', type: 'textarea', required: true },
+      { key: 'category', label: 'Kategorie', type: 'select', required: true, options: [
+        { value: 'confidentiality', label: 'Vertraulichkeit' },
+        { value: 'integrity', label: 'Integritaet' },
+        { value: 'availability', label: 'Verfuegbarkeit' },
+        { value: 'rights_freedoms', label: 'Rechte & Freiheiten' },
+      ]},
+      { key: 'typicalLikelihood', label: 'Eintrittswahrscheinlichkeit', type: 'select', required: false, options: [
+        { value: 'low', label: 'Niedrig' },
+        { value: 'medium', label: 'Mittel' },
+        { value: 'high', label: 'Hoch' },
+      ]},
+      { key: 'typicalImpact', label: 'Auswirkung', type: 'select', required: false, options: [
+        { value: 'low', label: 'Niedrig' },
+        { value: 'medium', label: 'Mittel' },
+        { value: 'high', label: 'Hoch' },
+      ]},
+    ],
+    searchableFields: ['id', 'title', 'description', 'category'],
+  },
+
+  'ai-mitigations': {
+    id: 'ai-mitigations',
+    name: 'KI-Massnahmenbibliothek',
+    description: 'Massnahmen fuer KI-spezifische Risiken',
+    module: 'ai_act',
+    icon: 'ShieldCheck',
+    systemCount: AI_MITIGATION_LIBRARY.length,
+    allowCustom: true,
+    idField: 'id',
+    nameField: 'title',
+    descriptionField: 'description',
+    categoryField: 'type',
+    fields: [
+      { key: 'id', label: 'Massnahmen-ID', type: 'text', required: true },
+      { key: 'title', label: 'Titel', type: 'text', required: true },
+      { key: 'description', label: 'Beschreibung', type: 'textarea', required: true },
+      { key: 'type', label: 'Typ', type: 'select', required: true, options: [
+        { value: 'technical', label: 'Technisch' },
+        { value: 'organizational', label: 'Organisatorisch' },
+        { value: 'legal', label: 'Rechtlich' },
+      ]},
+      { key: 'effectiveness', label: 'Wirksamkeit', type: 'select', required: false, options: [
+        { value: 'low', label: 'Niedrig' },
+        { value: 'medium', label: 'Mittel' },
+        { value: 'high', label: 'Hoch' },
+      ]},
+    ],
+    searchableFields: ['id', 'title', 'description', 'type'],
+  },
+
+  'prohibited-ai-practices': {
+    id: 'prohibited-ai-practices',
+    name: 'Verbotene KI-Praktiken',
+    description: 'Absolut und bedingt verbotene KI-Anwendungen nach AI Act',
+    module: 'ai_act',
+    icon: 'Ban',
+    systemCount: PROHIBITED_AI_PRACTICES.length,
+    allowCustom: false,
+    idField: 'id',
+    nameField: 'title',
+    descriptionField: 'description',
+    categoryField: 'severity',
+    fields: [
+      { key: 'id', label: 'ID', type: 'text', required: true },
+      { key: 'title', label: 'Titel', type: 'text', required: true },
+      { key: 'description', label: 'Beschreibung', type: 'textarea', required: true },
+      { key: 'severity', label: 'Schwere', type: 'select', required: true, options: [
+        { value: 'absolute', label: 'Absolutes Verbot' },
+        { value: 'conditional', label: 'Bedingtes Verbot' },
+      ]},
+      { key: 'legalBasis', label: 'Rechtsgrundlage', type: 'text', required: false },
+    ],
+    searchableFields: ['id', 'title', 'description', 'severity', 'legalBasis'],
+  },
+
+  'vvt-templates': {
+    id: 'vvt-templates',
+    name: 'VVT Baseline-Vorlagen',
+    description: 'Vorlagen fuer Verarbeitungstaetigkeiten',
+    module: 'vvt',
+    icon: 'FileText',
+    systemCount: VVT_BASELINE_CATALOG.length,
+    allowCustom: true,
+    idField: 'templateId',
+    nameField: 'name',
+    descriptionField: 'description',
+    categoryField: 'businessFunction',
+    fields: [
+      { key: 'templateId', label: 'Vorlagen-ID', type: 'text', required: true },
+      { key: 'name', label: 'Name', type: 'text', required: true },
+      { key: 'description', label: 'Beschreibung', type: 'textarea', required: true },
+      { key: 'businessFunction', label: 'Geschaeftsbereich', type: 'select', required: true, options: [
+        { value: 'hr', label: 'Personal' },
+        { value: 'finance', label: 'Finanzen' },
+        { value: 'sales', label: 'Vertrieb' },
+        { value: 'marketing', label: 'Marketing' },
+        { value: 'support', label: 'Support' },
+        { value: 'it', label: 'IT' },
+        { value: 'other', label: 'Sonstige' },
+      ]},
+      { key: 'protectionLevel', label: 'Schutzniveau', type: 'select', required: false, options: [
+        { value: 'LOW', label: 'Niedrig' },
+        { value: 'MEDIUM', label: 'Mittel' },
+        { value: 'HIGH', label: 'Hoch' },
+      ]},
+    ],
+    searchableFields: ['templateId', 'name', 'description', 'businessFunction'],
+  },
+
+  'loeschfristen-templates': {
+    id: 'loeschfristen-templates',
+    name: 'Loeschfristen-Vorlagen',
+    description: 'Baseline-Vorlagen fuer Aufbewahrungsfristen',
+    module: 'vvt',
+    icon: 'Clock',
+    systemCount: BASELINE_TEMPLATES.length,
+    allowCustom: true,
+    idField: 'templateId',
+    nameField: 'dataObjectName',
+    descriptionField: 'description',
+    categoryField: 'retentionDriver',
+    fields: [
+      { key: 'templateId', label: 'Vorlagen-ID', type: 'text', required: true },
+      { key: 'dataObjectName', label: 'Datenobjekt', type: 'text', required: true },
+      { key: 'description', label: 'Beschreibung', type: 'textarea', required: true },
+      { key: 'retentionDuration', label: 'Aufbewahrungsdauer', type: 'number', required: true, min: 0 },
+      { key: 'retentionUnit', label: 'Einheit', type: 'select', required: true, options: [
+        { value: 'days', label: 'Tage' },
+        { value: 'months', label: 'Monate' },
+        { value: 'years', label: 'Jahre' },
+      ]},
+      { key: 'deletionMethod', label: 'Loeschmethode', type: 'text', required: false },
+      { key: 'responsibleRole', label: 'Verantwortlich', type: 'text', required: false },
+    ],
+    searchableFields: ['templateId', 'dataObjectName', 'description', 'retentionDriver'],
+  },
+
+  'vendor-templates': {
+    id: 'vendor-templates',
+    name: 'AV-Vorlagen',
+    description: 'Vorlagen fuer Auftragsverarbeitungsvertraege',
+    module: 'vendor',
+    icon: 'Building2',
+    systemCount: VENDOR_TEMPLATES.length,
+    allowCustom: true,
+    idField: 'id',
+    nameField: 'name',
+    descriptionField: 'description',
+    categoryField: 'serviceCategory',
+    fields: [
+      { key: 'id', label: 'ID', type: 'text', required: true },
+      { key: 'name', label: 'Name', type: 'text', required: true },
+      { key: 'description', label: 'Beschreibung', type: 'textarea', required: true },
+      { key: 'serviceCategory', label: 'Kategorie', type: 'text', required: true },
+    ],
+    searchableFields: ['id', 'name', 'description', 'serviceCategory'],
+  },
+
+  'country-risk-profiles': {
+    id: 'country-risk-profiles',
+    name: 'Laenderrisikoprofile',
+    description: 'Datenschutz-Risikobewertung nach Laendern',
+    module: 'vendor',
+    icon: 'Globe',
+    systemCount: COUNTRY_RISK_PROFILES.length,
+    allowCustom: false,
+    idField: 'code',
+    nameField: 'name',
+    categoryField: 'riskLevel',
+    fields: [
+      { key: 'code', label: 'Laendercode', type: 'text', required: true },
+      { key: 'name', label: 'Land', type: 'text', required: true },
+      { key: 'riskLevel', label: 'Risikostufe', type: 'select', required: true, options: [
+        { value: 'LOW', label: 'Niedrig' },
+        { value: 'MEDIUM', label: 'Mittel' },
+        { value: 'HIGH', label: 'Hoch' },
+        { value: 'VERY_HIGH', label: 'Sehr hoch' },
+      ]},
+      { key: 'isEU', label: 'EU-Mitglied', type: 'boolean', required: false },
+      { key: 'isEEA', label: 'EWR-Mitglied', type: 'boolean', required: false },
+      { key: 'hasAdequacyDecision', label: 'Angemessenheitsbeschluss', type: 'boolean', required: false },
+    ],
+    searchableFields: ['code', 'name', 'riskLevel'],
+  },
+
+  'legal-bases': {
+    id: 'legal-bases',
+    name: 'Rechtsgrundlagen',
+    description: 'DSGVO Art. 6 und Art. 9 Rechtsgrundlagen',
+    module: 'reference',
+    icon: 'Scale',
+    systemCount: LEGAL_BASIS_INFO.length,
+    allowCustom: false,
+    idField: 'type',
+    nameField: 'name',
+    descriptionField: 'description',
+    categoryField: 'article',
+    fields: [
+      { key: 'type', label: 'Typ', type: 'text', required: true },
+      { key: 'article', label: 'Artikel', type: 'text', required: true },
+      { key: 'name', label: 'Name', type: 'text', required: true },
+      { key: 'description', label: 'Beschreibung', type: 'textarea', required: true },
+      { key: 'isSpecialCategory', label: 'Besondere Kategorie (Art. 9)', type: 'boolean', required: false },
+    ],
+    searchableFields: ['type', 'article', 'name', 'description'],
+  },
+
+  'retention-periods': {
+    id: 'retention-periods',
+    name: 'Aufbewahrungsfristen',
+    description: 'Gesetzliche Standard-Aufbewahrungsfristen',
+    module: 'reference',
+    icon: 'Timer',
+    systemCount: STANDARD_RETENTION_PERIODS.length,
+    allowCustom: false,
+    idField: 'id',
+    nameField: 'name',
+    descriptionField: 'description',
+    fields: [
+      { key: 'id', label: 'ID', type: 'text', required: true },
+      { key: 'name', label: 'Name', type: 'text', required: true },
+      { key: 'legalBasis', label: 'Rechtsgrundlage', type: 'text', required: true },
+      { key: 'description', label: 'Beschreibung', type: 'textarea', required: true },
+    ],
+    searchableFields: ['id', 'name', 'legalBasis', 'description'],
+  },
+
+  'eu-legal-frameworks': {
+    id: 'eu-legal-frameworks',
+    name: 'EU-Rechtsrahmen',
+    description: 'EU-weite Datenschutzgesetze und -verordnungen',
+    module: 'reference',
+    icon: 'Landmark',
+    systemCount: EU_BASE_FRAMEWORKS.length,
+    allowCustom: false,
+    idField: 'id',
+    nameField: 'name',
+    descriptionField: 'description',
+    categoryField: 'type',
+    fields: [
+      { key: 'id', label: 'ID', type: 'text', required: true },
+      { key: 'name', label: 'Name', type: 'text', required: true },
+      { key: 'fullName', label: 'Vollstaendiger Name', type: 'text', required: true },
+      { key: 'type', label: 'Typ', type: 'text', required: true },
+      { key: 'description', label: 'Beschreibung', type: 'textarea', required: true },
+    ],
+    searchableFields: ['id', 'name', 'fullName', 'description', 'type'],
+  },
+
+  'national-legal-frameworks': {
+    id: 'national-legal-frameworks',
+    name: 'Nationale Rechtsrahmen',
+    description: 'Nationale Datenschutzgesetze der EU/EWR-Staaten',
+    module: 'reference',
+    icon: 'Flag',
+    systemCount: NATIONAL_FRAMEWORKS.length,
+    allowCustom: false,
+    idField: 'id',
+    nameField: 'name',
+    descriptionField: 'description',
+    categoryField: 'countryCode',
+    fields: [
+      { key: 'id', label: 'ID', type: 'text', required: true },
+      { key: 'name', label: 'Name', type: 'text', required: true },
+      { key: 'countryCode', label: 'Land', type: 'text', required: true },
+      { key: 'type', label: 'Typ', type: 'text', required: true },
+      { key: 'description', label: 'Beschreibung', type: 'textarea', required: true },
+    ],
+    searchableFields: ['id', 'name', 'countryCode', 'description', 'type'],
+  },
+
+  'gdpr-enforcement-cases': {
+    id: 'gdpr-enforcement-cases',
+    name: 'DSGVO-Bussgeldentscheidungen',
+    description: 'Relevante Bussgeldentscheidungen als Referenz',
+    module: 'reference',
+    icon: 'Gavel',
+    systemCount: GDPR_ENFORCEMENT_CASES.length,
+    allowCustom: false,
+    idField: 'id',
+    nameField: 'company',
+    descriptionField: 'description',
+    categoryField: 'country',
+    fields: [
+      { key: 'id', label: 'ID', type: 'text', required: true },
+      { key: 'company', label: 'Unternehmen', type: 'text', required: true },
+      { key: 'country', label: 'Land', type: 'text', required: true },
+      { key: 'year', label: 'Jahr', type: 'number', required: true },
+      { key: 'fineOriginal', label: 'Bussgeld (EUR)', type: 'number', required: true },
+      { key: 'description', label: 'Beschreibung', type: 'textarea', required: true },
+    ],
+    searchableFields: ['id', 'company', 'country', 'description'],
+  },
+
+  'wp248-criteria': {
+    id: 'wp248-criteria',
+    name: 'WP248 Kriterien',
+    description: 'Kriterien zur DSFA-Pflichtpruefung nach WP248',
+    module: 'dsfa',
+    icon: 'ClipboardCheck',
+    systemCount: WP248_CRITERIA.length,
+    allowCustom: false,
+    idField: 'code',
+    nameField: 'title',
+    descriptionField: 'description',
+    fields: [
+      { key: 'code', label: 'Code', type: 'text', required: true },
+      { key: 'title', label: 'Titel', type: 'text', required: true },
+      { key: 'description', label: 'Beschreibung', type: 'textarea', required: true },
+      { key: 'gdprRef', label: 'DSGVO-Referenz', type: 'text', required: false },
+    ],
+    searchableFields: ['code', 'title', 'description', 'gdprRef'],
+  },
+
+  'sdm-goals': {
+    id: 'sdm-goals',
+    name: 'SDM Gewaehrleistungsziele',
+    description: 'Standard-Datenschutzmodell Gewaehrleistungsziele',
+    module: 'dsfa',
+    icon: 'Target',
+    systemCount: SDM_GOALS_ENTRIES.length,
+    allowCustom: false,
+    idField: 'id',
+    nameField: 'name',
+    descriptionField: 'description',
+    fields: [
+      { key: 'id', label: 'ID', type: 'text', required: true },
+      { key: 'name', label: 'Name', type: 'text', required: true },
+      { key: 'description', label: 'Beschreibung', type: 'textarea', required: true },
+      { key: 'article', label: 'DSGVO-Artikel', type: 'text', required: false },
+    ],
+    searchableFields: ['id', 'name', 'description', 'article'],
+  },
+
+  'dsfa-authority-resources': {
+    id: 'dsfa-authority-resources',
+    name: 'Aufsichtsbehoerden-Ressourcen',
+    description: 'DSFA-Ressourcen der deutschen Aufsichtsbehoerden',
+    module: 'dsfa',
+    icon: 'Building',
+    systemCount: DSFA_AUTHORITY_RESOURCES.length,
+    allowCustom: false,
+    idField: 'id',
+    nameField: 'shortName',
+    descriptionField: 'name',
+    categoryField: 'state',
+    fields: [
+      { key: 'id', label: 'ID', type: 'text', required: true },
+      { key: 'shortName', label: 'Kurzname', type: 'text', required: true },
+      { key: 'name', label: 'Voller Name', type: 'text', required: true },
+      { key: 'state', label: 'Bundesland', type: 'text', required: true },
+    ],
+    searchableFields: ['id', 'shortName', 'name', 'state'],
+  },
+}
+
+export const SYSTEM_ENTRIES_MAP: Record<CatalogId, Record<string, unknown>[]> = {
+  'dsfa-risks': RISK_CATALOG as unknown as Record<string, unknown>[],
+  'dsfa-mitigations': MITIGATION_LIBRARY as unknown as Record<string, unknown>[],
+  'ai-risks': AI_RISK_CATALOG as unknown as Record<string, unknown>[],
+  'ai-mitigations': AI_MITIGATION_LIBRARY as unknown as Record<string, unknown>[],
+  'prohibited-ai-practices': PROHIBITED_AI_PRACTICES as unknown as Record<string, unknown>[],
+  'vvt-templates': VVT_BASELINE_CATALOG as unknown as Record<string, unknown>[],
+  'loeschfristen-templates': BASELINE_TEMPLATES as unknown as Record<string, unknown>[],
+  'vendor-templates': VENDOR_TEMPLATES as unknown as Record<string, unknown>[],
+  'country-risk-profiles': COUNTRY_RISK_PROFILES as unknown as Record<string, unknown>[],
+  'legal-bases': LEGAL_BASIS_INFO as unknown as Record<string, unknown>[],
+  'retention-periods': STANDARD_RETENTION_PERIODS as unknown as Record<string, unknown>[],
+  'eu-legal-frameworks': EU_BASE_FRAMEWORKS as unknown as Record<string, unknown>[],
+  'national-legal-frameworks': NATIONAL_FRAMEWORKS as unknown as Record<string, unknown>[],
+  'gdpr-enforcement-cases': GDPR_ENFORCEMENT_CASES as unknown as Record<string, unknown>[],
+  'wp248-criteria': WP248_CRITERIA as unknown as Record<string, unknown>[],
+  'sdm-goals': SDM_GOALS_ENTRIES as unknown as Record<string, unknown>[],
+  'dsfa-authority-resources': DSFA_AUTHORITY_RESOURCES as unknown as Record<string, unknown>[],
+}
diff --git a/admin-lehrer/lib/sdk/catalog-manager/catalog-registry.ts b/admin-lehrer/lib/sdk/catalog-manager/catalog-registry.ts
index 70a1702..7b494db 100644
--- a/admin-lehrer/lib/sdk/catalog-manager/catalog-registry.ts
+++ b/admin-lehrer/lib/sdk/catalog-manager/catalog-registry.ts
@@ -1,7 +1,8 @@
 /**
  * SDK Catalog Manager - Central Registry
- * 
- * Maps all SDK catalogs to a unified interface for browsing, searching, and CRUD.
+ *
+ * Public API for browsing, searching, and converting catalog entries.
+ * Registry data definitions live in catalog-registry-data.ts.
  */
 
 import type {
@@ -15,22 +16,10 @@ import type {
   CustomCatalogs,
 } from './types'
 
-// =============================================================================
-// CATALOG DATA IMPORTS
-// =============================================================================
+import { CATALOG_REGISTRY, SYSTEM_ENTRIES_MAP } from './catalog-registry-data'
 
-import { RISK_CATALOG } from '../dsfa/risk-catalog'
-import { MITIGATION_LIBRARY } from '../dsfa/mitigation-library'
-import { AI_RISK_CATALOG } from '../dsfa/ai-risk-catalog'
-import { AI_MITIGATION_LIBRARY } from '../dsfa/ai-mitigation-library'
-import { PROHIBITED_AI_PRACTICES } from '../dsfa/prohibited-ai-practices'
-import { EU_BASE_FRAMEWORKS, NATIONAL_FRAMEWORKS } from '../dsfa/eu-legal-frameworks'
-import { GDPR_ENFORCEMENT_CASES } from '../dsfa/gdpr-enforcement-cases'
-import { WP248_CRITERIA, SDM_GOALS, DSFA_AUTHORITY_RESOURCES } from '../dsfa/types'
-import { VVT_BASELINE_CATALOG } from '../vvt-baseline-catalog'
-import { BASELINE_TEMPLATES } from '../loeschfristen-baseline-catalog'
-import { VENDOR_TEMPLATES, COUNTRY_RISK_PROFILES } from '../vendor-compliance/catalog/vendor-templates'
-import { LEGAL_BASIS_INFO, STANDARD_RETENTION_PERIODS } from '../vendor-compliance/catalog/legal-basis'
+// Re-export so existing imports keep working
+export { CATALOG_REGISTRY }
 
 // =============================================================================
 // HELPER: Resolve localized text fields
@@ -46,485 +35,6 @@ function resolveField(value: unknown): string {
   return String(value)
 }
 
-// =============================================================================
-// SDM_GOALS as entries array (it's a Record, not an array)
-// =============================================================================
-
-const SDM_GOALS_ENTRIES = Object.entries(SDM_GOALS).map(([key, val]) => ({
-  id: key,
-  name: val.name,
-  description: val.description,
-  article: val.article,
-}))
-
-// =============================================================================
-// CATALOG REGISTRY
-// =============================================================================
-
-export const CATALOG_REGISTRY: Record<CatalogId, CatalogMeta> = {
-  'dsfa-risks': {
-    id: 'dsfa-risks',
-    name: 'DSFA Risikokatalog',
-    description: 'Standardrisiken fuer Datenschutz-Folgenabschaetzungen',
-    module: 'dsfa',
-    icon: 'ShieldAlert',
-    systemCount: RISK_CATALOG.length,
-    allowCustom: true,
-    idField: 'id',
-    nameField: 'title',
-    descriptionField: 'description',
-    categoryField: 'category',
-    fields: [
-      { key: 'id', label: 'Risiko-ID', type: 'text', required: true, placeholder: 'R-XXX-01' },
-      { key: 'title', label: 'Titel', type: 'text', required: true },
-      { key: 'description', label: 'Beschreibung', type: 'textarea', required: true },
-      { key: 'category', label: 'Kategorie', type: 'select', required: true, options: [
-        { value: 'confidentiality', label: 'Vertraulichkeit' },
-        { value: 'integrity', label: 'Integritaet' },
-        { value: 'availability', label: 'Verfuegbarkeit' },
-        { value: 'rights_freedoms', label: 'Rechte & Freiheiten' },
-      ]},
-      { key: 'typicalLikelihood', label: 'Typische Eintrittswahrscheinlichkeit', type: 'select', required: false, options: [
-        { value: 'low', label: 'Niedrig' },
-        { value: 'medium', label: 'Mittel' },
-        { value: 'high', label: 'Hoch' },
-      ]},
-      { key: 'typicalImpact', label: 'Typische Auswirkung', type: 'select', required: false, options: [
-        { value: 'low', label: 'Niedrig' },
-        { value: 'medium', label: 'Mittel' },
-        { value: 'high', label: 'Hoch' },
-      ]},
-    ],
-    searchableFields: ['id', 'title', 'description', 'category'],
-  },
-
-  'dsfa-mitigations': {
-    id: 'dsfa-mitigations',
-    name: 'DSFA Massnahmenbibliothek',
-    description: 'Technische und organisatorische Massnahmen fuer DSFAs',
-    module: 'dsfa',
-    icon: 'Shield',
-    systemCount: MITIGATION_LIBRARY.length,
-    allowCustom: true,
-    idField: 'id',
-    nameField: 'title',
-    descriptionField: 'description',
-    categoryField: 'type',
-    fields: [
-      { key: 'id', label: 'Massnahmen-ID', type: 'text', required: true, placeholder: 'M-XXX-01' },
-      { key: 'title', label: 'Titel', type: 'text', required: true },
-      { key: 'description', label: 'Beschreibung', type: 'textarea', required: true },
-      { key: 'type', label: 'Typ', type: 'select', required: true, options: [
-        { value: 'technical', label: 'Technisch' },
-        { value: 'organizational', label: 'Organisatorisch' },
-        { value: 'legal', label: 'Rechtlich' },
-      ]},
-      { key: 'effectiveness', label: 'Wirksamkeit', type: 'select', required: false, options: [
-        { value: 'low', label: 'Niedrig' },
-        { value: 'medium', label: 'Mittel' },
-        { value: 'high', label: 'Hoch' },
-      ]},
-      { key: 'legalBasis', label: 'Rechtsgrundlage', type: 'text', required: false },
-    ],
-    searchableFields: ['id', 'title', 'description', 'type', 'legalBasis'],
-  },
-
-  'ai-risks': {
-    id: 'ai-risks',
-    name: 'KI-Risikokatalog',
-    description: 'Spezifische Risiken fuer KI-Systeme',
-    module: 'ai_act',
-    icon: 'Bot',
-    systemCount: AI_RISK_CATALOG.length,
-    allowCustom: true,
-    idField: 'id',
-    nameField: 'title',
-    descriptionField: 'description',
-    categoryField: 'category',
-    fields: [
-      { key: 'id', label: 'Risiko-ID', type: 'text', required: true, placeholder: 'R-AI-XXX-01' },
-      { key: 'title', label: 'Titel', type: 'text', required: true },
-      { key: 'description', label: 'Beschreibung', type: 'textarea', required: true },
-      { key: 'category', label: 'Kategorie', type: 'select', required: true, options: [
-        { value: 'confidentiality', label: 'Vertraulichkeit' },
-        { value: 'integrity', label: 'Integritaet' },
-        { value: 'availability', label: 'Verfuegbarkeit' },
-        { value: 'rights_freedoms', label: 'Rechte & Freiheiten' },
-      ]},
-      { key: 'typicalLikelihood', label: 'Eintrittswahrscheinlichkeit', type: 'select', required: false, options: [
-        { value: 'low', label: 'Niedrig' },
-        { value: 'medium', label: 'Mittel' },
-        { value: 'high', label: 'Hoch' },
-      ]},
-      { key: 'typicalImpact', label: 'Auswirkung', type: 'select', required: false, options: [
-        { value: 'low', label: 'Niedrig' },
-        { value: 'medium', label: 'Mittel' },
-        { value: 'high', label: 'Hoch' },
-      ]},
-    ],
-    searchableFields: ['id', 'title', 'description', 'category'],
-  },
-
-  'ai-mitigations': {
-    id: 'ai-mitigations',
-    name: 'KI-Massnahmenbibliothek',
-    description: 'Massnahmen fuer KI-spezifische Risiken',
-    module: 'ai_act',
-    icon: 'ShieldCheck',
-    systemCount: AI_MITIGATION_LIBRARY.length,
-    allowCustom: true,
-    idField: 'id',
-    nameField: 'title',
-    descriptionField: 'description',
-    categoryField: 'type',
-    fields: [
-      { key: 'id', label: 'Massnahmen-ID', type: 'text', required: true },
-      { key: 'title', label: 'Titel', type: 'text', required: true },
-      { key: 'description', label: 'Beschreibung', type: 'textarea', required: true },
-      { key: 'type', label: 'Typ', type: 'select', required: true, options: [
-        { value: 'technical', label: 'Technisch' },
-        { value: 'organizational', label: 'Organisatorisch' },
-        { value: 'legal', label: 'Rechtlich' },
-      ]},
-      { key: 'effectiveness', label: 'Wirksamkeit', type: 'select', required: false, options: [
-        { value: 'low', label: 'Niedrig' },
-        { value: 'medium', label: 'Mittel' },
-        { value: 'high', label: 'Hoch' },
-      ]},
-    ],
-    searchableFields: ['id', 'title', 'description', 'type'],
-  },
-
-  'prohibited-ai-practices': {
-    id: 'prohibited-ai-practices',
-    name: 'Verbotene KI-Praktiken',
-    description: 'Absolut und bedingt verbotene KI-Anwendungen nach AI Act',
-    module: 'ai_act',
-    icon: 'Ban',
-    systemCount: PROHIBITED_AI_PRACTICES.length,
-    allowCustom: false,
-    idField: 'id',
-    nameField: 'title',
-    descriptionField: 'description',
-    categoryField: 'severity',
-    fields: [
-      { key: 'id', label: 'ID', type: 'text', required: true },
-      { key: 'title', label: 'Titel', type: 'text', required: true },
-      { key: 'description', label: 'Beschreibung', type: 'textarea', required: true },
-      { key: 'severity', label: 'Schwere', type: 'select', required: true, options: [
-        { value: 'absolute', label: 'Absolutes Verbot' },
-        { value: 'conditional', label: 'Bedingtes Verbot' },
-      ]},
-      { key: 'legalBasis', label: 'Rechtsgrundlage', type: 'text', required: false },
-    ],
-    searchableFields: ['id', 'title', 'description', 'severity', 'legalBasis'],
-  },
-
-  'vvt-templates': {
-    id: 'vvt-templates',
-    name: 'VVT Baseline-Vorlagen',
-    description: 'Vorlagen fuer Verarbeitungstaetigkeiten',
-    module: 'vvt',
-    icon: 'FileText',
-    systemCount: VVT_BASELINE_CATALOG.length,
-    allowCustom: true,
-    idField: 'templateId',
-    nameField: 'name',
-    descriptionField: 'description',
-    categoryField: 'businessFunction',
-    fields: [
-      { key: 'templateId', label: 'Vorlagen-ID', type: 'text', required: true },
-      { key: 'name', label: 'Name', type: 'text', required: true },
-      { key: 'description', label: 'Beschreibung', type: 'textarea', required: true },
-      { key: 'businessFunction', label: 'Geschaeftsbereich', type: 'select', required: true, options: [
-        { value: 'hr', label: 'Personal' },
-        { value: 'finance', label: 'Finanzen' },
-        { value: 'sales', label: 'Vertrieb' },
-        { value: 'marketing', label: 'Marketing' },
-        { value: 'support', label: 'Support' },
-        { value: 'it', label: 'IT' },
-        { value: 'other', label: 'Sonstige' },
-      ]},
-      { key: 'protectionLevel', label: 'Schutzniveau', type: 'select', required: false, options: [
-        { value: 'LOW', label: 'Niedrig' },
-        { value: 'MEDIUM', label: 'Mittel' },
-        { value: 'HIGH', label: 'Hoch' },
-      ]},
-    ],
-    searchableFields: ['templateId', 'name', 'description', 'businessFunction'],
-  },
-
-  'loeschfristen-templates': {
-    id: 'loeschfristen-templates',
-    name: 'Loeschfristen-Vorlagen',
-    description: 'Baseline-Vorlagen fuer Aufbewahrungsfristen',
-    module: 'vvt',
-    icon: 'Clock',
-    systemCount: BASELINE_TEMPLATES.length,
-    allowCustom: true,
-    idField: 'templateId',
-    nameField: 'dataObjectName',
-    descriptionField: 'description',
-    categoryField: 'retentionDriver',
-    fields: [
-      { key: 'templateId', label: 'Vorlagen-ID', type: 'text', required: true },
-      { key: 'dataObjectName', label: 'Datenobjekt', type: 'text', required: true },
-      { key: 'description', label: 'Beschreibung', type: 'textarea', required: true },
-      { key: 'retentionDuration', label: 'Aufbewahrungsdauer', type: 'number', required: true, min: 0 },
-      { key: 'retentionUnit', label: 'Einheit', type: 'select', required: true, options: [
-        { value: 'days', label: 'Tage' },
-        { value: 'months', label: 'Monate' },
-        { value: 'years', label: 'Jahre' },
-      ]},
-      { key: 'deletionMethod', label: 'Loeschmethode', type: 'text', required: false },
-      { key: 'responsibleRole', label: 'Verantwortlich', type: 'text', required: false },
-    ],
-    searchableFields: ['templateId', 'dataObjectName', 'description', 'retentionDriver'],
-  },
-
-  'vendor-templates': {
-    id: 'vendor-templates',
-    name: 'AV-Vorlagen',
-    description: 'Vorlagen fuer Auftragsverarbeitungsvertraege',
-    module: 'vendor',
-    icon: 'Building2',
-    systemCount: VENDOR_TEMPLATES.length,
-    allowCustom: true,
-    idField: 'id',
-    nameField: 'name',
-    descriptionField: 'description',
-    categoryField: 'serviceCategory',
-    fields: [
-      { key: 'id', label: 'ID', type: 'text', required: true },
-      { key: 'name', label: 'Name', type: 'text', required: true },
-      { key: 'description', label: 'Beschreibung', type: 'textarea', required: true },
-      { key: 'serviceCategory', label: 'Kategorie', type: 'text', required: true },
-    ],
-    searchableFields: ['id', 'name', 'description', 'serviceCategory'],
-  },
-
-  'country-risk-profiles': {
-    id: 'country-risk-profiles',
-    name: 'Laenderrisikoprofile',
-    description: 'Datenschutz-Risikobewertung nach Laendern',
-    module: 'vendor',
-    icon: 'Globe',
-    systemCount: COUNTRY_RISK_PROFILES.length,
-    allowCustom: false,
-    idField: 'code',
-    nameField: 'name',
-    categoryField: 'riskLevel',
-    fields: [
-      { key: 'code', label: 'Laendercode', type: 'text', required: true },
-      { key: 'name', label: 'Land', type: 'text', required: true },
-      { key: 'riskLevel', label: 'Risikostufe', type: 'select', required: true, options: [
-        { value: 'LOW', label: 'Niedrig' },
-        { value: 'MEDIUM', label: 'Mittel' },
-        { value: 'HIGH', label: 'Hoch' },
-        { value: 'VERY_HIGH', label: 'Sehr hoch' },
-      ]},
-      { key: 'isEU', label: 'EU-Mitglied', type: 'boolean', required: false },
-      { key: 'isEEA', label: 'EWR-Mitglied', type: 'boolean', required: false },
-      { key: 'hasAdequacyDecision', label: 'Angemessenheitsbeschluss', type: 'boolean', required: false },
-    ],
-    searchableFields: ['code', 'name', 'riskLevel'],
-  },
-
-  'legal-bases': {
-    id: 'legal-bases',
-    name: 'Rechtsgrundlagen',
-    description: 'DSGVO Art. 6 und Art. 9 Rechtsgrundlagen',
-    module: 'reference',
-    icon: 'Scale',
-    systemCount: LEGAL_BASIS_INFO.length,
-    allowCustom: false,
-    idField: 'type',
-    nameField: 'name',
-    descriptionField: 'description',
-    categoryField: 'article',
-    fields: [
-      { key: 'type', label: 'Typ', type: 'text', required: true },
-      { key: 'article', label: 'Artikel', type: 'text', required: true },
-      { key: 'name', label: 'Name', type: 'text', required: true },
-      { key: 'description', label: 'Beschreibung', type: 'textarea', required: true },
-      { key: 'isSpecialCategory', label: 'Besondere Kategorie (Art. 9)', type: 'boolean', required: false },
-    ],
-    searchableFields: ['type', 'article', 'name', 'description'],
-  },
-
-  'retention-periods': {
-    id: 'retention-periods',
-    name: 'Aufbewahrungsfristen',
-    description: 'Gesetzliche Standard-Aufbewahrungsfristen',
-    module: 'reference',
-    icon: 'Timer',
-    systemCount: STANDARD_RETENTION_PERIODS.length,
-    allowCustom: false,
-    idField: 'id',
-    nameField: 'name',
-    descriptionField: 'description',
-    fields: [
-      { key: 'id', label: 'ID', type: 'text', required: true },
-      { key: 'name', label: 'Name', type: 'text', required: true },
-      { key: 'legalBasis', label: 'Rechtsgrundlage', type: 'text', required: true },
-      { key: 'description', label: 'Beschreibung', type: 'textarea', required: true },
-    ],
-    searchableFields: ['id', 'name', 'legalBasis', 'description'],
-  },
-
-  'eu-legal-frameworks': {
-    id: 'eu-legal-frameworks',
-    name: 'EU-Rechtsrahmen',
-    description: 'EU-weite Datenschutzgesetze und -verordnungen',
-    module: 'reference',
-    icon: 'Landmark',
-    systemCount: EU_BASE_FRAMEWORKS.length,
-    allowCustom: false,
-    idField: 'id',
-    nameField: 'name',
-    descriptionField: 'description',
-    categoryField: 'type',
-    fields: [
-      { key: 'id', label: 'ID', type: 'text', required: true },
-      { key: 'name', label: 'Name', type: 'text', required: true },
-      { key: 'fullName', label: 'Vollstaendiger Name', type: 'text', required: true },
-      { key: 'type', label: 'Typ', type: 'text', required: true },
-      { key: 'description', label: 'Beschreibung', type: 'textarea', required: true },
-    ],
-    searchableFields: ['id', 'name', 'fullName', 'description', 'type'],
-  },
-
-  'national-legal-frameworks': {
-    id: 'national-legal-frameworks',
-    name: 'Nationale Rechtsrahmen',
-    description: 'Nationale Datenschutzgesetze der EU/EWR-Staaten',
-    module: 'reference',
-    icon: 'Flag',
-    systemCount: NATIONAL_FRAMEWORKS.length,
-    allowCustom: false,
-    idField: 'id',
-    nameField: 'name',
-    descriptionField: 'description',
-    categoryField: 'countryCode',
-    fields: [
-      { key: 'id', label: 'ID', type: 'text', required: true },
-      { key: 'name', label: 'Name', type: 'text', required: true },
-      { key: 'countryCode', label: 'Land', type: 'text', required: true },
-      { key: 'type', label: 'Typ', type: 'text', required: true },
-      { key: 'description', label: 'Beschreibung', type: 'textarea', required: true },
-    ],
-    searchableFields: ['id', 'name', 'countryCode', 'description', 'type'],
-  },
-
-  'gdpr-enforcement-cases': {
-    id: 'gdpr-enforcement-cases',
-    name: 'DSGVO-Bussgeldentscheidungen',
-    description: 'Relevante Bussgeldentscheidungen als Referenz',
-    module: 'reference',
-    icon: 'Gavel',
-    systemCount: GDPR_ENFORCEMENT_CASES.length,
-    allowCustom: false,
-    idField: 'id',
-    nameField: 'company',
-    descriptionField: 'description',
-    categoryField: 'country',
-    fields: [
-      { key: 'id', label: 'ID', type: 'text', required: true },
-      { key: 'company', label: 'Unternehmen', type: 'text', required: true },
-      { key: 'country', label: 'Land', type: 'text', required: true },
-      { key: 'year', label: 'Jahr', type: 'number', required: true },
-      { key: 'fineOriginal', label: 'Bussgeld (EUR)', type: 'number', required: true },
-      { key: 'description', label: 'Beschreibung', type: 'textarea', required: true },
-    ],
-    searchableFields: ['id', 'company', 'country', 'description'],
-  },
-
-  'wp248-criteria': {
-    id: 'wp248-criteria',
-    name: 'WP248 Kriterien',
-    description: 'Kriterien zur DSFA-Pflichtpruefung nach WP248',
-    module: 'dsfa',
-    icon: 'ClipboardCheck',
-    systemCount: WP248_CRITERIA.length,
-    allowCustom: false,
-    idField: 'code',
-    nameField: 'title',
-    descriptionField: 'description',
-    fields: [
-      { key: 'code', label: 'Code', type: 'text', required: true },
-      { key: 'title', label: 'Titel', type: 'text', required: true },
-      { key: 'description', label: 'Beschreibung', type: 'textarea', required: true },
-      { key: 'gdprRef', label: 'DSGVO-Referenz', type: 'text', required: false },
-    ],
-    searchableFields: ['code', 'title', 'description', 'gdprRef'],
-  },
-
-  'sdm-goals': {
-    id: 'sdm-goals',
-    name: 'SDM Gewaehrleistungsziele',
-    description: 'Standard-Datenschutzmodell Gewaehrleistungsziele',
-    module: 'dsfa',
-    icon: 'Target',
-    systemCount: SDM_GOALS_ENTRIES.length,
-    allowCustom: false,
-    idField: 'id',
-    nameField: 'name',
-    descriptionField: 'description',
-    fields: [
-      { key: 'id', label: 'ID', type: 'text', required: true },
-      { key: 'name', label: 'Name', type: 'text', required: true },
-      { key: 'description', label: 'Beschreibung', type: 'textarea', required: true },
-      { key: 'article', label: 'DSGVO-Artikel', type: 'text', required: false },
-    ],
-    searchableFields: ['id', 'name', 'description', 'article'],
-  },
-
-  'dsfa-authority-resources': {
-    id: 'dsfa-authority-resources',
-    name: 'Aufsichtsbehoerden-Ressourcen',
-    description: 'DSFA-Ressourcen der deutschen Aufsichtsbehoerden',
-    module: 'dsfa',
-    icon: 'Building',
-    systemCount: DSFA_AUTHORITY_RESOURCES.length,
-    allowCustom: false,
-    idField: 'id',
-    nameField: 'shortName',
-    descriptionField: 'name',
-    categoryField: 'state',
-    fields: [
-      { key: 'id', label: 'ID', type: 'text', required: true },
-      { key: 'shortName', label: 'Kurzname', type: 'text', required: true },
-      { key: 'name', label: 'Voller Name', type: 'text', required: true },
-      { key: 'state', label: 'Bundesland', type: 'text', required: true },
-    ],
-    searchableFields: ['id', 'shortName', 'name', 'state'],
-  },
-}
-
-// =============================================================================
-// SYSTEM ENTRIES MAP
-// =============================================================================
-
-const SYSTEM_ENTRIES_MAP: Record<CatalogId, Record<string, unknown>[]> = {
-  'dsfa-risks': RISK_CATALOG as unknown as Record<string, unknown>[],
-  'dsfa-mitigations': MITIGATION_LIBRARY as unknown as Record<string, unknown>[],
-  'ai-risks': AI_RISK_CATALOG as unknown as Record<string, unknown>[],
-  'ai-mitigations': AI_MITIGATION_LIBRARY as unknown as Record<string, unknown>[],
-  'prohibited-ai-practices': PROHIBITED_AI_PRACTICES as unknown as Record<string, unknown>[],
-  'vvt-templates': VVT_BASELINE_CATALOG as unknown as Record<string, unknown>[],
-  'loeschfristen-templates': BASELINE_TEMPLATES as unknown as Record<string, unknown>[],
-  'vendor-templates': VENDOR_TEMPLATES as unknown as Record<string, unknown>[],
-  'country-risk-profiles': COUNTRY_RISK_PROFILES as unknown as Record<string, unknown>[],
-  'legal-bases': LEGAL_BASIS_INFO as unknown as Record<string, unknown>[],
-  'retention-periods': STANDARD_RETENTION_PERIODS as unknown as Record<string, unknown>[],
-  'eu-legal-frameworks': EU_BASE_FRAMEWORKS as unknown as Record<string, unknown>[],
-  'national-legal-frameworks': NATIONAL_FRAMEWORKS as unknown as Record<string, unknown>[],
-  'gdpr-enforcement-cases': GDPR_ENFORCEMENT_CASES as unknown as Record<string, unknown>[],
-  'wp248-criteria': WP248_CRITERIA as unknown as Record<string, unknown>[],
-  'sdm-goals': SDM_GOALS_ENTRIES as unknown as Record<string, unknown>[],
-  'dsfa-authority-resources': DSFA_AUTHORITY_RESOURCES as unknown as Record<string, unknown>[],
-}
-
 // =============================================================================
 // ENTRY CONVERTERS
 // =============================================================================
diff --git a/admin-lehrer/lib/sdk/dsfa/types-api.ts b/admin-lehrer/lib/sdk/dsfa/types-api.ts
new file mode 100644
index 0000000..485e9fa
--- /dev/null
+++ b/admin-lehrer/lib/sdk/dsfa/types-api.ts
@@ -0,0 +1,104 @@
+/**
+ * DSFA API Types - Request/response types and UCCA integration
+ *
+ * All types used for API communication with the DSFA backend.
+ */
+
+import type { DSFAStatus, DSFARiskLevel } from './types-core'
+import type { DSFA } from './types-assessment'
+
+// =============================================================================
+// API REQUEST/RESPONSE TYPES
+// =============================================================================
+
+export interface DSFAListResponse {
+  dsfas: DSFA[]
+}
+
+export interface DSFAStatsResponse {
+  status_stats: Record<DSFAStatus | 'total', number>
+  risk_stats: Record<DSFARiskLevel, number>
+  total: number
+}
+
+export interface CreateDSFARequest {
+  name: string
+  description?: string
+  processing_description?: string
+  processing_purpose?: string
+  data_categories?: string[]
+  legal_basis?: string
+}
+
+export interface CreateDSFAFromAssessmentRequest {
+  name?: string
+  description?: string
+}
+
+export interface CreateDSFAFromAssessmentResponse {
+  dsfa: DSFA
+  prefilled: boolean
+  assessment: unknown // UCCA Assessment
+  message: string
+}
+
+export interface UpdateDSFASectionRequest {
+  // Section 1
+  processing_description?: string
+  processing_purpose?: string
+  data_categories?: string[]
+  data_subjects?: string[]
+  recipients?: string[]
+  legal_basis?: string
+  legal_basis_details?: string
+
+  // Section 2
+  necessity_assessment?: string
+  proportionality_assessment?: string
+  data_minimization?: string
+  alternatives_considered?: string
+  retention_justification?: string
+
+  // Section 3
+  overall_risk_level?: DSFARiskLevel
+  risk_score?: number
+  affected_rights?: string[]
+
+  // Section 5
+  dpo_consulted?: boolean
+  dpo_name?: string
+  dpo_opinion?: string
+  authority_consulted?: boolean
+  authority_reference?: string
+  authority_decision?: string
+}
+
+export interface SubmitForReviewResponse {
+  message: string
+  dsfa: DSFA
+}
+
+export interface ApproveDSFARequest {
+  dpo_opinion: string
+  approved: boolean
+}
+
+// =============================================================================
+// UCCA INTEGRATION TYPES
+// =============================================================================
+
+export interface DSFATriggerInfo {
+  required: boolean
+  reason: string
+  triggered_rules: string[]
+  assessment_id?: string
+  existing_dsfa_id?: string
+}
+
+export interface UCCATriggeredRule {
+  code: string
+  title: string
+  description: string
+  severity: 'INFO' | 'WARN' | 'BLOCK'
+  gdpr_ref?: string
+}
diff --git a/admin-lehrer/lib/sdk/dsfa/types-assessment.ts b/admin-lehrer/lib/sdk/dsfa/types-assessment.ts
new file mode 100644
index 0000000..537320a
--- /dev/null
+++ b/admin-lehrer/lib/sdk/dsfa/types-assessment.ts
@@ -0,0 +1,246 @@
+/**
+ * DSFA Assessment Types - Sub-types and main DSFA interface
+ *
+ * Risk, mitigation, review, threshold analysis, stakeholder consultation,
+ * and the main DSFA data model.
+ */
+
+import type {
+  DSFAStatus,
+  DSFARiskLevel,
+  DSFARiskCategory,
+  DSFAMitigationType,
+  DSFAMitigationStatus,
+} from './types-core'
+
+// =============================================================================
+// SUB-TYPES
+// =============================================================================
+
+export interface DSFARisk {
+  id: string
+  category: DSFARiskCategory
+  description: string
+  likelihood: 'low' | 'medium' | 'high'
+  impact: 'low' | 'medium' | 'high'
+  risk_level: string
+  affected_data: string[]
+}
+
+export interface DSFAMitigation {
+  id: string
+  risk_id: string
+  description: string
+  type: DSFAMitigationType
+  status: DSFAMitigationStatus
+  implemented_at?: string
+  verified_at?: string
+  residual_risk: 'low' | 'medium' | 'high'
+  tom_reference?: string
+  responsible_party: string
+}
+
+export interface DSFAReviewComment {
+  id: string
+  section: number
+  comment: string
+  created_by: string
+  created_at: string
+  resolved: boolean
+}
+
+export interface DSFASectionProgress {
+  section_0_complete: boolean  // Schwellwertanalyse
+  section_1_complete: boolean  // Systematische Beschreibung
+  section_2_complete: boolean  // Notwendigkeit & Verhältnismäßigkeit
+  section_3_complete: boolean  // Risikobewertung
+  section_4_complete: boolean  // Abhilfemaßnahmen
+  section_5_complete: boolean  // Betroffenenperspektive (optional)
+  section_6_complete: boolean  // DSB & Behördenkonsultation
+  section_7_complete: boolean  // Fortschreibung & Review
+}
+
+// =============================================================================
+// SCHWELLWERTANALYSE / VORABPRÜFUNG (Art. 35 Abs. 1 DSGVO)
+// =============================================================================
+
+export interface DSFAThresholdAnalysis {
+  id: string
+  dsfa_id?: string
+  performed_at: string
+  performed_by: string
+
+  // WP248 Kriterien-Bewertung
+  criteria_assessment: Array<{
+    criterion_id: string  // K1-K9
+    applies: boolean
+    justification: string
+  }>
+
+  // Art. 35 Abs. 3 Prüfung
+  art35_abs3_assessment: Array<{
+    case_id: string  // a, b, c
+    applies: boolean
+    justification: string
+  }>
+
+  // Ergebnis
+  dsfa_required: boolean
+  decision_justification: string
+
+  // Dokumentation der Entscheidung (gem. DSK Kurzpapier Nr. 5)
+  documented: boolean
+  documentation_reference?: string
+}
+
+// =============================================================================
+// BETROFFENENPERSPEKTIVE (Art. 35 Abs. 9 DSGVO)
+// =============================================================================
+
+export interface DSFAStakeholderConsultation {
+  id: string
+  stakeholder_type: 'data_subjects' | 'representatives' | 'works_council' | 'other'
+  stakeholder_description: string
+  consultation_date?: string
+  consultation_method: 'survey' | 'interview' | 'workshop' | 'written' | 'other'
+  summary: string
+  concerns_raised: string[]
+  addressed_in_dsfa: boolean
+  response_documentation?: string
+}
+
+// =============================================================================
+// ART. 36 KONSULTATIONSPFLICHT
+// =============================================================================
+
+export interface DSFAConsultationRequirement {
+  high_residual_risk: boolean
+  consultation_required: boolean  // Art. 36 Abs. 1 DSGVO
+  consultation_reason?: string
+  authority_notified: boolean
+  notification_date?: string
+  authority_response?: string
+  authority_recommendations?: string[]
+  waiting_period_observed: boolean  // 8 Wochen gem. Art. 36 Abs. 2
+}
+
+// =============================================================================
+// FORTSCHREIBUNG / REVIEW (Art. 35 Abs. 11 DSGVO)
+// =============================================================================
+
+export interface DSFAReviewTrigger {
+  id: string
+  trigger_type: 'scheduled' | 'risk_change' | 'new_technology' | 'new_purpose' | 'incident' | 'regulatory' | 'other'
+  description: string
+  detected_at: string
+  detected_by: string
+  review_required: boolean
+  review_completed: boolean
+  review_date?: string
+  changes_made: string[]
+}
+
+export interface DSFAReviewSchedule {
+  next_review_date: string
+  review_frequency_months: number
+  last_review_date?: string
+  review_responsible: string
+}
+
+// =============================================================================
+// MAIN DSFA TYPE
+// =============================================================================
+
+export interface DSFA {
+  id: string
+  tenant_id: string
+  namespace_id?: string
+  processing_activity_id?: string
+  assessment_id?: string
+  name: string
+  description: string
+
+  // Section 0: Schwellwertanalyse / Vorabprüfung (NEU - Art. 35 Abs. 1)
+  threshold_analysis?: DSFAThresholdAnalysis
+  wp248_criteria_met?: string[]  // IDs der erfüllten WP248-Kriterien (K1-K9)
+  art35_abs3_triggered?: string[]  // IDs der ausgelösten Art. 35 Abs. 3 Fälle
+
+  // Section 1: Systematische Beschreibung (Art. 35 Abs. 7 lit. a)
+  processing_description: string
+  processing_purpose: string
+  data_categories: string[]
+  data_subjects: string[]
+  recipients: string[]
+  legal_basis: string
+  legal_basis_details?: string
+
+  // Section 2: Notwendigkeit & Verhältnismäßigkeit (Art. 35 Abs. 7 lit. b)
+  necessity_assessment: string
+  proportionality_assessment: string
+  data_minimization?: string
+  alternatives_considered?: string
+  retention_justification?: string
+
+  // Section 3: Risikobewertung (Art. 35 Abs. 7 lit. c)
+  risks: DSFARisk[]
+  overall_risk_level: DSFARiskLevel
+  risk_score: number
+  affected_rights?: string[]
+  triggered_rule_codes?: string[]
+
+  // KI-spezifische Trigger (NEU)
+  involves_ai?: boolean
+  ai_trigger_ids?: string[]  // IDs der ausgelösten KI-Trigger
+
+  // Section 4: Abhilfemaßnahmen (Art. 35 Abs. 7 lit. d)
+  mitigations: DSFAMitigation[]
+  tom_references?: string[]
+  residual_risk_level?: DSFARiskLevel  // Restrisiko nach Maßnahmen
+
+  // Section 5: Stellungnahme DSB (Art. 35 Abs. 2 + Art. 36)
+  dpo_consulted: boolean
+  dpo_consulted_at?: string
+  dpo_name?: string
+  dpo_opinion?: string
+  dpo_approved?: boolean
+  authority_consulted: boolean
+  authority_consulted_at?: string
+  authority_reference?: string
+  authority_decision?: string
+
+  // Art. 36 Konsultationspflicht (NEU)
+  consultation_requirement?: DSFAConsultationRequirement
+
+  // Betroffenenperspektive (NEU - Art. 35 Abs. 9)
+  stakeholder_consultations?: DSFAStakeholderConsultation[]
+  stakeholder_consultation_not_appropriate?: boolean
+  stakeholder_consultation_not_appropriate_reason?: string
+
+  // Workflow & Approval
+  status: DSFAStatus
+  submitted_for_review_at?: string
+  submitted_by?: string
+  conclusion: string
+  review_comments?: DSFAReviewComment[]
+
+  // Section Progress Tracking
+  section_progress: DSFASectionProgress
+
+  // Fortschreibung / Review (NEU - Art. 35 Abs. 11)
+  review_schedule?: DSFAReviewSchedule
+  review_triggers?: DSFAReviewTrigger[]
+  version: number  // DSFA-Version für Fortschreibung
+  previous_version_id?: string
+
+  // Referenzen zu behördlichen Ressourcen
+  federal_state?: string  // Bundesland für zuständige Aufsichtsbehörde
+  authority_resource_id?: string  // ID aus DSFA_AUTHORITY_RESOURCES
+
+  // Metadata & Audit
+  metadata?: Record<string, unknown>
+  created_at: string
+  updated_at: string
+  created_by: string
+  approved_by?: string
+  approved_at?: string
+}
diff --git a/admin-lehrer/lib/sdk/dsfa/types-authorities.ts b/admin-lehrer/lib/sdk/dsfa/types-authorities.ts
new file mode 100644
index 0000000..2a5334a
--- /dev/null
+++ b/admin-lehrer/lib/sdk/dsfa/types-authorities.ts
@@ -0,0 +1,177 @@
+/**
+ * DSFA Authority Types - German data protection authority resources
+ *
+ * DSFA must-lists and resources for all 16 Bundeslaender + BfDI.
+ */
+
+// =============================================================================
+// DSFA MUSS-LISTEN NACH BUNDESLÄNDERN
+// Quellen: Jeweilige Landesdatenschutzbeauftragte
+// =============================================================================
+
+export interface DSFAAuthorityResource {
+  id: string
+  name: string
+  shortName: string
+  state: string // Bundesland oder 'Bund'
+  overviewUrl: string
+  publicSectorListUrl?: string
+  privateSectorListUrl?: string
+  templateUrl?: string
+  additionalResources?: Array<{ title: string; url: string }>
+}
+
+export const DSFA_AUTHORITY_RESOURCES: DSFAAuthorityResource[] = [
+  {
+    id: 'bund',
+    name: 'Bundesbeauftragter für den Datenschutz und die Informationsfreiheit',
+    shortName: 'BfDI',
+    state: 'Bund',
+    overviewUrl: 'https://www.bfdi.bund.de/DE/Fachthemen/Inhalte/Technik/Datenschutz-Folgenabschaetzungen.html',
+    publicSectorListUrl: 'https://www.bfdi.bund.de/SharedDocs/Downloads/DE/Muster/Liste_VerarbeitungsvorgaengeArt35.pdf',
+    templateUrl: 'https://www.bfdi.bund.de/SharedDocs/Downloads/DE/Muster/Muster_Hinweise_DSFA.html',
+  },
+  {
+    id: 'bw',
+    name: 'Landesbeauftragter für den Datenschutz und die Informationsfreiheit Baden-Württemberg',
+    shortName: 'LfDI BW',
+    state: 'Baden-Württemberg',
+    overviewUrl: 'https://www.baden-wuerttemberg.datenschutz.de/datenschutz-folgenabschaetzung/',
+    privateSectorListUrl: 'https://www.baden-wuerttemberg.datenschutz.de/wp-content/uploads/2018/05/Liste-von-Verarbeitungsvorg%C3%A4ngen-nach-Art.-35-Abs.-4-DS-GVO-LfDI-BW.pdf',
+  },
+  {
+    id: 'by',
+    name: 'Bayerischer Landesbeauftragter für den Datenschutz',
+    shortName: 'BayLfD',
+    state: 'Bayern',
+    overviewUrl: 'https://www.datenschutz-bayern.de/dsfa/',
+    additionalResources: [
+      { title: 'DSFA-Module und Formulare', url: 'https://www.datenschutz-bayern.de/dsfa/' },
+    ],
+  },
+  {
+    id: 'be',
+    name: 'Berliner Beauftragte für Datenschutz und Informationsfreiheit',
+    shortName: 'BlnBDI',
+    state: 'Berlin',
+    overviewUrl: 'https://www.datenschutz-berlin.de/themen/unternehmen/datenschutz-folgenabschaetzung/',
+    publicSectorListUrl: 'https://www.datenschutz-berlin.de/fileadmin/user_upload/pdf/dokumente/2018-BlnBDI_DSFA-oeffentlich.pdf',
+    privateSectorListUrl: 'https://www.datenschutz-berlin.de/fileadmin/user_upload/pdf/dokumente/2018-BlnBDI_DSFA-nicht-oeffentlich.pdf',
+  },
+  {
+    id: 'bb',
+    name: 'Landesbeauftragte für den Datenschutz und für das Recht auf Akteneinsicht Brandenburg',
+    shortName: 'LDA BB',
+    state: 'Brandenburg',
+    overviewUrl: 'https://www.lda.brandenburg.de/lda/de/datenschutz/datenschutz-folgenabschaetzung/',
+    publicSectorListUrl: 'https://www.lda.brandenburg.de/sixcms/media.php/9/DSFA-Liste_%C3%B6ffentlicher_Bereich.pdf',
+    privateSectorListUrl: 'https://www.lda.brandenburg.de/sixcms/media.php/9/DSFA-Liste_nicht_%C3%B6ffentlicher_Bereich.pdf',
+  },
+  {
+    id: 'hb',
+    name: 'Landesbeauftragte für Datenschutz und Informationsfreiheit Bremen',
+    shortName: 'LfDI HB',
+    state: 'Bremen',
+    overviewUrl: 'https://www.datenschutz.bremen.de/datenschutz/datenschutz-folgenabschaetzung-3884',
+    publicSectorListUrl: 'https://www.datenschutz.bremen.de/sixcms/media.php/13/Liste%20von%20Verarbeitungsvorg%C3%A4ngen%20nach%20Artikel%2035.pdf',
+    privateSectorListUrl: 'https://www.datenschutz.bremen.de/sixcms/media.php/13/DSFA%20Muss-Liste%20LfDI%20HB.pdf',
+  },
+  {
+    id: 'hh',
+    name: 'Hamburgischer Beauftragter für Datenschutz und Informationsfreiheit',
+    shortName: 'HmbBfDI',
+    state: 'Hamburg',
+    overviewUrl: 'https://datenschutz-hamburg.de/datenschutz-folgenabschaetzung',
+    publicSectorListUrl: 'https://datenschutz-hamburg.de/fileadmin/user_upload/HmbBfDI/Datenschutz/Informationen/Liste_Art_35-4_DSGVO_HmbBfDI-oeffentlicher_Bereich_v2.0a.pdf',
+    privateSectorListUrl: 'https://datenschutz-hamburg.de/fileadmin/user_upload/HmbBfDI/Datenschutz/Informationen/DSFA_Muss-Liste_fuer_den_nicht-oeffentlicher_Bereich_-_Stand_17.10.2018.pdf',
+  },
+  {
+    id: 'he',
+    name: 'Hessischer Beauftragter für Datenschutz und Informationsfreiheit',
+    shortName: 'HBDI',
+    state: 'Hessen',
+    overviewUrl: 'https://datenschutz.hessen.de/datenschutz/it-und-datenschutz/datenschutz-folgenabschaetzung',
+  },
+  {
+    id: 'mv',
+    name: 'Landesbeauftragter für Datenschutz und Informationsfreiheit Mecklenburg-Vorpommern',
+    shortName: 'LfDI MV',
+    state: 'Mecklenburg-Vorpommern',
+    overviewUrl: 'https://www.datenschutz-mv.de/datenschutz/DSGVO/Hilfsmittel-zur-Umsetzung/',
+    publicSectorListUrl: 'https://www.datenschutz-mv.de/static/DS/Dateien/DS-GVO/HilfsmittelzurUmsetzung/MV-DSFA-Muss-Liste-Oeffentlicher-Bereich.pdf',
+  },
+  {
+    id: 'ni',
+    name: 'Die Landesbeauftragte für den Datenschutz Niedersachsen',
+    shortName: 'LfD NI',
+    state: 'Niedersachsen',
+    overviewUrl: 'https://www.lfd.niedersachsen.de/dsgvo/liste_von_verarbeitungsvorgangen_nach_art_35_abs_4_ds_gvo/muss-listen-zur-datenschutz-folgenabschatzung-179663.html',
+    publicSectorListUrl: 'https://www.lfd.niedersachsen.de/download/134414/DSFA_Muss-Liste_fuer_den_oeffentlichen_Bereich.pdf',
+    privateSectorListUrl: 'https://www.lfd.niedersachsen.de/download/131098/Liste_von_Verarbeitungsvorgaengen_nach_Art._35_Abs._4_DS-GVO.pdf',
+  },
+  {
+    id: 'nw',
+    name: 'Landesbeauftragte für Datenschutz und Informationsfreiheit Nordrhein-Westfalen',
+    shortName: 'LDI NRW',
+    state: 'Nordrhein-Westfalen',
+    overviewUrl: 'https://www.ldi.nrw.de/datenschutz/wirtschaft/datenschutz-folgenabschaetzung',
+    publicSectorListUrl: 'https://www.ldi.nrw.de/liste-von-verarbeitungsvorgaengen-nach-art-35-abs-4-ds-gvo-fuer-den-oeffentlichen-bereich',
+  },
+  {
+    id: 'rp',
+    name: 'Landesbeauftragter für den Datenschutz und die Informationsfreiheit Rheinland-Pfalz',
+    shortName: 'LfDI RP',
+    state: 'Rheinland-Pfalz',
+    overviewUrl: 'https://www.datenschutz.rlp.de/themen/datenschutz-folgenabschaetzung',
+  },
+  {
+    id: 'sl',
+    name: 'Unabhängiges Datenschutzzentrum Saarland',
+    shortName: 'UDZ SL',
+    state: 'Saarland',
+    overviewUrl: 'https://www.datenschutz.saarland.de/themen/datenschutz-folgenabschaetzung',
+    privateSectorListUrl: 'https://www.datenschutz.saarland.de/fileadmin/user_upload/uds/alle_Dateien_und_Ordner_bis_2025/Download/dsfa_muss_liste_dsk_de.pdf',
+  },
+  {
+    id: 'sn',
+    name: 'Sächsische Datenschutz- und Transparenzbeauftragte',
+    shortName: 'SDTB',
+    state: 'Sachsen',
+    overviewUrl: 'https://www.datenschutz.sachsen.de/datenschutz-folgenabschaetzung.html',
+    additionalResources: [
+      { title: 'Erforderlichkeit der DSFA', url: 'https://www.datenschutz.sachsen.de/erforderlichkeit.html' },
+    ],
+  },
+  {
+    id: 'st',
+    name: 'Landesbeauftragter für den Datenschutz Sachsen-Anhalt',
+    shortName: 'LfD ST',
+    state: 'Sachsen-Anhalt',
+    overviewUrl: 'https://datenschutz.sachsen-anhalt.de/informationen/datenschutz-grundverordnung/liste-datenschutz-folgenabschaetzung',
+    publicSectorListUrl: 'https://datenschutz.sachsen-anhalt.de/fileadmin/Bibliothek/Landesaemter/LfD/Informationen/Internationales/Datenschutz-Grundverordnung/Liste_DSFA/Art-35-Liste-oeffentlicher_Bereich.pdf',
+    privateSectorListUrl: 'https://datenschutz.sachsen-anhalt.de/fileadmin/Bibliothek/Landesaemter/LfD/Informationen/Internationales/Datenschutz-Grundverordnung/Liste_DSFA/Art-35-Liste-nichtoeffentlicher_Bereich.pdf',
+  },
+  {
+    id: 'sh',
+    name: 'Unabhängiges Landeszentrum für Datenschutz Schleswig-Holstein',
+    shortName: 'ULD SH',
+    state: 'Schleswig-Holstein',
+    overviewUrl: 'https://www.datenschutzzentrum.de/datenschutzfolgenabschaetzung/',
+    privateSectorListUrl: 'https://www.datenschutzzentrum.de/uploads/datenschutzfolgenabschaetzung/20180525_LfD-SH_DSFA_Muss-Liste_V1.0.pdf',
+    additionalResources: [
+      { title: 'Begleittext zur DSFA-Liste', url: 'https://www.datenschutzzentrum.de/uploads/dsgvo/2018_0807_LfD-SH_DSFA_Begleittext_V1.0a.pdf' },
+    ],
+  },
+  {
+    id: 'th',
+    name: 'Thüringer Landesbeauftragter für den Datenschutz und die Informationsfreiheit',
+    shortName: 'TLfDI',
+    state: 'Thüringen',
+    overviewUrl: 'https://www.tlfdi.de/datenschutz/datenschutz-folgenabschaetzung/',
+    privateSectorListUrl: 'https://tlfdi.de/fileadmin/tlfdi/datenschutz/dsfa_muss-liste_04_07_18.pdf',
+    additionalResources: [
+      { title: 'Handreichung DS-FA (nicht-öffentlich)', url: 'https://tlfdi.de/fileadmin/tlfdi/datenschutz/handreichung_ds-fa.pdf' },
+      { title: 'Handreichung DS-FA (öffentlich)', url: 'https://tlfdi.de/fileadmin/tlfdi/Europa/Handreichung_zur_Datenschutz-Folgenabschaetzung_oeffentlicher_Bereich.pdf' },
+    ],
+  },
+]
diff --git a/admin-lehrer/lib/sdk/dsfa/types-core.ts b/admin-lehrer/lib/sdk/dsfa/types-core.ts
new file mode 100644
index 0000000..f41d010
--- /dev/null
+++ b/admin-lehrer/lib/sdk/dsfa/types-core.ts
@@ -0,0 +1,109 @@
+/**
+ * DSFA Core Types - Base enums, type aliases, and constants
+ *
+ * SDM goals, status labels, risk levels, legal bases, affected rights.
+ */
+
+// =============================================================================
+// SDM GEWAEHRLEISTUNGSZIELE (Standard-Datenschutzmodell V2.0)
+// =============================================================================
+
+export type SDMGoal =
+  | 'datenminimierung'
+  | 'verfuegbarkeit'
+  | 'integritaet'
+  | 'vertraulichkeit'
+  | 'nichtverkettung'
+  | 'transparenz'
+  | 'intervenierbarkeit'
+
+export const SDM_GOALS: Record<SDMGoal, { name: string; description: string; article: string }> = {
+  datenminimierung: {
+    name: 'Datenminimierung',
+    description: 'Verarbeitung personenbezogener Daten auf das dem Zweck angemessene, erhebliche und notwendige Mass beschraenken.',
+    article: 'Art. 5 Abs. 1 lit. c DSGVO',
+  },
+  verfuegbarkeit: {
+    name: 'Verfuegbarkeit',
+    description: 'Personenbezogene Daten muessen dem Verantwortlichen zur Verfuegung stehen und ordnungsgemaess im vorgesehenen Prozess verwendet werden koennen.',
+    article: 'Art. 32 Abs. 1 lit. b DSGVO',
+  },
+  integritaet: {
+    name: 'Integritaet',
+    description: 'Personenbezogene Daten bleiben waehrend der Verarbeitung unversehrt, vollstaendig und aktuell.',
+    article: 'Art. 5 Abs. 1 lit. d DSGVO',
+  },
+  vertraulichkeit: {
+    name: 'Vertraulichkeit',
+    description: 'Kein unbefugter Zugriff auf personenbezogene Daten. Nur befugte Personen koennen auf Daten zugreifen.',
+    article: 'Art. 32 Abs. 1 lit. b DSGVO',
+  },
+  nichtverkettung: {
+    name: 'Nichtverkettung',
+    description: 'Personenbezogene Daten duerfen nicht ohne Weiteres fuer einen anderen als den erhobenen Zweck zusammengefuehrt werden (Zweckbindung).',
+    article: 'Art. 5 Abs. 1 lit. b DSGVO',
+  },
+  transparenz: {
+    name: 'Transparenz',
+    description: 'Die Verarbeitung personenbezogener Daten muss fuer Betroffene und Aufsichtsbehoerden nachvollziehbar sein.',
+    article: 'Art. 5 Abs. 1 lit. a DSGVO',
+  },
+  intervenierbarkeit: {
+    name: 'Intervenierbarkeit',
+    description: 'Den Betroffenen werden wirksame Moeglichkeiten der Einflussnahme (Auskunft, Berichtigung, Loeschung, Widerspruch) auf die Verarbeitung gewaehrt.',
+    article: 'Art. 15-21 DSGVO',
+  },
+}
+
+// =============================================================================
+// ENUMS & CONSTANTS
+// =============================================================================
+
+export type DSFAStatus = 'draft' | 'in_review' | 'approved' | 'rejected' | 'needs_update'
+
+export type DSFARiskLevel = 'low' | 'medium' | 'high' | 'very_high'
+
+export type DSFARiskCategory = 'confidentiality' | 'integrity' | 'availability' | 'rights_freedoms'
+
+export type DSFAMitigationType = 'technical' | 'organizational' | 'legal'
+
+export type DSFAMitigationStatus = 'planned' | 'in_progress' | 'implemented' | 'verified'
+
+export const DSFA_STATUS_LABELS: Record<DSFAStatus, string> = {
+  draft: 'Entwurf',
+  in_review: 'In Prüfung',
+  approved: 'Genehmigt',
+  rejected: 'Abgelehnt',
+  needs_update: 'Überarbeitung erforderlich',
+}
+
+export const DSFA_RISK_LEVEL_LABELS: Record<DSFARiskLevel, string> = {
+  low: 'Niedrig',
+  medium: 'Mittel',
+  high: 'Hoch',
+  very_high: 'Sehr Hoch',
+}
+
+export const DSFA_LEGAL_BASES = {
+  consent: 'Art. 6 Abs. 1 lit. a DSGVO - Einwilligung',
+  contract: 'Art. 6 Abs. 1 lit. b DSGVO - Vertrag',
+  legal_obligation: 'Art. 6 Abs. 1 lit. c DSGVO - Rechtliche Verpflichtung',
+  vital_interests: 'Art. 6 Abs. 1 lit. d DSGVO - Lebenswichtige Interessen',
+  public_interest: 'Art. 6 Abs. 1 lit. e DSGVO - Öffentliches Interesse',
+  legitimate_interest: 'Art. 6 Abs. 1 lit. f DSGVO - Berechtigtes Interesse',
+}
+
+export const DSFA_AFFECTED_RIGHTS = [
+  { id: 'right_to_information', label: 'Recht auf Information (Art. 13/14)' },
+  { id: 'right_of_access', label: 'Auskunftsrecht (Art. 15)' },
+  { id: 'right_to_rectification', label: 'Recht auf Berichtigung (Art. 16)' },
+  { id: 'right_to_erasure', label: 'Recht auf Löschung (Art. 17)' },
+  { id: 'right_to_restriction', label: 'Recht auf Einschränkung (Art. 18)' },
+  { id: 'right_to_data_portability', label: 'Recht auf Datenübertragbarkeit (Art. 20)' },
+  { id: 'right_to_object', label: 'Widerspruchsrecht (Art. 21)' },
+  { id: 'right_not_to_be_profiled', label: 'Recht bzgl. Profiling (Art. 22)' },
+  { id: 'freedom_of_expression', label: 'Meinungsfreiheit' },
+  { id: 'freedom_of_association', label: 'Versammlungsfreiheit' },
+  { id: 'non_discrimination', label: 'Nichtdiskriminierung' },
+  { id: 'data_security', label: 'Datensicherheit' },
+]
diff --git a/admin-lehrer/lib/sdk/dsfa/types-risk-helpers.ts b/admin-lehrer/lib/sdk/dsfa/types-risk-helpers.ts
new file mode 100644
index 0000000..f9ce7ec
--- /dev/null
+++ b/admin-lehrer/lib/sdk/dsfa/types-risk-helpers.ts
@@ -0,0 +1,202 @@
+/**
+ * DSFA Risk Helpers - Risk matrix, calculation functions, and utility helpers
+ *
+ * Risk matrix cells, risk level calculation, WP248 checks,
+ * Art. 36 consultation, authority lookups, review helpers, AI triggers.
+ */
+
+import type { DSFARiskLevel } from './types-core'
+import type { DSFAConsultationRequirement, DSFAReviewTrigger, DSFAReviewSchedule } from './types-assessment'
+import { DSFA_AUTHORITY_RESOURCES } from './types-authorities'
+import type { DSFAAuthorityResource } from './types-authorities'
+import { WP248_CRITERIA, ART35_ABS3_CASES, AI_DSFA_TRIGGERS } from './types-wp248'
+
+// =============================================================================
+// RISK MATRIX HELPERS
+// =============================================================================
+
+export interface RiskMatrixCell {
+  likelihood: 'low' | 'medium' | 'high'
+  impact: 'low' | 'medium' | 'high'
+  level: DSFARiskLevel
+  score: number
+}
+
+export const RISK_MATRIX: RiskMatrixCell[] = [
+  // Low likelihood
+  { likelihood: 'low', impact: 'low', level: 'low', score: 10 },
+  { likelihood: 'low', impact: 'medium', level: 'low', score: 20 },
+  { likelihood: 'low', impact: 'high', level: 'medium', score: 40 },
+  // Medium likelihood
+  { likelihood: 'medium', impact: 'low', level: 'low', score: 20 },
+  { likelihood: 'medium', impact: 'medium', level: 'medium', score: 50 },
+  { likelihood: 'medium', impact: 'high', level: 'high', score: 70 },
+  // High likelihood
+  { likelihood: 'high', impact: 'low', level: 'medium', score: 40 },
+  { likelihood: 'high', impact: 'medium', level: 'high', score: 70 },
+  { likelihood: 'high', impact: 'high', level: 'very_high', score: 90 },
+]
+
+export function calculateRiskLevel(
+  likelihood: 'low' | 'medium' | 'high',
+  impact: 'low' | 'medium' | 'high'
+): { level: DSFARiskLevel; score: number } {
+  const cell = RISK_MATRIX.find(c => c.likelihood === likelihood && c.impact === impact)
+  return cell ? { level: cell.level, score: cell.score } : { level: 'medium', score: 50 }
+}
+
+// =============================================================================
+// HELPER FUNCTIONS
+// =============================================================================
+
+/**
+ * Prüft anhand der WP248-Kriterien, ob eine DSFA erforderlich ist.
+ * Regel: Bei >= 2 erfüllten Kriterien ist DSFA in den meisten Fällen erforderlich.
+ * @param criteriaIds Array der erfüllten Kriterien-IDs (z.B. ['K1', 'K4'])
+ * @returns Objekt mit Ergebnis und Begründung
+ */
+export function checkDSFARequiredByWP248(criteriaIds: string[]): {
+  required: boolean
+  confidence: 'definite' | 'likely' | 'possible' | 'unlikely'
+  reason: string
+} {
+  const count = criteriaIds.length
+
+  if (count >= 2) {
+    return {
+      required: true,
+      confidence: 'definite',
+      reason: `${count} WP248-Kriterien erfüllt (>= 2). DSFA ist in den meisten Fällen erforderlich.`,
+    }
+  }
+
+  if (count === 1) {
+    return {
+      required: false,
+      confidence: 'possible',
+      reason: '1 WP248-Kriterium erfüllt. DSFA kann je nach Risiko dennoch erforderlich sein. Einzelfallprüfung empfohlen.',
+    }
+  }
+
+  return {
+    required: false,
+    confidence: 'unlikely',
+    reason: 'Keine WP248-Kriterien erfüllt. DSFA wahrscheinlich nicht erforderlich, sofern kein Art. 35 Abs. 3 Fall vorliegt.',
+  }
+}
+
+/**
+ * Prüft, ob eine Konsultation der Aufsichtsbehörde gem. Art. 36 DSGVO erforderlich ist.
+ * Erforderlich wenn: Hohes Restrisiko trotz geplanter Maßnahmen.
+ */
+export function checkArt36ConsultationRequired(
+  residualRiskLevel: DSFARiskLevel,
+  mitigationsImplemented: boolean
+): DSFAConsultationRequirement {
+  const highResidual = residualRiskLevel === 'high' || residualRiskLevel === 'very_high'
+  const consultationRequired = highResidual && mitigationsImplemented
+
+  return {
+    high_residual_risk: highResidual,
+    consultation_required: consultationRequired,
+    consultation_reason: consultationRequired
+      ? 'Trotz geplanter Maßnahmen verbleibt ein hohes Restrisiko. Gem. Art. 36 Abs. 1 DSGVO ist vor der Verarbeitung die Aufsichtsbehörde zu konsultieren.'
+      : highResidual
+        ? 'Hohes Restrisiko festgestellt, aber Maßnahmen noch nicht vollständig umgesetzt.'
+        : undefined,
+    authority_notified: false,
+    waiting_period_observed: false,
+  }
+}
+
+/**
+ * Gibt die zuständige Aufsichtsbehörde für ein Bundesland zurück.
+ */
+export function getAuthorityResource(stateId: string): DSFAAuthorityResource | undefined {
+  return DSFA_AUTHORITY_RESOURCES.find(r => r.id === stateId)
+}
+
+/**
+ * Gibt alle Bundesländer als Auswahlliste zurück.
+ */
+export function getFederalStateOptions(): Array<{ value: string; label: string }> {
+  return DSFA_AUTHORITY_RESOURCES.map(r => ({
+    value: r.id,
+    label: r.state,
+  }))
+}
+
+/**
+ * Prüft, ob ein Review-Trigger eine Aktualisierung der DSFA erfordert.
+ */
+export function checkReviewRequired(triggers: DSFAReviewTrigger[]): {
+  required: boolean
+  pendingTriggers: DSFAReviewTrigger[]
+} {
+  const pendingTriggers = triggers.filter(t => t.review_required && !t.review_completed)
+  return {
+    required: pendingTriggers.length > 0,
+    pendingTriggers,
+  }
+}
+
+/**
+ * Berechnet das nächste Review-Datum basierend auf dem Schedule.
+ */
+export function calculateNextReviewDate(schedule: DSFAReviewSchedule): Date {
+  const lastReview = schedule.last_review_date
+    ? new Date(schedule.last_review_date)
+    : new Date()
+
+  const nextReview = new Date(lastReview)
+  nextReview.setMonth(nextReview.getMonth() + schedule.review_frequency_months)
+  return nextReview
+}
+
+/**
+ * Prüft, ob KI-spezifische DSFA-Trigger erfüllt sind.
+ */
+export function checkAIDSFATriggers(
+  aiTriggerIds: string[]
+): { triggered: boolean; triggers: typeof AI_DSFA_TRIGGERS } {
+  const triggered = AI_DSFA_TRIGGERS.filter(t => aiTriggerIds.includes(t.id))
+  return {
+    triggered: triggered.length > 0,
+    triggers: triggered,
+  }
+}
+
+/**
+ * Generiert eine Checkliste für die Schwellwertanalyse.
+ */
+export function generateThresholdAnalysisChecklist(): Array<{
+  category: string
+  items: Array<{ id: string; label: string; description: string }>
+}> {
+  return [
+    {
+      category: 'WP248 Kriterien (Art.-29-Datenschutzgruppe)',
+      items: WP248_CRITERIA.map(c => ({
+        id: c.id,
+        label: `${c.code}: ${c.title}`,
+        description: c.description,
+      })),
+    },
+    {
+      category: 'Art. 35 Abs. 3 DSGVO Regelbeispiele',
+      items: ART35_ABS3_CASES.map(c => ({
+        id: c.id,
+        label: `lit. ${c.lit}: ${c.title}`,
+        description: c.description,
+      })),
+    },
+    {
+      category: 'KI-spezifische Trigger (Deutsche DSFA-Liste)',
+      items: AI_DSFA_TRIGGERS.map(t => ({
+        id: t.id,
+        label: t.title,
+        description: t.description,
+      })),
+    },
+  ]
+}
diff --git a/admin-lehrer/lib/sdk/dsfa/types-ui.ts b/admin-lehrer/lib/sdk/dsfa/types-ui.ts
new file mode 100644
index 0000000..9d6a65c
--- /dev/null
+++ b/admin-lehrer/lib/sdk/dsfa/types-ui.ts
@@ -0,0 +1,95 @@
+/**
+ * DSFA UI Types - Section configuration for the DSFA wizard UI
+ *
+ * Defines the section structure, labels, and GDPR references
+ * used by the frontend wizard components.
+ */
+
+// =============================================================================
+// HELPER TYPES FOR UI
+// =============================================================================
+
+export interface DSFASectionConfig {
+  number: number
+  title: string
+  titleDE: string
+  description: string
+  gdprRef: string
+  fields: string[]
+  required: boolean
+}
+
+export const DSFA_SECTIONS: DSFASectionConfig[] = [
+  {
+    number: 0,
+    title: 'Threshold Analysis',
+    titleDE: 'Schwellwertanalyse',
+    description: 'Prüfen Sie anhand der WP248-Kriterien und Art. 35 Abs. 3, ob eine DSFA erforderlich ist. Die Entscheidung ist zu dokumentieren.',
+    gdprRef: 'Art. 35 Abs. 1 DSGVO, WP248 rev.01',
+    fields: ['threshold_analysis', 'wp248_criteria_met', 'art35_abs3_triggered'],
+    required: true,
+  },
+  {
+    number: 1,
+    title: 'Processing Description',
+    titleDE: 'Systematische Beschreibung',
+    description: 'Beschreiben Sie die geplante Verarbeitung, ihren Zweck, die Datenkategorien und Rechtsgrundlage.',
+    gdprRef: 'Art. 35 Abs. 7 lit. a DSGVO',
+    fields: ['processing_description', 'processing_purpose', 'data_categories', 'data_subjects', 'recipients', 'legal_basis'],
+    required: true,
+  },
+  {
+    number: 2,
+    title: 'Necessity & Proportionality',
+    titleDE: 'Notwendigkeit & Verhältnismäßigkeit',
+    description: 'Begründen Sie, warum die Verarbeitung notwendig ist und welche Alternativen geprüft wurden.',
+    gdprRef: 'Art. 35 Abs. 7 lit. b DSGVO',
+    fields: ['necessity_assessment', 'proportionality_assessment', 'data_minimization', 'alternatives_considered'],
+    required: true,
+  },
+  {
+    number: 3,
+    title: 'Risk Assessment',
+    titleDE: 'Risikobewertung',
+    description: 'Identifizieren und bewerten Sie die Risiken für die Rechte und Freiheiten der Betroffenen.',
+    gdprRef: 'Art. 35 Abs. 7 lit. c DSGVO',
+    fields: ['risks', 'overall_risk_level', 'risk_score', 'affected_rights', 'involves_ai', 'ai_trigger_ids'],
+    required: true,
+  },
+  {
+    number: 4,
+    title: 'Mitigation Measures',
+    titleDE: 'Abhilfemaßnahmen',
+    description: 'Definieren Sie technische und organisatorische Maßnahmen zur Risikominimierung und bewerten Sie das Restrisiko.',
+    gdprRef: 'Art. 35 Abs. 7 lit. d DSGVO',
+    fields: ['mitigations', 'tom_references', 'residual_risk_level'],
+    required: true,
+  },
+  {
+    number: 5,
+    title: 'Stakeholder Consultation',
+    titleDE: 'Betroffenenperspektive',
+    description: 'Dokumentieren Sie, ob und wie die Standpunkte der Betroffenen eingeholt wurden (z.B. Betriebsrat, Nutzerumfragen).',
+    gdprRef: 'Art. 35 Abs. 9 DSGVO',
+    fields: ['stakeholder_consultations', 'stakeholder_consultation_not_appropriate', 'stakeholder_consultation_not_appropriate_reason'],
+    required: false,
+  },
+  {
+    number: 6,
+    title: 'DPO Opinion & Authority Consultation',
+    titleDE: 'DSB-Stellungnahme & Behördenkonsultation',
+    description: 'Dokumentieren Sie die Konsultation des DSB und prüfen Sie, ob bei hohem Restrisiko eine Behördenkonsultation erforderlich ist.',
+    gdprRef: 'Art. 35 Abs. 2, Art. 36 DSGVO',
+    fields: ['dpo_consulted', 'dpo_opinion', 'consultation_requirement', 'authority_consulted', 'authority_reference'],
+    required: true,
+  },
+  {
+    number: 7,
+    title: 'Review & Maintenance',
+    titleDE: 'Fortschreibung & Review',
+    description: 'Planen Sie regelmäßige Überprüfungen und dokumentieren Sie Änderungen, die eine Aktualisierung der DSFA erfordern.',
+    gdprRef: 'Art. 35 Abs. 11 DSGVO',
+    fields: ['review_schedule', 'review_triggers', 'version'],
+    required: true,
+  },
+]
diff --git a/admin-lehrer/lib/sdk/dsfa/types-wp248.ts b/admin-lehrer/lib/sdk/dsfa/types-wp248.ts
new file mode 100644
index 0000000..1109467
--- /dev/null
+++ b/admin-lehrer/lib/sdk/dsfa/types-wp248.ts
@@ -0,0 +1,183 @@
+/**
+ * DSFA WP248 Types - Threshold analysis criteria, Art. 35 cases, AI triggers
+ *
+ * WP248 rev.01 criteria, DSK Kurzpapier Nr. 5, Art. 35 Abs. 3 DSGVO cases,
+ * and AI-specific DSFA triggers.
+ */
+
+// =============================================================================
+// WP248 REV.01 KRITERIEN (Schwellwertanalyse)
+// Quelle: Artikel-29-Datenschutzgruppe, bestätigt durch EDSA
+// =============================================================================
+
+export interface WP248Criterion {
+  id: string
+  code: string
+  title: string
+  description: string
+  examples: string[]
+  gdprRef?: string
+}
+
+/**
+ * WP248 rev.01 Kriterien zur Bestimmung der DSFA-Pflicht
+ * Regel: Bei >= 2 erfüllten Kriterien ist DSFA in den meisten Fällen erforderlich
+ */
+export const WP248_CRITERIA: WP248Criterion[] = [
+  {
+    id: 'scoring_profiling',
+    code: 'K1',
+    title: 'Bewertung oder Scoring',
+    description: 'Einschließlich Profiling und Prognosen, insbesondere zu Arbeitsleistung, wirtschaftlicher Lage, Gesundheit, persönlichen Vorlieben, Zuverlässigkeit, Verhalten, Aufenthaltsort oder Ortswechsel.',
+    examples: ['Bonitätsprüfung', 'Leistungsbeurteilung', 'Verhaltensanalyse'],
+    gdprRef: 'Art. 35 Abs. 3 lit. a DSGVO',
+  },
+  {
+    id: 'automated_decision',
+    code: 'K2',
+    title: 'Automatisierte Entscheidungsfindung mit Rechtswirkung',
+    description: 'Automatisierte Verarbeitung, die als Grundlage für Entscheidungen dient, die Rechtswirkung gegenüber natürlichen Personen entfalten oder diese erheblich beeinträchtigen.',
+    examples: ['Automatische Kreditvergabe', 'Automatische Bewerbungsablehnung', 'Algorithmenbasierte Preisgestaltung'],
+    gdprRef: 'Art. 22 DSGVO',
+  },
+  {
+    id: 'systematic_monitoring',
+    code: 'K3',
+    title: 'Systematische Überwachung',
+    description: 'Verarbeitung zur Beobachtung, Überwachung oder Kontrolle von betroffenen Personen, einschließlich Datenerhebung über Netzwerke oder systematische Überwachung öffentlicher Bereiche.',
+    examples: ['Videoüberwachung', 'WLAN-Tracking', 'GPS-Ortung', 'Mitarbeiterüberwachung'],
+    gdprRef: 'Art. 35 Abs. 3 lit. c DSGVO',
+  },
+  {
+    id: 'sensitive_data',
+    code: 'K4',
+    title: 'Sensible Daten oder höchst persönliche Daten',
+    description: 'Verarbeitung besonderer Kategorien personenbezogener Daten (Art. 9), strafrechtlicher Daten (Art. 10) oder anderer höchst persönlicher Daten wie Kommunikationsinhalte, Standortdaten, Finanzinformationen.',
+    examples: ['Gesundheitsdaten', 'Biometrische Daten', 'Genetische Daten', 'Politische Meinungen', 'Gewerkschaftszugehörigkeit'],
+    gdprRef: 'Art. 9, Art. 10 DSGVO',
+  },
+  {
+    id: 'large_scale',
+    code: 'K5',
+    title: 'Datenverarbeitung in großem Umfang',
+    description: 'Berücksichtigt werden: Zahl der Betroffenen, Datenmenge, Dauer der Verarbeitung, geografische Reichweite.',
+    examples: ['Landesweite Datenbanken', 'Millionen von Nutzern', 'Mehrjährige Speicherung'],
+    gdprRef: 'Erwägungsgrund 91 DSGVO',
+  },
+  {
+    id: 'matching_combining',
+    code: 'K6',
+    title: 'Abgleichen oder Zusammenführen von Datensätzen',
+    description: 'Datensätze aus verschiedenen Quellen, die für unterschiedliche Zwecke und/oder von verschiedenen Verantwortlichen erhoben wurden, werden abgeglichen oder zusammengeführt.',
+    examples: ['Data Warehousing', 'Big Data Analytics', 'Zusammenführung von Online-/Offline-Daten'],
+  },
+  {
+    id: 'vulnerable_subjects',
+    code: 'K7',
+    title: 'Daten zu schutzbedürftigen Betroffenen',
+    description: 'Verarbeitung von Daten schutzbedürftiger Personen, bei denen ein Ungleichgewicht zwischen Betroffenem und Verantwortlichem besteht.',
+    examples: ['Kinder/Minderjährige', 'Arbeitnehmer', 'Patienten', 'Ältere Menschen', 'Asylbewerber'],
+    gdprRef: 'Erwägungsgrund 75 DSGVO',
+  },
+  {
+    id: 'innovative_technology',
+    code: 'K8',
+    title: 'Innovative Nutzung oder Anwendung neuer technologischer oder organisatorischer Lösungen',
+    description: 'Einsatz neuer Technologien kann neue Formen der Datenerhebung und -nutzung mit sich bringen, möglicherweise mit hohem Risiko für Rechte und Freiheiten.',
+    examples: ['Künstliche Intelligenz', 'Machine Learning', 'IoT-Geräte', 'Biometrische Erkennung', 'Blockchain'],
+    gdprRef: 'Erwägungsgrund 89, 91 DSGVO',
+  },
+  {
+    id: 'preventing_rights',
+    code: 'K9',
+    title: 'Verarbeitung, die Betroffene an der Ausübung eines Rechts oder der Nutzung einer Dienstleistung hindert',
+    description: 'Verarbeitungsvorgänge, die darauf abzielen, einer Person den Zugang zu einer Dienstleistung oder den Abschluss eines Vertrags zu ermöglichen oder zu verweigern.',
+    examples: ['Zugang zu Sozialleistungen', 'Kreditvergabe', 'Versicherungsabschluss'],
+    gdprRef: 'Art. 22 DSGVO',
+  },
+]
+
+// =============================================================================
+// DSK KURZPAPIER NR. 5 REFERENZEN
+// =============================================================================
+
+export const DSK_KURZPAPIER_5 = {
+  title: 'Kurzpapier Nr. 5: Datenschutz-Folgenabschätzung nach Art. 35 DS-GVO',
+  source: 'Datenschutzkonferenz (DSK)',
+  url: 'https://www.datenschutzkonferenz-online.de/media/kp/dsk_kpnr_5.pdf',
+  license: 'Datenlizenz Deutschland – Namensnennung – Version 2.0 (DL-DE BY 2.0)',
+  licenseUrl: 'https://www.govdata.de/dl-de/by-2-0',
+  processSteps: [
+    { step: 1, title: 'Projektteam bilden', description: 'Interdisziplinäres Team aus Datenschutz, Fachprozess, IT/Sicherheit' },
+    { step: 2, title: 'Verarbeitung abgrenzen', description: 'Scope definieren, Datenflüsse und Zwecke beschreiben' },
+    { step: 3, title: 'Prüfung der Notwendigkeit', description: 'Alternativen prüfen, Datenminimierung bewerten' },
+    { step: 4, title: 'Risiken identifizieren', description: 'Risikoquellen ermitteln, Schäden bewerten' },
+    { step: 5, title: 'Maßnahmen festlegen', description: 'TOM definieren, Restrisiko bewerten' },
+    { step: 6, title: 'Bericht erstellen', description: 'DSFA-Bericht dokumentieren, ggf. veröffentlichen' },
+    { step: 7, title: 'Fortschreibung', description: 'DSFA bei Änderungen aktualisieren' },
+  ],
+}
+
+// =============================================================================
+// ART. 35 ABS. 3 DSGVO - REGELBEISPIELE
+// =============================================================================
+
+export const ART35_ABS3_CASES = [
+  {
+    id: 'profiling_legal_effects',
+    lit: 'a',
+    title: 'Profiling mit Rechtswirkung',
+    description: 'Systematische und umfassende Bewertung persönlicher Aspekte natürlicher Personen, die sich auf automatisierte Verarbeitung einschließlich Profiling gründet und die ihrerseits als Grundlage für Entscheidungen dient, die Rechtswirkung gegenüber natürlichen Personen entfalten oder diese in ähnlich erheblicher Weise beeinträchtigen.',
+    gdprRef: 'Art. 35 Abs. 3 lit. a DSGVO',
+  },
+  {
+    id: 'special_categories',
+    lit: 'b',
+    title: 'Besondere Datenkategorien in großem Umfang',
+    description: 'Umfangreiche Verarbeitung besonderer Kategorien von personenbezogenen Daten gemäß Artikel 9 Absatz 1 oder von personenbezogenen Daten über strafrechtliche Verurteilungen und Straftaten gemäß Artikel 10.',
+    gdprRef: 'Art. 35 Abs. 3 lit. b DSGVO',
+  },
+  {
+    id: 'public_monitoring',
+    lit: 'c',
+    title: 'Systematische Überwachung öffentlicher Bereiche',
+    description: 'Systematische umfangreiche Überwachung öffentlich zugänglicher Bereiche.',
+    gdprRef: 'Art. 35 Abs. 3 lit. c DSGVO',
+  },
+]
+
+// =============================================================================
+// KI-SPEZIFISCHE DSFA-TRIGGER
+// Quelle: Deutsche DSFA-Liste (nicht-öffentlicher Bereich)
+// =============================================================================
+
+export const AI_DSFA_TRIGGERS = [
+  {
+    id: 'ai_interaction',
+    title: 'KI zur Steuerung der Interaktion mit Betroffenen',
+    description: 'Einsatz von künstlicher Intelligenz zur Steuerung der Interaktion mit betroffenen Personen.',
+    examples: ['KI-gestützter Kundensupport', 'Chatbots mit personenbezogener Verarbeitung', 'Automatisierte Kommunikation'],
+    requiresDSFA: true,
+  },
+  {
+    id: 'ai_personal_aspects',
+    title: 'KI zur Bewertung persönlicher Aspekte',
+    description: 'Einsatz von künstlicher Intelligenz zur Bewertung persönlicher Aspekte natürlicher Personen.',
+    examples: ['Automatisierte Stimmungsanalyse', 'Verhaltensvorhersagen', 'Persönlichkeitsprofile'],
+    requiresDSFA: true,
+  },
+  {
+    id: 'ai_decision_making',
+    title: 'KI-basierte automatisierte Entscheidungen',
+    description: 'Automatisierte Entscheidungsfindung auf Basis von KI mit erheblicher Auswirkung auf Betroffene.',
+    examples: ['Automatische Kreditvergabe', 'KI-basiertes Recruiting', 'Algorithmenbasierte Preisgestaltung'],
+    requiresDSFA: true,
+  },
+  {
+    id: 'ai_training_personal_data',
+    title: 'KI-Training mit personenbezogenen Daten',
+    description: 'Training von KI-Modellen mit personenbezogenen Daten, insbesondere sensiblen Daten.',
+    examples: ['Training mit Gesundheitsdaten', 'Fine-Tuning mit Kundendaten', 'ML mit biometrischen Daten'],
+    requiresDSFA: true,
+  },
+]
diff --git a/admin-lehrer/lib/sdk/dsfa/types.ts b/admin-lehrer/lib/sdk/dsfa/types.ts
index 88d8f08..c97218f 100644
--- a/admin-lehrer/lib/sdk/dsfa/types.ts
+++ b/admin-lehrer/lib/sdk/dsfa/types.ts
@@ -1,1066 +1,23 @@
 /**
- * DSFA Types - Datenschutz-Folgenabschätzung (Art. 35 DSGVO)
+ * DSFA Types - Barrel re-export
  *
- * TypeScript type definitions for DSFA (Data Protection Impact Assessment)
- * aligned with the backend Go models.
+ * All DSFA types were split into domain-specific files for maintainability.
+ * This file re-exports everything so existing imports continue to work.
+ *
+ * Split files:
+ * - types-core.ts        — Base enums, SDM goals, status labels, legal bases
+ * - types-wp248.ts       — WP248 criteria, Art. 35 Abs. 3, AI triggers, DSK ref
+ * - types-authorities.ts — German DPA authority resources (16 Bundeslaender)
+ * - types-assessment.ts  — Sub-types (risks, mitigations, reviews) + main DSFA
+ * - types-api.ts         — API request/response types, UCCA integration
+ * - types-ui.ts          — Section config for frontend wizard
+ * - types-risk-helpers.ts — Risk matrix, calculation + helper functions
  */
 
-// =============================================================================
-// SDM GEWAEHRLEISTUNGSZIELE (Standard-Datenschutzmodell V2.0)
-// =============================================================================
-
-export type SDMGoal =
-  | 'datenminimierung'
-  | 'verfuegbarkeit'
-  | 'integritaet'
-  | 'vertraulichkeit'
-  | 'nichtverkettung'
-  | 'transparenz'
-  | 'intervenierbarkeit'
-
-export const SDM_GOALS: Record<SDMGoal, { name: string; description: string; article: string }> = {
-  datenminimierung: {
-    name: 'Datenminimierung',
-    description: 'Verarbeitung personenbezogener Daten auf das dem Zweck angemessene, erhebliche und notwendige Mass beschraenken.',
-    article: 'Art. 5 Abs. 1 lit. c DSGVO',
-  },
-  verfuegbarkeit: {
-    name: 'Verfuegbarkeit',
-    description: 'Personenbezogene Daten muessen dem Verantwortlichen zur Verfuegung stehen und ordnungsgemaess im vorgesehenen Prozess verwendet werden koennen.',
-    article: 'Art. 32 Abs. 1 lit. b DSGVO',
-  },
-  integritaet: {
-    name: 'Integritaet',
-    description: 'Personenbezogene Daten bleiben waehrend der Verarbeitung unversehrt, vollstaendig und aktuell.',
-    article: 'Art. 5 Abs. 1 lit. d DSGVO',
-  },
-  vertraulichkeit: {
-    name: 'Vertraulichkeit',
-    description: 'Kein unbefugter Zugriff auf personenbezogene Daten. Nur befugte Personen koennen auf Daten zugreifen.',
-    article: 'Art. 32 Abs. 1 lit. b DSGVO',
-  },
-  nichtverkettung: {
-    name: 'Nichtverkettung',
-    description: 'Personenbezogene Daten duerfen nicht ohne Weiteres fuer einen anderen als den erhobenen Zweck zusammengefuehrt werden (Zweckbindung).',
-    article: 'Art. 5 Abs. 1 lit. b DSGVO',
-  },
-  transparenz: {
-    name: 'Transparenz',
-    description: 'Die Verarbeitung personenbezogener Daten muss fuer Betroffene und Aufsichtsbehoerden nachvollziehbar sein.',
-    article: 'Art. 5 Abs. 1 lit. a DSGVO',
-  },
-  intervenierbarkeit: {
-    name: 'Intervenierbarkeit',
-    description: 'Den Betroffenen werden wirksame Moeglichkeiten der Einflussnahme (Auskunft, Berichtigung, Loeschung, Widerspruch) auf die Verarbeitung gewaehrt.',
-    article: 'Art. 15-21 DSGVO',
-  },
-}
-
-// =============================================================================
-// ENUMS & CONSTANTS
-// =============================================================================
-
-export type DSFAStatus = 'draft' | 'in_review' | 'approved' | 'rejected' | 'needs_update'
-
-export type DSFARiskLevel = 'low' | 'medium' | 'high' | 'very_high'
-
-export type DSFARiskCategory = 'confidentiality' | 'integrity' | 'availability' | 'rights_freedoms'
-
-export type DSFAMitigationType = 'technical' | 'organizational' | 'legal'
-
-export type DSFAMitigationStatus = 'planned' | 'in_progress' | 'implemented' | 'verified'
-
-export const DSFA_STATUS_LABELS: Record<DSFAStatus, string> = {
-  draft: 'Entwurf',
-  in_review: 'In Prüfung',
-  approved: 'Genehmigt',
-  rejected: 'Abgelehnt',
-  needs_update: 'Überarbeitung erforderlich',
-}
-
-export const DSFA_RISK_LEVEL_LABELS: Record<DSFARiskLevel, string> = {
-  low: 'Niedrig',
-  medium: 'Mittel',
-  high: 'Hoch',
-  very_high: 'Sehr Hoch',
-}
-
-export const DSFA_LEGAL_BASES = {
-  consent: 'Art. 6 Abs. 1 lit. a DSGVO - Einwilligung',
-  contract: 'Art. 6 Abs. 1 lit. b DSGVO - Vertrag',
-  legal_obligation: 'Art. 6 Abs. 1 lit. c DSGVO - Rechtliche Verpflichtung',
-  vital_interests: 'Art. 6 Abs. 1 lit. d DSGVO - Lebenswichtige Interessen',
-  public_interest: 'Art. 6 Abs. 1 lit. e DSGVO - Öffentliches Interesse',
-  legitimate_interest: 'Art. 6 Abs. 1 lit. f DSGVO - Berechtigtes Interesse',
-}
-
-export const DSFA_AFFECTED_RIGHTS = [
-  { id: 'right_to_information', label: 'Recht auf Information (Art. 13/14)' },
-  { id: 'right_of_access', label: 'Auskunftsrecht (Art. 15)' },
-  { id: 'right_to_rectification', label: 'Recht auf Berichtigung (Art. 16)' },
-  { id: 'right_to_erasure', label: 'Recht auf Löschung (Art. 17)' },
-  { id: 'right_to_restriction', label: 'Recht auf Einschränkung (Art. 18)' },
-  { id: 'right_to_data_portability', label: 'Recht auf Datenübertragbarkeit (Art. 20)' },
-  { id: 'right_to_object', label: 'Widerspruchsrecht (Art. 21)' },
-  { id: 'right_not_to_be_profiled', label: 'Recht bzgl. Profiling (Art. 22)' },
-  { id: 'freedom_of_expression', label: 'Meinungsfreiheit' },
-  { id: 'freedom_of_association', label: 'Versammlungsfreiheit' },
-  { id: 'non_discrimination', label: 'Nichtdiskriminierung' },
-  { id: 'data_security', label: 'Datensicherheit' },
-]
-
-// =============================================================================
-// WP248 REV.01 KRITERIEN (Schwellwertanalyse)
-// Quelle: Artikel-29-Datenschutzgruppe, bestätigt durch EDSA
-// =============================================================================
-
-export interface WP248Criterion {
-  id: string
-  code: string
-  title: string
-  description: string
-  examples: string[]
-  gdprRef?: string
-}
-
-/**
- * WP248 rev.01 Kriterien zur Bestimmung der DSFA-Pflicht
- * Regel: Bei >= 2 erfüllten Kriterien ist DSFA in den meisten Fällen erforderlich
- */
-export const WP248_CRITERIA: WP248Criterion[] = [
-  {
-    id: 'scoring_profiling',
-    code: 'K1',
-    title: 'Bewertung oder Scoring',
-    description: 'Einschließlich Profiling und Prognosen, insbesondere zu Arbeitsleistung, wirtschaftlicher Lage, Gesundheit, persönlichen Vorlieben, Zuverlässigkeit, Verhalten, Aufenthaltsort oder Ortswechsel.',
-    examples: ['Bonitätsprüfung', 'Leistungsbeurteilung', 'Verhaltensanalyse'],
-    gdprRef: 'Art. 35 Abs. 3 lit. a DSGVO',
-  },
-  {
-    id: 'automated_decision',
-    code: 'K2',
-    title: 'Automatisierte Entscheidungsfindung mit Rechtswirkung',
-    description: 'Automatisierte Verarbeitung, die als Grundlage für Entscheidungen dient, die Rechtswirkung gegenüber natürlichen Personen entfalten oder diese erheblich beeinträchtigen.',
-    examples: ['Automatische Kreditvergabe', 'Automatische Bewerbungsablehnung', 'Algorithmenbasierte Preisgestaltung'],
-    gdprRef: 'Art. 22 DSGVO',
-  },
-  {
-    id: 'systematic_monitoring',
-    code: 'K3',
-    title: 'Systematische Überwachung',
-    description: 'Verarbeitung zur Beobachtung, Überwachung oder Kontrolle von betroffenen Personen, einschließlich Datenerhebung über Netzwerke oder systematische Überwachung öffentlicher Bereiche.',
-    examples: ['Videoüberwachung', 'WLAN-Tracking', 'GPS-Ortung', 'Mitarbeiterüberwachung'],
-    gdprRef: 'Art. 35 Abs. 3 lit. c DSGVO',
-  },
-  {
-    id: 'sensitive_data',
-    code: 'K4',
-    title: 'Sensible Daten oder höchst persönliche Daten',
-    description: 'Verarbeitung besonderer Kategorien personenbezogener Daten (Art. 9), strafrechtlicher Daten (Art. 10) oder anderer höchst persönlicher Daten wie Kommunikationsinhalte, Standortdaten, Finanzinformationen.',
-    examples: ['Gesundheitsdaten', 'Biometrische Daten', 'Genetische Daten', 'Politische Meinungen', 'Gewerkschaftszugehörigkeit'],
-    gdprRef: 'Art. 9, Art. 10 DSGVO',
-  },
-  {
-    id: 'large_scale',
-    code: 'K5',
-    title: 'Datenverarbeitung in großem Umfang',
-    description: 'Berücksichtigt werden: Zahl der Betroffenen, Datenmenge, Dauer der Verarbeitung, geografische Reichweite.',
-    examples: ['Landesweite Datenbanken', 'Millionen von Nutzern', 'Mehrjährige Speicherung'],
-    gdprRef: 'Erwägungsgrund 91 DSGVO',
-  },
-  {
-    id: 'matching_combining',
-    code: 'K6',
-    title: 'Abgleichen oder Zusammenführen von Datensätzen',
-    description: 'Datensätze aus verschiedenen Quellen, die für unterschiedliche Zwecke und/oder von verschiedenen Verantwortlichen erhoben wurden, werden abgeglichen oder zusammengeführt.',
-    examples: ['Data Warehousing', 'Big Data Analytics', 'Zusammenführung von Online-/Offline-Daten'],
-  },
-  {
-    id: 'vulnerable_subjects',
-    code: 'K7',
-    title: 'Daten zu schutzbedürftigen Betroffenen',
-    description: 'Verarbeitung von Daten schutzbedürftiger Personen, bei denen ein Ungleichgewicht zwischen Betroffenem und Verantwortlichem besteht.',
-    examples: ['Kinder/Minderjährige', 'Arbeitnehmer', 'Patienten', 'Ältere Menschen', 'Asylbewerber'],
-    gdprRef: 'Erwägungsgrund 75 DSGVO',
-  },
-  {
-    id: 'innovative_technology',
-    code: 'K8',
-    title: 'Innovative Nutzung oder Anwendung neuer technologischer oder organisatorischer Lösungen',
-    description: 'Einsatz neuer Technologien kann neue Formen der Datenerhebung und -nutzung mit sich bringen, möglicherweise mit hohem Risiko für Rechte und Freiheiten.',
-    examples: ['Künstliche Intelligenz', 'Machine Learning', 'IoT-Geräte', 'Biometrische Erkennung', 'Blockchain'],
-    gdprRef: 'Erwägungsgrund 89, 91 DSGVO',
-  },
-  {
-    id: 'preventing_rights',
-    code: 'K9',
-    title: 'Verarbeitung, die Betroffene an der Ausübung eines Rechts oder der Nutzung einer Dienstleistung hindert',
-    description: 'Verarbeitungsvorgänge, die darauf abzielen, einer Person den Zugang zu einer Dienstleistung oder den Abschluss eines Vertrags zu ermöglichen oder zu verweigern.',
-    examples: ['Zugang zu Sozialleistungen', 'Kreditvergabe', 'Versicherungsabschluss'],
-    gdprRef: 'Art. 22 DSGVO',
-  },
-]
-
-// =============================================================================
-// DSFA MUSS-LISTEN NACH BUNDESLÄNDERN
-// Quellen: Jeweilige Landesdatenschutzbeauftragte
-// =============================================================================
-
-export interface DSFAAuthorityResource {
-  id: string
-  name: string
-  shortName: string
-  state: string // Bundesland oder 'Bund'
-  overviewUrl: string
-  publicSectorListUrl?: string
-  privateSectorListUrl?: string
-  templateUrl?: string
-  additionalResources?: Array<{ title: string; url: string }>
-}
-
-export const DSFA_AUTHORITY_RESOURCES: DSFAAuthorityResource[] = [
-  {
-    id: 'bund',
-    name: 'Bundesbeauftragter für den Datenschutz und die Informationsfreiheit',
-    shortName: 'BfDI',
-    state: 'Bund',
-    overviewUrl: 'https://www.bfdi.bund.de/DE/Fachthemen/Inhalte/Technik/Datenschutz-Folgenabschaetzungen.html',
-    publicSectorListUrl: 'https://www.bfdi.bund.de/SharedDocs/Downloads/DE/Muster/Liste_VerarbeitungsvorgaengeArt35.pdf',
-    templateUrl: 'https://www.bfdi.bund.de/SharedDocs/Downloads/DE/Muster/Muster_Hinweise_DSFA.html',
-  },
-  {
-    id: 'bw',
-    name: 'Landesbeauftragter für den Datenschutz und die Informationsfreiheit Baden-Württemberg',
-    shortName: 'LfDI BW',
-    state: 'Baden-Württemberg',
-    overviewUrl: 'https://www.baden-wuerttemberg.datenschutz.de/datenschutz-folgenabschaetzung/',
-    privateSectorListUrl: 'https://www.baden-wuerttemberg.datenschutz.de/wp-content/uploads/2018/05/Liste-von-Verarbeitungsvorg%C3%A4ngen-nach-Art.-35-Abs.-4-DS-GVO-LfDI-BW.pdf',
-  },
-  {
-    id: 'by',
-    name: 'Bayerischer Landesbeauftragter für den Datenschutz',
-    shortName: 'BayLfD',
-    state: 'Bayern',
-    overviewUrl: 'https://www.datenschutz-bayern.de/dsfa/',
-    additionalResources: [
-      { title: 'DSFA-Module und Formulare', url: 'https://www.datenschutz-bayern.de/dsfa/' },
-    ],
-  },
-  {
-    id: 'be',
-    name: 'Berliner Beauftragte für Datenschutz und Informationsfreiheit',
-    shortName: 'BlnBDI',
-    state: 'Berlin',
-    overviewUrl: 'https://www.datenschutz-berlin.de/themen/unternehmen/datenschutz-folgenabschaetzung/',
-    publicSectorListUrl: 'https://www.datenschutz-berlin.de/fileadmin/user_upload/pdf/dokumente/2018-BlnBDI_DSFA-oeffentlich.pdf',
-    privateSectorListUrl: 'https://www.datenschutz-berlin.de/fileadmin/user_upload/pdf/dokumente/2018-BlnBDI_DSFA-nicht-oeffentlich.pdf',
-  },
-  {
-    id: 'bb',
-    name: 'Landesbeauftragte für den Datenschutz und für das Recht auf Akteneinsicht Brandenburg',
-    shortName: 'LDA BB',
-    state: 'Brandenburg',
-    overviewUrl: 'https://www.lda.brandenburg.de/lda/de/datenschutz/datenschutz-folgenabschaetzung/',
-    publicSectorListUrl: 'https://www.lda.brandenburg.de/sixcms/media.php/9/DSFA-Liste_%C3%B6ffentlicher_Bereich.pdf',
-    privateSectorListUrl: 'https://www.lda.brandenburg.de/sixcms/media.php/9/DSFA-Liste_nicht_%C3%B6ffentlicher_Bereich.pdf',
-  },
-  {
-    id: 'hb',
-    name: 'Landesbeauftragte für Datenschutz und Informationsfreiheit Bremen',
-    shortName: 'LfDI HB',
-    state: 'Bremen',
-    overviewUrl: 'https://www.datenschutz.bremen.de/datenschutz/datenschutz-folgenabschaetzung-3884',
-    publicSectorListUrl: 'https://www.datenschutz.bremen.de/sixcms/media.php/13/Liste%20von%20Verarbeitungsvorg%C3%A4ngen%20nach%20Artikel%2035.pdf',
-    privateSectorListUrl: 'https://www.datenschutz.bremen.de/sixcms/media.php/13/DSFA%20Muss-Liste%20LfDI%20HB.pdf',
-  },
-  {
-    id: 'hh',
-    name: 'Hamburgischer Beauftragter für Datenschutz und Informationsfreiheit',
-    shortName: 'HmbBfDI',
-    state: 'Hamburg',
-    overviewUrl: 'https://datenschutz-hamburg.de/datenschutz-folgenabschaetzung',
-    publicSectorListUrl: 'https://datenschutz-hamburg.de/fileadmin/user_upload/HmbBfDI/Datenschutz/Informationen/Liste_Art_35-4_DSGVO_HmbBfDI-oeffentlicher_Bereich_v2.0a.pdf',
-    privateSectorListUrl: 'https://datenschutz-hamburg.de/fileadmin/user_upload/HmbBfDI/Datenschutz/Informationen/DSFA_Muss-Liste_fuer_den_nicht-oeffentlicher_Bereich_-_Stand_17.10.2018.pdf',
-  },
-  {
-    id: 'he',
-    name: 'Hessischer Beauftragter für Datenschutz und Informationsfreiheit',
-    shortName: 'HBDI',
-    state: 'Hessen',
-    overviewUrl: 'https://datenschutz.hessen.de/datenschutz/it-und-datenschutz/datenschutz-folgenabschaetzung',
-  },
-  {
-    id: 'mv',
-    name: 'Landesbeauftragter für Datenschutz und Informationsfreiheit Mecklenburg-Vorpommern',
-    shortName: 'LfDI MV',
-    state: 'Mecklenburg-Vorpommern',
-    overviewUrl: 'https://www.datenschutz-mv.de/datenschutz/DSGVO/Hilfsmittel-zur-Umsetzung/',
-    publicSectorListUrl: 'https://www.datenschutz-mv.de/static/DS/Dateien/DS-GVO/HilfsmittelzurUmsetzung/MV-DSFA-Muss-Liste-Oeffentlicher-Bereich.pdf',
-  },
-  {
-    id: 'ni',
-    name: 'Die Landesbeauftragte für den Datenschutz Niedersachsen',
-    shortName: 'LfD NI',
-    state: 'Niedersachsen',
-    overviewUrl: 'https://www.lfd.niedersachsen.de/dsgvo/liste_von_verarbeitungsvorgangen_nach_art_35_abs_4_ds_gvo/muss-listen-zur-datenschutz-folgenabschatzung-179663.html',
-    publicSectorListUrl: 'https://www.lfd.niedersachsen.de/download/134414/DSFA_Muss-Liste_fuer_den_oeffentlichen_Bereich.pdf',
-    privateSectorListUrl: 'https://www.lfd.niedersachsen.de/download/131098/Liste_von_Verarbeitungsvorgaengen_nach_Art._35_Abs._4_DS-GVO.pdf',
-  },
-  {
-    id: 'nw',
-    name: 'Landesbeauftragte für Datenschutz und Informationsfreiheit Nordrhein-Westfalen',
-    shortName: 'LDI NRW',
-    state: 'Nordrhein-Westfalen',
-    overviewUrl: 'https://www.ldi.nrw.de/datenschutz/wirtschaft/datenschutz-folgenabschaetzung',
-    publicSectorListUrl: 'https://www.ldi.nrw.de/liste-von-verarbeitungsvorgaengen-nach-art-35-abs-4-ds-gvo-fuer-den-oeffentlichen-bereich',
-  },
-  {
-    id: 'rp',
-    name: 'Landesbeauftragter für den Datenschutz und die Informationsfreiheit Rheinland-Pfalz',
-    shortName: 'LfDI RP',
-    state: 'Rheinland-Pfalz',
-    overviewUrl: 'https://www.datenschutz.rlp.de/themen/datenschutz-folgenabschaetzung',
-  },
-  {
-    id: 'sl',
-    name: 'Unabhängiges Datenschutzzentrum Saarland',
-    shortName: 'UDZ SL',
-    state: 'Saarland',
-    overviewUrl: 'https://www.datenschutz.saarland.de/themen/datenschutz-folgenabschaetzung',
-    privateSectorListUrl: 'https://www.datenschutz.saarland.de/fileadmin/user_upload/uds/alle_Dateien_und_Ordner_bis_2025/Download/dsfa_muss_liste_dsk_de.pdf',
-  },
-  {
-    id: 'sn',
-    name: 'Sächsische Datenschutz- und Transparenzbeauftragte',
-    shortName: 'SDTB',
-    state: 'Sachsen',
-    overviewUrl: 'https://www.datenschutz.sachsen.de/datenschutz-folgenabschaetzung.html',
-    additionalResources: [
-      { title: 'Erforderlichkeit der DSFA', url: 'https://www.datenschutz.sachsen.de/erforderlichkeit.html' },
-    ],
-  },
-  {
-    id: 'st',
-    name: 'Landesbeauftragter für den Datenschutz Sachsen-Anhalt',
-    shortName: 'LfD ST',
-    state: 'Sachsen-Anhalt',
-    overviewUrl: 'https://datenschutz.sachsen-anhalt.de/informationen/datenschutz-grundverordnung/liste-datenschutz-folgenabschaetzung',
-    publicSectorListUrl: 'https://datenschutz.sachsen-anhalt.de/fileadmin/Bibliothek/Landesaemter/LfD/Informationen/Internationales/Datenschutz-Grundverordnung/Liste_DSFA/Art-35-Liste-oeffentlicher_Bereich.pdf',
-    privateSectorListUrl: 'https://datenschutz.sachsen-anhalt.de/fileadmin/Bibliothek/Landesaemter/LfD/Informationen/Internationales/Datenschutz-Grundverordnung/Liste_DSFA/Art-35-Liste-nichtoeffentlicher_Bereich.pdf',
-  },
-  {
-    id: 'sh',
-    name: 'Unabhängiges Landeszentrum für Datenschutz Schleswig-Holstein',
-    shortName: 'ULD SH',
-    state: 'Schleswig-Holstein',
-    overviewUrl: 'https://www.datenschutzzentrum.de/datenschutzfolgenabschaetzung/',
-    privateSectorListUrl: 'https://www.datenschutzzentrum.de/uploads/datenschutzfolgenabschaetzung/20180525_LfD-SH_DSFA_Muss-Liste_V1.0.pdf',
-    additionalResources: [
-      { title: 'Begleittext zur DSFA-Liste', url: 'https://www.datenschutzzentrum.de/uploads/dsgvo/2018_0807_LfD-SH_DSFA_Begleittext_V1.0a.pdf' },
-    ],
-  },
-  {
-    id: 'th',
-    name: 'Thüringer Landesbeauftragter für den Datenschutz und die Informationsfreiheit',
-    shortName: 'TLfDI',
-    state: 'Thüringen',
-    overviewUrl: 'https://www.tlfdi.de/datenschutz/datenschutz-folgenabschaetzung/',
-    privateSectorListUrl: 'https://tlfdi.de/fileadmin/tlfdi/datenschutz/dsfa_muss-liste_04_07_18.pdf',
-    additionalResources: [
-      { title: 'Handreichung DS-FA (nicht-öffentlich)', url: 'https://tlfdi.de/fileadmin/tlfdi/datenschutz/handreichung_ds-fa.pdf' },
-      { title: 'Handreichung DS-FA (öffentlich)', url: 'https://tlfdi.de/fileadmin/tlfdi/Europa/Handreichung_zur_Datenschutz-Folgenabschaetzung_oeffentlicher_Bereich.pdf' },
-    ],
-  },
-]
-
-// =============================================================================
-// DSK KURZPAPIER NR. 5 REFERENZEN
-// =============================================================================
-
-export const DSK_KURZPAPIER_5 = {
-  title: 'Kurzpapier Nr. 5: Datenschutz-Folgenabschätzung nach Art. 35 DS-GVO',
-  source: 'Datenschutzkonferenz (DSK)',
-  url: 'https://www.datenschutzkonferenz-online.de/media/kp/dsk_kpnr_5.pdf',
-  license: 'Datenlizenz Deutschland – Namensnennung – Version 2.0 (DL-DE BY 2.0)',
-  licenseUrl: 'https://www.govdata.de/dl-de/by-2-0',
-  processSteps: [
-    { step: 1, title: 'Projektteam bilden', description: 'Interdisziplinäres Team aus Datenschutz, Fachprozess, IT/Sicherheit' },
-    { step: 2, title: 'Verarbeitung abgrenzen', description: 'Scope definieren, Datenflüsse und Zwecke beschreiben' },
-    { step: 3, title: 'Prüfung der Notwendigkeit', description: 'Alternativen prüfen, Datenminimierung bewerten' },
-    { step: 4, title: 'Risiken identifizieren', description: 'Risikoquellen ermitteln, Schäden bewerten' },
-    { step: 5, title: 'Maßnahmen festlegen', description: 'TOM definieren, Restrisiko bewerten' },
-    { step: 6, title: 'Bericht erstellen', description: 'DSFA-Bericht dokumentieren, ggf. veröffentlichen' },
-    { step: 7, title: 'Fortschreibung', description: 'DSFA bei Änderungen aktualisieren' },
-  ],
-}
-
-// =============================================================================
-// ART. 35 ABS. 3 DSGVO - REGELBEISPIELE
-// =============================================================================
-
-export const ART35_ABS3_CASES = [
-  {
-    id: 'profiling_legal_effects',
-    lit: 'a',
-    title: 'Profiling mit Rechtswirkung',
-    description: 'Systematische und umfassende Bewertung persönlicher Aspekte natürlicher Personen, die sich auf automatisierte Verarbeitung einschließlich Profiling gründet und die ihrerseits als Grundlage für Entscheidungen dient, die Rechtswirkung gegenüber natürlichen Personen entfalten oder diese in ähnlich erheblicher Weise beeinträchtigen.',
-    gdprRef: 'Art. 35 Abs. 3 lit. a DSGVO',
-  },
-  {
-    id: 'special_categories',
-    lit: 'b',
-    title: 'Besondere Datenkategorien in großem Umfang',
-    description: 'Umfangreiche Verarbeitung besonderer Kategorien von personenbezogenen Daten gemäß Artikel 9 Absatz 1 oder von personenbezogenen Daten über strafrechtliche Verurteilungen und Straftaten gemäß Artikel 10.',
-    gdprRef: 'Art. 35 Abs. 3 lit. b DSGVO',
-  },
-  {
-    id: 'public_monitoring',
-    lit: 'c',
-    title: 'Systematische Überwachung öffentlicher Bereiche',
-    description: 'Systematische umfangreiche Überwachung öffentlich zugänglicher Bereiche.',
-    gdprRef: 'Art. 35 Abs. 3 lit. c DSGVO',
-  },
-]
-
-// =============================================================================
-// KI-SPEZIFISCHE DSFA-TRIGGER
-// Quelle: Deutsche DSFA-Liste (nicht-öffentlicher Bereich)
-// =============================================================================
-
-export const AI_DSFA_TRIGGERS = [
-  {
-    id: 'ai_interaction',
-    title: 'KI zur Steuerung der Interaktion mit Betroffenen',
-    description: 'Einsatz von künstlicher Intelligenz zur Steuerung der Interaktion mit betroffenen Personen.',
-    examples: ['KI-gestützter Kundensupport', 'Chatbots mit personenbezogener Verarbeitung', 'Automatisierte Kommunikation'],
-    requiresDSFA: true,
-  },
-  {
-    id: 'ai_personal_aspects',
-    title: 'KI zur Bewertung persönlicher Aspekte',
-    description: 'Einsatz von künstlicher Intelligenz zur Bewertung persönlicher Aspekte natürlicher Personen.',
-    examples: ['Automatisierte Stimmungsanalyse', 'Verhaltensvorhersagen', 'Persönlichkeitsprofile'],
-    requiresDSFA: true,
-  },
-  {
-    id: 'ai_decision_making',
-    title: 'KI-basierte automatisierte Entscheidungen',
-    description: 'Automatisierte Entscheidungsfindung auf Basis von KI mit erheblicher Auswirkung auf Betroffene.',
-    examples: ['Automatische Kreditvergabe', 'KI-basiertes Recruiting', 'Algorithmenbasierte Preisgestaltung'],
-    requiresDSFA: true,
-  },
-  {
-    id: 'ai_training_personal_data',
-    title: 'KI-Training mit personenbezogenen Daten',
-    description: 'Training von KI-Modellen mit personenbezogenen Daten, insbesondere sensiblen Daten.',
-    examples: ['Training mit Gesundheitsdaten', 'Fine-Tuning mit Kundendaten', 'ML mit biometrischen Daten'],
-    requiresDSFA: true,
-  },
-]
-
-// =============================================================================
-// SUB-TYPES
-// =============================================================================
-
-export interface DSFARisk {
-  id: string
-  category: DSFARiskCategory
-  description: string
-  likelihood: 'low' | 'medium' | 'high'
-  impact: 'low' | 'medium' | 'high'
-  risk_level: string
-  affected_data: string[]
-}
-
-export interface DSFAMitigation {
-  id: string
-  risk_id: string
-  description: string
-  type: DSFAMitigationType
-  status: DSFAMitigationStatus
-  implemented_at?: string
-  verified_at?: string
-  residual_risk: 'low' | 'medium' | 'high'
-  tom_reference?: string
-  responsible_party: string
-}
-
-export interface DSFAReviewComment {
-  id: string
-  section: number
-  comment: string
-  created_by: string
-  created_at: string
-  resolved: boolean
-}
-
-export interface DSFASectionProgress {
-  section_0_complete: boolean  // Schwellwertanalyse
-  section_1_complete: boolean  // Systematische Beschreibung
-  section_2_complete: boolean  // Notwendigkeit & Verhältnismäßigkeit
-  section_3_complete: boolean  // Risikobewertung
-  section_4_complete: boolean  // Abhilfemaßnahmen
-  section_5_complete: boolean  // Betroffenenperspektive (optional)
-  section_6_complete: boolean  // DSB & Behördenkonsultation
-  section_7_complete: boolean  // Fortschreibung & Review
-}
-
-// =============================================================================
-// SCHWELLWERTANALYSE / VORABPRÜFUNG (Art. 35 Abs. 1 DSGVO)
-// =============================================================================
-
-export interface DSFAThresholdAnalysis {
-  id: string
-  dsfa_id?: string
-  performed_at: string
-  performed_by: string
-
-  // WP248 Kriterien-Bewertung
-  criteria_assessment: Array<{
-    criterion_id: string  // K1-K9
-    applies: boolean
-    justification: string
-  }>
-
-  // Art. 35 Abs. 3 Prüfung
-  art35_abs3_assessment: Array<{
-    case_id: string  // a, b, c
-    applies: boolean
-    justification: string
-  }>
-
-  // Ergebnis
-  dsfa_required: boolean
-  decision_justification: string
-
-  // Dokumentation der Entscheidung (gem. DSK Kurzpapier Nr. 5)
-  documented: boolean
-  documentation_reference?: string
-}
-
-// =============================================================================
-// BETROFFENENPERSPEKTIVE (Art. 35 Abs. 9 DSGVO)
-// =============================================================================
-
-export interface DSFAStakeholderConsultation {
-  id: string
-  stakeholder_type: 'data_subjects' | 'representatives' | 'works_council' | 'other'
-  stakeholder_description: string
-  consultation_date?: string
-  consultation_method: 'survey' | 'interview' | 'workshop' | 'written' | 'other'
-  summary: string
-  concerns_raised: string[]
-  addressed_in_dsfa: boolean
-  response_documentation?: string
-}
-
-// =============================================================================
-// ART. 36 KONSULTATIONSPFLICHT
-// =============================================================================
-
-export interface DSFAConsultationRequirement {
-  high_residual_risk: boolean
-  consultation_required: boolean  // Art. 36 Abs. 1 DSGVO
-  consultation_reason?: string
-  authority_notified: boolean
-  notification_date?: string
-  authority_response?: string
-  authority_recommendations?: string[]
-  waiting_period_observed: boolean  // 8 Wochen gem. Art. 36 Abs. 2
-}
-
-// =============================================================================
-// FORTSCHREIBUNG / REVIEW (Art. 35 Abs. 11 DSGVO)
-// =============================================================================
-
-export interface DSFAReviewTrigger {
-  id: string
-  trigger_type: 'scheduled' | 'risk_change' | 'new_technology' | 'new_purpose' | 'incident' | 'regulatory' | 'other'
-  description: string
-  detected_at: string
-  detected_by: string
-  review_required: boolean
-  review_completed: boolean
-  review_date?: string
-  changes_made: string[]
-}
-
-export interface DSFAReviewSchedule {
-  next_review_date: string
-  review_frequency_months: number
-  last_review_date?: string
-  review_responsible: string
-}
-
-// =============================================================================
-// MAIN DSFA TYPE
-// =============================================================================
-
-export interface DSFA {
-  id: string
-  tenant_id: string
-  namespace_id?: string
-  processing_activity_id?: string
-  assessment_id?: string
-  name: string
-  description: string
-
-  // Section 0: Schwellwertanalyse / Vorabprüfung (NEU - Art. 35 Abs. 1)
-  threshold_analysis?: DSFAThresholdAnalysis
-  wp248_criteria_met?: string[]  // IDs der erfüllten WP248-Kriterien (K1-K9)
-  art35_abs3_triggered?: string[]  // IDs der ausgelösten Art. 35 Abs. 3 Fälle
-
-  // Section 1: Systematische Beschreibung (Art. 35 Abs. 7 lit. a)
-  processing_description: string
-  processing_purpose: string
-  data_categories: string[]
-  data_subjects: string[]
-  recipients: string[]
-  legal_basis: string
-  legal_basis_details?: string
-
-  // Section 2: Notwendigkeit & Verhältnismäßigkeit (Art. 35 Abs. 7 lit. b)
-  necessity_assessment: string
-  proportionality_assessment: string
-  data_minimization?: string
-  alternatives_considered?: string
-  retention_justification?: string
-
-  // Section 3: Risikobewertung (Art. 35 Abs. 7 lit. c)
-  risks: DSFARisk[]
-  overall_risk_level: DSFARiskLevel
-  risk_score: number
-  affected_rights?: string[]
-  triggered_rule_codes?: string[]
-
-  // KI-spezifische Trigger (NEU)
-  involves_ai?: boolean
-  ai_trigger_ids?: string[]  // IDs der ausgelösten KI-Trigger
-
-  // Section 4: Abhilfemaßnahmen (Art. 35 Abs. 7 lit. d)
-  mitigations: DSFAMitigation[]
-  tom_references?: string[]
-  residual_risk_level?: DSFARiskLevel  // Restrisiko nach Maßnahmen
-
-  // Section 5: Stellungnahme DSB (Art. 35 Abs. 2 + Art. 36)
-  dpo_consulted: boolean
-  dpo_consulted_at?: string
-  dpo_name?: string
-  dpo_opinion?: string
-  dpo_approved?: boolean
-  authority_consulted: boolean
-  authority_consulted_at?: string
-  authority_reference?: string
-  authority_decision?: string
-
-  // Art. 36 Konsultationspflicht (NEU)
-  consultation_requirement?: DSFAConsultationRequirement
-
-  // Betroffenenperspektive (NEU - Art. 35 Abs. 9)
-  stakeholder_consultations?: DSFAStakeholderConsultation[]
-  stakeholder_consultation_not_appropriate?: boolean
-  stakeholder_consultation_not_appropriate_reason?: string
-
-  // Workflow & Approval
-  status: DSFAStatus
-  submitted_for_review_at?: string
-  submitted_by?: string
-  conclusion: string
-  review_comments?: DSFAReviewComment[]
-
-  // Section Progress Tracking
-  section_progress: DSFASectionProgress
-
-  // Fortschreibung / Review (NEU - Art. 35 Abs. 11)
-  review_schedule?: DSFAReviewSchedule
-  review_triggers?: DSFAReviewTrigger[]
-  version: number  // DSFA-Version für Fortschreibung
-  previous_version_id?: string
-
-  // Referenzen zu behördlichen Ressourcen
-  federal_state?: string  // Bundesland für zuständige Aufsichtsbehörde
-  authority_resource_id?: string  // ID aus DSFA_AUTHORITY_RESOURCES
-
-  // Metadata & Audit
-  metadata?: Record<string, unknown>
-  created_at: string
-  updated_at: string
-  created_by: string
-  approved_by?: string
-  approved_at?: string
-}
-
-// =============================================================================
-// API REQUEST/RESPONSE TYPES
-// =============================================================================
-
-export interface DSFAListResponse {
-  dsfas: DSFA[]
-}
-
-export interface DSFAStatsResponse {
-  status_stats: Record<DSFAStatus | 'total', number>
-  risk_stats: Record<DSFARiskLevel, number>
-  total: number
-}
-
-export interface CreateDSFARequest {
-  name: string
-  description?: string
-  processing_description?: string
-  processing_purpose?: string
-  data_categories?: string[]
-  legal_basis?: string
-}
-
-export interface CreateDSFAFromAssessmentRequest {
-  name?: string
-  description?: string
-}
-
-export interface CreateDSFAFromAssessmentResponse {
-  dsfa: DSFA
-  prefilled: boolean
-  assessment: unknown // UCCA Assessment
-  message: string
-}
-
-export interface UpdateDSFASectionRequest {
-  // Section 1
-  processing_description?: string
-  processing_purpose?: string
-  data_categories?: string[]
-  data_subjects?: string[]
-  recipients?: string[]
-  legal_basis?: string
-  legal_basis_details?: string
-
-  // Section 2
-  necessity_assessment?: string
-  proportionality_assessment?: string
-  data_minimization?: string
-  alternatives_considered?: string
-  retention_justification?: string
-
-  // Section 3
-  overall_risk_level?: DSFARiskLevel
-  risk_score?: number
-  affected_rights?: string[]
-
-  // Section 5
-  dpo_consulted?: boolean
-  dpo_name?: string
-  dpo_opinion?: string
-  authority_consulted?: boolean
-  authority_reference?: string
-  authority_decision?: string
-}
-
-export interface SubmitForReviewResponse {
-  message: string
-  dsfa: DSFA
-}
-
-export interface ApproveDSFARequest {
-  dpo_opinion: string
-  approved: boolean
-}
-
-// =============================================================================
-// UCCA INTEGRATION TYPES
-// =============================================================================
-
-export interface DSFATriggerInfo {
-  required: boolean
-  reason: string
-  triggered_rules: string[]
-  assessment_id?: string
-  existing_dsfa_id?: string
-}
-
-export interface UCCATriggeredRule {
-  code: string
-  title: string
-  description: string
-  severity: 'INFO' | 'WARN' | 'BLOCK'
-  gdpr_ref?: string
-}
-
-// =============================================================================
-// HELPER TYPES FOR UI
-// =============================================================================
-
-export interface DSFASectionConfig {
-  number: number
-  title: string
-  titleDE: string
-  description: string
-  gdprRef: string
-  fields: string[]
-  required: boolean
-}
-
-export const DSFA_SECTIONS: DSFASectionConfig[] = [
-  {
-    number: 0,
-    title: 'Threshold Analysis',
-    titleDE: 'Schwellwertanalyse',
-    description: 'Prüfen Sie anhand der WP248-Kriterien und Art. 35 Abs. 3, ob eine DSFA erforderlich ist. Die Entscheidung ist zu dokumentieren.',
-    gdprRef: 'Art. 35 Abs. 1 DSGVO, WP248 rev.01',
-    fields: ['threshold_analysis', 'wp248_criteria_met', 'art35_abs3_triggered'],
-    required: true,
-  },
-  {
-    number: 1,
-    title: 'Processing Description',
-    titleDE: 'Systematische Beschreibung',
-    description: 'Beschreiben Sie die geplante Verarbeitung, ihren Zweck, die Datenkategorien und Rechtsgrundlage.',
-    gdprRef: 'Art. 35 Abs. 7 lit. a DSGVO',
-    fields: ['processing_description', 'processing_purpose', 'data_categories', 'data_subjects', 'recipients', 'legal_basis'],
-    required: true,
-  },
-  {
-    number: 2,
-    title: 'Necessity & Proportionality',
-    titleDE: 'Notwendigkeit & Verhältnismäßigkeit',
-    description: 'Begründen Sie, warum die Verarbeitung notwendig ist und welche Alternativen geprüft wurden.',
-    gdprRef: 'Art. 35 Abs. 7 lit. b DSGVO',
-    fields: ['necessity_assessment', 'proportionality_assessment', 'data_minimization', 'alternatives_considered'],
-    required: true,
-  },
-  {
-    number: 3,
-    title: 'Risk Assessment',
-    titleDE: 'Risikobewertung',
-    description: 'Identifizieren und bewerten Sie die Risiken für die Rechte und Freiheiten der Betroffenen.',
-    gdprRef: 'Art. 35 Abs. 7 lit. c DSGVO',
-    fields: ['risks', 'overall_risk_level', 'risk_score', 'affected_rights', 'involves_ai', 'ai_trigger_ids'],
-    required: true,
-  },
-  {
-    number: 4,
-    title: 'Mitigation Measures',
-    titleDE: 'Abhilfemaßnahmen',
-    description: 'Definieren Sie technische und organisatorische Maßnahmen zur Risikominimierung und bewerten Sie das Restrisiko.',
-    gdprRef: 'Art. 35 Abs. 7 lit. d DSGVO',
-    fields: ['mitigations', 'tom_references', 'residual_risk_level'],
-    required: true,
-  },
-  {
-    number: 5,
-    title: 'Stakeholder Consultation',
-    titleDE: 'Betroffenenperspektive',
-    description: 'Dokumentieren Sie, ob und wie die Standpunkte der Betroffenen eingeholt wurden (z.B. Betriebsrat, Nutzerumfragen).',
-    gdprRef: 'Art. 35 Abs. 9 DSGVO',
-    fields: ['stakeholder_consultations', 'stakeholder_consultation_not_appropriate', 'stakeholder_consultation_not_appropriate_reason'],
-    required: false,
-  },
-  {
-    number: 6,
-    title: 'DPO Opinion & Authority Consultation',
-    titleDE: 'DSB-Stellungnahme & Behördenkonsultation',
-    description: 'Dokumentieren Sie die Konsultation des DSB und prüfen Sie, ob bei hohem Restrisiko eine Behördenkonsultation erforderlich ist.',
-    gdprRef: 'Art. 35 Abs. 2, Art. 36 DSGVO',
-    fields: ['dpo_consulted', 'dpo_opinion', 'consultation_requirement', 'authority_consulted', 'authority_reference'],
-    required: true,
-  },
-  {
-    number: 7,
-    title: 'Review & Maintenance',
-    titleDE: 'Fortschreibung & Review',
-    description: 'Planen Sie regelmäßige Überprüfungen und dokumentieren Sie Änderungen, die eine Aktualisierung der DSFA erfordern.',
-    gdprRef: 'Art. 35 Abs. 11 DSGVO',
-    fields: ['review_schedule', 'review_triggers', 'version'],
-    required: true,
-  },
-]
-
-// =============================================================================
-// RISK MATRIX HELPERS
-// =============================================================================
-
-export interface RiskMatrixCell {
-  likelihood: 'low' | 'medium' | 'high'
-  impact: 'low' | 'medium' | 'high'
-  level: DSFARiskLevel
-  score: number
-}
-
-export const RISK_MATRIX: RiskMatrixCell[] = [
-  // Low likelihood
-  { likelihood: 'low', impact: 'low', level: 'low', score: 10 },
-  { likelihood: 'low', impact: 'medium', level: 'low', score: 20 },
-  { likelihood: 'low', impact: 'high', level: 'medium', score: 40 },
-  // Medium likelihood
-  { likelihood: 'medium', impact: 'low', level: 'low', score: 20 },
-  { likelihood: 'medium', impact: 'medium', level: 'medium', score: 50 },
-  { likelihood: 'medium', impact: 'high', level: 'high', score: 70 },
-  // High likelihood
-  { likelihood: 'high', impact: 'low', level: 'medium', score: 40 },
-  { likelihood: 'high', impact: 'medium', level: 'high', score: 70 },
-  { likelihood: 'high', impact: 'high', level: 'very_high', score: 90 },
-]
-
-export function calculateRiskLevel(
-  likelihood: 'low' | 'medium' | 'high',
-  impact: 'low' | 'medium' | 'high'
-): { level: DSFARiskLevel; score: number } {
-  const cell = RISK_MATRIX.find(c => c.likelihood === likelihood && c.impact === impact)
-  return cell ? { level: cell.level, score: cell.score } : { level: 'medium', score: 50 }
-}
-
-// =============================================================================
-// HELPER FUNCTIONS
-// =============================================================================
-
-/**
- * Prüft anhand der WP248-Kriterien, ob eine DSFA erforderlich ist.
- * Regel: Bei >= 2 erfüllten Kriterien ist DSFA in den meisten Fällen erforderlich.
- * @param criteriaIds Array der erfüllten Kriterien-IDs (z.B. ['K1', 'K4'])
- * @returns Objekt mit Ergebnis und Begründung
- */
-export function checkDSFARequiredByWP248(criteriaIds: string[]): {
-  required: boolean
-  confidence: 'definite' | 'likely' | 'possible' | 'unlikely'
-  reason: string
-} {
-  const count = criteriaIds.length
-
-  if (count >= 2) {
-    return {
-      required: true,
-      confidence: 'definite',
-      reason: `${count} WP248-Kriterien erfüllt (>= 2). DSFA ist in den meisten Fällen erforderlich.`,
-    }
-  }
-
-  if (count === 1) {
-    return {
-      required: false,
-      confidence: 'possible',
-      reason: '1 WP248-Kriterium erfüllt. DSFA kann je nach Risiko dennoch erforderlich sein. Einzelfallprüfung empfohlen.',
-    }
-  }
-
-  return {
-    required: false,
-    confidence: 'unlikely',
-    reason: 'Keine WP248-Kriterien erfüllt. DSFA wahrscheinlich nicht erforderlich, sofern kein Art. 35 Abs. 3 Fall vorliegt.',
-  }
-}
-
-/**
- * Prüft, ob eine Konsultation der Aufsichtsbehörde gem. Art. 36 DSGVO erforderlich ist.
- * Erforderlich wenn: Hohes Restrisiko trotz geplanter Maßnahmen.
- */
-export function checkArt36ConsultationRequired(
-  residualRiskLevel: DSFARiskLevel,
-  mitigationsImplemented: boolean
-): DSFAConsultationRequirement {
-  const highResidual = residualRiskLevel === 'high' || residualRiskLevel === 'very_high'
-  const consultationRequired = highResidual && mitigationsImplemented
-
-  return {
-    high_residual_risk: highResidual,
-    consultation_required: consultationRequired,
-    consultation_reason: consultationRequired
-      ? 'Trotz geplanter Maßnahmen verbleibt ein hohes Restrisiko. Gem. Art. 36 Abs. 1 DSGVO ist vor der Verarbeitung die Aufsichtsbehörde zu konsultieren.'
-      : highResidual
-        ? 'Hohes Restrisiko festgestellt, aber Maßnahmen noch nicht vollständig umgesetzt.'
-        : undefined,
-    authority_notified: false,
-    waiting_period_observed: false,
-  }
-}
-
-/**
- * Gibt die zuständige Aufsichtsbehörde für ein Bundesland zurück.
- */
-export function getAuthorityResource(stateId: string): DSFAAuthorityResource | undefined {
-  return DSFA_AUTHORITY_RESOURCES.find(r => r.id === stateId)
-}
-
-/**
- * Gibt alle Bundesländer als Auswahlliste zurück.
- */
-export function getFederalStateOptions(): Array<{ value: string; label: string }> {
-  return DSFA_AUTHORITY_RESOURCES.map(r => ({
-    value: r.id,
-    label: r.state,
-  }))
-}
-
-/**
- * Prüft, ob ein Review-Trigger eine Aktualisierung der DSFA erfordert.
- */
-export function checkReviewRequired(triggers: DSFAReviewTrigger[]): {
-  required: boolean
-  pendingTriggers: DSFAReviewTrigger[]
-} {
-  const pendingTriggers = triggers.filter(t => t.review_required && !t.review_completed)
-  return {
-    required: pendingTriggers.length > 0,
-    pendingTriggers,
-  }
-}
-
-/**
- * Berechnet das nächste Review-Datum basierend auf dem Schedule.
- */
-export function calculateNextReviewDate(schedule: DSFAReviewSchedule): Date {
-  const lastReview = schedule.last_review_date
-    ? new Date(schedule.last_review_date)
-    : new Date()
-
-  const nextReview = new Date(lastReview)
-  nextReview.setMonth(nextReview.getMonth() + schedule.review_frequency_months)
-  return nextReview
-}
-
-/**
- * Prüft, ob KI-spezifische DSFA-Trigger erfüllt sind.
- */
-export function checkAIDSFATriggers(
-  aiTriggerIds: string[]
-): { triggered: boolean; triggers: typeof AI_DSFA_TRIGGERS } {
-  const triggered = AI_DSFA_TRIGGERS.filter(t => aiTriggerIds.includes(t.id))
-  return {
-    triggered: triggered.length > 0,
-    triggers: triggered,
-  }
-}
-
-/**
- * Generiert eine Checkliste für die Schwellwertanalyse.
- */
-export function generateThresholdAnalysisChecklist(): Array<{
-  category: string
-  items: Array<{ id: string; label: string; description: string }>
-}> {
-  return [
-    {
-      category: 'WP248 Kriterien (Art.-29-Datenschutzgruppe)',
-      items: WP248_CRITERIA.map(c => ({
-        id: c.id,
-        label: `${c.code}: ${c.title}`,
-        description: c.description,
-      })),
-    },
-    {
-      category: 'Art. 35 Abs. 3 DSGVO Regelbeispiele',
-      items: ART35_ABS3_CASES.map(c => ({
-        id: c.id,
-        label: `lit. ${c.lit}: ${c.title}`,
-        description: c.description,
-      })),
-    },
-    {
-      category: 'KI-spezifische Trigger (Deutsche DSFA-Liste)',
-      items: AI_DSFA_TRIGGERS.map(t => ({
-        id: t.id,
-        label: t.title,
-        description: t.description,
-      })),
-    },
-  ]
-}
+export * from './types-core'
+export * from './types-wp248'
+export * from './types-authorities'
+export * from './types-assessment'
+export * from './types-api'
+export * from './types-ui'
+export * from './types-risk-helpers'
diff --git a/admin-lehrer/lib/sdk/export-pdf-helpers.ts b/admin-lehrer/lib/sdk/export-pdf-helpers.ts
new file mode 100644
index 0000000..622d18e
--- /dev/null
+++ b/admin-lehrer/lib/sdk/export-pdf-helpers.ts
@@ -0,0 +1,99 @@
+/**
+ * PDF Export Helper Functions
+ * Shared formatting utilities for jsPDF document generation
+ */
+
+import jsPDF from 'jspdf'
+import { SDKState } from './types'
+import { LABELS_DE } from './export-types'
+
+// =============================================================================
+// FORMATTING HELPERS
+// =============================================================================
+
+export function formatDate(date: Date | string | undefined): string {
+  if (!date) return '-'
+  const d = typeof date === 'string' ? new Date(date) : date
+  return d.toLocaleDateString('de-DE', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+
+// =============================================================================
+// PAGE LAYOUT HELPERS
+// =============================================================================
+
+export function addHeader(doc: jsPDF, title: string, pageNum: number, totalPages: number): void {
+  const pageWidth = doc.internal.pageSize.getWidth()
+
+  // Header line
+  doc.setDrawColor(147, 51, 234) // Purple
+  doc.setLineWidth(0.5)
+  doc.line(20, 15, pageWidth - 20, 15)
+
+  // Title
+  doc.setFontSize(10)
+  doc.setTextColor(100)
+  doc.text(title, 20, 12)
+
+  // Page number
+  doc.text(`${LABELS_DE.page} ${pageNum}/${totalPages}`, pageWidth - 40, 12)
+}
+
+export function addFooter(doc: jsPDF, state: SDKState): void {
+  const pageWidth = doc.internal.pageSize.getWidth()
+  const pageHeight = doc.internal.pageSize.getHeight()
+
+  // Footer line
+  doc.setDrawColor(200)
+  doc.setLineWidth(0.3)
+  doc.line(20, pageHeight - 15, pageWidth - 20, pageHeight - 15)
+
+  // Footer text
+  doc.setFontSize(8)
+  doc.setTextColor(150)
+  doc.text(`Tenant: ${state.tenantId} | ${LABELS_DE.generatedAt}: ${formatDate(new Date())}`, 20, pageHeight - 10)
+}
+
+// =============================================================================
+// CONTENT HELPERS
+// =============================================================================
+
+export function addSectionTitle(doc: jsPDF, title: string, y: number): number {
+  doc.setFontSize(14)
+  doc.setTextColor(147, 51, 234) // Purple
+  doc.setFont('helvetica', 'bold')
+  doc.text(title, 20, y)
+  doc.setFont('helvetica', 'normal')
+  return y + 10
+}
+
+export function addSubsectionTitle(doc: jsPDF, title: string, y: number): number {
+  doc.setFontSize(11)
+  doc.setTextColor(60)
+  doc.setFont('helvetica', 'bold')
+  doc.text(title, 25, y)
+  doc.setFont('helvetica', 'normal')
+  return y + 7
+}
+
+export function addText(doc: jsPDF, text: string, x: number, y: number, maxWidth: number = 170): number {
+  doc.setFontSize(10)
+  doc.setTextColor(60)
+  const lines = doc.splitTextToSize(text, maxWidth)
+  doc.text(lines, x, y)
+  return y + lines.length * 5
+}
+
+export function checkPageBreak(doc: jsPDF, y: number, requiredSpace: number = 40): number {
+  const pageHeight = doc.internal.pageSize.getHeight()
+  if (y + requiredSpace > pageHeight - 25) {
+    doc.addPage()
+    return 30
+  }
+  return y
+}
diff --git a/admin-lehrer/lib/sdk/export-pdf.ts b/admin-lehrer/lib/sdk/export-pdf.ts
new file mode 100644
index 0000000..89fe629
--- /dev/null
+++ b/admin-lehrer/lib/sdk/export-pdf.ts
@@ -0,0 +1,312 @@
+/**
+ * PDF Export
+ * Generates a multi-page compliance report as PDF
+ */
+
+import jsPDF from 'jspdf'
+import { SDKState, SDK_STEPS } from './types'
+import { ExportOptions, DEFAULT_OPTIONS, LABELS_DE } from './export-types'
+import {
+  formatDate,
+  addHeader,
+  addFooter,
+  addSectionTitle,
+  addSubsectionTitle,
+  addText,
+  checkPageBreak,
+} from './export-pdf-helpers'
+
+export async function exportToPDF(state: SDKState, options: ExportOptions = {}): Promise<Blob> {
+  const opts = { ...DEFAULT_OPTIONS, ...options }
+  const doc = new jsPDF()
+
+  let y = 30
+  const pageWidth = doc.internal.pageSize.getWidth()
+
+  // ==========================================================================
+  // Title Page
+  // ==========================================================================
+
+  // Logo/Title area
+  doc.setFillColor(147, 51, 234)
+  doc.rect(0, 0, pageWidth, 60, 'F')
+
+  doc.setFontSize(24)
+  doc.setTextColor(255)
+  doc.setFont('helvetica', 'bold')
+  doc.text(LABELS_DE.title, 20, 35)
+
+  doc.setFontSize(14)
+  doc.setFont('helvetica', 'normal')
+  doc.text(LABELS_DE.subtitle, 20, 48)
+
+  // Reset for content
+  y = 80
+
+  // Summary box
+  doc.setDrawColor(200)
+  doc.setFillColor(249, 250, 251)
+  doc.roundedRect(20, y, pageWidth - 40, 50, 3, 3, 'FD')
+
+  y += 15
+  doc.setFontSize(12)
+  doc.setTextColor(60)
+  doc.text(`${LABELS_DE.generatedAt}: ${formatDate(new Date())}`, 30, y)
+
+  y += 10
+  doc.text(`Tenant ID: ${state.tenantId}`, 30, y)
+
+  y += 10
+  doc.text(`Version: ${state.version}`, 30, y)
+
+  y += 10
+  const completedSteps = state.completedSteps.length
+  const totalSteps = SDK_STEPS.length
+  doc.text(`${LABELS_DE.progress}: ${completedSteps}/${totalSteps} Schritte (${Math.round(completedSteps / totalSteps * 100)}%)`, 30, y)
+
+  y += 30
+
+  // Table of Contents
+  y = addSectionTitle(doc, 'Inhaltsverzeichnis', y)
+
+  const tocItems = [
+    { title: 'Zusammenfassung', page: 2 },
+    { title: 'Phase 1: Compliance Assessment', page: 3 },
+    { title: 'Phase 2: Dokumentengenerierung', page: 4 },
+    { title: 'Risiken & Controls', page: 5 },
+    { title: 'Checkpoints', page: 6 },
+  ]
+
+  doc.setFontSize(10)
+  doc.setTextColor(80)
+  tocItems.forEach((item, idx) => {
+    doc.text(`${idx + 1}. ${item.title}`, 25, y)
+    doc.text(`${item.page}`, pageWidth - 30, y, { align: 'right' })
+    y += 7
+  })
+
+  // ==========================================================================
+  // Summary Page
+  // ==========================================================================
+
+  doc.addPage()
+  y = 30
+
+  y = addSectionTitle(doc, LABELS_DE.summary, y)
+
+  // Progress overview
+  doc.setFillColor(249, 250, 251)
+  doc.roundedRect(20, y, pageWidth - 40, 40, 3, 3, 'F')
+
+  y += 15
+  const phase1Steps = SDK_STEPS.filter(s => s.phase === 1)
+  const phase2Steps = SDK_STEPS.filter(s => s.phase === 2)
+  const phase1Completed = phase1Steps.filter(s => state.completedSteps.includes(s.id)).length
+  const phase2Completed = phase2Steps.filter(s => state.completedSteps.includes(s.id)).length
+
+  doc.setFontSize(10)
+  doc.setTextColor(60)
+  doc.text(`${LABELS_DE.phase1}: ${phase1Completed}/${phase1Steps.length} ${LABELS_DE.completed}`, 30, y)
+  y += 8
+  doc.text(`${LABELS_DE.phase2}: ${phase2Completed}/${phase2Steps.length} ${LABELS_DE.completed}`, 30, y)
+
+  y += 25
+
+  // Key metrics
+  y = addSubsectionTitle(doc, 'Kennzahlen', y)
+
+  const metrics = [
+    { label: 'Use Cases', value: state.useCases.length },
+    { label: 'Risiken identifiziert', value: state.risks.length },
+    { label: 'Controls definiert', value: state.controls.length },
+    { label: 'Anforderungen', value: state.requirements.length },
+    { label: 'Nachweise', value: state.evidence.length },
+  ]
+
+  metrics.forEach(metric => {
+    doc.text(`${metric.label}: ${metric.value}`, 30, y)
+    y += 7
+  })
+
+  // ==========================================================================
+  // Use Cases
+  // ==========================================================================
+
+  y += 10
+  y = checkPageBreak(doc, y)
+  y = addSectionTitle(doc, LABELS_DE.useCases, y)
+
+  if (state.useCases.length === 0) {
+    y = addText(doc, LABELS_DE.noData, 25, y)
+  } else {
+    state.useCases.forEach((uc, idx) => {
+      y = checkPageBreak(doc, y, 50)
+
+      doc.setFillColor(249, 250, 251)
+      doc.roundedRect(20, y - 5, pageWidth - 40, 35, 2, 2, 'F')
+
+      doc.setFontSize(11)
+      doc.setTextColor(40)
+      doc.setFont('helvetica', 'bold')
+      doc.text(`${idx + 1}. ${uc.name}`, 25, y + 5)
+      doc.setFont('helvetica', 'normal')
+
+      doc.setFontSize(9)
+      doc.setTextColor(100)
+      const ucStatus = uc.stepsCompleted === uc.steps.length ? LABELS_DE.completed : `${uc.stepsCompleted}/${uc.steps.length} Schritte`
+      doc.text(`ID: ${uc.id} | ${LABELS_DE.status}: ${ucStatus}`, 25, y + 13)
+
+      if (uc.description) {
+        y = addText(doc, uc.description, 25, y + 21, 160)
+      }
+
+      y += 40
+    })
+  }
+
+  // ==========================================================================
+  // Risks
+  // ==========================================================================
+
+  doc.addPage()
+  y = 30
+  y = addSectionTitle(doc, LABELS_DE.risks, y)
+
+  if (state.risks.length === 0) {
+    y = addText(doc, LABELS_DE.noData, 25, y)
+  } else {
+    // Sort by severity
+    const sortedRisks = [...state.risks].sort((a, b) => {
+      const order = { CRITICAL: 0, HIGH: 1, MEDIUM: 2, LOW: 3 }
+      return (order[a.severity] || 4) - (order[b.severity] || 4)
+    })
+
+    sortedRisks.forEach((risk, idx) => {
+      y = checkPageBreak(doc, y, 45)
+
+      // Severity color
+      const severityColors: Record<string, [number, number, number]> = {
+        CRITICAL: [220, 38, 38],
+        HIGH: [234, 88, 12],
+        MEDIUM: [234, 179, 8],
+        LOW: [34, 197, 94],
+      }
+      const color = severityColors[risk.severity] || [100, 100, 100]
+
+      doc.setFillColor(color[0], color[1], color[2])
+      doc.rect(20, y - 3, 3, 30, 'F')
+
+      doc.setFontSize(11)
+      doc.setTextColor(40)
+      doc.setFont('helvetica', 'bold')
+      doc.text(`${idx + 1}. ${risk.title}`, 28, y + 5)
+      doc.setFont('helvetica', 'normal')
+
+      doc.setFontSize(9)
+      doc.setTextColor(100)
+      doc.text(`${LABELS_DE.severity}: ${risk.severity} | ${LABELS_DE.category}: ${risk.category}`, 28, y + 13)
+
+      if (risk.description) {
+        y = addText(doc, risk.description, 28, y + 21, 155)
+      }
+
+      if (risk.mitigation && risk.mitigation.length > 0) {
+        y += 5
+        doc.setFontSize(9)
+        doc.setTextColor(34, 197, 94)
+        doc.text(`${LABELS_DE.mitigation}: ${risk.mitigation.join(', ')}`, 28, y)
+      }
+
+      y += 15
+    })
+  }
+
+  // ==========================================================================
+  // Controls
+  // ==========================================================================
+
+  doc.addPage()
+  y = 30
+  y = addSectionTitle(doc, LABELS_DE.controls, y)
+
+  if (state.controls.length === 0) {
+    y = addText(doc, LABELS_DE.noData, 25, y)
+  } else {
+    state.controls.forEach((ctrl, idx) => {
+      y = checkPageBreak(doc, y, 35)
+
+      doc.setFillColor(249, 250, 251)
+      doc.roundedRect(20, y - 5, pageWidth - 40, 28, 2, 2, 'F')
+
+      doc.setFontSize(10)
+      doc.setTextColor(40)
+      doc.setFont('helvetica', 'bold')
+      doc.text(`${idx + 1}. ${ctrl.name}`, 25, y + 5)
+      doc.setFont('helvetica', 'normal')
+
+      doc.setFontSize(9)
+      doc.setTextColor(100)
+      doc.text(`${LABELS_DE.category}: ${ctrl.category} | ${LABELS_DE.implementation}: ${ctrl.implementationStatus || 'Nicht definiert'}`, 25, y + 13)
+
+      if (ctrl.description) {
+        y = addText(doc, ctrl.description.substring(0, 150) + (ctrl.description.length > 150 ? '...' : ''), 25, y + 20, 160)
+      }
+
+      y += 35
+    })
+  }
+
+  // ==========================================================================
+  // Checkpoints
+  // ==========================================================================
+
+  doc.addPage()
+  y = 30
+  y = addSectionTitle(doc, LABELS_DE.checkpoints, y)
+
+  const checkpointIds = Object.keys(state.checkpoints)
+
+  if (checkpointIds.length === 0) {
+    y = addText(doc, LABELS_DE.noData, 25, y)
+  } else {
+    checkpointIds.forEach((cpId) => {
+      const cp = state.checkpoints[cpId]
+      y = checkPageBreak(doc, y, 25)
+
+      const statusColor = cp.passed ? [34, 197, 94] : [220, 38, 38]
+      doc.setFillColor(statusColor[0], statusColor[1], statusColor[2])
+      doc.circle(25, y + 2, 3, 'F')
+
+      doc.setFontSize(10)
+      doc.setTextColor(40)
+      doc.text(cpId, 35, y + 5)
+
+      doc.setFontSize(9)
+      doc.setTextColor(100)
+      doc.text(`${LABELS_DE.status}: ${cp.passed ? LABELS_DE.completed : LABELS_DE.pending}`, 35, y + 12)
+
+      if (cp.errors && cp.errors.length > 0) {
+        doc.setTextColor(220, 38, 38)
+        doc.text(`Fehler: ${cp.errors.map(e => e.message).join(', ')}`, 35, y + 19)
+        y += 7
+      }
+
+      y += 20
+    })
+  }
+
+  // ==========================================================================
+  // Add page numbers
+  // ==========================================================================
+
+  const pageCount = doc.getNumberOfPages()
+  for (let i = 1; i <= pageCount; i++) {
+    doc.setPage(i)
+    if (i > 1) {
+      addHeader(doc, LABELS_DE.title, i, pageCount)
+    }
+    addFooter(doc, state)
+  }
+
+  return doc.output('blob')
+}
diff --git a/admin-lehrer/lib/sdk/export-types.ts b/admin-lehrer/lib/sdk/export-types.ts
new file mode 100644
index 0000000..690a78c
--- /dev/null
+++ b/admin-lehrer/lib/sdk/export-types.ts
@@ -0,0 +1,53 @@
+/**
+ * SDK Export Types, Labels, and Constants
+ */
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+export interface ExportOptions {
+  includeEvidence?: boolean
+  includeDocuments?: boolean
+  includeRawData?: boolean
+  language?: 'de' | 'en'
+}
+
+export const DEFAULT_OPTIONS: ExportOptions = {
+  includeEvidence: true,
+  includeDocuments: true,
+  includeRawData: true,
+  language: 'de',
+}
+
+// =============================================================================
+// LABELS (German)
+// =============================================================================
+
+export const LABELS_DE = {
+  title: 'AI Compliance SDK - Export',
+  subtitle: 'Compliance-Dokumentation',
+  generatedAt: 'Generiert am',
+  page: 'Seite',
+  summary: 'Zusammenfassung',
+  progress: 'Fortschritt',
+  phase1: 'Phase 1: Automatisches Compliance Assessment',
+  phase2: 'Phase 2: Dokumentengenerierung',
+  useCases: 'Use Cases',
+  risks: 'Risiken',
+  controls: 'Controls',
+  requirements: 'Anforderungen',
+  modules: 'Compliance-Module',
+  evidence: 'Nachweise',
+  checkpoints: 'Checkpoints',
+  noData: 'Keine Daten vorhanden',
+  status: 'Status',
+  completed: 'Abgeschlossen',
+  pending: 'Ausstehend',
+  inProgress: 'In Bearbeitung',
+  severity: 'Schweregrad',
+  mitigation: 'Mitigation',
+  description: 'Beschreibung',
+  category: 'Kategorie',
+  implementation: 'Implementierung',
+}
diff --git a/admin-lehrer/lib/sdk/export-zip.ts b/admin-lehrer/lib/sdk/export-zip.ts
new file mode 100644
index 0000000..2d33cab
--- /dev/null
+++ b/admin-lehrer/lib/sdk/export-zip.ts
@@ -0,0 +1,278 @@
+/**
+ * ZIP Export
+ * Generates a structured ZIP archive with all compliance data
+ */
+
+import JSZip from 'jszip'
+import { SDKState, SDK_STEPS } from './types'
+import { ExportOptions, DEFAULT_OPTIONS } from './export-types'
+import { formatDate } from './export-pdf-helpers'
+import { exportToPDF } from './export-pdf'
+
+export async function exportToZIP(state: SDKState, options: ExportOptions = {}): Promise<Blob> {
+  const opts = { ...DEFAULT_OPTIONS, ...options }
+  const zip = new JSZip()
+
+  // Create folder structure
+  const rootFolder = zip.folder('ai-compliance-sdk-export')
+  if (!rootFolder) throw new Error('Failed to create ZIP folder')
+
+  const phase1Folder = rootFolder.folder('phase1-assessment')
+  const phase2Folder = rootFolder.folder('phase2-documents')
+  const dataFolder = rootFolder.folder('data')
+
+  // ==========================================================================
+  // Main State JSON
+  // ==========================================================================
+
+  if (opts.includeRawData && dataFolder) {
+    dataFolder.file('state.json', JSON.stringify(state, null, 2))
+  }
+
+  // ==========================================================================
+  // README
+  // ==========================================================================
+
+  const readmeContent = `# AI Compliance SDK Export
+
+Generated: ${formatDate(new Date())}
+Tenant: ${state.tenantId}
+Version: ${state.version}
+
+## Folder Structure
+
+- **phase1-assessment/**: Compliance Assessment Ergebnisse
+  - use-cases.json: Alle Use Cases
+  - risks.json: Identifizierte Risiken
+  - controls.json: Definierte Controls
+  - requirements.json: Compliance-Anforderungen
+
+- **phase2-documents/**: Generierte Dokumente
+  - dsfa.json: Datenschutz-Folgenabschaetzung
+  - toms.json: Technische und organisatorische Massnahmen
+  - vvt.json: Verarbeitungsverzeichnis
+  - documents.json: Rechtliche Dokumente
+
+- **data/**: Rohdaten
+  - state.json: Kompletter SDK State
+
+## Progress
+
+Phase 1: ${SDK_STEPS.filter(s => s.phase === 1 && state.completedSteps.includes(s.id)).length}/${SDK_STEPS.filter(s => s.phase === 1).length} completed
+Phase 2: ${SDK_STEPS.filter(s => s.phase === 2 && state.completedSteps.includes(s.id)).length}/${SDK_STEPS.filter(s => s.phase === 2).length} completed
+
+## Key Metrics
+
+- Use Cases: ${state.useCases.length}
+- Risks: ${state.risks.length}
+- Controls: ${state.controls.length}
+- Requirements: ${state.requirements.length}
+- Evidence: ${state.evidence.length}
+`
+
+  rootFolder.file('README.md', readmeContent)
+
+  // ==========================================================================
+  // Phase 1 Files
+  // ==========================================================================
+
+  if (phase1Folder) {
+    // Use Cases
+    phase1Folder.file('use-cases.json', JSON.stringify({
+      exportedAt: new Date().toISOString(),
+      count: state.useCases.length,
+      useCases: state.useCases,
+    }, null, 2))
+
+    // Risks
+    phase1Folder.file('risks.json', JSON.stringify({
+      exportedAt: new Date().toISOString(),
+      count: state.risks.length,
+      risks: state.risks,
+      summary: {
+        critical: state.risks.filter(r => r.severity === 'CRITICAL').length,
+        high: state.risks.filter(r => r.severity === 'HIGH').length,
+        medium: state.risks.filter(r => r.severity === 'MEDIUM').length,
+        low: state.risks.filter(r => r.severity === 'LOW').length,
+      },
+    }, null, 2))
+
+    // Controls
+    phase1Folder.file('controls.json', JSON.stringify({
+      exportedAt: new Date().toISOString(),
+      count: state.controls.length,
+      controls: state.controls,
+    }, null, 2))
+
+    // Requirements
+    phase1Folder.file('requirements.json', JSON.stringify({
+      exportedAt: new Date().toISOString(),
+      count: state.requirements.length,
+      requirements: state.requirements,
+    }, null, 2))
+
+    // Modules
+    phase1Folder.file('modules.json', JSON.stringify({
+      exportedAt: new Date().toISOString(),
+      count: state.modules.length,
+      modules: state.modules,
+    }, null, 2))
+
+    // Evidence
+    if (opts.includeEvidence) {
+      phase1Folder.file('evidence.json', JSON.stringify({
+        exportedAt: new Date().toISOString(),
+        count: state.evidence.length,
+        evidence: state.evidence,
+      }, null, 2))
+    }
+
+    // Checkpoints
+    phase1Folder.file('checkpoints.json', JSON.stringify({
+      exportedAt: new Date().toISOString(),
+      checkpoints: state.checkpoints,
+    }, null, 2))
+
+    // Screening
+    if (state.screening) {
+      phase1Folder.file('screening.json', JSON.stringify({
+        exportedAt: new Date().toISOString(),
+        screening: state.screening,
+      }, null, 2))
+    }
+  }
+
+  // ==========================================================================
+  // Phase 2 Files
+  // ==========================================================================
+
+  if (phase2Folder) {
+    // DSFA
+    if (state.dsfa) {
+      phase2Folder.file('dsfa.json', JSON.stringify({
+        exportedAt: new Date().toISOString(),
+        dsfa: state.dsfa,
+      }, null, 2))
+    }
+
+    // TOMs
+    phase2Folder.file('toms.json', JSON.stringify({
+      exportedAt: new Date().toISOString(),
+      count: state.toms.length,
+      toms: state.toms,
+    }, null, 2))
+
+    // VVT (Processing Activities)
+    phase2Folder.file('vvt.json', JSON.stringify({
+      exportedAt: new Date().toISOString(),
+      count: state.vvt.length,
+      processingActivities: state.vvt,
+    }, null, 2))
+
+    // Legal Documents
+    if (opts.includeDocuments) {
+      phase2Folder.file('documents.json', JSON.stringify({
+        exportedAt: new Date().toISOString(),
+        count: state.documents.length,
+        documents: state.documents,
+      }, null, 2))
+    }
+
+    // Cookie Banner Config
+    if (state.cookieBanner) {
+      phase2Folder.file('cookie-banner.json', JSON.stringify({
+        exportedAt: new Date().toISOString(),
+        config: state.cookieBanner,
+      }, null, 2))
+    }
+
+    // Retention Policies
+    phase2Folder.file('retention-policies.json', JSON.stringify({
+      exportedAt: new Date().toISOString(),
+      count: state.retentionPolicies.length,
+      policies: state.retentionPolicies,
+    }, null, 2))
+
+    // AI Act Classification
+    if (state.aiActClassification) {
+      phase2Folder.file('ai-act-classification.json', JSON.stringify({
+        exportedAt: new Date().toISOString(),
+        classification: state.aiActClassification,
+      }, null, 2))
+    }
+
+    // Obligations
+    phase2Folder.file('obligations.json', JSON.stringify({
+      exportedAt: new Date().toISOString(),
+      count: state.obligations.length,
+      obligations: state.obligations,
+    }, null, 2))
+
+    // Consent Records
+    phase2Folder.file('consents.json', JSON.stringify({
+      exportedAt: new Date().toISOString(),
+      count: state.consents.length,
+      consents: state.consents,
+    }, null, 2))
+
+    // DSR Config
+    if (state.dsrConfig) {
+      phase2Folder.file('dsr-config.json', JSON.stringify({
+        exportedAt: new Date().toISOString(),
+        config: state.dsrConfig,
+      }, null, 2))
+    }
+
+    // Escalation Workflows
+    phase2Folder.file('escalation-workflows.json', JSON.stringify({
+      exportedAt: new Date().toISOString(),
+      count: state.escalationWorkflows.length,
+      workflows: state.escalationWorkflows,
+    }, null, 2))
+  }
+
+  // ==========================================================================
+  // Security Data
+  // ==========================================================================
+
+  if (dataFolder) {
+    if (state.sbom) {
+      dataFolder.file('sbom.json', JSON.stringify({
+        exportedAt: new Date().toISOString(),
+        sbom: state.sbom,
+      }, null, 2))
+    }
+
+    if (state.securityIssues.length > 0) {
+      dataFolder.file('security-issues.json', JSON.stringify({
+        exportedAt: new Date().toISOString(),
+        count: state.securityIssues.length,
+        issues: state.securityIssues,
+      }, null, 2))
+    }
+
+    if (state.securityBacklog.length > 0) {
+      dataFolder.file('security-backlog.json', JSON.stringify({
+        exportedAt: new Date().toISOString(),
+        count: state.securityBacklog.length,
+        backlog: state.securityBacklog,
+      }, null, 2))
+    }
+  }
+
+  // ==========================================================================
+  // Generate PDF and include in ZIP
+  // ==========================================================================
+
+  try {
+    const pdfBlob = await exportToPDF(state, options)
+    const pdfArrayBuffer = await pdfBlob.arrayBuffer()
+    rootFolder.file('compliance-report.pdf', pdfArrayBuffer)
+  } catch (error) {
+    console.error('Failed to generate PDF for ZIP:', error)
+    // Continue without PDF
+  }
+
+  // Generate ZIP
+  return zip.generateAsync({ type: 'blob', compression: 'DEFLATE' })
+}
diff --git a/admin-lehrer/lib/sdk/export.ts b/admin-lehrer/lib/sdk/export.ts
index a88c20b..7154166 100644
--- a/admin-lehrer/lib/sdk/export.ts
+++ b/admin-lehrer/lib/sdk/export.ts
@@ -1,714 +1,20 @@
 /**
  * SDK Export Utilities
- * Handles PDF and ZIP export of SDK state and documents
+ * Barrel module — re-exports PDF, ZIP, and helpers
  */
 
-import jsPDF from 'jspdf'
-import JSZip from 'jszip'
-import { SDKState, SDK_STEPS, getStepById } from './types'
+import { SDKState } from './types'
+import { ExportOptions } from './export-types'
+import { exportToPDF } from './export-pdf'
+import { exportToZIP } from './export-zip'
+
+// Re-export all public API
+export type { ExportOptions } from './export-types'
+export { exportToPDF } from './export-pdf'
+export { exportToZIP } from './export-zip'
 
 // =============================================================================
-// TYPES
-// =============================================================================
-
-export interface ExportOptions {
-  includeEvidence?: boolean
-  includeDocuments?: boolean
-  includeRawData?: boolean
-  language?: 'de' | 'en'
-}
-
-const DEFAULT_OPTIONS: ExportOptions = {
-  includeEvidence: true,
-  includeDocuments: true,
-  includeRawData: true,
-  language: 'de',
-}
-
-// =============================================================================
-// LABELS (German)
-// =============================================================================
-
-const LABELS_DE = {
-  title: 'AI Compliance SDK - Export',
-  subtitle: 'Compliance-Dokumentation',
-  generatedAt: 'Generiert am',
-  page: 'Seite',
-  summary: 'Zusammenfassung',
-  progress: 'Fortschritt',
-  phase1: 'Phase 1: Automatisches Compliance Assessment',
-  phase2: 'Phase 2: Dokumentengenerierung',
-  useCases: 'Use Cases',
-  risks: 'Risiken',
-  controls: 'Controls',
-  requirements: 'Anforderungen',
-  modules: 'Compliance-Module',
-  evidence: 'Nachweise',
-  checkpoints: 'Checkpoints',
-  noData: 'Keine Daten vorhanden',
-  status: 'Status',
-  completed: 'Abgeschlossen',
-  pending: 'Ausstehend',
-  inProgress: 'In Bearbeitung',
-  severity: 'Schweregrad',
-  mitigation: 'Mitigation',
-  description: 'Beschreibung',
-  category: 'Kategorie',
-  implementation: 'Implementierung',
-}
-
-// =============================================================================
-// PDF EXPORT
-// =============================================================================
-
-function formatDate(date: Date | string | undefined): string {
-  if (!date) return '-'
-  const d = typeof date === 'string' ? new Date(date) : date
-  return d.toLocaleDateString('de-DE', {
-    day: '2-digit',
-    month: '2-digit',
-    year: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-  })
-}
-
-function addHeader(doc: jsPDF, title: string, pageNum: number, totalPages: number): void {
-  const pageWidth = doc.internal.pageSize.getWidth()
-
-  // Header line
-  doc.setDrawColor(147, 51, 234) // Purple
-  doc.setLineWidth(0.5)
-  doc.line(20, 15, pageWidth - 20, 15)
-
-  // Title
-  doc.setFontSize(10)
-  doc.setTextColor(100)
-  doc.text(title, 20, 12)
-
-  // Page number
-  doc.text(`${LABELS_DE.page} ${pageNum}/${totalPages}`, pageWidth - 40, 12)
-}
-
-function addFooter(doc: jsPDF, state: SDKState): void {
-  const pageWidth = doc.internal.pageSize.getWidth()
-  const pageHeight = doc.internal.pageSize.getHeight()
-
-  // Footer line
-  doc.setDrawColor(200)
-  doc.setLineWidth(0.3)
-  doc.line(20, pageHeight - 15, pageWidth - 20, pageHeight - 15)
-
-  // Footer text
-  doc.setFontSize(8)
-  doc.setTextColor(150)
-  doc.text(`Tenant: ${state.tenantId} | ${LABELS_DE.generatedAt}: ${formatDate(new Date())}`, 20, pageHeight - 10)
-}
-
-function addSectionTitle(doc: jsPDF, title: string, y: number): number {
-  doc.setFontSize(14)
-  doc.setTextColor(147, 51, 234) // Purple
-  doc.setFont('helvetica', 'bold')
-  doc.text(title, 20, y)
-  doc.setFont('helvetica', 'normal')
-  return y + 10
-}
-
-function addSubsectionTitle(doc: jsPDF, title: string, y: number): number {
-  doc.setFontSize(11)
-  doc.setTextColor(60)
-  doc.setFont('helvetica', 'bold')
-  doc.text(title, 25, y)
-  doc.setFont('helvetica', 'normal')
-  return y + 7
-}
-
-function addText(doc: jsPDF, text: string, x: number, y: number, maxWidth: number = 170): number {
-  doc.setFontSize(10)
-  doc.setTextColor(60)
-  const lines = doc.splitTextToSize(text, maxWidth)
-  doc.text(lines, x, y)
-  return y + lines.length * 5
-}
-
-function checkPageBreak(doc: jsPDF, y: number, requiredSpace: number = 40): number {
-  const pageHeight = doc.internal.pageSize.getHeight()
-  if (y + requiredSpace > pageHeight - 25) {
-    doc.addPage()
-    return 30
-  }
-  return y
-}
-
-export async function exportToPDF(state: SDKState, options: ExportOptions = {}): Promise<Blob> {
-  const opts = { ...DEFAULT_OPTIONS, ...options }
-  const doc = new jsPDF()
-
-  let y = 30
-  const pageWidth = doc.internal.pageSize.getWidth()
-
-  // ==========================================================================
-  // Title Page
-  // ==========================================================================
-
-  // Logo/Title area
-  doc.setFillColor(147, 51, 234)
-  doc.rect(0, 0, pageWidth, 60, 'F')
-
-  doc.setFontSize(24)
-  doc.setTextColor(255)
-  doc.setFont('helvetica', 'bold')
-  doc.text(LABELS_DE.title, 20, 35)
-
-  doc.setFontSize(14)
-  doc.setFont('helvetica', 'normal')
-  doc.text(LABELS_DE.subtitle, 20, 48)
-
-  // Reset for content
-  y = 80
-
-  // Summary box
-  doc.setDrawColor(200)
-  doc.setFillColor(249, 250, 251)
-  doc.roundedRect(20, y, pageWidth - 40, 50, 3, 3, 'FD')
-
-  y += 15
-  doc.setFontSize(12)
-  doc.setTextColor(60)
-  doc.text(`${LABELS_DE.generatedAt}: ${formatDate(new Date())}`, 30, y)
-
-  y += 10
-  doc.text(`Tenant ID: ${state.tenantId}`, 30, y)
-
-  y += 10
-  doc.text(`Version: ${state.version}`, 30, y)
-
-  y += 10
-  const completedSteps = state.completedSteps.length
-  const totalSteps = SDK_STEPS.length
-  doc.text(`${LABELS_DE.progress}: ${completedSteps}/${totalSteps} Schritte (${Math.round(completedSteps / totalSteps * 100)}%)`, 30, y)
-
-  y += 30
-
-  // Table of Contents
-  y = addSectionTitle(doc, 'Inhaltsverzeichnis', y)
-
-  const tocItems = [
-    { title: 'Zusammenfassung', page: 2 },
-    { title: 'Phase 1: Compliance Assessment', page: 3 },
-    { title: 'Phase 2: Dokumentengenerierung', page: 4 },
-    { title: 'Risiken & Controls', page: 5 },
-    { title: 'Checkpoints', page: 6 },
-  ]
-
-  doc.setFontSize(10)
-  doc.setTextColor(80)
-  tocItems.forEach((item, idx) => {
-    doc.text(`${idx + 1}. ${item.title}`, 25, y)
-    doc.text(`${item.page}`, pageWidth - 30, y, { align: 'right' })
-    y += 7
-  })
-
-  // ==========================================================================
-  // Summary Page
-  // ==========================================================================
-
-  doc.addPage()
-  y = 30
-
-  y = addSectionTitle(doc, LABELS_DE.summary, y)
-
-  // Progress overview
-  doc.setFillColor(249, 250, 251)
-  doc.roundedRect(20, y, pageWidth - 40, 40, 3, 3, 'F')
-
-  y += 15
-  const phase1Steps = SDK_STEPS.filter(s => s.phase === 1)
-  const phase2Steps = SDK_STEPS.filter(s => s.phase === 2)
-  const phase1Completed = phase1Steps.filter(s => state.completedSteps.includes(s.id)).length
-  const phase2Completed = phase2Steps.filter(s => state.completedSteps.includes(s.id)).length
-
-  doc.setFontSize(10)
-  doc.setTextColor(60)
-  doc.text(`${LABELS_DE.phase1}: ${phase1Completed}/${phase1Steps.length} ${LABELS_DE.completed}`, 30, y)
-  y += 8
-  doc.text(`${LABELS_DE.phase2}: ${phase2Completed}/${phase2Steps.length} ${LABELS_DE.completed}`, 30, y)
-
-  y += 25
-
-  // Key metrics
-  y = addSubsectionTitle(doc, 'Kennzahlen', y)
-
-  const metrics = [
-    { label: 'Use Cases', value: state.useCases.length },
-    { label: 'Risiken identifiziert', value: state.risks.length },
-    { label: 'Controls definiert', value: state.controls.length },
-    { label: 'Anforderungen', value: state.requirements.length },
-    { label: 'Nachweise', value: state.evidence.length },
-  ]
-
-  metrics.forEach(metric => {
-    doc.text(`${metric.label}: ${metric.value}`, 30, y)
-    y += 7
-  })
-
-  // ==========================================================================
-  // Use Cases
-  // ==========================================================================
-
-  y += 10
-  y = checkPageBreak(doc, y)
-  y = addSectionTitle(doc, LABELS_DE.useCases, y)
-
-  if (state.useCases.length === 0) {
-    y = addText(doc, LABELS_DE.noData, 25, y)
-  } else {
-    state.useCases.forEach((uc, idx) => {
-      y = checkPageBreak(doc, y, 50)
-
-      doc.setFillColor(249, 250, 251)
-      doc.roundedRect(20, y - 5, pageWidth - 40, 35, 2, 2, 'F')
-
-      doc.setFontSize(11)
-      doc.setTextColor(40)
-      doc.setFont('helvetica', 'bold')
-      doc.text(`${idx + 1}. ${uc.name}`, 25, y + 5)
-      doc.setFont('helvetica', 'normal')
-
-      doc.setFontSize(9)
-      doc.setTextColor(100)
-      const ucStatus = uc.stepsCompleted === uc.steps.length ? LABELS_DE.completed : `${uc.stepsCompleted}/${uc.steps.length} Schritte`
-      doc.text(`ID: ${uc.id} | ${LABELS_DE.status}: ${ucStatus}`, 25, y + 13)
-
-      if (uc.description) {
-        y = addText(doc, uc.description, 25, y + 21, 160)
-      }
-
-      y += 40
-    })
-  }
-
-  // ==========================================================================
-  // Risks
-  // ==========================================================================
-
-  doc.addPage()
-  y = 30
-  y = addSectionTitle(doc, LABELS_DE.risks, y)
-
-  if (state.risks.length === 0) {
-    y = addText(doc, LABELS_DE.noData, 25, y)
-  } else {
-    // Sort by severity
-    const sortedRisks = [...state.risks].sort((a, b) => {
-      const order = { CRITICAL: 0, HIGH: 1, MEDIUM: 2, LOW: 3 }
-      return (order[a.severity] || 4) - (order[b.severity] || 4)
-    })
-
-    sortedRisks.forEach((risk, idx) => {
-      y = checkPageBreak(doc, y, 45)
-
-      // Severity color
-      const severityColors: Record<string, [number, number, number]> = {
-        CRITICAL: [220, 38, 38],
-        HIGH: [234, 88, 12],
-        MEDIUM: [234, 179, 8],
-        LOW: [34, 197, 94],
-      }
-      const color = severityColors[risk.severity] || [100, 100, 100]
-
-      doc.setFillColor(color[0], color[1], color[2])
-      doc.rect(20, y - 3, 3, 30, 'F')
-
-      doc.setFontSize(11)
-      doc.setTextColor(40)
-      doc.setFont('helvetica', 'bold')
-      doc.text(`${idx + 1}. ${risk.title}`, 28, y + 5)
-      doc.setFont('helvetica', 'normal')
-
-      doc.setFontSize(9)
-      doc.setTextColor(100)
-      doc.text(`${LABELS_DE.severity}: ${risk.severity} | ${LABELS_DE.category}: ${risk.category}`, 28, y + 13)
-
-      if (risk.description) {
-        y = addText(doc, risk.description, 28, y + 21, 155)
-      }
-
-      if (risk.mitigation && risk.mitigation.length > 0) {
-        y += 5
-        doc.setFontSize(9)
-        doc.setTextColor(34, 197, 94)
-        doc.text(`${LABELS_DE.mitigation}: ${risk.mitigation.join(', ')}`, 28, y)
-      }
-
-      y += 15
-    })
-  }
-
-  // ==========================================================================
-  // Controls
-  // ==========================================================================
-
-  doc.addPage()
-  y = 30
-  y = addSectionTitle(doc, LABELS_DE.controls, y)
-
-  if (state.controls.length === 0) {
-    y = addText(doc, LABELS_DE.noData, 25, y)
-  } else {
-    state.controls.forEach((ctrl, idx) => {
-      y = checkPageBreak(doc, y, 35)
-
-      doc.setFillColor(249, 250, 251)
-      doc.roundedRect(20, y - 5, pageWidth - 40, 28, 2, 2, 'F')
-
-      doc.setFontSize(10)
-      doc.setTextColor(40)
-      doc.setFont('helvetica', 'bold')
-      doc.text(`${idx + 1}. ${ctrl.name}`, 25, y + 5)
-      doc.setFont('helvetica', 'normal')
-
-      doc.setFontSize(9)
-      doc.setTextColor(100)
-      doc.text(`${LABELS_DE.category}: ${ctrl.category} | ${LABELS_DE.implementation}: ${ctrl.implementationStatus || 'Nicht definiert'}`, 25, y + 13)
-
-      if (ctrl.description) {
-        y = addText(doc, ctrl.description.substring(0, 150) + (ctrl.description.length > 150 ? '...' : ''), 25, y + 20, 160)
-      }
-
-      y += 35
-    })
-  }
-
-  // ==========================================================================
-  // Checkpoints
-  // ==========================================================================
-
-  doc.addPage()
-  y = 30
-  y = addSectionTitle(doc, LABELS_DE.checkpoints, y)
-
-  const checkpointIds = Object.keys(state.checkpoints)
-
-  if (checkpointIds.length === 0) {
-    y = addText(doc, LABELS_DE.noData, 25, y)
-  } else {
-    checkpointIds.forEach((cpId) => {
-      const cp = state.checkpoints[cpId]
-      y = checkPageBreak(doc, y, 25)
-
-      const statusColor = cp.passed ? [34, 197, 94] : [220, 38, 38]
-      doc.setFillColor(statusColor[0], statusColor[1], statusColor[2])
-      doc.circle(25, y + 2, 3, 'F')
-
-      doc.setFontSize(10)
-      doc.setTextColor(40)
-      doc.text(cpId, 35, y + 5)
-
-      doc.setFontSize(9)
-      doc.setTextColor(100)
-      doc.text(`${LABELS_DE.status}: ${cp.passed ? LABELS_DE.completed : LABELS_DE.pending}`, 35, y + 12)
-
-      if (cp.errors && cp.errors.length > 0) {
-        doc.setTextColor(220, 38, 38)
-        doc.text(`Fehler: ${cp.errors.map(e => e.message).join(', ')}`, 35, y + 19)
-        y += 7
-      }
-
-      y += 20
-    })
-  }
-
-  // ==========================================================================
-  // Add page numbers
-  // ==========================================================================
-
-  const pageCount = doc.getNumberOfPages()
-  for (let i = 1; i <= pageCount; i++) {
-    doc.setPage(i)
-    if (i > 1) {
-      addHeader(doc, LABELS_DE.title, i, pageCount)
-    }
-    addFooter(doc, state)
-  }
-
-  return doc.output('blob')
-}
-
-// =============================================================================
-// ZIP EXPORT
-// =============================================================================
-
-export async function exportToZIP(state: SDKState, options: ExportOptions = {}): Promise<Blob> {
-  const opts = { ...DEFAULT_OPTIONS, ...options }
-  const zip = new JSZip()
-
-  // Create folder structure
-  const rootFolder = zip.folder('ai-compliance-sdk-export')
-  if (!rootFolder) throw new Error('Failed to create ZIP folder')
-
-  const phase1Folder = rootFolder.folder('phase1-assessment')
-  const phase2Folder = rootFolder.folder('phase2-documents')
-  const dataFolder = rootFolder.folder('data')
-
-  // ==========================================================================
-  // Main State JSON
-  // ==========================================================================
-
-  if (opts.includeRawData && dataFolder) {
-    dataFolder.file('state.json', JSON.stringify(state, null, 2))
-  }
-
-  // ==========================================================================
-  // README
-  // ==========================================================================
-
-  const readmeContent = `# AI Compliance SDK Export
-
-Generated: ${formatDate(new Date())}
-Tenant: ${state.tenantId}
-Version: ${state.version}
-
-## Folder Structure
-
-- **phase1-assessment/**: Compliance Assessment Ergebnisse
-  - use-cases.json: Alle Use Cases
-  - risks.json: Identifizierte Risiken
-  - controls.json: Definierte Controls
-  - requirements.json: Compliance-Anforderungen
-
-- **phase2-documents/**: Generierte Dokumente
-  - dsfa.json: Datenschutz-Folgenabschaetzung
-  - toms.json: Technische und organisatorische Massnahmen
-  - vvt.json: Verarbeitungsverzeichnis
-  - documents.json: Rechtliche Dokumente
-
-- **data/**: Rohdaten
-  - state.json: Kompletter SDK State
-
-## Progress
-
-Phase 1: ${SDK_STEPS.filter(s => s.phase === 1 && state.completedSteps.includes(s.id)).length}/${SDK_STEPS.filter(s => s.phase === 1).length} completed
-Phase 2: ${SDK_STEPS.filter(s => s.phase === 2 && state.completedSteps.includes(s.id)).length}/${SDK_STEPS.filter(s => s.phase === 2).length} completed
-
-## Key Metrics
-
-- Use Cases: ${state.useCases.length}
-- Risks: ${state.risks.length}
-- Controls: ${state.controls.length}
-- Requirements: ${state.requirements.length}
-- Evidence: ${state.evidence.length}
-`
-
-  rootFolder.file('README.md', readmeContent)
-
-  // ==========================================================================
-  // Phase 1 Files
-  // ==========================================================================
-
-  if (phase1Folder) {
-    // Use Cases
-    phase1Folder.file('use-cases.json', JSON.stringify({
-      exportedAt: new Date().toISOString(),
-      count: state.useCases.length,
-      useCases: state.useCases,
-    }, null, 2))
-
-    // Risks
-    phase1Folder.file('risks.json', JSON.stringify({
-      exportedAt: new Date().toISOString(),
-      count: state.risks.length,
-      risks: state.risks,
-      summary: {
-        critical: state.risks.filter(r => r.severity === 'CRITICAL').length,
-        high: state.risks.filter(r => r.severity === 'HIGH').length,
-        medium: state.risks.filter(r => r.severity === 'MEDIUM').length,
-        low: state.risks.filter(r => r.severity === 'LOW').length,
-      },
-    }, null, 2))
-
-    // Controls
-    phase1Folder.file('controls.json', JSON.stringify({
-      exportedAt: new Date().toISOString(),
-      count: state.controls.length,
-      controls: state.controls,
-    }, null, 2))
-
-    // Requirements
-    phase1Folder.file('requirements.json', JSON.stringify({
-      exportedAt: new Date().toISOString(),
-      count: state.requirements.length,
-      requirements: state.requirements,
-    }, null, 2))
-
-    // Modules
-    phase1Folder.file('modules.json', JSON.stringify({
-      exportedAt: new Date().toISOString(),
-      count: state.modules.length,
-      modules: state.modules,
-    }, null, 2))
-
-    // Evidence
-    if (opts.includeEvidence) {
-      phase1Folder.file('evidence.json', JSON.stringify({
-        exportedAt: new Date().toISOString(),
-        count: state.evidence.length,
-        evidence: state.evidence,
-      }, null, 2))
-    }
-
-    // Checkpoints
-    phase1Folder.file('checkpoints.json', JSON.stringify({
-      exportedAt: new Date().toISOString(),
-      checkpoints: state.checkpoints,
-    }, null, 2))
-
-    // Screening
-    if (state.screening) {
-      phase1Folder.file('screening.json', JSON.stringify({
-        exportedAt: new Date().toISOString(),
-        screening: state.screening,
-      }, null, 2))
-    }
-  }
-
-  // ==========================================================================
-  // Phase 2 Files
-  // ==========================================================================
-
-  if (phase2Folder) {
-    // DSFA
-    if (state.dsfa) {
-      phase2Folder.file('dsfa.json', JSON.stringify({
-        exportedAt: new Date().toISOString(),
-        dsfa: state.dsfa,
-      }, null, 2))
-    }
-
-    // TOMs
-    phase2Folder.file('toms.json', JSON.stringify({
-      exportedAt: new Date().toISOString(),
-      count: state.toms.length,
-      toms: state.toms,
-    }, null, 2))
-
-    // VVT (Processing Activities)
-    phase2Folder.file('vvt.json', JSON.stringify({
-      exportedAt: new Date().toISOString(),
-      count: state.vvt.length,
-      processingActivities: state.vvt,
-    }, null, 2))
-
-    // Legal Documents
-    if (opts.includeDocuments) {
-      phase2Folder.file('documents.json', JSON.stringify({
-        exportedAt: new Date().toISOString(),
-        count: state.documents.length,
-        documents: state.documents,
-      }, null, 2))
-    }
-
-    // Cookie Banner Config
-    if (state.cookieBanner) {
-      phase2Folder.file('cookie-banner.json', JSON.stringify({
-        exportedAt: new Date().toISOString(),
-        config: state.cookieBanner,
-      }, null, 2))
-    }
-
-    // Retention Policies
-    phase2Folder.file('retention-policies.json', JSON.stringify({
-      exportedAt: new Date().toISOString(),
-      count: state.retentionPolicies.length,
-      policies: state.retentionPolicies,
-    }, null, 2))
-
-    // AI Act Classification
-    if (state.aiActClassification) {
-      phase2Folder.file('ai-act-classification.json', JSON.stringify({
-        exportedAt: new Date().toISOString(),
-        classification: state.aiActClassification,
-      }, null, 2))
-    }
-
-    // Obligations
-    phase2Folder.file('obligations.json', JSON.stringify({
-      exportedAt: new Date().toISOString(),
-      count: state.obligations.length,
-      obligations: state.obligations,
-    }, null, 2))
-
-    // Consent Records
-    phase2Folder.file('consents.json', JSON.stringify({
-      exportedAt: new Date().toISOString(),
-      count: state.consents.length,
-      consents: state.consents,
-    }, null, 2))
-
-    // DSR Config
-    if (state.dsrConfig) {
-      phase2Folder.file('dsr-config.json', JSON.stringify({
-        exportedAt: new Date().toISOString(),
-        config: state.dsrConfig,
-      }, null, 2))
-    }
-
-    // Escalation Workflows
-    phase2Folder.file('escalation-workflows.json', JSON.stringify({
-      exportedAt: new Date().toISOString(),
-      count: state.escalationWorkflows.length,
-      workflows: state.escalationWorkflows,
-    }, null, 2))
-  }
-
-  // ==========================================================================
-  // Security Data
-  // ==========================================================================
-
-  if (dataFolder) {
-    if (state.sbom) {
-      dataFolder.file('sbom.json', JSON.stringify({
-        exportedAt: new Date().toISOString(),
-        sbom: state.sbom,
-      }, null, 2))
-    }
-
-    if (state.securityIssues.length > 0) {
-      dataFolder.file('security-issues.json', JSON.stringify({
-        exportedAt: new Date().toISOString(),
-        count: state.securityIssues.length,
-        issues: state.securityIssues,
-      }, null, 2))
-    }
-
-    if (state.securityBacklog.length > 0) {
-      dataFolder.file('security-backlog.json', JSON.stringify({
-        exportedAt: new Date().toISOString(),
-        count: state.securityBacklog.length,
-        backlog: state.securityBacklog,
-      }, null, 2))
-    }
-  }
-
-  // ==========================================================================
-  // Generate PDF and include in ZIP
-  // ==========================================================================
-
-  try {
-    const pdfBlob = await exportToPDF(state, options)
-    const pdfArrayBuffer = await pdfBlob.arrayBuffer()
-    rootFolder.file('compliance-report.pdf', pdfArrayBuffer)
-  } catch (error) {
-    console.error('Failed to generate PDF for ZIP:', error)
-    // Continue without PDF
-  }
-
-  // Generate ZIP
-  return zip.generateAsync({ type: 'blob', compression: 'DEFLATE' })
-}
-
-// =============================================================================
-// EXPORT HELPER
+// DOWNLOAD HELPER
 // =============================================================================
 
 export async function downloadExport(
diff --git a/admin-lehrer/lib/sdk/vendor-compliance/context-actions.ts b/admin-lehrer/lib/sdk/vendor-compliance/context-actions.ts
new file mode 100644
index 0000000..0e4857b
--- /dev/null
+++ b/admin-lehrer/lib/sdk/vendor-compliance/context-actions.ts
@@ -0,0 +1,491 @@
+import type React from 'react'
+import type {
+  VendorComplianceAction,
+  VendorComplianceState,
+  ProcessingActivity,
+  Vendor,
+  ContractDocument,
+  Finding,
+  ControlInstance,
+  ExportFormat,
+} from './types'
+
+type Dispatch = React.Dispatch<VendorComplianceAction>
+
+const API_BASE = '/api/sdk/v1/vendor-compliance'
+
+// ==========================================
+// DATA LOADING
+// ==========================================
+
+export async function loadAllData(dispatch: Dispatch): Promise<void> {
+  dispatch({ type: 'SET_LOADING', payload: true })
+  dispatch({ type: 'SET_ERROR', payload: null })
+
+  try {
+    const [
+      activitiesRes,
+      vendorsRes,
+      contractsRes,
+      findingsRes,
+      controlsRes,
+      controlInstancesRes,
+    ] = await Promise.all([
+      fetch(`${API_BASE}/processing-activities`),
+      fetch(`${API_BASE}/vendors`),
+      fetch(`${API_BASE}/contracts`),
+      fetch(`${API_BASE}/findings`),
+      fetch(`${API_BASE}/controls`),
+      fetch(`${API_BASE}/control-instances`),
+    ])
+
+    if (activitiesRes.ok) {
+      const data = await activitiesRes.json()
+      dispatch({ type: 'SET_PROCESSING_ACTIVITIES', payload: data.data || [] })
+    }
+
+    if (vendorsRes.ok) {
+      const data = await vendorsRes.json()
+      dispatch({ type: 'SET_VENDORS', payload: data.data || [] })
+    }
+
+    if (contractsRes.ok) {
+      const data = await contractsRes.json()
+      dispatch({ type: 'SET_CONTRACTS', payload: data.data || [] })
+    }
+
+    if (findingsRes.ok) {
+      const data = await findingsRes.json()
+      dispatch({ type: 'SET_FINDINGS', payload: data.data || [] })
+    }
+
+    if (controlsRes.ok) {
+      const data = await controlsRes.json()
+      dispatch({ type: 'SET_CONTROLS', payload: data.data || [] })
+    }
+
+    if (controlInstancesRes.ok) {
+      const data = await controlInstancesRes.json()
+      dispatch({ type: 'SET_CONTROL_INSTANCES', payload: data.data || [] })
+    }
+  } catch (error) {
+    console.error('Failed to load vendor compliance data:', error)
+    dispatch({
+      type: 'SET_ERROR',
+      payload: 'Fehler beim Laden der Daten',
+    })
+  } finally {
+    dispatch({ type: 'SET_LOADING', payload: false })
+  }
+}
+
+// ==========================================
+// PROCESSING ACTIVITIES ACTIONS
+// ==========================================
+
+export async function apiCreateProcessingActivity(
+  dispatch: Dispatch,
+  data: Omit<ProcessingActivity, 'id' | 'tenantId' | 'createdAt' | 'updatedAt'>
+): Promise<ProcessingActivity> {
+  const response = await fetch(`${API_BASE}/processing-activities`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data),
+  })
+
+  if (!response.ok) {
+    const error = await response.json()
+    throw new Error(error.error || 'Fehler beim Erstellen der Verarbeitungstaetigkeit')
+  }
+
+  const result = await response.json()
+  const activity = result.data
+
+  dispatch({ type: 'ADD_PROCESSING_ACTIVITY', payload: activity })
+
+  return activity
+}
+
+export async function apiUpdateProcessingActivity(
+  dispatch: Dispatch,
+  id: string,
+  data: Partial<ProcessingActivity>
+): Promise<void> {
+  const response = await fetch(`${API_BASE}/processing-activities/${id}`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data),
+  })
+
+  if (!response.ok) {
+    const error = await response.json()
+    throw new Error(error.error || 'Fehler beim Aktualisieren der Verarbeitungstaetigkeit')
+  }
+
+  dispatch({ type: 'UPDATE_PROCESSING_ACTIVITY', payload: { id, data } })
+}
+
+export async function apiDeleteProcessingActivity(
+  dispatch: Dispatch,
+  id: string
+): Promise<void> {
+  const response = await fetch(`${API_BASE}/processing-activities/${id}`, {
+    method: 'DELETE',
+  })
+
+  if (!response.ok) {
+    const error = await response.json()
+    throw new Error(error.error || 'Fehler beim Loeschen der Verarbeitungstaetigkeit')
+  }
+
+  dispatch({ type: 'DELETE_PROCESSING_ACTIVITY', payload: id })
+}
+
+export async function apiDuplicateProcessingActivity(
+  dispatch: Dispatch,
+  state: VendorComplianceState,
+  id: string
+): Promise<ProcessingActivity> {
+  const original = state.processingActivities.find((a) => a.id === id)
+  if (!original) {
+    throw new Error('Verarbeitungstaetigkeit nicht gefunden')
+  }
+
+  const { id: _id, vvtId: _vvtId, createdAt: _createdAt, updatedAt: _updatedAt, tenantId: _tenantId, ...rest } = original
+
+  const newActivity = await apiCreateProcessingActivity(dispatch, {
+    ...rest,
+    vvtId: '', // Will be generated by backend
+    name: {
+      de: `${original.name.de} (Kopie)`,
+      en: `${original.name.en} (Copy)`,
+    },
+    status: 'DRAFT',
+  })
+
+  return newActivity
+}
+
+// ==========================================
+// VENDOR ACTIONS
+// ==========================================
+
+export async function apiCreateVendor(
+  dispatch: Dispatch,
+  data: Omit<Vendor, 'id' | 'tenantId' | 'createdAt' | 'updatedAt'>
+): Promise<Vendor> {
+  const response = await fetch(`${API_BASE}/vendors`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data),
+  })
+
+  if (!response.ok) {
+    const error = await response.json()
+    throw new Error(error.error || 'Fehler beim Erstellen des Vendors')
+  }
+
+  const result = await response.json()
+  const vendor = result.data
+
+  dispatch({ type: 'ADD_VENDOR', payload: vendor })
+
+  return vendor
+}
+
+export async function apiUpdateVendor(
+  dispatch: Dispatch,
+  id: string,
+  data: Partial<Vendor>
+): Promise<void> {
+  const response = await fetch(`${API_BASE}/vendors/${id}`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data),
+  })
+
+  if (!response.ok) {
+    const error = await response.json()
+    throw new Error(error.error || 'Fehler beim Aktualisieren des Vendors')
+  }
+
+  dispatch({ type: 'UPDATE_VENDOR', payload: { id, data } })
+}
+
+export async function apiDeleteVendor(
+  dispatch: Dispatch,
+  id: string
+): Promise<void> {
+  const response = await fetch(`${API_BASE}/vendors/${id}`, {
+    method: 'DELETE',
+  })
+
+  if (!response.ok) {
+    const error = await response.json()
+    throw new Error(error.error || 'Fehler beim Loeschen des Vendors')
+  }
+
+  dispatch({ type: 'DELETE_VENDOR', payload: id })
+}
+
+// ==========================================
+// CONTRACT ACTIONS
+// ==========================================
+
+export async function apiUploadContract(
+  dispatch: Dispatch,
+  state: VendorComplianceState,
+  vendorId: string,
+  file: File,
+  metadata: Partial<ContractDocument>
+): Promise<ContractDocument> {
+  const formData = new FormData()
+  formData.append('file', file)
+  formData.append('vendorId', vendorId)
+  formData.append('metadata', JSON.stringify(metadata))
+
+  const response = await fetch(`${API_BASE}/contracts`, {
+    method: 'POST',
+    body: formData,
+  })
+
+  if (!response.ok) {
+    const error = await response.json()
+    throw new Error(error.error || 'Fehler beim Hochladen des Vertrags')
+  }
+
+  const result = await response.json()
+  const contract = result.data
+
+  dispatch({ type: 'ADD_CONTRACT', payload: contract })
+
+  // Update vendor's contracts list
+  const vendor = state.vendors.find((v) => v.id === vendorId)
+  if (vendor) {
+    dispatch({
+      type: 'UPDATE_VENDOR',
+      payload: {
+        id: vendorId,
+        data: { contracts: [...vendor.contracts, contract.id] },
+      },
+    })
+  }
+
+  return contract
+}
+
+export async function apiUpdateContract(
+  dispatch: Dispatch,
+  id: string,
+  data: Partial<ContractDocument>
+): Promise<void> {
+  const response = await fetch(`${API_BASE}/contracts/${id}`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data),
+  })
+
+  if (!response.ok) {
+    const error = await response.json()
+    throw new Error(error.error || 'Fehler beim Aktualisieren des Vertrags')
+  }
+
+  dispatch({ type: 'UPDATE_CONTRACT', payload: { id, data } })
+}
+
+export async function apiDeleteContract(
+  dispatch: Dispatch,
+  state: VendorComplianceState,
+  id: string
+): Promise<void> {
+  const contract = state.contracts.find((c) => c.id === id)
+
+  const response = await fetch(`${API_BASE}/contracts/${id}`, {
+    method: 'DELETE',
+  })
+
+  if (!response.ok) {
+    const error = await response.json()
+    throw new Error(error.error || 'Fehler beim Loeschen des Vertrags')
+  }
+
+  dispatch({ type: 'DELETE_CONTRACT', payload: id })
+
+  // Update vendor's contracts list
+  if (contract) {
+    const vendor = state.vendors.find((v) => v.id === contract.vendorId)
+    if (vendor) {
+      dispatch({
+        type: 'UPDATE_VENDOR',
+        payload: {
+          id: vendor.id,
+          data: { contracts: vendor.contracts.filter((cId) => cId !== id) },
+        },
+      })
+    }
+  }
+}
+
+export async function apiStartContractReview(
+  dispatch: Dispatch,
+  contractId: string
+): Promise<void> {
+  dispatch({
+    type: 'UPDATE_CONTRACT',
+    payload: { id: contractId, data: { reviewStatus: 'IN_PROGRESS' } },
+  })
+
+  const response = await fetch(`${API_BASE}/contracts/${contractId}/review`, {
+    method: 'POST',
+  })
+
+  if (!response.ok) {
+    dispatch({
+      type: 'UPDATE_CONTRACT',
+      payload: { id: contractId, data: { reviewStatus: 'FAILED' } },
+    })
+    const error = await response.json()
+    throw new Error(error.error || 'Fehler beim Starten der Vertragspruefung')
+  }
+
+  const result = await response.json()
+
+  // Update contract with review results
+  dispatch({
+    type: 'UPDATE_CONTRACT',
+    payload: {
+      id: contractId,
+      data: {
+        reviewStatus: 'COMPLETED',
+        reviewCompletedAt: new Date(),
+        complianceScore: result.data.complianceScore,
+      },
+    },
+  })
+
+  // Add findings
+  if (result.data.findings && result.data.findings.length > 0) {
+    dispatch({ type: 'ADD_FINDINGS', payload: result.data.findings })
+  }
+}
+
+// ==========================================
+// FINDINGS ACTIONS
+// ==========================================
+
+export async function apiUpdateFinding(
+  dispatch: Dispatch,
+  id: string,
+  data: Partial<Finding>
+): Promise<void> {
+  const response = await fetch(`${API_BASE}/findings/${id}`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data),
+  })
+
+  if (!response.ok) {
+    const error = await response.json()
+    throw new Error(error.error || 'Fehler beim Aktualisieren des Findings')
+  }
+
+  dispatch({ type: 'UPDATE_FINDING', payload: { id, data } })
+}
+
+export async function apiResolveFinding(
+  dispatch: Dispatch,
+  id: string,
+  resolution: string
+): Promise<void> {
+  await apiUpdateFinding(dispatch, id, {
+    status: 'RESOLVED',
+    resolution,
+    resolvedAt: new Date(),
+  })
+}
+
+// ==========================================
+// CONTROL ACTIONS
+// ==========================================
+
+export async function apiUpdateControlInstance(
+  dispatch: Dispatch,
+  id: string,
+  data: Partial<ControlInstance>
+): Promise<void> {
+  const response = await fetch(`${API_BASE}/control-instances/${id}`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data),
+  })
+
+  if (!response.ok) {
+    const error = await response.json()
+    throw new Error(error.error || 'Fehler beim Aktualisieren des Control-Status')
+  }
+
+  dispatch({ type: 'UPDATE_CONTROL_INSTANCE', payload: { id, data } })
+}
+
+// ==========================================
+// EXPORT ACTIONS
+// ==========================================
+
+export async function apiExportVVT(
+  format: ExportFormat,
+  activityIds?: string[]
+): Promise<string> {
+  const params = new URLSearchParams({ format })
+  if (activityIds && activityIds.length > 0) {
+    params.append('activityIds', activityIds.join(','))
+  }
+
+  const response = await fetch(`${API_BASE}/export/vvt?${params}`)
+
+  if (!response.ok) {
+    const error = await response.json()
+    throw new Error(error.error || 'Fehler beim Exportieren des VVT')
+  }
+
+  const blob = await response.blob()
+  const url = URL.createObjectURL(blob)
+
+  return url
+}
+
+export async function apiExportVendorAuditPack(
+  vendorId: string,
+  format: ExportFormat
+): Promise<string> {
+  const params = new URLSearchParams({ format, vendorId })
+
+  const response = await fetch(`${API_BASE}/export/vendor-audit?${params}`)
+
+  if (!response.ok) {
+    const error = await response.json()
+    throw new Error(error.error || 'Fehler beim Exportieren des Vendor Audit Packs')
+  }
+
+  const blob = await response.blob()
+  const url = URL.createObjectURL(blob)
+
+  return url
+}
+
+export async function apiExportRoPA(
+  format: ExportFormat
+): Promise<string> {
+  const params = new URLSearchParams({ format })
+
+  const response = await fetch(`${API_BASE}/export/ropa?${params}`)
+
+  if (!response.ok) {
+    const error = await response.json()
+    throw new Error(error.error || 'Fehler beim Exportieren des RoPA')
+  }
+
+  const blob = await response.blob()
+  const url = URL.createObjectURL(blob)
+
+  return url
+}
diff --git a/admin-lehrer/lib/sdk/vendor-compliance/context-reducer.ts b/admin-lehrer/lib/sdk/vendor-compliance/context-reducer.ts
new file mode 100644
index 0000000..16054c0
--- /dev/null
+++ b/admin-lehrer/lib/sdk/vendor-compliance/context-reducer.ts
@@ -0,0 +1,334 @@
+import type {
+  VendorComplianceState,
+  VendorComplianceAction,
+  VendorStatistics,
+  ComplianceStatistics,
+  RiskOverview,
+  VendorStatus,
+  VendorRole,
+  RiskLevel,
+  FindingType,
+  FindingSeverity,
+} from './types'
+
+import { getRiskLevelFromScore } from './types'
+
+// ==========================================
+// INITIAL STATE
+// ==========================================
+
+export const initialState: VendorComplianceState = {
+  processingActivities: [],
+  vendors: [],
+  contracts: [],
+  findings: [],
+  controls: [],
+  controlInstances: [],
+  riskAssessments: [],
+  isLoading: false,
+  error: null,
+  selectedVendorId: null,
+  selectedActivityId: null,
+  activeTab: 'overview',
+  lastModified: null,
+}
+
+// ==========================================
+// REDUCER
+// ==========================================
+
+export function vendorComplianceReducer(
+  state: VendorComplianceState,
+  action: VendorComplianceAction
+): VendorComplianceState {
+  const updateState = (updates: Partial<VendorComplianceState>): VendorComplianceState => ({
+    ...state,
+    ...updates,
+    lastModified: new Date(),
+  })
+
+  switch (action.type) {
+    // Processing Activities
+    case 'SET_PROCESSING_ACTIVITIES':
+      return updateState({ processingActivities: action.payload })
+
+    case 'ADD_PROCESSING_ACTIVITY':
+      return updateState({
+        processingActivities: [...state.processingActivities, action.payload],
+      })
+
+    case 'UPDATE_PROCESSING_ACTIVITY':
+      return updateState({
+        processingActivities: state.processingActivities.map((activity) =>
+          activity.id === action.payload.id
+            ? { ...activity, ...action.payload.data, updatedAt: new Date() }
+            : activity
+        ),
+      })
+
+    case 'DELETE_PROCESSING_ACTIVITY':
+      return updateState({
+        processingActivities: state.processingActivities.filter(
+          (activity) => activity.id !== action.payload
+        ),
+      })
+
+    // Vendors
+    case 'SET_VENDORS':
+      return updateState({ vendors: action.payload })
+
+    case 'ADD_VENDOR':
+      return updateState({
+        vendors: [...state.vendors, action.payload],
+      })
+
+    case 'UPDATE_VENDOR':
+      return updateState({
+        vendors: state.vendors.map((vendor) =>
+          vendor.id === action.payload.id
+            ? { ...vendor, ...action.payload.data, updatedAt: new Date() }
+            : vendor
+        ),
+      })
+
+    case 'DELETE_VENDOR':
+      return updateState({
+        vendors: state.vendors.filter((vendor) => vendor.id !== action.payload),
+      })
+
+    // Contracts
+    case 'SET_CONTRACTS':
+      return updateState({ contracts: action.payload })
+
+    case 'ADD_CONTRACT':
+      return updateState({
+        contracts: [...state.contracts, action.payload],
+      })
+
+    case 'UPDATE_CONTRACT':
+      return updateState({
+        contracts: state.contracts.map((contract) =>
+          contract.id === action.payload.id
+            ? { ...contract, ...action.payload.data, updatedAt: new Date() }
+            : contract
+        ),
+      })
+
+    case 'DELETE_CONTRACT':
+      return updateState({
+        contracts: state.contracts.filter((contract) => contract.id !== action.payload),
+      })
+
+    // Findings
+    case 'SET_FINDINGS':
+      return updateState({ findings: action.payload })
+
+    case 'ADD_FINDINGS':
+      return updateState({
+        findings: [...state.findings, ...action.payload],
+      })
+
+    case 'UPDATE_FINDING':
+      return updateState({
+        findings: state.findings.map((finding) =>
+          finding.id === action.payload.id
+            ? { ...finding, ...action.payload.data, updatedAt: new Date() }
+            : finding
+        ),
+      })
+
+    // Controls
+    case 'SET_CONTROLS':
+      return updateState({ controls: action.payload })
+
+    case 'SET_CONTROL_INSTANCES':
+      return updateState({ controlInstances: action.payload })
+
+    case 'UPDATE_CONTROL_INSTANCE':
+      return updateState({
+        controlInstances: state.controlInstances.map((instance) =>
+          instance.id === action.payload.id
+            ? { ...instance, ...action.payload.data }
+            : instance
+        ),
+      })
+
+    // Risk Assessments
+    case 'SET_RISK_ASSESSMENTS':
+      return updateState({ riskAssessments: action.payload })
+
+    case 'UPDATE_RISK_ASSESSMENT':
+      return updateState({
+        riskAssessments: state.riskAssessments.map((assessment) =>
+          assessment.id === action.payload.id
+            ? { ...assessment, ...action.payload.data }
+            : assessment
+        ),
+      })
+
+    // UI State
+    case 'SET_LOADING':
+      return { ...state, isLoading: action.payload }
+
+    case 'SET_ERROR':
+      return { ...state, error: action.payload }
+
+    case 'SET_SELECTED_VENDOR':
+      return { ...state, selectedVendorId: action.payload }
+
+    case 'SET_SELECTED_ACTIVITY':
+      return { ...state, selectedActivityId: action.payload }
+
+    case 'SET_ACTIVE_TAB':
+      return { ...state, activeTab: action.payload }
+
+    default:
+      return state
+  }
+}
+
+// ==========================================
+// COMPUTED VALUES (pure functions of state)
+// ==========================================
+
+export function computeVendorStats(state: VendorComplianceState): VendorStatistics {
+  const vendors = state.vendors
+
+  const byStatus = vendors.reduce(
+    (acc, v) => {
+      acc[v.status] = (acc[v.status] || 0) + 1
+      return acc
+    },
+    {} as Record<VendorStatus, number>
+  )
+
+  const byRole = vendors.reduce(
+    (acc, v) => {
+      acc[v.role] = (acc[v.role] || 0) + 1
+      return acc
+    },
+    {} as Record<VendorRole, number>
+  )
+
+  const byRiskLevel = vendors.reduce(
+    (acc, v) => {
+      const level = getRiskLevelFromScore(v.residualRiskScore / 4) // Normalize to 1-25
+      acc[level] = (acc[level] || 0) + 1
+      return acc
+    },
+    {} as Record<RiskLevel, number>
+  )
+
+  const now = new Date()
+  const pendingReviews = vendors.filter(
+    (v) => v.nextReviewDate && new Date(v.nextReviewDate) <= now
+  ).length
+
+  const withExpiredContracts = vendors.filter((v) =>
+    state.contracts.some(
+      (c) =>
+        c.vendorId === v.id &&
+        c.expirationDate &&
+        new Date(c.expirationDate) <= now &&
+        c.status === 'ACTIVE'
+    )
+  ).length
+
+  return {
+    total: vendors.length,
+    byStatus,
+    byRole,
+    byRiskLevel,
+    pendingReviews,
+    withExpiredContracts,
+  }
+}
+
+export function computeComplianceStats(state: VendorComplianceState): ComplianceStatistics {
+  const findings = state.findings
+  const contracts = state.contracts
+  const controlInstances = state.controlInstances
+
+  const averageComplianceScore =
+    contracts.length > 0
+      ? contracts.reduce((sum, c) => sum + (c.complianceScore || 0), 0) /
+        contracts.filter((c) => c.complianceScore !== undefined).length || 0
+      : 0
+
+  const findingsByType = findings.reduce(
+    (acc, f) => {
+      acc[f.type] = (acc[f.type] || 0) + 1
+      return acc
+    },
+    {} as Record<FindingType, number>
+  )
+
+  const findingsBySeverity = findings.reduce(
+    (acc, f) => {
+      acc[f.severity] = (acc[f.severity] || 0) + 1
+      return acc
+    },
+    {} as Record<FindingSeverity, number>
+  )
+
+  const openFindings = findings.filter(
+    (f) => f.status === 'OPEN' || f.status === 'IN_PROGRESS'
+  ).length
+
+  const resolvedFindings = findings.filter(
+    (f) => f.status === 'RESOLVED' || f.status === 'FALSE_POSITIVE'
+  ).length
+
+  const passedControls = controlInstances.filter(
+    (ci) => ci.status === 'PASS'
+  ).length
+  const applicableControls = controlInstances.filter(
+    (ci) => ci.status !== 'NOT_APPLICABLE'
+  ).length
+  const controlPassRate =
+    applicableControls > 0 ? (passedControls / applicableControls) * 100 : 0
+
+  return {
+    averageComplianceScore,
+    findingsByType,
+    findingsBySeverity,
+    openFindings,
+    resolvedFindings,
+    controlPassRate,
+  }
+}
+
+export function computeRiskOverview(state: VendorComplianceState): RiskOverview {
+  const vendors = state.vendors
+  const findings = state.findings
+
+  const averageInherentRisk =
+    vendors.length > 0
+      ? vendors.reduce((sum, v) => sum + v.inherentRiskScore, 0) / vendors.length
+      : 0
+
+  const averageResidualRisk =
+    vendors.length > 0
+      ? vendors.reduce((sum, v) => sum + v.residualRiskScore, 0) / vendors.length
+      : 0
+
+  const highRiskVendors = vendors.filter(
+    (v) => v.residualRiskScore >= 60
+  ).length
+
+  const criticalFindings = findings.filter(
+    (f) => f.severity === 'CRITICAL' && f.status === 'OPEN'
+  ).length
+
+  const transfersToThirdCountries = vendors.filter((v) =>
+    v.processingLocations.some((pl) => !pl.isEU && !pl.isAdequate)
+  ).length
+
+  return {
+    averageInherentRisk,
+    averageResidualRisk,
+    highRiskVendors,
+    criticalFindings,
+    transfersToThirdCountries,
+  }
+}
diff --git a/admin-lehrer/lib/sdk/vendor-compliance/context.tsx b/admin-lehrer/lib/sdk/vendor-compliance/context.tsx
index a271ea4..885ca96 100644
--- a/admin-lehrer/lib/sdk/vendor-compliance/context.tsx
+++ b/admin-lehrer/lib/sdk/vendor-compliance/context.tsx
@@ -10,202 +10,44 @@ import React, {
   useState,
 } from 'react'
 
-import {
-  VendorComplianceState,
-  VendorComplianceAction,
+import type {
   VendorComplianceContextValue,
   ProcessingActivity,
   Vendor,
   ContractDocument,
   Finding,
-  Control,
   ControlInstance,
-  RiskAssessment,
-  VendorStatistics,
-  ComplianceStatistics,
-  RiskOverview,
   ExportFormat,
-  VendorStatus,
-  VendorRole,
-  RiskLevel,
-  FindingType,
-  FindingSeverity,
-  getRiskLevelFromScore,
 } from './types'
 
-// ==========================================
-// INITIAL STATE
-// ==========================================
+import {
+  vendorComplianceReducer,
+  initialState,
+  computeVendorStats,
+  computeComplianceStats,
+  computeRiskOverview,
+} from './context-reducer'
 
-const initialState: VendorComplianceState = {
-  processingActivities: [],
-  vendors: [],
-  contracts: [],
-  findings: [],
-  controls: [],
-  controlInstances: [],
-  riskAssessments: [],
-  isLoading: false,
-  error: null,
-  selectedVendorId: null,
-  selectedActivityId: null,
-  activeTab: 'overview',
-  lastModified: null,
-}
-
-// ==========================================
-// REDUCER
-// ==========================================
-
-function vendorComplianceReducer(
-  state: VendorComplianceState,
-  action: VendorComplianceAction
-): VendorComplianceState {
-  const updateState = (updates: Partial<VendorComplianceState>): VendorComplianceState => ({
-    ...state,
-    ...updates,
-    lastModified: new Date(),
-  })
-
-  switch (action.type) {
-    // Processing Activities
-    case 'SET_PROCESSING_ACTIVITIES':
-      return updateState({ processingActivities: action.payload })
-
-    case 'ADD_PROCESSING_ACTIVITY':
-      return updateState({
-        processingActivities: [...state.processingActivities, action.payload],
-      })
-
-    case 'UPDATE_PROCESSING_ACTIVITY':
-      return updateState({
-        processingActivities: state.processingActivities.map((activity) =>
-          activity.id === action.payload.id
-            ? { ...activity, ...action.payload.data, updatedAt: new Date() }
-            : activity
-        ),
-      })
-
-    case 'DELETE_PROCESSING_ACTIVITY':
-      return updateState({
-        processingActivities: state.processingActivities.filter(
-          (activity) => activity.id !== action.payload
-        ),
-      })
-
-    // Vendors
-    case 'SET_VENDORS':
-      return updateState({ vendors: action.payload })
-
-    case 'ADD_VENDOR':
-      return updateState({
-        vendors: [...state.vendors, action.payload],
-      })
-
-    case 'UPDATE_VENDOR':
-      return updateState({
-        vendors: state.vendors.map((vendor) =>
-          vendor.id === action.payload.id
-            ? { ...vendor, ...action.payload.data, updatedAt: new Date() }
-            : vendor
-        ),
-      })
-
-    case 'DELETE_VENDOR':
-      return updateState({
-        vendors: state.vendors.filter((vendor) => vendor.id !== action.payload),
-      })
-
-    // Contracts
-    case 'SET_CONTRACTS':
-      return updateState({ contracts: action.payload })
-
-    case 'ADD_CONTRACT':
-      return updateState({
-        contracts: [...state.contracts, action.payload],
-      })
-
-    case 'UPDATE_CONTRACT':
-      return updateState({
-        contracts: state.contracts.map((contract) =>
-          contract.id === action.payload.id
-            ? { ...contract, ...action.payload.data, updatedAt: new Date() }
-            : contract
-        ),
-      })
-
-    case 'DELETE_CONTRACT':
-      return updateState({
-        contracts: state.contracts.filter((contract) => contract.id !== action.payload),
-      })
-
-    // Findings
-    case 'SET_FINDINGS':
-      return updateState({ findings: action.payload })
-
-    case 'ADD_FINDINGS':
-      return updateState({
-        findings: [...state.findings, ...action.payload],
-      })
-
-    case 'UPDATE_FINDING':
-      return updateState({
-        findings: state.findings.map((finding) =>
-          finding.id === action.payload.id
-            ? { ...finding, ...action.payload.data, updatedAt: new Date() }
-            : finding
-        ),
-      })
-
-    // Controls
-    case 'SET_CONTROLS':
-      return updateState({ controls: action.payload })
-
-    case 'SET_CONTROL_INSTANCES':
-      return updateState({ controlInstances: action.payload })
-
-    case 'UPDATE_CONTROL_INSTANCE':
-      return updateState({
-        controlInstances: state.controlInstances.map((instance) =>
-          instance.id === action.payload.id
-            ? { ...instance, ...action.payload.data }
-            : instance
-        ),
-      })
-
-    // Risk Assessments
-    case 'SET_RISK_ASSESSMENTS':
-      return updateState({ riskAssessments: action.payload })
-
-    case 'UPDATE_RISK_ASSESSMENT':
-      return updateState({
-        riskAssessments: state.riskAssessments.map((assessment) =>
-          assessment.id === action.payload.id
-            ? { ...assessment, ...action.payload.data }
-            : assessment
-        ),
-      })
-
-    // UI State
-    case 'SET_LOADING':
-      return { ...state, isLoading: action.payload }
-
-    case 'SET_ERROR':
-      return { ...state, error: action.payload }
-
-    case 'SET_SELECTED_VENDOR':
-      return { ...state, selectedVendorId: action.payload }
-
-    case 'SET_SELECTED_ACTIVITY':
-      return { ...state, selectedActivityId: action.payload }
-
-    case 'SET_ACTIVE_TAB':
-      return { ...state, activeTab: action.payload }
-
-    default:
-      return state
-  }
-}
+import {
+  loadAllData,
+  apiCreateProcessingActivity,
+  apiUpdateProcessingActivity,
+  apiDeleteProcessingActivity,
+  apiDuplicateProcessingActivity,
+  apiCreateVendor,
+  apiUpdateVendor,
+  apiDeleteVendor,
+  apiUploadContract,
+  apiUpdateContract,
+  apiDeleteContract,
+  apiStartContractReview,
+  apiUpdateFinding,
+  apiResolveFinding,
+  apiUpdateControlInstance,
+  apiExportVVT,
+  apiExportVendorAuditPack,
+  apiExportRoPA,
+} from './context-actions'
 
 // ==========================================
 // CONTEXT
@@ -233,626 +75,150 @@ export function VendorComplianceProvider({
   // COMPUTED VALUES
   // ==========================================
 
-  const vendorStats = useMemo<VendorStatistics>(() => {
-    const vendors = state.vendors
+  const vendorStats = useMemo(
+    () => computeVendorStats(state),
+    [state.vendors, state.contracts]
+  )
 
-    const byStatus = vendors.reduce(
-      (acc, v) => {
-        acc[v.status] = (acc[v.status] || 0) + 1
-        return acc
-      },
-      {} as Record<VendorStatus, number>
-    )
+  const complianceStats = useMemo(
+    () => computeComplianceStats(state),
+    [state.findings, state.contracts, state.controlInstances]
+  )
 
-    const byRole = vendors.reduce(
-      (acc, v) => {
-        acc[v.role] = (acc[v.role] || 0) + 1
-        return acc
-      },
-      {} as Record<VendorRole, number>
-    )
-
-    const byRiskLevel = vendors.reduce(
-      (acc, v) => {
-        const level = getRiskLevelFromScore(v.residualRiskScore / 4) // Normalize to 1-25
-        acc[level] = (acc[level] || 0) + 1
-        return acc
-      },
-      {} as Record<RiskLevel, number>
-    )
-
-    const now = new Date()
-    const pendingReviews = vendors.filter(
-      (v) => v.nextReviewDate && new Date(v.nextReviewDate) <= now
-    ).length
-
-    const withExpiredContracts = vendors.filter((v) =>
-      state.contracts.some(
-        (c) =>
-          c.vendorId === v.id &&
-          c.expirationDate &&
-          new Date(c.expirationDate) <= now &&
-          c.status === 'ACTIVE'
-      )
-    ).length
-
-    return {
-      total: vendors.length,
-      byStatus,
-      byRole,
-      byRiskLevel,
-      pendingReviews,
-      withExpiredContracts,
-    }
-  }, [state.vendors, state.contracts])
-
-  const complianceStats = useMemo<ComplianceStatistics>(() => {
-    const findings = state.findings
-    const contracts = state.contracts
-    const controlInstances = state.controlInstances
-
-    const averageComplianceScore =
-      contracts.length > 0
-        ? contracts.reduce((sum, c) => sum + (c.complianceScore || 0), 0) /
-          contracts.filter((c) => c.complianceScore !== undefined).length || 0
-        : 0
-
-    const findingsByType = findings.reduce(
-      (acc, f) => {
-        acc[f.type] = (acc[f.type] || 0) + 1
-        return acc
-      },
-      {} as Record<FindingType, number>
-    )
-
-    const findingsBySeverity = findings.reduce(
-      (acc, f) => {
-        acc[f.severity] = (acc[f.severity] || 0) + 1
-        return acc
-      },
-      {} as Record<FindingSeverity, number>
-    )
-
-    const openFindings = findings.filter(
-      (f) => f.status === 'OPEN' || f.status === 'IN_PROGRESS'
-    ).length
-
-    const resolvedFindings = findings.filter(
-      (f) => f.status === 'RESOLVED' || f.status === 'FALSE_POSITIVE'
-    ).length
-
-    const passedControls = controlInstances.filter(
-      (ci) => ci.status === 'PASS'
-    ).length
-    const applicableControls = controlInstances.filter(
-      (ci) => ci.status !== 'NOT_APPLICABLE'
-    ).length
-    const controlPassRate =
-      applicableControls > 0 ? (passedControls / applicableControls) * 100 : 0
-
-    return {
-      averageComplianceScore,
-      findingsByType,
-      findingsBySeverity,
-      openFindings,
-      resolvedFindings,
-      controlPassRate,
-    }
-  }, [state.findings, state.contracts, state.controlInstances])
-
-  const riskOverview = useMemo<RiskOverview>(() => {
-    const vendors = state.vendors
-    const findings = state.findings
-
-    const averageInherentRisk =
-      vendors.length > 0
-        ? vendors.reduce((sum, v) => sum + v.inherentRiskScore, 0) / vendors.length
-        : 0
-
-    const averageResidualRisk =
-      vendors.length > 0
-        ? vendors.reduce((sum, v) => sum + v.residualRiskScore, 0) / vendors.length
-        : 0
-
-    const highRiskVendors = vendors.filter(
-      (v) => v.residualRiskScore >= 60
-    ).length
-
-    const criticalFindings = findings.filter(
-      (f) => f.severity === 'CRITICAL' && f.status === 'OPEN'
-    ).length
-
-    const transfersToThirdCountries = vendors.filter((v) =>
-      v.processingLocations.some((pl) => !pl.isEU && !pl.isAdequate)
-    ).length
-
-    return {
-      averageInherentRisk,
-      averageResidualRisk,
-      highRiskVendors,
-      criticalFindings,
-      transfersToThirdCountries,
-    }
-  }, [state.vendors, state.findings])
+  const riskOverview = useMemo(
+    () => computeRiskOverview(state),
+    [state.vendors, state.findings]
+  )
 
   // ==========================================
-  // API CALLS
+  // ACTION WRAPPERS
   // ==========================================
 
-  const apiBase = '/api/sdk/v1/vendor-compliance'
-
   const loadData = useCallback(async () => {
-    dispatch({ type: 'SET_LOADING', payload: true })
-    dispatch({ type: 'SET_ERROR', payload: null })
-
-    try {
-      const [
-        activitiesRes,
-        vendorsRes,
-        contractsRes,
-        findingsRes,
-        controlsRes,
-        controlInstancesRes,
-      ] = await Promise.all([
-        fetch(`${apiBase}/processing-activities`),
-        fetch(`${apiBase}/vendors`),
-        fetch(`${apiBase}/contracts`),
-        fetch(`${apiBase}/findings`),
-        fetch(`${apiBase}/controls`),
-        fetch(`${apiBase}/control-instances`),
-      ])
-
-      if (activitiesRes.ok) {
-        const data = await activitiesRes.json()
-        dispatch({ type: 'SET_PROCESSING_ACTIVITIES', payload: data.data || [] })
-      }
-
-      if (vendorsRes.ok) {
-        const data = await vendorsRes.json()
-        dispatch({ type: 'SET_VENDORS', payload: data.data || [] })
-      }
-
-      if (contractsRes.ok) {
-        const data = await contractsRes.json()
-        dispatch({ type: 'SET_CONTRACTS', payload: data.data || [] })
-      }
-
-      if (findingsRes.ok) {
-        const data = await findingsRes.json()
-        dispatch({ type: 'SET_FINDINGS', payload: data.data || [] })
-      }
-
-      if (controlsRes.ok) {
-        const data = await controlsRes.json()
-        dispatch({ type: 'SET_CONTROLS', payload: data.data || [] })
-      }
-
-      if (controlInstancesRes.ok) {
-        const data = await controlInstancesRes.json()
-        dispatch({ type: 'SET_CONTROL_INSTANCES', payload: data.data || [] })
-      }
-    } catch (error) {
-      console.error('Failed to load vendor compliance data:', error)
-      dispatch({
-        type: 'SET_ERROR',
-        payload: 'Fehler beim Laden der Daten',
-      })
-    } finally {
-      dispatch({ type: 'SET_LOADING', payload: false })
-    }
-  }, [apiBase])
+    await loadAllData(dispatch)
+  }, [])
 
   const refresh = useCallback(async () => {
     await loadData()
   }, [loadData])
 
-  // ==========================================
-  // PROCESSING ACTIVITIES ACTIONS
-  // ==========================================
-
   const createProcessingActivity = useCallback(
-    async (
-      data: Omit<ProcessingActivity, 'id' | 'tenantId' | 'createdAt' | 'updatedAt'>
-    ): Promise<ProcessingActivity> => {
-      const response = await fetch(`${apiBase}/processing-activities`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(data),
-      })
-
-      if (!response.ok) {
-        const error = await response.json()
-        throw new Error(error.error || 'Fehler beim Erstellen der Verarbeitungstätigkeit')
-      }
-
-      const result = await response.json()
-      const activity = result.data
-
-      dispatch({ type: 'ADD_PROCESSING_ACTIVITY', payload: activity })
-
-      return activity
+    async (data: Omit<ProcessingActivity, 'id' | 'tenantId' | 'createdAt' | 'updatedAt'>) => {
+      return apiCreateProcessingActivity(dispatch, data)
     },
-    [apiBase]
+    []
   )
 
   const updateProcessingActivity = useCallback(
-    async (id: string, data: Partial<ProcessingActivity>): Promise<void> => {
-      const response = await fetch(`${apiBase}/processing-activities/${id}`, {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(data),
-      })
-
-      if (!response.ok) {
-        const error = await response.json()
-        throw new Error(error.error || 'Fehler beim Aktualisieren der Verarbeitungstätigkeit')
-      }
-
-      dispatch({ type: 'UPDATE_PROCESSING_ACTIVITY', payload: { id, data } })
+    async (id: string, data: Partial<ProcessingActivity>) => {
+      await apiUpdateProcessingActivity(dispatch, id, data)
     },
-    [apiBase]
+    []
   )
 
   const deleteProcessingActivity = useCallback(
-    async (id: string): Promise<void> => {
-      const response = await fetch(`${apiBase}/processing-activities/${id}`, {
-        method: 'DELETE',
-      })
-
-      if (!response.ok) {
-        const error = await response.json()
-        throw new Error(error.error || 'Fehler beim Löschen der Verarbeitungstätigkeit')
-      }
-
-      dispatch({ type: 'DELETE_PROCESSING_ACTIVITY', payload: id })
+    async (id: string) => {
+      await apiDeleteProcessingActivity(dispatch, id)
     },
-    [apiBase]
+    []
   )
 
   const duplicateProcessingActivity = useCallback(
-    async (id: string): Promise<ProcessingActivity> => {
-      const original = state.processingActivities.find((a) => a.id === id)
-      if (!original) {
-        throw new Error('Verarbeitungstätigkeit nicht gefunden')
-      }
-
-      const { id: _id, vvtId: _vvtId, createdAt: _createdAt, updatedAt: _updatedAt, tenantId: _tenantId, ...rest } = original
-
-      const newActivity = await createProcessingActivity({
-        ...rest,
-        vvtId: '', // Will be generated by backend
-        name: {
-          de: `${original.name.de} (Kopie)`,
-          en: `${original.name.en} (Copy)`,
-        },
-        status: 'DRAFT',
-      })
-
-      return newActivity
+    async (id: string) => {
+      return apiDuplicateProcessingActivity(dispatch, state, id)
     },
-    [state.processingActivities, createProcessingActivity]
+    [state]
   )
 
-  // ==========================================
-  // VENDOR ACTIONS
-  // ==========================================
-
   const createVendor = useCallback(
-    async (
-      data: Omit<Vendor, 'id' | 'tenantId' | 'createdAt' | 'updatedAt'>
-    ): Promise<Vendor> => {
-      const response = await fetch(`${apiBase}/vendors`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(data),
-      })
-
-      if (!response.ok) {
-        const error = await response.json()
-        throw new Error(error.error || 'Fehler beim Erstellen des Vendors')
-      }
-
-      const result = await response.json()
-      const vendor = result.data
-
-      dispatch({ type: 'ADD_VENDOR', payload: vendor })
-
-      return vendor
+    async (data: Omit<Vendor, 'id' | 'tenantId' | 'createdAt' | 'updatedAt'>) => {
+      return apiCreateVendor(dispatch, data)
     },
-    [apiBase]
+    []
   )
 
   const updateVendor = useCallback(
-    async (id: string, data: Partial<Vendor>): Promise<void> => {
-      const response = await fetch(`${apiBase}/vendors/${id}`, {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(data),
-      })
-
-      if (!response.ok) {
-        const error = await response.json()
-        throw new Error(error.error || 'Fehler beim Aktualisieren des Vendors')
-      }
-
-      dispatch({ type: 'UPDATE_VENDOR', payload: { id, data } })
+    async (id: string, data: Partial<Vendor>) => {
+      await apiUpdateVendor(dispatch, id, data)
     },
-    [apiBase]
+    []
   )
 
   const deleteVendor = useCallback(
-    async (id: string): Promise<void> => {
-      const response = await fetch(`${apiBase}/vendors/${id}`, {
-        method: 'DELETE',
-      })
-
-      if (!response.ok) {
-        const error = await response.json()
-        throw new Error(error.error || 'Fehler beim Löschen des Vendors')
-      }
-
-      dispatch({ type: 'DELETE_VENDOR', payload: id })
+    async (id: string) => {
+      await apiDeleteVendor(dispatch, id)
     },
-    [apiBase]
+    []
   )
 
-  // ==========================================
-  // CONTRACT ACTIONS
-  // ==========================================
-
   const uploadContract = useCallback(
-    async (
-      vendorId: string,
-      file: File,
-      metadata: Partial<ContractDocument>
-    ): Promise<ContractDocument> => {
-      const formData = new FormData()
-      formData.append('file', file)
-      formData.append('vendorId', vendorId)
-      formData.append('metadata', JSON.stringify(metadata))
-
-      const response = await fetch(`${apiBase}/contracts`, {
-        method: 'POST',
-        body: formData,
-      })
-
-      if (!response.ok) {
-        const error = await response.json()
-        throw new Error(error.error || 'Fehler beim Hochladen des Vertrags')
-      }
-
-      const result = await response.json()
-      const contract = result.data
-
-      dispatch({ type: 'ADD_CONTRACT', payload: contract })
-
-      // Update vendor's contracts list
-      const vendor = state.vendors.find((v) => v.id === vendorId)
-      if (vendor) {
-        dispatch({
-          type: 'UPDATE_VENDOR',
-          payload: {
-            id: vendorId,
-            data: { contracts: [...vendor.contracts, contract.id] },
-          },
-        })
-      }
-
-      return contract
+    async (vendorId: string, file: File, metadata: Partial<ContractDocument>) => {
+      return apiUploadContract(dispatch, state, vendorId, file, metadata)
     },
-    [apiBase, state.vendors]
+    [state]
   )
 
   const updateContract = useCallback(
-    async (id: string, data: Partial<ContractDocument>): Promise<void> => {
-      const response = await fetch(`${apiBase}/contracts/${id}`, {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(data),
-      })
-
-      if (!response.ok) {
-        const error = await response.json()
-        throw new Error(error.error || 'Fehler beim Aktualisieren des Vertrags')
-      }
-
-      dispatch({ type: 'UPDATE_CONTRACT', payload: { id, data } })
+    async (id: string, data: Partial<ContractDocument>) => {
+      await apiUpdateContract(dispatch, id, data)
     },
-    [apiBase]
+    []
   )
 
   const deleteContract = useCallback(
-    async (id: string): Promise<void> => {
-      const contract = state.contracts.find((c) => c.id === id)
-
-      const response = await fetch(`${apiBase}/contracts/${id}`, {
-        method: 'DELETE',
-      })
-
-      if (!response.ok) {
-        const error = await response.json()
-        throw new Error(error.error || 'Fehler beim Löschen des Vertrags')
-      }
-
-      dispatch({ type: 'DELETE_CONTRACT', payload: id })
-
-      // Update vendor's contracts list
-      if (contract) {
-        const vendor = state.vendors.find((v) => v.id === contract.vendorId)
-        if (vendor) {
-          dispatch({
-            type: 'UPDATE_VENDOR',
-            payload: {
-              id: vendor.id,
-              data: { contracts: vendor.contracts.filter((cId) => cId !== id) },
-            },
-          })
-        }
-      }
+    async (id: string) => {
+      await apiDeleteContract(dispatch, state, id)
     },
-    [apiBase, state.contracts, state.vendors]
+    [state]
   )
 
   const startContractReview = useCallback(
-    async (contractId: string): Promise<void> => {
-      dispatch({
-        type: 'UPDATE_CONTRACT',
-        payload: { id: contractId, data: { reviewStatus: 'IN_PROGRESS' } },
-      })
-
-      const response = await fetch(`${apiBase}/contracts/${contractId}/review`, {
-        method: 'POST',
-      })
-
-      if (!response.ok) {
-        dispatch({
-          type: 'UPDATE_CONTRACT',
-          payload: { id: contractId, data: { reviewStatus: 'FAILED' } },
-        })
-        const error = await response.json()
-        throw new Error(error.error || 'Fehler beim Starten der Vertragsprüfung')
-      }
-
-      const result = await response.json()
-
-      // Update contract with review results
-      dispatch({
-        type: 'UPDATE_CONTRACT',
-        payload: {
-          id: contractId,
-          data: {
-            reviewStatus: 'COMPLETED',
-            reviewCompletedAt: new Date(),
-            complianceScore: result.data.complianceScore,
-          },
-        },
-      })
-
-      // Add findings
-      if (result.data.findings && result.data.findings.length > 0) {
-        dispatch({ type: 'ADD_FINDINGS', payload: result.data.findings })
-      }
+    async (contractId: string) => {
+      await apiStartContractReview(dispatch, contractId)
     },
-    [apiBase]
+    []
   )
 
-  // ==========================================
-  // FINDINGS ACTIONS
-  // ==========================================
-
   const updateFinding = useCallback(
-    async (id: string, data: Partial<Finding>): Promise<void> => {
-      const response = await fetch(`${apiBase}/findings/${id}`, {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(data),
-      })
-
-      if (!response.ok) {
-        const error = await response.json()
-        throw new Error(error.error || 'Fehler beim Aktualisieren des Findings')
-      }
-
-      dispatch({ type: 'UPDATE_FINDING', payload: { id, data } })
+    async (id: string, data: Partial<Finding>) => {
+      await apiUpdateFinding(dispatch, id, data)
     },
-    [apiBase]
+    []
   )
 
   const resolveFinding = useCallback(
-    async (id: string, resolution: string): Promise<void> => {
-      await updateFinding(id, {
-        status: 'RESOLVED',
-        resolution,
-        resolvedAt: new Date(),
-      })
+    async (id: string, resolution: string) => {
+      await apiResolveFinding(dispatch, id, resolution)
     },
-    [updateFinding]
+    []
   )
 
-  // ==========================================
-  // CONTROL ACTIONS
-  // ==========================================
-
   const updateControlInstance = useCallback(
-    async (id: string, data: Partial<ControlInstance>): Promise<void> => {
-      const response = await fetch(`${apiBase}/control-instances/${id}`, {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(data),
-      })
-
-      if (!response.ok) {
-        const error = await response.json()
-        throw new Error(error.error || 'Fehler beim Aktualisieren des Control-Status')
-      }
-
-      dispatch({ type: 'UPDATE_CONTROL_INSTANCE', payload: { id, data } })
+    async (id: string, data: Partial<ControlInstance>) => {
+      await apiUpdateControlInstance(dispatch, id, data)
     },
-    [apiBase]
+    []
   )
 
-  // ==========================================
-  // EXPORT ACTIONS
-  // ==========================================
-
   const exportVVT = useCallback(
-    async (format: ExportFormat, activityIds?: string[]): Promise<string> => {
-      const params = new URLSearchParams({ format })
-      if (activityIds && activityIds.length > 0) {
-        params.append('activityIds', activityIds.join(','))
-      }
-
-      const response = await fetch(`${apiBase}/export/vvt?${params}`)
-
-      if (!response.ok) {
-        const error = await response.json()
-        throw new Error(error.error || 'Fehler beim Exportieren des VVT')
-      }
-
-      const blob = await response.blob()
-      const url = URL.createObjectURL(blob)
-
-      return url
+    async (format: ExportFormat, activityIds?: string[]) => {
+      return apiExportVVT(format, activityIds)
     },
-    [apiBase]
+    []
   )
 
   const exportVendorAuditPack = useCallback(
-    async (vendorId: string, format: ExportFormat): Promise<string> => {
-      const params = new URLSearchParams({ format, vendorId })
-
-      const response = await fetch(`${apiBase}/export/vendor-audit?${params}`)
-
-      if (!response.ok) {
-        const error = await response.json()
-        throw new Error(error.error || 'Fehler beim Exportieren des Vendor Audit Packs')
-      }
-
-      const blob = await response.blob()
-      const url = URL.createObjectURL(blob)
-
-      return url
+    async (vendorId: string, format: ExportFormat) => {
+      return apiExportVendorAuditPack(vendorId, format)
     },
-    [apiBase]
+    []
   )
 
   const exportRoPA = useCallback(
-    async (format: ExportFormat): Promise<string> => {
-      const params = new URLSearchParams({ format })
-
-      const response = await fetch(`${apiBase}/export/ropa?${params}`)
-
-      if (!response.ok) {
-        const error = await response.json()
-        throw new Error(error.error || 'Fehler beim Exportieren des RoPA')
-      }
-
-      const blob = await response.blob()
-      const url = URL.createObjectURL(blob)
-
-      return url
+    async (format: ExportFormat) => {
+      return apiExportRoPA(format)
     },
-    [apiBase]
+    []
   )
 
   // ==========================================
diff --git a/admin-lehrer/lib/sdk/vendor-compliance/risk/controls-all.ts b/admin-lehrer/lib/sdk/vendor-compliance/risk/controls-all.ts
new file mode 100644
index 0000000..a371f06
--- /dev/null
+++ b/admin-lehrer/lib/sdk/vendor-compliance/risk/controls-all.ts
@@ -0,0 +1,37 @@
+/**
+ * Controls Library - Merged Array
+ *
+ * Assembles all domain-specific control arrays into the single CONTROLS_LIBRARY.
+ * This file exists to avoid circular imports between the barrel and helpers.
+ */
+
+import { Control } from '../types'
+
+import {
+  TRANSFER_CONTROLS,
+  AUDIT_CONTROLS,
+  DELETION_CONTROLS,
+  INCIDENT_CONTROLS,
+} from './controls-data-compliance'
+
+import {
+  SUBPROCESSOR_CONTROLS,
+  TOM_CONTROLS,
+  CONTRACT_CONTROLS,
+  DATA_SUBJECT_CONTROLS,
+  SECURITY_CONTROLS,
+  GOVERNANCE_CONTROLS,
+} from './controls-data-operations'
+
+export const CONTROLS_LIBRARY: Control[] = [
+  ...TRANSFER_CONTROLS,
+  ...AUDIT_CONTROLS,
+  ...DELETION_CONTROLS,
+  ...INCIDENT_CONTROLS,
+  ...SUBPROCESSOR_CONTROLS,
+  ...TOM_CONTROLS,
+  ...CONTRACT_CONTROLS,
+  ...DATA_SUBJECT_CONTROLS,
+  ...SECURITY_CONTROLS,
+  ...GOVERNANCE_CONTROLS,
+]
diff --git a/admin-lehrer/lib/sdk/vendor-compliance/risk/controls-data-compliance.ts b/admin-lehrer/lib/sdk/vendor-compliance/risk/controls-data-compliance.ts
new file mode 100644
index 0000000..ea43da7
--- /dev/null
+++ b/admin-lehrer/lib/sdk/vendor-compliance/risk/controls-data-compliance.ts
@@ -0,0 +1,377 @@
+/**
+ * Control Definitions - Compliance Domains
+ *
+ * Controls for: TRANSFER, AUDIT, DELETION, INCIDENT
+ */
+
+import { Control } from '../types'
+
+// ==========================================
+// TRANSFER - Drittlandtransfer Controls
+// ==========================================
+
+export const TRANSFER_CONTROLS: Control[] = [
+  {
+    id: 'VND-TRF-01',
+    domain: 'TRANSFER',
+    title: {
+      de: 'Drittlandtransfer nur mit Rechtsgrundlage',
+      en: 'Third country transfer with legal basis',
+    },
+    description: {
+      de: 'Drittlandtransfers erfolgen nur auf Basis von SCC, BCR oder Angemessenheitsbeschluss',
+      en: 'Third country transfers only based on SCC, BCR or adequacy decision',
+    },
+    passCriteria: {
+      de: 'SCC oder BCR vertraglich vereinbart ODER Angemessenheitsbeschluss vorhanden',
+      en: 'SCC or BCR contractually agreed OR adequacy decision exists',
+    },
+    requirements: ['Art. 44-49 DSGVO', 'ISO 27001 A.15.1.2'],
+    isRequired: true,
+    defaultFrequency: 'ANNUAL',
+  },
+  {
+    id: 'VND-TRF-02',
+    domain: 'TRANSFER',
+    title: {
+      de: 'Aktuelle Standardvertragsklauseln',
+      en: 'Current Standard Contractual Clauses',
+    },
+    description: {
+      de: 'Bei SCC-Nutzung: Verwendung der aktuellen EU-Kommission-Klauseln (2021)',
+      en: 'When using SCC: Current EU Commission clauses (2021) are used',
+    },
+    passCriteria: {
+      de: 'SCC 2021 (Durchführungsbeschluss (EU) 2021/914) verwendet',
+      en: 'SCC 2021 (Implementing Decision (EU) 2021/914) used',
+    },
+    requirements: ['Art. 46 Abs. 2 lit. c DSGVO'],
+    isRequired: true,
+    defaultFrequency: 'ANNUAL',
+  },
+  {
+    id: 'VND-TRF-03',
+    domain: 'TRANSFER',
+    title: {
+      de: 'Transfer Impact Assessment (TIA)',
+      en: 'Transfer Impact Assessment (TIA)',
+    },
+    description: {
+      de: 'Bei Transfers in Drittländer ohne Angemessenheitsbeschluss ist TIA durchzuführen',
+      en: 'TIA required for transfers to third countries without adequacy decision',
+    },
+    passCriteria: {
+      de: 'TIA dokumentiert und bewertet Risiken als akzeptabel',
+      en: 'TIA documented and risks assessed as acceptable',
+    },
+    requirements: ['Schrems II Urteil', 'EDSA Empfehlungen 01/2020'],
+    isRequired: true,
+    defaultFrequency: 'ANNUAL',
+  },
+  {
+    id: 'VND-TRF-04',
+    domain: 'TRANSFER',
+    title: {
+      de: 'Zusätzliche Schutzmaßnahmen',
+      en: 'Supplementary Measures',
+    },
+    description: {
+      de: 'Bei Bedarf sind zusätzliche technische/organisatorische Maßnahmen implementiert',
+      en: 'Supplementary technical/organizational measures implemented where needed',
+    },
+    passCriteria: {
+      de: 'Ergänzende Maßnahmen dokumentiert (Verschlüsselung, Pseudonymisierung, etc.)',
+      en: 'Supplementary measures documented (encryption, pseudonymization, etc.)',
+    },
+    requirements: ['EDSA Empfehlungen 01/2020'],
+    isRequired: false,
+    defaultFrequency: 'ANNUAL',
+  },
+  {
+    id: 'VND-TRF-05',
+    domain: 'TRANSFER',
+    title: {
+      de: 'Überwachung Angemessenheitsbeschlüsse',
+      en: 'Monitoring Adequacy Decisions',
+    },
+    description: {
+      de: 'Änderungen bei Angemessenheitsbeschlüssen werden überwacht',
+      en: 'Changes to adequacy decisions are monitored',
+    },
+    passCriteria: {
+      de: 'Prozess zur Überwachung und Reaktion auf Änderungen etabliert',
+      en: 'Process for monitoring and responding to changes established',
+    },
+    requirements: ['Art. 45 DSGVO'],
+    isRequired: false,
+    defaultFrequency: 'QUARTERLY',
+  },
+]
+
+// ==========================================
+// AUDIT - Auditrechte Controls
+// ==========================================
+
+export const AUDIT_CONTROLS: Control[] = [
+  {
+    id: 'VND-AUD-01',
+    domain: 'AUDIT',
+    title: {
+      de: 'Auditrecht vertraglich vereinbart',
+      en: 'Audit right contractually agreed',
+    },
+    description: {
+      de: 'Vertrag enthält wirksames Auditrecht ohne unangemessene Einschränkungen',
+      en: 'Contract contains effective audit right without unreasonable restrictions',
+    },
+    passCriteria: {
+      de: 'Auditrecht im AVV enthalten, max. 30 Tage Vorlaufzeit, keine Ausschlussklausel',
+      en: 'Audit right in DPA, max 30 days notice, no exclusion clause',
+    },
+    requirements: ['Art. 28 Abs. 3 lit. h DSGVO'],
+    isRequired: true,
+    defaultFrequency: 'ANNUAL',
+  },
+  {
+    id: 'VND-AUD-02',
+    domain: 'AUDIT',
+    title: {
+      de: 'Vor-Ort-Inspektionen möglich',
+      en: 'On-site inspections possible',
+    },
+    description: {
+      de: 'Vertrag erlaubt Vor-Ort-Inspektionen bei dem Auftragsverarbeiter',
+      en: 'Contract allows on-site inspections at the processor',
+    },
+    passCriteria: {
+      de: 'Vor-Ort-Audit explizit erlaubt, Zugang zu relevanten Bereichen',
+      en: 'On-site audit explicitly allowed, access to relevant areas',
+    },
+    requirements: ['Art. 28 Abs. 3 lit. h DSGVO'],
+    isRequired: true,
+    defaultFrequency: 'ANNUAL',
+  },
+  {
+    id: 'VND-AUD-03',
+    domain: 'AUDIT',
+    title: {
+      de: 'Aktuelle Zertifizierungen',
+      en: 'Current Certifications',
+    },
+    description: {
+      de: 'Relevante Sicherheitszertifizierungen sind aktuell und gültig',
+      en: 'Relevant security certifications are current and valid',
+    },
+    passCriteria: {
+      de: 'ISO 27001, SOC 2 oder vergleichbar, nicht abgelaufen',
+      en: 'ISO 27001, SOC 2 or equivalent, not expired',
+    },
+    requirements: ['Art. 32 DSGVO', 'ISO 27001 A.15.1.1'],
+    isRequired: false,
+    defaultFrequency: 'ANNUAL',
+  },
+  {
+    id: 'VND-AUD-04',
+    domain: 'AUDIT',
+    title: {
+      de: 'Letzte Prüfung durchgeführt',
+      en: 'Last review conducted',
+    },
+    description: {
+      de: 'Vendor wurde innerhalb des Review-Zyklus geprüft',
+      en: 'Vendor was reviewed within the review cycle',
+    },
+    passCriteria: {
+      de: 'Dokumentierte Prüfung innerhalb des festgelegten Intervalls',
+      en: 'Documented review within the defined interval',
+    },
+    requirements: ['Art. 28 Abs. 3 lit. h DSGVO'],
+    isRequired: true,
+    defaultFrequency: 'ANNUAL',
+  },
+  {
+    id: 'VND-AUD-05',
+    domain: 'AUDIT',
+    title: {
+      de: 'Prüfberichte verfügbar',
+      en: 'Audit reports available',
+    },
+    description: {
+      de: 'Aktuelle Prüfberichte (SOC 2, Penetrationstest, etc.) liegen vor',
+      en: 'Current audit reports (SOC 2, penetration test, etc.) are available',
+    },
+    passCriteria: {
+      de: 'Prüfberichte nicht älter als 12 Monate',
+      en: 'Audit reports not older than 12 months',
+    },
+    requirements: ['ISO 27001 A.18.2.1'],
+    isRequired: false,
+    defaultFrequency: 'ANNUAL',
+  },
+]
+
+// ==========================================
+// DELETION - Löschung Controls
+// ==========================================
+
+export const DELETION_CONTROLS: Control[] = [
+  {
+    id: 'VND-DEL-01',
+    domain: 'DELETION',
+    title: {
+      de: 'Löschung/Rückgabe nach Vertragsende',
+      en: 'Deletion/return after contract end',
+    },
+    description: {
+      de: 'Klare Regelung zur Löschung oder Rückgabe aller Daten nach Vertragsende',
+      en: 'Clear provision for deletion or return of all data after contract end',
+    },
+    passCriteria: {
+      de: 'Löschfrist max. 30 Tage, Löschbestätigung vorgesehen',
+      en: 'Deletion within max 30 days, deletion confirmation provided',
+    },
+    requirements: ['Art. 28 Abs. 3 lit. g DSGVO'],
+    isRequired: true,
+    defaultFrequency: 'ANNUAL',
+  },
+  {
+    id: 'VND-DEL-02',
+    domain: 'DELETION',
+    title: {
+      de: 'Löschbestätigung',
+      en: 'Deletion confirmation',
+    },
+    description: {
+      de: 'Schriftliche Bestätigung der vollständigen Datenlöschung',
+      en: 'Written confirmation of complete data deletion',
+    },
+    passCriteria: {
+      de: 'Löschbestätigung vertraglich vereinbart und einforderbar',
+      en: 'Deletion confirmation contractually agreed and enforceable',
+    },
+    requirements: ['Art. 28 Abs. 3 lit. g DSGVO'],
+    isRequired: true,
+    defaultFrequency: 'ANNUAL',
+  },
+  {
+    id: 'VND-DEL-03',
+    domain: 'DELETION',
+    title: {
+      de: 'Löschung bei Unterauftragnehmern',
+      en: 'Deletion at sub-processors',
+    },
+    description: {
+      de: 'Löschpflicht erstreckt sich auf alle Unterauftragnehmer',
+      en: 'Deletion obligation extends to all sub-processors',
+    },
+    passCriteria: {
+      de: 'Weitergabe der Löschpflicht an Unterauftragnehmer vertraglich vereinbart',
+      en: 'Transfer of deletion obligation to sub-processors contractually agreed',
+    },
+    requirements: ['Art. 28 Abs. 3 lit. g, d DSGVO'],
+    isRequired: true,
+    defaultFrequency: 'ANNUAL',
+  },
+  {
+    id: 'VND-DEL-04',
+    domain: 'DELETION',
+    title: {
+      de: 'Backup-Löschung',
+      en: 'Backup deletion',
+    },
+    description: {
+      de: 'Daten werden auch aus Backups gelöscht',
+      en: 'Data is also deleted from backups',
+    },
+    passCriteria: {
+      de: 'Backup-Löschung geregelt, max. Aufbewahrungsfrist für Backups definiert',
+      en: 'Backup deletion regulated, max retention period for backups defined',
+    },
+    requirements: ['Art. 28 Abs. 3 lit. g DSGVO'],
+    isRequired: false,
+    defaultFrequency: 'ANNUAL',
+  },
+]
+
+// ==========================================
+// INCIDENT - Incident Response Controls
+// ==========================================
+
+export const INCIDENT_CONTROLS: Control[] = [
+  {
+    id: 'VND-INC-01',
+    domain: 'INCIDENT',
+    title: {
+      de: 'Meldepflicht bei Datenpannen',
+      en: 'Data breach notification obligation',
+    },
+    description: {
+      de: 'Unverzügliche Meldung von Datenschutzverletzungen',
+      en: 'Immediate notification of data protection violations',
+    },
+    passCriteria: {
+      de: 'Meldepflicht vereinbart, Frist max. 24-48h, Mindestinhalte definiert',
+      en: 'Notification obligation agreed, deadline max 24-48h, minimum content defined',
+    },
+    requirements: ['Art. 33 Abs. 2 DSGVO'],
+    isRequired: true,
+    defaultFrequency: 'ANNUAL',
+  },
+  {
+    id: 'VND-INC-02',
+    domain: 'INCIDENT',
+    title: {
+      de: 'Incident Response Plan',
+      en: 'Incident Response Plan',
+    },
+    description: {
+      de: 'Vendor hat dokumentierten Incident Response Plan',
+      en: 'Vendor has documented incident response plan',
+    },
+    passCriteria: {
+      de: 'Incident Response Plan liegt vor und wurde getestet',
+      en: 'Incident response plan exists and has been tested',
+    },
+    requirements: ['ISO 27001 A.16.1'],
+    isRequired: false,
+    defaultFrequency: 'ANNUAL',
+  },
+  {
+    id: 'VND-INC-03',
+    domain: 'INCIDENT',
+    title: {
+      de: 'Kontaktstelle für Incidents',
+      en: 'Contact point for incidents',
+    },
+    description: {
+      de: 'Definierte Kontaktstelle für Datenschutzvorfälle',
+      en: 'Defined contact point for data protection incidents',
+    },
+    passCriteria: {
+      de: 'Kontaktdaten für Incident-Meldungen bekannt und aktuell',
+      en: 'Contact details for incident reporting known and current',
+    },
+    requirements: ['Art. 33 Abs. 2 DSGVO'],
+    isRequired: true,
+    defaultFrequency: 'QUARTERLY',
+  },
+  {
+    id: 'VND-INC-04',
+    domain: 'INCIDENT',
+    title: {
+      de: 'Unterstützung bei Incident-Dokumentation',
+      en: 'Support with incident documentation',
+    },
+    description: {
+      de: 'Vendor unterstützt bei der Dokumentation von Vorfällen',
+      en: 'Vendor supports documentation of incidents',
+    },
+    passCriteria: {
+      de: 'Unterstützungspflicht bei Dokumentation vertraglich vereinbart',
+      en: 'Support obligation for documentation contractually agreed',
+    },
+    requirements: ['Art. 33 Abs. 5 DSGVO'],
+    isRequired: true,
+    defaultFrequency: 'ANNUAL',
+  },
+]
diff --git a/admin-lehrer/lib/sdk/vendor-compliance/risk/controls-data-operations.ts b/admin-lehrer/lib/sdk/vendor-compliance/risk/controls-data-operations.ts
new file mode 100644
index 0000000..c5621e1
--- /dev/null
+++ b/admin-lehrer/lib/sdk/vendor-compliance/risk/controls-data-operations.ts
@@ -0,0 +1,486 @@
+/**
+ * Control Definitions - Operations Domains
+ *
+ * Controls for: SUBPROCESSOR, TOM, CONTRACT, DATA_SUBJECT, SECURITY, GOVERNANCE
+ */
+
+import { Control } from '../types'
+
+// ==========================================
+// SUBPROCESSOR - Unterauftragnehmer Controls
+// ==========================================
+
+export const SUBPROCESSOR_CONTROLS: Control[] = [
+  {
+    id: 'VND-SUB-01',
+    domain: 'SUBPROCESSOR',
+    title: {
+      de: 'Genehmigungspflicht für Unterauftragnehmer',
+      en: 'Approval requirement for sub-processors',
+    },
+    description: {
+      de: 'Einsatz von Unterauftragnehmern nur mit Genehmigung',
+      en: 'Use of sub-processors only with approval',
+    },
+    passCriteria: {
+      de: 'Genehmigungserfordernis (spezifisch oder allgemein mit Widerspruchsrecht) vereinbart',
+      en: 'Approval requirement (specific or general with objection right) agreed',
+    },
+    requirements: ['Art. 28 Abs. 2, 4 DSGVO'],
+    isRequired: true,
+    defaultFrequency: 'ANNUAL',
+  },
+  {
+    id: 'VND-SUB-02',
+    domain: 'SUBPROCESSOR',
+    title: {
+      de: 'Aktuelle Unterauftragnehmer-Liste',
+      en: 'Current sub-processor list',
+    },
+    description: {
+      de: 'Vollständige und aktuelle Liste aller Unterauftragnehmer',
+      en: 'Complete and current list of all sub-processors',
+    },
+    passCriteria: {
+      de: 'Liste liegt vor mit Name, Sitz, Verarbeitungszweck',
+      en: 'List available with name, location, processing purpose',
+    },
+    requirements: ['Art. 28 Abs. 2 DSGVO'],
+    isRequired: true,
+    defaultFrequency: 'QUARTERLY',
+  },
+  {
+    id: 'VND-SUB-03',
+    domain: 'SUBPROCESSOR',
+    title: {
+      de: 'Informationspflicht bei Änderungen',
+      en: 'Notification obligation for changes',
+    },
+    description: {
+      de: 'Information über neue oder geänderte Unterauftragnehmer',
+      en: 'Information about new or changed sub-processors',
+    },
+    passCriteria: {
+      de: 'Vorabinformation vereinbart, ausreichende Frist für Widerspruch',
+      en: 'Advance notification agreed, sufficient time for objection',
+    },
+    requirements: ['Art. 28 Abs. 2 DSGVO'],
+    isRequired: true,
+    defaultFrequency: 'ANNUAL',
+  },
+  {
+    id: 'VND-SUB-04',
+    domain: 'SUBPROCESSOR',
+    title: {
+      de: 'Weitergabe der Datenschutzpflichten',
+      en: 'Transfer of data protection obligations',
+    },
+    description: {
+      de: 'Datenschutzpflichten werden an Unterauftragnehmer weitergegeben',
+      en: 'Data protection obligations are transferred to sub-processors',
+    },
+    passCriteria: {
+      de: 'Vertraglich vereinbart, dass Unterauftragnehmer gleichen Pflichten unterliegen',
+      en: 'Contractually agreed that sub-processors are subject to same obligations',
+    },
+    requirements: ['Art. 28 Abs. 4 DSGVO'],
+    isRequired: true,
+    defaultFrequency: 'ANNUAL',
+  },
+  {
+    id: 'VND-SUB-05',
+    domain: 'SUBPROCESSOR',
+    title: {
+      de: 'Haftung für Unterauftragnehmer',
+      en: 'Liability for sub-processors',
+    },
+    description: {
+      de: 'Klare Haftungsregelung für Unterauftragnehmer',
+      en: 'Clear liability provision for sub-processors',
+    },
+    passCriteria: {
+      de: 'Auftragsverarbeiter haftet für Unterauftragnehmer wie für eigenes Handeln',
+      en: 'Processor is liable for sub-processors as for own actions',
+    },
+    requirements: ['Art. 28 Abs. 4 DSGVO'],
+    isRequired: true,
+    defaultFrequency: 'ANNUAL',
+  },
+]
+
+// ==========================================
+// TOM - Technische/Organisatorische Maßnahmen
+// ==========================================
+
+export const TOM_CONTROLS: Control[] = [
+  {
+    id: 'VND-TOM-01',
+    domain: 'TOM',
+    title: {
+      de: 'TOM-Dokumentation vorhanden',
+      en: 'TOM documentation available',
+    },
+    description: {
+      de: 'Vollständige Dokumentation der technischen und organisatorischen Maßnahmen',
+      en: 'Complete documentation of technical and organizational measures',
+    },
+    passCriteria: {
+      de: 'TOM-Anlage vorhanden, aktuell, spezifisch für die Verarbeitung',
+      en: 'TOM annex available, current, specific to the processing',
+    },
+    requirements: ['Art. 28 Abs. 3 lit. c DSGVO', 'Art. 32 DSGVO'],
+    isRequired: true,
+    defaultFrequency: 'ANNUAL',
+  },
+  {
+    id: 'VND-TOM-02',
+    domain: 'TOM',
+    title: {
+      de: 'Verschlüsselung',
+      en: 'Encryption',
+    },
+    description: {
+      de: 'Angemessene Verschlüsselung für Daten in Transit und at Rest',
+      en: 'Appropriate encryption for data in transit and at rest',
+    },
+    passCriteria: {
+      de: 'TLS 1.2+ für Transit, AES-256 für at Rest',
+      en: 'TLS 1.2+ for transit, AES-256 for at rest',
+    },
+    requirements: ['Art. 32 Abs. 1 lit. a DSGVO'],
+    isRequired: true,
+    defaultFrequency: 'ANNUAL',
+  },
+  {
+    id: 'VND-TOM-03',
+    domain: 'TOM',
+    title: {
+      de: 'Zugriffskontrolle',
+      en: 'Access control',
+    },
+    description: {
+      de: 'Angemessene Zugriffskontrollmechanismen',
+      en: 'Appropriate access control mechanisms',
+    },
+    passCriteria: {
+      de: 'Rollenbasierte Zugriffskontrolle, Least Privilege, Logging',
+      en: 'Role-based access control, least privilege, logging',
+    },
+    requirements: ['Art. 32 Abs. 1 lit. b DSGVO', 'ISO 27001 A.9'],
+    isRequired: true,
+    defaultFrequency: 'ANNUAL',
+  },
+  {
+    id: 'VND-TOM-04',
+    domain: 'TOM',
+    title: {
+      de: 'Verfügbarkeit und Wiederherstellung',
+      en: 'Availability and recovery',
+    },
+    description: {
+      de: 'Maßnahmen zur Sicherstellung der Verfügbarkeit und Wiederherstellung',
+      en: 'Measures to ensure availability and recovery',
+    },
+    passCriteria: {
+      de: 'Backup-Konzept, DR-Plan, RTO/RPO definiert',
+      en: 'Backup concept, DR plan, RTO/RPO defined',
+    },
+    requirements: ['Art. 32 Abs. 1 lit. b, c DSGVO'],
+    isRequired: true,
+    defaultFrequency: 'ANNUAL',
+  },
+  {
+    id: 'VND-TOM-05',
+    domain: 'TOM',
+    title: {
+      de: 'Regelmäßige TOM-Überprüfung',
+      en: 'Regular TOM review',
+    },
+    description: {
+      de: 'Regelmäßige Überprüfung und Aktualisierung der TOM',
+      en: 'Regular review and update of TOM',
+    },
+    passCriteria: {
+      de: 'TOM werden mindestens jährlich überprüft und bei Bedarf aktualisiert',
+      en: 'TOM are reviewed at least annually and updated as needed',
+    },
+    requirements: ['Art. 32 Abs. 1 lit. d DSGVO'],
+    isRequired: true,
+    defaultFrequency: 'ANNUAL',
+  },
+  {
+    id: 'VND-TOM-06',
+    domain: 'TOM',
+    title: {
+      de: 'Penetrationstest',
+      en: 'Penetration testing',
+    },
+    description: {
+      de: 'Regelmäßige Penetrationstests der relevanten Systeme',
+      en: 'Regular penetration testing of relevant systems',
+    },
+    passCriteria: {
+      de: 'Jährlicher Pentest, kritische Findings behoben',
+      en: 'Annual pentest, critical findings resolved',
+    },
+    requirements: ['ISO 27001 A.12.6.1'],
+    isRequired: false,
+    defaultFrequency: 'ANNUAL',
+  },
+]
+
+// ==========================================
+// CONTRACT - Vertragliche Grundlagen
+// ==========================================
+
+export const CONTRACT_CONTROLS: Control[] = [
+  {
+    id: 'VND-CON-01',
+    domain: 'CONTRACT',
+    title: {
+      de: 'Weisungsgebundenheit',
+      en: 'Instruction binding',
+    },
+    description: {
+      de: 'Auftragsverarbeiter ist an Weisungen gebunden',
+      en: 'Processor is bound by instructions',
+    },
+    passCriteria: {
+      de: 'Weisungsgebundenheit explizit vereinbart, Hinweispflicht bei rechtswidrigen Weisungen',
+      en: 'Instruction binding explicitly agreed, notification obligation for unlawful instructions',
+    },
+    requirements: ['Art. 28 Abs. 3 lit. a DSGVO'],
+    isRequired: true,
+    defaultFrequency: 'ANNUAL',
+  },
+  {
+    id: 'VND-CON-02',
+    domain: 'CONTRACT',
+    title: {
+      de: 'Vertraulichkeitsverpflichtung',
+      en: 'Confidentiality obligation',
+    },
+    description: {
+      de: 'Mitarbeiter sind zur Vertraulichkeit verpflichtet',
+      en: 'Employees are obligated to confidentiality',
+    },
+    passCriteria: {
+      de: 'Vertraulichkeitsverpflichtung für alle Mitarbeiter mit Datenzugriff',
+      en: 'Confidentiality obligation for all employees with data access',
+    },
+    requirements: ['Art. 28 Abs. 3 lit. b DSGVO'],
+    isRequired: true,
+    defaultFrequency: 'ANNUAL',
+  },
+  {
+    id: 'VND-CON-03',
+    domain: 'CONTRACT',
+    title: {
+      de: 'Gegenstand und Dauer der Verarbeitung',
+      en: 'Subject and duration of processing',
+    },
+    description: {
+      de: 'Klare Definition von Gegenstand und Dauer der Verarbeitung',
+      en: 'Clear definition of subject and duration of processing',
+    },
+    passCriteria: {
+      de: 'Verarbeitungsgegenstand, Dauer, Art der Daten, Betroffene definiert',
+      en: 'Processing subject, duration, type of data, data subjects defined',
+    },
+    requirements: ['Art. 28 Abs. 3 DSGVO'],
+    isRequired: true,
+    defaultFrequency: 'ANNUAL',
+  },
+  {
+    id: 'VND-CON-04',
+    domain: 'CONTRACT',
+    title: {
+      de: 'Schriftform/Textform',
+      en: 'Written/text form',
+    },
+    description: {
+      de: 'AVV in Schriftform oder elektronischem Format',
+      en: 'DPA in written or electronic format',
+    },
+    passCriteria: {
+      de: 'AVV in Schriftform oder elektronisch mit qualifizierter Signatur',
+      en: 'DPA in written form or electronically with qualified signature',
+    },
+    requirements: ['Art. 28 Abs. 9 DSGVO'],
+    isRequired: true,
+    defaultFrequency: 'ANNUAL',
+  },
+]
+
+// ==========================================
+// DATA_SUBJECT - Betroffenenrechte
+// ==========================================
+
+export const DATA_SUBJECT_CONTROLS: Control[] = [
+  {
+    id: 'VND-DSR-01',
+    domain: 'DATA_SUBJECT',
+    title: {
+      de: 'Unterstützung bei Betroffenenrechten',
+      en: 'Support for data subject rights',
+    },
+    description: {
+      de: 'Vendor unterstützt bei der Erfüllung von Betroffenenrechten',
+      en: 'Vendor supports fulfillment of data subject rights',
+    },
+    passCriteria: {
+      de: 'Unterstützungspflicht vereinbart, Prozess zur Weiterleitung definiert',
+      en: 'Support obligation agreed, process for forwarding defined',
+    },
+    requirements: ['Art. 28 Abs. 3 lit. e DSGVO'],
+    isRequired: true,
+    defaultFrequency: 'ANNUAL',
+  },
+  {
+    id: 'VND-DSR-02',
+    domain: 'DATA_SUBJECT',
+    title: {
+      de: 'Reaktionszeit für Anfragen',
+      en: 'Response time for requests',
+    },
+    description: {
+      de: 'Definierte Reaktionszeit für Betroffenenanfragen',
+      en: 'Defined response time for data subject requests',
+    },
+    passCriteria: {
+      de: 'Reaktionszeit max. 5 Werktage, um Frist von 1 Monat einhalten zu können',
+      en: 'Response time max. 5 business days to meet 1 month deadline',
+    },
+    requirements: ['Art. 12 Abs. 3 DSGVO'],
+    isRequired: true,
+    defaultFrequency: 'ANNUAL',
+  },
+]
+
+// ==========================================
+// SECURITY - Sicherheit
+// ==========================================
+
+export const SECURITY_CONTROLS: Control[] = [
+  {
+    id: 'VND-SEC-01',
+    domain: 'SECURITY',
+    title: {
+      de: 'Sicherheitsbewertung',
+      en: 'Security assessment',
+    },
+    description: {
+      de: 'Regelmäßige Sicherheitsbewertung des Vendors',
+      en: 'Regular security assessment of the vendor',
+    },
+    passCriteria: {
+      de: 'Sicherheitsfragebogen ausgefüllt, keine kritischen Lücken',
+      en: 'Security questionnaire completed, no critical gaps',
+    },
+    requirements: ['Art. 32 DSGVO', 'ISO 27001 A.15.2.1'],
+    isRequired: true,
+    defaultFrequency: 'ANNUAL',
+  },
+  {
+    id: 'VND-SEC-02',
+    domain: 'SECURITY',
+    title: {
+      de: 'Vulnerability Management',
+      en: 'Vulnerability management',
+    },
+    description: {
+      de: 'Etabliertes Vulnerability Management beim Vendor',
+      en: 'Established vulnerability management at the vendor',
+    },
+    passCriteria: {
+      de: 'Regelmäßige Schwachstellen-Scans, Patch-Management dokumentiert',
+      en: 'Regular vulnerability scans, patch management documented',
+    },
+    requirements: ['ISO 27001 A.12.6'],
+    isRequired: false,
+    defaultFrequency: 'ANNUAL',
+  },
+  {
+    id: 'VND-SEC-03',
+    domain: 'SECURITY',
+    title: {
+      de: 'Mitarbeiter-Schulung',
+      en: 'Employee training',
+    },
+    description: {
+      de: 'Datenschutz-Schulung für Mitarbeiter des Vendors',
+      en: 'Data protection training for vendor employees',
+    },
+    passCriteria: {
+      de: 'Regelmäßige Schulungen (mind. jährlich), Nachweis verfügbar',
+      en: 'Regular training (at least annually), proof available',
+    },
+    requirements: ['Art. 39 Abs. 1 lit. b DSGVO'],
+    isRequired: false,
+    defaultFrequency: 'ANNUAL',
+  },
+]
+
+// ==========================================
+// GOVERNANCE - Governance
+// ==========================================
+
+export const GOVERNANCE_CONTROLS: Control[] = [
+  {
+    id: 'VND-GOV-01',
+    domain: 'GOVERNANCE',
+    title: {
+      de: 'Datenschutzbeauftragter benannt',
+      en: 'Data protection officer appointed',
+    },
+    description: {
+      de: 'Vendor hat DSB benannt (wenn erforderlich)',
+      en: 'Vendor has appointed DPO (if required)',
+    },
+    passCriteria: {
+      de: 'DSB benannt und Kontaktdaten verfügbar',
+      en: 'DPO appointed and contact details available',
+    },
+    requirements: ['Art. 37 DSGVO'],
+    isRequired: false,
+    defaultFrequency: 'ANNUAL',
+  },
+  {
+    id: 'VND-GOV-02',
+    domain: 'GOVERNANCE',
+    title: {
+      de: 'Verzeichnis der Verarbeitungstätigkeiten',
+      en: 'Records of processing activities',
+    },
+    description: {
+      de: 'Vendor führt eigenes Verarbeitungsverzeichnis',
+      en: 'Vendor maintains own processing records',
+    },
+    passCriteria: {
+      de: 'Verzeichnis nach Art. 30 Abs. 2 DSGVO vorhanden',
+      en: 'Records according to Art. 30(2) GDPR available',
+    },
+    requirements: ['Art. 30 Abs. 2 DSGVO'],
+    isRequired: true,
+    defaultFrequency: 'ANNUAL',
+  },
+  {
+    id: 'VND-GOV-03',
+    domain: 'GOVERNANCE',
+    title: {
+      de: 'Unterstützung bei DSFA',
+      en: 'Support for DPIA',
+    },
+    description: {
+      de: 'Vendor unterstützt bei Datenschutz-Folgenabschätzung',
+      en: 'Vendor supports data protection impact assessment',
+    },
+    passCriteria: {
+      de: 'Unterstützungspflicht bei DSFA vertraglich vereinbart',
+      en: 'Support obligation for DPIA contractually agreed',
+    },
+    requirements: ['Art. 28 Abs. 3 lit. f DSGVO'],
+    isRequired: true,
+    defaultFrequency: 'ANNUAL',
+  },
+]
diff --git a/admin-lehrer/lib/sdk/vendor-compliance/risk/controls-helpers.ts b/admin-lehrer/lib/sdk/vendor-compliance/risk/controls-helpers.ts
new file mode 100644
index 0000000..63e734a
--- /dev/null
+++ b/admin-lehrer/lib/sdk/vendor-compliance/risk/controls-helpers.ts
@@ -0,0 +1,115 @@
+/**
+ * Controls Library - Helper Functions
+ *
+ * Query, filter, and analysis utilities for the controls library.
+ */
+
+import { Control, ControlDomain, ReviewFrequency, LocalizedText } from '../types'
+import { CONTROLS_LIBRARY } from './controls-all'
+
+/**
+ * Get all controls
+ */
+export function getAllControls(): Control[] {
+  return CONTROLS_LIBRARY
+}
+
+/**
+ * Get controls by domain
+ */
+export function getControlsByDomain(domain: ControlDomain): Control[] {
+  return CONTROLS_LIBRARY.filter((c) => c.domain === domain)
+}
+
+/**
+ * Get control by ID
+ */
+export function getControlById(id: string): Control | undefined {
+  return CONTROLS_LIBRARY.find((c) => c.id === id)
+}
+
+/**
+ * Get required controls
+ */
+export function getRequiredControls(): Control[] {
+  return CONTROLS_LIBRARY.filter((c) => c.isRequired)
+}
+
+/**
+ * Get controls by frequency
+ */
+export function getControlsByFrequency(frequency: ReviewFrequency): Control[] {
+  return CONTROLS_LIBRARY.filter((c) => c.defaultFrequency === frequency)
+}
+
+/**
+ * Get controls applicable to vendors
+ */
+export function getVendorControls(): Control[] {
+  return CONTROLS_LIBRARY.filter((c) =>
+    ['TRANSFER', 'AUDIT', 'DELETION', 'INCIDENT', 'SUBPROCESSOR', 'TOM', 'CONTRACT', 'DATA_SUBJECT', 'SECURITY', 'GOVERNANCE'].includes(c.domain)
+  )
+}
+
+/**
+ * Get controls applicable to processing activities
+ */
+export function getProcessingActivityControls(): Control[] {
+  return CONTROLS_LIBRARY.filter((c) =>
+    ['TOM', 'DATA_SUBJECT', 'GOVERNANCE', 'SECURITY'].includes(c.domain)
+  )
+}
+
+/**
+ * Group controls by domain
+ */
+export function getControlsGroupedByDomain(): Map<ControlDomain, Control[]> {
+  const grouped = new Map<ControlDomain, Control[]>()
+
+  for (const control of CONTROLS_LIBRARY) {
+    const existing = grouped.get(control.domain) || []
+    grouped.set(control.domain, [...existing, control])
+  }
+
+  return grouped
+}
+
+/**
+ * Get domain metadata
+ */
+export function getControlDomainMeta(domain: ControlDomain): LocalizedText {
+  const meta: Record<ControlDomain, LocalizedText> = {
+    TRANSFER: { de: 'Drittlandtransfer', en: 'Third Country Transfer' },
+    AUDIT: { de: 'Audit & Prüfung', en: 'Audit & Review' },
+    DELETION: { de: 'Löschung', en: 'Deletion' },
+    INCIDENT: { de: 'Incident Response', en: 'Incident Response' },
+    SUBPROCESSOR: { de: 'Unterauftragnehmer', en: 'Sub-Processors' },
+    TOM: { de: 'Technische/Org. Maßnahmen', en: 'Technical/Org. Measures' },
+    CONTRACT: { de: 'Vertragliche Grundlagen', en: 'Contractual Basics' },
+    DATA_SUBJECT: { de: 'Betroffenenrechte', en: 'Data Subject Rights' },
+    SECURITY: { de: 'Sicherheit', en: 'Security' },
+    GOVERNANCE: { de: 'Governance', en: 'Governance' },
+  }
+
+  return meta[domain]
+}
+
+/**
+ * Calculate control coverage
+ */
+export function calculateControlCoverage(
+  controlIds: string[],
+  domain?: ControlDomain
+): { covered: number; total: number; percentage: number } {
+  const targetControls = domain
+    ? getControlsByDomain(domain)
+    : getRequiredControls()
+
+  const covered = targetControls.filter((c) => controlIds.includes(c.id)).length
+
+  return {
+    covered,
+    total: targetControls.length,
+    percentage: targetControls.length > 0 ? Math.round((covered / targetControls.length) * 100) : 0,
+  }
+}
diff --git a/admin-lehrer/lib/sdk/vendor-compliance/risk/controls-library.ts b/admin-lehrer/lib/sdk/vendor-compliance/risk/controls-library.ts
index 70a35f5..2208962 100644
--- a/admin-lehrer/lib/sdk/vendor-compliance/risk/controls-library.ts
+++ b/admin-lehrer/lib/sdk/vendor-compliance/risk/controls-library.ts
@@ -1,943 +1,40 @@
 /**
  * Controls Library
  *
- * Standard controls for vendor and processing activity compliance
+ * Standard controls for vendor and processing activity compliance.
+ * Barrel file that re-exports the merged array, domain arrays, and helpers.
  */
 
-import { Control, ControlDomain, ReviewFrequency, LocalizedText } from '../types'
+// Merged controls array
+export { CONTROLS_LIBRARY } from './controls-all'
 
-// ==========================================
-// CONTROL DEFINITIONS
-// ==========================================
+// Domain-specific arrays
+export {
+  TRANSFER_CONTROLS,
+  AUDIT_CONTROLS,
+  DELETION_CONTROLS,
+  INCIDENT_CONTROLS,
+} from './controls-data-compliance'
 
-export const CONTROLS_LIBRARY: Control[] = [
-  // ==========================================
-  // TRANSFER - Drittlandtransfer Controls
-  // ==========================================
-  {
-    id: 'VND-TRF-01',
-    domain: 'TRANSFER',
-    title: {
-      de: 'Drittlandtransfer nur mit Rechtsgrundlage',
-      en: 'Third country transfer with legal basis',
-    },
-    description: {
-      de: 'Drittlandtransfers erfolgen nur auf Basis von SCC, BCR oder Angemessenheitsbeschluss',
-      en: 'Third country transfers only based on SCC, BCR or adequacy decision',
-    },
-    passCriteria: {
-      de: 'SCC oder BCR vertraglich vereinbart ODER Angemessenheitsbeschluss vorhanden',
-      en: 'SCC or BCR contractually agreed OR adequacy decision exists',
-    },
-    requirements: ['Art. 44-49 DSGVO', 'ISO 27001 A.15.1.2'],
-    isRequired: true,
-    defaultFrequency: 'ANNUAL',
-  },
-  {
-    id: 'VND-TRF-02',
-    domain: 'TRANSFER',
-    title: {
-      de: 'Aktuelle Standardvertragsklauseln',
-      en: 'Current Standard Contractual Clauses',
-    },
-    description: {
-      de: 'Bei SCC-Nutzung: Verwendung der aktuellen EU-Kommission-Klauseln (2021)',
-      en: 'When using SCC: Current EU Commission clauses (2021) are used',
-    },
-    passCriteria: {
-      de: 'SCC 2021 (Durchführungsbeschluss (EU) 2021/914) verwendet',
-      en: 'SCC 2021 (Implementing Decision (EU) 2021/914) used',
-    },
-    requirements: ['Art. 46 Abs. 2 lit. c DSGVO'],
-    isRequired: true,
-    defaultFrequency: 'ANNUAL',
-  },
-  {
-    id: 'VND-TRF-03',
-    domain: 'TRANSFER',
-    title: {
-      de: 'Transfer Impact Assessment (TIA)',
-      en: 'Transfer Impact Assessment (TIA)',
-    },
-    description: {
-      de: 'Bei Transfers in Drittländer ohne Angemessenheitsbeschluss ist TIA durchzuführen',
-      en: 'TIA required for transfers to third countries without adequacy decision',
-    },
-    passCriteria: {
-      de: 'TIA dokumentiert und bewertet Risiken als akzeptabel',
-      en: 'TIA documented and risks assessed as acceptable',
-    },
-    requirements: ['Schrems II Urteil', 'EDSA Empfehlungen 01/2020'],
-    isRequired: true,
-    defaultFrequency: 'ANNUAL',
-  },
-  {
-    id: 'VND-TRF-04',
-    domain: 'TRANSFER',
-    title: {
-      de: 'Zusätzliche Schutzmaßnahmen',
-      en: 'Supplementary Measures',
-    },
-    description: {
-      de: 'Bei Bedarf sind zusätzliche technische/organisatorische Maßnahmen implementiert',
-      en: 'Supplementary technical/organizational measures implemented where needed',
-    },
-    passCriteria: {
-      de: 'Ergänzende Maßnahmen dokumentiert (Verschlüsselung, Pseudonymisierung, etc.)',
-      en: 'Supplementary measures documented (encryption, pseudonymization, etc.)',
-    },
-    requirements: ['EDSA Empfehlungen 01/2020'],
-    isRequired: false,
-    defaultFrequency: 'ANNUAL',
-  },
-  {
-    id: 'VND-TRF-05',
-    domain: 'TRANSFER',
-    title: {
-      de: 'Überwachung Angemessenheitsbeschlüsse',
-      en: 'Monitoring Adequacy Decisions',
-    },
-    description: {
-      de: 'Änderungen bei Angemessenheitsbeschlüssen werden überwacht',
-      en: 'Changes to adequacy decisions are monitored',
-    },
-    passCriteria: {
-      de: 'Prozess zur Überwachung und Reaktion auf Änderungen etabliert',
-      en: 'Process for monitoring and responding to changes established',
-    },
-    requirements: ['Art. 45 DSGVO'],
-    isRequired: false,
-    defaultFrequency: 'QUARTERLY',
-  },
+export {
+  SUBPROCESSOR_CONTROLS,
+  TOM_CONTROLS,
+  CONTRACT_CONTROLS,
+  DATA_SUBJECT_CONTROLS,
+  SECURITY_CONTROLS,
+  GOVERNANCE_CONTROLS,
+} from './controls-data-operations'
 
-  // ==========================================
-  // AUDIT - Auditrechte Controls
-  // ==========================================
-  {
-    id: 'VND-AUD-01',
-    domain: 'AUDIT',
-    title: {
-      de: 'Auditrecht vertraglich vereinbart',
-      en: 'Audit right contractually agreed',
-    },
-    description: {
-      de: 'Vertrag enthält wirksames Auditrecht ohne unangemessene Einschränkungen',
-      en: 'Contract contains effective audit right without unreasonable restrictions',
-    },
-    passCriteria: {
-      de: 'Auditrecht im AVV enthalten, max. 30 Tage Vorlaufzeit, keine Ausschlussklausel',
-      en: 'Audit right in DPA, max 30 days notice, no exclusion clause',
-    },
-    requirements: ['Art. 28 Abs. 3 lit. h DSGVO'],
-    isRequired: true,
-    defaultFrequency: 'ANNUAL',
-  },
-  {
-    id: 'VND-AUD-02',
-    domain: 'AUDIT',
-    title: {
-      de: 'Vor-Ort-Inspektionen möglich',
-      en: 'On-site inspections possible',
-    },
-    description: {
-      de: 'Vertrag erlaubt Vor-Ort-Inspektionen bei dem Auftragsverarbeiter',
-      en: 'Contract allows on-site inspections at the processor',
-    },
-    passCriteria: {
-      de: 'Vor-Ort-Audit explizit erlaubt, Zugang zu relevanten Bereichen',
-      en: 'On-site audit explicitly allowed, access to relevant areas',
-    },
-    requirements: ['Art. 28 Abs. 3 lit. h DSGVO'],
-    isRequired: true,
-    defaultFrequency: 'ANNUAL',
-  },
-  {
-    id: 'VND-AUD-03',
-    domain: 'AUDIT',
-    title: {
-      de: 'Aktuelle Zertifizierungen',
-      en: 'Current Certifications',
-    },
-    description: {
-      de: 'Relevante Sicherheitszertifizierungen sind aktuell und gültig',
-      en: 'Relevant security certifications are current and valid',
-    },
-    passCriteria: {
-      de: 'ISO 27001, SOC 2 oder vergleichbar, nicht abgelaufen',
-      en: 'ISO 27001, SOC 2 or equivalent, not expired',
-    },
-    requirements: ['Art. 32 DSGVO', 'ISO 27001 A.15.1.1'],
-    isRequired: false,
-    defaultFrequency: 'ANNUAL',
-  },
-  {
-    id: 'VND-AUD-04',
-    domain: 'AUDIT',
-    title: {
-      de: 'Letzte Prüfung durchgeführt',
-      en: 'Last review conducted',
-    },
-    description: {
-      de: 'Vendor wurde innerhalb des Review-Zyklus geprüft',
-      en: 'Vendor was reviewed within the review cycle',
-    },
-    passCriteria: {
-      de: 'Dokumentierte Prüfung innerhalb des festgelegten Intervalls',
-      en: 'Documented review within the defined interval',
-    },
-    requirements: ['Art. 28 Abs. 3 lit. h DSGVO'],
-    isRequired: true,
-    defaultFrequency: 'ANNUAL',
-  },
-  {
-    id: 'VND-AUD-05',
-    domain: 'AUDIT',
-    title: {
-      de: 'Prüfberichte verfügbar',
-      en: 'Audit reports available',
-    },
-    description: {
-      de: 'Aktuelle Prüfberichte (SOC 2, Penetrationstest, etc.) liegen vor',
-      en: 'Current audit reports (SOC 2, penetration test, etc.) are available',
-    },
-    passCriteria: {
-      de: 'Prüfberichte nicht älter als 12 Monate',
-      en: 'Audit reports not older than 12 months',
-    },
-    requirements: ['ISO 27001 A.18.2.1'],
-    isRequired: false,
-    defaultFrequency: 'ANNUAL',
-  },
-
-  // ==========================================
-  // DELETION - Löschung Controls
-  // ==========================================
-  {
-    id: 'VND-DEL-01',
-    domain: 'DELETION',
-    title: {
-      de: 'Löschung/Rückgabe nach Vertragsende',
-      en: 'Deletion/return after contract end',
-    },
-    description: {
-      de: 'Klare Regelung zur Löschung oder Rückgabe aller Daten nach Vertragsende',
-      en: 'Clear provision for deletion or return of all data after contract end',
-    },
-    passCriteria: {
-      de: 'Löschfrist max. 30 Tage, Löschbestätigung vorgesehen',
-      en: 'Deletion within max 30 days, deletion confirmation provided',
-    },
-    requirements: ['Art. 28 Abs. 3 lit. g DSGVO'],
-    isRequired: true,
-    defaultFrequency: 'ANNUAL',
-  },
-  {
-    id: 'VND-DEL-02',
-    domain: 'DELETION',
-    title: {
-      de: 'Löschbestätigung',
-      en: 'Deletion confirmation',
-    },
-    description: {
-      de: 'Schriftliche Bestätigung der vollständigen Datenlöschung',
-      en: 'Written confirmation of complete data deletion',
-    },
-    passCriteria: {
-      de: 'Löschbestätigung vertraglich vereinbart und einforderbar',
-      en: 'Deletion confirmation contractually agreed and enforceable',
-    },
-    requirements: ['Art. 28 Abs. 3 lit. g DSGVO'],
-    isRequired: true,
-    defaultFrequency: 'ANNUAL',
-  },
-  {
-    id: 'VND-DEL-03',
-    domain: 'DELETION',
-    title: {
-      de: 'Löschung bei Unterauftragnehmern',
-      en: 'Deletion at sub-processors',
-    },
-    description: {
-      de: 'Löschpflicht erstreckt sich auf alle Unterauftragnehmer',
-      en: 'Deletion obligation extends to all sub-processors',
-    },
-    passCriteria: {
-      de: 'Weitergabe der Löschpflicht an Unterauftragnehmer vertraglich vereinbart',
-      en: 'Transfer of deletion obligation to sub-processors contractually agreed',
-    },
-    requirements: ['Art. 28 Abs. 3 lit. g, d DSGVO'],
-    isRequired: true,
-    defaultFrequency: 'ANNUAL',
-  },
-  {
-    id: 'VND-DEL-04',
-    domain: 'DELETION',
-    title: {
-      de: 'Backup-Löschung',
-      en: 'Backup deletion',
-    },
-    description: {
-      de: 'Daten werden auch aus Backups gelöscht',
-      en: 'Data is also deleted from backups',
-    },
-    passCriteria: {
-      de: 'Backup-Löschung geregelt, max. Aufbewahrungsfrist für Backups definiert',
-      en: 'Backup deletion regulated, max retention period for backups defined',
-    },
-    requirements: ['Art. 28 Abs. 3 lit. g DSGVO'],
-    isRequired: false,
-    defaultFrequency: 'ANNUAL',
-  },
-
-  // ==========================================
-  // INCIDENT - Incident Response Controls
-  // ==========================================
-  {
-    id: 'VND-INC-01',
-    domain: 'INCIDENT',
-    title: {
-      de: 'Meldepflicht bei Datenpannen',
-      en: 'Data breach notification obligation',
-    },
-    description: {
-      de: 'Unverzügliche Meldung von Datenschutzverletzungen',
-      en: 'Immediate notification of data protection violations',
-    },
-    passCriteria: {
-      de: 'Meldepflicht vereinbart, Frist max. 24-48h, Mindestinhalte definiert',
-      en: 'Notification obligation agreed, deadline max 24-48h, minimum content defined',
-    },
-    requirements: ['Art. 33 Abs. 2 DSGVO'],
-    isRequired: true,
-    defaultFrequency: 'ANNUAL',
-  },
-  {
-    id: 'VND-INC-02',
-    domain: 'INCIDENT',
-    title: {
-      de: 'Incident Response Plan',
-      en: 'Incident Response Plan',
-    },
-    description: {
-      de: 'Vendor hat dokumentierten Incident Response Plan',
-      en: 'Vendor has documented incident response plan',
-    },
-    passCriteria: {
-      de: 'Incident Response Plan liegt vor und wurde getestet',
-      en: 'Incident response plan exists and has been tested',
-    },
-    requirements: ['ISO 27001 A.16.1'],
-    isRequired: false,
-    defaultFrequency: 'ANNUAL',
-  },
-  {
-    id: 'VND-INC-03',
-    domain: 'INCIDENT',
-    title: {
-      de: 'Kontaktstelle für Incidents',
-      en: 'Contact point for incidents',
-    },
-    description: {
-      de: 'Definierte Kontaktstelle für Datenschutzvorfälle',
-      en: 'Defined contact point for data protection incidents',
-    },
-    passCriteria: {
-      de: 'Kontaktdaten für Incident-Meldungen bekannt und aktuell',
-      en: 'Contact details for incident reporting known and current',
-    },
-    requirements: ['Art. 33 Abs. 2 DSGVO'],
-    isRequired: true,
-    defaultFrequency: 'QUARTERLY',
-  },
-  {
-    id: 'VND-INC-04',
-    domain: 'INCIDENT',
-    title: {
-      de: 'Unterstützung bei Incident-Dokumentation',
-      en: 'Support with incident documentation',
-    },
-    description: {
-      de: 'Vendor unterstützt bei der Dokumentation von Vorfällen',
-      en: 'Vendor supports documentation of incidents',
-    },
-    passCriteria: {
-      de: 'Unterstützungspflicht bei Dokumentation vertraglich vereinbart',
-      en: 'Support obligation for documentation contractually agreed',
-    },
-    requirements: ['Art. 33 Abs. 5 DSGVO'],
-    isRequired: true,
-    defaultFrequency: 'ANNUAL',
-  },
-
-  // ==========================================
-  // SUBPROCESSOR - Unterauftragnehmer Controls
-  // ==========================================
-  {
-    id: 'VND-SUB-01',
-    domain: 'SUBPROCESSOR',
-    title: {
-      de: 'Genehmigungspflicht für Unterauftragnehmer',
-      en: 'Approval requirement for sub-processors',
-    },
-    description: {
-      de: 'Einsatz von Unterauftragnehmern nur mit Genehmigung',
-      en: 'Use of sub-processors only with approval',
-    },
-    passCriteria: {
-      de: 'Genehmigungserfordernis (spezifisch oder allgemein mit Widerspruchsrecht) vereinbart',
-      en: 'Approval requirement (specific or general with objection right) agreed',
-    },
-    requirements: ['Art. 28 Abs. 2, 4 DSGVO'],
-    isRequired: true,
-    defaultFrequency: 'ANNUAL',
-  },
-  {
-    id: 'VND-SUB-02',
-    domain: 'SUBPROCESSOR',
-    title: {
-      de: 'Aktuelle Unterauftragnehmer-Liste',
-      en: 'Current sub-processor list',
-    },
-    description: {
-      de: 'Vollständige und aktuelle Liste aller Unterauftragnehmer',
-      en: 'Complete and current list of all sub-processors',
-    },
-    passCriteria: {
-      de: 'Liste liegt vor mit Name, Sitz, Verarbeitungszweck',
-      en: 'List available with name, location, processing purpose',
-    },
-    requirements: ['Art. 28 Abs. 2 DSGVO'],
-    isRequired: true,
-    defaultFrequency: 'QUARTERLY',
-  },
-  {
-    id: 'VND-SUB-03',
-    domain: 'SUBPROCESSOR',
-    title: {
-      de: 'Informationspflicht bei Änderungen',
-      en: 'Notification obligation for changes',
-    },
-    description: {
-      de: 'Information über neue oder geänderte Unterauftragnehmer',
-      en: 'Information about new or changed sub-processors',
-    },
-    passCriteria: {
-      de: 'Vorabinformation vereinbart, ausreichende Frist für Widerspruch',
-      en: 'Advance notification agreed, sufficient time for objection',
-    },
-    requirements: ['Art. 28 Abs. 2 DSGVO'],
-    isRequired: true,
-    defaultFrequency: 'ANNUAL',
-  },
-  {
-    id: 'VND-SUB-04',
-    domain: 'SUBPROCESSOR',
-    title: {
-      de: 'Weitergabe der Datenschutzpflichten',
-      en: 'Transfer of data protection obligations',
-    },
-    description: {
-      de: 'Datenschutzpflichten werden an Unterauftragnehmer weitergegeben',
-      en: 'Data protection obligations are transferred to sub-processors',
-    },
-    passCriteria: {
-      de: 'Vertraglich vereinbart, dass Unterauftragnehmer gleichen Pflichten unterliegen',
-      en: 'Contractually agreed that sub-processors are subject to same obligations',
-    },
-    requirements: ['Art. 28 Abs. 4 DSGVO'],
-    isRequired: true,
-    defaultFrequency: 'ANNUAL',
-  },
-  {
-    id: 'VND-SUB-05',
-    domain: 'SUBPROCESSOR',
-    title: {
-      de: 'Haftung für Unterauftragnehmer',
-      en: 'Liability for sub-processors',
-    },
-    description: {
-      de: 'Klare Haftungsregelung für Unterauftragnehmer',
-      en: 'Clear liability provision for sub-processors',
-    },
-    passCriteria: {
-      de: 'Auftragsverarbeiter haftet für Unterauftragnehmer wie für eigenes Handeln',
-      en: 'Processor is liable for sub-processors as for own actions',
-    },
-    requirements: ['Art. 28 Abs. 4 DSGVO'],
-    isRequired: true,
-    defaultFrequency: 'ANNUAL',
-  },
-
-  // ==========================================
-  // TOM - Technische/Organisatorische Maßnahmen
-  // ==========================================
-  {
-    id: 'VND-TOM-01',
-    domain: 'TOM',
-    title: {
-      de: 'TOM-Dokumentation vorhanden',
-      en: 'TOM documentation available',
-    },
-    description: {
-      de: 'Vollständige Dokumentation der technischen und organisatorischen Maßnahmen',
-      en: 'Complete documentation of technical and organizational measures',
-    },
-    passCriteria: {
-      de: 'TOM-Anlage vorhanden, aktuell, spezifisch für die Verarbeitung',
-      en: 'TOM annex available, current, specific to the processing',
-    },
-    requirements: ['Art. 28 Abs. 3 lit. c DSGVO', 'Art. 32 DSGVO'],
-    isRequired: true,
-    defaultFrequency: 'ANNUAL',
-  },
-  {
-    id: 'VND-TOM-02',
-    domain: 'TOM',
-    title: {
-      de: 'Verschlüsselung',
-      en: 'Encryption',
-    },
-    description: {
-      de: 'Angemessene Verschlüsselung für Daten in Transit und at Rest',
-      en: 'Appropriate encryption for data in transit and at rest',
-    },
-    passCriteria: {
-      de: 'TLS 1.2+ für Transit, AES-256 für at Rest',
-      en: 'TLS 1.2+ for transit, AES-256 for at rest',
-    },
-    requirements: ['Art. 32 Abs. 1 lit. a DSGVO'],
-    isRequired: true,
-    defaultFrequency: 'ANNUAL',
-  },
-  {
-    id: 'VND-TOM-03',
-    domain: 'TOM',
-    title: {
-      de: 'Zugriffskontrolle',
-      en: 'Access control',
-    },
-    description: {
-      de: 'Angemessene Zugriffskontrollmechanismen',
-      en: 'Appropriate access control mechanisms',
-    },
-    passCriteria: {
-      de: 'Rollenbasierte Zugriffskontrolle, Least Privilege, Logging',
-      en: 'Role-based access control, least privilege, logging',
-    },
-    requirements: ['Art. 32 Abs. 1 lit. b DSGVO', 'ISO 27001 A.9'],
-    isRequired: true,
-    defaultFrequency: 'ANNUAL',
-  },
-  {
-    id: 'VND-TOM-04',
-    domain: 'TOM',
-    title: {
-      de: 'Verfügbarkeit und Wiederherstellung',
-      en: 'Availability and recovery',
-    },
-    description: {
-      de: 'Maßnahmen zur Sicherstellung der Verfügbarkeit und Wiederherstellung',
-      en: 'Measures to ensure availability and recovery',
-    },
-    passCriteria: {
-      de: 'Backup-Konzept, DR-Plan, RTO/RPO definiert',
-      en: 'Backup concept, DR plan, RTO/RPO defined',
-    },
-    requirements: ['Art. 32 Abs. 1 lit. b, c DSGVO'],
-    isRequired: true,
-    defaultFrequency: 'ANNUAL',
-  },
-  {
-    id: 'VND-TOM-05',
-    domain: 'TOM',
-    title: {
-      de: 'Regelmäßige TOM-Überprüfung',
-      en: 'Regular TOM review',
-    },
-    description: {
-      de: 'Regelmäßige Überprüfung und Aktualisierung der TOM',
-      en: 'Regular review and update of TOM',
-    },
-    passCriteria: {
-      de: 'TOM werden mindestens jährlich überprüft und bei Bedarf aktualisiert',
-      en: 'TOM are reviewed at least annually and updated as needed',
-    },
-    requirements: ['Art. 32 Abs. 1 lit. d DSGVO'],
-    isRequired: true,
-    defaultFrequency: 'ANNUAL',
-  },
-  {
-    id: 'VND-TOM-06',
-    domain: 'TOM',
-    title: {
-      de: 'Penetrationstest',
-      en: 'Penetration testing',
-    },
-    description: {
-      de: 'Regelmäßige Penetrationstests der relevanten Systeme',
-      en: 'Regular penetration testing of relevant systems',
-    },
-    passCriteria: {
-      de: 'Jährlicher Pentest, kritische Findings behoben',
-      en: 'Annual pentest, critical findings resolved',
-    },
-    requirements: ['ISO 27001 A.12.6.1'],
-    isRequired: false,
-    defaultFrequency: 'ANNUAL',
-  },
-
-  // ==========================================
-  // CONTRACT - Vertragliche Grundlagen
-  // ==========================================
-  {
-    id: 'VND-CON-01',
-    domain: 'CONTRACT',
-    title: {
-      de: 'Weisungsgebundenheit',
-      en: 'Instruction binding',
-    },
-    description: {
-      de: 'Auftragsverarbeiter ist an Weisungen gebunden',
-      en: 'Processor is bound by instructions',
-    },
-    passCriteria: {
-      de: 'Weisungsgebundenheit explizit vereinbart, Hinweispflicht bei rechtswidrigen Weisungen',
-      en: 'Instruction binding explicitly agreed, notification obligation for unlawful instructions',
-    },
-    requirements: ['Art. 28 Abs. 3 lit. a DSGVO'],
-    isRequired: true,
-    defaultFrequency: 'ANNUAL',
-  },
-  {
-    id: 'VND-CON-02',
-    domain: 'CONTRACT',
-    title: {
-      de: 'Vertraulichkeitsverpflichtung',
-      en: 'Confidentiality obligation',
-    },
-    description: {
-      de: 'Mitarbeiter sind zur Vertraulichkeit verpflichtet',
-      en: 'Employees are obligated to confidentiality',
-    },
-    passCriteria: {
-      de: 'Vertraulichkeitsverpflichtung für alle Mitarbeiter mit Datenzugriff',
-      en: 'Confidentiality obligation for all employees with data access',
-    },
-    requirements: ['Art. 28 Abs. 3 lit. b DSGVO'],
-    isRequired: true,
-    defaultFrequency: 'ANNUAL',
-  },
-  {
-    id: 'VND-CON-03',
-    domain: 'CONTRACT',
-    title: {
-      de: 'Gegenstand und Dauer der Verarbeitung',
-      en: 'Subject and duration of processing',
-    },
-    description: {
-      de: 'Klare Definition von Gegenstand und Dauer der Verarbeitung',
-      en: 'Clear definition of subject and duration of processing',
-    },
-    passCriteria: {
-      de: 'Verarbeitungsgegenstand, Dauer, Art der Daten, Betroffene definiert',
-      en: 'Processing subject, duration, type of data, data subjects defined',
-    },
-    requirements: ['Art. 28 Abs. 3 DSGVO'],
-    isRequired: true,
-    defaultFrequency: 'ANNUAL',
-  },
-  {
-    id: 'VND-CON-04',
-    domain: 'CONTRACT',
-    title: {
-      de: 'Schriftform/Textform',
-      en: 'Written/text form',
-    },
-    description: {
-      de: 'AVV in Schriftform oder elektronischem Format',
-      en: 'DPA in written or electronic format',
-    },
-    passCriteria: {
-      de: 'AVV in Schriftform oder elektronisch mit qualifizierter Signatur',
-      en: 'DPA in written form or electronically with qualified signature',
-    },
-    requirements: ['Art. 28 Abs. 9 DSGVO'],
-    isRequired: true,
-    defaultFrequency: 'ANNUAL',
-  },
-
-  // ==========================================
-  // DATA_SUBJECT - Betroffenenrechte
-  // ==========================================
-  {
-    id: 'VND-DSR-01',
-    domain: 'DATA_SUBJECT',
-    title: {
-      de: 'Unterstützung bei Betroffenenrechten',
-      en: 'Support for data subject rights',
-    },
-    description: {
-      de: 'Vendor unterstützt bei der Erfüllung von Betroffenenrechten',
-      en: 'Vendor supports fulfillment of data subject rights',
-    },
-    passCriteria: {
-      de: 'Unterstützungspflicht vereinbart, Prozess zur Weiterleitung definiert',
-      en: 'Support obligation agreed, process for forwarding defined',
-    },
-    requirements: ['Art. 28 Abs. 3 lit. e DSGVO'],
-    isRequired: true,
-    defaultFrequency: 'ANNUAL',
-  },
-  {
-    id: 'VND-DSR-02',
-    domain: 'DATA_SUBJECT',
-    title: {
-      de: 'Reaktionszeit für Anfragen',
-      en: 'Response time for requests',
-    },
-    description: {
-      de: 'Definierte Reaktionszeit für Betroffenenanfragen',
-      en: 'Defined response time for data subject requests',
-    },
-    passCriteria: {
-      de: 'Reaktionszeit max. 5 Werktage, um Frist von 1 Monat einhalten zu können',
-      en: 'Response time max. 5 business days to meet 1 month deadline',
-    },
-    requirements: ['Art. 12 Abs. 3 DSGVO'],
-    isRequired: true,
-    defaultFrequency: 'ANNUAL',
-  },
-
-  // ==========================================
-  // SECURITY - Sicherheit
-  // ==========================================
-  {
-    id: 'VND-SEC-01',
-    domain: 'SECURITY',
-    title: {
-      de: 'Sicherheitsbewertung',
-      en: 'Security assessment',
-    },
-    description: {
-      de: 'Regelmäßige Sicherheitsbewertung des Vendors',
-      en: 'Regular security assessment of the vendor',
-    },
-    passCriteria: {
-      de: 'Sicherheitsfragebogen ausgefüllt, keine kritischen Lücken',
-      en: 'Security questionnaire completed, no critical gaps',
-    },
-    requirements: ['Art. 32 DSGVO', 'ISO 27001 A.15.2.1'],
-    isRequired: true,
-    defaultFrequency: 'ANNUAL',
-  },
-  {
-    id: 'VND-SEC-02',
-    domain: 'SECURITY',
-    title: {
-      de: 'Vulnerability Management',
-      en: 'Vulnerability management',
-    },
-    description: {
-      de: 'Etabliertes Vulnerability Management beim Vendor',
-      en: 'Established vulnerability management at the vendor',
-    },
-    passCriteria: {
-      de: 'Regelmäßige Schwachstellen-Scans, Patch-Management dokumentiert',
-      en: 'Regular vulnerability scans, patch management documented',
-    },
-    requirements: ['ISO 27001 A.12.6'],
-    isRequired: false,
-    defaultFrequency: 'ANNUAL',
-  },
-  {
-    id: 'VND-SEC-03',
-    domain: 'SECURITY',
-    title: {
-      de: 'Mitarbeiter-Schulung',
-      en: 'Employee training',
-    },
-    description: {
-      de: 'Datenschutz-Schulung für Mitarbeiter des Vendors',
-      en: 'Data protection training for vendor employees',
-    },
-    passCriteria: {
-      de: 'Regelmäßige Schulungen (mind. jährlich), Nachweis verfügbar',
-      en: 'Regular training (at least annually), proof available',
-    },
-    requirements: ['Art. 39 Abs. 1 lit. b DSGVO'],
-    isRequired: false,
-    defaultFrequency: 'ANNUAL',
-  },
-
-  // ==========================================
-  // GOVERNANCE - Governance
-  // ==========================================
-  {
-    id: 'VND-GOV-01',
-    domain: 'GOVERNANCE',
-    title: {
-      de: 'Datenschutzbeauftragter benannt',
-      en: 'Data protection officer appointed',
-    },
-    description: {
-      de: 'Vendor hat DSB benannt (wenn erforderlich)',
-      en: 'Vendor has appointed DPO (if required)',
-    },
-    passCriteria: {
-      de: 'DSB benannt und Kontaktdaten verfügbar',
-      en: 'DPO appointed and contact details available',
-    },
-    requirements: ['Art. 37 DSGVO'],
-    isRequired: false,
-    defaultFrequency: 'ANNUAL',
-  },
-  {
-    id: 'VND-GOV-02',
-    domain: 'GOVERNANCE',
-    title: {
-      de: 'Verzeichnis der Verarbeitungstätigkeiten',
-      en: 'Records of processing activities',
-    },
-    description: {
-      de: 'Vendor führt eigenes Verarbeitungsverzeichnis',
-      en: 'Vendor maintains own processing records',
-    },
-    passCriteria: {
-      de: 'Verzeichnis nach Art. 30 Abs. 2 DSGVO vorhanden',
-      en: 'Records according to Art. 30(2) GDPR available',
-    },
-    requirements: ['Art. 30 Abs. 2 DSGVO'],
-    isRequired: true,
-    defaultFrequency: 'ANNUAL',
-  },
-  {
-    id: 'VND-GOV-03',
-    domain: 'GOVERNANCE',
-    title: {
-      de: 'Unterstützung bei DSFA',
-      en: 'Support for DPIA',
-    },
-    description: {
-      de: 'Vendor unterstützt bei Datenschutz-Folgenabschätzung',
-      en: 'Vendor supports data protection impact assessment',
-    },
-    passCriteria: {
-      de: 'Unterstützungspflicht bei DSFA vertraglich vereinbart',
-      en: 'Support obligation for DPIA contractually agreed',
-    },
-    requirements: ['Art. 28 Abs. 3 lit. f DSGVO'],
-    isRequired: true,
-    defaultFrequency: 'ANNUAL',
-  },
-]
-
-// ==========================================
-// HELPER FUNCTIONS
-// ==========================================
-
-/**
- * Get all controls
- */
-export function getAllControls(): Control[] {
-  return CONTROLS_LIBRARY
-}
-
-/**
- * Get controls by domain
- */
-export function getControlsByDomain(domain: ControlDomain): Control[] {
-  return CONTROLS_LIBRARY.filter((c) => c.domain === domain)
-}
-
-/**
- * Get control by ID
- */
-export function getControlById(id: string): Control | undefined {
-  return CONTROLS_LIBRARY.find((c) => c.id === id)
-}
-
-/**
- * Get required controls
- */
-export function getRequiredControls(): Control[] {
-  return CONTROLS_LIBRARY.filter((c) => c.isRequired)
-}
-
-/**
- * Get controls by frequency
- */
-export function getControlsByFrequency(frequency: ReviewFrequency): Control[] {
-  return CONTROLS_LIBRARY.filter((c) => c.defaultFrequency === frequency)
-}
-
-/**
- * Get controls applicable to vendors
- */
-export function getVendorControls(): Control[] {
-  return CONTROLS_LIBRARY.filter((c) =>
-    ['TRANSFER', 'AUDIT', 'DELETION', 'INCIDENT', 'SUBPROCESSOR', 'TOM', 'CONTRACT', 'DATA_SUBJECT', 'SECURITY', 'GOVERNANCE'].includes(c.domain)
-  )
-}
-
-/**
- * Get controls applicable to processing activities
- */
-export function getProcessingActivityControls(): Control[] {
-  return CONTROLS_LIBRARY.filter((c) =>
-    ['TOM', 'DATA_SUBJECT', 'GOVERNANCE', 'SECURITY'].includes(c.domain)
-  )
-}
-
-/**
- * Group controls by domain
- */
-export function getControlsGroupedByDomain(): Map<ControlDomain, Control[]> {
-  const grouped = new Map<ControlDomain, Control[]>()
-
-  for (const control of CONTROLS_LIBRARY) {
-    const existing = grouped.get(control.domain) || []
-    grouped.set(control.domain, [...existing, control])
-  }
-
-  return grouped
-}
-
-/**
- * Get domain metadata
- */
-export function getControlDomainMeta(domain: ControlDomain): LocalizedText {
-  const meta: Record<ControlDomain, LocalizedText> = {
-    TRANSFER: { de: 'Drittlandtransfer', en: 'Third Country Transfer' },
-    AUDIT: { de: 'Audit & Prüfung', en: 'Audit & Review' },
-    DELETION: { de: 'Löschung', en: 'Deletion' },
-    INCIDENT: { de: 'Incident Response', en: 'Incident Response' },
-    SUBPROCESSOR: { de: 'Unterauftragnehmer', en: 'Sub-Processors' },
-    TOM: { de: 'Technische/Org. Maßnahmen', en: 'Technical/Org. Measures' },
-    CONTRACT: { de: 'Vertragliche Grundlagen', en: 'Contractual Basics' },
-    DATA_SUBJECT: { de: 'Betroffenenrechte', en: 'Data Subject Rights' },
-    SECURITY: { de: 'Sicherheit', en: 'Security' },
-    GOVERNANCE: { de: 'Governance', en: 'Governance' },
-  }
-
-  return meta[domain]
-}
-
-/**
- * Calculate control coverage
- */
-export function calculateControlCoverage(
-  controlIds: string[],
-  domain?: ControlDomain
-): { covered: number; total: number; percentage: number } {
-  const targetControls = domain
-    ? getControlsByDomain(domain)
-    : getRequiredControls()
-
-  const covered = targetControls.filter((c) => controlIds.includes(c.id)).length
-
-  return {
-    covered,
-    total: targetControls.length,
-    percentage: targetControls.length > 0 ? Math.round((covered / targetControls.length) * 100) : 0,
-  }
-}
+// Helper functions
+export {
+  getAllControls,
+  getControlsByDomain,
+  getControlById,
+  getRequiredControls,
+  getControlsByFrequency,
+  getVendorControls,
+  getProcessingActivityControls,
+  getControlsGroupedByDomain,
+  getControlDomainMeta,
+  calculateControlCoverage,
+} from './controls-helpers'
diff --git a/admin-lehrer/lib/sdk/vendor-compliance/types-audit.ts b/admin-lehrer/lib/sdk/vendor-compliance/types-audit.ts
new file mode 100644
index 0000000..4e96419
--- /dev/null
+++ b/admin-lehrer/lib/sdk/vendor-compliance/types-audit.ts
@@ -0,0 +1,50 @@
+/**
+ * Audit & Export Types
+ *
+ * Types for report generation and data export:
+ * - Report types (VVT, RoPA, vendor audit, etc.)
+ * - Export formats (PDF, DOCX, XLSX, JSON)
+ * - Audit report snapshots
+ */
+
+// ==========================================
+// ENUMS - EXPORT
+// ==========================================
+
+export type ReportType =
+  | 'VVT_EXPORT'
+  | 'VENDOR_AUDIT'
+  | 'ROPA'
+  | 'MANAGEMENT_SUMMARY'
+  | 'DPIA_INPUT'
+
+export type ExportFormat = 'PDF' | 'DOCX' | 'XLSX' | 'JSON'
+
+// ==========================================
+// INTERFACES - AUDIT REPORTS
+// ==========================================
+
+export interface ReportScope {
+  vendorIds?: string[]
+  processingActivityIds?: string[]
+  dateRange?: { from: Date; to: Date }
+}
+
+export interface AuditReport {
+  id: string
+  tenantId: string
+
+  type: ReportType
+
+  // Scope
+  scope: ReportScope
+
+  // Generierung
+  format: ExportFormat
+  storagePath: string
+  generatedAt: Date
+  generatedBy: string
+
+  // Snapshot-Daten (fuer Revisionssicherheit)
+  snapshotHash: string // SHA-256 des Inhalts
+}
diff --git a/admin-lehrer/lib/sdk/vendor-compliance/types-common.ts b/admin-lehrer/lib/sdk/vendor-compliance/types-common.ts
new file mode 100644
index 0000000..748b32f
--- /dev/null
+++ b/admin-lehrer/lib/sdk/vendor-compliance/types-common.ts
@@ -0,0 +1,58 @@
+/**
+ * Common / Shared Types
+ *
+ * Foundational types used across all vendor-compliance domains:
+ * LocalizedText, Address, Contact, ResponsibleParty, Organization
+ */
+
+// ==========================================
+// LOCALIZED TEXT
+// ==========================================
+
+export interface LocalizedText {
+  de: string
+  en: string
+}
+
+// ==========================================
+// COMMON TYPES
+// ==========================================
+
+export interface Address {
+  street: string
+  city: string
+  postalCode: string
+  country: string // ISO 3166-1 alpha-2
+  state?: string
+}
+
+export interface Contact {
+  name: string
+  email: string
+  phone?: string
+  department?: string
+  role?: string
+}
+
+export interface ResponsibleParty {
+  organizationName: string
+  legalForm?: string
+  address: Address
+  contact: Contact
+}
+
+// ==========================================
+// ORGANISATION / TENANT
+// ==========================================
+
+export interface Organization {
+  id: string
+  name: string
+  legalForm: string // GmbH, AG, e.V., etc.
+  address: Address
+  country: string // ISO 3166-1 alpha-2
+  vatId?: string
+  dpoContact: Contact // Datenschutzbeauftragter
+  createdAt: Date
+  updatedAt: Date
+}
diff --git a/admin-lehrer/lib/sdk/vendor-compliance/types-contract.ts b/admin-lehrer/lib/sdk/vendor-compliance/types-contract.ts
new file mode 100644
index 0000000..f3623f4
--- /dev/null
+++ b/admin-lehrer/lib/sdk/vendor-compliance/types-contract.ts
@@ -0,0 +1,117 @@
+/**
+ * Contract Types
+ *
+ * Types for contract document management:
+ * - Document types (AVV, MSA, SLA, SCC, etc.)
+ * - Contract review and lifecycle statuses
+ * - Contract document and version interfaces
+ */
+
+import type { Address } from './types-common'
+
+// ==========================================
+// ENUMS - CONTRACT
+// ==========================================
+
+export type DocumentType =
+  | 'AVV'                 // Auftragsverarbeitungsvertrag
+  | 'MSA'                 // Master Service Agreement
+  | 'SLA'                 // Service Level Agreement
+  | 'SCC'                 // Standard Contractual Clauses
+  | 'NDA'                 // Non-Disclosure Agreement
+  | 'TOM_ANNEX'           // TOM-Anlage
+  | 'CERTIFICATION'       // Zertifikat
+  | 'SUB_PROCESSOR_LIST'  // Unterauftragsverarbeiter-Liste
+  | 'OTHER'
+
+export type ContractReviewStatus =
+  | 'PENDING'
+  | 'IN_PROGRESS'
+  | 'COMPLETED'
+  | 'FAILED'
+
+export type ContractStatus =
+  | 'DRAFT'
+  | 'SIGNED'
+  | 'ACTIVE'
+  | 'EXPIRED'
+  | 'TERMINATED'
+
+// ==========================================
+// INTERFACES - CONTRACT
+// ==========================================
+
+export interface ContractParty {
+  role: 'CONTROLLER' | 'PROCESSOR' | 'PARTY'
+  name: string
+  address?: Address
+  signatoryName?: string
+  signatoryRole?: string
+}
+
+export interface ContractDocument {
+  id: string
+  tenantId: string
+  vendorId: string
+
+  // Dokument
+  fileName: string
+  originalName: string
+  mimeType: string
+  fileSize: number
+  storagePath: string // MinIO path
+
+  // Klassifikation
+  documentType: DocumentType
+
+  // Versioning
+  version: string
+  previousVersionId?: string
+
+  // Metadaten (extrahiert)
+  parties?: ContractParty[]
+  effectiveDate?: Date
+  expirationDate?: Date
+  autoRenewal?: boolean
+  renewalNoticePeriod?: number // Tage
+  terminationNoticePeriod?: number // Tage
+
+  // Review Status
+  reviewStatus: ContractReviewStatus
+  reviewCompletedAt?: Date
+  complianceScore?: number // 0-100
+
+  // Workflow
+  status: ContractStatus
+  signedAt?: Date
+
+  // Extracted text for search
+  extractedText?: string
+  pageCount?: number
+
+  createdAt: Date
+  updatedAt: Date
+}
+
+export interface DocumentVersion {
+  id: string
+  documentId: string
+  version: string
+  storagePath: string
+  extractedText?: string
+  pageCount: number
+  createdAt: Date
+}
+
+// ==========================================
+// FORM TYPES - CONTRACT
+// ==========================================
+
+export interface ContractUploadData {
+  vendorId: string
+  documentType: DocumentType
+  version: string
+  effectiveDate?: Date
+  expirationDate?: Date
+  autoRenewal?: boolean
+}
diff --git a/admin-lehrer/lib/sdk/vendor-compliance/types-finding.ts b/admin-lehrer/lib/sdk/vendor-compliance/types-finding.ts
new file mode 100644
index 0000000..8f06661
--- /dev/null
+++ b/admin-lehrer/lib/sdk/vendor-compliance/types-finding.ts
@@ -0,0 +1,93 @@
+/**
+ * Finding Types
+ *
+ * Types for compliance findings from contract reviews:
+ * - Finding classification (type, category, severity)
+ * - Citation references to source documents
+ * - Finding workflow (status, resolution)
+ */
+
+import type { LocalizedText } from './types-common'
+
+// ==========================================
+// ENUMS - FINDINGS
+// ==========================================
+
+export type FindingType =
+  | 'OK'                  // Anforderung erfuellt
+  | 'GAP'                 // Luecke/fehlend
+  | 'RISK'                // Risiko identifiziert
+  | 'UNKNOWN'             // Nicht eindeutig
+
+export type FindingCategory =
+  | 'AVV_CONTENT'         // Art. 28 Abs. 3 Mindestinhalte
+  | 'SUBPROCESSOR'        // Unterauftragnehmer-Regelung
+  | 'INCIDENT'            // Incident-Meldepflichten
+  | 'AUDIT_RIGHTS'        // Audit-/Inspektionsrechte
+  | 'DELETION'            // Loeschung/Rueckgabe
+  | 'TOM'                 // Technische/Org. Massnahmen
+  | 'TRANSFER'            // Drittlandtransfer
+  | 'LIABILITY'           // Haftung/Indemnity
+  | 'SLA'                 // Verfuegbarkeit
+  | 'DATA_SUBJECT_RIGHTS' // Betroffenenrechte
+  | 'CONFIDENTIALITY'     // Vertraulichkeit
+  | 'INSTRUCTION'         // Weisungsgebundenheit
+  | 'TERMINATION'         // Vertragsbeendigung
+  | 'GENERAL'             // Allgemein
+
+export type FindingSeverity = 'LOW' | 'MEDIUM' | 'HIGH' | 'CRITICAL'
+
+export type FindingStatus =
+  | 'OPEN'
+  | 'IN_PROGRESS'
+  | 'RESOLVED'
+  | 'ACCEPTED'
+  | 'FALSE_POSITIVE'
+
+// ==========================================
+// INTERFACES - FINDINGS
+// ==========================================
+
+export interface Citation {
+  documentId: string
+  versionId?: string
+  page: number
+  startChar: number
+  endChar: number
+  quotedText: string
+  quoteHash: string // SHA-256 zur Verifizierung
+}
+
+export interface Finding {
+  id: string
+  tenantId: string
+  contractId: string
+  vendorId: string
+
+  // Klassifikation
+  type: FindingType
+  category: FindingCategory
+  severity: FindingSeverity
+
+  // Inhalt
+  title: LocalizedText
+  description: LocalizedText
+  recommendation?: LocalizedText
+
+  // Citations (Textstellen-Belege)
+  citations: Citation[]
+
+  // Verknuepfung
+  affectedRequirement?: string // z.B. "Art. 28 Abs. 3 lit. a DSGVO"
+  triggeredControls: string[] // Control-IDs
+
+  // Workflow
+  status: FindingStatus
+  assignee?: string
+  dueDate?: Date
+  resolution?: string
+  resolvedAt?: Date
+
+  createdAt: Date
+  updatedAt: Date
+}
diff --git a/admin-lehrer/lib/sdk/vendor-compliance/types-helpers.ts b/admin-lehrer/lib/sdk/vendor-compliance/types-helpers.ts
new file mode 100644
index 0000000..06597d0
--- /dev/null
+++ b/admin-lehrer/lib/sdk/vendor-compliance/types-helpers.ts
@@ -0,0 +1,280 @@
+/**
+ * Helper Functions & Constants (Metadata)
+ *
+ * Utility functions for risk calculation, formatting, validation.
+ * Localized metadata constants for enums (labels, articles, etc.).
+ */
+
+import type { LocalizedText } from './types-common'
+import type {
+  PersonalDataCategory,
+  DataSubjectCategory,
+  LegalBasisType,
+  TransferMechanismType,
+} from './types-processing'
+import type {
+  VendorRole,
+  VendorStatus,
+  ServiceCategory,
+} from './types-vendor'
+import type {
+  DocumentType,
+  ContractStatus,
+} from './types-contract'
+import type {
+  FindingSeverity,
+} from './types-finding'
+import type {
+  RiskLevel,
+} from './types-risk'
+import type {
+  ProcessingActivityStatus,
+} from './types-processing'
+
+// ==========================================
+// HELPER FUNCTIONS
+// ==========================================
+
+/**
+ * Calculate risk level from score
+ */
+export function getRiskLevelFromScore(score: number): RiskLevel {
+  if (score <= 4) return 'LOW'
+  if (score <= 9) return 'MEDIUM'
+  if (score <= 16) return 'HIGH'
+  return 'CRITICAL'
+}
+
+/**
+ * Calculate risk score from likelihood and impact
+ */
+export function calculateRiskScore(likelihood: number, impact: number): number {
+  return likelihood * impact
+}
+
+/**
+ * Check if data category is special (Art. 9 DSGVO)
+ */
+export function isSpecialCategory(category: PersonalDataCategory): boolean {
+  const specialCategories: PersonalDataCategory[] = [
+    'HEALTH_DATA',
+    'GENETIC_DATA',
+    'BIOMETRIC_DATA',
+    'RACIAL_ETHNIC',
+    'POLITICAL_OPINIONS',
+    'RELIGIOUS_BELIEFS',
+    'TRADE_UNION',
+    'SEX_LIFE',
+    'CRIMINAL_DATA',
+  ]
+  return specialCategories.includes(category)
+}
+
+/**
+ * Check if country has adequacy decision
+ */
+export function hasAdequacyDecision(countryCode: string): boolean {
+  const adequateCountries = [
+    'AD', 'AR', 'CA', 'FO', 'GG', 'IL', 'IM', 'JP', 'JE', 'NZ', 'KR', 'CH', 'GB', 'UY',
+    // EU/EEA countries
+    'AT', 'BE', 'BG', 'HR', 'CY', 'CZ', 'DK', 'EE', 'FI', 'FR', 'DE', 'GR', 'HU',
+    'IE', 'IT', 'LV', 'LT', 'LU', 'MT', 'NL', 'PL', 'PT', 'RO', 'SK', 'SI', 'ES', 'SE',
+    'IS', 'LI', 'NO',
+  ]
+  return adequateCountries.includes(countryCode.toUpperCase())
+}
+
+/**
+ * Generate VVT ID
+ */
+export function generateVVTId(existingIds: string[]): string {
+  const year = new Date().getFullYear()
+  const prefix = `VVT-${year}-`
+
+  const existingNumbers = existingIds
+    .filter(id => id.startsWith(prefix))
+    .map(id => parseInt(id.replace(prefix, ''), 10))
+    .filter(n => !isNaN(n))
+
+  const nextNumber = existingNumbers.length > 0 ? Math.max(...existingNumbers) + 1 : 1
+  return `${prefix}${nextNumber.toString().padStart(3, '0')}`
+}
+
+/**
+ * Format date for display
+ */
+export function formatDate(date: Date | string | undefined): string {
+  if (!date) return '-'
+  const d = typeof date === 'string' ? new Date(date) : date
+  return d.toLocaleDateString('de-DE', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+  })
+}
+
+/**
+ * Get severity color class
+ */
+export function getSeverityColor(severity: FindingSeverity): string {
+  switch (severity) {
+    case 'LOW': return 'text-blue-600 bg-blue-100'
+    case 'MEDIUM': return 'text-yellow-600 bg-yellow-100'
+    case 'HIGH': return 'text-orange-600 bg-orange-100'
+    case 'CRITICAL': return 'text-red-600 bg-red-100'
+  }
+}
+
+/**
+ * Get status color class
+ */
+export function getStatusColor(status: VendorStatus | ProcessingActivityStatus | ContractStatus): string {
+  switch (status) {
+    case 'ACTIVE':
+    case 'APPROVED':
+    case 'SIGNED':
+      return 'text-green-600 bg-green-100'
+    case 'DRAFT':
+    case 'PENDING_REVIEW':
+      return 'text-yellow-600 bg-yellow-100'
+    case 'REVIEW':
+    case 'INACTIVE':
+      return 'text-blue-600 bg-blue-100'
+    case 'ARCHIVED':
+    case 'EXPIRED':
+    case 'TERMINATED':
+      return 'text-gray-600 bg-gray-100'
+    default:
+      return 'text-gray-600 bg-gray-100'
+  }
+}
+
+// ==========================================
+// CONSTANTS - METADATA
+// ==========================================
+
+export const DATA_SUBJECT_CATEGORY_META: Record<DataSubjectCategory, LocalizedText> = {
+  EMPLOYEES: { de: 'Beschäftigte', en: 'Employees' },
+  APPLICANTS: { de: 'Bewerber', en: 'Applicants' },
+  CUSTOMERS: { de: 'Kunden', en: 'Customers' },
+  PROSPECTIVE_CUSTOMERS: { de: 'Interessenten', en: 'Prospective Customers' },
+  SUPPLIERS: { de: 'Lieferanten', en: 'Suppliers' },
+  BUSINESS_PARTNERS: { de: 'Geschäftspartner', en: 'Business Partners' },
+  VISITORS: { de: 'Besucher', en: 'Visitors' },
+  WEBSITE_USERS: { de: 'Website-Nutzer', en: 'Website Users' },
+  APP_USERS: { de: 'App-Nutzer', en: 'App Users' },
+  NEWSLETTER_SUBSCRIBERS: { de: 'Newsletter-Abonnenten', en: 'Newsletter Subscribers' },
+  MEMBERS: { de: 'Mitglieder', en: 'Members' },
+  PATIENTS: { de: 'Patienten', en: 'Patients' },
+  STUDENTS: { de: 'Schüler/Studenten', en: 'Students' },
+  MINORS: { de: 'Minderjährige', en: 'Minors' },
+  OTHER: { de: 'Sonstige', en: 'Other' },
+}
+
+export const PERSONAL_DATA_CATEGORY_META: Record<PersonalDataCategory, { label: LocalizedText; isSpecial: boolean }> = {
+  NAME: { label: { de: 'Name', en: 'Name' }, isSpecial: false },
+  CONTACT: { label: { de: 'Kontaktdaten', en: 'Contact Data' }, isSpecial: false },
+  ADDRESS: { label: { de: 'Adressdaten', en: 'Address Data' }, isSpecial: false },
+  DOB: { label: { de: 'Geburtsdatum', en: 'Date of Birth' }, isSpecial: false },
+  ID_NUMBER: { label: { de: 'Ausweisnummern', en: 'ID Numbers' }, isSpecial: false },
+  SOCIAL_SECURITY: { label: { de: 'Sozialversicherungsnummer', en: 'Social Security Number' }, isSpecial: false },
+  TAX_ID: { label: { de: 'Steuer-ID', en: 'Tax ID' }, isSpecial: false },
+  BANK_ACCOUNT: { label: { de: 'Bankverbindung', en: 'Bank Account' }, isSpecial: false },
+  PAYMENT_DATA: { label: { de: 'Zahlungsdaten', en: 'Payment Data' }, isSpecial: false },
+  EMPLOYMENT_DATA: { label: { de: 'Beschäftigungsdaten', en: 'Employment Data' }, isSpecial: false },
+  SALARY_DATA: { label: { de: 'Gehaltsdaten', en: 'Salary Data' }, isSpecial: false },
+  EDUCATION_DATA: { label: { de: 'Bildungsdaten', en: 'Education Data' }, isSpecial: false },
+  PHOTO_VIDEO: { label: { de: 'Fotos/Videos', en: 'Photos/Videos' }, isSpecial: false },
+  IP_ADDRESS: { label: { de: 'IP-Adressen', en: 'IP Addresses' }, isSpecial: false },
+  DEVICE_ID: { label: { de: 'Gerätekennungen', en: 'Device IDs' }, isSpecial: false },
+  LOCATION_DATA: { label: { de: 'Standortdaten', en: 'Location Data' }, isSpecial: false },
+  USAGE_DATA: { label: { de: 'Nutzungsdaten', en: 'Usage Data' }, isSpecial: false },
+  COMMUNICATION_DATA: { label: { de: 'Kommunikationsdaten', en: 'Communication Data' }, isSpecial: false },
+  CONTRACT_DATA: { label: { de: 'Vertragsdaten', en: 'Contract Data' }, isSpecial: false },
+  LOGIN_DATA: { label: { de: 'Login-Daten', en: 'Login Data' }, isSpecial: false },
+  HEALTH_DATA: { label: { de: 'Gesundheitsdaten', en: 'Health Data' }, isSpecial: true },
+  GENETIC_DATA: { label: { de: 'Genetische Daten', en: 'Genetic Data' }, isSpecial: true },
+  BIOMETRIC_DATA: { label: { de: 'Biometrische Daten', en: 'Biometric Data' }, isSpecial: true },
+  RACIAL_ETHNIC: { label: { de: 'Rassische/Ethnische Herkunft', en: 'Racial/Ethnic Origin' }, isSpecial: true },
+  POLITICAL_OPINIONS: { label: { de: 'Politische Meinungen', en: 'Political Opinions' }, isSpecial: true },
+  RELIGIOUS_BELIEFS: { label: { de: 'Religiöse Überzeugungen', en: 'Religious Beliefs' }, isSpecial: true },
+  TRADE_UNION: { label: { de: 'Gewerkschaftszugehörigkeit', en: 'Trade Union Membership' }, isSpecial: true },
+  SEX_LIFE: { label: { de: 'Sexualleben/Orientierung', en: 'Sex Life/Orientation' }, isSpecial: true },
+  CRIMINAL_DATA: { label: { de: 'Strafrechtliche Daten', en: 'Criminal Data' }, isSpecial: true },
+  OTHER: { label: { de: 'Sonstige', en: 'Other' }, isSpecial: false },
+}
+
+export const LEGAL_BASIS_META: Record<LegalBasisType, { label: LocalizedText; article: string }> = {
+  CONSENT: { label: { de: 'Einwilligung', en: 'Consent' }, article: 'Art. 6 Abs. 1 lit. a DSGVO' },
+  CONTRACT: { label: { de: 'Vertragserfüllung', en: 'Contract Performance' }, article: 'Art. 6 Abs. 1 lit. b DSGVO' },
+  LEGAL_OBLIGATION: { label: { de: 'Rechtliche Verpflichtung', en: 'Legal Obligation' }, article: 'Art. 6 Abs. 1 lit. c DSGVO' },
+  VITAL_INTEREST: { label: { de: 'Lebenswichtige Interessen', en: 'Vital Interests' }, article: 'Art. 6 Abs. 1 lit. d DSGVO' },
+  PUBLIC_TASK: { label: { de: 'Öffentliche Aufgabe', en: 'Public Task' }, article: 'Art. 6 Abs. 1 lit. e DSGVO' },
+  LEGITIMATE_INTEREST: { label: { de: 'Berechtigtes Interesse', en: 'Legitimate Interest' }, article: 'Art. 6 Abs. 1 lit. f DSGVO' },
+  ART9_CONSENT: { label: { de: 'Ausdrückliche Einwilligung', en: 'Explicit Consent' }, article: 'Art. 9 Abs. 2 lit. a DSGVO' },
+  ART9_EMPLOYMENT: { label: { de: 'Arbeitsrecht', en: 'Employment Law' }, article: 'Art. 9 Abs. 2 lit. b DSGVO' },
+  ART9_VITAL_INTEREST: { label: { de: 'Lebenswichtige Interessen', en: 'Vital Interests' }, article: 'Art. 9 Abs. 2 lit. c DSGVO' },
+  ART9_FOUNDATION: { label: { de: 'Stiftung/Verein', en: 'Foundation/Association' }, article: 'Art. 9 Abs. 2 lit. d DSGVO' },
+  ART9_PUBLIC: { label: { de: 'Offenkundig öffentlich', en: 'Manifestly Public' }, article: 'Art. 9 Abs. 2 lit. e DSGVO' },
+  ART9_LEGAL_CLAIMS: { label: { de: 'Rechtsansprüche', en: 'Legal Claims' }, article: 'Art. 9 Abs. 2 lit. f DSGVO' },
+  ART9_PUBLIC_INTEREST: { label: { de: 'Öffentliches Interesse', en: 'Public Interest' }, article: 'Art. 9 Abs. 2 lit. g DSGVO' },
+  ART9_HEALTH: { label: { de: 'Gesundheitsversorgung', en: 'Health Care' }, article: 'Art. 9 Abs. 2 lit. h DSGVO' },
+  ART9_PUBLIC_HEALTH: { label: { de: 'Öffentliche Gesundheit', en: 'Public Health' }, article: 'Art. 9 Abs. 2 lit. i DSGVO' },
+  ART9_ARCHIVING: { label: { de: 'Archivzwecke', en: 'Archiving Purposes' }, article: 'Art. 9 Abs. 2 lit. j DSGVO' },
+}
+
+export const VENDOR_ROLE_META: Record<VendorRole, LocalizedText> = {
+  PROCESSOR: { de: 'Auftragsverarbeiter', en: 'Processor' },
+  JOINT_CONTROLLER: { de: 'Gemeinsam Verantwortlicher', en: 'Joint Controller' },
+  CONTROLLER: { de: 'Eigenständiger Verantwortlicher', en: 'Independent Controller' },
+  SUB_PROCESSOR: { de: 'Unterauftragnehmer', en: 'Sub-Processor' },
+  THIRD_PARTY: { de: 'Dritter', en: 'Third Party' },
+}
+
+export const SERVICE_CATEGORY_META: Record<ServiceCategory, LocalizedText> = {
+  HOSTING: { de: 'Hosting', en: 'Hosting' },
+  CLOUD_INFRASTRUCTURE: { de: 'Cloud-Infrastruktur', en: 'Cloud Infrastructure' },
+  ANALYTICS: { de: 'Analytics', en: 'Analytics' },
+  CRM: { de: 'CRM', en: 'CRM' },
+  ERP: { de: 'ERP', en: 'ERP' },
+  HR_SOFTWARE: { de: 'HR-Software', en: 'HR Software' },
+  PAYMENT: { de: 'Zahlungsabwicklung', en: 'Payment Processing' },
+  EMAIL: { de: 'E-Mail', en: 'Email' },
+  MARKETING: { de: 'Marketing', en: 'Marketing' },
+  SUPPORT: { de: 'Support', en: 'Support' },
+  SECURITY: { de: 'Sicherheit', en: 'Security' },
+  INTEGRATION: { de: 'Integration', en: 'Integration' },
+  CONSULTING: { de: 'Beratung', en: 'Consulting' },
+  LEGAL: { de: 'Rechtliches', en: 'Legal' },
+  ACCOUNTING: { de: 'Buchhaltung', en: 'Accounting' },
+  COMMUNICATION: { de: 'Kommunikation', en: 'Communication' },
+  STORAGE: { de: 'Speicher', en: 'Storage' },
+  BACKUP: { de: 'Backup', en: 'Backup' },
+  CDN: { de: 'CDN', en: 'CDN' },
+  OTHER: { de: 'Sonstige', en: 'Other' },
+}
+
+export const DOCUMENT_TYPE_META: Record<DocumentType, LocalizedText> = {
+  AVV: { de: 'Auftragsverarbeitungsvertrag', en: 'Data Processing Agreement' },
+  MSA: { de: 'Rahmenvertrag', en: 'Master Service Agreement' },
+  SLA: { de: 'Service Level Agreement', en: 'Service Level Agreement' },
+  SCC: { de: 'Standardvertragsklauseln', en: 'Standard Contractual Clauses' },
+  NDA: { de: 'Geheimhaltungsvereinbarung', en: 'Non-Disclosure Agreement' },
+  TOM_ANNEX: { de: 'TOM-Anlage', en: 'TOM Annex' },
+  CERTIFICATION: { de: 'Zertifikat', en: 'Certification' },
+  SUB_PROCESSOR_LIST: { de: 'Unterauftragnehmer-Liste', en: 'Sub-Processor List' },
+  OTHER: { de: 'Sonstige', en: 'Other' },
+}
+
+export const TRANSFER_MECHANISM_META: Record<TransferMechanismType, LocalizedText> = {
+  ADEQUACY_DECISION: { de: 'Angemessenheitsbeschluss', en: 'Adequacy Decision' },
+  SCC_CONTROLLER: { de: 'SCC (Controller-to-Controller)', en: 'SCC (Controller-to-Controller)' },
+  SCC_PROCESSOR: { de: 'SCC (Controller-to-Processor)', en: 'SCC (Controller-to-Processor)' },
+  BCR: { de: 'Binding Corporate Rules', en: 'Binding Corporate Rules' },
+  DEROGATION_CONSENT: { de: 'Ausdrückliche Einwilligung', en: 'Explicit Consent' },
+  DEROGATION_CONTRACT: { de: 'Vertragserfüllung', en: 'Contract Performance' },
+  DEROGATION_LEGAL: { de: 'Rechtsansprüche', en: 'Legal Claims' },
+  DEROGATION_PUBLIC: { de: 'Öffentliches Interesse', en: 'Public Interest' },
+  CERTIFICATION: { de: 'Zertifizierung', en: 'Certification' },
+  CODE_OF_CONDUCT: { de: 'Verhaltensregeln', en: 'Code of Conduct' },
+}
diff --git a/admin-lehrer/lib/sdk/vendor-compliance/types-processing.ts b/admin-lehrer/lib/sdk/vendor-compliance/types-processing.ts
new file mode 100644
index 0000000..d52ca75
--- /dev/null
+++ b/admin-lehrer/lib/sdk/vendor-compliance/types-processing.ts
@@ -0,0 +1,213 @@
+/**
+ * Processing Activity Types (VVT / RoPA)
+ *
+ * Types for Art. 30 DSGVO processing activities:
+ * - Enums for data categories, legal bases, transfer mechanisms
+ * - Interfaces for processing activities and related structures
+ */
+
+import type {
+  LocalizedText,
+  Contact,
+  ResponsibleParty,
+} from './types-common'
+
+// ==========================================
+// ENUMS - VVT / PROCESSING ACTIVITIES
+// ==========================================
+
+export type ProcessingActivityStatus = 'DRAFT' | 'REVIEW' | 'APPROVED' | 'ARCHIVED'
+
+export type ProtectionLevel = 'LOW' | 'MEDIUM' | 'HIGH'
+
+export type DataSubjectCategory =
+  | 'EMPLOYEES'           // Beschaeftigte
+  | 'APPLICANTS'          // Bewerber
+  | 'CUSTOMERS'           // Kunden
+  | 'PROSPECTIVE_CUSTOMERS' // Interessenten
+  | 'SUPPLIERS'           // Lieferanten
+  | 'BUSINESS_PARTNERS'   // Geschaeftspartner
+  | 'VISITORS'            // Besucher
+  | 'WEBSITE_USERS'       // Website-Nutzer
+  | 'APP_USERS'           // App-Nutzer
+  | 'NEWSLETTER_SUBSCRIBERS' // Newsletter-Abonnenten
+  | 'MEMBERS'             // Mitglieder
+  | 'PATIENTS'            // Patienten
+  | 'STUDENTS'            // Schueler/Studenten
+  | 'MINORS'              // Minderjaehrige
+  | 'OTHER'
+
+export type PersonalDataCategory =
+  | 'NAME'                // Name
+  | 'CONTACT'             // Kontaktdaten
+  | 'ADDRESS'             // Adressdaten
+  | 'DOB'                 // Geburtsdatum
+  | 'ID_NUMBER'           // Ausweisnummern
+  | 'SOCIAL_SECURITY'     // Sozialversicherungsnummer
+  | 'TAX_ID'              // Steuer-ID
+  | 'BANK_ACCOUNT'        // Bankverbindung
+  | 'PAYMENT_DATA'        // Zahlungsdaten
+  | 'EMPLOYMENT_DATA'     // Beschaeftigungsdaten
+  | 'SALARY_DATA'         // Gehaltsdaten
+  | 'EDUCATION_DATA'      // Bildungsdaten
+  | 'PHOTO_VIDEO'         // Fotos/Videos
+  | 'IP_ADDRESS'          // IP-Adressen
+  | 'DEVICE_ID'           // Geraete-Kennungen
+  | 'LOCATION_DATA'       // Standortdaten
+  | 'USAGE_DATA'          // Nutzungsdaten
+  | 'COMMUNICATION_DATA'  // Kommunikationsdaten
+  | 'CONTRACT_DATA'       // Vertragsdaten
+  | 'LOGIN_DATA'          // Login-Daten
+  // Besondere Kategorien Art. 9 DSGVO
+  | 'HEALTH_DATA'         // Gesundheitsdaten
+  | 'GENETIC_DATA'        // Genetische Daten
+  | 'BIOMETRIC_DATA'      // Biometrische Daten
+  | 'RACIAL_ETHNIC'       // Rassische/Ethnische Herkunft
+  | 'POLITICAL_OPINIONS'  // Politische Meinungen
+  | 'RELIGIOUS_BELIEFS'   // Religiose Ueberzeugungen
+  | 'TRADE_UNION'         // Gewerkschaftszugehoerigkeit
+  | 'SEX_LIFE'            // Sexualleben/Orientierung
+  // Art. 10 DSGVO
+  | 'CRIMINAL_DATA'       // Strafrechtliche Daten
+  | 'OTHER'
+
+export type RecipientCategoryType =
+  | 'INTERNAL'            // Interne Stellen
+  | 'GROUP_COMPANY'       // Konzernunternehmen
+  | 'PROCESSOR'           // Auftragsverarbeiter
+  | 'CONTROLLER'          // Verantwortlicher
+  | 'AUTHORITY'           // Behoerden
+  | 'OTHER'
+
+export type LegalBasisType =
+  // Art. 6 Abs. 1 DSGVO
+  | 'CONSENT'             // lit. a - Einwilligung
+  | 'CONTRACT'            // lit. b - Vertragsdurchfuehrung
+  | 'LEGAL_OBLIGATION'    // lit. c - Rechtliche Verpflichtung
+  | 'VITAL_INTEREST'      // lit. d - Lebenswichtige Interessen
+  | 'PUBLIC_TASK'         // lit. e - Oeffentliche Aufgabe
+  | 'LEGITIMATE_INTEREST' // lit. f - Berechtigtes Interesse
+  // Art. 9 Abs. 2 DSGVO (besondere Kategorien)
+  | 'ART9_CONSENT'        // lit. a - Ausdrueckliche Einwilligung
+  | 'ART9_EMPLOYMENT'     // lit. b - Arbeitsrecht
+  | 'ART9_VITAL_INTEREST' // lit. c - Lebenswichtige Interessen
+  | 'ART9_FOUNDATION'     // lit. d - Stiftung/Verein
+  | 'ART9_PUBLIC'         // lit. e - Offenkundig oeffentlich
+  | 'ART9_LEGAL_CLAIMS'   // lit. f - Rechtsansprueche
+  | 'ART9_PUBLIC_INTEREST'// lit. g - Oeffentliches Interesse
+  | 'ART9_HEALTH'         // lit. h - Gesundheitsversorgung
+  | 'ART9_PUBLIC_HEALTH'  // lit. i - Oeffentliche Gesundheit
+  | 'ART9_ARCHIVING'      // lit. j - Archivzwecke
+
+export type TransferMechanismType =
+  | 'ADEQUACY_DECISION'   // Angemessenheitsbeschluss
+  | 'SCC_CONTROLLER'      // SCC Controller-to-Controller
+  | 'SCC_PROCESSOR'       // SCC Controller-to-Processor
+  | 'BCR'                 // Binding Corporate Rules
+  | 'DEROGATION_CONSENT'  // Ausdrueckliche Einwilligung
+  | 'DEROGATION_CONTRACT' // Vertragserfuellung
+  | 'DEROGATION_LEGAL'    // Rechtsansprueche
+  | 'DEROGATION_PUBLIC'   // Oeffentliches Interesse
+  | 'CERTIFICATION'       // Zertifizierung
+  | 'CODE_OF_CONDUCT'     // Verhaltensregeln
+
+export type DataSourceType =
+  | 'DATA_SUBJECT'        // Betroffene Person selbst
+  | 'THIRD_PARTY'         // Dritte
+  | 'PUBLIC_SOURCE'       // Oeffentliche Quellen
+  | 'AUTOMATED'           // Automatisiert generiert
+  | 'EMPLOYEE'            // Mitarbeiter
+  | 'OTHER'
+
+// ==========================================
+// INTERFACES - VVT / PROCESSING ACTIVITIES
+// ==========================================
+
+export interface LegalBasis {
+  type: LegalBasisType
+  description?: string
+  reference?: string // z.B. "§ 26 BDSG"
+}
+
+export interface RecipientCategory {
+  type: RecipientCategoryType
+  name: string
+  description?: string
+  isThirdCountry?: boolean
+  country?: string
+}
+
+export interface ThirdCountryTransfer {
+  country: string // ISO 3166-1 alpha-2
+  recipient: string
+  transferMechanism: TransferMechanismType
+  sccVersion?: string
+  tiaCompleted?: boolean
+  tiaDate?: Date
+  additionalMeasures?: string[]
+}
+
+export interface RetentionPeriod {
+  duration?: number // in Monaten
+  durationUnit?: 'DAYS' | 'MONTHS' | 'YEARS'
+  description: LocalizedText
+  legalBasis?: string // z.B. "HGB § 257", "AO § 147"
+  deletionProcedure?: string
+}
+
+export interface DataSource {
+  type: DataSourceType
+  description?: string
+}
+
+export interface SystemReference {
+  systemId: string
+  name: string
+  description?: string
+  type?: string // CRM, ERP, etc.
+}
+
+export interface DataFlow {
+  sourceSystem?: string
+  targetSystem?: string
+  description: string
+  dataCategories: PersonalDataCategory[]
+}
+
+export interface ProcessingActivity {
+  id: string
+  tenantId: string
+
+  // Pflichtfelder Art. 30(1) DSGVO
+  vvtId: string // Eindeutige VVT-Nummer (z.B. VVT-2024-001)
+  name: LocalizedText
+  responsible: ResponsibleParty
+  dpoContact?: Contact
+  purposes: LocalizedText[]
+  dataSubjectCategories: DataSubjectCategory[]
+  personalDataCategories: PersonalDataCategory[]
+  recipientCategories: RecipientCategory[]
+  thirdCountryTransfers: ThirdCountryTransfer[]
+  retentionPeriod: RetentionPeriod
+  technicalMeasures: string[] // TOM-Referenzen
+
+  // Empfohlene Zusatzfelder
+  legalBasis: LegalBasis[]
+  dataSources: DataSource[]
+  systems: SystemReference[]
+  dataFlows: DataFlow[]
+  protectionLevel: ProtectionLevel
+  dpiaRequired: boolean
+  dpiaJustification?: string
+  subProcessors: string[] // Vendor-IDs
+  legalRetentionBasis?: string
+
+  // Workflow
+  status: ProcessingActivityStatus
+  owner: string
+  lastReviewDate?: Date
+  nextReviewDate?: Date
+
+  createdAt: Date
+  updatedAt: Date
+}
diff --git a/admin-lehrer/lib/sdk/vendor-compliance/types-risk.ts b/admin-lehrer/lib/sdk/vendor-compliance/types-risk.ts
new file mode 100644
index 0000000..3a23c3b
--- /dev/null
+++ b/admin-lehrer/lib/sdk/vendor-compliance/types-risk.ts
@@ -0,0 +1,147 @@
+/**
+ * Risk & Controls Types
+ *
+ * Types for risk assessment and control management:
+ * - Risk scoring (likelihood x impact matrix)
+ * - Control definitions and instances
+ * - Evidence tracking
+ */
+
+import type { LocalizedText } from './types-common'
+import type { ReviewFrequency } from './types-vendor'
+
+// ==========================================
+// ENUMS - RISK & CONTROLS
+// ==========================================
+
+export type ControlDomain =
+  | 'TRANSFER'            // Drittlandtransfer
+  | 'AUDIT'               // Auditrechte
+  | 'DELETION'            // Loeschung
+  | 'INCIDENT'            // Incident Response
+  | 'SUBPROCESSOR'        // Unterauftragnehmer
+  | 'TOM'                 // Tech/Org Massnahmen
+  | 'CONTRACT'            // Vertragliche Grundlagen
+  | 'DATA_SUBJECT'        // Betroffenenrechte
+  | 'SECURITY'            // Sicherheit
+  | 'GOVERNANCE'          // Governance
+
+export type ControlStatus =
+  | 'PASS'
+  | 'PARTIAL'
+  | 'FAIL'
+  | 'NOT_APPLICABLE'
+  | 'PLANNED'
+
+export type RiskLevel = 'LOW' | 'MEDIUM' | 'HIGH' | 'CRITICAL'
+
+export type EntityType = 'VENDOR' | 'PROCESSING_ACTIVITY' | 'CONTRACT'
+
+export type EvidenceType = 'DOCUMENT' | 'SCREENSHOT' | 'LINK' | 'ATTESTATION'
+
+// ==========================================
+// INTERFACES - RISK & CONTROLS
+// ==========================================
+
+export interface RiskFactor {
+  id: string
+  name: LocalizedText
+  category: string
+  weight: number
+  value: number // 1-5
+  rationale?: string
+}
+
+export interface RiskScore {
+  likelihood: 1 | 2 | 3 | 4 | 5
+  impact: 1 | 2 | 3 | 4 | 5
+  score: number // likelihood * impact (1-25)
+  level: RiskLevel
+  rationale: string
+}
+
+export interface RiskAssessment {
+  id: string
+  tenantId: string
+  entityType: EntityType
+  entityId: string
+
+  // Bewertung
+  inherentRisk: RiskScore
+  residualRisk: RiskScore
+
+  // Faktoren
+  riskFactors: RiskFactor[]
+  mitigatingControls: string[] // Control-IDs
+
+  // Workflow
+  assessedBy: string
+  assessedAt: Date
+  approvedBy?: string
+  approvedAt?: Date
+
+  nextAssessmentDate: Date
+}
+
+export interface Control {
+  id: string // z.B. VND-TRF-01
+  domain: ControlDomain
+
+  title: LocalizedText
+  description: LocalizedText
+  passCriteria: LocalizedText
+
+  // Mapping
+  requirements: string[] // Art. 28 Abs. 3 lit. a, ISO 27001 A.15.1.2
+
+  // Standard
+  isRequired: boolean
+  defaultFrequency: ReviewFrequency
+}
+
+export interface ControlInstance {
+  id: string
+  tenantId: string
+  controlId: string
+  entityType: EntityType
+  entityId: string
+
+  // Status
+  status: ControlStatus
+
+  // Evidenz
+  evidenceIds: string[]
+
+  // Workflow
+  lastAssessedAt: Date
+  lastAssessedBy: string
+  nextAssessmentDate: Date
+
+  notes?: string
+}
+
+export interface Evidence {
+  id: string
+  tenantId: string
+  controlInstanceId: string
+
+  type: EvidenceType
+  title: string
+  description?: string
+
+  // Fuer Dokumente
+  storagePath?: string
+  fileName?: string
+
+  // Fuer Links
+  url?: string
+
+  // Fuer Attestation
+  attestedBy?: string
+  attestedAt?: Date
+
+  validFrom: Date
+  validUntil?: Date
+
+  createdAt: Date
+}
diff --git a/admin-lehrer/lib/sdk/vendor-compliance/types-state.ts b/admin-lehrer/lib/sdk/vendor-compliance/types-state.ts
new file mode 100644
index 0000000..c2cd84a
--- /dev/null
+++ b/admin-lehrer/lib/sdk/vendor-compliance/types-state.ts
@@ -0,0 +1,263 @@
+/**
+ * State Management Types
+ *
+ * Types for React context state management:
+ * - Reducer actions (VendorComplianceAction)
+ * - State shape (VendorComplianceState)
+ * - Context value with computed properties and action methods
+ * - Statistics and API response types
+ * - Form data types
+ */
+
+import type React from 'react'
+import type { LocalizedText, Contact, ResponsibleParty, Address } from './types-common'
+import type {
+  ProcessingActivity,
+  ProcessingActivityStatus,
+  DataSubjectCategory,
+  PersonalDataCategory,
+  RecipientCategory,
+  ThirdCountryTransfer,
+  RetentionPeriod,
+  LegalBasis,
+  DataSource,
+  SystemReference,
+  DataFlow,
+  ProtectionLevel,
+  TransferMechanismType,
+} from './types-processing'
+import type {
+  Vendor,
+  VendorStatus,
+  VendorRole,
+  ServiceCategory,
+  DataAccessLevel,
+  ProcessingLocation,
+  Certification,
+  ReviewFrequency,
+} from './types-vendor'
+import type {
+  ContractDocument,
+  ContractStatus,
+  DocumentType,
+} from './types-contract'
+import type {
+  Finding,
+  FindingType,
+  FindingSeverity,
+} from './types-finding'
+import type {
+  Control,
+  ControlInstance,
+  RiskAssessment,
+  RiskLevel,
+} from './types-risk'
+import type { ExportFormat } from './types-audit'
+
+// ==========================================
+// STATE MANAGEMENT - ACTIONS
+// ==========================================
+
+export type VendorComplianceAction =
+  // Processing Activities
+  | { type: 'SET_PROCESSING_ACTIVITIES'; payload: ProcessingActivity[] }
+  | { type: 'ADD_PROCESSING_ACTIVITY'; payload: ProcessingActivity }
+  | { type: 'UPDATE_PROCESSING_ACTIVITY'; payload: { id: string; data: Partial<ProcessingActivity> } }
+  | { type: 'DELETE_PROCESSING_ACTIVITY'; payload: string }
+  // Vendors
+  | { type: 'SET_VENDORS'; payload: Vendor[] }
+  | { type: 'ADD_VENDOR'; payload: Vendor }
+  | { type: 'UPDATE_VENDOR'; payload: { id: string; data: Partial<Vendor> } }
+  | { type: 'DELETE_VENDOR'; payload: string }
+  // Contracts
+  | { type: 'SET_CONTRACTS'; payload: ContractDocument[] }
+  | { type: 'ADD_CONTRACT'; payload: ContractDocument }
+  | { type: 'UPDATE_CONTRACT'; payload: { id: string; data: Partial<ContractDocument> } }
+  | { type: 'DELETE_CONTRACT'; payload: string }
+  // Findings
+  | { type: 'SET_FINDINGS'; payload: Finding[] }
+  | { type: 'ADD_FINDINGS'; payload: Finding[] }
+  | { type: 'UPDATE_FINDING'; payload: { id: string; data: Partial<Finding> } }
+  // Controls
+  | { type: 'SET_CONTROLS'; payload: Control[] }
+  | { type: 'SET_CONTROL_INSTANCES'; payload: ControlInstance[] }
+  | { type: 'UPDATE_CONTROL_INSTANCE'; payload: { id: string; data: Partial<ControlInstance> } }
+  // Risk Assessments
+  | { type: 'SET_RISK_ASSESSMENTS'; payload: RiskAssessment[] }
+  | { type: 'UPDATE_RISK_ASSESSMENT'; payload: { id: string; data: Partial<RiskAssessment> } }
+  // UI State
+  | { type: 'SET_LOADING'; payload: boolean }
+  | { type: 'SET_ERROR'; payload: string | null }
+  | { type: 'SET_SELECTED_VENDOR'; payload: string | null }
+  | { type: 'SET_SELECTED_ACTIVITY'; payload: string | null }
+  | { type: 'SET_ACTIVE_TAB'; payload: string }
+
+// ==========================================
+// STATE MANAGEMENT - STATE
+// ==========================================
+
+export interface VendorComplianceState {
+  // Data
+  processingActivities: ProcessingActivity[]
+  vendors: Vendor[]
+  contracts: ContractDocument[]
+  findings: Finding[]
+  controls: Control[]
+  controlInstances: ControlInstance[]
+  riskAssessments: RiskAssessment[]
+
+  // UI State
+  isLoading: boolean
+  error: string | null
+  selectedVendorId: string | null
+  selectedActivityId: string | null
+  activeTab: string
+
+  // Metadata
+  lastModified: Date | null
+}
+
+// ==========================================
+// STATISTICS INTERFACES
+// ==========================================
+
+export interface VendorStatistics {
+  total: number
+  byStatus: Record<VendorStatus, number>
+  byRole: Record<VendorRole, number>
+  byRiskLevel: Record<RiskLevel, number>
+  pendingReviews: number
+  withExpiredContracts: number
+}
+
+export interface ComplianceStatistics {
+  averageComplianceScore: number
+  findingsByType: Record<FindingType, number>
+  findingsBySeverity: Record<FindingSeverity, number>
+  openFindings: number
+  resolvedFindings: number
+  controlPassRate: number
+}
+
+export interface RiskOverview {
+  averageInherentRisk: number
+  averageResidualRisk: number
+  highRiskVendors: number
+  criticalFindings: number
+  transfersToThirdCountries: number
+}
+
+// ==========================================
+// CONTEXT VALUE
+// ==========================================
+
+export interface VendorComplianceContextValue extends VendorComplianceState {
+  // Dispatch
+  dispatch: React.Dispatch<VendorComplianceAction>
+
+  // Computed
+  vendorStats: VendorStatistics
+  complianceStats: ComplianceStatistics
+  riskOverview: RiskOverview
+
+  // Actions - Processing Activities
+  createProcessingActivity: (data: Omit<ProcessingActivity, 'id' | 'tenantId' | 'createdAt' | 'updatedAt'>) => Promise<ProcessingActivity>
+  updateProcessingActivity: (id: string, data: Partial<ProcessingActivity>) => Promise<void>
+  deleteProcessingActivity: (id: string) => Promise<void>
+  duplicateProcessingActivity: (id: string) => Promise<ProcessingActivity>
+
+  // Actions - Vendors
+  createVendor: (data: Omit<Vendor, 'id' | 'tenantId' | 'createdAt' | 'updatedAt'>) => Promise<Vendor>
+  updateVendor: (id: string, data: Partial<Vendor>) => Promise<void>
+  deleteVendor: (id: string) => Promise<void>
+
+  // Actions - Contracts
+  uploadContract: (vendorId: string, file: File, metadata: Partial<ContractDocument>) => Promise<ContractDocument>
+  updateContract: (id: string, data: Partial<ContractDocument>) => Promise<void>
+  deleteContract: (id: string) => Promise<void>
+  startContractReview: (contractId: string) => Promise<void>
+
+  // Actions - Findings
+  updateFinding: (id: string, data: Partial<Finding>) => Promise<void>
+  resolveFinding: (id: string, resolution: string) => Promise<void>
+
+  // Actions - Controls
+  updateControlInstance: (id: string, data: Partial<ControlInstance>) => Promise<void>
+
+  // Actions - Export
+  exportVVT: (format: ExportFormat, activityIds?: string[]) => Promise<string>
+  exportVendorAuditPack: (vendorId: string, format: ExportFormat) => Promise<string>
+  exportRoPA: (format: ExportFormat) => Promise<string>
+
+  // Data Loading
+  loadData: () => Promise<void>
+  refresh: () => Promise<void>
+}
+
+// ==========================================
+// API RESPONSE TYPES
+// ==========================================
+
+export interface ApiResponse<T> {
+  success: boolean
+  data?: T
+  error?: string
+  timestamp: string
+}
+
+export interface PaginatedResponse<T> extends ApiResponse<T[]> {
+  pagination: {
+    page: number
+    pageSize: number
+    total: number
+    totalPages: number
+  }
+}
+
+// ==========================================
+// FORM TYPES
+// ==========================================
+
+export interface ProcessingActivityFormData {
+  vvtId: string
+  name: LocalizedText
+  responsible: ResponsibleParty
+  dpoContact?: Contact
+  purposes: LocalizedText[]
+  dataSubjectCategories: DataSubjectCategory[]
+  personalDataCategories: PersonalDataCategory[]
+  recipientCategories: RecipientCategory[]
+  thirdCountryTransfers: ThirdCountryTransfer[]
+  retentionPeriod: RetentionPeriod
+  technicalMeasures: string[]
+  legalBasis: LegalBasis[]
+  dataSources: DataSource[]
+  systems: SystemReference[]
+  dataFlows: DataFlow[]
+  protectionLevel: ProtectionLevel
+  dpiaRequired: boolean
+  dpiaJustification?: string
+  subProcessors: string[]
+  owner: string
+}
+
+export interface VendorFormData {
+  name: string
+  legalForm?: string
+  country: string
+  address: Address
+  website?: string
+  role: VendorRole
+  serviceDescription: string
+  serviceCategory: ServiceCategory
+  dataAccessLevel: DataAccessLevel
+  processingLocations: ProcessingLocation[]
+  transferMechanisms: TransferMechanismType[]
+  certifications: Certification[]
+  primaryContact: Contact
+  dpoContact?: Contact
+  securityContact?: Contact
+  contractTypes: DocumentType[]
+  reviewFrequency: ReviewFrequency
+  notes?: string
+}
diff --git a/admin-lehrer/lib/sdk/vendor-compliance/types-vendor.ts b/admin-lehrer/lib/sdk/vendor-compliance/types-vendor.ts
new file mode 100644
index 0000000..5bcba93
--- /dev/null
+++ b/admin-lehrer/lib/sdk/vendor-compliance/types-vendor.ts
@@ -0,0 +1,146 @@
+/**
+ * Vendor Types
+ *
+ * Types for vendor/supplier management:
+ * - Vendor roles, statuses, service categories
+ * - Processing locations, certifications
+ * - Vendor interface with risk scoring
+ */
+
+import type { Address, Contact } from './types-common'
+import type { DocumentType } from './types-contract'
+import type { TransferMechanismType } from './types-processing'
+
+// ==========================================
+// ENUMS - VENDOR
+// ==========================================
+
+export type VendorRole =
+  | 'PROCESSOR'           // Auftragsverarbeiter
+  | 'JOINT_CONTROLLER'    // Gemeinsam Verantwortlicher
+  | 'CONTROLLER'          // Eigenstaendiger Verantwortlicher
+  | 'SUB_PROCESSOR'       // Unterauftragnehmer
+  | 'THIRD_PARTY'         // Dritter (kein Datenzugriff)
+
+export type ServiceCategory =
+  | 'HOSTING'
+  | 'CLOUD_INFRASTRUCTURE'
+  | 'ANALYTICS'
+  | 'CRM'
+  | 'ERP'
+  | 'HR_SOFTWARE'
+  | 'PAYMENT'
+  | 'EMAIL'
+  | 'MARKETING'
+  | 'SUPPORT'
+  | 'SECURITY'
+  | 'INTEGRATION'
+  | 'CONSULTING'
+  | 'LEGAL'
+  | 'ACCOUNTING'
+  | 'COMMUNICATION'
+  | 'STORAGE'
+  | 'BACKUP'
+  | 'CDN'
+  | 'OTHER'
+
+export type DataAccessLevel =
+  | 'NONE'                // Kein Datenzugriff
+  | 'POTENTIAL'           // Potenzieller Zugriff (z.B. Admin)
+  | 'ADMINISTRATIVE'      // Administrativer Zugriff
+  | 'CONTENT'             // Inhaltlicher Zugriff
+
+export type VendorStatus =
+  | 'ACTIVE'
+  | 'INACTIVE'
+  | 'PENDING_REVIEW'
+  | 'TERMINATED'
+
+export type ReviewFrequency =
+  | 'QUARTERLY'
+  | 'SEMI_ANNUAL'
+  | 'ANNUAL'
+  | 'BIENNIAL'
+
+// ==========================================
+// INTERFACES - VENDOR
+// ==========================================
+
+export interface ProcessingLocation {
+  country: string // ISO 3166-1 alpha-2
+  region?: string
+  city?: string
+  dataCenter?: string
+  isEU: boolean
+  isAdequate: boolean // Angemessenheitsbeschluss
+  type?: string // e.g., 'primary', 'backup', 'disaster-recovery'
+  description?: string
+  isPrimary?: boolean
+}
+
+export interface Certification {
+  type: string // ISO 27001, SOC2, TISAX, C5, etc.
+  issuer?: string
+  issuedDate?: Date
+  expirationDate?: Date
+  scope?: string
+  certificateNumber?: string
+  documentId?: string // Referenz zum hochgeladenen Zertifikat
+}
+
+export interface Vendor {
+  id: string
+  tenantId: string
+
+  // Stammdaten
+  name: string
+  legalForm?: string
+  country: string
+  address: Address
+  website?: string
+
+  // Rolle
+  role: VendorRole
+  serviceDescription: string
+  serviceCategory: ServiceCategory
+
+  // Datenzugriff
+  dataAccessLevel: DataAccessLevel
+  processingLocations: ProcessingLocation[]
+  transferMechanisms: TransferMechanismType[]
+
+  // Zertifizierungen
+  certifications: Certification[]
+
+  // Kontakte
+  primaryContact: Contact
+  dpoContact?: Contact
+  securityContact?: Contact
+
+  // Vertraege
+  contractTypes: DocumentType[]
+  contracts: string[] // Contract-IDs
+
+  // Risiko
+  inherentRiskScore: number // 0-100 (auto-berechnet)
+  residualRiskScore: number // 0-100 (nach Controls)
+  manualRiskAdjustment?: number
+  riskJustification?: string
+
+  // Review
+  reviewFrequency: ReviewFrequency
+  lastReviewDate?: Date
+  nextReviewDate?: Date
+
+  // Workflow
+  status: VendorStatus
+
+  // Linked Processing Activities
+  processingActivityIds: string[]
+
+  // Notes
+  notes?: string
+
+  createdAt: Date
+  updatedAt: Date
+}
diff --git a/admin-lehrer/lib/sdk/vendor-compliance/types.ts b/admin-lehrer/lib/sdk/vendor-compliance/types.ts
index d0d81d2..20aa816 100644
--- a/admin-lehrer/lib/sdk/vendor-compliance/types.ts
+++ b/admin-lehrer/lib/sdk/vendor-compliance/types.ts
@@ -1,1217 +1,27 @@
 /**
  * Vendor & Contract Compliance Module (VVT/RoPA)
  *
- * Types and interfaces for:
- * - VVT (Verarbeitungsverzeichnis) - Art. 30 DSGVO Controller-Perspektive
- * - RoPA (Records of Processing Activities) - Processor-Perspektive
- * - Vendor Register - Lieferanten-/Auftragsverarbeiter-Verwaltung
- * - Contract Reviewer - LLM-gestuetzte Vertragspruefung mit Citations
- * - Risk & Controls - Risikobewertung und Massnahmenmanagement
- * - Audit Reports - Automatisierte Berichtsgenerierung
+ * Barrel re-export for all domain-specific type files.
+ * All imports from './types' continue to work unchanged.
+ *
+ * Split into:
+ * - types-common.ts      — LocalizedText, Address, Contact, Organization
+ * - types-processing.ts  — VVT/RoPA enums & ProcessingActivity
+ * - types-vendor.ts      — Vendor roles, statuses, Vendor interface
+ * - types-contract.ts    — Contract document types & interfaces
+ * - types-finding.ts     — Finding classification & Citation
+ * - types-risk.ts        — Risk scoring, Controls, Evidence
+ * - types-audit.ts       — Audit reports & export formats
+ * - types-state.ts       — State management, statistics, forms, API types
+ * - types-helpers.ts     — Helper functions & metadata constants
  */
 
-// ==========================================
-// LOCALIZED TEXT
-// ==========================================
-
-export interface LocalizedText {
-  de: string
-  en: string
-}
-
-// ==========================================
-// COMMON TYPES
-// ==========================================
-
-export interface Address {
-  street: string
-  city: string
-  postalCode: string
-  country: string // ISO 3166-1 alpha-2
-  state?: string
-}
-
-export interface Contact {
-  name: string
-  email: string
-  phone?: string
-  department?: string
-  role?: string
-}
-
-export interface ResponsibleParty {
-  organizationName: string
-  legalForm?: string
-  address: Address
-  contact: Contact
-}
-
-// ==========================================
-// ORGANISATION / TENANT
-// ==========================================
-
-export interface Organization {
-  id: string
-  name: string
-  legalForm: string // GmbH, AG, e.V., etc.
-  address: Address
-  country: string // ISO 3166-1 alpha-2
-  vatId?: string
-  dpoContact: Contact // Datenschutzbeauftragter
-  createdAt: Date
-  updatedAt: Date
-}
-
-// ==========================================
-// ENUMS - VVT / PROCESSING ACTIVITIES
-// ==========================================
-
-export type ProcessingActivityStatus = 'DRAFT' | 'REVIEW' | 'APPROVED' | 'ARCHIVED'
-
-export type ProtectionLevel = 'LOW' | 'MEDIUM' | 'HIGH'
-
-export type DataSubjectCategory =
-  | 'EMPLOYEES'           // Beschaeftigte
-  | 'APPLICANTS'          // Bewerber
-  | 'CUSTOMERS'           // Kunden
-  | 'PROSPECTIVE_CUSTOMERS' // Interessenten
-  | 'SUPPLIERS'           // Lieferanten
-  | 'BUSINESS_PARTNERS'   // Geschaeftspartner
-  | 'VISITORS'            // Besucher
-  | 'WEBSITE_USERS'       // Website-Nutzer
-  | 'APP_USERS'           // App-Nutzer
-  | 'NEWSLETTER_SUBSCRIBERS' // Newsletter-Abonnenten
-  | 'MEMBERS'             // Mitglieder
-  | 'PATIENTS'            // Patienten
-  | 'STUDENTS'            // Schueler/Studenten
-  | 'MINORS'              // Minderjaehrige
-  | 'OTHER'
-
-export type PersonalDataCategory =
-  | 'NAME'                // Name
-  | 'CONTACT'             // Kontaktdaten
-  | 'ADDRESS'             // Adressdaten
-  | 'DOB'                 // Geburtsdatum
-  | 'ID_NUMBER'           // Ausweisnummern
-  | 'SOCIAL_SECURITY'     // Sozialversicherungsnummer
-  | 'TAX_ID'              // Steuer-ID
-  | 'BANK_ACCOUNT'        // Bankverbindung
-  | 'PAYMENT_DATA'        // Zahlungsdaten
-  | 'EMPLOYMENT_DATA'     // Beschaeftigungsdaten
-  | 'SALARY_DATA'         // Gehaltsdaten
-  | 'EDUCATION_DATA'      // Bildungsdaten
-  | 'PHOTO_VIDEO'         // Fotos/Videos
-  | 'IP_ADDRESS'          // IP-Adressen
-  | 'DEVICE_ID'           // Geraete-Kennungen
-  | 'LOCATION_DATA'       // Standortdaten
-  | 'USAGE_DATA'          // Nutzungsdaten
-  | 'COMMUNICATION_DATA'  // Kommunikationsdaten
-  | 'CONTRACT_DATA'       // Vertragsdaten
-  | 'LOGIN_DATA'          // Login-Daten
-  // Besondere Kategorien Art. 9 DSGVO
-  | 'HEALTH_DATA'         // Gesundheitsdaten
-  | 'GENETIC_DATA'        // Genetische Daten
-  | 'BIOMETRIC_DATA'      // Biometrische Daten
-  | 'RACIAL_ETHNIC'       // Rassische/Ethnische Herkunft
-  | 'POLITICAL_OPINIONS'  // Politische Meinungen
-  | 'RELIGIOUS_BELIEFS'   // Religiose Ueberzeugungen
-  | 'TRADE_UNION'         // Gewerkschaftszugehoerigkeit
-  | 'SEX_LIFE'            // Sexualleben/Orientierung
-  // Art. 10 DSGVO
-  | 'CRIMINAL_DATA'       // Strafrechtliche Daten
-  | 'OTHER'
-
-export type RecipientCategoryType =
-  | 'INTERNAL'            // Interne Stellen
-  | 'GROUP_COMPANY'       // Konzernunternehmen
-  | 'PROCESSOR'           // Auftragsverarbeiter
-  | 'CONTROLLER'          // Verantwortlicher
-  | 'AUTHORITY'           // Behoerden
-  | 'OTHER'
-
-export type LegalBasisType =
-  // Art. 6 Abs. 1 DSGVO
-  | 'CONSENT'             // lit. a - Einwilligung
-  | 'CONTRACT'            // lit. b - Vertragsdurchfuehrung
-  | 'LEGAL_OBLIGATION'    // lit. c - Rechtliche Verpflichtung
-  | 'VITAL_INTEREST'      // lit. d - Lebenswichtige Interessen
-  | 'PUBLIC_TASK'         // lit. e - Oeffentliche Aufgabe
-  | 'LEGITIMATE_INTEREST' // lit. f - Berechtigtes Interesse
-  // Art. 9 Abs. 2 DSGVO (besondere Kategorien)
-  | 'ART9_CONSENT'        // lit. a - Ausdrueckliche Einwilligung
-  | 'ART9_EMPLOYMENT'     // lit. b - Arbeitsrecht
-  | 'ART9_VITAL_INTEREST' // lit. c - Lebenswichtige Interessen
-  | 'ART9_FOUNDATION'     // lit. d - Stiftung/Verein
-  | 'ART9_PUBLIC'         // lit. e - Offenkundig oeffentlich
-  | 'ART9_LEGAL_CLAIMS'   // lit. f - Rechtsansprueche
-  | 'ART9_PUBLIC_INTEREST'// lit. g - Oeffentliches Interesse
-  | 'ART9_HEALTH'         // lit. h - Gesundheitsversorgung
-  | 'ART9_PUBLIC_HEALTH'  // lit. i - Oeffentliche Gesundheit
-  | 'ART9_ARCHIVING'      // lit. j - Archivzwecke
-
-export type TransferMechanismType =
-  | 'ADEQUACY_DECISION'   // Angemessenheitsbeschluss
-  | 'SCC_CONTROLLER'      // SCC Controller-to-Controller
-  | 'SCC_PROCESSOR'       // SCC Controller-to-Processor
-  | 'BCR'                 // Binding Corporate Rules
-  | 'DEROGATION_CONSENT'  // Ausdrueckliche Einwilligung
-  | 'DEROGATION_CONTRACT' // Vertragserfuellung
-  | 'DEROGATION_LEGAL'    // Rechtsansprueche
-  | 'DEROGATION_PUBLIC'   // Oeffentliches Interesse
-  | 'CERTIFICATION'       // Zertifizierung
-  | 'CODE_OF_CONDUCT'     // Verhaltensregeln
-
-export type DataSourceType =
-  | 'DATA_SUBJECT'        // Betroffene Person selbst
-  | 'THIRD_PARTY'         // Dritte
-  | 'PUBLIC_SOURCE'       // Oeffentliche Quellen
-  | 'AUTOMATED'           // Automatisiert generiert
-  | 'EMPLOYEE'            // Mitarbeiter
-  | 'OTHER'
-
-// ==========================================
-// ENUMS - VENDOR
-// ==========================================
-
-export type VendorRole =
-  | 'PROCESSOR'           // Auftragsverarbeiter
-  | 'JOINT_CONTROLLER'    // Gemeinsam Verantwortlicher
-  | 'CONTROLLER'          // Eigenstaendiger Verantwortlicher
-  | 'SUB_PROCESSOR'       // Unterauftragnehmer
-  | 'THIRD_PARTY'         // Dritter (kein Datenzugriff)
-
-export type ServiceCategory =
-  | 'HOSTING'
-  | 'CLOUD_INFRASTRUCTURE'
-  | 'ANALYTICS'
-  | 'CRM'
-  | 'ERP'
-  | 'HR_SOFTWARE'
-  | 'PAYMENT'
-  | 'EMAIL'
-  | 'MARKETING'
-  | 'SUPPORT'
-  | 'SECURITY'
-  | 'INTEGRATION'
-  | 'CONSULTING'
-  | 'LEGAL'
-  | 'ACCOUNTING'
-  | 'COMMUNICATION'
-  | 'STORAGE'
-  | 'BACKUP'
-  | 'CDN'
-  | 'OTHER'
-
-export type DataAccessLevel =
-  | 'NONE'                // Kein Datenzugriff
-  | 'POTENTIAL'           // Potenzieller Zugriff (z.B. Admin)
-  | 'ADMINISTRATIVE'      // Administrativer Zugriff
-  | 'CONTENT'             // Inhaltlicher Zugriff
-
-export type VendorStatus =
-  | 'ACTIVE'
-  | 'INACTIVE'
-  | 'PENDING_REVIEW'
-  | 'TERMINATED'
-
-export type ReviewFrequency =
-  | 'QUARTERLY'
-  | 'SEMI_ANNUAL'
-  | 'ANNUAL'
-  | 'BIENNIAL'
-
-// ==========================================
-// ENUMS - CONTRACT
-// ==========================================
-
-export type DocumentType =
-  | 'AVV'                 // Auftragsverarbeitungsvertrag
-  | 'MSA'                 // Master Service Agreement
-  | 'SLA'                 // Service Level Agreement
-  | 'SCC'                 // Standard Contractual Clauses
-  | 'NDA'                 // Non-Disclosure Agreement
-  | 'TOM_ANNEX'           // TOM-Anlage
-  | 'CERTIFICATION'       // Zertifikat
-  | 'SUB_PROCESSOR_LIST'  // Unterauftragsverarbeiter-Liste
-  | 'OTHER'
-
-export type ContractReviewStatus =
-  | 'PENDING'
-  | 'IN_PROGRESS'
-  | 'COMPLETED'
-  | 'FAILED'
-
-export type ContractStatus =
-  | 'DRAFT'
-  | 'SIGNED'
-  | 'ACTIVE'
-  | 'EXPIRED'
-  | 'TERMINATED'
-
-// ==========================================
-// ENUMS - FINDINGS
-// ==========================================
-
-export type FindingType =
-  | 'OK'                  // Anforderung erfuellt
-  | 'GAP'                 // Luecke/fehlend
-  | 'RISK'                // Risiko identifiziert
-  | 'UNKNOWN'             // Nicht eindeutig
-
-export type FindingCategory =
-  | 'AVV_CONTENT'         // Art. 28 Abs. 3 Mindestinhalte
-  | 'SUBPROCESSOR'        // Unterauftragnehmer-Regelung
-  | 'INCIDENT'            // Incident-Meldepflichten
-  | 'AUDIT_RIGHTS'        // Audit-/Inspektionsrechte
-  | 'DELETION'            // Loeschung/Rueckgabe
-  | 'TOM'                 // Technische/Org. Massnahmen
-  | 'TRANSFER'            // Drittlandtransfer
-  | 'LIABILITY'           // Haftung/Indemnity
-  | 'SLA'                 // Verfuegbarkeit
-  | 'DATA_SUBJECT_RIGHTS' // Betroffenenrechte
-  | 'CONFIDENTIALITY'     // Vertraulichkeit
-  | 'INSTRUCTION'         // Weisungsgebundenheit
-  | 'TERMINATION'         // Vertragsbeendigung
-  | 'GENERAL'             // Allgemein
-
-export type FindingSeverity = 'LOW' | 'MEDIUM' | 'HIGH' | 'CRITICAL'
-
-export type FindingStatus =
-  | 'OPEN'
-  | 'IN_PROGRESS'
-  | 'RESOLVED'
-  | 'ACCEPTED'
-  | 'FALSE_POSITIVE'
-
-// ==========================================
-// ENUMS - RISK & CONTROLS
-// ==========================================
-
-export type ControlDomain =
-  | 'TRANSFER'            // Drittlandtransfer
-  | 'AUDIT'               // Auditrechte
-  | 'DELETION'            // Loeschung
-  | 'INCIDENT'            // Incident Response
-  | 'SUBPROCESSOR'        // Unterauftragnehmer
-  | 'TOM'                 // Tech/Org Massnahmen
-  | 'CONTRACT'            // Vertragliche Grundlagen
-  | 'DATA_SUBJECT'        // Betroffenenrechte
-  | 'SECURITY'            // Sicherheit
-  | 'GOVERNANCE'          // Governance
-
-export type ControlStatus =
-  | 'PASS'
-  | 'PARTIAL'
-  | 'FAIL'
-  | 'NOT_APPLICABLE'
-  | 'PLANNED'
-
-export type RiskLevel = 'LOW' | 'MEDIUM' | 'HIGH' | 'CRITICAL'
-
-export type EntityType = 'VENDOR' | 'PROCESSING_ACTIVITY' | 'CONTRACT'
-
-export type EvidenceType = 'DOCUMENT' | 'SCREENSHOT' | 'LINK' | 'ATTESTATION'
-
-// ==========================================
-// ENUMS - EXPORT
-// ==========================================
-
-export type ReportType =
-  | 'VVT_EXPORT'
-  | 'VENDOR_AUDIT'
-  | 'ROPA'
-  | 'MANAGEMENT_SUMMARY'
-  | 'DPIA_INPUT'
-
-export type ExportFormat = 'PDF' | 'DOCX' | 'XLSX' | 'JSON'
-
-// ==========================================
-// INTERFACES - VVT / PROCESSING ACTIVITIES
-// ==========================================
-
-export interface LegalBasis {
-  type: LegalBasisType
-  description?: string
-  reference?: string // z.B. "§ 26 BDSG"
-}
-
-export interface RecipientCategory {
-  type: RecipientCategoryType
-  name: string
-  description?: string
-  isThirdCountry?: boolean
-  country?: string
-}
-
-export interface ThirdCountryTransfer {
-  country: string // ISO 3166-1 alpha-2
-  recipient: string
-  transferMechanism: TransferMechanismType
-  sccVersion?: string
-  tiaCompleted?: boolean
-  tiaDate?: Date
-  additionalMeasures?: string[]
-}
-
-export interface RetentionPeriod {
-  duration?: number // in Monaten
-  durationUnit?: 'DAYS' | 'MONTHS' | 'YEARS'
-  description: LocalizedText
-  legalBasis?: string // z.B. "HGB § 257", "AO § 147"
-  deletionProcedure?: string
-}
-
-export interface DataSource {
-  type: DataSourceType
-  description?: string
-}
-
-export interface SystemReference {
-  systemId: string
-  name: string
-  description?: string
-  type?: string // CRM, ERP, etc.
-}
-
-export interface DataFlow {
-  sourceSystem?: string
-  targetSystem?: string
-  description: string
-  dataCategories: PersonalDataCategory[]
-}
-
-export interface ProcessingActivity {
-  id: string
-  tenantId: string
-
-  // Pflichtfelder Art. 30(1) DSGVO
-  vvtId: string // Eindeutige VVT-Nummer (z.B. VVT-2024-001)
-  name: LocalizedText
-  responsible: ResponsibleParty
-  dpoContact?: Contact
-  purposes: LocalizedText[]
-  dataSubjectCategories: DataSubjectCategory[]
-  personalDataCategories: PersonalDataCategory[]
-  recipientCategories: RecipientCategory[]
-  thirdCountryTransfers: ThirdCountryTransfer[]
-  retentionPeriod: RetentionPeriod
-  technicalMeasures: string[] // TOM-Referenzen
-
-  // Empfohlene Zusatzfelder
-  legalBasis: LegalBasis[]
-  dataSources: DataSource[]
-  systems: SystemReference[]
-  dataFlows: DataFlow[]
-  protectionLevel: ProtectionLevel
-  dpiaRequired: boolean
-  dpiaJustification?: string
-  subProcessors: string[] // Vendor-IDs
-  legalRetentionBasis?: string
-
-  // Workflow
-  status: ProcessingActivityStatus
-  owner: string
-  lastReviewDate?: Date
-  nextReviewDate?: Date
-
-  createdAt: Date
-  updatedAt: Date
-}
-
-// ==========================================
-// INTERFACES - VENDOR
-// ==========================================
-
-export interface ProcessingLocation {
-  country: string // ISO 3166-1 alpha-2
-  region?: string
-  city?: string
-  dataCenter?: string
-  isEU: boolean
-  isAdequate: boolean // Angemessenheitsbeschluss
-  type?: string // e.g., 'primary', 'backup', 'disaster-recovery'
-  description?: string
-  isPrimary?: boolean
-}
-
-export interface Certification {
-  type: string // ISO 27001, SOC2, TISAX, C5, etc.
-  issuer?: string
-  issuedDate?: Date
-  expirationDate?: Date
-  scope?: string
-  certificateNumber?: string
-  documentId?: string // Referenz zum hochgeladenen Zertifikat
-}
-
-export interface Vendor {
-  id: string
-  tenantId: string
-
-  // Stammdaten
-  name: string
-  legalForm?: string
-  country: string
-  address: Address
-  website?: string
-
-  // Rolle
-  role: VendorRole
-  serviceDescription: string
-  serviceCategory: ServiceCategory
-
-  // Datenzugriff
-  dataAccessLevel: DataAccessLevel
-  processingLocations: ProcessingLocation[]
-  transferMechanisms: TransferMechanismType[]
-
-  // Zertifizierungen
-  certifications: Certification[]
-
-  // Kontakte
-  primaryContact: Contact
-  dpoContact?: Contact
-  securityContact?: Contact
-
-  // Vertraege
-  contractTypes: DocumentType[]
-  contracts: string[] // Contract-IDs
-
-  // Risiko
-  inherentRiskScore: number // 0-100 (auto-berechnet)
-  residualRiskScore: number // 0-100 (nach Controls)
-  manualRiskAdjustment?: number
-  riskJustification?: string
-
-  // Review
-  reviewFrequency: ReviewFrequency
-  lastReviewDate?: Date
-  nextReviewDate?: Date
-
-  // Workflow
-  status: VendorStatus
-
-  // Linked Processing Activities
-  processingActivityIds: string[]
-
-  // Notes
-  notes?: string
-
-  createdAt: Date
-  updatedAt: Date
-}
-
-// ==========================================
-// INTERFACES - CONTRACT
-// ==========================================
-
-export interface ContractParty {
-  role: 'CONTROLLER' | 'PROCESSOR' | 'PARTY'
-  name: string
-  address?: Address
-  signatoryName?: string
-  signatoryRole?: string
-}
-
-export interface ContractDocument {
-  id: string
-  tenantId: string
-  vendorId: string
-
-  // Dokument
-  fileName: string
-  originalName: string
-  mimeType: string
-  fileSize: number
-  storagePath: string // MinIO path
-
-  // Klassifikation
-  documentType: DocumentType
-
-  // Versioning
-  version: string
-  previousVersionId?: string
-
-  // Metadaten (extrahiert)
-  parties?: ContractParty[]
-  effectiveDate?: Date
-  expirationDate?: Date
-  autoRenewal?: boolean
-  renewalNoticePeriod?: number // Tage
-  terminationNoticePeriod?: number // Tage
-
-  // Review Status
-  reviewStatus: ContractReviewStatus
-  reviewCompletedAt?: Date
-  complianceScore?: number // 0-100
-
-  // Workflow
-  status: ContractStatus
-  signedAt?: Date
-
-  // Extracted text for search
-  extractedText?: string
-  pageCount?: number
-
-  createdAt: Date
-  updatedAt: Date
-}
-
-export interface DocumentVersion {
-  id: string
-  documentId: string
-  version: string
-  storagePath: string
-  extractedText?: string
-  pageCount: number
-  createdAt: Date
-}
-
-// ==========================================
-// INTERFACES - FINDINGS
-// ==========================================
-
-export interface Citation {
-  documentId: string
-  versionId?: string
-  page: number
-  startChar: number
-  endChar: number
-  quotedText: string
-  quoteHash: string // SHA-256 zur Verifizierung
-}
-
-export interface Finding {
-  id: string
-  tenantId: string
-  contractId: string
-  vendorId: string
-
-  // Klassifikation
-  type: FindingType
-  category: FindingCategory
-  severity: FindingSeverity
-
-  // Inhalt
-  title: LocalizedText
-  description: LocalizedText
-  recommendation?: LocalizedText
-
-  // Citations (Textstellen-Belege)
-  citations: Citation[]
-
-  // Verknuepfung
-  affectedRequirement?: string // z.B. "Art. 28 Abs. 3 lit. a DSGVO"
-  triggeredControls: string[] // Control-IDs
-
-  // Workflow
-  status: FindingStatus
-  assignee?: string
-  dueDate?: Date
-  resolution?: string
-  resolvedAt?: Date
-
-  createdAt: Date
-  updatedAt: Date
-}
-
-// ==========================================
-// INTERFACES - RISK & CONTROLS
-// ==========================================
-
-export interface RiskFactor {
-  id: string
-  name: LocalizedText
-  category: string
-  weight: number
-  value: number // 1-5
-  rationale?: string
-}
-
-export interface RiskScore {
-  likelihood: 1 | 2 | 3 | 4 | 5
-  impact: 1 | 2 | 3 | 4 | 5
-  score: number // likelihood * impact (1-25)
-  level: RiskLevel
-  rationale: string
-}
-
-export interface RiskAssessment {
-  id: string
-  tenantId: string
-  entityType: EntityType
-  entityId: string
-
-  // Bewertung
-  inherentRisk: RiskScore
-  residualRisk: RiskScore
-
-  // Faktoren
-  riskFactors: RiskFactor[]
-  mitigatingControls: string[] // Control-IDs
-
-  // Workflow
-  assessedBy: string
-  assessedAt: Date
-  approvedBy?: string
-  approvedAt?: Date
-
-  nextAssessmentDate: Date
-}
-
-export interface Control {
-  id: string // z.B. VND-TRF-01
-  domain: ControlDomain
-
-  title: LocalizedText
-  description: LocalizedText
-  passCriteria: LocalizedText
-
-  // Mapping
-  requirements: string[] // Art. 28 Abs. 3 lit. a, ISO 27001 A.15.1.2
-
-  // Standard
-  isRequired: boolean
-  defaultFrequency: ReviewFrequency
-}
-
-export interface ControlInstance {
-  id: string
-  tenantId: string
-  controlId: string
-  entityType: EntityType
-  entityId: string
-
-  // Status
-  status: ControlStatus
-
-  // Evidenz
-  evidenceIds: string[]
-
-  // Workflow
-  lastAssessedAt: Date
-  lastAssessedBy: string
-  nextAssessmentDate: Date
-
-  notes?: string
-}
-
-export interface Evidence {
-  id: string
-  tenantId: string
-  controlInstanceId: string
-
-  type: EvidenceType
-  title: string
-  description?: string
-
-  // Fuer Dokumente
-  storagePath?: string
-  fileName?: string
-
-  // Fuer Links
-  url?: string
-
-  // Fuer Attestation
-  attestedBy?: string
-  attestedAt?: Date
-
-  validFrom: Date
-  validUntil?: Date
-
-  createdAt: Date
-}
-
-// ==========================================
-// INTERFACES - AUDIT REPORTS
-// ==========================================
-
-export interface ReportScope {
-  vendorIds?: string[]
-  processingActivityIds?: string[]
-  dateRange?: { from: Date; to: Date }
-}
-
-export interface AuditReport {
-  id: string
-  tenantId: string
-
-  type: ReportType
-
-  // Scope
-  scope: ReportScope
-
-  // Generierung
-  format: ExportFormat
-  storagePath: string
-  generatedAt: Date
-  generatedBy: string
-
-  // Snapshot-Daten (fuer Revisionssicherheit)
-  snapshotHash: string // SHA-256 des Inhalts
-}
-
-// ==========================================
-// STATE MANAGEMENT - ACTIONS
-// ==========================================
-
-export type VendorComplianceAction =
-  // Processing Activities
-  | { type: 'SET_PROCESSING_ACTIVITIES'; payload: ProcessingActivity[] }
-  | { type: 'ADD_PROCESSING_ACTIVITY'; payload: ProcessingActivity }
-  | { type: 'UPDATE_PROCESSING_ACTIVITY'; payload: { id: string; data: Partial<ProcessingActivity> } }
-  | { type: 'DELETE_PROCESSING_ACTIVITY'; payload: string }
-  // Vendors
-  | { type: 'SET_VENDORS'; payload: Vendor[] }
-  | { type: 'ADD_VENDOR'; payload: Vendor }
-  | { type: 'UPDATE_VENDOR'; payload: { id: string; data: Partial<Vendor> } }
-  | { type: 'DELETE_VENDOR'; payload: string }
-  // Contracts
-  | { type: 'SET_CONTRACTS'; payload: ContractDocument[] }
-  | { type: 'ADD_CONTRACT'; payload: ContractDocument }
-  | { type: 'UPDATE_CONTRACT'; payload: { id: string; data: Partial<ContractDocument> } }
-  | { type: 'DELETE_CONTRACT'; payload: string }
-  // Findings
-  | { type: 'SET_FINDINGS'; payload: Finding[] }
-  | { type: 'ADD_FINDINGS'; payload: Finding[] }
-  | { type: 'UPDATE_FINDING'; payload: { id: string; data: Partial<Finding> } }
-  // Controls
-  | { type: 'SET_CONTROLS'; payload: Control[] }
-  | { type: 'SET_CONTROL_INSTANCES'; payload: ControlInstance[] }
-  | { type: 'UPDATE_CONTROL_INSTANCE'; payload: { id: string; data: Partial<ControlInstance> } }
-  // Risk Assessments
-  | { type: 'SET_RISK_ASSESSMENTS'; payload: RiskAssessment[] }
-  | { type: 'UPDATE_RISK_ASSESSMENT'; payload: { id: string; data: Partial<RiskAssessment> } }
-  // UI State
-  | { type: 'SET_LOADING'; payload: boolean }
-  | { type: 'SET_ERROR'; payload: string | null }
-  | { type: 'SET_SELECTED_VENDOR'; payload: string | null }
-  | { type: 'SET_SELECTED_ACTIVITY'; payload: string | null }
-  | { type: 'SET_ACTIVE_TAB'; payload: string }
-
-// ==========================================
-// STATE MANAGEMENT - STATE
-// ==========================================
-
-export interface VendorComplianceState {
-  // Data
-  processingActivities: ProcessingActivity[]
-  vendors: Vendor[]
-  contracts: ContractDocument[]
-  findings: Finding[]
-  controls: Control[]
-  controlInstances: ControlInstance[]
-  riskAssessments: RiskAssessment[]
-
-  // UI State
-  isLoading: boolean
-  error: string | null
-  selectedVendorId: string | null
-  selectedActivityId: string | null
-  activeTab: string
-
-  // Metadata
-  lastModified: Date | null
-}
-
-// ==========================================
-// CONTEXT VALUE
-// ==========================================
-
-export interface VendorComplianceContextValue extends VendorComplianceState {
-  // Dispatch
-  dispatch: React.Dispatch<VendorComplianceAction>
-
-  // Computed
-  vendorStats: VendorStatistics
-  complianceStats: ComplianceStatistics
-  riskOverview: RiskOverview
-
-  // Actions - Processing Activities
-  createProcessingActivity: (data: Omit<ProcessingActivity, 'id' | 'tenantId' | 'createdAt' | 'updatedAt'>) => Promise<ProcessingActivity>
-  updateProcessingActivity: (id: string, data: Partial<ProcessingActivity>) => Promise<void>
-  deleteProcessingActivity: (id: string) => Promise<void>
-  duplicateProcessingActivity: (id: string) => Promise<ProcessingActivity>
-
-  // Actions - Vendors
-  createVendor: (data: Omit<Vendor, 'id' | 'tenantId' | 'createdAt' | 'updatedAt'>) => Promise<Vendor>
-  updateVendor: (id: string, data: Partial<Vendor>) => Promise<void>
-  deleteVendor: (id: string) => Promise<void>
-
-  // Actions - Contracts
-  uploadContract: (vendorId: string, file: File, metadata: Partial<ContractDocument>) => Promise<ContractDocument>
-  updateContract: (id: string, data: Partial<ContractDocument>) => Promise<void>
-  deleteContract: (id: string) => Promise<void>
-  startContractReview: (contractId: string) => Promise<void>
-
-  // Actions - Findings
-  updateFinding: (id: string, data: Partial<Finding>) => Promise<void>
-  resolveFinding: (id: string, resolution: string) => Promise<void>
-
-  // Actions - Controls
-  updateControlInstance: (id: string, data: Partial<ControlInstance>) => Promise<void>
-
-  // Actions - Export
-  exportVVT: (format: ExportFormat, activityIds?: string[]) => Promise<string>
-  exportVendorAuditPack: (vendorId: string, format: ExportFormat) => Promise<string>
-  exportRoPA: (format: ExportFormat) => Promise<string>
-
-  // Data Loading
-  loadData: () => Promise<void>
-  refresh: () => Promise<void>
-}
-
-// ==========================================
-// STATISTICS INTERFACES
-// ==========================================
-
-export interface VendorStatistics {
-  total: number
-  byStatus: Record<VendorStatus, number>
-  byRole: Record<VendorRole, number>
-  byRiskLevel: Record<RiskLevel, number>
-  pendingReviews: number
-  withExpiredContracts: number
-}
-
-export interface ComplianceStatistics {
-  averageComplianceScore: number
-  findingsByType: Record<FindingType, number>
-  findingsBySeverity: Record<FindingSeverity, number>
-  openFindings: number
-  resolvedFindings: number
-  controlPassRate: number
-}
-
-export interface RiskOverview {
-  averageInherentRisk: number
-  averageResidualRisk: number
-  highRiskVendors: number
-  criticalFindings: number
-  transfersToThirdCountries: number
-}
-
-// ==========================================
-// API RESPONSE TYPES
-// ==========================================
-
-export interface ApiResponse<T> {
-  success: boolean
-  data?: T
-  error?: string
-  timestamp: string
-}
-
-export interface PaginatedResponse<T> extends ApiResponse<T[]> {
-  pagination: {
-    page: number
-    pageSize: number
-    total: number
-    totalPages: number
-  }
-}
-
-// ==========================================
-// FORM TYPES
-// ==========================================
-
-export interface ProcessingActivityFormData {
-  vvtId: string
-  name: LocalizedText
-  responsible: ResponsibleParty
-  dpoContact?: Contact
-  purposes: LocalizedText[]
-  dataSubjectCategories: DataSubjectCategory[]
-  personalDataCategories: PersonalDataCategory[]
-  recipientCategories: RecipientCategory[]
-  thirdCountryTransfers: ThirdCountryTransfer[]
-  retentionPeriod: RetentionPeriod
-  technicalMeasures: string[]
-  legalBasis: LegalBasis[]
-  dataSources: DataSource[]
-  systems: SystemReference[]
-  dataFlows: DataFlow[]
-  protectionLevel: ProtectionLevel
-  dpiaRequired: boolean
-  dpiaJustification?: string
-  subProcessors: string[]
-  owner: string
-}
-
-export interface VendorFormData {
-  name: string
-  legalForm?: string
-  country: string
-  address: Address
-  website?: string
-  role: VendorRole
-  serviceDescription: string
-  serviceCategory: ServiceCategory
-  dataAccessLevel: DataAccessLevel
-  processingLocations: ProcessingLocation[]
-  transferMechanisms: TransferMechanismType[]
-  certifications: Certification[]
-  primaryContact: Contact
-  dpoContact?: Contact
-  securityContact?: Contact
-  contractTypes: DocumentType[]
-  reviewFrequency: ReviewFrequency
-  notes?: string
-}
-
-export interface ContractUploadData {
-  vendorId: string
-  documentType: DocumentType
-  version: string
-  effectiveDate?: Date
-  expirationDate?: Date
-  autoRenewal?: boolean
-}
-
-// ==========================================
-// HELPER FUNCTIONS
-// ==========================================
-
-/**
- * Calculate risk level from score
- */
-export function getRiskLevelFromScore(score: number): RiskLevel {
-  if (score <= 4) return 'LOW'
-  if (score <= 9) return 'MEDIUM'
-  if (score <= 16) return 'HIGH'
-  return 'CRITICAL'
-}
-
-/**
- * Calculate risk score from likelihood and impact
- */
-export function calculateRiskScore(likelihood: number, impact: number): number {
-  return likelihood * impact
-}
-
-/**
- * Check if data category is special (Art. 9 DSGVO)
- */
-export function isSpecialCategory(category: PersonalDataCategory): boolean {
-  const specialCategories: PersonalDataCategory[] = [
-    'HEALTH_DATA',
-    'GENETIC_DATA',
-    'BIOMETRIC_DATA',
-    'RACIAL_ETHNIC',
-    'POLITICAL_OPINIONS',
-    'RELIGIOUS_BELIEFS',
-    'TRADE_UNION',
-    'SEX_LIFE',
-    'CRIMINAL_DATA',
-  ]
-  return specialCategories.includes(category)
-}
-
-/**
- * Check if country has adequacy decision
- */
-export function hasAdequacyDecision(countryCode: string): boolean {
-  const adequateCountries = [
-    'AD', 'AR', 'CA', 'FO', 'GG', 'IL', 'IM', 'JP', 'JE', 'NZ', 'KR', 'CH', 'GB', 'UY',
-    // EU/EEA countries
-    'AT', 'BE', 'BG', 'HR', 'CY', 'CZ', 'DK', 'EE', 'FI', 'FR', 'DE', 'GR', 'HU',
-    'IE', 'IT', 'LV', 'LT', 'LU', 'MT', 'NL', 'PL', 'PT', 'RO', 'SK', 'SI', 'ES', 'SE',
-    'IS', 'LI', 'NO',
-  ]
-  return adequateCountries.includes(countryCode.toUpperCase())
-}
-
-/**
- * Generate VVT ID
- */
-export function generateVVTId(existingIds: string[]): string {
-  const year = new Date().getFullYear()
-  const prefix = `VVT-${year}-`
-
-  const existingNumbers = existingIds
-    .filter(id => id.startsWith(prefix))
-    .map(id => parseInt(id.replace(prefix, ''), 10))
-    .filter(n => !isNaN(n))
-
-  const nextNumber = existingNumbers.length > 0 ? Math.max(...existingNumbers) + 1 : 1
-  return `${prefix}${nextNumber.toString().padStart(3, '0')}`
-}
-
-/**
- * Format date for display
- */
-export function formatDate(date: Date | string | undefined): string {
-  if (!date) return '-'
-  const d = typeof date === 'string' ? new Date(date) : date
-  return d.toLocaleDateString('de-DE', {
-    day: '2-digit',
-    month: '2-digit',
-    year: 'numeric',
-  })
-}
-
-/**
- * Get severity color class
- */
-export function getSeverityColor(severity: FindingSeverity): string {
-  switch (severity) {
-    case 'LOW': return 'text-blue-600 bg-blue-100'
-    case 'MEDIUM': return 'text-yellow-600 bg-yellow-100'
-    case 'HIGH': return 'text-orange-600 bg-orange-100'
-    case 'CRITICAL': return 'text-red-600 bg-red-100'
-  }
-}
-
-/**
- * Get status color class
- */
-export function getStatusColor(status: VendorStatus | ProcessingActivityStatus | ContractStatus): string {
-  switch (status) {
-    case 'ACTIVE':
-    case 'APPROVED':
-    case 'SIGNED':
-      return 'text-green-600 bg-green-100'
-    case 'DRAFT':
-    case 'PENDING_REVIEW':
-      return 'text-yellow-600 bg-yellow-100'
-    case 'REVIEW':
-    case 'INACTIVE':
-      return 'text-blue-600 bg-blue-100'
-    case 'ARCHIVED':
-    case 'EXPIRED':
-    case 'TERMINATED':
-      return 'text-gray-600 bg-gray-100'
-    default:
-      return 'text-gray-600 bg-gray-100'
-  }
-}
-
-// ==========================================
-// CONSTANTS - METADATA
-// ==========================================
-
-export const DATA_SUBJECT_CATEGORY_META: Record<DataSubjectCategory, LocalizedText> = {
-  EMPLOYEES: { de: 'Beschäftigte', en: 'Employees' },
-  APPLICANTS: { de: 'Bewerber', en: 'Applicants' },
-  CUSTOMERS: { de: 'Kunden', en: 'Customers' },
-  PROSPECTIVE_CUSTOMERS: { de: 'Interessenten', en: 'Prospective Customers' },
-  SUPPLIERS: { de: 'Lieferanten', en: 'Suppliers' },
-  BUSINESS_PARTNERS: { de: 'Geschäftspartner', en: 'Business Partners' },
-  VISITORS: { de: 'Besucher', en: 'Visitors' },
-  WEBSITE_USERS: { de: 'Website-Nutzer', en: 'Website Users' },
-  APP_USERS: { de: 'App-Nutzer', en: 'App Users' },
-  NEWSLETTER_SUBSCRIBERS: { de: 'Newsletter-Abonnenten', en: 'Newsletter Subscribers' },
-  MEMBERS: { de: 'Mitglieder', en: 'Members' },
-  PATIENTS: { de: 'Patienten', en: 'Patients' },
-  STUDENTS: { de: 'Schüler/Studenten', en: 'Students' },
-  MINORS: { de: 'Minderjährige', en: 'Minors' },
-  OTHER: { de: 'Sonstige', en: 'Other' },
-}
-
-export const PERSONAL_DATA_CATEGORY_META: Record<PersonalDataCategory, { label: LocalizedText; isSpecial: boolean }> = {
-  NAME: { label: { de: 'Name', en: 'Name' }, isSpecial: false },
-  CONTACT: { label: { de: 'Kontaktdaten', en: 'Contact Data' }, isSpecial: false },
-  ADDRESS: { label: { de: 'Adressdaten', en: 'Address Data' }, isSpecial: false },
-  DOB: { label: { de: 'Geburtsdatum', en: 'Date of Birth' }, isSpecial: false },
-  ID_NUMBER: { label: { de: 'Ausweisnummern', en: 'ID Numbers' }, isSpecial: false },
-  SOCIAL_SECURITY: { label: { de: 'Sozialversicherungsnummer', en: 'Social Security Number' }, isSpecial: false },
-  TAX_ID: { label: { de: 'Steuer-ID', en: 'Tax ID' }, isSpecial: false },
-  BANK_ACCOUNT: { label: { de: 'Bankverbindung', en: 'Bank Account' }, isSpecial: false },
-  PAYMENT_DATA: { label: { de: 'Zahlungsdaten', en: 'Payment Data' }, isSpecial: false },
-  EMPLOYMENT_DATA: { label: { de: 'Beschäftigungsdaten', en: 'Employment Data' }, isSpecial: false },
-  SALARY_DATA: { label: { de: 'Gehaltsdaten', en: 'Salary Data' }, isSpecial: false },
-  EDUCATION_DATA: { label: { de: 'Bildungsdaten', en: 'Education Data' }, isSpecial: false },
-  PHOTO_VIDEO: { label: { de: 'Fotos/Videos', en: 'Photos/Videos' }, isSpecial: false },
-  IP_ADDRESS: { label: { de: 'IP-Adressen', en: 'IP Addresses' }, isSpecial: false },
-  DEVICE_ID: { label: { de: 'Gerätekennungen', en: 'Device IDs' }, isSpecial: false },
-  LOCATION_DATA: { label: { de: 'Standortdaten', en: 'Location Data' }, isSpecial: false },
-  USAGE_DATA: { label: { de: 'Nutzungsdaten', en: 'Usage Data' }, isSpecial: false },
-  COMMUNICATION_DATA: { label: { de: 'Kommunikationsdaten', en: 'Communication Data' }, isSpecial: false },
-  CONTRACT_DATA: { label: { de: 'Vertragsdaten', en: 'Contract Data' }, isSpecial: false },
-  LOGIN_DATA: { label: { de: 'Login-Daten', en: 'Login Data' }, isSpecial: false },
-  HEALTH_DATA: { label: { de: 'Gesundheitsdaten', en: 'Health Data' }, isSpecial: true },
-  GENETIC_DATA: { label: { de: 'Genetische Daten', en: 'Genetic Data' }, isSpecial: true },
-  BIOMETRIC_DATA: { label: { de: 'Biometrische Daten', en: 'Biometric Data' }, isSpecial: true },
-  RACIAL_ETHNIC: { label: { de: 'Rassische/Ethnische Herkunft', en: 'Racial/Ethnic Origin' }, isSpecial: true },
-  POLITICAL_OPINIONS: { label: { de: 'Politische Meinungen', en: 'Political Opinions' }, isSpecial: true },
-  RELIGIOUS_BELIEFS: { label: { de: 'Religiöse Überzeugungen', en: 'Religious Beliefs' }, isSpecial: true },
-  TRADE_UNION: { label: { de: 'Gewerkschaftszugehörigkeit', en: 'Trade Union Membership' }, isSpecial: true },
-  SEX_LIFE: { label: { de: 'Sexualleben/Orientierung', en: 'Sex Life/Orientation' }, isSpecial: true },
-  CRIMINAL_DATA: { label: { de: 'Strafrechtliche Daten', en: 'Criminal Data' }, isSpecial: true },
-  OTHER: { label: { de: 'Sonstige', en: 'Other' }, isSpecial: false },
-}
-
-export const LEGAL_BASIS_META: Record<LegalBasisType, { label: LocalizedText; article: string }> = {
-  CONSENT: { label: { de: 'Einwilligung', en: 'Consent' }, article: 'Art. 6 Abs. 1 lit. a DSGVO' },
-  CONTRACT: { label: { de: 'Vertragserfüllung', en: 'Contract Performance' }, article: 'Art. 6 Abs. 1 lit. b DSGVO' },
-  LEGAL_OBLIGATION: { label: { de: 'Rechtliche Verpflichtung', en: 'Legal Obligation' }, article: 'Art. 6 Abs. 1 lit. c DSGVO' },
-  VITAL_INTEREST: { label: { de: 'Lebenswichtige Interessen', en: 'Vital Interests' }, article: 'Art. 6 Abs. 1 lit. d DSGVO' },
-  PUBLIC_TASK: { label: { de: 'Öffentliche Aufgabe', en: 'Public Task' }, article: 'Art. 6 Abs. 1 lit. e DSGVO' },
-  LEGITIMATE_INTEREST: { label: { de: 'Berechtigtes Interesse', en: 'Legitimate Interest' }, article: 'Art. 6 Abs. 1 lit. f DSGVO' },
-  ART9_CONSENT: { label: { de: 'Ausdrückliche Einwilligung', en: 'Explicit Consent' }, article: 'Art. 9 Abs. 2 lit. a DSGVO' },
-  ART9_EMPLOYMENT: { label: { de: 'Arbeitsrecht', en: 'Employment Law' }, article: 'Art. 9 Abs. 2 lit. b DSGVO' },
-  ART9_VITAL_INTEREST: { label: { de: 'Lebenswichtige Interessen', en: 'Vital Interests' }, article: 'Art. 9 Abs. 2 lit. c DSGVO' },
-  ART9_FOUNDATION: { label: { de: 'Stiftung/Verein', en: 'Foundation/Association' }, article: 'Art. 9 Abs. 2 lit. d DSGVO' },
-  ART9_PUBLIC: { label: { de: 'Offenkundig öffentlich', en: 'Manifestly Public' }, article: 'Art. 9 Abs. 2 lit. e DSGVO' },
-  ART9_LEGAL_CLAIMS: { label: { de: 'Rechtsansprüche', en: 'Legal Claims' }, article: 'Art. 9 Abs. 2 lit. f DSGVO' },
-  ART9_PUBLIC_INTEREST: { label: { de: 'Öffentliches Interesse', en: 'Public Interest' }, article: 'Art. 9 Abs. 2 lit. g DSGVO' },
-  ART9_HEALTH: { label: { de: 'Gesundheitsversorgung', en: 'Health Care' }, article: 'Art. 9 Abs. 2 lit. h DSGVO' },
-  ART9_PUBLIC_HEALTH: { label: { de: 'Öffentliche Gesundheit', en: 'Public Health' }, article: 'Art. 9 Abs. 2 lit. i DSGVO' },
-  ART9_ARCHIVING: { label: { de: 'Archivzwecke', en: 'Archiving Purposes' }, article: 'Art. 9 Abs. 2 lit. j DSGVO' },
-}
-
-export const VENDOR_ROLE_META: Record<VendorRole, LocalizedText> = {
-  PROCESSOR: { de: 'Auftragsverarbeiter', en: 'Processor' },
-  JOINT_CONTROLLER: { de: 'Gemeinsam Verantwortlicher', en: 'Joint Controller' },
-  CONTROLLER: { de: 'Eigenständiger Verantwortlicher', en: 'Independent Controller' },
-  SUB_PROCESSOR: { de: 'Unterauftragnehmer', en: 'Sub-Processor' },
-  THIRD_PARTY: { de: 'Dritter', en: 'Third Party' },
-}
-
-export const SERVICE_CATEGORY_META: Record<ServiceCategory, LocalizedText> = {
-  HOSTING: { de: 'Hosting', en: 'Hosting' },
-  CLOUD_INFRASTRUCTURE: { de: 'Cloud-Infrastruktur', en: 'Cloud Infrastructure' },
-  ANALYTICS: { de: 'Analytics', en: 'Analytics' },
-  CRM: { de: 'CRM', en: 'CRM' },
-  ERP: { de: 'ERP', en: 'ERP' },
-  HR_SOFTWARE: { de: 'HR-Software', en: 'HR Software' },
-  PAYMENT: { de: 'Zahlungsabwicklung', en: 'Payment Processing' },
-  EMAIL: { de: 'E-Mail', en: 'Email' },
-  MARKETING: { de: 'Marketing', en: 'Marketing' },
-  SUPPORT: { de: 'Support', en: 'Support' },
-  SECURITY: { de: 'Sicherheit', en: 'Security' },
-  INTEGRATION: { de: 'Integration', en: 'Integration' },
-  CONSULTING: { de: 'Beratung', en: 'Consulting' },
-  LEGAL: { de: 'Rechtliches', en: 'Legal' },
-  ACCOUNTING: { de: 'Buchhaltung', en: 'Accounting' },
-  COMMUNICATION: { de: 'Kommunikation', en: 'Communication' },
-  STORAGE: { de: 'Speicher', en: 'Storage' },
-  BACKUP: { de: 'Backup', en: 'Backup' },
-  CDN: { de: 'CDN', en: 'CDN' },
-  OTHER: { de: 'Sonstige', en: 'Other' },
-}
-
-export const DOCUMENT_TYPE_META: Record<DocumentType, LocalizedText> = {
-  AVV: { de: 'Auftragsverarbeitungsvertrag', en: 'Data Processing Agreement' },
-  MSA: { de: 'Rahmenvertrag', en: 'Master Service Agreement' },
-  SLA: { de: 'Service Level Agreement', en: 'Service Level Agreement' },
-  SCC: { de: 'Standardvertragsklauseln', en: 'Standard Contractual Clauses' },
-  NDA: { de: 'Geheimhaltungsvereinbarung', en: 'Non-Disclosure Agreement' },
-  TOM_ANNEX: { de: 'TOM-Anlage', en: 'TOM Annex' },
-  CERTIFICATION: { de: 'Zertifikat', en: 'Certification' },
-  SUB_PROCESSOR_LIST: { de: 'Unterauftragnehmer-Liste', en: 'Sub-Processor List' },
-  OTHER: { de: 'Sonstige', en: 'Other' },
-}
-
-export const TRANSFER_MECHANISM_META: Record<TransferMechanismType, LocalizedText> = {
-  ADEQUACY_DECISION: { de: 'Angemessenheitsbeschluss', en: 'Adequacy Decision' },
-  SCC_CONTROLLER: { de: 'SCC (Controller-to-Controller)', en: 'SCC (Controller-to-Controller)' },
-  SCC_PROCESSOR: { de: 'SCC (Controller-to-Processor)', en: 'SCC (Controller-to-Processor)' },
-  BCR: { de: 'Binding Corporate Rules', en: 'Binding Corporate Rules' },
-  DEROGATION_CONSENT: { de: 'Ausdrückliche Einwilligung', en: 'Explicit Consent' },
-  DEROGATION_CONTRACT: { de: 'Vertragserfüllung', en: 'Contract Performance' },
-  DEROGATION_LEGAL: { de: 'Rechtsansprüche', en: 'Legal Claims' },
-  DEROGATION_PUBLIC: { de: 'Öffentliches Interesse', en: 'Public Interest' },
-  CERTIFICATION: { de: 'Zertifizierung', en: 'Certification' },
-  CODE_OF_CONDUCT: { de: 'Verhaltensregeln', en: 'Code of Conduct' },
-}
+export * from './types-common'
+export * from './types-processing'
+export * from './types-vendor'
+export * from './types-contract'
+export * from './types-finding'
+export * from './types-risk'
+export * from './types-audit'
+export * from './types-state'
+export * from './types-helpers'