refactor: Admin-Layout komplett entfernt — SDK als einziges Layout

Kaputtes (admin) Layout geloescht (Role-Selection, 404-Sidebar, localhost-Dashboard).
SDK-Flow nach /sdk/sdk-flow verschoben. Route-Gruppe (sdk) aufgeloest.
Root-Seite redirected auf /sdk. ~25 ungenutzte Dateien/Verzeichnisse entfernt.

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

admin-compliance/app/sdk/document-generator/page.tsx

@@ -0,0 +1,591 @@
+'use client'
+
+import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react'
+import { useSDK } from '@/lib/sdk'
+import { useEinwilligungen, EinwilligungenProvider } from '@/lib/sdk/einwilligungen/context'
+import { StepHeader, STEP_EXPLANATIONS } from '@/components/sdk/StepHeader'
+import {
+  LegalTemplateResult,
+  TemplateType,
+  LicenseType,
+  TEMPLATE_TYPE_LABELS,
+  LICENSE_TYPE_LABELS,
+} from '@/lib/sdk/types'
+import { DataPointsPreview } from './components/DataPointsPreview'
+import { DocumentValidation } from './components/DocumentValidation'
+import { generateAllPlaceholders } from '@/lib/sdk/document-generator/datapoint-helpers'
+import { loadAllTemplates, searchTemplates } from './searchTemplates'
+
+// =============================================================================
+// CATEGORY CONFIG
+// =============================================================================
+
+const CATEGORIES: { key: string; label: string; types: string[] | null }[] = [
+  { key: 'all', label: 'Alle', types: null },
+  { key: 'privacy_policy', label: 'Datenschutz', types: ['privacy_policy'] },
+  { key: 'terms', label: 'AGB', types: ['terms_of_service', 'agb', 'clause'] },
+  { key: 'impressum', label: 'Impressum', types: ['impressum'] },
+  { key: 'dpa', label: 'AVV/DPA', types: ['dpa'] },
+  { key: 'nda', label: 'NDA', types: ['nda'] },
+  { key: 'sla', label: 'SLA', types: ['sla'] },
+  { key: 'acceptable_use', label: 'AUP', types: ['acceptable_use'] },
+  { key: 'widerruf', label: 'Widerruf', types: ['widerruf'] },
+  { key: 'cookie', label: 'Cookie', types: ['cookie_policy', 'cookie_banner'] },
+  { key: 'cloud', label: 'Cloud', types: ['cloud_service_agreement'] },
+  { key: 'misc', label: 'Weitere', types: ['community_guidelines', 'copyright_policy', 'data_usage_clause'] },
+]
+
+// =============================================================================
+// SMALL COMPONENTS
+// =============================================================================
+
+function LicenseBadge({ licenseId, small = false }: { licenseId: LicenseType | null; small?: boolean }) {
+  if (!licenseId) return null
+  const colors: Partial<Record<LicenseType, string>> = {
+    public_domain: 'bg-green-100 text-green-700 border-green-200',
+    cc0: 'bg-green-100 text-green-700 border-green-200',
+    unlicense: 'bg-green-100 text-green-700 border-green-200',
+    mit: 'bg-blue-100 text-blue-700 border-blue-200',
+    cc_by_4: 'bg-purple-100 text-purple-700 border-purple-200',
+    reuse_notice: 'bg-orange-100 text-orange-700 border-orange-200',
+  }
+  return (
+    <span className={`${small ? 'px-1.5 py-0.5 text-[10px]' : 'px-2 py-1 text-xs'} rounded border ${colors[licenseId] || 'bg-gray-100 text-gray-600 border-gray-200'}`}>
+      {LICENSE_TYPE_LABELS[licenseId] || licenseId}
+    </span>
+  )
+}
+
+// =============================================================================
+// LIBRARY CARD
+// =============================================================================
+
+function LibraryCard({
+  template,
+  expanded,
+  onTogglePreview,
+  onUse,
+}: {
+  template: LegalTemplateResult
+  expanded: boolean
+  onTogglePreview: () => void
+  onUse: () => void
+}) {
+  const typeLabel = template.templateType
+    ? (TEMPLATE_TYPE_LABELS[template.templateType as TemplateType] || template.templateType)
+    : null
+  const placeholderCount = template.placeholders?.length ?? 0
+
+  return (
+    <div className="bg-white rounded-xl border border-gray-200 overflow-hidden hover:border-purple-300 transition-colors">
+      {/* Card header */}
+      <div className="p-4">
+        <div className="flex items-start justify-between gap-2 mb-2">
+          <h3 className="font-medium text-gray-900 text-sm leading-snug">
+            {template.documentTitle || 'Vorlage'}
+          </h3>
+          <span className="text-xs text-gray-400 uppercase shrink-0">{template.language}</span>
+        </div>
+        <div className="flex items-center gap-2 flex-wrap mb-3">
+          {typeLabel && (
+            <span className="text-xs text-purple-600 bg-purple-50 px-2 py-0.5 rounded">
+              {typeLabel}
+            </span>
+          )}
+          <LicenseBadge licenseId={template.licenseId as LicenseType} small />
+          {placeholderCount > 0 && (
+            <span className="text-xs text-gray-500">
+              {placeholderCount} Platzh.
+            </span>
+          )}
+        </div>
+        <div className="flex gap-2">
+          <button
+            onClick={onTogglePreview}
+            className="flex-1 text-xs px-3 py-1.5 border border-gray-200 rounded-lg hover:bg-gray-50 text-gray-600 transition-colors"
+          >
+            {expanded ? 'Vorschau ▲' : 'Vorschau ▼'}
+          </button>
+          <button
+            onClick={onUse}
+            className="flex-1 text-xs px-3 py-1.5 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
+          >
+            Verwenden
+          </button>
+        </div>
+      </div>
+
+      {/* Inline preview */}
+      {expanded && (
+        <div className="border-t border-gray-100 bg-gray-50 p-4 max-h-64 overflow-y-auto">
+          <pre className="text-xs text-gray-600 whitespace-pre-wrap font-mono leading-relaxed">
+            {template.text.slice(0, 1500)}{template.text.length > 1500 ? '\n…' : ''}
+          </pre>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// =============================================================================
+// GENERATOR SECTION
+// =============================================================================
+
+function GeneratorSection({
+  template,
+  placeholderValues,
+  onPlaceholderChange,
+  onClose,
+}: {
+  template: LegalTemplateResult
+  placeholderValues: Record<string, string>
+  onPlaceholderChange: (key: string, value: string) => void
+  onClose: () => void
+}) {
+  const [activeTab, setActiveTab] = useState<'placeholders' | 'preview'>('placeholders')
+
+  const renderedContent = useMemo(() => {
+    let content = template.text
+    for (const [key, value] of Object.entries(placeholderValues)) {
+      if (value) {
+        content = content.replace(new RegExp(key.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'), value)
+      }
+    }
+    return content
+  }, [template.text, placeholderValues])
+
+  const handleCopy = () => navigator.clipboard.writeText(renderedContent)
+
+  const handleExportMarkdown = () => {
+    const blob = new Blob([renderedContent], { type: 'text/markdown' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `${(template.documentTitle || 'dokument').replace(/\s+/g, '-').toLowerCase()}.md`
+    a.click()
+    URL.revokeObjectURL(url)
+  }
+
+  const handlePrint = () => window.print()
+
+  const placeholders = template.placeholders || []
+
+  return (
+    <div className="bg-white rounded-xl border-2 border-purple-300 overflow-hidden">
+      {/* Generator header */}
+      <div className="bg-purple-50 px-6 py-4 flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <svg className="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+          </svg>
+          <div>
+            <div className="text-xs text-purple-500 font-medium uppercase tracking-wide">Generator</div>
+            <div className="font-semibold text-gray-900 text-sm">{template.documentTitle}</div>
+          </div>
+        </div>
+        <button onClick={onClose} className="text-gray-400 hover:text-gray-600 transition-colors" aria-label="Schließen">
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+
+      {/* Tab bar */}
+      <div className="flex border-b border-gray-200 px-6">
+        {(['placeholders', 'preview'] as const).map((tab) => (
+          <button
+            key={tab}
+            onClick={() => setActiveTab(tab)}
+            className={`px-4 py-3 text-sm font-medium transition-colors border-b-2 -mb-px ${
+              activeTab === tab
+                ? 'text-purple-600 border-purple-600'
+                : 'text-gray-500 border-transparent hover:text-gray-700'
+            }`}
+          >
+            {tab === 'placeholders' ? 'Platzhalter ausfüllen' : 'Vorschau & Export'}
+          </button>
+        ))}
+      </div>
+
+      {/* Tab content */}
+      <div className="p-6">
+        {activeTab === 'placeholders' && (
+          <div className="space-y-4">
+            {placeholders.length === 0 ? (
+              <div className="text-sm text-gray-500 text-center py-4">
+                Keine Platzhalter — Vorlage kann direkt verwendet werden.
+              </div>
+            ) : (
+              <>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                  {placeholders.map((placeholder) => (
+                    <div key={placeholder}>
+                      <label className="block text-xs text-gray-600 mb-1 font-mono">{placeholder}</label>
+                      <input
+                        type="text"
+                        value={placeholderValues[placeholder] || ''}
+                        onChange={(e) => onPlaceholderChange(placeholder, e.target.value)}
+                        placeholder={`Wert für ${placeholder}`}
+                        className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-purple-400"
+                      />
+                    </div>
+                  ))}
+                </div>
+                <div className="flex justify-end pt-2">
+                  <button
+                    onClick={() => setActiveTab('preview')}
+                    className="px-5 py-2 bg-purple-600 text-white text-sm rounded-lg hover:bg-purple-700 transition-colors"
+                  >
+                    Zur Vorschau →
+                  </button>
+                </div>
+              </>
+            )}
+          </div>
+        )}
+
+        {activeTab === 'preview' && (
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <span className="text-sm text-gray-600">
+                {placeholders.length > 0 && Object.values(placeholderValues).filter(Boolean).length < placeholders.length && (
+                  <span className="text-orange-600">
+                    ⚠ {placeholders.length - Object.values(placeholderValues).filter(Boolean).length} Platzhalter noch nicht ausgefüllt
+                  </span>
+                )}
+              </span>
+              <div className="flex gap-2">
+                <button
+                  onClick={handleCopy}
+                  className="flex items-center gap-1.5 px-3 py-1.5 text-xs border border-gray-200 rounded-lg hover:bg-gray-50 text-gray-600 transition-colors"
+                >
+                  <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                  </svg>
+                  Kopieren
+                </button>
+                <button
+                  onClick={handleExportMarkdown}
+                  className="flex items-center gap-1.5 px-3 py-1.5 text-xs border border-gray-200 rounded-lg hover:bg-gray-50 text-gray-600 transition-colors"
+                >
+                  <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+                  </svg>
+                  Markdown
+                </button>
+                <button
+                  onClick={handlePrint}
+                  className="flex items-center gap-1.5 px-4 py-1.5 text-xs bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
+                >
+                  <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
+                  </svg>
+                  PDF drucken
+                </button>
+              </div>
+            </div>
+            <div className="bg-gray-50 rounded-xl border border-gray-200 p-6 max-h-[600px] overflow-y-auto">
+              <pre className="text-sm text-gray-800 whitespace-pre-wrap leading-relaxed font-sans">
+                {renderedContent}
+              </pre>
+            </div>
+            {template.attributionRequired && template.attributionText && (
+              <div className="text-xs text-orange-600 bg-orange-50 p-3 rounded-lg border border-orange-200">
+                <strong>Attribution erforderlich:</strong> {template.attributionText}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// =============================================================================
+// MAIN PAGE
+// =============================================================================
+
+function DocumentGeneratorPageInner() {
+  const { state } = useSDK()
+  const { selectedDataPointsData } = useEinwilligungen()
+
+  // Library state
+  const [allTemplates, setAllTemplates] = useState<LegalTemplateResult[]>([])
+  const [isLoadingLibrary, setIsLoadingLibrary] = useState(true)
+  const [activeCategory, setActiveCategory] = useState<string>('all')
+  const [activeLanguage, setActiveLanguage] = useState<'all' | 'de' | 'en'>('all')
+  const [librarySearch, setLibrarySearch] = useState('')
+  const [expandedPreviewId, setExpandedPreviewId] = useState<string | null>(null)
+
+  // Generator state
+  const [activeTemplate, setActiveTemplate] = useState<LegalTemplateResult | null>(null)
+  const [placeholderValues, setPlaceholderValues] = useState<Record<string, string>>({})
+  const generatorRef = useRef<HTMLDivElement>(null)
+
+  // Status
+  const [totalCount, setTotalCount] = useState<number>(0)
+
+  // Load all templates on mount
+  useEffect(() => {
+    setIsLoadingLibrary(true)
+    loadAllTemplates(200).then((templates) => {
+      setAllTemplates(templates)
+      setTotalCount(templates.length)
+      setIsLoadingLibrary(false)
+    })
+  }, [])
+
+  // Pre-fill placeholders from company profile
+  useEffect(() => {
+    if (state?.companyProfile) {
+      const profile = state.companyProfile
+      setPlaceholderValues((prev) => ({
+        ...prev,
+        '{{COMPANY_NAME}}': profile.companyName || '',
+        '{{FIRMENNAME}}': profile.companyName || '',
+        '{{CONTACT_EMAIL}}': profile.dpoEmail || '',
+        '{{DSB_EMAIL}}': profile.dpoEmail || '',
+        '{{DPO_NAME}}': profile.dpoName || '',
+        '{{DSB_NAME}}': profile.dpoName || '',
+      }))
+    }
+  }, [state?.companyProfile])
+
+  // Pre-fill from Einwilligungen data points
+  useEffect(() => {
+    if (selectedDataPointsData && selectedDataPointsData.length > 0) {
+      const generated = generateAllPlaceholders(selectedDataPointsData, 'de')
+      setPlaceholderValues((prev) => ({ ...prev, ...generated }))
+    }
+  }, [selectedDataPointsData])
+
+  // Filtered templates (computed)
+  const filteredTemplates = useMemo(() => {
+    const category = CATEGORIES.find((c) => c.key === activeCategory)
+    return allTemplates.filter((t) => {
+      if (category && category.types !== null) {
+        if (!category.types.includes(t.templateType || '')) return false
+      }
+      if (activeLanguage !== 'all' && t.language !== activeLanguage) return false
+      if (librarySearch.trim()) {
+        const q = librarySearch.toLowerCase()
+        const title = (t.documentTitle || '').toLowerCase()
+        const type = (t.templateType || '').toLowerCase()
+        if (!title.includes(q) && !type.includes(q)) return false
+      }
+      return true
+    })
+  }, [allTemplates, activeCategory, activeLanguage, librarySearch])
+
+  const handleUseTemplate = useCallback((t: LegalTemplateResult) => {
+    setActiveTemplate(t)
+    setExpandedPreviewId(null)
+    // Scroll to generator
+    setTimeout(() => {
+      generatorRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    }, 100)
+  }, [])
+
+  const handleInsertPlaceholder = useCallback((placeholder: string) => {
+    if (!placeholderValues[placeholder]) {
+      const generated = generateAllPlaceholders(selectedDataPointsData || [], 'de')
+      if (generated[placeholder as keyof typeof generated]) {
+        setPlaceholderValues((prev) => ({
+          ...prev,
+          [placeholder]: generated[placeholder as keyof typeof generated],
+        }))
+      }
+    }
+  }, [placeholderValues, selectedDataPointsData])
+
+  const stepInfo = STEP_EXPLANATIONS['document-generator'] || {
+    title: 'Dokumentengenerator',
+    description: 'Generieren Sie rechtliche Dokumente aus lizenzkonformen Vorlagen',
+    explanation: 'Der Dokumentengenerator nutzt frei lizenzierte Textbausteine um Datenschutzerklaerungen, AGB und andere rechtliche Dokumente zu erstellen.',
+    tips: ['Wählen Sie eine Vorlage aus der Bibliothek aus', 'Füllen Sie die Platzhalter mit Ihren Unternehmensdaten'],
+  }
+
+  return (
+    <div className="space-y-8">
+      {/* Step Header */}
+      <StepHeader
+        stepId="document-generator"
+        title="Dokumentengenerator"
+        description="Generieren Sie rechtliche Dokumente aus lizenzkonformen Vorlagen"
+        explanation={stepInfo.explanation}
+        tips={stepInfo.tips}
+      />
+
+      {/* Status bar */}
+      <div className="grid grid-cols-3 gap-4">
+        <div className="bg-white rounded-xl border border-gray-200 p-5">
+          <div className="text-sm text-gray-500">Vorlagen gesamt</div>
+          <div className="text-3xl font-bold text-gray-900">{totalCount}</div>
+        </div>
+        <div className="bg-white rounded-xl border border-gray-200 p-5">
+          <div className="text-sm text-gray-500">Angezeigt</div>
+          <div className="text-3xl font-bold text-purple-600">{filteredTemplates.length}</div>
+        </div>
+        <div className="bg-white rounded-xl border border-gray-200 p-5">
+          <div className="text-sm text-gray-500">Aktive Vorlage</div>
+          <div className="text-sm font-medium text-gray-900 mt-1 truncate">
+            {activeTemplate ? activeTemplate.documentTitle : '—'}
+          </div>
+        </div>
+      </div>
+
+      {/* ================================================================= */}
+      {/* SECTION 1: TEMPLATE-BIBLIOTHEK                                     */}
+      {/* ================================================================= */}
+      <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
+        {/* Library header */}
+        <div className="px-6 py-4 border-b border-gray-100 flex items-center justify-between flex-wrap gap-3">
+          <h2 className="font-semibold text-gray-900">Template-Bibliothek</h2>
+          {/* Language toggle */}
+          <div className="flex items-center gap-1 bg-gray-100 rounded-lg p-1">
+            {(['all', 'de', 'en'] as const).map((lang) => (
+              <button
+                key={lang}
+                onClick={() => setActiveLanguage(lang)}
+                className={`px-3 py-1.5 text-xs rounded-md font-medium transition-colors ${
+                  activeLanguage === lang
+                    ? 'bg-white text-gray-900 shadow-sm'
+                    : 'text-gray-500 hover:text-gray-700'
+                }`}
+              >
+                {lang === 'all' ? 'Alle' : lang.toUpperCase()}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Category pills */}
+        <div className="px-6 py-3 border-b border-gray-100 flex gap-2 flex-wrap">
+          {CATEGORIES.map((cat) => {
+            const count = cat.types === null
+              ? allTemplates.filter(t => activeLanguage === 'all' || t.language === activeLanguage).length
+              : allTemplates.filter(t =>
+                  cat.types!.includes(t.templateType || '') &&
+                  (activeLanguage === 'all' || t.language === activeLanguage)
+                ).length
+            return (
+              <button
+                key={cat.key}
+                onClick={() => setActiveCategory(cat.key)}
+                className={`px-3 py-1.5 rounded-full text-xs font-medium transition-colors ${
+                  activeCategory === cat.key
+                    ? 'bg-purple-600 text-white'
+                    : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+                }`}
+              >
+                {cat.label}
+                {count > 0 && (
+                  <span className={`ml-1.5 ${activeCategory === cat.key ? 'text-purple-200' : 'text-gray-400'}`}>
+                    {count}
+                  </span>
+                )}
+              </button>
+            )
+          })}
+        </div>
+
+        {/* Search */}
+        <div className="px-6 py-3 border-b border-gray-100">
+          <div className="relative">
+            <svg className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+            </svg>
+            <input
+              type="text"
+              value={librarySearch}
+              onChange={(e) => setLibrarySearch(e.target.value)}
+              placeholder="Vorlage suchen... (optional)"
+              className="w-full pl-9 pr-4 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-purple-400"
+            />
+            {librarySearch && (
+              <button
+                onClick={() => setLibrarySearch('')}
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+              >
+                ×
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* Template grid */}
+        <div className="p-6">
+          {isLoadingLibrary ? (
+            <div className="flex items-center justify-center h-40">
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600" />
+            </div>
+          ) : filteredTemplates.length === 0 ? (
+            <div className="text-center py-12 text-gray-500">
+              <div className="text-4xl mb-3">📄</div>
+              <p>Keine Vorlagen für diese Auswahl</p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {filteredTemplates.map((template) => (
+                <LibraryCard
+                  key={template.id}
+                  template={template}
+                  expanded={expandedPreviewId === template.id}
+                  onTogglePreview={() =>
+                    setExpandedPreviewId((prev) => (prev === template.id ? null : template.id))
+                  }
+                  onUse={() => handleUseTemplate(template)}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* ================================================================= */}
+      {/* SECTION 2: GENERATOR (visible only when activeTemplate is set)     */}
+      {/* ================================================================= */}
+      {activeTemplate && (
+        <div ref={generatorRef} className="space-y-6">
+          <GeneratorSection
+            template={activeTemplate}
+            placeholderValues={placeholderValues}
+            onPlaceholderChange={(key, value) =>
+              setPlaceholderValues((prev) => ({ ...prev, [key]: value }))
+            }
+            onClose={() => setActiveTemplate(null)}
+          />
+
+          {/* Einwilligungen DataPoints sidebar (shown below generator on small screens, side on large) */}
+          {selectedDataPointsData && selectedDataPointsData.length > 0 && (
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+              <div className="lg:col-span-2">
+                <DocumentValidation
+                  dataPoints={selectedDataPointsData}
+                  documentContent={activeTemplate.text}
+                  language="de"
+                  onInsertPlaceholder={handleInsertPlaceholder}
+                />
+              </div>
+              <div className="lg:col-span-1">
+                <DataPointsPreview
+                  dataPoints={selectedDataPointsData}
+                  onInsertPlaceholder={handleInsertPlaceholder}
+                  language="de"
+                />
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default function DocumentGeneratorPage() {
+  return (
+    <EinwilligungenProvider>
+      <DocumentGeneratorPageInner />
+    </EinwilligungenProvider>
+  )
+}