Breadcrumbs heben Haupt-/Unterkategorie stärker hervor; Unterkategorie-Seiten bereit für viele Produkte pro Serie

- Breadcrumb-Schrift siteweit leicht vergrößert; die aktuelle Ebene
  (Hauptkategorie auf Kategorie-/Produktseiten, Unterkategorie auf
  Unterkategorie-Seiten) ist jetzt fett/weiß hervorgehoben statt nur
  gleichförmig grau — auf allen Kategorie-, Unterkategorie- und
  Produktseiten in allen 4 Sprachen.
- Unterkategorie-Seiten (Kuh, Hase, Wal, Oktopus, Schildkröte, Pinguin)
  zeigen jetzt eine "Weitere Modelle"-Überschrift über der Produktreihe
  unterhalb des featured Produkts — die Seite ist jetzt sichtbar darauf
  ausgelegt, dass mit der Zeit beliebig viele weitere Varianten pro Serie
  dazukommen, nicht nur ein einzelnes Vorzeige-Produkt.

Verifiziert per Puppeteer-Screenshot inkl. Test mit einem zweiten Produkt
in derselben Unterkategorie (danach wieder entfernt) — Layout skaliert
sauber.
This commit is contained in:
qcigano
2026-08-02 19:34:13 +02:00
parent 3c574ed0c4
commit aa53a6321d
14 changed files with 29 additions and 18 deletions
+9 -2
View File
@@ -731,8 +731,15 @@ a:focus-visible, button:focus-visible {
}
.shop-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; }
.legal-hint { margin-top: 2rem; }
.breadcrumb { margin-bottom: 0.6rem; }
.breadcrumb a { color: var(--c-accent); }
.breadcrumb { margin-bottom: 0.6rem; font-size: 0.95rem; }
.breadcrumb a { color: var(--c-accent); font-weight: 600; }
.breadcrumb a:hover { text-decoration: underline; }
/* Aktuelle Ebene (Haupt-/Unterkategorie, Produktname) hebt sich etwas vom "Shop"-Wurzel-Link ab. */
.breadcrumb strong { color: var(--c-text); font-weight: 700; }
/* Überschrift über der "weitere Produkte"-Reihe auf Unterkategorie-Seiten — macht klar, dass da
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; }
@media (max-width: 800px) { .shop-layout { grid-template-columns: 1fr; } }
/* Produktseite — großes Bild bekommt denselben edlen "Rahmen"-Look wie die Porträtfotos der