feat: Zweck-Vokabular auf 12 Kategorien erweitert, Werkzeug-Formular im Enterprise-Look überarbeitet

Sechs neue Zweck-Kategorien (Datenanalyse, Video, Audio/Sprache,
Kundenservice/Chatbot, Präsentation/Design, Automatisierung/Agenten)
ergänzen die ursprünglichen sechs — deckt jetzt die tatsächliche
Bandbreite an Einsatzgebieten ab statt nur klassischer Wissensarbeit.

Werkzeug-Formular (Betreiber + Mandant, gleiche Vorlage) neu strukturiert:
Karten-Layout mit thematischen Abschnitten, 2-Spalten-Grid für kurze
Felder, Chip-Gruppen statt langer Checkbox-Listen, abgesetzte
Gefahrenzone für den Löschen-Button. Dabei einen vorbestehenden Bug
gefunden und behoben: das Lösch-Formular war fest auf die
Betreiber-Route verdrahtet, obwohl dieselbe Vorlage auch vom
Mandanten-Formular genutzt wird.

internal/web/betreiber_werkzeug_handlers.go

@@ -26,12 +26,17 @@ func istGueltigerVerarbeitungsort(v string) bool {
 }
 
 // gueltigeZwecke ist das kontrollierte Vokabular für "geeignete Zwecke"
