From cf5d7f8739700373ce96dc69dab866041ad0e8f7 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Wed, 26 Aug 2026 16:24:13 +0000
Subject: [PATCH] 3x3-system: pull the category row back into the article
 column
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The full-width bg-bg-muted band made the three categories read as
a disconnected banner, separate from the paragraph right above it
introducing them. Now inline in the same 48rem column as the rest
of the article — still icon-above-text with StepArrow connectors,
just not broken out into its own section anymore.
---
 app/3x3-system/page.tsx | 53 +++++++++++++++++++----------------------
 1 file changed, 25 insertions(+), 28 deletions(-)

diff --git a/app/3x3-system/page.tsx b/app/3x3-system/page.tsx
index b6ebea9..ce8ca6b 100644
--- a/app/3x3-system/page.tsx
+++ b/app/3x3-system/page.tsx
@@ -159,36 +159,33 @@ export default function DreiXDreiSystemPage() {
             Kein großes System – eher der Versuch, dem Tag eine klare Richtung zu geben. Statt zehn
             Prioritäten gleichzeitig treffe ich drei bewusste Entscheidungen, verteilt auf drei Bereiche:
           </P>
-        </Reveal>
 
-        {/* Full-width band, same structural role AND same icon-above-text/
-            StepArrow row treatment as /7-tage-klarheits-check's "So
-            funktioniert" section and /lebensuhr's phase row — a plain
-            3-card grid here read out of place next to those. */}
-        <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-10">
-            <RevealGroup className="flex flex-col lg:flex-row items-center lg:items-start gap-8 lg:gap-2 w-full">
-              {categories.flatMap((c, i) => [
-                <RevealItem key={c.label} className="group flex flex-col items-center gap-4 lg:gap-5 flex-1 min-w-0">
-                  <div className="flex items-center justify-center w-16 h-14 shrink-0 transition-transform duration-300 group-hover:scale-110">
-                    {c.icon}
-                  </div>
-                  <div className="flex flex-col gap-1 text-center">
-                    <p className="font-semibold text-text-primary text-[1rem]">{c.label}</p>
-                    <p className="text-[0.875rem] text-text-muted leading-[1.5]">{c.desc}</p>
-                  </div>
-                </RevealItem>,
-                i < categories.length - 1 ? (
-                  <div key={`arrow-${i}`} className="flex items-center justify-center shrink-0 lg:mt-5">
-                    <StepArrow className="w-8 h-8 rotate-90 lg:w-10 lg:h-4 lg:rotate-0" />
-                  </div>
-                ) : null,
-              ])}
-            </RevealGroup>
-          </div>
-        </section>
+          {/* Same icon-above-text/StepArrow row treatment as
+              /7-tage-klarheits-check's "So funktioniert" section and
+              /lebensuhr's phase row — but inline in the article column
+              now, not broken out into its own full-width bg-bg-muted
+              band. That band made it read as a separate banner,
+              disconnected from the paragraph right above it explaining
+              what these three things are. */}
+          <RevealGroup className="flex flex-col sm:flex-row items-center sm:items-start gap-6 sm:gap-2 w-full py-2">
+            {categories.flatMap((c, i) => [
+              <RevealItem key={c.label} className="group flex flex-col items-center gap-3 flex-1 min-w-0">
+                <div className="flex items-center justify-center w-14 h-12 shrink-0 transition-transform duration-300 group-hover:scale-110">
+                  {c.icon}
+                </div>
+                <div className="flex flex-col gap-1 text-center">
+                  <p className="font-semibold text-text-primary text-[1rem]">{c.label}</p>
+                  <p className="text-[0.875rem] text-text-muted leading-[1.5]">{c.desc}</p>
+                </div>
+              </RevealItem>,
+              i < categories.length - 1 ? (
+                <div key={`arrow-${i}`} className="flex items-center justify-center shrink-0 sm:mt-4">
+                  <StepArrow className="w-8 h-8 rotate-90 sm:w-10 sm:h-4 sm:rotate-0" />
+                </div>
+              ) : null,
+            ])}
+          </RevealGroup>
 
-        <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