3x3-system: card layout for categories, matrix image, CTA card; lebensuhr fixes

/3x3-system:
- Categories now a 3-card grid (icon + colored top border) instead of
  a plain bulleted list.
- Embeds the original blog post's Arbeit/Familie/Persönlich matrix
  graphic, framed like the challenge page's image, with a caption
  clarifying it's one example application (the surrounding text only
  ever describes 3 categories, not a 3x3 grid).
- Closing CTA is now the same bordered-card link /lebensuhr uses.
- Tightened remaining prose.

/lebensuhr:
- Fixed missing side padding below 640px (the table card's
  full-bleed negative-margin trick ate the page's own padding).
- Added a small decorative clock-face SVG above the table (8 ages
  plotted at their proportional position) — company piece for the
  table, which stays the actual data source.

app/lebensuhr/page.tsx

@@ -185,13 +185,66 @@ export default function LebensuhrPage() {
             Stell dir vor, dein ganzes Leben wäre auf einen einzigen Tag mit 24 Stunden komprimiert.
             Wirst du 90 Jahre alt, sieht das ungefähr so aus:
           </P>
+
+          {/* Decorative companion to the table below, not a replacement for
+              it (a version that tried to carry the actual Alter/Uhrzeit
+              pairs on its own read ambiguous — see the table's own
+              comment) — just the 8 ages plotted at their proportional
+              clock position, so the "24 Stunden" framing above has an
+              actual clock to look at. Coordinates are hand-computed
+              (evenly spaced every 40°, since age/90 and time/24 are the
+              same proportion), not derived from lebensuhrRows — if the
+              rows above ever change, these need updating too. */}
+          <div className="flex justify-center py-2">
+            <svg viewBox="0 0 250 250" className="w-full max-w-[16rem] h-auto" aria-hidden="true">
+              <circle cx="125" cy="125" r="100" stroke="var(--color-border)" strokeWidth="1.5" fill="none" />
+              {[0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330].map((deg) => {
+                const rad = (deg * Math.PI) / 180;
+                const x1 = 125 + 92 * Math.cos(rad), y1 = 125 + 92 * Math.sin(rad);
+                const x2 = 125 + 100 * Math.cos(rad), y2 = 125 + 100 * Math.sin(rad);
+                return <line key={deg} x1={x1} y1={y1} x2={x2} y2={y2} stroke="var(--color-border)" strokeWidth="1.5" />;
+              })}
+              {([
+                [10, 175.1, 65.2, 200.8, 34.6, "start"],
+                [20, 201.8, 111.5, 241.2, 104.5, "start"],
+                [30, 192.5, 164.0, 227.2, 184.0, "start"],
+                [40, 151.7, 198.3, 165.4, 235.9, "start"],
+                [50, 98.3, 198.3, 84.6, 235.9, "end"],
+                [60, 57.5, 164.0, 22.8, 184.0, "end"],
+                [70, 48.2, 111.5, 8.8, 104.5, "end"],
+                [80, 74.9, 65.2, 49.2, 34.6, "end"],
+              ] as [number, number, number, number, number, "start" | "end"][]).map(([age, dx, dy, lx, ly, anchor]) => (
+                <g key={age}>
+                  <line x1={dx} y1={dy} x2={lx} y2={ly} stroke="var(--color-border)" strokeWidth="1" />
+                  <circle cx={dx} cy={dy} r="4" fill="var(--color-brand)" />
+                  <text
+                    x={lx}
+                    y={ly}
+                    textAnchor={anchor}
+                    dominantBaseline="middle"
+                    className="fill-text-muted"
+                    style={{ fontSize: 12, fontWeight: 600 }}
+                  >
+                    {age}
+                  </text>
+                </g>
+              ))}
+              <text x="125" y="118" textAnchor="middle" className="fill-text-primary" style={{ fontFamily: "var(--font-caveat)", fontSize: 24 }}>
+                dein
+              </text>
+              <text x="125" y="142" textAnchor="middle" className="fill-text-primary" style={{ fontFamily: "var(--font-caveat)", fontSize: 24 }}>
+                Leben
+              </text>
+            </svg>
+          </div>
+
           {/* Still a real table (explicit "Alter"/"Uhrzeit" headers — a
               dot-on-a-line version tried here first read ambiguous
               without them, and forced a horizontal scroll on mobile for
               no gain). Dressed up with the same bg-bg-muted rounded card
               the AGB sidebar and blog author box use, brand-colored
               header, and zebra rows instead of a bare bordered table. */}
-          <div className="bg-bg-muted rounded-xl overflow-hidden -mx-[var(--layout-padding-x)] sm:mx-0">
+          <div className="bg-bg-muted rounded-xl overflow-hidden">
             <table className="w-full text-left border-collapse">
               <thead>
                 <tr className="border-b-2 border-brand">