Merge feature/stammbaum-expand (STAMMBAUM-EXPAND): prominenter ＋-Vorfahren-Button (40px) + Bottom-Mini-Legende (Name→Akte)

gerbil-manager-web/e2e/stammbaum.spec.ts

@@ -79,3 +79,34 @@ test('Namenloser Ahne zeigt Platzhalter in der Stammbaum-Karte (UI-POLISH-2)', a
   // Karte selbst zeigt '(ohne Namen)' statt leer
   await expect(page.locator('.pedigree-card__nametext')).toHaveText(de.pages.gerbils.nameless)
 })
+
+test('Mini-Legende zeigt alle drei Interaktionshinweise (STAMMBAUM-EXPAND)', async ({ page }) => {
+  skipUnlessMock()
+  await page.goto('/rennmaeuse/kruemel/stammbaum')
+  await expect(page.locator('.pedigree-card').first()).toBeVisible()
+
+  const hints = page.locator('.stammbaum-hints')
+  await expect(hints).toBeVisible()
+  await expect(hints).toContainText(t.tapHint)
+  await expect(hints).toContainText(t.hintName)
+  await expect(hints).toContainText(t.hintExpand)
+})
+
+test('＋-Knopf ist sichtbar und lädt weitere Vorfahren nach (STAMMBAUM-EXPAND)', async ({ page }) => {
+  skipUnlessMock()
+  await page.goto('/rennmaeuse/kruemel/stammbaum')
+  await expect(page.locator('.pedigree-card').first()).toBeVisible()
+
+  // Einpassen, damit die 4. Generation (Emil mit ＋) im Viewport liegt.
+  const fit = page.getByRole('button', { name: t.zoomFit })
+  if (await fit.isVisible()) await fit.click()
+  await page.waitForTimeout(600)
+
+  // ＋-Button muss an der Tiefengrenze erscheinen (Emil hat litterId w-emil).
+  const expandBtn = page.getByRole('button', { name: t.expand }).first()
+  await expect(expandBtn).toBeVisible()
+
+  // Klick auf ＋: Emil wird aufgeklappt → Max (sein Vater) taucht als Link auf.
+  await expandBtn.click({ force: true })
+  await expect(page.getByRole('link', { name: 'Max' })).toBeVisible({ timeout: 8000 })
+})

gerbil-manager-web/src/pages/StammbaumPage.tsx

@@ -335,7 +335,11 @@ export default function StammbaumPage() {
             />
           )}
         </div>
-        <p className="stammbaum-hint">{t.tapHint}</p>
+        <ul className="stammbaum-hints">
+          <li>{t.tapHint}</li>
+          <li>{t.hintName}</li>
+          <li>{t.hintExpand}</li>
+        </ul>
       </section>
 
       {/* Druckansicht: am Bildschirm unsichtbar, ersetzt beim Drucken alles. */}

gerbil-manager-web/src/pages/stammbaum.css

@@ -34,10 +34,15 @@
   color: var(--color-text);
 }
 
-.stammbaum-hint {
+.stammbaum-hints {
-  font-size: 0.8rem;
+  list-style: none;
-  color: var(--color-text-muted);
+  padding: 0;
   margin: 0.4rem 0 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.1rem 1rem;
+  font-size: 0.78rem;
+  color: var(--color-text-muted);
 }
 
 /* ── Zeichenfläche ────────────────────────────────────────────── */
@@ -175,20 +180,27 @@
 .pedigree-card__expand {
   flex: none;
   margin-left: auto;
-  width: 32px;
+  width: 40px;
-  height: 32px;
+  height: 40px;
+  padding: 0;
   border-radius: 50%;
-  border: 1px solid var(--color-accent);
+  border: none;
-  background: var(--color-accent-soft);
-  color: var(--color-accent);
-  font-size: 1.05rem;
-  line-height: 1;
-  cursor: pointer;
-}
-
-.pedigree-card__expand:hover {
   background: var(--color-accent);
   color: #fff;
+  font-size: 1.3rem;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 1px 5px rgb(0 0 0 / 28%);
+}
+
+.pedigree-card__expand:hover,
+.pedigree-card__expand:focus-visible {
+  opacity: 0.82;
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
 }
 
 /* ── Druckansicht (Ahnentafel als CSS-Grid, Hunde-Zertifikat-Optik) ──

gerbil-manager-web/src/strings/de.ts

@@ -355,6 +355,9 @@ export const de = {
       /** Auf Karten am Rand: weitere Vorfahren nachladen. */
       expand: 'Vorfahren laden',
       tapHint: 'Tippe auf ein Tier, um dessen Stammbaum anzuzeigen.',
+      /** Mini-Legende unter dem Baum (STAMMBAUM-EXPAND). */
+      hintName: 'Namenslink: Tierakte öffnen',
+      hintExpand: '＋: weitere Vorfahren nachladen',
       zoomIn: 'Vergrößern',
       zoomOut: 'Verkleinern',
       zoomFit: 'Ansicht einpassen',