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/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;