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

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

frontend/src/components/ai/ExtractionForm.tsx

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