/** * PTS Archive Filters – Dropdown-Filter für /projekte/ und /termine/ * * Alle Regeln sind unter .pts-archive-filters gekapselt. Bewusst KEINE * globalen Element-Selektoren (select, button, …), damit weder Theme noch * Elementor-Formulare beeinflusst werden. * * Umschaltung native Variante <-> Custom-Combobox passiert über die Klasse * `pts-js` am -Element. Sie wird synchron im gesetzt (siehe * PTS_Archive_Filters::print_head_snippet), damit es weder Flash noch * Layout-Shift gibt. Die beiden Grundregeln dazu stehen zusätzlich inline im * Head; hier werden sie der Vollständigkeit halber wiederholt. */ .pts-archive-filters { --pts-af-text: #3B5F68; --pts-af-text-strong: #253D41; /* Rahmen und Chevron bewusst heller als der Text: die Leiste ist Werkzeug, nicht Inhalt. Erst Hover und Fokus holen das kräftige Petrol (--pts-af-border-active) dazu. */ --pts-af-border: #A5C4CD; --pts-af-border-active: #55808B; --pts-af-chevron: #9BBAC4; --pts-af-bg: #FDFBF8; --pts-af-bg-hover: #FFFFFF; --pts-af-option-hover: #EDF2F3; --pts-af-option-active: #E3EBED; --pts-af-radius: 12px; --pts-af-radius-menu: 12px; --pts-af-height: 41px; --pts-af-gap: 9px; --pts-af-font-size: .84rem; /* Grundbreite eines Controls; je Filter unten überschrieben. */ --pts-af-w: 165px; --pts-af-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; display: block; /* Breite folgt dem umgebenden Elementor-/Loop-Container. */ width: 100%; max-width: 100%; margin-block-end: 1.25rem; /* Bewusst ohne Rahmen, Hintergrund oder Schatten: der Block soll sich ruhig über dem Loop Grid einfügen und nicht wie ein Formular-Modul wirken. */ background: none; border: 0; padding: 0; } /* ── Werkzeugleiste statt Raster ───────────────────────────────────────── Ein Grid verteilt Spuren über die Containerbreite; genau das ließ die Filter wie einen eigenen Inhaltsblock wirken. Flexbox mit fester Breite je Feld nimmt nur so viel Platz, wie der längste Eintrag braucht, und lässt den Rest der Zeile leer – die Gruppe steht links am Content. */ .pts-archive-filters__grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--pts-af-gap); width: auto; max-width: 100%; } .pts-archive-filters__field { position: relative; /* Kein Wachsen, kein Schrumpfen: die Breite kommt aus --pts-af-w. */ flex: 0 0 auto; width: var(--pts-af-w); min-width: 0; max-width: 100%; } /* Breite je Filter, bemessen an der längsten Option plus Chevron. */ .pts-archive-filters__field--projekt-jahr { --pts-af-w: 130px; } .pts-archive-filters__field--projekt-genre { --pts-af-w: 168px; } .pts-archive-filters__field--termin-jahr { --pts-af-w: 120px; } .pts-archive-filters__field--termin-monat { --pts-af-w: 142px; } .pts-archive-filters__field--termin-ort { --pts-af-w: 195px; } .pts-archive-filters__field--rolle { --pts-af-w: 165px; } /* Echtes Label, nur visuell versteckt – niemals display:none, sonst verschwindet es auch für Screenreader. */ .pts-archive-filters__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ── Umschaltung native Variante / Custom-Combobox ───────────────────────── */ html.pts-js .pts-archive-filters__native, html.pts-js .pts-archive-filters__submit { display: none; } html:not(.pts-js) .pts-archive-filters__combo { display: none; } /* ── Gemeinsame Optik von Select und Trigger ─────────────────────────────── */ .pts-archive-filters__native { position: relative; display: block; width: 100%; } .pts-archive-filters__select, .pts-archive-filters__trigger { appearance: none; -webkit-appearance: none; -moz-appearance: none; display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; max-width: 100%; min-height: var(--pts-af-height); margin: 0; font-family: var(--pts-af-font); font-size: var(--pts-af-font-size); font-weight: 400; line-height: 1.2; text-align: start; color: var(--pts-af-text); background-color: var(--pts-af-bg); background-image: none; border: 1px solid var(--pts-af-border); border-radius: var(--pts-af-radius); box-shadow: none; padding: .4rem .7rem; cursor: pointer; transition: border-color .15s ease, color .15s ease, background-color .15s ease; } /* Das native Select bekommt rechts Platz für seinen Chevron. */ .pts-archive-filters__select { display: block; padding-inline-end: 1.9rem; text-overflow: ellipsis; } .pts-archive-filters__select:hover { color: var(--pts-af-text-strong); border-color: var(--pts-af-border-active); background-color: var(--pts-af-bg-hover); } .pts-archive-filters__select:focus { outline: none; border-color: var(--pts-af-border-active); color: var(--pts-af-text-strong); background-color: var(--pts-af-bg); } .pts-archive-filters__select:focus-visible { outline: 2px solid var(--pts-af-border-active); outline-offset: 2px; } /* ── Button-Normalisierung ─────────────────────────────────────────────── Trigger und Submit sind echte