Charakter-Geschichtsboxen nur noch für Charaktere mit echtem Produkt

Bisher bekam jeder Charakter einer Tier-Familie (z.B. Hase) automatisch
seine eigene Story-Box, auch wenn für ihn noch gar kein Produkt existiert.
Das wirkte unfertig (z.B. HasiGott und Mama Hase zeigten volle
Persönlichkeitstexte, obwohl beide noch keine Produkte haben). Jetzt
erscheint die Story-Box nur noch für Charaktere mit mindestens einem
zugeordneten Produkt (aktuell also nur HasiDog). Die kompakten Karten
darunter (mit Platzhalter-Foto und "Produkte folgen bald") bleiben für
alle Charaktere sichtbar, damit die Familie als Ganzes trotzdem gezeigt
wird.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

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

@@ -53,20 +53,22 @@ const weitere = alleProdukte.filter((p) => !zugeordneteSlugs.has(p.slug));
     <>
       {/* Die persönlichen Charaktergeschichten stehen als eigene, volle Breite Boxen ÜBER der
           Kartenreihe — getrennt von den "Shop"-Karten darunter, die nur Foto/Preis/Infos zeigen. */}
-      <section class="section-tight">
-        <div class="container character-stories">
-          {characterEntries.map(({ char }) => (
-            <div class="card character-story">
-              {char.vorstellung && <span class="eyebrow">{char.vorstellung[lang].split("\n")[0]}</span>}
-              <h3>{char.name[lang]}</h3>
-              <p>{char.vorstellung ? char.vorstellung[lang].split("\n")[1] : ""}</p>
-              {char.mehrLink && (
-                <a class="btn btn-outline btn-sm" href={char.mehrLink} target="_blank" rel="noopener">da →</a>
-              )}
-            </div>
-          ))}
-        </div>
-      </section>
+      {characterEntries.some(({ product }) => product) && (
+        <section class="section-tight">
+          <div class="container character-stories">
+            {characterEntries.filter(({ product }) => product).map(({ char }) => (
+              <div class="card character-story">
+                {char.vorstellung && <span class="eyebrow">{char.vorstellung[lang].split("\n")[0]}</span>}
+                <h3>{char.name[lang]}</h3>
+                <p>{char.vorstellung ? char.vorstellung[lang].split("\n")[1] : ""}</p>
+                {char.mehrLink && (
+                  <a class="btn btn-outline btn-sm" href={char.mehrLink} target="_blank" rel="noopener">da →</a>
+                )}
+              </div>
+            ))}
+          </div>
+        </section>
+      )}
 
       {/* Kartenreihe wie im Shop-Grid — nur Foto, Preis und Kaufinfos, keine Geschichten. */}
       <section class="section-tight">

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

@@ -53,20 +53,22 @@ const weitere = alleProdukte.filter((p) => !zugeordneteSlugs.has(p.slug));
     <>
       {/* Die persönlichen Charaktergeschichten stehen als eigene, volle Breite Boxen ÜBER der
           Kartenreihe — getrennt von den "Shop"-Karten darunter, die nur Foto/Preis/Infos zeigen. */}
-      <section class="section-tight">
-        <div class="container character-stories">
-          {characterEntries.map(({ char }) => (
-            <div class="card character-story">
-              {char.vorstellung && <span class="eyebrow">{char.vorstellung[lang].split("\n")[0]}</span>}
-              <h3>{char.name[lang]}</h3>
-              <p>{char.vorstellung ? char.vorstellung[lang].split("\n")[1] : ""}</p>
-              {char.mehrLink && (
-                <a class="btn btn-outline btn-sm" href={char.mehrLink} target="_blank" rel="noopener">here →</a>
-              )}
-            </div>
-          ))}
-        </div>
-      </section>
+      {characterEntries.some(({ product }) => product) && (
+        <section class="section-tight">
+          <div class="container character-stories">
+            {characterEntries.filter(({ product }) => product).map(({ char }) => (
+              <div class="card character-story">
+                {char.vorstellung && <span class="eyebrow">{char.vorstellung[lang].split("\n")[0]}</span>}
+                <h3>{char.name[lang]}</h3>
+                <p>{char.vorstellung ? char.vorstellung[lang].split("\n")[1] : ""}</p>
+                {char.mehrLink && (
+                  <a class="btn btn-outline btn-sm" href={char.mehrLink} target="_blank" rel="noopener">here →</a>
+                )}
+              </div>
+            ))}
+          </div>
+        </section>
+      )}
 
       {/* Kartenreihe wie im Shop-Grid — nur Foto, Preis und Kaufinfos, keine Geschichten. */}
       <section class="section-tight">

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

