feat(use-case-wizard): Sonstige Datentypen, bessere Erklaerungen und Glossar

- Step 2: Dynamische Textfelder fuer eigene Datentypen (Kennzeichen, VIN etc.)
- Step 4: Konkrete Beispiele fuer Automatisierungsgrade + Art. 22 DSGVO Info
- Step 5: Ausfuehrliche Erklaerungen mit Beispielen + aufklappbares Glossar (ML, DL, NLP, LLM, RAG, Fine-Tuning)

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

admin-compliance/app/sdk/use-cases/new/page.tsx

@@ -62,6 +62,7 @@ function NewUseCasePageInner() {
     health_data: false,
     biometric_data: false,
     financial_data: false,
+    custom_data_types: [] as string[],
     // Purpose
     purpose_profiling: false,
     purpose_automated_decision: false,
@@ -116,6 +117,7 @@ function NewUseCasePageInner() {
           health_data: intake.data_types?.health_data || false,
           biometric_data: intake.data_types?.biometric_data || false,
           financial_data: intake.data_types?.financial_data || false,
+          custom_data_types: intake.data_types?.custom_data_types || [],
           purpose_profiling: intake.purpose?.profiling || false,
           purpose_automated_decision: intake.purpose?.automated_decision || intake.purpose?.decision_making || false,
           purpose_marketing: intake.purpose?.marketing || false,
@@ -159,6 +161,7 @@ function NewUseCasePageInner() {
           health_data: form.health_data,
           biometric_data: form.biometric_data,
           financial_data: form.financial_data,
+          custom_data_types: form.custom_data_types.filter(s => s.trim()),
         },
         purpose: {
           profiling: form.purpose_profiling,
@@ -374,6 +377,46 @@ function NewUseCasePageInner() {
                 </div>
               </label>
             ))}
+
+            {/* Sonstige Datentypen */}
+            <div className="border border-gray-200 rounded-lg p-4 space-y-3">
+              <div className="font-medium text-gray-900">Sonstige Datentypen</div>
+              <p className="text-sm text-gray-500">
+                z.B. Kennzeichen, Fahrzeug-Identifikationsnummer (VIN), Geraete-IDs, IP-Adressen
+              </p>
+              {form.custom_data_types.map((dt, idx) => (
+                <div key={idx} className="flex items-center gap-2">
+                  <input
+                    type="text"
+                    value={dt}
+                    onChange={e => {
+                      const updated = [...form.custom_data_types]
+                      updated[idx] = e.target.value
+                      updateForm({ custom_data_types: updated })
+                    }}
+                    placeholder="Datentyp eingeben..."
+                    className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+                  />
+                  <button
+                    onClick={() => {
+                      const updated = form.custom_data_types.filter((_, i) => i !== idx)
+                      updateForm({ custom_data_types: updated })
+                    }}
+                    className="p-2 text-red-500 hover:bg-red-50 rounded-lg"
+                    title="Entfernen"
+                  >
+                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
+                  </button>
+                </div>
+              ))}
+              <button
+                onClick={() => updateForm({ custom_data_types: [...form.custom_data_types, ''] })}
+                className="flex items-center gap-1 text-sm text-purple-600 hover:text-purple-700 font-medium"
+              >
+                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" /></svg>
+                Weiteren Datentyp hinzufuegen
+              </button>
+            </div>
           </div>
         )}
 
