feat(sdk): vendor-compliance cross-module integration — VVT, obligations, TOM, loeschfristen

Integrate the vendor-compliance module with four DSGVO modules to eliminate
data silos and resolve the VVT processor tab's ephemeral state problem.

- Reposition vendor-compliance sidebar from seq 4200 to 2500 (after VVT)
- VVT: replace ephemeral ProcessorRecord state with Vendor-API fetch (read-only)
- Obligations: add linked_vendor_ids (JSONB) + compliance check #12 MISSING_VENDOR_LINK
- TOM: add vendor TOM-controls cross-reference table in overview tab
- Loeschfristen: add linked_vendor_ids (JSONB) + vendor picker + document section
- Migrations: 069_obligations_vendor_link.sql, 070_loeschfristen_vendor_link.sql
- Tests: 12 new backend tests (125 total pass)
- Docs: update obligations.md + vendors.md with cross-module integration

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

admin-compliance/app/sdk/obligations/page.tsx

@@ -1,35 +1,20 @@
 'use client'
 
-import React, { useState, useEffect, useCallback } from 'react'
+import React, { useState, useEffect, useCallback, useMemo } from 'react'
 import { StepHeader, STEP_EXPLANATIONS } from '@/components/sdk/StepHeader'
 import TOMControlPanel from '@/components/sdk/obligations/TOMControlPanel'
 import GapAnalysisView from '@/components/sdk/obligations/GapAnalysisView'
+import { ObligationDocumentTab } from '@/components/sdk/obligations/ObligationDocumentTab'
 import { useSDK } from '@/lib/sdk'
 import { buildAssessmentPayload } from '@/lib/sdk/scope-to-facts'
 import type { ApplicableRegulation } from '@/lib/sdk/compliance-scope-types'
+import type { Obligation, ObligationComplianceCheckResult } from '@/lib/sdk/obligations-compliance'
+import { runObligationComplianceCheck } from '@/lib/sdk/obligations-compliance'
 
 // =============================================================================
-// Types
+// Types (local only — Obligation imported from obligations-compliance.ts)
 // =============================================================================
 
