# Globaler Zeitstrahl — Visuelle Konzept-Exploration

Der „Zeitstrahl" unter `/zeitstrahl` ist die globale Familien-Chronik. Diese Exploration beantwortet zuerst die entscheidende Frage — warum sollte jemand den Zeitstrahl benutzen statt einfach durch die sortierte Suchliste zu scrollen? — und zeigt dann drei Layout-Konzepte, die genau das tun, was die Suche nicht kann: drei Ebenen zu einer Erzählung in der Zeit verweben.

Milestone #14 · Zeitstrahl Phone-first · 375px Explorativ — vor Implementierung
Familienarchiv · 2026-06-08 · Leonie Voss, UX Lead · Design-Basis: docs/superpowers/specs/2026-06-07-family-timeline-design.md

## 1 · Warum Zeitstrahl ≠ Suchliste

Die Gefahr: zwei Seiten, die wie dasselbe wirken. Wenn der Zeitstrahl nur „Briefe, chronologisch" zeigt, fragt jeder zu Recht — wozu? Der Unterschied ist nicht die Sortierung. Es sind die drei Ebenen und der historische Kontext, die nur hier zusammenkommen.

/documents · nach Datum sortiertEINE EBENE
Brief über die Lage an der Westfront
Karl → Elfriede Raddatz
Mär 1915
Feldpost aus Verdun
Hans → Karl Raddatz
Jul 1915
Brief an die Eltern
Karl → Elfriede Raddatz
Sep 1915
Päckchen-Dank
Karl → Elfriede Raddatz
Nov 1915
Nur Briefe. Keine Geburten, keine Hochzeiten, kein Krieg. Warum 1915 so viele Feldpostbriefe? Die Liste sagt es nicht — man muss es wissen.
vs
/zeitstrahl · die Familie in der ZeitDREI EBENEN
1914
⚭ Heirat: Karl & Elfriede Raddatz · abgeleitet
Erster Weltkrieg
1914–1918 · historisch
1915
4 Briefe · Feldpost von der Westfront
* Geburt: Hans Raddatz · abgeleitet
1918
Kriegsende
Nov 1918 · historisch
Der Aha-Moment: Plötzlich ergeben die vier Feldpostbriefe von 1915 Sinn — sie liegen zwischen Hochzeit und Kriegsende, neben der Geburt des Sohnes. Die Suche findet Dokumente. Der Zeitstrahl erzählt, was mit der Familie geschah. Das ist kein sortierter Listenfilter — es ist eine Erzählung, die die Suche strukturell nicht leisten kann.
Fünf Dinge, die nur der Zeitstrahl kann — und die jede Konzept-Variante sichtbar machen muss:
① Personen-Lebensereignisse (Geburt *, Tod †, Heirat ⚭) — abgeleitet aus kuratierten Personendaten, gibt es in der Suche gar nicht.
② Kuratierte Ereignisse — persönlich (Umzug, Auswanderung) & historisch (Krieg, Inflation), redaktionell, immer korrekt.
③ Historischer Kontext-Hintergrund — Weltereignisse als Bänder hinter den Briefen erklären, warum Briefe sich häufen.
④ Ehrliche Datums-Präzision — `ca. 1914`, `Sommer 1914`, „Ohne Datum"-Eimer. Nie ein erfundenes Datum.
⑤ Verwobene Erzählung statt Trefferliste — eine durchgehende vertikale Geschichte über 50 Jahre, kein paginiertes Suchergebnis.

## 2 · Die drei Ebenen — visuelle Sprache

Jede Ebene muss auf den ersten Blick unterscheidbar sein. Diese Kodierung gilt in allen drei Konzepten gleich — nur das Layout ändert sich, nicht die Bedeutung der Farben & Glyphen.

