Textmengencheck: Ausrichtungs-Dropdown (hoch/quer) + robustes Laden

Formate werden zu Familien (family) gruppiert; hat eine Familie mehrere
Ausrichtungen (orientation hoch/quer), erscheint ein zweites Dropdown.
fetchCheckFormats faellt auf aktive Formate zurueck, falls show_check
(vor dem Directus-Bootstrap) noch fehlt.

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

src/lib/api.ts

@@ -232,7 +232,13 @@ export type Product = {
   input_mode: 'text' | 'datei';
 };
 
-export type Format = { id: number; key: string; name: string; product: number };
+export type Format = {
+  id: number; key: string; name: string; product: number;
+  /** Familie fürs Ausrichtungs-Dropdown (z. B. A5, A6). Leer = eigener Eintrag. */
+  family?: string | null;
+  /** Ausrichtung innerhalb der Familie. Leer = keine Wahl. */
+  orientation?: 'hoch' | 'quer' | null;
+};
 
 /**
  * Produkt-Schlüssel, die für den angemeldeten Kunden individuell freigeschaltet
@@ -268,6 +274,31 @@ export async function fetchFormats(): Promise<Format[]> {
   return data?.data ?? [];
 }
 
+/**
+ * Formate für den Textmengencheck: alle mit show_check=true. Das sind die
+ * Text-Seiten-Formate (A4, A5, DIN lang, A6) – unabhängig davon, ob sie im
+ * öffentlichen Konfigurator bestellbar sind. Adress-Postkarten sind ausgenommen.
+ */
+export async function fetchCheckFormats(): Promise<Format[]> {
+  const felder = 'fields=id,key,name,product,family,orientation';
+  try {
+    const data = await request(
+      `/items/formats?${felder}&filter[show_check][_eq]=true&limit=-1`,
+      { auth: false },
+    );
+    const rows: Format[] = data?.data ?? [];
+    if (rows.length) return rows;
+  } catch {
+    /* Feld show_check evtl. noch nicht angelegt → Fallback unten. */
+  }
+  // Fallback (z. B. vor dem Directus-Bootstrap): aktive Formate, damit der Check nutzbar bleibt.
+  const aktiv = await request(
+    `/items/formats?${felder}&filter[active][_eq]=true&limit=-1`,
+    { auth: false },
+  );
+  return aktiv?.data ?? [];
+}
+
 /* ── Preis & Bestellung (Extension skrift-orders) ─────────────────────────── */
 
 export type QuoteLine = { label: string; amount: number; per_unit?: boolean };

src/routes/Configurator.tsx

@@ -44,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'];
 
