feat(scope+vvt): Datenkategorien in Scope Block 9 verschieben, VVT Generator-Tab entfernen

- ScopeQuestionBlockId um 'datenkategorien_detail' erweitert
- Block 9 mit 6 Abteilungs-Datenkategorie-Fragen (dk_dept_hr, dk_dept_recruiting, etc.)
- ScopeWizardTab: aufklappbare Kacheln fuer Block 9, gefiltert nach Block 8 Abteilungswahl
- VVT: Generator-Tab komplett entfernt (3 statt 4 Tabs)
- VVT Verzeichnis: "Aus Scope-Analyse generieren" Button mit Preview + Uebernehmen

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

admin-compliance/components/sdk/compliance-scope/ScopeWizardTab.tsx

@@ -2,6 +2,7 @@
 import React, { useState, useCallback, useEffect, useMemo } from 'react'
 import type { ScopeProfilingAnswer, ScopeProfilingQuestion } from '@/lib/sdk/compliance-scope-types'
 import { SCOPE_QUESTION_BLOCKS, getBlockProgress, getTotalProgress, getAnswerValue, prefillFromCompanyProfile, getProfileInfoForBlock, getAutoFilledScoringAnswers, getUnansweredRequiredQuestions } from '@/lib/sdk/compliance-scope-profiling'
+import { DEPARTMENT_DATA_CATEGORIES } from '@/lib/sdk/vvt-profiling'
 import type { ScopeQuestionBlockId } from '@/lib/sdk/compliance-scope-types'
 import { useSDK } from '@/lib/sdk'
 
