feat(L1-L3): Dokumente-Generator — Briefpapier+Block-System+Drag&Drop-Editor+Renderer

- Briefpapier (letterheads): Seiten-Setup (A4/A5/Letter, Ränder), Header/Footer-Blöcke, Wasserzeichen, Logo-Upload (DocumentAsset, data:-URI-only)
- Druckvorlagen (print_templates): Block-Komposition mit Briefpapier-Ref + entity_type
- Block-Registry (document_blocks.py): text/image/shape(line/rect/circle)/table/spacer/divider/placeholder/pagebreak + Modul-Beiträge via document_blocks()-Contract
- Renderer (document_renderer.py): Blocks→HTML→PDF via WeasyPrint (SSRF-Sandbox data:-URI-only), @page-Frame mit running header/footer, Placeholder-Beispiel-Defaults gegen StrictUndefined
- Contract-Beitrag contacts: document_placeholders/document_data (#359-Muster wie importexport_entities)
- 13 neue Endpoints in documents.py: Letterhead-CRUD, Template-CRUD, Assets, document-blocks, document-placeholders, preview (HTML), render (PDF)
- Migration: Plugin-SQL 0003 (idempotent) + Alembic 0143 (Dual-Path, RLS fail-closed crm_api)
- Frontend: api/documents.ts, Settings→Dokumente (settings_pages), BlockEditor (@dnd-kit Palette/Canvas/Config/Live-Preview-iframe), LetterheadEditor, PrintTemplateEditor, DocumentGenerationDialog (global, ContactDetailPage-Integration)
- i18n de/en, api-documentation.md, plugin-development-guide.md, PROGRESS.md

Verifikation: 32/32 neue Tests + 9/9 Regressionen, tsc exit 0, Build OK 2.79s, Alembic-Fresh-DB 0143 mit RLS bewiesen, ruff clean

frontend/src/pages/ContactDetailPage.tsx

@@ -2,7 +2,7 @@
  * Contact Detail Page — loads a single contact by ID from route params.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { ContactDetail } from '@/components/contacts/ContactDetail';
@@ -10,8 +10,9 @@ import { ContactEditForm } from '@/components/contacts/ContactEditForm';
 import { useWindowStore } from '@/store/windowStore';
 import { useUnifiedContact, type UnifiedContact } from '@/api/hooks';
 import { Button } from '@/components/ui/Button';
-import { ChevronLeft } from 'lucide-react';
+import { ChevronLeft, FileText } from 'lucide-react';
 import { PrintButton } from '@/components/common/PrintButton';
+import { DocumentGenerationDialog } from '@/components/documents/DocumentGenerationDialog';
 import { usePermission } from '@/hooks/usePermission';
 import { useAuthStore } from '@/store/authStore';
 
@@ -23,6 +24,7 @@ export function ContactDetailPage() {
   const openWindow = useWindowStore((s) => s.openWindow);
   const { hasPermission } = usePermission();
   const authUser = useAuthStore((state) => state.user);
+  const [docDialogOpen, setDocDialogOpen] = useState(false);
   const canAccess = (perm: string): boolean => {
     return hasPermission(perm);
   };
@@ -59,6 +61,17 @@ export function ContactDetailPage() {
         </button>
         <div className="flex-1" />
         {canAccess('contacts:read') && <PrintButton targetId="contact-detail" />}
+        {canAccess('reports:generate') && (
+          <button
+            onClick={() => setDocDialogOpen(true)}
+            className="inline-flex items-center gap-1 px-2 py-1 rounded text-sm text-secondary-700 hover:bg-secondary-100 min-h-touch"
+            aria-label={t('documents.dialog.title', 'Dokument erstellen')}
+            title={t('documents.dialog.title', 'Dokument erstellen')}
+            data-testid="contact-detail-document-button"
+          >
+            <FileText className="w-4 h-4" aria-hidden="true" strokeWidth={2} />
+          </button>
+        )}
       </div>
       <div className="flex-1 overflow-y-auto" id="contact-detail">
         <ContactDetail
@@ -68,6 +81,15 @@ export function ContactDetailPage() {
           onDeleted={handleDeleted}
         />
       </div>
+      {contact && (
+        <DocumentGenerationDialog
+          open={docDialogOpen}
+          onClose={() => setDocDialogOpen(false)}
+          entityType={contact.type === 'company' ? 'company' : 'contact'}
+          entityId={contact.id}
+          entityLabel={contact.displayname}
+        />
+      )}
     </div>
   );
 }

frontend/src/pages/DocumentSettings.tsx

@@ -0,0 +1,225 @@
+/**
+ * Document Settings — Verwaltungsoberfläche für den Dokumente-Generator
+ * (Phase L): Briefpapiere + Druckvorlagen mit Drag&Drop-Block-Editor.
+ */
+
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { FileText, Layers } from 'lucide-react';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Skeleton } from '@/components/ui/Skeleton';
+import { useToast } from '@/components/ui/Toast';
+import {
+  useLetterheads,
+  usePrintTemplates,
+  useCreateLetterhead,
+  useDeleteLetterhead,
+  useCreatePrintTemplate,
+  useDeletePrintTemplate,
+} from '@/api/documents';
+import { LetterheadEditor } from '@/components/documents/LetterheadEditor';
+import { PrintTemplateEditor } from '@/components/documents/PrintTemplateEditor';
+import type { Letterhead, PrintTemplate } from '@/api/documents';
+
+export function DocumentSettingsPage() {
+  const { t } = useTranslation();
+  const toast = useToast();
+  const [tab, setTab] = useState<'letterheads' | 'templates'>('letterheads');
+  const [editingLetterhead, setEditingLetterhead] = useState<Letterhead | 'new' | null>(null);
+  const [editingTemplate, setEditingTemplate] = useState<PrintTemplate | 'new' | null>(null);
+
+  const { data: letterheads = [], isLoading: lhLoading } = useLetterheads();
+  const { data: templates = [], isLoading: tplLoading } = usePrintTemplates();
+  const createLh = useCreateLetterhead();
+  const deleteLh = useDeleteLetterhead();
+  const createTpl = useCreatePrintTemplate();
+  const deleteTpl = useDeletePrintTemplate();
+
+  return (
+    <div className="max-w-6xl mx-auto space-y-6" data-testid="document-settings-page">
+      <div className="flex items-center gap-3">
+        <FileText className="w-6 h-6 text-primary-600" aria-hidden="true" />
+        <div>
+          <h1 className="text-2xl font-bold text-secondary-900">{t('settings.documents', 'Dokumente')}</h1>
+          <p className="text-sm text-secondary-500">
+            {t('documents.settings.subtitle', 'Briefpapiere und Druckvorlagen mit Drag&Drop-Editor verwalten')}
+          </p>
+        </div>
+      </div>
+
+      <div className="flex gap-2" role="tablist" aria-label={t('documents.settings.tabs', 'Dokumente-Bereiche')}>
+        <button
+          role="tab"
+          aria-selected={tab === 'letterheads'}
+          onClick={() => setTab('letterheads')}
+          className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+            tab === 'letterheads' ? 'bg-primary-100 text-primary-700' : 'text-secondary-600 hover:bg-secondary-100'
+          }`}
+          data-testid="documents-tab-letterheads"
+        >
+          {t('documents.letterheads', 'Briefpapiere')} ({letterheads.length})
+        </button>
+        <button
+          role="tab"
+          aria-selected={tab === 'templates'}
+          onClick={() => setTab('templates')}
+          className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+            tab === 'templates' ? 'bg-primary-100 text-primary-700' : 'text-secondary-600 hover:bg-secondary-100'
+          }`}
+          data-testid="documents-tab-templates"
+        >
+          {t('documents.printTemplates', 'Druckvorlagen')} ({templates.length})
+        </button>
+      </div>
+
+      {tab === 'letterheads' && (
+        <Card className="p-4">
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-lg font-semibold text-secondary-900">{t('documents.letterheads', 'Briefpapiere')}</h2>
+            <Button
+              size="sm"
+              icon={<FileText className="w-4 h-4" aria-hidden="true" />}
+              onClick={() => setEditingLetterhead('new')}
+              data-testid="documents-create-letterhead"
+            >
+              {t('documents.letterhead.create', 'Neues Briefpapier')}
+            </Button>
+          </div>
+          {lhLoading ? (
+            <div className="space-y-2">
+              <Skeleton className="h-12 w-full" />
+              <Skeleton className="h-12 w-full" />
+            </div>
+          ) : letterheads.length === 0 ? (
+            <p className="text-sm text-secondary-500 py-8 text-center">
+              {t('documents.letterhead.empty', 'Noch kein Briefpapier angelegt.')}
+            </p>
+          ) : (
+            <ul className="divide-y divide-secondary-100" data-testid="documents-letterhead-list">
+              {letterheads.map((lh) => (
+                <li key={lh.id} className="flex items-center justify-between py-3 gap-3">
+                  <div className="min-w-0">
+                    <div className="flex items-center gap-2">
+                      <span className="font-medium text-secondary-900 truncate">{lh.name}</span>
+                      {lh.is_default && (
+                        <span className="text-xs px-2 py-0.5 rounded-full bg-primary-100 text-primary-700">
+                          {t('documents.letterhead.default', 'Standard')}
+                        </span>
+                      )}
+                    </div>
+                    <p className="text-xs text-secondary-500 truncate">{lh.description || '—'}</p>
+                  </div>
+                  <div className="flex gap-2 shrink-0">
+                    <Button size="sm" variant="secondary" onClick={() => setEditingLetterhead(lh)}>
+                      {t('common.edit', 'Bearbeiten')}
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant="danger"
+                      onClick={async () => {
+                        if (!window.confirm(t('documents.letterhead.deleteConfirm', 'Briefpapier wirklich löschen?'))) return;
+                        try {
+                          await deleteLh.mutateAsync(lh.id);
+                          toast.success(t('documents.letterhead.deleted', 'Briefpapier gelöscht'));
+                        } catch (e) {
+                          toast.error(t('common.error', 'Fehler beim Löschen'));
+                        }
+                      }}
+                      aria-label={t('common.delete', 'Löschen')}
+                    >
+                      {t('common.delete', 'Löschen')}
+                    </Button>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          )}
+        </Card>
+      )}
+
+      {tab === 'templates' && (
+        <Card className="p-4">
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-lg font-semibold text-secondary-900">{t('documents.printTemplates', 'Druckvorlagen')}</h2>
+            <Button
+              size="sm"
+              icon={<Layers className="w-4 h-4" aria-hidden="true" />}
+              onClick={() => setEditingTemplate('new')}
+              data-testid="documents-create-template"
+            >
+              {t('documents.template.create', 'Neue Vorlage')}
+            </Button>
+          </div>
+          {tplLoading ? (
+            <div className="space-y-2">
+              <Skeleton className="h-12 w-full" />
+              <Skeleton className="h-12 w-full" />
+            </div>
+          ) : templates.length === 0 ? (
+            <p className="text-sm text-secondary-500 py-8 text-center">
+              {t('documents.template.empty', 'Noch keine Druckvorlage angelegt.')}
+            </p>
+          ) : (
+            <ul className="divide-y divide-secondary-100" data-testid="documents-template-list">
+              {templates.map((tpl) => {
+                const lh = letterheads.find((l) => l.id === tpl.letterhead_id);
+                return (
+                  <li key={tpl.id} className="flex items-center justify-between py-3 gap-3">
+                    <div className="min-w-0">
+                      <div className="flex items-center gap-2">
+                        <span className="font-medium text-secondary-900 truncate">{tpl.name}</span>
+                        <span className="text-xs px-2 py-0.5 rounded-full bg-secondary-100 text-secondary-600">
+                          {tpl.entity_type}
+                        </span>
+                        <span className="text-xs text-secondary-400">{tpl.blocks.length} Blöcke</span>
+                      </div>
+                      <p className="text-xs text-secondary-500 truncate">
+                        {lh ? `${t('documents.letterhead', 'Briefpapier')}: ${lh.name}` : t('documents.template.noLetterhead', 'Ohne Briefpapier')}
+                      </p>
+                    </div>
+                    <div className="flex gap-2 shrink-0">
+                      <Button size="sm" variant="secondary" onClick={() => setEditingTemplate(tpl)}>
+                        {t('common.edit', 'Bearbeiten')}
+                      </Button>
+                      <Button
+                        size="sm"
+                        variant="danger"
+                        onClick={async () => {
+                          if (!window.confirm(t('documents.template.deleteConfirm', 'Vorlage wirklich löschen?'))) return;
+                          try {
+                            await deleteTpl.mutateAsync(tpl.id);
+                            toast.success(t('documents.template.deleted', 'Vorlage gelöscht'));
+                          } catch (e) {
+                            toast.error(t('common.error', 'Fehler beim Löschen'));
+                          }
+                        }}
+                        aria-label={t('common.delete', 'Löschen')}
+                      >
+                        {t('common.delete', 'Löschen')}
+                      </Button>
+                    </div>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+        </Card>
+      )}
+
+      {editingLetterhead && (
+        <LetterheadEditor
+          letterhead={editingLetterhead === 'new' ? null : editingLetterhead}
+          onClose={() => setEditingLetterhead(null)}
+        />
+      )}
+      {editingTemplate && (
+        <PrintTemplateEditor
+          template={editingTemplate === 'new' ? null : editingTemplate}
+          letterheads={letterheads}
+          onClose={() => setEditingTemplate(null)}
+        />
+      )}
+    </div>
+  );
+}

frontend/src/pages/Settings.tsx

@@ -5,7 +5,7 @@ import { usePluginStore } from '@/store/pluginStore';
 import { useUIStore } from '@/store/uiStore';
 import { usePermission } from '@/hooks/usePermission';
 import { useAuthStore } from '@/store/authStore';
-import { Settings, Mail, Bell, Sparkles, Bot, Shield, Users, UsersRound, Package, ArrowLeft } from 'lucide-react';
+import { Settings, Mail, Bell, Sparkles, Bot, Shield, Users, UsersRound, Package, ArrowLeft, FileText } from 'lucide-react';
 
 const ICON_MAP: Record<string, React.ComponentType<{ className?: string }>> = {
   Settings,
@@ -16,6 +16,7 @@ const ICON_MAP: Record<string, React.ComponentType<{ className?: string }>> = {
   Shield,
   Users,
   UsersRound,
+  FileText,
 };
 
 const FALLBACK_ICON = Package;