PDF-Viewer-Modal fuer Bankkarte-/Ausweis-Dokument

Neue Komponente PdfViewerModal (Modal + iframe auf viewUrl(documentPath),
inkl. Neuer-Tab/Download-Links). Buttons:
- Vertragsansicht (ContractDetail): im Card-Header von Bankkarte/Ausweis
- Vertrag bearbeiten (ContractForm): neben dem Label Bankkarte/Ausweis

Button erscheint NUR wenn ein documentPath hinterlegt/gewaehlt ist. Nutzt den
bestehenden /api/files/download-Endpoint (Per-File-Ownership-Check) - kein
neuer Zugriffspfad. iframe (nicht embed/object wegen object-src 'none');
same-origin via CSP default-src 'self' erlaubt.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/pages/contracts/ContractDetail.tsx

@@ -14,6 +14,7 @@ import Button from '../../components/ui/Button';
 import Badge from '../../components/ui/Badge';
 import Input from '../../components/ui/Input';
 import Modal from '../../components/ui/Modal';
+import PdfViewerModal from '../../components/ui/PdfViewerModal';
 import FileUpload from '../../components/ui/FileUpload';
 import { Edit, Trash2, Copy, Eye, EyeOff, ArrowLeft, ArrowRight, Download, ExternalLink, Plus, ChevronDown, ChevronUp, Gauge, CheckCircle, Circle, ClipboardList, MessageSquare, Calculator, Info, X, BellOff, Lock, Shield, FileText, Images } from 'lucide-react';
 import toast from 'react-hot-toast';
@@ -1551,6 +1552,9 @@ export default function ContractDetail() {
   // Kunden-Schnellansicht-Modal
   const [showCustomerInfo, setShowCustomerInfo] = useState(false);
 
+  // PDF-Viewer-Modal (Bankkarte-/Ausweis-Dokument)
+  const [pdfModal, setPdfModal] = useState<{ title: string; path: string } | null>(null);
+
   const { data, isLoading } = useQuery({
     queryKey: ['contract', id],
     queryFn: () => contractApi.getById(contractId),
@@ -2658,7 +2662,20 @@ export default function ContractDetail() {
           </Card>
         )}
         {c.bankCard && (
-          <Card title="Bankkarte">
+          <Card
+            title="Bankkarte"
+            actions={c.bankCard.documentPath ? (
+              <button
+                type="button"
+                onClick={() => setPdfModal({ title: 'Bankkarte – Dokument', path: c.bankCard!.documentPath! })}
+                className="text-gray-400 hover:text-blue-600 p-1 rounded"
+                title="Hinterlegtes Dokument anzeigen (PDF)"
+                aria-label="Bankkarten-Dokument anzeigen"
+              >
+                <FileText className="w-4 h-4" />
+              </button>
+            ) : undefined}
+          >
             <p className="font-medium">{c.bankCard.accountHolder}</p>
             <p className="font-mono flex items-center gap-1">
               {c.bankCard.iban}
@@ -2673,7 +2690,20 @@ export default function ContractDetail() {
           </Card>
         )}
         {c.identityDocument && (
-          <Card title="Ausweis">
+          <Card
+            title="Ausweis"
+            actions={c.identityDocument.documentPath ? (
+              <button
+                type="button"
+                onClick={() => setPdfModal({ title: 'Ausweis – Dokument', path: c.identityDocument!.documentPath! })}
+                className="text-gray-400 hover:text-blue-600 p-1 rounded"
+                title="Hinterlegtes Dokument anzeigen (PDF)"
+                aria-label="Ausweis-Dokument anzeigen"
+              >
+                <FileText className="w-4 h-4" />
+              </button>
+            ) : undefined}
+          >
             <p className="font-mono flex items-center gap-1">
               {c.identityDocument.documentNumber}
               <CopyButton value={c.identityDocument.documentNumber} />
@@ -3372,6 +3402,14 @@ export default function ContractDetail() {
         />
       )}
 
+      {/* PDF-Viewer (Bankkarte-/Ausweis-Dokument) */}
+      <PdfViewerModal
+        isOpen={!!pdfModal}
+        onClose={() => setPdfModal(null)}
+        title={pdfModal?.title || 'Dokument'}
+        path={pdfModal?.path}
+      />
+
       {/* Vorgängervertrag Modal */}
       {showPredecessorModal && c.previousContract && (
         <ContractDetailModal