/* =========================================================
LiSo MäuseWerk
SUCHE & FILTER (gemeinsam)

   Gemeinsam genutzt von uebersicht.html und lexikon.html:
   Suchfeld-Löschen-Button, Filter-Buttons, "Keine Ergebnisse".
   Einbinden VOR der jeweiligen Seiten-CSS:
   <link rel="stylesheet" href="css/suche-filter.css">
========================================================= */

.clear-search {

width: 38px;
height: 38px;

margin-right: 7px;

border: 0;

border-radius: 50%;

background: transparent;

color: #aaa4ae;

font-size: 1.3rem;

cursor: pointer;

}

.clear-search:hover {

background: var(--cream);

color: var(--dark);

}

.filter-row {

display: flex;

align-items: center;

justify-content: center;

flex-wrap: wrap;

gap: 10px;

margin-top: 10px;

}

.filter-label {

margin-right: 5px;

color: var(--soft-dark);

font-size: 0.72rem;

font-weight: 700;

text-transform: uppercase;

letter-spacing: 0.08em;

}

.filter-buttons {

display: flex;

align-items: center;

justify-content: center;

flex-wrap: wrap;

gap: 7px;

}

.filter-button {

padding: 7px 15px;

border:
    1px solid
    #e3dfe5;

border-radius: 100px;

background: var(--white);

color: var(--dark);

font-size: 0.75rem;

font-weight: 600;

cursor: pointer;

transition:
    all 0.2s ease;

}

.filter-button:hover {

transform: translateY(-1px);

border-color: var(--lilac);

}

.filter-button.active {

border-color: var(--dark);

background: var(--dark);

color: var(--white);

}

.no-results {

display: none;

padding: 70px 20px 90px;

text-align: center;

}

.no-results.show {

display: block;

}

.no-results-circle {

width: 75px;
height: 75px;

margin: 0 auto 20px;

display: flex;

align-items: center;

justify-content: center;

border-radius: 50%;

background: var(--cream);

font-size: 1.7rem;

}

.no-results h2 {

margin-bottom: 10px;

font-size: 2rem;

}

.no-results p {

color: var(--soft-dark);

font-size: 0.85rem;

}