@@ -53,20 +53,22 @@ const weitere = alleProdukte.filter((p) => !zugeordneteSlugs.has(p.slug));
     <>
       {/* Die persönlichen Charaktergeschichten stehen als eigene, volle Breite Boxen ÜBER der
           Kartenreihe — getrennt von den "Shop"-Karten darunter, die nur Foto/Preis/Infos zeigen. */}
-      <section class="section-tight">
-        <div class="container character-stories">
-          {characterEntries.map(({ char }) => (
-            <div class="card character-story">
-              {char.vorstellung && <span class="eyebrow">{char.vorstellung[lang].split("\n")[0]}</span>}
-              <h3>{char.name[lang]}</h3>
-              <p>{char.vorstellung ? char.vorstellung[lang].split("\n")[1] : ""}</p>
-              {char.mehrLink && (
-                <a class="btn btn-outline btn-sm" href={char.mehrLink} target="_blank" rel="noopener">ici →</a>
-              )}
-            </div>
-          ))}
-        </div>
-      </section>
+      {characterEntries.some(({ product }) => product) && (
+        <section class="section-tight">
+          <div class="container character-stories">
+            {characterEntries.filter(({ product }) => product).map(({ char }) => (
+              <div class="card character-story">
+                {char.vorstellung && <span class="eyebrow">{char.vorstellung[lang].split("\n")[0]}</span>}
+                <h3>{char.name[lang]}</h3>
+                <p>{char.vorstellung ? char.vorstellung[lang].split("\n")[1] : ""}</p>
+                {char.mehrLink && (
+                  <a class="btn btn-outline btn-sm" href={char.mehrLink} target="_blank" rel="noopener">ici →</a>
+                )}
+              </div>
+            ))}
+          </div>
+        </section>
+      )}
 
       {/* Kartenreihe wie im Shop-Grid — nur Foto, Preis und Kaufinfos, keine Geschichten. */}
       <section class="section-tight">

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

@@ -53,20 +53,22 @@ const weitere = alleProdukte.filter((p) => !zugeordneteSlugs.has(p.slug));
     <>
       {/* Die persönlichen Charaktergeschichten stehen als eigene, volle Breite Boxen ÜBER der
           Kartenreihe — getrennt von den "Shop"-Karten darunter, die nur Foto/Preis/Infos zeigen. */}
-      <section class="section-tight">
-        <div class="container character-stories">
-          {characterEntries.map(({ char }) => (
-            <div class="card character-story">
-              {char.vorstellung && <span class="eyebrow">{char.vorstellung[lang].split("\n")[0]}</span>}
-              <h3>{char.name[lang]}</h3>
-              <p>{char.vorstellung ? char.vorstellung[lang].split("\n")[1] : ""}</p>
-              {char.mehrLink && (
-                <a class="btn btn-outline btn-sm" href={char.mehrLink} target="_blank" rel="noopener">hier →</a>
-              )}
-            </div>
-          ))}
-        </div>
-      </section>
+      {characterEntries.some(({ product }) => product) && (
+        <section class="section-tight">
+          <div class="container character-stories">
+            {characterEntries.filter(({ product }) => product).map(({ char }) => (
+              <div class="card character-story">
+                {char.vorstellung && <span class="eyebrow">{char.vorstellung[lang].split("\n")[0]}</span>}
+                <h3>{char.name[lang]}</h3>
+                <p>{char.vorstellung ? char.vorstellung[lang].split("\n")[1] : ""}</p>
+                {char.mehrLink && (
+                  <a class="btn btn-outline btn-sm" href={char.mehrLink} target="_blank" rel="noopener">hier →</a>
+                )}
+              </div>
+            ))}
+          </div>
+        </section>
+      )}
 
       {/* Kartenreihe wie im Shop-Grid — nur Foto, Preis und Kaufinfos, keine Geschichten. */}
       <section class="section-tight">