/*
 * Durchsuchbares Straßenfeld der geführten Adressauswahl.
 *
 * Warum eine eigene Liste und kein <datalist>: Dessen Vorschläge sind
 * unverbindlich - der Browser lässt jede beliebige Eingabe stehen. Genau daran
 * scheiterte eine Buchung in der Pontoiser Str.: Der Kunde tippte
 * "Pontoiserstrasse", die Schreibweise des Entsorgers lautet aber
 * "Pontoiser Str.", und das Formular meldete, die Straße sei unbekannt.
 *
 * Gefärbt wird ausschließlich über die Entwurfsmarken (--color-*), damit die
 * Auswahl im Dunkelmodus mitzieht. Fest verdrahtete Farben ergäben dort weiße
 * Schrift auf weißem Grund.
 */

#strassenAuswahl {
    position: relative;
}

/*
 * Der Pfeil sitzt im Feld, nicht daneben. Die Klasse .btn wird bewusst
 * gemieden: site.css gibt jedem .btn eine Mindesthöhe von 2.95rem, runde Ecken,
 * einen Schatten und beim Überfahren ein translateY(-2px). Im Eingabefeld ergab
 * das einen überstehenden, schief wirkenden Kasten.
 */
.strassen-knopf {
    /* Standardmaessig unsichtbar. Erst wo der Entsorger Strassen fuehrt,
       blendet das Skript ihn ueber .hat-liste ein. */
    display: none;
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    color: var(--color-text-muted, #64748b);
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

#strassenAuswahl.hat-liste .strassen-knopf {
    display: flex;
}

.strassen-knopf[hidden] {
    display: none;
}

.strassen-knopf:hover:not(:disabled) {
    color: var(--color-text, #0f172a);
    background-color: var(--color-primary-softer, rgba(16, 185, 129, 0.08));
}

.strassen-knopf:disabled {
    opacity: 0.35;
    cursor: default;
}

.strassen-knopf i {
    transition: transform 0.15s ease;
}

/* Offene Liste, gedrehter Pfeil - sonst ist nicht zu sehen, was der Knopf tut. */
.strassen-knopf.offen i {
    transform: rotate(180deg);
}

/* Platz für den Pfeil - nur dort, wo er auch steht. */
#strassenAuswahl.hat-liste #adressStrasse {
    padding-right: 2.5rem;
}

.strassen-vorschlaege {
    position: absolute;
    z-index: 1056; /* über Bootstrap-Modals, in denen das Formular stehen kann */
    top: calc(100% + 0.25rem);
    left: 0;
    width: 100%;
    max-height: 16rem;
    overflow-y: auto;
    padding: 0;
    border: 1px solid var(--color-border-strong, rgba(15, 23, 42, 0.14));
    border-radius: 0.75rem;
    background: var(--color-surface-solid, #ffffff);
    box-shadow: 0 0.75rem 1.5rem rgba(15, 23, 42, 0.18);
}

.strassen-vorschlaege[hidden] {
    display: none;
}

.strassen-vorschlaege .list-group-item {
    padding: 0.55rem 0.9rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--color-text, #0f172a);
    cursor: pointer;
}

.strassen-vorschlaege .list-group-item + .list-group-item {
    border-top: 1px solid var(--color-border, rgba(15, 23, 42, 0.08));
}

/* Tastatur und Maus führen zur selben Hervorhebung - sonst wandert die
   Auswahl bei gemischter Bedienung unsichtbar weiter. */
.strassen-vorschlaege .list-group-item.aktiv,
.strassen-vorschlaege .list-group-item:hover {
    background-color: var(--color-primary-soft, rgba(16, 185, 129, 0.14));
    color: var(--color-text, #0f172a);
}

/* Der leere Zustand ist bewusst kein Listeneintrag: Er darf nicht wählbar sein. */
.strassen-vorschlaege .strassen-leer {
    cursor: default;
    color: var(--color-text-muted, #64748b);
}

.strassen-vorschlaege .strassen-leer:hover {
    background-color: transparent;
}