⚭
Abgeleitetes Lebensereignis
Geburt * · Tod † · Heirat ⚭ — automatisch aus `Person.birthDate` / `deathDate` / `SPOUSE_OF.fromYear`. Große Navy-Knoten auf der Achse. Glyphen * / † aus `personLifeDates.ts`. Badge „abgeleitet", nicht im Zeitstrahl editierbar.
★
Kuratiertes persönliches Ereignis
`EventType.PERSONAL` — von der Familie geschrieben (Umzug, Krankheit, Auswanderung). Mint-Akzent, Serifen-Titel, optionaler Beschreibungstext. Editierbar über `/zeitstrahl/events/[id]/edit`.
◍
Historisches Ereignis (Welt)
`EventType.HISTORICAL` — Krieg, Inflation. Gedämpftes Slate-Band quer über die Achse als Kontext-Hintergrund. Bewusst zurückhaltend, damit Familie im Vordergrund bleibt.
✉
Brief
Platziert nach `Document.documentDate`. Kleine Mint-Punkte, kompakte Karte (Absender → Empfänger), verlinkt zu `/documents/[id]`. Häufungen clustern unter dem Ereignis, zu dem sie gehören.

DatePrecision | Deutsche Darstellung | Beispiel | Wirkung auf der Achse
--- | --- | --- | ---
DAY | vollständiges Datum | 28. Juli 1914 | sortiert exakt innerhalb des Jahres-Bandes
MONTH | Monat + Jahr | Juli 1914 | sortiert nach Monat innerhalb des Bandes
SEASON | Jahreszeit + Jahr | Sommer 1914 | grobe Reihung im Band
YEAR | nur Jahr | 1914 | ans Ende des Jahres-Bandes
APPROX | „ca." + Jahr | ca. 1914 | mit „ca."-Marker, Jahres-Band
RANGE | Start–Ende | 1914–1918 | im Start-Jahr mit Spannen-Marker, nicht dupliziert
UNKNOWN | undatiert | Ohne Datum | eigener Eimer ganz am Ende

A
Konzept A · Erzählend
Der Lebensfaden — eine durchgehende Achse
Eine einzige vertikale Spine läuft von oben nach unten durch alle Jahre. Lebensereignisse sitzen als große Knoten auf dem Faden, historische Ereignisse legen sich als Bänder dahinter, Briefe zweigen als kleine Punkte ab. Liest sich wie eine Familien-Saga, von 1899 bis 1950 am Stück scrollbar.
DifferenzierungMaximaler Abstand zur Suche — gar keine Listen-Anmutung. Der Faden ist eine Geschichte, kein Suchergebnis.
Trade-off: bei dichten Brief-Jahren kann der Faden lang werden — braucht eine Quiet-Year-Kompression (mehrere ereignislose Jahre als ein dünner Abschnitt).
Zeitstrahl
Die Familie Raddatz · 1899–1950 · 412 Briefe, 38 Ereignisse
*
Geburt: Karl Raddatz
14. März 1901 · abgeleitet
⚭
Heirat: Karl & Elfriede
1914 · abgeleitet
◍ Erster Weltkrieg
1914–1918 · historisch
1915
✉ Brief über die Westfront
Karl → Elfriede · Mär 1915
Krieg › Briefe von der Front
✉ Feldpost aus Verdun
Hans → Karl · Jul 1915 · +2 weitere
Krieg › Briefe von der Front
◍ Hyperinflation
1923 · historisch
★
Auswanderung nach Argentinien
Frühjahr 1924 · persönlich

#### Warum dieses Layout

