"Unterkategorien" & "Hauptkategorie" auf der Kategorie-Seite deutlicher erkennbar

Beide Beschriftungen waren identisch schlichter grauer Kleinschrift-Text, kaum
von normalem Fliesstext zu unterscheiden. Jetzt: "Unterkategorien" bekommt ein
kleines Icon + zwei kurze Verlaufslinien als dezenten Trenner, "Hauptkategorie"
zusaetzlich einen Farbverlaufs-Icon-Kreis (Kategorie-Icon) und einen schmalen
Leucht-Trenner darunter, der die eigentliche Produktreihe einleitet - bewusst
mit den schon vorhandenen Marken-Verlaufsfarben statt neuer Effekte.

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

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

@@ -32,7 +32,7 @@ const items = productsByCategory(category.slug);
     <div class="container">
       {category.subcategories && category.subcategories.length > 0 && (
         <>
-          <h2 class="text-center small" style="text-transform:uppercase; letter-spacing:0.08em; color:var(--c-text-muted); margin-bottom:0.8rem;">{t.shop.subcategoriesLabel}</h2>
+          <h2 class="section-label-sub"><span aria-hidden="true">🗂️</span> {t.shop.subcategoriesLabel}</h2>
           <div class="subcategory-chips">
             {category.subcategories.map((s) => (
               <a class="subcategory-chip" href={`/ch/shop/${category.slug}/${s.slug}/`}>{subcategoryChipLabel(s, lang)}</a>
@@ -41,7 +41,10 @@ const items = productsByCategory(category.slug);
         </>
       )}
       {items.length > 0 && (
-        <h2 class="text-center small" style="text-transform:uppercase; letter-spacing:0.08em; color:var(--c-text-muted); margin-bottom:0.8rem;">{t.shop.mainCategoryLabel}</h2>
+        <>
+          <h2 class="kategorie-section-label"><span class="label-icon" aria-hidden="true">{category.icon}</span> {t.shop.mainCategoryLabel}</h2>
+          <div class="kategorie-section-label-rule" aria-hidden="true"></div>
+        </>
       )}
       {items.length > 0 ? (
         <div class="grid grid-3">{items.map((p) => <ProductCard product={p} lang={lang} />)}</div>

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

@@ -32,7 +32,7 @@ const items = productsByCategory(category.slug);
     <div class="container">
       {category.subcategories && category.subcategories.length > 0 && (
         <>
-          <h2 class="text-center small" style="text-transform:uppercase; letter-spacing:0.08em; color:var(--c-text-muted); margin-bottom:0.8rem;">{t.shop.subcategoriesLabel}</h2>
+          <h2 class="section-label-sub"><span aria-hidden="true">🗂️</span> {t.shop.subcategoriesLabel}</h2>
           <div class="subcategory-chips">
             {category.subcategories.map((s) => (
               <a class="subcategory-chip" href={`/en/shop/${category.slug}/${s.slug}/`}>{subcategoryChipLabel(s, lang)}</a>
@@ -41,7 +41,10 @@ const items = productsByCategory(category.slug);
         </>
       )}
       {items.length > 0 && (
-        <h2 class="text-center small" style="text-transform:uppercase; letter-spacing:0.08em; color:var(--c-text-muted); margin-bottom:0.8rem;">{t.shop.mainCategoryLabel}</h2>
+        <>
+          <h2 class="kategorie-section-label"><span class="label-icon" aria-hidden="true">{category.icon}</span> {t.shop.mainCategoryLabel}</h2>
+          <div class="kategorie-section-label-rule" aria-hidden="true"></div>
+        </>
       )}
       {items.length > 0 ? (
         <div class="grid grid-3">{items.map((p) => <ProductCard product={p} lang={lang} />)}</div>

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

@@ -32,7 +32,7 @@ const items = productsByCategory(category.slug);
     <div class="container">
       {category.subcategories && category.subcategories.length > 0 && (
         <>
-          <h2 class="text-center small" style="text-transform:uppercase; letter-spacing:0.08em; color:var(--c-text-muted); margin-bottom:0.8rem;">{t.shop.subcategoriesLabel}</h2>
+          <h2 class="section-label-sub"><span aria-hidden="true">🗂️</span> {t.shop.subcategoriesLabel}</h2>
           <div class="subcategory-chips">
             {category.subcategories.map((s) => (
               <a class="subcategory-chip" href={`/fr/shop/${category.slug}/${s.slug}/`}>{subcategoryChipLabel(s, lang)}</a>
@@ -41,7 +41,10 @@ const items = productsByCategory(category.slug);
         </>
       )}
       {items.length > 0 && (
-        <h2 class="text-center small" style="text-transform:uppercase; letter-spacing:0.08em; color:var(--c-text-muted); margin-bottom:0.8rem;">{t.shop.mainCategoryLabel}</h2>
+        <>
+          <h2 class="kategorie-section-label"><span class="label-icon" aria-hidden="true">{category.icon}</span> {t.shop.mainCategoryLabel}</h2>
+          <div class="kategorie-section-label-rule" aria-hidden="true"></div>
+        </>
       )}
       {items.length > 0 ? (
         <div class="grid grid-3">{items.map((p) => <ProductCard product={p} lang={lang} />)}</div>

src/pages/shop/[kategorie].astro

@@ -32,7 +32,7 @@ const items = productsByCategory(category.slug);
     <div class="container">
       {category.subcategories && category.subcategories.length > 0 && (
         <>
-          <h2 class="text-center small" style="text-transform:uppercase; letter-spacing:0.08em; color:var(--c-text-muted); margin-bottom:0.8rem;">{t.shop.subcategoriesLabel}</h2>
+          <h2 class="section-label-sub"><span aria-hidden="true">🗂️</span> {t.shop.subcategoriesLabel}</h2>
           <div class="subcategory-chips">
             {category.subcategories.map((s) => (
               <a class="subcategory-chip" href={`/shop/${category.slug}/${s.slug}/`}>{subcategoryChipLabel(s, lang)}</a>
@@ -41,7 +41,10 @@ const items = productsByCategory(category.slug);
         </>
       )}
       {items.length > 0 && (
-        <h2 class="text-center small" style="text-transform:uppercase; letter-spacing:0.08em; color:var(--c-text-muted); margin-bottom:0.8rem;">{t.shop.mainCategoryLabel}</h2>
+        <>
+          <h2 class="kategorie-section-label"><span class="label-icon" aria-hidden="true">{category.icon}</span> {t.shop.mainCategoryLabel}</h2>
+          <div class="kategorie-section-label-rule" aria-hidden="true"></div>
+        </>
       )}
       {items.length > 0 ? (
         <div class="grid grid-3">{items.map((p) => <ProductCard product={p} lang={lang} />)}</div>

src/styles/global.css

@@ -948,14 +948,64 @@ a:focus-visible, button:focus-visible {
 .contact-highlight p { margin: 0 0 0.3rem; }
 .contact-highlight p:last-child { margin-bottom: 0; }
 
+/* "Unterkategorien"-Beschriftung auf der Hauptkategorie-Seite — vorher reiner grauer
+   Kleinschrift-Text, kaum von Fließtext zu unterscheiden. Jetzt: Akzentfarbe statt Grau, ein
+   kleines Icon und zwei kurze Verlaufslinien links/rechts (dezenter "Trenner"-Look statt
+   auffälliger Balken), damit auf einen Blick klar ist: hier beginnt ein neuer Abschnitt. */
+.section-label-sub {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.6em;
+  font-size: 0.78rem;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  font-weight: 600;
+  color: var(--c-accent);
+  margin: 0 0 1rem;
+}
+.section-label-sub::before,
+.section-label-sub::after {
+  content: "";
+  height: 1px;
+  width: clamp(1.6rem, 6vw, 3.2rem);
+  background: linear-gradient(90deg, transparent, var(--c-purple-glow), transparent);
+  opacity: 0.7;
+}
+
 /* 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. */
+   durchstöbert. Deutlich kräftiger als die "Unterkategorien"-Beschriftung (größer, mit
+   Verlaufs-Icon-Kreis und einem schmalen Leucht-Trenner darunter), weil sie die eigentliche
+   Produktreihe einleitet — bewusst nicht übertrieben (kein neuer Farbton, keine Animation). */
 .kategorie-section-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.55em;
   text-align: center;
   font-size: 1.3rem;
   color: var(--c-accent);
-  margin: 2.2rem 0 1.3rem;
+  margin: 2.2rem 0 0;
+}
+.kategorie-section-label .label-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.9rem;
+  height: 1.9rem;
+  border-radius: 50%;
+  font-size: 1rem;
+  background: linear-gradient(135deg, var(--c-accent), var(--c-purple-glow) 45%, var(--c-sale) 100%);
+  color: #08181c;
+}
+.kategorie-section-label-rule {
+  height: 2px;
+  width: clamp(3.5rem, 16vw, 7rem);
+  margin: 0.9rem auto 1.3rem;
+  border-radius: 999px;
+  background: linear-gradient(90deg, transparent, var(--c-accent), var(--c-purple-glow), var(--c-sale), transparent);
+  opacity: 0.85;
 }
 @media (max-width: 800px) { .shop-layout { grid-template-columns: 1fr; } }