/** * @file * Styles für die Progressive-Enhancement-Filter-UI (messe_filter). * * - BEM-Namespacing unter .messe-filter * - Farben über CSS Custom Properties (WKO-Gelb #F0A500 als Akzent) * - Mobile: Branchen-Panel als Drawer + horizontal scrollbare Chips * - WCAG 2.1 AA: sichtbare :focus-visible-Outlines, ausreichende Kontraste, * reduzierte Bewegung respektiert (prefers-reduced-motion) */ .messe-filter { /* ── Design-Tokens (hier zentral überschreibbar) ── */ --mf-accent: #f0a500; /* WKO-Gelb */ --mf-accent-ink: #1a1a1a; /* Textfarbe auf Akzent (Kontrast AA) */ --mf-accent-hover: #d99400; --mf-ink: #1a1a1a; --mf-muted: #5c5c5c; --mf-border: #cfcfcf; --mf-surface: #ffffff; --mf-surface-2: #f5f5f5; --mf-radius: 999px; /* Pill-Radius */ --mf-radius-box: 10px; --mf-focus: #1a73e8; /* deutlich sichtbarer Fokusring */ --mf-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); margin: 0 0 1.5rem; color: var(--mf-ink); font-family: inherit; } /* Native Drupal-Widgets verstecken – Werte werden weiterhin submittet. */ .messe-filter__native-hidden { display: none !important; } /* FOUC-Schutz: Sobald JS aktiv ist (Drupal setzt früh ), * die nativen Branche-/Firma-Widgets sofort verstecken – BEVOR das Behavior * die Chips gebaut hat. So blitzt das alte Details-/Checkbox-UI nicht auf. * Dieses CSS wird nur auf der Aussteller-View geladen, daher sicher gescoped. * - details = der collapsible Branchen-Filter (einziges

im Formular) * - Textfeld = das Firmenname-/Titel-Feld * Das Messe-Select bleibt sichtbar (wird nicht von der Chip-UI ersetzt). */ html.js .views-exposed-form details, html.js .views-exposed-form .js-form-type-textfield { display: none; } /* ── Topbar: Suche + (mobil) Filter-Button + Zähler ── */ .messe-filter__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-bottom: 1rem; } /* ── Suchfeld ── */ .messe-filter__search { position: relative; flex: 1 1 280px; display: flex; align-items: center; } .messe-filter__search-icon { position: absolute; left: 0.85rem; width: 20px; height: 20px; color: var(--mf-muted); pointer-events: none; } .messe-filter__search-input { width: 100%; height: 48px; padding: 0 2.75rem 0 2.75rem; font-size: 1rem; color: var(--mf-ink); background: var(--mf-surface); border: 1px solid var(--mf-border); border-radius: var(--mf-radius-box); -webkit-appearance: none; appearance: none; } .messe-filter__search-input::placeholder { color: var(--mf-muted); } .messe-filter__search-input:focus { outline: none; border-color: var(--mf-accent); box-shadow: 0 0 0 3px rgba(240, 165, 0, 0.35); } /* Native Such-Clear (X) der Browser ausblenden, wir liefern unseren eigenen. */ .messe-filter__search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .messe-filter__search-clear { position: absolute; right: 0.5rem; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; font-size: 1.4rem; line-height: 1; color: var(--mf-muted); background: transparent; border: 0; border-radius: 50%; cursor: pointer; } .messe-filter__search-clear:hover { background: var(--mf-surface-2); color: var(--mf-ink); } /* ── Ergebniszähler ── */ .messe-filter__count { margin-left: auto; display: flex; align-items: baseline; gap: 0.35rem; white-space: nowrap; transition: opacity 0.25s ease; } .messe-filter__count.is-updating { opacity: 0.35; } .messe-filter__count-num { font-size: 1.6rem; font-weight: 700; line-height: 1; color: var(--mf-ink); } .messe-filter__count-label { font-size: 0.95rem; color: var(--mf-muted); } /* ── Filter-Toggle: Branche ein-/ausklappen (alle Viewports sichtbar) ── */ .messe-filter__toggle { display: inline-flex; align-items: center; gap: 0.45rem; height: 44px; padding: 0 0.9rem; font-size: 0.95rem; font-weight: 600; color: var(--mf-ink); background: var(--mf-surface); border: 1.5px solid var(--mf-border); border-radius: var(--mf-radius-box); cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; } .messe-filter__toggle:hover { border-color: var(--mf-accent); } /* Deutlicher Hinweis, dass Filter aktiv sind (auch im eingeklappten Zustand). */ .messe-filter__toggle.has-active { border-color: var(--mf-accent); background: rgba(240, 165, 0, 0.08); } .messe-filter__toggle-icon { width: 16px; height: 16px; color: var(--mf-muted); } .messe-filter__toggle-chevron { width: 14px; height: 14px; color: var(--mf-muted); transition: transform 0.2s ease; } .messe-filter__toggle[aria-expanded="true"] .messe-filter__toggle-chevron { transform: rotate(180deg); } .messe-filter__toggle-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; font-size: 0.8rem; font-weight: 700; color: var(--mf-accent-ink); background: var(--mf-accent); border-radius: var(--mf-radius); } /* ── Panel mit Chips ── * Desktop (≥ 768px): Inline-Disclosure (eingeklappt per Default). * Mobile (< 768px): Bottom-Drawer, der von unten einfährt (Media-Query unten). * Scroll-Lock + Backdrop werden rein aus dem .is-open-Zustand per CSS abgeleitet * (siehe :has() unten) – so kann nach einem AJAX-Reload NICHTS hängenbleiben. */ .messe-filter__panel { display: none; } @media (min-width: 768px) { .messe-filter__panel.is-open { display: block; margin-top: 0.85rem; padding: 1rem 1.1rem; background: var(--mf-surface-2); border: 1px solid var(--mf-border); border-radius: var(--mf-radius-box); } } .messe-filter__panel-head { display: none; /* nur im mobilen Drawer sichtbar */ align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--mf-border); } .messe-filter__panel-title { font-size: 1.1rem; font-weight: 700; } .messe-filter__panel-close { width: 36px; height: 36px; font-size: 1.6rem; line-height: 1; background: transparent; border: 0; cursor: pointer; color: var(--mf-ink); } /* ── Chips ── */ .messe-filter__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; } .messe-filter__chip { display: inline-flex; align-items: center; padding: 0.35rem 0.8rem; font-size: 0.9rem; font-weight: 600; line-height: 1.2; color: var(--mf-ink); background: transparent; border: 1.5px solid var(--mf-border); border-radius: var(--mf-radius); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.05s ease; } .messe-filter__chip:hover { border-color: var(--mf-accent); color: var(--mf-accent-hover); } .messe-filter__chip:active { transform: scale(0.97); } /* Aktiver (gefüllter) Zustand */ .messe-filter__chip.is-active { color: var(--mf-accent-ink); background: var(--mf-accent); border-color: var(--mf-accent); } .messe-filter__chip.is-active:hover { background: var(--mf-accent-hover); border-color: var(--mf-accent-hover); color: var(--mf-accent-ink); } /* ── Aktive-Filter-Zusammenfassung ── */ .messe-filter__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1rem; padding: 0.75rem 1rem; background: var(--mf-surface-2); border-radius: var(--mf-radius-box); } .messe-filter__summary-label { font-weight: 600; color: var(--mf-muted); } .messe-filter__summary-tags { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; } .messe-filter__tag { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.65rem; font-size: 0.9rem; font-weight: 600; color: var(--mf-accent-ink); background: var(--mf-accent); border: 0; border-radius: var(--mf-radius); cursor: pointer; } .messe-filter__tag-x { font-size: 1.15rem; line-height: 1; } .messe-filter__tag:hover { background: var(--mf-accent-hover); } .messe-filter__reset { margin-left: auto; padding: 0.3rem 0.4rem; font-size: 0.9rem; font-weight: 600; color: var(--mf-focus); text-decoration: underline; background: transparent; border: 0; cursor: pointer; } .messe-filter__reset:hover { color: var(--mf-accent-hover); } /* ── Backdrop (nur mobil) ── */ .messe-filter__backdrop { display: none; } /* ── Sichtbarer Tastatur-Fokus (WCAG 2.4.7) ── */ .messe-filter__chip:focus-visible, .messe-filter__tag:focus-visible, .messe-filter__reset:focus-visible, .messe-filter__toggle:focus-visible, .messe-filter__search-clear:focus-visible, .messe-filter__panel-close:focus-visible { outline: 3px solid var(--mf-focus); outline-offset: 2px; } /* ── MOBILE (< 768px): Bottom-Drawer, der von unten einfährt ── */ @media (max-width: 767.98px) { .messe-filter__count { /* Zähler in eigene Zeile, links ausgerichtet. */ margin-left: 0; flex-basis: 100%; order: 3; } /* Panel als Bottom-Drawer. Immer im DOM (display:block), per transform versteckt; öffnet durch Hochfahren. */ .messe-filter__panel { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001; max-height: 80vh; overflow-y: auto; background: var(--mf-surface); border-radius: var(--mf-radius-box) var(--mf-radius-box) 0 0; box-shadow: var(--mf-shadow); transform: translateY(100%); transition: transform 0.28s ease; } .messe-filter__panel.is-open { transform: translateY(0); } /* Drawer-Kopf mit Titel + Schließen-Button (nur mobil sichtbar). */ .messe-filter__panel-head { display: flex; position: sticky; top: 0; z-index: 1; background: var(--mf-surface); } .messe-filter__chips { padding: 1rem 1.25rem 1.5rem; gap: 0.6rem; } .messe-filter__chip { padding: 0.6rem 1.1rem; /* größere Touch-Targets (≥ 44px Höhe) */ } /* Backdrop + Scroll-Lock werden allein aus .is-open abgeleitet – kein JS, daher nach AJAX-Reload nicht „klemmbar". Backdrop ist Geschwister des Panels. */ .messe-filter__panel.is-open ~ .messe-filter__backdrop { display: block; position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.45); } html:has(.messe-filter__panel.is-open) { overflow: hidden; } } /* ── Bewegungsreduktion respektieren ── */ @media (prefers-reduced-motion: reduce) { .messe-filter__chip, .messe-filter__panel, .messe-filter__count { transition: none; } }