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.

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) ──