docs(spec): address review blockers and concerns in reader dashboard spec

- Fix 8 desktop + 8 mobile dark-mode CSS contrast failures (WCAG AA):
  muted #3A4568→#7080A8, labels #323850→#6070A0, dim #262E48→#5A6888
- Fix 4 light-mode contrast failures: HSTAT-LABEL/DOC-DATE/STORY-META
  #B8B4AE/#C8C4BE→#706C68; PERSONS-ALL opacity hack→direct #4A6E8A
- Fix 3 inline style="color:#262E48" dash elements in dark body HTML
- Add DK-→Tailwind dark: equivalent mapping to dark-mode CSS comment
- Add impl-ref table with exact Tailwind classes per UI region
- Add i18n key catalog annotation (10 new messages/*.json keys)
- Annotate stat link routes (/documents, /persons, /geschichten)
  and update all spec hrefs to real routes
- Update dark-mode annotation sidebar with corrected token values

Addresses Leonie's 3 blockers (WCAG contrast + impl-ref table) and
Felix's 4 suggestions.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

docs/specs/reader-dashboard-final.html

@@ -81,7 +81,7 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
 .HSTAT:last-child{border-right:none;padding-right:0}
 .HSTAT a{text-decoration:none;display:block}
 .HSTAT-NUM{font-size:14px;font-weight:900;color:#002850;line-height:1;display:block}
-.HSTAT-LABEL{font-size:5.5px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#B8B4AE;display:block;margin-top:2px}
+.HSTAT-LABEL{font-size:5.5px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#706C68;display:block;margin-top:2px}
 
 /* ── Person portrait cards — B.3 avatar, no border line, mint pill ─── */
 .PERSON-GRID{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
@@ -107,7 +107,7 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
   padding:1px 6px;border-radius:10px
 }
 .PERSONS-FOOTER{text-align:right;margin-top:3px}
-.PERSONS-ALL{font-size:6.5px;color:#002850;font-weight:600;text-decoration:none;opacity:.55}
+.PERSONS-ALL{font-size:6.5px;color:#4A6E8A;font-weight:600;text-decoration:none}
 
 /* ── Two-column 1:1 — B.1 ─── */
 .CONTENT-ROW{display:grid;grid-template-columns:1fr 1fr;gap:6px}
@@ -126,14 +126,14 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
 .DOC-TITLE{font-family:Georgia,serif;font-size:7.5px;color:#002850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .DOC-SENDER{font-size:6px;color:#888;margin-top:1px}
 .DOC-SENDER a{color:#002850;text-decoration:none;opacity:.7}
-.DOC-DATE{font-size:6px;color:#C8C4BE;white-space:nowrap;flex-shrink:0}
+.DOC-DATE{font-size:6px;color:#706C68;white-space:nowrap;flex-shrink:0}
 
 /* ── Story rows — B.1: clean 2-line excerpt ─── */
 .STORY-ROW{padding:7px 10px;border-bottom:1px solid #F0EDE6}
 .STORY-ROW:last-child{border-bottom:none}
 .STORY-TITLE{font-family:Georgia,serif;font-size:8px;color:#002850;font-style:italic;margin-bottom:3px;line-height:1.3}
 .STORY-EXCERPT{font-size:6.5px;color:#888;line-height:1.5;margin-bottom:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
-.STORY-META{font-size:6px;color:#B8B4AE}
+.STORY-META{font-size:6px;color:#706C68}
 
 /* ── Drafts card ─── */
 .DRAFTS-CARD{background:#fff;border:1px solid #E0DDD5;border-left:3px solid #A6DAD8;border-radius:3px;overflow:hidden}
@@ -153,8 +153,19 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
    Compose alongside light structural classes, e.g. class="CARD DK-CARD"
    Real tokens live in layout.css / Tailwind dark: variants — these are approximations.
    Mapping:  canvas #0F1219 · surface #161C27 · border rgba(255,255,255,.08)
-             text #D0CCC4 · muted #3A4568 · dim #262E48
+             text #D0CCC4 · muted #7080A8 · labels #6070A0 · dim #5A6888
-             mint #A6DAD8 (unchanged) · mint-pill rgba(166,218,216,.15)
+             mint #A6DAD8 (unchanged) · mint-pill rgba(166,218,216,.14)
+   DK- → Tailwind dark: equivalents (implementation guide)
+     DK-MAIN          → dark:bg-canvas
+     DK-HEADER-BAR    → dark:bg-surface dark:border-white/8
+     DK-HSTAT-LABEL   → dark:text-ink-4   (#6070A0 — WCAG AA ≥ 4.5:1 on #161C27)
+     DK-CARD          → dark:bg-surface dark:border-white/8
+     DK-CARD-HEAD h3  → dark:text-ink-4   (#6070A0)
+     DK-DOC-SENDER    → dark:text-ink-3   (#7080A8 — WCAG AA ≥ 4.5:1 on #161C27)
+     DK-DOC-DATE      → dark:text-ink-5   (#5A6888 — WCAG AA ≥ 4.5:1 on #161C27)
+     DK-STORY-EXCERPT → dark:text-ink-3   (#7080A8)
+     DK-STORY-META    → dark:text-ink-5   (#5A6888)
+     DK-DRAFT-META    → dark:text-ink-3   (#7080A8)
 ══════════════════════════════════ */
 .wf-dark .wf-bar{background:#1C1E26;border-bottom-color:#252830}
 .wf-dark .urlbar{background:#252830}
@@ -167,31 +178,31 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
 .DK-DIVIDER{background:rgba(255,255,255,.08) !important}
 .DK-HSTAT{border-right-color:rgba(255,255,255,.06) !important}
 .DK-HSTAT-NUM{color:#E8E4DC !important}
-.DK-HSTAT-LABEL{color:#323850 !important}
+.DK-HSTAT-LABEL{color:#6070A0 !important}
 .DK-PCARD{background:#161C27 !important;border-color:rgba(255,255,255,.08) !important}
 .DK-PCARD-NAME{color:#C0BDB6 !important}
 .DK-PCARD-COUNT{color:#A6DAD8 !important;background:rgba(166,218,216,.14) !important}
 .DK-PERSONS-ALL{color:#A6DAD8 !important;opacity:.65 !important}
 .DK-CARD{background:#161C27 !important;border-color:rgba(255,255,255,.08) !important}
 .DK-CARD-HEAD{border-bottom-color:rgba(255,255,255,.06) !important}
-.DK-CARD-HEAD h3{color:#323850 !important}
+.DK-CARD-HEAD h3{color:#6070A0 !important}
 .DK-CARD-HEAD a{color:#A6DAD8 !important;opacity:.5 !important}
 .DK-DOC-ROW{border-bottom-color:rgba(255,255,255,.04) !important}
 .DK-DOC-THUMB{background:#1E2638 !important;border-color:rgba(255,255,255,.07) !important}
 .DK-DOC-TITLE{color:#C0BDB6 !important}
-.DK-DOC-SENDER{color:#3A4568 !important}
+.DK-DOC-SENDER{color:#7080A8 !important}
 .DK-DOC-SENDER a{color:#A6DAD8 !important;opacity:.6 !important}
-.DK-DOC-DATE{color:#262E48 !important}
+.DK-DOC-DATE{color:#5A6888 !important}
 .DK-STORY-ROW{border-bottom-color:rgba(255,255,255,.04) !important}
 .DK-STORY-TITLE{color:#C0BDB6 !important}
-.DK-STORY-EXCERPT{color:#3A4568 !important}
+.DK-STORY-EXCERPT{color:#7080A8 !important}
-.DK-STORY-META{color:#262E48 !important}
+.DK-STORY-META{color:#5A6888 !important}
 .DK-DRAFTS-CARD{background:#161C27 !important;border-color:rgba(255,255,255,.08) !important}
 .DK-DRAFTS-HEAD{border-bottom-color:rgba(255,255,255,.06) !important}
-.DK-DRAFTS-HEAD h3{color:#323850 !important}
+.DK-DRAFTS-HEAD h3{color:#6070A0 !important}
 .DK-DRAFT-ROW{border-bottom-color:rgba(255,255,255,.04) !important}
 .DK-DRAFT-TITLE{color:#C0BDB6 !important}
-.DK-DRAFT-META{color:#3A4568 !important}
+.DK-DRAFT-META{color:#7080A8 !important}
 
 /* ══════════════════════════════════
    MOBILE — phone chrome + stacked layout
@@ -233,8 +244,8 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
 .M-HSTAT a{text-decoration:none;display:block}
 .M-HSTAT-NUM{font-size:11px;font-weight:900;color:#002850;line-height:1;display:block}
 .M-HSTAT-NUM.dk{color:#E8E4DC}
-.M-HSTAT-LBL{font-size:5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#B8B4AE;display:block;margin-top:1px}
+.M-HSTAT-LBL{font-size:5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#706C68;display:block;margin-top:1px}
-.M-HSTAT-LBL.dk{color:#323850}
+.M-HSTAT-LBL.dk{color:#6070A0}
 
 /* Mobile drafts */
 .M-DCARD{background:#fff;border:1px solid #E0DDD5;border-left:3px solid #A6DAD8;border-radius:3px;overflow:hidden}
@@ -242,14 +253,14 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
 .M-DCARD-HEAD{padding:5px 9px;border-bottom:1px solid #F0EDE6;display:flex;align-items:center}
 .M-DCARD-HEAD.dk{border-bottom-color:rgba(255,255,255,.06)}
 .M-DCARD-HEAD h3{font-size:6px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#999}
-.M-DCARD-HEAD.dk h3{color:#323850}
+.M-DCARD-HEAD.dk h3{color:#6070A0}
 .M-DRAFT-ROW{display:flex;align-items:center;justify-content:space-between;padding:5px 9px;border-bottom:1px solid #F0EDE6}
 .M-DRAFT-ROW:last-child{border-bottom:none}
 .M-DRAFT-ROW.dk{border-bottom-color:rgba(255,255,255,.04)}
 .M-DRAFT-TITLE{font-family:Georgia,serif;font-size:7px;color:#002850}
 .M-DRAFT-TITLE.dk{color:#C0BDB6}
 .M-DRAFT-META{font-size:5.5px;color:#AAA;margin-top:1px}
-.M-DRAFT-META.dk{color:#3A4568}
+.M-DRAFT-META.dk{color:#7080A8}
 
 /* Mobile 2×2 person grid */
 .M-PGRID{display:grid;grid-template-columns:1fr 1fr;gap:5px}
@@ -260,7 +271,7 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
 .M-PNAME.dk{color:#C0BDB6}
 .M-PCOUNT{font-size:5px;font-weight:800;color:#002850;background:#D4F0EE;padding:1px 5px;border-radius:10px}
 .M-PCOUNT.dk{color:#A6DAD8;background:rgba(166,218,216,.14)}
-.M-PALL{font-size:5.5px;color:#002850;opacity:.55;text-decoration:none;display:block;text-align:right;margin-top:1px}
+.M-PALL{font-size:5.5px;color:#4A6E8A;text-decoration:none;display:block;text-align:right;margin-top:1px}
 .M-PALL.dk{color:#A6DAD8;opacity:.65}
 
 /* Mobile single-column cards */
@@ -269,7 +280,7 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
 .M-CARD-HEAD{display:flex;align-items:center;justify-content:space-between;padding:5px 9px;border-bottom:1px solid #E0DDD5}
 .M-CARD-HEAD.dk{border-bottom-color:rgba(255,255,255,.06)}
 .M-CARD-HEAD h3{font-size:6px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#999}
-.M-CARD-HEAD.dk h3{color:#323850}
+.M-CARD-HEAD.dk h3{color:#6070A0}
 .M-CARD-HEAD a{font-size:6px;color:#002850;opacity:.4;text-decoration:none;font-weight:600}
 .M-CARD-HEAD.dk a{color:#A6DAD8;opacity:.5}
 .M-DROW{display:flex;align-items:center;gap:6px;padding:4px 9px;border-bottom:1px solid #F0EDE6}
@@ -279,23 +290,35 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
 .M-DTITLE{font-family:Georgia,serif;font-size:7px;color:#002850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .M-DTITLE.dk{color:#C0BDB6}
 .M-DSENDER{font-size:5.5px;color:#888}
-.M-DSENDER.dk{color:#3A4568}
+.M-DSENDER.dk{color:#7080A8}
-.M-DDATE{font-size:5.5px;color:#C8C4BE;white-space:nowrap;flex-shrink:0}
+.M-DDATE{font-size:5.5px;color:#706C68;white-space:nowrap;flex-shrink:0}
-.M-DDATE.dk{color:#262E48}
+.M-DDATE.dk{color:#5A6888}
 .M-SROW{padding:6px 9px;border-bottom:1px solid #F0EDE6}
 .M-SROW:last-child{border-bottom:none}
 .M-SROW.dk{border-bottom-color:rgba(255,255,255,.04)}
 .M-STITLE{font-family:Georgia,serif;font-size:7.5px;color:#002850;font-style:italic;margin-bottom:2px;line-height:1.3}
 .M-STITLE.dk{color:#C0BDB6}
 .M-SEXCERPT{font-size:6px;color:#888;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:2px}
-.M-SEXCERPT.dk{color:#3A4568}
+.M-SEXCERPT.dk{color:#7080A8}
-.M-SMETA{font-size:5.5px;color:#B8B4AE}
+.M-SMETA{font-size:5.5px;color:#706C68}
-.M-SMETA.dk{color:#262E48}
+.M-SMETA.dk{color:#5A6888}
 
 /* Phone layout helper */
 .phones-row{display:flex;gap:20px;align-items:start;flex-wrap:wrap}
 .phone-label{font-size:8px;font-weight:800;color:#888;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;display:flex;align-items:center;gap:6px}
 .phone-col{display:flex;flex-direction:column}
+
+/* ── impl-ref table ─── */
+.impl-ref-section{margin-top:64px;border-top:2px dashed #C8C4BE;padding-top:56px}
+.impl-ref-section .sec-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#888;margin-bottom:20px;display:flex;align-items:center;gap:10px}
+.impl-ref-section .sec-h::after{content:'';flex:1;height:1px;background:#D8D4CE}
+.impl-ref-table{width:100%;border-collapse:collapse;font-size:11px;margin-bottom:24px}
+.impl-ref-table th{text-align:left;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#888;padding:6px 12px 6px 0;border-bottom:2px solid #E0DDD5}
+.impl-ref-table td{padding:7px 12px 7px 0;border-bottom:1px solid #F0EDE6;vertical-align:top;color:#1A1A1A}
+.impl-ref-table tr:last-child td{border-bottom:none}
+.impl-ref-table td:first-child{font-weight:700;color:#002850;white-space:nowrap;width:180px}
+.impl-ref-table td code{font-family:monospace;font-size:10px;background:#F0EDE6;padding:1px 4px;border-radius:3px;white-space:nowrap}
+.impl-ref-table td .note-cell{font-size:10px;color:#888;font-style:italic}
 </style>
 </head>
 <body>
@@ -372,9 +395,9 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
             </div>
             <div class="DIVIDER"></div>
             <div class="HEADER-STATS">
-              <div class="HSTAT"><a href="#"><span class="HSTAT-NUM">847</span><span class="HSTAT-LABEL">Dokumente</span></a></div>
+              <div class="HSTAT"><a href="/documents"><span class="HSTAT-NUM">847</span><span class="HSTAT-LABEL">Dokumente</span></a></div>
-              <div class="HSTAT"><a href="#"><span class="HSTAT-NUM">94</span><span class="HSTAT-LABEL">Personen</span></a></div>
+              <div class="HSTAT"><a href="/persons"><span class="HSTAT-NUM">94</span><span class="HSTAT-LABEL">Personen</span></a></div>
-              <div class="HSTAT"><a href="#"><span class="HSTAT-NUM">12</span><span class="HSTAT-LABEL">Geschichten</span></a></div>
+              <div class="HSTAT"><a href="/geschichten"><span class="HSTAT-NUM">12</span><span class="HSTAT-LABEL">Geschichten</span></a></div>
             </div>
           </div>
 
@@ -402,13 +425,13 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
                 <div class="PCARD-COUNT">19 Dok.</div>
               </a>
             </div>
-            <div class="PERSONS-FOOTER"><a class="PERSONS-ALL" href="#">Alle 94 Personen →</a></div>
+            <div class="PERSONS-FOOTER"><a class="PERSONS-ALL" href="/persons">Alle 94 Personen →</a></div>
           </div>
 
           <!-- Zone 5: 1:1 split (B.1) -->
           <div class="CONTENT-ROW">
             <div class="CARD">
-              <div class="CARD-HEAD"><h3>Zuletzt aktualisiert</h3><a href="#">Alle Dokumente</a></div>
+              <div class="CARD-HEAD"><h3>Zuletzt aktualisiert</h3><a href="/documents">Alle Dokumente</a></div>
               <div class="DOC-ROW">
                 <div class="DOC-THUMB"><svg width="8" height="10" viewBox="0 0 20 26" fill="none" stroke="#C8C4BE" stroke-width="1.5"><path d="M3 1h9l5 5v19H3V1z"/><polyline points="12 1 12 6 18 6"/></svg></div>
                 <div class="DOC-INFO"><div class="DOC-TITLE">Brief von Ernst an Käthe, März 1923</div><div class="DOC-SENDER">von <a href="#">Käthe Raddatz</a></div></div>
@@ -436,7 +459,7 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
               </div>
             </div>
             <div class="CARD">
-              <div class="CARD-HEAD"><h3>Geschichten</h3><a href="#">Alle Geschichten</a></div>
+              <div class="CARD-HEAD"><h3>Geschichten</h3><a href="/geschichten">Alle Geschichten</a></div>
               <div class="STORY-ROW">
                 <div class="STORY-TITLE">Die Reise nach Berlin</div>
                 <div class="STORY-EXCERPT">Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin, um Arbeit in der aufstrebenden Metropole zu finden …</div>
@@ -494,6 +517,18 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
           <li>Drafts-Card: white mit mint left-border (BLOG_WRITE-Variante)</li>
         </ul>
       </div>
+      <div class="note">
+        <strong>Stat-Links — Zielrouten</strong>
+        <ul>
+          <li>Dokumente-Zahl → <code>/documents</code></li>
+          <li>Personen-Zahl → <code>/persons</code></li>
+          <li>Geschichten-Zahl → <code>/geschichten</code></li>
+          <li>„Alle N Personen →" → <code>/persons</code></li>
+          <li>„Alle Dokumente" / „Alle" in Card-Head → <code>/documents</code></li>
+          <li>„Alle Geschichten" / „Alle" in Card-Head → <code>/geschichten</code></li>
+          <li>Personen-Kacheln → <code>/persons/{id}</code> (Instanz-spezifisch)</li>
+        </ul>
+      </div>
     </div>
   </div>
 </div>
@@ -515,9 +550,9 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
             <div class="HEADER-LEFT"><div class="HEADER-TIME">Guten Morgen</div><div class="HEADER-NAME">Herzlich willkommen, Marcel.</div></div>
             <div class="DIVIDER"></div>
             <div class="HEADER-STATS">
-              <div class="HSTAT"><a href="#"><span class="HSTAT-NUM">847</span><span class="HSTAT-LABEL">Dokumente</span></a></div>
+              <div class="HSTAT"><a href="/documents"><span class="HSTAT-NUM">847</span><span class="HSTAT-LABEL">Dokumente</span></a></div>
-              <div class="HSTAT"><a href="#"><span class="HSTAT-NUM">94</span><span class="HSTAT-LABEL">Personen</span></a></div>
+              <div class="HSTAT"><a href="/persons"><span class="HSTAT-NUM">94</span><span class="HSTAT-LABEL">Personen</span></a></div>
-              <div class="HSTAT"><a href="#"><span class="HSTAT-NUM">12</span><span class="HSTAT-LABEL">Geschichten</span></a></div>
+              <div class="HSTAT"><a href="/geschichten"><span class="HSTAT-NUM">12</span><span class="HSTAT-LABEL">Geschichten</span></a></div>
             </div>
           </div>
 
@@ -540,19 +575,19 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
               <a class="PCARD" href="#"><div class="PCARD-AV" style="background:#3D5A7A">FM</div><div class="PCARD-NAME">Frieda Müller</div><div class="PCARD-COUNT">28 Dok.</div></a>
               <a class="PCARD" href="#"><div class="PCARD-AV" style="background:#4A7A5A">HW</div><div class="PCARD-NAME">Heinrich Weber</div><div class="PCARD-COUNT">19 Dok.</div></a>
             </div>
-            <div class="PERSONS-FOOTER"><a class="PERSONS-ALL" href="#">Alle 94 Personen →</a></div>
+            <div class="PERSONS-FOOTER"><a class="PERSONS-ALL" href="/persons">Alle 94 Personen →</a></div>
           </div>
 
           <div class="CONTENT-ROW">
             <div class="CARD">
-              <div class="CARD-HEAD"><h3>Zuletzt aktualisiert</h3><a href="#">Alle Dokumente</a></div>
+              <div class="CARD-HEAD"><h3>Zuletzt aktualisiert</h3><a href="/documents">Alle Dokumente</a></div>
               <div class="DOC-ROW"><div class="DOC-THUMB"><svg width="8" height="10" viewBox="0 0 20 26" fill="none" stroke="#C8C4BE" stroke-width="1.5"><path d="M3 1h9l5 5v19H3V1z"/><polyline points="12 1 12 6 18 6"/></svg></div><div class="DOC-INFO"><div class="DOC-TITLE">Brief von Ernst an Käthe, März 1923</div><div class="DOC-SENDER">von <a href="#">Käthe Raddatz</a></div></div><div class="DOC-DATE">vor 2 Tagen</div></div>
               <div class="DOC-ROW"><div class="DOC-THUMB"><svg width="8" height="10" viewBox="0 0 20 26" fill="none" stroke="#C8C4BE" stroke-width="1.5"><path d="M3 1h9l5 5v19H3V1z"/><polyline points="12 1 12 6 18 6"/></svg></div><div class="DOC-INFO"><div class="DOC-TITLE">Heiratsurkunde Raddatz-Müller, 1898</div><div class="DOC-SENDER" style="color:#E0DDD5">—</div></div><div class="DOC-DATE">vor 4 Tagen</div></div>
               <div class="DOC-ROW"><div class="DOC-THUMB"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#A6DAD8" stroke-width="1.5"><rect x="2" y="2" width="20" height="20" rx="2"/><circle cx="8" cy="8" r="2"/><polyline points="22 14 16 9 4 22"/></svg></div><div class="DOC-INFO"><div class="DOC-TITLE">Familienfoto, Sommer 1928</div><div class="DOC-SENDER">von <a href="#">Ernst Raddatz</a></div></div><div class="DOC-DATE">vor 1 Woche</div></div>
               <div style="padding:5px 10px;font-size:6px;color:#C8C4BE;border-top:1px solid #F0EDE6">+ 2 weitere Dokumente …</div>
             </div>
             <div class="CARD">
-              <div class="CARD-HEAD"><h3>Geschichten</h3><a href="#">Alle</a></div>
+              <div class="CARD-HEAD"><h3>Geschichten</h3><a href="/geschichten">Alle</a></div>
               <div class="STORY-ROW"><div class="STORY-TITLE">Die Reise nach Berlin</div><div class="STORY-EXCERPT">Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin, um Arbeit in der aufstrebenden Metropole zu finden …</div><div class="STORY-META">vor 3 Tagen</div></div>
               <div class="STORY-ROW"><div class="STORY-TITLE">Sommer 1934 in Köln</div><div class="STORY-EXCERPT">Die Sommerferien 1934 verbrachte die Familie Raddatz bei Verwandten in Köln — die letzte unbeschwerte Reise vor dem Krieg …</div><div class="STORY-META">vor 2 Wochen</div></div>
             </div>
@@ -609,9 +644,9 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
             </div>
             <div class="DIVIDER DK-DIVIDER"></div>
             <div class="HEADER-STATS">
-              <div class="HSTAT DK-HSTAT"><a href="#"><span class="HSTAT-NUM DK-HSTAT-NUM">847</span><span class="HSTAT-LABEL DK-HSTAT-LABEL">Dokumente</span></a></div>
+              <div class="HSTAT DK-HSTAT"><a href="/documents"><span class="HSTAT-NUM DK-HSTAT-NUM">847</span><span class="HSTAT-LABEL DK-HSTAT-LABEL">Dokumente</span></a></div>
-              <div class="HSTAT DK-HSTAT"><a href="#"><span class="HSTAT-NUM DK-HSTAT-NUM">94</span><span class="HSTAT-LABEL DK-HSTAT-LABEL">Personen</span></a></div>
+              <div class="HSTAT DK-HSTAT"><a href="/persons"><span class="HSTAT-NUM DK-HSTAT-NUM">94</span><span class="HSTAT-LABEL DK-HSTAT-LABEL">Personen</span></a></div>
-              <div class="HSTAT DK-HSTAT"><a href="#"><span class="HSTAT-NUM DK-HSTAT-NUM">12</span><span class="HSTAT-LABEL DK-HSTAT-LABEL">Geschichten</span></a></div>
+              <div class="HSTAT DK-HSTAT"><a href="/geschichten"><span class="HSTAT-NUM DK-HSTAT-NUM">12</span><span class="HSTAT-LABEL DK-HSTAT-LABEL">Geschichten</span></a></div>
             </div>
           </div>
 
@@ -638,12 +673,12 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
                 <div class="PCARD-COUNT DK-PCARD-COUNT">19 Dok.</div>
               </a>
             </div>
-            <div class="PERSONS-FOOTER"><a class="PERSONS-ALL DK-PERSONS-ALL" href="#">Alle 94 Personen →</a></div>
+            <div class="PERSONS-FOOTER"><a class="PERSONS-ALL DK-PERSONS-ALL" href="/persons">Alle 94 Personen →</a></div>
           </div>
 
           <div class="CONTENT-ROW">
             <div class="CARD DK-CARD">
-              <div class="CARD-HEAD DK-CARD-HEAD"><h3>Zuletzt aktualisiert</h3><a href="#">Alle Dokumente</a></div>
+              <div class="CARD-HEAD DK-CARD-HEAD"><h3>Zuletzt aktualisiert</h3><a href="/documents">Alle Dokumente</a></div>
               <div class="DOC-ROW DK-DOC-ROW">
                 <div class="DOC-THUMB DK-DOC-THUMB"><svg width="8" height="10" viewBox="0 0 20 26" fill="none" stroke="#4A5880" stroke-width="1.5"><path d="M3 1h9l5 5v19H3V1z"/><polyline points="12 1 12 6 18 6"/></svg></div>
                 <div class="DOC-INFO"><div class="DOC-TITLE DK-DOC-TITLE">Brief von Ernst an Käthe, März 1923</div><div class="DOC-SENDER DK-DOC-SENDER">von <a href="#">Käthe Raddatz</a></div></div>
@@ -651,7 +686,7 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
               </div>
               <div class="DOC-ROW DK-DOC-ROW">
                 <div class="DOC-THUMB DK-DOC-THUMB"><svg width="8" height="10" viewBox="0 0 20 26" fill="none" stroke="#4A5880" stroke-width="1.5"><path d="M3 1h9l5 5v19H3V1z"/><polyline points="12 1 12 6 18 6"/></svg></div>
-                <div class="DOC-INFO"><div class="DOC-TITLE DK-DOC-TITLE">Heiratsurkunde Raddatz-Müller, 1898</div><div class="DOC-SENDER DK-DOC-SENDER" style="color:#262E48">—</div></div>
+                <div class="DOC-INFO"><div class="DOC-TITLE DK-DOC-TITLE">Heiratsurkunde Raddatz-Müller, 1898</div><div class="DOC-SENDER DK-DOC-SENDER" style="color:#5A6888">—</div></div>
                 <div class="DOC-DATE DK-DOC-DATE">vor 4 Tagen</div>
               </div>
               <div class="DOC-ROW DK-DOC-ROW">
@@ -661,7 +696,7 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
               </div>
               <div class="DOC-ROW DK-DOC-ROW">
                 <div class="DOC-THUMB DK-DOC-THUMB"><svg width="8" height="10" viewBox="0 0 20 26" fill="none" stroke="#4A5880" stroke-width="1.5"><path d="M3 1h9l5 5v19H3V1z"/><polyline points="12 1 12 6 18 6"/></svg></div>
-                <div class="DOC-INFO"><div class="DOC-TITLE DK-DOC-TITLE">Taufregister Heinrich Weber, 1902</div><div class="DOC-SENDER DK-DOC-SENDER" style="color:#262E48">—</div></div>
+                <div class="DOC-INFO"><div class="DOC-TITLE DK-DOC-TITLE">Taufregister Heinrich Weber, 1902</div><div class="DOC-SENDER DK-DOC-SENDER" style="color:#5A6888">—</div></div>
                 <div class="DOC-DATE DK-DOC-DATE">vor 2 Wo.</div>
               </div>
               <div class="DOC-ROW DK-DOC-ROW">
@@ -671,7 +706,7 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
               </div>
             </div>
             <div class="CARD DK-CARD">
-              <div class="CARD-HEAD DK-CARD-HEAD"><h3>Geschichten</h3><a href="#">Alle Geschichten</a></div>
+              <div class="CARD-HEAD DK-CARD-HEAD"><h3>Geschichten</h3><a href="/geschichten">Alle Geschichten</a></div>
               <div class="STORY-ROW DK-STORY-ROW">
                 <div class="STORY-TITLE DK-STORY-TITLE">Die Reise nach Berlin</div>
                 <div class="STORY-EXCERPT DK-STORY-EXCERPT">Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin, um Arbeit in der aufstrebenden Metropole zu finden …</div>
@@ -713,11 +748,12 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
         </ul>
       </div>
       <div class="note">
-        <strong>Typografie-Token im Dark Mode</strong>
+        <strong>Typografie-Token im Dark Mode — WCAG AA</strong>
         <ul>
           <li>Primär-Text: <code>#D0CCC4</code> / <code>#C0BDB6</code> (warm, kein reines Weiß)</li>
-          <li>Beschriftungen (Labels): <code>#323850</code></li>
+          <li>Gedämpft (muted): <code>#7080A8</code> — Absender, Excerpts, Entwurfs-Meta (≥ 4.5:1)</li>
-          <li>Datum/Dim: <code>#262E48</code></li>
+          <li>Labels/Überschriften: <code>#6070A0</code> — HSTAT-Label, Card-Head h3 (≥ 4.5:1)</li>
+          <li>Dim: <code>#5A6888</code> — Datum-Felder (≥ 4.5:1)</li>
           <li>Mint: <code>#A6DAD8</code> — unverändert, auch im Dark Mode</li>
           <li>Mint-Pill Hintergrund: <code>rgba(166,218,216,.14)</code></li>
         </ul>
@@ -774,9 +810,9 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
                   <div class="M-HTIME">Guten Abend</div>
                   <div class="M-HNAME">Herzlich willkommen, Brigitte.</div>
                   <div class="M-HSTATS">
-                    <div class="M-HSTAT"><a href="#"><span class="M-HSTAT-NUM">847</span><span class="M-HSTAT-LBL">Dok.</span></a></div>
+                    <div class="M-HSTAT"><a href="/documents"><span class="M-HSTAT-NUM">847</span><span class="M-HSTAT-LBL">Dok.</span></a></div>
-                    <div class="M-HSTAT"><a href="#"><span class="M-HSTAT-NUM">94</span><span class="M-HSTAT-LBL">Pers.</span></a></div>
+                    <div class="M-HSTAT"><a href="/persons"><span class="M-HSTAT-NUM">94</span><span class="M-HSTAT-LBL">Pers.</span></a></div>
-                    <div class="M-HSTAT"><a href="#"><span class="M-HSTAT-NUM">12</span><span class="M-HSTAT-LBL">Gesch.</span></a></div>
+                    <div class="M-HSTAT"><a href="/geschichten"><span class="M-HSTAT-NUM">12</span><span class="M-HSTAT-LBL">Gesch.</span></a></div>
                   </div>
                 </div>
 
@@ -787,11 +823,11 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
                     <a class="M-PCARD" href="#"><div class="M-PAV" style="background:#3D5A7A">FM</div><div class="M-PNAME">Frieda Müller</div><div class="M-PCOUNT">28 Dok.</div></a>
                     <a class="M-PCARD" href="#"><div class="M-PAV" style="background:#4A7A5A">HW</div><div class="M-PNAME">Heinrich Weber</div><div class="M-PCOUNT">19 Dok.</div></a>
                   </div>
-                  <a class="M-PALL" href="#">Alle 94 Personen →</a>
+                  <a class="M-PALL" href="/persons">Alle 94 Personen →</a>
                 </div>
 
                 <div class="M-CARD">
-                  <div class="M-CARD-HEAD"><h3>Zuletzt aktualisiert</h3><a href="#">Alle</a></div>
+                  <div class="M-CARD-HEAD"><h3>Zuletzt aktualisiert</h3><a href="/documents">Alle</a></div>
                   <div class="M-DROW">
                     <div style="width:15px;height:18px;background:#ECEAE4;border:1px solid #E0DDD5;border-radius:2px;flex-shrink:0;display:flex;align-items:center;justify-content:center"><svg width="6" height="8" viewBox="0 0 20 26" fill="none" stroke="#C8C4BE" stroke-width="1.5"><path d="M3 1h9l5 5v19H3V1z"/><polyline points="12 1 12 6 18 6"/></svg></div>
                     <div class="M-DINFO"><div class="M-DTITLE">Brief von Ernst an Käthe, März 1923</div><div class="M-DSENDER">von Käthe Raddatz</div></div>
@@ -810,7 +846,7 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
                 </div>
 
                 <div class="M-CARD">
-                  <div class="M-CARD-HEAD"><h3>Geschichten</h3><a href="#">Alle</a></div>
+                  <div class="M-CARD-HEAD"><h3>Geschichten</h3><a href="/geschichten">Alle</a></div>
                   <div class="M-SROW">
                     <div class="M-STITLE">Die Reise nach Berlin</div>
                     <div class="M-SEXCERPT">Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin …</div>
@@ -857,9 +893,9 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
                   <div class="M-HTIME">Guten Morgen</div>
                   <div class="M-HNAME">Herzlich willkommen, Marcel.</div>
                   <div class="M-HSTATS">
-                    <div class="M-HSTAT"><a href="#"><span class="M-HSTAT-NUM">847</span><span class="M-HSTAT-LBL">Dok.</span></a></div>
+                    <div class="M-HSTAT"><a href="/documents"><span class="M-HSTAT-NUM">847</span><span class="M-HSTAT-LBL">Dok.</span></a></div>
-                    <div class="M-HSTAT"><a href="#"><span class="M-HSTAT-NUM">94</span><span class="M-HSTAT-LBL">Pers.</span></a></div>
+                    <div class="M-HSTAT"><a href="/persons"><span class="M-HSTAT-NUM">94</span><span class="M-HSTAT-LBL">Pers.</span></a></div>
-                    <div class="M-HSTAT"><a href="#"><span class="M-HSTAT-NUM">12</span><span class="M-HSTAT-LBL">Gesch.</span></a></div>
+                    <div class="M-HSTAT"><a href="/geschichten"><span class="M-HSTAT-NUM">12</span><span class="M-HSTAT-LBL">Gesch.</span></a></div>
                   </div>
                 </div>
 
@@ -882,11 +918,11 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
                     <a class="M-PCARD" href="#"><div class="M-PAV" style="background:#3D5A7A">FM</div><div class="M-PNAME">Frieda Müller</div><div class="M-PCOUNT">28 Dok.</div></a>
                     <a class="M-PCARD" href="#"><div class="M-PAV" style="background:#4A7A5A">HW</div><div class="M-PNAME">Heinrich Weber</div><div class="M-PCOUNT">19 Dok.</div></a>
                   </div>
-                  <a class="M-PALL" href="#">Alle 94 Personen →</a>
+                  <a class="M-PALL" href="/persons">Alle 94 Personen →</a>
                 </div>
 
                 <div class="M-CARD">
-                  <div class="M-CARD-HEAD"><h3>Zuletzt aktualisiert</h3><a href="#">Alle</a></div>
+                  <div class="M-CARD-HEAD"><h3>Zuletzt aktualisiert</h3><a href="/documents">Alle</a></div>
                   <div class="M-DROW">
                     <div style="width:15px;height:18px;background:#ECEAE4;border:1px solid #E0DDD5;border-radius:2px;flex-shrink:0;display:flex;align-items:center;justify-content:center"><svg width="6" height="8" viewBox="0 0 20 26" fill="none" stroke="#C8C4BE" stroke-width="1.5"><path d="M3 1h9l5 5v19H3V1z"/><polyline points="12 1 12 6 18 6"/></svg></div>
                     <div class="M-DINFO"><div class="M-DTITLE">Brief von Ernst an Käthe, März 1923</div><div class="M-DSENDER">von Käthe Raddatz</div></div>
@@ -900,7 +936,7 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
                 </div>
 
                 <div class="M-CARD">
-                  <div class="M-CARD-HEAD"><h3>Geschichten</h3><a href="#">Alle</a></div>
+                  <div class="M-CARD-HEAD"><h3>Geschichten</h3><a href="/geschichten">Alle</a></div>
                   <div class="M-SROW">
                     <div class="M-STITLE">Die Reise nach Berlin</div>
                     <div class="M-SEXCERPT">Im Frühjahr 1921 bestieg Ernst Raddatz erstmals den Zug nach Berlin …</div>
@@ -972,7 +1008,7 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
                   </div>
                   <div class="M-DROW dk">
                     <div style="width:15px;height:18px;background:#1E2638;border:1px solid rgba(255,255,255,.07);border-radius:2px;flex-shrink:0;display:flex;align-items:center;justify-content:center"><svg width="6" height="8" viewBox="0 0 20 26" fill="none" stroke="#4A5880" stroke-width="1.5"><path d="M3 1h9l5 5v19H3V1z"/><polyline points="12 1 12 6 18 6"/></svg></div>
-                    <div class="M-DINFO"><div class="M-DTITLE dk">Heiratsurkunde Raddatz-Müller, 1898</div><div class="M-DSENDER dk" style="color:#262E48">—</div></div>
+                    <div class="M-DINFO"><div class="M-DTITLE dk">Heiratsurkunde Raddatz-Müller, 1898</div><div class="M-DSENDER dk" style="color:#5A6888">—</div></div>
                     <div class="M-DDATE dk">vor 4 T.</div>
                   </div>
                   <div class="M-DROW dk">
@@ -1046,10 +1082,143 @@ body{font-family:'Helvetica Neue',Arial,sans-serif;background:#ECEAE4;color:#1A1
           <li>Avatare behalten ihre Farbe — Eigenfarbe, kein Token</li>
         </ul>
       </div>
+      <div class="ann-block">
+        <strong>Neue i18n-Schlüssel — messages/{de,en,es}.json</strong>
+        <ul>
+          <li><code>dashboard.greeting.morning</code> — „Guten Morgen" (vor 12:00)</li>
+          <li><code>dashboard.greeting.afternoon</code> — „Guten Tag" (12:00–18:00)</li>
+          <li><code>dashboard.greeting.evening</code> — „Guten Abend" (ab 18:00)</li>
+          <li><code>dashboard.welcome</code> — „Herzlich willkommen, {name}." (parametrisch)</li>
+          <li><code>dashboard.persons.viewAll</code> — „Alle {count} Personen →" (parametrisch)</li>
+          <li><code>dashboard.recentlyUpdated</code> — „Zuletzt aktualisiert"</li>
+          <li><code>dashboard.myDrafts</code> — „Meine Entwürfe"</li>
+          <li><code>dashboard.stat.documents</code> — „Dokumente" / mobil: „Dok."</li>
+          <li><code>dashboard.stat.persons</code> — „Personen" / mobil: „Pers."</li>
+          <li><code>dashboard.stat.stories</code> — „Geschichten" / mobil: „Gesch."</li>
+        </ul>
+      </div>
     </div>
   </div>
 </div>
 
+<!-- ══ IMPL-REF TABLE ══ -->
+<div class="impl-ref-section">
+  <div class="sec-h"><span class="sec-num" style="background:#4A6E8A">↗</span> Implementierungsreferenz — Tailwind-Klassen je Region</div>
+  <p style="font-size:11px;color:#888;margin-bottom:20px">Exakte Tailwind CSS 4-Klassen und Pixel-Werte für jeden UI-Bereich. <strong>Diese Werte gelten für die Implementierung</strong>, nicht die skalierten Mockup-Werte.</p>
+
+  <table class="impl-ref-table">
+    <thead>
+      <tr>
+        <th>Region</th>
+        <th>Tailwind-Klassen</th>
+        <th>Hinweise</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Seiten-Canvas</td>
+        <td><code>bg-canvas w-full</code></td>
+        <td class="note-cell">Vollbreite Viewport; Farbe: <code>--palette-sand</code> / <code>bg-canvas</code></td>
+      </tr>
+      <tr>
+        <td>Inhalts-Wrapper</td>
+        <td><code>max-w-7xl mx-auto px-8 py-8</code></td>
+        <td class="note-cell">1280 px max-width, 32 px padding allseitig</td>
+      </tr>
+      <tr>
+        <td>Header-Balken</td>
+        <td><code>bg-white border border-line rounded-sm px-4 py-3 flex items-center gap-4</code></td>
+        <td class="note-cell">Explizit <code>bg-white</code>, nicht <code>bg-surface</code> — weißer Hintergrund ist intentionell (B.1-Entscheidung)</td>
+      </tr>
+      <tr>
+        <td>Header: Gruß-Zeit</td>
+        <td><code>text-[6px] font-bold uppercase tracking-[.8px] text-[#C8B8A0]</code></td>
+        <td class="note-cell">Warm-beige, kein Design-Token — kandidiert für <code>--color-greeting-time</code></td>
+      </tr>
+      <tr>
+        <td>Header: Begrüßungsname</td>
+        <td><code>font-serif text-xl text-brand-navy</code></td>
+        <td class="note-cell">Georgia/Tinos; <code>text-xl</code> (20 px real)</td>
+      </tr>
+      <tr>
+        <td>Header: Trennlinie</td>
+        <td><code>w-px self-stretch bg-line flex-shrink-0</code></td>
+        <td class="note-cell">1 px vertikal; <code>--palette-line</code> = <code>#E8E4DF</code></td>
+      </tr>
+      <tr>
+        <td>Stat-Zahl</td>
+        <td><code>text-2xl font-black text-brand-navy leading-none block</code></td>
+        <td class="note-cell">Numerischer Wert; Block damit Label darunter sitzt</td>
+      </tr>
+      <tr>
+        <td>Stat-Label</td>
+        <td><code>text-[11px] font-bold uppercase tracking-[.8px] text-ink-3 block mt-0.5</code></td>
+        <td class="note-cell">Licht: <code>#706C68</code> (WCAG AA); Tailwind-Token <code>text-ink-3</code> TBD</td>
+      </tr>
+      <tr>
+        <td>Personen-Grid</td>
+        <td><code>grid grid-cols-4 gap-1.5</code></td>
+        <td class="note-cell">Mobile: <code>grid-cols-2</code> bei <code>sm:</code> (640 px)</td>
+      </tr>
+      <tr>
+        <td>Personen-Kachel</td>
+        <td><code>bg-surface border border-line rounded-sm p-2.5 flex flex-col items-center text-center gap-1.5 no-underline</code></td>
+        <td class="note-cell"><code>bg-surface</code> = <code>--palette-surface</code>; kein Bottom-Accent</td>
+      </tr>
+      <tr>
+        <td>Personen-Avatar</td>
+        <td><code>w-9 h-9 rounded-full flex items-center justify-center font-black text-white text-[9px] shadow-sm flex-shrink-0</code></td>
+        <td class="note-cell">34 px real ≈ <code>w-9</code> (36 px) — nächster Tailwind-Step; Avatar-Farbe per Person-Eigenfarbe</td>
+      </tr>
+      <tr>
+        <td>Mint-Pill Badge</td>
+        <td><code>text-[11px] font-bold text-brand-navy bg-[#D4F0EE] px-1.5 py-px rounded-full</code></td>
+        <td class="note-cell">Token-Kandidat: <code>--color-mint-pill</code> / <code>bg-mint-soft</code></td>
+      </tr>
+      <tr>
+        <td>„Alle N Personen →"</td>
+        <td><code>text-xs font-semibold text-[#4A6E8A] no-underline text-right block mt-1</code></td>
+        <td class="note-cell">Direkte Farbe (kein opacity-Trick) — WCAG AA auf <code>bg-canvas</code></td>
+      </tr>
+      <tr>
+        <td>Content-Card</td>
+        <td><code>bg-surface border border-line rounded-sm overflow-hidden flex flex-col</code></td>
+        <td class="note-cell">Gleiche Card-Sprache wie restliche App</td>
+      </tr>
+      <tr>
+        <td>Card-Kopfzeile</td>
+        <td><code>flex items-center justify-between px-3 py-1.5 border-b border-line</code></td>
+        <td class="note-cell">h3: <code>text-[11px] font-bold uppercase tracking-[.12em] text-ink-3</code></td>
+      </tr>
+      <tr>
+        <td>Dok.-Datum</td>
+        <td><code>text-[12px] text-ink-3 whitespace-nowrap flex-shrink-0</code></td>
+        <td class="note-cell">Licht: <code>#706C68</code> (WCAG AA); nicht <code>#C8C4BE</code></td>
+      </tr>
+      <tr>
+        <td>Story-Excerpt</td>
+        <td><code>text-xs text-ink-2 leading-relaxed line-clamp-2</code></td>
+        <td class="note-cell">2 Zeilen max via Tailwind <code>line-clamp-2</code></td>
+      </tr>
+      <tr>
+        <td>Story-Meta</td>
+        <td><code>text-[11px] text-ink-3</code></td>
+        <td class="note-cell">Licht: <code>#706C68</code> (WCAG AA)</td>
+      </tr>
+      <tr>
+        <td>Entwürfe-Card</td>
+        <td><code>bg-surface border border-line border-l-[3px] border-l-brand-mint rounded-sm overflow-hidden</code></td>
+        <td class="note-cell">Mint Left-Border als visueller Anker für BLOG_WRITE-Zone</td>
+      </tr>
+      <tr>
+        <td>Dark Mode</td>
+        <td><code>dark:bg-surface dark:border-white/8 dark:text-ink</code> (via Tailwind <code>dark:</code>)</td>
+        <td class="note-cell">Nicht <code>!important</code>-Overrides aus Spec — spec-DK- Klassen sind Annäherungen</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
 </div>
 </body>
 </html>