From 0ee884364df97ddf518054ae5ffbe2614ee721f2 Mon Sep 17 00:00:00 2001
From: qcigano <qcigano@gmail.com>
Date: Sun, 2 Aug 2026 20:55:42 +0200
Subject: [PATCH] Unterkategorien-Chips: mittig ausgerichtet +
 Verlaufsrand-Stil statt schlichter Pillen
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Die Chip-Reihe war linksbündig statt zentriert und nutzte einfache
Einzelfarb-Pillen. Jetzt mittig auf der Seite und im selben
Verlaufsrand-Stil wie die Karten der Seite (cyan → lila → rosa,
sanftes Leuchten, Hover-Anhebung) — wirkt dadurch "speziell" und
markentypisch, bleibt aber ruhig genug für den professionellen
Gesamtlook.

Verifiziert per Puppeteer-Screenshot.
---
 src/styles/global.css | 27 +++++++++++++++++----------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/styles/global.css b/src/styles/global.css
index 3ed3570..b671436 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -664,21 +664,28 @@ a:focus-visible, button:focus-visible {
   .story-section.is-visible { animation: none; }
 }
 
-/* Unterkategorie-Chips auf den Hauptkategorie-Seiten */
-.subcategory-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.5rem 0 2.5rem; }
+/* Unterkategorie-Chips auf den Hauptkategorie-Seiten — mittig, mit demselben Verlaufsrand-Stil
+   wie die Karten der Seite (siehe .card), statt schlichter Einzelfarb-Pillen. Wirkt dadurch
+   "speziell" und zur Marke passend, bleibt aber ruhig/professionell statt aufdringlich. */
+.subcategory-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 1.6rem 0 2.5rem; }
 .subcategory-chip {
+  position: relative;
+  isolation: isolate;
   display: inline-flex;
   align-items: center;
-  padding: 0.55em 1.1em;
+  padding: 0.65em 1.4em;
   border-radius: 999px;
-  font-size: 0.88rem;
-  font-weight: 600;
-  color: var(--c-text-muted);
-  background: var(--c-anthracite);
-  border: 1px solid rgba(244, 241, 247, 0.12);
-  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
+  font-size: 0.92rem;
+  font-weight: 700;
+  color: var(--c-text);
+  border: 1.5px solid transparent;
+  background:
+    linear-gradient(165deg, var(--c-anthracite-light), var(--c-anthracite)) padding-box,
+    linear-gradient(135deg, var(--c-accent), var(--c-purple-glow) 50%, var(--c-sale) 100%) border-box;
+  box-shadow: var(--shadow-card);
+  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), filter 0.25s var(--ease);
 }
-.subcategory-chip:hover { color: var(--c-accent); border-color: color-mix(in srgb, var(--c-accent) 55%, transparent); background: color-mix(in srgb, var(--c-accent) 8%, var(--c-anthracite)); }
+.subcategory-chip:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); filter: brightness(1.1); }
 
 /* Persönliche Vorstellung eines Plushie-Charakters auf seiner Unterkategorie-Seite (z.B.
    "Hallo, ich bin Frieda ..."). Dezente Box im Kartenstil des Shops, kein neues Designelement. */