From fff2467d19027ffe9afc65c34501c7246924cc12 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Wed, 26 Aug 2026 15:26:36 +0000
Subject: [PATCH] Lebensuhr: replace plain data table with a clock-scale
 timeline

A horizontal dotted line with each age/time pair on it reads as an
actual clock scale instead of a bare two-column table needing a
caption to explain itself. Same bg-bg-muted rounded-card treatment
already used by the AGB sidebar and the blog author box.
---
 app/lebensuhr/page.tsx | 32 +++++++++++++++++---------------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/app/lebensuhr/page.tsx b/app/lebensuhr/page.tsx
index eed4b98..b2e255e 100644
--- a/app/lebensuhr/page.tsx
+++ b/app/lebensuhr/page.tsx
@@ -185,23 +185,25 @@ 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>
-          <div className="overflow-x-auto">
-            <table className="w-full text-left border-collapse">
-              <thead>
-                <tr className="border-b border-border">
-                  <th className="py-2 pr-4 font-semibold text-body-sm text-text-muted uppercase tracking-wide">Alter</th>
-                  <th className="py-2 font-semibold text-body-sm text-text-muted uppercase tracking-wide">Uhrzeit</th>
-                </tr>
-              </thead>
-              <tbody>
+          {/* A timeline, not a data table — same "bg-bg-muted rounded card"
+              treatment the AGB sidebar and the blog author box use, but
+              shaped like an actual clock scale (dots on a line) since
+              that reads instantly, where a bare two-column table needed
+              a caption to explain itself. */}
+          <div className="bg-bg-muted rounded-xl px-6 py-10 sm:px-10 -mx-[var(--layout-padding-x)] sm:mx-0">
+            <div className="overflow-x-auto">
+              <div className="relative flex items-center min-w-[36rem] sm:min-w-0 px-2">
+                <div className="absolute left-0 right-0 h-px bg-border" aria-hidden />
                 {lebensuhrRows.map(([alter, uhrzeit]) => (
-                  <tr key={alter} className="border-b border-border/60">
-                    <td className="py-2 pr-4 text-body text-text-body">{alter}</td>
-                    <td className="py-2 text-body text-text-body">{uhrzeit}</td>
-                  </tr>
+                  <div key={alter} className="relative flex-1 flex flex-col items-center gap-2">
+                    <p className="text-body-sm font-semibold text-text-primary whitespace-nowrap">{uhrzeit}</p>
+                    <span className="size-3 rounded-full bg-brand ring-4 ring-bg-muted" />
+                    <p className="text-body-sm text-text-muted">{alter}</p>
+                  </div>
                 ))}
-              </tbody>
-            </table>
+              </div>
+            </div>
+            <p className="text-center text-body-sm text-text-muted mt-6">Alter in Jahren, bei 90 gelebten Jahren</p>
           </div>
           <P>Und? Wie spät ist es gerade bei dir?</P>