-// — exakt die sechs Zweck-Kategorien aus dem Fragebogen/der geplanten
-// Zweckabgleich-Stufe (siehe CLAUDE.md, Bewertungslogik Schritt 3).
-// Vorher war das Feld Freitext; ein Tippfehler ("Text" statt
-// "Textgenerierung") hätte den künftigen automatischen Zweckabgleich
-// unbemerkt kaputt gemacht.
-var gueltigeZwecke = []string{"Textgenerierung", "Übersetzung", "Code", "Bild", "Transkription", "Recherche"}
+// (siehe CLAUDE.md, Bewertungslogik Schritt 3). Vorher war das Feld
+// Freitext; ein Tippfehler ("Text" statt "Textgenerierung") hätte den
+// künftigen automatischen Zweckabgleich unbemerkt kaputt gemacht. Am
+// 2026-08-31 von sechs auf zwölf Kategorien erweitert (bewusste
+// v1-Scope-Entscheidung überarbeitet, nicht stillschweigend geändert)
+// — die ursprünglichen sechs deckten nur klassische Wissensarbeit ab,
+// nicht Datenanalyse/Video/Audio/Kundenservice/Design/Automatisierung.
+var gueltigeZwecke = []string{
+	"Textgenerierung", "Übersetzung", "Code", "Bild", "Transkription", "Recherche",
+	"Datenanalyse", "Video", "Audio/Sprache", "Kundenservice/Chatbot", "Präsentation/Design", "Automatisierung/Agenten",
+}
 
 func istGueltigerZweck(v string) bool {
 	for _, z := range gueltigeZwecke {

internal/web/static/app.css

@@ -555,6 +555,126 @@ button.entfernen {
   margin: 4px 12px 4px 0;
 }
 
+/* ── Formular-Karten (Enterprise-Look, siehe design/enterprise.css
+   .ant-card/.ant-form-item) ─────────────────────────────────────────
+   Ersetzt "ein Formular = eine flache, ununterbrochene Spalte" durch
+   klar abgegrenzte Abschnitte mit Titel und ein Grid für kurze Felder
+   nebeneinander statt jedes Feld einzeln untereinander. */
+.form-card {
+  background: #fff;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  margin-bottom: 24px;
+  overflow: hidden;
+}
+
+.form-card form {
+  margin-bottom: 0;
+}
+
+.form-section {
+  border: none;
+  margin: 0;
+  padding: 20px;
+  min-width: 0;
+}
+
+.form-section + .form-section {
+  border-top: 1px solid var(--color-border);
+}
+
+.form-section > legend {
+  padding: 0 0 12px;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--color-heading);
+  width: 100%;
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0 16px;
+}
+
+@media (min-width: 640px) {
+  .form-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .form-grid .form-full {
+    grid-column: 1 / -1;
+  }
+}
+
+/* Checkbox-/Radio-Gruppen als Chips statt einer langen
+   Untereinander-Liste — v. a. bei den zwölf Zweck-Kategorien war das
+   vorher eine kaum überblickbare Spalte. */
+.chip-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.chip-group label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 0;
+  padding: 7px 14px;
+  border: 1px solid var(--color-border);
+  border-radius: 999px;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--color-text);
+  background: var(--color-bg);
+  cursor: pointer;
+}
+
+.chip-group input[type="checkbox"],
+.chip-group input[type="radio"] {
+  width: auto;
+  min-height: 0;
+  margin: 0;
+}
+
+.chip-group label:has(input:checked) {
+  border-color: var(--branding-primary);
+  background: rgba(22, 119, 255, 0.08);
+  color: var(--branding-primary);
+}
+
+.form-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 16px 20px;
+  background: var(--color-bg);
+}
+
+.form-actions form,
+.form-actions button {
+  margin: 0;
+}
+
+.form-gefahrenzone {
+  border-top: 1px solid var(--color-border);
+  padding: 16px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.form-gefahrenzone form {
+  margin: 0;
+}
+
 .fragebogen fieldset input[type="radio"] {
   width: auto;
   min-height: 0;

internal/web/templates/betreiber_werkzeug_form.html

@@ -12,61 +12,107 @@
   Pflicht.
 </p>
 {{if .Error}}<p class="fehler">{{.Error}}</p>{{end}}
+<div class="form-card">
 <form method="post" action="{{if .ID}}{{.ActionBase}}/{{.ID}}{{else}}{{.ActionBase}}{{end}}">
-  <label for="name">Name</label>
-  <input type="text" id="name" name="name" value="{{.Name}}" required>
-
-  <label for="anbieter">Anbieter</label>
-  <input type="text" id="anbieter" name="anbieter" value="{{.Anbieter}}" required>
-
-  <fieldset>
-    <legend>Verarbeitungsort</legend>
-    {{$gewaehlt := .Verarbeitungsort}}
-    {{range .Verarbeitungsorte}}
-    <label><input type="radio" name="verarbeitungsort" value="{{.}}" {{if eq . $gewaehlt}}checked{{end}} required> {{.}}</label>
-    {{end}}
+  <fieldset class="form-section">
+    <legend>Grunddaten</legend>
+    <div class="form-grid">
+      <div>
+        <label for="name">Name</label>
+        <input type="text" id="name" name="name" value="{{.Name}}" required>
+      </div>
+      <div>
+        <label for="anbieter">Anbieter</label>
+        <input type="text" id="anbieter" name="anbieter" value="{{.Anbieter}}" required>
+      </div>
+      <div class="form-full">
+        <label>Verarbeitungsort</label>
+        {{$gewaehlt := .Verarbeitungsort}}
+        <div class="chip-group">
+          {{range .Verarbeitungsorte}}
+          <label><input type="radio" name="verarbeitungsort" value="{{.}}" {{if eq . $gewaehlt}}checked{{end}} required> {{.}}</label>
+          {{end}}
+        </div>
+      </div>
+    </div>
   </fieldset>
 
-  <label><input type="checkbox" name="avv_verfuegbar" {{if .AVVVerfuegbar}}checked{{end}}> AVV verfügbar</label>
-  <label for="avv_url">AVV-URL</label>
-  <input type="text" id="avv_url" name="avv_url" value="{{.AVVURL}}">
-
-  <label><input type="checkbox" name="training_opt_out" {{if .TrainingOptOut}}checked{{end}}> Training-Opt-out möglich</label>
-  <label><input type="checkbox" name="training_standard" {{if .TrainingStandard}}checked{{end}}> Training standardmäßig aus</label>
-
-  <label for="aufbewahrung_tage">Aufbewahrung (Tage, leer lassen wenn vom Anbieter nicht beziffert)</label>
-  <input type="number" id="aufbewahrung_tage" name="aufbewahrung_tage" min="0" value="{{.AufbewahrungTage}}">
-
-  <label for="zertifizierungen">Zertifizierungen (kommagetrennt)</label>
-  <input type="text" id="zertifizierungen" name="zertifizierungen" value="{{.Zertifizierungen}}">
-
-  <label for="subprozessoren">Subprozessoren (kommagetrennt, z. B. Anthropic, AWS)</label>
-  <input type="text" id="subprozessoren" name="subprozessoren" value="{{.Subprozessoren}}">
-
-  <fieldset>
-    <legend>Geeignete Zwecke</legend>
-    {{range .ZweckeOptionen}}
-    <label><input type="checkbox" name="geeignete_zwecke" value="{{.}}" {{if index $.ZweckeAusgewaehlt .}}checked{{end}}> {{.}}</label>
-    {{end}}
+  <fieldset class="form-section">
+    <legend>Rechtliches &amp; Datenschutz</legend>
+    <div class="form-grid">
+      <div class="form-full">
+        <label>Zusicherungen</label>
+        <div class="chip-group">
+          <label><input type="checkbox" name="avv_verfuegbar" {{if .AVVVerfuegbar}}checked{{end}}> AVV verfügbar</label>
+          <label><input type="checkbox" name="training_opt_out" {{if .TrainingOptOut}}checked{{end}}> Training-Opt-out möglich</label>
+          <label><input type="checkbox" name="training_standard" {{if .TrainingStandard}}checked{{end}}> Training standardmäßig aus</label>
+        </div>
+      </div>
+      <div class="form-full">
+        <label for="avv_url">AVV-URL</label>
+        <input type="text" id="avv_url" name="avv_url" value="{{.AVVURL}}">
+      </div>
+      <div>
+        <label for="aufbewahrung_tage">Aufbewahrung (Tage, leer lassen wenn vom Anbieter nicht beziffert)</label>
+        <input type="number" id="aufbewahrung_tage" name="aufbewahrung_tage" min="0" value="{{.AufbewahrungTage}}">
+      </div>
+      <div>
+        <label for="zertifizierungen">Zertifizierungen (kommagetrennt)</label>
+        <input type="text" id="zertifizierungen" name="zertifizierungen" value="{{.Zertifizierungen}}">
+      </div>
+      <div class="form-full">
+        <label for="subprozessoren">Subprozessoren (kommagetrennt, z. B. Anthropic, AWS)</label>
+        <input type="text" id="subprozessoren" name="subprozessoren" value="{{.Subprozessoren}}">
+      </div>
+    </div>
   </fieldset>
 
-  <label for="einschraenkungen">Einschränkungen (kommagetrennt)</label>
-  <input type="text" id="einschraenkungen" name="einschraenkungen" value="{{.Einschraenkungen}}">
+  <fieldset class="form-section">
+    <legend>Einsatzbereich</legend>
+    <div class="form-grid">
+      <div class="form-full">
+        <label>Geeignete Zwecke</label>
+        <div class="chip-group">
+          {{range .ZweckeOptionen}}
+          <label><input type="checkbox" name="geeignete_zwecke" value="{{.}}" {{if index $.ZweckeAusgewaehlt .}}checked{{end}}> {{.}}</label>
+          {{end}}
+        </div>
+      </div>
+      <div class="form-full">
+        <label for="einschraenkungen">Einschränkungen (kommagetrennt)</label>
+        <input type="text" id="einschraenkungen" name="einschraenkungen" value="{{.Einschraenkungen}}">
+      </div>
+    </div>
+  </fieldset>
 
-  <label for="letzte_pruefung">Letzte Prüfung</label>
-  <input type="date" id="letzte_pruefung" name="letzte_pruefung" value="{{.LetztePruefung}}" required>
+  <fieldset class="form-section">
+    <legend>Beleg</legend>
+    <div class="form-grid">
+      <div>
+        <label for="letzte_pruefung">Letzte Prüfung</label>
+        <input type="date" id="letzte_pruefung" name="letzte_pruefung" value="{{.LetztePruefung}}" required>
+      </div>
+      <div>
+        <label for="quelle">Quelle (Beleg)</label>
+        <input type="text" id="quelle" name="quelle" value="{{.Quelle}}" required>
+      </div>
+    </div>
+  </fieldset>
 
-  <label for="quelle">Quelle (Beleg)</label>
-  <input type="text" id="quelle" name="quelle" value="{{.Quelle}}" required>
-
-  <button type="submit">Speichern</button>
+  <div class="form-actions">
+    <button type="submit">Speichern</button>
+  </div>
 </form>
 {{if .ID}}
-<form method="post" action="/betreiber/werkzeuge/{{.ID}}/loeschen" onsubmit="return confirm('Werkzeug wirklich löschen?')">
-  <button type="submit" class="entfernen">Werkzeug löschen</button>
-</form>
+<div class="form-gefahrenzone">
+  <span class="hinweis">Ein gelöschtes Werkzeug kann nicht wiederhergestellt werden.</span>
+  <form method="post" action="{{.ActionBase}}/{{.ID}}/loeschen" onsubmit="return confirm('Werkzeug wirklich löschen?')">
+    <button type="submit" class="entfernen">Werkzeug löschen</button>
+  </form>
+</div>
 {{end}}
 </div>
+</div>
 </body>
 </html>
 {{end}}