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 = [
+const JURISDICTION_LABELS: Record<string, string> = {
-  { value: "", label: "-- Typ wählen --" },
+  UPC: "UPC-Verfahren",
-  { value: "INF", label: "Verletzungsklage (INF)" },
+  DE: "Deutsche Patentverfahren",
-  { 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" },
-];
 
 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 value="">-- Typ wählen --</option>
-              <option key={o.value} value={o.value}>
+            {(() => {
-                {o.label}
+              const grouped = new Map<string, ProceedingType[]>();
-              </option>
+              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>

frontend/src/components/deadlines/DeadlineCalculator.tsx

@@ -85,11 +85,27 @@ export function DeadlineCalculator() {
               className={inputClass}
             >
               <option value="">Bitte wählen...</option>
-              {proceedingTypes?.map((pt) => (
+              {(() => {
-                <option key={pt.id} value={pt.code}>
+                const grouped = new Map<string, ProceedingType[]>();
-                  {pt.name} ({pt.code})
+                for (const pt of proceedingTypes ?? []) {
-                </option>
+                  const key = pt.jurisdiction ?? "Sonstige";
-              ))}
+                  if (!grouped.has(key)) grouped.set(key, []);
+                  grouped.get(key)!.push(pt);
+                }
+                const labels: Record<string, string> = {
+                  UPC: "UPC-Verfahren",
+                  DE: "Deutsche Patentverfahren",
+                };
+                return Array.from(grouped.entries()).map(([jurisdiction, types]) => (
+                  <optgroup key={jurisdiction} label={labels[jurisdiction] ?? jurisdiction}>
+                    {types.map((pt) => (
+                      <option key={pt.id} value={pt.code}>
+                        {pt.name} ({pt.code})
+                      </option>
+                    ))}
+                  </optgroup>
+                ));
+              })()}
             </select>
           </div>
           <div>

frontend/src/components/deadlines/DeadlineWizard.tsx

@@ -276,32 +276,53 @@ export function DeadlineWizard() {
           )}
         </div>
 
-        <div className="mt-4 grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-6">
+        <div className="mt-4 space-y-4">
           {typesLoading ? (
-            <div className="col-span-full flex justify-center py-4">
+            <div className="flex justify-center py-4">
               <Loader2 className="h-5 w-5 animate-spin text-neutral-400" />
             </div>
           ) : (
-            proceedingTypes?.map((pt) => (
+            (() => {
-              <button
+              const grouped = new Map<string, ProceedingType[]>();
-                key={pt.id}
+              for (const pt of proceedingTypes ?? []) {
-                onClick={() => handleTypeSelect(pt.code)}
+                const key = pt.jurisdiction ?? "Sonstige";
-                className={`rounded-lg border px-3 py-2.5 text-left transition-all ${
+                if (!grouped.has(key)) grouped.set(key, []);
-                  selectedType === pt.code
+                grouped.get(key)!.push(pt);
-                    ? "border-neutral-900 bg-neutral-900 text-white shadow-sm"
+              }
-                    : "border-neutral-200 bg-white text-neutral-700 hover:border-neutral-400 hover:bg-neutral-50"
+              const labels: Record<string, string> = {
-                }`}
+                UPC: "UPC-Verfahren",
-              >
+                DE: "Deutsche Patentverfahren",
-                <div className="flex items-center gap-1.5">
+              };
-                  <div
+              return Array.from(grouped.entries()).map(([jurisdiction, types]) => (
-                    className="h-2 w-2 rounded-full"
+                <div key={jurisdiction}>
-                    style={{ backgroundColor: pt.default_color }}
+                  <div className="mb-2 text-xs font-medium text-neutral-500">
-                  />
+                    {labels[jurisdiction] ?? jurisdiction}
-                  <span className="text-xs font-semibold">{pt.code}</span>
+                  </div>
+                  <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-6">
+                    {types.map((pt) => (
+                      <button
+                        key={pt.id}
+                        onClick={() => handleTypeSelect(pt.code)}
+                        className={`rounded-lg border px-3 py-2.5 text-left transition-all ${
+                          selectedType === pt.code
+                            ? "border-neutral-900 bg-neutral-900 text-white shadow-sm"
+                            : "border-neutral-200 bg-white text-neutral-700 hover:border-neutral-400 hover:bg-neutral-50"
+                        }`}
+                      >
+                        <div className="flex items-center gap-1.5">
+                          <div
+                            className="h-2 w-2 rounded-full"
+                            style={{ backgroundColor: pt.default_color }}
+                          />
+                          <span className="text-xs font-semibold">{pt.code}</span>
+                        </div>
+                        <div className="mt-1 text-xs leading-tight opacity-80">{pt.name}</div>
+                      </button>
+                    ))}
+                  </div>
                 </div>
-                <div className="mt-1 text-xs leading-tight opacity-80">{pt.name}</div>
+              ));
-              </button>
+            })()
-            ))
           )}
         </div>
       </div>
@@ -444,7 +465,7 @@ export function DeadlineWizard() {
             <Scale className="h-6 w-6 text-neutral-400" />
           </div>
           <p className="mt-3 text-sm font-medium text-neutral-700">
-            UPC-Fristenbestimmung
+            Fristenbestimmung
           </p>
           <p className="mt-1 max-w-sm text-xs text-neutral-500">
             Waehlen Sie die Verfahrensart und geben Sie das Datum des ausloesenden Ereignisses ein.