-interface Obligation {
-  id: string
-  title: string
-  description: string
-  source: string
-  source_article: string
-  deadline: string | null
-  status: 'pending' | 'in-progress' | 'completed' | 'overdue'
-  priority: 'critical' | 'high' | 'medium' | 'low'
-  responsible: string
-  linked_systems: string[]
-  assessment_id?: string
-  rule_code?: string
-  notes?: string
-  created_at?: string
-  updated_at?: string
-}
-
 interface ObligationStats {
   pending: number
   in_progress: number
@@ -50,6 +35,7 @@ interface ObligationFormData {
   priority: string
   responsible: string
   linked_systems: string
+  linked_vendor_ids: string
   notes: string
 }
 
@@ -63,11 +49,26 @@ const EMPTY_FORM: ObligationFormData = {
   priority: 'medium',
   responsible: '',
   linked_systems: '',
+  linked_vendor_ids: '',
   notes: '',
 }
 
 const API = '/api/sdk/v1/compliance/obligations'
 
+// =============================================================================
+// Tab definitions
+// =============================================================================
+
+type Tab = 'uebersicht' | 'editor' | 'profiling' | 'gap-analyse' | 'pflichtenregister'
+
+const TABS: { key: Tab; label: string }[] = [
+  { key: 'uebersicht', label: 'Uebersicht' },
+  { key: 'editor', label: 'Detail-Editor' },
+  { key: 'profiling', label: 'Profiling' },
+  { key: 'gap-analyse', label: 'Gap-Analyse' },
+  { key: 'pflichtenregister', label: 'Pflichtenregister' },
+]
+
 // =============================================================================
 // Status helpers
 // =============================================================================
@@ -262,6 +263,18 @@ function ObligationModal({
             />
           </div>
 
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Verknuepfte Auftragsverarbeiter</label>
+            <input
+              type="text"
+              value={form.linked_vendor_ids}
+              onChange={e => update('linked_vendor_ids', e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500"
+              placeholder="Kommagetrennt: Vendor-ID-1, Vendor-ID-2"
+            />
+            <p className="text-xs text-gray-400 mt-1">IDs der Auftragsverarbeiter aus dem Vendor Register</p>
+          </div>
+
           <div>
             <label className="block text-sm font-medium text-gray-700 mb-1">Notizen</label>
             <textarea
@@ -365,6 +378,19 @@ function ObligationDetail({ obligation, onClose, onStatusChange, onEdit, onDelet
             </div>
           )}
 
+          {obligation.linked_vendor_ids && obligation.linked_vendor_ids.length > 0 && (
+            <div>
+              <span className="text-gray-500">Verknuepfte Auftragsverarbeiter</span>
+              <div className="flex flex-wrap gap-1 mt-1">
+                {obligation.linked_vendor_ids.map(id => (
+                  <a key={id} href="/sdk/vendor-compliance" className="px-2 py-0.5 text-xs bg-indigo-50 text-indigo-700 rounded hover:bg-indigo-100 transition-colors">
+                    {id}
+                  </a>
+                ))}
+              </div>
+            </div>
+          )}
+
           {obligation.notes && (
             <div>
               <span className="text-gray-500">Notizen</span>
@@ -559,9 +585,26 @@ export default function ObligationsPage() {
   const [showModal, setShowModal] = useState(false)
   const [editObligation, setEditObligation] = useState<Obligation | null>(null)
   const [detailObligation, setDetailObligation] = useState<Obligation | null>(null)
-  const [showGapAnalysis, setShowGapAnalysis] = useState(false)
   const [profiling, setProfiling] = useState(false)
   const [applicableRegs, setApplicableRegs] = useState<ApplicableRegulation[]>([])
+  const [activeTab, setActiveTab] = useState<Tab>('uebersicht')
+  const [vendors, setVendors] = useState<Array<{id: string, name: string, role: string}>>([])
+
+  useEffect(() => {
+    fetch('/api/sdk/v1/vendor-compliance/vendors?limit=500')
+      .then(r => r.ok ? r.json() : null)
+      .then(data => {
+        const items = data?.data?.items || []
+        setVendors(items.map((v: any) => ({ id: v.id, name: v.name, role: v.role })))
+      })
+      .catch(() => {})
+  }, [])
+
+  // Compliance check result — auto-computed when obligations change
+  const complianceResult = useMemo<ObligationComplianceCheckResult | null>(() => {
+    if (obligations.length === 0) return null
+    return runObligationComplianceCheck(obligations)
+  }, [obligations])
 
   const loadData = useCallback(async () => {
     setLoading(true)
@@ -613,6 +656,7 @@ export default function ObligationsPage() {
         priority: form.priority,
         responsible: form.responsible || null,
         linked_systems: form.linked_systems ? form.linked_systems.split(',').map(s => s.trim()).filter(Boolean) : [],
+        linked_vendor_ids: form.linked_vendor_ids ? form.linked_vendor_ids.split(',').map(s => s.trim()).filter(Boolean) : [],
         notes: form.notes || null,
       }),
     })
@@ -634,12 +678,12 @@ export default function ObligationsPage() {
         priority: form.priority,
         responsible: form.responsible || null,
         linked_systems: form.linked_systems ? form.linked_systems.split(',').map(s => s.trim()).filter(Boolean) : [],
+        linked_vendor_ids: form.linked_vendor_ids ? form.linked_vendor_ids.split(',').map(s => s.trim()).filter(Boolean) : [],
         notes: form.notes || null,
       }),
     })
     if (!res.ok) throw new Error('Aktualisierung fehlgeschlagen')
     await loadData()
-    // Refresh detail if open
     if (detailObligation?.id === id) {
       const updated = await fetch(`${API}/${id}`)
       if (updated.ok) setDetailObligation(await updated.json())
@@ -656,7 +700,6 @@ export default function ObligationsPage() {
     const updated = await res.json()
     setObligations(prev => prev.map(o => o.id === id ? updated : o))
     if (detailObligation?.id === id) setDetailObligation(updated)
-    // Refresh stats
     fetch(`${API}/stats`).then(r => r.json()).then(setStats).catch(() => {})
   }
 
@@ -672,7 +715,6 @@ export default function ObligationsPage() {
     setProfiling(true)
     setError(null)
     try {
-      // Build payload from real CompanyProfile + Scope data
       const profile = sdkState.companyProfile
       const scopeState = sdkState.complianceScope
       const scopeAnswers = scopeState?.answers || []
@@ -682,7 +724,6 @@ export default function ObligationsPage() {
       if (profile) {
         payload = buildAssessmentPayload(profile, scopeAnswers, scopeDecision) as unknown as Record<string, unknown>
       } else {
-        // Fallback: Minimaldaten wenn kein Profil vorhanden
         payload = {
           employee_count: 50,
           industry: 'technology',
@@ -702,11 +743,9 @@ export default function ObligationsPage() {
       if (!res.ok) throw new Error(`HTTP ${res.status}`)
       const data = await res.json()
 
-      // Store applicable regulations for the info box
       const regs: ApplicableRegulation[] = data.overview?.applicable_regulations || data.applicable_regulations || []
       setApplicableRegs(regs)
 
-      // Extract obligations from response (can be nested under overview)
       const rawObls = data.overview?.obligations || data.obligations || []
       if (rawObls.length > 0) {
         const autoObls: Obligation[] = rawObls.map((o: Record<string, unknown>) => ({
@@ -738,11 +777,9 @@ export default function ObligationsPage() {
   const stepInfo = STEP_EXPLANATIONS['obligations']
 
   const filteredObligations = obligations.filter(o => {
-    // Status/priority filter
     if (filter === 'ai') {
       if (!o.source.toLowerCase().includes('ai')) return false
     }
-    // Regulation filter
     if (regulationFilter !== 'all') {
       const src = o.source?.toLowerCase() || ''
       const key = regulationFilter.toLowerCase()
@@ -751,91 +788,12 @@ export default function ObligationsPage() {
     return true
   })
 
-  return (
-    <div className="space-y-6">
-      {/* Modals */}
-      {(showModal || editObligation) && !detailObligation && (
-        <ObligationModal
-          initial={editObligation ? {
-            title: editObligation.title,
-            description: editObligation.description,
-            source: editObligation.source,
-            source_article: editObligation.source_article,
-            deadline: editObligation.deadline ? editObligation.deadline.slice(0, 10) : '',
-            status: editObligation.status,
-            priority: editObligation.priority,
-            responsible: editObligation.responsible,
-            linked_systems: editObligation.linked_systems?.join(', ') || '',
-            notes: editObligation.notes || '',
-          } : undefined}
-          onClose={() => { setShowModal(false); setEditObligation(null) }}
-          onSave={async (form) => {
-            if (editObligation) {
-              await handleUpdate(editObligation.id, form)
-              setEditObligation(null)
-            } else {
-              await handleCreate(form)
-              setShowModal(false)
-            }
-          }}
-        />
-      )}
-
-      {detailObligation && (
-        <ObligationDetail
-          obligation={detailObligation}
-          onClose={() => setDetailObligation(null)}
-          onStatusChange={handleStatusChange}
-          onDelete={handleDelete}
-          onEdit={() => {
-            setEditObligation(detailObligation)
-            setDetailObligation(null)
-          }}
-        />
-      )}
-
-      {/* Header */}
-      <StepHeader
-        stepId="obligations"
-        title={stepInfo?.title || 'Pflichten-Management'}
-        description={stepInfo?.description || 'DSGVO & AI-Act Compliance-Pflichten verwalten'}
-        explanation={stepInfo?.explanation || ''}
-        tips={stepInfo?.tips || []}
-      >
-        <div className="flex items-center gap-2">
-          <button
-            onClick={handleAutoProfiling}
-            disabled={profiling}
-            className="flex items-center gap-2 px-4 py-2 bg-white border border-purple-300 text-purple-700 rounded-lg hover:bg-purple-50 transition-colors text-sm disabled:opacity-50"
-          >
-            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
-            </svg>
-            {profiling ? 'Profiling...' : 'Auto-Profiling'}
-          </button>
-          <button
-            onClick={() => setShowGapAnalysis(v => !v)}
-            className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-colors text-sm ${
-              showGapAnalysis ? 'bg-purple-100 text-purple-700' : 'bg-white border border-gray-300 text-gray-700 hover:bg-gray-50'
-            }`}
-          >
-            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
-            </svg>
-            Gap-Analyse
-          </button>
-          <button
-            onClick={() => setShowModal(true)}
-            className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors text-sm"
-          >
-            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
-            </svg>
-            Pflicht hinzufuegen
-          </button>
-        </div>
-      </StepHeader>
+  // ---------------------------------------------------------------------------
+  // Tab Content Renderers
+  // ---------------------------------------------------------------------------
 
+  const renderUebersichtTab = () => (
+    <>
       {/* Error */}
       {error && (
         <div className="bg-amber-50 border border-amber-200 rounded-lg p-3 text-sm text-amber-700">{error}</div>
@@ -872,12 +830,13 @@ export default function ObligationsPage() {
       )}
 
       {/* Stats */}
-      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+      <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
         {[
           { label: 'Ausstehend',    value: stats?.pending     ?? 0, color: 'text-gray-600',  border: 'border-gray-200' },
           { label: 'In Bearbeitung',value: stats?.in_progress ?? 0, color: 'text-blue-600',  border: 'border-blue-200' },
           { label: 'Ueberfaellig',  value: stats?.overdue     ?? 0, color: 'text-red-600',   border: 'border-red-200'  },
           { label: 'Abgeschlossen', value: stats?.completed   ?? 0, color: 'text-green-600', border: 'border-green-200'},
+          { label: 'Compliance-Score', value: complianceResult ? complianceResult.score : '—', color: 'text-purple-600', border: 'border-purple-200'},
         ].map(s => (
           <div key={s.label} className={`bg-white rounded-xl border ${s.border} p-5`}>
             <div className={`text-xs ${s.color}`}>{s.label}</div>
@@ -901,9 +860,26 @@ export default function ObligationsPage() {
         </div>
       )}
 
-      {/* Gap Analysis View */}
-      {showGapAnalysis && (
-        <GapAnalysisView />
+      {/* Compliance Issues Summary */}
+      {complianceResult && complianceResult.issues.length > 0 && (
+        <div className="bg-white rounded-xl border border-gray-200 p-5">
+          <h3 className="text-sm font-semibold text-gray-900 mb-3">Compliance-Befunde ({complianceResult.issues.length})</h3>
+          <div className="space-y-2">
+            {complianceResult.issues.map((issue, i) => (
+              <div key={i} className="flex items-start gap-3 text-sm">
+                <span className={`px-2 py-0.5 text-xs rounded-full flex-shrink-0 ${
+                  issue.severity === 'CRITICAL' ? 'bg-red-100 text-red-700' :
+                  issue.severity === 'HIGH' ? 'bg-orange-100 text-orange-700' :
+                  issue.severity === 'MEDIUM' ? 'bg-yellow-100 text-yellow-700' :
+                  'bg-gray-100 text-gray-600'
+                }`}>
+                  {issue.severity === 'CRITICAL' ? 'Kritisch' : issue.severity === 'HIGH' ? 'Hoch' : issue.severity === 'MEDIUM' ? 'Mittel' : 'Niedrig'}
+                </span>
+                <span className="text-gray-700">{issue.message}</span>
+              </div>
+            ))}
+          </div>
+        </div>
       )}
 
       {/* Regulation Filter Chips */}
@@ -970,7 +946,7 @@ export default function ObligationsPage() {
               </div>
               <h3 className="text-base font-semibold text-gray-900">Keine Pflichten gefunden</h3>
               <p className="mt-2 text-sm text-gray-500">
-                Klicken Sie auf "Pflicht hinzufuegen", um die erste Compliance-Pflicht zu erfassen.
+                Klicken Sie auf &quot;Pflicht hinzufuegen&quot;, um die erste Compliance-Pflicht zu erfassen.
               </p>
               <button
                 onClick={() => setShowModal(true)}
@@ -982,6 +958,220 @@ export default function ObligationsPage() {
           )}
         </div>
       )}
+    </>
+  )
+
+  const renderEditorTab = () => (
+    <>
+      <div className="bg-white rounded-xl border border-gray-200 p-6">
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-sm font-semibold text-gray-900">Pflichten bearbeiten ({obligations.length})</h3>
+          <button
+            onClick={() => setShowModal(true)}
+            className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 text-sm"
+          >
+            Pflicht hinzufuegen
+          </button>
+        </div>
+        {loading && <p className="text-gray-500 text-sm">Lade...</p>}
+        {!loading && obligations.length === 0 && (
+          <p className="text-gray-500 text-sm">Noch keine Pflichten vorhanden. Erstellen Sie eine neue Pflicht oder nutzen Sie Auto-Profiling.</p>
+        )}
+        {!loading && obligations.length > 0 && (
+          <div className="space-y-2 max-h-[60vh] overflow-y-auto">
+            {obligations.map(o => (
+              <div
+                key={o.id}
+                className="flex items-center justify-between p-3 border border-gray-100 rounded-lg hover:bg-gray-50 cursor-pointer"
+                onClick={() => {
+                  setEditObligation(o)
+                }}
+              >
+                <div className="flex items-center gap-3 min-w-0">
+                  <span className={`px-2 py-0.5 text-xs rounded-full flex-shrink-0 ${STATUS_COLORS[o.status]}`}>
+                    {STATUS_LABELS[o.status]}
+                  </span>
+                  <span className={`px-2 py-0.5 text-xs rounded-full flex-shrink-0 ${PRIORITY_COLORS[o.priority]}`}>
+                    {PRIORITY_LABELS[o.priority]}
+                  </span>
+                  <span className="text-sm text-gray-900 truncate">{o.title}</span>
+                </div>
+                <div className="flex items-center gap-2 flex-shrink-0">
+                  <span className="text-xs text-gray-400">{o.source}</span>
+                  <button
+                    onClick={(e) => { e.stopPropagation(); setEditObligation(o) }}
+                    className="text-xs text-purple-600 hover:text-purple-700 font-medium"
+                  >
+                    Bearbeiten
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </>
+  )
+
+  const renderProfilingTab = () => (
+    <>
+      {error && (
+        <div className="bg-amber-50 border border-amber-200 rounded-lg p-3 text-sm text-amber-700">{error}</div>
+      )}
+
+      {!sdkState.companyProfile && (
+        <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3 text-sm text-yellow-700">
+          Kein Unternehmensprofil vorhanden. Auto-Profiling verwendet Beispieldaten.{' '}
+          <a href="/sdk/company-profile" className="underline font-medium">Profil anlegen →</a>
+        </div>
+      )}
+
+      <div className="bg-white rounded-xl border border-gray-200 p-6 text-center">
+        <div className="w-12 h-12 mx-auto bg-purple-50 rounded-full flex items-center justify-center mb-3">
+          <svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+          </svg>
+        </div>
+        <h3 className="text-sm font-semibold text-gray-900">Auto-Profiling</h3>
+        <p className="text-xs text-gray-500 mt-1 mb-4">
+          Ermittelt automatisch anwendbare Regulierungen und Pflichten aus dem Unternehmensprofil und Compliance-Scope.
+        </p>
+        <button
+          onClick={handleAutoProfiling}
+          disabled={profiling}
+          className="px-5 py-2 bg-purple-600 text-white text-sm rounded-lg hover:bg-purple-700 disabled:opacity-50"
+        >
+          {profiling ? 'Profiling laeuft...' : 'Auto-Profiling starten'}
+        </button>
+      </div>
+
+      {applicableRegs.length > 0 && (
+        <div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
+          <h3 className="text-sm font-semibold text-blue-900 mb-2">Anwendbare Regulierungen</h3>
+          <div className="flex flex-wrap gap-2">
+            {applicableRegs.map(reg => (
+              <span
+                key={reg.id}
+                className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-white border border-blue-300 text-blue-800"
+              >
+                <svg className="w-3.5 h-3.5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                </svg>
+                {reg.name}
+                {reg.classification && <span className="text-blue-500">({reg.classification})</span>}
+                <span className="text-blue-400">{reg.obligation_count} Pflichten</span>
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+    </>
+  )
+
+  const renderGapAnalyseTab = () => (
+    <GapAnalysisView />
+  )
+
+  const renderPflichtenregisterTab = () => (
+    <ObligationDocumentTab
+      obligations={obligations}
+      complianceResult={complianceResult}
+    />
+  )
+
+  const renderTabContent = () => {
+    switch (activeTab) {
+      case 'uebersicht': return renderUebersichtTab()
+      case 'editor': return renderEditorTab()
+      case 'profiling': return renderProfilingTab()
+      case 'gap-analyse': return renderGapAnalyseTab()
+      case 'pflichtenregister': return renderPflichtenregisterTab()
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Modals */}
+      {(showModal || editObligation) && !detailObligation && (
+        <ObligationModal
+          initial={editObligation ? {
+            title: editObligation.title,
+            description: editObligation.description,
+            source: editObligation.source,
+            source_article: editObligation.source_article,
+            deadline: editObligation.deadline ? editObligation.deadline.slice(0, 10) : '',
+            status: editObligation.status,
+            priority: editObligation.priority,
+            responsible: editObligation.responsible,
+            linked_systems: editObligation.linked_systems?.join(', ') || '',
+            notes: editObligation.notes || '',
+          } : undefined}
+          onClose={() => { setShowModal(false); setEditObligation(null) }}
+          onSave={async (form) => {
+            if (editObligation) {
+              await handleUpdate(editObligation.id, form)
+              setEditObligation(null)
+            } else {
+              await handleCreate(form)
+              setShowModal(false)
+            }
+          }}
+        />
+      )}
+
+      {detailObligation && (
+        <ObligationDetail
+          obligation={detailObligation}
+          onClose={() => setDetailObligation(null)}
+          onStatusChange={handleStatusChange}
+          onDelete={handleDelete}
+          onEdit={() => {
+            setEditObligation(detailObligation)
+            setDetailObligation(null)
+          }}
+        />
+      )}
+
+      {/* Header */}
+      <StepHeader
+        stepId="obligations"
+        title={stepInfo?.title || 'Pflichten-Management'}
+        description={stepInfo?.description || 'DSGVO & AI-Act Compliance-Pflichten verwalten'}
+        explanation={stepInfo?.explanation || ''}
+        tips={stepInfo?.tips || []}
+      >
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => setShowModal(true)}
+            className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors text-sm"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+            </svg>
+            Pflicht hinzufuegen
+          </button>
+        </div>
+      </StepHeader>
+
+      {/* Tab Navigation */}
+      <div className="flex gap-1 border-b border-gray-200">
+        {TABS.map(tab => (
+          <button
+            key={tab.key}
+            onClick={() => setActiveTab(tab.key)}
+            className={`px-4 py-2.5 text-sm font-medium transition-colors ${
+              activeTab === tab.key
+                ? 'border-b-2 border-purple-500 text-purple-700'
+                : 'text-gray-500 hover:text-gray-700 hover:border-b-2 hover:border-gray-300'
+            }`}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Tab Content */}
+      {renderTabContent()}
     </div>
   )
 }