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.
All colour values used by the new card. Components use Tailwind semantic tokens; exact hex values are provided here for reference only.
| 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 |
| 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 |
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.
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).
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.
Narrower viewport — card fills the single center column, paddings tighten. Same component structure as desktop. Shown at ~50% scale.
Tablet. Card fills single column. Two relationship rows shown (trimmed for space). All controls remain the same size — no stacking yet at 768 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. "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.
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 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.
| 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 |