Migrate /der-eine onto the PDP block system

der-eine was the reference the whole PDP block-builder was designed to
match (gallery sizing, black stepRow-facts icons, dynamic CTA label —
see ProductBlocks.tsx). Migrated it onto its own system: hero body,
usps (the 3 hero features), a "Was kann er?" fact-card section (its own
4 icons — pen/sparkle/compact, new; sunHigh, reused — carried over into
the shared StepIcons set), pricing panel, automatic crossSell.
Testimonials.tsx dropped, not migrated (testimonialsRef removed from
the PDP builder earlier this session). Old Hero/Focus/Testimonials/
Pricing/PasstDazu components left as dead code, same as
/tasse-die-pause's own migration.

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

app/components/icons/StepIcons.tsx

@@ -130,6 +130,44 @@ function IconCup() {
   );
 }
 
+function IconPen() {
+  // Pen/nib — same glyph as der-eine's own hand-coded Focus.tsx IconMetal
+  // (32x32 coords carried over unchanged), now available through the
+  // 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">
+      <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>
+  );
+}
+
+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">
+      <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"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+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">
+      <path d="M11 8H8v3M21 8h3v3M11 24H8v-3M21 24h3v-3" stroke="#f6a701" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
 function IconPause() {
   // Two rounded bars — "sit still for a moment" steps.
   return (
@@ -155,6 +193,9 @@ export const STEP_ICONS: Record<string, () => React.ReactNode> = {
   shield: IconShield,
   cup: IconCup,
   pause: IconPause,
+  pen: IconPen,
+  sparkle: IconSparkle,
+  compact: IconCompact,
 };
 
 // Same symbolic clock icon /lebensuhr uses above its "24 Stunden" heading