@@ -304,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.
@@ -357,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>>({});
@@ -401,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]))))
@@ -500,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.
@@ -570,23 +584,6 @@ export default function Configurator({ vorwahlProdukt }: { vorwahlProdukt?: stri
   useEffect(() => { setPreviewSession(null); },
     [textTemplate, font, format, realistisch, labeling, needsEnvelope, umschlagText, entries]);
 
-  // Empfängerzeilen an die Menge angleichen (nur im Tabellenmodus). Gilt auch im
-  // Extern-Modus: die (vom Betreiber vorgegebene) Menge erzeugt die passende
-  // Anzahl Zeilen – egal ob mit oder ohne Kuvert/Empfänger.
-  useEffect(() => {
-    // Bei vielen Empfängern (Tabelle unpraktisch) wird auf Excel verwiesen und
-    // nicht synchronisiert – AUSSER im Extern-Modus ohne Empfänger-Schritt, wo die
-    // Menge einfach N Blanko-Dokumente erzeugen muss (auch über der Tabellengrenze).
-    if (nurUpload && (!externModus || empfaengerSchritt)) return;
-    setEntries((prev) => {
-      if (prev.length === quantity) return prev;
-      if (prev.length < quantity) {
-        return [...prev, ...Array.from({ length: quantity - prev.length }, leereEntry)];
-      }
-      return prev.slice(0, quantity);
-    });
-  }, [quantity, nurUpload, externModus, empfaengerSchritt]);
-
   // Extern-Preset (vom Betreiber im Direktlink gesetzt) – der Kunde wählt nichts:
   //   ?extern=1&versand=sammel|einzeln&kuvert=0|1&beschriftung=empfaenger|freitext|keine&menge=N
   // Die Menge ist maßgeblich (greift immer); nur ein Excel-Import passt sie an die
@@ -792,6 +789,49 @@ 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]);
+
+  // Müssen pro Dokument eigene Daten erfasst werden? Das ist der Fall bei einem
+  // Empfänger-/Individualtext-Schritt oder bei eigenen Platzhaltern im Brieftext
+  // (jede Zeile trägt andere Werte → oberhalb der Tabellengrenze via Excel).
+  const zeilenDatenNoetig = !!empfaengerSchritt || eigeneImText.length > 0;
+
+  // Empfängerzeilen an die Menge angleichen. Unterhalb der Tabellengrenze immer;
+  // darüber nur, wenn KEINE Pflicht-Zeilendaten nötig sind (z. B. identische
+  // Sammelkarten ohne Empfängerliste) – dann erzeugt die Menge N Blanko-Zeilen.
+  // Werden pro Zeile Daten gebraucht, bleibt es beim Excel-Upload (nicht syncen).
+  // Im Extern-Modus wie bisher: syncen außer bei Empfänger-/Individualtext-Schritt.
+  useEffect(() => {
+    if (nurUpload && (externModus ? empfaengerSchritt : zeilenDatenNoetig)) return;
+    setEntries((prev) => {
+      if (prev.length === quantity) return prev;
+      if (prev.length < quantity) {
+        return [...prev, ...Array.from({ length: quantity - prev.length }, leereEntry)];
+      }
+      return prev.slice(0, quantity);
+    });
+  }, [quantity, nurUpload, externModus, empfaengerSchritt, zeilenDatenNoetig]);
+  /**
+   * 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
@@ -821,7 +861,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);
@@ -833,7 +873,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;
 
@@ -911,8 +951,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
@@ -932,7 +980,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);
@@ -981,7 +1029,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);
@@ -1080,20 +1128,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 */ }
@@ -1101,6 +1152,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) {
@@ -1352,8 +1407,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')}
@@ -2038,6 +2095,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

@@ -50,7 +50,7 @@ export default function FreigabeSeite() {
       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: 'cover', display: 'block' }} />
+        ? <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>
   );

src/routes/Textmenge.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-import { fetchFormats, fetchSettings, generatePreview } from '../lib/api';
+import { fetchCheckFormats, fetchSettings, generatePreview } from '../lib/api';
 import type { Format, PublicSettings, PreviewDoc, PreviewOverflow } from '../lib/api';
 
 /** Schriftarten wie im Konfigurator/manuellen Druck. */
