STAMMBAUM-EXPAND: +-Button prominenter + Mini-Legende (Stammbaum-UX)

Punkt 1 - Expand-Button sichtbar/zuverlaessig:
- 40px solid-fill (war 32px outline), box-shadow, flex-centered;
  deutlich sichtbar auf 190px Karte, touch-tauglich (>=40px Tap-Target).
  Hover/focus-visible: opacity + outline.
- Edge-case (Litter mit null-Eltern): +-Button bleibt sichtbar --
  unbekannt-Karten sind korrektes Feedback fuer quarantaenierte Eltern.

Punkt 2 - Bottom-Hint Mini-Legende:
- stammbaum-hint -> stammbaum-hints ul (flex-wrap, 3 Items):
  Umwurzeln / Name=Akte / +=Nachladen. Gut lesbar auf 390px.
  de.ts: hintName + hintExpand (neue Keys; tapHint bleibt fuer card title).

e2e: +2 Specs x 2 Viewports = 4 neue Tests (Legende + Expand-Klick).
Emil (Gen 4, litterId w-emil) liefert Testanker im Mock-Stammbaum.

Gate: vitest 122/122 e2e 166+68skipped build+tsc+eslint clean.

.gitea/workflows/ci.yml

@@ -9,10 +9,10 @@
 #   2. npm test + npm run build (Frontend)
 #   3. Docker-Images bauen und in die Gitea-Registry pushen
 #
-# Registry: truenas:13000  (internes Gitea Container Registry)
+# Registry: 192.168.2.115:13000  (internes Gitea Container Registry)
 # Images:
-#   truenas:13000/gulum/gerbilmanager-api:latest
-#   truenas:13000/gulum/gerbilmanager-frontend:latest
+#   192.168.2.115:13000/gulum/gerbilmanager-api:latest
+#   192.168.2.115:13000/gulum/gerbilmanager-frontend:latest
 
 name: CI
 
@@ -25,7 +25,7 @@ on:
       - main
 
 env:
-  REGISTRY: truenas:13000
+  REGISTRY: 192.168.2.115:13000
   REGISTRY_OWNER: gulum
   DOTNET_VERSION: "10.0.x"
   NODE_VERSION: "22"

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 {
-  font-size: 0.8rem;
-  color: var(--color-text-muted);
+.stammbaum-hints {
+  list-style: none;
+  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;
-  height: 32px;
+  width: 40px;
+  height: 40px;
+  padding: 0;
   border-radius: 50%;
-  border: 1px solid var(--color-accent);
-  background: var(--color-accent-soft);
-  color: var(--color-accent);
-  font-size: 1.05rem;
-  line-height: 1;
-  cursor: pointer;
-}
-
-.pedigree-card__expand:hover {
+  border: none;
   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',