Fix icon circle collapsing narrow in strict HTML-attribute-stripping renderers

The width="56" height="56" HTML attributes on the icon badge <td> weren't
mirrored in its inline style — renderers that ignore/strip HTML
width/height (Brevo's own editor among them, per a real report) shrink
the cell to fit the glyph instead of staying a 56px circle. Add explicit
width:56px;height:56px to the style too.

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

.npmrc

@@ -0,0 +1,5 @@
+# npm 12+ disables fetching git-protocol dependencies by default
+# (allow-git=none). @einfach-produktiv/invoicing is declared directly in
+# this file's own package.json (not a transitive dependency), so "root" is
+# the narrowest setting that still allows it.
+allow-git=root

Dockerfile

@@ -1,9 +1,11 @@
 FROM node:20-alpine AS base
 
 FROM base AS deps
-RUN apk add --no-cache libc6-compat
+# git — needed for `npm ci` to fetch @einfach-produktiv/invoicing, a git-URL
+# dependency (see package.json); Alpine's base image doesn't ship it.
+RUN apk add --no-cache libc6-compat git
 WORKDIR /app
-COPY package*.json ./
+COPY package*.json .npmrc ./
 RUN npm ci
 
 FROM base AS builder

app/agb/page.tsx

@@ -7,7 +7,7 @@ import { Footer } from "../components/Footer";
 import { TrustRow } from "../components/TrustRow";
 import { RichText, extractHeadings } from "../components/RichText";
 import { LiveRichText } from "../components/LiveRichText";
-import { SectionTOC } from "../components/SectionTOC";
+import { SectionTOC, MobileSectionTOC } from "../components/SectionTOC";
 import { getLegalPage } from "../lib/payload";
 
 export const metadata: Metadata = {
@@ -39,6 +39,13 @@ export default async function AgbPage() {
           <p className="text-body text-text-muted">Stand: Juli 2026</p>
         </Reveal>
 
+        {/* MobileSectionTOC — below lg: only, see SectionTOC.tsx's own
+            comment. Outside the sidebar's `hidden lg:flex` wrapper below
+            (that wrapper's `hidden` would hide this too otherwise). */}
+        <div className="lg:hidden px-[var(--layout-padding-x)] pb-4 w-full">
+          <MobileSectionTOC sections={headings} />
+        </div>
+
         <div className="flex flex-col lg:flex-row gap-8 lg:gap-12 items-start pb-10 pt-2 px-[var(--layout-padding-x)] w-full">
           <div className="hidden lg:flex flex-col gap-6 w-[22.5rem] shrink-0 lg:sticky lg:top-32 lg:self-start">
             <SectionTOC sections={headings} />

app/api/account/orders/[orderNumber]/correction-invoice/route.ts

@@ -34,6 +34,10 @@ export async function GET(request: Request, { params }: { params: Promise<{ orde
       correctionInvoiceIssuedAt: order.correctionInvoiceIssuedAt,
       customerFirstName: order.customerFirstName,
       customerLastName: order.customerLastName,
+      companyName: order.companyName,
+      vatId: order.vatId,
+      vatExempt: order.vatExempt,
+      kleinunternehmer: order.kleinunternehmer,
       deliveryMethod: order.deliveryMethod,
       street: order.street,
       packstationNumber: order.packstationNumber,

app/api/account/orders/[orderNumber]/invoice/route.ts

@@ -31,6 +31,10 @@ export async function GET(request: Request, { params }: { params: Promise<{ orde
       invoiceIssuedAt: order.invoiceIssuedAt,
       customerFirstName: order.customerFirstName,
       customerLastName: order.customerLastName,
+      companyName: order.companyName,
+      vatId: order.vatId,
+      vatExempt: order.vatExempt,
+      kleinunternehmer: order.kleinunternehmer,
       deliveryMethod: order.deliveryMethod,
       street: order.street,
       packstationNumber: order.packstationNumber,

app/api/account/profile/route.ts

@@ -1,5 +1,6 @@
 import { NextResponse } from "next/server";
 import { getSessionCustomer, updateCustomerProfile } from "../../../lib/customerAuth";
+import { normalizeVatId, isValidVatId } from "../../../lib/vatId";
 
 export async function GET() {
   const session = await getSessionCustomer();
@@ -12,7 +13,7 @@ export async function PATCH(request: Request) {
   if (!session) return NextResponse.json({ ok: false, reason: "Bitte zuerst einloggen." }, { status: 401 });
 
   const body = await request.json().catch(() => null);
-  const { firstName, lastName, deliveryMethod, street, packstationNumber, postNumber, zip, city, country } = body ?? {};
+  const { firstName, lastName, deliveryMethod, street, packstationNumber, postNumber, zip, city, country, companyName, vatId } = body ?? {};
   if (
     typeof firstName !== "string" ||
     !firstName ||
@@ -34,6 +35,12 @@ export async function PATCH(request: Request) {
   if (deliveryMethod === "packstation" && (!packstationNumber || !postNumber)) {
     return NextResponse.json({ ok: false, reason: "Bitte Packstation- und Postnummer angeben." }, { status: 400 });
   }
+  // Both independently optional (see Customers.ts's own comment) — only
+  // format-checked when actually provided, same as the backend field itself.
+  const normalizedVatId = typeof vatId === "string" && vatId ? normalizeVatId(vatId) : undefined;
+  if (normalizedVatId && !isValidVatId(normalizedVatId)) {
+    return NextResponse.json({ ok: false, reason: "Ungültiges USt-IdNr.-Format (z. B. DE123456789)." }, { status: 400 });
+  }
 
   const result = await updateCustomerProfile(session.token, session.customer.id, {
     firstName,
@@ -45,6 +52,8 @@ export async function PATCH(request: Request) {
     zip,
     city,
     country,
+    companyName: typeof companyName === "string" && companyName ? companyName : undefined,
+    vatId: normalizedVatId,
   });
   return NextResponse.json(result, { status: result.ok ? 200 : 400 });
 }

app/api/checkout/route.ts

@@ -8,6 +8,11 @@ import { fetchProductsBySlug } from "../../lib/productsServer";
 import { describeBundleContents } from "../../lib/bundleContents";
 import { sendCriticalAlert } from "../../lib/alertAdmin";
 import { sendOrderConfirmationEmail } from "../../lib/orderEmail";
+import { normalizeVatId, isValidVatId } from "../../lib/vatId";
+import { checkVatIdViaVies } from "../../lib/vies";
+import { computeExemptTotals, destinationCountry, isExemptionEligibleCountry } from "../../lib/vatExemption";
+import { upsertNewsletterContact } from "../../lib/brevo";
+import { paymentProvider, isPaymentTestMode } from "../../lib/payments";
 
 // Plain float arithmetic on money (quantity × unitPrice summed across
 // lines, a percent discount, subtracting/adding those together) drifts
@@ -30,6 +35,8 @@ type CheckoutBody = {
   lastName: string;
   email: string;
   password?: string;
+  companyName?: string;
+  vatId?: string;
   deliveryMethod: "address" | "packstation";
   street?: string;
   packstationNumber?: string;
@@ -85,6 +92,15 @@ export async function POST(request: Request) {
   if (body.deliveryMethod === "packstation" && (!body.packstationNumber || !body.postNumber)) {
     return NextResponse.json({ ok: false, reason: "Bitte Packstation- und Postnummer angeben." }, { status: 400 });
   }
+  // Optional — only format-checked when actually provided, same "never
+  // trust the client" reasoning as every other checkout field re-validated
+  // here. Normalized the same way Orders.ts's own field does (uppercase +
+  // trim), so the snapshot on the order matches what would've been
+  // accepted directly through the Payload admin.
+  const normalizedVatId = body.vatId ? normalizeVatId(body.vatId) : undefined;
+  if (normalizedVatId && !isValidVatId(normalizedVatId)) {
+    return NextResponse.json({ ok: false, reason: "Ungültiges USt-IdNr.-Format (z. B. DE123456789)." }, { status: 400 });
+  }
   if (body.hasDifferentShippingAddress) {
     if (!body.shippingFirstName || !body.shippingLastName || !body.shippingZip || !body.shippingCity || !body.shippingCountry) {
       return NextResponse.json({ ok: false, reason: "Bitte alle Felder der Lieferadresse ausfüllen." }, { status: 400 });
@@ -126,6 +142,15 @@ export async function POST(request: Request) {
   // Re-price everything server-side — never trust client-submitted prices.
   const [productsBySlug, companySettings] = await Promise.all([fetchProductsBySlug(), getCompanySettings()]);
   const defaultTaxRate = companySettings?.taxRatePercent ?? 19;
+  // §19 UStG — a Kleinunternehmer tenant never charges VAT on anything,
+  // full stop, so every item's tax rate is forced to 0% here regardless of
+  // its own catalog/company-settings default rate. Unlike the
+  // intra-community exemption below, prices are NOT de-grossed — see
+  // Orders.ts's own kleinunternehmer field comment and this shop's
+  // Kleinunternehmer decision: catalog gross prices stay exactly what they
+  // are, they simply never had a VAT component charged on top in the
+  // first place.
+  const kleinunternehmer = Boolean(companySettings?.kleinunternehmer);
   const items: {
     productId: number;
     productName: string;
@@ -167,7 +192,7 @@ export async function POST(request: Request) {
       quantity: line.qty,
       unitPrice: variant?.priceOverride ?? product.price,
       imageUrl,
-      taxRatePercent: product.taxRatePercent ?? defaultTaxRate,
+      taxRatePercent: kleinunternehmer ? 0 : (product.taxRatePercent ?? defaultTaxRate),
       bundleContents: describeBundleContents(product),
       variantName: variant?.name ?? null,
     });
@@ -194,13 +219,108 @@ export async function POST(request: Request) {
       validation.doc.type === "percent" ? (subtotal * validation.doc.value) / 100 : Math.min(validation.doc.value, subtotal),
     );
   }
-  const total = roundMoney(Math.max(0, subtotal - discountAmount) + shippingCost);
+
+  // VAT-ID validity and the exemption decision are two separate questions.
+  // Validity (is this actually a currently-registered VAT ID at all) is
+  // checked via VIES for ANY country whenever one is given — worth
+  // recording regardless of destination, same "data quality" reasoning as
+  // company-settings.vatId's own VIES check on the backend; a merely
+  // format-valid id (e.g. "ED123456789" — "ED" isn't even a real country
+  // code) is never enough on its own. The exemption itself
+  // (innergemeinschaftliche Lieferung, §4 Nr. 1b UStG) additionally
+  // requires the goods' actual destination (the shipping override's
+  // country when set, the billing country otherwise) to be Österreich,
+  // the one EU-cross-border option this checkout offers — a validated
+  // *German* VAT ID never zero-rates a domestic sale, no matter how real
+  // it is. VIES being unreachable fails closed on the exemption: normal
+  // VAT applies, never a guessed exemption (vatIdValidatedAt just stays
+  // unset in that case too).
+  let vatExempt = false;
+  let vatIdValidatedAt: string | null = null;
+  // A Kleinunternehmer never charges VAT on any sale, domestic or
+  // cross-border — the intra-community exemption exists to zero-rate what
+  // would otherwise be a positive-rate charge, which never applies here in
+  // the first place, so the VIES lookup is skipped entirely (also saves an
+  // unneeded network round-trip).
+  const buyerDestinationCountry = destinationCountry(body.country, Boolean(body.hasDifferentShippingAddress), body.shippingCountry);
+  if (!kleinunternehmer && normalizedVatId) {
+    const viesResult = await checkVatIdViaVies(normalizedVatId);
+    if (viesResult.ok && viesResult.valid) {
+      vatIdValidatedAt = new Date().toISOString();
+      if (isExemptionEligibleCountry(buyerDestinationCountry)) {
+        vatExempt = true;
+      }
+    }
+  }
+
+  if (vatExempt) {
+    // Re-price every line net of VAT (0% now applies) instead of the
+    // catalog's normal VAT-inclusive price — the whole point of the
+    // exemption is that the buyer pays less, not that this shop quietly
+    // keeps the VAT portion as extra margin. items/subtotal/shippingCost
+    // below are overwritten with the de-grossed figures actually charged
+    // and actually persisted on the order/invoice.
+    for (const item of items) {
+      item.unitPrice = roundMoney(item.unitPrice / (1 + item.taxRatePercent / 100));
+      item.taxRatePercent = 0;
+    }
+  }
+  const exemptTotals = vatExempt
+    ? computeExemptTotals(
+        items.map((i) => ({ quantity: i.quantity, grossUnitPrice: i.unitPrice, taxRatePercent: 0 })),
+        shippingCost,
+        defaultTaxRate,
+        discountAmount,
+      )
+    : null;
+  // Note: exemptTotals recomputes `subtotal` from the already-degrossed
+  // `items` above (taxRatePercent 0 there means computeExemptTotals's own
+  // degross() step is a no-op on them) — it exists mainly to degross
+  // `shippingCost` the same way, and to keep both figures derived through
+  // one shared function rather than duplicating the arithmetic here.
+  const finalSubtotal = exemptTotals?.subtotal ?? subtotal;
+  const finalShippingCost = exemptTotals?.shippingCost ?? shippingCost;
+  const total = roundMoney(Math.max(0, finalSubtotal - discountAmount) + finalShippingCost);
+
+  // Gated-payment branch (Kreditkarte/PayPal today) — see
+  // spicy-leaping-pizza.md §3. The PaymentIntent is created BEFORE the
+  // order so its id can be persisted onto the order at creation time
+  // (providerReference), rather than needing a second authenticated
+  // update call that doesn't otherwise exist from this service. Stripe
+  // generates a PaymentIntent id independent of any order existing yet.
+  const requiresPayment = paymentMethod.provider === "stripe";
+  let providerReference: string | undefined;
+  let clientSecret: string | undefined;
+  if (requiresPayment) {
+    try {
+      const intent = await paymentProvider.createPaymentIntent({
+        amountCents: Math.round(total * 100),
+        currency: "eur",
+        customerEmail: body.email,
+        description: `einfach produktiv Bestellung — ${body.firstName} ${body.lastName}`,
+      });
+      providerReference = intent.providerReference;
+      clientSecret = intent.clientSecret;
+    } catch (err) {
+      sendCriticalAlert("Zahlung konnte nicht vorbereitet werden", {
+        customerEmail: body.email,
+        total,
+        error: String(err),
+      });
+      return NextResponse.json({ ok: false, reason: "Die Zahlung konnte gerade nicht vorbereitet werden." }, { status: 500 });
+    }
+  }
 
   const order = await createOrder({
     customerId: customer.id,
     customerFirstName: body.firstName,
     customerLastName: body.lastName,
     customerEmail: body.email,
+    companyName: body.companyName || undefined,
+    vatId: normalizedVatId,
+    vatExempt,
+    kleinunternehmer,
+    vatIdValidatedAt,
     deliveryMethod: body.deliveryMethod,
     street: body.street,
     packstationNumber: body.packstationNumber,
@@ -220,13 +340,24 @@ export async function POST(request: Request) {
     shippingCountry: body.shippingCountry,
     newsletterOptIn: Boolean(body.newsletterOptIn),
     items,
-    subtotal,
-    shippingCost,
+    subtotal: finalSubtotal,
+    shippingCost: finalShippingCost,
     shippingMethodTitle: shippingMethod.title,
-    paymentMethodTitle: paymentMethod.title,
+    // The checkout UI collapses Kreditkarte/PayPal into one "Online-
+    // Zahlung" pre-selection (see groupPaymentMethodsForCheckout) — the
+    // customer hasn't actually chosen an instrument yet at this point,
+    // Stripe's Payment Element does that next. Snapshotting the specific
+    // resolved row's title here would just record whichever row happened
+    // to be the group's representative id, not what was really picked.
+    // The webhook route refines this to the real instrument
+    // ("Kreditkarte"/"PayPal") once Stripe reports it, via confirm-payment.
+    paymentMethodTitle: requiresPayment ? "Online-Zahlung" : paymentMethod.title,
     discountCode: body.discountCode || null,
     discountAmount,
     total,
+    ...(requiresPayment
+      ? { status: "pending_payment" as const, paymentProvider: "stripe" as const, paymentStatus: "pending" as const, providerReference }
+      : {}),
   });
   if (!order) {
     // The worst-case failure in this whole flow: the customer went
@@ -244,68 +375,119 @@ export async function POST(request: Request) {
     return NextResponse.json({ ok: false, reason: "Bestellung konnte nicht gespeichert werden." }, { status: 500 });
   }
 
-  // Fire-and-forget — a failed confirmation email must never undo an
-  // already-successful order or block the response the customer is
-  // waiting on. Lower severity than the "order lost" alert above (the
-  // order itself is safe either way), but still worth knowing about, since
-  // it's the one thing that would otherwise fail completely silently.
-  sendOrderConfirmationEmail(
-    {
-      orderNumber: order.orderNumber,
-      createdAt: order.createdAt,
-      invoiceNumber: order.invoiceNumber,
-      invoiceIssuedAt: order.invoiceIssuedAt,
-      customerFirstName: body.firstName,
-      customerLastName: body.lastName,
-      deliveryMethod: body.deliveryMethod,
-      street: body.street,
-      packstationNumber: body.packstationNumber,
-      postNumber: body.postNumber,
-      zip: body.zip,
-      city: body.city,
-      country: body.country,
-      hasDifferentShippingAddress: Boolean(body.hasDifferentShippingAddress),
-      shippingFirstName: body.shippingFirstName,
-      shippingLastName: body.shippingLastName,
-      shippingDeliveryMethod: body.shippingDeliveryMethod,
-      shippingStreet: body.shippingStreet,
-      shippingPackstationNumber: body.shippingPackstationNumber,
-      shippingPostNumber: body.shippingPostNumber,
-      shippingZip: body.shippingZip,
-      shippingCity: body.shippingCity,
-      shippingCountry: body.shippingCountry,
-      paymentMethodTitle: paymentMethod.title,
-      items: items.map((i) => ({
-        productName: i.productName,
-        quantity: i.quantity,
-        unitPrice: i.unitPrice,
-        imageUrl: i.imageUrl,
-        taxRatePercent: i.taxRatePercent,
-        bundleContents: i.bundleContents,
-        variantName: i.variantName,
-      })),
-      subtotal,
-      shippingCost,
-      discountAmount,
-      discountCode: body.discountCode || null,
-      total,
-    },
-    body.email,
-  ).catch((err) => {
-    sendCriticalAlert("Bestätigungs-Mail konnte nicht gesendet werden", {
-      orderNumber: order.orderNumber,
-      customerEmail: body.email,
-      error: String(err),
+  if (requiresPayment && providerReference) {
+    // Best-effort — see stripeProvider.attachOrderMetadata's own comment.
+    // Not fatal: the order's own `providerReference` field (already
+    // persisted above) remains the source of truth for the
+    // expirePendingPayments cleanup job either way; this only speeds up
+    // the webhook's fast path.
+    await paymentProvider.attachOrderMetadata(providerReference, { orderId: String(order.id), orderNumber: order.orderNumber }).catch((err) => {
+      sendCriticalAlert("Zahlungsmetadaten konnten nicht verknüpft werden", {
+        orderNumber: order.orderNumber,
+        providerReference,
+        error: String(err),
+      });
     });
-  });
+  }
+
+  // Deferred for gated payment methods (Kreditkarte/PayPal) until the
+  // webhook confirms payment — see spicy-leaping-pizza.md §3/§4. Sent
+  // from the backend's confirm-payment endpoint instead, at that point.
+  // Unchanged for Überweisung: fires immediately, exactly as before.
+  if (!requiresPayment) {
+    // Fire-and-forget — a failed confirmation email must never undo an
+    // already-successful order or block the response the customer is
+    // waiting on. Lower severity than the "order lost" alert above (the
+    // order itself is safe either way), but still worth knowing about, since
+    // it's the one thing that would otherwise fail completely silently.
+    sendOrderConfirmationEmail(
+      {
+        orderNumber: order.orderNumber,
+        createdAt: order.createdAt,
+        invoiceNumber: order.invoiceNumber as string,
+        invoiceIssuedAt: order.invoiceIssuedAt as string,
+        customerFirstName: body.firstName,
+        customerLastName: body.lastName,
+        companyName: body.companyName || undefined,
+        vatId: normalizedVatId,
+        vatExempt,
+        kleinunternehmer,
+        deliveryMethod: body.deliveryMethod,
+        street: body.street,
+        packstationNumber: body.packstationNumber,
+        postNumber: body.postNumber,
+        zip: body.zip,
+        city: body.city,
+        country: body.country,
+        hasDifferentShippingAddress: Boolean(body.hasDifferentShippingAddress),
+        shippingFirstName: body.shippingFirstName,
+        shippingLastName: body.shippingLastName,
+        shippingDeliveryMethod: body.shippingDeliveryMethod,
+        shippingStreet: body.shippingStreet,
+        shippingPackstationNumber: body.shippingPackstationNumber,
+        shippingPostNumber: body.shippingPostNumber,
+        shippingZip: body.shippingZip,
+        shippingCity: body.shippingCity,
+        shippingCountry: body.shippingCountry,
+        paymentMethodTitle: paymentMethod.title,
+        items: items.map((i) => ({
+          productName: i.productName,
+          quantity: i.quantity,
+          unitPrice: i.unitPrice,
+          imageUrl: i.imageUrl,
+          taxRatePercent: i.taxRatePercent,
+          bundleContents: i.bundleContents,
+          variantName: i.variantName,
+        })),
+        subtotal: finalSubtotal,
+        shippingCost: finalShippingCost,
+        discountAmount,
+        discountCode: body.discountCode || null,
+        total,
+      },
+      body.email,
+    ).catch((err) => {
+      sendCriticalAlert("Bestätigungs-Mail konnte nicht gesendet werden", {
+        orderNumber: order.orderNumber,
+        customerEmail: body.email,
+        error: String(err),
+      });
+    });
+  }
+
+  // Fire-and-forget, same reasoning as the confirmation email above — a
+  // failed marketing sync is not worth failing checkout over, and doesn't
+  // even need a critical alert (nothing customer-facing depends on it).
+  // Not gated on payment confirmation — a newsletter signup intent isn't
+  // an order-fulfillment concern, unlike the confirmation email/invoice.
+  if (body.newsletterOptIn) {
+    upsertNewsletterContact(body.email, "checkout").catch(() => {});
+  }
 
   return NextResponse.json({
     ok: true,
     orderNumber: order.orderNumber,
+    orderId: order.id,
     orderDateIso: order.createdAt,
-    shippingCost,
-    paymentMethodTitle: paymentMethod.title,
+    ...(requiresPayment
+      ? {
+          requiresPayment: true as const,
+          clientSecret,
+          testMode: isPaymentTestMode,
+          // Only surfaced in test mode — PaymentStep's "Testzahlung"
+          // buttons need it to call the test-confirm route directly,
+          // since there's no real Stripe redirect to carry it back
+          // through. A real PaymentIntent id isn't secret (only its
+          // client_secret is), but there's no reason to expose it to the
+          // client outside test mode either.
+          ...(isPaymentTestMode ? { providerReference } : {}),
+        }
+      : {}),
+    shippingCost: finalShippingCost,
+    paymentMethodTitle: requiresPayment ? "Online-Zahlung" : paymentMethod.title,
     discountCode: body.discountCode || null,
     discountAmount,
+    vatExempt,
+    kleinunternehmer,
   });
 }

app/api/checkout/status/route.ts

@@ -0,0 +1,31 @@
+import { NextResponse } from "next/server";
+import { getSessionCustomer, getCustomerOrderDetail } from "../../../lib/customerAuth";
+
+// Polled by /checkout/verarbeitung after a Payment Element redirect
+// returns — see spicy-leaping-pizza.md §3. Requires the customer's own
+// session (checkout is "Konto Pflicht", so one always exists by the time
+// this page is reachable) rather than accepting a bare orderNumber, so a
+// guessed/leaked order number can't be used to probe another customer's
+// payment status.
+export async function GET(request: Request) {
+  const session = await getSessionCustomer();
+  if (!session) return NextResponse.json({ ok: false, reason: "Bitte zuerst einloggen." }, { status: 401 });
+
+  const orderNumber = new URL(request.url).searchParams.get("orderNumber");
+  if (!orderNumber) return NextResponse.json({ ok: false, reason: "orderNumber fehlt." }, { status: 400 });
+
+  const order = await getCustomerOrderDetail(session.token, session.customer.id, orderNumber);
+  if (!order) return NextResponse.json({ ok: false, reason: "Bestellung nicht gefunden." }, { status: 404 });
+
+  return NextResponse.json({
+    ok: true,
+    status: order.status,
+    paymentStatus: order.paymentStatus,
+    // Refined from the checkout-time "Online-Zahlung" placeholder to the
+    // actual instrument (Kreditkarte/PayPal) once confirm-payment sets it
+    // — see resolveStripePaymentMethodLabel's own comment. Returned here
+    // so VerarbeitungContent can patch the pending sessionStorage snapshot
+    // before promoting it, so /bestellbestaetigung shows the real one.
+    paymentMethodTitle: order.paymentMethodTitle,
+  });
+}

app/api/checkout/validate-vat/route.ts

@@ -0,0 +1,39 @@
+import { NextResponse } from "next/server";
+import { normalizeVatId, isValidVatId } from "../../../lib/vatId";
+import { checkVatIdViaVies } from "../../../lib/vies";
+
+// Called from CheckoutContent.tsx on the USt-IdNr. field's blur, whenever
+// the billing country is Österreich — the only cross-border-EU option this
+// checkout offers besides Deutschland (domestic, exemption never applies)
+// and Schweiz (non-EU export, a different exemption entirely, out of
+// scope here). Gives the shopper immediate feedback on whether their VAT
+// ID actually qualifies for the innergemeinschaftliche-Lieferung
+// exemption, before they even submit — api/checkout/route.ts re-runs this
+// exact same check server-side at submit time regardless (never trusts
+// this response), since a VIES result could theoretically change between
+// blur and submit.
+export async function POST(request: Request) {
+  const body = await request.json().catch(() => null);
+  const vatId = typeof body?.vatId === "string" ? body.vatId : "";
+  if (!vatId) return NextResponse.json({ ok: false, reason: "USt-IdNr. fehlt." }, { status: 400 });
+
+  const normalized = normalizeVatId(vatId);
+  if (!isValidVatId(normalized)) {
+    return NextResponse.json({ ok: true, valid: false, reason: "Ungültiges USt-IdNr.-Format." });
+  }
+
+  const result = await checkVatIdViaVies(normalized);
+  if (!result.ok) {
+    // `ok: false` here means "VIES couldn't confirm this one way or the
+    // other" (unreachable, or the member state's own gateway is briefly
+    // down — `MS_UNAVAILABLE`, which VIES itself answers 200 for, not an
+    // error status) — NOT "confirmed invalid". Previously this branch
+    // still answered `{ ok: true, valid: false }`, which the client reads
+    // as a rejected VAT ID (`vatIdViesStatus = "invalid"`) instead of
+    // "couldn't check right now" (`"unavailable"`) — a real, currently
+    // registered VAT ID looked wrong to the customer whenever VIES (or
+    // just Germany's own national gateway) had a hiccup.
+    return NextResponse.json({ ok: false, reason: result.reason });
+  }
+  return NextResponse.json({ ok: true, valid: result.valid, name: result.name });
+}

app/api/newsletter/subscribe/route.ts

@@ -0,0 +1,30 @@
+import { NextResponse } from "next/server";
+import { upsertNewsletterContact, type NewsletterOptInSource } from "../../../lib/brevo";
+import { isValidEmail } from "../../../lib/email";
+
+type SubscribeBody = {
+  email?: string;
+  consent?: boolean;
+  source?: NewsletterOptInSource;
+};
+
+const VALID_SOURCES: NewsletterOptInSource[] = ["newsletter-page", "newsletter-modal", "newsletter-hero", "challenge"];
+
+export async function POST(req: Request) {
+  const body: SubscribeBody = await req.json();
+  const email = body.email?.trim() ?? "";
+
+  if (!isValidEmail(email)) {
+    return NextResponse.json({ ok: false, reason: "Bitte gib eine gültige E-Mail-Adresse ein." }, { status: 400 });
+  }
+  if (!body.consent) {
+    return NextResponse.json({ ok: false, reason: "Bitte akzeptiere die Datenschutzerklärung." }, { status: 400 });
+  }
+
+  const source = body.source && VALID_SOURCES.includes(body.source) ? body.source : "newsletter-page";
+  const result = await upsertNewsletterContact(email, source);
+  if (!result.ok) {
+    return NextResponse.json({ ok: false, reason: "Anmeldung ist fehlgeschlagen. Bitte versuche es später erneut." }, { status: 502 });
+  }
+  return NextResponse.json({ ok: true });
+}

app/api/webhooks/stripe/route.ts

@@ -0,0 +1,90 @@
+import { NextResponse } from "next/server";
+import Stripe from "stripe";
+import { verifyStripeWebhookSignature, resolveStripePaymentMethodLabel } from "../../../lib/payments/stripeProvider";
+import { sendConfirmedPaymentEmail, type ConfirmPaymentOrderSnapshot } from "../../../lib/payments/confirmPaymentEmail";
+import { sendCriticalAlert } from "../../../lib/alertAdmin";
+
+const PAYLOAD_URL = process.env.PAYLOAD_URL || "https://payload.mk360.de";
+const PAYMENT_WEBHOOK_SECRET = process.env.PAYMENT_WEBHOOK_SECRET || "";
+
+// Real Stripe webhook — see spicy-leaping-pizza.md §4. Never reachable in
+// PAYMENT_TEST_MODE in practice (no real Stripe account sends events
+// here then), but left unconditional rather than gated on the env var —
+// an invalid/missing signature already fails closed on its own.
+export async function POST(request: Request) {
+  // Raw body only — request.json() would consume/reparse the stream and
+  // Stripe's signature is computed over the exact original bytes.
+  const rawBody = await request.text();
+  const signature = request.headers.get("stripe-signature");
+  if (!signature) return NextResponse.json({ ok: false }, { status: 400 });
+
+  const event = verifyStripeWebhookSignature(rawBody, signature);
+  if (!event) return NextResponse.json({ ok: false, reason: "invalid signature" }, { status: 400 });
+
+  if (event.type !== "payment_intent.succeeded" && event.type !== "payment_intent.payment_failed") {
+    // Stripe sends many event types we don't act on (e.g.
+    // payment_intent.created, charge.*) — ack them so Stripe stops
+    // retrying something we were never going to process.
+    return NextResponse.json({ ok: true, ignored: event.type });
+  }
+
+  const intent = event.data.object as Stripe.PaymentIntent;
+  const providerReference = intent.id;
+  const orderId = intent.metadata?.orderId;
+  const paymentStatus = event.type === "payment_intent.succeeded" ? "paid" : "failed";
+
+  if (!orderId) {
+    // stripeProvider.attachOrderMetadata (called right after order
+    // creation in /api/checkout) failed to complete for this
+    // PaymentIntent — the order's own `providerReference` field is still
+    // the source of truth and expirePendingPayments will reconcile it
+    // eventually, but that's a multi-hour fallback, not instant. Alert
+    // now rather than silently relying on the cleanup job.
+    sendCriticalAlert("Stripe-Webhook ohne orderId-Metadaten", { providerReference, paymentStatus, eventType: event.type });
+    // Non-2xx so Stripe retries — a later retry might land after the
+    // metadata attach (which races the checkout response) has caught up.
+    return NextResponse.json({ ok: false, reason: "orderId metadata missing" }, { status: 409 });
+  }
+
+  // Best-effort — see resolveStripePaymentMethodLabel's own comment. Only
+  // meaningful on the "paid" path; a failed payment never gets a
+  // paymentMethodTitle refinement (the order becomes 'cancelled' outright).
+  const paymentMethodTitle = paymentStatus === "paid" ? await resolveStripePaymentMethodLabel(intent) : undefined;
+
+  const res = await fetch(`${PAYLOAD_URL}/api/orders/${orderId}/confirm-payment`, {
+    method: "POST",
+    headers: {
+      "x-payment-webhook-secret": PAYMENT_WEBHOOK_SECRET,
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      paymentStatus,
+      providerReference,
+      paidAt: new Date().toISOString(),
+      ...(paymentMethodTitle ? { paymentMethodTitle } : {}),
+    }),
+  }).catch((err) => {
+    sendCriticalAlert("confirm-payment-Aufruf ans Backend fehlgeschlagen", { orderId, providerReference, error: String(err) });
+    return null;
+  });
+
+  if (!res || !res.ok) {
+    // Non-2xx on purpose — lets Stripe's own retry schedule (~3 days)
+    // provide resilience instead of building an internal retry queue.
+    return NextResponse.json({ ok: false }, { status: 502 });
+  }
+
+  const data: { ok: boolean; alreadyProcessed?: boolean; order?: ConfirmPaymentOrderSnapshot } = await res.json();
+
+  // Fire-and-forget, same reasoning as the checkout route's own send: a
+  // failed confirmation email must never turn an already-successful
+  // payment confirmation into a non-2xx response (that would make Stripe
+  // retry a webhook we've already fully processed). `alreadyProcessed`/
+  // missing `order` means this is a repeat delivery — see confirmPayment.ts's
+  // own comment on why the email must not be sent twice.
+  if (data.order && !data.alreadyProcessed) {
+    void sendConfirmedPaymentEmail(data.order);
+  }
+
+  return NextResponse.json({ ok: true });
+}

app/api/webhooks/stripe/test-confirm/route.ts

@@ -0,0 +1,55 @@
+import { NextResponse } from "next/server";
+import { isPaymentTestMode } from "../../../../lib/payments";
+import { sendConfirmedPaymentEmail, type ConfirmPaymentOrderSnapshot } from "../../../../lib/payments/confirmPaymentEmail";
+import { sendCriticalAlert } from "../../../../lib/alertAdmin";
+
+const PAYLOAD_URL = process.env.PAYLOAD_URL || "https://payload.mk360.de";
+const PAYMENT_WEBHOOK_SECRET = process.env.PAYMENT_WEBHOOK_SECRET || "";
+
+// Test-mode stand-in for the real Stripe webhook — see
+// spicy-leaping-pizza.md §7. Drives the exact same backend confirm-payment
+// endpoint the real webhook calls, just without a real Stripe event/
+// signature (there is none to verify in test mode). Hard-gated: must
+// 404 whenever PAYMENT_TEST_MODE isn't explicitly on, so this can never
+// become an unauthenticated "mark any order paid" endpoint in production.
+export async function POST(request: Request) {
+  if (!isPaymentTestMode) {
+    return NextResponse.json({ ok: false }, { status: 404 });
+  }
+
+  const body = await request.json().catch(() => null);
+  const orderId = body?.orderId;
+  const providerReference = body?.providerReference;
+  const paymentStatus = body?.paymentStatus === "failed" ? "failed" : "paid";
+  if (!orderId || !providerReference) {
+    return NextResponse.json({ ok: false, reason: "orderId und providerReference erforderlich." }, { status: 400 });
+  }
+
+  const res = await fetch(`${PAYLOAD_URL}/api/orders/${orderId}/confirm-payment`, {
+    method: "POST",
+    headers: {
+      "x-payment-webhook-secret": PAYMENT_WEBHOOK_SECRET,
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ paymentStatus, providerReference, paidAt: new Date().toISOString() }),
+  }).catch((err) => {
+    sendCriticalAlert("Test-confirm-Aufruf ans Backend fehlgeschlagen", { orderId, providerReference, error: String(err) });
+    return null;
+  });
+
+  if (!res || !res.ok) {
+    return NextResponse.json({ ok: false, reason: "Backend hat die Testzahlung nicht bestätigt." }, { status: 502 });
+  }
+
+  const data: { ok: boolean; alreadyProcessed?: boolean; order?: ConfirmPaymentOrderSnapshot } = await res.json();
+
+  // Same email-send as the real webhook route — see its own comment and
+  // confirmPaymentEmail.ts. Reproduces today's "immediate confirmation"
+  // behavior on a test click, exercising the real send path rather than a
+  // separate short-circuit.
+  if (data.order && !data.alreadyProcessed) {
+    void sendConfirmedPaymentEmail(data.order);
+  }
+
+  return NextResponse.json({ ok: true });
+}

app/bestellbestaetigung/components/BestellbestaetigungContent.tsx

@@ -6,7 +6,8 @@ import Image from "next/image";
 import type { CartItem } from "../../lib/cart";
 import { useProducts } from "../../lib/products";
 import { computeCartTotals, effectivePrice, effectiveTaxRate } from "../../lib/cartTotals";
-import { computeTaxBreakdown } from "../../lib/taxBreakdown";
+import { computeTaxBreakdown } from "@einfach-produktiv/invoicing";
+import { computeExemptTotals } from "../../lib/vatExemption";
 import { formatPrice, formatDate } from "../../lib/format";
 import { Reveal } from "../../components/Reveal";
 import { CheckoutSteps } from "../../components/CheckoutSteps";
@@ -31,7 +32,9 @@ function parseOrderSnapshot(raw: string): OrderSnapshot | null {
       typeof data.shippingCost !== "number" ||
       typeof data.paymentMethodTitle !== "string" ||
       (data.discountCode !== null && typeof data.discountCode !== "string") ||
-      typeof data.discountAmount !== "number"
+      typeof data.discountAmount !== "number" ||
+      typeof data.vatExempt !== "boolean" ||
+      typeof data.kleinunternehmer !== "boolean"
     ) {
       return null;
     }
@@ -100,20 +103,42 @@ export function BestellbestaetigungContent({ defaultTaxRate }: { defaultTaxRate:
     .map((entry) => ({ entry, product: products.find((p) => p.id === entry.id) }))
     .filter((row): row is { entry: CartItem; product: NonNullable<(typeof row)["product"]> } => Boolean(row.product));
 
-  // Displays the *persisted* discount from the snapshot, not a fresh
-  // re-derivation — the purchase already happened, this page is a
+  // Displays the *persisted* discount/shippingCost from the snapshot, not
+  // a fresh re-derivation — the purchase already happened, this page is a
   // receipt, not a live cart, so it doesn't re-validate the code at all.
-  const { subtotal, totalSavings, total } = computeCartTotals(items, order.shippingCost, {
+  // order.shippingCost is already the actual (possibly de-grossed, if
+  // vatExempt) figure charged at checkout — see api/checkout/route.ts's
+  // own response. `subtotal`/`taxBreakdown` below still need their own
+  // exempt branch, though: computeCartTotals/computeTaxBreakdown build
+  // `subtotal` from each item's *current catalog* gross price via
+  // effectivePrice(), which for an exempt order was never what was
+  // actually charged (the catalog price includes VAT; the exempt order
+  // paid the de-grossed net price instead).
+  const { subtotal: catalogSubtotal, totalSavings, total: catalogTotal } = computeCartTotals(items, order.shippingCost, {
     type: "fixed",
     value: order.discountAmount,
   });
+  const exemptTotals = order.vatExempt
+    ? computeExemptTotals(
+        items.map(({ entry, product }) => ({
+          quantity: entry.qty,
+          grossUnitPrice: effectivePrice(entry, product),
+          taxRatePercent: effectiveTaxRate(product, defaultTaxRate),
+        })),
+        order.shippingCost,
+        defaultTaxRate,
+        order.discountAmount,
+      )
+    : null;
+  const subtotal = exemptTotals?.subtotal ?? catalogSubtotal;
+  const total = exemptTotals?.total ?? catalogTotal;
   const taxBreakdown = computeTaxBreakdown(
     items.map(({ entry, product }) => ({
       quantity: entry.qty,
       unitPrice: effectivePrice(entry, product),
       taxRatePercent: effectiveTaxRate(product, defaultTaxRate),
     })),
-    subtotal,
+    catalogSubtotal,
     order.discountAmount,
     order.shippingCost,
   );
@@ -205,7 +230,7 @@ export function BestellbestaetigungContent({ defaultTaxRate }: { defaultTaxRate:
                       {entry.variant ? ` (${entry.variant})` : ""}
                     </p>
                     <p className="text-label text-text-muted">
-                      {entry.qty} × {formatPrice(unitPrice)} <span>inkl. {taxRate}% MwSt.</span>
+                      {entry.qty} × {formatPrice(unitPrice)} {!order.kleinunternehmer && <span>inkl. {taxRate}% MwSt.</span>}
                     </p>
                   </div>
                   <p className="text-body-sm text-text-primary whitespace-nowrap">
@@ -257,7 +282,13 @@ export function BestellbestaetigungContent({ defaultTaxRate }: { defaultTaxRate:
                   <span className="flex-1" />
                   <span className="font-bold text-h-small text-text-primary">{formatPrice(total)}</span>
                 </div>
-                <VatBreakdown groups={taxBreakdown} />
+                {order.kleinunternehmer ? (
+                  <p className="text-label text-text-muted">Gemäß § 19 UStG wird keine Umsatzsteuer berechnet.</p>
+                ) : order.vatExempt ? (
+                  <p className="text-label text-text-muted">Steuerfreie innergemeinschaftliche Lieferung (§4 Nr. 1b UStG)</p>
+                ) : (
+                  <VatBreakdown groups={taxBreakdown} />
+                )}
               </div>
             </div>
           </div>

app/blog/[slug]/page.tsx

@@ -19,16 +19,29 @@ export async function generateMetadata({
   const post = await getPostBySlug(slug);
   if (!post) return { title: "Beitrag nicht gefunden" };
 
+  // Each falls back to the normal field when its SEO override (Posts.ts's
+  // "SEO" collapsible group) is empty — filling those in is optional, a
+  // post already has sensible metadata without them.
+  const title = post.seoTitle || post.title;
+  const description = post.seoDescription || post.excerpt;
+  const image = post.seoImage || post.thumbnail;
+
   return {
-    title: post.title,
-    description: post.excerpt,
+    title,
+    description,
     alternates: { canonical: `/blog/${post.slug}` },
     openGraph: {
-      title: `${post.title} | einfach produktiv.`,
-      description: post.excerpt,
+      title: `${title} | einfach produktiv.`,
+      description,
       url: `/blog/${post.slug}`,
       type: "article",
-      images: post.thumbnail ? [{ url: post.thumbnail }] : undefined,
+      images: image ? [{ url: image }] : undefined,
+    },
+    twitter: {
+      card: "summary_large_image",
+      title,
+      description,
+      images: image ? [image] : undefined,
     },
   };
 }
@@ -120,27 +133,34 @@ export default async function BlogDetailPage({
           {post.relatedProduct?.href && (
             <Link
               href={post.relatedProduct.href}
-              className="group flex items-center gap-6 border border-border rounded-md px-9 py-7 hover:border-brand transition-colors"
+              className="group flex items-center gap-4 sm:gap-6 border border-border rounded-md px-5 py-5 sm:px-9 sm:py-7 hover:border-brand transition-colors"
             >
               <div className="relative w-16 h-[4.6875rem] shrink-0 rounded-sm overflow-hidden">
                 <Image alt="" src={post.relatedProduct.image} fill sizes="64px" className="object-cover" />
               </div>
               <div className="flex-1 min-w-0 flex flex-col gap-2.5">
                 <p className="font-bold text-[0.8125rem] text-brand">Passend dazu:</p>
-                <div className="flex items-end justify-between gap-4 w-full">
-                  {/* w-[19rem] (305px) — matches Figma's title-col exactly,
-                      so the description wraps at the same point instead of
-                      stretching out to fill the space before "Entdecken". */}
-                  <div className="flex flex-col gap-2 items-start w-[19rem] shrink-0">
+                {/* Stacked below sm: — the fixed w-[19rem] title column plus
+                    "Entdecken" on the same row overflowed a mobile-width
+                    card (fixed 2026-07-24). "Entdecken" wraps to its own
+                    line with a little space above it; back to the
+                    side-by-side row (matching Figma) from sm: up, where
+                    there's room for both. */}
+                <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 w-full">
+                  {/* w-[19rem] (305px) only from sm: — matches Figma's
+                      title-col exactly there, so the description wraps at
+                      the same point instead of stretching out to fill the
+                      space before "Entdecken"; full width below sm:. */}
+                  <div className="flex flex-col gap-2 items-start w-full sm:w-[19rem] sm:shrink-0">
                     <p
-                      className="font-semibold text-[1.375rem] text-text-primary whitespace-nowrap"
+                      className="font-semibold text-[1.375rem] text-text-primary sm:whitespace-nowrap"
                       style={{ fontFamily: "var(--font-lora)" }}
                     >
                       {post.relatedProduct.name}
                     </p>
                     <p className="text-[0.9375rem] text-text-muted leading-[1.45]">{post.relatedProduct.description}</p>
                   </div>
-                  <span className="flex items-center gap-1.5 font-bold text-[0.875rem] text-text-primary whitespace-nowrap">
+                  <span className="flex items-center gap-1.5 font-bold text-[0.875rem] text-text-primary whitespace-nowrap mt-1 sm:mt-0">
                     Entdecken
                     <svg
                       viewBox="0 0 20 20"

app/blog/page.tsx

@@ -11,6 +11,13 @@ export const metadata: Metadata = {
   title: "Blog",
   description: "Gedanken, Methoden und Impulse für einen leichteren und klareren Alltag.",
   alternates: { canonical: "/blog" },
+  openGraph: {
+    title: "Blog | einfach produktiv.",
+    description: "Gedanken, Methoden und Impulse für einen leichteren und klareren Alltag.",
+    url: "/blog",
+    type: "website",
+    images: ["/blog-featured.jpg"],
+  },
 };
 
 export default async function BlogOverviewPage() {

app/cart/components/CartContent.tsx

@@ -8,7 +8,7 @@ import { useCart, removeFromCart, setQuantity } from "../../lib/cart";
 import { useProducts } from "../../lib/products";
 import { useDiscount, applyDiscount, clearDiscount } from "../../lib/discount";
 import { computeSubtotal, computeCartTotals, effectivePrice, effectiveTaxRate } from "../../lib/cartTotals";
-import { computeTaxBreakdown } from "../../lib/taxBreakdown";
+import { computeTaxBreakdown } from "@einfach-produktiv/invoicing";
 import { formatPrice, discountPercent } from "../../lib/format";
 import { Reveal } from "../../components/Reveal";
 import { VersandModal } from "../../components/VersandModal";
@@ -22,6 +22,7 @@ export function CartContent({
   freeShippingThreshold,
   shippingSettings,
   defaultTaxRate,
+  kleinunternehmer,
   showDiscountField,
 }: {
   trustBadges: TrustBadge[];
@@ -42,6 +43,11 @@ export function CartContent({
    * override taxRatePercent themselves — see lib/cartTotals.ts's
    * effectiveTaxRate(). */
   defaultTaxRate: number;
+  /** §19 UStG — this tenant's company-settings.kleinunternehmer (Payload's
+   * lib/payload.ts's getKleinunternehmer(), same ISR freshness as
+   * defaultTaxRate above). Drops the "inkl. X% MwSt." hints and the VAT
+   * breakdown in favor of the §19 notice below. */
+  kleinunternehmer: boolean;
   /** Whether Payload currently has at least one active discount code at
    * all (lib/discountServer.ts's hasActiveDiscountCode()) — no point
    * showing an open "enter a code" field when nothing could ever validate
@@ -184,12 +190,44 @@ export function CartContent({
               // when the quantity or remove control is used, same "full
               // key" reasoning as cart.ts's own sameLine().
               const lineKey = entry.variant ? `${product.id}::${entry.variant}` : product.id;
+              // The exact variant this line is for, not "any variant low"
+              // like the product-grid cards use — a cart line already has
+              // its variant chosen, so it should only warn when that
+              // specific variant (not some other one) is running low.
+              const lowStock = entry.variant
+                ? (product.variants.find((v) => v.name === entry.variant)?.lowStock ?? false)
+                : product.lowStock;
+              // Same per-line resolution as lowStock above — caps how high
+              // the quantity stepper below can go, instead of only finding
+              // out at checkout that this many aren't actually available
+              // (api/checkout/route.ts's own stock check stays as the
+              // authoritative server-side guard). null (no cap) falls back
+              // to the stepper's original fixed 1-9 range; at least 1 is
+              // always offered even if maxQty is somehow lower than the
+              // qty already in this line, so the remove (×) button stays
+              // the only way down, never an empty <select>.
+              const maxQty = entry.variant
+                ? (product.variants.find((v) => v.name === entry.variant)?.maxQty ?? null)
+                : product.maxQty;
+              const qtyOptions = Array.from({ length: Math.max(1, Math.min(9, maxQty ?? 9)) }, (_, n) => n + 1);
               return (
               <div key={lineKey} className="w-full">
                 {i > 0 && <div className="h-px bg-border w-full mb-6" />}
                 <div className="flex flex-col sm:flex-row gap-4 sm:gap-6 items-start sm:items-center w-full">
-                  <div className="relative size-[9.375rem] shrink-0 rounded-sm overflow-hidden">
-                    <Image src={product.image} alt={product.name} fill sizes="150px" className="object-cover" />
+                  {/* Full-width on mobile (stacked layout) instead of the
+                      fixed 150px square — a small square floating above
+                      the text looked cramped on a narrow column that has
+                      the width to spare; fixed 150px square again from
+                      sm: once the row layout kicks in and the image sits
+                      beside the text instead. */}
+                  <div className="relative w-full aspect-square sm:size-[9.375rem] sm:shrink-0 rounded-sm overflow-hidden">
+                    <Image
+                      src={product.image}
+                      alt={product.name}
+                      fill
+                      sizes="(min-width: 640px) 150px, 100vw"
+                      className="object-cover"
+                    />
                     {discount !== null && (
                       <span className="absolute top-2 left-2 rounded-full bg-brand px-2 py-0.5 text-label font-bold text-text-primary">
                         -{discount}%
@@ -204,6 +242,10 @@ export function CartContent({
                       {product.name}
                       {entry.variant ? ` (${entry.variant})` : ""}
                     </p>
+                    {/* Independent stacked rows, not grid siblings — no
+                        equal-height pressure from neighboring lines, so a
+                        plain conditional line is enough here. */}
+                    {lowStock && <p className="text-label font-bold text-warning">Nur noch wenige verfügbar</p>}
                     <p className="font-bold text-body-sm text-text-muted">{product.description}</p>
                     <div className="flex flex-col gap-0.5 items-start">
                       <p className="text-label text-text-muted">Einzelpreis</p>
@@ -212,7 +254,7 @@ export function CartContent({
                           <span className="text-label text-text-muted line-through">{formatPrice(product.compareAtPrice!)}</span>
                         )}
                         <span className="font-bold text-body-sm text-text-primary">{formatPrice(unitPrice)}</span>
-                        <span className="text-label text-text-muted">inkl. {taxRate}% MwSt.</span>
+                        {!kleinunternehmer && <span className="text-label text-text-muted">inkl. {taxRate}% MwSt.</span>}
                       </p>
                     </div>
                   </div>
@@ -227,7 +269,7 @@ export function CartContent({
                       onChange={(e) => setQuantity(product.id, Number(e.target.value), entry.variant)}
                       className="border border-border rounded-sm px-3.5 py-2 text-body-sm text-text-primary outline-none focus:border-brand transition-colors"
                     >
-                      {Array.from({ length: 9 }, (_, n) => n + 1).map((n) => (
+                      {qtyOptions.map((n) => (
                         <option key={n} value={n}>{n}</option>
                       ))}
                     </select>
@@ -389,7 +431,11 @@ export function CartContent({
                   <span className="flex-1" />
                   <span className="font-bold text-h-small text-text-primary">{formatPrice(total)}</span>
                 </div>
-                <VatBreakdown groups={taxBreakdown} />
+                {kleinunternehmer ? (
+                  <p className="text-label text-text-muted">Gemäß § 19 UStG wird keine Umsatzsteuer berechnet.</p>
+                ) : (
+                  <VatBreakdown groups={taxBreakdown} />
+                )}
               </div>
 
               <Link

app/cart/components/RelatedProducts.tsx

@@ -30,7 +30,7 @@ function pickAvailable(allIds: string[], excludeIds: string[], keep: string[], c
   return [...keep, ...pickRandom(allIds, [...excludeIds, ...keep], missing)];
 }
 
-export function RelatedProducts({ defaultTaxRate }: { defaultTaxRate: number }) {
+export function RelatedProducts({ defaultTaxRate, kleinunternehmer }: { defaultTaxRate: number; kleinunternehmer: boolean }) {
   const cart = useCart();
   const products = useProducts();
   // Cart/checkout resolve any product regardless of `active` (see
@@ -159,22 +159,19 @@ export function RelatedProducts({ defaultTaxRate }: { defaultTaxRate: number })
               />
               {/* Same top-left pill pattern as ProductGrid.tsx/
                   ProductSpotlight.tsx — position: absolute, so it never
-                  affects this card's height the way the old inline
-                  low-stock text hint under the button used to (that
-                  variability was exactly what broke equal card heights
-                  in this grid). */}
+                  affects this card's height. Only the discount/Ausverkauft
+                  pill lives here now; the low-stock hint moved to a
+                  reserved-height text line below (see the min-h paragraph
+                  under the price) — plain conditional text here is what
+                  broke equal card heights in this grid before. */}
               {fullyOutOfStock ? (
                 <span className="absolute top-3 left-3 rounded-full bg-text-muted px-2.5 py-1 text-label font-bold text-bg-base">
                   Ausverkauft
                 </span>
-              ) : discount !== null ? (
-                <span className="absolute top-3 left-3 rounded-full bg-brand px-2.5 py-1 text-label font-bold text-text-primary">
-                  -{discount}%
-                </span>
               ) : (
-                anyLowStock && (
-                  <span className="absolute top-3 left-3 rounded-full bg-warning px-2.5 py-1 text-label font-bold text-text-on-dark">
-                    Nur noch wenige verfügbar
+                discount !== null && (
+                  <span className="absolute top-3 left-3 rounded-full bg-brand px-2.5 py-1 text-label font-bold text-text-primary">
+                    -{discount}%
                   </span>
                 )
               )}
@@ -191,9 +188,17 @@ export function RelatedProducts({ defaultTaxRate }: { defaultTaxRate: number })
                   <span className="text-label text-text-muted line-through">{formatPrice(product.compareAtPrice!)}</span>
                 )}
                 <span className="font-bold text-h4 text-text-primary">{formatPrice(product.price)}</span>
-                <span className="text-label text-text-muted">inkl. {taxRate}% MwSt.</span>
+                {!kleinunternehmer && <span className="text-label text-text-muted">inkl. {taxRate}% MwSt.</span>}
               </p>
-              <AddToCartInlineButton id={product.id} outOfStock={product.outOfStock} variants={product.variants} />
+              {/* Always rendered, text conditional — min-h reserves this
+                  line's height in both states so cards in the same row
+                  stay equal height regardless of low-stock status; this
+                  component has no h-full/flex-1 spacer trick like
+                  ProductGrid.tsx to absorb a variable-height line instead. */}
+              <p className="min-h-[1.05rem] text-label font-bold text-warning">
+                {anyLowStock ? "Nur noch wenige verfügbar" : null}
+              </p>
+              <AddToCartInlineButton id={product.id} outOfStock={product.outOfStock} maxQty={product.maxQty} variants={product.variants} />
             </div>
           </div>
           );

app/cart/page.tsx

@@ -4,7 +4,7 @@ import { CartContent } from "./components/CartContent";
 import { RelatedProducts } from "./components/RelatedProducts";
 import { TrustRow } from "../components/TrustRow";
 import { Footer } from "../components/Footer";
-import { getCartTrustBadges, getShippingMethods, getShippingSettings, getDefaultTaxRatePercent } from "../lib/payload";
+import { getCartTrustBadges, getShippingMethods, getShippingSettings, getDefaultTaxRatePercent, getKleinunternehmer } from "../lib/payload";
 import { hasActiveDiscountCode } from "../lib/discountServer";
 
 // robots: noindex — transactional page (mirrors a specific shopper's cart
@@ -20,11 +20,12 @@ export const metadata: Metadata = {
 };
 
 export default async function CartPage() {
-  const [trustBadges, shippingMethods, shipping, defaultTaxRate, showDiscountField] = await Promise.all([
+  const [trustBadges, shippingMethods, shipping, defaultTaxRate, kleinunternehmer, showDiscountField] = await Promise.all([
     getCartTrustBadges(),
     getShippingMethods(),
     getShippingSettings(),
     getDefaultTaxRatePercent(),
+    getKleinunternehmer(),
     hasActiveDiscountCode(),
   ]);
 
@@ -55,10 +56,11 @@ export default async function CartPage() {
             freeShippingThreshold={freeShippingThreshold}
             shippingSettings={shipping}
             defaultTaxRate={defaultTaxRate}
+            kleinunternehmer={kleinunternehmer}
             showDiscountField={showDiscountField}
           />
         </Suspense>
-        <RelatedProducts defaultTaxRate={defaultTaxRate} />
+        <RelatedProducts defaultTaxRate={defaultTaxRate} kleinunternehmer={kleinunternehmer} />
         <TrustRow />
       </main>
       <Footer />

app/challenge/components/EmailCapture.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import Link from "next/link";
+import { useNewsletterSignup } from "../../lib/useNewsletterSignup";
+
+function LockIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" className="shrink-0">
+      <rect x="2" y="6" width="10" height="7" rx="1.5" stroke="#888" strokeWidth="1.3" />
+      <path d="M4.5 6V4.5a2.5 2.5 0 0 1 5 0V6" stroke="#888" strokeWidth="1.3" />
+    </svg>
+  );
+}
+
+export function EmailCapture({ buttonLabel = "Challenge starten" }: { buttonLabel?: string }) {
+  const { email, emailError, consent, setConsent, status, error, emailRef, handleEmailChange, handleEmailBlur, handleSubmit } =
+    useNewsletterSignup("challenge");
+
+  if (status === "success") {
+    return <p className="text-[1rem] text-[#222221] font-medium">Fast geschafft! Schau kurz in dein Postfach – da wartet schon eine Mail von uns.</p>;
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="flex flex-col gap-2 w-full">
+      {/* Stacked full-width below sm: — side by side, the button's own
+          content width plus the input's min-w-0 squeeze left it cramped
+          on a narrow phone. Default align-items: stretch in flex-col
+          mode is what makes both the input and the button (shrink-0,
+          fixed to its label's width) fill the row once stacked, no
+          explicit w-full needed on either. */}
+      <div className="flex flex-col sm:flex-row gap-3 w-full">
+        <input
+          ref={emailRef}
+          type="email"
+          required
+          value={email}
+          onChange={(e) => handleEmailChange(e.target.value)}
+          onBlur={(e) => handleEmailBlur(e.target.value)}
+          placeholder="Deine E-Mail-Adresse"
+          aria-invalid={Boolean(emailError)}
+          className={`flex-1 min-w-0 bg-white border rounded-lg px-4 py-3 text-[1rem] text-[#868686] outline-none transition-colors ${
+            emailError ? "border-red-600 focus:border-red-600" : "border-[#d9d9d9] focus:border-[#f6a701]"
+          }`}
+        />
+        <button
+          type="submit"
+          disabled={status === "submitting"}
+          className="shrink-0 bg-[#f6a701] rounded-lg px-5 py-3 font-bold text-[1rem] text-[#222221] whitespace-nowrap hover:brightness-95 active:scale-[0.97] transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#f6a701] focus-visible:ring-offset-2 disabled:opacity-60 disabled:pointer-events-none"
+        >
+          {status === "submitting" ? "Wird gesendet…" : buttonLabel}
+        </button>
+      </div>
+      {emailError && <p className="text-[0.8rem] text-red-600">{emailError}</p>}
+      {/* Consent checkbox — this signup's legal basis is consent (email
+          marketing), same wording as the other newsletter forms; colors
+          match this page's own hardcoded palette instead of the shared
+          design tokens, consistent with the rest of the page. */}
+      <label className="flex gap-2 items-start cursor-pointer">
+        <input
+          type="checkbox"
+          required
+          checked={consent}
+          onChange={(e) => setConsent(e.target.checked)}
+          className="size-4 shrink-0 mt-0.5 rounded-xs border border-[#d9d9d9] accent-[#f6a701]"
+        />
+        <span className="text-[0.8rem] text-[#444] leading-normal">
+          Ich akzeptiere die{" "}
+          <Link
+            href="/datenschutz"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="underline hover:text-[#f6a701]"
+          >
+            Datenschutzerklärung
+          </Link>
+          .
+        </span>
+      </label>
+      {status === "error" && <p className="text-[0.8rem] text-red-600">{error}</p>}
+      <p className="flex items-center gap-1.5 text-[0.8rem] text-[#888]">
+        <LockIcon />
+        Keine Werbung. Jederzeit abbestellbar.
+      </p>
+    </form>
+  );
+}

app/challenge/page.tsx

@@ -4,9 +4,11 @@ import Image from "next/image";
 import { draftMode } from "next/headers";
 import { Footer } from "../components/Footer";
 import { Reveal, RevealGroup, RevealItem } from "../components/Reveal";
+import { StepArrow } from "../components/StepArrow";
 import { TestimonialsGrid } from "../components/TestimonialsGrid";
 import { LiveTestimonialsGrid } from "../components/LiveTestimonialsGrid";
 import { getTestimonials } from "../lib/payload";
+import { EmailCapture } from "./components/EmailCapture";
 
 const title = "7-Tage-Challenge – Mehr Klarheit in 7 Tagen";
 const description =
@@ -76,21 +78,12 @@ function IconCheckCircle() {
 
 function Check() {
   return (
-    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" className="shrink-0 mt-0.5">
+    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" className="shrink-0 mt-1">
       <path d="M3 9.5l4 4L15 4" stroke="#f6a701" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
     </svg>
   );
 }
 
-function LockIcon() {
-  return (
-    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" className="shrink-0">
-      <rect x="2" y="6" width="10" height="7" rx="1.5" stroke="#888" strokeWidth="1.3" />
-      <path d="M4.5 6V4.5a2.5 2.5 0 0 1 5 0V6" stroke="#888" strokeWidth="1.3" />
-    </svg>
-  );
-}
-
 const steps = [
   {
     icon: <IconEnvelope />,
@@ -122,52 +115,6 @@ const benefits = [
   { title: "Gelassener leben", desc: "Weniger Stress, mehr Zeit für die Dinge, die dir wichtig sind." },
 ];
 
-function EmailCapture({ buttonLabel = "Challenge starten" }: { buttonLabel?: string }) {
-  return (
-    <div className="flex flex-col gap-2 w-full">
-      <div className="flex gap-3 w-full">
-        <input
-          type="email"
-          placeholder="Deine E-Mail-Adresse"
-          className="flex-1 min-w-0 bg-white border border-[#d9d9d9] rounded-lg px-4 py-3 text-[1rem] text-[#868686] outline-none focus:border-[#f6a701] transition-colors"
-        />
-        <button
-          type="submit"
-          className="shrink-0 bg-[#f6a701] rounded-lg px-5 py-3 font-bold text-[1rem] text-[#222221] whitespace-nowrap hover:brightness-95 active:scale-[0.97] transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#f6a701] focus-visible:ring-offset-2"
-        >
-          {buttonLabel}
-        </button>
-      </div>
-      {/* Consent checkbox — this signup's legal basis is consent (email
-          marketing), same wording as the other newsletter forms; colors
-          match this page's own hardcoded palette instead of the shared
-          design tokens, consistent with the rest of the page. */}
-      <label className="flex gap-2 items-start cursor-pointer">
-        <input
-          type="checkbox"
-          className="size-4 shrink-0 mt-0.5 rounded-xs border border-[#d9d9d9] accent-[#f6a701]"
-        />
-        <span className="text-[0.8rem] text-[#444] leading-normal">
-          Ich akzeptiere die{" "}
-          <Link
-            href="/datenschutz"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="underline hover:text-[#f6a701]"
-          >
-            Datenschutzerklärung
-          </Link>
-          .
-        </span>
-      </label>
-      <p className="flex items-center gap-1.5 text-[0.8rem] text-[#888]">
-        <LockIcon />
-        Keine Werbung. Jederzeit abbestellbar.
-      </p>
-    </div>
-  );
-}
-
 export default async function ChallengePage() {
   const { isEnabled: isPreview } = await draftMode();
   const testimonials = await getTestimonials("challenge", { draft: isPreview });
@@ -285,32 +232,34 @@ export default async function ChallengePage() {
               <p className="text-[1rem] text-[#666]">Jeden Tag ein Impuls. In nur wenigen Minuten.</p>
             </Reveal>
 
-            <RevealGroup className="flex flex-col lg:flex-row items-start lg:items-start gap-8 lg:gap-2 w-full">
+            {/* items-center below lg: (was items-start) — the step blocks
+                are centered columns now (see RevealItem below), so the
+                connector arrows between them need to be centered too,
+                not flush against the left edge. */}
+            <RevealGroup className="flex flex-col lg:flex-row items-center lg:items-start gap-8 lg:gap-2 w-full">
               {steps.flatMap((step, i) => [
-                <RevealItem key={step.title} className="group flex lg:flex-col items-start lg:items-center gap-4 lg:gap-5 flex-1 min-w-0">
+                // Icon-above-text, centered, at every breakpoint now
+                // (previously a left-aligned icon+text row below lg: —
+                // fixed 2026-07-24 to match the lg: layout instead of
+                // diverging from it).
+                <RevealItem key={step.title} className="group flex flex-col items-center gap-4 lg:gap-5 flex-1 min-w-0">
                   <div className="flex items-center justify-center w-16 h-14 shrink-0 transition-transform duration-300 group-hover:scale-110">
                     {step.icon}
                   </div>
-                  <div className="flex flex-col gap-1 lg:text-center">
+                  <div className="flex flex-col gap-1 text-center">
                     <p className="font-semibold text-[#222221] text-[1rem]">{step.title}</p>
                     <p className="text-[0.875rem] text-[#666] leading-[1.5]">{step.desc}</p>
                   </div>
                 </RevealItem>,
                 i < steps.length - 1 ? (
-                  // Same /icon-arrow-connector.svg asset and rotate-on-stack
-                  // pattern as todo-cards/newsletter's HowItWorks — this
-                  // used to be its own hand-drawn SVG arrow, inconsistent
-                  // with those two. Always visible (rotated 90° while
-                  // stacked below lg, this page's own structural
-                  // breakpoint) rather than hidden below lg like before.
+                  // Shared StepArrow component (see its own file) — same
+                  // rotate-on-stack pattern as todo-cards/newsletter's
+                  // HowItWorks. Always visible (rotated 90° while stacked
+                  // below lg, this page's own structural breakpoint) rather
+                  // than hidden below lg like before. Bigger below lg:
+                  // (w-8 h-8, was w-6 h-6) per explicit feedback.
                   <div key={`arrow-${i}`} className="flex items-center justify-center shrink-0 lg:mt-5">
-                    <Image
-                      alt=""
-                      src="/icon-arrow-connector.svg"
-                      width={24}
-                      height={24}
-                      className="w-6 h-6 rotate-90 lg:w-10 lg:h-3 lg:rotate-0"
-                    />
+                    <StepArrow className="w-8 h-8 rotate-90 lg:w-10 lg:h-4 lg:rotate-0" />
                   </div>
                 ) : null,
               ])}
@@ -380,8 +329,11 @@ export default async function ChallengePage() {
           <div className="px-8 lg:px-[5rem] max-w-[1280px] mx-auto">
             <Reveal className="bg-[#f8f3ec] rounded-xl flex flex-col lg:flex-row gap-8 lg:gap-[3.5rem] items-start lg:items-center px-6 lg:px-10 py-8">
 
-              {/* Left: icon + copy */}
-              <div className="flex gap-5 items-start flex-1 min-w-0">
+              {/* Left: icon + copy — icon above text, centered, below lg:
+                  (matches the Home Newsletter card's icon-above-text
+                  pattern), row layout again from lg: up alongside the
+                  outer Reveal's own flex-col -> lg:flex-row switch. */}
+              <div className="flex flex-col items-center text-center gap-5 lg:flex-row lg:items-start lg:text-left flex-1 min-w-0">
                 <div className="shrink-0 -rotate-4">
                   <svg width="52" height="44" viewBox="0 0 52 44" fill="none">
                     <rect x="2" y="2" width="48" height="40" rx="3" stroke="#f6a701" strokeWidth="2" />

app/checkout/components/PaymentStep.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { loadStripe, type Stripe } from "@stripe/stripe-js";
+import { Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
+
+// Loaded once at module scope (not per-render) — same reasoning as any
+// other client-side SDK singleton. Never called at all in test mode
+// (mounted conditionally below), so an unset publishable key there is
+// harmless.
+let stripePromise: Promise<Stripe | null> | null = null;
+function getStripe(): Promise<Stripe | null> {
+  if (!stripePromise) {
+    stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY || "");
+  }
+  return stripePromise;
+}
+
+type Props = {
+  clientSecret: string;
+  orderNumber: string;
+  orderId: number;
+  testMode: boolean;
+  /** Only present in test mode — see api/checkout/route.ts's own comment. */
+  providerReference?: string;
+};
+
+// Rendered by CheckoutContent once /api/checkout returns
+// `requiresPayment: true` (Kreditkarte/PayPal) — see
+// spicy-leaping-pizza.md §3/§7. The order already exists in Payload at
+// this point (status 'pending_payment'); this step only collects/confirms
+// the actual payment, it doesn't create anything.
+export function PaymentStep({ clientSecret, orderNumber, orderId, testMode, providerReference }: Props) {
+  if (testMode) {
+    return <TestPaymentButtons orderNumber={orderNumber} orderId={orderId} providerReference={providerReference ?? ""} />;
+  }
+  return (
+    <Elements stripe={getStripe()} options={{ clientSecret }}>
+      <StripePaymentForm orderNumber={orderNumber} />
+    </Elements>
+  );
+}
+
+function StripePaymentForm({ orderNumber }: { orderNumber: string }) {
+  const stripe = useStripe();
+  const elements = useElements();
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handlePay(e: React.FormEvent) {
+    e.preventDefault();
+    if (!stripe || !elements) return;
+    setSubmitting(true);
+    setError(null);
+    // Redirect-based (PayPal always redirects; cards may need a
+    // 3-D-Secure redirect too) — confirmation itself is never trusted
+    // client-side, see /checkout/verarbeitung's own comment. `if_required`
+    // would skip the redirect for methods that don't need one, but the
+    // return_url page's polling handles both cases identically either way,
+    // so there's no benefit to branching here.
+    const { error: confirmError } = await stripe.confirmPayment({
+      elements,
+      confirmParams: {
+        return_url: `${window.location.origin}/checkout/verarbeitung?orderNumber=${encodeURIComponent(orderNumber)}`,
+      },
+    });
+    // Only reached for immediate client-side failures (e.g. invalid card
+    // number) — a redirect on success/pending never returns here at all.
+    if (confirmError) {
+      setError(confirmError.message ?? "Die Zahlung konnte nicht bestätigt werden.");
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <form onSubmit={handlePay} className="flex flex-col gap-4">
+      <PaymentElement />
+      {error && <p className="text-sm text-red-600">{error}</p>}
+      <button
+        type="submit"
+        disabled={!stripe || submitting}
+        className="rounded-full bg-brand-primary px-6 py-3 text-white font-semibold disabled:opacity-50"
+      >
+        {submitting ? "Wird bearbeitet…" : "Jetzt bezahlen"}
+      </button>
+    </form>
+  );
+}
+
+function TestPaymentButtons({ orderNumber, orderId, providerReference }: { orderNumber: string; orderId: number; providerReference: string }) {
+  const router = useRouter();
+  const [submitting, setSubmitting] = useState<"paid" | "failed" | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  async function confirm(paymentStatus: "paid" | "failed") {
+    setSubmitting(paymentStatus);
+    setError(null);
+    try {
+      const res = await fetch("/api/webhooks/stripe/test-confirm", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ orderId, providerReference, paymentStatus }),
+      });
+      const data = await res.json();
+      if (!data.ok) {
+        setError(data.reason || "Testzahlung fehlgeschlagen.");
+        setSubmitting(null);
+        return;
+      }
+      router.push(`/checkout/verarbeitung?orderNumber=${encodeURIComponent(orderNumber)}`);
+    } catch {
+      setError("Testzahlung konnte nicht ausgeführt werden.");
+      setSubmitting(null);
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-3 rounded-xl border border-dashed border-amber-500 bg-amber-50 p-4">
+      <p className="text-sm font-semibold text-amber-800">PAYMENT_TEST_MODE aktiv — kein echtes Stripe-Konto verbunden.</p>
+      {error && <p className="text-sm text-red-600">{error}</p>}
+      <div className="flex gap-3">
+        <button
+          type="button"
+          onClick={() => confirm("paid")}
+          disabled={submitting !== null}
+          className="rounded-full bg-green-600 px-5 py-2 text-white font-semibold disabled:opacity-50"
+        >
+          {submitting === "paid" ? "Wird bestätigt…" : "Testzahlung erfolgreich"}
+        </button>
+        <button
+          type="button"
+          onClick={() => confirm("failed")}
+          disabled={submitting !== null}
+          className="rounded-full bg-red-600 px-5 py-2 text-white font-semibold disabled:opacity-50"
+        >
+          {submitting === "failed" ? "Wird bestätigt…" : "Testzahlung fehlgeschlagen"}
+        </button>
+      </div>
+    </div>
+  );
+}

app/checkout/page.tsx

@@ -2,7 +2,7 @@ import type { Metadata } from "next";
 import { CheckoutContent } from "./components/CheckoutContent";
 import { TrustRow } from "../components/TrustRow";
 import { Footer } from "../components/Footer";
-import { getShippingMethods, getPaymentMethods, getCartTrustBadges, getShippingSettings, getDefaultTaxRatePercent } from "../lib/payload";
+import { getShippingMethods, getShippingCountries, getPaymentMethods, getCartTrustBadges, getShippingSettings, getDefaultTaxRatePercent, getKleinunternehmer } from "../lib/payload";
 import { getSessionCustomer, getCustomerProfile } from "../lib/customerAuth";
 
 // robots: noindex — transactional page, same reasoning as /cart.
@@ -16,12 +16,14 @@ export const metadata: Metadata = {
 };
 
 export default async function CheckoutPage() {
-  const [shippingMethods, paymentMethods, trustBadges, shippingSettings, defaultTaxRate, session] = await Promise.all([
+  const [shippingMethods, shippingCountries, paymentMethods, trustBadges, shippingSettings, defaultTaxRate, kleinunternehmer, session] = await Promise.all([
     getShippingMethods(),
+    getShippingCountries(),
     getPaymentMethods(),
     getCartTrustBadges(),
     getShippingSettings(),
     getDefaultTaxRatePercent(),
+    getKleinunternehmer(),
     getSessionCustomer(),
   ]);
   // Full profile (incl. saved address) only fetched when a session exists
@@ -33,10 +35,12 @@ export default async function CheckoutPage() {
       <main className="flex flex-col flex-1 bg-bg-base">
         <CheckoutContent
           shippingMethods={shippingMethods}
+          shippingCountries={shippingCountries}
           paymentMethods={paymentMethods}
           trustBadges={trustBadges}
           shippingSettings={shippingSettings}
           defaultTaxRate={defaultTaxRate}
+          kleinunternehmer={kleinunternehmer}
           customerEmail={session?.customer.email ?? null}
           savedProfile={profile}
         />

app/checkout/verarbeitung/VerarbeitungContent.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import Link from "next/link";
+import { ORDER_KEY, PENDING_ORDER_KEY } from "../../lib/order";
+import { clearCart } from "../../lib/cart";
+import { clearDiscount } from "../../lib/discount";
+import { clearCheckoutDraft } from "../../lib/checkoutDraft";
+import { dispatchAuthChanged } from "../../lib/auth";
+
+const POLL_INTERVAL_MS = 1500;
+const POLL_TIMEOUT_MS = 15000;
+
+// The Payment Element's return_url target (see PaymentStep.tsx) — reached
+// after a card confirms client-side or a PayPal redirect completes.
+// Neither of those is trustworthy proof of payment on its own (see
+// spicy-leaping-pizza.md §3's own reasoning: a closed tab mid-PayPal-
+// redirect looks identical to success from here) — this page polls the
+// order's actual `paymentStatus`, which only the webhook-driven
+// confirm-payment endpoint ever sets, and only promotes the pending
+// sessionStorage snapshot to the confirmed one once that's true.
+export function VerarbeitungContent() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const orderNumber = searchParams.get("orderNumber");
+  const [state, setState] = useState<"polling" | "timeout" | "failed" | "error">(orderNumber ? "polling" : "error");
+  const startedAt = useRef<number | null>(null);
+
+  useEffect(() => {
+    if (!orderNumber) return;
+    startedAt.current = Date.now();
+    let cancelled = false;
+
+    async function poll() {
+      try {
+        const res = await fetch(`/api/checkout/status?orderNumber=${encodeURIComponent(orderNumber!)}`, { cache: "no-store" });
+        const data = await res.json();
+        if (cancelled) return;
+        if (!data.ok) {
+          setState("error");
+          return;
+        }
+        if (data.paymentStatus === "paid") {
+          try {
+            const pending = window.sessionStorage.getItem(PENDING_ORDER_KEY);
+            if (pending) {
+              // Patch in the real instrument (Kreditkarte/PayPal) now
+              // that it's known — the pending snapshot was written at
+              // checkout submission time with the neutral "Online-
+              // Zahlung" placeholder, before the customer had actually
+              // picked one on the Payment Element.
+              const snapshot = JSON.parse(pending);
+              if (data.paymentMethodTitle) snapshot.paymentMethodTitle = data.paymentMethodTitle;
+              window.sessionStorage.setItem(ORDER_KEY, JSON.stringify(snapshot));
+              window.sessionStorage.removeItem(PENDING_ORDER_KEY);
+            }
+          } catch {
+            // Same private-browsing fallback as everywhere else this
+            // sessionStorage snapshot is written — /bestellbestaetigung
+            // has its own empty state.
+          }
+          clearCart();
+          clearDiscount();
+          clearCheckoutDraft();
+          dispatchAuthChanged();
+          router.push("/bestellbestaetigung");
+          return;
+        }
+        if (data.paymentStatus === "failed" || data.status === "cancelled") {
+          setState("failed");
+          return;
+        }
+        if (startedAt.current != null && Date.now() - startedAt.current > POLL_TIMEOUT_MS) {
+          setState("timeout");
+          return;
+        }
+        setTimeout(poll, POLL_INTERVAL_MS);
+      } catch {
+        if (!cancelled) setState("error");
+      }
+    }
+
+    poll();
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [orderNumber]);
+
+  return (
+    <main className="flex flex-col flex-1 items-center justify-center gap-6 py-24 px-[var(--layout-padding-x)] text-center">
+      {state === "polling" && (
+        <>
+          <p className="text-h-feature font-semibold text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>
+            Zahlung wird bestätigt…
+          </p>
+          <p className="text-body text-text-muted">Einen Moment bitte, das dauert normalerweise nur wenige Sekunden.</p>
+        </>
+      )}
+      {state === "timeout" && (
+        <>
+          <p className="text-h-feature font-semibold text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>
+            Das dauert etwas länger
+          </p>
+          <p className="text-body text-text-muted max-w-md">
+            Deine Zahlung wird noch verarbeitet. Sobald sie bestätigt ist, schicken wir dir eine Bestätigungs-E-Mail — du musst hier nicht warten.
+          </p>
+        </>
+      )}
+      {state === "failed" && (
+        <>
+          <p className="text-h-feature font-semibold text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>
+            Zahlung fehlgeschlagen
+          </p>
+          <p className="text-body text-text-muted max-w-md">
+            Deine Zahlung konnte nicht abgeschlossen werden. Dein Warenkorb ist noch vorhanden — du kannst es gerne erneut versuchen.
+          </p>
+          <Link
+            href="/checkout"
+            className="flex items-center gap-2 px-7 py-4 rounded-sm bg-brand text-h4 font-bold text-text-primary hover:bg-brand-hover active:scale-[0.97] transition-all"
+          >
+            Zurück zum Checkout
+          </Link>
+        </>
+      )}
+      {state === "error" && (
+        <>
+          <p className="text-h-feature font-semibold text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>
+            Status konnte nicht geladen werden
+          </p>
+          <p className="text-body text-text-muted max-w-md">
+            Falls die Zahlung erfolgreich war, erhältst du in Kürze eine Bestätigungs-E-Mail. Andernfalls kannst du es erneut versuchen.
+          </p>
+          <Link
+            href="/checkout"
+            className="flex items-center gap-2 px-7 py-4 rounded-sm bg-brand text-h4 font-bold text-text-primary hover:bg-brand-hover active:scale-[0.97] transition-all"
+          >
+            Zurück zum Checkout
+          </Link>
+        </>
+      )}
+    </main>
+  );
+}

app/checkout/verarbeitung/page.tsx

@@ -0,0 +1,20 @@
+import type { Metadata } from "next";
+import { Suspense } from "react";
+import { VerarbeitungContent } from "./VerarbeitungContent";
+
+// robots: noindex — transactional page, same reasoning as /checkout itself.
+export const metadata: Metadata = {
+  title: "Zahlung wird bestätigt",
+  robots: { index: false, follow: true },
+};
+
+export default function VerarbeitungPage() {
+  // useSearchParams (reading ?orderNumber=) requires a Suspense boundary
+  // in the App Router — this page has no meaningful loading state of its
+  // own beyond what VerarbeitungContent already renders.
+  return (
+    <Suspense>
+      <VerarbeitungContent />
+    </Suspense>
+  );
+}

app/company-settings-preview/components/LiveCompanySettingsPreviewClient.tsx

@@ -2,7 +2,7 @@
 
 import dynamic from "next/dynamic";
 import { useLivePreview } from "@payloadcms/live-preview-react";
-import { InvoiceDocument, SAMPLE_INVOICE_ORDER } from "../../lib/invoicePdf";
+import { InvoiceDocument, SAMPLE_INVOICE_ORDER } from "@einfach-produktiv/invoicing";
 import type { CompanySettings } from "../../lib/payload";
 
 const PAYLOAD_URL = process.env.NEXT_PUBLIC_PAYLOAD_URL || "https://payload.mk360.de";
@@ -31,7 +31,12 @@ export function LiveCompanySettingsPreviewClient({ initialSettings }: { initialS
 
   return (
     <PDFViewer style={{ width: "100%", height: "100vh", border: "none" }}>
-      <InvoiceDocument order={SAMPLE_INVOICE_ORDER} seller={data} />
+      {/* kleinunternehmer isn't part of InvoiceSeller (it's snapshotted
+          per-order, not read live off the seller — see invoicePdf.tsx's
+          own comment) — merged onto the sample order here only, so an
+          admin toggling the checkbox sees the §19 notice reflected live
+          without this preview needing its own separate mechanism. */}
+      <InvoiceDocument order={{ ...SAMPLE_INVOICE_ORDER, kleinunternehmer: data.kleinunternehmer }} seller={data} />
     </PDFViewer>
   );
 }

app/company-settings-preview/page.tsx

@@ -15,6 +15,7 @@ const FALLBACK: CompanySettings = {
   registerCourt: null,
   registerNumber: null,
   managingDirector: null,
+  shareCapital: null,
   sellerStreet: "",
   sellerZip: "",
   sellerCity: "",
@@ -22,7 +23,9 @@ const FALLBACK: CompanySettings = {
   sellerEmail: "",
   vatId: "",
   taxRatePercent: 19,
-  bankDetails: null,
+  kleinunternehmer: false,
+  iban: null,
+  bic: null,
 };
 
 // Entered exclusively via CompanySettings.ts's admin.livePreview.url (a

app/components/About.tsx

@@ -6,9 +6,16 @@ export function About() {
     <section id="ueber-bjoern" className="bg-bg-dark flex flex-col md:flex-row md:items-stretch w-full">
 
       {/* Text content — relative + z-10 so it renders above the overlapping
-          photo at md+. Comes first in DOM at every breakpoint (no reorder
-          here — unlike Hero, there's no conversion CTA at stake). */}
-      <Reveal className="flex flex-col gap-4 justify-center px-[var(--layout-padding-x)] py-8 md:flex-[1_0_0] min-w-0 relative z-10">
+          photo at lg+. Comes first in DOM at every breakpoint (no reorder
+          here — unlike Hero, there's no conversion CTA at stake).
+          md:flex-[1.4_0_0] lg:flex-[1_0_0] — at Tablet the text column got
+          the narrower 1:1.4 share meant for Desktop's overlap layout,
+          leaving it too cramped for the fixed-width statement + quote/bio
+          row. Widened at Tablet (text gets the bigger share, image the
+          smaller one, no overlap yet) and reverted to the original ratio
+          from lg: up, where the overlap trick actually needs the image to
+          have more room. */}
+      <Reveal className="flex flex-col gap-4 justify-center px-[var(--layout-padding-x)] py-8 md:flex-[1.4_0_0] lg:flex-[1_0_0] min-w-0 relative z-10">
 
         {/* Large serif statement — width-constrained as per design */}
         <p
@@ -19,8 +26,13 @@ export function About() {
         </p>
 
         {/* Quote row: script quote / divider / author bio — side-by-side
-            from md+, stacked with a horizontal divider below md */}
-        <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-6 md:gap-0 w-full">
+            from lg: (was md:) — even with the text column's wider Tablet
+            share above, quote + divider + the whitespace-nowrap bio ("Gründer
+            von einfach-produktiv.") together still needed more room than
+            Tablet's ~384px column has. Stacked with a horizontal divider
+            through the whole Tablet range instead, side-by-side (vertical
+            divider) only once there's real room at lg:. */}
+        <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-6 lg:gap-0 w-full">
 
           {/* Caveat script text with signature positioned below */}
           <div className="relative flex-1" style={{ minHeight: "8rem" }}>
@@ -51,12 +63,12 @@ export function About() {
             </div>
           </div>
 
-          {/* Divider — horizontal full-width line below md, vertical
-              gold line beside the author bio from md+ */}
-          <div className="bg-brand w-full h-px md:w-[2px] md:h-24 md:mx-6 shrink-0" />
+          {/* Divider — horizontal full-width line below lg:, vertical
+              gold line beside the author bio from lg: */}
+          <div className="bg-brand w-full h-px lg:w-[2px] lg:h-24 lg:mx-6 shrink-0" />
 
           <div
-            className="text-bg-white font-normal whitespace-nowrap md:shrink-0"
+            className="text-bg-white font-normal whitespace-nowrap lg:shrink-0"
             style={{ fontSize: "1rem", lineHeight: "1.5rem" }}
           >
             <p>Björn.</p>
@@ -68,11 +80,13 @@ export function About() {
         </div>
       </Reveal>
 
-      {/* Author photo — overlaps the text column via -ml-48 from md+ only
-          (that overlap trick has nothing to blend into once stacked);
-          plain full-width photo below the text on Mobile. */}
+      {/* Author photo — overlaps the text column via -ml-48 from lg+ only
+          (that overlap trick has nothing to blend into once stacked, and
+          at Tablet it would eat back into the extra width the text column
+          above just gained); plain full-width photo below the text on
+          Mobile, plain side-by-side (no overlap) at Tablet. */}
       <Reveal
-        className="relative overflow-hidden w-full md:flex-[1.4_0_0] md:-ml-48"
+        className="relative overflow-hidden w-full md:flex-[1_0_0] lg:flex-[1.4_0_0] lg:-ml-48"
         style={{ minHeight: "14rem" }}
         delay={0.15}
       >
@@ -80,11 +94,11 @@ export function About() {
           alt="Björn"
           src="/about-author.jpg"
           fill
-          sizes="(min-width: 768px) 58vw, 100vw"
+          sizes="(min-width: 1024px) 58vw, (min-width: 768px) 42vw, 100vw"
           className="object-cover object-center pointer-events-none"
         />
-        {/* Left gradient: wide enough to cover the text-column overlap — md+ only */}
-        <div className="hidden md:block absolute inset-y-0 left-0 w-72 bg-gradient-to-r from-bg-dark to-transparent pointer-events-none" />
+        {/* Left gradient: wide enough to cover the text-column overlap — lg+ only */}
+        <div className="hidden lg:block absolute inset-y-0 left-0 w-72 bg-gradient-to-r from-bg-dark to-transparent pointer-events-none" />
       </Reveal>
 
     </section>

app/components/AddToCartButton.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
-import { addToCart } from "../lib/cart";
+import { addToCart, useCart } from "../lib/cart";
 import { useCartFly } from "./CartFly";
 
 const FEEDBACK_MS = 2000;
@@ -18,6 +18,7 @@ export function AddToCartButton({
   className,
   productId = "todo-karten",
   outOfStock = false,
+  maxQty = null,
   variants = [],
 }: {
   label: string;
@@ -29,23 +30,31 @@ export function AddToCartButton({
   /** Product-level — only meaningful when `variants` is empty, same split as
    * AddToCartInlineButton. */
   outOfStock?: boolean;
+  /** Product-level cap on total cart quantity — only meaningful when
+   * `variants` is empty, same split as `outOfStock`. null means no cap. */
+  maxQty?: number | null;
   /** Optional — same shape/semantics as AddToCartInlineButton's own
    * `variants` prop; all three callers already fetch the full product
    * server-side, so this is just threaded straight through. */
-  variants?: { name: string; priceOverride: number | null; outOfStock: boolean; lowStock: boolean }[];
+  variants?: { name: string; priceOverride: number | null; outOfStock: boolean; lowStock: boolean; maxQty: number | null }[];
 }) {
   const [added, setAdded] = useState(false);
   const [selectedVariant, setSelectedVariant] = useState(variants.find((v) => !v.outOfStock)?.name ?? variants[0]?.name);
   const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
   const buttonRef = useRef<HTMLButtonElement>(null);
   const { fly } = useCartFly();
+  const cart = useCart();
 
   useEffect(() => () => clearTimeout(timeoutRef.current), []);
 
   const currentlyOutOfStock = variants.length > 0 ? (variants.find((v) => v.name === selectedVariant)?.outOfStock ?? false) : outOfStock;
+  const currentMaxQty = variants.length > 0 ? (variants.find((v) => v.name === selectedVariant)?.maxQty ?? null) : maxQty;
+  const qtyInCart = cart.find((i) => i.id === productId && i.variant === selectedVariant)?.qty ?? 0;
+  const limitReached = currentMaxQty != null && qtyInCart >= currentMaxQty;
+  const disabled = currentlyOutOfStock || limitReached;
 
   function handleClick() {
-    if (currentlyOutOfStock) return;
+    if (disabled) return;
     addToCart(productId, 1, selectedVariant);
     if (buttonRef.current) fly(buttonRef.current);
     setAdded(true);
@@ -68,12 +77,12 @@ export function AddToCartButton({
   // a solid bright-green button read as too loud here. `border` (width) is
   // added here too since `base` has none by default, unlike
   // AddToCartInlineButton's own base which already carries a plain border.
-  const stateClasses = currentlyOutOfStock
+  const stateClasses = disabled
     ? "opacity-60 cursor-not-allowed"
     : added
       ? "border border-success! bg-success-subtle! hover:bg-success-subtle! text-success!"
       : "";
-  const displayLabel = currentlyOutOfStock ? "Ausverkauft" : label;
+  const displayLabel = currentlyOutOfStock ? "Ausverkauft" : limitReached ? "Maximale Menge im Warenkorb" : label;
 
   return (
     // Low stock is deliberately NOT surfaced here as its own text line
@@ -106,7 +115,7 @@ export function AddToCartButton({
         ref={buttonRef}
         type="button"
         onClick={handleClick}
-        disabled={currentlyOutOfStock}
+        disabled={disabled}
         className={`${base} ${stateClasses}`}
       >
         {/* CSS-grid text-stack, not just swapping the button's text node
@@ -116,9 +125,17 @@ export function AddToCartButton({
             both possible texts in the same grid cell (both invisible ones
             still contribute to sizing) reserves width for whichever is
             wider, so the button's box never changes size either way. Now
-            also reserves space for "Ausverkauft" — the widest of the three
-            wins regardless of which is showing. */}
-        <span className="relative grid">
+            also reserves space for "Ausverkauft"/"Maximale Menge im
+            Warenkorb" — the widest of the four wins regardless of which is
+            showing. */}
+        {/* whitespace-nowrap — inherited by every stacked span below. On a
+            w-full button (e.g. this page's mobile layout), "Maximale Menge
+            im Warenkorb" is long enough to wrap to two lines without this,
+            and since every stacked span shares the same grid cell, that
+            inflated the row height for whichever text is actually showing
+            too — "Ausverkauft" rendered with a tall empty gap underneath it
+            (fixed 2026-07-24). */}
+        <span className="relative grid whitespace-nowrap">
           <span className="invisible [grid-area:1/1]" aria-hidden="true">
             {label}
           </span>
@@ -128,6 +145,9 @@ export function AddToCartButton({
           <span className="invisible [grid-area:1/1]" aria-hidden="true">
             Ausverkauft
           </span>
+          <span className="invisible [grid-area:1/1]" aria-hidden="true">
+            Maximale Menge im Warenkorb
+          </span>
           <span className="[grid-area:1/1]">{added ? "Hinzugefügt ✓" : displayLabel}</span>
         </span>
       </button>

app/components/AddToCartInlineButton.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useRef, useState } from "react";
 import Image from "next/image";
-import { addToCart } from "../lib/cart";
+import { addToCart, useCart } from "../lib/cart";
 import { useCartFly } from "./CartFly";
 
 // Exported so consumers like RelatedProducts.tsx can delay their own
@@ -21,6 +21,7 @@ export function AddToCartInlineButton({
   label = "In den Warenkorb",
   className,
   outOfStock = false,
+  maxQty = null,
   variants = [],
 }: {
   id: string;
@@ -29,27 +30,40 @@ export function AddToCartInlineButton({
   /** Product-level — only meaningful when `variants` is empty. A varianted
    * product's buyability is entirely per-variant instead (see below). */
   outOfStock?: boolean;
+  /** Product-level cap on total cart quantity — only meaningful when
+   * `variants` is empty, same split as `outOfStock`. null means no cap
+   * (backorder allowed / inventory untracked). See lib/payload.ts's
+   * maxPurchasableQty(). */
+  maxQty?: number | null;
   /** Optional — products.variants (name + optional priceOverride + its own
    * outOfStock). When non-empty, a variant must be picked (defaults to the
    * first *in-stock* one, or just the first if all are out) before "add to
    * cart" is enabled — the selected variant's name is snapshotted onto the
    * cart line and, later, the order itself. */
-  variants?: { name: string; priceOverride: number | null; outOfStock: boolean; lowStock: boolean }[];
+  variants?: { name: string; priceOverride: number | null; outOfStock: boolean; lowStock: boolean; maxQty: number | null }[];
 }) {
   const [added, setAdded] = useState(false);
   const [selectedVariant, setSelectedVariant] = useState(variants.find((v) => !v.outOfStock)?.name ?? variants[0]?.name);
   const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
   const buttonRef = useRef<HTMLButtonElement>(null);
   const { fly } = useCartFly();
+  const cart = useCart();
 
   useEffect(() => () => clearTimeout(timeoutRef.current), []);
 
   // Whichever is actually being offered right now — the selected variant's
   // own flag if there are variants, otherwise the plain product-level one.
   const currentlyOutOfStock = variants.length > 0 ? (variants.find((v) => v.name === selectedVariant)?.outOfStock ?? false) : outOfStock;
+  const currentMaxQty = variants.length > 0 ? (variants.find((v) => v.name === selectedVariant)?.maxQty ?? null) : maxQty;
+  // How much of this exact (id, variant) line is already sitting in the
+  // cart — capped adds mean "In den Warenkorb" must go disabled once this
+  // reaches currentMaxQty, not just when the product is fully sold out.
+  const qtyInCart = cart.find((i) => i.id === id && i.variant === selectedVariant)?.qty ?? 0;
+  const limitReached = currentMaxQty != null && qtyInCart >= currentMaxQty;
+  const disabled = currentlyOutOfStock || limitReached;
 
   function handleClick() {
-    if (currentlyOutOfStock) return;
+    if (disabled) return;
     addToCart(id, 1, selectedVariant);
     if (buttonRef.current) fly(buttonRef.current);
     setAdded(true);
@@ -65,7 +79,7 @@ export function AddToCartInlineButton({
   // anymore (it's a trailing `!` now), so two conflicting utilities like
   // border-border/border-success both being present would silently race on
   // CSS source order instead of one cleanly winning.
-  const stateClasses = currentlyOutOfStock
+  const stateClasses = disabled
     ? "border-border opacity-60 cursor-not-allowed"
     : added
       ? "border-success bg-success-subtle"
@@ -97,16 +111,16 @@ export function AddToCartInlineButton({
         ref={buttonRef}
         type="button"
         onClick={handleClick}
-        disabled={currentlyOutOfStock}
+        disabled={disabled}
         className={`${base} ${stateClasses}`}
       >
         <span
           className={
             "text-body-sm transition-colors " +
-            (currentlyOutOfStock ? "text-text-muted" : added ? "font-semibold text-success" : "text-text-primary")
+            (disabled ? "text-text-muted" : added ? "font-semibold text-success" : "text-text-primary")
           }
         >
-          {currentlyOutOfStock ? "Ausverkauft" : added ? "Hinzugefügt ✓" : label}
+          {currentlyOutOfStock ? "Ausverkauft" : limitReached ? "Maximale Menge im Warenkorb" : added ? "Hinzugefügt ✓" : label}
         </span>
         <Image alt="" src="/icon-cart-outline.png" width={32} height={30} className="h-[1.875rem] w-8 object-contain" />
       </button>

app/components/Blog.tsx

@@ -63,11 +63,14 @@ export async function Blog() {
                 </p>
               </div>
             </div>
+            {/* flex + arrow as its own span — see Tools.tsx's comment on
+                this same fix (→'s glyph baseline sits low next to text). */}
             <Link
               href={featured.href}
-              className="font-bold text-body text-text-primary whitespace-nowrap hover:text-brand transition-colors"
+              className="flex items-center gap-1 font-bold text-body text-text-primary whitespace-nowrap hover:text-brand transition-colors"
             >
-              → Zum Beitrag
+              <span aria-hidden>→</span>
+              <span>Zum Beitrag</span>
             </Link>
           </div>
         </RevealItem>
@@ -109,11 +112,14 @@ export async function Blog() {
                     </p>
                   </div>
                 </div>
+                {/* flex + arrow as its own span — see the featured post's
+                    own Link above / Tools.tsx's comment on this same fix. */}
                 <Link
                   href={post.href}
-                  className="font-bold text-body whitespace-nowrap hover:text-brand transition-colors"
+                  className="flex items-center gap-1 font-bold text-body whitespace-nowrap hover:text-brand transition-colors"
                 >
-                  → Zum Beitrag
+                  <span aria-hidden>→</span>
+                  <span>Zum Beitrag</span>
                 </Link>
               </div>
             </RevealItem>

app/components/CheckoutSteps.tsx

@@ -20,6 +20,8 @@ function StepCircle({ state, number }: { state: StepState; number: number }) {
     );
   }
   return (
+    // Back to the shared border-border (reverted 2026-07-24 per feedback —
+    // only the connector line below should be the darker #c4b8a0).
     <div className="flex size-9 items-center justify-center rounded-full border border-border font-bold text-body-sm text-text-muted">
       {number}
     </div>
@@ -50,7 +52,7 @@ export function CheckoutSteps({ current }: { current: number }) {
                 </span>
               </div>
             </div>
-            {i < STEP_LABELS.length - 1 && <div className="h-px bg-border flex-1 mx-4 min-w-4" />}
+            {i < STEP_LABELS.length - 1 && <div className="h-px bg-[#c4b8a0] flex-1 mx-4 min-w-4" />}
           </div>
         );
       })}

app/components/Divider.tsx

@@ -4,7 +4,7 @@ import { Reveal } from "./Reveal";
 function Word({ children }: { children: string }) {
   return (
     <p
-      className="font-bold leading-normal text-text-primary text-h2 whitespace-nowrap"
+      className="font-bold leading-normal text-text-primary text-[length:var(--divider-word-size)] whitespace-nowrap"
       style={{ fontFamily: "var(--font-caveat)" }}
     >
       {children}
@@ -28,25 +28,30 @@ export function Divider() {
   return (
     <Reveal
       delay={0.3}
-      className="flex items-center justify-center flex-wrap gap-x-8 gap-y-3 pb-5 pt-12 px-[var(--layout-padding-x)] w-full bg-bg-base text-center"
+      className="flex items-center justify-center flex-wrap gap-x-3 sm:gap-x-8 gap-y-3 pb-5 pt-12 px-[var(--layout-padding-x)] w-full bg-bg-base text-center"
     >
 
       {/* Word + its trailing icon are grouped into one shrink-0 flex unit
           so flex-wrap only ever breaks BETWEEN pairs, never leaving an
           arrow stranded alone on its own line — the arrows are always
           visible now (previously hidden below md: entirely to sidestep
-          that exact problem), this fixes the root cause instead. */}
-      <div className="flex items-center gap-8 shrink-0">
+          that exact problem), this fixes the root cause instead.
+          gap-3/sm:gap-8 (not a flat gap-8): below 640px the words and
+          icons already shrink via --divider-word-size/--divider-arrow-*
+          (see globals.css), tightening the gaps too is what gets the
+          whole phrase close to fitting on one row instead of each pair
+          wrapping to its own line. */}
+      <div className="flex items-center gap-3 sm:gap-8 shrink-0">
         <Word>Klarheit</Word>
         <Arrow />
       </div>
 
-      <div className="flex items-center gap-8 shrink-0">
+      <div className="flex items-center gap-3 sm:gap-8 shrink-0">
         <Word>Fokus</Word>
         <Arrow />
       </div>
 
-      <div className="flex items-center gap-8 shrink-0">
+      <div className="flex items-center gap-3 sm:gap-8 shrink-0">
         <Word>Entlastung</Word>
 
         {/* Sparkle icon — sizes now fluid (--divider-sparkle-*) to match

app/components/Footer.tsx

@@ -18,8 +18,12 @@ export function Footer() {
       {/* Footer inner — max-width 1280px, centered */}
       <div className="flex flex-col items-center w-full max-w-[1280px] py-8 md:py-4">
 
-        {/* Three groups: logo | @handle | links — stacked + centered below md */}
-        <div className="flex flex-col md:flex-row items-center md:justify-between gap-6 md:gap-0 px-8 md:px-16 w-full">
+        {/* Three groups: logo | @handle | links — stacked + centered below
+            lg: (was md:). Logo + handle + 5 legal links all side by side
+            with justify-between read too cramped on Tablet — stacked
+            through that range instead, side by side again once there's
+            real room at lg:. */}
+        <div className="flex flex-col lg:flex-row items-center lg:justify-between gap-6 lg:gap-0 px-8 md:px-16 w-full">
 
           {/* Logo: "einfach produktiv" white + "." gold */}
           <div className="flex items-center p-2 shrink-0">

app/components/Hero.tsx

@@ -2,71 +2,118 @@ import Link from "next/link";
 import Image from "next/image";
 import { PopIn, Reveal } from "./Reveal";
 
+// Shared between the plain (below lg:) and Reveal-wrapped (lg:+) render —
+// see the two call sites' own comment on why this needs two wrappers.
+function HeroImage() {
+  return (
+    <Image
+      src="/hero.png"
+      alt=""
+      fill
+      priority
+      sizes="(min-width: 768px) 58vw, 100vw"
+      className="object-cover"
+      style={{
+        WebkitMaskImage:
+          "linear-gradient(to right, transparent 0%, black 14%), linear-gradient(to bottom, transparent 0%, black 10%)",
+        WebkitMaskComposite: "destination-in",
+        maskImage:
+          "linear-gradient(to right, transparent 0%, black 14%), linear-gradient(to bottom, transparent 0%, black 10%)",
+        maskComposite: "intersect",
+      }}
+    />
+  );
+}
+
 export function Hero() {
   return (
     <section className="bg-bg-base w-full overflow-hidden">
-      {/* Structural breakpoint is lg: (1024px) here, not the site-wide md:
-          (768px) — a documented exception (see Gotcha in the figma-to-nextjs
-          skill). At md:col-span-5 the text column was only ~320px at
-          768-1023px viewports, too narrow for the heading/CTA/social-proof
-          row (which wrapped to 3 cramped lines). Staying stacked full-width
-          through the whole Tablet range and only splitting into the 5/7
-          grid once there's real room (≥1024px) fixes that without touching
-          the 5/7 ratio itself, which is fine once it has space. */}
-      <div className="flex flex-col lg:grid lg:grid-cols-12 lg:items-center gap-8 lg:gap-[var(--layout-grid-gap)] pt-10 md:pt-12 lg:pt-0">
+      {/* Structural breakpoint is md: (768px) for the GRID only — the text
+          column stays ~283-320px wide through the whole 768-1023px Tablet
+          range regardless. Below, every piece of *content* inside the text
+          column (heading/subtitle/CTA/social-proof) keeps its smaller,
+          fixed-below-lg: sizing all the way through Tablet too, not just
+          true Mobile — reusing the full fluid-token sizes at md: (as a
+          first pass 2026-07-24 briefly did) put the original ~19-44px
+          fluid floors right back in that narrow column, recreating the
+          exact 3-line-wrap problem the old `lg:` structural exception
+          existed to avoid. Splitting "grid at md:" from "full-size content
+          at lg:" gets both: Tablet shows the real 5/7 grid, but with
+          content sized for its column's actual width, not the column
+          width `lg:` was designed for. */}
+      <div className="flex flex-col md:grid md:grid-cols-12 md:items-center gap-8 md:gap-[var(--layout-grid-gap)] pt-10 md:pt-0">
 
         {/* Text content — first in DOM/visual order at every breakpoint so
             the CTA stays above the fold on Mobile (deliberate exception to
             the "keep DOM order" default, see Hero decision in the plan).
             Reveal fires ~immediately since Hero is already in the initial
             viewport — this doubles as the page's entrance animation. */}
-        <Reveal className="order-1 lg:order-none lg:col-span-5 flex flex-col gap-7 items-start pl-[var(--layout-padding-x)] pr-10 lg:pr-0">
+        <Reveal className="order-1 md:order-none md:col-span-5 flex flex-col gap-7 items-start pl-[var(--layout-padding-x)] pr-10 md:pr-0">
 
-          {/* Heading — forced break after "darf" below lg: (1024px),
-              natural wrap from lg: up. Below lg: the Hero is stacked
-              full-width and narrower per-viewport, where natural wrap
-              produced an awkward break — force it after "darf" there via
-              a responsive <br/> (visible by default, turned off at lg:+).
-              From lg: up the 5/12 grid's text column wraps fine on its
-              own, no forced break needed. */}
+          {/* Heading — smaller fixed-ish size below lg: (text-h1, still a
+              real paired font-size+line-height token, not an arbitrary
+              value) — text-display's own 44px floor wraps very heavily in
+              a ~283-320px Tablet column (even a single word can approach
+              that width). Forced break after "darf" only in the sm-md
+              tablet range (natural wrap there landed awkwardly); removed
+              at true mobile widths (below sm:) 2026-07-24 — narrower
+              still, natural wrap reads fine there, and the forced break
+              made "darf" the whole first line. Full text-display only
+              from lg: up, where the column has real room again. */}
           <p
             className="font-semibold leading-[0] shrink-0 text-[0px] text-text-primary"
             style={{ fontFamily: "var(--font-playfair)" }}
           >
-            <span className="text-display">
-              Produktivität darf<br className="lg:hidden" /> sich leicht anfühlen
+            <span className="text-h1 lg:text-display">
+              Produktivität darf<br className="hidden sm:inline md:hidden" /> sich leicht anfühlen
             </span>
             {/* Brand's signature orange dot (also in the logo/footer) —
                 bouncy pop-in once the heading scrolls into view, timed to
                 land just after the Reveal's own 0.6s fade-up so it reads
                 as a deliberate flourish, not simultaneous with the text.
                 One-shot, not a looping pulse — continuous motion next to
-                the primary CTA would be distracting rather than "cool". */}
-            <PopIn className="text-display text-brand inline-block" delay={0.5}>
+                the primary CTA would be distracting rather than "cool".
+                Same text-h1 lg:text-display as the heading itself, so the
+                dot scales down to match below lg:. */}
+            <PopIn className="text-h1 lg:text-display text-brand inline-block" delay={0.5}>
               .
             </PopIn>
           </p>
 
-          {/* Subheading */}
-          <p className="font-semibold leading-[2.375rem] min-w-full shrink-0 text-text-primary text-h-emphasis w-[min-content] [word-break:break-word] not-italic">
+          {/* Subheading — smaller fixed size below lg:, text-h-emphasis's
+              own 20px floor read too large next to the now-smaller CTA
+              text. leading shrinks to match, not just font-size. */}
+          <p className="font-semibold leading-[1.75rem] lg:leading-[2.375rem] min-w-full shrink-0 text-text-primary text-[1rem] lg:text-h-emphasis w-[min-content] [word-break:break-word] not-italic">
             Für Menschen mit Familie, Verantwortung und zu wenig Zeit
           </p>
 
           {/* CTA */}
           <Link
             href="/challenge"
-            className="flex gap-4 items-center justify-center overflow-clip px-6 py-3 rounded-sm shrink-0 bg-brand hover:brightness-95 active:scale-[0.97] transition-all"
+            className="flex gap-4 items-center justify-center overflow-clip px-6 py-3 rounded-sm shrink-0 max-w-full bg-brand hover:brightness-95 active:scale-[0.97] transition-all"
           >
-            <span className="font-semibold leading-[2.375rem] text-text-primary text-h3 whitespace-nowrap not-italic">
+            {/* Letting this wrap to two lines below lg: (tried 2026-07-24)
+                put the icon beside a two-line text block, which read as
+                broken rather than intentional. Smaller fixed size below
+                lg: instead, so the full phrase fits on one line within
+                the column's width — text-h3's own 19px floor was still
+                too wide for that, both on a 375px phone AND in the
+                ~283-320px Tablet grid column. */}
+            <span className="font-semibold leading-[2.375rem] text-text-primary text-[0.8125rem] lg:text-h3 whitespace-nowrap not-italic">
               Starte mit der 7-Tage-Challenge
             </span>
-            <div className="relative h-[1.1875rem] w-[1.5625rem] shrink-0">
-              <Image alt="" src="/icon-check.svg" fill sizes="26px" />
+            {/* Scaled down to match the smaller CTA text (same ~0.76
+                aspect ratio as the lg: size), full size again from lg: up
+                alongside text-h3. */}
+            <div className="relative h-[0.8125rem] w-[1.0625rem] lg:h-[1.1875rem] lg:w-[1.5625rem] shrink-0">
+              <Image alt="" src="/icon-check.svg" fill sizes="(min-width: 1024px) 26px, 17px" />
             </div>
           </Link>
 
-          {/* Social proof */}
-          <div className="flex gap-3 items-start overflow-clip shrink-0 w-full">
+          {/* Social proof — always avatars-then-text on two lines below
+              lg: (not just when it happens to overflow), single row again
+              from lg: up where the real column width fits it fine. */}
+          <div className="flex flex-col lg:flex-row gap-3 items-center justify-center overflow-clip shrink-0 w-full">
             {/* Avatars — gap 2px, not overlapping */}
             <div className="flex gap-[0.125rem] items-center shrink-0">
               {["/avatar-1.jpg", "/avatar-2.jpg", "/avatar-3.jpg"].map((src, i) => (
@@ -79,46 +126,39 @@ export function Hero() {
                 </div>
               ))}
             </div>
-            <p className="flex-[1_0_0] font-normal leading-[1.5rem] text-text-primary text-body [word-break:break-word]">
+            <p className="flex-[1_0_0] font-normal leading-[1.5rem] text-text-primary text-body text-center [word-break:break-word]">
               10.000+ Menschen vertrauen <span className="whitespace-nowrap">einfach-produktiv</span>
             </p>
           </div>
         </Reveal>
 
         {/* Image — bleeds to the true edge at every breakpoint (never
-            padded). Below lg: (stacked layout) the full 887:583 aspect
+            padded). Below md: (stacked layout) the full 887:583 aspect
             ratio at 100vw would make the image ~600-900px tall and
             dominate the page, so height is capped and object-cover crops
-            it into a supporting banner instead; at lg:+ (grid, image only
+            it into a supporting banner instead; at md:+ (grid, image only
             58% width) the full aspect ratio looks right again, so the cap
-            is lifted. A small negative top margin below lg: pulls it up to
-            slightly tuck under the text block (deliberately less than the
-            social-proof row's height, so it never covers the avatars/text).
-            Scoped to md:-only (mt-0 at base and again at lg:) — it's a
-            Tablet-specific touch, not a permanent effect. No shadow: a
-            plain box-shadow reads as a hard rectangular edge against the
-            existing corner/right/bottom mask-gradient fade below, which
-            looked worse than no shadow at all — tried and reverted. */}
+            is lifted. No shadow: a plain box-shadow reads as a hard
+            rectangular edge against the existing corner/right/bottom
+            mask-gradient fade below, which looked worse than no shadow at
+            all — tried and reverted. */}
+        {/* No Reveal (fade-in-on-scroll) below md: — whileInView's -80px
+            viewport margin means the image doesn't fade in until scrolled
+            that much further into view; on a short mobile viewport this
+            image sits right at the initial fold, so it stayed at
+            opacity:0 (a white gap, matching the section's own bg-bg-base)
+            above the fold until the user scrolled (reported 2026-07-24).
+            Plain, always-visible image below md: instead; Reveal's fade
+            kept from md: up, where the image is beside the text with
+            plenty of room and this was never an issue. */}
+        <div className="order-2 md:hidden relative w-full aspect-[887/583] max-h-[16rem]">
+          <HeroImage />
+        </div>
         <Reveal
-          className="order-2 lg:order-none lg:col-span-7 relative w-full aspect-[887/583] max-h-[16rem] md:max-h-[22rem] lg:max-h-none mt-0 md:-mt-6 lg:mt-0"
+          className="hidden md:block md:col-span-7 relative w-full aspect-[887/583]"
           delay={0.15}
         >
-          <Image
-            src="/hero.png"
-            alt=""
-            fill
-            priority
-            sizes="(min-width: 1024px) 58vw, 100vw"
-            className="object-cover"
-            style={{
-              WebkitMaskImage:
-                "linear-gradient(to right, transparent 0%, black 14%), linear-gradient(to bottom, transparent 0%, black 10%)",
-              WebkitMaskComposite: "destination-in",
-              maskImage:
-                "linear-gradient(to right, transparent 0%, black 14%), linear-gradient(to bottom, transparent 0%, black 10%)",
-              maskComposite: "intersect",
-            }}
-          />
+          <HeroImage />
         </Reveal>
 
       </div>

app/components/Navbar.tsx

@@ -113,7 +113,12 @@ function AccountLink() {
       aria-label={loggedIn ? "Mein Konto (eingeloggt)" : "Anmelden"}
       className="relative flex h-11 w-11 items-center justify-center shrink-0 active:scale-[0.9] transition-transform"
     >
-      <svg viewBox="0 0 24 24" className="h-6 w-6 text-text-primary" fill="none" aria-hidden="true">
+      {/* -translate-y-0.5 — the glyph's own bounding box centers fine
+          mathematically, but the round head (light, isolated) versus the
+          wide shoulders (heavier, at the bottom) reads as optically
+          bottom-heavy next to the cart icon, sitting visibly lower.
+          Nudged up to match (fixed 2026-07-24). */}
+      <svg viewBox="0 0 24 24" className="h-7 w-7 text-text-primary -translate-y-0.5" fill="none" aria-hidden="true">
         <circle cx="12" cy="8" r="3.6" stroke="currentColor" strokeWidth="1.8" />
         <path d="M4.5 20c1.2-4 4-6 7.5-6s6.3 2 7.5 6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
       </svg>
@@ -475,8 +480,18 @@ export function Navbar({ singleActiveProduct }: { singleActiveProduct: boolean }
               (below lg). Grouped so spacing stays consistent as individual
               children hide/show across the three breakpoint tiers. */}
           <div className="flex items-center gap-2">
-            <AccountLink />
-            <CartLink />
+            {/* No gap between these two — each is already a 44px touch
+                target with the icon centered inside, so even gap-0 here
+                still leaves ~20px of visual space between the actual
+                glyphs. The outer gap-2 is what separates this pair from
+                the CTA-buttons/hamburger group that follows, and stays
+                untouched. Fixed 2026-07-24: gap-2 here on top of that
+                built-in padding read as too much space on mobile, where
+                these two icons are the only always-visible controls. */}
+            <div className="flex items-center">
+              <AccountLink />
+              <CartLink />
+            </div>
 
             {/* CTA buttons — inline from md (768px) up, i.e. through both
                 "Collapsed-CTA" and full Desktop tiers */}

app/components/Newsletter.tsx

@@ -1,7 +1,10 @@
+"use client";
+
 import type { ReactNode } from "react";
 import Link from "next/link";
 import Image from "next/image";
 import { Reveal } from "./Reveal";
+import { useNewsletterSignup } from "../lib/useNewsletterSignup";
 
 // Same lock icon + copy as /challenge's and /newsletter's EmailCapture —
 // unified across all newsletter-signup forms instead of each having its
@@ -31,6 +34,9 @@ export function Newsletter({
   title = <>Starte mit einer Woche voller Klarheit<span className="text-brand">.</span></>,
   description = "Melde dich zum Newsletter an und erhalte die 7-Tage-Challenge, mit der du durch mehr Struktur weniger Stress spürst.",
 }: NewsletterProps = {}) {
+  const { email, emailError, consent, setConsent, status, error, emailRef, handleEmailChange, handleEmailBlur, handleSubmit } =
+    useNewsletterSignup("newsletter-page");
+
   return (
     <section className="py-16 w-full">
 
@@ -40,10 +46,23 @@ export function Newsletter({
         {/* Rounded card: cream bg, stacks below md */}
         <Reveal className="bg-bg-muted flex flex-col md:flex-row gap-8 md:gap-12 items-center px-8 py-8 md:py-0 rounded-md w-full">
 
-          {/* Left: copy — fixed width from md+ so the form always gets the remaining space */}
-          <div className="flex gap-8 items-start w-full md:w-[var(--newsletter-copy-width)] md:py-4 md:shrink-0">
+          {/* Left: copy — fixed width from md+ so the form always gets the remaining space.
+              Icon+text stacked (icon on top, centered) below md: — side by
+              side they squeezed the text into a ~164px column on a 375px
+              phone (icon width + gap eating most of the card's inner
+              width), wrapping awkwardly. Row layout with the icon beside
+              the text is fine again from md+, where the fixed copy-column
+              width leaves real room. */}
+          <div className="flex flex-col items-center gap-4 text-center w-full md:flex-row md:items-start md:gap-8 md:text-left md:w-[var(--newsletter-copy-width)] md:py-4 md:shrink-0">
 
-            {/* Decorative envelope icon, tilted -4° as per design */}
+            {/* Decorative envelope icon, tilted -4° as per design.
+                w-[4rem], not w-16 — this project's --spacing-16 is a
+                fluid token (floors to 40px below 768px, see globals.css),
+                so pairing w-16 with the fixed h-[3.438rem] squished the
+                icon to a 40:55 box on mobile instead of the SVG's native
+                64:55.0096 (it has preserveAspectRatio="none", so it
+                actually stretches to whatever box it's given — fixed
+                2026-07-24). */}
             <div className="flex items-center justify-center shrink-0 w-[4.23rem] h-[3.71rem]">
               <div className="-rotate-4 -scale-y-100">
                 <Image
@@ -51,7 +70,7 @@ export function Newsletter({
                   src="/newsletter-icon.svg"
                   width={64}
                   height={55}
-                  className="w-16 h-[3.438rem] block"
+                  className="w-[4rem] h-[3.438rem] block"
                 />
               </div>
             </div>
@@ -72,54 +91,84 @@ export function Newsletter({
 
           {/* Right: form — takes remaining space, centered vertically from md+ */}
           <div className="flex w-full md:flex-1 items-center md:self-stretch min-w-0">
-            <div className="flex flex-1 flex-col gap-4 min-w-0 w-full">
-
-              {/* Input + submit button — stacked below md, side by side from md+ */}
-              <div className="flex flex-col md:flex-row gap-4 items-stretch w-full">
-                <input
-                  type="email"
-                  placeholder="Deine E-Mail-Adresse"
-                  className="flex-1 min-w-0 bg-bg-white border border-border rounded-sm px-6 py-3 text-body text-text-muted font-normal outline-none focus:border-brand transition-colors"
-                />
-                <button
-                  type="submit"
-                  className="shrink-0 bg-brand rounded-sm px-5 py-3 font-bold text-h4 text-text-primary tracking-[0.18px] whitespace-nowrap hover:brightness-95 active:scale-[0.97] transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-bg-muted"
-                >
-                  Jetzt anmelden
-                </button>
-              </div>
-
-              {/* Consent checkbox — required since this signup's legal
-                  basis is consent (email marketing), not the "Ich achte
-                  auf deine Daten" trust note alone. Same wording/pattern
-                  as NewsletterModal's checkbox. */}
-              <label className="flex gap-2 items-start cursor-pointer">
-                <input
-                  type="checkbox"
-                  className="size-4 shrink-0 mt-0.5 rounded-xs border border-border accent-brand"
-                />
-                <span className="text-label text-text-primary font-normal leading-normal">
-                  Ich akzeptiere die{" "}
-                  <Link
-                    href="/datenschutz"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="underline hover:text-brand"
-                  >
-                    Datenschutzerklärung
-                  </Link>
-                  .
-                </span>
-              </label>
-
-              {/* Privacy note — same icon/copy/color as the other
-                  newsletter forms (see /challenge's EmailCapture). */}
-              <p className="flex items-center gap-1.5 text-label text-[#888] font-normal leading-normal">
-                <LockIcon />
-                Keine Werbung. Jederzeit abbestellbar.
+            {status === "success" ? (
+              <p className="text-body text-text-primary font-medium">
+                Fast geschafft! Schau kurz in dein Postfach – da wartet schon eine Mail von uns.
               </p>
+            ) : (
+              <form onSubmit={handleSubmit} className="flex flex-1 flex-col gap-4 min-w-0 w-full">
 
-            </div>
+                {/* Input + submit button — stacked below lg: (was md:).
+                    The card above already goes side-by-side at md: with a
+                    fixed-width copy column (--newsletter-copy-width), which
+                    only leaves ~200px for this form column at 768px — not
+                    enough room for input+button side by side. Stacked
+                    through the whole Tablet range instead, side by side
+                    again once the form column has real room at lg:. */}
+                <div className="flex flex-col lg:flex-row gap-4 items-stretch w-full">
+                  <input
+                    ref={emailRef}
+                    type="email"
+                    required
+                    value={email}
+                    onChange={(e) => handleEmailChange(e.target.value)}
+                    onBlur={(e) => handleEmailBlur(e.target.value)}
+                    placeholder="Deine E-Mail-Adresse"
+                    aria-invalid={Boolean(emailError)}
+                    className={`flex-1 min-w-0 bg-bg-white border rounded-sm px-6 py-3 text-body text-text-muted font-normal outline-none transition-colors ${
+                      emailError ? "border-red-600 focus:border-red-600" : "border-border focus:border-brand"
+                    }`}
+                  />
+                  <button
+                    type="submit"
+                    disabled={status === "submitting"}
+                    className="shrink-0 bg-brand rounded-sm px-5 py-3 font-bold text-h4 text-text-primary tracking-[0.18px] whitespace-nowrap hover:brightness-95 active:scale-[0.97] transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-bg-muted disabled:opacity-60 disabled:pointer-events-none"
+                  >
+                    {status === "submitting" ? "Wird gesendet…" : "Jetzt anmelden"}
+                  </button>
+                </div>
+                {emailError && (
+                  <p className="text-label text-red-600 font-normal -mt-2">{emailError}</p>
+                )}
+
+                {/* Consent checkbox — required since this signup's legal
+                    basis is consent (email marketing), not the "Ich achte
+                    auf deine Daten" trust note alone. Same wording/pattern
+                    as NewsletterModal's checkbox. */}
+                <label className="flex gap-2 items-start cursor-pointer">
+                  <input
+                    type="checkbox"
+                    required
+                    checked={consent}
+                    onChange={(e) => setConsent(e.target.checked)}
+                    className="size-4 shrink-0 mt-0.5 rounded-xs border border-border accent-brand"
+                  />
+                  <span className="text-label text-text-primary font-normal leading-normal">
+                    Ich akzeptiere die{" "}
+                    <Link
+                      href="/datenschutz"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="underline hover:text-brand"
+                    >
+                      Datenschutzerklärung
+                    </Link>
+                    .
+                  </span>
+                </label>
+
+                {status === "error" && (
+                  <p className="text-label text-red-600 font-normal">{error}</p>
+                )}
+
+                {/* Privacy note — same icon/copy/color as the other
+                    newsletter forms (see /challenge's EmailCapture). */}
+                <p className="flex items-center gap-1.5 text-label text-[#888] font-normal leading-normal">
+                  <LockIcon />
+                  Keine Werbung. Jederzeit abbestellbar.
+                </p>
+              </form>
+            )}
           </div>
 
         </Reveal>

app/components/NewsletterModal.tsx

@@ -4,6 +4,7 @@ import { useEffect, useRef } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { AnimatePresence, motion } from "motion/react";
+import { useNewsletterSignup } from "../lib/useNewsletterSignup";
 
 const features = [
   {
@@ -34,6 +35,8 @@ const features = [
 export function NewsletterModal({ open, onClose }: { open: boolean; onClose: () => void }) {
   const dialogRef = useRef<HTMLDivElement>(null);
   const closeButtonRef = useRef<HTMLButtonElement>(null);
+  const { email, emailError, consent, setConsent, status, error, emailRef, handleEmailChange, handleEmailBlur, handleSubmit } =
+    useNewsletterSignup("newsletter-modal");
 
   // Background scroll lock while open — intercepts and cancels the wheel/
   // touch input that would cause scrolling, instead of toggling
@@ -169,8 +172,8 @@ export function NewsletterModal({ open, onClose }: { open: boolean; onClose: ()
             {/* -scale-y-100 is required, not just -rotate-4 — the SVG
                 itself is authored upside-down (matches how Newsletter.tsx
                 uses this exact same asset); without it the icon renders
-                flipped. */}
-            <div className="w-16 h-14 -rotate-4 -scale-y-100">
+                flipped. Hidden below md: — removed on mobile 2026-07-24. */}
+            <div className="hidden md:block w-16 h-14 -rotate-4 -scale-y-100">
               <Image alt="" src="/newsletter-icon.svg" width={64} height={56} className="w-full h-full" />
             </div>
 
@@ -186,39 +189,63 @@ export function NewsletterModal({ open, onClose }: { open: boolean; onClose: ()
               Melde dich zum Newsletter an und erhalte die 7-Tage-Challenge, mit der du durch mehr Struktur weniger Stress spürst.
             </p>
 
-            <form className="flex flex-col gap-5 items-start w-full">
-              <div className="flex flex-col gap-4 items-start w-full">
-                <input
-                  type="email"
-                  placeholder="Deine E-Mail-Adresse"
-                  className="w-full bg-bg-white border border-border rounded-sm px-6 py-3 text-body text-text-muted font-normal outline-none focus:border-brand transition-colors"
-                />
-                <button
-                  type="submit"
-                  className="w-full bg-brand rounded-sm px-7 py-[0.875rem] font-bold text-h4 text-text-primary text-left hover:bg-brand-hover active:scale-[0.97] transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base"
-                >
-                  Jetzt anmelden
-                </button>
-              </div>
-              <label className="flex gap-2 items-center w-full cursor-pointer">
-                <input
-                  type="checkbox"
-                  className="size-4 shrink-0 rounded-xs border border-border accent-brand"
-                />
-                <span className="text-label text-text-primary">
-                  Ich akzeptiere die{" "}
-                  <Link
-                    href="/datenschutz"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="underline hover:text-brand"
+            {status === "success" ? (
+              <p className="text-body text-text-primary font-medium">
+                Fast geschafft! Schau kurz in dein Postfach – da wartet schon eine Mail von uns.
+              </p>
+            ) : (
+              <form onSubmit={handleSubmit} className="flex flex-col gap-5 items-start w-full">
+                <div className="flex flex-col gap-4 items-start w-full">
+                  <input
+                    ref={emailRef}
+                    type="email"
+                    required
+                    value={email}
+                    onChange={(e) => handleEmailChange(e.target.value)}
+                    onBlur={(e) => handleEmailBlur(e.target.value)}
+                    placeholder="Deine E-Mail-Adresse"
+                    aria-invalid={Boolean(emailError)}
+                    className={`w-full bg-bg-white border rounded-sm px-6 py-3 text-body text-text-muted font-normal outline-none transition-colors ${
+                      emailError ? "border-red-600 focus:border-red-600" : "border-border focus:border-brand"
+                    }`}
+                  />
+                  {emailError && (
+                    <p className="text-label text-red-600 font-normal -mt-2">{emailError}</p>
+                  )}
+                  <button
+                    type="submit"
+                    disabled={status === "submitting"}
+                    className="w-full bg-brand rounded-sm px-7 py-[0.875rem] font-bold text-h4 text-text-primary text-left hover:bg-brand-hover active:scale-[0.97] transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base disabled:opacity-60 disabled:pointer-events-none"
                   >
-                    Datenschutzerklärung
-                  </Link>
-                  .
-                </span>
-              </label>
-            </form>
+                    {status === "submitting" ? "Wird gesendet…" : "Jetzt anmelden"}
+                  </button>
+                </div>
+                <label className="flex gap-2 items-center w-full cursor-pointer">
+                  <input
+                    type="checkbox"
+                    required
+                    checked={consent}
+                    onChange={(e) => setConsent(e.target.checked)}
+                    className="size-4 shrink-0 rounded-xs border border-border accent-brand"
+                  />
+                  <span className="text-label text-text-primary">
+                    Ich akzeptiere die{" "}
+                    <Link
+                      href="/datenschutz"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="underline hover:text-brand"
+                    >
+                      Datenschutzerklärung
+                    </Link>
+                    .
+                  </span>
+                </label>
+                {status === "error" && (
+                  <p className="text-label text-red-600 font-normal">{error}</p>
+                )}
+              </form>
+            )}
           </div>
         </div>
 

app/components/ProductSpotlight.tsx

@@ -2,7 +2,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { AddToCartButton } from "./AddToCartButton";
 import { Reveal } from "./Reveal";
-import { getSpotlightProduct, getShippingSettings, getDefaultTaxRatePercent } from "../lib/payload";
+import { getSpotlightProduct, getShippingSettings, getDefaultTaxRatePercent, getKleinunternehmer } from "../lib/payload";
 import { formatPrice, discountPercent } from "../lib/format";
 import { effectiveTaxRate } from "../lib/cartTotals";
 
@@ -23,10 +23,11 @@ import { effectiveTaxRate } from "../lib/cartTotals";
  * see Products.ts), not duplicated here as hardcoded literals.
  */
 export async function ProductSpotlight() {
-  const [product, shipping, defaultTaxRate] = await Promise.all([
+  const [product, shipping, defaultTaxRate, kleinunternehmer] = await Promise.all([
     getSpotlightProduct(),
     getShippingSettings(),
     getDefaultTaxRatePercent(),
+    getKleinunternehmer(),
   ]);
   if (!product) return null;
 
@@ -55,14 +56,10 @@ export async function ProductSpotlight() {
             <span className="absolute top-3 left-3 rounded-full bg-text-muted px-2.5 py-1 text-label font-bold text-bg-base">
               Ausverkauft
             </span>
-          ) : discount !== null ? (
-            <span className="absolute top-3 left-3 rounded-full bg-brand px-2.5 py-1 text-label font-bold text-text-primary">
-              -{discount}%
-            </span>
           ) : (
-            anyLowStock && (
-              <span className="absolute top-3 left-3 rounded-full bg-warning px-2.5 py-1 text-label font-bold text-text-on-dark">
-                Nur noch wenige verfügbar
+            discount !== null && (
+              <span className="absolute top-3 left-3 rounded-full bg-brand px-2.5 py-1 text-label font-bold text-text-primary">
+                -{discount}%
               </span>
             )
           )}
@@ -79,18 +76,25 @@ export async function ProductSpotlight() {
           <p className="text-body text-text-body">
             {product.spotlightText || product.description}
           </p>
+          {/* MwSt./Versand disclosure on its own line, not crammed into
+              the price row itself — same reasoning as todo-cards'
+              Pricing.tsx (identical text, same narrow-column risk). */}
           <div className="flex flex-col gap-1 items-start">
             <div className="flex gap-2 items-baseline">
               {discount !== null && (
                 <p className="text-body text-text-muted line-through">{formatPrice(product.compareAtPrice!)}</p>
               )}
               <p className="font-bold text-h3 text-text-primary">{formatPrice(product.price)}</p>
-              <p className="text-label text-text-muted">inkl. {taxRate}% MwSt. zzgl. Versand</p>
             </div>
+            <p className="text-label text-text-muted">{kleinunternehmer ? "zzgl. Versand" : `inkl. ${taxRate}% MwSt. zzgl. Versand`}</p>
             <p className="text-label text-text-muted">
               Lieferzeit: {shipping.totalDays.min}–{shipping.totalDays.max} Werktage innerhalb Deutschlands
             </p>
           </div>
+          {/* Single product, no grid siblings to stay equal-height with
+              (unlike ProductGrid.tsx/RelatedProducts.tsx), so this can be
+              a plain conditional line instead of a reserved-height slot. */}
+          {anyLowStock && <p className="text-label font-bold text-warning">Nur noch wenige verfügbar</p>}
           {/* items-start at sm: — without it, the default cross-axis
               stretch makes "Mehr erfahren" grow to match
               AddToCartButton's own height whenever that one gets taller
@@ -102,7 +106,7 @@ export async function ProductSpotlight() {
                 (matches Tools/Blog above/below), same as AddToCartButton's
                 own default styling/ring-offset, so no override is needed
                 here. */}
-            <AddToCartButton label="In den Warenkorb" productId={product.id} outOfStock={product.outOfStock} variants={product.variants} />
+            <AddToCartButton label="In den Warenkorb" productId={product.id} outOfStock={product.outOfStock} maxQty={product.maxQty} variants={product.variants} />
             {product.href && (
               <Link
                 href={product.href}

app/components/Reveal.tsx

@@ -3,9 +3,14 @@
 import { motion, type Variants } from "motion/react";
 import type { CSSProperties, ReactNode } from "react";
 
-const fadeUp: Variants = {
-  hidden: { opacity: 0, y: 28 },
-  show: { opacity: 1, y: 0, transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] } },
+// Plain fade, no y-translate — fixed 2026-07-24. Used to animate opacity
+// 0→1 *and* y 28→0 together ("fade up"), which read as the whole section
+// visibly hopping/jumping into place on top of the fade — one motion cue
+// too many. The fade alone is already a clear enough "this just appeared"
+// signal without the extra jump.
+const fadeIn: Variants = {
+  hidden: { opacity: 0 },
+  show: { opacity: 1, transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] } },
 };
 
 type RevealProps = {
@@ -16,7 +21,7 @@ type RevealProps = {
   delay?: number;
 };
 
-/** Fades a section up into place once, the first time it scrolls into view. */
+/** Fades a section into view once, the first time it scrolls into view. */
 export function Reveal({ children, className, style, delay = 0 }: RevealProps) {
   return (
     <motion.div
@@ -25,7 +30,7 @@ export function Reveal({ children, className, style, delay = 0 }: RevealProps) {
       initial="hidden"
       whileInView="show"
       viewport={{ once: true, margin: "-80px" }}
-      variants={fadeUp}
+      variants={fadeIn}
       transition={{ delay }}
     >
       {children}
@@ -53,10 +58,10 @@ export function RevealGroup({ children, className }: { children: ReactNode; clas
   );
 }
 
-/** Child item for use inside a RevealGroup — same fade-up motion, driven by the parent's stagger. */
+/** Child item for use inside a RevealGroup — same fade motion, driven by the parent's stagger. */
 export function RevealItem({ children, className }: { children: ReactNode; className?: string }) {
   return (
-    <motion.div className={className} variants={fadeUp}>
+    <motion.div className={className} variants={fadeIn}>
       {children}
     </motion.div>
   );
@@ -115,8 +120,17 @@ export function PopIn({ children, className, delay = 0 }: RevealProps) {
     <motion.span
       className={className}
       initial="hidden"
-      whileInView="show"
-      viewport={{ once: true, margin: "-80px" }}
+      // animate, not whileInView — its only caller (Hero.tsx's brand dot)
+      // sits above the fold, already visible on load, so there's no real
+      // "scrolls into view" moment to gate on. whileInView's -80px viewport
+      // margin also broke on some phones: the popIn variant's own "hidden"
+      // state translates x:+140, and on a narrow mobile viewport that could
+      // push the dot's pre-animation bounding box past the right edge —
+      // IntersectionObserver then never reports it as visible, so
+      // whileInView never fires and the dot stays stuck off-screen
+      // (reported 2026-07-24: dot invisible on a real phone). Firing on
+      // mount sidesteps that geometry entirely.
+      animate="show"
       variants={popIn}
       transition={{ delay }}
     >

app/components/RichText.tsx

@@ -1,31 +1,24 @@
-import type { ReactNode } from "react";
+import Image from "next/image";
+import { RichText as LexicalRichText, type JSXConvertersFunction } from "@payloadcms/richtext-lexical/react";
 import type { TOCSection } from "./SectionTOC";
 import { QuoteLabel } from "./QuoteLabel";
 
-// Minimal Lexical JSON → JSX renderer for Payload's richText fields.
-// Deliberately small and dependency-free (matches the project's existing
-// style — see Posts.ts's own hand-rolled extractPlainText on the Payload
-// side) rather than pulling in @payloadcms/richtext-lexical's full React
-// renderer just to walk a legal page's headings/paragraphs/lists. Covers
-// the node types real content actually uses; add more only when a page
-// genuinely needs them.
+// Switched 2026-07-24 from a small hand-rolled Lexical JSON->JSX walker to
+// Payload's own official React renderer + custom JSXConverters — needed
+// once Posts.content gained custom Lexical Blocks (Bild/Bildergalerie/
+// Video/Zitat, see payload/src/collections/Posts.ts), which the old
+// hand-rolled switch had no case for at all. extractHeadings()/headingId()
+// below are kept as an independent, minimal walk over the raw JSON (same
+// as before) — they only ever need to find h2 headings for SectionTOC and
+// never touch Blocks, no reason to route that through the new renderer too.
 
 type LexicalNode = {
   type: string;
   children?: LexicalNode[];
   text?: string;
-  format?: number;
   tag?: string;
-  listType?: "bullet" | "number";
-  fields?: { url?: string };
 };
 
-// Lexical's text format is a bitmask — see TextFormatType in the Lexical
-// source (IS_BOLD = 1, IS_ITALIC = 2, IS_UNDERLINE = 8).
-const BOLD = 1;
-const ITALIC = 2;
-const UNDERLINE = 8;
-
 function plainText(node: LexicalNode): string {
   if (node.type === "text") return node.text ?? "";
   return (node.children ?? []).map(plainText).join("");
@@ -35,7 +28,13 @@ function plainText(node: LexicalNode): string {
 // "section-1" id from the leading number — immune to copy edits changing
 // the heading text later, unlike a text-derived slug. Anything else
 // (headings with no leading number) falls back to a plain slugify.
-function headingId(text: string): string {
+// Exported — the Impressum page renders some of its own headings outside
+// this CMS-driven richText (the "Angaben zum Anbieter"/"Umsatzsteuer"/
+// "Verantwortlich für den Inhalt" sections come straight from
+// company-settings, not the richText field, see app/impressum/page.tsx)
+// and needs the exact same id-assignment logic so its SectionTOC entries
+// actually match the ids those headings render with.
+export function headingId(text: string): string {
   const numbered = text.match(/^(\d+)\./);
   if (numbered) return `section-${numbered[1]}`;
   return text
@@ -64,114 +63,185 @@ export function extractHeadings(content: unknown): TOCSection[] {
   return headings;
 }
 
-function renderChildren(nodes: LexicalNode[] | undefined, keyPrefix: string, quoteLabel: string): ReactNode {
-  if (!nodes) return null;
-  return nodes.map((node, i) => renderNode(node, `${keyPrefix}-${i}`, quoteLabel));
+// Payload upload relations resolve to the full media doc when fetched at
+// sufficient depth (every richText-consuming fetch in app/lib/payload.ts
+// already uses depth >= 2), or fall back to a bare id if not — only
+// render when actually populated.
+type MediaRef = { url?: string | null } | number | null | undefined;
+function mediaUrl(ref: MediaRef): string | null {
+  if (ref && typeof ref === "object" && typeof ref.url === "string") return ref.url;
+  return null;
 }
 
-function renderNode(node: LexicalNode, key: string, quoteLabel: string): ReactNode {
-  switch (node.type) {
-    case "linebreak":
-      return <br key={key} />;
-    case "text": {
-      let el: ReactNode = node.text;
-      const format = node.format ?? 0;
-      if (format & BOLD) el = <strong key={key}>{el}</strong>;
-      if (format & ITALIC) el = <em key={key}>{el}</em>;
-      if (format & UNDERLINE) el = <u key={key}>{el}</u>;
-      return <span key={key}>{el}</span>;
-    }
-    case "link":
-      return (
-        <a
-          key={key}
-          href={node.fields?.url ?? "#"}
-          className="text-brand hover:underline"
-        >
-          {renderChildren(node.children, key, quoteLabel)}
-        </a>
-      );
-    case "heading": {
-      const Tag = (node.tag ?? "h2") as "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-      const text = plainText(node);
+// Naive YouTube/Vimeo URL -> embed URL. Not exhaustive (no playlist/short-
+// link edge cases) — good enough for a "paste a link" editor field; a
+// URL that doesn't match either pattern just doesn't render rather than
+// guessing wrong.
+function toEmbedUrl(url: string): string | null {
+  const youtube = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([\w-]{6,})/);
+  if (youtube) return `https://www.youtube.com/embed/${youtube[1]}`;
+  const vimeo = url.match(/vimeo\.com\/(\d+)/);
+  if (vimeo) return `https://player.vimeo.com/video/${vimeo[1]}`;
+  return null;
+}
+
+type ImageBlockFields = { image: MediaRef; caption?: string | null };
+type ImageGalleryBlockFields = { images: { image: MediaRef; caption?: string | null }[] };
+type VideoEmbedBlockFields = { url: string; caption?: string | null };
+type QuoteBlockFields = { text: string; label?: string | null };
+
+function BlockCaption({ caption }: { caption?: string | null }) {
+  if (!caption) return null;
+  return <p className="text-body-sm text-text-muted text-center">{caption}</p>;
+}
+
+// Same visual treatment as the QuoteBlock converter below (and the native
+// blockquote case it replaces going forward) — see that converter's own
+// comment for why both still exist.
+function Quote({ label, children }: { label?: string; children: React.ReactNode }) {
+  return (
+    <div className="relative flex items-start gap-6 w-full my-6">
+      {/* Label/icon/underline are optional — if empty, only the divider +
+          quote text render. The quote itself is never optional, just this
+          framing around it. */}
+      {label && <QuoteLabel label={label} />}
+      <div className="w-px self-stretch bg-brand shrink-0" />
+      <p
+        className="text-text-primary text-[1.75rem] leading-[1.1] flex-1"
+        style={{ fontFamily: "var(--font-caveat)" }}
+      >
+        {children}
+      </p>
+    </div>
+  );
+}
+
+// A factory, not a module-level constant — needs to close over each
+// call's own `quoteLabel` (the native "quote" converter reads it). Server
+// Components can render multiple posts concurrently in the same process,
+// so a shared module-level variable set right before rendering would be
+// a real race condition, not just a style choice.
+function buildConverters(quoteLabel: string): JSXConvertersFunction {
+  return ({ defaultConverters }) => ({
+    ...defaultConverters,
+    paragraph: ({ node, nodesToJSX }) => (
+      <p className="text-body text-text-body">{nodesToJSX({ nodes: node.children })}</p>
+    ),
+    heading: ({ node, nodesToJSX }) => {
+      const Tag = node.tag as "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+      const text = plainText(node as unknown as LexicalNode);
       return (
         <Tag
-          key={key}
           id={Tag === "h2" ? headingId(text) : undefined}
           className="font-semibold text-h-small text-text-primary mt-2 scroll-mt-32 first:mt-0"
           style={{ fontFamily: "var(--font-lora)" }}
         >
-          {renderChildren(node.children, key, quoteLabel)}
+          {nodesToJSX({ nodes: node.children })}
           <span className="block h-[0.125rem] w-8 bg-brand mt-2" aria-hidden />
         </Tag>
       );
-    }
-    case "list": {
+    },
+    list: ({ node, nodesToJSX }) => {
       const ListTag = node.listType === "number" ? "ol" : "ul";
       return (
         <ListTag
-          key={key}
           className={
             "flex flex-col gap-2 text-body text-text-body " +
             (node.listType === "number" ? "list-decimal pl-5" : "list-disc pl-5")
           }
         >
-          {renderChildren(node.children, key, quoteLabel)}
+          {nodesToJSX({ nodes: node.children })}
         </ListTag>
       );
-    }
-    case "listitem":
-      return (
-        <li key={key}>{renderChildren(node.children, key, quoteLabel)}</li>
-      );
-    case "paragraph":
-      return (
-        <p key={key} className="text-body text-text-body">
-          {renderChildren(node.children, key, quoteLabel)}
-        </p>
-      );
-    // Lexical's default blockquote feature — used sitewide as a "Merke
-    // dir:" pull-quote callout, per page-blog-detail's actual built Figma
-    // frame (node 4676:341, file jCCZyh1DGwdjpv1wGge9To) — NOT a bordered/
-    // background card (an earlier version of this guessed one; the real
-    // design has no background or padding at all, just a plain 3-column
-    // row: label+underline, a full-height divider rule, then the quote
-    // lines). Icon is the actual exported sparkle asset from that node
-    // (icon-sparkle-merke-dir.png), not a hand-drawn approximation. The
-    // "Merke dir:" label itself is generic/hardcoded here rather than
-    // content-authored, since a blog post's own body text drives which
-    // lines get quoted, not the label framing them — legal pages never
-    // use blockquotes, so this styling is effectively blog-only in
-    // practice despite living in the shared renderer.
-    case "quote":
-      return (
-        <div key={key} className="relative flex items-start gap-6 w-full my-6">
-          {/* Label/icon/underline are optional (Posts.quoteLabel) — if
-              empty, only the divider + quote text render. The blockquote
-              itself is never optional, just this framing around it. */}
-          {quoteLabel && <QuoteLabel label={quoteLabel} />}
-          <div className="w-px self-stretch bg-brand shrink-0" />
-          {/* Lexical's real QuoteNode holds flat text/linebreak children
-              directly, NOT nested paragraphs — pressing Enter inside a
-              blockquote in the editor exits it into a new paragraph
-              rather than adding a line within it (confirmed by reading
-              @lexical/rich-text's QuoteNode.insertNewAfter). An earlier
-              version of this case assumed nested-paragraph children,
-              which only happened to work for this session's own
-              hand-authored seed JSON — any blockquote actually typed in
-              the CMS (Shift+Enter for a soft line break) rendered blank,
-              since child.children was undefined on a plain text node. */}
-          <p
-            className="text-text-primary text-[1.75rem] leading-[1.1] flex-1"
-            style={{ fontFamily: "var(--font-caveat)" }}
-          >
-            {renderChildren(node.children, key, quoteLabel)}
-          </p>
-        </div>
-      );
-    default:
-      return renderChildren(node.children, key, quoteLabel);
-  }
+    },
+    listitem: ({ node, nodesToJSX }) => <li>{nodesToJSX({ nodes: node.children })}</li>,
+    link: ({ node, nodesToJSX }) => (
+      <a href={node.fields?.url ?? "#"} className="text-brand hover:underline">
+        {nodesToJSX({ nodes: node.children })}
+      </a>
+    ),
+    // Lexical's native blockquote feature — used by every post written
+    // before Blocks existed. Kept working exactly as before (own comment on
+    // Posts.ts's `content` field editor config on why this stays enabled
+    // alongside the new QuoteBlock) rather than migrating old content.
+    quote: ({ node, nodesToJSX }) => (
+      <Quote label={quoteLabel}>{nodesToJSX({ nodes: node.children })}</Quote>
+    ),
+    blocks: {
+      image: ({ node }: { node: { fields: unknown } }) => {
+        const fields = node.fields as ImageBlockFields;
+        const url = mediaUrl(fields.image);
+        if (!url) return null;
+        return (
+          <div className="flex flex-col gap-2 w-full">
+            <div className="relative w-full aspect-[3/2] rounded-md overflow-hidden bg-bg-muted">
+              <Image alt="" src={url} fill sizes="(min-width: 768px) 48rem, 100vw" className="object-cover" />
+            </div>
+            <BlockCaption caption={fields.caption} />
+          </div>
+        );
+      },
+      imageGallery: ({ node }: { node: { fields: unknown } }) => {
+        const fields = node.fields as ImageGalleryBlockFields;
+        const images = (fields.images ?? []).filter((row) => mediaUrl(row.image));
+        if (images.length === 0) return null;
+        return (
+          <div className="grid grid-cols-2 gap-4 w-full">
+            {images.map((row, i) => (
+              <div key={i} className="flex flex-col gap-2">
+                <div className="relative aspect-[4/3] rounded-md overflow-hidden bg-bg-muted">
+                  <Image
+                    alt=""
+                    src={mediaUrl(row.image)!}
+                    fill
+                    sizes="(min-width: 768px) 24rem, 50vw"
+                    className="object-cover"
+                  />
+                </div>
+                <BlockCaption caption={row.caption} />
+              </div>
+            ))}
+          </div>
+        );
+      },
+      videoEmbed: ({ node }: { node: { fields: unknown } }) => {
+        const fields = node.fields as VideoEmbedBlockFields;
+        const embedUrl = toEmbedUrl(fields.url);
+        if (!embedUrl) return null;
+        return (
+          <div className="flex flex-col gap-2 w-full">
+            <div className="relative w-full aspect-video rounded-md overflow-hidden bg-bg-muted">
+              <iframe
+                src={embedUrl}
+                title={fields.caption ?? "Video"}
+                className="absolute inset-0 h-full w-full"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowFullScreen
+              />
+            </div>
+            <BlockCaption caption={fields.caption} />
+          </div>
+        );
+      },
+      // Per-quote label, unlike Posts.quoteLabel above (one label shared by
+      // every native blockquote in the post) — new quotes going forward use
+      // this instead of the native blockquote feature.
+      quote: ({ node }: { node: { fields: unknown } }) => {
+        const fields = node.fields as QuoteBlockFields;
+        const lines = fields.text.split("\n");
+        return (
+          <Quote label={fields.label ?? undefined}>
+            {lines.map((line, i) => (
+              <span key={i}>
+                {line}
+                {i < lines.length - 1 && <br />}
+              </span>
+            ))}
+          </Quote>
+        );
+      },
+    },
+  });
 }
 
 export function RichText({
@@ -179,18 +249,23 @@ export function RichText({
   quoteLabel = "Merke dir:",
 }: {
   content: unknown;
-  /** Label for any blockquote's callout (see the "quote" case above) —
-   * defaults to "Merke dir:" for callers that don't pass one (legal pages
-   * never use blockquotes, so this only actually matters for blog posts).
-   * Pass "" to hide the label/icon/underline for every blockquote here. */
+  /** Label for any native blockquote's callout — defaults to "Merke dir:"
+   * for callers that don't pass one (legal pages never use blockquotes,
+   * so this only actually matters for blog posts). Pass "" to hide the
+   * label/icon/underline for every native blockquote here. New content
+   * should use the Zitat block instead, which carries its own label. */
   quoteLabel?: string;
 }) {
-  const root = (content as { root?: LexicalNode })?.root;
+  const root = (content as { root?: { children?: unknown[] } })?.root;
   if (!root?.children) return null;
 
   return (
     <div className="flex flex-col gap-4 w-full">
-      {renderChildren(root.children, "root", quoteLabel)}
+      <LexicalRichText
+        data={content as Parameters<typeof LexicalRichText>[0]["data"]}
+        converters={buildConverters(quoteLabel)}
+        disableContainer
+      />
     </div>
   );
 }

app/components/SectionTOC.tsx

@@ -10,24 +10,12 @@ export type TOCSection = { id: string; title: string };
 // active state away from what was actually clicked.
 const CLICK_OVERRIDE_MS = 1000;
 
-// lg:-only sidebar — same "wide fixed-width block next to content" shape
-// as the cart's order-summary sidebar (see figma-to-nextjs skill Gotcha
-// #5): a 360px TOC card plus a readable content column already exceeds
-// the 768px Tablet floor, so md: wouldn't leave room for a real 2-column
-// split at Tablet widths.
-//
-// Generic over `sections` — originally written just for /versand
-// (VersandTOC), generalized once /datenschutz needed the identical
-// scroll-spy sidebar but driven by CMS-authored headings instead of a
-// hardcoded array. Any future long legal/content page reuses this too.
-//
-// Not sticky itself — Impressum/Datenschutz put an extra card below this
-// in the same sidebar column, and if only this <nav> were sticky, the
-// card (a plain-flow sibling) would scroll away independently instead of
-// travelling with it. The caller wraps whatever the sidebar column
-// contains (this alone, or this + more) in `lg:sticky lg:top-32
-// lg:self-start` so the whole column moves as one unit.
-export function SectionTOC({ sections }: { sections: TOCSection[] }) {
+// Shared between SectionTOC (desktop sidebar nav) and MobileSectionTOC
+// (below lg: collapsible accordion, added 2026-07-24) — both need the same
+// scroll-spy "active" state and click-override handling, just render it
+// completely differently, so the logic lives here once instead of being
+// duplicated per component.
+function useActiveSection(sections: TOCSection[]) {
   const [active, setActive] = useState<string>(sections[0]?.id ?? "");
   // Not state — read inside the IntersectionObserver callback without
   // needing to re-subscribe it on every click, and cleared by its own
@@ -67,6 +55,28 @@ export function SectionTOC({ sections }: { sections: TOCSection[] }) {
     }, CLICK_OVERRIDE_MS);
   }
 
+  return { active, handleClick };
+}
+
+// lg:-only sidebar — same "wide fixed-width block next to content" shape
+// as the cart's order-summary sidebar (see figma-to-nextjs skill Gotcha
+// #5): a 360px TOC card plus a readable content column already exceeds
+// the 768px Tablet floor, so md: wouldn't leave room for a real 2-column
+// split at Tablet widths.
+//
+// Generic over `sections` — originally written just for /versand
+// (VersandTOC), generalized once /datenschutz needed the identical
+// scroll-spy sidebar but driven by CMS-authored headings instead of a
+// hardcoded array. Any future long legal/content page reuses this too.
+//
+// Not sticky itself — every caller wraps this in its own `hidden lg:flex
+// ... lg:sticky lg:top-32 lg:self-start` div (Impressum/Datenschutz also
+// stack a second "Nachhaltigkeit" card below this in that same wrapper, so
+// the sticky behavior has to live on the wrapper for the two to travel
+// together as one unit — putting it on this <nav> instead would leave
+// that card behind as a plain-flow sibling scrolling past a now-fixed nav).
+export function SectionTOC({ sections }: { sections: TOCSection[] }) {
+  const { active, handleClick } = useActiveSection(sections);
   if (sections.length === 0) return null;
 
   return (
@@ -92,3 +102,44 @@ export function SectionTOC({ sections }: { sections: TOCSection[] }) {
     </nav>
   );
 }
+
+// Below lg: only — a collapsible accordion instead of the sidebar nav
+// (which is `hidden` entirely below lg:, see SectionTOC's own comment on
+// why a real 2-column split doesn't fit there). Added 2026-07-24: these
+// legal pages had no on-page navigation aid at all on Mobile/Tablet, which
+// is exactly where scanning a long legal document by scrolling is hardest.
+// Native <details>/<summary> — no extra open/close state needed, and it
+// stays open after a click so jumping between sections doesn't require
+// reopening it each time. Render this as its own element in the page
+// (typically right after the heading, before the two-column content row),
+// not nested inside a parent that's itself `hidden lg:...` — that would
+// hide this too regardless of its own lg:hidden class.
+export function MobileSectionTOC({ sections }: { sections: TOCSection[] }) {
+  const { active, handleClick } = useActiveSection(sections);
+  if (sections.length === 0) return null;
+
+  return (
+    <details className="lg:hidden w-full bg-bg-base border border-border rounded-md p-4 open:pb-2">
+      <summary className="text-label font-semibold text-text-muted uppercase tracking-wide cursor-pointer select-none">
+        Inhaltsübersicht
+      </summary>
+      <div className="flex flex-col gap-1 mt-3">
+        {sections.map(({ id, title }) => (
+          <a
+            key={id}
+            href={`#${id}`}
+            onClick={() => handleClick(id)}
+            className={
+              "px-3 py-2 rounded-sm text-body-sm transition-colors border-l-2 " +
+              (active === id
+                ? "border-toc-active-border bg-bg-muted text-text-primary font-semibold"
+                : "border-transparent text-text-muted hover:text-text-primary")
+            }
+          >
+            {title}
+          </a>
+        ))}
+      </div>
+    </details>
+  );
+}

app/components/StepArrow.tsx

@@ -0,0 +1,26 @@
+// Shared "how it works" step connector — used by Challenge's, /todo-cards's,
+// and /newsletter's ("Impulse & Tipps") step sections. Used to be
+// /icon-arrow-connector.svg (a thin gray line+chevron) loaded via next/image;
+// replaced 2026-07-24 for two reasons that both needed an inline SVG to fix:
+// 1. It read as a faint gray line, not a real arrow, even after the
+//    object-contain aspect-ratio fix — too thin/subtle at these sizes.
+// 2. Its color lives in a `var(--stroke-0, #C9C9C9)` CSS custom property
+//    that's scoped to the SVG file's own document when loaded via <img
+//    src>/next/image — un-recolorable from the host page's CSS. Inline SVG
+//    sidesteps that entirely. Stroke color: tried brand orange, then
+//    near-black, settled on the same light gray (#C9C9C9) the original
+//    asset's own fallback used, per feedback the same day — just bolder
+//    (strokeWidth 2.5 vs. the original's thin 1.5) and better-shaped.
+export function StepArrow({ className }: { className?: string }) {
+  return (
+    <svg width="40" height="16" viewBox="0 0 40 16" fill="none" aria-hidden="true" className={className}>
+      <path
+        d="M1 8H33M26 14.5L34.5 8L26 1.5"
+        stroke="#C9C9C9"
+        strokeWidth="2.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

app/components/Tools.tsx

@@ -38,9 +38,17 @@ export async function Tools() {
             key={tool.id}
             className="md:col-span-4 flex gap-8 items-start rounded-md transition-transform duration-300 hover:-translate-y-1"
           >
-            {/* Icon — uniform box, pre-flipped/rotated source asset */}
-            <div className="relative flex items-center justify-center shrink-0 size-14">
-              <Image alt="" src={tool.icon} fill sizes="56px" className="object-contain" />
+            {/* Icon — uniform box, pre-flipped/rotated source asset.
+                size-14 (56px) is a fixed value at every width (14 isn't
+                one of this project's fluid spacing-scale steps) — smaller
+                below md: so it doesn't dwarf the title/description text,
+                which does shrink toward its own fluid floor there. Full
+                56px only from lg: up — at md: (Tablet, where this grid
+                already switches to 3-up) the title/description are still
+                fairly close to their own fluid floor, so the full-size
+                icon read as too big next to them too. */}
+            <div className="relative flex items-center justify-center shrink-0 size-11 lg:size-14">
+              <Image alt="" src={tool.icon} fill sizes="(min-width: 1024px) 56px, 44px" className="object-contain" />
             </div>
 
             {/* Card content — self-stretch + h-full + justify-between so
@@ -67,11 +75,18 @@ export async function Tools() {
                   {tool.description}
                 </p>
               </div>
+              {/* flex items-center + arrow as its own span, not inline text
+                  — the → glyph sits low relative to the surrounding text's
+                  cap-height in the font used here, off-center against the
+                  label if it's just part of the same text node (fixed
+                  2026-07-24, same pattern ProductGrid.tsx's "Mehr
+                  erfahren" link already uses). */}
               <Link
                 href={tool.ctaHref}
-                className="font-bold leading-normal text-body whitespace-nowrap hover:text-brand transition-colors"
+                className="flex items-center gap-1 font-bold leading-normal text-body whitespace-nowrap hover:text-brand transition-colors"
               >
-                → {tool.ctaLabel}
+                <span aria-hidden>→</span>
+                <span>{tool.ctaLabel}</span>
               </Link>
             </div>
           </RevealItem>

app/components/TrustRow.tsx

@@ -11,7 +11,7 @@ export async function TrustRow() {
   if (items.length === 0) return null;
 
   return (
-    <div className="w-full bg-bg-base flex flex-col md:flex-row gap-6 md:gap-12 items-center justify-center py-8 px-[var(--layout-padding-x)]">
+    <div className="w-full bg-bg-base flex flex-col md:flex-row gap-6 md:gap-12 items-start md:items-center justify-center py-8 px-[var(--layout-padding-x)]">
       {items.map((item, i) => (
         <div key={item.id} className="flex items-center gap-6 md:gap-12">
           {i > 0 && <div className="hidden md:block h-10 w-px bg-border" />}

app/components/VatBreakdown.tsx

@@ -1,36 +1,34 @@
 import { formatPrice } from "../lib/format";
-import type { TaxBreakdownGroup } from "../lib/taxBreakdown";
+import type { TaxBreakdownGroup } from "@einfach-produktiv/invoicing";
 
 // The actual amount of VAT included in a total — not just a disclosure
 // that VAT is included (see cartTotals.ts's effectiveTaxRate() for the
 // "which %" shown next to each line item elsewhere). One line per rate
-// when a cart/order spans more than one; a single line otherwise. Each
-// line is a flex row with a spacer (same "label, flex-1 spacer, value"
-// shape as every other Zwischensumme/Versand/Gesamtsumme row in the
-// sidebars this renders inside) so every € amount lands on the same
-// right-hand edge — a plain "X%: Y €" text line left the amount starting
-// wherever the rate's own digit count happened to end, visibly misaligned
-// as soon as two different rates (e.g. "7%" vs "19%") were both present.
+// when a cart/order spans more than one; a single line otherwise.
+//
+// Same row shape as the Gesamtsumme total line right above this
+// (`flex w-full` + a `flex-1` spacer): a label on the left, flush with
+// "Gesamtsumme", and the rate/amount pushed flush right so they land
+// directly under the total's own € amount — not tucked in right next to
+// the label. The rate itself gets a fixed-width right-aligned column
+// (`w-8`, `tabular-nums`) so a single-digit rate ("7%") still lines up
+// under a two-digit one ("19%") across rows instead of shifting the
+// amount that follows it. Only the first row carries the "enthält
+// MwSt.:" label; further rates repeat just the rate/amount pair.
 export function VatBreakdown({ groups }: { groups: TaxBreakdownGroup[] }) {
   if (groups.length === 0) return null;
-  if (groups.length === 1) {
-    const [g] = groups;
-    return (
-      <div className="flex items-center w-full">
-        <span className="text-label text-text-muted">enthält {g.rate}% MwSt.</span>
-        <span className="flex-1" />
-        <span className="text-label text-text-muted">{formatPrice(g.tax)}</span>
-      </div>
-    );
-  }
   return (
     <div className="flex flex-col gap-0.5 w-full">
-      <p className="text-label text-text-muted">enthält MwSt.:</p>
-      {groups.map((g) => (
-        <div key={g.rate} className="flex items-center w-full pl-2">
-          <span className="text-label text-text-muted">{g.rate}%</span>
+      {groups.map((g, i) => (
+        <div key={g.rate} className="flex items-baseline w-full">
+          <span className="text-label text-text-muted">
+            {groups.length === 1 ? `enthält ${g.rate}% MwSt.` : i === 0 ? "enthält MwSt.:" : ""}
+          </span>
           <span className="flex-1" />
-          <span className="text-label text-text-muted">{formatPrice(g.tax)}</span>
+          {groups.length > 1 && (
+            <span className="w-8 shrink-0 text-right text-label text-text-muted tabular-nums">{g.rate}%</span>
+          )}
+          <span className="ml-1.5 text-label text-text-muted tabular-nums">{formatPrice(g.tax)}</span>
         </div>
       ))}
     </div>

app/datenschutz/page.tsx

@@ -6,7 +6,7 @@ import { Reveal } from "../components/Reveal";
 import { Footer } from "../components/Footer";
 import { RichText, extractHeadings } from "../components/RichText";
 import { LiveRichText } from "../components/LiveRichText";
-import { SectionTOC } from "../components/SectionTOC";
+import { SectionTOC, MobileSectionTOC } from "../components/SectionTOC";
 import { getLegalPage } from "../lib/payload";
 
 export const metadata: Metadata = {
@@ -38,6 +38,13 @@ export default async function DatenschutzPage() {
           <p className="text-body text-text-muted">Stand: Juli 2026</p>
         </Reveal>
 
+        {/* MobileSectionTOC — below lg: only, see SectionTOC.tsx's own
+            comment. Outside the sidebar's `hidden lg:flex` wrapper below
+            (that wrapper's `hidden` would hide this too otherwise). */}
+        <div className="lg:hidden px-[var(--layout-padding-x)] pb-4 w-full">
+          <MobileSectionTOC sections={headings} />
+        </div>
+
         <div className="flex flex-col lg:flex-row gap-8 lg:gap-12 items-start pb-10 pt-2 px-[var(--layout-padding-x)] w-full">
           <div className="hidden lg:flex flex-col gap-6 w-[22.5rem] shrink-0 lg:sticky lg:top-32 lg:self-start">
             <SectionTOC sections={headings} />

app/globals.css

@@ -141,6 +141,35 @@
   --divider-sparkle-h: clamp(2.0625rem, 1.5554rem + 1.0565vw, 2.50625rem);
   --divider-sparkle-inner-w: clamp(1.4375rem, 1.09875rem + 0.706vw, 1.734rem);
   --divider-sparkle-inner-h: clamp(1.9375rem, 1.4375rem + 1.0417vw, 2.375rem);
+  /* Own token, mirrors --text-h2's clamp() exactly rather than the Word
+     component reading var(--text-h2) directly — that's what lets the
+     mobile override below shrink just this component's words without
+     touching every other text-h2 heading site-wide. */
+  --divider-word-size: clamp(1.625rem, 1.1964rem + 0.8929vw, 2rem);
+}
+
+/* This project's fluid() scale (see fluid.ts) is calibrated for the
+   768-1440px Tablet-Desktop range and floors out at the 768px value for
+   any narrower viewport (clamp()'s MIN bound) — by design, see the other
+   fluid tokens above. Divider is the one spot that floor doesn't work:
+   the "Klarheit → Fokus → Entlastung" phrase plus its connector icons
+   needs ~550px of width to lay out on one row even at the 768px floor
+   size, far more than a phone's ~310px content width. Below Tailwind's
+   sm: breakpoint, shrink these tokens further so the phrase gets much
+   closer to fitting on one row instead of stacking into three separate
+   centered lines (see Divider.tsx's gap-x-3/gap-3 mobile overrides,
+   same breakpoint). Scoped to these component-only tokens, not
+   --text-h2 itself. */
+@media (max-width: 639px) {
+  :root {
+    --divider-word-size: 1.125rem;
+    --divider-arrow-w: 1.125rem;
+    --divider-arrow-h: 0.3125rem;
+    --divider-sparkle-w: 0.875rem;
+    --divider-sparkle-h: 1.15rem;
+    --divider-sparkle-inner-w: 0.8rem;
+    --divider-sparkle-inner-h: 1.075rem;
+  }
 }
 
 html {

app/impressum/components/AnbieterAngaben.tsx

@@ -0,0 +1,124 @@
+import type { ReactNode } from "react";
+import { headingId } from "../../components/RichText";
+import type { CompanySettings } from "../../lib/payload";
+import type { TOCSection } from "../../components/SectionTOC";
+
+// Renders "Angaben zum Anbieter"/"Umsatzsteuer"/(conditionally)
+// "Handelsregister"/"Geschäftsführung"/"Verantwortlich für den Inhalt"
+// straight from company-settings, matching RichText.tsx's own heading/
+// paragraph classes so it reads as one continuous page with the CMS
+// content below it, not a bolted-on block. This used to be hand-typed
+// prose baked into the Impressum's richText (seed-legal-pages.ts on the
+// Payload side) — duplicated, and silently out of date the moment an
+// admin changed company-settings without also remembering to re-edit the
+// Impressum text by hand. Single-sourced here instead, same "structural/
+// brand elements in code, only pull the actual numbers/copy that need
+// single-sourcing from data" pattern this page's own Nachhaltigkeit card
+// already uses (see page.tsx's comment on that).
+//
+// Also closes a real compliance gap the old hand-typed text had: it never
+// showed Handelsregister/Geschäftsführung at all, even though
+// company-settings already models both (§37a HGB/§35a GmbHG) — those
+// fields just weren't wired into the Impressum. A sole proprietorship
+// (this shop's current legalForm) has neither, so neither section shows
+// today, but the moment that changes in company-settings, the Impressum
+// picks it up automatically instead of needing a second manual edit.
+//
+// A "Gesellschafter"/Komplementäre section for OHG/KG was attempted
+// 2026-07-23 but reverted the same day — the legal basis turned out
+// genuinely unclear on research (§125a HGB's Geschäftsbriefe-naming duty
+// only applies to the narrow case where *no* partner is a natural person,
+// not the general OHG/KG case; whether §5 DDG's Impressum-specific
+// "vertretungsberechtigte Person" requirement independently mandates it
+// wasn't resolved with confidence). Deliberately not modeled until that's
+// actually clarified — don't rebuild this without re-verifying the legal
+// basis first, and don't assume the old attempt's reasoning was correct.
+export function anbieterAngabenHeadings(seller: CompanySettings | null): TOCSection[] {
+  if (!seller) return [];
+  const sections = ["Angaben zum Anbieter", "Umsatzsteuer"];
+  if (seller.registerCourt && seller.registerNumber) sections.push("Handelsregister");
+  if (seller.managingDirector) sections.push("Geschäftsführung");
+  sections.push("Verantwortlich für den Inhalt");
+  return sections.map((title) => ({ id: headingId(title), title }));
+}
+
+function Heading({ children }: { children: string }) {
+  return (
+    <h2
+      id={headingId(children)}
+      className="font-semibold text-h-small text-text-primary mt-2 scroll-mt-32 first:mt-0"
+      style={{ fontFamily: "var(--font-lora)" }}
+    >
+      {children}
+      <span className="block h-[0.125rem] w-8 bg-brand mt-2" aria-hidden />
+    </h2>
+  );
+}
+
+function P({ children }: { children: ReactNode }) {
+  return <p className="text-body text-text-body">{children}</p>;
+}
+
+export function AnbieterAngaben({ seller }: { seller: CompanySettings }) {
+  return (
+    <div className="flex flex-col gap-4 w-full">
+      <Heading>Angaben zum Anbieter</Heading>
+      {/* gap-1, not the outer container's own gap-4 — these 5 lines are one
+          continuous address block, not 5 separate paragraphs; the large
+          inter-section gap only belongs between a heading's own block and
+          the next, not between lines that visually belong together
+          (fixed 2026-07-24, same fix applied to every block below). */}
+      <div className="flex flex-col gap-1">
+        <P>{seller.sellerName}</P>
+        <P>{seller.sellerStreet}</P>
+        <P>
+          {seller.sellerZip} {seller.sellerCity}
+        </P>
+        <P>{seller.sellerCountry}</P>
+        <P>E-Mail: {seller.sellerEmail}</P>
+      </div>
+
+      <Heading>Umsatzsteuer</Heading>
+      <div className="flex flex-col gap-1">
+        <P>Umsatzsteuer-Identifikationsnummer gemäß § 27 a Umsatzsteuergesetz:</P>
+        <P>{seller.vatId}</P>
+      </div>
+
+      {seller.registerCourt && seller.registerNumber && (
+        <>
+          <Heading>Handelsregister</Heading>
+          <div className="flex flex-col gap-1">
+            <P>{seller.registerCourt}</P>
+            <P>{seller.registerNumber}</P>
+            {/* Optional/voluntary, not a Pflichtangabe — see
+                CompanySettings.ts's own comment on shareCapital. Only shows
+                if an admin deliberately filled it in. */}
+            {seller.shareCapital ? <P>Stammkapital: {seller.shareCapital.toLocaleString("de-DE")} €</P> : null}
+          </div>
+        </>
+      )}
+
+      {seller.managingDirector && (
+        <>
+          <Heading>Geschäftsführung</Heading>
+          <P>{seller.managingDirector}</P>
+        </>
+      )}
+
+      <Heading>Verantwortlich für den Inhalt</Heading>
+      {/* §18 Abs. 2 MStV wants a natural person — managingDirector first
+          (Kapitalgesellschaften), falling back to sellerName itself (sole
+          proprietorship/e.K., already a natural person's own name). No
+          OHG/KG general-partner fallback here — see this file's top
+          comment on why that field doesn't exist yet. */}
+      <div className="flex flex-col gap-1">
+        <P>{seller.managingDirector || seller.sellerName}</P>
+        <P>{seller.sellerStreet}</P>
+        <P>
+          {seller.sellerZip} {seller.sellerCity}
+        </P>
+        <P>{seller.sellerCountry}</P>
+      </div>
+    </div>
+  );
+}

app/impressum/page.tsx

@@ -6,19 +6,23 @@ import { Reveal } from "../components/Reveal";
 import { Footer } from "../components/Footer";
 import { RichText, extractHeadings } from "../components/RichText";
 import { LiveRichText } from "../components/LiveRichText";
-import { SectionTOC } from "../components/SectionTOC";
-import { getLegalPage } from "../lib/payload";
+import { SectionTOC, MobileSectionTOC } from "../components/SectionTOC";
+import { getLegalPage, getCompanySettings } from "../lib/payload";
+import { AnbieterAngaben, anbieterAngabenHeadings } from "./components/AnbieterAngaben";
 
 export const metadata: Metadata = {
   title: "Impressum",
-  description: "Angaben gemäß § 5 TMG für einfach produktiv.",
+  description: "Angaben gemäß § 5 DDG für einfach produktiv.",
   alternates: { canonical: "/impressum" },
 };
 
 export default async function ImpressumPage() {
   const { isEnabled: isPreview } = await draftMode();
-  const page = await getLegalPage("impressum", { draft: isPreview });
-  const headings = page ? extractHeadings(page.content) : [];
+  const [page, seller] = await Promise.all([getLegalPage("impressum", { draft: isPreview }), getCompanySettings()]);
+  // Anbieter-Angaben headings first — that block renders above the CMS
+  // content below, so its TOC entries need to lead too, or the sidebar
+  // would list sections in a different order than they actually appear.
+  const headings = [...anbieterAngabenHeadings(seller), ...(page ? extractHeadings(page.content) : [])];
 
   return (
     <>
@@ -35,9 +39,16 @@ export default async function ImpressumPage() {
           >
             Impressum
           </p>
-          <p className="text-body text-text-muted">Angaben gemäß § 5 TMG</p>
+          <p className="text-body text-text-muted">Angaben gemäß § 5 DDG</p>
         </Reveal>
 
+        {/* MobileSectionTOC — below lg: only, see SectionTOC.tsx's own
+            comment. Outside the sidebar's `hidden lg:flex` wrapper below
+            (that wrapper's `hidden` would hide this too otherwise). */}
+        <div className="lg:hidden px-[var(--layout-padding-x)] pb-4 w-full">
+          <MobileSectionTOC sections={headings} />
+        </div>
+
         <div className="flex flex-col lg:flex-row gap-8 lg:gap-12 items-start pb-16 pt-2 px-[var(--layout-padding-x)] w-full">
           <div className="hidden lg:flex flex-col gap-6 w-[22.5rem] shrink-0 lg:sticky lg:top-32 lg:self-start">
             <SectionTOC sections={headings} />
@@ -66,7 +77,13 @@ export default async function ImpressumPage() {
             </div>
           </div>
 
-          <div className="w-full lg:flex-1 min-w-0">
+          <div className="w-full lg:flex-1 min-w-0 flex flex-col gap-8">
+            {/* Seller identity (name/address/USt-ID/Handelsregister/
+                Geschäftsführung) comes straight from company-settings, not
+                the CMS richText below — single-sourced so it can never
+                drift out of sync with the same data the invoice PDFs and
+                every email footer already use. See AnbieterAngaben.tsx. */}
+            {seller && <AnbieterAngaben seller={seller} />}
             {page ? (
               isPreview ? <LiveRichText initialContent={page.content} /> : <RichText content={page.content} />
             ) : (

app/konto/bestellungen/[orderNumber]/page.tsx

@@ -8,15 +8,25 @@ import { VatBreakdown } from "../../../components/VatBreakdown";
 import { formatPrice, formatDate } from "../../../lib/format";
 import { getSessionCustomer, getCustomerOrderDetail, customerOrderAction } from "../../../lib/customerAuth";
 import { getProductImagesByIds } from "../../../lib/payload";
-import { computeTaxBreakdown } from "../../../lib/taxBreakdown";
+import { computeTaxBreakdown } from "@einfach-produktiv/invoicing";
 import { buildTrackingUrl, CARRIER_LABELS } from "../../../lib/tracking";
 import { OrderActionButton } from "./components/OrderActionButton";
 import { OrderStatusBadge } from "../../components/OrderStatusBadge";
 
-export const metadata: Metadata = {
-  title: "Bestelldetails",
-  robots: { index: false, follow: true },
-};
+// Dynamic (was a static "Bestelldetails" title despite this being a
+// per-order route) — just formats the already-known order number into
+// the title, no extra fetch needed for a noindex account page.
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ orderNumber: string }>;
+}): Promise<Metadata> {
+  const { orderNumber } = await params;
+  return {
+    title: `Bestellung ${decodeURIComponent(orderNumber)}`,
+    robots: { index: false, follow: true },
+  };
+}
 
 export default async function KontoBestellungDetailPage({ params }: { params: Promise<{ orderNumber: string }> }) {
   const { orderNumber } = await params;
@@ -87,6 +97,9 @@ export default async function KontoBestellungDetailPage({ params }: { params: Pr
                 common case (no override) keeps the original "Lieferadresse"
                 label, since that's exactly what this address still is. */}
             <p className="text-label text-text-muted">{order.hasDifferentShippingAddress ? "Rechnungsadresse" : "Lieferadresse"}</p>
+            {order.companyName && (
+              <p className="text-body-sm text-text-primary">{order.companyName}</p>
+            )}
             <p className="text-body-sm text-text-primary">
               {order.customerFirstName} {order.customerLastName}
             </p>
@@ -94,6 +107,14 @@ export default async function KontoBestellungDetailPage({ params }: { params: Pr
             <p className="text-body-sm text-text-primary">
               {order.zip} {order.city}, {order.country}
             </p>
+            {order.vatId && (
+              <p className="text-body-sm text-text-muted">
+                USt-IdNr. {order.vatId}
+                {order.kleinunternehmer
+                  ? " · Kleinunternehmer gem. § 19 UStG"
+                  : order.vatExempt && " · steuerfreie innergemeinschaftliche Lieferung"}
+              </p>
+            )}
           </div>
 
           {order.hasDifferentShippingAddress && (
@@ -122,7 +143,7 @@ export default async function KontoBestellungDetailPage({ params }: { params: Pr
                     {item.quantity} × {item.productName}
                     {item.variantName ? ` (${item.variantName})` : ""}
                   </p>
-                  <p className="text-label text-text-muted">inkl. {item.taxRatePercent}% MwSt.</p>
+                  {!order.kleinunternehmer && <p className="text-label text-text-muted">inkl. {item.taxRatePercent}% MwSt.</p>}
                   {item.bundleContents && <p className="text-label text-text-muted">{item.bundleContents}</p>}
                   {item.returnQuantity > 0 && (
                     <p className="text-label text-text-muted">davon {item.returnQuantity} zurückgesendet</p>
@@ -165,7 +186,11 @@ export default async function KontoBestellungDetailPage({ params }: { params: Pr
                 <span className="flex-1" />
                 <span className="font-bold text-h-small text-text-primary">{formatPrice(order.total)}</span>
               </div>
-              <VatBreakdown groups={taxBreakdown} />
+              {order.kleinunternehmer ? (
+                <p className="text-label text-text-muted">Gemäß § 19 UStG wird keine Umsatzsteuer berechnet.</p>
+              ) : (
+                <VatBreakdown groups={taxBreakdown} />
+              )}
             </div>
           </div>
 

app/konto/bestellungen/page.tsx

@@ -1,20 +1,13 @@
 import type { Metadata } from "next";
 import { redirect } from "next/navigation";
 import Link from "next/link";
-import Image from "next/image";
 import { Reveal } from "../../components/Reveal";
 import { Footer } from "../../components/Footer";
 import { formatPrice, formatDate } from "../../lib/format";
 import { getSessionCustomer, getCustomerOrders } from "../../lib/customerAuth";
-import { getProductImagesByIds } from "../../lib/payload";
 import { OrderStatusBadge } from "../components/OrderStatusBadge";
 import { LogoutButton } from "../components/LogoutButton";
 
-// Caps how many of an order's items get a thumbnail before folding the
-// rest into a "+N" pill — a row here is one line in a list, not a full
-// receipt (that's the detail page), so it stays a glance-able preview.
-const MAX_THUMBNAILS = 4;
-
 // robots: noindex — account area, same reasoning as /checkout.
 export const metadata: Metadata = {
   title: "Meine Bestellungen",
@@ -30,7 +23,6 @@ export default async function KontoBestellungenPage() {
   if (!session) redirect("/konto/login");
 
   const orders = await getCustomerOrders(session.token, session.customer.id);
-  const imagesByProductId = await getProductImagesByIds(orders.flatMap((order) => order.productIds));
 
   return (
     <>
@@ -47,31 +39,12 @@ export default async function KontoBestellungenPage() {
             <p className="text-body text-text-muted">Du hast noch keine Bestellung aufgegeben.</p>
           ) : (
             <div className="flex flex-col gap-4 w-full">
-              {orders.map((order) => {
-                const thumbnails = order.productIds.slice(0, MAX_THUMBNAILS).map((id) => imagesByProductId.get(id));
-                const overflow = order.productIds.length - MAX_THUMBNAILS;
-                return (
+              {orders.map((order) => (
                 <Link
                   key={order.orderNumber}
                   href={`/konto/bestellungen/${encodeURIComponent(order.orderNumber)}`}
                   className="flex flex-wrap items-center gap-4 w-full bg-bg-base border border-border rounded-md p-6 hover:border-brand transition-colors"
                 >
-                  <div className="flex -space-x-2 shrink-0">
-                    {thumbnails.map((url, i) =>
-                      url ? (
-                        <div key={i} className="relative size-11 rounded-sm overflow-hidden border-2 border-bg-base">
-                          <Image src={url} alt="" fill sizes="44px" className="object-cover" />
-                        </div>
-                      ) : (
-                        <div key={i} className="size-11 rounded-sm bg-bg-muted border-2 border-bg-base" />
-                      ),
-                    )}
-                    {overflow > 0 && (
-                      <div className="relative size-11 rounded-sm border-2 border-bg-base bg-bg-muted flex items-center justify-center">
-                        <span className="text-label font-bold text-text-muted">+{overflow}</span>
-                      </div>
-                    )}
-                  </div>
                   <div className="flex flex-col gap-1">
                     <p className="text-label text-text-muted">Bestellnummer</p>
                     <p className="font-bold text-body-sm text-text-primary">{order.orderNumber}</p>
@@ -93,8 +66,7 @@ export default async function KontoBestellungenPage() {
                     <p className="font-bold text-body-sm text-text-primary">{formatPrice(order.total)}</p>
                   </div>
                 </Link>
-                );
-              })}
+              ))}
             </div>
           )}
 

app/konto/passwort-vergessen/page.tsx

@@ -4,6 +4,7 @@ import { Footer } from "../../components/Footer";
 
 export const metadata: Metadata = {
   title: "Passwort vergessen",
+  description: "Setze dein Passwort für dein einfach produktiv-Konto zurück.",
   robots: { index: false, follow: true },
 };
 

app/konto/passwort-zuruecksetzen/page.tsx

@@ -4,6 +4,7 @@ import { Footer } from "../../components/Footer";
 
 export const metadata: Metadata = {
   title: "Passwort zurücksetzen",
+  description: "Vergib ein neues Passwort für dein einfach produktiv-Konto.",
   robots: { index: false, follow: true },
 };
 

app/konto/profil/components/ProfileForm.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { Reveal } from "../../../components/Reveal";
 import type { CustomerProfile } from "../../../lib/customerAuth";
+import type { ShippingCountry } from "../../../lib/payload";
 
 const inputClass =
   "w-full border border-border rounded-sm px-4 py-3 text-body-sm text-text-primary outline-none focus:border-brand transition-colors";
@@ -21,7 +22,17 @@ function Field({
   );
 }
 
-export function ProfileForm({ profile }: { profile: CustomerProfile }) {
+export function ProfileForm({
+  profile,
+  shippingCountries,
+}: {
+  profile: CustomerProfile;
+  /** Same admin-configurable list /checkout's own "Land" <select> reads
+   * (Payload's shipping-countries collection) — this form used to hardcode
+   * its own Deutschland/Österreich/Schweiz options independently, so a
+   * country added/removed there never reached the profile page. */
+  shippingCountries: ShippingCountry[];
+}) {
   const router = useRouter();
   const [deliveryMethod, setDeliveryMethod] = useState<"address" | "packstation">(profile.deliveryMethod ?? "address");
   const [error, setError] = useState<string | null>(null);
@@ -45,6 +56,8 @@ export function ProfileForm({ profile }: { profile: CustomerProfile }) {
       zip: String(form.get("zip") ?? ""),
       city: String(form.get("city") ?? ""),
       country: String(form.get("country") ?? ""),
+      companyName: String(form.get("companyName") ?? "") || undefined,
+      vatId: String(form.get("vatId") ?? "") || undefined,
     };
 
     try {
@@ -83,6 +96,22 @@ export function ProfileForm({ profile }: { profile: CustomerProfile }) {
           <Field label="Nachname" name="lastName" type="text" defaultValue={profile.lastName} required />
         </div>
 
+        {/* Optional B2B fields — prefills /checkout's own Firma/USt-IdNr.
+            fields, same "profile default, order keeps its own snapshot"
+            split as the address fields below (see Customers.ts). */}
+        <div className="flex flex-col sm:flex-row gap-4 w-full">
+          <Field label="Firma (optional)" name="companyName" type="text" defaultValue={profile.companyName ?? ""} />
+          <Field
+            label="USt-IdNr. (optional)"
+            name="vatId"
+            type="text"
+            defaultValue={profile.vatId ?? ""}
+            placeholder="DE123456789"
+            pattern="[A-Za-z]{2}[A-Za-z0-9]{2,12}"
+            title="EU-Format: 2 Buchstaben Länderpräfix + bis zu 12 alphanumerische Zeichen, z. B. DE123456789."
+          />
+        </div>
+
         <div className="w-full flex flex-col gap-2 items-start">
           <span className="text-label text-text-muted">Lieferart</span>
           <div className="flex w-full max-w-sm rounded-sm border border-border overflow-hidden">
@@ -129,9 +158,9 @@ export function ProfileForm({ profile }: { profile: CustomerProfile }) {
         <label className="flex flex-col gap-2 items-start w-full sm:w-1/2">
           <span className="text-label text-text-muted">Land</span>
           <select name="country" defaultValue={profile.country ?? "Deutschland"} required className={`${inputClass} bg-bg-base`}>
-            <option>Deutschland</option>
-            <option>Österreich</option>
-            <option>Schweiz</option>
+            {shippingCountries.map((c) => (
+              <option key={c.name}>{c.name}</option>
+            ))}
           </select>
         </label>
 

app/konto/profil/page.tsx

@@ -3,6 +3,7 @@ import { redirect } from "next/navigation";
 import Link from "next/link";
 import { Footer } from "../../components/Footer";
 import { getSessionCustomer, getCustomerProfile } from "../../lib/customerAuth";
+import { getShippingCountries } from "../../lib/payload";
 import { ProfileForm } from "./components/ProfileForm";
 import { PasswordForm } from "./components/PasswordForm";
 import { VerificationBanner } from "./components/VerificationBanner";
@@ -10,6 +11,7 @@ import { AccountDataSection } from "./components/AccountDataSection";
 
 export const metadata: Metadata = {
   title: "Mein Profil",
+  description: "Verwalte deine Kontodaten und dein Passwort bei einfach produktiv.",
   robots: { index: false, follow: true },
 };
 
@@ -21,7 +23,7 @@ export default async function KontoProfilPage({
   const session = await getSessionCustomer();
   if (!session) redirect("/konto/login");
 
-  const profile = await getCustomerProfile(session.token);
+  const [profile, shippingCountries] = await Promise.all([getCustomerProfile(session.token), getShippingCountries()]);
   if (!profile) redirect("/konto/login");
 
   const { verified } = await searchParams;
@@ -34,7 +36,7 @@ export default async function KontoProfilPage({
             ← Meine Bestellungen
           </Link>
           <VerificationBanner emailVerified={profile.emailVerified} justVerified={verified === "1" || verified === "0" ? verified : undefined} />
-          <ProfileForm profile={profile} />
+          <ProfileForm profile={profile} shippingCountries={shippingCountries} />
           <PasswordForm email={profile.email} />
           <AccountDataSection />
         </div>

app/layout.tsx

@@ -4,7 +4,7 @@ import "./globals.css";
 import { Navbar } from "./components/Navbar";
 import { CartFlyProvider } from "./components/CartFly";
 import { CartSync } from "./components/CartSync";
-import { getProducts } from "./lib/payload";
+import { getProducts, getSeoSettings } from "./lib/payload";
 
 const inter = Inter({
   variable: "--font-inter",
@@ -30,22 +30,32 @@ const lora = Lora({
   weight: ["400", "600"],
 });
 
-export const metadata: Metadata = {
-  metadataBase: new URL("https://einfach-produktiv.mk360.de"),
-  title: {
-    default: "einfach produktiv. – Werkzeuge und Impulse für einen leichteren Alltag",
-    template: "%s | einfach produktiv.",
-  },
-  description: "Werkzeuge, Impulse und ein Blog für mehr Klarheit im Alltag.",
-  openGraph: {
-    siteName: "einfach produktiv.",
-    locale: "de_DE",
-    type: "website",
-  },
-  twitter: {
-    card: "summary_large_image",
-  },
-};
+// Backend-driven since 2026-07-24 (CompanySettings' "SEO" tab) — the
+// literal strings below are only the fallback getSeoSettings() returns if
+// that field is empty or unreachable, kept identical to what used to be
+// hardcoded here so nothing changes until an admin actually fills in the
+// new fields.
+export async function generateMetadata(): Promise<Metadata> {
+  const seo = await getSeoSettings();
+  return {
+    metadataBase: new URL("https://einfach-produktiv.mk360.de"),
+    title: {
+      default: seo.defaultTitle ?? "einfach produktiv.",
+      template: seo.titleTemplate ?? "%s | einfach produktiv.",
+    },
+    description: seo.defaultDescription ?? undefined,
+    openGraph: {
+      siteName: "einfach produktiv.",
+      locale: "de_DE",
+      type: "website",
+      images: seo.defaultOgImage ? [{ url: seo.defaultOgImage }] : undefined,
+    },
+    twitter: {
+      card: "summary_large_image",
+      images: seo.defaultOgImage ? [seo.defaultOgImage] : undefined,
+    },
+  };
+}
 
 export default async function RootLayout({
   children,

app/lib/__tests__/cartTotals.test.ts

@@ -20,6 +20,7 @@ const product = (overrides: Partial<Product> = {}): Product => ({
   variants: [],
   outOfStock: false,
   lowStock: false,
+  maxQty: null,
   taxRatePercent: null,
   ...overrides,
 });

app/lib/__tests__/invoicePdf.test.ts

@@ -1,97 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { __testables, type InvoiceItem, type InvoiceOrder } from "../invoicePdf";
-
-const { isPaidImmediately, groupByTaxRate } = __testables;
-
-const item = (overrides: Partial<InvoiceItem> = {}): InvoiceItem => ({
-  productName: "ToDo-Karten",
-  quantity: 2,
-  unitPrice: 12.9,
-  taxRatePercent: 19,
-  bundleContents: null,
-  ...overrides,
-});
-
-const order = (overrides: Partial<InvoiceOrder> = {}): InvoiceOrder => ({
-  orderNumber: "#EP-0001",
-  invoiceNumber: "RE-0001",
-  invoiceIssuedAt: new Date().toISOString(),
-  customerFirstName: "Max",
-  customerLastName: "Mustermann",
-  deliveryMethod: "address",
-  street: "Musterweg 1",
-  zip: "10115",
-  city: "Berlin",
-  country: "Deutschland",
-  paymentMethodTitle: "Kreditkarte",
-  items: [item()],
-  subtotal: 25.8,
-  shippingCost: 2.9,
-  discountAmount: 0,
-  discountCode: null,
-  total: 28.7,
-  ...overrides,
-});
-
-describe("isPaidImmediately", () => {
-  it("is true for Kreditkarte", () => {
-    expect(isPaidImmediately("Kreditkarte")).toBe(true);
-  });
-
-  it("is true for PayPal", () => {
-    expect(isPaidImmediately("PayPal")).toBe(true);
-  });
-
-  it("is false only for Überweisung", () => {
-    expect(isPaidImmediately("Überweisung")).toBe(false);
-  });
-
-  it("defaults to true for any future/unknown payment method (only Überweisung is the named exception)", () => {
-    expect(isPaidImmediately("Sofortüberweisung")).toBe(true);
-    expect(isPaidImmediately("Klarna")).toBe(true);
-  });
-});
-
-describe("groupByTaxRate (original invoice)", () => {
-  it("reconciles net+tax to gross, and gross to the order total for a single rate", () => {
-    const o = order({ items: [item({ quantity: 2, unitPrice: 12.9 })], subtotal: 25.8, shippingCost: 2.9, discountAmount: 0, total: 28.7 });
-    const groups = groupByTaxRate(o, 19);
-    expect(groups).toHaveLength(1);
-    const [g] = groups;
-    expect(g.net + g.tax).toBeCloseTo(g.gross, 6);
-    expect(g.gross).toBeCloseTo(28.7, 2);
-  });
-
-  it("distributes a discount proportionally, still reconciling to the discounted total", () => {
-    const o = order({
-      items: [item({ quantity: 1, unitPrice: 50 })],
-      subtotal: 50,
-      shippingCost: 0,
-      discountAmount: 10,
-      total: 40,
-    });
-    const groups = groupByTaxRate(o, 19);
-    const total = groups.reduce((sum, g) => sum + g.gross, 0);
-    expect(total).toBeCloseTo(40, 2);
-  });
-
-  it("splits multiple tax rates into separate groups that each reconcile", () => {
-    const o = order({
-      items: [item({ quantity: 1, unitPrice: 20, taxRatePercent: 19 }), item({ quantity: 1, unitPrice: 10, taxRatePercent: 7 })],
-      subtotal: 30,
-      shippingCost: 0,
-      discountAmount: 0,
-      total: 30,
-    });
-    const groups = groupByTaxRate(o, 19);
-    expect(groups).toHaveLength(2);
-    for (const g of groups) expect(g.net + g.tax).toBeCloseTo(g.gross, 6);
-    expect(groups.reduce((sum, g) => sum + g.gross, 0)).toBeCloseTo(30, 2);
-  });
-
-  it("falls back to the tenant default rate when an item has no taxRatePercent", () => {
-    const o = order({ items: [item({ taxRatePercent: undefined as unknown as number })] });
-    const groups = groupByTaxRate(o, 7);
-    expect(groups[0].rate).toBe(7);
-  });
-});

app/lib/brevo.ts

@@ -0,0 +1,67 @@
+// Server-only — syncs newsletter opt-ins to Brevo's Contacts API via the
+// double-opt-in endpoint: this only ever *requests* a subscription, it
+// does not add the contact to the real list itself — Brevo sends the
+// confirmation email (the template at BREVO_DOUBLE_OPTIN_TEMPLATE_ID,
+// configured as this list's Double Opt-in template in Brevo's own UI) and
+// only adds the contact to BREVO_LIST_ID once they click through. This
+// app never sends marketing mail itself, and — as of this switch — never
+// even directly grants list membership; it only ever hands Brevo the
+// contact + consent-to-be-asked. Everything after that (the confirmation
+// email itself, the post-confirmation Welcome Flow automation) is
+// configured in Brevo's own UI, not manageable via their public API.
+//
+// Previously called the plain `POST /v3/contacts` upsert (single
+// opt-in — added straight to the list, no confirmation click required).
+// Switched 2026-07-25 per explicit request once the confirmation-email
+// template existed to point templateId at.
+const BREVO_DOUBLE_OPTIN_URL = "https://api.brevo.com/v3/contacts/doubleOptinConfirmation";
+
+export type BrevoSyncResult = { ok: true } | { ok: false; reason: string };
+
+export type NewsletterOptInSource = "checkout" | "newsletter-page" | "newsletter-modal" | "newsletter-hero" | "challenge";
+
+// `source` becomes a Brevo contact attribute so campaigns/segments can
+// tell a checkout opt-in apart from the standalone signup forms without
+// needing separate lists.
+export async function upsertNewsletterContact(
+  email: string,
+  source: NewsletterOptInSource,
+): Promise<BrevoSyncResult> {
+  const apiKey = process.env.BREVO_API_KEY;
+  const listId = process.env.BREVO_LIST_ID;
+  const templateId = process.env.BREVO_DOUBLE_OPTIN_TEMPLATE_ID;
+  if (!apiKey || !listId || !templateId) {
+    return { ok: false, reason: "BREVO_API_KEY/BREVO_LIST_ID/BREVO_DOUBLE_OPTIN_TEMPLATE_ID nicht konfiguriert." };
+  }
+  const redirectionUrl = process.env.BREVO_DOI_REDIRECT_URL || "https://einfach-produktiv.mk360.de/newsletter-confirmed";
+
+  try {
+    const res = await fetch(BREVO_DOUBLE_OPTIN_URL, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "api-key": apiKey,
+      },
+      body: JSON.stringify({
+        email,
+        includeListIds: [Number(listId)],
+        templateId: Number(templateId),
+        redirectionUrl,
+        attributes: { OPT_IN_SOURCE: source },
+      }),
+      signal: AbortSignal.timeout(8000),
+    });
+    // 201 Created is this endpoint's success status (unlike the plain
+    // contacts upsert this replaced, which used 204). A contact who's
+    // already confirmed-and-subscribed re-submitting the form is not
+    // treated as an error either — Brevo resends the confirmation email
+    // in that case rather than erroring, which is an acceptable no-op
+    // resend from this app's point of view (matches the previous
+    // endpoint's "always succeeds for an existing contact too" behavior).
+    if (res.ok || res.status === 201) return { ok: true };
+    const body = await res.json().catch(() => null);
+    return { ok: false, reason: body?.message ?? `Brevo antwortete mit ${res.status}` };
+  } catch (err) {
+    return { ok: false, reason: err instanceof Error ? err.message : "Brevo ist gerade nicht erreichbar." };
+  }
+}

app/lib/checkoutDraft.ts

@@ -14,6 +14,11 @@ export type CheckoutDraft = {
   firstName: string;
   lastName: string;
   email: string;
+  // Optional B2B fields — see CheckoutContent.tsx's own comment on why
+  // they sit here (right next to the Rechnungsadresse fields, not a
+  // separate persisted concept).
+  companyName: string;
+  vatId: string;
   // Rechnungsadresse is always a plain street address now — no
   // deliveryMethod/packstationNumber/postNumber here, only on the
   // shipping* override fields below (see CheckoutContent.tsx).

app/lib/correctionInvoicePdf.tsx

@@ -1,311 +0,0 @@
-import React from "react";
-import { Document, Page, View, Text, Image, StyleSheet, renderToBuffer } from "@react-pdf/renderer";
-import { formatDate } from "./format";
-import { computeTaxBreakdown } from "./taxBreakdown";
-
-// Frontend port of the Payload backend's src/lib/correctionInvoicePdf.tsx
-// — the *real* Stornorechnung/Gutschrift is generated and emailed from
-// Payload's own Orders.ts afterChange hook (that's where the status
-// transition and the correction invoice NUMBER are actually assigned).
-// This copy exists only so a customer can re-download the same document
-// later from /konto/bestellungen/[orderNumber] without it having been
-// stored as a file anywhere — same "deterministic regeneration, not file
-// storage" approach already used for the original invoice (see
-// invoicePdf.tsx): correctionInvoiceNumber/correctionInvoiceIssuedAt are
-// immutable once set, so re-rendering from the order's own stored data
-// always reproduces the identical document.
-const BRAND = "#f6a701";
-const TEXT_MUTED = "#6b6b69";
-const BORDER = "#e5e0d8";
-const BG_MUTED = "#f8f5f1";
-
-const styles = StyleSheet.create({
-  page: { padding: 0, fontSize: 10, fontFamily: "Helvetica", color: "#1a1a18" },
-  // A rule, not a filled band — a bold brand-colored line rather than a
-  // plain 1pt gray divider.
-  headerBand: {
-    padding: 32,
-    paddingBottom: 24,
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    borderBottomWidth: 3,
-    borderBottomColor: BRAND,
-  },
-  wordmark: { fontFamily: "Helvetica-Bold", fontSize: 14 },
-  kindLabel: { fontFamily: "Helvetica-Bold", fontSize: 22, color: BRAND, letterSpacing: 1 },
-  body: { padding: 32, paddingBottom: 90 },
-  refLine: { fontSize: 10, color: TEXT_MUTED, marginBottom: 24 },
-  addressRow: { flexDirection: "row", justifyContent: "space-between", marginBottom: 24 },
-  addressBlock: { width: "45%" },
-  addressLabel: { fontSize: 8, color: TEXT_MUTED, marginBottom: 4, textTransform: "uppercase" },
-  addressLine: { fontSize: 10, lineHeight: 1.5 },
-  metaRow: { flexDirection: "row", gap: 10, marginBottom: 24 },
-  metaBox: { borderWidth: 1, borderColor: BORDER, borderRadius: 6, paddingVertical: 8, paddingHorizontal: 12 },
-  metaLabel: { fontSize: 7, color: TEXT_MUTED, textTransform: "uppercase", marginBottom: 2 },
-  metaValue: { fontSize: 10, fontFamily: "Helvetica-Bold" },
-  table: { borderRadius: 6, overflow: "hidden", borderWidth: 1, borderColor: BORDER, marginBottom: 16 },
-  tableHeader: { flexDirection: "row", backgroundColor: BG_MUTED, paddingVertical: 8, paddingHorizontal: 10 },
-  tableRow: { flexDirection: "row", paddingVertical: 8, paddingHorizontal: 10, borderTopWidth: 1, borderTopColor: BORDER },
-  tableRowAlt: { backgroundColor: BG_MUTED },
-  colImage: { width: 28 },
-  itemImage: { width: 28, height: 28, borderRadius: 3 },
-  colName: { flex: 3 },
-  colQty: { flex: 1, textAlign: "right" },
-  colPrice: { flex: 1, textAlign: "right" },
-  colTotal: { flex: 1, textAlign: "right" },
-  headerCell: { fontSize: 8, color: TEXT_MUTED, textTransform: "uppercase" },
-  bundleLine: { fontSize: 8, color: TEXT_MUTED, marginTop: 2 },
-  summary: { alignItems: "flex-end", marginBottom: 24 },
-  summaryBox: { width: 240, backgroundColor: BG_MUTED, borderRadius: 6, padding: 14 },
-  summaryRow: { flexDirection: "row", justifyContent: "space-between", paddingVertical: 2 },
-  summaryLabel: { fontSize: 10, color: TEXT_MUTED },
-  summaryValue: { fontSize: 10 },
-  grandTotalRow: { flexDirection: "row", justifyContent: "space-between", paddingTop: 8, marginTop: 6, borderTopWidth: 1, borderTopColor: BORDER },
-  grandTotalLabel: { fontSize: 12, fontFamily: "Helvetica-Bold" },
-  grandTotalValue: { fontSize: 12, fontFamily: "Helvetica-Bold" },
-  footer: {
-    position: "absolute",
-    bottom: 32,
-    left: 32,
-    right: 32,
-    borderTopWidth: 1,
-    borderTopColor: BORDER,
-    paddingTop: 12,
-    fontSize: 8,
-    color: TEXT_MUTED,
-  },
-});
-
-function formatPrice(amount: number): string {
-  return new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(amount);
-}
-
-export type CorrectionInvoiceKind = "storno" | "gutschrift";
-
-export type CorrectionInvoiceItem = {
-  productName: string;
-  quantity: number;
-  unitPrice: number;
-  taxRatePercent: number;
-  bundleContents?: string | null;
-  variantName?: string | null;
-  returnQuantity?: number;
-  imageUrl?: string | null;
-};
-
-export type CorrectionInvoiceOrder = {
-  orderNumber: string;
-  invoiceNumber: string;
-  invoiceIssuedAt: string;
-  correctionInvoiceNumber: string;
-  correctionInvoiceIssuedAt: string;
-  customerFirstName: string;
-  customerLastName: string;
-  deliveryMethod: "address" | "packstation";
-  street?: string | null;
-  packstationNumber?: string | null;
-  postNumber?: string | null;
-  zip: string;
-  city: string;
-  country: string;
-  items: CorrectionInvoiceItem[];
-  subtotal: number;
-  shippingCost: number;
-  discountAmount: number;
-  total: number;
-};
-
-export type InvoiceSeller = {
-  sellerName: string;
-  sellerStreet: string;
-  sellerZip: string;
-  sellerCity: string;
-  sellerCountry: string;
-  sellerEmail: string;
-  vatId: string;
-  taxRatePercent: number;
-  bankDetails?: string | null;
-  // Pflichtangaben in Geschäftsbriefen for registered legal forms (§37a
-  // HGB / §35a GmbHG) — optional because a sole proprietorship (the
-  // default legalForm in company-settings) has neither. Mirrors
-  // invoicePdf.tsx's own InvoiceSeller — see that file's comment.
-  registerCourt?: string | null;
-  registerNumber?: string | null;
-  managingDirector?: string | null;
-};
-
-// Stornorechnung: every item at its full ordered quantity (nothing
-// shipped, undo everything). Gutschrift: only items with a nonzero
-// returnQuantity, at that returned quantity — see this file's port source
-// (backend src/lib/correctionInvoicePdf.tsx) for the full policy
-// reasoning (no shipping refund, no discount reproration on a Gutschrift).
-function resolveLineItems(kind: CorrectionInvoiceKind, items: CorrectionInvoiceItem[]): { item: CorrectionInvoiceItem; effectiveQuantity: number }[] {
-  if (kind === "storno") return items.map((item) => ({ item, effectiveQuantity: item.quantity }));
-  return items
-    .filter((item) => (item.returnQuantity ?? 0) > 0)
-    .map((item) => ({ item, effectiveQuantity: item.returnQuantity as number }));
-}
-
-function groupByTaxRate(
-  kind: CorrectionInvoiceKind,
-  lines: { item: CorrectionInvoiceItem; effectiveQuantity: number }[],
-  order: CorrectionInvoiceOrder,
-  defaultRate: number,
-): { rate: number; net: number; tax: number; gross: number }[] {
-  // Gutschrift excludes shipping/discount entirely — passing 0 for both
-  // collapses computeTaxBreakdown's scale factor to 1, same as the old
-  // kind==='storno' ? ... : 1 branch did explicitly.
-  return computeTaxBreakdown(
-    lines.map(({ item, effectiveQuantity }) => ({
-      quantity: effectiveQuantity,
-      unitPrice: item.unitPrice,
-      taxRatePercent: item.taxRatePercent ?? defaultRate,
-    })),
-    order.subtotal,
-    kind === "storno" ? order.discountAmount : 0,
-    kind === "storno" ? order.shippingCost : 0,
-  );
-}
-
-function CorrectionInvoiceDocument({ kind, order, seller }: { kind: CorrectionInvoiceKind; order: CorrectionInvoiceOrder; seller: InvoiceSeller }) {
-  const kindLabel = kind === "storno" ? "Stornorechnung" : "Gutschrift";
-  const lines = resolveLineItems(kind, order.items);
-  const rateGroups = groupByTaxRate(kind, lines, order, seller.taxRatePercent);
-  const grandTotal = rateGroups.reduce((sum, g) => sum + g.gross, 0);
-  const refNote =
-    kind === "storno"
-      ? "vollständige Stornierung des ursprünglichen Rechnungsbetrags (inkl. Versand)."
-      : "Gutschrift für die zurückgesendeten Artikel — ohne Versandkosten, der ursprüngliche Rabatt bleibt unverändert bei den behaltenen Artikeln.";
-  const deliveryLine =
-    order.deliveryMethod === "address" ? order.street : `Packstation ${order.packstationNumber} · Postnummer ${order.postNumber}`;
-
-  return (
-    <Document>
-      <Page size="A4" style={styles.page}>
-        <View style={styles.headerBand}>
-          <Text style={styles.wordmark}>einfach produktiv.</Text>
-          <Text style={styles.kindLabel}>{kindLabel.toUpperCase()}</Text>
-        </View>
-
-        <View style={styles.body}>
-          <Text style={styles.refLine}>
-            {kindLabel} zu Rechnung Nr. {order.invoiceNumber} vom {formatDate(order.invoiceIssuedAt)} (Bestellung {order.orderNumber}) — {refNote}
-          </Text>
-
-          <View style={styles.addressRow}>
-            <View style={styles.addressBlock}>
-              <Text style={styles.addressLabel}>Von</Text>
-              <Text style={styles.addressLine}>{seller.sellerName}</Text>
-              <Text style={styles.addressLine}>{seller.sellerStreet}</Text>
-              <Text style={styles.addressLine}>
-                {seller.sellerZip} {seller.sellerCity}
-              </Text>
-              <Text style={styles.addressLine}>{seller.sellerCountry}</Text>
-            </View>
-            <View style={styles.addressBlock}>
-              <Text style={styles.addressLabel}>An</Text>
-              <Text style={styles.addressLine}>
-                {order.customerFirstName} {order.customerLastName}
-              </Text>
-              <Text style={styles.addressLine}>{deliveryLine}</Text>
-              <Text style={styles.addressLine}>
-                {order.zip} {order.city}
-              </Text>
-              <Text style={styles.addressLine}>{order.country}</Text>
-            </View>
-          </View>
-
-          <View style={styles.metaRow}>
-            <View style={styles.metaBox}>
-              <Text style={styles.metaLabel}>{kindLabel === "Gutschrift" ? "Gutschrift-Nr." : "Storno-Nr."}</Text>
-              <Text style={styles.metaValue}>{order.correctionInvoiceNumber}</Text>
-            </View>
-            <View style={styles.metaBox}>
-              <Text style={styles.metaLabel}>Datum</Text>
-              <Text style={styles.metaValue}>{formatDate(order.correctionInvoiceIssuedAt)}</Text>
-            </View>
-          </View>
-
-          <View style={styles.table}>
-            <View style={styles.tableHeader}>
-              <View style={styles.colImage} />
-              <Text style={[styles.colName, styles.headerCell]}>Artikel</Text>
-              <Text style={[styles.colQty, styles.headerCell]}>Menge</Text>
-              <Text style={[styles.colPrice, styles.headerCell]}>Einzelpreis</Text>
-              <Text style={[styles.colTotal, styles.headerCell]}>Betrag</Text>
-            </View>
-            {lines.map(({ item, effectiveQuantity }, i) => (
-              <View style={[styles.tableRow, i % 2 === 1 ? styles.tableRowAlt : {}]} key={i}>
-                <View style={styles.colImage}>
-                  {item.imageUrl && <Image src={item.imageUrl} style={styles.itemImage} />}
-                </View>
-                <View style={styles.colName}>
-                  <Text>
-                    {item.productName}
-                    {item.variantName ? ` (${item.variantName})` : ""}
-                  </Text>
-                  {item.bundleContents ? <Text style={styles.bundleLine}>{item.bundleContents}</Text> : null}
-                </View>
-                <Text style={styles.colQty}>{effectiveQuantity}</Text>
-                <Text style={styles.colPrice}>{formatPrice(item.unitPrice)}</Text>
-                <Text style={styles.colTotal}>-{formatPrice(effectiveQuantity * item.unitPrice)}</Text>
-              </View>
-            ))}
-          </View>
-
-          <View style={styles.summary}>
-            <View style={styles.summaryBox}>
-              {/* Storno reverses the full original invoice, shipping
-                  included (see this file's top-of-file comment on why the
-                  two kinds differ) — shown as its own line instead of
-                  silently folded into the tax-rate groups below, same as
-                  the original invoice's own Versand row. Gutschrift never
-                  reverses shipping, so this never renders for it. */}
-              {kind === "storno" && order.shippingCost > 0 && (
-                <View style={styles.summaryRow}>
-                  <Text style={styles.summaryLabel}>Versand</Text>
-                  <Text style={styles.summaryValue}>-{formatPrice(order.shippingCost)}</Text>
-                </View>
-              )}
-              {rateGroups.map((g) => (
-                <React.Fragment key={g.rate}>
-                  <View style={styles.summaryRow}>
-                    <Text style={styles.summaryLabel}>Netto</Text>
-                    <Text style={styles.summaryValue}>-{formatPrice(g.net)}</Text>
-                  </View>
-                  <View style={styles.summaryRow}>
-                    <Text style={styles.summaryLabel}>zzgl. {g.rate}% MwSt.</Text>
-                    <Text style={styles.summaryValue}>-{formatPrice(g.tax)}</Text>
-                  </View>
-                </React.Fragment>
-              ))}
-              <View style={styles.grandTotalRow}>
-                <Text style={styles.grandTotalLabel}>Gesamt</Text>
-                <Text style={styles.grandTotalValue}>-{formatPrice(grandTotal)}</Text>
-              </View>
-            </View>
-          </View>
-        </View>
-
-        <View style={styles.footer} fixed>
-          <Text>
-            {seller.sellerName} · {seller.sellerStreet}, {seller.sellerZip} {seller.sellerCity} · {seller.sellerEmail} · USt-IdNr.{" "}
-            {seller.vatId}
-            {seller.registerCourt && seller.registerNumber ? ` · ${seller.registerCourt} · ${seller.registerNumber}` : ""}
-            {seller.managingDirector ? ` · Geschäftsführung: ${seller.managingDirector}` : ""}
-          </Text>
-          {seller.bankDetails ? <Text style={{ marginTop: 4 }}>Bankverbindung (für Überweisung): {seller.bankDetails}</Text> : null}
-        </View>
-      </Page>
-    </Document>
-  );
-}
-
-export async function renderCorrectionInvoicePdf(kind: CorrectionInvoiceKind, order: CorrectionInvoiceOrder, seller: InvoiceSeller): Promise<Buffer> {
-  return renderToBuffer(<CorrectionInvoiceDocument kind={kind} order={order} seller={seller} />);
-}
-
-// Exported for unit testing (see app/lib/__tests__/correctionInvoicePdf.test.ts)
-// — the actual money math, independent of the PDF rendering.
-export const __testables = { resolveLineItems, groupByTaxRate };

app/lib/customerAuth.ts

@@ -199,6 +199,10 @@ export type CustomerAddress = {
   zip: string | null;
   city: string | null;
   country: string | null;
+  // Optional B2B profile default — see Customers.ts's own comment. Prefills
+  // /checkout's Firma/USt-IdNr. fields for a returning customer.
+  companyName: string | null;
+  vatId: string | null;
 };
 
 export type CustomerProfile = CustomerSummary & CustomerAddress;
@@ -217,6 +221,8 @@ type PayloadCustomerMe = {
   zip: string | null;
   city: string | null;
   country: string | null;
+  companyName: string | null;
+  vatId: string | null;
   cart: { product: number; productSlug: string; quantity: number; variantName: string | null }[] | null;
 };
 
@@ -243,6 +249,8 @@ export async function getCustomerProfile(token: string): Promise<CustomerProfile
     zip: u.zip,
     city: u.city,
     country: u.country,
+    companyName: u.companyName,
+    vatId: u.vatId,
   };
 }
 
@@ -259,6 +267,8 @@ export async function updateCustomerProfile(
     zip: string;
     city: string;
     country: string;
+    companyName?: string;
+    vatId?: string;
   },
 ): Promise<{ ok: true } | { ok: false; reason: string }> {
   const res = await fetch(`${PAYLOAD_URL}/api/customers/${customerId}`, {
@@ -433,6 +443,10 @@ export async function getCustomerOrders(token: string, customerId: number): Prom
 
 export type CustomerOrderDetail = CustomerOrder & {
   id: number;
+  // 'not_applicable' for Überweisung orders (never gated); see
+  // spicy-leaping-pizza.md §1 — read by /api/checkout/status for the
+  // post-Stripe-redirect polling page.
+  paymentStatus: "not_applicable" | "pending" | "paid" | "failed" | "refunded" | "partially_refunded";
   invoiceNumber: string | null;
   invoiceIssuedAt: string | null;
   correctionInvoiceNumber: string | null;
@@ -442,6 +456,11 @@ export type CustomerOrderDetail = CustomerOrder & {
   customerFirstName: string;
   customerLastName: string;
   customerEmail: string;
+  companyName: string | null;
+  vatId: string | null;
+  vatExempt: boolean;
+  kleinunternehmer: boolean;
+  vatIdValidatedAt: string | null;
   deliveryMethod: "address" | "packstation";
   street: string | null;
   packstationNumber: string | null;

app/lib/email.ts

@@ -0,0 +1,15 @@
+// Single source of truth for "is this a plausible email address" — used
+// client-side (checkout, newsletter forms) for immediate on-blur feedback
+// and server-side (newsletter subscribe route) as the same check, not a
+// second one that could drift out of sync.
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+export function isValidEmail(value: string): boolean {
+  return EMAIL_PATTERN.test(value);
+}
+
+// Returns "" for valid, an error message otherwise.
+export function validateEmailFormat(value: string): string {
+  if (!value.trim()) return "E-Mail-Adresse ist erforderlich.";
+  return isValidEmail(value) ? "" : "Bitte eine gültige E-Mail-Adresse angeben.";
+}

app/lib/emailTemplates.ts

@@ -1,5 +1,5 @@
 import { formatPrice, formatDate } from "./format";
-import { computeTaxBreakdown } from "./taxBreakdown";
+import { computeTaxBreakdown } from "@einfach-produktiv/invoicing";
 import type { CompanySettings } from "./payload";
 
 // Pure string-building functions, no server-only or client-only imports —
@@ -79,7 +79,7 @@ export const DEFAULT_LEGAL_FOOTER_LINES: string[] = [
   "E-Mail: kontakt@musterfirma.de",
 ];
 
-// Every business email needs an Anbieterkennzeichnung (§5 TMG-equivalent
+// Every business email needs an Anbieterkennzeichnung (§5 DDG-equivalent
 // minimum for business correspondence: full name, postal address, contact,
 // plus VAT ID once assigned) — not just a friendly "brand · email" line.
 // Built from the same company-settings fields the invoice PDFs already
@@ -91,6 +91,11 @@ export const DEFAULT_LEGAL_FOOTER_LINES: string[] = [
 // appended here when actually present, so a sole proprietorship's footer
 // stays exactly as short as before this field set existed. Keep this in
 // sync with the Payload backend's own copy in src/lib/sellerInfo.ts.
+// `shareCapital` deliberately does NOT appear here even though it's a
+// company-settings field — see CompanySettings.ts's own comment: it's a
+// voluntary disclosure, not something safe to auto-inject into every
+// outgoing email regardless of whether the business actually wants that
+// disclosure made.
 export function buildLegalFooterLines(seller: CompanySettings | null): string[] {
   if (!seller) return DEFAULT_LEGAL_FOOTER_LINES;
   const lines = [
@@ -125,7 +130,7 @@ function emailShell(icon: string, headingHtml: string, bodyHtml: string, footerT
             <td style="text-align:center;padding-bottom:20px;">
               <table role="presentation" cellpadding="0" cellspacing="0" style="margin:0 auto;">
                 <tr>
-                  <td width="56" height="56" style="background:${BRAND}1a;border-radius:50%;text-align:center;vertical-align:middle;font-size:24px;color:${BRAND};">
+                  <td width="56" height="56" style="width:56px;height:56px;background:${BRAND}1a;border-radius:50%;text-align:center;vertical-align:middle;font-size:24px;color:${BRAND};">
                     ${icon}
                   </td>
                 </tr>

app/lib/invoiceData.ts

@@ -1,6 +1,17 @@
 import { getCompanySettings, type CompanySettings } from "./payload";
-import { renderInvoicePdf, type InvoiceOrder } from "./invoicePdf";
-import { renderCorrectionInvoicePdf, type CorrectionInvoiceKind, type CorrectionInvoiceOrder } from "./correctionInvoicePdf";
+// "/einvoice" subpath, not the package's main entry — @e-invoice-eu/core
+// pulls in Node-only dependencies that break a client bundle if reachable
+// from a Client Component; see that package's own src/index.ts comment.
+// This file is server-only (Next.js Server Components/Route Handlers),
+// but importing from the main entry would still poison the bundle for
+// any Client Component that transitively imports this same package.
+import {
+  renderInvoiceEInvoice,
+  renderCorrectionInvoiceEInvoice,
+  type InvoiceOrder,
+  type CorrectionInvoiceKind,
+  type CorrectionInvoiceOrder,
+} from "@einfach-produktiv/invoicing/einvoice";
 
 export type { CompanySettings };
 
@@ -19,18 +30,26 @@ export async function getSellerForInvoice(): Promise<CompanySettings | null> {
 // later always matches what they were emailed. `seller` is passed in
 // rather than fetched here, so a caller that already has it (see above)
 // doesn't fetch it twice.
+//
+// As of 2026-07-23 (e-invoicing Phase 3), this produces a Factur-X-EN16931
+// hybrid PDF/A-3 (visual PDF + embedded EN16931 XML) via
+// @einfach-produktiv/invoicing's renderInvoiceEInvoice(), not a plain PDF —
+// same visual document, but now machine-readable too. `Buffer.from()`
+// wraps the library's `Uint8Array` return value — every downstream
+// consumer (nodemailer's attachment `content`, the two on-demand download
+// routes) already expects a `Buffer`, unchanged by this switch.
 export async function generateInvoicePdf(order: InvoiceOrder, seller: CompanySettings | null): Promise<Buffer | null> {
   if (!seller) {
     console.error("generateInvoicePdf: no company-settings row found for tenant");
     return null;
   }
-  return renderInvoicePdf(order, seller);
+  return Buffer.from(await renderInvoiceEInvoice(order, seller));
 }
 
 // Frontend-side regeneration for the "Stornorechnung/Gutschrift
 // herunterladen" download button — the real document was already
 // generated once (Payload's Orders.ts afterChange hook) and emailed; this
-// reproduces the identical PDF from the order's own stored
+// reproduces the identical PDF/A-3+XML from the order's own stored
 // correctionInvoiceNumber/correctionInvoiceIssuedAt, same "deterministic
 // regeneration, not file storage" approach as the original invoice.
 export async function generateCorrectionInvoicePdf(
@@ -42,5 +61,5 @@ export async function generateCorrectionInvoicePdf(
     console.error("generateCorrectionInvoicePdf: no company-settings row found for tenant");
     return null;
   }
-  return renderCorrectionInvoicePdf(kind, order, seller);
+  return Buffer.from(await renderCorrectionInvoiceEInvoice(kind, order, seller));
 }

app/lib/invoicePdf.tsx

@@ -1,375 +0,0 @@
-import React from "react";
-import { Document, Page, View, Text, Image, StyleSheet, renderToBuffer } from "@react-pdf/renderer";
-import { formatDate } from "./format";
-import { computeTaxBreakdown } from "./taxBreakdown";
-
-// Generated synchronously in the checkout request (see app/lib/orderEmail.ts)
-// and attached to the order-confirmation email, plus available on-demand via
-// app/api/account/orders/[orderNumber]/invoice/route.ts — same render
-// function both times, so a re-download always matches what was emailed.
-//
-// Built-in Helvetica, not a registered web font — this renders inside the
-// checkout request's own fire-and-forget email step; a font-fetch failure
-// there is one more way to lose the invoice attachment for no real design
-// benefit. Same choice as the Payload-side correction-invoice PDF
-// (src/lib/correctionInvoicePdf.tsx in the backend repo, kept visually in
-// sync with this file by eye — not shared code, two separate deployments).
-const BRAND = "#f6a701";
-const TEXT_MUTED = "#6b6b69";
-const BORDER = "#e5e0d8";
-const BG_MUTED = "#f8f5f1";
-const SUCCESS = "#2f8f4e";
-const SUCCESS_TINT = "#e7f5eb";
-
-const styles = StyleSheet.create({
-  page: { padding: 0, fontSize: 10, fontFamily: "Helvetica", color: "#1a1a18" },
-  // A rule, not a filled band — a bold brand-colored line with a thin
-  // muted second line underneath, rather than a plain 1pt gray divider.
-  headerBand: {
-    padding: 32,
-    paddingBottom: 24,
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    borderBottomWidth: 3,
-    borderBottomColor: BRAND,
-  },
-  headerRuleThin: { height: 1, backgroundColor: BORDER, marginHorizontal: 32 },
-  wordmark: { fontFamily: "Helvetica-Bold", fontSize: 14 },
-  kindLabel: { fontFamily: "Helvetica-Bold", fontSize: 22, color: BRAND, letterSpacing: 1 },
-  body: { padding: 32, paddingBottom: 90 },
-  addressRow: { flexDirection: "row", flexWrap: "wrap", justifyContent: "space-between", rowGap: 12, marginBottom: 24 },
-  addressBlock: { width: "45%" },
-  // Narrower variant for when a 3rd (shipping) block joins Von/An — three
-  // of these plus the row's own space-between still fit a Page's width
-  // without any block cramping its text.
-  addressBlockThird: { width: "30%" },
-  addressLabel: { fontSize: 8, color: TEXT_MUTED, marginBottom: 4, textTransform: "uppercase" },
-  addressLine: { fontSize: 10, lineHeight: 1.5 },
-  metaRow: { flexDirection: "row", gap: 10, marginBottom: 16, flexWrap: "wrap" },
-  metaBox: { borderWidth: 1, borderColor: BORDER, borderRadius: 6, paddingVertical: 8, paddingHorizontal: 12 },
-  metaLabel: { fontSize: 7, color: TEXT_MUTED, textTransform: "uppercase", marginBottom: 2 },
-  metaValue: { fontSize: 10, fontFamily: "Helvetica-Bold" },
-  paidBadge: { backgroundColor: SUCCESS_TINT, borderRadius: 6, paddingVertical: 8, paddingHorizontal: 12, justifyContent: "center" },
-  paidBadgeText: { fontSize: 10, fontFamily: "Helvetica-Bold", color: SUCCESS },
-  table: { borderRadius: 6, overflow: "hidden", borderWidth: 1, borderColor: BORDER, marginTop: 8, marginBottom: 16 },
-  tableHeader: { flexDirection: "row", backgroundColor: BG_MUTED, paddingVertical: 8, paddingHorizontal: 10 },
-  tableRow: { flexDirection: "row", paddingVertical: 8, paddingHorizontal: 10, borderTopWidth: 1, borderTopColor: BORDER },
-  tableRowAlt: { backgroundColor: BG_MUTED },
-  colImage: { width: 28 },
-  itemImage: { width: 28, height: 28, borderRadius: 3 },
-  colName: { flex: 3 },
-  colQty: { flex: 1, textAlign: "right" },
-  colPrice: { flex: 1, textAlign: "right" },
-  colTotal: { flex: 1, textAlign: "right" },
-  headerCell: { fontSize: 8, color: TEXT_MUTED, textTransform: "uppercase" },
-  bundleLine: { fontSize: 8, color: TEXT_MUTED, marginTop: 2 },
-  summary: { alignItems: "flex-end", marginBottom: 24 },
-  summaryBox: { width: 240, backgroundColor: BG_MUTED, borderRadius: 6, padding: 14 },
-  summaryRow: { flexDirection: "row", justifyContent: "space-between", paddingVertical: 2 },
-  summaryLabel: { fontSize: 10, color: TEXT_MUTED },
-  summaryValue: { fontSize: 10 },
-  grandTotalRow: { flexDirection: "row", justifyContent: "space-between", paddingTop: 8, marginTop: 6, borderTopWidth: 1, borderTopColor: BORDER },
-  grandTotalLabel: { fontSize: 12, fontFamily: "Helvetica-Bold" },
-  grandTotalValue: { fontSize: 12, fontFamily: "Helvetica-Bold" },
-  // `fixed` (below, on the element) + absolute positioning — always pinned
-  // to the bottom of the page regardless of how much content is above it,
-  // rather than just following wherever the content flow happens to end.
-  footer: {
-    position: "absolute",
-    bottom: 32,
-    left: 32,
-    right: 32,
-    borderTopWidth: 1,
-    borderTopColor: BORDER,
-    paddingTop: 12,
-    fontSize: 8,
-    color: TEXT_MUTED,
-  },
-});
-
-function formatPrice(amount: number): string {
-  return new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(amount);
-}
-
-export type InvoiceItem = {
-  productName: string;
-  quantity: number;
-  unitPrice: number;
-  taxRatePercent: number;
-  bundleContents?: string | null;
-  variantName?: string | null;
-  imageUrl?: string | null;
-};
-
-export type InvoiceOrder = {
-  orderNumber: string;
-  invoiceNumber: string;
-  invoiceIssuedAt: string;
-  customerFirstName: string;
-  customerLastName: string;
-  deliveryMethod: "address" | "packstation";
-  street?: string | null;
-  packstationNumber?: string | null;
-  postNumber?: string | null;
-  zip: string;
-  city: string;
-  country: string;
-  // Optional package destination distinct from the "An" recipient above —
-  // when set, the invoice shows both addresses (billing stays "An", this
-  // becomes its own "Lieferadresse" block) instead of implying the order
-  // shipped to the billing address, which is only true when this is unset.
-  hasDifferentShippingAddress?: boolean;
-  shippingFirstName?: string | null;
-  shippingLastName?: string | null;
-  shippingDeliveryMethod?: "address" | "packstation" | null;
-  shippingStreet?: string | null;
-  shippingPackstationNumber?: string | null;
-  shippingPostNumber?: string | null;
-  shippingZip?: string | null;
-  shippingCity?: string | null;
-  shippingCountry?: string | null;
-  paymentMethodTitle: string;
-  items: InvoiceItem[];
-  subtotal: number;
-  shippingCost: number;
-  discountAmount: number;
-  discountCode: string | null;
-  total: number;
-};
-
-export type InvoiceSeller = {
-  sellerName: string;
-  sellerStreet: string;
-  sellerZip: string;
-  sellerCity: string;
-  sellerCountry: string;
-  sellerEmail: string;
-  vatId: string;
-  taxRatePercent: number;
-  bankDetails?: string | null;
-  // Pflichtangaben in Geschäftsbriefen for registered legal forms (§37a
-  // HGB / §35a GmbHG) — optional because a sole proprietorship (the
-  // default legalForm in company-settings) has neither. See
-  // buildLegalFooterLines() in emailTemplates.ts for the same fields'
-  // equivalent treatment in the email footer.
-  registerCourt?: string | null;
-  registerNumber?: string | null;
-  managingDirector?: string | null;
-};
-
-// Used only by /company-settings-preview's Live Preview — a fixed sample
-// order so the admin sees a realistic-looking invoice while editing
-// company-settings fields, without depending on any real order existing.
-export const SAMPLE_INVOICE_ORDER: InvoiceOrder = {
-  orderNumber: "#EP-0001-A7K2",
-  invoiceNumber: "RE-0001",
-  invoiceIssuedAt: new Date().toISOString(),
-  customerFirstName: "Max",
-  customerLastName: "Mustermann",
-  deliveryMethod: "address",
-  street: "Musterweg 5",
-  zip: "10115",
-  city: "Berlin",
-  country: "Deutschland",
-  paymentMethodTitle: "Kreditkarte",
-  items: [
-    { productName: "ToDo-Karten – Set", quantity: 1, unitPrice: 12.9, taxRatePercent: 19, bundleContents: null },
-    { productName: "Wochenplaner – Überblick", quantity: 2, unitPrice: 14.9, taxRatePercent: 19, bundleContents: null },
-  ],
-  subtotal: 42.7,
-  shippingCost: 0,
-  discountAmount: 5,
-  discountCode: "WILLKOMMEN10",
-  total: 37.7,
-};
-
-// "Überweisung" (bank transfer) is the only payment method on this shop
-// that ISN'T settled immediately — Kreditkarte/PayPal both capture at
-// checkout. Rather than hardcode a list of "immediate" method titles
-// (fragile the moment a new one is added in Payload's payment-methods
-// collection), the only method that's ever NOT immediate is named
-// explicitly — everything else defaults to "paid already".
-function isPaidImmediately(paymentMethodTitle: string): boolean {
-  return paymentMethodTitle !== "Überweisung";
-}
-
-// Distributes the order-level discount/shipping proportionally across each
-// item's gross line total before computing that line's net/tax — so the
-// per-rate summary still reconciles exactly to `order.total` even when a
-// discount or shipping cost is present alongside items taxed at different
-// rates. Falls back to the seller's default rate for any line that
-// predates this field (older orders had no per-item snapshot).
-function groupByTaxRate(order: InvoiceOrder, defaultRate: number): { rate: number; net: number; tax: number; gross: number }[] {
-  return computeTaxBreakdown(
-    order.items.map((item) => ({ quantity: item.quantity, unitPrice: item.unitPrice, taxRatePercent: item.taxRatePercent ?? defaultRate })),
-    order.subtotal,
-    order.discountAmount,
-    order.shippingCost,
-  );
-}
-
-// Exported (not just used internally by renderInvoicePdf below) so
-// /company-settings-preview's client component can mount it directly with
-// @react-pdf/renderer's browser-side <PDFViewer> — a live, in-browser
-// rendered PDF that re-renders as the admin edits company-settings fields
-// via Payload's postMessage-based useLivePreview(), no server round-trip
-// needed for each keystroke the way an HTML preview would.
-export function InvoiceDocument({ order, seller }: { order: InvoiceOrder; seller: InvoiceSeller }) {
-  const rateGroups = groupByTaxRate(order, seller.taxRatePercent);
-  const paid = isPaidImmediately(order.paymentMethodTitle);
-  const deliveryLine =
-    order.deliveryMethod === "address" ? order.street : `Packstation ${order.packstationNumber} · Postnummer ${order.postNumber}`;
-  const shippingLine =
-    order.shippingDeliveryMethod === "packstation"
-      ? `Packstation ${order.shippingPackstationNumber} · Postnummer ${order.shippingPostNumber}`
-      : order.shippingStreet;
-  const addressBlockStyle = order.hasDifferentShippingAddress ? styles.addressBlockThird : styles.addressBlock;
-
-  return (
-    <Document>
-      <Page size="A4" style={styles.page}>
-        <View style={styles.headerBand}>
-          <Text style={styles.wordmark}>einfach produktiv.</Text>
-          <Text style={styles.kindLabel}>RECHNUNG</Text>
-        </View>
-
-        <View style={styles.body}>
-          <View style={styles.addressRow}>
-            <View style={addressBlockStyle}>
-              <Text style={styles.addressLabel}>Von</Text>
-              <Text style={styles.addressLine}>{seller.sellerName}</Text>
-              <Text style={styles.addressLine}>{seller.sellerStreet}</Text>
-              <Text style={styles.addressLine}>
-                {seller.sellerZip} {seller.sellerCity}
-              </Text>
-              <Text style={styles.addressLine}>{seller.sellerCountry}</Text>
-            </View>
-            <View style={addressBlockStyle}>
-              <Text style={styles.addressLabel}>An</Text>
-              <Text style={styles.addressLine}>
-                {order.customerFirstName} {order.customerLastName}
-              </Text>
-              <Text style={styles.addressLine}>{deliveryLine}</Text>
-              <Text style={styles.addressLine}>
-                {order.zip} {order.city}
-              </Text>
-              <Text style={styles.addressLine}>{order.country}</Text>
-            </View>
-            {order.hasDifferentShippingAddress && (
-              <View style={addressBlockStyle}>
-                <Text style={styles.addressLabel}>Lieferadresse</Text>
-                <Text style={styles.addressLine}>
-                  {order.shippingFirstName} {order.shippingLastName}
-                </Text>
-                <Text style={styles.addressLine}>{shippingLine}</Text>
-                <Text style={styles.addressLine}>
-                  {order.shippingZip} {order.shippingCity}
-                </Text>
-                <Text style={styles.addressLine}>{order.shippingCountry}</Text>
-              </View>
-            )}
-          </View>
-
-          <View style={styles.metaRow}>
-            <View style={styles.metaBox}>
-              <Text style={styles.metaLabel}>Rechnungs-Nr.</Text>
-              <Text style={styles.metaValue}>{order.invoiceNumber}</Text>
-            </View>
-            <View style={styles.metaBox}>
-              <Text style={styles.metaLabel}>Datum</Text>
-              <Text style={styles.metaValue}>{formatDate(order.invoiceIssuedAt)}</Text>
-            </View>
-            <View style={styles.metaBox}>
-              <Text style={styles.metaLabel}>Bestellnummer</Text>
-              <Text style={styles.metaValue}>{order.orderNumber}</Text>
-            </View>
-            {paid && (
-              <View style={styles.paidBadge}>
-                <Text style={styles.paidBadgeText}>✓ Bereits beglichen ({order.paymentMethodTitle})</Text>
-              </View>
-            )}
-          </View>
-
-          <View style={styles.table}>
-            <View style={styles.tableHeader}>
-              <View style={styles.colImage} />
-              <Text style={[styles.colName, styles.headerCell]}>Artikel</Text>
-              <Text style={[styles.colQty, styles.headerCell]}>Menge</Text>
-              <Text style={[styles.colPrice, styles.headerCell]}>Einzelpreis</Text>
-              <Text style={[styles.colTotal, styles.headerCell]}>Betrag</Text>
-            </View>
-            {order.items.map((item, i) => (
-              <View style={[styles.tableRow, i % 2 === 1 ? styles.tableRowAlt : {}]} key={i}>
-                <View style={styles.colImage}>
-                  {item.imageUrl && <Image src={item.imageUrl} style={styles.itemImage} />}
-                </View>
-                <View style={styles.colName}>
-                  <Text>
-                    {item.productName}
-                    {item.variantName ? ` (${item.variantName})` : ""}
-                  </Text>
-                  {item.bundleContents ? <Text style={styles.bundleLine}>{item.bundleContents}</Text> : null}
-                </View>
-                <Text style={styles.colQty}>{item.quantity}</Text>
-                <Text style={styles.colPrice}>{formatPrice(item.unitPrice)}</Text>
-                <Text style={styles.colTotal}>{formatPrice(item.quantity * item.unitPrice)}</Text>
-              </View>
-            ))}
-          </View>
-
-          <View style={styles.summary}>
-            <View style={styles.summaryBox}>
-              {order.discountAmount > 0 && (
-                <View style={styles.summaryRow}>
-                  <Text style={styles.summaryLabel}>Rabatt{order.discountCode ? ` (${order.discountCode})` : ""}</Text>
-                  <Text style={styles.summaryValue}>-{formatPrice(order.discountAmount)}</Text>
-                </View>
-              )}
-              <View style={styles.summaryRow}>
-                <Text style={styles.summaryLabel}>Versand</Text>
-                <Text style={styles.summaryValue}>{order.shippingCost === 0 ? "Kostenlos" : formatPrice(order.shippingCost)}</Text>
-              </View>
-              {rateGroups.map((g) => (
-                <React.Fragment key={g.rate}>
-                  <View style={styles.summaryRow}>
-                    <Text style={styles.summaryLabel}>Netto</Text>
-                    <Text style={styles.summaryValue}>{formatPrice(g.net)}</Text>
-                  </View>
-                  <View style={styles.summaryRow}>
-                    <Text style={styles.summaryLabel}>zzgl. {g.rate}% MwSt.</Text>
-                    <Text style={styles.summaryValue}>{formatPrice(g.tax)}</Text>
-                  </View>
-                </React.Fragment>
-              ))}
-              <View style={styles.grandTotalRow}>
-                <Text style={styles.grandTotalLabel}>Gesamt</Text>
-                <Text style={styles.grandTotalValue}>{formatPrice(order.total)}</Text>
-              </View>
-            </View>
-          </View>
-
-        </View>
-
-        <View style={styles.footer} fixed>
-          <Text>
-            {seller.sellerName} · {seller.sellerStreet}, {seller.sellerZip} {seller.sellerCity} · {seller.sellerEmail} · USt-IdNr.{" "}
-            {seller.vatId}
-            {seller.registerCourt && seller.registerNumber ? ` · ${seller.registerCourt} · ${seller.registerNumber}` : ""}
-            {seller.managingDirector ? ` · Geschäftsführung: ${seller.managingDirector}` : ""}
-          </Text>
-          {seller.bankDetails ? <Text style={{ marginTop: 4 }}>Bankverbindung (für Überweisung): {seller.bankDetails}</Text> : null}
-        </View>
-      </Page>
-    </Document>
-  );
-}
-
-export async function renderInvoicePdf(order: InvoiceOrder, seller: InvoiceSeller): Promise<Buffer> {
-  return renderToBuffer(<InvoiceDocument order={order} seller={seller} />);
-}
-
-// Exported for unit testing (see app/lib/__tests__/invoicePdf.test.ts) —
-// the actual money math and payment-status logic, independent of PDF
-// rendering.
-export const __testables = { isPaidImmediately, groupByTaxRate };

app/lib/order.ts

@@ -8,6 +8,15 @@ import type { CartItem } from "./cart";
 // generated locally), read once by /bestellbestaetigung.
 export const ORDER_KEY = "ep_last_order";
 
+// Written for a gated payment method (Kreditkarte/PayPal) right before
+// PaymentStep hands off to Stripe/the test-confirm flow — see
+// spicy-leaping-pizza.md §3/§7. Same OrderSnapshot shape as ORDER_KEY,
+// but this one is provisional: /checkout/verarbeitung only promotes it
+// to ORDER_KEY once polling confirms the payment actually succeeded, so
+// an abandoned/failed payment never leaves a confirmation-page-ready
+// snapshot behind.
+export const PENDING_ORDER_KEY = "ep_pending_order";
+
 export type OrderSnapshot = {
   items: CartItem[];
   orderNumber: string;
@@ -19,4 +28,15 @@ export type OrderSnapshot = {
    * null/0 when no discount was ever applied. */
   discountCode: string | null;
   discountAmount: number;
+  /** Decided server-side at checkout (live VIES check, see api/checkout/
+   * route.ts) — /bestellbestaetigung needs this to know whether to show
+   * the exempt (net, de-grossed) totals instead of the normal VAT-
+   * inclusive catalog prices it would otherwise re-derive live. */
+  vatExempt: boolean;
+  /** §19 UStG — this tenant's company-settings.kleinunternehmer as it stood
+   * at checkout time (see api/checkout/route.ts), never re-derived live —
+   * takes precedence over vatExempt above wherever both would otherwise
+   * apply. /bestellbestaetigung uses this to show the §19 notice instead
+   * of a per-item "inkl. X% MwSt." hint/VAT breakdown. */
+  kleinunternehmer: boolean;
 };

app/lib/orderEmail.ts

@@ -13,6 +13,10 @@ export type OrderConfirmationEmailData = OrderConfirmationData & {
   invoiceIssuedAt: string;
   customerFirstName: string;
   customerLastName: string;
+  companyName?: string | null;
+  vatId?: string | null;
+  vatExempt?: boolean;
+  kleinunternehmer?: boolean;
   deliveryMethod: "address" | "packstation";
   street?: string | null;
   packstationNumber?: string | null;
@@ -68,6 +72,10 @@ export async function sendOrderConfirmationEmail(order: OrderConfirmationEmailDa
         invoiceIssuedAt: order.invoiceIssuedAt,
         customerFirstName: order.customerFirstName,
         customerLastName: order.customerLastName,
+        companyName: order.companyName,
+        vatId: order.vatId,
+        vatExempt: order.vatExempt,
+        kleinunternehmer: order.kleinunternehmer,
         deliveryMethod: order.deliveryMethod,
         street: order.street,
         packstationNumber: order.packstationNumber,

app/lib/orderServer.ts

@@ -34,6 +34,18 @@ export type CreateOrderInput = {
   customerFirstName: string;
   customerLastName: string;
   customerEmail: string;
+  // Optional B2B snapshot fields — see Orders.ts's own comment on why both
+  // are independently optional.
+  companyName?: string;
+  vatId?: string;
+  // Decided server-side in api/checkout/route.ts (a live VIES check at the
+  // moment of purchase, never guessed) — see Orders.ts's own comment.
+  vatExempt: boolean;
+  // §19 UStG — this tenant's company-settings.kleinunternehmer as read at
+  // the moment of purchase, snapshotted onto the order (same reasoning as
+  // vatExempt above, plus Orders.ts's own field comment).
+  kleinunternehmer: boolean;
+  vatIdValidatedAt: string | null;
   deliveryMethod: "address" | "packstation";
   street?: string;
   packstationNumber?: string;
@@ -64,9 +76,28 @@ export type CreateOrderInput = {
   discountCode: string | null;
   discountAmount: number;
   total: number;
+  // Gated-payment fields (see spicy-leaping-pizza.md §1/§3) — all three
+  // omitted for a manual/Überweisung order, which is exactly today's
+  // behavior (Orders.ts's own field defaults apply: status 'received',
+  // paymentProvider 'manual', paymentStatus 'not_applicable').
+  status?: "pending_payment";
+  paymentProvider?: "stripe";
+  paymentStatus?: "pending";
+  // Known before the order is created (Stripe generates a PaymentIntent id
+  // immediately, independent of any order existing yet) — persisted at
+  // creation time specifically so the expirePendingPayments cleanup job
+  // has something to reconcile against even if the webhook metadata
+  // round-trip (stripeProvider.attachOrderMetadata) never completes.
+  providerReference?: string;
 };
 
-export type CreatedOrder = { orderNumber: string; createdAt: string; invoiceNumber: string; invoiceIssuedAt: string };
+export type CreatedOrder = {
+  id: number;
+  orderNumber: string;
+  createdAt: string;
+  invoiceNumber: string | null;
+  invoiceIssuedAt: string | null;
+};
 
 export async function createOrder(input: CreateOrderInput): Promise<CreatedOrder | null> {
   const tenantId = await resolveTenantId();
@@ -87,6 +118,11 @@ export async function createOrder(input: CreateOrderInput): Promise<CreatedOrder
       customerFirstName: input.customerFirstName,
       customerLastName: input.customerLastName,
       customerEmail: input.customerEmail,
+      companyName: input.companyName,
+      vatId: input.vatId,
+      vatExempt: input.vatExempt,
+      kleinunternehmer: input.kleinunternehmer,
+      vatIdValidatedAt: input.vatIdValidatedAt,
       deliveryMethod: input.deliveryMethod,
       street: input.street,
       packstationNumber: input.packstationNumber,
@@ -121,6 +157,10 @@ export async function createOrder(input: CreateOrderInput): Promise<CreatedOrder
       discountCode: input.discountCode,
       discountAmount: input.discountAmount,
       total: input.total,
+      ...(input.status ? { status: input.status } : {}),
+      ...(input.paymentProvider ? { paymentProvider: input.paymentProvider } : {}),
+      ...(input.paymentStatus ? { paymentStatus: input.paymentStatus } : {}),
+      ...(input.providerReference ? { providerReference: input.providerReference } : {}),
     }),
   });
 
@@ -129,8 +169,11 @@ export async function createOrder(input: CreateOrderInput): Promise<CreatedOrder
     return null;
   }
 
-  const data: { doc: { orderNumber: string; createdAt: string; invoiceNumber: string; invoiceIssuedAt: string } } = await res.json();
+  const data: {
+    doc: { id: number; orderNumber: string; createdAt: string; invoiceNumber: string | null; invoiceIssuedAt: string | null };
+  } = await res.json();
   return {
+    id: data.doc.id,
     orderNumber: data.doc.orderNumber,
     createdAt: data.doc.createdAt,
     invoiceNumber: data.doc.invoiceNumber,

app/lib/payload.ts

@@ -93,12 +93,23 @@ export type PostDetail = BlogPost & {
    * the card entirely, per-post choice (unlike Products.spotlight, which
    * is a single site-wide flag). */
   relatedProduct: Product | null;
+  /** SEO overrides (Posts.ts's "SEO" collapsible group) — each null when
+   * empty, callers fall back to title/excerpt/thumbnail themselves rather
+   * than baking the fallback in here, so the distinction between "no
+   * override set" and "override happens to equal the normal value" stays
+   * visible to whoever reads this. */
+  seoTitle: string | null;
+  seoDescription: string | null;
+  seoImage: string | null;
 };
 
 export type PayloadPostDetail = PayloadPost & {
   content: unknown;
   quoteLabel: string | null;
   relatedProduct: PayloadProduct | null;
+  seoTitle?: string | null;
+  seoDescription?: string | null;
+  seoImage?: { url: string } | number | null;
 };
 
 // Shared by getPostBySlug() and LivePostContent.tsx (which re-maps the raw
@@ -120,6 +131,9 @@ export function mapPayloadPost(doc: PayloadPostDetail): PostDetail {
     featured: doc.featured,
     quoteLabel: doc.quoteLabel ?? "",
     relatedProduct: doc.relatedProduct ? mapPayloadProduct(doc.relatedProduct) : null,
+    seoTitle: doc.seoTitle || null,
+    seoDescription: doc.seoDescription || null,
+    seoImage: typeof doc.seoImage === "object" && doc.seoImage ? doc.seoImage.url : null,
   };
 }
 
@@ -179,13 +193,21 @@ export type Product = {
   // Derived, like outOfStock — no raw stock count/threshold leaked, callers
   // only ever need "should a low-stock hint show for this right now".
   lowStock: boolean;
+  // Unlike outOfStock/lowStock, this DOES expose the real number — it's
+  // the cap the add-to-cart controls (AddToCartButton/AddToCartInlineButton,
+  // CartContent's quantity stepper) need client-side to stop a shopper from
+  // putting more in the cart than checkout would actually accept, instead
+  // of only finding out at the very last step (api/checkout/route.ts's own
+  // stock check, which stays as the authoritative server-side guard). null
+  // means "no cap" — backorder allowed or inventory not tracked.
+  maxQty: number | null;
   // Per-product override — null means "use the tenant's default rate"
   // (CompanySettings.taxRatePercent, fetched separately since it's behind
   // an admin-only secret, see getCompanySettings()). Display-only on the
   // storefront; the actual rate used for order totals is resolved and
   // snapshotted server-side at checkout (api/checkout/route.ts).
   taxRatePercent: number | null;
-  variants: { name: string; priceOverride: number | null; outOfStock: boolean; lowStock: boolean }[];
+  variants: { name: string; priceOverride: number | null; outOfStock: boolean; lowStock: boolean; maxQty: number | null }[];
 };
 
 type PayloadProduct = {
@@ -237,6 +259,13 @@ function isLowStock(trackInventory: boolean, stock: number | null, threshold: nu
   return trackInventory && threshold != null && stock != null && stock > 0 && stock <= threshold;
 }
 
+// null (no cap) whenever backorder is allowed or inventory isn't tracked —
+// only a hard-tracked, non-backorderable stock count actually limits what a
+// shopper can add to their cart.
+function maxPurchasableQty(trackInventory: boolean, stock: number | null, allowBackorder: boolean): number | null {
+  return trackInventory && !allowBackorder ? (stock ?? 0) : null;
+}
+
 // Shared by getProducts() and getPostBySlug()'s relatedProduct — kept in
 // one place instead of duplicating the same field mapping, which is
 // exactly the kind of drift this session's Shipping Settings work was
@@ -260,12 +289,14 @@ export function mapPayloadProduct(product: PayloadProduct): Product {
       typeof product.spotlightImage === "object" && product.spotlightImage ? product.spotlightImage.url : null,
     outOfStock: isOutOfStock(product.trackInventory, product.stock, product.allowBackorder),
     lowStock: isLowStock(product.trackInventory, product.stock, product.lowStockThreshold),
+    maxQty: maxPurchasableQty(product.trackInventory, product.stock, product.allowBackorder),
     taxRatePercent: product.taxRatePercent ?? null,
     variants: (product.variants ?? []).map((v) => ({
       name: v.name,
       priceOverride: v.priceOverride,
       outOfStock: isOutOfStock(v.trackInventory, v.stock, v.allowBackorder),
       lowStock: isLowStock(v.trackInventory, v.stock, v.lowStockThreshold),
+      maxQty: maxPurchasableQty(v.trackInventory, v.stock, v.allowBackorder),
     })),
   };
 }
@@ -454,6 +485,46 @@ export async function getShippingMethods(): Promise<ShippingMethod[]> {
   }));
 }
 
+// Feeds /checkout's "Land" <select> (both the billing address and the
+// optional shipping-address override) and its PLZ digit-count validation
+// — previously a hardcoded array + PLZ_DIGITS map in CheckoutContent.tsx
+// itself. Which countries are actually deliverable can now change without
+// a code deploy (e.g. temporarily dropping Schweiz — no customs/export-
+// invoice handling exists for it yet). Deliberately unrelated to VAT-
+// exemption eligibility (lib/vatExemption.ts's isExemptionEligibleCountry(),
+// still hardcoded to "Österreich") — that's a legal/tax-law question, not
+// a shipping-logistics one, and stays in code on purpose.
+export type ShippingCountry = {
+  name: string;
+  plzDigits: number;
+};
+
+type PayloadShippingCountry = ShippingCountry & { active: boolean };
+
+export async function getShippingCountries(): Promise<ShippingCountry[]> {
+  const params = new URLSearchParams({
+    "where[tenant.slug][equals]": TENANT_SLUG,
+    "where[active][equals]": "true",
+    sort: "sortOrder",
+    limit: "20",
+  });
+
+  const res = await fetch(`${PAYLOAD_URL}/api/shipping-countries?${params}`, {
+    next: { revalidate: 60 },
+  });
+  if (!res.ok) {
+    console.error(`getShippingCountries: Payload returned ${res.status} ${res.statusText}`);
+    return [];
+  }
+
+  const data: { docs?: PayloadShippingCountry[] } = await res.json();
+  const docs = Array.isArray(data.docs) ? data.docs : [];
+  return docs.map((doc) => ({
+    name: doc.name,
+    plzDigits: doc.plzDigits,
+  }));
+}
+
 export type ShippingSettings = {
   handlingDays: { min: number; max: number };
   transitDays: { min: number; max: number };
@@ -506,13 +577,19 @@ export async function getShippingSettings(): Promise<ShippingSettings> {
   };
 }
 
-export type PaymentMethod = { id: number; title: string; icons: string[] };
+// `provider` drives the checkout branch in app/api/checkout/route.ts —
+// 'manual' (Überweisung) keeps today's immediate-order behavior, 'stripe'
+// (Kreditkarte/PayPal) routes through the payment-intent/webhook-gated
+// flow. Defaults to 'manual' below for any row created before this field
+// existed, matching the Payload field's own default.
+export type PaymentMethod = { id: number; title: string; icons: string[]; provider: "manual" | "stripe" };
 
 type PayloadPaymentMethod = {
   id: number;
   title: string;
   active: boolean;
   icons: { icon: { url: string } | number | null }[];
+  provider?: "manual" | "stripe";
 };
 
 export async function getPaymentMethods(): Promise<PaymentMethod[]> {
@@ -540,9 +617,42 @@ export async function getPaymentMethods(): Promise<PaymentMethod[]> {
     icons: (doc.icons ?? [])
       .map((row) => (typeof row.icon === "object" && row.icon ? row.icon.url : null))
       .filter((url): url is string => Boolean(url)),
+    provider: doc.provider ?? "manual",
   }));
 }
 
+export type CheckoutPaymentOption = PaymentMethod & { hint?: string };
+
+// Kreditkarte and PayPal both resolve to `provider: 'stripe'` today, and
+// both end up on the exact same Stripe PaymentIntent
+// (`automatic_payment_methods: { enabled: true }` — Stripe's own
+// recommended Payment Element pattern lets Stripe itself decide which
+// eligible method to show, rather than the older per-method
+// Checkout-Session split). Pre-selecting one of two identical-behind-the-
+// scenes rows before the payment step is therefore no longer a real
+// choice, just redundant friction — so this collapses every active
+// `stripe` row into one "Online-Zahlung" option (representative id =
+// the first such row's, since app/api/checkout/route.ts only branches on
+// `provider`, never on which specific stripe row was picked) with a hint
+// explaining that the actual instrument is chosen on the next screen.
+// `manual` rows (Überweisung) pass through unchanged — one real gateway
+// there, one option, nothing to collapse.
+export function groupPaymentMethodsForCheckout(methods: PaymentMethod[]): CheckoutPaymentOption[] {
+  const manual = methods.filter((m) => m.provider !== "stripe");
+  const stripeMethods = methods.filter((m) => m.provider === "stripe");
+  if (stripeMethods.length === 0) return manual;
+
+  const combinedIcons = Array.from(new Set(stripeMethods.flatMap((m) => m.icons)));
+  const online: CheckoutPaymentOption = {
+    id: stripeMethods[0].id,
+    title: "Online-Zahlung",
+    icons: combinedIcons,
+    provider: "stripe",
+    hint: "Kreditkarte, PayPal & weitere Methoden — die genaue Zahlungsart wählst du im nächsten Schritt.",
+  };
+  return [...manual, online];
+}
+
 export type WerkzeugeCard = {
   id: number;
   title: string;
@@ -723,13 +833,19 @@ export async function getEmailTemplate(
 
 export type CompanySettings = {
   sellerName: string;
-  // Drives whether registerCourt/registerNumber/managingDirector are
-  // populated — mirrors Payload's CompanySettings.ts collection exactly
-  // (same option values), see buildLegalFooterLines() in emailTemplates.ts.
+  // Drives whether registerCourt/registerNumber/managingDirector/
+  // shareCapital are populated — mirrors Payload's CompanySettings.ts
+  // collection exactly (same option values), see buildLegalFooterLines()
+  // in emailTemplates.ts.
   legalForm: "sole-proprietorship" | "e-k" | "gbr" | "ohg" | "kg" | "gmbh" | "ug" | "ag";
   registerCourt: string | null;
   registerNumber: string | null;
   managingDirector: string | null;
+  // Stammkapital (GmbH/UG) / Grundkapital (AG) — optional, NOT a
+  // Pflichtangabe (only shown for legal forms that have this concept at
+  // all; see CompanySettings.ts's SHARE_CAPITAL_APPLICABLE_FORMS and its
+  // own comment on why this is voluntary, not required, disclosure).
+  shareCapital: number | null;
   sellerStreet: string;
   sellerZip: string;
   sellerCity: string;
@@ -737,7 +853,16 @@ export type CompanySettings = {
   sellerEmail: string;
   vatId: string;
   taxRatePercent: number;
-  bankDetails: string | null;
+  // Kleinunternehmerregelung (§19 UStG) — when true, checkout forces every
+  // order's items to 0% VAT (never de-grossed, unlike the intra-community
+  // exemption) and the tax rate above is ignored. Read live only at
+  // checkout time (see api/checkout/route.ts) to decide what to snapshot
+  // onto the new order — never read live when rendering an existing
+  // order's invoice, see OrderSnapshot/CustomerOrderDetail's own
+  // `kleinunternehmer` field for why.
+  kleinunternehmer: boolean;
+  iban: string | null;
+  bic: string | null;
 };
 
 // Server-only in practice (only ever called from app/lib/invoiceData.ts),
@@ -779,3 +904,72 @@ export async function getDefaultTaxRatePercent(): Promise<number> {
   const data: { docs?: { taxRatePercent: number }[] } = await res.json();
   return data.docs?.[0]?.taxRatePercent ?? 19;
 }
+
+// Same ISR-cached, public-catalog-freshness fetch as getDefaultTaxRatePercent()
+// above (a separate round trip rather than reusing getCompanySettings()'s
+// deliberate cache: "no-store") — powers the "inkl. X% MwSt." storefront
+// hints (dropped entirely when this is true, see ProductGrid.tsx/
+// ProductSpotlight.tsx/etc.) and the cart/checkout VAT-breakdown display.
+export async function getKleinunternehmer(): Promise<boolean> {
+  const params = new URLSearchParams({ "where[tenant.slug][equals]": TENANT_SLUG, limit: "1" });
+  const res = await fetch(`${PAYLOAD_URL}/api/company-settings?${params}`, {
+    headers: { "x-order-service-secret": process.env.ORDER_SERVICE_SECRET || "" },
+    next: { revalidate: 60 },
+  });
+  if (!res.ok) {
+    console.error(`getKleinunternehmer: Payload returned ${res.status} ${res.statusText}`);
+    return false;
+  }
+  const data: { docs?: { kleinunternehmer: boolean }[] } = await res.json();
+  return data.docs?.[0]?.kleinunternehmer ?? false;
+}
+
+export type SeoSettings = {
+  defaultTitle: string | null;
+  titleTemplate: string | null;
+  defaultDescription: string | null;
+  defaultOgImage: string | null;
+};
+
+// Fallback matches the values hardcoded in app/layout.tsx before this field
+// existed — used whenever the backend field is empty or unreachable, so
+// filling in the CompanySettings SEO tab is optional, not a hard
+// dependency for the site to render sensible metadata.
+const SEO_SETTINGS_FALLBACK: SeoSettings = {
+  defaultTitle: "einfach produktiv. – Werkzeuge und Impulse für einen leichteren Alltag",
+  titleTemplate: "%s | einfach produktiv.",
+  defaultDescription: "Werkzeuge, Impulse und ein Blog für mehr Klarheit im Alltag.",
+  defaultOgImage: null,
+};
+
+// Same ISR-cached, public-catalog-freshness fetch as getKleinunternehmer()
+// above — every page's metadata reads this, so it needs to be cheap/cached,
+// not the always-fresh getCompanySettings() used for invoice generation.
+export async function getSeoSettings(): Promise<SeoSettings> {
+  const params = new URLSearchParams({ "where[tenant.slug][equals]": TENANT_SLUG, limit: "1", depth: "1" });
+  const res = await fetch(`${PAYLOAD_URL}/api/company-settings?${params}`, {
+    headers: { "x-order-service-secret": process.env.ORDER_SERVICE_SECRET || "" },
+    next: { revalidate: 60 },
+  });
+  if (!res.ok) {
+    console.error(`getSeoSettings: Payload returned ${res.status} ${res.statusText}`);
+    return SEO_SETTINGS_FALLBACK;
+  }
+  const data: {
+    docs?: {
+      seoDefaultTitle?: string | null;
+      seoTitleTemplate?: string | null;
+      seoDefaultDescription?: string | null;
+      seoDefaultOgImage?: { url?: string } | number | null;
+    }[];
+  } = await res.json();
+  const doc = data.docs?.[0];
+  if (!doc) return SEO_SETTINGS_FALLBACK;
+  return {
+    defaultTitle: doc.seoDefaultTitle || SEO_SETTINGS_FALLBACK.defaultTitle,
+    titleTemplate: doc.seoTitleTemplate || SEO_SETTINGS_FALLBACK.titleTemplate,
+    defaultDescription: doc.seoDefaultDescription || SEO_SETTINGS_FALLBACK.defaultDescription,
+    defaultOgImage:
+      (typeof doc.seoDefaultOgImage === "object" && doc.seoDefaultOgImage?.url) || SEO_SETTINGS_FALLBACK.defaultOgImage,
+  };
+}

app/lib/payments/confirmPaymentEmail.ts

@@ -0,0 +1,31 @@
+import { sendOrderConfirmationEmail, type OrderConfirmationEmailData } from "../orderEmail";
+import { sendCriticalAlert } from "../alertAdmin";
+
+// The `order` snapshot returned by the backend's confirm-payment endpoint
+// (see docker/payload's src/lib/endpoints/confirmPayment.ts) — matches
+// OrderConfirmationEmailData minus `customerEmail`, which is passed
+// separately to sendOrderConfirmationEmail. Backend has no SMTP-based
+// order-confirmation sender of its own (only the 4 status-change
+// templates), so it returns everything needed here instead of the
+// frontend needing an authenticated order-read path it doesn't otherwise
+// have (ORDER_SERVICE_SECRET only ever authorizes *creating* an order).
+export type ConfirmPaymentOrderSnapshot = OrderConfirmationEmailData & { customerEmail: string };
+
+// Called from both the real Stripe webhook route and its PAYMENT_TEST_MODE
+// test-confirm sibling, right after confirm-payment reports success (and
+// NOT `alreadyProcessed: true` — a repeat delivery must never resend
+// this). Mirrors exactly what app/api/checkout/route.ts already does for
+// a manual/Überweisung order today, just triggered from the payment
+// webhook instead of the checkout request itself for gated methods.
+export async function sendConfirmedPaymentEmail(order: ConfirmPaymentOrderSnapshot): Promise<void> {
+  const { customerEmail, ...emailData } = order;
+  try {
+    await sendOrderConfirmationEmail(emailData, customerEmail);
+  } catch (err) {
+    sendCriticalAlert("Bestätigungs-Mail konnte nach Zahlungsbestätigung nicht gesendet werden", {
+      orderNumber: order.orderNumber,
+      customerEmail,
+      error: String(err),
+    });
+  }
+}

app/lib/payments/index.ts

@@ -0,0 +1,15 @@
+import { stripeProvider } from "./stripeProvider";
+import { mockProvider } from "./mockProvider";
+import type { PaymentProvider } from "./types";
+
+export * from "./types";
+
+// Defaults to test mode whenever no real Stripe key is configured, so a
+// fresh local checkout (or CI) never accidentally tries to call the real
+// Stripe API — matches PAYMENT_TEST_MODE's documented default in the plan.
+const TEST_MODE = process.env.PAYMENT_TEST_MODE
+  ? process.env.PAYMENT_TEST_MODE === "true"
+  : !process.env.STRIPE_SECRET_KEY;
+
+export const paymentProvider: PaymentProvider = TEST_MODE ? mockProvider : stripeProvider;
+export const isPaymentTestMode = TEST_MODE;

app/lib/payments/mockProvider.ts

@@ -0,0 +1,20 @@
+import type { PaymentProvider, CreatePaymentIntentResult } from "./types";
+
+// PAYMENT_TEST_MODE stand-in (plan §7) — no network call, no real Stripe
+// account needed. The synthetic providerReference is still persisted on
+// the order exactly like a real one, so the whole downstream pipeline
+// (webhooks/stripe/test-confirm, confirm-payment, expirePendingPayments)
+// runs unmodified against it.
+async function createPaymentIntent(): Promise<CreatePaymentIntentResult> {
+  const fakeId = `pi_test_${Math.random().toString(36).slice(2)}${Date.now().toString(36)}`;
+  return { clientSecret: `${fakeId}_secret_mock`, providerReference: fakeId };
+}
+
+async function attachOrderMetadata(): Promise<void> {
+  // No real PaymentIntent to attach metadata to — nothing to do. The
+  // test-confirm route (used instead of a real webhook in test mode)
+  // already receives the order's id directly from the client, so it
+  // never needs to resolve it via metadata the way the real webhook does.
+}
+
+export const mockProvider: PaymentProvider = { createPaymentIntent, attachOrderMetadata };

app/lib/payments/stripeProvider.ts

@@ -0,0 +1,85 @@
+import Stripe from "stripe";
+import type { PaymentProvider, CreatePaymentIntentInput, CreatePaymentIntentResult } from "./types";
+
+// Server-only — never imported from a "use client" file. Same
+// process.env-at-point-of-use convention as vies.ts/brevo.ts (no
+// throwing on a missing key; an unset STRIPE_SECRET_KEY just makes every
+// call fail at request time, which is the expected state whenever
+// PAYMENT_TEST_MODE is on and this module is never actually invoked).
+const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY || "";
+
+let client: Stripe | null = null;
+function getClient(): Stripe {
+  if (!client) client = new Stripe(STRIPE_SECRET_KEY);
+  return client;
+}
+
+async function createPaymentIntent(input: CreatePaymentIntentInput): Promise<CreatePaymentIntentResult> {
+  // automatic_payment_methods lets Stripe itself decide card vs. PayPal
+  // vs. any other method active on this account/region — one PaymentIntent
+  // covers both required methods, per the plan's provider choice (Payment
+  // Element, not per-method Checkout Sessions).
+  const intent = await getClient().paymentIntents.create({
+    amount: input.amountCents,
+    currency: input.currency,
+    receipt_email: input.customerEmail,
+    description: input.description,
+    automatic_payment_methods: { enabled: true },
+  });
+  if (!intent.client_secret) throw new Error("Stripe did not return a client_secret");
+  return { clientSecret: intent.client_secret, providerReference: intent.id };
+}
+
+// Called right after the order is persisted in Payload (see
+// app/api/checkout/route.ts) — the PaymentIntent has to exist before the
+// order can reference its id (providerReference), so metadata pointing
+// the other way (PaymentIntent -> order) can only be attached in a
+// second call, not at creation. This is what lets
+// app/api/webhooks/stripe/route.ts resolve an incoming
+// `payment_intent.*` event back to a specific Payload order without a
+// separate, unauthenticated-from-Stripe's-side lookup endpoint.
+//
+// Awaited but non-fatal to checkout on failure (see the call site) — the
+// order and its own `providerReference` field are already the source of
+// truth for admin/cleanup-job reconciliation; this metadata only matters
+// for the webhook's fast path.
+async function attachOrderMetadata(providerReference: string, metadata: { orderId: string; orderNumber: string }): Promise<void> {
+  await getClient().paymentIntents.update(providerReference, { metadata });
+}
+
+export const stripeProvider: PaymentProvider = { createPaymentIntent, attachOrderMetadata };
+
+const PAYMENT_METHOD_LABELS: Record<string, string> = { card: "Kreditkarte", paypal: "PayPal" };
+
+// Called only by the real webhook route on `payment_intent.succeeded` —
+// the checkout route snapshots a neutral "Online-Zahlung" title at order
+// creation (see its own comment: the customer hasn't chosen an instrument
+// yet at that point, Stripe's Payment Element does that next), this
+// resolves the actual one once Stripe reports it so the order/invoice/
+// confirmation email reflect what was really used, not a placeholder.
+// Best-effort: an unresolvable label just leaves the neutral title in
+// place (confirmPayment.ts only overwrites paymentMethodTitle when this
+// returns something), it doesn't fail the payment confirmation itself.
+export async function resolveStripePaymentMethodLabel(intent: Stripe.PaymentIntent): Promise<string | undefined> {
+  const pm = intent.payment_method;
+  const pmId = typeof pm === "string" ? pm : pm?.id;
+  if (!pmId) return undefined;
+  try {
+    const resolved = pm && typeof pm === "object" ? pm : await getClient().paymentMethods.retrieve(pmId);
+    return PAYMENT_METHOD_LABELS[resolved.type] ?? resolved.type;
+  } catch {
+    return undefined;
+  }
+}
+
+// Only used by the real webhook route (never through the PaymentProvider
+// interface — signature verification is inherently Stripe-shaped, no
+// other provider exists to share this contract with yet).
+export function verifyStripeWebhookSignature(rawBody: string, signatureHeader: string): Stripe.Event | null {
+  const webhookSecret = process.env.STRIPE_WEBHOOK_SECRET || "";
+  try {
+    return getClient().webhooks.constructEvent(rawBody, signatureHeader, webhookSecret);
+  } catch {
+    return null;
+  }
+}

app/lib/payments/types.ts

@@ -0,0 +1,32 @@
+// Provider-agnostic contract — see the approved payment plan
+// (spicy-leaping-pizza.md §0/§7). Stripe is the only real implementation
+// today (stripeProvider.ts); mockProvider.ts implements the same shape
+// for PAYMENT_TEST_MODE so the checkout route never branches on which
+// provider is active, only on whether one is configured at all.
+
+export type CreatePaymentIntentInput = {
+  amountCents: number;
+  currency: string;
+  customerEmail: string;
+  description: string;
+};
+
+export type CreatePaymentIntentResult = {
+  clientSecret: string;
+  providerReference: string;
+};
+
+export type ProviderPaymentUpdate = {
+  providerReference: string;
+  paymentStatus: "paid" | "failed";
+  paidAt: string;
+};
+
+export interface PaymentProvider {
+  createPaymentIntent(input: CreatePaymentIntentInput): Promise<CreatePaymentIntentResult>;
+  // Best-effort, awaited but never fatal to checkout — lets the webhook
+  // handler resolve providerReference -> order without the frontend
+  // having to persist a second field via an update path that doesn't
+  // otherwise exist (see stripeProvider.ts's own comment).
+  attachOrderMetadata(providerReference: string, metadata: { orderId: string; orderNumber: string }): Promise<void>;
+}

app/lib/taxBreakdown.ts

@@ -1,36 +0,0 @@
-// Previously duplicated as groupByTaxRate() independently inside
-// invoicePdf.tsx and correctionInvoicePdf.tsx (and, on the Payload backend,
-// their own copies) — pulled out so the storefront's own MwSt. breakdowns
-// (checkout summary, order confirmation page/email, account order pages)
-// can share the exact same math instead of a fourth hand-rolled version
-// drifting out of sync with what the actual invoices say.
-
-export type TaxBreakdownLine = { quantity: number; unitPrice: number; taxRatePercent: number };
-export type TaxBreakdownGroup = { rate: number; net: number; tax: number; gross: number };
-
-// Groups line items by their effective VAT rate, then scales each group's
-// gross total by however much shipping/discount moved the grand total away
-// from the raw item subtotal — proportional to that group's own share of
-// the subtotal, not a flat split. Passing discountAmount=0 and
-// shippingCost=0 (e.g. a Gutschrift, which excludes both) collapses `scale`
-// to 1, i.e. no adjustment at all.
-export function computeTaxBreakdown(
-  items: TaxBreakdownLine[],
-  subtotal: number,
-  discountAmount: number,
-  shippingCost: number,
-): TaxBreakdownGroup[] {
-  const groups = new Map<number, number>();
-  for (const item of items) {
-    const lineGross = item.quantity * item.unitPrice;
-    groups.set(item.taxRatePercent, (groups.get(item.taxRatePercent) ?? 0) + lineGross);
-  }
-  const scale = subtotal > 0 ? (subtotal - discountAmount + shippingCost) / subtotal : 1;
-  return Array.from(groups.entries())
-    .map(([rate, lineGross]) => {
-      const gross = lineGross * scale;
-      const net = gross / (1 + rate / 100);
-      return { rate, net, tax: gross - net, gross };
-    })
-    .sort((a, b) => b.rate - a.rate);
-}

app/lib/useNewsletterSignup.ts

@@ -0,0 +1,59 @@
+"use client";
+
+import { useRef, useState, type FormEvent } from "react";
+import { validateEmailFormat } from "./email";
+import type { NewsletterOptInSource } from "./brevo";
+
+// Shared state/submit logic behind every newsletter-signup form
+// (Newsletter.tsx, NewsletterModal.tsx, WeeklyImpulsesHero.tsx's inline
+// hero form, /challenge's EmailCapture) — four places with the same
+// email+consent+submit shape but different markup/visual style, so only
+// the logic is shared here rather than a one-size-fits-all component.
+export function useNewsletterSignup(source: NewsletterOptInSource) {
+  const [email, setEmail] = useState("");
+  const [emailError, setEmailError] = useState("");
+  const [consent, setConsent] = useState(false);
+  const [status, setStatus] = useState<"idle" | "submitting" | "success" | "error">("idle");
+  const [error, setError] = useState("");
+  const emailRef = useRef<HTMLInputElement>(null);
+
+  function handleEmailChange(value: string) {
+    setEmail(value);
+    if (emailError) setEmailError("");
+  }
+
+  function handleEmailBlur(value: string) {
+    setEmailError(validateEmailFormat(value));
+  }
+
+  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    const formatError = validateEmailFormat(email);
+    setEmailError(formatError);
+    if (formatError) {
+      emailRef.current?.focus();
+      return;
+    }
+    setStatus("submitting");
+    setError("");
+    try {
+      const res = await fetch("/api/newsletter/subscribe", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, consent, source }),
+      });
+      const data = await res.json();
+      if (!data.ok) {
+        setError(data.reason || "Anmeldung ist fehlgeschlagen. Bitte versuche es später erneut.");
+        setStatus("error");
+        return;
+      }
+      setStatus("success");
+    } catch {
+      setError("Anmeldung ist fehlgeschlagen. Bitte versuche es später erneut.");
+      setStatus("error");
+    }
+  }
+
+  return { email, emailError, consent, setConsent, status, error, emailRef, handleEmailChange, handleEmailBlur, handleSubmit };
+}

app/lib/vatExemption.ts

@@ -0,0 +1,54 @@
+// Innergemeinschaftliche Lieferung (§4 Nr. 1b UStG) — a cross-border EU B2B
+// sale with a VIES-validated buyer VAT ID is zero-rated. Kept separate from
+// cartTotals.ts/computeTaxBreakdown (which assume each item's own
+// catalog tax rate) rather than bolted onto them — this is a genuinely
+// different computation (every rate forced to 0%, every price de-grossed
+// from its normal VAT-inclusive catalog price to net), used in exactly two
+// places: CheckoutContent.tsx's live preview and api/checkout/route.ts's
+// authoritative recompute, which must stay in exact agreement.
+//
+// Deliberate simplification: `discountAmount` is carried over unchanged
+// (not itself re-derived against the de-grossed subtotal) — a discount
+// code combined with a validated cross-border exemption is a narrow
+// overlap, and the existing discount math (percent-of-subtotal or a flat
+// amount, see cartTotals.ts's computeCartTotals) already produces a
+// reasonable number either way. Revisit only if this combination turns out
+// to matter in practice.
+export type ExemptLine = { quantity: number; grossUnitPrice: number; taxRatePercent: number };
+
+function roundMoney(amount: number): number {
+  return Math.round(amount * 100) / 100;
+}
+
+function degross(grossAmount: number, ratePercent: number): number {
+  return grossAmount / (1 + ratePercent / 100);
+}
+
+export type ExemptTotals = { subtotal: number; shippingCost: number; total: number };
+
+// `shippingCostGross`/`defaultTaxRate` — shipping has no per-line tax rate
+// of its own (see taxBreakdown.ts's proportional-scale comment), so it's
+// de-grossed at the tenant's default rate as the representative rate,
+// same fallback cartTotals.ts's effectiveTaxRate() already uses elsewhere.
+export function computeExemptTotals(items: ExemptLine[], shippingCostGross: number, defaultTaxRate: number, discountAmount: number): ExemptTotals {
+  const subtotal = roundMoney(items.reduce((sum, i) => sum + i.quantity * degross(i.grossUnitPrice, i.taxRatePercent), 0));
+  const shippingCost = roundMoney(degross(shippingCostGross, defaultTaxRate));
+  const total = roundMoney(Math.max(0, subtotal - discountAmount) + shippingCost);
+  return { subtotal, shippingCost, total };
+}
+
+// The destination the goods actually ship to, not necessarily the billing
+// address — the exemption depends on where the goods physically move to,
+// which is the shipping override's country when one is set (see Orders.ts's
+// own hasDifferentShippingAddress comment), the billing country otherwise.
+export function destinationCountry(country: string, hasDifferentShippingAddress: boolean, shippingCountry: string | null | undefined): string {
+  return hasDifferentShippingAddress && shippingCountry ? shippingCountry : country;
+}
+
+// Only Österreich is a real candidate today — this checkout offers exactly
+// three countries (Deutschland/Österreich/Schweiz, see CheckoutContent.tsx's
+// own PLZ_DIGITS), and Deutschland (domestic) / Schweiz (non-EU export, a
+// different exemption entirely) never qualify for this specific one.
+export function isExemptionEligibleCountry(country: string): boolean {
+  return country === "Österreich";
+}

app/lib/vatId.ts

@@ -0,0 +1,15 @@
+// Mirrors the backend's own USt-IdNr. validation exactly (Orders.ts/
+// Customers.ts/CompanySettings.ts in the Payload repo) — kept as a plain
+// client+server-safe helper here since this repo's frontend needs the same
+// check twice (checkout's instant client-side pattern + api/checkout's own
+// server-side re-validation, same "never trust the client" reasoning as
+// every other checkout field).
+const VAT_ID_PATTERN = /^[A-Z]{2}[A-Z0-9]{2,12}$/;
+
+export function normalizeVatId(value: string): string {
+  return value.toUpperCase().trim();
+}
+
+export function isValidVatId(value: string): boolean {
+  return VAT_ID_PATTERN.test(value);
+}

app/lib/vies.ts

@@ -0,0 +1,58 @@
+// Server-only — calls the European Commission's public VIES REST API to
+// confirm an EU VAT ID is actually registered, not just correctly
+// formatted (see lib/vatId.ts's own comment: format alone is never
+// enough to zero-rate an invoice). Confirmed live and working against
+// the real endpoint 2026-07-23 (POST {countryCode, vatNumber} →
+// {valid: boolean, ...}) — this is the Commission's own documented REST
+// API, not a guess.
+const VIES_URL = "https://ec.europa.eu/taxation_customs/vies/rest-api/check-vat-number";
+
+export type ViesCheckResult =
+  | { ok: true; valid: boolean; name: string | null; address: string | null }
+  | { ok: false; reason: string };
+
+// `vatNumber` must NOT include the country prefix (VIES wants it split
+// out) — callers pass the full "DE123456789"-shaped id and this function
+// does the splitting, since every call site already has the normalized
+// full id (see lib/vatId.ts's normalizeVatId()) rather than the two parts
+// separately.
+export async function checkVatIdViaVies(vatId: string): Promise<ViesCheckResult> {
+  const countryCode = vatId.slice(0, 2);
+  const vatNumber = vatId.slice(2);
+  if (!countryCode || !vatNumber) return { ok: false, reason: "Ungültiges USt-IdNr.-Format." };
+
+  try {
+    // 8s timeout — VIES is a shared EU-wide government service with no
+    // uptime SLA to this shop; a slow/unreachable response must not hang
+    // checkout indefinitely. Callers treat `ok: false` as "couldn't
+    // confirm" and fail closed (no exemption), never as "confirmed invalid".
+    const res = await fetch(VIES_URL, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ countryCode, vatNumber }),
+      signal: AbortSignal.timeout(8000),
+    });
+    if (!res.ok) return { ok: false, reason: `VIES antwortete mit ${res.status}` };
+    const data: { actionSucceed?: boolean; valid?: boolean; name?: string; address?: string; errorWrappers?: { error?: string }[] } = await res.json();
+    // VIES answers 200 even when it couldn't actually perform the check —
+    // `actionSucceed: false` (e.g. `MS_UNAVAILABLE`, the member state's own
+    // national gateway being temporarily down — Germany's in particular is
+    // known to do this) means "couldn't confirm", not "confirmed invalid".
+    // Without this check a `MS_UNAVAILABLE` response fell through to
+    // `Boolean(data.valid)` on a body that has no `valid` field at all,
+    // silently reading as `valid: false` — a real, currently-registered VAT
+    // ID would then look rejected instead of "VIES unavailable, try again".
+    if (data.actionSucceed === false) {
+      const reason = data.errorWrappers?.[0]?.error ?? "VIES konnte die Anfrage nicht bearbeiten.";
+      return { ok: false, reason: `VIES: ${reason}` };
+    }
+    return {
+      ok: true,
+      valid: Boolean(data.valid),
+      name: data.name && data.name !== "---" ? data.name : null,
+      address: data.address && data.address !== "---" ? data.address : null,
+    };
+  } catch (err) {
+    return { ok: false, reason: err instanceof Error ? err.message : "VIES ist gerade nicht erreichbar." };
+  }
+}

app/newsletter-confirmed/page.tsx

@@ -0,0 +1,66 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { Reveal } from "../components/Reveal";
+import { Footer } from "../components/Footer";
+import { TrustRow } from "../components/TrustRow";
+
+// robots: noindex — transactional landing page (Brevo's double opt-in
+// redirectionUrl target, see app/lib/brevo.ts's BREVO_DOI_REDIRECT_URL),
+// same reasoning as /bestellbestaetigung and /checkout: nothing here is
+// meant to be found via search, only reached via the confirmation link.
+export const metadata: Metadata = {
+  title: "Newsletter bestätigt",
+  description: "Deine Newsletter-Anmeldung bei einfach produktiv ist bestätigt.",
+  robots: {
+    index: false,
+    follow: true,
+  },
+};
+
+// Static — Brevo's confirmation click lands here with no query params to
+// read, so unlike /bestellbestaetigung (which hydrates a sessionStorage
+// order snapshot) or /checkout/verarbeitung (which polls payment status),
+// this page has nothing to fetch or wait on. Same visual language as
+// those two: warm bg-bg-base, brand-tinted circular icon, serif display
+// heading, thin brand divider — see BestellbestaetigungContent.tsx for
+// the pattern this mirrors.
+export default function NewsletterConfirmedPage() {
+  return (
+    <>
+      <main className="flex flex-col flex-1 bg-bg-base">
+        <Reveal className="flex flex-col gap-4 items-center text-center pt-24 pb-16 px-[var(--layout-padding-x)] w-full">
+          <div className="flex items-center justify-center size-14 rounded-full bg-brand/10 text-brand shrink-0">
+            <svg viewBox="0 0 24 24" className="size-6" fill="none" aria-hidden="true">
+              <path d="M5 13.5 9.5 18 19 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+          </div>
+          <p
+            className="font-semibold text-display text-text-primary"
+            style={{ fontFamily: "var(--font-playfair)" }}
+          >
+            Bestätigt!
+          </p>
+          <p
+            className="font-semibold text-h3 text-text-primary"
+            style={{ fontFamily: "var(--font-lora)" }}
+          >
+            Du bist jetzt Teil unseres Newsletters.
+          </p>
+          <div className="h-[0.125rem] w-8 bg-brand" />
+          <p className="text-body text-text-muted max-w-[28rem] pt-2">
+            Schön, dass du dabei bist! Ab jetzt bekommst du hin und wieder Impulse, neue Produkte
+            und kleine Erinnerungen von uns, damit dein Alltag ein bisschen leichter wird.
+          </p>
+          <Link
+            href="/shop"
+            className="inline-flex items-center justify-center py-4 px-8 mt-4 rounded-sm bg-brand hover:bg-brand-hover active:scale-[0.97] transition-all font-bold text-body text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base"
+          >
+            Jetzt stöbern
+          </Link>
+        </Reveal>
+        <TrustRow />
+      </main>
+      <Footer />
+    </>
+  );
+}

app/newsletter/components/HowItWorks.tsx

@@ -1,6 +1,7 @@
 import { Fragment } from "react";
 import Image from "next/image";
 import { Reveal, RevealGroup, RevealItem } from "../../components/Reveal";
+import { StepArrow } from "../../components/StepArrow";
 
 // Each icon's own real pixel dimensions (not uniformly square) — needed so
 // the `h-16 w-auto` sizing below infers the correct aspect ratio instead of
@@ -71,18 +72,15 @@ export function HowItWorks() {
               <p className="text-body-sm text-text-primary text-center">{step.desc}</p>
             </RevealItem>
             {i < steps.length - 1 && (
-              // md:mt-[1.625rem] (26px) centers the arrow on the h-16
-              // (64px) icon above it — same margin-based centering
-              // technique as Challenge's step connector and todo-cards'
-              // identical HowItWorks, not just the same icon asset.
-              <div className="flex items-center justify-center shrink-0 md:mt-[1.625rem]">
-                <Image
-                  alt=""
-                  src="/icon-arrow-connector.svg"
-                  width={24}
-                  height={24}
-                  className="w-6 h-6 rotate-90 md:w-10 md:h-3 md:rotate-0"
-                />
+              // md:mt-[1.5rem] centers the arrow on the h-16 icon above it,
+              // same technique as todo-cards'/Challenge's own step
+              // connector. Below md: pulled up with a negative margin so it
+              // sits nearer the icon row above it instead of dead-center in
+              // the whole gap between steps (fixed 2026-07-24, consistency
+              // with Challenge's icon-at-top layout). Bigger below md:
+              // (w-8 h-8, was w-6 h-6) per explicit feedback.
+              <div className="flex items-center justify-center shrink-0 -mt-2 md:mt-[1.5rem]">
+                <StepArrow className="w-8 h-8 rotate-90 md:w-10 md:h-4 md:rotate-0" />
               </div>
             )}
           </Fragment>

app/newsletter/components/WeeklyBenefits.tsx

@@ -8,6 +8,17 @@ const benefits = [
   { title: "Motivation & Erinnerung", desc: "Ein freundlicher Schub in die richtige Richtung." },
 ];
 
+// Inline, brand-orange stroke — same fix/reasoning as
+// WeeklyImpulsesHero.tsx's own IconCheck (icon-check.svg's fill can't be
+// recolored from outside the SVG when loaded via <img src>/next/image).
+function IconCheck() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="size-5 shrink-0 mt-1">
+      <path d="M4 10.5l4.5 4.5L16 5.5" stroke="#f6a701" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
 export function WeeklyBenefits() {
   return (
     <section className="w-full bg-bg-base flex flex-col lg:flex-row gap-10 lg:gap-16 items-center py-12 md:py-16 px-[var(--layout-padding-x)]">
@@ -31,7 +42,7 @@ export function WeeklyBenefits() {
         <ul className="flex flex-col gap-4 items-start w-full">
           {benefits.map((b) => (
             <li key={b.title} className="flex gap-[0.625rem] items-start w-full">
-              <Image alt="" src="/icon-check.svg" width={20} height={20} className="size-5 shrink-0 mt-0.5" />
+              <IconCheck />
               <div className="flex flex-col gap-0.5 items-start flex-1 min-w-0">
                 <p className="font-semibold text-body text-text-primary">{b.title}</p>
                 <p className="text-body-sm text-text-muted">{b.desc}</p>

app/newsletter/components/WeeklyImpulsesHero.tsx

@@ -1,6 +1,9 @@
+"use client";
+
 import Link from "next/link";
 import Image from "next/image";
 import { Reveal } from "../../components/Reveal";
+import { useNewsletterSignup } from "../../lib/useNewsletterSignup";
 
 // Same lock icon + copy as /challenge's and the shared Newsletter
 // component's trust note — unified across all newsletter-signup forms.
@@ -13,6 +16,17 @@ function LockIcon() {
   );
 }
 
+// Inline, brand-orange stroke — icon-check.svg's fill lives in an internal
+// CSS var that can't be recolored from outside the SVG when loaded via
+// <img src>/next/image, same fix/reasoning as todo-cards's own IconCheck.
+function IconCheck() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="size-5 shrink-0 mt-1">
+      <path d="M4 10.5l4.5 4.5L16 5.5" stroke="#f6a701" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
 const checklist = [
   "Jeden Mittwoch neue Impulse & Tipps",
   "Kurz & knackig – in 5 Minuten gelesen",
@@ -21,6 +35,9 @@ const checklist = [
 ];
 
 export function WeeklyImpulsesHero() {
+  const { email, emailError, consent, setConsent, status, error, emailRef, handleEmailChange, handleEmailBlur, handleSubmit } =
+    useNewsletterSignup("newsletter-hero");
+
   return (
     <section className="bg-bg-base w-full overflow-hidden">
       {/* Same lg:-only structural exception as Home/todo-cards Hero (see
@@ -83,8 +100,8 @@ export function WeeklyImpulsesHero() {
 
             <ul className="flex flex-col gap-3 items-start w-full">
               {checklist.map((item) => (
-                <li key={item} className="flex gap-[0.625rem] items-center w-full">
-                  <Image alt="" src="/icon-check.svg" width={20} height={20} className="size-5 shrink-0" />
+                <li key={item} className="flex gap-[0.625rem] items-start w-full">
+                  <IconCheck />
                   <span className="flex-1 text-body text-text-primary">{item}</span>
                 </li>
               ))}
@@ -93,46 +110,80 @@ export function WeeklyImpulsesHero() {
             {/* Inline email capture — page-specific, simpler than the shared
                 Newsletter component's panel form (no button-adjacent styling
                 needed here, just input + submit inline). */}
-            <div className="flex gap-3 items-start w-full sm:w-auto">
-              <input
-                type="email"
-                placeholder="Deine E-Mail-Adresse"
-                className="w-full sm:w-[17.5rem] bg-bg-base border border-border rounded-sm px-4 py-[0.8125rem] text-body-sm text-text-muted font-normal outline-none focus:border-brand transition-colors"
-              />
-              <button
-                type="submit"
-                className="shrink-0 bg-brand rounded-sm px-6 py-[0.8125rem] font-bold text-body text-text-primary whitespace-nowrap hover:bg-brand-hover active:scale-[0.97] transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base"
-              >
-                Jetzt anmelden
-              </button>
-            </div>
+            {status === "success" ? (
+              <p className="text-body text-text-primary font-medium">
+                Fast geschafft! Schau kurz in dein Postfach – da wartet schon eine Mail von uns.
+              </p>
+            ) : (
+              <form onSubmit={handleSubmit} className="flex flex-col gap-3 items-start w-full">
+                {/* flex-col sm:flex-row, no items-start at the base tier —
+                    stacks full-width below sm: (default align-items:
+                    stretch is what makes the button fill the row once
+                    stacked), same pattern as /challenge's EmailCapture.
+                    Was a fixed row at every width before, squeezing input
+                    + button together on a narrow phone (fixed 2026-07-24,
+                    consistency with the other mail CTAs). */}
+                <div className="flex flex-col sm:flex-row sm:items-start gap-3 w-full">
+                  <input
+                    ref={emailRef}
+                    type="email"
+                    required
+                    value={email}
+                    onChange={(e) => handleEmailChange(e.target.value)}
+                    onBlur={(e) => handleEmailBlur(e.target.value)}
+                    placeholder="Deine E-Mail-Adresse"
+                    aria-invalid={Boolean(emailError)}
+                    className={`w-full sm:w-[17.5rem] bg-bg-base border rounded-sm px-4 py-[0.8125rem] text-body-sm text-text-muted font-normal outline-none transition-colors ${
+                      emailError ? "border-red-600 focus:border-red-600" : "border-border focus:border-brand"
+                    }`}
+                  />
+                  <button
+                    type="submit"
+                    disabled={status === "submitting"}
+                    className="shrink-0 bg-brand rounded-sm px-6 py-[0.8125rem] font-bold text-body text-text-primary whitespace-nowrap hover:bg-brand-hover active:scale-[0.97] transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base disabled:opacity-60 disabled:pointer-events-none"
+                  >
+                    {status === "submitting" ? "Wird gesendet…" : "Jetzt anmelden"}
+                  </button>
+                </div>
+                {emailError && (
+                  <p className="text-label text-red-600 font-normal">{emailError}</p>
+                )}
 
-            {/* Consent checkbox — this signup's legal basis is consent
-                (email marketing), same wording/pattern as the shared
-                Newsletter component's and NewsletterModal's checkbox. */}
-            <label className="flex gap-2 items-start cursor-pointer">
-              <input
-                type="checkbox"
-                className="size-4 shrink-0 mt-0.5 rounded-xs border border-border accent-brand"
-              />
-              <span className="text-label text-text-primary font-normal leading-normal">
-                Ich akzeptiere die{" "}
-                <Link
-                  href="/datenschutz"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="underline hover:text-brand"
-                >
-                  Datenschutzerklärung
-                </Link>
-                .
-              </span>
-            </label>
+                {/* Consent checkbox — this signup's legal basis is consent
+                    (email marketing), same wording/pattern as the shared
+                    Newsletter component's and NewsletterModal's checkbox. */}
+                <label className="flex gap-2 items-start cursor-pointer">
+                  <input
+                    type="checkbox"
+                    required
+                    checked={consent}
+                    onChange={(e) => setConsent(e.target.checked)}
+                    className="size-4 shrink-0 mt-0.5 rounded-xs border border-border accent-brand"
+                  />
+                  <span className="text-label text-text-primary font-normal leading-normal">
+                    Ich akzeptiere die{" "}
+                    <Link
+                      href="/datenschutz"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="underline hover:text-brand"
+                    >
+                      Datenschutzerklärung
+                    </Link>
+                    .
+                  </span>
+                </label>
 
-            <div className="flex gap-[0.375rem] items-center">
-              <LockIcon />
-              <span className="text-label text-[#888]">Keine Werbung. Jederzeit abbestellbar.</span>
-            </div>
+                {status === "error" && (
+                  <p className="text-label text-red-600 font-normal">{error}</p>
+                )}
+
+                <div className="flex gap-[0.375rem] items-center">
+                  <LockIcon />
+                  <span className="text-label text-[#888]">Keine Werbung. Jederzeit abbestellbar.</span>
+                </div>
+              </form>
+            )}
           </div>
         </Reveal>
 

app/shop/components/ProductGrid.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
 import Image from "next/image";
-import { getProducts, getShippingSettings, getDefaultTaxRatePercent } from "../../lib/payload";
+import { getProducts, getShippingSettings, getDefaultTaxRatePercent, getKleinunternehmer } from "../../lib/payload";
 import { effectiveTaxRate } from "../../lib/cartTotals";
 import { formatPrice, discountPercent } from "../../lib/format";
 import { RevealGroup, RevealItem } from "../../components/Reveal";
@@ -13,7 +13,12 @@ import { AddToCartInlineButton } from "../../components/AddToCartInlineButton";
 // gives faster first paint and no loading flash.
 
 export async function ProductGrid() {
-  const [allProducts, shipping, defaultTaxRate] = await Promise.all([getProducts(), getShippingSettings(), getDefaultTaxRatePercent()]);
+  const [allProducts, shipping, defaultTaxRate, kleinunternehmer] = await Promise.all([
+    getProducts(),
+    getShippingSettings(),
+    getDefaultTaxRatePercent(),
+    getKleinunternehmer(),
+  ]);
   const products = allProducts.filter((p) => p.active);
 
   if (products.length === 0) {
@@ -57,14 +62,10 @@ export async function ProductGrid() {
                 <span className="absolute top-3 left-3 rounded-full bg-text-muted px-2.5 py-1 text-label font-bold text-bg-base">
                   Ausverkauft
                 </span>
-              ) : discount !== null ? (
-                <span className="absolute top-3 left-3 rounded-full bg-brand px-2.5 py-1 text-label font-bold text-text-primary">
-                  -{discount}%
-                </span>
               ) : (
-                anyLowStock && (
-                  <span className="absolute top-3 left-3 rounded-full bg-warning px-2.5 py-1 text-label font-bold text-text-on-dark">
-                    Nur noch wenige verfügbar
+                discount !== null && (
+                  <span className="absolute top-3 left-3 rounded-full bg-brand px-2.5 py-1 text-label font-bold text-text-primary">
+                    -{discount}%
                   </span>
                 )
               )}
@@ -82,12 +83,22 @@ export async function ProductGrid() {
                     <span className="text-label text-text-muted line-through">{formatPrice(product.compareAtPrice!)}</span>
                   )}
                   <span className="font-bold text-h4 text-text-primary">{formatPrice(product.price)}</span>
-                  <span className="text-label text-text-muted">inkl. {taxRate}% MwSt.</span>
+                  {!kleinunternehmer && <span className="text-label text-text-muted">inkl. {taxRate}% MwSt.</span>}
                 </p>
                 <p className="text-label text-text-muted">
                   Lieferzeit: {shipping.totalDays.min}–{shipping.totalDays.max} Werktage innerhalb Deutschlands
                 </p>
               </div>
+              {/* Always rendered, text conditional — not a conditional
+                  block — so this line's height (min-h as a cross-browser
+                  safety net for the empty case) is identical whether or
+                  not the product is low-stock. See AddToCartButton.tsx's
+                  own comment: an earlier text-based low-stock hint here
+                  broke equal card heights across the grid, which is why
+                  it moved to the image-overlay pill in the first place. */}
+              <p className="min-h-[1.05rem] text-label font-bold text-warning">
+                {anyLowStock ? "Nur noch wenige verfügbar" : null}
+              </p>
               {product.href && (
                 <Link
                   href={product.href}
@@ -104,7 +115,7 @@ export async function ProductGrid() {
                   equal-height lesson). */}
               <div className="flex-1" />
 
-              <AddToCartInlineButton id={product.id} outOfStock={product.outOfStock} variants={product.variants} />
+              <AddToCartInlineButton id={product.id} outOfStock={product.outOfStock} maxQty={product.maxQty} variants={product.variants} />
             </div>
           </RevealItem>
           );

app/shop/page.tsx

@@ -15,6 +15,7 @@ export const metadata: Metadata = {
       "Alles, was du für mehr Klarheit im Alltag brauchst — ToDo-Karten, Wochenplaner, Notizbücher und Zielkarten von einfach produktiv.",
     url: "/shop",
     type: "website",
+    images: ["/hero-todo-karten.png"],
   },
 };
 

app/todo-cards/components/Focus.tsx

@@ -9,6 +9,17 @@ const bullets = [
   "Inklusive Mini-Anleitung mit Tipps für den Start",
 ];
 
+// Inline, brand-orange stroke — same fix/reasoning as TodoKartenHero.tsx's
+// own IconCheck (icon-check.svg's fill can't be recolored from outside
+// the SVG when loaded via <img src>/next/image).
+function IconCheck() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="size-5 shrink-0 mt-1">
+      <path d="M4 10.5l4.5 4.5L16 5.5" stroke="#f6a701" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
 export function Focus() {
   return (
     <section className="w-full bg-bg-base flex flex-col lg:flex-row gap-10 lg:gap-16 items-center py-12 md:py-16 px-[var(--layout-padding-x)]">
@@ -33,8 +44,8 @@ export function Focus() {
         </p>
         <ul className="flex flex-col gap-3 items-start w-full">
           {bullets.map((b) => (
-            <li key={b} className="flex gap-[0.625rem] items-center w-full">
-              <Image alt="" src="/icon-check.svg" width={20} height={20} className="size-5 shrink-0" />
+            <li key={b} className="flex gap-[0.625rem] items-start w-full">
+              <IconCheck />
               <span className="flex-1 font-semibold text-body text-text-primary">{b}</span>
             </li>
           ))}

app/todo-cards/components/HowItWorks.tsx

@@ -1,6 +1,7 @@
 import { Fragment } from "react";
 import Image from "next/image";
 import { Reveal, RevealGroup, RevealItem } from "../../components/Reveal";
+import { StepArrow } from "../../components/StepArrow";
 
 // Each icon's own real pixel dimensions (not uniformly square, e.g.
 // icon-step-2 is 180x168) — needed so the `h-16 w-auto` sizing below infers
@@ -79,17 +80,12 @@ export function HowItWorks() {
             </RevealItem>
             {i < steps.length - 1 && (
               // md:mt-[1.625rem] (26px) centers the arrow on the h-16
-              // (64px) icon above it — (64 - arrow's own 12px height) / 2
+              // (64px) icon above it — (64 - arrow's own 16px height) / 2
               // — same margin-based centering technique as Challenge's
-              // step connector, not just the same icon asset.
-              <div className="flex items-center justify-center shrink-0 md:mt-[1.625rem]">
-                <Image
-                  alt=""
-                  src="/icon-arrow-connector.svg"
-                  width={24}
-                  height={24}
-                  className="w-6 h-6 rotate-90 md:w-10 md:h-3 md:rotate-0"
-                />
+              // step connector, not just the same icon asset. Bigger below
+              // md: (w-8 h-8, was w-6 h-6) per explicit feedback.
+              <div className="flex items-center justify-center shrink-0 md:mt-[1.5rem]">
+                <StepArrow className="w-8 h-8 rotate-90 md:w-10 md:h-4 md:rotate-0" />
               </div>
             )}
           </Fragment>

app/todo-cards/components/Pricing.tsx

@@ -1,7 +1,7 @@
 import Image from "next/image";
 import { AddToCartButton } from "../../components/AddToCartButton";
 import { Reveal } from "../../components/Reveal";
-import { getProductBySlug, getShippingSettings, getDefaultTaxRatePercent } from "../../lib/payload";
+import { getProductBySlug, getShippingSettings, getDefaultTaxRatePercent, getKleinunternehmer } from "../../lib/payload";
 import { formatPrice, discountPercent } from "../../lib/format";
 import { effectiveTaxRate } from "../../lib/cartTotals";
 
@@ -18,17 +18,27 @@ const bullets = [
 // reasoning; the bullet list stays hand-written since it's spec detail,
 // not something the Products collection models.
 export async function Pricing() {
-  const [product, shipping, defaultTaxRate] = await Promise.all([
+  const [product, shipping, defaultTaxRate, kleinunternehmer] = await Promise.all([
     getProductBySlug("todo-karten"),
     getShippingSettings(),
     getDefaultTaxRatePercent(),
+    getKleinunternehmer(),
   ]);
   if (!product) return null;
   const discount = discountPercent(product.price, product.compareAtPrice);
   const taxRate = effectiveTaxRate(product, defaultTaxRate);
   // Same "any vs. every" split as ProductGrid.tsx/ProductSpotlight.tsx.
-  const fullyOutOfStock = product.variants.length > 0 ? product.variants.every((v) => v.outOfStock) : product.outOfStock;
-  const anyLowStock = product.variants.length > 0 ? product.variants.some((v) => v.lowStock) : product.lowStock;
+  // A deactivated product (product.active === false) isn't caught by
+  // either — the shop grid/spotlight filter those out before they'd ever
+  // reach this page, but this page resolves a product regardless of
+  // active status (existing links to it should still 200, see
+  // mapPayloadProduct's own comment in lib/payload.ts) — so it needs its
+  // own explicit check here to read as "Ausverkauft" rather than fully
+  // buyable (fixed 2026-07-24, feedback: deactivated should look
+  // sold-out on its own detail page).
+  const fullyOutOfStock =
+    !product.active || (product.variants.length > 0 ? product.variants.every((v) => v.outOfStock) : product.outOfStock);
+  const anyLowStock = product.active && (product.variants.length > 0 ? product.variants.some((v) => v.lowStock) : product.lowStock);
 
   return (
     <section className="w-full bg-bg-base px-[var(--layout-padding-x)] py-8">
@@ -48,14 +58,10 @@ export async function Pricing() {
             <span className="absolute top-3 left-3 rounded-full bg-text-muted px-2.5 py-1 text-label font-bold text-bg-base">
               Ausverkauft
             </span>
-          ) : discount !== null ? (
-            <span className="absolute top-3 left-3 rounded-full bg-brand px-2.5 py-1 text-label font-bold text-text-primary">
-              -{discount}%
-            </span>
           ) : (
-            anyLowStock && (
-              <span className="absolute top-3 left-3 rounded-full bg-warning px-2.5 py-1 text-label font-bold text-text-on-dark">
-                Nur noch wenige verfügbar
+            discount !== null && (
+              <span className="absolute top-3 left-3 rounded-full bg-brand px-2.5 py-1 text-label font-bold text-text-primary">
+                -{discount}%
               </span>
             )
           )}
@@ -79,27 +85,41 @@ export async function Pricing() {
         </div>
 
         <div className="flex flex-col gap-3 items-start w-full lg:w-[18.75rem] lg:shrink-0">
+          {/* MwSt./Versand disclosure on its own line, not crammed into
+              the price row itself — "inkl. X% MwSt. zzgl. Versand" is
+              long enough (once the rate is spelled out) that sharing a
+              row with the price in this panel's narrow fixed-width
+              column wrapped it mid-sentence onto a second line. */}
           <div className="flex flex-col gap-1 items-start">
             <div className="flex gap-2 items-baseline">
               {discount !== null && (
                 <p className="text-body text-text-muted line-through">{formatPrice(product.compareAtPrice!)}</p>
               )}
               <p className="font-bold text-h3 text-text-primary">{formatPrice(product.price)}</p>
-              <p className="text-label text-text-muted">inkl. {taxRate}% MwSt. zzgl. Versand</p>
             </div>
+            <p className="text-label text-text-muted">{kleinunternehmer ? "zzgl. Versand" : `inkl. ${taxRate}% MwSt. zzgl. Versand`}</p>
             <p className="text-label text-text-muted">
               Lieferzeit: {shipping.totalDays.min}–{shipping.totalDays.max} Werktage innerhalb Deutschlands
             </p>
           </div>
+          {/* Single product, no grid siblings to stay equal-height with —
+              plain conditional line, same reasoning as ProductSpotlight.tsx. */}
+          {anyLowStock && <p className="text-label font-bold text-warning">Nur noch wenige verfügbar</p>}
           {/* No "Sichere Zahlung" trust note here (unlike Cart/Checkout) —
               this is an add-to-cart step, not the actual payment step, so
               a payment-security reassurance is premature here and just
               duplicates the one shown later at checkout. */}
+          {/* variants={[]} when deactivated — AddToCartButton's own
+              outOfStock prop is ignored whenever variants is non-empty (it
+              defers to each variant's own outOfStock flag instead, see its
+              currentlyOutOfStock calc), so a deactivated product with
+              in-stock variants would otherwise still render as buyable. */}
           <AddToCartButton
             label="In den Warenkorb"
             className="w-full inline-flex items-center justify-center px-6 py-[0.8125rem] rounded-sm bg-brand hover:bg-brand-hover active:scale-[0.97] transition-all font-bold text-body text-text-primary text-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-bg-muted"
-            outOfStock={product.outOfStock}
-            variants={product.variants}
+            outOfStock={!product.active || product.outOfStock}
+            maxQty={product.maxQty}
+            variants={product.active ? product.variants : []}
           />
         </div>
       </Reveal>

app/todo-cards/components/TodoKartenHero.tsx

@@ -2,7 +2,7 @@ import Link from "next/link";
 import Image from "next/image";
 import { AddToCartButton } from "../../components/AddToCartButton";
 import { Reveal } from "../../components/Reveal";
-import { getProductBySlug, getShippingSettings, getDefaultTaxRatePercent } from "../../lib/payload";
+import { getProductBySlug, getShippingSettings, getDefaultTaxRatePercent, getKleinunternehmer } from "../../lib/payload";
 import { formatPrice, discountPercent } from "../../lib/format";
 import { effectiveTaxRate } from "../../lib/cartTotals";
 
@@ -12,6 +12,19 @@ const checklist = [
   "Minimalistisch, analog, effektiv",
 ];
 
+// Inline, brand-orange stroke — icon-check.svg's fill is hardcoded to
+// #222221 via an internal CSS var that only resolves inside the SVG's own
+// document, so it can't be recolored from the host page when loaded via
+// <img src>/next/image. Same simple checkmark path as Challenge's own
+// Check() component, for the same orange-checkmark look (fixed 2026-07-24).
+function IconCheck() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="size-5 shrink-0 mt-1">
+      <path d="M4 10.5l4.5 4.5L16 5.5" stroke="#f6a701" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
 // Same "todo-karten" product Pricing.tsx reads further down the page —
 // this is just a compact early teaser so the hero's CTA isn't asking for
 // a click without saying what it costs. Delivery time is repeated here too
@@ -19,13 +32,18 @@ const checklist = [
 // §1 Abs.1 Nr.8 EGBGB's delivery-date disclosure needs to sit next to every
 // buy button, not just one of them.
 export async function TodoKartenHero() {
-  const [product, shipping, defaultTaxRate] = await Promise.all([
+  const [product, shipping, defaultTaxRate, kleinunternehmer] = await Promise.all([
     getProductBySlug("todo-karten"),
     getShippingSettings(),
     getDefaultTaxRatePercent(),
+    getKleinunternehmer(),
   ]);
   const discount = product ? discountPercent(product.price, product.compareAtPrice) : null;
   const taxRate = product ? effectiveTaxRate(product, defaultTaxRate) : null;
+  // Same "any vs. every" split as ProductGrid.tsx/Pricing.tsx.
+  const anyLowStock = product
+    ? product.active && (product.variants.length > 0 ? product.variants.some((v) => v.lowStock) : product.lowStock)
+    : false;
 
   return (
     <section className="bg-bg-base w-full overflow-hidden">
@@ -91,8 +109,8 @@ export async function TodoKartenHero() {
 
             <ul className="flex flex-col gap-3 items-start w-full">
               {checklist.map((item) => (
-                <li key={item} className="flex gap-[0.625rem] items-center w-full">
-                  <Image alt="" src="/icon-check.svg" width={20} height={20} className="size-5 shrink-0" />
+                <li key={item} className="flex gap-[0.625rem] items-start w-full">
+                  <IconCheck />
                   <span className="flex-1 text-body text-text-primary">{item}</span>
                 </li>
               ))}
@@ -105,16 +123,27 @@ export async function TodoKartenHero() {
                     <p className="text-body text-text-muted line-through">{formatPrice(product.compareAtPrice!)}</p>
                   )}
                   <p className="font-bold text-h3 text-text-primary">{formatPrice(product.price)}</p>
-                  <p className="text-label text-text-muted">inkl. {taxRate}% MwSt.</p>
+                  <p className="text-label text-text-muted">{kleinunternehmer ? "zzgl. Versand" : `inkl. ${taxRate}% MwSt. zzgl. Versand`}</p>
                 </div>
               )}
               <p className="text-label text-text-muted">
                 Lieferzeit: {shipping.totalDays.min}–{shipping.totalDays.max} Werktage innerhalb Deutschlands
               </p>
+              {/* Single product, no grid siblings to stay equal-height with —
+                  plain conditional line, same reasoning as ProductSpotlight.tsx/Pricing.tsx. */}
+              {anyLowStock && <p className="text-label font-bold text-warning">Nur noch wenige verfügbar</p>}
             </div>
 
             {product && (
-              <AddToCartButton label="ToDo-Karten bestellen" outOfStock={product.outOfStock} variants={product.variants} />
+              // variants={[]} when deactivated — see Pricing.tsx's own
+              // comment on why AddToCartButton's outOfStock prop alone
+              // isn't enough once variants is non-empty.
+              <AddToCartButton
+                label="ToDo-Karten bestellen"
+                outOfStock={!product.active || product.outOfStock}
+                maxQty={product.maxQty}
+                variants={product.active ? product.variants : []}
+              />
             )}
           </div>
         </Reveal>

app/versand/components/VersandTOC.tsx

@@ -1,6 +1,13 @@
-import { SectionTOC } from "../../components/SectionTOC";
+import { SectionTOC, MobileSectionTOC } from "../../components/SectionTOC";
 import { VERSAND_SECTION_IDS } from "./VersandSections";
 
 export function VersandTOC() {
   return <SectionTOC sections={[...VERSAND_SECTION_IDS]} />;
 }
+
+// Below lg: accordion counterpart — see SectionTOC.tsx's own comment on
+// why this needs to be a separate element rather than nested inside
+// VersandTOC/the page's `hidden lg:block` sidebar wrapper.
+export function MobileVersandTOC() {
+  return <MobileSectionTOC sections={[...VERSAND_SECTION_IDS]} />;
+}

app/versand/page.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 import { Reveal } from "../components/Reveal";
 import { Footer } from "../components/Footer";
 import { VersandSections } from "./components/VersandSections";
-import { VersandTOC } from "./components/VersandTOC";
+import { VersandTOC, MobileVersandTOC } from "./components/VersandTOC";
 import { getShippingSettings } from "../lib/payload";
 
 export const metadata: Metadata = {
@@ -36,6 +36,12 @@ export default async function VersandPage() {
           </p>
         </Reveal>
 
+        {/* MobileSectionTOC counterpart — below lg: only, see
+            SectionTOC.tsx's own comment. */}
+        <div className="lg:hidden px-[var(--layout-padding-x)] pb-4 w-full">
+          <MobileVersandTOC />
+        </div>
+
         <div className="flex flex-col lg:flex-row gap-8 lg:gap-12 items-start pb-16 pt-2 px-[var(--layout-padding-x)] w-full">
           <div className="hidden lg:block lg:sticky lg:top-32 lg:self-start">
             <VersandTOC />

app/widerruf/page.tsx

@@ -7,7 +7,7 @@ import { Footer } from "../components/Footer";
 import { TrustRow } from "../components/TrustRow";
 import { RichText, extractHeadings } from "../components/RichText";
 import { LiveRichText } from "../components/LiveRichText";
-import { SectionTOC } from "../components/SectionTOC";
+import { SectionTOC, MobileSectionTOC } from "../components/SectionTOC";
 import { getLegalPage } from "../lib/payload";
 
 export const metadata: Metadata = {
@@ -39,6 +39,13 @@ export default async function WiderrufPage() {
           <p className="text-body text-text-muted">Stand: Juli 2026</p>
         </Reveal>
 
+        {/* MobileSectionTOC — below lg: only, see SectionTOC.tsx's own
+            comment. Outside the sidebar's `hidden lg:flex` wrapper below
+            (that wrapper's `hidden` would hide this too otherwise). */}
+        <div className="lg:hidden px-[var(--layout-padding-x)] pb-4 w-full">
+          <MobileSectionTOC sections={headings} />
+        </div>
+
         <div className="flex flex-col lg:flex-row gap-8 lg:gap-12 items-start pb-10 pt-2 px-[var(--layout-padding-x)] w-full">
           <div className="hidden lg:flex flex-col gap-6 w-[22.5rem] shrink-0 lg:sticky lg:top-32 lg:self-start">
             <SectionTOC sections={headings} />

next.config.ts

@@ -2,6 +2,10 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   output: "standalone",
+  // Ships as raw TS/TSX source (no build step of its own) — this app's own
+  // bundler needs to transpile it, same as first-party app code, rather
+  // than assuming it's pre-built JS like a normal npm package.
+  transpilePackages: ["@einfach-produktiv/invoicing"],
   images: {
     remotePatterns: [
       {

package.json

@@ -10,13 +10,18 @@
     "test:unit": "vitest run"
   },
   "dependencies": {
+    "@einfach-produktiv/invoicing": "git+https://git.mk360.de/Marco/einfach-produktiv-invoicing.git#main",
     "@payloadcms/live-preview-react": "^3.85.2",
+    "@payloadcms/richtext-lexical": "^3.85.2",
     "@react-pdf/renderer": "^4.5.1",
+    "@stripe/react-stripe-js": "^6.8.0",
+    "@stripe/stripe-js": "^9.12.0",
     "motion": "^12.42.2",
     "next": "16.2.9",
     "nodemailer": "^9.0.3",
     "react": "19.2.4",
-    "react-dom": "19.2.4"
+    "react-dom": "19.2.4",
+    "stripe": "^22.3.2"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",