/* --- Filter Section Container --- */
.filter-section {
    /* padding-block wird nicht mehr benötigt, da die Höhe durch den Inhalt bestimmt wird */
    padding-bottom: 1rem; /* 16px Abstand zum Grid darunter */
}

.dropdown-item-icon {
    width: 18px; /* Grösse des Icons */
    height: 18px;
    flex-shrink: 0; /* Verhindert, dass das Icon schrumpft */
    margin-top: 0.2rem; /* 3.2px Abstand nach oben (Phone) */
    transition: color 0.2s ease-in-out;
}
.dropdown-item-icon .radio-inner-circle {
    opacity: 0; /* Der innere Kreis ist standardmässig unsichtbar */
    transition: opacity 0.2s ease-in-out;
}

/* Zeigt den inneren Kreis an, wenn das Listenelement ausgewählt ist */
.dropdown-options--filter li[aria-selected="true"] .radio-inner-circle {
    opacity: 1;
}

/* Setzt die Farbe des aktiven Icons auf die Markenfarbe */
.dropdown-options--filter li[aria-selected="true"] .dropdown-item-icon {
    color: var(--brand);
}

/* Setzt die Farbe des Titels im aktiven Listenelement auf die Markenfarbe */
.dropdown-options--filter li[aria-selected="true"] .option-title {
    color: var(--brand);
}

.option-text-wrapper {
    display: flex;
    flex-direction: column;
    min-width: 0; /* WICHTIG: Erlaubt dem Flex-Item, kleiner als sein Inhalt zu werden */
}

.option-description {
    color: var(--sub-black);
    font-weight: 400; /* Stellt sicher, dass der Beschreibungstext Regular ist */
}

.option-meta {
    margin: 0;
    /* Limitiert den gesamten Meta-Text (Label + Keywords) auf maximal 2 Zeilen */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    max-height: 2.5rem; /* Fallback für Browser, die -webkit-line-clamp nicht unterstützen (2 * 1.25rem Zeilenhöhe) */
}

.option-keywords {
    /* Styles entfernt, da das Clipping nun auf dem Eltern-Element .option-meta passiert */
}

/* Verhindert Umbrüche innerhalb eines Keywords (z.B. bei Bindestrichen) */
.option-keyword {
    white-space: nowrap;
}

/* Klasse, um das Grid zu verstecken, während es lädt, um Layout-Sprünge zu vermeiden */
.grid-loading .project-tile {
    opacity: 0;
}

/* Utility-Klasse für die Filterlogik */
.hidden {
    display: none;
}

/* Tablet: Icon-Abstand anpassen (grössere Line-Height) */
@media (min-width: 600px) {
    .dropdown-item-icon {
        margin-top: 0.3125rem; /* 5px */
    }
}

/* Responsive Anpassung der Listenbreite: Laptop/Desktop auf 8 Spalten begrenzen */
@media (min-width: 992px) {
    .dropdown-options--filter li {
        max-width: 804px; /* Entspricht 8 Spalten (wie Tablet) */
    }
}