@@ -509,19 +510,26 @@ export function ScopeWizardTab({
 
           {/* Questions */}
           <div className="space-y-6">
-            {currentBlock.questions.map((question) => {
-              const isAnswered = answers.some(a => a.questionId === question.id)
-              const borderClass = question.required
-                ? isAnswered
-                  ? 'border-l-4 border-l-green-400 pl-4'
-                  : 'border-l-4 border-l-orange-400 pl-4'
-                : ''
-              return (
-                <div key={question.id} className={`border-b border-gray-100 pb-6 last:border-b-0 last:pb-0 ${borderClass}`}>
-                  {renderQuestion(question)}
-                </div>
-              )
-            })}
+            {currentBlock.id === 'datenkategorien_detail' ? (
+              <DatenkategorienBlock9
+                answers={answers}
+                onAnswerChange={handleAnswerChange}
+              />
+            ) : (
+              currentBlock.questions.map((question) => {
+                const isAnswered = answers.some(a => a.questionId === question.id)
+                const borderClass = question.required
+                  ? isAnswered
+                    ? 'border-l-4 border-l-green-400 pl-4'
+                    : 'border-l-4 border-l-orange-400 pl-4'
+                  : ''
+                return (
+                  <div key={question.id} className={`border-b border-gray-100 pb-6 last:border-b-0 last:pb-0 ${borderClass}`}>
+                    {renderQuestion(question)}
+                  </div>
+                )
+              })
+            )}
           </div>
         </div>
 
@@ -561,3 +569,209 @@ export function ScopeWizardTab({
     </div>
   )
 }
+
+// =============================================================================
+// BLOCK 9: Datenkategorien pro Abteilung (aufklappbare Kacheln)
+// =============================================================================
+
+/** Mapping Block 8 vvt_departments values → DEPARTMENT_DATA_CATEGORIES keys */
+const DEPT_VALUE_TO_KEY: Record<string, string[]> = {
+  personal: ['dept_hr', 'dept_recruiting'],
+  finanzen: ['dept_finance'],
+  vertrieb: ['dept_sales'],
+  marketing: ['dept_marketing'],
+  kundenservice: ['dept_support'],
+}
+
+/** Mapping department key → scope question ID for Block 9 */
+const DEPT_KEY_TO_QUESTION: Record<string, string> = {
+  dept_hr: 'dk_dept_hr',
+  dept_recruiting: 'dk_dept_recruiting',
+  dept_finance: 'dk_dept_finance',
+  dept_sales: 'dk_dept_sales',
+  dept_marketing: 'dk_dept_marketing',
+  dept_support: 'dk_dept_support',
+}
+
+function DatenkategorienBlock9({
+  answers,
+  onAnswerChange,
+}: {
+  answers: ScopeProfilingAnswer[]
+  onAnswerChange: (questionId: string, value: string | string[] | boolean | number) => void
+}) {
+  const [expandedDepts, setExpandedDepts] = useState<Set<string>>(new Set())
+  const [initializedDepts, setInitializedDepts] = useState<Set<string>>(new Set())
+
+  // Get selected departments from Block 8
+  const deptAnswer = answers.find(a => a.questionId === 'vvt_departments')
+  const selectedDepts = Array.isArray(deptAnswer?.value) ? (deptAnswer.value as string[]) : []
+
+  // Resolve which department keys are active
+  const activeDeptKeys: string[] = []
+  for (const deptValue of selectedDepts) {
+    const keys = DEPT_VALUE_TO_KEY[deptValue]
+    if (keys) {
+      for (const k of keys) {
+        if (!activeDeptKeys.includes(k)) activeDeptKeys.push(k)
+      }
+    }
+  }
+
+  const toggleDept = (deptKey: string) => {
+    setExpandedDepts(prev => {
+      const next = new Set(prev)
+      if (next.has(deptKey)) {
+        next.delete(deptKey)
+      } else {
+        next.add(deptKey)
+        // Prefill typical categories on first expand
+        if (!initializedDepts.has(deptKey)) {
+          const config = DEPARTMENT_DATA_CATEGORIES[deptKey]
+          const questionId = DEPT_KEY_TO_QUESTION[deptKey]
+          if (config && questionId) {
+            const existing = answers.find(a => a.questionId === questionId)
+            if (!existing) {
+              const typicalIds = config.categories.filter(c => c.isTypical).map(c => c.id)
+              onAnswerChange(questionId, typicalIds)
+            }
+          }
+          setInitializedDepts(p => new Set(p).add(deptKey))
+        }
+      }
+      return next
+    })
+  }
+
+  const handleCategoryToggle = (deptKey: string, catId: string) => {
+    const questionId = DEPT_KEY_TO_QUESTION[deptKey]
+    if (!questionId) return
+    const existing = answers.find(a => a.questionId === questionId)
+    const current = Array.isArray(existing?.value) ? (existing.value as string[]) : []
+    const updated = current.includes(catId)
+      ? current.filter(id => id !== catId)
+      : [...current, catId]
+    onAnswerChange(questionId, updated)
+  }
+
+  if (activeDeptKeys.length === 0) {
+    return (
+      <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-6 text-center">
+        <p className="text-sm text-yellow-800">
+          Bitte waehlen Sie zuerst in <strong>Block 8 (Verarbeitungstaetigkeiten)</strong> die
+          Abteilungen aus, in denen personenbezogene Daten verarbeitet werden.
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-3">
+      {activeDeptKeys.map(deptKey => {
+        const config = DEPARTMENT_DATA_CATEGORIES[deptKey]
+        if (!config) return null
+        const questionId = DEPT_KEY_TO_QUESTION[deptKey]
+        const isExpanded = expandedDepts.has(deptKey)
+        const existing = answers.find(a => a.questionId === questionId)
+        const selectedCategories = Array.isArray(existing?.value) ? (existing.value as string[]) : []
+        const hasArt9Selected = config.categories
+          .filter(c => c.isArt9)
+          .some(c => selectedCategories.includes(c.id))
+
+        return (
+          <div
+            key={deptKey}
+            className={`border rounded-xl overflow-hidden transition-all ${
+              isExpanded ? 'border-purple-400 bg-white shadow-sm' : 'border-gray-200 bg-white'
+            }`}
+          >
+            {/* Header */}
+            <button
+              type="button"
+              onClick={() => toggleDept(deptKey)}
+              className="w-full flex items-center justify-between p-4 hover:bg-gray-50 transition-colors"
+            >
+              <div className="flex items-center gap-3">
+                <span className="text-xl">{config.icon}</span>
+                <div className="text-left">
+                  <span className="text-sm font-medium text-gray-900">{config.label}</span>
+                  {selectedCategories.length > 0 && (
+                    <span className="ml-2 text-xs text-gray-400">
+                      ({selectedCategories.length} Kategorien)
+                    </span>
+                  )}
+                </div>
+              </div>
+              <div className="flex items-center gap-2">
+                {hasArt9Selected && (
+                  <span className="px-1.5 py-0.5 text-[10px] font-semibold bg-orange-100 text-orange-700 rounded">
+                    Art. 9
+                  </span>
+                )}
+                <svg
+                  className={`w-5 h-5 text-gray-400 transition-transform ${isExpanded ? 'rotate-180' : ''}`}
+                  fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                </svg>
+              </div>
+            </button>
+
+            {/* Expandable categories panel */}
+            {isExpanded && (
+              <div className="border-t border-gray-100 px-4 pt-3 pb-4">
+                <p className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-3">
+                  Datenkategorien
+                </p>
+                <div className="space-y-1.5">
+                  {config.categories.map(cat => {
+                    const isChecked = selectedCategories.includes(cat.id)
+                    return (
+                      <label
+                        key={cat.id}
+                        className={`flex items-start gap-3 p-2.5 rounded-lg cursor-pointer transition-colors ${
+                          cat.isArt9
+                            ? isChecked ? 'bg-orange-50 hover:bg-orange-100' : 'bg-gray-50 hover:bg-orange-50'
+                            : isChecked ? 'bg-purple-50 hover:bg-purple-100' : 'bg-gray-50 hover:bg-gray-100'
+                        }`}
+                      >
+                        <input
+                          type="checkbox"
+                          checked={isChecked}
+                          onChange={() => handleCategoryToggle(deptKey, cat.id)}
+                          className={`w-4 h-4 mt-0.5 rounded ${cat.isArt9 ? 'text-orange-500' : 'text-purple-600'}`}
+                        />
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center gap-2">
+                            <span className="text-sm font-medium text-gray-900">{cat.label}</span>
+                            {cat.isArt9 && (
+                              <span className="px-1.5 py-0.5 text-[10px] font-semibold bg-orange-100 text-orange-700 rounded">
+                                Art. 9
+                              </span>
+                            )}
+                          </div>
+                          <p className="text-xs text-gray-500 mt-0.5">{cat.info}</p>
+                        </div>
+                      </label>
+                    )
+                  })}
+                </div>
+
+                {/* Art. 9 warning */}
+                {hasArt9Selected && (
+                  <div className="mt-3 p-3 bg-orange-50 border border-orange-200 rounded-lg">
+                    <p className="text-xs text-orange-800">
+                      <span className="font-semibold">Art. 9 DSGVO:</span> Sie verarbeiten besondere Kategorien
+                      personenbezogener Daten. Eine zusaetzliche Rechtsgrundlage nach Art. 9 Abs. 2 DSGVO ist
+                      erforderlich (z.B. § 26 Abs. 3 BDSG fuer Beschaeftigtendaten).
+                    </p>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}