Fix icon sizing regression; recolor filled dots; add seal/droplets/hourglass

- pen/sparkle/compact icons were carried over from der-eine's original
  32x32-viewBox SVGs but rendered at their native 32px instead of the
  64px der-eine's own IconBadge wrapper actually used — half the
  intended size on /der-eine's fact cards (reported 2026-08-30).
- The PDP black-icon override only recolored `stroke`; target's/
  ProductSpotlight-unrelated icons using a hardcoded `fill="#f6a701"`
  center dot (e.g. IconTarget) kept a stray yellow dot inside an
  otherwise-black icon on /einfach-anfangen. Added a second override
  targeting exactly that hardcoded fill value.
- 3 new icons (seal/droplets/hourglass) for Tasse "Die Pause."'s fact
  cards — cup/shield/checkCircle/pause didn't fit "Vintage-Porzellan"/
  "Spülmaschinenfest"/"Für den einen Moment" at all.
- ProductSpotlight (homepage) now uses the shared ProductBadge too —
  missed in the earlier badge-consolidation pass.

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

app/components/icons/StepIcons.tsx

@@ -136,7 +136,7 @@ function IconPen() {
   // shared set for other PDPs — der-eine's PDP is the block-builder's
   // reference template, its own icons belong in the shared library too.
   return (
-    <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
+    <svg width="64" height="64" viewBox="0 0 32 32" fill="none">
       <path d="M10 22l2.5-0.8L23 10.7l-2.7-2.7L9.8 19.5 9 22z" stroke="#f6a701" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
       <path d="M19 9l3 3" stroke="#f6a701" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
     </svg>
@@ -146,7 +146,7 @@ function IconPen() {
 function IconSparkle() {
   // Engraving/laser mark — same glyph as der-eine's own IconSparkle.
   return (
-    <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
+    <svg width="64" height="64" viewBox="0 0 32 32" fill="none">
       <path
         d="M16 7v5M16 20v5M7 16h5M20 16h5M10.5 10.5l3 3M18.5 18.5l3 3M21.5 10.5l-3 3M13.5 18.5l-3 3"
         stroke="#f6a701"
@@ -162,7 +162,7 @@ function IconCompact() {
   // Four corner brackets pointing inward — same glyph as der-eine's own
   // IconCompact ("fits anywhere").
   return (
-    <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
+    <svg width="64" height="64" viewBox="0 0 32 32" fill="none">
       <path d="M11 8H8v3M21 8h3v3M11 24H8v-3M21 24h3v-3" stroke="#f6a701" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
     </svg>
   );
@@ -178,6 +178,59 @@ 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.
+  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"
+        stroke="#f6a701"
+        strokeWidth="1.6"
+        strokeLinejoin="round"
+      />
+      <circle cx="20" cy="20" r="7" stroke="#f6a701" strokeWidth="1.6" />
+    </svg>
+  );
+}
+
+function IconDroplets() {
+  // Two water drops — dishwasher-safe facts.
+  return (
+    <svg width="36" height="40" viewBox="0 0 36 40" fill="none">
+      <path
+        d="M13 4c4 5.5 6 9.2 6 12.5a6 6 0 1 1-12 0C7 13.2 9 9.5 13 4z"
+        stroke="#f6a701"
+        strokeWidth="1.6"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M25 17c3 4 4.3 6.6 4.3 8.9a4.3 4.3 0 1 1-8.6 0c0-2.3 1.3-4.9 4.3-8.9z"
+        stroke="#f6a701"
+        strokeWidth="1.6"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+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> = {
@@ -196,6 +249,9 @@ export const STEP_ICONS: Record<string, () => React.ReactNode> = {
   pen: IconPen,
   sparkle: IconSparkle,
   compact: IconCompact,
+  seal: IconSeal,
+  droplets: IconDroplets,
+  hourglass: IconHourglass,
 };
 
 // Same symbolic clock icon /lebensuhr uses above its "24 Stunden" heading