Document /r and /sticker short-link redirects in README

Neither route was mentioned anywhere despite predating this session (/r)
or being added this session (/sticker) — every other route/collection
this size gets its own section.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01G5mssdCBir9kyXTmqBjV3h

README.md

@@ -1903,6 +1903,36 @@ one; a second `google-maps` row would collide on that name. To actually
 use it: `<GoogleMapsEmbed src="<Google Maps embed URL>" title="..." />`
 anywhere.
 
+## Short links & QR redirects
+
+`app/r/[code]/route.ts` and `app/sticker/[code]/route.ts` are static
+short-link routes (e.g. printed on a flyer or a physical sticker's QR
+code) that resolve a `code` against Payload's `redirects` collection and
+307-redirect (`redirect()`, deliberately not `permanentRedirect()` — the
+target can change at any time and this must never be client-cached) to
+that doc's `targetPath`. Both routes call the same
+`resolveAndTrackRedirect(code, urlPrefix)` in `app/lib/payload.ts`, which
+also fire-and-forget PATCHes `clickCount`/`lastClickedAt` on every hit
+(tracking failure only logs — never worth stranding a visitor over).
+
+- **`/r/[code]`** is the default scheme for all new short links —
+  `einfach-produktiv.com/r/aktion-sommer`.
+- **`/sticker/[code]`** exists only because a batch of physical stickers
+  was already printed as `einfach-produktiv.com/sticker/<code>` (`echt`,
+  `geheimnis`, `fokus`) before `/r/[code]` existed and can't be
+  reprinted — same collection, same lookup, just a second fixed prefix.
+- The Redirects doc's `urlPrefix` field (`/r` or `/sticker`) isn't just an
+  admin label — `resolveAndTrackRedirect` filters on it too, so a code is
+  only reachable under whichever prefix its doc is actually set to.
+  Changing `urlPrefix` in Payload immediately changes which route serves
+  that code.
+- Defense in depth: `targetPath` must start with `/` and not `//` (open-
+  redirect guard, same check `app/api/preview/route.ts` does), enforced
+  both in Payload's own field validation and again in each route.ts before
+  calling `redirect()`.
+- A deactivated (`active: false`) doc — or no matching doc at all —
+  renders a plain 404 (`notFound()`), not a redirect to some fallback.
+
 ## Product image gallery
 
 `ProductGallery.tsx` — main image + thumbnail strip, swappable on click OR

app/blog/[slug]/page.tsx

