/* Kategorie-Reiter und Markenknöpfe im Shop bewegt (28.10.2026, Michas „Knöpfe cool animiert, wenn ich zwischen den
   Kategorien wechsle“). Logik in reiter-motion.js, das Filtern selbst bleibt in store.js.
   - Die Unterlinie ist ein eigener Strich (::after) statt der Rahmenlinie: beim alten Knopf zieht sie sich in Laufrichtung
     zurück, beim neuen zeichnet sie sich aus der Richtung, aus der man kommt (--von, vom Skript gesetzt).
   - Die Schrift bewegt sich nicht, sie wechselt nur weich die Farbe. Rollende Buchstaben und springende Zahl der ersten
     Fassung sind raus (Micha: „soll sich nicht die Schrift so komisch drehen“).
   - Karten steigen gestaffelt neu ein (reiter-motion.js). */

.shop-section :is(.category-tab, .filter-chip) { position: relative; transition: color .3s, transform .18s; -webkit-tap-highlight-color: transparent; }
:root .shop-section :is(.category-tab, .filter-chip), :root .shop-section :is(.category-tab, .filter-chip):is(:hover, .active) { border-bottom-color: transparent; }
.shop-section :is(.category-tab, .filter-chip)::after { position: absolute; right: 0; bottom: -2px; left: 0; height: 2px; background: var(--paper); content: ""; transform: scaleX(0); transform-origin: var(--von, left) center; transition: transform .46s cubic-bezier(.7, 0, .2, 1), opacity .2s; pointer-events: none; }
.shop-section .filter-chip::after { bottom: -1px; height: 1px; }
.shop-section :is(.category-tab, .filter-chip).active::after { transform: scaleX(1); }
@media (hover: hover) {
  .shop-section :is(.category-tab, .filter-chip):not(.active):hover::after { opacity: .35; transform: scaleX(1); transform-origin: left center; }
}
.shop-section :is(.category-tab, .filter-chip):active { transform: scale(.96); }

@media (prefers-reduced-motion: reduce) {
  .shop-section :is(.category-tab, .filter-chip), .shop-section :is(.category-tab, .filter-chip)::after { transition: none; }
}