diff --git a/src/pages/ch/shop/[kategorie]/[unterkategorie].astro b/src/pages/ch/shop/[kategorie]/[unterkategorie].astro
index dfc9291..a782dc3 100644
--- a/src/pages/ch/shop/[kategorie]/[unterkategorie].astro
+++ b/src/pages/ch/shop/[kategorie]/[unterkategorie].astro
@@ -21,16 +21,15 @@ const sub = getSubcategory(kategorie!, unterkategorie!)!;
 // Alle Produkte dieser Unterkategorie (unabhängig davon, welchem Charakter sie zugeordnet sind).
 const alleProdukte = productsByUnterkategorie(category.slug, sub.slug);
 
-// Jeder Charakter dieser Tier-Familie bekommt seine eigene Box, abwechselnd Foto links/rechts —
-// 1. Charakter links, 2. rechts, 3. wieder links, usw. Sobald VanVan im Adminbereich neue
-// Charaktere UND passende Produkte ergänzt, wächst diese Liste automatisch mit. Fehlt einem
-// Charakter noch ein echtes Produkt, zeigt seine Box trotzdem schon den Charaktertext (nur ohne
+// Jeder Charakter dieser Tier-Familie bekommt seine eigene kompakte Karte (wie die Produktkarten
+// im Shop-Grid), alle nebeneinander in einer Reihe. Sobald VanVan im Adminbereich neue
+// Charaktere UND passende Produkte ergänzt, wächst diese Reihe automatisch mit. Fehlt einem
+// Charakter noch ein echtes Produkt, zeigt seine Karte trotzdem schon den Charaktertext (nur ohne
 // Foto) — die Seite muss nicht auf das erste Foto warten, um zu existieren.
 const characters = sub.characters ?? [];
