feat: add appointment calendar frontend (Phase 1H)

- /termine page with list/calendar view toggle
- AppointmentList: date-grouped list with type/case filtering, summary cards
- AppointmentCalendar: month grid with colored type dots, clickable days/appointments
- AppointmentModal: create/edit/delete with case linking, type selection, location

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

@@ -90,14 +90,14 @@ export default function AIExtractPage() {
 
       await Promise.all(promises);
       toast.success(
-        `${deadlines.length} Frist(en) erfolgreich übernommen.`,
+        `${deadlines.length} Frist(en) erfolgreich uebernommen.`,
       );
-      router.push(`/cases/${selectedCaseId}`);
+      router.push(`/akten/${selectedCaseId}`);
     } catch (err: unknown) {
       const message =
         err && typeof err === "object" && "error" in err
           ? (err as { error: string }).error
-          : "Übernahme fehlgeschlagen";
+          : "Uebernahme fehlgeschlagen";
       toast.error(message);
     } finally {
       setIsAdopting(false);
@@ -105,7 +105,7 @@ export default function AIExtractPage() {
   }
 
   return (
-    <div className="animate-fade-in mx-auto max-w-4xl">
+    <div className="mx-auto max-w-4xl">
       <div className="mb-6 flex items-center gap-3">
         <Brain className="h-5 w-5 text-neutral-500" />
         <div>
@@ -118,7 +118,7 @@ export default function AIExtractPage() {
         </div>
       </div>
 
-      <div className="rounded-lg border border-neutral-200 bg-white p-4 sm:p-6">
+      <div className="rounded-lg border border-neutral-200 bg-white p-6">
         <ExtractionForm
           cases={cases}
           selectedCaseId={selectedCaseId}
@@ -129,7 +129,7 @@ export default function AIExtractPage() {
       </div>
 
       {results !== null && (
-        <div className="animate-fade-in mt-6 rounded-lg border border-neutral-200 bg-white p-4 sm:p-6">
+        <div className="mt-6 rounded-lg border border-neutral-200 bg-white p-6">
           <ExtractionResults
             deadlines={results}
             onAdopt={handleAdopt}

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

@@ -6,19 +6,11 @@ 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 { ArrowLeft, Clock, FileText, Users, Activity } 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[];
@@ -33,13 +25,6 @@ const STATUS_BADGE: Record<string, string> = {
   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 },
@@ -49,43 +34,11 @@ const TABS = [
 
 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({
+  const { data: caseDetail, isLoading } = useQuery({
     queryKey: ["case", id],
     queryFn: () => api.get<CaseDetail>(`/cases/${id}`),
   });
@@ -106,28 +59,17 @@ export default function CaseDetailPage() {
   });
 
   if (isLoading) {
-    return <CaseDetailSkeleton />;
+    return (
+      <div className="py-12 text-center text-sm text-neutral-400">
+        Laden...
+      </div>
+    );
   }
 
-  if (error || !caseDetail) {
+  if (!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 className="py-12 text-center text-sm text-neutral-400">
+        Akte nicht gefunden.
       </div>
     );
   }
@@ -136,28 +78,28 @@ export default function CaseDetailPage() {
   const documents = documentsData ?? [];
 
   return (
-    <div className="animate-fade-in">
+    <div>
       <Link
         href="/cases"
-        className="mb-4 inline-flex items-center gap-1 text-sm text-neutral-500 transition-colors hover:text-neutral-700"
+        className="mb-4 inline-flex items-center gap-1 text-sm text-neutral-500 hover:text-neutral-700"
       >
         <ArrowLeft className="h-3.5 w-3.5" />
-        Zurück zu Akten
+        Zuruck zu Akten
       </Link>
 
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+      <div className="flex items-start justify-between">
         <div>
-          <div className="flex flex-wrap items-center gap-3">
+          <div className="flex 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}
+              {caseDetail.status}
             </span>
           </div>
-          <div className="mt-1 flex flex-wrap gap-x-4 gap-y-1 text-sm text-neutral-500">
+          <div className="mt-1 flex gap-4 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>}
@@ -187,12 +129,12 @@ export default function CaseDetailPage() {
       )}
 
       <div className="mt-6 border-b border-neutral-200">
-        <nav className="-mb-px flex gap-1 overflow-x-auto sm:gap-4">
+        <nav className="-mb-px flex 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 ${
+              className={`inline-flex 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"
@@ -239,14 +181,9 @@ export default function CaseDetailPage() {
 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">
+      <p className="py-8 text-center text-sm text-neutral-400">
         Keine Fristen vorhanden.
       </p>
-      </div>
     );
   }
 
@@ -256,18 +193,12 @@ function DeadlinesList({ deadlines }: { deadlines: Deadline[] }) {
     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"
+          className="flex items-center justify-between rounded-md border border-neutral-200 bg-white px-4 py-3"
         >
           <div>
             <p className="text-sm font-medium text-neutral-900">{d.title}</p>
@@ -281,9 +212,9 @@ function DeadlinesList({ deadlines }: { deadlines: Deadline[] }) {
             <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}
+              {d.status}
             </span>
-            <span className="whitespace-nowrap text-sm text-neutral-500">
+            <span className="text-sm text-neutral-500">
               {format(new Date(d.due_date), "d. MMM yyyy", { locale: de })}
             </span>
           </div>
@@ -296,14 +227,9 @@ function DeadlinesList({ deadlines }: { deadlines: Deadline[] }) {
 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">
+      <p className="py-8 text-center text-sm text-neutral-400">
         Keine Dokumente vorhanden.
       </p>
-      </div>
     );
   }
 
@@ -330,7 +256,7 @@ function DocumentsList({ documents }: { documents: Document[] }) {
           </div>
           <a
             href={`/api/documents/${doc.id}`}
-            className="text-sm text-neutral-500 transition-colors hover:text-neutral-700"
+            className="text-sm text-neutral-500 hover:text-neutral-700"
           >
             Herunterladen
           </a>

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

@@ -26,19 +26,19 @@ export default function NewCasePage() {
   });
 
   return (
-    <div className="animate-fade-in mx-auto max-w-2xl">
+    <div className="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"
+        className="mb-4 inline-flex items-center gap-1 text-sm text-neutral-500 hover:text-neutral-700"
       >
         <ArrowLeft className="h-3.5 w-3.5" />
-        Zurück zu Akten
+        Zuruck 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">
+      <div className="mt-6 rounded-md border border-neutral-200 bg-white p-6">
         <CaseForm
           onSubmit={(data) => mutation.mutate(data)}
           isSubmitting={mutation.isPending}

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

@@ -5,15 +5,13 @@ 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 { Plus, Search } 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: "pending", label: "Anhangig" },
   { value: "closed", label: "Geschlossen" },
   { value: "archived", label: "Archiviert" },
 ];
@@ -22,9 +20,9 @@ const TYPE_OPTIONS = [
   { value: "", label: "Alle Typen" },
   { value: "INF", label: "Verletzungsklage" },
   { value: "REV", label: "Widerruf" },
-  { value: "CCR", label: "Einstweilige Verfügung" },
+  { value: "CCR", label: "Einstweilige Verfugung" },
   { value: "APP", label: "Berufung" },
-  { value: "PI", label: "Vorläufiger Rechtsschutz" },
+  { value: "PI", label: "Vorlaufiger Rechtsschutz" },
   { value: "ZPO_CIVIL", label: "ZPO Zivilverfahren" },
 ];
 
@@ -35,16 +33,6 @@ const STATUS_BADGE: Record<string, string> = {
   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();
@@ -71,24 +59,24 @@ export default function CasesPage() {
   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>
+      <div className="flex items-center 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"}
+            {data ? `${data.total} Akten` : "Laden..."}
           </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"
+          className="inline-flex items-center gap-1.5 rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white 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="mt-4 flex items-center gap-3">
         <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
@@ -96,14 +84,13 @@ export default function CasesPage() {
             placeholder="Suchen nach Aktenzeichen, Titel..."
             value={search}
             onChange={(e) => setSearch(e.target.value)}
-            className={`w-full pl-9 pr-3 ${inputClass}`}
+            className="w-full rounded-md border border-neutral-200 bg-white py-1.5 pl-9 pr-3 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400"
           />
         </div>
-        <div className="flex gap-3">
         <select
           value={status}
           onChange={(e) => setStatus(e.target.value)}
-            className={inputClass}
+          className="rounded-md border border-neutral-200 bg-white px-2.5 py-1.5 text-sm outline-none focus:border-neutral-400"
         >
           {STATUS_OPTIONS.map((o) => (
             <option key={o.value} value={o.value}>
@@ -114,7 +101,7 @@ export default function CasesPage() {
         <select
           value={type}
           onChange={(e) => setType(e.target.value)}
-            className={inputClass}
+          className="rounded-md border border-neutral-200 bg-white px-2.5 py-1.5 text-sm outline-none focus:border-neutral-400"
         >
           {TYPE_OPTIONS.map((o) => (
             <option key={o.value} value={o.value}>
@@ -123,49 +110,27 @@ export default function CasesPage() {
           ))}
         </select>
       </div>
-      </div>
 
       <div className="mt-4">
         {isLoading ? (
-          <SkeletonTable rows={5} />
+          <div className="py-12 text-center text-sm text-neutral-400">
+            Laden...
+          </div>
         ) : 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="py-12 text-center text-sm text-neutral-400">
+            Keine Akten gefunden.
+          </div>
         ) : (
-          <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">Typ</th>
+                  <th className="px-4 py-2.5">Gericht</th>
                   <th className="px-4 py-2.5">Status</th>
-                      <th className="hidden px-4 py-2.5 sm:table-cell">
-                        Erstellt
-                      </th>
+                  <th className="px-4 py-2.5">Erstellt</th>
                 </tr>
               </thead>
               <tbody className="divide-y divide-neutral-100">
@@ -173,28 +138,26 @@ export default function CasesPage() {
                   <tr
                     key={c.id}
                     onClick={() => router.push(`/cases/${c.id}`)}
-                        className="cursor-pointer transition-colors hover:bg-neutral-50"
+                    className="cursor-pointer hover:bg-neutral-50"
                   >
-                        <td className="whitespace-nowrap px-4 py-2.5 font-medium text-neutral-900">
+                    <td className="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">
+                    <td className="px-4 py-2.5 text-neutral-700">{c.title}</td>
+                    <td className="px-4 py-2.5 text-neutral-500">
                       {c.case_type ?? "-"}
                     </td>
-                        <td className="hidden px-4 py-2.5 text-neutral-500 lg:table-cell">
+                    <td className="px-4 py-2.5 text-neutral-500">
                       {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}
+                        {c.status}
                       </span>
                     </td>
-                        <td className="hidden whitespace-nowrap px-4 py-2.5 text-neutral-400 sm:table-cell">
+                    <td className="px-4 py-2.5 text-neutral-400">
                       {new Date(c.created_at).toLocaleDateString("de-DE")}
                     </td>
                   </tr>
@@ -202,8 +165,6 @@ export default function CasesPage() {
               </tbody>
             </table>
           </div>
-            </div>
-          </div>
         )}
       </div>
     </div>

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

@@ -8,71 +8,35 @@ 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 { 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>
-  );
-}
+import { Loader2 } from "lucide-react";
 
 export default function DashboardPage() {
-  const { data, isLoading, error, refetch } = useQuery({
+  const { data, isLoading, error } = useQuery({
     queryKey: ["dashboard"],
     queryFn: () => api.get<DashboardData>("/dashboard"),
     refetchInterval: 60_000,
   });
 
   if (isLoading) {
-    return <DashboardSkeleton />;
+    return (
+      <div className="flex h-full items-center justify-center">
+        <Loader2 className="h-6 w-6 animate-spin text-neutral-400" />
+      </div>
+    );
   }
 
   if (error || !data) {
     return (
-      <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.
+      <div className="flex h-full items-center justify-center">
+        <p className="text-sm text-neutral-500">
+          Dashboard konnte nicht geladen werden.
         </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="animate-fade-in mx-auto max-w-6xl space-y-6">
+    <div className="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">
@@ -80,15 +44,20 @@ 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

@@ -20,12 +20,12 @@ export default function FristenPage() {
   });
 
   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 className="space-y-4">
+      <div className="flex items-center 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
+            Alle Fristen im Uberblick
           </p>
         </div>
         <div className="flex items-center gap-2">

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

@@ -6,20 +6,18 @@ import Link from "next/link";
 
 export default function FristenrechnerPage() {
   return (
-    <div className="animate-fade-in space-y-4">
+    <div className="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"
+          className="mb-2 inline-flex items-center gap-1 text-sm text-neutral-500 hover:text-neutral-700"
         >
           <ArrowLeft className="h-3.5 w-3.5" />
-          Zurück zu Fristen
+          Zuruck zu Fristen
         </Link>
-        <h1 className="text-lg font-semibold text-neutral-900">
-          Fristenrechner
-        </h1>
+        <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
+          Berechnen Sie Fristen basierend auf Verfahrensart und Auslosedatum
         </p>
       </div>
       <DeadlineCalculator />

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-4 sm:p-6">{children}</main>
+        <main className="flex-1 overflow-y-auto p-6">{children}</main>
       </div>
     </div>
   );

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

@@ -0,0 +1,99 @@
+"use client";
+
+import { AppointmentList } from "@/components/appointments/AppointmentList";
+import { AppointmentCalendar } from "@/components/appointments/AppointmentCalendar";
+import { AppointmentModal } from "@/components/appointments/AppointmentModal";
+import { useQuery } from "@tanstack/react-query";
+import { api } from "@/lib/api";
+import type { Appointment } from "@/lib/types";
+import { Calendar, List, Plus } from "lucide-react";
+import { useState } from "react";
+
+type ViewMode = "list" | "calendar";
+
+export default function TerminePage() {
+  const [view, setView] = useState<ViewMode>("list");
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editingAppointment, setEditingAppointment] = useState<Appointment | null>(null);
+
+  const { data: appointments } = useQuery({
+    queryKey: ["appointments"],
+    queryFn: () => api.get<Appointment[]>("/api/appointments"),
+  });
+
+  function handleEdit(appointment: Appointment) {
+    setEditingAppointment(appointment);
+    setModalOpen(true);
+  }
+
+  function handleCreate() {
+    setEditingAppointment(null);
+    setModalOpen(true);
+  }
+
+  function handleClose() {
+    setModalOpen(false);
+    setEditingAppointment(null);
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-lg font-semibold text-neutral-900">Termine</h1>
+          <p className="mt-0.5 text-sm text-neutral-500">
+            Alle Termine im Uberblick
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={handleCreate}
+            className="flex items-center gap-1.5 rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-neutral-800"
+          >
+            <Plus className="h-3.5 w-3.5" />
+            Neuer Termin
+          </button>
+          <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" ? (
+        <AppointmentList onEdit={handleEdit} />
+      ) : (
+        <AppointmentCalendar
+          appointments={appointments || []}
+          onAppointmentClick={handleEdit}
+        />
+      )}
+
+      <AppointmentModal
+        open={modalOpen}
+        onClose={handleClose}
+        appointment={editingAppointment}
+      />
+    </div>
+  );
+}

frontend/src/app/globals.css

@@ -10,19 +10,6 @@ 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);
@@ -37,31 +24,3 @@ textarea:focus-visible {
 .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

@@ -13,9 +13,6 @@ interface ExtractionFormProps {
   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,
@@ -66,10 +63,10 @@ export function ExtractionForm({
           id="case-select"
           value={selectedCaseId}
           onChange={(e) => onCaseChange(e.target.value)}
-          className={inputClass}
+          className="w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 focus:border-neutral-500 focus:outline-none focus:ring-1 focus:ring-neutral-500"
           disabled={isLoading}
         >
-          <option value="">Akte auswählen...</option>
+          <option value="">Akte auswaehlen...</option>
           {cases.map((c) => (
             <option key={c.id} value={c.id}>
               {c.case_number} - {c.title}
@@ -98,7 +95,7 @@ export function ExtractionForm({
               type="button"
               onClick={removeFile}
               disabled={isLoading}
-              className="rounded p-1 text-neutral-400 transition-colors hover:bg-neutral-200 hover:text-neutral-600"
+              className="rounded p-1 text-neutral-400 hover:bg-neutral-200 hover:text-neutral-600"
             >
               <X className="h-4 w-4" />
             </button>
@@ -145,10 +142,10 @@ export function ExtractionForm({
             setText(e.target.value);
             if (e.target.value.trim()) setFile(null);
           }}
-          placeholder="Gerichtsschriftsatz, Beschluss oder sonstigen Text hier einfügen..."
+          placeholder="Gerichtsschriftsatz, Beschluss oder sonstigen Text hier einfuegen..."
           rows={6}
           disabled={isLoading}
-          className={`${inputClass} resize-y placeholder:text-neutral-400 disabled:opacity-50`}
+          className="w-full rounded-md border border-neutral-300 px-3 py-2 text-sm text-neutral-900 placeholder:text-neutral-400 focus:border-neutral-500 focus:outline-none focus:ring-1 focus:ring-neutral-500 disabled:opacity-50"
         />
       </div>
 

frontend/src/components/ai/ExtractionResults.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { Trash2, Check, Pencil, X, Loader2, Brain } from "lucide-react";
+import { Trash2, Check, Pencil, X, Loader2 } from "lucide-react";
 import type { ExtractedDeadline } from "@/lib/types";
 
 interface ExtractionResultsProps {
@@ -22,9 +22,6 @@ function confidenceLabel(confidence: number): string {
   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,
@@ -59,11 +56,8 @@ export function ExtractionResults({
 
   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">
+      <div className="rounded-md border border-neutral-200 bg-neutral-50 p-6 text-center">
+        <p className="text-sm text-neutral-500">
           Keine Fristen gefunden. Alle extrahierten Fristen wurden entfernt.
         </p>
       </div>
@@ -72,7 +66,7 @@ export function ExtractionResults({
 
   return (
     <div className="space-y-4">
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+      <div className="flex items-center justify-between">
         <h3 className="text-sm font-medium text-neutral-900">
           {deadlines.length} Frist{deadlines.length !== 1 ? "en" : ""} erkannt
         </h3>
@@ -84,19 +78,18 @@ export function ExtractionResults({
           {isAdopting ? (
             <>
               <Loader2 className="h-4 w-4 animate-spin" />
-              Übernehme...
+              Uebernehme...
             </>
           ) : (
             <>
               <Check className="h-4 w-4" />
-              Fristen übernehmen
+              Fristen uebernehmen
             </>
           )}
         </button>
       </div>
 
-      {/* Mobile: card layout, Desktop: table */}
-      <div className="hidden overflow-hidden rounded-md border border-neutral-200 sm:block">
+      <div className="overflow-hidden rounded-md border border-neutral-200">
         <table className="w-full text-sm">
           <thead>
             <tr className="border-b border-neutral-200 bg-neutral-50">
@@ -104,7 +97,7 @@ export function ExtractionResults({
                 Frist
               </th>
               <th className="px-4 py-2.5 text-left font-medium text-neutral-700">
-                Fälligkeitsdatum
+                Faelligkeitsdatum
               </th>
               <th className="px-4 py-2.5 text-left font-medium text-neutral-700">
                 Rechtsgrundlage
@@ -112,7 +105,7 @@ export function ExtractionResults({
               <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">
+              <th className="px-4 py-2.5 text-left font-medium text-neutral-700">
                 Quellenangabe
               </th>
               <th className="px-4 py-2.5 text-right font-medium text-neutral-700">
@@ -124,7 +117,7 @@ export function ExtractionResults({
             {deadlines.map((d, i) => (
               <tr
                 key={i}
-                className="border-b border-neutral-100 transition-colors last:border-b-0 hover:bg-neutral-50"
+                className="border-b border-neutral-100 last:border-b-0"
               >
                 {editingIndex === i && editForm ? (
                   <>
@@ -134,7 +127,7 @@ export function ExtractionResults({
                         onChange={(e) =>
                           setEditForm({ ...editForm, title: e.target.value })
                         }
-                        className={editInputClass}
+                        className="w-full rounded border border-neutral-300 px-2 py-1 text-sm"
                       />
                     </td>
                     <td className="px-4 py-2">
@@ -147,7 +140,7 @@ export function ExtractionResults({
                             due_date: e.target.value || null,
                           })
                         }
-                        className={editInputClass}
+                        className="rounded border border-neutral-300 px-2 py-1 text-sm"
                       />
                     </td>
                     <td className="px-4 py-2">
@@ -159,7 +152,7 @@ export function ExtractionResults({
                             rule_reference: e.target.value,
                           })
                         }
-                        className={editInputClass}
+                        className="w-full rounded border border-neutral-300 px-2 py-1 text-sm"
                       />
                     </td>
                     <td className="px-4 py-2">
@@ -169,21 +162,21 @@ export function ExtractionResults({
                         {confidenceLabel(editForm.confidence)}
                       </span>
                     </td>
-                    <td className="hidden px-4 py-2 text-xs text-neutral-500 lg:table-cell">
+                    <td className="px-4 py-2 text-xs text-neutral-500">
                       {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"
+                          className="rounded p-1 text-green-600 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"
+                          className="rounded p-1 text-neutral-400 hover:bg-neutral-100"
                           title="Abbrechen"
                         >
                           <X className="h-4 w-4" />
@@ -212,21 +205,21 @@ export function ExtractionResults({
                         {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">
+                    <td className="max-w-48 truncate px-4 py-2.5 text-xs text-neutral-500">
                       {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"
+                          className="rounded p-1 text-neutral-400 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"
+                          className="rounded p-1 text-neutral-400 hover:bg-red-50 hover:text-red-600"
                           title="Entfernen"
                         >
                           <Trash2 className="h-3.5 w-3.5" />
@@ -240,53 +233,6 @@ export function ExtractionResults({
           </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/appointments/AppointmentCalendar.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import type { Appointment } from "@/lib/types";
+import {
+  format,
+  startOfMonth,
+  endOfMonth,
+  startOfWeek,
+  endOfWeek,
+  eachDayOfInterval,
+  isSameMonth,
+  isToday,
+  parseISO,
+  addMonths,
+  subMonths,
+} from "date-fns";
+import { de } from "date-fns/locale";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useState, useMemo } from "react";
+
+const TYPE_DOT_COLORS: Record<string, string> = {
+  hearing: "bg-blue-500",
+  meeting: "bg-violet-500",
+  consultation: "bg-emerald-500",
+  deadline_hearing: "bg-amber-500",
+  other: "bg-neutral-400",
+};
+
+interface AppointmentCalendarProps {
+  appointments: Appointment[];
+  onDayClick?: (date: string) => void;
+  onAppointmentClick?: (appointment: Appointment) => void;
+}
+
+export function AppointmentCalendar({
+  appointments,
+  onDayClick,
+  onAppointmentClick,
+}: AppointmentCalendarProps) {
+  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 appointmentsByDay = useMemo(() => {
+    const map = new Map<string, Appointment[]>();
+    for (const a of appointments) {
+      const key = a.start_at.slice(0, 10);
+      const existing = map.get(key) || [];
+      existing.push(a);
+      map.set(key, existing);
+    }
+    return map;
+  }, [appointments]);
+
+  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 dayAppointments = appointmentsByDay.get(key) || [];
+          const inMonth = isSameMonth(day, currentMonth);
+          const today = isToday(day);
+
+          return (
+            <div
+              key={i}
+              onClick={() => onDayClick?.(key)}
+              className={`min-h-[5rem] cursor-pointer border-b border-r border-neutral-100 p-1.5 transition-colors hover:bg-neutral-50 ${
+                !inMonth ? "bg-neutral-50/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">
+                {dayAppointments.slice(0, 3).map((appt) => {
+                  const dotColor =
+                    TYPE_DOT_COLORS[appt.appointment_type ?? "other"] ?? TYPE_DOT_COLORS.other;
+                  return (
+                    <div
+                      key={appt.id}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onAppointmentClick?.(appt);
+                      }}
+                      className="flex items-center gap-1 truncate rounded px-0.5 hover:bg-neutral-100"
+                      title={`${format(parseISO(appt.start_at), "HH:mm")} ${appt.title}`}
+                    >
+                      <div className={`h-1.5 w-1.5 shrink-0 rounded-full ${dotColor}`} />
+                      <span className="truncate text-[10px] text-neutral-700">
+                        <span className="font-medium">
+                          {format(parseISO(appt.start_at), "HH:mm")}
+                        </span>{" "}
+                        {appt.title}
+                      </span>
+                    </div>
+                  );
+                })}
+                {dayAppointments.length > 3 && (
+                  <div className="text-[10px] text-neutral-400">
+                    +{dayAppointments.length - 3} mehr
+                  </div>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

frontend/src/components/appointments/AppointmentList.tsx

@@ -0,0 +1,265 @@
+"use client";
+
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { api } from "@/lib/api";
+import type { Appointment, Case } from "@/lib/types";
+import { format, parseISO, isToday, isTomorrow, isThisWeek, isPast } from "date-fns";
+import { de } from "date-fns/locale";
+import { Calendar, Filter, MapPin, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+import { useState, useMemo } from "react";
+
+const TYPE_LABELS: Record<string, string> = {
+  hearing: "Verhandlung",
+  meeting: "Besprechung",
+  consultation: "Beratung",
+  deadline_hearing: "Fristanhorung",
+  other: "Sonstiges",
+};
+
+const TYPE_COLORS: Record<string, string> = {
+  hearing: "bg-blue-100 text-blue-700",
+  meeting: "bg-violet-100 text-violet-700",
+  consultation: "bg-emerald-100 text-emerald-700",
+  deadline_hearing: "bg-amber-100 text-amber-700",
+  other: "bg-neutral-100 text-neutral-600",
+};
+
+interface AppointmentListProps {
+  onEdit: (appointment: Appointment) => void;
+}
+
+function groupByDate(appointments: Appointment[]): Map<string, Appointment[]> {
+  const groups = new Map<string, Appointment[]>();
+  for (const a of appointments) {
+    const key = a.start_at.slice(0, 10);
+    const group = groups.get(key) || [];
+    group.push(a);
+    groups.set(key, group);
+  }
+  return groups;
+}
+
+function formatDateLabel(dateStr: string): string {
+  const d = parseISO(dateStr);
+  if (isToday(d)) return "Heute";
+  if (isTomorrow(d)) return "Morgen";
+  return format(d, "EEEE, d. MMMM yyyy", { locale: de });
+}
+
+export function AppointmentList({ onEdit }: AppointmentListProps) {
+  const queryClient = useQueryClient();
+  const [caseFilter, setCaseFilter] = useState("all");
+  const [typeFilter, setTypeFilter] = useState("all");
+
+  const { data: appointments, isLoading } = useQuery({
+    queryKey: ["appointments"],
+    queryFn: () => api.get<Appointment[]>("/api/appointments"),
+  });
+
+  const { data: cases } = useQuery({
+    queryKey: ["cases"],
+    queryFn: () => api.get<{ cases: Case[]; total: number }>("/api/cases"),
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => api.delete(`/api/appointments/${id}`),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["appointments"] });
+      toast.success("Termin geloscht");
+    },
+    onError: () => toast.error("Fehler beim Loschen"),
+  });
+
+  const caseMap = useMemo(() => {
+    const map = new Map<string, Case>();
+    cases?.cases?.forEach((c) => map.set(c.id, c));
+    return map;
+  }, [cases]);
+
+  const filtered = useMemo(() => {
+    if (!appointments) return [];
+    return appointments
+      .filter((a) => {
+        if (caseFilter !== "all" && a.case_id !== caseFilter) return false;
+        if (typeFilter !== "all" && a.appointment_type !== typeFilter) return false;
+        return true;
+      })
+      .sort((a, b) => a.start_at.localeCompare(b.start_at));
+  }, [appointments, caseFilter, typeFilter]);
+
+  const grouped = useMemo(() => groupByDate(filtered), [filtered]);
+
+  const counts = useMemo(() => {
+    if (!appointments) return { today: 0, thisWeek: 0, total: 0 };
+    let today = 0;
+    let thisWeek = 0;
+    for (const a of appointments) {
+      const d = parseISO(a.start_at);
+      if (isToday(d)) today++;
+      if (isThisWeek(d, { weekStartsOn: 1 })) thisWeek++;
+    }
+    return { today, thisWeek, total: appointments.length };
+  }, [appointments]);
+
+  if (isLoading) {
+    return (
+      <div className="space-y-3">
+        {[1, 2, 3, 4].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">
+        <div className="rounded-lg border border-neutral-200 bg-white p-3">
+          <div className="text-2xl font-semibold text-neutral-900">{counts.today}</div>
+          <div className="text-xs text-neutral-500">Heute</div>
+        </div>
+        <div className="rounded-lg border border-neutral-200 bg-white p-3">
+          <div className="text-2xl font-semibold text-neutral-900">{counts.thisWeek}</div>
+          <div className="text-xs text-neutral-500">Diese Woche</div>
+        </div>
+        <div className="rounded-lg border border-neutral-200 bg-white p-3">
+          <div className="text-2xl font-semibold text-neutral-900">{counts.total}</div>
+          <div className="text-xs text-neutral-500">Gesamt</div>
+        </div>
+      </div>
+
+      {/* Filters */}
+      <div className="flex 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={typeFilter}
+          onChange={(e) => setTypeFilter(e.target.value)}
+          className="rounded-md border border-neutral-200 bg-white px-2.5 py-1 text-sm text-neutral-700"
+        >
+          <option value="all">Alle Typen</option>
+          {Object.entries(TYPE_LABELS).map(([value, label]) => (
+            <option key={value} value={value}>
+              {label}
+            </option>
+          ))}
+        </select>
+        {cases?.cases && cases.cases.length > 0 && (
+          <select
+            value={caseFilter}
+            onChange={(e) => setCaseFilter(e.target.value)}
+            className="rounded-md border border-neutral-200 bg-white px-2.5 py-1 text-sm text-neutral-700"
+          >
+            <option value="all">Alle Akten</option>
+            {cases.cases.map((c) => (
+              <option key={c.id} value={c.id}>
+                {c.case_number} — {c.title}
+              </option>
+            ))}
+          </select>
+        )}
+      </div>
+
+      {/* Grouped list */}
+      {filtered.length === 0 ? (
+        <div className="rounded-lg border border-neutral-200 bg-white p-8 text-center">
+          <Calendar className="mx-auto h-8 w-8 text-neutral-300" />
+          <p className="mt-2 text-sm text-neutral-500">Keine Termine gefunden</p>
+        </div>
+      ) : (
+        <div className="space-y-4">
+          {Array.from(grouped.entries()).map(([dateKey, dayAppointments]) => {
+            const dateIsPast = isPast(parseISO(dateKey + "T23:59:59"));
+            return (
+              <div key={dateKey}>
+                <div className={`mb-2 text-xs font-medium uppercase tracking-wider ${dateIsPast ? "text-neutral-400" : "text-neutral-600"}`}>
+                  {formatDateLabel(dateKey)}
+                </div>
+                <div className="space-y-1.5">
+                  {dayAppointments.map((appt) => {
+                    const caseInfo = appt.case_id ? caseMap.get(appt.case_id) : null;
+                    const typeBadge = appt.appointment_type
+                      ? TYPE_COLORS[appt.appointment_type] ?? TYPE_COLORS.other
+                      : null;
+                    const typeLabel = appt.appointment_type
+                      ? TYPE_LABELS[appt.appointment_type] ?? appt.appointment_type
+                      : null;
+
+                    return (
+                      <div
+                        key={appt.id}
+                        onClick={() => onEdit(appt)}
+                        className={`flex cursor-pointer items-start gap-3 rounded-lg border px-4 py-3 transition-colors hover:bg-neutral-50 ${
+                          dateIsPast
+                            ? "border-neutral-150 bg-neutral-50/50"
+                            : "border-neutral-200 bg-white"
+                        }`}
+                      >
+                        <div className="shrink-0 pt-0.5 text-center">
+                          <div className="text-xs font-medium text-neutral-900">
+                            {format(parseISO(appt.start_at), "HH:mm")}
+                          </div>
+                          {appt.end_at && (
+                            <div className="text-[10px] text-neutral-400">
+                              {format(parseISO(appt.end_at), "HH:mm")}
+                            </div>
+                          )}
+                        </div>
+                        <div className="min-w-0 flex-1">
+                          <div className="flex items-center gap-2">
+                            <span className={`truncate text-sm font-medium ${dateIsPast ? "text-neutral-500" : "text-neutral-900"}`}>
+                              {appt.title}
+                            </span>
+                            {typeBadge && typeLabel && (
+                              <span className={`shrink-0 rounded px-1.5 py-0.5 text-xs font-medium ${typeBadge}`}>
+                                {typeLabel}
+                              </span>
+                            )}
+                          </div>
+                          <div className="mt-0.5 flex items-center gap-2 text-xs text-neutral-500">
+                            {appt.location && (
+                              <span className="flex items-center gap-0.5">
+                                <MapPin className="h-3 w-3" />
+                                {appt.location}
+                              </span>
+                            )}
+                            {appt.location && caseInfo && <span>·</span>}
+                            {caseInfo && (
+                              <span className="truncate">
+                                {caseInfo.case_number} — {caseInfo.title}
+                              </span>
+                            )}
+                          </div>
+                          {appt.description && (
+                            <p className="mt-1 truncate text-xs text-neutral-400">
+                              {appt.description}
+                            </p>
+                          )}
+                        </div>
+                        <button
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            deleteMutation.mutate(appt.id);
+                          }}
+                          disabled={deleteMutation.isPending}
+                          title="Loschen"
+                          className="shrink-0 rounded-md p-1.5 text-neutral-300 hover:bg-red-50 hover:text-red-500"
+                        >
+                          <Trash2 className="h-3.5 w-3.5" />
+                        </button>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/appointments/AppointmentModal.tsx

@@ -0,0 +1,280 @@
+"use client";
+
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { api } from "@/lib/api";
+import type { Appointment, Case } from "@/lib/types";
+import { format, parseISO } from "date-fns";
+import { X } from "lucide-react";
+import { toast } from "sonner";
+import { useEffect, useState } from "react";
+
+const APPOINTMENT_TYPES = [
+  { value: "hearing", label: "Verhandlung" },
+  { value: "meeting", label: "Besprechung" },
+  { value: "consultation", label: "Beratung" },
+  { value: "deadline_hearing", label: "Fristanhorung" },
+  { value: "other", label: "Sonstiges" },
+];
+
+interface AppointmentModalProps {
+  open: boolean;
+  onClose: () => void;
+  appointment?: Appointment | null;
+}
+
+function toLocalDatetime(iso: string): string {
+  const d = parseISO(iso);
+  return format(d, "yyyy-MM-dd'T'HH:mm");
+}
+
+export function AppointmentModal({ open, onClose, appointment }: AppointmentModalProps) {
+  const queryClient = useQueryClient();
+  const isEdit = !!appointment;
+
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [startAt, setStartAt] = useState("");
+  const [endAt, setEndAt] = useState("");
+  const [location, setLocation] = useState("");
+  const [appointmentType, setAppointmentType] = useState("");
+  const [caseId, setCaseId] = useState("");
+
+  const { data: cases } = useQuery({
+    queryKey: ["cases"],
+    queryFn: () => api.get<{ cases: Case[]; total: number }>("/api/cases"),
+  });
+
+  useEffect(() => {
+    if (appointment) {
+      setTitle(appointment.title);
+      setDescription(appointment.description ?? "");
+      setStartAt(toLocalDatetime(appointment.start_at));
+      setEndAt(appointment.end_at ? toLocalDatetime(appointment.end_at) : "");
+      setLocation(appointment.location ?? "");
+      setAppointmentType(appointment.appointment_type ?? "");
+      setCaseId(appointment.case_id ?? "");
+    } else {
+      setTitle("");
+      setDescription("");
+      setStartAt("");
+      setEndAt("");
+      setLocation("");
+      setAppointmentType("");
+      setCaseId("");
+    }
+  }, [appointment]);
+
+  const createMutation = useMutation({
+    mutationFn: (body: Record<string, unknown>) =>
+      api.post<Appointment>("/api/appointments", body),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["appointments"] });
+      queryClient.invalidateQueries({ queryKey: ["dashboard"] });
+      toast.success("Termin erstellt");
+      onClose();
+    },
+    onError: () => toast.error("Fehler beim Erstellen des Termins"),
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: (body: Record<string, unknown>) =>
+      api.put<Appointment>(`/api/appointments/${appointment!.id}`, body),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["appointments"] });
+      queryClient.invalidateQueries({ queryKey: ["dashboard"] });
+      toast.success("Termin aktualisiert");
+      onClose();
+    },
+    onError: () => toast.error("Fehler beim Aktualisieren des Termins"),
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: () => api.delete(`/api/appointments/${appointment!.id}`),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["appointments"] });
+      queryClient.invalidateQueries({ queryKey: ["dashboard"] });
+      toast.success("Termin geloscht");
+      onClose();
+    },
+    onError: () => toast.error("Fehler beim Loschen des Termins"),
+  });
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!title.trim() || !startAt) return;
+
+    const body: Record<string, unknown> = {
+      title: title.trim(),
+      start_at: new Date(startAt).toISOString(),
+    };
+    if (description.trim()) body.description = description.trim();
+    if (endAt) body.end_at = new Date(endAt).toISOString();
+    if (location.trim()) body.location = location.trim();
+    if (appointmentType) body.appointment_type = appointmentType;
+    if (caseId) body.case_id = caseId;
+
+    if (isEdit) {
+      updateMutation.mutate(body);
+    } else {
+      createMutation.mutate(body);
+    }
+  }
+
+  const isPending = createMutation.isPending || updateMutation.isPending;
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/30">
+      <div className="w-full max-w-lg rounded-lg border border-neutral-200 bg-white shadow-lg">
+        <div className="flex items-center justify-between border-b border-neutral-200 px-5 py-3">
+          <h2 className="text-sm font-semibold text-neutral-900">
+            {isEdit ? "Termin bearbeiten" : "Neuer Termin"}
+          </h2>
+          <button
+            onClick={onClose}
+            className="rounded-md p-1 text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4 p-5">
+          <div>
+            <label className="mb-1 block text-xs font-medium text-neutral-600">
+              Titel *
+            </label>
+            <input
+              type="text"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              required
+              className="w-full rounded-md border border-neutral-200 px-3 py-1.5 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400"
+              placeholder="z.B. Mundliche Verhandlung"
+            />
+          </div>
+
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className="mb-1 block text-xs font-medium text-neutral-600">
+                Beginn *
+              </label>
+              <input
+                type="datetime-local"
+                value={startAt}
+                onChange={(e) => setStartAt(e.target.value)}
+                required
+                className="w-full rounded-md border border-neutral-200 px-3 py-1.5 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400"
+              />
+            </div>
+            <div>
+              <label className="mb-1 block text-xs font-medium text-neutral-600">
+                Ende
+              </label>
+              <input
+                type="datetime-local"
+                value={endAt}
+                onChange={(e) => setEndAt(e.target.value)}
+                className="w-full rounded-md border border-neutral-200 px-3 py-1.5 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400"
+              />
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className="mb-1 block text-xs font-medium text-neutral-600">
+                Typ
+              </label>
+              <select
+                value={appointmentType}
+                onChange={(e) => setAppointmentType(e.target.value)}
+                className="w-full rounded-md border border-neutral-200 px-3 py-1.5 text-sm outline-none focus:border-neutral-400"
+              >
+                <option value="">Kein Typ</option>
+                {APPOINTMENT_TYPES.map((t) => (
+                  <option key={t.value} value={t.value}>
+                    {t.label}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div>
+              <label className="mb-1 block text-xs font-medium text-neutral-600">
+                Akte
+              </label>
+              <select
+                value={caseId}
+                onChange={(e) => setCaseId(e.target.value)}
+                className="w-full rounded-md border border-neutral-200 px-3 py-1.5 text-sm outline-none focus:border-neutral-400"
+              >
+                <option value="">Keine Akte</option>
+                {cases?.cases?.map((c) => (
+                  <option key={c.id} value={c.id}>
+                    {c.case_number} — {c.title}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+
+          <div>
+            <label className="mb-1 block text-xs font-medium text-neutral-600">
+              Ort
+            </label>
+            <input
+              type="text"
+              value={location}
+              onChange={(e) => setLocation(e.target.value)}
+              className="w-full rounded-md border border-neutral-200 px-3 py-1.5 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400"
+              placeholder="z.B. UPC Munchen, Saal 3"
+            />
+          </div>
+
+          <div>
+            <label className="mb-1 block text-xs font-medium text-neutral-600">
+              Beschreibung
+            </label>
+            <textarea
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              rows={3}
+              className="w-full rounded-md border border-neutral-200 px-3 py-1.5 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400"
+              placeholder="Optionale Notizen zum Termin"
+            />
+          </div>
+
+          <div className="flex items-center justify-between pt-2">
+            <div>
+              {isEdit && (
+                <button
+                  type="button"
+                  onClick={() => deleteMutation.mutate()}
+                  disabled={deleteMutation.isPending}
+                  className="rounded-md px-3 py-1.5 text-sm text-red-600 hover:bg-red-50"
+                >
+                  Loschen
+                </button>
+              )}
+            </div>
+            <div className="flex items-center gap-2">
+              <button
+                type="button"
+                onClick={onClose}
+                className="rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm text-neutral-700 hover:bg-neutral-50"
+              >
+                Abbrechen
+              </button>
+              <button
+                type="submit"
+                disabled={isPending || !title.trim() || !startAt}
+                className="rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-neutral-800 disabled:opacity-50"
+              >
+                {isPending ? "Speichern..." : isEdit ? "Aktualisieren" : "Erstellen"}
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

frontend/src/components/cases/CaseForm.tsx

@@ -3,12 +3,12 @@
 import { useState } from "react";
 
 const TYPE_OPTIONS = [
-  { value: "", label: "-- Typ wählen --" },
+  { value: "", label: "-- Typ wahlen --" },
   { value: "INF", label: "Verletzungsklage (INF)" },
   { value: "REV", label: "Widerruf (REV)" },
-  { value: "CCR", label: "Einstweilige Verfügung (CCR)" },
+  { value: "CCR", label: "Einstweilige Verfugung (CCR)" },
   { value: "APP", label: "Berufung (APP)" },
-  { value: "PI", label: "Vorläufiger Rechtsschutz (PI)" },
+  { value: "PI", label: "Vorlaufiger Rechtsschutz (PI)" },
   { value: "ZPO_CIVIL", label: "ZPO Zivilverfahren" },
 ];
 
@@ -43,23 +43,8 @@ export function CaseForm({
     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,
@@ -71,31 +56,26 @@ export function CaseForm({
 
   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";
+    "w-full rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm outline-none 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 className="grid grid-cols-2 gap-4">
         <div>
           <label className="mb-1 block text-sm font-medium text-neutral-700">
             Aktenzeichen *
           </label>
           <input
             type="text"
+            required
             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" : ""}`}
+            className={inputClass}
           />
-          {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">
@@ -107,7 +87,7 @@ export function CaseForm({
             className={inputClass}
           >
             <option value="active">Aktiv</option>
-            <option value="pending">Anhängig</option>
+            <option value="pending">Anhangig</option>
             <option value="closed">Geschlossen</option>
           </select>
         </div>
@@ -119,17 +99,15 @@ export function CaseForm({
         </label>
         <input
           type="text"
+          required
           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" : ""}`}
+          className={inputClass}
         />
-        {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 className="grid grid-cols-2 gap-4">
         <div>
           <label className="mb-1 block text-sm font-medium text-neutral-700">
             Verfahrensart
@@ -154,7 +132,7 @@ export function CaseForm({
             type="text"
             value={form.court}
             onChange={(e) => update("court", e.target.value)}
-            placeholder="z.B. UPC München Zentralkammer"
+            placeholder="z.B. UPC Munich Central Division"
             className={inputClass}
           />
         </div>
@@ -177,7 +155,7 @@ export function CaseForm({
         <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"
+          className="rounded-md bg-neutral-900 px-4 py-1.5 text-sm font-medium text-white hover:bg-neutral-800 disabled:opacity-50"
         >
           {isSubmitting ? "Speichern..." : submitLabel}
         </button>

frontend/src/components/cases/CaseTimeline.tsx

@@ -3,7 +3,6 @@
 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",
@@ -21,14 +20,9 @@ interface CaseTimelineProps {
 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">
+      <p className="py-8 text-center text-sm text-neutral-400">
         Keine Ereignisse vorhanden.
       </p>
-      </div>
     );
   }
 

frontend/src/components/cases/PartyList.tsx

@@ -5,7 +5,7 @@ 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";
+import { Plus, Trash2, X } from "lucide-react";
 
 interface PartyListProps {
   caseId: string;
@@ -19,16 +19,13 @@ interface PartyFormData {
 }
 
 const ROLE_OPTIONS = [
-  "Kläger",
+  "Klager",
   "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);
@@ -47,11 +44,11 @@ export function PartyList({ caseId, parties }: PartyListProps) {
       }),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["case", caseId] });
-      toast.success("Partei hinzugefügt");
+      toast.success("Partei hinzugefugt");
       setShowForm(false);
       setForm({ name: "", role: "", representative: "" });
     },
-    onError: () => toast.error("Fehler beim Hinzufügen"),
+    onError: () => toast.error("Fehler beim Hinzufugen"),
   });
 
   const deleteMutation = useMutation({
@@ -63,6 +60,9 @@ export function PartyList({ caseId, parties }: PartyListProps) {
     onError: () => toast.error("Fehler beim Entfernen"),
   });
 
+  const inputClass =
+    "w-full rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400";
+
   return (
     <div>
       <div className="flex items-center justify-between">
@@ -72,37 +72,25 @@ export function PartyList({ caseId, parties }: PartyListProps) {
         {!showForm && (
           <button
             onClick={() => setShowForm(true)}
-            className="inline-flex items-center gap-1 text-sm text-neutral-500 transition-colors hover:text-neutral-700"
+            className="inline-flex items-center gap-1 text-sm text-neutral-500 hover:text-neutral-700"
           >
             <Plus className="h-3.5 w-3.5" />
-            Hinzufügen
+            Hinzufugen
           </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">
+        <p className="mt-4 py-4 text-center text-sm text-neutral-400">
           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"
+            className="flex items-center justify-between rounded-md border border-neutral-200 bg-white px-4 py-2.5"
           >
             <div>
               <p className="text-sm font-medium text-neutral-900">
@@ -117,7 +105,7 @@ export function PartyList({ caseId, parties }: PartyListProps) {
             </div>
             <button
               onClick={() => deleteMutation.mutate(party.id)}
-              className="rounded p-1 text-neutral-300 transition-colors hover:bg-neutral-100 hover:text-red-500"
+              className="rounded p-1 text-neutral-300 hover:bg-neutral-100 hover:text-red-500"
               title="Partei entfernen"
             >
               <Trash2 className="h-3.5 w-3.5" />
@@ -134,7 +122,7 @@ export function PartyList({ caseId, parties }: PartyListProps) {
             </span>
             <button
               onClick={() => setShowForm(false)}
-              className="text-neutral-400 transition-colors hover:text-neutral-600"
+              className="text-neutral-400 hover:text-neutral-600"
             >
               <X className="h-4 w-4" />
             </button>
@@ -142,22 +130,19 @@ export function PartyList({ caseId, parties }: PartyListProps) {
           <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"
+              required
               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">
+            <div className="grid grid-cols-2 gap-3">
               <select
                 value={form.role}
                 onChange={(e) => setForm({ ...form, role: e.target.value })}
@@ -184,9 +169,9 @@ export function PartyList({ caseId, parties }: PartyListProps) {
               <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"
+                className="rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-neutral-800 disabled:opacity-50"
               >
-                {addMutation.isPending ? "Speichern..." : "Hinzufügen"}
+                {addMutation.isPending ? "..." : "Hinzufugen"}
               </button>
             </div>
           </form>

frontend/src/components/dashboard/QuickActions.tsx

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

frontend/src/components/deadlines/DeadlineCalculator.tsx

@@ -2,19 +2,10 @@
 
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { api } from "@/lib/api";
-import type {
-  ProceedingType,
-  CalculateResponse,
-  CalculatedDeadline,
-} from "@/lib/types";
+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 { Calculator, Calendar, ArrowRight, AlertTriangle } from "lucide-react";
 import { useState } from "react";
 
 function getTimelineUrgency(dueDate: string): "red" | "amber" | "green" {
@@ -30,9 +21,6 @@ const dotColors = {
   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("");
@@ -43,10 +31,8 @@ export function DeadlineCalculator() {
   });
 
   const calculateMutation = useMutation({
-    mutationFn: (params: {
-      proceeding_type: string;
-      trigger_event_date: string;
-    }) => api.post<CalculateResponse>("/api/deadlines/calculate", params),
+    mutationFn: (params: { proceeding_type: string; trigger_event_date: string }) =>
+      api.post<CalculateResponse>("/api/deadlines/calculate", params),
   });
 
   function handleCalculate(e: React.FormEvent) {
@@ -63,10 +49,7 @@ export function DeadlineCalculator() {
   return (
     <div className="space-y-6">
       {/* Input form */}
-      <form
-        onSubmit={handleCalculate}
-        className="rounded-lg border border-neutral-200 bg-white p-5"
-      >
+      <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
@@ -80,9 +63,9 @@ export function DeadlineCalculator() {
               value={proceedingType}
               onChange={(e) => setProceedingType(e.target.value)}
               disabled={typesLoading}
-              className={inputClass}
+              className="w-full rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-900"
             >
-              <option value="">Bitte wählen...</option>
+              <option value="">Bitte wahlen...</option>
               {proceedingTypes?.map((pt) => (
                 <option key={pt.id} value={pt.code}>
                   {pt.name} ({pt.code})
@@ -92,23 +75,19 @@ export function DeadlineCalculator() {
           </div>
           <div>
             <label className="mb-1 block text-xs font-medium text-neutral-500">
-              Auslösedatum
+              Auslosedatum
             </label>
             <input
               type="date"
               value={triggerDate}
               onChange={(e) => setTriggerDate(e.target.value)}
-              className={inputClass}
+              className="w-full rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-900"
             />
           </div>
           <div className="flex items-end">
             <button
               type="submit"
-              disabled={
-                !proceedingType ||
-                !triggerDate ||
-                calculateMutation.isPending
-              }
+              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"}
@@ -122,22 +101,20 @@ export function DeadlineCalculator() {
       {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.
+          Fehler bei der Berechnung. Bitte Eingaben prufen.
         </div>
       )}
 
       {/* Results */}
       {results && results.deadlines && (
-        <div className="animate-fade-in space-y-3">
+        <div className="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,
-              })}
+              {format(parseISO(results.trigger_event_date), "dd. MMM yyyy", { locale: de })}
             </span>
           </div>
 
@@ -152,16 +129,15 @@ export function DeadlineCalculator() {
                   key={d.rule_id}
                   className={`flex gap-3 px-4 py-3 ${!isLast ? "border-b border-neutral-100" : ""}`}
                 >
+                  {/* Timeline dot + line */}
                   <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 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>
+
+                  {/* Content */}
                   <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">
+                    <div className="flex items-start justify-between gap-2">
                       <span className="text-sm font-medium text-neutral-900">
                         {d.title}
                       </span>
@@ -169,18 +145,13 @@ export function DeadlineCalculator() {
                         {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">
+                    <div className="mt-0.5 flex 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",
-                            )}
-                            )
+                            Angepasst (Original: {format(parseISO(d.original_due_date), "dd.MM.yyyy")})
                           </span>
                         </>
                       )}
@@ -195,12 +166,10 @@ export function DeadlineCalculator() {
 
       {/* 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
+        <div className="rounded-lg border border-neutral-200 bg-white p-8 text-center">
+          <Calendar className="mx-auto h-8 w-8 text-neutral-300" />
+          <p className="mt-2 text-sm text-neutral-500">
+            Verfahrensart und Auslosedatum wahlen, um Fristen zu berechnen
           </p>
         </div>
       )}

frontend/src/components/deadlines/DeadlineList.tsx

@@ -8,7 +8,6 @@ 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";
 
@@ -26,7 +25,7 @@ const urgencyConfig = {
     border: "border-red-200",
     badge: "bg-red-100 text-red-700",
     dot: "bg-red-500",
-    label: "Überfällig",
+    label: "Uberschritten",
   },
   amber: {
     bg: "bg-amber-50",
@@ -44,9 +43,6 @@ const urgencyConfig = {
   },
 };
 
-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");
@@ -70,7 +66,7 @@ export function DeadlineList() {
       toast.success("Frist als erledigt markiert");
     },
     onError: () => {
-      toast.error("Fehler beim Abschließen der Frist");
+      toast.error("Fehler beim Abschliessen der Frist");
     },
   });
 
@@ -84,8 +80,7 @@ export function DeadlineList() {
     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 === "completed" && d.status !== "completed") return false;
       if (statusFilter === "overdue") {
         if (d.status === "completed") return false;
         if (!isPast(parseISO(d.due_date))) return false;
@@ -97,9 +92,7 @@ export function DeadlineList() {
 
   const counts = useMemo(() => {
     if (!deadlines) return { overdue: 0, thisWeek: 0, ok: 0 };
-    let 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);
@@ -114,10 +107,7 @@ export function DeadlineList() {
     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 key={i} className="h-16 animate-pulse rounded-lg bg-neutral-100" />
         ))}
       </div>
     );
@@ -128,52 +118,42 @@ export function DeadlineList() {
       {/* 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 ${
+          onClick={() => setStatusFilter(statusFilter === "overdue" ? "all" : "overdue")}
+          className={`rounded-lg border p-3 text-left transition-colors ${
             statusFilter === "overdue"
-              ? "border-red-300 bg-red-50 ring-1 ring-red-200"
+              ? "border-red-300 bg-red-50"
               : "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>
+          <div className="text-2xl font-semibold text-red-600">{counts.overdue}</div>
+          <div className="text-xs text-neutral-500">Uberschritten</div>
         </button>
         <button
-          onClick={() =>
-            setStatusFilter(statusFilter === "pending" ? "all" : "pending")
-          }
-          className={`rounded-lg border p-3 text-left transition-all ${
+          onClick={() => setStatusFilter(statusFilter === "pending" ? "all" : "pending")}
+          className={`rounded-lg border p-3 text-left transition-colors ${
             statusFilter === "pending"
-              ? "border-amber-300 bg-amber-50 ring-1 ring-amber-200"
+              ? "border-amber-300 bg-amber-50"
               : "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-2xl font-semibold 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 ${
+          className={`rounded-lg border p-3 text-left transition-colors ${
             statusFilter === "all"
-              ? "border-green-300 bg-green-50 ring-1 ring-green-200"
+              ? "border-green-300 bg-green-50"
               : "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-2xl font-semibold 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-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>
@@ -181,18 +161,18 @@ export function DeadlineList() {
         <select
           value={statusFilter}
           onChange={(e) => setStatusFilter(e.target.value as StatusFilter)}
-          className={selectClass}
+          className="rounded-md border border-neutral-200 bg-white px-2.5 py-1 text-sm text-neutral-700"
         >
           <option value="all">Alle Status</option>
           <option value="pending">Offen</option>
           <option value="completed">Erledigt</option>
-          <option value="overdue">Überfällig</option>
+          <option value="overdue">Uberschritten</option>
         </select>
         {cases && cases.length > 0 && (
           <select
             value={caseFilter}
             onChange={(e) => setCaseFilter(e.target.value)}
-            className={selectClass}
+            className="rounded-md border border-neutral-200 bg-white px-2.5 py-1 text-sm text-neutral-700"
           >
             <option value="all">Alle Akten</option>
             {cases.map((c) => (
@@ -206,15 +186,10 @@ export function DeadlineList() {
 
       {/* 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="rounded-lg border border-neutral-200 bg-white p-8 text-center">
+          <Clock className="mx-auto h-8 w-8 text-neutral-300" />
+          <p className="mt-2 text-sm text-neutral-500">Keine Fristen gefunden</p>
+        </div>
       ) : (
         <div className="space-y-2">
           {filtered.map((deadline) => {
@@ -225,19 +200,15 @@ export function DeadlineList() {
             return (
               <div
                 key={deadline.id}
-                className={`flex items-center gap-3 rounded-lg border px-4 py-3 transition-colors ${config.bg} ${config.border}`}
+                className={`flex items-center gap-3 rounded-lg border px-4 py-3 ${config.bg} ${config.border}`}
               >
-                <div
-                  className={`h-2.5 w-2.5 shrink-0 rounded-full ${config.dot}`}
-                />
+                <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">
+                  <div className="flex 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}`}
-                    >
+                    <span className={`shrink-0 rounded px-1.5 py-0.5 text-xs font-medium ${config.badge}`}>
                       {config.label}
                     </span>
                     {deadline.status === "completed" && (
@@ -246,11 +217,9 @@ export function DeadlineList() {
                       </span>
                     )}
                   </div>
-                  <div className="mt-0.5 flex flex-wrap items-center gap-2 text-xs text-neutral-500">
+                  <div className="mt-0.5 flex items-center gap-2 text-xs text-neutral-500">
                     <span>
-                      {format(parseISO(deadline.due_date), "dd. MMM yyyy", {
-                        locale: de,
-                      })}
+                      {format(parseISO(deadline.due_date), "dd. MMM yyyy", { locale: de })}
                     </span>
                     {caseInfo && (
                       <>
@@ -273,7 +242,7 @@ export function DeadlineList() {
                     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"
+                    className="shrink-0 rounded-md p-1.5 text-neutral-400 hover:bg-white hover:text-green-600"
                   >
                     <Check className="h-4 w-4" />
                   </button>

frontend/src/components/layout/Header.tsx

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

frontend/src/components/layout/Sidebar.tsx

@@ -9,14 +9,11 @@ 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: "/cases", icon: FolderOpen },
+  { name: "Akten", href: "/akten", icon: FolderOpen },
   { name: "Fristen", href: "/fristen", icon: Clock },
   { name: "Termine", href: "/termine", icon: Calendar },
   { name: "AI Analyse", href: "/ai/extract", icon: Brain },
@@ -25,43 +22,20 @@ const navigation = [
 
 export function Sidebar() {
   const pathname = usePathname();
-  const [mobileOpen, setMobileOpen] = useState(false);
 
-  // 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">
+  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">
         <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 === item.href || pathname.startsWith(item.href + "/");
+          const isActive = 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-2 text-sm transition-colors ${
+              className={`flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors ${
                 isActive
                   ? "bg-neutral-100 font-medium text-neutral-900"
                   : "text-neutral-600 hover:bg-neutral-50 hover:text-neutral-900"
@@ -73,39 +47,6 @@ 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,9 +12,7 @@ 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];
@@ -22,8 +20,7 @@ export function TenantSwitcher() {
         setCurrent(match);
         localStorage.setItem("kanzlai_tenant_id", match.id);
       }
-      })
-      .catch(() => {
+    }).catch(() => {
       // Not authenticated or no tenants
     });
   }, []);
@@ -51,16 +48,14 @@ 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 transition-colors 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 hover:bg-neutral-50"
       >
-        <span className="max-w-[120px] truncate sm:max-w-[160px]">
-          {current.name}
-        </span>
+        <span className="max-w-[160px] truncate">{current.name}</span>
         <ChevronsUpDown className="h-3.5 w-3.5 text-neutral-400" />
       </button>
 
       {open && tenants.length > 1 && (
-        <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">
+        <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">
           {tenants.map((tenant) => (
             <button
               key={tenant.id}

frontend/src/components/ui/EmptyState.tsx

@@ -1,28 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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/types.ts

@@ -163,62 +163,3 @@ export interface PaginatedResponse<T> {
   page: number;
   per_page: number;
 }
-
-// Dashboard types
-
-export interface DeadlineSummary {
-  overdue_count: number;
-  due_this_week: number;
-  due_next_week: number;
-  ok_count: number;
-}
-
-export interface CaseSummary {
-  active_count: number;
-  new_this_month: number;
-  closed_count: number;
-}
-
-export interface UpcomingDeadline {
-  id: string;
-  title: string;
-  due_date: string;
-  case_id: string;
-  case_number: string;
-  case_title: string;
-}
-
-export interface UpcomingAppointment {
-  id: string;
-  title: string;
-  start_at: string;
-  end_at?: string;
-  location?: string;
-  case_id?: string;
-  case_number?: string;
-  case_title?: string;
-}
-
-export interface DashboardData {
-  deadline_summary: DeadlineSummary;
-  case_summary: CaseSummary;
-  upcoming_deadlines: UpcomingDeadline[];
-  upcoming_appointments: UpcomingAppointment[];
-}
-
-// 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 ExtractionResponse {
-  deadlines: ExtractedDeadline[];
-  count: number;
-}