/* ========================================================================== Subkategorie-Filter (Kategorie-Seiten) Ergaenzt style.css - bewusst eigene Datei, da style.css generiert ist (siehe style.css.map). Farben und Button-Metriken aus style.css uebernommen: #698E94 primaer (48x im Theme), #535659 dunkler Hover, radius 30px, "Short Stack". #00ADB5 bleibt den CTAs vorbehalten. ========================================================================== */ .subkat-filter { margin: 0 0 10px; padding: 0; text-align: center; } /* Liste statt divs: Filter ist Navigation, Screenreader sollen Anzahl hoeren */ .subkat-filter__list { list-style: none; margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 8px; } /* Fallback fuer Browser ohne flex-gap (Safari < 14.1) */ .subkat-filter__item { margin: 0 4px 8px; } @supports (gap: 8px) { .subkat-filter__item { margin: 0; } } .subkat-filter__btn { font-family: "Short Stack", monospace; font-size: 16px; font-weight: 400; line-height: 1.4; padding: 8px 20px; border-radius: 30px; border: 2px solid #698E94; background: transparent; color: #698E94; cursor: pointer; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; -webkit-appearance: none; appearance: none; } /* Hover auf inaktivem Button: nur andeuten, nicht vorwegnehmen. Volle Invertierung ist dem aktiven Zustand vorbehalten, sonst sieht ein ueberfahrener Button aus wie der aktive. */ .subkat-filter__btn:hover { background-color: rgba(105, 142, 148, 0.12) !important; border-color: #698E94 !important; color: #698E94; } /* Tastaturnutzer brauchen sichtbaren Fokus - :hover allein reicht nicht. :focus-visible trennt Maus- von Tastaturfokus. */ .subkat-filter__btn:focus-visible { outline: 2px solid #535659; outline-offset: 2px; } /* Aktiv = exakte Invertierung von inaktiv: Vorder- und Hintergrundfarbe getauscht, Rand bleibt. Farbe ist die Themefarbe #698E94 (48x in style.css: Ueberschriften, Navigation, .blue_font in den Produktkacheln), nicht #00ADB5 - das ist im Theme die Call-to-Action-Farbe (Sign-up, Download, ::selection). Ein aktiver Filter ist Zustand, kein Handlungsaufruf. !important, weil ein geerbtes .btn-primary:hover sonst #52ca90 setzt (style.css:1175) - ein Gruen ausserhalb der Palette. */ .subkat-filter__btn.is-active, .subkat-filter__btn.is-active:hover, .subkat-filter__btn.is-active:focus { background-color: #698E94 !important; border-color: #698E94 !important; color: #fff; } /* Aktiver Button ist bereits gewaehlt - Cursor signalisiert "kein Ziel". */ .subkat-filter__btn.is-active { cursor: default; } /* Anzahl-Badge im Button */ .subkat-filter__count { font-size: 13px; opacity: 0.75; margin-left: 6px; } /* Treffer-Ausgabe fuer Screenreader; visuell versteckt, aber vorlesbar. display:none waere hier falsch - das nimmt es aus dem A11y-Tree. */ .subkat-filter__status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Produkt aus-/einblenden. !important, weil Bootstrap .col-md-4 per Media Query display:block setzt und sonst gewinnt. */ .product-item.is-hidden { display: none !important; } /* Meldung wenn Filter nichts trifft (Normalfall: versteckt) */ .subkat-filter__empty { display: none; padding: 30px 15px; text-align: center; color: #8f989f; font-size: 18px; } .subkat-filter__empty.is-visible { display: block; } /* Ohne JS ist Filtern nicht moeglich -> Leiste ausblenden, alle Produkte bleiben sichtbar. .js wird per JS auf gesetzt. */ .subkat-filter { display: none; } .js .subkat-filter { display: block; } @media screen and (max-width: 768px) { .subkat-filter__btn { font-size: 14px; padding: 6px 16px; } .subkat-filter__list { gap: 6px; } }