diff --git a/docs/architecture/db/db-orm.puml b/docs/architecture/db/db-orm.puml
index 7b03c156..cb37a60f 100644
--- a/docs/architecture/db/db-orm.puml
+++ b/docs/architecture/db/db-orm.puml
@@ -186,6 +186,7 @@ package "Persons" {
     notes : TEXT
     birth_year : INTEGER
     death_year : INTEGER
+    generation : SMALLINT
     family_member : BOOLEAN NOT NULL
     source_ref : VARCHAR(255) UNIQUE
     provisional : BOOLEAN NOT NULL
diff --git a/docs/specs/stammbaum-tree-spec.html b/docs/specs/stammbaum-tree-spec.html
index 04b86348..b28ffcbd 100644
--- a/docs/specs/stammbaum-tree-spec.html
+++ b/docs/specs/stammbaum-tree-spec.html
@@ -244,8 +244,12 @@ body{font-family:'Montserrat',system-ui,sans-serif;background:#ECEAE4;color:#1A1
         <td><span class="swatch" style="background:rgba(255,255,255,.6);border:1px solid #ccc"></span>rgba(255,255,255,.6) — decorative, aria-hidden years</td>
       </tr>
       <tr>
-        <td>Gen label</td>
-        <td><span class="swatch" style="background:#6b7280"></span>#6b7280 — 8 px, tracking 2 px, aria-hidden</td>
+        <td>Gutter label</td>
+        <td><span class="swatch" style="background:#4b5563"></span>#4b5563 (var(--c-ink-2)) — 12 px, tracking 0.08 em, font-weight 700, screen-reader-labelled</td>
+      </tr>
+      <tr>
+        <td>Gutter stripe</td>
+        <td><span class="swatch" style="background:rgba(161,220,216,.08);border:1px solid #ccc"></span>rgba(161,220,216,.08) — decorative full-row underlay alternating with transparent</td>
       </tr>
       <tr>
         <td>Panel surface</td>
@@ -302,8 +306,12 @@ body{font-family:'Montserrat',system-ui,sans-serif;background:#ECEAE4;color:#1A1
         <td><span class="swatch" style="background:#8b97a5;border:1px solid #444"></span>#8b97a5<span class="pass" style="background:rgba(209,250,229,.15);color:#6EE7B7">7.1:1 AAA ✓</span></td>
       </tr>
       <tr>
-        <td>Gen label</td>
-        <td><span class="swatch" style="background:#4e6070;border:1px solid #333"></span>#4e6070 — aria-hidden</td>
+        <td>Gutter label</td>
+        <td><span class="swatch" style="background:#9ca3af;border:1px solid #333"></span>#9ca3af (var(--c-ink-2)) — 12 px, tracking 0.08 em, font-weight 700, screen-reader-labelled</td>
+      </tr>
+      <tr>
+        <td>Gutter stripe</td>
+        <td><span class="swatch" style="background:rgba(161,220,216,.14);border:1px solid #333"></span>rgba(161,220,216,.14) — decorative full-row underlay alternating with transparent</td>
       </tr>
       <tr>
         <td>Panel surface</td>
@@ -355,7 +363,6 @@ body{font-family:'Montserrat',system-ui,sans-serif;background:#ECEAE4;color:#1A1
           <div class="stb-page-head">
             <div class="stb-page-title">Stammbaum</div>
             <div class="stb-controls">
-              <div class="stb-btn outline" style="font-size:8px">Generationen ▾</div>
               <div class="stb-zoom">
                 <div class="stb-zoom-btn">−</div>
                 <div class="stb-zoom-btn">+</div>
@@ -507,7 +514,6 @@ body{font-family:'Montserrat',system-ui,sans-serif;background:#ECEAE4;color:#1A1
           <div class="stb-page-head">
             <div class="stb-page-title">Stammbaum</div>
             <div class="stb-controls">
-              <div class="stb-btn outline-dark" style="font-size:8px">Generationen ▾</div>
               <div class="stb-zoom">
                 <div class="stb-zoom-btn">−</div>
                 <div class="stb-zoom-btn">+</div>
@@ -751,7 +757,6 @@ body{font-family:'Montserrat',system-ui,sans-serif;background:#ECEAE4;color:#1A1
         <div class="stb-page-head">
           <div class="stb-page-title">Stammbaum</div>
           <div class="stb-controls">
-            <div class="stb-btn outline" style="font-size:8px">Generationen ▾</div>
             <div class="stb-zoom">
               <div class="stb-zoom-btn">−</div>
               <div class="stb-zoom-btn">+</div>
@@ -998,10 +1003,16 @@ body{font-family:'Montserrat',system-ui,sans-serif;background:#ECEAE4;color:#1A1
         <td>Filled circle at connector midpoints; same color as connectors</td>
       </tr>
       <tr>
-        <td>Gen label</td>
-        <td><code>text-[8px] tracking-[2px] uppercase</code></td>
-        <td>8 px</td>
-        <td><code>aria-hidden="true"</code>; #6b7280 light · #4e6070 dark</td>
+        <td>Gutter label</td>
+        <td><code>font-sans text-[12px] font-bold tracking-[0.08em] uppercase</code></td>
+        <td>12 px</td>
+        <td>Wrapped in <code>&lt;g role="text" aria-label="Generation N"&gt;</code> so screen readers announce the full word. Fill <code>var(--c-ink-2)</code>. Renders the un-shifted <code>node.generation</code> value, never the post-normalise rank.</td>
+      </tr>
+      <tr>
+        <td>Gutter stripe underlay</td>
+        <td>SVG <code>&lt;rect&gt;</code> aria-hidden, alternating <code>transparent</code> / <code>var(--c-gutter-stripe)</code></td>
+        <td>NODE_H + ROW_GAP tall, full viewBox width</td>
+        <td>Decorative band per occupied generation row. Hidden entirely below <code>md</code> (GUTTER_WIDTH = 0).</td>
       </tr>
       <tr>
         <td>Node name text</td>