feat: group proceeding types by jurisdiction in UI dropdowns

- DeadlineCalculator: use optgroup to group by UPC/DE
- DeadlineWizard: add section headers for each jurisdiction
- CaseForm: replace hardcoded TYPE_OPTIONS with API-fetched
  proceeding types grouped by jurisdiction
- Added 3 new DE proceeding types to DB: DE_PATENT,
  DE_NULLITY, DE_OPPOSITION

frontend/src/components/cases/CaseForm.tsx

@@ -1,16 +1,14 @@
 "use client";
 
 import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { api } from "@/lib/api";
+import type { ProceedingType } from "@/lib/types";
 
-const TYPE_OPTIONS = [
-  { value: "", label: "-- Typ wählen --" },
-  { value: "INF", label: "Verletzungsklage (INF)" },
-  { value: "REV", label: "Widerruf (REV)" },
-  { value: "CCR", label: "Einstweilige Verfügung (CCR)" },
-  { value: "APP", label: "Berufung (APP)" },
-  { value: "PI", label: "Vorläufiger Rechtsschutz (PI)" },
-  { value: "ZPO_CIVIL", label: "ZPO Zivilverfahren" },
-];
+const JURISDICTION_LABELS: Record<string, string> = {
+  UPC: "UPC-Verfahren",
+  DE: "Deutsche Patentverfahren",
+};
 
 export interface CaseFormData {
   case_number: string;
@@ -34,6 +32,10 @@ export function CaseForm({
   isSubmitting,
   submitLabel = "Akte anlegen",
 }: CaseFormProps) {
+  const { data: proceedingTypes } = useQuery({
+    queryKey: ["proceeding-types"],
+    queryFn: () => api.get<ProceedingType[]>("/proceeding-types"),
+  });
   const [form, setForm] = useState<CaseFormData>({
     case_number: initialData?.case_number ?? "",
     title: initialData?.title ?? "",
@@ -139,11 +141,24 @@ export function CaseForm({
             onChange={(e) => update("case_type", e.target.value)}
             className={inputClass}
           >
-            {TYPE_OPTIONS.map((o) => (
-              <option key={o.value} value={o.value}>
-                {o.label}
-              </option>
-            ))}
+            <option value="">-- Typ wählen --</option>
+            {(() => {
+              const grouped = new Map<string, ProceedingType[]>();
+              for (const pt of proceedingTypes ?? []) {
+                const key = pt.jurisdiction ?? "Sonstige";
+                if (!grouped.has(key)) grouped.set(key, []);
+                grouped.get(key)!.push(pt);
+              }
+              return Array.from(grouped.entries()).map(([jurisdiction, types]) => (
+                <optgroup key={jurisdiction} label={JURISDICTION_LABELS[jurisdiction] ?? jurisdiction}>
+                  {types.map((pt) => (
+                    <option key={pt.id} value={pt.code}>
+                      {pt.name} ({pt.code})
+                    </option>
+                  ))}
+                </optgroup>
+              ));
+            })()}
           </select>
         </div>
         <div>