Fix unpaid-Vorkasse notice layout: full page width, more top spacing

Reused paidBadgeRow, which lives inside summary's narrow flex-end
column meant for the short one-line paid confirmation — the longer
instruction shrank to content width and read as squeezed under the
summary card. Moved to its own full-width sibling row, left-aligned.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

README.md

@@ -31,6 +31,8 @@ One canonical implementation, consumed by both repos, makes this class of drift
 
 **2026-07-25, Vorkasse fixes (v0.2.3).** `isPaidImmediately()` matched `paymentMethodTitle` with an exact `!==` check against the literal string `"Überweisung"` — the consuming shop renamed its Vorkasse row to `"Überweisung (Vorkasse)"` the same day (to make room for a possible future *automated* bank-transfer method, e.g. "Sofortüberweisung", routed through a real payment gateway), which would have silently made every unpaid Vorkasse invoice show "✓ Bereits beglichen". Changed to `startsWith("Überweisung")` — same "only Überweisung is the named exception" design, tolerant of a suffix qualifier on that one title. Also added an explicit instruction in the unpaid case (previously the *absence* of the paid confirmation was the only signal, no actual text): "Bitte überweisen Sie den Rechnungsbetrag unter Angabe der Bestellnummer … auf die unten stehende Bankverbindung. Die Bestellung wird nach Zahlungseingang bearbeitet (in der Regel innerhalb von 1–2 Werktagen)." — same plain-text treatment as the paid confirmation (`unpaidNoticeText`, muted rather than green — an unpaid Vorkasse invoice isn't a problem, just an expected pending state).
 
+**2026-07-25, unpaid-notice layout fix (v0.2.4).** The new unpaid-Vorkasse instruction (v0.2.3) reused `paidBadgeRow`, which lives inside `summary`'s `alignItems: "flex-end"` column (240pt-wide, designed for the short one-line paid confirmation) — so the longer two-sentence instruction shrank to content width and read as squeezed under the narrow summary card instead of a proper full-width note. Moved to its own sibling row (`unpaidNoticeRow`, `width: "100%"`, `marginTop: 20` vs. `paidBadgeRow`'s 10) outside `summary` entirely, left-aligned instead of right-aligned.
+
 ## How this is consumed
 
 Not published to npm — installed as a git dependency:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@einfach-produktiv/invoicing",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "private": true,
   "description": "Shared invoice / correction-invoice (Stornorechnung, Gutschrift) PDF generation and VAT-breakdown math, consumed as a git dependency by both the einfach-produktiv frontend and the payload backend — not published to npm.",
   "type": "module",

src/invoicePdf.tsx

@@ -53,9 +53,17 @@ const styles = StyleSheet.create({
   // Same plain-text treatment as paidBadgeText (no pill/box, see that
   // style's own comment) — muted, not an error/warning color, since an
   // unpaid Vorkasse invoice isn't a problem, just a pending, expected
-  // state. Right-aligned + a max width so the two-sentence instruction
-  // wraps under the summary card instead of running the full page width.
-  unpaidNoticeText: { fontSize: 9, color: TEXT_MUTED, textAlign: "right", maxWidth: 220 },
+  // state. `width: "100%"` + left-aligned + its own row (not
+  // `paidBadgeRow`) — an earlier version reused `paidBadgeRow`, which
+  // sits inside `summary`'s `alignItems: "flex-end"` column, so a
+  // right-aligned, unconstrained-width Text there just shrank to content
+  // and read as squeezed under the narrow summaryBox instead of a proper
+  // full-width instruction. `unpaidNoticeRow` below breaks out of that.
+  unpaidNoticeText: { fontSize: 9, lineHeight: 1.5, color: TEXT_MUTED, textAlign: "left" },
+  // More top space than paidBadgeRow's 10 — this is a longer, more
+  // important instruction than a one-line confirmation, needs to read as
+  // its own section, not crowd the summary card above it.
+  unpaidNoticeRow: { width: "100%", alignSelf: "stretch", marginTop: 20 },
   table: { borderRadius: 6, overflow: "hidden", borderWidth: 1, borderColor: BORDER, marginTop: 8, marginBottom: 16 },
   tableHeader: { flexDirection: "row", backgroundColor: BG_MUTED, paddingVertical: 8, paddingHorizontal: 10 },
   // Every item row shares this same tinted background now — no more
@@ -463,18 +471,22 @@ export function InvoiceDocument({ order, seller }: { order: InvoiceOrder; seller
                 </View>
               )}
             </View>
-            {paid ? (
+            {paid && (
               <View style={styles.paidBadgeRow}>
                 <Text style={styles.paidBadgeText}>✓ Bereits beglichen ({order.paymentMethodTitle})</Text>
               </View>
-            ) : (
-              <View style={styles.paidBadgeRow}>
-                <Text style={styles.unpaidNoticeText}>
-                  Bitte überweisen Sie den Rechnungsbetrag unter Angabe der Bestellnummer {order.orderNumber} auf die unten stehende Bankverbindung. Die Bestellung wird nach Zahlungseingang bearbeitet (in der Regel innerhalb von 1–2 Werktagen).
-                </Text>
-              </View>
             )}
           </View>
+          {/* Sibling of `summary`, not nested inside it — `summary`'s own
+              `alignItems: "flex-end"` is meant for the narrow paid-badge
+              case, not this full-width, multi-sentence instruction. */}
+          {!paid && (
+            <View style={styles.unpaidNoticeRow}>
+              <Text style={styles.unpaidNoticeText}>
+                Bitte überweisen Sie den Rechnungsbetrag unter Angabe der Bestellnummer {order.orderNumber} auf die unten stehende Bankverbindung. Die Bestellung wird nach Zahlungseingang bearbeitet (in der Regel innerhalb von 1–2 Werktagen).
+              </Text>
+            </View>
+          )}
         </View>
 
         <View style={styles.footer} fixed>