Fix: Produktanzahl auf Unterkategorie-Seiten jetzt direkt über der ersten

Produktkarte statt direkt unter dem Banner

Auf den anderen Seitentypen (Kategorie, Sale) stand die Zahl schon immer direkt
über dem Produkt-Grid. Auf den Unterkategorie-Seiten (Charakter-Familien wie
Glasperlenarmbänder, Kuh, Wal, ...) saß sie dagegen in einem eigenen Container
direkt unter dem Banner-Bild, mit teils viel Abstand zur ersten echten Karte
(z.B. wenn vorher noch eine Charakter-Story-Box kommt). Jetzt wird sie direkt
in der Sektion angezeigt, die auch wirklich die erste Produktkarte enthält —
in allen 4 Sprachen (de/en/fr/ch).

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

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

@@ -50,6 +50,8 @@ const komplettLeer = !hatProduktKarten && !hatWeitere;
 const gesamtProdukte = characterEntriesMitProdukt.length + weitere.length;
 const platzhalterInStorySektion = hatStoryBoxen && komplettLeer;
 const eigeneLeerSektion = !hatStoryBoxen && komplettLeer;
+const zeigeAnzahlInStorySektion = hatStoryBoxen;
+const zeigeAnzahlInWeitereSektion = !hatStoryBoxen && hatWeitere;
 ---
 <Layout title={`${sub.name[lang]} – ${category.name[lang]}`} description={`${sub.name[lang]} bi Van's DIY & Bastelbedarf.`} lang={lang} path={`/shop/${category.slug}/${sub.slug}/`}>
   <div class="container">
@@ -62,12 +64,12 @@ const eigeneLeerSektion = !hatStoryBoxen && komplettLeer;
         <h1>{sub.bannerName ? sub.bannerName[lang] : sub.name[lang]}</h1>
       </div>
     </section>
