[split-required] Split 500-850 LOC files (batch 2)

backend-lehrer (10 files):
- game/database.py (785 → 5), correction_api.py (683 → 4)
- classroom_engine/antizipation.py (676 → 5)
- llm_gateway schools/edu_search already done in prior batch

klausur-service (12 files):
- orientation_crop_api.py (694 → 5), pdf_export.py (677 → 4)
- zeugnis_crawler.py (676 → 5), grid_editor_api.py (671 → 5)
- eh_templates.py (658 → 5), mail/api.py (651 → 5)
- qdrant_service.py (638 → 5), training_api.py (625 → 4)

website (6 pages):
- middleware (696 → 8), mail (733 → 6), consent (628 → 8)
- compliance/risks (622 → 5), export (502 → 5), brandbook (629 → 7)

studio-v2 (3 components):
- B2BMigrationWizard (848 → 3), CleanupPanel (765 → 2)
- dashboard-experimental (739 → 2)

admin-lehrer (4 files):
- uebersetzungen (769 → 4), manager (670 → 2)
- ChunkBrowserQA (675 → 6), dsfa/page (674 → 5)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

admin-lehrer/app/(admin)/ai/rag-pipeline/dsfa/_components/DSFABadges.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import React from 'react'
+import { Scale, CheckCircle, Clock, AlertCircle } from 'lucide-react'
+import {
+  DSFALicenseCode,
+  DSFA_LICENSE_LABELS,
+  DSFA_DOCUMENT_TYPE_LABELS,
+} from '@/lib/sdk/types'
+
+export function LicenseBadge({ licenseCode }: { licenseCode: DSFALicenseCode }) {
+  const colorMap: Record<DSFALicenseCode, string> = {
+    'DL-DE-BY-2.0': 'bg-blue-100 text-blue-700 border-blue-200',
+    'DL-DE-ZERO-2.0': 'bg-gray-100 text-gray-700 border-gray-200',
+    'CC-BY-4.0': 'bg-green-100 text-green-700 border-green-200',
+    'EDPB-LICENSE': 'bg-purple-100 text-purple-700 border-purple-200',
+    'PUBLIC_DOMAIN': 'bg-gray-100 text-gray-600 border-gray-200',
+    'PROPRIETARY': 'bg-amber-100 text-amber-700 border-amber-200',
+  }
+
+  return (
+    <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs border ${colorMap[licenseCode] || 'bg-gray-100 text-gray-700 border-gray-200'}`}>
+      <Scale className="w-3 h-3" />
+      {DSFA_LICENSE_LABELS[licenseCode] || licenseCode}
+    </span>
+  )
+}
+
+export function DocumentTypeBadge({ type }: { type?: string }) {
+  if (!type) return null
+
+  const colorMap: Record<string, string> = {
+    guideline: 'bg-indigo-100 text-indigo-700',
+    checklist: 'bg-emerald-100 text-emerald-700',
+    regulation: 'bg-red-100 text-red-700',
+    template: 'bg-orange-100 text-orange-700',
+  }
+
+  return (
+    <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs ${colorMap[type] || 'bg-gray-100 text-gray-700'}`}>
+      {DSFA_DOCUMENT_TYPE_LABELS[type as keyof typeof DSFA_DOCUMENT_TYPE_LABELS] || type}
+    </span>
+  )
+}
+
+export function StatusIndicator({ status }: { status: string }) {
+  const statusConfig: Record<string, { color: string; icon: React.ReactNode; label: string }> = {
+    green: { color: 'text-green-500', icon: <CheckCircle className="w-4 h-4" />, label: 'Aktiv' },
+    yellow: { color: 'text-yellow-500', icon: <Clock className="w-4 h-4" />, label: 'Ausstehend' },
+    red: { color: 'text-red-500', icon: <AlertCircle className="w-4 h-4" />, label: 'Fehler' },
+  }
+
+  const config = statusConfig[status] || statusConfig.yellow
+
+  return (
+    <span className={`inline-flex items-center gap-1 ${config.color}`}>
+      {config.icon}
+      <span className="text-sm">{config.label}</span>
+    </span>
+  )
+}

admin-lehrer/app/(admin)/ai/rag-pipeline/dsfa/_components/SourceCard.tsx