@@ -426,10 +469,28 @@ function NewUseCasePageInner() {
         {currentStep === 4 && (
           <div className="space-y-4">
             <h2 className="text-lg font-semibold text-gray-900">Grad der Automatisierung</h2>
+            <p className="text-sm text-gray-600">
+              Wie stark greift die KI in Entscheidungen ein? Je hoeher der Automatisierungsgrad, desto strenger die regulatorischen Anforderungen.
+            </p>
             {[
-              { value: 'assistive', label: 'Assistiv', desc: 'KI unterstuetzt, Mensch entscheidet immer' },
-              { value: 'semi_automated', label: 'Teilautomatisiert', desc: 'KI schlaegt vor, Mensch prueft und bestaetigt' },
-              { value: 'fully_automated', label: 'Vollautomatisiert', desc: 'KI entscheidet autonom, Mensch ueberwacht nur' },
+              {
+                value: 'assistive',
+                label: 'Assistiv (Mensch entscheidet)',
+                desc: 'Die KI liefert Informationen oder Vorschlaege, aber ein Mensch trifft immer die finale Entscheidung.',
+                examples: 'Rechtschreibkorrektur, Suchvorschlaege, Zusammenfassungen, Uebersetzungshilfe',
+              },
+              {
+                value: 'semi_automated',
+                label: 'Teilautomatisiert (Mensch prueft)',
+                desc: 'Die KI erstellt Ergebnisse oder Entwuerfe, die ein Mensch vor der Ausfuehrung prueft und bestaetigt.',
+                examples: 'E-Mail-Entwuerfe mit manueller Freigabe, vorgeschlagene Diagnosen mit Arztbestaetigung, KI-generierte Vertraege mit juristischer Pruefung',
+              },
+              {
+                value: 'fully_automated',
+                label: 'Vollautomatisiert (KI entscheidet)',
+                desc: 'Die KI trifft Entscheidungen eigenstaendig. Ein Mensch ueberwacht nur stichprobenartig oder bei Ausnahmen.',
+                examples: 'Automatische Kreditentscheidungen, automatisierte Bewerbungs-Vorauswahl, autonome Chatbot-Antworten ohne Pruefung',
+              },
             ].map(item => (
               <label
                 key={item.value}
@@ -450,9 +511,20 @@ function NewUseCasePageInner() {
                 <div>
                   <div className="font-medium text-gray-900">{item.label}</div>
                   <div className="text-sm text-gray-500">{item.desc}</div>
+                  <div className="text-xs text-gray-400 mt-1">Beispiele: {item.examples}</div>
                 </div>
               </label>
             ))}
+
+            {/* Info-Box: Warum ist das wichtig? */}
+            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 text-sm text-blue-800">
+              <div className="font-medium mb-1">Warum ist das wichtig?</div>
+              <p>
+                Art. 22 DSGVO regelt automatisierte Einzelentscheidungen. Vollautomatisierte Systeme, die Personen
+                erheblich beeinflussen (z.B. Kreditvergabe, Bewerbungsauswahl), unterliegen strengen Auflagen:
+                Informationspflicht, Recht auf menschliche Ueberpruefung und Anfechtungsmoeglichkeit.
+              </p>
+            </div>
           </div>
         )}
 
@@ -488,26 +560,93 @@ function NewUseCasePageInner() {
                 <option value="other">Andere</option>
               </select>
             </div>
-            <h3 className="text-sm font-medium text-gray-700 mt-4">Modell-Nutzung</h3>
+
+            <h3 className="text-sm font-medium text-gray-700 mt-4">Wie wird das KI-Modell genutzt?</h3>
+            <p className="text-sm text-gray-500">Waehlen Sie alle zutreffenden Optionen. Klicken Sie auf die Info-Symbole fuer Erklaerungen.</p>
+
             {[
-              { key: 'model_inference', label: 'Inferenz', desc: 'Vortrainiertes Modell nutzen (Standard)' },
-              { key: 'model_rag', label: 'RAG (Retrieval-Augmented)', desc: 'Eigene Daten als Kontext bereitstellen' },
-              { key: 'model_finetune', label: 'Fine-Tuning', desc: 'Modell mit eigenen Daten nachtrainieren' },
-              { key: 'model_training', label: 'Training', desc: 'Eigenes Modell von Grund auf trainieren' },
+              {
+                key: 'model_inference',
+                label: 'Inferenz',
+                desc: 'Ein fertiges, vortrainiertes Modell wird direkt genutzt — z.B. ChatGPT, Claude, DeepL. Das Modell wird nicht veraendert.',
+                example: 'Sie nutzen die OpenAI API, um Texte zusammenzufassen.',
+              },
+              {
+                key: 'model_rag',
+                label: 'RAG (Retrieval-Augmented Generation)',
+                desc: 'Das Modell erhaelt zusaetzlichen Kontext aus Ihren eigenen Dokumenten (z.B. Wissensdatenbank, Handbuecher). Das Modell selbst wird nicht veraendert.',
+                example: 'Ein Chatbot durchsucht Ihre Firmen-FAQ und beantwortet Fragen basierend auf den gefundenen Dokumenten.',
+              },
+              {
+                key: 'model_finetune',
+                label: 'Fine-Tuning',
+                desc: 'Ein bestehendes Modell wird mit Ihren eigenen Daten nachtrainiert, um es an Ihre spezifischen Anforderungen anzupassen. Die Originaldaten fliessen ins Modell ein.',
+                example: 'Sie trainieren GPT-3.5 mit 1.000 Ihrer Support-Tickets, damit es Ihren Kommunikationsstil uebernimmt.',
+              },
+              {
+                key: 'model_training',
+                label: 'Training (eigenes Modell)',
+                desc: 'Sie trainieren ein komplett eigenes KI-Modell von Grund auf mit Ihren Daten. Hoechster Kontrollgrad, aber auch hoechster Aufwand und Datenrisiko.',
+                example: 'Sie trainieren ein eigenes Bilderkennungsmodell fuer Qualitaetskontrolle in der Produktion.',
+              },
             ].map(item => (
-              <label key={item.key} className="flex items-start gap-3 p-3 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100">
-                <input
-                  type="checkbox"
-                  checked={form[item.key as keyof typeof form] as boolean}
-                  onChange={e => updateForm({ [item.key]: e.target.checked })}
-                  className="mt-1 rounded border-gray-300 text-purple-600 focus:ring-purple-500"
-                />
-                <div>
-                  <div className="font-medium text-gray-900">{item.label}</div>
-                  <div className="text-sm text-gray-500">{item.desc}</div>
-                </div>
-              </label>
+              <div key={item.key} className="bg-gray-50 rounded-lg border border-gray-200 overflow-hidden">
+                <label className="flex items-start gap-3 p-3 cursor-pointer hover:bg-gray-100">
+                  <input
+                    type="checkbox"
+                    checked={form[item.key as keyof typeof form] as boolean}
+                    onChange={e => updateForm({ [item.key]: e.target.checked })}
+                    className="mt-1 rounded border-gray-300 text-purple-600 focus:ring-purple-500"
+                  />
+                  <div>
+                    <div className="font-medium text-gray-900">{item.label}</div>
+                    <div className="text-sm text-gray-500">{item.desc}</div>
+                    <div className="text-xs text-purple-600 mt-1 bg-purple-50 inline-block px-2 py-0.5 rounded">
+                      Beispiel: {item.example}
+                    </div>
+                  </div>
+                </label>
+              </div>
             ))}
+
+            {/* Info-Box: Begriffe erklaert */}
+            <details className="bg-amber-50 border border-amber-200 rounded-lg overflow-hidden">
+              <summary className="px-4 py-3 text-sm font-medium text-amber-800 cursor-pointer hover:bg-amber-100">
+                Begriffe erklaert: ML, DL, NLP, LLM &mdash; Was bedeutet das?
+              </summary>
+              <div className="px-4 pb-4 space-y-3 text-sm text-amber-900">
+                <div>
+                  <span className="font-semibold">ML (Machine Learning)</span> &mdash;
+                  Computer lernt Muster aus Daten, statt explizit programmiert zu werden.
+                  Beispiel: Spam-Filter, der aus markierten E-Mails lernt.
+                </div>
+                <div>
+                  <span className="font-semibold">DL (Deep Learning)</span> &mdash;
+                  Spezielle Form von ML mit kuenstlichen neuronalen Netzen (viele Schichten).
+                  Beispiel: Bilderkennung, Spracherkennung, Textgenerierung.
+                </div>
+                <div>
+                  <span className="font-semibold">NLP (Natural Language Processing)</span> &mdash;
+                  KI, die menschliche Sprache versteht und verarbeitet.
+                  Beispiel: ChatGPT, DeepL, Sentiment-Analyse von Kundenbewertungen.
+                </div>
+                <div>
+                  <span className="font-semibold">LLM (Large Language Model)</span> &mdash;
+                  Sehr grosses Sprachmodell, trainiert auf riesigen Textmengen. Kann Texte verstehen, generieren und uebersetzen.
+                  Beispiel: GPT-4, Claude, Llama, Gemini.
+                </div>
+                <div>
+                  <span className="font-semibold">RAG (Retrieval-Augmented Generation)</span> &mdash;
+                  Das LLM erhaelt vor der Antwort relevante Dokumente aus einer Datenbank als Kontext.
+                  Vorteil: Aktuelle und firmenspezifische Antworten, ohne das Modell neu zu trainieren.
+                </div>
+                <div>
+                  <span className="font-semibold">Fine-Tuning</span> &mdash;
+                  Ein bestehendes Modell wird mit eigenen Daten weiter trainiert, um es zu spezialisieren.
+                  Achtung: Ihre Trainingsdaten werden Teil des Modells.
+                </div>
+              </div>
+            </details>
           </div>
         )}