@@ -162,7 +162,7 @@ export default async function BlogDetailPage({
                     >
                       {post.relatedProduct.name}
                     </p>
-                    <p className="text-[0.9375rem] text-text-muted leading-[1.45]">{post.relatedProduct.description}</p>
+                    <p className="text-[0.9375rem] text-text-muted leading-[1.45]">{post.relatedProduct.descriptionText}</p>
                   </div>
                   <span className="flex items-center gap-1.5 font-bold text-[0.875rem] text-text-primary whitespace-nowrap mt-1 sm:mt-0">
                     Entdecken

app/cart/components/CartContent.tsx

@@ -14,6 +14,7 @@ import { Reveal } from "../../components/Reveal";
 import { VersandModal } from "../../components/VersandModal";
 import { VatBreakdown } from "../../components/VatBreakdown";
 import { ArrowLeftIcon } from "../../components/ArrowLeftIcon";
+import { ProductName } from "../../components/ProductName";
 import { FreeShippingBanner } from "./FreeShippingBanner";
 import type { TrustBadge, ShippingSettings } from "../../lib/payload";
 
@@ -260,7 +261,7 @@ export function CartContent({
                         className="font-semibold text-h-small text-text-primary hover:text-brand transition-colors"
                         style={{ fontFamily: "var(--font-lora)" }}
                       >
-                        {product.name}
+                        <ProductName name={product.name} />
                         {entry.variant ? ` (${entry.variant})` : ""}
                       </Link>
                     ) : (
@@ -268,15 +269,15 @@ export function CartContent({
                         className="font-semibold text-h-small text-text-primary"
                         style={{ fontFamily: "var(--font-lora)" }}
                       >
-                        {product.name}
+                        <ProductName name={product.name} />
                         {entry.variant ? ` (${entry.variant})` : ""}
                       </p>
                     )}
+                    {product.subline && <p className="text-body-sm text-text-muted">{product.subline}</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>
                       <p className="flex items-baseline gap-1.5">

app/cart/components/RelatedProducts.tsx

@@ -129,7 +129,13 @@ export function RelatedProducts({
           (opacity: 0) — invisible. Not worth chasing a fix for a
           scroll-reveal nicety on a list that mutates; a static grid
           renders correctly with no animation risk. */}
-      <div className="grid items-start grid-cols-1 sm:grid-cols-12 gap-6 sm:gap-[var(--layout-grid-gap)] w-full max-w-[75rem]">
+      {/* No items-start, and grid-auto-rows + subgrid on each card — see
+          ProductGrid.tsx's own comment on why both are needed for
+          ProductCard's internal rows (price, etc.) to actually line up
+          across cards, not just overall card height. No RevealItem
+          wrapper here (see comment above), so the subgrid classes go
+          straight onto ProductCard's own className prop instead. */}
+      <div className="grid grid-cols-1 sm:grid-cols-12 gap-6 sm:gap-[var(--layout-grid-gap)] [grid-auto-rows:auto_auto_auto_auto_auto_minmax(0,1fr)] w-full max-w-[75rem]">
         {displayProducts.map((product, i) => (
           <ProductCard
             key={product.id}
@@ -139,7 +145,7 @@ export function RelatedProducts({
             wishlistEnabled={wishlistEnabled}
             wishlistRevealOnHover
             className={
-              "sm:col-span-4 " +
+              "sm:col-span-4 [grid-row:span_6] " +
               // Center the row when there are fewer than 3 cards to show
               // (e.g. only 1 active product left once the others are
               // already in the cart) — only the first card needs an

app/components/PageBlocks.tsx

@@ -56,11 +56,14 @@ export function renderPageBlockSync(block: PageBlock): React.ReactNode {
       return (
         <div key={block.id} className="flex flex-col gap-4 items-start">
           {/* Optional round portrait beside the headline — e.g. /ueber-mich's
-              "Hallo, ich bin Björn." */}
+              "Hallo, ich bin Björn." size-20 (80px) read as barely-there/
+              easy to miss next to a full headline — bumped to size-32
+              (128px) so it actually registers as a real photo, not a
+              small decorative blob. */}
           {block.image ? (
-            <div className="flex items-center gap-5">
-              <div className="relative size-20 shrink-0 rounded-full overflow-hidden">
-                <Image alt="" src={block.image} fill sizes="80px" className="object-cover" />
+            <div className="flex items-center gap-6">
+              <div className="relative size-32 shrink-0 rounded-full overflow-hidden ring-1 ring-border">
+                <Image alt="" src={block.image} fill sizes="128px" className="object-cover" />
               </div>
               {headline}
             </div>
@@ -90,7 +93,7 @@ export function renderPageBlockSync(block: PageBlock): React.ReactNode {
       return <RichText key={block.id} content={block.content} />;
 
     case "quote":
-      return <Quote key={block.id}>{block.text}</Quote>;
+      return <Quote key={block.id} label={block.label}>{block.text}</Quote>;
 
     case "icon": {
       const SymbolIcon = SYMBOLIC_ICONS[block.icon];

app/components/ProductBlocks.tsx

@@ -0,0 +1,251 @@
+import Link from "next/link";
+import Image from "next/image";
+import type { Product, ProductBlock, PageBlock } from "../lib/payload";
+import { getShippingSettings, getDefaultTaxRatePercent, getKleinunternehmer, getTestimonials } from "../lib/payload";
+import { formatPrice, discountPercent } from "../lib/format";
+import { effectiveTaxRate } from "../lib/cartTotals";
+import { AddToCartButton } from "./AddToCartButton";
+import { ProductName } from "./ProductName";
+import { RichText } from "./RichText";
+import { Reveal } from "./Reveal";
+import { renderPageBlockSync } from "./PageBlocks";
+import { TestimonialsGrid } from "./TestimonialsGrid";
+
+// Renders a Payload Products document's `layout` blocks field — same
+// "page sections, not inline Lexical nodes" shape as PageBlocks.tsx, which
+// this delegates to directly for every block type the two fields share
+// (richTextSection/stepRow/quote/image/icon/pillList/checklistImage/table/
+// ctaCard are the exact same Block configs, just registered a second time
+// on Products.layout — see that field's own comment in Products.ts). Only
+// `productHero` and `productPricingPanel` are product-specific, since they
+// need the live product/shipping/tax context that a generic content page
+// doesn't have.
+export async function ProductBlocks({ product }: { product: Product }) {
+  const [shipping, defaultTaxRate, kleinunternehmer] = await Promise.all([
+    getShippingSettings(),
+    getDefaultTaxRatePercent(),
+    getKleinunternehmer(),
+  ]);
+  const ctx: ProductBlockContext = { product, shipping, taxRate: effectiveTaxRate(product, defaultTaxRate), kleinunternehmer };
+
+  const rendered = await Promise.all(
+    product.layout.map(async (block) => {
+      // Needs its own async data fetch — same reason PageBlocks.tsx
+      // handles this one block type in its own outer async map instead of
+      // the sync switch below (renderProductBlock/renderPageBlockSync).
+      if (block.blockType === "testimonialsRef") {
+        const testimonials = await getTestimonials(block.page);
+        if (testimonials.length === 0) return null;
+        return (
+          <div key={block.id} className="w-full px-[var(--layout-padding-x)] py-6">
+            <TestimonialsGrid testimonials={testimonials} />
+          </div>
+        );
+      }
+      // productHero/productPricingPanel render their own full section
+      // (edge-to-edge image, own Reveal, own padding rhythm) — matching
+      // the hand-coded PDPs (todo-cards etc.) precisely needed each of
+      // those, unlike a generic content block, so they opt out of this
+      // shared wrapper entirely rather than fighting it.
+      if (block.blockType === "productHero" || block.blockType === "productPricingPanel") {
+        return <div key={block.id}>{renderProductBlock(block, ctx)}</div>;
+      }
+      return (
+        <Reveal key={block.id} className="w-full px-[var(--layout-padding-x)] py-8 sm:py-12">
+          {renderProductBlock(block, ctx)}
+        </Reveal>
+      );
+    })
+  );
+
+  return <>{rendered}</>;
+}
+
+type ProductBlockContext = {
+  product: Product;
+  shipping: Awaited<ReturnType<typeof getShippingSettings>>;
+  taxRate: number;
+  kleinunternehmer: boolean;
+};
+
+function renderProductBlock(block: ProductBlock, ctx: ProductBlockContext): React.ReactNode {
+  switch (block.blockType) {
+    case "productHero":
+      return <ProductHero {...ctx} body={block.body} />;
+    case "productPricingPanel":
+      return <ProductPricingPanel {...ctx} />;
+    // Every other block type is identical to Pages.layout's own — same
+    // Block config, reused a second time (see this file's own comment).
+    default:
+      return renderPageBlockSync(block as PageBlock);
+  }
+}
+
+// Matches der-eine/todo-cards' own hand-coded Hero.tsx exactly — same
+// section/grid/Reveal/padding structure, same edge-to-edge image with
+// hover-scale — so a block-driven PDP hero doesn't visually stand apart
+// from its hand-coded siblings. Only the body prose differs: it's this
+// block's own `body` richText instead of hardcoded JSX.
+function ProductHero({ product, shipping, taxRate, kleinunternehmer, body }: ProductBlockContext & { body: unknown }) {
+  const discount = discountPercent(product.price, product.compareAtPrice);
+  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="bg-bg-base w-full overflow-hidden">
+      <div className="flex flex-col lg:grid lg:grid-cols-12 gap-8 lg:gap-[var(--layout-grid-gap)] pt-10 md:pt-12">
+        <Reveal className="order-1 lg:order-none lg:col-span-5 flex flex-col gap-6 items-start pl-[var(--layout-padding-x)] pr-10 lg:pr-0">
+          <p className="flex items-center gap-2 text-body-sm text-text-muted">
+            <Link href="/" className="hover:text-brand transition-colors">
+              Startseite
+            </Link>
+            <span>›</span>
+            <Link href="/#werkzeuge" className="hover:text-brand transition-colors">
+              Werkzeuge
+            </Link>
+            <span>›</span>
+            <span className="text-text-primary">
+              <ProductName name={product.name} />
+            </span>
+          </p>
+
+          <div className="flex flex-col gap-6 items-start w-full flex-1 lg:justify-center">
+            <div className="flex flex-col gap-2 items-start w-full">
+              <p className="font-semibold text-h-page text-text-primary" style={{ fontFamily: "var(--font-playfair)" }}>
+                <ProductName name={product.name} />
+              </p>
+              {product.subline && (
+                <p className="font-semibold text-h3 text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>
+                  {product.subline}
+                </p>
+              )}
+            </div>
+
+            {body ? <RichText content={body} /> : null}
+
+            <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">
+                  {kleinunternehmer
+                    ? product.noShippingCost
+                      ? "Keine Versandkosten"
+                      : "zzgl. Versand"
+                    : `inkl. ${taxRate}% MwSt. ${product.noShippingCost ? "– keine Versandkosten" : "zzgl. Versand"}`}
+                </p>
+              </div>
+              {!product.noShippingCost && (
+                <p className="text-label text-text-muted">
+                  Lieferzeit: {shipping.totalDays.min}–{shipping.totalDays.max} Werktage innerhalb Deutschlands
+                </p>
+              )}
+              {anyLowStock && <p className="text-label font-bold text-warning">Nur noch wenige verfügbar</p>}
+            </div>
+
+            <AddToCartButton
+              label="In den Warenkorb"
+              className="w-full sm:w-auto inline-flex items-center justify-center px-8 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-base"
+              numericId={product.numericId}
+              outOfStock={fullyOutOfStock}
+              maxQty={product.maxQty}
+              variants={product.active ? product.variants : []}
+            />
+          </div>
+        </Reveal>
+
+        <Reveal
+          className="order-2 lg:order-none lg:col-span-7 group relative w-full aspect-[3/2] rounded-md overflow-hidden"
+          delay={0.15}
+        >
+          <Image
+            src={product.image}
+            alt={product.name}
+            fill
+            priority
+            sizes="(min-width: 1024px) 58vw, 100vw"
+            className="object-cover transition-transform duration-500 group-hover:scale-105"
+          />
+        </Reveal>
+      </div>
+    </section>
+  );
+}
+
+// Matches todo-cards' own hand-coded Pricing.tsx exactly — see that
+// file's own comment on why this closing panel looks the way it does.
+function ProductPricingPanel({ product, shipping, taxRate, kleinunternehmer }: ProductBlockContext) {
+  const discount = discountPercent(product.price, product.compareAtPrice);
+  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">
+      <Reveal className="bg-bg-muted rounded-md flex flex-col lg:flex-row gap-8 lg:gap-12 items-center p-6 lg:pl-8 lg:pr-10 lg:py-6">
+      <div className="group relative w-full lg:w-[25.625rem] lg:shrink-0 aspect-[410/227] rounded-sm overflow-hidden">
+        <Image
+          src={product.image}
+          alt={product.name}
+          fill
+          sizes="(min-width: 1024px) 410px, 100vw"
+          className="object-cover transition-transform duration-500 group-hover:scale-105"
+        />
+        {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>
+          )
+        )}
+      </div>
+
+      <div className="flex flex-col gap-3 items-start flex-1 min-w-0 w-full">
+        <p className="font-semibold text-h-small text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>
+          <ProductName name={product.name} />
+        </p>
+        {product.subline && <p className="text-body-sm text-text-primary">{product.subline}</p>}
+      </div>
+
+      <div className="flex flex-col gap-3 items-start w-full lg:w-[18.75rem] lg:shrink-0">
+        <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>
+          </div>
+          <p className="text-label text-text-muted">
+            {kleinunternehmer
+              ? product.noShippingCost
+                ? "Keine Versandkosten"
+                : "zzgl. Versand"
+              : `inkl. ${taxRate}% MwSt. ${product.noShippingCost ? "– keine Versandkosten" : "zzgl. Versand"}`}
+          </p>
+          {!product.noShippingCost && (
+            <p className="text-label text-text-muted">
+              Lieferzeit: {shipping.totalDays.min}–{shipping.totalDays.max} Werktage innerhalb Deutschlands
+            </p>
+          )}
+        </div>
+        {anyLowStock && <p className="text-label font-bold text-warning">Nur noch wenige verfügbar</p>}
+        <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"
+          numericId={product.numericId}
+          outOfStock={fullyOutOfStock}
+          maxQty={product.maxQty}
+          variants={product.active ? product.variants : []}
+        />
+      </div>
+      </Reveal>
+    </section>
+  );
+}

app/components/ProductCard.tsx

@@ -5,6 +5,7 @@ import { formatPrice, discountPercent } from "../lib/format";
 import { effectiveTaxRate } from "../lib/cartTotals";
 import { AddToCartInlineButton } from "./AddToCartInlineButton";
 import { WishlistButton } from "./WishlistButton";
+import { ProductName } from "./ProductName";
 import type { Product } from "../lib/payload";
 
 // Single shared card markup for every product grid (ProductGrid,
@@ -53,8 +54,20 @@ export function ProductCard({
   const anyLowStock = product.variants.length > 0 ? product.variants.some((v) => v.lowStock) : product.lowStock;
 
   return (
+    // 6 direct grid rows (image / header / price / belowPrice / lowstock /
+    // button) instead of the old flex column — a plain flex-1 spacer only
+    // pins the button to the bottom of THIS card, it can't make the price
+    // row start at the same Y as a row sibling whose header block is a
+    // different height (e.g. a 2-line vs 1-line subline). grid-template-
+    // rows: subgrid pulls in the row-tracks each caller's grid container
+    // already declares (see ProductGrid.tsx's own comment) so every row is
+    // genuinely shared/max'd across the row of cards — dynamic, no
+    // line-clamp/truncation needed on the subline. gap-3 is used for every
+    // row gap including after the image (was pt-4/1rem there before —
+    // 0.25rem less, accepted for one consistent grid gap instead of mixed
+    // margin/gap spacing).
     <div
-      className={`group bg-bg-base border border-border rounded-md overflow-hidden flex flex-col h-full transition-transform duration-300 hover:-translate-y-1 ${className}`}
+      className={`group bg-bg-base border border-border rounded-md overflow-hidden grid [grid-template-rows:subgrid] [grid-row:span_6] gap-3 transition-transform duration-300 hover:-translate-y-1 ${className}`}
     >
       <div className="relative w-full aspect-[276/210] overflow-hidden">
         {/* Link wraps only the image, not the whole header — WishlistButton
@@ -97,49 +110,46 @@ export function ProductCard({
           <WishlistButton productId={product.numericId} className="absolute top-3 right-3" revealOnHover={wishlistRevealOnHover} />
         )}
       </div>
-      <div className="flex flex-col gap-3 items-start px-5 pb-5 pt-4 w-full flex-1">
-        <div className="flex flex-col gap-1 items-start w-full">
-          {product.categories.length > 0 && (
-            <p className="text-label font-semibold text-text-muted uppercase tracking-wide">{product.categories.join(", ")}</p>
-          )}
-          {product.href ? (
-            <Link
-              href={product.href}
-              className="font-semibold text-h4 text-text-primary w-full hover:text-brand transition-colors"
-              style={{ fontFamily: "var(--font-lora)" }}
-            >
-              {product.name}
-            </Link>
-          ) : (
-            <p className="font-semibold text-h4 text-text-primary w-full" style={{ fontFamily: "var(--font-lora)" }}>
-              {product.name}
-            </p>
-          )}
-        </div>
-        <p className="flex items-baseline gap-1.5">
-          {discount !== null && (
-            <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>
-          {!kleinunternehmer && <span className="text-label text-text-muted">inkl. {taxRate}% MwSt.</span>}
-        </p>
-        {belowPrice}
-        {/* Always rendered, text conditional — reserved height keeps every
-            card in a row equal height regardless of low-stock status. An
-            earlier version omitted this for fully-out-of-stock products
-            (this line can never apply there), on the theory that it was
-            dead space — but NotifyMeForm's single-row redesign (see its
-            own comment) now matches AddToCartInlineButton's button height
-            exactly, which made THIS line the only remaining source of a
-            mismatch: omitting it made the sold-out card shorter than its
-            siblings instead of taller. Keeping it unconditional is what
-            actually gets an exact match now. */}
-        <p className="min-h-[1.05rem] text-label font-bold text-warning">{anyLowStock ? "Nur noch wenige verfügbar" : null}</p>
 
-        {/* flex-1 spacer — pins every card's button to the same Y
-            regardless of whether the title/category line wraps. */}
-        <div className="flex-1" />
+      <div className="flex flex-col gap-1 items-start w-full px-5">
+        {product.categories.length > 0 && (
+          <p className="text-label font-semibold text-text-muted uppercase tracking-wide">{product.categories.join(", ")}</p>
+        )}
+        {product.href ? (
+          <Link
+            href={product.href}
+            className="font-semibold text-h4 text-text-primary w-full hover:text-brand transition-colors"
+            style={{ fontFamily: "var(--font-lora)" }}
+          >
+            <ProductName name={product.name} />
+          </Link>
+        ) : (
+          <p className="font-semibold text-h4 text-text-primary w-full" style={{ fontFamily: "var(--font-lora)" }}>
+            <ProductName name={product.name} />
+          </p>
+        )}
+        {product.subline && <p className="text-body-sm text-text-muted w-full">{product.subline}</p>}
+      </div>
 
+      <p className="flex items-baseline gap-1.5 px-5">
+        {discount !== null && (
+          <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>
+        {!kleinunternehmer && <span className="text-label text-text-muted">inkl. {taxRate}% MwSt.</span>}
+      </p>
+
+      <div className="px-5">{belowPrice}</div>
+
+      {/* Always rendered, text conditional — an empty row still occupies
+          its shared track (0-height unless a row sibling needs it), same
+          reasoning as the price/header rows above. */}
+      <p className="text-label font-bold text-warning px-5">{anyLowStock ? "Nur noch wenige verfügbar" : null}</p>
+
+      {/* self-end pins the button to the bottom of this row even though
+          the row itself is minmax(0,1fr) (see grid-auto-rows) and can be
+          taller than the button — replaces the old flex-1 spacer. */}
+      <div className="self-end px-5 pb-5 w-full">
         <AddToCartInlineButton
           id={product.id}
           numericId={product.numericId}

app/components/ProductName.tsx

@@ -0,0 +1,16 @@
+// Every hand-written PDP headline styles a trailing "." in brand color
+// (e.g. der-eine/Pricing.tsx's "Der Eine<span className="text-brand">.</span>"),
+// matching how every product's own Payload `name` is actually written
+// ("Der Eine.", "Die Pause.", "Einfach anfangen."). Anywhere `product.name`
+// is rendered as plain text instead (cards, cart line items, the one
+// Payload-driven PDP hero) silently lost that styling — this centralizes
+// the same trailing-period split so it can't drift per call site again.
+export function ProductName({ name }: { name: string }) {
+  if (!name.endsWith(".")) return <>{name}</>;
+  return (
+    <>
+      {name.slice(0, -1)}
+      <span className="text-brand">.</span>
+    </>
+  );
+}

app/components/ProductSpotlight.tsx

@@ -134,7 +134,7 @@ export async function ProductSpotlight() {
           >
             {product.spotlightHeadline || product.name}
           </p>
-          <SpotlightText content={product.spotlightText} fallback={product.description} />
+          <SpotlightText content={product.spotlightText} fallback={product.descriptionText} />
           {/* 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). */}

app/components/Quote.tsx

@@ -1,11 +1,17 @@
+import { QuoteLabel } from "./QuoteLabel";
+
 // Same visual language as RichText.tsx's Quote converter (Caveat script +
 // brand divider) — extracted here so PageBlocks.tsx (and any future hand-
 // written page) can reuse it instead of each page defining its own copy,
 // which is what /lebensuhr, /3x3-system, and /ueber-mich each did before
-// this existed.
-export function Quote({ children }: { children: React.ReactNode }) {
+// this existed. `label` was dropped in that extraction (this component had
+// no prop for it at all) — QuoteBlock.label was set in the admin but never
+// actually reached the page, unlike RichText.tsx's own local Quote, which
+// this now matches.
+export function Quote({ label, children }: { label?: string | null; children: React.ReactNode }) {
   return (
     <div className="relative flex items-start gap-6 w-full my-2">
+      {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}

app/components/RichText.tsx

@@ -1,7 +1,10 @@
 import Image from "next/image";
+import Link from "next/link";
 import { RichText as LexicalRichText, type JSXConvertersFunction } from "@payloadcms/richtext-lexical/react";
 import type { TOCSection } from "./SectionTOC";
 import { QuoteLabel } from "./QuoteLabel";
+import { StepArrow } from "./StepArrow";
+import { STEP_ICONS, SYMBOLIC_ICONS } from "./icons/StepIcons";
 
 // Switched 2026-07-24 from a small hand-rolled Lexical JSON->JSX walker to
 // Payload's own official React renderer + custom JSXConverters — needed
@@ -89,12 +92,29 @@ 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 };
+type IconBlockFields = { icon: string };
+type PillListBlockFields = { items: { id?: string | null; label: string }[] };
+type ChecklistImageBlockFields = { image: MediaRef; items: { id?: string | null; text: string }[] };
+type TableBlockFields = { labelHeader: string; valueHeader: string; rows: { id?: string | null; label: string; value: string }[] };
+type StepRowBlockFields = {
+  items: { id?: string | null; icon: string; title: string; subtitle?: string | null; description: string }[];
+};
+type CtaCardBlockFields = { eyebrow: string; title: string; description?: string | null; href: string };
 
 function BlockCaption({ caption }: { caption?: string | null }) {
   if (!caption) return null;
   return <p className="text-body-sm text-text-muted text-center">{caption}</p>;
 }
 
+// Same checkmark as PageBlocks.tsx's own — see that file's comment.
+function CheckIcon() {
+  return (
+    <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>
+  );
+}
+
 // 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.
@@ -250,6 +270,121 @@ function buildConverters(quoteLabel: string): JSXConvertersFunction {
           </Quote>
         );
       },
+      // Same page-builder blocks as PageBlocks.tsx (Pages.layout) — see
+      // that file's own comment on each block's visual treatment, mirrored
+      // here field-for-field since it's the exact same Block config
+      // registered a second time (Posts.content's BlocksFeature) so blog
+      // posts can use them mid-article too. `testimonialsRef` is the one
+      // page-builder block deliberately NOT included: it needs an async
+      // data fetch, and this converter set is shared with LiveRichText's
+      // client-side live-preview rendering (see blog's LivePostContent.tsx),
+      // where an async component would break — PageBlocks.tsx only gets
+      // away with it by awaiting outside the sync per-block switch, in its
+      // own async server component.
+      icon: ({ node }: { node: { fields: unknown } }) => {
+        const fields = node.fields as IconBlockFields;
+        const SymbolIcon = SYMBOLIC_ICONS[fields.icon];
+        return SymbolIcon ? <div>{SymbolIcon()}</div> : null;
+      },
+      pillList: ({ node }: { node: { fields: unknown } }) => {
+        const fields = node.fields as PillListBlockFields;
+        return (
+          <div className="flex flex-wrap gap-2">
+            {fields.items.map((item, i) => (
+              <span key={item.id ?? i} className="text-body-sm text-text-muted bg-bg-muted rounded-full px-3 py-1">
+                {item.label}
+              </span>
+            ))}
+          </div>
+        );
+      },
+      checklistImage: ({ node }: { node: { fields: unknown } }) => {
+        const fields = node.fields as ChecklistImageBlockFields;
+        const url = mediaUrl(fields.image);
+        return (
+          <div className="flex flex-col lg:flex-row gap-8 lg:gap-10 items-center w-full">
+            {url && (
+              <div className="relative w-full lg:w-[44%] lg:shrink-0 rounded-xl overflow-hidden bg-bg-muted" style={{ minHeight: "16rem" }}>
+                <Image alt="" src={url} fill sizes="(min-width: 1024px) 44vw, 100vw" className="object-cover" />
+              </div>
+            )}
+            <ul className="flex-1 w-full flex flex-col gap-4">
+              {fields.items.map((item, i) => (
+                <li key={item.id ?? i} className="flex items-start gap-3">
+                  <CheckIcon />
+                  <p className="text-body text-text-body">{item.text}</p>
+                </li>
+              ))}
+            </ul>
+          </div>
+        );
+      },
+      table: ({ node }: { node: { fields: unknown } }) => {
+        const fields = node.fields as TableBlockFields;
+        return (
+          <div className="bg-bg-muted rounded-xl overflow-hidden w-full">
+            <table className="w-full text-left border-collapse">
+              <thead>
+                <tr className="border-b-2 border-brand">
+                  <th className="py-3 pl-6 pr-4 font-semibold text-body-sm text-text-primary uppercase tracking-wide">{fields.labelHeader}</th>
+                  <th className="py-3 pr-6 font-semibold text-body-sm text-text-primary uppercase tracking-wide">{fields.valueHeader}</th>
+                </tr>
+              </thead>
+              <tbody>
+                {fields.rows.map((row, i) => (
+                  <tr key={row.id ?? i} className={i % 2 === 1 ? "bg-bg-base/60" : undefined}>
+                    <td className="py-2.5 pl-6 pr-4 text-body text-text-body">{row.label}</td>
+                    <td className="py-2.5 pr-6 font-semibold text-body text-text-primary">{row.value}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        );
+      },
+      stepRow: ({ node }: { node: { fields: unknown } }) => {
+        const fields = node.fields as StepRowBlockFields;
+        const icons = fields.items.map((item) => STEP_ICONS[item.icon]);
+        return (
+          <div className="flex flex-col lg:flex-row items-center lg:items-start gap-8 lg:gap-2 w-full">
+            {fields.items.flatMap((item, i) => [
+              <div key={item.id ?? i} 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">
+                  {icons[i]?.()}
+                </div>
+                <div className="flex flex-col gap-1 text-center">
+                  <p className="font-semibold text-text-primary text-[1rem]">{item.title}</p>
+                  {item.subtitle && <p className="font-semibold text-[0.75rem] text-brand">{item.subtitle}</p>}
+                  <p className="text-[0.875rem] text-text-muted leading-[1.5]">{item.description}</p>
+                </div>
+              </div>,
+              i < fields.items.length - 1 ? (
+                <div key={`arrow-${item.id ?? i}`} className="flex items-center justify-center shrink-0 lg:mt-5">
+                  <StepArrow className="w-8 h-8 rotate-90 lg:w-10 lg:h-4 lg:rotate-0" />
+                </div>
+              ) : null,
+            ])}
+          </div>
+        );
+      },
+      ctaCard: ({ node }: { node: { fields: unknown } }) => {
+        const fields = node.fields as CtaCardBlockFields;
+        return (
+          <Link
+            href={fields.href}
+            className="group flex items-center justify-between gap-4 border border-border rounded-md px-6 py-5 hover:border-brand transition-colors"
+          >
+            <div className="flex flex-col gap-1">
+              <p className="font-bold text-[0.8125rem] text-brand">{fields.eyebrow}</p>
+              <p className="font-semibold text-body text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>{fields.title}</p>
+              {fields.description && <p className="text-body-sm text-text-muted">{fields.description}</p>}
+            </div>
+            <svg viewBox="0 0 20 20" className="size-4 shrink-0 text-text-primary transition-transform duration-200 group-hover:translate-x-1" fill="none" aria-hidden="true">
+              <path d="M4 10h12m0 0-5-5m5 5-5 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+          </Link>
+        );
+      },
     },
   });
 }

app/der-eine/components/Hero.tsx

@@ -2,6 +2,7 @@ import Link from "next/link";
 import { AddToCartButton } from "../../components/AddToCartButton";
 import { ProductGallery } from "../../components/ProductGallery";
 import { Reveal } from "../../components/Reveal";
+import { ProductName } from "../../components/ProductName";
 import { getProductBySlug, getShippingSettings, getDefaultTaxRatePercent, getKleinunternehmer } from "../../lib/payload";
 import { formatPrice, discountPercent } from "../../lib/format";
 import { effectiveTaxRate } from "../../lib/cartTotals";
@@ -52,7 +53,7 @@ export async function Hero() {
               Werkzeuge
             </Link>
             <span>›</span>
-            <span className="text-text-primary">Der Eine</span>
+            <span className="text-text-primary">{product ? <ProductName name={product.name} /> : "Der Eine."}</span>
           </p>
 
           <div className="flex flex-col gap-6 items-start w-full flex-1 lg:justify-center">
@@ -63,12 +64,14 @@ export async function Hero() {
               >
                 Der Eine<span className="text-brand">.</span>
               </p>
-              <p
-                className="font-semibold text-h3 text-text-primary"
-                style={{ fontFamily: "var(--font-lora)" }}
-              >
-                Für die eine Sache, die gerade zählt.
-              </p>
+              {product?.subline && (
+                <p
+                  className="font-semibold text-h3 text-text-primary"
+                  style={{ fontFamily: "var(--font-lora)" }}
+                >
+                  {product.subline}
+                </p>
+              )}
             </div>
 
             <p className="text-body text-text-body">

app/der-eine/components/PasstDazu.tsx

@@ -36,7 +36,7 @@ export async function PasstDazu({ productSlug }: { productSlug: string }) {
                 >
                   {related.name}
                 </p>
-                <p className="text-[0.9375rem] text-text-muted leading-[1.45]">{related.description}</p>
+                <p className="text-[0.9375rem] text-text-muted leading-[1.45]">{related.descriptionText}</p>
               </div>
               <span className="flex items-center gap-1.5 font-bold text-[0.875rem] text-text-primary whitespace-nowrap mt-1 sm:mt-0">
                 Entdecken

app/der-eine/page.tsx

@@ -18,7 +18,7 @@ const title = "Der Eine. – Für die eine Sache, die gerade zählt.";
 // the cart/checkout/JSON-LD elsewhere) — same field, one source now.
 export async function generateMetadata(): Promise<Metadata> {
   const product = await getProductBySlug("stift-kugelschreiber");
-  const description = product?.description ?? undefined;
+  const description = product?.descriptionText || undefined;
   return {
     title,
     description,

app/einfach-anfangen/page.tsx

@@ -0,0 +1,48 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { ProductBlocks } from "../components/ProductBlocks";
+import { Footer } from "../components/Footer";
+import { getProductBySlug, getCompanySettings } from "../lib/payload";
+import { buildProductSchema } from "../lib/structuredData";
+
+const title = "Einfach anfangen. – Die Karte für die Dinge, die heute anstehen.";
+
+// Description reads from the live product, same pattern as der-eine/
+// tasse-die-pause — see der-eine/page.tsx's own comment on why this and
+// the hand-written Hero prose are allowed to differ.
+export async function generateMetadata(): Promise<Metadata> {
+  const product = await getProductBySlug("todo-starter");
+  const description = product?.descriptionText || undefined;
+  return {
+    title,
+    description,
+    alternates: { canonical: "/einfach-anfangen" },
+    openGraph: { title, description, url: "/einfach-anfangen" },
+    twitter: { title, description },
+  };
+}
+
+// First PDP driven entirely by Products.layout (see that field's own
+// comment in Products.ts) instead of its own bespoke Hero/HowItWorks/
+// Focus/Pricing components — those were deleted once this product's
+// content was authored as blocks in the admin (see the PDP page-builder
+// rollout). der-eine/todo-cards/tasse-die-pause are untouched and keep
+// their own hand-coded components; nothing about them depends on this.
+export default async function EinfachAnfangenPage() {
+  const [product, seller] = await Promise.all([
+    getProductBySlug("todo-starter"),
+    getCompanySettings(),
+  ]);
+  if (!product) notFound();
+  const productSchema = buildProductSchema(product, "https://einfach-produktiv.mk360.de/einfach-anfangen", seller);
+
+  return (
+    <>
+      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(productSchema) }} />
+      <main className="flex flex-col flex-1">
+        <ProductBlocks product={product} />
+      </main>
+      <Footer />
+    </>
+  );
+}

app/konto/merkliste/components/MerklisteGrid.tsx

@@ -39,15 +39,18 @@ export function MerklisteGrid({
   }
 
   return (
-    <RevealGroup className="grid items-start grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 w-full">
+    // No items-start, and grid-auto-rows + subgrid on each RevealItem —
+    // see ProductGrid.tsx's own comment on why both are needed for
+    // ProductCard's internal rows (price, etc.) to actually line up
+    // across cards, not just overall card height.
+    <RevealGroup className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 [grid-auto-rows:auto_auto_auto_auto_auto_minmax(0,1fr)] w-full">
       {visibleEntries.map(({ item, product }) => (
-        <RevealItem key={`${product.id}-${item.variant}`}>
+        <RevealItem key={`${product.id}-${item.variant}`} className="grid [grid-template-rows:subgrid] [grid-row:span_6]">
           <ProductCard
             product={product}
             defaultTaxRate={defaultTaxRate}
             kleinunternehmer={kleinunternehmer}
             wishlistEnabled
-            className="h-full"
             // Already-purchased takes precedence over the default
             // Ausverkauft/discount badge — a customer who already bought
             // this doesn't need a restock notice, they need to know they

app/lib/__tests__/cartTotals.test.ts

@@ -6,7 +6,10 @@ const product = (overrides: Partial<Product> = {}): Product => ({
   id: "todo-karten",
   numericId: 1,
   name: "ToDo-Karten",
-  description: "",
+  subline: null,
+  layout: [],
+  description: null,
+  descriptionText: "",
   sku: null,
   price: 12.9,
   compareAtPrice: null,

app/lib/payload.ts

@@ -181,7 +181,15 @@ export type Product = {
   // slug-based call site.
   numericId: number;
   name: string;
-  description: string;
+  // Short tagline shown under the name on cards/cart/PDP hero — see
+  // Products.ts's own field comment. null/"" means show nothing extra.
+  subline: string | null;
+  // Raw Lexical richText JSON — rendered formatted (bold/italic/multiple
+  // paragraphs) on the PDP via the shared <RichText> component. Plain-text
+  // consumers (Passend-dazu cards, JSON-LD) use `descriptionText` below
+  // instead of re-deriving text from this themselves.
+  description: unknown | null;
+  descriptionText: string;
   // Not shown anywhere in the UI today — only consumed by
   // buildProductSchema (JSON-LD's Product.sku), a real Schema.org property
   // Google's rich-result validator looks for.
@@ -261,13 +269,21 @@ export type Product = {
   // related product's own relatedProduct is never resolved/shown) — see
   // mapPayloadProduct's own comment.
   relatedProduct: Product | null;
+  // Optional PDP page-builder content — see Products.ts's own `layout`
+  // field comment. Empty for every existing hand-coded PDP (der-eine,
+  // todo-cards, tasse-die-pause); a product's own page.tsx decides whether
+  // to render this or its bespoke components, this type doesn't enforce
+  // either.
+  layout: ProductBlock[];
 };
 
 type PayloadProduct = {
   id: number;
   name: string;
+  subline: string | null;
   slug: string;
-  description: string | null;
+  layout: PayloadProductBlock[] | null;
+  description: unknown | null;
   sku: string | null;
   price: number;
   compareAtPrice: number | null;
@@ -325,16 +341,35 @@ function maxPurchasableQty(trackInventory: boolean, stock: number | null, allowB
   return trackInventory && !allowBackorder ? (stock ?? 0) : null;
 }
 
+type LexicalTextNode = {
+  text?: string;
+  children?: LexicalTextNode[];
+};
+
+// Mirrors the backend's own Posts.ts extractPlainText (same shape, same
+// space-joined fallback for multiple paragraphs/children) — kept as a
+// separate copy rather than a shared package since it's a few lines and
+// the two run in different runtimes (Payload server vs. this frontend).
+function extractPlainText(node: LexicalTextNode | null | undefined): string {
+  if (!node) return "";
+  if (typeof node.text === "string") return node.text;
+  if (Array.isArray(node.children)) return node.children.map(extractPlainText).join(" ");
+  return "";
+}
+
 // 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
 // about eliminating elsewhere.
 export function mapPayloadProduct(product: PayloadProduct): Product {
+  const descriptionRoot = (product.description as { root?: LexicalTextNode } | null)?.root;
   return {
     id: product.slug,
     numericId: product.id,
     name: product.name,
-    description: product.description ?? "",
+    subline: product.subline || null,
+    description: product.description ?? null,
+    descriptionText: extractPlainText(descriptionRoot),
     sku: product.sku || null,
     price: product.price,
     compareAtPrice: product.compareAtPrice ?? null,
@@ -371,6 +406,7 @@ export function mapPayloadProduct(product: PayloadProduct): Product {
     // this nested object's OWN relatedProduct is never populated (stays a
     // raw id or absent), so the recursion bottoms out after exactly one level.
     relatedProduct: typeof product.relatedProduct === "object" && product.relatedProduct ? mapPayloadProduct(product.relatedProduct) : null,
+    layout: (product.layout ?? []).map(mapPayloadProductBlock),
   };
 }
 
@@ -823,7 +859,7 @@ export async function getWerkzeugeCards(): Promise<WerkzeugeCard[]> {
   }));
 }
 
-export type TestimonialsPage = "todo-cards" | "newsletter" | "klarheits-check" | "der-eine";
+export type TestimonialsPage = "todo-cards" | "newsletter" | "klarheits-check" | "der-eine" | "einfach-anfangen";
 
 export type Testimonial = { id: number; quote: string; name: string; role: string; avatar: string };
 
@@ -1215,20 +1251,27 @@ export async function getSeoSettings(): Promise<SeoSettings> {
   };
 }
 
-// Powers app/r/[code]/route.ts — a static short link (e.g. printed on a QR
-// code) that redirects to a `targetPath` editable in Payload at any time,
-// so the QR code itself never needs reprinting. `cache: "no-store"`
-// (unlike this file's other public-catalog fetches) since a stale hit here
-// would send a visitor to a since-changed target, and the PATCH below needs
-// the just-fetched id/clickCount, not a 60s-old ISR snapshot.
+// Powers app/r/[code]/route.ts and app/sticker/[code]/route.ts — a static
+// short link (e.g. printed on a QR code) that redirects to a `targetPath`
+// editable in Payload at any time, so the QR code itself never needs
+// reprinting. `cache: "no-store"` (unlike this file's other public-catalog
+// fetches) since a stale hit here would send a visitor to a since-changed
+// target, and the PATCH below needs the just-fetched id/clickCount, not a
+// 60s-old ISR snapshot.
 type PayloadRedirect = { id: number; targetPath: string; clickCount: number };
 
-// PATCH failure only logs — click tracking is informational, never worth
-// stranding a visitor on a broken link over.
-export async function resolveAndTrackRedirect(code: string): Promise<string | null> {
+// `urlPrefix` filters the match to whichever fixed frontend route is
+// actually calling this — Redirects.urlPrefix is otherwise just an admin
+// label, not something either route enforced, so a code edited to
+// urlPrefix "/sticker" in Payload would silently keep resolving under
+// /r/<code> too without this. Each call site passes its own literal
+// prefix (see route.ts files), so this actually makes the field mean
+// something rather than only decorate the admin list.
+export async function resolveAndTrackRedirect(code: string, urlPrefix: "/r" | "/sticker"): Promise<string | null> {
   const params = new URLSearchParams({
     "where[tenant.slug][equals]": TENANT_SLUG,
     "where[code][equals]": code,
+    "where[urlPrefix][equals]": urlPrefix,
     "where[active][equals]": "true",
     limit: "1",
   });
@@ -1290,6 +1333,66 @@ export async function getTrackingCodes(): Promise<TrackingCode[]> {
   return Array.isArray(data.docs) ? data.docs : [];
 }
 
+// ── Products.layout (PDP page builder) ─────────────────────────────────────
+// Shares 9 of PageBlock's own block types verbatim (richTextSection/
+// stepRow/quote/image/icon/pillList/checklistImage/table/ctaCard — same
+// Payload Block configs, reused a second time on Products.layout, see that
+// field's own comment) plus two product-specific ones that don't exist on
+// Pages: productHero (the one PDP hero variant for now — just a body
+// richText, everything else about the hero comes from the product itself)
+// and productPricingPanel (the closing buy panel, no fields of its own).
+
+export type ProductBlock =
+  | { blockType: "productHero"; id: string; body: unknown | null }
+  | { blockType: "productPricingPanel"; id: string }
+  | { blockType: "richTextSection"; id: string; content: unknown }
+  | { blockType: "stepRow"; id: string; items: { id: string; icon: string; title: string; subtitle: string | null; description: string }[] }
+  | { blockType: "quote"; id: string; text: string; label: string | null }
+  | { blockType: "image"; id: string; image: string | null; caption: string | null }
+  | { blockType: "icon"; id: string; icon: string }
+  | { blockType: "pillList"; id: string; items: { id: string; label: string }[] }
+  | { blockType: "checklistImage"; id: string; image: string | null; items: { id: string; text: string }[] }
+  | { blockType: "table"; id: string; labelHeader: string; valueHeader: string; rows: { id: string; label: string; value: string }[] }
+  | { blockType: "testimonialsRef"; id: string; page: TestimonialsPage }
+  | { blockType: "ctaCard"; id: string; eyebrow: string; title: string; description: string | null; href: string };
+
+type PayloadProductBlock =
+  | { blockType: "productHero"; id: string; body?: unknown | null }
+  | { blockType: "productPricingPanel"; id: string }
+  | { blockType: "richTextSection"; id: string; content: unknown }
+  | { blockType: "stepRow"; id: string; items: { id: string; icon: string; title: string; subtitle?: string | null; description: string }[] }
+  | { blockType: "quote"; id: string; text: string; label?: string | null }
+  | { blockType: "image"; id: string; image: PayloadPageImageField; caption?: string | null }
+  | { blockType: "icon"; id: string; icon: string }
+  | { blockType: "pillList"; id: string; items: { id: string; label: string }[] }
+  | { blockType: "checklistImage"; id: string; image: PayloadPageImageField; items: { id: string; text: string }[] }
+  | { blockType: "table"; id: string; labelHeader: string; valueHeader: string; rows: { id: string; label: string; value: string }[] }
+  | { blockType: "testimonialsRef"; id: string; page: TestimonialsPage }
+  | { blockType: "ctaCard"; id: string; eyebrow: string; title: string; description?: string | null; href: string };
+
+function mapPayloadProductBlock(block: PayloadProductBlock): ProductBlock {
+  switch (block.blockType) {
+    case "productHero":
+      return { blockType: "productHero", id: block.id, body: block.body ?? null };
+    case "image":
+      return { blockType: "image", id: block.id, image: mapPayloadPageImage(block.image), caption: block.caption ?? null };
+    case "checklistImage":
+      return { blockType: "checklistImage", id: block.id, image: mapPayloadPageImage(block.image), items: block.items };
+    case "quote":
+      return { blockType: "quote", id: block.id, text: block.text, label: block.label ?? null };
+    case "ctaCard":
+      return { blockType: "ctaCard", id: block.id, eyebrow: block.eyebrow, title: block.title, description: block.description ?? null, href: block.href };
+    case "stepRow":
+      return {
+        blockType: "stepRow",
+        id: block.id,
+        items: block.items.map((item) => ({ ...item, subtitle: item.subtitle ?? null })),
+      };
+    default:
+      return block;
+  }
+}
+
 // ── Pages (generic slug-routed content pages / page builder) ──────────────
 // Powers app/[slug]/page.tsx — the first generic catch-all route in this
 // repo (every other content page today is its own static directory).

app/lib/structuredData.ts

@@ -53,7 +53,7 @@ export function buildProductSchema(product: Product, url: string, seller: Compan
     "@context": "https://schema.org",
     "@type": "Product",
     name: product.name,
-    description: product.description,
+    description: product.descriptionText,
     image: product.gallery.length > 0 ? [product.image, ...product.gallery] : product.image,
     url,
     ...(product.sku ? { sku: product.sku } : {}),

app/newsletter-confirmed/page.tsx

@@ -40,6 +40,12 @@ export default function NewsletterConfirmedPage() {
           >
             Bestätigt!
           </p>
+          <p
+            className="font-semibold text-h3 text-text-primary"
+            style={{ fontFamily: "var(--font-lora)" }}
+          >
+            Deine Newsletter-Anmeldung ist eingegangen.
+          </p>
           <div className="h-[0.125rem] w-8 bg-brand" />
 
           <div className="flex flex-col gap-4 text-left text-body text-text-muted max-w-[28rem] pt-2">
@@ -54,10 +60,19 @@ export default function NewsletterConfirmedPage() {
             <div className="flex flex-col gap-3 bg-bg-muted rounded-md px-6 py-5">
               <p className="font-semibold text-text-primary">🧭 Dein Klarheitskompass</p>
               <p>Du erhältst ihn in einer separaten E-Mail in den nächsten Minuten – er hilft dir, kurz innezuhalten und dich zu fragen:</p>
-              <ul className="flex flex-col gap-1 list-disc pl-5">
-                <li>Was beschäftigt mich gerade?</li>
-                <li>Was ist wirklich wichtig?</li>
-                <li>Worauf möchte ich meinen Fokus legen?</li>
+              <ul className="flex flex-col gap-2">
+                <li className="flex items-start gap-2">
+                  <CheckIcon />
+                  <span>Was beschäftigt mich gerade?</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <CheckIcon />
+                  <span>Was ist wirklich wichtig?</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <CheckIcon />
+                  <span>Worauf möchte ich meinen Fokus legen?</span>
+                </li>
               </ul>
             </div>
 
@@ -66,13 +81,16 @@ export default function NewsletterConfirmedPage() {
               Beobachte in den nächsten Tagen einfach einmal, womit du deine Aufmerksamkeit
               verbringst. Nicht bewerten. Nur wahrnehmen.
             </p>
-            <p>Bis Sonntag</p>
-            <p className="text-text-primary font-semibold">Björn</p>
+            <p>
+              Bis Sonntag
+              <br />
+              <span className="text-text-primary font-semibold">Björn</span>
+            </p>
           </div>
 
           <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"
+            className="inline-flex items-center justify-center px-7 py-4 mt-4 rounded-sm bg-brand hover:bg-brand-hover active:scale-[0.97] transition-all font-bold text-h4 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>
@@ -83,3 +101,13 @@ export default function NewsletterConfirmedPage() {
     </>
   );
 }
+
+// Same checkmark used by PageBlocks.tsx's checklistImage block (and
+// /lebensuhr's, /7-tage-klarheits-check's own checklists).
+function CheckIcon() {
+  return (
+    <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>
+  );
+}

app/r/[code]/route.ts

@@ -9,7 +9,7 @@ import { resolveAndTrackRedirect } from "../../lib/payload";
 // non-cacheable client-side since the target can change at any time.
 export async function GET(_request: NextRequest, { params }: { params: Promise<{ code: string }> }) {
   const { code } = await params;
-  const targetPath = await resolveAndTrackRedirect(code);
+  const targetPath = await resolveAndTrackRedirect(code, "/r");
 
   // Defense in depth — Redirects.targetPath is already validated in Payload
   // to start with "/", same open-redirect guard as api/preview/route.ts.

app/shop/components/ProductGrid.tsx

@@ -114,12 +114,23 @@ export async function ProductGrid({
               RevealItems mounted into an already-settled parent and stayed
               stuck at opacity 0 — the grid going blank/white after
               applying a filter. */}
+          {/* No items-start here (was set before, silently defeating
+              ProductCard's own h-full, built exactly for equal-height
+              cards) — default items-stretch is what makes every card in a
+              row match the tallest one overall. That alone doesn't align
+              each card's internal rows (e.g. the price sitting right
+              after a subline that wraps to 2 lines on one card but 1 on
+              its neighbor) — see ProductCard.tsx's own comment on the
+              subgrid rows (grid-auto-rows below) that solves that part:
+              each RevealItem here spans the same 6 row-tracks and passes
+              them down via grid-template-rows: subgrid, so row heights are
+              genuinely shared, no fixed line-clamp/truncation needed. */}
           <RevealGroup
             key={products.map((p) => p.id).join(",")}
-            className="grid items-start grid-cols-1 sm:grid-cols-2 lg:grid-cols-12 gap-6 sm:gap-[var(--layout-grid-gap)] w-full"
+            className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-12 gap-6 sm:gap-[var(--layout-grid-gap)] [grid-auto-rows:auto_auto_auto_auto_auto_minmax(0,1fr)] w-full"
           >
             {products.map((product) => (
-              <RevealItem key={product.id} className="lg:col-span-4">
+              <RevealItem key={product.id} className="lg:col-span-4 grid [grid-template-rows:subgrid] [grid-row:span_6]">
                 <ProductCard
                   product={product}
                   defaultTaxRate={defaultTaxRate}
@@ -131,7 +142,6 @@ export async function ProductGrid({
                       Lieferzeit: {shipping.totalDays.min}–{shipping.totalDays.max} Werktage innerhalb Deutschlands
                     </p>
                   }
-                  className="h-full"
                 />
               </RevealItem>
             ))}

app/sticker/[code]/route.ts

@@ -0,0 +1,20 @@
+import { redirect, notFound } from "next/navigation";
+import { NextRequest } from "next/server";
+import { resolveAndTrackRedirect } from "../../lib/payload";
+
+// Legacy sticker QR codes already printed as https://einfach-produktiv.com/sticker/<code>
+// before the /r/[code] short-link scheme existed — can't be reprinted, so
+// this mirrors app/r/[code]/route.ts's exact lookup (same Redirects
+// collection, matched by `code` + urlPrefix "/sticker") under the fixed
+// /sticker prefix instead. Keeps a single admin-editable/toggleable source
+// of truth for both.
+export async function GET(_request: NextRequest, { params }: { params: Promise<{ code: string }> }) {
+  const { code } = await params;
+  const targetPath = await resolveAndTrackRedirect(code, "/sticker");
+
+  if (!targetPath || !targetPath.startsWith("/") || targetPath.startsWith("//")) {
+    notFound();
+  }
+
+  redirect(targetPath);
+}

app/sticker/page.tsx

@@ -0,0 +1,59 @@
+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";
+
+// Placeholder landing page for the /sticker/[code] QR redirects (see that
+// route) — targetPath for those Redirects docs currently points here until
+// a dedicated campaign page exists; swap targetPath in Payload once it does.
+export const metadata: Metadata = {
+  title: "Schön, dass du da bist",
+  description: "Du hast einen einfach produktiv Sticker gescannt.",
+};
+
+export default function StickerPage() {
+  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="M9 3.5h6a1.5 1.5 0 0 1 1.5 1.5v14.5L12 16l-4.5 3.5V5A1.5 1.5 0 0 1 9 3.5Z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" />
+            </svg>
+          </div>
+          <p
+            className="font-semibold text-display text-text-primary"
+            style={{ fontFamily: "var(--font-playfair)" }}
+          >
+            Schön, dass du da bist!
+          </p>
+          <p
+            className="font-semibold text-h3 text-text-primary"
+            style={{ fontFamily: "var(--font-lora)" }}
+          >
+            Du hast einen unserer Sticker entdeckt.
+          </p>
+          <div className="h-[0.125rem] w-8 bg-brand" />
+
+          <div className="flex flex-col gap-4 text-left text-body text-text-muted max-w-[28rem] pt-2">
+            <p>Hallo,</p>
+            <p>
+              schön, dass dich der Sticker hierher geführt hat. Schau dich gerne um – hier
+              findest du alles, was einfach produktiv ausmacht.
+            </p>
+          </div>
+
+          <Link
+            href="/shop"
+            className="inline-flex items-center justify-center px-7 py-4 mt-4 rounded-sm bg-brand hover:bg-brand-hover active:scale-[0.97] transition-all font-bold text-h4 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/tasse-die-pause/components/Hero.tsx

@@ -2,6 +2,8 @@ import Link from "next/link";
 import Image from "next/image";
 import { AddToCartButton } from "../../components/AddToCartButton";
 import { Reveal } from "../../components/Reveal";
+import { RichText } from "../../components/RichText";
+import { ProductName } from "../../components/ProductName";
 import { getProductBySlug, getShippingSettings, getDefaultTaxRatePercent, getKleinunternehmer } from "../../lib/payload";
 import { formatPrice, discountPercent } from "../../lib/format";
 import { effectiveTaxRate } from "../../lib/cartTotals";
@@ -39,18 +41,25 @@ export async function Hero() {
               Werkzeuge
             </Link>
             <span>›</span>
-            <span className="text-text-primary">{product?.name ?? "Tasse"}</span>
+            <span className="text-text-primary">{product ? <ProductName name={product.name} /> : "Tasse"}</span>
           </p>
 
           <div className="flex flex-col gap-6 items-start w-full flex-1 lg:justify-center">
-            <p
-              className="font-semibold text-h-page text-text-primary"
-              style={{ fontFamily: "var(--font-playfair)" }}
-            >
-              {product?.name ?? "Tasse"}
-            </p>
+            <div className="flex flex-col gap-2 items-start w-full">
+              <p
+                className="font-semibold text-h-page text-text-primary"
+                style={{ fontFamily: "var(--font-playfair)" }}
+              >
+                {product ? <ProductName name={product.name} /> : "Tasse"}
+              </p>
+              {product?.subline && (
+                <p className="font-semibold text-h3 text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>
+                  {product.subline}
+                </p>
+              )}
+            </div>
 
-            {product?.description && <p className="text-body text-text-body">{product.description}</p>}
+            {product?.description ? <RichText content={product.description} /> : null}
 
             <div className="flex flex-col gap-1 items-start">
               {product && (

app/tasse-die-pause/components/Pricing.tsx

@@ -1,6 +1,8 @@
 import Image from "next/image";
 import { AddToCartButton } from "../../components/AddToCartButton";
 import { Reveal } from "../../components/Reveal";
+import { RichText } from "../../components/RichText";
+import { ProductName } from "../../components/ProductName";
 import { getProductBySlug, getShippingSettings, getDefaultTaxRatePercent, getKleinunternehmer } from "../../lib/payload";
 import { formatPrice, discountPercent } from "../../lib/format";
 import { effectiveTaxRate } from "../../lib/cartTotals";
@@ -46,9 +48,10 @@ export async function Pricing() {
             className="font-semibold text-h-small text-text-primary"
             style={{ fontFamily: "var(--font-lora)" }}
           >
-            {product.name}
+            <ProductName name={product.name} />
           </p>
-          {product.description && <p className="text-body-sm text-text-primary">{product.description}</p>}
+          {product.subline && <p className="text-body-sm font-semibold text-text-primary">{product.subline}</p>}
+          {product.description ? <RichText content={product.description} /> : null}
         </div>
 
         <div className="flex flex-col gap-3 items-start w-full lg:w-[18.75rem] lg:shrink-0">

app/tasse-die-pause/page.tsx

@@ -11,7 +11,7 @@ import { buildProductSchema } from "../lib/structuredData";
 export async function generateMetadata(): Promise<Metadata> {
   const product = await getProductBySlug("tasse-die-pause");
   const title = product ? `${product.name} – einfach produktiv.` : "Tasse – einfach produktiv.";
-  const description = product?.description ?? undefined;
+  const description = product?.descriptionText || undefined;
   return {
     title,
     description,

app/todo-cards/components/TodoKartenHero.tsx

@@ -3,6 +3,7 @@ import Image from "next/image";
 import { AddToCartButton } from "../../components/AddToCartButton";
 import { ProductGallery } from "../../components/ProductGallery";
 import { Reveal } from "../../components/Reveal";
+import { ProductName } from "../../components/ProductName";
 import { getProductBySlug, getShippingSettings, getDefaultTaxRatePercent, getKleinunternehmer } from "../../lib/payload";
 import { formatPrice, discountPercent } from "../../lib/format";
 import { effectiveTaxRate } from "../../lib/cartTotals";
@@ -77,7 +78,7 @@ export async function TodoKartenHero() {
               Werkzeuge
             </Link>
             <span>›</span>
-            <span className="text-text-primary">ToDo-Karten</span>
+            <span className="text-text-primary">{product ? <ProductName name={product.name} /> : "ToDo-Karten"}</span>
           </p>
 
           {/* Everything else — centered in the remaining vertical space at
@@ -97,12 +98,14 @@ export async function TodoKartenHero() {
               >
                 ToDo-Karten<span className="text-brand">.</span>
               </p>
-              <p
-                className="font-semibold text-h3 text-text-primary"
-                style={{ fontFamily: "var(--font-lora)" }}
-              >
-                Kleine Karten. Große Wirkung.
-              </p>
+              {product?.subline && (
+                <p
+                  className="font-semibold text-h3 text-text-primary"
+                  style={{ fontFamily: "var(--font-lora)" }}
+                >
+                  {product.subline}
+                </p>
+              )}
             </div>
 
             <p className="text-body text-text-body">