# Stammbaum — Person Edit · Stammbaum & Beziehungen Card

Spec for the new Stammbaum & Beziehungen card appended at the bottom of `/persons/{id}/edit`. The card lets editors toggle a person's family-tree membership and manage their direct relationships (parents-of, spouse, siblings, etc.). Inferred transitive relationships are shown in a collapsible derived section.

Familienarchiv · 2026-04-27 · Leonie Voss, UX Lead
Stammbaum Feature View 3 of 3 — Person Edit Desktop / Tablet / Mobile Light + Dark

## 1 · Design tokens

All colour values used by the new card. Components use Tailwind semantic tokens; exact hex values are provided here for reference only.

Light theme — page bg #f0efe9 · card bg #ffffff

Page bg | #f0efe9 — sand
Card bg / border | #ffffff / 1px #e4e2d7
Section label | #6b7280 — Montserrat 9px 700 uppercase4.8:1 AA ✓
In-tree indicator bg | rgba(161,220,216,.1) bg / 1px #a1dcd8 border
In-tree label | #01285114.5:1 AAA ✓
Toggle ON track | #012851
Toggle OFF track | #e4e2d7
Toggle thumb | #ffffff
Direct rel pill bg/border | rgba(161,220,216,.2) / 1px #a1dcd8
Direct rel name | #012851 — Tinos 10px
Rel years | #6b7280 — Montserrat 8px
Delete btn / hover | #6b7280 normal / #c0392b hover
Add-form bg / border | #f5f4ef / #e4e2d7
Derived pill bg/border | #f5f4ef / #e4e2d7
+ Hinzufügen btn | #012851 bg / #fff text

Dark theme — page bg #010e1e · card bg #011526

Page bg | #010e1e
Card bg / border | #011526 / 1px #0d3358
Section label | #8b97a57.1:1 AAA ✓
In-tree indicator bg | rgba(0,199,177,.08) bg / 1px #00c7b1 border
In-tree label | #00c7b1
Toggle ON track | #a1dcd8 (mint)
Toggle thumb (ON) | #012851
Direct rel pill bg/border | rgba(0,199,177,.12) / 1px #00c7b1
Direct rel name | #f0efe9
Rel years | #8b97a5
Add-form bg / border | #011a30 / #0d3358
Derived pill bg/border | #011a30 / #0d3358 / text #9ca3af
+ Hinzufügen btn | #a1dcd8 bg / #012851 text

## 2 · Desktop (1280 px) — light & dark

Full person-edit page at desktop width. Light mockup shows the add-form expanded; dark mockup shows the resting state (form collapsed, toggle ON, no derived section open). Shown at ~40% scale.

Light theme · add form expanded
Zurück
Person bearbeiten
Angaben zur Person
Titel + Vorname
Nachname
Rufname
Geburtsjahr
Todesjahr
Namensverlauf
Noch keine Namensänderungen erfasst
Art
Nachname
Stammbaum & Beziehungen
Als Familienmitglied
Erscheint im Stammbaum
Ansehen →
Direkte Beziehungen
Elternteil von Hans Raddatz ab 1905 ✕
Elternteil von Lotte Berger ab 1908 ✕
Elternteil von Werner Raddatz ab 1912 ✕
Ehegatte Frieda Raddatz 1902–1944 ✕
Beziehung hinzufügen
Beziehung hinzufügen
Typ
Person
Von Jahr
Bis Jahr
Abgeleitete Beziehungen 5
▾

Desktop, light. Toggle is ON → in-tree indicator visible. "Beziehung hinzufügen" form is expanded, showing Typ dropdown, Person typeahead, Von/Bis year inputs, and "+ Hinzufügen" button. Derived section is collapsed with count badge (5).

