feat: add document management frontend (Phase 2N)

- DocumentUpload: dropzone with multi-file support, upload via
  POST /api/cases/{id}/documents, progress feedback with toast
- DocumentList: type badges, file size, upload date, download links,
  delete with inline confirmation
- Integrated as Dokumente tab in case detail page with count badge
- Eagerly fetches document count for tab badge display

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

@@ -6,6 +6,8 @@ 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 { DocumentUpload } from "@/components/documents/DocumentUpload";
+import { DocumentList } from "@/components/documents/DocumentList";
 import { ArrowLeft, Clock, FileText, Users, Activity } from "lucide-react";
 import { format } from "date-fns";
 import { de } from "date-fns/locale";
@@ -55,7 +57,7 @@ export default function CaseDetailPage() {
   const { data: documentsData } = useQuery({
     queryKey: ["case-documents", id],
     queryFn: () => api.get<Document[]>(`/cases/${id}/documents`),
-    enabled: activeTab === "documents",
+    enabled: activeTab === "documents" || activeTab === "timeline",
   });
 
   if (isLoading) {
@@ -147,6 +149,11 @@ export default function CaseDetailPage() {
                   {caseDetail.deadlines_count}
                 </span>
               )}
+              {tab.key === "documents" && documents.length > 0 && (
+                <span className="ml-1 rounded-full bg-neutral-100 px-1.5 py-0.5 text-xs text-neutral-500">
+                  {documents.length}
+                </span>
+              )}
               {tab.key === "parties" && caseDetail.parties.length > 0 && (
                 <span className="ml-1 rounded-full bg-neutral-100 px-1.5 py-0.5 text-xs text-neutral-500">
                   {caseDetail.parties.length}
@@ -167,7 +174,10 @@ export default function CaseDetailPage() {
         )}
 
         {activeTab === "documents" && (
-          <DocumentsList documents={documents} />
+          <div className="space-y-6">
+            <DocumentUpload caseId={id} />
+            <DocumentList documents={documents} caseId={id} />
+          </div>
         )}
 
         {activeTab === "parties" && (
@@ -224,44 +234,3 @@ function DeadlinesList({ deadlines }: { deadlines: Deadline[] }) {
   );
 }
 
-function DocumentsList({ documents }: { documents: Document[] }) {
-  if (documents.length === 0) {
-    return (
-      <p className="py-8 text-center text-sm text-neutral-400">
-        Keine Dokumente vorhanden.
-      </p>
-    );
-  }
-
-  return (
-    <div className="space-y-2">
-      {documents.map((doc) => (
-        <div
-          key={doc.id}
-          className="flex items-center justify-between rounded-md border border-neutral-200 bg-white px-4 py-3"
-        >
-          <div className="flex items-center gap-3">
-            <FileText className="h-4 w-4 text-neutral-400" />
-            <div>
-              <p className="text-sm font-medium text-neutral-900">
-                {doc.title}
-              </p>
-              <div className="flex gap-2 text-xs text-neutral-400">
-                {doc.doc_type && <span>{doc.doc_type}</span>}
-                {doc.file_size && (
-                  <span>{(doc.file_size / 1024).toFixed(0)} KB</span>
-                )}
-              </div>
-            </div>
-          </div>
-          <a
-            href={`/api/documents/${doc.id}`}
-            className="text-sm text-neutral-500 hover:text-neutral-700"
-          >
-            Herunterladen
-          </a>
-        </div>
-      ))}
-    </div>
-  );
-}