From 0fedb386b43352b3f848154a6dc67bc0b3f2a4fd Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Wed, 26 Aug 2026 16:17:58 +0000
Subject: [PATCH] Remove the lebensuhr clock-face SVG
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Went through several rounds (dot timeline, 24h dial, 12h dial,
decluttering) without landing right, and there's no way for me to
visually verify an SVG in this environment — kept guessing wrong.
Cutting it rather than continuing to iterate blind. The table stays
as the clear, working data source.
---
 app/lebensuhr/page.tsx | 70 ------------------------------------------
 1 file changed, 70 deletions(-)

diff --git a/app/lebensuhr/page.tsx b/app/lebensuhr/page.tsx
index 4a75094..7e5bd12 100644
--- a/app/lebensuhr/page.tsx
+++ b/app/lebensuhr/page.tsx
@@ -195,76 +195,6 @@ export default function LebensuhrPage() {
             Wirst du 90 Jahre alt, sieht das ungefähr so aus:
           </P>
 
-          {/* Decorative companion to the table below, not a replacement for
-              it — a real 12-hour dial (1–12, like an actual clock face)
-              with the 8 ages plotted at their 12-hour position. Only the
-              age is labeled here (a version that also spelled out
-              time + vorm./nachm. on every point — 3 lines × 8 points —
-              read as clutter); the exact time for each age is one glance
-              down, in the table. Coordinates are hand-computed from
-              lebensuhrRows's own age→time pairs (hour mod 12, -90° so 12
-              sits at the top) — if those rows ever change, these need
-              updating too. */}
-          <div className="flex justify-center py-2">
-            <svg viewBox="-10 -10 440 440" className="w-full max-w-[22rem] h-auto" aria-hidden="true">
-              <circle cx="210" cy="210" r="150" stroke="var(--color-border)" strokeWidth="1.5" fill="none" />
-              {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map((h) => {
-                const deg = (h / 12) * 360 - 90;
-                const rad = (deg * Math.PI) / 180;
-                const major = h % 3 === 0;
-                const rIn = major ? 140 : 145;
-                const x1 = 210 + rIn * Math.cos(rad), y1 = 210 + rIn * Math.sin(rad);
-                const x2 = 210 + 150 * Math.cos(rad), y2 = 210 + 150 * Math.sin(rad);
-                return <line key={h} x1={x1} y1={y1} x2={x2} y2={y2} stroke="var(--color-border)" strokeWidth={major ? 2 : 1.5} />;
-              })}
-              {/* The dial's own numerals, 1–12, same as a real clock face. */}
-              {([
-                [1, 292.5, 67.1, "start"],
-                [2, 352.9, 127.5, "start"],
-                [3, 375, 210, "start"],
-                [4, 352.9, 292.5, "start"],
-                [5, 292.5, 352.9, "start"],
-                [6, 210, 375, "middle"],
-                [7, 127.5, 352.9, "end"],
-                [8, 67.1, 292.5, "end"],
-                [9, 45, 210, "end"],
-                [10, 67.1, 127.5, "end"],
-                [11, 127.5, 67.1, "end"],
-                [12, 210, 45, "middle"],
-              ] as [number, number, number, "start" | "middle" | "end"][]).map(([h, x, y, anchor]) => (
-                <text key={h} x={x} y={y} textAnchor={anchor} dominantBaseline="middle" className="fill-text-muted" style={{ fontSize: 12, fontWeight: 600 }}>
-                  {h}
-                </text>
-              ))}
-              {/* One dot per lebensuhrRows entry, at its 12h-dial position
-                  (hour mod 12), labeled with just the age. */}
-              {([
-                [10, 308.5, 192.6, 332.1, 188.5, "start"],
-                [20, 244.2, 304.0, 252.4, 326.5, "start"],
-                [30, 123.4, 260.0, 102.6, 272.0, "end"],
-                [40, 145.7, 133.4, 130.3, 115.0, "end"],
-                [50, 274.3, 133.4, 289.7, 115.0, "start"],
-                [60, 296.6, 260.0, 317.4, 272.0, "start"],
-                [70, 175.8, 304.0, 167.6, 326.5, "end"],
-                [80, 111.5, 192.6, 87.9, 188.5, "end"],
-              ] as [number, number, number, number, number, "start" | "end"][]).map(([age, dx, dy, lx, ly, anchor]) => (
-                <g key={age}>
-                  <circle cx={dx} cy={dy} r="5" fill="var(--color-brand)" />
-                  <text x={lx} y={ly} textAnchor={anchor} dominantBaseline="middle" className="fill-text-primary" style={{ fontSize: 15, fontWeight: 700 }}>
-                    {age}
-                  </text>
-                </g>
-              ))}
-              <text x="210" y="196" textAnchor="middle" className="fill-text-primary" style={{ fontFamily: "var(--font-caveat)", fontSize: 30 }}>
-                dein
-              </text>
-              <text x="210" y="228" textAnchor="middle" className="fill-text-primary" style={{ fontFamily: "var(--font-caveat)", fontSize: 30 }}>
-                Leben
-              </text>
-            </svg>
-          </div>
-          <p className="text-center text-body-sm text-text-muted -mt-1">Dein Alter auf dem Zifferblatt. Die genaue Uhrzeit dazu steht unten.</p>
-
           {/* 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