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

/* Eingabefelder – Schrift muss gesetzt werden, Inputs erben sie nicht */
#suche .input_kat,
#suche .input_suche {
    float: left;
    height: 21px;
    margin: 0;
    padding: 3px 3px 4px 3px;
    /*noinspection CssNoGenericFontName*/
    font-family: var(--font-family);
    font-size: 11px;
    color: var(--text-color);
    border: 1px solid var(--icon-button-bg);
}

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

#suche .input_kat {
    cursor: pointer;
}

/* Icon-Buttons: Größe/Zentrierung kommen aus .icon-button */
#suche a.select {
    float: left;
    margin: 0 10px 0 0;
}

#suche a.select span {
    display: none;
}

#suche button.suchbtn {
    display: flex;
    float: left;
    border: none;
}

/* Kategorie-Auswahl */
#suche .kat_box {
    position: absolute;
    top: 21px;
    left: 0;
    z-index: 1220;
    width: 159px;
    background-color: var(--background-color-2);
    border: 1px solid var(--icon-button-bg);
    border-top: none;
}

#suche a.search_select {
    display: block;
    margin: 1px 0 0 0;
    padding: 3px;
    /*noinspection CssNoGenericFontName*/
    font-family: var(--font-family);
    font-size: 11px;
    color: var(--text-color) !important;
    text-decoration: none !important;
    background: var(--background-color-4);
}

#suche a.search_select:hover,
#suche a.search_select:focus {
    background: var(--background-color-1);
}

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