-    {gesamtProdukte > 0 && <p class="small result-count-static">{t.shop.resultCount(gesamtProdukte)}</p>}
   </div>
 
   {hatStoryBoxen && (
     <section class="section-tight">
       <div class="container">
+        {gesamtProdukte > 0 && zeigeAnzahlInStorySektion && <p class="small result-count-static">{t.shop.resultCount(gesamtProdukte)}</p>}
         <div class="character-stories">
           {characterEntriesFuerStory.map(({ char }) => (
             <div class="card character-story">
@@ -126,6 +128,7 @@ const eigeneLeerSektion = !hatStoryBoxen && komplettLeer;
   {hatWeitere && (
     <section class="section-tight">
       <div class="container">
+        {gesamtProdukte > 0 && zeigeAnzahlInWeitereSektion && <p class="small result-count-static">{t.shop.resultCount(gesamtProdukte)}</p>}
         {hatProduktKarten && <h2 class="text-center small more-variants-label">{t.shop.moreVariants}</h2>}
         <div class="grid grid-3">{weitere.map((p) => <ProductCard product={p} lang={lang} />)}</div>
       </div>

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

@@ -50,6 +50,8 @@ const komplettLeer = !hatProduktKarten && !hatWeitere;
 const gesamtProdukte = characterEntriesMitProdukt.length + weitere.length;
 const platzhalterInStorySektion = hatStoryBoxen && komplettLeer;
 const eigeneLeerSektion = !hatStoryBoxen && komplettLeer;
+const zeigeAnzahlInStorySektion = hatStoryBoxen;
+const zeigeAnzahlInWeitereSektion = !hatStoryBoxen && hatWeitere;
 ---
 <Layout title={`${sub.name[lang]} – ${category.name[lang]}`} description={`${sub.name[lang]} at Van's DIY & Bastelbedarf.`} lang={lang} path={`/shop/${category.slug}/${sub.slug}/`}>
   <div class="container">
@@ -62,12 +64,12 @@ const eigeneLeerSektion = !hatStoryBoxen && komplettLeer;
         <h1>{sub.bannerName ? sub.bannerName[lang] : sub.name[lang]}</h1>
       </div>
     </section>
-    {gesamtProdukte > 0 && <p class="small result-count-static">{t.shop.resultCount(gesamtProdukte)}</p>}
   </div>
 
   {hatStoryBoxen && (
     <section class="section-tight">
       <div class="container">
+        {gesamtProdukte > 0 && zeigeAnzahlInStorySektion && <p class="small result-count-static">{t.shop.resultCount(gesamtProdukte)}</p>}
         <div class="character-stories">
           {characterEntriesFuerStory.map(({ char }) => (
             <div class="card character-story">
@@ -126,6 +128,7 @@ const eigeneLeerSektion = !hatStoryBoxen && komplettLeer;
   {hatWeitere && (
     <section class="section-tight">
       <div class="container">
+        {gesamtProdukte > 0 && zeigeAnzahlInWeitereSektion && <p class="small result-count-static">{t.shop.resultCount(gesamtProdukte)}</p>}
         {hatProduktKarten && <h2 class="text-center small more-variants-label">{t.shop.moreVariants}</h2>}
         <div class="grid grid-3">{weitere.map((p) => <ProductCard product={p} lang={lang} />)}</div>
       </div>

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

@@ -50,6 +50,8 @@ const komplettLeer = !hatProduktKarten && !hatWeitere;
 const gesamtProdukte = characterEntriesMitProdukt.length + weitere.length;
 const platzhalterInStorySektion = hatStoryBoxen && komplettLeer;
 const eigeneLeerSektion = !hatStoryBoxen && komplettLeer;
+const zeigeAnzahlInStorySektion = hatStoryBoxen;
+const zeigeAnzahlInWeitereSektion = !hatStoryBoxen && hatWeitere;
 ---
 <Layout title={`${sub.name[lang]} – ${category.name[lang]}`} description={`${sub.name[lang]} chez Van's DIY & Bastelbedarf.`} lang={lang} path={`/shop/${category.slug}/${sub.slug}/`}>
   <div class="container">
@@ -62,12 +64,12 @@ const eigeneLeerSektion = !hatStoryBoxen && komplettLeer;
         <h1>{sub.bannerName ? sub.bannerName[lang] : sub.name[lang]}</h1>
       </div>
     </section>
-    {gesamtProdukte > 0 && <p class="small result-count-static">{t.shop.resultCount(gesamtProdukte)}</p>}
   </div>
 
   {hatStoryBoxen && (
     <section class="section-tight">
       <div class="container">
+        {gesamtProdukte > 0 && zeigeAnzahlInStorySektion && <p class="small result-count-static">{t.shop.resultCount(gesamtProdukte)}</p>}
         <div class="character-stories">
           {characterEntriesFuerStory.map(({ char }) => (
             <div class="card character-story">
@@ -126,6 +128,7 @@ const eigeneLeerSektion = !hatStoryBoxen && komplettLeer;
   {hatWeitere && (
     <section class="section-tight">
       <div class="container">
+        {gesamtProdukte > 0 && zeigeAnzahlInWeitereSektion && <p class="small result-count-static">{t.shop.resultCount(gesamtProdukte)}</p>}
         {hatProduktKarten && <h2 class="text-center small more-variants-label">{t.shop.moreVariants}</h2>}
         <div class="grid grid-3">{weitere.map((p) => <ProductCard product={p} lang={lang} />)}</div>
       </div>

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

@@ -63,6 +63,15 @@ const gesamtProdukte = characterEntriesMitProdukt.length + weitere.length;
 // Charaktere), bekommen die Platzhalter ihre eigene Sektion wie bisher.
 const platzhalterInStorySektion = hatStoryBoxen && komplettLeer;
 const eigeneLeerSektion = !hatStoryBoxen && komplettLeer;
+// Nutzer-Wunsch 04.08.2026 (2. Runde): "die Produktanzahl soll über dem 1. Produkt sein und
+// nicht oben genau unter dem großen Bild — überall." Vorher stand die Zahl direkt unter dem
+// Banner, in einem eigenen Container, unabhängig davon, wo die erste echte Produktkarte
+// überhaupt auftaucht (bei Unterkategorien mit Charakter-Story-Boxen lag zwischen Zahl und
+// erster Karte z.B. noch die ganze Vorstellungs-Box). Jetzt steht die Zahl direkt über der
+// ERSTEN Sektion, die wirklich Produktkarten zeigt — genau wie es shop/[kategorie].astro und
+// sale/index.astro schon immer gemacht haben (dort war es nie falsch platziert).
+const zeigeAnzahlInStorySektion = hatStoryBoxen;
+const zeigeAnzahlInWeitereSektion = !hatStoryBoxen && hatWeitere;
 ---
 <Layout title={`${sub.name[lang]} – ${category.name[lang]}`} description={`${sub.name[lang]} bei Van's DIY & Bastelbedarf.`} lang={lang} path={`/shop/${category.slug}/${sub.slug}/`}>
   <div class="container">
@@ -75,12 +84,12 @@ const eigeneLeerSektion = !hatStoryBoxen && komplettLeer;
         <h1>{sub.bannerName ? sub.bannerName[lang] : sub.name[lang]}</h1>
       </div>
     </section>
-    {gesamtProdukte > 0 && <p class="small result-count-static">{t.shop.resultCount(gesamtProdukte)}</p>}
   </div>
 
   {hatStoryBoxen && (
     <section class="section-tight">
       <div class="container">
+        {gesamtProdukte > 0 && zeigeAnzahlInStorySektion && <p class="small result-count-static">{t.shop.resultCount(gesamtProdukte)}</p>}
         {/* 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.
             Der Haupt-Charakter der Familie bekommt immer eine Box, weitere Charaktere nur mit
@@ -147,6 +156,7 @@ const eigeneLeerSektion = !hatStoryBoxen && komplettLeer;
   {hatWeitere && (
     <section class="section-tight">
       <div class="container">
+        {gesamtProdukte > 0 && zeigeAnzahlInWeitereSektion && <p class="small result-count-static">{t.shop.resultCount(gesamtProdukte)}</p>}
         {hatProduktKarten && <h2 class="text-center small more-variants-label">{t.shop.moreVariants}</h2>}
         <div class="grid grid-3">{weitere.map((p) => <ProductCard product={p} lang={lang} />)}</div>
       </div>