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/ProductBlocks.tsx

@@ -155,7 +155,11 @@ function renderProductBlock(block: ProductBlock, ctx: ProductBlockContext): Reac
             const Icon = STEP_ICONS[item.icon];
             return (
               <div key={item.id} className="flex flex-col gap-4 items-center text-center flex-1 max-w-xs sm:max-w-none mx-auto">
-                {Icon && <span className="flex items-center justify-center h-16 [&_svg_*]:!stroke-[#231f20]">{Icon()}</span>}
+                {Icon && (
+                  <span className="flex items-center justify-center h-16 [&_svg_*]:!stroke-[#231f20] [&_[fill='#f6a701']]:!fill-[#231f20]">
+                    {Icon()}
+                  </span>
+                )}
                 <p className="font-semibold text-body text-text-primary">{item.title}</p>
                 <p className="text-body-sm text-text-primary w-full text-left md:text-center">{item.description}</p>
               </div>

app/components/ProductSpotlight.tsx

@@ -4,6 +4,7 @@ import Link from "next/link";
 import { AddToCartButton } from "./AddToCartButton";
 import { Reveal } from "./Reveal";
 import { WishlistButton } from "./WishlistButton";
+import { ProductBadge } from "./ProductBadge";
 import { getSpotlightProduct, getShippingSettings, getDefaultTaxRatePercent, getKleinunternehmer, getWishlistEnabled } from "../lib/payload";
 import { formatPrice, discountPercent } from "../lib/format";
 import { effectiveTaxRate } from "../lib/cartTotals";
@@ -110,17 +111,9 @@ export async function ProductSpotlight() {
             sizes="(min-width: 1024px) 380px, (min-width: 640px) 512px, 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 className="absolute top-3 left-3">
+            <ProductBadge product={product} />
+          </div>
           {wishlistEnabled && product.spotlightShowWishlist && (
             <WishlistButton productId={product.numericId} className="absolute top-3 right-3" revealOnHover />
           )}

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