@@ -0,0 +1,137 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  RefreshCw,
+  ChevronDown,
+  ChevronUp,
+  ExternalLink,
+} from 'lucide-react'
+import { DSFASource, DSFASourceStats } from '@/lib/sdk/types'
+import { LicenseBadge, DocumentTypeBadge } from './DSFABadges'
+
+interface SourceCardProps {
+  source: DSFASource
+  stats?: DSFASourceStats
+  onIngest: () => void
+  isIngesting: boolean
+}
+
+export function SourceCard({ source, stats, onIngest, isIngesting }: SourceCardProps) {
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
+      <div className="p-4">
+        <div className="flex items-start justify-between">
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2 mb-1">
+              <span className="font-mono text-xs bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded">
+                {source.sourceCode}
+              </span>
+              <DocumentTypeBadge type={source.documentType} />
+            </div>
+            <h3 className="font-semibold text-gray-900 dark:text-white truncate">
+              {source.name}
+            </h3>
+            {source.organization && (
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                {source.organization}
+              </p>
+            )}
+          </div>
+          <button
+            onClick={() => setIsExpanded(!isExpanded)}
+            className="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
+          >
+            {isExpanded ? (
+              <ChevronUp className="w-5 h-5 text-gray-400" />
+            ) : (
+              <ChevronDown className="w-5 h-5 text-gray-400" />
+            )}
+          </button>
+        </div>
+
+        <div className="flex items-center gap-4 mt-3">
+          <LicenseBadge licenseCode={source.licenseCode} />
+          {stats && (
+            <>
+              <span className="text-sm text-gray-500">
+                {stats.documentCount} Dok.
+              </span>
+              <span className="text-sm text-gray-500">
+                {stats.chunkCount} Chunks
+              </span>
+            </>
+          )}
+        </div>
+
+        {source.attributionRequired && (
+          <div className="mt-3 p-2 bg-amber-50 dark:bg-amber-900/20 rounded text-xs text-amber-700 dark:text-amber-300">
+            <strong>Attribution:</strong> {source.attributionText}
+          </div>
+        )}
+      </div>
+
+      {isExpanded && (
+        <div className="border-t border-gray-200 dark:border-gray-700 p-4 bg-gray-50 dark:bg-gray-900">
+          <dl className="grid grid-cols-2 gap-3 text-sm">
+            {source.sourceUrl && (
+              <>
+                <dt className="text-gray-500">Quelle:</dt>
+                <dd>
+                  <a
+                    href={source.sourceUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-blue-600 hover:underline flex items-center gap-1"
+                  >
+                    Link <ExternalLink className="w-3 h-3" />
+                  </a>
+                </dd>
+              </>
+            )}
+            {source.licenseUrl && (
+              <>
+                <dt className="text-gray-500">Lizenz-URL:</dt>
+                <dd>
+                  <a
+                    href={source.licenseUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-blue-600 hover:underline flex items-center gap-1"
+                  >
+                    {source.licenseName} <ExternalLink className="w-3 h-3" />
+                  </a>
+                </dd>
+              </>
+            )}
+            <dt className="text-gray-500">Sprache:</dt>
+            <dd className="uppercase">{source.language}</dd>
+            {stats?.lastIndexedAt && (
+              <>
+                <dt className="text-gray-500">Zuletzt indexiert:</dt>
+                <dd>{new Date(stats.lastIndexedAt).toLocaleString('de-DE')}</dd>
+              </>
+            )}
+          </dl>
+
+          <div className="mt-4 flex gap-2">
+            <button
+              onClick={onIngest}
+              disabled={isIngesting}
+              className="px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 flex items-center gap-1"
+            >
+              {isIngesting ? (
+                <RefreshCw className="w-4 h-4 animate-spin" />
+              ) : (
+                <RefreshCw className="w-4 h-4" />
+              )}
+              Neu indexieren
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

admin-lehrer/app/(admin)/ai/rag-pipeline/dsfa/_components/StatsOverview.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import { Database } from 'lucide-react'
+import { DSFACorpusStats } from '@/lib/sdk/types'
+import { StatusIndicator } from './DSFABadges'
+
+interface StatsOverviewProps {
+  stats: DSFACorpusStats
+}
+
+export function StatsOverview({ stats }: StatsOverviewProps) {
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
+      <div className="flex items-center justify-between mb-4">
+        <h2 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
+          <Database className="w-5 h-5" />
+          Corpus-Statistik
+        </h2>
+        <StatusIndicator status={stats.qdrantStatus} />
+      </div>
+
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <div className="text-center p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+          <p className="text-2xl font-bold text-blue-600 dark:text-blue-400">
+            {stats.totalSources}
+          </p>
+          <p className="text-sm text-gray-600 dark:text-gray-400">Quellen</p>
+        </div>
+        <div className="text-center p-4 bg-emerald-50 dark:bg-emerald-900/20 rounded-lg">
+          <p className="text-2xl font-bold text-emerald-600 dark:text-emerald-400">
+            {stats.totalDocuments}
+          </p>
+          <p className="text-sm text-gray-600 dark:text-gray-400">Dokumente</p>
+        </div>
+        <div className="text-center p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
+          <p className="text-2xl font-bold text-purple-600 dark:text-purple-400">
+            {stats.totalChunks.toLocaleString()}
+          </p>
+          <p className="text-sm text-gray-600 dark:text-gray-400">Chunks</p>
+        </div>
+        <div className="text-center p-4 bg-orange-50 dark:bg-orange-900/20 rounded-lg">
+          <p className="text-2xl font-bold text-orange-600 dark:text-orange-400">
+            {stats.qdrantPointsCount.toLocaleString()}
+          </p>
+          <p className="text-sm text-gray-600 dark:text-gray-400">Vektoren</p>
+        </div>
+      </div>
+
+      <div className="mt-4 p-3 bg-gray-50 dark:bg-gray-900 rounded-lg">
+        <p className="text-sm text-gray-600 dark:text-gray-400">
+          <strong>Collection:</strong>{' '}
+          <code className="font-mono bg-gray-200 dark:bg-gray-700 px-1 rounded">
+            {stats.qdrantCollection}
+          </code>
+        </p>
+      </div>
+    </div>
+  )
+}

admin-lehrer/app/(admin)/ai/rag-pipeline/dsfa/_components/dsfa-api.ts

@@ -0,0 +1,137 @@
+/**
+ * DSFA API functions and mock data.
+ */
+
+import {
+  DSFASource,
+  DSFACorpusStats,
+} from '@/lib/sdk/types'
+
+export const API_BASE = process.env.NEXT_PUBLIC_KLAUSUR_SERVICE_URL || 'http://localhost:8086'
+
+export const MOCK_SOURCES: DSFASource[] = [
+  {
+    id: '1',
+    sourceCode: 'WP248',
+    name: 'WP248 rev.01 - Leitlinien zur DSFA',
+    fullName: 'Leitlinien zur Datenschutz-Folgenabschaetzung',
+    organization: 'Artikel-29-Datenschutzgruppe / EDPB',
+    sourceUrl: 'https://ec.europa.eu/newsroom/article29/items/611236/en',
+    licenseCode: 'EDPB-LICENSE',
+    licenseName: 'EDPB Document License',
+    attributionRequired: true,
+    attributionText: 'Quelle: WP248 rev.01, Artikel-29-Datenschutzgruppe (2017)',
+    documentType: 'guideline',
+    language: 'de',
+  },
+  {
+    id: '2',
+    sourceCode: 'DSK_KP5',
+    name: 'Kurzpapier Nr. 5 - DSFA nach Art. 35 DS-GVO',
+    organization: 'Datenschutzkonferenz (DSK)',
+    sourceUrl: 'https://www.datenschutzkonferenz-online.de/media/kp/dsk_kpnr_5.pdf',
+    licenseCode: 'DL-DE-BY-2.0',
+    licenseName: 'Datenlizenz DE \u2013 Namensnennung 2.0',
+    licenseUrl: 'https://www.govdata.de/dl-de/by-2-0',
+    attributionRequired: true,
+    attributionText: 'Quelle: DSK Kurzpapier Nr. 5 (Stand: 2018)',
+    documentType: 'guideline',
+    language: 'de',
+  },
+  {
+    id: '3',
+    sourceCode: 'BFDI_MUSS_PUBLIC',
+    name: 'BfDI DSFA-Liste (oeffentlicher Bereich)',
+    organization: 'BfDI',
+    sourceUrl: 'https://www.bfdi.bund.de',
+    licenseCode: 'DL-DE-ZERO-2.0',
+    licenseName: 'Datenlizenz DE \u2013 Zero 2.0',
+    attributionRequired: false,
+    attributionText: 'Quelle: BfDI, Liste gem. Art. 35 Abs. 4 DSGVO',
+    documentType: 'checklist',
+    language: 'de',
+  },
+  {
+    id: '4',
+    sourceCode: 'NI_MUSS_PRIVATE',
+    name: 'LfD NI DSFA-Liste (nicht-oeffentlich)',
+    organization: 'LfD Niedersachsen',
+    sourceUrl: 'https://www.lfd.niedersachsen.de/download/131098',
+    licenseCode: 'DL-DE-BY-2.0',
+    licenseName: 'Datenlizenz DE \u2013 Namensnennung 2.0',
+    attributionRequired: true,
+    attributionText: 'Quelle: LfD Niedersachsen, DSFA-Muss-Liste',
+    documentType: 'checklist',
+    language: 'de',
+  },
+]
+
+export const MOCK_STATS: DSFACorpusStats = {
+  sources: [
+    {
+      sourceId: '1',
+      sourceCode: 'WP248',
+      name: 'WP248 rev.01',
+      organization: 'EDPB',
+      licenseCode: 'EDPB-LICENSE',
+      documentType: 'guideline',
+      documentCount: 1,
+      chunkCount: 50,
+      lastIndexedAt: '2026-02-09T10:00:00Z',
+    },
+    {
+      sourceId: '2',
+      sourceCode: 'DSK_KP5',
+      name: 'DSK Kurzpapier Nr. 5',
+      organization: 'DSK',
+      licenseCode: 'DL-DE-BY-2.0',
+      documentType: 'guideline',
+      documentCount: 1,
+      chunkCount: 35,
+      lastIndexedAt: '2026-02-09T10:00:00Z',
+    },
+  ],
+  totalSources: 45,
+  totalDocuments: 45,
+  totalChunks: 850,
+  qdrantCollection: 'bp_dsfa_corpus',
+  qdrantPointsCount: 850,
+  qdrantStatus: 'green',
+}
+
+export async function fetchSources(): Promise<DSFASource[]> {
+  try {
+    const response = await fetch(`${API_BASE}/api/v1/dsfa-rag/sources`)
+    if (!response.ok) throw new Error('Failed to fetch sources')
+    return await response.json()
+  } catch {
+    return MOCK_SOURCES
+  }
+}
+
+export async function fetchStats(): Promise<DSFACorpusStats> {
+  try {
+    const response = await fetch(`${API_BASE}/api/v1/dsfa-rag/stats`)
+    if (!response.ok) throw new Error('Failed to fetch stats')
+    return await response.json()
+  } catch {
+    return MOCK_STATS
+  }
+}
+
+export async function initializeCorpus(): Promise<{ sources_registered: number }> {
+  const response = await fetch(`${API_BASE}/api/v1/dsfa-rag/init`, {
+    method: 'POST',
+  })
+  if (!response.ok) throw new Error('Failed to initialize corpus')
+  return await response.json()
+}
+
+export async function triggerIngestion(sourceCode: string): Promise<void> {
+  const response = await fetch(`${API_BASE}/api/v1/dsfa-rag/sources/${sourceCode}/ingest`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({}),
+  })
+  if (!response.ok) throw new Error('Failed to trigger ingestion')
+}

admin-lehrer/app/(admin)/ai/rag-pipeline/dsfa/page.tsx

@@ -4,11 +4,6 @@
  * DSFA Document Manager
  *
  * Manages DSFA-related sources and documents for the RAG pipeline.
- * Features:
- * - View all registered DSFA sources with license info
- * - Upload new documents
- * - Trigger re-indexing
- * - View corpus statistics
  */
 
 import { useState, useEffect } from 'react'
@@ -19,411 +14,24 @@ import {
   Upload,
   FileText,
   Database,
-  Scale,
-  ExternalLink,
-  ChevronDown,
-  ChevronUp,
   Search,
   Filter,
-  CheckCircle,
-  Clock,
   AlertCircle,
-  BookOpen
+  BookOpen,
 } from 'lucide-react'
+import { DSFASource, DSFACorpusStats, DSFASourceStats } from '@/lib/sdk/types'
+
 import {
-  DSFASource,
-  DSFACorpusStats,
-  DSFASourceStats,
-  DSFALicenseCode,
-  DSFA_LICENSE_LABELS,
-  DSFA_DOCUMENT_TYPE_LABELS
-} from '@/lib/sdk/types'
-
-// ============================================================================
-// TYPES
-// ============================================================================
-
-interface APIError {
-  message: string
-  status?: number
-}
-
-// ============================================================================
-// API FUNCTIONS
-// ============================================================================
-
-const API_BASE = process.env.NEXT_PUBLIC_KLAUSUR_SERVICE_URL || 'http://localhost:8086'
-
-async function fetchSources(): Promise<DSFASource[]> {
-  try {
-    const response = await fetch(`${API_BASE}/api/v1/dsfa-rag/sources`)
-    if (!response.ok) throw new Error('Failed to fetch sources')
-    return await response.json()
-  } catch {
-    // Return mock data for demo
-    return MOCK_SOURCES
-  }
-}
-
-async function fetchStats(): Promise<DSFACorpusStats> {
-  try {
-    const response = await fetch(`${API_BASE}/api/v1/dsfa-rag/stats`)
-    if (!response.ok) throw new Error('Failed to fetch stats')
-    return await response.json()
-  } catch {
-    return MOCK_STATS
-  }
-}
-
-async function initializeCorpus(): Promise<{ sources_registered: number }> {
-  const response = await fetch(`${API_BASE}/api/v1/dsfa-rag/init`, {
-    method: 'POST',
-  })
-  if (!response.ok) throw new Error('Failed to initialize corpus')
-  return await response.json()
-}
-
-async function triggerIngestion(sourceCode: string): Promise<void> {
-  const response = await fetch(`${API_BASE}/api/v1/dsfa-rag/sources/${sourceCode}/ingest`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({}),
-  })
-  if (!response.ok) throw new Error('Failed to trigger ingestion')
-}
-
-// ============================================================================
-// MOCK DATA
-// ============================================================================
-
-const MOCK_SOURCES: DSFASource[] = [
-  {
-    id: '1',
-    sourceCode: 'WP248',
-    name: 'WP248 rev.01 - Leitlinien zur DSFA',
-    fullName: 'Leitlinien zur Datenschutz-Folgenabschaetzung',
-    organization: 'Artikel-29-Datenschutzgruppe / EDPB',
-    sourceUrl: 'https://ec.europa.eu/newsroom/article29/items/611236/en',
-    licenseCode: 'EDPB-LICENSE',
-    licenseName: 'EDPB Document License',
-    attributionRequired: true,
-    attributionText: 'Quelle: WP248 rev.01, Artikel-29-Datenschutzgruppe (2017)',
-    documentType: 'guideline',
-    language: 'de',
-  },
-  {
-    id: '2',
-    sourceCode: 'DSK_KP5',
-    name: 'Kurzpapier Nr. 5 - DSFA nach Art. 35 DS-GVO',
-    organization: 'Datenschutzkonferenz (DSK)',
-    sourceUrl: 'https://www.datenschutzkonferenz-online.de/media/kp/dsk_kpnr_5.pdf',
-    licenseCode: 'DL-DE-BY-2.0',
-    licenseName: 'Datenlizenz DE – Namensnennung 2.0',
-    licenseUrl: 'https://www.govdata.de/dl-de/by-2-0',
-    attributionRequired: true,
-    attributionText: 'Quelle: DSK Kurzpapier Nr. 5 (Stand: 2018)',
-    documentType: 'guideline',
-    language: 'de',
-  },
-  {
-    id: '3',
-    sourceCode: 'BFDI_MUSS_PUBLIC',
-    name: 'BfDI DSFA-Liste (oeffentlicher Bereich)',
-    organization: 'BfDI',
-    sourceUrl: 'https://www.bfdi.bund.de',
-    licenseCode: 'DL-DE-ZERO-2.0',
-    licenseName: 'Datenlizenz DE – Zero 2.0',
-    attributionRequired: false,
-    attributionText: 'Quelle: BfDI, Liste gem. Art. 35 Abs. 4 DSGVO',
-    documentType: 'checklist',
-    language: 'de',
-  },
-  {
-    id: '4',
-    sourceCode: 'NI_MUSS_PRIVATE',
-    name: 'LfD NI DSFA-Liste (nicht-oeffentlich)',
-    organization: 'LfD Niedersachsen',
-    sourceUrl: 'https://www.lfd.niedersachsen.de/download/131098',
-    licenseCode: 'DL-DE-BY-2.0',
-    licenseName: 'Datenlizenz DE – Namensnennung 2.0',
-    attributionRequired: true,
-    attributionText: 'Quelle: LfD Niedersachsen, DSFA-Muss-Liste',
-    documentType: 'checklist',
-    language: 'de',
-  },
-]
-
-const MOCK_STATS: DSFACorpusStats = {
-  sources: [
-    {
-      sourceId: '1',
-      sourceCode: 'WP248',
-      name: 'WP248 rev.01',
-      organization: 'EDPB',
-      licenseCode: 'EDPB-LICENSE',
-      documentType: 'guideline',
-      documentCount: 1,
-      chunkCount: 50,
-      lastIndexedAt: '2026-02-09T10:00:00Z',
-    },
-    {
-      sourceId: '2',
-      sourceCode: 'DSK_KP5',
-      name: 'DSK Kurzpapier Nr. 5',
-      organization: 'DSK',
-      licenseCode: 'DL-DE-BY-2.0',
-      documentType: 'guideline',
-      documentCount: 1,
-      chunkCount: 35,
-      lastIndexedAt: '2026-02-09T10:00:00Z',
-    },
-  ],
-  totalSources: 45,
-  totalDocuments: 45,
-  totalChunks: 850,
-  qdrantCollection: 'bp_dsfa_corpus',
-  qdrantPointsCount: 850,
-  qdrantStatus: 'green',
-}
-
-// ============================================================================
-// COMPONENTS
-// ============================================================================
-
-function LicenseBadge({ licenseCode }: { licenseCode: DSFALicenseCode }) {
-  const colorMap: Record<DSFALicenseCode, string> = {
-    'DL-DE-BY-2.0': 'bg-blue-100 text-blue-700 border-blue-200',
-    'DL-DE-ZERO-2.0': 'bg-gray-100 text-gray-700 border-gray-200',
-    'CC-BY-4.0': 'bg-green-100 text-green-700 border-green-200',
-    'EDPB-LICENSE': 'bg-purple-100 text-purple-700 border-purple-200',
-    'PUBLIC_DOMAIN': 'bg-gray-100 text-gray-600 border-gray-200',
-    'PROPRIETARY': 'bg-amber-100 text-amber-700 border-amber-200',
-  }
-
-  return (
-    <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs border ${colorMap[licenseCode] || 'bg-gray-100 text-gray-700 border-gray-200'}`}>
-      <Scale className="w-3 h-3" />
-      {DSFA_LICENSE_LABELS[licenseCode] || licenseCode}
-    </span>
-  )
-}
-
-function DocumentTypeBadge({ type }: { type?: string }) {
-  if (!type) return null
-
-  const colorMap: Record<string, string> = {
-    guideline: 'bg-indigo-100 text-indigo-700',
-    checklist: 'bg-emerald-100 text-emerald-700',
-    regulation: 'bg-red-100 text-red-700',
-    template: 'bg-orange-100 text-orange-700',
-  }
-
-  return (
-    <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs ${colorMap[type] || 'bg-gray-100 text-gray-700'}`}>
-      {DSFA_DOCUMENT_TYPE_LABELS[type as keyof typeof DSFA_DOCUMENT_TYPE_LABELS] || type}
-    </span>
-  )
-}
-
-function StatusIndicator({ status }: { status: string }) {
-  const statusConfig: Record<string, { color: string; icon: React.ReactNode; label: string }> = {
-    green: { color: 'text-green-500', icon: <CheckCircle className="w-4 h-4" />, label: 'Aktiv' },
-    yellow: { color: 'text-yellow-500', icon: <Clock className="w-4 h-4" />, label: 'Ausstehend' },
-    red: { color: 'text-red-500', icon: <AlertCircle className="w-4 h-4" />, label: 'Fehler' },
-  }
-
-  const config = statusConfig[status] || statusConfig.yellow
-
-  return (
-    <span className={`inline-flex items-center gap-1 ${config.color}`}>
-      {config.icon}
-      <span className="text-sm">{config.label}</span>
-    </span>
-  )
-}
-
-function SourceCard({
-  source,
-  stats,
-  onIngest,
-  isIngesting
-}: {
-  source: DSFASource
-  stats?: DSFASourceStats
-  onIngest: () => void
-  isIngesting: boolean
-}) {
-  const [isExpanded, setIsExpanded] = useState(false)
-
-  return (
-    <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
-      <div className="p-4">
-        <div className="flex items-start justify-between">
-          <div className="flex-1 min-w-0">
-            <div className="flex items-center gap-2 mb-1">
-              <span className="font-mono text-xs bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded">
-                {source.sourceCode}
-              </span>
-              <DocumentTypeBadge type={source.documentType} />
-            </div>
-            <h3 className="font-semibold text-gray-900 dark:text-white truncate">
-              {source.name}
-            </h3>
-            {source.organization && (
-              <p className="text-sm text-gray-500 dark:text-gray-400">
-                {source.organization}
-              </p>
-            )}
-          </div>
-          <button
-            onClick={() => setIsExpanded(!isExpanded)}
-            className="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
-          >
-            {isExpanded ? (
-              <ChevronUp className="w-5 h-5 text-gray-400" />
-            ) : (
-              <ChevronDown className="w-5 h-5 text-gray-400" />
-            )}
-          </button>
-        </div>
-
-        <div className="flex items-center gap-4 mt-3">
-          <LicenseBadge licenseCode={source.licenseCode} />
-          {stats && (
-            <>
-              <span className="text-sm text-gray-500">
-                {stats.documentCount} Dok.
-              </span>
-              <span className="text-sm text-gray-500">
-                {stats.chunkCount} Chunks
-              </span>
-            </>
-          )}
-        </div>
-
-        {source.attributionRequired && (
-          <div className="mt-3 p-2 bg-amber-50 dark:bg-amber-900/20 rounded text-xs text-amber-700 dark:text-amber-300">
-            <strong>Attribution:</strong> {source.attributionText}
-          </div>
-        )}
-      </div>
-
-      {isExpanded && (
-        <div className="border-t border-gray-200 dark:border-gray-700 p-4 bg-gray-50 dark:bg-gray-900">
-          <dl className="grid grid-cols-2 gap-3 text-sm">
-            {source.sourceUrl && (
-              <>
-                <dt className="text-gray-500">Quelle:</dt>
-                <dd>
-                  <a
-                    href={source.sourceUrl}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-blue-600 hover:underline flex items-center gap-1"
-                  >
-                    Link <ExternalLink className="w-3 h-3" />
-                  </a>
-                </dd>
-              </>
-            )}
-            {source.licenseUrl && (
-              <>
-                <dt className="text-gray-500">Lizenz-URL:</dt>
-                <dd>
-                  <a
-                    href={source.licenseUrl}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-blue-600 hover:underline flex items-center gap-1"
-                  >
-                    {source.licenseName} <ExternalLink className="w-3 h-3" />
-                  </a>
-                </dd>
-              </>
-            )}
-            <dt className="text-gray-500">Sprache:</dt>
-            <dd className="uppercase">{source.language}</dd>
-            {stats?.lastIndexedAt && (
-              <>
-                <dt className="text-gray-500">Zuletzt indexiert:</dt>
-                <dd>{new Date(stats.lastIndexedAt).toLocaleString('de-DE')}</dd>
-              </>
-            )}
-          </dl>
-
-          <div className="mt-4 flex gap-2">
-            <button
-              onClick={onIngest}
-              disabled={isIngesting}
-              className="px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 flex items-center gap-1"
-            >
-              {isIngesting ? (
-                <RefreshCw className="w-4 h-4 animate-spin" />
-              ) : (
-                <RefreshCw className="w-4 h-4" />
-              )}
-              Neu indexieren
-            </button>
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
-
-function StatsOverview({ stats }: { stats: DSFACorpusStats }) {
-  return (
-    <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
-      <div className="flex items-center justify-between mb-4">
-        <h2 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
-          <Database className="w-5 h-5" />
-          Corpus-Statistik
-        </h2>
-        <StatusIndicator status={stats.qdrantStatus} />
-      </div>
-
-      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-        <div className="text-center p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
-          <p className="text-2xl font-bold text-blue-600 dark:text-blue-400">
-            {stats.totalSources}
-          </p>
-          <p className="text-sm text-gray-600 dark:text-gray-400">Quellen</p>
-        </div>
-        <div className="text-center p-4 bg-emerald-50 dark:bg-emerald-900/20 rounded-lg">
-          <p className="text-2xl font-bold text-emerald-600 dark:text-emerald-400">
-            {stats.totalDocuments}
-          </p>
-          <p className="text-sm text-gray-600 dark:text-gray-400">Dokumente</p>
-        </div>
-        <div className="text-center p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
-          <p className="text-2xl font-bold text-purple-600 dark:text-purple-400">
-            {stats.totalChunks.toLocaleString()}
-          </p>
-          <p className="text-sm text-gray-600 dark:text-gray-400">Chunks</p>
-        </div>
-        <div className="text-center p-4 bg-orange-50 dark:bg-orange-900/20 rounded-lg">
-          <p className="text-2xl font-bold text-orange-600 dark:text-orange-400">
-            {stats.qdrantPointsCount.toLocaleString()}
-          </p>
-          <p className="text-sm text-gray-600 dark:text-gray-400">Vektoren</p>
-        </div>
-      </div>
-
-      <div className="mt-4 p-3 bg-gray-50 dark:bg-gray-900 rounded-lg">
-        <p className="text-sm text-gray-600 dark:text-gray-400">
-          <strong>Collection:</strong>{' '}
-          <code className="font-mono bg-gray-200 dark:bg-gray-700 px-1 rounded">
-            {stats.qdrantCollection}
-          </code>
-        </p>
-      </div>
-    </div>
-  )
-}
-
-// ============================================================================
-// MAIN PAGE
-// ============================================================================
+  fetchSources,
+  fetchStats,
+  initializeCorpus,
+  triggerIngestion,
+  MOCK_SOURCES,
+  MOCK_STATS,
+} from './_components/dsfa-api'
+import { LicenseBadge } from './_components/DSFABadges'
+import { SourceCard } from './_components/SourceCard'
+import { StatsOverview } from './_components/StatsOverview'
 
 export default function DSFADocumentManagerPage() {
   const [sources, setSources] = useState<DSFASource[]>([])
@@ -461,7 +69,6 @@ export default function DSFADocumentManagerPage() {
     setIsInitializing(true)
     try {
       await initializeCorpus()
-      // Reload data
       const [sourcesData, statsData] = await Promise.all([
         fetchSources(),
         fetchStats(),
@@ -479,7 +86,6 @@ export default function DSFADocumentManagerPage() {
     setIngestingSource(sourceCode)
     try {
       await triggerIngestion(sourceCode)
-      // Reload stats
       const statsData = await fetchStats()
       setStats(statsData)
     } catch (err) {
@@ -501,7 +107,6 @@ export default function DSFADocumentManagerPage() {
     return matchesSearch && matchesType
   })
 
-  // Get stats by source code
   const getStatsForSource = (sourceCode: string): DSFASourceStats | undefined => {
     return stats?.sources.find(s => s.sourceCode === sourceCode)
   }

admin-lehrer/app/(admin)/ai/rag/components/ChunkBrowserConstants.ts

@@ -0,0 +1,52 @@
+/**
+ * Constants and types for ChunkBrowserQA component.
+ */
+
+export type RegGroupKey =
+  | 'eu_regulation'
+  | 'eu_directive'
+  | 'de_law'
+  | 'at_law'
+  | 'ch_law'
+  | 'national_law'
+  | 'bsi_standard'
+  | 'eu_guideline'
+  | 'international_standard'
+  | 'other'
+
+export const GROUP_LABELS: Record<RegGroupKey, string> = {
+  eu_regulation: 'EU Verordnungen',
+  eu_directive: 'EU Richtlinien',
+  de_law: 'DE Gesetze',
+  at_law: 'AT Gesetze',
+  ch_law: 'CH Gesetze',
+  national_law: 'Nationale Gesetze (EU)',
+  bsi_standard: 'BSI Standards',
+  eu_guideline: 'EDPB / Guidelines',
+  international_standard: 'Internationale Standards',
+  other: 'Sonstige',
+}
+
+export const GROUP_ORDER: RegGroupKey[] = [
+  'eu_regulation', 'eu_directive', 'de_law', 'at_law', 'ch_law',
+  'national_law', 'bsi_standard', 'eu_guideline', 'international_standard', 'other',
+]
+
+export const COLLECTIONS = [
+  'bp_compliance_gesetze',
+  'bp_compliance_ce',
+  'bp_compliance_datenschutz',
+  'bp_dsfa_corpus',
+  'bp_compliance_recht',
+  'bp_legal_templates',
+  'bp_nibis_eh',
+]
+
+export const STRUCTURAL_KEYS = new Set([
+  'article', 'artikel', 'paragraph', 'section_title', 'section', 'chapter',
+  'abschnitt', 'kapitel', 'pages', 'page',
+])
+
+export const HIDDEN_KEYS = new Set([
+  'text', 'content', 'chunk_text', 'id', 'embedding',
+])

admin-lehrer/app/(admin)/ai/rag/components/ChunkBrowserContent.tsx

@@ -0,0 +1,234 @@
+'use client'
+
+import React from 'react'
+import { STRUCTURAL_KEYS, HIDDEN_KEYS } from './ChunkBrowserConstants'
+import { getChunkText, getStructuralInfo } from './ChunkBrowserHelpers'
+import { RAG_PDF_MAPPING } from './rag-pdf-mapping'
+import { REGULATIONS_IN_RAG } from '../rag-constants'
+
+interface ChunkBrowserContentProps {
+  selectedRegulation: string | null
+  docLoading: boolean
+  docChunks: Record<string, unknown>[]
+  docChunkIndex: number
+  docTotalChunks: number
+  splitViewActive: boolean
+  chunksPerPage: number
+  pdfExists: boolean | null
+}
+
+export function ChunkBrowserContent({
+  selectedRegulation,
+  docLoading,
+  docChunks,
+  docChunkIndex,
+  docTotalChunks,
+  splitViewActive,
+  chunksPerPage,
+  pdfExists,
+}: ChunkBrowserContentProps) {
+  const currentChunk = docChunks[docChunkIndex] || null
+  const prevChunk = docChunkIndex > 0 ? docChunks[docChunkIndex - 1] : null
+  const nextChunk = docChunkIndex < docChunks.length - 1 ? docChunks[docChunkIndex + 1] : null
+
+  const structInfo = getStructuralInfo(currentChunk)
+
+  // PDF page estimation
+  const estimatePdfPage = (chunk: Record<string, unknown> | null, chunkIdx: number): number => {
+    if (chunk) {
+      const pages = chunk.pages as number[] | undefined
+      if (Array.isArray(pages) && pages.length > 0) return pages[0]
+      const page = chunk.page as number | undefined
+      if (typeof page === 'number' && page > 0) return page
+    }
+    const mapping = selectedRegulation ? RAG_PDF_MAPPING[selectedRegulation] : null
+    const cpp = mapping?.chunksPerPage || chunksPerPage
+    return Math.floor(chunkIdx / cpp) + 1
+  }
+
+  const pdfPage = estimatePdfPage(currentChunk, docChunkIndex)
+  const pdfMapping = selectedRegulation ? RAG_PDF_MAPPING[selectedRegulation] : null
+  const pdfUrl = pdfMapping ? `/rag-originals/${pdfMapping.filename}#page=${pdfPage}` : null
+
+  // Overlap extraction
+  const getOverlapPrev = (): string => {
+    if (!prevChunk) return ''
+    const text = getChunkText(prevChunk)
+    return text.length > 150 ? '...' + text.slice(-150) : text
+  }
+
+  const getOverlapNext = (): string => {
+    if (!nextChunk) return ''
+    const text = getChunkText(nextChunk)
+    return text.length > 150 ? text.slice(0, 150) + '...' : text
+  }
+
+  if (!selectedRegulation) {
+    return (
+      <div className="flex-1 flex items-center justify-center bg-white rounded-xl border border-slate-200">
+        <div className="text-center text-slate-400 space-y-2">
+          <div className="text-4xl">&#128269;</div>
+          <p className="text-sm">Dokument in der Sidebar auswaehlen, um QA zu starten.</p>
+          <p className="text-xs text-slate-300">Pfeiltasten: Chunk vor/zurueck</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (docLoading) {
+    return (
+      <div className="flex-1 flex items-center justify-center bg-white rounded-xl border border-slate-200">
+        <div className="text-center text-slate-500 space-y-2">
+          <div className="animate-spin text-3xl">&#9881;</div>
+          <p className="text-sm">Chunks werden geladen...</p>
+          <p className="text-xs text-slate-400">
+            {selectedRegulation}: {REGULATIONS_IN_RAG[selectedRegulation]?.chunks.toLocaleString() || '?'} Chunks erwartet
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className={`flex-1 grid gap-3 min-h-0 ${splitViewActive ? 'grid-cols-2' : 'grid-cols-1'}`}>
+      {/* Chunk-Text Panel */}
+      <div className="bg-white rounded-xl border border-slate-200 flex flex-col min-h-0 overflow-hidden">
+        <div className="flex-shrink-0 px-4 py-2 bg-slate-50 border-b border-slate-100 flex items-center justify-between">
+          <span className="text-sm font-medium text-slate-700">Chunk-Text</span>
+          <div className="flex items-center gap-2">
+            {structInfo.article && (
+              <span className="px-2 py-0.5 bg-blue-50 text-blue-700 text-xs font-medium rounded border border-blue-200">
+                {structInfo.article}
+              </span>
+            )}
+            {structInfo.section && (
+              <span className="px-2 py-0.5 bg-purple-50 text-purple-700 text-xs rounded border border-purple-200">
+                {structInfo.section}
+              </span>
+            )}
+            <span className="text-xs text-slate-400 tabular-nums">
+              #{docChunkIndex} / {docTotalChunks - 1}
+            </span>
+          </div>
+        </div>
+
+        <div className="flex-1 overflow-y-auto min-h-0 p-4 space-y-3">
+          {/* Overlap from previous chunk */}
+          {prevChunk && (
+            <div className="text-xs text-slate-400 bg-amber-50 border-l-2 border-amber-300 px-3 py-2 rounded-r">
+              <div className="font-medium text-amber-600 mb-1">&#8593; Ende vorheriger Chunk #{docChunkIndex - 1}</div>
+              <p className="whitespace-pre-wrap break-words leading-relaxed">{getOverlapPrev()}</p>
+            </div>
+          )}
+
+          {/* Current chunk text */}
+          {currentChunk ? (
+            <div className="text-sm text-slate-800 whitespace-pre-wrap break-words leading-relaxed border-l-2 border-teal-400 pl-3">
+              {getChunkText(currentChunk)}
+            </div>
+          ) : (
+            <div className="text-sm text-slate-400 italic">Kein Chunk-Text vorhanden.</div>
+          )}
+
+          {/* Overlap from next chunk */}
+          {nextChunk && (
+            <div className="text-xs text-slate-400 bg-amber-50 border-l-2 border-amber-300 px-3 py-2 rounded-r">
+              <div className="font-medium text-amber-600 mb-1">&#8595; Anfang naechster Chunk #{docChunkIndex + 1}</div>
+              <p className="whitespace-pre-wrap break-words leading-relaxed">{getOverlapNext()}</p>
+            </div>
+          )}
+
+          {/* Metadata */}
+          {currentChunk && (
+            <div className="mt-4 pt-3 border-t border-slate-100">
+              <div className="text-xs font-medium text-slate-500 mb-2">Metadaten</div>
+              <div className="grid grid-cols-2 gap-x-4 gap-y-1 text-xs">
+                {Object.entries(currentChunk)
+                  .filter(([k]) => !HIDDEN_KEYS.has(k))
+                  .sort(([a], [b]) => {
+                    const aStruct = STRUCTURAL_KEYS.has(a) ? 0 : 1
+                    const bStruct = STRUCTURAL_KEYS.has(b) ? 0 : 1
+                    return aStruct - bStruct || a.localeCompare(b)
+                  })
+                  .map(([k, v]) => (
+                    <div key={k} className={`flex gap-1 ${STRUCTURAL_KEYS.has(k) ? 'col-span-2 font-medium' : ''}`}>
+                      <span className="font-medium text-slate-500 flex-shrink-0">{k}:</span>
+                      <span className="text-slate-700 break-all">
+                        {Array.isArray(v) ? v.join(', ') : String(v)}
+                      </span>
+                    </div>
+                  ))}
+              </div>
+              <div className="mt-3 pt-2 border-t border-slate-50">
+                <div className="text-xs text-slate-400">
+                  Chunk-Laenge: {getChunkText(currentChunk).length} Zeichen
+                  {getChunkText(currentChunk).length < 50 && (
+                    <span className="ml-2 text-orange-500 font-medium">&#9888; Sehr kurz</span>
+                  )}
+                  {getChunkText(currentChunk).length > 2000 && (
+                    <span className="ml-2 text-orange-500 font-medium">&#9888; Sehr lang</span>
+                  )}
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* PDF-Viewer Panel */}
+      {splitViewActive && (
+        <div className="bg-white rounded-xl border border-slate-200 flex flex-col min-h-0 overflow-hidden">
+          <div className="flex-shrink-0 px-4 py-2 bg-slate-50 border-b border-slate-100 flex items-center justify-between">
+            <span className="text-sm font-medium text-slate-700">Original-PDF</span>
+            <div className="flex items-center gap-2">
+              <span className="text-xs text-slate-400">
+                Seite ~{pdfPage}
+                {pdfMapping?.totalPages ? ` / ${pdfMapping.totalPages}` : ''}
+              </span>
+              {pdfUrl && (
+                <a
+                  href={pdfUrl.split('#')[0]}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-xs text-teal-600 hover:text-teal-800 underline"
+                >
+                  Oeffnen &#8599;
+                </a>
+              )}
+            </div>
+          </div>
+          <div className="flex-1 min-h-0 relative">
+            {pdfUrl && pdfExists ? (
+              <iframe
+                key={`${selectedRegulation}-${pdfPage}`}
+                src={pdfUrl}
+                className="absolute inset-0 w-full h-full border-0"
+                title="Original PDF"
+              />
+            ) : (
+              <div className="flex items-center justify-center h-full text-slate-400 text-sm p-4">
+                <div className="text-center space-y-2">
+                  <div className="text-3xl">&#128196;</div>
+                  {!pdfMapping ? (
+                    <>
+                      <p>Kein PDF-Mapping fuer {selectedRegulation}.</p>
+                      <p className="text-xs">rag-pdf-mapping.ts ergaenzen.</p>
+                    </>
+                  ) : pdfExists === false ? (
+                    <>
+                      <p className="font-medium text-orange-600">PDF nicht vorhanden</p>
+                      <p className="text-xs">Datei <code className="bg-slate-100 px-1 rounded">{pdfMapping.filename}</code> fehlt in ~/rag-originals/</p>
+                      <p className="text-xs mt-1">Bitte manuell herunterladen und dort ablegen.</p>
+                    </>
+                  ) : (
+                    <p>PDF wird geprueft...</p>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

admin-lehrer/app/(admin)/ai/rag/components/ChunkBrowserHelpers.ts

@@ -0,0 +1,39 @@
+/**
+ * Helper functions for ChunkBrowserQA component.
+ */
+
+import { REGULATION_INFO } from '../rag-constants'
+
+/** Get text content from a chunk */
+export function getChunkText(chunk: Record<string, unknown> | null): string {
+  if (!chunk) return ''
+  return String(chunk.chunk_text || chunk.text || chunk.content || '')
+}
+
+/** Extract structural metadata for prominent display */
+export function getStructuralInfo(
+  chunk: Record<string, unknown> | null
+): { article?: string; section?: string; pages?: string } {
+  if (!chunk) return {}
+  const result: { article?: string; section?: string; pages?: string } = {}
+  // Article / paragraph
+  const article = chunk.article || chunk.artikel || chunk.paragraph || chunk.section_title
+  if (article) result.article = String(article)
+  // Section
+  const section = chunk.section || chunk.chapter || chunk.abschnitt || chunk.kapitel
+  if (section) result.section = String(section)
+  // Pages
+  const pages = chunk.pages as number[] | undefined
+  if (Array.isArray(pages) && pages.length > 0) {
+    result.pages = pages.length === 1 ? `S. ${pages[0]}` : `S. ${pages[0]}-${pages[pages.length - 1]}`
+  } else if (chunk.page) {
+    result.pages = `S. ${chunk.page}`
+  }
+  return result
+}
+
+/** Regulation name lookup */
+export function getRegName(code: string): string {
+  const reg = REGULATION_INFO.find(r => r.code === code)
+  return reg?.name || code
+}

admin-lehrer/app/(admin)/ai/rag/components/ChunkBrowserQA.tsx

@@ -1,43 +1,18 @@
 'use client'
 
-import React, { useState, useEffect, useCallback, useRef } from 'react'
+import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react'
 import { RAG_PDF_MAPPING } from './rag-pdf-mapping'
 import { REGULATIONS_IN_RAG, REGULATION_INFO } from '../rag-constants'
+import { RegGroupKey } from './ChunkBrowserConstants'
+import { getStructuralInfo } from './ChunkBrowserHelpers'
+import { ChunkBrowserSidebar } from './ChunkBrowserSidebar'
+import { ChunkBrowserToolbar } from './ChunkBrowserToolbar'
+import { ChunkBrowserContent } from './ChunkBrowserContent'
 
 interface ChunkBrowserQAProps {
   apiProxy: string
 }
 
-type RegGroupKey = 'eu_regulation' | 'eu_directive' | 'de_law' | 'at_law' | 'ch_law' | 'national_law' | 'bsi_standard' | 'eu_guideline' | 'international_standard' | 'other'
-
-const GROUP_LABELS: Record<RegGroupKey, string> = {
-  eu_regulation: 'EU Verordnungen',
-  eu_directive: 'EU Richtlinien',
-  de_law: 'DE Gesetze',
-  at_law: 'AT Gesetze',
-  ch_law: 'CH Gesetze',
-  national_law: 'Nationale Gesetze (EU)',
-  bsi_standard: 'BSI Standards',
-  eu_guideline: 'EDPB / Guidelines',
-  international_standard: 'Internationale Standards',
-  other: 'Sonstige',
-}
-
-const GROUP_ORDER: RegGroupKey[] = [
-  'eu_regulation', 'eu_directive', 'de_law', 'at_law', 'ch_law',
-  'national_law', 'bsi_standard', 'eu_guideline', 'international_standard', 'other',
-]
-
-const COLLECTIONS = [
-  'bp_compliance_gesetze',
-  'bp_compliance_ce',
-  'bp_compliance_datenschutz',
-  'bp_dsfa_corpus',
-  'bp_compliance_recht',
-  'bp_legal_templates',
-  'bp_nibis_eh',
-]
-
 export function ChunkBrowserQA({ apiProxy }: ChunkBrowserQAProps) {
   // Filter-Sidebar
   const [selectedRegulation, setSelectedRegulation] = useState<string | null>(null)
@@ -58,7 +33,7 @@ export function ChunkBrowserQA({ apiProxy }: ChunkBrowserQAProps) {
   const [chunksPerPage, setChunksPerPage] = useState(6)
   const [fullscreen, setFullscreen] = useState(false)
 
-  // Collection — default to bp_compliance_ce where we have PDFs downloaded
+  // Collection
   const [collection, setCollection] = useState('bp_compliance_ce')
 
   // PDF existence check
@@ -72,7 +47,7 @@ export function ChunkBrowserQA({ apiProxy }: ChunkBrowserQAProps) {
     .filter(([, info]) => info.collection === collection)
     .map(([code]) => code)
 
-  const groupedRegulations = React.useMemo(() => {
+  const groupedRegulations = useMemo(() => {
     const groups: Record<RegGroupKey, { code: string; name: string; type: string }[]> = {
       eu_regulation: [], eu_directive: [], de_law: [], at_law: [], ch_law: [],
       national_law: [], bsi_standard: [], eu_guideline: [], international_standard: [], other: [],
@@ -81,11 +56,7 @@ export function ChunkBrowserQA({ apiProxy }: ChunkBrowserQAProps) {
       const reg = REGULATION_INFO.find(r => r.code === code)
       const type = (reg?.type || 'other') as RegGroupKey
       const groupKey = type in groups ? type : 'other'
-      groups[groupKey].push({
-        code,
-        name: reg?.name || code,
-        type: reg?.type || 'unknown',
-      })
+      groups[groupKey].push({ code, name: reg?.name || code, type: reg?.type || 'unknown' })
     }
     return groups
   }, [regulationsInCollection.join(',')])
@@ -96,7 +67,6 @@ export function ChunkBrowserQA({ apiProxy }: ChunkBrowserQAProps) {
       .filter(([, info]) => info.collection === col && info.qdrant_id)
     if (entries.length === 0) return
 
-    // Build qdrant_id -> our_code mapping
     const qdrantIdToCode: Record<string, string[]> = {}
     for (const [code, info] of entries) {
       if (!qdrantIdToCode[info.qdrant_id]) qdrantIdToCode[info.qdrant_id] = []
@@ -114,13 +84,10 @@ export function ChunkBrowserQA({ apiProxy }: ChunkBrowserQAProps) {
       const res = await fetch(`${apiProxy}?${params}`)
       if (res.ok) {
         const data = await res.json()
-        // Map qdrant_id counts back to our codes
         const mapped: Record<string, number> = {}
         for (const [qid, count] of Object.entries(data.counts as Record<string, number>)) {
           const codes = qdrantIdToCode[qid] || []
-          for (const code of codes) {
-            mapped[code] = count
-          }
+          for (const code of codes) { mapped[code] = count }
         }
         setRegulationCounts(prev => ({ ...prev, ...mapped }))
       }
@@ -166,7 +133,6 @@ export function ChunkBrowserQA({ apiProxy }: ChunkBrowserQAProps) {
         safety++
       } while (offset && safety < 200)
 
-      // Sort by chunk_index
       allChunks.sort((a, b) => {
         const ai = Number(a.chunk_index ?? a.chunk_id ?? 0)
         const bi = Number(b.chunk_index ?? b.chunk_id ?? 0)
@@ -188,30 +154,6 @@ export function ChunkBrowserQA({ apiProxy }: ChunkBrowserQAProps) {
     loadRegulationCounts(collection)
   }, [collection, loadRegulationCounts])
 
-  // Current chunk
-  const currentChunk = docChunks[docChunkIndex] || null
-  const prevChunk = docChunkIndex > 0 ? docChunks[docChunkIndex - 1] : null
-  const nextChunk = docChunkIndex < docChunks.length - 1 ? docChunks[docChunkIndex + 1] : null
-
-  // PDF page estimation — use pages metadata if available
-  const estimatePdfPage = (chunk: Record<string, unknown> | null, chunkIdx: number): number => {
-    if (chunk) {
-      // Try pages array from payload (e.g. [7] or [7,8])
-      const pages = chunk.pages as number[] | undefined
-      if (Array.isArray(pages) && pages.length > 0) return pages[0]
-      // Try page field
-      const page = chunk.page as number | undefined
-      if (typeof page === 'number' && page > 0) return page
-    }
-    const mapping = selectedRegulation ? RAG_PDF_MAPPING[selectedRegulation] : null
-    const cpp = mapping?.chunksPerPage || chunksPerPage
-    return Math.floor(chunkIdx / cpp) + 1
-  }
-
-  const pdfPage = estimatePdfPage(currentChunk, docChunkIndex)
-  const pdfMapping = selectedRegulation ? RAG_PDF_MAPPING[selectedRegulation] : null
-  const pdfUrl = pdfMapping ? `/rag-originals/${pdfMapping.filename}#page=${pdfPage}` : null
-
   // Check PDF existence when regulation changes
   useEffect(() => {
     if (!selectedRegulation) { setPdfExists(null); return }
@@ -223,29 +165,7 @@ export function ChunkBrowserQA({ apiProxy }: ChunkBrowserQAProps) {
       .catch(() => setPdfExists(false))
   }, [selectedRegulation])
 
-  // Handlers
-  const handleSelectRegulation = (code: string) => {
-    setSelectedRegulation(code)
-    loadDocumentChunks(code)
-  }
-
-  const handleCollectionChange = (col: string) => {
-    setCollection(col)
-    setSelectedRegulation(null)
-    setDocChunks([])
-    setDocChunkIndex(0)
-    setDocTotalChunks(0)
-    setRegulationCounts({})
-  }
-
-  const handlePrev = () => {
-    if (docChunkIndex > 0) setDocChunkIndex(i => i - 1)
-  }
-
-  const handleNext = () => {
-    if (docChunkIndex < docChunks.length - 1) setDocChunkIndex(i => i + 1)
-  }
-
+  // Keyboard navigation
   const handleKeyDown = useCallback((e: KeyboardEvent) => {
     if (e.key === 'Escape' && fullscreen) {
       e.preventDefault()
@@ -266,6 +186,21 @@ export function ChunkBrowserQA({ apiProxy }: ChunkBrowserQAProps) {
     }
   }, [selectedRegulation, docChunks.length, handleKeyDown, fullscreen])
 
+  // Handlers
+  const handleSelectRegulation = (code: string) => {
+    setSelectedRegulation(code)
+    loadDocumentChunks(code)
+  }
+
+  const handleCollectionChange = (col: string) => {
+    setCollection(col)
+    setSelectedRegulation(null)
+    setDocChunks([])
+    setDocChunkIndex(0)
+    setDocTotalChunks(0)
+    setRegulationCounts({})
+  }
+
   const toggleGroup = (group: string) => {
     setCollapsedGroups(prev => {
       const next = new Set(prev)
@@ -275,47 +210,8 @@ export function ChunkBrowserQA({ apiProxy }: ChunkBrowserQAProps) {
     })
   }
 
-  // Get text content from a chunk
-  const getChunkText = (chunk: Record<string, unknown> | null): string => {
-    if (!chunk) return ''
-    return String(chunk.chunk_text || chunk.text || chunk.content || '')
-  }
-
-  // Extract structural metadata for prominent display
-  const getStructuralInfo = (chunk: Record<string, unknown> | null): { article?: string; section?: string; pages?: string } => {
-    if (!chunk) return {}
-    const result: { article?: string; section?: string; pages?: string } = {}
-    // Article / paragraph
-    const article = chunk.article || chunk.artikel || chunk.paragraph || chunk.section_title
-    if (article) result.article = String(article)
-    // Section
-    const section = chunk.section || chunk.chapter || chunk.abschnitt || chunk.kapitel
-    if (section) result.section = String(section)
-    // Pages
-    const pages = chunk.pages as number[] | undefined
-    if (Array.isArray(pages) && pages.length > 0) {
-      result.pages = pages.length === 1 ? `S. ${pages[0]}` : `S. ${pages[0]}-${pages[pages.length - 1]}`
-    } else if (chunk.page) {
-      result.pages = `S. ${chunk.page}`
-    }
-    return result
-  }
-
-  // Overlap extraction
-  const getOverlapPrev = (): string => {
-    if (!prevChunk) return ''
-    const text = getChunkText(prevChunk)
-    return text.length > 150 ? '...' + text.slice(-150) : text
-  }
-
-  const getOverlapNext = (): string => {
-    if (!nextChunk) return ''
-    const text = getChunkText(nextChunk)
-    return text.length > 150 ? text.slice(0, 150) + '...' : text
-  }
-
   // Filter sidebar items
-  const filteredRegulations = React.useMemo(() => {
+  const filteredRegulations = useMemo(() => {
     if (!filterSearch.trim()) return groupedRegulations
     const term = filterSearch.toLowerCase()
     const filtered: typeof groupedRegulations = {
@@ -330,21 +226,7 @@ export function ChunkBrowserQA({ apiProxy }: ChunkBrowserQAProps) {
     return filtered
   }, [groupedRegulations, filterSearch])
 
-  // Regulation name lookup
-  const getRegName = (code: string): string => {
-    const reg = REGULATION_INFO.find(r => r.code === code)
-    return reg?.name || code
-  }
-
-  // Important metadata keys to show prominently
-  const STRUCTURAL_KEYS = new Set([
-    'article', 'artikel', 'paragraph', 'section_title', 'section', 'chapter',
-    'abschnitt', 'kapitel', 'pages', 'page',
-  ])
-  const HIDDEN_KEYS = new Set([
-    'text', 'content', 'chunk_text', 'id', 'embedding',
-  ])
-
+  const currentChunk = docChunks[docChunkIndex] || null
   const structInfo = getStructuralInfo(currentChunk)
 
   return (
@@ -352,323 +234,48 @@ export function ChunkBrowserQA({ apiProxy }: ChunkBrowserQAProps) {
       className={`flex flex-col ${fullscreen ? 'fixed inset-0 z-50 bg-slate-100 p-4' : ''}`}
       style={fullscreen ? { height: '100vh' } : { height: 'calc(100vh - 220px)' }}
     >
-      {/* Header bar — fixed height */}
-      <div className="flex-shrink-0 bg-white rounded-xl border border-slate-200 p-3 mb-3">
-        <div className="flex flex-wrap items-center gap-4">
-          <div>
-            <label className="block text-xs font-medium text-slate-500 mb-1">Collection</label>
-            <select
-              value={collection}
-              onChange={(e) => handleCollectionChange(e.target.value)}
-              className="px-3 py-1.5 border rounded-lg text-sm focus:ring-2 focus:ring-teal-500"
-            >
-              {COLLECTIONS.map(c => (
-                <option key={c} value={c}>{c}</option>
-              ))}
-            </select>
-          </div>
+      <ChunkBrowserToolbar
+        collection={collection}
+        onCollectionChange={handleCollectionChange}
+        selectedRegulation={selectedRegulation}
+        structInfo={structInfo}
+        docChunkIndex={docChunkIndex}
+        docTotalChunks={docTotalChunks}
+        docChunksLength={docChunks.length}
+        chunksPerPage={chunksPerPage}
+        setChunksPerPage={setChunksPerPage}
+        splitViewActive={splitViewActive}
+        setSplitViewActive={setSplitViewActive}
+        fullscreen={fullscreen}
+        setFullscreen={setFullscreen}
+        onPrev={() => { if (docChunkIndex > 0) setDocChunkIndex(i => i - 1) }}
+        onNext={() => { if (docChunkIndex < docChunks.length - 1) setDocChunkIndex(i => i + 1) }}
+        onJumpTo={setDocChunkIndex}
+      />
 
-          {selectedRegulation && (
-            <>
-              <div className="flex items-center gap-2">
-                <span className="text-sm font-semibold text-slate-900">
-                  {selectedRegulation} — {getRegName(selectedRegulation)}
-                </span>
-                {structInfo.article && (
-                  <span className="px-2 py-0.5 bg-blue-100 text-blue-800 text-xs font-medium rounded">
-                    {structInfo.article}
-                  </span>
-                )}
-                {structInfo.pages && (
-                  <span className="px-2 py-0.5 bg-slate-100 text-slate-600 text-xs rounded">
-                    {structInfo.pages}
-                  </span>
-                )}
-              </div>
-              <div className="flex items-center gap-2 ml-auto">
-                <button
-                  onClick={handlePrev}
-                  disabled={docChunkIndex === 0}
-                  className="px-3 py-1.5 text-sm font-medium border rounded-lg bg-white hover:bg-slate-50 disabled:opacity-30 disabled:cursor-not-allowed"
-                >
-                  &#9664; Zurueck
-                </button>
-                <span className="text-sm font-mono text-slate-600 min-w-[80px] text-center">
-                  {docChunkIndex + 1} / {docTotalChunks}
-                </span>
-                <button
-                  onClick={handleNext}
-                  disabled={docChunkIndex >= docChunks.length - 1}
-                  className="px-3 py-1.5 text-sm font-medium border rounded-lg bg-white hover:bg-slate-50 disabled:opacity-30 disabled:cursor-not-allowed"
-                >
-                  Weiter &#9654;
-                </button>
-                <input
-                  type="number"
-                  min={1}
-                  max={docTotalChunks}
-                  value={docChunkIndex + 1}
-                  onChange={(e) => {
-                    const v = parseInt(e.target.value, 10)
-                    if (!isNaN(v) && v >= 1 && v <= docTotalChunks) setDocChunkIndex(v - 1)
-                  }}
-                  className="w-16 px-2 py-1 border rounded text-xs text-center"
-                  title="Springe zu Chunk Nr."
-                />
-              </div>
-              <div className="flex items-center gap-2">
-                <label className="text-xs text-slate-500">Chunks/Seite:</label>
-                <select
-                  value={chunksPerPage}
-                  onChange={(e) => setChunksPerPage(Number(e.target.value))}
-                  className="px-2 py-1 border rounded text-xs"
-                >
-                  {[3, 4, 5, 6, 8, 10, 12, 15, 20].map(n => (
-                    <option key={n} value={n}>{n}</option>
-                  ))}
-                </select>
-                <button
-                  onClick={() => setSplitViewActive(!splitViewActive)}
-                  className={`px-3 py-1 text-xs rounded-lg border ${
-                    splitViewActive ? 'bg-teal-50 border-teal-300 text-teal-700' : 'bg-slate-50 border-slate-300 text-slate-600'
-                  }`}
-                >
-                  {splitViewActive ? 'Split-View an' : 'Split-View aus'}
-                </button>
-                <button
-                  onClick={() => setFullscreen(!fullscreen)}
-                  className={`px-3 py-1 text-xs rounded-lg border ${
-                    fullscreen ? 'bg-indigo-50 border-indigo-300 text-indigo-700' : 'bg-slate-50 border-slate-300 text-slate-600'
-                  }`}
-                  title={fullscreen ? 'Vollbild beenden (Esc)' : 'Vollbild'}
-                >
-                  {fullscreen ? '&#10005; Vollbild beenden' : '&#9974; Vollbild'}
-                </button>
-              </div>
-            </>
-          )}
-        </div>
-      </div>
-
-      {/* Main content: Sidebar + Content — fills remaining height */}
       <div className="flex gap-3 flex-1 min-h-0">
-        {/* Sidebar — scrollable */}
-        <div className="w-56 flex-shrink-0 bg-white rounded-xl border border-slate-200 flex flex-col min-h-0">
-          <div className="flex-shrink-0 p-3 border-b border-slate-100">
-            <input
-              type="text"
-              value={filterSearch}
-              onChange={(e) => setFilterSearch(e.target.value)}
-              placeholder="Suche..."
-              className="w-full px-2 py-1.5 border rounded-lg text-sm focus:ring-2 focus:ring-teal-500"
-            />
-            {countsLoading && (
-              <div className="text-xs text-slate-400 mt-1 animate-pulse">Counts laden...</div>
-            )}
-          </div>
-          <div className="flex-1 overflow-y-auto min-h-0">
-            {GROUP_ORDER.map(group => {
-              const items = filteredRegulations[group]
-              if (items.length === 0) return null
-              const isCollapsed = collapsedGroups.has(group)
-              return (
-                <div key={group}>
-                  <button
-                    onClick={() => toggleGroup(group)}
-                    className="w-full px-3 py-1.5 text-left text-xs font-semibold text-slate-500 bg-slate-50 hover:bg-slate-100 flex items-center justify-between sticky top-0 z-10"
-                  >
-                    <span>{GROUP_LABELS[group]}</span>
-                    <span className="text-slate-400">{isCollapsed ? '+' : '-'}</span>
-                  </button>
-                  {!isCollapsed && items.map(reg => {
-                    const count = regulationCounts[reg.code] ?? 0
-                    const isSelected = selectedRegulation === reg.code
-                    return (
-                      <button
-                        key={reg.code}
-                        onClick={() => handleSelectRegulation(reg.code)}
-                        className={`w-full px-3 py-1.5 text-left text-sm flex items-center justify-between hover:bg-teal-50 transition-colors ${
-                          isSelected ? 'bg-teal-100 text-teal-900 font-medium' : 'text-slate-700'
-                        }`}
-                      >
-                        <span className="truncate text-xs">{reg.name || reg.code}</span>
-                        <span className={`text-xs tabular-nums flex-shrink-0 ml-1 ${count > 0 ? 'text-slate-500' : 'text-slate-300'}`}>
-                          {count > 0 ? count.toLocaleString() : '—'}
-                        </span>
-                      </button>
-                    )
-                  })}
-                </div>
-              )
-            })}
-          </div>
-        </div>
+        <ChunkBrowserSidebar
+          filterSearch={filterSearch}
+          setFilterSearch={setFilterSearch}
+          countsLoading={countsLoading}
+          filteredRegulations={filteredRegulations}
+          regulationCounts={regulationCounts}
+          selectedRegulation={selectedRegulation}
+          collapsedGroups={collapsedGroups}
+          onSelectRegulation={handleSelectRegulation}
+          onToggleGroup={toggleGroup}
+        />
 
-        {/* Content area — fills remaining width and height */}
-        {!selectedRegulation ? (
-          <div className="flex-1 flex items-center justify-center bg-white rounded-xl border border-slate-200">
-            <div className="text-center text-slate-400 space-y-2">
-              <div className="text-4xl">&#128269;</div>
-              <p className="text-sm">Dokument in der Sidebar auswaehlen, um QA zu starten.</p>
-              <p className="text-xs text-slate-300">Pfeiltasten: Chunk vor/zurueck</p>
-            </div>
-          </div>
-        ) : docLoading ? (
-          <div className="flex-1 flex items-center justify-center bg-white rounded-xl border border-slate-200">
-            <div className="text-center text-slate-500 space-y-2">
-              <div className="animate-spin text-3xl">&#9881;</div>
-              <p className="text-sm">Chunks werden geladen...</p>
-              <p className="text-xs text-slate-400">
-                {selectedRegulation}: {REGULATIONS_IN_RAG[selectedRegulation]?.chunks.toLocaleString() || '?'} Chunks erwartet
-              </p>
-            </div>
-          </div>
-        ) : (
-          <div className={`flex-1 grid gap-3 min-h-0 ${splitViewActive ? 'grid-cols-2' : 'grid-cols-1'}`}>
-            {/* Chunk-Text Panel — fixed height, internal scroll */}
-            <div className="bg-white rounded-xl border border-slate-200 flex flex-col min-h-0 overflow-hidden">
-              {/* Panel header */}
-              <div className="flex-shrink-0 px-4 py-2 bg-slate-50 border-b border-slate-100 flex items-center justify-between">
-                <span className="text-sm font-medium text-slate-700">Chunk-Text</span>
-                <div className="flex items-center gap-2">
-                  {structInfo.article && (
-                    <span className="px-2 py-0.5 bg-blue-50 text-blue-700 text-xs font-medium rounded border border-blue-200">
-                      {structInfo.article}
-                    </span>
-                  )}
-                  {structInfo.section && (
-                    <span className="px-2 py-0.5 bg-purple-50 text-purple-700 text-xs rounded border border-purple-200">
-                      {structInfo.section}
-                    </span>
-                  )}
-                  <span className="text-xs text-slate-400 tabular-nums">
-                    #{docChunkIndex} / {docTotalChunks - 1}
-                  </span>
-                </div>
-              </div>
-
-              {/* Scrollable content */}
-              <div className="flex-1 overflow-y-auto min-h-0 p-4 space-y-3">
-                {/* Overlap from previous chunk */}
-                {prevChunk && (
-                  <div className="text-xs text-slate-400 bg-amber-50 border-l-2 border-amber-300 px-3 py-2 rounded-r">
-                    <div className="font-medium text-amber-600 mb-1">&#8593; Ende vorheriger Chunk #{docChunkIndex - 1}</div>
-                    <p className="whitespace-pre-wrap break-words leading-relaxed">{getOverlapPrev()}</p>
-                  </div>
-                )}
-
-                {/* Current chunk text */}
-                {currentChunk ? (
-                  <div className="text-sm text-slate-800 whitespace-pre-wrap break-words leading-relaxed border-l-2 border-teal-400 pl-3">
-                    {getChunkText(currentChunk)}
-                  </div>
-                ) : (
-                  <div className="text-sm text-slate-400 italic">Kein Chunk-Text vorhanden.</div>
-                )}
-
-                {/* Overlap from next chunk */}
-                {nextChunk && (
-                  <div className="text-xs text-slate-400 bg-amber-50 border-l-2 border-amber-300 px-3 py-2 rounded-r">
-                    <div className="font-medium text-amber-600 mb-1">&#8595; Anfang naechster Chunk #{docChunkIndex + 1}</div>
-                    <p className="whitespace-pre-wrap break-words leading-relaxed">{getOverlapNext()}</p>
-                  </div>
-                )}
-
-                {/* Metadata */}
-                {currentChunk && (
-                  <div className="mt-4 pt-3 border-t border-slate-100">
-                    <div className="text-xs font-medium text-slate-500 mb-2">Metadaten</div>
-                    <div className="grid grid-cols-2 gap-x-4 gap-y-1 text-xs">
-                      {Object.entries(currentChunk)
-                        .filter(([k]) => !HIDDEN_KEYS.has(k))
-                        .sort(([a], [b]) => {
-                          // Structural keys first
-                          const aStruct = STRUCTURAL_KEYS.has(a) ? 0 : 1
-                          const bStruct = STRUCTURAL_KEYS.has(b) ? 0 : 1
-                          return aStruct - bStruct || a.localeCompare(b)
-                        })
-                        .map(([k, v]) => (
-                          <div key={k} className={`flex gap-1 ${STRUCTURAL_KEYS.has(k) ? 'col-span-2 font-medium' : ''}`}>
-                            <span className="font-medium text-slate-500 flex-shrink-0">{k}:</span>
-                            <span className="text-slate-700 break-all">
-                              {Array.isArray(v) ? v.join(', ') : String(v)}
-                            </span>
-                          </div>
-                        ))}
-                    </div>
-                    {/* Chunk quality indicator */}
-                    <div className="mt-3 pt-2 border-t border-slate-50">
-                      <div className="text-xs text-slate-400">
-                        Chunk-Laenge: {getChunkText(currentChunk).length} Zeichen
-                        {getChunkText(currentChunk).length < 50 && (
-                          <span className="ml-2 text-orange-500 font-medium">&#9888; Sehr kurz</span>
-                        )}
-                        {getChunkText(currentChunk).length > 2000 && (
-                          <span className="ml-2 text-orange-500 font-medium">&#9888; Sehr lang</span>
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-
-            {/* PDF-Viewer Panel */}
-            {splitViewActive && (
-              <div className="bg-white rounded-xl border border-slate-200 flex flex-col min-h-0 overflow-hidden">
-                <div className="flex-shrink-0 px-4 py-2 bg-slate-50 border-b border-slate-100 flex items-center justify-between">
-                  <span className="text-sm font-medium text-slate-700">Original-PDF</span>
-                  <div className="flex items-center gap-2">
-                    <span className="text-xs text-slate-400">
-                      Seite ~{pdfPage}
-                      {pdfMapping?.totalPages ? ` / ${pdfMapping.totalPages}` : ''}
-                    </span>
-                    {pdfUrl && (
-                      <a
-                        href={pdfUrl.split('#')[0]}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="text-xs text-teal-600 hover:text-teal-800 underline"
-                      >
-                        Oeffnen &#8599;
-                      </a>
-                    )}
-                  </div>
-                </div>
-                <div className="flex-1 min-h-0 relative">
-                  {pdfUrl && pdfExists ? (
-                    <iframe
-                      key={`${selectedRegulation}-${pdfPage}`}
-                      src={pdfUrl}
-                      className="absolute inset-0 w-full h-full border-0"
-                      title="Original PDF"
-                    />
-                  ) : (
-                    <div className="flex items-center justify-center h-full text-slate-400 text-sm p-4">
-                      <div className="text-center space-y-2">
-                        <div className="text-3xl">&#128196;</div>
-                        {!pdfMapping ? (
-                          <>
-                            <p>Kein PDF-Mapping fuer {selectedRegulation}.</p>
-                            <p className="text-xs">rag-pdf-mapping.ts ergaenzen.</p>
-                          </>
-                        ) : pdfExists === false ? (
-                          <>
-                            <p className="font-medium text-orange-600">PDF nicht vorhanden</p>
-                            <p className="text-xs">Datei <code className="bg-slate-100 px-1 rounded">{pdfMapping.filename}</code> fehlt in ~/rag-originals/</p>
-                            <p className="text-xs mt-1">Bitte manuell herunterladen und dort ablegen.</p>
-                          </>
-                        ) : (
-                          <p>PDF wird geprueft...</p>
-                        )}
-                      </div>
-                    </div>
-                  )}
-                </div>
-              </div>
-            )}
-          </div>
-        )}
+        <ChunkBrowserContent
+          selectedRegulation={selectedRegulation}
+          docLoading={docLoading}
+          docChunks={docChunks}
+          docChunkIndex={docChunkIndex}
+          docTotalChunks={docTotalChunks}
+          splitViewActive={splitViewActive}
+          chunksPerPage={chunksPerPage}
+          pdfExists={pdfExists}
+        />
       </div>
     </div>
   )

admin-lehrer/app/(admin)/ai/rag/components/ChunkBrowserSidebar.tsx

@@ -0,0 +1,81 @@
+'use client'
+
+import React from 'react'
+import { RegGroupKey, GROUP_LABELS, GROUP_ORDER } from './ChunkBrowserConstants'
+
+interface ChunkBrowserSidebarProps {
+  filterSearch: string
+  setFilterSearch: (v: string) => void
+  countsLoading: boolean
+  filteredRegulations: Record<RegGroupKey, { code: string; name: string; type: string }[]>
+  regulationCounts: Record<string, number>
+  selectedRegulation: string | null
+  collapsedGroups: Set<string>
+  onSelectRegulation: (code: string) => void
+  onToggleGroup: (group: string) => void
+}
+
+export function ChunkBrowserSidebar({
+  filterSearch,
+  setFilterSearch,
+  countsLoading,
+  filteredRegulations,
+  regulationCounts,
+  selectedRegulation,
+  collapsedGroups,
+  onSelectRegulation,
+  onToggleGroup,
+}: ChunkBrowserSidebarProps) {
+  return (
+    <div className="w-56 flex-shrink-0 bg-white rounded-xl border border-slate-200 flex flex-col min-h-0">
+      <div className="flex-shrink-0 p-3 border-b border-slate-100">
+        <input
+          type="text"
+          value={filterSearch}
+          onChange={(e) => setFilterSearch(e.target.value)}
+          placeholder="Suche..."
+          className="w-full px-2 py-1.5 border rounded-lg text-sm focus:ring-2 focus:ring-teal-500"
+        />
+        {countsLoading && (
+          <div className="text-xs text-slate-400 mt-1 animate-pulse">Counts laden...</div>
+        )}
+      </div>
+      <div className="flex-1 overflow-y-auto min-h-0">
+        {GROUP_ORDER.map(group => {
+          const items = filteredRegulations[group]
+          if (items.length === 0) return null
+          const isCollapsed = collapsedGroups.has(group)
+          return (
+            <div key={group}>
+              <button
+                onClick={() => onToggleGroup(group)}
+                className="w-full px-3 py-1.5 text-left text-xs font-semibold text-slate-500 bg-slate-50 hover:bg-slate-100 flex items-center justify-between sticky top-0 z-10"
+              >
+                <span>{GROUP_LABELS[group]}</span>
+                <span className="text-slate-400">{isCollapsed ? '+' : '-'}</span>
+              </button>
+              {!isCollapsed && items.map(reg => {
+                const count = regulationCounts[reg.code] ?? 0
+                const isSelected = selectedRegulation === reg.code
+                return (
+                  <button
+                    key={reg.code}
+                    onClick={() => onSelectRegulation(reg.code)}
+                    className={`w-full px-3 py-1.5 text-left text-sm flex items-center justify-between hover:bg-teal-50 transition-colors ${
+                      isSelected ? 'bg-teal-100 text-teal-900 font-medium' : 'text-slate-700'
+                    }`}
+                  >
+                    <span className="truncate text-xs">{reg.name || reg.code}</span>
+                    <span className={`text-xs tabular-nums flex-shrink-0 ml-1 ${count > 0 ? 'text-slate-500' : 'text-slate-300'}`}>
+                      {count > 0 ? count.toLocaleString() : '\u2014'}
+                    </span>
+                  </button>
+                )
+              })}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

admin-lehrer/app/(admin)/ai/rag/components/ChunkBrowserToolbar.tsx

@@ -0,0 +1,142 @@
+'use client'
+
+import React from 'react'
+import { COLLECTIONS } from './ChunkBrowserConstants'
+import { getRegName } from './ChunkBrowserHelpers'
+
+interface ChunkBrowserToolbarProps {
+  collection: string
+  onCollectionChange: (col: string) => void
+  selectedRegulation: string | null
+  structInfo: { article?: string; section?: string; pages?: string }
+  docChunkIndex: number
+  docTotalChunks: number
+  docChunksLength: number
+  chunksPerPage: number
+  setChunksPerPage: (v: number) => void
+  splitViewActive: boolean
+  setSplitViewActive: (v: boolean) => void
+  fullscreen: boolean
+  setFullscreen: (v: boolean) => void
+  onPrev: () => void
+  onNext: () => void
+  onJumpTo: (idx: number) => void
+}
+
+export function ChunkBrowserToolbar({
+  collection,
+  onCollectionChange,
+  selectedRegulation,
+  structInfo,
+  docChunkIndex,
+  docTotalChunks,
+  docChunksLength,
+  chunksPerPage,
+  setChunksPerPage,
+  splitViewActive,
+  setSplitViewActive,
+  fullscreen,
+  setFullscreen,
+  onPrev,
+  onNext,
+  onJumpTo,
+}: ChunkBrowserToolbarProps) {
+  return (
+    <div className="flex-shrink-0 bg-white rounded-xl border border-slate-200 p-3 mb-3">
+      <div className="flex flex-wrap items-center gap-4">
+        <div>
+          <label className="block text-xs font-medium text-slate-500 mb-1">Collection</label>
+          <select
+            value={collection}
+            onChange={(e) => onCollectionChange(e.target.value)}
+            className="px-3 py-1.5 border rounded-lg text-sm focus:ring-2 focus:ring-teal-500"
+          >
+            {COLLECTIONS.map(c => (
+              <option key={c} value={c}>{c}</option>
+            ))}
+          </select>
+        </div>
+
+        {selectedRegulation && (
+          <>
+            <div className="flex items-center gap-2">
+              <span className="text-sm font-semibold text-slate-900">
+                {selectedRegulation} &mdash; {getRegName(selectedRegulation)}
+              </span>
+              {structInfo.article && (
+                <span className="px-2 py-0.5 bg-blue-100 text-blue-800 text-xs font-medium rounded">
+                  {structInfo.article}
+                </span>
+              )}
+              {structInfo.pages && (
+                <span className="px-2 py-0.5 bg-slate-100 text-slate-600 text-xs rounded">
+                  {structInfo.pages}
+                </span>
+              )}
+            </div>
+            <div className="flex items-center gap-2 ml-auto">
+              <button
+                onClick={onPrev}
+                disabled={docChunkIndex === 0}
+                className="px-3 py-1.5 text-sm font-medium border rounded-lg bg-white hover:bg-slate-50 disabled:opacity-30 disabled:cursor-not-allowed"
+              >
+                &#9664; Zurueck
+              </button>
+              <span className="text-sm font-mono text-slate-600 min-w-[80px] text-center">
+                {docChunkIndex + 1} / {docTotalChunks}
+              </span>
+              <button
+                onClick={onNext}
+                disabled={docChunkIndex >= docChunksLength - 1}
+                className="px-3 py-1.5 text-sm font-medium border rounded-lg bg-white hover:bg-slate-50 disabled:opacity-30 disabled:cursor-not-allowed"
+              >
+                Weiter &#9654;
+              </button>
+              <input
+                type="number"
+                min={1}
+                max={docTotalChunks}
+                value={docChunkIndex + 1}
+                onChange={(e) => {
+                  const v = parseInt(e.target.value, 10)
+                  if (!isNaN(v) && v >= 1 && v <= docTotalChunks) onJumpTo(v - 1)
+                }}
+                className="w-16 px-2 py-1 border rounded text-xs text-center"
+                title="Springe zu Chunk Nr."
+              />
+            </div>
+            <div className="flex items-center gap-2">
+              <label className="text-xs text-slate-500">Chunks/Seite:</label>
+              <select
+                value={chunksPerPage}
+                onChange={(e) => setChunksPerPage(Number(e.target.value))}
+                className="px-2 py-1 border rounded text-xs"
+              >
+                {[3, 4, 5, 6, 8, 10, 12, 15, 20].map(n => (
+                  <option key={n} value={n}>{n}</option>
+                ))}
+              </select>
+              <button
+                onClick={() => setSplitViewActive(!splitViewActive)}
+                className={`px-3 py-1 text-xs rounded-lg border ${
+                  splitViewActive ? 'bg-teal-50 border-teal-300 text-teal-700' : 'bg-slate-50 border-slate-300 text-slate-600'
+                }`}
+              >
+                {splitViewActive ? 'Split-View an' : 'Split-View aus'}
+              </button>
+              <button
+                onClick={() => setFullscreen(!fullscreen)}
+                className={`px-3 py-1 text-xs rounded-lg border ${
+                  fullscreen ? 'bg-indigo-50 border-indigo-300 text-indigo-700' : 'bg-slate-50 border-slate-300 text-slate-600'
+                }`}
+                title={fullscreen ? 'Vollbild beenden (Esc)' : 'Vollbild'}
+              >
+                {fullscreen ? '\u2715 Vollbild beenden' : '\u2716 Vollbild'}
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}

admin-lehrer/app/(admin)/website/manager/_components/SectionEditors.tsx

@@ -0,0 +1,189 @@
+'use client'
+
+import type {
+  WebsiteContent,
+  HeroContent,
+  FeatureContent,
+} from '@/lib/content-types'
+
+// Shared styles
+export const inputCls = 'w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition-colors'
+export const labelCls = 'block text-xs font-medium text-slate-600 mb-1'
+
+export interface EditorProps {
+  content: WebsiteContent
+  setContent: React.Dispatch<React.SetStateAction<WebsiteContent | null>>
+}
+
+// =============================================================================
+// Hero Editor
+// =============================================================================
+
+export function HeroEditor({ content, setContent }: EditorProps) {
+  function update(field: keyof HeroContent, value: string) {
+    setContent(c => c ? { ...c, hero: { ...c.hero, [field]: value } } : c)
+  }
+  return (
+    <div className="grid gap-3">
+      <div><label className={labelCls}>Badge</label><input className={inputCls} value={content.hero.badge} onChange={e => update('badge', e.target.value)} /></div>
+      <div><label className={labelCls}>Titel</label><input className={inputCls} value={content.hero.title} onChange={e => update('title', e.target.value)} /></div>
+      <div className="grid grid-cols-2 gap-3">
+        <div><label className={labelCls}>Highlight 1</label><input className={inputCls} value={content.hero.titleHighlight1} onChange={e => update('titleHighlight1', e.target.value)} /></div>
+        <div><label className={labelCls}>Highlight 2</label><input className={inputCls} value={content.hero.titleHighlight2} onChange={e => update('titleHighlight2', e.target.value)} /></div>
+      </div>
+      <div><label className={labelCls}>Untertitel</label><textarea className={inputCls} rows={2} value={content.hero.subtitle} onChange={e => update('subtitle', e.target.value)} /></div>
+      <div className="grid grid-cols-3 gap-3">
+        <div><label className={labelCls}>CTA Primaer</label><input className={inputCls} value={content.hero.ctaPrimary} onChange={e => update('ctaPrimary', e.target.value)} /></div>
+        <div><label className={labelCls}>CTA Sekundaer</label><input className={inputCls} value={content.hero.ctaSecondary} onChange={e => update('ctaSecondary', e.target.value)} /></div>
+        <div><label className={labelCls}>CTA Hinweis</label><input className={inputCls} value={content.hero.ctaHint} onChange={e => update('ctaHint', e.target.value)} /></div>
+      </div>
+    </div>
+  )
+}
+
+// =============================================================================
+// Features Editor
+// =============================================================================
+
+export function FeaturesEditor({ content, setContent }: EditorProps) {
+  function update(index: number, field: keyof FeatureContent, value: string) {
+    setContent(c => {
+      if (!c) return c
+      const features = [...c.features]
+      features[index] = { ...features[index], [field]: value }
+      return { ...c, features }
+    })
+  }
+  return (
+    <div className="space-y-3">
+      {content.features.map((feature, i) => (
+        <div key={feature.id} className="bg-slate-50 rounded-lg p-3 space-y-2">
+          <div className="grid grid-cols-6 gap-2">
+            <div><label className={labelCls}>Icon</label><input className={`${inputCls} text-center text-lg`} value={feature.icon} onChange={e => update(i, 'icon', e.target.value)} /></div>
+            <div className="col-span-5"><label className={labelCls}>Titel</label><input className={inputCls} value={feature.title} onChange={e => update(i, 'title', e.target.value)} /></div>
+          </div>
+          <div><label className={labelCls}>Beschreibung</label><textarea className={inputCls} rows={2} value={feature.description} onChange={e => update(i, 'description', e.target.value)} /></div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+// =============================================================================
+// FAQ Editor
+// =============================================================================
+
+export function FAQEditor({ content, setContent }: EditorProps) {
+  function updateItem(index: number, field: 'question' | 'answer', value: string) {
+    setContent(c => {
+      if (!c) return c
+      const faq = [...c.faq]
+      if (field === 'answer') { faq[index] = { ...faq[index], answer: value.split('\n') } }
+      else { faq[index] = { ...faq[index], question: value } }
+      return { ...c, faq }
+    })
+  }
+  function addItem() { setContent(c => c ? { ...c, faq: [...c.faq, { question: 'Neue Frage?', answer: ['Antwort hier...'] }] } : c) }
+  function removeItem(index: number) { setContent(c => c ? { ...c, faq: c.faq.filter((_, i) => i !== index) } : c) }
+
+  return (
+    <div className="space-y-3">
+      {content.faq.map((item, i) => (
+        <div key={i} className="bg-slate-50 rounded-lg p-3 space-y-2 relative group">
+          <button onClick={() => removeItem(i)} className="absolute top-2 right-2 p-1 text-red-400 hover:text-red-600 opacity-0 group-hover:opacity-100 transition-opacity" title="Entfernen">
+            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
+          </button>
+          <div><label className={labelCls}>Frage {i + 1}</label><input className={inputCls} value={item.question} onChange={e => updateItem(i, 'question', e.target.value)} /></div>
+          <div><label className={labelCls}>Antwort</label><textarea className={`${inputCls} font-mono`} rows={3} value={item.answer.join('\n')} onChange={e => updateItem(i, 'answer', e.target.value)} /></div>
+        </div>
+      ))}
+      <button onClick={addItem} className="w-full py-2 border-2 border-dashed border-slate-300 rounded-lg text-sm text-slate-500 hover:border-sky-400 hover:text-sky-600 transition-colors">
+        + Frage hinzufuegen
+      </button>
+    </div>
+  )
+}
+
+// =============================================================================
+// Pricing Editor
+// =============================================================================
+
+export function PricingEditor({ content, setContent }: EditorProps) {
+  function update(index: number, field: string, value: string | number | boolean) {
+    setContent(c => {
+      if (!c) return c
+      const pricing = [...c.pricing]
+      if (field === 'price') { pricing[index] = { ...pricing[index], price: Number(value) } }
+      else if (field === 'popular') { pricing[index] = { ...pricing[index], popular: Boolean(value) } }
+      else if (field.startsWith('features.')) {
+        const sub = field.replace('features.', '')
+        if (sub === 'included' && typeof value === 'string') { pricing[index] = { ...pricing[index], features: { ...pricing[index].features, included: value.split('\n') } } }
+        else { pricing[index] = { ...pricing[index], features: { ...pricing[index].features, [sub]: value } } }
+      } else { pricing[index] = { ...pricing[index], [field]: value } }
+      return { ...c, pricing }
+    })
+  }
+  return (
+    <div className="space-y-4">
+      {content.pricing.map((plan, i) => (
+        <div key={plan.id} className="bg-slate-50 rounded-lg p-3 space-y-2">
+          <div className="flex items-center gap-2 mb-1">
+            <span className="text-sm font-semibold text-slate-800">{plan.name}</span>
+            {plan.popular && <span className="text-xs bg-sky-100 text-sky-700 px-1.5 py-0.5 rounded">Beliebt</span>}
+          </div>
+          <div className="grid grid-cols-4 gap-2">
+            <div><label className={labelCls}>Name</label><input className={inputCls} value={plan.name} onChange={e => update(i, 'name', e.target.value)} /></div>
+            <div><label className={labelCls}>Preis (EUR)</label><input className={inputCls} type="number" step="0.01" value={plan.price} onChange={e => update(i, 'price', e.target.value)} /></div>
+            <div><label className={labelCls}>Intervall</label><input className={inputCls} value={plan.interval} onChange={e => update(i, 'interval', e.target.value)} /></div>
+            <div className="flex items-end pb-1"><label className="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked={plan.popular || false} onChange={e => update(i, 'popular', e.target.checked)} className="w-4 h-4 text-sky-600 rounded" /><span className="text-xs text-slate-600">Beliebt</span></label></div>
+          </div>
+          <div><label className={labelCls}>Beschreibung</label><input className={inputCls} value={plan.description} onChange={e => update(i, 'description', e.target.value)} /></div>
+          <div className="grid grid-cols-2 gap-2">
+            <div><label className={labelCls}>Aufgaben</label><input className={inputCls} value={plan.features.tasks} onChange={e => update(i, 'features.tasks', e.target.value)} /></div>
+            <div><label className={labelCls}>Aufgaben-Beschreibung</label><input className={inputCls} value={plan.features.taskDescription} onChange={e => update(i, 'features.taskDescription', e.target.value)} /></div>
+          </div>
+          <div><label className={labelCls}>Features (eine pro Zeile)</label><textarea className={`${inputCls} font-mono`} rows={3} value={plan.features.included.join('\n')} onChange={e => update(i, 'features.included', e.target.value)} /></div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+// =============================================================================
+// Trust Editor
+// =============================================================================
+
+export function TrustEditor({ content, setContent }: EditorProps) {
+  function update(key: 'item1' | 'item2' | 'item3', field: 'value' | 'label', val: string) {
+    setContent(c => c ? { ...c, trust: { ...c.trust, [key]: { ...c.trust[key], [field]: val } } } : c)
+  }
+  return (
+    <div className="grid grid-cols-3 gap-3">
+      {(['item1', 'item2', 'item3'] as const).map((key, i) => (
+        <div key={key} className="bg-slate-50 rounded-lg p-3 space-y-2">
+          <div><label className={labelCls}>Wert {i + 1}</label><input className={inputCls} value={content.trust[key].value} onChange={e => update(key, 'value', e.target.value)} /></div>
+          <div><label className={labelCls}>Label {i + 1}</label><input className={inputCls} value={content.trust[key].label} onChange={e => update(key, 'label', e.target.value)} /></div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+// =============================================================================
+// Testimonial Editor
+// =============================================================================
+
+export function TestimonialEditor({ content, setContent }: EditorProps) {
+  function update(field: 'quote' | 'author' | 'role', value: string) {
+    setContent(c => c ? { ...c, testimonial: { ...c.testimonial, [field]: value } } : c)
+  }
+  return (
+    <div className="space-y-3">
+      <div><label className={labelCls}>Zitat</label><textarea className={inputCls} rows={3} value={content.testimonial.quote} onChange={e => update('quote', e.target.value)} /></div>
+      <div className="grid grid-cols-2 gap-3">
+        <div><label className={labelCls}>Autor</label><input className={inputCls} value={content.testimonial.author} onChange={e => update('author', e.target.value)} /></div>
+        <div><label className={labelCls}>Rolle</label><input className={inputCls} value={content.testimonial.role} onChange={e => update('role', e.target.value)} /></div>
+      </div>
+    </div>
+  )
+}

admin-lehrer/app/(admin)/website/manager/page.tsx

@@ -9,17 +9,14 @@
  */
 
 import { useState, useEffect, useRef, useCallback } from 'react'
-import type {
-  WebsiteContent,
-  HeroContent,
-  FeatureContent,
-  FAQItem,
-  PricingPlan,
-} from '@/lib/content-types'
+import type { WebsiteContent } from '@/lib/content-types'
+import {
+  HeroEditor, FeaturesEditor, FAQEditor, PricingEditor,
+  TrustEditor, TestimonialEditor,
+} from './_components/SectionEditors'
 
 const ADMIN_KEY = 'breakpilot-admin-2024'
 
-// Section metadata for cards
 const SECTIONS = [
   { key: 'hero', name: 'Hero Section', icon: '🎯', scrollTo: 'hero' },
   { key: 'features', name: 'Features', icon: '⚡', scrollTo: 'features' },
@@ -35,52 +32,34 @@ type SectionKey = (typeof SECTIONS)[number]['key']
 
 function countWords(content: WebsiteContent): number {
   const texts: string[] = []
-  // Hero
   texts.push(content.hero.badge, content.hero.title, content.hero.titleHighlight1, content.hero.titleHighlight2, content.hero.subtitle, content.hero.ctaPrimary, content.hero.ctaSecondary, content.hero.ctaHint)
-  // Features
   content.features.forEach(f => { texts.push(f.title, f.description) })
-  // FAQ
   content.faq.forEach(f => { texts.push(f.question, ...f.answer) })
-  // Pricing
   content.pricing.forEach(p => { texts.push(p.name, p.description, p.features.tasks, p.features.taskDescription, ...p.features.included) })
-  // Trust
   texts.push(content.trust.item1.value, content.trust.item1.label, content.trust.item2.value, content.trust.item2.label, content.trust.item3.value, content.trust.item3.label)
-  // Testimonial
   texts.push(content.testimonial.quote, content.testimonial.author, content.testimonial.role)
   return texts.filter(Boolean).join(' ').split(/\s+/).filter(Boolean).length
 }
 
 function sectionComplete(content: WebsiteContent, section: SectionKey): boolean {
   switch (section) {
-    case 'hero':
-      return !!(content.hero.title && content.hero.subtitle && content.hero.ctaPrimary)
-    case 'features':
-      return content.features.length > 0 && content.features.every(f => f.title && f.description)
-    case 'faq':
-      return content.faq.length > 0 && content.faq.every(f => f.question && f.answer.length > 0)
-    case 'pricing':
-      return content.pricing.length > 0 && content.pricing.every(p => p.name && p.price > 0)
-    case 'trust':
-      return !!(content.trust.item1.value && content.trust.item2.value && content.trust.item3.value)
-    case 'testimonial':
-      return !!(content.testimonial.quote && content.testimonial.author)
+    case 'hero': return !!(content.hero.title && content.hero.subtitle && content.hero.ctaPrimary)
+    case 'features': return content.features.length > 0 && content.features.every(f => f.title && f.description)
+    case 'faq': return content.faq.length > 0 && content.faq.every(f => f.question && f.answer.length > 0)
+    case 'pricing': return content.pricing.length > 0 && content.pricing.every(p => p.name && p.price > 0)
+    case 'trust': return !!(content.trust.item1.value && content.trust.item2.value && content.trust.item3.value)
+    case 'testimonial': return !!(content.testimonial.quote && content.testimonial.author)
   }
 }
 
 function sectionSummary(content: WebsiteContent, section: SectionKey): string {
   switch (section) {
-    case 'hero':
-      return `"${content.hero.title} ${content.hero.titleHighlight1}"`.slice(0, 50)
-    case 'features':
-      return `${content.features.length} Features`
-    case 'faq':
-      return `${content.faq.length} Fragen`
-    case 'pricing':
-      return `${content.pricing.length} Plaene`
-    case 'trust':
-      return `${content.trust.item1.value}, ${content.trust.item2.value}, ${content.trust.item3.value}`
-    case 'testimonial':
-      return `"${content.testimonial.quote.slice(0, 40)}..."`
+    case 'hero': return `"${content.hero.title} ${content.hero.titleHighlight1}"`.slice(0, 50)
+    case 'features': return `${content.features.length} Features`
+    case 'faq': return `${content.faq.length} Fragen`
+    case 'pricing': return `${content.pricing.length} Plaene`
+    case 'trust': return `${content.trust.item1.value}, ${content.trust.item2.value}, ${content.trust.item3.value}`
+    case 'testimonial': return `"${content.testimonial.quote.slice(0, 40)}..."`
   }
 }
 
@@ -96,108 +75,49 @@ export default function WebsiteManagerPage() {
   const [websiteStatus, setWebsiteStatus] = useState<{ online: boolean; responseTime: number } | null>(null)
   const iframeRef = useRef<HTMLIFrameElement>(null)
 
-  // Load content
-  useEffect(() => {
-    loadContent()
-    checkWebsiteStatus()
-  }, [])
-
-  // Auto-dismiss messages
-  useEffect(() => {
-    if (message) {
-      const t = setTimeout(() => setMessage(null), 4000)
-      return () => clearTimeout(t)
-    }
-  }, [message])
+  useEffect(() => { loadContent(); checkWebsiteStatus() }, [])
+  useEffect(() => { if (message) { const t = setTimeout(() => setMessage(null), 4000); return () => clearTimeout(t) } }, [message])
 
   async function loadContent() {
     try {
       const res = await fetch('/api/website/content')
-      if (res.ok) {
-        const data = await res.json()
-        setContent(data)
-        setOriginalContent(JSON.parse(JSON.stringify(data)))
-      } else {
-        setMessage({ type: 'error', text: 'Fehler beim Laden des Contents' })
-      }
-    } catch {
-      setMessage({ type: 'error', text: 'Verbindungsfehler beim Laden' })
-    } finally {
-      setLoading(false)
-    }
+      if (res.ok) { const data = await res.json(); setContent(data); setOriginalContent(JSON.parse(JSON.stringify(data))) }
+      else { setMessage({ type: 'error', text: 'Fehler beim Laden des Contents' }) }
+    } catch { setMessage({ type: 'error', text: 'Verbindungsfehler beim Laden' }) }
+    finally { setLoading(false) }
   }
 
   async function checkWebsiteStatus() {
-    try {
-      const res = await fetch('/api/website/status')
-      if (res.ok) {
-        const data = await res.json()
-        setWebsiteStatus(data)
-      }
-    } catch {
-      setWebsiteStatus({ online: false, responseTime: 0 })
-    }
+    try { const res = await fetch('/api/website/status'); if (res.ok) { setWebsiteStatus(await res.json()) } }
+    catch { setWebsiteStatus({ online: false, responseTime: 0 }) }
   }
 
   async function saveChanges() {
     if (!content) return
-    setSaving(true)
-    setMessage(null)
+    setSaving(true); setMessage(null)
     try {
-      const res = await fetch('/api/website/content', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json', 'x-admin-key': ADMIN_KEY },
-        body: JSON.stringify(content),
-      })
-      if (res.ok) {
-        setMessage({ type: 'success', text: 'Erfolgreich gespeichert!' })
-        setOriginalContent(JSON.parse(JSON.stringify(content)))
-        // Reload iframe to reflect changes
-        if (iframeRef.current) {
-          iframeRef.current.src = iframeRef.current.src
-        }
-      } else {
-        const err = await res.json()
-        setMessage({ type: 'error', text: err.error || 'Fehler beim Speichern' })
-      }
-    } catch {
-      setMessage({ type: 'error', text: 'Verbindungsfehler beim Speichern' })
-    } finally {
-      setSaving(false)
-    }
+      const res = await fetch('/api/website/content', { method: 'POST', headers: { 'Content-Type': 'application/json', 'x-admin-key': ADMIN_KEY }, body: JSON.stringify(content) })
+      if (res.ok) { setMessage({ type: 'success', text: 'Erfolgreich gespeichert!' }); setOriginalContent(JSON.parse(JSON.stringify(content))); if (iframeRef.current) { iframeRef.current.src = iframeRef.current.src } }
+      else { const err = await res.json(); setMessage({ type: 'error', text: err.error || 'Fehler beim Speichern' }) }
+    } catch { setMessage({ type: 'error', text: 'Verbindungsfehler beim Speichern' }) }
+    finally { setSaving(false) }
   }
 
   function resetContent() {
-    if (originalContent) {
-      setContent(JSON.parse(JSON.stringify(originalContent)))
-      setMessage({ type: 'success', text: 'Zurueckgesetzt auf letzten gespeicherten Stand' })
-    }
+    if (originalContent) { setContent(JSON.parse(JSON.stringify(originalContent))); setMessage({ type: 'success', text: 'Zurueckgesetzt auf letzten gespeicherten Stand' }) }
   }
 
-  // Scroll iframe to section
   const scrollPreview = useCallback((scrollTo: string) => {
     if (!iframeRef.current?.contentWindow) return
-    try {
-      iframeRef.current.contentWindow.postMessage(
-        { type: 'scrollTo', section: scrollTo },
-        '*'
-      )
-    } catch {
-      // cross-origin fallback
-    }
+    try { iframeRef.current.contentWindow.postMessage({ type: 'scrollTo', section: scrollTo }, '*') } catch { /* cross-origin fallback */ }
   }, [])
 
   function toggleSection(key: SectionKey) {
     const newExpanded = expandedSection === key ? null : key
     setExpandedSection(newExpanded)
-    if (newExpanded) {
-      const section = SECTIONS.find(s => s.key === newExpanded)
-      if (section) scrollPreview(section.scrollTo)
-    }
+    if (newExpanded) { const section = SECTIONS.find(s => s.key === newExpanded); if (section) scrollPreview(section.scrollTo) }
   }
 
-  // ─── Render ────────────────────────────────────────────────────────────────
-
   if (loading) {
     return (
       <div className="flex items-center justify-center py-20">
@@ -213,11 +133,7 @@ export default function WebsiteManagerPage() {
   }
 
   if (!content) {
-    return (
-      <div className="flex items-center justify-center py-20">
-        <div className="text-red-600">Content konnte nicht geladen werden.</div>
-      </div>
-    )
+    return <div className="flex items-center justify-center py-20"><div className="text-red-600">Content konnte nicht geladen werden.</div></div>
   }
 
   const wordCount = countWords(content)
@@ -227,58 +143,29 @@ export default function WebsiteManagerPage() {
 
   return (
     <div className="space-y-4">
-      {/* ── Status Bar ───────────────────────────────────────────────────── */}
+      {/* Status Bar */}
       <div className="bg-white rounded-xl border border-slate-200 px-5 py-3 flex items-center justify-between">
         <div className="flex items-center gap-4">
-          {/* Website status */}
           <div className="flex items-center gap-2">
             <span className={`w-2.5 h-2.5 rounded-full ${websiteStatus?.online ? 'bg-green-500' : 'bg-red-500'}`} />
             <span className="text-sm text-slate-700">
               Website {websiteStatus?.online ? 'online' : 'offline'}
-              {websiteStatus?.online && websiteStatus.responseTime > 0 && (
-                <span className="text-slate-400 ml-1">({websiteStatus.responseTime}ms)</span>
-              )}
+              {websiteStatus?.online && websiteStatus.responseTime > 0 && <span className="text-slate-400 ml-1">({websiteStatus.responseTime}ms)</span>}
             </span>
           </div>
-          {/* Link */}
-          <a
-            href="https://macmini:3000"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-sm text-sky-600 hover:text-sky-700 flex items-center gap-1"
-          >
+          <a href="https://macmini:3000" target="_blank" rel="noopener noreferrer" className="text-sm text-sky-600 hover:text-sky-700 flex items-center gap-1">
             Zur Website
-            <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <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>
+            <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><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>
           </a>
         </div>
         <div className="flex items-center gap-3">
-          {message && (
-            <span className={`px-3 py-1 rounded-lg text-sm font-medium ${
-              message.type === 'success' ? 'bg-green-50 text-green-700' : 'bg-red-50 text-red-700'
-            }`}>
-              {message.text}
-            </span>
-          )}
-          <button
-            onClick={resetContent}
-            disabled={!hasChanges}
-            className="px-4 py-2 text-sm font-medium text-slate-600 bg-slate-100 rounded-lg hover:bg-slate-200 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
-          >
-            Reset
-          </button>
-          <button
-            onClick={saveChanges}
-            disabled={saving || !hasChanges}
-            className="px-5 py-2 text-sm font-medium text-white bg-sky-600 rounded-lg hover:bg-sky-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-          >
-            {saving ? 'Speichern...' : 'Speichern'}
-          </button>
+          {message && <span className={`px-3 py-1 rounded-lg text-sm font-medium ${message.type === 'success' ? 'bg-green-50 text-green-700' : 'bg-red-50 text-red-700'}`}>{message.text}</span>}
+          <button onClick={resetContent} disabled={!hasChanges} className="px-4 py-2 text-sm font-medium text-slate-600 bg-slate-100 rounded-lg hover:bg-slate-200 disabled:opacity-40 disabled:cursor-not-allowed transition-colors">Reset</button>
+          <button onClick={saveChanges} disabled={saving || !hasChanges} className="px-5 py-2 text-sm font-medium text-white bg-sky-600 rounded-lg hover:bg-sky-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">{saving ? 'Speichern...' : 'Speichern'}</button>
         </div>
       </div>
 
-      {/* ── Stats Bar ────────────────────────────────────────────────────── */}
+      {/* Stats Bar */}
       <div className="grid grid-cols-4 gap-3">
         {[
           { label: 'Sektionen', value: `${SECTIONS.length}`, icon: '📄' },
@@ -288,33 +175,21 @@ export default function WebsiteManagerPage() {
         ].map((stat) => (
           <div key={stat.label} className="bg-white rounded-xl border border-slate-200 px-4 py-3 flex items-center gap-3">
             <span className="text-xl">{stat.icon}</span>
-            <div>
-              <div className="text-sm font-semibold text-slate-900">{stat.value}</div>
-              <div className="text-xs text-slate-500">{stat.label}</div>
-            </div>
+            <div><div className="text-sm font-semibold text-slate-900">{stat.value}</div><div className="text-xs text-slate-500">{stat.label}</div></div>
           </div>
         ))}
       </div>
 
-      {/* ── Main Layout: 60/40 ───────────────────────────────────────────── */}
+      {/* Main Layout: 60/40 */}
       <div className="grid grid-cols-5 gap-4" style={{ height: 'calc(100vh - 300px)' }}>
-        {/* ── Left: Section Cards (3/5 = 60%) ──────────────────────────── */}
+        {/* Left: Section Cards */}
         <div className="col-span-3 overflow-y-auto pr-1 space-y-3">
           {SECTIONS.map((section) => {
             const isExpanded = expandedSection === section.key
             const isComplete = sectionComplete(content, section.key)
             return (
-              <div
-                key={section.key}
-                className={`bg-white rounded-xl border transition-all ${
-                  isExpanded ? 'border-sky-300 shadow-md' : 'border-slate-200 hover:border-slate-300'
-                }`}
-              >
-                {/* Card Header */}
-                <button
-                  onClick={() => toggleSection(section.key)}
-                  className="w-full px-5 py-4 flex items-center justify-between text-left"
-                >
+              <div key={section.key} className={`bg-white rounded-xl border transition-all ${isExpanded ? 'border-sky-300 shadow-md' : 'border-slate-200 hover:border-slate-300'}`}>
+                <button onClick={() => toggleSection(section.key)} className="w-full px-5 py-4 flex items-center justify-between text-left">
                   <div className="flex items-center gap-3">
                     <span className="text-xl">{section.icon}</span>
                     <div>
@@ -330,16 +205,11 @@ export default function WebsiteManagerPage() {
                     ) : (
                       <span className="w-6 h-6 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center text-xs">!</span>
                     )}
-                    <svg
-                      className={`w-5 h-5 text-slate-400 transition-transform ${isExpanded ? 'rotate-180' : ''}`}
-                      fill="none" viewBox="0 0 24 24" stroke="currentColor"
-                    >
+                    <svg className={`w-5 h-5 text-slate-400 transition-transform ${isExpanded ? 'rotate-180' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                     </svg>
                   </div>
                 </button>
-
-                {/* Inline Editor */}
                 {isExpanded && (
                   <div className="px-5 pb-5 border-t border-slate-100 pt-4">
                     {section.key === 'hero' && <HeroEditor content={content} setContent={setContent} />}
@@ -355,316 +225,22 @@ export default function WebsiteManagerPage() {
           })}
         </div>
 
-        {/* ── Right: Live Preview (2/5 = 40%) ──────────────────────────── */}
+        {/* Right: Live Preview */}
         <div className="col-span-2 bg-white rounded-xl border border-slate-200 overflow-hidden flex flex-col">
-          {/* Preview Header */}
           <div className="bg-slate-50 border-b border-slate-200 px-4 py-2.5 flex items-center justify-between flex-shrink-0">
             <div className="flex items-center gap-2">
-              <div className="flex gap-1.5">
-                <div className="w-2.5 h-2.5 rounded-full bg-red-400" />
-                <div className="w-2.5 h-2.5 rounded-full bg-yellow-400" />
-                <div className="w-2.5 h-2.5 rounded-full bg-green-400" />
-              </div>
+              <div className="flex gap-1.5"><div className="w-2.5 h-2.5 rounded-full bg-red-400" /><div className="w-2.5 h-2.5 rounded-full bg-yellow-400" /><div className="w-2.5 h-2.5 rounded-full bg-green-400" /></div>
               <span className="text-xs text-slate-500 ml-2">macmini:3000</span>
             </div>
-            <button
-              onClick={() => { if (iframeRef.current) iframeRef.current.src = iframeRef.current.src }}
-              className="p-1 text-slate-400 hover:text-slate-600 rounded transition-colors"
-              title="Preview neu laden"
-            >
-              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-              </svg>
+            <button onClick={() => { if (iframeRef.current) iframeRef.current.src = iframeRef.current.src }} className="p-1 text-slate-400 hover:text-slate-600 rounded transition-colors" title="Preview neu laden">
+              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
             </button>
           </div>
-          {/* iframe */}
           <div className="flex-1 relative bg-slate-100">
-            <iframe
-              ref={iframeRef}
-              src="https://macmini:3000/?preview=true"
-              className="absolute inset-0 w-full h-full border-0"
-              style={{
-                width: '166.67%',
-                height: '166.67%',
-                transform: 'scale(0.6)',
-                transformOrigin: 'top left',
-              }}
-              title="Website Preview"
-              sandbox="allow-same-origin allow-scripts"
-            />
+            <iframe ref={iframeRef} src="https://macmini:3000/?preview=true" className="absolute inset-0 w-full h-full border-0" style={{ width: '166.67%', height: '166.67%', transform: 'scale(0.6)', transformOrigin: 'top left' }} title="Website Preview" sandbox="allow-same-origin allow-scripts" />
           </div>
         </div>
       </div>
     </div>
   )
 }
-
-// ─── Section Editors ─────────────────────────────────────────────────────────
-
-interface EditorProps {
-  content: WebsiteContent
-  setContent: React.Dispatch<React.SetStateAction<WebsiteContent | null>>
-}
-
-const inputCls = 'w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition-colors'
-const labelCls = 'block text-xs font-medium text-slate-600 mb-1'
-
-// ─── Hero Editor ─────────────────────────────────────────────────────────────
-
-function HeroEditor({ content, setContent }: EditorProps) {
-  function update(field: keyof HeroContent, value: string) {
-    setContent(c => c ? { ...c, hero: { ...c.hero, [field]: value } } : c)
-  }
-  return (
-    <div className="grid gap-3">
-      <div>
-        <label className={labelCls}>Badge</label>
-        <input className={inputCls} value={content.hero.badge} onChange={e => update('badge', e.target.value)} />
-      </div>
-      <div>
-        <label className={labelCls}>Titel</label>
-        <input className={inputCls} value={content.hero.title} onChange={e => update('title', e.target.value)} />
-      </div>
-      <div className="grid grid-cols-2 gap-3">
-        <div>
-          <label className={labelCls}>Highlight 1</label>
-          <input className={inputCls} value={content.hero.titleHighlight1} onChange={e => update('titleHighlight1', e.target.value)} />
-        </div>
-        <div>
-          <label className={labelCls}>Highlight 2</label>
-          <input className={inputCls} value={content.hero.titleHighlight2} onChange={e => update('titleHighlight2', e.target.value)} />
-        </div>
-      </div>
-      <div>
-        <label className={labelCls}>Untertitel</label>
-        <textarea className={inputCls} rows={2} value={content.hero.subtitle} onChange={e => update('subtitle', e.target.value)} />
-      </div>
-      <div className="grid grid-cols-3 gap-3">
-        <div>
-          <label className={labelCls}>CTA Primaer</label>
-          <input className={inputCls} value={content.hero.ctaPrimary} onChange={e => update('ctaPrimary', e.target.value)} />
-        </div>
-        <div>
-          <label className={labelCls}>CTA Sekundaer</label>
-          <input className={inputCls} value={content.hero.ctaSecondary} onChange={e => update('ctaSecondary', e.target.value)} />
-        </div>
-        <div>
-          <label className={labelCls}>CTA Hinweis</label>
-          <input className={inputCls} value={content.hero.ctaHint} onChange={e => update('ctaHint', e.target.value)} />
-        </div>
-      </div>
-    </div>
-  )
-}
-
-// ─── Features Editor ─────────────────────────────────────────────────────────
-
-function FeaturesEditor({ content, setContent }: EditorProps) {
-  function update(index: number, field: keyof FeatureContent, value: string) {
-    setContent(c => {
-      if (!c) return c
-      const features = [...c.features]
-      features[index] = { ...features[index], [field]: value }
-      return { ...c, features }
-    })
-  }
-  return (
-    <div className="space-y-3">
-      {content.features.map((feature, i) => (
-        <div key={feature.id} className="bg-slate-50 rounded-lg p-3 space-y-2">
-          <div className="grid grid-cols-6 gap-2">
-            <div>
-              <label className={labelCls}>Icon</label>
-              <input className={`${inputCls} text-center text-lg`} value={feature.icon} onChange={e => update(i, 'icon', e.target.value)} />
-            </div>
-            <div className="col-span-5">
-              <label className={labelCls}>Titel</label>
-              <input className={inputCls} value={feature.title} onChange={e => update(i, 'title', e.target.value)} />
-            </div>
-          </div>
-          <div>
-            <label className={labelCls}>Beschreibung</label>
-            <textarea className={inputCls} rows={2} value={feature.description} onChange={e => update(i, 'description', e.target.value)} />
-          </div>
-        </div>
-      ))}
-    </div>
-  )
-}
-
-// ─── FAQ Editor ──────────────────────────────────────────────────────────────
-
-function FAQEditor({ content, setContent }: EditorProps) {
-  function updateItem(index: number, field: 'question' | 'answer', value: string) {
-    setContent(c => {
-      if (!c) return c
-      const faq = [...c.faq]
-      if (field === 'answer') {
-        faq[index] = { ...faq[index], answer: value.split('\n') }
-      } else {
-        faq[index] = { ...faq[index], question: value }
-      }
-      return { ...c, faq }
-    })
-  }
-  function addItem() {
-    setContent(c => c ? { ...c, faq: [...c.faq, { question: 'Neue Frage?', answer: ['Antwort hier...'] }] } : c)
-  }
-  function removeItem(index: number) {
-    setContent(c => c ? { ...c, faq: c.faq.filter((_, i) => i !== index) } : c)
-  }
-  return (
-    <div className="space-y-3">
-      {content.faq.map((item, i) => (
-        <div key={i} className="bg-slate-50 rounded-lg p-3 space-y-2 relative group">
-          <button
-            onClick={() => removeItem(i)}
-            className="absolute top-2 right-2 p-1 text-red-400 hover:text-red-600 opacity-0 group-hover:opacity-100 transition-opacity"
-            title="Entfernen"
-          >
-            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-            </svg>
-          </button>
-          <div>
-            <label className={labelCls}>Frage {i + 1}</label>
-            <input className={inputCls} value={item.question} onChange={e => updateItem(i, 'question', e.target.value)} />
-          </div>
-          <div>
-            <label className={labelCls}>Antwort</label>
-            <textarea className={`${inputCls} font-mono`} rows={3} value={item.answer.join('\n')} onChange={e => updateItem(i, 'answer', e.target.value)} />
-          </div>
-        </div>
-      ))}
-      <button onClick={addItem} className="w-full py-2 border-2 border-dashed border-slate-300 rounded-lg text-sm text-slate-500 hover:border-sky-400 hover:text-sky-600 transition-colors">
-        + Frage hinzufuegen
-      </button>
-    </div>
-  )
-}
-
-// ─── Pricing Editor ──────────────────────────────────────────────────────────
-
-function PricingEditor({ content, setContent }: EditorProps) {
-  function update(index: number, field: string, value: string | number | boolean) {
-    setContent(c => {
-      if (!c) return c
-      const pricing = [...c.pricing]
-      if (field === 'price') {
-        pricing[index] = { ...pricing[index], price: Number(value) }
-      } else if (field === 'popular') {
-        pricing[index] = { ...pricing[index], popular: Boolean(value) }
-      } else if (field.startsWith('features.')) {
-        const sub = field.replace('features.', '')
-        if (sub === 'included' && typeof value === 'string') {
-          pricing[index] = { ...pricing[index], features: { ...pricing[index].features, included: value.split('\n') } }
-        } else {
-          pricing[index] = { ...pricing[index], features: { ...pricing[index].features, [sub]: value } }
-        }
-      } else {
-        pricing[index] = { ...pricing[index], [field]: value }
-      }
-      return { ...c, pricing }
-    })
-  }
-  return (
-    <div className="space-y-4">
-      {content.pricing.map((plan, i) => (
-        <div key={plan.id} className="bg-slate-50 rounded-lg p-3 space-y-2">
-          <div className="flex items-center gap-2 mb-1">
-            <span className="text-sm font-semibold text-slate-800">{plan.name}</span>
-            {plan.popular && <span className="text-xs bg-sky-100 text-sky-700 px-1.5 py-0.5 rounded">Beliebt</span>}
-          </div>
-          <div className="grid grid-cols-4 gap-2">
-            <div>
-              <label className={labelCls}>Name</label>
-              <input className={inputCls} value={plan.name} onChange={e => update(i, 'name', e.target.value)} />
-            </div>
-            <div>
-              <label className={labelCls}>Preis (EUR)</label>
-              <input className={inputCls} type="number" step="0.01" value={plan.price} onChange={e => update(i, 'price', e.target.value)} />
-            </div>
-            <div>
-              <label className={labelCls}>Intervall</label>
-              <input className={inputCls} value={plan.interval} onChange={e => update(i, 'interval', e.target.value)} />
-            </div>
-            <div className="flex items-end pb-1">
-              <label className="flex items-center gap-2 cursor-pointer">
-                <input type="checkbox" checked={plan.popular || false} onChange={e => update(i, 'popular', e.target.checked)} className="w-4 h-4 text-sky-600 rounded" />
-                <span className="text-xs text-slate-600">Beliebt</span>
-              </label>
-            </div>
-          </div>
-          <div>
-            <label className={labelCls}>Beschreibung</label>
-            <input className={inputCls} value={plan.description} onChange={e => update(i, 'description', e.target.value)} />
-          </div>
-          <div className="grid grid-cols-2 gap-2">
-            <div>
-              <label className={labelCls}>Aufgaben</label>
-              <input className={inputCls} value={plan.features.tasks} onChange={e => update(i, 'features.tasks', e.target.value)} />
-            </div>
-            <div>
-              <label className={labelCls}>Aufgaben-Beschreibung</label>
-              <input className={inputCls} value={plan.features.taskDescription} onChange={e => update(i, 'features.taskDescription', e.target.value)} />
-            </div>
-          </div>
-          <div>
-            <label className={labelCls}>Features (eine pro Zeile)</label>
-            <textarea className={`${inputCls} font-mono`} rows={3} value={plan.features.included.join('\n')} onChange={e => update(i, 'features.included', e.target.value)} />
-          </div>
-        </div>
-      ))}
-    </div>
-  )
-}
-
-// ─── Trust Editor ────────────────────────────────────────────────────────────
-
-function TrustEditor({ content, setContent }: EditorProps) {
-  function update(key: 'item1' | 'item2' | 'item3', field: 'value' | 'label', val: string) {
-    setContent(c => c ? { ...c, trust: { ...c.trust, [key]: { ...c.trust[key], [field]: val } } } : c)
-  }
-  return (
-    <div className="grid grid-cols-3 gap-3">
-      {(['item1', 'item2', 'item3'] as const).map((key, i) => (
-        <div key={key} className="bg-slate-50 rounded-lg p-3 space-y-2">
-          <div>
-            <label className={labelCls}>Wert {i + 1}</label>
-            <input className={inputCls} value={content.trust[key].value} onChange={e => update(key, 'value', e.target.value)} />
-          </div>
-          <div>
-            <label className={labelCls}>Label {i + 1}</label>
-            <input className={inputCls} value={content.trust[key].label} onChange={e => update(key, 'label', e.target.value)} />
-          </div>
-        </div>
-      ))}
-    </div>
-  )
-}
-
-// ─── Testimonial Editor ──────────────────────────────────────────────────────
-
-function TestimonialEditor({ content, setContent }: EditorProps) {
-  function update(field: 'quote' | 'author' | 'role', value: string) {
-    setContent(c => c ? { ...c, testimonial: { ...c.testimonial, [field]: value } } : c)
-  }
-  return (
-    <div className="space-y-3">
-      <div>
-        <label className={labelCls}>Zitat</label>
-        <textarea className={inputCls} rows={3} value={content.testimonial.quote} onChange={e => update('quote', e.target.value)} />
-      </div>
-      <div className="grid grid-cols-2 gap-3">
-        <div>
-          <label className={labelCls}>Autor</label>
-          <input className={inputCls} value={content.testimonial.author} onChange={e => update('author', e.target.value)} />
-        </div>
-        <div>
-          <label className={labelCls}>Rolle</label>
-          <input className={inputCls} value={content.testimonial.role} onChange={e => update('role', e.target.value)} />
-        </div>
-      </div>
-    </div>
-  )
-}

admin-lehrer/app/(admin)/website/uebersetzungen/_components/ContentEditors.tsx

@@ -0,0 +1,367 @@
+'use client'
+
+import type { WebsiteContent, FeatureContent } from '@/lib/content-types'
+
+// =============================================================================
+// Features Editor
+// =============================================================================
+
+interface FeaturesEditorProps {
+  content: WebsiteContent
+  updateFeature: (index: number, field: keyof FeatureContent, value: string) => void
+}
+
+export function FeaturesEditor({ content, updateFeature }: FeaturesEditorProps) {
+  return (
+    <div className="space-y-6">
+      <h2 className="text-xl font-semibold text-slate-900">Features</h2>
+
+      {content.features.map((feature, index) => (
+        <div key={feature.id} className="border border-slate-200 rounded-lg p-4">
+          <div className="grid gap-4">
+            <div className="grid grid-cols-3 gap-4">
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-1">Icon</label>
+                <input
+                  type="text"
+                  value={feature.icon}
+                  onChange={(e) => updateFeature(index, 'icon', e.target.value)}
+                  className="w-full px-3 py-2 border border-slate-300 rounded-lg text-2xl text-center"
+                />
+              </div>
+              <div className="col-span-2">
+                <label className="block text-sm font-medium text-slate-700 mb-1">Titel</label>
+                <input
+                  type="text"
+                  value={feature.title}
+                  onChange={(e) => updateFeature(index, 'title', 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-blue-500"
+                />
+              </div>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">
+                Beschreibung
+              </label>
+              <textarea
+                value={feature.description}
+                onChange={(e) => updateFeature(index, 'description', e.target.value)}
+                rows={2}
+                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              />
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+// =============================================================================
+// FAQ Editor
+// =============================================================================
+
+interface FAQEditorProps {
+  content: WebsiteContent
+  updateFAQ: (index: number, field: 'question' | 'answer', value: string | string[]) => void
+  addFAQ: () => void
+  removeFAQ: (index: number) => void
+}
+
+export function FAQEditor({ content, updateFAQ, addFAQ, removeFAQ }: FAQEditorProps) {
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h2 className="text-xl font-semibold text-slate-900">FAQ</h2>
+        <button
+          onClick={addFAQ}
+          className="px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors"
+        >
+          + Frage hinzufuegen
+        </button>
+      </div>
+
+      {content.faq.map((item, index) => (
+        <div key={index} className="border border-slate-200 rounded-lg p-4">
+          <div className="flex items-start justify-between gap-4">
+            <div className="flex-1 space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-1">
+                  Frage {index + 1}
+                </label>
+                <input
+                  type="text"
+                  value={item.question}
+                  onChange={(e) => updateFAQ(index, 'question', 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-blue-500"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-1">
+                  Antwort
+                </label>
+                <textarea
+                  value={item.answer.join('\n')}
+                  onChange={(e) => updateFAQ(index, 'answer', e.target.value)}
+                  rows={4}
+                  className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-mono text-sm"
+                />
+              </div>
+            </div>
+            <button
+              onClick={() => removeFAQ(index)}
+              className="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+              title="Frage entfernen"
+            >
+              <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <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>
+  )
+}
+
+// =============================================================================
+// Pricing Editor
+// =============================================================================
+
+interface PricingEditorProps {
+  content: WebsiteContent
+  updatePricing: (index: number, field: string, value: string | number | boolean) => void
+}
+
+export function PricingEditor({ content, updatePricing }: PricingEditorProps) {
+  return (
+    <div className="space-y-6">
+      <h2 className="text-xl font-semibold text-slate-900">Preise</h2>
+
+      {content.pricing.map((plan, index) => (
+        <div key={plan.id} className="border border-slate-200 rounded-lg p-4">
+          <div className="grid gap-4">
+            <div className="grid grid-cols-4 gap-4">
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-1">Name</label>
+                <input
+                  type="text"
+                  value={plan.name}
+                  onChange={(e) => updatePricing(index, 'name', 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-blue-500"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-1">
+                  Preis (EUR)
+                </label>
+                <input
+                  type="number"
+                  step="0.01"
+                  value={plan.price}
+                  onChange={(e) => updatePricing(index, 'price', 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-blue-500"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-1">
+                  Intervall
+                </label>
+                <input
+                  type="text"
+                  value={plan.interval}
+                  onChange={(e) => updatePricing(index, 'interval', 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-blue-500"
+                />
+              </div>
+              <div className="flex items-end">
+                <label className="flex items-center gap-2">
+                  <input
+                    type="checkbox"
+                    checked={plan.popular || false}
+                    onChange={(e) => updatePricing(index, 'popular', e.target.checked)}
+                    className="w-4 h-4 text-blue-600 rounded"
+                  />
+                  <span className="text-sm text-slate-700">Beliebt</span>
+                </label>
+              </div>
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">
+                Beschreibung
+              </label>
+              <input
+                type="text"
+                value={plan.description}
+                onChange={(e) => updatePricing(index, 'description', 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-blue-500"
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-1">
+                  Aufgaben
+                </label>
+                <input
+                  type="text"
+                  value={plan.features.tasks}
+                  onChange={(e) => updatePricing(index, 'features.tasks', 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-blue-500"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-1">
+                  Aufgaben-Beschreibung
+                </label>
+                <input
+                  type="text"
+                  value={plan.features.taskDescription}
+                  onChange={(e) =>
+                    updatePricing(index, 'features.taskDescription', 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-blue-500"
+                />
+              </div>
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">
+                Features (eine pro Zeile)
+              </label>
+              <textarea
+                value={plan.features.included.join('\n')}
+                onChange={(e) => updatePricing(index, 'features.included', e.target.value)}
+                rows={4}
+                className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-mono text-sm"
+              />
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+// =============================================================================
+// Other Section Editor (Trust + Testimonial)
+// =============================================================================
+
+interface OtherEditorProps {
+  content: WebsiteContent
+  setContent: (content: WebsiteContent) => void
+}
+
+export function OtherEditor({ content, setContent }: OtherEditorProps) {
+  return (
+    <div className="space-y-8">
+      {/* Trust Indicators */}
+      <div>
+        <h2 className="text-xl font-semibold text-slate-900 mb-4">Trust Indicators</h2>
+        <div className="grid grid-cols-3 gap-4">
+          {(['item1', 'item2', 'item3'] as const).map((key, index) => (
+            <div key={key} className="border border-slate-200 rounded-lg p-4">
+              <div className="space-y-4">
+                <div>
+                  <label className="block text-sm font-medium text-slate-700 mb-1">
+                    Wert {index + 1}
+                  </label>
+                  <input
+                    type="text"
+                    value={content.trust[key].value}
+                    onChange={(e) =>
+                      setContent({
+                        ...content,
+                        trust: {
+                          ...content.trust,
+                          [key]: { ...content.trust[key], value: 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-blue-500"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-slate-700 mb-1">
+                    Label {index + 1}
+                  </label>
+                  <input
+                    type="text"
+                    value={content.trust[key].label}
+                    onChange={(e) =>
+                      setContent({
+                        ...content,
+                        trust: {
+                          ...content.trust,
+                          [key]: { ...content.trust[key], label: 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-blue-500"
+                  />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Testimonial */}
+      <div>
+        <h2 className="text-xl font-semibold text-slate-900 mb-4">Testimonial</h2>
+        <div className="border border-slate-200 rounded-lg p-4 space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Zitat</label>
+            <textarea
+              value={content.testimonial.quote}
+              onChange={(e) =>
+                setContent({
+                  ...content,
+                  testimonial: { ...content.testimonial, quote: e.target.value },
+                })
+              }
+              rows={3}
+              className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+            />
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">Autor</label>
+              <input
+                type="text"
+                value={content.testimonial.author}
+                onChange={(e) =>
+                  setContent({
+                    ...content,
+                    testimonial: { ...content.testimonial, author: 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-blue-500"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">Rolle</label>
+              <input
+                type="text"
+                value={content.testimonial.role}
+                onChange={(e) =>
+                  setContent({
+                    ...content,
+                    testimonial: { ...content.testimonial, role: 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-blue-500"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

admin-lehrer/app/(admin)/website/uebersetzungen/_components/HeroEditor.tsx

@@ -0,0 +1,109 @@
+'use client'
+
+import type { WebsiteContent, HeroContent } from '@/lib/content-types'
+
+interface HeroEditorProps {
+  content: WebsiteContent
+  updateHero: (field: keyof HeroContent, value: string) => void
+}
+
+export function HeroEditor({ content, updateHero }: HeroEditorProps) {
+  return (
+    <div className="space-y-6">
+      <h2 className="text-xl font-semibold text-slate-900">Hero Section</h2>
+
+      <div className="grid gap-4">
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-1">Badge</label>
+          <input
+            type="text"
+            value={content.hero.badge}
+            onChange={(e) => updateHero('badge', 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-blue-500"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-1">
+            Titel (vor Highlight)
+          </label>
+          <input
+            type="text"
+            value={content.hero.title}
+            onChange={(e) => updateHero('title', 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-blue-500"
+          />
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">
+              Highlight 1
+            </label>
+            <input
+              type="text"
+              value={content.hero.titleHighlight1}
+              onChange={(e) => updateHero('titleHighlight1', 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-blue-500"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">
+              Highlight 2
+            </label>
+            <input
+              type="text"
+              value={content.hero.titleHighlight2}
+              onChange={(e) => updateHero('titleHighlight2', 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-blue-500"
+            />
+          </div>
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-1">Untertitel</label>
+          <textarea
+            value={content.hero.subtitle}
+            onChange={(e) => updateHero('subtitle', e.target.value)}
+            rows={3}
+            className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+          />
+        </div>
+
+        <div className="grid grid-cols-3 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">
+              CTA Primaer
+            </label>
+            <input
+              type="text"
+              value={content.hero.ctaPrimary}
+              onChange={(e) => updateHero('ctaPrimary', 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-blue-500"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">
+              CTA Sekundaer
+            </label>
+            <input
+              type="text"
+              value={content.hero.ctaSecondary}
+              onChange={(e) => updateHero('ctaSecondary', 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-blue-500"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">CTA Hinweis</label>
+            <input
+              type="text"
+              value={content.hero.ctaHint}
+              onChange={(e) => updateHero('ctaHint', 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-blue-500"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

admin-lehrer/app/(admin)/website/uebersetzungen/_components/PreviewPanel.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import { RefObject } from 'react'
+
+interface PreviewPanelProps {
+  activeTab: string
+  iframeRef: RefObject<HTMLIFrameElement | null>
+}
+
+export function PreviewPanel({ activeTab, iframeRef }: PreviewPanelProps) {
+  return (
+    <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
+      {/* Preview Header */}
+      <div className="bg-slate-50 border-b border-slate-200 px-4 py-3 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <div className="flex gap-1.5">
+            <div className="w-3 h-3 rounded-full bg-red-400"></div>
+            <div className="w-3 h-3 rounded-full bg-yellow-400"></div>
+            <div className="w-3 h-3 rounded-full bg-green-400"></div>
+          </div>
+          <span className="text-xs text-slate-500 ml-2">breakpilot.app</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="text-xs font-medium text-slate-600 bg-slate-200 px-2 py-1 rounded">
+            {activeTab === 'hero' && 'Hero Section'}
+            {activeTab === 'features' && 'Features'}
+            {activeTab === 'faq' && 'FAQ'}
+            {activeTab === 'pricing' && 'Pricing'}
+            {activeTab === 'other' && 'Trust & Testimonial'}
+          </span>
+          <button
+            onClick={() => iframeRef.current?.contentWindow?.location.reload()}
+            className="p-1.5 text-slate-500 hover:text-slate-700 hover:bg-slate-200 rounded transition-colors"
+            title="Preview neu laden"
+          >
+            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+            </svg>
+          </button>
+        </div>
+      </div>
+      {/* Preview Frame */}
+      <div className="relative h-[calc(100vh-340px)] bg-slate-100">
+        <iframe
+          ref={iframeRef}
+          src={`https://macmini:3000/?preview=true&section=${activeTab}#${activeTab}`}
+          className="w-full h-full border-0 scale-75 origin-top-left"
+          style={{
+            width: '133.33%',
+            height: '133.33%',
+            transform: 'scale(0.75)',
+            transformOrigin: 'top left',
+          }}
+          title="Website Preview"
+          sandbox="allow-same-origin allow-scripts"
+        />
+        {/* Section Indicator */}
+        <div className="absolute bottom-4 left-4 right-4 bg-blue-600 text-white px-4 py-2 rounded-lg shadow-lg flex items-center gap-2 text-sm">
+          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <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>
+          <span>
+            Du bearbeitest: <strong>
+              {activeTab === 'hero' && 'Hero Section (Startbereich)'}
+              {activeTab === 'features' && 'Features (Funktionen)'}
+              {activeTab === 'faq' && 'FAQ (Haeufige Fragen)'}
+              {activeTab === 'pricing' && 'Pricing (Preise)'}
+              {activeTab === 'other' && 'Trust & Testimonial'}
+            </strong>
+          </span>
+        </div>
+      </div>
+    </div>
+  )
+}

admin-lehrer/app/(admin)/website/uebersetzungen/page.tsx

@@ -16,6 +16,9 @@
 
 import { useState, useEffect, useRef, useCallback } from 'react'
 import { WebsiteContent, HeroContent, FeatureContent } from '@/lib/content-types'
+import { HeroEditor } from './_components/HeroEditor'
+import { FeaturesEditor, FAQEditor, PricingEditor, OtherEditor } from './_components/ContentEditors'
+import { PreviewPanel } from './_components/PreviewPanel'
 
 // Admin Key (in production via login)
 const ADMIN_KEY = 'breakpilot-admin-2024'
@@ -54,15 +57,8 @@ export default function UebersetzungenPage() {
     }
   }, [])
 
-  // Scroll to section on tab change
-  useEffect(() => {
-    scrollToSection(activeTab)
-  }, [activeTab, scrollToSection])
-
-  // Load content
-  useEffect(() => {
-    loadContent()
-  }, [])
+  useEffect(() => { scrollToSection(activeTab) }, [activeTab, scrollToSection])
+  useEffect(() => { loadContent() }, [])
 
   async function loadContent() {
     try {
@@ -82,20 +78,14 @@ export default function UebersetzungenPage() {
 
   async function saveChanges() {
     if (!content) return
-
     setSaving(true)
     setMessage(null)
-
     try {
       const res = await fetch('/api/website/content', {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'x-admin-key': ADMIN_KEY,
-        },
+        headers: { 'Content-Type': 'application/json', 'x-admin-key': ADMIN_KEY },
         body: JSON.stringify(content),
       })
-
       if (res.ok) {
         setMessage({ type: 'success', text: 'Gespeichert!' })
       } else {
@@ -109,16 +99,11 @@ export default function UebersetzungenPage() {
     }
   }
 
-  // Hero Section update
   function updateHero(field: keyof HeroContent, value: string) {
     if (!content) return
-    setContent({
-      ...content,
-      hero: { ...content.hero, [field]: value },
-    })
+    setContent({ ...content, hero: { ...content.hero, [field]: value } })
   }
 
-  // Feature update
   function updateFeature(index: number, field: keyof FeatureContent, value: string) {
     if (!content) return
     const newFeatures = [...content.features]
@@ -126,7 +111,6 @@ export default function UebersetzungenPage() {
     setContent({ ...content, features: newFeatures })
   }
 
-  // FAQ update
   function updateFAQ(index: number, field: 'question' | 'answer', value: string | string[]) {
     if (!content) return
     const newFAQ = [...content.faq]
@@ -138,23 +122,16 @@ export default function UebersetzungenPage() {
     setContent({ ...content, faq: newFAQ })
   }
 
-  // Add FAQ
   function addFAQ() {
     if (!content) return
-    setContent({
-      ...content,
-      faq: [...content.faq, { question: 'Neue Frage?', answer: ['Antwort hier...'] }],
-    })
+    setContent({ ...content, faq: [...content.faq, { question: 'Neue Frage?', answer: ['Antwort hier...'] }] })
   }
 
-  // Remove FAQ
   function removeFAQ(index: number) {
     if (!content) return
-    const newFAQ = content.faq.filter((_, i) => i !== index)
-    setContent({ ...content, faq: newFAQ })
+    setContent({ ...content, faq: content.faq.filter((_, i) => i !== index) })
   }
 
-  // Pricing update
   function updatePricing(index: number, field: string, value: string | number | boolean) {
     if (!content) return
     const newPricing = [...content.pricing]
@@ -165,21 +142,9 @@ export default function UebersetzungenPage() {
     } else if (field.startsWith('features.')) {
       const subField = field.replace('features.', '')
       if (subField === 'included' && typeof value === 'string') {
-        newPricing[index] = {
-          ...newPricing[index],
-          features: {
-            ...newPricing[index].features,
-            included: value.split('\n'),
-          },
-        }
+        newPricing[index] = { ...newPricing[index], features: { ...newPricing[index].features, included: value.split('\n') } }
       } else {
-        newPricing[index] = {
-          ...newPricing[index],
-          features: {
-            ...newPricing[index].features,
-            [subField]: value,
-          },
-        }
+        newPricing[index] = { ...newPricing[index], features: { ...newPricing[index].features, [subField]: value } }
       }
     } else {
       newPricing[index] = { ...newPricing[index], [field]: value }
@@ -209,13 +174,10 @@ export default function UebersetzungenPage() {
       <div className="bg-white rounded-xl border border-slate-200 p-4 mb-6 flex items-center justify-between">
         <div className="flex items-center gap-4">
           <h1 className="text-lg font-semibold text-slate-900">Uebersetzungen</h1>
-          {/* Preview Toggle */}
           <button
             onClick={() => setShowPreview(!showPreview)}
             className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
-              showPreview
-                ? 'bg-blue-100 text-blue-700'
-                : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
+              showPreview ? 'bg-blue-100 text-blue-700' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
             }`}
             title={showPreview ? 'Preview ausblenden' : 'Preview einblenden'}
           >
@@ -228,13 +190,9 @@ export default function UebersetzungenPage() {
         </div>
         <div className="flex items-center gap-4">
           {message && (
-            <span
-              className={`px-3 py-1 rounded text-sm ${
-                message.type === 'success'
-                  ? 'bg-green-100 text-green-800'
-                  : 'bg-red-100 text-red-800'
-              }`}
-            >
+            <span className={`px-3 py-1 rounded text-sm ${
+              message.type === 'success' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
+            }`}>
               {message.text}
             </span>
           )}
@@ -256,9 +214,7 @@ export default function UebersetzungenPage() {
               key={tab}
               onClick={() => setActiveTab(tab)}
               className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${
-                activeTab === tab
-                  ? 'bg-white text-slate-900 shadow-sm'
-                  : 'text-slate-600 hover:text-slate-900'
+                activeTab === tab ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-600 hover:text-slate-900'
               }`}
             >
               {tab === 'hero' && 'Hero'}
@@ -275,494 +231,15 @@ export default function UebersetzungenPage() {
       <div className={`grid gap-6 ${showPreview ? 'grid-cols-2' : 'grid-cols-1'}`}>
         {/* Editor Panel */}
         <div className="bg-white rounded-xl border border-slate-200 shadow-sm p-6 max-h-[calc(100vh-280px)] overflow-y-auto">
-          {/* Hero Tab */}
-          {activeTab === 'hero' && (
-            <div className="space-y-6">
-              <h2 className="text-xl font-semibold text-slate-900">Hero Section</h2>
-
-              <div className="grid gap-4">
-                <div>
-                  <label className="block text-sm font-medium text-slate-700 mb-1">Badge</label>
-                  <input
-                    type="text"
-                    value={content.hero.badge}
-                    onChange={(e) => updateHero('badge', 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-blue-500"
-                  />
-                </div>
-
-                <div>
-                  <label className="block text-sm font-medium text-slate-700 mb-1">
-                    Titel (vor Highlight)
-                  </label>
-                  <input
-                    type="text"
-                    value={content.hero.title}
-                    onChange={(e) => updateHero('title', 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-blue-500"
-                  />
-                </div>
-
-                <div className="grid grid-cols-2 gap-4">
-                  <div>
-                    <label className="block text-sm font-medium text-slate-700 mb-1">
-                      Highlight 1
-                    </label>
-                    <input
-                      type="text"
-                      value={content.hero.titleHighlight1}
-                      onChange={(e) => updateHero('titleHighlight1', 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-blue-500"
-                    />
-                  </div>
-                  <div>
-                    <label className="block text-sm font-medium text-slate-700 mb-1">
-                      Highlight 2
-                    </label>
-                    <input
-                      type="text"
-                      value={content.hero.titleHighlight2}
-                      onChange={(e) => updateHero('titleHighlight2', 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-blue-500"
-                    />
-                  </div>
-                </div>
-
-                <div>
-                  <label className="block text-sm font-medium text-slate-700 mb-1">Untertitel</label>
-                  <textarea
-                    value={content.hero.subtitle}
-                    onChange={(e) => updateHero('subtitle', e.target.value)}
-                    rows={3}
-                    className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                  />
-                </div>
-
-                <div className="grid grid-cols-3 gap-4">
-                  <div>
-                    <label className="block text-sm font-medium text-slate-700 mb-1">
-                      CTA Primaer
-                    </label>
-                    <input
-                      type="text"
-                      value={content.hero.ctaPrimary}
-                      onChange={(e) => updateHero('ctaPrimary', 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-blue-500"
-                    />
-                  </div>
-                  <div>
-                    <label className="block text-sm font-medium text-slate-700 mb-1">
-                      CTA Sekundaer
-                    </label>
-                    <input
-                      type="text"
-                      value={content.hero.ctaSecondary}
-                      onChange={(e) => updateHero('ctaSecondary', 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-blue-500"
-                    />
-                  </div>
-                  <div>
-                    <label className="block text-sm font-medium text-slate-700 mb-1">CTA Hinweis</label>
-                    <input
-                      type="text"
-                      value={content.hero.ctaHint}
-                      onChange={(e) => updateHero('ctaHint', 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-blue-500"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {/* Features Tab */}
-          {activeTab === 'features' && (
-            <div className="space-y-6">
-              <h2 className="text-xl font-semibold text-slate-900">Features</h2>
-
-              {content.features.map((feature, index) => (
-                <div key={feature.id} className="border border-slate-200 rounded-lg p-4">
-                  <div className="grid gap-4">
-                    <div className="grid grid-cols-3 gap-4">
-                      <div>
-                        <label className="block text-sm font-medium text-slate-700 mb-1">Icon</label>
-                        <input
-                          type="text"
-                          value={feature.icon}
-                          onChange={(e) => updateFeature(index, 'icon', e.target.value)}
-                          className="w-full px-3 py-2 border border-slate-300 rounded-lg text-2xl text-center"
-                        />
-                      </div>
-                      <div className="col-span-2">
-                        <label className="block text-sm font-medium text-slate-700 mb-1">Titel</label>
-                        <input
-                          type="text"
-                          value={feature.title}
-                          onChange={(e) => updateFeature(index, 'title', 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-blue-500"
-                        />
-                      </div>
-                    </div>
-                    <div>
-                      <label className="block text-sm font-medium text-slate-700 mb-1">
-                        Beschreibung
-                      </label>
-                      <textarea
-                        value={feature.description}
-                        onChange={(e) => updateFeature(index, 'description', e.target.value)}
-                        rows={2}
-                        className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                      />
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-
-          {/* FAQ Tab */}
-          {activeTab === 'faq' && (
-            <div className="space-y-6">
-              <div className="flex items-center justify-between">
-                <h2 className="text-xl font-semibold text-slate-900">FAQ</h2>
-                <button
-                  onClick={addFAQ}
-                  className="px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors"
-                >
-                  + Frage hinzufuegen
-                </button>
-              </div>
-
-              {content.faq.map((item, index) => (
-                <div key={index} className="border border-slate-200 rounded-lg p-4">
-                  <div className="flex items-start justify-between gap-4">
-                    <div className="flex-1 space-y-4">
-                      <div>
-                        <label className="block text-sm font-medium text-slate-700 mb-1">
-                          Frage {index + 1}
-                        </label>
-                        <input
-                          type="text"
-                          value={item.question}
-                          onChange={(e) => updateFAQ(index, 'question', 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-blue-500"
-                        />
-                      </div>
-                      <div>
-                        <label className="block text-sm font-medium text-slate-700 mb-1">
-                          Antwort
-                        </label>
-                        <textarea
-                          value={item.answer.join('\n')}
-                          onChange={(e) => updateFAQ(index, 'answer', e.target.value)}
-                          rows={4}
-                          className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-mono text-sm"
-                        />
-                      </div>
-                    </div>
-                    <button
-                      onClick={() => removeFAQ(index)}
-                      className="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
-                      title="Frage entfernen"
-                    >
-                      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <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>
-          )}
-
-          {/* Pricing Tab */}
-          {activeTab === 'pricing' && (
-            <div className="space-y-6">
-              <h2 className="text-xl font-semibold text-slate-900">Preise</h2>
-
-              {content.pricing.map((plan, index) => (
-                <div key={plan.id} className="border border-slate-200 rounded-lg p-4">
-                  <div className="grid gap-4">
-                    <div className="grid grid-cols-4 gap-4">
-                      <div>
-                        <label className="block text-sm font-medium text-slate-700 mb-1">Name</label>
-                        <input
-                          type="text"
-                          value={plan.name}
-                          onChange={(e) => updatePricing(index, 'name', 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-blue-500"
-                        />
-                      </div>
-                      <div>
-                        <label className="block text-sm font-medium text-slate-700 mb-1">
-                          Preis (EUR)
-                        </label>
-                        <input
-                          type="number"
-                          step="0.01"
-                          value={plan.price}
-                          onChange={(e) => updatePricing(index, 'price', 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-blue-500"
-                        />
-                      </div>
-                      <div>
-                        <label className="block text-sm font-medium text-slate-700 mb-1">
-                          Intervall
-                        </label>
-                        <input
-                          type="text"
-                          value={plan.interval}
-                          onChange={(e) => updatePricing(index, 'interval', 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-blue-500"
-                        />
-                      </div>
-                      <div className="flex items-end">
-                        <label className="flex items-center gap-2">
-                          <input
-                            type="checkbox"
-                            checked={plan.popular || false}
-                            onChange={(e) => updatePricing(index, 'popular', e.target.checked)}
-                            className="w-4 h-4 text-blue-600 rounded"
-                          />
-                          <span className="text-sm text-slate-700">Beliebt</span>
-                        </label>
-                      </div>
-                    </div>
-
-                    <div>
-                      <label className="block text-sm font-medium text-slate-700 mb-1">
-                        Beschreibung
-                      </label>
-                      <input
-                        type="text"
-                        value={plan.description}
-                        onChange={(e) => updatePricing(index, 'description', 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-blue-500"
-                      />
-                    </div>
-
-                    <div className="grid grid-cols-2 gap-4">
-                      <div>
-                        <label className="block text-sm font-medium text-slate-700 mb-1">
-                          Aufgaben
-                        </label>
-                        <input
-                          type="text"
-                          value={plan.features.tasks}
-                          onChange={(e) => updatePricing(index, 'features.tasks', 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-blue-500"
-                        />
-                      </div>
-                      <div>
-                        <label className="block text-sm font-medium text-slate-700 mb-1">
-                          Aufgaben-Beschreibung
-                        </label>
-                        <input
-                          type="text"
-                          value={plan.features.taskDescription}
-                          onChange={(e) =>
-                            updatePricing(index, 'features.taskDescription', 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-blue-500"
-                        />
-                      </div>
-                    </div>
-
-                    <div>
-                      <label className="block text-sm font-medium text-slate-700 mb-1">
-                        Features (eine pro Zeile)
-                      </label>
-                      <textarea
-                        value={plan.features.included.join('\n')}
-                        onChange={(e) => updatePricing(index, 'features.included', e.target.value)}
-                        rows={4}
-                        className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-mono text-sm"
-                      />
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-
-          {/* Other Tab */}
-          {activeTab === 'other' && (
-            <div className="space-y-8">
-              {/* Trust Indicators */}
-              <div>
-                <h2 className="text-xl font-semibold text-slate-900 mb-4">Trust Indicators</h2>
-                <div className="grid grid-cols-3 gap-4">
-                  {(['item1', 'item2', 'item3'] as const).map((key, index) => (
-                    <div key={key} className="border border-slate-200 rounded-lg p-4">
-                      <div className="space-y-4">
-                        <div>
-                          <label className="block text-sm font-medium text-slate-700 mb-1">
-                            Wert {index + 1}
-                          </label>
-                          <input
-                            type="text"
-                            value={content.trust[key].value}
-                            onChange={(e) =>
-                              setContent({
-                                ...content,
-                                trust: {
-                                  ...content.trust,
-                                  [key]: { ...content.trust[key], value: 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-blue-500"
-                          />
-                        </div>
-                        <div>
-                          <label className="block text-sm font-medium text-slate-700 mb-1">
-                            Label {index + 1}
-                          </label>
-                          <input
-                            type="text"
-                            value={content.trust[key].label}
-                            onChange={(e) =>
-                              setContent({
-                                ...content,
-                                trust: {
-                                  ...content.trust,
-                                  [key]: { ...content.trust[key], label: 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-blue-500"
-                          />
-                        </div>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              </div>
-
-              {/* Testimonial */}
-              <div>
-                <h2 className="text-xl font-semibold text-slate-900 mb-4">Testimonial</h2>
-                <div className="border border-slate-200 rounded-lg p-4 space-y-4">
-                  <div>
-                    <label className="block text-sm font-medium text-slate-700 mb-1">Zitat</label>
-                    <textarea
-                      value={content.testimonial.quote}
-                      onChange={(e) =>
-                        setContent({
-                          ...content,
-                          testimonial: { ...content.testimonial, quote: e.target.value },
-                        })
-                      }
-                      rows={3}
-                      className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                    />
-                  </div>
-                  <div className="grid grid-cols-2 gap-4">
-                    <div>
-                      <label className="block text-sm font-medium text-slate-700 mb-1">Autor</label>
-                      <input
-                        type="text"
-                        value={content.testimonial.author}
-                        onChange={(e) =>
-                          setContent({
-                            ...content,
-                            testimonial: { ...content.testimonial, author: 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-blue-500"
-                      />
-                    </div>
-                    <div>
-                      <label className="block text-sm font-medium text-slate-700 mb-1">Rolle</label>
-                      <input
-                        type="text"
-                        value={content.testimonial.role}
-                        onChange={(e) =>
-                          setContent({
-                            ...content,
-                            testimonial: { ...content.testimonial, role: 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-blue-500"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
+          {activeTab === 'hero' && <HeroEditor content={content} updateHero={updateHero} />}
+          {activeTab === 'features' && <FeaturesEditor content={content} updateFeature={updateFeature} />}
+          {activeTab === 'faq' && <FAQEditor content={content} updateFAQ={updateFAQ} addFAQ={addFAQ} removeFAQ={removeFAQ} />}
+          {activeTab === 'pricing' && <PricingEditor content={content} updatePricing={updatePricing} />}
+          {activeTab === 'other' && <OtherEditor content={content} setContent={setContent} />}
         </div>
 
         {/* Live Preview Panel */}
-        {showPreview && (
-          <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
-            {/* Preview Header */}
-            <div className="bg-slate-50 border-b border-slate-200 px-4 py-3 flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                <div className="flex gap-1.5">
-                  <div className="w-3 h-3 rounded-full bg-red-400"></div>
-                  <div className="w-3 h-3 rounded-full bg-yellow-400"></div>
-                  <div className="w-3 h-3 rounded-full bg-green-400"></div>
-                </div>
-                <span className="text-xs text-slate-500 ml-2">breakpilot.app</span>
-              </div>
-              <div className="flex items-center gap-2">
-                <span className="text-xs font-medium text-slate-600 bg-slate-200 px-2 py-1 rounded">
-                  {activeTab === 'hero' && 'Hero Section'}
-                  {activeTab === 'features' && 'Features'}
-                  {activeTab === 'faq' && 'FAQ'}
-                  {activeTab === 'pricing' && 'Pricing'}
-                  {activeTab === 'other' && 'Trust & Testimonial'}
-                </span>
-                <button
-                  onClick={() => iframeRef.current?.contentWindow?.location.reload()}
-                  className="p-1.5 text-slate-500 hover:text-slate-700 hover:bg-slate-200 rounded transition-colors"
-                  title="Preview neu laden"
-                >
-                  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-                  </svg>
-                </button>
-              </div>
-            </div>
-            {/* Preview Frame */}
-            <div className="relative h-[calc(100vh-340px)] bg-slate-100">
-              <iframe
-                ref={iframeRef}
-                src={`https://macmini:3000/?preview=true&section=${activeTab}#${activeTab}`}
-                className="w-full h-full border-0 scale-75 origin-top-left"
-                style={{
-                  width: '133.33%',
-                  height: '133.33%',
-                  transform: 'scale(0.75)',
-                  transformOrigin: 'top left',
-                }}
-                title="Website Preview"
-                sandbox="allow-same-origin allow-scripts"
-              />
-              {/* Section Indicator */}
-              <div className="absolute bottom-4 left-4 right-4 bg-blue-600 text-white px-4 py-2 rounded-lg shadow-lg flex items-center gap-2 text-sm">
-                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <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>
-                <span>
-                  Du bearbeitest: <strong>
-                    {activeTab === 'hero' && 'Hero Section (Startbereich)'}
-                    {activeTab === 'features' && 'Features (Funktionen)'}
-                    {activeTab === 'faq' && 'FAQ (Haeufige Fragen)'}
-                    {activeTab === 'pricing' && 'Pricing (Preise)'}
-                    {activeTab === 'other' && 'Trust & Testimonial'}
-                  </strong>
-                </span>
-              </div>
-            </div>
-          </div>
-        )}
+        {showPreview && <PreviewPanel activeTab={activeTab} iframeRef={iframeRef} />}
       </div>
     </div>
   )