From 0de2e1c1beba11872304c3fccdf43dfcf3b0cbba Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Wed, 26 Aug 2026 15:45:53 +0000
Subject: [PATCH] 3x3-system: match /lebensuhr's structural style more closely
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Category cards now break out into a full-width bg-bg-muted band
(same structural role as /lebensuhr's phase-row section), and the
page gets its own small decorative identity graphic — a literal 3x3
dot grid, paralleling that page's clock face.
---
 app/3x3-system/page.tsx | 47 +++++++++++++++++++++++++++++++++--------
 1 file changed, 38 insertions(+), 9 deletions(-)

diff --git a/app/3x3-system/page.tsx b/app/3x3-system/page.tsx
index e8c533b..c99baa4 100644
--- a/app/3x3-system/page.tsx
+++ b/app/3x3-system/page.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import Link from "next/link";
 import Image from "next/image";
-import { Reveal } from "../components/Reveal";
+import { Reveal, RevealGroup, RevealItem } from "../components/Reveal";
 import { Footer } from "../components/Footer";
 
 const title = "Das 3×3-System: Zu wenig geschafft oder zu viel gewollt?";
@@ -84,6 +84,20 @@ function IconShield({ color }: { color: string }) {
   );
 }
 
+// Small decorative mark — same role the clock face plays on
+// /lebensuhr/page.tsx (a page-identity graphic, not carrying any
+// information of its own). A literal 3×3 dot grid.
+function IconGrid3x3() {
+  const positions = [0, 1, 2].flatMap((row) => [0, 1, 2].map((col) => [row, col] as const));
+  return (
+    <svg width="44" height="44" viewBox="0 0 44 44" aria-hidden="true">
+      {positions.map(([row, col]) => (
+        <circle key={`${row}-${col}`} cx={7 + col * 15} cy={7 + row * 15} r="4" fill="var(--color-brand)" />
+      ))}
+    </svg>
+  );
+}
+
 const categories: { color: string; icon: (color: string) => React.ReactNode; label: string; desc: string }[] = [
   { color: "#ef4444", icon: (c) => <IconTarget color={c} />, label: "Verantwortung", desc: "Etwas, das erledigt werden muss und für das du Verantwortung trägst." },
   { color: "#f59e0b", icon: (c) => <IconTrendingUp color={c} />, label: "Fortschritt", desc: "Etwas, das dich beruflich oder persönlich ein Stück weiterbringt." },
@@ -161,15 +175,30 @@ export default function DreiXDreiSystemPage() {
             aber die drei, die zählen sollen, wenn der Tag wieder voller wird als geplant. Damit daraus
             nicht einfach drei weitere beliebige Aufgaben werden, verteile ich sie auf drei Bereiche:
           </P>
-          <div className="grid sm:grid-cols-3 gap-4">
-            {categories.map((c) => (
-              <div key={c.label} className="bg-bg-muted rounded-lg p-5 flex flex-col gap-2 border-t-4" style={{ borderTopColor: c.color }}>
-                {c.icon(c.color)}
-                <p className="font-semibold text-text-primary">{c.label}</p>
-                <p className="text-body-sm text-text-muted">{c.desc}</p>
-              </div>
-            ))}
+        </Reveal>
+
+        {/* Full-width band, same structural role as /lebensuhr's phase-row
+            section (bg-bg-muted, breaks out of the 48rem column) — plus
+            the IconGrid3x3 mark as this page's own identity graphic,
+            paralleling that page's clock face. */}
+        <section className="bg-bg-muted w-full py-10 lg:py-14">
+          <div className="px-8 lg:px-[5rem] max-w-[1280px] mx-auto flex flex-col items-center gap-8">
+            <IconGrid3x3 />
+            <RevealGroup className="grid sm:grid-cols-3 gap-4 w-full max-w-[48rem]">
+              {categories.map((c) => (
+                <RevealItem key={c.label}>
+                  <div className="bg-bg-base rounded-lg p-5 flex flex-col gap-2 border-t-4 h-full" style={{ borderTopColor: c.color }}>
+                    {c.icon(c.color)}
+                    <p className="font-semibold text-text-primary">{c.label}</p>
+                    <p className="text-body-sm text-text-muted">{c.desc}</p>
+                  </div>
+                </RevealItem>
+              ))}
+            </RevealGroup>
           </div>
+        </section>
+
+        <Reveal delay={0.1} className="w-full max-w-[48rem] mx-auto px-[var(--layout-padding-x)] pt-10 pb-14 flex flex-col gap-5">
           <P>Mehr kommt nicht auf diese Liste.</P>
 
           {/* Same rounded-xl framed-image treatment /7-tage-klarheits-check's