/* =========================================================
   Suchfeld (komponenten/Suchfeld.php)
   ========================================================= */
#suche {
    position: absolute;
    top: -80px;
    right: 15px;
    z-index: 110;
}

/* Container für Select und Icon */
#suche .select_wrapper {
    position: relative;
    float: left;
    margin: 0 10px 0 0;
    height: 21px;
}

/* Gemeinsame Basisstile für alle Eingabefelder */
#suche select.select_kat,
#suche .input_suche {
    float: left;
    height: 21px;
    margin: 0;
    /*noinspection CssNoGenericFontName*/
    font-family: var(--font-family);
    font-size: 11px;
    color: var(--text-color);
    border: 1px solid var(--icon-button-bg);
    box-sizing: border-box;
}

#suche select.select_kat:focus-visible,
#suche .input_suche:focus-visible {
    outline: none;
}

/* Natives Select im Look des bisherigen Feldes */
#suche select.select_kat {
    width: 180px; /* Bietet Raum für Text (~150px) + Icon-Abstand */
    padding: 2px 25px 3px 5px; /* rechts 25px Abstand für das Icon */
    background-color: var(--background-color-4);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    -moz-border-radius: 0;
    color: var(--text-color);
    opacity: 1;
}

/* Text-Eingabefeld für Suchbegriff */
#suche .input_suche {
    width: 150px;
    padding: 3px 3px 4px 3px;
    background-color: #fff;
}

/* Pfeil-Icon als Klick-Overlay */
#suche .select_wrapper .select_icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 21px;
    height: 21px;
    pointer-events: none; /* Klicks gehen direkt auf das darunterliegende Select */
    border: none;
}

/* Such-Absende-Button */
#suche button.suchbtn {
    display: flex;
    float: left;
    border: none;
    cursor: pointer;
}

#suche button.icon-button:hover {
    color: var(--icon-button-color);
    background-color: var(--icon-button-bg);
}