-const characterEntries = characters.map((char, index) => ({
+const characterEntries = characters.map((char) => ({
   char,
   product: alleProdukte.find((p) => p.charakter === char.slug),
-  reverse: index % 2 === 0,
 }));
 
 // Produkte ohne (bekannte) Charakter-Zuordnung landen als "weitere Modelle" darunter.
@@ -51,36 +50,27 @@ const weitere = alleProdukte.filter((p) => !zugeordneteSlugs.has(p.slug));
   </div>
 
   {characterEntries.length > 0 ? (
-    characterEntries.map(({ char, product, reverse }) => (
-      <section class="section-tight">
-        <div class={`container grid grid-2 intro ${reverse ? "intro-reverse" : ""}`}>
-          {product ? (
-            <a class="portrait-frame portrait" href={`/ch/produkt/${product.slug}/`} aria-label={product.name[lang]}>
-              {product.bilder && product.bilder.length > 0 ? (
+    <section class="section-tight">
+      <div class="container grid grid-3">
+        {characterEntries.map(({ char, product }) => (
+          <div class="card character-card">
+            <div class="product-media">
+              {product && product.bilder && product.bilder.length > 0 ? (
                 <img class="product-photo" src={product.bilder[0]} alt={product.name[lang]} loading="lazy" />
               ) : (
-                <div class="img-placeholder" role="img" aria-label={product.name[lang]}></div>
+                <div class="img-placeholder" role="img" aria-label={product ? product.name[lang] : char.name[lang]}></div>
               )}
-            </a>
-          ) : (
-            <div class="portrait-frame portrait">
-              <div class="img-placeholder" role="img" aria-label={char.name[lang]}></div>
             </div>
-          )}
-          <div class="intro-text">
             {char.vorstellung && <span class="eyebrow">{char.vorstellung[lang].split("\n")[0]}</span>}
-            <h2>{product ? <a href={`/ch/produkt/${product.slug}/`}>{product.name[lang]}</a> : char.name[lang]}</h2>
-            <p class="lead">{char.vorstellung ? char.vorstellung[lang].split("\n")[1] : (product ? product.beschreibung[lang] : t.shop.subcategoryEmpty)}</p>
+            <h3>{product ? <a href={`/ch/produkt/${product.slug}/`}>{product.name[lang]}</a> : char.name[lang]}</h3>
+            <p class="character-card-desc">{char.vorstellung ? char.vorstellung[lang].split("\n")[1] : (product ? product.beschreibung[lang] : t.shop.subcategoryEmpty)}</p>
             {char.mehrLink && (
-              <div class="character-more">
-                <p>Wenn du meh über mich wüsse witt, de klick</p>
-                <a class="btn btn-outline" href={char.mehrLink} target="_blank" rel="noopener">da →</a>
-              </div>
+              <a class="btn btn-outline btn-sm character-more-btn" href={char.mehrLink} target="_blank" rel="noopener">da →</a>
             )}
           </div>
-        </div>
-      </section>
-    ))
+        ))}
+      </div>
+    </section>
   ) : (
     <section class="section-tight">
       <div class="container">
diff --git a/src/pages/en/shop/[kategorie]/[unterkategorie].astro b/src/pages/en/shop/[kategorie]/[unterkategorie].astro
index 1072d84..3698927 100644
--- a/src/pages/en/shop/[kategorie]/[unterkategorie].astro
+++ b/src/pages/en/shop/[kategorie]/[unterkategorie].astro
@@ -21,16 +21,15 @@ const sub = getSubcategory(kategorie!, unterkategorie!)!;
 // Alle Produkte dieser Unterkategorie (unabhängig davon, welchem Charakter sie zugeordnet sind).
 const alleProdukte = productsByUnterkategorie(category.slug, sub.slug);
 
-// Jeder Charakter dieser Tier-Familie bekommt seine eigene Box, abwechselnd Foto links/rechts —
-// 1. Charakter links, 2. rechts, 3. wieder links, usw. Sobald VanVan im Adminbereich neue
-// Charaktere UND passende Produkte ergänzt, wächst diese Liste automatisch mit. Fehlt einem
-// Charakter noch ein echtes Produkt, zeigt seine Box trotzdem schon den Charaktertext (nur ohne
+// Jeder Charakter dieser Tier-Familie bekommt seine eigene kompakte Karte (wie die Produktkarten
+// im Shop-Grid), alle nebeneinander in einer Reihe. Sobald VanVan im Adminbereich neue
+// Charaktere UND passende Produkte ergänzt, wächst diese Reihe automatisch mit. Fehlt einem
+// Charakter noch ein echtes Produkt, zeigt seine Karte trotzdem schon den Charaktertext (nur ohne
 // Foto) — die Seite muss nicht auf das erste Foto warten, um zu existieren.
 const characters = sub.characters ?? [];
-const characterEntries = characters.map((char, index) => ({
+const characterEntries = characters.map((char) => ({
   char,
   product: alleProdukte.find((p) => p.charakter === char.slug),
-  reverse: index % 2 === 0,
 }));
 
 // Produkte ohne (bekannte) Charakter-Zuordnung landen als "weitere Modelle" darunter.
@@ -51,36 +50,27 @@ const weitere = alleProdukte.filter((p) => !zugeordneteSlugs.has(p.slug));
   </div>
 
   {characterEntries.length > 0 ? (
-    characterEntries.map(({ char, product, reverse }) => (
-      <section class="section-tight">
-        <div class={`container grid grid-2 intro ${reverse ? "intro-reverse" : ""}`}>
-          {product ? (
-            <a class="portrait-frame portrait" href={`/en/produkt/${product.slug}/`} aria-label={product.name[lang]}>
-              {product.bilder && product.bilder.length > 0 ? (
+    <section class="section-tight">
+      <div class="container grid grid-3">
+        {characterEntries.map(({ char, product }) => (
+          <div class="card character-card">
+            <div class="product-media">
+              {product && product.bilder && product.bilder.length > 0 ? (
                 <img class="product-photo" src={product.bilder[0]} alt={product.name[lang]} loading="lazy" />
               ) : (
-                <div class="img-placeholder" role="img" aria-label={product.name[lang]}></div>
+                <div class="img-placeholder" role="img" aria-label={product ? product.name[lang] : char.name[lang]}></div>
               )}
-            </a>
-          ) : (
-            <div class="portrait-frame portrait">
-              <div class="img-placeholder" role="img" aria-label={char.name[lang]}></div>
             </div>
-          )}
-          <div class="intro-text">
             {char.vorstellung && <span class="eyebrow">{char.vorstellung[lang].split("\n")[0]}</span>}
-            <h2>{product ? <a href={`/en/produkt/${product.slug}/`}>{product.name[lang]}</a> : char.name[lang]}</h2>
-            <p class="lead">{char.vorstellung ? char.vorstellung[lang].split("\n")[1] : (product ? product.beschreibung[lang] : t.shop.subcategoryEmpty)}</p>
+            <h3>{product ? <a href={`/en/produkt/${product.slug}/`}>{product.name[lang]}</a> : char.name[lang]}</h3>
+            <p class="character-card-desc">{char.vorstellung ? char.vorstellung[lang].split("\n")[1] : (product ? product.beschreibung[lang] : t.shop.subcategoryEmpty)}</p>
             {char.mehrLink && (
-              <div class="character-more">
-                <p>If you'd like to learn more about me, just click</p>
-                <a class="btn btn-outline" href={char.mehrLink} target="_blank" rel="noopener">here →</a>
-              </div>
+              <a class="btn btn-outline btn-sm character-more-btn" href={char.mehrLink} target="_blank" rel="noopener">here →</a>
             )}
           </div>
-        </div>
-      </section>
-    ))
+        ))}
+      </div>
+    </section>
   ) : (
     <section class="section-tight">
       <div class="container">
diff --git a/src/pages/fr/shop/[kategorie]/[unterkategorie].astro b/src/pages/fr/shop/[kategorie]/[unterkategorie].astro
index eb7ed32..e87ada5 100644
--- a/src/pages/fr/shop/[kategorie]/[unterkategorie].astro
+++ b/src/pages/fr/shop/[kategorie]/[unterkategorie].astro
@@ -21,16 +21,15 @@ const sub = getSubcategory(kategorie!, unterkategorie!)!;
 // Alle Produkte dieser Unterkategorie (unabhängig davon, welchem Charakter sie zugeordnet sind).
 const alleProdukte = productsByUnterkategorie(category.slug, sub.slug);
 
-// Jeder Charakter dieser Tier-Familie bekommt seine eigene Box, abwechselnd Foto links/rechts —
-// 1. Charakter links, 2. rechts, 3. wieder links, usw. Sobald VanVan im Adminbereich neue
-// Charaktere UND passende Produkte ergänzt, wächst diese Liste automatisch mit. Fehlt einem
-// Charakter noch ein echtes Produkt, zeigt seine Box trotzdem schon den Charaktertext (nur ohne
+// Jeder Charakter dieser Tier-Familie bekommt seine eigene kompakte Karte (wie die Produktkarten
+// im Shop-Grid), alle nebeneinander in einer Reihe. Sobald VanVan im Adminbereich neue
+// Charaktere UND passende Produkte ergänzt, wächst diese Reihe automatisch mit. Fehlt einem
+// Charakter noch ein echtes Produkt, zeigt seine Karte trotzdem schon den Charaktertext (nur ohne
 // Foto) — die Seite muss nicht auf das erste Foto warten, um zu existieren.
 const characters = sub.characters ?? [];
-const characterEntries = characters.map((char, index) => ({
+const characterEntries = characters.map((char) => ({
   char,
   product: alleProdukte.find((p) => p.charakter === char.slug),
-  reverse: index % 2 === 0,
 }));
 
 // Produkte ohne (bekannte) Charakter-Zuordnung landen als "weitere Modelle" darunter.
@@ -51,36 +50,27 @@ const weitere = alleProdukte.filter((p) => !zugeordneteSlugs.has(p.slug));
   </div>
 
   {characterEntries.length > 0 ? (
-    characterEntries.map(({ char, product, reverse }) => (
-      <section class="section-tight">
-        <div class={`container grid grid-2 intro ${reverse ? "intro-reverse" : ""}`}>
-          {product ? (
-            <a class="portrait-frame portrait" href={`/fr/produkt/${product.slug}/`} aria-label={product.name[lang]}>
-              {product.bilder && product.bilder.length > 0 ? (
+    <section class="section-tight">
+      <div class="container grid grid-3">
+        {characterEntries.map(({ char, product }) => (
+          <div class="card character-card">
+            <div class="product-media">
+              {product && product.bilder && product.bilder.length > 0 ? (
                 <img class="product-photo" src={product.bilder[0]} alt={product.name[lang]} loading="lazy" />
               ) : (
-                <div class="img-placeholder" role="img" aria-label={product.name[lang]}></div>
+                <div class="img-placeholder" role="img" aria-label={product ? product.name[lang] : char.name[lang]}></div>
               )}
-            </a>
-          ) : (
-            <div class="portrait-frame portrait">
-              <div class="img-placeholder" role="img" aria-label={char.name[lang]}></div>
             </div>
-          )}
-          <div class="intro-text">
             {char.vorstellung && <span class="eyebrow">{char.vorstellung[lang].split("\n")[0]}</span>}
-            <h2>{product ? <a href={`/fr/produkt/${product.slug}/`}>{product.name[lang]}</a> : char.name[lang]}</h2>
-            <p class="lead">{char.vorstellung ? char.vorstellung[lang].split("\n")[1] : (product ? product.beschreibung[lang] : t.shop.subcategoryEmpty)}</p>
+            <h3>{product ? <a href={`/fr/produkt/${product.slug}/`}>{product.name[lang]}</a> : char.name[lang]}</h3>
+            <p class="character-card-desc">{char.vorstellung ? char.vorstellung[lang].split("\n")[1] : (product ? product.beschreibung[lang] : t.shop.subcategoryEmpty)}</p>
             {char.mehrLink && (
-              <div class="character-more">
-                <p>Si tu veux en savoir plus sur moi, clique</p>
-                <a class="btn btn-outline" href={char.mehrLink} target="_blank" rel="noopener">ici →</a>
-              </div>
+              <a class="btn btn-outline btn-sm character-more-btn" href={char.mehrLink} target="_blank" rel="noopener">ici →</a>
             )}
           </div>
-        </div>
-      </section>
-    ))
+        ))}
+      </div>
+    </section>
   ) : (
     <section class="section-tight">
       <div class="container">
diff --git a/src/pages/shop/[kategorie]/[unterkategorie].astro b/src/pages/shop/[kategorie]/[unterkategorie].astro
index b5d1484..69d8e76 100644
--- a/src/pages/shop/[kategorie]/[unterkategorie].astro
+++ b/src/pages/shop/[kategorie]/[unterkategorie].astro
@@ -21,16 +21,15 @@ const sub = getSubcategory(kategorie!, unterkategorie!)!;
 // Alle Produkte dieser Unterkategorie (unabhängig davon, welchem Charakter sie zugeordnet sind).
 const alleProdukte = productsByUnterkategorie(category.slug, sub.slug);
 
-// Jeder Charakter dieser Tier-Familie bekommt seine eigene Box, abwechselnd Foto links/rechts —
-// 1. Charakter links, 2. rechts, 3. wieder links, usw. Sobald VanVan im Adminbereich neue
-// Charaktere UND passende Produkte ergänzt, wächst diese Liste automatisch mit. Fehlt einem
-// Charakter noch ein echtes Produkt, zeigt seine Box trotzdem schon den Charaktertext (nur ohne
+// Jeder Charakter dieser Tier-Familie bekommt seine eigene kompakte Karte (wie die Produktkarten
+// im Shop-Grid), alle nebeneinander in einer Reihe. Sobald VanVan im Adminbereich neue
+// Charaktere UND passende Produkte ergänzt, wächst diese Reihe automatisch mit. Fehlt einem
+// Charakter noch ein echtes Produkt, zeigt seine Karte trotzdem schon den Charaktertext (nur ohne
 // Foto) — die Seite muss nicht auf das erste Foto warten, um zu existieren.
 const characters = sub.characters ?? [];
-const characterEntries = characters.map((char, index) => ({
+const characterEntries = characters.map((char) => ({
   char,
   product: alleProdukte.find((p) => p.charakter === char.slug),
-  reverse: index % 2 === 0,
 }));
 
 // Produkte ohne (bekannte) Charakter-Zuordnung landen als "weitere Modelle" darunter.
@@ -51,36 +50,27 @@ const weitere = alleProdukte.filter((p) => !zugeordneteSlugs.has(p.slug));
   </div>
 
   {characterEntries.length > 0 ? (
-    characterEntries.map(({ char, product, reverse }) => (
-      <section class="section-tight">
-        <div class={`container grid grid-2 intro ${reverse ? "intro-reverse" : ""}`}>
-          {product ? (
-            <a class="portrait-frame portrait" href={`/produkt/${product.slug}/`} aria-label={product.name[lang]}>
-              {product.bilder && product.bilder.length > 0 ? (
+    <section class="section-tight">
+      <div class="container grid grid-3">
+        {characterEntries.map(({ char, product }) => (
+          <div class="card character-card">
+            <div class="product-media">
+              {product && product.bilder && product.bilder.length > 0 ? (
                 <img class="product-photo" src={product.bilder[0]} alt={product.name[lang]} loading="lazy" />
               ) : (
-                <div class="img-placeholder" role="img" aria-label={product.name[lang]}></div>
+                <div class="img-placeholder" role="img" aria-label={product ? product.name[lang] : char.name[lang]}></div>
               )}
-            </a>
-          ) : (
-            <div class="portrait-frame portrait">
-              <div class="img-placeholder" role="img" aria-label={char.name[lang]}></div>
             </div>
-          )}
-          <div class="intro-text">
             {char.vorstellung && <span class="eyebrow">{char.vorstellung[lang].split("\n")[0]}</span>}
-            <h2>{product ? <a href={`/produkt/${product.slug}/`}>{product.name[lang]}</a> : char.name[lang]}</h2>
-            <p class="lead">{char.vorstellung ? char.vorstellung[lang].split("\n")[1] : (product ? product.beschreibung[lang] : t.shop.subcategoryEmpty)}</p>
+            <h3>{product ? <a href={`/produkt/${product.slug}/`}>{product.name[lang]}</a> : char.name[lang]}</h3>
+            <p class="character-card-desc">{char.vorstellung ? char.vorstellung[lang].split("\n")[1] : (product ? product.beschreibung[lang] : t.shop.subcategoryEmpty)}</p>
             {char.mehrLink && (
-              <div class="character-more">
-                <p>Wenn du mehr über mich erfahren möchtest, dann klicke</p>
-                <a class="btn btn-outline" href={char.mehrLink} target="_blank" rel="noopener">hier →</a>
-              </div>
+              <a class="btn btn-outline btn-sm character-more-btn" href={char.mehrLink} target="_blank" rel="noopener">hier →</a>
             )}
           </div>
-        </div>
-      </section>
-    ))
+        ))}
+      </div>
+    </section>
   ) : (
     <section class="section-tight">
       <div class="container">
diff --git a/src/styles/global.css b/src/styles/global.css
index c51c1d0..502568b 100644
--- a/src/styles/global.css
+++ b/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. */