Charakter-Vorstellungen: Text und Foto bekommen beide die Kartenoptik der Produktkarten

Auf den Tier-Familien-Seiten (z.B. /shop/diy-plushies/hase/) standen Foto
und Text bisher als freischwebende Elemente nebeneinander, ohne Rahmen.
Jetzt bekommen beide Seiten die gleiche Verlaufsrand-"Kisten"-Optik wie
die Produktkarten im Shop-Grid — zwei gleichwertige, gerahmte Boxen
nebeneinander statt unauffälligem Text neben einem randlosen Foto.

Zusätzlich: HasiDog (1. Charakter der Hase-Familie) hat jetzt den Text
links und das Foto rechts (vorher umgekehrt) — die Abwechslung für
weitere Charaktere (HasiGott, Mama Hase, ...) bleibt erhalten, nur die
Startseite ist gespiegelt.

Verifiziert per Puppeteer-Screenshot: alle drei Hase-Charaktere zeigen
jetzt beide Karten im Verlaufsrand-Stil, HasiDog korrekt mit Text links.

src/pages/ch/shop/[kategorie]/[unterkategorie].astro

@@ -30,7 +30,7 @@ const characters = sub.characters ?? [];
 const characterEntries = characters.map((char, index) => ({
   char,
   product: alleProdukte.find((p) => p.charakter === char.slug),
-  reverse: index % 2 === 1,
+  reverse: index % 2 === 0,
 }));
 
 // Produkte ohne (bekannte) Charakter-Zuordnung landen als "weitere Modelle" darunter.

src/pages/en/shop/[kategorie]/[unterkategorie].astro

@@ -30,7 +30,7 @@ const characters = sub.characters ?? [];
 const characterEntries = characters.map((char, index) => ({
   char,
   product: alleProdukte.find((p) => p.charakter === char.slug),
-  reverse: index % 2 === 1,
+  reverse: index % 2 === 0,
 }));
 
 // Produkte ohne (bekannte) Charakter-Zuordnung landen als "weitere Modelle" darunter.

src/pages/fr/shop/[kategorie]/[unterkategorie].astro

@@ -30,7 +30,7 @@ const characters = sub.characters ?? [];
 const characterEntries = characters.map((char, index) => ({
   char,
   product: alleProdukte.find((p) => p.charakter === char.slug),
-  reverse: index % 2 === 1,
+  reverse: index % 2 === 0,
 }));
 
 // Produkte ohne (bekannte) Charakter-Zuordnung landen als "weitere Modelle" darunter.

src/pages/shop/[kategorie]/[unterkategorie].astro

@@ -30,7 +30,7 @@ const characters = sub.characters ?? [];
 const characterEntries = characters.map((char, index) => ({
   char,
   product: alleProdukte.find((p) => p.charakter === char.slug),
-  reverse: index % 2 === 1,
+  reverse: index % 2 === 0,
 }));
 
 // Produkte ohne (bekannte) Charakter-Zuordnung landen als "weitere Modelle" darunter.

src/styles/global.css

@@ -615,14 +615,46 @@ a:focus-visible, button:focus-visible {
 .creator-section { align-items: center; }
 .creator-photo { max-width: 420px; margin-inline: auto; }
 
-/* "Über die Kreative" */
-.intro { align-items: center; grid-template-columns: 0.85fr 1.15fr; gap: 3rem; }
+/* "Über die Kreative" / Charakter-Vorstellung (Unterkategorie-Familienseiten) */
+.intro { align-items: stretch; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
 .intro h2 a { color: inherit; transition: color 0.2s var(--ease); }
 .intro h2 a:hover { color: var(--c-accent); }
-.intro .portrait-frame.portrait { display: block; }
+
+/* Foto UND Text bekommen auf den Charakter-Vorstellungen jeweils die gleiche "Kisten"-Optik wie
+   die Produktkarten (Verlaufsrand, siehe .card) — zwei gleichwertige, gerahmte Boxen nebeneinander
+   statt freischwebendem Text neben einem Foto ohne Rahmen. */
+.intro .portrait-frame.portrait,
+.intro .intro-text {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  border: 1.5px solid transparent;
+  border-radius: var(--radius-m);
+  background:
+    linear-gradient(165deg, var(--c-anthracite-light), var(--c-anthracite)) padding-box,
+    linear-gradient(135deg, var(--c-accent), var(--c-purple-glow) 45%, var(--c-sale) 100%) border-box;
+  padding: 1.7rem;
+  box-shadow: var(--shadow-card);
+  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), filter 0.3s var(--ease);
+}
+.intro .portrait-frame.portrait:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-card-hover);
+  filter: brightness(1.06);
+}
+.intro .portrait-frame.portrait::before { display: none; }
+/* Das Foto selbst braucht innerhalb der neuen Karte keinen zweiten Ring mehr — die Karte rahmt
+   schon, ein zusätzlicher Rand würde nur "doppelt gerahmt" aussehen. */
+.intro .portrait-frame.portrait img,
+.intro .portrait-frame.portrait .img-placeholder {
+  border: none;
+  box-shadow: none;
+  border-radius: var(--radius-s);
+  aspect-ratio: 1 / 1;
+}
+
 /* Wechselt innerhalb einer Tier-Familie ab: Foto links/rechts, Text jeweils gegenüber — sorgt
    für optische Abwechslung, sobald mehrere Varianten einer Serie eigene Seiten bekommen. */
-.intro-reverse { grid-template-columns: 1.15fr 0.85fr; }
 .intro-reverse .portrait-frame.portrait { order: 2; }
 .intro-reverse .intro-text { order: 1; }
 @media (max-width: 800px) {