feat: frontend AI tab — KI-Strategie, KI-Entwurf, Aehnliche Faelle

New "KI" tab on case detail page with three sub-panels:
- KI-Strategie: one-click strategic analysis with next steps, risks, timeline
- KI-Entwurf: document drafting with template selection, language, instructions
- Aehnliche Faelle: UPC similar case search with relevance scores

Components: CaseStrategy, DocumentDrafter, SimilarCaseFinder
Types: StrategyRecommendation, DocumentDraft, SimilarCase, etc.

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

@@ -0,0 +1,51 @@
+"use client";
+
+import { useState } from "react";
+import { useParams } from "next/navigation";
+import { Brain, FileText, Search } from "lucide-react";
+import { CaseStrategy } from "@/components/ai/CaseStrategy";
+import { DocumentDrafter } from "@/components/ai/DocumentDrafter";
+import { SimilarCaseFinder } from "@/components/ai/SimilarCaseFinder";
+
+type AITab = "strategy" | "draft" | "similar";
+
+const TABS: { id: AITab; label: string; icon: typeof Brain }[] = [
+  { id: "strategy", label: "KI-Strategie", icon: Brain },
+  { id: "draft", label: "KI-Entwurf", icon: FileText },
+  { id: "similar", label: "Aehnliche Faelle", icon: Search },
+];
+
+export default function CaseAIPage() {
+  const { id } = useParams<{ id: string }>();
+  const [activeTab, setActiveTab] = useState<AITab>("strategy");
+
+  return (
+    <div>
+      {/* Sub-tabs */}
+      <div className="mb-6 flex gap-1 rounded-lg border border-neutral-200 bg-neutral-50 p-1">
+        {TABS.map((tab) => {
+          const isActive = activeTab === tab.id;
+          return (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`inline-flex flex-1 items-center justify-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium transition-colors ${
+                isActive
+                  ? "bg-white text-neutral-900 shadow-sm"
+                  : "text-neutral-500 hover:text-neutral-700"
+              }`}
+            >
+              <tab.icon className="h-4 w-4" />
+              {tab.label}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Content */}
+      {activeTab === "strategy" && <CaseStrategy caseId={id} />}
+      {activeTab === "draft" && <DocumentDrafter caseId={id} />}
+      {activeTab === "similar" && <SimilarCaseFinder caseId={id} />}
+    </div>
+  );
+}

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

@@ -17,6 +17,7 @@ import {
   StickyNote,
   AlertTriangle,
   ScrollText,
+  Brain,
 } from "lucide-react";
 import { format } from "date-fns";
 import { de } from "date-fns/locale";
@@ -48,6 +49,7 @@ const TABS = [
   { segment: "mitarbeiter", label: "Mitarbeiter", icon: UserCheck },
   { segment: "notizen", label: "Notizen", icon: StickyNote },
   { segment: "protokoll", label: "Protokoll", icon: ScrollText },
+  { segment: "ki", label: "KI", icon: Brain },
 ] as const;
 
 const TAB_LABELS: Record<string, string> = {
@@ -58,6 +60,7 @@ const TAB_LABELS: Record<string, string> = {
   mitarbeiter: "Mitarbeiter",
   notizen: "Notizen",
   protokoll: "Protokoll",
+  ki: "KI",
 };
 
 function CaseDetailSkeleton() {