# Reader Dashboard — Final

Zusammenführung von B.1 und B.3. Gesamtgestaltung aus B.1: weißer Header-Balken mit vertikaler Trennlinie, 1:1-Spaltenraster, Geschichten mit 2-Zeilen-Auszug, minimale Chrome-Dichte. Personen-Kacheln aus B.3: größerer Avatar (34 px, mit Schatten), mintgrüne Pill-Badge für die Dokumentzahl — kein unterer Akzentstreifen.

Final · Bereit zur Umsetzung
Header-Balken
B.1 — Weiß · vertikale Trennlinie
Personen-Avatar
B.3 — 34 px · rund · Schatten
B.1: 28 px, kein Schatten
Dokumentzahl
B.3 — Mint Pill (#D4F0EE)
B.1: Grau-Text, kein Badge
Kachel-Rand
Einfacher Border · kein Akzentstreifen
B.1: Mint Bottom-Border
Seitenlayout
max-w-7xl (1280 px) · px-8 py-8 (32 px) · Canvas vollbreit
📐 Mockup-Skalierung — alle Schriftgrößen, Abstände und Höhen sind auf ca. 55 % der Implementierungswerte skaliert. Werte nicht aus dem Mockup-CSS kopieren.
1 Desktop · READ_ALL — ohne BLOG_WRITE
Vollansicht ≥ 1024 px
familienarchiv.local /
Familienarchiv Startseite Dokumente Personen Geschichten
BK
Guten Abend
Herzlich willkommen, Brigitte.
847Dokumente
94Personen
12Geschichten
KR
Käthe Raddatz
47 Dok.
ER
Ernst Raddatz
31 Dok.
FM
Frieda Müller
28 Dok.
HW
Heinrich Weber
19 Dok.

### Zuletzt aktualisiert

Alle Dokumente
Brief von Ernst an Käthe, März 1923
von Käthe Raddatz
vor 2 Tagen
Heiratsurkunde Raddatz-Müller, 1898
—
vor 4 Tagen
Familienfoto, Sommer 1928
von Ernst Raddatz
vor 1 Woche
Taufregister Heinrich Weber, 1902
—
vor 2 Wo.
Postkarte aus Berlin, 1930
von Frieda Müller
vor 3 Wo.

### Geschichten

Alle Geschichten
Die Reise nach Berlin
Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin, um Arbeit in der aufstrebenden Metropole zu finden …
vor 3 Tagen
Sommer 1934 in Köln
Die Sommerferien 1934 verbrachte die Familie Raddatz bei Verwandten in Köln — die letzte unbeschwerte Reise vor dem Krieg …
vor 2 Wochen
Briefe aus dem Krieg
Zwischen 1914 und 1918 schrieb Ernst Raddatz insgesamt 47 Briefe aus dem Feld an seine Frau Käthe in der Heimat …
vor 1 Monat
Header-Balken — unverändert B.1

- Weißer Hintergrund, 1 px vertikale Trennlinie (#E8E4DF)
- Gruß links in Georgia Serif, Stats rechts mit Inline-Trennern

Personen-Kacheln — B.3 Avatar, B.3 Pill, kein Streifen

- Avatar: 34 px (statt 28 px), gleicher border-radius: 50 %
- Avatar box-shadow: 0 2 px 6 px rgba(0,40,80,.2) — leichte Tiefe
- Dokumentzahl: Mint Pill (#D4F0EE bg, #002850 text) statt grauem Plain-Text
- Kein border-bottom-Akzent — plain 1 px #E0DDD5 rundum

Seitenlayout — reale Werte

- Canvas (#F5F4EF) läuft vollbreit bis zum Viewport-Rand
- Inhalts-Wrapper: `max-w-7xl` (1280 px) + `px-8 py-8` (32 px) zentriert
- Mockup-Äquivalent: max-width 704 px, padding 20 px links/rechts, 18 px oben
- Nav-Bar bleibt vollbreit — kein max-width-Constraint

Alle anderen Elemente unverändert aus B.1

- 1:1 Spaltenbreite, Docs-Thumb, Absender-Link, Datum
- Story: kursiver Titel, 2-Zeilen-Auszug, Datum
- Drafts-Card: white mit mint left-border (BLOG_WRITE-Variante)

Stat-Links — Zielrouten

- Dokumente-Zahl → `/documents`
- Personen-Zahl → `/persons`
- Geschichten-Zahl → `/geschichten`
- „Alle N Personen →" → `/persons`
- „Alle Dokumente" / „Alle" in Card-Head → `/documents`
- „Alle Geschichten" / „Alle" in Card-Head → `/geschichten`
- Personen-Kacheln → `/persons/{id}` (Instanz-spezifisch)

2 Variante · BLOG_WRITE — Zone 3 „Meine Entwürfe"
READ_ALL + BLOG_WRITE
familienarchiv.local /
FamilienarchivStartseiteDokumentePersonenGeschichten
MR
Guten Morgen
Herzlich willkommen, Marcel.
847Dokumente
94Personen
12Geschichten

### Meine Entwürfe

Onkel Friedrichs Wanderjahre
Entwurf · zuletzt bearbeitet vor 1 Tag
Die Raddatz-Kinder
Entwurf · zuletzt bearbeitet vor 5 Tagen
KR
Käthe Raddatz
47 Dok.
ER
Ernst Raddatz
31 Dok.
FM
Frieda Müller
28 Dok.
HW
Heinrich Weber
19 Dok.

### Zuletzt aktualisiert

Alle Dokumente
Brief von Ernst an Käthe, März 1923
von Käthe Raddatz
vor 2 Tagen
Heiratsurkunde Raddatz-Müller, 1898
—
vor 4 Tagen
Familienfoto, Sommer 1928
von Ernst Raddatz
vor 1 Woche
+ 2 weitere Dokumente …

### Geschichten

Alle
Die Reise nach Berlin
Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin, um Arbeit in der aufstrebenden Metropole zu finden …
vor 3 Tagen
Sommer 1934 in Köln
Die Sommerferien 1934 verbrachte die Familie Raddatz bei Verwandten in Köln — die letzte unbeschwerte Reise vor dem Krieg …
vor 2 Wochen
Entwürfe-Card — unverändert B.1

- Weiß mit 3 px mint Left-Border — gleiche Sprache wie restliche Cards
- Titel in Georgia Serif, Metazeile in gedämpftem Grau
- Nur sichtbar für BLOG_WRITE-Nutzer (isReader && canBlogWrite)

3 Desktop · Dark Theme — READ_ALL
Vollansicht ≥ 1024 px · dark mode
familienarchiv.local /
Familienarchiv Startseite Dokumente Personen Geschichten
BK
Guten Abend
Herzlich willkommen, Brigitte.
847Dokumente
94Personen
12Geschichten
KR
Käthe Raddatz
47 Dok.
ER
Ernst Raddatz
31 Dok.
FM
Frieda Müller
28 Dok.
HW
Heinrich Weber
19 Dok.

### Zuletzt aktualisiert

Alle Dokumente
Brief von Ernst an Käthe, März 1923
von Käthe Raddatz
vor 2 Tagen
Heiratsurkunde Raddatz-Müller, 1898
—
vor 4 Tagen
Familienfoto, Sommer 1928
von Ernst Raddatz
vor 1 Woche
Taufregister Heinrich Weber, 1902
—
vor 2 Wo.
Postkarte aus Berlin, 1930
von Frieda Müller
vor 3 Wo.

### Geschichten

Alle Geschichten
Die Reise nach Berlin
Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin, um Arbeit in der aufstrebenden Metropole zu finden …
vor 3 Tagen
Sommer 1934 in Köln
Die Sommerferien 1934 verbrachte die Familie Raddatz bei Verwandten in Köln — die letzte unbeschwerte Reise vor dem Krieg …
vor 2 Wochen
Briefe aus dem Krieg
Zwischen 1914 und 1918 schrieb Ernst Raddatz insgesamt 47 Briefe aus dem Feld an seine Frau Käthe in der Heimat …
vor 1 Monat
Dark Canvas — DK-MAIN

- Hintergrund: `#0F1219` (tief dunkelblau, kein reines Schwarz)
- Browser-Chromleiste: `#1C1E26` · URL-Bar: `#252830`
- Nav-Bar bleibt `#002850` — keine Änderung im Dark Mode

Karten & Trennlinien — DK-CARD / DK-HEADER-BAR

- Surface: `#161C27` (dunkleres Blaugrau)
- Rand: `rgba(255,255,255,.08)` — subtile Trennung statt Linie
- Zeilentrennlinien: `rgba(255,255,255,.04)`

Typografie-Token im Dark Mode — WCAG AA

- Primär-Text: `#D0CCC4` / `#C0BDB6` (warm, kein reines Weiß)
- Gedämpft (muted): `#7080A8` — Absender, Excerpts, Entwurfs-Meta (≥ 4.5:1)
- Labels/Überschriften: `#6070A0` — HSTAT-Label, Card-Head h3 (≥ 4.5:1)
- Dim: `#5A6888` — Datum-Felder (≥ 4.5:1)
- Mint: `#A6DAD8` — unverändert, auch im Dark Mode
- Mint-Pill Hintergrund: `rgba(166,218,216,.14)`

Kompositions-Muster — DK- als Zusatzklasse

- Klassen addieren sich: `class="CARD DK-CARD"`
- DK- nutzt `!important` zum Überschreiben von Light-Werten
- Strukturelle Klassen bleiben unverändert — kein doppelter Markup
- Impl.: Tailwind `dark:`-Varianten oder CSS-Variable-Swap

4 Mobile — 3 Varianten (375 px · ≈ 64 % Mockup-Skala)
Alle drei Varianten nebeneinander
READ_ALL Hell
19:43
Guten Abend
Herzlich willkommen, Brigitte.
847Dok.
94Pers.
12Gesch.
KR
Käthe Raddatz
47 Dok.
ER
Ernst Raddatz
31 Dok.
FM
Frieda Müller
28 Dok.
HW
Heinrich Weber
19 Dok.
Alle 94 Personen →

### Zuletzt aktualisiert

Alle
Brief von Ernst an Käthe, März 1923
von Käthe Raddatz
vor 2 T.
Heiratsurkunde Raddatz-Müller, 1898
—
vor 4 T.
Familienfoto, Sommer 1928
von Ernst Raddatz
vor 1 W.

### Geschichten

Alle
Die Reise nach Berlin
Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin …
vor 3 Tagen
Sommer 1934 in Köln
Die Sommerferien 1934 verbrachte die Familie Raddatz bei Verwandten …
vor 2 Wochen
BLOG_WRITE Hell + Entwürfe
08:17
Guten Morgen
Herzlich willkommen, Marcel.
847Dok.
94Pers.
12Gesch.

### Meine Entwürfe

Onkel Friedrichs Wanderjahre
Entwurf · vor 1 Tag
Die Raddatz-Kinder
Entwurf · vor 5 Tagen
KR
Käthe Raddatz
47 Dok.
ER
Ernst Raddatz
31 Dok.
FM
Frieda Müller
28 Dok.
HW
Heinrich Weber
19 Dok.
Alle 94 Personen →

### Zuletzt aktualisiert

Alle
Brief von Ernst an Käthe, März 1923
von Käthe Raddatz
vor 2 T.
Familienfoto, Sommer 1928
von Ernst Raddatz
vor 1 W.

### Geschichten

Alle
Die Reise nach Berlin
Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin …
vor 3 Tagen
Sommer 1934 in Köln
Die Sommerferien 1934 verbrachte die Familie Raddatz bei Verwandten …
vor 2 Wochen
READ_ALL Dunkel
19:43
Guten Abend
Herzlich willkommen, Brigitte.
847Dok.
94Pers.
12Gesch.
KR
Käthe Raddatz
47 Dok.
ER
Ernst Raddatz
31 Dok.
FM
Frieda Müller
28 Dok.
HW
Heinrich Weber
19 Dok.
Alle 94 Personen →

### Zuletzt aktualisiert

Alle
Brief von Ernst an Käthe, März 1923
von Käthe Raddatz
vor 2 T.
Heiratsurkunde Raddatz-Müller, 1898
—
vor 4 T.
Familienfoto, Sommer 1928
von Ernst Raddatz
vor 1 W.

### Geschichten

Alle
Die Reise nach Berlin
Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin …
vor 3 Tagen
Sommer 1934 in Köln
Die Sommerferien 1934 verbrachte die Familie Raddatz bei Verwandten …
vor 2 Wochen
Header — stacked layout

- Desktop: Greeting + Stats nebeneinander (Flexbox row, 1 px Divider)
- Mobile: Greeting oben, Stats darunter nach `border-top` — kein Divider
- Stat-Labels kürzen auf „Dok." / „Pers." / „Gesch." (Platzmangel)

Personen — 2×2 Grid (statt 4×1)

- Desktop: `grid-template-columns: repeat(4, 1fr)`
- Mobile: `grid-template-columns: 1fr 1fr` — Avatar 22 px (statt 34 px)
- „Alle N Personen →" als Inline-Link unter dem Grid

Inhalt — einspaltig, Docs zuerst

- Desktop: `grid-template-columns: 1fr 1fr` nebeneinander
- Mobile: Spalten aufgelöst — Dokumente-Card oben, Geschichten-Card darunter
- Breakpoint: Tailwind `sm` = 640 px

Navigation — Hamburger-Menü

- Desktop: inline Nav-Links sichtbar
- Mobile: Links ausgeblendet, stattdessen Hamburger-Icon (3 Striche) links neben Avatar
- Nav-Bar Höhe und Farbe (#002850) bleiben identisch

Dark Mobile — .dk Modifier-Klasse

- Selbe M- Strukturklassen + `.dk` für Dark-Werte
- Nav-Bar bleibt #002850 — kein .dk nötig
- PHONE-Status-Bar bleibt #002850 — unverändert
- Avatare behalten ihre Farbe — Eigenfarbe, kein Token

Neue i18n-Schlüssel — messages/{de,en,es}.json

- `dashboard.greeting.morning` — „Guten Morgen" (vor 12:00)
- `dashboard.greeting.afternoon` — „Guten Tag" (12:00–18:00)
- `dashboard.greeting.evening` — „Guten Abend" (ab 18:00)
- `dashboard.welcome` — „Herzlich willkommen, {name}." (parametrisch)
- `dashboard.persons.viewAll` — „Alle {count} Personen →" (parametrisch)
- `dashboard.recentlyUpdated` — „Zuletzt aktualisiert"
- `dashboard.myDrafts` — „Meine Entwürfe"
- `dashboard.stat.documents` — „Dokumente" / mobil: „Dok."
- `dashboard.stat.persons` — „Personen" / mobil: „Pers."
- `dashboard.stat.stories` — „Geschichten" / mobil: „Gesch."

↗ Implementierungsreferenz — Tailwind-Klassen je Region

Exakte Tailwind CSS 4-Klassen und Pixel-Werte für jeden UI-Bereich. Diese Werte gelten für die Implementierung, nicht die skalierten Mockup-Werte.

Region | Tailwind-Klassen | Hinweise
--- | --- | ---
Seiten-Canvas | `bg-canvas w-full` | Vollbreite Viewport; Farbe: `--palette-sand` / `bg-canvas`
Inhalts-Wrapper | `max-w-7xl mx-auto px-8 py-8` | 1280 px max-width, 32 px padding allseitig
Header-Balken | `bg-white border border-line rounded-sm px-4 py-3 flex items-center gap-4` | Explizit `bg-white`, nicht `bg-surface` — weißer Hintergrund ist intentionell (B.1-Entscheidung)
Header: Gruß-Zeit | `text-[6px] font-bold uppercase tracking-[.8px] text-[#C8B8A0]` | Warm-beige, kein Design-Token — kandidiert für `--color-greeting-time`
Header: Begrüßungsname | `font-serif text-xl text-brand-navy` | Georgia/Tinos; `text-xl` (20 px real)
Header: Trennlinie | `w-px self-stretch bg-line flex-shrink-0` | 1 px vertikal; `--palette-line` = `#E8E4DF`
Stat-Zahl | `text-2xl font-black text-brand-navy leading-none block` | Numerischer Wert; Block damit Label darunter sitzt
Stat-Label | `text-[11px] font-bold uppercase tracking-[.8px] text-ink-3 block mt-0.5` | Licht: `#706C68` (WCAG AA); Tailwind-Token `text-ink-3` TBD
Personen-Grid | `grid grid-cols-4 gap-1.5` | Mobile: `grid-cols-2` bei `sm:` (640 px)
Personen-Kachel | `bg-surface border border-line rounded-sm p-2.5 flex flex-col items-center text-center gap-1.5 no-underline` | `bg-surface` = `--palette-surface`; kein Bottom-Accent
Personen-Avatar | `w-9 h-9 rounded-full flex items-center justify-center font-black text-white text-[9px] shadow-sm flex-shrink-0` | 34 px real ≈ `w-9` (36 px) — nächster Tailwind-Step; Avatar-Farbe per Person-Eigenfarbe
Mint-Pill Badge | `text-[11px] font-bold text-brand-navy bg-[#D4F0EE] px-1.5 py-px rounded-full` | Token-Kandidat: `--color-mint-pill` / `bg-mint-soft`
„Alle N Personen →" | `text-xs font-semibold text-[#4A6E8A] no-underline text-right block mt-1` | Direkte Farbe (kein opacity-Trick) — WCAG AA auf `bg-canvas`
Content-Card | `bg-surface border border-line rounded-sm overflow-hidden flex flex-col` | Gleiche Card-Sprache wie restliche App
Card-Kopfzeile | `flex items-center justify-between px-3 py-1.5 border-b border-line` | h3: `text-[11px] font-bold uppercase tracking-[.12em] text-ink-3`
Dok.-Datum | `text-[12px] text-ink-3 whitespace-nowrap flex-shrink-0` | Licht: `#706C68` (WCAG AA); nicht `#C8C4BE`
Story-Excerpt | `text-xs text-ink-2 leading-relaxed line-clamp-2` | 2 Zeilen max via Tailwind `line-clamp-2`
Story-Meta | `text-[11px] text-ink-3` | Licht: `#706C68` (WCAG AA)
Entwürfe-Card | `bg-surface border border-line border-l-[3px] border-l-brand-mint rounded-sm overflow-hidden` | Mint Left-Border als visueller Anker für BLOG_WRITE-Zone
Dark Mode | `dark:bg-surface dark:border-white/8 dark:text-ink` (via Tailwind `dark:`) | Nicht `!important`-Overrides aus Spec — spec-DK- Klassen sind Annäherungen