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

Guten Abend

Herzlich willkommen, Brigitte.

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

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

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

Guten Abend

Herzlich willkommen, Brigitte.

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

Familienarchiv

Guten Abend

Herzlich willkommen, Brigitte.

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

Familienarchiv

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

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

Familienarchiv

Guten Abend

Herzlich willkommen, Brigitte.

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