Focus.tsx ("Was kann er?"): icons in HowItWorks row style

Same card shape as todo-cards/components/HowItWorks.tsx (icon on top,
centered, RevealGroup/RevealItem, identical typography) instead of the
inline-checkmark bullets tried first. Icons drawn from the der-eine.png
mockup's own icon row (pencil/sparkle/shield/pen line icons — no matching
/public asset existed for these concepts).

app/der-eine/components/Focus.tsx

@@ -1,41 +1,81 @@
-import { Reveal } from "../../components/Reveal";
+import { Reveal, RevealGroup, RevealItem } from "../../components/Reveal";
+
+// Line icons matching the der-eine.png mockup's icon row — no matching
+// /public asset existed for these concepts (checked: pencil/pen/sparkle/
+// shield), so drawn fresh rather than upscaling a raster crop from the
+// mockup, same reasoning as this page's own IconCheck below.
+function IconPencil() {
+  return (
+    <svg width="40" height="40" viewBox="0 0 28 28" fill="none" strokeWidth="1.5" stroke="#1a1a1a" strokeLinecap="round" strokeLinejoin="round" className="h-10 w-auto">
+      <path d="M18.5 4.5l5 5L9 24H4v-5L18.5 4.5z" />
+      <path d="M15.5 7.5l5 5" />
+    </svg>
+  );
+}
+
+function IconPen() {
+  return (
+    <svg width="40" height="40" viewBox="0 0 28 28" fill="none" strokeWidth="1.5" stroke="#1a1a1a" strokeLinecap="round" strokeLinejoin="round" className="h-10 w-auto">
+      <path d="M6 22l3-1 13-13-2-2L7 19l-1 3z" />
+      <path d="M17 8l3 3" />
+    </svg>
+  );
+}
+
+function IconSparkle() {
+  return (
+    <svg width="40" height="40" viewBox="0 0 28 28" fill="none" strokeWidth="1.5" stroke="#1a1a1a" strokeLinecap="round" strokeLinejoin="round" className="h-10 w-auto">
+      <path d="M14 3v8M14 17v8M3 14h8M17 14h8M6.5 6.5l5.5 5.5M16 16l5.5 5.5M21.5 6.5L16 12M12 16l-5.5 5.5" />
+    </svg>
+  );
+}
+
+function IconShield() {
+  return (
+    <svg width="40" height="40" viewBox="0 0 28 28" fill="none" strokeWidth="1.5" stroke="#1a1a1a" strokeLinecap="round" strokeLinejoin="round" className="h-10 w-auto">
+      <path d="M14 3l9 3.5v6c0 6-4 10-9 12.5-5-2.5-9-6.5-9-12.5v-6L14 3z" />
+    </svg>
+  );
+}
 
 // "Was kann er?" section's full four-item breakdown (build, engraving,
-// size, use case), each with its own one-line explanation rather than a
-// bare phrase.
+// size, use case). Same card shape as todo-cards/components/HowItWorks.tsx
+// — icon on top, centered, RevealGroup/RevealItem stagger, identical
+// title/description typography — reused for visual consistency with the
+// rest of the site rather than a one-off layout. 4 cards instead of
+// HowItWorks' 3 numbered steps, no connecting arrows (independent facts,
+// not a sequence).
 const items = [
-  { title: "Metallgehäuse", desc: "Robust, wertig und angenehm in der Hand." },
-  { title: "Lasergravur", desc: "„Der Eine.“ auf der einen Seite. „einfach produktiv.“ auf der anderen." },
-  { title: "Kompakt", desc: "Passt ans Notizbuch, auf den Schreibtisch oder in die Tasche." },
-  { title: "Für jeden Tag", desc: "Für Notizen, Gedanken, Listen und alles, was du lieber aufschreibst, bevor du es wieder vergisst." },
+  { icon: IconPencil, title: "Metallgehäuse", desc: "Robust, wertig und angenehm in der Hand." },
+  { icon: IconSparkle, title: "Lasergravur", desc: "„Der Eine.“ auf der einen Seite. „einfach produktiv.“ auf der anderen." },
+  { icon: IconShield, title: "Kompakt", desc: "Passt ans Notizbuch, auf den Schreibtisch oder in die Tasche." },
+  { icon: IconPen, title: "Für jeden Tag", desc: "Für Notizen, Gedanken, Listen und alles, was du lieber aufschreibst, bevor du es wieder vergisst." },
 ];
 
-// No product photo here (removed 2026-08-25 — feedback: another product
-// shot in this section was redundant with Hero's own gallery). Plain
-// full-width text block instead of the earlier photo+text two-column
-// layout.
 export function Focus() {
   return (
     <section className="w-full bg-bg-base py-12 md:py-16 px-[var(--layout-padding-x)]">
-      <Reveal className="flex flex-col gap-6 items-start max-w-[48rem] mx-auto">
+      <Reveal className="flex flex-col gap-2 items-center text-center mb-10">
         <p
           className="font-semibold text-h-emphasis text-text-primary"
           style={{ fontFamily: "var(--font-lora)" }}
         >
           Was kann er?
         </p>
-        <p className="text-body text-text-body">
+        <p className="text-body text-text-muted max-w-[36rem]">
           Schreiben. Und das ziemlich gut. Metallgehäuse, angenehmes Gewicht und eine klassische Kugelschreibermine — kein besonderes Produktivitäts-Gadget, sondern einfach ein guter Stift, den du gern zur Hand nimmst.
         </p>
-        <ul className="grid grid-cols-1 sm:grid-cols-2 gap-4 w-full">
-          {items.map((item) => (
-            <li key={item.title} className="flex flex-col gap-1 items-start">
-              <span className="font-semibold text-body text-text-primary">{item.title}</span>
-              <span className="text-body-sm text-text-muted">{item.desc}</span>
-            </li>
-          ))}
-        </ul>
       </Reveal>
+
+      <RevealGroup className="flex flex-col sm:flex-row gap-8 items-start sm:items-start w-full lg:px-[16.25rem]">
+        {items.map(({ icon: Icon, title, desc }) => (
+          <RevealItem key={title} className="group flex flex-col gap-4 items-center text-center flex-1 max-w-xs sm:max-w-none mx-auto">
+            <Icon />
+            <p className="font-semibold text-body text-text-primary">{title}</p>
+            <p className="text-body-sm text-text-primary text-center">{desc}</p>
+          </RevealItem>
+        ))}
+      </RevealGroup>
     </section>
   );
 }