marcel/familienarchiv
1
0
Fork 0
Code Issues 125 Pull Requests Actions Packages Projects Releases Wiki Activity

docs(specs): add Stammbaum UI specs — tree, document badge, person edit
Some checks failed
CI / Unit & Component Tests (push) Failing after 3m12s
Details
CI / OCR Service Tests (push) Successful in 29s
Details
CI / Backend Unit Tests (push) Failing after 3m1s
Details

Browse Source 
Three standalone HTML spec files covering the initial Stammbaum release:
- stammbaum-tree-spec.html — desktop/tablet/mobile tree canvas with side panel, light + dark
- stammbaum-doc-badge-spec.html — inline relationship pill on document detail
- stammbaum-person-edit-spec.html — relationship editor card on person edit page

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-27 13:09:47 +02:00
parent 0979302205
commit 33ca2df45b
3 changed files with 3165 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

987
docs/specs/stammbaum-doc-badge-spec.html Normal file
View File

@@ -0,0 +1,987 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stammbaum — Document Badge · Inline Pill Variant · Familienarchiv</title>
<link href="https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,700&family=Montserrat:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Montserrat',system-ui,sans-serif;background:#ECEAE4;color:#1A1A1A;line-height:1.5;font-size:13px}
.doc{max-width:1300px;margin:0 auto;padding:48px 32px 120px}
/* ── Masthead ── */
.mh{padding-bottom:24px;border-bottom:3px solid #012851;margin-bottom:60px}
.mh h1{font-size:23px;font-weight:900;color:#012851;letter-spacing:-.4px}
.mh p{font-size:13px;color:#555;max-width:740px;line-height:1.75;margin-top:8px}
.mh .byline{font-size:9px;color:#999;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-top:10px}
.tag-row{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.tag{background:#012851;color:#A1DCD8;padding:2px 8px;border-radius:2px;font-size:8px;font-weight:700;letter-spacing:.8px;text-transform:uppercase}
.tag.amber{background:#7c4a00;color:#fde68a}
/* ── Section headers ── */
.sh{margin:0 0 28px}
.sh h2{font-size:16px;font-weight:900;color:#012851;letter-spacing:-.2px}
.sh p{font-size:12.5px;color:#666;max-width:720px;line-height:1.7;margin-top:5px}
.section{margin-bottom:80px;padding-bottom:80px;border-bottom:2px dashed #C8C4BE}
.section:last-of-type{border-bottom:none;margin-bottom:0;padding-bottom:0}
/* ── Token tables ── */
.token-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.token-table{border-radius:6px;overflow:hidden}
.token-table.light{background:#fff;border:1px solid #E0DDD6}
.token-table.dark{background:#0F1923;border:1px solid #1E2D3D}
.token-head{padding:8px 14px;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;border-bottom:1px solid #E0DDD6}
.token-table.light .token-head{background:#F4F2EC;color:#888;border-bottom-color:#E0DDD6}
.token-table.dark .token-head{background:#0A1218;color:#4E6070;border-bottom-color:#1E2D3D}
.token-table table{width:100%;border-collapse:collapse;font-size:11px}
.token-table.light td{padding:6px 14px;border-bottom:1px solid #F0EEE8;vertical-align:middle}
.token-table.dark td{padding:6px 14px;border-bottom:1px solid #1A2830;vertical-align:middle;color:#8AAABB}
.token-table tr:last-child td{border-bottom:none}
.token-table.light td:first-child{font-size:9px;font-weight:700;color:#888;width:160px}
.token-table.dark td:first-child{font-size:9px;font-weight:700;color:#4E6070;width:160px}
.swatch{display:inline-block;width:12px;height:12px;border-radius:2px;vertical-align:middle;margin-right:6px}
.swatch.bordered{border:1px solid #DDD}
.warn{display:inline-block;background:#FEF3C7;color:#92400E;font-size:8px;font-weight:700;padding:1px 5px;border-radius:2px;margin-left:4px;vertical-align:middle}
.pass{display:inline-block;background:#D1FAE5;color:#065F46;font-size:8px;font-weight:700;padding:1px 5px;border-radius:2px;margin-left:4px;vertical-align:middle}
/* ── Browser chrome ── */
.chrome{border:1.5px solid #C4C0BA;border-radius:8px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.1)}
.chrome.dark{background:#010e1e;border-color:#0d3358}
.chrome-bar{height:20px;background:#E8E6E0;border-bottom:1px solid #C4C0BA;display:flex;align-items:center;padding:0 8px;gap:4px;flex-shrink:0}
.chrome.dark .chrome-bar{background:#010a18;border-bottom-color:#0d3358}
.chrome-dot{width:6px;height:6px;border-radius:50%;background:#BDB8B1}
.chrome.dark .chrome-dot{background:#1a2a3a}
.chrome-url{flex:1;height:9px;background:#CCC8C2;border-radius:5px;margin-left:6px}
.chrome.dark .chrome-url{background:#1a2a3a}
/* ── App nav ── */
.app-nav{height:34px;background:#012851;border-top:4px solid #A1DCD8;display:flex;align-items:center;padding:0 12px;gap:10px;flex-shrink:0}
.app-logo{font-family:'Tinos',Georgia,serif;font-size:7px;font-weight:700;color:#fff;letter-spacing:.5px}
.app-link{font-size:5.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:rgba(255,255,255,.4);white-space:nowrap}
.app-link.on{color:rgba(255,255,255,.9)}
.app-nav-r{margin-left:auto;display:flex;gap:6px;align-items:center}
.app-av{width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:5px;font-weight:800;color:rgba(255,255,255,.5)}
/* ── Sub-header bar ── */
.sub-header{height:48px;background:#ffffff;border-bottom:1px solid #E4E2D7;display:flex;align-items:center;padding:0 12px;gap:6px;flex-shrink:0}
.chrome.dark .sub-header{background:#011526;border-bottom-color:#0d3358}
.back-btn{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#6b7280;flex-shrink:0}
.chrome.dark .back-btn{color:#8b97a5}
.sh-divider{width:1px;height:18px;background:#E4E2D7;flex-shrink:0;margin:0 4px}
.chrome.dark .sh-divider{background:#0d3358}
.sh-doc-title{font-family:'Tinos',Georgia,serif;font-size:10px;font-weight:700;color:#012851;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.chrome.dark .sh-doc-title{color:#f0efe9}
/* person chips in sub-header */
.sh-persons{display:flex;align-items:center;gap:5px;flex-shrink:0}
.sh-chip{display:flex;align-items:center;gap:4px}
.sh-av{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:6px;font-weight:800;color:#fff;flex-shrink:0}
.sh-name{font-size:8px;font-weight:600;color:#4b5563;white-space:nowrap}
.chrome.dark .sh-name{color:#9ca3af}
.sh-arrow{color:#A1DCD8;flex-shrink:0}
.chrome.dark .sh-arrow{color:#00c7b1}
/* INLINE PILL */
.pill{display:inline-block;background:rgba(161,220,216,.25);border:1px solid #a1dcd8;border-radius:9999px;padding:1px 8px;font-family:'Montserrat',sans-serif;font-size:7px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#012851;margin-left:5px;vertical-align:middle;line-height:1.5}
.chrome.dark .pill{background:rgba(0,199,177,.10);border-color:#00c7b1;color:#f0efe9}
/* sub-header actions */
.sh-actions{display:flex;align-items:center;gap:5px;flex-shrink:0;margin-left:8px}
.sh-btn-ghost{height:22px;padding:0 7px;border:1.5px solid #E4E2D7;border-radius:3px;font-size:6.5px;font-weight:700;color:#4b5563;display:flex;align-items:center;gap:3px;flex-shrink:0}
.chrome.dark .sh-btn-ghost{border-color:#0d3358;color:#8b97a5}
.sh-btn-primary{height:22px;padding:0 7px;background:#012851;border-radius:3px;font-size:6.5px;font-weight:700;color:#A1DCD8;display:flex;align-items:center;gap:3px;flex-shrink:0}
.chrome.dark .sh-btn-primary{background:#A1DCD8;color:#012851}
.sh-btn-icon{width:22px;height:22px;border:1.5px solid #E4E2D7;border-radius:3px;display:flex;align-items:center;justify-content:center;color:#6b7280;flex-shrink:0}
.chrome.dark .sh-btn-icon{border-color:#0d3358;color:#8b97a5}
/* ── Metadata drawer ── */
.meta-drawer{background:#ffffff;border-bottom:1px solid #E4E2D7;padding:14px 16px;flex-shrink:0}
.chrome.dark .meta-drawer{background:#011526;border-bottom-color:#0d3358}
.meta-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.meta-col-head{font-size:7px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:#6b7280;margin-bottom:8px}
.chrome.dark .meta-col-head{color:#8b97a5}
.meta-field{margin-bottom:8px}
.meta-label{font-size:7px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#6b7280;margin-bottom:3px}
.chrome.dark .meta-label{color:#8b97a5}
.meta-value{font-family:'Tinos',Georgia,serif;font-size:10px;color:#012851}
.chrome.dark .meta-value{color:#f0efe9}
/* ── Person card in metadata ── */
.person-card{display:flex;align-items:center;gap:5px;padding:3px 5px;border-radius:3px}
.p-av{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:6.5px;font-weight:800;color:#fff;flex-shrink:0}
.p-name{font-family:'Tinos',Georgia,serif;font-size:9.5px;color:#012851}
.chrome.dark .p-name{color:#f0efe9}
/* ── PDF placeholder ── */
.pdf-area{background:#d4d0c8;flex:1;display:flex;align-items:center;justify-content:center;min-height:80px}
.chrome.dark .pdf-area{background:#010e1e}
.paper{background:#FFFEF8;width:40%;box-shadow:0 2px 8px rgba(0,0,0,.14);border-radius:1px;padding:8px 10px;display:flex;flex-direction:column;gap:2px}
.chrome.dark .paper{background:#0d1820}
.pl{height:3px;background:#C4BDB0;border-radius:1px;opacity:.5;margin-bottom:2px}
.ps{height:2px;background:#C4BDB0;border-radius:1px;opacity:.28;margin-bottom:1.5px}
.chrome.dark .pl,.chrome.dark .ps{background:#1E2D3D}
/* ── Side-by-side layout ── */
.split-screens{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:16px}
.screen-lbl{font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#888;margin-bottom:8px;display:flex;align-items:center;gap:5px}
.lbl-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.cap{font-size:10px;color:#999;font-style:italic;line-height:1.6;margin-top:10px;max-width:460px}
/* ── Edge-case cards ── */
.edge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:12px}
.edge-card{background:#fff;border:1px solid #E0DDD6;border-radius:6px;overflow:hidden}
.edge-head{background:#F4F2EC;padding:8px 12px;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#888;border-bottom:1px solid #E0DDD6}
.edge-body{padding:10px 12px}
.edge-note{font-size:10.5px;color:#555;line-height:1.65;margin-top:8px}
.no-badge{font-family:'Tinos',Georgia,serif;font-size:9px;color:#aaa;font-style:italic;padding:4px 5px}
/* ── Rules / implementation table ── */
.rules{background:#fff;border:1px solid #E0DDD6;border-radius:6px;overflow:hidden}
.rules table{width:100%;border-collapse:collapse}
.rules th{background:#F4F2EC;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#888;padding:8px 12px;text-align:left;border-bottom:1px solid #E0DDD6}
.rules td{font-size:11px;color:#444;padding:8px 12px;border-bottom:1px solid #F0EEE8;vertical-align:top;line-height:1.6}
.rules tr:last-child td{border-bottom:none}
.rules td:first-child{font-size:9px;font-weight:700;color:#012851;white-space:nowrap;width:200px}
.rules td code{font-size:9px;background:#F0EFE9;padding:1px 4px;border-radius:2px;color:#555;white-space:nowrap}
/* ── Pill anatomy callout ── */
.pill-anatomy{display:flex;align-items:center;gap:20px;background:#fff;border:1.5px solid #E0DDD6;border-radius:6px;padding:18px 24px;margin-bottom:16px;flex-wrap:wrap}
.pill-demo-light{display:flex;align-items:center;gap:10px;padding:10px 16px;background:#f9f8f4;border-radius:4px}
.pill-demo-dark{display:flex;align-items:center;gap:10px;padding:10px 16px;background:#011526;border-radius:4px}
.pill-annotation{font-size:9.5px;color:#888;line-height:1.7}
.pill-annotation strong{color:#012851;font-weight:700}
/* ── Responsive preview containers ── */
.responsive-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:16px}
.responsive-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;margin-bottom:16px}
/* ── Tablet sub-header ── */
.sub-header-tablet{height:48px;background:#ffffff;border-bottom:1px solid #E4E2D7;display:flex;align-items:center;padding:0 10px;gap:6px;flex-shrink:0}
.sh-title-truncated{font-family:'Tinos',Georgia,serif;font-size:9px;font-weight:700;color:#012851;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.sh-overflow-btn{width:22px;height:22px;border:1.5px solid #E4E2D7;border-radius:3px;display:flex;align-items:center;justify-content:center;color:#6b7280;font-size:9px;font-weight:700;flex-shrink:0}
.meta-stacked{padding:12px 14px;background:#fff;border-bottom:1px solid #E4E2D7;font-size:9px}
.meta-stacked .meta-label{font-size:6.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#6b7280;margin-bottom:3px}
.meta-stacked .meta-value{font-family:'Tinos',Georgia,serif;font-size:9.5px;color:#012851;margin-bottom:10px}
.meta-stacked .meta-section-head{font-size:6.5px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:#6b7280;margin-bottom:8px}
/* ── Mobile sub-header ── */
.sub-header-mobile{height:48px;background:#ffffff;border-bottom:1px solid #E4E2D7;display:flex;align-items:center;padding:0 10px;gap:5px;flex-shrink:0}
.sh-title-mobile{font-family:'Tinos',Georgia,serif;font-size:9px;font-weight:700;color:#012851;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.meta-mobile{padding:10px 12px;background:#fff;border-bottom:1px solid #E4E2D7;font-size:8.5px}
.meta-mobile .m-label{font-size:6px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#6b7280;margin-bottom:2px;margin-top:8px}
.meta-mobile .m-label:first-child{margin-top:0}
.meta-mobile .m-value{font-family:'Tinos',Georgia,serif;font-size:9px;color:#012851;margin-bottom:2px}
.person-row-mobile{display:flex;align-items:center;gap:4px;flex-wrap:nowrap}
.person-row-mobile .p-av-sm{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:6px;font-weight:800;color:#fff;flex-shrink:0}
.person-row-mobile .p-nm{font-family:'Tinos',Georgia,serif;font-size:9px;color:#012851;white-space:nowrap}
</style>
</head>
<body>
<div class="doc">
<!-- ══ MASTHEAD ══════════════════════════════════════════════════════════════ -->
<div class="mh">
<h1>Stammbaum — Document Badge · Inline Pill Variant</h1>
<p>
Design spec for the inline relationship pill on the Document Detail page. Relationship labels appear
as <strong>inline pills directly next to each person's name</strong> — both in the 48 px sub-header bar
and in the Personen column of the 3-column metadata drawer. Example: Karl Raddatz
<span style="display:inline-block;background:rgba(161,220,216,.25);border:1px solid #a1dcd8;border-radius:9999px;padding:1px 7px;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#012851;vertical-align:middle;margin:0 2px">ELTERNTEIL</span>
→ Hans Raddatz
<span style="display:inline-block;background:rgba(161,220,216,.25);border:1px solid #a1dcd8;border-radius:9999px;padding:1px 7px;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#012851;vertical-align:middle;margin:0 2px">KIND</span>.
This is View 2 of 3 in the Stammbaum document-badge feature set.
</p>
<div class="byline">Familienarchiv · 2026-04-27 · Leonie Voss, UX Lead</div>
<div class="tag-row">
<span class="tag">Stammbaum Feature</span>
<span class="tag">View 2 of 3 — Document Badge</span>
<span class="tag">Inline Pill Variant</span>
<span class="tag">Desktop / Tablet / Mobile</span>
<span class="tag">Light + Dark</span>
</div>
</div>
<!-- ══ SECTION 1 — DESIGN TOKENS ════════════════════════════════════════════ -->
<div class="section">
<div class="sh">
<h2>1 · Design tokens</h2>
<p>All colour values used by the inline pill and its surrounding context. Light and dark themes are shown side by side. Contrast ratios are against the respective surface colour.</p>
</div>
<!-- Pill anatomy callout -->
<div class="pill-anatomy">
<div class="pill-demo-light">
<span style="font-family:'Tinos',Georgia,serif;font-size:11px;color:#012851;font-weight:700">Karl Raddatz</span>
<span style="display:inline-block;background:rgba(161,220,216,.25);border:1px solid #a1dcd8;border-radius:9999px;padding:1px 8px;font-family:'Montserrat',sans-serif;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#012851;vertical-align:middle">ELTERNTEIL</span>
</div>
<div class="pill-demo-dark">
<span style="font-family:'Tinos',Georgia,serif;font-size:11px;color:#f0efe9;font-weight:700">Karl Raddatz</span>
<span style="display:inline-block;background:rgba(0,199,177,.10);border:1px solid #00c7b1;border-radius:9999px;padding:1px 8px;font-family:'Montserrat',sans-serif;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#f0efe9;vertical-align:middle">ELTERNTEIL</span>
</div>
<div class="pill-annotation">
<strong>Pill anatomy</strong><br>
border-radius: 9999px &nbsp;·&nbsp; padding: 1px 8px<br>
font: Montserrat 9px 700 uppercase letter-spacing .07em<br>
margin-left: 8px from name span &nbsp;·&nbsp; vertical-align: middle
</div>
</div>
<div class="token-grid">
<!-- Light -->
<div class="token-table light">
<div class="token-head">Light theme — surface #ffffff</div>
<table>
<tr>
<td>Pill bg</td>
<td><span class="swatch bordered" style="background:rgba(161,220,216,.25)"></span>rgba(161,220,216,.25) — near-white on white<span class="pass">~14:1 AAA ✓ (text on near-white)</span></td>
</tr>
<tr>
<td>Pill border</td>
<td><span class="swatch" style="background:#a1dcd8"></span>#a1dcd8 — mint accent outline</td>
</tr>
<tr>
<td>Pill text</td>
<td><span class="swatch" style="background:#012851"></span>#012851 — navy ink<span class="pass">14.5:1 AAA ✓</span></td>
</tr>
<tr>
<td>Person name</td>
<td><span class="swatch" style="background:#4b5563"></span>#4b5563 — Montserrat 11px (sub-header)</td>
</tr>
<tr>
<td>Meta person name</td>
<td><span class="swatch" style="background:#012851"></span>#012851 — Tinos 9.5px (metadata drawer)</td>
</tr>
<tr>
<td>Sub-header bg</td>
<td><span class="swatch bordered" style="background:#ffffff"></span>#ffffff</td>
</tr>
<tr>
<td>Sub-header border</td>
<td><span class="swatch" style="background:#e4e2d7"></span>#e4e2d7</td>
</tr>
<tr>
<td>Arrow (decorative)</td>
<td><span class="swatch" style="background:#a1dcd8"></span>#a1dcd8 — <code>aria-hidden</code><span class="warn">non-text only</span></td>
</tr>
<tr>
<td>Meta label</td>
<td><span class="swatch" style="background:#6b7280"></span>#6b7280 — Montserrat 9px 700 uppercase<span class="pass">4.8:1 AA ✓</span></td>
</tr>
<tr>
<td>Meta value</td>
<td><span class="swatch" style="background:#012851"></span>#012851 — Tinos 13px<span class="pass">14.5:1 AAA ✓</span></td>
</tr>
<tr>
<td>Doc title</td>
<td>Tinos serif 18px · #012851</td>
</tr>
<tr>
<td>Avatar KR</td>
<td><span class="swatch" style="background:#012851"></span>#012851 — navy</td>
</tr>
<tr>
<td>Avatar HR</td>
<td><span class="swatch" style="background:#5a2d6f"></span>#5a2d6f — purple</td>
</tr>
</table>
</div>
<!-- Dark -->
<div class="token-table dark">
<div class="token-head">Dark theme — surface #011526</div>
<table>
<tr>
<td>Pill bg</td>
<td><span class="swatch bordered" style="background:rgba(0,199,177,.10);border-color:#0d3358"></span>rgba(0,199,177,.10) — dark teal wash<span class="pass" style="background:rgba(209,250,229,.15);color:#6EE7B7;border:none">passes AA ✓</span></td>
</tr>
<tr>
<td>Pill border</td>
<td><span class="swatch" style="background:#00c7b1"></span>#00c7b1 — turquoise</td>
</tr>
<tr>
<td>Pill text</td>
<td><span class="swatch" style="background:#f0efe9"></span>#f0efe9 — warm white<span class="pass" style="background:rgba(209,250,229,.15);color:#6EE7B7;border:none">14.5:1 AAA ✓</span></td>
</tr>
<tr>
<td>Person name</td>
<td><span class="swatch" style="background:#9ca3af"></span>#9ca3af — (sub-header)</td>
</tr>
<tr>
<td>Meta person name</td>
<td><span class="swatch" style="background:#f0efe9"></span>#f0efe9 — (metadata drawer)</td>
</tr>
<tr>
<td>Sub-header bg</td>
<td><span class="swatch" style="background:#011526;border:1px solid #0d3358"></span>#011526</td>
</tr>
<tr>
<td>Sub-header border</td>
<td><span class="swatch" style="background:#0d3358"></span>#0d3358</td>
</tr>
<tr>
<td>Arrow (decorative)</td>
<td><span class="swatch" style="background:#00c7b1"></span>#00c7b1 — <code>aria-hidden</code><span class="warn" style="background:rgba(254,243,199,.1);color:#FDE68A;border:none">non-text only</span></td>
</tr>
<tr>
<td>Meta label</td>
<td><span class="swatch" style="background:#8b97a5"></span>#8b97a5<span class="pass" style="background:rgba(209,250,229,.15);color:#6EE7B7;border:none">7.1:1 AAA ✓</span></td>
</tr>
<tr>
<td>Meta value</td>
<td><span class="swatch" style="background:#f0efe9"></span>#f0efe9<span class="pass" style="background:rgba(209,250,229,.15);color:#6EE7B7;border:none">14.5:1 AAA ✓</span></td>
</tr>
<tr>
<td>Doc title</td>
<td>Tinos serif 18px · #f0efe9</td>
</tr>
</table>
</div>
</div>
<p style="font-size:10.5px;color:#888;font-style:italic;margin-top:6px">
⚠ Pill background rgba(161,220,216,.25) is nearly transparent on white — the effective contrast for the text is calculated against the near-white composite, yielding ~14:1.
The arrow between sender and receiver chips in the sub-header is <code>aria-hidden="true"</code> — directional meaning is conveyed by DOM order (sender before receiver) and the visual left-to-right reading order.
</p>
</div>
<!-- ══ SECTION 2 — DESKTOP LIGHT & DARK ═════════════════════════════════════ -->
<div class="section">
<div class="sh">
<h2>2 · Desktop (1280 px) — light &amp; dark</h2>
<p>
Full document detail page at ~65% scale. Sub-header bar (48 px) shows inline pills next to avatar chips.
Metadata drawer is open, showing pills next to person names in the Personen column.
Both light and dark themes shown side by side.
</p>
</div>
<div class="split-screens">
<!-- ── LIGHT ── -->
<div>
<div class="screen-lbl"><span class="lbl-dot" style="background:#A1DCD8;border:1px solid #ccc"></span>Light theme</div>
<div class="chrome">
<div class="chrome-bar"><div class="chrome-dot"></div><div class="chrome-dot"></div><div class="chrome-dot"></div><div class="chrome-url"></div></div>
<!-- App header -->
<div class="app-nav">
<div class="app-logo">FAMILIENARCHIV</div>
<div style="width:1px;height:14px;background:rgba(255,255,255,.12);margin:0 4px;flex-shrink:0"></div>
<div class="app-link on">Dokumente</div>
<div class="app-link">Personen</div>
<div class="app-link">Stammbaum</div>
<div class="app-link">Admin</div>
<div class="app-nav-r"><div class="app-av">MR</div></div>
</div>
<!-- Sub-header -->
<div class="sub-header">
<div class="back-btn">
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
</div>
<div class="sh-divider"></div>
<div class="sh-doc-title">W-0311 · Divacca</div>
<div class="sh-persons">
<!-- Sender chip + pill -->
<div class="sh-chip">
<div class="sh-av" style="background:#012851">KR</div>
<span class="sh-name">Karl Raddatz</span>
<span class="pill">ELTERNTEIL</span>
</div>
<!-- Arrow -->
<svg class="sh-arrow" width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5-5 5M6 12h12"/></svg>
<!-- Receiver chip + pill -->
<div class="sh-chip">
<div class="sh-av" style="background:#5a2d6f">HR</div>
<span class="sh-name">Hans Raddatz</span>
<span class="pill">KIND</span>
</div>
</div>
<div class="sh-actions">
<div class="sh-btn-ghost">Details ▾</div>
<div class="sh-btn-ghost">Transkribieren</div>
<div class="sh-btn-primary">Bearbeiten</div>
<div class="sh-btn-icon">
<svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
</div>
</div>
</div>
<!-- Metadata drawer -->
<div class="meta-drawer">
<div class="meta-grid">
<!-- Col 1: Details -->
<div>
<div class="meta-col-head">Details</div>
<div class="meta-field">
<div class="meta-label">Datum</div>
<div class="meta-value">—</div>
</div>
<div class="meta-field">
<div class="meta-label">Ort</div>
<div class="meta-value">Divacca</div>
</div>
<div class="meta-field">
<div class="meta-label">Status</div>
<div class="meta-value">Hochgeladen</div>
</div>
</div>
<!-- Col 2: Personen with inline pills -->
<div>
<div class="meta-col-head">Personen</div>
<div class="meta-field">
<div class="meta-label">Absender</div>
<div class="person-card">
<div class="p-av" style="background:#012851">KR</div>
<span class="p-name">Karl Raddatz</span>
<span class="pill">ELTERNTEIL</span>
</div>
</div>
<div class="meta-field">
<div class="meta-label">Empfänger</div>
<div class="person-card">
<div class="p-av" style="background:#5a2d6f">HR</div>
<span class="p-name">Hans Raddatz</span>
<span class="pill">KIND</span>
</div>
</div>
</div>
<!-- Col 3: Tags -->
<div>
<div class="meta-col-head">Schlagwörter</div>
<div style="display:flex;flex-wrap:wrap;gap:4px">
<span style="background:#f5f4ef;padding:2px 7px;border-radius:2px;font-size:7.5px;font-weight:800;text-transform:uppercase;color:#012851">Familie</span>
<span style="background:#f5f4ef;padding:2px 7px;border-radius:2px;font-size:7.5px;font-weight:800;text-transform:uppercase;color:#012851">1923</span>
<span style="background:#f5f4ef;padding:2px 7px;border-radius:2px;font-size:7.5px;font-weight:800;text-transform:uppercase;color:#012851">Berlin</span>
</div>
</div>
</div>
</div>
<!-- PDF area -->
<div class="pdf-area">
<div class="paper"><div class="pl"></div><div class="ps"></div><div class="pl" style="width:80%"></div><div class="ps" style="width:65%"></div><div class="pl"></div><div class="ps" style="width:75%"></div><div class="pl" style="width:88%"></div></div>
</div>
</div>
<p class="cap">Light. Pills appear in both the sub-header chip row and the metadata Personen column. Arrow between chips is mint-coloured and aria-hidden.</p>
</div>
<!-- ── DARK ── -->
<div>
<div class="screen-lbl"><span class="lbl-dot" style="background:#1a2a3a"></span>Dark theme</div>
<div class="chrome dark">
<div class="chrome-bar"><div class="chrome-dot"></div><div class="chrome-dot"></div><div class="chrome-dot"></div><div class="chrome-url"></div></div>
<div class="app-nav">
<div class="app-logo">FAMILIENARCHIV</div>
<div style="width:1px;height:14px;background:rgba(255,255,255,.12);margin:0 4px;flex-shrink:0"></div>
<div class="app-link on">Dokumente</div>
<div class="app-link">Personen</div>
<div class="app-link">Stammbaum</div>
<div class="app-link">Admin</div>
<div class="app-nav-r"><div class="app-av">MR</div></div>
</div>
<div class="sub-header">
<div class="back-btn">
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
</div>
<div class="sh-divider"></div>
<div class="sh-doc-title">W-0311 · Divacca</div>
<div class="sh-persons">
<div class="sh-chip">
<div class="sh-av" style="background:#012851">KR</div>
<span class="sh-name">Karl Raddatz</span>
<span class="pill">ELTERNTEIL</span>
</div>
<svg class="sh-arrow" width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5-5 5M6 12h12"/></svg>
<div class="sh-chip">
<div class="sh-av" style="background:#5a2d6f">HR</div>
<span class="sh-name">Hans Raddatz</span>
<span class="pill">KIND</span>
</div>
</div>
<div class="sh-actions">
<div class="sh-btn-ghost">Details ▾</div>
<div class="sh-btn-ghost">Transkribieren</div>
<div class="sh-btn-primary">Bearbeiten</div>
<div class="sh-btn-icon">
<svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
</div>
</div>
</div>
<div class="meta-drawer">
<div class="meta-grid">
<div>
<div class="meta-col-head">Details</div>
<div class="meta-field">
<div class="meta-label">Datum</div>
<div class="meta-value">—</div>
</div>
<div class="meta-field">
<div class="meta-label">Ort</div>
<div class="meta-value">Divacca</div>
</div>
<div class="meta-field">
<div class="meta-label">Status</div>
<div class="meta-value">Hochgeladen</div>
</div>
</div>
<div>
<div class="meta-col-head">Personen</div>
<div class="meta-field">
<div class="meta-label">Absender</div>
<div class="person-card">
<div class="p-av" style="background:#012851">KR</div>
<span class="p-name">Karl Raddatz</span>
<span class="pill">ELTERNTEIL</span>
</div>
</div>
<div class="meta-field">
<div class="meta-label">Empfänger</div>
<div class="person-card">
<div class="p-av" style="background:#5a2d6f">HR</div>
<span class="p-name">Hans Raddatz</span>
<span class="pill">KIND</span>
</div>
</div>
</div>
<div>
<div class="meta-col-head">Schlagwörter</div>
<div style="display:flex;flex-wrap:wrap;gap:4px">
<span style="background:#011a30;padding:2px 7px;border-radius:2px;font-size:7.5px;font-weight:800;text-transform:uppercase;color:#A1DCD8">Familie</span>
<span style="background:#011a30;padding:2px 7px;border-radius:2px;font-size:7.5px;font-weight:800;text-transform:uppercase;color:#A1DCD8">1923</span>
<span style="background:#011a30;padding:2px 7px;border-radius:2px;font-size:7.5px;font-weight:800;text-transform:uppercase;color:#A1DCD8">Berlin</span>
</div>
</div>
</div>
</div>
<div class="pdf-area">
<div class="paper"><div class="pl"></div><div class="ps"></div><div class="pl" style="width:80%"></div><div class="ps" style="width:65%"></div><div class="pl"></div><div class="ps" style="width:75%"></div><div class="pl" style="width:88%"></div></div>
</div>
</div>
<p class="cap">Dark. Pills flip to rgba(0,199,177,.10) bg, #00c7b1 border, #f0efe9 text. Sub-header and metadata surfaces both use #011526.</p>
</div>
</div>
</div>
<!-- ══ SECTION 3 — TABLET (768 px) ══════════════════════════════════════════ -->
<div class="section">
<div class="sh">
<h2>3 · Tablet (768 px)</h2>
<p>
The 3-column metadata grid collapses to a single stacked column. The sub-header truncates the document
title and moves secondary actions behind a "…" overflow button. Pills remain inline next to person names in both locations.
</p>
</div>
<div class="responsive-grid">
<!-- Tablet light -->
<div>
<div class="screen-lbl"><span class="lbl-dot" style="background:#A1DCD8;border:1px solid #ccc"></span>Tablet · 768 px · Light</div>
<div class="chrome" style="max-width:400px">
<div class="chrome-bar"><div class="chrome-dot"></div><div class="chrome-dot"></div><div class="chrome-dot"></div><div class="chrome-url"></div></div>
<div class="app-nav">
<div class="app-logo">FAMILIENARCHIV</div>
<div class="app-nav-r"><div class="app-av">MR</div></div>
</div>
<!-- Tablet sub-header: back + title truncated + overflow -->
<div class="sub-header-tablet">
<div class="back-btn" style="width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:#6b7280">
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
</div>
<div style="width:1px;height:16px;background:#E4E2D7;margin:0 5px;flex-shrink:0"></div>
<div class="sh-title-truncated">W-0311 · Divacca</div>
<div style="display:flex;gap:4px;flex-shrink:0">
<div class="sh-btn-primary" style="height:22px;padding:0 7px;background:#012851;border-radius:3px;font-size:6.5px;font-weight:700;color:#A1DCD8;display:flex;align-items:center">Bearbeiten</div>
<div class="sh-overflow-btn">···</div>
</div>
</div>
<!-- Stacked metadata — Personen section with pills -->
<div class="meta-stacked">
<div class="meta-section-head">Personen</div>
<div style="margin-bottom:6px">
<div class="meta-label">Absender</div>
<div style="display:flex;align-items:center;gap:4px;padding:2px 0">
<div class="p-av" style="background:#012851;width:18px;height:18px;font-size:6px">KR</div>
<span style="font-family:'Tinos',serif;font-size:9px;color:#012851">Karl Raddatz</span>
<span style="display:inline-block;background:rgba(161,220,216,.25);border:1px solid #a1dcd8;border-radius:9999px;padding:1px 6px;font-family:'Montserrat',sans-serif;font-size:6.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#012851;vertical-align:middle;margin-left:4px">ELTERNTEIL</span>
</div>
</div>
<div style="margin-bottom:10px">
<div class="meta-label">Empfänger</div>
<div style="display:flex;align-items:center;gap:4px;padding:2px 0">
<div class="p-av" style="background:#5a2d6f;width:18px;height:18px;font-size:6px">HR</div>
<span style="font-family:'Tinos',serif;font-size:9px;color:#012851">Hans Raddatz</span>
<span style="display:inline-block;background:rgba(161,220,216,.25);border:1px solid #a1dcd8;border-radius:9999px;padding:1px 6px;font-family:'Montserrat',sans-serif;font-size:6.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#012851;vertical-align:middle;margin-left:4px">KIND</span>
</div>
</div>
<div class="meta-section-head">Details</div>
<div class="meta-label">Ort</div>
<div class="meta-value">Divacca</div>
<div class="meta-label" style="margin-top:6px">Status</div>
<div class="meta-value">Hochgeladen</div>
<div class="meta-label" style="margin-top:6px">Schlagwörter</div>
<div style="display:flex;gap:4px;margin-top:3px">
<span style="background:#f5f4ef;padding:2px 6px;border-radius:2px;font-size:7px;font-weight:800;text-transform:uppercase;color:#012851">Familie</span>
<span style="background:#f5f4ef;padding:2px 6px;border-radius:2px;font-size:7px;font-weight:800;text-transform:uppercase;color:#012851">1923</span>
</div>
</div>
<div class="pdf-area" style="min-height:60px">
<div class="paper" style="width:55%"><div class="pl"></div><div class="ps"></div><div class="pl" style="width:80%"></div><div class="ps" style="width:65%"></div></div>
</div>
</div>
<p class="cap">Tablet light. 3-column metadata collapses to single column. Pills stay inline with names. Sub-header shows only title + primary action + overflow menu.</p>
</div>
<!-- Tablet dark -->
<div>
<div class="screen-lbl"><span class="lbl-dot" style="background:#1a2a3a"></span>Tablet · 768 px · Dark</div>
<div class="chrome dark" style="max-width:400px">
<div class="chrome-bar"><div class="chrome-dot"></div><div class="chrome-dot"></div><div class="chrome-dot"></div><div class="chrome-url"></div></div>
<div class="app-nav">
<div class="app-logo">FAMILIENARCHIV</div>
<div class="app-nav-r"><div class="app-av">MR</div></div>
</div>
<div class="sub-header-tablet" style="background:#011526;border-bottom:1px solid #0d3358">
<div class="back-btn" style="width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:#8b97a5">
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
</div>
<div style="width:1px;height:16px;background:#0d3358;margin:0 5px;flex-shrink:0"></div>
<div style="font-family:'Tinos',serif;font-size:9px;font-weight:700;color:#f0efe9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0">W-0311 · Divacca</div>
<div style="display:flex;gap:4px;flex-shrink:0">
<div style="height:22px;padding:0 7px;background:#A1DCD8;border-radius:3px;font-size:6.5px;font-weight:700;color:#012851;display:flex;align-items:center">Bearbeiten</div>
<div style="width:22px;height:22px;border:1.5px solid #0d3358;border-radius:3px;display:flex;align-items:center;justify-content:center;color:#8b97a5;font-size:9px;font-weight:700">···</div>
</div>
</div>
<div style="padding:12px 14px;background:#011526;border-bottom:1px solid #0d3358;font-size:9px">
<div style="font-size:6.5px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:#8b97a5;margin-bottom:8px">Personen</div>
<div style="margin-bottom:6px">
<div style="font-size:6.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#8b97a5;margin-bottom:3px">Absender</div>
<div style="display:flex;align-items:center;gap:4px;padding:2px 0">
<div style="width:18px;height:18px;border-radius:50%;background:#012851;display:flex;align-items:center;justify-content:center;font-size:6px;font-weight:800;color:#fff;flex-shrink:0">KR</div>
<span style="font-family:'Tinos',serif;font-size:9px;color:#f0efe9">Karl Raddatz</span>
<span style="display:inline-block;background:rgba(0,199,177,.10);border:1px solid #00c7b1;border-radius:9999px;padding:1px 6px;font-family:'Montserrat',sans-serif;font-size:6.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#f0efe9;vertical-align:middle;margin-left:4px">ELTERNTEIL</span>
</div>
</div>
<div style="margin-bottom:10px">
<div style="font-size:6.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#8b97a5;margin-bottom:3px">Empfänger</div>
<div style="display:flex;align-items:center;gap:4px;padding:2px 0">
<div style="width:18px;height:18px;border-radius:50%;background:#5a2d6f;display:flex;align-items:center;justify-content:center;font-size:6px;font-weight:800;color:#fff;flex-shrink:0">HR</div>
<span style="font-family:'Tinos',serif;font-size:9px;color:#f0efe9">Hans Raddatz</span>
<span style="display:inline-block;background:rgba(0,199,177,.10);border:1px solid #00c7b1;border-radius:9999px;padding:1px 6px;font-family:'Montserrat',sans-serif;font-size:6.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#f0efe9;vertical-align:middle;margin-left:4px">KIND</span>
</div>
</div>
<div style="font-size:6.5px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:#8b97a5;margin-bottom:8px">Details</div>
<div style="font-size:6.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#8b97a5;margin-bottom:3px">Ort</div>
<div style="font-family:'Tinos',serif;font-size:9px;color:#f0efe9;margin-bottom:6px">Divacca</div>
<div style="font-size:6.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#8b97a5;margin-bottom:3px">Status</div>
<div style="font-family:'Tinos',serif;font-size:9px;color:#f0efe9;margin-bottom:6px">Hochgeladen</div>
<div style="font-size:6.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#8b97a5;margin-bottom:3px">Schlagwörter</div>
<div style="display:flex;gap:4px;margin-top:3px">
<span style="background:#011a30;padding:2px 6px;border-radius:2px;font-size:7px;font-weight:800;text-transform:uppercase;color:#A1DCD8">Familie</span>
<span style="background:#011a30;padding:2px 6px;border-radius:2px;font-size:7px;font-weight:800;text-transform:uppercase;color:#A1DCD8">1923</span>
</div>
</div>
<div class="pdf-area" style="min-height:60px">
<div class="paper" style="width:55%"><div class="pl"></div><div class="ps"></div><div class="pl" style="width:80%"></div><div class="ps" style="width:65%"></div></div>
</div>
</div>
<p class="cap">Tablet dark. Same collapse behaviour. Dark pill tokens apply throughout.</p>
</div>
</div>
</div>
<!-- ══ SECTION 4 — MOBILE (375 px) ══════════════════════════════════════════ -->
<div class="section">
<div class="sh">
<h2>4 · Mobile (375 px)</h2>
<p>
Sub-header is simplified to back arrow and document title only — no person chips in the bar.
Metadata is full-width single column. Each person row is <code>flex; align-items: center; flex-wrap: nowrap</code>
— avatar, name, and pill on one line. If the name is very long the row wraps gracefully before the pill.
Only primary action buttons are shown.
</p>
</div>
<div class="responsive-grid">
<!-- Mobile light -->
<div>
<div class="screen-lbl"><span class="lbl-dot" style="background:#A1DCD8;border:1px solid #ccc"></span>Mobile · 375 px · Light</div>
<div class="chrome" style="max-width:260px">
<div class="chrome-bar"><div class="chrome-dot"></div><div class="chrome-dot"></div><div class="chrome-dot"></div><div class="chrome-url"></div></div>
<div class="app-nav">
<div class="app-logo">FAMILIENARCHIV</div>
<div class="app-nav-r"><div class="app-av">MR</div></div>
</div>
<!-- Mobile sub-header: back + title only -->
<div class="sub-header-mobile">
<div class="back-btn" style="width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:#6b7280;flex-shrink:0">
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
</div>
<div style="width:1px;height:16px;background:#E4E2D7;margin:0 5px;flex-shrink:0"></div>
<div class="sh-title-mobile">W-0311 · Divacca</div>
<div style="height:22px;padding:0 7px;background:#012851;border-radius:3px;font-size:6.5px;font-weight:700;color:#A1DCD8;display:flex;align-items:center;flex-shrink:0">Bearbeiten</div>
</div>
<!-- Mobile metadata: full-width stacked -->
<div class="meta-mobile">
<div class="m-label">Absender</div>
<div class="person-row-mobile">
<div class="p-av-sm" style="background:#012851">KR</div>
<span class="p-nm">Karl Raddatz</span>
<span style="display:inline-block;background:rgba(161,220,216,.25);border:1px solid #a1dcd8;border-radius:9999px;padding:1px 5px;font-family:'Montserrat',sans-serif;font-size:6px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#012851;vertical-align:middle;margin-left:4px;white-space:nowrap">ELTERNTEIL</span>
</div>
<div class="m-label">Empfänger</div>
<div class="person-row-mobile">
<div class="p-av-sm" style="background:#5a2d6f">HR</div>
<span class="p-nm">Hans Raddatz</span>
<span style="display:inline-block;background:rgba(161,220,216,.25);border:1px solid #a1dcd8;border-radius:9999px;padding:1px 5px;font-family:'Montserrat',sans-serif;font-size:6px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#012851;vertical-align:middle;margin-left:4px;white-space:nowrap">KIND</span>
</div>
<div class="m-label">Ort</div>
<div class="m-value">Divacca</div>
<div class="m-label">Status</div>
<div class="m-value">Hochgeladen</div>
<div class="m-label">Schlagwörter</div>
<div style="display:flex;gap:3px;margin-top:3px;flex-wrap:wrap">
<span style="background:#f5f4ef;padding:2px 5px;border-radius:2px;font-size:6.5px;font-weight:800;text-transform:uppercase;color:#012851">Familie</span>
<span style="background:#f5f4ef;padding:2px 5px;border-radius:2px;font-size:6.5px;font-weight:800;text-transform:uppercase;color:#012851">1923</span>
<span style="background:#f5f4ef;padding:2px 5px;border-radius:2px;font-size:6.5px;font-weight:800;text-transform:uppercase;color:#012851">Berlin</span>
</div>
</div>
<div class="pdf-area" style="min-height:60px">
<div class="paper" style="width:60%"><div class="pl"></div><div class="ps"></div><div class="pl" style="width:78%"></div><div class="ps" style="width:62%"></div></div>
</div>
</div>
<p class="cap">Mobile light. No chips in sub-header — only title + primary action. Person rows: avatar + name + pill, flex-wrap:nowrap. Pill text drops to 6px to fit.</p>
</div>
<!-- Mobile dark -->
<div>
<div class="screen-lbl"><span class="lbl-dot" style="background:#1a2a3a"></span>Mobile · 375 px · Dark</div>
<div class="chrome dark" style="max-width:260px">
<div class="chrome-bar"><div class="chrome-dot"></div><div class="chrome-dot"></div><div class="chrome-dot"></div><div class="chrome-url"></div></div>
<div class="app-nav">
<div class="app-logo">FAMILIENARCHIV</div>
<div class="app-nav-r"><div class="app-av">MR</div></div>
</div>
<div style="height:48px;background:#011526;border-bottom:1px solid #0d3358;display:flex;align-items:center;padding:0 10px;gap:5px;flex-shrink:0">
<div style="width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:#8b97a5;flex-shrink:0">
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
</div>
<div style="width:1px;height:16px;background:#0d3358;margin:0 5px;flex-shrink:0"></div>
<div style="font-family:'Tinos',serif;font-size:9px;font-weight:700;color:#f0efe9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0">W-0311 · Divacca</div>
<div style="height:22px;padding:0 7px;background:#A1DCD8;border-radius:3px;font-size:6.5px;font-weight:700;color:#012851;display:flex;align-items:center;flex-shrink:0">Bearbeiten</div>
</div>
<div style="padding:10px 12px;background:#011526;border-bottom:1px solid #0d3358;font-size:8.5px">
<div style="font-size:6px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#8b97a5;margin-bottom:2px">Absender</div>
<div style="display:flex;align-items:center;gap:4px;flex-wrap:nowrap;margin-bottom:2px">
<div style="width:18px;height:18px;border-radius:50%;background:#012851;display:flex;align-items:center;justify-content:center;font-size:6px;font-weight:800;color:#fff;flex-shrink:0">KR</div>
<span style="font-family:'Tinos',serif;font-size:9px;color:#f0efe9;white-space:nowrap">Karl Raddatz</span>
<span style="display:inline-block;background:rgba(0,199,177,.10);border:1px solid #00c7b1;border-radius:9999px;padding:1px 5px;font-family:'Montserrat',sans-serif;font-size:6px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#f0efe9;vertical-align:middle;margin-left:4px;white-space:nowrap">ELTERNTEIL</span>
</div>
<div style="font-size:6px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#8b97a5;margin-bottom:2px;margin-top:6px">Empfänger</div>
<div style="display:flex;align-items:center;gap:4px;flex-wrap:nowrap;margin-bottom:8px">
<div style="width:18px;height:18px;border-radius:50%;background:#5a2d6f;display:flex;align-items:center;justify-content:center;font-size:6px;font-weight:800;color:#fff;flex-shrink:0">HR</div>
<span style="font-family:'Tinos',serif;font-size:9px;color:#f0efe9;white-space:nowrap">Hans Raddatz</span>
<span style="display:inline-block;background:rgba(0,199,177,.10);border:1px solid #00c7b1;border-radius:9999px;padding:1px 5px;font-family:'Montserrat',sans-serif;font-size:6px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#f0efe9;vertical-align:middle;margin-left:4px;white-space:nowrap">KIND</span>
</div>
<div style="font-size:6px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#8b97a5;margin-bottom:2px">Ort</div>
<div style="font-family:'Tinos',serif;font-size:9px;color:#f0efe9;margin-bottom:6px">Divacca</div>
<div style="font-size:6px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#8b97a5;margin-bottom:2px">Status</div>
<div style="font-family:'Tinos',serif;font-size:9px;color:#f0efe9;margin-bottom:6px">Hochgeladen</div>
<div style="font-size:6px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#8b97a5;margin-bottom:3px">Schlagwörter</div>
<div style="display:flex;gap:3px;margin-top:3px;flex-wrap:wrap">
<span style="background:#011a30;padding:2px 5px;border-radius:2px;font-size:6.5px;font-weight:800;text-transform:uppercase;color:#A1DCD8">Familie</span>
<span style="background:#011a30;padding:2px 5px;border-radius:2px;font-size:6.5px;font-weight:800;text-transform:uppercase;color:#A1DCD8">1923</span>
</div>
</div>
<div class="pdf-area" style="min-height:60px">
<div class="paper" style="width:60%"><div class="pl"></div><div class="ps"></div><div class="pl" style="width:78%"></div><div class="ps" style="width:62%"></div></div>
</div>
</div>
<p class="cap">Mobile dark. Pill tokens #00c7b1/#f0efe9 at reduced 6px font — still passes AA on dark surface.</p>
</div>
</div>
</div>
<!-- ══ SECTION 5 — EDGE CASES ════════════════════════════════════════════════ -->
<div class="section">
<div class="sh">
<h2>5 · Edge cases — when no pill is rendered</h2>
<p>Three cases where the pill is silently omitted. The person name renders as normal — no gap, no placeholder.</p>
</div>
<div class="edge-grid">
<!-- Edge 1: no family relationship -->
<div class="edge-card">
<div class="edge-head">No family relationship → no pill</div>
<div class="edge-body">
<div class="meta-field">
<div class="meta-label" style="font-size:7px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#6b7280;margin-bottom:3px">Absender</div>
<div style="display:flex;align-items:center;gap:4px;padding:2px 0">
<div class="p-av" style="background:#012851">KR</div>
<span style="font-family:'Tinos',serif;font-size:9.5px;color:#012851">Karl Raddatz</span>
<!-- no pill -->
</div>
</div>
<div class="meta-field">
<div class="meta-label" style="font-size:7px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#6b7280;margin-bottom:3px">Empfänger</div>
<div style="display:flex;align-items:center;gap:4px;padding:2px 0">
<div class="p-av" style="background:#888">ME</div>
<span style="font-family:'Tinos',serif;font-size:9.5px;color:#012851">Maria Engel</span>
<!-- no pill -->
</div>
</div>
<div class="no-badge">— no pill —</div>
<div class="edge-note"><code style="font-size:9px;background:#F0EFE9;padding:1px 4px;border-radius:2px">inferredRelationship === null</code> because the backend returns 404 (no kinship path). Name renders without trailing pill.</div>
</div>
</div>
<!-- Edge 2: social relationship (Kollegen) → pill shows label -->
<div class="edge-card">
<div class="edge-head">Social relationship (Kollegen) → pill shows label</div>
<div class="edge-body">
<div class="meta-field">
<div class="meta-label" style="font-size:7px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#6b7280;margin-bottom:3px">Absender</div>
<div style="display:flex;align-items:center;gap:4px;padding:2px 0">
<div class="p-av" style="background:#012851">KR</div>
<span style="font-family:'Tinos',serif;font-size:9.5px;color:#012851">Karl Raddatz</span>
<span style="display:inline-block;background:rgba(161,220,216,.25);border:1px solid #a1dcd8;border-radius:9999px;padding:1px 6px;font-family:'Montserrat',sans-serif;font-size:7px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#012851;vertical-align:middle;margin-left:4px">KOLLEGE</span>
</div>
</div>
<div class="meta-field">
<div class="meta-label" style="font-size:7px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#6b7280;margin-bottom:3px">Empfänger</div>
<div style="display:flex;align-items:center;gap:4px;padding:2px 0">
<div class="p-av" style="background:#3d6b5a">FW</div>
<span style="font-family:'Tinos',serif;font-size:9.5px;color:#012851">Fritz Weber</span>
<span style="display:inline-block;background:rgba(161,220,216,.25);border:1px solid #a1dcd8;border-radius:9999px;padding:1px 6px;font-family:'Montserrat',sans-serif;font-size:7px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#012851;vertical-align:middle;margin-left:4px">KOLLEGE</span>
</div>
</div>
<div class="edge-note">Non-family relationships (Kollege, Freund, etc.) returned by the inference endpoint still render as pills. The pill component is label-agnostic — it renders whatever <code style="font-size:9px;background:#F0EFE9;padding:1px 4px;border-radius:2px">inferredRelationship</code> provides.</div>
</div>
</div>
<!-- Edge 3: multiple receivers → no pill -->
<div class="edge-card">
<div class="edge-head">Multiple receivers → no pill</div>
<div class="edge-body">
<div class="meta-field">
<div class="meta-label" style="font-size:7px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#6b7280;margin-bottom:3px">Absender</div>
<div style="display:flex;align-items:center;gap:4px;padding:2px 0">
<div class="p-av" style="background:#012851">KR</div>
<span style="font-family:'Tinos',serif;font-size:9.5px;color:#012851">Karl Raddatz</span>
</div>
</div>
<div class="meta-field">
<div class="meta-label" style="font-size:7px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#6b7280;margin-bottom:3px">Empfänger</div>
<div style="display:flex;align-items:center;gap:4px;padding:2px 0">
<div class="p-av" style="background:#5a2d6f">HR</div>
<span style="font-family:'Tinos',serif;font-size:9.5px;color:#012851">Hans Raddatz</span>
</div>
<div style="display:flex;align-items:center;gap:4px;padding:2px 0">
<div class="p-av" style="background:#6a7a52">ER</div>
<span style="font-family:'Tinos',serif;font-size:9.5px;color:#012851">Elfriede Raddatz</span>
</div>
</div>
<div class="no-badge">— no pill —</div>
<div class="edge-note"><code style="font-size:9px;background:#F0EFE9;padding:1px 4px;border-radius:2px">receivers.length &gt; 1</code> — inference endpoint is never called, <code>inferredRelationship</code> is <code>null</code>. No pill on any person chip.</div>
</div>
</div>
</div>
</div>
<!-- ══ SECTION 6 — IMPLEMENTATION REFERENCE TABLE ═══════════════════════════ -->
<div class="section">
<div class="sh">
<h2>6 · Implementation reference</h2>
<p>Exact CSS/Tailwind values for every element of the pill and its context. Use these as the ground truth during implementation review.</p>
</div>
<div class="rules">
<table>
<thead>
<tr>
<th>Element</th>
<th>Tailwind / CSS</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Inline pill (light)</td>
<td><code>rounded-full border border-[#a1dcd8] bg-[rgba(161,220,216,.25)] px-2 py-0.5 text-[9px] font-bold uppercase tracking-[.07em] text-[#012851] ml-2 align-middle inline</code></td>
<td>Montserrat 9px 700. <code>ml-2</code> = 8px from name span. <code>vertical-align: middle</code> aligns cap-height to person name.</td>
</tr>
<tr>
<td>Inline pill (dark)</td>
<td><code>dark:bg-[rgba(0,199,177,.10)] dark:border-[#00c7b1] dark:text-[#f0efe9]</code></td>
<td>All three dark overrides applied together. Rest of pill class unchanged.</td>
</tr>
<tr>
<td>Person name span</td>
<td><code>font-sans text-[11px] text-[#4b5563] dark:text-[#9ca3af]</code> (sub-header) or <code>font-serif text-[9.5px] text-ink dark:text-[#f0efe9]</code> (metadata)</td>
<td>Name and pill share a <code>flex items-center gap-0</code> wrapper. Pill is the immediate next sibling of the name <code>&lt;span&gt;</code>.</td>
</tr>
<tr>
<td>Sub-header chip area</td>
<td><code>flex items-center gap-1.5</code></td>
<td>Wraps one sender chip + arrow + one receiver chip. Placed after the doc-title block, before action buttons.</td>
</tr>
<tr>
<td>Chip (avatar + name + pill)</td>
<td><code>flex items-center gap-1</code></td>
<td>Avatar, name span, and pill as three siblings inside the chip div.</td>
</tr>
<tr>
<td>Arrow between chips (sub-header)</td>
<td><code>h-2.5 w-2.5 shrink-0 text-[#a1dcd8] dark:text-[#00c7b1]</code> with <code>aria-hidden="true"</code></td>
<td>Arrow SVG carries no semantic information. DOM order (sender chip before receiver chip) conveys direction for assistive technology.</td>
</tr>
<tr>
<td>Person avatar (sub-header)</td>
<td><code>w-5 h-5 rounded-full flex items-center justify-center text-[6px] font-bold text-white shrink-0</code></td>
<td>20×20 px. Initials in 6px bold white. Background colour is person-specific (set inline).</td>
</tr>
<tr>
<td>Person avatar (metadata)</td>
<td><code>w-5 h-5 rounded-full flex items-center justify-center text-[6.5px] font-extrabold text-white shrink-0</code></td>
<td>Same 20×20 px. Slightly heavier weight (800) to match existing drawer card style.</td>
</tr>
<tr>
<td>Pill condition</td>
<td><code>{#if inferredRelationship} … {/if}</code> wraps both the sender pill and the receiver pill</td>
<td>Render only when <code>inferredRelationship !== null &amp;&amp; receivers.length === 1</code>. The check lives in <code>+page.server.ts</code>, not in the component.</td>
</tr>
<tr>
<td>Pill label value</td>
<td><code>inferredRelationship.labelFromA</code> next to sender, <code>inferredRelationship.labelFromB</code> next to receiver</td>
<td>Labels are pre-translated strings from the backend. No frontend i18n key needed for the label text itself.</td>
</tr>
<tr>
<td>Mobile person row</td>
<td><code>flex items-center gap-1 flex-nowrap</code></td>
<td><code>flex-wrap: nowrap</code> keeps avatar + name + pill on one line. If name overflows container, truncate name with <code>truncate</code>, never truncate the pill.</td>
</tr>
<tr>
<td>Mobile pill font-size</td>
<td><code>text-[6px]</code> at ≤375 px</td>
<td>Reduced from 9px (desktop) to 6px on mobile to fit without overflow. Contrast still passes AA at 6px bold.</td>
</tr>
<tr>
<td>Sub-header at mobile</td>
<td>Chips removed entirely from sub-header at <code>max-width: 767px</code></td>
<td>Sub-header shows only back arrow + document title + primary action button. Person chips with pills appear only in the metadata section on mobile.</td>
</tr>
</tbody>
</table>
</div>
<p style="font-size:10.5px;color:#888;margin-top:12px;line-height:1.7">
<strong style="color:#012851">Accessibility note:</strong> The pill text ("ELTERNTEIL", "KIND") is uppercase visually but the accessible name should be the mixed-case label from the backend (<code>labelFromA</code>). Apply <code>aria-label={labelFromA}</code> on the pill span so screen readers announce "Elternteil" not "E-L-T-E-R-N-T-E-I-L". The visual uppercase is achieved with CSS <code>text-transform: uppercase</code>, not by changing the source string.
</p>
</div>
</div><!-- /doc -->
</body>
</html>

1135
docs/specs/stammbaum-person-edit-spec.html Normal file
View File

File diff suppressed because it is too large Load Diff

1043
docs/specs/stammbaum-tree-spec.html Normal file
View File

File diff suppressed because it is too large Load Diff