@@ -87,7 +87,9 @@ function overflowMeldung(overflow?: PreviewOverflow[]) {
 export default function Textmenge() {
   const [formate, setFormate] = useState<Format[]>([]);
   const [settings, setSettings] = useState<PublicSettings | null>(null);
-  const [format, setFormat] = useState('a4');
+  // Format wird über Familie (A4/A5/A6/DIN lang) + optionale Ausrichtung (hoch/quer) gewählt.
+  const [familie, setFamilie] = useState('');
+  const [ausrichtung, setAusrichtung] = useState('');
   const [font, setFont] = useState('tilda');
   const [realistic, setRealistic] = useState(true);
   const [text, setText] = useState('');
@@ -99,15 +101,45 @@ export default function Textmenge() {
   const [gross, setGross] = useState(false);
 
   useEffect(() => {
-    fetchFormats()
-      .then((f) => {
-        setFormate(f);
-        setFormat(f.find((x) => x.key === 'a4')?.key ?? f[0]?.key ?? 'a4');
-      })
-      .catch(() => {});
+    fetchCheckFormats().then(setFormate).catch(() => {});
     fetchSettings().then(setSettings).catch(() => {});
   }, []);
 
+  // Formate zu Familien gruppieren (gleiche family = ein Eintrag mit Ausrichtungen).
+  // Formate ohne family bilden je einen eigenen Eintrag (Label = Name).
+  const familien = useMemo(() => {
+    const map = new Map<string, Format[]>();
+    for (const f of formate) {
+      const label = (f.family && f.family.trim()) || f.name;
+      if (!map.has(label)) map.set(label, []);
+      map.get(label)!.push(f);
+    }
+    return [...map.entries()].map(([label, items]) => ({ label, items }));
+  }, [formate]);
+
+  // Aktuelle Familie + verfügbare Ausrichtungen + effektiv gewähltes Format.
+  const aktuelleFamilie = familien.find((fm) => fm.label === familie) ?? familien[0] ?? null;
+  const ausrichtungen = (aktuelleFamilie?.items ?? []).filter((f) => f.orientation);
+  const hatAusrichtung = ausrichtungen.length > 1;
+  const gewaehltesFormat = aktuelleFamilie
+    ? (hatAusrichtung
+        ? (aktuelleFamilie.items.find((f) => f.orientation === ausrichtung) ?? aktuelleFamilie.items[0])
+        : aktuelleFamilie.items[0])
+    : null;
+  const formatKey = gewaehltesFormat?.key ?? 'a4';
+
+  // Standardauswahl setzen / reparieren, wenn Formate geladen sind oder sich die Familie ändert.
+  useEffect(() => {
+    if (!familien.length) return;
+    const gueltig = familien.some((fm) => fm.label === familie);
+    if (!gueltig) {
+      const start = familien.find((fm) => fm.items.some((f) => f.key === 'a4')) ?? familien[0];
+      setFamilie(start.label);
+      const ori = start.items.filter((f) => f.orientation);
+      setAusrichtung(ori.length > 1 ? (ori[0].orientation ?? '') : '');
+    }
+  }, [familien, familie]);
+
   // Escape schließt die Großansicht.
   useEffect(() => {
     if (!gross) return;
@@ -142,7 +174,7 @@ export default function Textmenge() {
     setDoc(null);
     setFehler(null);
     setGross(false);
-  }, [text, font, format, realistic]);
+  }, [text, font, formatKey, realistic]);
 
   async function generieren() {
     if (!text.trim() || laedt) return;
@@ -153,7 +185,7 @@ export default function Textmenge() {
         client_id: clientId(),
         text,
         font,
-        format,
+        format: formatKey,
         realistic,
         entries: [{}],
       });
@@ -185,13 +217,34 @@ export default function Textmenge() {
           <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
+                className="sk-input"
+                value={aktuelleFamilie?.label ?? ''}
+                onChange={(e) => {
+                  setFamilie(e.target.value);
+                  const fam = familien.find((fm) => fm.label === e.target.value);
+                  const ori = (fam?.items ?? []).filter((f) => f.orientation);
+                  setAusrichtung(ori.length > 1 ? (ori[0].orientation ?? '') : '');
+                }}
+              >
+                {familien.length === 0 && <option value="">A4</option>}
+                {familien.map((fm) => (
+                  <option key={fm.label} value={fm.label}>{fm.label}</option>
                 ))}
               </select>
             </label>
+            {hatAusrichtung && (
+              <label className="sk-field" style={{ flex: '1 1 200px' }}>
+                <span className="sk-label">Ausrichtung</span>
+                <select className="sk-input" value={ausrichtung} onChange={(e) => setAusrichtung(e.target.value)}>
+                  {ausrichtungen.map((f) => (
+                    <option key={f.key} value={f.orientation ?? ''}>
+                      {f.orientation === 'hoch' ? 'Hochformat' : f.orientation === 'quer' ? 'Querformat' : 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)}>