/* ============================================================ pixSelect – einheitliche, OS-unabhängige Dropdowns für angewandt. Übernommen aus dem pixCMS und auf das DUNKLE Design von ticketseinfach.de umgestellt: Das Original ist hell (weiße Fläche, graue Rahmen) und würde hier wie ein Fremdkörper wirken. Das native oder class="no-pixselect". ============================================================ */ :root { --pixsel-bg: #0d0d0d; --pixsel-panel: #16181a; --pixsel-rand: rgba(255, 255, 255, .14); --pixsel-text: #ffffff; --pixsel-grau: #8a8f95; --pixsel-akzent: #0db17b; } .pixsel { position: relative; width: 100%; } /* Unsichtbares Overlay über dem Trigger: bleibt Submit-Quelle und verankert die Browser-Validierung (required) an der sichtbaren Stelle; Klicks gehen dank pointer-events:none an den Trigger. */ .pixsel-native { position: absolute !important; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; } /* Trigger übernimmt die Optik der übrigen Formularfelder */ .pixsel-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; background: var(--pixsel-bg); border: 1px solid var(--pixsel-rand); border-radius: 12px; padding: 13px 14px; font-size: 15px; line-height: 1.4; text-align: left; color: var(--pixsel-text); cursor: pointer; font-family: inherit; transition: border-color .2s, box-shadow .2s; } .pixsel-trigger:hover { border-color: rgba(13, 177, 123, .5); } .pixsel.is-open > .pixsel-trigger, .pixsel-trigger:focus-visible { border-color: var(--pixsel-akzent); outline: none; box-shadow: 0 0 0 3px rgba(13, 177, 123, .15); } .pixsel-trigger.is-placeholder .pixsel-value { color: var(--pixsel-grau); } .pixsel-trigger:disabled { background: #121212; color: var(--pixsel-grau); cursor: not-allowed; opacity: .7; } .pixsel-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pixsel-arrow { flex-shrink: 0; width: 13px; height: 13px; color: var(--pixsel-akzent); transition: transform .2s ease; } .pixsel.is-open > .pixsel-trigger .pixsel-arrow { transform: rotate(180deg); } /* Das Panel hängt am und ist position:fixed – so schneidet es keine Kachel mit overflow:hidden ab. */ .pixsel-panel { position: fixed; z-index: 2000; min-width: 160px; background: var(--pixsel-panel); border: 1px solid var(--pixsel-rand); border-radius: 14px; padding: 6px; box-shadow: 0 18px 44px rgba(0, 0, 0, .55); max-height: 280px; overflow-y: auto; overscroll-behavior: contain; opacity: 0; transform: translateY(-6px); transition: opacity .14s ease, transform .14s ease; scrollbar-color: var(--pixsel-akzent) #101214; scrollbar-width: thin; } .pixsel-panel.is-visible { opacity: 1; transform: translateY(0); } .pixsel-panel::-webkit-scrollbar { width: 8px; } .pixsel-panel::-webkit-scrollbar-track { background: #101214; border-radius: 8px; } .pixsel-panel::-webkit-scrollbar-thumb { background: var(--pixsel-akzent); border-radius: 8px; } .pixsel-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 14.5px; color: #e6e8ea; cursor: pointer; transition: background .12s, color .12s; } .pixsel-opt.is-active { background: rgba(13, 177, 123, .14); color: #fff; } .pixsel-opt.is-selected { font-weight: 700; color: var(--pixsel-akzent); } .pixsel-opt.is-selected::after { content: "\2713"; margin-left: auto; font-weight: 700; } .pixsel-opt.is-disabled { color: #5c6166; cursor: not-allowed; } .pixsel-opt.is-disabled.is-active { background: none; } /* Gruppen () */ .pixsel-optgroup-label { padding: 10px 12px 5px; font-size: 11.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--pixsel-grau); } /* Kein Suchfeld-Flackern auf Mobilgeräten */ @media (max-width: 600px) { .pixsel-trigger { font-size: 16px; } /* < 16px lässt iOS hineinzoomen */ .pixsel-opt { padding: 12px; font-size: 15px; } } /* Wer Bewegung reduziert haben will, bekommt keine */ @media (prefers-reduced-motion: reduce) { .pixsel-panel, .pixsel-arrow, .pixsel-trigger { transition: none; } }