From 601c2f56948d6fd0728dc995cae5ccc362ffa818 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Sun, 30 Aug 2026 00:37:15 +0000
Subject: [PATCH] PDP: tighten gap between 'Was kann er?' heading and its icon
 row (they read as two unrelated sections)

---
 app/components/ProductBlocks.tsx | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/app/components/ProductBlocks.tsx b/app/components/ProductBlocks.tsx
index dae5891..1a72c5f 100644
--- a/app/components/ProductBlocks.tsx
+++ b/app/components/ProductBlocks.tsx
@@ -98,11 +98,26 @@ export async function ProductBlocks({ product }: { product: Product }) {
       if (block.blockType === "productHero" || block.blockType === "productPricingPanel") {
         return <div key={block.id}>{renderProductBlock(block, ctx)}</div>;
       }
+      // richTextSection→stepRow is always the "Was kann er?" heading
+      // directly above its icon row on a PDP — both getting their own full
+      // py-12/16 stacked (pb of one + pt of the other) put ~100-128px
+      // between a heading and the row it's introducing, reading as two
+      // unrelated sections instead of one (reported 2026-08-30). Trim the
+      // heading's own bottom gap so the two feel like one group, while
+      // keeping the outer edges (after Hero, before Pricing) generous.
+      const isPdpHeadingBeforeIcons = block.blockType === "richTextSection";
+      const isPdpIconsAfterHeading = block.blockType === "stepRow";
       return (
-        // py-12 md:py-16 — matches der-eine's own original Focus.tsx
-        // rhythm exactly (this system's reference template); py-8 sm:py-12
-        // read as too tight right after the hero (reported 2026-08-30).
-        <Reveal key={block.id} className="w-full px-[var(--layout-padding-x)] py-12 md:py-16">
+        <Reveal
+          key={block.id}
+          className={
+            isPdpHeadingBeforeIcons
+              ? "w-full px-[var(--layout-padding-x)] pt-12 md:pt-16 pb-4 md:pb-6"
+              : isPdpIconsAfterHeading
+                ? "w-full px-[var(--layout-padding-x)] pt-2 md:pt-4 pb-12 md:pb-16"
+                : "w-full px-[var(--layout-padding-x)] py-12 md:py-16"
+          }
+        >
           {renderProductBlock(block, ctx)}
         </Reveal>
       );