From 9de2693961017a8b1e5096173c4fa3b6e3a692aa Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Sun, 30 Aug 2026 00:12:02 +0000
Subject: [PATCH] Narrow PDP fact-card section to match blog body width
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

der-eine's original Focus.tsx used max-w-[75rem] — read too wide/loose
for a 3-4 card row once ported to the block system (reported
2026-08-30). Narrowed to max-w-[48rem], matching the blog body column
(RichText.tsx) and the crossSell "Passt dazu" card's own width.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013Eg6h91yngXmSnM51wxXM8
---
 app/components/ProductBlocks.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/app/components/ProductBlocks.tsx b/app/components/ProductBlocks.tsx
index 62bb2bf..faf1011 100644
--- a/app/components/ProductBlocks.tsx
+++ b/app/components/ProductBlocks.tsx
@@ -149,17 +149,20 @@ export function renderProductBlock(block: ProductBlock, ctx: ProductBlockContext
     // selector here (SVG presentation attributes lose to any stylesheet
     // rule) scopes the recolor to PDPs only, without touching the shared
     // icon set or PageBlocks.tsx's own rendering.
-    // Parallel fact cards, not a connected sequence — matches der-eine's
-    // own hand-coded Focus.tsx ("Was kann er?") exactly: icon on top,
+    // Parallel fact cards, not a connected sequence — icon on top,
     // centered, no StepArrow connectors between them (those imply an
     // order these facts don't have). Reuses stepRow's existing icon/
     // title/description shape rather than a new block type; only the
     // rendering diverges from Pages.layout's own connected-arrow stepRow
     // (renderPageBlockSync), scoped to ProductBlocks.tsx. Icons black
     // (#231f20), same override reasoning as the quote block below.
+    // max-w-[48rem] — der-eine's own original Focus.tsx used 75rem, but
+    // that read too wide/loose for this card row (reported 2026-08-30);
+    // narrowed to match the blog body column's own width instead
+    // (RichText.tsx's max-w-[48rem]).
     case "stepRow":
       return (
-        <div key={block.id} className="flex flex-col sm:flex-row gap-8 items-start w-full max-w-[75rem] mx-auto">
+        <div key={block.id} className="flex flex-col sm:flex-row gap-8 items-start w-full max-w-[48rem] mx-auto">
           {block.items.map((item) => {
             const Icon = STEP_ICONS[item.icon];
             return (