Konfigurator: Abrechnungs-Integritaet + Motiv-Katalog nur mit Motiven

Fehlbelastung behoben: PayPal belastete bisher den CLIENT-Quote
(quote.gross_total, mit der frei getippten Menge gerechnet), waehrend
der Auftrag serverseitig aus entries.length angelegt/bepreist wird.
Wichen die auseinander (Menge > 25, Sync pausiert, Menge nachtraeglich
geaendert), zahlte der Kunde z. B. fuer 150 Karten, angelegt wurden 15.
- PayPal belastet jetzt ausschliesslich den serverseitig bestaetigten
  Auftragsbetrag (ergebnis.gross_total), nie den Client-Quote.
- Checkout wird blockiert, solange entries.length !== quantity, mit
  klarer Meldung (Extern-/Datei-/preislose Produkte ausgenommen).

Motiv: Die Option "Motiv aus unserer Auswahl" wird nur noch angezeigt,
wenn fuer das Format Motive hinterlegt sind; sonst automatisch "Ohne
Motiv". Vor dem Laden bleibt die Option sichtbar (kein Aufblitzen).

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

src/App.tsx

@@ -7,6 +7,9 @@ import Auftraege from './routes/Auftraege';
 import Stammdaten from './routes/Stammdaten';
 import Configurator from './routes/Configurator';
 import MusterSeite from './routes/Muster';
+import AngebotSeite from './routes/Angebot';
+import FreigabeSeite from './routes/Freigabe';
+import Textmenge from './routes/Textmenge';
 import { loadSession } from './lib/api';
 
 /**
@@ -35,8 +38,13 @@ export default function App() {
           <Routes>
             <Route path="/" element={<Configurator />} />
             <Route path="/login" element={<Login />} />
-            {/* Muster als eigene Seite (kein Popup) – Direktlink /muster. */}
+            {/* Muster & individuelles Angebot als eigene Seiten (kein Popup). */}
             <Route path="/muster" element={<MusterSeite />} />
+            <Route path="/angebot" element={<AngebotSeite />} />
+            {/* Motiv-Freigabe über Einmal-Link (kein Login nötig). */}
+            <Route path="/freigabe/:token" element={<FreigabeSeite />} />
+            {/* Textmengen-Tool – öffentlich, Direktlink /textmenge. */}
+            <Route path="/textmenge" element={<Textmenge />} />
             <Route
               path="/auftraege"
               element={<Geschuetzt><Auftraege /></Geschuetzt>}

src/components/AppShell.tsx

