refactor(admin): split company-profile page.tsx (3017 LOC) into colocated components

Extract the monolithic company-profile wizard into _components/ and _hooks/
following Next.js 15 conventions from AGENTS.typescript.md:

- _components/constants.ts: wizard steps, legal forms, industries, certifications
- _components/types.ts: local interfaces (ProcessingActivity, AISystem, etc.)
- _components/activity-data.ts: DSGVO data categories, department/activity templates
- _components/ai-system-data.ts: AI system template catalog
- _components/StepBasicInfo.tsx: step 1 (company name, legal form, industry)
- _components/StepBusinessModel.tsx: step 2 (B2B/B2C, offerings)
- _components/StepCompanySize.tsx: step 3 (size, revenue)
- _components/StepLocations.tsx: step 4 (headquarters, target markets)
- _components/StepDataProtection.tsx: step 5 (DSGVO roles, DPO)
- _components/StepProcessing.tsx: processing activities with category checkboxes
- _components/StepAISystems.tsx: AI system inventory
- _components/StepLegalFramework.tsx: certifications and contacts
- _components/StepMachineBuilder.tsx: machine builder profile (step 7)
- _components/ProfileSummary.tsx: completion summary view
- _hooks/useCompanyProfileForm.ts: form state, auto-save, navigation logic
- page.tsx: thin orchestrator (160 LOC), imports and composes sections

All 16 files are under 500 LOC (largest: StepProcessing at 343).
Build verified: npx next build passes cleanly.

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

admin-compliance/app/sdk/company-profile/_components/StepDataProtection.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import { CompanyProfile } from '@/lib/sdk/types'
+
+export function StepDataProtection({
+  data,
+  onChange,
+}: {
+  data: Partial<CompanyProfile>
+  onChange: (updates: Partial<CompanyProfile>) => void
+}) {
+  return (
+    <div className="space-y-8">
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-4">
+          Datenschutz-Rolle nach DSGVO
+        </label>
+        <div className="space-y-3">
+          <label className="flex items-start gap-4 p-4 rounded-xl border-2 border-gray-200 hover:border-purple-300 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={data.isDataController ?? true}
+              onChange={e => onChange({ isDataController: e.target.checked })}
+              className="mt-1 w-5 h-5 text-purple-600 rounded focus:ring-purple-500"
+            />
+            <div>
+              <div className="font-medium text-gray-900">Verantwortlicher (Art. 4 Nr. 7 DSGVO)</div>
+              <div className="text-sm text-gray-500">
+                Wir entscheiden selbst &uuml;ber Zwecke und Mittel der Datenverarbeitung
+              </div>
+            </div>
+          </label>
+
+          <label className="flex items-start gap-4 p-4 rounded-xl border-2 border-gray-200 hover:border-purple-300 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={data.isDataProcessor ?? false}
+              onChange={e => onChange({ isDataProcessor: e.target.checked })}
+              className="mt-1 w-5 h-5 text-purple-600 rounded focus:ring-purple-500"
+            />
+            <div>
+              <div className="font-medium text-gray-900">Auftragsverarbeiter (Art. 4 Nr. 8 DSGVO)</div>
+              <div className="text-sm text-gray-500">
+                Wir verarbeiten personenbezogene Daten im Auftrag anderer Unternehmen
+              </div>
+            </div>
+          </label>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-2 gap-6">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            Datenschutzbeauftragter (Name)
+          </label>
+          <input
+            type="text"
+            value={data.dpoName || ''}
+            onChange={e => onChange({ dpoName: e.target.value || null })}
+            placeholder="Optional"
+            className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">DSB E-Mail</label>
+          <input
+            type="email"
+            value={data.dpoEmail || ''}
+            onChange={e => onChange({ dpoEmail: e.target.value || null })}
+            placeholder="dsb@firma.de"
+            className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}