Charakter-Vorstellungen umgebaut: kompakte Karten nebeneinander statt großflächiger Text/Foto-Splits

Die großen abwechselnden Foto/Text-Boxen (voller Formularbreite je
Charakter, viel Leerraum bei kurzem Text) sind ersetzt durch kompakte
Karten im exakt gleichen Stil wie die Produktkarten im Shop-Grid: Foto
oben, Text darunter in voller Kartenbreite, alle Charaktere einer Familie
nebeneinander in einer Reihe statt einzeln untereinander.

Betrifft alle Tier-Familien (Hase, Kuh, Wal, Oktopus, Schildkröte,
Pinguin) — wächst weiterhin automatisch mit, sobald neue Charaktere
ergänzt werden. Die "Über die Kreative"-Seite nutzt dieselbe .intro-
CSS-Klasse für ihr eigenes Layout und ist unangetastet geblieben.

Verifiziert per Puppeteer: alle drei Hase-Karten korrekt (Foto, Text,
Link), "Über die Kreative" weiterhin fehlerfrei und unverändert.

src/styles/global.css

@@ -804,6 +804,17 @@ a:focus-visible, button:focus-visible {
    noch mehr Produkte derselben Reihe kommen (Charakter-Familie), egal wie viele es am Ende sind. */
 .more-variants-label { text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-text-muted); margin-bottom: 0.8rem; }
 
+/* Charakter-Karten auf den Tier-Familien-Seiten (z.B. HasiDog/HasiGott/Mama Hase unter "Hase") —
+   exakt dieselbe Karten-Optik wie die Produktkarten im Shop-Grid (Foto oben, Text darunter in
+   voller Breite), nur mit persönlichem Charaktertext statt Produktbeschreibung. */
+.character-card { display: flex; flex-direction: column; gap: 0.6rem; padding: 1rem; }
+.character-card .product-media { position: relative; }
+.character-card h3 { font-size: 1.15rem; margin: 0.1rem 0 0; }
+.character-card h3 a { color: inherit; transition: color 0.2s var(--ease); }
+.character-card h3 a:hover { color: var(--c-accent); }
+.character-card-desc { margin: 0; color: var(--c-text-muted); font-size: 0.92rem; }
+.character-more-btn { margin-top: auto; align-self: flex-start; }
+
 /* Hauptkategorie-Überschrift zwischen den Unterkategorie-Chips und der eigentlichen
    Produktreihe auf der Kategorie-Seite — macht klar, welche Hauptkategorie man gerade
    durchstöbert, fällt bewusst etwas mehr auf als die stille "Unterkategorien"-Beschriftung. */