From a4606d26ad946460ffd1f9de17c209822ad41293 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Sun, 30 Aug 2026 00:15:17 +0000
Subject: [PATCH] =?UTF-8?q?PDP=20richTextSection=20width=20cap;=20swap=20s?=
 =?UTF-8?q?eal=E2=86=92vase,=20hourglass=E2=86=92star=20icons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- richTextSection on Products now renders inside the same max-w-[48rem]
  mx-auto the fact-cards/crossSell card already use — the "Was kann er?"
  heading sat edge-to-edge while the cards under it were capped, still
  reading as unconstrained (reported 2026-08-30).
- "Vintage-Porzellan"'s medallion and "Für den einen Moment"'s hourglass
  still didn't land (reported 2026-08-30) — replaced with a literal
  pottery/vase silhouette and a single star, reusing the same 'seal'/
  'hourglass' enum keys already assigned to Tasse's blocks so no new
  migration is needed, just new icon content behind the same keys.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013Eg6h91yngXmSnM51wxXM8
---
 app/components/ProductBlocks.tsx   | 10 ++++++
 app/components/icons/StepIcons.tsx | 50 ++++++++++++++++--------------
 2 files changed, 36 insertions(+), 24 deletions(-)

diff --git a/app/components/ProductBlocks.tsx b/app/components/ProductBlocks.tsx
index eef4b75..270a059 100644
--- a/app/components/ProductBlocks.tsx
+++ b/app/components/ProductBlocks.tsx
@@ -141,6 +141,16 @@ export function renderProductBlock(block: ProductBlock, ctx: ProductBlockContext
     // from there since both return their own JSX before calling this.
     case "crossSell":
       return null;
+    // Same max-w-[48rem] mx-auto as the stepRow fact-cards/crossSell card
+    // below — without this, a heading/prose block sat edge-to-edge while
+    // the cards under it were capped, reading as "still not width-limited"
+    // even after the cards themselves were (reported 2026-08-30).
+    case "richTextSection":
+      return (
+        <div key={block.id} className="max-w-[48rem] mx-auto">
+          <RichText content={block.content} />
+        </div>
+      );
     // Black, not brand-yellow — matching der-eine's own hand-coded Focus.tsx
     // icons (#231f20 stroke), which this whole PDP system is meant to look
     // like. STEP_ICONS' SVGs hardcode stroke="#f6a701" per-element (shared
diff --git a/app/components/icons/StepIcons.tsx b/app/components/icons/StepIcons.tsx
index e97bed2..8738569 100644
--- a/app/components/icons/StepIcons.tsx
+++ b/app/components/icons/StepIcons.tsx
@@ -178,19 +178,37 @@ function IconPause() {
   );
 }
 
-function IconSeal() {
-  // Scalloped medallion — vintage/quality-craft facts (e.g. "Vintage-
-  // Porzellan"), where none of the existing glyphs read as "material/
-  // heritage quality" at all.
+function IconVase() {
+  // Classic ornate pottery/vase silhouette (rim, neck, flared belly, foot)
+  // — a literal ceramic shape reads as "Vintage-Porzellan" far more
+  // directly than an abstract medallion did (reported 2026-08-30, the
+  // seal glyph still didn't land).
+  return (
+    <svg width="30" height="40" viewBox="0 0 30 40" fill="none">
+      <path
+        d="M10 3h10M11 3v4.5c0 1.6-1.5 2.6-3.4 4.6C4.5 15.5 3 19 3 23.5 3 32 8.5 37 15 37s12-5 12-13.5c0-4.5-1.5-8-4.6-11.4C20.5 10.1 19 9.1 19 7.5V3"
+        stroke="#f6a701"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path d="M6 22c2 1.5 4.5 2.3 9 2.3s7-.8 9-2.3" stroke="#f6a701" strokeWidth="1.6" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function IconStar() {
+  // A single starred moment — "Für den einen Moment" flags one thing as
+  // special, closer to what a star marks than an hourglass's literal
+  // "time passing" (reported 2026-08-30, hourglass still didn't land).
   return (
     <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
       <path
-        d="M20 3l3 3.2 4-1.4 1.4 4 4.2.6-1 4.2 3.2 2.8-3.2 2.8 1 4.2-4.2.6-1.4 4-4-1.4L20 37l-3-3.2-4 1.4-1.4-4-4.2-.6 1-4.2-3.2-2.8 3.2-2.8-1-4.2 4.2-.6 1.4-4 4 1.4L20 3z"
+        d="M20 3l4.5 10.3L35 14.6l-8 7.6 2.2 10.8L20 27.6l-9.2 5.4L13 22.2 5 14.6l10.5-1.3L20 3z"
         stroke="#f6a701"
         strokeWidth="1.6"
         strokeLinejoin="round"
       />
-      <circle cx="20" cy="20" r="7" stroke="#f6a701" strokeWidth="1.6" />
     </svg>
   );
 }
@@ -215,22 +233,6 @@ function IconDroplets() {
   );
 }
 
-function IconHourglass() {
-  // Classic hourglass — "for the one moment" facts, more evocative of a
-  // pocket of time than the flat pause-bars glyph.
-  return (
-    <svg width="30" height="40" viewBox="0 0 30 40" fill="none">
-      <path
-        d="M6 4h18M6 36h18M7 4c0 8 6 11 8 12-2 1-8 4-8 12M23 4c0 8-6 11-8 12 2 1 8 4 8 12"
-        stroke="#f6a701"
-        strokeWidth="1.6"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
 // Keys MUST match the Payload StepRowBlock's `icon` select field options
 // (docker/payload/src/blocks/StepRowBlock.ts) exactly.
 export const STEP_ICONS: Record<string, () => React.ReactNode> = {
@@ -249,9 +251,9 @@ export const STEP_ICONS: Record<string, () => React.ReactNode> = {
   pen: IconPen,
   sparkle: IconSparkle,
   compact: IconCompact,
-  seal: IconSeal,
+  seal: IconVase,
   droplets: IconDroplets,
-  hourglass: IconHourglass,
+  hourglass: IconStar,
 };
 
 // Same symbolic clock icon /lebensuhr uses above its "24 Stunden" heading