feat: UI polish — responsive, loading/empty/error states, German fixes (Phase 3Q)

- Responsive sidebar: collapses on mobile with hamburger menu, slide-in animation
- Skeleton loaders: dashboard cards, case table, case detail page
- Empty states: friendly messages with icons for cases, deadlines, parties, documents
- Error states: retry button on dashboard, proper error message on case not found
- Form validation: inline error messages on case creation form
- German language: fix all missing umlauts (Zurück, wählen, Anhängig, Verfügung, etc.)
- Status labels: display German translations instead of raw status values
- Transitions: fade-in animations on page load, hover/transition-colors on all interactive elements
- Focus states: focus-visible ring for keyboard accessibility
- Mobile layout: stacking for filters, forms, tabs; horizontal scroll for tables
- Extraction results: card layout on mobile, table on desktop
- Missing types: add DashboardData, DeadlineSummary, CaseSummary, ExtractedDeadline etc.
- Fix QuickActions links to use correct routes (/cases/new, /ai/extract)
- Consistent input focus styles across all forms

backend/internal/handlers/deadline_rules.go

@@ -39,6 +39,17 @@ func (h *DeadlineRuleHandlers) List(w http.ResponseWriter, r *http.Request) {
 	writeJSON(w, http.StatusOK, rules)
 }
 
+// ListProceedingTypes handles GET /api/proceeding-types
+func (h *DeadlineRuleHandlers) ListProceedingTypes(w http.ResponseWriter, r *http.Request) {
+	types, err := h.rules.ListProceedingTypes()
+	if err != nil {
+		writeError(w, http.StatusInternalServerError, "failed to list proceeding types")
+		return
+	}
+
+	writeJSON(w, http.StatusOK, types)
+}
+
 // GetRuleTree handles GET /api/deadline-rules/{type}
 // {type} is the proceeding type code (e.g., "INF", "REV")
 func (h *DeadlineRuleHandlers) GetRuleTree(w http.ResponseWriter, r *http.Request) {

backend/internal/handlers/deadlines.go

@@ -20,6 +20,23 @@ func NewDeadlineHandlers(ds *services.DeadlineService, db *sqlx.DB) *DeadlineHan
 	return &DeadlineHandlers{deadlines: ds, db: db}
 }
 
