feat(rennmaeuse): Tiere-Liste neu im Rennmaus-Filter-Design

Filter-UX aus dem Design:
- Quick-Chip-Kategorien (Status/Geschlecht/Farbschlag/Herkunft) öffnen ein
  Bottom-Sheet mit Mehrfachauswahl (suchbar bei Farbschlag/Herkunft); aktive
  Filter als entfernbare Chips; Sortierung + "Externe Ahnen" als gleich große
  Chips (Sortierung öffnet dasselbe Drawer).
- Neue zweizeilige Tierkarte (Name + Geschlechts-Kreis + Status-Badge, Meta-Zeile),
  cardIn/Chip/Sheet-Animationen, Titel blendet beim Scrollen aus.

App-weit:
- Design-Palette (Creme/Braun/Terrakotta), Hanken-Grotesk-Schrift und gemeinsamer
  --shadow-Token; obere "Rennmaus-Manager"-Titelleiste entfernt (mobil bleibt die
  untere Aktionsleiste); fixe Shell-Höhe, nur der Hauptbereich scrollt.

Funktion:
- Infinite Scroll via useInfiniteList (seitenweise) + IntersectionObserver-Sentinel.
- Namensgenerator: Option männlich/weiblich/egal.
- Mehrfach-OR-Filter über gridify orGroup; e2e an die neue UI angepasst.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

gerbil-manager-web/src/index.css

@@ -2,15 +2,20 @@
    Seitenleiste links ab 768px (Laptop). */
 
 :root {
-  --color-bg: #faf7f2;
+  /* DESIGN (Rennmaus Filter): the app palette is the design's creme/brown/terracotta. */
+  --color-bg: #f6efe2;
   --color-surface: #ffffff;
-  --color-border: #e5ddd0;
-  --color-text: #3b3026;
-  --color-text-muted: #8a7d6b;
-  --color-accent: #b5651d;
-  --color-accent-soft: #f6e7d7;
+  --color-border: #e7dcc8;
+  --color-text: #3d2e23;
+  --color-text-muted: #8c7f6e;
+  --color-text-faint: #b4a790;
+  --color-accent: #a85f2e;
+  --color-accent-soft: #f3e7da;
+  /* DESIGN (Rennmaus Filter): the single soft elevation used on cards, pills,
+     the search bar and buttons. */
+  --shadow: 0 1px 2px rgba(61, 46, 35, 0.06), 0 2px 8px rgba(61, 46, 35, 0.05);
 
-  font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  font-family: 'Hanken Grotesk', system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   color: var(--color-text);
   background-color: var(--color-bg);
@@ -41,46 +46,41 @@ a {
 
 /* --- Grundgerüst (Smartphone) --- */
 
+/* DESIGN: the top "Rennmaus-Manager" title bar is removed; on mobile only the
+   bottom action bar remains, on desktop the left sidebar.
+   The shell is a fixed viewport box and ONLY the main area scrolls — so the bottom
+   nav (mobile) and the sidebar (desktop) stay put, and the page header's
+   position: sticky pins reliably to the top of the scrolling main area. */
 .app-shell {
   display: grid;
-  min-height: 100dvh;
-  grid-template-rows: auto 1fr auto;
+  height: 100dvh;
+  overflow: hidden;
+  grid-template-rows: 1fr auto;
   grid-template-areas:
-    'header'
     'main'
     'nav';
 }
 
-.app-header {
-  grid-area: header;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1rem;
-  background: var(--color-surface);
-  border-bottom: 1px solid var(--color-border);
-  position: sticky;
-  top: 0;
-}
-
-.app-logo {
-  font-size: 1.5rem;
-}
-
-.app-title {
-  font-size: 1.15rem;
-  margin: 0;
-}
-
 .app-main {
   grid-area: main;
-  padding: 1rem;
+  /* No top padding: the page's sticky header pins flush to the top with no gap
+     (pages add their own top spacing via .page). */
+  padding: 0 1rem 1.5rem;
   max-width: 60rem;
   width: 100%;
-  /* UX-MOBILE-2: prevent any wide content (e.g. genotype table) from making
-     the page body scroll horizontally. The .genotype-table-scroll wrapper
-     provides the per-table horizontal scroll. */
+  /* MAIN is the scroll container: min-height:0 lets the 1fr grid row shrink below
+     its content so it can scroll. overflow-anchor:none stops the browser from
+     re-adjusting scroll when the sticky title collapses (no scroll "fight"). */
+  min-height: 0;
+  overflow-y: auto;
   overflow-x: hidden;
+  overflow-anchor: none;
+}
+
+/* Top spacing for page content (replaces the removed .app-main top padding). The
+   Rennmäuse page opts out — its sticky header provides its own top padding. */
+.page {
+  padding-top: 1rem;
 }
 
 /* Tab-Leiste unten */
@@ -92,6 +92,8 @@ a {
   border-top: 1px solid var(--color-border);
   position: sticky;
   bottom: 0;
+  /* Above the sticky page header + cards so it is never overlapped. */
+  z-index: 30;
   padding-bottom: env(safe-area-inset-bottom);
 }
 
@@ -122,10 +124,8 @@ a {
 @media (min-width: 768px) {
   .app-shell {
     grid-template-columns: 14rem 1fr;
-    grid-template-rows: auto 1fr;
-    grid-template-areas:
-      'header header'
-      'nav    main';
+    grid-template-rows: 1fr;
+    grid-template-areas: 'nav main';
   }
 
   .app-nav {
@@ -136,6 +136,9 @@ a {
     border-right: 1px solid var(--color-border);
     padding: 1rem 0.5rem;
     position: static;
+    /* Sidebar stays fixed; scrolls internally only if the link list is taller
+       than the viewport. */
+    overflow-y: auto;
   }
 
   .nav-link {
@@ -156,7 +159,7 @@ a {
   }
 
   .app-main {
-    padding: 1.5rem 2rem;
+    padding: 0 2rem 1.5rem;
   }
 }