Allgemein

/* Container: entferne sichtbare Linie / Rand oberhalb */ .fusion-filters { border-top: 0 !important; box-shadow: none !important; padding-top: 0; position: relative; /* Erlaube horizontales Scrollen auf kleinen Bildschirmen */ overflow-x: visible; } /* Falls das Theme ein ::before / ::after für die Linie nutzt */ .fusion-filters::before, .fusion-filters::after { display: none !important; } /* Slider/Unterstrich komplett ausblenden (dein JS erzeugt .sj-underline) */ .sj-underline { display: none !important; } /* Die einzelnen Filter-Elemente als Buttons stylen */ .fusion-filters .fusion-filter { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; padding: 9px 16px; margin: 6px 6px 6px 0; background-color: #3c7198 !important; /* gewünschte Buttonfarbe */ color: #ffffff !important; /* Schrift weiß */ border-radius: 10px; box-shadow: 0 2px 8px rgba(60,113,152,0.18); border: 0 !important; cursor: pointer; transition: box-shadow .18s ease, transform .12s ease, background-color .12s ease; text-decoration: none !important; -webkit-tap-highlight-color: transparent; } /* Link inside the filter: make it fill the button */ .fusion-filters .fusion-filter > a { color: #ffffff !important; text-decoration: none !important; display: inline-block; width: 100%; height: 100%; padding: 0; } /* Hover / Focus Effekt: leichter Glow */ .fusion-filters .fusion-filter:hover, .fusion-filters .fusion-filter:focus, .fusion-filters .fusion-filter:focus-visible { box-shadow: 0 8px 22px rgba(60,113,152,0.18), 0 0 18px rgba(60,113,152,0.12); /* Hover-Glow */ transform: translateY(-1px); outline: none; } /* Aktiver Zustand (wenn JS die Klasse .active / .fusion-active setzt) */ .fusion-filters .fusion-filter.active, .fusion-filters .fusion-filter.fusion-active { background-color: #2f5c76 !important; /* etwas dunkleres Active */ box-shadow: 0 10px 26px rgba(60,113,152,0.32); transform: translateY(-1px); } /* Fallback: machen wir Links innerhalb der Buttons nicht unterstrichen */ .fusion-filters .fusion-filter a, .fusion-filters .fusion-filter a:visited { text-decoration: none !important; color: #ffffff !important; } /* Accessibility: sichtbarer Fokus-Ring für Tastaturnutzer */ .fusion-filters .fusion-filter:focus-visible { box-shadow: 0 10px 26px rgba(60,113,152,0.28), 0 0 0 4px rgba(60,113,152,0.06); } /* =========================== Mobile-Optimierung =========================== */ /* Bei kleinen Bildschirmen: horizontal scrollbarer Button-Strip mit größerer Touchfläche */ @media (max-width: 767px) { .fusion-filters { display: flex; gap: 8px; padding: 10px 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; align-items: center; white-space: nowrap; } .fusion-filters .fusion-filter { flex: 0 0 auto; /* verhindert, dass Buttons umbrechen */ padding: 12px 18px; /* größere Touchfläche */ margin: 0 8px 0 0; border-radius: 12px; font-size: 15px; scroll-snap-align: start; } /* entferne evtl. Margin-Rechts vom letzten Element auf Mobile */ .fusion-filters .fusion-filter:last-child { margin-right: 0; } } /* Kleiner Feinschliff für sehr kleine Displays */ @media (max-width: 420px) { .fusion-filters .fusion-filter { padding: 10px 14px; font-size: 14px; border-radius: 10px; } }