/**
 * awv/contact-form — Grundgerüst für das eigene Auswahlmenü.
 *
 * Bewusst nur das Funktionale: Positionierung, Sichtbarkeit, Trefferflächen.
 * Aussehen (Rahmen, Radius, Farben, Pfeil) gehört ins Theme — es soll sich
 * nicht vom Rest der Formularfelder unterscheiden. Die Hooks dafür:
 *   .cf-select__button   Auslöser, sieht aus wie ein Eingabefeld
 *   .cf-select__list     aufgeklappte Liste
 *   .cf-select__option   einzelne Option, .is-selected = gewählt
 *   .cf-select--empty    noch nichts gewählt (Platzhalter sichtbar)
 *
 * Der entscheidende Punkt gegenüber dem nativen Menü: left/right 0 binden die
 * Liste an die Breite des Feldes — genau das, was iOS beim Systemmenü nicht tut.
 */

.cf-select {
    position: relative;
}

/* Solange das Skript nicht gelaufen ist, bleibt das native Feld sichtbar. */
.cf-select--enhanced .cf-select__native {
    display: none;
}

.cf-select__button {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.cf-select__list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 0.25rem);
    z-index: 20;
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
    max-height: 16rem;
    overflow-y: auto;
    background: #fff;
    -webkit-overflow-scrolling: touch;
}

.cf-select__list[hidden] {
    display: none;
}

.cf-select__option {
    /* 2.75rem ≈ 44 px: Zielgröße nach WCAG 2.5.8 auch auf dem Touchscreen. */
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    padding: 0.5rem 1.25rem;
    cursor: pointer;
}

.cf-select__option:hover {
    background: rgba(0, 0, 0, 0.06);
}