Dark theme · resting state
Zurück
Person bearbeiten
Angaben zur Person
Vorname
Nachname
Namensverlauf
Noch keine Namensänderungen erfasst
Art
Nachname
Stammbaum & Beziehungen
Als Familienmitglied
Erscheint im Stammbaum
Ansehen →
Direkte Beziehungen
Elternteil von Hans Raddatz ab 1905 ✕
Elternteil von Lotte Berger ab 1908 ✕
Elternteil von Werner Raddatz ab 1912 ✕
Ehegatte Frieda Raddatz 1902–1944 ✕
Beziehung hinzufügen
Abgeleitete Beziehungen 5
▾

Desktop, dark. Resting state — add form hidden, "+ Beziehung hinzufügen" button visible. Toggle track is mint (#a1dcd8), thumb is navy (#012851). In-tree indicator border shifts to turquoise #00c7b1.

## 3 · Tablet (768 px)

Narrower viewport — card fills the single center column, paddings tighten. Same component structure as desktop. Shown at ~50% scale.

Tablet · light · resting state
Person bearbeiten
Angaben zur Person
Namensverlauf
Noch keine Namensänderungen erfasst
Stammbaum & Beziehungen
Als Familienmitglied
Erscheint im Stammbaum
Ansehen →
Direkte Beziehungen
Elternteil von Hans Raddatz ab 1905 ✕
Ehegatte Frieda Raddatz 1902–1944 ✕
Beziehung hinzufügen
Abgeleitete Beziehungen 5
▾

Tablet. Card fills single column. Two relationship rows shown (trimmed for space). All controls remain the same size — no stacking yet at 768 px.

## 4 · Mobile (375 px)

Phone viewport. Card is full-width. Add-form fields stack vertically (single column). Pill labels truncate to first word on very small screens if needed. Shown at ~65% scale.

Mobile 375px · light · add form expanded
Person bearbeiten
Angaben zur Person
Stammbaum & Beziehungen
Als Familienmitglied
Erscheint im Stammbaum
Ansehen →
Direkte Beziehungen
Elternteil von Hans Raddatz ab 1905 ✕
Ehegatte Frieda Raddatz 1902–1944 ✕
Beziehung hinzufügen
Typ
Person
Von Jahr
Bis Jahr
Abgeleitete Beziehungen 5
▾

Mobile. "Typ" and "Person" fields are stacked vertically. Year inputs remain side-by-side. Pill labels shrink to 6 px. Card fills the full width with 7 px side padding.

## 5 · Derived relationships — expanded state

Clicking the "Abgeleitete Beziehungen" row expands the section. Items are computed server-side from the direct-relationship graph — the frontend renders them read-only. Grey pills and muted italic text for entries that cannot be resolved.

Derived relationships — expanded · light
Stammbaum & Beziehungen
Als Familienmitglied
Erscheint im Stammbaum
Ansehen →
Direkte Beziehungen
Elternteil von Hans Raddatz ab 1905 ✕
Ehegatte Frieda Raddatz 1902–1944 ✕
Beziehung hinzufügen
Abgeleitete Beziehungen 5
▴
Kind von Heinrich Raddatz
Kind von Maria Raddatz
Geschwister von Ernst Raddatz
Schwiegereltern Eltern von Frieda, nicht im Archiv
Onkel/Tante von — keine Geschwisterkinder erfasst

Derived section expanded. Chevron rotates to ▴. Items use grey pills and Tinos italic for unresolvable entries. Section is read-only — no edit or delete controls. Computed by the backend graph traversal.

## 6 · Implementation reference

Element | Tailwind / CSS | Notes
--- | --- | ---
Card wrapper | `bg-white border border-line rounded-sm p-6` | Matches existing Angaben and Namensverlauf cards on same page
Section label | `text-xs font-bold uppercase tracking-widest text-gray-400 mb-4` | Montserrat 9px 700; identical to all other cards on the page
Card header row | `flex items-center justify-between mb-3` | Section label on left; toggle label + toggle on right
Toggle track ON | `w-[38px] h-5 rounded-full bg-primary transition-colors` | dark: `bg-accent` (#a1dcd8)
Toggle track OFF | `w-[38px] h-5 rounded-full bg-line` | `bg-line` = #e4e2d7
Toggle thumb | `absolute top-0.5 w-4 h-4 rounded-full bg-white transition-all` | ON: `left-[19px]`; OFF: `left-0.5`; dark ON thumb: `bg-primary`
In-tree banner | `flex items-center justify-between px-2.5 py-1.5 bg-accent/10 border border-accent rounded-sm mb-3` | Hidden when toggle is OFF. dark: `bg-[rgba(0,199,177,.08)] border-[#00c7b1]`
In-tree dot | `w-[7px] h-[7px] rounded-full bg-primary shrink-0` | dark: `bg-[#00c7b1]`
In-tree label | `text-[9px] font-bold uppercase tracking-widest text-primary` | dark: `text-[#00c7b1]`
In-tree link | `text-[9px] font-semibold text-primary/60` | Navigates to `/stammbaum?focus={personId}`
Rel row wrapper | `flex items-center gap-2 py-1.5 border-b border-muted last:border-b-0` | Padding 7px top/bottom; bottom border except last row
Direct rel pill | `rounded-full border border-accent bg-accent/20 px-2 py-0.5 text-[9px] font-bold uppercase tracking-wider text-ink shrink-0` | dark: `bg-[rgba(0,199,177,.12)] border-[#00c7b1] text-sand`
Rel person name | `font-serif text-[13px] text-ink flex-1 min-w-0 truncate` | Tinos; truncate prevents overflow on narrow viewports
Rel year range | `font-sans text-[10px] text-ink-3 whitespace-nowrap` | Format: `ab {year}` or `{from}–{to}`
Delete button | `text-ink-3 hover:text-danger p-0.5 ml-auto shrink-0` | ✕ icon button; hover color `#c0392b`; min touch 44px via padding wrapper
Add-rel quiet button | `flex items-center gap-1 text-[8px] font-bold text-primary/60 hover:text-primary/90 mt-1` | + icon (heroicons plus-mini); hidden when add form is open
Add-form card | `mt-3 bg-muted border border-line rounded-sm p-3.5` | `bg-muted` = #f5f4ef; dark: `bg-[#011a30] border-[#0d3358]`
Type select | `w-full border border-line rounded-sm px-2.5 py-2 text-xs font-sans text-ink bg-white` | Options: Elternteil von / Ehegatte / Geschwister von / Kollege / Freund / Arbeitgeber / Arzt / Nachbar / Sonstiges
Person input | `w-full border border-line rounded-sm px-2.5 py-2 font-serif text-sm text-ink bg-white` | Drives `PersonTypeahead` component; placeholder "z.B. Oma Frieda…"
Year inputs | `flex-1 border border-line rounded-sm px-2.5 py-2 font-serif text-sm text-ink bg-white` | Side-by-side via `flex gap-2`; on mobile remain side-by-side (they're short)
+ Hinzufügen button | `bg-primary text-white px-3.5 py-2 text-[10px] font-bold uppercase tracking-wider rounded-sm shrink-0` | dark: `bg-accent text-primary`
Cancel button | `bg-white border border-line rounded-sm px-3 py-1.5 text-[10px] font-bold text-ink-2` | Collapses add form without saving
Derived section header | `flex items-center justify-between py-2 border-t border-muted cursor-pointer mt-2.5 select-none` | Click toggles `derivedExpanded` boolean in component state
Derived count badge | `ml-1.5 rounded-full border border-line bg-muted px-1.5 py-0 text-[7px] font-bold text-ink-3` | Shows total inferred relationship count from backend
Derived rel pill | `rounded-full border border-line bg-muted px-2 py-0.5 text-[9px] font-bold uppercase tracking-wider text-ink-2 shrink-0` | Grey, no accent border; read-only only
Derived rel name | `font-serif text-[13px] text-ink-3` | Muted; unresolvable entries use `italic text-ink-4`
Mobile form stacking | `sm:flex-row flex-col` on add-form top row | Below 640 px Typ and Person stack; year inputs stay side-by-side