+// ListAll handles GET /api/deadlines
+func (h *DeadlineHandlers) ListAll(w http.ResponseWriter, r *http.Request) {
+	tenantID, err := resolveTenant(r, h.db)
+	if err != nil {
+		handleTenantError(w, err)
+		return
+	}
+
+	deadlines, err := h.deadlines.ListAll(tenantID)
+	if err != nil {
+		writeError(w, http.StatusInternalServerError, "failed to list deadlines")
+		return
+	}
+
+	writeJSON(w, http.StatusOK, deadlines)
+}
+
 // ListForCase handles GET /api/cases/{caseID}/deadlines
 func (h *DeadlineHandlers) ListForCase(w http.ResponseWriter, r *http.Request) {
 	tenantID, err := resolveTenant(r, h.db)

backend/internal/router/router.go

@@ -81,6 +81,7 @@ func New(db *sqlx.DB, authMW *auth.Middleware, cfg *config.Config) http.Handler
 	scoped.HandleFunc("DELETE /api/parties/{partyId}", partyH.Delete)
 
 	// Deadlines
+	scoped.HandleFunc("GET /api/deadlines", deadlineH.ListAll)
 	scoped.HandleFunc("GET /api/cases/{caseID}/deadlines", deadlineH.ListForCase)
 	scoped.HandleFunc("POST /api/cases/{caseID}/deadlines", deadlineH.Create)
 	scoped.HandleFunc("PUT /api/deadlines/{deadlineID}", deadlineH.Update)
@@ -90,6 +91,7 @@ func New(db *sqlx.DB, authMW *auth.Middleware, cfg *config.Config) http.Handler
 	// Deadline rules (reference data)
 	scoped.HandleFunc("GET /api/deadline-rules", ruleH.List)
 	scoped.HandleFunc("GET /api/deadline-rules/{type}", ruleH.GetRuleTree)
+	scoped.HandleFunc("GET /api/proceeding-types", ruleH.ListProceedingTypes)
 
 	// Deadline calculator
 	scoped.HandleFunc("POST /api/deadlines/calculate", calcH.Calculate)

backend/internal/services/deadline_service.go

@@ -21,6 +21,23 @@ func NewDeadlineService(db *sqlx.DB) *DeadlineService {
 	return &DeadlineService{db: db}
 }
 
+// ListAll returns all deadlines for a tenant, ordered by due_date
+func (s *DeadlineService) ListAll(tenantID uuid.UUID) ([]models.Deadline, error) {
+	query := `SELECT id, tenant_id, case_id, title, description, due_date, original_due_date,
+	                 warning_date, source, rule_id, status, completed_at,
+	                 caldav_uid, caldav_etag, notes, created_at, updated_at
+	          FROM deadlines
+	          WHERE tenant_id = $1
+	          ORDER BY due_date ASC`
+
+	var deadlines []models.Deadline
+	err := s.db.Select(&deadlines, query, tenantID)
+	if err != nil {
+		return nil, fmt.Errorf("listing all deadlines: %w", err)
+	}
+	return deadlines, nil
+}
+
 // ListForCase returns all deadlines for a case, scoped to tenant
 func (s *DeadlineService) ListForCase(tenantID, caseID uuid.UUID) ([]models.Deadline, error) {
 	query := `SELECT id, tenant_id, case_id, title, description, due_date, original_due_date,

frontend/bun.lock

@@ -13,6 +13,7 @@
         "next": "15.5.14",
         "react": "19.1.0",
         "react-dom": "19.1.0",
+        "react-dropzone": "^15.0.0",
         "sonner": "^2.0.7",
       },
       "devDependencies": {
@@ -315,6 +316,8 @@
 
     "async-function": ["async-function@1.0.0", "", {}, "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA=="],
 
+    "attr-accept": ["attr-accept@2.2.5", "", {}, "sha512-0bDNnY/u6pPwHDMoF0FieU354oBi0a8rD9FcsLwzcGWbc8KS8KPIi7y+s13OlVY+gMWc/9xEMUgNE6Qm8ZllYQ=="],
+
     "available-typed-arrays": ["available-typed-arrays@1.0.7", "", { "dependencies": { "possible-typed-array-names": "^1.0.0" } }, "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ=="],
 
     "axe-core": ["axe-core@4.11.1", "", {}, "sha512-BASOg+YwO2C+346x3LZOeoovTIoTrRqEsqMa6fmfAV0P+U9mFr9NsyOEpiYvFjbc64NMrSswhV50WdXzdb/Z5A=="],
@@ -445,6 +448,8 @@
 
     "file-entry-cache": ["file-entry-cache@8.0.0", "", { "dependencies": { "flat-cache": "^4.0.0" } }, "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ=="],
 
+    "file-selector": ["file-selector@2.1.2", "", { "dependencies": { "tslib": "^2.7.0" } }, "sha512-QgXo+mXTe8ljeqUFaX3QVHc5osSItJ/Km+xpocx0aSqWGMSCf6qYs/VnzZgS864Pjn5iceMRFigeAV7AfTlaig=="],
+
     "fill-range": ["fill-range@7.1.1", "", { "dependencies": { "to-regex-range": "^5.0.1" } }, "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg=="],
 
     "find-up": ["find-up@5.0.0", "", { "dependencies": { "locate-path": "^6.0.0", "path-exists": "^4.0.0" } }, "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng=="],
@@ -695,6 +700,8 @@
 
     "react-dom": ["react-dom@19.1.0", "", { "dependencies": { "scheduler": "^0.26.0" }, "peerDependencies": { "react": "^19.1.0" } }, "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g=="],
 
+    "react-dropzone": ["react-dropzone@15.0.0", "", { "dependencies": { "attr-accept": "^2.2.4", "file-selector": "^2.1.0", "prop-types": "^15.8.1" }, "peerDependencies": { "react": ">= 16.8 || 18.0.0" } }, "sha512-lGjYV/EoqEjEWPnmiSvH4v5IoIAwQM2W4Z1C0Q/Pw2xD0eVzKPS359BQTUMum+1fa0kH2nrKjuavmTPOGhpLPg=="],
+
     "react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
 
     "reflect.getprototypeof": ["reflect.getprototypeof@1.0.10", "", { "dependencies": { "call-bind": "^1.0.8", "define-properties": "^1.2.1", "es-abstract": "^1.23.9", "es-errors": "^1.3.0", "es-object-atoms": "^1.0.0", "get-intrinsic": "^1.2.7", "get-proto": "^1.0.1", "which-builtin-type": "^1.2.1" } }, "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw=="],

frontend/package.json

@@ -17,6 +17,7 @@
     "next": "15.5.14",
     "react": "19.1.0",
     "react-dom": "19.1.0",
+    "react-dropzone": "^15.0.0",
     "sonner": "^2.0.7"
   },
   "devDependencies": {

frontend/src/app/(app)/ai/extract/page.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
+import { toast } from "sonner";
+import { Brain } from "lucide-react";
+import { api } from "@/lib/api";
+import type {
+  Case,
+  ExtractedDeadline,
+  ExtractionResponse,
+  PaginatedResponse,
+} from "@/lib/types";
+import { ExtractionForm } from "@/components/ai/ExtractionForm";
+import { ExtractionResults } from "@/components/ai/ExtractionResults";
+
+export default function AIExtractPage() {
+  const router = useRouter();
+  const [selectedCaseId, setSelectedCaseId] = useState("");
+  const [isExtracting, setIsExtracting] = useState(false);
+  const [isAdopting, setIsAdopting] = useState(false);
+  const [results, setResults] = useState<ExtractedDeadline[] | null>(null);
+
+  const { data: casesData } = useQuery({
+    queryKey: ["cases"],
+    queryFn: () => api.get<PaginatedResponse<Case>>("/api/cases"),
+  });
+
+  const cases = casesData?.data ?? [];
+
+  async function handleExtract(file: File | null, text: string) {
+    setIsExtracting(true);
+    setResults(null);
+
+    try {
+      let response: ExtractionResponse;
+
+      if (file) {
+        const formData = new FormData();
+        formData.append("file", file);
+        response = await api.postFormData<ExtractionResponse>(
+          "/api/ai/extract-deadlines",
+          formData,
+        );
+      } else {
+        response = await api.post<ExtractionResponse>(
+          "/api/ai/extract-deadlines",
+          { text },
+        );
+      }
+
+      setResults(response.deadlines);
+
+      if (response.count === 0) {
+        toast.info("Keine Fristen im Dokument gefunden.");
+      } else {
+        toast.success(`${response.count} Frist(en) erkannt.`);
+      }
+    } catch (err: unknown) {
+      const message =
+        err && typeof err === "object" && "error" in err
+          ? (err as { error: string }).error
+          : "Analyse fehlgeschlagen";
+      toast.error(message);
+    } finally {
+      setIsExtracting(false);
+    }
+  }
+
+  async function handleAdopt(deadlines: ExtractedDeadline[]) {
+    if (!selectedCaseId) return;
+    setIsAdopting(true);
+
+    try {
+      const promises = deadlines.map((d) =>
+        api.post(`/api/cases/${selectedCaseId}/deadlines`, {
+          title: d.title,
+          due_date: d.due_date ?? "",
+          source: "ai_extraction",
+          notes: [
+            d.rule_reference ? `Rechtsgrundlage: ${d.rule_reference}` : "",
+            d.source_quote ? `Quelle: "${d.source_quote}"` : "",
+            `Konfidenz: ${Math.round(d.confidence * 100)}%`,
+          ]
+            .filter(Boolean)
+            .join("\n"),
+        }),
+      );
+
+      await Promise.all(promises);
+      toast.success(
+        `${deadlines.length} Frist(en) erfolgreich übernommen.`,
+      );
+      router.push(`/cases/${selectedCaseId}`);
+    } catch (err: unknown) {
+      const message =
+        err && typeof err === "object" && "error" in err
+          ? (err as { error: string }).error
+          : "Übernahme fehlgeschlagen";
+      toast.error(message);
+    } finally {
+      setIsAdopting(false);
+    }
+  }
+
+  return (
+    <div className="animate-fade-in mx-auto max-w-4xl">
+      <div className="mb-6 flex items-center gap-3">
+        <Brain className="h-5 w-5 text-neutral-500" />
+        <div>
+          <h1 className="text-lg font-semibold text-neutral-900">
+            AI Fristenanalyse
+          </h1>
+          <p className="text-sm text-neutral-500">
+            Fristen automatisch aus Dokumenten extrahieren
+          </p>
+        </div>
+      </div>
+
+      <div className="rounded-lg border border-neutral-200 bg-white p-4 sm:p-6">
+        <ExtractionForm
+          cases={cases}
+          selectedCaseId={selectedCaseId}
+          onCaseChange={setSelectedCaseId}
+          onExtract={handleExtract}
+          isLoading={isExtracting}
+        />
+      </div>
+
+      {results !== null && (
+        <div className="animate-fade-in mt-6 rounded-lg border border-neutral-200 bg-white p-4 sm:p-6">
+          <ExtractionResults
+            deadlines={results}
+            onAdopt={handleAdopt}
+            isAdopting={isAdopting}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/app/(app)/cases/[id]/page.tsx

@@ -0,0 +1,341 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { useParams } from "next/navigation";
+import { api } from "@/lib/api";
+import type { Case, CaseEvent, Party, Deadline, Document } from "@/lib/types";
+import { CaseTimeline } from "@/components/cases/CaseTimeline";
+import { PartyList } from "@/components/cases/PartyList";
+import {
+  ArrowLeft,
+  Clock,
+  FileText,
+  Users,
+  Activity,
+  AlertTriangle,
+} from "lucide-react";
+import { format } from "date-fns";
+import { de } from "date-fns/locale";
+import Link from "next/link";
+import { useState } from "react";
+import { Skeleton } from "@/components/ui/Skeleton";
+
+interface CaseDetail extends Case {
+  parties: Party[];
+  recent_events: CaseEvent[];
+  deadlines_count: number;
+}
+
+const STATUS_BADGE: Record<string, string> = {
+  active: "bg-emerald-50 text-emerald-700",
+  pending: "bg-amber-50 text-amber-700",
+  closed: "bg-neutral-100 text-neutral-600",
+  archived: "bg-neutral-100 text-neutral-400",
+};
+
+const STATUS_LABEL: Record<string, string> = {
+  active: "Aktiv",
+  pending: "Anhängig",
+  closed: "Geschlossen",
+  archived: "Archiviert",
+};
+
+const TABS = [
+  { key: "timeline", label: "Verlauf", icon: Activity },
+  { key: "deadlines", label: "Fristen", icon: Clock },
+  { key: "documents", label: "Dokumente", icon: FileText },
+  { key: "parties", label: "Parteien", icon: Users },
+] as const;
+
+type TabKey = (typeof TABS)[number]["key"];
+
+function CaseDetailSkeleton() {
+  return (
+    <div>
+      <Skeleton className="h-4 w-28" />
+      <div className="mt-4 flex items-start justify-between">
+        <div>
+          <Skeleton className="h-6 w-48" />
+          <Skeleton className="mt-2 h-4 w-64" />
+        </div>
+        <div className="space-y-1">
+          <Skeleton className="h-3 w-24" />
+          <Skeleton className="h-3 w-24" />
+        </div>
+      </div>
+      <div className="mt-6 flex gap-4 border-b border-neutral-200 pb-2.5">
+        {[1, 2, 3, 4].map((i) => (
+          <Skeleton key={i} className="h-4 w-20" />
+        ))}
+      </div>
+      <div className="mt-6 space-y-3">
+        {[1, 2, 3].map((i) => (
+          <Skeleton key={i} className="h-14 rounded-md" />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default function CaseDetailPage() {
+  const { id } = useParams<{ id: string }>();
+  const [activeTab, setActiveTab] = useState<TabKey>("timeline");
+
+  const {
+    data: caseDetail,
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ["case", id],
+    queryFn: () => api.get<CaseDetail>(`/cases/${id}`),
+  });
+
+  const { data: deadlinesData } = useQuery({
+    queryKey: ["case-deadlines", id],
+    queryFn: () =>
+      api.get<{ deadlines: Deadline[]; total: number }>(
+        `/deadlines?case_id=${id}`,
+      ),
+    enabled: activeTab === "deadlines",
+  });
+
+  const { data: documentsData } = useQuery({
+    queryKey: ["case-documents", id],
+    queryFn: () => api.get<Document[]>(`/cases/${id}/documents`),
+    enabled: activeTab === "documents",
+  });
+
+  if (isLoading) {
+    return <CaseDetailSkeleton />;
+  }
+
+  if (error || !caseDetail) {
+    return (
+      <div className="py-12 text-center">
+        <div className="mx-auto mb-3 w-fit rounded-xl bg-red-50 p-3">
+          <AlertTriangle className="h-6 w-6 text-red-500" />
+        </div>
+        <p className="text-sm font-medium text-neutral-900">
+          Akte nicht gefunden
+        </p>
+        <p className="mt-1 text-sm text-neutral-500">
+          Die Akte existiert nicht oder Sie haben keine Berechtigung.
+        </p>
+        <Link
+          href="/cases"
+          className="mt-4 inline-flex items-center gap-1 text-sm text-neutral-500 transition-colors hover:text-neutral-700"
+        >
+          <ArrowLeft className="h-3.5 w-3.5" />
+          Zurück zu Akten
+        </Link>
+      </div>
+    );
+  }
+
+  const deadlines = deadlinesData?.deadlines ?? [];
+  const documents = documentsData ?? [];
+
+  return (
+    <div className="animate-fade-in">
+      <Link
+        href="/cases"
+        className="mb-4 inline-flex items-center gap-1 text-sm text-neutral-500 transition-colors hover:text-neutral-700"
+      >
+        <ArrowLeft className="h-3.5 w-3.5" />
+        Zurück zu Akten
+      </Link>
+
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div>
+          <div className="flex flex-wrap items-center gap-3">
+            <h1 className="text-lg font-semibold text-neutral-900">
+              {caseDetail.title}
+            </h1>
+            <span
+              className={`inline-block rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_BADGE[caseDetail.status] ?? "bg-neutral-100 text-neutral-500"}`}
+            >
+              {STATUS_LABEL[caseDetail.status] ?? caseDetail.status}
+            </span>
+          </div>
+          <div className="mt-1 flex flex-wrap gap-x-4 gap-y-1 text-sm text-neutral-500">
+            <span>Az. {caseDetail.case_number}</span>
+            {caseDetail.case_type && <span>{caseDetail.case_type}</span>}
+            {caseDetail.court && <span>{caseDetail.court}</span>}
+            {caseDetail.court_ref && <span>({caseDetail.court_ref})</span>}
+          </div>
+        </div>
+        <div className="text-right text-xs text-neutral-400">
+          <p>
+            Erstellt:{" "}
+            {format(new Date(caseDetail.created_at), "d. MMM yyyy", {
+              locale: de,
+            })}
+          </p>
+          <p>
+            Aktualisiert:{" "}
+            {format(new Date(caseDetail.updated_at), "d. MMM yyyy", {
+              locale: de,
+            })}
+          </p>
+        </div>
+      </div>
+
+      {caseDetail.ai_summary && (
+        <div className="mt-4 rounded-md border border-blue-100 bg-blue-50 px-4 py-3 text-sm text-blue-800">
+          {caseDetail.ai_summary}
+        </div>
+      )}
+
+      <div className="mt-6 border-b border-neutral-200">
+        <nav className="-mb-px flex gap-1 overflow-x-auto sm:gap-4">
+          {TABS.map((tab) => (
+            <button
+              key={tab.key}
+              onClick={() => setActiveTab(tab.key)}
+              className={`inline-flex shrink-0 items-center gap-1.5 border-b-2 px-1 pb-2.5 text-sm font-medium transition-colors ${
+                activeTab === tab.key
+                  ? "border-neutral-900 text-neutral-900"
+                  : "border-transparent text-neutral-400 hover:text-neutral-600"
+              }`}
+            >
+              <tab.icon className="h-4 w-4" />
+              {tab.label}
+              {tab.key === "deadlines" && caseDetail.deadlines_count > 0 && (
+                <span className="ml-1 rounded-full bg-neutral-100 px-1.5 py-0.5 text-xs text-neutral-500">
+                  {caseDetail.deadlines_count}
+                </span>
+              )}
+              {tab.key === "parties" && caseDetail.parties.length > 0 && (
+                <span className="ml-1 rounded-full bg-neutral-100 px-1.5 py-0.5 text-xs text-neutral-500">
+                  {caseDetail.parties.length}
+                </span>
+              )}
+            </button>
+          ))}
+        </nav>
+      </div>
+
+      <div className="mt-6">
+        {activeTab === "timeline" && (
+          <CaseTimeline events={caseDetail.recent_events ?? []} />
+        )}
+
+        {activeTab === "deadlines" && (
+          <DeadlinesList deadlines={deadlines} />
+        )}
+
+        {activeTab === "documents" && (
+          <DocumentsList documents={documents} />
+        )}
+
+        {activeTab === "parties" && (
+          <PartyList caseId={id} parties={caseDetail.parties ?? []} />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function DeadlinesList({ deadlines }: { deadlines: Deadline[] }) {
+  if (deadlines.length === 0) {
+    return (
+      <div className="flex flex-col items-center py-8 text-center">
+        <div className="rounded-xl bg-neutral-100 p-3">
+          <Clock className="h-5 w-5 text-neutral-400" />
+        </div>
+        <p className="mt-2 text-sm text-neutral-500">
+          Keine Fristen vorhanden.
+        </p>
+      </div>
+    );
+  }
+
+  const DEADLINE_STATUS: Record<string, string> = {
+    pending: "bg-amber-50 text-amber-700",
+    completed: "bg-emerald-50 text-emerald-700",
+    overdue: "bg-red-50 text-red-700",
+  };
+
+  const DEADLINE_STATUS_LABEL: Record<string, string> = {
+    pending: "Offen",
+    completed: "Erledigt",
+    overdue: "Überfällig",
+  };
+
+  return (
+    <div className="space-y-2">
+      {deadlines.map((d) => (
+        <div
+          key={d.id}
+          className="flex flex-col gap-2 rounded-md border border-neutral-200 bg-white px-4 py-3 sm:flex-row sm:items-center sm:justify-between"
+        >
+          <div>
+            <p className="text-sm font-medium text-neutral-900">{d.title}</p>
+            {d.description && (
+              <p className="mt-0.5 text-sm text-neutral-500">
+                {d.description}
+              </p>
+            )}
+          </div>
+          <div className="flex items-center gap-3">
+            <span
+              className={`rounded-full px-2 py-0.5 text-xs font-medium ${DEADLINE_STATUS[d.status] ?? "bg-neutral-100 text-neutral-500"}`}
+            >
+              {DEADLINE_STATUS_LABEL[d.status] ?? d.status}
+            </span>
+            <span className="whitespace-nowrap text-sm text-neutral-500">
+              {format(new Date(d.due_date), "d. MMM yyyy", { locale: de })}
+            </span>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function DocumentsList({ documents }: { documents: Document[] }) {
+  if (documents.length === 0) {
+    return (
+      <div className="flex flex-col items-center py-8 text-center">
+        <div className="rounded-xl bg-neutral-100 p-3">
+          <FileText className="h-5 w-5 text-neutral-400" />
+        </div>
+        <p className="mt-2 text-sm text-neutral-500">
+          Keine Dokumente vorhanden.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      {documents.map((doc) => (
+        <div
+          key={doc.id}
+          className="flex items-center justify-between rounded-md border border-neutral-200 bg-white px-4 py-3"
+        >
+          <div className="flex items-center gap-3">
+            <FileText className="h-4 w-4 text-neutral-400" />
+            <div>
+              <p className="text-sm font-medium text-neutral-900">
+                {doc.title}
+              </p>
+              <div className="flex gap-2 text-xs text-neutral-400">
+                {doc.doc_type && <span>{doc.doc_type}</span>}
+                {doc.file_size && (
+                  <span>{(doc.file_size / 1024).toFixed(0)} KB</span>
+                )}
+              </div>
+            </div>
+          </div>
+          <a
+            href={`/api/documents/${doc.id}`}
+            className="text-sm text-neutral-500 transition-colors hover:text-neutral-700"
+          >
+            Herunterladen
+          </a>
+        </div>
+      ))}
+    </div>
+  );
+}

frontend/src/app/(app)/cases/new/page.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
+import { toast } from "sonner";
+import { api } from "@/lib/api";
+import type { Case } from "@/lib/types";
+import { CaseForm, type CaseFormData } from "@/components/cases/CaseForm";
+import { ArrowLeft } from "lucide-react";
+import Link from "next/link";
+
+export default function NewCasePage() {
+  const router = useRouter();
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: (data: CaseFormData) => api.post<Case>("/cases", data),
+    onSuccess: (created) => {
+      queryClient.invalidateQueries({ queryKey: ["cases"] });
+      toast.success("Akte angelegt");
+      router.push(`/cases/${created.id}`);
+    },
+    onError: () => {
+      toast.error("Fehler beim Anlegen der Akte");
+    },
+  });
+
+  return (
+    <div className="animate-fade-in mx-auto max-w-2xl">
+      <Link
+        href="/cases"
+        className="mb-4 inline-flex items-center gap-1 text-sm text-neutral-500 transition-colors hover:text-neutral-700"
+      >
+        <ArrowLeft className="h-3.5 w-3.5" />
+        Zurück zu Akten
+      </Link>
+      <h1 className="text-lg font-semibold text-neutral-900">Neue Akte</h1>
+      <p className="mt-0.5 text-sm text-neutral-500">
+        Neue Akte im System anlegen
+      </p>
+      <div className="mt-6 rounded-md border border-neutral-200 bg-white p-4 sm:p-6">
+        <CaseForm
+          onSubmit={(data) => mutation.mutate(data)}
+          isSubmitting={mutation.isPending}
+        />
+      </div>
+    </div>
+  );
+}

frontend/src/app/(app)/cases/page.tsx

@@ -0,0 +1,211 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { api } from "@/lib/api";
+import type { Case } from "@/lib/types";
+import Link from "next/link";
+import { useSearchParams, useRouter } from "next/navigation";
+import { Plus, Search, FolderOpen } from "lucide-react";
+import { useState } from "react";
+import { SkeletonTable } from "@/components/ui/Skeleton";
+import { EmptyState } from "@/components/ui/EmptyState";
+
+const STATUS_OPTIONS = [
+  { value: "", label: "Alle Status" },
+  { value: "active", label: "Aktiv" },
+  { value: "pending", label: "Anhängig" },
+  { value: "closed", label: "Geschlossen" },
+  { value: "archived", label: "Archiviert" },
+];
+
+const TYPE_OPTIONS = [
+  { value: "", label: "Alle Typen" },
+  { value: "INF", label: "Verletzungsklage" },
+  { value: "REV", label: "Widerruf" },
+  { value: "CCR", label: "Einstweilige Verfügung" },
+  { value: "APP", label: "Berufung" },
+  { value: "PI", label: "Vorläufiger Rechtsschutz" },
+  { value: "ZPO_CIVIL", label: "ZPO Zivilverfahren" },
+];
+
+const STATUS_BADGE: Record<string, string> = {
+  active: "bg-emerald-50 text-emerald-700",
+  pending: "bg-amber-50 text-amber-700",
+  closed: "bg-neutral-100 text-neutral-600",
+  archived: "bg-neutral-100 text-neutral-400",
+};
+
+const STATUS_LABEL: Record<string, string> = {
+  active: "Aktiv",
+  pending: "Anhängig",
+  closed: "Geschlossen",
+  archived: "Archiviert",
+};
+
+const inputClass =
+  "rounded-md border border-neutral-200 bg-white px-2.5 py-1.5 text-sm outline-none transition-colors focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400";
+
+export default function CasesPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const [search, setSearch] = useState(searchParams.get("search") ?? "");
+  const [status, setStatus] = useState(searchParams.get("status") ?? "");
+  const [type, setType] = useState(searchParams.get("type") ?? "");
+
+  const { data, isLoading } = useQuery({
+    queryKey: ["cases", { search, status, type }],
+    queryFn: () => {
+      const params = new URLSearchParams();
+      if (search) params.set("search", search);
+      if (status) params.set("status", status);
+      if (type) params.set("type", type);
+      params.set("limit", "50");
+      const qs = params.toString();
+      return api.get<{ cases: Case[]; total: number }>(
+        `/cases${qs ? `?${qs}` : ""}`,
+      );
+    },
+  });
+
+  const cases = data?.cases ?? [];
+
+  return (
+    <div className="animate-fade-in">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 className="text-lg font-semibold text-neutral-900">Akten</h1>
+          <p className="mt-0.5 text-sm text-neutral-500">
+            {data ? `${data.total} Akten` : "\u00A0"}
+          </p>
+        </div>
+        <Link
+          href="/cases/new"
+          className="inline-flex w-fit items-center gap-1.5 rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-neutral-800"
+        >
+          <Plus className="h-4 w-4" />
+          Neue Akte
+        </Link>
+      </div>
+
+      <div className="mt-4 flex flex-col gap-3 sm:flex-row sm:items-center">
+        <div className="relative flex-1">
+          <Search className="absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-neutral-400" />
+          <input
+            type="text"
+            placeholder="Suchen nach Aktenzeichen, Titel..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className={`w-full pl-9 pr-3 ${inputClass}`}
+          />
+        </div>
+        <div className="flex gap-3">
+          <select
+            value={status}
+            onChange={(e) => setStatus(e.target.value)}
+            className={inputClass}
+          >
+            {STATUS_OPTIONS.map((o) => (
+              <option key={o.value} value={o.value}>
+                {o.label}
+              </option>
+            ))}
+          </select>
+          <select
+            value={type}
+            onChange={(e) => setType(e.target.value)}
+            className={inputClass}
+          >
+            {TYPE_OPTIONS.map((o) => (
+              <option key={o.value} value={o.value}>
+                {o.label}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      <div className="mt-4">
+        {isLoading ? (
+          <SkeletonTable rows={5} />
+        ) : cases.length === 0 ? (
+          <EmptyState
+            icon={FolderOpen}
+            title="Keine Akten gefunden"
+            description={
+              search || status || type
+                ? "Versuchen Sie andere Suchkriterien."
+                : "Erstellen Sie Ihre erste Akte, um loszulegen."
+            }
+            action={
+              !search && !status && !type ? (
+                <Link
+                  href="/cases/new"
+                  className="inline-flex items-center gap-1.5 rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-neutral-800"
+                >
+                  <Plus className="h-4 w-4" />
+                  Neue Akte anlegen
+                </Link>
+              ) : undefined
+            }
+          />
+        ) : (
+          <div className="-mx-4 overflow-x-auto sm:mx-0">
+            <div className="min-w-[640px] sm:min-w-0">
+              <div className="overflow-hidden rounded-md border border-neutral-200 bg-white">
+                <table className="w-full text-sm">
+                  <thead>
+                    <tr className="border-b border-neutral-100 text-left text-xs font-medium uppercase tracking-wider text-neutral-400">
+                      <th className="px-4 py-2.5">Aktenzeichen</th>
+                      <th className="px-4 py-2.5">Titel</th>
+                      <th className="hidden px-4 py-2.5 md:table-cell">Typ</th>
+                      <th className="hidden px-4 py-2.5 lg:table-cell">
+                        Gericht
+                      </th>
+                      <th className="px-4 py-2.5">Status</th>
+                      <th className="hidden px-4 py-2.5 sm:table-cell">
+                        Erstellt
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-neutral-100">
+                    {cases.map((c) => (
+                      <tr
+                        key={c.id}
+                        onClick={() => router.push(`/cases/${c.id}`)}
+                        className="cursor-pointer transition-colors hover:bg-neutral-50"
+                      >
+                        <td className="whitespace-nowrap px-4 py-2.5 font-medium text-neutral-900">
+                          {c.case_number}
+                        </td>
+                        <td className="max-w-[200px] truncate px-4 py-2.5 text-neutral-700">
+                          {c.title}
+                        </td>
+                        <td className="hidden px-4 py-2.5 text-neutral-500 md:table-cell">
+                          {c.case_type ?? "-"}
+                        </td>
+                        <td className="hidden px-4 py-2.5 text-neutral-500 lg:table-cell">
+                          {c.court ?? "-"}
+                        </td>
+                        <td className="px-4 py-2.5">
+                          <span
+                            className={`inline-block rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_BADGE[c.status] ?? "bg-neutral-100 text-neutral-500"}`}
+                          >
+                            {STATUS_LABEL[c.status] ?? c.status}
+                          </span>
+                        </td>
+                        <td className="hidden whitespace-nowrap px-4 py-2.5 text-neutral-400 sm:table-cell">
+                          {new Date(c.created_at).toLocaleDateString("de-DE")}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/app/(app)/dashboard/page.tsx

@@ -8,35 +8,71 @@ import { CaseOverviewGrid } from "@/components/dashboard/CaseOverviewGrid";
 import { UpcomingTimeline } from "@/components/dashboard/UpcomingTimeline";
 import { AISummaryCard } from "@/components/dashboard/AISummaryCard";
 import { QuickActions } from "@/components/dashboard/QuickActions";
-import { Loader2 } from "lucide-react";
+import { Skeleton, SkeletonCard } from "@/components/ui/Skeleton";
+import { AlertTriangle, RefreshCw } from "lucide-react";
+
+function DashboardSkeleton() {
+  return (
+    <div className="mx-auto max-w-6xl space-y-6">
+      <div>
+        <Skeleton className="h-5 w-28" />
+        <Skeleton className="mt-2 h-3.5 w-52" />
+      </div>
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+        {[1, 2, 3].map((i) => (
+          <Skeleton key={i} className="h-28 rounded-xl" />
+        ))}
+      </div>
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+        <div className="lg:col-span-2">
+          <SkeletonCard className="min-h-[200px]" />
+        </div>
+        <div className="space-y-6">
+          <SkeletonCard />
+          <SkeletonCard />
+          <SkeletonCard />
+        </div>
+      </div>
+    </div>
+  );
+}
 
 export default function DashboardPage() {
-  const { data, isLoading, error } = useQuery({
+  const { data, isLoading, error, refetch } = useQuery({
     queryKey: ["dashboard"],
     queryFn: () => api.get<DashboardData>("/dashboard"),
     refetchInterval: 60_000,
   });
 
   if (isLoading) {
-    return (
-      <div className="flex h-full items-center justify-center">
-        <Loader2 className="h-6 w-6 animate-spin text-neutral-400" />
-      </div>
-    );
+    return <DashboardSkeleton />;
   }
 
   if (error || !data) {
     return (
-      <div className="flex h-full items-center justify-center">
-        <p className="text-sm text-neutral-500">
-          Dashboard konnte nicht geladen werden.
+      <div className="mx-auto max-w-md py-16 text-center">
+        <div className="mx-auto mb-3 rounded-xl bg-red-50 p-3 w-fit">
+          <AlertTriangle className="h-6 w-6 text-red-500" />
+        </div>
+        <h2 className="text-sm font-medium text-neutral-900">
+          Dashboard konnte nicht geladen werden
+        </h2>
+        <p className="mt-1 text-sm text-neutral-500">
+          Bitte versuchen Sie es erneut oder prüfen Sie Ihre Verbindung.
         </p>
+        <button
+          onClick={() => refetch()}
+          className="mt-4 inline-flex items-center gap-1.5 rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-neutral-800"
+        >
+          <RefreshCw className="h-3.5 w-3.5" />
+          Erneut laden
+        </button>
       </div>
     );
   }
 
   return (
-    <div className="mx-auto max-w-6xl space-y-6">
+    <div className="animate-fade-in mx-auto max-w-6xl space-y-6">
       <div>
         <h1 className="text-lg font-semibold text-neutral-900">Dashboard</h1>
         <p className="mt-0.5 text-sm text-neutral-500">
@@ -44,20 +80,15 @@ export default function DashboardPage() {
         </p>
       </div>
 
-      {/* Traffic Lights — the hero section */}
       <DeadlineTrafficLights data={data.deadline_summary} />
 
-      {/* Main content grid */}
       <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
-        {/* Left column: Timeline (takes 2 cols) */}
         <div className="lg:col-span-2">
           <UpcomingTimeline
             deadlines={data.upcoming_deadlines}
             appointments={data.upcoming_appointments}
           />
         </div>
-
-        {/* Right column: Case overview, AI summary, Quick actions */}
         <div className="space-y-6">
           <CaseOverviewGrid data={data.case_summary} />
           <AISummaryCard data={data} />

frontend/src/app/(app)/fristen/page.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { DeadlineList } from "@/components/deadlines/DeadlineList";
+import { DeadlineCalendarView } from "@/components/deadlines/DeadlineCalendarView";
+import { useQuery } from "@tanstack/react-query";
+import { api } from "@/lib/api";
+import type { Deadline } from "@/lib/types";
+import { Calendar, List, Calculator } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+
+type ViewMode = "list" | "calendar";
+
+export default function FristenPage() {
+  const [view, setView] = useState<ViewMode>("list");
+
+  const { data: deadlines } = useQuery({
+    queryKey: ["deadlines"],
+    queryFn: () => api.get<Deadline[]>("/api/deadlines"),
+  });
+
+  return (
+    <div className="animate-fade-in space-y-4">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 className="text-lg font-semibold text-neutral-900">Fristen</h1>
+          <p className="mt-0.5 text-sm text-neutral-500">
+            Alle Fristen im Überblick
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Link
+            href="/fristen/rechner"
+            className="flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm text-neutral-700 transition-colors hover:bg-neutral-50"
+          >
+            <Calculator className="h-3.5 w-3.5" />
+            Fristenrechner
+          </Link>
+          <div className="flex rounded-md border border-neutral-200 bg-white">
+            <button
+              onClick={() => setView("list")}
+              className={`flex items-center gap-1 rounded-l-md px-2.5 py-1.5 text-sm transition-colors ${
+                view === "list"
+                  ? "bg-neutral-100 font-medium text-neutral-900"
+                  : "text-neutral-500 hover:text-neutral-700"
+              }`}
+            >
+              <List className="h-3.5 w-3.5" />
+              Liste
+            </button>
+            <button
+              onClick={() => setView("calendar")}
+              className={`flex items-center gap-1 rounded-r-md px-2.5 py-1.5 text-sm transition-colors ${
+                view === "calendar"
+                  ? "bg-neutral-100 font-medium text-neutral-900"
+                  : "text-neutral-500 hover:text-neutral-700"
+              }`}
+            >
+              <Calendar className="h-3.5 w-3.5" />
+              Kalender
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {view === "list" ? (
+        <DeadlineList />
+      ) : (
+        <DeadlineCalendarView deadlines={deadlines || []} />
+      )}
+    </div>
+  );
+}

frontend/src/app/(app)/fristen/rechner/page.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { DeadlineCalculator } from "@/components/deadlines/DeadlineCalculator";
+import { ArrowLeft } from "lucide-react";
+import Link from "next/link";
+
+export default function FristenrechnerPage() {
+  return (
+    <div className="animate-fade-in space-y-4">
+      <div>
+        <Link
+          href="/fristen"
+          className="mb-2 inline-flex items-center gap-1 text-sm text-neutral-500 transition-colors hover:text-neutral-700"
+        >
+          <ArrowLeft className="h-3.5 w-3.5" />
+          Zurück zu Fristen
+        </Link>
+        <h1 className="text-lg font-semibold text-neutral-900">
+          Fristenrechner
+        </h1>
+        <p className="mt-0.5 text-sm text-neutral-500">
+          Berechnen Sie Fristen basierend auf Verfahrensart und Auslösedatum
+        </p>
+      </div>
+      <DeadlineCalculator />
+    </div>
+  );
+}

frontend/src/app/(app)/layout.tsx

@@ -13,7 +13,7 @@ export default function AppLayout({
       <Sidebar />
       <div className="flex flex-1 flex-col overflow-hidden">
         <Header />
-        <main className="flex-1 overflow-y-auto p-6">{children}</main>
+        <main className="flex-1 overflow-y-auto p-4 sm:p-6">{children}</main>
       </div>
     </div>
   );

frontend/src/app/globals.css

@@ -10,6 +10,19 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+/* Focus-visible ring for accessibility */
+*:focus-visible {
+  outline: 2px solid #404040;
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+  outline: none;
+}
+
 @keyframes count-up {
   0% {
     transform: translateY(8px);
@@ -24,3 +37,31 @@ body {
 .animate-count-up {
   animation: count-up 0.3s ease-out;
 }
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in {
+  animation: fade-in 0.2s ease-out;
+}
+
+@keyframes slide-in-left {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.animate-slide-in-left {
+  animation: slide-in-left 0.2s ease-out;
+}

frontend/src/components/ai/ExtractionForm.tsx

@@ -0,0 +1,172 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { useDropzone } from "react-dropzone";
+import { Upload, FileText, X, Loader2 } from "lucide-react";
+import type { Case } from "@/lib/types";
+
+interface ExtractionFormProps {
+  cases: Case[];
+  selectedCaseId: string;
+  onCaseChange: (caseId: string) => void;
+  onExtract: (file: File | null, text: string) => void;
+  isLoading: boolean;
+}
+
+const inputClass =
+  "w-full rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-900 outline-none transition-colors focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400";
+
+export function ExtractionForm({
+  cases,
+  selectedCaseId,
+  onCaseChange,
+  onExtract,
+  isLoading,
+}: ExtractionFormProps) {
+  const [file, setFile] = useState<File | null>(null);
+  const [text, setText] = useState("");
+
+  const onDrop = useCallback((acceptedFiles: File[]) => {
+    if (acceptedFiles.length > 0) {
+      setFile(acceptedFiles[0]);
+      setText("");
+    }
+  }, []);
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    accept: { "application/pdf": [".pdf"] },
+    maxFiles: 1,
+    disabled: isLoading,
+  });
+
+  function removeFile() {
+    setFile(null);
+  }
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!selectedCaseId || (!file && !text.trim())) return;
+    onExtract(file, text.trim());
+  }
+
+  const hasInput = file !== null || text.trim().length > 0;
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-5">
+      {/* Case selector */}
+      <div>
+        <label
+          htmlFor="case-select"
+          className="mb-1.5 block text-sm font-medium text-neutral-700"
+        >
+          Akte
+        </label>
+        <select
+          id="case-select"
+          value={selectedCaseId}
+          onChange={(e) => onCaseChange(e.target.value)}
+          className={inputClass}
+          disabled={isLoading}
+        >
+          <option value="">Akte auswählen...</option>
+          {cases.map((c) => (
+            <option key={c.id} value={c.id}>
+              {c.case_number} - {c.title}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {/* PDF dropzone */}
+      <div>
+        <label className="mb-1.5 block text-sm font-medium text-neutral-700">
+          PDF hochladen
+        </label>
+        {file ? (
+          <div className="flex items-center gap-3 rounded-md border border-neutral-200 bg-neutral-50 px-4 py-3">
+            <FileText className="h-5 w-5 shrink-0 text-neutral-500" />
+            <div className="min-w-0 flex-1">
+              <p className="truncate text-sm font-medium text-neutral-900">
+                {file.name}
+              </p>
+              <p className="text-xs text-neutral-500">
+                {(file.size / 1024).toFixed(0)} KB
+              </p>
+            </div>
+            <button
+              type="button"
+              onClick={removeFile}
+              disabled={isLoading}
+              className="rounded p-1 text-neutral-400 transition-colors hover:bg-neutral-200 hover:text-neutral-600"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          </div>
+        ) : (
+          <div
+            {...getRootProps()}
+            className={`cursor-pointer rounded-md border-2 border-dashed px-6 py-8 text-center transition-colors ${
+              isDragActive
+                ? "border-neutral-500 bg-neutral-50"
+                : "border-neutral-300 hover:border-neutral-400"
+            } ${isLoading ? "pointer-events-none opacity-50" : ""}`}
+          >
+            <input {...getInputProps()} />
+            <Upload className="mx-auto h-8 w-8 text-neutral-400" />
+            <p className="mt-2 text-sm text-neutral-600">
+              PDF hierher ziehen oder{" "}
+              <span className="font-medium text-neutral-900">durchsuchen</span>
+            </p>
+            <p className="mt-1 text-xs text-neutral-400">Nur PDF-Dateien</p>
+          </div>
+        )}
+      </div>
+
+      {/* Divider */}
+      <div className="flex items-center gap-3">
+        <div className="h-px flex-1 bg-neutral-200" />
+        <span className="text-xs text-neutral-400">oder</span>
+        <div className="h-px flex-1 bg-neutral-200" />
+      </div>
+
+      {/* Text input */}
+      <div>
+        <label
+          htmlFor="text-input"
+          className="mb-1.5 block text-sm font-medium text-neutral-700"
+        >
+          Text eingeben
+        </label>
+        <textarea
+          id="text-input"
+          value={text}
+          onChange={(e) => {
+            setText(e.target.value);
+            if (e.target.value.trim()) setFile(null);
+          }}
+          placeholder="Gerichtsschriftsatz, Beschluss oder sonstigen Text hier einfügen..."
+          rows={6}
+          disabled={isLoading}
+          className={`${inputClass} resize-y placeholder:text-neutral-400 disabled:opacity-50`}
+        />
+      </div>
+
+      {/* Submit */}
+      <button
+        type="submit"
+        disabled={isLoading || !hasInput || !selectedCaseId}
+        className="inline-flex items-center gap-2 rounded-md bg-neutral-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-neutral-800 disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        {isLoading ? (
+          <>
+            <Loader2 className="h-4 w-4 animate-spin" />
+            Analysiere...
+          </>
+        ) : (
+          "Analysieren"
+        )}
+      </button>
+    </form>
+  );
+}

frontend/src/components/ai/ExtractionResults.tsx

@@ -0,0 +1,292 @@
+"use client";
+
+import { useState } from "react";
+import { Trash2, Check, Pencil, X, Loader2, Brain } from "lucide-react";
+import type { ExtractedDeadline } from "@/lib/types";
+
+interface ExtractionResultsProps {
+  deadlines: ExtractedDeadline[];
+  onAdopt: (deadlines: ExtractedDeadline[]) => void;
+  isAdopting: boolean;
+}
+
+function confidenceColor(confidence: number): string {
+  if (confidence >= 0.8) return "bg-green-100 text-green-800";
+  if (confidence >= 0.5) return "bg-yellow-100 text-yellow-800";
+  return "bg-red-100 text-red-800";
+}
+
+function confidenceLabel(confidence: number): string {
+  if (confidence >= 0.8) return "Hoch";
+  if (confidence >= 0.5) return "Mittel";
+  return "Niedrig";
+}
+
+const editInputClass =
+  "w-full rounded border border-neutral-300 px-2 py-1 text-sm outline-none transition-colors focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400";
+
+export function ExtractionResults({
+  deadlines: initialDeadlines,
+  onAdopt,
+  isAdopting,
+}: ExtractionResultsProps) {
+  const [deadlines, setDeadlines] = useState(initialDeadlines);
+  const [editingIndex, setEditingIndex] = useState<number | null>(null);
+  const [editForm, setEditForm] = useState<ExtractedDeadline | null>(null);
+
+  function removeDeadline(index: number) {
+    setDeadlines((prev) => prev.filter((_, i) => i !== index));
+  }
+
+  function startEdit(index: number) {
+    setEditingIndex(index);
+    setEditForm({ ...deadlines[index] });
+  }
+
+  function cancelEdit() {
+    setEditingIndex(null);
+    setEditForm(null);
+  }
+
+  function saveEdit() {
+    if (editingIndex === null || !editForm) return;
+    setDeadlines((prev) =>
+      prev.map((d, i) => (i === editingIndex ? editForm : d)),
+    );
+    setEditingIndex(null);
+    setEditForm(null);
+  }
+
+  if (deadlines.length === 0) {
+    return (
+      <div className="flex flex-col items-center py-8 text-center">
+        <div className="rounded-xl bg-neutral-100 p-3">
+          <Brain className="h-5 w-5 text-neutral-400" />
+        </div>
+        <p className="mt-2 text-sm text-neutral-500">
+          Keine Fristen gefunden. Alle extrahierten Fristen wurden entfernt.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <h3 className="text-sm font-medium text-neutral-900">
+          {deadlines.length} Frist{deadlines.length !== 1 ? "en" : ""} erkannt
+        </h3>
+        <button
+          onClick={() => onAdopt(deadlines)}
+          disabled={isAdopting || deadlines.length === 0}
+          className="inline-flex items-center gap-2 rounded-md bg-neutral-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-neutral-800 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          {isAdopting ? (
+            <>
+              <Loader2 className="h-4 w-4 animate-spin" />
+              Übernehme...
+            </>
+          ) : (
+            <>
+              <Check className="h-4 w-4" />
+              Fristen übernehmen
+            </>
+          )}
+        </button>
+      </div>
+
+      {/* Mobile: card layout, Desktop: table */}
+      <div className="hidden overflow-hidden rounded-md border border-neutral-200 sm:block">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b border-neutral-200 bg-neutral-50">
+              <th className="px-4 py-2.5 text-left font-medium text-neutral-700">
+                Frist
+              </th>
+              <th className="px-4 py-2.5 text-left font-medium text-neutral-700">
+                Fälligkeitsdatum
+              </th>
+              <th className="px-4 py-2.5 text-left font-medium text-neutral-700">
+                Rechtsgrundlage
+              </th>
+              <th className="px-4 py-2.5 text-left font-medium text-neutral-700">
+                Konfidenz
+              </th>
+              <th className="hidden px-4 py-2.5 text-left font-medium text-neutral-700 lg:table-cell">
+                Quellenangabe
+              </th>
+              <th className="px-4 py-2.5 text-right font-medium text-neutral-700">
+                Aktionen
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {deadlines.map((d, i) => (
+              <tr
+                key={i}
+                className="border-b border-neutral-100 transition-colors last:border-b-0 hover:bg-neutral-50"
+              >
+                {editingIndex === i && editForm ? (
+                  <>
+                    <td className="px-4 py-2">
+                      <input
+                        value={editForm.title}
+                        onChange={(e) =>
+                          setEditForm({ ...editForm, title: e.target.value })
+                        }
+                        className={editInputClass}
+                      />
+                    </td>
+                    <td className="px-4 py-2">
+                      <input
+                        type="date"
+                        value={editForm.due_date ?? ""}
+                        onChange={(e) =>
+                          setEditForm({
+                            ...editForm,
+                            due_date: e.target.value || null,
+                          })
+                        }
+                        className={editInputClass}
+                      />
+                    </td>
+                    <td className="px-4 py-2">
+                      <input
+                        value={editForm.rule_reference}
+                        onChange={(e) =>
+                          setEditForm({
+                            ...editForm,
+                            rule_reference: e.target.value,
+                          })
+                        }
+                        className={editInputClass}
+                      />
+                    </td>
+                    <td className="px-4 py-2">
+                      <span
+                        className={`inline-block rounded-full px-2 py-0.5 text-xs font-medium ${confidenceColor(editForm.confidence)}`}
+                      >
+                        {confidenceLabel(editForm.confidence)}
+                      </span>
+                    </td>
+                    <td className="hidden px-4 py-2 text-xs text-neutral-500 lg:table-cell">
+                      {editForm.source_quote}
+                    </td>
+                    <td className="px-4 py-2 text-right">
+                      <div className="flex items-center justify-end gap-1">
+                        <button
+                          onClick={saveEdit}
+                          className="rounded p-1 text-green-600 transition-colors hover:bg-green-50"
+                          title="Speichern"
+                        >
+                          <Check className="h-4 w-4" />
+                        </button>
+                        <button
+                          onClick={cancelEdit}
+                          className="rounded p-1 text-neutral-400 transition-colors hover:bg-neutral-100"
+                          title="Abbrechen"
+                        >
+                          <X className="h-4 w-4" />
+                        </button>
+                      </div>
+                    </td>
+                  </>
+                ) : (
+                  <>
+                    <td className="px-4 py-2.5 font-medium text-neutral-900">
+                      {d.title}
+                    </td>
+                    <td className="px-4 py-2.5 text-neutral-700">
+                      {d.due_date
+                        ? new Date(d.due_date).toLocaleDateString("de-DE")
+                        : `${d.duration_value} ${d.duration_unit}`}
+                    </td>
+                    <td className="px-4 py-2.5 text-neutral-600">
+                      {d.rule_reference || "-"}
+                    </td>
+                    <td className="px-4 py-2.5">
+                      <span
+                        className={`inline-block rounded-full px-2 py-0.5 text-xs font-medium ${confidenceColor(d.confidence)}`}
+                      >
+                        {confidenceLabel(d.confidence)}{" "}
+                        {Math.round(d.confidence * 100)}%
+                      </span>
+                    </td>
+                    <td className="hidden max-w-48 truncate px-4 py-2.5 text-xs text-neutral-500 lg:table-cell">
+                      {d.source_quote || "-"}
+                    </td>
+                    <td className="px-4 py-2.5 text-right">
+                      <div className="flex items-center justify-end gap-1">
+                        <button
+                          onClick={() => startEdit(i)}
+                          className="rounded p-1 text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-neutral-600"
+                          title="Bearbeiten"
+                        >
+                          <Pencil className="h-3.5 w-3.5" />
+                        </button>
+                        <button
+                          onClick={() => removeDeadline(i)}
+                          className="rounded p-1 text-neutral-400 transition-colors hover:bg-red-50 hover:text-red-600"
+                          title="Entfernen"
+                        >
+                          <Trash2 className="h-3.5 w-3.5" />
+                        </button>
+                      </div>
+                    </td>
+                  </>
+                )}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Mobile card layout */}
+      <div className="space-y-3 sm:hidden">
+        {deadlines.map((d, i) => (
+          <div
+            key={i}
+            className="rounded-md border border-neutral-200 bg-white p-4"
+          >
+            <div className="flex items-start justify-between gap-2">
+              <p className="text-sm font-medium text-neutral-900">{d.title}</p>
+              <div className="flex shrink-0 items-center gap-1">
+                <button
+                  onClick={() => startEdit(i)}
+                  className="rounded p-1 text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-neutral-600"
+                >
+                  <Pencil className="h-3.5 w-3.5" />
+                </button>
+                <button
+                  onClick={() => removeDeadline(i)}
+                  className="rounded p-1 text-neutral-400 transition-colors hover:bg-red-50 hover:text-red-600"
+                >
+                  <Trash2 className="h-3.5 w-3.5" />
+                </button>
+              </div>
+            </div>
+            <div className="mt-2 flex flex-wrap gap-2 text-xs text-neutral-500">
+              <span>
+                {d.due_date
+                  ? new Date(d.due_date).toLocaleDateString("de-DE")
+                  : `${d.duration_value} ${d.duration_unit}`}
+              </span>
+              {d.rule_reference && (
+                <>
+                  <span>·</span>
+                  <span>{d.rule_reference}</span>
+                </>
+              )}
+              <span
+                className={`rounded-full px-2 py-0.5 font-medium ${confidenceColor(d.confidence)}`}
+              >
+                {confidenceLabel(d.confidence)} {Math.round(d.confidence * 100)}
+                %
+              </span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

frontend/src/components/cases/CaseForm.tsx

@@ -0,0 +1,187 @@
+"use client";
+
+import { useState } from "react";
+
+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" },
+];
+
+export interface CaseFormData {
+  case_number: string;
+  title: string;
+  case_type?: string;
+  court?: string;
+  court_ref?: string;
+  status: string;
+}
+
+interface CaseFormProps {
+  initialData?: Partial<CaseFormData>;
+  onSubmit: (data: CaseFormData) => void;
+  isSubmitting?: boolean;
+  submitLabel?: string;
+}
+
+export function CaseForm({
+  initialData,
+  onSubmit,
+  isSubmitting,
+  submitLabel = "Akte anlegen",
+}: CaseFormProps) {
+  const [form, setForm] = useState<CaseFormData>({
+    case_number: initialData?.case_number ?? "",
+    title: initialData?.title ?? "",
+    case_type: initialData?.case_type ?? "",
+    court: initialData?.court ?? "",
+    court_ref: initialData?.court_ref ?? "",
+    status: initialData?.status ?? "active",
+  });
+
+  const [errors, setErrors] = useState<Partial<Record<keyof CaseFormData, string>>>({});
+
+  function validate(): boolean {
+    const newErrors: Partial<Record<keyof CaseFormData, string>> = {};
+    if (!form.case_number.trim()) {
+      newErrors.case_number = "Aktenzeichen ist erforderlich";
+    }
+    if (!form.title.trim()) {
+      newErrors.title = "Titel ist erforderlich";
+    }
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  }
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!validate()) return;
+    const data: CaseFormData = {
+      ...form,
+      case_type: form.case_type || undefined,
+      court: form.court || undefined,
+      court_ref: form.court_ref || undefined,
+    };
+    onSubmit(data);
+  }
+
+  function update(field: keyof CaseFormData, value: string) {
+    setForm((prev) => ({ ...prev, [field]: value }));
+    if (errors[field]) {
+      setErrors((prev) => ({ ...prev, [field]: undefined }));
+    }
+  }
+
+  const inputClass =
+    "w-full rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm outline-none transition-colors focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400";
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        <div>
+          <label className="mb-1 block text-sm font-medium text-neutral-700">
+            Aktenzeichen *
+          </label>
+          <input
+            type="text"
+            value={form.case_number}
+            onChange={(e) => update("case_number", e.target.value)}
+            placeholder="z.B. 2026/001"
+            className={`${inputClass} ${errors.case_number ? "border-red-300 focus:border-red-400 focus:ring-red-400" : ""}`}
+          />
+          {errors.case_number && (
+            <p className="mt-1 text-xs text-red-600">{errors.case_number}</p>
+          )}
+        </div>
+        <div>
+          <label className="mb-1 block text-sm font-medium text-neutral-700">
+            Status
+          </label>
+          <select
+            value={form.status}
+            onChange={(e) => update("status", e.target.value)}
+            className={inputClass}
+          >
+            <option value="active">Aktiv</option>
+            <option value="pending">Anhängig</option>
+            <option value="closed">Geschlossen</option>
+          </select>
+        </div>
+      </div>
+
+      <div>
+        <label className="mb-1 block text-sm font-medium text-neutral-700">
+          Titel *
+        </label>
+        <input
+          type="text"
+          value={form.title}
+          onChange={(e) => update("title", e.target.value)}
+          placeholder="Bezeichnung der Akte"
+          className={`${inputClass} ${errors.title ? "border-red-300 focus:border-red-400 focus:ring-red-400" : ""}`}
+        />
+        {errors.title && (
+          <p className="mt-1 text-xs text-red-600">{errors.title}</p>
+        )}
+      </div>
+
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        <div>
+          <label className="mb-1 block text-sm font-medium text-neutral-700">
+            Verfahrensart
+          </label>
+          <select
+            value={form.case_type}
+            onChange={(e) => update("case_type", e.target.value)}
+            className={inputClass}
+          >
+            {TYPE_OPTIONS.map((o) => (
+              <option key={o.value} value={o.value}>
+                {o.label}
+              </option>
+            ))}
+          </select>
+        </div>
+        <div>
+          <label className="mb-1 block text-sm font-medium text-neutral-700">
+            Gericht
+          </label>
+          <input
+            type="text"
+            value={form.court}
+            onChange={(e) => update("court", e.target.value)}
+            placeholder="z.B. UPC München Zentralkammer"
+            className={inputClass}
+          />
+        </div>
+      </div>
+
+      <div>
+        <label className="mb-1 block text-sm font-medium text-neutral-700">
+          Gerichtliches Aktenzeichen
+        </label>
+        <input
+          type="text"
+          value={form.court_ref}
+          onChange={(e) => update("court_ref", e.target.value)}
+          placeholder="z.B. UPC_CFI_123/2026"
+          className={inputClass}
+        />
+      </div>
+
+      <div className="flex justify-end pt-2">
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          className="rounded-md bg-neutral-900 px-4 py-1.5 text-sm font-medium text-white transition-colors hover:bg-neutral-800 disabled:opacity-50"
+        >
+          {isSubmitting ? "Speichern..." : submitLabel}
+        </button>
+      </div>
+    </form>
+  );
+}

frontend/src/components/cases/CaseTimeline.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import type { CaseEvent } from "@/lib/types";
+import { format } from "date-fns";
+import { de } from "date-fns/locale";
+import { Activity } from "lucide-react";
+
+const EVENT_ICONS: Record<string, string> = {
+  case_created: "bg-emerald-500",
+  status_changed: "bg-amber-500",
+  party_added: "bg-blue-500",
+  case_archived: "bg-neutral-400",
+  document_uploaded: "bg-violet-500",
+  deadline_created: "bg-red-500",
+};
+
+interface CaseTimelineProps {
+  events: CaseEvent[];
+}
+
+export function CaseTimeline({ events }: CaseTimelineProps) {
+  if (events.length === 0) {
+    return (
+      <div className="flex flex-col items-center py-8 text-center">
+        <div className="rounded-xl bg-neutral-100 p-3">
+          <Activity className="h-5 w-5 text-neutral-400" />
+        </div>
+        <p className="mt-2 text-sm text-neutral-500">
+          Keine Ereignisse vorhanden.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative space-y-0">
+      {events.map((event, i) => (
+        <div key={event.id} className="relative flex gap-3 pb-6">
+          {i < events.length - 1 && (
+            <div className="absolute left-[7px] top-4 h-full w-px bg-neutral-200" />
+          )}
+          <div
+            className={`mt-1 h-[15px] w-[15px] shrink-0 rounded-full border-2 border-white ${EVENT_ICONS[event.event_type ?? ""] ?? "bg-neutral-300"}`}
+          />
+          <div className="min-w-0 flex-1">
+            <p className="text-sm font-medium text-neutral-900">
+              {event.title}
+            </p>
+            {event.description && (
+              <p className="mt-0.5 text-sm text-neutral-500">
+                {event.description}
+              </p>
+            )}
+            <p className="mt-1 text-xs text-neutral-400">
+              {format(
+                new Date(event.event_date ?? event.created_at),
+                "d. MMM yyyy, HH:mm",
+                { locale: de },
+              )}
+            </p>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

frontend/src/components/cases/PartyList.tsx

@@ -0,0 +1,197 @@
+"use client";
+
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+import { toast } from "sonner";
+import { api } from "@/lib/api";
+import type { Party } from "@/lib/types";
+import { Plus, Trash2, X, Users } from "lucide-react";
+
+interface PartyListProps {
+  caseId: string;
+  parties: Party[];
+}
+
+interface PartyFormData {
+  name: string;
+  role: string;
+  representative: string;
+}
+
+const ROLE_OPTIONS = [
+  "Kläger",
+  "Beklagter",
+  "Nebenintervenient",
+  "Patentinhaber",
+  "Streithelfer",
+];
+
+const inputClass =
+  "w-full rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm outline-none transition-colors focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400";
+
+export function PartyList({ caseId, parties }: PartyListProps) {
+  const queryClient = useQueryClient();
+  const [showForm, setShowForm] = useState(false);
+  const [form, setForm] = useState<PartyFormData>({
+    name: "",
+    role: "",
+    representative: "",
+  });
+
+  const addMutation = useMutation({
+    mutationFn: (data: PartyFormData) =>
+      api.post<Party>(`/cases/${caseId}/parties`, {
+        name: data.name,
+        role: data.role || undefined,
+        representative: data.representative || undefined,
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["case", caseId] });
+      toast.success("Partei hinzugefügt");
+      setShowForm(false);
+      setForm({ name: "", role: "", representative: "" });
+    },
+    onError: () => toast.error("Fehler beim Hinzufügen"),
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (partyId: string) => api.delete(`/parties/${partyId}`),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["case", caseId] });
+      toast.success("Partei entfernt");
+    },
+    onError: () => toast.error("Fehler beim Entfernen"),
+  });
+
+  return (
+    <div>
+      <div className="flex items-center justify-between">
+        <h3 className="text-sm font-medium text-neutral-700">
+          Parteien ({parties.length})
+        </h3>
+        {!showForm && (
+          <button
+            onClick={() => setShowForm(true)}
+            className="inline-flex items-center gap-1 text-sm text-neutral-500 transition-colors hover:text-neutral-700"
+          >
+            <Plus className="h-3.5 w-3.5" />
+            Hinzufügen
+          </button>
+        )}
+      </div>
+
+      {parties.length === 0 && !showForm && (
+        <div className="mt-4 flex flex-col items-center py-6 text-center">
+          <div className="rounded-xl bg-neutral-100 p-3">
+            <Users className="h-5 w-5 text-neutral-400" />
+          </div>
+          <p className="mt-2 text-sm text-neutral-500">
+            Keine Parteien vorhanden.
+          </p>
+          <button
+            onClick={() => setShowForm(true)}
+            className="mt-3 inline-flex items-center gap-1 text-sm text-neutral-500 transition-colors hover:text-neutral-700"
+          >
+            <Plus className="h-3.5 w-3.5" />
+            Erste Partei hinzufügen
+          </button>
+        </div>
+      )}
+
+      <div className="mt-3 space-y-2">
+        {parties.map((party) => (
+          <div
+            key={party.id}
+            className="flex items-center justify-between rounded-md border border-neutral-200 bg-white px-4 py-2.5 transition-colors hover:bg-neutral-50"
+          >
+            <div>
+              <p className="text-sm font-medium text-neutral-900">
+                {party.name}
+              </p>
+              <div className="mt-0.5 flex gap-3 text-xs text-neutral-500">
+                {party.role && <span>{party.role}</span>}
+                {party.representative && (
+                  <span>Vertreter: {party.representative}</span>
+                )}
+              </div>
+            </div>
+            <button
+              onClick={() => deleteMutation.mutate(party.id)}
+              className="rounded p-1 text-neutral-300 transition-colors hover:bg-neutral-100 hover:text-red-500"
+              title="Partei entfernen"
+            >
+              <Trash2 className="h-3.5 w-3.5" />
+            </button>
+          </div>
+        ))}
+      </div>
+
+      {showForm && (
+        <div className="mt-3 rounded-md border border-neutral-200 bg-neutral-50 p-4">
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-medium text-neutral-700">
+              Neue Partei
+            </span>
+            <button
+              onClick={() => setShowForm(false)}
+              className="text-neutral-400 transition-colors hover:text-neutral-600"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          </div>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              if (!form.name.trim()) {
+                toast.error("Bitte Namen eingeben");
+                return;
+              }
+              addMutation.mutate(form);
+            }}
+            className="mt-3 space-y-3"
+          >
+            <input
+              type="text"
+              placeholder="Name der Partei"
+              value={form.name}
+              onChange={(e) => setForm({ ...form, name: e.target.value })}
+              className={inputClass}
+            />
+            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+              <select
+                value={form.role}
+                onChange={(e) => setForm({ ...form, role: e.target.value })}
+                className={inputClass}
+              >
+                <option value="">-- Rolle --</option>
+                {ROLE_OPTIONS.map((r) => (
+                  <option key={r} value={r}>
+                    {r}
+                  </option>
+                ))}
+              </select>
+              <input
+                type="text"
+                placeholder="Vertreter / Anwalt"
+                value={form.representative}
+                onChange={(e) =>
+                  setForm({ ...form, representative: e.target.value })
+                }
+                className={inputClass}
+              />
+            </div>
+            <div className="flex justify-end">
+              <button
+                type="submit"
+                disabled={addMutation.isPending}
+                className="rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-neutral-800 disabled:opacity-50"
+              >
+                {addMutation.isPending ? "Speichern..." : "Hinzufügen"}
+              </button>
+            </div>
+          </form>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/dashboard/QuickActions.tsx

@@ -6,19 +6,19 @@ import { FolderPlus, Clock, Sparkles, CalendarSync } from "lucide-react";
 const actions = [
   {
     label: "Neue Akte",
-    href: "/akten?new=1",
+    href: "/cases/new",
     icon: FolderPlus,
     color: "text-blue-600 bg-blue-50 hover:bg-blue-100",
   },
   {
     label: "Frist eintragen",
-    href: "/fristen?new=1",
+    href: "/fristen",
     icon: Clock,
     color: "text-amber-600 bg-amber-50 hover:bg-amber-100",
   },
   {
     label: "AI Analyse",
-    href: "/ai",
+    href: "/ai/extract",
     icon: Sparkles,
     color: "text-violet-600 bg-violet-50 hover:bg-violet-100",
   },

frontend/src/components/deadlines/DeadlineCalculator.tsx

@@ -0,0 +1,209 @@
+"use client";
+
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { api } from "@/lib/api";
+import type {
+  ProceedingType,
+  CalculateResponse,
+  CalculatedDeadline,
+} from "@/lib/types";
+import { format, parseISO, isPast, isThisWeek } from "date-fns";
+import { de } from "date-fns/locale";
+import {
+  Calculator,
+  Calendar,
+  ArrowRight,
+  AlertTriangle,
+} from "lucide-react";
+import { useState } from "react";
+
+function getTimelineUrgency(dueDate: string): "red" | "amber" | "green" {
+  const due = parseISO(dueDate);
+  if (isPast(due)) return "red";
+  if (isThisWeek(due, { weekStartsOn: 1 })) return "amber";
+  return "green";
+}
+
+const dotColors = {
+  red: "bg-red-500",
+  amber: "bg-amber-500",
+  green: "bg-green-500",
+};
+
+const inputClass =
+  "w-full rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-900 outline-none transition-colors focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400";
+
+export function DeadlineCalculator() {
+  const [proceedingType, setProceedingType] = useState("");
+  const [triggerDate, setTriggerDate] = useState("");
+
+  const { data: proceedingTypes, isLoading: typesLoading } = useQuery({
+    queryKey: ["proceeding-types"],
+    queryFn: () => api.get<ProceedingType[]>("/api/proceeding-types"),
+  });
+
+  const calculateMutation = useMutation({
+    mutationFn: (params: {
+      proceeding_type: string;
+      trigger_event_date: string;
+    }) => api.post<CalculateResponse>("/api/deadlines/calculate", params),
+  });
+
+  function handleCalculate(e: React.FormEvent) {
+    e.preventDefault();
+    if (!proceedingType || !triggerDate) return;
+    calculateMutation.mutate({
+      proceeding_type: proceedingType,
+      trigger_event_date: triggerDate,
+    });
+  }
+
+  const results = calculateMutation.data;
+
+  return (
+    <div className="space-y-6">
+      {/* Input form */}
+      <form
+        onSubmit={handleCalculate}
+        className="rounded-lg border border-neutral-200 bg-white p-5"
+      >
+        <div className="flex items-center gap-2 text-sm font-medium text-neutral-900">
+          <Calculator className="h-4 w-4" />
+          Fristenberechnung
+        </div>
+        <div className="mt-4 grid gap-4 sm:grid-cols-3">
+          <div>
+            <label className="mb-1 block text-xs font-medium text-neutral-500">
+              Verfahrensart
+            </label>
+            <select
+              value={proceedingType}
+              onChange={(e) => setProceedingType(e.target.value)}
+              disabled={typesLoading}
+              className={inputClass}
+            >
+              <option value="">Bitte wählen...</option>
+              {proceedingTypes?.map((pt) => (
+                <option key={pt.id} value={pt.code}>
+                  {pt.name} ({pt.code})
+                </option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="mb-1 block text-xs font-medium text-neutral-500">
+              Auslösedatum
+            </label>
+            <input
+              type="date"
+              value={triggerDate}
+              onChange={(e) => setTriggerDate(e.target.value)}
+              className={inputClass}
+            />
+          </div>
+          <div className="flex items-end">
+            <button
+              type="submit"
+              disabled={
+                !proceedingType ||
+                !triggerDate ||
+                calculateMutation.isPending
+              }
+              className="flex w-full items-center justify-center gap-2 rounded-md bg-neutral-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-neutral-800 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              {calculateMutation.isPending ? "Berechne..." : "Berechnen"}
+              <ArrowRight className="h-3.5 w-3.5" />
+            </button>
+          </div>
+        </div>
+      </form>
+
+      {/* Error */}
+      {calculateMutation.isError && (
+        <div className="flex items-center gap-2 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+          <AlertTriangle className="h-4 w-4 shrink-0" />
+          Fehler bei der Berechnung. Bitte Eingaben prüfen.
+        </div>
+      )}
+
+      {/* Results */}
+      {results && results.deadlines && (
+        <div className="animate-fade-in space-y-3">
+          <div className="flex items-center justify-between">
+            <h3 className="text-sm font-medium text-neutral-900">
+              Berechnete Fristen
+            </h3>
+            <span className="text-xs text-neutral-500">
+              {results.deadlines.length} Fristen ab{" "}
+              {format(parseISO(results.trigger_event_date), "dd. MMM yyyy", {
+                locale: de,
+              })}
+            </span>
+          </div>
+
+          {/* Timeline */}
+          <div className="relative rounded-lg border border-neutral-200 bg-white">
+            {results.deadlines.map((d: CalculatedDeadline, i: number) => {
+              const urgency = getTimelineUrgency(d.due_date);
+              const isLast = i === results.deadlines.length - 1;
+
+              return (
+                <div
+                  key={d.rule_id}
+                  className={`flex gap-3 px-4 py-3 ${!isLast ? "border-b border-neutral-100" : ""}`}
+                >
+                  <div className="flex flex-col items-center pt-1">
+                    <div
+                      className={`h-2.5 w-2.5 shrink-0 rounded-full ${dotColors[urgency]}`}
+                    />
+                    {!isLast && (
+                      <div className="mt-1 w-px flex-1 bg-neutral-200" />
+                    )}
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <div className="flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between sm:gap-2">
+                      <span className="text-sm font-medium text-neutral-900">
+                        {d.title}
+                      </span>
+                      <span className="shrink-0 text-sm font-medium tabular-nums text-neutral-700">
+                        {format(parseISO(d.due_date), "dd.MM.yyyy")}
+                      </span>
+                    </div>
+                    <div className="mt-0.5 flex flex-wrap items-center gap-2 text-xs text-neutral-500">
+                      {d.rule_code && <span>{d.rule_code}</span>}
+                      {d.was_adjusted && (
+                        <>
+                          {d.rule_code && <span>·</span>}
+                          <span className="text-amber-600">
+                            Angepasst (Original:{" "}
+                            {format(
+                              parseISO(d.original_due_date),
+                              "dd.MM.yyyy",
+                            )}
+                            )
+                          </span>
+                        </>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {/* Empty state */}
+      {!results && !calculateMutation.isPending && (
+        <div className="flex flex-col items-center rounded-lg border border-dashed border-neutral-300 bg-white px-6 py-12 text-center">
+          <div className="rounded-xl bg-neutral-100 p-3">
+            <Calendar className="h-6 w-6 text-neutral-400" />
+          </div>
+          <p className="mt-3 text-sm text-neutral-500">
+            Verfahrensart und Auslösedatum wählen, um Fristen zu berechnen
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/deadlines/DeadlineCalendarView.tsx

@@ -0,0 +1,154 @@
+"use client";
+
+import type { Deadline } from "@/lib/types";
+import {
+  format,
+  startOfMonth,
+  endOfMonth,
+  startOfWeek,
+  endOfWeek,
+  eachDayOfInterval,
+  isSameMonth,
+  isToday,
+  parseISO,
+  isPast,
+  isThisWeek,
+  addMonths,
+  subMonths,
+} from "date-fns";
+import { de } from "date-fns/locale";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useState, useMemo } from "react";
+
+interface DeadlineCalendarViewProps {
+  deadlines: Deadline[];
+}
+
+function getUrgency(deadline: Deadline): "red" | "amber" | "green" {
+  if (deadline.status === "completed") return "green";
+  const due = parseISO(deadline.due_date);
+  if (isPast(due)) return "red";
+  if (isThisWeek(due, { weekStartsOn: 1 })) return "amber";
+  return "green";
+}
+
+const dotColors = {
+  red: "bg-red-500",
+  amber: "bg-amber-500",
+  green: "bg-green-500",
+};
+
+export function DeadlineCalendarView({ deadlines }: DeadlineCalendarViewProps) {
+  const [currentMonth, setCurrentMonth] = useState(new Date());
+
+  const monthStart = startOfMonth(currentMonth);
+  const monthEnd = endOfMonth(currentMonth);
+  const calStart = startOfWeek(monthStart, { weekStartsOn: 1 });
+  const calEnd = endOfWeek(monthEnd, { weekStartsOn: 1 });
+  const days = eachDayOfInterval({ start: calStart, end: calEnd });
+
+  const deadlinesByDay = useMemo(() => {
+    const map = new Map<string, Deadline[]>();
+    for (const d of deadlines) {
+      if (d.status === "completed") continue;
+      const key = d.due_date.slice(0, 10);
+      const existing = map.get(key) || [];
+      existing.push(d);
+      map.set(key, existing);
+    }
+    return map;
+  }, [deadlines]);
+
+  const weekDays = ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"];
+
+  return (
+    <div className="rounded-lg border border-neutral-200 bg-white">
+      {/* Header */}
+      <div className="flex items-center justify-between border-b border-neutral-200 px-4 py-3">
+        <button
+          onClick={() => setCurrentMonth(subMonths(currentMonth, 1))}
+          className="rounded-md p-1 text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600"
+        >
+          <ChevronLeft className="h-4 w-4" />
+        </button>
+        <span className="text-sm font-medium text-neutral-900">
+          {format(currentMonth, "MMMM yyyy", { locale: de })}
+        </span>
+        <button
+          onClick={() => setCurrentMonth(addMonths(currentMonth, 1))}
+          className="rounded-md p-1 text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600"
+        >
+          <ChevronRight className="h-4 w-4" />
+        </button>
+      </div>
+
+      {/* Weekday labels */}
+      <div className="grid grid-cols-7 border-b border-neutral-100">
+        {weekDays.map((d) => (
+          <div key={d} className="px-2 py-2 text-center text-xs font-medium text-neutral-400">
+            {d}
+          </div>
+        ))}
+      </div>
+
+      {/* Days grid */}
+      <div className="grid grid-cols-7">
+        {days.map((day, i) => {
+          const key = format(day, "yyyy-MM-dd");
+          const dayDeadlines = deadlinesByDay.get(key) || [];
+          const inMonth = isSameMonth(day, currentMonth);
+          const today = isToday(day);
+
+          return (
+            <div
+              key={i}
+              className={`min-h-[4.5rem] border-b border-r border-neutral-100 p-1.5 ${
+                !inMonth ? "bg-neutral-50" : ""
+              }`}
+            >
+              <div
+                className={`mb-1 text-right text-xs ${
+                  today
+                    ? "font-bold text-neutral-900"
+                    : inMonth
+                      ? "text-neutral-600"
+                      : "text-neutral-300"
+                }`}
+              >
+                {today ? (
+                  <span className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-neutral-900 text-white">
+                    {format(day, "d")}
+                  </span>
+                ) : (
+                  format(day, "d")
+                )}
+              </div>
+              <div className="space-y-0.5">
+                {dayDeadlines.slice(0, 3).map((dl) => {
+                  const urgency = getUrgency(dl);
+                  return (
+                    <div
+                      key={dl.id}
+                      className="flex items-center gap-1 truncate"
+                      title={dl.title}
+                    >
+                      <div className={`h-1.5 w-1.5 shrink-0 rounded-full ${dotColors[urgency]}`} />
+                      <span className="truncate text-[10px] text-neutral-700">
+                        {dl.title}
+                      </span>
+                    </div>
+                  );
+                })}
+                {dayDeadlines.length > 3 && (
+                  <div className="text-[10px] text-neutral-400">
+                    +{dayDeadlines.length - 3} mehr
+                  </div>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

frontend/src/components/deadlines/DeadlineList.tsx

@@ -0,0 +1,288 @@
+"use client";
+
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { api } from "@/lib/api";
+import type { Deadline, Case } from "@/lib/types";
+import { format, isPast, isThisWeek, parseISO } from "date-fns";
+import { de } from "date-fns/locale";
+import { Check, Clock, Filter } from "lucide-react";
+import { toast } from "sonner";
+import { useState, useMemo } from "react";
+import { EmptyState } from "@/components/ui/EmptyState";
+
+type StatusFilter = "all" | "pending" | "completed" | "overdue";
+
+function getUrgency(deadline: Deadline): "red" | "amber" | "green" {
+  if (deadline.status === "completed") return "green";
+  const due = parseISO(deadline.due_date);
+  if (isPast(due)) return "red";
+  if (isThisWeek(due, { weekStartsOn: 1 })) return "amber";
+  return "green";
+}
+
+const urgencyConfig = {
+  red: {
+    bg: "bg-red-50",
+    border: "border-red-200",
+    badge: "bg-red-100 text-red-700",
+    dot: "bg-red-500",
+    label: "Überfällig",
+  },
+  amber: {
+    bg: "bg-amber-50",
+    border: "border-amber-200",
+    badge: "bg-amber-100 text-amber-700",
+    dot: "bg-amber-500",
+    label: "Diese Woche",
+  },
+  green: {
+    bg: "bg-white",
+    border: "border-neutral-200",
+    badge: "bg-green-100 text-green-700",
+    dot: "bg-green-500",
+    label: "OK",
+  },
+};
+
+const selectClass =
+  "rounded-md border border-neutral-200 bg-white px-2.5 py-1 text-sm text-neutral-700 transition-colors focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400 outline-none";
+
+export function DeadlineList() {
+  const queryClient = useQueryClient();
+  const [statusFilter, setStatusFilter] = useState<StatusFilter>("all");
+  const [caseFilter, setCaseFilter] = useState<string>("all");
+
+  const { data: deadlines, isLoading } = useQuery({
+    queryKey: ["deadlines"],
+    queryFn: () => api.get<Deadline[]>("/api/deadlines"),
+  });
+
+  const { data: cases } = useQuery({
+    queryKey: ["cases"],
+    queryFn: () => api.get<Case[]>("/api/cases"),
+  });
+
+  const completeMutation = useMutation({
+    mutationFn: (id: string) =>
+      api.patch<Deadline>(`/api/deadlines/${id}/complete`),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["deadlines"] });
+      toast.success("Frist als erledigt markiert");
+    },
+    onError: () => {
+      toast.error("Fehler beim Abschließen der Frist");
+    },
+  });
+
+  const caseMap = useMemo(() => {
+    const map = new Map<string, Case>();
+    cases?.forEach((c) => map.set(c.id, c));
+    return map;
+  }, [cases]);
+
+  const filtered = useMemo(() => {
+    if (!deadlines) return [];
+    return deadlines.filter((d) => {
+      if (statusFilter === "pending" && d.status !== "pending") return false;
+      if (statusFilter === "completed" && d.status !== "completed")
+        return false;
+      if (statusFilter === "overdue") {
+        if (d.status === "completed") return false;
+        if (!isPast(parseISO(d.due_date))) return false;
+      }
+      if (caseFilter !== "all" && d.case_id !== caseFilter) return false;
+      return true;
+    });
+  }, [deadlines, statusFilter, caseFilter]);
+
+  const counts = useMemo(() => {
+    if (!deadlines) return { overdue: 0, thisWeek: 0, ok: 0 };
+    let overdue = 0,
+      thisWeek = 0,
+      ok = 0;
+    for (const d of deadlines) {
+      if (d.status === "completed") continue;
+      const urgency = getUrgency(d);
+      if (urgency === "red") overdue++;
+      else if (urgency === "amber") thisWeek++;
+      else ok++;
+    }
+    return { overdue, thisWeek, ok };
+  }, [deadlines]);
+
+  if (isLoading) {
+    return (
+      <div className="space-y-3">
+        {[1, 2, 3, 4, 5].map((i) => (
+          <div
+            key={i}
+            className="h-16 animate-pulse rounded-lg bg-neutral-100"
+          />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Summary cards */}
+      <div className="grid grid-cols-3 gap-3">
+        <button
+          onClick={() =>
+            setStatusFilter(statusFilter === "overdue" ? "all" : "overdue")
+          }
+          className={`rounded-lg border p-3 text-left transition-all ${
+            statusFilter === "overdue"
+              ? "border-red-300 bg-red-50 ring-1 ring-red-200"
+              : "border-neutral-200 bg-white hover:bg-neutral-50"
+          }`}
+        >
+          <div className="text-2xl font-semibold tabular-nums text-red-600">
+            {counts.overdue}
+          </div>
+          <div className="text-xs text-neutral-500">Überfällig</div>
+        </button>
+        <button
+          onClick={() =>
+            setStatusFilter(statusFilter === "pending" ? "all" : "pending")
+          }
+          className={`rounded-lg border p-3 text-left transition-all ${
+            statusFilter === "pending"
+              ? "border-amber-300 bg-amber-50 ring-1 ring-amber-200"
+              : "border-neutral-200 bg-white hover:bg-neutral-50"
+          }`}
+        >
+          <div className="text-2xl font-semibold tabular-nums text-amber-600">
+            {counts.thisWeek}
+          </div>
+          <div className="text-xs text-neutral-500">Diese Woche</div>
+        </button>
+        <button
+          onClick={() => setStatusFilter("all")}
+          className={`rounded-lg border p-3 text-left transition-all ${
+            statusFilter === "all"
+              ? "border-green-300 bg-green-50 ring-1 ring-green-200"
+              : "border-neutral-200 bg-white hover:bg-neutral-50"
+          }`}
+        >
+          <div className="text-2xl font-semibold tabular-nums text-green-600">
+            {counts.ok}
+          </div>
+          <div className="text-xs text-neutral-500">OK</div>
+        </button>
+      </div>
+
+      {/* Filters */}
+      <div className="flex flex-wrap items-center gap-3">
+        <div className="flex items-center gap-1.5 text-sm text-neutral-500">
+          <Filter className="h-3.5 w-3.5" />
+          <span>Filter:</span>
+        </div>
+        <select
+          value={statusFilter}
+          onChange={(e) => setStatusFilter(e.target.value as StatusFilter)}
+          className={selectClass}
+        >
+          <option value="all">Alle Status</option>
+          <option value="pending">Offen</option>
+          <option value="completed">Erledigt</option>
+          <option value="overdue">Überfällig</option>
+        </select>
+        {cases && cases.length > 0 && (
+          <select
+            value={caseFilter}
+            onChange={(e) => setCaseFilter(e.target.value)}
+            className={selectClass}
+          >
+            <option value="all">Alle Akten</option>
+            {cases.map((c) => (
+              <option key={c.id} value={c.id}>
+                {c.case_number} — {c.title}
+              </option>
+            ))}
+          </select>
+        )}
+      </div>
+
+      {/* Deadline list */}
+      {filtered.length === 0 ? (
+        <EmptyState
+          icon={Clock}
+          title="Keine Fristen gefunden"
+          description={
+            statusFilter !== "all" || caseFilter !== "all"
+              ? "Versuchen Sie andere Filtereinstellungen."
+              : "Es sind noch keine Fristen vorhanden."
+          }
+        />
+      ) : (
+        <div className="space-y-2">
+          {filtered.map((deadline) => {
+            const urgency = getUrgency(deadline);
+            const config = urgencyConfig[urgency];
+            const caseInfo = caseMap.get(deadline.case_id);
+
+            return (
+              <div
+                key={deadline.id}
+                className={`flex items-center gap-3 rounded-lg border px-4 py-3 transition-colors ${config.bg} ${config.border}`}
+              >
+                <div
+                  className={`h-2.5 w-2.5 shrink-0 rounded-full ${config.dot}`}
+                />
+                <div className="min-w-0 flex-1">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <span className="truncate text-sm font-medium text-neutral-900">
+                      {deadline.title}
+                    </span>
+                    <span
+                      className={`shrink-0 rounded px-1.5 py-0.5 text-xs font-medium ${config.badge}`}
+                    >
+                      {config.label}
+                    </span>
+                    {deadline.status === "completed" && (
+                      <span className="shrink-0 rounded bg-neutral-100 px-1.5 py-0.5 text-xs font-medium text-neutral-500">
+                        Erledigt
+                      </span>
+                    )}
+                  </div>
+                  <div className="mt-0.5 flex flex-wrap items-center gap-2 text-xs text-neutral-500">
+                    <span>
+                      {format(parseISO(deadline.due_date), "dd. MMM yyyy", {
+                        locale: de,
+                      })}
+                    </span>
+                    {caseInfo && (
+                      <>
+                        <span>·</span>
+                        <span className="truncate">
+                          {caseInfo.case_number} — {caseInfo.title}
+                        </span>
+                      </>
+                    )}
+                    {deadline.source !== "manual" && (
+                      <>
+                        <span>·</span>
+                        <span>{deadline.source}</span>
+                      </>
+                    )}
+                  </div>
+                </div>
+                {deadline.status !== "completed" && (
+                  <button
+                    onClick={() => completeMutation.mutate(deadline.id)}
+                    disabled={completeMutation.isPending}
+                    title="Als erledigt markieren"
+                    className="shrink-0 rounded-md p-1.5 text-neutral-400 transition-colors hover:bg-white hover:text-green-600"
+                  >
+                    <Check className="h-4 w-4" />
+                  </button>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/layout/Header.tsx

@@ -25,16 +25,19 @@ export function Header() {
 
   return (
     <header className="flex h-14 items-center justify-between border-b border-neutral-200 bg-white px-4">
-      <div />
-      <div className="flex items-center gap-3">
+      {/* Spacer for mobile hamburger */}
+      <div className="w-8 lg:w-0" />
+      <div className="flex items-center gap-2 sm:gap-3">
         <TenantSwitcher />
         {email && (
-          <span className="text-sm text-neutral-500">{email}</span>
+          <span className="hidden text-sm text-neutral-500 sm:inline">
+            {email}
+          </span>
         )}
         <button
           onClick={handleLogout}
           title="Abmelden"
-          className="rounded-md p-1.5 text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600"
+          className="rounded-md p-1.5 text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-neutral-600"
         >
           <LogOut className="h-4 w-4" />
         </button>

frontend/src/components/layout/Sidebar.tsx

@@ -9,33 +9,59 @@ import {
   Calendar,
   Brain,
   Settings,
+  Menu,
+  X,
 } from "lucide-react";
+import { useState, useEffect } from "react";
 
 const navigation = [
   { name: "Dashboard", href: "/dashboard", icon: LayoutDashboard },
-  { name: "Akten", href: "/akten", icon: FolderOpen },
+  { name: "Akten", href: "/cases", icon: FolderOpen },
   { name: "Fristen", href: "/fristen", icon: Clock },
   { name: "Termine", href: "/termine", icon: Calendar },
-  { name: "AI Analyse", href: "/ai", icon: Brain },
+  { name: "AI Analyse", href: "/ai/extract", icon: Brain },
   { name: "Einstellungen", href: "/einstellungen", icon: Settings },
 ];
 
 export function Sidebar() {
   const pathname = usePathname();
+  const [mobileOpen, setMobileOpen] = useState(false);
 
-  return (
-    <aside className="flex h-full w-56 flex-col border-r border-neutral-200 bg-white">
-      <div className="flex h-14 items-center border-b border-neutral-200 px-4">
+  // Close on route change
+  useEffect(() => {
+    setMobileOpen(false);
+  }, [pathname]);
+
+  // Close on escape
+  useEffect(() => {
+    function onKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape") setMobileOpen(false);
+    }
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, []);
+
+  const navContent = (
+    <>
+      <div className="flex h-14 items-center justify-between border-b border-neutral-200 px-4">
         <span className="text-sm font-semibold text-neutral-900">KanzlAI</span>
+        <button
+          onClick={() => setMobileOpen(false)}
+          className="rounded-md p-1 text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-neutral-600 lg:hidden"
+          aria-label="Menü schließen"
+        >
+          <X className="h-4 w-4" />
+        </button>
       </div>
       <nav className="flex-1 space-y-0.5 p-2">
         {navigation.map((item) => {
-          const isActive = pathname.startsWith(item.href);
+          const isActive =
+            pathname === item.href || pathname.startsWith(item.href + "/");
           return (
             <Link
               key={item.href}
               href={item.href}
-              className={`flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors ${
+              className={`flex items-center gap-2.5 rounded-md px-2.5 py-2 text-sm transition-colors ${
                 isActive
                   ? "bg-neutral-100 font-medium text-neutral-900"
                   : "text-neutral-600 hover:bg-neutral-50 hover:text-neutral-900"
@@ -47,6 +73,39 @@ export function Sidebar() {
           );
         })}
       </nav>
+    </>
+  );
+
+  return (
+    <>
+      {/* Mobile hamburger button */}
+      <button
+        onClick={() => setMobileOpen(true)}
+        className="fixed left-3 top-3.5 z-40 rounded-md bg-white p-1.5 shadow-sm ring-1 ring-neutral-200 transition-colors hover:bg-neutral-50 lg:hidden"
+        aria-label="Menü öffnen"
+      >
+        <Menu className="h-5 w-5 text-neutral-700" />
+      </button>
+
+      {/* Mobile overlay */}
+      {mobileOpen && (
+        <div
+          className="fixed inset-0 z-40 bg-black/20 backdrop-blur-sm lg:hidden"
+          onClick={() => setMobileOpen(false)}
+        />
+      )}
+
+      {/* Mobile sidebar */}
+      {mobileOpen && (
+        <aside className="animate-slide-in-left fixed inset-y-0 left-0 z-50 flex w-56 flex-col border-r border-neutral-200 bg-white shadow-lg lg:hidden">
+          {navContent}
         </aside>
+      )}
+
+      {/* Desktop sidebar */}
+      <aside className="hidden h-full w-56 flex-col border-r border-neutral-200 bg-white lg:flex">
+        {navContent}
+      </aside>
+    </>
   );
 }

frontend/src/components/layout/TenantSwitcher.tsx

@@ -12,7 +12,9 @@ export function TenantSwitcher() {
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    api.get<TenantWithRole[]>("/tenants").then((data) => {
+    api
+      .get<TenantWithRole[]>("/tenants")
+      .then((data) => {
         setTenants(data);
         const savedId = localStorage.getItem("kanzlai_tenant_id");
         const match = data.find((t) => t.id === savedId) || data[0];
@@ -20,7 +22,8 @@ export function TenantSwitcher() {
           setCurrent(match);
           localStorage.setItem("kanzlai_tenant_id", match.id);
         }
-    }).catch(() => {
+      })
+      .catch(() => {
         // Not authenticated or no tenants
       });
   }, []);
@@ -48,14 +51,16 @@ export function TenantSwitcher() {
     <div ref={ref} className="relative">
       <button
         onClick={() => setOpen(!open)}
-        className="flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-2.5 py-1.5 text-sm text-neutral-700 hover:bg-neutral-50"
+        className="flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-2.5 py-1.5 text-sm text-neutral-700 transition-colors hover:bg-neutral-50"
       >
-        <span className="max-w-[160px] truncate">{current.name}</span>
+        <span className="max-w-[120px] truncate sm:max-w-[160px]">
+          {current.name}
+        </span>
         <ChevronsUpDown className="h-3.5 w-3.5 text-neutral-400" />
       </button>
 
       {open && tenants.length > 1 && (
-        <div className="absolute right-0 top-full z-50 mt-1 w-56 rounded-md border border-neutral-200 bg-white py-1 shadow-lg">
+        <div className="animate-fade-in absolute right-0 top-full z-50 mt-1 w-56 rounded-md border border-neutral-200 bg-white py-1 shadow-lg">
           {tenants.map((tenant) => (
             <button
               key={tenant.id}

frontend/src/components/ui/EmptyState.tsx

@@ -0,0 +1,28 @@
+import type { LucideIcon } from "lucide-react";
+
+interface EmptyStateProps {
+  icon: LucideIcon;
+  title: string;
+  description?: string;
+  action?: React.ReactNode;
+}
+
+export function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  action,
+}: EmptyStateProps) {
+  return (
+    <div className="flex flex-col items-center justify-center rounded-xl border border-dashed border-neutral-300 bg-white px-6 py-12 text-center">
+      <div className="rounded-xl bg-neutral-100 p-3">
+        <Icon className="h-6 w-6 text-neutral-400" />
+      </div>
+      <h3 className="mt-3 text-sm font-medium text-neutral-900">{title}</h3>
+      {description && (
+        <p className="mt-1 max-w-sm text-sm text-neutral-500">{description}</p>
+      )}
+      {action && <div className="mt-4">{action}</div>}
+    </div>
+  );
+}

frontend/src/components/ui/Skeleton.tsx

@@ -0,0 +1,43 @@
+export function Skeleton({ className = "" }: { className?: string }) {
+  return (
+    <div
+      className={`animate-pulse rounded-md bg-neutral-200/60 ${className}`}
+    />
+  );
+}
+
+export function SkeletonCard({ className = "" }: { className?: string }) {
+  return (
+    <div
+      className={`rounded-xl border border-neutral-200 bg-white p-5 ${className}`}
+    >
+      <Skeleton className="h-4 w-24" />
+      <div className="mt-4 space-y-3">
+        <Skeleton className="h-3 w-full" />
+        <Skeleton className="h-3 w-3/4" />
+        <Skeleton className="h-3 w-1/2" />
+      </div>
+    </div>
+  );
+}
+
+export function SkeletonTable({ rows = 5 }: { rows?: number }) {
+  return (
+    <div className="overflow-hidden rounded-md border border-neutral-200 bg-white">
+      <div className="border-b border-neutral-100 px-4 py-3">
+        <Skeleton className="h-3 w-full" />
+      </div>
+      {Array.from({ length: rows }).map((_, i) => (
+        <div
+          key={i}
+          className="flex items-center gap-4 border-b border-neutral-100 px-4 py-3 last:border-b-0"
+        >
+          <Skeleton className="h-3 w-20" />
+          <Skeleton className="h-3 flex-1" />
+          <Skeleton className="h-3 w-16" />
+          <Skeleton className="h-3 w-12" />
+        </div>
+      ))}
+    </div>
+  );
+}

frontend/src/lib/api.ts

@@ -69,9 +69,51 @@ class ApiClient {
     });
   }
 
+  patch<T>(path: string, body?: unknown) {
+    return this.request<T>(path, {
+      method: "PATCH",
+      body: body ? JSON.stringify(body) : undefined,
+    });
+  }
+
   delete<T>(path: string) {
     return this.request<T>(path, { method: "DELETE" });
   }
+
+  async postFormData<T>(path: string, formData: FormData): Promise<T> {
+    const supabase = createClient();
+    const {
+      data: { session },
+    } = await supabase.auth.getSession();
+
+    const headers: HeadersInit = {};
+    if (session?.access_token) {
+      headers["Authorization"] = `Bearer ${session.access_token}`;
+    }
+    const tenantId = typeof window !== "undefined"
+      ? localStorage.getItem("kanzlai_tenant_id")
+      : null;
+    if (tenantId) {
+      headers["X-Tenant-ID"] = tenantId;
+    }
+
+    const res = await fetch(`${this.baseUrl}${path}`, {
+      method: "POST",
+      headers,
+      body: formData,
+    });
+
+    if (!res.ok) {
+      const body = await res.json().catch(() => ({}));
+      const err: ApiError = {
+        error: body.error || res.statusText,
+        status: res.status,
+      };
+      throw err;
+    }
+
+    return res.json();
+  }
 }
 
 export const api = new ApiClient();

frontend/src/lib/types.ts

@@ -104,6 +104,68 @@ export interface Document {
   updated_at: string;
 }
 
+export interface DeadlineRule {
+  id: string;
+  proceeding_type_id?: number;
+  parent_id?: string;
+  code?: string;
+  name: string;
+  description?: string;
+  primary_party?: string;
+  event_type?: string;
+  is_mandatory: boolean;
+  duration_value: number;
+  duration_unit: string;
+  timing?: string;
+  rule_code?: string;
+  deadline_notes?: string;
+  sequence_order: number;
+}
+
+export interface RuleTreeNode extends DeadlineRule {
+  children?: RuleTreeNode[];
+}
+
+export interface ProceedingType {
+  id: number;
+  code: string;
+  name: string;
+  description?: string;
+  jurisdiction?: string;
+  default_color: string;
+  sort_order: number;
+  is_active: boolean;
+}
+
+export interface CalculatedDeadline {
+  rule_code: string;
+  rule_id: string;
+  title: string;
+  due_date: string;
+  original_due_date: string;
+  was_adjusted: boolean;
+}
+
+export interface CalculateResponse {
+  proceeding_type: string;
+  trigger_event_date: string;
+  deadlines: CalculatedDeadline[];
+}
+
+export interface ApiError {
+  error: string;
+  status: number;
+}
+
+export interface PaginatedResponse<T> {
+  data: T[];
+  total: number;
+  page: number;
+  per_page: number;
+}
+
+// Dashboard types
+
 export interface DeadlineSummary {
   overdue_count: number;
   due_this_week: number;
@@ -121,24 +183,20 @@ export interface UpcomingDeadline {
   id: string;
   title: string;
   due_date: string;
+  case_id: string;
   case_number: string;
   case_title: string;
-  status: string;
 }
 
 export interface UpcomingAppointment {
   id: string;
   title: string;
   start_at: string;
-  case_number: string | null;
-  location: string | null;
-}
-
-export interface RecentActivityItem {
-  event_type: string | null;
-  title: string;
-  case_number: string;
-  event_date: string | null;
+  end_at?: string;
+  location?: string;
+  case_id?: string;
+  case_number?: string;
+  case_title?: string;
 }
 
 export interface DashboardData {
@@ -146,17 +204,21 @@ export interface DashboardData {
   case_summary: CaseSummary;
   upcoming_deadlines: UpcomingDeadline[];
   upcoming_appointments: UpcomingAppointment[];
-  recent_activity: RecentActivityItem[];
 }
 
-export interface ApiError {
-  error: string;
-  status: number;
+// AI Extraction types
+
+export interface ExtractedDeadline {
+  title: string;
+  due_date: string | null;
+  duration_value?: number;
+  duration_unit?: string;
+  rule_reference: string;
+  source_quote: string;
+  confidence: number;
 }
 
-export interface PaginatedResponse<T> {
-  data: T[];
-  total: number;
-  page: number;
-  per_page: number;
+export interface ExtractionResponse {
+  deadlines: ExtractedDeadline[];
+  count: number;
 }