- Ein Faden, keine Karten-Liste. Schon die Silhouette signalisiert „Geschichte", nicht „Suchtreffer".
- Hierarchie über Knotengröße: Lebensereignisse 16px-Knoten, kuratierte 11px, Briefe 7px-Punkte. Das Auge liest zuerst die Meilensteine.
- Welt-Bänder hinterlegt in gedämpftem Slate — präsent, aber nie konkurrierend mit der Familie.
- Brief-Cluster fassen Häufungen zusammen („+2 weitere") statt 24 Zeilen zu zeigen — genau hier unterscheidet es sich von der Liste.

#### Offene Fragen

- Quiet-Year-Kompression: ereignislose Jahre als dünner „1925–1929"-Abschnitt zusammenfalten?
- Tap auf Cluster → expandiert inline oder springt in die gefilterte Suche?

B
Konzept B · Strukturiert
Jahres-Bänder — drei Spuren pro Jahr
Jedes Jahr ist ein volle-Breite-Abschnitt (wie die bestehende `ChronikTimeline`). Innerhalb des Bandes machen drei Spuren — Personen · Welt · Briefe — das Verweben explizit und scannbar. Auf dem Desktop nebeneinander, auf dem Phone gestapelt. Sehr lesbar, senioren-freundlich.
DifferenzierungDie drei Spuren zeigen die drei Ebenen als Struktur — man sieht sofort, dass hier mehr als Briefe leben.
Trade-off: bändriger, weniger „flüssige Saga" als A. Leere Spuren in ruhigen Jahren brauchen eine elegante Leer-Behandlung.
Zeitstrahl
Die Familie Raddatz · 1899–1950
1914 2 EREIGNISSE · 6 BRIEFE
Personen
⚭Heirat: Karl & Elfriede Raddatz
Welt
◍Erster Weltkrieg beginnt · 28. Juli 1914
Briefe · 6
Kriegsausbruch — Brief an die Familie →
1915 1 EREIGNIS · 24 BRIEFE
Personen
*Geburt: Hans Raddatz
Briefe · 24 Feldpost
✉ Brief über die Lage an der Westfront
Karl → Elfriede · März 1915 · 23 weitere ▾
Krieg › Briefe von der Front
1916 – 1918ruhige Jahre · 9 Briefe ▾

#### Warum dieses Layout

- Drei benannte Spuren machen das Versprechen explizit — „hier sind Personen, Welt und Briefe", nicht nur Dokumente.
- Baut auf vorhandenem Idiom: Jahres-Band = `ChronikTimeline`-Sektion mit Navy-Header. Schnell umsetzbar, vertraut.
- Senioren-stark: klare Boxen, große Jahreszahl, ruhiges Raster — kein überlagertes Spine-Lesen nötig.
- Ruhige Jahre kollabieren zu einer dünnen Zeile — hält das Scrollen kurz.

#### Desktop-Enhancement

- Die drei Spuren werden drei Spalten nebeneinander (Personen | Welt | Briefe) statt gestapelt — das Verweben wird horizontal lesbar.

C
Konzept C · Navigierbar
Spine + Dichte-Schiene — 50 Jahre im Griff
Eine dünne vertikale Dichte-Schiene am linken Rand (dieselbe Balken-Sprache wie der Such-Dichtefilter, nur hochkant) zeigt Brief-Volumen pro Jahr plus Ereignis-Markierungen — und dient zugleich als Mini-Map & Sprung-Navigation. Rechts die verwobene Erzählung. Verbindet Vertrautheit mit dem Dichtefilter und ist doch klar eine andere Oberfläche.
DifferenzierungÜber 50 Jahre at-a-glance navigierbar — etwas, das eine paginierte Suchliste nie bietet. Dichte wird zur Landkarte.
Trade-off: Die Schiene kostet horizontale Breite — auf 320px muss sie sehr schmal (oder ausklappbar) sein. Nähe zum Dichtefilter könnte verwirren, wenn nicht klar getrennt.
DICHTE
1900
1915
1923
1950
Zeitstrahl
Familie Raddatz · 1915 ▾
*
Geburt: Hans Raddatz
Sommer 1915 · abgeleitet
◍ Erster Weltkrieg
1914–1918
✉ Brief über die Westfront
Karl → Elfriede · Mär 1915
✉ Feldpost aus Verdun
Hans → Karl · Jul 1915 · +22 ▾

#### Warum dieses Layout

- Dichte-Schiene als Mini-Map: 50 Jahre Brief-Volumen auf einen Blick, Tap springt zum Jahr. Das kann keine Suchliste.
- Ereignis-Marker (weiß = Lebensereignis, slate = Welt) auf der Schiene zeigen, wo etwas passiert ist — nicht nur wo Briefe sind.
- Vertraute Sprache, klar getrennter Kontext: dieselben Balken wie `/documents`, aber hochkant + als Navigation, nicht als Filter.
- Hier in Dark Mode gezeigt — Mint wird zum Auswahl-/Akzentton, wie im Dichtefilter-Spec.

#### 320px-Verhalten

- Schiene schrumpft auf ~24px (nur Balken + Jahrzehnt-Ticks) oder klappt hinter ein „Karte"-Icon.

## 3 · Desktop-Ansichten — A vs. B im direkten Vergleich

Auf `/zeitstrahl` gibt es Breite, die das Phone nicht hat. Hier entscheidet sich A gegen B: A nutzt die Breite für eine dramatische, alternierende Erzähl-Achse; B nutzt sie, um die drei Ebenen als drei echte Spalten nebeneinander lesbar zu machen.

A
Konzept A · Desktop
Zentrale Achse, alternierende Ereignisse
FamilienarchivDokumentePersonenZeitstrahlStammbaumKR
Zeitstrahl
Die Familie Raddatz · 1899–1950 · 412 Briefe · 38 Ereignisse
1914
⚭ Heirat: Karl & Elfriede Raddatz1914 · abgeleitet aus Beziehung
◍ Erster Weltkrieg 1914–1918 · historisch · 187 Briefe in dieser Zeit
1915
✉ 24 Feldpost — Westfront
Karl ⇄ Elfriede & Hans Raddatz · März–Dez 1915
Krieg › Briefe von der Front
* Geburt: Hans RaddatzSommer 1915 · abgeleitet
★ Umzug nach Berlin
persönlich · Herbst 1915 · „Die Wohnung in der Kastanienallee …"

#### Was die Breite hier gewinnt

- Alternierende Seiten — Briefe links, kuratierte Ereignisse rechts; das Auge zickzackt die Geschichte entlang. Maximal un-listenhaft.
- Lebensereignisse & Jahre als zentrierte Meilenstein-Pillen, deren gefüllter Hintergrund die Achse unterbricht — der Spine läuft nie durch den Text, sondern endet sauber an der Pille.
- Welt-Bänder über die volle Breite — der historische Kontext umschließt buchstäblich die Briefe darunter.

#### Risiken für Senioren / A11y

- Alternierende Lese-Richtung ist anstrengender. Mitigation: nie wichtige Info nur rechtsbündig; auf <1024px kollabiert A in die einseitige Phone-Achse.
- DOM-Reihenfolge bleibt streng chronologisch (eine `<ol>`) — Screenreader liest die Saga linear, egal welche Seite.

B
Konzept B · Desktop
Drei Spalten — Personen · Welt · Briefe
FamilienarchivDokumentePersonenZeitstrahlStammbaumKR
Zeitstrahl
Die Familie Raddatz · 1899–1950
Personen & Familie
Weltgeschehen
Briefe
1914
⚭Heirat: Karl & Elfriede
◍Erster Weltkrieg beginnt
28. Juli 1914
6 Briefe · „Kriegsausbruch — Brief an die Familie" →
1915
*Geburt: Hans Raddatz
— im Krieg —
✉ Brief über die Westfront
Karl → Elfriede · Mär 1915 · 23 weitere ▾
Krieg
1923
—
◍Hyperinflation
ca. 1923
3 Briefe

#### Was die Breite hier gewinnt

- Drei Spalten = drei Ebenen, dauerhaft sichtbar. Das Verweben wird zur lesbaren Tabelle: Auge wandert pro Jahr quer durch Familie → Welt → Briefe.
- Gemeinsame Jahres-Achse links bindet die Spalten — man sieht sofort „1915: Geburt, Krieg läuft, 24 Feldpost".
- Leere Zellen erzählen mit („— im Krieg —") statt zu verschwinden.

#### Risiken / A11y

- Tabellarischer, weniger „Saga". Dafür senioren-stärker: ruhige Spalten, keine alternierende Lese-Richtung.
- <1024px: die drei Spalten stapeln zu den drei Spuren aus dem Phone-Konzept (siehe §B oben) — ein Markup, zwei Layouts via Container-Query.

## 4 · Wiederverwendung: „Lebensweg" in der Personenansicht

Dieselbe `TimelineView`-Komponente mit `personId`-Prop, gefiltert auf eine Person. Sie zieht in die linke 35%-Spalte der Personenseite ein, direkt unter die `PersonCard` (`persons/[id]/+page.svelte:60–67`). Weil diese Spalte schmal ist, ist es exakt das Phone-Layout in Spaltenbreite — kein zweites Design nötig.

Platzierung im echten Layout: Die Personenseite ist `lg:grid-cols-[35%_65%]`. Links: `PersonCard` + `NameHistoryCard` → wird zu `PersonCard` + Lebensweg. Rechts (65%): Korrespondenten, Beziehungen, Dokumente bleiben unverändert. Der Lebensweg filtert auf diese Person: ihre Geburt/Heirat/Tod, Ereignisse an denen sie beteiligt ist, ihre gesendeten/empfangenen Briefe.
FamilienarchivDokumentePersonenZeitstrahlStammbaumKR
‹ Zurück
KR
Karl Raddatz
* 14. März 1901 † 1967
Großvater128 Briefe
Lebensweg nur Karl
*
Geburt
14. März 1901 · Stettin
⚭
Heirat mit Elfriede
1914 · abgeleitet
◍ Erster Weltkrieg
1914–1918
1915 · 24 Feldpost
an Elfriede & Hans · Westfront
†
Tod
1967 · abgeleitet
Gemeinsame Korrespondenten
Beziehungen
Gesendete Dokumente

Der Lebensweg sitzt unter der PersonCard in der 35%-Spalte. Gefiltert auf Karl: eigene Geburt/Heirat/Tod, beteiligte Welt-Ereignisse als Kontext, eigene Brief-Cluster. `<TimelineView personId={person.id} />`

## … und so verhalten sich A vs. B in der schmalen Lebensweg-Spalte

Bei Spaltenbreite (~330px) ist die Entscheidung wichtig: A bleibt eine klare Faden-Achse, B muss seine drei Spuren stapeln.

A · Faden im Rail
*
Geburt · 1901
⚭
Heirat · 1914
1915 · 24 Feldpost
†
Tod · 1967
Faden bleibt intakt — eine durchgehende Lebenslinie. Natürliche Passform fürs Rail.
B · Bänder im Rail (gestapelt)
1914
PERSONEN
⚭ Heirat mit Elfriede
WELT
◍ Erster Weltkrieg
BRIEFE
6 Briefe ▾
1915
PERSONEN
* Geburt: Hans
BRIEFE
24 Feldpost ▾
Spuren stapeln zu Mini-Sektionen pro Jahr. Mehr Struktur, aber höher & mehr Scroll im engen Rail.

#### Konsequenz für die Wahl

- A skaliert nahtlos von Rail (330px) über Phone bis Desktop — ein Layout-Idiom, drei Breiten.
- B braucht zwei Modi: gestapelt im Rail/Phone, Spalten auf Desktop. Mehr Code, aber explizitere Ebenen-Trennung.
- Da der Lebensweg denselben Component nutzt, zählt die Rail-Tauglichkeit doppelt — sie ist ein echtes Argument für A.

## 5 · Brief-Gruppierung & Tag-Farben

Die Zeit ist die Achse — nicht das Thema. Briefe gruppieren wir nach Datum (Standard), echte Bündel entstehen über kuratierte Ereignisse, und Tags dienen als Farb-Akzent & Filter. So bleibt der Zeitstrahl eine Zeit-Oberfläche und konkurriert nicht mit der `/themen`-Seite.

Warum nicht primär nach Tags gruppieren? Ein Dokument hat mehrere Tags (ManyToMany). Ein Brief mit `Weihnachten` und `Lazarett` hätte keinen eindeutigen Eimer — duplizieren verfälscht Zählungen, willkürlich wählen verfälscht die Bedeutung. Daten sind exklusiv, Themen nicht. Außerdem spannt `Weihnachten` jeden Dezember 1899–1950 — das ist genau die Themen-Seite, nicht der Zeitstrahl.
① Gruppierungs-Umschalter
Datum Ereignis Thema
Standard = Datum. „Ereignis" bündelt unter kuratierte Ereignisse, „Thema" (optional, Post-MVP) nach Wurzel-Tag.
② Cluster-Karte (Ereignis)
✉ Briefe von der Front Krieg 24 Briefe ▾
Brief über die Lage an der WestfrontMär 1915
Feldpost aus VerdunJul 1915
+ 22 weitere · alle öffnen →
Ein Jahr mit 24 Feldpostbriefen wird zu einer erzählenden Zeile statt 24 Treffern — der schärfste Unterschied zur Suche. Quelle: `TimelineEvent.documents`.
③ Tag-Farb-Chips am Brief
Die Farbe kommt vom Wurzel-Tag (`Tag.color` ist nur auf Root gesetzt). Kinder erben sie: `Lazarett` & `Briefe von der Front` tragen die Farbe von `Krieg`. Nie Farbe allein — immer Punkt + Label.
✉ Weihnachtsgruß an Elfriede
Karl → Elfriede · Dez 1915
Weihnachten › Weihnachtsgrüße
✉ Brief aus dem Lazarett
Hans → Karl · Aug 1916
Krieg › Lazarett
✉ Brief zum neuen Jahr
Elfriede → Karl · Jan 1916 · 2 Tags
Weihnachten Familie
Mehrere Tags → mehrere Chips. Unter „Thema"-Gruppierung erscheint der Brief nur unter seinem primären Tag (dedupliziert, mit Hinweis).
④ Lose Briefe ohne Cluster — adaptive Verdichtung
Lose Briefe (kein Ereignis, Modus „Datum") nie einzeln auflisten — 412 Briefe würden die Erzählung sprengen. Stattdessen verdichtet der Zeitstrahl nach Datum, adaptiv: wenige Briefe pro Jahr einzeln, viele als verdichteter Jahres-Strip mit 12-Monats-Sparkline. Gleiche Daten & Logik wie der Such-Dichtefilter — `MonthBucket` + `aggregateToYears` aus `lib/document/timeline.ts`.
Ruhiges Jahr · ≤ 3 lose Briefe → einzeln
1909
✉ Brief aus Stettin
Elfriede → Karl · Mai 1909
✉ Geburtstagsgruß
Karl → Hans · Sep 1909
Unter dem Schwellwert: jeder Brief als eigene Karte mit Tag-Chip.
Dichtes Jahr · > 3 → Jahres-Strip mit Sparkline
1915
✉ 24 Briefe Monats-Dichte ▾
JanDez
Über dem Schwellwert: ein Strip mit 12-Monats-Sparkline. Tap → Monate → einzelne Briefe, oder „im Suchergebnis öffnen →".
Disclosure-Leiter: Jahres-Strip → Monats-Gruppen → einzelne Briefe. Auf jeder Stufe gilt der Schwellwert; die unterste Stufe verlinkt in die gefilterte Dokumentsuche (`/documents?from=1915-01-01&to=1915-12-31`) — die Brücke zur dritten Oberfläche, dem Dichtefilter. So bleibt der Zeitstrahl Erzählung und delegiert die vollständige Liste an die Suche, die genau dafür gebaut ist.
⑤ Wie Cluster entstehen — Kuratierung von zwei Seiten
Manuelle Gruppierung = ein `TimelineEvent` mit verknüpften Dokumenten. Zwei Einstiegspunkte, ein Datenmodell (`TimelineEvent.documents`): Ereignis-zuerst (Kurator baut den Zeitstrahl, verlinkt viele Briefe auf einmal) und Dokument-zuerst (beim Lesen eines Briefs schnell zuordnen).
A · Kurator-Editor · /zeitstrahl/events/[id]/edit
TITEL
Briefe von der Front
TYP
PersönlichHistorisch
DATUM · PRÄZISION
1915 · Jahr ▾
VERKNÜPFTE BRIEFE · 24
✉ Westfront-Brief × ✉ Verdun × + Brief suchen…
Form-Actions-Muster, `WRITE_ALL`. Dokument-Mehrfach-Picker = Bulk-Linking. Auch inline „＋ Ereignis" auf jedem Jahres-Band.
B · Quick-Add · /documents/[id]
… Dokument-Detail · Seitenleiste …
Zeitstrahl-Ereignis
✉Briefe von der Front✓ verknüpft
Ereignis wählen ▾＋ Neues Ereignis
Beim Lesen eines Briefs: bestehendes Ereignis wählen oder direkt neu anlegen — verlinkt diesen einen Brief. Schreibt dieselbe `TimelineEvent.documents`-Relation.
Wo Tags stark sind — als Filter: „nur Krieg" verengt den gesamten Zeitstrahl über alle 50 Jahre auf Kriegsbriefe — die Zeit-Achse bleibt erhalten. Genau das kann die Themen-Seite nicht. Tag-Filter ist additiv, nicht duplikativ.

## 6 · Empfehlung & nächster Schritt

### Konzept A als Basis, mit der Spur-Klarheit von B und der Schiene von C als Stufe 2.

A (Lebensfaden) trifft die Differenzierungs-Frage am direktesten: es sieht null wie eine Suchliste aus und macht die verwobene Erzählung zur Hauptfigur. Die drei benannten Spuren aus B sind die beste Antwort, falls Nutzer-Tests zeigen, dass „welche Ebene ist das?" unklar bleibt — sie lassen sich als Desktop-Enhancement in A einziehen. Die Dichte-Schiene aus C ist die richtige Lösung für „50 Jahre navigieren", aber Stufe 2 — sie löst Navigation, nicht Differenzierung, und kann nachgerüstet werden.

Für alle gilt: Brief-Cluster statt Brief-Listen sind der schärfste Unterschied zur Suche — ein Jahr mit 24 Feldpostbriefen wird zu einer erzählenden Zeile („24 Feldpost, Westfront"), nicht zu 24 Treffern. Genau hier hört der Zeitstrahl auf, eine sortierte Suche zu sein. Nächster Schritt: dieses Konzept für die Person-Detail-„Lebensweg"-Ansicht (gefilterte Variante) durchdeklinieren.

## 7 · Design-Tokens (echte, ausgelieferte Werte)

Direkt aus `frontend/src/routes/layout.css`. Keine Hardcodes in den Komponenten — nur diese Tokens.

Rolle | Token / Utility | Wert | Einsatz im Zeitstrahl
--- | --- | --- | ---
Spine / Knoten / Header | `brand-navy` · `--palette-navy` | #012851 | Achsen-Spine, Lebensereignis-Knoten, Jahres-Header, Titel
Akzent / Brief-Punkt | `brand-mint` · `--palette-mint` | #a1dcd8 | Brief-Punkte & -Ringe, kuratierte Ereignis-Akzente, Dark-Mode-Auswahl
Historisch / Welt | `tag-slate` (Vorschlag) | #607080 | Welt-Ereignis-Bänder & Glyphe ◍ — gedämpft, im Hintergrund
Tag-Chip-Farben | `--c-tag-*` (nur Wurzel-Tag) |  | sage · sienna · amber · violet · slate — Farbe vom Wurzel-Tag, Kinder erben; Punkt + Label (nie Farbe allein)
Seiten-Hintergrund | `bg-canvas` · `--c-canvas` | #f0efe9 | Zeitstrahl-Seitenfläche
Karten-Fläche | `bg-surface` · `--c-surface` | #ffffff | Brief-Karten, Jahres-Bänder
Gedämpfte Fläche | `bg-muted` · `--c-muted` | #f5f4ef | Welt-Spur-Hintergrund (Konzept B)
Linien | `border-line` · `--c-line` | #e4e2d7 | Karten-Rahmen, Spur-Trenner
Text primär | `text-ink` · `--c-ink` | #012851 | Titel, Namen (= Navy)
Text sekundär | `text-ink-3` · `--c-ink-3` | #6b7280 | Meta-Zeilen (4,8:1 auf weiß — AA ✓)
Schrift — Namen/Titel | `font-serif` (Tinos) | — | Personennamen, Ereignis- & Jahres-Titel
Schrift — Meta/Chrome | `font-sans` (Montserrat) | — | Labels, Spur-Überschriften, Badges
Lebensdaten-Glyphen | `personLifeDates.ts` | * † ⚭ | Geburt `*` · Tod `†` · Heirat `⚭` — konsistent mit Personenkarten

## 8 · Implementierungs-Referenz

Komponenten-Plan aus der Design-Basis. Neuer Domain-Ordner `frontend/src/lib/timeline/`; Route `/zeitstrahl`.

Bereich | Komponente / Datei | Verantwortung
--- | --- | ---
Orchestrator | `TimelineView.svelte` | Lädt `GET /api/timeline`; optionaler `personId`-Prop treibt auch die Lebensweg-Ansicht
Jahres-Band | `YearBand.svelte` | Ein Jahres-Abschnitt + seine Einträge (Spine-Knoten in A, Spuren-Box in B)
Ereignis-Karte | `EventCard.svelte` | PERSONAL / HISTORICAL / abgeleitet, präzisions-bewusstes Datumslabel
Brief-Karte | `LetterCard.svelte` | Kompakte Zeile Absender → Empfänger, Link zu `/documents/[id]`; Cluster-Variante; Wurzel-Tag-Farbchip
Lose-Brief-Verdichtung | `YearLetterStrip.svelte` | Adaptiver Jahres-Strip mit Monats-Sparkline ab Schwellwert; nutzt `MonthBucket` / `aggregateToYears` aus `lib/document/timeline.ts`
Kurator-Editor | `/zeitstrahl/events/new · [id]/edit` | Ereignis anlegen/bearbeiten; Personen- + Dokument-Mehrfach-Picker (Bulk-Linking); `WRITE_ALL`, Form-Actions
Quick-Add (Dokument) | `DocumentTimelineEventPicker.svelte` | Auf `/documents/[id]`: bestehendes Ereignis wählen oder neu anlegen; verlinkt einen Brief in `TimelineEvent.documents`
Datums-Helfer | `dateLabel.ts` | DatePrecision → deutsches Label; wiederverwendet `lib/document/timeline.ts`-Helfer wo sinnvoll
Dichte-Schiene (C) | `TimelineMinimap.svelte` | Stufe 2 — vertikale Dichte + Ereignis-Marker + Sprung-Navigation
Daten-API | `GET /api/timeline` | Verschmilzt Ereignisse + abgeleitete Personen-Ereignisse + Briefe in `TimelineDTO` (Jahres-Eimer + Ohne-Datum)
A11y | — | Spine = `<ol>`; Knoten erreichbar; ◍/✉/* nie nur als Farbe — immer Glyphe+Text; 44px-Tap-Ziele; `prefers-reduced-motion`; axe in Light & Dark