/* ==============================
   @version v3
   filters.css
   - Filter-Leiste
   - Suchfeld
   - Filter-Buttons
   - Filter-Gruppen
   ============================== */

/* ==============================
   1. Filter-Leiste
   ============================== */


.filter-count {
    font-size: 0.9rem;
    opacity: 0.7;
}



/* ==============================
   2. Suchfeld
   ============================== */


.search-container 

.search-input-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.search-icon {
    position: absolute;
    left: 10px;
    color: rgba(255, 255, 255, 0.7);
}

#searchInput,
#themesSearchFilter {
    background: none;
    border: none;
    color: white;
    font-size: 1rem;
    width: 100%;
    outline: none;
    padding-left: 2rem;
}

#searchInput::placeholder,
#themesSearchFilter::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

#searchInput:focus,
#themesSearchFilter:focus {
    outline: var(--focus-outline-width) solid white;
    outline-offset: var(--focus-outline-offset);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.clear-button {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 50%;
}

.clear-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

/* ==============================
   3. Filter-Buttons
   ============================== */
/* Filter-Buttons Basisstil */
.filter-btn,
.standard-filter-btn,


.filter-btn:hover,
.standard-filter-btn:hover,
.profession-filter-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.filter-btn:focus,
.standard-filter-btn:focus,
.profession-filter-btn:focus,
.filter-btn:focus-visible,
.standard-filter-btn:focus-visible,
.profession-filter-btn:focus-visible {
    outline: var(--focus-outline-width) solid white;
    outline-offset: var(--focus-outline-offset);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* Spezifische Filter-Button-Stile */


.filter-btn[aria-pressed="true"] {
    background: rgba(255, 255, 255, 0.2);
    border-color: white;
}

/* Konformitätslevel-Buttons */
.filter-btn[data-level="A"] {
    border-color: var(--A);
}

.filter-btn[data-level="AA"] {
    border-color: var(--AA);
}

.filter-btn[data-level="AAA"] {
    border-color: var(--AAA);
}

.filter-btn[aria-pressed="true"][data-level="A"] {
    background: var(--A);
}

.filter-btn[aria-pressed="true"][data-level="AA"] {
    background: var(--AA);
}

.filter-btn[aria-pressed="true"][data-level="AAA"] {
    background: var(--AAA);
}

/* Standard-Filter-Buttons */
.standard

.standard-filter-btn[aria-pressed="true"] {
    background-color: rgba(255, 255, 255, 0.3);
    border-color: white;
}

/* ==============================
   4. Filter-Gruppen
   ============================== */








/* Berufsgruppen-Filter */


.profession-filter-btn[aria-pressed="true"] {
    background-color: rgba(255, 255, 255, 0.3);
    border-color: white;
}

/* Berufsgruppen-Farben für Buttons */
.profession-filter-btn
.profession-filter-btn
.profession-filter-btn
.profession-filter-btn
.profession-filter-btn
.profession-filter-btn
.profession-filter-btn
.profession-filter-btn
.profession-filter-btn
.profession-filter-btn

.profession-filter-btn[aria-pressed="true"]
.profession-filter-btn[aria-pressed="true"]
.profession-filter-btn[aria-pressed="true"]
.profession-filter-btn[aria-pressed="true"]
.profession-filter-btn[aria-pressed="true"]
.profession-filter-btn[aria-pressed="true"]
.profession-filter-btn[aria-pressed="true"]
.profession-filter-btn[aria-pressed="true"]
.profession-filter-btn[aria-pressed="true"]
.profession-filter-btn[aria-pressed="true"]

/* ==============================
   5. Anzeigeoptionen
   ============================== */




.toggle-option input[type="checkbox"] {
    margin-right: 10px;
}

/* ==============================
   6. Sortier-Kontrollen
   ============================== */
.sort-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sort-container label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.filter-select {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
}

.filter-select:focus {
    outline: var(--focus-outline-width) solid var(--primary);
    border-color: var(--primary);
}

.icon-button {
    background: none;
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color var(--transition-speed) ease;
}

.icon-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
}