/* Cocktail-Suche und kombinierbare Filter */

.cocktail-filter-card {
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: clamp(0.9rem, 3vw, 1.2rem);
    background: var(--surface);
}

.cocktail-filter-form {
    display: grid;
    gap: 0.9rem;
}

.cocktail-search-row {
    display: grid;
    grid-template-columns:
        minmax(14rem, 1fr)
        auto
        auto;
    align-items: end;
    gap: 0.75rem;
}

.cocktail-search-field {
    min-width: 0;
}

.cocktail-search-field input {
    width: 100%;
}

.cocktail-advanced-filters {
    border-top: 1px solid var(--border);
    padding-top: 0.8rem;
}

.cocktail-advanced-filters > summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 800;
    list-style-position: inside;
}

.cocktail-advanced-filters[open] > summary {
    margin-bottom: 0.9rem;
}

.cocktail-filter-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(10rem, 1fr));
    gap: 0.75rem;
}

.cocktail-filter-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.65rem;
    margin-top: 0.9rem;
    border-top: 1px solid var(--border);
    padding-top: 0.9rem;
}

.active-filter-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 1.25rem;
}

.active-filter-heading {
    margin-right: 0.2rem;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.active-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid rgba(201, 159, 82, 0.4);
    border-radius: 999px;
    padding: 0.42rem 0.68rem;
    background: rgba(201, 159, 82, 0.07);
    color: var(--text);
    font-size: 0.76rem;
}

.active-filter-chip strong {
    color: var(--accent);
}

.cocktail-card-attributes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: auto;
}

@media (max-width: 1080px) {.cocktail-filter-grid {
        grid-template-columns:
            repeat(3, minmax(10rem, 1fr));
    }
}

@media (max-width: 780px) {.cocktail-search-row {
        grid-template-columns: 1fr 1fr;
    }

    .cocktail-search-field {
        grid-column: 1 / -1;
    }

    .cocktail-filter-grid {
        grid-template-columns:
            repeat(2, minmax(10rem, 1fr));
    }
}

@media (max-width: 540px) {.cocktail-search-row,
    .cocktail-filter-grid {
        grid-template-columns: 1fr;
    }

    .cocktail-search-field {
        grid-column: auto;
    }

    .cocktail-search-row > *,
    .cocktail-search-row button,
    .cocktail-search-row a,
    .cocktail-filter-footer > *,
    .cocktail-filter-footer button,
    .cocktail-filter-footer a {
        width: 100%;
    }

    .cocktail-filter-footer {
        display: grid;
        grid-template-columns: 1fr;
    }

    .cocktail-advanced-filters > summary {
        align-items: flex-start;
    }
}

/* Zutatengruppen und Zutatenkategorien */
.taxonomy-section { margin-top:1.25rem; border:1px solid var(--border); border-radius:1rem; padding:clamp(1rem,3vw,1.35rem); background:var(--surface); }
.taxonomy-section-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.taxonomy-section-header h2 { margin:.15rem 0 .35rem; }
.taxonomy-section-header p:last-child { margin:0; color:var(--text-muted); }
.taxonomy-create-form,.taxonomy-edit-form { display:grid; grid-template-columns:minmax(12rem,1fr) minmax(14rem,1.4fr) minmax(6rem,.35fr) auto auto; align-items:end; gap:.75rem; }
.taxonomy-create-form { margin-bottom:1rem; border:1px solid var(--border); border-radius:.85rem; padding:.9rem; background:var(--surface-soft); }
.taxonomy-category-form { grid-template-columns:minmax(12rem,1fr) minmax(12rem,1fr) minmax(6rem,.35fr) auto auto; }
.taxonomy-list { display:grid; gap:.75rem; }
.taxonomy-card { border:1px solid var(--border); border-radius:.85rem; padding:.85rem; background:var(--surface-soft); }
.taxonomy-card .taxonomy-edit-form { grid-template-columns:minmax(12rem,1fr) minmax(14rem,1.4fr) minmax(6rem,.35fr) auto minmax(10rem,auto) auto; }
.taxonomy-card .taxonomy-category-form { grid-template-columns:minmax(12rem,1fr) minmax(12rem,1fr) minmax(6rem,.35fr) auto minmax(7rem,auto) auto; }
.taxonomy-active-field { align-self:center; margin-bottom:.45rem; }
.taxonomy-usage { display:flex; flex-wrap:wrap; gap:.35rem; align-self:center; }
.taxonomy-delete-form { display:flex; justify-content:flex-end; margin-top:.75rem; border-top:1px solid var(--border); padding-top:.75rem; }
@media (max-width:1100px) {.taxonomy-create-form,.taxonomy-category-form,.taxonomy-card .taxonomy-edit-form,.taxonomy-card .taxonomy-category-form { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .taxonomy-description-field,.taxonomy-usage { grid-column:1/-1; }
}
@media (max-width:620px) {.taxonomy-section-header { flex-direction:column; }
 .taxonomy-create-form,.taxonomy-category-form,.taxonomy-card .taxonomy-edit-form,.taxonomy-card .taxonomy-category-form { grid-template-columns:1fr; }
 .taxonomy-description-field,.taxonomy-usage { grid-column:auto; }
 .taxonomy-create-form button,.taxonomy-edit-form button,.taxonomy-delete-form,.taxonomy-delete-form button { width:100%; }
}

/* Bearbeitbare Cocktailmerkmale */

.characteristic-section {
    margin-top: 1.25rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: clamp(1rem, 3vw, 1.35rem);
    background: var(--surface);
}

.characteristic-create-form,
.characteristic-edit-form {
    display: grid;
    grid-template-columns:
        minmax(10rem, 1fr)
        minmax(14rem, 1.5fr)
        minmax(6rem, 0.35fr)
        auto
        auto;
    align-items: end;
    gap: 0.75rem;
}

.characteristic-create-form {
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    padding: 0.9rem;
    background: var(--surface-soft);
}

.characteristic-list,
.characteristic-assignment-list {
    display: grid;
    gap: 0.75rem;
}

.characteristic-card,
.characteristic-assignment-card {
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    padding: 0.85rem;
    background: var(--surface-soft);
}

.characteristic-edit-form {
    grid-template-columns:
        minmax(10rem, 1fr)
        minmax(14rem, 1.5fr)
        minmax(6rem, 0.35fr)
        auto
        auto
        auto;
}

.characteristic-assignment-card {
    display: grid;
    grid-template-columns:
        minmax(12rem, 0.7fr)
        minmax(18rem, 2fr)
        auto;
    align-items: center;
    gap: 1rem;
}

.characteristic-checkboxes,
.cocktail-characteristics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.characteristic-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.38rem 0.62rem;
    background: var(--surface);
    font-size: 0.78rem;
    cursor: pointer;
}

.characteristic-chip {
    border: 1px solid rgba(201, 159, 82, 0.4);
    border-radius: 999px;
    padding: 0.3rem 0.55rem;
    background: rgba(201, 159, 82, 0.08);
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 700;
}

@media (max-width: 1000px) {.characteristic-create-form,
    .characteristic-edit-form,
    .characteristic-assignment-card {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .characteristic-description,
    .characteristic-checkboxes {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {.characteristic-create-form,
    .characteristic-edit-form,
    .characteristic-assignment-card {
        grid-template-columns: 1fr;
    }

    .characteristic-description,
    .characteristic-checkboxes {
        grid-column: auto;
    }

    .characteristic-create-form button,
    .characteristic-edit-form button,
    .characteristic-assignment-card button {
        width: 100%;
    }
}