feat: BreakPilot PWA - Full codebase (clean push without large binaries)

All services: admin-v2, studio-v2, website, ai-compliance-sdk,
consent-service, klausur-service, voice-service, and infrastructure.
Large PDFs and compiled binaries excluded via .gitignore.

website/components/wizard/ArchitectureContext.tsx

@@ -0,0 +1,100 @@
+'use client'
+
+import type { ArchitectureContext as ArchitectureContextType } from './types'
+
+interface ArchitectureContextProps {
+  context: ArchitectureContextType
+  currentStep?: string
+  highlightedComponents?: string[]
+}
+
+const LAYER_CONFIG = {
+  frontend: { label: 'Frontend', color: 'blue', icon: '🖥️' },
+  api: { label: 'API', color: 'purple', icon: '🔌' },
+  service: { label: 'Service', color: 'green', icon: '⚙️' },
+  database: { label: 'Datenbank', color: 'orange', icon: '🗄️' },
+}
+
+export function ArchitectureContext({ context, currentStep, highlightedComponents = [] }: ArchitectureContextProps) {
+  const layerConfig = LAYER_CONFIG[context.layer]
+
+  return (
+    <div className="bg-slate-900 rounded-lg p-6 mb-6">
+      <h4 className="text-white font-medium mb-4 flex items-center">
+        <span className="mr-2">🏗️</span>
+        Architektur-Kontext{currentStep && `: ${currentStep}`}
+      </h4>
+
+      {/* Data Flow Visualization */}
+      <div className="mb-6">
+        <div className="flex items-center justify-center flex-wrap gap-2">
+          {context.dataFlow.map((component, index) => {
+            const isHighlighted = highlightedComponents.includes(component.toLowerCase())
+            const isCurrentLayer = component.toLowerCase().includes(context.layer)
+
+            return (
+              <div key={index} className="flex items-center">
+                <div className={`px-3 py-2 rounded-lg text-sm font-medium transition-all ${
+                  isHighlighted || isCurrentLayer
+                    ? 'bg-blue-500 text-white ring-2 ring-blue-300'
+                    : 'bg-slate-700 text-slate-300'
+                }`}>
+                  {component}
+                  {isCurrentLayer && (
+                    <span className="ml-2 text-xs">← Sie sind hier</span>
+                  )}
+                </div>
+                {index < context.dataFlow.length - 1 && (
+                  <span className="mx-2 text-slate-500">→</span>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+
+      {/* Layer Info */}
+      <div className="grid grid-cols-2 gap-4 mb-4">
+        <div className="bg-slate-800 rounded-lg p-4">
+          <h5 className="text-slate-400 text-xs uppercase tracking-wide mb-2">Aktuelle Schicht</h5>
+          <div className="flex items-center">
+            <span className="text-xl mr-2">{layerConfig.icon}</span>
+            <span className={`text-${layerConfig.color}-400 font-medium`}>
+              {layerConfig.label}
+            </span>
+          </div>
+        </div>
+        <div className="bg-slate-800 rounded-lg p-4">
+          <h5 className="text-slate-400 text-xs uppercase tracking-wide mb-2">Beteiligte Services</h5>
+          <div className="flex flex-wrap gap-1">
+            {context.services.map((service) => (
+              <span
+                key={service}
+                className="px-2 py-1 bg-slate-700 text-slate-300 text-xs rounded"
+              >
+                {service}
+              </span>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Dependencies */}
+      {context.dependencies.length > 0 && (
+        <div className="pt-4 border-t border-slate-700">
+          <h5 className="text-slate-400 text-xs uppercase tracking-wide mb-2">Abhaengigkeiten</h5>
+          <div className="flex flex-wrap gap-2">
+            {context.dependencies.map((dep) => (
+              <span
+                key={dep}
+                className="px-2 py-1 bg-amber-900/50 text-amber-300 text-xs rounded border border-amber-700"
+              >
+                {dep}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}