From 9af970587d7100ca96ced2fdc1ba77aee9207f86 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Wed, 26 Aug 2026 15:29:50 +0000
Subject: [PATCH] Lebensuhr: revert dot-timeline back to a real, styled table

The dot-on-a-line version dropped the explicit "Alter"/"Uhrzeit"
column labels, making it ambiguous which value was which, and
forced a horizontal scroll on mobile for no real gain. Back to an
actual <table> with headers, just dressed up: brand-underlined
header row, zebra striping, bg-bg-muted card frame.
---
 app/lebensuhr/page.tsx | 40 ++++++++++++++++++++++------------------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/app/lebensuhr/page.tsx b/app/lebensuhr/page.tsx
index b2e255e..38c6e9c 100644
--- a/app/lebensuhr/page.tsx
+++ b/app/lebensuhr/page.tsx
@@ -185,25 +185,29 @@ 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>
-          {/* 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]) => (
-                  <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>
+          {/* 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">
+            <table className="w-full text-left border-collapse">
+              <thead>
+                <tr className="border-b-2 border-brand">
+                  <th className="py-3 pl-6 pr-4 font-semibold text-body-sm text-text-primary uppercase tracking-wide">Alter</th>
+                  <th className="py-3 pr-6 font-semibold text-body-sm text-text-primary uppercase tracking-wide">Uhrzeit</th>
+                </tr>
+              </thead>
+              <tbody>
+                {lebensuhrRows.map(([alter, uhrzeit], i) => (
+                  <tr key={alter} className={i % 2 === 1 ? "bg-bg-base/60" : undefined}>
+                    <td className="py-2.5 pl-6 pr-4 text-body text-text-body">{alter}</td>
+                    <td className="py-2.5 pr-6 font-semibold text-body text-text-primary">{uhrzeit}</td>
+                  </tr>
                 ))}
-              </div>
-            </div>
-            <p className="text-center text-body-sm text-text-muted mt-6">Alter in Jahren, bei 90 gelebten Jahren</p>
+              </tbody>
+            </table>
           </div>
           <P>Und? Wie spät ist es gerade bei dir?</P>