@@ -180,7 +180,7 @@ function Angebot({ onClose, vorbelegung }: { onClose: () => void; vorbelegung?:
 export function Muster({ onClose = () => {}, variant = 'dialog' }: { onClose?: () => void; variant?: 'dialog' | 'page' }) {
   const [produkte, setProdukte] = useState<Product[]>([]);
   const [form, setForm] = useState({
-    product: '', name: '', email: '', phone: '',
+    product: '', first_name: '', last_name: '', email: '', phone: '',
     street: '', zip: '', city: '', country: 'Deutschland', message: '',
   });
   const [datenschutz, setDatenschutz] = useState(false);
@@ -195,7 +195,8 @@ export function Muster({ onClose = () => {}, variant = 'dialog' }: { onClose?: (
       fetchMyCustomer()
         .then((c) => c && setForm((f) => ({
           ...f,
-          name: [c.first_name, c.last_name].filter(Boolean).join(' ') || f.name,
+          first_name: c.first_name || f.first_name,
+          last_name: c.last_name || f.last_name,
           email: c.email || f.email,
           phone: c.phone || f.phone,
         })))
@@ -216,7 +217,8 @@ export function Muster({ onClose = () => {}, variant = 'dialog' }: { onClose?: (
     try {
       await sendSampleRequest({
         product: form.product,
-        name: form.name.trim(),
+        first_name: form.first_name.trim(),
+        last_name: form.last_name.trim(),
         email: form.email.trim(),
         phone: form.phone.trim() || undefined,
         street: form.street.trim(),
@@ -259,7 +261,7 @@ export function Muster({ onClose = () => {}, variant = 'dialog' }: { onClose?: (
     </div>
   );
 
-  const gueltig = form.product && form.name.trim() && istEmail(form.email) && form.phone.trim()
+  const gueltig = form.product && form.first_name.trim() && form.last_name.trim() && istEmail(form.email) && form.phone.trim()
     && form.street.trim() && form.zip.trim() && form.city.trim() && datenschutz;
 
   return wrap('Muster bestellen', (
@@ -275,12 +277,13 @@ export function Muster({ onClose = () => {}, variant = 'dialog' }: { onClose?: (
             {produkte.map((p) => <option key={p.key} value={p.key}>{p.name}</option>)}
           </select>
         </div>
-        {feld('name', 'Name')}
+        {feld('first_name', 'Vorname')}
+        {feld('last_name', 'Nachname')}
         {feld('email', 'E-Mail-Adresse', false, 'email')}
         {feld('phone', 'Telefon', false, 'tel')}
         {feld('street', 'Straße und Hausnummer')}
         {feld('zip', 'PLZ')}
-        {feld('city', 'Stadt')}
+        {feld('city', 'Ort')}
         <div className="sk-field">
           <label className="sk-label sk-label--required" htmlFor="m-country">Land</label>
           <select id="m-country" className="sk-input" value={form.country} onChange={set('country')}>
@@ -398,10 +401,10 @@ function Sidebar({ onNavigate }: { onNavigate?: () => void }) {
           <IconMail />
           <span>Muster bestellen</span>
         </NavLink>
-        <button className="sk-nav-item sk-nav-item--quiet" onClick={() => { open('angebot'); onNavigate?.(); }}>
+        <NavLink to="/angebot" className="sk-nav-item sk-nav-item--quiet" onClick={onNavigate}>
           <IconOffer />
           <span>Individuelles Angebot</span>
-        </button>
+        </NavLink>
         <button className="sk-nav-item sk-nav-item--quiet" onClick={() => { open('hilfe'); onNavigate?.(); }}>
           <IconHelp />
           <span>Hilfe</span>

src/components/OfferForm.tsx

@@ -15,7 +15,7 @@ const istEmail = (e: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e.trim());
  */
 export default function OfferForm({ produkt, onClose }: { produkt?: string; onClose?: () => void }) {
   const gewaehltesProdukt = produkt?.trim() || '';
-  const [form, setForm] = useState({ name: '', email: '', phone: '', quantity: '', message: '' });
+  const [form, setForm] = useState({ first_name: '', last_name: '', email: '', phone: '', quantity: '', message: '' });
   const [datenschutz, setDatenschutz] = useState(false);
   const [status, setStatus] = useState<'formular' | 'sendet' | 'fertig'>('formular');
   const [fehler, setFehler] = useState<string[]>([]);
@@ -28,7 +28,8 @@ export default function OfferForm({ produkt, onClose }: { produkt?: string; onCl
         if (!c) return;
         setForm((f) => ({
           ...f,
-          name: [c.first_name, c.last_name].filter(Boolean).join(' ') || f.name,
+          first_name: c.first_name || f.first_name,
+          last_name: c.last_name || f.last_name,
           email: c.email || f.email,
           phone: c.phone || f.phone,
         }));
@@ -49,7 +50,8 @@ export default function OfferForm({ produkt, onClose }: { produkt?: string; onCl
     setStatus('sendet');
     try {
       await sendOfferRequest({
-        name: form.name.trim(),
+        first_name: form.first_name.trim(),
+        last_name: form.last_name.trim(),
         email: form.email.trim(),
         phone: form.phone.trim() || undefined,
         quantity: form.quantity ? Number(form.quantity) : null,
@@ -90,8 +92,12 @@ export default function OfferForm({ produkt, onClose }: { produkt?: string; onCl
       )}
       <form style={{ marginTop: 'var(--sk-space-4)' }} onSubmit={absenden}>
         <div className="sk-field">
-          <label className="sk-label" htmlFor="a-name">Name</label>
-          <input id="a-name" className="sk-input" value={form.name} onChange={set('name')} required />
+          <label className="sk-label" htmlFor="a-vorname">Vorname</label>
+          <input id="a-vorname" className="sk-input" value={form.first_name} onChange={set('first_name')} required />
+        </div>
+        <div className="sk-field">
+          <label className="sk-label" htmlFor="a-nachname">Nachname</label>
+          <input id="a-nachname" className="sk-input" value={form.last_name} onChange={set('last_name')} required />
         </div>
         <div className="sk-field">
           <label className="sk-label" htmlFor="a-mail">E-Mail</label>

src/lib/api.ts

@@ -296,11 +296,33 @@ export type QuoteInput = {
   email?: string;
   /** Segment für den Mengen-Multiplikator (B2B/B2C). */
   person_type?: 'privat' | 'unternehmen';
+  /** Gewähltes Kundenangebot (ID) – Aufschläge werden serverseitig addiert. */
+  offer?: number;
 };
 
-/** Preis serverseitig berechnen lassen – der Client rechnet nie selbst. */
+/** Preis serverseitig berechnen lassen – der Client rechnet nie selbst.
+ *  auth:true, damit bei eingeloggten Kunden der Token mitgeht (Kundenangebote). */
 export async function fetchQuote(input: QuoteInput): Promise<Quote> {
-  return request('/skrift-orders/quote', { method: 'POST', body: input, auth: false });
+  return request('/skrift-orders/quote', { method: 'POST', body: input, auth: true });
+}
+
+/* ── Kundenangebote (customer_offers) ───────────────────────────────────────── */
+
+export type OfferSurcharge = { label: string; amount: number };
+export type CustomerOffer = {
+  id: number;
+  label: string;
+  name_suffix?: string | null;
+  note?: string | null;
+  allow_multi_page?: boolean;
+  surcharges?: OfferSurcharge[] | null;
+  product?: { key: string; name: string } | null;
+};
+
+/** Angebote des eingeloggten Kunden für ein Produkt (leer, wenn nicht eingeloggt). */
+export async function fetchMyOffers(productKey: string): Promise<CustomerOffer[]> {
+  const data = await request(`/skrift-orders/my-offers?product=${encodeURIComponent(productKey)}`, { auth: true });
+  return data?.offers ?? [];
 }
 
 /* ── Motive ───────────────────────────────────────────────────────────────── */
@@ -420,6 +442,8 @@ export type OrderInput = {
   voucher_code?: string;
   payment_method: 'paypal' | 'rechnung';
   source?: string;
+  /** Gewähltes Kundenangebot (ID). */
+  offer?: number;
   entries: unknown[];
   /** Motiv aus dem Katalog (ID) bzw. hochgeladene Datei (Directus-Datei-ID). */
   motif?: number;
@@ -436,7 +460,9 @@ export type OrderResult = {
 };
 
 export async function createOrder(input: OrderInput): Promise<OrderResult> {
-  return request('/skrift-orders', { method: 'POST', body: input, auth: false });
+  // auth:true → eingeloggte Kunden senden ihren Token (Kundenangebote greifen);
+  // Gäste haben keine Session → kein Header, Verhalten wie zuvor.
+  return request('/skrift-orders', { method: 'POST', body: input, auth: true });
 }
 
 /** Vermerkt eine erfolgreiche PayPal-Zahlung am Auftrag. */
@@ -481,23 +507,28 @@ export const paypalClientId = (s: PublicSettings | null) =>
 
 /** Lädt eine Datei nach Directus und liefert deren ID. */
 export async function uploadFile(datei: File): Promise<string> {
-  const form = new FormData();
-  form.append('file', datei);
-
-  const session = await ensureFreshToken();
-  const res = await fetch(`${BASE}/files`, {
-    method: 'POST',
-    headers: session ? { Authorization: `Bearer ${session.access_token}` } : undefined,
-    body: form,
+  // Als Base64 (Data-URL) an den öffentlichen Upload-Proxy schicken – so können
+  // auch Gäste (Bestellung ohne Login) Motive/Quelldateien hochladen. Der direkte
+  // Directus-/files-Upload braucht einen Token, den Gäste nicht haben.
+  const data_base64 = await new Promise<string>((resolve, reject) => {
+    const r = new FileReader();
+    r.onload = () => resolve(String(r.result || ''));
+    r.onerror = () => reject(new Error('Datei konnte nicht gelesen werden.'));
+    r.readAsDataURL(datei);
   });
-  const data = await parse(res);
-  return data?.data?.id;
+  const data = await request('/skrift-orders/upload', {
+    method: 'POST',
+    auth: false,
+    body: { filename: datei.name, content_type: datei.type || 'application/octet-stream', data_base64 },
+  });
+  return data?.id;
 }
 
 /* ── Angebotsanfrage ──────────────────────────────────────────────────────── */
 
 export type OfferRequest = {
-  name: string;
+  first_name: string;
+  last_name: string;
   email: string;
   phone?: string;
   quantity?: number | null;
@@ -514,7 +545,8 @@ export async function sendOfferRequest(input: OfferRequest) {
 
 export type SampleRequest = {
   product: string;
-  name: string;
+  first_name: string;
+  last_name: string;
   email: string;
   phone?: string;
   street: string;
@@ -528,6 +560,29 @@ export async function sendSampleRequest(input: SampleRequest) {
   return request('/skrift-orders/sample-request', { method: 'POST', body: input, auth: false });
 }
 
+/* ── Motiv-Freigabe (öffentlich, per Einmal-Token) ─────────────────────────── */
+
+export type Freigabe = {
+  order_number: string;
+  product: string;
+  status: 'pending' | 'approved' | 'changes' | string;
+  note: string;
+  has_layout: boolean;
+};
+
+export async function fetchFreigabe(token: string): Promise<Freigabe> {
+  return request(`/skrift-orders/freigabe/${encodeURIComponent(token)}`, { auth: false });
+}
+
+export async function sendFreigabe(token: string, action: 'approve' | 'changes', note?: string) {
+  return request(`/skrift-orders/freigabe/${encodeURIComponent(token)}`, { method: 'POST', body: { action, note }, auth: false });
+}
+
+/** Direkte URL zum A6-Entwurfs-SVG (Token-gated, kein Login nötig). */
+export function freigabeLayoutUrl(token: string) {
+  return `${BASE}/skrift-orders/freigabe/${encodeURIComponent(token)}/layout`;
+}
+
 /* ── Statusverlauf & Benachrichtigungen ───────────────────────────────────── */
 
 export type StatusEvent = {

src/routes/Angebot.tsx

@@ -0,0 +1,13 @@
+import { useNavigate } from 'react-router-dom';
+import OfferForm from '../components/OfferForm';
+
+/** Individuelles Angebot als eigene Seite (Direktlink /angebot) – kein Popup. */
+export default function AngebotSeite() {
+  const navigate = useNavigate();
+  return (
+    <div className="sk-view">
+      <h1>Individuelles Angebot anfordern</h1>
+      <OfferForm onClose={() => navigate('/')} />
+    </div>
+  );
+}

src/routes/Configurator.tsx

@@ -12,6 +12,7 @@ import {
   fetchPriceItems,
   fetchProducts,
   fetchQuote,
+  fetchMyOffers,
   fetchSettings,
   generatePreview,
   validateText,
@@ -26,6 +27,7 @@ import {
   type Product,
   type PublicSettings,
   type Quote,
+  type CustomerOffer,
 } from '../lib/api';
 import { ladePayPal, rendereButtons } from '../lib/paypal';
 import { ladeVorlageHerunter, leseEmpfaengerDatei } from '../lib/excel';
@@ -42,8 +44,10 @@ const PRODUKT_TEXT: Record<string, string> = {
   follow_ups: 'Automatisierte handschriftliche Nachfass-Mailings für mehr Rücklauf.',
 };
 
-/** Standard-Platzhalter der strukturierten Adresse (werden automatisch befüllt). */
-const STANDARD_STRUKTUR = ['Anrede', 'Vorname', 'Nachname', 'Strasse', 'PLZ', 'Ort', 'Land'];
+/** Standard-Platzhalter der strukturierten Adresse (werden automatisch befüllt).
+ *  Ohne „Anrede" – dafür gibt es kein Empfängerfeld; als [[Anrede]] ist es ein
+ *  frei befüllbarer eigener Platzhalter. */
+const STANDARD_STRUKTUR = ['Vorname', 'Nachname', 'Strasse', 'PLZ', 'Ort', 'Land'];
 /** Standard-Platzhalter der Freitext-Adresse. */
 const STANDARD_FREITEXT = ['Zeile1', 'Zeile2', 'Zeile3', 'Zeile4', 'Zeile5'];
 
@@ -302,6 +306,7 @@ export default function Configurator({ vorwahlProdukt }: { vorwahlProdukt?: stri
 
   const [motifMode, setMotifMode] = useState<MotifMode>(entwurf.motifMode ?? 'katalog');
   const [motifs, setMotifs] = useState<Motif[]>([]);
+  const [motifeGeladen, setMotifeGeladen] = useState(false);
   const [motifId, setMotifId] = useState<number | null>(entwurf.motifId ?? null);
   // Gestaltungsservice ist jetzt eine der sich gegenseitig ausschließenden
   // Motiv-Optionen – daher abgeleitet, kein eigener Zustand mehr.
@@ -336,6 +341,9 @@ export default function Configurator({ vorwahlProdukt }: { vorwahlProdukt?: stri
 
   const [quote, setQuote] = useState<Quote | null>(null);
   const [quoteFehler, setQuoteFehler] = useState<string | null>(null);
+  // Kundenangebote (customer_offers) für den eingeloggten Kunden + das Produkt.
+  const [offers, setOffers] = useState<CustomerOffer[]>([]);
+  const [offerId, setOfferId] = useState<number | null>(null);
 
   const [previewDocs, setPreviewDocs] = useState<PreviewDoc[]>([]);
   const [previewLaedt, setPreviewLaedt] = useState(false);
@@ -352,7 +360,7 @@ export default function Configurator({ vorwahlProdukt }: { vorwahlProdukt?: stri
 
   const [sendet, setSendet] = useState(false);
   const [bestellFehler, setBestellFehler] = useState<string[]>([]);
-  const [bestellung, setBestellung] = useState<{ nummer: string; zahlung: string; bezahlt: boolean; extern?: boolean } | null>(null);
+  const [bestellung, setBestellung] = useState<{ nummer: string; zahlung: string; bezahlt: boolean; betrag: number; extern?: boolean } | null>(null);
 
   const [settings, setSettings] = useState<PublicSettings | null>(null);
   const [preisKatalog, setPreisKatalog] = useState<Record<string, PriceItem>>({});
@@ -396,7 +404,7 @@ export default function Configurator({ vorwahlProdukt }: { vorwahlProdukt?: stri
 
     // … Motive, Einstellungen und Preise dagegen optional. Sie dürfen den
     // Konfigurator nicht blockieren, wenn Felder fehlen (z. B. vor dem Bootstrap).
-    fetchMotifs().then(setMotifs).catch(() => setMotifs([]));
+    fetchMotifs().then(setMotifs).catch(() => setMotifs([])).finally(() => setMotifeGeladen(true));
     fetchSettings().then(setSettings).catch(() => setSettings(null));
     fetchPriceItems()
       .then((items) => setPreisKatalog(Object.fromEntries(items.map((i) => [i.key, i]))))
@@ -495,6 +503,17 @@ export default function Configurator({ vorwahlProdukt }: { vorwahlProdukt?: stri
     [motifs, benoetigteAusrichtung],
   );
   const gewaehltesMotiv = sichtbareMotive.find((m) => m.id === motifId) ?? null;
+  // Katalog-Auswahl nur anbieten, wenn (nach dem Laden) auch Motive hinterlegt
+  // sind. Vor dem Laden bleibt die Option sichtbar (Standard), damit sie nicht
+  // aufblitzt und wieder verschwindet.
+  const katalogVerfuegbar = sichtbareMotive.length > 0;
+  const katalogOptionSichtbar = !motifeGeladen || katalogVerfuegbar;
+
+  // Ist „Motiv aus unserer Auswahl" gewählt, aber es gibt (nach dem Laden) keine
+  // Motive für dieses Format, automatisch auf „Ohne Motiv" wechseln.
+  useEffect(() => {
+    if (motifeGeladen && !katalogVerfuegbar && motifMode === 'katalog') setMotifMode('ohne');
+  }, [motifeGeladen, katalogVerfuegbar, motifMode]);
 
   // Produkt aus dem Direktlink (z. B. /briefe) vorwählen, sobald geladen –
   // überschreibt auch ein evtl. zwischengespeichertes anderes Produkt.
@@ -613,6 +632,14 @@ export default function Configurator({ vorwahlProdukt }: { vorwahlProdukt?: stri
 
   // Produkt kommt aus dem Direktlink; Extern-Modus ist oben definiert.
   const angemeldet = !!loadSession();
+  // Kundenangebote laden, sobald Produkt gewählt + eingeloggt (sonst keine).
+  useEffect(() => {
+    setOfferId(null);
+    if (!product || !angemeldet) { setOffers([]); return; }
+    let ab = false;
+    fetchMyOffers(product).then((o) => { if (!ab) setOffers(o); }).catch(() => { if (!ab) setOffers([]); });
+    return () => { ab = true; };
+  }, [product, angemeldet]);
   // „Sie sind" entfällt, wenn die Einstufung schon feststeht (eingeloggt mit
   // person_type) oder im Extern-Modus.
   const zeigeSieSind = !externModus && !(angemeldet && !!personType);
@@ -705,6 +732,7 @@ export default function Configurator({ vorwahlProdukt }: { vorwahlProdukt?: stri
       voucher_code: voucher.trim() || undefined,
       // Bekannte E-Mail mitgeben, damit Kundenrabatte in den Live-Preis einfließen.
       email: istEmail(rechnung.email) ? rechnung.email.trim() : undefined,
+      offer: offerId ?? undefined,
     })
       .then((q) => !abgebrochen && setQuote(q))
       .catch((err) => {
@@ -715,7 +743,7 @@ export default function Configurator({ vorwahlProdukt }: { vorwahlProdukt?: stri
 
     return () => { abgebrochen = true; };
   }, [product, kontaktSelektiert, format, preisMenge, shippingType, needsEnvelope, labeling,
-      motifMode, istPostkarte, textservice, designservice, voucher, rechnung.email, personType]);
+      motifMode, istPostkarte, textservice, designservice, voucher, rechnung.email, personType, offerId]);
 
   /**
    * Einzelversand: Kuvert mit Empfängeradresse ist zwingend (wir adressieren
@@ -778,6 +806,28 @@ export default function Configurator({ vorwahlProdukt }: { vorwahlProdukt?: stri
   const eigeneImText = genutztePlatzhalter.filter((p) => !standardSet.has(p.toLowerCase()));
   /** Platzhalter im individuellen Umschlagtext – analog zur Text-Tabelle. */
   const genutztePlatzhalterUmschlag = useMemo(() => textPlatzhalter(umschlagText), [umschlagText]);
+  /**
+   * Entry für den Versand ans Backend: löst ALLE im Text/Umschlag genutzten
+   * Platzhalter explizit auf (Standard-Platzhalter aus der Adresse via standardWert,
+   * eigene aus e.placeholders). So wird je Empfänger sicher ersetzt – unabhängig
+   * davon, wie das Backend die Adressfelder interpretiert.
+   *
+   * Zusätzlich wird der Freitext nur bei Adressmodus „freitext" mitgeschickt.
+   * Bei strukturierter Adresse muss free_text leer sein, sonst bevorzugt das
+   * Backend (addressText) den Freitext und beschriftet den Umschlag falsch –
+   * auch wenn im Freitextfeld nur Reste von einem früheren Moduswechsel stehen.
+   */
+  const mitPlatzhaltern = (e: Entry): Entry => {
+    const used = [...new Set([...genutztePlatzhalter, ...genutztePlatzhalterUmschlag])];
+    return {
+      ...e,
+      free_text: adressModus === 'freitext' ? e.free_text : '',
+      placeholders: {
+        ...Object.fromEntries(used.map((p) => [p, standardWert(e, p)])),
+        ...e.placeholders,
+      },
+    };
+  };
   /**
    * Werden Platzhalterwerte NICHT bereits in einem Empfänger-Schritt erfasst
    * (kein Adress-Schritt, kein Umschlag-Freitext)? Dann muss der Text-Schritt
@@ -807,7 +857,7 @@ export default function Configurator({ vorwahlProdukt }: { vorwahlProdukt?: stri
       .then(() => {
         if (abgebrochen || !paypalRef.current) return;
         return rendereButtons(paypalRef.current, {
-          betrag: quote?.gross_total ?? 0,
+          betrag: bestellung.betrag,
           beschreibung: `Skrift ${gewaehltesProdukt?.name ?? ''} – ${bestellung.nummer}`,
           onApproved: async (referenz) => {
             await confirmPayment(bestellung.nummer, referenz);
@@ -819,7 +869,7 @@ export default function Configurator({ vorwahlProdukt }: { vorwahlProdukt?: stri
       .catch((err) => setBestellFehler([err.message ?? 'PayPal konnte nicht geladen werden.']));
 
     return () => { abgebrochen = true; };
-  }, [bestellung, settings, quote?.gross_total, gewaehltesProdukt?.name]);
+  }, [bestellung, settings, gewaehltesProdukt?.name]);
 
   const mwst = quote?.mwst_percent ?? settings?.mwst_percent ?? 19;
 
@@ -897,8 +947,16 @@ export default function Configurator({ vorwahlProdukt }: { vorwahlProdukt?: stri
     if (!paypalMoeglich && zahlung === 'paypal') setZahlung('rechnung');
   }, [paypalMoeglich, zahlung]);
 
+  // Sicherheitsnetz gegen Fehlbelastung: Die produzierte Menge (entries_count,
+  // serverseitig = entries.length) MUSS der berechneten/bezahlten Menge
+  // entsprechen. Weicht sie ab (z. B. Excel mit weniger Zeilen als gewählte
+  // Menge, oder nachträglich geänderte Menge), wird die Bestellung blockiert –
+  // sonst zahlt der Kunde für mehr Karten, als tatsächlich angelegt werden.
+  // Extern-/Datei-/Preislose Produkte haben ein anderes Mengenmodell → ausgenommen.
+  const mengeStimmt = externModus || dateiModus || keinePreise || entries.length === quantity;
+
   // Ohne Preis (Extern-Modus/Datei-Produkt) gibt es keinen quote – dort reicht die Zustimmung.
-  const bestellbereit = agb && datenschutz && final && (!!quote || keinePreise);
+  const bestellbereit = agb && datenschutz && final && (!!quote || keinePreise) && mengeStimmt;
 
   async function weiter() {
     // Beim Verlassen des Text-Schritts prüfen, ob das Schriftstück zu viele
@@ -918,7 +976,7 @@ export default function Configurator({ vorwahlProdukt }: { vorwahlProdukt?: stri
           realistic: realistisch,
           envelope_labeling: needsEnvelope ? labeling : 'keine',
           envelope_text: umschlagText,
-          entries: entries.slice(0, 3),
+          entries: entries.slice(0, 3).map(mitPlatzhaltern),
         });
         if (r.has_overflow) {
           setTextUeberlauf(true);
@@ -967,7 +1025,7 @@ export default function Configurator({ vorwahlProdukt }: { vorwahlProdukt?: stri
         realistic: realistisch,
         envelope_labeling: needsEnvelope ? labeling : 'keine',
         envelope_text: umschlagText,
-        entries: entries.slice(0, 3),
+        entries: entries.slice(0, 3).map(mitPlatzhaltern),
       });
       setPreviewDocs(ergebnis.docs);
       setPreviewVerbleibend(ergebnis.remaining);
@@ -1049,6 +1107,7 @@ export default function Configurator({ vorwahlProdukt }: { vorwahlProdukt?: stri
           ...(designservice ? ['gestaltungsservice'] : []),
         ],
         voucher_code: voucher.trim() || undefined,
+        offer: offerId ?? undefined,
         payment_method: keinePreise ? 'rechnung' : zahlung,
         source: externModus ? 'extern' : (loadSession() ? 'portal' : 'configurator'),
         // Gezeigte Vorschau 1:1 übernehmen (nur wenn unverändert seit der Vorschau).
@@ -1065,20 +1124,23 @@ export default function Configurator({ vorwahlProdukt }: { vorwahlProdukt?: stri
               street: lieferung.street, zip: lieferung.zip, city: lieferung.city, country: lieferung.country,
             }
           : null,
-        entries: entries.map((e) => ({
-          salutation: e.salutation,
-          first_name: e.first_name,
-          last_name: e.last_name,
-          street: e.street,
-          house_no: e.house_no,
-          zip: e.zip,
-          city: e.city,
-          country: e.country,
-          free_text: adressModus === 'freitext' ? e.free_text : '',
-          placeholders: e.placeholders,
-          // Abweichender Text nur, wenn wirklich gesetzt (sonst greift der Standardtext).
-          text: (e.text && e.text.trim()) ? e.text : undefined,
-        })),
+        entries: entries.map((e) => {
+          const n = mitPlatzhaltern(e); // free_text-Normalisierung + Platzhalter
+          return {
+            salutation: e.salutation,
+            first_name: e.first_name,
+            last_name: e.last_name,
+            street: e.street,
+            house_no: e.house_no,
+            zip: e.zip,
+            city: e.city,
+            country: e.country,
+            free_text: n.free_text,
+            placeholders: n.placeholders,
+            // Abweichender Text nur, wenn wirklich gesetzt (sonst greift der Standardtext).
+            text: (e.text && e.text.trim()) ? e.text : undefined,
+          };
+        }),
       });
       // Auftrag ist abgesendet – der zwischengespeicherte Entwurf wird verworfen.
       try { localStorage.removeItem(ENTWURF_KEY); } catch { /* egal */ }
@@ -1086,6 +1148,10 @@ export default function Configurator({ vorwahlProdukt }: { vorwahlProdukt?: stri
         nummer: ergebnis.order_number,
         zahlung: ergebnis.payment_method,
         bezahlt: ergebnis.payment_method !== 'paypal',
+        // Serverseitig bestätigter Betrag – NUR dieser wird per PayPal belastet,
+        // nie der Client-Quote (der könnte von der tatsächlich angelegten
+        // Auftragsmenge abweichen und den Kunden falsch belasten).
+        betrag: ergebnis.gross_total,
         extern: externModus,
       });
     } catch (err) {
@@ -1234,6 +1300,31 @@ export default function Configurator({ vorwahlProdukt }: { vorwahlProdukt?: stri
           {/* ── Menge & Versand ─────────────────────────────────── */}
           {aktuell === 'Menge & Versand' && (
             <>
+              {offers.length > 0 && (
+                <section className="sk-card">
+                  <h2>Ihr Angebot</h2>
+                  <div className="sk-options" style={{ marginTop: 'var(--sk-space-4)' }}>
+                    <Option name="offer" selected={offerId === null} onSelect={() => setOfferId(null)} title="Standard" />
+                    {offers.map((o) => (
+                      <Option key={o.id} name="offer" selected={offerId === o.id} onSelect={() => setOfferId(o.id)}
+                        title={o.label + (o.name_suffix ? ` (${o.name_suffix})` : '')} />
+                    ))}
+                  </div>
+                  {(() => {
+                    const o = offerId !== null ? offers.find((x) => x.id === offerId) : null;
+                    if (!o) return null;
+                    const sur = o.surcharges ?? [];
+                    return (
+                      <div style={{ marginTop: 'var(--sk-space-3)', fontSize: 13, color: 'var(--sk-muted, #666)', lineHeight: 1.5 }}>
+                        {sur.length > 0 && (
+                          <div>Aufschläge pro Stück: {sur.map((s) => `${s.label} +${Number(s.amount).toFixed(2)} €`).join(' · ')}</div>
+                        )}
+                        {o.note && <div style={{ marginTop: 4 }}>{o.note}</div>}
+                      </div>
+                    );
+                  })()}
+                </section>
+              )}
               <section className="sk-card">
                 <h2>Wie viele?</h2>
                 <div className="sk-field" style={{ marginTop: 'var(--sk-space-4)', marginBottom: 0 }}>
@@ -1312,8 +1403,10 @@ export default function Configurator({ vorwahlProdukt }: { vorwahlProdukt?: stri
               {/* Einheitliche Radio-Karten in fester Reihenfolge – es ist immer
                   genau eine Option gewählt (auch der Gestaltungsservice). */}
               <div className="sk-options" style={{ marginTop: 'var(--sk-space-4)' }}>
-                <Option name="motif" selected={motifMode === 'katalog'} onSelect={() => setMotifMode('katalog')}
-                  title="Motiv aus unserer Auswahl" desc="Wir zeigen Ihnen passende Motive" />
+                {katalogOptionSichtbar && (
+                  <Option name="motif" selected={motifMode === 'katalog'} onSelect={() => setMotifMode('katalog')}
+                    title="Motiv aus unserer Auswahl" desc="Wir zeigen Ihnen passende Motive" />
+                )}
                 <Option name="motif" selected={motifMode === 'ohne'} onSelect={() => setMotifMode('ohne')}
                   title="Ohne Motiv" desc="Blanko-Karte, nur beschrieben" />
                 <Option name="motif" selected={motifMode === 'upload'} onSelect={() => setMotifMode('upload')}
@@ -1998,6 +2091,22 @@ export default function Configurator({ vorwahlProdukt }: { vorwahlProdukt?: stri
                   </span>
                 </label>
 
+                {!mengeStimmt && (
+                  <div role="alert" style={{
+                    border: '1px solid var(--sk-danger, #c62828)',
+                    background: 'rgba(198,40,40,0.08)',
+                    color: 'var(--sk-danger, #c62828)',
+                    borderRadius: 'var(--sk-radius, 10px)',
+                    padding: 'var(--sk-space-3) var(--sk-space-4)',
+                    margin: 'var(--sk-space-4) 0 0',
+                    fontSize: 'var(--sk-size-sm)',
+                  }}>
+                    Ihre hinterlegten Empfänger/Dokumente ({entries.length}) stimmen nicht mit der
+                    gewählten Menge ({quantity}) überein. Bitte gleichen Sie die Menge oder Ihre
+                    Empfängerliste an, bevor Sie kostenpflichtig bestellen.
+                  </div>
+                )}
+
                 {bestellFehler.length > 0 && (
                   <ul className="sk-error" style={{ margin: 'var(--sk-space-3) 0 0', paddingLeft: '1.1em' }}>
                     {bestellFehler.map((f) => <li key={f}>{f}</li>)}

src/routes/Freigabe.tsx

@@ -0,0 +1,105 @@
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { ApiError, fetchFreigabe, sendFreigabe, freigabeLayoutUrl, type Freigabe } from '../lib/api';
+
+/**
+ * Öffentliche Motiv-Freigabe (Direktlink mit Einmal-Token, kein Login nötig).
+ * Zeigt den A6-Entwurf und lässt den Kunden freigeben oder einen Änderungswunsch
+ * hinterlegen. Erst nach Freigabe geht die Karte in den Druck.
+ */
+export default function FreigabeSeite() {
+  const { token = '' } = useParams();
+  const [data, setData] = useState<Freigabe | null>(null);
+  const [status, setStatus] = useState<'laedt' | 'da' | 'fehler'>('laedt');
+  const [fehler, setFehler] = useState('');
+  const [modus, setModus] = useState<'ansicht' | 'aendern'>('ansicht');
+  const [note, setNote] = useState('');
+  const [sendet, setSendet] = useState(false);
+  const [ergebnis, setErgebnis] = useState<'approved' | 'changes' | null>(null);
+
+  useEffect(() => {
+    fetchFreigabe(token)
+      .then((d) => { setData(d); setStatus('da'); if (d.status === 'approved' || d.status === 'changes') setErgebnis(d.status); })
+      .catch((e) => { setStatus('fehler'); setFehler(e instanceof ApiError ? e.message : 'Freigabe-Link ungültig oder abgelaufen.'); });
+  }, [token]);
+
+  async function absenden(action: 'approve' | 'changes') {
+    if (action === 'changes' && !note.trim()) { setFehler('Bitte beschreiben Sie kurz Ihren Änderungswunsch.'); return; }
+    setFehler(''); setSendet(true);
+    try {
+      await sendFreigabe(token, action, action === 'changes' ? note.trim() : undefined);
+      setErgebnis(action === 'approve' ? 'approved' : 'changes');
+    } catch (e) {
+      setFehler(e instanceof ApiError ? e.message : 'Konnte nicht gespeichert werden.');
+    } finally { setSendet(false); }
+  }
+
+  if (status === 'laedt') return <div className="sk-view"><p className="sk-note">Lädt …</p></div>;
+  if (status === 'fehler') return (
+    <div className="sk-view">
+      <h1>Freigabe</h1>
+      <p className="sk-error">{fehler}</p>
+    </div>
+  );
+
+  const d = data!;
+  const vorschau = (
+    <div style={{
+      margin: 'var(--sk-space-4) 0', maxWidth: 520, aspectRatio: '148 / 105', width: '100%',
+      border: '1px solid var(--sk-border)', borderRadius: 'var(--sk-radius)', overflow: 'hidden',
+      background: '#f4f6fa', boxShadow: '0 2px 10px rgba(0,0,0,.08)',
+    }}>
+      {d.has_layout
+        ? <img src={freigabeLayoutUrl(token)} alt="A6-Entwurf" style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }} />
+        : <div style={{ display: 'grid', placeItems: 'center', height: '100%' }}><span className="sk-note">Entwurf wird noch erstellt …</span></div>}
+    </div>
+  );
+
+  if (ergebnis === 'approved') return (
+    <div className="sk-view">
+      <h1>Vielen Dank!</h1>
+      <p>Sie haben den Entwurf zu <strong>{d.order_number}</strong> freigegeben. Ihre Karte geht jetzt in den Druck.</p>
+      {vorschau}
+    </div>
+  );
+  if (ergebnis === 'changes') return (
+    <div className="sk-view">
+      <h1>Änderungswunsch erhalten</h1>
+      <p>Danke – wir haben Ihren Änderungswunsch zu <strong>{d.order_number}</strong> notiert und melden uns mit einem neuen Entwurf.</p>
+      {vorschau}
+    </div>
+  );
+
+  return (
+    <div className="sk-view">
+      <h1>Ihr Postkarten-Entwurf</h1>
+      <p className="sk-note">Bestellung {d.order_number} · {d.product}. Bitte prüfen Sie den Druck-Entwurf (A6). Erst nach Ihrer Freigabe geht die Karte in den Druck.</p>
+      {vorschau}
+
+      {fehler && <p className="sk-error" style={{ margin: '0 0 var(--sk-space-3)' }}>{fehler}</p>}
+
+      {modus === 'ansicht' ? (
+        <div style={{ display: 'flex', gap: 'var(--sk-space-3)', flexWrap: 'wrap' }}>
+          <button className="sk-btn sk-btn--primary" disabled={sendet} onClick={() => absenden('approve')}>
+            {sendet ? 'Wird gesendet …' : '✓ Entwurf freigeben'}
+          </button>
+          <button className="sk-btn" disabled={sendet} onClick={() => { setModus('aendern'); setFehler(''); }}>
+            Änderung wünschen
+          </button>
+        </div>
+      ) : (
+        <div className="sk-field">
+          <label className="sk-label" htmlFor="f-note">Was sollen wir ändern?</label>
+          <textarea id="f-note" className="sk-input" rows={4} value={note} onChange={(e) => setNote(e.target.value)}
+            placeholder="z. B. Motiv etwas größer, anderer Ausschnitt, Text ergänzen …" />
+          <div style={{ display: 'flex', gap: 'var(--sk-space-3)', flexWrap: 'wrap', marginTop: 'var(--sk-space-3)' }}>
+            <button className="sk-btn sk-btn--primary" disabled={sendet} onClick={() => absenden('changes')}>
+              {sendet ? 'Wird gesendet …' : 'Änderungswunsch senden'}
+            </button>
+            <button className="sk-btn" disabled={sendet} onClick={() => { setModus('ansicht'); setFehler(''); }}>Zurück</button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/routes/Textmenge.tsx

@@ -0,0 +1,318 @@
+import { useEffect, useMemo, useState } from 'react';
+import { fetchFormats, fetchSettings, generatePreview } from '../lib/api';
+import type { Format, PublicSettings, PreviewDoc, PreviewOverflow } from '../lib/api';
+
+/** Schriftarten wie im Konfigurator/manuellen Druck. */
+const SCHRIFTEN = [
+  { key: 'tilda', name: 'Tilda' },
+  { key: 'alva', name: 'Alva' },
+  { key: 'ellie', name: 'Ellie' },
+];
+
+/** Kugelschreiber-Optik (identisch zum PreviewPanel): blaue Tinte, dezenter Wobble. */
+let inkSeq = 0;
+const inkify = (svg: string): string => {
+  if (typeof svg !== 'string') return svg;
+  const id = `skink${inkSeq++}`;
+  return svg
+    .replace(/stroke="#0{3,6}"/gi, 'stroke="#1a2a6c" stroke-opacity="0.95"')
+    .replace(/stroke-width="0\.6"/gi, 'stroke-width="1.4"')
+    .replace(/(<svg[^>]*>)/i, `$1<defs><filter id="${id}" x="-4%" y="-4%" width="108%" height="108%" color-interpolation-filters="sRGB"><feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="1" seed="4" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale="1.3" xChannelSelector="R" yChannelSelector="G"/></filter></defs>`)
+    .replace(/(<rect[^>]*fill="#FFFFFF"[^>]*\/>)/i, `$1<g filter="url(#${id})">`)
+    .replace(/<\/svg>\s*$/i, '</g></svg>');
+};
+
+/** Musterbild als PNG herunterladen (SVG → Canvas), wie im PreviewPanel. */
+function bildSpeichern(svg: string) {
+  const m = svg.match(/viewBox="0 0 ([\d.]+) ([\d.]+)"/);
+  const w = Math.round(m ? Number(m[1]) : 794);
+  const h = Math.round(m ? Number(m[2]) : 1123);
+  const inkSvg = inkify(svg);
+  const url = URL.createObjectURL(new Blob([inkSvg], { type: 'image/svg+xml;charset=utf-8' }));
+  const img = new Image();
+  img.onload = () => {
+    const canvas = document.createElement('canvas');
+    canvas.width = w;
+    canvas.height = h;
+    const ctx = canvas.getContext('2d');
+    if (ctx) {
+      ctx.fillStyle = '#ffffff';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+      canvas.toBlob((png) => {
+        if (png) {
+          const a = document.createElement('a');
+          a.href = URL.createObjectURL(png);
+          a.download = 'skrift-textmenge.png';
+          a.click();
+          URL.revokeObjectURL(a.href);
+        }
+        URL.revokeObjectURL(url);
+      }, 'image/png');
+    } else {
+      URL.revokeObjectURL(url);
+    }
+  };
+  img.onerror = () => URL.revokeObjectURL(url);
+  img.src = url;
+}
+
+/** Stabile anonyme Kennung fürs Vorschau-Kontingent (wie im Konfigurator). */
+function clientId(): string {
+  const KEY = 'skrift.client';
+  let id = localStorage.getItem(KEY);
+  if (!id) {
+    id = `c-${Math.random().toString(36).slice(2)}-${Date.now().toString(36)}`;
+    localStorage.setItem(KEY, id);
+  }
+  return id;
+}
+
+/** Fehlermeldung bei Zeilen-Überlauf (wie im Konfigurator). */
+function overflowMeldung(overflow?: PreviewOverflow[]) {
+  const schlimmste = (overflow ?? []).reduce<{ lineCount: number; lineLimit: number } | null>(
+    (m, o) => (o.lineCount > (m?.lineCount ?? 0) ? o : m),
+    null,
+  );
+  const detail = schlimmste ? ` (${schlimmste.lineCount} von ${schlimmste.lineLimit} Zeilen)` : '';
+  return `Der Text ist zu lang für das gewählte Format${detail}. Bitte kürze den Text.`;
+}
+
+/**
+ * Textmengen-Tool (/textmenge): Format- und Schriftwahl, Texteingabe (Tabulator,
+ * gesperrte Zeichen) und „Vorschau generieren" → rendert EIN Schriftstück
+ * (Kugelschreiber-Optik). Passt der Text nicht auf eine Seite, kommt die Fehlermeldung.
+ * Bewusst einseitig: kein Seitenumbruch.
+ */
+export default function Textmenge() {
+  const [formate, setFormate] = useState<Format[]>([]);
+  const [settings, setSettings] = useState<PublicSettings | null>(null);
+  const [format, setFormat] = useState('a4');
+  const [font, setFont] = useState('tilda');
+  const [realistic, setRealistic] = useState(true);
+  const [text, setText] = useState('');
+  const [hinweis, setHinweis] = useState('');
+
+  const [doc, setDoc] = useState<PreviewDoc | null>(null);
+  const [laedt, setLaedt] = useState(false);
+  const [fehler, setFehler] = useState<string | null>(null);
+  const [gross, setGross] = useState(false);
+
+  useEffect(() => {
+    fetchFormats()
+      .then((f) => {
+        setFormate(f);
+        setFormat(f.find((x) => x.key === 'a4')?.key ?? f[0]?.key ?? 'a4');
+      })
+      .catch(() => {});
+    fetchSettings().then(setSettings).catch(() => {});
+  }, []);
+
+  // Escape schließt die Großansicht.
+  useEffect(() => {
+    if (!gross) return;
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setGross(false); };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [gross]);
+
+  // Gesperrte Zeichen wie im Konfigurator (Zeilenumbruch/Tab bleiben erlaubt).
+  const verbotenRe = useMemo(() => {
+    const wl = settings?.char_whitelist;
+    if (!wl) return null;
+    try {
+      return new RegExp(`[^${wl}\\n\\r\\t]`, 'g');
+    } catch {
+      return null;
+    }
+  }, [settings?.char_whitelist]);
+
+  const saeubere = (v: string) => {
+    if (!verbotenRe) return v;
+    const treffer = v.match(verbotenRe);
+    if (!treffer?.length) return v;
+    const einmalig = [...new Set(treffer)].map((c) => (c === ' ' ? '␣' : c)).join(' ');
+    setHinweis(`Zeichen ${einmalig} ist nicht erlaubt und wurde entfernt.`);
+    window.setTimeout(() => setHinweis(''), 4000);
+    return v.replace(verbotenRe, '');
+  };
+
+  // Änderung an Eingaben → alte Vorschau verwerfen.
+  useEffect(() => {
+    setDoc(null);
+    setFehler(null);
+    setGross(false);
+  }, [text, font, format, realistic]);
+
+  async function generieren() {
+    if (!text.trim() || laedt) return;
+    setLaedt(true);
+    setFehler(null);
+    try {
+      const ergebnis = await generatePreview({
+        client_id: clientId(),
+        text,
+        font,
+        format,
+        realistic,
+        entries: [{}],
+      });
+      if (ergebnis.has_overflow) {
+        setDoc(null);
+        setFehler(overflowMeldung(ergebnis.overflow));
+      } else {
+        setDoc((ergebnis.docs ?? []).find((d) => d.art === 'brief') ?? ergebnis.docs?.[0] ?? null);
+      }
+    } catch (e) {
+      setDoc(null);
+      setFehler((e as Error)?.message || 'Vorschau fehlgeschlagen.');
+    } finally {
+      setLaedt(false);
+    }
+  }
+
+  return (
+    <div className="sk-konf">
+      <div>
+        <h1 style={{ margin: '0 0 8px', fontSize: 28 }}>Textmenge prüfen</h1>
+        <p style={{ color: 'var(--sk-muted, #666)', margin: 0, lineHeight: 1.6 }}>
+          Text eingeben, Format und Schrift wählen, dann eine Vorschau erzeugen. So siehst du, ob der Text auf ein Schriftstück passt.
+        </p>
+      </div>
+
+      <div className="sk-card">
+        <div className="sk-card-body" style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
+          <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
+            <label className="sk-field" style={{ flex: '1 1 200px' }}>
+              <span className="sk-label">Format</span>
+              <select className="sk-input" value={format} onChange={(e) => setFormat(e.target.value)}>
+                {formate.length === 0 && <option value="a4">A4</option>}
+                {formate.map((f) => (
+                  <option key={f.key} value={f.key}>{f.name}</option>
+                ))}
+              </select>
+            </label>
+            <label className="sk-field" style={{ flex: '1 1 200px' }}>
+              <span className="sk-label">Schriftart</span>
+              <select className="sk-input" value={font} onChange={(e) => setFont(e.target.value)}>
+                {SCHRIFTEN.map((s) => (
+                  <option key={s.key} value={s.key}>{s.name}</option>
+                ))}
+              </select>
+            </label>
+          </div>
+
+          <label style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer', fontSize: 15 }}>
+            <input type="checkbox" checked={realistic} onChange={(e) => setRealistic(e.target.checked)} style={{ width: 18, height: 18 }} />
+            Realistische Handschrift (natürliche Variation)
+          </label>
+
+          <label className="sk-field">
+            <span className="sk-label">Text · {text.length} Zeichen</span>
+            <textarea
+              className="sk-input"
+              rows={12}
+              value={text}
+              placeholder="Text eingeben oder einfügen …"
+              style={{ fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', resize: 'vertical', lineHeight: 1.6 }}
+              onChange={(e) => setText(saeubere(e.target.value))}
+              onKeyDown={(e) => {
+                if (e.key !== 'Tab' || e.shiftKey || e.ctrlKey || e.altKey || e.metaKey) return;
+                e.preventDefault();
+                const ta = e.currentTarget;
+                const s = ta.selectionStart ?? text.length;
+                const en = ta.selectionEnd ?? s;
+                setText(saeubere(text.slice(0, s) + '\t' + text.slice(en)));
+                requestAnimationFrame(() => {
+                  ta.selectionStart = ta.selectionEnd = s + 1;
+                });
+              }}
+            />
+          </label>
+
+          <button
+            type="button"
+            className="sk-btn sk-btn--primary"
+            disabled={!text.trim() || laedt}
+            onClick={generieren}
+            style={{ alignSelf: 'flex-start', opacity: !text.trim() || laedt ? 0.6 : 1 }}
+          >
+            {laedt ? 'Vorschau wird erzeugt …' : 'Vorschau generieren'}
+          </button>
+
+          <p style={{ color: 'var(--sk-muted, #666)', fontSize: 12, margin: 0, lineHeight: 1.5 }}>
+            Tabulator (↹) rückt Text ein. Gesperrte Zeichen werden automatisch entfernt.
+          </p>
+          {hinweis && <p style={{ color: 'var(--sk-danger, #c62828)', fontSize: 13, margin: 0 }}>{hinweis}</p>}
+        </div>
+      </div>
+
+      {/* Vorschau / Ergebnis */}
+      <div className="sk-card">
+        <div className="sk-card-body">
+          {fehler ? (
+            <div
+              style={{
+                display: 'flex', gap: 10, alignItems: 'flex-start', color: '#c62828',
+                background: 'rgba(198,40,40,.08)', border: '1px solid rgba(198,40,40,.25)',
+                borderRadius: 10, padding: '14px 16px', fontSize: 15,
+              }}
+            >
+              <span style={{ fontSize: 18, lineHeight: 1 }}>⚠</span>
+              <span>{fehler}</span>
+            </div>
+          ) : doc ? (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, alignItems: 'center' }}>
+              <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap', width: '100%' }}>
+                <span
+                  style={{
+                    fontSize: 13, fontWeight: 600, padding: '4px 12px', borderRadius: 999,
+                    background: 'rgba(46,125,50,.12)', color: '#2e7d32',
+                  }}
+                >
+                  ✓ Passt auf eine Seite
+                </span>
+                <span style={{ flex: 1 }} />
+                <button type="button" className="sk-btn" onClick={() => setGross(true)}>🔍 Vergrößern</button>
+                <button type="button" className="sk-btn sk-btn--primary" onClick={() => bildSpeichern(doc.svg)}>⬇ Bild herunterladen</button>
+              </div>
+              <div
+                className="sk-preview-doc-sheet"
+                onClick={() => setGross(true)}
+                style={{ width: '100%', maxWidth: 460, cursor: 'zoom-in' }}
+                dangerouslySetInnerHTML={{ __html: inkify(doc.svg) }}
+              />
+            </div>
+          ) : (
+            <p style={{ color: 'var(--sk-muted, #666)', margin: 0, textAlign: 'center', padding: '40px 0' }}>
+              Noch keine Vorschau. Text eingeben und „Vorschau generieren" drücken.
+            </p>
+          )}
+        </div>
+      </div>
+
+      {/* Großansicht (Lightbox) */}
+      {gross && doc && (
+        <div
+          onClick={() => setGross(false)}
+          style={{
+            position: 'fixed', inset: 0, background: 'rgba(0,0,0,.72)', zIndex: 1000,
+            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
+            gap: 16, padding: 24,
+          }}
+        >
+          <div style={{ display: 'flex', gap: 10 }} onClick={(e) => e.stopPropagation()}>
+            <button type="button" className="sk-btn sk-btn--primary" onClick={() => bildSpeichern(doc.svg)}>⬇ Bild herunterladen</button>
+            <button type="button" className="sk-btn" onClick={() => setGross(false)}>Schließen</button>
+          </div>
+          <div
+            className="sk-preview-doc-sheet"
+            onClick={(e) => e.stopPropagation()}
+            style={{ width: 'min(92vw, 62vh)', maxHeight: '86vh', overflow: 'auto' }}
+            dangerouslySetInnerHTML={{ __html: inkify(doc.svg) }}
+          />
+        </div>
+      )}
+    </div>
+  );
+}