[split-required] Split final 43 files (500-668 LOC) to complete refactoring

klausur-service (11 files):
- cv_gutter_repair, ocr_pipeline_regression, upload_api
- ocr_pipeline_sessions, smart_spell, nru_worksheet_generator
- ocr_pipeline_overlays, mail/aggregator, zeugnis_api
- cv_syllable_detect, self_rag

backend-lehrer (17 files):
- classroom_engine/suggestions, generators/quiz_generator
- worksheets_api, llm_gateway/comparison, state_engine_api
- classroom/models (→ 4 submodules), services/file_processor
- alerts_agent/api/wizard+digests+routes, content_generators/pdf
- classroom/routes/sessions, llm_gateway/inference
- classroom_engine/analytics, auth/keycloak_auth
- alerts_agent/processing/rule_engine, ai_processor/print_versions

agent-core (5 files):
- brain/memory_store, brain/knowledge_graph, brain/context_manager
- orchestrator/supervisor, sessions/session_manager

admin-lehrer (5 components):
- GridOverlay, StepGridReview, DevOpsPipelineSidebar
- DataFlowDiagram, sbom/wizard/page

website (2 files):
- DependencyMap, lehrer/abitur-archiv

Other: nibis_ingestion, grid_detection_service, export-doclayout-onnx

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

admin-lehrer/components/common/DataFlowDiagram.tsx

@@ -12,6 +12,7 @@ import {
   MODULE_REGISTRY,
   type BackendModule
 } from '@/lib/module-registry'
+import { DataFlowDiagramDetails, SERVICE_COLORS, STATUS_COLORS } from './DataFlowDiagramDetails'
 
 interface NodePosition {
   x: number
@@ -26,20 +27,6 @@ interface ServiceGroup {
   modules: BackendModule[]
 }
 
-const SERVICE_COLORS: Record<string, string> = {
-  'consent-service': '#8b5cf6',  // purple
-  'python-backend': '#f59e0b',   // amber
-  'klausur-service': '#10b981',  // emerald
-  'voice-service': '#3b82f6',    // blue
-}
-
-const STATUS_COLORS = {
-  connected: '#22c55e',
-  partial: '#eab308',
-  'not-connected': '#ef4444',
-  deprecated: '#6b7280'
-}
-
 export function DataFlowDiagram() {
   const [selectedModule, setSelectedModule] = useState<string | null>(null)
   const [hoveredModule, setHoveredModule] = useState<string | null>(null)
@@ -471,39 +458,10 @@ export function DataFlowDiagram() {
 
       {/* Selected Module Details */}
       {selectedModule && (
-        <div className="bg-purple-50 border border-purple-200 rounded-xl p-4">
-          <h4 className="font-medium text-purple-900 mb-2">
-            {MODULE_REGISTRY.find(m => m.id === selectedModule)?.name}
-          </h4>
-          <div className="text-sm text-purple-700 space-y-1">
-            <p>ID: <code className="bg-purple-100 px-1 rounded">{selectedModule}</code></p>
-            {MODULE_REGISTRY.find(m => m.id === selectedModule)?.dependencies && (
-              <p>
-                Abhaengigkeiten:
-                {MODULE_REGISTRY.find(m => m.id === selectedModule)?.dependencies?.map(dep => (
-                  <button
-                    key={dep}
-                    onClick={() => setSelectedModule(dep)}
-                    className="ml-2 px-2 py-0.5 bg-purple-200 text-purple-800 rounded hover:bg-purple-300"
-                  >
-                    {dep}
-                  </button>
-                ))}
-              </p>
-            )}
-            {MODULE_REGISTRY.find(m => m.id === selectedModule)?.frontend.adminV2Page && (
-              <p>
-                Frontend:
-                <a
-                  href={MODULE_REGISTRY.find(m => m.id === selectedModule)?.frontend.adminV2Page}
-                  className="ml-2 text-purple-600 hover:underline"
-                >
-                  {MODULE_REGISTRY.find(m => m.id === selectedModule)?.frontend.adminV2Page}
-                </a>
-              </p>
-            )}
-          </div>
-        </div>
+        <DataFlowDiagramDetails
+          selectedModule={selectedModule}
+          onSelectModule={setSelectedModule}
+        />
       )}
     </div>
   )